/* =====================================================================
   NetCore Style System — canonical .nc-glass-* component family
   ---------------------------------------------------------------------
   Globally loaded by includes/layout.php AFTER app.css.
   Defines the canonical futuristic glass+neon visual language as
   reusable classes any page can apply directly.

   Naming: .nc-glass-<component>[-<part>][.<variant>]
   Tokens: --nc-radius-sm/md/lg, --nc-blur, --nc-saturate,
           --nc-shadow-mult, --nc-glow-alpha, --nc-ease-ms, --nc-mono-size

   This file is ADDITIVE — existing classes continue to work.
   ===================================================================== */

:root {
    --nc-mono-stack: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", monospace;
}

/* =====================================================================
   1. GLASS CARD
   ===================================================================== */
.nc-glass-card {
    background: color-mix(in srgb, var(--color-card) 88%, transparent);
    backdrop-filter: blur(var(--nc-blur, 12px)) saturate(var(--nc-saturate, 140%));
    -webkit-backdrop-filter: blur(var(--nc-blur, 12px)) saturate(var(--nc-saturate, 140%));
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    border-radius: var(--nc-radius-lg, 14px);
    padding: 18px;
    isolation: auto;
    transition: transform var(--nc-ease-ms, 160ms) ease,
                box-shadow var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-card:hover {
    transform: translateY(-1px);
    box-shadow:
        0 calc(8px * var(--nc-shadow-mult, 1)) calc(24px * var(--nc-shadow-mult, 1)) rgba(0, 0, 0, calc(0.12 * var(--nc-glow-alpha, 1))),
        0 0 24px color-mix(in srgb, var(--color-primary) calc(18% * var(--nc-glow-alpha, 1)), transparent);
}
.nc-glass-card-flat {
    background: color-mix(in srgb, var(--color-card) 88%, transparent);
    backdrop-filter: blur(var(--nc-blur, 12px)) saturate(var(--nc-saturate, 140%));
    -webkit-backdrop-filter: blur(var(--nc-blur, 12px)) saturate(var(--nc-saturate, 140%));
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    border-radius: var(--nc-radius-lg, 14px);
    padding: 18px;
    isolation: auto;
}

/* Sectioned glass card — for data tables / dashboard widgets with
   distinct header, body, footer. Opt-in via .nc-glass-card-sections
   on the parent .nc-glass-card so we zero its padding without
   affecting the flat content variant. */
.nc-glass-card.nc-glass-card-sections { padding: 0; overflow: hidden; }
.nc-glass-card-header {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--color-primary) 10%, transparent),
        transparent 70%);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    font-family: var(--nc-mono-stack);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--color-text);
    position: relative;
}
.nc-glass-card-header::after {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-primary), transparent);
    box-shadow: 0 0 8px var(--color-primary);
    opacity: 0.55;
}
.nc-glass-card-body { padding: 16px 18px; }
.nc-glass-card-body.flush { padding: 0; }
.nc-glass-card-footer {
    padding: 12px 18px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    background: color-mix(in srgb, var(--color-card-2) 40%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

/* =====================================================================
   2. GLASS BUTTONS — semantic variants + icon-only
   ===================================================================== */
.nc-glass-btn-primary,
.nc-glass-btn-secondary,
.nc-glass-btn-danger,
.nc-glass-btn-success,
.nc-glass-btn-warning,
.nc-glass-btn-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--nc-radius-md, 10px);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: transform var(--nc-ease-ms, 160ms) ease,
                box-shadow var(--nc-ease-ms, 160ms) ease,
                filter var(--nc-ease-ms, 160ms) ease,
                background var(--nc-ease-ms, 160ms) ease,
                border-color var(--nc-ease-ms, 160ms) ease;
}

.nc-glass-btn-primary {
    background: linear-gradient(135deg,
        var(--color-primary),
        color-mix(in srgb, var(--color-primary) 78%, transparent));
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    box-shadow:
        0 calc(4px * var(--nc-shadow-mult, 1)) calc(14px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-primary) calc(35% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
.nc-glass-btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: #fff;
    box-shadow:
        0 calc(8px * var(--nc-shadow-mult, 1)) calc(24px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-primary) calc(45% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent);
}
.nc-glass-btn-primary:active { transform: translateY(0); filter: brightness(0.95); }

.nc-glass-btn-secondary {
    background: color-mix(in srgb, var(--color-card) 75%, transparent);
    color: var(--color-text);
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-weight: 500;
}
.nc-glass-btn-secondary:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--color-card) 95%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    color: var(--color-text);
}

.nc-glass-btn-danger {
    background: linear-gradient(135deg,
        var(--color-danger),
        color-mix(in srgb, var(--color-danger) 78%, transparent));
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--color-danger) 55%, transparent);
    box-shadow:
        0 calc(4px * var(--nc-shadow-mult, 1)) calc(14px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-danger) calc(35% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
.nc-glass-btn-danger:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: #fff;
    box-shadow:
        0 calc(8px * var(--nc-shadow-mult, 1)) calc(24px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-danger) calc(45% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent);
}

.nc-glass-btn-success {
    background: linear-gradient(135deg,
        var(--color-success),
        color-mix(in srgb, var(--color-success) 78%, transparent));
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--color-success) 55%, transparent);
    box-shadow:
        0 calc(4px * var(--nc-shadow-mult, 1)) calc(14px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-success) calc(35% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
.nc-glass-btn-success:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: #fff;
    box-shadow:
        0 calc(8px * var(--nc-shadow-mult, 1)) calc(24px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-success) calc(45% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent);
}

.nc-glass-btn-warning {
    background: linear-gradient(135deg,
        var(--color-warning),
        color-mix(in srgb, var(--color-warning) 78%, transparent));
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--color-warning) 55%, transparent);
    box-shadow:
        0 calc(4px * var(--nc-shadow-mult, 1)) calc(14px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-warning) calc(35% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
.nc-glass-btn-warning:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: #fff;
    box-shadow:
        0 calc(8px * var(--nc-shadow-mult, 1)) calc(24px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-warning) calc(45% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent);
}

.nc-glass-btn-info {
    background: linear-gradient(135deg,
        var(--color-info),
        color-mix(in srgb, var(--color-info) 78%, transparent));
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--color-info) 55%, transparent);
    box-shadow:
        0 calc(4px * var(--nc-shadow-mult, 1)) calc(14px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-info) calc(35% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
.nc-glass-btn-info:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: #fff;
    box-shadow:
        0 calc(8px * var(--nc-shadow-mult, 1)) calc(24px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-info) calc(45% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent);
}

.nc-glass-btn-primary:disabled,
.nc-glass-btn-secondary:disabled,
.nc-glass-btn-danger:disabled,
.nc-glass-btn-success:disabled,
.nc-glass-btn-warning:disabled,
.nc-glass-btn-info:disabled,
.nc-glass-btn-primary.disabled,
.nc-glass-btn-secondary.disabled,
.nc-glass-btn-danger.disabled,
.nc-glass-btn-success.disabled,
.nc-glass-btn-warning.disabled,
.nc-glass-btn-info.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
    transform: none;
    box-shadow: none;
}

.nc-glass-btn-primary.loading,
.nc-glass-btn-danger.loading,
.nc-glass-btn-success.loading,
.nc-glass-btn-warning.loading,
.nc-glass-btn-info.loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}
.nc-glass-btn-primary.loading::after,
.nc-glass-btn-danger.loading::after,
.nc-glass-btn-success.loading::after,
.nc-glass-btn-warning.loading::after,
.nc-glass-btn-info.loading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: nc-glass-spin 700ms linear infinite;
}
@keyframes nc-glass-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   3. GLASS ICON BUTTON — 32x32 tile + semantic variants
   ===================================================================== */
