/* ============================================================================
   SleekTech Portals — shared design system (see Docs/Portal-Design-System.md).
   Layered on Bootstrap 5.3: we theme Bootstrap's primitives via tokens and add
   the signature components (segmented control, sortable table, slide-over drawer,
   status dots, count chip). Used by every portal — keep portal-specifics OUT.
   ============================================================================ */

:root {
    --stp-canvas: #F7F8FA;
    --stp-surface: #FFFFFF;
    --stp-border: #E7E9EE;
    --stp-border-strong: #D7DBE2;
    --stp-ink: #141821;
    --stp-muted: #5A6473;
    --stp-faint: #8B93A1;
    --stp-accent: #28AEDF;          /* SleekTech brand cyan */
    --stp-accent-strong: #1B93C4;   /* deeper — hover, link text */
    --stp-accent-soft: #E4F5FB;
    --stp-rail: #0F141B;
    --stp-rail-fg: #AEB7C4;
    --stp-rail-fg-active: #FFFFFF;
    --stp-success: #1F9D63;
    --stp-danger: #D64545;
    --stp-warning: #C77700;

    --stp-r: 10px;
    --stp-r-sm: 8px;
    --stp-r-chip: 6px;
    --stp-shadow: 0 1px 2px rgba(20,28,45,.04), 0 4px 16px rgba(20,28,45,.05);
    --stp-sidebar-w: 248px;
    --stp-mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Mono", Menlo, monospace;

    /* Re-skin Bootstrap to the SleekTech system. */
    --bs-body-bg: var(--stp-canvas);
    --bs-body-color: var(--stp-ink);
    --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --bs-border-color: var(--stp-border);
    --bs-primary: var(--stp-accent);
    --bs-primary-rgb: 40, 174, 223;
    --bs-link-color: var(--stp-accent-strong);
    --bs-link-color-rgb: 27, 147, 196;
    --bs-link-hover-color: #147AA0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: 14px;
    color: var(--stp-ink);
    background: var(--stp-canvas);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}

.stp-mono, code, .stp-code { font-family: var(--stp-mono); font-variant-numeric: tabular-nums; }

