/* ==========================================================================
   Kalibra admin theme
   --------------------------------------------------------------------------
   Clinical-instrument direction: cool paper ground, deep petrol accent,
   hairline rules, tabular monospaced numerals so serials and measurements
   align down a column and can be compared by eye.

   THEMING
   Django's admin supports three states — light, dark, and "auto" which
   follows the operating system. Each needs its own variable block:

       :root                              light, and the default
       html[data-theme="light"]           light, forced by the toggle
       html[data-theme="dark"]            dark, forced by the toggle
       @media (prefers-color-scheme:dark) dark, when no choice is stored

   Declaring the same values under all three is what silently disables the
   toggle. Every surface colour below is therefore a variable — no bare
   #fff on a panel — otherwise half the interface stays white while the
   text turns pale.

   Hospital colours arrive as --org-primary from the template rather than
   overriding --primary directly, so a stored brand colour cannot win the
   specificity fight against the dark palette.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* --- light ---------------------------------------------------------------- */
:root,
html[data-theme="light"] {
  --primary: var(--org-primary, #00565E);
  --secondary: var(--org-primary, #00565E);
  --accent: var(--org-accent, #2FA8A0);
  --primary-fg: #ffffff;

  --surface: #ffffff;
  --surface-2: #F6F8F9;
  --surface-3: #FBFCFD;

  --body-fg: #0D1418;
  --body-bg: #EEF1F4;
  --body-quiet-color: #6B7A83;
  --body-loud-color: #0D1418;

  --header-color: #0D1418;
  --header-branding-color: #0D1418;
  --header-bg: #ffffff;
  --header-link-color: #6B7A83;

  --breadcrumbs-fg: #6B7A83;
  --breadcrumbs-link-fg: var(--primary);
  --breadcrumbs-bg: #F6F8F9;

  --link-fg: var(--primary);
  --link-hover-color: #023F45;
  --link-selected-fg: var(--primary);

  --hairline-color: #DFE5E9;
  --border-color: #D5DDE2;

  --error-fg: #BE1E3C;
  --ok-fg: #15715A;
  --warn-fg: #B06A00;

  --message-success-bg: #E1F0EB;
  --message-warning-bg: #FBF0DE;
  --message-error-bg: #FBE7EB;

  --chip-ok-bg: #E1F0EB;
  --chip-pending-bg: #EAF2F3;
  --chip-bad-bg: #FBE7EB;
  --chip-idle-bg: #EDF1F3;
  --chip-idle-fg: #6B7A83;

  --darkened-bg: #F6F8F9;
  --selected-bg: #EAF2F3;
  --selected-row: #FFF9E6;
  --row-hover: #F8FAFB;

  --button-bg: var(--primary);
  --button-fg: #ffffff;
  --button-hover-bg: #04737C;
  --default-button-bg: var(--primary);
  --default-button-hover-bg: #04737C;
  --close-button-bg: #6B7A83;
  --close-button-hover-bg: #55636B;
  --delete-button-bg: #BE1E3C;
  --delete-button-hover-bg: #9E1832;

  --object-tools-fg: #ffffff;
  --object-tools-bg: #33424B;
  --object-tools-hover-bg: #0D1418;

  /* The mark is transparent dark navy, drawn for white stationery. On a
     light ground it needs nothing. */
  --logo-plaque-bg: transparent;
  --logo-plaque-pad: 0;

  --font-family-primary: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-family-monospace: 'IBM Plex Mono', ui-monospace, monospace;
}

/* --- dark ----------------------------------------------------------------- */
html[data-theme="dark"] {
  /* Petrol at #00565E fails contrast on a dark ground, so the accent is
     lifted. color-mix keeps a custom hospital colour in play; browsers
     without it fall back to the fixed value declared first. */
  --primary: #48B7B0;
  --primary: color-mix(in srgb, var(--org-primary, #00565E) 45%, #7FDDD6);
  --secondary: var(--primary);
  --accent: #2FA8A0;
  --primary-fg: #08141A;

  --surface: #18222B;
  --surface-2: #1E2A34;
  --surface-3: #16202A;

  --body-fg: #DCE4E8;
  --body-bg: #0F171D;
  --body-quiet-color: #8B9BA5;
  --body-loud-color: #F2F6F8;

  --header-color: #DCE4E8;
  --header-branding-color: #DCE4E8;
  --header-bg: #18222B;
  --header-link-color: #8B9BA5;

  --breadcrumbs-fg: #8B9BA5;
  --breadcrumbs-link-fg: var(--primary);
  --breadcrumbs-bg: #131C24;

  --link-fg: var(--primary);
  --link-hover-color: #8FE4DD;
  --link-selected-fg: var(--primary);

  --hairline-color: #26333D;
  --border-color: #33434F;

  --error-fg: #F58497;
  --ok-fg: #5BC4A4;
  --warn-fg: #E0A44A;

  --message-success-bg: #16352C;
  --message-warning-bg: #372C15;
  --message-error-bg: #3A1B23;

  --chip-ok-bg: #16352C;
  --chip-pending-bg: #10333A;
  --chip-bad-bg: #3A1B23;
  --chip-idle-bg: #232F39;
  --chip-idle-fg: #8B9BA5;

  --darkened-bg: #1E2A34;
  --selected-bg: #14323A;
  --selected-row: #33290F;
  --row-hover: #1D2831;

  --button-bg: var(--primary);
  --button-fg: #08141A;
  --button-hover-bg: #6FD3CB;
  --default-button-bg: var(--primary);
  --default-button-hover-bg: #6FD3CB;
  --close-button-bg: #3B4A55;
  --close-button-hover-bg: #4A5B67;
  --delete-button-bg: #C4394F;
  --delete-button-hover-bg: #D9556A;

  --object-tools-fg: #DCE4E8;
  --object-tools-bg: #33434F;
  --object-tools-hover-bg: #46596A;

  /* Without this the hospital mark disappears entirely: dark navy artwork
     on a dark ground. A small white plaque preserves the brand's own
     colours instead of forcing a washed-out inverted variant. */
  --logo-plaque-bg: #ffffff;
  --logo-plaque-pad: 6px 10px;
}

/* Auto: follow the OS when the user has not chosen.
   `html:not([data-theme="light"])` outranks the template's inline :root
   block, which a plain :root here would lose to. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --primary: #48B7B0;
    --primary: color-mix(in srgb, var(--org-primary, #00565E) 45%, #7FDDD6);
    --secondary: var(--primary);
    --primary-fg: #08141A;

    --surface: #18222B;
    --surface-2: #1E2A34;
    --surface-3: #16202A;

    --body-fg: #DCE4E8;
    --body-bg: #0F171D;
    --body-quiet-color: #8B9BA5;
    --body-loud-color: #F2F6F8;

    --header-color: #DCE4E8;
    --header-branding-color: #DCE4E8;
    --header-bg: #18222B;
    --header-link-color: #8B9BA5;

    --breadcrumbs-fg: #8B9BA5;
    --breadcrumbs-link-fg: var(--primary);
    --breadcrumbs-bg: #131C24;

    --link-fg: var(--primary);
    --link-hover-color: #8FE4DD;

    --hairline-color: #26333D;
    --border-color: #33434F;

    --error-fg: #F58497;
    --ok-fg: #5BC4A4;
    --warn-fg: #E0A44A;

    --message-success-bg: #16352C;
    --message-warning-bg: #372C15;
    --message-error-bg: #3A1B23;

    --chip-ok-bg: #16352C;
    --chip-pending-bg: #10333A;
    --chip-bad-bg: #3A1B23;
    --chip-idle-bg: #232F39;
    --chip-idle-fg: #8B9BA5;

    --darkened-bg: #1E2A34;
    --selected-bg: #14323A;
    --selected-row: #33290F;
    --row-hover: #1D2831;

    --button-bg: var(--primary);
    --button-fg: #08141A;
    --button-hover-bg: #6FD3CB;
    --default-button-bg: var(--primary);
    --default-button-hover-bg: #6FD3CB;
    --delete-button-bg: #C4394F;

    --object-tools-fg: #DCE4E8;
    --object-tools-bg: #33434F;
    --object-tools-hover-bg: #46596A;

    --logo-plaque-bg: #ffffff;
    --logo-plaque-pad: 6px 10px;
  }
}

/* --- shell ---------------------------------------------------------------- */
body {
  font-family: var(--font-family-primary);
  font-size: 14px;
  background: var(--body-bg);
  color: var(--body-fg);
  -webkit-font-smoothing: antialiased;
}

#header {
  background: var(--header-bg);
  color: var(--body-fg);
  padding: 0 32px;
  border-bottom: 1px solid var(--hairline-color);
  display: flex;
  align-items: center;
  min-height: 74px;
}

#branding h1 {
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: center;
  margin: 0;
}
#branding h1 a,
#branding h1 a:link,
#branding h1 a:visited {
  display: flex;
  align-items: center;
  color: var(--body-fg);
  text-decoration: none;
}
#branding h1:has(.hospital-logo)::before { display: none; }

.logo-plaque {
  background: var(--logo-plaque-bg);
  padding: var(--logo-plaque-pad);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex: none;
  margin-inline-end: 18px;
  transition: background .15s;
}

.hospital-logo {
  height: var(--logo-h, 44px);
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

.brand-sep {
  width: 1px;
  height: 34px;
  background: var(--border-color);
  margin-inline-end: 18px;
  flex: none;
}

/* --- Kalibra lockup -------------------------------------------------------
   Pinned to left-to-right regardless of page direction. KALIBRA is a Latin
   word read leftwards; inheriting an RTL page would place the mark on the
   wrong side and reverse the lockup against the word inside it. */
.kalibra-lockup {
  display: flex;
  align-items: center;
  gap: 11px;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  flex: none;
}

.kalibra-mark {
  width: var(--mark-h, 34px);
  height: var(--mark-h, 34px);
  flex: none;
  display: block;
  color: var(--primary);
}

.kalibra-text { display: flex; flex-direction: column; line-height: 1.12; }

.kalibra-word {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 21px;
  font-weight: 600;
  /* Wide tracking reads as precision rather than speed — the same reason
     instrument faces space their numerals. */
  letter-spacing: 1.6px;
  color: var(--body-loud-color);
  white-space: nowrap;
}

.kalibra-sub {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 1.7px;
  color: var(--body-quiet-color);
  white-space: nowrap;
  margin-top: 3px;
}

#user-tools {
  color: var(--body-quiet-color);
  font-size: 12px;
  padding: 0;
}
#user-tools a,
#user-tools a:link,
#user-tools a:visited {
  color: var(--body-quiet-color);
  border-bottom-color: var(--hairline-color);
}
#user-tools a:hover { color: var(--primary); }
#user-tools .theme-toggle { color: var(--body-quiet-color); }
#user-tools .theme-toggle svg { fill: currentColor; }

div.breadcrumbs {
  background: var(--breadcrumbs-bg);
  color: var(--breadcrumbs-fg);
  padding: 9px 32px;
  font-size: 12px;
  border-bottom: 1px solid var(--hairline-color);
}
div.breadcrumbs a,
div.breadcrumbs a:link,
div.breadcrumbs a:visited { color: var(--breadcrumbs-link-fg); }

#content { padding: 24px 32px 60px; }

/* --- panels --------------------------------------------------------------- */
.module,
#content-related .module,
.inline-group {
  background: var(--surface);
  border: 1px solid var(--hairline-color);
  border-radius: 4px;
  overflow: hidden;
}

.module h2,
.module caption,
.inline-group h2 {
  background: var(--surface-2);
  color: var(--body-loud-color);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hairline-color);
}

