/*
 * Goa University LMS admin: theme
 *
 * Every page in admin-ui/ takes its colours, fonts and logo from this file.
 * To rebrand:
 *   - Colours: change the values in the "Brand" and "Dark surfaces" blocks below.
 *   - Logo: replace assets/logo.png (it sits on the dark sidebar, so use a light version)
 *     and adjust --logo-width if the new logo has a different shape.
 *   - Fonts: change the Google Fonts @import and the three --font-* values.
 */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Noto+Serif+Devanagari:wght@400;500&display=swap");

:root {
  /* Brand: primary actions, active navigation, highlights */
  --brand-primary: #A94B24;
  --brand-on-primary: #FFFFFF;
  --brand-primary-text: #7A3415;      /* primary colour used as text on light backgrounds */
  --brand-primary-soft: #F6E1D5;      /* tinted pill and badge backgrounds */
  --brand-primary-on-dark: #E3A382;   /* primary colour on dark surfaces */

  /* Brand: secondary, used for links, focus rings and positive figures */
  --brand-secondary: #19706A;
  --brand-secondary-strong: #0F4F4A;
  --brand-secondary-soft: #DCEEEA;
  --brand-secondary-line: #5E9E95;    /* outlined secondary elements */

  /* Logo */
  --logo-width: 200px;

  /* Dark surfaces: sidebar and feature cards */
  --dark-bg: #1D2B29;
  --dark-raised: #2A3A37;
  --dark-line: #33443F;
  --dark-heading: #FFFFFF;
  --dark-text: #ECE9E1;
  --dark-text-secondary: #BFC7C2;
  --dark-text-muted: #A9B3AE;
  --dark-link: #DCDFDA;
  --dark-icon: #9FAAA5;

  /* Light surfaces and text */
  --page-bg: #F6F4EF;
  --surface: #FFFFFF;
  --text: #1D1C1A;
  --text-secondary: #57534B;
  --text-muted: #6B665C;
  --line: #E3DED3;
  --line-subtle: #F0ECE4;
  --line-strong: #D9D3C6;
  --control-border: #9E978A;
  --switch-off: #8C867A;
  --fill-muted: #ECE8DF;
  --selected-bg: #F7F1E8;             /* selected row or item */
  --today-bg: #FCF9F4;                /* today's column in the timetable */
  --text-inverse: #FFFFFF;            /* text on strong fills */

  /* Data and status */
  --chart-1: #008C80;
  --seq-1: #BFE0D9;                   /* heatmap, lowest to highest */
  --seq-2: #8CC7BC;
  --seq-3: #4FA597;
  --seq-4: #1D7A6E;
  --success-soft: #E0EFE3;
  --success-text: #22603A;
  --success-on-dark: #6FD1B8;
  --warning-soft: #F4EACB;
  --warning-line: #D9BE6E;
  --warning-text: #6B4A00;
  --danger: #A3302A;
  --danger-soft: #F6DEDB;
  --danger-text: #6E1F1A;

  /* Special surfaces */
  --paper: #FFFDF8;                   /* certificate paper */
  --stage-bg: #E9E4D8;                /* backdrop behind the certificate preview */
  --player-bg: #141A19;               /* video player */

  /* Typography */
  --font-display: Newsreader, Georgia, serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-devanagari: 'Noto Serif Devanagari', Newsreader, serif;
}

/* Base */
body { margin: 0; background: var(--page-bg); color: var(--text); font-family: var(--font-body); }
a { color: var(--brand-secondary); text-decoration: none; }
a:hover { color: var(--brand-secondary-strong); }
button, input, select, textarea { font: inherit; color: inherit; }
::placeholder { text-transform: none; }
button { cursor: pointer; white-space: nowrap; }
button:hover { filter: brightness(.96); }
::placeholder { color: var(--text-muted); opacity: 1; }
:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 2px; }
table { border-collapse: collapse; }

/* Sidebar */
.brand { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px; text-decoration: none; }
.brand-logo { display: block; width: var(--logo-width); height: auto; }
.brand-caption { font-size: 12px; color: var(--dark-text-muted); }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label { margin: 0 0 6px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dark-text-muted); }
.nav-item { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 10px; border-radius: 8px; color: var(--dark-link); font-size: 14px; font-weight: 500; text-decoration: none; }
.nav-item svg { color: var(--dark-icon); flex-shrink: 0; }
.nav-item:hover { background: var(--dark-raised); color: var(--dark-heading); }
.nav-item.is-active { background: var(--page-bg); color: var(--text); font-weight: 600; }
.nav-item.is-active svg { color: var(--brand-primary); }

/* On/off switch: <button role="switch" class="switch" aria-checked="true"><span class="switch-knob"></span></button> */
.switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; padding: 0; border: 0; border-radius: 999px; background: var(--switch-off); }
.switch[aria-checked="true"] { background: var(--brand-secondary); }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.switch[aria-checked="true"] .switch-knob { transform: translateX(18px); }

/* Toggle chip: <button class="chip" aria-pressed="true">Name</button> */
.chip { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--control-border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; }
.chip[aria-pressed="true"] { border-color: var(--dark-bg); background: var(--dark-bg); color: var(--text-inverse); }

/* Form fields */
.label { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.hint { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.input { box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; }
textarea.input { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--brand-secondary); }
input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); cursor: pointer; }

/* Dialog */
dialog { padding: 0; border: 0; border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
dialog::backdrop { background: rgba(20, 20, 18, .45); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}