/* ==========================================================================
   Penna Gomme — officina gommista: carta calda, nero pneumatico, rosso Penna,
   giallo segnaletica. Titoli Big Shoulders (insegna), testo Figtree.
   ========================================================================== */

:root {
    --paper: #f4f1ec;
    --paper-2: #ebe6dd;
    --card: #fffdf9;
    --ink: #17191e;
    --ink-2: #23262d;
    --ink-soft: #4a4f59;
    --muted: #8a8d94;
    --line: #e2dcd1;
    --line-2: #d4ccbf;

    --red: #d42a20;
    --red-deep: #a51d15;
    --red-soft: #fbe4e1;
    --yellow: #ffc21a;
    --yellow-soft: #fff3cf;
    --green: #1d9a55;
    --green-soft: #e0f3e8;
    --amber: #e29a00;

    --wh-officina: #2d62a3;
    --wh-segrate: #13837a;
    --wh-casa: #c27c1a;

    --inv: #1f5f9e;
    --inv-soft: #e4f0fb;
    --est: #9a6200;
    --est-soft: #fff0c9;

    --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --f-plate: "Big Shoulders Text", "Arial Narrow", sans-serif;
    --f-body: "Figtree", system-ui, sans-serif;

    --r: 14px;
    --shadow: 0 1px 0 rgba(23,25,30,.04), 0 6px 18px -8px rgba(23,25,30,.18);
    --shadow-lg: 0 18px 40px -18px rgba(23,25,30,.35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        radial-gradient(rgba(23,25,30,.045) 1px, transparent 1.2px),
        radial-gradient(1200px 500px at 100% -10%, rgba(212,42,32,.06), transparent 60%);
    background-size: 18px 18px, auto;
    min-height: 100vh;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-deep); }
b, strong { font-weight: 700; }
code { font-size: .9em; background: var(--paper-2); padding: 1px 6px; border-radius: 5px; }

.ico { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.muted { color: var(--muted); }

/* ---- Tipografia ------------------------------------------------------- */
.display {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(38px, 5vw, 58px);
    line-height: .95;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin: 0;
}
.display span { color: var(--muted); font-weight: 700; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0 0 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--red);
}
.eyebrow .ico { width: 15px; height: 15px; }
.eyebrow a { display: inline-flex; align-items: center; gap: 7px; color: inherit; }
.eyebrow a:hover { color: var(--red-deep); }
.eyebrow-light { color: var(--yellow); }

/* ---- Header ----------------------------------------------------------- */
.hdr { position: sticky; top: 0; z-index: 40; background: var(--ink); color: #fff; }
.hdr-in {
    max-width: 1240px; margin: 0 auto;
    display: flex; align-items: center; gap: 22px;
    padding: 12px 20px;
}
.tread {
    height: 10px;
    background-color: #30343d;
    background-image:
        linear-gradient(135deg, var(--ink) 25%, transparent 25%),
        linear-gradient(225deg, var(--ink) 25%, transparent 25%),
        linear-gradient(315deg, var(--ink) 25%, transparent 25%),
        linear-gradient(45deg, var(--ink) 25%, transparent 25%);
    background-size: 20px 20px;
    background-position: -10px 0, -10px 0, 0 0, 0 0;
}

.logo { display: flex; align-items: center; gap: 10px; color: #fff; }
.logo:hover { color: #fff; }
.logo-mark {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--red); color: #fff;
    box-shadow: inset 0 0 0 3px rgba(0,0,0,.25);
    transition: transform 1.2s cubic-bezier(.55,0,.15,1);
}
.logo-mark .ico { width: 26px; height: 26px; }
.logo:hover .logo-mark { transform: rotate(720deg); }
.logo-t { font-family: var(--f-display); font-weight: 900; font-size: 25px; text-transform: uppercase; letter-spacing: 1px; line-height: 1; }
.logo-t b { color: #fff; font-weight: 900; }
.logo-t em { color: var(--red); font-style: normal; margin-left: 4px; }

.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 10px;
    color: #b9bdc6; font-weight: 600; font-size: 14.5px;
    transition: background .15s, color .15s;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav a.on { color: var(--ink); background: var(--yellow); }
.nav a.on .ico { color: var(--ink); }

.invsel {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 12px 5px 6px; border-radius: 999px;
    background: #2b2f38; border: 1px solid #3a3f4a;
}
.invsel-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.invsel.season-inv .invsel-ico { background: var(--inv-soft); color: var(--inv); }
.invsel.season-est .invsel-ico { background: var(--est-soft); color: var(--est); }
.invsel.is-past { border-color: var(--yellow); }
.invsel-l { display: flex; flex-direction: column; line-height: 1.1; }
.invsel-l small { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #8e939d; font-weight: 700; }
.invsel select {
    appearance: none; -webkit-appearance: none;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc21a' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 14px no-repeat;
    border: 0; color: #fff; font: 700 15px var(--f-body);
    padding: 0 20px 0 0; cursor: pointer;
}
.invsel select option { color: var(--ink); }

.me { display: flex; align-items: center; gap: 8px; }
.me-av {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--yellow); color: var(--ink);
    font-family: var(--f-display); font-weight: 900; font-size: 18px;
}
.me-out { color: #8e939d; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; }
.me-out:hover { color: #fff; background: rgba(255,255,255,.08); }
.me-out.on { color: var(--ink); background: var(--yellow); }

/* Nastro "inventario passato" */
.pastbar {
    background:
        repeating-linear-gradient(-45deg, var(--yellow) 0 12px, var(--ink) 12px 24px) left / 10px 100% no-repeat,
        var(--yellow-soft);
    border-bottom: 1px solid #f0d98c;
}
.pastbar-in { max-width: 1240px; margin: 0 auto; padding: 10px 20px 10px 34px; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.pastbar-in > .ico { color: var(--amber); }
.pastbar-in span { flex: 1; }

/* ---- Layout ----------------------------------------------------------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 30px 20px 80px; }

.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.ph-sub { margin: 10px 0 0; color: var(--ink-soft); max-width: 60ch; }
.tag-cur, .tag-past {
    font-family: var(--f-body); font-style: normal; font-weight: 700; font-size: 12px;
    letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; vertical-align: middle; margin-left: 6px;
    position: relative; top: -8px;
}
.tag-cur { background: var(--green-soft); color: var(--green); }
.tag-past { background: var(--yellow-soft); color: var(--est); }

/* ---- Bottoni ---------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: 11px;
    border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink);
    font: 700 14px var(--f-body); cursor: pointer; white-space: nowrap;
    transition: transform .08s, background .15s, border-color .15s, box-shadow .15s;
    list-style: none;
}
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 17px; height: 17px; }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 6px 14px -6px rgba(212,42,32,.6); }
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--paper-2); border-color: transparent; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.btn-lg { padding: 13px 22px; font-size: 15.5px; }
.btn-block { width: 100%; }
summary.btn::-webkit-details-marker { display: none; }

.round-btn {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ink); color: #fff;
    transition: transform .15s, background .15s;
}
.round-btn:hover { background: var(--red); color: #fff; transform: scale(1.06); }
.round-btn .ico { width: 22px; height: 22px; }

.icon-btn {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-grid; place-items: center;
    border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft);
    cursor: pointer; list-style: none; transition: all .15s;
}
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.icon-btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }

/* ---- Mesi ------------------------------------------------------------- */
.monthctl { display: flex; align-items: center; gap: 8px; }
.viewtoggle { margin-left: auto; align-self: center; }
@media (max-width: 640px) { .viewtoggle { margin-left: 0; } }
.seg a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; font-weight: 700; font-size: 13.5px; color: var(--ink-soft); }
.seg a .ico { width: 15px; height: 15px; }
.seg a:hover { color: var(--ink); }
.seg a.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.pill-appt { background: var(--inv-soft); color: var(--inv); }
.months {
    display: flex; gap: 6px; align-items: stretch;
    overflow-x: auto; padding: 12px 2px 10px; margin-bottom: 18px;
    scrollbar-width: thin;
}
.months-y {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 0 10px; color: var(--muted); font-weight: 700; font-size: 13px; white-space: nowrap;
}
.months-y:hover { color: var(--ink); }
.mchip {
    flex: 1 0 64px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 6px 7px; border-radius: 12px;
    background: var(--card); border: 1.5px solid var(--line);
    color: var(--ink); position: relative;
    transition: transform .12s, border-color .12s;
}
.mchip span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); }
.mchip b { font-family: var(--f-display); font-size: 22px; line-height: 1; }
.mchip:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--ink); }
.mchip.is-empty { background: transparent; }
.mchip.is-empty b { color: var(--line-2); }
.mchip span small { font-size: 10px; color: var(--muted); letter-spacing: .5px; }
.mchip-now { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font: 800 9.5px var(--f-body); letter-spacing: 1px; text-transform: uppercase; font-style: normal; padding: 2px 6px; border-radius: 99px; }
.mchip.now { border-color: var(--red); }
.mchip.on { background: var(--ink); border-color: var(--ink); }
.mchip.on span { color: var(--yellow); }
.mchip.on b { color: #fff; }

/* ---- Statistiche ------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr) 1.6fr; gap: 10px; margin-bottom: 18px; }
.stat {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    padding: 12px 16px; display: flex; align-items: baseline; gap: 8px; box-shadow: var(--shadow);
}
.stat b { font-family: var(--f-display); font-size: 34px; line-height: 1; font-weight: 800; }
.stat span { color: var(--muted); font-size: 13px; font-weight: 600; }
.stat-green b { color: var(--green); }
.stat-muted b { color: var(--muted); }
.stat-tyres { align-items: center; gap: 6px; }
.stat-tyres b { font-size: 26px; margin-right: 8px; }
.dotc { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dotc.green { background: var(--green); }
.dotc.yellow { background: var(--yellow); }
.dotc.red { background: var(--red); }

/* ---- Toolbar ---------------------------------------------------------- */
.toolbar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-bottom: 22px;
}
.search {
    flex: 1 1 280px; display: flex; align-items: center; gap: 8px;
    background: var(--card); border: 1.5px solid var(--line-2); border-radius: 12px;
    padding: 0 12px; transition: border-color .15s, box-shadow .15s;
}
.search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,194,26,.35); }
.search .ico { color: var(--muted); }
.search input { flex: 1; border: 0; background: transparent; padding: 11px 0; font: 500 15px var(--f-body); color: var(--ink); outline: none; min-width: 0; }

