/* ============================================================
   ArcEntry Admin Portal - Fluent-inspired layout shell
   ============================================================ */

:root {
    --top-bar-height: 64px;
    --sidebar-width: 264px;
    --sidebar-collapsed-width: 60px;
    --content-max-width: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

/* ---- Wrapper ---- */
.wrapper {
    display: flex;
    width: 100%;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* ---- Sidebar ---- */
.sidebar {
    width: var(--sidebar-width);
    background: color-mix(in srgb, var(--color-bg-sidebar) 80%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--color-text-primary);
    border-right: 1px solid var(--color-stroke-default);
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.2s ease, left 0.2s ease;
    z-index: 1000;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar-pref-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
}

/* ---- Sidebar toggle ---- */
.sidebar-toggle {
    position: fixed;
    left: var(--sidebar-width);
    top: 12px;
    z-index: 1001;
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-stroke-default);
    width: 24px;
    height: 32px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-2);
    transition: left 0.2s ease, background 0.15s ease;
}

.is-mobile .sidebar-toggle {
    display: none;
}

.sidebar.collapsed ~ .content-wrapper .sidebar-toggle {
    left: var(--sidebar-collapsed-width);
}

.sidebar-pref-collapsed .sidebar-toggle {
    left: var(--sidebar-collapsed-width);
}

.sidebar-toggle:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.sidebar-toggle i {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.sidebar.collapsed ~ .content-wrapper .sidebar-toggle i,
.sidebar-pref-collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

/* ---- Sidebar header ---- */
.sidebar-header {
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--color-stroke-default);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-header {
    padding: 16px 10px;
    text-align: center;
}

.sidebar-brand {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-brand i {
    font-size: 1.35rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: color 0.1s ease;
}

.sidebar-brand .sidebar-brand-mark {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--color-brand);
    flex-shrink: 0;
    transition: color 0.1s ease;
}

.sidebar.collapsed .sidebar-brand {
    justify-content: center;
}

.sidebar.collapsed .sidebar-brand-text {
    display: none;
}

.sidebar-brand:hover {
    color: var(--color-text-primary);
    text-decoration: none;
}

.sidebar-brand:hover i {
    color: var(--color-brand);
}

.sidebar-brand:hover .sidebar-brand-mark {
    color: var(--color-brand-hover);
}

/* ---- Sidebar navigation ---- */
.sidebar-menu {
    padding: 8px 0 18px;
}

.sidebar-nav {
    padding: 4px 10px;
    margin: 0;
    list-style: none;
}

.sidebar-nav-primary {
    padding-top: 8px;
    padding-bottom: 8px;
}

.sidebar-nav-item {
    margin-bottom: 2px;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    min-height: 38px;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 0.1s ease, color 0.1s ease;
    white-space: nowrap;
    overflow: hidden;
    border-radius: var(--radius-sm);
    font-size: 0.925rem;
    font-weight: 400;
    border-left: 2px solid transparent;
}

.sidebar.collapsed .sidebar-nav-link {
    padding: 12px;
    justify-content: center;
    border-left: none;
}

.sidebar-nav-link:hover {
    background: var(--color-nav-hover-bg);
    color: var(--color-nav-hover-fg);
    text-decoration: none;
}

.sidebar-nav-link.active {
    background: var(--color-nav-active-bg);
    color: var(--color-text-primary);
    border-left-color: var(--color-brand);
    font-weight: 600;
}

.sidebar-nav-link.active:hover {
    background: var(--color-nav-active-bg);
    color: var(--color-text-primary);
}

.sidebar.collapsed .sidebar-nav-link.active {
    border-left: none;
    box-shadow: inset 3px 0 0 var(--color-brand);
}

.sidebar-nav-link i {
    margin-right: 10px;
    font-size: 1.05rem;
    min-width: 20px;
    text-align: center;
    color: var(--color-text-muted);
    transition: color 0.1s ease;
}

.sidebar-nav-link:hover i {
    color: var(--color-text-primary);
}

.sidebar-nav-link.active i {
    color: var(--color-text-primary);
}

.sidebar.collapsed .sidebar-nav-link i {
    margin-right: 0;
    font-size: 1.35rem;
}

.sidebar.collapsed .sidebar-nav-link span {
    display: none;
}

/* ---- Collapsible nav groups ----
   The section headings are buttons that open and close their children, one at a time.
   Only the group holding the current page starts open, and that is decided server-side
   in _Layout so the first paint is already correct — no expand flash per navigation. */
.sidebar-group + .sidebar-group {
    margin-top: 2px;
}

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: calc(100% - 20px);
    margin: 12px 10px 2px;
    padding: 8px 12px;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.1s ease, color 0.1s ease;
}

