/* Masterhorst design tokens and reusable utility classes.
   Single source of truth for the color palette, control dimensions,
   and reusable UI patterns documented in .claude/frontend-design.md.
   Loaded globally via base.html — available to all Django templates
   and all Vue SPA pages served through them. */

:root {
  /* Foundational blue scale (50–950) — the single source of truth for every
     blue shade in the app. The semantic blue tokens below and the PrimeVue
     preset (frontend/primevue-theme.ts) both derive from this scale, so the
     two systems can never drift apart. */
  --ms-blue-50:  #eff6ff;
  --ms-blue-100: #dbeafe;
  --ms-blue-200: #bfdbfe;
  --ms-blue-300: #93c5fd;
  --ms-blue-400: #60a5fa;
  --ms-blue-500: #3b82f6;
  --ms-blue-600: #2563eb;
  --ms-blue-700: #1d4ed8;
  --ms-blue-800: #1e40af;
  --ms-blue-900: #1e3a8a;
  --ms-blue-950: #172554;

  /* Primary blue — hover/focus borders, active states, CTA buttons */
  --ms-primary:       var(--ms-blue-600);
  --ms-primary-hover: var(--ms-blue-700);
  --ms-primary-rgb:   37, 99, 235; /* blue-600 as RGB, for Bootstrap rgba() utilities */
  /* Dark blue — filled elements such as progress bar fills */
  --ms-primary-dark:  var(--ms-blue-900);

  /* Status / semantic colors — Tailwind-harmonized with the blue primary and
     slate neutrals. Each color provides a button base/hover/active triplet, an
     RGB form (for Bootstrap's rgba()-based color utilities), and — where
     the UI renders alerts — subtle background/border/text-emphasis tints.
     These are the single source of truth for the Bootstrap re-skin at the
     bottom of this file. */
  --ms-success:               #198754; /* green-600 — base */
  --ms-success-hover:         #157347; /* green-700 */
  --ms-success-active:        #166534; /* green-800 */
  --ms-success-rgb:           25, 135, 84;
  --ms-success-subtle:        #dcfce7; /* green-100 — alert/subtle background */
  --ms-success-subtle-border: #bbf7d0; /* green-200 — alert/subtle border */
  --ms-success-emphasis:      #166534; /* green-800 — alert/subtle text */

  --ms-danger:                #dc2626; /* red-600 — base */
  --ms-danger-hover:          #b91c1c; /* red-700 */
  --ms-danger-active:         #991b1b; /* red-800 */
  --ms-danger-rgb:            220, 38, 38;
  --ms-danger-subtle:         #fee2e2; /* red-100 */
  --ms-danger-subtle-border:  #fecaca; /* red-200 */
  --ms-danger-emphasis:       #991b1b; /* red-800 */

  --ms-warning:               #ffc107; /* amber-500 — base (pairs with dark text) */
  --ms-warning-hover:         #d97706; /* amber-600 */
  --ms-warning-active:        #b45309; /* amber-700 */
  --ms-warning-rgb:           245, 158, 11;
  --ms-warning-subtle:        #fef3c7; /* amber-100 */
  --ms-warning-subtle-border: #fde68a; /* amber-200 */
  --ms-warning-emphasis:      #92400e; /* amber-800 */

  --ms-info:                  #0dcaf0; /* sky-500 — base (pairs with dark text) */
  --ms-info-hover:            #19a5eb; /* sky-600 */
  --ms-info-active:           #0369a1; /* sky-700 */
  --ms-info-rgb:              14, 165, 233;
  --ms-info-subtle:           #e0f2fe; /* sky-100 */
  --ms-info-subtle-border:    #bae6fd; /* sky-200 */
  --ms-info-emphasis:         #075985; /* sky-800 */

  /* Neutral — the gray "secondary"/cancel button family. Slate, matching the
     neutral text/border tokens above. Distinct from --ms-secondary-bg, which is
     a violet accent, not a neutral. */
  --ms-neutral:               #64748b; /* slate-500 — same as --ms-text-muted */
  --ms-neutral-hover:         #475569; /* slate-600 */
  --ms-neutral-active:        #334155; /* slate-700 */
  --ms-neutral-rgb:           100, 116, 139;
  --ms-neutral-subtle:        #f1f5f9; /* slate-100 — subtle background */
  --ms-neutral-subtle-border: #e2e8f0; /* slate-200 — same as --ms-border-light */
  --ms-neutral-emphasis:      #334155; /* slate-700 — subtle text */

  /* Borders */
  --ms-border:        #cbd5e1; /* normal form control border */
  --ms-border-light:  #e2e8f0; /* table cell borders, card borders */

  /* Backgrounds */
  --ms-bg:            #f8fafc; /* page-level light gray */
  --ms-bg-row:        var(--ms-blue-50);  /* table header rows, reviewer list rows */
  --ms-bg-cell:       var(--ms-blue-100); /* reviewer-specific data cells */

  /* Text */
  --ms-text:          #0f172a; /* primary body text */
  --ms-text-muted:    #64748b; /* labels, secondary text, inactive items */

  /* Secondary/accent — violet tint from the hero gradient end stop;
     use for callout backgrounds and secondary accent areas.
     For a vibrant secondary on text/icons, add --ms-secondary when needed. */
  --ms-secondary-bg:  #ede9fe;

  /* Hero gradient — shared by all hero/header sections */
  --ms-hero-bg: linear-gradient(135deg, #eff6ff 0%, #dbeafe 60%, #ede9fe 100%);

  /* Ghost button — always-visible blue-tinted border and hover fill;
     suited for marketing and public-facing pages (distinct from ms-btn-outline
     which uses a neutral gray border for internal UI). */
  --ms-btn-ghost-border:    rgba(37, 99, 235, 0.45);
  --ms-btn-ghost-hover-bg:  rgba(37, 99, 235, 0.08);

  /* Navbar / dark-surface — text and borders rendered on the dark Bootstrap navbar.
     Kept here so a future dark theme can override them in one place. */
  --ms-nav-link:            rgba(255, 255, 255, 0.85); /* default nav link */
  --ms-nav-link-hover:      rgba(255, 255, 255, 1);    /* hovered nav link */
  --ms-nav-divider:         rgba(255, 255, 255, 0.45); /* role-nav divider border */
  --ms-nav-role-link:       #93c5fd;                   /* "For Recommenders / Staff" links */
  --ms-nav-role-link-hover: #bfdbfe;                   /* hover state of role links */

  /* Focus ring */
  --ms-focus-glow:    rgba(37, 99, 235, 0.1);

  /* Control dimensions (shared by select, input, and outline buttons) */
  --ms-control-height:     2.25rem;
  --ms-control-radius:     0.375rem;
  --ms-control-font-size:  0.875rem;
  --ms-control-padding:    0.4rem 0.75rem;
}

/* Field label — use above form controls and any inline section heading.
   Muted, semibold, normal case (the previous uppercase + letter-spacing
   small-caps treatment read as cramped/odd on longer labels). */
.ms-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ms-text-muted);
  white-space: nowrap;
}

