/* ===== LumenTV — UI Baseline (tables + modals + buttons + file fields) v1.2 ===== */

:root{
  --z-modal: 2147483647;
  --z-confirm: 2147483648;
  --z-progress: 2147483649;
}


/* Font + sizing */
:root{
  --l-font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --l-fs-12: 12px;
  --l-radius: 12px;
  --l-gap: .6rem;
  --l-bg: #101317;
  --l-card: #151a21;
  --l-muted: #8892a6;
  --l-border: #2a3240;
  --l-row: #0f141a;
  --l-row-alt: #10171f;
  --l-row-hover: #1b2430;
  --l-accent: #4aa8ff;
  --l-danger: #ff5d5d;
}

/* Link sempre bianchi nelle aree UI */
.l-table a, .l-modal-card a, .tbl-wrap a, .card a{ color:#fff; text-decoration:none; }
.l-table a:hover, .l-modal-card a:hover, .tbl-wrap a:hover, .card a:hover{ text-decoration:underline; }

/* ===== Buttons (Nunito 12px compatti) ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:8px 12px; border-radius:12px; border:1px solid #2a3344;
  background:#1a2330; color:#e6edf7; cursor:pointer;
  font:700 var(--l-fs-12)/1.15 var(--l-font); user-select:none;
}
.btn:hover{ filter:brightness(1.08); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn.secondary{ background:#121821; color:#c9d4e5; }
.btn.danger{ background:#29171b; border-color:#5a1e27; color:#ffb3b3; }

/* ===== Table wrapper ===== */
.tbl-wrap{
  overflow:auto; -webkit-overflow-scrolling:touch;
  background:var(--l-card); border:1px solid var(--l-border);
  border-radius:var(--l-radius); box-shadow:0 6px 24px rgba(0,0,0,.25);
}

/* ===== Base table ===== */
.l-table{
  width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed;
  font:500 var(--l-fs-12)/1.4 var(--l-font); color:#e6edf7;
}
.l-table thead th{
  position:sticky; top:0; z-index:2; text-align:left; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(180deg,#1c2430 0%, #151a21 100%); color:#c9d4e5;
  padding:10px 12px; border-bottom:1px solid var(--l-border);
}
.l-table tbody td{
  padding:10px 12px; border-bottom:1px solid var(--l-border); background:var(--l-row);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.l-table tbody tr:nth-child(2n) td{ background:var(--l-row-alt); }
.l-table tbody tr:hover td{ background:var(--l-row-hover); }

/* Utilities */
.cell--fit{ width:1%; white-space:nowrap; }
.cell--nowrap{ white-space:nowrap; }
.cell--num{ text-align:right; font-variant-numeric:tabular-nums; }
.cell--muted{ color:var(--l-muted); }
.cell--actions{ text-align:right; gap:.3rem; }
.l-table .btn{ padding:7px 10px; border-radius:10px; } /* bottoni compatti in tabella */

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; border-radius:999px;
  font:800 10px/1 var(--l-font); text-transform:uppercase; letter-spacing:.4px;
  border:1px solid #2a3344; background:#182230; color:#c9d4e5;
}
.badge.success{ background:#13301d; border-color:#214a31; color:#b8f6cd; }
.badge.warn{ background:#2d2414; border-color:#4f3f1c; color:#ffe3a1; }
.badge.danger{ background:#2b171a; border-color:#4d2228; color:#ffc2c2; }

/* ===== Responsive stack (<= 820px) ===== */
@media (max-width:820px){
  .l-table{ display:block; }
  .l-table thead{ display:none; }
  .l-table tbody{ display:block; }
  .l-table tbody tr{
    display:grid; grid-template-columns:1fr 1fr; gap:.35rem .75rem;
    padding:.6rem .6rem; border-bottom:1px solid var(--l-border); background:var(--l-row);
  }
  .l-table tbody tr:nth-child(2n){ background:var(--l-row-alt); }
  .l-table tbody td{
    display:flex; align-items:center; gap:.5rem; border:none; padding:0; background:none;
    white-space:normal; overflow:visible; text-overflow:clip;
  }
  .l-table tbody td::before{
    content:attr(data-label); flex:0 0 42%; min-width:7.5rem; font-weight:800; color:#c9d4e5;
  }
  .l-table tbody td.cell--actions{ grid-column:1 / -1; justify-content:flex-end; }
}

/* ===== Modal (overlay) baseline — SEMPRE CENTRATA ===== */
.l-modal-root, .modal-root{
  position:fixed; inset:0; z-index:2147483647; display:none;
}
.l-modal-root.show, .modal-root.active{ display:block; } /* evitiamo flex-centering */
.l-modal-backdrop, .modal-backdrop{
  position:absolute; inset:0; background:rgba(4,8,12,.65); backdrop-filter:blur(3px);
}
.l-modal-card, .modal-card{
  position:fixed; left:50%; top:50%; transform:translate(-50%, -50%);
  width:min(940px,94vw); max-height:88vh; overflow:auto;
  background:var(--l-card); border:1px solid var(--l-border); border-radius:16px;
  box-shadow:0 30px 120px rgba(0,0,0,.55); padding:18px;
}
@media (max-width:720px){
  .l-modal-card, .modal-card{ width:96vw; max-height:90vh; padding:14px; }
}
/* Blocca lo scroll del body quando la modale è aperta */
body.modal-open{ overflow:hidden; }

/* ===== File input uniforme (bottone + nome corto) ===== */
.file-field{ position:relative; display:flex; align-items:center; gap:.6rem; max-width:520px; }
.file-field.small{ max-width:420px; }
.file-field input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:12px; border:1px solid #2a3344;
  background:#1a2330; color:#e6edf7; font:700 var(--l-fs-12)/1.1 var(--l-font);
}
.file-btn:hover{ filter:brightness(1.08); }
.file-name{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 var(--l-fs-12)/1.2 var(--l-font); color:#c9d4e5;
}


/* ===== Tabella centrata e più leggibile ===== */

/* Mobile verticale */
@media (max-width:720px) and (orientation:portrait){
  .tbl-wrap{
    width:90%;
    margin:0 auto;   /* centra */
  }
  #actorsTable{
    width:100%;
  }
}

/* Landscape: torna tabella completa */
@media (max-width:1024px) and (orientation:landscape){
  /* ripristina header e celle */
  #actorsTable thead{display:table-header-group}
  #actorsTable tbody tr{display:table-row}
  #actorsTable tbody td{display:table-cell;padding:6px}
}

@media (max-width:720px){
  #actorFilmsTbody tr{
    display:grid;
    grid-template-columns:56px 1fr;
    align-items:center;
    gap:10px;
    padding:8px 6px;
  }

  /* nascondi tutte le celle tranne poster + titolo */
  #actorFilmsTbody td{display:none;border:0;padding:0}
  #actorFilmsTbody td.poster,
  #actorFilmsTbody td[data-label="Titolo"]{display:block}

  /* poster a sinistra, titolo a destra */
  #actorFilmsTbody td.poster{grid-column:1}
  #actorFilmsTbody td[data-label="Titolo"]{
    grid-column:2;
    font-weight:700;
    text-align:left;
    padding:0;
  }

  /* elimina la label "Titolo" */
  #actorFilmsTbody td[data-label="Titolo"]::before{
    content:none !important;
  }

  /* immagine più leggibile */
  #actorFilmsTbody td.poster img{
    width:56px;
    height:74px;
    border-radius:10px;
  }

  /* nascondi header */
  #acc_films thead{display:none}
}