#content-related { background: transparent; }

/* --- data tables ---------------------------------------------------------- */
#changelist table { font-size: 13px; background: var(--surface); }

#changelist table thead th,
.rowtbl thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-color);
  font-size: 10px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--body-quiet-color);
  padding: 10px 14px;
}

#changelist table tbody td,
#changelist table tbody th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline-color);
}

#changelist table tbody tr:hover { background: var(--row-hover); }
#changelist #toolbar { background: var(--surface-2); border-bottom: 1px solid var(--hairline-color); }
#changelist .actions { background: var(--surface-2); border-bottom: 1px solid var(--hairline-color); }
#changelist-filter { background: var(--surface); border: 1px solid var(--hairline-color); border-radius: 4px; }
#changelist-filter h2 { background: var(--surface-2); }
.paginator { background: var(--surface); border-top: 1px solid var(--hairline-color); }

/* Tabular numerals: asset tags, serials and readings line up. */
#changelist table td { font-variant-numeric: tabular-nums; }

/* Identifiers get the monospaced face so they stack into a comparable
   column: scanning fifty serials for the odd one out is a real task. */
td.field-asset_tag,
td.field-serial_col,
td.field-model_col,
td.field-serial_number,
td.field-code,
.field-asset_tag a {
  font-family: var(--font-family-monospace);
  font-size: 12px;
  white-space: nowrap;
}

