/*
 * TMS components, v0.1. Class-based and CSP-safe: no style="" or <style> needed in pages.
 * Requires tokens.css. Dynamic values (bar widths, segment sizes) are passed as custom
 * properties from JS through the CSSOM, e.g. el.style.setProperty('--w', '75%').
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-ui);
}
/* Tabular figures where numbers line up or change in place. Not on the whole page: in Inter they
   also widen the hyphen, so "two-step" read as "two - step" (changed from the kit's body rule). */
.tms-barrow__value, .tms-cellstack__value, .tms-chip__count, .tms-cols__lbl, .tms-compare__value,
.tms-done__nr, .tms-donut__value, .tms-fieldfoot__count, .tms-fig__value, .tms-hislink__nr,
.tms-kpi__value, .tms-legend__value, .tms-listnav__count, .tms-mrow__nr, .tms-mrow__when,
.tms-nav__count, .tms-ogroup__count, .tms-orow__num, .tms-osec__pct, .tms-otp__box, .tms-panel__nr,
.tms-pop__nr, .tms-qtab__value, .tms-ring__value, .tms-row__nr, .tms-row__when, .tms-badge-new,
.tms-pill--count, .tms-tabbar__badge, .tms-mkpi__value, .tms-mq__value, .tms-cell-end, .num {
  font-variant-numeric: tabular-nums;
}
a { color: var(--teal-700); }
a:hover { color: #084F57; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
.tms-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Icons: inline SVG, 24 px grid, stroke style */
.tms-icon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.tms-icon--16 { width: 16px; height: 16px; }
.tms-icon--14 { width: 14px; height: 14px; }
.tms-icon--bold { stroke-width: 2.2; }

/* ---------- App shell ---------- */
.tms-app { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 100vh; }
.tms-main { position: relative; flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.tms-content {
  display: flex; flex-direction: column; gap: var(--sp-6);
  width: 100%; max-width: 1840px; margin: 0 auto;
  padding: 28px var(--sp-7) var(--sp-8);
}
.tms-content--tight { gap: 18px; padding-top: 26px; }

/* ---------- Background art ----------
 * Seamless 800 px tiles of faint one-colour line icons, scattered at random sizes and angles:
 * bg-pattern-*  = ambulance, locomotive, rocket + medical and digital icons (default)
 * bg-vehicles-* = ambulance, locomotive, rocket + crosses only (alternative)
 * Purely decorative: put the class on the panel itself, and use background-color (not the
 * background shorthand) on that panel so the image is not reset. */
.tms-art-dark { background-image: url("../assets/bg-pattern-on-dark.svg"); background-repeat: repeat; background-size: 800px auto; background-position: left top; }
.tms-art-light { background-image: url("../assets/bg-pattern-on-light.svg"); background-repeat: repeat; background-size: 800px auto; background-position: left top; }
.tms-art-hero { background-image: url("../assets/bg-pattern-on-dark.svg"); background-repeat: repeat; background-size: 960px auto; background-position: left top; }
.tms-art-dark.tms-art--vehicles,
.tms-art-hero.tms-art--vehicles { background-image: url("../assets/bg-vehicles-on-dark.svg"); }
.tms-art-light.tms-art--vehicles { background-image: url("../assets/bg-vehicles-on-light.svg"); }

/* ---------- Greeting (dashboard page head) ----------
 * First name only, never the role. On an occasion, put .tms-occasion--{id} on .tms-pagehead__text:
 * it shows the badge and the note in that occasion's colours. Rules: HANDOFF.md §4.3. */
.tms-greet { display: flex; align-items: center; gap: 12px; padding: 2px 0; }
.tms-greet__title { animation: tmsGreetIn .5s ease-out both; }
.tms-greet__badge {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--greet-bg); color: var(--greet-fg);
  animation: tmsGreetPop .7s cubic-bezier(.2,.9,.25,1.3) .2s both;
}
.tms-greet__badge .tms-icon { width: 23px; height: 23px; }
.tms-greet__note { font-weight: 600; color: var(--greet-fg); }
.tms-occasion--birthday { --greet-bg: #FCE7F3; --greet-fg: #BE185D; }
.tms-occasion--newyear { --greet-bg: #FEF3C7; --greet-fg: #B45309; }
.tms-occasion--christmas { --greet-bg: #DCFCE7; --greet-fg: #15803D; }
.tms-occasion--martisor { --greet-bg: #FFE4E6; --greet-fg: #BE123C; }
.tms-occasion--easter { --greet-bg: #EDE9FE; --greet-fg: #6D28D9; }
.tms-occasion--ramadan { --greet-bg: #E0E7FF; --greet-fg: #4338CA; }
.tms-occasion--eid { --greet-bg: #CCFBF1; --greet-fg: #0F766E; }
.tms-occasion--independence { --greet-bg: #DBEAFE; --greet-fg: #1D4ED8; }
.tms-occasion--programmers { --greet-bg: #CFFAFE; --greet-fg: #0E7490; }
.tms-occasion--wine { --greet-bg: #FFE4E6; --greet-fg: #9F1239; }
@keyframes tmsGreetPop { from { opacity: 0; transform: scale(.4) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes tmsGreetIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { :root:not(.tms-motion-always) .tms-greet__badge, :root:not(.tms-motion-always) .tms-greet__title { animation: none; } }

/* ---------- Sidebar ---------- */
.tms-sidebar {
  flex: 1 1 240px;
  padding: 20px 14px 16px;
  background-color: var(--sb-bg); color: var(--sb-fg);
  border-right: var(--sb-border);
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.tms-brand { display: flex; flex-direction: column; padding: 4px 8px 0; }
.tms-brand__logo { display: block; width: 172px; max-width: 100%; height: auto; filter: var(--sb-logo-filter); }

/* TMS lockup: T (500) M (700) S (600 italic) | orange bar | TASK / MANAGEMENT / SYSTEM */
.tms-lockup {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 172px; max-width: 100%; margin-top: 18px;
  font-family: var(--font-brand); text-decoration: none;
}
.tms-lockup__mark {
  display: inline-flex; overflow: hidden; padding: 5px 3px 0 0;
  font-size: 40px; line-height: 1; letter-spacing: -0.01em; color: var(--lockup-fg);
}
.tms-lockup__l { display: inline-block; animation: tmsRise .7s cubic-bezier(.2, .8, .2, 1) both; }
.tms-lockup__l:nth-child(1) { font-weight: 500; animation-delay: .15s; }
.tms-lockup__l:nth-child(2) { font-weight: 700; animation-delay: .23s; }
.tms-lockup__l:nth-child(3) { font-weight: 600; font-style: italic; animation-delay: .31s; }
.tms-lockup__w { display: inline-block; }
.tms-lockup:hover .tms-lockup__w { animation: tmsWave .45s ease-in-out both; }
.tms-lockup__l:nth-child(2) .tms-lockup__w { animation-delay: .06s; }
.tms-lockup__l:nth-child(3) .tms-lockup__w { animation-delay: .12s; }
.tms-lockup__bar {
  display: block; flex: none; width: 4px; height: 32px; border-radius: 2px;
  background: var(--brand-orange); transform-origin: 50% 100%;
  animation: tmsBar .5s cubic-bezier(.2, .8, .2, 1) .45s both;
}
.tms-lockup__words {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 10px; line-height: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--lockup-muted);
}
.tms-lockup__word { display: block; animation: tmsIn .5s ease-out both; }
.tms-lockup__word:nth-child(1) { animation-delay: .55s; }
.tms-lockup__word:nth-child(2) { animation-delay: .63s; }
.tms-lockup__word:nth-child(3) { animation-delay: .71s; }
@keyframes tmsRise { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes tmsWave { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-4px); } }
@keyframes tmsBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tmsIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }

/* Navigation */
.tms-nav { display: flex; flex-direction: column; gap: 2px; }
.tms-nav__item {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px;
  border-radius: var(--r-ctl); color: var(--sb-nav); font-weight: 500; text-decoration: none;
}
.tms-nav__item:hover { background: rgba(127, 140, 145, 0.16); color: var(--sb-nav); }
.tms-nav__item[aria-current="page"] { background: var(--sb-active-bg); color: var(--sb-active-fg); font-weight: 600; }
.tms-nav__label { flex: 1; min-width: 0; }
.tms-nav__count { font-size: 12px; font-weight: 600; color: var(--sb-muted); }
.tms-nav__section {
  padding: 18px 12px 6px; font-size: 11px; line-height: 14px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-muted);
}
.tms-badge-new {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: var(--r-pill); background: var(--badge-new); color: #FFFFFF;
  font-size: 11.5px; font-weight: 700;
}

/* "Your link" card and user block */
.tms-sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.tms-linkcard { background: var(--sb-card); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.tms-linkcard__label { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-muted); }
.tms-linkcard__host { padding-top: 6px; font-size: 12px; line-height: 16px; color: var(--sb-muted); }
.tms-linkcard__name { font-size: 16px; line-height: 22px; font-weight: 700; }
.tms-linkcard__copy {
  margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; border-radius: 9px; border: 1px solid var(--sb-line);
  background: transparent; color: var(--sb-fg); font-size: 13px; font-weight: 600; cursor: pointer;
}
.tms-userblock { display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; border-top: 1px solid var(--sb-line); }
.tms-userblock__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tms-userblock__name { font-size: 13.5px; line-height: 18px; font-weight: 600; }
.tms-userblock__role { font-size: 12px; line-height: 16px; color: var(--sb-muted); }
.tms-userblock__out {
  width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent;
  color: var(--sb-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* Avatars */
.tms-avatar {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; background: #FBBF24; color: #3B2A00;
}
.tms-avatar--sm { width: 26px; height: 26px; font-size: 11px; }
.tms-avatar--pink { background: var(--pink-tint); color: var(--pink-text); }
.tms-avatar--blue { background: var(--blue-tint); color: var(--blue-text); }
.tms-avatar--teal { background: var(--teal-50); color: var(--teal-700); }

/* ---------- Top bar ---------- */
.tms-topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 14px var(--sp-7); background: var(--surface); border-bottom: 1px solid var(--line-card);
}
.tms-topbar__right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tms-search {
  flex: 1 1 320px; max-width: 520px; display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--table-head); color: var(--muted);
}
.tms-search:focus-within { border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--focus-soft); }
.tms-search__input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text-strong); }
.tms-search--compact { flex: 0 1 260px; height: 36px; padding: 0 10px; background: var(--surface); border-color: var(--control-border); }
.tms-kbd {
  font-size: 11.5px; line-height: 16px; font-weight: 600; padding: 2px 6px;
  border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface);
}

/* Super admin user switch */
.tms-viewing {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface);
  color: var(--text-strong); cursor: pointer;
}
.tms-viewing:hover { background: var(--page); }
.tms-viewing__eye { color: var(--teal-600); }
.tms-viewing__label { color: var(--muted); }
.tms-viewing__value { font-weight: 600; }
.tms-menu {
  display: flex; flex-direction: column; padding: 6px; min-width: 300px;
  border: 1px solid var(--line-card); border-radius: 12px; background: var(--surface); box-shadow: var(--sh-pop);
}
.tms-menu__search {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin-bottom: 4px;
  border-radius: 8px; background: var(--table-head); color: var(--muted); font-size: 13px;
}
.tms-menu__opt {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px;
  border-radius: 8px; border: 0; background: transparent; text-align: left; cursor: pointer;
}
.tms-menu__opt:hover { background: var(--row-hover); }
.tms-menu__opt[aria-selected="true"] { background: var(--teal-50); }
.tms-menu__opt[aria-selected="true"] .tms-menu__name { color: var(--teal-700); font-weight: 600; }
.tms-menu__name { flex: 1; font-weight: 500; color: var(--text-strong); }
.tms-menu__meta { font-size: 12px; color: var(--muted); }
.tms-menu__sep { height: 1px; margin: 4px 6px; background: var(--line-soft); }
.tms-banner-viewing {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-ctl);
  background: var(--warn-chip-bg); color: var(--warn-chip-fg); font-size: 13px; font-weight: 600;
}

/* Language switch and segmented controls */
.tms-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-ctl); background: var(--seg-bg); }
.tms-seg__btn {
  height: 34px; min-width: 42px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; font-size: 12.5px; font-weight: 600; color: var(--text-3); cursor: pointer;
}
.tms-seg__btn[aria-pressed="true"], .tms-seg__btn[aria-selected="true"] {
  background: var(--surface); box-shadow: 0 1px 2px rgba(16, 42, 48, 0.12); color: var(--teal-700); font-weight: 700;
}
.tms-seg--sm .tms-seg__btn { height: 28px; min-width: 0; }
.tms-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line-card); }
.tms-tab { padding: 8px 0; border: 0; background: none; font-size: 13.5px; font-weight: 500; color: var(--text-3); cursor: pointer; }
.tms-tab[aria-selected="true"] { color: var(--teal-700); font-weight: 600; box-shadow: inset 0 -2px 0 var(--teal-600); }