/* ---- Buttons ------------------------------------------------------------- */
.btn { --bs-btn-font-weight: 550; --bs-btn-border-radius: var(--stp-r-sm); --bs-btn-font-size: 14px; letter-spacing: -0.01em; }
.btn-primary {
    --bs-btn-bg: var(--stp-accent); --bs-btn-border-color: var(--stp-accent);
    --bs-btn-hover-bg: var(--stp-accent-strong); --bs-btn-hover-border-color: var(--stp-accent-strong);
    --bs-btn-active-bg: var(--stp-accent-strong); --bs-btn-active-border-color: var(--stp-accent-strong);
    --bs-btn-disabled-bg: var(--stp-accent); --bs-btn-disabled-border-color: var(--stp-accent);
}
.btn-outline-primary {
    --bs-btn-color: var(--stp-accent); --bs-btn-border-color: var(--stp-border-strong);
    --bs-btn-hover-bg: var(--stp-accent-soft); --bs-btn-hover-border-color: var(--stp-accent);
    --bs-btn-hover-color: var(--stp-accent-strong); --bs-btn-active-bg: var(--stp-accent-soft);
    --bs-btn-active-color: var(--stp-accent-strong); --bs-btn-active-border-color: var(--stp-accent);
}
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--stp-border-strong); --bs-btn-hover-bg: var(--stp-canvas); }
.btn-danger { --bs-btn-bg: var(--stp-danger); --bs-btn-border-color: var(--stp-danger); --bs-btn-hover-bg: #bb3a3a; --bs-btn-hover-border-color: #bb3a3a; }

/* External-service buttons (brand colours of the target service). */
.btn-freshdesk { --bs-btn-bg: #6EB800; --bs-btn-border-color: #6EB800; --bs-btn-color: #fff; --bs-btn-hover-bg: #5a9600; --bs-btn-hover-border-color: #5a9600; --bs-btn-hover-color: #fff; --bs-btn-disabled-bg: #a8d96f; --bs-btn-disabled-border-color: #a8d96f; --bs-btn-disabled-color: #fff; }
.btn-stripe   { --bs-btn-bg: #635BFF; --bs-btn-border-color: #635BFF; --bs-btn-color: #fff; --bs-btn-hover-bg: #4f49d6; --bs-btn-hover-border-color: #4f49d6; --bs-btn-hover-color: #fff; --bs-btn-disabled-bg: #b0adf5; --bs-btn-disabled-border-color: #b0adf5; --bs-btn-disabled-color: #fff; }

/* ---- Forms --------------------------------------------------------------- */
.form-label { font-size: 13px; font-weight: 550; color: var(--stp-ink); margin-bottom: 4px; }
.form-control, .form-select {
    border-color: var(--stp-border-strong); border-radius: var(--stp-r-sm);
    padding: 9px 12px; font-size: 14px; color: var(--stp-ink); background-color: #fff;
}
.form-control::placeholder { color: var(--stp-faint); }
.form-control:focus, .form-select:focus {
    border-color: var(--stp-accent); box-shadow: 0 0 0 3px rgba(79,70,229,.14);
}
.form-check-input:checked { background-color: var(--stp-accent); border-color: var(--stp-accent); }
.form-check-input:focus { border-color: var(--stp-accent); box-shadow: 0 0 0 3px rgba(79,70,229,.14); }

/* ---- Cards --------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--stp-border);
    --bs-card-border-radius: var(--stp-r);
    --bs-card-bg: var(--stp-surface);
    box-shadow: var(--stp-shadow);
}
.card-header {
    background: transparent; border-bottom-color: var(--stp-border);
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--stp-muted); padding: 14px 18px;
}
.card-body { padding: 18px; }

/* ---- Page header + count chip ------------------------------------------- */
.stp-page-title { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; margin: 0; color: var(--stp-ink); }
.stp-chip {
    display: inline-flex; align-items: center; min-width: 24px; height: 22px; padding: 0 8px;
    border-radius: 999px; background: var(--stp-accent-soft); color: var(--stp-accent-strong);
    font: 600 12px/1 var(--stp-mono); margin-left: 8px; vertical-align: 3px;
}

/* ---- Segmented control --------------------------------------------------- */
.stp-seg { display: inline-flex; background: #EEF0F4; border: 1px solid var(--stp-border); border-radius: var(--stp-r-sm); padding: 3px; gap: 2px; }
.stp-seg button {
    border: 0; background: transparent; color: var(--stp-muted); font-size: 13px; font-weight: 550;
    padding: 5px 14px; border-radius: 6px; cursor: pointer; line-height: 1.4;
}
.stp-seg button:hover { color: var(--stp-ink); }
.stp-seg button.active { background: #fff; color: var(--stp-ink); box-shadow: 0 1px 2px rgba(20,28,45,.08); }

/* ---- Search -------------------------------------------------------------- */
.stp-search { position: relative; }
.stp-search .bi { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--stp-faint); pointer-events: none; }
.stp-search input { padding-left: 34px; }

/* ---- Data table ---------------------------------------------------------- */
.stp-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.stp-table thead th {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--stp-muted); padding: 11px 16px; border-bottom: 1px solid var(--stp-border);
    white-space: nowrap; user-select: none; background: var(--stp-surface);
}
.stp-table th.sortable { cursor: pointer; }
.stp-table th.sortable:hover { color: var(--stp-ink); }
.stp-table th .stp-caret { opacity: 0; margin-left: 4px; font-size: 10px; }
.stp-table th.sortable:hover .stp-caret { opacity: .4; }
.stp-table th[aria-sort] .stp-caret { opacity: .9; color: var(--stp-accent); display: inline-block; }
.stp-table th[aria-sort="descending"] .stp-caret { transform: rotate(180deg); }
.stp-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--stp-border); font-size: 14px; vertical-align: middle; }
.stp-table tbody tr:last-child td { border-bottom: 0; }
.stp-table tbody tr.row-link { cursor: pointer; }
.stp-table tbody tr.row-link:hover { background: #FAFBFC; }
.stp-table .col-code { font-family: var(--stp-mono); font-size: 12.5px; color: var(--stp-muted); }
.stp-table-card { background: var(--stp-surface); border: 1px solid var(--stp-border); border-radius: var(--stp-r); box-shadow: var(--stp-shadow); overflow: hidden; }
.stp-table-card .table-responsive { border-radius: inherit; }
/* Pin an actions column to the right so it stays visible when the table scrolls. */
.stp-table th.stp-actions-col, .stp-table td.stp-actions-col {
    position: sticky; right: 0; background: var(--stp-surface); text-align: right; white-space: nowrap;
    box-shadow: -8px 0 8px -8px rgba(20,28,45,.18);
}
.stp-table tbody tr:hover td.stp-actions-col { background: #FAFBFC; }
.stp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; border: 1px solid transparent; color: var(--stp-muted); background: transparent; cursor: pointer; }
.stp-icon-btn:hover { background: var(--stp-canvas); border-color: var(--stp-border); color: var(--stp-ink); }
.stp-icon-btn.is-danger:hover { color: var(--stp-danger); border-color: rgba(214,69,69,.3); background: rgba(214,69,69,.06); }
/* Row avatar (initials) for list rows. */
.stp-avatar { width: 30px; height: 30px; border-radius: 8px; background: var(--stp-accent-soft); color: var(--stp-accent-strong); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex: 0 0 auto; }

/* ---- Status dot + label -------------------------------------------------- */
.stp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.stp-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--stp-faint); }
.stp-status.is-success { color: var(--stp-ink); } .stp-status.is-success::before { background: var(--stp-success); }
.stp-status.is-danger  { color: var(--stp-ink); } .stp-status.is-danger::before  { background: var(--stp-danger); }
.stp-status.is-muted   { color: var(--stp-muted); } .stp-status.is-muted::before  { background: var(--stp-faint); }
.stp-status.is-warning { color: var(--stp-ink); } .stp-status.is-warning::before { background: var(--stp-warning); }

