/* ============================================================
   Klingberg theme for the Django admin (Verwaltung).
   Overrides the admin's own CSS variables → brand-consistent
   without touching admin structure. Ref Klingberg Design System.
   ============================================================ */

@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('assets/fonts/nunito-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito Sans'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('assets/fonts/nunito-sans-latin.woff2') format('woff2');
}

/* Map Django admin variables to Klingberg tokens (all themes). */
:root,
html[data-theme="auto"],
html[data-theme="light"],
html[data-theme="dark"]{
  --primary:#567c22;            /* green-700  (brand-strong) */
  --secondary:#2f4416;          /* green-900  (brand-deep)   */
  --accent:#2FA593;             /* mint                      */
  --primary-fg:#ffffff;

  --header-color:#e4f0cf;
  --header-branding-color:#ffffff;
  --header-bg:#2f4416;
  --header-link-color:#ffffff;

  --breadcrumbs-fg:#cce2a3;
  --breadcrumbs-link-fg:#ffffff;
  --breadcrumbs-bg:#567c22;

  --link-fg:#0f5a50;            /* mint-ink */
  --link-hover-color:#2FA593;
  --link-selected-fg:#567c22;

  --button-bg:#567c22;
  --button-fg:#ffffff;
  --button-hover-bg:#45631e;    /* green-800 */
  --default-button-bg:#2FA593;  /* mint */
  --default-button-hover-bg:#0f5a50;
  --object-tools-bg:#2FA593;
  --object-tools-hover-bg:#0f5a50;

  --selected-row:#f3f8e9;       /* green-50 */
  --selected-bg:#e4f0cf;        /* green-100 */

  /* Surface variables — pinned to the light Klingberg palette so the admin
     never goes dark (overrides Django's dark-theme + OS-dark values; this rule
     loads after admin base.css and the [data-theme] parts out-specify it). */
  --body-fg:#23231d;
  --body-bg:#faf9f5;
  --body-quiet-color:#6f6f64;
  --body-loud-color:#23231d;
  --hairline-color:#e6e5dc;
  --border-color:#cbcabf;
  --darkened-bg:#f2f1ea;
  --error-fg:#b8492f;
  --message-success-bg:#eaf2d8;
  --message-warning-bg:#fbf0d6;
  --message-error-bg:#f8e5df;

  --font-family-primary:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Force light rendering for native controls; the theme toggle is now a no-op. */
html{ color-scheme:light; }
button.theme-toggle{ display:none !important; }

/* Headings use Nunito (matches the app). */
#site-name, .module h2, .module caption, fieldset h2,
.dashboard #content h1, h1, h2.subhead{
  font-family:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Rounded corners to match the app's components. */
.button, input[type=submit], input[type=button], .submit-row input, a.button,
.object-tools a{ border-radius:11px !important; }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=url], input[type=tel], textarea, select, .vTextField{ border-radius:8px; }
.module, .dashboard .module table, #changelist .results,
.card, fieldset.module{ border-radius:12px; overflow:hidden; }

/* Branded header: brand mark next to the site name. */
#site-name a{ display:inline-flex; align-items:center; gap:10px; }
.kb-admin-mark{
  display:inline-block; width:22px; height:22px;
  -webkit-mask:url('assets/klingberg-mark.svg') center/contain no-repeat;
  mask:url('assets/klingberg-mark.svg') center/contain no-repeat;
  background:#ffffff;
}

/* Brand title always white on the green header (kills the mint-on-green
   default from Django's --accent link color). */
#site-name a:link, #site-name a:visited{ color:#ffffff; }

/* ============================================================
   Login page — brand-consistent and airy. Scoped to body.login,
   so the rest of the admin is untouched.
   ============================================================ */
body.login{ background:#eef0e6; }

body.login #container{
  width:33rem; max-width:calc(100vw - 2rem); margin:8vh auto 0;
  border:1px solid var(--hairline-color); border-radius:18px; overflow:hidden;
  box-shadow:0 18px 48px rgba(47, 68, 22, .14);
}

/* Header: lime brand color (green-500), stacked + centered, bigger mark.
   Logo + wordmark in deep green so they read clearly on the lime. */
body.login #header{
  height:auto; padding:44px 28px 38px; border-radius:0;
  display:flex; justify-content:center;
  background:#8DBE3D;
}
body.login #branding{ margin:0; }
body.login #site-name{ margin:0; font-size:27px; line-height:1.2; }
body.login #site-name a{
  flex-direction:column; gap:18px; justify-content:center;
  font-family:'Nunito', sans-serif; font-weight:800; letter-spacing:.01em;
}
body.login #site-name a:link, body.login #site-name a:visited{ color:#ffffff; }
body.login .kb-admin-mark{ width:100px; height:100px; background:#ffffff; }

/* Form: room to breathe. */
body.login #content{ padding:40px 44px 10px; }
body.login #content-main{ width:100%; }
body.login .form-row{ padding:11px 0; border:none; }
body.login .form-row label{
  display:block; margin:0 0 7px;
  font-family:'Nunito', sans-serif; font-weight:700; font-size:16px;
  color:var(--body-loud-color);
}
body.login #content input[type=text],
body.login #content input[type=password]{
  width:100%; box-sizing:border-box; padding:12px 14px; font-size:15px;
}

/* Full-width brand-green submit. */
body.login .submit-row{ padding:10px 0 30px; margin:0; border:none; text-align:center; }
body.login .submit-row input[type=submit]{
  width:100%; padding:13px 16px; font-size:15px; font-weight:800;
}