/* ==============================================================================
   THEME: PEYCELL NMS - UNIVERSAL DESIGN TOKENS (EDITORIAL SYSTEM)
   Author: PEYCELL GROUP (https://peycell.com)
   Contact / WhatsApp: 089655573564
   Copyright (c) 2026 PEYCELL GROUP (peycell.com). All rights reserved.
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --font-main: 'Plus Jakarta Sans', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'Consolas', 'Courier New', monospace;
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 9999px;
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   1. COLOR SCHEMES (Dual Theme: Warm Ivory & Midnight Slate)
   ========================================================================== */

/* LIGHT MODE: Cool Modern Soft Slate & Crisp Elevated Cards */
:root,
[data-theme="light"] {
    --bg-primary: #f1f5f9;
    --bg-body: #f1f5f9;
    --bg-card: #ffffff;
    --bg-card-subtle: #f8fafc;
    --bg-surface-elevated: #ffffff;
    --bg-hover: #e2e8f0;
    --bg-sidebar: #ffffff;
    
    --border: #e2e8f0;
    --border-subtle: #edf2f7;
    --border-focus: var(--accent);
    
    --text-primary: #0f172a;
    --text-main: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    
    --table-head-bg: #f8fafc;
    --table-head-text: #334155;
    --table-row-hover: #f1f5f9;
    --table-border: #e2e8f0;
    
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-focus-border: var(--accent);
    
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 4px 16px -2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
    
    --overlay-bg: rgba(15, 23, 42, 0.5);
    --modal-bg: #ffffff;
    --donut-track: #e2e8f0;
    
    /* Semantic Status Colors */
    --success: #10b981;
    --success-subtle: rgba(16, 185, 129, 0.12);
    --success-text: #059669;
    
    --warning: #f59e0b;
    --warning-subtle: rgba(245, 158, 11, 0.12);
    --warning-text: #b45309;
    
    --danger: #ef4444;
    --danger-subtle: rgba(239, 68, 68, 0.12);
    --danger-text: #dc2626;
    
    --info: #3b82f6;
    --info-subtle: rgba(59, 130, 246, 0.12);
    --info-text: #1d4ed8;
}

/* DARK MODE: Midnight Slate & Deep Slate Cards */
[data-theme="dark"] {
    --bg-primary: #0b0f19;
    --bg-body: #0b0f19;
    --bg-card: #131a2a;
    --bg-card-subtle: #1a2337;
    --bg-surface-elevated: #1a243a;
    --bg-hover: #1e2a44;
    
    --border: #232f48;
    --border-subtle: #1c273c;
    --border-focus: #38bdf8;
    
    --text-primary: #f8fafc;
    --text-main: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #0b0f19;
    
    --table-head-bg: #0e1524;
    --table-row-hover: #172238;
    --table-border: #1f2b42;
    
    --input-bg: #0e1524;
    --input-border: #28354f;
    --input-focus-border: var(--accent);
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-card: 0 2px 8px -2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.07);
    --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.09);
    
    --overlay-bg: rgba(0, 0, 0, 0.75);
    --modal-bg: #131a2a;
    --donut-track: var(--border);
    --bg-sidebar: #0e1422;
    
    /* Semantic Status Colors */
    --success: #34d399;
    --success-subtle: rgba(52, 211, 153, 0.15);
    --success-text: #34d399;
    
    --warning: var(--accent);
    --warning-subtle: rgba(251, 191, 36, 0.15);
    --warning-text: var(--accent);
    
    --danger: #f87171;
    --danger-subtle: rgba(248, 113, 113, 0.15);
    --danger-text: #f87171;
    
    --info: #60a5fa;
    --info-subtle: rgba(96, 165, 250, 0.15);
    --info-text: #60a5fa;
}

/* ==========================================================================
   2. DYNAMIC ACCENT COLORS (Reactive across ALL pages)
   ========================================================================== */

