/* Matex – heures chantier. Design tokens + components on top of Pico.css.
   Light theme only, on purpose: the app is used outdoors, often in direct sunlight.
   Every text and surface colour is set explicitly so a dark OS setting cannot leak in. */

:root {
  /* Matex brand: royal blue wordmark ("ATEX") = primary; leaf green ("M", leaves) = accent. */
  --mx-primary-900: #0b2a55;
  --mx-primary-800: #123b73;
  --mx-primary-700: #1a4f91;
  --mx-primary-600: #2563b0;
  --mx-primary-500: #3b7bc8;
  --mx-primary-200: #c4d6ef;
  --mx-primary-100: #e3ecf8;
  --mx-primary-50: #f2f6fc;
  --mx-green-900: #10301f;
  --mx-green-800: #1a4a33;
  --mx-green-700: #1f5f3f;
  --mx-green-600: #2b7350;
  --mx-green-500: #3f8c60;
  --mx-green-200: #c5dfcc;
  --mx-green-100: #e3efe6;
  --mx-green-50: #f1f7f2;
  --mx-leaf: #8cc63f;
  --mx-sand-50: #f7f5ef;
  --mx-sand-100: #efebe1;
  --mx-sand-200: #e2dccd;
  --mx-sand-300: #cfc7b3;
  --mx-ink: #1c2922;
  --mx-ink-soft: #33443a;
  --mx-muted: #5f6d65;
  --mx-white: #ffffff;
  --mx-amber: #9a5b0f;
  --mx-amber-bg: #fdf1dc;
  --mx-amber-border: #f0c98a;
  --mx-red: #a8261b;
  --mx-red-bg: #fdecea;
  --mx-red-border: #f2b8b2;
  --mx-sky: #22608f;
  --mx-sky-bg: #e5f0f8;
  --mx-violet: #5b4a9a;
  --mx-violet-bg: #eeebf8;
  --mx-slate: #4a5560;
  --mx-slate-bg: #eceff1;
  --mx-radius: 14px;
  --mx-radius-sm: 9px;
  --mx-shadow: 0 1px 2px rgba(11, 42, 85, .06), 0 6px 18px rgba(11, 42, 85, .07);
  --mx-shadow-lg: 0 8px 28px rgba(11, 42, 85, .16);
  --mx-appbar-h: 60px;
  --mx-tabbar-h: 66px;
}

/* Pico overrides, same selector as Pico so the cascade order wins. */
[data-theme=light],
:root:not([data-theme=dark]) {
  --pico-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pico-font-size: 100%;
  --pico-line-height: 1.5;
  --pico-background-color: var(--mx-sand-50);
  --pico-color: var(--mx-ink);
  --pico-h1-color: var(--mx-ink);
  --pico-h2-color: var(--mx-ink);
  --pico-h3-color: var(--mx-ink);
  --pico-h4-color: var(--mx-ink);
  --pico-muted-color: var(--mx-muted);
  --pico-muted-border-color: var(--mx-sand-200);
  --pico-primary: var(--mx-primary-700);
  --pico-primary-background: var(--mx-primary-700);
  --pico-primary-border: var(--mx-primary-700);
  --pico-primary-underline: rgba(26, 79, 145, .35);
  --pico-primary-hover: var(--mx-primary-900);
  --pico-primary-hover-background: var(--mx-primary-800);
  --pico-primary-hover-border: var(--mx-primary-800);
  --pico-primary-hover-underline: var(--mx-primary-900);
  --pico-primary-focus: rgba(37, 99, 176, .3);
  --pico-primary-inverse: var(--mx-white);
  --pico-secondary: var(--mx-ink-soft);
  --pico-secondary-background: var(--mx-white);
  --pico-secondary-border: var(--mx-sand-300);
  --pico-secondary-hover: var(--mx-ink);
  --pico-secondary-hover-background: var(--mx-sand-100);
  --pico-secondary-hover-border: var(--mx-sand-300);
  --pico-secondary-focus: rgba(95, 109, 101, .25);
  --pico-secondary-inverse: var(--mx-ink);
  --pico-contrast: var(--mx-red);
  --pico-contrast-background: var(--mx-red);
  --pico-contrast-border: var(--mx-red);
  --pico-contrast-inverse: var(--mx-white);
  --pico-contrast-hover-background: #8c1f16;
  --pico-border-radius: var(--mx-radius-sm);
  --pico-form-element-background-color: var(--mx-white);
  --pico-form-element-selected-background-color: var(--mx-primary-100);
  --pico-form-element-border-color: var(--mx-sand-300);
  --pico-form-element-color: var(--mx-ink);
  --pico-form-element-placeholder-color: #8a958f;
  --pico-form-element-active-background-color: var(--mx-white);
  --pico-form-element-active-border-color: var(--mx-primary-600);
  --pico-form-element-focus-color: var(--mx-primary-600);
  --pico-form-element-invalid-border-color: var(--mx-red);
  --pico-form-element-invalid-active-border-color: var(--mx-red);
  --pico-card-background-color: var(--mx-white);
  --pico-card-border-color: var(--mx-sand-200);
  --pico-card-box-shadow: var(--mx-shadow);
  --pico-card-sectioning-background-color: var(--mx-sand-50);
  --pico-table-border-color: var(--mx-sand-200);
  --pico-table-row-stripped-background-color: var(--mx-sand-50);
  --pico-code-background-color: var(--mx-sand-100);
  --pico-mark-background-color: var(--mx-amber-bg);
  --pico-mark-color: var(--mx-amber);
  --pico-switch-background-color: var(--mx-sand-300);
  --pico-switch-checked-background-color: var(--mx-primary-700);
  --pico-switch-color: var(--mx-white);
  --pico-accordion-close-summary-color: var(--mx-ink);
  --pico-accordion-open-summary-color: var(--mx-primary-700);
  --pico-accordion-active-summary-color: var(--mx-primary-700);
  --pico-dropdown-background-color: var(--mx-white);
  --pico-dropdown-color: var(--mx-ink);
  --pico-dropdown-hover-background-color: var(--mx-primary-50);
  --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(95,109,101)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  color-scheme: light;
}

