/* ================== Admin shell (layout + primitives) ================== */
*{box-sizing:border-box} html,body{height:100%}
:root{
  --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --brand:#4f46e5; --bg:#fcfcff;
  --surface:#fff; --radius:10px; --gap:1rem;
}
body{margin:0;background:#fff;color:var(--ink);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}

.admin{min-height:100vh;display:grid;grid-template-columns:240px 1fr}
.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:1rem}
.header{background:var(--surface);border-bottom:1px solid var(--line);padding:.75rem 1rem;position:sticky;top:0;z-index:10}
.main{padding:1.25rem}

.container{max-width:1200px;margin:auto}
.row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}

label{display:block;font-weight:600;margin:.5rem 0 .35rem}
input,select,textarea{width:100%;padding:.55rem .7rem;border:1px solid #d0d7de;border-radius:8px;font:inherit;background:#fff}
textarea{min-height:110px}

/* Buttons */
.btn{display:inline-block;padding:.45rem .75rem;border-radius:8px;text-decoration:none;border:0;cursor:pointer;font:inherit}
.btn-primary{background:#fff;color:var(--brand-700);border:1px solid var(--brand-600)}
.btn-secondary{background:#e5e7eb;color:#111827}
.btn-danger{background:#ef4444;color:#fff}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:.6rem .75rem;border-bottom:1px solid var(--line);text-align:left}
.table thead th{font-weight:700;background:#fafafa}

/* Utilities */
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}
.text-right{text-align:right}.text-center{text-align:center}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:1rem}
.nowrap{white-space:nowrap}
.muted{color:var(--muted)}

/* ================== Reference UI (lists, badges, progress) ================== */
.badge{display:inline-block;font-size:.8rem;padding:.15rem .5rem;border-radius:999px}
.badge-pending{background:#fef3c7;color:#92400e}
.badge-overdue{background:#fde68a;color:#92400e}
.badge-submitted{background:#ecfdf5;color:#065f46}
.badge-expired{background:#fee2e2;color:#991b1b}
.badge-cancelled{background:#e5e7eb;color:#374151}

.link-cell{display:flex;align-items:center;gap:.5rem}
.link-pill{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .5rem;border:1px solid var(--line);border-radius:6px;background:#fafafa}
.copy{padding:.35rem .6rem;border-radius:6px;background:#eef2ff;color:#3730a3;border:0;cursor:pointer}

.actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.progress-wrap{min-width:220px}
.bar{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.bar > span{display:block;height:100%;background:var(--brand);width:0}
.bar-text{display:flex;justify-content:space-between;font-size:.85rem;margin-top:.25rem}

.cluster-card{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;background:var(--bg)}
.cluster-head{display:grid;grid-template-columns:1.2fr 1.2fr .9fr .9fr 1.6fr;gap:14px;align-items:start}
.head-cell .label{font-size:.8rem;color:var(--muted);margin-bottom:4px}
.divider{height:1px;background:var(--line);margin:12px 0}

.children-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.child-card{grid-column:span 12;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px}
@media(min-width:700px){ .child-card{grid-column:span 6} }
@media(min-width:1024px){ .child-card{grid-column:span 4} }
.child-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.child-tag{font-size:.75rem;border:1px solid var(--line);padding:.05rem .45rem;border-radius:999px;color:#334155;background:#f8fafc;text-transform:capitalize}
.mini{font-size:.86rem}

/* ===== Mobile responsiveness tweaks ===== */

/* Collapse 2-col admin grid on small screens, make sidebar off-canvas */
@media (max-width: 1024px){
  .admin{grid-template-columns:1fr}
  .sidebar{
    position:fixed; inset:0 auto 0 0; width:260px; max-width:86vw;
    transform:translateX(-100%); transition:transform .22s ease;
    z-index:1000; background:var(--surface);
  }
  body.sidebar-open .sidebar{ transform:translateX(0); }
  /* dim background when sidebar open */
  body.sidebar-open::after{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:900;
  }
  /* give main area full width */
  .header,.main{padding-left:1rem; padding-right:1rem;}
}

/* Small header: show hamburger only on small screens */
.hub-burger{display:none}
@media (max-width:1024px){ .hub-burger{display:inline-flex; align-items:center; gap:.4rem} }

/* Tables: enable horizontal scroll */
.table-responsive{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* “Row” stacks vertically on narrow screens */
@media (max-width:700px){
  .row{flex-direction:column; align-items:stretch}
  .actions{justify-content:flex-start}
  input[type="search"], select{width:100%}
}

/* Reference grid: collapse progressively */
@media (max-width:1100px){
  .cluster-head{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .cluster-head{grid-template-columns:1fr; gap:10px}
  .progress-wrap{min-width:0}
  .link-pill{max-width:100%}
}

/* Progress bar shouldn't overflow */
.progress-wrap{min-width:180px; max-width:100%}

/* Buttons wrap nicely */
.actions .btn{white-space:nowrap}


/* ===== Admin × ApartmentWharf Purple (override) ===== */
:root{
  /* Brand & neutrals */
  --brand-500:#915e91;
  --brand-600:#7a297a;
  --brand-700:#5e1f5e;
  --ink:#666;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#f7f7fb;
  --surface:#ffffff;
  --radius:14px;
  --shadow:0 10px 24px rgba(17,24,39,.08);
  --shadow-sm:0 6px 16px rgba(17,24,39,.06);
}

/* Struttura */
body{ background:var(--bg); color:var(--ink) }
.sidebar{
  background:var(--surface);
  border-right:1px solid #eef0f4;
  box-shadow:var(--shadow-sm);
}
.header{
  background:var(--surface);
  border-bottom:1px solid #eef0f4;
}
.card{
  background:var(--surface);
  border:1px solid #eef0f4;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Tipografia */
h1,h2{margin:0 0 .75rem}
h1{font-size:1.7rem;font-weight:800;letter-spacing:-.015em}
h2.section-title{
  font-size:1.15rem;font-weight:700;margin:1.4rem 0 .6rem;
  padding:.35rem .75rem;border-radius:999px;display:inline-block;
  background:rgba(122,41,122,.10); color:var(--brand-700);
}

/* Campi */
input,select,textarea{
  font:inherit; font-size:16px;
  padding:.7rem .85rem;
  border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
textarea{min-height:120px}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--brand-600);
  box-shadow:0 0 0 4px rgba(122,41,122,.12);
}
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:.7rem 2.2rem .7rem .85rem;
  background-color:#fff;
  background-image:url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237a297a'>\
      <path d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.06l3.71-2.83a.75.75 0 1 1 .92 1.18l-4.2 3.2a.75.75 0 0 1-.92 0l-4.2-3.2a.75.75 0 0 1 .02-1.2z'/>\
    </svg>");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:18px 18px;
}
input[type="checkbox"],input[type="radio"]{ accent-color:var(--brand-600) }

/* File input “nice” */
input[type="file"]{
  width:100%; padding:.65rem .8rem; border:1px solid var(--line); border-radius:10px; background:#fff;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{
  margin-right:.8rem;padding:.55rem .9rem;border:0;border-radius:999px;
  background:var(--brand-600);color:#fff;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:background .15s, transform .06s;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover{ background:var(--brand-500) }
input[type="file"]::file-selector-button:active,
input[type="file"]::-webkit-file-upload-button:active{ background:var(--brand-700); transform:translateY(1px) }

/* Bottoni */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1rem;border-radius:999px;border:0;cursor:pointer;
  font-weight:700;letter-spacing:.01em;
  transition:transform .06s ease, box-shadow .15s, background .15s, border-color .15s;
  box-shadow:var(--shadow-sm); text-align:center;
}
.btn:active{ transform:translateY(1px) }
/* PRIMARY: bianco + testo viola */
.btn-primary{ background:#fff; color:var(--brand-700); border:1px solid var(--brand-600) }
.btn-primary:hover{ background:#faf7ff; border-color:var(--brand-500) }
.btn-primary:active{ background:#f3ecff; border-color:var(--brand-700) }
.btn-secondary{ background:#f3f4f6; color:var(--ink); border:1px solid #eceff3 }
.btn-secondary:hover{ background:#eef1f6 }
.btn-ghost{ background:transparent; color:var(--brand-700) }
.btn-ghost:hover{ background:rgba(122,41,122,.08) }
.btn-danger{ background:#fee2e2; color:#b91c1c; border:1px solid #fecaca }

/* Badge & progress */
.badge{display:inline-block;font-size:.8rem;padding:.15rem .5rem;border-radius:999px}
.badge-pending{ background:#faf7ff; color:var(--brand-700); border:1px solid rgba(122,41,122,.25) }
.badge-overdue{ background:#fde68a; color:#92400e }
.badge-submitted{ background:#ecfdf5; color:#065f46 }
.badge-expired{ background:#fee2e2; color:#991b1b }
.badge-cancelled{ background:#f3f4f6; color:#374151 }
.bar{ background:#e9e5ff }
.bar > span{ background:var(--brand-600) }

/* Tabelle */
.table thead th{ background:#fafaff }
.link-pill{
  background:#faf7ff; border:1px solid rgba(122,41,122,.25);
  color:var(--brand-700);
}
.copy{ background:#f3ecff; color:var(--brand-700); border:1px solid rgba(122,41,122,.25) }

/* Sidebar nav (se hai link/menu) */
.sidebar nav a{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .7rem; border-radius:10px; color:#374151; text-decoration:none;
}
.sidebar nav a:hover{ background:rgba(122,41,122,.06) }
.sidebar nav a.is-active{
  background:rgba(122,41,122,.10); color:var(--brand-700);
  border:1px solid rgba(122,41,122,.20);
}

/* Cluster cards & children */
.cluster-card{ background:var(--bg); border:1px solid #eef0f4; border-radius:14px; box-shadow:var(--shadow-sm) }
.child-tag{
  font-size:.75rem;border:1px solid rgba(122,41,122,.25);
  color:var(--brand-700); background:#faf7ff;
  border-radius:999px; padding:.05rem .45rem; text-transform:capitalize;
}

/* Mobile */
.hub-burger{ display:none }
@media (max-width:1024px){ .hub-burger{ display:inline-flex; align-items:center; gap:.4rem } }

/* ===== Extra “public look” ===== */

/* 1) Header con gradiente leggerissimo */
.header{
  background:
    linear-gradient(180deg, rgba(122,41,122,.06), transparent 58%),
    var(--surface);
  border-bottom:1px solid #eef0f4;
}

/* 2) Hero badge identica al pubblico */
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid #eef0f4;border-radius:999px;
  box-shadow:var(--shadow);
  padding:.6rem 1rem;font-weight:800;color:var(--brand-700);
}

/* 3) File pill (anteprima file/allegati) */
.file-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#faf7ff;border:1px solid rgba(122,41,122,.25);
  color:var(--brand-700); padding:.4rem .6rem;border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.file-pill a{ color:inherit; text-decoration:underline }

/* 4) Stati tabella (hover / selected) */
.table tbody tr:hover{
  background:rgba(122,41,122,.05);
}
.table tbody tr.is-selected{
  background:rgba(122,41,122,.10);
  outline:2px solid rgba(122,41,122,.18);
  outline-offset:-2px;
}
.table .action-cell .btn{
  opacity:.95; transition:opacity .12s ease;
}
.table tbody tr:hover .action-cell .btn{ opacity:1 }

/* 5) Hamburger / toggler con focus ring brand */
.hub-burger{
  border:1px solid #eceff3; border-radius:10px; padding:.4rem .6rem;
  background:#fff; box-shadow:var(--shadow-sm);
}
.hub-burger:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(122,41,122,.14);
}

/* 6) Link/menu sidebar: stato attivo + hover coerenti (se non già presenti) */
.sidebar nav a{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .7rem;border-radius:10px;color:#374151;text-decoration:none;
}
.sidebar nav a:hover{ background:rgba(122,41,122,.06) }
.sidebar nav a.is-active{
  background:rgba(122,41,122,.10); color:var(--brand-700);
  border:1px solid rgba(122,41,122,.20);
}

/* 7) Pulsanti chip (per azioni piccole vicino ai file) */
.btn-chip{
  padding:.35rem .6rem;border-radius:999px;font-weight:700;
  background:#f3ecff;color:var(--brand-700);
  border:1px solid rgba(122,41,122,.25);
}

/* 8) Focus di input coerente (se ti serve ripeterlo per specificità) */
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-600);
  box-shadow:0 0 0 4px rgba(122,41,122,.12);
}

/* 9) Micro-transizioni su bottoni per feel “app” */
.btn{ transition:transform .06s ease, box-shadow .15s, background .15s, border-color .15s }
.btn:active{ transform:translateY(1px) }
/* (ribadisco lo stato del primary bianco anche qui per evitare override altrove) */
.btn-primary{ background:#fff; color:var(--brand-700); border:1px solid var(--brand-600) }
.btn-primary:hover{ background:#faf7ff; border-color:var(--brand-500) }
.btn-primary:active{ background:#f3ecff; border-color:var(--brand-700) }

/* 10) Card/cluster coerenti */
.cluster-card{
  background:var(--bg); border:1px solid #eef0f4; border-radius:14px;
  box-shadow:var(--shadow-sm);
}
.child-tag{
  font-size:.75rem;border:1px solid rgba(122,41,122,.25);
  color:var(--brand-700); background:#faf7ff;
  border-radius:999px; padding:.05rem .45rem; text-transform:capitalize;
}

/* 11) Copia link/pill & progress in tinta */
.link-pill{
  background:#faf7ff; border:1px solid rgba(122,41,122,.25);
  color:var(--brand-700);
}
.copy{ background:#f3ecff; color:var(--brand-700); border:1px solid rgba(122,41,122,.25) }
.bar{ background:#e9e5ff }
.bar > span{ background:var(--brand-600) }

/* Ombre profonde in stile “public” */
:root{
  --shadow-deep: 0 14px 36px rgba(17,24,39,.18), 0 3px 10px rgba(17,24,39,.10);
  --shadow-deeper: 0 22px 60px rgba(17,24,39,.22), 0 6px 18px rgba(17,24,39,.12);
  --edge:#e7e9f2; /* bordo chiaro coerente */
}

/* Usa questa classe sul contenitore che hai cerchiato (il “main box”) */
.main-box{
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:18px;
  box-shadow:var(--shadow-deeper);
  padding:18px;
}

/* Card e cluster più “solide” ovunque */
.card,
.cluster-card{
  border:1px solid var(--edge);
  box-shadow:var(--shadow-deep);
}

/* Variante ancora più marcata, applicabile ad hoc */
.shadow-xl{ box-shadow:var(--shadow-deeper) !important }

/* Effetto elevazione al passaggio (facoltativo) */
.card:hover,
.cluster-card:hover,
.main-box:hover{
  box-shadow:0 28px 70px rgba(17,24,39,.24), 0 8px 24px rgba(17,24,39,.14);
  transition:box-shadow .18s ease;
}

.cluster-head > .head-cell:first-child .label{
  font-size:1.05rem;
  font-weight:800;
  color:var(--brand-700);
}

/* ==== THEME ROOTS ==== */
:root,[data-theme="light"]{
  color-scheme: light;
}

/* ==== DARK THEME TOKENS ==== */
[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0f1117;               /* page */
  --surface:#151923;          /* cards/panels */
  --ink:#e5e7eb;              /* testo principale */
  --muted:#9aa4b2;
  --line:#23283a;             /* bordi tenui */
  /* brand: stesso viola, leggermente +luminoso su sfondi scuri */
  --brand-500:#a36aa3;
  --brand-600:#8a338a;
  --brand-700:#6b276b;

  --shadow:0 12px 28px rgba(0,0,0,.35);
  --shadow-sm:0 6px 16px rgba(0,0,0,.28);
  --edge:#1e2231;
}

/* ==== GENERALI ==== */
[data-theme="dark"] body{ background:var(--bg); color:var(--ink) }
[data-theme="dark"] .sidebar,
[data-theme="dark"] .header,
[data-theme="dark"] .card,
[data-theme="dark"] .cluster-card,
[data-theme="dark"] .main-box{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:var(--shadow);
}
[data-theme="dark"] .header{
  background:
    linear-gradient(180deg, rgba(138,51,138,.10), transparent 58%),
    var(--surface);
}

/* ==== TIPOGRAFIA ==== */
[data-theme="dark"] h2.section-title{
  background:rgba(138,51,138,.12);
  color:var(--ink);
}

/* ==== INPUT ==== */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea{
  background:#0f131c; color:var(--ink);
  border-color:#262b3c;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{ color:#8a94a6 }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus{
  border-color:var(--brand-600);
  box-shadow:0 0 0 4px rgba(138,51,138,.22);
}
/* freccia select scura */
[data-theme="dark"] select{
  background-image:url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238a338a'>\
      <path d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.06l3.71-2.83a.75.75 0 1 1 .92 1.18l-4.2 3.2a.75.75 0 0 1-.92 0l-4.2-3.2a.75.75 0 0 1 .02-1.2z'/>\
    </svg>");
}

/* ==== BOTTONI ==== */
[data-theme="dark"] .btn-secondary{
  background:#1b2130; color:var(--ink); border:1px solid #2a3146;
}
[data-theme="dark"] .btn-secondary:hover{ background:#232a3d }
/* PRIMARY (dark): testo viola su trasparente/leggero hover */
[data-theme="dark"] .btn-primary{
  background:transparent;
  color:var(--brand-600);
  border:1px solid var(--brand-600);
}
[data-theme="dark"] .btn-primary:hover{
  background:rgba(138,51,138,.12);
  border-color:var(--brand-500);
}
[data-theme="dark"] .btn-primary:active{
  background:rgba(138,51,138,.18);
  border-color:var(--brand-700);
}
[data-theme="dark"] .btn-ghost{ color:#d9c3e0 }
[data-theme="dark"] .btn-danger{
  background:#3a1f24; color:#ffb4b4; border:1px solid #5a2a32;
}

/* ==== PILL, BADGE, COPY ==== */
[data-theme="dark"] .link-pill,
[data-theme="dark"] .file-pill,
[data-theme="dark"] .child-tag,
[data-theme="dark"] .copy{
  background:rgba(138,51,138,.10);
  border:1px solid rgba(138,51,138,.28);
  color:#e9d8f0;
}
[data-theme="dark"] .badge-pending{ background:#2a2534; color:#e0c8f0; border:1px solid rgba(138,51,138,.35) }
[data-theme="dark"] .badge-overdue{ background:#3a2a1f; color:#ffd7a0 }
[data-theme="dark"] .badge-submitted{ background:#173228; color:#b5f5d5 }
[data-theme="dark"] .badge-expired{ background:#3a1f24; color:#ffb4b4 }
[data-theme="dark"] .badge-cancelled{ background:#202637; color:#cfd6e3 }

/* ==== PROGRESS & TABELLE ==== */
[data-theme="dark"] .bar{ background:#24293a }
[data-theme="dark"] .bar > span{ background:var(--brand-600) }

[data-theme="dark"] .table thead th{ background:#171c28; color:#cfd6e3 }
[data-theme="dark"] .table th,
[data-theme="dark"] .table td{ border-bottom:1px solid #23283a }
[data-theme="dark"] .table tbody tr:hover{ background:rgba(138,51,138,.10) }
[data-theme="dark"] .table tbody tr.is-selected{
  background:rgba(138,51,138,.16);
  outline:2px solid rgba(138,51,138,.28);
}

/* ==== SIDEBAR NAV ==== */
[data-theme="dark"] .sidebar nav a{ color:#cfd6e3 }
[data-theme="dark"] .sidebar nav a:hover{ background:rgba(138,51,138,.12) }
[data-theme="dark"] .sidebar nav a.is-active{
  background:rgba(138,51,138,.18); color:#f1e7f6;
  border:1px solid rgba(138,51,138,.30);
}

/* ==== HAMBURGER FOCUS ==== */
[data-theme="dark"] .hub-burger{
  background:#0f131c; border:1px solid #2a3146; color:#e5e7eb;
}
[data-theme="dark"] .hub-burger:focus-visible{
  box-shadow:0 0 0 4px rgba(138,51,138,.24);
}

/* (facoltativo) transizione morbida tra temi */
html{ transition: background-color .25s ease, color .25s ease }

/* Narrow form container (optional) */
.form-narrow{ max-width: 560px; }

/* Narrow form container */
.form-narrow{ max-width:800px; }

/* Two-column grid that collapses on mobile */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:700px){ .grid-2{ grid-template-columns:1fr; } }

/* Errors */
.error{ color:#b91c1c; font-size:.9rem; margin-top:.35rem; }

/* Fieldset styling to match cards */
.fieldset{
  margin-top:1rem; padding:1rem;
  border:1px solid var(--line); border-radius:12px; background:#fff;
}
.fieldset > legend{ padding:0 .4rem; color:var(--muted); }
/* Sidebar groups (optional) */
.sidebar .group{ margin-top:.5rem; }
.sidebar .group-title{
  font-size:.8rem; color:var(--muted);
  margin:.75rem .4rem .25rem;
  text-transform:uppercase; letter-spacing:.03em;
}
.sidebar .nav-sub a{ padding-left:1.8rem; }

.hub-logout {
  padding: .4rem .7rem; border:1px solid #111827; background:#fff;
  color:#111827; border-radius:.4rem; font-weight:600; cursor:pointer;
}
.hub-logout:hover { background:#111827; color:#fff; }
.hub-user-email { margin-left:.5rem; font-size:.85rem; color:#6b7280; }

/* Viola pieno, rotondo, coerente col tema */
.btn-brand{
  background:var(--brand-600);
  color:#fff;
  border:1px solid var(--brand-600);
}
.btn-brand:hover{ background:var(--brand-500); border-color:var(--brand-500) }
.btn-brand:active{ background:var(--brand-700); border-color:var(--brand-700) }

/* Wrapper compatto nell'header (usa già le tue utility) */
.header .actions .user-actions{
  display:flex; align-items:center; gap:.6rem; white-space:nowrap;
}
.header .actions .user-email{ font-size:.85rem; color:var(--muted); }
/* Sidebar mobile */
@media (max-width: 992px) {
  nav .nav-sub{ display:none; }
  nav .group.open > .nav-sub{ display:block; }
  nav .group-title{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
  nav .group-title .chev{ transition: transform .2s ease; }
  nav .group.open .group-title .chev{ transform: rotate(90deg); }
}
@media (max-width: 1024px){
  .sidebar{
    overflow-y: auto;
    height: 100vh;
    -webkit-overflow-scrolling: touch;
  }
  body.sidebar-open { overflow: hidden; } /* stop background from scrolling */
}
/* === Sidebar group titles styled like the purple active link === */
.sidebar .group-title{
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem .7rem; margin:.35rem .25rem;
  border-radius:10px;
  color:#374151;                       /* base text */
  font-weight:700; font-size:.82rem; letter-spacing:.01em;
  border:1px solid transparent;
  cursor:pointer; user-select:none;
  transition:background .15s, border-color .15s, box-shadow .15s, color .15s, transform .06s;
}
.sidebar .group-title:hover{
  background:rgba(122,41,122,.06);     /* = your brand-600 @ 6% */
}
.sidebar .group-title:active{ transform:translateY(1px); }

/* Open/active look = same vibe as .sidebar nav a.is-active */
.sidebar .group.open > .group-title{
  background:rgba(122,41,122,.10);
  color:var(--brand-700);
  border:1px solid rgba(122,41,122,.20);
  box-shadow:var(--shadow-sm);
}

/* Chevron color/rotation */
.sidebar .group-title .chev{ color:var(--muted); transition:transform .2s, color .15s; }
.sidebar .group.open > .group-title .chev{ transform:rotate(90deg); color:var(--brand-700); }

/* Keyboard focus ring (accessibility) */
.sidebar .group-title:focus-visible{
  outline:none;
  border-color:var(--brand-600);
  box-shadow:0 0 0 4px rgba(122,41,122,.12);
}

/* ---- Dark theme tweaks to match your palette ---- */
[data-theme="dark"] .sidebar .group-title{ color:#cfd6e3; border-color:transparent; }
[data-theme="dark"] .sidebar .group-title:hover{ background:rgba(138,51,138,.12); }
[data-theme="dark"] .sidebar .group.open > .group-title{
  background:rgba(138,51,138,.18);
  color:#f1e7f6;
  border:1px solid rgba(138,51,138,.30);
  box-shadow:var(--shadow);
}
[data-theme="dark"] .sidebar .group-title:focus-visible{
  border-color:var(--brand-600);
  box-shadow:0 0 0 4px rgba(138,51,138,.24);
}
[data-theme="dark"] .sidebar .group.open > .group-title .chev{ color:#f1e7f6; }

/* No sidebar (guest/login): use full width */
.admin.no-sidebar{
  grid-template-columns: 1fr;
}

/* ====== LOGIN PAGE (guest) ====== */
:root { --login-top-space: clamp(24px, 6vh, 48px); }

.admin.no-sidebar .header { display: none; }  /* hide app header for guests */

/* Let the main area be a normal block; add top padding to push card up */
.admin.no-sidebar .main{
  min-height: 100vh;
  display: block;
  padding: var(--login-top-space) 0 6vh;   /* top / sides / bottom */
}

/* No special centering rules on the container needed */
.admin.no-sidebar .main .container{
  width: 100%;
  display: block;
}

/* The card: center horizontally with auto margins */
.auth-card{
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(2,6,23,.25);
  margin: 0 auto;          /* <— THIS keeps it centered */
}
/* Brand bits */
.brand{ font-weight:700; letter-spacing:.4px; }

/* ⬇️ Replace the black square with your logo image */
.logo-mark{
  width: 120px;
  height: 50px;
  display: inline-block;
  margin-right: .5rem;
  border-radius: 8px;                     /* set to 0 if your logo has its own shape */
  background: url("/images/logo.png") center / contain no-repeat; /* <- your logo path */
  /* If your logo has a white box around it and you want it: add background-color:#fff; */
}

/* Narrow the form (desktop/tablet), full width on small phones */
.auth-card .form-narrow{
  max-width: 320px;      /* tweak 280–360 if you like */
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 360px){
  .auth-card{
    max-width: 92vw;      /* try 88–92vw to taste */
}

/* Compact inputs */
.auth-card .input-compact{ padding:.55rem .75rem; font-size:15px; }

/* Input group: icon + field aligned and merged */
.auth-card .input-group{
  display: flex; align-items: stretch; width: 100%;
}
.auth-card .input-group-text{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .65rem;
  background:#fafafa;
  border:1px solid var(--line);
  border-right:0;                /* merge with input */
  border-radius:10px 0 0 10px;
}
.auth-card .input-group-text i{
  line-height:1; width:1.1em; text-align:center;
}
.auth-card .form-control.input-compact{
  padding:.55rem .75rem;
  font-size:15px;
  border:1px solid var(--line);
  border-left:0;                 /* merge with icon box */
  border-radius:0 10px 10px 0;
  width:100%;
  min-width:0;                   /* prevent flex overflow */
}

/* Center the submit button */
.auth-card .btn-center{
  display:inline-flex;
  min-width:120px;
  justify-content:center;
}