@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* Dynamic Personalization Variables */
html {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[data-font-family="inter"] { --font-family: 'Inter', sans-serif; }
html[data-font-family="outfit"] { --font-family: 'Outfit', sans-serif; }
html[data-font-family="poppins"] { --font-family: 'Poppins', sans-serif; }
html[data-font-family="lora"] { --font-family: 'Lora', serif; }
html[data-font-family="fira-code"] { --font-family: 'Fira Code', monospace; }

html[data-font-size="small"] { font-size: 11px !important; }
html[data-font-size="medium"] { font-size: 12.5px !important; }
html[data-font-size="large"] { font-size: 14px !important; }
html[data-font-size="xlarge"] { font-size: 15.5px !important; }

:root {
    /* Dimensions and shadows */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --sidebar-width: 230px;
    --header-height: 46px;
    
    /* Default to Dark Theme (Zinc & Blue) */
    --bg-base: #09090b;
    --bg-surface: #18181b;
    --bg-surface-hover: #27272a;
    --border-subtle: #27272a;
    --border-strong: #3f3f46;

    --text-main: #f4f4f5;
    --text-muted: #a1a1aa;
    --text-inverse: #09090b;
    --brand-primary: #3b82f6;
    --brand-primary-hover: #2563eb;
    --brand-accent: #6366f1;
    --brand-gradient: linear-gradient(135deg, #3b82f6, #6366f1);
    --brand-glow: 0 4px 14px rgba(59, 130, 246, 0.25);
    --brand-bg-subtle: rgba(59, 130, 246, 0.08);

    --status-success: #10b981;
    --status-warning: #f59e0b;
    --status-error: #ef4444;
    --status-info: #0ea5e9;

    --status-success-bg: rgba(16, 185, 129, 0.12);
    --status-success-text: #10b981;
    --status-warning-bg: rgba(245, 158, 11, 0.12);
    --status-warning-text: #f59e0b;
    --status-error-bg: rgba(239, 68, 68, 0.12);
    --status-error-text: #ef4444;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

    /* Mappings for legacy view properties to integrate custom styles */
    --border-color: var(--border-subtle);
    --bg-neutral: var(--bg-surface-hover);
    --surface-bg: var(--bg-surface);
    --text-heading: var(--text-main);
    --text-primary: var(--text-main);
}

/* Light Theme overrides (Zinc & Slate/Blue) */
html[data-theme="light"] {
    --bg-base: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f1f5f9;
    --border-subtle: #e2e8f0;
    --border-strong: #cbd5e1;

    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    
    --brand-primary: #2563eb;
    --brand-primary-hover: #1d4ed8;
    --brand-accent: #6366f1;

    --status-success: #10b981;
    --status-warning: #d97706;
    --status-error: #ef4444;
    --status-info: #0ea5e9;

    --status-success-bg: #e2fbf0;
    --status-success-text: #0f766e;
    --status-warning-bg: #fef3c7;
    --status-warning-text: #b45309;
    --status-error-bg: #fee2e2;
    --status-error-text: #b91c1c;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}

/* Explicit Dark Theme overrides (for code clarity) */
html[data-theme="dark"] {
    --bg-base: #09090b;
    --bg-surface: #18181b;
    --bg-surface-hover: #27272a;
    --border-subtle: #27272a;
    --border-strong: #3f3f46;

    --text-main: #f4f4f5;
    --text-muted: #a1a1aa;
    --text-inverse: #09090b;
    
    --brand-primary: #3b82f6;
    --brand-primary-hover: #2563eb;
    --brand-accent: #6366f1;

    --status-success: #10b981;
    --status-warning: #f59e0b;
    --status-error: #ef4444;
    --status-info: #0ea5e9;

    --status-success-bg: rgba(16, 185, 129, 0.12);
    --status-success-text: #10b981;
    --status-warning-bg: rgba(245, 158, 11, 0.12);
    --status-warning-text: #f59e0b;
    --status-error-bg: rgba(239, 68, 68, 0.12);
    --status-error-text: #ef4444;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Smooth Theme Transitions */
body, .sidebar, .top-header, .panel, .stat-box, .data-table, .form-input, .form-select, .btn, .nav-item, .breadcrumbs a, .breadcrumbs span, th, td, tr, .brand, .brand-icon, input, select, textarea, button {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* Theme Toggle Icon Display rules */
#theme-toggle-btn .sun-icon {
    display: none;
}
#theme-toggle-btn .moon-icon {
    display: none;
}
html[data-theme="light"] #theme-toggle-btn .moon-icon {
    display: block;
}
html[data-theme="dark"] #theme-toggle-btn .sun-icon {
    display: block;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Lock the main window scroll */
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-base);
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* Typography */
h1 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

h2 {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

h3 {
    font-size: 0.85rem;
    font-weight: 500;
}

h4 {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.2s;
}

    a:hover {
        color: var(--brand-primary-hover);
    }

/* Layout */
.app-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 20;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-main);
    text-decoration: none;
}

.brand-icon {
    width: 24px;
    height: 24px;
    background: var(--brand-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 8px;
}

.nav-group {
    margin-bottom: 24px;
}

.nav-group-title {
    padding: 0 12px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 2px;
    font-weight: 500;
}

.nav-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-item svg {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.nav-item:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-main);
}

.nav-item.active {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--brand-primary);
}

    .nav-item.active svg {
        opacity: 1;
    }

.nav-badge {
    background: var(--border-strong);
    color: var(--text-main);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border-subtle);
    background-color: var(--bg-surface);
}

/* Tenant Switcher */
.tenant-switcher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
}

    .tenant-switcher:hover {
        border-color: var(--border-strong);
    }

/* Main Content Area */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0; /* Ensures the flex container doesn't grow beyond parent height */
}

/* Header */
.top-header {
    height: var(--header-height);
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Global search styles are defined in the dedicated global-search block below */

.shortcut {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg-surface);
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .icon-btn:hover {
        background-color: var(--bg-surface-hover);
        color: var(--text-main);
    }

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--brand-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    border: 2px solid transparent;
}

    .user-avatar:hover {
        border-color: var(--brand-primary);
    }

/* Main Content Scrollable Area */
.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
}

/* Page Headers */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--brand-primary);
    border-radius: 2px;
}

.page-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
}

.page-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    max-width: 600px;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}

    .breadcrumbs span {
        color: var(--border-strong);
    }

    .breadcrumbs a {
        color: var(--text-muted);
        text-decoration: none;
        transition: color 0.2s;
    }

        .breadcrumbs a:hover {
            color: var(--brand-primary);
        }

    .breadcrumbs .current {
        color: var(--text-main);
        font-weight: 600;
    }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    font-family: inherit;
}

.btn-primary {
    background-color: var(--brand-primary);
    color: #fff;
}

    .btn-primary:hover {
        background-color: var(--brand-primary-hover);
    }

.btn-secondary {
    background-color: var(--bg-surface-hover);
    border-color: var(--border-strong);
    color: var(--text-main);
}

    .btn-secondary:hover {
        background-color: var(--border-strong);
    }

.btn-danger {
    background-color: transparent;
    border-color: var(--status-error);
    color: var(--status-error);
}

    .btn-danger:hover {
        background-color: rgba(239, 68, 68, 0.1);
    }

/* Cards & Panels */
.panel {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: visible;
    margin-bottom: 12px;
}

.panel-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-title {
    font-size: 0.9rem;
    font-weight: 600;
}

.panel-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.panel-body {
    padding: 10px 12px;
}

/* Grid systems */
.grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.stat-box {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-main);
}

.stat-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    margin-top: 4px;
    color: var(--text-muted);
}

    .stat-trend.up {
        color: var(--status-success);
    }

.stat-trend.down {
    color: var(--status-error);
}

.stat-box-accent {
    border-left: 3px solid var(--brand-primary);
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0) 42%),
        var(--bg-surface);
}

.stat-trend-accent {
    color: var(--brand-primary);
}

.dashboard-hero {
    max-width: 720px;
}

.dashboard-subtitle {
    color: var(--text-muted);
    margin-top: 6px;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 24px;
    align-items: start;
}

.panel-link {
    font-size: 0.875rem;
    font-weight: 500;
}

.dashboard-table td,
.dashboard-table th {
    vertical-align: middle;
}

.dashboard-time {
    color: var(--text-muted);
    white-space: nowrap;
}

.dashboard-principal {
    font-weight: 500;
    min-width: 0;
    overflow-wrap: anywhere;
}

.workflow-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.24);
    color: #c7d2fe;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.config-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.config-row {
    display: grid;
    grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.config-row-last {
    border-bottom: none;
    padding-bottom: 0;
}

.config-label {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
}

.config-value {
    color: var(--text-main);
    font-size: 0.875rem;
    line-height: 1.5;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.config-value-code {
    font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.8125rem;
}

.config-value-inline {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-compact {
    padding: 1px 6px;
    font-size: 0.6875rem;
}

.config-note {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid var(--border-subtle);
}

.config-note-text {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .content-area {
        padding: 20px 16px;
    }

    .page-header {
        margin-bottom: 20px;
    }

    .grid-stats {
        grid-template-columns: 1fr;
    }

    .stat-box {
        padding: 18px;
    }

    .stat-value {
        font-size: 1.75rem;
    }

    .panel-header,
    .panel-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .dashboard-table th,
    .dashboard-table td {
        padding-left: 14px;
        padding-right: 14px;
    }

    .config-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .config-value,
    .config-value-inline {
        text-align: left;
        justify-content: flex-start;
    }
}

/* Enterprise Tables */
.table-toolbar {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface);
}

.table-filters {
    display: flex;
    gap: 8px;
}

.form-input,
.form-select {
    background-color: var(--bg-base);
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .form-input:focus,
    .form-select:focus {
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

.table-responsive {
    width: 100%;
}

.data-table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

    .data-table th {
        background-color: var(--bg-base);
        padding: 6px 10px;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        font-weight: 600;
        border-bottom: 1px solid var(--border-strong);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 10;
    }

.sort-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.3;
    transition: opacity 0.2s;
    cursor: pointer;
}

.data-table th:hover .sort-icon {
    opacity: 1;
}

.data-table th.sorted .sort-icon {
    opacity: 1;
    color: var(--brand-primary);
}

.data-table tbody {
    vertical-align: middle;
}

.data-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.8rem;
    vertical-align: middle;
    transition: background-color 0.2s;
}

.data-table tbody tr {
    transition: box-shadow 0.2s;
}

.data-table.table-hoverable tbody tr:hover td {
    background-color: var(--bg-surface-hover);
}

.data-table.table-hoverable tbody tr:hover {
    box-shadow: inset 2px 0 0 var(--brand-primary);
}

.data-table tr:last-child td {
    border-bottom: none;
}

/* Datatable components */
.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background-color: var(--bg-base);
    display: inline-block;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.2s;
}

    .custom-checkbox:checked {
        background-color: var(--brand-primary);
        border-color: var(--brand-primary);
    }

        .custom-checkbox:checked::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 1px;
            width: 4px;
            height: 8px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

.cell-flex {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cell-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background-color: var(--bg-surface-hover);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

    .cell-avatar.primary {
        color: var(--brand-primary);
        background-color: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.2);
    }

    .cell-avatar.warning {
        color: var(--status-warning);
        background-color: rgba(245, 158, 11, 0.1);
        border-color: rgba(245, 158, 11, 0.2);
    }

    .cell-avatar.error {
        color: var(--status-error);
        background-color: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.2);
    }

.cell-text h5 {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

.cell-text p {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 2px 0 0 0;
}

.progress-track {
    width: 100px;
    height: 6px;
    background: var(--border-strong);
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.progress-fill {
    height: 100%;
    background: var(--brand-primary);
}

    .progress-fill.warning {
        background: var(--status-warning);
    }

    .progress-fill.error {
        background: var(--status-error);
    }

.action-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    padding: 6px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .action-btn:hover {
        background: var(--bg-surface-hover);
        border-color: var(--border-strong);
        color: var(--text-main);
    }

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--status-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--status-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--status-error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge-neutral {
    background: var(--bg-surface-hover);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
}

.page-info {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.page-controls {
    display: flex;
    gap: 4px;
}

.page-btn {
    padding: 4px 10px;
    background: var(--bg-base);
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    cursor: pointer;
}

    .page-btn:hover {
        background: var(--bg-surface-hover);
    }

    .page-btn.active {
        background: var(--brand-primary);
        border-color: var(--brand-primary);
        color: white;
    }

    .page-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ============================================
   SCHOOLA CHALKBOARD AUTH UI
   ============================================ */

/* Chalkboard Background */
.chalk-auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #1a3a2a 0%, #1e4d35 25%, #245a3d 50%, #1c4430 75%, #163322 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 20px;
}

/* Chalkboard texture overlay */
.chalk-auth-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.02) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, rgba(0,0,0,0.15) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Subtle vignette */
.chalk-auth-page::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Floating chalk formulas container */
.chalk-formulas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.chalk-formulas span {
    position: absolute;
    color: rgba(255, 255, 255, 0.06);
    font-style: italic;
    white-space: nowrap;
    user-select: none;
    animation: chalkFloat 60s linear infinite;
}

@keyframes chalkFloat {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.04; }
    25% { opacity: 0.08; }
    50% { transform: translateY(-15px) rotate(45deg); opacity: 0.05; }
    75% { opacity: 0.07; }
    100% { transform: translateY(0) rotate(0deg); opacity: 0.04; }
}

/* Brand Header */
.chalk-brand {
    text-align: center;
    margin-bottom: 32px;
    position: relative;
    z-index: 10;
}

.chalk-brand-title {
    font-family: cursive;
    font-size: 3.5rem;
    font-weight: 400;
/*    font-style: italic;*/
    color: #ffffff;
    letter-spacing: 0.02em;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    line-height: 1.1;
}

.chalk-brand-subtitle {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.95rem;
    font-style: italic;
    color: #d4c94a;
    margin-top: 6px;
    letter-spacing: 1px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Glassmorphic Card */
.chalk-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.chalk-card-header {
    text-align: center;
    margin-bottom: 24px;
}

.chalk-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 6px 0;
}

.chalk-card-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
}

/* Form elements inside chalkboard */
.chalk-card .form-group {
    margin-bottom: 18px;
}