html { background: var(--mx-sand-50); overflow-x: clip; }
body { background: var(--mx-sand-50); color: var(--mx-ink); -webkit-tap-highlight-color: transparent; overflow-x: clip; }
main.container > * { min-width: 0; }
h1, h2, h3 { letter-spacing: -0.015em; }
h1 { font-size: 1.75rem; margin-bottom: .4rem; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.num, td.num, th.num, .kpi-value, .figure { font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; white-space: nowrap; }
.muted { color: var(--mx-muted); }
.icon { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
main.container { padding-top: 1.25rem; padding-bottom: 2.5rem; max-width: 1200px; }
.has-tabbar main.container { padding-bottom: calc(var(--mx-tabbar-h) + 2rem + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .has-tabbar main.container { padding-bottom: 3rem; } }

/* ---------- App bar ---------- */
.appbar { position: sticky; top: 0; z-index: 20; background: var(--mx-primary-800); color: var(--mx-white); box-shadow: 0 2px 10px rgba(11, 42, 85, .18); }
.appbar-inner { max-width: 1200px; margin: 0 auto; height: var(--mx-appbar-h); padding: 0 1rem; display: flex; align-items: center; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--mx-white); text-decoration: none !important; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(140deg, var(--mx-leaf), var(--mx-primary-500)); color: var(--mx-primary-900); }
.brand-mark .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text b { font-size: 1.05rem; color: var(--mx-white); }
.brand-text small { font-size: .72rem; color: var(--mx-primary-200); letter-spacing: .02em; }
.topnav { display: none; gap: .25rem; margin-left: 1rem; }
.topnav a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: 999px; color: var(--mx-primary-100); font-size: .93rem; font-weight: 500; text-decoration: none; }
.topnav a:hover { background: rgba(255, 255, 255, .1); color: var(--mx-white); }
.topnav a[aria-current] { background: var(--mx-white); color: var(--mx-primary-800); }
.usermenu { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mx-primary-600); color: var(--mx-white); font-size: .8rem; font-weight: 700; border: 2px solid rgba(255, 255, 255, .35); }
.username { display: none; color: var(--mx-primary-100); font-size: .9rem; }
.logout { margin: 0; }
.icon-button { display: inline-grid; place-items: center; width: 40px !important; min-width: 40px; height: 40px; padding: 0 !important; margin: 0; line-height: 1; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .3); color: var(--mx-white); }
.icon-button .icon { width: 20px; height: 20px; }
.icon-button:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
@media (min-width: 900px) {
  .topnav { display: flex; }
  .username { display: inline; }
}

