/* Self-hosted variable font - previously the whole stylesheet referenced
   "Inter" by name without ever loading it anywhere (no <link>, no
   @font-face), so every browser silently fell back to its default system
   UI font the entire time. That's a big part of why the panel read as
   generic/templated - most of the deliberate weight steps below (560, 650,
   750, 760, 780, 850, 950 etc., not just 400/700) only exist on Inter's
   variable weight axis and were collapsing to 1-2 flat weights in the
   fallback font. Latin Extended subset covers Turkish characters
   (ş ğ ı İ ç ö ü). Self-hosted rather than a Google Fonts <link> so the
   panel has no external network dependency for its own type. */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-variable.woff2") format("woff2-variations"), url("../fonts/inter-variable.woff2") format("woff2");
}

:root {
    --ink: #172033;
    --muted: #6d7788;
    --quiet: #9aa5b5;
    --page: #f4f6f9;
    --card: #ffffff;
    --card-soft: #f8fafc;
    --line: #dde4ee;
    --line-soft: #edf1f6;
    --nav: #111827;
    --nav-2: #172033;
    --blue: #1677e8;
    --blue-deep: #0f59bb;
    --cyan: #19a7ce;
    --green: #18a663;
    --green-deep: #0f7a4a;
    --orange: #f59b18;
    --rose: #e74863;
    --violet: #6b6eea;
    --shadow: 0 10px 24px rgba(22, 32, 51, .07);
    --shadow-soft: 0 6px 16px rgba(22, 32, 51, .05);
    /* Fixed brand-blue pair for the customer top navbar's main row - same
       "constant regardless of site theme" technique as --nav/--nav-2 below,
       just sourced from this app's own --blue/--blue-deep instead of navy,
       so the bar reads as a branded blue like the reference sites instead
       of the admin sidebar's dark slate. Defined identically here and in
       body.theme-dark so it never shifts (and never washes out pale, which
       --blue itself does in dark mode - see body.theme-dark below). */
    --topbar: #0f59bb;
    --topbar-2: #1677e8;
}

/* Admin service list polish and stable sidebar behavior */
@media (min-width: 921px) {
    .app-frame.is-admin-shell {
        padding-left: 246px;
    }

    .side-rail {
        position: fixed;
        inset: 0 auto 0 0;
        height: 100vh;
        overflow: visible;
    }

    .side-nav {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: visible;
    }
}

.side-rail .wallet-row,
.side-rail .wallet-panel,
.side-rail .wallet-card,
.side-rail .rail-wallet,
.side-rail .wallet-balance,
.side-rail .balance-card,
.side-rail [data-wallet-card] {
    display: none !important;
}

.is-admin-shell .side-nav > * {
    order: 20;
}

.is-admin-shell .side-nav > a:first-of-type {
    order: 1;
}

.is-admin-shell .admin-services-stack {
    order: 2 !important;
}

.is-admin-shell .admin-orders-stack {
    order: 3 !important;
}

.is-admin-shell .admin-groups-stack {
    order: 4 !important;
}

.is-admin-shell .admin-nav-divider {
    order: 5 !important;
}

.nav-stack > .nav-flyout,
.nav-stack:hover > .nav-flyout,
.nav-stack:focus-within > .nav-flyout {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.nav-stack.flyout-open > .nav-flyout,
.nav-stack.flyout-open:hover > .nav-flyout,
.nav-stack.flyout-open:focus-within > .nav-flyout {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

.nav-stack:hover > .nav-parent,
.nav-stack:focus-within > .nav-parent,
.is-admin-shell .admin-nav-stack:hover > .nav-parent,
.is-admin-shell .admin-nav-stack:focus-within > .nav-parent {
    background: transparent;
}

.nav-stack.flyout-open > .nav-parent,
.nav-stack.active > .nav-parent,
.is-admin-shell .admin-nav-stack.flyout-open > .nav-parent,
.is-admin-shell .admin-nav-stack.active > .nav-parent {
    background: rgba(31, 122, 224, .12);
}

.is-admin-shell .admin-submenu {
    max-height: calc(100vh - 28px);
    overflow-y: auto;
}

.service-admin-workbench {
    display: grid;
    gap: 16px;
}

.service-sync-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.service-sync-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 4px 16px;
    border-bottom: 1px solid var(--line);
}

.service-command-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.service-command {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid #d8e3f0;
    border-radius: 10px;
    background: #f8fbff;
    color: #0756b6;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .05);
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.service-command:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(15, 23, 42, .10);
}

.service-command.primary {
    background: #101820;
    color: #fff;
    border-color: #101820;
}

.service-command.subtle {
    background: #f7fbff;
}

.service-command.search {
    background: #1f7ae0;
    color: #fff;
    border-color: #1f7ae0;
}

.service-command.clear {
    background: #fff;
    color: #637083;
}

.service-command-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #19a663;
    box-shadow: 0 0 0 5px rgba(25, 166, 99, .14);
}

.service-type-segments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid #d7e4f4;
    border-radius: 12px;
    background: #edf5ff;
}

.service-type-segment {
    min-width: 126px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    border-radius: 10px;
    color: #68778c;
    text-decoration: none;
    font-weight: 900;
}

.service-type-segment.active {
    background: #1f7ae0;
    color: #fff;
    box-shadow: 0 10px 24px rgba(31, 122, 224, .28);
}

.service-filter-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) auto minmax(300px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding-top: 14px;
}

.service-group-select select,
.service-global-search input,
.move-group-panel select {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border: 1px solid #d8e3f0;
    border-radius: 10px;
    background: #fff;
    color: #1f2937;
    font-weight: 600;
}

.service-global-search input {
    font-weight: 500;
}

.create-local-group-line {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #d8e3f0;
    border-radius: 10px;
    background: #f8fbff;
    color: #627084;
    font-weight: 800;
}

.service-selection-bar[hidden] {
    display: none !important;
}

.service-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #101820;
    color: #fff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
}

.selected-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bulk-icon-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    padding: 0 13px;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    font-weight: 800;
    cursor: pointer;
}

.bulk-icon-btn.add {
    background: #1f7ae0;
    border-color: #1f7ae0;
}

.bulk-icon-btn.success {
    background: #17a66a;
    border-color: #17a66a;
}

.bulk-icon-btn.warning {
    background: #f59e0b;
    border-color: #f59e0b;
}

.bulk-icon-btn.danger {
    background: #ef4444;
    border-color: #ef4444;
}

.service-catalog-table-pro {
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: var(--card);
    overflow: auto;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .07);
}

.service-catalog-table-pro table {
    width: 100%;
    min-width: 1160px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.service-catalog-table-pro th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f6f9fd;
    color: #182234;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 14px 16px;
    border-bottom: 1px solid #e6edf5;
}

.service-catalog-table-pro td {
    padding: 13px 16px;
    border-bottom: 1px solid #e8eef5;
    color: #182234;
    font-weight: 700;
    vertical-align: middle;
}

.service-catalog-table-pro tr:last-child td {
    border-bottom: 0;
}

.service-catalog-table-pro .select-col {
    width: 56px;
    text-align: center;
}

.service-group-row td {
    background: linear-gradient(90deg, #edf5ff 0%, #f8fbff 100%);
}

.service-group-title {
    display: grid;
    gap: 4px;
}

.service-group-title strong {
    font-size: 15px;
}

.service-group-title span {
    color: #66758a;
    font-size: 12px;
    font-weight: 900;
}

.add-group-pill,
.add-status-pill,
.row-action-btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    padding: 0 12px;
    background: #ffe8ef;
    color: #ef466f;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.add-status-pill.mapped {
    background: #e8f7ef;
    color: #18a667;
}

.row-action-btn {
    background: #edf5ff;
    color: #0b63c7;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mini-action {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    padding: 0 12px;
    font-weight: 800;
    font-size: 12.5px;
    color: #fff;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.mini-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(15, 23, 42, .18);
    opacity: .92;
}

.mini-action.success {
    background: var(--green);
}

.mini-action.danger {
    background: var(--rose);
}

.service-type-badge {
    min-width: 66px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eaf2ff;
    color: #1468ca;
    font-size: 12px;
    font-weight: 900;
}

.service-type-badge.server {
    background: #f1edff;
    color: #6358e8;
}

.service-type-badge.remote {
    background: #e8fbff;
    color: #0798b7;
}

.service-type-badge.file {
    background: #fff3e0;
    color: #b26a00;
}

.service-service-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.service-service-cell strong {
    display: block;
    max-width: 680px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-service-cell small {
    display: block;
    margin-top: 2px;
    color: #728096;
    font-size: 11px;
    font-weight: 700;
}

.service-thumb-mini,
.service-thumb-fallback {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: cover;
    flex: 0 0 34px;
}

.service-thumb-fallback {
    display: grid;
    place-items: center;
    background: #1f7ae0;
    color: #fff;
    font-weight: 900;
}

.tiny-check {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1.6px solid #91a0b2;
    border-radius: 5px;
    background: #fff;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    cursor: pointer;
}

.tiny-check::after {
    content: "";
    width: 11px;
    height: 7px;
    border: solid #fff;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform .12s ease;
}

.tiny-check:checked {
    background: #1f7ae0;
    border-color: #1f7ae0;
}

.tiny-check:checked::after {
    transform: rotate(-45deg) scale(1);
}

.tiny-check:indeterminate {
    background: #101820;
    border-color: #101820;
}

.tiny-check:indeterminate::after {
    width: 10px;
    height: 2px;
    border: 0;
    background: #fff;
    transform: none;
}

.service-bulk-dialog-backdrop[hidden] {
    display: none !important;
}

.service-bulk-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, .56);
}

.service-bulk-dialog {
    position: relative;
    width: min(620px, calc(100vw - 32px));
    padding: 24px;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.dialog-close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    border: 0;
    background: transparent;
    color: #718096;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
}

.service-bulk-dialog h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.service-bulk-dialog p {
    margin: 0 0 16px;
    color: #66758a;
    font-weight: 700;
}

.selected-service-preview {
    display: grid;
    gap: 8px;
    max-height: 190px;
    overflow: auto;
    margin-bottom: 16px;
}

.selected-service-preview span {
    padding: 10px 12px;
    border-radius: 9px;
    background: #f6f9fd;
    color: #1f2937;
    font-weight: 700;
}

.move-group-panel {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    color: #182234;
    font-weight: 800;
}

/* Same bug class as .service-bulk-dialog-backdrop[hidden] just below: this
   panel's own plain-class `display: grid` rule outranks the browser's
   default `[hidden] { display: none }`, so without this override the "Move
   to local service group" field stayed visible inside the Add/Activate/
   Inactivate/Delete confirm dialogs too, not just its real Move Group one -
   looking like a broken, half-wired confirm dialog on every bulk action. */
.move-group-panel[hidden] {
    display: none;
}

.service-bulk-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.theme-dark .service-sync-card,
.theme-dark .service-catalog-table-pro,
.theme-dark .service-bulk-dialog {
    background: #111827;
    border-color: #253244;
}

.theme-dark .service-sync-toolbar,
.theme-dark .service-catalog-table-pro td,
.theme-dark .service-catalog-table-pro th {
    border-color: #253244;
}

.theme-dark .service-command,
.theme-dark .service-group-select select,
.theme-dark .service-global-search input,
.theme-dark .move-group-panel select,
.theme-dark .create-local-group-line {
    background: #0f1724;
    border-color: #2b3a4e;
    color: #d8e5f7;
}

.theme-dark .service-command.primary,
.theme-dark .service-selection-bar {
    background: #020617;
}

.theme-dark .service-type-segments,
.theme-dark .service-catalog-table-pro th,
.theme-dark .service-group-row td,
.theme-dark .selected-service-preview span {
    background: #172234;
}

.theme-dark .service-catalog-table-pro td,
.theme-dark .service-catalog-table-pro th,
.theme-dark .service-bulk-dialog h3,
.theme-dark .move-group-panel,
.theme-dark .service-service-cell {
    color: #e5edf8;
}

.theme-dark .service-group-title span,
.theme-dark .service-service-cell small,
.theme-dark .service-bulk-dialog p {
    color: #9aa9bd;
}

.theme-dark .tiny-check {
    background: #0f1724;
    border-color: #53647a;
}

@media (max-width: 1180px) {
    .service-sync-toolbar,
    .service-filter-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .service-sync-toolbar {
        display: grid;
    }

    .service-type-segments,
    .service-command,
    .service-filter-grid .service-command {
        width: 100%;
    }
}

body.theme-dark {
    --ink: #e8eef7;
    --muted: #a4afbf;
    --quiet: #778396;
    --page: #11151d;
    --card: #171d27;
    --card-soft: #1d2531;
    --line: #2a3544;
    --line-soft: #232d3b;
    --nav: #0b1018;
    --nav-2: #111827;
    --blue: #4da0ff;
    --blue-deep: #7ab6ff;
    --cyan: #39c2e2;
    --green: #36c781;
    --orange: #ffb343;
    --rose: #ff6680;
    --violet: #8d91ff;
    --shadow: 0 14px 32px rgba(0, 0, 0, .28);
    --shadow-soft: 0 8px 18px rgba(0, 0, 0, .2);
    --topbar: #0f59bb;
    --topbar-2: #1677e8;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 0;
}

body {
    margin: 0;
    min-width: 0;
    background: var(--page);
    color: var(--ink);
    font-family: "Inter Variable", Inter, "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

a,
button,
.primary-btn,
.ghost-btn,
.quick-action,
.account-pill a,
.service-card summary,
.service-shortcut,
.kpi-card {
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

input,
select,
textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: var(--card);
    outline: none;
}

input,
select {
    height: 38px;
    padding: 0 12px;
}

textarea {
    min-height: 96px;
    padding: 10px 12px;
    line-height: 1.45;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .12);
}

.app-frame {
    min-height: 100vh;
    display: block;
    padding-left: 246px;
    background: var(--page);
}

.side-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: 246px;
    height: 100vh;
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    padding: 16px 14px;
    overflow: visible;
    color: #d9e3f2;
    background: linear-gradient(180deg, var(--nav), var(--nav-2));
    border-right: 1px solid rgba(255, 255, 255, .07);
    transition: transform .2s ease;
}

@media (min-width: 921px) {
    .app-frame.sidebar-hidden {
        padding-left: 0 !important;
    }

    .app-frame.sidebar-hidden .side-rail {
        transform: translateX(-100%);
        box-shadow: none;
    }
}

.sidebar-toggle {
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--card);
    cursor: pointer;
}

.brand,
.login-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.brand {
    min-height: 54px;
    padding: 7px;
    border-radius: 8px;
}

.brand:hover {
    background: rgba(255, 255, 255, .06);
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    box-shadow: 0 8px 18px rgba(22, 119, 232, .24);
    font-weight: 900;
    font-size: 12px;
}

.brand strong,
.login-brand strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 17px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand small,
.login-brand small {
    display: block;
    margin-top: 3px;
    color: #9badc4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.side-nav {
    min-width: 0;
    max-height: none;
    overflow: visible;
    scrollbar-width: none;
}

.side-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.side-nav a,
.nav-parent {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin: 3px 0;
    padding: 5px 9px;
    border-radius: 8px;
    color: #b9c5d6;
    font-weight: 750;
}

.side-nav .nav-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: #8fa3bd;
    background: rgba(255, 255, 255, .07);
}

.side-nav .nav-icon.small {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.nav-svg {
    width: 16px;
    height: 16px;
}

.nav-icon.small .nav-svg {
    width: 14px;
    height: 14px;
}

.side-nav a.active,
.side-nav a:hover,
.nav-stack.active > .nav-parent,
.nav-stack:hover > .nav-parent,
.nav-stack:focus-within > .nav-parent,
.nav-stack.flyout-open > .nav-parent {
    color: #fff;
    background: rgba(255, 255, 255, .09);
}

.side-nav a.active .nav-icon,
.nav-stack.active > .nav-parent .nav-icon,
.nav-stack:hover > .nav-parent .nav-icon,
.nav-stack:focus-within > .nav-parent .nav-icon,
.nav-stack.flyout-open > .nav-parent .nav-icon {
    color: #fff;
    background: var(--blue);
}

.nav-stack {
    position: relative;
    min-width: 0;
}

.nav-stack::after,
.nav-parent::after {
    content: none !important;
    display: none !important;
}

.nav-parent {
    width: 100%;
    appearance: none;
    border: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    color: inherit;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.nav-flyout {
    position: absolute;
    left: calc(100% - 1px);
    top: 0;
    z-index: 120;
    display: grid;
    gap: 4px;
    width: 268px;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: rgba(17, 24, 39, .98);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .26);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-5px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.nav-flyout::before {
    content: "";
    position: absolute;
    inset: -10px auto -10px -30px;
    width: 30px;
}

.nav-stack.flyout-open > .nav-flyout {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.nav-stack.flyout-closing .nav-flyout {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-5px);
}

.nav-flyout a {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 34px;
    margin: 0;
    padding: 5px 8px;
    border-radius: 7px;
    color: #9fb0c8;
    font-size: 12px;
}

.nav-flyout a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.app-frame.is-admin-shell {
    padding-left: 284px;
}

.is-admin-shell .side-rail {
    width: 284px;
    gap: 0;
    padding: 0;
    overflow: visible;
    color: #48627d;
    background: #fff;
    border-right: 1px solid #e3e9f1;
    box-shadow: 12px 0 28px rgba(15, 23, 42, .04);
}

.is-admin-shell .brand {
    min-height: 58px;
    margin: 0;
    padding: 8px 14px;
    border-radius: 0;
    color: #fff;
    background: #303030;
}

.is-admin-shell .brand:hover {
    background: #303030;
}

.is-admin-shell .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: #101820;
    background: #f8fafc;
    box-shadow: none;
}

.is-admin-shell .brand small {
    color: rgba(255, 255, 255, .64);
}

.is-admin-shell .side-nav {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 14px 9px 20px;
    overflow: visible;
    scrollbar-width: none;
    scrollbar-color: #c6d0dc transparent;
}

/* Customer shell needs the same always-on flex-column list the admin shell
   gets above. Without this, the only rule left governing .side-nav's layout
   below the 920px breakpoint is a leftover from an abandoned horizontal
   icon-strip design (search "gap: 7px" further down this file) that never
   sets a column direction - so on a phone the full nav list would lay out
   as one un-contained horizontal row and spill past the viewport edge. */
.is-customer-shell .side-nav {
    display: flex;
    flex-direction: column;
}

.is-admin-shell .side-nav > * {
    order: 20;
}

.is-admin-shell .side-nav > .admin-nav-item:first-child {
    order: 1;
}

.is-admin-shell .admin-services-stack {
    order: 2;
}

.is-admin-shell .admin-orders-stack {
    order: 3;
}

.is-admin-shell .admin-groups-stack {
    order: 4;
}

.is-admin-shell .admin-nav-divider {
    order: 5;
}

.is-admin-shell .side-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.is-admin-shell .side-nav::-webkit-scrollbar-track {
    background: transparent;
}

.is-admin-shell .side-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c6d0dc;
}

