/* ============================================================================
   healthxnet-overrides.css
   RHIONet guiapp theme — "Clinical Precision"

   A refined-minimalist + assertive layer over Tabler 3.43.0. Loaded AFTER
   tabler.min.css in layout/main.html so these rules win without !important
   (except where Tabler itself uses inline/!important shadows).

   Design intent:
     - Minimalist : remove visual noise (pill-button nav, card shadows, soft
                    blobby radii). Let whitespace and hairlines carry structure.
     - Assertive  : the retained HealthXnet teal does decisive work in a few
                    high-impact places (nav active rail, page-title underline,
                    a brand hairline at the top of the viewport), not as a timid
                    wash over everything. Tight geometry + tight heading
                    tracking read as "confident".
     - Same colors: the teal palette (#0d9488 family) is preserved verbatim
                    from the previous inline <style> block — this is the
                    "retain the same colors" contract.

   This file replaces the inline <style> block that used to live in
   layout/main.html (THEME_PLAN step 6).
   ============================================================================ */

:root {
  /* ---- Brand palette — RETAINED VERBATIM. Overriding these custom props
          cascades into every Tabler component that consumes --tblr-primary
          (buttons, links, focus rings, active states, badges) without
          touching them individually. ---- */
  --tblr-primary: #0d9488;
  --tblr-primary-rgb: 13, 148, 136;
  --tblr-primary-darken: #0f766e;
  --tblr-link-color: #0d9488;
  --tblr-link-color-rgb: 13, 148, 136;
  --tblr-link-hover-color: #115e59;

  /* ---- Teal scale derived from the brand color ---- */
  --hxn-teal:        #0d9488;
  --hxn-teal-dark:   #0f766e;
  --hxn-teal-darker: #115e59;
  --hxn-teal-tint:   #f0fdfa;   /* faint wash for hover/active surfaces */
  --hxn-teal-border: #99f6e4;

  /* ---- Minimalist neutrals ---- */
  --hxn-ink:     #0b1620;       /* near-black — assertive headings */
  --hxn-body:    #36414b;       /* default body text */
  --hxn-muted:   #8a949e;       /* secondary / meta text */
  --hxn-hair:    #e7eaee;       /* hairline borders everywhere */
  --hxn-surface: #ffffff;       /* cards, sidebar */
  --hxn-canvas:  #f7f8fa;       /* page canvas — cool, calm */

  /* ---- Decisive geometry: tight radii, no soft blobs ---- */
  --tblr-border-radius:    4px;
  --tblr-border-radius-sm: 3px;
  --tblr-border-radius-lg: 5px;

  /* ---- Heading-font hook. Drop a self-hosted display face here (one line)
          without touching any markup. Defaults to Tabler's UI stack — no
          external webfont is loaded for this internal app. ---- */
  --hxn-font-display: var(--tblr-font-sans-serif);
}

/* ============================================================
   1. Canvas & global tone
   ============================================================ */
body {
  background-color: var(--hxn-canvas);
  color: var(--hxn-body);
}

/* Assertive brand signal: one decisive teal hairline pinned to the very top
   of the viewport. Minimal real estate, maximal "this is ours". Sits below
   Tabler's modal layer (z 1050+) so it never paints over dialogs. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--hxn-teal);
  z-index: 1040;
}

/* ============================================================
   2. Sidebar — flat, quiet, with an assertive active rail
   ============================================================ */
.navbar-vertical {
  background-color: var(--hxn-surface);
  border-right: 1px solid var(--hxn-hair);
}

/* Flatten the old white "pill" buttons into clean flat rows. Structure now
   comes from spacing + a left accent rail, not a border/shadow on every item. */
.navbar-vertical .navbar-nav .nav-link {
  position: relative;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  margin: 1px 12px;
  padding: 9px 12px 9px 14px;
  color: var(--hxn-body);
  font-weight: 500;
  transition: color .15s ease, background-color .15s ease;
}

/* The signature assertive move: a teal rail that appears on hover/active.
   Implemented as ::before so it fades in cleanly and never reflows the label. */
