/*
 * ============================================================
 * VOYLOX UI SYSTEM V4
 * Premium foundation layer
 * ============================================================
 *
 * Purpose:
 * - one visual language
 * - one spacing system
 * - one form standard
 * - one card standard
 * - one table standard
 * - predictable 1440px+ desktop behavior
 * - safe horizontal scrolling INSIDE tables only
 * - shared modern + legacy compatibility
 *
 * Functional PBX behavior is intentionally untouched.
 * ============================================================
 */


/* ============================================================
 * DESIGN TOKENS
 * ============================================================ */

:root {
    --ui-brand: #6938ef;
    --ui-brand-hover: #5925dc;
    --ui-brand-soft: #f4f3ff;
    --ui-brand-foreground: #ffffff;
    --ui-technology: #0891b2;
    --ui-technology-soft: #ecfeff;

    --ui-bg:
        #f3f5f9;

    --ui-surface:
        #ffffff;

    --ui-surface-soft:
        #f7f8fb;

    --ui-surface-muted:
        #eef1f6;

    --ui-surface-elevated:
        #ffffff;

    --ui-surface-overlay:
        #ffffff;

    --ui-surface-hover:
        #fafbfc;

    --ui-text:
        #263247;

    --ui-text-secondary:
        #475467;

    --ui-muted:
        #667085;

    --ui-border:
        #e4e7ec;

    --ui-border-strong:
        #d0d5dd;

    --ui-primary:
        #168bff;

    --ui-primary-hover:
        #1179df;

    --ui-accent:
        var(--ui-brand);

    --ui-accent-hover:
        var(--ui-brand-hover);

    --ui-success-bg:
        #ecfdf3;

    --ui-success:
        #067647;

    --ui-warning-bg:
        #fffaeb;

    --ui-warning:
        #b54708;

    --ui-danger-bg:
        #fef3f2;

    --ui-danger:
        #b42318;

    --ui-info-bg:
        #eff8ff;

    --ui-info:
        #175cd3;

    --ui-sidebar:
        #101828;
    --ui-sidebar-secondary: #1d2939;
    --ui-sidebar-text: #cbd5e1;
    --ui-sidebar-text-muted: #98a2b3;
    --ui-sidebar-accent: #67e8f9;
    --ui-sidebar-scroll-thumb: #71849c;
    --ui-sidebar-scroll-thumb-hover: #8ba0b8;
    --ui-sidebar-scroll-thumb-active: #a6bad0;

    --ui-radius-xs: 6px;

    --ui-radius-sm:
        8px;

    --ui-radius:
        12px;

    --ui-radius-lg:
        16px;

    --ui-radius-pill: 999px;

    --ui-elevation-flat: none;
    --ui-elevation-raised: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px rgba(16, 24, 40, .04);
    --ui-elevation-floating: 0 14px 34px rgba(16, 24, 40, .14);
    --ui-elevation-overlay: 0 24px 64px rgba(16, 24, 40, .2);

    --ui-shadow:
        var(--ui-elevation-raised);

    --ui-shadow-subtle:
        0 1px 2px rgba(16, 24, 40, .05);

    --ui-space-0-5: 2px;
    --ui-space-1: 4px;
    --ui-space-1-5: 6px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-space-10: 40px;
    --ui-space-12: 48px;

    --ui-control-height-compact: 32px;

    --ui-control-height-small: 36px;

    --ui-control-height:
        40px;

    --ui-control-height-regular:
        var(--ui-control-height);

    --ui-control-height-touch: 44px;

    --ui-table-row-compact: 36px;
    --ui-table-row-regular: 44px;
    --ui-table-row-comfortable: 52px;

    --ui-icon-sm: 14px;
    --ui-icon: 16px;
    --ui-icon-md: 18px;
    --ui-icon-lg: 20px;

    --ui-motion-fast: 120ms;
    --ui-motion: 160ms;
    --ui-motion-slow: 200ms;
    --ui-motion-ease: cubic-bezier(.2, .8, .2, 1);

    --ui-focus-color: color-mix(in srgb, var(--ui-brand) 32%, transparent);
    --ui-focus-ring: 0 0 0 3px var(--ui-focus-color);

    --ui-z-dropdown: 300;
    --ui-z-sticky: 400;
    --ui-z-drawer: 800;
    --ui-z-modal: 900;
    --ui-z-toast: 1000;

    --ui-content-wide: 1680px;
    --ui-content-reading: 920px;
    --ui-breakpoint-mobile: 390px;
    --ui-breakpoint-tablet: 768px;
    --ui-breakpoint-shell: 1024px;
    --ui-breakpoint-wide: 1440px;
    --ui-drawer-standard: 560px;
    --ui-drawer-wide: 720px;
    --ui-drawer-editor: 960px;

    --ui-type-eyebrow: 10px;
    --ui-type-display: 30px;
    --ui-type-page-title: 22px;
    --ui-type-section-title: 16px;
    --ui-type-body: 14px;
    --ui-type-label: 12px;
    --ui-type-helper: 11px;
    --ui-type-table-header: 11px;
    --ui-type-metric: 26px;
    --ui-leading-tight: 1.25;
    --ui-leading-body: 1.55;
    --ui-weight-regular: 450;
    --ui-weight-medium: 550;
    --ui-weight-semibold: 650;
    --ui-weight-bold: 750;

    --ui-font:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --ui-mono:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;
}

