/* ===========================================================================
   site.css
   Project : CaregiverLog web
   Author  : Mark Kiessling
   Created : 2026-08-03
   Purpose : Every style in the site, including the light / dark / system theme.
   Notes   : color-scheme MUST be "only light" or "only dark", never "light
             dark" - Brave force-darkens any page that does not declare one,
             and "light dark" is not an opt-out.
             The theme bootstrap script stays INLINE in each page head. Loading
             it as a file lets the page paint before it runs and every page
             flashes the wrong theme.
   =========================================================================== */

/* PALETTE CHANGED 2026-08-03 on Mark's call. The first version used a blue bar
   with mint-green "done" tiles; his words were that it was hard on his eyes, and
   that the people reading this have eyesight problems too. Mint on white is a
   low-contrast pairing that looks clean and reads badly.
   This palette is DEEP AMBER on warm off-white. Every combination below was
   measured against WCAG rather than eyeballed:
     ink on panel 18.5 : 1   AAA        muted on panel  9.6 : 1  AAA
     white on the bar  5.8 : 1  AA      ink on a done tile 15.7 : 1  AAA
   Nothing here drops below AA. If a colour is changed, RE-MEASURE it - a pairing
   that looks fine on this monitor can be unreadable on a laptop screen. */

:root,
:root[data-theme="light"] {
    color-scheme: only light;
    --bg:        #f7f4ee;
    --panel:     #ffffff;
    --ink:       #17130d;
    --muted:     #4a443b;
    --line:      #d9d1c2;
    --brand:     #8f5a0f;
    --brand-ink: #ffffff;
    --good:      #a9741a;
    --good-soft: #fbebcd;
    --warn:      #a33b0c;
}

:root[data-theme="dark"] {
    color-scheme: only dark;
    --bg:        #14110c;
    --panel:     #1f1a13;
    --ink:       #f6f1e7;
    --muted:     #b9b0a1;
    --line:      #3a3227;
    --brand:     #d9a441;
    --brand-ink: #1a1409;
    --good:      #e0ac4e;
    --good-soft: #3a2e14;
    --warn:      #e8965a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    /* 18px and a 1.6 line height, not the 17/1.5 this started at. Mark reads
       this with poor eyesight and so will the agency; the extra pixel and the
       looser leading cost nothing and are the cheapest legibility available. */
    font: 18px/1.6 "Segoe UI", system-ui, sans-serif;
}

header.bar {
    background: var(--brand);
    color: var(--brand-ink);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

header.bar h1 { font-size: 22px; margin: 0; }
header.bar a  { color: var(--brand-ink); text-decoration: none; font-weight: 600; }
header.bar .spacer { flex: 1 1 auto; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 20px; }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 18px;
}

h2 { font-size: 20px; margin: 0 0 12px; }

/* A duty and its undo link sit on one row. The tile takes the width; undo is a
   small separate target off to the right so a finger aimed at the tile can
   never land on it. */
/* The day strip: date, hours and status on ONE line under the bar. This
   replaced a full panel that ate the top third of the screen before the
   caregiver could reach a single duty. */