.nc-glass-btn-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nc-radius-sm, 8px);
    background: color-mix(in srgb, var(--color-card-2) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    color: var(--color-muted);
    cursor: pointer;
    transition: all var(--nc-ease-ms, 180ms) ease;
    position: relative;
    overflow: visible;
    padding: 0;
    line-height: 1;
}
.nc-glass-btn-icon i { font-size: 13px; }
.nc-glass-btn-icon:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    box-shadow:
        0 0 16px color-mix(in srgb, var(--color-primary) calc(40% * var(--nc-glow-alpha, 1)), transparent),
        0 calc(4px * var(--nc-shadow-mult, 1)) calc(12px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-primary) calc(22% * var(--nc-glow-alpha, 1)), transparent);
}
.nc-glass-btn-icon:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
}
.nc-glass-btn-icon.sm { width: 28px; height: 28px; }
.nc-glass-btn-icon.success { color: color-mix(in srgb, var(--color-success) 80%, var(--color-text)); }
.nc-glass-btn-icon.success:hover {
    border-color: color-mix(in srgb, var(--color-success) 60%, transparent);
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    color: var(--color-success);
    box-shadow:
        0 0 16px color-mix(in srgb, var(--color-success) calc(45% * var(--nc-glow-alpha, 1)), transparent),
        0 4px 12px color-mix(in srgb, var(--color-success) calc(25% * var(--nc-glow-alpha, 1)), transparent);
}
.nc-glass-btn-icon.warning { color: color-mix(in srgb, var(--color-warning) 80%, var(--color-text)); }
.nc-glass-btn-icon.warning:hover {
    border-color: color-mix(in srgb, var(--color-warning) 60%, transparent);
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    color: var(--color-warning);
    box-shadow:
        0 0 16px color-mix(in srgb, var(--color-warning) calc(45% * var(--nc-glow-alpha, 1)), transparent),
        0 4px 12px color-mix(in srgb, var(--color-warning) calc(25% * var(--nc-glow-alpha, 1)), transparent);
}
.nc-glass-btn-icon.danger { color: color-mix(in srgb, var(--color-danger) 80%, var(--color-text)); }
.nc-glass-btn-icon.danger:hover {
    border-color: color-mix(in srgb, var(--color-danger) 60%, transparent);
    background: color-mix(in srgb, var(--color-danger) 16%, transparent);
    color: var(--color-danger);
    box-shadow:
        0 0 18px color-mix(in srgb, var(--color-danger) calc(50% * var(--nc-glow-alpha, 1)), transparent),
        0 4px 12px color-mix(in srgb, var(--color-danger) calc(28% * var(--nc-glow-alpha, 1)), transparent);
}
.nc-glass-btn-icon.info { color: color-mix(in srgb, var(--color-info) 80%, var(--color-text)); }
.nc-glass-btn-icon.info:hover {
    border-color: color-mix(in srgb, var(--color-info) 60%, transparent);
    background: color-mix(in srgb, var(--color-info) 14%, transparent);
    color: var(--color-info);
    box-shadow:
        0 0 16px color-mix(in srgb, var(--color-info) calc(45% * var(--nc-glow-alpha, 1)), transparent),
        0 4px 12px color-mix(in srgb, var(--color-info) calc(25% * var(--nc-glow-alpha, 1)), transparent);
}
.nc-glass-btn-icon:disabled,
.nc-glass-btn-icon.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
    border-color: color-mix(in srgb, var(--color-border) 50%, transparent);
    color: var(--color-muted);
}
.nc-glass-btn-icon:disabled:hover,
.nc-glass-btn-icon.disabled:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
}

/* =====================================================================
   4. ROTATING REFRESH BUTTON (28x28 glass icon, rotates on hover)
   ===================================================================== */
.nc-glass-refresh-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nc-radius-sm, 8px);
    background: color-mix(in srgb, var(--color-card) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    color: var(--color-muted);
    cursor: pointer;
    transition: all var(--nc-ease-ms, 160ms) ease;
    font-size: 12px;
    padding: 0;
    line-height: 1;
}
.nc-glass-refresh-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) calc(25% * var(--nc-glow-alpha, 1)), transparent);
}
.nc-glass-refresh-btn:active { transform: scale(0.94); }
.nc-glass-refresh-btn i { transition: transform 600ms ease; }
.nc-glass-refresh-btn:hover i { transform: rotate(180deg); }
.nc-glass-refresh-btn.spinning i { animation: nc-glass-refresh-spin 800ms linear infinite; }
@keyframes nc-glass-refresh-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   5. GLASS INPUTS (text / number / password / email / search / textarea)
   ===================================================================== */
.nc-glass-input,
textarea.nc-glass-input {
    width: 100%;
    height: 36px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-card) 75%, transparent);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    border-radius: var(--nc-radius-md, 10px);
    outline: none;
    transition: border-color var(--nc-ease-ms, 160ms) ease,
                box-shadow var(--nc-ease-ms, 160ms) ease,
                background var(--nc-ease-ms, 160ms) ease;
    box-sizing: border-box;
}
textarea.nc-glass-input {
    height: auto;
    min-height: 80px;
    line-height: 1.5;
    resize: vertical;
}
.nc-glass-input.mono { font-family: var(--nc-mono-stack); font-variant-numeric: tabular-nums; font-size: var(--nc-mono-size, 12.5px); }
.nc-glass-input::placeholder { color: var(--color-muted); }
.nc-glass-input:hover {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
}
.nc-glass-input:focus,
textarea.nc-glass-input:focus {
    border-color: color-mix(in srgb, var(--color-primary) 65%, transparent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent),
        0 0 14px color-mix(in srgb, var(--color-primary) calc(25% * var(--nc-glow-alpha, 1)), transparent);
}
.nc-glass-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* =====================================================================
   6. GLASS DROPDOWN — Portal pattern (.nc-glass-dd + .nc-glass-dd-btn)
   The menu is teleported to document.body on open. Rules below MUST NOT
   live inside any ancestor scope; they apply globally.
   ===================================================================== */
.nc-glass-dd {
    position: relative;
    display: inline-block;
}
.nc-glass-dd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--nc-radius-sm, 8px);
    background: color-mix(in srgb, var(--color-card) 70%, transparent);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    color: var(--color-text);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color var(--nc-ease-ms, 160ms) ease,
                box-shadow var(--nc-ease-ms, 160ms) ease,
                background var(--nc-ease-ms, 160ms) ease;
    white-space: nowrap;
}
.nc-glass-dd-btn:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.nc-glass-dd.open .nc-glass-dd-btn {
    border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent),
        0 0 14px color-mix(in srgb, var(--color-primary) calc(25% * var(--nc-glow-alpha, 1)), transparent);
}
.nc-glass-dd-btn .nc-glass-dd-label {
    font-family: var(--nc-mono-stack);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 600;
}
.nc-glass-dd-btn .nc-glass-dd-caret {
    font-size: 10px;
    color: var(--color-muted);
    transition: transform var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-dd.open .nc-glass-dd-btn .nc-glass-dd-caret {
    transform: rotate(180deg);
    color: var(--color-primary);
}

/* Menu — global (teleported to body) */
.nc-glass-dd-menu {
    display: none;
    position: fixed !important;
    z-index: 999999 !important;
    min-width: 180px;
    max-width: 320px;
    max-height: min(400px, calc(100vh - 80px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    background: color-mix(in srgb, var(--color-card) 78%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
    border-radius: var(--nc-radius-lg, 12px);
    box-shadow:
        0 calc(20px * var(--nc-shadow-mult, 1)) calc(50px * var(--nc-shadow-mult, 1)) rgba(2, 6, 23, 0.45),
        0 0 24px color-mix(in srgb, var(--color-primary) calc(22% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
    isolation: auto;
    animation: nc-glass-dd-fade var(--nc-ease-ms, 180ms) ease-out;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-primary) 40%, transparent) transparent;
}
.nc-glass-dd-menu::-webkit-scrollbar { width: 6px; }
.nc-glass-dd-menu::-webkit-scrollbar-track { background: transparent; }
.nc-glass-dd-menu::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-primary) 40%, transparent);
    border-radius: 3px;
}
.nc-glass-dd-menu::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-primary) 60%, transparent);
}
@keyframes nc-glass-dd-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nc-glass-dd-menu.open { display: block; }
.nc-glass-dd-menu button,
.nc-glass-dd-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--nc-radius-sm, 8px);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--nc-mono-stack);
    font-size: 12.5px;
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    transition: background var(--nc-ease-ms, 160ms) ease,
                color var(--nc-ease-ms, 160ms) ease,
                transform var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-dd-menu button:hover,
.nc-glass-dd-menu a:hover {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    transform: translateX(2px);
}
.nc-glass-dd-menu button.active {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    color: var(--color-primary);
    font-weight: 700;
}
.nc-glass-dd-menu button.active::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: auto;
    font-size: 10px;
}
.nc-glass-dd-menu .nc-glass-dd-divider,
.nc-glass-dd-menu .divider {
    height: 1px;
    background: color-mix(in srgb, var(--color-border) 60%, transparent);
    margin: 4px 0;
}
.nc-glass-dd-menu button.danger:hover,
.nc-glass-dd-menu a.danger:hover {
    background: color-mix(in srgb, var(--color-danger) 14%, transparent);
    color: var(--color-danger);
}
.nc-glass-dd-menu button.warning,
.nc-glass-dd-menu a.warning {
    color: var(--color-warning);
}
.nc-glass-dd-menu button.warning:hover,
.nc-glass-dd-menu a.warning:hover {
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    color: var(--color-warning);
}

