/* =====================================================
   THEME SYSTEM - CSS Custom Properties
   Shared variables for all custom admin styles
   ===================================================== */

/* Universal Layout Variables (theme-independent) */
:root {
  /* Table dimensions for scrolling calculation */
  --table-row-height: 3.3125rem;
  --table-header-height: 3.125rem;
  --table-visible-rows: 10;

  /* Sidebar dimensions */
  --sidebar-width: 21.875rem;

  --nav-tab-height: 4.0625rem;

  /* Header padding values */
  --header-padding-normal: 1.875rem;
  --header-padding-shrunk: 0.3125rem;

  /* Header margin bottom */
  --header-margin-bottom-normal: 1.875rem;
  --header-margin-bottom-shrunk: 0;

  /* Header gap (space between logo and text) */
  --header-gap-normal: 18.75rem;
  --header-gap-shrunk: 1.875rem;

  /* Header h1 font size */
  --header-h1-size-normal: 2.5rem;
  --header-h1-size-shrunk: 1.1rem;

  /* Header h1 margin bottom */
  --header-h1-margin-normal: 0.625rem;
  --header-h1-margin-shrunk: 0;

  /* Header p font size */
  --header-p-size-normal: 1.1rem;
  --header-p-size-shrunk: 0;

  /* Header logo width */
  --header-logo-width-normal: 12.5rem;
  --header-logo-width-shrunk: 3.125rem;

  /* Spacer compensation height (how much the spacer grows) */
  --header-spacer-max-height: 8.75rem;
}

