/* Watson HHMS admin theme:
   - branding (blue W logo + wordmark)
   - full-width home dashboard: larger app boxes in a responsive grid
   - persistent Home button
   - a clearly visible, reopenable sidebar toggle
   (Auto-hide / hover-to-expand navigation was removed per request.)
*/

/* ------------------------------------------------------------------ */
/* Branding                                                            */
/* ------------------------------------------------------------------ */
#site-name a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;            /* override the admin's default yellow header link */
}
.hhms-logo { flex: 0 0 auto; display: block; }
.hhms-wordmark { display: inline-flex; align-items: baseline; gap: 8px; letter-spacing: .2px; }
.hhms-name { color: #ffffff; font-weight: 800; }
/* "powered by watson" — blue and smaller, after HHMS */
.hhms-tag {
  color: #7cc0ff;
  font-weight: 400;
  font-size: .58em;
  letter-spacing: .3px;
  text-transform: none;
}

/* ------------------------------------------------------------------ */
/* Home button (injected into the header user tools by admin.js)       */
/* ------------------------------------------------------------------ */
/* HOME / DASHBOARD / REPORTS. A 45%-alpha outline with no fill read as three
   faint words rather than three buttons, and they are the only navigation on
   that header -- the last thing that should recede.

   The fill is black at 22%, not white. White is the obvious choice and it is
   the wrong one: the header ground is a mid-tone teal, so a translucent white
   fill lightens it *towards* the white label and takes the text from 4.98:1
   down to 3.65:1 -- a pill that looks more like a button and reads worse.
   Darkening the ground moves the other way. Measured on #417690:

     no fill, white border     text 4.98:1   (what it did before)
     white fill  16%           text 3.65:1   border 2.93:1
     black fill  22%           text 7.08:1   border 5.66:1   <-- this
     black fill  35%           text 8.81:1   border 7.51:1

   `--header-bg` is `--secondary`, and dark_mode.css does not override
   `--secondary`, so the header stays that same teal in both schemes. That is
   why one treatment is correct here and no dark variant is needed -- unlike
   the console topbar, this ground does not move. Dark-scheme figures track
   within a tenth: 6.61:1 text, 5.66:1 border. */
#user-tools .hhms-home {
  display: inline-block;
  padding: 3px 12px;
  margin-right: 8px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  color: var(--header-link-color, #fff);
  font-weight: 700;
  line-height: 1.4;
}
#user-tools .hhms-home:hover {
  background: rgba(0, 0, 0, .38);
  border-color: #fff;
  text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Home dashboard: full-width responsive grid of larger app boxes      */
/* The dashboard renders <div id="content-main" class="app-list"> with */
/* one <div class="app-x module"> card per app. We lay them out edge-  */
/* to-edge in a grid and enlarge the cards.                            */
/* ------------------------------------------------------------------ */
.dashboard #content { display: block; }

.dashboard #content-main.app-list {
  float: none;
  width: 100%;
  margin: 0 0 26px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.dashboard #content-main.app-list .module {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
  display: flex;
}
.dashboard #content-main.app-list .module > table {
  width: 100%;
  border-collapse: collapse;
}

/* Bigger, bolder app header (the blue section bar). */
.dashboard #content-main.app-list .module caption { padding: 0; }
.dashboard #content-main.app-list .module caption a.section {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 16px 20px;
}

/* Roomier model rows. */
.dashboard #content-main.app-list .module tbody th,
.dashboard #content-main.app-list .module tbody td {
  padding: 12px 20px;
  font-size: .95rem;
}

/* Recent actions panel: full width below the app grid. */
.dashboard #content-related {
  float: none;
  width: 100%;
  margin: 0;
}
.dashboard #content-related .module { border-radius: 12px; }