/* ---------- Bottom tab bar (phones) ---------- */
.tabbar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: stretch; height: calc(var(--mx-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--mx-white); border-top: 1px solid var(--mx-sand-200); box-shadow: 0 -4px 18px rgba(11, 42, 85, .08); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--mx-muted); font-size: .72rem; font-weight: 600; text-decoration: none; }
.tabbar a .icon { width: 24px; height: 24px; }
.tabbar a[aria-current] { color: var(--mx-primary-700); }
.tabbar .tab-primary .icon { width: 44px; height: 44px; padding: 10px; margin-top: -18px; border-radius: 50%; background: var(--mx-primary-700); color: var(--mx-white); box-shadow: 0 6px 16px rgba(26, 79, 145, .4); stroke-width: 2.6; }
.tabbar .tab-primary { color: var(--mx-primary-700); }
.no-tabbar .tabbar { display: none; }
@media (min-width: 900px) { .tabbar { display: none; } }

/* ---------- Generic blocks ---------- */
.card { background: var(--mx-white); border: 1px solid var(--mx-sand-200); border-radius: var(--mx-radius); box-shadow: var(--mx-shadow); padding: 1.1rem 1.1rem; margin-bottom: 1rem; }
.card > h2:first-child, .card-title { font-size: 1rem; margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem; color: var(--mx-ink); }
.card-title .icon { color: var(--mx-primary-600); }
.card-title .aside { margin-left: auto; font-weight: 600; color: var(--mx-primary-700); font-size: .95rem; }
.section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mx-muted); margin: 1.6rem 0 .7rem; font-weight: 700; }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.eyebrow { margin: 0 0 .2rem; color: var(--mx-muted); font-size: .85rem; font-weight: 600; }
.eyebrow + h1, .hero h1, .page-head h1 { margin-top: 0; }
.grid-2, .grid-3 { display: grid; gap: 0 .75rem; grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0; }
.actions [role=button], .actions button { margin: 0; display: inline-flex; align-items: center; gap: .45rem; }
[role=button], button { font-weight: 600; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--mx-radius); }

/* Toasts and notices */
.toast { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: var(--mx-radius-sm); margin-bottom: 1rem; font-weight: 500; background: var(--mx-primary-100); color: var(--mx-primary-900); border: 1px solid var(--mx-primary-200); }
.toast-error { background: var(--mx-red-bg); color: var(--mx-red); border-color: var(--mx-red-border); }
.toast-info { background: var(--mx-sky-bg); color: var(--mx-sky); border-color: #bcd6ea; }
.notice { display: flex; gap: .65rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--mx-radius-sm); margin: .8rem 0; border: 1px solid; }
.notice .icon { margin-top: .15rem; }
.notice p { margin: 0; }
.notice-amber, .warning { background: var(--mx-amber-bg); color: var(--mx-amber); border-color: var(--mx-amber-border); }
.notice-red, .errors { background: var(--mx-red-bg); color: var(--mx-red); border-color: var(--mx-red-border); }
.notice-green { background: var(--mx-primary-50); color: var(--mx-primary-800); border-color: var(--mx-primary-200); }
.warning { padding: .8rem 1rem; border-radius: var(--mx-radius-sm); border: 1px solid var(--mx-amber-border); margin: .8rem 0; }
.warning p { margin: 0 0 .4rem; }
.errors ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.errors li { list-style: disc; }
small.error, .error { color: var(--mx-red); }
.confirm { display: flex; gap: .6rem; align-items: center; font-weight: 700; color: var(--mx-ink); margin: .4rem 0 0; }
.confirm input { margin: 0; }
.placeholder-banner { margin-bottom: 1rem; border: 1px solid var(--mx-amber-border); border-radius: var(--mx-radius-sm); background: var(--mx-amber-bg); color: var(--mx-amber); font-size: .9rem; }
.placeholder-banner summary { padding: .55rem .9rem; display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--mx-amber); list-style: none; cursor: pointer; }
.placeholder-banner summary::-webkit-details-marker { display: none; }
.placeholder-banner summary::after { display: none !important; }
.placeholder-body { padding: 0 .9rem .8rem 2.6rem; color: var(--mx-ink-soft); }
.placeholder-body p { margin: 0 0 .4rem; }
.placeholder-body ul { margin: 0 0 .4rem; padding-left: 1rem; }
.placeholder-body li { list-style: disc; margin-bottom: .25rem; }
.placeholder-body a { font-weight: 700; color: var(--mx-primary-700); }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; line-height: 1.4; white-space: nowrap; border: 1px solid transparent; }
.chip .icon { width: .95em; height: .95em; }
.chip-work, .chip-done, .chip-ok { background: var(--mx-primary-100); color: var(--mx-primary-800); }
.chip-absence { background: var(--mx-red-bg); color: var(--mx-red); }
.chip-leave { background: var(--mx-sky-bg); color: var(--mx-sky); }
.chip-rest, .chip-archived { background: var(--mx-slate-bg); color: var(--mx-slate); }
.chip-bad_weather { background: var(--mx-violet-bg); color: var(--mx-violet); }
.chip-missing, .chip-todo { background: var(--mx-amber-bg); color: var(--mx-amber); border-color: var(--mx-amber-border); }
.chip-in_progress { background: var(--mx-sky-bg); color: var(--mx-sky); }
.chip-sav { background: var(--mx-violet-bg); color: var(--mx-violet); }
.chip-over { background: var(--mx-red-bg); color: var(--mx-red); }

