/* =============================================================================
   Salon TimeClock - employee PWA

   Mobile-first and hand-written. No component library and no CSS framework of any
   kind. The design target is an employee holding an iPhone in one hand, so
   everything below is sized for a thumb first and only widens on larger screens.

   Presentation lives here and nowhere else, so the look can be adjusted later
   without touching any application or API code.
   ============================================================================= */

:root {
    --brand:            #1f6f4a;
    --brand-dark:       #16543a;
    --clock-in:         #1f6f4a;
    --clock-out:        #9a3412;

    --ink:              #14201b;
    --ink-muted:        #5a6b63;
    --page:             #f4f6f5;
    --surface:          #ffffff;
    --line:             #d8e0dc;

    --ok-bg:            #e7f5ec;
    --ok-ink:           #14532d;
    --warn-bg:          #fff4e5;
    --warn-ink:         #7c2d12;
    --error-bg:         #fdeaea;
    --error-ink:        #8a1c1c;
    --alert-bg:         #fff8e1;
    --alert-ink:        #6b4a00;

    --radius:           14px;
    --gap:              1rem;

    /* 56px minimum on every interactive element - comfortably above the 44px
       guidance, because this is tapped with a thumb, often in a hurry. */
    --touch:            56px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.45;
    /* Nothing may scroll sideways on a phone. */
    overflow-x: hidden;
}

.screen {
    max-width: 34rem;
    margin: 0 auto;
    padding: max(1rem, env(safe-area-inset-top)) 1rem
             calc(2rem + env(safe-area-inset-bottom)) 1rem;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.screen--centered { min-height: 100vh; justify-content: center; }

/* ------------------------------------------------------------------ branding */
.brand { text-align: center; margin-bottom: .5rem; }
.brand__name { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--brand-dark); }
.brand__sub  { margin: .25rem 0 0; color: var(--ink-muted); font-size: 1rem; }

/* -------------------------------------------------------------------- topbar */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.topbar__employee { margin: 0; font-size: 1.25rem; font-weight: 700; }
.topbar__salon    { margin: 0; color: var(--ink-muted); font-size: .95rem; }
.topbar__link {
    color: var(--brand-dark);
    font-weight: 600;
    text-decoration: none;
    padding: .75rem .5rem;          /* keeps the tap area honest */
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
}
.topbar__link:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* -------------------------------------------------------------------- status */
.status {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    text-align: center;
}
.status__state {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.status__state--in  { color: var(--clock-in); }
.status__state--out { color: var(--ink-muted); }
.status__since { margin: .35rem 0 0; color: var(--ink-muted); }

/* ------------------------------------------------------------ primary action */
.action { display: flex; flex-direction: column; gap: .5rem; }

.btn {
    font: inherit;
    font-weight: 700;
    border: 0;
    border-radius: var(--radius);
    min-height: var(--touch);
    padding: .9rem 1.25rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 3px; }
.btn[disabled] { opacity: .55; cursor: default; }

.btn--block   { width: 100%; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--secondary {
    background: var(--surface);
    color: var(--brand-dark);
    border: 2px solid var(--brand);
}
.btn--quiet { background: transparent; color: var(--ink-muted); font-weight: 600; }

/* The one control the whole app exists for. Deliberately enormous. */
.btn--clock {
    min-height: 5.5rem;
    font-size: 1.5rem;
    letter-spacing: .06em;
    color: #fff;
}
.btn--in  { background: var(--clock-in); }
.btn--out { background: var(--clock-out); }

.action__progress {
    margin: 0;
    text-align: center;
    color: var(--ink-muted);
    min-height: 1.5rem;
}

/* ---------------------------------------------------------------- feedback */
/* Rejections are never small print. */
.feedback {
    border-radius: var(--radius);
    padding: 1rem;
    border-left: 6px solid;
}
.feedback--ok    { background: var(--ok-bg);    color: var(--ok-ink);    border-color: var(--ok-ink); }
.feedback--warn  { background: var(--warn-bg);  color: var(--warn-ink);  border-color: var(--warn-ink); }
.feedback--error { background: var(--error-bg); color: var(--error-ink); border-color: var(--error-ink); }

.feedback__title  { margin: 0 0 .35rem; font-size: 1.15rem; font-weight: 800; }
.feedback__body   { margin: 0; }
.feedback__detail { margin: .5rem 0 0; font-size: .95rem; opacity: .85; }

/* ------------------------------------------------------------ announcement */
/* The target-reached banner. Large, unmissable, and it stays until acknowledged. */
.announcement {
    background: var(--brand);
    color: #fff;
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: 0 6px 20px rgba(31, 111, 74, .28);
}
.announcement__title { margin: 0 0 .5rem; font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.announcement__body  { margin: 0 0 .75rem; }
.announcement .btn--quiet {
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .6);
    width: 100%;
}

/* -------------------------------------------------------------------- cards */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
}
.card__title { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 700; }
.card__body  { margin: 0 0 .75rem; color: var(--ink-muted); }
.card__note  { margin: .75rem 0 0; color: var(--ink-muted); font-size: .9rem; }

/* -------------------------------------------------------------------- stats */
.stats { margin: 0 0 1rem; }
.stats__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--line);
}
.stats__row:last-child { border-bottom: 0; }
.stats__row dt { color: var(--ink-muted); margin: 0; }
.stats__row dd { margin: 0; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.stats__row--reached dd { color: var(--clock-in); }

/* ----------------------------------------------------------------- activity */
.activity { list-style: none; margin: 0; padding: 0; }
.activity li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--line);
}
.activity li:last-child { border-bottom: 0; }
.activity__time  { font-weight: 700; font-variant-numeric: tabular-nums; }
.activity__what  { color: var(--ink-muted); }
.activity__empty { color: var(--ink-muted); justify-content: flex-start; }
.activity__corrected { font-size: .8rem; color: var(--warn-ink); }

