/* assets/theme.css */

/* ===========================
   Light (Default)
   =========================== */
:root {
  /* Brand */
  --bs-primary: #7c3aed;          /* Purple */
  --bs-primary-rgb: 124,58,237;
  --bs-secondary: #6b7280;        /* Slate */
  --bs-secondary-rgb: 107,114,128;

  /* Feedback */
  --bs-success: #10b981;          /* Emerald */
  --bs-info:    #06b6d4;          /* Cyan */
  --bs-warning: #f59e0b;          /* Amber */
  --bs-danger:  #ef4444;          /* Red */

  /* Surfaces */
  --bs-body-bg:    #f8f9fa;       /* light background */
  --bs-body-color: #1f2937;       /* slate-800 text */
  --bs-border-color: #e5e7eb;     /* light borders */

  /* Links */
  --bs-link-color:       var(--bs-primary);
  --bs-link-hover-color: #6d28d9;

  /* Components */
  --card-bg: #ffffff;
  --nav-bg:  #ffffff;
}

/* Global light polish */
body { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
.card { background: var(--card-bg); }
.navbar { background: var(--nav-bg) !important; }
.badge.bg-primary { background-color: var(--bs-primary) !important; }
.btn-dark { background:#111827; border-color:#111827; }

/* ===========================
   Midnight (Dark Cyan)
   =========================== */
html[data-theme="midnight"] {
  --bs-primary: #06b6d4;              /* Cyan */
  --bs-primary-rgb: 6,182,212;
  --bs-secondary: #94a3b8;
  --bs-secondary-rgb: 148,163,184;

  --bs-success: #22c55e;
  --bs-info:    #38bdf8;
  --bs-warning: #f59e0b;
  --bs-danger:  #ef4444;

  --bs-body-bg:    #0b1220;           /* page bg */
  --bs-body-color: #ffffff;           /* text */
  --bs-border-color:#233044;          /* borders */

  --bs-secondary-color: #d1d5db;      /* muted/helper */
  --bs-secondary-color-rgb: 209,213,219;

  --bs-link-color:       #67e8f9;
  --bs-link-hover-color: #22d3ee;

  --card-bg: #111827;                 /* card */
  --nav-bg:  #0f172a;                 /* navbar */
}

/* ===========================
   Garnet Night (Dark Deep Red - cool)
   =========================== */
html[data-theme="garnet"] {
  --bs-primary: #A61B29;              /* Garnet */
  --bs-primary-rgb: 166,27,41;
  --bs-secondary: #9aa3ab;            /* cool grey */
  --bs-secondary-rgb: 154,163,171;

  --bs-success: #22c55e;
  --bs-info:    #38bdf8;
  --bs-warning: #f59e0b;
  --bs-danger:  #F43F5E;              /* distinct from brand */

  --bs-body-bg:    #0F0A0B;           /* page */
  --bs-body-color: #ffffff;           /* text */
  --bs-border-color:#2B1C1F;          /* borders */

  --bs-secondary-color: #D8DCE1;      /* muted/helper */
  --bs-secondary-color-rgb: 216,220,225;

  --bs-link-color:       #FF6B6B;     /* coral links */
  --bs-link-hover-color: #FF8585;

  --card-bg: #191214;                 /* card */
  --nav-bg:  #191214;                 /* navbar */
}

/* ===========================
   Crimson Ember (Dark Deep Red - warm)
   =========================== */
html[data-theme="crimson"] {
  --bs-primary: #C81E2A;              /* Crimson */
  --bs-primary-rgb: 200,30,42;
  --bs-secondary: #b8aeb0;            /* warm grey */
  --bs-secondary-rgb: 184,174,176;

  --bs-success: #22c55e;
  --bs-info:    #60A5FA;
  --bs-warning: #f59e0b;
  --bs-danger:  #EF4444;

  --bs-body-bg:    #120A0A;           /* page */
  --bs-body-color: #ffffff;           /* text */
  --bs-border-color:#2E191B;          /* borders */

  --bs-secondary-color: #E5D9DB;      /* muted/helper */
  --bs-secondary-color-rgb: 229,217,219;

  --bs-link-color:       #FF5A67;
  --bs-link-hover-color: #FF838C;

  --card-bg: #1A0F10;                 /* card */
  --nav-bg:  #1A0F10;                 /* navbar */
}

/* ===========================
   Shared tweaks for all dark themes
   =========================== */
html[data-theme="midnight"] .navbar,
html[data-theme="garnet"]   .navbar,
html[data-theme="crimson"]  .navbar,
html[data-theme="midnight"] .navbar .navbar-brand,
html[data-theme="garnet"]   .navbar .navbar-brand,
html[data-theme="crimson"]  .navbar .navbar-brand,
html[data-theme="midnight"] .navbar .nav-link,
html[data-theme="garnet"]   .navbar .nav-link,
html[data-theme="crimson"]  .navbar .nav-link { color:#ffffff !important; }

html[data-theme="midnight"] .navbar .nav-link:hover,
html[data-theme="garnet"]   .navbar .nav-link:hover,
html[data-theme="crimson"]  .navbar .nav-link:hover,
html[data-theme="midnight"] .navbar .nav-link:focus,
html[data-theme="garnet"]   .navbar .nav-link:focus,
html[data-theme="crimson"]  .navbar .nav-link:focus { color: var(--bs-link-color) !important; }

html[data-theme="midnight"] .navbar .navbar-toggler,
html[data-theme="garnet"]   .navbar .navbar-toggler,
html[data-theme="crimson"]  .navbar .navbar-toggler { border-color: rgba(255,255,255,.25); }
html[data-theme="midnight"] .navbar .navbar-toggler-icon,
html[data-theme="garnet"]   .navbar .navbar-toggler-icon,
html[data-theme="crimson"]  .navbar .navbar-toggler-icon { filter: invert(1) brightness(1.8); }

/* Headings & titles */
html[data-theme="midnight"] h1, html[data-theme="midnight"] h2, html[data-theme="midnight"] h3,
html[data-theme="midnight"] h4, html[data-theme="midnight"] h5, html[data-theme="midnight"] h6,
html[data-theme="midnight"] .card-title, html[data-theme="midnight"] .modal-title,
html[data-theme="garnet"]   h1, html[data-theme="garnet"]   h2, html[data-theme="garnet"]   h3,
html[data-theme="garnet"]   h4, html[data-theme="garnet"]   h5, html[data-theme="garnet"]   h6,
html[data-theme="garnet"]   .card-title, html[data-theme="garnet"]   .modal-title,
html[data-theme="crimson"]  h1, html[data-theme="crimson"]  h2, html[data-theme="crimson"]  h3,
html[data-theme="crimson"]  h4, html[data-theme="crimson"]  h5, html[data-theme="crimson"]  h6,
html[data-theme="crimson"]  .card-title, html[data-theme="crimson"]  .modal-title { color:#ffffff !important; }

/* Make muted/helper text readable */
html[data-theme="midnight"] .text-muted, html[data-theme="midnight"] .form-text, html[data-theme="midnight"] .small,
html[data-theme="garnet"]   .text-muted, html[data-theme="garnet"]   .form-text, html[data-theme="garnet"]   .small,
html[data-theme="crimson"]  .text-muted, html[data-theme="crimson"]  .form-text, html[data-theme="crimson"]  .small {
  color: var(--bs-secondary-color) !important;
}

/* Map any "white/light" surfaces to theme card color to avoid glare */
html[data-theme="midnight"] .bg-white, html[data-theme="midnight"] .text-bg-light,
html[data-theme="garnet"]   .bg-white, html[data-theme="garnet"]   .text-bg-light,
html[data-theme="crimson"]  .bg-white, html[data-theme="crimson"]  .text-bg-light,
html[data-theme="midnight"] .card.bg-white, html[data-theme="midnight"] .modal-content.bg-white,
html[data-theme="garnet"]   .card.bg-white, html[data-theme="garnet"]   .modal-content.bg-white,
html[data-theme="crimson"]  .card.bg-white, html[data-theme="crimson"]  .modal-content.bg-white {
  background-color: var(--card-bg) !important;
  color:#ffffff !important;
}

/* Lists & tables */
html[data-theme="midnight"] .list-group-item,
html[data-theme="garnet"]   .list-group-item,
html[data-theme="crimson"]  .list-group-item {
  background: transparent;
  color:#ffffff;
  border-color:#1f2937;
}
html[data-theme="midnight"] .table,
html[data-theme="garnet"]   .table,
html[data-theme="crimson"]  .table {
  --bs-table-color:#ffffff;
  --bs-table-border-color:#1f2937;
}

/* Forms */
html[data-theme="midnight"] label.form-label,
html[data-theme="garnet"]   label.form-label,
html[data-theme="crimson"]  label.form-label { color:#ffffff; }

html[data-theme="midnight"] .form-control, html[data-theme="midnight"] .form-select,
html[data-theme="garnet"]   .form-control, html[data-theme="garnet"]   .form-select,
html[data-theme="crimson"]  .form-control, html[data-theme="crimson"]  .form-select {
  background-color: var(--bs-body-bg);
  color:#e5e7eb;
  border-color:#334155;
}
html[data-theme="midnight"] .form-control:focus, html[data-theme="midnight"] .form-select:focus,
html[data-theme="garnet"]   .form-control:focus, html[data-theme="garnet"]   .form-select:focus,
html[data-theme="crimson"]  .form-control:focus, html[data-theme="crimson"]  .form-select:focus {
  background-color: var(--bs-body-bg);
  color:#ffffff;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
html[data-theme="midnight"] .form-control::placeholder,
html[data-theme="garnet"]   .form-control::placeholder,
html[data-theme="crimson"]  .form-control::placeholder { color:#c0c9d4; }

/* Badges */
html[data-theme="midnight"] .badge.bg-secondary,
html[data-theme="garnet"]   .badge.bg-secondary,
html[data-theme="crimson"]  .badge.bg-secondary {
  background-color:#334155 !important;
  color:#e5e7eb !important;
}

/* Outline buttons – theme-aware */
html[data-theme="midnight"] .btn-outline-primary,
html[data-theme="garnet"]   .btn-outline-primary,
html[data-theme="crimson"]  .btn-outline-primary {
  color: var(--bs-link-color);
  border-color: var(--bs-primary);
}
html[data-theme="midnight"] .btn-outline-primary:hover {
  background: var(--bs-primary); border-color: var(--bs-primary); color:#0b1220;
}
html[data-theme="garnet"] .btn-outline-primary:hover,
html[data-theme="crimson"] .btn-outline-primary:hover {
  background: var(--bs-primary); border-color: var(--bs-primary); color:#ffffff;
}

/* Danger / Secondary outline in dark */
html[data-theme="midnight"] .btn-outline-danger,
html[data-theme="garnet"]   .btn-outline-danger,
html[data-theme="crimson"]  .btn-outline-danger {
  color:#fca5a5; border-color:#ef4444;
}
html[data-theme="midnight"] .btn-outline-danger:hover,
html[data-theme="garnet"]   .btn-outline-danger:hover,
html[data-theme="crimson"]  .btn-outline-danger:hover {
  background:#ef4444; border-color:#ef4444; color:#ffffff;
}
html[data-theme="midnight"] .btn-outline-secondary,
html[data-theme="garnet"]   .btn-outline-secondary,
html[data-theme="crimson"]  .btn-outline-secondary {
  color: var(--bs-secondary-color); border-color:#475569;
}
html[data-theme="midnight"] .btn-outline-secondary:hover,
html[data-theme="garnet"]   .btn-outline-secondary:hover,
html[data-theme="crimson"]  .btn-outline-secondary:hover {
  background:#1f2937; border-color:#64748b; color:#ffffff;
}

/* Utilities forcing dark text -> white in dark themes */
html[data-theme="midnight"] .text-dark,
html[data-theme="garnet"]   .text-dark,
html[data-theme="crimson"]  .text-dark,
html[data-theme="midnight"] .link-dark,
html[data-theme="garnet"]   .link-dark,
html[data-theme="crimson"]  .link-dark { color:#ffffff !important; }
html[data-theme="midnight"] a.link-dark:hover,
html[data-theme="garnet"]   a.link-dark:hover,
html[data-theme="crimson"]  a.link-dark:hover { color: var(--bs-link-color) !important; }

/* ===== Dark themes: fix striped table text + header contrast ===== */
html[data-theme="midnight"] .table,
html[data-theme="garnet"]   .table,
html[data-theme="crimson"]  .table {
  --bs-table-color: #ffffff;
  --bs-table-bg: transparent;
  --bs-table-border-color: #1f2937;

  /* Ensure striped/hover rows keep light text */
  --bs-table-striped-color: #ffffff;
  --bs-table-striped-bg: rgba(255,255,255,0.05);
  --bs-table-hover-color:   #ffffff;
  --bs-table-hover-bg:      rgba(255,255,255,0.08);
  --bs-table-active-color:  #ffffff;
  --bs-table-active-bg:     rgba(255,255,255,0.12);
}

/* Table headers readable on dark */
html[data-theme="midnight"] .table thead th,
html[data-theme="garnet"]   .table thead th,
html[data-theme="crimson"]  .table thead th {
  color: #ffffff;
}

/* ===== Dark themes: date picker icon & control ===== */
html[data-theme="midnight"] input[type="date"],
html[data-theme="garnet"]   input[type="date"],
html[data-theme="crimson"]  input[type="date"] {
  /* Tell the browser to style the native control for dark UIs (Firefox/Chromium) */
  color-scheme: dark;
}

/* Make the calendar icon light on WebKit (Chrome/Edge/Safari) */
html[data-theme="midnight"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="garnet"]   input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="crimson"]  input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  opacity: 0.9;
}

/* ===== Dark themes: force a white calendar icon on date inputs ===== */
html[data-theme="midnight"] input[type="date"],
html[data-theme="garnet"]   input[type="date"],
html[data-theme="crimson"]  input[type="date"] {
  color-scheme: dark; /* dark-friendly native UI where supported */
  /* Add our own white calendar icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 2a1 1 0 0 0-1 1v1H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3h-1V3a1 1 0 1 0-2 0v1H8V3a1 1 0 0 0-1-1zm12 6H5v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1rem;
  padding-right: 2.25rem; /* keep text clear of the icon */
}

/* Hide the native WebKit indicator but keep it clickable */
html[data-theme="midnight"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="garnet"]   input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="crimson"]  input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;             /* visually hidden */
}

/* Firefox sometimes tints the icon area; ensure transparency */
@supports (-moz-appearance: none) {
  html[data-theme="midnight"] input[type="date"],
  html[data-theme="garnet"]   input[type="date"],
  html[data-theme="crimson"]  input[type="date"] {
    background-color: transparent;
  }
}