html[dir="rtl"] td.field-serial_col,
html[dir="rtl"] td.field-model_col {
  direction: ltr;
  text-align: right;
  unicode-bidi: embed;
}

/* --- forms ---------------------------------------------------------------- */
.form-row { padding: 12px 16px; border-bottom: 1px solid var(--hairline-color); }
fieldset.collapsed .form-row { display: none; }

label { font-weight: 500; font-size: 12.5px; color: var(--body-fg); }

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], input[type=date], input[type=time],
textarea, select, .vTextField {
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 7px 10px;
  font-family: var(--font-family-primary);
  font-size: 13.5px;
  background: var(--surface);
  color: var(--body-fg);
  transition: border-color .12s, box-shadow .12s;
}

input:focus, textarea:focus, select:focus, .vTextField:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(47, 168, 160, .22);
  outline: none;
}

.help, p.help, div.help, .helptext {
  font-size: 11.5px;
  color: var(--body-quiet-color);
  line-height: 1.55;
  padding-top: 3px;
}

fieldset .description {
  font-size: 12px;
  color: var(--body-quiet-color);
  padding: 10px 16px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--hairline-color);
}

.selector-available, .selector-chosen { background: var(--surface); }
.selector-available h2, .selector-chosen h2 { background: var(--surface-2); }