/* ---------- Page header ---------- */
.tms-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.tms-pagehead__text { display: flex; flex-direction: column; gap: 4px; }
.tms-eyebrow { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; color: var(--teal-700); }
.tms-h1 { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.tms-h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 650; color: var(--ink); }
.tms-h2--section { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 700; letter-spacing: -0.01em; }
.tms-h3 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; color: var(--ink); }
.tms-sub { color: var(--muted); }
.tms-caps { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tms-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tms-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.tms-linkpill {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px;
  border-radius: var(--r-pill); background: var(--teal-50); color: var(--teal-700); font-size: 13px; font-weight: 600;
}

/* ---------- Buttons ---------- */
.tms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-ctl);
  font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.tms-btn--primary { background: var(--teal-700); color: #FFFFFF; box-shadow: 0 1px 2px rgba(10, 108, 119, 0.25); }
.tms-btn--primary:hover { background: var(--teal-700-hover); color: #FFFFFF; }
.tms-btn--primary:disabled { background: var(--primary-disabled); box-shadow: none; cursor: not-allowed; }
.tms-btn--secondary { background: var(--surface); border-color: var(--control-border); color: var(--text-strong); padding: 0 14px; }
.tms-btn--secondary:hover { background: var(--page); border-color: #C5D0D4; }
.tms-btn--secondary:disabled { border-color: var(--line-card); color: var(--disabled); cursor: not-allowed; }
.tms-btn--ghost { background: transparent; color: var(--teal-700); }
.tms-btn--ghost:hover { background: var(--teal-50); }
.tms-btn--ghost:disabled { color: var(--disabled); cursor: not-allowed; }
.tms-btn--danger { background: var(--danger); color: #FFFFFF; }
.tms-btn--danger:hover { background: var(--danger-hover); }
.tms-btn--danger:disabled { background: var(--danger-disabled); cursor: not-allowed; }
.tms-btn--sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.tms-iconbtn {
  width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.tms-iconbtn:hover { background: var(--line-soft); }

/* ---------- Form fields ---------- */
.tms-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tms-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.tms-input, .tms-textarea, .tms-select__el {
  width: 100%; border: 1px solid var(--control-border); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--text-strong);
}
.tms-input { height: 40px; padding: 0 12px; }
.tms-textarea { min-height: 96px; padding: 10px 12px; line-height: 21px; resize: vertical; }
.tms-input:focus, .tms-textarea:focus, .tms-select__el:focus {
  outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--focus-soft);
}
.tms-input[aria-invalid="true"] { border: 1.5px solid var(--danger); background: var(--danger-bg); }
.tms-help { font-size: 12px; color: var(--muted); }
.tms-help--error { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--danger); }
.tms-select { position: relative; }
.tms-select__el { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 36px 0 12px; cursor: pointer; }
.tms-select--compact .tms-select__el { height: 36px; padding: 0 34px 0 12px; font-size: 13.5px; font-weight: 500; }
.tms-select__chev { position: absolute; right: 12px; top: 12px; width: 16px; height: 16px; pointer-events: none; color: var(--muted); }
.tms-select--compact .tms-select__chev { right: 10px; top: 10px; }

/* ---------- Filter chips ---------- */
.tms-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tms-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 7px 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--control-border);
  background: var(--surface); color: #2B3337; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tms-chip__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--teal-600); }
.tms-chip__count {
  min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--line-soft); color: var(--text-2); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.tms-chip[aria-pressed="true"] { background: var(--teal-700); border-color: var(--teal-700); color: #FFFFFF; }
.tms-chip[aria-pressed="true"] .tms-chip__dot { box-shadow: 0 0 0 2px #FFFFFF; }
.tms-chip[aria-pressed="true"] .tms-chip__count { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }
.tms-chip--sm { height: 30px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.tms-chip--sm .tms-chip__dot { width: 7px; height: 7px; }

/* Colour dots (legends, chips) */
.tms-dot--started, .tms-dot--worklist, .tms-dot--plan, .tms-dot--medapp { background: var(--blue); }
.tms-dot--progress, .tms-dot--his-progress, .tms-dot--finance { background: var(--amber); }
.tms-dot--hold, .tms-dot--postponed, .tms-dot--accepted, .tms-dot--it { background: var(--violet); }
.tms-dot--done, .tms-dot--completed, .tms-dot--internal { background: var(--green); }
.tms-dot--rejected, .tms-dot--cancelled { background: var(--slate); }
.tms-dot--ontest { background: var(--cyan); }
.tms-dot--refused { background: var(--rose); }
.tms-dot--bugs, .tms-dot--waiting, .tms-dot--administration { background: var(--orange); }
.tms-dot--reception { background: var(--pink); }
.tms-dot--clinic, .tms-dot--overall { background: var(--teal-600); }

/* ---------- Status pills (always icon + label) ---------- */
.tms-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 7px;
  border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 600; white-space: nowrap;
}
.tms-pill__icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tms-pill--started   { background: var(--st-started-bg);  color: var(--st-started-fg); }
.tms-pill--progress  { background: var(--st-progress-bg); color: var(--st-progress-fg); }
.tms-pill--hold      { background: var(--st-hold-bg);     color: var(--st-hold-fg); }
.tms-pill--done      { background: var(--st-done-bg);     color: var(--st-done-fg); }
.tms-pill--rejected  { background: var(--st-rejected-bg); color: var(--st-rejected-fg); }
.tms-pill--worklist  { background: var(--blue-tint);   color: var(--blue-text); }
.tms-pill--ontest    { background: var(--cyan-tint);   color: var(--cyan-text); }
.tms-pill--completed { background: var(--green-tint);  color: var(--green-text); }
.tms-pill--postponed { background: var(--violet-tint); color: var(--violet-text); }
.tms-pill--cancelled { background: var(--slate-tint);  color: var(--slate-text); }
.tms-pill--refused   { background: var(--rose-tint);   color: var(--rose-text); }
.tms-pill--closed    { height: 22px; padding: 0 8px; gap: 4px; font-size: 11.5px; background: var(--line-soft); color: var(--text-3); }
.tms-pill--running   { height: 22px; padding: 0 8px; font-size: 11.5px; font-weight: 700; background: var(--teal-50); color: var(--teal-700); }
.tms-pill--running::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--teal-600); box-shadow: 0 0 0 3px rgba(14, 140, 153, 0.22);
}
.tms-pill--count { height: 22px; padding: 0 8px; font-size: 12px; font-weight: 700; background: var(--teal-50); color: var(--teal-700); }
.tms-pill--year { height: 26px; padding: 0 10px; font-weight: 700; background: var(--violet-tint); color: var(--violet-text); }

/* Impact tags */
.tms-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 7px; border-radius: var(--r-tag); font-size: var(--fs-small); font-weight: 600; }
.tms-tag--high   { background: var(--rose-tint);  color: var(--rose-text); }
.tms-tag--medium { background: var(--amber-tint); color: var(--amber-text); }
.tms-tag--low    { background: var(--slate-tint); color: var(--slate-text); }