[data-theme="dark"] {
    --ui-bg:
        #0d111b;

    --ui-surface:
        #151b27;

    --ui-surface-soft:
        #111722;

    --ui-surface-muted:
        #1b2331;

    --ui-surface-elevated:
        #1a2230;

    --ui-surface-overlay:
        #202938;

    --ui-surface-hover:
        #1d2939;

    --ui-text:
        #f3f6fa;

    --ui-text-secondary:
        #d0d5dd;

    --ui-muted:
        #98a2b3;

    --ui-border:
        #344054;

    --ui-border-strong:
        #475467;

    --ui-primary:
        #4f9fff;

    --ui-primary-hover:
        #168bff;

    --ui-success-bg:
        #123a2b;

    --ui-success:
        #6ce9a6;

    --ui-warning-bg:
        #3d2b16;

    --ui-warning:
        #fec84b;

    --ui-danger-bg:
        #40201f;

    --ui-danger:
        #fda29b;

    --ui-info-bg:
        #172d4f;

    --ui-info:
        #84adff;

    --ui-sidebar:
        #0c1425;
    --ui-sidebar-secondary: #1d2b40;
    --ui-sidebar-text: #dbe4f0;
    --ui-sidebar-text-muted: #98a2b3;
    --ui-sidebar-accent: #67e8f9;
    --ui-sidebar-scroll-thumb: #71849c;
    --ui-sidebar-scroll-thumb-hover: #8ba0b8;
    --ui-sidebar-scroll-thumb-active: #a6bad0;

    --ui-brand: #a48afb;
    --ui-brand-hover: #b7a4ff;
    --ui-brand-soft: #2b2343;
    --ui-technology: #67e8f9;
    --ui-technology-soft: #12323a;

    --ui-elevation-raised: 0 1px 2px rgba(0, 0, 0, .24), 0 8px 24px rgba(0, 0, 0, .16);
    --ui-elevation-floating: 0 18px 42px rgba(0, 0, 0, .34);
    --ui-elevation-overlay: 0 28px 72px rgba(0, 0, 0, .44);
}


/* ============================================================
 * GLOBAL SAFETY
 * ============================================================ */

html {
    font-family:
        var(--ui-font);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 0;
    box-shadow: var(--ui-focus-ring);
}

body {
    color:
        var(--ui-text);
}

.app-shell,
.main,
.content {
    min-width:
        0;
}

.content {
    width:
        100%;
}


/* ============================================================
 * MODERN MODULE FOUNDATION
 * ============================================================ */

.module-subtitle {
    margin:
        0 0 16px;

    color:
        var(--ui-muted);

    font-size:
        13px;

    line-height:
        1.5;
}

.module-card,
.filter-panel {
    border:
        1px solid var(--ui-border);

    border-radius:
        var(--ui-radius-lg);

    background:
        var(--ui-surface);

    box-shadow:
        var(--ui-shadow);
}

.module-card {
    min-width:
        0;
}

.module-card-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        15px 17px;

    border-bottom:
        1px solid var(--ui-border);
}

.module-card-head h2 {
    margin:
        0;

    color:
        var(--ui-text);

    font-size:
        16px;

    font-weight:
        700;
}

.module-card-head p {
    margin:
        3px 0 0;

    color:
        var(--ui-muted);

    font-size:
        12px;
}


