:root {
  /* Sampled from the clinic logo so the header and the mark are one surface.
     --clinic-header is the logo's own background colour, which is why the
     logo sits on the navbar with no visible edge.
     Contrast: white on header 15.4:1, accent on header 5.9:1,
     white on --clinic-primary 5.3:1 (the raw accent is only 2.6:1, too low
     to put white text on, so buttons use the darkened tone). */
  --clinic-header: #1b262c;
  --clinic-header-hi: #24323a;
  --clinic-accent: #44a9df;
  --clinic-primary: #2e7297;
  --clinic-primary-dark: #26607f;
  --clinic-ink: #0f2f4f;
}

body {
  font-family: system-ui, "Segoe UI", Tahoma, "Noto Sans Arabic", "Cairo", sans-serif;
}

/* Clinical fields are written in English inside an otherwise RTL page, so the
   caret and the text start on the left where the typist expects them. */
[dir="rtl"] input[dir="ltr"],
[dir="rtl"] textarea[dir="ltr"] {
  text-align: left;
}

/* Read-only Latin data (phones, file numbers, dates) still needs dir="ltr" to
   order correctly, but a block-level dir also flips its alignment -- which left
   number columns ragged against their own RTL headers. Isolate direction
   without moving the text. Bootstrap's .text-* utilities carry !important and
   still win where a column is deliberately aligned. */
[dir="rtl"] td[dir="ltr"],
[dir="rtl"] th[dir="ltr"] {
  text-align: right;
}

.card-header {
  font-weight: 600;
}

/* OD / OS examination grid */
.exam-table th.finding {
  width: 22%;
  font-weight: 500;
  vertical-align: middle;
}
.exam-table td { vertical-align: middle; }
.exam-table input, .exam-table select { min-width: 8rem; }

