/*
 * dark-mode.css — Complete overhaul
 * Uses html.dark for maximum specificity over Tailwind CDN classes.
 * Covers: body, header, navbars, cards, inputs, buttons, badges,
 *         ticket cards (all 3 states), modals, action logs, message bubbles,
 *         forms, pagination, upload areas, SVG icon visibility.
 */

/* ═══════════════════════════════════════════════════════════════════════
   TOGGLE BUTTON (light + dark states — must always be visible)
   ═══════════════════════════════════════════════════════════════════════ */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1.5px solid #d1d5db;
  background: transparent;
  cursor: pointer;
  color: #374151;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.theme-toggle-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #111827;
}

html.dark .theme-toggle-btn {
  color: #e5e7eb;
  border-color: #4b5563;
  background: transparent;
}

html.dark .theme-toggle-btn:hover {
  background: #374151;
  border-color: #6b7280;
  color: #f9fafb;
}

html.dark body {
  background-color: #111827 !important;
  background-image: none !important;
  /* remove gradient on login page */
  color: #e5e7eb !important;
}

/* office-home uses bg-[#FFFEF2] */
html.dark body.bg-\[#FFFEF2\] {
  background-color: #111827 !important;
}

/* login uses gradient */
html.dark body.bg-gradient-to-br {
  background-color: #111827 !important;
  background-image: none !important;
}

/* debug uses bg-gray-100 */
html.dark body.bg-gray-100 {
  background-color: #060d18 !important;
}

GLOBAL TEXT COLOURS Override Tailwind text utilities — use html.dark for specificity ═══════════════════════════════════════════════════════════════════════ */ html.dark .text-black {
  color: #f9fafb !important;
}

html.dark .text-gray-900 {
  color: #f9fafb !important;
}

html.dark .text-gray-800 {
  color: #f3f4f6 !important;
}

html.dark .text-gray-700 {
  color: #e5e7eb !important;
}

html.dark .text-gray-600 {
  color: #d1d5db !important;
}

html.dark .text-gray-500 {
  color: #9ca3af !important;
}

html.dark .text-gray-400 {
  color: #6b7280 !important;
}

/* Coloured text in dark context */
html.dark .text-blue-900 {
  color: #bfdbfe !important;
}

html.dark .text-blue-800 {
  color: #93c5fd !important;
}

html.dark .text-blue-700 {
  color: #93c5fd !important;
}

html.dark .text-blue-600 {
  color: #60a5fa !important;
}

html.dark .text-purple-900 {
  color: #ede9fe !important;
}

html.dark .text-purple-600 {
  color: #c4b5fd !important;
}

html.dark .text-green-900 {
  color: #bbf7d0 !important;
}

html.dark .text-green-800 {
  color: #86efac !important;
}

html.dark .text-green-700 {
  color: #86efac !important;
}

html.dark .text-green-600 {
  color: #4ade80 !important;
}

html.dark .text-amber-800 {
  color: #fde68a !important;
}

html.dark .text-amber-600 {
  color: #fbbf24 !important;
}

html.dark .text-red-500 {
  color: #f87171 !important;
}

html.dark .text-red-600 {
  color: #f87171 !important;
}

/* Hover states that would go invisible */
html.dark .hover\:text-black:hover {
  color: #f9fafb !important;
}

html.dark .hover\:text-gray-900:hover {
  color: #f9fafb !important;
}

