/* ============================================================
   CareIT Hospital Inventory — Medical theme overlay
   Loads AFTER careit.css. Re-skins the indigo "Business OS"
   base into a clinical teal medical identity. Remove this one
   <link> to revert entirely — nothing else depends on it.
   ============================================================ */

:root {
  /* Brand ramp → clinical teal (matches the logo) */
  --brand-50:  #f0fdfa;
  --brand-100: #d6f5ef;
  --brand-200: #a7e8dd;
  --brand-300: #6ed7c8;
  --brand-400: #33bcac;
  --brand-500: #14a394;
  --brand-600: #0d9488;
  --brand-700: #0f766e;
  --brand-800: #115e59;
  --brand-900: #124f49;
  --accent:        #0891b2;   /* cyan secondary */
  --accent-strong: #0e7490;

  /* Neutrals → cool clinical (subtle blue-green cast, lots of white) */
  --bg:        #eef3f5;
  --bg-raise:  #ffffff;
  --bg-sunk:   #e3ecef;
  --bg-hover:  #edf6f5;
  --bg-active: #dbecec;
  --border:    #dbe7ea;
  --border-strong: #c3d5da;
  --text:      #102a31;
  --text-2:    #45616a;
  --text-3:    #61737a;

  /* Info → clinical cyan (was indigo-blue) */
  --info:    #0891b2;  --info-bg:  #ecfeff;  --info-border: #a5eef7;

  /* Charts — lead with teal, keep a colourblind-safe spread */
  --ch-1: #0d9488; --ch-2: #f59e0b; --ch-3: #0891b2; --ch-4: #ec4899;
  --ch-5: #84cc16; --ch-6: #6366f1; --ch-7: #ef4444; --ch-8: #64748b;
}

[data-theme="dark"] {
  --bg:        #0a1416;
  --bg-raise:  #10201f;
  --bg-sunk:   #071011;
  --bg-hover:  #15302c;
  --bg-active: #1b3b36;
  --border:    #1e3733;
  --border-strong: #2c4f49;
  --text:      #e6f2ef;
  --text-2:    #a2bdb7;
  --text-3:    #8aa5a0;
}

/* selection / focus stay teal */
::selection { background: var(--brand-200); color: var(--brand-900); }
[data-theme="dark"] ::selection { background: var(--brand-800); color: #fff; }

/* ---- logo mark: teal, not indigo→purple ---- */
.logo-mark {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500) 58%, var(--accent));
  box-shadow: 0 4px 12px rgba(13,148,136,.35);
}
.logo-word span { color: var(--brand-600); font-weight: 600; }

/* ---- sidebar: faint clinical wash + teal active pill with left rail ---- */
.sidebar { background: linear-gradient(180deg, #ffffff, #fafefe 60%, #f4fbfa); }
[data-theme="dark"] .sidebar { background: linear-gradient(180deg, var(--bg-raise), #0d1c1b); }
.nav-item.active {
  background: var(--brand-50); color: var(--brand-700);
  box-shadow: inset 3px 0 0 var(--brand-600);
}
[data-theme="dark"] .nav-item.active {
  background: rgba(13,148,136,.16); color: var(--brand-300);
  box-shadow: inset 3px 0 0 var(--brand-500);
}
.nav-item.active .nav-badge { background: var(--brand-100); color: var(--brand-700); }
[data-theme="dark"] .nav-item.active .nav-badge { background: rgba(13,148,136,.28); color: var(--brand-200); }
.nav-group-label { color: var(--brand-700); opacity: .72; }
[data-theme="dark"] .nav-group-label { color: var(--brand-300); opacity: .6; }

/* ---- buttons: teal shadow instead of indigo ---- */
.btn-primary { box-shadow: 0 1px 2px rgba(13,148,136,.45), inset 0 1px 0 rgba(255,255,255,.16); }

/* ---- cards: softer clinical elevation ---- */
.card { box-shadow: 0 1px 2px rgba(16,42,49,.05), 0 1px 3px rgba(16,42,49,.04); }

/* ---- stat tiles: a thin teal capline for a "vitals" feel ---- */
.stat { border-top: 3px solid transparent; }
.stat::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--brand-500), var(--accent));
}

/* ---- data tables: clinical tinted header ---- */
.dt thead th {
  background: var(--brand-50); color: var(--brand-800);
  border-bottom: 1px solid var(--brand-100);
  text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-xs);
}
[data-theme="dark"] .dt thead th {
  background: rgba(13,148,136,.10); color: var(--brand-200); border-bottom-color: var(--border);
}
.dt a.rowlink:hover { color: var(--brand-600); }