.sidebar-group-toggle:hover {
    background: var(--color-nav-hover-bg);
    color: var(--color-nav-hover-fg);
}

.sidebar-group-toggle:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
}

.sidebar-group.open > .sidebar-group-toggle {
    color: var(--color-text-secondary);
}

.sidebar-group-caret {
    flex-shrink: 0;
    font-size: 0.7rem;
    transform: rotate(-90deg);
    transition: transform 0.18s ease;
}

.sidebar-group.open .sidebar-group-caret {
    transform: rotate(0deg);
}

.sidebar-group-items {
    display: none;
}

.sidebar-group.open > .sidebar-group-items {
    display: block;
}

/* The icon rail has nowhere to put a heading, so the headings drop out of the document
   (and the accessibility tree with them) and every group's icons stay reachable. Must
   stay after the .open rules above — same specificity, so order is what decides. */
.sidebar.collapsed .sidebar-group-toggle,
.sidebar-pref-collapsed .sidebar-group-toggle {
    display: none;
}

.sidebar.collapsed .sidebar-group-items,
.sidebar-pref-collapsed .sidebar-group-items {
    display: block;
    margin-top: 10px;
}

/* ---- Graphite control rail ----
   The rail keeps this palette in BOTH themes — navigation is the guardhouse, the
   content canvas is the perimeter it watches. Scoped entirely to the .sidebar
   subtree: the rules above already read these tokens, so redefining them here
   cascades to every descendant and deleting this block puts the rail back on the
   theme. Do not lift any of it into fluent-tokens.css. */
.sidebar {
    /* Keeps the overflow scrollbar dark while the rest of the page is light. */
    color-scheme: dark;

    --color-text-primary: #f4f5f7;
    --color-text-secondary: #b4bac4;
    --color-text-muted: #8b93a1;

    --color-nav-hover-bg: rgba(255, 255, 255, 0.07);
    --color-nav-hover-fg: #ffffff;
    --color-nav-active-bg: rgba(242, 160, 61, 0.14);

    /* Dark-theme Signal amber in both themes: the light-mode #b45b0b is 3.6:1 on
       graphite, too weak for the active marker. */
    --color-brand: #f2a03d;

    --color-stroke-default: rgba(255, 255, 255, 0.08);
    --color-stroke-strong: rgba(255, 255, 255, 0.18);

    /* Opaque — the translucent acrylic above resolved against the page behind it,
       so it landed on a different grey in each theme. */
    background: #181b21;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sidebar .sidebar-nav-link.active i {
    color: var(--color-brand);
}

/* ---- Content wrapper ---- */
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-canvas);
    width: 100%;
    margin-left: var(--sidebar-width);
    transition: margin-left 0.2s ease;
}

.sidebar.collapsed ~ .content-wrapper {
    margin-left: var(--sidebar-collapsed-width);
}

.sidebar-pref-collapsed .content-wrapper {
    margin-left: var(--sidebar-collapsed-width);
}

/* ---- Top bar ---- */
.top-bar {
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-stroke-default);
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    box-shadow: none;
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    min-height: var(--top-bar-height);
    z-index: 900;
}

.sidebar.collapsed ~ .content-wrapper .top-bar {
    left: var(--sidebar-collapsed-width);
}