/* 1. Amber (Default Warm Craft) */
:root,
[data-accent="amber"],
[data-theme="light"][data-accent="amber"],
[data-theme="light"] [data-accent="amber"] {
    --accent: #b45309;
    --accent-hover: #92400e;
    --accent-subtle: rgba(180, 83, 9, 0.12);
    --accent-contrast: #ffffff;
    --accent-glow: rgba(180, 83, 9, 0.25);
}
[data-theme="dark"],
[data-theme="dark"][data-accent="amber"],
[data-theme="dark"] [data-accent="amber"] {
    --accent: #f59e0b;
    --accent-hover: #d97706;
    --accent-subtle: rgba(245, 158, 11, 0.15);
    --accent-contrast: #0b0f19;
    --accent-glow: rgba(245, 158, 11, 0.3);
}

/* 2. Sapphire (Royal Blue / Fintech Blue) */
[data-accent="sapphire"],
[data-theme="light"][data-accent="sapphire"],
[data-theme="light"] [data-accent="sapphire"] {
    --accent: #1d4ed8;
    --accent-hover: #1e40af;
    --accent-subtle: rgba(29, 78, 216, 0.12);
    --accent-contrast: #ffffff;
    --accent-glow: rgba(29, 78, 216, 0.25);
}
[data-theme="dark"][data-accent="sapphire"],
[data-theme="dark"] [data-accent="sapphire"] {
    --accent: #38bdf8;
    --accent-hover: #0284c7;
    --accent-subtle: rgba(56, 189, 248, 0.15);
    --accent-contrast: #0b0f19;
    --accent-glow: rgba(56, 189, 248, 0.3);
}

/* 3. Forest Emerald */
[data-accent="emerald"],
[data-theme="light"][data-accent="emerald"],
[data-theme="light"] [data-accent="emerald"] {
    --accent: #047857;
    --accent-hover: #065f46;
    --accent-subtle: rgba(4, 120, 87, 0.12);
    --accent-contrast: #ffffff;
    --accent-glow: rgba(4, 120, 87, 0.25);
}
[data-theme="dark"][data-accent="emerald"],
[data-theme="dark"] [data-accent="emerald"] {
    --accent: #10b981;
    --accent-hover: #059669;
    --accent-subtle: rgba(16, 185, 129, 0.15);
    --accent-contrast: #0b0f19;
    --accent-glow: rgba(16, 185, 129, 0.3);
}

/* 4. Deep Crimson */
[data-accent="crimson"],
[data-theme="light"][data-accent="crimson"],
[data-theme="light"] [data-accent="crimson"] {
    --accent: #b91c1c;
    --accent-hover: #991b1b;
    --accent-subtle: rgba(185, 28, 28, 0.12);
    --accent-contrast: #ffffff;
    --accent-glow: rgba(185, 28, 28, 0.25);
}
[data-theme="dark"][data-accent="crimson"],
[data-theme="dark"] [data-accent="crimson"] {
    --accent: #ef4444;
    --accent-hover: #dc2626;
    --accent-subtle: rgba(239, 68, 68, 0.15);
    --accent-contrast: #ffffff;
    --accent-glow: rgba(239, 68, 68, 0.3);
}

/* 5. Monochrome (Linear / Apple Minimalist) */
[data-accent="monochrome"],
[data-theme="light"][data-accent="monochrome"],
[data-theme="light"] [data-accent="monochrome"] {
    --accent: #0f172a;
    --accent-text: #0f172a;
    --accent-hover: #334155;
    --accent-subtle: rgba(15, 23, 42, 0.08);
    --accent-contrast: #ffffff;
    --accent-glow: rgba(15, 23, 42, 0.15);
}
[data-theme="dark"][data-accent="monochrome"],
[data-theme="dark"] [data-accent="monochrome"] {
    --accent: #f8fafc;
    --accent-text: #f8fafc;
    --accent-hover: #e2e8f0;
    --accent-subtle: rgba(248, 250, 252, 0.15);
    --accent-contrast: #0b0f19;
    --accent-glow: rgba(248, 250, 252, 0.2);
}

