@font-face { font-family: "Manrope"; src: url("/fonts/manrope-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }

:root {
    color-scheme: light;
    --bg: #f7f6f4; --panel: #ffffff; --line: #bdb6ad; --text: #1c1917; --muted: #78716c;
    --accent: #2e6b4f; --accent-hover: #24553e; --link: #2e6b4f;
    --field-bg: #ffffff; --field-border: #b7aea3; --field-border-hover: #84796c; --field-text: #1c1917;
    --row-hover: #f2f0ed; --track: #e7e5e1;
    --success: #3d7061; --danger: #a24d55; --warning: #8a6d3b;
    --badge-bg: #efedea; --badge-text: #57534e;
    --badge-pending-bg: #f5efe3; --badge-pending-text: #8a6d3b;
    --badge-approved-bg: #e9f2ee; --badge-approved-text: #3d7061;
    --badge-rejected-bg: #f6e9ea; --badge-rejected-text: #a24d55;
    --alert-success-bg: #e9f2ee; --alert-success-text: #3d7061;
    --alert-error-bg: #f6e9ea; --alert-error-text: #a24d55;
    --button-bg: #1c1917; --button-bg-hover: #292524; --button-text: #fafaf9;
    --button-shadow: none;
    --card-shadow: 0 1px 2px rgba(28, 25, 23, .05);
    --topbar-bg: #ffffff; --topbar-line: #e7e5e1; --topbar-text: #1c1917; --topbar-muted: #78716c; --topbar-role: #57534e;
    --toggle-border: #d6d2cb; --toggle-bg: #ffffff; --toggle-bar: #44403b;
    --focus: #2e6b4f;
}
/* scuro: manuale via [data-theme="dark"] oppure automatico via prefers-color-scheme */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #161514; --panel: #1e1c1a; --line: #2c2926; --text: #ece9e6; --muted: #a09a92;
    --accent: #6ab894; --accent-hover: #84c7a8; --link: #6ab894;
    --field-bg: #1a1816; --field-border: #3a3630; --field-border-hover: #524c43; --field-text: #ece9e6;
    --row-hover: #232019; --track: #2c2926;
    --success: #6ab894; --danger: #d08087; --warning: #d3b478;
    --badge-bg: #2a2724; --badge-text: #b3ada5;
    --badge-pending-bg: rgba(211, 180, 120, .13); --badge-pending-text: #d3b478;
    --badge-approved-bg: rgba(106, 184, 148, .13); --badge-approved-text: #6ab894;
    --badge-rejected-bg: rgba(208, 128, 135, .13); --badge-rejected-text: #d08087;
    --alert-success-bg: rgba(106, 184, 148, .13); --alert-success-text: #6ab894;
    --alert-error-bg: rgba(208, 128, 135, .13); --alert-error-text: #d08087;
    --button-bg: #ece9e6; --button-bg-hover: #ffffff; --button-text: #161514;
    --button-shadow: none;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --topbar-bg: #161514; --topbar-line: #2c2926; --topbar-text: #ece9e6; --topbar-muted: #8d867d; --topbar-role: #a09a92;
    --toggle-border: #3a3630; --toggle-bg: #1e1c1a; --toggle-bar: #ece9e6;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #161514; --panel: #1e1c1a; --line: #2c2926; --text: #ece9e6; --muted: #a09a92;
        --accent: #6ab894; --accent-hover: #84c7a8; --link: #6ab894;
        --field-bg: #1a1816; --field-border: #3a3630; --field-border-hover: #524c43; --field-text: #ece9e6;
        --row-hover: #232019; --track: #2c2926;
        --success: #6ab894; --danger: #d08087; --warning: #d3b478;
        --badge-bg: #2a2724; --badge-text: #b3ada5;
        --badge-pending-bg: rgba(211, 180, 120, .13); --badge-pending-text: #d3b478;
        --badge-approved-bg: rgba(106, 184, 148, .13); --badge-approved-text: #6ab894;
        --badge-rejected-bg: rgba(208, 128, 135, .13); --badge-rejected-text: #d08087;
        --alert-success-bg: rgba(106, 184, 148, .13); --alert-success-text: #6ab894;
        --alert-error-bg: rgba(208, 128, 135, .13); --alert-error-text: #d08087;
        --button-bg: #ece9e6; --button-bg-hover: #ffffff; --button-text: #161514;
        --button-shadow: none;
        --card-shadow: 0 1px 2px rgba(0, 0, 0, .35);
        --topbar-bg: #161514; --topbar-line: #2c2926; --topbar-text: #ece9e6; --topbar-muted: #8d867d; --topbar-role: #a09a92;
        --toggle-border: #3a3630; --toggle-bg: #1e1c1a; --toggle-bar: #ece9e6;
    }
}