.is-admin-shell .side-nav a,
.is-admin-shell .nav-parent {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 56px;
    margin: 4px 0;
    padding: 6px 12px;
    border-radius: 10px;
    color: #496986;
    background: transparent;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
}

.is-admin-shell .side-nav .nav-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #57728d;
    background: transparent;
}

.is-admin-shell .side-nav a.active,
.is-admin-shell .side-nav a:hover,
.is-admin-shell .admin-nav-stack.active > .nav-parent,
.is-admin-shell .admin-nav-stack:hover > .nav-parent,
.is-admin-shell .admin-nav-stack:focus-within > .nav-parent,
.is-admin-shell .admin-nav-stack.flyout-open > .nav-parent {
    color: #061426;
    background: #e9ecef;
}

.is-admin-shell .side-nav a.active .nav-icon,
.is-admin-shell .side-nav a:hover .nav-icon,
.is-admin-shell .admin-nav-stack.active > .nav-parent .nav-icon,
.is-admin-shell .admin-nav-stack:hover > .nav-parent .nav-icon,
.is-admin-shell .admin-nav-stack:focus-within > .nav-parent .nav-icon,
.is-admin-shell .admin-nav-stack.flyout-open > .nav-parent .nav-icon {
    color: #071626;
    background: transparent;
}

.is-admin-shell .nav-flyout {
    position: absolute;
    left: calc(100% + 4px);
    top: 0;
    z-index: 180;
    display: grid;
    width: 278px;
    max-height: 72vh;
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(15, 23, 42, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.is-admin-shell .nav-flyout::before {
    content: "";
    position: absolute;
    inset: -12px auto -12px -32px;
    width: 32px;
}

@media (max-width: 920px) {
    /* The rule above positions admin flyout submenus (Finance, Inventory,
       Services, etc.) to the right of a 284px desktop sidebar. On a phone
       the sidebar is a full-width static block instead, so "to the right"
       lands almost entirely off-screen - drop the flyout below its trigger
       instead, matching the generic mobile .nav-flyout treatment used for
       the non-admin flyouts (Place Order / Order History). */
    .is-admin-shell .nav-flyout {
        left: 0;
        top: calc(100% + 6px);
        width: min(278px, calc(100vw - 48px));
        max-height: none;
    }
}

.is-admin-shell .admin-nav-stack.flyout-open > .nav-flyout {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.is-admin-shell .admin-submenu a {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 44px;
    margin: 0;
    padding: 4px 12px;
    border-radius: 9px;
    color: #43617e;
    font-size: 14px;
    font-weight: 560;
}

.is-admin-shell .admin-submenu a:hover {
    color: #071426;
    background: #f3f6f9;
}

.is-admin-shell .admin-submenu .nav-dot {
    justify-self: center;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #b5bec8;
}

.is-admin-shell .nav-count {
    color: #456784;
    font-weight: 650;
}

.is-admin-shell .nav-chevron {
    color: #506b84;
    font-size: 22px;
    line-height: 1;
    transition: transform .16s ease;
}

.is-admin-shell .admin-nav-stack:hover > .nav-parent .nav-chevron,
.is-admin-shell .admin-nav-stack:focus-within > .nav-parent .nav-chevron,
.is-admin-shell .admin-nav-stack.flyout-open > .nav-parent .nav-chevron {
    transform: translateX(2px);
}

.theme-dark .is-admin-shell .side-rail {
    color: #a4afbf;
    background: #111827;
    border-right-color: #253244;
    box-shadow: 12px 0 28px rgba(0, 0, 0, .2);
}

.theme-dark .is-admin-shell .brand,
.theme-dark .is-admin-shell .brand:hover {
    background: #0b1018;
}

.theme-dark .is-admin-shell .brand-mark {
    color: #0b1018;
    background: #e8eef7;
}

.theme-dark .is-admin-shell .side-nav a,
.theme-dark .is-admin-shell .nav-parent {
    color: #a4b4c7;
}

.theme-dark .is-admin-shell .side-nav .nav-icon {
    color: #8799ae;
}

.theme-dark .is-admin-shell .side-nav a.active,
.theme-dark .is-admin-shell .side-nav a:hover,
.theme-dark .is-admin-shell .admin-nav-stack.active > .nav-parent,
.theme-dark .is-admin-shell .admin-nav-stack:hover > .nav-parent,
.theme-dark .is-admin-shell .admin-nav-stack:focus-within > .nav-parent,
.theme-dark .is-admin-shell .admin-nav-stack.flyout-open > .nav-parent {
    color: #fff;
    background: #1d2531;
}

.theme-dark .is-admin-shell .side-nav a.active .nav-icon,
.theme-dark .is-admin-shell .side-nav a:hover .nav-icon,
.theme-dark .is-admin-shell .admin-nav-stack.active > .nav-parent .nav-icon,
.theme-dark .is-admin-shell .admin-nav-stack:hover > .nav-parent .nav-icon,
.theme-dark .is-admin-shell .admin-nav-stack:focus-within > .nav-parent .nav-icon,
.theme-dark .is-admin-shell .admin-nav-stack.flyout-open > .nav-parent .nav-icon {
    color: #fff;
}

.theme-dark .is-admin-shell .nav-flyout {
    background: #171d27;
    border-color: #2a3544;
    box-shadow: 0 24px 54px rgba(0, 0, 0, .36);
}

.theme-dark .is-admin-shell .admin-submenu a {
    color: #a4b4c7;
}

.theme-dark .is-admin-shell .admin-submenu a:hover {
    color: #fff;
    background: #1d2531;
}

.theme-dark .is-admin-shell .admin-submenu .nav-dot {
    background: #607086;
}

.theme-dark .is-admin-shell .nav-count,
.theme-dark .is-admin-shell .nav-chevron {
    color: #9aacbf;
}

.theme-dark .is-admin-shell .admin-nav-divider {
    background: #232d3b;
}

.is-admin-shell .admin-nav-divider {
    height: 1px;
    margin: 12px 10px;
    background: #edf1f6;
}

.is-admin-shell .admin-nav-stack.compact .nav-parent,
.is-admin-shell .admin-nav-item {
    min-height: 50px;
}

.workspace {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Customer's .workspace no longer has its own .command-bar as a first child
   - that header now lives outside .workspace, merged into .top-navbar - so
   it only ever lays out two rows (page-shell, footer) instead of three. */
.is-customer-shell.customer-topnav-shell .workspace {
    grid-template-rows: minmax(0, 1fr) auto;
}

.command-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.theme-dark .command-bar {
    background: rgba(23, 29, 39, .9);
}

.workspace-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.workspace-title button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    background: var(--card);
    font-weight: 900;
}

.workspace-title strong {
    display: block;
    max-width: 180px;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-search,
.filter-bar form,
.quick-lookup form {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.top-search button,
.filter-bar button,
.quick-lookup button,
.primary-btn,
.service-order-row button,
.ghost-btn {
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    padding: 0 14px;
    color: #fff;
    background: var(--blue);
    font-weight: 850;
    box-shadow: var(--shadow-soft);
}

.top-search button:hover,
.filter-bar button:hover,
.quick-lookup button:hover,
.primary-btn:hover,
.service-order-row button:hover,
.service-order-actions button:hover {
    background: var(--blue-deep);
    box-shadow: 0 12px 24px rgba(22, 119, 232, .22);
    transform: translateY(-1px);
}

.ghost-btn {
    color: var(--blue-deep);
    background: var(--card-soft);
    border: 1px solid var(--line);
}

.ghost-btn:hover,
.quick-action:hover,
.account-pill a:hover,
.account-pill button:hover,
.filter-bar a:hover {
    border-color: rgba(22, 119, 232, .26);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.quick-actions {
    display: flex;
    min-width: 0;
    gap: 8px;
}

.quick-action,
.account-pill a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    min-height: 34px;
    border-radius: 6px;
    padding: 0 10px;
    color: var(--blue-deep);
    background: #eef6ff;
    font-weight: 850;
    white-space: nowrap;
}

.quick-action .nav-svg {
    width: 15px;
    height: 15px;
}

.quick-action.success {
    color: #087a4a;
    background: #ecfbf4;
}

.quick-action.warn {
    color: #8a5600;
    background: #fff6e7;
}

.quick-action.info {
    color: #075ca8;
    background: #eef6ff;
}

.theme-dark .quick-action,
.theme-dark .account-pill a {
    background: var(--card-soft);
}

.account-pill {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
}

/* .account-pill-user already picks up the standard pill-button look from
   ".account-pill a" above (background, padding, color, hover state, etc.)
   - the extra ".account-pill a" in this selector just raises specificity
   enough to switch it from inline-flex to inline-block, which is what
   makes text-overflow: ellipsis reliably truncate a long name/username
   instead of stretching the header. */
.account-pill a.account-pill-user {
    display: inline-block;
    max-width: 135px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-pill form {
    margin: 0;
}

.account-pill button {
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 10px;
    color: var(--ink);
    background: var(--card);
    font-weight: 850;
}

/* Customer top navbar - replaces the customer left sidebar with a
   horizontal bar (two stacked rows), matching the reference sites' layout.
   The admin shell is untouched: it still gets .side-rail/.command-bar
   exactly as before. Row 1 (.top-navbar-utility) is the same theme-adaptive
   light/dark treatment the old .command-bar used, so search + WhatsApp/
   Telegram/API pills need zero style changes. Row 2 (.top-navbar-main) is
   an "always branded blue" row using var(--topbar)/var(--topbar-2) - a
   fixed pair sourced from this app's own --blue/--blue-deep (see top of
   file), defined identically in :root and body.theme-dark so this row
   never turns white in light mode or washes out pale in dark mode -
   matching how the reference sites keep their brand bar a constant color
   regardless of the rest of the page's light/dark state. */
.is-customer-shell.customer-topnav-shell {
    padding-left: 0;
}

.top-navbar {
    position: sticky;
    top: 0;
    z-index: 70;
}

.top-navbar-row {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
    padding: 8px 20px;
}

/* Scrolling announcement strip above the utility row. Uses --topbar/-2 (not
   --blue/--blue-deep) deliberately - those invert to a lighter blue in dark
   mode, which would wash out white ticker text; the topbar tokens stay the
   same deep blue in both themes. */
.top-navbar-ticker {
    display: flex;
    align-items: stretch;
    padding: 0;
    background: linear-gradient(90deg, var(--topbar), var(--topbar-2));
}

/* Fixed badge at the left so the strip reads as its own distinct banner
   element at a glance, not just a thin line of text. */
.ticker-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-right: 1px solid rgba(255, 255, 255, .2);
}

.ticker-icon .nav-svg {
    width: 15px;
    height: 15px;
}

.ticker-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-scroll 34s linear infinite;
}

.top-navbar-ticker:hover .ticker-track {
    animation-play-state: paused;
}

.ticker-content {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 9px 24px 9px 20px;
    white-space: nowrap;
}

.ticker-content span {
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .02em;
}

.ticker-dot {
    margin: 0 20px;
    color: rgba(255, 255, 255, .55);
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track {
        animation: none;
    }
}

.top-navbar-utility {
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.theme-dark .top-navbar-utility {
    background: rgba(23, 29, 39, .9);
}

.top-navbar-utility .quick-actions {
    flex: 0 0 auto;
}

/* Quick-actions pinned left, gear pinned right, search takes the remaining
   space and self-centers within it - matches the reference sites' utility
   row (contact pills / search / a single small settings icon), instead of
   the old two-pill "API" button that duplicated the account menu's own
   Settings/API link one click away. */
.top-navbar-utility .top-search {
    flex: 1 1 320px;
    max-width: 420px;
    margin: 0 auto;
}

.utility-gear {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--card);
}

.utility-gear:hover {
    color: var(--blue);
    border-color: var(--blue);
}

.utility-gear .nav-svg {
    width: 17px;
    height: 17px;
}

.top-navbar-main {
    position: relative;
    min-height: 64px;
    background: linear-gradient(90deg, var(--topbar), var(--topbar-2));
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.top-navbar-main .brand {
    flex: 0 0 auto;
}

.top-nav-links {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-width: 0;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.top-nav-links::-webkit-scrollbar {
    display: none;
}

.top-nav-links > a,
.top-nav-links .nav-parent {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border-radius: 7px;
    color: #b9c5d6;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 750;
}

.top-nav-links > a.active,
.top-nav-links > a:hover,
.top-nav-links .nav-stack.active > .nav-parent,
.top-nav-links .nav-stack:hover > .nav-parent,
.top-nav-links .nav-stack:focus-within > .nav-parent,
.top-nav-links .nav-stack.flyout-open > .nav-parent {
    color: #fff;
    background: rgba(255, 255, 255, .09);
}

.top-nav-links .nav-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: inherit;
    background: none;
}

.top-nav-links .nav-chevron-down {
    display: inline-flex;
    color: #8fa3bd;
}

.top-nav-links .nav-chevron-down .nav-svg {
    width: 13px;
    height: 13px;
}

.top-nav-links .nav-stack {
    position: relative;
}

/* Downward-opening dropdown for Place Order / Order History inside the top
   navbar - a light/dark theme-aware card (var(--card) etc.), unlike the
   admin sidebar's always-dark .nav-flyout, since this one floats over
   ordinary page content rather than living inside a permanently dark rail.
   Only position/sizing/color are overridden here - opacity, visibility,
   pointer-events and the open/close transition are inherited from the
   shared .nav-flyout rule near the top of this file. */
.top-nav-links .nav-flyout {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 240px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .16);
}

.theme-dark .top-nav-links .nav-flyout {
    box-shadow: 0 18px 34px rgba(0, 0, 0, .4);
}

.top-nav-links .nav-flyout a {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 36px;
    margin: 0;
    padding: 5px 8px;
    border-radius: 7px;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 750;
}

.top-nav-links .nav-flyout a:hover {
    color: var(--ink);
    background: var(--card-soft);
}

.top-nav-links .nav-flyout .nav-icon.small {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--muted);
    background: var(--card-soft);
}

.mobile-nav-toggle {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 7px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.mobile-nav-toggle .nav-svg {
    width: 18px;
    height: 18px;
}

.mobile-nav-toggle .icon-close {
    display: none;
}

.mobile-nav-toggle[aria-expanded="true"] .icon-open {
    display: none;
}

.mobile-nav-toggle[aria-expanded="true"] .icon-close {
    display: inline-flex;
}

@media (max-width: 920px) {
    .mobile-nav-toggle {
        display: inline-flex;
    }

    .top-navbar-main {
        flex-wrap: wrap;
    }

    .top-nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px 0 4px;
        overflow: visible;
    }

    .top-nav-links.open {
        display: flex;
    }

    .top-nav-links .nav-stack,
    .top-nav-links > a,
    .top-nav-links .nav-parent {
        width: 100%;
    }

    .top-nav-links .nav-parent {
        justify-content: flex-start;
    }

    /* Nested inside an already-expanded-in-place panel now, rather than
       floating over the page, so Place Order / Order History's sub-links
       become a simple indented inline list instead of a second floating
       card - avoids stacking one floating dropdown inside another. */
    .top-nav-links .nav-flyout {
        position: static;
        display: none;
        width: 100%;
        margin: 2px 0 4px;
        padding: 4px 0 4px 30px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .top-nav-links .nav-stack.flyout-open > .nav-flyout {
        display: flex;
        flex-direction: column;
    }

    .top-nav-links .nav-flyout a {
        color: #b9c5d6;
    }

    .top-nav-links .nav-flyout a:hover {
        color: #fff;
        background: rgba(255, 255, 255, .07);
    }

    .top-nav-links .nav-flyout .nav-icon.small {
        color: #8fa3bd;
        background: rgba(255, 255, 255, .07);
    }

    .top-navbar-utility {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .top-navbar-utility .top-search {
        order: 1;
        flex: 1 1 100%;
        max-width: none;
        margin: 0;
    }

    .top-navbar-utility .quick-actions {
        order: 2;
        flex-wrap: wrap;
    }

    .utility-gear {
        order: 3;
        margin-left: auto;
    }
}

/* Account avatar + dropdown menu - replaces the old flat username link and
   logout button with a single trigger that reveals profile shortcuts,
   wallet balance and the previous-session "last login" line. Built on the
   same open/close + click-outside/Escape idioms as the sidebar's
   .nav-stack flyouts (see the layout script), and on the shared
   var(--card)/var(--line)/var(--shadow) tokens so it follows light/dark
   theme automatically. */
.account-menu {
    position: relative;
}

.account-trigger {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    min-height: 34px;
    gap: 8px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    padding: 3px 10px 3px 3px;
    color: var(--ink);
    cursor: pointer;
}

.account-trigger:hover {
    border-color: rgba(22, 119, 232, .26);
    box-shadow: var(--shadow-soft);
}

.account-avatar {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.account-avatar.lg {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.account-trigger-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    text-align: left;
}

.account-trigger-text strong {
    max-width: 120px;
    overflow: hidden;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-trigger-text small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.account-chevron {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--quiet);
    transition: transform .18s ease;
}

.account-chevron .nav-svg {
    width: 14px;
    height: 14px;
}

.account-menu.open .account-chevron {
    transform: rotate(180deg);
}

.account-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 130;
    width: 264px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.theme-dark .account-dropdown {
    box-shadow: 0 18px 34px rgba(0, 0, 0, .4);
}

.account-menu.open .account-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.account-dropdown-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 2px 6px 12px;
    border-bottom: 1px solid var(--line-soft);
}

.account-dropdown-head > div {
    min-width: 0;
}

.account-dropdown-head strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 13.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-dropdown-head small {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-dropdown-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--card-soft);
    padding: 8px 10px;
}

.account-dropdown-balance span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.account-dropdown-balance strong {
    color: var(--green);
    font-size: 14px;
    font-weight: 900;
}

.account-dropdown-links {
    display: grid;
    gap: 2px;
    margin-bottom: 8px;
}

.account-dropdown-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    border-radius: 7px;
    padding: 0 8px;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 750;
}

.account-dropdown-links a:hover {
    background: var(--card-soft);
}

.account-dropdown-links a .nav-svg {
    width: 16px;
    height: 16px;
    color: var(--muted);
}

.account-dropdown-lastlogin {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    border-radius: 7px;
    background: var(--card-soft);
    padding: 8px;
    color: var(--quiet);
    font-size: 11px;
    line-height: 1.4;
}

.account-dropdown-lastlogin .nav-svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 1px;
}

.account-dropdown-logout {
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
}

.account-dropdown-logout button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    border: 0;
    border-radius: 7px;
    background: #fdeef0;
    color: var(--rose);
    font-size: 12.5px;
    font-weight: 850;
}

.account-dropdown-logout button:hover {
    background: var(--rose);
    color: #fff;
}

.theme-dark .account-dropdown-logout button {
    background: var(--card-soft);
}

.account-dropdown-logout .nav-svg {
    width: 15px;
    height: 15px;
}

@media (max-width: 480px) {
    .account-dropdown {
        right: -8px;
        width: min(264px, calc(100vw - 32px));
    }
}

/* The trigger + theme/locale toggles normally use var(--card) so they read
   correctly against the light admin .command-bar, but the customer top
   navbar's main row is always dark navy regardless of site theme (see the
   .top-navbar-main comment above) - give them a translucent-white pill
   there instead so they don't go dark-on-dark in the site's dark theme.
   The dropdown PANEL itself is untouched: once open it floats over
   ordinary page content like any other card, so it should read normally
   in both themes rather than match the dark bar it was triggered from. */
.top-navbar-main .account-pill > a {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.top-navbar-main .account-pill > a:hover {
    background: rgba(255, 255, 255, .18);
}

.top-navbar-main .account-trigger {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.top-navbar-main .account-trigger:hover {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .14);
    box-shadow: none;
}

.top-navbar-main .account-trigger-text strong {
    color: #fff;
}

.top-navbar-main .account-trigger-text small {
    color: #b9c5d6;
}

.top-navbar-main .account-chevron {
    color: #9badc4;
}

.page-shell {
    width: min(100%, 1440px);
    min-width: 0;
    margin: 0 auto;
    padding: 16px 16px 22px;
    /* First-paint safety net: rather than trusting every page to have
       finished settling (webfont swap, icon fonts, any late class toggle)
       before the user sees it, hide the content for one short beat and ease
       it in - trades a fixed, tiny delay for never showing a half-styled
       "broken first frame". Pure CSS (no JS "loaded" class to race against
       network/script timing), and skipped entirely for reduced-motion. */
    opacity: 0;
    animation: page-shell-reveal .22s ease .08s forwards;
}

@keyframes page-shell-reveal {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .page-shell {
        opacity: 1;
        animation: none;
    }
}

.page-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 16px;
}

.page-title h1 {
    margin: 0;
    color: var(--ink);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 900;
}

.page-title p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

/* Same left-edge "flag stripe" language as .notice-card/.wallet-panel/
   .announcements - an icon badge + bolder left border instead of a plain
   text line, so a failed submission (insufficient balance, blocked IMEI,
   validation errors) reads as a clear stop, not a line of text easy to miss
   after a page redirect. */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 13px 15px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13.5px;
}

