:root{
  --brand:#4f46e5; --brand-soft:#eef2ff;
  --bg:#f1f5f9; --card:#fff; --text:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --side:#0f172a; --side-text:#cbd5e1; --radius:14px;
}
body.portal-admin{--brand:#4f46e5;--brand-soft:#eef2ff}
body.portal-staff{--brand:#7c3aed;--brand-soft:#ede9fe}
body.portal-agent{--brand:#0d9488;--brand-soft:#ccfbf1}
body.portal-customer{--brand:#ea580c;--brand-soft:#ffedd5}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:250px;background:var(--side);color:var(--side-text);display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;flex-shrink:0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:#fff;padding:0 8px}
.brand i{background:var(--brand);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:16px}
.portal-tag{margin:14px 8px 18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8}
.sidebar nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow:auto}
.sidebar nav a,.logout{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--side-text);font-weight:500;transition:.15s}
.sidebar nav a i,.logout i{width:18px;text-align:center}
.sidebar nav a:hover,.logout:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar nav a.active{background:var(--brand);color:#fff}
.logout{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 10px 10px;padding-top:16px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;background:var(--card);border-bottom:1px solid var(--line);padding:14px 26px;position:sticky;top:0;z-index:5}
.topbar h1{font-size:18px;margin:0;flex:1}
.icon-btn{display:none;border:0;background:var(--bg);width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:16px}
.user{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700}
.user-meta{display:flex;flex-direction:column;line-height:1.2}
.user-meta small{color:var(--muted)}
.content{padding:26px;display:flex;flex-direction:column;gap:22px}

/* ---------- cards ---------- */
.welcome h2{margin:0 0 4px;font-size:22px}
.welcome p{margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.stat{background:var(--card);border-radius:var(--radius);padding:18px;display:flex;align-items:center;gap:14px;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.stat-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:18px}
.t-brand{background:var(--brand-soft);color:var(--brand)}
.t-green{background:#dcfce7;color:#16a34a}
.t-amber{background:#fef3c7;color:#d97706}
.t-blue{background:#dbeafe;color:#2563eb}
.t-rose{background:#ffe4e6;color:#e11d48}
.stat-value{font-size:20px;font-weight:700}
.stat-label{color:var(--muted);font-size:12.5px;margin-top:2px}

.grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}
.panel{background:var(--card);border-radius:var(--radius);box-shadow:0 1px 2px rgba(15,23,42,.05);overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.panel-head h3{margin:0;font-size:15px}
.link{color:var(--brand);font-weight:600;font-size:13px}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:#f8fafc;padding:11px 20px;white-space:nowrap}
.tbl td{padding:13px 20px;border-top:1px solid var(--line);white-space:nowrap}
.tbl tbody tr:hover{background:#f8fafc}
.empty{text-align:center;color:var(--muted);padding:30px!important}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.b-green{background:#dcfce7;color:#15803d}
.b-amber{background:#fef3c7;color:#b45309}
.b-red{background:#fee2e2;color:#b91c1c}
.b-grey{background:#e2e8f0;color:#475569}

/* ---------- pipeline bars ---------- */
.bars{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.bar-row{display:grid;grid-template-columns:90px 1fr 28px;align-items:center;gap:10px;font-size:13px}
.bar{background:var(--bg);height:10px;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand);border-radius:99px}
.bar-row b{text-align:right}

/* ---------- login ---------- */
.auth-page{background:#fff}
.auth{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.auth-hero{background:linear-gradient(145deg,#312e81,#4f46e5 55%,#0d9488);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.auth-hero .brand i{background:rgba(255,255,255,.18)}
.auth-hero h2{font-size:34px;line-height:1.2;margin:18px 0 0}
.auth-hero p{opacity:.85;max-width:420px;line-height:1.6;margin:0}
.auth-hero ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:10px}
.auth-hero li i{margin-right:8px;color:#5eead4}
.auth-card-wrap{display:grid;place-items:center;padding:30px}
.auth-card{width:100%;max-width:410px;display:flex;flex-direction:column;gap:16px}
.auth-card h3{font-size:26px;margin:0}
.auth-card .muted{margin:-8px 0 4px}
.tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;background:var(--bg);padding:5px;border-radius:12px}
.tabs input{display:none}
.tabs label{text-align:center;padding:10px 6px;border-radius:9px;cursor:pointer;font-weight:600;font-size:13px;color:var(--muted);transition:.15s}
.tabs input:checked+label{background:#fff;color:#4f46e5;box-shadow:0 1px 4px rgba(15,23,42,.12)}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-weight:600;font-size:13px}
.field input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;outline:none;transition:.15s}
.field input:focus{border-color:#4f46e5;box-shadow:0 0 0 3px #e0e7ff}
.pw{position:relative}
.pw input{padding-right:44px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);cursor:pointer;width:34px;height:34px}
.btn{border:0;background:#4f46e5;color:#fff;padding:13px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;transition:.15s}
.btn:hover{background:#4338ca}
.alert{background:#fee2e2;color:#b91c1c;padding:11px 14px;border-radius:10px;font-size:13px}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .grid-2{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth-hero{display:none}
}
@media(max-width:820px){
  .sidebar{position:fixed;left:-260px;z-index:20;transition:.2s}
  .sidebar.open{left:0;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .icon-btn{display:block}
  .content{padding:16px}
  .topbar{padding:12px 16px}
  .user-meta{display:none}
}

/* ---------- sidebar groups ---------- */
.sidebar nav{scrollbar-width:thin;scrollbar-color:#334155 transparent}
.nav-group-btn{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;background:none;border-radius:10px;color:var(--side-text);font:inherit;font-weight:500;cursor:pointer;text-align:left;transition:.15s}
.nav-group-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-group-btn>i:first-child{width:18px;text-align:center}
.nav-group-btn span{flex:1}
.nav-group-btn .chev{font-size:10px;transition:.2s}
.nav-group.open .chev{transform:rotate(90deg)}
.nav-group-btn.active-parent{color:#fff}
.nav-sub{display:none;flex-direction:column;gap:4px;margin:4px 0 4px 18px;padding-left:12px;border-left:1px solid rgba(255,255,255,.1)}
.nav-group.open .nav-sub{display:flex}
.nav-sub a{padding:9px 12px!important;font-size:13px}

/* ---------- dashboard extras ---------- */
.stat-label{margin-top:0}
.stat-sub{font-size:11px;color:#94a3b8;margin-top:2px}
.page-sub{display:flex;justify-content:space-between;align-items:center;gap:12px}
.btn-sm{border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:9px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--text)}
.btn-sm:hover{background:var(--bg)}
.stats.cols-4{grid-template-columns:repeat(4,1fr)}
.legend{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding:16px 20px 4px}
.legend b{display:block;font-size:18px;margin-top:4px}
.legend small{color:var(--muted);font-size:11px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.d-blue{background:#2563eb}.d-green{background:#10b981}.d-red{background:#ef4444}.d-amber{background:#f59e0b}
.pipe{padding:10px 20px 20px;display:flex;flex-direction:column;gap:10px}
.pipe-row{display:grid;grid-template-columns:34px 1fr 28px;align-items:center;gap:10px;font-size:11px;color:var(--muted)}
.pipe-bar{display:flex;height:16px;border-radius:5px;overflow:hidden;background:var(--bg)}
.pipe-bar i{display:block;height:100%}
.pipe-bar .s-blue{background:#2563eb}.pipe-bar .s-green{background:#10b981}.pipe-bar .s-red{background:#ef4444}.pipe-bar .s-amber{background:#f59e0b}
.fin{padding:18px 20px}
.fin-big{text-align:center;font-size:30px;font-weight:700}
.fin-delta{text-align:center;font-size:12px;font-weight:600;margin-bottom:6px}
.up{color:#16a34a}.down{color:#dc2626}
.spark{width:100%;height:120px}
.fin-row{display:flex;justify-content:space-between;font-size:12.5px;padding:8px 0;border-top:1px solid var(--line)}
.fin-row b.g{color:#16a34a}.fin-row b.o{color:#d97706}
.remind{list-style:none;margin:0;padding:0}
.remind li{display:flex;gap:12px;padding:13px 20px;border-top:1px solid var(--line);align-items:flex-start}
.remind li:first-child{border-top:0}
.remind .rd{width:34px;height:34px;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex-shrink:0}
.remind strong{display:block;font-size:13px}
.remind small{color:var(--muted)}

/* ---------- forms (settings / profile / notes / roles) ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:20px}
.form-grid .full{grid-column:1/-1}
.form-grid .field textarea,.form-grid .field select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;outline:none;background:#fff}
.form-grid .field textarea:focus,.form-grid .field select:focus{border-color:var(--brand)}
.form-actions{padding:0 20px 20px;display:flex;gap:10px;align-items:center}
.form-actions .btn{padding:11px 22px;background:var(--brand)}
.flash{background:#dcfce7;color:#15803d;padding:11px 14px;border-radius:10px;font-size:13px}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.role-pills{display:flex;gap:8px;flex-wrap:wrap;padding:16px 20px}
.role-pills a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-weight:600;font-size:13px}
.role-pills a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
@media(max-width:960px){.stats.cols-4{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}}
.b-blue{background:#dbeafe;color:#1d4ed8}

/* ---------- leads page ---------- */
.lead-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tb-left{display:flex;gap:10px;flex-wrap:wrap}
.btn-sm{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.btn-sm.danger{color:#b91c1c;border-color:#fecaca}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:#2563eb;color:#fff;padding:11px 18px;border-radius:10px;font-weight:600;border:0;cursor:pointer}
.btn-primary:hover{background:#1d4ed8}
.lead-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.lcard{background:var(--card);border:2px solid transparent;border-radius:16px;padding:16px;box-shadow:0 1px 3px rgba(15,23,42,.07);display:flex;flex-direction:column;gap:12px;transition:.15s}
.lcard:hover{box-shadow:0 4px 14px rgba(15,23,42,.1)}
.lcard.on{border-color:#2563eb}
.lc-top{display:flex;align-items:center;gap:10px}
.lc-top .stat-icon{width:38px;height:38px;font-size:15px;flex-shrink:0}
.lc-label{font-size:11px;font-weight:700;letter-spacing:.07em;color:#475569}
.lc-num{display:flex;align-items:baseline;gap:8px}
.lc-num b{font-size:26px}
.lc-num small{font-size:11px;font-weight:600}
.lc-sub-blue{color:#2563eb}.lc-sub-green{color:#16a34a}.lc-sub-amber{color:#d97706}.lc-sub-rose{color:#e11d48}.lc-sub-brand{color:#7c3aed}
.lead-filters{background:var(--card);border-radius:16px;padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.lead-filters select,.lead-filters input[type=date],.searchbox{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#f8fafc;outline:none}
.searchbox{display:flex;align-items:center;gap:10px;color:var(--muted)}
.searchbox input{border:0;background:none;outline:none;font:inherit;width:100%}
.daterange{display:flex;align-items:center;gap:8px}
.filter-actions{display:flex;gap:8px;align-items:center}
.lead-tbl th:first-child,.lead-tbl td:first-child{padding-right:0}
.lead-id{background:#dbeafe;color:#1d4ed8;font-weight:600;padding:3px 9px;border-radius:6px;font-size:12px}
.fu-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:99px;border:1px solid var(--line);font-size:10px;margin-left:4px}
.tag{display:inline-block;background:#f1f5f9;border:1px solid var(--line);border-radius:5px;font-size:10px;font-weight:700;padding:1px 6px;color:#475569}
.row-actions{text-align:right}
.row-actions a,.row-actions button{border:0;background:none;color:#2563eb;cursor:pointer;margin-left:12px;font-size:14px}
.row-actions .del{color:#dc2626}
.bulk-bar{display:none;align-items:center;gap:10px;flex-wrap:wrap;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:10px 14px;margin-bottom:14px}
.bulk-bar.show{display:flex}
.bulk-bar select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit}
.pager{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--line);flex-wrap:wrap;gap:10px}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0;padding:20px}
.kv dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:3px}
.kv dd{margin:0;font-weight:500}
.kv .full{grid-column:1/-1}
.inline-form{display:flex;gap:10px;padding:18px 20px}
.inline-form select{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit}
@media(max-width:1100px){.lead-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.lead-cards{grid-template-columns:repeat(2,1fr)}.lead-filters{grid-template-columns:1fr}.kv{grid-template-columns:1fr}}
@media print{
  .sidebar,.topbar,.lead-toolbar,.lead-filters,.bulk-bar,.row-actions,.pager a,.lead-tbl th:first-child,.lead-tbl td:first-child,.lead-tbl th:last-child{display:none!important}
  body{background:#fff}.content{padding:0}.panel{box-shadow:none}
}
.cust-cards{grid-template-columns:repeat(4,1fr)}
.login-box{background:#f8fafc;border:1px dashed var(--line);border-radius:12px;padding:14px 16px}
@media(max-width:900px){.cust-cards{grid-template-columns:repeat(2,1fr)}}

/* ---------- companies page ---------- */
.cmp-filters{background:var(--card);border-radius:16px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.05);display:flex;flex-direction:column;gap:14px}
.cmp-bar{display:flex;gap:12px;align-items:center}
.cmp-bar .searchbox{flex:1;max-width:520px}
.cmp-bar .btn-sm:first-of-type{margin-left:auto}
.cmp-more{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:4px}
.cmp-more select,.cmp-more input[type=date]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#f8fafc}
.btn-sm.sync{background:#fffbeb;border-color:#fde68a;color:#92400e}
@media(max-width:900px){.cmp-more{grid-template-columns:1fr}.cmp-bar{flex-wrap:wrap}}
/* ======================================================================
   INVOICE / RECEIPT DOCUMENT  (admin + customer portals, print ready)
   ====================================================================== */
.inv-sheet{--ink:#0f172a;--soft:#64748b;--line:#e6eaf2;--ind:#312e81;--ind2:#4f46e5;--teal:#0d9488;
  max-width:880px;width:100%;margin:0 auto;background:#fff;border-radius:18px;box-shadow:0 12px 40px rgba(15,23,42,.13);overflow:hidden;position:relative;color:var(--ink);font-size:13px}
.inv-top{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:34px 40px;color:#fff;
  background:linear-gradient(120deg,#312e81 0%,#4f46e5 58%,#0d9488 130%)}
.inv-top::before{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08)}
.inv-top::after{content:"";position:absolute;right:120px;bottom:-110px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06)}
.inv-brand{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.inv-logo{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:22px;border:1px solid rgba(255,255,255,.25)}
.inv-brand b{display:block;font-size:20px;letter-spacing:.01em}
.inv-brand small{display:block;opacity:.8;margin-top:3px;font-size:12px}
.inv-title{text-align:right;position:relative;z-index:1}
.inv-title h2{margin:0;font-size:28px;letter-spacing:.2em;font-weight:800}
.inv-no{display:inline-block;margin-top:8px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);padding:5px 14px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.04em}
.inv-body{position:relative;padding:30px 40px 26px}
.inv-stamp{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-20deg);font-size:96px;font-weight:900;letter-spacing:.08em;white-space:nowrap;opacity:.07;pointer-events:none;user-select:none;z-index:0}
.inv-body>*:not(.inv-stamp){position:relative;z-index:1}
.st-paid{color:#16a34a}.st-overdue{color:#dc2626}.st-cancelled{color:#64748b}.st-partial{color:#d97706}.st-sent,.st-draft{color:#2563eb}
.inv-parties{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:18px}
.inv-parties.two{grid-template-columns:1fr 1fr}
.inv-card h6,.inv-pay h6{margin:0 0 8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ind2);font-weight:800}
.inv-card b{font-size:15px;display:block;margin-bottom:5px}
.inv-card p{margin:0;color:var(--soft);line-height:1.75;font-size:12.5px}
.inv-card p i{width:14px;color:#94a3b8;font-size:11px}
.inv-card p strong{color:var(--ink)}
.inv-meta{background:#f6f8fc;border:1px solid var(--line);border-radius:14px;padding:8px 16px;align-self:start}
.inv-meta>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed #d9e0ee}
.inv-meta>div:last-child{border-bottom:0}
.inv-meta span{color:var(--soft);font-size:12px}
.inv-meta b{font-size:12.5px;text-align:right}
.st-text{text-transform:uppercase;letter-spacing:.06em;font-size:11.5px!important}
.inv-trip{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:22px 0 20px;padding:14px 18px;background:linear-gradient(90deg,#eef2ff,#f0fdfa);border-left:4px solid var(--ind2);border-radius:12px}
.inv-trip-ic{width:38px;height:38px;border-radius:10px;background:var(--ind2);color:#fff;display:grid;place-items:center;font-size:15px;flex-shrink:0}
.inv-trip small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--soft);margin-bottom:2px}
.inv-trip b{font-size:13px}
.inv-trip-main{flex:1;min-width:160px}
.inv-items{width:100%;border-collapse:separate;border-spacing:0;margin-top:4px}
.inv-items thead th{background:var(--ind);color:#fff;text-align:left;padding:11px 14px;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.inv-items thead th:first-child{border-radius:10px 0 0 10px}.inv-items thead th:last-child{border-radius:0 10px 10px 0}
.inv-items td{padding:13px 14px;border-bottom:1px solid #eef1f7;vertical-align:top}
.inv-items tbody tr:nth-child(even) td{background:#fafbfe}
.inv-items .r,.inv-pay .r{text-align:right}
.inv-bottom{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;margin-top:22px;align-items:start}
.inv-words{background:#f6f8fc;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.inv-words small,.inv-note small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ind2);font-weight:800;margin-bottom:4px}
.inv-words b{font-size:12.5px;line-height:1.5}
.inv-note{margin-top:12px}
.inv-note p{margin:0;color:var(--soft);font-size:12px;line-height:1.65}
.inv-totals{background:#f6f8fc;border:1px solid var(--line);border-radius:16px;padding:10px 18px 14px}
.inv-totals .tr{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px dashed #d9e0ee;font-size:13px}
.inv-totals .tr span{color:var(--soft)}
.inv-totals .tr b.neg{color:#dc2626}.inv-totals .tr b.pos{color:#16a34a}
.inv-totals .grand{border-bottom:0;border-top:2px solid var(--ind);margin-top:4px;padding-top:13px;font-size:17px}
.inv-totals .grand span{color:var(--ind);font-weight:800}.inv-totals .grand b{color:var(--ind);font-size:20px;font-weight:800}
.inv-totals .due{border:0;border-radius:12px;padding:13px 16px;margin-top:10px;font-weight:800;font-size:15px}
.inv-totals .due span{font-weight:700}
.inv-totals .due.owed{background:linear-gradient(90deg,#fff7ed,#ffedd5);color:#c2410c}.inv-totals .due.owed span{color:#c2410c}
.inv-totals .due.clear{background:linear-gradient(90deg,#ecfdf5,#d1fae5);color:#047857}.inv-totals .due.clear span{color:#047857}
.inv-pay{margin-top:24px}
.inv-pay table{width:100%;border-collapse:collapse;font-size:12px}
.inv-pay th{text-align:left;padding:8px 10px;background:#f6f8fc;color:var(--soft);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
.inv-pay td{padding:9px 10px;border-bottom:1px solid #eef1f7}
.inv-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:34px}
.inv-thanks b{display:block;color:var(--ind);font-size:14px}
.inv-thanks span{color:var(--soft);font-size:12px}
.inv-sign{text-align:center;min-width:180px}
.inv-sign span{display:block;border-top:1.5px solid #94a3b8;margin-bottom:6px}
.inv-sign small{color:var(--soft);font-size:11px}
.inv-fine{margin-top:20px;padding-top:12px;border-top:1px dashed #d9e0ee;text-align:center;color:#94a3b8;font-size:11px}
.inv-bar{height:10px;background:linear-gradient(90deg,#312e81,#4f46e5,#0d9488)}
.inv-toolbar{max-width:880px;width:100%;margin:0 auto}
.inv-toolbar form{margin:0}
/* receipt */
.rcp-amount{text-align:center;padding:22px 16px;margin-bottom:22px;border-radius:16px;background:linear-gradient(135deg,#eef2ff,#ecfdf5);border:1px solid var(--line)}
.rcp-amount small{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--soft);font-weight:700}
.rcp-amount b{display:block;font-size:40px;color:var(--ind);margin:4px 0 6px;letter-spacing:-.01em}
.rcp-amount span{color:var(--soft);font-size:12.5px}
.rcp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
.rcp-grid>div{border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:#fff}
.rcp-grid span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--soft);margin-bottom:3px}
.rcp-grid b{font-size:13px}
/* invoice form */
.items-edit{padding:0 20px 8px}
.items-head{display:flex;justify-content:space-between;align-items:center;margin:4px 0 10px}
.items-head h4{margin:0;font-size:14px}
.items-edit .tbl td,.items-edit .tbl th{padding:8px 10px}
.items-edit .tbl input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;outline:none;background:#fff}
.items-edit .tbl input:focus{border-color:var(--brand)}
.items-edit .amt{text-align:right;font-weight:700}
.items-edit .rm{border:0;background:none;color:#dc2626;cursor:pointer;font-size:15px}
.items-foot{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-top:16px;align-items:start}
.items-foot .form-grid{align-items:start}
.items-foot textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;outline:none;resize:vertical}
.calc-box{background:#f6f8fc;border:1px solid var(--line);border-radius:14px;padding:8px 16px}
.calc-box>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed #d9e0ee}
.calc-box>div:last-child{border-bottom:0}
.calc-box span{color:var(--muted);font-size:13px}
.calc-box input{width:120px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;text-align:right}
.calc-box .grand{font-size:17px}.calc-box .grand b,.calc-box .grand span{color:#312e81;font-weight:800}
.field small.muted{font-size:11.5px}
@media(max-width:820px){
  .inv-top{flex-direction:column;align-items:flex-start;padding:24px}.inv-title{text-align:left}
  .inv-body{padding:22px 18px}.inv-parties,.inv-parties.two{grid-template-columns:1fr}.inv-bottom{grid-template-columns:1fr}
  .inv-items{display:block;overflow-x:auto}.inv-foot{flex-direction:column;align-items:flex-start}.inv-stamp{font-size:54px}
  .rcp-grid{grid-template-columns:1fr}.items-foot{grid-template-columns:1fr}
}
@media print{
  @page{size:A4;margin:9mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .inv-toolbar,.flash,.alert{display:none!important}
  .shell,.main{display:block}.content{padding:0;gap:0}
  .inv-sheet{box-shadow:none;border-radius:0;max-width:none}
  .inv-parties,.inv-bottom,.inv-foot,.inv-items tr{break-inside:avoid}
}

/* =====================================================================
   UNIFIED DESIGN SYSTEM  (must stay LAST - gives every page and every
   portal the same buttons, cards, tables, forms, badges and spacing)
   ===================================================================== */
body.portal-admin   {--brand-dark:#4338ca;--ring:rgba(79,70,229,.18)}
body.portal-staff   {--brand-dark:#6d28d9;--ring:rgba(124,58,237,.18)}
body.portal-agent   {--brand-dark:#0f766e;--ring:rgba(13,148,136,.2)}
body.portal-customer{--brand-dark:#c2410c;--ring:rgba(234,88,12,.2)}
:root{
  --brand-dark:#4338ca;--ring:rgba(79,70,229,.18);
  --r-sm:10px;--r-md:14px;--r-lg:18px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04);
  --shadow-md:0 6px 18px rgba(15,23,42,.08);
  --line:#e5eaf2;--bg:#f4f6fb;
}
html{-webkit-text-size-adjust:100%}
body{line-height:1.5;-webkit-font-smoothing:antialiased;background:var(--bg)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
::selection{background:var(--brand-soft);color:var(--brand-dark)}
*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}

/* ---- sidebar / topbar ---- */
.sidebar{background:linear-gradient(180deg,#0f172a 0%,#111c34 100%);border-right:1px solid rgba(255,255,255,.04)}
.brand{padding:0 8px 4px;letter-spacing:.01em}
.brand i{background:linear-gradient(145deg,var(--brand),var(--brand-dark));box-shadow:0 6px 14px var(--ring)}
.portal-tag{display:inline-block;margin:12px 8px 16px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.07);color:#cbd5e1;font-weight:600}
.sidebar nav a,.nav-group-btn,.logout{font-size:13.5px;border-radius:10px}
.sidebar nav a.active{background:linear-gradient(135deg,var(--brand),var(--brand-dark));box-shadow:0 6px 14px var(--ring)}
.nav-group-btn.active-parent{background:rgba(255,255,255,.06)}
.nav-sub a.active{background:rgba(255,255,255,.1)!important;box-shadow:none!important;color:#fff}
.nav-sub a.active i{color:#fff}
.logout{color:#fca5a5}.logout:hover{background:rgba(239,68,68,.12);color:#fecaca}
.topbar{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.topbar h1{font-size:18px;font-weight:700;letter-spacing:-.01em}
.avatar{background:linear-gradient(145deg,var(--brand),var(--brand-dark))}
.content{gap:18px;padding:24px 26px 36px}

/* ---- cards / panels ---- */
.panel,.stat,.lcard,.cmp-filters,.lead-filters,.rl-card,.ncard,.calc-box{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.panel{border-radius:var(--r-lg)}
.panel-head{padding:15px 20px;background:#fff}
.panel-head h3{font-size:15px;font-weight:700;letter-spacing:-.005em}
.stat,.lcard{transition:box-shadow .15s,transform .15s,border-color .15s}
.stat:hover,.lcard:hover{box-shadow:var(--shadow-md)}
a.lcard:hover{transform:translateY(-1px)}
.lcard{border-width:1px}
.lcard.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px var(--ring)}
.stat-icon{border-radius:12px}
.t-brand{background:var(--brand-soft);color:var(--brand)}
.lc-label{color:#64748b;letter-spacing:.08em}
.lc-num b{letter-spacing:-.01em}
.link{color:var(--brand)}.link:hover{color:var(--brand-dark);text-decoration:underline}

/* ---- buttons (one family, brand coloured) ---- */
.btn,.btn-primary,.btn-sm{font:inherit;font-weight:600;line-height:1.2;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}
.btn,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;color:#fff;border-radius:var(--r-sm);padding:11px 20px;font-size:13.5px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));box-shadow:0 4px 12px var(--ring)}
.btn:hover,.btn-primary:hover{background:linear-gradient(135deg,var(--brand-dark),var(--brand-dark));box-shadow:0 6px 16px var(--ring)}
.btn:active,.btn-primary:active,.btn-sm:active{transform:translateY(1px)}
.form-actions .btn{background:linear-gradient(135deg,var(--brand),var(--brand-dark))}
.auth-card .btn{width:100%;padding:13px}
.btn-sm{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:#334155;border-radius:var(--r-sm);padding:9px 14px;font-size:12.5px;box-shadow:var(--shadow-sm)}
.btn-sm:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}
.btn-sm.danger{color:#b91c1c;border-color:#fecaca;background:#fff}.btn-sm.danger:hover{background:#fef2f2;border-color:#f87171;color:#991b1b}
.lead-toolbar{gap:12px}

/* ---- forms ---- */
.field>span,.form-grid .field>span{font-size:12.5px;font-weight:600;color:#334155}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea,
.cmp-bar select,.cmp-more select,.cmp-more input[type=date],.lead-filters select,.lead-filters input[type=date],.inline-form select,.bulk-bar select,
.daterange input,.searchbox,.items-edit .tbl input,.calc-box input,.rp-bar .dt input,.sl-filters select,.sl-filters input[type=date],.notes-bar .sel{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background-color:#fff;font:inherit;font-size:13.5px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}
.cmp-bar select,.bulk-bar select,.inline-form select{width:auto}
.field input:focus,.field select:focus,.field textarea:focus,.cmp-bar select:focus,.cmp-more select:focus,.cmp-more input:focus,.lead-filters select:focus,.daterange input:focus,
.items-edit .tbl input:focus,.calc-box input:focus,.searchbox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.field input::placeholder,.field textarea::placeholder,.searchbox input::placeholder{color:#94a3b8}
.field select,.cmp-bar select,.cmp-more select,.lead-filters select,.inline-form select,.bulk-bar select,.sl-filters select,.notes-bar .sel{
  -webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.searchbox{display:flex;align-items:center;gap:10px;color:var(--muted);background:#fff}
.searchbox input{border:0!important;box-shadow:none!important;padding:0!important;background:none!important}
.cmp-more select,.cmp-more input[type=date],.lead-filters select,.lead-filters input[type=date]{background-color:#f8fafc}
.form-grid{gap:16px 18px}
.form-actions{gap:10px}
.field small.muted{font-size:11.5px;color:#64748b}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}

/* ---- tables ---- */
.tbl th{background:#f8fafc;color:#64748b;font-size:11px;font-weight:700;letter-spacing:.07em;border-bottom:1px solid var(--line);padding:12px 20px}
.tbl td{padding:14px 20px;font-size:13.5px;border-top:1px solid #edf1f7;vertical-align:middle}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:#f8faff}
.tbl td strong{font-weight:600}
.empty{padding:36px!important;color:#94a3b8;font-size:13.5px}
.lead-id{background:var(--brand-soft);color:var(--brand-dark);font-weight:700;padding:4px 10px;border-radius:8px;font-size:12px;display:inline-block}
.tag{display:inline-flex;align-items:center;gap:6px;background:#f1f5f9;border:1px solid var(--line);border-radius:8px;font-size:11.5px;font-weight:600;padding:3px 9px;color:#475569}
.pager{background:#fafbfd;font-size:13px}
.pager .btn-sm{padding:7px 12px}
.row-actions{white-space:nowrap}
.row-actions a,.row-actions button{display:inline-grid;place-items:center;width:30px;height:30px;margin-left:4px;border-radius:8px;font-size:13.5px;transition:background .12s}
.row-actions a:hover,.row-actions button:hover{background:#f1f5f9}
.row-actions .del{color:#dc2626}.row-actions .del:hover{background:#fee2e2}

/* ---- badges (with status dot) ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.b-green{background:#dcfce7;color:#15803d}.b-amber{background:#fef3c7;color:#b45309}.b-red{background:#fee2e2;color:#b91c1c}.b-blue{background:#dbeafe;color:#1d4ed8}.b-grey{background:#e8edf5;color:#475569}

/* ---- alerts / flash ---- */
.alert,.flash{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:12px;font-size:13.5px;font-weight:500;border:1px solid transparent}
.alert{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.flash{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.alert::before,.flash::before{font-family:"Font Awesome 6 Free";font-weight:900;flex-shrink:0;line-height:1.4}
.alert::before{content:"\f06a"}.flash::before{content:"\f058"}

/* ---- misc consistency ---- */
.role-pills a{background:#fff;transition:.15s}.role-pills a:hover{border-color:var(--brand);color:var(--brand-dark)}
.role-pills a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.kv{gap:18px 22px}.kv dd{font-weight:600}
.welcome{background:linear-gradient(120deg,var(--brand-soft),#fff);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px}
.login-box{border-radius:var(--r-md)}
.auth-card .field input{padding:12px 14px}
.tabs{grid-template-columns:repeat(2,1fr)}
.tabs input:checked+label{color:var(--brand-dark)}
.items-edit .rm:hover{background:#fee2e2;border-radius:8px}
.items-edit .amt{color:#0f172a}
.inv-toolbar{margin-bottom:2px}

/* ---- responsive ---- */
@media(max-width:1100px){.cmp-more{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
  .content{padding:16px 14px 28px}
  .sidebar{box-shadow:none}
  .cmp-bar{flex-wrap:wrap}.cmp-bar .searchbox{max-width:none;flex:1 1 100%}
  .lead-toolbar{align-items:stretch}.tb-left{width:100%}
  .form-grid{padding:16px}.form-actions{padding:0 16px 16px}
  .items-foot{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cmp-more,.lead-filters,.kv,.form-grid{grid-template-columns:1fr}
  .panel-head{flex-wrap:wrap;gap:8px}
  /* tables built with render_table() turn into stacked cards on phones */
  .tbl.stack thead{display:none}
  .tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack td{display:block;width:100%}
  .tbl.stack tr{padding:10px 16px;border-top:1px solid var(--line)}
  .tbl.stack tr:first-child{border-top:0}
  .tbl.stack td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:0;padding:6px 0;white-space:normal;text-align:right}
  .tbl.stack td::before{content:attr(data-label);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;text-align:left}
  .tbl.stack td.empty{display:block;text-align:center}.tbl.stack td.empty::before{content:none}
}
@media print{
  .sidebar,.topbar{display:none!important}
  .panel,.stat,.lcard{box-shadow:none}
  .tbl.stack thead{display:table-header-group}
}
.field .pw input:not([type=checkbox]):not([type=radio]),.pw input:not([type=checkbox]):not([type=radio]){padding-right:44px}

/* ---------- customer portal extras ---------- */
.stepper{list-style:none;margin:0;padding:20px;display:flex;gap:0;overflow-x:auto}
.stepper li{flex:1;min-width:84px;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;text-align:center}
.stepper li::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:3px;background:#e2e8f0;z-index:0}
.stepper li:first-child::before{display:none}
.stepper li span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e2e8f0;color:#64748b;font-weight:700;font-size:13px;position:relative;z-index:1}
.stepper li b{font-size:12px;color:#64748b;font-weight:600}
.stepper li.done span{background:#16a34a;color:#fff}.stepper li.done::before{background:#16a34a}.stepper li.done b{color:#15803d}
.stepper li.now span{background:var(--brand);color:#fff;box-shadow:0 0 0 5px var(--ring)}.stepper li.now::before{background:var(--brand)}.stepper li.now b{color:var(--brand-dark)}
.trip-card{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:22px 24px;border-radius:var(--r-lg);color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-dark));box-shadow:0 10px 24px var(--ring)}
.trip-card h3{margin:2px 0 6px;font-size:20px}.trip-card small{opacity:.85}
.trip-card .count{text-align:center;background:rgba(255,255,255,.16);border-radius:14px;padding:12px 22px}.trip-card .count b{display:block;font-size:32px;line-height:1}
.trip-card .btn-sm{background:rgba(255,255,255,.95)}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:12px;font-size:13.5px;border:1px solid #fde68a;background:#fffbeb;color:#92400e}
.note.red{border-color:#fecaca;background:#fef2f2;color:#b91c1c}.note.blue{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}
.note a{font-weight:700;text-decoration:underline}
.chat{display:flex;flex-direction:column;gap:14px;padding:20px}
.bubble{max-width:78%;padding:12px 15px;border-radius:14px;background:#f1f5f9;font-size:13.5px;align-self:flex-start;border-top-left-radius:4px}
.bubble.me{align-self:flex-end;background:var(--brand-soft);border-top-left-radius:14px;border-top-right-radius:4px}
.bubble small{display:block;margin-top:6px;color:var(--muted);font-size:11.5px}
.bubble .who{display:block;font-weight:700;font-size:12px;margin-bottom:3px;color:var(--brand-dark)}
.upload-box{border:2px dashed var(--line);border-radius:14px;padding:18px;background:#f8fafc}
.doc-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex-shrink:0}
@media(max-width:640px){.bubble{max-width:92%}.trip-card{padding:18px}}

/* ---------- topbar notification bell (all portals) ---------- */
.bell{position:relative}
.bell-btn{position:relative;width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--bg));color:#475569;cursor:pointer;display:grid;place-items:center;transition:.18s;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.bell-btn:hover{color:var(--brand);border-color:transparent;background:var(--brand-soft);box-shadow:0 4px 12px rgba(15,23,42,.1);transform:translateY(-1px)}
.bell-btn:focus{outline:0}.bell-btn:focus-visible{box-shadow:0 0 0 3px var(--ring,rgba(79,70,229,.25))}
.bell-btn[aria-expanded="true"]{background:var(--brand);color:#fff;border-color:transparent}
.bell-btn.has-new svg{color:var(--brand)}.bell-btn[aria-expanded="true"] svg{color:#fff}
.bell-btn svg{transform-origin:50% 0}
.bell-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;border:2px solid #fff;line-height:1;box-shadow:0 2px 6px rgba(225,29,72,.4)}
.bell-badge[hidden]{display:none}
.bell-btn.has-new .bell-badge::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid #f43f5e;animation:bellping 1.8s ease-out infinite}
@keyframes bellping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.bell-btn.ring svg{animation:bellring .8s ease}
@keyframes bellring{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}75%{transform:rotate(3deg)}}
.bell-pop{position:absolute;right:-6px;top:calc(100% + 12px);width:390px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.22);z-index:40;overflow:hidden;animation:bellpop .16s ease-out;transform-origin:top right}
.bell-pop::before{content:"";position:absolute;top:-6px;right:20px;width:12px;height:12px;background:var(--card);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);z-index:1}
@keyframes bellpop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.bell-pop[hidden]{display:none}
.bell-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;background:var(--card)}
.bell-head strong{font-size:15px;margin-right:8px}
.bell-chip{background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px}
.bell-head>button{border:0;background:none;color:var(--brand);font:inherit;font-weight:600;font-size:12px;cursor:pointer;padding:6px 8px;border-radius:8px}
.bell-head>button:hover:not(:disabled){background:var(--brand-soft)}.bell-head>button:disabled{color:var(--muted);cursor:default;opacity:.6}
.bell-tabs{display:flex;gap:6px;padding:0 18px 12px;border-bottom:1px solid var(--line);background:var(--card);position:relative;z-index:2}
.bell-tabs button{border:0;background:var(--bg);color:var(--muted);font:inherit;font-weight:600;font-size:12px;padding:6px 14px;border-radius:99px;cursor:pointer;transition:.15s}
.bell-tabs button.on{background:var(--brand);color:#fff}
.bell-list{list-style:none;margin:0;padding:6px;max-height:400px;overflow:auto}
.bell-item{display:flex;gap:12px;padding:11px 12px;border-radius:12px;cursor:pointer;align-items:flex-start;transition:.12s;position:relative}
.bell-item:hover{background:var(--bg)}
.bell-item.unread{background:var(--brand-soft)}.bell-item.unread:hover{filter:brightness(.97)}
.bell-item .bi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;font-size:14px;background:var(--brand-soft);color:var(--brand)}
.bi.t-blue{background:#dbeafe;color:#2563eb}.bi.t-green{background:#dcfce7;color:#16a34a}.bi.t-amber{background:#fef3c7;color:#d97706}.bi.t-rose{background:#ffe4e6;color:#e11d48}.bi.t-violet{background:#ede9fe;color:#7c3aed}
.bell-item .bt{flex:1;min-width:0}
.bell-item .bt strong{display:block;font-size:13px;line-height:1.35;word-break:break-word}
.bell-item:not(.unread) .bt strong{font-weight:600;color:#475569}
.bell-item .bt p{margin:2px 0 3px;color:#64748b;font-size:12.5px;line-height:1.4;word-break:break-word}
.bell-item .bt small{color:var(--muted);font-size:11px}
.bell-item .bd{width:9px;height:9px;border-radius:50%;background:var(--brand);margin-top:5px;flex-shrink:0;box-shadow:0 0 0 3px var(--brand-soft)}
.bell-item.unread .bd{box-shadow:0 0 0 3px #fff}.bell-item:not(.unread) .bd{visibility:hidden}
.bell-empty{text-align:center;color:var(--muted);padding:38px 16px;list-style:none}.bell-empty i{font-size:28px;opacity:.6}.bell-empty p{margin:10px 0 0}
.bell-foot{display:block;text-align:center;padding:13px;border-top:1px solid var(--line);font-weight:600;font-size:13px;color:var(--brand);background:var(--card)}
.bell-foot:hover{background:var(--bg)}.bell-foot i{font-size:11px;margin-left:4px}
@media(max-width:820px){.topbar{gap:10px}.bell-pop{position:fixed;left:12px;right:12px;top:68px;width:auto;max-width:none}.bell-pop::before{display:none}}
@media print{.bell{display:none!important}}

/* ---------- accounts portal ---------- */
body.portal-accounts{--brand:#0369a1;--brand-soft:#e0f2fe;--brand-dark:#075985}
.tabs{grid-template-columns:repeat(3,1fr)}
.acc-bars{display:flex;align-items:flex-end;gap:14px;height:150px;padding:8px 20px 0}
.acc-bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.acc-bars .pair{display:flex;align-items:flex-end;gap:4px;height:120px;width:100%;justify-content:center}
.acc-bars .bar{width:42%;max-width:26px;border-radius:6px 6px 0 0;min-height:2px}
.acc-bars .in{background:#16a34a}.acc-bars .out{background:#f43f5e}
.acc-bars small{color:var(--muted);font-size:11px}
.acc-legend{display:flex;gap:16px;padding:10px 20px 16px;color:var(--muted);font-size:12px}
.acc-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.hbar{height:8px;border-radius:6px;background:var(--bg);overflow:hidden;min-width:80px}.hbar>span{display:block;height:100%;background:var(--brand);border-radius:6px}
body.portal-accounts{--ring:rgba(3,105,161,.18)}

/* ---------- create-account menu ---------- */
.create-menu{position:relative}
.create-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.create-menu summary::-webkit-details-marker{display:none}
.cm-pop{position:absolute;right:0;top:calc(100% + 8px);width:330px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(15,23,42,.2);z-index:30;padding:8px}
.cm-title{padding:8px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cm-pop a{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;transition:.12s}
.cm-pop a:hover{background:var(--bg)}
.cm-pop a strong{display:block;font-size:13.5px}.cm-pop a small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.t-violet{background:#ede9fe;color:#7c3aed}.t-grey{background:#f1f5f9;color:#64748b}

/* ---------- online payment box ---------- */
.pay-box{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--brand-soft),#fff);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin-bottom:18px}
.pb-info{display:flex;gap:14px;align-items:center}.pb-ico{width:44px;height:44px;border-radius:14px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:18px}
.pb-info strong{display:block}.pb-info small{color:var(--muted)}
.pb-act{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.pb-act label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:600}
.pb-act input{width:150px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit}
.pb-msg{flex-basis:100%;font-size:13px;color:#0369a1}.pb-msg.bad{color:#dc2626}
@media print{.pay-box{display:none}}

/* ---------- sidebar notification badges ---------- */
.sidebar nav a,.sidebar .nav-group-btn{position:relative}
.nav-badge{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;font-size:11.5px;font-weight:700;display:inline-grid;place-items:center;line-height:1;box-shadow:0 2px 6px rgba(225,29,72,.45);flex-shrink:0;animation:badgein .25s ease-out}
.nav-badge[hidden]{display:none}
.nav-group-btn .nav-badge{margin-right:8px}
.nav-group.open .nav-group-btn .nav-badge{display:none}
.sidebar a.active .nav-badge{display:none}
@keyframes badgein{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* Bookings split: All / Flight / Hotel / Holiday Package tabs */
.bk-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.bk-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#334155;font-weight:600;font-size:13px;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:border-color .15s,background .15s,color .15s}
.bk-tab b{background:#f1f5f9;color:#475569;border-radius:999px;padding:1px 8px;font-size:11.5px}
.bk-tab:hover{border-color:var(--brand);color:var(--brand)}
.bk-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.bk-tab.on b{background:rgba(255,255,255,.22);color:#fff}
@media print{.bk-tabs{display:none!important}}

/* admin customer view: Visa + Bookings tables full width, never clipped */
.cv-stack{display:grid;grid-template-columns:1fr;gap:22px}
.cv-stack .panel{min-width:0}
.row-actions form{margin:0}

/* Sri Lankan rupee icon (replaces the Indian rupee glyph everywhere an icon is used) */
.fa-solid.ic-lkr::before,.ic-lkr::before{content:"\0DBB\0DD4";font-family:'Noto Sans Sinhala','Iskoola Pota','Nirmala UI','Sinhala MN','Sinhala Sangam MN',sans-serif;font-weight:700;font-style:normal;font-size:.95em}

/* ---------- Messages (chat) ---------- */
.msgr [hidden]{display:none!important}
.msgr{display:grid;grid-template-columns:330px 1fr;height:calc(100vh - 130px);height:calc(100dvh - 130px);min-height:460px;background:var(--card);border-radius:var(--radius);box-shadow:0 1px 2px rgba(15,23,42,.05);overflow:hidden}
.chat-side{position:relative;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.chat-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px}
.chat-side-head strong{font-size:15px}
.chat-search{margin:0 14px 10px;padding:9px 12px;font-size:13px;width:auto}
.chat-iconbtn{border:0;background:var(--bg);width:34px;height:34px;border-radius:9px;cursor:pointer;color:var(--text)}
.chat-list{list-style:none;margin:0;padding:0 8px 10px;overflow-y:auto;flex:1;min-height:0}
.chat-picker{position:absolute;inset:0;background:var(--card);display:flex;flex-direction:column;z-index:2}
.chat-group{padding:12px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.chat-none{padding:26px 14px;text-align:center;color:var(--muted)}
.chat-none p{margin:0;line-height:1.5}
.chat-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;cursor:pointer;transition:background .12s}
.chat-item:hover{background:var(--bg)}
.chat-item.on{background:var(--brand-soft)}
.cav{width:40px;height:40px;border-radius:50%;flex:0 0 40px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;background:var(--brand)}
.ci-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ci-top,.ci-bot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ci-top strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-time{font-size:11px;color:var(--muted);flex-shrink:0}
.ci-prev{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-role{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.chat-item.unread .ci-top strong,.chat-item.unread .ci-prev{color:var(--text);font-weight:700}
.ci-badge{background:#dc2626;color:#fff;border-radius:999px;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}

.chat-main{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;background:#f8fafc}
.chat-empty{margin:auto;text-align:center;color:var(--muted);padding:30px}
.chat-empty i{font-size:44px;color:var(--brand);opacity:.35;margin-bottom:12px}
.chat-empty strong{display:block;color:var(--text);font-size:16px;margin-bottom:4px}
.chat-empty p{margin:0}
.chat-thread{display:flex;flex-direction:column;min-height:0;flex:1}
.chat-head{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--card);border-bottom:1px solid var(--line)}
.chat-head-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.chat-head-meta strong{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head-meta small{color:var(--muted);font-size:11.5px}
.chat-back{display:none}
.chat-msgs{flex:1;min-height:0;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:6px}
.chat-more{align-self:center;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted);margin-bottom:6px}
.daysep{align-self:center;margin:10px 0 4px}
.daysep span{background:#e2e8f0;color:#475569;font-size:11px;font-weight:600;padding:4px 12px;border-radius:999px}
.msg{display:flex;max-width:100%}
.msg.mine{justify-content:flex-end}
.mbub{max-width:min(72%,520px);padding:8px 12px 6px;border-radius:16px;box-shadow:0 1px 1px rgba(15,23,42,.06);word-break:break-word}
.msg.theirs .mbub{background:#fff;border-bottom-left-radius:5px}
.msg.mine .mbub{background:var(--brand);color:#fff;border-bottom-right-radius:5px}
.mtext{white-space:pre-wrap;line-height:1.45;font-size:13.5px}
.mmeta{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:2px;font-size:10.5px;opacity:.7}
.msg.mine .tick .t2,.msg.mine.read .tick .t1{display:none}
.msg.mine.read .tick .t2{display:inline;color:#bae6fd;opacity:1}
.msg.sending .mbub{opacity:.65}
.chat-newpill{position:absolute;left:50%;transform:translateX(-50%);bottom:84px;border:0;background:var(--brand);color:#fff;border-radius:999px;padding:7px 14px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(15,23,42,.25);z-index:3}
.chat-note{padding:8px 18px;font-size:12.5px;color:#b45309;background:#fffbeb;border-top:1px solid #fde68a}
.chat-compose{display:flex;align-items:flex-end;gap:10px;padding:12px 16px;background:var(--card);border-top:1px solid var(--line)}
.chat-compose textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:14px;padding:10px 14px;font:inherit;font-size:13.5px;line-height:1.4;max-height:130px;outline:none;background:#f8fafc}
.chat-compose textarea:focus{border-color:var(--brand);background:#fff}
.chat-send{border:0;background:var(--brand);color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:15px;flex-shrink:0}
.chat-send:hover{filter:brightness(1.08)}
@media(max-width:820px){
  .msgr{grid-template-columns:1fr;height:calc(100vh - 100px);height:calc(100dvh - 100px)}
  .msgr:not(.show-thread) .chat-main{display:none}
  .msgr.show-thread .chat-side{display:none}
  .chat-back{display:inline-block}
  .mbub{max-width:86%}
}

/* ---------- Document Collection Checklist (all portals) ---------- */
.doc-check{overflow:hidden}
.dc-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;background:#475569;color:#fff}
.dc-head-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:16px;flex-shrink:0}
.dc-head-t{flex:1;min-width:200px}.dc-head-t h3{margin:0;font-size:16px;color:#fff}.dc-head-t small{display:block;margin-top:2px;color:#cbd5e1;font-size:12px}
.dc-btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:8px;background:#2563eb;color:#fff;font:inherit;font-size:12px;font-weight:700;letter-spacing:.03em;padding:9px 16px;cursor:pointer;white-space:nowrap}
.dc-btn:hover{background:#1d4ed8}.dc-btn.alt{background:#fff;color:#2563eb;border:1px solid #bfdbfe}.dc-btn.alt:hover{background:#eff6ff}.dc-btn.big{padding:11px 18px}
.dc-custom{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end;padding:16px 20px;background:#f8fafc;border-bottom:1px solid var(--line)}
.dc-custom[hidden]{display:none}.dc-custom-act{display:flex;gap:8px;align-items:center}
.dc-tbl .dc-sec td{background:#fef9e7;padding:10px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dc-tbl .dc-sec span{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#475569;border-left:4px solid #f97316;padding-left:9px}
.dc-tbl td{vertical-align:middle}
.dc-tags{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}.dc-tags span{font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:5px;background:#f1f5f9;border:1px solid var(--line);color:#475569}
.dc-st{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:7px;border:1px solid}
.dc-st.pend{background:#fffbeb;color:#b45309;border-color:#fcd34d}.dc-st.up{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}.dc-st.ok{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.dc-file{display:flex;gap:10px;align-items:center}.dc-file small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.dc-old{margin-top:6px;font-size:11.5px;color:var(--muted)}.dc-old a{color:#2563eb}.dc-old form{margin-left:6px}.dc-old button{border:0;background:none;cursor:pointer;font-size:12px}
.dc-act{white-space:nowrap}.dc-act .dc-up{display:inline-block;margin:0 0 0 10px;vertical-align:middle}
@media(max-width:760px){.dc-custom{grid-template-columns:1fr}.dc-act{text-align:left!important}.dc-act .dc-up{margin:6px 10px 0 0}}

/* ---------- topbar Follow Up button (admin + staff), sits left of the profile ---------- */
.topbar-follow{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:14px;background:var(--brand);color:#fff;font-weight:700;font-size:13px;white-space:nowrap;box-shadow:0 1px 2px rgba(15,23,42,.12);transition:.18s}
.topbar-follow:hover{filter:brightness(1.08);transform:translateY(-1px)}.topbar-follow.on{box-shadow:0 0 0 3px var(--ring,rgba(79,70,229,.25))}
.topbar-follow b{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;font-size:11px;display:grid;place-items:center;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(225,29,72,.45)}
@media(max-width:640px){.topbar-follow span{display:none}.topbar-follow{padding:0 13px}}

/* ---------- profile photo ---------- */
.avatar{overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-xl{width:84px;height:84px;font-size:30px}
.avatar-edit{display:flex;gap:20px;align-items:center;padding:20px;flex-wrap:wrap}

/* ---------- admin sidebar dividers + top-bar WhatsApp / Messages buttons ---------- */
.sidebar nav .nav-sep{height:1px;margin:8px 12px;background:rgba(255,255,255,.12)}
.topbar-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:14px;background:var(--card,#fff);color:var(--text,#0f172a);border:1px solid var(--line,#e2e8f0);font-weight:600;font-size:13px;white-space:nowrap;transition:.18s}
.topbar-btn:hover{border-color:var(--brand);color:var(--brand)}
.topbar-btn.on{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 3px var(--ring,rgba(79,70,229,.2))}
.topbar-btn .fa-whatsapp{color:#25d366;font-size:16px}
.topbar-btn b{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#ef4444;color:#fff;font-size:11px;display:grid;place-items:center}
.topbar-btn b[hidden]{display:none}
@media(max-width:900px){.topbar-btn span{display:none}.topbar-btn{padding:0 12px}}

/* Scrollable + searchable dropdown (select[data-pick]) */
.pick{position:relative;width:100%}
.pick-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:0;bottom:0}
.pick-btn{width:100%;text-align:left;padding:11px 34px 11px 13px;border:1px solid var(--line);border-radius:var(--r-sm,10px);background:#f8fafc;font:inherit;font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.pick-btn.has-val{color:var(--text);font-weight:500}
.pick.open .pick-btn{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring,rgba(79,70,229,.18))}
.pick-panel{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(15,23,42,.16);padding:8px;min-width:200px}
.pick.open .pick-panel{display:block}
.pick-search{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;outline:none;margin-bottom:6px}
.pick-search:focus{border-color:var(--brand)}
.pick-list{max-height:220px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pick-item{padding:9px 10px;border-radius:8px;font-size:13.5px;cursor:pointer}
.pick-item:hover{background:var(--brand-soft)}
.pick-item.sel{background:var(--brand-soft);color:var(--brand);font-weight:600}
.pick-empty{padding:10px;color:var(--muted);font-size:13px}
.bulk-bar .pick{width:210px}

/* Customer profile photo + passport bio cards */
.cm-media{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:20px 20px 0}
.cm-card{border:1px solid var(--line);border-radius:14px;padding:14px;background:#f8fafc;display:flex;flex-direction:column;gap:8px}
.cm-title{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.cm-body{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cm-thumb{width:110px;height:84px;border-radius:10px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;color:#94a3b8;font-size:26px;gap:2px;flex:none}
.cm-thumb.round{width:84px;border-radius:50%}
.cm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cm-thumb span{font-size:11px;font-weight:700;color:#ef4444}
.cm-thumb .fa-file-pdf{color:#ef4444}
.cm-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cm-actions form{margin:0}
@media(max-width:700px){.cm-media{grid-template-columns:1fr}}

/* Modal (Upload Doc) */
.modal-bg{display:none;position:fixed;inset:0;z-index:100;background:rgba(15,23,42,.55);overflow-y:auto;padding:5vh 16px;align-items:flex-start;justify-content:center}
.modal-bg.show{display:flex}
.modal-box{background:#fff;border-radius:18px;width:100%;max-width:480px;box-shadow:0 24px 60px rgba(15,23,42,.35);margin:auto}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:17px}
.modal-x{border:0;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.modal-body{padding:18px 20px;display:grid;gap:14px}
.modal-body .field{display:grid;gap:6px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line)}

/* Agent lead status dropdown (pill style, matches admin badges) */
.st-dd{position:relative;display:inline-block}
.st-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.st-trigger .badge{cursor:pointer}
.st-trigger:hover .badge{filter:brightness(.97);box-shadow:0 0 0 2px rgba(37,99,235,.12)}
.st-caret{font-size:9px;color:#94a3b8}
.st-menu{position:fixed;z-index:1000;min-width:170px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.18);padding:6px}
.st-menu[hidden]{display:none}
.st-opt{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;padding:7px 8px;border-radius:8px;cursor:pointer}
.st-opt:hover,.st-opt.sel{background:#f1f5f9}
.st-tick{font-size:11px;color:#16a34a}

/* Admin leads: inline employee picker */
.emp-trigger{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:6px 10px;font:inherit;font-size:13px;font-weight:600;color:#0f172a;cursor:pointer;max-width:170px}
.emp-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-trigger.none{color:#64748b;font-weight:500;border-style:dashed}
.emp-trigger i{font-size:9px;color:#94a3b8}
.emp-trigger:hover{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.emp-menu{position:fixed;z-index:1000;width:230px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.18);padding:8px}
.emp-menu[hidden]{display:none}
.emp-search{width:100%;box-sizing:border-box;padding:7px 10px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;margin-bottom:6px}
.emp-list{max-height:220px;overflow-y:auto;overscroll-behavior:contain}
.emp-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;padding:7px 8px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;color:#0f172a}
.emp-opt:hover,.emp-opt.sel{background:#f1f5f9}
.emp-av{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#dbeafe;color:#1d4ed8;font-size:11px;font-weight:700;flex:none}
.emp-tick{margin-left:auto;color:#16a34a;font-size:11px}
.emp-none{padding:10px;color:#94a3b8;font-size:13px;text-align:center}

.emp-trigger.sup{border-color:#ddd6fe}
.emp-trigger.sup:not(.none){background:#f5f3ff;color:#6d28d9}
.emp-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-type{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:#64748b;background:#f1f5f9;border-radius:6px;padding:2px 6px;flex:none}
.emp-type.match{background:#dcfce7;color:#15803d}

.sup-chip{display:inline-flex;align-items:center;gap:6px;background:#f5f3ff;color:#6d28d9;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;margin-bottom:3px}

/* Admin leads: inline status picker */
.emp-trigger.st{padding:4px 8px;gap:6px}
.emp-trigger.st .badge{margin:0;pointer-events:none}

/* checklist: several files per document */
.dc-fline{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px dashed var(--line)}
.dc-fline:first-child{padding-top:0}.dc-fline:last-child{border-bottom:0;padding-bottom:0}
.dc-facts{display:flex;align-items:center;gap:10px;flex-shrink:0}.dc-facts form{display:inline;margin:0}.dc-facts button{border:0;background:none;cursor:pointer;font-size:14px}
.dc-cnt{display:block;margin-top:5px;font-size:11px;color:var(--muted)}
.dc-tbl td.dc-act{text-align:right;min-width:130px;vertical-align:middle}
.dc-tbl td.dc-act .dc-up{margin:0}
@media(max-width:760px){.dc-fline{flex-wrap:wrap}}

.dc-btn.zip{background:#16a34a;color:#fff;text-decoration:none}.dc-btn.zip:hover{background:#15803d}

/* checklist: ORG / ENG sub-rows, optional documents */
.dc-tbl .dc-sub td{border-top:0}.dc-tbl .dc-sub td:first-child{padding-left:34px}
.dc-subl{font-size:12.5px;color:var(--muted);font-weight:600}
.dc-tags em{font-style:normal;font-size:11px;color:var(--muted);align-self:center}
.dc-hint{margin-top:3px;font-size:11.5px;color:var(--muted)}
.dc-st.opt{background:#f8fafc;color:#64748b;border-color:#e2e8f0}

/* checklist: UPLOAD / ADD MORE button was squeezed into a 30x30 icon box by ".row-actions button" - give it back its real size */
.dc-tbl .dc-act .dc-btn,.dc-head .dc-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;height:auto;margin:0;padding:9px 16px;border-radius:8px;background:#2563eb;color:#fff;font-size:12px;white-space:nowrap}
.dc-tbl .dc-act .dc-btn:hover{background:#1d4ed8}
.dc-tbl .dc-act .dc-btn.alt{background:#fff;color:#2563eb;border:1px solid #bfdbfe}
.dc-tbl .dc-act .dc-btn.alt:hover{background:#eff6ff}
.dc-tbl td.dc-act{min-width:150px}
.dc-tbl .dc-facts a,.dc-tbl .dc-facts button{display:inline-grid;place-items:center;width:28px;height:28px;margin:0;border-radius:7px}

/* =====================================================================
 * FILTER BARS - one polished look for every list page (Admin, Staff, Agent, Accounts, Supplier, Customer):
 * search box, status / service / city selects, date pickers, per-page select and the Search / Reset buttons.
 * ===================================================================== */
.cmp-bar,.cmp-filters,.lead-filters,.daterange,.rp-bar,.sl-filters,.notes-bar{--fh:42px}
.panel>.cmp-bar{background:linear-gradient(180deg,#fbfcfe,#f6f8fc);border-bottom:1px solid var(--line);padding:16px 18px!important;gap:10px!important;align-items:center}
.cmp-bar{flex-wrap:wrap}
.cmp-filters,.lead-filters{background:#fff}

/* every control: same height, soft border, white fill, brand focus ring */
.cmp-bar select,.cmp-bar input[type=date],.cmp-bar input[type=month],.cmp-bar input[type=number],.cmp-bar input[type=text]:not([name=q]),
.cmp-filters select,.cmp-filters input[type=date],.cmp-filters input[type=month],.cmp-filters input[type=number],
.lead-filters select,.lead-filters input[type=date],.daterange select,.daterange input,.rp-bar select,.rp-bar input,.sl-filters select,.sl-filters input[type=date],.notes-bar select,.notes-bar input:not([type=checkbox]){
  height:var(--fh);padding:0 13px;border:1px solid #dbe2ee;border-radius:11px;background-color:#fff;color:#334155;font:inherit;font-size:13px;font-weight:500;
  box-shadow:0 1px 2px rgba(15,23,42,.04);outline:none;transition:border-color .15s,box-shadow .15s,background-color .15s}
.cmp-bar select:hover,.cmp-bar input[type=date]:hover,.cmp-bar input[type=month]:hover,.cmp-filters select:hover,.cmp-filters input[type=date]:hover,
.lead-filters select:hover,.lead-filters input[type=date]:hover,.daterange input:hover,.daterange select:hover{border-color:#b9c4d8}
.cmp-bar select:focus,.cmp-bar input:focus,.cmp-filters select:focus,.cmp-filters input:focus,.lead-filters select:focus,.lead-filters input:focus,
.daterange input:focus,.daterange select:focus,.rp-bar input:focus,.rp-bar select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}

/* selects: custom arrow, never clipped */
.cmp-bar select,.cmp-filters select,.lead-filters select,.daterange select,.rp-bar select,.sl-filters select,.notes-bar select{
  -webkit-appearance:none;appearance:none;padding-right:36px;width:auto;min-width:130px;max-width:100%;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}

/* date pickers: calendar icon in the brand colour, clean spacing */
.cmp-bar input[type=date],.cmp-bar input[type=month],.cmp-filters input[type=date],.lead-filters input[type=date],.daterange input[type=date],.rp-bar input[type=date],.sl-filters input[type=date]{
  min-width:150px;width:auto;cursor:pointer;color:#475569;font-variant-numeric:tabular-nums}
input[type=date]::-webkit-calendar-picker-indicator,input[type=month]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.55;padding:4px;margin-left:4px;border-radius:7px;transition:background .15s,opacity .15s}
input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=month]::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--brand-soft)}
input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0}
input[type=date]::-webkit-datetime-edit-month-field:focus,input[type=date]::-webkit-datetime-edit-day-field:focus,input[type=date]::-webkit-datetime-edit-year-field:focus{background:var(--brand-soft);color:var(--brand-dark);border-radius:4px;outline:none}

/* search box */
.cmp-bar .searchbox,.cmp-filters .searchbox,.lead-filters .searchbox{height:var(--fh);padding:0 14px;border:1px solid #dbe2ee;border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04);flex:1 1 260px;max-width:460px;min-width:200px}
.cmp-bar .searchbox i,.cmp-filters .searchbox i{color:#94a3b8;font-size:13px;transition:color .15s}
.cmp-bar .searchbox:focus-within i,.cmp-filters .searchbox:focus-within i{color:var(--brand)}
.cmp-bar .searchbox input{font-size:13px;color:var(--text)}

/* Search button = solid brand; Reset / other = clean outline */
.cmp-bar>button.btn-sm,.cmp-bar>button[type=submit],.cmp-filters>button.btn-sm,.cmp-filters>button[type=submit],.lead-filters>button.btn-sm,.daterange>button.btn-sm,.rp-bar>button.btn-sm{
  height:var(--fh);padding:0 20px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;font-size:13px;font-weight:600;box-shadow:0 4px 12px var(--ring)}
.cmp-bar>button.btn-sm:hover,.cmp-bar>button[type=submit]:hover,.cmp-filters>button.btn-sm:hover,.lead-filters>button.btn-sm:hover,.daterange>button.btn-sm:hover,.rp-bar>button.btn-sm:hover{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand-dark));color:#fff;border:0;box-shadow:0 6px 16px var(--ring)}
.cmp-bar>a.btn-sm,.cmp-filters>a.btn-sm,.lead-filters>a.btn-sm,.daterange>a.btn-sm{height:var(--fh);padding:0 16px;border-radius:11px;border:1px solid #dbe2ee;background:#fff;color:#475569}
.cmp-bar>a.btn-sm:hover,.cmp-filters>a.btn-sm:hover,.daterange>a.btn-sm:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark)}

/* keep Search / Reset together after the controls (replaces the old "push first button right" rule) */
.cmp-bar .btn-sm:first-of-type{margin-left:0}
.cmp-bar>button.btn-sm:first-of-type{margin-left:auto}

/* per-page / bulk selects and inline selects inside tables look the same family */
.bulk-bar select,.inline-form select,.panel-head select,.lead-toolbar select{height:38px;padding:0 34px 0 12px;border:1px solid #dbe2ee;border-radius:10px;background-color:#fff;font-size:13px;font-weight:500;color:#334155}
.tbl select{border:1px solid #dbe2ee;border-radius:9px;padding:6px 28px 6px 10px;font:inherit;font-size:12.5px;background-color:#fff;color:#334155}
.tbl select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring);outline:none}

@media(max-width:700px){
  .panel>.cmp-bar{padding:14px!important}
  .cmp-bar select,.cmp-bar input[type=date],.cmp-bar input[type=month],.cmp-filters select,.cmp-filters input[type=date],.daterange input,.daterange select{flex:1 1 calc(50% - 10px);min-width:0}
  .cmp-bar .searchbox{flex:1 1 100%;max-width:none}
  .cmp-bar>button.btn-sm,.cmp-bar>a.btn-sm{flex:1 1 calc(50% - 10px);justify-content:center;margin-left:0!important}
}

/* ---------- phone alerts: in-app banner + enable row ---------- */
.sh-toast{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:200;width:min(420px,calc(100vw - 24px));display:flex;gap:12px;align-items:flex-start;background:#0f172a;color:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 14px 40px rgba(15,23,42,.35);cursor:pointer;animation:shToastIn .28s ease}
.sh-toast.out{opacity:0;transform:translate(-50%,-12px);transition:.3s}
.sh-toast>i{margin-top:3px;color:#a5b4fc}.sh-toast strong{display:block;font-size:14px}.sh-toast p{margin:2px 0 0;font-size:13px;color:#cbd5e1}
@keyframes shToastIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
.bell-alerts{position:relative;z-index:2;display:flex;align-items:center;gap:10px;margin:0 14px 8px;padding:9px 12px;border-radius:12px;background:var(--brand-soft,#eef2ff);font-size:12.5px;color:#334155}
.bell-alerts[hidden]{display:none}.bell-alerts i{color:var(--brand,#4f46e5)}.bell-alerts span{flex:1;line-height:1.35}
.bell-alerts button{border:0;background:var(--brand,#4f46e5);color:#fff;font:inherit;font-weight:600;font-size:12px;padding:6px 12px;border-radius:9px;cursor:pointer}

.b-violet{background:#ede9fe;color:#6d28d9}

/* ---- Phone dropdowns (status / priority / employee / supplier pickers): bottom sheet so they can be tapped reliably ---- */
.emp-back{position:fixed;inset:0;z-index:999;background:rgba(15,23,42,.45)}
.emp-back[hidden]{display:none}
.emp-menu.sheet,.st-menu.sheet{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;min-width:0!important;max-height:78vh;overflow-y:auto;border:0;border-radius:18px 18px 0 0;padding:16px 14px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 40px rgba(15,23,42,.28);z-index:1001;-webkit-overflow-scrolling:touch}
.emp-menu.sheet::before,.st-menu.sheet::before{content:"";display:block;width:42px;height:4px;border-radius:4px;background:#cbd5e1;margin:-6px auto 12px}
.emp-menu.sheet .emp-search{font-size:16px;padding:11px 12px;margin-bottom:8px}
.emp-menu.sheet .emp-list{max-height:52vh}
.emp-menu.sheet .emp-opt,.st-menu.sheet .st-opt{padding:14px 12px;font-size:15px;min-height:48px;touch-action:manipulation}

/* Applicant: other documents (below Visa Photo / Passport Bio Page) */
.cm-docs{padding:16px 20px 0}
.cm-count{background:#e2e8f0;color:#475569;border-radius:999px;padding:1px 8px;font-size:11px;margin-left:6px;letter-spacing:0}
.cd-up{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0}
.cd-title{flex:1 1 220px;min-width:0;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;background:#fff}
.cd-hint{font-size:11.5px;color:var(--muted)}
.cd-empty{font-size:13px;color:var(--muted);padding:6px 0}
.cd-list{display:flex;flex-direction:column;gap:8px}
.cd-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;flex-wrap:wrap}
.cd-ico{font-size:22px;color:#64748b;flex:none}.cd-ico.pdf{color:#ef4444}.cd-ico.image{color:#0ea5e9}
.cd-info{flex:1 1 180px;min-width:0}
.cd-name{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-meta{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tbl select.st-sel{font-weight:600;font-size:12px;padding:4px 24px 4px 8px;border-radius:8px}
.tbl select.st-new{background-color:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.tbl select.st-process{background-color:#fef3c7;color:#92400e;border-color:#fde68a}
.tbl select.st-submit{background-color:#ede9fe;color:#5b21b6;border-color:#ddd6fe}
.tbl select.st-approve{background-color:#dcfce7;color:#166534;border-color:#bbf7d0}
.tbl select.st-refuse{background-color:#fee2e2;color:#991b1b;border-color:#fecaca}

/* Balance Documents: chips must wrap inside the panel instead of being clipped on the right */
.doc-balance{min-width:0;max-width:100%}
.doc-balance>div,.doc-balance>div>div,.doc-balance>div>div>div{min-width:0;max-width:100%}
.doc-balance .dc-st{max-width:100%;white-space:normal;line-height:1.35;align-items:flex-start;text-align:left}
.doc-balance .dc-st i{margin-top:2px;flex-shrink:0}

/* ---- list tools: Show N box + sort arrows ---- */
.per-box{display:inline-flex;align-items:center;gap:6px;margin-right:12px;font-size:13px;color:var(--muted,#64748b)}
.per-box select{padding:6px 28px 6px 10px;border:1px solid var(--line,#e2e8f0);border-radius:8px;background:#fff;font:inherit;color:inherit;cursor:pointer}
.tbl th.sortable{cursor:pointer;user-select:none}
.sort-arr{display:inline-flex;flex-direction:column;vertical-align:middle;margin-left:6px;line-height:8px}
.sort-arr i{font-style:normal;font-size:10px;color:#475569;opacity:.85}
.tbl th.sortable:hover .sort-arr i{color:#1e293b;opacity:1}
.tbl th[data-dir="asc"] .sort-arr .up,.tbl th[data-dir="desc"] .sort-arr .dn{color:#4f46e5;opacity:1;font-size:12px;text-shadow:0 0 1px #4f46e5}
.tbl th[data-dir="asc"] .sort-arr .dn,.tbl th[data-dir="desc"] .sort-arr .up{opacity:.3}

/* ---- highlighted Show box + pagination ---- */
.per-box,.pager>.per-box{font-weight:700;color:#312e81}
.per-box select,.pager select[name="per"],.filters select[name="per"]{border:2px solid #4f46e5;background:#eef0ff;color:#312e81;font-weight:700;border-radius:10px;padding:7px 30px 7px 12px;box-shadow:0 2px 6px rgba(79,70,229,.18);cursor:pointer}
.per-box select:hover,.per-box select:focus{background:#e0e4ff;outline:none;box-shadow:0 0 0 3px rgba(79,70,229,.25)}
.per-box select option{background:#fff;color:#1e1b4b;font-weight:600}
.pager .btn-sm{background:#4f46e5;color:#fff;border:1px solid #4f46e5;font-weight:700;border-radius:10px;padding:7px 14px;box-shadow:0 2px 6px rgba(79,70,229,.25);text-decoration:none}
.pager .btn-sm:hover{background:#3730a3;border-color:#3730a3;color:#fff}
.pager .muted:nth-child(1){font-weight:600;color:#475569}
.pager span span.muted{display:inline-block;background:#eef0ff;color:#312e81;font-weight:700;border:1px solid #c7ccff;border-radius:999px;padding:5px 14px;margin:0 6px}

/* ---- status cards: keep label inside the box ---- */
.lcard{min-width:0;overflow:hidden}
.lc-top{flex-wrap:wrap;min-width:0;row-gap:6px}
.lc-label{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.25;letter-spacing:.05em}
.lead-cards{min-width:0}
.lead-cards>.lcard{min-height:112px}