/* Archivo (SIL OFL 1.1), self-hosted: nessuna richiesta a server terzi. */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/archivo/archivo-latin-wght-normal.aa1941d5b024.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/archivo/archivo-latin-ext-wght-normal.23cf06d363da.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --page-bg: #f2f4f7;
    --surface: #ffffff;
    --surface-muted: #f1f5f9;
    --surface-header: #f1f5f9;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --text: #1e293b;
    --muted: #64748b;
    --heading: #0f172a;
    --link: #2563eb;
    --link-hover: #1d4ed8;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --surface-subtle: #f8fafc;
    --accent-soft: #eff6ff;
    --accent-border: #bfdbfe;
    --danger-soft: #fee2e2;
    --danger-border: #fecaca;
    --danger-strong: #b91c1c;
    --warning-soft: #fef3c7;
    --warning-strong: #92400e;
    --bar: #cddbee;
    --hatch: #bcd0f5;
    --inverse-text: #ffffff;
    --inverse-muted: #cbd5e1;
    --on-featured-muted: #b8c6d9;
    --shadow-float: 0 8px 24px rgb(15 23 42 / 0.12);
    color-scheme: light;
    --success: #059669;
    --warning: #b45309;
    --danger: #dc2626;
    --radius: 12px;
    --radius-sm: 8px;
    --navy: #0f2742;
    --navy-soft: #1d3b5f;
    --copper: #b4632a;
    --copper-soft: #fbeee4;
    --sidebar-width: 15rem;
    --content-inline-padding: clamp(1rem, 2.4vw, 2.75rem);
    --content-max: 1760px;
}

/* Tema scuro: segue il sistema salvo scelta esplicita (data-theme su <html>). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --page-bg: #0e1218;
        --surface: #161c24;
        --surface-muted: #202833;
        --surface-header: #202833;
        --surface-subtle: #1a212b;
        --border: #2a3340;
        --border-strong: #3b4655;
        --text: #d5dce5;
        --muted: #8d99a8;
        --heading: #f2f5f8;
        --link: #7aafff;
        --link-hover: #a3c7ff;
        --primary: #2f6fe0;
        --primary-hover: #3f7ef0;
        --success: #34d399;
        --warning: #f0a24a;
        --danger: #f87171;
        --navy: #1d4a9c;
        --navy-soft: #2557b3;
        --copper: #e3925a;
        --copper-soft: #3a2719;
        --accent-soft: #172741;
        --accent-border: #2a4672;
        --danger-soft: #3b1b1f;
        --danger-border: #5e252b;
        --danger-strong: #fca5a5;
        --warning-soft: #3a2d13;
        --warning-strong: #fcd34d;
        --bar: #2c3b52;
        --hatch: #3a578a;
        --inverse-text: #0e1218;
        --inverse-muted: #46505e;
        --on-featured-muted: #c3d3ec;
        --shadow-float: 0 8px 24px rgb(0 0 0 / 0.45);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --page-bg: #0e1218;
    --surface: #161c24;
    --surface-muted: #202833;
    --surface-header: #202833;
    --surface-subtle: #1a212b;
    --border: #2a3340;
    --border-strong: #3b4655;
    --text: #d5dce5;
    --muted: #8d99a8;
    --heading: #f2f5f8;
    --link: #7aafff;
    --link-hover: #a3c7ff;
    --primary: #2f6fe0;
    --primary-hover: #3f7ef0;
    --success: #34d399;
    --warning: #f0a24a;
    --danger: #f87171;
    --navy: #1d4a9c;
    --navy-soft: #2557b3;
    --copper: #e3925a;
    --copper-soft: #3a2719;
    --accent-soft: #172741;
    --accent-border: #2a4672;
    --danger-soft: #3b1b1f;
    --danger-border: #5e252b;
    --danger-strong: #fca5a5;
    --warning-soft: #3a2d13;
    --warning-strong: #fcd34d;
    --bar: #2c3b52;
    --hatch: #3a578a;
    --inverse-text: #0e1218;
    --inverse-muted: #46505e;
    --on-featured-muted: #c3d3ec;
    --shadow-float: 0 8px 24px rgb(0 0 0 / 0.45);
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    min-width: 320px;
    overflow-x: hidden;
}

body.portal-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;
    color: var(--text);
    background: var(--page-bg);
    font-family:
        "Archivo",
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

button,
input,
select {
    font: inherit;
}

img,
svg {
    display: block;
}

/* Allinea le cifre nelle colonne come in un gestionale. */
.portal-data-table td {
    font-variant-numeric: tabular-nums;
}

.portal-skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    transform: translateY(-180%);
    border-radius: var(--radius);
    background: var(--heading);
    color: var(--inverse-text);
    padding: 0.6rem 0.75rem;
    text-decoration: none;
}

.portal-skip-link:focus {
    transform: translateY(0);
}

.portal-container {
    width: min(calc(100% - (var(--content-inline-padding) * 2)), var(--content-max));
    min-width: 0;
    margin-inline: auto;
}

/* Header ----------------------------------------------------------------- */

.portal-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--border-strong);
    background: var(--surface);
    box-shadow: 0 1px 0 rgb(22 28 37 / 0.04);
}

.portal-header-inner {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 1.25rem;
}

.portal-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    color: var(--heading);
    text-decoration: none;
}

.portal-brand img {
    width: 4rem;
    height: 2.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    object-fit: contain;
    padding: 0.15rem;
}

.portal-brand strong,
.portal-brand small {
    display: block;
}

.portal-brand strong {
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}

.portal-brand small {
    color: var(--muted);
    font-size: 0.74rem;
}

.portal-nav-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
}

.portal-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Layout ----------------------------------------------------------------- */

