@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================================
   TRENDSIC DYNAMICS - SERVICES & BRANCHES (Queue Admin Config) - Signal
   Verbatim translation of docs/design/export/Services and Branches.dc.html into
   the real Durandal/Knockout queueAdminConfig module. Root class .sbc-root
   carries every design token as a CSS var; markup uses var(--x, fallback) so it
   degrades gracefully. Reuses the EXISTING queue backend (locations / lines /
   linemessages / lineQuestions / stations / image endpoints).
   ============================================================================ */

.sbc-root {
    /* shared */
    --brand-50:#EEF1FE; --brand-100:#DDE3FD; --brand-200:#C2CCFB; --brand-400:#7B8FF3; --brand-500:#5E76EE;
    --brand-600:#4C63E6; --brand-700:#3D4FC9; --brand-800:#3340A0; --brand-900:#28297A;
    --brand-grad:linear-gradient(135deg,#5E76EE,#8A63E8);
    --success:#15A06B; --danger:#E04646; --warning:#EE8A2E; --gold:#D99B12; --purple:#8B5CF6; --info:#4C6EF5;
    --r-md:12px; --r-lg:16px;
    --e1:0 1px 2px rgba(20,25,55,.06); --e2:0 8px 28px rgba(20,25,55,.14);
    --ease:cubic-bezier(.2,.8,.2,1);

    /* light (default) */
    --bg:#F5F6FB; --surface:#FFFFFF; --surface-2:#FAFBFE; --border:#E5E8F2; --border-strong:#D2D7E6;
    --text:#1A1D2E; --text-2:#4A4F63; --muted:#767C92; --faint:#A2A7BC;
    --info-bg:#ECEFFB; --info-fg:#3D4FC9; --ok-bg:#E2F6EE; --ok-fg:#0E6B47;
    --warn-bg:#FCEEDD; --warn-fg:#B5651A; --gold-bg:#FBF1D6; --gold-fg:#8A6A0C;
    --bad-bg:#FCE7E7; --bad-fg:#B3262B; --bad-line:#F4D4D4;
    --pur-bg:#EFE9FD; --pur-fg:#6D45C9; --neutral-bg:#F1F2F6; --neutral-fg:#6B7080;

    font-family:'Plus Jakarta Sans',sans-serif;
}

.sbc-root.dark {
    --bg:#0E1430; --surface:#161E3C; --surface-2:#1B2446; --border:#2A335C; --border-strong:#38436F;
    --text:#EEF1FB; --text-2:#B9C2E0; --muted:#8590B5; --faint:#6B7596;
    --info-bg:rgba(94,118,238,.16); --info-fg:#C2CCFB; --ok-bg:rgba(52,211,153,.15); --ok-fg:#5FE3B0;
    --warn-bg:rgba(238,138,46,.16); --warn-fg:#F0A961; --gold-bg:rgba(217,155,18,.16); --gold-fg:#F2C14E;
    --bad-bg:rgba(224,70,70,.16); --bad-fg:#F58A8A; --bad-line:rgba(224,70,70,.32);
    --pur-bg:rgba(139,92,246,.18); --pur-fg:#C3A8FB; --neutral-bg:rgba(255,255,255,.06); --neutral-fg:#8590B5;
}

.sbc-root *{box-sizing:border-box}
.sbc-root ::selection{background:#C2CCFB}

/* scrollbars */
.sbc-root .sbc-scroll::-webkit-scrollbar,
.sbc-root::-webkit-scrollbar{width:10px;height:10px}
.sbc-root .sbc-scroll::-webkit-scrollbar-thumb,
.sbc-root::-webkit-scrollbar-thumb{background:var(--border-strong,#cfd4e4);border-radius:99px;border:2px solid transparent;background-clip:content-box}

/* interactive affordances */
.sbc-root .sbc-act{transition:filter .14s,background .14s,border-color .14s,box-shadow .14s}
.sbc-root .sbc-act:hover{filter:brightness(.98)}
.sbc-root .sbc-row{transition:background .12s}
.sbc-root .sbc-row:hover{background:var(--surface-2,#FAFBFE)}
.sbc-root .sbc-card{transition:box-shadow .16s,border-color .16s,transform .16s}
.sbc-root .sbc-card:hover{box-shadow:0 10px 28px rgba(20,25,55,.10);border-color:var(--brand-200,#C2CCFB)}
.sbc-root .sbc-menuitem:hover{background:var(--surface-2,#FAFBFE)}
.sbc-root .sbc-menuitem-danger:hover{background:var(--bad-bg,#FCE7E7)}
.sbc-root .sbc-del:hover{background:var(--bad-bg,#FCE7E7);color:var(--bad-fg,#B3262B)}

/* inputs / selects inherit tokens */
.sbc-root input::placeholder,
.sbc-root textarea::placeholder{color:var(--faint,#A2A7BC)}
.sbc-root .sbc-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%23767C92' stroke-width='2'><path d='M5 7l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

/* the drawer / dropzone hosts should not carry Metronic dropzone chrome */
.sbc-root #locationImageDropzone.dropzone,
.sbc-root #lineImageDropzone.dropzone{min-height:0;border:0}
.sbc-root #locationImageDropzone.dropzone{aspect-ratio:4/3}

.sbc-root .sbc-drawer{animation:sbc-drawer .24s cubic-bezier(.2,.8,.2,1)}

/* keyframes */
@keyframes sbc-pop{0%{transform:translateY(6px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes sbc-drawer{from{transform:translateX(30px)}to{transform:translateX(0)}}
@keyframes sbc-slide{from{transform:translateY(14px)}to{transform:translateY(0)}}

/* responsive */
@media (max-width: 900px){
    .sbc-root .sbc-editgrid{grid-template-columns:1fr !important}
}
@media (max-width: 640px){
    .sbc-root .sbc-drawer{width:100% !important}
    .sbc-root main{padding-left:16px !important;padding-right:16px !important}
}