/* ==========================================================================
   RKTracer Support — shared UI system (login, dashboard, ticket, users,
   public submit + track). Reuses the RKValidate brand palette.
   ========================================================================== */
:root{
  --ink-900:#050a14;--ink-800:#0b1424;--ink-700:#111e34;--ink-600:#1a2a45;
  --bg:#f4f7fb;--surface:#fff;--surface-2:#f8fafd;--line:#e3e9f2;--line-strong:#cdd7e6;
  --text:#0c1a2e;--text-soft:#46566f;--text-mute:#6c7b92;--text-faint:#9aa8bc;
  --brand-700:#1a3fb0;--brand-600:#2563eb;--brand-500:#3b82f6;--brand-50:#eaf1fe;
  --cyan-600:#0891b2;--cyan-500:#06b6d4;
  --mint-600:#059669;--mint-500:#10b981;--mint-50:#e7f8f1;
  --amber-600:#b45309;--amber-500:#f59e0b;--amber-50:#fef6e7;
  --violet-600:#7c3aed;--violet-50:#f1ebfe;
  --rose-600:#e11d48;--rose-500:#f43f5e;--rose-50:#fee7ec;
  --grad:linear-gradient(135deg,#2563eb,#06b6d4);
  --grad-text:linear-gradient(100deg,#2563eb,#06b6d4 60%,#10b981);
  --grad-deep:linear-gradient(160deg,#0b1424,#102243 55%,#0b1424);
  --r-sm:8px;--r-md:12px;--r-lg:18px;--r-pill:999px;
  --sh-xs:0 1px 2px rgba(12,26,46,.06);
  --sh-sm:0 2px 8px rgba(12,26,46,.07),0 1px 2px rgba(12,26,46,.04);
  --sh-md:0 10px 30px rgba(15,33,66,.10),0 2px 8px rgba(15,33,66,.06);
  --sh-lg:0 24px 60px rgba(13,30,66,.18);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sidebar-w:248px;--topbar-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--brand-600);text-decoration:none}a:hover{color:var(--brand-700)}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.2}
p{margin:0}ul,ol{margin:0;padding:0}li{list-style:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
.mono{font-family:var(--mono)}
.muted{color:var(--text-mute)}.faint{color:var(--text-faint)}
.small{font-size:.85rem}.tiny{font-size:.78rem}
.center{text-align:center}.right{text-align:right}
.row{display:flex;align-items:center;gap:12px}.row.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:12px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grow{flex:1}.nowrap{white-space:nowrap}
.gap-sm{gap:8px}.gap-lg{gap:20px}
.mt-0{margin-top:0}.mt{margin-top:14px}.mt-lg{margin-top:24px}.mb{margin-bottom:14px}
.hide{display:none!important}
.text-grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ------------------------------ brand ------------------------------ */
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem;letter-spacing:-.03em;color:var(--text)}
.brand:hover{color:var(--text)}
.brand .mark{width:32px;height:32px;border-radius:8px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.85rem;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.brand .rk{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .sub{font-size:.7rem;font-weight:600;color:var(--text-mute);letter-spacing:.02em}

/* ------------------------------ buttons ---------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.92rem;line-height:1;padding:11px 18px;border-radius:var(--r-pill);border:1px solid transparent;transition:transform .12s,box-shadow .2s,background .2s,border-color .2s,color .2s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.28)}
.btn-primary:hover{color:#fff;box-shadow:0 12px 26px rgba(37,99,235,.38);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line-strong);box-shadow:var(--sh-xs)}
.btn-ghost:hover{border-color:var(--brand-500);color:var(--brand-700)}
.btn-soft{background:var(--brand-50);color:var(--brand-700)}
.btn-soft:hover{background:#dce8fd}
.btn-danger{background:var(--rose-50);color:var(--rose-600);border-color:rgba(244,63,94,.25)}
.btn-danger:hover{background:#fdd9e1}
.btn-sm{padding:8px 13px;font-size:.85rem}
.btn-lg{padding:14px 24px;font-size:1rem}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn-block{width:100%}
.btn-icon{padding:9px;border-radius:var(--r-sm)}

/* ------------------------------ forms ------------------------------ */
.field{margin-bottom:16px}
.field label,.lbl{display:block;font-weight:600;font-size:.85rem;margin-bottom:6px;color:var(--text)}
.req{color:var(--rose-500)}
.input,input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  width:100%;padding:11px 13px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  font-size:.95rem;color:var(--text);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
textarea{resize:vertical;min-height:120px}
.hint{font-size:.8rem;color:var(--text-mute);margin-top:5px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--text-soft)}
.check input{width:auto;margin-top:3px}
.field-error{color:var(--rose-600);font-size:.82rem;margin-top:5px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){.grid-2{grid-template-columns:1fr}}

/* ------------------------------ cards ------------------------------ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.card-pad{padding:24px}
.card-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-head h2,.card-head h3{font-size:1.02rem;font-weight:750}
.card-body{padding:22px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-600)}

/* ------------------------------ badges ----------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:.76rem;font-weight:700;line-height:1.4;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.st-open{background:var(--brand-50);color:var(--brand-700)}
.st-in_progress{background:var(--amber-50);color:var(--amber-600)}
.st-waiting_customer{background:var(--violet-50);color:var(--violet-600)}
.st-resolved{background:var(--mint-50);color:var(--mint-600)}
.st-closed{background:#eef2f7;color:var(--text-mute)}
.sev-critical{background:var(--rose-50);color:var(--rose-600)}
.sev-high{background:var(--amber-50);color:var(--amber-600)}
.sev-normal{background:var(--brand-50);color:var(--brand-700)}
.sev-low{background:#eef2f7;color:var(--text-mute)}
.role-admin{background:var(--violet-50);color:var(--violet-600)}
.role-agent{background:var(--brand-50);color:var(--brand-700)}

/* ------------------------------ table ------------------------------ */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
table.tbl th{text-align:left;padding:12px 14px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);font-weight:700;border-bottom:1px solid var(--line);background:var(--surface-2);position:sticky;top:0;z-index:1}
table.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tbody tr{cursor:pointer;transition:background .12s}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl .ref{font-family:var(--mono);font-weight:700;color:var(--brand-700);font-size:.82rem}
table.tbl .subj{font-weight:600;color:var(--text)}
table.tbl.plain tbody tr{cursor:default}

/* avatar */
.avatar{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.78rem;font-weight:700;flex:none}
.avatar.lg{width:40px;height:40px;font-size:.9rem}
.avatar.grey{background:#cfd9e8;color:#46566f}

/* chips / filters */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-pill);font-size:.84rem;font-weight:600;background:var(--surface);border:1px solid var(--line-strong);color:var(--text-soft);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--brand-400);color:var(--brand-700)}
.chip.active{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.chip .count{background:rgba(0,0,0,.08);border-radius:var(--r-pill);padding:1px 7px;font-size:.74rem}
.chip.active .count{background:rgba(255,255,255,.25)}

/* ------------------------- admin app shell ------------------------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{background:var(--ink-900);color:#cdd9ec;display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh}
.sidebar .brand{color:#fff;padding:6px 8px 18px}
.sidebar .brand .sub{color:#7f93b3}
.nav-section{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#62789c;padding:14px 12px 6px;font-weight:700}
.nav-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);color:#aebdd6;font-weight:600;font-size:.92rem;transition:.15s}
.nav-link svg{width:18px;height:18px;opacity:.85}
.nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-link.active{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.sidebar .foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.user-card{display:flex;align-items:center;gap:10px;padding:8px}
.user-card .nm{font-size:.86rem;font-weight:700;color:#fff;line-height:1.2}
.user-card .rl{font-size:.72rem;color:#7f93b3}
.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 24px;position:sticky;top:0;z-index:5}
.topbar h1{font-size:1.12rem;font-weight:800}
.content{padding:24px;max-width:1280px;width:100%}
.menu-btn{display:none}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:var(--sidebar-w);z-index:50;transform:translateX(-100%);transition:transform .25s}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(5,10,20,.5);z-index:40}
  .menu-btn{display:inline-flex}
}

/* ------------------------------ stats ------------------------------ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--sh-xs)}
.stat .n{font-size:1.7rem;font-weight:850;letter-spacing:-.02em}
.stat .l{font-size:.82rem;color:var(--text-mute);margin-top:2px}

/* ------------------------- ticket thread --------------------------- */
.thread{display:flex;flex-direction:column;gap:16px}
.msg{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.msg .msg-head{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:.85rem}
.msg .msg-head .who{font-weight:700}
.msg .msg-head .when{margin-left:auto;color:var(--text-mute);font-size:.8rem}
.msg .msg-body{padding:16px}
.msg.customer{border-color:#cfe0fb}
.msg.customer .msg-head{background:#f0f6ff}
.msg.agent{border-color:#c7eedd}
.msg.agent .msg-head{background:#eafaf2}
.msg.internal{border-color:#fbe6c0;background:#fffdf7}
.msg.internal .msg-head{background:#fef6e7;color:var(--amber-600)}
.msg.system{border-style:dashed;background:transparent}
/* rendered rich text */
.rt{line-height:1.6;color:var(--text)}
.rt p{margin:0 0 10px}.rt p:last-child{margin-bottom:0}
.rt ul,.rt ol{margin:0 0 10px;padding-left:22px}.rt ul li{list-style:disc}.rt ol li{list-style:decimal}
.rt a{color:var(--brand-600);text-decoration:underline}
.rt blockquote{border-left:3px solid var(--line-strong);margin:0 0 10px;padding:2px 0 2px 14px;color:var(--text-soft)}
.rt pre,.rt code{font-family:var(--mono);font-size:.86em}
.rt pre{background:var(--ink-800);color:#c9d6ee;padding:12px 14px;border-radius:8px;overflow-x:auto}
.rt .ql-align-center{text-align:center}.rt .ql-align-right{text-align:right}.rt .ql-align-justify{text-align:justify}
.rt .ql-indent-1{padding-left:3em}.rt .ql-indent-2{padding-left:6em}.rt .ql-indent-3{padding-left:9em}

/* attachments */
.att{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:.84rem;font-weight:600;color:var(--text-soft);margin:4px 6px 0 0}
.att:hover{border-color:var(--brand-400);color:var(--brand-700)}
.att svg{width:16px;height:16px}
.att .sz{color:var(--text-faint);font-weight:500}

/* meta sidebar on ticket detail */
.meta-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.meta-row:last-child{border-bottom:none}
.meta-row .k{color:var(--text-mute)}.meta-row .v{font-weight:600;text-align:right}

/* timeline (events) */
.timeline{position:relative;padding-left:18px}
.timeline .ev{position:relative;padding:0 0 14px 12px;font-size:.83rem;color:var(--text-soft)}
.timeline .ev::before{content:"";position:absolute;left:-6px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--brand-500);box-shadow:0 0 0 3px var(--brand-50)}
.timeline::before{content:"";position:absolute;left:-2px;top:4px;bottom:4px;width:2px;background:var(--line)}
.timeline .ev .t{color:var(--text-faint);font-size:.76rem}

/* ------------------------------ toast ------------------------------ */
.toast-wrap{position:fixed;top:18px;right:18px;z-index:1000;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink-800);color:#fff;padding:12px 16px;border-radius:var(--r-sm);box-shadow:var(--sh-lg);font-size:.9rem;font-weight:600;animation:toastIn .25s ease;max-width:380px}
.toast.ok{background:#0f7a52}.toast.err{background:#b3243b}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ------------------------------ modal ------------------------------ */
.modal-bg{position:fixed;inset:0;background:rgba(5,10,20,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal-bg.open{display:flex}
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%;max-width:480px;max-height:90vh;overflow:auto}
.modal .modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal .modal-head h3{font-size:1.05rem;font-weight:800}
.modal .modal-body{padding:22px}
.modal .modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.x-btn{background:none;border:none;color:var(--text-mute);font-size:1.4rem;line-height:1;padding:0 4px}

/* empty / loading */
.empty{text-align:center;padding:60px 20px;color:var(--text-mute)}
.empty .ico{width:54px;height:54px;border-radius:14px;background:var(--brand-50);color:var(--brand-600);display:grid;place-items:center;margin:0 auto 14px}
.spinner{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--brand-600);border-radius:50%;animation:spin .8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ----------------------- public / auth pages ---------------------- */
.public-wrap{min-height:100vh;display:flex;flex-direction:column}
.public-top{background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);padding:16px 0}
.public-top .inner,.public-main{max-width:920px;margin:0 auto;padding:0 20px;width:100%}
.public-main{padding-top:36px;padding-bottom:60px}
.hero-band{background:var(--grad-deep);color:#fff;border-radius:var(--r-lg);padding:34px;position:relative;overflow:hidden;margin-bottom:26px}
.hero-band h1{font-size:1.8rem;color:#fff}
.hero-band p{color:#a9bad3;margin-top:8px;max-width:560px}
.auth-wrap{min-height:100vh;display:grid;place-items:center;background:var(--grad-deep);padding:20px}
.auth-card{width:100%;max-width:400px}
.std-badge{display:inline-flex;flex-direction:column;padding:8px 14px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}
.std-badge .n{font-weight:800;font-size:.92rem}.std-badge .s{font-size:.68rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:.04em}

/* quill tweaks */
.ql-toolbar.ql-snow,.ql-container.ql-snow{border-color:var(--line-strong)}
.ql-toolbar.ql-snow{border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--surface-2)}
.ql-container.ql-snow{border-radius:0 0 var(--r-sm) var(--r-sm);min-height:150px;font-family:var(--font);font-size:.95rem}
.ql-editor{min-height:150px}