/* ==========================================================================
   26 Branding Agency - Admin NEW DESIGN theme
   Identity source: the 26 Telecom admin portal
   (telecom.26.systems/api/admin/style.css: Manrope, paper, ink, brand red,
   dark 264px sidebar, flat white panels, hairline lines), as already applied
   to the social dashboard's /smdashboard/newdesign/ space.
   Loaded ONLY inside the /newdesign/ space. The original design never loads
   this file and is never affected by it.
   ========================================================================== */

:root {
    --nd-paper: #f6f5f1;
    --nd-paper-2: #efece5;
    --nd-surface: #ffffff;
    --nd-ink: #0b0f1e;
    --nd-ink-slate: #1a2237;
    --nd-ink-2: #5e6473;   /* muted body text, as the portal's --muted */
    --nd-ink-3: #9aa2b5;
    --nd-muted: #5e6473;
    --nd-line: #e5e1d6;
    --nd-line-2: #d8d3c6;
    --nd-accent: #dc1f1f;
    --nd-accent-2: #b81818;
    --nd-accent-soft: #fce4e4;
    --nd-ok: #1f8a3d;
    --nd-warn: #d18c00;
    --nd-bad: #c11b1b;
    --nd-r: 18px;
    --nd-r-sm: 14px;
    --nd-r-xs: 10px;
    --nd-side-w: 264px;
    --nd-shadow: 0 1px 2px rgba(11,15,30,0.04), 0 8px 28px -12px rgba(11,15,30,0.10);
}

/* --- Base identity ----------------------------------------------------- */
html, body {
    background: var(--nd-paper) !important;
}
body, body * {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: -0.01em;
}
body i.fa-solid, body i.fa-regular, body i.fas, body i.far, body .fa {
    font-family: 'Font Awesome 6 Free' !important;
    letter-spacing: 0;
}
body i.fa-brands, body i.fab {
    font-family: 'Font Awesome 6 Brands' !important;
    letter-spacing: 0;
}
body {
    color: var(--nd-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: var(--nd-side-w) !important;
    padding-top: 0 !important;
}
h1, h2, h3, h4 {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--nd-ink);
}
::selection { background: var(--nd-accent-soft); }

/* --- Hide the marketing-site chrome inside the new space --------------- */
#header { display: none !important; }
body > footer, footer { display: none !important; }
.mobile-nav-panel, .hamburger { display: none !important; }
.visitor-toast, #visitor-toast, .visitor-notification,
.visitor-toast-final { display: none !important; }
/* Breadcrumbs are retired in this space: the sidebar marks where you are,
   and their links point back into the old design. */
.breadcrumbs { display: none !important; }