/* =====================================================================
   LOCKDOWN — prevent incorrect dropdown patterns.

   PURPOSE: catch any future native <select> that pretends to be a glass
   widget. The canonical glass dropdown is .nc-glass-dd + .nc-glass-dd-btn
   + .nc-glass-dd-menu (with ncGddToggle() in app.js). A native <select>
   carrying ANY class that starts with `nc-glass-` is therefore wrong by
   construction — the OS dropdown renders OS-default on open, which clashes
   with the glass aesthetic.

   This rule fires on every `select[class*="nc-glass-"]` — broader than
   just `nc-glass-input`, so future renames (nc-glass-select, nc-glass-input-sm,
   etc.) are caught automatically. Visual signal is impossible to miss
   in QA + dev.

   No existing dropdown is "locked from change" — converting to the
   canonical pattern makes the canary disappear. The lockdown isolates
   the wrong pattern; it does not freeze pages.

   For genuine form-field selects (where the OS dropdown IS the right UX),
   use class `nc-form-select` — it carries no canary because it doesn't
   market itself as glass. Reference: /admin/settings/theme.php?tab=style.
   ===================================================================== */
select[class*="nc-glass-"] {
    outline: 3px dashed #ff3b30 !important;
    outline-offset: 2px !important;
    background:
        repeating-linear-gradient(45deg,
            rgba(255,59,48,0.18) 0,
            rgba(255,59,48,0.18) 8px,
            transparent 8px,
            transparent 16px) !important;
    box-shadow: 0 0 0 3px rgba(255,59,48,0.35), 0 0 18px rgba(255,59,48,0.55) !important;
}
select[class*="nc-glass-"]::before {
    content: "\26A0 STYLE VIOLATION: native <select> with .nc-glass-* class \2014 use the canonical .nc-glass-dd pattern (button + .nc-glass-dd-menu + ncGddToggle).";
    display: block;
    color: #fff;
    background: #ff3b30;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

/* =====================================================================
   7. GLASS CALENDAR — date picker popup (Portal teleport to body)
   ===================================================================== */
.nc-glass-cal {
    position: fixed;
    z-index: 999999;
    width: 280px;
    padding: 0;
    background: color-mix(in srgb, var(--color-card) 78%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
    border-radius: var(--nc-radius-lg, 12px);
    box-shadow:
        0 calc(20px * var(--nc-shadow-mult, 1)) calc(50px * var(--nc-shadow-mult, 1)) rgba(2, 6, 23, 0.45),
        0 0 24px color-mix(in srgb, var(--color-primary) calc(22% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
    overflow: hidden;
    isolation: auto;
    animation: nc-glass-cal-fade var(--nc-ease-ms, 180ms) ease-out;
    color: var(--color-text);
    user-select: none;
}
@keyframes nc-glass-cal-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nc-glass-cal-hdr {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    height: 38px;
    padding: 0 6px;
    background: linear-gradient(135deg,
        var(--color-primary),
        color-mix(in srgb, var(--color-primary) 75%, transparent));
    color: #fff;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent);
}
.nc-glass-cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, #fff 22%, transparent);
    background: color-mix(in srgb, #fff 8%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 7px;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
    padding: 0;
}
.nc-glass-cal-nav:hover {
    background: color-mix(in srgb, #fff 18%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, #fff 30%, transparent);
    transform: translateY(-1px);
}
.nc-glass-cal-nav:active { transform: translateY(0); }
.nc-glass-cal-title {
    text-align: center;
    font-family: var(--nc-mono-stack);
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.nc-glass-cal-wkrow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 8px 4px 8px;
    gap: 2px;
}
.nc-glass-cal-wklabel {
    text-align: center;
    font-family: var(--nc-mono-stack);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    padding: 2px 0;
}
.nc-glass-cal-wklabel.wkend { color: color-mix(in srgb, var(--color-warning) 70%, var(--color-muted)); }
.nc-glass-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 4px 8px 8px 8px;
}
.nc-glass-cal-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: var(--nc-radius-sm, 8px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text);
    font-family: var(--nc-mono-stack);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
    padding: 0;
}
.nc-glass-cal-day:hover {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
}
.nc-glass-cal-day.other-month { opacity: 0.35; }
.nc-glass-cal-day.weekend { color: color-mix(in srgb, var(--color-warning) 70%, var(--color-text)); }
.nc-glass-cal-day.today {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) calc(40% * var(--nc-glow-alpha, 1)), transparent);
    animation: nc-glass-cal-today-pulse 1.8s ease-in-out infinite;
}
.nc-glass-cal-day.today:hover {
    background: color-mix(in srgb, var(--color-primary) 88%, #fff);
    color: #fff;
}
.nc-glass-cal-day.selected {
    background: var(--color-primary);
    color: #fff;
    border: 2px solid color-mix(in srgb, #fff 60%, var(--color-primary));
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.nc-glass-cal-day.selected.today { border: 2px solid #fff; }
@keyframes nc-glass-cal-today-pulse {
    0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) calc(32% * var(--nc-glow-alpha, 1)), transparent); }
    50%      { box-shadow: 0 0 16px color-mix(in srgb, var(--color-primary) calc(55% * var(--nc-glow-alpha, 1)), transparent); }
}
.nc-glass-cal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px 10px 12px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.nc-glass-cal-today-btn {
    background: transparent;
    border: none;
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--color-primary);
    font-family: var(--nc-mono-stack);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    cursor: pointer;
    transition: background 140ms ease, filter 140ms ease;
}
.nc-glass-cal-today-btn:hover {
    text-decoration: underline;
    filter: brightness(1.2);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* =====================================================================
   8. GLASS MODAL — backdrop + panel (.nc-glass-modal-*)
   ===================================================================== */
.nc-glass-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: color-mix(in srgb, #020617 65%, transparent);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    display: none;
    align-items: center;
    justify-content: center;
    animation: nc-glass-modal-fade 180ms ease-out;
}
.nc-glass-modal-backdrop.is-open { display: flex; }

/* Deprecated backdrop aliases — every legacy class inherits the canonical
   blur+saturate so unmigrated pages still render correctly. New code MUST
   use .nc-glass-modal-backdrop. Sweep migration in progress 2026-06-10. */
.iv-modal-overlay,
.rc-modal-overlay,
.tr-modal-overlay,
.ts-modal-overlay,
.tv-modal-overlay,
.tk-modal-overlay,
.pj-modal-overlay,
.cfi-modal-overlay,
.paymth-modal-overlay,
.rol-modal-overlay,
.om-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: color-mix(in srgb, #020617 65%, transparent);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    display: none;
    align-items: center;
    justify-content: center;
    animation: nc-glass-modal-fade 180ms ease-out;
}
.iv-modal-overlay.open, .iv-modal-overlay.is-open,
.rc-modal-overlay.open, .rc-modal-overlay.is-open,
.tr-modal-overlay.open, .tr-modal-overlay.is-open,
.ts-modal-overlay.open, .ts-modal-overlay.is-open,
.tv-modal-overlay.open, .tv-modal-overlay.is-open,
.tk-modal-overlay.open, .tk-modal-overlay.is-open,
.pj-modal-overlay.open, .pj-modal-overlay.is-open,
.cfi-modal-overlay.open, .cfi-modal-overlay.is-open,
.paymth-modal-overlay.open, .paymth-modal-overlay.is-open,
.rol-modal-overlay.open, .rol-modal-overlay.is-open,
.om-modal-backdrop.open, .om-modal-backdrop.is-open { display: flex; }

@keyframes nc-glass-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.nc-glass-modal-panel {
    background: color-mix(in srgb, var(--color-card) 88%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
    border-radius: var(--nc-radius-lg, 16px);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 32px color-mix(in srgb, var(--color-primary) calc(28% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, var(--color-primary) 18%, transparent);
    overflow: hidden;
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    isolation: auto;
}
.nc-glass-modal-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 55%),
        radial-gradient(circle at bottom left, color-mix(in srgb, var(--color-info, #6366f1) 14%, transparent), transparent 55%);
    z-index: 0;
}
.nc-glass-modal-panel > * { position: relative; z-index: 1; }
.nc-glass-modal-header {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--color-primary) 16%, transparent),
        color-mix(in srgb, var(--color-primary) 4%, transparent) 70%,
        transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    padding: 14px 22px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.nc-glass-modal-header::after {
    content: "";
    position: absolute;
    left: 22px; right: 22px; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-primary), transparent);
    box-shadow: 0 0 10px var(--color-primary);
    opacity: 0.65;
}
.nc-glass-modal-title {
    font-family: var(--nc-mono-stack);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.nc-glass-modal-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-muted);
    border-radius: var(--nc-radius-sm, 8px);
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, transform 120ms ease;
}
.nc-glass-modal-close:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-danger) 14%, transparent);
    transform: rotate(90deg);
}
.nc-glass-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: calc(92vh - 130px);
}
.nc-glass-modal-body.long-form {
    font-size: 14px;
    line-height: 1.6;
}
.nc-glass-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    background: color-mix(in srgb, var(--color-card-2) 40%, transparent);
}

