/* ==========================================================================
   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; }
}

/* 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; }
}

/* --- 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;
}