/*
 * APPLICATION PRESENTATION — View builds the shell; page templates supply cards,
 * forms and lists; app.js toggles state classes/data attributes after interaction.
 * Read this stylesheet in source order: later responsive/refinement rules override
 * earlier base rules. The final shell rules keep navigation in its own grid row and
 * give main content its own scroll area; fixed overlays used to sit on the form.
 * min-width: 0 allows grid/flex children to shrink instead of dragging the phone
 * viewport sideways. Checkboxes need their own width rules: a checkbox should not
 * arrive dressed as a full-width text field with delusions of grandeur.
 * Theme variables share component styles. The login logo gets a white backing so
 * its original black lettering remains visible in dark mode, with aspect ratio kept.
 * When adding a component: use existing variables, test 320px and desktop widths,
 * then check focus and error states. A pretty Save button under navigation is still
 * an unemployed Save button. No layout rule should encode payroll behavior.
 */
/*
  Timecard UI.
  Clean on the surface, mischievously organized underneath. The app is mobile-first because
  nobody wants to pinch-zoom a payroll rectangle while standing on a roof next to a condenser.
*/
:root{
  --bg:#f6f7fb; --panel:#ffffff; --panel-2:#eef2ff; --text:#101827; --muted:#657089;
  --line:#dfe4ee; --primary:#5b5cf1; --primary-2:#7c83ff; --danger:#d92d20; --warning:#d97706;
  --shadow:0 18px 45px rgba(15,23,42,.08); --radius:24px; --radius-sm:14px;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#080d1b; --panel:#121a2d; --panel-2:#18223a; --text:#f8fafc; --muted:#aab4c6; --line:#28334c; --shadow:0 18px 45px rgba(0,0,0,.25)}
}
html[data-theme="light"]{--bg:#f6f7fb; --panel:#ffffff; --panel-2:#eef2ff; --text:#101827; --muted:#657089; --line:#dfe4ee; --shadow:0 18px 45px rgba(15,23,42,.08)}
html[data-theme="dark"]{--bg:#080d1b; --panel:#121a2d; --panel-2:#18223a; --text:#f8fafc; --muted:#aab4c6; --line:#28334c; --shadow:0 18px 45px rgba(0,0,0,.25)}
*{box-sizing:border-box} body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top right,rgba(91,92,241,.14),transparent 36rem),var(--bg);color:var(--text);line-height:1.45}.app-shell{max-width:920px;margin:0 auto;min-height:100vh;padding:0 16px 96px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 0 18px}.brand{text-decoration:none;color:var(--text);display:flex;flex-direction:column}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:var(--muted);font-size:.72rem}.page-title,.brand .page-title{font-size:clamp(2rem,7vw,3rem);font-weight:900;letter-spacing:-.05em}.main-content{display:flex;flex-direction:column;gap:16px}.card{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent),var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.hero-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px}.hero-card h1{margin:.25rem 0 0;font-size:clamp(1.35rem,5vw,2rem);line-height:1.1}.hero-actions,.action-row{display:flex;gap:10px;flex-wrap:wrap}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stats-grid.four{grid-template-columns:repeat(2,1fr)}.stat{padding:16px}.stat span,.stat small{display:block;color:var(--muted)}.stat strong{font-size:2rem;letter-spacing:-.06em}.ot-text{color:#f59e0b}.week-controls{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}.button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:18px;padding:12px 16px;text-decoration:none;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;cursor:pointer}.button.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:white;border-color:transparent}.button.ghost{background:transparent}.button.small{min-height:38px;padding:8px 12px;border-radius:14px}.button.danger{background:#fee2e2;color:#991b1b}.button.full{width:100%}.icon-button{width:46px;height:46px;border-radius:16px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;background:var(--panel-2);color:var(--text);text-decoration:none}.icon-button.small{width:40px;height:40px}.day-list{display:flex;flex-direction:column;gap:12px}.day-summary{padding:14px 16px}.day-summary-main{display:flex;align-items:center;justify-content:space-between;gap:16px}.day-summary h2{font-size:1.05rem;margin:0}.day-hours{font-size:1.25rem;font-weight:900;margin:.2rem 0}.day-actions{display:flex;gap:8px;align-items:center}.muted{color:var(--muted)}.compact-copy{margin:.25rem 0 0}.entry-list{display:flex;flex-direction:column;gap:12px}.entry-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.entry-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.entry-card h3{margin:.15rem 0 .5rem}.pill-row,.tag-row{display:flex;gap:8px;flex-wrap:wrap}.pill,.tag,.badge{border-radius:999px;background:var(--panel-2);padding:5px 9px;font-size:.82rem;font-weight:800}.pill.strong{background:rgba(91,92,241,.18)}.badge.warn{background:#fef3c7;color:#92400e}.photo-strip,.photo-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.photo-strip img,.photo-grid img{width:78px;height:78px;object-fit:cover;border-radius:14px;border:1px solid var(--line)}.photo-grid img{width:112px;height:112px}.auth-card,.form-card{max-width:560px;margin:0 auto;padding:22px;width:100%}.stack{display:flex;flex-direction:column;gap:14px}.grid{display:grid;gap:12px}.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:1fr .55fr .8fr}label{font-weight:800;font-size:.92rem}input,select,textarea{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);padding:13px 14px;font:inherit}textarea{resize:vertical}.check-card{display:flex;align-items:center;gap:10px;background:var(--panel-2);padding:12px;border-radius:16px}.check-card input{width:auto;margin:0}.check-card.inline{height:100%;margin-top:25px}.password-wrap{display:flex;position:relative}.password-wrap input{padding-right:54px}.password-toggle{position:absolute;right:8px;top:12px;border:0;background:transparent;color:var(--muted);font-size:1.1rem}.alert{padding:12px 14px;border-radius:16px;border:1px solid var(--line)}.alert-error{background:#fee2e2;color:#7f1d1d}.alert-success{background:#dcfce7;color:#14532d}.empty{padding:22px;text-align:center}.bottom-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:min(92vw,620px);display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:rgba(18,26,45,.82);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:8px;z-index:10}.nav-item{color:#cbd5e1;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.74rem;font-weight:800;border-radius:18px;padding:8px 4px}.nav-item.active{background:rgba(124,131,255,.26);color:white}.nav-icon{font-size:1.25rem}.suggestions{position:relative}.suggestion-list{position:absolute;left:0;right:0;z-index:20;margin-top:4px;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}.suggestion{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--text);padding:12px}.suggestion small{display:block;color:var(--muted)}.hidden{display:none!important}.photo-box{border:1px dashed var(--line);border-radius:18px;padding:14px}.search-form{display:flex;gap:8px}.search-form input{margin-top:0}.location-list{display:flex;flex-direction:column;gap:10px}.location-card,.result-row,.visit-row{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--text);padding:14px 16px}.location-card span,.result-row small{color:var(--muted)}.note-block{border-left:4px solid var(--line);padding:10px 12px;margin:8px 0;background:var(--panel-2);border-radius:0 14px 14px 0}.note-block.pinned{border-left-color:var(--primary)}.mini-form{margin-top:12px}.center{text-align:center}.bottom-spacer{margin-bottom:30px}
@media (max-width:720px){.app-shell{padding-left:12px;padding-right:12px}.hero-card{align-items:flex-start;flex-direction:column}.hero-actions,.action-row{width:100%}.hero-actions .button,.action-row .button{flex:1}.stats-grid{grid-template-columns:repeat(3,1fr);gap:8px}.stats-grid.four{grid-template-columns:repeat(2,1fr)}.stat{padding:12px}.stat strong{font-size:1.45rem}.day-summary-main{align-items:flex-start}.day-actions{flex-direction:column;align-items:stretch}.week-controls{grid-template-columns:1fr auto 1fr}.grid.two,.grid.three{grid-template-columns:1fr}.check-card.inline{margin-top:0}.search-form{flex-direction:column}.bottom-nav{width:calc(100vw - 20px);bottom:10px}.nav-item{font-size:.68rem}.page-title{font-size:2.2rem}}

/* Open clock-in cards get a subtle edge so the unfinished shift is easy to spot without shouting at anyone. */
.entry-card.entry-open{border-color:rgba(56,189,248,.55);box-shadow:0 0 0 1px rgba(56,189,248,.16) inset}
.badge.info{background:rgba(56,189,248,.16);color:#0369a1}
[data-theme="dark"] .badge.info,.theme-dark .badge.info{color:#bae6fd}

/* QOL polish: open cards and day gaps now wave a flag before the time gremlins unionize. */
.badge.info{background:#dbeafe;color:#1d4ed8}.badge.danger{background:#fee2e2;color:#991b1b}.badge.ok{background:#dcfce7;color:#166534}
.day-summary{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.day-summary.has-open{border-color:rgba(245,158,11,.75);box-shadow:0 0 0 1px rgba(245,158,11,.2),var(--shadow)}.day-summary.has-gap{border-color:rgba(239,68,68,.65);box-shadow:0 0 0 1px rgba(239,68,68,.16),var(--shadow)}.day-summary.gaps-verified{border-color:rgba(34,197,94,.45)}.day-summary-copy{min-width:0}.day-meta-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;color:var(--muted);font-size:.92rem}.day-meta-row .badge{font-size:.74rem}.day-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:86px}.day-actions .button{white-space:nowrap;width:100%}
.entry-card.entry-open{border-color:rgba(245,158,11,.9);background:linear-gradient(135deg,rgba(245,158,11,.12),transparent 42%),var(--panel);box-shadow:0 0 0 1px rgba(245,158,11,.2),var(--shadow)}.entry-card.entry-open h3::after{content:' active';display:inline-block;margin-left:8px;color:#92400e;background:#fef3c7;border-radius:999px;padding:2px 7px;font-size:.68rem;letter-spacing:.02em;text-transform:uppercase;vertical-align:middle}.open-action{background:#f59e0b!important;border-color:transparent!important;color:#111827!important}
.issue-card{padding:16px}.issue-card.needs-attention{border-color:rgba(245,158,11,.75);box-shadow:0 0 0 1px rgba(245,158,11,.16),var(--shadow)}.issue-card.is-verified{border-color:rgba(34,197,94,.45)}.issue-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.issue-head h2{margin:.2rem 0 0;font-size:1.25rem}.gap-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.gap-row{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:10px 12px}.gap-row strong{white-space:nowrap}
@media (max-width:560px){.day-summary{padding:12px 14px}.day-summary-main{align-items:center}.day-summary h2{font-size:1rem}.day-hours{font-size:1.12rem;margin:.1rem 0}.day-meta-row{font-size:.82rem}.day-actions{min-width:76px}.day-actions .button{min-height:36px;padding:7px 10px;border-radius:13px;font-size:.9rem}.issue-card{padding:14px}.gap-row{font-size:.9rem}.entry-card.entry-open h3::after{display:block;width:max-content;margin:6px 0 0}}

/* Responsive form layout: intrinsic input widths and checkbox height must not push adjacent rows. */
html { scroll-padding-bottom: 120px; }
.app-shell { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.topbar { gap: 16px; }
.brand, .grid > *, .stats-grid > *, .entry-card-head > div { min-width: 0; }
.icon-button, .entry-card-head > .button { flex-shrink: 0; }
input, select, textarea { min-width: 0; max-width: 100%; font-size: 16px; }
input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--primary); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.check-card.inline { height: auto; margin-top: 0; align-self: end; min-height: 48px; }
.check-card { font-weight: 600; }
.button { font: inherit; font-weight: 700; text-align: center; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
[aria-invalid="true"] { border-color: var(--danger); }
.entry-form-card { max-width: 680px; }
.form-intro { margin: 0 0 20px; }
.form-section { border: 0; border-top: 1px solid var(--line); padding: 16px 0 4px; margin: 0; min-width: 0; }
.form-section legend { font-size: 1.05rem; font-weight: 800; padding: 0 12px 0 0; }
.optional { font-size: .8rem; font-weight: 400; }
.form-details { border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.form-details summary { cursor: pointer; font-weight: 700; min-height: 26px; }
.form-details[open] > .stack, .form-details[open] > button { margin-top: 16px; }
.form-actions { border-top: 1px solid var(--line); padding-top: 16px; }
[data-save-status]:empty { display: none; }
[data-form-errors]:not(.hidden) { margin-bottom: 18px; }
.error-link { background: none; border: 0; padding: 4px 0; font: inherit; color: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
.suggestion-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.suggestion:hover, .suggestion:focus-visible { background: var(--panel-2); }
.entry-card h3, .note-preview, .job-references, .result-row, .location-card { overflow-wrap: anywhere; }
.entry-card p { margin: 10px 0; }
.job-references { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 8px 0; color: var(--muted); font-size: .9rem; }
.entry-card.entry-complete { border-inline-start: 4px solid #e2b93b; }
.entry-card.entry-open h3::after { content: none; }
.search-results { padding: 16px; }
.search-results h2 { margin-top: 0; }
.week-controls { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.week-controls .button { padding: 10px 8px; }
.bottom-nav { bottom: calc(10px + env(safe-area-inset-bottom)); }
@media (max-width: 560px) {
  .grid.two, .grid.three { grid-template-columns: minmax(0, 1fr); }
  .grid.time-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-card { padding: 18px 14px; }
  .form-section { padding-top: 12px; }
  .page-title { font-size: 2rem; line-height: 1.1; }
  .week-controls .button { font-size: .85rem; }
  .gap-row { flex-wrap: wrap; }
  .stat strong { font-size: clamp(1.15rem, 5vw, 1.45rem); }
  .stat { padding: 10px; }
  .entry-card { padding: 14px; }
}

/* Give unwrapped content cards the same breathing room as forms. */
.main-content > section.card:not([class*="form-card"]):not(.hero-card):not(.issue-card):not(.empty):not(.search-results) { padding: 18px; }
input, textarea, select { font-weight: 400; }
/* Reserve a real row for navigation so it cannot cover forms or day cards. */
.app-shell { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.topbar { flex: 0 0 auto; }
.main-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 4px 20px; scroll-padding: 16px; scrollbar-gutter: stable; }
.main-content > * { flex-shrink: 0; }
.bottom-nav { position: static; transform: none; width: min(100%, 620px); margin: 12px auto 10px; flex: 0 0 auto; }
@media (max-width: 560px) { .topbar { padding: 16px 0 12px; } .bottom-nav { margin-top: 8px; margin-bottom: 6px; } }

/* The logo gets a white signboard, not a filter and a midlife crisis.
   Preserve the supplied artwork's proportions and black lettering in either theme. */
.login-card { margin-top: clamp(8px, 4vh, 40px); }
.login-logo { background: #fff; border: 1px solid #dfe4ee; border-radius: 12px; padding: 16px 12px; margin-bottom: 24px; }
.login-logo img { display: block; width: 100%; height: auto; }
.login-card h1 { margin: 0 0 8px; }
.login-card > .muted { margin: 0 0 24px; }
.login-card > .alert { margin-bottom: 16px; }
.login-card .button.primary { background: #2c5ba2; }
@media (max-width: 560px) { .login-logo { padding: 12px 8px; margin-bottom: 20px; } }

/* Each time is one labeled group with two native controls. Keep the pair together;
   on phones stack start/end groups so four selects do not fight over one parking spot. */
.time-label { display: block; font-weight: 700; margin-bottom: 8px; }
.split-time { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: end; }
.split-time label { min-width: 0; font-size: .85rem; }
.split-time select { width: 100%; min-width: 0; }
.time-colon { padding-bottom: 13px; font-weight: 700; }
@media (max-width: 560px) { .grid.time-pair { grid-template-columns: minmax(0, 1fr); } }