/* --- buttons -------------------------------------------------------------- */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 3px;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 15px;
  transition: background .12s;
}

.submit-row {
  background: var(--surface);
  border: 1px solid var(--hairline-color);
  border-radius: 4px;
  padding: 12px 16px;
  margin-top: 16px;
}

/* Deleting an asset is prohibited by BR-07; the control should never look
   like a routine option. */
.deletelink, .submit-row a.deletelink { background: var(--delete-button-bg); }

/* --- messages ------------------------------------------------------------- */
ul.messagelist li {
  border-radius: 3px;
  font-size: 13px;
  padding: 11px 16px;
  color: var(--body-fg);
  border-inline-start: 3px solid var(--primary);
}
ul.messagelist li.warning { border-inline-start-color: var(--warn-fg); }
ul.messagelist li.error   { border-inline-start-color: var(--error-fg); }
ul.messagelist li.success { border-inline-start-color: var(--ok-fg); }

/* --- status colouring ----------------------------------------------------- */
.status-ok    { color: var(--ok-fg); font-weight: 600; }
.status-warn  { color: var(--warn-fg); font-weight: 600; }
.status-crit  { color: var(--error-fg); font-weight: 600; }
.status-idle  { color: var(--body-quiet-color); }

.doc-chip {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 2px;
  font-weight: 500;
  font-family: var(--font-family-primary);
}
.doc-approved { background: var(--chip-ok-bg); color: var(--ok-fg); }
.doc-pending  { background: var(--chip-pending-bg); color: var(--primary); }
.doc-rejected { background: var(--chip-bad-bg); color: var(--error-fg); }
.doc-missing  { background: var(--chip-idle-bg); color: var(--chip-idle-fg); }

/* --- RTL ------------------------------------------------------------------ */
html[dir="rtl"] .form-row label { text-align: right; }
html[dir="rtl"] #changelist table thead th { text-align: right; }

/* Codes and serials stay left-to-right inside an Arabic page, otherwise the
   hyphens in ICU-VNT-002 render in the wrong order. */
html[dir="rtl"] td.field-asset_tag,
html[dir="rtl"] td.field-serial_number,
html[dir="rtl"] td.field-code,
html[dir="rtl"] .mono {
  direction: ltr;
  text-align: right;
  unicode-bidi: embed;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  #header { padding: 0 16px; min-height: 62px; }
  .hospital-logo { height: 30px; max-width: 132px; }
  .logo-plaque { margin-inline-end: 12px; }
  .brand-sep { height: 26px; margin-inline-end: 12px; }
  .kalibra-mark { width: 26px; height: 26px; }
  .kalibra-word { font-size: 16px; letter-spacing: 1.2px; }
  .kalibra-sub { display: none; }
  div.breadcrumbs, #content { padding-inline: 16px; }
}

/* Header buttons. Bell, Suggestion, Inbox and Settings are icons (with
   tooltips); the destinations people navigate by keep their labels until
   the screen is genuinely narrow, so the hospital logo, the Kalibra mark
   and Log out are never pushed off the edge. */