/* Light Theme Variables */
html[data-theme="light"] {
  --primary-color: #3a8dde;
  --secondary-color: #1e3c72;

  /* Background colors */
  --body-bg-color: linear-gradient(135deg, #3a8dde 0%, #1e3c72 100%);
  --container-bg-color: rgba(255, 255, 255, 0.95);
  --header-bg-color: rgba(255, 255, 255, 1);
  --nav-tab-bg-color: #e8ecf1;
  --nav-tab-button-bg-color: #ffffff;
  --tab-content-bg-color: rgba(255, 255, 255, 0.95);

  /* Text colors */
  --text-primary-color: #333333;
  --text-secondary-color: #666666;
  --text-header-color: #2c3e50;
  --text-muted-color: #7f8c8d;
  --text-on-body-color: #ffffff;
  --text-on-body-muted-color: rgba(255, 255, 255, 0.7);
  --border-on-body-color: rgba(255, 255, 255, 0.3);
  --hover-on-body-color: rgba(255, 255, 255, 0.1);

  /* Table colors (Light theme) */
  --table-bg-color: #ffffff;
  --table-row-alt-bg-color: #f9f9f9;
  --table-text-color: #333333;
  --table-border-color: #eeeeee;
  --table-hover-bg-color: rgba(58, 141, 222, 0.05);
  --table-header-bg-color: linear-gradient(135deg, #3a8dde, #2980b9);
  --table-header-text-color: white;
  --table-container-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  --link-color: #0a84ff;
  --link-fg: #0a84ff; /* Override Django's link color variable */
  --link-hover-color: #0051d5;

  /* Form colors */
  --form-bg-color: #ffffff;
  --form-text-color: #333333;
  --form-border-color: #e0e6ed;
  --form-focus-border-color: #3a8dde;
  --form-placeholder-color: #999999;

  /* Alert colors */
  --alert-base-bg-color: #f8fafc;
  --alert-success-bg-color: #d4edda;
  --alert-success-text-color: #155724;
  --alert-success-border-color: #c3e6cb;
  --alert-warning-bg-color: #fff3cd;
  --alert-warning-text-color: #856404;
  --alert-warning-border-color: #ffeaa7;
  --alert-danger-bg-color: #f8d7da;
  --alert-danger-text-color: #721c24;
  --alert-danger-border-color: #f5c6cb;
  --alert-info-bg-color: #e7f3ff;
  --alert-info-text-color: #004085;
  --alert-info-border-color: #b3d9ff;

  /* Sidebar toggle button colors */
  --sidebar-toggle-bg-color: white;
  --sidebar-toggle-border-color: #3a8dde;
  --sidebar-toggle-icon-color: #3a8dde;

  /* Primary button colors */
  --primary-button-bg: linear-gradient(135deg, #3a8dde, #2980b9);
  --primary-button-text: white;
  --primary-button-hover-bg: linear-gradient(135deg, #2980b9, #1e6ba8);
  --button-shadow-color: rgba(58, 141, 222, 0.3);

  /* Filter colors */
  --filter-selected-bg: rgba(58, 141, 222, 0.2);
  --filter-selected-hover-bg: rgba(58, 141, 222, 0.25);
  --filter-selected-shadow: rgba(58, 141, 222, 0.15);

  /* Stat card colors - Bright for light theme */
  --color-blue-from: #3a8dde;
  --color-blue-to: #2980b9;
  --color-green-from: #56ca00;
  --color-green-to: #4caf50;
  --color-red-from: #e74c3c;
  --color-red-to: #c22a1a;
  --color-yellow-from: #ffd93d;
  --color-yellow-to: #f9ca24;
  --color-orange-from: #f59f58;
  --color-orange-to: #e56c2e;
  --color-purple-from: #a55eea;
  --color-purple-to: #8e44ad;
  --color-pink-from: #fd79a8;
  --color-pink-to: #e84393;
  --color-teal-from: #26de81;
  --color-teal-to: #20bf6b;
  --color-gray-from: #95a5a6;
  --color-gray-to: #7f8c8d;
  --color-black-from: #485460;
  --color-black-to: #2c3e50;
  --color-white-from: #f8f9fa;
  --color-white-to: #e9ecef;
  --color-white-text: #2c3e50;
}

/* Dark Theme Variables */
html[data-theme="dark"] {
  --primary-color: #3a8dde;
  --secondary-color: #1e3c72;

  /* Background colors */
  --body-bg-color: linear-gradient(135deg, #2c3e50 0%, #1a1a1a 100%);
  --container-bg-color: rgba(44, 62, 80, 0.95);
  --header-bg-color: rgba(52, 73, 94, 0.95);
  --nav-tab-bg-color: rgba(35, 50, 65, 0.9);
  --nav-tab-button-bg-color: rgba(52, 73, 94, 0.95);
  --tab-content-bg-color: rgba(44, 62, 80, 0.95);

  /* Text colors */
  --text-primary-color: #ecf0f1;
  --text-secondary-color: #bdc3c7;
  --text-header-color: #ecf0f1;
  --text-muted-color: #95a5a6;
  --text-on-body-color: #ecf0f1;
  --text-on-body-muted-color: rgba(236, 240, 241, 0.7);
  --border-on-body-color: rgba(236, 240, 241, 0.3);
  --hover-on-body-color: rgba(236, 240, 241, 0.1);

  /* Table colors (Dark theme) */
  --table-bg-color: #2c3e50;
  --table-row-alt-bg-color: #34495e;
  --table-text-color: #ecf0f1;
  --table-border-color: #34495e;
  --table-hover-bg-color: rgba(58, 141, 222, 0.15);
  --table-header-bg-color: linear-gradient(135deg, #3a8dde, #2980b9);
  --table-header-text-color: white;
  --table-container-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  --link-color: #64b5f6;
  --link-fg: #64b5f6; /* Override Django's link color variable */
  --link-hover-color: #90caf9;

  /* Form colors */
  --form-bg-color: #34495e;
  --form-text-color: #ecf0f1;
  --form-border-color: #4a6070;
  --form-focus-border-color: #3a8dde;
  --form-placeholder-color: #95a5a6;

  /* Alert colors */
  --alert-base-bg-color: #34495e;
  --alert-success-bg-color: #27ae60;
  --alert-success-text-color: white;
  --alert-success-border-color: #2ecc71;
  --alert-warning-bg-color: #f39c12;
  --alert-warning-text-color: white;
  --alert-warning-border-color: #e67e22;
  --alert-danger-bg-color: #e74c3c;
  --alert-danger-text-color: white;
  --alert-danger-border-color: #c0392b;
  --alert-info-bg-color: #3498db;
  --alert-info-text-color: white;
  --alert-info-border-color: #5dade2;

  /* Sidebar toggle button colors */
  --sidebar-toggle-bg-color: #34495e;
  --sidebar-toggle-border-color: #64b5f6;
  --sidebar-toggle-icon-color: #64b5f6;

  /* Primary button colors */
  --primary-button-bg: linear-gradient(135deg, #3a8dde, #2980b9);
  --primary-button-text: white;
  --primary-button-hover-bg: linear-gradient(135deg, #2980b9, #1e6ba8);
  --button-shadow-color: rgba(58, 141, 222, 0.4);

  /* Filter colors */
  --filter-selected-bg: rgba(100, 181, 246, 0.2);
  --filter-selected-hover-bg: rgba(100, 181, 246, 0.25);
  --filter-selected-shadow: rgba(100, 181, 246, 0.15);

  /* Stat card colors - Muted for dark theme */
  --color-blue-from: #2c6ba8;
  --color-blue-to: #1e4d7a;
  --color-green-from: #3a8c00;
  --color-green-to: #2d6e2d;
  --color-red-from: #a23529;
  --color-red-to: #7a1a12;
  --color-yellow-from: #b8a02d;
  --color-yellow-to: #8f7d1c;
  --color-orange-from: #b57542;
  --color-orange-to: #8f5621;
  --color-purple-from: #7a46b8;
  --color-purple-to: #5e3380;
  --color-pink-from: #b8567a;
  --color-pink-to: #8f3d5e;
  --color-teal-from: #1ca566;
  --color-teal-to: #17804f;
  --color-gray-from: #6a7577;
  --color-gray-to: #54595a;
  --color-black-from: #3a434a;
  --color-black-to: #232e36;
  --color-white-from: #525a62;
  --color-white-to: #3e4750;
  --color-white-text: #ecf0f1;
}

/* Auto Theme Variables (Default to light) */
html[data-theme="auto"] {
  /* Same as light theme initially */
  --primary-color: #3a8dde;
  --secondary-color: #1e3c72;

  --body-bg-color: linear-gradient(135deg, #3a8dde 0%, #1e3c72 100%);
  --container-bg-color: rgba(255, 255, 255, 0.95);
  --header-bg-color: rgba(255, 255, 255, 1);
  --nav-tab-bg-color: #e8ecf1;
  --nav-tab-button-bg-color: #ffffff;
  --tab-content-bg-color: rgba(255, 255, 255, 0.95);
  --text-primary-color: #333333;
  --text-secondary-color: #666666;
  --text-header-color: #2c3e50;
  --text-muted-color: #7f8c8d;
  --table-bg-color: #ffffff;
  --table-row-alt-bg-color: #f9f9f9;
  --table-text-color: #333333;
  --table-border-color: #eeeeee;
  --table-hover-bg-color: rgba(58, 141, 222, 0.05);
  --table-header-bg-color: linear-gradient(135deg, #3a8dde, #2980b9);
  --table-header-text-color: white;
  --table-container-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  --link-color: #0a84ff;
  --link-fg: #0a84ff; /* Override Django's link color variable */
  --link-hover-color: #0051d5;
  --form-bg-color: #ffffff;
  --form-text-color: #333333;
  --form-border-color: #e0e6ed;
  --form-focus-border-color: #3a8dde;
  --form-placeholder-color: #999999;
  --alert-base-bg-color: #f8fafc;
  --alert-success-bg-color: #d4edda;
  --alert-success-text-color: #155724;
  --alert-success-border-color: #c3e6cb;
  --alert-warning-bg-color: #fff3cd;
  --alert-warning-text-color: #856404;
  --alert-warning-border-color: #ffeaa7;
  --alert-danger-bg-color: #f8d7da;
  --alert-danger-text-color: #721c24;
  --alert-danger-border-color: #f5c6cb;
  --alert-info-bg-color: #e7f3ff;
  --alert-info-text-color: #004085;
  --alert-info-border-color: #b3d9ff;

  /* Sidebar toggle button colors */
  --sidebar-toggle-bg-color: white;
  --sidebar-toggle-border-color: #3a8dde;
  --sidebar-toggle-icon-color: #3a8dde;

  /* Primary button colors */
  --primary-button-bg: linear-gradient(135deg, #3a8dde, #2980b9);
  --primary-button-text: white;
  --primary-button-hover-bg: linear-gradient(135deg, #2980b9, #1e6ba8);
  --button-shadow-color: rgba(58, 141, 222, 0.3);

  /* Filter colors */
  --filter-selected-bg: rgba(58, 141, 222, 0.2);
  --filter-selected-hover-bg: rgba(58, 141, 222, 0.25);
  --filter-selected-shadow: rgba(58, 141, 222, 0.15);

  /* Stat card colors - Bright for light theme */
  --color-blue-from: #3a8dde;
  --color-blue-to: #2980b9;
  --color-green-from: #56ca00;
  --color-green-to: #4caf50;
  --color-red-from: #e74c3c;
  --color-red-to: #c22a1a;
  --color-yellow-from: #ffd93d;
  --color-yellow-to: #f9ca24;
  --color-orange-from: #f59f58;
  --color-orange-to: #e56c2e;
  --color-purple-from: #a55eea;
  --color-purple-to: #8e44ad;
  --color-pink-from: #fd79a8;
  --color-pink-to: #e84393;
  --color-teal-from: #26de81;
  --color-teal-to: #20bf6b;
  --color-gray-from: #95a5a6;
  --color-gray-to: #7f8c8d;
  --color-black-from: #485460;
  --color-black-to: #2c3e50;
  --color-white-from: #f8f9fa;
  --color-white-to: #e9ecef;
  --color-white-text: #2c3e50;
}

/* Auto theme dark mode media query */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --primary-color: #3a8dde;
    --secondary-color: #1e3c72;

    --body-bg-color: linear-gradient(135deg, #2c3e50 0%, #1a1a1a 100%);
    --container-bg-color: rgba(44, 62, 80, 0.95);
    --header-bg-color: rgba(52, 73, 94, 0.95);
    --nav-tab-bg-color: rgba(35, 50, 65, 0.9);
    --nav-tab-button-bg-color: rgba(52, 73, 94, 0.95);
    --tab-content-bg-color: rgba(44, 62, 80, 0.95);
    --text-primary-color: #ecf0f1;
    --text-secondary-color: #bdc3c7;
    --text-header-color: #ecf0f1;
    --text-muted-color: #95a5a6;

    /* Table follows dark theme in auto mode */
    --table-bg-color: #2c3e50;
    --table-row-alt-bg-color: #34495e;
    --table-text-color: #ecf0f1;
    --table-border-color: #34495e;
    --table-hover-bg-color: rgba(58, 141, 222, 0.15);
    --table-header-bg-color: linear-gradient(135deg, #3a8dde, #2980b9);
    --table-header-text-color: white;
    --table-container-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    --link-color: #64b5f6;
    --link-fg: #64b5f6; /* Override Django's link color variable */
    --link-hover-color: #90caf9;
    --form-bg-color: #34495e;
    --form-text-color: #ecf0f1;
    --form-border-color: #4a6070;
    --form-focus-border-color: #3a8dde;
    --form-placeholder-color: #95a5a6;
    --alert-base-bg-color: #34495e;
    --alert-success-bg-color: #27ae60;
    --alert-success-text-color: white;
    --alert-success-border-color: #2ecc71;
    --alert-warning-bg-color: #f39c12;
    --alert-warning-text-color: white;
    --alert-warning-border-color: #e67e22;
    --alert-danger-bg-color: #e74c3c;
    --alert-danger-text-color: white;
    --alert-danger-border-color: #c0392b;
    --alert-info-bg-color: #3498db;
    --alert-info-text-color: white;
    --alert-info-border-color: #5dade2;

    /* Sidebar toggle button colors */
    --sidebar-toggle-bg-color: #34495e;
    --sidebar-toggle-border-color: #64b5f6;
    --sidebar-toggle-icon-color: #64b5f6;

    /* Primary button colors */
    --primary-button-bg: linear-gradient(135deg, #3a8dde, #2980b9);
    --primary-button-text: white;
    --primary-button-hover-bg: linear-gradient(135deg, #2980b9, #1e6ba8);
    --button-shadow-color: rgba(58, 141, 222, 0.4);

    /* Filter colors */
    --filter-selected-bg: rgba(100, 181, 246, 0.2);
    --filter-selected-hover-bg: rgba(100, 181, 246, 0.25);
    --filter-selected-shadow: rgba(100, 181, 246, 0.15);

    /* Stat card colors - Muted for dark theme */
    --color-blue-from: #2c6ba8;
    --color-blue-to: #1e4d7a;
    --color-green-from: #3a8c00;
    --color-green-to: #2d6e2d;
    --color-red-from: #a23529;
    --color-red-to: #7a1a12;
    --color-yellow-from: #b8a02d;
    --color-yellow-to: #8f7d1c;
    --color-orange-from: #b57542;
    --color-orange-to: #8f5621;
    --color-purple-from: #7a46b8;
    --color-purple-to: #5e3380;
    --color-pink-from: #b8567a;
    --color-pink-to: #8f3d5e;
    --color-teal-from: #1ca566;
    --color-teal-to: #17804f;
    --color-gray-from: #6a7577;
    --color-gray-to: #54595a;
    --color-black-from: #3a434a;
    --color-black-to: #232e36;
    --color-white-from: #525a62;
    --color-white-to: #3e4750;
    --color-white-text: #ecf0f1;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 17.5rem;
  }
}

@media (max-width: 480px) {
  :root {
    --sidebar-width: 15rem;
  }
}