.chalk-card .form-label {
    display: none; /* Labels are replaced by placeholders */
}

/* Input wrapper with icon */
.chalk-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.chalk-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    width: 18px;
    height: 18px;
    pointer-events: none;
    z-index: 2;
}

.chalk-card .form-input,
.chalk-card .chalk-input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: all 0.3s ease;
}

.chalk-card .form-input::placeholder,
.chalk-card .chalk-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.chalk-card .form-input:focus,
.chalk-card .chalk-input:focus {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

/* Checkbox styles */
.chalk-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.chalk-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #4a8c6f;
    cursor: pointer;
    border-radius: 3px;
}

.chalk-checkbox-row label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

/* Primary CTA Button */
.chalk-btn {
    width: 100%;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.92);
    color: #1a3a2a;
    border: none;
    border-radius: 28px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.chalk-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.chalk-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.chalk-btn svg,
.chalk-btn .btn-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.2s;
}

.chalk-btn:hover svg,
.chalk-btn:hover .btn-arrow {
    transform: translateX(3px);
}

/* Links */
.chalk-links {
    text-align: center;
    margin-top: 20px;
}

.chalk-link {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.chalk-link:hover {
    color: #ffffff;
}

.chalk-link-bold {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.chalk-link-bold:hover {
    color: #d4c94a;
}

.chalk-links-divider {
    margin-top: 12px;
}

/* Password row with link */
.chalk-pass-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.chalk-pass-row .form-label {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.chalk-forgot-link {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.chalk-forgot-link:hover {
    color: #d4c94a;
}

/* Error & Success Messages */
.chalk-alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 16px;
    text-align: center;
}

.chalk-alert-error {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.25);
    color: #ff8a8a;
}

.chalk-alert-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
}

/* Validation text in chalk card */
.chalk-card .text-danger {
    color: #ff8a8a;
    font-size: 0.78rem;
    display: block;
    margin-top: 6px;
}

.chalk-card .text-center {
    text-align: center;
}

/* Keep legacy compat for form-group structure from the existing views */
.signin-wrapper {
    display: contents;
}

.signin-wrapper .form-wrapper {
    display: contents;
}

/* Back link */
.chalk-back-link {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.chalk-back-link:hover {
    color: #ffffff;
}

/* ============================================
   CHALKBOARD AUTH - RESPONSIVE
   ============================================ */

/* Tablets */
@media (max-width: 768px) {
    .chalk-auth-page {
        padding: 16px;
    }

    .chalk-brand-title {
        font-size: 2.8rem;
    }

    .chalk-brand-subtitle {
        font-size: 0.85rem;
    }

    .chalk-card {
        max-width: 100%;
        padding: 28px 24px;
    }

    .chalk-btn {
        padding: 13px 20px;
        font-size: 0.9rem;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .chalk-auth-page {
        padding: 12px;
        justify-content: flex-start;
        padding-top: 60px;
    }

    .chalk-brand {
        margin-bottom: 24px;
    }

    .chalk-brand-title {
        font-size: 2.2rem;
    }

    .chalk-brand-subtitle {
        font-size: 0.8rem;
    }

    .chalk-card {
        padding: 24px 18px;
        border-radius: 12px;
    }

    .chalk-card .form-input,
    .chalk-card .chalk-input {
        padding: 12px 14px 12px 40px;
        font-size: 0.85rem;
    }

    .chalk-btn {
        padding: 12px 18px;
        font-size: 0.85rem;
    }

    .chalk-formulas span {
        font-size: 80% !important;
    }
}

/* Small mobile */
@media (max-width: 360px) {
    .chalk-brand-title {
        font-size: 1.8rem;
    }

    .chalk-card {
        padding: 20px 14px;
    }
}

/* Large desktop */
@media (min-width: 1400px) {
    .chalk-brand-title {
        font-size: 4rem;
    }

    .chalk-card {
        max-width: 460px;
        padding: 40px 38px;
    }
}

/* Fix for overflow on auth pages */
.chalk-auth-page,
.chalk-auth-page * {
    box-sizing: border-box;
}

/* Override body overflow for auth pages only */
body:has(.chalk-auth-page) {
    overflow: auto;
}

/* Legacy compat */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-base);
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 32px 32px;
}

.auth-box {
    width: 100%;
    max-width: 440px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-xl);
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--brand-primary);
    border-radius: var(--radius-md);
    color: white;
    margin-bottom: 16px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-main);
}

.auth-box .form-input {
    width: 100%;
    padding: 10px 12px;
}

.auth-box .btn {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
}

.divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid var(--border-strong);
    }

    .divider::before {
        margin-right: 12px;
    }

    .divider::after {
        margin-left: 12px;
    }

/* Tabs */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 20px;
}

.tab {
    padding: 12px 16px;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

    .tab:hover {
        color: var(--text-main);
    }

    .tab.active {
        color: var(--brand-primary);
        border-bottom-color: var(--brand-primary);
    }

/* Utility layout updates for responsiveness */
.hamburger-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    padding: 8px;
}

/* ========================================================================= */
/* Responsive & PWA Styles                                                   */
/* ========================================================================= */

@media (max-width: 1024px) {
    .grid-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    /* Layout */
    .app-layout {
        flex-direction: column;
    }

    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        bottom: 0;
        z-index: 100;
        transition: left 0.3s ease;
        box-shadow: var(--shadow-xl);
    }

        .sidebar.open {
            left: 0;
        }

    .main-wrapper {
        flex: 1;
        width: 100vw;
    }

    /* Top Header */
    .top-header {
        padding: 0 16px;
    }

    .header-left {
        gap: 8px;
    }

    .hamburger-menu {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .global-search {
        width: 180px;
    }

    /* Content Area */
    .content-area {
        padding: 16px;
    }

    .page-header {
        flex-direction: column;
        gap: 16px;
    }

        .page-header > div:last-child {
            width: 100%;
            justify-content: flex-start;
        }

    .grid-stats {
        grid-template-columns: 1fr;
    }

    .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Subscriptions / Billing adjustments */
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    /* Auth Screens */
    .auth-box {
        padding: 24px;
        margin: 16px;
    }
}

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

    .table-toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .table-filters {
        flex-wrap: wrap;
    }

    .table-toolbar input {
        width: 100% !important;
    }
}

/* Appended Mobile Override Styles */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    display: none;
    backdrop-filter: blur(2px);
}

    .sidebar-overlay.open {
        display: block;
    }

.hamburger-menu {
    z-index: 101;
    /* Ensure it's above other elements */
}

/* ========================================================================= */
/* DataTables Overrides                                                    */
/* ========================================================================= */

.dataTables_wrapper {
    width: 100%;
    overflow: visible;
}

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        padding: 16px 20px;
        background: var(--bg-surface);
        color: var(--text-main);
    }

        .dataTables_wrapper .dataTables_length select,
        .dataTables_wrapper .dataTables_filter input {
            background-color: var(--bg-base);
            border: 1px solid var(--border-strong);
            color: var(--text-main);
            padding: 6px 12px;
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            outline: none;
            font-family: inherit;
            transition: border-color 0.2s, box-shadow 0.2s;
            margin-left: 8px;
        }

            .dataTables_wrapper .dataTables_length select:focus,
            .dataTables_wrapper .dataTables_filter input:focus {
                border-color: var(--brand-primary);
                box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
            }

table.dataTable.no-footer {
    border-bottom: 1px solid var(--border-subtle);
}

table.dataTable thead th,
table.dataTable thead td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-strong);
    background-color: var(--bg-base);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle);
    background-color: transparent;
    font-size: 0.875rem;
    word-break: break-all;
    white-space: normal;
    overflow: visible !important;
}

table.dataTable tbody tr {
    display: table-row !important;
    visibility: visible !important;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: var(--bg-surface-hover);
    box-shadow: inset 2px 0 0 var(--brand-primary);
}

.dataTables_wrapper .dataTables_info {
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 4px 10px;
        background: var(--bg-base);
        border: 1px solid var(--border-strong) !important;
        color: var(--text-main) !important;
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        margin-left: 4px;
        transition: background-color 0.2s, color 0.2s;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: var(--bg-surface-hover) !important;
            color: var(--text-main) !important;
            border-color: var(--border-strong) !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            background: var(--brand-primary) !important;
            border-color: var(--brand-primary) !important;
            color: white !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
            opacity: 0.5;
            cursor: not-allowed;
            background: var(--bg-base) !important;
            color: var(--text-muted) !important;
            border-color: var(--border-strong) !important;
        }

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none;
    position: relative;
    padding-right: 30px;
}

    table.dataTable thead .sorting:after,
    table.dataTable thead .sorting_asc:after,
    table.dataTable thead .sorting_desc:after,
    table.dataTable thead .sorting_asc_disabled:after,
    table.dataTable thead .sorting_desc_disabled:after,
    table.dataTable thead .sorting:before,
    table.dataTable thead .sorting_asc:before,
    table.dataTable thead .sorting_desc:before {
        display: none;
    }
/* DataTables Responsive Child Row Styling */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    top: 50%;
    left: 10px;
    height: 16px;
    width: 16px;
    margin-top: -9px;
    display: block;
    position: absolute;
    color: white;
    border: 2px solid white;
    border-radius: 4px;
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: 'Courier New', Courier, monospace;
    line-height: 15px;
    content: '+';
    background-color: var(--brand-primary);
    transition: all 0.2s;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
    content: '-';
    background-color: var(--status-error);
}

table.dataTable > tbody > tr.child {
    padding: 0.5em 1em;
}

    table.dataTable > tbody > tr.child:hover {
        background: transparent !important;
    }

    table.dataTable > tbody > tr.child ul.dtr-details {
        display: inline-block;
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

        table.dataTable > tbody > tr.child ul.dtr-details > li {
            border-bottom: 1px solid var(--border-subtle);
            padding: 8px 0;
            display: flex;
            justify-content: space-between;
        }

            table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
                border-bottom: none;
            }

    table.dataTable > tbody > tr.child span.dtr-title {
        display: inline-block;
        min-width: 120px;
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    table.dataTable > tbody > tr.child span.dtr-data {
        color: var(--text-main);
        word-break: break-all;
    }


/* ========================================================================= */
/* Custom Filtering and DataTables Integration                             */
/* ========================================================================= */

/* Hide the default DataTables search since we want to use the custom one in the toolbar */
.dataTables_wrapper .dataTables_filter {
    display: none;
}

/* Ensures the custom toolbars align properly with the new tables */
.table-toolbar {
    margin-bottom: 0px !important;
}

/* ========================================================================= */
/* Modal Component                                                            */
/* ========================================================================= */

/* Backdrop overlay */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

    .modal-backdrop.open {
        opacity: 1;
        pointer-events: all;
    }

        .modal-backdrop.open .modal-dialog {
            transform: translateY(0);
            opacity: 1;
        }

/* Dialog box */
.modal-dialog {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.25s ease;
    overflow: hidden;
}

/* Modal content slot: fills remaining space after header, clips overflow */
#modalContent {
    flex: 1;
    min-height: 0;          /* allow it to shrink within the flex column */
    display: flex;
    flex-direction: column;
    overflow: hidden;       /* children (wizard-container) manage their own scroll */
}

/* Modal Header */
.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, transparent 60%);
}

.modal-title-group {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.modal-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.modal-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.modal-subtitle {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.modal-close-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    margin-top: 2px;
}

    .modal-close-btn:hover {
        background: var(--bg-surface-hover);
        border-color: var(--border-strong);
        color: var(--text-main);
    }

/* Modal Body — flex column passthrough; inner scroll is handled by .wizard-container > .modal-body */
.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;    /* allow flex children to shrink and scroll */
}

/* Section labels as dividers */
.modal-section-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 14px 0 10px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 14px;
}

    .modal-section-label:first-child {
        padding-top: 0;
    }

/* Two-column form grid */
.modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 4px;
}

@media (max-width: 520px) {
    .modal-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual field */
.modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 4px;
}

/* Labels */
.modal-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-main);
}

.required-star {
    color: var(--status-error);
    margin-left: 2px;
}

/* Inputs and Selects */
.modal-input,
.modal-select {
    background-color: var(--bg-base);
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    outline: none;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .modal-input::placeholder {
        color: var(--text-muted);
        opacity: 0.7;
    }

    .modal-input:focus,
    .modal-select:focus {
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    .modal-input.input-error,
    .modal-select.input-error {
        border-color: var(--status-error);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    }

    .modal-select option {
        background: var(--bg-surface);
        color: var(--text-main);
    }

/* Hint text */
.field-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Toggle switch row */
.modal-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    transition: border-color 0.2s;
    margin-bottom: 4px;
}

    .modal-toggle-row:hover {
        border-color: var(--border-strong);
    }

/* Unified Premium Toggle Switch styling */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}
.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-track {
    position: absolute;
    inset: 0;
    background-color: var(--border-strong, #ccc);
    border-radius: 999px;
    transition: background-color 0.25s ease;
}
.toggle-thumb {
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-switch input:checked + .toggle-track {
    background-color: var(--brand-primary);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
    transform: translateX(20px);
}

/* Modal Footer — always pinned, never scrolls */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-base);
    flex-shrink: 0;   /* critical: never let footer be squeezed by content */
}

/* Spinner keyframes for submit loading state */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/* User Dropdown */
.user-menu-container {
    position: relative;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Section labels as dividers */
.modal-section-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 8px 0 6px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 8px;
}

    .modal-section-label:first-child {
        padding-top: 0;
    }

/* Two-column form grid */
.modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
}

@media (max-width: 520px) {
    .modal-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual field */
.modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 4px;
}

/* Labels */
.modal-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-main);
}

.required-star {
    color: var(--status-error);
    margin-left: 2px;
}