html.dark .hover\:text-gray-800:hover {
  color: #f3f4f6 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BACKGROUNDS
   ═══════════════════════════════════════════════════════════════════════ */
html.dark .bg-white {
  background-color: #1f2937 !important;
}

html.dark .bg-gray-50 {
  background-color: #111827 !important;
}

html.dark .bg-gray-100 {
  background-color: #1f2937 !important;
}

html.dark .bg-gray-200 {
  background-color: #374151 !important;
}

/* Colored state backgrounds — lighten to dark equivalents */
html.dark .bg-blue-50 {
  background-color: #1e3a5f !important;
}

html.dark .bg-blue-100 {
  background-color: #1e3a5f !important;
}

html.dark .bg-purple-50 {
  background-color: #2e1065 !important;
}

html.dark .bg-purple-100 {
  background-color: #2e1065 !important;
}

html.dark .bg-green-50 {
  background-color: #052e16 !important;
}

html.dark .bg-green-100 {
  background-color: #052e16 !important;
}

html.dark .bg-yellow-100 {
  background-color: #78350f !important;
}

html.dark .bg-yellow-50 {
  background-color: #78350f !important;
}

html.dark .bg-amber-50 {
  background-color: #78350f !important;
}

html.dark .bg-red-50 {
  background-color: #450a0a !important;
}

html.dark .bg-red-100 {
  background-color: #450a0a !important;
}

/* Hover backgrounds */
html.dark .hover\:bg-gray-50:hover {
  background-color: #374151 !important;
}

html.dark .hover\:bg-gray-100:hover {
  background-color: #374151 !important;
}

html.dark .hover\:bg-gray-200:hover {
  background-color: #4b5563 !important;
}

html.dark .hover\:bg-gray-300:hover {
  background-color: #4b5563 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BORDERS
   ═══════════════════════════════════════════════════════════════════════ */
html.dark .border-gray-100 {
  border-color: #374151 !important;
}

html.dark .border-gray-200 {
  border-color: #374151 !important;
}

html.dark .border-gray-300 {
  border-color: #4b5563 !important;
}

html.dark .border-t {
  border-color: #374151 !important;
}

html.dark .border-b {
  border-color: #374151 !important;
}

html.dark .divide-gray-200>*+* {
  border-color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER / NAVBAR
   ═══════════════════════════════════════════════════════════════════════ */
html.dark header {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

html.dark header h1,
html.dark header p,
html.dark header span {
  color: #f9fafb !important;
}

/* All buttons and links in header default to light text */
html.dark header button:not(.bg-primary):not(.bg-green-600):not(.bg-blue-600):not(.theme-toggle-btn),
html.dark header a:not(.bg-primary):not(.bg-green-600) {
  color: #d1d5db !important;
}

html.dark header button:not(.bg-primary):not(.bg-green-600):not(.bg-blue-600):not(.theme-toggle-btn):hover,
html.dark header a:not(.bg-primary):not(.bg-green-600):hover {
  color: #f9fafb !important;
  background-color: #374151 !important;
}

/* Keep primary/action button text dark */
html.dark header .bg-primary,
html.dark header .bg-green-600,
html.dark header .bg-blue-600 {
  color: #000 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CARDS & PANELS
   ═══════════════════════════════════════════════════════════════════════ */
html.dark .bg-white.rounded-lg,
html.dark .bg-white.rounded-xl,
html.dark .bg-white.shadow-md,
html.dark .bg-white.shadow-sm,
html.dark .bg-white.shadow-xl,
html.dark .bg-white.shadow-2xl,
html.dark .bg-white.p-6,
html.dark .bg-white.p-8,
html.dark .bg-white.p-4,
html.dark .bg-white {
  background-color: #1f2937 !important;
}

/* Stat card specific bg overrides */
html.dark div[data-status-filter="Open"].bg-blue-50 {
  background-color: #1e3a5f !important;
}

html.dark div[data-status-filter="In Progress"].bg-purple-50 {
  background-color: #2e1065 !important;
}

html.dark div[data-status-filter="Resolved"].bg-green-50 {
  background-color: #052e16 !important;
}

html.dark div[data-status-filter="Closed"].bg-gray-100 {
  background-color: #1f2937 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   STATUS BADGE PILLS (bg-*-100 text-*-800 pattern)
   ═══════════════════════════════════════════════════════════════════════ */
html.dark .bg-blue-100.text-blue-800 {
  background-color: #1e3a5f !important;
  color: #93c5fd !important;
}

html.dark .bg-purple-100.text-purple-800 {
  background-color: #2e1065 !important;
  color: #c4b5fd !important;
}

html.dark .bg-yellow-100.text-yellow-800 {
  background-color: #78350f !important;
  color: #fde68a !important;
}

html.dark .bg-green-100.text-green-800 {
  background-color: #052e16 !important;
  color: #86efac !important;
}

html.dark .bg-gray-100.text-gray-800 {
  background-color: #374151 !important;
  color: #d1d5db !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   INPUTS, SELECTS, TEXTAREAS
   ═══════════════════════════════════════════════════════════════════════ */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #111827 !important;
  color: #f3f4f6 !important;
  border-color: #4b5563 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #6b7280 !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #FFD700 !important;
  outline: none !important;
}

html.dark input[readonly] {
  background-color: #1f2937 !important;
  color: #9ca3af !important;
}

/* Select option text in dark mode */
html.dark option {
  background-color: #1f2937;
  color: #f3f4f6;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS — GENERIC SECONDARY / OUTLINE / GHOST
   ═══════════════════════════════════════════════════════════════════════ */
/* Cancel / outline white buttons */
html.dark button.bg-white,
html.dark a.bg-white {
  background-color: #374151 !important;
  color: #f3f4f6 !important;
  border-color: #4b5563 !important;
}

html.dark button.bg-white:hover,
html.dark a.bg-white:hover {
  background-color: #4b5563 !important;
}

/* Gray buttons (cancel, clear) */
html.dark .bg-gray-200 {
  background-color: #374151 !important;
  color: #f3f4f6 !important;
}

/* Clear filters / text-only buttons */
html.dark button.text-gray-600:not(.bg-primary):not(.bg-green-600) {
  color: #d1d5db !important;
}

html.dark button.text-gray-600:not(.bg-primary):not(.bg-green-600):hover {
  color: #f9fafb !important;
  background-color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   VIEW TOGGLE (Grid / List)
   ═══════════════════════════════════════════════════════════════════════ */
html.dark #view-toggle {
  background-color: #1f2937 !important;
}

html.dark #view-list {
  color: #d1d5db !important;
}

html.dark #view-list:hover {
  background-color: #374151 !important;
  color: #f9fafb !important;
}

html.dark #view-grid:not(.bg-primary) {
  color: #d1d5db !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LABELS (forms)
   ═══════════════════════════════════════════════════════════════════════ */
html.dark label {
  color: #e5e7eb !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TICKET CARDS — Three states
   ═══════════════════════════════════════════════════════════════════════ */
/* State: NEW (green border) */
html.dark .bg-green-50.border-green-300 {
  background-color: #052e16 !important;
  border-color: #166534 !important;
}

html.dark .bg-green-50.border-green-300 .text-green-900 {
  color: #bbf7d0 !important;
}

html.dark .bg-green-50.border-green-300 .text-green-800 {
  color: #86efac !important;
}

html.dark .bg-green-50.border-green-300 .text-green-700 {
  color: #86efac !important;
}

html.dark .bg-green-50.border-green-300 .text-green-600 {
  color: #4ade80 !important;
}

html.dark .bg-green-50.border-green-300 .border-green-100 {
  border-color: #166534 !important;
}

html.dark .bg-green-50.border-green-300 .bg-green-600 {
  background-color: #15803d !important;
}

/* State: UNREAD (blue border) */
html.dark .bg-blue-50.border-blue-200 {
  background-color: #0f2744 !important;
  border-color: #1d4ed8 !important;
}

html.dark .bg-blue-50.border-blue-200 .text-blue-900 {
  color: #bfdbfe !important;
}

html.dark .bg-blue-50.border-blue-200 .text-blue-800 {
  color: #93c5fd !important;
}

html.dark .bg-blue-50.border-blue-200 .text-blue-700 {
  color: #93c5fd !important;
}

html.dark .bg-blue-50.border-blue-200 .text-blue-600 {
  color: #60a5fa !important;
}

html.dark .bg-blue-50.border-blue-200 .border-blue-100 {
  border-color: #1d4ed8 !important;
}

/* Description preview boxes inside ALL ticket cards */
html.dark .bg-gray-50.border-gray-200 {
  background-color: #111827 !important;
  border-color: #374151 !important;
}

html.dark .bg-green-50.border-green-300 .bg-green-50 {
  background-color: #052e16 !important;
}

html.dark .bg-blue-50.border-blue-200 .bg-blue-50 {
  background-color: #0f2744 !important;
}

/* Pulse dot for new ticket (green) inside dark card */
html.dark .bg-green-50.border-green-300 .bg-green-600.rounded-full {
  background-color: #16a34a !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════════ */
html.dark .bg-white.rounded-xl.shadow-2xl,
html.dark .bg-white.rounded-xl {
  background-color: #1f2937 !important;
  color: #e5e7eb !important;
}

/* Modal header / footer dividers */
html.dark .border-b.border-gray-200 {
  border-color: #374151 !important;
}

html.dark .border-t.border-gray-200 {
  border-color: #374151 !important;
}

/* Modal footer */
html.dark .bg-gray-50.rounded-b-xl {
  background-color: #111827 !important;
  border-color: #374151 !important;
}

/* Icon circle in modal headers */
html.dark .bg-green-100.rounded-lg {
  background-color: #052e16 !important;
}

html.dark .bg-gray-700.rounded-lg {
  background-color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   INFO / WARNING / HIGHLIGHT BOXES
   ═══════════════════════════════════════════════════════════════════════ */
html.dark .bg-blue-50.border-blue-200 {
  background-color: #172554 !important;
  border-color: #1e40af !important;
}

html.dark .bg-green-50.border-green-200 {
  background-color: #052e16 !important;
  border-color: #166534 !important;
}

html.dark .bg-amber-50.border-amber-200 {
  background-color: #451a03 !important;
  border-color: #92400e !important;
}

html.dark .bg-amber-50 .text-amber-800 {
  color: #fde68a !important;
}

html.dark .bg-amber-50 .text-amber-600 {
  color: #fbbf24 !important;
}

html.dark .bg-blue-50 .text-blue-800 {
  color: #93c5fd !important;
}

html.dark .bg-blue-50 .text-blue-700 {
  color: #93c5fd !important;
}

html.dark .bg-green-50 .text-green-800 {
  color: #86efac !important;
}

html.dark .bg-green-50 .text-green-700 {
  color: #86efac !important;
}

/* Admin-home custom date range panel */
html.dark #custom-date-range {
  background-color: #111827 !important;
  border-color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ACTION LOGS
   ═══════════════════════════════════════════════════════════════════════ */
html.dark .bg-blue-50.rounded-lg {
  background-color: #172554 !important;
}

html.dark .bg-gray-50.rounded-lg {
  background-color: #1f2937 !important;
}

/* SVG icons in action logs */
html.dark .bg-blue-50.rounded-lg svg {
  color: #93c5fd !important;
}

html.dark .bg-gray-50.rounded-lg svg {
  color: #9ca3af !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TICKET VIEW — MESSAGE BUBBLES
   ═══════════════════════════════════════════════════════════════════════ */
/* Incoming messages (bg-gray-100) */
html.dark .bg-gray-100.text-gray-900 {
  background-color: #374151 !important;
  color: #f3f4f6 !important;
}

/* Message form border */
html.dark #message-form .border-t {
  border-color: #374151 !important;
}

html.dark #message-form label {
  color: #e5e7eb !important;
}

/* Attachment file cards inside messages */
html.dark .bg-white.rounded-lg.border-gray-200 {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TICKET VIEW — SIDEBAR SECTIONS
   ═══════════════════════════════════════════════════════════════════════ */
html.dark .sidebar-height {
  background-color: transparent !important;
}

/* Ticket detail card in sidebar — inner dividers */
html.dark .border-b {
  border-color: #374151 !important;
}

html.dark .border-t {
  border-color: #374151 !important;
}

/* Description box inside sidebar */
html.dark .bg-gray-50.px-4.py-3.rounded-lg {
  background-color: #111827 !important;
  border-color: #374151 !important;
}

html.dark #description {
  color: #d1d5db !important;
}

html.dark #submitter-info,
html.dark #submission-date,
html.dark #assigned-to,
html.dark #last-update {
  color: #d1d5db !important;
}

/* Scrollbar */
html.dark .sidebar-height::-webkit-scrollbar-track {
  background: #1f2937;
}

html.dark .sidebar-height::-webkit-scrollbar-thumb {
  background: #4b5563;
}

html.dark .sidebar-height::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* ═══════════════════════════════════════════════════════════════════════
   TICKET VIEW — CLOSED ADMIN NOTICE
   ═══════════════════════════════════════════════════════════════════════ */
html.dark #closed-admin-notice {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
  color: #9ca3af !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TICKET VIEW — RESOLUTION MODAL SPECIFICS
   ═══════════════════════════════════════════════════════════════════════ */
html.dark #resolution-modal .bg-green-50.border-green-200 {
  background-color: #052e16 !important;
  border-color: #166534 !important;
}

html.dark #resolution-modal #solution-summary {
  color: #86efac !important;
}

html.dark #resolution-step-2 .bg-green-50 {
  background-color: #052e16 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SVG ICONS — global currentColor fix
   Tailwind's default SVG icons use stroke="currentColor" so they
   inherit whatever text color is on their ancestor. Making sure
   those ancestors have light text covers most icons automatically.
   The below handles exceptions that are hardcoded.
   ═══════════════════════════════════════════════════════════════════════ */
/* Gray upload icon */
html.dark #upload-area svg {
  color: #9ca3af !important;
}

/* Back arrow, logout icon in ticket-view header */
html.dark header svg {
  color: inherit !important;
}

/* Search, filter, clock icons that sit alone */
html.dark svg.text-gray-400 {
  color: #6b7280 !important;
}

html.dark svg.text-gray-300 {
  color: #4b5563 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════════════ */
html.dark #pagination-controls button,
html.dark #pagination-container button {
  background-color: #1f2937 !important;
  color: #d1d5db !important;
  border-color: #374151 !important;
}

html.dark #pagination-controls button.bg-primary,
html.dark #pagination-container button.bg-primary {
  background-color: #FFD700 !important;
  color: #000 !important;
}

html.dark #pagination-controls button:hover:not(:disabled):not(.bg-primary),
html.dark #pagination-container button:hover:not(:disabled):not(.bg-primary) {
  background-color: #374151 !important;
  color: #f9fafb !important;
}

html.dark #pagination-controls button:disabled,
html.dark #pagination-container button:disabled {
  background-color: #111827 !important;
  color: #4b5563 !important;
}