/* Base form control — apply to <select> and <input> elements. */
.ms-control {
  height: var(--ms-control-height);
  box-sizing: border-box;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-control-radius);
  padding: var(--ms-control-padding);
  font-size: var(--ms-control-font-size);
  color: var(--ms-text);
  background-color: #fff;
}

/* When Bootstrap's form-select class is used alongside ms-control,
   restore the right padding that form-select's arrow requires. */
select.ms-control {
  padding-right: 2.25rem;
}

.ms-control:focus {
  outline: none;
  border-color: var(--ms-primary);
  box-shadow: 0 0 0 3px var(--ms-focus-glow);
}

/* Outline button — same dimensions as ms-control; neutral default,
   turns blue on hover. Do not use Bootstrap btn-outline-secondary
   for new UI — use this class instead. */
.ms-btn-outline {
  height: var(--ms-control-height);
  box-sizing: border-box;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-control-radius);
  padding: var(--ms-control-padding);
  font-size: var(--ms-control-font-size);
  color: var(--ms-text);
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.ms-btn-outline:hover {
  border-color: var(--ms-primary);
  color: var(--ms-primary);
}

/* ============================================================
   Bootstrap theme integration
   ------------------------------------------------------------
   Re-skins Bootstrap's color system onto the design tokens above so that
   Bootstrap-styled pages match the PrimeVue/Vue UI. Two layers are needed:

     1. Root-level CSS variables (html:root) drive Bootstrap's color
        utilities (.text-*, .bg-*, .border-*), links, and alerts (alerts
        derive their tint from the *-bg-subtle / *-border-subtle /
        *-text-emphasis tokens), so overriding the root tokens recolors all
        of them at once.
     2. Buttons hardcode their colors per variant via --bs-btn-* variables
        and ignore the root tokens, so each used .btn-* variant is remapped
        explicitly below.

   Selectors are intentionally one notch more specific than Bootstrap's own
   (html:root vs :root, .btn.btn-* vs .btn-*) so they win regardless of
   stylesheet load order — Bootstrap is loaded both via a <link> in base.html
   and via a bundled JS import, and either may end up last in the cascade.
   ============================================================ */