#site-name .dash-link.dl-icon > span[style*="font-size:12px"] { display: none; }
@media (max-width: 1600px) {
  #branding h1 { gap: 0; }
  #site-name .dash-link { margin-inline: 4px; }
}
@media (max-width: 1280px) {
  #site-name .dash-link > span[style*="font-size:12px"] { display: none; }
}

/* Below this the wordmark drops and the mark carries the brand alone — it
   was chosen for exactly that. */
@media (max-width: 560px) {
  .kalibra-text { display: none; }
  .brand-sep { display: none; }
  /* The header row (logo, five buttons, mark) was 551px wide in one
     unbreakable line, so every page scrolled sideways on a phone and the
     hospital logo and Dashboard button sat off-screen. Let it wrap. */
  /* Django's responsive.css turns the header into a column; with wrap on, the
     user strip became a second column to the right. Stack it instead. */
  #header { flex-direction: column; flex-wrap: nowrap; align-items: stretch;
            height: auto; flex-shrink: 0; row-gap: 8px; padding-block: 10px; }
  #branding, #site-name { flex: none; width: 100%; min-width: 0; max-width: 100%; }
  /* The header buttons are <a> written inside the logo's <a>; browsers
     close the outer link first, so they end up as siblings in #site-name. */
  #site-name { flex-wrap: wrap; justify-content: center; gap: 8px; }
  #site-name .dash-link > span[style*="font-size:12px"] { display: none; }
  #header .kalibra-user { flex: none; width: 100%; justify-content: center; }
}

/* --- sidebar ---------------------------------------------------------------
   The Add links are stripped in admin_site.py, so each row is now a single
   target. Reclaiming that column lets the labels breathe instead of
   wrapping at fourteen characters.
   -------------------------------------------------------------------------- */
#nav-sidebar .app-list td,
#nav-sidebar .app-list th { padding: 0; }

#nav-sidebar caption {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--body-quiet-color);
  background: var(--surface-2);
  padding: 11px 14px;
  font-weight: 600;
}

#nav-sidebar a {
  display: block;
  padding: 9px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--hairline-color);
}

#nav-sidebar tr:last-child a { border-bottom: none; }

#nav-sidebar .current-model a,
#nav-sidebar tr.current-model {
  background: var(--selected-bg);
  font-weight: 600;
}

/* The empty column Django reserves for the removed link. */
#nav-sidebar .app-list .addlink,
#nav-sidebar td.addlink,
#nav-sidebar th.addlink { display: none; }

/* --- login page ------------------------------------------------------------
   The login screen is a narrow fixed-width card, not a full-width page, so
   the horizontal masthead does not fit: the descriptor line runs past the
   edge and is clipped. Here the two marks stack and centre instead, which
   also reads better on a page whose whole job is one small form.
   -------------------------------------------------------------------------- */
body.login #container {
  width: 26.5rem;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--hairline-color);
  border-radius: 6px;
  overflow: hidden;
  background: var(--body-bg);
}

body.login #header {
  min-height: auto;
  padding: 26px 24px 22px;
  display: block;
  text-align: center;
  background: var(--surface);
}

body.login #branding h1 { display: block; margin: 0; }

body.login #branding h1 a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* The divider turns from a vertical rule into a horizontal one, since the
   marks are now stacked rather than side by side. */
body.login .brand-sep {
  width: 62px;
  height: 1px;
  margin: 0;
}

body.login .logo-plaque { margin-inline-end: 0; }
body.login .hospital-logo { height: 40px; max-width: 210px; }

body.login .kalibra-lockup { gap: 10px; }
body.login .kalibra-mark { width: 30px; height: 30px; }
body.login .kalibra-word { font-size: 19px; letter-spacing: 1.4px; }
body.login .kalibra-sub { font-size: 8px; letter-spacing: 1.5px; }

body.login #content {
  padding: 24px 24px 8px;
  background: var(--body-bg);
}
body.login #content-main { width: 100%; }

body.login .form-row {
  padding: 0 0 14px;
  border-bottom: none;
}
body.login .form-row label {
  display: block;
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--body-quiet-color);
  margin-bottom: 6px;
}
body.login .form-row input[type=text],
body.login .form-row input[type=password] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
}

body.login .submit-row {
  margin: 4px 0 0;
  padding: 0 0 20px;
  border: none;
  background: transparent;
}
body.login .submit-row input[type=submit] {
  width: 100%;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
}