/* Inputs and Selects */
.modal-input,
.modal-select {
    background-color: var(--bg-base);
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    outline: none;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .modal-input::placeholder {
        color: var(--text-muted);
        opacity: 0.7;
    }

    .modal-input:focus,
    .modal-select:focus {
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    .modal-input.input-error,
    .modal-select.input-error {
        border-color: var(--status-error);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    }

    .modal-select option {
        background: var(--bg-surface);
        color: var(--text-main);
    }

/* Hint text */
.field-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Toggle switch row */
.modal-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    transition: border-color 0.2s;
    margin-bottom: 4px;
}

    .modal-toggle-row:hover {
        border-color: var(--border-strong);
    }

/* Duplicate removed (now globally defined above) */

/* Modal Footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-base);
    flex-shrink: 0;
}

/* Spinner keyframes for submit loading state */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/* User Dropdown */
.user-menu-container {
    position: relative;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    position: relative;
}

/* User Dropdown Refined */
.user-avatar-group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
}

    .user-avatar-group:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--border-subtle);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

.user-info-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

    @media (max-width: 640px) {
        .user-info-text { display: none; }
        .user-avatar-group { padding: 4px; background: transparent; border: none; }
    }

.user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
}

.user-role {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 1000;
    padding: 8px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    font-size: 0.875rem;
    color: var(--text-muted);
    border-radius: var(--radius-md);
    transition: all 0.15s;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
}

    .dropdown-item:hover {
        background: var(--bg-surface-hover);
        color: var(--text-main);
    }

.dropdown-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 8px 0;
}

.dropdown-header {
    padding: 8px 12px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.glass-dropdown {
    backdrop-filter: blur(12px);
    background: rgba(18, 18, 18, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    min-width: 220px;
    transform: translateY(15px);
    visibility: hidden;
    opacity: 0;
}

    .glass-dropdown.open {
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
    }

.item-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s;
}

.profile-icon { color: var(--brand-primary); }
.settings-icon { color: var(--status-warning); }
.logout-icon { color: var(--status-error); }

.dropdown-item:hover .item-icon {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.1);
}

.logout-link:hover {
    background: rgba(var(--status-error-rgb), 0.05) !important;
}
    .logout-link:hover span {
        color: var(--status-error) !important;
    }

/* ==========================================================================
   PERSONALIZATION & NAVIGATION ENGINE
   ========================================================================== */

/* 1. Theme Color overrides */
html[data-theme-color="blue"] {
    --brand-primary: #2563eb;
    --brand-primary-hover: #1d4ed8;
    --brand-primary-rgb: 37, 99, 235;
    --brand-gradient-start: #2563eb;
    --brand-gradient-end: #3b82f6;
    --brand-gradient: linear-gradient(135deg, #2563eb, #3b82f6);
    --brand-glow: 0 4px 14px rgba(37, 99, 235, 0.25);
    --brand-bg-subtle: rgba(37, 99, 235, 0.08);
}
html[data-theme-color="indigo"] {
    --brand-primary: #6366f1;
    --brand-primary-hover: #4f46e5;
    --brand-primary-rgb: 99, 102, 241;
    --brand-gradient-start: #4f46e5;
    --brand-gradient-end: #818cf8;
    --brand-gradient: linear-gradient(135deg, #4f46e5, #818cf8);
    --brand-glow: 0 4px 14px rgba(99, 102, 241, 0.25);
    --brand-bg-subtle: rgba(99, 102, 241, 0.08);
}
html[data-theme-color="emerald"] {
    --brand-primary: #10b981;
    --brand-primary-hover: #059669;
    --brand-primary-rgb: 16, 185, 129;
    --brand-gradient-start: #059669;
    --brand-gradient-end: #34d399;
    --brand-gradient: linear-gradient(135deg, #059669, #34d399);
    --brand-glow: 0 4px 14px rgba(16, 185, 129, 0.25);
    --brand-bg-subtle: rgba(16, 185, 129, 0.08);
}
html[data-theme-color="amber"] {
    --brand-primary: #f59e0b;
    --brand-primary-hover: #d97706;
    --brand-primary-rgb: 245, 158, 11;
    --brand-gradient-start: #d97706;
    --brand-gradient-end: #fbbf24;
    --brand-gradient: linear-gradient(135deg, #d97706, #fbbf24);
    --brand-glow: 0 4px 14px rgba(245, 158, 11, 0.25);
    --brand-bg-subtle: rgba(245, 158, 11, 0.08);
}
html[data-theme-color="rose"] {
    --brand-primary: #f43f5e;
    --brand-primary-hover: #e11d48;
    --brand-primary-rgb: 244, 63, 94;
    --brand-gradient-start: #e11d48;
    --brand-gradient-end: #fda4af;
    --brand-gradient: linear-gradient(135deg, #e11d48, #fda4af);
    --brand-glow: 0 4px 14px rgba(244, 63, 94, 0.25);
    --brand-bg-subtle: rgba(244, 63, 94, 0.08);
}
html[data-theme-color="violet"] {
    --brand-primary: #8b5cf6;
    --brand-primary-hover: #7c3aed;
    --brand-primary-rgb: 139, 92, 246;
    --brand-gradient-start: #7c3aed;
    --brand-gradient-end: #a78bfa;
    --brand-gradient: linear-gradient(135deg, #7c3aed, #a78bfa);
    --brand-glow: 0 4px 14px rgba(139, 92, 246, 0.25);
    --brand-bg-subtle: rgba(139, 92, 246, 0.08);
}
html[data-theme-color="teal"] {
    --brand-primary: #0d9488;
    --brand-primary-hover: #0f766e;
    --brand-primary-rgb: 13, 148, 136;
    --brand-gradient-start: #0f766e;
    --brand-gradient-end: #2dd4bf;
    --brand-gradient: linear-gradient(135deg, #0f766e, #2dd4bf);
    --brand-glow: 0 4px 14px rgba(13, 148, 136, 0.25);
    --brand-bg-subtle: rgba(13, 148, 136, 0.08);
}
html[data-theme-color="orange"] {
    --brand-primary: #ea580c;
    --brand-primary-hover: #c2410c;
    --brand-primary-rgb: 234, 88, 12;
    --brand-gradient-start: #ea580c;
    --brand-gradient-end: #f97316;
    --brand-gradient: linear-gradient(135deg, #ea580c, #f97316);
    --brand-glow: 0 4px 14px rgba(234, 88, 12, 0.25);
    --brand-bg-subtle: rgba(234, 88, 12, 0.08);
}
html[data-theme-color="charcoal"] {
    --brand-primary: #4b5563;
    --brand-primary-hover: #374151;
    --brand-primary-rgb: 75, 85, 99;
    --brand-gradient-start: #1f2937;
    --brand-gradient-end: #4b5563;
    --brand-gradient: linear-gradient(135deg, #1f2937, #4b5563);
    --brand-glow: 0 4px 14px rgba(75, 85, 99, 0.25);
    --brand-bg-subtle: rgba(75, 85, 99, 0.08);
}
html[data-theme-color="crimson"] {
    --brand-primary: #be123c;
    --brand-primary-hover: #9f1239;
    --brand-primary-rgb: 190, 18, 60;
    --brand-gradient-start: #9f1239;
    --brand-gradient-end: #e11d48;
    --brand-gradient: linear-gradient(135deg, #9f1239, #e11d48);
    --brand-glow: 0 4px 14px rgba(190, 18, 60, 0.25);
    --brand-bg-subtle: rgba(190, 18, 60, 0.08);
}

/* 2. Density Variables */
:root {
    --content-padding: 32px;
    --card-padding: 20px;
    --table-padding-y: 14px;
    --table-padding-x: 20px;
}
html[data-density="compact"] {
    --content-padding: 16px;
    --card-padding: 12px;
    --table-padding-y: 8px;
    --table-padding-x: 12px;
}
html[data-density="standard"] {
    --content-padding: 32px;
    --card-padding: 20px;
    --table-padding-y: 14px;
    --table-padding-x: 20px;
}
html[data-density="spacious"] {
    --content-padding: 48px;
    --card-padding: 28px;
    --table-padding-y: 20px;
    --table-padding-x: 28px;
}

/* Apply density variables dynamically */
.content-area {
    padding: var(--content-padding) !important;
}
.panel-body, .panel-header {
    padding: var(--card-padding) !important;
}
.stat-box {
    padding: var(--card-padding) !important;
}
.data-table td, .if-table tbody td {
    padding: var(--table-padding-y) var(--table-padding-x) !important;
}
.data-table th, .if-table thead th {
    padding: calc(var(--table-padding-y) - 2px) var(--table-padding-x) !important;
}

/* 3. Top Navigation Layout styles */
.top-brand-logo {
    display: none;
    align-items: center;
    gap: 12px;
    margin-right: 24px;
}
.top-navbar {
    display: none;
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 24px;
    width: 100%;
}
.top-navbar-container {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 48px;
    max-width: 1200px;
    margin: 0 auto;
}
.top-nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.top-nav-link {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 4px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
}
.top-nav-link:hover, .top-nav-item:hover .top-nav-link {
    color: var(--text-main);
}
.top-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    min-width: 180px;
    z-index: 100;
    display: none;
    animation: fadeScale 0.15s ease-out;
}
.top-nav-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.15s;
}
.top-nav-dropdown-menu a:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}
.top-nav-item.dropdown:hover .top-nav-dropdown-menu {
    display: block;
}

/* 4. Top Navigation Layout overrides */
html[data-layout="top"] .sidebar {
    display: none !important;
}
html[data-layout="top"] .top-brand-logo {
    display: flex !important;
}
html[data-layout="top"] .top-navbar {
    display: block !important;
}
html[data-layout="top"] .hamburger-menu {
    display: none !important;
}
html[data-layout="top"] .top-header {
    flex-direction: column;
    height: auto;
    padding: 0;
    align-items: stretch;
}
html[data-layout="top"] .header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    height: var(--header-height);
    border-bottom: 1px solid var(--border-subtle);
}
.header-top-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

/* 5. Settings Drawer (Theme Settings Panel) */
.settings-drawer {
    position: fixed;
    top: 0;
    right: -340px;
    width: 340px;
    height: 100vh;
    background-color: var(--bg-surface);
    border-left: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.settings-drawer.open {
    right: 0;
}
.settings-drawer-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.settings-drawer-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}
.close-drawer-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.close-drawer-btn:hover {
    color: var(--text-main);
}
.settings-drawer-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}
.settings-group {
    margin-bottom: 24px;
}
.settings-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.settings-options {
    display: flex;
    gap: 8px;
}
.settings-radio-label {
    flex: 1;
    cursor: pointer;
    user-select: none;
}
.settings-radio-label input {
    display: none;
}
.settings-radio-label span {
    display: block;
    padding: 10px 6px;
    text-align: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s;
}
.settings-radio-label input:checked + span {
    border-color: var(--brand-primary);
    background: rgba(var(--brand-primary), 0.08); /* Works dynamically with scheme updates */
    color: var(--brand-primary);
}

.color-palette {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s;
}
.color-dot:hover {
    transform: scale(1.15);
}
.color-dot.active {
    border-color: var(--text-main);
}
.color-dot.active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}
.settings-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1990;
    display: none;
}
.settings-drawer-backdrop.open {
    display: block;
}

@keyframes fadeScale {
    from { opacity: 0; transform: scale(0.95) translateY(-5px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVENESS OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
    html[data-layout="top"] .top-brand-logo {
        display: none !important;
    }
    html[data-layout="top"] .top-navbar {
        display: none !important;
    }
    html[data-layout="top"] .hamburger-menu {
        display: flex !important;
    }
    html[data-layout="top"] .top-header {
        flex-direction: row;
        height: var(--header-height);
        align-items: center;
        padding: 0 16px;
    }
    html[data-layout="top"] .header-top-row {
        border-bottom: none;
        padding: 0;
        height: 100%;
    }

    /* Transform tables with class .if-table into stackable cards */
    .if-table, .if-table thead, .if-table tbody, .if-table th, .if-table td, .if-table tr {
        display: block !important;
    }
    .if-table thead {
        display: none !important;
    }
    .if-table tbody tr {
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--radius-lg) !important;
        margin-bottom: 16px !important;
        padding: 16px !important;
        box-shadow: var(--shadow-sm) !important;
    }
    .if-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px dashed var(--border-subtle) !important;
        width: 100% !important;
        text-align: right !important;
    }
    .if-table tbody td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-top: 8px !important;
        justify-content: flex-end !important;
    }

    /* Dynamic Labels on Mobile */
    .if-table tbody td:nth-of-type(1)::before { content: "Tenant"; }
    .if-table tbody td:nth-of-type(2)::before { content: "DB Mode"; }
    .if-table tbody td:nth-of-type(3)::before { content: "Plan / Sub"; }
    .if-table tbody td:nth-of-type(4)::before { content: "Grace"; }
    .if-table tbody td:nth-of-type(5)::before { content: "Max Users"; }
    .if-table tbody td:nth-of-type(6)::before { content: "Status"; }
    .if-table tbody td:nth-of-type(7)::before { content: "Actions"; }
    
    .if-table tbody td::before {
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
        margin-right: 16px;
        float: left;
        text-align: left;
    }

    /* Transform subscription table into card-like items on mobile */
    #subscriptionTable, #subscriptionTable thead, #subscriptionTable tbody, #subscriptionTable th, #subscriptionTable td, #subscriptionTable tr {
        display: block !important;
    }
    #subscriptionTable thead {
        display: none !important;
    }
    #subscriptionTable tbody tr {
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--radius-lg) !important;
        margin-bottom: 16px !important;
        padding: 16px !important;
        box-shadow: var(--shadow-sm) !important;
    }
    #subscriptionTable tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px dashed var(--border-subtle) !important;
        width: 100% !important;
        text-align: right !important;
    }
    #subscriptionTable tbody td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-top: 8px !important;
        justify-content: flex-end !important;
    }
    #subscriptionTable tbody td:nth-of-type(1)::before { content: "Select"; }
    #subscriptionTable tbody td:nth-of-type(2)::before { content: "Plan Name"; }
    #subscriptionTable tbody td:nth-of-type(3)::before { content: "Billing"; }
    #subscriptionTable tbody td:nth-of-type(4)::before { content: "Pricing"; }
    #subscriptionTable tbody td:nth-of-type(5)::before { content: "Status"; }
    #subscriptionTable tbody td:nth-of-type(6)::before { content: "Actions"; }
    #subscriptionTable tbody td::before {
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
        margin-right: 16px;
        float: left;
        text-align: left;
    }
}

/* ==========================================================================
   TABLER-INSPIRED DASHBOARD STATS CARDS
   ========================================================================== */
.tabler-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tabler-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-primary);
}