/* Layer 1 — root color tokens for utilities, links, and alert tints. */
html:root {
  /* Primary (blue) — also drives link color */
  --bs-primary: var(--ms-primary);
  --bs-primary-rgb: var(--ms-primary-rgb);
  --bs-primary-text-emphasis: var(--ms-blue-800);
  --bs-primary-bg-subtle: var(--ms-blue-100);
  --bs-primary-border-subtle: var(--ms-blue-200);
  --bs-link-color: var(--ms-primary);
  --bs-link-color-rgb: var(--ms-primary-rgb);
  --bs-link-hover-color: var(--ms-primary-hover);

  /* Success (green) */
  --bs-success: var(--ms-success);
  --bs-success-rgb: var(--ms-success-rgb);
  --bs-success-text-emphasis: var(--ms-success-emphasis);
  --bs-success-bg-subtle: var(--ms-success-subtle);
  --bs-success-border-subtle: var(--ms-success-subtle-border);

  /* Danger (red) */
  --bs-danger: var(--ms-danger);
  --bs-danger-rgb: var(--ms-danger-rgb);
  --bs-danger-text-emphasis: var(--ms-danger-emphasis);
  --bs-danger-bg-subtle: var(--ms-danger-subtle);
  --bs-danger-border-subtle: var(--ms-danger-subtle-border);

  /* Warning (amber) */
  --bs-warning: var(--ms-warning);
  --bs-warning-rgb: var(--ms-warning-rgb);
  --bs-warning-text-emphasis: var(--ms-warning-emphasis);
  --bs-warning-bg-subtle: var(--ms-warning-subtle);
  --bs-warning-border-subtle: var(--ms-warning-subtle-border);

  /* Info (sky) */
  --bs-info: var(--ms-info);
  --bs-info-rgb: var(--ms-info-rgb);
  --bs-info-text-emphasis: var(--ms-info-emphasis);
  --bs-info-bg-subtle: var(--ms-info-subtle);
  --bs-info-border-subtle: var(--ms-info-subtle-border);

  /* Secondary (neutral slate) */
  --bs-secondary: var(--ms-neutral);
  --bs-secondary-rgb: var(--ms-neutral-rgb);
  --bs-secondary-text-emphasis: var(--ms-neutral-emphasis);
  --bs-secondary-bg-subtle: var(--ms-neutral-subtle);
  --bs-secondary-border-subtle: var(--ms-neutral-subtle-border);
}

/* Layer 2a — solid buttons. Only the background/border/focus variables are
   remapped; the text-color variables (--bs-btn-color etc.) are left as
   Bootstrap set them, preserving its contrast choices (white text on
   primary/success/danger/secondary, dark text on warning/info). */
.btn.btn-primary {
  --bs-btn-bg: var(--ms-primary);
  --bs-btn-border-color: var(--ms-primary);
  --bs-btn-hover-bg: var(--ms-primary-hover);
  --bs-btn-hover-border-color: var(--ms-primary-hover);
  --bs-btn-active-bg: var(--ms-blue-800);
  --bs-btn-active-border-color: var(--ms-blue-800);
  --bs-btn-disabled-bg: var(--ms-primary);
  --bs-btn-disabled-border-color: var(--ms-primary);
  --bs-btn-focus-shadow-rgb: var(--ms-primary-rgb);
}

.btn.btn-success {
  --bs-btn-bg: var(--ms-success);
  --bs-btn-border-color: var(--ms-success);
  --bs-btn-hover-bg: var(--ms-success-hover);
  --bs-btn-hover-border-color: var(--ms-success-hover);
  --bs-btn-active-bg: var(--ms-success-active);
  --bs-btn-active-border-color: var(--ms-success-active);
  --bs-btn-disabled-bg: var(--ms-success);
  --bs-btn-disabled-border-color: var(--ms-success);
  --bs-btn-focus-shadow-rgb: var(--ms-success-rgb);
}

.btn.btn-danger {
  --bs-btn-bg: var(--ms-danger);
  --bs-btn-border-color: var(--ms-danger);
  --bs-btn-hover-bg: var(--ms-danger-hover);
  --bs-btn-hover-border-color: var(--ms-danger-hover);
  --bs-btn-active-bg: var(--ms-danger-active);
  --bs-btn-active-border-color: var(--ms-danger-active);
  --bs-btn-disabled-bg: var(--ms-danger);
  --bs-btn-disabled-border-color: var(--ms-danger);
  --bs-btn-focus-shadow-rgb: var(--ms-danger-rgb);
}