.daystrip {
    background: var(--panel);
    border-bottom: 2px solid var(--line);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.daystrip-date { font-size: 21px; font-weight: 700; }
.daystrip-hours { display: flex; align-items: center; gap: 8px; }
.daystrip-hours span { color: var(--muted); font-size: 15px; }
.timebox { width: 118px !important; padding: 8px 10px !important; }
.daystrip-note { color: var(--muted); font-size: 15px; }

/* Collapsed extras. Each opens only when it is needed, so the duty list keeps
   the screen. */
.extras { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.extra-toggle {
    font: inherit;
    font-weight: 600;
    background: var(--panel);
    color: var(--ink);
    border: 2px solid var(--good);
    border-radius: 8px;
    padding: 12px 18px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.extra-box {
    display: none;
    background: var(--panel);
    border: 2px solid var(--good);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 16px;
}
.fieldrow { display: flex; gap: 14px; flex-wrap: wrap; }
.fieldrow > div { flex: 1 1 200px; }
.endbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.endbar .btn { text-decoration: none; }

/* THE PILL IS THE ROW, NOT THE BUTTON. The border and fill used to live on the
   button, so each extra timestamp widened it and pushed the note and undo links
   out under the column divider where they could not be clicked. Now the row
   carries the frame at a fixed shape and the times sit on their own line
   beneath, so a duty done six times grows DOWNWARDS. */
.tilerow {
    border: 2px solid var(--good);
    border-radius: 8px;
    margin-bottom: 8px;
    background: transparent;
    overflow: hidden;
}
.tilerow.done { background: var(--good-soft); border-left: 6px solid var(--good); }
.tilerow-top { display: flex; align-items: center; gap: 4px; }
.tilerow .tile {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    margin-bottom: 0;
    border-radius: 0;
}
.tilerow.done .tile { font-weight: 700; }
.tilerow-times {
    padding: 0 16px 12px 18px;
    color: var(--muted);
    font-size: 15px;
    overflow-wrap: anywhere;
}
.undo {
    flex: 0 0 auto;
    align-self: center;
    color: var(--muted);
    font-size: 15px;
    text-decoration: underline;
    padding: 10px 12px;
    white-space: nowrap;
}
.undo:hover { color: var(--warn); }

.notelink {
    flex: 0 0 auto;
    align-self: center;
    color: var(--good);
    font-size: 15px;
    text-decoration: underline;
    padding: 10px 10px;
    white-space: nowrap;
}
.notelink:hover { color: var(--ink); }

.tile {
    display: block;
    width: 100%;
    text-align: left;
    /* NOT DONE YET = outline only. The panel behind shows through, so a screen
       of 26 waiting duties reads as a quiet list rather than a block of colour.
       Amber is reserved for the border and for the done state, where it means
       something. */
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--good);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 8px;
    font-size: 18px;
    cursor: pointer;
}

.tile.done {
    background: var(--good-soft);
    /* A 3px left bar, not just a border colour change. Colour alone is a poor
       signal for anyone with impaired colour vision - the shape of the tile has
       to change too, so "done" is readable without relying on the hue. */
    border-color: var(--good);
    border-left: 5px solid var(--good);
    font-weight: 600;
}

.tile .when { float: right; color: var(--muted); font-weight: 400; }

/* TWO COLUMNS SIDE BY SIDE, stacking ONLY when the screen genuinely cannot
   hold them. This was flex with "flex: 1 1 460px" and it dropped to one column
   on screens with room for two - a flex item will not shrink below its
   CONTENT's minimum width, and a long duty name plus its note and undo links
   made that minimum far wider than 460px, so the second column wrapped.
   Grid with auto-fit + minmax does what was actually meant: as many columns as
   fit at 420px or more, each an equal fraction of what is left.
   min-width:0 on the children is what lets a long tile caption shrink instead
   of pushing the column out. Without it the grid inherits the same fault. */
.cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
    align-items: start;
}
.cols > div { min-width: 0; }
.cols .panel { min-width: 0; }
.tile { overflow-wrap: anywhere; }

button, .btn, input[type=submit] {
    font: inherit;
    padding: 12px 22px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    cursor: pointer;
}

/* WAS ".btn-go, input[type=submit]" - TOO BROAD, and it caused a real defect.
   WebForms renders every duty tile as <input type="submit">, so this rule beat
   .tile and painted all 26 tiles solid amber. Mark's words: "a wall of bright
   orange... hard to look at". The class is now REQUIRED. Never style a bare
   input[type=submit] in this site. */
.btn-go {
    background: var(--good);
    border-color: var(--good);
    color: #fff;
    font-weight: 700;
}

input[type=text], input[type=password], textarea, select {
    font: inherit;
    padding: 12px 14px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
}

label { display: block; margin: 14px 0 6px; font-weight: 600; }
.error { color: var(--warn); font-weight: 600; margin: 10px 0; }
.muted { color: var(--muted); }

table.grid { border-collapse: collapse; width: 100%; }
table.grid th, table.grid td {
    border: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
table.grid th { background: var(--bg); }

/* Month calendar */
table.cal { border-collapse: collapse; width: 100%; }
table.cal th { padding: 8px; font-size: 14px; color: var(--muted); }
table.cal td {
    border: 1px solid var(--line);
    height: 92px;
    width: 14.28%;
    vertical-align: top;
    padding: 6px;
}
table.cal td.has a { font-weight: 700; color: var(--brand); }
table.cal td.closed { background: var(--good-soft); }
table.cal .num { font-size: 15px; color: var(--muted); }

/* Signature images on the printable sheet.
   NO max-height HERE. SignatureCleaner already scales every signature to its
   final print size; a CSS cap on top of that makes the browser scale the image
   a SECOND time, which softens the strokes on paper.
   THE CELL IS ALWAYS WHITE, in every theme. The signature ink is near-black, so
   on a dark-theme sheet it would sit on a dark panel and vanish. A white block
   also frames the signature for the reader, which is what a signature box is
   for. This is one of the few places a hard colour is correct rather than a
   variable. */
.sig { display: block; }
.sigbox { border-bottom: 1px solid #111; min-width: 260px; min-height: 56px; }

td.sigcell, .sigcell {
    background: #ffffff;
    color: #111111;
    padding: 12px 14px;
}

td.sigcell .muted, .sigcell .muted { color: #4a443b; }

/* A SIGNATURE BLOCK MUST NEVER SPLIT ACROSS A PAGE. The first PDF broke with
   the two captions at the bottom of one page and the ruled lines and dates at
   the top of the next, which reads as two unrelated fragments and would be
   queried on any signed record. */
.sigblock, table.sigblock { break-inside: avoid; page-break-inside: avoid; }
table.grid tr { break-inside: avoid; page-break-inside: avoid; }

/* Narrow columns must not wrap. "4 Aug" was breaking onto two lines and
   doubling the height of every row in the care table. */
td.nowrap, th.nowrap { white-space: nowrap; }

/* The official header block at the top of every sheet. */
.sheethead {
    border: 2px solid #111;
    margin-bottom: 14px;
}
.sheethead .title {
    background: #111;
    color: #fff;
    padding: 10px 14px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .04em;
}
.sheethead .sub { padding: 4px 14px 10px; }
.sheethead table { width: 100%; border-collapse: collapse; }
.sheethead td, .sheethead th {
    border: 1px solid #111;
    padding: 7px 12px;
    text-align: left;
    vertical-align: top;
    font-size: 15px;
}
.sheethead th {
    width: 130px;
    background: #f0ece4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 13px;
}

/* ---------------------------------------------------------------------------
   JUSTICE TECHNOLOGY ADVISORY branding on the care records.
   Navy and gold, sampled from the practice mark itself rather than invented.
   The FOOTER is deliberately open at the top with sides and a base - a bracket
   closing the document rather than a box floating under it - with a fine
   diagonal texture so it reads as a device and not as another table.
   --------------------------------------------------------------------------- */
.brandbar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #0f1523;
    border-bottom: 3px solid #c9a961;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.brandmark { width: 42px; height: 42px; display: block; border-radius: 3px; }
.brandtext { line-height: 1.25; }
.brandname {
    color: #c9a961;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
}
.brandurl { color: #cfd6e4; font-size: 12px; letter-spacing: .06em; }

.brandspacer { flex: 1 1 auto; }

/* The "needs attention" panel on the week cover sheet. Loud on purpose - it
   exists because the agency skims, and it only prints when there is something
   in it, so it never becomes furniture the reader learns to ignore. */
.attention {
    border: 3px solid #a33b0c;
    margin: 18px 0;
    break-inside: avoid;
    page-break-inside: avoid;
}
.attention-head {
    background: #a33b0c;
    color: #fff;
    font-weight: 700;
    letter-spacing: .10em;
    padding: 9px 14px;
    font-size: 15px;
}
.attention-body { padding: 12px 16px; background: #fdf3ee; color: #17130d; }
.attention-body p { margin: 6px 0; }
.attention-body ul { margin: 6px 0 10px 20px; padding: 0; }
.attention-body li { margin: 4px 0; }

/* Right-hand block of the banner. WHITE text between the device and the edge,
   as Mark asked. The shield is an original drawing, NOT the VA seal - see the
   note in SheetBuilder.BrandHeader for why that distinction is deliberate. */
.brandva {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 16px;
    border-left: 1px solid rgba(201,169,97,.45);
}
.vashield { width: 34px; height: 40px; display: block; flex-shrink: 0; }
.vatext { display: flex; flex-direction: column; line-height: 1.3; text-align: right; }
.valine1 {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
}
.valine2 {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
}
.valine3 {
    color: #cfd6e4;
    font-size: 10px;
    letter-spacing: .03em;
    margin-top: 2px;
}

.brandfoot {
    margin-top: 26px;
    border-left: 3px solid #c9a961;
    border-right: 3px solid #c9a961;
    border-bottom: 3px solid #c9a961;
    border-top: none;                 /* open at the top, on purpose */
    background:
        repeating-linear-gradient(135deg,
            rgba(201,169,97,.10) 0 6px,
            rgba(201,169,97,0)   6px 12px),
        #0f1523;
    break-inside: avoid;
    page-break-inside: avoid;
}
.brandfoot-in {
    padding: 12px 16px;
    color: #c9a961;
    font-size: 13px;
    letter-spacing: .05em;
    text-align: center;
}
.brandfoot-in .fine {
    color: #b9c2d2;
    font-size: 11px;
    letter-spacing: .02em;
}

/* PRINTING: the browser makes the PDF, so the sheet must print correctly with
   no server-side PDF library. Anything interactive is removed on paper. */
@media print {
    .noprint, header.bar { display: none !important; }
    body { background: #fff; color: #000; }
    .panel { border: none; padding: 0; }
    .wrap { max-width: none; padding: 0; }
    table.grid th, table.grid td { border: 1px solid #666; }
    @page { margin: 14mm; }
}

/* Photographs attached to a note or an incident. Shown small, stored large -
   the browser needs the extra pixels when the sheet prints at 300 dpi. */
.gallery { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.gallery figure { margin: 0; }
.gallery img { display: block; border: 1px solid var(--line); border-radius: 6px; }
.gallery figcaption { font-size: 12px; color: var(--muted); max-width: 220px; overflow-wrap: anywhere; }

/* EXHIBITS. One photograph per page, referenced from the line it belongs to.
   The reference is bold and dark so a reader scanning the care table sees it. */
.exhibitref {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px; font-weight: 700; color: var(--warn); font-size: 14px;
}
.exthumb { height: 74px; border: 1px solid #666; border-radius: 4px; display: block; }
.exhibit { break-before: page; page-break-before: always; break-inside: avoid; }
.exhibit-head { background: #111; color: #fff; font-weight: 700; letter-spacing: .12em;
                padding: 10px 14px; font-size: 17px; margin-bottom: 12px; }
.exhibit-img { margin-top: 14px; text-align: center; }
.exhibit-img img { max-width: 100%; max-height: 165mm; border: 1px solid #666; }

/* Photographs on a duty tile. Small - they are a receipt that the upload
   worked, not the picture itself; the full one lives on the exhibit page. */
.tilerow-pics { padding: 0 16px 12px 18px; }
.tilerow-pics .gallery { margin: 0; gap: 8px; }
.tilerow-pics figcaption { display: none; }