body.login .password-reset-link { text-align: center; padding-bottom: 18px; font-size: 12.5px; }
body.login #login-form .help { font-size: 11.5px; }
body.login ul.messagelist { margin: 0 24px; }

@media (max-width: 480px) {
  body.login #container { width: calc(100vw - 24px); }
  body.login .hospital-logo { height: 34px; max-width: 170px; }
}

/* --- messages, RTL corrected ----------------------------------------------
   Django paints the status icon as a background image with a left indent.
   On an RTL page the indent applies to the wrong side, so the icon lands on
   top of the text. Rather than flipping the offsets, the icon is dropped and
   the same information is carried by the coloured rule already on the block
   plus a glyph in ::before, which follows the writing direction for free.
   -------------------------------------------------------------------------- */
ul.messagelist { padding: 0; margin: 0 0 16px; }

ul.messagelist li {
  background-image: none !important;
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.55;
}

ul.messagelist li::before {
  font-family: var(--font-family-monospace);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.45;
  flex: none;
}
ul.messagelist li.success::before { content: "\2713"; color: var(--ok-fg); }
ul.messagelist li.warning::before { content: "!";      color: var(--warn-fg); }
ul.messagelist li.error::before   { content: "\2715"; color: var(--error-fg); }
ul.messagelist li.info::before,
ul.messagelist li.debug::before   { content: "\2022"; color: var(--primary); }

/* --- password field --------------------------------------------------------
   Django renders the stored hash's composition — algorithm, iteration count,
   masked salt and digest. It is technically honest (the password itself is
   never stored and cannot be shown) but it is noise on a daily-use screen,
   and a wall of asterisks reads as an error to anyone who has not seen it
   before.

   The readout is hidden and the change-password link kept, which is the only
   actionable part. Nothing is weakened: this only removes a display of data
   that was already masked.
   -------------------------------------------------------------------------- */
div.form-row.field-password div.readonly,
div.form-row.field-password .vPasswordField,
.field-password div.readonly,
.readonly .vPasswordField {
  display: none !important;
}

.password-action .button { text-decoration: none; }
.password-action .help { margin-top: 7px; max-width: 52ch; }

/* The link Django appends after the readout is preserved and promoted. */
div.form-row.field-password .help,
div.form-row.field-password .helptext {
  padding-top: 0;
  font-size: 13px;
}

div.form-row.field-password .help a,
div.form-row.field-password .helptext a {
  display: inline-block;
  margin-top: 2px;
  font-weight: 500;
}

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

/* Persistent way back to the dashboard from any screen — the operations
   view is where a shift starts and where it is checked throughout, so it
   should never be more than one click away. */
/* A small pill button with a line-drawn house icon, matching the K mark's
   stroke weight and round caps — the bare "⌂" glyph it replaced renders
   inconsistently across fonts and operating systems, which reads as
   unpolished on exactly the element meant to be the fastest way back to
   the operations view. */
.dash-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  /* Breathing room on both sides — it sits between the hospital mark and
     the Kalibra lockup, and needs to read as its own control rather than
     as part of either logo. */
  margin-inline-start: 18px;
  margin-inline-end: 18px;
  border: 1px solid var(--hairline-color);
  border-radius: 5px;
  color: var(--body-quiet-color);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: border-color .12s, color .12s, background .12s;
  flex: none;
}
.dash-link:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--selected-bg);
}
.dash-link svg { width: 15px; height: 15px; flex: none; }

/* No dashboard exists yet on the login screen — the link only makes sense
   once someone is actually signed in. */
body.login .dash-link { display: none; }

@media (max-width: 700px) {
  .dash-link span { display: none; }
  .dash-link { padding: 6px 9px; }
}


/* --- trademark mark & credit ------------------------------------------
   ™ rather than ® deliberately: ® is reserved in law for a mark that has
   actually completed formal registration, and Kalibra has not. ™ carries
   no such requirement and is the correct symbol for a name in use but not
   yet registered — swapping to ® later, once registration is complete,
   is a one-line change here rather than a hunt through every template.
   -------------------------------------------------------------------- */
.tm {
  font-size: 0.5em;
  font-weight: 500;
  vertical-align: super;
  margin-inline-start: 1px;
  opacity: .75;
}

.kalibra-credit {
  text-align: center;
  font-size: 10.5px;
  color: var(--body-quiet-color);
  padding: 14px 16px 22px;
  letter-spacing: .2px;
}