html.dark #page-info {
  color: #9ca3af !important;
}

html.dark #results-info {
  color: #9ca3af !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════ */
html.dark #empty-state {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SHADOWS — deeper in dark
   ═══════════════════════════════════════════════════════════════════════ */
html.dark .shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

html.dark .shadow-md {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
}

html.dark .shadow-lg {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
}

html.dark .shadow-xl {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

html.dark .shadow-2xl {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCROLLBAR (webkit global)
   ═══════════════════════════════════════════════════════════════════════ */
html.dark ::-webkit-scrollbar-track {
  background: #1f2937;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #4b5563;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN PAGE — OFFICE CARD
   ═══════════════════════════════════════════════════════════════════════ */
/* Office card — clearly elevated surface + gold top accent + visible border */
html.dark #office-login-card {
  background-color: #1e293b !important;
  /* slate-800 — noticeably lighter than body */
  border: 2px solid #4b5563 !important;
  border-top: 3px solid #FFD700 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

html.dark #office-login-card label {
  color: #e5e7eb !important;
}

/* Tab switcher container */
html.dark .inline-flex.bg-white.rounded-lg.shadow-md {
  background-color: #1f2937 !important;
}

html.dark #tab-office:not(.bg-primary),
html.dark #tab-admin:not(.bg-primary) {
  color: #9ca3af !important;
}

html.dark #tab-office.bg-primary,
html.dark #tab-admin.bg-primary {
  color: #000 !important;
}