/* ---- badges brand tone in dark ---- */
[data-theme="dark"] .badge-brand { background: rgba(13,148,136,.16); border-color: rgba(13,148,136,.4); color: var(--brand-300); }
[data-theme="dark"] .tab.active { color: var(--brand-400); border-bottom-color: var(--brand-400); }
[data-theme="dark"] .cmdk-item.sel { background: rgba(13,148,136,.14); }

/* ---- login hero: clinical teal with a faint medical-plus motif ---- */
.auth-hero {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 17v14 M17 24h14' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat,
    radial-gradient(820px 520px at 82% -12%, rgba(45,212,191,.32), transparent 60%),
    radial-gradient(720px 620px at -12% 112%, rgba(8,145,178,.30), transparent 55%),
    linear-gradient(158deg, #0f766e, #0d9488 46%, #0e7490);
  background-size: 48px 48px, auto, auto, auto;
}

/* topbar: crisp clinical hairline */
.topbar { background: var(--bg-raise); border-bottom: 1px solid var(--border); }

/* inputs: teal focus ring already via --brand-500; soften radius */
.input:focus, .input-search:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(13,148,136,.14); }

/* ---- inventory program phases bar (own class — never clips like .inv-view-row) ---- */
.inv-phase-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inv-view-chip.is-active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.inv-view-chip.is-active:hover { color: #fff; }

/* ---- phases "?" help — in-flow block, cannot be clipped ---- */
.inv-phase-help > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  width: max-content; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-700); }
.inv-phase-help > summary::-webkit-details-marker { display: none; }
.inv-phase-help > summary .q { width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--brand-50); border: 1px solid var(--brand-100); font-weight: 700; font-size: 12px; color: var(--brand-700); }
.inv-phase-help[open] > summary .q { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.inv-phase-help-body { margin-top: 10px; max-width: 660px; background: var(--bg-raise); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 14px 16px; font-size: var(--fs-sm); line-height: 1.55; }
.inv-phase-help-body p { margin: 0 0 8px; color: var(--text-2); }
.inv-phase-help-body p:last-child { margin: 0; }
.inv-phase-help-body b { color: var(--text); }
.inv-phase-help-body .nxt b { color: var(--brand-700); }

/* ---- form-grid column modifiers (multi-field forms were cramped: .cols-4 was undefined) ---- */
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-grid.cols-4, .form-grid.cols-3 { row-gap: 14px; }
@media (max-width: 1100px) { .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) { .form-grid.cols-4, .form-grid.cols-3 { grid-template-columns: 1fr; } }
/* Bare <label> cells in a form-grid must stack (label above input) like .field does */
.form-grid > label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; min-width: 0; }
.form-grid > label > span { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.form-grid > label > .input, .form-grid > label > select, .form-grid > label > input { width: 100%; }

/* .card-body was undefined — form content stuck to the card edges. Inset it. */
.card-body { padding: 20px; }
.card-body > .form-grid { margin-bottom: 4px; }

/* ---- pagination buttons (custom views use <a> and <button.pg-btn>) ---- */
.pagination button.pg-btn { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px; border-radius: 7px; font: inherit; font-weight: 600; font-size: var(--fs-sm); color: var(--text-2);
  background: transparent; border: 1px solid transparent; cursor: pointer; }
.pagination button.pg-btn:hover { background: var(--bg-hover); }

/* Skip link: keyboard users should not have to tab the whole sidebar to reach
   the page. Off-screen until focused, then pinned top-left over everything. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:10px 16px;
  background:var(--brand-600,#0d9488);color:#fff;font-weight:600;border-radius:0 0 6px 0;
  text-decoration:none}
.skip-link:focus{left:0}

/* WCAG 2.5.8: minimum 24x24 pointer targets for check controls */
.check input[type=checkbox],
.inv-inline-checks input[type=checkbox],
.inv-check-label input[type=checkbox],
.profile-card input[type=radio]{width:24px;height:24px;accent-color:var(--brand-600)}