/* ==========================================================================
   Admin index (home) — "Biomedical Engineering" landing
   --------------------------------------------------------------------------
   Scoped to `body.dashboard` so only the home page is touched; changelists,
   forms and the rest of the admin keep the plain `.module` styling above.
   Every colour is a theme variable, so light and dark both hold.
   ========================================================================== */

/* Two columns: the app groups on the lead side, Recent actions on the trail
   side. Collapses to one column on a narrow screen. */
body.dashboard #content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 26px;
  align-items: start;
  max-width: 1280px;
}
body.dashboard #content-main { min-width: 0; }
body.dashboard #content-related {
  float: none;
  width: auto;
  margin: 0;
  position: static;
}
@media (max-width: 1040px) {
  body.dashboard #content { grid-template-columns: 1fr; }
  body.dashboard #content-related { order: 2; }
}

/* Page title: the app name set as a quiet, confident heading rather than the
   browser-default black slab. */
body.dashboard #content > h1,
body.dashboard #content-main > h1 {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--body-loud-color);
  margin: 2px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline-color);
}

/* --- app group cards ------------------------------------------------------ */
body.dashboard .app-list,
body.dashboard #content-main { display: block; }

body.dashboard #content-main .module {
  background: var(--surface);
  border: 1px solid var(--hairline-color);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(13,20,24,.04), 0 2px 8px rgba(13,20,24,.05);
}
body.dashboard #content-main .module table { width: 100%; border-collapse: collapse; }

/* Caption bar: a petrol hairline on the lead edge, roomier than the default,
   the section name set as a label rather than a link. */
body.dashboard #content-main .module caption,
body.dashboard #content-main .module h2 {
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline-color);
  border-inline-start: 3px solid var(--primary);
  padding: 13px 18px;
  text-align: start;
}
body.dashboard #content-main .module caption a.section,
body.dashboard #content-main .module caption a.section:link,
body.dashboard #content-main .module caption a.section:visited {
  color: var(--body-loud-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-decoration: none;
}

/* Rows: a full-width target with a quiet hover and a hairline between. */
body.dashboard #content-main .module tbody tr {
  border-bottom: 1px solid var(--hairline-color);
  transition: background .12s;
}
body.dashboard #content-main .module tbody tr:last-child { border-bottom: none; }
body.dashboard #content-main .module tbody tr:hover { background: var(--row-hover); }

body.dashboard #content-main .module tbody th,
body.dashboard #content-main .module tbody td {
  padding: 0;
  border: none;
  vertical-align: middle;
}

/* The model name — the real target — fills the row. */
body.dashboard #content-main .module tbody th { width: 100%; }
body.dashboard #content-main .module tbody th a,
body.dashboard #content-main .module tbody th a:link,
body.dashboard #content-main .module tbody th a:visited {
  display: block;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body-fg);
  text-decoration: none;
}
body.dashboard #content-main .module tbody th a:hover { color: var(--primary); }

/* Change / View / Add: a small quiet action pinned to the trailing edge. */
body.dashboard #content-main .module tbody td { white-space: nowrap; text-align: end; }
body.dashboard #content-main .module tbody td a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-end: 12px;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--body-quiet-color);
  text-decoration: none;
  transition: border-color .12s, color .12s, background .12s;
}
body.dashboard #content-main .module tbody tr:hover td a {
  border-color: var(--hairline-color);
  color: var(--body-fg);
}
body.dashboard #content-main .module tbody td a:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--selected-bg);
}
body.dashboard #content-main .module tbody td a.addlink:hover {
  border-color: var(--ok-fg);
  color: var(--ok-fg);
}

/* --- Recent actions ------------------------------------------------------- */
body.dashboard #content-related .module {
  background: var(--surface);
  border: 1px solid var(--hairline-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(13,20,24,.04), 0 2px 8px rgba(13,20,24,.05);
}
body.dashboard #content-related .module h2 {
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline-color);
  border-inline-start: 3px solid var(--accent);
  padding: 13px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--body-loud-color);
}
body.dashboard #content-related h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--body-quiet-color);
  padding: 14px 18px 0;
  margin: 0;
}

body.dashboard .actionlist { margin: 6px 0 10px; padding: 0; list-style: none; }
body.dashboard .actionlist li {
  position: relative;
  margin: 0;
  padding: 10px 18px 10px 40px;
  background: none;              /* drop Django's background-image icon */
  border-bottom: 1px solid var(--hairline-color);
  font-size: 13px;
  line-height: 1.4;
}
html[dir="rtl"] body.dashboard .actionlist li { padding: 10px 40px 10px 18px; }
body.dashboard .actionlist li:last-child { border-bottom: none; }