/* ------------------------------------------------------------------ */
/* Sidebar toggle — make it obvious and always reopenable              */
/* ------------------------------------------------------------------ */
#toggle-nav-sidebar {
  width: 26px;
  background: var(--body-bg, #f8f9fa);
  border-right: 1px solid var(--hairline-color, #e0e0e0);
  color: var(--body-quiet-color, #666);
  font-size: 16px;
  opacity: 1;
}
#toggle-nav-sidebar::before {
  content: "\2630"; /* ☰ */
  display: block;
  text-align: center;
}
#toggle-nav-sidebar:hover {
  background: var(--selected-bg, #e7f0ff);
  color: var(--link-fg, #2563eb);
}

/* ------------------------------------------------------------------ */
/* Reporting dashboard + reports                                       */
/* ------------------------------------------------------------------ */
.hhms-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin: 6px 0 18px;
}
.hhms-metric {
  background: var(--darkened-bg, #f8f9fa);
  border: 1px solid var(--hairline-color, #e0e0e0);
  border-radius: 12px;
  padding: 16px 18px;
}
.hhms-metric-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--link-fg, #2563eb); }
.hhms-metric-label { margin-top: 4px; font-weight: 600; }
.hhms-metric-hint { color: var(--body-quiet-color, #666); font-size: .85rem; }

.hhms-panels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
  align-items: start;
}
.hhms-panel { margin: 0; border-radius: 12px; overflow: hidden; }
.hhms-panel h2 { font-size: 1rem; }
.hhms-panel table { width: 100%; }

.hhms-filter { margin: 4px 0 12px; display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.hhms-filter label { display: flex; flex-direction: column; font-size: .85rem; gap: 3px; }
.hhms-report-table { overflow-x: auto; }
.hhms-report-table table { width: 100%; }

/* "Reports & Dashboards" banner on the admin home page */
.hhms-home-reports {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 22px;
  padding: 18px 22px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
}
.hhms-home-reports h2 { margin: 0; color: #fff; font-size: 1.25rem; }
.hhms-home-reports p { margin: 4px 0 0; color: #dbeafe; }
.hhms-home-reports-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hhms-home-reports .button { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.hhms-home-reports .button.hhms-primary { background: #fff; color: #1e3a8a; border-color: #fff; font-weight: 700; }
.hhms-home-reports .button:hover { background: rgba(255, 255, 255, .30); }
.hhms-home-reports .button.hhms-primary:hover { background: #eff6ff; }


/* ============================================ admin tap targets (2026-08-26)
   Minimal and mobile-only. The admin's header links -- VIEW SITE, CHANGE
   PASSWORD, LOG OUT -- render at about 11px and sit a few pixels apart, which
   is a coin-toss to tap on a phone. Nothing else about the admin changes.

   Scoped to a media query so the desktop admin is untouched. */
@media (max-width: 767px) {
  /* ---- the header, measured at 390px -------------------------------------
     Making the links 44px tall (below) fixed the tap targets and broke the
     layout: at 390px the header grew to 225px, a quarter of the viewport,
     with the account links landing in three ragged rows -- WELCOME + VIEW
     SITE, then CHANGE PASSWORD, then LOG OUT beside the theme toggle.

     Django already stacks this header for mobile: #header is flex-direction
     column, so the brand is on its own line before we touch anything. The
     first attempt here re-declared flex-wrap and flex-basis on top of that,
     which in a column container means "one full-height column each" -- it
     put branding and user-tools side by side and overflowing. Nothing below
     touches the header's direction; the work is all inside #user-tools.

     Two numbers make it fit. The pills keep 14px because they are the
     navigation, and #user-tools drops to 11px -- which reaches only the bare
     text nodes, "Welcome," the name, the full stop and the "/" separators,
     since every link sets its own size. That buys the ~90px needed for the
     welcome to finish row one beside Reports, which leaves row two to the
     four account controls. 225px -> 163px, and the rows are:

       HOME  DASHBOARD  REPORTS      Welcome, Alicia.
       View site  Change password  Log out  [theme]

     vertical-align: middle is not cosmetic. Inline-flex links align on the
     text baseline while the logout <form> and the toggle button do not, and
     without it row two sits in a 13px stagger. */
  /* 8px rather than 12px, and `body #header` rather than `#header`.
     responsive.css loads after this file and sets `#header, #content
     { padding: 15px }` at the same one-ID specificity, so it won on source
     order and the plain `#header` rule here never applied to anything -- the
     header has been sitting on Django's 15px gutter this whole time. One
     class of specificity settles it.

     Those 7 pixels a side are what pay for a bigger VIEW SITE below without a
     third header row -- see the note there. */
  body #header { padding: 10px 8px; }
  #user-tools { line-height: 1.4; font-size: 11px; }
  #user-tools .hhms-home { padding: 0 8px; font-size: 14px; margin-right: 0; }
  /* The toggle is a square icon button and stops 6px short of the floor. */
  #user-tools .theme-toggle { min-width: 44px; justify-content: center; }
  #logout-form { display: inline; vertical-align: middle; }

  #user-tools a,
  #user-tools button,
  #logout-form button {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    /* 44px is the documented iOS minimum. */
    min-height: 44px;
    padding: 0 6px;
    font-size: 13px;
    line-height: 1.2;
  }

  /* VIEW SITE is the way back to the console, and it was the smallest thing
     on the screen. Growing it is not free: measured at 390px, the account row
     ran "View site / Change password / Log out / [theme]" at 359px inside
     360px. One pixel of slack. Bolting two more px onto it -- or merely
     bolding the existing 13px -- wrapped the theme toggle onto a row of its
     own and took the header from 164px to 207px, which is the ragged-rows
     regression the 2026-08-26 note above was written about.

     So the width is bought rather than borrowed: 4px off the header gutter
     (above) and 2px off each account link's side padding, which together
     return more than the 20px the larger link costs. Measured at 390px:

       before  #header 164px, View site  74px
       after   #header 154px, View site  90px, still two rows

     `a[href="/"]` is the site-root link Django renders for View site, and
     site_url is not overridden in this project. Change password and Log out
     keep 13px deliberately -- they are not the way back, and enlarging them
     buys a third row for nothing. */
  #user-tools a[href="/"] {
    font-size: 16px;
    font-weight: 700;
  }
  #user-tools a:not(.hhms-home),
  #logout-form button {
    padding: 0 4px;
  }

  /* The breadcrumb/module pills in the header. */
  #nav-sidebar .current-model a,
  .module caption a,
  #content-main .object-tools a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    font-size: 15px;
  }

  /* Same 16px floor: under it, iOS zooms the whole admin on focus. */
  input, select, textarea { font-size: 16px; }
}