/* ============================================================
 * FILTERS / FORMS
 * ============================================================ */

.filter-panel {
    padding:
        15px 16px;
}

.filter-row {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        end;

    gap:
        10px;
}

.field {
    min-width:
        0;
}

.filter-row > .field {
    flex:
        1 1 175px;
}

.field label,
.filter-panel label {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--ui-muted);

    font-size:
        12px;

    font-weight:
        650;
}

.field input,
.field select,
.field textarea,
.filter-panel input,
.filter-panel select,
.filter-panel textarea {
    width:
        100%;

    min-width:
        0;

    min-height:
        var(--ui-control-height);

    border:
        1px solid var(--ui-border-strong);

    border-radius:
        8px;

    outline:
        none;

    background:
        var(--ui-surface);

    color:
        var(--ui-text);

    padding:
        8px 10px;

    font-family:
        inherit;

    font-size:
        13px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.filter-panel input:focus,
.filter-panel select:focus,
.filter-panel textarea:focus {
    border-color:
        #84adff;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .10);
}


/* ============================================================
 * BUTTONS
 * ============================================================ */

.btn {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        38px;

    padding:
        0 13px;

    border:
        1px solid var(--ui-border-strong);

    border-radius:
        8px;

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1;

    text-decoration:
        none;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.btn.primary {
    border-color:
        var(--ui-primary);

    background:
        var(--ui-primary);

    color:
        #ffffff;
}

.btn.primary:hover {
    border-color:
        var(--ui-primary-hover);

    background:
        var(--ui-primary-hover);
}

.btn.secondary {
    background:
        var(--ui-surface);

    color:
        var(--ui-text-secondary);
}

.btn.secondary:hover {
    background:
        var(--ui-surface-soft);
}


/* ============================================================
 * BADGES
 * ============================================================ */

.badge {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        24px;

    padding:
        3px 8px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    white-space:
        nowrap;
}

.badge.success {
    background:
        var(--ui-success-bg);

    color:
        var(--ui-success);
}

.badge.warning {
    background:
        var(--ui-warning-bg);

    color:
        var(--ui-warning);
}

.badge.danger {
    background:
        var(--ui-danger-bg);

    color:
        var(--ui-danger);
}

.badge.info {
    background:
        var(--ui-info-bg);

    color:
        var(--ui-info);
}

.badge.neutral {
    background:
        var(--ui-surface-soft);

    color:
        var(--ui-text-secondary);
}


/* ============================================================
 * MODERN TABLES
 * ============================================================ */

.module-table-wrap,
.table-wrap {
    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    overflow-x:
        auto;

    -webkit-overflow-scrolling:
        touch;
}

.module-table,
.data-table {
    width:
        100%;

    border-collapse:
        collapse;
}

.module-table th,
.data-table th {
    padding:
        9px 8px;

    border-bottom:
        1px solid var(--ui-border);

    background:
        var(--ui-surface-soft);

    color:
        var(--ui-muted);

    font-size:
        11px;

    font-weight:
        700;

    text-align:
        left;

    white-space:
        nowrap;
}

.module-table td,
.data-table td {
    padding:
        10px 8px;

    border-bottom:
        1px solid var(--ui-border);

    color:
        var(--ui-text-secondary);

    font-size:
        12px;

    line-height:
        1.3;

    vertical-align:
        middle;
}

.module-table tbody tr:hover,
.data-table tbody tr:hover {
    background:
        var(--ui-surface-hover);
}

.module-table .actions-cell {
    min-width:
        190px;
}

.module-table .wide-control {
    min-width:
        150px;
}

.empty-row {
    padding:
        30px !important;

    color:
        var(--ui-muted) !important;

    text-align:
        center !important;
}


/* ============================================================
 * TYPOGRAPHY HELPERS
 * ============================================================ */

.muted {
    color:
        var(--ui-muted);
}

.mono {
    font-family:
        var(--ui-mono);
}


/* ============================================================
 * LEGACY COMPATIBILITY LAYER
 *
 * This deliberately targets only legacy-shell pages.
 * Existing functionality / form names / JS are untouched.
 * ============================================================ */

.legacy-shell-active {
    background:
        var(--ui-bg);

    color:
        var(--ui-text);

    font-family:
        var(--ui-font);
}

.legacy-shell-active .container {
    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        1680px !important;
}

.legacy-shell-active .top {
    min-width:
        0;
}

.legacy-shell-active .card,
.legacy-shell-active .panel,
.legacy-shell-active .filters,
.legacy-shell-active .filter,
.legacy-shell-active .filter-card {
    border:
        1px solid var(--ui-border) !important;

    border-radius:
        var(--ui-radius-lg) !important;

    background:
        var(--ui-surface) !important;

    box-shadow:
        var(--ui-shadow) !important;
}

.legacy-shell-active .table-wrapper,
.legacy-shell-active .table-wrap {
    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    overflow-x:
        auto !important;

    -webkit-overflow-scrolling:
        touch;
}

.legacy-shell-active table {
    width:
        100%;

    border-collapse:
        collapse;
}

.legacy-shell-active table th {
    padding:
        9px 8px;

    border-bottom:
        1px solid var(--ui-border);

    background:
        var(--ui-surface-soft);

    color:
        var(--ui-muted);

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.2;

    text-align:
        left;
}

.legacy-shell-active table td {
    padding:
        10px 8px;

    border-bottom:
        1px solid var(--ui-border);

    color:
        var(--ui-text-secondary);

    font-size:
        12px;

    line-height:
        1.3;

    vertical-align:
        middle;
}

.legacy-shell-active table tbody tr:hover {
    background:
        var(--ui-surface-hover);
}

.legacy-shell-active .field {
    min-width:
        0;
}

.legacy-shell-active .field label,
.legacy-shell-active .filter label,
.legacy-shell-active .filters label {
    color:
        var(--ui-muted);

    font-size:
        12px;

    font-weight:
        650;
}

.legacy-shell-active .container input,
.legacy-shell-active .container select,
.legacy-shell-active .container textarea {
    max-width:
        100%;

    border:
        1px solid var(--ui-border-strong);

    border-radius:
        8px;

    outline:
        none;

    background:
        var(--ui-surface);

    color:
        var(--ui-text);

    font-family:
        inherit;

    font-size:
        13px;
}

.legacy-shell-active .container input:not(
    [type="checkbox"]
):not(
    [type="radio"]
):not(
    [type="hidden"]
),
.legacy-shell-active .container select {
    min-height:
        var(--ui-control-height);
}

.legacy-shell-active .container input:focus,
.legacy-shell-active .container select:focus,
.legacy-shell-active .container textarea:focus {
    border-color:
        #84adff;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .10);
}

.legacy-shell-active .container button.primary,
.legacy-shell-active .container .primary {
    border-color:
        var(--ui-primary);

    background:
        var(--ui-primary);

    color:
        #ffffff;
}

.legacy-shell-active .container button.primary:hover,
.legacy-shell-active .container .primary:hover {
    border-color:
        var(--ui-primary-hover);

    background:
        var(--ui-primary-hover);
}

.legacy-shell-active .container .secondary {
    border-color:
        var(--ui-border-strong);

    background:
        var(--ui-surface);

    color:
        var(--ui-text-secondary);
}

.legacy-shell-active .container .muted {
    color:
        var(--ui-muted);
}

.legacy-shell-active .container .mono {
    font-family:
        var(--ui-mono);
}


/* ============================================================
 * NAV / SHELL CONSISTENCY
 * ============================================================ */

.sidebar,
.legacy-sidebar {
    scrollbar-width:
        thin;
}

.nav-section,
.legacy-nav-section {
    letter-spacing:
        .12em;
}

.nav-item,
.legacy-nav-item {
    transition:
        background-color .15s ease,
        color .15s ease;
}


/* ============================================================
 * RESPONSIVE
 * ============================================================ */

@media (max-width: 1450px) {

    .content {
        padding-left:
            20px;

        padding-right:
            20px;
    }

    .module-table th,
    .data-table th,
    .legacy-shell-active table th {
        padding-left:
            6px;

        padding-right:
            6px;
    }

    .module-table td,
    .data-table td,
    .legacy-shell-active table td {
        padding-left:
            6px;

        padding-right:
            6px;
    }

    .module-table .actions-cell {
        min-width:
            160px;
    }

    .legacy-shell-active .container {
        max-width:
            none !important;
    }
}

@media (max-width: 1200px) {

    .module-card-head {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .filter-row > .field {
        flex-basis:
            220px;
    }
}

@media (max-width: 980px) {

    .filter-row {
        display:
            grid;

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

    .filter-row > .field {
        width:
            100%;
    }
}

@media (max-width: 680px) {

    .content {
        padding:
            18px 14px 40px;
    }

    .filter-row {
        grid-template-columns:
            1fr;
    }

    .filter-row > * {
        width:
            100%;
    }

    .btn {
        width:
            100%;
    }
}

/* ============================================================
 * MT-PBX UI SYSTEM V2.1
 * RESOURCE INDEX STANDARD
 *
 * UX invariant:
 * Existing resources first.
 * Create-new section second.
 * ============================================================ */

.resource-list-card {
    margin-bottom: 0;
}

.resource-create-card {
    margin-top: 18px;
}

.resource-create-head {
    margin-bottom: 14px;
}

.resource-create-head h2 {
    margin: 0;
    color: var(--ui-text);
    font-size: 16px;
    font-weight: 750;
}

.resource-create-head p {
    margin: 4px 0 0;
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.45;
}

.resource-create-note {
    margin: 12px 0 0;
}

.resource-form-row > .field {
    flex: 1 1 180px;
}

.resource-form-row > .field.grow {
    flex: 2 1 240px;
}

.resource-small-field {
    flex: 0 1 130px !important;
}

.resource-table {
    min-width: 0 !important;
    table-layout: auto;
}

.resource-table th,
.resource-table td {
    white-space: normal;
}

.resource-table th {
    white-space: nowrap;
}

.resource-table .actions-cell {
    min-width: 0;
    width: 1%;
    white-space: nowrap;
}

.resource-table .table-control {
    min-width: 0;
    width: 100%;
}

.resource-name-control {
    min-width: 190px !important;
}

.resource-timezone-control {
    min-width: 155px !important;
}

.resource-description-control {
    min-width: 180px !important;
}

.resource-number-control {
    width: 86px !important;
    min-width: 86px !important;
}

.resource-identity,
.resource-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.resource-identity strong {
    color: var(--ui-text);
}

.resource-identity span,
.resource-stack .muted {
    color: var(--ui-muted);
    font-size: 11px;
}

.resource-wide-stack {
    min-width: 205px;
}

.resource-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 230px;
}

.resource-metrics span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 24px;
    padding: 3px 7px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-surface-soft);
    color: var(--ui-text-secondary);
    font-size: 10px;
    white-space: nowrap;
}

.resource-metrics b {
    color: var(--ui-text);
    font-size: 11px;
}

.resource-actions {
    flex-wrap: nowrap;
}

.resource-inline-field {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ui-muted);
    font-size: 10px;
}