.sidebar-pref-collapsed .top-bar {
    left: var(--sidebar-collapsed-width);
}

body.is-mobile .top-bar,
body.is-mobile .sidebar.collapsed ~ .content-wrapper .top-bar {
    left: 0;
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.page-title {
    margin: 0;
    padding-left: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    /* Overrides the -0.02em on the global h1..h6 rule — negative tracking on a
       condensed face reads as a printing fault rather than as tight setting. */
    letter-spacing: 0;
}

.page-title::before {
    content: none;
}

.top-bar {
    position: fixed;
}

.top-bar .page-title {
    position: relative;
    /* Was flex: 1, which pushed the actions to the far edge. The title now takes only the room it
       needs so the search box can sit in the middle of the bar. */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Global search ----
   Centred in the top bar. Replaces the Tenants sidebar entry as the way to find a record whose
   site you don't know; see Pages/Search.cshtml. */
.global-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 260px;
    max-width: 480px;
    margin: 0 auto;
    min-width: 0;
}

.global-search-icon {
    position: absolute;
    left: 12px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.global-search-input {
    width: 100%;
    height: 36px;
    padding: 0 40px 0 34px;
    border: 1px solid var(--color-stroke-default);
    border-radius: 18px;
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.global-search-input::placeholder {
    color: var(--color-text-muted);
}

.global-search-input:hover {
    background: var(--color-bg-hover);
}

.global-search-input:focus {
    outline: none;
    background: var(--color-bg-surface);
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-subtle);
}

/* Cancel button in WebKit's type=search — the round X clashes with the pill shape. */
.global-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.global-search-hint {
    position: absolute;
    right: 10px;
    padding: 1px 6px;
    border: 1px solid var(--color-stroke-default);
    border-radius: 4px;
    background: var(--color-bg-surface);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    line-height: 1.4;
    pointer-events: none;
}

.global-search-input:focus ~ .global-search-hint {
    opacity: 0;
}

@media (max-width: 991.98px) {
    .global-search-hint {
        display: none;
    }
}

/* On a narrow screen the search matters more than the title, which every page also renders as its
   own <h1> just below the bar. */
@media (max-width: 767.98px) {
    .top-bar .page-title {
        display: none;
    }

    .global-search {
        margin-left: 0;
    }
}

/* ---- Top bar toolbar buttons ---- */
.topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid var(--color-stroke-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease;
    white-space: nowrap;
}

.topbar-btn:hover,
.topbar-btn:focus {
    background: var(--color-bg-hover);
    border-color: var(--color-stroke-strong);
    color: var(--color-text-primary);
    outline: none;
}

.topbar-btn i {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    line-height: 1;
}

.topbar-btn:hover i,
.topbar-btn:focus i {
    color: var(--color-text-primary);
}

.topbar-btn-user .topbar-btn-chevron {
    font-size: 0.7rem;
    margin-left: -2px;
}

.topbar-btn-label {
    color: var(--color-text-primary);
}

/* ---- User dropdown ---- */
.top-bar .user-dropdown {
    position: relative;
}

.top-bar .user-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-stroke-default);
    border-radius: var(--radius-lg);
    min-width: 224px;
    box-shadow: var(--shadow-8);
    z-index: 1100;
    overflow: hidden;
    padding: 6px;
}

.top-bar .user-dropdown-menu.show {
    display: block;
}

.top-bar .user-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background 0.1s ease;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}

.top-bar .user-dropdown-menu a:hover,
.top-bar .user-dropdown-menu a.active {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    text-decoration: none;
}

.top-bar .user-dropdown-menu a.active {
    font-weight: 600;
}

.top-bar .user-dropdown-menu a i {
    width: 18px;
    text-align: center;
    color: var(--color-text-secondary);
}

.top-bar .user-dropdown-menu .dropdown-divider {
    border-top: 1px solid var(--color-stroke-default);
    margin: 6px 2px;
}