.btn.btn-warning {
  --bs-btn-bg: var(--ms-warning);
  --bs-btn-border-color: var(--ms-warning);
  --bs-btn-hover-bg: var(--ms-warning-hover);
  --bs-btn-hover-border-color: var(--ms-warning-hover);
  --bs-btn-active-bg: var(--ms-warning-active);
  --bs-btn-active-border-color: var(--ms-warning-active);
  --bs-btn-disabled-bg: var(--ms-warning);
  --bs-btn-disabled-border-color: var(--ms-warning);
  --bs-btn-focus-shadow-rgb: var(--ms-warning-rgb);
}

.btn.btn-info {
  --bs-btn-bg: var(--ms-info);
  --bs-btn-border-color: var(--ms-info);
  --bs-btn-hover-bg: var(--ms-info-hover);
  --bs-btn-hover-border-color: var(--ms-info-hover);
  --bs-btn-active-bg: var(--ms-info-active);
  --bs-btn-active-border-color: var(--ms-info-active);
  --bs-btn-disabled-bg: var(--ms-info);
  --bs-btn-disabled-border-color: var(--ms-info);
  --bs-btn-focus-shadow-rgb: var(--ms-info-rgb);
}

.btn.btn-secondary {
  --bs-btn-bg: var(--ms-neutral);
  --bs-btn-border-color: var(--ms-neutral);
  --bs-btn-hover-bg: var(--ms-neutral-hover);
  --bs-btn-hover-border-color: var(--ms-neutral-hover);
  --bs-btn-active-bg: var(--ms-neutral-active);
  --bs-btn-active-border-color: var(--ms-neutral-active);
  --bs-btn-disabled-bg: var(--ms-neutral);
  --bs-btn-disabled-border-color: var(--ms-neutral);
  --bs-btn-focus-shadow-rgb: var(--ms-neutral-rgb);
}

/* Layer 2b — outline buttons. The base color drives the resting text/border
   and the hover/active fill; Bootstrap's hover text color (--bs-btn-hover-color)
   is left untouched so contrast on the filled state is preserved. */
.btn.btn-outline-secondary {
  --bs-btn-color: var(--ms-neutral);
  --bs-btn-border-color: var(--ms-neutral);
  --bs-btn-hover-bg: var(--ms-neutral);
  --bs-btn-hover-border-color: var(--ms-neutral);
  --bs-btn-active-bg: var(--ms-neutral);
  --bs-btn-active-border-color: var(--ms-neutral);
  --bs-btn-disabled-color: var(--ms-neutral);
  --bs-btn-disabled-border-color: var(--ms-neutral);
  --bs-btn-focus-shadow-rgb: var(--ms-neutral-rgb);
}

.btn.btn-outline-success {
  --bs-btn-color: var(--ms-success);
  --bs-btn-border-color: var(--ms-success);
  --bs-btn-hover-bg: var(--ms-success);
  --bs-btn-hover-border-color: var(--ms-success);
  --bs-btn-active-bg: var(--ms-success);
  --bs-btn-active-border-color: var(--ms-success);
  --bs-btn-disabled-color: var(--ms-success);
  --bs-btn-disabled-border-color: var(--ms-success);
  --bs-btn-focus-shadow-rgb: var(--ms-success-rgb);
}

.btn.btn-outline-danger {
  --bs-btn-color: var(--ms-danger);
  --bs-btn-border-color: var(--ms-danger);
  --bs-btn-hover-bg: var(--ms-danger);
  --bs-btn-hover-border-color: var(--ms-danger);
  --bs-btn-active-bg: var(--ms-danger);
  --bs-btn-active-border-color: var(--ms-danger);
  --bs-btn-disabled-color: var(--ms-danger);
  --bs-btn-disabled-border-color: var(--ms-danger);
  --bs-btn-focus-shadow-rgb: var(--ms-danger-rgb);
}

.btn.btn-outline-warning {
  --bs-btn-color: var(--ms-warning);
  --bs-btn-border-color: var(--ms-warning);
  --bs-btn-hover-bg: var(--ms-warning);
  --bs-btn-hover-border-color: var(--ms-warning);
  --bs-btn-active-bg: var(--ms-warning);
  --bs-btn-active-border-color: var(--ms-warning);
  --bs-btn-disabled-color: var(--ms-warning);
  --bs-btn-disabled-border-color: var(--ms-warning);
  --bs-btn-focus-shadow-rgb: var(--ms-warning-rgb);
}