* { box-sizing: border-box }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 15px/1.5 "Plus Jakarta Sans", "Segoe UI Variable", "Aptos", system-ui, sans-serif }

.skip-link { position: absolute; left: 12px; top: -48px; z-index: 1000; padding: 8px 14px; background: var(--button-bg); color: var(--button-text); border-radius: 8px; text-decoration: none; font-weight: 600; transition: top .15s ease }
.skip-link:focus { top: 12px }
a { color: var(--link) }

/* topbar pubblica: neutra quasi-nera in entrambi i temi (il logo è chiaro) */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 2rem; padding: .9rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid #2c2926; background: #1a1917 }
.brand { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; font-size: 1.15rem; font-weight: 800 }
.brand img { width: 32px; height: 32px }
.topbar nav { display: flex; gap: 1rem }
.topbar nav a { color: #c5d3e4; text-decoration: none }
.user { margin-left: auto; display: flex; align-items: center; gap: 1rem }
.user form { display: inline }
.link-button { border: 0; background: transparent; color: var(--link); cursor: pointer; font: inherit }

.container { width: min(1120px, calc(100% - 2rem)); margin: 2rem auto }
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem }
.page-title h1, .card h1, .card h2 { margin: .1rem 0 }
.page-title p, .card > p { margin: .2rem 0; color: var(--muted) }
.card { padding: 1.35rem; margin-bottom: 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--card-shadow) }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem }
.stats article { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--card-shadow) }
.stats strong { font-size: 2rem }
.stats span, small, .empty { color: var(--muted) }
.dashboard-status-stats .status-total strong { color: var(--text) }
.dashboard-status-stats .status-pending strong, .dashboard-status-stats .status-pending span { color: #8a5800 }
.dashboard-status-stats .status-approved strong, .dashboard-status-stats .status-approved span { color: #147346 }
.dashboard-status-stats .status-rejected strong, .dashboard-status-stats .status-rejected span { color: #b32626 }
.dashboard-period-fields { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem }
.dashboard-period-fields label { flex: 1 1 170px }
.dashboard-period-fields input { display: block; width: 100%; margin-top: .25rem }
.company-wizard-steps { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none }
.company-wizard-steps li { padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted) }
.company-wizard-steps li.current { border-color: var(--accent); color: var(--text); font-weight: 700 }
.company-create-form [hidden] { display: none !important }
[data-theme="dark"] .dashboard-status-stats .status-pending strong, [data-theme="dark"] .dashboard-status-stats .status-pending span { color: #facc64 }
[data-theme="dark"] .dashboard-status-stats .status-approved strong, [data-theme="dark"] .dashboard-status-stats .status-approved span { color: #76d6a2 }
[data-theme="dark"] .dashboard-status-stats .status-rejected strong, [data-theme="dark"] .dashboard-status-stats .status-rejected span { color: #ff8a8a }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-status-stats .status-pending strong, :root:not([data-theme="light"]) .dashboard-status-stats .status-pending span { color: #facc64 }
    :root:not([data-theme="light"]) .dashboard-status-stats .status-approved strong, :root:not([data-theme="light"]) .dashboard-status-stats .status-approved span { color: #76d6a2 }
    :root:not([data-theme="light"]) .dashboard-status-stats .status-rejected strong, :root:not([data-theme="light"]) .dashboard-status-stats .status-rejected span { color: #ff8a8a }
}

.button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: 9px; padding: .68rem .95rem; background: var(--button-bg); color: var(--button-text); text-decoration: none; font-weight: 650; cursor: pointer; transition: transform .16s cubic-bezier(.2, .7, .2, 1), background .16s ease, box-shadow .16s ease }
.button:not(.secondary):hover { background: var(--button-bg-hover); transform: translateY(-1px) }
.button:active { transform: scale(.97) }
.button.secondary { border: 1px solid var(--field-border); background: transparent; color: var(--text) }
.button.secondary:hover { background: var(--row-hover) }

.form { display: grid; gap: .55rem }
.form input, .form select, .upload input { width: 100%; padding: .72rem .8rem; border: 1px solid var(--field-border); border-radius: 8px; background: var(--field-bg); color: var(--field-text) }
.form input:hover, .form select:hover, .upload input:hover { border-color: var(--field-border-hover) }
.form label { margin-top: .4rem; font-weight: 650 }
.password-field { position: relative; display: block; min-width: 0 }
.form .password-field input, .auth-box .form .password-field input { padding-right: 3.4rem }
.password-visibility-toggle { position: absolute; inset-inline-end: .35rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 6px; background: transparent; color: var(--field-text); cursor: pointer }
.password-visibility-toggle:hover { background: var(--row-hover) }
.password-visibility-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
.password-visibility-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.auth-card, .form-card { width: min(460px, 100%); margin: 7vh auto }
.auth-card { border-top: 3px solid var(--accent) }
.auth-card .button { margin-top: .7rem }
.upload { display: flex; align-items: center; gap: 1rem }

.table-wrap { overflow: auto }
table { width: 100%; border-collapse: collapse }
th, td { padding: .85rem .9rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap }
th { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase }
tr:hover td { background: var(--row-hover) }

.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border-radius: 7px; background: var(--badge-bg); color: var(--badge-text); font-size: 11.5px; font-weight: 600; letter-spacing: .02em }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.badge.pending { background: var(--badge-pending-bg); color: var(--badge-pending-text) }
.badge.approved { background: var(--badge-approved-bg); color: var(--badge-approved-text) }
.badge.rejected { background: var(--badge-rejected-bg); color: var(--badge-rejected-text) }

.alert { padding: .8rem 1rem; margin-bottom: 1rem; border-radius: 8px }
.alert.success { background: var(--alert-success-bg); color: var(--alert-success-text) }
.alert.error { background: var(--alert-error-bg); color: var(--alert-error-text) }
.validation-summary-errors { padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid var(--alert-error-text); border-radius: 8px; background: var(--alert-error-bg); color: var(--alert-error-text); font-weight: 600 }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem }

.pwa-network, .pwa-toast { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; padding: .7rem 1rem; border-radius: 10px; background: var(--danger); color: #fff }
.pwa-toast { left: 50%; right: auto; transform: translateX(-50%); display: flex; align-items: center; gap: .8rem; background: var(--panel); color: var(--text); border: 1px solid var(--line) }
.pwa-toast button { padding: .45rem .7rem; border: 0; border-radius: 7px; background: var(--accent); color: #fff }

.offline-shell { width: min(680px, calc(100% - 2rem)); margin: 6vh auto }
.offline-card h1 { margin: 0; font-size: 1.45rem; letter-spacing: -.01em }
.offline-state { margin: .35rem 0 0; color: var(--muted); font-size: .9rem }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: .45rem; margin: 1.4rem 0 1.1rem; padding: 2.1rem 1.5rem; border: 1.5px dashed var(--field-border); border-radius: 14px; background: var(--field-bg); text-align: center; cursor: pointer; transition: border-color .18s ease, background .18s ease }
.dropzone svg { width: 30px; height: 30px; color: var(--accent); margin-bottom: .15rem }
.dropzone strong { color: var(--text); font-size: .95rem; font-weight: 700 }
.dropzone span { color: var(--muted); font-size: .8rem }
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--row-hover) }
.dropzone:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
.queue-list { margin: 0 0 1.3rem; padding: 0; list-style: none }
.queue-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .9rem }
.queue-list li:last-child { border-bottom: 0 }
.queue-list li:not(:has(button)) { color: var(--muted) }
.queue-list li span { min-width: 0; overflow-wrap: anywhere }
.queue-list button { flex: none; padding: .35rem .7rem; border: 1px solid var(--field-border); border-radius: 7px; background: transparent; color: var(--danger); font: inherit; font-size: .8rem; cursor: pointer }
.queue-list button:hover { border-color: var(--danger) }
.offline-actions { display: flex; flex-wrap: wrap; gap: .7rem }

@media (max-width: 760px) {
    .topbar { flex-wrap: wrap; gap: .7rem }
    .topbar nav { order: 3; width: 100% }
    .user > span { display: none }
    .stats { grid-template-columns: repeat(2, 1fr) }
    .page-title, .upload { align-items: stretch; flex-direction: column }
}
[hidden] { display: none !important }

/* toggle tema (chiaro/scuro/automatico) */
.theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--toggle-border); border-radius: 10px; background: var(--toggle-bg); color: var(--topbar-text); cursor: pointer; transition: transform .16s ease, background .16s ease }
.theme-toggle:hover { transform: translateY(-1px); background: var(--row-hover) }
.theme-toggle svg { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
:root[data-theme-preference="light"] .theme-toggle .icon-sun { display: block }
:root[data-theme-preference="dark"] .theme-toggle .icon-moon { display: block }
:root[data-theme-preference="auto"] .theme-toggle .icon-auto,
:root:not([data-theme-preference]) .theme-toggle .icon-auto { display: block }

/* schermata di accesso (brand a sinistra, form a destra) */
.auth-shell { display: grid; grid-template-columns: minmax(420px, 44%) 1fr; min-height: 100dvh }
.auth-brand { position: relative; display: flex; flex-direction: column; padding: clamp(1.4rem, 3vw, 3rem); color: #e8eaec; background: #0b0e13; border-right: 1px solid #232830; overflow: hidden }
.auth-brand::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px 420px at 78% 88%, rgba(106, 184, 148, .08), transparent 62%) }
.auth-brand > * { position: relative; z-index: 1 }
.auth-logo img { display: block; width: 210px; max-width: 100%; height: auto }
.auth-claim { margin: auto 0; padding: 3rem 0; max-width: 30rem }
.auth-eyebrow { margin: 0 0 .9rem; color: #6ab894; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase }
.auth-claim h1 { margin: 0 0 1.6rem; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.16; font-weight: 760; letter-spacing: -.02em }
.auth-claim ul { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; color: #9aa3ad; font-size: .95rem }
.auth-claim li { display: flex; align-items: center; gap: .7rem }
.auth-claim li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(106, 184, 148, .18) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236ab894" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/10px no-repeat }
.auth-figure { position: absolute; z-index: 0; right: -20px; bottom: -14px; width: min(430px, 66%); pointer-events: none }
.auth-foot { margin: 0; color: #6b7280; font-size: .78rem }
.auth-panel { position: relative; display: grid; place-items: center; padding: clamp(1.2rem, 4vw, 3rem); background: var(--bg); }
.auth-panel .auth-theme { position: absolute; top: 1.1rem; right: 1.1rem }
.auth-box { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 3vw, 38px); box-shadow: 0 18px 44px rgba(28, 25, 23, .10) }
.auth-box > h1 { margin: 0 0 .3rem; font-size: 27px; font-weight: 740; letter-spacing: -.02em; color: var(--topbar-text) }
.auth-box > h1::after { content: ""; display: block; width: 44px; height: 3px; margin-top: .85rem; border-radius: 2px; background: var(--accent) }
.auth-box .form input { font: inherit; background: var(--bg) }
.auth-sub { margin: 1rem 0 1.8rem; color: var(--muted); font-size: 13.5px }
.auth-box .form label { margin-top: .55rem; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--topbar-text) }
.auth-box .form input { padding: .85rem 1rem; border-radius: 10px; font-size: 15px }
.auth-box .form .button { margin-top: 1.3rem; padding: .95rem 1rem; font-size: 15px }
.auth-box .auth-passkey { margin-top: 1rem }
.auth-box .auth-passkey .button { width: 100%; padding: .95rem 1rem; font-size: 15px }
.auth-note { margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; text-align: center }
.auth-box .form-card, .auth-box .card { width: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none }
.auth-box .card > h1, .auth-box .form-card > h1 { font-size: 27px; font-weight: 740; letter-spacing: -.02em; color: var(--topbar-text) }
.auth-box .card > p, .auth-box .form-card > p { color: var(--muted); font-size: 13.5px; margin-bottom: 1.6rem }
@media (max-width: 860px) {
    .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr }
    .auth-brand { padding: 1.2rem clamp(1rem, 4vw, 2rem) }
    .auth-claim { display: none }
    .auth-figure { display: none }
    .auth-foot { display: none }
    .auth-panel { place-items: start center; padding-top: 8vh }
}
@media (prefers-reduced-motion: no-preference) {
    .auth-box { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both }
    .auth-claim h1, .auth-claim li { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both }
    .auth-claim li:nth-child(1) { animation-delay: .08s }
    .auth-claim li:nth-child(2) { animation-delay: .15s }
    .auth-claim li:nth-child(3) { animation-delay: .22s }
    .auth-figure { animation: rise .7s cubic-bezier(.2, .7, .2, 1) .25s both }
}