/* A colour-coded dot marks the kind of action, replacing the mixed glyphs. */
body.dashboard .actionlist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 18px;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}
body.dashboard .actionlist li.addlink::before    { background: var(--ok-fg); }
body.dashboard .actionlist li.changelink::before { background: var(--primary); }
body.dashboard .actionlist li.deletelink::before  { background: var(--error-fg); }

body.dashboard .actionlist li a,
body.dashboard .actionlist li a:link,
body.dashboard .actionlist li a:visited {
  color: var(--body-fg);
  font-weight: 500;
  text-decoration: none;
}
body.dashboard .actionlist li a:hover { color: var(--primary); }

/* The content-type line under each action. */
body.dashboard .actionlist .mini,
body.dashboard .actionlist li .mini.quiet {
  display: block;
  font-size: 11px;
  color: var(--body-quiet-color);
  margin-top: 1px;
}

body.dashboard #content-related .module p {
  padding: 14px 18px;
  font-size: 12.5px;
  color: var(--body-quiet-color);
  margin: 0;
}

/* ==========================================================================
   Section headings as solid bars, and the Back button.

   These used to be applied by a script in base_site.html after the page had
   loaded, on top of two blue palette overrides and a grey !important rule —
   four layers that fought each other, flashed on every page load and
   ignored the facility's own colour. One rule set now, in the stylesheet:
   the palette above (driven by --org-primary) stays the single source.
   ========================================================================== */
:root, html[data-theme="light"] { --heading-bg: var(--org-primary, #00565E); --heading-fg: #fff; }
html[data-theme="dark"] { --heading-bg: color-mix(in srgb, var(--org-primary, #00565E) 70%, #000); --heading-fg: #fff; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --heading-bg: color-mix(in srgb, var(--org-primary, #00565E) 70%, #000);
  }
}

/* !important is deliberate: Django's own rules for these headings sit at
   higher specificity (#changelist-filter h2, #nav-sidebar .module caption,
   fieldset .fieldset-heading, :not(.inline-related) .collapse summary). */
.module h2, .module caption, .inline-group h2, table caption,
fieldset .fieldset-heading, #changelist-filter h2, #nav-sidebar .module caption {
  background: var(--heading-bg) !important;
  color: var(--heading-fg) !important;
  font-weight: 700;
}
.module h2 *, .module caption *, .inline-group h2 *, table caption *,
#nav-sidebar .module caption * { color: var(--heading-fg) !important; }

/* Collapsible fieldsets (Django 5 renders <details><summary><h2>). The bar
   must span the full width, not only the text of the heading. */
fieldset.module details > summary {
  display: flex !important; align-items: center; gap: 8px;
  background: var(--heading-bg) !important; color: var(--heading-fg) !important;
  border: 0 !important; padding: 0 0 0 14px !important; cursor: pointer; list-style: none;
}
html[dir="rtl"] fieldset.module details > summary { padding: 0 14px 0 0 !important; }
fieldset.module details > summary::-webkit-details-marker { display: none; }
fieldset.module details > summary::before {
  content: "\25B8"; font-size: 12px; transition: transform .15s;
}
html[dir="rtl"] fieldset.module details > summary::before { content: "\25C2"; }
fieldset.module details[open] > summary::before { transform: rotate(90deg); }
html[dir="rtl"] fieldset.module details[open] > summary::before { transform: rotate(-90deg); }
fieldset.module details > summary h2 {
  flex: 1; display: block !important; background: transparent !important;
  padding: 11px 16px 11px 4px !important;
}

/* Selects were clipped at the bottom ("Class IIa", "Medium"): the shared
   7px padding plus the admin's fixed height left no room for descenders. */
select { height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; line-height: 1.4; }

.kal-back{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;
  color:var(--primary);text-decoration:none;font-size:13px;font-weight:600;
  padding:6px 12px;border:1px solid var(--hairline-color,#DFE5E9);border-radius:6px;background:var(--surface,#fff)}
.kal-back:hover{border-color:var(--primary)}
.object-tools .kal-back{margin:0}  /* line up with Export / Import / Add */
.kal-back svg{width:14px;height:14px}
html[dir="rtl"] .kal-back svg{transform:scaleX(-1)}