.portal-main {
    flex: 1;
    min-width: 0;
    padding-block: 1.5rem 3rem;
}

.portal-stack {
    display: grid;
    min-width: 0;
    gap: 0.9rem;
}

.portal-page-header,
.portal-panel,
.portal-login-form {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.portal-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.1rem;
}

.portal-page-header h1,
.portal-login-heading h1 {
    margin: 0.15rem 0 0;
    color: var(--heading);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.portal-page-header p,
.portal-login-heading p {
    margin: 0.3rem 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.portal-page-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.6rem;
}

.portal-view-switch {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.portal-view-switch-item {
    display: inline-flex;
    align-items: center;
    min-height: 2.1rem;
    border-right: 1px solid var(--border-strong);
    color: var(--muted);
    padding: 0.35rem 0.75rem;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.portal-view-switch-item:last-child {
    border-right: 0;
}

.portal-view-switch-item.is-active {
    background: var(--surface);
    color: var(--heading);
}

a.portal-view-switch-item:hover {
    color: var(--link);
}

.portal-eyebrow {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.portal-panel {
    padding: 1rem 1.1rem;
}

/* Greeting --------------------------------------------------------------- */

/* KPI -------------------------------------------------------------------- */

/* Grafici ---------------------------------------------------------------- */

/* Tabelle --------------------------------------------------------------- */

.portal-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.portal-data-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    background: var(--surface);
}

.portal-data-table th,
.portal-data-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.55rem 0.8rem;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.portal-data-table th {
    background: var(--surface-header);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.portal-data-table tbody tr:nth-child(even) {
    background: var(--surface-subtle);
}

.portal-data-table tbody tr:last-child td {
    border-bottom: 0;
}

.portal-data-table tbody tr:hover {
    background: var(--accent-soft);
}

.portal-table-action {
    text-align: right;
}

.portal-text-link {
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
}

.portal-text-link:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.portal-text-link {
    font-size: 0.86rem;
}

/* Calendario ordini ---------------------------------------------------- */

/* Etichette stato / priorità — squadrate, poco sature ------------------- */

/* Stato e priorità: indicatore a pallino + etichetta (stile gestionale). */
.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.portal-badge::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--badge-dot, var(--muted));
}

/* Stato ordine */
.status-received {
    --badge-dot: #60a5fa;
}

.status-in_progress {
    --badge-dot: #2563eb;
}

.status-ready {
    --badge-dot: #059669;
}

.status-delivered {
    --badge-dot: #94a3b8;
}

.status-cancelled {
    --badge-dot: #dc2626;
}

/* Priorità */
.priority-1 {
    --badge-dot: #dc2626;
}

.priority-2 {
    --badge-dot: #d97706;
}

.priority-3 {
    --badge-dot: #64748b;
}

.priority-4 {
    --badge-dot: #94a3b8;
}

/* Bottoni --------------------------------------------------------------- */

.portal-button {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.42rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.portal-button-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.portal-button-primary:hover {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
}

.portal-button-secondary,
.portal-button-ghost {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--heading);
}

.portal-button-secondary:hover,
.portal-button-ghost:hover {
    background: var(--surface-muted);
}

.portal-button-full {
    width: 100%;
}

/* Filtri / form --------------------------------------------------------- */

.portal-filter-bar {
    display: grid;
    align-items: end;
    gap: 0.7rem;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) auto auto;
}

.portal-filter-bar > *,
.portal-page-header > * {
    min-width: 0;
}

.portal-form-field {
    display: grid;
    gap: 0.3rem;
}

.portal-form-field label {
    color: var(--heading);
    font-size: 0.82rem;
    font-weight: 600;
}

.portal-form-field input,
.portal-form-field select {
    width: 100%;
    min-height: 2.25rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    padding: 0.42rem 0.6rem;
}

.portal-form-field input:hover,
.portal-form-field select:hover {
    border-color: var(--muted);
}

/* Ordini: vista tabellare operativa ------------------------------------ */

.portal-order-toolbar {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.portal-order-search {
    display: flex;
    gap: 0.5rem;
}

.portal-order-search input {
    flex: 1;
    min-width: 0;
    min-height: 2.25rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    padding: 0.42rem 0.6rem;
}

.portal-order-search input:hover {
    border-color: var(--muted);
}

.portal-order-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.portal-order-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    padding: 0.25rem 0.75rem;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
}

.portal-order-tab:hover {
    border-color: var(--border-strong);
    background: var(--surface-muted);
}

.portal-order-tab-count {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.portal-order-tab.is-alert .portal-order-tab-count {
    color: var(--danger);
}

.portal-order-tab.is-active {
    border-color: var(--heading);
    background: var(--heading);
    color: var(--inverse-text);
}

.portal-order-tab.is-active .portal-order-tab-count {
    color: var(--inverse-muted);
}

.portal-orders-list {
    min-width: 720px;
}

.portal-orders-list tbody tr {
    position: relative;
}

.portal-orders-list tbody tr:hover,
.portal-orders-list tbody tr:focus-within {
    background: var(--accent-soft);
}

.portal-orders-list tbody tr.is-overdue td:first-child {
    border-left: 3px solid var(--danger);
}

.portal-orders-list tbody tr.is-closed .portal-order-link,
.portal-orders-list tbody tr.is-closed .portal-delivery-date {
    color: var(--muted);
}

.portal-order-reference {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* L'intera riga apre il dettaglio: il link si estende su tutta la riga. */
.portal-order-link {
    overflow: hidden;
    color: var(--heading);
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-order-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.portal-order-link:focus-visible {
    outline: none;
}

.portal-order-link:focus-visible::after {
    outline: 2px solid var(--link);
    outline-offset: -2px;
}

.portal-priority-tag {
    flex: none;
    border-radius: var(--radius);
    padding: 0.05rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portal-priority-tag.priority-1 {
    background: var(--danger-soft);
    color: var(--danger-strong);
}

.portal-priority-tag.priority-2 {
    background: var(--warning-soft);
    color: var(--warning-strong);
}

.portal-order-date {
    color: var(--muted);
}

.portal-pagination-actions {
    display: flex;
    gap: 0.5rem;
}

/* Login ----------------------------------------------------------------- */

.portal-auth-page {
    display: grid;
    min-height: calc(100vh - 7rem);
    place-items: center;
    padding-inline: 1rem;
}

.portal-login-form {
    display: grid;
    width: min(100%, 380px);
    gap: 0.8rem;
    padding: 1.4rem;
}

.portal-login-heading {
    margin-bottom: 0.2rem;
}

.portal-form-alert,
.portal-field-error {
    border: 1px solid var(--danger-border);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius);
    background: var(--danger-soft);
    color: var(--danger-strong);
    padding: 0.6rem 0.7rem;
    font-size: 0.86rem;
}

.portal-form-alert ul,
.portal-field-error ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* Stati vuoti ----------------------------------------------------------- */

.portal-empty-state {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-muted);
    padding: 1rem 1.1rem;
}

.portal-empty-state h2,
.portal-empty-state h3,
.portal-empty-state p {
    margin: 0;
    font-size: 1rem;
}

.portal-empty-state p {
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.88rem;
}

/* Paginazione / breadcrumb --------------------------------------------- */

.portal-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.9rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.portal-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.portal-breadcrumb a {
    color: var(--link);
    text-decoration: none;
}

.portal-breadcrumb a:hover {
    text-decoration: underline;
}

/* Dettaglio ------------------------------------------------------------- */

/* Footer ---------------------------------------------------------------- */

.portal-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.78rem;
}

.portal-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block: 0.85rem;
}

.portal-footer strong {
    color: var(--heading);
    font-weight: 600;
}

/* Assistenza WhatsApp --------------------------------------------------- */

.portal-whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
}