.tabler-card-body {
    padding: 10px 12px;
    flex: 1 1 auto;
}

.tabler-stat-card {
    overflow: hidden;
}

.tabler-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tabler-stat-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.tabler-stat-icon {
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--radius-md);
    padding: 6px;
}

html[data-theme="dark"] .tabler-stat-icon {
    background: rgba(59, 130, 246, 0.15);
}

.tabler-stat-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.tabler-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.tabler-stat-trend {
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 4px;
}

.tabler-stat-trend.trend-up {
    color: var(--status-success);
    background: var(--status-success-bg);
}

.tabler-stat-trend.trend-down {
    color: var(--status-error);
    background: var(--status-error-bg);
}

.tabler-stat-trend.trend-neutral {
    color: var(--text-muted);
    background: var(--bg-surface-hover);
}

.tabler-stat-description {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.tabler-chart-container {
    height: 22px;
    margin-top: 6px;
    position: relative;
    width: 100%;
}

.tabler-sparkline-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tabler-sparkline-path {
    fill: none;
    stroke: var(--brand-primary);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tabler-sparkline-fill {
    fill: rgba(59, 130, 246, 0.04);
    stroke: none;
}

/* Circular Progress Ring */
.tabler-progress-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
}

.tabler-progress-ring svg {
    transform: rotate(-90deg);
}

.tabler-progress-ring-circle-bg {
    fill: none;
    stroke: var(--border-subtle);
    stroke-width: 3.5;
}

.tabler-progress-ring-circle-fg {
    fill: none;
    stroke: var(--brand-primary);
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke-dasharray 0.35s;
}

.tabler-progress-ring-text {
    font-size: 8px;
    font-weight: 700;
    fill: var(--text-main);
    transform: rotate(90deg);
    transform-origin: 50% 50%;
}

/* Form Tabs styling */
.form-tabs {
    display: flex;
    border-bottom: 1.5px solid var(--border-subtle);
    margin-bottom: 12px;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.form-tabs::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 4px 2px 6px 2px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-main);
}

.tab-btn.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: tabFadeIn 0.25s ease-in-out;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Multi-select styling updates for modern UI */
.ct-multi-select {
    border: 1.5px solid var(--border-subtle) !important;
    background-color: var(--bg-base) !important;
    color: var(--text-main) !important;
}

.ct-multi-select option:checked {
    background-color: rgba(var(--brand-primary-rgb), 0.1) !important;
    color: var(--brand-primary) !important;
}

/* UI DENSITY ADJUSTMENTS */
/* UI DENSITY ADJUSTMENTS */
html[data-density="compact"] {
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --header-height: 38px;
}
html[data-density="compact"] body {
    font-size: 11px;
}
html[data-density="compact"] h1 { font-size: 0.95rem; }
html[data-density="compact"] h2 { font-size: 0.85rem; }
html[data-density="compact"] h3 { font-size: 0.75rem; }
html[data-density="compact"] h4 { font-size: 0.65rem; }
html[data-density="compact"] .top-header,
html[data-density="compact"] .sidebar-header {
    height: var(--header-height);
}
html[data-density="compact"] .content-area {
    padding: 6px 10px;
}
html[data-density="compact"] .panel-body,
html[data-density="compact"] .modal-body {
    padding: 6px 10px;
}
html[data-density="compact"] .panel {
    margin-bottom: 8px;
}
html[data-density="compact"] .btn {
    padding: 2px 6px;
    font-size: 0.75rem;
    gap: 3px;
}
html[data-density="compact"] .form-input,
html[data-density="compact"] .form-select,
html[data-density="compact"] .modal-input,
html[data-density="compact"] .modal-select {
    padding: 3px 6px;
    font-size: 0.72rem;
    border-radius: var(--radius-sm);
}
html[data-density="compact"] td,
html[data-density="compact"] th {
    padding: 4px 6px !important;
    font-size: 0.72rem;
}
html[data-density="compact"] .nav-item {
    padding: 4px 6px;
    font-size: 0.72rem;
}
html[data-density="compact"] .stat-box {
    padding: 8px 10px;
}
html[data-density="compact"] .stat-value {
    font-size: 1.15rem;
}

/* UI DENSITY SPACIOUS ADJUSTMENTS */
html[data-density="spacious"] {
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --header-height: 56px;
}
html[data-density="spacious"] body {
    font-size: 13px;
}
html[data-density="spacious"] .content-area {
    padding: 16px 20px;
}
html[data-density="spacious"] .panel-body {
    padding: 20px;
}

/* UNIFIED WIZARD FORM STYLES */
.wizard-container {
    display: flex;
    flex-direction: column;
    flex: 1;          /* fill whatever space .modal-body gives it */
    min-height: 0;    /* allow it to shrink so footer stays visible */
    overflow: hidden; /* clip — let children handle their own scroll */
}
/* The inner .modal-body inside a wizard should scroll; the footer should not */
.wizard-container > .modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.wizard-steps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 10px;
}
.wizard-step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    position: relative;
    z-index: 2;
}
.wizard-step-indicator.active {
    color: var(--brand-primary);
    font-weight: 600;
}
.wizard-step-indicator.completed {
    color: var(--status-success);
}
.wizard-step-indicator .step-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}
.wizard-step-indicator.active .step-number {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
.wizard-step-indicator.completed .step-number {
    background: var(--status-success-bg);
    border-color: var(--status-success);
    color: var(--status-success-text);
}
.wizard-step {
    display: none;
}
.wizard-step.active {
    display: block;
    animation: tabFadeIn 0.2s ease-in-out;
}

/* ============================================================
   Upload Preview Card
   ============================================================ */
.upload-preview-card {
    margin-top: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-base);
    overflow: hidden;
    animation: tabFadeIn 0.2s ease;
}

/* Full-width image preview zone — compact height so footer stays visible */
.upload-img-preview-area {
    width: 100%;
    min-height: 70px;
    background: var(--bg-surface-hover);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    box-sizing: border-box;
}
.upload-img-preview {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
    border-radius: 6px;
    display: block;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* Info bar: filename + size + actions */
.upload-info-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    flex-wrap: nowrap;        /* keep buttons on the same row */
}
.upload-file-details {
    flex: 1;
    min-width: 0;             /* crucial: allows text-overflow:ellipsis in flex child */
    overflow: hidden;
}
.upload-filename {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}
.upload-filesize {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 1px;
}
.upload-ready-badge {
    font-size: 0.7rem;
    color: var(--status-success);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Action buttons group — never shrinks */
.upload-action-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1;
    border: 1px solid transparent;
    font-family: inherit;
}
.upload-btn-change {
    border-color: var(--border-strong);
    background: var(--bg-surface-hover);
    color: var(--text-muted);
}
.upload-btn-change:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: rgba(59, 130, 246, 0.06);
}
.upload-btn-remove {
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.05);
    color: var(--status-error);
}
.upload-btn-remove:hover {
    border-color: var(--status-error);
    background: rgba(239, 68, 68, 0.12);
}

/* Existing image row (edit mode) */
.upload-existing-row {
    margin-top: 6px;
    padding: 5px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-base);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.upload-existing-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.upload-existing-img {
    height: 24px;
    border-radius: 4px;
    object-fit: contain;
    border: 1px solid var(--border-subtle);
}

/* Responsive: on very small screens, wrap action row below filename */
@media (max-width: 400px) {
    .upload-info-bar {
        flex-wrap: wrap;
    }
    .upload-action-row {
        width: 100%;
        justify-content: flex-end;
    }
}

.wizard-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface-hover);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin: 20px -24px -24px -24px;
}

/* Wizard footer: overrides modal-footer to use space-between layout */
.modal-footer.wizard-footer {
    justify-content: space-between;
    align-items: center;
}
.wizard-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wizard-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ct-invalid: field-level validation error state for wizard */
.modal-input.ct-invalid,
.modal-select.ct-invalid {
    border-color: var(--status-error) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Responsive: tablet */
@media (max-width: 768px) {
    .wizard-steps-header {
        gap: 6px;
    }
    .wizard-step-indicator .step-label {
        display: none;
    }
    .wizard-step-indicator.active .step-label {
        display: block;
    }
}

/* Responsive: mobile - stack footer buttons */
@media (max-width: 520px) {
    .modal-footer.wizard-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .wizard-footer-left {
        width: 100%;
    }
    .wizard-footer-right {
        justify-content: flex-end;
        width: 100%;
    }
    .wizard-btn-back,
    .wizard-btn-prev {
        width: 100%;
    }
    .modal-form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Responsive: wider modal collapses grid at 600px */
@media (max-width: 600px) {
    .modal-form-grid {
        grid-template-columns: 1fr;
    }
}

/* GRID & LIST VIEW TOGGLE STYLES */
.grid-cards-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 16px 0;
}
@media (max-width: 1400px) {
    .grid-cards-container {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 992px) {
    .grid-cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
@media (max-width: 576px) {
    .grid-cards-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
}
.view-toggle-btn.active {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

/* USER PROFILE CARDS */
/* USER PROFILE CARDS */
.profile-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}
.profile-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-light, #a78bfa) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.profile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.08), 0 4px 12px -5px rgba(0, 0, 0, 0.03);
    border-color: var(--brand-primary);
}
.profile-card:hover::before {
    opacity: 1;
}
.profile-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.profile-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.profile-card-avatar.primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #4f46e5 100%);
}
.profile-card-avatar.neutral {
    background: linear-gradient(135deg, #9ca3af 0%, #4b5563 100%);
}
.profile-card-info {
    flex: 1;
    min-width: 0;
}
.profile-card-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-card-username {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
}
.profile-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
    padding-top: 14px;
    margin-top: 4px;
}
.profile-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.profile-card-row span:first-child {
    font-weight: 500;
    color: var(--text-muted);
}
.profile-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}
.profile-card-menu {
    position: absolute;
    top: 14px;
    right: 14px;
}

/* APPLICATION & ROLE CARDS */
.app-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    transition: all 0.25s ease;
    overflow: hidden;
}
.app-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.08), 0 4px 12px -5px rgba(0, 0, 0, 0.03);
    border-color: var(--brand-primary);
}
.app-card:hover::before {
    opacity: 1;
}
.app-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.app-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(59, 130, 246, 0.08);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.15);
}
.app-card-body {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.app-card-usage {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

.role-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    transition: all 0.25s ease;
    overflow: hidden;
}
.role-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.role-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.08), 0 4px 12px -5px rgba(0, 0, 0, 0.03);
    border-color: var(--brand-primary);
}
.role-card:hover::before {
    opacity: 1;
}
.role-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.role-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.08);
    color: var(--status-warning-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.15);
}

/* EXPANDABLE PERMISSION CATEGORY CARDS */
.permission-category-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.permission-category-card.active {
    border-color: var(--brand-primary);
}
.permission-category-header {
    padding: 14px 20px;
    background: var(--bg-surface-hover);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.permission-category-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.permission-category-counter {
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--border-strong);
    color: var(--text-main);
    padding: 2px 8px;
    border-radius: 12px;
}
.permission-category-body {
    display: none;
    padding: 20px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}
.permission-category-body.open {
    display: block;
    animation: tabFadeIn 0.2s ease-in-out;
}
/* Duplicate removed (now globally defined above) */

/* ACTION DROPDOWNS */
.card-actions-dropdown {
    position: relative;
    display: inline-block;
}
.card-actions-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 30;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 140px;
    margin-top: 4px;
}
.card-actions-menu.open {
    display: block;
}
.card-actions-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--text-main);
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.card-actions-item:hover {
    background: var(--bg-surface-hover);
}
.card-actions-item.text-error {
    color: var(--status-error);
}

/* ============================================
   SSO HERO WELCOME BANNER
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@800&family=DM+Sans:wght@400;500;600&display=swap');

.dashboard-hero-banner {
    width: 100%;
    background: linear-gradient(135deg, #e8edf5 0%, #dbeafe 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    font-family: 'DM Sans', 'Inter', -apple-system, sans-serif;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .dashboard-hero-banner {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(99, 102, 241, 0.03) 50%, rgba(24, 24, 27, 0) 100%), var(--bg-surface);
    border-color: var(--border-subtle);
}

.hero-banner-inner {
    display: flex;
    align-items: center;
    min-height: 220px;
    position: relative;
}

.hero-banner-text {
    position: relative;
    z-index: 10;
    padding: 32px 0 32px 32px;
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-banner-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: var(--brand-primary);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.hero-banner-eyebrow::before {
    content: '';
    width: 16px;
    height: 2px;
    background: var(--brand-primary);
    border-radius: 2px;
    display: inline-block;
}

.hero-banner-title {
    font-family: 'Syne', -apple-system, sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.18;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.hero-banner-title span {
    color: var(--brand-primary);
}

.hero-banner-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

.hero-banner-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--status-success-bg);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--status-success-text);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    align-self: flex-start;
}

.hero-banner-blink {
    width: 6px;
    height: 6px;
    background: var(--status-success);
    border-radius: 50%;
    animation: bl 1.2s ease-in-out infinite;
}

.hero-banner-scene {
    flex: 1;
    position: relative;
    height: 240px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-banner-scene svg {
    width: 100%;
    height: 100%;
    max-height: 240px;
}

/* SVG Theme Adjustments */
.dashboard-hero-banner .svg-win-bg {
    fill: var(--bg-surface);
    stroke: var(--border-subtle);
}
.dashboard-hero-banner .svg-text-line {
    fill: var(--border-strong);
    opacity: 0.5;
}
.dashboard-hero-banner .svg-cloud-bg {
    fill: var(--bg-surface);
    stroke: var(--border-subtle);
}
.dashboard-hero-banner .svg-cloud-flat {
    fill: var(--bg-surface);
}
.dashboard-hero-banner .svg-server-box {
    fill: var(--bg-surface-hover);
    stroke: var(--border-subtle);
}
.dashboard-hero-banner .svg-server-panel {
    fill: var(--border-strong);
}
.dashboard-hero-banner .svg-win-header {
    fill: var(--bg-surface-hover);
}
.dashboard-hero-banner .svg-win-header-body {
    fill: var(--bg-surface-hover);
}

html[data-theme="dark"] .dashboard-hero-banner rect[fill="#c8d5e8"] {
    fill: #09090b;
    opacity: 0.6;
}

