/* ========================================================== Cantiere App — design system Look professionale/moderno da software gestionale, pensato soprattutto per l'uso da smartphone in cantiere. ========================================================== */ :root { --bg: #C3D4F6; --bg-gradient-top: #B2C6F3; --bg-gradient-bottom: #E1E9F8; --bg-card: #FFFFFF; --bg-topbar: rgba(246, 248, 251, 0.86); --text: #171B24; --text-muted: #6B7280; --text-faint: #9AA1AC; --border: #E4E7EC; --border-strong: #D0D5DD; --primary: #3457D5; --primary-hover: #2A46B0; --primary-light: #EAF0FE; --primary-text: #2540A6; --success: #17804F; --success-bg: #E7F6EE; --success-border: #BEE6CF; --danger: #C6362E; --danger-bg: #FBEAE9; --danger-border: #F3C6C3; --warning: #B4740E; --warning-bg: #FBF1DF; --neutral-bg: #EEF0F3; --cal-lavorativa-bg: #EAF0FE; --cal-lavorativa-dot: #3457D5; --cal-pioggia-bg: #DCE3F0; --cal-pioggia-dot: #5B76A8; --cal-festivo-bg: #EEF0F3; --cal-festivo-dot: #8A93A3; --cal-sospesa-bg: #FBF1DF; --cal-sospesa-dot: #B4740E; --radius-lg: 16px; --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.08); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* --- Tema scuro (opzionale, attivato da Profilo) --------------------- Attivato mettendo data-theme="scuro" su (fatto da uno script inline in inc/layout_top.php, prima del CSS, leggendo la preferenza salvata in localStorage: niente "flash" del tema chiaro al caricamento). Le icone (stroke="currentColor") e quasi tutti gli altri colori seguono automaticamente perché usano già queste variabili. */ html[data-theme="scuro"] { --bg: #10151F; --bg-gradient-top: #141B2A; --bg-gradient-bottom: #0B0F17; --bg-card: #1B2333; --bg-topbar: rgba(16, 21, 31, 0.88); --text: #E8EBF2; --text-muted: #A0AAC0; --text-faint: #6B7590; --border: #2A3348; --border-strong: #3B4560; --primary: #7291F7; --primary-hover: #8DA6FA; --primary-light: #22304F; --primary-text: #B4C5FB; --success: #4ADE94; --success-bg: #16302A; --success-border: #235A45; --danger: #FF7A73; --danger-bg: #3A1E1E; --danger-border: #6B3230; --warning: #F5B94E; --warning-bg: #3A2E12; --neutral-bg: #232B3D; --cal-lavorativa-bg: #1E2A47; --cal-lavorativa-dot: #7291F7; --cal-pioggia-bg: #202836; --cal-pioggia-dot: #8CA3D6; --cal-festivo-bg: #232B3D; --cal-festivo-dot: #8A93A3; --cal-sospesa-bg: #362C16; --cal-sospesa-dot: #F5B94E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); background: linear-gradient(180deg, var(--bg-gradient-top) 0%, var(--bg-gradient-bottom) 420px); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } body { font-size: 15px; line-height: 1.5; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, p { margin: 0; } /* --- Barra superiore (marchio + uscita account) ------------------- */ .app-topbar { position: sticky; top: 0; z-index: 25; max-width: 640px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 8px; background: var(--bg-topbar); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .app-topbar-brand { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--text); } .app-topbar-brand:hover { text-decoration: none; color: var(--primary); } .app-topbar-brand svg { color: var(--primary); } .app-topbar-logout { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text-muted); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-card); } .app-topbar-logout:hover { color: var(--danger); border-color: var(--danger); text-decoration: none; background: var(--danger-bg); } .app-topbar-right { display: flex; align-items: center; gap: 18px; } .theme-toggle-topbar { display: flex; align-items: center; gap: 7px; color: var(--text-muted); } .admin-topbar-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; } .admin-topbar-links a:not(.app-topbar-logout) { font-size: 13px; font-weight: 600; color: var(--text-muted); } .admin-topbar-links a:not(.app-topbar-logout):hover { color: var(--primary); } /* --- Layout base ------------------------------------------------ */ .page { max-width: 760px; margin: 0 auto; padding: 20px 16px 104px; min-height: 100vh; } .page-narrow { max-width: 420px; padding-top: 56px; } .top-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 13.5px; font-weight: 600; text-decoration: none; margin-bottom: 14px; } .back-link:hover { color: var(--text); text-decoration: none; } .title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin: 0 0 2px; } .title-lg { font-size: 26px; } .subtitle { font-size: 14px; color: var(--text-muted); margin: 0 0 18px; } .eyebrow { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-text); font-weight: 700; margin-bottom: 6px; } /* --- Card --------------------------------------------------------- */ .card { background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; margin-bottom: 14px; border: 1px solid var(--border); } .card-section + .card-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } /* --- Form ------------------------------------------------------- */ .field { margin-bottom: 14px; } .field-label { font-size: 13px; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 5px; } .field-hint { font-size: 12.5px; color: var(--text-faint); margin-top: -10px; margin-bottom: 12px; } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], input[type="time"], select, textarea { font-family: var(--font); font-size: 15.5px; padding: 11px 13px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); width: 100%; transition: border-color 0.12s ease, box-shadow 0.12s ease; } textarea { resize: vertical; min-height: 70px; font-family: var(--font); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } input::placeholder, textarea::placeholder { color: var(--text-faint); } label.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--primary); cursor: pointer; } /* --- Bottoni ------------------------------------------------------ */ button, .btn { font-family: var(--font); font-size: 15px; font-weight: 600; padding: 12px 18px; border-radius: var(--radius-sm); border: none; cursor: pointer; background: var(--primary); color: #fff; transition: background 0.12s ease, transform 0.05s ease, opacity 0.12s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; line-height: 1.2; } button:hover, .btn:hover { background: var(--primary-hover); text-decoration: none; } button:active, .btn:active { transform: scale(0.98); } button:disabled { opacity: 0.6; cursor: not-allowed; } .btn-block { width: 100%; display: flex; } .btn.secondary { background: var(--bg-card); color: var(--text); border: 1.5px solid var(--border-strong); } .btn.secondary:hover { background: var(--neutral-bg); } .btn.ghost { background: transparent; color: var(--primary); padding: 8px 10px; } .btn.ghost:hover { background: var(--primary-light); } .btn.danger { background: var(--danger); } .btn.danger:hover { background: #A32922; } .btn.sm { font-size: 13.5px; padding: 8px 12px; } /* --- Liste / righe -------------------------------------------------- */ .list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } a.list-item { color: inherit; text-decoration: none; } a.list-item:hover { border-color: var(--border-strong); } .list-item-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .item-title { font-weight: 700; font-size: 15.5px; margin-bottom: 2px; } .item-meta { font-size: 13.5px; color: var(--text-muted); } .empty-state { text-align: center; color: var(--text-muted); padding: 36px 16px; font-size: 14.5px; } /* --- Chip / badge --------------------------------------------------- */ .chip { display: inline-flex; align-items: center; background: var(--primary-light); color: var(--primary-text); border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .chip.neutral { background: var(--neutral-bg); color: var(--text-muted); } .chip.success { background: var(--success-bg); color: var(--success); } .chip.warning { background: var(--warning-bg); color: var(--warning); } /* --- Messaggi (flash) ------------------------------------------------ */ .alert { border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; margin-bottom: 14px; border: 1px solid transparent; } .alert.success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); } .alert.error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); } .alert.info { background: var(--primary-light); color: var(--primary-text); border-color: var(--border-strong); } /* --- Griglia moduli cantiere (tile) ----------------------------------- auto-fill: su un telefono restano 2-3 per riga (comode da toccare), su schermi più larghi la griglia aggiunge colonne da sola e occupa tutto lo spazio disponibile, senza bisogno di breakpoint su misura. Le tile non hanno più un aspect-ratio forzato: l'altezza segue il contenuto (icona + etichetta), niente più grandi riquadri vuoti. */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; margin-bottom: 22px; } .tile { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--text); padding: 16px 10px; text-align: center; transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .tile:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); text-decoration: none; } .tile:active { transform: scale(0.97); } .tile .tile-icon-wrap { width: 42px; height: 42px; border-radius: 11px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tile .tile-label { font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--text); } /* --- Schermi larghi (tablet/desktop): tile e colonna più ampie, così l'app non resta una striscia stretta in mezzo a un monitor grande. Il telefono non è toccato da questa media query. --- */ @media (min-width: 860px) { .page { max-width: 900px; } .app-topbar { max-width: 900px; } /* Le pagine strette (login/registrazione, admin, ecc.) non devono allargarsi come il resto dell'app: restano sempre a 420px. */ .page-narrow { max-width: 420px; } .tile-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .tile { padding: 24px 14px; gap: 12px; } .tile .tile-icon-wrap { width: 58px; height: 58px; border-radius: 15px; } .tile .tile-icon-wrap svg { width: 28px; height: 28px; } .tile .tile-label { font-size: 14.5px; } } /* --- Navigazione mobile in basso ---------------------------------------- */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-topbar); backdrop-filter: blur(8px); border-top: 1px solid var(--border); display: flex; justify-content: space-around; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); z-index: 20; } .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); text-decoration: none; padding: 4px 16px; border-radius: var(--radius-sm); } .bottom-nav a.active { color: var(--primary); } .bottom-nav a:hover { text-decoration: none; } /* --- Sfondo foto cantiere (solo pagina di login) ------------------------ */ body.login-bg { background: linear-gradient(180deg, rgba(15, 18, 26, 0.78) 0%, rgba(15, 18, 26, 0.5) 40%, rgba(15, 18, 26, 0.85) 100%), url('../img/login-bg.jpg') center 35% / cover no-repeat; } body.login-bg .title, body.login-bg .subtitle { color: #fff; } body.login-bg .subtitle { color: rgba(255, 255, 255, 0.8); } body.login-bg .brand-mark { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } body.login-bg .card { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } /* --- Link "Admin" in alto a destra sulla pagina di login ---------------- */ .login-admin-link { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 30; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #fff; padding: 7px 12px 7px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(23, 27, 36, 0.45); backdrop-filter: blur(6px); } .login-admin-link:hover { background: rgba(23, 27, 36, 0.65); text-decoration: none; color: #fff; } /* --- Header applicativo (logo + titolo app) ----------------------------- */ .app-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; } .app-brand .brand-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; } /* --- Calendario giornale lavori ----------------------------------------- */ .calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .calendar-head .mese-corrente { font-weight: 700; font-size: 16px; } .calendar-nav-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--neutral-bg); color: var(--text); font-size: 16px; } .calendar-nav-btn:hover { background: var(--border); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .calendar-weekday { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text-faint); padding-bottom: 4px; } .calendar-day { text-decoration: none; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-weight: 600; position: relative; border: 1.5px solid transparent; } .calendar-day:hover { text-decoration: none; background: var(--neutral-bg); } .calendar-day.today { border-color: var(--primary); } .calendar-day .dot { width: 5px; height: 5px; border-radius: 50%; position: absolute; bottom: 5px; } .calendar-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--text-muted); } .calendar-legend .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; } /* --- Foto ---------------------------------------------------------------- */ .photo-item { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .photo-item img, .photo-preview img { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 8px; display: block; background: var(--neutral-bg); } .photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; } .photo-grid img { width: 100%; height: 100px; object-fit: cover; border-radius: var(--radius-sm); } .file-upload-btn { display: block; text-align: center; cursor: pointer; } /* --- Righe ripetibili (annotazioni, presenze, voci sal) ------------------- */ .repeat-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .repeat-row .bullet { font-weight: 700; color: var(--text-faint); } .repeat-item { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } .repeat-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* --- Tabella (usata per elenchi tipo SAL a schermo) ------------------------ */ .simple-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .simple-table th, .simple-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); } .simple-table th { color: var(--text-muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; } /* --- Manuale --------------------------------------------------------------- */ .manuale-sezione p, .manuale-sezione li { font-size: 14.5px; line-height: 1.6; color: var(--text); } /* --- Varie ------------------------------------------------------------------- */ .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .flex-gap { display: flex; gap: 10px; } .flex-1 { flex: 1; } hr.separator { border: none; border-top: 1px solid var(--border); margin: 18px 0; } /* --- Interruttore (usato per il tema scuro in Profilo) --------------------- */ .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .switch-row .switch-label { font-weight: 700; font-size: 14.5px; } .switch-row .switch-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .switch { position: relative; display: inline-block; width: 46px; height: 27px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; cursor: pointer; transition: background 0.15s ease; } .switch .slider::before { content: ""; position: absolute; width: 21px; height: 21px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; box-shadow: var(--shadow-sm); } .switch input:checked + .slider { background: var(--primary); } .switch input:checked + .slider::before { transform: translateX(19px); } .switch input:focus-visible + .slider { outline: 2px solid var(--primary); outline-offset: 2px; } /* Variante compatta, usata nella barra in alto */ .switch.switch-sm { width: 36px; height: 21px; } .switch.switch-sm .slider::before { width: 15px; height: 15px; left: 3px; top: 3px; } .switch.switch-sm input:checked + .slider::before { transform: translateX(15px); }