.portal-whatsapp-link:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.portal-whatsapp-icon {
    width: 1.05em;
    height: 1.05em;
    flex: none;
}

.portal-help-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1.1rem 1.5rem;
}

.portal-help-card h2 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
}

/* Prossime consegne (widget dashboard) ---------------------------------- */

/* Rende cliccabile l'intera riga (target ampio, un solo link accessibile). */

.portal-delivery {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.portal-delivery-date {
    color: var(--heading);
}

.portal-eta {
    font-size: 0.72rem;
    font-weight: 700;
}

.portal-eta--ready {
    color: var(--success);
}

.portal-eta--overdue {
    color: var(--danger-strong);
}

.portal-eta--today,
.portal-eta--soon {
    color: var(--warning);
}

.portal-eta--normal {
    color: var(--muted);
}

/* Timeline avanzamento ordine ------------------------------------------- */

.portal-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-timeline-item {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding-bottom: 0.9rem;
}

.portal-timeline-item:last-child {
    padding-bottom: 0;
}

.portal-timeline-item::before {
    content: "";
    position: absolute;
    top: 0.9rem;
    bottom: 0;
    left: 0.33rem;
    width: 2px;
    background: var(--border);
}

.portal-timeline-item:last-child::before {
    display: none;
}

.portal-timeline-marker {
    position: relative;
    z-index: 1;
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    margin-top: 0.2rem;
    border-radius: 50%;
    background: var(--badge-dot, var(--muted));
    box-shadow: 0 0 0 3px var(--surface);
}

.portal-timeline-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.portal-timeline-label {
    color: var(--heading);
    font-size: 0.9rem;
    font-weight: 600;
}

.portal-timeline-date {
    color: var(--muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

/* Focus / accessibilità ------------------------------------------------- */

:where(a, button, input, select):focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

#portal-main:focus {
    outline: none;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 920px) {
    .portal-header-inner {
        flex-wrap: wrap;
        padding-block: 0.6rem;
    }

    .portal-filter-bar {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 620px) {
    .portal-container {
        width: calc(100% - 1rem);
    }

    .portal-header-inner {
        min-height: 52px;
        gap: 0.65rem;
        padding-block: 0.45rem;
    }

    .portal-brand img {
        width: 3.2rem;
        height: 1.85rem;
    }

    .portal-main {
        padding-block: 0.8rem calc(9.25rem + env(safe-area-inset-bottom));
    }

    .portal-stack {
        gap: 0.7rem;
    }

    .portal-brand span {
        display: none;
    }

    .portal-panel,
.portal-page-header {
        padding: 0.8rem;
    }

    .portal-page-header,
.portal-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .portal-page-header h1 {
        font-size: 1.15rem;
    }

    .portal-page-header p,
.portal-page-actions,
.portal-view-switch,
.portal-filter-bar .portal-button {
        width: 100%;
    }

    .portal-page-actions {
        gap: 0.45rem;
    }

    .portal-view-switch-item {
        flex: 1;
        justify-content: center;
    }

    .portal-footer {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
    }

    .portal-footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Tabelle operative: da tabella a card impilate, niente scroll orizzontale. */
    .portal-card-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .portal-card-table {
        display: block;
        min-width: 0;
    }

    .portal-card-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .portal-card-table tbody {
        display: grid;
        gap: 0.55rem;
    }

    .portal-card-table tbody tr {
        display: grid;
        gap: 0.28rem;
        border: 1px solid var(--border);
        border-left: 3px solid var(--border-strong);
        border-radius: 0.75rem;
        background: var(--surface);
        padding: 0.65rem 0.75rem;
    }

    .portal-card-table tbody tr:not(:last-child) {
        border-bottom: 1px solid var(--border);
    }

    .portal-card-table tbody tr.is-overdue {
        border-left: 3px solid var(--danger);
    }

    .portal-card-table td {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        padding: 0.18rem 0;
        text-align: right;
        white-space: normal;
    }

    .portal-card-table td:first-child {
        border-left: 0;
    }

    .portal-card-table td::before {
        content: attr(data-label);
        flex: none;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-align: left;
        text-transform: uppercase;
    }

    .portal-card-table .portal-table-action {
        text-align: right;
    }

    .portal-card-table td > :not(.portal-badge,
.portal-delivery) {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .portal-card-table .portal-order-link {
        white-space: normal;
    }

    .portal-card-table .portal-order-reference {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

}

@media (max-width: 420px) {
    .portal-container {
        width: calc(100% - 0.75rem);
    }

    .portal-main {
        padding-bottom: calc(9.75rem + env(safe-area-inset-bottom));
    }

    .portal-card-table td {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.22rem;
        text-align: left;
    }

    .portal-card-table .portal-order-reference {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ========================================================================
   Shell autenticata: sidebar (desktop), barra superiore, dock (mobile)
   ======================================================================== */

.portal-workspace {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

.portal-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    border-right: 1px solid var(--border);
    background: var(--surface);
    padding: 1.4rem 0.9rem 1.1rem;
}

body.has-sidebar {
    padding-left: var(--sidebar-width);
}

.portal-sidebar-brand {
    display: grid;
    gap: 0.45rem;
    padding: 0 0.6rem;
    text-decoration: none;
}

.portal-sidebar-brand img {
    width: auto;
    height: 2.5rem;
    object-fit: contain;
    object-position: left center;
}

.portal-sidebar-brand span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.portal-sidebar-label {
    margin: 2rem 0 0.5rem 0.75rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portal-sidebar-nav {
    display: grid;
    gap: 0.2rem;
}

.portal-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--muted);
    padding: 0.65rem 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.portal-sidebar-link:hover {
    background: var(--surface-muted);
    color: var(--heading);
}

.portal-sidebar-link.is-active {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--link);
    color: var(--link);
}

.portal-sidebar-logout {
    margin-top: auto;
}

.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--page-bg);
    padding: 0.75rem var(--content-inline-padding);
}

.portal-topbar-brand,
.portal-topbar-logout {
    display: none;
}

.portal-topbar-brand img {
    width: auto;
    height: 2rem;
}

.portal-topbar-search {
    position: relative;
    flex: 1;
    max-width: 30rem;
}

.portal-topbar-search svg {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.portal-topbar-search input {
    width: 100%;
    min-height: 2.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    padding: 0.45rem 1rem 0.45rem 2.45rem;
}

.portal-topbar-search input:hover,
.portal-company-switch select:hover {
    border-color: var(--border-strong);
}

.portal-company-switch {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.portal-company-switch select,
.portal-company-name {
    max-width: 17rem;
    min-height: 2.6rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--heading);
    padding: 0.5rem 1rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-company-name {
    display: inline-flex;
    align-items: center;
}

.portal-company-switch select {
    appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0.85rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    cursor: pointer;
}

.portal-company-apply {
    min-height: 2.6rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--heading);
    padding: 0.4rem 0.9rem;
    font-weight: 650;
    cursor: pointer;
}

.portal-user-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    margin-left: auto;
}

.portal-user-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--copper-soft);
    color: var(--copper);
    font-weight: 750;
}

.portal-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portal-user-text {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.portal-user-text strong {
    color: var(--heading);
    font-size: 0.9rem;
}

.portal-user-text small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-icon-button {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--heading);
    cursor: pointer;
}

.portal-icon-button svg {
    width: 1.1rem;
    height: 1.1rem;
}

.portal-bottom-dock {
    display: none;
}

.portal-dock-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    color: var(--muted);
    padding: 0.6rem 1rem;
    font-size: 0.86rem;
    font-weight: 650;
    text-decoration: none;
}

.portal-dock-item.is-active {
    background: var(--navy);
    color: #fff;
}

/* ========================================================================
   Dashboard
   ======================================================================== */

.portal-dashboard {
    display: grid;
    gap: 1rem;
}

.portal-dash-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-block: 0.4rem 0.6rem;
}