/* 6. White / Pure Minimalist */
[data-accent="white"],
[data-theme="light"][data-accent="white"],
[data-theme="light"] [data-accent="white"],
[data-theme="dark"][data-accent="white"],
[data-theme="dark"] [data-accent="white"] {
    --accent: #ffffff;
    --accent-text: #0f172a;
    --accent-hover: #f1f5f9;
    --accent-subtle: var(--accent-subtle);
    --accent-contrast: #0f172a;
    --accent-glow: rgba(255, 255, 255, 0.25);
}
[data-theme="dark"][data-accent="white"] {
    --accent-text: #ffffff;
}

/* 7. Custom HEX */
[data-accent="custom"] {
    --accent-hover: var(--accent);
    --accent-subtle: rgba(128, 128, 128, 0.15);
    --accent-contrast: var(--accent-contrast, #ffffff);
    --accent-text: var(--accent-text, var(--accent));
    --accent-glow: rgba(128, 128, 128, 0.25);
}

/* ==========================================================================
   3. BASE STYLES & RESET (Anti-Slop Standard)
   ========================================================================== */

body, input, button, select, textarea, table, th, td {
    font-family: var(--font-main) !important;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-base), color var(--transition-base);
}

code, pre, kbd, samp, .font-mono {
    font-family: var(--font-mono) !important;
}

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

/* ==========================================================================
   4. REUSABLE UI COMPONENTS
   ========================================================================== */

/* Universal Cards */
.stat-card,
.stat-card-premium,
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    color: var(--text-primary);
    padding: 22px;
    margin-bottom: 24px;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
    position: relative;
}

[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .stat-card-premium {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

.stat-card:hover,
.card:hover {
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-md);
}

/* Modern Card Header & Title */
.card-header,
.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.card-title {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.card-title h3,
.card-title h4,
.stat-card-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Modern Status Pills & Badges */
.badge-pill,
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-online,
.status-online {
    background-color: var(--success-subtle);
    color: var(--success-text);
    border: 1px solid transparent;
}

.badge-isolir,
.status-isolir {
    background-color: var(--warning-subtle);
    color: var(--warning-text);
    border: 1px solid transparent;
}

.badge-offline,
.status-offline {
    background-color: var(--danger-subtle);
    color: var(--danger-text);
    border: 1px solid transparent;
}

.badge-accent,
.status-accent {
    background-color: var(--accent-subtle);
    color: var(--accent);
    border: 1px solid transparent;
}

/* Universal Glassmorphism Stat Badges */
.stat-badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}

.stat-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm) !important;
    height: 34px !important;
    box-sizing: border-box !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
}

.stat-badge:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border-color: var(--border-subtle) !important;
}

.stat-badge i {
    font-size: 11px !important;
}

.stat-badge strong,
.stat-badge b {
    font-family: var(--font-main) !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    margin-left: 2px !important;
}

.stat-badge.total {
    border-color: var(--border) !important;
}
.stat-badge.total i {
    color: var(--text-muted) !important;
}

.stat-badge.online,
.stat-badge.green {
    border-color: rgba(16, 185, 129, 0.25) !important;
}
.stat-badge.online:hover,
.stat-badge.green:hover {
    border-color: rgba(16, 185, 129, 0.6) !important;
}
.stat-badge.online i,
.stat-badge.green i {
    color: #10b981 !important;
}
[data-theme="light"] .stat-badge.online i,
[data-theme="light"] .stat-badge.green i {
    color: #059669 !important;
}

.stat-badge.offline,
.stat-badge.red {
    border-color: rgba(239, 68, 68, 0.25) !important;
}
.stat-badge.offline:hover,
.stat-badge.red:hover {
    border-color: rgba(239, 68, 68, 0.6) !important;
}
.stat-badge.offline i,
.stat-badge.red i {
    color: #ef4444 !important;
}