.resource-details {
    position: relative;
}

.resource-details[open] {
    min-width: 260px;
}

.resource-move-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    background: var(--ui-surface-soft);
}

.resource-move-form select {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-text);
    padding: 7px 9px;
}

.resource-confirm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ui-muted);
    font-size: 11px;
    white-space: nowrap;
}

.resource-confirm input {
    width: auto !important;
    min-height: auto !important;
}

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

.resource-info-card {
    padding: 13px;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    background: var(--ui-surface-soft);
}

.resource-info-card strong {
    display: block;
    color: var(--ui-text);
    font-size: 12px;
}

.resource-info-card span {
    display: block;
    margin-top: 4px;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 1.5;
}

.resource-command {
    margin-top: 8px;
    max-width: 520px;
    padding: 9px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-soft);
    overflow: auto;
}

.resource-command code {
    white-space: nowrap;
    font-size: 11px;
}

.btn.success {
    border-color: color-mix(in srgb, var(--ui-success) 18%, transparent);
    background: var(--ui-success-bg);
    color: var(--ui-success);
}

.btn.success:hover {
    border-color: color-mix(in srgb, var(--ui-success) 30%, transparent);
}

@media (max-width: 1450px) {
    .resource-table th,
    .resource-table td {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 11px;
    }

    .resource-actions {
        gap: 5px;
    }

    .resource-actions .btn {
        padding-left: 9px;
        padding-right: 9px;
    }

    .resource-name-control {
        min-width: 160px !important;
    }

    .resource-description-control {
        min-width: 150px !important;
    }

    .resource-wide-stack {
        min-width: 175px;
    }
}