/* --- The dark sidebar (injected by the router), portal-exact ----------- */
.nd-side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--nd-side-w);
    z-index: 2000;
    background: var(--nd-ink);
    color: #e8e9ee;
    padding: 24px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    border-right: 1px solid var(--nd-ink-slate);
}
.nd-side::-webkit-scrollbar { width: 6px; }
.nd-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.nd-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-wrap: wrap;
}
.nd-mark-img {
    width: 36px; height: 36px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.nd-brand-name { font-weight: 700 !important; font-size: 15px; color: #fff; }
.nd-brand-name .nd-dim { color: #8d92a3; font-weight: 500 !important; }
.nd-tag {
    font-size: 9px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #bcc0cf;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 3px 8px;
}
.nd-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nd-item {
    padding: 9px 12px;
    border-radius: var(--nd-r-sm);
    font-weight: 500 !important;
    font-size: 13.5px;
    color: #bcc0cf !important;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.nd-item::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #3a4156;
    flex-shrink: 0;
    transition: background .15s;
}
.nd-item:hover { background: rgba(255,255,255,0.04); color: #fff !important; }
.nd-item.nd-on { background: rgba(220,31,31,0.12); color: #fff !important; }
.nd-item.nd-on::before { background: var(--nd-accent); }
.nd-group { border: none; }
.nd-group summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 12px 6px;
    font-size: 11px;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #8d92a3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.nd-group summary::-webkit-details-marker { display: none; }
.nd-group summary::after {
    content: "\203A";
    font-size: 14px;
    color: #5e6373;
    transition: transform .15s;
}
.nd-group[open] summary::after { transform: rotate(90deg); }
.nd-group summary:hover { color: #cbd1de; }
.nd-group .nd-item { margin-left: 6px; }
.nd-foot {
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nd-foot-link {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: #cbd1de !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500 !important;
}
.nd-foot-link:hover { background: rgba(255,255,255,0.10); color: #fff !important; }
.nd-foot-link.nd-out:hover { background: rgba(220,31,31,0.18); }
/* (All small-screen handling lives in the responsive block at the end of
   this file: the sidebar becomes a drawer behind a fixed topbar.) */

/* --- Page heros become the portal topbar: left-aligned, hairline ------- */
.header-section {
    background: transparent !important;
    padding: 34px 40px 16px !important;
    margin: 0 !important;
    text-align: left !important;
    border-bottom: 1px solid var(--nd-line);
    min-height: 0 !important;
}
.header-section-content, .header-container {
    margin: 0 !important;
    max-width: none !important;
    text-align: left !important;
    padding: 0 !important;
}
.header-section .text-center { text-align: left !important; }
.header-section h1 {
    font-size: 28px !important;
    margin: 0 !important;
    color: var(--nd-ink) !important;
}
.header-section p {
    font-size: 14px !important;
    color: var(--nd-muted) !important;
    margin: 6px 0 0 !important;
}
/* Hero buttons (Admin Logout on the hub) become quiet outline pills. */
.header-section .btn {
    margin-top: 12px !important;
    background: transparent !important;
    color: var(--nd-ink) !important;
    border: 1px solid var(--nd-line-2) !important;
}
.header-section .btn:hover { background: var(--nd-paper-2) !important; }

/* --- Panels: the portal's flat white surfaces -------------------------- */
.dashboard-card, .card, .stat-card, .client-card, .summary-stat,
.modal-content {
    background: var(--nd-surface) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r) !important;
    box-shadow: var(--nd-shadow) !important;
    color: var(--nd-ink);
}

/* The hub grid: compact portal tiles, not tall marketing cards */
.dashboard-grid {
    gap: 14px !important;
}
.dashboard-card {
    padding: 18px 20px !important;
    min-height: 0 !important;
    text-align: left !important;
    transform: none !important;
}
.dashboard-card:hover {
    background: var(--nd-surface) !important;
    border-color: var(--nd-line-2) !important;
    transform: none !important;
    box-shadow: var(--nd-shadow) !important;
}
.dashboard-card h1, .dashboard-card h2, .dashboard-card h3, .dashboard-card h4,
.dashboard-card .card-title {
    color: var(--nd-ink) !important;
    margin: 8px 0 4px !important;
}
.dashboard-card p, .dashboard-card span, .dashboard-card small {
    color: var(--nd-muted) !important;
    line-height: 1.5 !important;
}
.dashboard-card i {
    color: var(--nd-accent) !important;
    font-size: 17px !important;
    margin-bottom: 0 !important;
}
/* Hub card action buttons (26 Business Center tile): the page styles them
   white-on-red with !important, so ID weight is needed to win the tie. */
:is(#nd, .dashboard-card) .card-actions .btn {
    background: var(--nd-ink) !important;
    border: 1px solid var(--nd-ink) !important;
    color: #fff !important;
}
:is(#nd, .dashboard-card) .card-actions .btn-outline {
    background: transparent !important;
    border: 1px solid var(--nd-line-2) !important;
    color: var(--nd-ink) !important;
}
:is(#nd, .dashboard-card) .card-actions .btn-outline:hover {
    background: var(--nd-paper-2) !important;
    border-color: var(--nd-line-2) !important;
    color: var(--nd-ink) !important;
}

/* --- Buttons: portal pills --------------------------------------------- */
.btn, button.btn, a.btn, input[type="submit"], button[type="submit"] {
    border-radius: 999px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    transition: transform .1s, background .15s, box-shadow .15s;
}
.btn:hover, input[type="submit"]:hover, button[type="submit"]:hover {
    transform: translateY(-1px);
}
.btn-primary, .btn-success {
    background: var(--nd-ink) !important;
    border-color: var(--nd-ink) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-success:hover {
    background: var(--nd-ink-slate) !important;
    border-color: var(--nd-ink-slate) !important;
}
.btn-danger {
    background: var(--nd-bad) !important;
    border-color: var(--nd-bad) !important;
    color: #fff !important;
}
.btn-danger:hover { background: #9a1414 !important; }
.btn-warning {
    background: var(--nd-warn) !important;
    border-color: var(--nd-warn) !important;
    color: #fff !important;
}
.btn-outline, .btn-outline-dark, .btn-outline-secondary, .btn-outline-primary,
.btn-outline-success, .btn-outline-info, .btn-outline-danger, .btn-light {
    background: transparent !important;
    color: var(--nd-ink) !important;
    border: 1px solid var(--nd-line-2) !important;
}
.btn-outline:hover, .btn-outline-dark:hover, .btn-outline-secondary:hover,
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-info:hover,
.btn-outline-danger:hover, .btn-light:hover {
    background: var(--nd-paper-2) !important;
    color: var(--nd-ink) !important;
}

/* --- Forms: portal inputs ---------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="url"], input[type="tel"], select, textarea, .form-control, .form-select {
    border: 1px solid var(--nd-line-2) !important;
    border-radius: var(--nd-r-sm) !important;
    background: var(--nd-surface) !important;
    color: var(--nd-ink) !important;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus {
    outline: none !important;
    border-color: var(--nd-ink) !important;
    box-shadow: 0 0 0 3px rgba(11,15,30,0.08) !important;
}

/* --- Tables: portal tables --------------------------------------------- */
table { border-spacing: 0 !important; }
table.table, .table {
    background: var(--nd-surface);
    border-radius: var(--nd-r-sm);
    overflow: hidden;
    border: 1px solid var(--nd-line);
}
.table th, table.table th {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--nd-muted) !important;
    background: var(--nd-paper-2) !important;
}
.table td, table.table td { border-color: var(--nd-line) !important; }
.table tbody tr:hover td { background: var(--nd-paper-2); }
.table-responsive { border: none !important; }

/* --- Alerts ------------------------------------------------------------- */
.alert {
    border-radius: var(--nd-r-sm) !important;
    border: 1px solid var(--nd-line) !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
}
.alert-success {
    background: #e9f5ec !important;
    border-color: #cbe6d2 !important;
    color: #14532d !important;
}
.alert-danger, .alert-error {
    background: #fdeaea !important;
    border-color: #f3cdcd !important;
    color: #7a1414 !important;
}
.alert-warning {
    background: #fdf3e0 !important;
    border-color: #f0dcb4 !important;
    color: #7c5200 !important;
}

/* --- Modals ------------------------------------------------------------- */
.modal-overlay {
    background: rgba(11, 15, 30, 0.45) !important;
    z-index: 5000 !important;
}
.modal-content {
    border-radius: var(--nd-r) !important;
    padding: 24px !important;
}
.modal-buttons { gap: 10px; }

/* --- Misc --------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--nd-line-2); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   Consistency: uniform gutters, one radius, calmer buttons, one type scale.
   Same numbers as the social dashboard overlay (40px sides, 64px below the
   header hairline, 60px bottom).
   ========================================================================== */

/* One content inset everywhere. Every page-level wrapper carries the same
   inset; the nested-wrapper rule right after this one stops double insets. */
.container, .container-fluid, .container-full-width, .main-content-section {
    max-width: 100% !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 64px 40px 60px !important;
}
/* A page wrapper nested inside another page wrapper gives its inset up:
   the outer one already carries it. Placed after the rule above so it
   wins the tie at equal specificity. */
:where(.container, .container-fluid, .container-full-width, .main-content-section)
:is(.container, .container-fluid, .container-full-width) {
    padding: 0 !important;
    margin: 0 !important;
}
/* Containers that live inside the page header keep the header's own gutter. */
.header-section > div, .header-section > div > div,
.header-section .container, .header-section .container-full-width,
.header-section .header-container, .header-section .header-section-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* One corner radius for every panel-level surface. */
.dashboard-card, .card, .stat-card, .client-card, .summary-stat, .modal-content {
    border-radius: var(--nd-r) !important;
}

/* Calmer buttons: nothing oversized. Small icon/circle/close buttons are
   exempt: forcing padding on a small circle deforms it. */
.btn, a.btn, button.btn, input[type="submit"],
button[type="submit"]:not([class*="circle"]):not([class*="icon"]):not([class*="close"]) {
    font-size: 13.5px !important;
    padding: 9px 16px !important;
    line-height: 1.35 !important;
}
.btn-sm, .btn.sm {
    font-size: 12px !important;
    padding: 6px 12px !important;
}

/* :is(#nd, ...) carries ID weight, so a page-level "!important" heading
   rule cannot outrank the one scale. #nd exists nowhere; it is only a
   specificity donor. */
:is(#nd, h1) { font-size: 28px !important; }
:is(#nd, h2) { font-size: 20px !important; }
:is(#nd, h3) { font-size: 16px !important; }
:is(#nd, h4) { font-size: 14px !important; }
p, li, td, dd, dt { font-size: 14px !important; }
th { font-size: 12px !important; }
label, .form-label { font-size: 12px !important; }
input, select, textarea, .form-control, .form-select { font-size: 14px !important; }
small, .small { font-size: 12px !important; }

/* A form used as the page shell never floats below the header: the
   marketing CSS gives forms a stray offset. */
body > form { margin: 0 !important; padding: 0 !important; }

/* ==========================================================================
   Responsive: below 900px the dark sidebar becomes a drawer behind a fixed
   topbar, every page keeps ONE mobile inset (24px top, 16px sides, 48px
   bottom), grids stack, and wide tables scroll inside their panel instead
   of stretching the page. Internal order of this block is load-bearing.
   ========================================================================== */

/* The mobile chrome (topbar + scrim, injected by the router) exists only
   below the drawer breakpoint. */
.nd-mtop, .nd-scrim { display: none; }

@media (max-width: 900px) {
    /* --- Drawer + topbar ------------------------------------------------ */
    body {
        margin-left: 0 !important;
        padding-top: 56px !important;
        overflow-x: hidden;
    }
    .nd-mtop {
        display: flex;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 56px;
        z-index: 3800;
        background: var(--nd-ink);
        border-bottom: 1px solid var(--nd-ink-slate);
        align-items: center;
        gap: 10px;
        padding: 0 12px;
    }
    .nd-burger {
        width: 42px; height: 42px;
        border: 0; background: transparent;
        display: flex; flex-direction: column;
        justify-content: center; align-items: center; gap: 5px;
        cursor: pointer; padding: 0;
    }
    .nd-burger span {
        display: block; width: 22px; height: 2px;
        background: #fff; border-radius: 2px;
    }
    .nd-mtop-mark { width: 28px; height: 28px; object-fit: contain; }
    .nd-mtop-name { font-weight: 700 !important; font-size: 15px; color: #fff; }
    .nd-mtop-name .nd-dim { color: #8d92a3; font-weight: 500 !important; }
    .nd-scrim {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(11, 15, 30, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
        z-index: 3900;
    }
    body.nd-open .nd-scrim { opacity: 1; pointer-events: auto; }
    .nd-side {
        z-index: 4000;
        width: 288px;
        transform: translateX(-100%);
        transition: transform .22s ease;
    }
    body.nd-open .nd-side {
        transform: translateX(0);
        box-shadow: 0 0 48px rgba(11, 15, 30, 0.45);
    }
    body.nd-open { overflow: hidden; }

    /* --- One mobile inset, the same on every page ----------------------- */
    .container, .container-fluid, .container-full-width, .main-content-section {
        padding: 24px 16px 48px !important;
    }
    /* Nested page wrappers still give their inset up (restated so it stays
       AFTER the mobile inset rule in order; order settles the tie). */
    :where(.container, .container-fluid, .container-full-width, .main-content-section)
    :is(.container, .container-fluid, .container-full-width) {
        padding: 0 !important;
        margin: 0 !important;
    }
    .header-section { padding: 20px 16px 14px !important; }
    :is(#nd, h1), .header-section h1 { font-size: 22px !important; }
    :is(#nd, h2) { font-size: 18px !important; }

    /* --- Grids stack ----------------------------------------------------- */
    /* minmax(0,1fr), not 1fr: a plain 1fr keeps its min-content floor, so
       one wide unbreakable child (a stats number, a long word) silently
       pushes the whole column past the viewport. */
    .dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* Grids defined in inline styles collapse to one column on a phone. */
    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    /* --- Nothing wider than the screen ---------------------------------- */
    img, video, canvas, iframe { max-width: 100%; }
    /* Every table scrolls inside its own box instead of stretching the
       page (element-level, so bare classless tables are covered too). */
    table, .table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .pagination { flex-wrap: wrap !important; }
    .modal-content {
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
    }
    .filter-bar, .action-bar, .btn-row, .card-actions, .modal-buttons {
        flex-wrap: wrap !important;
    }

    /* iOS zooms into any focused field under 16px: keep fields at 16px. */
    input, select, textarea, .form-control, .form-select { font-size: 16px !important; }

    /* An unbreakable run (a long URL, a token) must wrap rather than
       stretch the page sideways. Tables are exempt: they scroll in their
       own box, and anywhere-wrapping shreds their headers into one letter
       per line. */
    body { overflow-wrap: anywhere; word-break: break-word; }
    table, table th, table td { overflow-wrap: normal; word-break: normal; }
    table th { white-space: nowrap; }
}