/* DSIGN — tema bianco / blu scuro · Manrope */
:root {
  --ds-ivory: #F4F6FA;
  --ds-ivory-2: #E9EEF5;
  --ds-paper: #FFFFFF;
  --ds-ink: #0E1A2E;
  --ds-ink-2: #3E4C63;
  --ds-muted: #6B7890;
  --ds-line: #DCE3EE;
  --ds-gold: #1B3A6B;
  --ds-gold-2: #122A50;
  --ds-gold-soft: #E3EAF5;
  --ds-night: #0B1730;
  --ds-night-2: #13264A;
  --ds-success: #2E8B57;
  --ds-danger: #C0453A;
  --ds-warning: #D99A21;
  --ds-info: #3B7DB8;
  --ds-radius: 14px;
  --ds-sidebar-w: 272px;
  --bs-body-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: var(--ds-ink);
  --bs-body-bg: var(--ds-ivory);
  --bs-border-color: var(--ds-line);
  --bs-primary: var(--ds-gold);
  --bs-primary-rgb: 27, 58, 107;
  --bs-link-color: var(--ds-gold-2);
  --bs-link-color-rgb: 18, 42, 80;
  --bs-link-hover-color: #1E4FA3;
  --bs-link-hover-color-rgb: 30, 79, 163;
  --bs-focus-ring-color: rgba(27, 58, 107, .25);
}

html, body { background: var(--ds-ivory); }
body { font-family: var(--bs-body-font-family); font-size: .925rem; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }

/* ---------- Shell: contenuto a sinistra, menu a DESTRA ---------- */
.ds-shell { display: flex; min-height: 100vh; }
.ds-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ds-sidebar {
  width: var(--ds-sidebar-w); flex: 0 0 var(--ds-sidebar-w);
  background: linear-gradient(180deg, var(--ds-night) 0%, var(--ds-night-2) 100%);
  color: #E6ECF5; display: flex; flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, .06);
}
@media (min-width: 1200px) {
  .ds-sidebar { position: sticky; top: 0; height: 100vh; order: -1; }
}
@media (max-width: 1199.98px) {
  .ds-sidebar.offcanvas-xl { --bs-offcanvas-width: 280px; background: var(--ds-night); }
}

