/* ══════════════════════════════════════════════════════════════════
   RateFlow — Slate Indigo Light Admin Component Overrides
   
   Overrides hardcoded dark-theme values in admin-components.css
   for the Slate Indigo light theme (data-theme="light").
   
   Brand unified: same Indigo accent as dark theme.
   ══════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {

  /* ═══ 1. FORM SYSTEM ═══ */
  .form-input {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #111827;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  }
  .form-input::placeholder {
    color: #9ca3af;
  }
  .form-input:hover {
    border-color: #d1d5db;
  }
  .form-input:focus {
    background: #ffffff;
    border-color: #4f6ef7;
    box-shadow: 0 0 0 3px rgba(79,110,247,0.12);
  }
  .form-input.error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
  }
  .form-input.input-error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
  }
  .form-input.input-error:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.15);
  }
  .form-input[readonly] {
    background: #fafbfc;
    color: #9ca3af;
  }

  .form-textarea {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #111827;
  }
  .form-textarea:focus {
    border-color: #4f6ef7;
    box-shadow: 0 0 0 3px rgba(79,110,247,0.12);
  }

  .form-label {
    color: #6b7280;
  }
  .form-error {
    color: #dc2626;
  }

  /* ═══ 2. BUTTON SYSTEM ═══ */
  .btn-primary {
    background: var(--gradient-1);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(79,110,247,0.25);
  }
  .btn-primary:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(79,110,247,0.35);
  }

  .btn-secondary {
    background: #f0f1f5;
    border-color: #e5e7eb;
    color: #4b5563;
  }
  .btn-secondary:hover {
    background: #e4e6eb;
    color: #111827;
  }

  .btn-ghost {
    background: transparent;
    border-color: #e5e7eb;
    color: #4b5563;
  }
  .btn-ghost:hover {
    background: #f0f1f5;
    color: #111827;
  }

  .btn-danger {
    background: rgba(220,38,38,0.06);
    border-color: rgba(220,38,38,0.15);
    color: #dc2626;
  }
  .btn-danger:hover {
    background: rgba(220,38,38,0.1);
  }

  .btn-approve {
    background: rgba(5,150,105,0.08);
    border-color: rgba(5,150,105,0.2);
    color: #059669;
  }
  .btn-approve:hover {
    background: rgba(5,150,105,0.15);
  }

  .btn-auth {
    background: var(--gradient-1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(79,110,247,0.25);
  }
  .btn-auth:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(79,110,247,0.35);
  }

  .btn-action {
    border-color: #e5e7eb;
    color: #9ca3af;
  }
  .btn-action:hover {
    color: #111827;
    background: #f0f1f5;
  }
  .btn-action.danger:hover {
    border-color: rgba(220,38,38,0.2);
    color: #dc2626;
  }

  .btn-add-row {
    border-color: #d1d5db;
    color: #9ca3af;
  }
  .btn-add-row:hover {
    border-color: #4f6ef7;
    color: #4f6ef7;
    background: rgba(79,110,247,0.04);
  }

  /* ═══ 3. CARD SYSTEM ═══ */
  .admin-card {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .admin-card-header {
    border-bottom-color: #f0f1f5;
  }
  .admin-card-title i {
    color: #4f6ef7;
  }

  .stat-card {
    background: #ffffff;
    border-color: #e5e7eb;
  }
  .stat-icon {
    color: #4f6ef7;
  }
  .stat-value {
    color: #111827;
  }

  .glass-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ═══ 4. ALERT SYSTEM ═══ */
  .alert.error {
    background: rgba(220,38,38,0.06);
    border-color: rgba(220,38,38,0.15);
    color: #dc2626;
  }
  .alert.success {
    background: rgba(5,150,105,0.06);
    border-color: rgba(5,150,105,0.15);
    color: #059669;
  }
  .alert.info {
    background: rgba(79,110,247,0.06);
    border-color: rgba(79,110,247,0.15);
    color: #4f6ef7;
  }
  .alert.warning {
    background: rgba(217,119,6,0.06);
    border-color: rgba(217,119,6,0.15);
    color: #d97706;
  }

  /* ═══ 5. LAYOUT ═══ */
  .admin-main {
    background: #f4f6f9;
  }

  /* ═══ 6. HEADER SYSTEM ═══ */
  .admin-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .admin-page-title {
    color: #6b7280;
  }
  .page-header h1 {
    color: #111827;
  }
  .page-header p {
    color: #6b7280;
  }

  /* ═══ 7. TABS ═══ */
  .admin-tabs {
    background: #f0f1f5;
    border-radius: 8px;
  }
  .admin-tab {
    color: #6b7280;
  }
  .admin-tab:hover {
    color: #4b5563;
  }
  .admin-tab.active {
    background: #ffffff;
    color: #4f6ef7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .tab-divider {
    background: #e5e7eb;
  }

  /* ═══ 8. TABLE SYSTEM ═══ */
  .data-table thead {
    background: #fafbfc;
  }
  .data-table th {
    color: #6b7280;
    border-bottom-color: #e5e7eb;
  }
  .data-table tbody tr {
    border-bottom-color: #f0f1f5;
  }
  .data-table tbody tr:hover {
    background: rgba(79,110,247,0.03);
  }
  .data-table td {
    color: #4b5563;
  }
  .container-type {
    background: #f0f1f5;
    color: #4b5563;
  }

  /* ═══ 9. BADGE SYSTEM ═══ */
  .badge-pending {
    background: rgba(217,119,6,0.1);
    color: #d97706;
  }
  .badge-active {
    background: rgba(5,150,105,0.1);
    color: #059669;
  }
  .badge-employee {
    background: rgba(156,163,175,0.1);
    color: #6b7280;
  }
  .badge-uploader {
    background: rgba(79,110,247,0.1);
    color: #4f6ef7;
  }
  .badge-admin {
    background: rgba(147,51,234,0.1);
    color: #9333ea;
  }
  .badge-super_admin {
    background: rgba(220,38,38,0.1);
    color: #dc2626;
  }

  /* ═══ 10. USER CELL ═══ */
  .user-cell-avatar {
    background: var(--gradient-2);
  }

  /* ═══ 11. CHECKBOX ═══ */
  .checkbox-wrapper .checkmark {
    border-color: #d1d5db;
  }
  .checkbox-wrapper:hover .checkmark {
    border-color: #4f6ef7;
  }
  .checkbox-wrapper input:checked + .checkmark {
    background: #4f6ef7;
    border-color: #4f6ef7;
  }

  /* ═══ 13. UPLOAD ZONE ═══ */
  .upload-zone {
    background: #fafbfc;
    border-color: #e5e7eb;
  }
  .upload-zone:hover {
    border-color: #4f6ef7;
    background: rgba(79,110,247,0.03);
  }
  .upload-zone.dragover {
    background: rgba(79,110,247,0.06);
  }

  /* ═══ 14. MODAL SYSTEM ═══ */
  .modal-overlay {
    background: rgba(17,24,39,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .modal {
    background: #ffffff;
    border-color: #e5e7eb;
  }
  .modal-close {
    background: #f0f1f5;
    border-color: #e5e7eb;
    color: #9ca3af;
  }
  .modal-close:hover {
    background: rgba(220,38,38,0.06);
    color: #dc2626;
    border-color: rgba(220,38,38,0.15);
  }

  /* ═══ 15. AUTH PAGES ═══ */
  .auth-bg {
    background: #f4f6f9;
  }
  .auth-bg::before {
    background:
      radial-gradient(circle at 50% 40%, rgba(79,110,247,0.04), transparent 65%),
      linear-gradient(180deg, #f5f7fb 0%, #f4f6f9 50%, #f5f7fb 100%);
  }
  .bg-glow-1 {
    background: radial-gradient(circle, rgba(79,110,247,0.02) 0%, transparent 80%);
  }
  .bg-glow-2 {
    background: radial-gradient(circle, rgba(79,110,247,0.02) 0%, transparent 80%);
  }
  .auth-header h1 {
    color: #111827;
  }
  .auth-header p {
    color: #6b7280;
  }
  .auth-footer a {
    color: #4f6ef7;
  }
  .auth-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  }

  /* Language Switcher */
  .lang-switcher {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .lang-btn {
    color: #6b7280;
  }
  .lang-btn:hover {
    color: #111827;
    background: #f0f1f5;
  }
  .lang-btn.active {
    color: #111827;
    background: #f0f1f5;
  }

  .password-toggle {
    color: #9ca3af;
  }
  .password-toggle:hover {
    color: #4b5563;
  }

  /* ═══ 16. SIDEBAR ═══ */
  .sidebar {
    background: #ffffff;
    border-right-color: #e5e7eb;
  }
  .sidebar-header {
    border-bottom-color: #f0f1f5;
  }
  .sidebar .logo img {
    filter: brightness(0) invert(0.1);
  }
  .sidebar .logo:hover img {
    filter: brightness(0) invert(0.15) drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  }
  .nav-label {
    color: #9ca3af;
  }
  .nav-item {
    color: #6b7280;
  }
  .nav-item:hover {
    background: #f0f1f5;
    color: #111827;
  }
  .nav-item.active {
    background: rgba(79,110,247,0.08);
    color: #4f6ef7;
  }
  .nav-item.active::before {
    background: #4f6ef7;
  }
  .nav-badge {
    background: #d97706;
    color: #ffffff;
  }

  .user-card {
    background: #fafbfc;
    border-color: #e5e7eb;
  }
  .user-card:hover {
    background: #f0f1f5;
  }
  .user-avatar {
    background: var(--gradient-2);
  }
  .user-name {
    color: #111827;
  }
  .user-role {
    color: #9ca3af;
  }

  /* ═══ 16a. ACCOUNT MENU ═══ */
  .account-chevron {
    color: #9ca3af;
  }
  .user-card:hover .account-chevron {
    color: #6b7280;
  }
  .account-menu.open .account-chevron {
    color: #4f6ef7;
  }
  .account-dropdown {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.03);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .account-dropdown-item {
    color: #4b5563;
  }
  .account-dropdown-item:hover {
    background: #f0f1f5;
    color: #111827;
  }
  .account-dropdown-divider {
    background: #e5e7eb;
  }
  .account-dropdown-danger {
    color: #4b5563;
  }
  .account-dropdown-danger i {
    color: #dc2626;
  }
  .account-dropdown-danger:hover {
    background: rgba(220,38,38,0.06);
    color: #dc2626;
  }

  /* ═══ 17. SURCHARGE ROWS ═══ */
  .surcharge-row:hover,
  .feeder-container-row:hover {
    background: #f0f1f5;
  }
  .surcharge-row .btn-remove-row,
  .feeder-container-row .btn-remove-row {
    color: #9ca3af;
  }
  .surcharge-row .btn-remove-row:hover,
  .feeder-container-row .btn-remove-row:hover {
    color: #dc2626;
  }

  /* ═══ 18. PROGRESS BAR ═══ */
  .progress-bar-track {
    background: #e5e7eb;
  }
  .progress-bar-fill {
    background: linear-gradient(90deg, #4f6ef7, #7c8ffa);
  }
  .progress-text {
    color: #6b7280;
  }

  /* ═══ 19. SECTION DIVIDER ═══ */
  .form-section-title {
    color: #9ca3af;
  }
  .form-section-title::after {
    background: #e5e7eb;
  }

  /* ═══ 20. PASSWORD STRENGTH ═══ */
  .strength-bar {
    background: #e5e7eb;
  }
  .strength-fill.weak {
    background: #dc2626;
  }
  .strength-fill.medium {
    background: #d97706;
  }
  .strength-fill.strong {
    background: #059669;
  }
  .strength-label {
    color: #9ca3af;
  }

  /* ═══ 21. SUCCESS STATE ═══ */
  .success-icon {
    background: rgba(5,150,105,0.08);
    border-color: rgba(5,150,105,0.2);
    color: #059669;
  }
  .success-steps {
    background: #fafbfc;
    border-color: #e5e7eb;
  }
  .success-steps h3 {
    color: #6b7280;
  }
  .success-step {
    color: #4b5563;
  }
  .step-num {
    background: rgba(79,110,247,0.1);
    color: #4f6ef7;
  }

  /* ═══ 24. WARNING BOX ═══ */
  .warning-box.purple {
    background: rgba(147,51,234,0.06);
    border-color: rgba(147,51,234,0.15);
  }
  .warning-box.yellow {
    background: rgba(217,119,6,0.06);
    border-color: rgba(217,119,6,0.15);
  }

  /* ═══ 26. APPROVAL NOTICE ═══ */
  .approval-notice {
    background: rgba(79,110,247,0.04);
    border-color: rgba(79,110,247,0.12);
  }
  .approval-notice .notice-icon {
    background: rgba(79,110,247,0.1);
    color: #4f6ef7;
  }
  .approval-notice .notice-text strong {
    color: #4f6ef7;
  }
  .approval-notice .notice-text p {
    color: #6b7280;
  }

  /* ═══ 27. FILTER BAR ═══ */
  .filter-bar {
    background: #ffffff;
    border-color: #e5e7eb;
  }

  /* ═══ 29. DIVIDER ═══ */
  .divider {
    background: #e5e7eb;
  }

  /* ═══ 30. SPINNER ═══ */
  .spinner {
    border-color: #e5e7eb;
    border-top-color: #4f6ef7;
  }
}