.user-menu-section {
    padding: 6px 10px 4px;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- Main content ---- */
.main-content {
    flex: 1;
    padding: calc(28px + var(--top-bar-height)) 28px 28px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    background: var(--color-bg-canvas);
    max-width: 100%;
}

.main-content > * {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}

.main-content > .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
}

.main-content > .row > [class*="col-"] {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
}

.main-content > .row > [class*="col-"]:first-child {
    padding-left: 0;
}

.main-content > .row > [class*="col-"]:last-child {
    padding-right: 0;
}

.main-content > .row:not(:last-child) {
    margin-bottom: 1rem;
}

.main-content > .row > [class*="col-"] > .card,
.main-content > .row > [class*="col-"] > form,
.main-content > .row > [class*="col-"] > form > .card,
.main-content > .row > [class*="col-"] > .stat-card,
.main-content > .row > [class*="col-"] > .stat-card-link,
.main-content > .row > [class*="col-"] > .stat-card-link > .stat-card {
    width: 100%;
}

/* ---- Breadcrumbs ---- */
.breadcrumb-nav {
    margin-bottom: 14px;
}

.breadcrumb-nav ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
}

.breadcrumb-nav li {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
}

.breadcrumb-nav li + li::before {
    content: "\203A";
    margin: 0 7px;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.breadcrumb-nav li a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.breadcrumb-nav li a:hover {
    text-decoration: underline;
}

.breadcrumb-nav li.active {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* ---- Footer ---- */
.footer {
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-stroke-default);
    padding: 10px 24px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* ---- Page headers ----
   Flat, lightweight section header. The top bar already carries the page
   title, so the in-page header reads as a calm subtitle + actions toolbar
   instead of a second heavy card. */
.page-header-compact {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 16px;
    width: 100%;
}

.page-header-compact .header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none;
}

.page-header-compact .header-info h1 {
    font-size: 1.125rem;
    margin: 0 0 2px 0;
    color: var(--color-text-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.page-header-compact .header-info h1 i {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-right: 2px;
}

.page-header-compact .header-info p {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 0.875rem;
}

/* Persistent back-navigation button — first child of .header-row (usually
   wrapped with .header-info in a `d-flex align-items-center gap-3` group so
   it sits inline with the title, not spaced apart by header-row's own
   space-between). Always visible without scrolling, replaces the old
   bottom-of-page "Back to List" links. */
.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid var(--color-stroke-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: 1.35rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-back:hover {
    background: var(--color-brand-subtle);
    border-color: var(--color-brand);
    color: var(--color-brand);
}

/* Search / filter bar — a subtle inset strip under the header row */
.page-header-compact .search-row {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-stroke-default);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: none;
}

.page-header-compact .search-row .form-label {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.8125rem;
    margin-bottom: 4px;
}

.page-header {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 16px;
    box-shadow: none;
    width: 100%;
}

.page-header h1 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}

.page-header h1 i {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.page-header p {
    margin-top: 4px;
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.page-header-danger,
.page-header.page-header-danger {
    border-color: transparent;
    background: transparent;
}

.page-header-danger h1,
.page-header.page-header-danger h1 {
    color: var(--danger);
}

.page-header-danger h1 i {
    color: var(--danger);
}

.card-header-danger {
    background: var(--color-bg-subtle) !important;
    color: var(--danger) !important;
    border-bottom-color: var(--danger) !important;
}

/* ---- Toast notifications ---- */
.toast-container {
    position: fixed;
    top: calc(var(--top-bar-height) + 12px);
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-stroke-default);
    box-shadow: var(--shadow-8);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    pointer-events: auto;
    animation: toastSlideIn 0.25s ease;
    max-width: 380px;
}

.toast-item.toast-success { border-left: 3px solid var(--success); }
.toast-item.toast-error { border-left: 3px solid var(--danger); }
.toast-item.toast-warning { border-left: 3px solid var(--warning); }
.toast-item.toast-info { border-left: 3px solid var(--info); }

.toast-item i { font-size: 1rem; flex-shrink: 0; }
.toast-item.toast-success i { color: var(--success); }
.toast-item.toast-error i { color: var(--danger); }
.toast-item.toast-warning i { color: var(--warning); }
.toast-item.toast-info i { color: var(--info); }

.toast-item .toast-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    font-size: 1rem;
}

.toast-item .toast-close:hover {
    color: var(--color-text-primary);
}

.toast-item.toast-hiding {
    animation: toastSlideOut 0.25s ease forwards;
}

@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* ---- Loading overlay ---- */
.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}

.loading-overlay.show {
    display: flex;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-stroke-default);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Mobile overlay ---- */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
}