/* Login hero text */
html.dark .container h1.text-gray-900 {
  color: #f9fafb !important;
}

html.dark .container p.text-gray-600 {
  color: #d1d5db !important;
}

html.dark .container h1.text-3xl {
  color: #f9fafb !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN PAGE — ADMIN CARD (card-admin class) — DANGER RED THEME
   Signals clearly: restricted access, authorised personnel only.
   ═══════════════════════════════════════════════════════════════════════ */

/* LIGHT MODE — deep crimson card */
#admin-login-card.card-admin {
  background: linear-gradient(145deg, #7f1d1d 0%, #991b1b 60%, #7f1d1d 100%);
  color: #fef2f2;
  border: 2px solid #b91c1c;
  border-top: 4px solid #ef4444;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.25),
    0 8px 32px rgba(127, 29, 29, 0.45);
}

#admin-login-card.card-admin h2 {
  color: #fef2f2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

#admin-login-card.card-admin p {
  color: #fca5a5;
}

#admin-login-card.card-admin label {
  color: #fecaca;
}

#admin-login-card.card-admin input {
  background-color: #450a0a;
  border: 2px solid #b91c1c;
  color: #fef2f2;
}

#admin-login-card.card-admin input::placeholder {
  color: #f87171;
  opacity: 0.6;
}