/* Short-form aliases (.nc-glass-modal / -head / -foot).
   Some pages use the shorter names; keep both spellings canonical so
   markup renders identically regardless of which variant is used.
   Rules mirror .nc-glass-modal-panel / -header / -footer above. */
.nc-glass-modal {
    background: color-mix(in srgb, var(--color-card) 88%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
    border-radius: var(--nc-radius-lg, 16px);
    box-shadow:
        0 24px 60px color-mix(in srgb, #000 45%, transparent),
        0 0 32px color-mix(in srgb, var(--color-primary) calc(28% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, var(--color-primary) 18%, transparent);
    position: relative;
    width: min(560px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: auto;
}
.nc-glass-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 55%),
        radial-gradient(circle at bottom left, color-mix(in srgb, var(--color-info, #6366f1) 14%, transparent), transparent 55%);
    z-index: 0;
}
.nc-glass-modal > * { position: relative; z-index: 1; }
.nc-glass-modal-head {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--color-primary) 16%, transparent),
        color-mix(in srgb, var(--color-primary) 4%, transparent) 70%,
        transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    padding: 14px 22px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}
.nc-glass-modal-head::after {
    content: "";
    position: absolute;
    left: 22px; right: 22px; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-primary), transparent);
    box-shadow: 0 0 10px var(--color-primary);
    opacity: 0.65;
}
.nc-glass-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    background: color-mix(in srgb, var(--color-card-2) 40%, transparent);
    flex-shrink: 0;
}

/* =====================================================================
   9. STATUS PILL — currentColor pattern
   Color set inline via style="color:..." drives border + tinted bg.
   ===================================================================== */
.nc-glass-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-family: var(--nc-mono-stack);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 12%, transparent) !important;
    box-shadow: 0 0 12px color-mix(in srgb, currentColor calc(25% * var(--nc-glow-alpha, 1)), transparent);
    line-height: 1.4;
    white-space: nowrap;
}
.nc-glass-pill[data-tone="primary"] { color: var(--color-primary); }
.nc-glass-pill[data-tone="info"]    { color: var(--color-info); }
.nc-glass-pill[data-tone="success"] { color: var(--color-success); }
.nc-glass-pill[data-tone="warning"] { color: var(--color-warning); }
.nc-glass-pill[data-tone="danger"]  { color: var(--color-danger); }
.nc-glass-pill[data-tone="muted"]   { color: var(--color-muted); }

/* =====================================================================
   10. PULSING LIVE DOT
   ===================================================================== */
.nc-glass-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    vertical-align: middle;
}
.nc-glass-dot.live {
    animation: nc-glass-pulse 1.8s ease-in-out infinite;
}
.nc-glass-dot.sm { width: 6px; height: 6px; }
.nc-glass-dot.lg { width: 11px; height: 11px; }
.nc-glass-dot[data-tone="primary"] { color: var(--color-primary); }
.nc-glass-dot[data-tone="info"]    { color: var(--color-info); }
.nc-glass-dot[data-tone="success"] { color: var(--color-success); }
.nc-glass-dot[data-tone="warning"] { color: var(--color-warning); }
.nc-glass-dot[data-tone="danger"]  { color: var(--color-danger); }
.nc-glass-dot[data-tone="muted"]   { color: var(--color-muted); }
@keyframes nc-glass-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.22); }
}

/* =====================================================================
   11. SECTION HEAD — eyebrow + 40px gradient underline
   ===================================================================== */
.nc-glass-section-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nc-mono-stack);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-muted);
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 12px;
}
.nc-glass-section-head i {
    color: var(--color-primary);
    text-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) calc(60% * var(--nc-glow-alpha, 1)), transparent);
}
.nc-glass-section-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), transparent);
    border-radius: 2px;
}

/* =====================================================================
   12. GLASS TAB BAR (.nc-glass-tab-bar + .nc-glass-tab)
   Operator-preferred — matches /admin/customers/view.php tab style.
   ===================================================================== */
.nc-glass-tab-bar {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--color-card) 75%, transparent);
    backdrop-filter: blur(var(--nc-blur, 12px)) saturate(var(--nc-saturate, 150%));
    -webkit-backdrop-filter: blur(var(--nc-blur, 12px)) saturate(var(--nc-saturate, 150%));
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--nc-radius-md, 10px);
    overflow-x: auto;
    scrollbar-width: thin;
}
.nc-glass-tab-bar::-webkit-scrollbar { height: 4px; }
.nc-glass-tab-bar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: 2px;
}
.nc-glass-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--color-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: transform var(--nc-ease-ms, 160ms) ease,
                background var(--nc-ease-ms, 160ms) ease,
                color var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-tab:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--color-card-2) 60%, transparent);
    color: var(--color-text);
}
.nc-glass-tab.active {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    font-weight: 600;
}
.nc-glass-tab.active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -7px;
    height: 2px;
    background: var(--color-primary);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 60%, transparent);
    border-radius: 1px;
}
.nc-glass-tab-icon {
    font-size: 13px;
    width: 14px;
    text-align: center;
}
.nc-glass-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    color: var(--color-primary);
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10.5px;
    font-weight: 700;
    margin-left: 4px;
}
.nc-glass-tab.active .nc-glass-tab-badge {
    background: color-mix(in srgb, var(--color-primary) 28%, transparent);
}

/* =====================================================================
   12b. Tabs — legacy-named alias (.nc-tabs / .nc-tab)
   Same visual language as .nc-glass-tab-bar / .nc-glass-tab (section 12)
   but for the `.nc-tabs` markup used by /admin/customers/view.php,
   /admin/network/router_logs.php, /admin/network/dns_redirect.php and
   /admin/settings/wispcontrol.php. Kept as a separate selector so the
   two markup families coexist without one clobbering the other.

   Pane visibility (.cv-tabpane / .cv-hidden) is also here because the
   global JS helper `ncTabSwitch()` in assets/js/app.js toggles the
   `cv-hidden` class on `#tab-<key>` panes.
   ===================================================================== */
.nc-tabs {
    background: color-mix(in srgb, var(--color-card) 75%, transparent);
    backdrop-filter: blur(var(--nc-blur, 12px)) saturate(var(--nc-saturate, 150%));
    -webkit-backdrop-filter: blur(var(--nc-blur, 12px)) saturate(var(--nc-saturate, 150%));
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--nc-radius-md, 10px);
    padding: 6px 8px;
    box-shadow: 0 0 16px color-mix(in srgb, var(--color-primary) 8%, transparent);
    isolation: auto;
}
.nc-tabs .nc-tab-bar {
    display: flex;
    gap: 4px;
    border-bottom: none;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
}
.nc-tabs .nc-tab-bar::-webkit-scrollbar { height: 4px; }
.nc-tabs .nc-tab-bar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: 2px;
}
.nc-tabs .nc-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0;
    border: none;
    border-bottom: none;
    border-radius: 8px;
    color: var(--color-muted);
    background: transparent;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--nc-ease-ms, 160ms) ease,
                background var(--nc-ease-ms, 160ms) ease,
                color var(--nc-ease-ms, 160ms) ease,
                box-shadow var(--nc-ease-ms, 160ms) ease;
}
.nc-tabs .nc-tab:hover {
    transform: translateY(-1px);
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-card-2) 60%, transparent);
}
.nc-tabs .nc-tab.active {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    font-weight: 600;
    box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.nc-tabs .nc-tab.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-primary);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.nc-tabs .nc-tab .nc-tab-icon {
    font-size: 13px;
    width: 14px;
    text-align: center;
    opacity: 0.9;
}

