/* ==========================================================================
   1. WHITE-LABEL IDENTITY INJECTION VARIABLE CONFIGURATION
   ========================================================================== */
   :root {
    --primary-color: #300040;   
    --primary-mid:   #4a006e;   
    
    --text-light: #333333;
    --text-dark:  #e0e0e0;
    
    --background-light: #f4f4f4;
    --background-dark:  #1e1e1e;
    
    --card-background-light: #ffffff;
    --card-background-dark:  #2c2c2c;
    --surface-light:          #f0edf2;   
    --surface-dark:           #252030;
    
    --link-light: #1a73e8;
    --link-dark:  #4285f4;
    
    --box-shadow-light: 0 4px 12px rgba(48, 0, 64, 0.05);
    --box-shadow-dark:  0 4px 12px rgba(0, 0, 0, 0.35);
    
    --btn-bg: #5469d4;
    --btn-bg-hover: #4354a5;
    --btn-text: #ffffff;
    
    --tab-inactive-bg: #e2e8f0;
    --tab-inactive-text: #475569;
    --tab-active-bg: #3b82f6;
    --tab-active-text: #ffffff;
  
    --filter-bg-light: #f1f5f9;      
    --filter-border-light: #e2e8f0;  
    --filter-label-light: #475569;   
    --filter-bg-dark: #1e293b;
  
    --border-radius: 12px;
    --gap: 16px;
  }
  
  /* ==========================================================================
     2. TYPOGRAPHY CANVAS & CORE FONTS THEMING
     ========================================================================== */
  body {
    font-family: Ubuntu, 'Segoe UI', system-ui, sans-serif;
    background-color: var(--background-light);
    color: var(--text-light);
    transition: background-color 0.25s, color 0.25s;
  }
  
  body.dark-mode { background-color: var(--background-dark); color: var(--text-dark); }
  a { color: var(--link-light); transition: color 0.2s ease; }
  a:hover { text-decoration: underline; }
  .dark-mode a { color: var(--link-dark); }
  
  /* ==========================================================================
     3. CORPORATE PANELS & RADIUS-ENFORCED SURFACES
     ========================================================================== */
  .column70, .column3, .card, .card-sm {
    background-color: var(--card-background-light);
    border: 1px solid rgba(0,0,0,0.09);
    box-shadow: var(--box-shadow-light);
    border-radius: var(--border-radius); 
  }
  
  .dark-mode .column70, .dark-mode .column3, .dark-mode .card, .dark-mode .card-sm {
    background-color: var(--card-background-dark);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--box-shadow-dark);
  }
  
  .header, .footer { background-color: var(--primary-color); color: #ffffff; }
  .header { box-shadow: var(--box-shadow-light); }
  .footer a { color: #ffffff; }
  
/* ==========================================================================
   4. PREMIUM NAVIGATION SKIN & MULTI-TIER DROP-DOWNS
   ========================================================================== */
   .navbar {
    background-color: #f8fafc; 
    border-bottom: 1px solid var(--filter-border-light);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  }
  .dark-mode .navbar { 
    background-color: #242424; 
    border-bottom-color: rgba(255,255,255,0.08); 
  }
  
  .navbar > ul > li > a {
    padding: 0.85rem 1.25rem;
    color: #475569; 
    font-weight: 500;
    transition: all 0.2s;
  }
  .dark-mode .navbar > ul > li > a { color: var(--text-dark); }
  
  .navbar > ul > li:hover > a,
  .navbar > ul > li > a:hover {
    background-color: var(--primary-color);
    color: #ffffff !important;
  }
  
  /* Unified Theme Skins for all Submenu Dropdown Panes */
  .navbar ul ul, 
  .navbar .secondary-submenu {
    background-color: var(--card-background-light) !important;
    border: 1px solid var(--filter-border-light);
    box-shadow: var(--box-shadow-dark);
    border-radius: 6px; 
    padding: 0.5rem 0;
  }
  body.dark-mode .navbar ul ul,
  body.dark-mode .navbar .secondary-submenu {
    background-color: var(--card-background-dark) !important;
    border-color: rgba(255,255,255,0.1);
  }
  
  .navbar ul ul li a,
  .navbar .secondary-submenu li a {
    color: var(--text-light) !important;
    padding: 0.6rem 1.25rem;
    font-size: 13px;
    display: block;
  }
  body.dark-mode .navbar ul ul li a,
  body.dark-mode .navbar .secondary-submenu li a { 
    color: var(--text-dark) !important; 
  }
  
  .navbar ul ul li a:hover,
  .navbar .secondary-submenu li a:hover { 
    background-color: var(--primary-mid) !important; 
    color: #ffffff !important; 
    text-decoration: none;
  }
  
  @media (max-width: 768px) {
    .navbar { background-color: #333333; }
    .navbar a { color: #ffffff !important; }
    .navbar ul ul, .navbar .secondary-submenu { background-color: #444444 !important; }
    .nav-toggle { color: #ffffff; background-color: var(--primary-color); }
  }
  
  /* Context Action Dropdown Configurations */
  .dropbtn { background-color: var(--card-background-light); color: var(--text-light); border-color: var(--border-color-light); border-radius: 6px; }
  body.dark-mode .dropbtn { background: #444444; color: #eeeeee; border-color: #666666; }
  .dropbtn:hover { background-color: var(--surface-light); }
  
  .dropdown-content { background-color: var(--card-background-light) !important; border-color: var(--border-color-light); box-shadow: var(--box-shadow-light); border-radius: 6px; overflow: hidden; }
  body.dark-mode .dropdown-content { background-color: var(--card-background-dark) !important; box-shadow: var(--box-shadow-dark); border-color: #555555; }
  .dropdown-content a { color: var(--text-light); }
  body.dark-mode .dropdown-content a { color: var(--text-dark); }
  .dropdown-content a:hover { background-color: var(--surface-light); color: var(--primary-color); }
  
  /* ==========================================================================
     5. FILTER BAR VISUAL RE-DESIGN & OPAQUE INPUTS
     ========================================================================== */
  .filter-section, .login .form-container, .card .form-container  {
    background-color: var(--filter-bg-light); 
    border-color: var(--filter-border-light);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
    border-radius: var(--border-radius);
  }
  body.dark-mode .filter-section, body.dark-mode .login .form-container, body.dark-mode .card .form-container {
    background-color: var(--filter-bg-dark);
    border-color: var(--border-color-dark);
    border-radius: var(--border-radius);
  }
  .filter-label { color: var(--filter-label-light); font-weight: 700; }
  body.dark-mode .filter-label { color: var(--text-dark); }
  
  .filter-input, .form-input {
    background-color: var(--card-background-light) !important;
    color: var(--text-light);
    border: 1px solid var(--border-color-light);
    border-radius: 6px;
  }
  body.dark-mode .filter-input, body.dark-mode .form-input {
    background-color: var(--card-background-dark) !important;
    color: var(--text-dark);
    border-color: var(--border-color-dark);
  }
  .filter-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(48, 0, 64, 0.12); }
  
  .form-button, .filter-btn { background-color: var(--primary-color); color: #ffffff; border-radius: 6px; }
  .form-button:hover, .filter-btn:hover { background-color: var(--primary-mid); }
  
  table th { background-color: #5a6374; color: #ffffff; }
  body.dark-mode table th { background-color: #3a4046; color: #e0e0e0; }
  table td { border-bottom: 1px solid rgba(0,0,0,0.08); }
  body.dark-mode table td { border-bottom-color: rgba(255,255,255,0.08); }
  table tr:hover { background-color: rgba(0,0,0,0.03); }
  body.dark-mode table tr:hover { background-color: rgba(255,255,255,0.06); }
  
  /* ==========================================================================
     6. ANNOUNCEMENT ITEMS: HIGH-CONTRAST LEFT ACCENT BORDERS SKIN
     ========================================================================== */
  /* Styled background surfaces with rounded edges */
  .announce-item {
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  }
  
  /* Light Mode: Rich Dark Contrast Left Accent Line Treatments */
  .tag-product { background: #EEEDFE; color: #3C3489; }
  .tag-system  { background: #FAEEDA; color: #854F0B; }
  .tag-outage  { background: #FCEBEB; color: #A32D2D; }
  
  .announce-item:has(.tag-product) { background-color: #f5f3ff; border-left-color: #3c3489; }
  .announce-item:has(.tag-system)  { background-color: #fffbeb; border-left-color: #854f0b; }
  .announce-item:has(.tag-outage)  { background-color: #fef2f2; border-left-color: #a32d2d; }
  
  /* Dark Mode: Vibrant Glowing Left Accent Border Line Treatments */
  body.dark-mode .tag-product { background: #26215C; color: #AFA9EC; }
  body.dark-mode .tag-system  { background: #412402; color: #FAC775; }
  body.dark-mode .tag-outage  { background: #501313; color: #F09595; }
  
  body.dark-mode .announce-item:has(.tag-product) { background-color: #1e1b4b; border-left-color: #a78bfa; }
  body.dark-mode .announce-item:has(.tag-system)  { background-color: #451a03; border-left-color: #fbbf24; }
  body.dark-mode .announce-item:has(.tag-outage)  { background-color: #450a0a; border-left-color: #f87171; }
  
  /* ==========================================================================
     7. WIDGET APPARATUS SKINNING (Metrics, Tabs, Sliders)
     ========================================================================== */
  .metric-card { background-color: var(--surface-light); border-radius: 10px; }
  body.dark-mode .metric-card { background-color: var(--surface-dark); }
  
  ul.tabs li a, .tab {
    background-color: var(--tab-inactive-bg);
    color: var(--tab-inactive-text);
    border: 1px solid var(--border-color-light);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-weight: 500;
    transition: background-color 0.2s;
  }
  ul.tabs li a:hover, .tab:hover { background-color: #cbd5e1; color: #000000; }
  ul.tabs li.active a, .tab.active { background-color: var(--primary-color) !important; color: #ffffff !important; border-color: var(--primary-color) !important; }
  
  .pagination a { background-color: #f2f2f2; color: #333333; }
  .pagination a:hover { background-color: #dddddd; }
  .pagination .active { background-color: var(--primary-color); color: #ffffff; }
  
  .slider { background-color: #cbd5e1; border-radius: 24px; }
  .slider:before { background-color: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
  input:checked + .slider { background-color: #22c55e; } 
  body.dark-mode .slider { background-color: #444444; }
  body.dark-mode .slider:before { background-color: #262827; }
  body.dark-mode input:checked + .slider { background-color: #11582b; }
  body.dark-mode .switch { background-color: transparent; }
  
  .admin-pill-info { background-color: #f0ecf5; color: var(--primary-color); border-color: #c9b8e8; }
  .dark-mode .admin-pill-info { background-color: #1c0828; color: #c9b8e8; border-color: #4a2068; }

  /* ── Active service cards ─────────────────────────────────── */
  
  .services-section {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
  
  .service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 10px;
  }
  
  .service-card {
    background: var(--card-background-light);
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--box-shadow-light);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  
  .service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  }
  
  .dark-mode .service-card {
    background: var(--card-background-dark);
    border-color: rgba(255,255,255,0.08);
    box-shadow: var(--box-shadow-dark);
  }
  
  .service-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  
  /* service icon colour variants */
  .svc-purple { background: #EEEDFE; color: #3C3489; }
  .svc-teal   { background: #E1F5EE; color: #0F6E56; }
  .svc-blue   { background: #E6F1FB; color: #185FA5; }
  .svc-amber  { background: #FAEEDA; color: #854F0B; }
  .svc-coral  { background: #FAECE7; color: #993C1D; }
  
  .dark-mode .svc-purple { background: #26215C; color: #AFA9EC; }
  .dark-mode .svc-teal   { background: #04342C; color: #5DCAA5; }
  .dark-mode .svc-blue   { background: #042C53; color: #85B7EB; }
  .dark-mode .svc-amber  { background: #412402; color: #EF9F27; }
  .dark-mode .svc-coral  { background: #4A1B0C; color: #F0997B; }
  
  .service-num {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
  }
  
  .service-name {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    line-height: 1.3;
  }
  
  .dark-mode .service-name { color: #aaa; }
  
  .editor-toolbar { background-color: var(--card-background-light); border-color: #cbd5e1; border-radius: 6px 6px 0 0; }
  body.dark-mode .editor-toolbar { background-color: var(--card-background-dark); border-color: rgba(255,255,255,0.08); }
  .editor-toolbar button { background-color: var(--card-background-light); color: var(--text-light); border-color: #cbd5e1; border-radius: 4px; }
  body.dark-mode .editor-toolbar button { background-color: var(--surface-dark); color: var(--text-dark); border-color: rgba(255,255,255,0.1); }
  .editor-area { background-color: var(--card-background-light); color: var(--text-light); border-radius: 0 0 6px 6px; }
  body.dark-mode .editor-area { background-color: var(--card-background-dark); color: var(--text-dark); }
  .spinner { color: var(--primary-color); }

  /* ── Announcements ────────────────────────────────────────── */
  
  .announce-item {
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    font-size: 13px;
    line-height: 1.5;
  }
  
  .dark-mode .announce-item {
    border-bottom-color: rgba(255,255,255,0.07);
  }
  
  .announce-item:last-child { border-bottom: none; }
  
  .announce-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  
  .tag-product { background: #EEEDFE; color: #3C3489; }
  .tag-system  { background: #FAEEDA; color: #854F0B; }
  .tag-outage  { background: #FCEBEB; color: #A32D2D; }
  
  .dark-mode .tag-product { background: #26215C; color: #AFA9EC; }
  .dark-mode .tag-system  { background: #412402; color: #FAC775; }
  .dark-mode .tag-outage  { background: #501313; color: #F09595; }
  
  .announce-date {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
  }
  
  /* ==========================================================================
     8. RUNTIME SEVERE EXCEPTIONS INTERFACES BACKGROUNDS
     ========================================================================== */
  .high_severity   { background-color: rgba(255, 0, 0, 0.08); border-left-color: red; color: #000000; }
  .medium_severity { background-color: #fff6d9; border-left-color: orange; color: #000000; }
  .low_severity    { background-color: #eafce8; border-left-color: green; color: #000000; }
  
  body.dark-mode .high_severity   { background-color: #400000; border-color: pink; color: #ffbfbf; }
  body.dark-mode .medium_severity { background-color: #8c8c00; border-color: orange; color: #ffffbf; }
  body.dark-mode .low_severity    { background-color: #004000; border-color: green; color: #bfffbf; }