:root{--blue:#007db5;--blue2:#056da0;--light:#e9f4fb;--grey:#888;--text:#18232f;--danger:#bb1e2d;--ok:#12805c;}
*{box-sizing:border-box}
html{min-height:100%;background:#007db5 url('/static/sfondo.jpg') center center/cover no-repeat fixed;}
body{margin:0;min-height:100vh;font-family:Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.16));overflow-x:hidden;}
.topbar{height:78px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:10px 22px;box-shadow:0 2px 10px #0001;position:sticky;top:0;z-index:10}
.brand img{height:58px}
.topbar nav{display:flex;gap:12px;flex-wrap:wrap}
.topbar a{color:var(--blue);text-decoration:none;font-weight:600}
.container{max-width:1180px;margin:28px auto;padding:0 18px;min-width:0}
.login-card,.card{background:rgba(255,255,255,.93);backdrop-filter:blur(3px);border-radius:18px;padding:22px;box-shadow:0 10px 30px #1b3b5a18;margin-bottom:20px}
.login-card{max-width:420px;margin:60px auto}
.login-card form{display:flex;flex-direction:column;gap:16px}
.login-card .btn{margin-top:8px}
h1{color:var(--blue);margin:0 0 20px}
h2{margin-top:0;color:#445}
.grid{display:grid;gap:16px;min-width:0}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.actions{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:6px}
.tile{background:#fff;border-left:7px solid var(--blue);border-radius:16px;padding:20px;box-shadow:0 8px 22px #1b3b5a15;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:8px;transition:transform .16s ease, box-shadow .16s ease}
.tile:hover{transform:translateY(-2px);box-shadow:0 12px 28px #1b3b5a22}
.tile strong{font-size:1.2rem;color:var(--blue)}
.tile span{color:#667}
label{display:flex;flex-direction:column;gap:6px;font-weight:650;min-width:0}
input,select,textarea{border:1px solid #ccd6df;border-radius:10px;padding:10px 12px;font:inherit;background:#fff;width:100%;max-width:100%;min-width:0}
textarea{min-height:70px;resize:vertical}
select{overflow:hidden;text-overflow:ellipsis}
.btn{border:0;border-radius:12px;background:#d9e4ec;color:#123;padding:10px 16px;text-decoration:none;display:inline-block;cursor:pointer;font-weight:700}
.btn.primary{background:var(--blue);color:#fff}
.btn.small{font-size:.86rem;padding:7px 10px}
.btn.danger{background:#b00020;color:#fff;border-color:#b00020}
.btn.danger:hover{filter:brightness(.95)}
.alert{padding:12px 16px;border-radius:12px;margin-bottom:14px;background:#eef}
.alert.danger{background:#ffe4e4;color:#8a1a1a}
.alert.success{background:#e1f8ef;color:#095b3e}
.alert.warning{background:#fff4d6;color:#71530b}
.table-wrap{overflow:auto;background:rgba(255,255,255,.94);border-radius:14px;box-shadow:0 7px 20px #1b3b5a10;margin-top:8px}
table{border-collapse:collapse;width:100%;background:rgba(255,255,255,.96)}
th,td{padding:10px 12px;border-bottom:1px solid #edf1f5;text-align:left;vertical-align:top}
th{background:var(--light);color:#234}
.badge{border-radius:999px;padding:4px 10px;font-size:.85rem;font-weight:700}
.badge.ok{background:#dcf9ed;color:var(--ok)}
.badge.warn{background:#fff0c2;color:#8a5f00}
.muted,small{color:#667}
.muted{opacity:.8;font-size:.95rem}
.search{display:flex;gap:10px;margin-bottom:18px}
.search input{flex:1}
.section-card h2{background:var(--blue);color:#fff;margin:-22px -22px 18px;padding:14px 22px;border-radius:18px 18px 0 0}
.field-row{display:grid;grid-template-columns:2fr 150px minmax(180px,1fr) 2fr;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid #edf1f5;min-width:0}
.field-label{font-weight:700;padding-top:26px}
.req{color:var(--danger);margin-left:3px}
#signaturePad{width:100%;max-width:700px;height:220px;border:2px dashed #9ab;border-radius:14px;background:#fff;touch-action:none}
.row{display:flex;gap:10px;margin-top:10px}
.sticky-actions{position:sticky;bottom:0;background:rgba(255,255,255,.86);backdrop-filter:blur(4px);padding:14px;border-radius:18px;box-shadow:0 -5px 20px #0001;margin-bottom:20px}
.danger-box{border-left:7px solid var(--danger)}

.offline-banner{display:none;position:sticky;top:0;z-index:99;background:#fff3cd;color:#6b4b00;text-align:center;padding:9px 14px;font-weight:700;box-shadow:0 2px 8px #0002}
.pwa-toast{position:fixed;right:18px;bottom:18px;z-index:100;background:#102a43;color:#fff;padding:14px 18px;border-radius:14px;box-shadow:0 10px 28px #0003;opacity:0;transform:translateY(16px);pointer-events:none;transition:.25s ease;max-width:min(420px,calc(100vw - 36px));font-weight:700}
.pwa-toast.show{opacity:1;transform:translateY(0)}
.pwa-toast.success{background:#12805c}
.pwa-toast.warning{background:#8a5f00}
.pwa-toast.info{background:#102a43}

.inline-form{display:inline-flex;gap:.35rem;align-items:center;margin:.1rem .15rem}
.inline-form input{max-width:180px;padding:.45rem .55rem}
.actions-cell{white-space:nowrap}
.form-actions{display:flex;gap:.5rem;align-items:end;flex-wrap:wrap}

.header-form{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* Admin template editor */
.admin-field-form .full,.template-field-edit .full{grid-column:1/-1}
.template-field-edit{display:grid;grid-template-columns:minmax(260px,2fr) 90px minmax(180px,1fr) minmax(150px,.8fr) minmax(180px,.8fr);gap:12px;align-items:start;padding:16px 0;border-bottom:1px solid #edf1f5}
.template-field-title{grid-column:1/-1;font-weight:800;color:var(--blue)}
.template-field-edit textarea,.admin-field-form textarea{min-height:110px;font-family:inherit}

/* Admin section editor */
.section-edit-form{display:grid;grid-template-columns:minmax(260px,2fr) 90px minmax(260px,1fr);gap:12px;align-items:end;border-bottom:2px solid #dce8f1;padding-bottom:16px;margin-bottom:10px}
.template-section-title{grid-column:1/-1;font-weight:900;color:var(--blue);font-size:1.05rem}

/* Dashboard spacing and polish */
.section-heading{margin-top:34px;margin-bottom:16px}

/* Mobile/layout fixes */
@media(max-width:900px){
  .template-field-edit{grid-template-columns:1fr}
  .admin-field-form .full,.template-field-edit .full{grid-column:auto}
  .container{padding-left:12px;padding-right:12px}
  .card{padding:18px}
  .section-card h2{margin:-18px -18px 16px;padding:12px 18px}
  .sticky-actions .btn{width:100%}
  .section-edit-form{grid-template-columns:1fr}
  .template-section-title{grid-column:auto}
}

@media(max-width:780px){
  .grid.two,.field-row{grid-template-columns:1fr}
  .topbar{height:auto;align-items:flex-start;gap:8px;flex-direction:column}
  .brand img{height:44px}
  .field-label{padding-top:0}
  .section-heading{margin-top:28px}
}

@media(max-width:520px){
  .container{margin:18px auto}
  .header-form{grid-template-columns:1fr}
  .topbar{position:relative}
  .topbar nav{gap:10px}
  .field-row{gap:10px}
  .btn{width:auto}
  .brand img{max-width:260px;width:100%;height:auto}
  .login-card{margin:42px 12px}
}