/* Small neutral chips (departments, "1 each") and coloured mini tags */
.tms-dept {
  display: inline-block; max-width: 100%; height: 24px; line-height: 24px; padding: 0 9px;
  border-radius: var(--r-tag); background: var(--chip-bg); color: var(--text-2);
  font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.tms-minitag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-tag); font-size: 12px; font-weight: 600; }
.tms-minitag--blue { background: #EFF5FF; color: var(--blue-text); }
.tms-minitag--warn { background: var(--warn-chip-bg); color: var(--warn-chip-fg); }

/* ---------- Cards ---------- */
.tms-card { background: var(--surface); border: 1px solid var(--line-card); border-radius: var(--r-card); box-shadow: var(--sh-card); }
.tms-card--pad { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.tms-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.tms-card__title { display: flex; align-items: center; gap: 10px; }
.tms-row2 { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.tms-row2__main { flex: 999 1 640px; min-width: 0; }
.tms-row2__side { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* ---------- KPI tiles ---------- */
.tms-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.tms-kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.tms-kpi__head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.tms-kpi__icon { width: 32px; height: 32px; flex: none; border-radius: var(--r-ctl); display: inline-flex; align-items: center; justify-content: center; background: var(--kpi-tint); color: var(--kpi-solid); }
.tms-kpi__value-row { display: flex; align-items: baseline; gap: 8px; }
.tms-kpi__value { font-size: var(--fs-kpi); line-height: var(--lh-kpi); font-weight: 700; letter-spacing: -0.02em; color: var(--kpi-text); }
.tms-kpi__unit { font-size: 13px; color: var(--muted); }
.tms-kpi__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.tms-kpi__foot--stack { flex-direction: column; }
.tms-kpi__note { font-size: 12px; line-height: 16px; color: var(--muted); }
.tms-kpi--blue   { --kpi-tint: var(--blue-tint);   --kpi-solid: var(--blue);     --kpi-text: var(--blue-text); }
.tms-kpi--teal   { --kpi-tint: var(--teal-50);     --kpi-solid: var(--teal-700); --kpi-text: var(--teal-700); }
.tms-kpi--orange { --kpi-tint: var(--orange-tint); --kpi-solid: var(--orange);   --kpi-text: var(--warn-fg); }
.tms-kpi--violet { --kpi-tint: var(--violet-tint); --kpi-solid: var(--violet);   --kpi-text: var(--violet-text); }
.tms-kpi--pink   { --kpi-tint: var(--pink-tint);   --kpi-solid: var(--pink);     --kpi-text: var(--pink-text); }
.tms-kpi--amber  { --kpi-tint: var(--amber-tint);  --kpi-solid: #D97706;         --kpi-text: #B45309; }

/* Segmented bar: children get flex-grow from JS (el.style.flexGrow = count) */
.tms-segbar { display: flex; gap: 3px; height: 8px; }
.tms-segbar > * { flex: 1 1 0; border-radius: var(--r-pill); }
.tms-segbar--stacked { height: 18px; gap: 2px; border-radius: 6px; overflow: hidden; }
.tms-segbar--stacked > * { border-radius: 0; }

/* Mini column chart (effort per quarter): column height from JS via --h */
.tms-cols { display: flex; align-items: flex-end; gap: 8px; height: 46px; }
.tms-cols__col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.tms-cols__bar { display: block; height: var(--h, 3px); border-radius: 5px; background: var(--amber); }
.tms-cols__bar--empty { background: #FDE7B0; }
.tms-cols__lbl { font-size: 11px; line-height: 12px; text-align: center; color: var(--muted); }

/* Horizontal bars: width from JS via --w */
.tms-hbar { display: block; height: 10px; border-radius: var(--r-pill); background: var(--chip-bg); }
.tms-hbar--thin { height: 6px; background: var(--track); }
.tms-hbar--tint { background: var(--teal-50); }
.tms-hbar__fill { display: block; height: 100%; width: var(--w, 0%); border-radius: var(--r-pill); background: var(--fill, var(--teal-600)); }
.tms-hbar--empty { background: transparent; border: 1px dashed var(--control-border); }
.tms-barrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) 28px; align-items: center; gap: 10px; }
.tms-barrow--wide { grid-template-columns: 116px minmax(0, 1fr) 28px; }
.tms-barrow--q { grid-template-columns: 66px minmax(0, 1fr) 36px; }
.tms-barrow__label { font-size: 13px; color: var(--text-2); }
.tms-barrow__value { text-align: right; font-weight: 700; color: var(--ink); }
.tms-barrow__value--none { font-weight: 400; color: var(--muted); }
/* Fill colours */
.tms-fill--plan, .tms-fill--medapp, .tms-fill--blue { --fill: var(--blue); }
.tms-fill--accepted, .tms-fill--it, .tms-fill--violet { --fill: var(--violet); }
.tms-fill--bugs, .tms-fill--administration, .tms-fill--orange { --fill: var(--orange); }
.tms-fill--internal, .tms-fill--green { --fill: var(--green); }
.tms-fill--finance, .tms-fill--amber { --fill: var(--amber); }
.tms-fill--reception, .tms-fill--pink { --fill: var(--pink); }
.tms-fill--clinic, .tms-fill--teal { --fill: var(--teal-600); }

/* Legends */
.tms-legend { display: flex; flex-direction: column; gap: 9px; }
.tms-legend--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; }
.tms-legend__item { display: flex; align-items: center; gap: 10px; }
.tms-legend__sw { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.tms-legend__label { flex: 1; }
.tms-legend__value { font-weight: 700; color: var(--ink); }
.tms-legend--inline { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; font-size: var(--fs-small); color: var(--text-3); }
.tms-legend--inline .tms-legend__item { gap: 6px; }

/* Donut (SVG, r=52, stroke 16, circumference 326.73; segments set stroke-dasharray / -dashoffset attributes) */
.tms-donut { position: relative; width: 140px; height: 140px; flex: none; }
.tms-donut__svg { display: block; }
.tms-donut__track { stroke: var(--line-soft); }
.tms-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tms-donut__value { font-size: 30px; line-height: 34px; font-weight: 700; color: var(--ink); }
.tms-donut__sub { font-size: 12px; line-height: 16px; color: var(--muted); }
.tms-stroke--started { stroke: var(--st-started-dot); }
.tms-stroke--progress { stroke: var(--st-progress-dot); }
.tms-stroke--hold { stroke: var(--st-hold-dot); }
.tms-stroke--done { stroke: var(--st-done-dot); }
.tms-stroke--rejected { stroke: var(--st-rejected-dot); }

/* ---------- Quarter cards ---------- */
.tms-quarters { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.tms-quarter { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.tms-quarter__head { display: flex; align-items: center; gap: 10px; }
.tms-quarter__range { margin-left: auto; font-size: var(--fs-small); color: var(--muted); }
.tms-quarter__body { display: flex; align-items: center; gap: 18px; }
.tms-quarter__rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tms-quarter__foot {
  display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small); color: var(--muted);
}
.tms-quarter__foot strong { color: var(--ink); }
.tms-quarter__weak { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* Weak-section tag: always shows the name and %, the colour adds severity */
.tms-weak {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px;
  border-radius: var(--r-tag); font-size: 12px; font-weight: 700;
}
.tms-weak--1 { background: var(--weak-1-bg); color: var(--weak-1-fg); }
.tms-weak--2 { background: var(--weak-2-bg); color: var(--weak-2-fg); }
.tms-weak--3 { background: var(--weak-3-bg); color: var(--weak-3-fg); }
.tms-quarter--running { background: #F8FCFC; border: 1.5px dashed #9FD0D5; box-shadow: none; }
.tms-ring { position: relative; width: 88px; height: 88px; flex: none; }
.tms-ring__track { stroke: var(--teal-50); }
.tms-ring__fill { stroke: var(--hl-overall); }
.tms-ring__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; color: var(--ink); }

/* ---------- Lists (compact one-line rows) ---------- */
.tms-list { --cols: 40px 120px minmax(0, 1.6fr) 150px 130px 116px minmax(0, 1fr) 96px; --row-h: 44px; overflow: hidden; }
.tms-list--comfortable { --row-h: 54px; }
.tms-list--panel-open { --cols: 40px 120px minmax(0, 1fr) 140px 96px; }
.tms-list--panel-open .tms-col-wide { display: none; }
.tms-list--attention { --cols: 40px 122px minmax(0, 1fr) 120px 140px 96px; --row-h: 46px; }
.tms-list__top { padding: 18px 20px 14px; }
/* position: hidden column labels (.tms-sr) stay inside the scroll box instead of widening the page. */
.tms-list__scroll { overflow-x: auto; position: relative; }
.tms-list__inner { min-width: 760px; }
.tms-list__head, .tms-row {
  display: grid; grid-template-columns: var(--cols); align-items: center; gap: 12px; padding: 0 20px;
}
.tms-list__head {
  height: 36px; background: var(--table-head); border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.tms-row {
  width: 100%; height: var(--row-h); border: 0; border-bottom: 1px solid var(--line-soft);
  background: var(--surface); color: var(--body); text-align: left; text-decoration: none; cursor: pointer;
}
.tms-row:hover { background: var(--row-hover); }
.tms-row[aria-current="true"] { background: var(--row-selected); box-shadow: inset 3px 0 0 var(--teal-600); }
.tms-row--editing { background: #FFFBEB; box-shadow: inset 3px 0 0 var(--amber); }
.tms-cell-end { justify-self: end; }
.tms-row__nr { font-size: 13px; font-weight: 600; color: var(--muted); }
.tms-row[aria-current="true"] .tms-row__nr { color: var(--teal-700); }
.tms-row__issue { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text-strong); }
.tms-row__issue--new { font-weight: 650; }
.tms-row__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-3); }
.tms-row__text--muted { color: var(--muted); }
.tms-row__when { justify-self: end; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; color: var(--muted); }
.tms-row__when--waiting { color: var(--warn-fg); font-weight: 600; }
.tms-list__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; font-size: var(--fs-small); color: var(--muted); }
.tms-list__foot strong { color: var(--ink); }

/* Skeleton (loading rows) */
.tms-skel { display: block; height: 10px; border-radius: var(--r-pill); background: var(--line-soft); animation: tmsPulse 1.2s ease-in-out infinite; }
.tms-skel--pill { width: 90px; height: 22px; }
.tms-skel--text { width: 70%; }
.tms-skel--short { width: 48px; }
@keyframes tmsPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- Split view: list + edit panel ---------- */
.tms-split { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.tms-split__list { flex: 999 1 620px; min-width: 0; }
.tms-panel { flex: 1 1 460px; max-width: 560px; min-width: 0; display: flex; flex-direction: column; box-shadow: var(--sh-panel); }
.tms-panel__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line-soft); }
.tms-panel__nr { font-size: 14px; font-weight: 700; color: var(--muted); }
.tms-panel__spacer { flex: 1; }
.tms-panel__body { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px 20px; }
.tms-panel__issue { margin: 0; font-size: 17px; line-height: 26px; font-weight: 500; color: var(--ink); }
.tms-meta { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--table-head); }
.tms-meta__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tms-meta__item dt { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tms-meta__item dd { margin: 0; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tms-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tms-panel__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding: 14px 20px;
  border-top: 1px solid var(--line-soft); background: #FBFCFC; border-radius: 0 0 var(--r-card) var(--r-card);
}
.tms-unsaved { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--amber-text); }
.tms-unsaved::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--amber); }