/* Needed wherever an .alert's visibility is toggled with the hidden
   attribute from JS (e.g. the Place Order form's inline error banner) -
   the browser's own [hidden] { display: none } rule has the lowest
   possible specificity and loses to "display: flex" above without this. */
.alert[hidden] {
    display: none;
}

.alert .nav-svg {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 1px;
}

.alert.success {
    color: #087a4a;
    background: #e9f8f0;
    border: 1px solid #bdebd2;
    border-left: 4px solid var(--green);
}

.alert.error {
    color: #b91e36;
    background: #fff0f3;
    border: 1px solid #f8c7d1;
    border-left: 4px solid var(--rose);
}

.alert ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font-weight: 600;
}

.alert li + li {
    margin-top: 2px;
}

/* Dashboard's own opening moment - previously the page went straight from
   the top navbar into alert banners/notice cards with nothing establishing
   "this is your panel," so every page read as an interchangeable stack of
   white cards. One branded gradient band up top (same blue used for the
   Place Order modal header and primary buttons, not a new colour) gives the
   dashboard a clear start and a direct route into ordering. */
.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
    padding: 16px 20px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--blue-deep));
    box-shadow: 0 12px 26px rgba(22, 119, 232, .2);
}

.dashboard-hero h1 {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 900;
}

.dashboard-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 13.5px;
    font-weight: 700;
}

.dashboard-hero-cta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 9px;
    color: var(--blue-deep);
    background: #fff;
    font-weight: 900;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .18);
}

.dashboard-hero-cta:hover {
    background: #f3f8ff;
}

.dashboard-hero-cta .nav-svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 640px) {
    .dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-hero-cta {
        width: 100%;
        justify-content: center;
    }
}

.notice-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.notice-card {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    padding: 11px 14px;
    border: 1px solid #bdd9f6;
    border-left: 3px solid var(--blue);
    border-radius: 8px;
    background: #eef7ff;
}

.notice-card span,
.quick-lookup span {
    color: var(--blue-deep);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.notice-card strong {
    min-width: 0;
    color: #245277;
    font-size: 13px;
    font-weight: 800;
}

.notice-card a {
    grid-row: 1 / span 2;
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border-radius: 6px;
    padding: 0 14px;
    color: #fff;
    background: var(--blue);
    font-weight: 850;
}

.theme-dark .notice-card {
    background: var(--card-soft);
    border-color: var(--line);
}

.theme-dark .notice-card strong {
    color: var(--ink);
}

.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.kpi-card {
    position: relative;
    min-width: 0;
    min-height: 84px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow-soft);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.kpi-card:hover {
    border-color: rgba(22, 119, 232, .28);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .10);
    transform: translateY(-1px);
}

.kpi-icon {
    grid-row: 1 / span 3;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: #fff;
    background: var(--blue);
}

.kpi-icon .nav-svg {
    width: 20px;
    height: 20px;
}

.kpi-card.processing .kpi-icon {
    background: var(--blue);
}

.kpi-card.pending .kpi-icon {
    background: var(--orange);
}

.kpi-card.completed .kpi-icon {
    background: var(--green);
}

.kpi-card.all .kpi-icon {
    background: var(--violet);
}

.kpi-card.spent .kpi-icon {
    background: var(--rose);
}

.kpi-label {
    display: block;
    overflow: hidden;
    color: var(--quiet);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.kpi-card strong {
    display: block;
    margin: 1px 0;
    color: var(--ink);
    font-size: 25px;
    line-height: 1.1;
    font-weight: 900;
}

.kpi-card small {
    display: block;
    color: var(--blue-deep);
    font-size: 11px;
    font-weight: 850;
}

/* Ratio-style progress bar under each count - share of all-time orders
   this bucket represents (see $kpiTotal in customer/dashboard.blade.php).
   Falls into its own implicit grid row and spans both columns, under the
   icon as well as the label/count/link. */
.kpi-progress {
    display: block;
    grid-column: 1 / -1;
    height: 5px;
    margin-top: 4px;
    border-radius: 999px;
    background: var(--line-soft);
    overflow: hidden;
}

.kpi-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--blue);
}

.kpi-card.pending .kpi-progress > span {
    background: var(--orange);
}

.kpi-card.completed .kpi-progress > span {
    background: var(--green);
}

.kpi-card.rejected .kpi-progress > span {
    background: var(--rose);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-main {
    display: grid;
    grid-template-columns: minmax(0, 2.02fr) minmax(380px, .98fr);
    gap: 12px;
    align-items: stretch;
}

.dashboard-primary {
    display: grid;
    gap: 12px;
}

.wallet-row {
    display: grid;
    /* auto-fit, not a hardcoded repeat(2, ...): the Total Receipts panel
       added alongside Current Balance/Locked Amount would otherwise wrap
       onto its own lopsided row - see the .filter-bar comment below for why
       hand-matched grid columns are fragile. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.wallet-panel,
.service-shortcut,
.quick-lookup,
.announcements,
.panel,
.service-card,
.supplier-card,
.admin-stats div {
    min-width: 0;
    border: 1px solid var(--line);
    /* Softer than the 8px this app started with - closer to the rounded,
       lifted-card language reference GSM panels use for their service
       grids, without copying their exact radius/shadow numbers. */
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.notice-card:hover,
.wallet-panel:hover,
.service-shortcut:hover,
.announcements:hover,
.panel:hover,
.service-card:hover,
.supplier-card:hover,
.admin-stats div:hover {
    border-color: rgba(22, 119, 232, .30);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .10);
    transform: translateY(-1px);
}

.wallet-panel {
    grid-column: auto;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    /* Left-edge "category flag" accent instead of a thin top hairline -
       reads as a deliberate colour-coded stripe at a glance (balance/locked/
       receipts) instead of blending into the card's own 1px border. */
    border-left: 5px solid var(--blue);
}

.wallet-panel.locked {
    border-left-color: var(--orange);
}

.wallet-panel.receipts {
    border-left-color: var(--green);
}

.wallet-panel.receipts strong {
    color: var(--green);
}

.wallet-panel span,
.metric-card span {
    display: block;
    color: var(--muted);
    font-weight: 850;
}

.wallet-panel strong {
    display: block;
    margin: 2px 0;
    color: var(--blue-deep);
    font-size: 27px;
    line-height: 1;
    font-weight: 900;
}

.wallet-panel.locked strong {
    color: var(--orange);
}

.wallet-panel small {
    color: var(--quiet);
    font-weight: 750;
}

.wallet-panel a {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    border-radius: 7px;
    padding: 0 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(22, 119, 232, .18);
}

.announcements {
    grid-column: auto;
    grid-row: auto;
    min-height: 320px;
    max-height: 480px;
    overflow: auto;
    padding: 14px 16px;
    /* Same left-edge accent language as .wallet-panel - one consistent
       "flag stripe" system across the dashboard instead of a thin top rule. */
    border-left: 5px solid var(--orange);
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.section-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
}

.section-head a {
    color: var(--blue-deep);
    font-size: 12px;
    font-weight: 900;
}

.announcements article {
    padding: 15px 0;
    border-bottom: 1px solid var(--line-soft);
}

.announcements article:last-child {
    border-bottom: 0;
}

.announcements article strong {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
}

.announcements article small {
    color: var(--quiet);
    font-weight: 750;
}

.service-shortcut {
    min-height: 120px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    padding: 16px;
    text-align: center;
}

.service-launcher-row {
    grid-column: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.service-shortcut span {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #fff;
    background: var(--blue);
}

.service-shortcut .nav-svg {
    width: 18px;
    height: 18px;
}

.service-shortcut.server span {
    background: var(--violet);
}

.service-shortcut.remote span {
    background: var(--cyan);
}

.service-shortcut.file span {
    background: var(--orange);
}

.service-shortcut strong {
    font-size: 16px;
    font-weight: 900;
}

.service-shortcut small {
    color: var(--muted);
    font-weight: 750;
}

.quick-lookup {
    grid-column: span 8;
    padding: 14px;
}

.recent-panel {
    margin-top: 16px;
}

.panel {
    margin-top: 12px;
    padding: 14px;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow);
}

/* The bar mixes a variable number of type/status links with a search
   form. It used to rely on grid-template-columns matched by hand to an
   exact child count and order, so adding one more link (e.g. a File
   category tab) silently misaligned every column after it - the search
   form would land in whichever fixed-width track was left over instead
   of getting the flexible width it needs. Flex-wrap sizes each link to
   its own content and lets the form claim the remaining space (with a
   sane minimum before it wraps to its own row), so the count of links
   before it no longer matters. */
.filter-bar form {
    flex: 1 1 280px;
}

.filter-bar a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border-radius: 6px;
    padding: 0 13px;
    color: var(--muted);
    background: var(--card-soft);
    border: 1px solid var(--line);
    font-weight: 850;
    white-space: nowrap;
}

.filter-bar a.selected {
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
}

.check-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-weight: 850;
    white-space: nowrap;
}

.check-label input {
    width: 16px;
    height: 16px;
    min-height: 0;
}

.service-section {
    margin-top: 20px;
}

.service-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.service-group-title span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 6px;
    padding: 0 8px;
    color: #fff;
    background: var(--rose);
    font-size: 10px;
    font-weight: 900;
}

.service-group-title h2 {
    margin: 0;
    color: var(--blue-deep);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
}

.service-group-count {
    color: var(--muted);
    font-weight: 750;
    white-space: nowrap;
}

.service-group-count::before {
    content: '\2022';
    margin-right: 10px;
    color: var(--line);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(270px, 1fr));
    gap: 14px;
}

.service-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    box-shadow: var(--shadow-soft);
}

details.service-card {
    display: block;
}

.service-card summary {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    list-style: none;
    cursor: pointer;
}

.service-card[open],
.service-card summary:hover {
    border-color: rgba(22, 119, 232, .24);
}

.service-card[open] summary {
    padding-bottom: 12px;
}

.service-card summary::-webkit-details-marker {
    display: none;
}

.open-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 0 10px;
    color: #fff;
    background: var(--blue);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.badge-discount {
    background: var(--rose) !important;
}

.badge-tag {
    background: var(--violet) !important;
}

.badge-featured {
    background: var(--orange) !important;
}

.service-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    font-size: 12px;
    font-weight: 900;
}

.service-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-copy {
    min-width: 0;
}

.service-copy h3 {
    margin: 0 0 5px;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
}

.service-copy p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badges span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 0 9px;
    color: #fff;
    /* Gradient-filled price/time pills read as a more crafted "service
       catalog" chip instead of a flat status label - same two-tone idea
       reference GSM panels use for this exact price+time pairing. */
    background: linear-gradient(135deg, var(--green), var(--green-deep));
    font-size: 11px;
    font-weight: 900;
}

.badges span:nth-child(2) {
    background: linear-gradient(135deg, var(--blue), var(--blue-deep));
}

.service-instructions {
    margin: 4px 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface, rgba(15, 23, 42, .03));
    font-size: 12.5px;
    line-height: 1.6;
}

.service-instructions p {
    margin: 0 0 8px;
}

.service-instructions p:last-child {
    margin-bottom: 0;
}

.service-instructions ul,
.service-instructions ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.article-table {
    width: 100%;
    margin: 4px 0 10px;
    border-collapse: collapse;
    font-size: 12px;
}

.article-table th,
.article-table td {
    border: 1px solid var(--line);
    padding: 6px 8px;
    text-align: left;
}

.service-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

.service-links a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    text-decoration: none;
}

.service-screenshot {
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid var(--line);
}

.service-order-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 4px;
}

.order-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.order-form-meta {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 7px;
    background: var(--card-soft);
}

.order-form-meta span,
.dynamic-field span,
.order-advanced-form label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.order-form-meta strong {
    color: var(--green);
    font-size: 18px;
    font-weight: 900;
}