/* Animations */
@keyframes bl{0%,100%{opacity:1}50%{opacity:0.25}}
@keyframes fA{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fB{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
@keyframes fC{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes fD{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}
@keyframes cloudBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes keyRock{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}}
@keyframes shieldPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.8;transform:scale(1.1)}}
@keyframes dashFlow{to{stroke-dashoffset:-22}}
@keyframes ckPop{0%,35%{transform:scale(0);opacity:0}55%{transform:scale(1.3);opacity:1}75%,100%{transform:scale(1);opacity:1}}
@keyframes tokenGo1{0%{offset-distance:0%;opacity:0}15%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes tokenGo2{0%{offset-distance:0%;opacity:0}15%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes tokenGo3{0%{offset-distance:0%;opacity:0}15%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes tokenGo4{0%{offset-distance:0%;opacity:0}15%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes monBlink{0%,100%{opacity:0.85}50%{opacity:1}}
@keyframes personNod{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes stackBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.dashboard-hero-banner .g-wintl{animation:fA 3.6s ease-in-out infinite;}
.dashboard-hero-banner .g-winbl{animation:fB 4.1s ease-in-out infinite 0.5s;}
.dashboard-hero-banner .g-wintr{animation:fC 3.8s ease-in-out infinite 0.9s;}
.dashboard-hero-banner .g-winbr{animation:fD 4.3s ease-in-out infinite 1.3s;}
.dashboard-hero-banner .g-cloud{animation:cloudBob 4s ease-in-out infinite;}
.dashboard-hero-banner .g-key{animation:keyRock 2.5s ease-in-out infinite;transform-origin:336px 68px;}
.dashboard-hero-banner .g-shield{animation:shieldPulse 2.5s ease-in-out infinite 0.5s;transform-origin:312px 72px;}
.dashboard-hero-banner .g-stack{animation:stackBob 3s ease-in-out infinite 0.3s;}
.dashboard-hero-banner .g-person{animation:personNod 4s ease-in-out infinite;}
.dashboard-hero-banner .dl{stroke-dasharray:7 5;animation:dashFlow 1.3s linear infinite;}
.dashboard-hero-banner .dl2{animation-delay:0.32s;}
.dashboard-hero-banner .dl3{animation-delay:0.64s;}
.dashboard-hero-banner .dl4{animation-delay:0.96s;}
.dashboard-hero-banner .ck1{animation:ckPop 3s ease-in-out infinite 0.2s;transform-origin:115px 240px;}
.dashboard-hero-banner .ck2{animation:ckPop 3.2s ease-in-out infinite 0.9s;transform-origin:75px 155px;}
.dashboard-hero-banner .ck3{animation:ckPop 3.4s ease-in-out infinite 1.6s;transform-origin:530px 130px;}
.dashboard-hero-banner .ck4{animation:ckPop 3.1s ease-in-out infinite 2.2s;transform-origin:505px 255px;}
.dashboard-hero-banner .g-mon{animation:monBlink 2.5s ease-in-out infinite;}
.dashboard-hero-banner .g-ssob{animation:cloudBob 4s ease-in-out infinite 0.5s;}

.dashboard-hero-banner .t1{offset-path:path('M115,225 Q200,180 305,100');animation:tokenGo1 2.4s ease-in-out infinite;}
.dashboard-hero-banner .t2{offset-path:path('M78,145 Q180,120 305,105');animation:tokenGo2 2.4s ease-in-out infinite 0.6s;}
.dashboard-hero-banner .t3{offset-path:path('M530,120 Q430,95 325,100');animation:tokenGo3 2.4s ease-in-out infinite 1.2s;}
.dashboard-hero-banner .t4{offset-path:path('M508,248 Q430,190 325,108');animation:tokenGo4 2.4s ease-in-out infinite 1.8s;}

/* Responsiveness */
@media (max-width: 992px) {
    .hero-banner-inner {
        min-height: 200px;
    }
    .hero-banner-text {
        flex: 0 0 280px;
        padding: 24px 0 24px 24px;
    }
    .hero-banner-title {
        font-size: 22px;
    }
    .hero-banner-subtitle {
        font-size: 11.5px;
    }
}

@media (max-width: 850px) {
    .hero-banner-inner {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        padding: 28px 24px;
    }
    .hero-banner-text {
        padding: 0 0 24px 0;
        flex: 0 0 auto;
        text-align: center;
        align-items: center;
    }
    .hero-banner-eyebrow {
        justify-content: center;
    }
    .hero-banner-pill {
        align-self: center;
    }
    .hero-banner-scene {
        height: 200px;
        flex: 0 0 auto;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .hero-banner-inner {
        padding: 20px 16px;
    }
    .hero-banner-scene {
        height: 160px;
    }
    .hero-banner-title {
        font-size: 20px;
    }
    .hero-banner-subtitle {
        font-size: 11px;
    }
}

/* ==========================================================================
   DASHBOARD CUSTOMIZATION AND ENHANCEMENTS
   ========================================================================== */

/* 1. Stat Box Icon Wrappers and Soft Backgrounds */
.stat-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-box:hover .stat-icon-wrap {
    transform: scale(1.1);
}
.bg-soft-blue {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}
.bg-soft-emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}
.bg-soft-indigo {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}
.bg-soft-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.bg-soft-violet {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}
.bg-soft-rose {
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
}
.bg-soft-teal {
    background: rgba(20, 184, 166, 0.12);
    color: #14b8a6;
}
.bg-soft-cyan {
    background: rgba(6, 182, 212, 0.12);
    color: #06b6d4;
}

/* 2. Card Styles Overrides */
/* 2. Card Styles Overrides */
html[data-card-style="flat"] .panel,
html[data-card-style="flat"] .stat-box,
html[data-card-style="flat"] .profile-card,
html[data-card-style="flat"] .app-card,
html[data-card-style="flat"] .role-card,
html[data-card-style="flat"] .plan-card {
    border: none !important;
    box-shadow: none !important;
    background-color: var(--bg-surface) !important;
}
html[data-card-style="bordered"] .panel,
html[data-card-style="bordered"] .stat-box,
html[data-card-style="bordered"] .profile-card,
html[data-card-style="bordered"] .app-card,
html[data-card-style="bordered"] .role-card,
html[data-card-style="bordered"] .plan-card {
    border: 1px solid var(--border-strong) !important;
    box-shadow: none !important;
}
html[data-card-style="elevated"] .panel,
html[data-card-style="elevated"] .stat-box,
html[data-card-style="elevated"] .profile-card,
html[data-card-style="elevated"] .app-card,
html[data-card-style="elevated"] .role-card,
html[data-card-style="elevated"] .plan-card {
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-md) !important;
}
html[data-card-style="glass"] .panel,
html[data-card-style="glass"] .stat-box,
html[data-card-style="glass"] .profile-card,
html[data-card-style="glass"] .app-card,
html[data-card-style="glass"] .role-card,
html[data-card-style="glass"] .plan-card {
    background: rgba(var(--bg-surface-raw, 24, 24, 27), 0.65) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Define raw RGB components for card surfaces */
:root {
    --bg-surface-raw: 24, 24, 27; /* Dark theme raw RGB values */
}
html[data-theme="light"] {
    --bg-surface-raw: 255, 255, 255; /* Light theme raw RGB values */
}

/* 3. Dashboard Layout Overrides */
html[data-dashboard-layout="split"] .dashboard-layout {
    grid-template-columns: 1fr 1fr;
}
html[data-dashboard-layout="tabbed"] .dashboard-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
html[data-dashboard-layout="tabbed"] .dashboard-layout > .panel {
    display: none;
}
html[data-dashboard-layout="tabbed"] .dashboard-layout > .panel.active-tab {
    display: block;
    animation: fadeScale 0.25s ease-out;
}

/* Tab Selector Styles */
.dashboard-tab-nav {
    display: none;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 8px;
}
html[data-dashboard-layout="tabbed"] .dashboard-tab-nav {
    display: flex;
}
.dashboard-tab-btn {
    padding: 6px 14px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.dashboard-tab-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}
.dashboard-tab-btn.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--text-inverse);
}

/* 4. Quick Actions / Quick Add Styles */
.quick-add-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.quick-add-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background-color: var(--bg-base);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease, transform 0.2s ease;
    width: 100%;
}
.quick-add-btn:hover {
    background-color: var(--bg-surface-hover);
    border-color: var(--brand-primary);
    transform: translateY(-2px);
}
.quick-add-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.quick-add-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.quick-add-title {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}
.quick-add-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .quick-add-grid {
        grid-template-columns: 1fr;
    }
}

/* Subscriptions Grid Layout */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-bottom: 2rem;
}
@media (max-width: 992px) {
    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
@media (max-width: 640px) {
    .plans-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ==========================================================================
   UI/UX UPGRADES & PREMIUM DESIGNS
   ========================================================================== */

/* 1. Brand Gradient & Active States */
.btn-primary, .if-btn-primary, .wizard-btn-next, .wizard-btn-save {
    background: var(--brand-gradient) !important;
    border: none !important;
    color: var(--text-inverse) !important;
    box-shadow: var(--brand-glow) !important;
    transition: all 0.25s ease !important;
}
.btn-primary:hover, .if-btn-primary:hover, .wizard-btn-next:hover, .wizard-btn-save:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: var(--brand-glow);
}

.nav-item.active {
    background: var(--brand-bg-subtle) !important;
    border-left: 3px solid var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}
.nav-item.active svg {
    color: var(--brand-primary) !important;
}

/* 2. Card Styles Engine */
html[data-card-style="flat"] .panel, html[data-card-style="flat"] .if-panel {
    background: var(--bg-surface);
    border: none !important;
    box-shadow: none !important;
}
html[data-card-style="bordered"] .panel, html[data-card-style="bordered"] .if-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
}
html[data-card-style="elevated"] .panel, html[data-card-style="elevated"] .if-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-lg) !important;
}
html[data-card-style="glass"] .panel, html[data-card-style="glass"] .if-panel {
    background: rgba(24, 24, 27, 0.7) !important;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: var(--shadow-md) !important;
}
html[data-theme="light"][data-card-style="glass"] .panel, html[data-theme="light"][data-card-style="glass"] .if-panel {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Reduce plain white in light mode */
html[data-theme="light"] {
    --bg-base: #f0f2f5;
    --bg-surface: #fdfdfd;
    --bg-surface-hover: #f1f5f9;
}
html[data-theme="light"] .panel, html[data-theme="light"] .if-panel {
    position: relative;
}
html[data-theme="light"] .panel::before, html[data-theme="light"] .if-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand-gradient);
    z-index: 10;
}

/* 3. Details View Drawer */
.data-view-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 540px;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.data-view-drawer.open {
    transform: translateX(0);
}
.data-view-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(var(--brand-primary-rgb), 0.02);
}
.data-view-drawer-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}
.data-view-drawer-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 2px 0 0;
}
.data-view-drawer-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--brand-bg-subtle);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.close-drawer-btn {
    border: none;
    background: transparent;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}
.close-drawer-btn:hover {
    color: var(--text-main);
}
.data-view-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.data-view-drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--bg-base);
}
.data-view-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(2px);
}
.data-view-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* Property Grid for drawer */
.drawer-section {
    margin-bottom: 24px;
}
.drawer-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 12px;
    letter-spacing: 0.05em;
    border-bottom: 1px dashed var(--border-subtle);
    padding-bottom: 4px;
}
.property-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    font-size: 0.82rem;
}
html[data-theme="light"] .property-row {
    border-bottom: 1px solid rgba(0,0,0,0.02);
}
.property-label {
    color: var(--text-muted);
    font-weight: 500;
}
.property-value {
    color: var(--text-main);
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    word-break: break-all;
}

/* Premium Drawer Card & Grid Layouts */
.drawer-card {
    background: rgba(var(--brand-primary-rgb), 0.015);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 18px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.01);
}
html[data-theme="dark"] .drawer-card {
    background: rgba(255, 255, 255, 0.01);
}
.drawer-card:hover {
    border-color: rgba(var(--brand-primary-rgb), 0.3);
    box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.04);
}
.drawer-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}
.drawer-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
}
.drawer-card-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main);
    margin: 0;
}
.drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.drawer-grid-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.drawer-grid-item.full-width {
    grid-column: span 2;
}
.drawer-prop-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.drawer-prop-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    word-break: break-all;
}
.drawer-prop-value pre {
    margin: 4px 0 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.74rem;
    color: var(--text-main);
    max-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap;
}
html[data-theme="dark"] .drawer-prop-value pre {
    background: rgba(255, 255, 255, 0.03);
}

/* 4. Column Customizer & Premium Table Toolbar Widgets */
.premium-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 15;
}
.premium-table-toolbar .toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 250px;
}
.premium-table-toolbar .toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.search-input-wrapper {
    position: relative;
    display: inline-block;
}
.view-toggle-wrapper {
    display: flex;
    gap: 4px;
    background: var(--bg-base);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    align-items: center;
    height: 32px;
    box-sizing: border-box;
}
.view-toggle-wrapper .view-toggle-btn {
    width: 26px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}
.view-toggle-wrapper .view-toggle-btn:hover {
    color: var(--text-main);
    background: var(--bg-surface-hover);
}
.view-toggle-wrapper .view-toggle-btn.active {
    color: var(--text-inverse);
    background: var(--brand-primary);
}

.customizer-dropdown-container, .date-filter-dropdown-container {
    position: relative;
    display: inline-block;
}
.customizer-dropdown-menu, .date-filter-dropdown-menu {
    position: absolute;
    top: 100%;
    margin-top: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
    padding: 12px;
    box-sizing: border-box;
}
.customizer-dropdown-menu {
    width: 260px !important;
    left: 0;
    right: auto;
}
.date-filter-dropdown-menu {
    width: 280px !important;
    right: 0;
    left: auto;
}
.customizer-dropdown-menu.open, .date-filter-dropdown-menu.open {
    display: block;
}
.customizer-options-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
}
.customizer-option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-main);
    user-select: none;
}
.customizer-option-item:hover {
    background: var(--bg-surface-hover);
}
.customizer-option-item input {
    cursor: pointer;
}