.navbar-vertical .navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  left: -4px;            /* nestles into the 12px margin gutter */
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background-color .15s ease;
}
.navbar-vertical .navbar-nav .nav-link:hover {
  background-color: var(--hxn-teal-tint);
  color: var(--hxn-teal-darker);
}
.navbar-vertical .navbar-nav .nav-link:hover::before,
.navbar-vertical .navbar-nav .nav-link.active::before {
  background: var(--hxn-teal);
}
.navbar-vertical .navbar-nav .nav-link.active {
  color: var(--hxn-teal-dark);
  font-weight: 600;
  background-color: var(--hxn-teal-tint);
}
.navbar-vertical .navbar-nav .nav-link.disabled {
  color: #b7bdc4;
  background-color: transparent;
}
.navbar-vertical .navbar-nav .nav-link.disabled::before {
  background: transparent;
}

/* Icon strokes carry the brand teal; the label stays neutral so the two read
   as distinct elements. (Tabler icons draw with stroke="currentColor".) */
.navbar .nav-link .nav-link-icon          { color: var(--hxn-teal); }
.navbar .nav-link:hover .nav-link-icon    { color: var(--hxn-teal-darker); }
.navbar .nav-link.active .nav-link-icon   { color: var(--hxn-teal-dark); }
.navbar .nav-link.disabled .nav-link-icon { color: #c2c8ce; }

/* ============================================================
   3. Top bar — dissolved into the page; just a greeting + actions
   ============================================================ */
.page-wrapper > header.navbar {
  background-color: transparent;
  box-shadow: none !important;
  border-bottom: 1px solid var(--hxn-hair);
}
/* "Welcome to HealthXnet" recedes — the page title below carries the weight. */
.page-wrapper > header.navbar .fs-4 {
  font-size: 1rem !important;
  font-weight: 500;
  color: var(--hxn-muted) !important;
  letter-spacing: .01em;
}

/* ============================================================
   4. Assertive typographic hierarchy
   ============================================================ */
.page-title {
  font-family: var(--hxn-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -.02em;        /* tight tracking = confident */
  color: var(--hxn-ink);
  margin-bottom: 1.25rem;
  padding-bottom: .5rem;
  position: relative;
}
/* A short, decisive teal underline anchors every page heading. */
.page-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--hxn-teal);
}

/* Card headers double as section labels: small, uppercase, tracked out —
   the "assertive minimal" tell (labels announce themselves). Form field
   labels are deliberately NOT uppercased: on a dense data-entry form that
   would hurt scannability. They get weight instead. */
.card-header .card-title {
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hxn-ink);
}
.form-label {
  font-weight: 600;
  color: var(--hxn-body);
}

/* ============================================================
   5. Surfaces — flat, hairline-bordered, no drop shadows
   ============================================================ */
.card {
  border: 1px solid var(--hxn-hair);
  box-shadow: none;
  background: var(--hxn-surface);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--hxn-hair);
}
/* Dropdowns (e.g. Customer Service) — crisp panel, restrained shadow. */
.dropdown-menu {
  border: 1px solid var(--hxn-hair);
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: 0 6px 20px rgba(11, 22, 32, .08);
}

/* ============================================================
   6. Inputs — crisp, calm, decisive teal focus
   ============================================================ */
.form-control,
.form-select {
  border-color: var(--hxn-hair);
  border-radius: var(--tblr-border-radius);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--hxn-teal);
  box-shadow: 0 0 0 2px rgba(var(--tblr-primary-rgb), .18);
}

/* ============================================================
   7. Buttons — flat, confident, no gradient
   ============================================================ */
.btn {
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--tblr-border-radius);
}
/* Tabler/Bootstrap 5.3 buttons read these per-button custom props, so we
   recolor primary without redeclaring background/hover rules by hand. */
.btn-primary {
  --tblr-btn-bg: var(--hxn-teal);
  --tblr-btn-border-color: var(--hxn-teal);
  --tblr-btn-hover-bg: var(--hxn-teal-dark);
  --tblr-btn-hover-border-color: var(--hxn-teal-dark);
  --tblr-btn-active-bg: var(--hxn-teal-darker);
  --tblr-btn-active-border-color: var(--hxn-teal-darker);
  box-shadow: none;
}

/* ============================================================
   8. Tables — minimal rules, assertive column headers
   ============================================================ */
.table > thead > tr > th {
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--hxn-muted);
  border-bottom: 2px solid var(--hxn-hair);
}