/* ---------- Login ---------- */
.login-page main.container { max-width: 440px; padding-top: 0; }
.login-hero { margin: 0 -1rem 0; padding: 3rem 1.5rem 4.5rem; background: radial-gradient(120% 90% at 0% 0%, var(--mx-primary-600) 0%, var(--mx-primary-800) 55%, var(--mx-primary-900) 100%); color: var(--mx-white); border-radius: 0 0 28px 28px; text-align: center; }
@media (min-width: 480px) { .login-hero { margin-top: 2rem; border-radius: 28px; } }
.login-hero .brand-mark { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 18px; }
.login-hero .brand-mark .icon { width: 36px; height: 36px; }
.login-hero h1 { color: var(--mx-white); font-size: 1.6rem; margin: 0; }
.login-hero p { color: var(--mx-primary-100); margin: .3rem 0 0; }
.login-card { margin: 0 .25rem 1rem; position: relative; }
.login-brand { text-align: center; padding: 2.4rem 1rem 1.6rem; margin: 0 -1rem 1.2rem; background: var(--mx-white); border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--mx-leaf), #3a9a3a 30%, var(--mx-primary-700) 60%, var(--mx-primary-900)) 1; }
@media (min-width: 480px) { .login-brand { margin: 2rem 0 1.2rem; border-radius: var(--mx-radius); box-shadow: var(--mx-shadow); } }
.login-logo { width: min(300px, 80%); height: auto; }
.login-brand .tagline { margin: .8rem 0 0; color: var(--mx-primary-700); font-weight: 600; font-size: .9rem; }
.login-card button { width: 100%; margin-top: .4rem; }
.login-help { text-align: center; color: var(--mx-muted); font-size: .88rem; }