/* Header layout */
.customizer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.customizer-title {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-main);
}
.customizer-counter {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Option item internal layout */
.customizer-option-item .option-label-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.customizer-option-item .drag-handle {
    color: var(--text-muted);
    opacity: 0.35;
    display: flex;
    align-items: center;
}
.customizer-option-item:hover .drag-handle {
    opacity: 0.85;
}

/* Footer layout */
.customizer-footer {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 10px;
}
.customizer-footer .btn-save {
    background: var(--brand-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.customizer-footer .btn-save:hover {
    background: var(--brand-primary-hover);
}
.customizer-footer .btn-cancel {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.customizer-footer .btn-cancel:hover {
    color: var(--text-main);
    background: var(--bg-surface-hover);
    border-color: var(--border-strong);
}

/* 5. Date Filter Widgets style additions */
.date-filter-dropdown-menu {
    width: 280px !important;
}
.date-presets .preset-btn {
    text-align: center;
    justify-content: center;
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
}

/* Glassmorphism drop-down menus standard overlay */
.glass-dropdown {
    background: rgba(24, 24, 27, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="light"] .glass-dropdown {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Eye action icon highlights */
.action-btn-view {
    color: var(--brand-primary);
    background: var(--brand-bg-subtle);
}
.action-btn-view:hover {
    background: var(--brand-primary);
    color: var(--text-inverse);
}

/* 6. Mobile responsiveness for Premium Table Toolbar */
@media (max-width: 768px) {
    .premium-table-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 12px;
    }
    .premium-table-toolbar .toolbar-left {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .premium-table-toolbar .toolbar-left .search-input-wrapper {
        width: 100%;
    }
    .premium-table-toolbar .toolbar-left .search-input-wrapper input {
        width: 100% !important;
    }
    .premium-table-toolbar .toolbar-right {
        width: 100%;
        justify-content: flex-start;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .premium-table-toolbar .date-filter-dropdown-container,
    .premium-table-toolbar .customizer-dropdown-container {
        width: 100%;
    }
    .premium-table-toolbar .date-filter-trigger-btn,
    .premium-table-toolbar .customizer-trigger-btn {
        width: 100%;
        justify-content: center;
    }
    .premium-table-toolbar .toolbar-right .view-toggle-wrapper {
        grid-column: span 2;
        width: 100%;
        justify-content: center;
    }
    .premium-table-toolbar .customizer-dropdown-menu,
    .premium-table-toolbar .date-filter-dropdown-menu {
        right: auto;
        left: 0;
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* Redesigned Premium Toolbar Elements */
.common-search-group {
    display: inline-flex;
    align-items: center;
    background: var(--bg-base);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    padding: 2px;
    height: 32px;
    box-sizing: border-box;
    position: relative;
    max-width: 380px;
    width: 100%;
}
.common-search-group .search-criteria-dropdown {
    position: relative;
    height: 100%;
}
.common-search-group .criteria-trigger {
    background: transparent;
    border: none;
    height: 100%;
    padding: 0 10px 0 12px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-right: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.common-search-group .criteria-trigger:hover {
    color: var(--text-main);
}
.common-search-group .criteria-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    display: none;
    min-width: 150px;
    padding: 4px 0;
}
.common-search-group .criteria-menu.open {
    display: block;
}
.common-search-group .criteria-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 0.78rem;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.common-search-group .criteria-item:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}
.common-search-group .search-input-container {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
}
.common-search-group .search-input-container svg {
    position: absolute;
    left: 8px;
    color: var(--text-muted);
    pointer-events: none;
}
.common-search-group .search-input-container input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    padding: 0 24px 0 28px;
    font-size: 0.78rem;
    height: 100%;
}
.common-search-group .search-clear-btn {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.common-search-group .search-clear-btn:hover {
    color: var(--text-main);
}

/* Modernized Date Filter button */
.date-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-main);
    background: var(--bg-surface);
    cursor: pointer;
    transition: all 0.2s ease;
    height: 32px;
    box-sizing: border-box;
}
.date-filter-btn:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-strong);
}
.date-filter-btn.active {
    background: var(--brand-bg-subtle);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* Filter Drawer Animations */
.filter-drawer.open {
    right: 0 !important;
}
.filter-drawer-backdrop.open {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.filter-group-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.filter-group-item label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* Subscriptions Kanban Board */
.board-container {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    width: 100%;
}

.board-column {
    flex: 1;
    min-width: 280px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.board-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.board-column-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.board-column-title .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.board-column-title .dot.dot-active {
    background: var(--status-success);
    box-shadow: 0 0 8px var(--status-success);
}

.board-column-title .dot.dot-retired {
    background: var(--text-muted);
}

.board-column-count {
    background: var(--bg-surface-hover);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
}

.board-column-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    align-content: start;
    min-height: 150px;
}

@media (max-width: 768px) {
    .board-container {
        flex-direction: column;
        padding: 10px 0;
    }
    .board-column {
        min-width: 100%;
    }
}
/* ==========================================================================
   Global Search Bar Styling — Premium Redesign
   ========================================================================== */

.global-search {
    position: relative;
    display: flex;
    align-items: center;
}

.global-search-wrapper {
    display: flex;
    align-items: center;
    height: 40px;
    width: 40px;
    min-width: 40px;
    border-radius: 20px;
    border: 1.5px solid transparent;
    background: transparent;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease,
                background-color 0.3s ease,
                border-radius 0.3s ease,
                box-shadow 0.35s ease;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

/* ---- Search icon (collapsed trigger) ---- */
.global-search-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
    z-index: 2;
}

.global-search-icon:hover {
    background-color: var(--bg-surface-hover);
    color: var(--brand-primary);
    transform: scale(1.08);
}

/* ---- Expanded content container ---- */
.global-search-content {
    display: flex;
    align-items: center;
    width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease 0.05s, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* ---- EXPANDED STATE ---- */
.global-search-wrapper.expanded {
    width: 480px;
    border-radius: var(--radius-lg);
    background-color: var(--bg-base);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-bg-subtle), var(--shadow-md);
    overflow: visible;
}

.global-search-wrapper.expanded .global-search-icon {
    cursor: default;
    border-radius: 0;
    min-width: 38px;
    width: 38px;
    color: var(--brand-primary);
    background: transparent;
    transform: none;
    margin-left: 4px;
    pointer-events: none;
}

.global-search-wrapper.expanded .global-search-icon:hover {
    background: transparent;
    color: var(--brand-primary);
    transform: none;
}

.global-search-wrapper.expanded .global-search-content {
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
}

/* ---- CATEGORY DROPDOWN ---- */
.global-search-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.global-search-dropdown-trigger {
    height: 100%;
    background: transparent;
    border: none;
    border-right: 1.5px solid var(--border-subtle);
    padding: 0 10px 0 10px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
    max-width: 150px;
    min-width: 80px;
}

.global-search-dropdown-trigger .category-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-dropdown-trigger:hover {
    background-color: var(--brand-bg-subtle);
    color: var(--brand-primary);
}

.global-search-dropdown-trigger .chevron-icon {
    flex-shrink: 0;
    opacity: 0.55;
    transition: transform 0.22s ease, opacity 0.2s;
}

.global-search-dropdown-trigger.menu-open .chevron-icon {
    transform: rotate(180deg);
    opacity: 1;
}

/* Dropdown panel */
.global-search-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
    width: 240px;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top left;
    transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1);
    z-index: 1100;
    padding: 6px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.global-search-dropdown-menu::-webkit-scrollbar { width: 4px; }
.global-search-dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.global-search-dropdown-menu::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 4px; }

.global-search-dropdown-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* Dropdown section header */
.global-search-dropdown-label {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 6px 10px 4px;
    opacity: 0.7;
}

/* Category items */
.global-search-category-item {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    color: var(--text-muted);
    text-align: left;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.global-search-category-item .cat-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-surface-hover);
    color: var(--text-muted);
    transition: background-color 0.15s, color 0.15s;
}

.global-search-category-item:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
    padding-left: 14px;
}

.global-search-category-item:hover .cat-icon {
    background: var(--brand-bg-subtle);
    color: var(--brand-primary);
}

.global-search-category-item.active {
    background: var(--brand-bg-subtle);
    color: var(--brand-primary);
    font-weight: 600;
}

.global-search-category-item.active .cat-icon {
    background: var(--brand-primary);
    color: #fff;
}

/* ---- INPUT ---- */
.global-search-input-wrap {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    min-width: 0;
}

.global-search-input-wrap input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    padding: 0 12px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
}

.global-search-input-wrap input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
    font-weight: 400;
}

/* ---- CLOSE BUTTON — properly centered & never overlaps search icon ---- */
.global-search-close {
    width: 30px;
    height: 30px;
    min-width: 30px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 5px;
    transition: background-color 0.2s, color 0.2s, transform 0.25s;
}

.global-search-close:hover {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    transform: rotate(90deg);
}

/* ---- RESULTS PANEL ---- */
.global-search-results-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
    z-index: 1100;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: searchPanelIn 0.2s cubic-bezier(0.4,0,0.2,1);
}

.global-search-results-panel::-webkit-scrollbar { width: 4px; }
.global-search-results-panel::-webkit-scrollbar-track { background: transparent; }
.global-search-results-panel::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 4px; }

@keyframes searchPanelIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Results header */
.search-results-header {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 10px 8px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0.7;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    color: var(--text-main);
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.search-result-item:hover {
    background-color: var(--bg-surface-hover);
    transform: translateX(3px);
    color: var(--text-main);
    text-decoration: none;
}

.search-result-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    background: var(--brand-bg-subtle);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s, color 0.15s;
}

.search-result-item:hover .search-result-icon {
    background: var(--brand-primary);
    color: #fff;
}

.search-result-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.search-result-title {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-subtitle {
    font-size: 0.73rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.search-result-arrow {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    color: var(--brand-primary);
    transition: opacity 0.15s, transform 0.15s;
}

.search-result-item:hover .search-result-arrow {
    opacity: 1;
    transform: translateX(2px);
}

.search-no-results,
.search-results-loading {
    padding: 20px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.search-no-results-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
    opacity: 0.45;
}

.search-results-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.search-results-loading .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: search-spin 0.65s linear infinite;
}

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

/* ---- RESPONSIVE ---- */
@media (max-width: 1200px) {
    .global-search-wrapper.expanded { width: 380px; }
}

@media (max-width: 992px) {
    .global-search-wrapper.expanded { width: 320px; }
    .global-search-dropdown-trigger { max-width: 110px; font-size: 0.75rem; padding: 0 8px; }
}

@media (max-width: 768px) {
    .global-search-wrapper.expanded { width: 260px; }
    .global-search-dropdown-trigger { max-width: 90px; font-size: 0.72rem; padding: 0 6px; }
}

@media (max-width: 576px) {
    .global-search-wrapper.expanded {
        position: fixed;
        top: 8px;
        left: 8px;
        right: 8px;
        width: auto !important;
        z-index: 1050;
        background-color: var(--bg-surface);
        border-color: var(--brand-primary);
        border-radius: var(--radius-lg);
        box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    }
    .global-search-results-panel {
        position: fixed;
        top: 60px;
        left: 8px;
        right: 8px;
        max-height: 60vh;
    }
    .global-search-dropdown-menu { width: 200px; }
}


/* ---- RESULTS PANEL ---- */
.global-search-results-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
    z-index: 1100;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: searchPanelIn 0.2s cubic-bezier(0.4,0,0.2,1);
}

.global-search-results-panel::-webkit-scrollbar { width: 4px; }
.global-search-results-panel::-webkit-scrollbar-track { background: transparent; }
.global-search-results-panel::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 4px; }

@keyframes searchPanelIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Results header */
.search-results-header {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 10px 8px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0.7;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    color: var(--text-main);
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.search-result-item:hover {
    background-color: var(--bg-surface-hover);
    transform: translateX(3px);
    color: var(--text-main);
    text-decoration: none;
}

.search-result-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    background: var(--brand-bg-subtle);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s, color 0.15s;
}

.search-result-item:hover .search-result-icon {
    background: var(--brand-primary);
    color: #fff;
}

.search-result-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.search-result-title {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-subtitle {
    font-size: 0.73rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.search-result-arrow {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    color: var(--brand-primary);
    transition: opacity 0.15s, transform 0.15s;
}

.search-result-item:hover .search-result-arrow {
    opacity: 1;
    transform: translateX(2px);
}

.search-no-results,
.search-results-loading {
    padding: 20px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.search-no-results-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
    opacity: 0.45;
}

.search-results-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.search-results-loading .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: search-spin 0.65s linear infinite;
}

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

/* ---- RESPONSIVE ---- */
@media (max-width: 1200px) {
    .global-search-wrapper.expanded { width: 300px; }
}

@media (max-width: 992px) {
    .global-search-wrapper.expanded { width: 280px; }
    .global-search-dropdown-trigger { max-width: 110px; font-size: 0.75rem; padding: 0 8px; }
}

@media (max-width: 768px) {
    .global-search-wrapper.expanded { width: 240px; }
    .global-search-dropdown-trigger { max-width: 90px; font-size: 0.72rem; padding: 0 6px; }
}

@media (max-width: 576px) {
    .global-search-wrapper.expanded {
        position: fixed;
        top: 8px;
        left: 8px;
        right: 8px;
        width: auto !important;
        z-index: 1050;
        background-color: var(--bg-surface);
        border-color: var(--brand-primary);
        border-radius: var(--radius-lg);
        box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    }
    .global-search-results-panel {
        position: fixed;
        top: 60px;
        left: 8px;
        right: 8px;
        max-height: 60vh;
    }
    .global-search-dropdown-menu { width: 200px; }
}



/* -----------------------------------------------
   MODERN PAGINATION & FOOTER
----------------------------------------------- */

/* Panel and DataTable wrapper height alignment to push pagination to bottom */
.panel, .if-panel, .tu-panel, .mt-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - 210px) !important;
}

.dataTables_wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

.table-responsive {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: auto !important;
}

.data-table, .if-table, .tu-table, .mt-table {
    flex: none !important;
}

.modern-table-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 16px !important; /* Reduced from 10px 24px */
    border: 1px solid var(--border-subtle) !important;
    background: var(--bg-surface) !important;
    border-radius: 100px !important; /* Premium capsule/pill style from image */
    margin: auto 14px 10px 14px !important; /* Uses margin-top: auto to push to bottom */
    position: sticky !important;
    bottom: 12px !important;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(8px);
}