#admin-login-card.card-admin input:focus {
  border-color: #fca5a5;
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.25);
  outline: none;
}

/* Icon circle — keep dark for contrast */
#admin-login-card.card-admin .w-16.h-16.rounded-full {
  background-color: #450a0a !important;
}

/* DARK MODE — near-black deep red with vivid red edge */
html.dark #admin-login-card.card-admin {
  background: linear-gradient(145deg, #1c0a0a 0%, #2d0d0d 60%, #1c0a0a 100%) !important;
  color: #fef2f2 !important;
  border: 2px solid #dc2626 !important;
  border-top: 4px solid #ef4444 !important;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.20),
    0 0 24px rgba(220, 38, 38, 0.18),
    0 8px 32px rgba(0, 0, 0, 0.75) !important;
}

html.dark #admin-login-card.card-admin h2 {
  color: #fef2f2 !important;
}

html.dark #admin-login-card.card-admin p {
  color: #fca5a5 !important;
}

html.dark #admin-login-card.card-admin label {
  color: #fecaca !important;
}

html.dark #admin-login-card.card-admin input {
  background-color: #0c0404 !important;
  border: 2px solid #7f1d1d !important;
  color: #fef2f2 !important;
}

html.dark #admin-login-card.card-admin input::placeholder {
  color: #f87171 !important;
  opacity: 0.5;
}