/* ---------- Home ---------- */
.hero { margin-bottom: 1.2rem; }
.hero h1 { font-size: 1.9rem; }
.cta { display: flex !important; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: 1rem; font-size: 1.12rem; border-radius: var(--mx-radius); box-shadow: 0 8px 20px rgba(26, 79, 145, .28); margin-top: .8rem; }
.cta .icon { width: 1.4em; height: 1.4em; stroke-width: 2.6; }
@media (min-width: 640px) { .cta { width: auto; display: inline-flex !important; padding: .9rem 1.8rem; } }
.today-done { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: var(--mx-radius); background: var(--mx-primary-50); border: 1px solid var(--mx-primary-200); color: var(--mx-primary-900); text-decoration: none !important; margin-top: .8rem; }
.today-done .badge-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mx-primary-700); color: var(--mx-white); flex: none; }
.today-done b { display: block; }
.day-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.day-card { min-width: 0; }
@media (min-width: 1000px) { .list-page .day-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; }
@media (min-width: 1000px) { .home-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .home-grid .home-main { position: sticky; top: calc(var(--mx-appbar-h) + 1.25rem); } .home-grid .home-side .section-title:first-child { margin-top: .3rem; } }
.detail-page main.container { max-width: 980px; }
@media (min-width: 1000px) { .detail-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 2rem; align-items: start; } }
.day-cards li { list-style: none; margin: 0; }
.day-card { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem; background: var(--mx-white); border: 1px solid var(--mx-sand-200); border-radius: var(--mx-radius); color: var(--mx-ink); text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.day-card:hover { border-color: var(--mx-primary-200); box-shadow: var(--mx-shadow); }
.day-card.is-missing { border-style: dashed; border-color: var(--mx-amber-border); background: #fffcf6; }
.day-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 56px; border-radius: 12px; background: var(--mx-sand-100); flex: none; line-height: 1.05; }
.day-date .dow { font-size: .68rem; text-transform: uppercase; font-weight: 700; color: var(--mx-muted); letter-spacing: .05em; }
.day-date .dnum { font-size: 1.3rem; font-weight: 800; color: var(--mx-ink); }
.day-date .mon { font-size: .66rem; color: var(--mx-muted); text-transform: lowercase; }
.is-today .day-date { background: var(--mx-primary-700); }
.is-today .day-date .dow, .is-today .day-date .dnum, .is-today .day-date .mon { color: var(--mx-white); }
.day-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.day-body .line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.day-body .sites { color: var(--mx-muted); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-hours { font-weight: 800; font-size: 1.05rem; color: var(--mx-ink); }
.day-card > .icon { color: var(--mx-sand-300); }
.day-card.is-missing .cta-text { color: var(--mx-amber); font-weight: 700; font-size: .9rem; }

/* ---------- Entry form ---------- */
.entry-page main.container { max-width: 720px; }
.form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.form-head .for { color: var(--mx-muted); font-weight: 600; }
.status-choice { display: flex; flex-wrap: wrap; gap: .45rem; border: none; padding: 0; margin: 0 0 .2rem; }
.status-choice legend { width: 100%; margin-bottom: .45rem; font-weight: 600; }
.status-choice .pill { position: relative; margin: 0; }
.status-choice .pill input { position: absolute; opacity: 0; pointer-events: none; }
.status-choice .pill span { display: inline-block; padding: .55rem 1rem; border: 1.5px solid var(--mx-sand-300); border-radius: 999px; background: var(--mx-white); color: var(--mx-ink-soft); cursor: pointer; font-weight: 600; transition: all .12s; }
.status-choice .pill span:hover { border-color: var(--mx-primary-500); }
.status-choice .pill input:checked + span { background: var(--mx-primary-700); border-color: var(--mx-primary-700); color: var(--mx-white); box-shadow: 0 3px 10px rgba(26, 79, 145, .3); }
.status-choice .pill input:focus-visible + span { outline: 3px solid var(--pico-primary-focus); outline-offset: 2px; }
#day-form:not([data-status="work"]) .work-only { display: none; }
.segmented { display: flex; padding: 4px; gap: 4px; background: var(--mx-sand-100); border-radius: 12px; margin-bottom: .9rem; }
.segmented button { flex: 1; margin: 0; padding: .5rem .4rem; border: 0; border-radius: 9px; background: transparent; color: var(--mx-ink-soft); font-size: .92rem; box-shadow: none; }
.segmented button:hover { background: rgba(255, 255, 255, .7); }
.segmented button.is-active { background: var(--mx-white); color: var(--mx-primary-800); box-shadow: 0 1px 4px rgba(11, 42, 85, .15); }
.grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 6rem; gap: 0 .5rem; }
.grid-3 label { margin-bottom: 0; }
.grid-3 input { margin-bottom: .3rem; padding-left: .65rem; padding-right: .35rem; font-variant-numeric: tabular-nums; }
.grid-3 input[type=time] { background-image: none; padding-right: .5rem; }
.unit-field { position: relative; display: block; }
.unit-field input { padding-right: 2.2rem !important; }
.unit-field > span { position: absolute; right: .55rem; top: calc(50% - .15rem); transform: translateY(-50%); color: var(--mx-muted); font-size: .85rem; pointer-events: none; }
.client-row { padding: .75rem; border: 1px solid var(--mx-sand-200); border-radius: 12px; background: var(--mx-sand-50); margin-bottom: .6rem; }
.client-row .row-top { display: flex; gap: .5rem; align-items: center; }
.client-row .row-top select { flex: 1; margin: 0; min-width: 0; }
.client-row .row-bottom { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
.hours-field { position: relative; margin: 0; width: 8.5rem; flex: none; }
.hours-field input { margin: 0; padding-right: 2rem; font-weight: 700; font-size: 1.05rem; }
.hours-field span { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); color: var(--mx-muted); font-weight: 600; pointer-events: none; }
.sav-toggle { position: relative; margin: 0; }
.sav-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sav-toggle span { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .85rem; border-radius: 999px; border: 1.5px solid var(--mx-sand-300); background: var(--mx-white); color: var(--mx-ink-soft); font-weight: 600; cursor: pointer; font-size: .92rem; }
.sav-toggle input:checked + span { background: var(--mx-violet-bg); border-color: var(--mx-violet); color: var(--mx-violet); }
.sav-toggle input:focus-visible + span { outline: 3px solid var(--pico-primary-focus); }
.remove-row { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0 !important; flex: none; border-radius: 10px; background: var(--mx-white); color: var(--mx-muted); border: 1px solid var(--mx-sand-300); }
.remove-row:hover { color: var(--mx-red); border-color: var(--mx-red-border); background: var(--mx-red-bg); }
.site-info { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin-top: .45rem; color: var(--mx-muted); font-size: .84rem; }
.site-info:empty { display: none; }
.site-info .meta { display: inline-flex; align-items: center; gap: .3rem; }
.add-row { width: 100%; display: flex !important; align-items: center; justify-content: center; gap: .4rem; border-style: dashed !important; color: var(--mx-primary-700) !important; background: transparent !important; border-color: var(--mx-primary-200) !important; }
.add-row:hover { background: var(--mx-primary-50) !important; }
details.extra { background: var(--mx-white); border: 1px solid var(--mx-sand-200); border-radius: var(--mx-radius); padding: .1rem 1rem; margin-bottom: .6rem; }
details.extra summary { display: flex; align-items: center; gap: .55rem; padding: .7rem 0; font-weight: 600; color: var(--mx-ink); }
details.extra summary .icon { color: var(--mx-primary-600); }
details.extra[open] summary { margin-bottom: .2rem; }
.worked-live { font-weight: 800; color: var(--mx-primary-700); }

/* Sticky save bar with live recap */
.savebar { position: sticky; bottom: 0; z-index: 10; margin: 1rem -1rem 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--mx-sand-200); box-shadow: 0 -6px 20px rgba(11, 42, 85, .1); backdrop-filter: blur(6px); }
@media (min-width: 720px) { .savebar { margin: 1rem 0 0; border-radius: var(--mx-radius); border: 1px solid var(--mx-sand-200); bottom: 1rem; } }
.savebar button[type=submit] { width: 100%; margin: .6rem 0 0; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem; font-size: 1.05rem; border-radius: 12px; }
.recap-figs { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .95rem; }
.recap-figs b { font-size: 1.05rem; }
.progress { height: 8px; border-radius: 999px; background: var(--mx-sand-100); overflow: hidden; margin: .45rem 0 .35rem; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--mx-amber-border); transition: width .25s; }
.recap-ok .progress > span { background: var(--mx-primary-500); }
.recap-over .progress > span { background: var(--mx-red); }
.recap-hint { font-size: .86rem; display: flex; gap: .4rem; align-items: flex-start; color: var(--mx-amber); }
.recap-ok .recap-hint { color: var(--mx-primary-700); }
.recap-over .recap-hint, .recap-warn .recap-hint { color: var(--mx-red); }
.recap-hint .icon { margin-top: .12rem; }

