/* ==================================================================
   Service Desk — shared design system
   Palette follows anicura.nl: navy #00263E with pastel accents and the
   "leaf" corner (top-left + bottom-right rounded).
   ================================================================== */

/* Schibsted Grotesk (SIL Open Font License, see fonts/OFL-LICENSE.txt): a free
   newspaper grotesk close to AniCura's licensed Guardian Sans. Self-hosted, so
   visitors' browsers never contact a font service. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #00263E;
  --navy-700: #0A3551;
  --navy-600: #164766;
  --navy-400: #4C7189;
  --ink: #00263E;
  --text: #22343F;
  --muted: #5B6770;
  --subtle: #87939A;
  --line: #DFE5E7;
  --line-soft: #E9EFF1;
  --bg: #F3F7F8;
  --bg-tint: #F5FAFC;
  --surface: #FFFFFF;

  --sky: #AADCEB;   --sky-600: #95D3E6; --sky-soft: #E6F4F9;
  --rose: #F7BCC7;  --rose-soft: #FDEEF1;
  --mint: #9DD1B1;  --mint-soft: #E6F4EB;
  --sun: #EBBC4E;   --sun-soft: #FBF2DA;

  --danger: #B3263F;  --danger-soft: #FDEDF0;
  --success: #1F6B45; --success-soft: #E6F4EB;
  --warning: #6B4E0B; --warning-soft: #FBF2DA;

  --focus-ring: 0 0 0 3px rgba(149, 211, 230, .7);
  --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px;
  --leaf-sm: 8px 0; --leaf: 12px 0; --leaf-lg: 22px 0;

  --shadow-xs: 0 1px 2px rgba(0, 38, 62, .06);
  --shadow-sm: 0 1px 2px rgba(0, 38, 62, .05), 0 3px 10px -4px rgba(0, 38, 62, .10);
  --shadow: 0 1px 2px rgba(0, 38, 62, .04), 0 12px 32px -14px rgba(0, 38, 62, .20);
  --shadow-lg: 0 2px 6px rgba(0, 38, 62, .05), 0 32px 64px -28px rgba(0, 38, 62, .34);

  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

/* Tones: every palette colour exposes the same four variables. */
.tone-sky   { --t-bg: #AADCEB; --t-fg: #00263E; --t-soft: #E6F4F9; --t-text: #0B4A66; }
.tone-rose  { --t-bg: #F7BCC7; --t-fg: #452329; --t-soft: #FDEEF1; --t-text: #7A2F3E; }
.tone-mint  { --t-bg: #9DD1B1; --t-fg: #235136; --t-soft: #E6F4EB; --t-text: #235136; }
.tone-sun   { --t-bg: #EBBC4E; --t-fg: #00263E; --t-soft: #FBF2DA; --t-text: #6B4E0B; }
.tone-lilac { --t-bg: #CFC3EA; --t-fg: #2F2356; --t-soft: #F1EDF9; --t-text: #4A3A80; }
.tone-peach { --t-bg: #F5C7A6; --t-fg: #4E2A12; --t-soft: #FDF1E8; --t-text: #8A4A1F; }
.tone-navy  { --t-bg: #00263E; --t-fg: #FFFFFF; --t-soft: #E1E9EE; --t-text: #00263E; }
.tone-stone { --t-bg: #DFE5E7; --t-fg: #2E3A40; --t-soft: #F1F4F5; --t-text: #4F5253; }

/* ------------------------------ base ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; margin: 0; letter-spacing: -.015em; font-weight: 650; }
p { margin: 0; }
a { color: var(--navy-600); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[hidden] { display: none !important; }
::selection { background: var(--sky); color: var(--navy); }

.icon {
  width: 1.2em; height: 1.2em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.2em;
  display: inline-block;
}
.brand-lockup { display: inline-flex; align-items: center; gap: .45em; }
.brand-mark { width: 1.5em; height: 1.5em; flex: none; }
.brand-word { font-family: var(--font-display); font-weight: 750; letter-spacing: -.035em; color: inherit; }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----------------------------- buttons ---------------------------- */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 42px; padding: 0 18px;
  border: 1px solid var(--btn-bd); border-radius: var(--leaf);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: .95rem; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.btn:hover { color: var(--btn-fg); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn-primary { --btn-bg: var(--navy); --btn-fg: #fff; --btn-bd: var(--navy); box-shadow: 0 6px 16px -8px rgba(0, 38, 62, .6); }
.btn-primary:hover { --btn-bg: var(--navy-700); --btn-bd: var(--navy-700); }
.btn-sky { --btn-bg: var(--sky); --btn-fg: var(--navy); --btn-bd: var(--sky); }
.btn-sky:hover { --btn-bg: var(--sky-600); --btn-bd: var(--sky-600); }
.btn-secondary { --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn-secondary:hover { --btn-bd: #C9D3D7; --btn-bg: #FBFDFD; }
.btn-ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--navy-600); }
.btn-ghost:hover { --btn-bg: var(--bg); }
.btn-danger { --btn-bg: var(--surface); --btn-fg: var(--danger); --btn-bd: #F2C4CD; }
.btn-danger:hover { --btn-bg: var(--danger); --btn-fg: #fff; --btn-bd: var(--danger); }
.btn-danger-solid { --btn-bg: var(--danger); --btn-fg: #fff; --btn-bd: var(--danger); }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 1.02rem; border-radius: 16px 0; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: .86rem; border-radius: var(--leaf-sm); }
.btn-icon { width: 38px; min-height: 38px; padding: 0; border-radius: 10px; }
.btn-icon.btn-sm { width: 32px; min-height: 32px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; box-shadow: none; }

.spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.is-loading .spinner { display: inline-block; }
.is-loading .icon { display: none; }
.is-loading { pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------ forms ----------------------------- */
.input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: 16px; /* 16px keeps iOS from zooming in */
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: #9AA5AB; }
.input:hover { border-color: #C9D3D7; }
.input:focus { outline: none; border-color: var(--navy-400); box-shadow: 0 0 0 4px rgba(170, 220, 235, .55); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.5; }
input[type="date"].input { min-height: 48px; }
.select-wrap { position: relative; }
.select-wrap select.input { padding-right: 42px; cursor: pointer; }
.select-wrap .select-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.has-error .input { border-color: var(--danger); background: #FFFBFC; }
.has-error .input:focus { box-shadow: 0 0 0 4px rgba(179, 38, 63, .14); }

.f-label { display: flex; align-items: baseline; gap: 6px; font-weight: 600; color: var(--ink); font-size: .95rem; margin-bottom: 6px; }
.f-label .req { color: var(--danger); font-weight: 700; }
.f-label .opt { margin-left: auto; font-weight: 500; font-size: .78rem; color: var(--subtle); }
.f-help { color: var(--muted); font-size: .84rem; margin: 7px 0 0; line-height: 1.4; }
.f-error { display: flex; align-items: flex-start; gap: 6px; margin-top: 7px; color: var(--danger); font-size: .86rem; font-weight: 500; }
.f-error .icon { margin-top: 2px; }

/* ----------------------------- badges ----------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 999px;
  background: var(--t-soft, var(--bg)); color: var(--t-text, var(--muted));
  font-size: .78rem; font-weight: 650; letter-spacing: .01em; white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-bg, var(--subtle)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.badge.tone-sky .dot { background: #4FA9C7; }
.badge.tone-sun .dot { background: #D9A21E; }
.badge.tone-mint .dot { background: #4DA674; }
.badge.tone-rose .dot { background: #E0778B; }
.badge.tone-lilac .dot { background: #8D79C9; }
.badge.tone-stone .dot { background: #9AA5AB; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px 0 9px;
  border-radius: var(--leaf-sm);
  background: var(--t-soft, var(--bg)); color: var(--t-text, var(--ink));
  font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.chip .icon { width: 15px; height: 15px; }

.prio { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--text); font-weight: 500; }
.prio-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.prio-meter i { display: block; width: 4px; border-radius: 2px; background: var(--line); }
.prio-meter i:nth-child(1) { height: 5px; }
.prio-meter i:nth-child(2) { height: 8px; }
.prio-meter i:nth-child(3) { height: 11px; }
.prio-meter i:nth-child(4) { height: 14px; }
.prio-low .prio-meter i.on { background: #9AA5AB; }
.prio-normal .prio-meter i.on { background: #4FA9C7; }
.prio-high .prio-meter i.on { background: #D9A21E; }
.prio-urgent .prio-meter i.on { background: #D84F6A; }
.prio-urgent { color: #9C2139; font-weight: 650; }

/* ------------------------------ alerts ---------------------------- */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r);
  background: var(--sky-soft); color: #0B4A66; font-size: .93rem;
  border: 1px solid rgba(0, 38, 62, .04);
}
.alert .icon { width: 20px; height: 20px; margin-top: 1px; }
.alert.tone-error { background: var(--danger-soft); color: #8E1B31; }
.alert.tone-success { background: var(--success-soft); color: var(--success); }
.alert.tone-warning { background: var(--warning-soft); color: var(--warning); }

/* ------------------------------ avatar ---------------------------- */
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--t-bg, var(--sky)); color: var(--t-fg, var(--navy));
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.avatar.is-empty { background: var(--bg); color: var(--subtle); border: 1.5px dashed var(--line); }
.avatar.is-empty .icon { width: 15px; height: 15px; }
.avatar.lg { width: 44px; height: 44px; font-size: .95rem; }
.avatar.sm { width: 24px; height: 24px; font-size: .62rem; }

/* ----------------------------- motion ----------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}