.seg { display: inline-flex; background: var(--paper-2); border-radius: 12px; padding: 4px; gap: 2px; }
.seg label { position: relative; padding: 7px 13px; border-radius: 9px; font-weight: 700; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:hover { color: var(--ink); }
.seg label.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ---- Popover (details) ------------------------------------------------ */
.pop { position: relative; }
.pop > summary { list-style: none; }
.pop > summary::-webkit-details-marker { display: none; }
.pop-body {
    position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
    min-width: 260px; padding: 14px;
    background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 10px;
    animation: pop .14s ease-out;
}
.pop-right .pop-body { left: auto; right: 0; }
.pop-body label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.pop-body input { padding: 9px 10px; border: 1.5px solid var(--line-2); border-radius: 9px; font: 500 14px var(--f-body); }
.pop-body small { color: var(--muted); font-size: 12px; }
.pop-sep { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); font-weight: 700; text-align: center; }
.range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ---- Agenda ----------------------------------------------------------- */
.agenda-tools { display: flex; gap: 8px; justify-content: flex-end; margin: -6px 0 12px; }
.day-h { flex-wrap: wrap; }
.day-toggle {
    display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0;
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
    font: inherit; color: inherit;
}
.day-chev { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); flex: none; transition: transform .2s, background .15s; }
.day-chev .ico { width: 16px; height: 16px; }
.day-toggle:hover .day-chev { background: var(--ink); color: #fff; }
.day.is-open .day-chev { transform: rotate(90deg); }
.day-sum { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.day-cnt { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px; min-width: 132px; }
.day-cnt b { font-family: var(--f-display); font-size: 20px; color: var(--ink); min-width: 22px; text-align: right; }
.day-av { display: inline-grid; grid-template-columns: repeat(3, 38px); font-weight: 700; color: var(--ink); }
.day-avs { display: inline-flex; align-items: center; gap: 5px; }
.day-avs.is-zero { visibility: hidden; }
.day-av .dotc { width: 9px; height: 9px; }
.day-print { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.whcheck span { min-width: 92px; justify-content: space-between; }
@media (min-width: 1100px) { .day-print { width: 700px; } }
.tyreprint { display: flex; align-items: center; gap: 4px; margin: 0; }
.whcheck { position: relative; cursor: pointer; }
.whcheck input { position: absolute; opacity: 0; pointer-events: none; }
.whcheck span {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 8px; border-radius: 8px; border: 1.5px solid var(--line-2); background: var(--card);
    font-size: 12px; font-weight: 800; color: var(--ink-soft); transition: all .12s;
}
.whcheck span b { font-family: var(--f-display); font-size: 15px; }
.whcheck input:checked + span { color: #fff; background: var(--ink-soft); border-color: var(--ink-soft); }
.whcheck.wh-officina input:checked + span { background: var(--wh-officina); border-color: var(--wh-officina); }
.whcheck.wh-segrate input:checked + span { background: var(--wh-segrate); border-color: var(--wh-segrate); }
.whcheck.wh-casa input:checked + span { background: var(--wh-casa); border-color: var(--wh-casa); }
label.whcheck.wh-officina, label.whcheck.wh-segrate, label.whcheck.wh-casa { background: none; padding: 0; color: inherit; }
.whcheck.is-off { cursor: not-allowed; opacity: .4; }
.whcheck input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255,194,26,.5); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-pair { display: inline-flex; }
.btn-pair > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-pair > .btn-icon { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1.5px; padding-left: 9px; padding-right: 9px; }
.btn-pair > .btn-dark.btn-icon { border-left-color: #3a3f4a; }
.day .appts { display: none; }
.day.is-open .appts { display: flex; }
.day:not(.is-open) .day-h { margin-bottom: 0; }
.day:not(.is-open) { padding-bottom: 2px; }
.agenda { gap: 18px; }
.agenda { display: flex; flex-direction: column; gap: 26px; }
.day-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.day-n { font-family: var(--f-display); font-weight: 900; font-size: 46px; line-height: .8; min-width: 48px; }
.day-w { display: flex; flex-direction: column; font-weight: 700; text-transform: capitalize; line-height: 1.15; }
.day-w small { color: var(--muted); font-weight: 600; text-transform: none; }
.day-tag { background: var(--red); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.day-tag-soft { background: var(--yellow); color: var(--ink); }
.day-c { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 13px; }
.day.is-today .day-h { border-color: var(--red); }
.day.is-today .day-n { color: var(--red); }
.day.is-past .day-n { color: var(--muted); }

.appts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.appt {
    display: grid;
    grid-template-columns: 64px minmax(190px, 1.25fr) minmax(140px, .9fr) minmax(220px, 1.35fr) auto;
    align-items: center; gap: 16px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    padding: 12px 14px 12px 16px;
    box-shadow: var(--shadow);
    position: relative;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    animation: rise .35s ease-out both;
}
.appt::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: transparent; }
.appt.light-yellow::before { background: var(--yellow); }
.appt.light-red::before { background: var(--red); }
.appt.light-green::before { background: var(--green); }
/* la riga con un popup aperto sta sopra alle successive */
.appt:has(details[open]) { z-index: 25; }
.toolbar:has(details[open]) { position: relative; z-index: 25; }
.appt:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(23,25,30,.4); border-color: var(--line-2); }
.appt.is-done { background: #fbfdfb; }
.appt.is-cancelled { background: transparent; box-shadow: none; border-style: dashed; }
.appt.is-cancelled > *:not(.a-act) { opacity: .45; }
.appt.is-cancelled .a-name, .appt.is-cancelled .plate-num { text-decoration: line-through; }

.appts .appt:nth-child(2) { animation-delay: .03s; }
.appts .appt:nth-child(3) { animation-delay: .06s; }
.appts .appt:nth-child(4) { animation-delay: .09s; }
.appts .appt:nth-child(5) { animation-delay: .12s; }
.appts .appt:nth-child(n+6) { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.a-time strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: 27px; line-height: 1; }
.a-time small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.a-who { min-width: 0; }
.a-name { font-weight: 700; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 3px; font-size: 12.5px; color: var(--ink-soft); }
.a-meta a { color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.a-meta a:hover { color: var(--red); }
.a-meta .ico { width: 13px; height: 13px; }
.pill { display: inline-flex; align-items: center; gap: 4px; background: var(--paper-2); color: var(--ink-soft); font-weight: 700; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; }
.pill-warn { background: var(--yellow-soft); color: var(--est); }
.a-service { font-weight: 700; }
.a-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.a-notes { font-size: 12px; color: var(--muted); margin-top: 3px; font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Stato gomme */
.a-tyres { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.tyre-badge { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.tyre-badge .ico { width: 24px; height: 24px; }
.tyre-green .tyre-badge { background: var(--green-soft); color: var(--green); }
.tyre-yellow .tyre-badge { background: var(--yellow-soft); color: var(--amber); }
.tyre-red .tyre-badge { background: var(--red-soft); color: var(--red); }
.tyre-info { min-width: 0; font-size: 13px; }
.tyre-h { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.tyre-green .tyre-h { color: var(--green); }
.tyre-yellow .tyre-h { color: var(--amber); }
.tyre-red .tyre-h { color: var(--red); }
.tyre-l { color: var(--ink); line-height: 1.35; }
.tyre-l span { display: block; color: var(--ink-soft); font-size: 12.5px; }
.tyre-issues { display: flex; align-items: center; gap: 4px; color: var(--est); font-weight: 700; font-size: 12px; margin-top: 3px; }
.tyre-issues .ico { width: 13px; height: 13px; }
.tyre-past { margin-top: 3px; font-size: 12.5px; color: var(--ink-soft); background: var(--paper); border-radius: 8px; padding: 4px 8px; }

/* Azioni */
.a-act { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.a-act .a-light { display: flex; align-items: center; margin-right: 2px; }
.a-act form { margin: 0; }
.done-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 6px; border-radius: 999px;
    border: 1.5px solid var(--line-2); background: var(--card);
    font: 700 13px var(--f-body); color: var(--ink-soft); cursor: pointer;
    transition: all .15s;
}
.done-box { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-2); color: transparent; transition: all .15s; }
.done-box .ico { width: 15px; height: 15px; stroke-width: 3; }
.done-btn:hover { border-color: var(--green); color: var(--green); }
.done-btn:hover .done-box { border-color: var(--green); color: var(--green); }
.done-btn.on { background: var(--green); border-color: var(--green); color: #fff; }
.done-btn.on .done-box { background: #fff; border-color: #fff; color: var(--green); }
.cancel-tag { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }
.a-act .pop-body { left: auto; right: 0; }

/* ---- Finestra di conferma ------------------------------------------- */
.confirm { border: 0; border-radius: 20px; padding: 0; width: min(420px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); background: var(--card); color: var(--ink); }
.confirm::backdrop { background: rgba(23,25,30,.55); backdrop-filter: blur(2px); }
.confirm form { padding: 26px 26px 20px; text-align: center; }
.confirm-ico { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--red-soft); color: var(--red); }
.confirm-ico .ico { width: 28px; height: 28px; }
.confirm-msg { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.confirm-note { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.confirm-note:empty { display: none; }
.confirm-act { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.confirm[open] { animation: pop .16s ease-out; }

/* ---- Impostazioni ----------------------------------------------------- */
.setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.setcard { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); color: var(--ink); transition: transform .12s, border-color .12s; }
.setcard:hover { transform: translateY(-2px); border-color: var(--ink); color: var(--ink); }
.setcard-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--red-soft); color: var(--red); }
.setcard-ico .ico { width: 24px; height: 24px; }
.setcard h2 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 24px; text-transform: uppercase; }
.setcard p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; }
.setcard .badge { margin-top: 8px; }
.setcard-switch { cursor: pointer; align-items: center; }
.setcard-switch > div { flex: 1; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 48px; height: 28px; border-radius: 99px; background: var(--line-2); position: relative; cursor: pointer; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(20px); }
.setcard-sound { grid-column: span 2; }
.soundpick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sp { display: inline-flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; overflow: hidden; cursor: pointer; }
.sp input { position: absolute; opacity: 0; pointer-events: none; }
.sp span { padding: 8px 12px; font-weight: 800; }
.sp:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }
.sp:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(255,194,26,.5); }
.sp-try { border: 0; border-left: 1.5px solid var(--line-2); background: var(--paper); padding: 8px 10px; font: 700 12.5px var(--f-body); color: var(--ink-soft); cursor: pointer; }
.sp:has(input:checked) .sp-try { background: #2b2f38; color: var(--yellow); border-left-color: #3a3f4a; }
.sp-try:hover { color: var(--red); }
@media (max-width: 700px) { .setcard-sound { grid-column: auto; } }
.stat-link { color: var(--ink); align-items: center; }
.stat-link .ico { margin-left: auto; color: var(--muted); }
.stat-link:hover { border-color: var(--ink); color: var(--ink); }

/* ---- Semaforo --------------------------------------------------------- */
.semaforo {
    display: inline-flex; flex-direction: column; gap: 3px;
    padding: 4px; border-radius: 8px;
    background: var(--ink); box-shadow: inset 0 0 0 1px #000, 0 2px 4px rgba(0,0,0,.2);
}
.semaforo i { width: 10px; height: 10px; border-radius: 50%; background: #3a3e47; display: block; transition: all .2s; }
.semaforo.is-red i:nth-child(1) { background: #ff4b3e; box-shadow: 0 0 8px 2px rgba(255,75,62,.75); animation: blink 1.6s ease-in-out infinite; }
.semaforo.is-yellow i:nth-child(2) { background: var(--yellow); box-shadow: 0 0 8px 2px rgba(255,194,26,.75); animation: blink 1.6s ease-in-out infinite; }
.semaforo.is-green i:nth-child(3) { background: #33d17a; box-shadow: 0 0 8px 2px rgba(51,209,122,.7); }
.semaforo.is-off { opacity: .3; }
@keyframes blink { 50% { filter: brightness(.75); box-shadow: none; } }

/* ---- Targa italiana --------------------------------------------------- */
.plate {
    display: inline-flex; align-items: stretch;
    height: 26px; border-radius: 5px; overflow: hidden;
    background: #fff; border: 1.5px solid #1b1b1b;
    box-shadow: 0 1px 0 rgba(0,0,0,.15);
    vertical-align: middle;
}
.plate-eu {
    width: 17px; background: #1846a3; color: #fff;
    display: flex; align-items: flex-end; justify-content: center;
    font: 700 10px var(--f-body); padding-bottom: 2px; position: relative;
}
.plate-eu::before {
    content: ""; position: absolute; top: 3px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
    border-radius: 50%; border: 1.5px dotted var(--yellow);
}
.plate-num {
    font-family: var(--f-plate); font-weight: 700; font-size: 17px; letter-spacing: 1.2px;
    color: #111; padding: 0 8px; line-height: 23px; white-space: nowrap;
}
.plate-ch { border-color: #b3121a; }
.plate-ch .plate-eu { background: #d52b1e; }
.plate-ch .plate-eu::before { border: 0; }
.plate-gb .plate-eu, .plate-d .plate-eu { font-size: 8.5px; }
.plate-it-old .plate-num { font-family: var(--f-body); font-weight: 700; font-size: 14px; letter-spacing: .5px; }
.notplate { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; background: var(--yellow-soft); color: #6d4a00; font-weight: 700; font-size: 13px; border: 1px dashed #e8c766; }
.notplate .ico { width: 14px; height: 14px; color: var(--amber); }
.rownote { display: block; margin-top: 3px; font-weight: 500; font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
.plate-none { border-style: dashed; color: var(--muted); padding: 0 12px; line-height: 23px; font-weight: 700; }

/* ---- Chip / etichette ------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--paper-2); color: var(--ink-soft); }
.chip .ico { width: 14px; height: 14px; }
.chip-inv { background: var(--inv-soft); color: var(--inv); }
.chip-est { background: var(--est-soft); color: var(--est); }
.chip-as { background: var(--green-soft); color: var(--green); }
.count-n { font-family: var(--f-display); font-weight: 800; font-size: 17px; margin-left: 6px; }
.probs { color: var(--amber); margin-left: 6px; display: inline-flex; vertical-align: middle; cursor: help; }
.probs .ico { width: 17px; height: 17px; }

.wh { display: inline-block; padding: 3px 9px; border-radius: 7px; font-size: 12px; font-weight: 800; color: #fff; letter-spacing: .3px; background: var(--ink-soft); }
.wh-officina { background: var(--wh-officina); }
.wh-segrate { background: var(--wh-segrate); }
.wh-casa { background: var(--wh-casa); }
.pos { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; font-weight: 600; }

.invtag { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.invtag .ico { width: 15px; height: 15px; }
.invtag.season-inv { color: var(--inv); }
.invtag.season-est { color: var(--est); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--paper-2); color: var(--ink-soft); }
.badge .ico { width: 13px; height: 13px; stroke-width: 3; }
.badge-cur { background: var(--green); color: #fff; }

/* ---- Tabs magazzino --------------------------------------------------- */
.whtabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.whtab {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px 9px 14px; border-radius: 12px;
    background: var(--card); border: 1.5px solid var(--line); color: var(--ink);
    font-weight: 700; position: relative; overflow: hidden;
    transition: border-color .15s, transform .12s;
}
.whtab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ink); }
.whtab-officina::before { background: var(--wh-officina); }
.whtab-segrate::before { background: var(--wh-segrate); }
.whtab-casa::before { background: var(--wh-casa); }
.whtab-s-inv::before { background: var(--inv); }
.whtab-s-est::before { background: var(--est); }
.whtab-s-as::before { background: var(--green); }
.whtab-s-nd::before { background: var(--line); }
.whtab span { display: inline-flex; align-items: center; gap: 5px; }
.whtab span .ico { width: 15px; height: 15px; }
.whtab b { font-family: var(--f-display); font-size: 22px; line-height: 1; }
.whtab small { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.whtab.on small { color: rgba(255,255,255,.7); }
.whtabs + .whtabs { margin-top: -6px; }
.whtabs-l { align-self: center; width: 76px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) {
    .whtabs { gap: 6px; }
    .whtabs-l { width: 100%; }
    .whtab { gap: 6px; padding: 7px 9px 7px 12px; font-size: 13px; }
    .whtab b { font-size: 18px; }
    .whtab small { font-size: 10.5px; }
}
.whtab:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.whtab.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- Tabelle ---------------------------------------------------------- */
.count { color: var(--muted); font-size: 13px; font-weight: 600; margin: 0 2px 10px; }
.tablecard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow-x: auto; }
.tablecard-past { border-color: #f0d98c; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
    text-align: left; padding: 12px 14px;
    font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
    border-bottom: 2px solid var(--line); background: var(--paper);
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover { background: #fbf8f2; }
.tbl .strong { font-weight: 700; }
.tbl .mono { font-family: var(--f-plate); font-weight: 700; font-size: 16px; letter-spacing: .5px; white-space: nowrap; }
.row-act { text-align: right; white-space: nowrap; }
.row-act form { display: inline; }
.row-act .icon-btn { width: 32px; height: 32px; }
.row-act .icon-btn .ico { width: 16px; height: 16px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0; color: var(--ink-soft); }

/* ---- Avvisi / vuoti --------------------------------------------------- */
.notice {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: 12px; font-size: 14px;
    background: #e8f0fb; color: #1d4a86; margin: 0 0 16px;
}
.notice .ico { margin-top: 1px; }
.notice-warn { background: var(--yellow-soft); color: #6d4a00; border: 1px solid #f0d98c; }
.notice-err { background: var(--red-soft); color: var(--red-deep); }
.notice-ok { background: var(--green-soft); color: #11663a; }
.login-alt { margin: 16px 0 0; text-align: center; font-weight: 600; font-size: 14px; }
.login-alt a { display: inline-flex; align-items: center; gap: 4px; }
.login-box-w { width: 100%; max-width: 380px; }
.login-box-w .display { margin-bottom: 18px; }
.fgrid.fgrid-2 { grid-template-columns: 1fr 1fr; }
.fgrid-2 + .fgrid-2 { margin-top: 14px; }
.f-l { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.formcard-2 { margin-top: 18px; }
.checks { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.hint { font-weight: 500; color: var(--muted); font-size: 12px; }
.mono-s { font-family: var(--f-plate); font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--ink-soft); }
.check input { width: 20px; height: 20px; accent-color: var(--red); }
.check input:disabled + span { opacity: .6; }
.av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-family: var(--f-display); font-weight: 900; font-size: 15px; margin-right: 8px; vertical-align: middle; }
.badge-admin { background: var(--ink); color: var(--yellow); }
.row-off td { opacity: .5; }

.empty {
    text-align: center; color: var(--ink-soft);
    background: var(--card); border: 2px dashed var(--line-2); border-radius: 18px;
    padding: 46px 20px;
}
.empty-ico { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--muted); }
.empty-ico .ico { width: 32px; height: 32px; }
.empty p { margin: 6px 0; }
.empty-sm { padding: 26px 16px; border-radius: 14px; }
.empty-sm .empty-ico { width: 48px; height: 48px; }
.empty-sm .empty-ico .ico { width: 24px; height: 24px; }

/* ---- Dashboard -------------------------------------------------------- */
.hero {
    position: relative; overflow: hidden;
    background: var(--ink); color: #fff;
    border-radius: 22px; padding: 34px 34px 32px;
    margin-bottom: 22px;
    display: flex; align-items: center;
    box-shadow: var(--shadow-lg);
}
.hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
    background-color: #30343d;
    background-image:
        linear-gradient(135deg, var(--ink) 25%, transparent 25%),
        linear-gradient(225deg, var(--ink) 25%, transparent 25%),
        linear-gradient(315deg, var(--ink) 25%, transparent 25%),
        linear-gradient(45deg, var(--ink) 25%, transparent 25%);
    background-size: 20px 20px;
    background-position: -10px 0, -10px 0, 0 0, 0 0;
    transform: rotate(180deg);
}
.hero-txt { position: relative; z-index: 1; max-width: 640px; }
.hero .display { color: #fff; font-size: clamp(40px, 5.5vw, 64px); }
.hero .display span { color: var(--yellow); font-weight: 900; }
.hero-sub { margin: 14px 0 0; font-size: 17px; color: #c5c9d1; }
.hero-sub b { color: #fff; }
.hero-tyre {
    position: absolute; right: -60px; top: 50%; width: 300px; height: 300px; margin-top: -150px;
    color: var(--red); opacity: .9;
    animation: spin 40s linear infinite;
}
.hero-tyre .ico { width: 100%; height: 100%; stroke-width: 1.2; }
@keyframes spin { to { transform: rotate(360deg); } }

.dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.dash-side { display: flex; flex-direction: column; gap: 20px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow); }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.panel-h h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: .5px; }
.panel-h h2 .ico { color: var(--red); width: 20px; height: 20px; }
.panel-tag { font-size: 12px; font-weight: 700; color: var(--muted); }
.panel-foot { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.link { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: 13.5px; }
.link .ico { width: 16px; height: 16px; }
.big-num { display: flex; align-items: baseline; gap: 8px; }
.big-num b { font-family: var(--f-display); font-weight: 900; font-size: 64px; line-height: .9; }
.big-num span { color: var(--muted); font-weight: 600; }
.warn-line, .ok-line { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 11px; font-size: 13.5px; font-weight: 600; }
.warn-line { background: var(--yellow-soft); color: #6d4a00; }
.warn-line .ico { color: var(--amber); }
.ok-line { background: var(--green-soft); color: var(--green); }

.whbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.whbars a { display: grid; grid-template-columns: 76px 1fr 46px; align-items: center; gap: 10px; color: var(--ink); }
.whbars-l { font-weight: 700; font-size: 14px; }
.whbars-bar { height: 12px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.whbars-bar i { display: block; height: 100%; border-radius: 99px; transition: width .6s ease-out; }
.whbars b { font-family: var(--f-display); font-size: 22px; text-align: right; }
.whbars a:hover .whbars-l { color: var(--red); }

.appts-compact .appt { grid-template-columns: 58px minmax(0, 1.2fr) minmax(0, 1.3fr) auto; padding: 10px 12px; }
.appts-compact .done-t { display: none; }
.appts-compact .done-btn { padding: 5px; }

/* ---- Inventari -------------------------------------------------------- */
.invgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.invcard {
    background: var(--card); border: 1px solid var(--line); border-radius: 20px;
    padding: 20px; box-shadow: var(--shadow); position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 10px;
    animation: rise .4s ease-out both;
}
.invcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 90px; opacity: .9; z-index: 0; }
.invcard.season-inv::before { background: linear-gradient(160deg, var(--inv-soft), transparent); }
.invcard.season-est::before { background: linear-gradient(160deg, var(--est-soft), transparent); }
.invcard > * { position: relative; z-index: 1; }
.invcard.is-active { border: 2px solid var(--green); box-shadow: 0 14px 30px -18px rgba(29,154,85,.6); }
.invcard-top { display: flex; align-items: center; justify-content: space-between; }
.invcard-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow); }
.invcard-ico .ico { width: 26px; height: 26px; }
.season-inv .invcard-ico { color: var(--inv); }
.season-est .invcard-ico { color: var(--est); }
.invcard h2 { margin: 4px 0 0; font-family: var(--f-display); font-weight: 900; font-size: 40px; line-height: .9; text-transform: uppercase; }
.invcard h2 span { color: var(--muted); font-weight: 700; }
.invcard-n { margin: 0; color: var(--ink-soft); }
.invcard-n b { font-family: var(--f-display); font-size: 22px; color: var(--ink); }
.invcard-n .sep { color: var(--line-2); margin: 0 4px; }
.stackbar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--paper-2); }
.stackbar i { display: block; height: 100%; }
.invcard-wh { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.invcard-wh li { display: flex; align-items: center; gap: 8px; }
.invcard-wh b { margin-left: auto; color: var(--ink); }
.sw { width: 10px; height: 10px; border-radius: 3px; }
.invcard-act { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
.invcard-act form { margin: 0; }
.invcard-new { border: 2px dashed var(--line-2); background: transparent; box-shadow: none; justify-content: flex-start; }
.invcard-new .invcard-ico { color: var(--red); }

/* ---- Form ------------------------------------------------------------- */
.formcard {
    max-width: 780px; background: var(--card); border: 1px solid var(--line);
    border-radius: 20px; padding: 10px 26px 24px; box-shadow: var(--shadow);
}
.formcard fieldset { border: 0; margin: 0; padding: 18px 0; border-bottom: 1px dashed var(--line-2); }
.formcard fieldset:last-of-type { border-bottom: 0; }
.formcard legend { font-family: var(--f-display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .5px; padding: 0; margin-bottom: 12px; }
.fgrid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px 16px; }
.fgrid-3 { grid-template-columns: .6fr 1fr 1fr; }
.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-top: 12px; }
.fgrid .f { margin-top: 0; }
.f input, .f select, .f textarea {
    padding: 11px 13px; border: 1.5px solid var(--line-2); border-radius: 11px;
    font: 500 15.5px var(--f-body); color: var(--ink); background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,194,26,.35); }
.in-plate { font-family: var(--f-plate) !important; font-weight: 700 !important; font-size: 20px !important; letter-spacing: 2px; text-transform: uppercase; }
.formactions { display: flex; gap: 10px; margin-top: 18px; }

.choice { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.choice-i { position: relative; cursor: pointer; }
.choice-i input { position: absolute; opacity: 0; }
.choice-i span {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff;
    font-weight: 700; transition: all .15s;
}
.choice-i:hover span { border-color: var(--ink); }
.choice-i input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.choice-i.wh-officina input:checked + span { background: var(--wh-officina); border-color: var(--wh-officina); }
.choice-i.wh-segrate input:checked + span { background: var(--wh-segrate); border-color: var(--wh-segrate); }
.choice-i.wh-casa input:checked + span { background: var(--wh-casa); border-color: var(--wh-casa); }
.choice-i.season-inv input:checked + span { background: var(--inv); border-color: var(--inv); }
.choice-i.season-est input:checked + span { background: var(--est); border-color: var(--est); }
.choice-i.season-as input:checked + span { background: var(--green); border-color: var(--green); }
.choice-i input:focus-visible + span { box-shadow: 0 0 0 4px rgba(255,194,26,.45); }
/* le classi wh-* sulle choice non devono colorare lo sfondo del label */
label.choice-i.wh-officina, label.choice-i.wh-segrate, label.choice-i.wh-casa { background: none; color: inherit; padding: 0; }
.choice-sm span { padding: 8px 12px; font-size: 14px; }

/* ---- Login ------------------------------------------------------------ */
body.guest { background: var(--ink); }
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art {
    position: relative; overflow: hidden; color: #fff;
    padding: 56px; display: flex; flex-direction: column; justify-content: flex-end;
    background: radial-gradient(700px 500px at 20% 10%, rgba(212,42,32,.35), transparent 60%), var(--ink);
}
.login-tyre { position: absolute; top: -120px; right: -140px; width: 520px; height: 520px; color: var(--red); opacity: .85; animation: spin 50s linear infinite; }
.login-tyre .ico { width: 100%; height: 100%; stroke-width: 1; }
.login-brand { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(64px, 9vw, 128px); line-height: .82; position: relative; }
.login-brand span { display: block; }
.login-brand em { display: block; font-style: normal; color: var(--yellow); }
.login-art p { position: relative; margin: 18px 0 0; font-size: 18px; color: #c5c9d1; max-width: 26ch; }
.tread-v { position: absolute; right: 0; top: 0; bottom: 0; width: 12px; height: auto; background-size: 20px 20px; transform: none; }
.login-form { background: var(--paper); display: grid; place-items: center; padding: 40px 24px; }
.login-form form { width: 100%; max-width: 360px; }
.login-form .display { margin-bottom: 22px; }
.login-form .btn { margin-top: 22px; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1100px) {
    .appt { grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1.2fr); }
    .a-what { display: none; }
    .a-act { grid-column: 2 / -1; justify-content: flex-start; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat-tyres { grid-column: 1 / -1; }
    .dash { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .hdr { position: static; }
    .hdr-in { flex-wrap: wrap; gap: 12px; }
    .nav { order: 3; flex: 1 1 100%; overflow-x: auto; }
    .nav a span { display: none; }
    .nav a { padding: 9px 12px; }
    .invsel { margin-left: auto; }
    .login { grid-template-columns: 1fr; }
    .login-art { min-height: 300px; padding: 32px; }
    .fgrid, .fgrid-3, .fgrid.fgrid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .wrap { padding: 20px 14px 60px; }
    .appt { grid-template-columns: 50px 20px minmax(0, 1fr); gap: 10px; }
    .a-tyres { grid-column: 1 / -1; }
    .a-act { grid-column: 1 / -1; }
    .hero { padding: 26px 22px; }
    .hero-tyre { width: 200px; height: 200px; margin-top: -100px; right: -70px; opacity: .35; }
    .logo-t { font-size: 21px; }
    .invsel-l small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Guida ------------------------------------------------------------ */
.help { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
.help-toc { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.help-toc a { padding: 7px 10px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--ink-soft); }
.help-toc a:hover { background: var(--paper-2); color: var(--ink); }
.help-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.help-sec { padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); scroll-margin-top: 96px; line-height: 1.55; }
.help-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--f-display); font-size: 26px; text-transform: uppercase; letter-spacing: .5px; }
.help-sec h2 .ico { width: 22px; height: 22px; color: var(--red); }
.help-sec h3 { margin: 16px 0 6px; font-size: 15px; }
.help-sec p, .help-sec ul { margin: 0 0 8px; }
.help-sec ul { padding-left: 20px; }
.help-sec li { margin: 5px 0; }
.help-sec li .ico { width: 15px; height: 15px; vertical-align: -2px; }
.help-sec dl { margin: 0; }
.help-sec dt { font-weight: 800; margin-top: 12px; }
.help-sec dt:first-child { margin-top: 0; }
.help-sec dd { margin: 3px 0 0; color: var(--ink-soft); }
.help-sec .wh { font-size: 12px; }
.help-lights { list-style: none; padding-left: 0 !important; }
.help-lights .dotc { display: inline-block; margin-right: 8px; vertical-align: 0; }
.help-lights .dotc:not(.green):not(.yellow):not(.red) { background: var(--line); }
@media (max-width: 800px) {
    .help { grid-template-columns: 1fr; }
    .help-toc { position: static; flex-direction: row; flex-wrap: wrap; }
    .help-sec { padding: 18px 16px; }
}

/* ---- Calendario ------------------------------------------------------- */
.weekstrip { display: flex; align-items: stretch; gap: 8px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; }
.wday { flex: 1 0 84px; display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); color: var(--ink); }
.wday span { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.wday span b { font-family: var(--f-display); font-size: 22px; color: var(--ink); letter-spacing: 0; margin-left: 2px; }
.wday small { display: flex; gap: 8px; font-weight: 800; font-size: 13px; min-height: 18px; color: var(--muted); }
.wday i { font-style: normal; display: inline-flex; align-items: center; gap: 3px; }
.wday .wd-c { color: var(--red); }
.wday .wd-r { color: var(--ink-soft); }
.wday .wd-r .ico { width: 12px; height: 12px; }
.wday:hover { border-color: var(--ink); color: var(--ink); }
.wday.on { background: var(--ink); border-color: var(--ink); }
.wday.on span, .wday.on span b, .wday.on .wd-r { color: #fff; }
.wday.on .wd-c { color: var(--yellow); }
.wday.now { box-shadow: inset 0 -3px 0 var(--red); }
.wday.is-empty { opacity: .6; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 4px 2px 12px; font-size: 13px; color: var(--ink-soft); }
.cal-legend .link { margin-left: auto; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }
.lg-c { background: var(--card); border: 2px solid var(--red); }
.lg-r { background: repeating-linear-gradient(135deg, var(--paper-2) 0 4px, var(--line-2) 4px 6px); border: 1px solid var(--line-2); }
.cal-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow-x: auto; }
.cal { display: grid; grid-template-columns: 58px repeat(var(--cols), minmax(150px, 1fr)); grid-template-rows: 44px 10px repeat(var(--rows), 22px); position: relative; min-width: calc(58px + var(--cols) * 150px); }
.cal-corner { grid-column: 1; grid-row: 1; border-bottom: 1px solid var(--line); position: sticky; left: 0; background: var(--card); z-index: 3; }
.cal-box { grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: 13px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--paper); }
.cal-box small { font-size: 11px; color: var(--muted); background: var(--card); border-radius: 999px; padding: 1px 7px; }
.cal-t { grid-column: 1; font-size: 11px; font-weight: 700; color: var(--muted); text-align: right; padding: 0 8px; transform: translateY(-7px); position: sticky; left: 0; background: var(--card); z-index: 2; }
.cal-t.is-hour { color: var(--ink-soft); }
.cal-line { grid-column: 2 / -1; border-top: 1px dashed rgba(0,0,0,.05); }
.cal-line.is-hour { border-top: 1px solid var(--line); }
.ev { z-index: 1; margin: 1px 4px; border-radius: 9px; padding: 4px 8px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.25; min-height: 0; }
.ev-t { font-weight: 800; font-size: 11px; display: flex; align-items: center; gap: 3px; }
.ev-t .ico { width: 12px; height: 12px; stroke-width: 3; }
.ev-res { background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, #e3ddd2 6px 9px); color: var(--ink-soft); border: 1px solid var(--line-2); flex-direction: row; align-items: center; gap: 8px; }
.ev-res .ev-l { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.ev-res .ev-l .ico { width: 12px; height: 12px; }
.ev-c { background: var(--card); border: 1.5px solid var(--line-2); border-left: 5px solid var(--muted); color: var(--ink); box-shadow: var(--shadow); }
.ev-c:hover { border-color: var(--ink); color: var(--ink); z-index: 2; }
.ev-c.tyre-green { border-left-color: var(--green); }
.ev-c.tyre-yellow { border-left-color: var(--yellow); }
.ev-c.tyre-red { border-left-color: var(--red); }
.ev-c.is-done { opacity: .6; }
.ev-p { font-family: var(--f-plate); font-weight: 700; font-size: 14px; letter-spacing: .5px; }
.ev-n { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.ev { font: inherit; text-align: left; cursor: pointer; appearance: none; }
.ev-res:hover { border-color: var(--ink-soft); }
/* popup dettagli */
.evdlg { border: 0; border-radius: 20px; padding: 0; width: min(460px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); background: var(--card); color: var(--ink); }
.evdlg::backdrop { background: rgba(23,25,30,.55); backdrop-filter: blur(2px); }
.evdlg[open] { animation: pop .16s ease-out; }
.evdlg-body { padding: 22px 22px 18px; }
.evdlg-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--paper-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.evdlg-x .ico { width: 16px; height: 16px; }
.evd-h { display: flex; gap: 14px; align-items: flex-start; padding-right: 36px; margin-bottom: 14px; }
.evd-h b { display: block; font-size: 17px; margin-top: 6px; }
.evd-h small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 2px; }
.evd-time { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1; }
.evd-time small { font-family: var(--f-body); font-size: 12px; margin-top: 4px; }
.evd-light { margin-left: auto; }
.evd-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-soft); flex: none; }
.evd-res b { margin-top: 2px; }
.evd-p { margin: 0 0 8px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.evd-meta { margin: 0; color: var(--muted); font-size: 12.5px; }
.evd-dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0 0 14px; font-size: 14px; }
.evd-dl dt { color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; padding-top: 2px; }
.evd-dl dd { margin: 0; word-break: break-word; }
.evd-tyres { padding: 12px 14px; border-radius: 12px; background: var(--paper); font-size: 13.5px; line-height: 1.5; border-left: 4px solid var(--muted); }
.evd-tyres.tyre-green { border-left-color: var(--green); } .evd-tyres.tyre-green > b { color: var(--green); }
.evd-tyres.tyre-yellow { border-left-color: var(--yellow); } .evd-tyres.tyre-yellow > b { color: var(--est); }
.evd-tyres.tyre-red { border-left-color: var(--red); } .evd-tyres.tyre-red > b { color: var(--red); }
.evd-tyres > b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.evd-issues { display: flex; align-items: center; gap: 4px; color: var(--est); font-weight: 700; margin-top: 4px; }
.evd-issues .ico { width: 14px; height: 14px; }
.evd-act { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.evd-act form { margin: 0; }
.day-cnt-w { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.day-blk { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-weight: 700; font-size: 12px; white-space: nowrap; }
.day-blk .ico { width: 13px; height: 13px; }
.day-blk.is-zero { display: none; }
@media (max-width: 860px) {
    .day-h { flex-wrap: wrap; }
    .day-toggle { flex: 1 1 100%; }
    .day-print { flex: 1 1 100%; justify-content: flex-start; }
}
@media (max-width: 640px) {
    .day-w { display: none; }
    .day-cnt { min-width: 0; }
    .day-av { grid-template-columns: repeat(3, 32px); }
}
@media (max-width: 640px) {
    .tyreprint { flex-wrap: wrap; }
    .whcheck span { min-width: 0; }
}
@media (max-width: 640px) {
    .appt { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 12px; }
    .appt .a-tyres, .appt .a-act { grid-column: 1 / -1; }
}
/* calendario: vista mese */
.mcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mcal-w { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 4px 0; }
.mcal-d { min-height: 96px; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--line); color: var(--ink); font-size: 12.5px; }
.mcal-d:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.mcal-d.is-out { opacity: .4; }
.mcal-d.is-empty { background: transparent; }
.mcal-d.now { border-color: var(--red); box-shadow: inset 0 -3px 0 var(--red); }
.mcal-n { font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1; }
.mcal-d em { font-style: normal; }
.mcal-c { color: var(--ink-soft); } .mcal-c b { color: var(--red); font-size: 14px; }
.mcal-r { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-weight: 700; }
.mcal-r .ico { width: 12px; height: 12px; }
.mcal-bar { margin-top: auto; display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--paper-2); }
.mcal-bar .bc { background: var(--red); } .mcal-bar .br { background: var(--line-2); }
@media (max-width: 640px) {
    .mcal { gap: 3px; }
    .mcal-d { min-height: 64px; padding: 5px; font-size: 10.5px; }
    .mcal-n { font-size: 17px; }
    .mcal-d em { display: none; }
}
/* agenda più compatta: righe rientrate sotto il giorno, così i giorni emergono */
@media (min-width: 641px) {
    .agenda { gap: 30px; }
    .agenda .appts { margin-left: 52px; gap: 6px; }
    .agenda .appt { padding: 7px 12px 7px 14px; gap: 14px; border-radius: 12px; box-shadow: 0 1px 0 rgba(23,25,30,.04); grid-template-columns: 56px minmax(190px, 1.25fr) minmax(140px, .9fr) minmax(220px, 1.35fr) auto; }
    .agenda .appt:hover { transform: none; box-shadow: var(--shadow); }
    .agenda .a-time strong { font-size: 21px; }
    .agenda .a-time small { font-size: 10.5px; margin-top: 2px; }
    .agenda .a-who .plate { zoom: .82; }
    .agenda .a-name { margin-top: 2px; font-size: 14px; }
    .agenda .a-meta { margin-top: 1px; font-size: 12px; }
    .agenda .a-meta .pill { padding: 2px 8px; }
    .agenda .a-service { font-size: 14px; }
    .agenda .tyre-badge { width: 30px; height: 30px; }
    .agenda .tyre-badge .ico { width: 19px; height: 19px; }
    .agenda .tyre-h { font-size: 11px; }
    .agenda .tyre-past { padding: 3px 8px; font-size: 12px; }
    .agenda .a-act { zoom: .88; }
}
.appt.is-target { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,194,26,.55), var(--shadow); animation: target 2.4s ease-out 1; }
@keyframes target { 0%, 30% { background: var(--yellow-soft); } 100% { background: var(--card); } }
.a-time small.a-box { display: inline-block; margin-top: 5px; padding: 2px 7px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; }
.a-meta .a-mail { min-width: 0; max-width: 100%; }
.a-meta .a-mail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.a-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.a-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.a-name .pill { flex: none; font-size: 11px; padding: 1px 8px; font-weight: 700; }
.a-meta { flex-wrap: nowrap; min-width: 0; }
.a-meta > a:first-child { flex: none; }
.a-meta .a-mail span { max-width: none; }
/* popup "Scrivi al cliente" */
.maildlg { border: 0; border-radius: 20px; padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); background: var(--card); color: var(--ink); }
.maildlg::backdrop { background: rgba(23,25,30,.55); backdrop-filter: blur(2px); }
.maildlg[open] { animation: pop .16s ease-out; }
.maildlg-f { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.maildlg-h { display: flex; align-items: center; gap: 12px; padding-right: 40px; margin-bottom: 2px; }
.maildlg-h b { display: block; font-size: 17px; }
.maildlg-h small { display: block; color: var(--muted); font-size: 12.5px; }
.maildlg-h .evdlg-x { top: 0; right: 0; }
.maildlg-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--red-soft); color: var(--red); flex: none; }
.maildlg textarea { resize: vertical; min-height: 160px; font: inherit; line-height: 1.5; }
.maildlg input[readonly] { background: var(--paper); color: var(--ink-soft); }
.maildlg-msg { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--muted); min-height: 1em; }
.maildlg-msg:empty { display: none; }
.maildlg-msg.ok { color: var(--green); } .maildlg-msg.err { color: var(--red); }
.maildlg-act { display: flex; justify-content: flex-end; gap: 10px; }
.maildlg .f { margin-top: 0; }
.maildlg textarea, .maildlg input { font-weight: 400; }
/* tag e nota interna */
.tagc { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; border: 1px solid transparent; }
.tag-red { background: #fde3e0; color: #b3261e; border-color: #f6c4bf; }
.tag-amber { background: #fff0cc; color: #8a5a00; border-color: #f3d98c; }
.tag-green { background: var(--green-soft); color: #13703d; border-color: #bfe3cd; }
.tag-blue { background: #e1ecfa; color: #1f5f9e; border-color: #c3d8f1; }
.tag-teal { background: #dcf1ee; color: #0f6b63; border-color: #b7e0da; }
.tag-purple { background: #eee6fa; color: #5b3a9e; border-color: #d8c8f1; }
.tag-grey { background: var(--paper-2); color: var(--ink-soft); border-color: var(--line-2); }
.a-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; margin-top: 5px; }
.a-snote { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 1px dashed var(--line-2); background: var(--yellow-soft); color: #6d4a00; border-radius: 8px; padding: 2px 8px; font: 600 12px var(--f-body); cursor: pointer; }
.a-snote .ico { width: 12px; height: 12px; flex: none; }
.a-snote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-snote:hover { border-color: var(--amber); }
.a-tools { display: inline-flex; gap: 4px; margin-right: 2px; }
.icon-btn-s { width: 30px; height: 30px; border-radius: 9px; }
.icon-btn-s .ico { width: 15px; height: 15px; }
.icon-btn.is-on { background: var(--yellow-soft); border-color: #f0d98c; color: #6d4a00; }
.tagpick { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.tagpick label { cursor: pointer; }
.tagpick input { position: absolute; opacity: 0; pointer-events: none; }
.tagpick .tagc { font-size: 13px; padding: 6px 12px; opacity: .45; filter: grayscale(.4); transition: all .12s; }
.tagpick input:checked + .tagc { opacity: 1; filter: none; box-shadow: 0 0 0 2px currentColor inset; }
.tagpick input:focus-visible + .tagc { outline: 3px solid rgba(255,194,26,.6); }
.tagnew { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 18px; }
.tagnew .f { margin-top: 0; }
.tagcolors { display: flex; flex-wrap: wrap; gap: 6px; }
.tagcolors input { position: absolute; opacity: 0; }
.tagcolors .tagc { cursor: pointer; opacity: .5; }
.tagcolors input:checked + .tagc { opacity: 1; box-shadow: 0 0 0 2px currentColor inset; }
.tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tagrow input[type=text] { padding: 7px 10px; border: 1.5px solid var(--line-2); border-radius: 9px; font: 500 14px var(--f-body); min-width: 180px; }
.tagrow select { padding: 7px 8px; border: 1.5px solid var(--line-2); border-radius: 9px; font: 500 14px var(--f-body); background: #fff; }
.a-meta:has(.pill-appt) { flex-wrap: wrap; }
.pill-appt { white-space: nowrap; }
.appt::before { width: 5px; }
.evd-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.evd-tags:empty { display: none; }
.evd-note { display: flex; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; background: var(--yellow-soft); color: #5c3f00; font-size: 14px; line-height: 1.45; }
.evd-note .ico { width: 15px; height: 15px; flex: none; margin-top: 2px; }
@media (max-width: 640px) {
    .day-sum { gap: 6px; min-width: 0; }
    .day-av { grid-template-columns: repeat(4, auto); gap: 8px; }
    .day-avs.is-zero { display: none; }
}
/* targa cliccabile: copia negli appunti */
.plate[data-copy] { cursor: copy; transition: transform .12s, box-shadow .12s; }
.plate[data-copy]:hover { box-shadow: 0 0 0 3px rgba(255,194,26,.45); }
.plate.copied { transform: scale(1.06); box-shadow: 0 0 0 3px var(--green); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 1000; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
/* forse in magazzino: targa ricopiata male */
.dotc.maybe { background: var(--amber); }
.day-av { grid-template-columns: repeat(4, 38px); }
.tyre-maybe .tyre-badge { background: #fff0cc; color: var(--amber); }
.tyre-maybe .tyre-h { color: #a86f00; }
.tyre-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: 12px; color: #6d4a00; background: #fff6dd; border: 1px dashed #f0d98c; border-radius: 8px; padding: 4px 8px; }
.tyre-fix form { margin: 0; }
.btn-xs { padding: 3px 9px; font-size: 12px; border-radius: 8px; gap: 4px; }
.btn-xs .ico { width: 13px; height: 13px; }
.ev-c.tyre-maybe { border-left-color: var(--amber); }
.evd-tyres.tyre-maybe { border-left-color: var(--amber); } .evd-tyres.tyre-maybe > b { color: #a86f00; }

/* "…ma ora tutto a posto": clic sulla scritta delle gomme (non verdi) */
.tyre-okf { margin: 0; }
button.tyre-h { all: unset; cursor: pointer; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; text-decoration-thickness: 2px; }
button.tyre-h:hover { text-decoration: underline dotted; }
button.tyre-h:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.tyre-h.is-ok, .tyre-h.is-ok:hover, .evd-tyres b.is-ok { text-decoration: line-through; opacity: .65; }
.tyre-ok { color: var(--green); font-weight: 700; font-size: 13px; font-style: italic; margin: 1px 0 2px; }

/* popup "Modifica appuntamento" */
#edit-dlg { width: min(640px, calc(100vw - 32px)); }
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.edit-grid .f { margin-top: 0; }
.edit-grid .f-wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .edit-grid { grid-template-columns: 1fr; } }

/* nome cliente cliccabile: lavorazioni YAP dentro la riga */
button.a-who { all: unset; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; border-bottom: 1px dotted transparent; }
button.a-who:hover, button.a-who.is-on { border-bottom-color: currentColor; }
button.a-who.is-on { color: var(--red); }
button.a-who:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.a-yap { grid-column: 1 / -1; border-top: 1px dashed var(--line, #e2dcd1); padding: 8px 2px 4px; font-size: 13px; }
.yap-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 6px; }
.yap-h b { text-transform: uppercase; letter-spacing: .6px; font-size: 12px; }
.yap-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.yap-list > li { background: rgba(23,25,30,.035); border-radius: 10px; padding: 7px 10px; }
.yap-d { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin-bottom: 3px; }
.yap-tot { margin-left: auto; font-weight: 700; }
.yap-list ul { list-style: none; margin: 0; padding: 0; color: var(--ink-soft); }
.yap-q { display: inline-block; min-width: 28px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    /* dopo la regola a 4 colonne fisse qui sopra: su telefono i pallini si stringono e quelli a zero spariscono */
    .day-av { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; }
    .day-sum { flex-wrap: wrap; }
}
.yap-note { display: flex; gap: 6px; align-items: center; margin: 2px 0 4px; padding: 3px 8px; border-radius: 8px; background: var(--yellow-soft); color: #5c3f00; font-weight: 700; font-size: 12.5px; }
.yap-note .ico { width: 13px; height: 13px; flex: none; }
.yap-code { font: 600 11px/1 ui-monospace, Menlo, monospace; color: var(--muted); background: rgba(23,25,30,.06); border-radius: 4px; padding: 1px 4px; white-space: nowrap; }
.yap-season { font-size: 11px; font-weight: 700; color: var(--inv); }

/* totali gomme cliccabili: filtrano l'agenda del mese per stato */
.stat-tyres .stf { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; margin: -2px -2px; border-radius: 10px; color: inherit; text-decoration: none; }
.stat-tyres .stf:hover { background: rgba(23,25,30,.06); }
.stat-tyres.is-filtered .stf { opacity: .38; }
.stat-tyres.is-filtered .stf.on { opacity: 1; background: rgba(23,25,30,.08); box-shadow: inset 0 0 0 2px var(--ink); }
.stf-x { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--red); text-decoration: none; }
.stf-x .ico { width: 13px; height: 13px; }
/* testi interi, mai tagliati: la linea va a capo (con sillabazione) dentro la colonna dell'orario,
   l'email scende sotto il telefono quando non ci sta */
@media (min-width: 1101px) {
    .agenda .appt { grid-template-columns: 66px minmax(200px, 1.25fr) minmax(140px, .9fr) minmax(220px, 1.35fr) auto; }
}
/* schermi medi: la regola "agenda compatta" a 5 colonne fisse faceva sbordare la riga; qui 3 colonne */
@media (min-width: 641px) and (max-width: 1100px) {
    .agenda .appt { grid-template-columns: 66px minmax(0, 1fr) minmax(0, 1.2fr); }
}
.a-time small.a-box { max-width: 100%; box-sizing: border-box; white-space: normal; hyphens: auto; -webkit-hyphens: auto;
    overflow-wrap: break-word; line-height: 1.2; text-align: center; padding: 2px 5px; }
.a-meta { flex-wrap: wrap; }
.a-meta .a-mail { min-width: 0; max-width: 100%; }
.a-meta .a-mail span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; max-width: none; }
/* nome cliente intero: va a capo invece di tagliarsi */
button.a-who { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.a-name { align-items: flex-start; flex-wrap: wrap; row-gap: 2px; }

/* posta dei clienti da info@: box preventivi in testa all'agenda e icona/pannello sulla riga */
.inbox-quotes { background: #fff6d6; border: 1px solid #f0d98c; border-left: 5px solid #f2b300; border-radius: 14px; padding: 12px 16px; margin: 0 0 22px; }
.iq-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; color: #5c3f00; }
.iq-h b { font-size: 15px; text-transform: uppercase; letter-spacing: .6px; }
.iq-h span { font-size: 12.5px; color: #8a6a1a; }
.iq-h .ico { width: 18px; height: 18px; }
.inb { background: #fffdf6; border: 1px solid #f0e2b4; border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.inb-h { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; font-size: 13px; }
.inb-from { font-weight: 700; overflow-wrap: anywhere; }
.inb-subj { color: var(--ink-soft); overflow-wrap: anywhere; }
.inb-body { margin: 6px 0; font-size: 13px; line-height: 1.5; color: var(--ink); max-height: 170px; overflow: auto; overflow-wrap: anywhere; }
.inb-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inb-act form { margin: 0; }
.inb-gmail { font-size: 12px; color: var(--muted); margin-left: auto; }
.a-mailin { background: #ffd23f !important; border-color: #f2b300 !important; color: #5c3f00 !important; width: auto !important; padding: 0 7px !important; gap: 3px; display: inline-flex; align-items: center; }
.a-mailin span { font-size: 11px; font-weight: 800; }
.a-mailin.is-on { box-shadow: inset 0 0 0 2px #5c3f00; }
.a-inbox { grid-column: 1 / -1; border-top: 1px dashed #f0d98c; padding: 8px 2px 4px; }

/* ---- Calendario disponibilità (Impostazioni → Calendario, blocchi nel calendario del giorno) ---- */
.calset-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.calset-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--paper-2); font-weight: 700; font-size: 13.5px; color: var(--ink-soft); }
.calset-nav a:hover { color: var(--ink); background: var(--line); }
.calset-nav .ico { width: 15px; height: 15px; }
.calset { margin: 0 0 34px; scroll-margin-top: 90px; }
.calset-h { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px; }
.calset-h .ico { width: 22px; height: 22px; color: var(--red); }
.calset-p { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; max-width: 780px; }
.calfree { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 0 0 26px; }
.calfree-t { align-self: center; font-weight: 700; font-size: 13px; color: var(--ink-soft); margin-right: 6px; }
.calfree-d { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 10px; border-radius: 12px; background: var(--green-soft); color: #11663a; }
.calfree-d small { font-size: 11.5px; font-weight: 700; }
.calfree-d b { font-family: var(--f-display); font-size: 24px; line-height: 1; }
.calfree-d.is-zero { background: var(--paper-2); color: var(--muted); }
.calblk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; margin-top: 14px; }
.calblk-grid .f { margin-top: 0; }
.calblk-grid .f-wide { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 10px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 700; font-size: 13.5px; color: var(--ink-soft); transition: all .12s; }
.chip:hover span { border-color: var(--ink); color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(255,194,26,.45); }
.chip input:disabled + span { cursor: default; opacity: .7; }
.chip-all input:checked + span { background: var(--red); border-color: var(--red); }
.calser { margin-top: 14px; }
.calhours { padding-top: 16px; }
.calh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 9px 0; border-bottom: 1px dashed var(--line-2); }
.calh:last-of-type { border-bottom: 0; }
.calh-day { display: flex; align-items: center; gap: 9px; width: 130px; font-weight: 800; cursor: pointer; }
.calh-day input { width: 18px; height: 18px; accent-color: var(--ink); }
.calh-r { display: inline-flex; align-items: center; gap: 6px; }
.calh-r i { color: var(--muted); font-style: normal; }
.calh input[type=time], .calrow input[type=text] { padding: 8px 10px; border: 1.5px solid var(--line-2); border-radius: 10px; font: 500 15px var(--f-body); color: var(--ink); background: #fff; }
.calh-closed { display: none; color: var(--muted); font-weight: 700; font-size: 14px; }
.calh.is-closed .calh-r { display: none; }
.calh.is-closed .calh-closed { display: inline; }
.calrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.calrow input[type=text] { flex: 1 1 200px; max-width: 320px; }
.calrow-new { margin-top: 12px; }
.tgl { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.tgl input { width: 18px; height: 18px; accent-color: var(--green); flex: none; margin: 0; }
.calsvc { padding: 16px 22px 18px; margin-bottom: 12px; }
.calsvc-new { border-style: dashed; box-shadow: none; background: transparent; }
.calsvc-top { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px 14px; }
.calsvc-top .f { margin-top: 0; }
.calsvc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 14px; }
.calsvc-foot .btn { margin-left: auto; }
@media (max-width: 720px) {
    .calblk-grid { grid-template-columns: 1fr 1fr; }
    .calsvc-top { grid-template-columns: 1fr; }
    .calh-day { width: 100%; }
}

.wday .wd-f { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--green); line-height: 1.1; }
.wday .wd-f.is-zero { color: var(--muted); }
.lg-b { background: repeating-linear-gradient(135deg, #f6d9d6 0 5px, #ecbcb7 5px 8px); }
.lg-f { background: var(--green-soft); border: 1px solid var(--green); }
.blk-toggle { margin-left: 6px; }
.blk-toggle.on { background: var(--red); border-color: var(--red); color: #fff; }
.blk-hint { display: flex; align-items: center; gap: 8px; margin: -4px 2px 10px; font-size: 13px; font-weight: 600; color: var(--red-deep); }
.blk-hint[hidden] { display: none; }
.blk-hint .ico { width: 15px; height: 15px; }
.cal-off { grid-column: 2 / -1; background: repeating-linear-gradient(135deg, rgba(23,25,30,.035) 0 6px, rgba(23,25,30,.07) 6px 8px); pointer-events: none; }
.cal-cell { z-index: 0; }
.cal.is-blk .cal-cell { cursor: crosshair; touch-action: none; }
.cal.is-blk .cal-cell:hover { background: rgba(212,42,32,.08); }
.cal-cell.is-sel { background: rgba(212,42,32,.22) !important; }
.cal.is-blk .ev { pointer-events: none; opacity: .75; }
.ev-blk { background: repeating-linear-gradient(135deg, #fbe4e1 0 6px, #f4cdc8 6px 9px); color: var(--red-deep); border: 1px solid #e9b1aa; }
.ev-blk:hover { border-color: var(--red-deep); }
.ev-blk .ev-t .ico { width: 11px; height: 11px; }
.ev-blk .ev-l { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blkdlg .evdlg-body { display: flex; flex-direction: column; gap: 12px; }
.blkdlg .f { margin-top: 0; }
.blk-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.blk-repeat { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--paper); }
.blk-repeat[hidden] { display: none; }

/* officina dell'installazione (SEDE_NOME nel .env): sempre visibile accanto al logo */
.logo-sede { align-self: center; margin-left: 10px; padding: 4px 11px; border-radius: 6px; font: 900 17px/1 var(--f-display); text-transform: uppercase; letter-spacing: 1.2px; background: var(--sede, var(--red)); color: #fff; }
/* Sede ben riconoscibile: striscia del suo colore sopra l'intestazione, ruota del logo dello stesso colore */
body.app .hdr { border-top: 5px solid var(--sede, var(--red)); }
body.app .logo-mark { background: var(--sede, var(--red)); }
/* Login: nome della sede in grande sotto il marchio, ruota e alone del colore della sede */
.login-art { background: radial-gradient(700px 500px at 20% 10%, color-mix(in srgb, var(--sede, #d42a20) 38%, transparent), transparent 60%), var(--ink); }
.login-tyre { color: var(--sede, var(--red)); }
.login-sede { position: relative; display: inline-flex; flex-direction: column; align-self: flex-start; margin-top: 22px; padding: 10px 18px 12px; border-radius: 10px;
    background: var(--sede, var(--red)); font: 900 clamp(34px, 4.4vw, 58px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: 1.5px; }
.login-sede small { font: 700 12px/1.4 var(--f-body); letter-spacing: 2px; opacity: .85; }
.login-where { margin: -6px 0 20px; color: var(--muted); font-size: 15px; }
.login-where b { color: var(--sede, var(--red)); }
body.guest .login-form .eyebrow { color: var(--sede, var(--red)); }

/* Impostazioni → Prenotazione online */
.pbset-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; max-width: 780px; margin: 0 0 18px; padding: 16px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pbset-link > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pbset-link .link { overflow-wrap: anywhere; font-weight: 700; }
.pbset-link span { color: var(--ink-soft); font-size: 14px; }
.pbset-code { width: 100%; max-width: 780px; font: 500 12.5px/1.5 ui-monospace, Menlo, monospace; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); resize: vertical; }
.f input[type=color] { padding: 4px; width: 90px; height: 46px; cursor: pointer; }
.tyinfo { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; font: 600 12px var(--f-body); color: var(--ink-soft); }
.tyinfo .ty-mm { color: var(--green); }
.tyinfo .ty-mm.is-low { color: var(--red); }
.whplaces td { vertical-align: middle; }
.whplaces input { padding: 8px 10px; border: 1.5px solid var(--line-2); border-radius: 10px; font: 500 15px var(--f-body); width: 100%; max-width: 260px; }
.calrow .calrow-area { flex: 0 1 150px; max-width: 170px; }

/* Prenotazioni: schede per reparto (macro linea) */
.reptabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.reptabs a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--line); font-weight: 800; font-size: 15px; color: var(--ink-soft); }
.reptabs a b { font-family: var(--f-display); font-size: 20px; color: var(--ink); }
.reptabs a:hover { border-color: var(--ink); color: var(--ink); }
.reptabs a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.reptabs a.on b { color: var(--yellow); }
.svclines { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.svcline { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; }
.svcline input[type=text] { width: 130px; padding: 7px 9px; border: 0; border-radius: 9px; background: var(--paper); font: 600 14.5px var(--f-body); color: var(--ink); }
.svcline label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.svcline.is-off { opacity: .55; }
.svcline-new { width: 200px; padding: 9px 11px; border: 1.5px dashed var(--line-2); border-radius: 12px; font: 500 14.5px var(--f-body); background: transparent; }
.f.f-inline { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.f.f-inline input { width: 80px; padding: 8px 10px; }
.a-owner { display: block; line-height: 1.45; margin-top: 4px; padding: 3px 9px; border-radius: 8px; background: var(--yellow-soft); color: #6d4a00; font-size: 12.5px; font-weight: 600; width: fit-content; }
.a-owner .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }

/* ---- Prenotazioni dal sito da riportare in YAP: giallo come i preventivi ---- */
.yaptodo { background: #fff6d6; border: 1px solid #f0d98c; border-left: 5px solid #f2b300; border-radius: 14px; padding: 12px 16px; margin: 0 0 22px; }
.yt { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fffdf6; border: 1px solid #f0e2b4; border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.yt-when { display: flex; flex-direction: column; align-items: center; line-height: 1.1; color: #5c3f00; }
.yt-when b { font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; }
.yt-when span { font-family: var(--f-display); font-weight: 800; font-size: 24px; }
.yt-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: 13.5px; }
.yt-svc { color: var(--ink-soft); font-weight: 600; }
.yt-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; width: 100%; font-size: 12.5px; }
.yt-meta a, .yt-meta span { display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.yt-meta .ico { width: 13px; height: 13px; }
.yt-note { width: 100%; font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
.yt-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.yt-act form { margin: 0; }
.yt-btn { background: #f2b300; border-color: #f2b300; color: #3d2a00; font-weight: 800; }
.yt-btn:hover { background: #ffd23f; border-color: #e0a500; color: #3d2a00; }
.yt-go { font-size: 12px; color: #8a6a1a; }
.yt-del { background: #fff; border-style: dashed; }
.yt-del .yt-who b { text-decoration: line-through; }
.yt-sub { margin: 12px 0 0; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #8a6a1a; }
@media (max-width: 640px) { .yt { grid-template-columns: 60px minmax(0, 1fr); } .yt-act { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } }
.appt.is-toyap { background: #fff6d6; border-color: #f0d98c; }
.appt.is-toyap::before { background: #f2b300; width: 6px; }
.a-toyap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 3px 0; padding: 3px 4px 3px 9px; border-radius: 8px; background: #ffd23f; color: #3d2a00; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.a-toyap .ico { width: 14px; height: 14px; }
.a-toyap form { margin: 0; }
.a-toyap .btn-xs { background: #fff; border-color: #e0a500; color: #3d2a00; text-transform: none; letter-spacing: 0; }
.pill-site { background: #fff6d6; color: #8a6a1a; margin: 2px 0; }
.ev-c.is-toyap { background: #ffd23f; border-color: #f2b300; color: #3d2a00; }
.nav a { position: relative; }
.nav-yap { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #ffd23f; color: #3d2a00; font: 800 11px/18px var(--f-body); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--ink); }