/* ---------- Entry detail / list ---------- */
.detail-head { display: flex; align-items: center; gap: 1rem; }
.detail-head .day-date { width: 64px; height: 70px; background: var(--mx-primary-700); }
.detail-head .day-date .dow, .detail-head .day-date .dnum, .detail-head .day-date .mon { color: var(--mx-white); }
.detail-head h1 { font-size: 1.35rem; margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; margin: 1rem 0; }
.stat { background: var(--mx-white); border: 1px solid var(--mx-sand-200); border-radius: 12px; padding: .7rem .8rem; }
.stat .label { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--mx-muted); font-weight: 600; }
.stat .value { display: block; font-size: 1.3rem; font-weight: 800; color: var(--mx-ink); margin: .15rem 0 .1rem; }
.stat small { display: block; line-height: 1.35; }
.alloc-list { list-style: none; padding: 0; margin: 0; }
.alloc-list li { list-style: none; display: flex; align-items: center; gap: .6rem; padding: .65rem 0; border-bottom: 1px solid var(--mx-sand-100); margin: 0; }
.alloc-list li:last-child { border-bottom: 0; }
.alloc-list .name { flex: 1; min-width: 0; }
.alloc-list .name small { display: block; color: var(--mx-muted); }
.alloc-list .h { font-weight: 800; }
.manager-only { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; color: var(--mx-ink-soft); background: var(--mx-sand-100); padding: .55rem .8rem; border-radius: 10px; margin-top: .8rem; font-size: .92rem; }
.timeline { list-style: none; padding: 0 0 0 1.2rem; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: .35rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--mx-sand-200); }
.timeline > li { list-style: none; position: relative; margin: 0 0 1rem; padding-left: .6rem; }
.timeline > li::before { content: ""; position: absolute; left: -1.08rem; top: .4rem; width: 12px; height: 12px; border-radius: 50%; background: var(--mx-white); border: 3px solid var(--mx-primary-600); }
.timeline > li.is-correction::before { border-color: var(--mx-amber); }
.timeline .when { font-size: .82rem; color: var(--mx-muted); }
.timeline ul { margin: .25rem 0 0; padding-left: 1rem; font-size: .92rem; }
.timeline ul li { list-style: disc; margin: 0; }
.pager { display: flex; justify-content: space-between; margin-top: 1rem; }