.order-form-meta small {
    justify-self: end;
    color: var(--blue-deep);
    font-weight: 850;
}

.dynamic-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.dynamic-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.dynamic-field em {
    color: var(--rose);
    font-style: normal;
}

.dynamic-field small,
.field-empty {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
}

.field-empty {
    grid-column: 1 / -1;
    padding: 11px 12px;
    border-radius: 7px;
    background: var(--card-soft);
}

.switch-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
}

.service-order-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.service-order-actions button,
.field-admin-row button {
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    padding: 0 14px;
    color: #fff;
    background: var(--blue);
    font-weight: 850;
}

.field-summary {
    white-space: normal;
}

.field-summary span {
    display: block;
    max-width: 360px;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Place Order modal (customer services page): a native <dialog> opened by
   the .open-chip button in .service-card-top. Replaces the old inline
   <details> accordion with a dedicated checkout-style step - branded
   header bar, big bold total, and a clear primary CTA - to match the
   "fully professional / fully working system" feel of a real checkout. */

.service-card-dynamic {
    display: block;
    cursor: pointer;
}

/* The whole card opens Place Order now, not just the small "Order" chip -
   a visible focus ring matters here since the card is keyboard-reachable
   (role="button" tabindex="0" in services.blade.php). */
.service-card-dynamic:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.service-card-top {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.order-modal {
    width: min(720px, 92vw);
    max-height: 88vh;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--card);
    box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
}

.order-modal::backdrop {
    background: rgba(15, 23, 42, .55);
}

.order-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--blue-deep));
}

.order-modal-head h3 {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 16px;
    font-weight: 900;
}

.order-modal-close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.order-modal-close:hover {
    background: rgba(255, 255, 255, .3);
}

.order-modal-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    max-height: calc(88vh - 63px);
    overflow-y: auto;
}

/* The browser's own [hidden] { display: none } rule is UA-stylesheet-level
   (lowest possible specificity), so it loses to .order-modal-body/
   .order-modal-success's own "display: grid" the instant either is toggled
   with the hidden attribute from JS - without this, the form and the
   inline success confirmation render stacked on top of each other instead
   of one replacing the other. This wins on specificity either way round. */
.order-modal-body[hidden],
.order-modal-success[hidden] {
    display: none;
}

.order-modal-fields {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 20px;
}

.order-modal-fields .service-instructions,
.order-modal-fields .service-links {
    margin: 0;
}

.order-modal-summary {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 20px;
    border-left: 1px solid var(--line-soft);
    background: var(--card-soft);
}

.order-total-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.order-total-value {
    margin-top: -6px;
    color: var(--green);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
}

.frequently-use-row {
    display: flex;
    white-space: normal;
    padding: 8px 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.order-modal-submit {
    min-height: 46px;
    border: 0;
    border-radius: 9px;
    background: var(--blue);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(22, 119, 232, .28);
    cursor: pointer;
}

.order-modal-submit:hover {
    background: var(--blue-deep);
}

.order-modal-submit:disabled {
    opacity: .7;
    cursor: not-allowed;
}

/* Invalid-field highlight, applied by the order-form submit handler in
   layouts/app.blade.php when a 422 response names a field - a visible,
   in-place cue instead of leaving the customer to guess which field a
   single alert message was actually about. */
.field-invalid {
    border-color: var(--rose) !important;
    box-shadow: 0 0 0 3px rgba(231, 72, 99, .14);
}

/* Inline confirmation shown in place of .order-modal-body once the AJAX
   submit succeeds (see data-order-success in services.blade.php) - the
   dialog stays open and confirms right here, rather than a full-page
   navigation making the popup look like it opened somewhere else. */
.order-modal-success {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 36px 28px 30px;
    text-align: center;
}

.order-success-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 6px;
    border-radius: 999px;
    background: #e9f8f0;
    color: var(--green);
}

.order-success-icon .nav-svg {
    width: 24px;
    height: 24px;
}

.order-modal-success h4 {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
    font-weight: 900;
}

.order-modal-success p {
    margin: 0;
    max-width: 320px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.4;
}

.order-success-meta {
    display: flex;
    gap: 26px;
    margin: 12px 0 2px;
}

.order-success-meta > div {
    display: grid;
    gap: 2px;
    text-align: center;
}

.order-success-meta dt {
    margin: 0;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.order-success-meta dd {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 900;
}

.order-success-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.order-success-actions .order-modal-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    text-decoration: none;
}

.order-modal-secondary {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--card);
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.order-modal-secondary:hover {
    background: var(--card-soft);
}

/* Order History detail modal reuses .order-modal's chrome (width, backdrop,
   header, close button). Same main-content + narrow-summary-rail language as
   .order-modal-body (the Place Order form) - Order Info sits alongside
   Timeline/Inputs/Deliverable instead of stacked underneath, so the modal
   reads as one compact screen instead of a tall scrolling document. */
.order-detail-modal-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    align-items: start;
    gap: 16px;
    padding: 20px;
    max-height: calc(88vh - 63px);
    overflow-y: auto;
}

.order-detail-modal-body > .panel {
    margin-top: 0;
}

@media (max-width: 640px) {
    .order-modal {
        width: calc(100vw - 24px);
        max-height: 92vh;
    }

    .order-modal-body {
        grid-template-columns: 1fr;
        max-height: calc(92vh - 57px);
    }

    .order-detail-modal-body {
        grid-template-columns: 1fr;
        max-height: calc(92vh - 57px);
    }

    .order-modal-summary {
        border-left: 0;
        border-top: 1px solid var(--line-soft);
    }
}

.filter-bar-secondary {
    margin-top: -8px;
}

/* Order History status tabs: bolder than a plain .filter-bar chip on
   purpose - each tab carries its own status color plus a live count, the
   same "at a glance" language as the dashboard's kpi-strip cards, so the
   page reads as one connected system rather than a bare table with links
   above it. Deliberately its own section (not .filter-bar) so none of the
   plain chip rules cascade in and have to be fought with specificity. */
.status-tab-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.status-tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.status-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 8px 0 14px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--card-soft);
    font-weight: 850;
    white-space: nowrap;
}

.status-tab:hover {
    border-color: currentColor;
}

.status-tab-label {
    font-size: 13px;
}

.status-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.status-tab.tone-violet { color: var(--violet); }
.status-tab.tone-orange { color: var(--orange); }
.status-tab.tone-blue { color: var(--blue); }
.status-tab.tone-green { color: var(--green); }
.status-tab.tone-rose { color: var(--rose); }

.status-tab.is-active {
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-soft);
}

.status-tab.tone-violet.is-active { background: var(--violet); }
.status-tab.tone-orange.is-active { background: var(--orange); }
.status-tab.tone-blue.is-active { background: var(--blue); }
.status-tab.tone-green.is-active { background: var(--green); }
.status-tab.tone-rose.is-active { background: var(--rose); }

.status-tab.is-active .status-tab-count {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

.status-tab-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.status-tab-advanced {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 6px;
    color: var(--blue-deep);
    background: var(--card-soft);
    border: 1px solid var(--line);
    font-weight: 850;
    white-space: nowrap;
}

.status-tab-advanced:hover {
    border-color: rgba(22, 119, 232, .3);
}

@media (max-width: 640px) {
    .status-tab-tools {
        margin-left: 0;
        flex-basis: 100%;
    }

    .status-tab-tools select {
        flex: 1 1 auto;
    }

    .status-tab-advanced {
        flex-basis: 100%;
        justify-content: center;
    }
}

.field-builder,
.field-admin-list,
.field-admin-row {
    display: grid;
    gap: 10px;
}

.field-admin-list {
    margin-top: 12px;
}

.field-admin-row {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-soft);
}

.danger-btn {
    color: var(--rose) !important;
}

.preview-fields {
    max-width: 900px;
}

.checker-panel,
.checker-result {
    display: grid;
    gap: 14px;
}

.checker-form {
    display: grid;
    gap: 8px;
}

.checker-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.checker-search input,
.checker-search button {
    min-height: 44px;
    border-radius: 7px;
}

.checker-search input {
    border: 1px solid var(--line);
    padding: 0 13px;
    background: var(--card);
    font-weight: 800;
}

.checker-search button {
    border: 0;
    padding: 0 20px;
    color: #fff;
    background: var(--blue);
    font-weight: 900;
    cursor: pointer;
}

.form-error {
    color: var(--rose);
    font-weight: 850;
}

.checker-result {
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(130px, .5fr));
    align-items: stretch;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-soft);
}

.checker-result.clean {
    border-color: rgba(25, 166, 100, .28);
}

.checker-result.locked {
    border-color: rgba(239, 68, 68, .28);
}

.checker-result span {
    color: var(--blue-deep);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.checker-result strong {
    display: block;
    margin: 4px 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}

.checker-result small {
    color: var(--quiet);
    font-weight: 750;
}

.checker-status {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 86px;
    border-radius: 8px;
    background: var(--card);
    text-align: center;
}

.checker-status strong {
    font-size: 26px;
}

.fund-grid,
.two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    gap: 16px;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.module-grid > .panel {
    margin-top: 0;
}

.three-col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.inline-fields,
.check-grid,
.button-row {
    display: grid;
    min-width: 0;
    gap: 10px;
}

.inline-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inline-fields.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-admin-form {
    gap: 12px;
}

.check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
}

.button-row {
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: start;
}

.copy-box,
.stack-form {
    display: grid;
    gap: 10px;
}

.copy-box small,
.stack-form label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.copy-box input {
    color: var(--blue-deep);
    background: var(--card-soft);
    font-weight: 900;
}

.panel h2 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 900;
}

/* Compact click-to-expand settings sections - customer/settings.blade.php
   and admin/account-settings.blade.php. Replaces a page of always-open
   panels (everything shown at once, regardless of whether it needed
   attention) with a real accordion: one section's content is visible at a
   time, chosen by clicking its summary row. Exclusivity itself is enforced
   in partials/settings-accordion-script.blade.php since plain <details>
   siblings don't close each other natively. */
.settings-accordion {
    display: grid;
    gap: 12px;
}

.settings-section {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.settings-section > summary {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 30px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

.settings-section > summary::-webkit-details-marker {
    display: none;
}

.settings-section-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
}

.settings-section-heading {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 2px;
}

.settings-section-heading strong {
    font-size: 15px;
    font-weight: 900;
}

.settings-section-heading small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.settings-section > summary .status {
    flex: 0 0 auto;
}

.settings-section-chevron {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--muted);
    transition: transform .16s ease;
}

.settings-section[open] > summary .settings-section-chevron {
    transform: rotate(180deg);
}

.settings-section:hover {
    border-color: rgba(22, 119, 232, .28);
}

.settings-section[open] > summary {
    border-bottom: 1px solid var(--line-soft);
}

.settings-section-body {
    padding: 18px;
}

.settings-section-body > .stack-form:only-child,
.settings-section-body > .pane-hint:first-child {
    margin-top: 0;
}

/* Security settings: 2FA + Telegram pairing panels (customer/settings.blade.php) */
.security-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.security-panel-head h2 {
    margin: 0;
}

.twofactor-setup-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 12px;
}

.twofactor-step {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin: 12px 0 6px;
}

.twofactor-step:first-child {
    margin-top: 0;
}

.qr-code-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    width: fit-content;
}

.qr-code-box svg {
    display: block;
}

.qr-fallback {
    max-width: 176px;
    font-size: 12px;
    color: var(--muted);
}

.inline-code-form {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.inline-code-form input {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 12px;
    font-weight: 800;
    letter-spacing: .08em;
    width: 130px;
}

.link-btn {
    border: 0;
    background: none;
    color: var(--muted);
    font-weight: 750;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 0;
}

.link-btn:hover {
    color: var(--blue);
}

.ghost-btn.danger {
    color: var(--rose);
    border-color: #f3c6ce;
}

.ghost-btn.danger:hover {
    border-color: var(--rose);
    box-shadow: 0 12px 24px rgba(231, 72, 99, .18);
}

@media (max-width: 560px) {
    .twofactor-setup-grid {
        grid-template-columns: 1fr;
    }
}

.cron-box {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-soft);
}

.cron-box strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.cron-box input {
    height: 34px;
    color: var(--blue-deep);
    background: var(--card);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 800;
}

.cron-box p {
    margin: 0;
}

.panel p {
    color: var(--muted);
    font-weight: 750;
}

.compact-row {
    display: grid;
    gap: 3px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
}

.compact-row:last-child {
    border-bottom: 0;
}

.compact-row strong {
    overflow: hidden;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-row span,
.mini-link {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.mini-link {
    color: var(--blue-deep);
}

.cms-add-form {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.cms-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}

.cms-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.cms-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.cms-item form + form {
    margin-top: 8px;
}

.cms-media-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 10px;
}

.cms-media-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    grid-row: span 2;
}

.cms-media-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cms-media-meta strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-media-item .cms-item-actions {
    grid-column: 2;
    margin-top: 0;
}

.cms-page-panel {
    max-width: 820px;
}

.cms-page-body {
    line-height: 1.7;
    color: var(--ink);
}

.footer-links {
    margin-left: 10px;
}

.footer-links a {
    margin: 0 6px;
    color: var(--blue-deep);
    text-decoration: none;
    font-weight: 800;
}

.footer-links a:hover {
    text-decoration: underline;
}

.announcement-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.announcement-item:last-child {
    border-bottom: none;
}

.announcement-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.announcement-item-head strong {
    font-size: 15px;
}

.announcement-item small {
    color: var(--muted);
}

.announcement-item p {
    margin: 6px 0 0;
    color: var(--ink);
    line-height: 1.6;
}

.tiny-check {
    width: 16px;
    height: 16px;
    min-height: 0;
}

.table-wrap {
    width: 100%;
    overflow: auto;
}

table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 12px;
}

/* Tables dropped into a .two-col or .module-grid narrow panel (dashboard
   widgets, Edit Customer's Reseller/Recent Orders/Ledger cards, Inventory,
   System Settings, customer Resellers/Support lists, customer Settings'
   Login History widget, etc.) inherited the 760px floor above, which the
   ~500-600px column can never satisfy - so .table-wrap's overflow:auto
   silently scrolled whole columns (Status, Price, Date, Device...) out of
   view with no visible scrollbar hint. Let these shrink to the column's
   real width so text ellipsizes (td already caps at max-width:360px)
   instead of disappearing off-screen. */
.two-col table,
.module-grid table {
    min-width: 0;
}

.two-col table th,
.two-col table td,
.module-grid table th,
.module-grid table td {
    padding-left: 6px;
    padding-right: 6px;
}

/* Generic long-value column cap for narrow .two-col tables (service names,
   email addresses...): even with the min-width reset above, an auto-layout
   table still hands a free-text cell as much room as its longest value
   wants, which just pushes a later column (Price, Fund...) off the edge
   of the card instead. Cap it so the rest of the row always stays
   visible; pair with a title="" attribute so the full value is still
   reachable on hover. */
.col-truncate {
    max-width: 180px;
}

/* customer/resellers.blade.php "Sub-Account" cell: username + email
   stacked in one column instead of two, to give the Fund input+button a
   realistic chance of fitting in the same narrow .two-col card. */
.stacked-cell {
    white-space: normal;
}

.stacked-cell strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stacked-cell span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

th,
td {
    max-width: 360px;
    padding: 11px 10px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

tbody tr:hover td {
    background: var(--card-soft);
}

th {
    color: var(--muted);
    background: var(--card-soft);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

.status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 9px;
    color: #fff;
    background: var(--quiet);
    font-size: 11px;
    font-weight: 900;
    text-transform: capitalize;
}

/* Only affects a .status pill that actually contains an <x-icon> (order-show's
   status pills) - every other .status usage across the app has no svg
   child so this rule never applies to it. */
.status .nav-svg {
    width: 12px;
    height: 12px;
    margin-right: 4px;
}

.status.completed,
.status.approved,
.status.active,
.status.paid,
.status.credit,
.status.success {
    background: var(--green);
}

.status.pending,
.status.processing,
.status.warning {
    background: var(--orange);
}

.status.failed,
.status.rejected,
.status.cancelled,
.status.blocked,
.status.inactive,
.status.debit,
.status.danger {
    background: var(--rose);
}

.status.info {
    background: var(--blue);
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.admin-stats div {
    padding: 16px;
    border-top: 3px solid var(--blue);
}

.admin-stats div:nth-child(2) {
    border-top-color: var(--cyan);
}

.admin-stats div:nth-child(3) {
    border-top-color: var(--orange);
}

.admin-stats div:nth-child(4) {
    border-top-color: var(--rose);
}

.admin-stats div:nth-child(5) {
    border-top-color: var(--green);
}

.admin-stats span {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-stats strong {
    display: block;
    margin-top: 5px;
    color: var(--ink);
    font-size: 25px;
    line-height: 1.05;
    font-weight: 900;
}

/* Admin dashboard redesign (resources/views/admin/dashboard.blade.php):
   order pipeline strip, quick counts, Financial + This Month panels.
   auto-fit (not a hardcoded repeat count) so the strip never needs
   recalculating if a pipeline stage is ever added or removed - see the
   .filter-bar comment above for why hand-matched grid columns are fragile. */
.pipeline-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.kpi-card.rejected .kpi-icon {
    background: var(--rose);
}

.quick-count-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.quick-count-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.quick-count-card .nav-svg {
    width: 22px;
    height: 22px;
    padding: 8px;
    box-sizing: content-box;
    border-radius: 8px;
    color: #fff;
    background: var(--violet);
    flex-shrink: 0;
}

.quick-count-card strong {
    display: block;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 900;
    color: var(--ink);
}

.quick-count-card span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.finance-rows {
    display: grid;
    gap: 12px;
}

.finance-rows > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--card-soft);
}

.finance-rows span {
    color: var(--muted);
    font-weight: 800;
    font-size: 12.5px;
}

.finance-rows strong {
    font-size: 17px;
    font-weight: 900;
    color: var(--ink);
}

.this-month-rows {
    display: grid;
    gap: 10px;
}

.this-month-rows > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--line-soft);
}