.eye-od { --eye-accent: #0d6efd; }
.eye-os { --eye-accent: #198754; }
.eye-badge {
  background: var(--eye-accent);
  color: #fff;
}

#search-results .list-group { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }

.stat-tile .stat-value { font-size: 1.75rem; line-height: 1; font-weight: 600; }
.stat-tile .stat-label { font-size: .8125rem; color: var(--bs-secondary-color); }

/* Printed documents: A5 prescriptions, A4 invoices. */
@media print {
  .no-print, nav, .alert { display: none !important; }
  body { background: #fff !important; }
  main { padding: 0 !important; }
  .print-sheet { box-shadow: none !important; border: 0 !important; margin: 0 !important; }
}

.print-sheet {
  background: #fff;
  max-width: 21cm;
  margin-inline: auto;
  padding: 1.5cm;
}

/* ---- Header ------------------------------------------------------------ */

.clinic-navbar {
  background-color: var(--clinic-header);
  border-bottom: 2px solid var(--clinic-accent);
}

.clinic-navbar .nav-link:hover,
.clinic-navbar .nav-link:focus {
  color: var(--clinic-accent);
}

.clinic-navbar .navbar-brand {
  padding-block: 0;
}

/* The logo is a solid dark image, not a transparent mark, so it must not sit
   on a light plate -- that would draw a box around it on the dark header.
   It is also ~4.7:1, so height drives the width: every 1px of height costs
   4.7px across the bar. At 42px it filled a 60px navbar and read as a banner
   rather than a mark, so it sits at 30px with real breathing room. */
/* Tablets (576-991px): the nav is still collapsed behind the toggler, so there
   is room to go by width here too. */
.navbar-logo {
  height: auto;
  width: min(42vw, 260px);
  object-fit: contain;
  display: block;
}

/* Phones: drive the size by WIDTH, not height. This logo carries its name as
   artwork, and the glyphs are only ~25% of the image height -- capping height
   at 24px rendered the text near 6px, unreadable. The mobile bar holds just
   the logo and the toggler, so width is the resource to spend and the bar can
   afford to grow. 62vw leaves room for the 56px toggler down to 320px. */
@media (max-width: 575.98px) {
  .navbar-logo {
    height: auto;
    width: min(62vw, 250px);
    max-width: none;
  }
}

/* Desktop: the nav bar is expanded here, so the logo shares the row with five
   links, the search box and two dropdowns -- height is the constraint, not
   width. 40px puts the wordmark near 10px without the banner effect 42px had. */
@media (min-width: 992px) {
  .navbar-logo { height: 40px; width: auto; max-width: 240px; }
}

/* The search box is a flex sibling of the nav list; without an explicit basis
   it collapses to its (empty) content width. */
.navbar-search {
  flex: 0 1 22rem;
  min-width: 12rem;
}

.navbar-search .form-control { width: 100%; }

/* Keep nav labels on one line -- "تقرير اليوم" was wrapping and doubling the
   header height on desktop. */
.clinic-navbar .navbar-nav .nav-link { white-space: nowrap; }

/* On small screens the search box is full width under the collapsed menu. */
@media (max-width: 991.98px) {
  .navbar-search { flex: 1 1 100%; min-width: 0; }
  #search-results { position: static !important; }
}

.login-logo {
  width: 100%;
  max-width: 230px;
  height: auto;
  object-fit: contain;
}

/* ---- Accent ------------------------------------------------------------ */

.btn-primary {
  --bs-btn-bg: var(--clinic-primary);
  --bs-btn-border-color: var(--clinic-primary);
  --bs-btn-hover-bg: var(--clinic-primary-dark);
  --bs-btn-hover-border-color: var(--clinic-primary-dark);
  --bs-btn-active-bg: var(--clinic-primary-dark);
  --bs-btn-active-border-color: var(--clinic-primary-dark);
  --bs-btn-disabled-bg: var(--clinic-primary);
  --bs-btn-disabled-border-color: var(--clinic-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--clinic-primary);
  --bs-btn-border-color: var(--clinic-primary);
  --bs-btn-hover-bg: var(--clinic-primary);
  --bs-btn-hover-border-color: var(--clinic-primary);
  --bs-btn-active-bg: var(--clinic-primary);
  --bs-btn-active-border-color: var(--clinic-primary);
}

a { color: var(--clinic-primary); }
a:hover { color: var(--clinic-primary-dark); }

.form-control:focus, .form-select:focus {
  border-color: var(--clinic-accent);
  box-shadow: 0 0 0 .2rem rgba(68, 169, 223, .25);
}

.card-header { background-color: #f6f8f9; }

/* ---- Print letterhead -------------------------------------------------- */

/* On A4 (180mm of content width) a 320px-wide mark ate nearly half the
   letterhead. 52px of height keeps it about a quarter. */
.print-logo {
  height: 52px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
}

.print-sheet header { border-bottom: 2px solid var(--clinic-header) !important; }

@media print {
  /* Printers drop background colours by default; keep the mark and the
     letterhead rule visible on paper. */
  .print-logo,
  .print-sheet header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* A phone number is one token; letting it break across four lines, as it did
   on a 390px screen, makes it unreadable. */
.clinic-phone { white-space: nowrap; }

/* The letterhead is a three-column bar built for A4. On a phone the columns
   squeeze until the doctor's name wraps mid-word, so stack them instead.
   Print is unaffected -- paper is never 575px wide. */
@media (max-width: 575.98px) {
  .print-logo { height: 38px; max-width: 62vw; }
  .print-sheet { padding: 1rem; }

  .print-sheet > header {
    flex-direction: column;
    align-items: stretch !important;
    gap: .5rem;
  }
  .print-sheet > header > div { text-align: start !important; }
  .print-sheet > header .d-flex { gap: .75rem !important; }
}

.rx-symbol {
  font-size: 2rem;
  font-family: Georgia, serif;
  line-height: 1;
}

/* Static filenames are content-hashed in production (see STORAGES in
   settings.py), so editing this file changes its URL and no browser can serve
   a stale copy. scripts/deploy.sh rebuilds the manifest automatically. */