:root{--rz-primary:#9c6d31;--rz-primary-light:#b78b51;--gold:#b78238;--ink:#292621;--muted:#756d60;--line:#e9e5da;--tint:#f8f4eb}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#faf9f6;font-family:"Segoe UI",system-ui,sans-serif}a{color:#8b5d22}button,input{font:inherit}button,a,input{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #b78238;outline-offset:3px}
.app-header{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:0 4%;height:78px;background:white;border-bottom:1px solid var(--line)}.header-start{display:flex;align-items:center;gap:20px}.brand img{width:175px;max-height:54px;object-fit:contain}.header-caption,.muted{color:var(--muted);font-size:.85rem}.menu-toggle{display:grid;place-items:center;border:1px solid var(--line);background:white;border-radius:8px;width:44px;height:44px;cursor:pointer}
main{max-width:1600px;margin:auto;padding:38px 4%;min-width:0}h1{font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:-.04em;font-weight:600;margin:8px 0 12px}h2{font-size:1.2rem;font-weight:600}h3{font-size:1.1rem;font-weight:600;margin:16px 0 8px}p{line-height:1.6}.eyebrow{text-transform:uppercase;letter-spacing:.15em;color:#9c763e;font-size:.72rem}.welcome{margin-bottom:32px}.welcome>p:not(.eyebrow){color:var(--muted)}.module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.module-link{text-decoration:none;color:inherit;display:block}.module-grid .rz-card{height:100%;padding:26px;border:1px solid var(--line);border-radius:10px;box-shadow:none;border-top:3px solid #c4a16a}.module-grid .rzi{color:#ac8043}.module-grid p{font-size:.85rem;color:var(--muted)}.module-status{font-size:.75rem;color:#927345}.module-link:hover .rz-card{border-color:#b78238;background:#fffdf8}.module-pending{opacity:.7}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.page-heading p{margin:0;color:var(--muted)}.filter-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;padding:20px;margin:20px 0;background:white;border:1px solid var(--line);border-radius:10px}label{display:flex;flex-direction:column;gap:8px;font-size:.85rem;font-weight:500}.filter-bar input[type=search]{padding:11px;border:1px solid #d4cec2;border-radius:5px;min-height:44px;width:100%}.search-label{flex:1;min-width:180px;max-width:500px}.table-container{max-width:100%;overflow-x:auto;background:white;border-radius:10px;border:1px solid var(--line)}.table-container .rz-data-grid{min-width:0;border:0}.rz-button{min-height:44px}.machine-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.machine-card.rz-card{padding:0;border:1px solid var(--line);border-radius:12px;box-shadow:none;overflow:hidden}.machine-title{display:flex;align-items:center;gap:12px;padding:18px;background:var(--tint);border-bottom:1px solid var(--line)}.machine-title h2{margin:0}.machine-title .rzi{color:var(--gold)}.variable{padding:16px 18px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:12px}.variable>span{font-size:.8rem;color:var(--muted)}.variable strong{font-size:1.15rem}.variable a{grid-column:1/-1;font-size:.75rem;text-decoration:none}.variable.state-yellow{border-left:4px solid #d4a33d;background:#fffcf0}.variable.state-green{border-left:4px solid #51906b;background:#f3faf5}.variable.state-red{border-left:4px solid #b65d4d;background:#fff7f5}.empty-state{padding:36px;border:1px dashed #cfc7b9;text-align:center;color:var(--muted)}.history-chart.rz-card{border:1px solid var(--line);box-shadow:none;margin-top:20px;min-width:0;overflow:auto}.dialog-actions{margin-top:24px}.rz-dialog-content>label{margin:20px 0}.side-menu{position:fixed;top:78px;bottom:0;left:0;width:min(270px,85vw);background:white;z-index:25;padding:24px;box-shadow:8px 0 24px #29262120}.side-menu nav{display:flex;flex-direction:column;gap:8px}.side-menu a{padding:14px;text-decoration:none;color:var(--ink);border-radius:8px}.side-menu a.active,.side-menu a:hover{background:var(--tint);color:#93682d}.menu-backdrop{position:fixed;inset:78px 0 0;background:#29262155;z-index:24;border:0;width:100%;cursor:pointer}.skip-link{position:fixed;top:-100px;left:12px;z-index:100;background:white;padding:12px}.skip-link:focus{top:8px}
/* Breakpoint distinti: la home e il Sinottico seguono le rispettive griglie del mockup. */
@media (max-width: 1100px) {
    .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 1200px) {
    .machine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .machine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .header-caption { display: none; }
}

/* Controlli con superficie touch di almeno 44 x 44 px. */
.rz-button-icon-only,
.rz-datepicker-trigger,
.rz-dialog-titlebar-close {
    min-width: 44px;
    min-height: 44px;
}
.rz-datepicker .rz-inputtext { padding-inline-end: 48px; }
.rz-numeric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    min-height: 44px;
    min-width: 0;
}
.rz-numeric-input {
    min-width: 0;
    width: 100%;
    padding-inline-end: 8px;
}
.rz-numeric .rz-numeric-button {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}
.variable a {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
}
.module-grid > *, .machine-title h2, .variable > * { min-width: 0; overflow-wrap: anywhere; }
.page-heading { flex-wrap: wrap; }
.table-container, .rz-data-grid-data { overscroll-behavior-x: contain; }
.history-chart { max-width: 100%; }

/* Safe area e menu utilizzabile anche in orizzontale o con zoom elevato. */
:root { --header-height: 78px; --content-padding-x: 4%; }
html { scrollbar-gutter: stable; scroll-padding-top: calc(var(--header-height) + env(safe-area-inset-top) + 16px); }
body:has(.side-menu) { overflow: hidden; }
.app-header {
    height: calc(var(--header-height) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-inline-start: max(var(--content-padding-x), env(safe-area-inset-left));
    padding-inline-end: max(var(--content-padding-x), env(safe-area-inset-right));
}
main {
    padding-inline-start: max(var(--content-padding-x), env(safe-area-inset-left));
    padding-inline-end: max(var(--content-padding-x), env(safe-area-inset-right));
    padding-bottom: calc(38px + env(safe-area-inset-bottom));
}
.side-menu, .menu-backdrop { top: calc(var(--header-height) + env(safe-area-inset-top)); }
.side-menu {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    padding-inline-start: max(24px, env(safe-area-inset-left));
}
.rz-dialog-title { min-width: 0; overflow-wrap: anywhere; }
.rz-dialog-content { min-width: 0; max-height: calc(100dvh - 6rem); overflow-y: auto; }

@media (max-width: 600px) {
    :root { --header-height: 65px; --content-padding-x: 16px; }
    main { padding-top: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .brand img { width: 150px; }
    .module-grid { gap: 12px; }
    .module-grid .rz-card { padding: 16px; }
    .module-grid h3 { font-size: 17px; }
    .module-grid p { font-size: 12px; }
    .machine-grid { grid-template-columns: minmax(0, 1fr); }
    .filter-bar { padding: 16px; }
    .filter-bar > label { width: 100%; max-width: none; flex-basis: 100%; }
    .filter-bar .rz-datepicker { width: 100%; }
    input, select, textarea { font-size: 16px; }
}
@media (max-width: 360px) {
    .module-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Il calendario Radzen predefinito misura 352 px: deve entrare anche nei telefoni da 320 px. */
.rz-datepicker-popup-container {
    width: min(22rem, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    overflow: auto;
}
.rz-datepicker-popup-container .rz-calendar { width: 100%; min-width: 0; }
.rz-datepicker-popup-container .rz-calendar-view { width: 100%; table-layout: fixed; }
@media (max-width: 600px), (max-height: 500px) {
    .rz-datepicker-popup-container.rz-open {
        position: fixed;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 600px) {
    input:not([type="checkbox"]):not([type="radio"]), select, textarea,
    .rz-dropdown, .rz-datepicker, .rz-autocomplete {
        min-height: 44px;
    }
}

.registry-editor { margin-top: 24px; padding: 24px; background: var(--surface, #fff); border-radius: 16px; }
.registry-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.registry-editor label, .filter-bar label { display: flex; flex-direction: column; gap: 8px; }
.registry-editor input, .registry-editor select, .registry-editor textarea, .filter-bar select { width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; font: inherit; }
.registry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; }
.registry-color { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #bbb; vertical-align: middle; }
.production-form { border:0; padding:0; margin:0; min-width:0; }
.production-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; align-items:start; }
.production-batches { display:flex; flex-direction:column; gap:8px; position:sticky; top:90px; }
.production-batches button,.production-sheet button { min-height:44px; padding:10px 16px; border:1px solid #dacfbf; border-radius:8px; background:#fffdf9; color:#47372b; cursor:pointer; }
.production-batches .selected { background:#47372b; color:white; }
.production-sheet { margin-top:0; min-width:0; }
.production-phase { margin:22px 0; border-top:1px solid #dfd5c7; padding-top:14px; }
.production-phase summary { font-size:1.1rem; font-weight:600; cursor:pointer; padding:10px 0; color:#805d28; }
.production-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.production-field span { font-size:.8rem; color:#766957; }
.production-field input,.production-field select,.production-field textarea { width:100%; min-width:0; min-height:44px; }
.production-field input[readonly] { background:#f0ece5; }
.production-notes { display:flex; flex-direction:column; gap:8px; margin:20px 0; }
.production-save { position:sticky; bottom:0; padding:16px; background:#fffcf6; border:1px solid #dfd5c7; z-index:2; flex-wrap:wrap; }
@media(max-width:800px) { .production-layout { grid-template-columns:minmax(0,1fr); } .production-batches { position:static; flex-direction:row; flex-wrap:wrap; } }
.production-sheet .registry-fields,.production-overview .registry-fields { grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr)); align-items:start; }
.production-overview .registry-fields { max-width:760px; }
.production-field .production-label { font-size:inherit; color:inherit; display:block; }
.production-label small { font-size:.8rem; color:#766957; font-weight:normal; }
.production-field-full { grid-column:1/-1; }
@media(max-width:600px) { .production-sheet .registry-fields,.production-overview .registry-fields { grid-template-columns:minmax(0,1fr); } }