/* -------------------------------------------------------------------- forms */
/* ---------------------------------------------------------------------------
   [hidden] must actually hide.

   The browser's own stylesheet says [hidden] { display: none }, but ANY author
   rule that sets display beats it - author styles win over user-agent styles
   regardless of specificity. So `.form { display: flex }` quietly made every
   element carrying both `class="form"` and `hidden` permanently visible.

   Two things were broken by that, and neither could be caught by a server-side
   test, because the markup was correct and only the rendering was wrong:

     * the work-target entry form showed on load, beside the very button whose
       job is to open it - found on a real phone during pilot testing;
     * the owner's WorkTarget.ShowWorked / ShowRemaining / ShowEstimatedFinish
       toggles did nothing at all, because .stats__row also sets display.

   !important is warranted here: this rule exists precisely to outrank every
   layout rule in this file, now and in future. Anything that needs to be laid
   out is not hidden, so there is no case where losing the flex matters.
   --------------------------------------------------------------------------- */
[hidden] { display: none !important; }

.form { display: flex; flex-direction: column; gap: .85rem; }
.form--secondary { margin-top: .5rem; }
.form__lead { margin: 0; font-weight: 600; }

.field { display: flex; flex-direction: column; gap: .35rem; }
.field__label { font-weight: 600; font-size: .95rem; }
.field__input {
    font: inherit;
    /* 17px or larger stops iOS Safari zooming the page on focus. */
    font-size: 17px;
    min-height: var(--touch);
    padding: .75rem;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    width: 100%;
}
.field__input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.field__input--number { text-align: center; font-size: 1.4rem; font-weight: 700; }
.field__help { margin: 0; color: var(--ink-muted); font-size: .85rem; }

.field-row { display: flex; gap: .75rem; }
.field-row .field { flex: 1; }

/* ------------------------------------------------------------------- alerts */
.alert { border-radius: 10px; padding: .85rem 1rem; }
.alert--error  { background: var(--error-bg); color: var(--error-ink); }
.alert--notice { background: var(--alert-bg); color: var(--alert-ink); margin: .75rem 1rem 0; }

.notice { margin: 0 0 .75rem; font-weight: 600; }
.notice--ok      { color: var(--ok-ink); }
.notice--blocked { color: var(--warn-ink); }

/* --------------------------------------------------------- offline banner */
/* Shown when the server cannot be reached. Clock actions are never queued. */
.offline-banner {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    margin: 0;
    padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
    background: var(--error-ink);
    color: #fff;
    text-align: center;
    font-weight: 600;
    z-index: 20;
}

/* ------------------------------------------------------------- wider screens */
@media (min-width: 40rem) {
    body { font-size: 18px; }
    .screen { padding-top: 2rem; }
}

/* Respect a reduced-motion preference; nothing here is essential animation. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}