html.dark #admin-login-card.card-admin input:focus {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.20) !important;
}

html.dark #admin-login-card.card-admin .w-16.h-16.rounded-full {
  background-color: #450a0a !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CREATE TICKET PAGE
   ═══════════════════════════════════════════════════════════════════════ */
html.dark #ticket-form {
  background-color: #1f2937 !important;
}

html.dark #upload-area {
  border-color: #4b5563 !important;
  background-color: transparent !important;
}

html.dark #upload-area:hover {
  border-color: #FFD700 !important;
}

html.dark #image-preview {
  background-color: transparent !important;
}

/* Back link */
html.dark a.text-primary {
  color: #FFD700 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   OFFICE-HOME — specific body bg
   ═══════════════════════════════════════════════════════════════════════ */
html.dark body.bg-\[#FFFEF2\] {
  background-color: #111827 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN-HOME — FILTER PANEL & ITEMS PER PAGE
   ═══════════════════════════════════════════════════════════════════════ */
html.dark #search-input,
html.dark #office-filter,
html.dark #status-filter,
html.dark #sort-select,
html.dark #items-per-page-select {
  background-color: #111827 !important;
  color: #f3f4f6 !important;
  border-color: #4b5563 !important;
}

html.dark .text-gray-600.text-sm {
  color: #9ca3af !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   EXPORT / IMPORT MODAL
   ═══════════════════════════════════════════════════════════════════════ */
html.dark #export-modal .bg-white {
  background-color: #1f2937 !important;
}

html.dark #export-modal select,
html.dark #export-modal input[type="date"] {
  background-color: #111827 !important;
  border-color: #4b5563 !important;
  color: #f3f4f6 !important;
}

html.dark #export-modal #cancel-export {
  background-color: #374151 !important;
  color: #f3f4f6 !important;
  border-color: #4b5563 !important;
}

html.dark #custom-date-range {
  background-color: #1f2937 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SUCCESS MODAL (create-ticket)
   ═══════════════════════════════════════════════════════════════════════ */
html.dark #success-modal .bg-white {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

html.dark #success-modal h3 {
  color: #f9fafb !important;
}

html.dark #success-modal p {
  color: #d1d5db !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOADING SPINNER OVERLAY
   ═══════════════════════════════════════════════════════════════════════ */
html.dark #loading-spinner .bg-white,
html.dark #loading-overlay .bg-white {
  background-color: #1f2937 !important;
}

html.dark #loading-spinner p,
html.dark #loading-overlay p {
  color: #e5e7eb !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ITEMS PER PAGE — label text  
   ═══════════════════════════════════════════════════════════════════════ */
html.dark .flex.items-center.gap-2>span.text-gray-600 {
  color: #9ca3af !important;
}

html.dark .flex.items-center.gap-2>label.text-gray-700 {
  color: #e5e7eb !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION — Dividers & Ghost Logout Buttons
   ═══════════════════════════════════════════════════════════════════════ */

/* Vertical divider in all nav bars */
html.dark header .w-px.bg-gray-200 {
  background-color: #374151 !important;
}

/* Ghost logout / secondary nav button — consistent across all pages */
html.dark header button.text-gray-500,
html.dark header a.text-gray-600 {
  color: #9ca3af !important;
}

html.dark header button.text-gray-500:hover,
html.dark header a.text-gray-600:hover {
  color: #f9fafb !important;
  background-color: #374151 !important;
}

/* Back nav link in ticket-view and create-ticket */
html.dark header a.flex.items-center.gap-2 {
  color: #9ca3af !important;
}

html.dark header a.flex.items-center.gap-2:hover {
  color: #f9fafb !important;
  background-color: transparent !important;
}

/* New Ticket icon pill in create-ticket header */
html.dark header .bg-primary.rounded-md {
  background-color: #FFD700 !important;
}

html.dark header span.text-gray-700 {
  color: #d1d5db !important;
}

/* ── Back nav ghost pill button ──────────────────────────────────────── */
html.dark header a#back-link,
html.dark header a[href="./office-home.html"].inline-flex {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #d1d5db !important;
}

html.dark header a#back-link:hover,
html.dark header a[href="./office-home.html"].inline-flex:hover {
  background-color: #4b5563 !important;
  color: #f9fafb !important;
}