/* Master Admin Panel — Advocate Mizanur Rahaman & Co. */
:root{
  --ink:#0f172a; --muted:#64748b; --line:#dfe5ee; --bg:#f4f7fb;
  --nav:#111c33; --nav2:#1b2b4d; --brand:#1e3a8a; --brand2:#3b82f6;
  --ok:#047857; --okbg:#ecfdf5; --warn:#b45309; --warnbg:#fffbeb;
  --bad:#b91c1c; --badbg:#fef2f2; --violet:#6d28d9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
     background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;font-size:14.5px}

/* ---------------- shell / sidebar ---------------- */
.shell{display:flex;min-height:100vh}
.side{width:250px;flex:0 0 250px;background:linear-gradient(160deg,var(--nav) 0%,var(--nav2) 100%);
      color:#e8eefc;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand .eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;font-weight:700}
.brand .bname{margin-top:6px;font-size:14.5px;font-weight:650;line-height:1.35}
.side nav{padding:12px 10px;display:flex;flex-direction:column;gap:3px;flex:1}
.nitem{display:block;padding:10px 13px;border-radius:9px;text-decoration:none;color:#c9d6f0;
       font-size:13.8px;font-weight:550;letter-spacing:.01em;border-left:3px solid transparent}
.nitem:hover{background:rgba(255,255,255,.07);color:#fff}
.nitem.on{background:linear-gradient(90deg,rgba(59,130,246,.30),rgba(59,130,246,.06));
          color:#fff;border-left-color:#60a5fa;font-weight:650}
.nitem.out{margin-top:8px;color:#fca5a5;border-top:1px solid rgba(255,255,255,.10);border-radius:0}

/* ---- collapsible nav group (e.g. Leads > Messenger/Appointments/WhatsApp/Comments) ---- */
.ngroup{display:flex;flex-direction:column}
.nitem.nparent{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
               background:none;border:0;border-left:3px solid transparent;cursor:pointer;
               text-align:left;font-family:inherit;color:#c9d6f0}
.nitem.nparent .caret{font-size:10px;opacity:.72;transition:transform .18s ease;line-height:1}
.ngroup.open > .nitem.nparent .caret{transform:rotate(180deg)}
.ngroup.open > .nitem.nparent{background:linear-gradient(90deg,rgba(59,130,246,.22),rgba(59,130,246,.04));
                              color:#fff;border-left-color:#60a5fa}
.nsubs{display:none;flex-direction:column;gap:2px;padding:3px 0 5px 10px;margin-left:12px;
       border-left:2px solid rgba(148,183,255,.30)}
.ngroup.open > .nsubs{display:flex}
.nitem.nsub{padding:8px 12px;border-radius:8px;font-size:13.1px;color:#b9c8e6;border-left:2px solid transparent}
.nitem.nsub:hover{background:rgba(255,255,255,.08);color:#fff}
.nitem.nsub.on{background:linear-gradient(90deg,rgba(96,165,250,.36),rgba(96,165,250,.05));
               color:#fff;font-weight:700;border-left-color:#93c5fd}

/* ---- horizontal sub-tab bar shown above the page content ---- */
.subtabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;padding:0 0 12px;
         border-bottom:2px solid #dbe3ee}
.subtab{border:2px solid #cbd5e1;border-radius:999px;padding:7px 18px;font-size:13.2px;font-weight:650;
        text-decoration:none;color:#334155;background:#fff;letter-spacing:.01em}
.subtab:hover{border-color:#93c5fd;color:#1d3a63}
.subtab.on{background:linear-gradient(135deg,#1d3a63,#2f6fb5);color:#fff;border-color:#1d3a63;
           box-shadow:0 3px 12px rgba(29,58,99,.26)}
.signed{padding:13px 16px;border-top:1px solid rgba(255,255,255,.12);font-size:12px}
.signed .who{font-weight:650;color:#fff}
.signed .role{opacity:.68;margin-top:2px}

/* ---------------- main ---------------- */
.main{flex:1;min-width:0;padding:0 24px 60px}
.topbar{display:flex;align-items:center;gap:14px;padding:16px 0 14px;border-bottom:1px solid var(--line);
        margin-bottom:20px;flex-wrap:wrap}
.topbar h1{margin:0;font-size:19.5px;font-weight:700;letter-spacing:-.01em;flex:1}
.topbar .ext{font-size:12.5px;color:var(--brand);text-decoration:none;border:1.5px solid #c7d2fe;
             background:#fff;padding:6px 11px;border-radius:8px;font-weight:600}
.topbar .ext:hover{background:#eef2ff}
.burger{display:none;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border:0;
        padding:8px 13px;border-radius:8px;font-weight:650;font-size:13px;cursor:pointer}

.flash{padding:11px 14px;border-radius:10px;margin-bottom:18px;font-size:13.6px;font-weight:550;border:1.5px solid}
.flash.ok{background:var(--okbg);border-color:#a7f3d0;color:var(--ok)}
.flash.err{background:var(--badbg);border-color:#fecaca;color:var(--bad)}

/* ---------------- cards ---------------- */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 19px}
.card h2,.card h3{margin:0 0 12px;font-size:14.5px;font-weight:680}
.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 18px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
              background:linear-gradient(180deg,var(--brand),var(--brand2))}
.stat .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);font-weight:700}
.stat .v{font-size:27px;font-weight:750;margin-top:6px;letter-spacing:-.02em}
.stat .s{font-size:12.3px;color:var(--muted);margin-top:3px}
.stat.g::before{background:linear-gradient(180deg,#059669,#34d399)}
.stat.o::before{background:linear-gradient(180deg,#d97706,#fbbf24)}
.stat.v::before{background:linear-gradient(180deg,#7c3aed,#a78bfa)}
.stat.r::before{background:linear-gradient(180deg,#b91c1c,#f87171)}

.head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 12px;flex-wrap:wrap}
.head h2{margin:0;font-size:16px;font-weight:700}
.head .sub{font-size:12.6px;color:var(--muted)}

/* ---------------- tables ---------------- */
.tw{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13.6px}
thead th{background:linear-gradient(180deg,#f8fafc,#eef2f8);text-align:center;font-size:11.6px;
         text-transform:uppercase;letter-spacing:.09em;color:#475569;font-weight:750;
         padding:11px 12px;border:2px solid #cbd5e1;white-space:nowrap}
tbody td{padding:11px 12px;border:2px solid #e3e9f2;vertical-align:middle}
tbody td.mid{text-align:center}
tbody tr:nth-child(even) td{background:#fbfcfe}
tbody tr:hover td{background:#f3f7ff}
td .nm{font-weight:650}
td .sm{font-size:12.2px;color:var(--muted)}
.empty{padding:34px 16px;text-align:center;color:var(--muted);font-size:13.5px}

/* ---------------- badges / pills ---------------- */
.pill{display:inline-block;font-size:11.4px;font-weight:700;padding:3px 9px;border-radius:999px;
      border:1.5px solid;letter-spacing:.03em;white-space:nowrap}
.pill.on{background:var(--okbg);border-color:#a7f3d0;color:var(--ok)}
.pill.off{background:#f1f5f9;border-color:#e2e8f0;color:#64748b}
.pill.bad{background:var(--badbg);border-color:#fecaca;color:var(--bad)}
.pill.warn{background:var(--warnbg);border-color:#fde68a;color:var(--warn)}
.pill.info{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.pill.violet{background:#f5f3ff;border-color:#ddd6fe;color:var(--violet)}
.pill.teal{background:#f0fdfa;border-color:#99f6e4;color:#0f766e}
.pill.pink{background:#fdf2f8;border-color:#fbcfe8;color:#be185d}
.pill.amber{background:#fffbeb;border-color:#fde68a;color:#b45309}
.pill.blue{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.pill.dark{background:#f1f5f9;border-color:#cbd5e1;color:#334155}

/* ================= conversations (leads) ================= */
.convbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.convbar .grow{flex:1 1 240px;min-width:200px}

/* the "has a phone number" highlight toggle — the one control that matters most */
.tog{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:11px 19px;border-radius:11px;
     font-size:13.9px;font-weight:750;border:2px solid #a7f3d0;color:#fff;transition:.14s;
     background:linear-gradient(135deg,#047857,#10b981);box-shadow:0 3px 12px rgba(4,120,87,.28)}
.tog:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 6px 18px rgba(4,120,87,.34)}
.tog .n{background:rgba(255,255,255,.95);color:#047857;border-radius:999px;padding:2px 10px;font-size:12.2px;font-weight:800}
.tog.on{background:linear-gradient(135deg,#065f46,#047857);border-color:#065f46;
        box-shadow:inset 0 2px 8px rgba(0,0,0,.18)}
.tog.on .n{background:#fff;color:#065f46}

/* one row = one person */
.clist{display:flex;flex-direction:column;gap:12px}
.crow{display:flex;gap:14px;background:#fff;border:2px solid var(--line);border-radius:14px;
      padding:14px 16px;text-decoration:none;color:inherit;transition:.14s;position:relative;overflow:hidden}
.crow:hover{border-color:#93c5fd;box-shadow:0 5px 18px rgba(30,58,138,.10);transform:translateY(-1px)}
.crow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
              background:linear-gradient(180deg,var(--brand),var(--brand2))}
.crow.hasphone::before{background:linear-gradient(180deg,#047857,#34d399)}
.crow .av{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:flex;align-items:center;
          justify-content:center;font-weight:750;font-size:16px;color:#fff;
          background:linear-gradient(135deg,var(--brand),var(--brand2))}
.crow.hasphone .av{background:linear-gradient(135deg,#047857,#34d399)}
.crow .body{flex:1;min-width:0}
.crow .nm{font-weight:700;font-size:14.4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crow .last{font-size:13.2px;color:#475569;margin-top:3px;overflow:hidden;text-overflow:ellipsis;
            white-space:nowrap;max-width:100%}
.crow .meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px}
.crow .right{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.crow .when{font-size:11.8px;color:var(--muted);white-space:nowrap}
.ccount{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-radius:999px;
        padding:2px 10px;font-size:11.6px;font-weight:750;white-space:nowrap}
.crow.hasphone .ccount{background:linear-gradient(135deg,#047857,#34d399)}
.phchip{display:inline-flex;align-items:center;gap:5px;background:#ecfdf5;border:1.5px solid #a7f3d0;
        color:#047857;border-radius:999px;padding:2px 10px;font-size:12.1px;font-weight:700}
.phchip .mono{font-weight:700}

/* ================= chat bubbles ================= */
.chat{display:flex;flex-direction:column;gap:12px;padding:6px 2px}
.bub{max-width:78%;padding:11px 14px;border-radius:15px;font-size:13.9px;line-height:1.55;
     border:2px solid;position:relative;word-wrap:break-word}
.bub .who{font-size:11.2px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;
          opacity:.72;margin-bottom:4px}
.bub .tm{font-size:10.8px;opacity:.66;margin-top:5px}
.bub.in{align-self:flex-start;background:linear-gradient(135deg,#ffffff,#f6f9ff);
        border-color:#cbd5e1;border-bottom-left-radius:5px}
.bub.out{align-self:flex-end;background:linear-gradient(135deg,#ecfdf5,#d1fae5);
         border-color:#a7f3d0;border-bottom-right-radius:5px}
.bub.sys{align-self:center;background:linear-gradient(135deg,#f5f3ff,#ede9fe);
         border-color:#ddd6fe;color:#5b21b6;font-size:12.6px;text-align:center;max-width:92%;border-radius:11px}
.bub .intag{display:inline-block;font-size:10.6px;font-weight:750;background:#f5f3ff;
            border:1.4px solid #ddd6fe;color:#6d28d9;border-radius:999px;padding:1px 7px;margin-top:6px}

/* ================= colourful "others" blocks ================= */
.oblk{background:#fff;border:2px solid var(--line);border-radius:14px;padding:15px 17px;
      margin-bottom:15px;position:relative;overflow:hidden}
.oblk::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--accent,var(--brand2))}
.oblk h3{margin:2px 0 12px;font-size:14px;font-weight:730;display:flex;align-items:center;gap:8px}
/* small coloured mark before each block title — replaces the old emoji icon chip */
.oblk h3::before{content:"";width:9px;height:9px;flex:0 0 9px;border-radius:3px;
                 background:var(--accent,var(--brand2))}
.o-violet{--accent:linear-gradient(135deg,#6d28d9,#a78bfa)}
.o-blue{--accent:linear-gradient(135deg,#1e3a8a,#3b82f6)}
.o-teal{--accent:linear-gradient(135deg,#0f766e,#2dd4bf)}
.o-amber{--accent:linear-gradient(135deg,#b45309,#fbbf24)}
.o-pink{--accent:linear-gradient(135deg,#be185d,#f472b6)}
.o-red{--accent:linear-gradient(135deg,#b91c1c,#f87171)}
.o-red{border-color:#fecaca}
.o-red h3{color:var(--bad)}
.oprofile{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.oprofile .av{width:62px;height:62px;flex:0 0 62px;border-radius:50%;display:flex;align-items:center;
              justify-content:center;font-size:22px;font-weight:750;color:#fff;
              background:linear-gradient(135deg,var(--brand),var(--brand2))}

/* ================= info + conversation side by side ================= */
.duo{display:grid;gap:16px;grid-template-columns:minmax(300px,1fr) minmax(340px,1.25fr);
     align-items:stretch;margin-bottom:18px}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
.duo-col{min-width:0;display:flex;flex-direction:column}
.duo-col > *{flex:1;min-height:0}

/* the intent/score/etc. card — scrolls on its own so a long value list never
   stretches the row past the conversation panel.
   NOTE: `.kv` itself carries `overflow:hidden` (it clips the inner grid to the rounded
   corners) and it is declared LATER in this file, so setting overflow on the same element
   loses the cascade and the panel silently stops scrolling. The scroll therefore lives on
   this WRAPPER, with `.kv` free to keep its own overflow:hidden. */
.kvscroll{background:#fff;border:2px solid var(--line);border-radius:13px;padding:0;
          max-height:440px;overflow-y:auto;overscroll-behavior:contain}
.kvscroll > .kv{border:0;border-radius:0}
.duo-info{max-height:440px}

/* the conversation panel — fixed height with its own scrollbar */
.chatbox{display:flex;flex-direction:column;max-height:440px;padding-bottom:12px}
.chatbox h3,.chatbox .hint{flex:0 0 auto}
.chats{overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0;
       display:flex;flex-direction:column;gap:12px;padding:4px 6px 4px 2px}
/* the flow panel — same treatment so both columns scroll independently */
.flowbox{display:flex;flex-direction:column;max-height:560px}
.flowbox h3,.flowbox .hint{flex:0 0 auto}
.flowscroll{overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0;padding-right:6px}

/* visible scrollbars — the panels ARE cut off, and users must see that they can scroll */
.kvscroll::-webkit-scrollbar,.chats::-webkit-scrollbar,.flowscroll::-webkit-scrollbar{width:11px}
.kvscroll::-webkit-scrollbar-track,.chats::-webkit-scrollbar-track,
.flowscroll::-webkit-scrollbar-track{background:#eef2f7;border-radius:8px;border:2px solid #fff}
.kvscroll::-webkit-scrollbar-thumb,.chats::-webkit-scrollbar-thumb,
.flowscroll::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:8px;border:2px solid #eef2f7}
.kvscroll::-webkit-scrollbar-thumb:hover,.chats::-webkit-scrollbar-thumb:hover,
.flowscroll::-webkit-scrollbar-thumb:hover{background:#64748b}
.kvscroll,.chats,.flowscroll{scrollbar-width:thin;scrollbar-color:#94a3b8 #eef2f7}

/* ================= conversation flow (day-grouped thread) ================= */
.dayblk{margin-bottom:18px}
.dayblk:last-child{margin-bottom:0}
.dayhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 12px;border-radius:10px;
         background:linear-gradient(135deg,#eef2ff,#e0e7ff);border:2px solid #c7d2fe;margin-bottom:12px}
.dayhead strong{font-size:13.6px;color:#1e3a8a}
.dayhead.repeat{background:linear-gradient(135deg,#fff7ed,#ffedd5);border-color:#fed7aa}
.dayhead.repeat strong{color:#9a3412}
.daypill{font-size:10.8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
         padding:3px 10px;border-radius:999px;background:#1e3a8a;color:#fff;white-space:nowrap}
.dayhead.repeat .daypill{background:#c2410c}
.dayhead .sm{margin-left:auto}

.flist{position:relative;padding-left:8px}
.fstep{display:flex;gap:11px;position:relative;padding-bottom:13px}
.fstep:last-child{padding-bottom:0}
/* the vertical rail that makes the flow read top-to-bottom */
.fstep:not(:last-child)::before{content:"";position:absolute;left:6px;top:16px;bottom:-3px;width:2px;
                                background:linear-gradient(180deg,#cbd5e1,#e2e8f0)}
.fdot{width:14px;height:14px;flex:0 0 14px;border-radius:50%;border:3px solid #fff;
      box-shadow:0 0 0 2px #cbd5e1;margin-top:3px;z-index:1}
.fmsg    .fdot{background:linear-gradient(135deg,#1e3a8a,#3b82f6);box-shadow:0 0 0 2px #93c5fd}
.freply  .fdot{background:linear-gradient(135deg,#047857,#10b981);box-shadow:0 0 0 2px #6ee7b7}
.fnote   .fdot{background:linear-gradient(135deg,#6d28d9,#a78bfa);box-shadow:0 0 0 2px #c4b5fd}
.fstatus .fdot{background:linear-gradient(135deg,#b45309,#fbbf24);box-shadow:0 0 0 2px #fcd34d}
.fassign .fdot{background:linear-gradient(135deg,#0e7490,#22d3ee);box-shadow:0 0 0 2px #67e8f9}
.fnone   .fdot{background:#e2e8f0;box-shadow:0 0 0 2px #cbd5e1}

.fbody{flex:1;min-width:0;background:#f8fafc;border:2px solid var(--line);border-radius:11px;
       padding:10px 13px}
.fmsg   .fbody{background:linear-gradient(135deg,#ffffff,#f1f5ff);border-color:#c7d2fe}
.freply .fbody{background:linear-gradient(135deg,#ffffff,#effdf6);border-color:#a7f3d0}
.fnote  .fbody{background:linear-gradient(135deg,#ffffff,#f7f5ff);border-color:#ddd6fe}
.fstatus .fbody{background:linear-gradient(135deg,#ffffff,#fffbeb);border-color:#fde68a}
.fassign .fbody{background:linear-gradient(135deg,#ffffff,#ecfeff);border-color:#a5f3fc}
.fnone  .fbody{background:#f8fafc;border-style:dashed}

.flabel{font-size:11.2px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
        margin-bottom:4px;color:#475569}
.fmsg   .flabel{color:#1d4ed8}
.freply .flabel{color:#047857}
.fnote  .flabel{color:#6d28d9}
.fstatus .flabel{color:#b45309}
.fassign .flabel{color:#0e7490}
.flabel .ftm{font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);margin-left:5px}
.ftext{font-size:13.5px;line-height:1.55;word-wrap:break-word}
.ftext.sm{color:var(--muted);font-size:12.8px}

.rawbox{margin-top:22px;border:2px solid var(--line);border-radius:13px;background:#fff;padding:14px 17px}
.rawbox summary{cursor:pointer;font-size:13.2px;font-weight:700;color:var(--muted);list-style:none}
.rawbox summary::-webkit-details-marker{display:none}
.rawbox summary::before{content:"› ";font-weight:800;color:var(--brand2);display:inline-block;
                        transition:.15s}
.rawbox[open] summary::before{transform:rotate(90deg)}
.rawbox summary:hover{color:var(--brand)}


/* ---------------- forms ---------------- */
.form{background:#fff;border:1px solid var(--line);border-radius:13px;padding:19px}
.frow{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:14px}
.frow.one{grid-template-columns:1fr}
label{display:block;font-size:12.4px;font-weight:700;color:#334155;margin-bottom:5px;letter-spacing:.01em}
label .req{color:var(--bad)}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=tel],select,textarea{
  width:100%;padding:9.5px 11px;border:1.6px solid #cbd5e1;border-radius:9px;font-size:13.8px;
  font-family:inherit;color:var(--ink);background:#fff}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(59,130,246,.16)}
textarea{resize:vertical;min-height:74px}
.hint{font-size:11.8px;color:var(--muted);margin-top:4px}
.chk{display:flex;align-items:center;gap:8px;font-size:13.4px;font-weight:600;color:#334155}
.chk input{width:auto}

.btn{display:inline-block;border:0;cursor:pointer;font-family:inherit;font-weight:650;font-size:13.5px;
     padding:9.5px 16px;border-radius:9px;text-decoration:none;text-align:center}
.btn.p{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.btn.p:hover{opacity:.94}
.btn.s{background:#fff;color:var(--brand);border:1.6px solid #c7d2fe}
.btn.s:hover{background:#eef2ff}
.btn.d{background:#fff;color:var(--bad);border:1.6px solid #fecaca}
.btn.d:hover{background:var(--badbg)}
.btn.xs{padding:5.5px 10px;font-size:12.3px;border-radius:7px}
.btn.grey{background:#f1f5f9;color:#475569;border:1.6px solid #e2e8f0}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.inline{display:inline}

/* ---------------- login page ---------------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;
  background:linear-gradient(140deg,#0b1730 0%,#1b2b4d 48%,#2c4a86 100%);padding:22px}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:16px;padding:30px 28px;
  box-shadow:0 26px 60px rgba(4,10,25,.45)}
.login-card .eyebrow{font-size:10.6px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand2);font-weight:750}
.login-card h1{margin:9px 0 4px;font-size:21px;font-weight:730;letter-spacing:-.01em}
.login-card .firm{font-size:12.8px;color:var(--muted);margin-bottom:20px}
.login-card .field{margin-bottom:13px}
.login-card .btn{width:100%;margin-top:6px;padding:11px}
.login-foot{margin-top:16px;font-size:12px;color:var(--muted);text-align:center}

/* ---------------- misc ---------------- */
.kv{display:grid;grid-template-columns:190px 1fr;gap:0;border:2px solid #e3e9f2;border-radius:11px;overflow:hidden}
.kv .k{background:#f8fafc;padding:11px 13px;font-size:12.6px;font-weight:700;color:#475569;border-bottom:1px solid #e3e9f2}
.kv .v{padding:11px 13px;font-size:13.6px;border-bottom:1px solid #e3e9f2}
.kv .k:last-of-type,.kv .v:last-of-type{border-bottom:0}
code.secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:#f1f5f9;
  border:1px solid #e2e8f0;border-radius:6px;padding:2.5px 7px;letter-spacing:.02em}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.filter{display:flex;gap:9px;flex-wrap:wrap;align-items:end;margin-bottom:14px}
.filter .f{min-width:190px}
.note{background:#f8fafc;border:1.5px dashed var(--line);border-radius:10px;padding:11px 13px;
      font-size:12.7px;color:#475569}
.danger{border-color:#fecaca!important}
.bar{height:7px;border-radius:99px;background:#eef2f8;overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2))}

/* ---------------------------------------------- employee photo + avatar */
.photo-thumb{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  min-width:38px;min-height:38px;line-height:1;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  border:2px solid #fff;box-shadow:0 0 0 1.5px #dbe3ee;
}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.photo-thumb .initials{font-weight:800;letter-spacing:.03em;line-height:1;display:block}
.photo-thumb.sm{width:38px;height:38px;min-width:38px;min-height:38px;font-size:13px}
.photo-thumb.big{width:88px;height:88px;min-width:88px;min-height:88px;font-size:28px;border-radius:14px}
.emp-cell{display:flex;align-items:center;gap:11px}
.emp-cell>div:last-child{min-width:0}
.emp-cell .nm{font-weight:700;overflow-wrap:anywhere}

/* Table cells must never stretch a fixed-size avatar. */
.tw td{vertical-align:middle}
.tw .photo-thumb{max-width:38px;max-height:38px}

.photo-field{display:flex;gap:15px;align-items:flex-start;flex-wrap:wrap}
.photo-inputs{flex:1;min-width:200px}
.photo-inputs input[type=file]{font-size:12.6px;padding:7px 9px;background:#f8fafc;
  border:1.5px dashed var(--line);border-radius:9px;width:100%;cursor:pointer}
.photo-inputs input[type=file]:hover{border-color:var(--brand)}
.chk.small{font-size:12.4px;font-weight:600;margin-top:9px;color:#64748b}

.emp-profile{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;
  background:#fff;border:2px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:18px;
  box-shadow:0 1px 2px rgba(15,23,42,.04)}
.emp-photo{width:132px;height:132px;border-radius:16px;overflow:hidden;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  font-size:42px;font-weight:800;letter-spacing:.03em;
  border:2px solid #fff;box-shadow:0 3px 12px rgba(15,23,42,.13)}
.emp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.emp-profile-side{flex:1;min-width:230px}
.emp-name{font-size:23px;font-weight:800;color:#0f172a;line-height:1.15}
.emp-desig{font-size:14.6px;font-weight:700;color:var(--brand);margin-top:3px}
.emp-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;
  font-size:12.8px;color:#64748b}
.emp-photo-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
@media(max-width:900px){
  .side{position:fixed;left:-260px;z-index:40;transition:left .18s ease;box-shadow:12px 0 30px rgba(0,0,0,.3)}
  .side.open{left:0}
  .burger{display:inline-block}
  .main{padding:0 15px 60px}
  .kv{grid-template-columns:1fr}
  .kv .k{border-bottom:0}
}