/* tabelle: niente doppia riga in fondo alla card */
.app-main .card .table-wrap table tbody tr:last-child td { border-bottom: 0 }

/* badge "Possibile duplicato" accanto al nome esercente */
.badge.badge-inline { margin-left: .45rem; vertical-align: .05em }

/* auth: palette fredda della landing; default scuro anche se il sistema e' chiaro */
:root[data-theme="dark"] body.auth {
    --bg: #0f1318; --panel: #171b21; --line: #232830; --text: #e8eaec; --muted: #9aa3ad;
    --field-bg: #171b21; --field-border: #2a313c; --field-border-hover: #3a4150; --field-text: #e8eaec;
    --topbar-text: #e8eaec; --focus: #6ab894;
    --button-bg: #6ab894; --button-bg-hover: #84c7a8; --button-text: #0f1318;
    --alert-error-bg: rgba(208, 128, 135, .13); --alert-error-text: #d08087;
}

/* auth scuro: pannello con atmosfera + ombra profonda della card */
:root[data-theme="dark"] body.auth .auth-panel {
    background:
        radial-gradient(700px 460px at 90% -8%, rgba(106, 184, 148, .08), transparent 62%),
        radial-gradient(540px 420px at -10% 110%, rgba(41, 171, 226, .06), transparent 60%),
        #0f1318;
}
:root[data-theme="dark"] body.auth .auth-box { box-shadow: 0 18px 50px rgba(0, 0, 0, .38) }
:root[data-theme="dark"] body.auth .auth-box .form input { background: #1b2027; border-color: #2a313c }
:root[data-theme="dark"] body.auth .auth-box .form input:focus { border-color: #6ab894 }
input.missing-field { border-color: var(--warning); background-color: color-mix(in srgb, var(--warning) 10%, var(--field-bg)); }