.stat-badge.isolir,
.stat-badge.purple {
    border-color: rgba(168, 85, 247, 0.25) !important;
}
.stat-badge.isolir:hover,
.stat-badge.purple:hover {
    border-color: rgba(168, 85, 247, 0.6) !important;
}
.stat-badge.isolir i,
.stat-badge.purple i {
    color: #a855f7 !important;
}

.stat-badge.accent,
.stat-badge.gold {
    border-color: var(--accent-subtle) !important;
}
.stat-badge.accent:hover,
.stat-badge.gold:hover {
    border-color: var(--accent) !important;
}
.stat-badge.accent i,
.stat-badge.gold i {
    color: var(--accent) !important;
}

/* Modern Live Dot Indicator */
.dot-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.dot-online {
    background-color: var(--success);
    box-shadow: 0 0 0 2px var(--success-subtle);
    animation: pulse-dot 2s infinite ease-in-out;
}

.dot-isolir {
    background-color: var(--warning);
    box-shadow: 0 0 0 2px var(--warning-subtle);
}

.dot-offline {
    background-color: var(--danger);
    box-shadow: 0 0 0 2px var(--danger-subtle);
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.75; }
}

/* ==========================================================================
   4b. UNIVERSAL TAB NAVIGATION
   ========================================================================== */
.tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-card-subtle);
    border: 1px solid var(--border);
    padding: 4px;
    border-radius: var(--radius-md);
    margin-bottom: 22px;
    flex-wrap: wrap;
    align-items: center;
}

.tab {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    background: transparent;
    min-width: unset;
    flex: unset;
}

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

.tab.active {
    color: var(--accent-contrast) !important;
    background: var(--accent) !important;
    box-shadow: 0 2px 8px var(--accent-glow);
    border-color: var(--accent) !important;
    font-weight: 700;
}

.tab.active * {
    color: inherit !important;
}

/* ==========================================================================
   4c. UNIVERSAL TABLES (Clean Grid)
   ========================================================================== */
.table-wrap,
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text-primary);
    text-align: left;
}

.table th {
    background-color: var(--table-head-bg);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    vertical-align: middle;
}

.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--table-border);
    color: var(--text-primary);
    vertical-align: middle;
    transition: background-color var(--transition-fast);
}

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

.table tbody tr {
    transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
    background-color: var(--table-row-hover);
}

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

/* ==========================================================================
   4d. UNIVERSAL BUTTONS (Single Source of Truth)
   ========================================================================== */