.mobile-overlay.show {
    display: block;
}

/* ---- Admin web phone (floating SIP dialer) ---- */
.admin-sip-dialer-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
}

.sip-dialer-trigger-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border: none;
    box-shadow: var(--shadow-8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.2s ease, background-color 0.2s ease;
    position: relative;
}

.sip-dialer-trigger-btn:hover {
    transform: scale(1.05);
    background-color: var(--btn-primary-hover);
}

.sip-status-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    /* Ringed in the button's own foreground rather than a fixed white, or the ring
       disappears into the amber fill. */
    border: 2px solid var(--btn-primary-fg);
}

/* The line tones, not the fills — these are status dots. */
.sip-status-dot.offline { background-color: var(--color-danger); }
.sip-status-dot.connecting { background-color: var(--color-warning); }
.sip-status-dot.online { background-color: var(--color-success); }

.sip-dialer-panel {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 320px;
    overflow: visible;
    box-shadow: var(--shadow-8);
}

.sip-dialer-panel .card-header {
    font-size: 0.9375rem;
    min-height: 0;
    padding: 10px 12px;
}

.sip-dialer-panel .card-header i {
    color: var(--color-brand);
}

#adminSipDialer .btn-close {
    font-size: 10px;
}

#adminSipDialer .sip-muted {
    color: var(--color-text-secondary);
}

#adminSipDialer .sip-muted strong {
    color: var(--color-text-primary);
}

#adminSipDialer .sip-hint {
    color: var(--color-text-muted);
    font-size: 10px;
}

#adminSipDialer code {
    color: var(--color-text-primary);
}

.sip-video-feed {
    background: #000;
    max-height: 200px;
    object-fit: cover;
}

/* Extension combo-box dropdown */
.sip-ext-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-stroke-default);
    border-radius: var(--radius-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: 2000;
    box-shadow: var(--shadow-8);
}

.sip-ext-item {
    padding: 7px 10px;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-stroke-default);
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.sip-ext-item:hover {
    background: var(--color-bg-hover);
}

/* Keyboard selection outranks hover, so it keeps the brand tint. */
.sip-ext-item.active {
    background: var(--color-brand-subtle);
}

.sip-ext-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    flex-shrink: 0;
}

.sip-ext-badge.intercom {
    background: var(--btn-success-bg);
    color: var(--btn-success-fg);
}

.sip-ext-name {
    flex: 1;
    color: var(--color-text-primary);
}

.sip-ext-meta {
    color: var(--color-text-muted);
    font-size: 10px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    body.is-mobile .sidebar {
        left: calc(-1 * var(--sidebar-width));
        box-shadow: var(--shadow-8);
    }
    body.is-mobile .sidebar.show {
        left: 0;
    }
    body.is-mobile .content-wrapper {
        margin-left: 0;
    }
}

@media (max-width: 576px) {
    .top-bar {
        padding: 0 16px;
    }
    .page-title {
        font-size: 1.1rem;
    }
    .theme-toggle-btn .topbar-btn-label,
    .topbar-btn .topbar-btn-label {
        display: none;
    }
    .topbar-btn {
        padding: 6px 10px;
        min-width: 36px;
        justify-content: center;
    }
    .page-header-compact .header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .main-content {
        padding: calc(16px + var(--top-bar-height)) 16px 16px;
    }
    /* Card headers combining a title with action buttons (d-flex justify-content-between)
       would otherwise overflow/clip on narrow phones — let them wrap instead. */
    .card-header.d-flex {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}