/* Pane visibility — global. Referenced by ncTabSwitch() in app.js and by
   every `.nc-tabs` page. Do NOT rename these classes: app.js + 4 pages
   depend on them by name. */
.cv-tabpane { display: block; }
.cv-hidden { display: none !important; }
.cv-tabpane.cv-hidden { display: none !important; }

/* =====================================================================
   13. UTILITY — mono helper for arbitrary spans
   ===================================================================== */
.nc-glass-mono {
    font-family: var(--nc-mono-stack);
    font-variant-numeric: tabular-nums;
    font-size: var(--nc-mono-size, 12.5px);
}

/* =====================================================================
   15. GLASS NAV — canonical sidebar primitives
   Mirrors the Style sampler "Sidebar nav replica" pixel-for-pixel.
   Both the replica and the real sidebar consume these classes —
   single source of truth. Keep .ts-sb-* and .nc-glass-nav-* identical.
   ===================================================================== */
.nc-glass-nav-shell {
    background: color-mix(in srgb, var(--color-card) 80%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    backdrop-filter: blur(var(--nc-blur, 10px)) saturate(var(--nc-saturate, 150%));
    -webkit-backdrop-filter: blur(var(--nc-blur, 10px)) saturate(var(--nc-saturate, 150%));
    padding: 14px 10px;
    isolation: auto;
}
:root[data-theme="dark"] .nc-glass-nav-shell {
    background: color-mix(in srgb, var(--color-card) 82%, transparent);
}

.nc-glass-nav-group {
    padding: 6px 10px;
    font-family: var(--nc-mono-stack, ui-monospace, monospace);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-muted);
    opacity: 0.7;
    margin-top: 6px;
}
.nc-glass-nav-group.tier-purple  { color: var(--color-purple); opacity: 0.85; }
.nc-glass-nav-group.tier-success { color: var(--color-success); opacity: 0.85; }
.nc-glass-nav-group.tier-muted   { color: var(--color-muted); opacity: 0.7; }

.nc-glass-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 14px;
    margin: 2px 0;
    border-radius: var(--nc-radius-sm, 8px);
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
    transition: all var(--nc-ease-ms, 160ms) ease;
    border-left: 2px solid transparent;
    cursor: pointer;
    background: transparent;
}
.nc-glass-nav-item:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    text-decoration: none;
}
.nc-glass-nav-item.active {
    background: color-mix(in srgb, var(--color-primary) 16%, transparent);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    box-shadow: -2px 0 calc(8px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-primary) calc(30% * var(--nc-glow-alpha, 1)), transparent);
    font-weight: 600;
}
.nc-glass-nav-icon {
    width: 16px;
    font-size: 13px;
    flex-shrink: 0;
    text-align: center;
}
.nc-glass-nav-item.active .nc-glass-nav-icon {
    color: var(--color-primary);
    filter: drop-shadow(0 0 calc(4px * var(--nc-glow-alpha, 1) * 2) color-mix(in srgb, var(--color-primary) 50%, transparent));
}
.nc-glass-nav-arrow {
    font-size: 9px;
    color: var(--color-muted);
    transition: transform var(--nc-ease-ms, 160ms) ease;
    flex-shrink: 0;
}
.nc-glass-nav-item.is-open > .nc-glass-nav-arrow,
.menu-group.open > .nc-glass-nav-item > .nc-glass-nav-arrow,
.menu-subgroup.open > .nc-glass-nav-item > .nc-glass-nav-arrow {
    transform: rotate(90deg);
}
.nc-glass-nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nc-glass-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    font-family: var(--nc-mono-stack, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 9.5px;
    font-weight: 700;
    color: #fff;
    background: var(--color-danger);
    border-radius: 999px;
    box-shadow: 0 0 calc(10px * var(--nc-shadow-mult, 1)) color-mix(in srgb, var(--color-danger) calc(35% * var(--nc-glow-alpha, 1)), transparent);
}
.nc-glass-nav-children {
    display: none;
    padding-left: 10px;
}
.menu-group.open > .nc-glass-nav-children,
.menu-subgroup.open > .nc-glass-nav-children {
    display: block;
}
.nc-glass-nav-children .nc-glass-nav-item {
    padding-left: 36px;
    font-size: 12.5px;
}
.nc-glass-nav-children .nc-glass-nav-children .nc-glass-nav-item {
    padding-left: 52px;
    font-size: 12px;
}

/* Sidebar brand-mark image (top of #sidebar in layout.php).
   Hard cap so fallback logos at their native size (e.g. the 1.37 MB
   /assets/images/netcore-favicon.png) can never blow up the sidebar. */
.nc-side-brand-logo {
    max-width: 32px;
    max-height: 32px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}

/* =====================================================================
   15. GLASS HERO — page header strip with eyebrow + title + actions
   ===================================================================== */
.nc-glass-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    margin: 0 0 18px 0;
    background: color-mix(in srgb, var(--color-card) 86%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--nc-radius-xl, 14px);
    box-shadow:
        0 calc(8px * var(--nc-shadow-mult, 1)) calc(28px * var(--nc-shadow-mult, 1)) rgba(2, 6, 23, 0.18),
        inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
    isolation: auto;
    position: relative;
    overflow: hidden;
}
.nc-glass-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 8%, transparent) 0%,
        transparent 60%);
    pointer-events: none;
}
.nc-glass-hero > * { position: relative; z-index: 1; }
.nc-glass-hero-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nc-glass-eyebrow {
    font-family: var(--nc-mono-stack);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-primary);
    opacity: 0.85;
}
.nc-glass-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
}
.nc-glass-hero-subtitle {
    font-size: 12.5px;
    color: var(--color-muted);
}
.nc-glass-hero-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* =====================================================================
   16. GLASS KPI BENTO — 4-up KPI tile grid + sparklines
   ===================================================================== */