.this-month-rows > div:last-child {
    border-bottom: 0;
}

.this-month-rows .nav-svg {
    width: 18px;
    height: 18px;
    padding: 8px;
    box-sizing: content-box;
    border-radius: 8px;
    color: #fff;
    background: var(--blue);
    flex-shrink: 0;
}

.this-month-rows strong {
    display: block;
    font-size: 15px;
    font-weight: 900;
    color: var(--ink);
}

.this-month-rows span {
    display: block;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 750;
}

.supplier-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.supplier-card {
    padding: 16px;
}

.supplier-card span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.supplier-card h2 {
    margin: 8px 0;
    font-size: 17px;
    font-weight: 900;
}

.supplier-card em {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    border-radius: 999px;
    padding: 0 9px;
    color: #fff;
    background: var(--green);
    font-style: normal;
    font-weight: 900;
}

.login-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        linear-gradient(135deg, rgba(22, 119, 232, .1), transparent 38%),
        var(--page);
}

.login-card {
    width: min(440px, 100%);
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.login-brand .brand-mark {
    width: 42px;
    height: 42px;
}

.login-brand strong {
    color: var(--ink);
    font-size: 19px;
}

.login-card h1 {
    margin: 22px 0 5px;
    font-size: 25px;
    font-weight: 900;
}

.login-card p {
    margin: 0 0 16px;
    color: var(--muted);
    font-weight: 750;
}

.demo-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 14px;
}

.demo-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 6px;
    color: var(--blue-deep);
    background: #eef6ff;
    font-weight: 900;
}

.theme-dark .demo-actions a {
    background: var(--card-soft);
}

.demo-actions-single {
    grid-template-columns: 1fr;
}

.login-alt-link {
    display: block;
    margin-top: 16px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 800;
    text-align: center;
}

.login-alt-link:hover {
    color: var(--blue-deep);
}

/* Distinct "back office" identity for the admin-only login screen, so it
   reads as a different door rather than a reskinned customer form: a dark
   slate backdrop (matching the admin sidebar gradient) behind a light
   card, with a light square brand mark instead of the customer login's
   blue-cyan gradient mark. */
.admin-login-screen {
    background:
        linear-gradient(135deg, rgba(23, 32, 51, .55), transparent 45%),
        linear-gradient(180deg, var(--nav), var(--nav-2));
}

.admin-login-card .brand-mark {
    color: #101820;
    background: #f8fafc;
    box-shadow: none;
}

.theme-dark .admin-login-card .brand-mark {
    color: #0b1018;
    background: #e8eef7;
}

/* Public marketing homepage ("/" for signed-out visitors). Renders inside
   the layout's guest branch, which has no side-rail/command-bar, so it
   needs its own compact header instead of inheriting the app shell's. */
.home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 22px 20px 0;
}

.home-header .login-brand strong {
    color: var(--ink);
}

.home-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-hero {
    max-width: 780px;
    margin: 0 auto;
    padding: 56px 20px 20px;
    text-align: center;
}

.home-hero h1 {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 36px;
    line-height: 1.2;
    font-weight: 900;
}

.home-hero p {
    margin: 0 auto;
    max-width: 620px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.6;
}

.home-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.home-hero-actions .primary-btn,
.home-hero-actions .ghost-btn {
    min-height: 44px;
    padding: 0 22px;
}

.home-hero-note {
    margin-top: 16px !important;
    color: var(--quiet) !important;
    font-size: 12.5px !important;
    font-weight: 750 !important;
}

.home-section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 0;
}

.home-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-category-grid .service-shortcut {
    min-height: 0;
    padding: 22px 18px;
    text-decoration: none;
}

.home-category-count {
    margin-top: 2px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--card-soft);
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.home-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.home-feature-card {
    display: grid;
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.home-feature-card span {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #fff;
    background: var(--blue);
}

.home-feature-card strong {
    font-size: 14px;
    font-weight: 900;
}

.home-feature-card small {
    color: var(--muted);
    font-weight: 650;
    line-height: 1.5;
}

.home-announcement-list {
    display: grid;
    gap: 10px;
}

.home-announcement-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

.home-announcement-card strong {
    font-size: 13.5px;
    font-weight: 800;
}

.home-announcement-card small {
    flex: 0 0 auto;
    color: var(--quiet);
    font-weight: 750;
}

@media (max-width: 920px) {
    .home-category-grid,
    .home-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-hero h1 {
        font-size: 28px;
    }
}

@media (max-width: 640px) {
    .home-category-grid,
    .home-feature-grid {
        grid-template-columns: 1fr;
    }

    .home-header {
        flex-wrap: wrap;
    }

    .home-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .home-announcement-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

.empty-state {
    margin-top: 18px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: var(--card);
    font-weight: 850;
    box-shadow: var(--shadow-soft);
}

.site-footer {
    padding: 14px 18px 18px;
    color: var(--quiet);
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

nav[role="navigation"] {
    margin-top: 14px;
}

nav[role="navigation"] svg {
    width: 18px;
    height: 18px;
}

.api-title-row {
    align-items: center;
}

.api-top-action,
.api-add-square {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--card);
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    box-shadow: var(--shadow-soft);
}

.api-top-action:hover,
.api-add-square:hover,
.copy-chip:hover,
.api-submit-btn:hover {
    transform: translateY(-1px);
}

.api-console-panel,
.api-cron-board {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.api-console-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
}

.api-console-head h2 {
    margin: 0;
    font-size: 18px;
}

.api-console-tools {
    display: grid;
    grid-template-columns: minmax(220px, 280px) auto;
    gap: 8px;
}

.api-table-wrap,
.api-service-table-wrap {
    overflow: auto;
}

.api-table {
    min-width: 860px;
}

.api-table th,
.api-table td {
    height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: middle;
}

.api-table th {
    color: var(--ink);
    background: var(--card-soft);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.api-table tr {
    transition: background-color .16s ease;
}

.api-table tbody tr:hover {
    background: rgba(22, 119, 232, .05);
}

.api-name-link {
    display: inline-flex;
    color: var(--ink);
    font-weight: 900;
}

.api-row-note {
    display: block;
    margin-top: 3px;
    color: var(--green);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.api-url-cell {
    max-width: 340px;
}

.empty-row {
    color: var(--muted);
    text-align: center !important;
}

.api-cron-board {
    margin-top: 16px;
    overflow: hidden;
}

.api-cron-tabs {
    display: flex;
    gap: 10px;
    padding: 14px 18px 0;
}

.api-cron-tabs button {
    height: 42px;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0 16px;
    color: var(--ink);
    background: transparent;
    font-weight: 850;
}

.api-cron-tabs button.active {
    border-color: var(--ink);
}

.api-cron-help {
    display: grid;
    gap: 5px;
    padding: 18px;
    background: var(--card-soft);
}

.api-cron-help strong {
    font-size: 15px;
}

.api-cron-help span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.api-cron-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 48px;
    padding: 8px 18px;
    border-top: 1px solid var(--line-soft);
}

.api-cron-row.head {
    min-height: 42px;
    color: var(--ink);
    font-size: 12px;
    text-transform: uppercase;
}

.api-cron-row code {
    overflow: hidden;
    color: var(--ink);
    font-family: inherit;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-cron-row code strong {
    color: var(--muted);
    font-weight: 900;
}

.copy-chip {
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    padding: 0 12px;
    color: #fff;
    background: #101820;
    font-weight: 900;
    box-shadow: var(--shadow-soft);
}

.api-overlay,
.api-drawer-layer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
}

.api-scrim,
.api-drawer-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .48);
}

.api-modal,
.api-drawer {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}

.api-modal {
    width: min(1120px, calc(100vw - 36px));
}

.api-modal-head,
.api-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line-soft);
}

.api-modal-head h2,
.api-drawer-head h2 {
    margin: 0;
    font-size: 18px;
}

.api-modal-head a,
.api-drawer-head a {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--muted);
    font-size: 22px;
    font-weight: 500;
}

.api-modal-body {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(320px, 1fr);
    gap: 34px;
    padding: 26px;
}

.api-form-grid,
.api-drawer-fields {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 18px 22px;
    align-items: center;
}

.api-form-grid label,
.api-drawer-fields label {
    color: var(--ink);
    font-size: 15px;
    font-weight: 760;
}

.api-form-grid input,
.api-form-grid select,
.api-drawer-fields input,
.api-drawer-fields select {
    height: 48px;
}

.api-feature-box {
    display: grid;
    align-content: start;
    gap: 13px;
}

.api-feature-box h3 {
    margin: 0;
    font-size: 18px;
    text-transform: uppercase;
}

.api-feature-box p {
    margin: 0 0 8px;
    font-size: 15px;
}

.api-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 750;
}

.api-check input,
.api-supports input,
.api-service-option input,
.api-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
}

.api-supports {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 14px;
    align-items: center;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-weight: 850;
}

.api-supports.inline {
    margin: 18px 0;
}

.api-modal-foot {
    display: flex;
    justify-content: flex-end;
    padding: 20px 26px;
    border-top: 1px solid var(--line-soft);
}

.api-submit-btn {
    min-height: 44px;
    border: 0;
    border-radius: 7px;
    padding: 0 20px;
    color: #fff;
    background: #101820;
    font-weight: 900;
    box-shadow: var(--shadow-soft);
}

.api-drawer-layer {
    place-items: stretch end;
}

.api-drawer {
    width: min(1320px, calc(100vw - 280px));
    height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}

.api-drawer-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.api-drawer-tabs {
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid var(--line-soft);
    background: var(--card);
}

.api-drawer-tabs a {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    font-size: 15px;
    font-weight: 780;
}

.api-drawer-tabs a:hover,
.api-drawer-tabs a.active {
    background: var(--card-soft);
    font-weight: 900;
}

.api-drawer-main {
    min-width: 0;
    min-height: 0;
    padding: 26px;
    overflow: auto;
}

.api-drawer-form {
    max-width: 980px;
}

.api-pricing-note {
    display: grid;
    gap: 4px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-soft);
}

.api-pricing-note strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 900;
}

.api-pricing-note span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 760;
}

.api-money-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
}

.api-money-input input {
    border-radius: 6px 0 0 6px;
}

.api-money-input span {
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: var(--card-soft);
    font-size: 16px;
    font-weight: 900;
}

.api-advanced-json {
    margin: 16px 0;
}

.api-advanced-json summary {
    cursor: pointer;
    color: var(--blue-deep);
    font-weight: 900;
}

.api-drawer-cron {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-soft);
}

.api-drawer-cron h3 {
    margin: 0;
    font-size: 16px;
}

.api-cron-copy-row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.api-cron-copy-row span {
    color: var(--muted);
    font-weight: 850;
}

.api-cron-copy-row input {
    font-size: 12px;
}

.api-form-save {
    margin-top: 18px;
}

.api-toggle-list {
    display: grid;
    gap: 0;
}

.api-switch-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 20px;
    align-items: center;
    min-height: 70px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
    font-weight: 780;
}

.api-switch-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.api-switch-row i {
    position: relative;
    width: 64px;
    height: 34px;
    border-radius: 999px;
    background: #101820;
    transition: background-color .16s ease;
}

.api-switch-row i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-soft);
    transition: transform .16s ease;
}

.api-switch-row input:checked + i {
    background: var(--green);
}

.api-switch-row input:checked + i::after {
    transform: translateX(30px);
}

.api-service-pane {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
}

.api-service-toolbar {
    display: grid;
    grid-template-columns: auto auto auto minmax(260px, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: var(--shadow-soft);
}

.api-service-toolbar form {
    margin: 0;
}

.api-service-toolbar .api-submit-btn,
.api-service-toolbar .ghost-btn,
.api-selected-add-btn,
.api-group-add-form .ghost-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 10px;
    padding-inline: 22px;
    line-height: 1;
    white-space: nowrap;
    font-weight: 950;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.api-service-toolbar .api-submit-btn {
    background: #101820;
    box-shadow: 0 12px 26px rgba(16, 24, 32, .15);
}

.api-service-toolbar .api-submit-btn::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(24, 166, 99, .14);
}

.api-service-toolbar .api-submit-btn:hover {
    background: #0b1219;
    box-shadow: 0 14px 28px rgba(16, 24, 32, .2);
    transform: translateY(-1px);
}

.api-service-toolbar .ghost-btn,
.api-selected-add-btn,
.api-group-add-form .ghost-btn {
    border-color: rgba(22, 119, 232, .18);
    color: var(--blue);
    background: #f7fbff;
    box-shadow: 0 10px 22px rgba(22, 119, 232, .07);
}

.api-service-toolbar .ghost-btn::before {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    color: #fff;
    background: var(--blue);
    font-size: 15px;
    font-weight: 950;
    line-height: 1;
}

.api-service-toolbar .ghost-btn:hover::before {
    color: var(--blue);
    background: #fff;
}

.api-service-toolbar .ghost-btn:hover,
.api-selected-add-btn:not(:disabled):hover,
.api-group-add-form .ghost-btn:hover {
    color: #fff;
    background: var(--blue);
    box-shadow: 0 12px 24px rgba(22, 119, 232, .18);
    transform: translateY(-1px);
}

.api-selected-add-btn {
    border: 1px solid rgba(22, 119, 232, .18);
}

.api-selected-add-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.api-service-picker {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(260px, .72fr);
    gap: 12px;
    align-items: center;
}

.api-service-picker > input[type="search"] {
    width: 100%;
    min-width: 0;
}

.api-service-table-wrap {
    min-height: 0;
    max-height: calc(100dvh - 250px);
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.api-group-add-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.api-group-add-form select {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.api-native-group-select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.api-group-combobox {
    position: relative;
    min-width: 0;
}

.api-group-combobox-toggle {
    position: relative;
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0 42px 0 14px;
    color: var(--ink);
    background: #fff;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.api-group-combobox-toggle::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #6b7788;
    border-bottom: 2px solid #6b7788;
    transform: translateY(-65%) rotate(45deg);
}

.api-group-combobox-toggle:hover,
.api-group-combobox-toggle[aria-expanded="true"] {
    border-color: rgba(22, 119, 232, .42);
    box-shadow: 0 12px 24px rgba(22, 119, 232, .1);
}

.api-group-combobox-toggle span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-group-combobox-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    overflow: hidden;
    border: 1px solid rgba(22, 119, 232, .22);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 50px rgba(15, 33, 61, .2);
}

.api-group-combobox-search {
    width: calc(100% - 20px);
    min-height: 42px;
    margin: 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 0 12px;
    color: var(--ink);
    background: var(--card-soft);
    font-weight: 800;
}

.api-group-combobox-search:focus {
    border-color: rgba(22, 119, 232, .5);
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .12);
}

.api-group-combobox-list {
    max-height: min(430px, 52dvh);
    overflow-y: auto;
    padding: 4px 8px 8px;
}

.api-group-combobox-option {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: transparent;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-group-combobox-option:hover,
.api-group-combobox-option[aria-selected="true"] {
    color: #fff;
    background: var(--blue);
}

.api-group-combobox-empty {
    padding: 14px 12px 16px;
    color: var(--muted);
    font-weight: 800;
}

.api-service-type-jumps {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    justify-self: end;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #edf5ff;
}

.api-service-type-jumps button {
    min-height: 36px;
    border: 0;
    border-radius: 7px;
    padding: 0 13px;
    color: #68768a;
    background: transparent;
    font-weight: 950;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px transparent;
    transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.api-service-type-jumps button:hover,
.api-service-type-jumps button.is-active {
    color: #fff;
    background: var(--blue);
    box-shadow: 0 10px 22px rgba(22, 119, 232, .18);
    transform: translateY(-1px);
}

.api-service-type-jumps span {
    margin-left: 5px;
    opacity: .78;
}

.api-service-option {
    justify-self: start;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-soft);
    color: var(--muted);
}

.api-service-option input[type="checkbox"] {
    appearance: none;
    flex: 0 0 22px;
    display: inline-grid;
    place-items: center;
    width: 22px;
    min-width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #8da0b4;
    border-radius: 6px;
    background: var(--card);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.api-service-option input[type="checkbox"]::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    opacity: 0;
    transform: rotate(-45deg) translateY(-1px);
}

.api-service-option input[type="checkbox"]:checked {
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 8px 18px rgba(22, 119, 232, .18);
}

.api-service-option input[type="checkbox"]:checked::after {
    opacity: 1;
}

.api-selection-cell {
    width: 58px;
    text-align: center;
}

.api-selection-cell input {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #8da0b4;
    border-radius: 7px;
    background: var(--card);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.api-selection-cell input::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    opacity: 0;
    transform: rotate(-45deg) translateY(-1px);
}

.api-selection-cell input:checked,
.api-selection-cell input:indeterminate {
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 8px 18px rgba(22, 119, 232, .18);
}

.api-selection-cell input:checked::after {
    opacity: 1;
}

.api-selection-cell input:indeterminate::after {
    width: 10px;
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    opacity: 1;
    transform: none;
}

.api-selection-cell input:disabled {
    opacity: .32;
    cursor: not-allowed;
    box-shadow: none;
}

.api-added-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 6px;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 900;
}