.portal-dash-heading h1 {
    margin: 0;
    color: var(--heading);
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.portal-dash-heading p {
    margin: 0.45rem 0 0;
    color: var(--muted);
    font-size: 0.98rem;
}

.portal-dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.portal-button-pill {
    min-height: 2.65rem;
    border-radius: 999px;
    padding-inline: 1.2rem;
}

.portal-stat-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-stat-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.3rem;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    padding: 1.15rem 1.25rem 1.2rem;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.portal-stat-card:hover {
    border-color: var(--border-strong);
}

.portal-stat-card:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

.portal-stat-label {
    padding-right: 2.6rem;
    color: var(--heading);
    font-size: 0.95rem;
    font-weight: 650;
}

.portal-stat-value {
    margin-top: 0.5rem;
    color: var(--heading);
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
}

.portal-stat-meta {
    color: var(--muted);
    font-size: 0.82rem;
}

.portal-stat-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    color: var(--heading);
}

.portal-stat-arrow svg {
    width: 1rem;
    height: 1rem;
}

.portal-stat-card.is-featured {
    border-color: var(--navy);
    background: var(--navy);
}

.portal-stat-card.is-featured:hover {
    background: var(--navy-soft);
}

.portal-stat-card.is-featured .portal-stat-label,
.portal-stat-card.is-featured .portal-stat-value {
    color: #fff;
}

.portal-stat-card.is-featured .portal-stat-meta {
    color: var(--on-featured-muted);
}