.nc-glass-kpi-bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 0 0 18px 0;
}
.nc-glass-kpi-tile {
    position: relative;
    padding: 16px 18px;
    background: color-mix(in srgb, var(--color-card) 84%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--nc-radius-xl, 14px);
    box-shadow:
        0 calc(6px * var(--nc-shadow-mult, 1)) calc(22px * var(--nc-shadow-mult, 1)) rgba(2, 6, 23, 0.16),
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
    transition: transform var(--nc-ease-ms, 160ms) ease, box-shadow var(--nc-ease-ms, 160ms) ease;
    isolation: auto;
    overflow: hidden;
}
.nc-glass-kpi-tile:hover {
    transform: translateY(-2px);
    box-shadow:
        0 calc(10px * var(--nc-shadow-mult, 1)) calc(28px * var(--nc-shadow-mult, 1)) rgba(2, 6, 23, 0.22),
        0 0 18px color-mix(in srgb, var(--color-primary) calc(18% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
}
.nc-glass-kpi-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--nc-kpi-accent, transparent) 0%, transparent 55%);
    opacity: 0.18;
    pointer-events: none;
}
.nc-glass-kpi-tile[data-tone="primary"] { --nc-kpi-accent: var(--color-primary); }
.nc-glass-kpi-tile[data-tone="info"]    { --nc-kpi-accent: var(--color-info); }
.nc-glass-kpi-tile[data-tone="success"] { --nc-kpi-accent: var(--color-success); }
.nc-glass-kpi-tile[data-tone="warning"] { --nc-kpi-accent: var(--color-warning); }
.nc-glass-kpi-tile[data-tone="danger"]  { --nc-kpi-accent: var(--color-danger); }
.nc-glass-kpi-tile[data-tone="purple"]  { --nc-kpi-accent: var(--color-purple, #8b5cf6); }
a.nc-glass-kpi-tile,
a.nc-glass-kpi-tile:visited {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.nc-glass-kpi-tile:hover { text-decoration: none; }
a.nc-glass-kpi-tile:hover .nc-glass-kpi-label { color: var(--nc-kpi-accent, var(--color-primary)); }
.nc-glass-kpi-tile > * { position: relative; z-index: 1; }
.nc-glass-kpi-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.nc-glass-kpi-label {
    font-family: var(--nc-mono-stack);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-muted);
}
.nc-glass-kpi-value {
    font-family: var(--nc-mono-stack);
    font-variant-numeric: tabular-nums;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.nc-glass-kpi-value.sm { font-size: 18px; line-height: 1.25; }
.nc-glass-kpi-tile[data-tone="primary"] .nc-glass-kpi-value { color: var(--color-primary); }
.nc-glass-kpi-tile[data-tone="info"]    .nc-glass-kpi-value { color: var(--color-info); }
.nc-glass-kpi-tile[data-tone="success"] .nc-glass-kpi-value { color: var(--color-success); }
.nc-glass-kpi-tile[data-tone="warning"] .nc-glass-kpi-value { color: var(--color-warning); }
.nc-glass-kpi-tile[data-tone="danger"]  .nc-glass-kpi-value { color: var(--color-danger); }
.nc-glass-kpi-foot {
    margin-top: 10px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    color: var(--color-muted);
}
.nc-glass-kpi-spark { width: 80px; height: 22px; opacity: 0.85; }

/* =====================================================================
   17. GLASS TABLE — striped + hover + mono numerics, neon row select
   ===================================================================== */
.nc-glass-table-wrap {
    background: color-mix(in srgb, var(--color-card) 84%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--nc-radius-xl, 14px);
    overflow: hidden;
    isolation: auto;
    box-shadow:
        0 calc(6px * var(--nc-shadow-mult, 1)) calc(22px * var(--nc-shadow-mult, 1)) rgba(2, 6, 23, 0.16);
}
.nc-glass-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}
.nc-glass-table thead th {
    text-align: left;
    padding: 12px 14px;
    font-family: var(--nc-mono-stack);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    background: color-mix(in srgb, var(--color-card) 65%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    white-space: nowrap;
}
.nc-glass-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 35%, transparent);
    color: var(--color-text);
    vertical-align: middle;
}
.nc-glass-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--color-card) 12%, transparent);
}
.nc-glass-table tbody tr:hover td {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.nc-glass-table tbody tr.selected td {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.nc-glass-table tbody tr.selected td:first-child {
    box-shadow: inset 3px 0 0 0 var(--color-primary);
}
.nc-glass-table tbody tr:last-child td { border-bottom: none; }
.nc-glass-table td.mono,
.nc-glass-table th.mono {
    font-family: var(--nc-mono-stack);
    font-variant-numeric: tabular-nums;
}
.nc-glass-table td.num,
.nc-glass-table th.num { text-align: right; }
.nc-glass-table td.center,
.nc-glass-table th.center { text-align: center; }
.nc-glass-table-pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
    background: color-mix(in srgb, var(--color-card) 65%, transparent);
    font-family: var(--nc-mono-stack);
    font-size: 11.5px;
    color: var(--color-muted);
}
.nc-glass-table-pager .nc-pager-pages { display: inline-flex; gap: 4px; }
.nc-glass-table-pager .nc-pager-pages a,
.nc-glass-table-pager .nc-pager-pages span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
    background: color-mix(in srgb, var(--color-card) 60%, transparent);
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--nc-mono-stack);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    transition: background var(--nc-ease-ms, 160ms) ease, border-color var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-table-pager .nc-pager-pages a:hover {
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    color: var(--color-primary);
}
.nc-glass-table-pager .nc-pager-pages span.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* =====================================================================
   18. GLASS FORM ROW / LABEL — vertical form grouping
   ===================================================================== */
.nc-glass-form { display: flex; flex-direction: column; gap: 14px; }
.nc-glass-form-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nc-glass-form-row.row-inline { flex-direction: row; align-items: center; gap: 10px; }
.nc-glass-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.nc-glass-label {
    font-family: var(--nc-mono-stack);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}
.nc-glass-hint {
    font-size: 11.5px;
    color: var(--color-muted);
    line-height: 1.5;
}
/* =====================================================================
   18.1 GLASS TIP — hover tooltip on info icon
   ===================================================================== */
.nc-glass-tip-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.nc-glass-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    color: var(--color-muted);
    font-size: 12px;
    cursor: help;
    transition: color 160ms ease;
    vertical-align: middle;
}
.nc-glass-tip-wrap:hover .nc-glass-tip-icon,
.nc-glass-tip-wrap:focus-within .nc-glass-tip-icon { color: var(--color-primary); }
.nc-glass-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 8px 12px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-card) 88%, transparent);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: 8px;
    box-shadow: 0 8px 24px color-mix(in srgb, #000 35%, transparent),
                0 0 16px color-mix(in srgb, var(--color-primary) 22%, transparent);
    max-width: 280px;
    width: max-content;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 10010;
    text-align: left;
}
.nc-glass-tip strong { color: var(--color-text); font-weight: 700; }
.nc-glass-tip-wrap:hover .nc-glass-tip,
.nc-glass-tip-wrap:focus-within .nc-glass-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
/* Right-anchored variant for icons near the right edge that would clip. */
.nc-glass-tip.right { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.nc-glass-tip-wrap:hover .nc-glass-tip.right,
.nc-glass-tip-wrap:focus-within .nc-glass-tip.right { transform: translateX(0) translateY(0); }
/* Portal / teleported mode — driven by the global positioner in app.js.
   When ncTipShow() moves the tooltip to <body> it flips to fixed coords with
   its own left/top set via inline style, so we neutralize the anchored
   position: absolute transforms and let the JS decide flip + clamp.
   Uses .is-portal to opt-in; falls back to the CSS-only positioning above
   when JS is disabled or the tooltip is still nested inside its wrap. */
.nc-glass-tip.is-portal {
    position: fixed;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    transform: translateY(4px);
    opacity: 0;
    pointer-events: none;
    /* Above glass-dropdown Portal menus (.nc-glass-dd-menu = 999999) so a
       tooltip anchored on a page with an open dropdown / stacking panel /
       modal never renders behind. Kept as a single global rule -- do not
       override per page. */
    z-index: 1000000;
}
.nc-glass-tip.is-portal.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.nc-glass-textarea {
    min-height: 96px;
    padding: 10px 12px;
    border-radius: var(--nc-radius-md, 10px);
    background: color-mix(in srgb, var(--color-card) 70%, transparent);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    color: var(--color-text);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    transition: border-color var(--nc-ease-ms, 160ms) ease, box-shadow var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

/* =====================================================================
   19. GLASS SEARCH — input with leading icon
   ===================================================================== */
.nc-glass-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 200px;
}
.nc-glass-search > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    font-size: 12px;
    pointer-events: none;
}
.nc-glass-search > input {
    width: 100%;
    height: 32px;
    padding: 0 12px 0 32px;
    border-radius: var(--nc-radius-sm, 8px);
    background: color-mix(in srgb, var(--color-card) 70%, transparent);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    color: var(--color-text);
    font-family: inherit;
    font-size: 12.5px;
    transition: border-color var(--nc-ease-ms, 160ms) ease, box-shadow var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-search > input::placeholder { color: var(--color-muted); }
.nc-glass-search > input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

/* =====================================================================
   20. GLASS DATE WRAP — wraps <input type="date"> for global calendar
   ===================================================================== */
.nc-glass-date-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nc-glass-date-wrap > input[type="date"] {
    height: 32px;
    padding: 0 32px 0 12px;
    border-radius: var(--nc-radius-sm, 8px);
    background: color-mix(in srgb, var(--color-card) 70%, transparent);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    color: var(--color-text);
    font-family: var(--nc-mono-stack);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color var(--nc-ease-ms, 160ms) ease, box-shadow var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-date-wrap > input[type="date"]:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.nc-glass-date-wrap > input[type="date"]:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.nc-glass-date-wrap::after {
    content: "\f073"; /* fa-calendar */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    font-size: 12px;
    pointer-events: none;
}
.nc-glass-date-wrap > input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }

/* =====================================================================
   21. GLASS AVATAR — gradient-initials chip (canonical, platform-wide)
   ---------------------------------------------------------------------
   THE global avatar. Rendered by nc_avatar($name, $seed, $size) which
   sets an inline gradient based on the seed. The class-level background
   here is a FALLBACK only — when nc_avatar() supplies an inline
   `style="background:..."` the inline rule wins (no !important here),
   so each entity gets its own stable per-seed gradient.

   Sizes: default 32px (inline rows), .sm 24px (compact cells), .lg 40px
   (header strips), .xl 56px (profile heroes).
   ===================================================================== */
.nc-glass-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 78%, transparent),
        color-mix(in srgb, var(--color-purple, #8b5cf6) 65%, transparent));
    color: #fff;
    font-family: var(--nc-mono-stack);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow:
        0 0 0 1px color-mix(in srgb, #fff 12%, transparent),
        0 2px 6px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
    flex: 0 0 auto;
}
.nc-glass-avatar.sm  { width: 24px; height: 24px; font-size: 9.5px; flex-basis: 24px; }
.nc-glass-avatar.lg  { width: 40px; height: 40px; font-size: 13px;  flex-basis: 40px; }
.nc-glass-avatar.xl  { width: 56px; height: 56px; font-size: 17px;  flex-basis: 56px; }

/* =====================================================================
   22. GLASS ACTIVITY STREAM — vertical event list with leading dot
   ===================================================================== */
.nc-glass-activity { display: flex; flex-direction: column; gap: 0; }
.nc-glass-activity-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    padding: 12px 4px;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-border) 50%, transparent);
}
.nc-glass-activity-item:last-child { border-bottom: none; }
.nc-glass-activity-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 50%, transparent);
    margin-top: 5px;
    margin-left: 9px;
}
.nc-glass-activity-dot.info    { background: var(--color-info);    box-shadow: 0 0 10px color-mix(in srgb, var(--color-info) 50%, transparent); }
.nc-glass-activity-dot.success { background: var(--color-success); box-shadow: 0 0 10px color-mix(in srgb, var(--color-success) 50%, transparent); }
.nc-glass-activity-dot.warning { background: var(--color-warning); box-shadow: 0 0 10px color-mix(in srgb, var(--color-warning) 50%, transparent); }
.nc-glass-activity-dot.danger  { background: var(--color-danger);  box-shadow: 0 0 10px color-mix(in srgb, var(--color-danger) 50%, transparent); }
.nc-glass-activity-body { min-width: 0; }
.nc-glass-activity-line { font-size: 12.5px; color: var(--color-text); line-height: 1.45; }
.nc-glass-activity-meta {
    font-family: var(--nc-mono-stack);
    font-size: 10.5px;
    color: var(--color-muted);
    margin-top: 2px;
    letter-spacing: 0.04em;
}
.nc-glass-activity-time {
    font-family: var(--nc-mono-stack);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--color-muted);
    align-self: start;
    margin-top: 1px;
}