.footer-left {
    justify-self: start;
    display: flex;
    align-items: center;
}

.footer-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 20px;
}

.dataTables_info {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.82rem;
    letter-spacing: -0.1px;
}

.dataTables_length {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dataTables_length select {
    appearance: none;
    background: var(--bg-base);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0 24px 0 8px !important; /* Compact padding */
    height: 26px !important; /* Height match */
    font-size: 0.74rem !important;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.dataTables_length select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--brand-bg-subtle);
}

.dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 2px;
}

.dataTables_paginate .paginate_button {
    min-width: 26px !important; /* Reduced from 32px */
    height: 26px !important; /* Reduced from 32px */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6px !important;
    border-radius: 50% !important; /* Circular number buttons as in image */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important; /* Smooth transitions */
    font-weight: 500 !important;
    font-size: 0.78rem !important; /* Compact typography */
    color: var(--text-muted) !important;
    user-select: none !important;
}

.dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
    background: var(--bg-surface-hover) !important;
    color: var(--text-main) !important;
}

.dataTables_paginate .paginate_button.current {
    background: var(--brand-primary) !important; /* Dynamically uses theme primary color */
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25) !important;
}

.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
    border-radius: 100px !important; /* Pill shape for Prev/Next button hovers */
    padding: 0 10px !important; /* Reduced from 12px */
    color: var(--text-main) !important;
    gap: 4px;
}

.dataTables_paginate .paginate_button.previous:hover:not(.disabled),
.dataTables_paginate .paginate_button.next:hover:not(.disabled) {
    background: var(--bg-surface-hover) !important;
}

.dataTables_paginate .paginate_button.disabled {
    color: var(--text-muted) !important;
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    background: transparent !important;
    pointer-events: none !important;
}

.dataTables_paginate span {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Tablet responsiveness */
@media (max-width: 900px) {
    .modern-table-footer {
        padding: 6px 12px !important;
        margin: 8px 10px !important;
    }
    .dataTables_paginate .paginate_button {
        min-width: 24px !important;
        height: 24px !important;
        font-size: 0.74rem !important;
    }
    .dataTables_paginate .paginate_button.previous,
    .dataTables_paginate .paginate_button.next {
        padding: 0 6px !important;
    }
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .modern-table-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px !important;
        border-radius: 12px !important; /* Rectangular-ish rounded card on mobile */
        margin: 8px 8px !important;
        bottom: 6px !important;
    }
    .footer-left, .footer-right {
        justify-self: center !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .dataTables_paginate {
        width: 100%;
        justify-content: center;
        gap: 2px;
    }
    .dataTables_paginate .paginate_button {
        min-width: 28px !important;
        height: 28px !important;
        font-size: 0.74rem !important;
    }
    .dataTables_paginate span {
        display: none !important; /* Hide numbers on small mobile screens to prevent overflow */
    }
}


/* -- Custom Multi-Select -- */
.custom-multiselect-wrapper {
    position: relative;
    width: 100%;
    font-family: var(--font-family, inherit);
}
.custom-multiselect-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 38px;
    padding: 4px 32px 4px 8px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: var(--radius-md, 6px);
    background: var(--bg-surface, #fff);
    cursor: text;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}
.custom-multiselect-control:focus-within {
    border-color: var(--brand-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.custom-multiselect-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.custom-multiselect-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 8px;
    background: var(--bg-surface-hover, #f3f4f6);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-main, #374151);
}
.custom-multiselect-chip .chip-remove {
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    border-radius: 50%;
    padding: 1px;
    transition: color 0.15s, background 0.15s;
}
.custom-multiselect-chip .chip-remove:hover {
    color: var(--status-error, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}
.custom-multiselect-search {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    min-width: 60px;
    font-size: 0.85rem;
    color: var(--text-main, #111827);
    padding: 4px 0;
}
.custom-multiselect-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #9ca3af);
    pointer-events: none;
}
.custom-multiselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
    z-index: 100;
    display: none;
    flex-direction: column;
    max-height: 250px;
    overflow: hidden;
}
.custom-multiselect-dropdown.show {
    display: flex;
}
.custom-multiselect-actions {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
    background: var(--bg-base, #f9fafb);
}
.custom-multiselect-actions button {
    border: none;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-primary, #3b82f6);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.custom-multiselect-actions button:hover {
    background: rgba(59, 130, 246, 0.1);
}
.custom-multiselect-options {
    overflow-y: auto;
    padding: 4px 0;
}
.custom-multiselect-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-main, #374151);
    transition: background 0.15s;
}
.custom-multiselect-option:hover {
    background: var(--bg-surface-hover, #f3f4f6);
}
.custom-multiselect-option.selected {
    background: rgba(59, 130, 246, 0.05);
    color: var(--brand-primary, #3b82f6);
    font-weight: 500;
}
.custom-multiselect-option input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--brand-primary, #3b82f6);
}

/* =========================================================================
   Active Navigation Enhancement & Hover Animations
   ========================================================================= */

/* 1. Sidebar Active/Hover Premium Enhancements */
.sidebar .nav-item {
    position: relative;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar .nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3.5px;
    background-color: var(--brand-primary);
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transform: scaleY(0.3);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar .nav-item:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-main);
    transform: translateX(4px);
}

.sidebar .nav-item:hover svg {
    transform: scale(1.1);
}

.sidebar .nav-item svg {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar .nav-item.active {
    background-color: var(--brand-bg-subtle) !important;
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px -2px rgba(var(--brand-primary-rgb), 0.12),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

.sidebar .nav-item.active::before {
    opacity: 1;
    transform: scaleY(1);
}

.sidebar .nav-item.active svg {
    color: var(--brand-primary) !important;
    opacity: 1 !important;
    transform: scale(1.05);
}

/* 2. Top Navbar Active/Hover Premium Enhancements */
.top-navbar .top-nav-link {
    border-bottom: 2.5px solid transparent;
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-navbar .top-nav-link:hover {
    color: var(--text-main);
    transform: translateY(-1px);
}

.top-navbar .top-nav-link svg {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-navbar .top-nav-link:hover svg {
    transform: scale(1.1);
}

.top-navbar .top-nav-link.active,
.top-navbar .top-nav-item.active > .top-nav-link {
    color: var(--brand-primary) !important;
    border-bottom: 2.5px solid var(--brand-primary) !important;
    font-weight: 600 !important;
    text-shadow: 0 0 1px rgba(var(--brand-primary-rgb), 0.3);
}

.top-navbar .top-nav-link.active svg,
.top-navbar .top-nav-item.active > .top-nav-link svg {
    color: var(--brand-primary) !important;
    opacity: 1 !important;
}

/* 3. Top Navbar Dropdown Menu Active/Hover Premium Enhancements */
.top-nav-dropdown-menu a {
    border-left: 3px solid transparent;
    transition: background-color 0.2s, color 0.2s, border-left-color 0.2s, transform 0.2s;
}

.top-nav-dropdown-menu a:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
    border-left-color: var(--border-strong);
    transform: translateX(4px);
}

.top-nav-dropdown-menu a.active {
    background-color: var(--brand-bg-subtle) !important;
    color: var(--brand-primary) !important;
    border-left-color: var(--brand-primary) !important;
    font-weight: 600 !important;
}

.top-nav-dropdown-menu a.active:hover {
    border-left-color: var(--brand-primary) !important;
}

/* Hide local views' breadcrumbs to avoid duplicates */
.breadcrumbs:not(.dynamic-breadcrumbs) {
    display: none !important;
}

/* 4. Layout & Responsive Synchronization Overrides */
@media (max-width: 768px) {
    /* Make sure mobile sidebar layout functions correctly in Top Nav mode */
    html[data-layout="top"] .sidebar {
        display: flex !important;
    }
}

/* 5. Collapsible Sidebar Layout styles */
.sidebar .brand,
.sidebar .brand-text,
.sidebar .nav-text,
.sidebar .nav-group-title,
.sidebar .active-session-text,
.sidebar .tenant-switcher svg,
.sidebar .sidebar-footer {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 769px) {
    html.sidebar-collapsed .sidebar {
        width: 64px !important;
    }

    html.sidebar-collapsed .sidebar .brand {
        display: none !important;
    }

    html.sidebar-collapsed .sidebar .sidebar-header {
        justify-content: center !important;
        padding: 0 !important;
    }

    html.sidebar-collapsed .sidebar .brand-text,
    html.sidebar-collapsed .sidebar .nav-text,
    html.sidebar-collapsed .sidebar .nav-group-title,
    html.sidebar-collapsed .sidebar .active-session-text,
    html.sidebar-collapsed .sidebar .tenant-switcher svg {
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    html.sidebar-collapsed .sidebar .sidebar-content {
        padding: 16px 4px;
    }

    html.sidebar-collapsed .sidebar .nav-group {
        margin-bottom: 12px;
        border-top: 1px solid var(--border-subtle);
        padding-top: 12px;
    }

    html.sidebar-collapsed .sidebar .nav-group:first-child {
        border-top: none;
        padding-top: 0;
    }

    html.sidebar-collapsed .sidebar .nav-item {
        justify-content: center;
        padding: 8px 0;
        margin: 2px 4px;
    }

    html.sidebar-collapsed .sidebar .nav-item:hover {
        transform: none !important;
    }

    html.sidebar-collapsed .sidebar .nav-item-content {
        justify-content: center;
        gap: 0;
        width: 100%;
    }

    html.sidebar-collapsed .sidebar .sidebar-footer {
        padding: 12px 4px;
    }

    html.sidebar-collapsed .sidebar .tenant-switcher {
        justify-content: center;
        padding: 8px 0;
    }

    html.sidebar-collapsed .sidebar .tenant-switcher div {
        gap: 0 !important;
    }
}

/* 5.1 Hamburger Menu Styling */
.hamburger-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.hamburger-menu:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-main);
}

/* 6. Global Status Dots */
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-dot.dot-active {
    background-color: var(--status-success);
}
.status-dot.dot-warning {
    background-color: var(--status-warning);
}
.status-dot.dot-error {
    background-color: var(--status-error);
}
.status-dot.dot-retired {
    background-color: var(--text-muted);
}

/* 7. Global Custom Tooltips */
.app-tooltip {
    position: absolute;
    z-index: 9999;
    padding: 5px 9px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-inverse) !important;
    background-color: var(--text-main) !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    max-width: 280px;
    text-align: center;
}

.app-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 8. Dashboard Improvements and Quick Actions Dropdown */
.quick-actions-container {
    position: relative;
}

.dashboard-layout-full {
    display: block;
    width: 100%;
}

.activity-scroll-container {
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}

.activity-scroll-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.activity-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
.activity-scroll-container::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}
.activity-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ==========================================================================
   Custom Multi-Select Dropdown Component
   ========================================================================== */
.multi-select-container {
    position: relative;
    width: 100%;
    font-family: inherit;
    box-sizing: border-box;
}

.multi-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    padding: 6px 12px;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    box-sizing: border-box;
}

.multi-select-trigger:hover {
    border-color: var(--border-strong);
    background-color: var(--bg-surface-hover);
}

.multi-select-container.open .multi-select-trigger {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-bg-subtle);
}

.multi-select-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    max-width: 90%;
}

.multi-select-placeholder {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
}

.multi-select-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background-color: var(--brand-bg-subtle, rgba(59, 130, 246, 0.08));
    color: var(--brand-primary);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
}

.multi-select-chip-close {
    cursor: pointer;
    font-weight: 700;
    color: var(--brand-primary);
    opacity: 0.6;
    transition: opacity 0.1s ease;
    font-size: 0.82rem;
    line-height: 1;
}

.multi-select-chip-close:hover {
    opacity: 1;
}

.multi-select-trigger .chevron {
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.multi-select-container.open .multi-select-trigger .chevron {
    transform: rotate(180deg);
    color: var(--brand-primary);
}

.multi-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background-color: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-theme="dark"] .multi-select-dropdown {
    background: rgba(24, 24, 27, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .multi-select-dropdown {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.08);
}

.multi-select-container.open .multi-select-dropdown {
    display: block;
}

.multi-select-search-wrapper {
    margin-bottom: 8px;
    position: relative;
}

.multi-select-search-input {
    width: 100%;
    height: 30px;
    padding: 4px 10px;
    border: 1.5px solid var(--border-subtle);
    border-radius: 6px;
    background-color: var(--bg-base);
    color: var(--text-main);
    font-size: 0.78rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease;
}

.multi-select-search-input:focus {
    border-color: var(--brand-primary);
}

.multi-select-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 6px;
}

.ms-action-btn {
    border: none;
    background: transparent;
    color: var(--brand-primary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    transition: opacity 0.15s ease;
}

.ms-action-btn:hover {
    text-decoration: underline;
}

.multi-select-options {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.multi-select-options::-webkit-scrollbar {
    width: 4px;
}
.multi-select-options::-webkit-scrollbar-track {
    background: transparent;
}
.multi-select-options::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 2px;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-main);
    user-select: none;
    transition: background-color 0.1s ease;
}

.multi-select-option:hover {
    background-color: var(--bg-surface-hover);
}

.multi-select-option input[type="checkbox"] {
    margin: 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* Premium DataTables Processing Loader */
.dataTables_wrapper {
    position: relative;
}

.dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 24px !important;
    background: rgba(var(--bg-surface-rgb), 0.7) !important;
    backdrop-filter: blur(10px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(190%) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-main) !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 1050 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    pointer-events: none;
    transition: all 0.2s ease;
}

/* Spinner icon design inside processing */
.dataTables_wrapper .dataTables_processing::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(var(--brand-primary-rgb), 0.2);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spinner-spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

/* ==========================================================================
   Premium Loader System
   ========================================================================== */
