/* CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Modern Color Palette */
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --secondary-color: #7c3aed;
    --accent-color: #06b6d4;
    /* Use status colors for consistency */
    --success-color: var(--status-online);
    --warning-color: var(--status-warning);
    --error-color: var(--status-critical);
    --info-color: #06b6d4;
    --loading-overlay-bg: rgba(255, 255, 255, 0.75);

    /* Modern Neutral Colors */
    --white: #ffffff;
    --gray-50: #e5e5e7;
    --gray-100: #f1f5f9;
    --gray-200: #d1d5db;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --sidebar-bg: #f5f5f7;

    /* Network Status Colors */
    --status-online: #16a34a;
    --status-warning: #facc15;
    --status-critical: #dc2626;
    --status-offline: #6b7280;
    --status-unknown: #8b5cf6;

    /* UNM Disconnect Reason Colors */
    --link-loss-color: #ea580c;      /* Orange for Link Loss */
    --dying-gasp-color: #3b82f6;     /* Blue for Dying Gasp (energy problem) */
    --unknown-reason-color: #8b5cf6; /* Purple for Unknown disconnect reasons */
    
    /* Modern Layout */
    --header-height: 60px;
    --footer-height: 48px;
    --sidebar-width: 360px;
    --sidebar-min-width: 280px;
    --sidebar-max-width: 520px;
    --sidebar-collapsed-width: 80px;
    --details-panel-width: 480px;
    --details-panel-min-width: 360px;
    --details-panel-max-width: 720px;
    --main-panel-min-width: 640px;
    --resizer-width: 4px;
    --content-max-width: 1400px;
    --sidebar-current-width: var(--sidebar-width);
    --tree-accent-width: 3px;
    --tree-indent-width: 32px;

    /* Component sizing tokens (light mode source of truth) */
    --pon-agg-card-padding: 10px 12px 4px 12px;
    --pon-agg-card-margin: 6px 0;
    --pon-agg-card-min-width: 220px;
    --pon-agg-card-width: auto;
    --pon-agg-card-max-width: min(320px, 100%);
    --pon-agg-card-gap: 2px;
    --pon-agg-label-font-size: 0.72rem;
    --pon-agg-label-font-weight: 600;
    --pon-agg-label-opacity: 0.9;
    --pon-agg-footer-font-size: 0.72rem;
    --chip-list-columns: repeat(auto-fit, minmax(92px, 1fr));
    --chip-list-single-columns: repeat(3, minmax(0, 1fr));
    --chip-list-gap: 6px 8px;
    --chip-list-margin: 4px 0;
    --chip-padding: 4px 8px;
    --chip-font-size: 0.66rem;
    --chip-min-height: 22px;
    --chip-gap: 4px;
    --tree-node-margin-bottom: var(--spacing-sm);
    --tree-node-content-padding: calc(var(--spacing-sm) + 0.25rem) calc(var(--spacing-lg) - 4px);
    --tree-node-content-margin-left: 6px;
    --tree-node-content-min-height: auto;
    --tree-node-container-padding: 0.6rem 1rem;
    --tree-node-container-min-height: 44px;
    --tree-node-toggle-size: 20px;
    --tree-node-toggle-margin-right: var(--spacing-sm);
    --tree-node-name-font-size: 0.875rem;
    --tree-node-details-font-size: 0.75rem;
    --cto-card-header-padding: 16px 18px;
    --cto-card-header-gap: 6px;
    --cto-card-header-min-height: 58px;
    --cto-name-font-size: 0.9rem;
    --client-count-font-size: 0.75rem;
    --cto-mode-toggle-padding: 10px 12px;
    --cto-mode-toggle-min-height: 52px;
    --cto-mode-toggle-gap: 3px;
    --cto-card-content-padding: 0px 12px 12px 12px;
    --cto-mode-toggle-margin: 0;
    --cto-mode-toggle-radius: 0;
    --cto-mode-toggle-wrap: wrap;
    --cto-mode-toggle-height: auto;
    --cto-mode-tab-padding: 4px 11px;
    --cto-mode-tab-font-size: 0.68rem;
    --details-action-size: 38px;
    --details-action-icon-size: 24px;
    --details-close-font-size: 1.2rem;
    --client-table-cell-padding: 6px 8px;
    --refresh-btn-size: 28px;
    --refresh-btn-icon-size: 22px;
    --topology-action-icon-size: 24px;
    --refresh-action-icon-size: 22px;
    --row-refresh-btn-size: 24px;
    --row-refresh-btn-icon-size: 18px;
    --power-actions-size: 32px;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    
    /* Modern Shadows - Enhanced for depth */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.14), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* Unified pane header + controls */
    --pane-header-height: 64px;
    --control-height: 38px;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Apple-style softer primary colors for dark mode */
    --primary-color: #0a84ff;
    --primary-dark: #0060df;
    --primary-light: #2997ff;
    --secondary-color: #5e5ce6;
    --accent-color: #64d2ff;

    /* Apple-inspired dark mode palette - layered backgrounds */
    --white: #2c2c2e;           /* Elevated surfaces (cards, panels) */
    --gray-50: #1c1c1e;         /* Base background */
    --gray-100: #2c2c2e;        /* Level 1 elevation (sidebar, header) */
    --gray-200: #3a3a3c;        /* Level 2 elevation (buttons, inputs) */
    --gray-300: #48484a;        /* Borders, separators */
    --gray-400: #636366;        /* Disabled elements */
    --gray-500: #8e8e93;        /* Tertiary text */
    --gray-600: #98989d;        /* Secondary text */
    --gray-700: #aeaeb2;        /* Secondary text lighter */
    --gray-800: #c7c7cc;        /* Primary text lighter */
    --gray-900: #e5e5e7;        /* Primary text */
    --sidebar-bg: #1c1c1e;

    /* Softer status colors for dark mode - reduced saturation */
    --status-online: #30d158;
    --status-warning: #ffd60a;
    --status-critical: #ff453a;
    --status-offline: #8e8e93;
    --status-unknown: #64d2ff;

    --dark-subtitle-color: #c7c7cc;
    --loading-overlay-bg: rgba(5, 10, 25, 0.78);

    /* Softer shadows for dark mode */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--gray-50);
    color: var(--gray-900);
    line-height: 1.6;
}

:root[data-theme="dark"] body {
    background-color: var(--gray-50);
    color: var(--gray-900);
}