/* ============== Lumen UI — tema condiviso (come /admin/pages/account.php) ============== */

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(26,32,44,.85), rgba(17,24,39,.88));
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  padding: 16px;
}
.l-card-title{
  display:flex; align-items:center; gap:.5rem;
  font-weight:800; font-size:1.05rem; margin:0 0 .75rem;
}

/* Typography utils */
.muted{opacity:.8}

/* Buttons */
.l-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem .9rem; border-radius:12px; border:0; cursor:pointer;
  background:#2b87ff; color:#fff; font-weight:700;
}
.l-btn:hover{ filter:brightness(1.05) }
.l-btn.secondary{ background:transparent; color:inherit; border:1px solid rgba(255,255,255,.22) }
.l-btn.danger{ background:#b02a37 }

/* Form grid (come account.php) */
.l-form-grid{
  display:grid; gap:12px;
  grid-template-columns:1fr;
}
.l-form-grid--2{ grid-template-columns:1fr 1fr }
@media (max-width:720px){
  .l-form-grid--2{ grid-template-columns:1fr }
}

.l-field{ display:flex; flex-direction:column; gap:6px }
.l-label{ font-weight:700; opacity:.9 }
.l-input{
  width:100%;
  padding:.85rem .9rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  color:inherit; outline:none;
}

/* Table base (usata anche in actors) */
.tbl{ width:100%; border-collapse:collapse }
.tbl th,.tbl td{ padding:.65rem .7rem; white-space:nowrap }
.tbl thead th{ opacity:.9; font-weight:800 }
.tbl tbody tr{ cursor:pointer; transition:background .16s ease }
.tbl tbody tr:hover{ background:rgba(255,255,255,.04) }

/* Poster thumbnails */
.poster img{
  width:42px; height:56px; object-fit:cover;
  border-radius:10px; border:1px solid rgba(255,255,255,.08); background:#111;
}

/* Chips */
.chip{ display:inline-block; padding:.28rem .5rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08) }

/* Mobile table: mostra solo foto + nome (se servisse) */
@media (max-width:720px){
  .tbl thead th{ display:none }
  .tbl tbody td{ display:none }
  .tbl tbody td.col-photo, .tbl tbody td.col-name{ display:table-cell }
  .tbl tbody td.col-name{ white-space:normal }
  .tbl{ table-layout:fixed }
}

/* Modal / Overlay (tema blu come account) */
.l-modal-root{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2147483647 }
.l-modal-root.active{ display:flex }
.l-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:saturate(110%) blur(4px) }
.l-modal-card{
  position:relative; width:min(900px,92vw); max-height:88vh; overflow:auto; border-radius:18px;
  background:linear-gradient(180deg, rgba(26,32,44,.96), rgba(17,24,39,.96));
  box-shadow:0 10px 40px rgba(0,0,0,.5); padding:18px 18px 22px;
}
.l-modal-head{ display:flex; align-items:center; justify-content:space-between; margin:0 0 8px }
.l-modal-title{ font-weight:800; font-size:1.2rem }
.l-modal-close{ border:0; background:transparent; cursor:pointer; opacity:.8 }
.l-modal-foot{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px }

/* Utility: “Nuovo” solo mobile ovunque */
.btn.btn-new{ display:none !important; }
@media (max-width:720px){
  .btn.btn-new{ display:inline-flex !important; }
}

/* Bottom log block (se mai usato localmente) */
.page-log{ background:#000; border-radius:14px; padding:.8rem 1rem; white-space:pre-wrap; max-height:22vh; overflow:auto }


/* Overlay: griglia a UNA colonna, ogni campo su una riga */
.form-grid--onecol{ grid-template-columns: 1fr !important; }
.form-grid--onecol > *{ grid-column: 1 / -1; }  /* forza ogni .input su riga intera */
/* Danger buttons globali */
.l-btn.danger,
.btn.danger,
button.danger {
  background: #e53935;
  color: #fff;
  border: 0;
}
.l-btn.danger:hover,
.btn.danger:hover,
button.danger:hover {
  filter: brightness(1.05);
}

/* ===== Overlay di progresso globale ===== */
#progressOverlay,
.progress-overlay,
[data-role="progress-overlay"]{
  position: fixed;
  inset: 0;
  display: none;                 /* .show → flex */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px) saturate(110%);
  /* deve stare SOPRA drawer/sidebar e SOTTO i modali */
  z-index: 2147483646 !important;
}

#progressOverlay.show,
.progress-overlay.show,
[data-role="progress-overlay"].show{ display:flex; }

.progress-box{
  min-width: 280px;
  max-width: 92vw;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(26,32,44,.96), rgba(17,24,39,.96));
  box-shadow: 0 10px 36px rgba(0,0,0,.50), inset 0 0 0 1px rgba(255,255,255,.04);
}

.progress-title{ font-weight:800; margin:0 0 10px; }
.progress-bar{ height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden }
.progress-bar > span{ display:block; height:100%; width:0%; background:#2b87ff; transition:width .18s ease }
.progress-msg{ margin-top:8px; opacity:.85 }