.api-added-pill.yes {
    color: var(--green);
    background: rgba(24, 166, 99, .12);
}

.api-added-pill.add {
    border: 0;
    cursor: pointer;
    color: var(--rose);
    background: rgba(231, 72, 99, .12);
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.api-added-pill.add:hover {
    color: #fff;
    background: var(--rose);
    transform: translateY(-1px);
}

.api-service-group-row td {
    height: auto;
    padding: 14px 16px;
    background: linear-gradient(90deg, rgba(22, 119, 232, .08), rgba(22, 119, 232, .025));
}

.api-service-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.api-service-group-head strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
}

.api-service-group-head span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.api-delete-box {
    max-width: 620px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-soft);
}

.api-delete-box h3 {
    margin: 0 0 8px;
}

.api-delete-box p {
    margin: 0 0 16px;
    color: var(--muted);
    font-weight: 750;
}

.api-delete-box .danger-btn {
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    padding: 0 18px;
    color: #fff !important;
    background: var(--rose);
    font-weight: 900;
    box-shadow: var(--shadow-soft);
}

@media (max-width: 1240px) {
    .app-frame {
        padding-left: 220px;
    }

    .side-rail {
        width: 220px;
    }

    .app-frame.is-admin-shell {
        padding-left: 284px;
    }

    .is-admin-shell .side-rail {
        width: 284px;
    }

    .command-bar {
        grid-template-columns: auto minmax(240px, 1fr) auto;
    }

    .account-pill {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .kpi-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-main {
        grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr);
    }

    .service-launcher-row {
        grid-column: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-grid,
    .supplier-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }

    .admin-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .app-frame {
        padding-left: 0;
    }

    .api-console-head,
    .api-console-tools,
    .api-cron-copy-row,
    .api-service-toolbar,
    .api-service-picker {
        grid-template-columns: 1fr;
    }

    .api-group-add-form {
        grid-template-columns: 1fr;
    }

    .api-modal-body {
        grid-template-columns: 1fr;
    }

    .api-drawer {
        width: 100vw;
    }

    .api-drawer-body {
        grid-template-columns: 1fr;
    }

    .api-drawer-tabs {
        display: flex;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .api-drawer-tabs a {
        flex: 0 0 auto;
        border-right: 1px solid var(--line-soft);
    }

    .side-rail {
        position: static;
        width: auto;
        height: auto;
        grid-template-rows: auto auto;
        gap: 12px;
    }

    /* .side-nav's layout (flex column, full-width rows) now comes from the
       always-on .is-admin-shell / .is-customer-shell rules above, so every
       nav link keeps its normal icon + label grid on mobile instead of the
       cramped auto-sized columns an earlier horizontal-strip design left
       behind here. */

    .nav-flyout {
        position: absolute;
        left: 0;
        top: calc(100% + 6px);
        z-index: 120;
        width: 230px;
        max-height: none;
        margin: 0;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 8px;
        background: var(--nav-2);
        box-shadow: 0 18px 34px rgba(0, 0, 0, .22);
    }

    .command-bar {
        position: static;
        grid-template-columns: 1fr;
    }

    .workspace {
        grid-column: auto;
    }

    .quick-actions,
    .account-pill {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .notice-row,
    .dashboard-main,
    .fund-grid,
    .two-col,
    .module-grid,
    .three-col {
        grid-template-columns: 1fr;
    }

    .kpi-strip,
    .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wallet-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-launcher-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-bar form,
    .filter-bar .check-label {
        flex-basis: 100%;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 12px;
    }

    .api-top-action {
        display: none;
    }

    .api-modal {
        width: calc(100vw - 20px);
    }

    .api-modal-head,
    .api-drawer-head {
        padding: 0 14px;
    }

    .api-modal-body,
    .api-modal-foot,
    .api-drawer-main {
        padding: 16px;
    }

    .api-form-grid,
    .api-drawer-fields {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .api-cron-row {
        grid-template-columns: 1fr;
    }

    .page-shell {
        padding: 14px;
    }

    .page-title h1 {
        font-size: 21px;
    }

    .notice-card,
    .wallet-panel,
    .service-order-row,
    .service-order-actions,
    .top-search,
    .checker-search,
    .quick-lookup form {
        grid-template-columns: 1fr;
    }

    .notice-card a {
        grid-row: auto;
        grid-column: auto;
        justify-content: center;
    }

    .kpi-strip,
    .wallet-row,
    .service-grid,
    .service-launcher-row,
    .checker-result,
    .dynamic-fields,
    .supplier-grid,
    .inline-fields,
    .check-grid,
    .button-row {
        grid-template-columns: 1fr;
    }

    .filter-bar form,
    .filter-bar .check-label {
        flex-basis: 100%;
    }

    .wallet-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-order-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .service-card {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .service-card-top {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .service-card-top .open-chip {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .service-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .demo-actions {
        grid-template-columns: 1fr;
    }
}

/* Final override layer: keep these at the end so the admin service UI stays stable.
   Scoped to .is-admin-shell only - the customer shell switched to a top navbar
   (see .customer-topnav-shell) and has no sidebar to reserve this space for. */
@media (min-width: 921px) {
    .app-frame.is-admin-shell {
        padding-left: 246px !important;
    }

    .side-rail {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        height: 100vh !important;
        overflow: visible !important;
    }

    .side-nav {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
}

.side-rail .wallet-row,
.side-rail .wallet-panel,
.side-rail .wallet-card,
.side-rail .rail-wallet,
.side-rail .wallet-balance,
.side-rail .balance-card,
.side-rail [data-wallet-card] {
    display: none !important;
}

.is-admin-shell .side-nav > * {
    order: 20;
}

.is-admin-shell .side-nav > a:first-of-type {
    order: 1;
}

.is-admin-shell .admin-services-stack {
    order: 2 !important;
}

.is-admin-shell .admin-orders-stack {
    order: 3 !important;
}

.is-admin-shell .admin-groups-stack {
    order: 4 !important;
}

.is-admin-shell .admin-nav-divider {
    order: 5 !important;
}

.nav-stack > .nav-flyout,
.nav-stack:hover > .nav-flyout,
.nav-stack:focus-within > .nav-flyout {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.nav-stack.flyout-open > .nav-flyout,
.nav-stack.flyout-open:hover > .nav-flyout,
.nav-stack.flyout-open:focus-within > .nav-flyout {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

.nav-stack:hover > .nav-parent,
.nav-stack:focus-within > .nav-parent,
.is-admin-shell .admin-nav-stack:hover > .nav-parent,
.is-admin-shell .admin-nav-stack:focus-within > .nav-parent {
    background: transparent !important;
}

.nav-stack.flyout-open > .nav-parent,
.nav-stack.active > .nav-parent,
.is-admin-shell .admin-nav-stack.flyout-open > .nav-parent,
.is-admin-shell .admin-nav-stack.active > .nav-parent {
    background: rgba(31, 122, 224, .12) !important;
}

.is-admin-shell .admin-submenu {
    max-height: calc(100vh - 28px);
    overflow-y: auto;
}

.service-sync-card {
    padding: 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: var(--card) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
}

.service-sync-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 4px 4px 16px !important;
    border-bottom: 1px solid var(--line) !important;
}

.service-command-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

.service-command {
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 18px !important;
    border: 1px solid #d8e3f0 !important;
    border-radius: 10px !important;
    background: #f8fbff !important;
    color: #0756b6 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .05) !important;
}

.service-command.primary {
    background: #101820 !important;
    color: #fff !important;
    border-color: #101820 !important;
}

.service-command.search {
    background: #1f7ae0 !important;
    color: #fff !important;
    border-color: #1f7ae0 !important;
}

.service-type-segments {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px !important;
    border: 1px solid #d7e4f4 !important;
    border-radius: 12px !important;
    background: #edf5ff !important;
}

.service-type-segment {
    min-width: 126px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    color: #68778c !important;
    text-decoration: none !important;
    font-weight: 900 !important;
}

.service-type-segment.active {
    background: #1f7ae0 !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(31, 122, 224, .28) !important;
}

.service-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(300px, 1fr) auto minmax(300px, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding-top: 14px !important;
}

.service-group-select select,
.service-global-search input,
.move-group-panel select {
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 16px !important;
    border: 1px solid #d8e3f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
}

.create-local-group-line {
    width: max-content !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 12px !important;
    padding: 10px 14px !important;
    border: 1px solid #d8e3f0 !important;
    border-radius: 10px !important;
    background: #f8fbff !important;
    color: #627084 !important;
    font-weight: 800 !important;
}

.service-selection-bar[hidden] {
    display: none !important;
}

.service-selection-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    background: #101820 !important;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .14) !important;
}

.selected-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.bulk-icon-btn {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 999px !important;
    padding: 0 13px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .06) !important;
    font-weight: 800 !important;
}

.bulk-icon-btn.add {
    background: #1f7ae0 !important;
    border-color: #1f7ae0 !important;
}

.bulk-icon-btn.success {
    background: #17a66a !important;
    border-color: #17a66a !important;
}

.bulk-icon-btn.warning {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
}

.bulk-icon-btn.danger {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
}

.service-catalog-table-pro {
    border: 1px solid #dbe4ef !important;
    border-radius: 14px !important;
    background: var(--card) !important;
    overflow: auto !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .07) !important;
}

.service-catalog-table-pro table {
    width: 100% !important;
    min-width: 1160px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 13px !important;
}

.service-catalog-table-pro th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #f6f9fd !important;
    color: #182234 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #e6edf5 !important;
}

.service-catalog-table-pro td {
    padding: 13px 16px !important;
    border-bottom: 1px solid #e8eef5 !important;
    color: #182234 !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
}

.service-group-row td {
    background: linear-gradient(90deg, #edf5ff 0%, #f8fbff 100%) !important;
}

.add-group-pill,
.add-status-pill {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 9px !important;
    padding: 0 12px !important;
    background: #ffe8ef !important;
    color: #ef466f !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

/* .row-action-btn is deliberately excluded here: it is a neutral action
   link (Edit / Download / Fund), not an "add to catalog" pill, and this
   block's pink !important used to silently win over its real blue color
   rule below just because this block loads later in the file. */
.row-action-btn {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 9px !important;
    padding: 0 12px !important;
    background: #edf5ff !important;
    color: #0b63c7 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.add-status-pill.mapped {
    background: #e8f7ef !important;
    color: #18a667 !important;
}

.service-type-badge {
    min-width: 66px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #eaf2ff !important;
    color: #1468ca !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.service-type-badge.server {
    background: #f1edff !important;
    color: #6358e8 !important;
}

.service-type-badge.remote {
    background: #e8fbff !important;
    color: #0798b7 !important;
}

.service-type-badge.file {
    background: #fff3e0 !important;
    color: #b26a00 !important;
}

.tiny-check {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border: 1.6px solid #91a0b2 !important;
    border-radius: 5px !important;
    background: #fff !important;
    display: inline-grid !important;
    place-content: center !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

.tiny-check::after {
    content: "" !important;
    width: 11px !important;
    height: 7px !important;
    border: solid #fff !important;
    border-width: 0 0 2px 2px !important;
    transform: rotate(-45deg) scale(0) !important;
    transform-origin: center !important;
}

.tiny-check:checked {
    background: #1f7ae0 !important;
    border-color: #1f7ae0 !important;
}

.tiny-check:checked::after {
    transform: rotate(-45deg) scale(1) !important;
}

.tiny-check:indeterminate {
    background: #101820 !important;
    border-color: #101820 !important;
}

.tiny-check:indeterminate::after {
    width: 10px !important;
    height: 2px !important;
    border: 0 !important;
    background: #fff !important;
    transform: none !important;
}

.theme-dark .service-sync-card,
.theme-dark .service-catalog-table-pro,
.theme-dark .service-bulk-dialog {
    background: #111827 !important;
    border-color: #253244 !important;
}

.theme-dark .service-command,
.theme-dark .service-group-select select,
.theme-dark .service-global-search input,
.theme-dark .move-group-panel select,
.theme-dark .create-local-group-line {
    background: #0f1724 !important;
    border-color: #2b3a4e !important;
    color: #d8e5f7 !important;
}

.theme-dark .service-type-segments,
.theme-dark .service-catalog-table-pro th,
.theme-dark .service-group-row td {
    background: #172234 !important;
}

.theme-dark .service-catalog-table-pro td,
.theme-dark .service-catalog-table-pro th,
.theme-dark .service-service-cell {
    color: #e5edf8 !important;
}

@media (max-width: 1180px) {
    .service-sync-toolbar,
    .service-filter-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .service-type-segments,
    .service-command,
    .service-filter-grid .service-command {
        width: 100% !important;
    }
}

/* Final admin services polish */
.service-admin-workbench {
    max-width: none !important;
}

.service-sync-card {
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, .34) !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
}

.service-sync-toolbar {
    align-items: center !important;
    gap: 14px !important;
}

.service-command-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

.service-command {
    min-height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(37, 99, 235, .18) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}

.service-command:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .11) !important;
    border-color: rgba(37, 99, 235, .34) !important;
}

.service-command.primary {
    background: #101820 !important;
    color: #fff !important;
    border-color: #101820 !important;
}

.service-command.primary .service-command-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #17b26a !important;
    box-shadow: 0 0 0 4px rgba(23, 178, 106, .16) !important;
}

.service-type-segments {
    justify-self: end !important;
    align-self: center !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(37, 99, 235, .16) !important;
    background: linear-gradient(180deg, #eef6ff 0%, #e8f1fb 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 24px rgba(37, 99, 235, .06) !important;
}

.service-type-segment {
    min-height: 44px !important;
    border-radius: 10px !important;
    padding: 0 20px !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.service-type-segment:hover {
    transform: translateY(-1px) !important;
}

.service-type-segment.active {
    box-shadow: 0 12px 24px rgba(37, 99, 235, .24) !important;
}

.service-filter-grid {
    grid-template-columns: minmax(310px, 1.05fr) auto minmax(320px, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
}

.service-group-select,
.service-global-search {
    min-width: 0 !important;
}

.service-group-select select,
.service-global-search input {
    min-height: 48px !important;
    border-radius: 12px !important;
    border-color: rgba(148, 163, 184, .4) !important;
    background: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

.service-filter-grid .service-command {
    min-height: 48px !important;
    white-space: nowrap !important;
}

.create-local-group-line {
    width: max-content !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    background: #f8fbff !important;
    border-color: rgba(148, 163, 184, .32) !important;
}

.service-selection-bar {
    border-radius: 14px !important;
    border: 1px solid rgba(15, 23, 42, .86) !important;
    background: #101820 !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .16) !important;
}

.bulk-icon-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    display: inline-grid !important;
    place-items: center !important;
    transition: transform .16s ease, background .16s ease, border-color .16s ease !important;
}

.bulk-icon-btn:hover {
    transform: translateY(-1px) !important;
}

.service-catalog-table-pro {
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, .34) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
}

.service-catalog-table-pro table {
    min-width: 1180px !important;
}

.service-catalog-table-pro th,
.service-catalog-table-pro td {
    vertical-align: middle !important;
}

.service-catalog-table-pro .select-col {
    width: 64px !important;
    min-width: 64px !important;
    text-align: center !important;
}

.service-catalog-table-pro .tiny-check {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
    border: 1.5px solid rgba(100, 116, 139, .72) !important;
    background: #fff !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

.service-catalog-table-pro .tiny-check:checked {
    background: #1d7af0 !important;
    border-color: #1d7af0 !important;
    box-shadow: inset 0 0 0 4px #fff !important;
}

.service-catalog-table-pro .service-row:hover td {
    background: #fbfdff !important;
}

.service-catalog-table-pro .service-row.is-selected td {
    background: #eef6ff !important;
}

.service-group-row td {
    background: linear-gradient(90deg, #eef6ff 0%, #f8fbff 100%) !important;
}

.service-group-title {
    display: grid !important;
    gap: 4px !important;
}

/* Admin Services List reuses the .service-group-title class from the
   customer service-browse page, but with different markup (a longer
   "IMEI / 3 services" descriptor instead of a short "IMEI" type badge).
   Without this, the customer page's small colored badge style (white
   text on --rose) applied here too, and because this container is a
   grid, the span stretched to the full row width - a solid red bar
   instead of a small muted label. Reset it to a plain inline label. */
.service-group-title span {
    display: inline !important;
    justify-self: start !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: none !important;
    color: #66758a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.service-service-cell {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-width: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
}

.service-service-cell span:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.service-thumb-mini,
.service-thumb-fallback {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .1) !important;
}

.row-action-btn,
.add-status-pill,
.add-group-pill {
    border-radius: 10px !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.row-action-btn:hover,
.add-status-pill:hover,
.add-group-pill:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 20px rgba(236, 72, 112, .18) !important;
}

@media (min-width: 921px) {
    .app-frame.is-admin-shell {
        padding-left: 246px !important;
    }

    .side-rail {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        height: 100dvh !important;
        overflow: visible !important;
        transform: none !important;
        will-change: auto !important;
    }

    .side-nav {
        overflow: visible !important;
    }

    .nav-stack {
        position: relative !important;
    }

    .nav-stack > .nav-flyout,
    .nav-stack:hover > .nav-flyout,
    .nav-stack:focus-within > .nav-flyout {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(-4px) !important;
    }

    .nav-stack.flyout-open > .nav-flyout {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }
}

.theme-dark .service-sync-card,
.theme-dark .service-catalog-table-pro {
    background: #111827 !important;
    border-color: rgba(148, 163, 184, .22) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
}

.theme-dark .service-type-segments {
    background: #172033 !important;
    border-color: rgba(96, 165, 250, .24) !important;
}

.theme-dark .service-group-select select,
.theme-dark .service-global-search input,
.theme-dark .create-local-group-line {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-color: rgba(148, 163, 184, .26) !important;
}

.theme-dark .service-catalog-table-pro th,
.theme-dark .service-catalog-table-pro td {
    border-color: rgba(148, 163, 184, .16) !important;
}

.theme-dark .service-group-row td {
    background: linear-gradient(90deg, rgba(29, 122, 240, .14) 0%, rgba(17, 24, 39, .9) 100%) !important;
}

.theme-dark .service-catalog-table-pro .service-row:hover td,
.theme-dark .service-catalog-table-pro .service-row.is-selected td {
    background: rgba(29, 122, 240, .12) !important;
}

.theme-dark .service-catalog-table-pro .tiny-check {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, .5) !important;
}

.theme-dark .service-catalog-table-pro .tiny-check:checked {
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
    box-shadow: inset 0 0 0 4px #0f172a !important;
}

@media (max-width: 980px) {
    .service-filter-grid {
        grid-template-columns: 1fr !important;
    }

    .service-sync-toolbar {
        grid-template-columns: 1fr !important;
    }

    .service-type-segments {
        justify-self: stretch !important;
        overflow-x: auto !important;
    }
}

/* Final admin services polish: stable sidebar, visible selection, compact professional controls. */
@media (min-width: 921px) {
    body {
        overflow-x: hidden !important;
    }

    .app-frame.is-admin-shell {
        display: block !important;
        min-height: 100vh !important;
        padding-left: 246px !important;
    }

    .side-rail {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 246px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: visible !important;
        transform: none !important;
        will-change: auto !important;
        z-index: 500 !important;
    }

    .side-nav {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .workspace {
        width: 100% !important;
        min-width: 0 !important;
    }

    .is-admin-shell .admin-services-stack {
        order: 2 !important;
    }

    .is-admin-shell .admin-orders-stack {
        order: 3 !important;
    }

    .is-admin-shell .admin-groups-stack {
        order: 4 !important;
    }

    .is-admin-shell .admin-nav-divider {
        order: 5 !important;
    }

    .nav-stack {
        position: relative !important;
    }

    .nav-stack > .nav-flyout,
    .nav-stack:hover > .nav-flyout,
    .nav-stack:focus-within > .nav-flyout {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(-6px) !important;
    }

    .nav-stack.flyout-open > .nav-flyout {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }
}

.side-rail .wallet-row,
.side-rail .wallet-panel,
.side-rail .wallet-card,
.side-rail .rail-wallet,
.side-rail .wallet-balance,
.side-rail .customer-wallet,
.side-rail .sidebar-wallet,
.side-rail [data-wallet-card],
.side-rail [data-sidebar-wallet] {
    display: none !important;
}

.nav-parent {
    cursor: pointer !important;
}

.nav-chevron {
    display: inline-grid !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: auto !important;
    place-items: center !important;
    color: #64748b !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: transform .18s ease, color .18s ease !important;
}

.nav-stack.flyout-open > .nav-parent .nav-chevron {
    color: #1d7af0 !important;
    transform: rotate(90deg) !important;
}

.service-sync-toolbar {
    align-items: center !important;
}

.service-command-group {
    gap: 10px !important;
}

.service-command {
    min-height: 50px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

.service-command span {
    white-space: nowrap !important;
}

.service-command.primary {
    color: #fff !important;
    background: linear-gradient(135deg, #0f172a, #101820) !important;
    border-color: rgba(15, 23, 42, .9) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .18) !important;
}

.service-command:not(.primary) {
    color: #0f4fb5 !important;
    background: linear-gradient(180deg, #fff, #f8fbff) !important;
}

.service-command.search {
    color: #fff !important;
    background: #1d7af0 !important;
    border-color: #1d7af0 !important;
}

.service-command.clear {
    color: #64748b !important;
    background: #fff !important;
}

.service-type-segments {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(118px, 1fr)) !important;
    align-items: center !important;
}

.service-type-segment {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 48px !important;
    font-weight: 800 !important;
}

.service-filter-grid {
    grid-template-columns: minmax(360px, .95fr) auto minmax(340px, 1fr) auto !important;
    gap: 12px !important;
}

.service-selection-bar[hidden] {
    display: none !important;
}

.service-selection-bar {
    position: sticky !important;
    top: 10px !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px !important;
}

.service-selection-bar .bulk-icon-btn.add,
.selected-actions .bulk-icon-btn.add {
    display: inline-grid !important;
    color: #1d4ed8 !important;
    background: #e8f2ff !important;
    border-color: rgba(29, 78, 216, .26) !important;
}

.bulk-icon-btn span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.service-catalog-table-pro {
    overflow: auto !important;
}

.service-catalog-table-pro .tiny-check,
.create-local-group-line .tiny-check {
    position: relative !important;
    display: inline-grid !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    place-items: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #fff !important;
    border: 1.5px solid rgba(100, 116, 139, .75) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04) !important;
}

.service-catalog-table-pro .tiny-check::after,
.create-local-group-line .tiny-check::after {
    content: "" !important;
    width: 6px !important;
    height: 11px !important;
    margin-top: -2px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    opacity: 0 !important;
    transform: rotate(45deg) scale(.65) !important;
    transition: opacity .12s ease, transform .12s ease !important;
}

.service-catalog-table-pro .tiny-check:checked,
.create-local-group-line .tiny-check:checked {
    background: #1d7af0 !important;
    border-color: #1d7af0 !important;
    box-shadow: 0 10px 18px rgba(29, 122, 240, .2) !important;
}

.service-catalog-table-pro .tiny-check:checked::after,
.create-local-group-line .tiny-check:checked::after {
    opacity: 1 !important;
    transform: rotate(45deg) scale(1) !important;
}

.service-catalog-table-pro .tiny-check:indeterminate {
    background: #1d7af0 !important;
    border-color: #1d7af0 !important;
}

.service-catalog-table-pro .tiny-check:indeterminate::after {
    width: 10px !important;
    height: 2px !important;
    margin-top: 0 !important;
    background: #fff !important;
    border: 0 !important;
    opacity: 1 !important;
    transform: none !important;
}

.service-catalog-table-pro .service-row.is-selected td {
    background: #edf6ff !important;
}

.add-status-pill:not(.mapped),
.add-group-pill {
    color: #e54569 !important;
    background: #fde7ee !important;
    border: 0 !important;
    font-weight: 800 !important;
}

.add-status-pill.mapped {
    color: #16a365 !important;
    background: #e8f8ef !important;
}

.service-bulk-dialog {
    max-height: min(720px, calc(100vh - 48px)) !important;
    overflow: auto !important;
}

.theme-dark .service-command:not(.primary) {
    color: #93c5fd !important;
    background: #111827 !important;
    border-color: rgba(148, 163, 184, .22) !important;
}

.theme-dark .service-command.search {
    color: #fff !important;
    background: #2563eb !important;
    border-color: #2563eb !important;
}

.theme-dark .service-catalog-table-pro .tiny-check,
.theme-dark .create-local-group-line .tiny-check {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, .55) !important;
}

.theme-dark .service-catalog-table-pro .tiny-check:checked,
.theme-dark .create-local-group-line .tiny-check:checked,
.theme-dark .service-catalog-table-pro .tiny-check:indeterminate {
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
}

.theme-dark .service-catalog-table-pro .tiny-check:checked::after,
.theme-dark .create-local-group-line .tiny-check:checked::after {
    border-color: #06111f !important;
}

.theme-dark .service-catalog-table-pro .tiny-check:indeterminate::after {
    background: #06111f !important;
}

.theme-dark .service-catalog-table-pro .service-row.is-selected td {
    background: rgba(56, 189, 248, .12) !important;
}

.theme-dark .service-selection-bar .bulk-icon-btn.add,
.theme-dark .selected-actions .bulk-icon-btn.add {
    color: #67e8f9 !important;
    background: rgba(56, 189, 248, .14) !important;
    border-color: rgba(56, 189, 248, .28) !important;
}

@media (max-width: 1180px) {
    .service-filter-grid,
    .service-sync-toolbar {
        grid-template-columns: 1fr !important;
    }

    .service-type-segments {
        justify-self: stretch !important;
    }
}

/* Services list completion pass */
.service-sync-card {
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, .28) !important;
    background: linear-gradient(180deg, #fff, #fbfdff) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .07) !important;
}

.service-sync-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.service-command {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    border: 1px solid rgba(148, 163, 184, .28) !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}

.service-command svg {
    width: 18px !important;
    height: 18px !important;
}

.service-command:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .11) !important;
}

.service-command.primary .service-command-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .12) !important;
}

.service-command.group-add {
    min-width: 190px !important;
}

.service-type-segments {
    padding: 8px !important;
    border-radius: 18px !important;
    background: #edf5ff !important;
    border: 1px solid rgba(29, 122, 240, .14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75) !important;
}

.service-type-segment {
    border-radius: 13px !important;
    color: #697789 !important;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.service-type-segment:hover {
    color: #0f4fb5 !important;
    background: rgba(255, 255, 255, .72) !important;
}

.service-type-segment.active {
    color: #fff !important;
    background: linear-gradient(135deg, #1d7af0, #1967d2) !important;
    box-shadow: 0 14px 24px rgba(29, 122, 240, .28) !important;
}

.service-filter-grid {
    align-items: center !important;
}

.service-group-select select,
.service-global-search input {
    min-height: 52px !important;
    border-radius: 13px !important;
    border-color: rgba(148, 163, 184, .32) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .035) !important;
}

.create-local-group-line {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    padding: 10px 14px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(148, 163, 184, .28) !important;
    background: #f8fbff !important;
}

.service-catalog-table-pro {
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .075) !important;
}

