/* 
 * All.com (Internal Portal) - CSS Variables & Theme
 * This file contains CSS custom properties (variables) for the internal portal
 */


:root.internal, body.internal{
    /* Color Variables */
    --net-color-primary: #3498db;
    --net-color-primary-hover: #2980b9;
    --net-color-secondary: #95a5a6;
    --net-color-secondary-hover: #7f8c8d;
    --net-color-success: #27ae60;
    --net-color-warning: #f39c12;
    --net-color-warning-hover: #e7893c;
    --net-color-danger: #e74c3c;
    --net-color-danger-hover: #c82333;
    --net-color-required: #dc3545;
    --net-color-info: #17a2b8;

    /* Subscription tier colors (canonical source: Ravenbreath.chat/ui.icons.css) */
    --net-color-free:     #9d9d9d;
    --net-color-basic:    #1eff00;
    --net-color-standard: #0070dd;
    --net-color-premium:  #a335ee;
    --net-color-ultimate: #ff8000;


    --net-color-ai-text: #484326;
    --net-color-ai-background: #f1e7a1;

    /* Spacing */
    --net-spacing-xs: 0.25rem;
    --net-spacing-sm: 0.5rem;
    --net-spacing-md: 0.75rem;
    --net-spacing-lg: 1.0rem;
    --net-spacing-xl: 1.5rem;
    
    /* Typography */
    --net-font-family-base: Arial, sans-serif;
    --net-font-size-xs: 0.7em;
    --net-font-size-sm: 0.8em;
    --net-font-size-base: 1em;
    --net-font-size-lg: 1.1em;
    --net-font-size-xl: 1.25rem;
    --net-font-size-xxl: 1.5rem;
    
    /* Border Radius */
    --net-border-radius-sm: 0.125rem;
    --net-border-radius-base: 0.25rem;
    --net-border-radius-md: 0.5rem;
    --net-border-radius-lg: 0.75rem;
    --net-border-radius-xl: 1rem;

   
    /* Transitions */
    --net-transition-fast: 0.2s ease;
    --net-transition-base: 0.3s ease;
    --net-transition-slow: 0.4s ease;
    
    /* Sidebar Dimensions */
    --net-sidebar-width: 16rem;
    --net-sidebar-max-width: 16rem;
    
    
   --net-bg-card:#1c1c1e;

   
    /* Transitions */
    --net-transition-fast: 0.2s ease;
    --net-transition-base: 0.3s ease;
    --net-transition-slow: 0.4s ease;
    
    /* Sidebar Dimensions */
    --net-sidebar-width: 16rem;
    --net-sidebar-max-width: 16rem;

    /* Corner Bracket Styling - Light Theme */
    --net-bracket-thickness: 4px;
    --net-bracket-length: 1.5rem;

    /* Z-Index Scale
       Controls stacking order across all UI components.
       Nothing should use a raw z-index value — reference these variables instead.
    */
    --net-z-base:         1;    /* Minor decorative overlaps (badges, status dots) */
    --net-z-raised:       10;   /* Cards, sticky column headers, button group layers */
    --net-z-sticky:       20;   /* Sticky action buttons, page-level controls */
    --net-z-dropdown:     200;  /* Dropdown lists, autocomplete popups */
    --net-z-dropdown-fixed: 210; /* Dropdowns that use position:fixed to escape overflow */
    --net-z-floating:     220;  /* Floating panels (quick-links, widget settings) */
    --net-z-nav:          300;  /* Sticky site/app navigation header */
    --net-z-tooltip:      400;  /* Inline tooltips — must be above dropdowns and panels */
    --net-z-overlay:      500;  /* Full-screen dimmer overlays within dialogs */
    --net-z-modal:        1000; /* Modal dialogs */
    --net-z-notification: 2000; /* Autosave indicators, temporary status notifications */
    --net-z-top:          9999; /* Tooltip arrows, absolute-top chrome */

    /* ── Chart / data-visualization palette ──────────────────────────────────
       8-color sequence used by chart-pie.php (slice order) and chart-bar.php.
       Override any of these in the dark/light theme blocks below, or page-level
       <style> blocks, to retheme charts without touching PHP. */
    --net-chart-color-1: #7c5cbf;   /* purple     */
    --net-chart-color-2: #5c9cbf;   /* steel blue */
    --net-chart-color-3: #4caf50;   /* green      */
    --net-chart-color-4: #ff9800;   /* amber      */
    --net-chart-color-5: #f44336;   /* red        */
    --net-chart-color-6: #e91e63;   /* pink       */
    --net-chart-color-7: #00bcd4;   /* cyan       */
    --net-chart-color-8: #8bc34a;   /* lime       */

    /* Bar chart default fill — points at color-1 so changing color-1 moves both */
    --net-chart-bar-color: var(--net-chart-color-1);

    /* Semantic status colors (shared by response-time bars, API status cards, etc.) */
    --net-chart-up:   #4caf50;   /* healthy / fast  */
    --net-chart-warn: #ff9800;   /* acceptable / slow */
    --net-chart-down: #f44336;   /* error / down    */

}