.ds-brand { display: flex; align-items: center; gap: .75rem; padding: 1.4rem 1.25rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.ds-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #3E6DB5, #1B3A6B); color: #fff; font-size: 1.3rem; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.ds-brand-name { font-weight: 800; letter-spacing: .14em; font-size: 1.1rem; color: #fff; }
.ds-brand-sub { font-size: .72rem; color: #9FB0CC; letter-spacing: .06em; text-transform: uppercase; }

.ds-nav { flex: 1 1 auto; overflow-y: auto; padding: .75rem .75rem 1rem; }
.ds-nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #7F90AE; padding: 1rem .75rem .4rem; font-weight: 700; }
.ds-nav-link { display: flex; align-items: center; gap: .75rem; padding: .62rem .8rem; border-radius: 10px; color: #D3DCEB; font-weight: 600; transition: background .15s, color .15s; position: relative; }
.ds-nav-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; color: #9FB0CC; }
.ds-nav-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.ds-nav-link.active { background: rgba(255,255,255,.10); color: #FFFFFF; }
.ds-nav-link.active i { color: #8FB4F0; }
.ds-nav-link.active::after { content: ''; position: absolute; left: -0.75rem; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: #8FB4F0; }
.ds-nav-badge { margin-left: auto; background: var(--ds-warning); color: #0E1A2E; font-size: .7rem; font-weight: 800; border-radius: 99px; padding: .1rem .5rem; }

.ds-user { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; border-top: 1px solid rgba(255,255,255,.06); }
.ds-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ds-gold-soft); color: var(--ds-gold-2); display: grid; place-items: center; font-weight: 800; }
.ds-user-info { flex: 1; min-width: 0; }
.ds-user-name { color: #fff; font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-user-role { color: #8E9DB8; font-size: .74rem; }

.ds-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 2rem 1rem; flex-wrap: wrap; }
.ds-topbar h1 { font-size: 1.55rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.ds-topbar p { margin: .15rem 0 0; color: var(--ds-muted); font-size: .88rem; }
.ds-topbar-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ds-content { padding: .5rem 2rem 2rem; flex: 1; }
.ds-footer { padding: 1rem 2rem 1.5rem; color: var(--ds-muted); font-size: .76rem; }
.ds-footer .qovix { letter-spacing: .12em; font-weight: 700; color: var(--ds-gold); }
@media (max-width: 767.98px) { .ds-topbar, .ds-content, .ds-footer { padding-left: 1rem; padding-right: 1rem; } }

/* ---------- Componenti ---------- */
.card { border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: var(--ds-paper); box-shadow: 0 1px 2px rgba(14,26,46,.03); }
.card-header { background: transparent; border-bottom: 1px solid var(--ds-line); padding: 1rem 1.25rem; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-header .card-title { margin: 0; font-size: 1rem; font-weight: 700; }
.card-body { padding: 1.25rem; }

.btn { border-radius: 10px; font-weight: 600; }
.btn-gold { background: var(--ds-gold); border-color: var(--ds-gold); color: #fff; }
.btn-gold:hover, .btn-gold:focus { background: var(--ds-gold-2); border-color: var(--ds-gold-2); color: #fff; }
.btn-outline-gold { border-color: var(--ds-gold); color: var(--ds-gold-2); }
.btn-outline-gold:hover { background: var(--ds-gold); color: #fff; }
.btn-soft { background: var(--ds-ivory-2); border-color: var(--ds-ivory-2); color: var(--ds-ink); }
.btn-soft:hover { background: var(--ds-gold-soft); border-color: var(--ds-gold-soft); }
.btn-icon { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; border-radius: 10px; }
.btn-primary { --bs-btn-bg: var(--ds-gold); --bs-btn-border-color: var(--ds-gold); --bs-btn-hover-bg: var(--ds-gold-2); --bs-btn-hover-border-color: var(--ds-gold-2); --bs-btn-active-bg: var(--ds-gold-2); }

.form-control, .form-select { border-radius: 10px; border-color: var(--ds-line); }
.form-control:focus, .form-select:focus { border-color: var(--ds-gold); box-shadow: 0 0 0 .2rem rgba(27, 58, 107,.18); }
.form-label { font-weight: 600; font-size: .84rem; color: var(--ds-ink-2); margin-bottom: .3rem; }
.form-text { color: var(--ds-muted); }
.form-check-input:checked { background-color: var(--ds-gold); border-color: var(--ds-gold); }
.modal-content { border-radius: 18px; border: 0; }
.modal-header { border-bottom-color: var(--ds-line); }
.modal-footer { border-top-color: var(--ds-line); }

.table { --bs-table-bg: transparent; margin: 0; }
.table > :not(caption) > * > * { padding: .75rem 1rem; border-bottom-color: var(--ds-line); }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ds-muted); font-weight: 700; background: #F7F9FC; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #F2F6FC; }

.badge { font-weight: 700; border-radius: 8px; padding: .38em .62em; }
.badge-soft-gold { background: var(--ds-gold-soft); color: var(--ds-gold-2); }
.badge-soft-success { background: #E2F2E8; color: #23704A; }
.badge-soft-danger { background: #F8E3E1; color: #A3362C; }
.badge-soft-warning { background: #FBEED3; color: #9A6A0C; }
.badge-soft-info { background: #E1ECF6; color: #2C6496; }
.badge-soft-secondary { background: #E9EDF3; color: #56627A; }

.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 10px; }
.status-dot.online { background: var(--ds-success); box-shadow: 0 0 0 4px rgba(46,139,87,.15); animation: ds-pulse 2s infinite; }
.status-dot.offline { background: var(--ds-danger); }
.status-dot.pending { background: var(--ds-warning); }
.status-dot.blocked { background: #98A2B3; }
@keyframes ds-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(46,139,87,.15); } 50% { box-shadow: 0 0 0 7px rgba(46,139,87,.05); } }

/* KPI */
.kpi { padding: 1.15rem 1.25rem; display: flex; gap: 1rem; align-items: center; height: 100%; }
.kpi-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; flex: 0 0 48px; }
.kpi-value { font-size: 1.65rem; font-weight: 800; line-height: 1.1; }
.kpi-label { color: var(--ds-muted); font-size: .8rem; font-weight: 600; }
.kpi-sub { font-size: .76rem; color: var(--ds-muted); }
.bg-gold-soft { background: var(--ds-gold-soft); color: var(--ds-gold-2); }
.bg-success-soft { background: #E2F2E8; color: #23704A; }
.bg-danger-soft { background: #F8E3E1; color: #A3362C; }
.bg-info-soft { background: #E1ECF6; color: #2C6496; }
.bg-warning-soft { background: #FBEED3; color: #9A6A0C; }

/* Media grid */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.media-card { border: 1px solid var(--ds-line); border-radius: var(--ds-radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.media-card:hover { box-shadow: 0 10px 24px rgba(14,26,46,.08); transform: translateY(-2px); }
.media-thumb { aspect-ratio: 16/9; background: #0E1A2E center/cover no-repeat; position: relative; display: grid; place-items: center; color: #9FB0CC; font-size: 2rem; cursor: pointer; }
.media-thumb .type { position: absolute; top: .5rem; left: .5rem; font-size: .7rem; }
.media-thumb .dur { position: absolute; bottom: .5rem; right: .5rem; background: rgba(0,0,0,.65); color: #fff; font-size: .72rem; padding: .1rem .45rem; border-radius: 6px; font-weight: 700; }
.media-body { padding: .75rem .85rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.media-name { font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-meta { font-size: .74rem; color: var(--ds-muted); }
.media-actions { display: flex; gap: .25rem; padding: 0 .6rem .6rem; }
.media-card.selected { outline: 3px solid var(--ds-gold); }

/* Dropzone */
.dropzone { border: 2px dashed #B9C7DD; border-radius: var(--ds-radius); padding: 1.75rem; text-align: center; background: #FAFBFE; cursor: pointer; transition: all .15s; }
.dropzone:hover, .dropzone.drag { border-color: var(--ds-gold); background: var(--ds-gold-soft); }
.dropzone i { font-size: 2rem; color: var(--ds-gold); }
.upload-item { display: flex; align-items: center; gap: .75rem; padding: .55rem .25rem; border-bottom: 1px solid var(--ds-line); font-size: .84rem; }
.upload-item .progress { flex: 1; height: 7px; }
.progress-bar { background: var(--ds-gold); }

/* Playlist editor */
.pl-items { list-style: none; margin: 0; padding: 0; }
.pl-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--ds-line); border-radius: 12px; background: #fff; margin-bottom: .5rem; }
.pl-item.inactive { opacity: .55; }
.pl-item .handle { cursor: grab; color: var(--ds-muted); font-size: 1.2rem; }
.pl-item .thumb { width: 96px; aspect-ratio: 16/9; border-radius: 8px; background: #0E1A2E center/cover no-repeat; flex: 0 0 96px; display: grid; place-items: center; color: #9FB0CC; }
.pl-item .info { flex: 1; min-width: 0; }
.pl-item .info .name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-item .dur-input { width: 86px; }
.pl-ghost { opacity: .4; background: var(--ds-gold-soft); }
.picker-list { max-height: 62vh; overflow-y: auto; }
.picker-item { display: flex; gap: .6rem; align-items: center; padding: .45rem; border-radius: 10px; cursor: pointer; }
.picker-item:hover { background: var(--ds-gold-soft); }
.picker-item .thumb { width: 72px; aspect-ratio: 16/9; border-radius: 6px; background: #0E1A2E center/cover no-repeat; flex: 0 0 72px; display: grid; place-items: center; color: #9FB0CC; font-size: .9rem; }

/* Calendario */
.fc { --fc-border-color: var(--ds-line); --fc-today-bg-color: #EEF3FB; --fc-button-bg-color: var(--ds-ivory-2); --fc-button-border-color: var(--ds-line); --fc-button-text-color: var(--ds-ink); --fc-button-hover-bg-color: var(--ds-gold-soft); --fc-button-hover-border-color: var(--ds-gold-soft); --fc-button-active-bg-color: var(--ds-gold); --fc-button-active-border-color: var(--ds-gold); font-size: .82rem; }
.fc .fc-button { border-radius: 9px; font-weight: 600; text-transform: capitalize; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 800; text-transform: capitalize; }
.fc-event { border-radius: 6px; padding: 1px 3px; font-weight: 600; cursor: pointer; }
.day-pills { display: flex; gap: .35rem; flex-wrap: wrap; }
.day-pills .btn-check + .btn { min-width: 48px; }
.btn-check:checked + .btn-outline-gold { background: var(--ds-gold); color: #fff; }

/* Varie */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ds-muted); }
.empty-state i { font-size: 2.6rem; color: #B9C7DD; display: block; margin-bottom: .5rem; }
.key-code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-weight: 700; letter-spacing: .06em; background: var(--ds-ivory-2); padding: .25rem .55rem; border-radius: 8px; }
.screen-shot { width: 100%; border-radius: 12px; background: #0E1A2E; aspect-ratio: 16/9; object-fit: contain; }
.now-playing { display: flex; gap: .75rem; align-items: center; }
.now-playing .thumb { width: 64px; aspect-ratio: 16/9; border-radius: 6px; background: #0E1A2E center/cover no-repeat; }
.text-gold { color: var(--ds-gold-2) !important; }
.small-muted { font-size: .78rem; color: var(--ds-muted); }
.list-clean { list-style: none; padding: 0; margin: 0; }
.list-clean li { padding: .65rem 0; border-bottom: 1px solid var(--ds-line); }
.list-clean li:last-child { border-bottom: 0; }
.color-chip { width: 14px; height: 14px; border-radius: 4px; display: inline-block; vertical-align: middle; }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(0deg, var(--ds-ivory) 70%, transparent); padding: 1rem 0 .25rem; }

/* Login */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art { background: radial-gradient(1200px 600px at 20% 10%, #1E3A6B 0%, #0E1A2E 60%); color: #E6ECF5; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-art .screens { position: absolute; right: -60px; bottom: 120px; display: grid; grid-template-columns: repeat(3, 150px); gap: 14px; transform: rotate(-8deg); opacity: .85; }
.login-art .screens span { aspect-ratio: 16/9; border-radius: 10px; border: 2px solid rgba(143,180,240,.35); background: linear-gradient(135deg, rgba(27, 58, 107,.25), rgba(255,255,255,.03)); }
.login-art h2 { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; max-width: 420px; }
.login-form { display: grid; place-items: center; padding: 2rem; }
.login-card { width: 100%; max-width: 380px; }
.login-credit { font-size: .76rem; color: var(--ds-muted); text-align: center; margin-top: 2rem; }
.login-credit strong { color: var(--ds-gold-2); letter-spacing: .1em; }
@media (max-width: 991.98px) { .login-wrap { grid-template-columns: 1fr; } .login-art { display: none; } }

.login-home { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .75rem; }
.login-credit { font-size: .72rem; }