/* ---- Spec sheet (detail key/value) -------------------------------------- */
.stp-spec { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 9px 14px; margin: 0; font-size: 14px; }
.stp-spec dt { color: var(--stp-muted); font-weight: 450; }
.stp-spec dd { margin: 0; color: var(--stp-ink); word-break: break-word; }
.stp-spec .stp-mono, .stp-spec code { font-size: 12.5px; }

/* ---- Slide-over drawer (Bootstrap offcanvas-end, reskinned) -------------- */
.stp-drawer { --bs-offcanvas-width: 460px; background: var(--stp-surface); border-left: 1px solid var(--stp-border); }
.stp-drawer .offcanvas-header { padding: 18px 22px; border-bottom: 1px solid var(--stp-border); }
.stp-drawer .offcanvas-title { font-size: 16px; font-weight: 600; }
.stp-drawer .offcanvas-body { padding: 20px 22px; }
.stp-drawer > form { display: flex; flex-direction: column; height: 100%; }
.stp-drawer .offcanvas-body { flex: 1 1 auto; overflow-y: auto; }
.stp-drawer-foot { padding: 16px 22px; border-top: 1px solid var(--stp-border); display: flex; justify-content: flex-end; gap: 8px; background: var(--stp-surface); }

/* ---- Badges -------------------------------------------------------------- */
.badge { font-weight: 550; letter-spacing: .01em; border-radius: var(--stp-r-chip); padding: 5px 8px; }
.text-bg-success { background: rgba(31,157,99,.12) !important; color: #157048 !important; }
.text-bg-danger  { background: rgba(214,69,69,.12) !important; color: #a3322f !important; }
.text-bg-secondary { background: #EEF0F4 !important; color: var(--stp-muted) !important; }

/* ---- Stat cards ---------------------------------------------------------- */
.stp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stp-stat { background: var(--stp-surface); border: 1px solid var(--stp-border); border-radius: var(--stp-r); padding: 15px 16px; box-shadow: var(--stp-shadow); display: flex; align-items: center; gap: 13px; }
.stp-stat-icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; background: var(--stp-accent-soft); color: var(--stp-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.stp-stat-num { font: 650 24px/1.1 var(--stp-mono); font-variant-numeric: tabular-nums; color: var(--stp-ink); min-height: 1.1em; }
.stp-stat-label { font-size: 12.5px; color: var(--stp-muted); margin-top: 4px; }

/* ---- Card subtitle + small spinner --------------------------------------- */
.stp-card-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--stp-faint); }
.stp-spinner-sm { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--stp-border); border-top-color: var(--stp-accent); border-radius: 50%; animation: stp-spin .7s linear infinite; vertical-align: -2px; }

/* ---- Empty state --------------------------------------------------------- */
.stp-empty { text-align: center; padding: 44px 20px; color: var(--stp-muted); }
.stp-empty .bi { font-size: 26px; color: var(--stp-faint); display: block; margin-bottom: 8px; }

/* ---- Drop zone ----------------------------------------------------------- */
.stp-dropzone { border: 2px dashed var(--stp-border-strong); border-radius: var(--stp-r); padding: 30px 20px; text-align: center; color: var(--stp-muted); cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.stp-dropzone:hover, .stp-dropzone.dragover { border-color: var(--stp-accent); background: var(--stp-accent-soft); color: var(--stp-ink); }
.stp-dropzone .bi { font-size: 28px; color: var(--stp-faint); display: block; margin-bottom: 8px; }
.stp-dropzone.dragover .bi { color: var(--stp-accent); }

/* ---- Loading ------------------------------------------------------------- */
.stp-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; color: var(--stp-muted); font-size: 13.5px; }
.stp-spinner { width: 26px; height: 26px; border: 3px solid var(--stp-border); border-top-color: var(--stp-accent); border-radius: 50%; animation: stp-spin .7s linear infinite; }
@keyframes stp-spin { to { transform: rotate(360deg); } }

/* ---- Masked secrets ------------------------------------------------------ */
.stp-secret { display: inline-flex; align-items: center; gap: 2px; }
.stp-secret-value { display: none; word-break: break-all; font-family: var(--stp-mono); font-size: 12px; }
.stp-secret.revealed .stp-secret-value { display: inline; }
.stp-secret.revealed .stp-secret-mask { display: none; }

/* ============================================================================
   App shell
   ============================================================================ */
.stp-body { background: var(--stp-canvas); }

.stp-topbar { background: var(--stp-surface); border-bottom: 1px solid var(--stp-border); padding: .4rem .6rem; }
.stp-topbar-brand { font-weight: 650; }
.stp-burger { font-size: 1.4rem; color: var(--stp-ink); text-decoration: none; }

/* Light sidebar — Vercel/Next.js style: white surface, hairline border, muted nav,
   accent-tinted active item. */
.stp-sidebar { --bs-offcanvas-width: var(--stp-sidebar-w); width: var(--stp-sidebar-w); border: 0; }
.stp-sidebar-inner { background: var(--stp-surface); color: var(--stp-ink); height: 100%; min-height: 100%; display: flex; flex-direction: column; border-right: 1px solid var(--stp-border); }
.stp-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; border-bottom: 1px solid var(--stp-border); }
.stp-sidebar-scroll { display: flex; flex-direction: column; flex: 1; overflow-y: auto; padding: 12px 0; }

