/*
 * ICAM Abacus — Django Unfold portal-style admin theme.
 * Color tokens: /admin/theme-vars.css (database-driven).
 *
 * Fonts are loaded by Unfold via /static/unfold/fonts/ (see base templates).
 * Do not @import Google Fonts here — it blocks first paint on slow networks.
 */

/* ── Global typography & canvas ─────────────────────────────────────────── */
html,
body,
#page,
#container,
.unfold-admin,
#nav-sidebar-inner,
#main,
input,
select,
textarea,
button {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

body,
#page {
  background: var(--admin-background, #f3fcfa) !important;
  color: var(--admin-foreground, #0a2036) !important;
}

/* Workspace canvas — cool neutral, clearly separate from the nav rail */
#main,
#main.bg-white,
.dark #main,
#content {
  background: var(--admin-background, #f3fcfa) !important;
}

/* Sidebar — see static/admin/themes/sidebar.css + sidebar.js */

/* ── Top header bar ─────────────────────────────────────────────────────── */
header,
.unfold-header,
[class*="header"] .bg-white {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    var(--admin-sidebar, #f0fbf9) 55%,
    var(--admin-accent-soft, #daf6ee) 100%
  ) !important;
  border-bottom: 1px solid var(--admin-border, #d3e6e6) !important;
  box-shadow: var(--admin-card-shadow) !important;
}

#content h1,
#content-main h1,
header h1 {
  color: var(--admin-foreground) !important;
  font-weight: 800 !important;
}

/* ── Admin index module cards (Site administration) ───────────────────────── */
.module > .bg-base-50,
.app-list .module .bg-base-50,
#content-main .module .bg-base-50 {
  background: color-mix(in oklch, white, transparent 0%) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: var(--admin-radius) !important;
  box-shadow: var(--admin-card-shadow) !important;
  padding: 0.85rem !important;
}

.module:not(.calendarbox):not(.clockbox) table,
#content-main .module:not(.calendarbox):not(.clockbox) table {
  border: 1px solid var(--admin-border) !important;
  border-radius: var(--admin-radius) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  background: white !important;
}

.module caption,
.module caption a.section {
  color: var(--admin-foreground) !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  margin-bottom: 0.35rem !important;
}

.module th a,
.module td a.addlink {
  color: var(--admin-primary) !important;
  font-weight: 700 !important;
}

.module tr.bg-white {
  background: white !important;
}

.module:not(.calendarbox):not(.clockbox) th,
.module:not(.calendarbox):not(.clockbox) td {
  border-color: color-mix(in oklch, var(--admin-border), white 30%) !important;
  padding: 0.65rem 0.85rem !important;
}

/* ── Forms & changelist tables ──────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea,
.vTextField,
.vURLField,
.vLargeTextField,
.unfold-admin input,
.unfold-admin select,
.unfold-admin textarea {
  border-radius: var(--admin-radius) !important;
  border-color: var(--admin-border) !important;
  background: white !important;
  color: var(--admin-foreground) !important;
  font-weight: 600 !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid color-mix(in oklch, var(--admin-primary), transparent 55%) !important;
  border-color: var(--admin-primary) !important;
}

/* FK widgets — keep select/autocomplete and add/change/delete icons on one row */
#content-main .related-widget-wrapper {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 0.4rem !important;
  max-width: 42rem;
}

#content-main .related-widget-wrapper-link {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

#content-main .related-widget-wrapper .select2-container,
#content-main .related-widget-wrapper select {
  flex: 1 1 auto !important;
  min-width: 12rem !important;
  max-width: 32rem !important;
  width: auto !important;
}

/* Fieldset cards on change forms */
fieldset.module,
.inline-group .module,
.bg-white.dark\:bg-base-900 {
  border-radius: var(--admin-radius) !important;
  border: 1px solid var(--admin-border) !important;
  box-shadow: var(--admin-card-shadow) !important;
}

/* Changelist results table */
#result_list,
.change-list .results,
table#changelist {
  border-radius: var(--admin-radius) !important;
  border: 1px solid var(--admin-border) !important;
  overflow: hidden;
  box-shadow: var(--admin-card-shadow) !important;
  background: white !important;
}