/* Base Button Reset */
.btn {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 12px;
    font-family: var(--font-main);
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    line-height: 1.4;
    user-select: none;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Primary / Accent Button */
.btn-accent,
.btn-primary {
    background-color: var(--accent) !important;
    color: var(--accent-contrast) !important;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.08);
    font-weight: 700;
    font-family: var(--font-main);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-accent:hover,
.btn-primary:hover {
    background-color: var(--accent-hover) !important;
    color: var(--accent-contrast) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 14px var(--accent-glow);
}

.btn i,
.btn-sm i,
.btn-primary i,
.btn-accent i,
.btn-secondary i,
.btn-danger i,
.tab i {
    color: inherit !important;
}

/* Secondary / Ghost Button */
.btn-secondary {
    background-color: var(--bg-card-subtle);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

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

/* Danger / Destructive Button */
.btn-danger {
    background-color: var(--danger-subtle);
    color: var(--danger-text);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

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

/* Small Button */
.btn-sm {
    padding: 6px 13px;
    font-size: 11px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-card-subtle);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.btn-sm:hover {
    background: var(--accent-subtle);
    border-color: var(--accent-glow);
    color: var(--accent);
}

.btn-sm.btn-primary,
.btn-sm.btn-accent {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    font-weight: 700;
}

.btn-sm.btn-primary:hover,
.btn-sm.btn-accent:hover {
    background: var(--accent-hover) !important;
    color: var(--accent-contrast) !important;
}

.btn-sm.btn-secondary {
    background: var(--bg-card-subtle) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
}

.btn-sm.btn-secondary:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

.btn-sm.btn-danger {
    background: var(--danger-subtle) !important;
    color: var(--danger-text) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.btn-sm.btn-danger:hover {
    background: rgba(239, 68, 68, 0.22) !important;
    color: var(--danger) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

/* Extra-Small Icon Button */
.btn-xs {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 0;
    font-size: 12px;
}

.btn-xs:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.btn-xs.btn-danger {
    color: var(--danger-text);
}

.btn-xs.btn-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--danger);
}

/* Done / Completed State Button */
.btn-done {
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 8px 14px;
    font-size: 11px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Pagination Button */
.btn-page {
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-page:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-page.active {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* Icon Button (table action icons) */
.btn-icon {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    font-size: 12px;
}

.btn-icon:hover {
    background: var(--bg-card-subtle);
    color: var(--accent);
    border-color: var(--accent-subtle);
}

.btn-icon:hover i.fa-user-times {
    color: var(--danger);
}

.btn-icon:hover i.fa-edit {
    color: var(--accent);
}

/* ==========================================================================
   4e. UNIVERSAL FORMS & INPUTS
   ========================================================================== */

/* Form Layout */
.form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.form-group {
    flex: 1;
    min-width: 220px;
}

.form-group label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
    color: var(--text-secondary);
}

/* Standard Inputs */
.input,
.select,
.textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus,
.select:focus,
.textarea:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
    background-color: var(--bg-card);
}

/* Tiny Inputs (prices, numeric) */
.input-xs {
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--accent);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    width: 110px;
    text-align: right;
    outline: none;
    font-weight: 700;
    font-family: var(--font-main);
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
}

.input-xs:focus {
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-subtle);
    background: var(--bg-card);
}

/* Custom Select Arrow */
select.input {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
}

textarea.input {
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

/* ==========================================================================
   4f. UNIVERSAL SWITCH TOGGLE
   ========================================================================== */
.switch-xs {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    vertical-align: middle;
}

.switch-xs input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-xs {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-hover);
    border: 1px solid var(--border);
    transition: .3s;
    border-radius: 18px;
}

.slider-xs:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    transition: .3s;
    border-radius: 50%;
}

.switch-xs input:checked + .slider-xs {
    background-color: var(--accent-subtle);
    border-color: var(--accent);
}

.switch-xs input:checked + .slider-xs:before {
    transform: translateX(14px);
    background-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

/* Universal Typography Utility */
.text-xs {
    font-size: 11px !important;
    line-height: 1.4 !important;
}

/* Universal Standard Toggle Switch (36x20px) */
.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    vertical-align: middle;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-hover);
    border: 1px solid var(--border);
    transition: var(--transition-fast);
    border-radius: 20px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    transition: var(--transition-fast);
    border-radius: 50%;
}
.switch input:checked + .slider {
    background-color: var(--accent-subtle);
    border-color: var(--accent);
}
.switch input:checked + .slider:before {
    transform: translateX(16px);
    background-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

/* Universal Action Buttons Inside Tables */
.btn-edit-outline {
    background: var(--bg-card-subtle) !important;
    border: 1px solid var(--border) !important;
    color: var(--accent) !important;
    padding: 5px 12px !important;
    border-radius: var(--radius-sm, 6px) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}
.btn-edit-outline:hover {
    background: var(--accent-subtle) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
.btn-kick-outline {
    background: var(--danger-subtle) !important;
    border: 1px solid var(--danger-border) !important;
    color: var(--danger) !important;
    padding: 5px 12px !important;
    border-radius: var(--radius-sm, 6px) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}
.btn-kick-outline:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}

/* Universal Table Tools & Appends */
.btn-tool {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0 12px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.btn-tool:hover {
    color: var(--accent);
    background: var(--accent-subtle);
}
.btn-check {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
}

/* Universal Status Badges */
.badge-map {
    background: var(--success-subtle) !important;
    color: var(--success) !important;
    border: 1px solid var(--success-border) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
}
.badge-nomap {
    background: var(--bg-card-subtle) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
}
.badge-paid {
    background: var(--success-subtle) !important;
    color: var(--success) !important;
    border: 1px solid var(--success-border) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
}
.badge-expired {
    background: var(--danger-subtle) !important;
    color: var(--danger) !important;
    border: 1px solid var(--danger-border) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
}
.badge-custom.green {
    background: var(--success-subtle) !important;
    color: var(--success) !important;
    border: 1px solid var(--success-border) !important;
}
.badge-custom.gray {
    background: var(--bg-card-subtle) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
}


/* KPI Metric Chip */
.kpi-chip {
    background-color: var(--bg-card-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.kpi-chip-val {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
}

.kpi-chip-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ==========================================================================
   5. UNIVERSAL MODALS & DIALOGS (Zero Hardcoded Black in Light Mode)
   ========================================================================== */
.modal,
.modal-nms {
    background: var(--overlay-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.modal-box,
.modal-content,
.modal-content-nms,
#editModal,
#logModal,
#hotspotActiveModal {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

.modal-head,
.m-head {
    background-color: var(--bg-card-subtle) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

.modal-head b,
.modal-head h2,
.modal-head h3,
.modal-head h4,
.modal-title,
#modalTitle {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

.modal-close {
    color: var(--text-muted) !important;
}

.modal-close:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-hover) !important;
}

.modal-body,
.m-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.modal-tabs {
    display: flex;
    background: var(--bg-card-subtle) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    padding: 3px !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
}

.modal-tab {
    flex: 1 !important;
    text-align: center !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    border-radius: var(--radius-sm) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.modal-tab:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

.modal-tab.active {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}

.modal-box .form-group label,
.modal-content .form-group label,
.modal-content-nms .form-group label,
.modal label,
#editModal label,
#editModal .input-group label {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

.modal-box input,
.modal-box select,
.modal-box textarea,
.modal-content input,
.modal-content select,
.modal-content textarea,
.modal-content-nms input,
.modal-content-nms select,
.modal-content-nms textarea {
    background-color: var(--bg-card-subtle) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
}

.modal-box input:focus,
.modal-box select:focus,
.modal-content input:focus,
.modal-content select:focus,
.modal-content-nms input:focus,
.modal-content-nms select:focus {
    border-color: var(--accent) !important;
    background-color: var(--bg-card) !important;
    box-shadow: 0 0 0 3px var(--accent-subtle) !important;
}

.modal-box input[readonly],
.modal-content input[readonly],
.modal-content-nms input[readonly] {
    background-color: var(--bg-hover) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
    opacity: 0.9 !important;
}

.modal-box .hint,
.modal-content .hint,
.modal-content-nms .hint {
    background-color: var(--bg-card-subtle) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

.pay-history-item {
    color: var(--text-secondary) !important;
}
.pay-history-item strong {
    color: var(--text-primary) !important;
}

/* Universal High-Contrast Login Modal */
.login-box {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

.login-box h2, .login-title {
    color: var(--text-primary) !important;
}

.login-box input {
    background: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-main) !important;
    font-size: 13.5px !important;
}

.login-box input::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

.login-box input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-subtle) !important;
}

.login-pass-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

.login-pass-wrapper input {
    padding-right: 42px !important;
    margin-bottom: 0 !important;
}

.btn-toggle-pass {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 10;
    outline: none;
    transition: color 0.2s ease;
}

.btn-toggle-pass:hover,
.btn-toggle-pass:focus {
    color: var(--text-primary) !important;
}

#loginNoteMsg {
    color: var(--text-secondary) !important;
    background: var(--bg-card-subtle) !important;
    border: 1px dashed var(--border) !important;
    font-family: var(--font-main) !important;
}

#loginNoteMsg b {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

#loginMsg {
    color: var(--danger-text, #dc2626) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

[data-theme="dark"] #loginMsg {
    color: var(--danger-text, #f87171) !important;
}

/* ==========================================================================
   UNIVERSAL MOBILE RESPONSIVE ENHANCEMENTS (Anti-Clutter & Anti-Overflow)
   ========================================================================== */
@media (max-width: 768px) {
    /* Adaptive Wrapped Compact Tabs on Mobile (Backup-aligned 3-col Grid) */
    .tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 6px !important;
        padding-bottom: 0 !important;
        margin-bottom: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .tabs::-webkit-scrollbar {
        display: none !important;
    }
    .tab {
        flex: 1 1 calc(33.33% - 6px) !important;
        min-width: 70px !important;
        white-space: nowrap !important;
        padding: 7px 4px !important;
        font-size: 10.5px !important;
        text-align: center !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
        border-radius: var(--radius-sm, 6px) !important;
        box-sizing: border-box !important;
    }

    /* Modal clearance on mobile (ensures footer never obscures inputs) */
    .modal-box, .modal-content, .modal-content-nms {
        max-height: 90vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .modal-body, .m-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        padding-bottom: 30px !important;
    }
    .modal-foot, .m-foot {
        flex-shrink: 0 !important;
    }

    /* Card padding compression */
    .card, .stat-card {
        padding: 16px 14px !important;
    }

    /* Ultra-Compact Stat Badges & Metric Pills on Mobile */
    .stat-badge-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
    }

    .stat-badge {
        padding: 4px 8px !important;
        height: 28px !important;
        font-size: 10px !important;
        gap: 4px !important;
    }

    .stat-badge i {
        font-size: 10px !important;
    }

    .stat-badge strong,
    .stat-badge b {
        font-size: 11px !important;
    }
}

/* ==========================================================================
   SIDEBAR USER CONTEXT SUBTEXT (Role & Username)
   ========================================================================== */
.brand-title-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 8px !important;
    overflow: hidden !important;
}

.brand-title-col .brand-text {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: var(--accent) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0.3px !important;
    margin: 0 !important;
}

.sidebar-user-subtext {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0.1px !important;
    opacity: 0.85 !important;
    max-width: 100% !important;
    display: block !important;
}

/* TOTAL SUPPRESSION IN MINIMIZED SIDEBAR */
body.sidebar-minimized .brand-title-col,
body.sidebar-minimized .sidebar-user-subtext,
body.sidebar-minimized #sidebarUserSubtext,
body.sidebar-minimized .brand-wrapper .brand-title-col,
body.sidebar-minimized .brand-wrapper .sidebar-user-subtext,
body.sidebar-minimized .brand-wrapper #sidebarUserSubtext,
body.sidebar-minimized .brand-wrapper > div:not(.btn-sidebar-toggle) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* MOBILE COMPACT AND ANTI-LEAK RULES */
@media (max-width: 768px) {
    .brand-title-col {
        margin-left: 8px !important;
        max-width: calc(100% - 48px) !important;
        overflow: hidden !important;
    }
    .brand-title-col .brand-text {
        font-size: 13.5px !important;
        color: var(--accent) !important;
    }
    .sidebar-user-subtext,
    #sidebarUserSubtext {
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        margin-top: 1px !important;
        color: var(--text-muted) !important;
        opacity: 0.8 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    .sidebar:not(.active) .brand-title-col,
    .sidebar:not(.active) .sidebar-user-subtext,
    .sidebar:not(.active) #sidebarUserSubtext {
        display: none !important;
    }
}

/* ==============================================================================
   UNIVERSAL TOP-RIGHT PREMIUM SAAS TOAST NOTIFICATIONS (ALL PAGES)
   ============================================================================== */
#toast-container,
.toast-container,
.nms-toast-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    pointer-events: none !important;
    max-width: calc(100vw - 40px) !important;
}

.toast-msg,
.nms-toast {
    min-width: 260px !important;
    max-width: 380px !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    padding: 12px 18px !important;
    border-radius: var(--radius-md, 12px) !important;
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.35)) !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--accent) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    pointer-events: auto !important;
    animation: nms-toast-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    font-family: var(--font-main) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