/* ---------- Dashboards ---------- */
.tabs { display: flex; justify-content: flex-start; gap: .35rem; overflow-x: auto; padding: .3rem; margin: 0 0 1rem; background: var(--mx-white); border: 1px solid var(--mx-sand-200); border-radius: 999px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { white-space: nowrap; padding: .45rem .9rem; border-radius: 999px; color: var(--mx-ink-soft); font-weight: 600; font-size: .9rem; text-decoration: none !important; }
.tabs a:hover { background: var(--mx-sand-100); }
.tabs a[aria-current] { background: var(--mx-primary-700); color: var(--mx-white); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .75rem; margin-bottom: 1.2rem; padding: .75rem .85rem; background: var(--mx-white); border: 1px solid var(--mx-sand-200); border-radius: var(--mx-radius); }
.filters label { margin: 0; font-size: .78rem; font-weight: 700; color: var(--mx-muted); flex: 0 1 auto; }
.filters input:not([type=checkbox]), .filters select { width: auto; min-width: 9.5rem; margin: .2rem 0 0; padding: .4rem .6rem; height: auto; font-size: .9rem; }
.filters button { width: auto; margin: 0; padding: .45rem 1.1rem; font-size: .9rem; }
.filters .check { display: flex; align-items: center; gap: .35rem; padding-bottom: .5rem; color: var(--mx-ink); }
.filters .check input { margin: 0; }
.presets { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 100%; }
.presets a { display: inline-block; flex: none; width: auto; padding: .32rem .8rem; border-radius: 999px; border: 1px solid var(--mx-sand-200); background: var(--mx-white); color: var(--mx-ink-soft); font-size: .85rem; font-weight: 600; text-decoration: none !important; }
.presets a:hover { border-color: var(--mx-primary-200); }
.presets a[aria-current] { background: var(--mx-primary-700); border-color: var(--mx-primary-700); color: var(--mx-white); }
@media (max-width: 600px) { .filters label { flex: 1 1 40%; } .filters input:not([type=checkbox]), .filters select { width: 100%; min-width: 0; } }

/* Missing days on the home page: compact date chips instead of a wall of cards */
.missing-grid { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .5rem; }
.missing-grid a { display: inline-flex; flex-direction: column; align-items: center; min-width: 3.6rem; padding: .35rem .5rem; border-radius: 12px; border: 1.5px dashed var(--mx-amber-border); background: #fffcf6; color: var(--mx-amber); text-decoration: none !important; line-height: 1.1; }
.missing-grid a:hover { background: var(--mx-amber-bg); }
.missing-grid .dow { font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.missing-grid .dnum { font-size: 1.1rem; font-weight: 800; }
.kpi-group { margin-bottom: 1.2rem; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-bottom: 1rem; }
@media (min-width: 720px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.kpi { position: relative; display: block; background: var(--mx-white); border: 1px solid var(--mx-sand-200); border-radius: var(--mx-radius); padding: .85rem .9rem .8rem; box-shadow: var(--mx-shadow); color: var(--mx-ink); text-decoration: none !important; overflow: hidden; transition: transform .12s, box-shadow .12s; }
a.kpi:hover { transform: translateY(-1px); box-shadow: var(--mx-shadow-lg); }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mx-primary-500); }
.kpi.tone-sky::before { background: var(--mx-sky); }
.kpi.tone-amber::before { background: #d99a2b; }
.kpi.tone-violet::before { background: var(--mx-violet); }
.kpi.tone-slate::before { background: var(--mx-slate); }
.kpi .kpi-label { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--mx-muted); font-weight: 600; line-height: 1.25; }
.kpi .kpi-value { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin-top: .2rem; color: var(--mx-ink); }
.kpi .kpi-sub { display: block; font-size: .78rem; color: var(--mx-muted); }
.negative { color: var(--mx-red) !important; }
.positive { color: var(--mx-primary-700) !important; }
table { margin-bottom: 0; }
.data { background: var(--mx-white); border: 1px solid var(--mx-sand-200); border-radius: var(--mx-radius); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; box-shadow: var(--mx-shadow); margin-bottom: 1.2rem; }
.data table { margin: 0; min-width: 100%; width: max-content; }
.data th, .data td { white-space: nowrap; }
.data td.wrap { white-space: normal; min-width: 14rem; }
/* Phones: the first column (site, employee, date) stays visible while scrolling sideways */
@media (max-width: 899px) {
  .data th:first-child, .data td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--mx-sand-200), 6px 0 8px -6px rgba(11, 42, 85, .25); }
  .data th:first-child { z-index: 2; }
}
@media (min-width: 900px) { .data table { width: 100%; } }
.data th { background: var(--mx-sand-50); color: var(--mx-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-bottom-color: var(--mx-sand-200); }
.data td { border-bottom-color: var(--mx-sand-100); font-size: .93rem; background: var(--mx-white); color: var(--mx-ink); }
.data tr:hover td { background: var(--mx-primary-50); }
.data td a { font-weight: 600; color: var(--mx-primary-700); }
.bar { display: flex; align-items: center; gap: .5rem; min-width: 120px; }
.bar .track { flex: 1; height: 7px; border-radius: 999px; background: var(--mx-sand-100); overflow: hidden; }
.bar .track span { display: block; height: 100%; background: var(--mx-primary-500); border-radius: inherit; }
.bar.is-over .track span { background: var(--mx-red); }
.bar.is-high .track span { background: #d99a2b; }
.bar small { width: 3.2rem; text-align: right; font-weight: 700; font-size: .8rem; }
.chart-card { padding: .6rem .6rem .2rem; }
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--pico-font-family); fill: var(--mx-muted); font-size: 12px; }
.footnote { color: var(--mx-muted); font-size: .84rem; }