#result_list thead th,
.change-list .results thead th {
  background: var(--admin-accent-soft) !important;
  color: var(--admin-foreground) !important;
  font-weight: 800 !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.button,
input[type="submit"],
button,
a.button,
.bg-primary-600,
button.bg-primary-600,
.submit-row input.default,
input[type="submit"].default {
  border-radius: var(--admin-radius) !important;
  font-weight: 800 !important;
}

.bg-primary-600,
button.bg-primary-600,
input[type="submit"].default,
.submit-row input.default,
a.bg-primary-600 {
  background: linear-gradient(
    90deg,
    var(--admin-primary),
    color-mix(in oklch, var(--admin-primary), black 8%)
  ) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px -4px color-mix(in oklch, var(--admin-primary), transparent 50%) !important;
}

/* Soft danger red — muted so Delete actions aren't eye-burning */
:root {
  --admin-danger: oklch(0.64 0.12 22);
  --admin-danger-hover: oklch(0.58 0.12 22);
  --admin-danger-border: oklch(0.58 0.11 22);
}

/* Links — exclude filled primary/success/danger action buttons and dashboard CTAs.
 * Also exclude inline-styled action buttons (learning/exams upload/download links),
 * otherwise `color: primary !important` beats their inline `color:#fff`. */
a:link:not(.icam-admin-btn-primary):not(.icam-admin-btn-success):not(.bg-primary-600):not(.bg-red-500):not(.bg-red-600):not(.bg-red-700):not(.hod-hero-btn):not(.hod-act):not(.hod-link):not(.mps-hero__btn):not([style*="background"]),
a:visited:not(.icam-admin-btn-primary):not(.icam-admin-btn-success):not(.bg-primary-600):not(.bg-red-500):not(.bg-red-600):not(.bg-red-700):not(.hod-hero-btn):not(.hod-act):not(.hod-link):not(.mps-hero__btn):not([style*="background"]),
.text-primary-600 {
  color: var(--admin-primary) !important;
}

/* Inline-styled filled action links (Download / Upload / Preview / etc.) → white text */
a[style*="background"]:link,
a[style*="background"]:visited,
a[style*="background"]:hover,
a[style*="background"]:focus,
a[style*="background"]:active,
a[style*="background-color"]:link,
a[style*="background-color"]:visited,
a[style*="background-color"]:hover,
a[style*="background-color"]:focus,
a[style*="background-color"]:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Keep dark text on white / light inline buttons only */
a[style*="background:#fff"]:link,
a[style*="background:#fff"]:visited,
a[style*="background: #fff"]:link,
a[style*="background: #fff"]:visited,
a[style*="background:#ffffff"]:link,
a[style*="background:#ffffff"]:visited,
a[style*="background: #ffffff"]:link,
a[style*="background: #ffffff"]:visited,
a[style*="background:white"]:link,
a[style*="background:white"]:visited,
a[style*="background: white"]:link,
a[style*="background: white"]:visited,
a[style*="background:#FFF"]:link,
a[style*="background:#FFF"]:visited {
  color: var(--admin-foreground, #0a2036) !important;
  -webkit-text-fill-color: var(--admin-foreground, #0a2036) !important;
}

/* Soft red danger buttons + white text (beats Unfold bright red + global link colour) */
.bg-red-500,
.bg-red-600,
.bg-red-700,
button.bg-red-500,
button.bg-red-600,
button.bg-red-700,
a.bg-red-500,
a.bg-red-600,
a.bg-red-700 {
  background: var(--admin-danger) !important;
  background-image: none !important;
  border-color: var(--admin-danger-border) !important;
  box-shadow: 0 4px 12px -6px color-mix(in oklch, var(--admin-danger), transparent 45%) !important;
}

.bg-red-500:hover,
.bg-red-600:hover,
.bg-red-700:hover,
button.bg-red-500:hover,
button.bg-red-600:hover,
button.bg-red-700:hover,
a.bg-red-500:hover,
a.bg-red-600:hover,
a.bg-red-700:hover,
.hover\:bg-red-600\/80:hover {
  background: var(--admin-danger-hover) !important;
  background-image: none !important;
}

.bg-red-500,
.bg-red-600,
.bg-red-700,
button.bg-red-500,
button.bg-red-600,
button.bg-red-700,
a.bg-red-500,
a.bg-red-600,
a.bg-red-700,
a.bg-primary-600,
a.bg-primary-600:link,
a.bg-primary-600:visited,
a.bg-primary-600:hover,
a.bg-primary-600:focus,
a.bg-red-500:link,
a.bg-red-500:visited,
a.bg-red-500:hover,
a.bg-red-500:focus,
a.bg-red-600:link,
a.bg-red-600:visited,
a.bg-red-600:hover,
a.bg-red-600:focus,
a.bg-red-700:link,
a.bg-red-700:visited,
a.bg-red-700:hover,
a.bg-red-700:focus,
a.icam-admin-btn-primary,
a.icam-admin-btn-primary:link,
a.icam-admin-btn-primary:visited,
a.icam-admin-btn-primary:hover,
a.icam-admin-btn-success,
a.icam-admin-btn-success:link,
a.icam-admin-btn-success:visited,
a.icam-admin-btn-success:hover,
a.hod-hero-btn:not(.glow),
a.hod-hero-btn:not(.glow):link,
a.hod-hero-btn:not(.glow):visited,
a.hod-hero-btn:not(.glow):hover,
a.hod-hero-btn:not(.glow):focus,
a.hod-act.prim,
a.hod-act.prim:link,
a.hod-act.prim:visited,
a.hod-act.prim:hover,
a.hod-act.prim:focus,
a.hod-link.cta,
a.hod-link.cta:link,
a.hod-link.cta:visited,
a.hod-link.cta:hover,
a.hod-link.cta:focus,
a.mps-hero__btn:not(.mps-hero__btn--ghost),
a.mps-hero__btn:not(.mps-hero__btn--ghost):link,
a.mps-hero__btn:not(.mps-hero__btn--ghost):visited,
a.mps-hero__btn:not(.mps-hero__btn--ghost):hover,
a.mps-hero__btn:not(.mps-hero__btn--ghost):focus {
  color: #ffffff !important;
}

a.mps-hero__btn:not(.mps-hero__btn--ghost) .material-symbols-outlined,
a.bg-red-500 .material-symbols-outlined,
a.bg-red-600 .material-symbols-outlined,
a.bg-red-700 .material-symbols-outlined {
  color: #ffffff !important;
}

/* Muted helper text */
.help,
.quiet,
p.help,
.text-font-subtle-light {
  color: var(--admin-muted-fg) !important;
}

/* Rounded utility used heavily by Unfold */
.rounded-default,
.rounded-lg,
.rounded-md {
  border-radius: var(--admin-radius) !important;
}

/* Breadcrumbs */
.breadcrumbs,
.breadcrumbs a {
  color: var(--admin-muted-fg) !important;
  font-weight: 600 !important;
}

.breadcrumbs a:hover {
  color: var(--admin-primary) !important;
}

/* Filter chips / pills */
span.bg-primary-100,
.bg-primary-50 {
  background: var(--admin-accent-soft) !important;
  color: var(--admin-primary) !important;
  border-radius: 999px !important;
}

/*
 * Filled action buttons → always white label text.
 * Unfold/Tailwind often leaves muted gray (text-font-subtle / body inherit)
 * on red/primary/green fills, which is hard to read.
 * White / light / outline / ghost buttons keep their dark text.
 */
body:not(.icam-admin-login) :is(a, button, input[type="submit"], input[type="button"], .button):is(
  .bg-primary-500,
  .bg-primary-600,
  .bg-primary-700,
  .bg-red-400,
  .bg-red-500,
  .bg-red-600,
  .bg-red-700,
  .bg-rose-500,
  .bg-rose-600,
  .bg-rose-700,
  .bg-green-500,
  .bg-green-600,
  .bg-green-700,
  .bg-emerald-500,
  .bg-emerald-600,
  .bg-emerald-700,
  .bg-orange-500,
  .bg-orange-600,
  .bg-orange-700,
  .bg-amber-500,
  .bg-amber-600,
  .bg-amber-700,
  .bg-blue-500,
  .bg-blue-600,
  .bg-blue-700,
  .bg-sky-500,
  .bg-sky-600,
  .bg-sky-700,
  .bg-indigo-500,
  .bg-indigo-600,
  .bg-indigo-700,
  .bg-violet-500,
  .bg-violet-600,
  .bg-violet-700,
  .icam-admin-btn-primary,
  .icam-admin-btn-success,
  .hod-act.prim,
  .hod-link.cta,
  .mps-hero__btn:not(.mps-hero__btn--ghost),
  .hod-hero-btn:not(.glow)
),
body:not(.icam-admin-login) :is(a, button, input[type="submit"], input[type="button"], .button)[class*="bg-primary-"]:not(.bg-primary-50):not(.bg-primary-100):not(.bg-primary-200),
body:not(.icam-admin-login) :is(a, button, input[type="submit"], input[type="button"], .button)[class*="bg-red-"]:not(.bg-red-50):not(.bg-red-100):not(.bg-red-200),
body:not(.icam-admin-login) :is(a, button, input[type="submit"], input[type="button"], .button)[class*="bg-rose-"]:not(.bg-rose-50):not(.bg-rose-100),
body:not(.icam-admin-login) :is(a, button, input[type="submit"], input[type="button"], .button)[class*="bg-green-"]:not(.bg-green-50):not(.bg-green-100),
body:not(.icam-admin-login) :is(a, button, input[type="submit"], input[type="button"], .button)[class*="bg-emerald-"]:not(.bg-emerald-50):not(.bg-emerald-100),
body:not(.icam-admin-login) .submit-row input.default,
body:not(.icam-admin-login) input[type="submit"].default {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body:not(.icam-admin-login) :is(a, button, input[type="submit"], input[type="button"], .button):is(
  .bg-primary-500,
  .bg-primary-600,
  .bg-primary-700,
  .bg-red-400,
  .bg-red-500,
  .bg-red-600,
  .bg-red-700,
  .bg-rose-500,
  .bg-rose-600,
  .bg-rose-700,
  .bg-green-500,
  .bg-green-600,
  .bg-green-700,
  .bg-emerald-500,
  .bg-emerald-600,
  .bg-emerald-700,
  .bg-orange-500,
  .bg-orange-600,
  .bg-orange-700,
  .bg-amber-500,
  .bg-amber-600,
  .bg-amber-700,
  .bg-blue-500,
  .bg-blue-600,
  .bg-blue-700,
  .bg-sky-500,
  .bg-sky-600,
  .bg-sky-700,
  .bg-indigo-500,
  .bg-indigo-600,
  .bg-indigo-700,
  .bg-violet-500,
  .bg-violet-600,
  .bg-violet-700,
  .icam-admin-btn-primary,
  .icam-admin-btn-success,
  .hod-act.prim,
  .hod-link.cta,
  .mps-hero__btn:not(.mps-hero__btn--ghost),
  .hod-hero-btn:not(.glow)
) :is(span, i, svg, em, strong, small, .material-symbols-outlined),
body:not(.icam-admin-login) :is(a, button)[class*="bg-primary-"]:not(.bg-primary-50):not(.bg-primary-100) :is(span, i, svg, .material-symbols-outlined),
body:not(.icam-admin-login) :is(a, button)[class*="bg-red-"]:not(.bg-red-50):not(.bg-red-100) :is(span, i, svg, .material-symbols-outlined),
body:not(.icam-admin-login) :is(a, button)[class*="bg-rose-"]:not(.bg-rose-50):not(.bg-rose-100) :is(span, i, svg, .material-symbols-outlined) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: currentColor !important;
}

/* White / light / outline controls — keep dark readable text (never force white) */
body:not(.icam-admin-login) :is(a, button, .button):is(
  .bg-white,
  .bg-base-50,
  .bg-base-100,
  .bg-transparent,
  .icam-admin-btn-outline,
  .mps-hero__btn--ghost
),
body:not(.icam-admin-login) :is(a, button, .button):is(
  .bg-white,
  .bg-base-50,
  .bg-base-100,
  .bg-transparent,
  .icam-admin-btn-outline,
  .mps-hero__btn--ghost
):link,
body:not(.icam-admin-login) :is(a, button, .button):is(
  .bg-white,
  .bg-base-50,
  .bg-base-100,
  .bg-transparent,
  .icam-admin-btn-outline,
  .mps-hero__btn--ghost
):visited {
  -webkit-text-fill-color: unset;
}

/* Login page — handled by static/admin/admin-login.css */