.service-catalog-table-pro table {
    min-width: 1160px !important;
}

.service-catalog-table-pro th {
    height: 58px !important;
    background: #f6f9fd !important;
    color: #182235 !important;
    letter-spacing: .015em !important;
}

.service-catalog-table-pro td {
    height: 58px !important;
}

.service-group-row td {
    background: linear-gradient(90deg, #eef6ff, #f8fbff) !important;
}

.service-row:hover td {
    background: #fbfdff !important;
}

.service-row.is-selected td {
    background: #edf6ff !important;
}

.service-catalog-table-pro .tiny-check,
.create-local-group-line .tiny-check {
    z-index: 2 !important;
    flex: 0 0 24px !important;
}

.add-status-pill:not(.mapped),
.add-group-pill {
    min-height: 32px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    transition: transform .16s ease, box-shadow .16s ease !important;
}

.add-status-pill:not(.mapped):hover,
.add-group-pill:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 18px rgba(229, 69, 105, .15) !important;
}

.service-selection-bar {
    border-radius: 16px !important;
    background: #111820 !important;
    color: #fff !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .22) !important;
}

.bulk-icon-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
}

@media (min-width: 961px) {
    .side-rail {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: visible !important;
    }

    .side-nav {
        max-height: none !important;
        overflow: visible !important;
    }
}

.theme-dark .service-sync-card,
.theme-dark .service-catalog-table-pro {
    background: linear-gradient(180deg, #101826, #0f172a) !important;
    border-color: rgba(148, 163, 184, .18) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .26) !important;
}

.theme-dark .service-type-segments,
.theme-dark .create-local-group-line {
    background: #111827 !important;
    border-color: rgba(148, 163, 184, .2) !important;
}

.theme-dark .service-type-segment {
    color: #94a3b8 !important;
}

.theme-dark .service-type-segment:hover {
    color: #bfdbfe !important;
    background: rgba(148, 163, 184, .12) !important;
}

.theme-dark .service-group-select select,
.theme-dark .service-global-search input {
    background: #0f172a !important;
    color: #e5eefb !important;
    border-color: rgba(148, 163, 184, .22) !important;
}

.theme-dark .service-catalog-table-pro th {
    background: #111827 !important;
    color: #e5eefb !important;
}

.theme-dark .service-group-row td {
    background: linear-gradient(90deg, rgba(29, 122, 240, .14), rgba(15, 23, 42, .96)) !important;
}

.theme-dark .service-row:hover td {
    background: rgba(148, 163, 184, .08) !important;
}

@media (max-width: 1180px) {
    .service-sync-toolbar {
        align-items: stretch !important;
    }

    .service-command-group,
    .service-type-segments {
        width: 100% !important;
    }

    .service-filter-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Final service-list/sidebar stability pass */
.side-rail .wallet-row,
.side-rail .wallet-panel,
.side-rail .wallet-card,
.side-rail .rail-wallet,
.side-rail .wallet-balance,
.side-rail .customer-wallet,
.side-rail .sidebar-wallet,
.side-rail .balance-card,
.side-rail [data-wallet-card],
.side-rail [data-sidebar-wallet] {
    display: none !important;
}

@media (min-width: 921px) {
    .app-frame.is-admin-shell {
        display: block !important;
        min-height: 100vh !important;
        padding-left: 246px !important;
        overflow-x: hidden !important;
    }

    .workspace {
        min-width: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    .side-rail {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: 246px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: visible !important;
        transform: none !important;
        z-index: 700 !important;
    }

    .side-rail .side-nav {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100dvh - 92px) !important;
        max-height: calc(100dvh - 92px) !important;
        overflow-y: auto !important;
        overflow-x: visible !important;
        padding-right: 10px !important;
        scrollbar-width: thin;
    }

    .admin-services-stack {
        order: 2 !important;
    }

    .admin-orders-stack {
        order: 3 !important;
    }

    .admin-groups-stack {
        order: 4 !important;
    }

    .admin-nav-divider {
        order: 5 !important;
    }

    .nav-stack > .nav-flyout,
    .nav-stack:hover > .nav-flyout,
    .nav-stack:focus-within > .nav-flyout {
        position: fixed !important;
        left: 258px !important;
        top: 12px;
        display: grid !important;
        min-width: 260px !important;
        max-width: 330px !important;
        max-height: calc(100dvh - 24px);
        overflow: auto !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(-8px, 0, 0) !important;
        transition: opacity .14s ease, transform .14s ease, visibility .14s ease !important;
        z-index: 850 !important;
    }

    .nav-stack.flyout-open > .nav-flyout,
    .nav-stack.flyout-open:hover > .nav-flyout,
    .nav-stack.flyout-open:focus-within > .nav-flyout {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .nav-parent .nav-chevron {
        margin-left: auto !important;
        transform: rotate(0deg) !important;
        transition: transform .16s ease !important;
    }

    .nav-stack.flyout-open > .nav-parent .nav-chevron {
        transform: rotate(90deg) !important;
    }
}

.service-admin-workbench {
    max-width: none !important;
}

.service-sync-card {
    overflow: visible !important;
    padding: 18px !important;
}

.service-sync-toolbar {
    display: grid !important;
    grid-template-columns: minmax(320px, auto) minmax(390px, 440px) !important;
    align-items: center !important;
    gap: 18px !important;
}

.service-command-group {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.service-command {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 58px !important;
    padding: 0 22px !important;
    border-radius: 14px !important;
    gap: 9px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    box-shadow: 0 10px 28px rgba(15, 86, 187, .08) !important;
}

.service-command.primary {
    background: #111820 !important;
    color: #fff !important;
    border-color: #111820 !important;
}

.service-command.subtle,
.service-command.search,
.service-command.group-add {
    background: #f8fbff !important;
    color: #0f56bb !important;
    border-color: #d7e4f5 !important;
}

.service-command.clear {
    background: #fff5f5 !important;
    color: #e11d48 !important;
    border-color: #fecdd3 !important;
}

.service-command.primary .service-command-dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: #1fb16b !important;
    box-shadow: 0 0 0 5px rgba(31, 177, 107, .14) !important;
}

.service-type-segments {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(126px, 1fr)) !important;
    justify-self: end !important;
    padding: 8px !important;
    border-radius: 16px !important;
}

.service-type-segment {
    min-height: 50px !important;
    border-radius: 12px !important;
}

.service-type-segment:hover {
    transform: translateY(-1px) !important;
}

.service-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(320px, 1.05fr) auto minmax(320px, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
}

.service-filter-grid select,
.service-filter-grid input {
    min-height: 58px !important;
    border-radius: 13px !important;
}

.service-selection-bar[hidden] {
    display: none !important;
}

.service-selection-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 14px 0 !important;
    padding: 12px 16px !important;
    border-radius: 16px !important;
}

.selected-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.bulk-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 46px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    gap: 8px !important;
}