/* ---------- Brand accents and success states stay leaf green ---------- */
.brand-mark { background: var(--mx-white); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.brand-mark img { width: 100%; height: 100%; display: block; }
.wordmark { font-weight: 900; letter-spacing: .02em; font-size: 1.1rem; line-height: 1.05; }
.wordmark .m { color: var(--mx-leaf); }
.wordmark .atex { color: var(--mx-white); }
.brand-text small { color: var(--mx-primary-200); }
.chip-work, .chip-done, .chip-ok { background: var(--mx-green-100); color: var(--mx-green-800); }
.toast { background: var(--mx-green-100); color: var(--mx-green-900); border-color: var(--mx-green-200); }
.toast-error { background: var(--mx-red-bg); color: var(--mx-red); border-color: var(--mx-red-border); }
.toast-info { background: var(--mx-sky-bg); color: var(--mx-sky); border-color: #bcd6ea; }
.notice-green { background: var(--mx-green-50); color: var(--mx-green-800); border-color: var(--mx-green-200); }
.today-done { background: var(--mx-green-50); border-color: var(--mx-green-200); color: var(--mx-green-900); }
.today-done .badge-icon { background: #3a9a3a; }
.recap-ok .progress > span, .bar .track span { background: #4caf50; }
.bar.is-over .track span { background: var(--mx-red); }
.bar.is-high .track span { background: #d99a2b; }
.recap-ok .recap-hint, .positive { color: var(--mx-green-700) !important; }
.kpi::before { background: var(--mx-primary-600); }
.tabbar .tab-primary .icon { background: linear-gradient(140deg, var(--mx-leaf), #3a9a3a); color: var(--mx-white); box-shadow: 0 6px 16px rgba(58, 154, 58, .45); }
.cta { box-shadow: 0 8px 20px rgba(26, 79, 145, .3); }
.login-hero { background: radial-gradient(120% 90% at 0% 0%, var(--mx-primary-600) 0%, var(--mx-primary-800) 55%, var(--mx-primary-900) 100%); }
.login-hero .wordmark { font-size: 2.6rem; display: block; }
.login-title { font-size: 1.15rem; text-align: center; margin: 0 0 1rem; color: var(--mx-primary-800); }
.login-hero .tagline { color: var(--mx-primary-100); font-size: .85rem; margin: 0 0 .4rem; letter-spacing: .02em; }
.login-hero .script { font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive; color: var(--mx-white); font-size: 1.35rem; margin: .1rem 0 0; }