/* =====================================================================
   23. GLASS BULK BAR — floating sticky action strip for selected rows
   ===================================================================== */
.nc-glass-bulk-bar {
    position: sticky;
    bottom: 14px;
    z-index: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-top: 14px;
    background: color-mix(in srgb, var(--color-card) 88%, transparent);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    border-radius: var(--nc-radius-xl, 14px);
    box-shadow:
        0 calc(14px * var(--nc-shadow-mult, 1)) calc(40px * var(--nc-shadow-mult, 1)) rgba(2, 6, 23, 0.30),
        0 0 22px color-mix(in srgb, var(--color-primary) calc(28% * var(--nc-glow-alpha, 1)), transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
    isolation: auto;
    transform: translateY(0);
    transition: transform var(--nc-ease-ms, 160ms) ease, opacity var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-bulk-bar.hidden { display: none; }
.nc-glass-bulk-count {
    font-family: var(--nc-mono-stack);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-primary);
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.nc-glass-bulk-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* =====================================================================
   23b. GLASS CHECKBOX — canonical row / bulk-select tick box
   ===================================================================== */
.nc-glass-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 0;
}
.nc-glass-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    margin: 0;
    border: 1.5px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    background: color-mix(in srgb, var(--color-card) 70%, transparent);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: background var(--nc-ease-ms, 160ms) ease,
                border-color var(--nc-ease-ms, 160ms) ease,
                box-shadow var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-check input[type="checkbox"]:hover {
    border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}
.nc-glass-check input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.nc-glass-check input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.nc-glass-check input[type="checkbox"]:checked::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: #fff;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.nc-glass-check input[type="checkbox"]:indeterminate {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.nc-glass-check input[type="checkbox"]:indeterminate::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 9px; height: 2px;
    background: #fff;
    transform: translate(-50%, -50%);
    border-radius: 1px;
}
.nc-glass-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}
.nc-glass-table th.check-col,
.nc-glass-table td.check-col {
    width: 34px;
    text-align: center;
    padding-left: 12px;
    padding-right: 4px;
}

/* =====================================================================
   23c. GLASS SORT LINK — canonical sortable table header link
   ===================================================================== */
.nc-glass-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    background: none;
    border: 0;
    padding: 0;
    line-height: inherit;
    transition: color var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-sort:hover { color: var(--color-primary); }
.nc-glass-sort i {
    font-size: 10px;
    opacity: 0.55;
    transition: opacity var(--nc-ease-ms, 160ms) ease, color var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-sort.is-active { color: var(--color-primary); }
.nc-glass-sort.is-active i { opacity: 1; color: var(--color-primary); }

/* =====================================================================
   24. GLASS EMPTY STATE — centered icon + text + optional action
   ===================================================================== */
.nc-glass-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    text-align: center;
    color: var(--color-muted);
}
.nc-glass-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    color: var(--color-primary);
    font-size: 22px;
}
.nc-glass-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}
.nc-glass-empty-text {
    font-size: 12.5px;
    color: var(--color-muted);
    max-width: 380px;
    line-height: 1.55;
}

/* =====================================================================
   25. GLASS EDITOR — reply / message editor wrapper
   ===================================================================== */
.nc-glass-editor {
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--color-card) 84%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--nc-radius-xl, 14px);
    overflow: hidden;
    isolation: auto;
}
.nc-glass-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
    background: color-mix(in srgb, var(--color-card) 65%, transparent);
    flex-wrap: wrap;
}
.nc-glass-editor-body { padding: 0; }
.nc-glass-editor-body textarea {
    width: 100%;
    min-height: 140px;
    padding: 12px 14px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}
.nc-glass-editor-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
    background: color-mix(in srgb, var(--color-card) 65%, transparent);
}

/* =====================================================================
   26. GLASS SIDEBAR — right-rail property panel (ticket view etc.)
   ===================================================================== */
.nc-glass-prop-panel {
    display: flex; flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: color-mix(in srgb, var(--color-card) 84%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--nc-radius-xl, 14px);
    isolation: auto;
}
.nc-glass-prop {
    display: flex; flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-border) 50%, transparent);
}
.nc-glass-prop:last-child { border-bottom: none; padding-bottom: 0; }
.nc-glass-prop-label {
    font-family: var(--nc-mono-stack);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-muted);
}
.nc-glass-prop-value {
    font-size: 12.5px;
    color: var(--color-text);
}
.nc-glass-prop-value.mono {
    font-family: var(--nc-mono-stack);
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   27. GLASS SPLIT-GRID — wide-left + narrow-right responsive layout
   ===================================================================== */
.nc-glass-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 960px) {
    .nc-glass-split { grid-template-columns: 1fr; }
}

/* =====================================================================
   28. GLASS BENTO — flexible bento grid for dashboards
   ===================================================================== */
.nc-glass-bento {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 960px) { .nc-glass-bento { grid-template-columns: 1fr; } }
.nc-glass-bento-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* =====================================================================
   29. AJAX-PARTIAL loading state — applied by ncGddAjaxRefresh()
   to the data-ajax-target element for the duration of the fetch.
   Visual cue: dim + radial primary glow + soft pulse + pointer-events off.
   ===================================================================== */
.ncgdd-loading {
    position: relative;
    opacity: 0.65;
    pointer-events: none;
    transition: opacity 160ms ease;
}
.ncgdd-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,
        color-mix(in srgb, var(--color-primary) 14%, transparent) 0%,
        transparent 60%);
    pointer-events: none;
    animation: ncgdd-pulse 1.2s ease-in-out infinite;
    border-radius: inherit;
    z-index: 1;
}
@keyframes ncgdd-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* =====================================================================
   30. GLASS EDIT FORM — batched-edit pattern (NOT auto-AJAX).
   Use on edit forms where multiple dropdown/input changes are batched
   and committed via an explicit Save button. Visual contract:
     - Each tile/field carrying an unsaved change gets primary inset accent
     - Save / Discard action row fades in (opacity 0.35 → 1) when dirty
     - beforeunload warning is page-JS, not CSS
   Filter dropdowns use data-ajax-* (Rule E). Edit dropdowns use this.
   ===================================================================== */
.nc-glass-edit-dirty {
    position: relative;
    box-shadow:
        inset 3px 0 0 var(--color-primary),
        0 0 12px color-mix(in srgb, var(--color-primary) 28%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent) !important;
    transition: box-shadow 200ms ease;
}
.nc-glass-edit-dirty::after {
    content: '';
    position: absolute;
    top: 8px; right: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 70%, transparent);
    animation: nc-edit-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes nc-edit-dot-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1); }
}