/* Status picker in the panel */
.tms-statuspick { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.tms-statuspick legend { padding: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.tms-statuspick__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.tms-statuspick__opt {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px;
  border-radius: var(--r-ctl); border: 1.5px solid var(--control-border); background: var(--surface);
  color: var(--text-2); font-size: 13px; font-weight: 500; cursor: pointer;
}
.tms-statuspick__opt[aria-pressed="true"] { font-weight: 700; }
.tms-statuspick__opt--started[aria-pressed="true"]  { background: var(--st-started-bg);  color: var(--st-started-fg);  border-color: var(--st-started-dot); }
.tms-statuspick__opt--progress[aria-pressed="true"] { background: var(--st-progress-bg); color: var(--st-progress-fg); border-color: var(--st-progress-dot); }
.tms-statuspick__opt--hold[aria-pressed="true"]     { background: var(--st-hold-bg);     color: var(--st-hold-fg);     border-color: var(--st-hold-dot); }
.tms-statuspick__opt--done[aria-pressed="true"]     { background: var(--st-done-bg);     color: var(--st-done-fg);     border-color: var(--st-done-dot); }
.tms-statuspick__opt--rejected[aria-pressed="true"] { background: var(--st-rejected-bg); color: var(--st-rejected-fg); border-color: var(--st-rejected-dot); }

/* ---------- Feedback ---------- */
.tms-toasts { position: fixed; top: 84px; right: 32px; z-index: 900; display: flex; flex-direction: column; gap: 10px; }
.tms-toast {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border-radius: 12px;
  background: var(--ink); color: #FFFFFF; font-weight: 600; box-shadow: var(--sh-toast);
  animation: tmsToastIn .25s ease-out both;
}
.tms-toast__icon { width: 26px; height: 26px; flex: none; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--green); }
.tms-toast--error .tms-toast__icon { background: var(--rose); }
.tms-toast__action { color: var(--teal-light); text-decoration: underline; background: none; border: 0; cursor: pointer; font-weight: 600; }
@keyframes tmsToastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.tms-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 20px; text-align: center; }
.tms-empty--boxed { padding: 22px; border: 1.5px dashed var(--control-border); border-radius: 14px; gap: 8px; }
.tms-empty__icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--teal-50); color: var(--teal-700); }
.tms-empty__title { font-size: 15px; font-weight: 600; color: var(--ink); }
.tms-empty__text { font-size: 13px; line-height: 18px; color: var(--muted); }

.tms-alert-error { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; background: var(--danger-bg); border: 1px solid var(--danger-line); }
.tms-alert-error__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--danger-hover); }
.tms-alert-error__text { font-size: 13px; line-height: 18px; color: #7F1D1D; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  :root:not(.tms-motion-always) .tms-lockup__l, :root:not(.tms-motion-always) .tms-lockup__bar, :root:not(.tms-motion-always) .tms-lockup__word, :root:not(.tms-motion-always) .tms-lockup:hover .tms-lockup__w, :root:not(.tms-motion-always) .tms-skel, :root:not(.tms-motion-always) .tms-toast { animation: none !important; }
}