/* Light Theme (Default) */
:root.internal[data-theme="light"],
body.internal[data-theme="light"] {
    --net-font-size: 1.0rem;

    /* Color Variables */
    --net-color-primary: #3498db;
    --net-color-primary-hover: #2980b9;
    --net-color-secondary: #95a5a6;
    --net-color-secondary-hover: #7f8c8d;
    --net-color-success: #27ae60;
    --net-color-warning: #f39c12;
    --net-color-danger: #e74c3c;
    --net-color-danger-hover: #c82333;
    --net-color-required: #dc3545;
    --net-color-info: #e6e6ab;
    
    /* Background Colors - Light Theme */
    --net-bg-primary: #dedede;
    --net-bg-secondary: #d9d9d9;
    --net-bg-accent: #c1c1c1;
    --net-bg-sidebar: #f8f9fa;
    --net-bg-header: #afb7c4;
    --net-bg-card:#1c1c1e;
    
    /* Text Colors - Light Theme */
    --net-text-primary: #2c3e50;
    --net-text-secondary: #666;
    --net-text-muted: #6c757d;
    --net-text-light: #555;
    
    /* Border Colors - Light Theme */
    --net-border-light: #e9ecef;
    --net-border-medium: #dee2e6;
    --net-border-dark: #ccc;
    --net-border-accent: #bbb;
    
    /* Navigation Colors - Light Theme */
    --net-nav-header-bg: #dedede;
    --net-nav-item-selected: #aadbff;
    --net-nav-item-hover: #3498db;
    --net-nav-separator: #2c3e50;
    
    /* Status Colors - Light Theme */
    --net-status-active-bg: #d4edda;
    --net-status-active-text: #155724;
    --net-status-inactive-bg: #f8d7da;
    --net-status-inactive-text: #721c24;
    --net-status-error-bg: #ffd6d6;
    --net-status-error-text: #d00;
    
    /* Alert Colors - Light Theme */
    --net-alert-success-bg: #d4edda;
    --net-alert-success-text: #155724;
    --net-alert-success-border: #c3e6cb;
    --net-alert-error-bg: #f8d7da;
    --net-alert-error-text: #721c24;
    --net-alert-error-border: #f1aeb5;
        
    /* Corner Bracket Styling - Light Theme */
    --net-bracket-color: #555;

    /* Border Colors - Dark Theme */
    --net-border-light: #404040;
    --net-border-medium: #404040;
    --net-border-dark: #414141;
    --net-border-accent: #666;

    
    
    /* Box Shadows */
    --net-shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
    --net-shadow-base: 0 4px 16px rgba(0,0,0,0.1);
    --net-shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
    
}

/* Dark Theme */
:root.internal[data-theme="dark"],
body.internal[data-theme="dark"] {
    /* Color Variables - Keep primary colors but adjust hover states */
    --net-color-primary: #4fa8db;
    --net-color-primary-hover: #3498db;
    --net-color-secondary: #a0a0a0;
    --net-color-secondary-hover: #95a5a6;
    --net-color-success: #2ecc71;
    --net-color-success-hover: #249855;
    
    --net-color-warning: #f39c12;
    --net-color-danger: #e76f3c;
    --net-color-required: #dc3545;
    --net-color-critical: #dc3545;
    --net-color-info: #e6e6ab;
    --net-color-text: #333333;
    --net-color-info-hover:#b4b47d;
    
    /* Background Colors - Dark Theme */
    --net-bg-primary: #2c2c2c;
    --net-bg-secondary: #333333;
    --net-bg-accent: #404040;
    --net-bg-sidebar: #1e1e1e;
    --net-bg-header: #404040;
    
    /* Text Colors - Dark Theme */
    --net-text-primary: #e9ecef;
    --net-text-secondary: #adb5bd;
    --net-text-muted: #6c757d;
    --net-text-light: #ced4da;
    --net-color-alternate: #333333;
    --net-text-link: #a5adb5;
    --net-text-hover: var(--net-color-primary-hover);
    
    /* Border Colors - Dark Theme */
    --net-border-light: #404040;
    --net-border-medium: #404040;
    --net-border-dark: #414141;
    --net-border-accent: #666;

    
    
    /* Box Shadows */
    --net-shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
    --net-shadow-base: 0 4px 16px rgba(0,0,0,0.1);
    --net-shadow-lg: 0 8px 32px rgba(0,0,0,0.15);

    /* Navigation Colors - Dark Theme */
    --net-nav-header-bg: var(--net-bg-header);
    --net-nav-header-bg: color-mix(in srgb, var(--net-bg-header) 92%, white);
    --net-nav-header-color: var(--net-text-secondary);

    --net-nav-item-selected: #1a5490;
    --net-nav-item-hover: #4fa8db;
    --net-nav-separator: #e9ecef;
    
    /* Status Colors - Dark Theme */
    --net-status-active-bg: #1e4620;
    --net-status-active-text: #a3cfb1;
    --net-status-inactive-bg: #4a1e1e;
    --net-status-inactive-text: #f8b2b2;
    --net-status-error-bg: #4a1e1e;
    --net-status-error-text: #ff6b6b;
    
    /* Alert Colors - Dark Theme */
    --net-alert-success-bg: #1e4620;
    --net-alert-success-text: #a3cfb1;
    --net-alert-success-border: #2d5a31;
    --net-alert-error-bg: #4a1e1e;
    --net-alert-error-text: #f8b2b2;
    --net-alert-error-border: #6f2c2c;
    
    /* Corner Bracket Styling - Dark Theme */
    --net-bracket-color: #ced4da;
    
    /* Box Shadows - Dark Theme */
    --net-shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --net-shadow-base: 0 4px 16px rgba(0,0,0,0.4);
    --net-shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
 
}