/* ===== v1.3 ADD-ONS (safe, non-breaking) ===================== */

/* One-column form grid + modal footer */
.l-form-grid--1{ display:grid; grid-template-columns:1fr; gap:.8rem; }
.l-modal-foot{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:.6rem; }
.mt-6{ margin-top:6px; }
.mt-12{ margin-top:12px; }

/* Collapsible Section (Accordion via <details>) */
.acc{ border:1px solid rgba(255,255,255,.10); border-radius:12px; margin:12px 0;
      background:rgba(255,255,255,.02); overflow:hidden; }
.acc > summary{
  list-style:none; cursor:pointer; padding:.8rem 1rem; font-weight:800;
  display:flex; align-items:center; gap:.6rem; user-select:none;
}
.acc > summary::-webkit-details-marker{ display:none; }
.acc > summary::before{
  content:''; display:inline-block; width:10px; height:10px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform .15s ease, opacity .15s; opacity:.9;
}
.acc[open] > summary::before{ transform:rotate(45deg); }
.acc .acc-body{ padding:10px 12px 12px; border-top:1px solid rgba(255,255,255,.06); }

/* Buttons — new 'primary' and icon polish.
   Keep existing .btn.secondary and .btn.danger. */
.btn.primary{
  background:#2b68ff; border-color:#2956c7; color:#fff;
  box-shadow:0 8px 22px rgba(43,104,255,.32);
}
.btn.danger{ /* keep colors, add subtle shadow for consistency */
  box-shadow:0 8px 22px rgba(255,93,93,.20);
}
.btn svg{ width:1em; height:1em; }

/* Alias: .l-btn maps to .btn to stay compatible with pages già fatte */
.l-btn{ composes: btn; } /* if 'composes' not supported by your build, fallback: */
.l-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:8px 12px; border-radius:12px; border:1px solid #2a3344;
  background:#1a2330; color:#e6edf7; cursor:pointer;
  font:700 var(--l-fs-12)/1.15 var(--l-font); user-select:none;
}
.l-btn.primary{ background:#2b68ff; border-color:#2956c7; color:#fff; box-shadow:0 8px 22px rgba(43,104,255,.32); }
.l-btn.danger{ background:#29171b; border-color:#5a1e27; color:#ffb3b3; box-shadow:0 8px 22px rgba(255,93,93,.20); }
.l-table .l-btn{ padding:7px 10px; border-radius:10px; }

/* Users table (mobile compact 3 cols) — scoped */
@media (max-width:720px){
  #usersTable{ table-layout:fixed; }
  #usersTable thead th{ display:none; }
  #usersTable tbody td{ display:none; }
  #usersTable tbody td.col-name,
  #usersTable tbody td.col-last,
  #usersTable tbody td.col-count{
    display:table-cell; white-space:normal; text-align:left;
  }
}


/* 1) Colonna step “sticky” come sidebar: resta visibile mentre scorri il form */
.ing-step-body .side { position: sticky; top: 12px; align-self: start; }

/* 2) Pulsanti step più compatti e full-width della colonna */
#fast .lu-btn.btn.small { width: 100%; justify-content: center; font-weight:600; }

/* 3) Larghezze e breakpoint come onboard */
@media (max-width: 1100px){
  .ing-overlay .modal{ width: min(90%, 860px); }
  .ing-step-body{ grid-template-columns: 1fr 320px; }
}
@media (max-width: 920px){
  .ing-step-body{ grid-template-columns: 1fr; }
  .ing-step-body .side{ position: static; order: -1; margin-bottom: 12px; } /* step sopra, form sotto su mobile */
}