@media (max-width: 1150px) {
    .resource-table {
        min-width: 920px !important;
    }

    .resource-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .resource-form-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .resource-small-field {
        width: 100%;
        max-width: none;
    }

    .resource-move-form {
        grid-template-columns: 1fr;
    }

    .resource-actions {
        flex-wrap: wrap;
    }
}


/* ============================================================
 * MT-PBX UI SYSTEM V2.2 SAFE RESOURCE INDEX
 *
 * Functional rule:
 * - existing resource summary first
 * - create form second
 * - detailed management third
 *
 * Existing forms and management blocks remain intact.
 * ============================================================ */

.resource-index-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0 10px;
}

.resource-index-head h2,
.resource-detail-head h2 {
    margin: 0;
    color: var(--ui-text);
    font-size: 17px;
    font-weight: 750;
}

.resource-index-head p,
.resource-detail-head p {
    margin: 4px 0 0;
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.45;
}

.resource-index-card {
    margin-top: 0 !important;
    overflow: hidden;
}

.resource-index-table {
    min-width: 0 !important;
}

.resource-index-table th {
    white-space: nowrap;
}

.resource-index-table td {
    white-space: normal;
}

.resource-detail-head {
    margin: 24px 0 10px;
    padding-top: 16px;
    border-top: 1px solid var(--ui-border);
}