.portal-stat-card.is-featured .portal-stat-arrow {
    border-color: #fff;
    background: #fff;
    color: var(--navy);
}

.portal-stat-card.is-alert .portal-stat-value,
.portal-stat-card.is-alert .portal-stat-meta {
    color: var(--danger);
}

.portal-dash-board {
    display: grid;
    gap: 0.9rem;
    grid-template-areas:
        "trend trend next upcoming"
        "activity activity gauge upcoming";
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    padding: 1.15rem 1.25rem;
}

.portal-card h2 {
    margin: 0;
    color: var(--heading);
    font-size: 1.05rem;
    font-weight: 650;
}

.portal-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.portal-card-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.portal-trend-card {
    grid-area: trend;
}

.portal-next-card {
    grid-area: next;
}

.portal-upcoming-card {
    grid-area: upcoming;
}

.portal-activity-card {
    grid-area: activity;
}

.portal-gauge-card {
    grid-area: gauge;
}

/* Barre mensili: pillole come nel riferimento, il mese in corso tratteggiato
   perché ancora parziale, il mese di picco pieno scuro. */
.portal-trend-bars {
    display: grid;
    align-items: end;
    gap: 0.55rem;
    height: 14rem;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    list-style: none;
}

.portal-trend-bar {
    display: grid;
    gap: 0.45rem;
    height: 100%;
    grid-template-rows: minmax(0, 1fr) auto;
    text-align: center;
}

.portal-trend-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    min-height: 0;
}

.portal-trend-fill {
    width: min(100%, 2.6rem);
    min-height: 0.5rem;
    border-radius: 999px;
    background: var(--bar);
}

.portal-trend-bar.is-peak .portal-trend-fill {
    background: var(--navy);
}

.portal-trend-bar.is-current .portal-trend-fill {
    border: 1.5px solid var(--link);
    background: repeating-linear-gradient(135deg, var(--hatch) 0 2px, var(--surface) 2px 7px);
}