.bulk-icon-btn span {
    display: inline !important;
}

.service-catalog-table-pro {
    overflow: auto !important;
    border-radius: 16px !important;
}

.service-catalog-table-pro table {
    min-width: 1260px !important;
    table-layout: fixed !important;
}

.service-catalog-table-pro .select-col {
    width: 64px !important;
    min-width: 64px !important;
    text-align: center !important;
}

.service-catalog-table-pro th:nth-child(2),
.service-catalog-table-pro td:nth-child(2) {
    width: 116px !important;
}

.service-catalog-table-pro th:nth-child(3),
.service-catalog-table-pro td:nth-child(3),
.service-catalog-table-pro th:nth-child(4),
.service-catalog-table-pro td:nth-child(4),
.service-catalog-table-pro th:nth-child(8),
.service-catalog-table-pro td:nth-child(8),
.service-catalog-table-pro th:nth-child(9),
.service-catalog-table-pro td:nth-child(9) {
    width: 120px !important;
}

.service-catalog-table-pro th:nth-child(5),
.service-catalog-table-pro td:nth-child(5) {
    width: 44% !important;
}

.service-catalog-table-pro th:nth-child(6),
.service-catalog-table-pro td:nth-child(6) {
    width: 180px !important;
}

.service-catalog-table-pro th:nth-child(7),
.service-catalog-table-pro td:nth-child(7) {
    width: 120px !important;
}

.service-catalog-table-pro th,
.service-catalog-table-pro td {
    vertical-align: middle !important;
}

.service-group-row td {
    height: 78px !important;
}

.service-row td {
    height: 64px !important;
}

.service-service-cell {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 12px !important;
}

.service-service-cell strong,
.service-service-cell small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.service-catalog-table-pro .tiny-check,
.create-local-group-line .tiny-check {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    border: 1.5px solid #8da0b8 !important;
    border-radius: 7px !important;
    background: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
}

.service-catalog-table-pro .tiny-check:checked,
.create-local-group-line .tiny-check:checked {
    background: #1d7af0 !important;
    border-color: #1d7af0 !important;
}

.service-catalog-table-pro .tiny-check:checked::after,
.create-local-group-line .tiny-check:checked::after {
    content: "";
    width: 12px;
    height: 7px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

.service-catalog-table-pro .tiny-check:indeterminate::after {
    content: "";
    width: 12px;
    height: 3px;
    border-radius: 99px;
    background: #fff;
}

.add-status-pill {
    border: 0 !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    background: #ffe8ef !important;
    color: #e83d67 !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.add-status-pill.mapped {
    background: #e6f7ef !important;
    color: #0f9b62 !important;
}

.theme-dark .service-command.subtle,
.theme-dark .service-command.search,
.theme-dark .service-command.group-add,
.theme-dark .service-filter-grid select,
.theme-dark .service-filter-grid input,
.theme-dark .create-local-group-line {
    background: #111827 !important;
    color: #e5edf7 !important;
    border-color: #2b3a50 !important;
}

.theme-dark .service-catalog-table-pro .tiny-check,
.theme-dark .create-local-group-line .tiny-check {
    background: #0b1220 !important;
    border-color: #516178 !important;
}

.theme-dark .service-catalog-table-pro .tiny-check:checked,
.theme-dark .create-local-group-line .tiny-check:checked,
.theme-dark .service-catalog-table-pro .tiny-check:indeterminate {
    background: #2f8bff !important;
    border-color: #2f8bff !important;
}

@media (max-width: 1180px) {
    .service-filter-grid,
    .service-sync-toolbar {
        grid-template-columns: 1fr !important;
    }

    .service-type-segments {
        justify-self: stretch !important;
    }
}

@media (max-width: 920px) {
    .app-frame {
        padding-left: 0 !important;
    }

    .side-rail {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        inset: auto !important;
    }

    .side-rail .side-nav {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Service editor (slide-over style edit screen: General/Pricing/Connect/Field/Image/Article/SEO/More) */
.service-editor-page {
    padding: 4px 0 40px;
}

.service-editor-shell {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "tabs content"
        "footer footer";
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
    overflow: hidden;
    min-height: 620px;
}

.service-editor-header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
}

.service-editor-header .eyebrow {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.service-editor-header h1 {
    margin: 0;
    font-size: 21px;
    color: var(--ink);
}

.service-editor-close {
    width: 36px;
    height: 36px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    font-weight: 800;
    text-decoration: none;
}

.service-editor-close:hover {
    background: #f3f6fb;
    color: var(--ink);
}

.service-editor-tabs {
    grid-area: tabs;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 12px;
    border-right: 1px solid var(--line);
    background: var(--card-soft);
}

.service-editor-tab {
    text-align: left;
    border: 0;
    border-radius: 10px;
    background: transparent;
    padding: 12px 14px;
    color: #52627a;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
}

.service-editor-tab:hover {
    background: #eef3fb;
    color: var(--ink);
}

.service-editor-tab.active {
    background: #1f7ae0;
    color: #fff;
    box-shadow: 0 10px 22px rgba(31, 122, 224, .28);
}

.service-editor-content {
    grid-area: content;
    padding: 26px 28px;
    overflow: auto;
}

.service-tab-pane {
    display: none;
}

.service-tab-pane.active {
    display: block;
}

.pane-heading {
    margin: 0 0 6px;
    font-size: 18px;
    color: var(--ink);
}

.pane-hint {
    margin: 0 0 20px;
    color: var(--muted);
    font-weight: 600;
    font-size: 13.5px;
    max-width: 640px;
}

.editor-form-grid {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 16px 20px;
    align-items: center;
}

.editor-form-grid.compact {
    grid-template-columns: 160px minmax(0, 1fr);
}

.editor-form-grid > label:not(.switch-field) {
    font-weight: 800;
    font-size: 14px;
    color: #40536c;
}

.editor-form-grid input[type="text"],
.editor-form-grid input[type="number"],
.editor-form-grid input[type="url"],
.editor-form-grid input:not([type]),
.editor-form-grid select,
.editor-form-grid textarea {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #d8e3f0;
    border-radius: 10px;
    background: #fff;
    color: #1f2937;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
}

.editor-form-grid textarea {
    min-height: 110px;
    padding: 12px 14px;
    resize: vertical;
}

.editor-form-grid select[disabled] {
    opacity: .62;
    cursor: not-allowed;
}

.duo-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.duo-input input {
    min-height: 46px;
}

.duo-input span {
    color: var(--quiet);
    font-weight: 800;
}

.money-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.money-input span:first-child {
    position: absolute;
    left: 14px;
    color: var(--quiet);
    font-weight: 800;
    pointer-events: none;
}

.money-input input {
    padding-left: 28px !important;
}

.money-input.has-total strong {
    white-space: nowrap;
    color: var(--muted);
    font-weight: 800;
    font-size: 13px;
}

/* Pricing tab margin readout (admin/service-edit.blade.php): flags a tier
   priced below purchase cost - selling at a loss is worth noticing at a
   glance, not just on close reading. */
.service-tier-margin.negative {
    color: var(--rose);
}

.switch-field {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 26px;
    cursor: pointer;
    flex: none;
}

.switch-field input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.switch-field span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d8e0ec;
    transition: background .16s ease;
}

.switch-field span::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
    transition: transform .16s ease;
}

.switch-field input:checked + span {
    background: #1f7ae0;
}

.switch-field input:checked + span::before {
    transform: translateX(18px);
}

.switch-field.muted-switch input:checked + span {
    background: #8592a6;
}

.connected-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border: 1px solid #d8e3f0;
    border-radius: 12px;
    background: #f6faff;
}

.connected-card h2 {
    margin: 0 0 4px;
    font-size: 15px;
    color: var(--ink);
}

.connected-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.danger-icon-btn {
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid #f3c6ce;
    border-radius: 9px;
    background: #fff5f6;
    color: #d92d43;
    font-weight: 900;
    cursor: pointer;
}

.editor-subtabs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.editor-subtabs button,
.editor-subtabs a,
.editor-subtabs span {
    display: inline-flex;
    border: 1px solid #d8e3f0;
    background: #f8fbff;
    color: #5b6b81;
    font-weight: 800;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 999px;
    text-decoration: none;
}

.editor-subtabs button,
.editor-subtabs a {
    cursor: pointer;
}

.editor-subtabs span {
    cursor: default;
}

.editor-subtabs button.active,
.editor-subtabs span.active {
    background: #101820;
    color: #fff;
    border-color: #101820;
}

.editor-subtabs a:hover {
    background: #eef3fb;
}

.service-field-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.service-field-add input {
    flex: 1 1 220px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #d8e3f0;
    border-radius: 10px;
    font-weight: 600;
}

.service-field-add select {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #d8e3f0;
    border-radius: 10px;
    font-weight: 600;
}

.service-field-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Row 1: identity + type + required + save/delete. Row 2 (.field-meta-row)
   is everything the customer actually experiences for this field - what
   used to be hidden inputs no admin could ever reach, even though the
   customer-side order form already rendered whatever was in them. */
.service-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr 150px auto auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e4ebf3;
    border-radius: 10px;
    background: #fbfcfe;
}

.service-field-row input,
.service-field-row select {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #d8e3f0;
    border-radius: 8px;
    font-weight: 600;
}

.field-meta-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.4fr;
    gap: 8px;
}

.field-meta-row input,
.field-meta-row textarea {
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #d8e3f0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    resize: vertical;
}

.field-required-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    white-space: nowrap;
}

.dark-action-btn {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #101820;
    border-radius: 10px;
    background: #101820;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.icon-cell-btn {
    width: 38px;
    height: 38px;
    border: 1px solid #d8e3f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.icon-cell-btn.danger {
    border-color: #f3c6ce;
    color: #d92d43;
}

.media-editor-grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 20px 24px;
    align-items: center;
}

.media-editor-grid h2 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--ink);
}

.media-actions {
    display: flex;
    gap: 8px;
}

.media-actions button,
.media-actions label {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e3f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
}

.media-actions button.danger {
    border-color: #f3c6ce;
    color: #d92d43;
}

.media-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6f9;
    border: 1px dashed #c9d6e6;
    color: var(--quiet);
    overflow: hidden;
}

.media-preview.circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}

.media-preview.wide {
    width: 100%;
    max-width: 360px;
    height: 120px;
    border-radius: 12px;
}

.media-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-upload-status {
    grid-column: 2;
    margin-top: -8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--quiet);
}

.rich-editor-shell {
    border: 1px solid #d8e3f0;
    border-radius: 12px;
    overflow: hidden;
}

.rich-menu {
    display: flex;
    gap: 14px;
    padding: 8px 14px;
    background: #f4f6f9;
    border-bottom: 1px solid #e4ebf3;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
}

.rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid #e4ebf3;
    background: #fff;
}

.rich-toolbar button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    color: #40536c;
}

.rich-toolbar button:hover {
    background: #eef3fb;
    border-color: #d8e3f0;
}

.rich-toolbar .toolbar-sep {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: #e4ebf3;
}

.rich-editor-shell textarea {
    width: 100%;
    min-height: 260px;
    border: 0;
    padding: 16px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}

.rich-editor-shell textarea:focus {
    outline: none;
}

.tag-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
}

.tag-check-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #40536c;
}

/* These checkboxes are plain <input type="checkbox"> with no .check-label
   or .tiny-check class, so without this they inherit the generic
   "input, select, textarea { width:100%; height:38px; ... }" form-field
   reset meant for text inputs - stretching each checkbox into a huge
   38px-tall rectangle instead of a normal small checkbox. Match the same
   small fixed size .check-label input already uses elsewhere. */
.tag-check-list label input {
    width: 16px;
    height: 16px;
    min-height: 0;
}

.tag-check-list.is-disabled label {
    opacity: .5;
}

.service-editor-footer {
    grid-area: footer;
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    background: var(--card-soft);
}

@media (max-width: 760px) {
    .service-editor-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "tabs"
            "content"
            "footer";
    }

    .service-editor-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .editor-form-grid,
    .editor-form-grid.compact {
        grid-template-columns: minmax(0, 1fr);
    }

    .media-editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .media-upload-status {
        grid-column: 1;
    }
}

.theme-dark .service-editor-shell {
    background: #111827;
    border-color: #253244;
}

.theme-dark .service-editor-header,
.theme-dark .service-editor-footer {
    border-color: #253244;
    background: #0f1724;
}

.theme-dark .service-editor-header h1,
.theme-dark .pane-heading,
.theme-dark .connected-card h2,
.theme-dark .media-editor-grid h2 {
    color: #e5edf8;
}

.theme-dark .service-editor-close {
    border-color: #2b3a4e;
    color: #9aa9bd;
}

.theme-dark .service-editor-tabs {
    background: #0f1724;
    border-color: #253244;
}

.theme-dark .service-editor-tab {
    color: #9aa9bd;
}

.theme-dark .service-editor-tab:hover {
    background: #172234;
    color: #e5edf8;
}

.theme-dark .editor-form-grid > label:not(.switch-field),
.theme-dark .field-required-toggle {
    color: #b9c6d9;
}

.theme-dark .editor-form-grid input,
.theme-dark .editor-form-grid select,
.theme-dark .editor-form-grid textarea,
.theme-dark .service-field-add input,
.theme-dark .service-field-add select,
.theme-dark .service-field-row input,
.theme-dark .service-field-row select,
.theme-dark .field-meta-row input,
.theme-dark .field-meta-row textarea {
    background: #0f1724;
    border-color: #2b3a4e;
    color: #e5edf8;
}

.theme-dark .service-field-row,
.theme-dark .rich-editor-shell,
.theme-dark .connected-card,
.theme-dark .media-preview,
.theme-dark .icon-cell-btn,
.theme-dark .dark-action-btn,
.theme-dark .editor-subtabs button,
.theme-dark .editor-subtabs a,
.theme-dark .editor-subtabs span,
.theme-dark .media-actions button,
.theme-dark .media-actions label {
    background: #0f1724;
    border-color: #2b3a4e;
    color: #d8e5f7;
}

.theme-dark .dark-action-btn {
    background: #1f7ae0;
    border-color: #1f7ae0;
    color: #fff;
}

.theme-dark .rich-menu,
.theme-dark .rich-toolbar {
    background: #0f1724;
    border-color: #2b3a4e;
}

.theme-dark .rich-toolbar button {
    color: #d8e5f7;
}

.theme-dark .pane-hint,
.theme-dark .connected-card p,
.theme-dark .money-input.has-total strong {
    color: #9aa9bd;
}

.theme-dark .money-input.has-total strong.negative {
    color: var(--rose);
}

/* Support ticket thread (list row links + conversation view) */
.row-link {
    cursor: pointer;
}

.row-link:hover {
    background: var(--card-soft);
}

.row-link a {
    color: inherit;
    text-decoration: none;
    font-weight: 800;
}

.row-link a:hover {
    color: var(--blue);
}

.status.open {
    background: var(--orange);
}

.status.answered {
    background: var(--blue);
}

.status.closed {
    background: var(--quiet);
}

.ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.ticket-message {
    max-width: 82%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card-soft);
    align-self: flex-start;
}

.ticket-message.staff {
    align-self: flex-end;
    background: #eaf3ff;
    border-color: #cfe3fb;
}

.ticket-message p {
    margin: 0;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}

.ticket-message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 11.5px;
    color: var(--muted);
}

.ticket-message-meta strong {
    color: var(--ink);
    font-size: 12.5px;
}

.reply-form {
    display: grid;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.reply-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}

.reply-form button {
    justify-self: end;
}

.ticket-closed-note {
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-weight: 600;
}

.ticket-info-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 14px;
    align-items: center;
    margin-bottom: 18px;
    font-size: 13.5px;
}

.ticket-info-grid > span:nth-child(odd) {
    color: var(--muted);
    font-weight: 800;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Order detail page (admin + customer order-show.blade.php): status pill
   next to the order number, and the Submitted/Sent/Completed/Processing
   timeline strip. auto-fit so it still lays out cleanly if a stage is ever
   added or one column runs long on a narrow screen. */
.page-title h1 .order-status-pill {
    vertical-align: middle;
    margin-left: 10px;
    font-size: 12px;
}

.order-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.order-timeline > div {
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--card-soft);
}

.order-timeline span {
    display: block;
    color: var(--muted);
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.order-timeline strong {
    display: block;
    color: var(--ink);
    font-weight: 900;
    font-size: 13.5px;
}

.copy-source {
    cursor: text;
    user-select: all;
}

.theme-dark .ticket-message {
    background: #0f1724;
    border-color: #2b3a4e;
}

.theme-dark .ticket-message.staff {
    background: #12305a;
    border-color: #1f4a86;
}

.theme-dark .ticket-message p,
.theme-dark .ticket-message-meta strong {
    color: #e5edf8;
}

.theme-dark .reply-form textarea {
    background: #0f1724;
    border-color: #2b3a4e;
    color: #e5edf8;
}

.theme-dark .reply-form,
.theme-dark .ticket-closed-note {
    border-color: #253244;
}

/* Reseller sub-account table controls (fund amount + status toggle) */
.fund-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fund-form input {
    width: 68px;
    height: 32px;
    padding: 0 8px;
}

.status-toggle-form select {
    height: 32px;
    padding: 0 8px;
    min-width: 96px;
}