.nc-glass-edit-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--color-card) 60%, transparent);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px dashed color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: 10px;
    opacity: 0.55;
    transition: opacity 200ms ease, border-color 200ms ease, background 200ms ease;
}
.nc-glass-edit-actions.is-dirty {
    opacity: 1;
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    background: color-mix(in srgb, var(--color-primary) 6%, color-mix(in srgb, var(--color-card) 70%, transparent));
}
.nc-glass-edit-actions .nc-glass-edit-hint {
    font-family: var(--nc-mono-stack);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}
.nc-glass-edit-actions.is-dirty .nc-glass-edit-hint {
    color: var(--color-primary);
}
.nc-glass-edit-actions button {
    opacity: 0.4;
    transition: opacity 200ms ease;
}
.nc-glass-edit-actions.is-dirty button {
    opacity: 1;
}
.nc-glass-edit-actions:not(.is-dirty) button[type="submit"] {
    pointer-events: none;
}

/* =====================================================================
   GLASS COLLAPSIBLE (.nc-glass-collapse)
   Disclosure / accordion pattern. Operator-canonical from
   network/provisioning/onu-mgmt.php "Retired / Replaced ONUs".
   ===================================================================== */
.nc-glass-collapse {
    background: color-mix(in srgb, var(--color-card) 78%, transparent);
    backdrop-filter: blur(var(--nc-blur, 12px)) saturate(var(--nc-saturate, 150%));
    -webkit-backdrop-filter: blur(var(--nc-blur, 12px)) saturate(var(--nc-saturate, 150%));
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--nc-radius-lg, 14px);
    overflow: hidden;
    transition: border-color var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-collapse:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.nc-glass-collapse-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background var(--nc-ease-ms, 160ms) ease;
}
.nc-glass-collapse-head:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.nc-glass-collapse-chev {
    font-size: 11px;
    color: var(--color-muted);
    transition: transform var(--nc-ease-ms, 160ms) ease;
    width: 12px;
    text-align: center;
}
.nc-glass-collapse[data-open="1"] .nc-glass-collapse-chev {
    transform: rotate(90deg);
    color: var(--color-primary);
}
.nc-glass-collapse-icon {
    font-size: 13px;
    color: var(--color-warning);
    width: 16px;
    text-align: center;
}
.nc-glass-collapse-title {
    flex: 1;
    font-weight: 600;
    color: var(--color-text);
    font-size: 14px;
}
.nc-glass-collapse-body {
    display: none;
    padding: 0 16px 16px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
}
.nc-glass-collapse[data-open="1"] .nc-glass-collapse-body {
    display: block;
}

/* =====================================================================
   25. GLASS LIST PANEL — bento wrapper for paginated tables / lists
   ===================================================================
   Use for any list/table panel that needs a header (title + controls),
   a body (edge-to-edge table), and a footer (pagination + count).
   NO left-edge accent — operator request. Override per-tab scoped
   inset accents that bleed into this pattern via more-specific rule. */
.nc-glass-list-panel {
    background: color-mix(in srgb, var(--color-card) 88%, transparent);
    backdrop-filter: blur(var(--nc-blur, 12px)) saturate(var(--nc-saturate, 150%));
    -webkit-backdrop-filter: blur(var(--nc-blur, 12px)) saturate(var(--nc-saturate, 150%));
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--nc-radius-lg, 14px);
    overflow: hidden;
}
.nc-glass-list-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
    flex-wrap: wrap;
}
.nc-glass-list-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nc-mono-stack, ui-monospace, "SF Mono", monospace);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text);
    font-weight: 600;
}
.nc-glass-list-panel-title i {
    color: var(--color-primary);
    font-size: 12px;
}
.nc-glass-list-panel-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.nc-glass-list-panel-tools .nc-glass-input { width: 180px; }
.nc-glass-list-panel-body { padding: 0; }
.nc-glass-list-panel-body table { width: 100%; margin: 0; }
.nc-glass-list-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
    background: color-mix(in srgb, var(--color-card-2) 25%, transparent);
    font-family: var(--nc-mono-stack, ui-monospace, "SF Mono", monospace);
    font-size: 12px;
    color: var(--color-muted);
    flex-wrap: wrap;
}

/* =====================================================================
   26. GLASS COMMAND GRID + TILE — settings/admin command-center bento
   Reusable shortcut tile grid for "control center" pages where each
   tile links to a sub-page (e.g. administration, system settings).
   ===================================================================== */
.nc-glass-cmd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.nc-glass-cmd-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 14px 12px;
    background: color-mix(in srgb, var(--color-card) 84%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--nc-radius-xl, 14px);
    color: var(--color-text);
    text-decoration: none;
    transition: transform var(--nc-ease-ms, 160ms) ease, box-shadow var(--nc-ease-ms, 160ms) ease, border-color var(--nc-ease-ms, 160ms) ease;
    isolation: auto;
    min-height: 96px;
}
.nc-glass-cmd-tile:hover {
    transform: translateY(-2px);
    color: var(--color-text);
    text-decoration: none;
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    box-shadow:
        0 calc(8px * var(--nc-shadow-mult, 1)) calc(22px * var(--nc-shadow-mult, 1)) rgba(2, 6, 23, 0.18),
        0 0 18px color-mix(in srgb, var(--color-primary) calc(18% * var(--nc-glow-alpha, 1)), transparent);
}
.nc-glass-cmd-tile-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
    color: var(--color-primary);
    font-size: 15px;
}
.nc-glass-cmd-tile-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
}
.nc-glass-cmd-tile-desc {
    font-size: 11.5px;
    color: var(--color-muted);
    line-height: 1.35;
}
.nc-glass-cmd-tile-badge {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-family: var(--nc-mono-stack, ui-monospace, "SF Mono", monospace);
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.nc-glass-cmd-tile.is-coming-soon { opacity: 0.55; pointer-events: none; }
.nc-glass-cmd-tile.is-coming-soon .nc-glass-cmd-tile-badge {
    color: var(--color-muted);
    background: color-mix(in srgb, var(--color-card-2) 60%, transparent);
    border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
}

/* =====================================================================
   26b. GLASS ALERT — inline info / success / warning / danger banner.
   currentColor drives border + tinted bg + neon glow.
   Use for passive suggestion banners (e.g. "Dispatch field tech?")
   and result flashes. Light variant for use inside cards.
   ===================================================================== */
.nc-glass-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    width: 100%;
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 10%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, currentColor 18%, transparent);
    color: var(--color-info);
}
.nc-glass-alert > i { font-size: 14px; flex-shrink: 0; }
.nc-glass-alert .nc-glass-alert-msg { flex: 1; color: var(--color-text); }
.nc-glass-alert .nc-glass-alert-actions { display: inline-flex; gap: 6px; align-items: center; }
.nc-glass-alert-success { color: var(--color-success); }
.nc-glass-alert-info    { color: var(--color-info); }
.nc-glass-alert-warning { color: var(--color-warning); }
.nc-glass-alert-danger  { color: var(--color-danger); }

/* =====================================================================
   27. GLASS MARK — search-match highlight inside text labels
   ===================================================================== */
.nc-glass-mark {
    background: color-mix(in srgb, var(--color-warning) 28%, transparent);
    color: var(--color-text);
    padding: 0 3px;
    border-radius: 4px;
    box-shadow: 0 0 6px color-mix(in srgb, var(--color-warning) 30%, transparent);
}

/* =====================================================================
   30. MOBILE BREAKPOINTS — platform-wide layout collapse
   Keeps canonical classes; collapses multi-col grids; trims hero text.
   ===================================================================== */
@media (max-width: 768px) {
    .nc-glass-kpi-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .nc-glass-bento-row { grid-template-columns: 1fr; }
    .nc-glass-split { grid-template-columns: 1fr; }
    .nc-glass-hero-title { font-size: 22px; }
    .nc-glass-kpi-value { font-size: 24px; }
}
@media (max-width: 480px) {
    .nc-glass-kpi-bento { grid-template-columns: 1fr; gap: 10px; }
    .nc-glass-hero-title { font-size: 19px; line-height: 1.2; }
    .nc-glass-kpi-value { font-size: 22px; }
    .nc-glass-card-header { padding: 12px 14px; }
    .nc-glass-card-body { padding: 12px 14px; }
}