#yeni-dahili,
#yeni-outbound,
#yeni-queue,
#yeni-ivr,
#yeni-ring-group {
    scroll-margin-top: 90px;
}

.legacy-shell-active .resource-index-head {
    margin-top: 20px;
}

.legacy-shell-active .resource-index-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

@media (max-width: 980px) {
    .resource-index-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .resource-index-table {
        min-width: 680px !important;
    }
}

@media (max-width: 680px) {
    .resource-index-head .btn {
        width: auto;
    }
}


/* ============================================================
 * MT-PBX UI SYSTEM V2.3 - PBX FEATURES SAFE INDEX
 * ============================================================ */

.resource-index-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

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

.resource-index-card + .resource-index-card {
    margin-top: 0 !important;
}

#yeni-time-group,
#yeni-time-condition,
#yeni-voicemail,
#yeni-forwarding,
#yeni-announcement,
#yeni-media,
#yeni-blacklist {
    scroll-margin-top: 90px;
}

.legacy-shell-active .resource-index-grid {
    margin-top: 0;
}

.legacy-shell-active
.resource-index-card
.module-card-head {
    padding: 14px 16px;
}

.legacy-shell-active
.resource-index-table td,
.legacy-shell-active
.resource-index-table th {
    font-size: 12px;
}

@media (max-width: 1180px) {
    .resource-index-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .resource-index-actions {
        width: 100%;
        justify-content: flex-start;
    }
}


/* ============================================================
 * MT-PBX UI SYSTEM V2.4 - TECHNICAL + ADVANCED
 *
 * Operational screens stay filter/status/list first.
 * Workflow/resource screens show existing state before create/edit.
 * ============================================================ */

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

.advanced-status-card {
    margin-top: 0 !important;
    padding: 14px 16px;
}

.advanced-status-card span {
    display: block;
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: 650;
}

.advanced-status-card strong {
    display: block;
    margin-top: 6px;
    color: var(--ui-text);
    font-size: 17px;
    line-height: 1.2;
}

#yeni-import,
#yeni-conference,
#yeni-paging {
    scroll-margin-top: 92px;
}

@media (max-width: 1180px) {
    .advanced-status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .advanced-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .advanced-status-grid {
        grid-template-columns: 1fr;
    }
}
/* UI-V4-C: shared product presentation foundations. */
.v4-telecom-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.015em;
}

.v4-detail-surface,
.v4-danger-surface { padding: clamp(16px, 2.5vw, 28px); }
.v4-danger-surface { border-top: 4px solid var(--ui-danger, #dc3545); }
.v4-danger-summary { border-color: color-mix(in srgb, var(--ui-danger, #dc3545) 45%, transparent); }
.v4-degraded-state { padding: 8px 18px 22px; }
.v4-degraded-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:680px; margin:0 auto; }
.v4-degraded-facts div { padding:12px; border:1px solid var(--ui-border); border-radius:10px; background:var(--ui-surface-soft); }
.v4-degraded-facts dt { color:var(--ui-muted); font-size:.75rem; }
.v4-degraded-facts dd { margin:4px 0 0; font-weight:700; }
.v4-mobile-tenant-context { color:var(--ui-muted); font-size:.78rem; }

@media (max-width: 640px) {
    .v4-degraded-facts { grid-template-columns:1fr; }
}