/* =================================================================
   Smart Queue — shared design system  (parent portal + admin)
   Self-hosted fonts, warm "paper" editorial aesthetic.
   No CDN. All assets live under /assets.
   ================================================================= */

/* ----------------------------- Fonts ---------------------------- */
@font-face{
    font-family:'Bricolage Grotesque';
    src:url('../fonts/bricolage-grotesque.woff2') format('woff2');
    font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'Plus Jakarta Sans';
    src:url('../fonts/plus-jakarta-sans.woff2') format('woff2');
    font-weight:200 800; font-style:normal; font-display:swap;
}

/* ---------------------------- Tokens ---------------------------- */
:root{
    --paper:#FBF6EE;
    --paper-2:#F3EADC;
    --card:#FFFFFF;
    --ink:#1B1F2A;
    --ink-soft:#5B6172;
    --ink-faint:#8A8FA0;
    --line:rgba(27,31,42,.10);
    --line-strong:rgba(27,31,42,.18);

    --brand:#FF5A36;          /* warm tangerine */
    --brand-deep:#E33F1B;
    --brand-tint:#FFE9E1;
    --mint:#0E9E72;           /* "calling" / success */
    --mint-tint:#DBF3E9;
    --gold:#F4B740;
    --ink-btn:#1B1F2A;

    --display:'Bricolage Grotesque',Georgia,serif;
    --body:'Plus Jakarta Sans',system-ui,sans-serif;

    --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
    --shadow:0 18px 50px -22px rgba(27,31,42,.45);
    --shadow-sm:0 8px 24px -14px rgba(27,31,42,.4);
}

/* ----------------------------- Base ----------------------------- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
    font-family:var(--body);color:var(--ink);background:var(--paper);
    min-height:100vh;line-height:1.5;font-size:16px;
    background-image:
        radial-gradient(1100px 520px at 100% -8%,rgba(255,90,54,.10),transparent 60%),
        radial-gradient(900px 480px at -10% 110%,rgba(14,158,114,.10),transparent 55%);
    background-attachment:fixed;
}
/* subtle paper grain */
body::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.08}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid rgba(255,90,54,.4);outline-offset:2px}

/* --------------------------- Layout ----------------------------- */
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 22px}
.stack{display:flex;flex-direction:column}

/* --------------------------- Top bar ---------------------------- */
.topbar{
    position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
    padding:20px 26px;
}
.brand{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.brand .mark{
    width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;color:#fff;
    background:linear-gradient(140deg,var(--brand),var(--brand-deep));
    box-shadow:0 12px 26px -10px rgba(227,63,27,.7);transform:rotate(-4deg);
}
.brand small{display:block;font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* --------------------------- Buttons ---------------------------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
    font-family:var(--body);font-weight:700;font-size:15px;border:none;border-radius:var(--r);
    padding:13px 20px;transition:transform .12s,box-shadow .2s,background .2s,color .2s;
    background:var(--card);color:var(--ink);border:1px solid var(--line-strong);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:linear-gradient(140deg,var(--brand),var(--brand-deep));color:#fff;border:none;box-shadow:0 16px 32px -14px rgba(227,63,27,.75)}
.btn-ink{background:var(--ink-btn);color:#fff;border:none}
.btn-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--ink-soft)}
.btn-danger{background:#fff;color:#C32C16;border:1px solid rgba(195,44,22,.3)}
.btn-danger:hover{background:#C32C16;color:#fff}
.btn-block{width:100%}
.btn-sm{padding:9px 14px;font-size:13.5px;border-radius:12px}

/* --------------------------- Cards ------------------------------ */
.card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--shadow);
}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}

/* --------------------------- Forms ------------------------------ */
label.lbl{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin:0 0 7px 2px}
.input,select.input,textarea.input{
    width:100%;font-family:var(--body);font-size:15px;color:var(--ink);
    background:var(--paper);border:1px solid var(--line-strong);border-radius:14px;
    padding:13px 15px;transition:border-color .2s,box-shadow .2s,background .2s;
}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,90,54,.15);background:#fff}
.input::placeholder{color:var(--ink-faint)}
.field{margin-bottom:18px}

/* file input */
.file{
    display:flex;align-items:center;gap:12px;border:1px dashed var(--line-strong);
    border-radius:14px;padding:12px 14px;background:var(--paper);cursor:pointer;
}
.file input{display:none}
.file .pill{background:var(--ink);color:#fff;border-radius:10px;padding:7px 12px;font-size:13px;font-weight:700;white-space:nowrap}
.file .name{font-size:13.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --------------------------- Badges ----------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px}
.badge-mint{background:var(--mint-tint);color:#0A6B4D}
.badge-brand{background:var(--brand-tint);color:var(--brand-deep)}
.badge-mute{background:var(--paper-2);color:var(--ink-soft)}

/* --------------------------- Tables ----------------------------- */
.table{width:100%;border-collapse:collapse}
.table th{
    text-align:left;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-faint);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line)
}
.table td{padding:14px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:var(--paper)}

/* --------------------------- Avatar ----------------------------- */
.avatar{border-radius:14px;object-fit:cover;background:var(--paper-2);border:1px solid var(--line)}

/* --------------------------- Alerts ----------------------------- */
.alert{border-radius:14px;padding:12px 15px;font-size:14px;font-weight:600;margin-bottom:18px}
.alert-err{background:#FCE7E2;color:#B0331B;border:1px solid rgba(176,51,27,.25)}
.alert-ok{background:var(--mint-tint);color:#0A6B4D;border:1px solid rgba(14,158,114,.25)}

/* --------------------------- Helpers ---------------------------- */
.muted{color:var(--ink-soft)}
.faint{color:var(--ink-faint)}
.row{display:flex;gap:14px}
.between{display:flex;align-items:center;justify-content:space-between;gap:14px}
.grid{display:grid;gap:18px}
@media(max-width:640px){.row{flex-direction:column}.hide-sm{display:none}}