.portal-trend-value {
    border-radius: 6px;
    background: var(--surface-muted);
    color: var(--heading);
    padding: 0.05rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.portal-trend-label {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.portal-trend-bar.is-current .portal-trend-label {
    color: var(--link);
}

.portal-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.portal-trend-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.portal-trend-legend span::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 3px;
}

.portal-trend-legend .is-peak::before {
    background: var(--navy);
}

.portal-trend-legend .is-current::before {
    border: 1.5px solid var(--link);
    background: repeating-linear-gradient(135deg, var(--hatch) 0 2px, var(--surface) 2px 5px);
}

.portal-next-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.portal-next-card h2 {
    margin-bottom: 0.6rem;
}

.portal-next-date {
    margin: 0;
    color: var(--link);
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.portal-next-date::first-letter {
    text-transform: uppercase;
}

.portal-next-ref {
    margin: 0;
    color: var(--heading);
    font-weight: 600;
}

.portal-next-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.8rem;
    margin: 0.2rem 0 0;
}

.portal-next-open {
    align-self: flex-start;
    margin-top: auto;
}

.portal-next-empty {
    margin: 0;
    color: var(--muted);
}

.portal-upcoming-list,
.portal-activity-list,
.portal-gauge-legend {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-upcoming-list {
    gap: 0.95rem;
}

.portal-upcoming-list li {
    position: relative;
    display: grid;
    align-items: center;
    gap: 0.8rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.portal-date-tile {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 10px;
    background: var(--surface-muted);
    line-height: 1.05;
}

.portal-date-tile strong {
    color: var(--heading);
    font-size: 1.02rem;
}

.portal-date-tile small {
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
}

.portal-upcoming-list li.is-late .portal-date-tile {
    background: var(--danger-soft);
}

.portal-upcoming-list li.is-late .portal-date-tile strong {
    color: var(--danger);
}

.portal-upcoming-text {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

.portal-upcoming-link,
.portal-activity-text a {
    overflow: hidden;
    color: var(--heading);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-upcoming-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.portal-upcoming-link:hover,
.portal-activity-text a:hover {
    color: var(--link);
}

.portal-upcoming-meta {
    color: var(--muted);
    font-size: 0.76rem;
}

.portal-activity-list {
    gap: 0.85rem;
}

.portal-activity-list li {
    display: grid;
    align-items: center;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.portal-activity-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--badge-dot, var(--muted));
}

.portal-activity-dot.is-date {
    background: var(--copper);
}

.portal-activity-text {
    display: grid;
    min-width: 0;
}

.portal-activity-text span {
    color: var(--muted);
    font-size: 0.8rem;
}

.portal-activity-list time {
    color: var(--muted);
    font-size: 0.76rem;
    white-space: nowrap;
}

.portal-gauge {
    position: relative;
    max-width: 15rem;
    margin: 0.8rem auto 0;
}

.portal-gauge svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.portal-gauge path {
    fill: none;
    stroke-width: 20;
}

.portal-gauge-track {
    stroke: var(--surface-muted);
    stroke-linecap: round;
}

.portal-gauge-segment {
    stroke: var(--badge-dot);
}

.portal-gauge-center {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    margin: 0;
    text-align: center;
    line-height: 1.1;
}

.portal-gauge-center strong {
    color: var(--heading);
    font-size: 2.2rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.portal-gauge-center span {
    color: var(--muted);
    font-size: 0.8rem;
}

.portal-gauge-legend {
    gap: 0.45rem;
    margin-top: 1.1rem;
}

.portal-gauge-legend li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}

.portal-gauge-legend strong {
    color: var(--heading);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1280px) {
    .portal-dash-board {
        grid-template-areas:
            "trend trend"
            "next gauge"
            "upcoming activity";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    body.has-sidebar {
        padding-left: 0;
    }

    .portal-sidebar {
        display: none;
    }

    .portal-topbar {
        flex-wrap: wrap;
        padding-block: 0.6rem;
    }

    .portal-topbar-brand,
    .portal-topbar-logout {
        display: block;
    }

    .portal-topbar-search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .portal-user-text {
        display: none;
    }

    .portal-main {
        padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
    }

    .portal-bottom-dock {
        position: fixed;
        bottom: calc(0.8rem + env(safe-area-inset-bottom));
        left: 50%;
        z-index: 40;
        display: flex;
        gap: 0.2rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface);
        box-shadow: var(--shadow-float);
        padding: 0.3rem;
        transform: translateX(-50%);
    }

    .portal-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .portal-container {
        width: calc(100% - 2rem);
    }

    .portal-topbar {
        padding-inline: 1rem;
    }

    .portal-company-switch,
    .portal-company-name {
        min-width: 0;
        flex: 1;
    }

    .portal-company-switch select,
    .portal-company-name {
        width: 100%;
        max-width: none;
    }

    .portal-user-chip {
        margin-left: 0;
    }

    .portal-dash-actions,
    .portal-dash-actions .portal-button {
        width: 100%;
    }

    .portal-stat-grid {
        gap: 0.6rem;
    }

    .portal-stat-card {
        padding: 0.9rem 0.95rem 1rem;
    }

    .portal-stat-arrow {
        top: 0.75rem;
        right: 0.75rem;
        width: 1.8rem;
        height: 1.8rem;
    }

    .portal-dash-board {
        grid-template-areas:
            "next"
            "upcoming"
            "trend"
            "gauge"
            "activity";
        grid-template-columns: minmax(0, 1fr);
    }

    .portal-trend-bars {
        gap: 0.25rem;
        height: 11rem;
    }

    .portal-trend-label {
        font-size: 0.62rem;
    }

    .portal-trend-value {
        font-size: 0.64rem;
    }

    .portal-activity-list li {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .portal-activity-list time {
        grid-column: 2;
    }

    .portal-dock-item {
        padding: 0.55rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* ========================================================================
   Sidebar ridotta, profilo, tema
   ======================================================================== */

.portal-sidebar {
    transition: width 0.18s ease;
}

body.has-sidebar {
    transition: padding-left 0.18s ease;
}

.portal-sidebar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.portal-sidebar-brand {
    min-width: 0;
}

.portal-sidebar-toggle {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}

.portal-sidebar-toggle:hover {
    border-color: var(--border-strong);
    color: var(--heading);
}

.portal-sidebar-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.18s ease;
}

.portal-sidebar-link .portal-nav-icon {
    flex: none;
}

:root[data-sidebar="collapsed"] {
    --sidebar-width: 4.75rem;
}

:root[data-sidebar="collapsed"] .portal-sidebar {
    padding-inline: 0.7rem;
}

:root[data-sidebar="collapsed"] .portal-sidebar-top {
    flex-direction: column;
    align-items: center;
}

:root[data-sidebar="collapsed"] .portal-sidebar-brand {
    padding: 0;
}

/* Da ridotta resta il monogramma "TS" a sinistra del logo. */
:root[data-sidebar="collapsed"] .portal-sidebar-brand img {
    width: 2.6rem;
    object-fit: cover;
}

:root[data-sidebar="collapsed"] .portal-sidebar-brand span,
:root[data-sidebar="collapsed"] .portal-sidebar-text {
    display: none;
}

:root[data-sidebar="collapsed"] .portal-sidebar-label {
    height: 1px;
    margin: 1.2rem 0.4rem 0.6rem;
    overflow: hidden;
    background: var(--border);
    color: transparent;
}

:root[data-sidebar="collapsed"] .portal-sidebar-link {
    justify-content: center;
    padding-inline: 0;
}

:root[data-sidebar="collapsed"] .portal-sidebar-toggle svg {
    transform: scaleX(-1);
}

a.portal-user-chip {
    border-radius: 999px;
    color: inherit;
    padding: 0.2rem 0.6rem 0.2rem 0.2rem;
    text-decoration: none;
}

a.portal-user-chip:hover {
    background: var(--surface);
}

/* Il logo è un PNG su fondo chiaro: in tema scuro lo appoggiamo su una
   piastrina bianca invece di lasciarlo "bucare" lo sfondo. */
:root[data-theme="dark"] .portal-sidebar-brand img,
:root[data-theme="dark"] .portal-topbar-brand img,
:root[data-theme="dark"] .portal-brand img {
    border-radius: 6px;
    background: #fff;
    padding: 0.2rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .portal-sidebar-brand img,
    :root:not([data-theme="light"]) .portal-topbar-brand img,
    :root:not([data-theme="light"]) .portal-brand img {
        border-radius: 6px;
        background: #fff;
        padding: 0.2rem;
    }
}

.portal-profile {
    display: grid;
    gap: 1rem;
}

.portal-profile-head {
    display: grid;
    align-items: center;
    gap: 1rem 1.4rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 1.4rem 1.5rem;
}

.portal-profile-avatar {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--copper-soft);
    color: var(--copper);
    font-size: 1.8rem;
    font-weight: 750;
}

.portal-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portal-profile-identity h1 {
    margin: 0;
    color: var(--heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 750;
    letter-spacing: -0.02em;
}

.portal-profile-identity p {
    margin: 0.25rem 0 0;
    color: var(--muted);
}

.portal-profile-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.8rem;
    margin: 0;
}

.portal-profile-facts dt,
.portal-company-data dt {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.portal-profile-facts dd {
    margin: 0.15rem 0 0;
    color: var(--heading);
    font-weight: 650;
}

.portal-profile-section h2 {
    margin: 0;
    color: var(--heading);
    font-size: 1.1rem;
    font-weight: 650;
}

.portal-company-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.portal-company-card {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.portal-company-card.is-current {
    border-color: var(--accent-border);
    box-shadow: inset 0 3px 0 var(--primary);
}

.portal-company-card .portal-button {
    justify-self: start;
}

.portal-company-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.portal-company-card h3 {
    margin: 0;
    color: var(--heading);
    font-size: 1.15rem;
    font-weight: 700;
}

.portal-company-card-head p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.portal-company-card-head > div:first-child {
    flex: 1;
    min-width: 0;
}

.portal-company-tags {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.portal-tag {
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text);
    padding: 0.15rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.portal-tag.is-current {
    background: var(--accent-soft);
    color: var(--link);
}

.portal-company-data {
    display: grid;
    gap: 0.55rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.portal-company-data dd {
    margin: 0.1rem 0 0;
    overflow-wrap: anywhere;
    color: var(--heading);
    font-size: 0.88rem;
}

.portal-company-numbers {
    display: flex;
    gap: 1.4rem;
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.portal-company-numbers strong {
    color: var(--heading);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

.portal-theme-picker {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin: 1rem 0 0;
    border: 0;
    padding: 0;
}

.portal-theme-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    padding: 0.8rem 0.9rem;
    cursor: pointer;
}

.portal-theme-option:hover {
    border-color: var(--border-strong);
}

.portal-theme-option input {
    position: absolute;
    opacity: 0;
}

.portal-theme-option:has(input:checked) {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.portal-theme-option:has(input:focus-visible) {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

.portal-theme-option strong {
    display: block;
    color: var(--heading);
}

.portal-theme-option small {
    color: var(--muted);
    font-size: 0.78rem;
}

.portal-theme-swatch {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
}

.portal-theme-swatch.is-light {
    background: linear-gradient(135deg, #ffffff 50%, #f2f4f7 50%);
}

.portal-theme-swatch.is-dark {
    background: linear-gradient(135deg, #161c24 50%, #0e1218 50%);
}

.portal-theme-swatch.is-system {
    background: linear-gradient(135deg, #ffffff 50%, #161c24 50%);
}

@media (max-width: 900px) {
    .portal-profile-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .portal-profile-facts {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-sidebar,
    body.has-sidebar,
    .portal-sidebar-toggle svg {
        transition: none;
    }
}

/* ========================================================================
   Dettaglio ordine
   ======================================================================== */

.portal-detail,
.portal-calendar-page {
    display: grid;
    gap: 1rem;
}

.portal-detail-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem 2rem;
    padding: 1.4rem 1.5rem;
}

.portal-detail-title {
    min-width: 0;
    flex: 1 1 28rem;
}

.portal-detail-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.portal-detail-title h1 {
    margin: 0.55rem 0 0;
    overflow-wrap: anywhere;
    color: var(--heading);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.portal-detail-title p {
    margin: 0.4rem 0 0;
    color: var(--muted);
}

.portal-detail-delivery {
    display: grid;
    gap: 0.15rem;
    min-width: 13rem;
    border-radius: 12px;
    background: var(--surface-subtle);
    padding: 0.85rem 1rem;
}

.portal-detail-delivery > span:first-child {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.portal-detail-delivery strong {
    color: var(--heading);
    font-size: 1.3rem;
    font-weight: 750;
}

.portal-detail-delivery strong::first-letter {
    text-transform: uppercase;
}

.portal-detail-delivery.is-late {
    background: var(--danger-soft);
}

.portal-detail-delivery .portal-eta {
    font-size: 0.82rem;
}

.portal-progress {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
}

.portal-progress-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    text-align: center;
}

/* Linea di collegamento verso il passo precedente. */
.portal-progress-step + .portal-progress-step::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    right: 50%;
    left: -50%;
    height: 3px;
    border-radius: 3px;
    background: var(--border);
}

.portal-progress-step.is-done + .portal-progress-step::before {
    background: var(--primary);
}

.portal-progress-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.portal-progress-marker svg {
    width: 1rem;
    height: 1rem;
}

.portal-progress-step.is-done .portal-progress-marker {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.portal-progress-step.is-current .portal-progress-marker {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.portal-progress-label {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
}

.portal-progress-step.is-done .portal-progress-label,
.portal-progress-step.is-current .portal-progress-label {
    color: var(--heading);
}

.portal-progress-step.is-current .portal-progress-label {
    font-weight: 750;
}

.portal-progress-date {
    min-height: 1.1em;
    color: var(--muted);
    font-size: 0.76rem;
}

.portal-progress-cancelled {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    color: var(--muted);
}

.portal-progress-cancelled strong {
    color: var(--danger);
    font-size: 1.05rem;
}

.portal-detail-columns {
    display: grid;
    align-items: start;
    gap: 0.9rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.portal-text-button {
    border: 0;
    background: none;
    color: var(--link);
    padding: 0;
    font-size: 0.85rem;
    font-weight: 650;
    cursor: pointer;
}

.portal-text-button:hover {
    text-decoration: underline;
}

.portal-timeline-item.is-date {
    --badge-dot: var(--copper);
}

.portal-file-list {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-file-list li {
    display: grid;
    align-items: center;
    gap: 0.8rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.portal-file-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 10px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.portal-file-icon.is-pdf {
    background: var(--danger-soft);
    color: var(--danger-strong);
}

.portal-file-icon.is-image {
    background: var(--accent-soft);
    color: var(--link);
}

.portal-file-text {
    display: grid;
    min-width: 0;
}

.portal-file-text strong {
    overflow: hidden;
    color: var(--heading);
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-file-text small {
    color: var(--muted);
    font-size: 0.76rem;
}

.portal-file-download {
    min-height: 2.2rem;
    padding-inline: 0.95rem;
}

/* ========================================================================
   Calendario consegne
   ======================================================================== */

.portal-cal-layout {
    display: grid;
    align-items: start;
    gap: 0.9rem;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
}

.portal-cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1rem;
}

.portal-cal-toolbar h2 {
    margin: 0 0 0.2rem;
    color: var(--heading);
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.portal-cal-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.portal-cal-nav .portal-icon-button svg {
    width: 1.1rem;
    height: 1.1rem;
}

.portal-cal-filters {
    margin: 1rem 0 1.1rem;
}

.portal-cal-filters .portal-badge {
    gap: 0;
}

.portal-cal-weekdays,
.portal-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.portal-cal-weekdays {
    margin-bottom: 0.4rem;
}

.portal-cal-weekdays span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.portal-cal-grid {
    gap: 0.35rem;
}

.portal-cal-day {
    display: grid;
    align-content: start;
    gap: 0.3rem;
    min-height: 5.6rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    padding: 0.45rem 0.5rem;
    text-decoration: none;
}

.portal-cal-day:hover {
    border-color: var(--border-strong);
    background: var(--surface-subtle);
}

.portal-cal-day.is-muted {
    background: transparent;
    border-color: transparent;
    opacity: 0.55;
}

.portal-cal-number {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    color: var(--heading);
    font-size: 0.9rem;
    font-weight: 700;
}

.portal-cal-day.is-today .portal-cal-number {
    background: var(--primary);
    color: #fff;
}

.portal-cal-day.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    background: var(--accent-soft);
}

.portal-cal-day.is-late .portal-cal-number {
    box-shadow: inset 0 0 0 2px var(--danger);
}

.portal-cal-total {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.portal-cal-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.portal-cal-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--heading);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.portal-cal-dot::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--badge-dot);
}

.portal-cal-agenda {
    position: sticky;
    top: 5rem;
}

.portal-cal-agenda-list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-cal-agenda-list li {
    position: relative;
    display: grid;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
}

.portal-cal-agenda-list li:hover {
    border-color: var(--border-strong);
}

.portal-cal-agenda-list li.is-late {
    border-left: 3px solid var(--danger);
}

.portal-cal-agenda-link {
    color: var(--heading);
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}

.portal-cal-agenda-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.portal-cal-agenda-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.7rem;
}

@media (max-width: 1180px) {
    .portal-cal-layout,
    .portal-detail-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .portal-cal-agenda {
        position: static;
    }
}

@media (max-width: 640px) {
    .portal-detail-delivery {
        width: 100%;
    }

    .portal-progress-label {
        font-size: 0.74rem;
    }

    .portal-progress-date {
        font-size: 0.68rem;
    }

    .portal-cal-grid {
        gap: 0.2rem;
    }

    /* Su telefono la cella mostra numero e pallini, senza testo. */
    .portal-cal-day {
        min-height: 3.4rem;
        justify-items: center;
        padding: 0.3rem 0.15rem;
    }

    .portal-cal-total {
        display: none;
    }

    .portal-cal-dots {
        justify-content: center;
        gap: 0.15rem;
    }

    .portal-cal-dot {
        font-size: 0;
    }

    .portal-cal-dot::before {
        width: 0.4rem;
        height: 0.4rem;
    }

    .portal-file-list li {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .portal-file-download {
        grid-column: 2;
        justify-self: start;
    }
}

/* ========================================================================
   Cantieri
   ======================================================================== */

/* Etichetta cantiere: rame, l'accento caldo del portale, così il cantiere si
   distingue a colpo d'occhio dal resto del riferimento. */
.portal-site-tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    border-radius: 6px;
    background: var(--copper-soft);
    color: var(--copper);
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.portal-next-ref .portal-site-tag {
    margin-right: 0.35rem;
}

.portal-upcoming-site {
    color: var(--copper);
    font-weight: 700;
}

.portal-cal-agenda-list .portal-site-tag {
    justify-self: start;
}

.portal-site-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.portal-site-filters-label {
    margin-right: 0.3rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.portal-site-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px dashed var(--border-strong);
    border-radius: 999px;
    color: var(--text);
    padding: 0.2rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.portal-site-filter span {
    color: var(--muted);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.portal-site-filter:hover {
    border-color: var(--copper);
}

.portal-site-filter.is-active {
    border-style: solid;
    border-color: var(--copper);
    background: var(--copper-soft);
    color: var(--copper);
}

.portal-site-filter.is-active span {
    color: var(--copper);
}

.portal-sites .portal-card-head {
    margin-bottom: 0.7rem;
}

.portal-sites h2 {
    margin: 0;
    color: var(--heading);
    font-size: 1.05rem;
    font-weight: 650;
}

.portal-site-cards {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
    list-style: none;
}

.portal-site-card {
    position: relative;
    display: grid;
    gap: 0.15rem;
    border: 1px solid var(--border);
    border-top: 3px solid var(--copper);
    border-radius: 14px;
    background: var(--surface);
    padding: 0.85rem 1rem;
}

.portal-site-card:hover {
    border-color: var(--border-strong);
    border-top-color: var(--copper);
}

.portal-site-card.is-late {
    border-top-color: var(--danger);
}

.portal-site-card.is-idle {
    border-top-color: var(--border-strong);
}

.portal-site-card-link {
    color: var(--heading);
    font-weight: 700;
    text-decoration: none;
}

.portal-site-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.portal-site-card strong {
    color: var(--heading);
    font-size: 1.8rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.portal-site-card span {
    color: var(--muted);
    font-size: 0.78rem;
}

.portal-site-card.is-late span {
    color: var(--danger);
    font-weight: 650;
}