:root,
[data-chart="blue-warm"] {
  --net-chart-color-1: #4f7fb5; /* soft blue */
  --net-chart-color-2: #c9825a; /* warm clay */
  --net-chart-color-3: #7aa66a; /* sage green */
  --net-chart-color-4: #d4a64f; /* muted amber */
  --net-chart-color-5: #b85f5f; /* dusty red */
  --net-chart-color-6: #a86f9f; /* muted mauve */
  --net-chart-color-7: #5fa7b3; /* soft teal */
  --net-chart-color-8: #9aaa63; /* olive-lime */
}
[data-chart="muted"] {
  --net-chart-color-1: #6f8fb5;
  --net-chart-color-2: #c28b6c;
  --net-chart-color-3: #7f9f7a;
  --net-chart-color-4: #c7a76a;
  --net-chart-color-5: #b57979;
  --net-chart-color-6: #9b7fa3;
  --net-chart-color-7: #75a6ad;
  --net-chart-color-8: #9aa878;
}

[data-chart="earth"] {
  --net-chart-color-1: #5f7f9f;
  --net-chart-color-2: #a66f4f;
  --net-chart-color-3: #6f8f5f;
  --net-chart-color-4: #b59655;
  --net-chart-color-5: #9f5f55;
  --net-chart-color-6: #8f6f7f;
  --net-chart-color-7: #5f8f8f;
  --net-chart-color-8: #8f8f5f;
}

[data-chart="soft-office"] {
  --net-chart-color-1: #4472c4;
  --net-chart-color-2: #ed7d31;
  --net-chart-color-3: #70ad47;
  --net-chart-color-4: #ffc000;
  --net-chart-color-5: #a5a5a5;
  --net-chart-color-6: #5b9bd5;
  --net-chart-color-7: #264478;
  --net-chart-color-8: #9e480e;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-primary { color: var(--net-text-primary); }
.text-secondary { color: var(--net-text-secondary); }
.text-muted { color: var(--net-text-muted); }
.text-accent { color: var(--net-accent-gold); }

.bg-primary { background-color: var(--net-bg-primary); }
.bg-secondary { background-color: var(--net-bg-secondary); }
.bg-tertiary { background-color: var(--net-bg-tertiary); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--net-spacing-sm); }
.mb-md { margin-bottom: var(--net-spacing-md); }
.mb-lg { margin-bottom: var(--net-spacing-lg); }
.mb-xl { margin-bottom: var(--net-spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--net-spacing-sm); }
.mt-md { margin-top: var(--net-spacing-md); }
.mt-lg { margin-top: var(--net-spacing-lg); }
.mt-xl { margin-top: var(--net-spacing-xl); }

.p-sm { padding: var(--net-spacing-sm); }
.p-md { padding: var(--net-spacing-md); }
.p-lg { padding: var(--net-spacing-lg); }
.p-xl { padding: var(--net-spacing-xl); }

.border { border: 1px solid var(--net-border); }
.border-accent { border: 1px solid var(--net-accent-gold); }
.rounded { border-radius: var(--net-radius-md); }
.rounded-lg { border-radius: var(--net-radius-lg); }

.shadow { box-shadow: var(--net-shadow-md); }
.shadow-lg { box-shadow: var(--net-shadow-lg); }