:root { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #203633; background: #f4f7f5; font-synthesis: none; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { margin:0; min-width: 320px; }
button,input,select,textarea {font:inherit}
button {cursor:pointer}
button:disabled { opacity: .55; cursor:not-allowed; }
a {color:inherit}
#app { min-height:100dvh; }
:focus-visible { outline:3px solid #e8b56b; outline-offset:2px; }
.shell { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100dvh; }
.sidebar {background:#fff; border-right:1px solid #e4eae6; padding:28px 16px 22px; display:flex; flex-direction:column; gap:28px; position:sticky; top:0; height:100dvh;}
.brand {display:flex; align-items:center; gap:12px; padding:0 12px;}
.brand-mark {width:43px;height:43px;background:#0c514c; color:#fff; border-radius:15px; display:grid;place-items:center;font-size:22px;font-weight:800;letter-spacing:-1px;}
.brand b {font-size:17px; letter-spacing:-.4px;line-height:1.05;display:block;}
.brand span {color:#81928b;font-size:11px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;}
.nav {display:flex;flex-direction:column;gap:8px; flex:1;}
.nav-button {width:100%;height:46px;border:0;border-radius:13px; background:transparent; color:#63746e;display:flex;align-items:center;gap:14px;padding:0 14px;font-weight:650;text-align:left;}
.nav-button:hover {background:#f2f7f4}
.nav-button.active {background:#e5f1eb;color:#0c514c;}
.nav-glyph {font-size:19px;min-width:24px;text-align:center;font-weight:400;}
.profile-box {padding:13px 11px;background:#f2f5f3;border-radius:15px;display:flex;gap:11px;align-items:center;}
.avatar {width:35px;height:35px;border-radius:12px;background:#cfe7d9;color:#13574a;font-size:15px;display:grid;place-items:center;font-weight:800;flex-shrink:0;}
.profile-box strong {font-size:13px;display:block;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-box small {font-size:11px;color:#81928b;}
.content {padding:40px 42px 54px;max-width:1380px;width:100%;margin:0 auto;}
.page-head {display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:28px;}
.eyebrow {color:#428779;font-size:12px;text-transform:uppercase;letter-spacing:1.4px;font-weight:750;margin:0 0 6px;}
h1 {font-size:clamp(26px,3vw,35px);font-weight:760;letter-spacing:-1.4px;margin:0 0 7px;color:#173e36;}
h2 {font-size:18px;letter-spacing:-.5px;margin:0;color:#1c3c35;}
h3 {font-size:15px;margin:0;color:#223d37;}
p {line-height:1.55;}
.muted {color:#7e9089;font-size:13px}
.small {font-size:12px}
.badge {display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#e6f2eb;color:#1f715a;white-space:nowrap}
.badge.amber {background:#fff0d8;color:#936515}
.badge.gray {background:#eef1ef;color:#6f7a74}
.card {background:white;border:1px solid #e4eae6;border-radius:21px;box-shadow:0 5px 20px rgba(9,59,42,.024);padding:25px;}
.card + .card {margin-top:18px}
.demo-banner {background:#fff0d9;border:1px solid #f4d79b;color:#856120;border-radius:14px;padding:12px 15px;display:flex;gap:8px;align-items:start;font-size:13px;margin-bottom:21px;}
.header-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.button {display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:13px;font-weight:700;font-size:13px;transition:background .15s,transform .15s;text-decoration:none;white-space:nowrap}
.button:active {transform:scale(.98)}
.button.primary {background:#0c514c;color:#fff;}
.button.primary:hover {background:#12675d}
.button.secondary {background:#fff;color:#25594d;border-color:#d9e5dd;}
.button.secondary:hover {background:#f0f7f3}
.button.danger {background:#fff1ef;color:#a33530;border:1px solid #f3d5d1}
.button.soft {background:#e4f0e9;color:#17604f;}
.button.full {width:100%}
.button.tiny {min-height:32px;border-radius:9px;padding:6px 10px;font-size:12px}
.label {display:block;font-size:12px;font-weight:740;color:#567067;margin-bottom:8px;}
.input,.select,.textarea {width:100%;min-width:0;background:#fff;border:1px solid #dce5df;border-radius:12px;color:#213b33;padding:12px 14px;outline:none;font-size:15px;transition:border-color .15s,box-shadow .15s;}
.input:focus,.select:focus,.textarea:focus {border-color:#579d8b;box-shadow:0 0 0 3px #e1f2eb;}
.input::placeholder,.textarea::placeholder {color:#abbab3}
.input.big {font-size:27px;font-weight:730;letter-spacing:-.7px;}
.form-grid {display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-field {min-width:0}
.form-field.wide {grid-column:1/-1}
.form-hint {font-size:11px;color:#8c9d96;margin-top:7px;}
.form-card {max-width:730px;}
.form-card .card-head {margin-bottom:25px}
.kpi-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:20px;}
.kpi {padding:20px 22px;display:flex;flex-direction:column;gap:8px;position:relative;min-height:132px;}
.kpi .kpi-top {display:flex;justify-content:space-between;align-items:center;color:#748c82;font-size:12px;font-weight:660;}
.kpi .kpi-icon {width:34px;height:34px;border-radius:11px;background:#edf6f0;display:grid;place-items:center;font-size:18px;color:#296b54;}
.kpi strong {font-size:clamp(23px,2.6vw,32px);letter-spacing:-1px;color:#183e34;}
.kpi small {color:#8b9b94;font-size:12px;}
.layout-two {display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-bottom:20px;}
.card-head {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px;}
.progress-row {display:grid;grid-template-columns:115px 1fr 85px;align-items:center;gap:12px;margin:12px 0;}
.progress-row .name {color:#667a71;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.progress-row strong {font-size:12px;text-align:right;white-space:nowrap;}
.track {height:9px;background:#eef3ef;border-radius:99px;overflow:hidden;}
.fill {height:100%;border-radius:99px;background:#4d9a81;}
.bar-stack {display:flex;align-items:end;height:180px;gap:13px;padding-top:12px;}
.bar-col {display:flex;flex-direction:column;align-items:center;justify-content:end;gap:9px;flex:1;min-width:0;height:100%;}
.bar {background:linear-gradient(180deg,#4eaa8c,#c8e5d2);width:min(100%,48px);border-radius:9px 9px 4px 4px;min-height:4px;}
.bar-col small {font-size:10px;color:#8a9a93;white-space:nowrap;}
.table-wrap {overflow:auto;border:1px solid #ebefeb;border-radius:13px;}
.data-table {width:100%;border-collapse:collapse;text-align:left;font-size:13px;}
.data-table th {padding:13px 16px;background:#f8faf8;color:#84958c;font-size:11px;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;}
.data-table td {padding:13px 16px;border-top:1px solid #eef1ef;vertical-align:middle;}
.data-table td strong {color:#26443b;}
.data-table tr:hover td {background:#fdfefd}
.data-table .right {text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table .voided {text-decoration:line-through;color:#abb9b1;}
.filters {display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end;margin-bottom:18px;}
.filters .label {margin-bottom:5px}
.filters .select,.filters .input {font-size:13px;padding:10px 11px;}
.history-list {display:flex;flex-direction:column;gap:0;}
.history-item {display:flex;align-items:center;gap:14px;border-bottom:1px solid #f0f3f0;padding:17px 0;}
.history-item:last-child {border-bottom:0}
.category-icon {width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:#eff6f1;color:#4f8d75;font-size:20px;flex-shrink:0;}
.history-meta {flex:1;min-width:0;}
.history-meta strong {font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-meta small {display:block;font-size:12px;color:#8b9a93;margin-top:5px;}
.history-amount {font-size:15px;font-weight:750;color:#2b5648;font-variant-numeric:tabular-nums;white-space:nowrap;}
.history-actions {display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:7px;flex-shrink:0;}
.history-actions .button {min-height:30px;}
.history-total {background:#e9f3ed;border-radius:15px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px;}
.history-total b {font-size:22px;color:#125347;}
.empty {padding:38px 16px;text-align:center;color:#82968a;}
.empty .emoji {font-size:36px;display:block;margin-bottom:10px;}
.empty strong {display:block;color:#355b4a;margin-bottom:7px;}
.toast {position:fixed;bottom:25px;right:25px;max-width:420px;background:#164c42;color:#fff;box-shadow:0 16px 40px #102a2240;border-radius:15px;padding:14px 17px;z-index:30;font-size:14px;animation:slide .17s ease-out;}
.toast.error {background:#953f35;}
@keyframes slide {from {opacity:.5;transform:translateY(7px)}to {opacity:1;transform:translateY(0)}}
.full-screen {min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 15% 10%,#dceee1,transparent 37%),#f4f7f5;}
.auth-card {width:min(100%,475px);border:1px solid #e2e9e3;border-radius:26px;background:#fff;box-shadow:0 24px 70px #1e533016;padding:35px;}
.auth-card .brand {padding:0;margin-bottom:31px}
.auth-card h1 {font-size:29px}
.auth-card p {font-size:14px;color:#70837b;margin:0 0 26px}
.auth-card form {display:flex;flex-direction:column;gap:15px;}
.auth-card .button {margin-top:7px;}
.auth-footer {margin-top:22px;padding-top:18px;border-top:1px solid #e9eeeb;display:flex;align-items:center;justify-content:center;gap:10px;color:#7d8e86;font-size:12px;}
.auth-link {background:none;border:none;padding:0;color:#246c59;text-decoration:underline;font-size:12px;font-weight:690;}
.demo-choices {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 12px;}
.demo-choices button {padding:22px 12px;border-radius:14px;border:1px solid #d9e8df;background:#f8fbf9;font-weight:700;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;color:#23604e;}
.demo-choices button:hover {border-color:#4e9c7e;background:#eff8f2}
.demo-choices span {font-size:29px}
.notice {padding:14px 16px;border-radius:13px;background:#f3f7f4;border:1px solid #e0e9e2;color:#5b7768;font-size:13px;line-height:1.55;}
.notice.warn {background:#fff7e8;border-color:#f2e1bd;color:#88682f}
.notice strong {color:#375f4e}
.dialog-backdrop {position:fixed;inset:0;background:#0c2924a6;z-index:40;display:flex;align-items:center;justify-content:center;padding:18px;}
.dialog {width:min(100%,510px);max-height:90dvh;overflow:auto;background:#fff;border-radius:21px;padding:27px;box-shadow:0 25px 90px #10251a44;}
.dialog-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:10px;}
.close {border:0;background:#f2f5f2;border-radius:10px;width:34px;height:34px;font-size:20px;color:#60776a;}
.dialog form {display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.dialog .wide {grid-column:1/-1}
.dialog .footer-buttons {grid-column:1/-1;display:flex;justify-content:end;gap:10px;margin-top:12px;flex-wrap:wrap;}
.settings-section {max-width:790px;margin-bottom:18px;}
.settings-section p {color:#6f8178;font-size:14px}
.member-row {display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #eef1ee;padding:12px 0;}
.member-row:last-child {border:0}
.member-row .person {display:flex;align-items:center;gap:12px;}
.member-row .member-name {font-size:13px;font-weight:680}
.member-row .member-role {font-size:11px;color:#8b9c93;margin-top:4px}
.qr {width:170px;height:170px;max-width:100%;object-fit:contain;display:block;margin:15px auto;}
.code-label {font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all;background:#eff5f0;padding:12px;border-radius:10px;text-align:center;}
.loading {min-height:100dvh;display:grid;place-items:center;text-align:center;color:#547266;font-weight:650;}
.loading span {font-size:34px;display:block;animation:pulse 1.5s infinite}
@keyframes pulse {50%{opacity:.4}}
@media (max-width:1000px) {.content {padding:29px 23px;} .layout-two {grid-template-columns:1fr;} .filters {grid-template-columns:1fr 1fr;}.kpi {padding:18px}}
@media (max-width:700px) {
  .shell {display:block;padding-bottom:71px;}
  .sidebar {position:fixed;top:auto;bottom:0;left:0;right:0;height:calc(68px + env(safe-area-inset-bottom));padding:5px 8px env(safe-area-inset-bottom);z-index:20;box-shadow:0 -4px 24px #1e533010;border-right:0;border-top:1px solid #e4eae6;flex-direction:row;align-items:center;gap:0;}
  .sidebar>.brand,.sidebar>.profile-box {display:none;}
  .nav {flex-direction:row;align-items:stretch;justify-content:space-around;width:100%;gap:2px;}
  .nav-button {height:58px;width:auto;min-width:0;flex:1;border-radius:11px;padding:5px 2px;display:flex;flex-direction:column;gap:2px;justify-content:center;align-items:center;text-align:center;font-size:10px;white-space:nowrap;}
  .nav-glyph {font-size:20px;min-width:unset;}
  .content {padding:24px 15px 37px;}
  .page-head {margin-bottom:22px;align-items:center;}
  .page-head h1 {font-size:27px;}
  .card {padding:19px;border-radius:17px;}
  .form-card {max-width:none;}
  .form-grid {gap:15px;}
  .kpi-grid {grid-template-columns:1fr 1fr;gap:9px;}
  .kpi:last-child {grid-column:1/-1;}
  .kpi {min-height:117px;padding:15px;}
  .kpi strong {font-size:25px;}
  .filters {gap:9px;}
  .filters .button {width:100%;}
  .data-table th,.data-table td {padding:11px;}
  .hide-mobile {display:none}
  .toast {left:15px;right:15px;bottom:84px;max-width:unset}
}
@media (max-width:430px) {.page-head {align-items:flex-start;}.header-actions .button {padding:8px 10px;font-size:12px}.form-grid {grid-template-columns:1fr}.progress-row {grid-template-columns:93px 1fr 70px;gap:8px}.auth-card {padding:25px}.dialog {padding:21px}}

/* Pagina amministratore = browser desktop, nessuna installazione PWA. */
.admin-portal .content {max-width:1520px;padding:48px 52px 70px;}
.admin-portal .sidebar {width:264px;}
.admin-portal .shell {grid-template-columns:264px minmax(0,1fr);}
.admin-portal .kpi-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:900px) {
  .admin-portal .shell {grid-template-columns:220px minmax(0,1fr);display:grid;padding-bottom:0;}
  .admin-portal .sidebar {position:sticky;top:0;bottom:auto;height:100dvh;width:220px;padding:24px 12px;display:flex;flex-direction:column;border-right:1px solid #e4eae6;border-top:0;box-shadow:none;}
  .admin-portal .sidebar>.brand,.admin-portal .sidebar>.profile-box {display:flex;}
  .admin-portal .nav {flex-direction:column;justify-content:flex-start;gap:7px;}
  .admin-portal .nav-button {flex:none;width:100%;height:46px;flex-direction:row;justify-content:start;gap:12px;padding:0 12px;font-size:13px;white-space:normal;}
  .admin-portal .content {padding:28px 22px;}
}
@media (max-width:580px) {
  .admin-portal .shell {grid-template-columns:1fr;}
  .admin-portal .sidebar {position:static;height:auto;width:100%;padding:14px;}
  .admin-portal .sidebar>.profile-box {display:none;}
  .admin-portal .nav {display:flex;flex-direction:row;flex-wrap:wrap;}
  .admin-portal .nav-button {width:auto;font-size:12px;}
  .admin-portal .content {padding:18px 12px;}
  .admin-portal .kpi-grid {grid-template-columns:1fr;}
  .admin-portal .kpi:last-child {grid-column:auto;}
}
