/* ——— Admin tabbed layout ——— */
.tabs{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap;border-bottom:1px solid #e5e7eb;margin:0 0 12px;background:transparent}
.tablink{appearance:none;border:0;background:transparent;padding:10px 12px;border-radius:10px 10px 0 0;color:var(--muted);font-weight:700;cursor:pointer}
.tablink:hover{color:var(--text)}
.tablink.active{color:var(--text);background:#ffffff;border:1px solid #d1d5db;border-bottom-color:transparent}
.tabpanel{display:none}
.tabpanel.active{display:block}

/* Main admin navigation (Tombolas / Parametres) */
.admin-main-nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:sticky;
  top:10px;
  z-index:20;
  border:1px solid #d1d5db;
  border-radius:14px;
  background:var(--ui-surface);
  padding:10px;
  margin:2px 0 14px;
}
.admin-main-tabs{
  border-bottom:0;
  margin:0;
  flex:1 1 auto;
  min-width:0;
  gap:8px;
}
.admin-main-tabs .tablink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:10px;
  border-bottom:1px solid transparent;
  padding:10px 14px;
}
.admin-main-tabs .tablink:hover{background:#f8fafc}
.admin-main-tabs .tablink.active{background:#eef6ff;border-color:#bfdbfe;color:#0c4a6e}
.admin-main-tabs .navicon{display:inline-flex;align-items:center;justify-content:center}
.admin-main-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.admin-main-actions .badge{white-space:nowrap}
.admin-nav-toggle{display:none}
.admin-menu-overlay{display:none}
.admin-panel{display:none}
.admin-panel.active{display:block}

/* compact containers inside tab panels */
.tabpanel > .card:first-child{margin-top:8px}

/* sticky toolbar inside sections when needed */
.sticky-toolbar{position:sticky;top:56px;z-index:9;background:var(--card);padding:8px 0;border-bottom:1px solid #e5e7eb}

@media (max-width:700px){
  .tablink{padding:8px 10px;font-size:.95rem}
}
:root { 
  --bg:#ffffff; 
  --card:#fff9ed; 
  --text:#1c1e21; 
  --muted:#606770; 
  --accent:#0066cc; 
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,Segoe UI,Roboto}

/* Button size scale */
.btn{appearance:none;line-height:1;border-radius:12px;padding:10px 14px;cursor:pointer;background:var(--accent);color:#fff;font-weight:700}
.btn.xs{padding:6px 10px;font-size:.9rem;border-radius:8px}
.btn.sm{padding:8px 12px;font-size:.95rem;border-radius:10px}
.btn.lg{padding:12px 18px;font-size:1.05rem;border-radius:12px}

.container{max-width:1400px;margin:0 auto;padding:24px}
.card{background:var(--card);border-radius:16px;padding:18px;box-shadow:0 2px 6px rgba(0,0,0,.1)}
h1,h2,h3{margin:0 0 12px}
.btn.secondary{background:#f3f4f6;border:1px solid #d1d5db;color:#1c1e21}
.btn.secondary:hover{background:#e5e7eb}
.input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #344}
.grid{display:grid;gap:10px}

/* Collapse the add/edit forms to one column on small screens */
@media (max-width:700px){
  #addForm.modal-grid-2,#editForm.modal-grid-2{grid-template-columns:1fr !important}
}

.grid.envelopes{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
.env{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:4px;
  background:#e2e8f0;
  border:1px solid #cbd5e1;
  border-radius:10px;
  aspect-ratio:1/1;
  color:#1c1e21;
  line-height:1;
}
.env .env-ref{font-size:.95rem;font-weight:800;color:#334155}
.env.free{cursor:pointer}
.env.reserved{opacity:.45;position:relative}
.env.free:hover{outline:2px solid var(--accent)}
.small{font-size:.9rem;color:var(--muted)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;border-bottom:1px solid #e5e7eb;text-align:left}
.row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:800px){.row{grid-template-columns:1fr}}
.flash{padding:10px;border-radius:10px;background:#14381f;color:#bff1c7;margin:8px 0}
.err{background:#3a151a;color:#ffd0d6}

/* ——— Pro admin polish ——— */
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.header .title{display:flex;align-items:center;gap:12px;text-align:center;}
.header .subtitle{color:var(--muted);font-size:.95rem;text-align: center;}
.toolbar{display:flex;align-items:center;gap:8px}
.admin-headline .toolbar{justify-content:flex-end}
.app-logo{
  display:block;
  margin:0 auto;
  width:auto;
  max-width:min(100%, 560px);
  height:clamp(180px, 22vw, 260px);
  object-fit:contain;
}
.btn.ghost{background:transparent;border:1px solid #d1d5db;color:#1c1e21}
.btn.ghost:hover{background:#f3f4f6}
.logo-preview-small{
  width:220px;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#ffffff;
  padding:6px;
  overflow:hidden;
}
.logo-preview-small img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* KPIs become responsive with auto-fit */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:10px 0 18px}
.kpi{background:var(--ui-surface);border:1px solid #d1d5db;border-radius:14px;padding:14px}
.kpi .label{font-size:.85rem;color:var(--muted)}
.kpi .value{font-size:1.6rem;font-weight:800;margin-top:6px}

.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.8rem;line-height:1;border:1px solid #d1d5db;background:#f3f4f6;color:#1c1e21}
.badge.success{background:#e8f5ee;color:#1f5b3e;border-color:#b7e4c7}
.badge.warn{background:#fff7ed;color:#92400e;border-color:#fed7aa}

.table tr:hover td{background:#f9fafb}
.table th{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.78rem}

.section{display:flex;align-items:center;justify-content:space-between;margin:8px 0 12px}
.section h2{margin:0}

.input:focus{outline:2px solid var(--accent);border-color:transparent}
label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:4px}

/* ——— Front polish ——— */
.legend{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.legend .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid #d1d5db;background:#f3f4f6;color:#1c1e21;font-size:.85rem}
.legend .dot{width:10px;height:10px;border-radius:50%}
.legend .dot.free{background:var(--accent)}
.legend .dot.taken{background:#6b7280}
.legend .dot.auction{background:#d97706}

.envelopes-by-price{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.envelope-section{
  border:1px solid var(--ui-border, #dbe3ef);
  border-radius:14px;
  background:var(--ui-surface);
  padding:12px;
}
.envelope-section.auction{
  border-color:#facc15;
  background:#fffbeb;
}
.envelope-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
}
.envelope-section-head h4{
  margin:0;
  font-size:1rem;
  line-height:1.2;
  color:#0f172a;
}
.auction-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.auction-meta .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid #fdba74;
  background:#fff7ed;
  color:#7c2d12;
}
.auction-meta .pill strong{
  font-weight:800;
  color:#9a3412;
}

.env.hidden{display:none}
.env.free:focus{outline:3px solid var(--accent)}
.env.auction{
  background:#fff7ed;
  border-color:#fbbf24;
  color:#92400e;
}
.env.auction .env-ref{color:#b45309}
.env.auction.free{
  cursor:pointer;
}

.sticky-reserve{position:sticky;top:10px}
.helper{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:8px 0}
.helper .search{display:flex;gap:8px;align-items:center}
.helper input[type="number"]{width:120px}
.toggle{display:flex;align-items:center;gap:8px}

.notice{padding:10px;border-radius:10px;background:#eef6ff;border:1px solid #bfdbfe;color:#1c1e21}

.empty-tombola-state{
  margin:16px auto 6px;
  max-width:760px;
  text-align:center;
  padding:24px 20px;
  border-radius:16px;
  border:1px solid #cbd5e1;
  background:linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  box-shadow:0 10px 26px rgba(2, 6, 23, 0.08);
}
.empty-tombola-state h2{
  margin:0 0 8px;
  font-size:1.35rem;
  color:#0f172a;
}
.empty-tombola-state p{
  margin:0;
  color:#475569;
}

.client-access-card{
  margin:16px auto 8px;
  max-width:780px;
  border:1px solid #bfdbfe;
  border-radius:16px;
  padding:22px;
  background:linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
  box-shadow:0 10px 24px rgba(2, 6, 23, 0.08);
}
.client-access-card h2{
  margin:0 0 8px;
  text-align:center;
}
.client-access-card .small{
  margin:0 0 12px;
  text-align:center;
}

.btn.inline{padding:8px 12px;border-radius:10px;font-weight:600;font-size:.95rem}

/* smaller envelope buttons on mobile */
@media (max-width:580px){
  .grid.envelopes{grid-template-columns:repeat(auto-fill,minmax(54px,1fr))}
  .envelope-section{
    padding:10px;
  }
  .envelope-section-head{
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:8px;
  }
  .empty-tombola-state{
    padding:18px 14px;
    border-radius:14px;
  }
  .empty-tombola-state h2{
    font-size:1.15rem;
  }
  .client-access-card{
    padding:16px 14px;
    border-radius:14px;
  }
}

/* ——— Modals ——— */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.58);
  backdrop-filter:blur(2px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(10px, 2.5vw, 24px);
  z-index:9999;
}
.modal-backdrop.show{display:flex}
body.modal-open{overflow:hidden}
.modal{
  background:var(--ui-surface);
  border:1px solid var(--ui-border-strong);
  border-radius:18px;
  box-shadow:0 28px 70px rgba(2,6,23,.3);
  width:min(100%, 820px);
  max-height:min(92vh, 980px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translateY(8px) scale(.985);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}
.modal-backdrop.show .modal{
  transform:translateY(0) scale(1);
  opacity:1;
}
.modal.modal-lg{width:min(100%, 1060px)}
.modal header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--ui-border);
  background:linear-gradient(180deg, #fffdf7 0%, var(--ui-surface) 100%);
}
.modal header h3{
  margin:0;
  font-size:1.05rem;
  line-height:1.2;
}
.modal .body{
  padding:16px 18px;
  overflow:auto;
}
.modal .footer{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  padding:12px 18px;
  border-top:1px solid var(--ui-border);
  background:var(--ui-surface);
}
.modal .close{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:#64748b;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.modal .close:hover{
  background:#f7efe0;
  border-color:#e2d7bf;
  color:#0f172a;
}
.modal .close:focus-visible{
  outline:2px solid #93c5fd;
  outline-offset:2px;
}
.modal-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.btn.inline{padding:8px 12px;border-radius:10px;font-weight:600;font-size:.95rem}

/* Fit modals on very small screens */
@media (max-width:700px){
  .modal{
    width:100%;
    max-height:94vh;
    border-radius:14px;
  }
  .modal header,
  .modal .body,
  .modal .footer{
    padding:12px;
  }
  .modal .footer .btn{
    flex:1 1 auto;
  }
  .modal-grid-2{
    grid-template-columns:1fr;
  }
}

/* ——— Tombola cards grid ——— */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tcard{background:var(--ui-surface);border:1px solid #d1d5db;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.tcard .title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tcard .meta{font-size:.85rem;color:var(--muted)}
.tcard .actions{display:flex;flex-wrap:wrap;gap:6px}
.tcard .k{display:flex;gap:8px;flex-wrap:wrap}
.tcard .k .badge{margin:0}
.tcard .actions .btn{border-radius:10px;font-weight:700}
.tcard .actions .btn.inline{border-radius:10px}
.tcard .actions{align-items:center}
.btn.sm{padding:8px 12px;font-size:.95rem;border-radius:10px}
.btn.danger{background:#7a1f2a;color:#fff}
.btn.success{background:#1f5b3e;color:#eafff2}
.btn.ghost{background:transparent;border:1px solid #d1d5db;color:#1c1e21}
.btn.ghost:hover{background:#f3f4f6}
.btn.ghost.sm{padding:8px 12px;font-weight:600;font-size:.95rem}

/* ——— Responsive helpers for small screens ——— */
@media (max-width: 900px){
  /* Make tables scrollable horizontally on small screens */
  .table{display:block;overflow-x:auto;white-space:nowrap}

  /* Header stacks and breathes */
  .header{flex-direction:column;align-items:stretch;gap:10px}
  .header .title{align-items:center}

  /* Toolbars wrap onto multiple lines */
  .toolbar{flex-wrap:wrap;gap:10px}
  .toolbar .btn,.toolbar .input{width:100%}

  /* KPI cards spacing tweak */
  .kpi{padding:12px}

  .admin-main-nav-wrap{
    position:sticky;
    top:10px;
    width:100%;
    transform:none;
    transition:none;
    z-index:20;
    border-radius:14px;
    border:1px solid #d1d5db;
    box-shadow:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:10px;
    margin:2px 0 14px;
  }

  .admin-main-tabs{
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
  }
  .admin-main-tabs .tablink{
    justify-content:center;
    width:auto;
    border-radius:10px;
    border:1px solid transparent;
  }

  .admin-main-actions{
    margin-top:8px;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .admin-main-actions .btn,
  .admin-main-actions .badge,
  .admin-main-actions form{
    width:auto;
    text-align:center;
  }
  .admin-main-actions form .btn{
    width:auto;
  }

  .admin-menu-overlay{
    display:none !important;
  }
  body.admin-menu-open{
    overflow:auto;
  }
}

/* Extra-tight tweaks under 580px */
@media (max-width:580px){
  /* Tighter table cell padding on very small screens (when scrolled) */
  .table th,.table td{padding:8px 6px}
  /* Let action buttons in cards wrap nicely */
  .tcard .actions .btn{flex:1 1 auto}
}

/* ——— In-card details layout (per tombola) ——— */
.tombola-details{margin-top:10px;border:1px solid #d1d5db;border-radius:14px;background:var(--ui-surface)}
.detailmenu{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid #e5e7eb;padding:10px;background:#f8fafc;border-radius:12px 12px 0 0}
.dtab{appearance:none;border:1px solid transparent;background:transparent;padding:8px 10px;border-radius:10px;color:var(--muted);font-weight:700;cursor:pointer}
.dtab:hover{background:#eef2f7;color:var(--text)}
.dtab.active{color:var(--text);background:#ffffff;border:1px solid #d1d5db}
.dpanel{display:none;padding:12px}
.dpanel.active{display:block}
@media (max-width:700px){.detailmenu{position:sticky;top:48px;background:#ffffff;z-index:5}}

/* ——— Visual hierarchy & utilities ——— */
:root{--radius:14px;--gap:12px}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.hstack{display:flex;align-items:center;gap:10px}
.justify-between{justify-content:space-between}
.muted{color:var(--muted)}
.divider{height:1px;background:#e5e7eb;border:0;margin:10px 0}

/* Compact ghost buttons */
.btn.ghost.sm{padding:8px 12px;font-weight:600;font-size:.95rem}
.btn.secondary:hover{filter:brightness(1.05)}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* Segmented control (Réservations) */
.seg{display:inline-flex;border:1px solid #d1d5db;border-radius:10px;overflow:hidden}
.seg .segbtn{appearance:none;background:transparent;border:0;padding:6px 10px;font-weight:700;color:var(--muted);cursor:pointer}
.seg .segbtn.active{background:#eaf2ff;color:var(--text)}

/* Metrics grid (Overview) */
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.metrics .metric{background:var(--ui-surface);border:1px solid #d1d5db;border-radius:12px;padding:12px}
.metrics .metric .k{font-size:.82rem;color:var(--muted)}
.metrics .metric .v{font-size:1.3rem;font-weight:800;margin-top:4px}
@media (max-width:720px){.metrics{grid-template-columns:1fr}}

/* Detail panel polish */
.tombola-details{border-radius:var(--radius)}
.tombola-details .headerline{display:flex;align-items:center;justify-content:space-between;padding:10px 12px}
.tombola-details .headerline .title{font-weight:800}
.tombola-details .panel-body{padding:12px}

/* Table zebra + sticky head */
.table tbody tr:nth-child(odd){background:rgba(255,255,255,.015)}
.table thead th{position:sticky;top:0;background:#ffffff}

/* Public link box */
.linkbox{display:flex;gap:8px;align-items:center;background:#f9fafb;border:1px dashed #d1d5db;padding:10px;border-radius:10px;word-break:break-all}
.linkbox code{font-size:.9rem}

/* Subtitles in cards */
.tcard .subtitle{font-size:.85rem;color:var(--muted)}

/* ——— Sidebar + Details split layout ——— */
.split{display:grid;grid-template-columns:clamp(340px, 30vw, 420px) 1fr;gap:14px}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.side{position:relative}
.tombola-manager-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--ui-border-strong);
  border-radius:16px;
  background:linear-gradient(130deg, #f8fbff 0%, #eef6ff 55%, #f8fafc 100%);
  margin:10px 0 12px;
}
.tombola-manager-copy h2{
  margin:0;
  font-size:clamp(1.08rem, .94rem + .55vw, 1.45rem);
  letter-spacing:.01em;
}
.tombola-manager-copy .subtitle{
  margin-top:6px;
  max-width:72ch;
  color:var(--ui-muted);
}
.tombola-manager-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.tombola-manager-actions .btn{
  min-height:34px;
}
.tombola-workspace{
  border:1px solid var(--ui-border-strong);
  border-radius:16px;
  background:linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%);
  padding:12px;
}
.tombola-split{
  align-items:flex-start;
}
.tombola-side-shell{
  position:sticky;
  top:12px;
  border:1px solid var(--ui-border);
  border-radius:14px;
  background:#ffffff;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  padding:10px;
}
.tombola-side-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.tombola-side-header h3{
  margin:0;
  font-size:.95rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#334155;
}
.vlist{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:calc(100vh - 230px);
  overflow:auto;
  padding-right:3px;
}
.vempty{
  border:1px dashed var(--ui-border-strong);
  background:#f8fafc;
  border-radius:12px;
  padding:12px;
  text-align:center;
}
.vitem{
  display:flex;
  flex-direction:column;
  gap:8px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border:1px solid var(--ui-border-strong);
  border-radius:14px;
  padding:12px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.vmain{
  display:flex;
  flex-direction:column;
  gap:8px;
  color:inherit;
  text-decoration:none;
}
.vmain:focus-visible{
  outline:2px solid #93c5fd;
  outline-offset:2px;
  border-radius:10px;
}
.vitem:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.10);
  border-color:#94a3b8;
  background:linear-gradient(180deg, #ffffff 0%, #f1f7ff 100%);
}
.vitem.active{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px #dbeafe, 0 12px 24px rgba(37,99,235,.16);
}
.vhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.vitem .vtitle{
  font-weight:800;
  margin:0;
  line-height:1.25;
}
.vitem .vsubtitle{
  font-size:.83rem;
  color:var(--ui-muted);
  line-height:1.35;
}
.vmeta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.vmeta{
  display:flex;
  flex-direction:column;
  gap:2px;
  border:1px solid var(--ui-border);
  border-radius:10px;
  background:#ffffff;
  padding:7px 8px;
}
.vmeta-label{
  font-size:.74rem;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.vmeta strong{
  font-size:.92rem;
  color:#0f172a;
}
.vprogress{
  height:7px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}
.vprogress > span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #60a5fa 0%, #2563eb 100%);
}
.vbadges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.vactions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:2px;
}
.vactions .btn{
  min-height:32px;
}
.main{min-width:0}
.tombola-main-shell{
  border:1px solid var(--ui-border);
  border-radius:14px;
  background:var(--ui-surface);
  padding:10px;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}
.tombola-main-shell > .tombola-details,
.tombola-main-shell > .card{
  margin:0;
}
.tombola-empty-main{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ==========================================================================
   Global responsive refresh + professional buttons
   ========================================================================== */
:root{
  --ui-surface:#fff9ed;
  --ui-surface-soft:#f8fbff;
  --ui-border:#dbe3ef;
  --ui-border-strong:#c6d3e4;
  --ui-text:#0f172a;
  --ui-muted:#52607a;
  --ui-primary:#2563eb;
  --ui-primary-700:#1d4ed8;
  --ui-primary-800:#1e40af;
  --ui-success:#1f7a53;
  --ui-danger:#b3261e;
  --ui-shadow:0 10px 30px rgba(15,23,42,.08);
}

body{
  color:var(--ui-text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{
  max-width:1320px;
  padding:clamp(12px, 2vw, 24px);
}

/* Main app shells for admin/client pages */
.app-shell{
  width:100%;
}

.app-shell-wide{
  max-width:min(98vw, 1760px);
}

.app-main-frame{
  width:100%;
  min-width:0;
}

.card{
  background:var(--ui-surface);
  border:1px solid var(--ui-border);
  box-shadow:var(--ui-shadow);
}

.header-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.header-row .title h1{
  margin:0;
  font-size:clamp(1.35rem, 1.05rem + 1vw, 2rem);
  letter-spacing:.01em;
}

.toolbar{
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 15px;
  border-radius:12px;
  border:1px solid transparent;
  background:linear-gradient(180deg, var(--ui-primary), var(--ui-primary-700));
  color:#fff;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 8px 18px rgba(37,99,235,.24);
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
  text-decoration:none;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(37,99,235,.30);
  filter:saturate(1.05);
}

.btn:active{
  transform:translateY(0);
  box-shadow:0 6px 14px rgba(37,99,235,.22);
}

.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.18), 0 10px 22px rgba(37,99,235,.3);
}

.btn.sm{
  min-height:34px;
  padding:0 12px;
}

.btn.xs{
  min-height:30px;
  padding:0 10px;
}

.btn.inline{
  min-height:36px;
  padding:0 12px;
}

.btn.secondary{
  background:linear-gradient(180deg, #f7f9fd, #eef3f9);
  color:#1f2937;
  border-color:var(--ui-border-strong);
  box-shadow:0 6px 14px rgba(15,23,42,.08);
}

.btn.secondary:hover{
  box-shadow:0 8px 16px rgba(15,23,42,.12);
}

.btn.ghost{
  background:#ffffff;
  color:#0f172a;
  border-color:var(--ui-border-strong);
  box-shadow:0 4px 10px rgba(15,23,42,.05);
}

.btn.ghost:hover{
  background:#f8fafc;
  box-shadow:0 8px 18px rgba(15,23,42,.10);
}

.btn.danger{
  background:linear-gradient(180deg, #d33c31, var(--ui-danger));
  border-color:#9f1f18;
  color:#fff;
  box-shadow:0 8px 18px rgba(179,38,30,.24);
}

.btn.success{
  background:linear-gradient(180deg, #2e9669, var(--ui-success));
  border-color:#186a46;
  color:#fff;
  box-shadow:0 8px 18px rgba(31,122,83,.22);
}

.btn[disabled],
.btn:disabled{
  opacity:.58;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

a.btn{
  text-decoration:none;
}

.input{
  border:1px solid var(--ui-border-strong);
  border-radius:12px;
  background:#fff;
  color:var(--ui-text);
}

.input:focus{
  outline:none;
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}

.table{
  border:1px solid var(--ui-border);
  border-radius:12px;
  overflow:hidden;
}

.table th,
.table td{
  padding:10px 10px;
  border-bottom:1px solid #e8edf5;
}

.table thead th{
  background:#f7fafe;
  color:#334155;
}

.table tbody tr:nth-child(even){
  background:#fcfdff;
}

.flash{
  border:1px solid #9ed8b4;
  background:#ecfdf3;
  color:#185a35;
  margin:12px auto;
  width:min(92vw, 820px);
  text-align:center;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.err{
  border:1px solid #f4b6b1;
  background:#fff1f1;
  color:#8f1d1a;
}

.badge{
  border-color:var(--ui-border-strong);
  background:#f8fafc;
}

.detailmenu,
.admin-main-nav-wrap{
  border-color:var(--ui-border-strong);
}

@media (max-width: 1024px){
  .header-row .toolbar{
    justify-content:flex-start !important;
  }

  .grid[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }

  .split[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }

  .split{
    grid-template-columns:1fr !important;
  }

  .row{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 700px){
  .container{
    padding:12px;
  }

  .card{
    padding:14px;
    border-radius:14px;
  }

  .toolbar{
    width:100%;
  }

  .toolbar .btn,
  .toolbar .input{
    width:100%;
  }

  .hstack{
    flex-wrap:wrap;
  }

  .hstack .btn{
    width:100%;
  }

  .vmeta-grid{
    grid-template-columns:1fr;
  }

  .vactions{
    justify-content:stretch;
  }

  .vactions .btn{
    flex:1 1 auto;
  }

  .tombola-manager-head{
    flex-direction:column;
    align-items:stretch;
  }

  .tombola-manager-actions{
    justify-content:flex-start;
  }

  .tombola-manager-actions .btn{
    width:100%;
  }

  .tombola-side-shell{
    position:static;
  }

  .vlist{
    max-height:none;
    overflow:visible;
    padding-right:0;
  }

  .tombola-main-shell{
    padding:8px;
  }

  .table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
}

/* Header centering for admin/front/client pages */
.header-row.center-title{
  justify-content:center;
}

.header-row.center-title .title{
  flex:1 1 100%;
  text-align:center !important;
}

.header-row.center-title .title .subtitle{
  text-align:center;
}

.header-row.center-title .toolbar{
  width:100%;
  justify-content:center !important;
  text-align:center;
}

/* Admin login centering */
.admin-login-panel{
  display:flex;
  justify-content:center;
}

.admin-login-form{
  width:min(100%, 420px);
  margin:8px auto 0;
}

.admin-login-form .btn{
  width:100%;
}

@media (prefers-reduced-motion: reduce){
  *{
    transition:none !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }
}