@media (max-width: 768px) {
    #toast-container,
    .toast-container,
    .nms-toast-container {
        top: 15px !important;
        right: 15px !important;
        bottom: auto !important;
        left: auto !important;
        max-width: calc(100vw - 30px) !important;
    }
    .toast-msg,
    .nms-toast {
        min-width: 240px !important;
        max-width: calc(100vw - 30px) !important;
        padding: 10px 14px !important;
        font-size: 11.5px !important;
    }
}

.toast-msg i, .nms-toast i { color: var(--accent) !important; font-size: 16px !important; flex-shrink: 0 !important; }
.toast-msg.success, .nms-toast.success { border-left-color: var(--accent) !important; }
.toast-msg.success i, .nms-toast.success i { color: var(--accent) !important; }
.toast-msg.error, .nms-toast.error { border-left-color: var(--danger, #ef4444) !important; }
.toast-msg.error i, .nms-toast.error i { color: var(--danger, #ef4444) !important; }
.toast-msg.warning, .nms-toast.warning { border-left-color: var(--warning, #f59e0b) !important; }
.toast-msg.warning i, .nms-toast.warning i { color: var(--warning, #f59e0b) !important; }
.toast-msg.info, .nms-toast.info { border-left-color: var(--info, #3b82f6) !important; }
.toast-msg.info i, .nms-toast.info i { color: var(--info, #3b82f6) !important; }

@keyframes nms-toast-slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.toast-fade-out {
    opacity: 0 !important;
    transform: translateY(-15px) scale(0.95) !important;
    transition: all 0.35s ease !important;
}

/* ==========================================================================
   MODERN UNIVERSAL LOGOUT CONFIRMATION MODAL
   ========================================================================== */
.nms-logout-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.nms-logout-modal-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.nms-logout-modal-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    padding: 28px 24px 24px !important;
    max-width: 390px !important;
    width: 100% !important;
    text-align: center !important;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-subtle) !important;
    transform: scale(0.92) translateY(10px) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.nms-logout-modal-overlay.show .nms-logout-modal-card {
    transform: scale(1) translateY(0) !important;
}

.nms-logout-icon-wrap {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 18px !important;
    color: #ef4444 !important;
    font-size: 26px !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.15) !important;
}

.nms-logout-title {
    font-family: var(--font-main) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}

.nms-logout-desc {
    font-family: var(--font-main) !important;
    font-size: 13.5px !important;
    color: var(--text-muted) !important;
    line-height: 1.55 !important;
    margin: 0 0 24px !important;
}

.nms-logout-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
}

.nms-logout-btn-cancel {
    flex: 1 !important;
    padding: 11px 18px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card-subtle) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-main) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important;
}

.nms-logout-btn-cancel:hover {
    background: var(--input-bg) !important;
    border-color: var(--accent) !important;
}

.nms-logout-btn-confirm {
    flex: 1 !important;
    padding: 11px 18px !important;
    border-radius: 10px !important;
    border: none !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    font-family: var(--font-main) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35) !important;
    transition: opacity 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.nms-logout-btn-confirm:hover {
    opacity: 0.92 !important;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.45) !important;
}

.nms-logout-btn-cancel:active,
.nms-logout-btn-confirm:active {
    transform: scale(0.98) !important;
}