.page-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(9, 9, 11, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
html[data-theme="light"] .page-loader-overlay {
    background: rgba(248, 250, 252, 0.75);
}
html[data-theme="dark"] .page-loader-overlay {
    background: rgba(9, 9, 11, 0.75);
}
.page-loader-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
}
.modern-spinner {
    width: 48px;
    height: 48px;
    border: 3.5px solid var(--border-subtle);
    border-top: 3.5px solid var(--brand-primary);
    border-radius: 50%;
    animation: spinner-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Local Spinner/Loader overlays */
.container-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(24, 24, 27, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.container-loader-overlay.visible {
    opacity: 1;
}

/* Subtle top progress bar loader for Ajax */
.top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--brand-gradient);
    z-index: 100000;
    width: 0;
    transition: width 0.4s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.2s ease;
    box-shadow: 0 0 8px var(--brand-primary);
}

/* ==========================================================================
   Tooltips positioning overrides & slide/fade animations
   ========================================================================== */
.app-tooltip {
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.app-tooltip[data-position="bottom"] {
    transform: translateY(-6px);
}
.app-tooltip[data-position="top"] {
    transform: translateY(6px);
}
.app-tooltip[data-position="right"] {
    transform: translateX(-6px);
}
.app-tooltip.visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* ==========================================================================
   Toast Notifications System
   ========================================================================== */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 999999;
    max-width: 380px;
    width: 100%;
    pointer-events: none;
}
.app-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    color: var(--text-main);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}
.app-toast.show {
    transform: translateX(0);
    opacity: 1;
}
.app-toast.hide {
    transform: translateX(120%);
    opacity: 0;
}
.toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}
.app-toast.success .toast-icon {
    color: var(--status-success);
}
.app-toast.warning .toast-icon {
    color: var(--status-warning);
}
.app-toast.error .toast-icon {
    color: var(--status-error);
}
.app-toast.info .toast-icon {
    color: var(--status-info);
}
.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.toast-title {
    font-size: 0.85rem;
    font-weight: 600;
}
.toast-message {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.toast-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: var(--radius-sm);
    display: flex;
    transition: all 0.15s ease;
}
.toast-close:hover {
    color: var(--text-main);
    background: var(--bg-surface-hover);
}
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--brand-primary);
    width: 100%;
}
.app-toast.success .toast-progress { background: var(--status-success); }
.app-toast.warning .toast-progress { background: var(--status-warning); }
.app-toast.error .toast-progress { background: var(--status-error); }
.app-toast.info .toast-progress { background: var(--status-info); }

/* Standardized Pill Pagination UI */
.if-pill-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    gap: 16px 24px;
    flex-wrap: wrap;
    width: 100% !important;
    row-gap: 8px;
}
.if-pill-right-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-left: auto;
}
.if-pill-rows-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.if-pill-rows-select {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-main);
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 4px 8px;
    cursor: pointer;
    outline: none;
}
.if-pill-range-info {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.if-pill-bar {
    display: flex;
    align-items: center;
    gap: 4px;
}
.if-pill-btn {
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-main);
    transition: all 0.15s ease;
}
.if-pill-btn:hover:not(:disabled):not(.active) {
    background: var(--bg-surface-hover);
}
.if-pill-btn.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--text-inverse);
    font-weight: 600;
}
.if-pill-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.if-pill-dots {
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 0 2px;
    letter-spacing: 1px;
}
.if-pill-jump-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.if-pill-jump-input {
    width: 44px;
    font-size: 0.78rem;
    text-align: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 4px;
    outline: none;
    color: var(--text-main);
    background: var(--bg-base);
}
.if-table-footer-wrap {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    padding: 14px 16px;
    min-height: 52px;
    border-top: 1px solid var(--border-subtle);
    box-sizing: border-box;
    margin-top: auto;
}
.if-pill-pagination-mount {
    width: 100% !important;
}
.if-table-footer-wrap .footer-right {
    flex: 1;
    min-width: 0;
}

/* Premium standalone Sign Out Button styles */
.logout-btn {
    position: relative;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.logout-btn:hover {
    color: var(--status-error) !important;
    background-color: var(--status-error-bg) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
    transform: translateY(-1px) scale(1.05);
}

.logout-btn:active {
    transform: scale(0.95);
}

.logout-btn .logout-icon-svg {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Door opening / Arrow sliding exit animation */
.logout-btn .logout-door {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    transform-origin: center left;
}

.logout-btn .logout-arrow,
.logout-btn .logout-line {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    transform-origin: center;
}

.logout-btn:hover .logout-door {
    transform: scaleX(0.8) translateX(-1px);
    opacity: 0.85;
}

.logout-btn:hover .logout-arrow {
    transform: translateX(4px);
}

.logout-btn:hover .logout-line {
    transform: translateX(4px);
    opacity: 0.9;
}

/* ============================================================
   Premium Disabled Button Styles & Upload Constraints
   ============================================================ */
.btn-primary:disabled,
.btn-primary[disabled],
.wizard-btn-next:disabled,
.wizard-btn-next[disabled],
.wizard-btn-save:disabled,
.wizard-btn-save[disabled] {
    background: var(--bg-surface-hover) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-muted) !important;
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
}

.upload-preview-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.upload-info-bar {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* ──────────────────────────────────────────────────────────
   PREMIUM VIEW SWITCHER & PERSISTENCE STYLING
   ────────────────────────────────────────────────────────── */
.view-switcher-control {
    display: flex;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 2px;
    align-items: center;
    gap: 2px;
}
.view-switcher-control .view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: calc(var(--radius-md) - 2px);
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.view-switcher-control .view-toggle-btn:hover {
    color: var(--text-main);
    background: var(--bg-surface-hover);
}
.view-switcher-control .view-toggle-btn.active {
    background: var(--brand-primary);
    color: var(--text-inverse) !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ──────────────────────────────────────────────────────────
   REDESIGNED MODERN GRID CONTAINER & SAAS CARDS
   ────────────────────────────────────────────────────────── */
.grid-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    padding: 20px 0 !important;
    box-sizing: border-box !important;
}

.profile-card,
.role-card,
.app-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
    position: relative !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
    box-shadow: var(--shadow-sm) !important;
}

.profile-card:hover,
.role-card:hover,
.app-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.12), 0 4px 16px -5px rgba(0, 0, 0, 0.06) !important;
    border-color: var(--brand-primary) !important;
}

/* ──────────────────────────────────────────────────────────
   MODERN BOARD-STYLE KANBAN LAYOUT
   ────────────────────────────────────────────────────────── */
.kanban-board-container {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    overflow-x: auto;
    align-items: flex-start;
    min-height: 550px;
    box-sizing: border-box;
}

.kanban-column {
    flex: 1;
    min-width: 320px;
    max-width: 450px;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 750px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease;
}

.kanban-column.drag-over {
    border-color: var(--brand-primary);
    background: rgba(59, 130, 246, 0.04);
}

.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-subtle);
}

.kanban-column[data-status="active"] .kanban-column-header {
    border-bottom-color: var(--status-success);
}
.kanban-column[data-status="inactive"] .kanban-column-header,
.kanban-column[data-status="disabled"] .kanban-column-header {
    border-bottom-color: var(--border-strong);
}
.kanban-column[data-status="system"] .kanban-column-header {
    border-bottom-color: var(--brand-primary);
}
.kanban-column[data-status="custom"] .kanban-column-header {
    border-bottom-color: #f59e0b;
}

.kanban-column-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kanban-column-badge {
    background: var(--bg-surface-hover);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.kanban-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

.kanban-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: grab;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.kanban-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-primary);
}

.kanban-card:active {
    cursor: grabbing;
}

/* Perfect Data Table Alignments */
.data-table th, .data-table td {
    white-space: nowrap !important;
    vertical-align: middle !important;
}
.data-table th[style*="text-align: right"], 
.data-table td[style*="text-align: right"],
.data-table th[style*="right"],
.data-table td[style*="right"] {
    text-align: right !important;
}
.data-table th:last-child, 
.data-table td:last-child {
    text-align: right !important;
    padding-right: 16px !important;
}
.data-table .cell-flex {
    display: flex;
    align-items: center;
    gap: 12px;
}
.data-table .cell-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.data-table .cell-text h5 {
    margin: 0;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-main);
    line-height: 1.2;
}
.data-table .cell-text p {
    margin: 2px 0 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.2;
}

/* ========================================================================= */
/* Responsive Navigation Custom Overrides                                    */
/* ========================================================================= */

#mobile-menu-btn {
    display: none;
}

@media (max-width: 768px) {
    #mobile-menu-btn {
        display: flex !important;
    }

    .top-brand-logo {
        display: flex !important;
    }

    .sidebar {
        z-index: 2001 !important;
    }

    .sidebar-overlay {
        z-index: 2000 !important;
    }
}

/* ========================================================================= */
/* LIGHT THEME OVERRIDES — Dashboard & Management Pages                      */
/* ========================================================================= */

/* ── Dashboard: Workflow chip ─────────────────────────────────────────────── */
html[data-theme="light"] .workflow-chip {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.22);
    color: #4338ca; /* dark indigo — readable on white */
}

/* ── Dashboard: Activity table ───────────────────────────────────────────── */
html[data-theme="light"] .dashboard-time,
html[data-theme="light"] .dashboard-principal {
    color: var(--text-main);
}

/* ── Subscriptions page: icon utility classes ────────────────────────────── */
html[data-theme="light"] .icon-green  { background: rgba(5,  150, 105, 0.10); color: #047857; }
html[data-theme="light"] .icon-purple { background: rgba(109, 40, 217, 0.10); color: #6d28d9; }
html[data-theme="light"] .icon-blue   { background: rgba(37,  99, 235, 0.10); color: #1d4ed8; }
html[data-theme="light"] .icon-amber  { background: rgba(180, 83,   9, 0.10); color: #b45309; }

/* ── Email Templates page: card ──────────────────────────────────────────── */
html[data-theme="light"] .et-card {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}
html[data-theme="light"] .et-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
}

/* Icon variants – high-contrast for light backgrounds */
html[data-theme="light"] .et-card-icon.purple { background: rgba(109, 40, 217, 0.1);  color: #6d28d9; }
html[data-theme="light"] .et-card-icon.orange { background: rgba(180,  83,  9, 0.1);  color: #b45309; }
html[data-theme="light"] .et-card-icon.red    { background: rgba(185,  28, 28, 0.1);  color: #b91c1c; }
html[data-theme="light"] .et-card-icon.blue   { background: rgba(29,   78,216, 0.1);  color: #1d4ed8; }
html[data-theme="light"] .et-card-icon.green  { background: rgba(4,   120, 87, 0.1);  color: #047857; }

/* Status / type badges */
html[data-theme="light"] .et-badge-active   { background: rgba(4,  120,  87, 0.1);  color: #047857; }
html[data-theme="light"] .et-badge-inactive { background: rgba(185, 28,  28, 0.1);  color: #b91c1c; }
html[data-theme="light"] .et-badge-html     { background: rgba(29,  78, 216, 0.1);  color: #1d4ed8; }
html[data-theme="light"] .et-badge-plain    { background: rgba(75,  85, 104, 0.1);  color: #374151; }

/* Action buttons */
html[data-theme="light"] .et-action-btn        { color: var(--text-muted); }
html[data-theme="light"] .et-action-btn:hover  { background: rgba(0,0,0,0.05); color: var(--text-main); }
html[data-theme="light"] .et-action-btn.del:hover { background: rgba(185,28,28,0.08); color: #b91c1c; }

/* Add card */
html[data-theme="light"] .et-add-card {
    border-color: var(--border-strong);
}

/* ── Email Template form: token code pill ────────────────────────────────── */
html[data-theme="light"] .field-hint code {
    background: rgba(109, 40, 217, 0.08);
    color: #6d28d9;
}

/* ── RolePermissions page: permission badge icons ────────────────────────── */
html[data-theme="light"] .view-badge    { background: rgba(29,  78, 216, 0.10); color: #1d4ed8; box-shadow: inset 0 0 0 1px rgba(29, 78,216,0.18); }
html[data-theme="light"] .create-badge  { background: rgba(4,  120,  87, 0.10); color: #047857; box-shadow: inset 0 0 0 1px rgba(4,120, 87,0.18); }
html[data-theme="light"] .edit-badge    { background: rgba(180,  83,   9, 0.10); color: #b45309; box-shadow: inset 0 0 0 1px rgba(180,83,  9,0.18); }
html[data-theme="light"] .delete-badge  { background: rgba(185,  28,  28, 0.10); color: #b91c1c; box-shadow: inset 0 0 0 1px rgba(185,28, 28,0.18); }
html[data-theme="light"] .sync-badge    { background: rgba(109,  40, 217, 0.10); color: #6d28d9; box-shadow: inset 0 0 0 1px rgba(109,40,217,0.18); }
html[data-theme="light"] .general-badge { background: rgba(75,   85, 104, 0.10); color: #374151; box-shadow: inset 0 0 0 1px rgba(75, 85,104,0.18); }

/* Selected card badge boost */
html[data-theme="light"] .permission-card.selected .view-badge   { background: rgba(29,  78, 216, 0.15); color: #1d4ed8; }
html[data-theme="light"] .permission-card.selected .create-badge { background: rgba(4,  120,  87, 0.15); color: #047857; }
html[data-theme="light"] .permission-card.selected .edit-badge   { background: rgba(180,  83,   9, 0.15); color: #b45309; }
html[data-theme="light"] .permission-card.selected .delete-badge { background: rgba(185,  28,  28, 0.15); color: #b91c1c; }
html[data-theme="light"] .permission-card.selected .sync-badge   { background: rgba(109,  40, 217, 0.15); color: #6d28d9; }
html[data-theme="light"] .permission-card.selected .general-badge{ background: rgba(75,   85, 104, 0.15); color: #374151; }

/* ── Stat / tabler cards ─────────────────────────────────────────────────── */
html[data-theme="light"] .tabler-stat-value { color: var(--text-main); }
html[data-theme="light"] .tabler-stat-title { color: var(--text-muted); }
html[data-theme="light"] .tabler-stat-description { color: var(--text-muted); }

/* Stat boxes on dashboard */
html[data-theme="light"] .stat-value  { color: var(--text-main); }
html[data-theme="light"] .stat-trend  { color: var(--text-muted); }
html[data-theme="light"] .stat-trend.stat-trend-accent { color: var(--brand-primary); }

/* ── Profile page: security card icon ───────────────────────────────────── */
html[data-theme="light"] .security-card-icon[style*="#6366f1"] {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #4f46e5 !important;
}