.stp-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.stp-nav a {
    color: var(--stp-muted); text-decoration: none; padding: 8px 12px; font-size: 14px; font-weight: 500;
    display: flex; align-items: center; gap: 11px; border-radius: 8px;
}
.stp-nav a:hover { background: var(--stp-canvas); color: var(--stp-ink); }
.stp-nav a.active { background: var(--stp-accent-soft); color: var(--stp-accent-strong); font-weight: 600; }
.stp-nav a.active i { color: var(--stp-accent); }
.stp-nav a i { font-size: 1.05rem; width: 1.1rem; text-align: center; color: var(--stp-faint); }

.stp-sidebar-foot { margin-top: auto; padding: 12px 24px; border-top: 1px solid var(--stp-border); }
.stp-sidebar-foot a, .stp-sidebar-foot button { color: var(--stp-muted); text-decoration: none; font-size: 14px; font-weight: 500; background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 8px; }
.stp-sidebar-foot a:hover, .stp-sidebar-foot button:hover { color: var(--stp-danger); }

@media (min-width: 992px) {
    .stp-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; }
    .stp-main { margin-left: var(--stp-sidebar-w); }
}
.stp-main { min-width: 0; }

/* Collapse toggle (desktop only) */
.stp-collapse-btn { align-items: center; gap: 11px; width: 100%; border: 0; border-top: 1px solid var(--stp-border); background: transparent; color: var(--stp-muted); font-size: 13px; font-weight: 500; padding: 11px 24px; cursor: pointer; }
.stp-collapse-btn:hover { background: var(--stp-canvas); color: var(--stp-ink); }
.stp-collapse-btn i { transition: transform .15s ease; }

@media (min-width: 992px) {
    html.stp-collapsed { --stp-sidebar-w: 68px; }
    html.stp-collapsed .stp-nav a span,
    html.stp-collapsed .stp-sidebar-foot span,
    html.stp-collapsed .stp-collapse-btn span,
    html.stp-collapsed .stp-brand-tag { display: none; }
    html.stp-collapsed .stp-nav a,
    html.stp-collapsed .stp-sidebar-head,
    html.stp-collapsed .stp-collapse-btn { justify-content: center; padding-left: 0; padding-right: 0; }
    html.stp-collapsed .stp-sidebar-foot { padding-left: 0; padding-right: 0; }
    html.stp-collapsed .stp-sidebar-foot form { justify-content: center; }
    html.stp-collapsed .stp-collapse-btn i { transform: rotate(180deg); }
}
.stp-content { padding: 28px 32px; max-width: 1200px; }

.stp-brand { line-height: 1.2; }
.stp-brand-name { font-weight: 700; color: inherit; }
.stp-brand-tag { display: block; font-size: 12px; font-weight: 500; opacity: .6; margin-top: 2px; }

/* ---- Auth ---------------------------------------------------------------- */
.stp-auth-body { min-height: 100vh; display: flex; background: var(--stp-canvas); }
.stp-auth-shell { margin: auto; width: 100%; max-width: 400px; padding: 28px 18px; }
.stp-auth-card { background: var(--stp-surface); border: 1px solid var(--stp-border); border-radius: 14px; padding: 32px 30px; box-shadow: var(--stp-shadow); }
.stp-auth-brand { margin-bottom: 22px; }
.stp-auth-brand .stp-brand-name { color: var(--stp-accent); font-size: 18px; }
.stp-auth-brand .stp-brand-tag { color: var(--stp-faint); }

/* ---- Quality floor ------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--stp-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }