/* ===== Gestione Barche · pannello admin ===== */
/* L'attributo [hidden] deve sempre nascondere (login/app/editor si mostrano
   togliendo l'attributo; senza questa regola .overlay resterebbe visibile). */
[hidden]{display:none!important}
:root{
  --navy:#0f2740; --navy-2:#16395c; --gold:#c9a24b; --gold-dark:#a8842f;
  --bg:#eef1f5; --card:#ffffff; --border:#dde3ea; --text:#1d2733; --text-light:#6b7785;
  --danger:#c0392b; --ok:#2e7d52; --radius:12px; --shadow:0 8px 30px rgba(15,39,64,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:15px}
h1,h2,h3{font-family:'Playfair Display',serif;margin:0}
.logo-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;background:var(--navy);color:var(--gold);font-weight:700;font-family:'Playfair Display',serif;letter-spacing:.5px;flex:0 0 auto}

/* buttons */
.btn{font:inherit;font-weight:600;border:none;border-radius:8px;padding:10px 18px;cursor:pointer;transition:.15s;line-height:1}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-ghost{background:transparent;color:var(--text-light);border:1px solid var(--border)}
.btn-ghost:hover{background:#fff;color:var(--text)}
.btn-mini{padding:6px 12px;font-size:.82rem;background:var(--off-white,#f1f4f8);color:var(--navy);border:1px solid var(--border)}
.btn-mini:hover{background:#fff}
.btn-danger-ghost{background:transparent;color:var(--danger);border:1px solid #e6c4c0}
.btn-danger-ghost:hover{background:var(--danger);color:#fff}
.btn:disabled{opacity:.55;cursor:default}
.icon-btn{background:none;border:none;font-size:1.7rem;line-height:1;color:var(--text-light);cursor:pointer;padding:0 6px}

/* ===== login ===== */
.login-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(135deg,var(--navy),#08182a)}
.login-card{background:var(--card);width:100%;max-width:380px;padding:38px 34px;border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;text-align:center}
.login-logo{display:flex;justify-content:center;margin-bottom:4px}
.login-logo .logo-icon{width:56px;height:56px;font-size:1.3rem}
.login-card h1{font-size:1.6rem;color:var(--navy)}
.login-sub{margin:-6px 0 10px;color:var(--text-light);font-size:.9rem}
.login-card label,.editor label{display:flex;flex-direction:column;gap:5px;text-align:left;font-size:.82rem;font-weight:600;color:var(--text-light)}
.login-card input,.editor input,.editor select,.editor textarea{
  font:inherit;font-weight:500;color:var(--text);padding:11px 13px;border:1px solid var(--border);border-radius:9px;background:#fbfcfd;width:100%}
.login-card input:focus,.editor input:focus,.editor select:focus,.editor textarea:focus{outline:none;border-color:var(--gold);background:#fff}
.login-card .btn{margin-top:6px}
.login-error,.editor-error{color:var(--danger);font-size:.85rem;margin:4px 0 0}

/* ===== app ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--navy);color:#fff;padding:12px 22px;position:sticky;top:0;z-index:10}
.topbar-brand{display:flex;align-items:center;gap:12px}
.topbar-brand .logo-icon{background:#fff}
.topbar-brand strong{display:block;font-size:.98rem}
.topbar-brand span{display:block;font-size:.78rem;color:#9fb3c8}
.topbar-actions{display:flex;gap:10px}
.topbar .btn-ghost{border-color:#2c486a;color:#cdd8e4}
.topbar .btn-ghost:hover{background:#1b3a5b;color:#fff}

.topnav{display:flex;gap:4px}
.topnav-btn{background:transparent;border:none;color:#9fb3c8;font:inherit;font-weight:600;padding:8px 16px;border-radius:8px;cursor:pointer;transition:.15s}
.topnav-btn:hover{color:#fff;background:#1b3a5b}
.topnav-btn.active{color:#fff;background:#1b3a5b}

.app-main{max-width:1080px;margin:0 auto;padding:26px 22px 60px}
.settings-intro{color:var(--text-light);margin:-6px 0 18px;font-size:.92rem}
.settings-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;display:flex;flex-direction:column;gap:16px;max-width:760px;box-shadow:var(--shadow)}
.settings-form label{display:flex;flex-direction:column;gap:5px;text-align:left;font-size:.82rem;font-weight:600;color:var(--text-light)}
.settings-form input{font:inherit;font-weight:500;color:var(--text);padding:11px 13px;border:1px solid var(--border);border-radius:9px;background:#fbfcfd}
.settings-form input:focus{outline:none;border-color:var(--gold);background:#fff}
.settings-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.settings-hint{color:var(--text-light);font-size:.8rem}
.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.list-toolbar h2{color:var(--navy);font-size:1.4rem}
.count{font-family:'Inter';font-size:.85rem;color:var(--text-light);font-weight:500}
#search{font:inherit;padding:9px 14px;border:1px solid var(--border);border-radius:8px;min-width:220px;background:#fff}

.boat-list{display:flex;flex-direction:column;gap:10px}
.boat-row{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;transition:.15s}
.boat-row:hover{box-shadow:var(--shadow);border-color:#cdd6e0}
.boat-row .thumb{width:84px;height:60px;border-radius:8px;object-fit:cover;background:#dde3ea;flex:0 0 auto}
.boat-row .meta{flex:1;min-width:0}
.boat-row .meta b{display:block;font-size:1rem;color:var(--navy)}
.boat-row .meta small{color:var(--text-light)}
.boat-row .badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.pill{font-size:.7rem;font-weight:600;padding:2px 9px;border-radius:50px;background:#eef2f7;color:var(--text-light)}
.pill.brand{background:#e9eef7;color:var(--navy)}
.pill.tag{background:#f6efdc;color:var(--gold-dark)}
.pill.hidden{background:#fbe9e7;color:var(--danger)}
.boat-row .row-actions{display:flex;gap:8px;flex:0 0 auto}
.list-empty{text-align:center;color:var(--text-light);padding:50px 0}

/* ===== editor overlay ===== */
.overlay{position:fixed;inset:0;background:rgba(10,24,40,.55);display:flex;align-items:flex-start;justify-content:center;padding:30px 16px;overflow-y:auto;z-index:50}
.editor{background:var(--card);width:100%;max-width:720px;border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:calc(100vh - 60px)}
.editor-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border)}
.editor-head h3{color:var(--navy);font-size:1.3rem}
.editor-body{padding:20px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.field-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.field-row .grow{flex:1;min-width:200px}
.field-row label:not(.check){flex:1;min-width:150px}
label.check{flex-direction:row;align-items:center;gap:8px;font-size:.85rem;color:var(--text);font-weight:500;white-space:nowrap}
label.check input{width:auto}
.editor textarea{resize:vertical;font-weight:500}

.specs{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px 16px;margin:0}
.specs legend{font-size:.8rem;font-weight:700;color:var(--navy);padding:0 6px}
.specs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.extra-block{margin-top:14px;border-top:1px dashed var(--border);padding-top:12px}
.extra-head{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:600;color:var(--text-light);margin-bottom:8px}
.extra-list{display:flex;flex-direction:column;gap:8px}
.extra-item{display:flex;gap:8px;align-items:center}
.extra-item input{flex:1}
.extra-item .icon-btn{font-size:1.3rem}

.photos-block{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.photos-head{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;font-weight:600;margin-bottom:12px}
.photos-head small{font-weight:400;color:var(--text-light)}
.upload-btn{cursor:pointer}
.photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.photo{position:relative;border-radius:9px;overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;background:#dde3ea;cursor:grab}
.photo.dragging{opacity:.4}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .cover-flag{position:absolute;top:5px;left:5px;background:var(--gold);color:#fff;font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:50px}
.photo .rm{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(10,24,40,.75);color:#fff;font-size:.95rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.photo .rm:hover{background:var(--danger)}
.photos-empty{grid-column:1/-1;color:var(--text-light);font-size:.85rem;text-align:center;padding:18px 0}

.editor-foot{display:flex;align-items:center;gap:12px;padding:16px 24px;border-top:1px solid var(--border)}
.editor-foot .spacer{flex:1}
.editor-error{padding:0 24px 16px}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 22px;border-radius:50px;box-shadow:var(--shadow);font-weight:600;font-size:.9rem;z-index:100}
.toast.error{background:var(--danger)}
.toast.ok{background:var(--ok)}

/* messaggi */
.nav-badge{display:inline-block;min-width:18px;height:18px;line-height:18px;padding:0 5px;margin-left:7px;background:var(--danger);color:#fff;border-radius:9px;font-size:.72rem;font-weight:700;text-align:center;vertical-align:middle}
.msg-list{display:flex;flex-direction:column;gap:12px}
.msg-row{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.msg-row.unread{border-left:4px solid var(--gold)}
.msg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.msg-head b{font-size:1.02rem;color:var(--navy)}
.msg-date{margin-left:auto;font-size:.8rem;color:var(--text-light)}
.msg-contacts{font-size:.85rem;margin-bottom:10px}
.msg-contacts a{color:var(--gold-dark);text-decoration:none}
.msg-contacts a:hover{text-decoration:underline}
.msg-body{white-space:pre-wrap;color:var(--text);font-size:.92rem;line-height:1.55;margin:0 0 12px;background:var(--bg);border-radius:8px;padding:10px 12px}
.pill.new{background:#fdf3d9;color:var(--gold-dark)}
.btn-mini.danger{color:var(--danger);border-color:#e7c3bd}
.btn-mini.danger:hover{background:var(--danger);color:#fff}

@media(max-width:600px){
  .specs-grid{grid-template-columns:repeat(2,1fr)}
  .topbar-brand span{display:none}
  .boat-row .thumb{width:64px;height:46px}
}