/* =====================================================================
   Spotify dark theme over AdminLTE v4
   Cargar DESPUÉS de adminlte.min.css
   ===================================================================== */
:root,
[data-bs-theme="dark"]{
  --spt-green:#1DB954;
  --spt-green-hover:#1ed760;
  --spt-green-soft:#1DB95422;
  --spt-bg-base:#000000;
  --spt-bg-elev:#121212;
  --spt-bg-card:#181818;
  --spt-bg-hover:#282828;
  --spt-bg-input:#2a2a2a;
  --spt-border:#2a2a2a;
  --spt-border-soft:#1f1f1f;
  --spt-text:#FFFFFF;
  --spt-text-soft:#B3B3B3;
  --spt-text-mute:#6a6a6a;
  --bs-body-bg:var(--spt-bg-elev);
  --bs-body-color:var(--spt-text);
  --bs-body-color-rgb:255,255,255;
  --bs-secondary-bg:var(--spt-bg-card);
  --bs-tertiary-bg:var(--spt-bg-base);
  --bs-emphasis-color:var(--spt-text);
  --bs-emphasis-color-rgb:255,255,255;
  --bs-border-color:var(--spt-border);
  --bs-border-color-translucent:rgba(255,255,255,.06);
  --bs-primary:var(--spt-green);
  --bs-primary-rgb:29,185,84;
  --bs-link-color:var(--spt-green);
  --bs-link-color-rgb:29,185,84;
  --bs-link-hover-color:var(--spt-green-hover);
}

html, body{ background:var(--spt-bg-base); color:var(--spt-text); font-family:'Source Sans 3','Inter',system-ui,sans-serif; letter-spacing:-.005em; }
body.bg-body-tertiary{ background:var(--spt-bg-base) !important; }

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--spt-bg-base)}
::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#3a3a3a}

/* ---------- Layout shell ---------- */
.app-header.navbar{
  background:rgba(0,0,0,.55) !important;
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--spt-border-soft);
}
.app-header .nav-link{ color:var(--spt-text-soft); }
.app-header .nav-link:hover{ color:var(--spt-text); }

.app-sidebar{
  background:var(--spt-bg-base) !important;
  border-right:1px solid var(--spt-border-soft) !important;
}
.sidebar-brand{ border-bottom:1px solid var(--spt-border-soft); padding:14px 16px; }
.sidebar-brand .brand-link{ color:var(--spt-text) !important; font-weight:800; }
.sidebar-brand .brand-image{
  color:var(--spt-green); width:32px;height:32px; background:transparent;
  display:inline-flex;align-items:center;justify-content:center; font-size:24px;margin-right:.5rem;
  border:none;
}
.sidebar-brand .brand-link:hover .brand-image{ color:var(--spt-green-hover); }

.app-sidebar .sidebar-menu .nav-link{
  color:var(--spt-text-soft); border-radius:6px; margin:1px 8px; padding:.55rem .75rem;
  font-weight:600; font-size:.92rem;
}
.app-sidebar .sidebar-menu .nav-link:hover{ background:#1a1a1a; color:var(--spt-text); }
.app-sidebar .sidebar-menu .nav-link.active{
  background:#1a1a1a; color:var(--spt-text); position:relative;
}
.app-sidebar .sidebar-menu .nav-link.active::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px;height:18px;background:var(--spt-green);border-radius:3px;
}
.app-sidebar .nav-icon{ color:var(--spt-green); }
.app-sidebar .sidebar-header{
  color:var(--spt-text-mute); font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  padding:14px 18px 6px; font-weight:700;
}

.app-main{ background:linear-gradient(180deg,#1f1f1f 0%,var(--spt-bg-elev) 220px) !important; }
.app-content-header{ background:transparent !important; padding-top:1.25rem; }
.app-content-header h3{ font-weight:800; letter-spacing:-.02em; }
.app-footer{ background:var(--spt-bg-base) !important; border-top:1px solid var(--spt-border-soft); color:var(--spt-text-mute); }

/* ---------- Cards ---------- */
.card{
  background:var(--spt-bg-card) !important;
  border:1px solid var(--spt-border-soft) !important;
  border-radius:14px !important;
  color:var(--spt-text);
}
.card-header{ background:transparent !important; border-bottom:1px solid var(--spt-border-soft) !important; padding:1rem 1.25rem; }
.card-title{ font-weight:800; }

/* small-box (widgets) */
.small-box{ border-radius:14px !important; overflow:hidden; }
.small-box.text-bg-primary{ background:linear-gradient(135deg,#1DB954,#0f8a3c) !important; color:#000 !important; }
.small-box.text-bg-success{ background:linear-gradient(135deg,#1DB954,#0f8a3c) !important; color:#000 !important; }
.small-box.text-bg-warning{ background:linear-gradient(135deg,#f59e0b,#b45309) !important; color:#000 !important; }
.small-box.text-bg-danger{ background:linear-gradient(135deg,#e22134,#7f1d2a) !important; color:#fff !important; }
.small-box.text-bg-info{ background:linear-gradient(135deg,#3b82f6,#1e3a8a) !important; color:#fff !important; }
.small-box .small-box-footer{ background:rgba(0,0,0,.2) !important; color:inherit !important; }

/* ---------- Tables ---------- */
.table{ --bs-table-bg:transparent; --bs-table-color:var(--spt-text); --bs-table-border-color:var(--spt-border-soft); --bs-table-striped-bg:#1c1c1c; --bs-table-hover-bg:#222; color:var(--spt-text); }
.table thead th{ background:#1f1f1f; color:var(--spt-text-soft); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; border-bottom:1px solid var(--spt-border); }
.table > :not(caption) > * > *{ border-bottom-color:var(--spt-border-soft); }
.table code{ background:var(--spt-bg-hover); color:var(--spt-green); padding:3px 8px; border-radius:4px; font-family:'JetBrains Mono','Consolas',monospace; }

/* ---------- Forms ---------- */
.form-control, .form-select{
  background:var(--spt-bg-input) !important; border-color:transparent !important; color:var(--spt-text) !important;
}
.form-control:focus, .form-select:focus{ border-color:var(--spt-green) !important; box-shadow:0 0 0 .15rem var(--spt-green-soft) !important; }
.form-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--spt-text-soft); font-weight:700; }

/* ---------- Buttons ---------- */
.btn-primary{ background:var(--spt-green) !important; border-color:var(--spt-green) !important; color:#000 !important; border-radius:999px !important; font-weight:700; padding:.45rem 1.2rem; letter-spacing:.03em; }
.btn-primary:hover{ background:var(--spt-green-hover) !important; border-color:var(--spt-green-hover) !important; transform:scale(1.02); }
.btn-outline-secondary{ border-radius:999px !important; border-color:var(--spt-border) !important; color:var(--spt-text-soft) !important; }
.btn-outline-secondary:hover{ background:var(--spt-bg-hover) !important; color:var(--spt-text) !important; }
.btn-danger{ border-radius:999px !important; }
.btn-success{ background:var(--spt-green) !important; border-color:var(--spt-green) !important; color:#000 !important; border-radius:999px !important; font-weight:700; }
.btn-sm{ padding:.25rem .75rem; font-size:.78rem; }

/* ---------- Dropdown dentro de tabla: que no quede cortado por overflow ---------- */
.table-responsive { overflow: visible !important; }
.dropdown-menu { z-index: 1080; }

/* ---------- Badges ---------- */
.badge.text-bg-success{ background:var(--spt-green-soft) !important; color:var(--spt-green) !important; }
.badge.text-bg-secondary{ background:#3a3a3a !important; color:var(--spt-text-soft) !important; }
.badge.text-bg-warning{ background:#f59e0b22 !important; color:#fbbf24 !important; }
.badge.text-bg-danger{ background:#e2213422 !important; color:#ff8a93 !important; }
.badge.text-bg-info{ background:#3b82f622 !important; color:#93c5fd !important; }
.badge{ border-radius:999px; padding:.25em .7em; font-weight:700; letter-spacing:.04em; font-size:.7rem; text-transform:uppercase; }

/* ---------- Modals & dropdowns ---------- */
.modal-content{ background:var(--spt-bg-elev) !important; border:1px solid var(--spt-border) !important; border-radius:14px !important; }
.modal-header{ border-bottom-color:var(--spt-border-soft) !important; }
.modal-footer{ border-top-color:var(--spt-border-soft) !important; }
.dropdown-menu{ background:var(--spt-bg-elev) !important; border:1px solid var(--spt-border) !important; }
.dropdown-item{ color:var(--spt-text-soft) !important; }
.dropdown-item:hover{ background:var(--spt-bg-hover) !important; color:var(--spt-text) !important; }
.dropdown-item.active{ background:var(--spt-green) !important; color:#000 !important; }

/* ---------- Topbar credits chip ---------- */
.credits-chip{ background:var(--spt-bg-hover); color:var(--spt-green); padding:6px 14px; border-radius:999px; font-weight:700; font-size:.85rem; }
.user-avatar{ width:34px; height:34px; border-radius:50%; background:var(--spt-green); color:#000; display:inline-flex; align-items:center; justify-content:center; font-weight:800; }

/* ---------- Row states ---------- */
.table tbody tr.row-expired td { opacity:.6; }
.table tbody tr.row-expired td:first-child code { text-decoration:line-through; }
.table tbody tr.row-disabled td { opacity:.45; }

/* ---------- Pagination ---------- */
.pagination .page-link{ background:var(--spt-bg-card) !important; border-color:var(--spt-border) !important; color:var(--spt-text-soft) !important; }
.pagination .page-link:hover{ background:var(--spt-bg-hover) !important; color:var(--spt-text) !important; }
.pagination .page-item.active .page-link{ background:var(--spt-green) !important; border-color:var(--spt-green) !important; color:#000 !important; }
.pagination .page-item.disabled .page-link{ background:var(--spt-bg-card) !important; color:var(--spt-text-mute) !important; }

/* ---------- Login ---------- */
.login-page{ background:radial-gradient(ellipse at top left,#1DB95422 0%,transparent 50%),radial-gradient(ellipse at bottom right,#1DB95411 0%,transparent 50%),#000; min-height:100vh; }
.login-box{ width:380px; max-width:92vw; }
.login-box .card{ border-radius:18px; padding:8px; }
.login-logo .dot{ width:64px; height:64px; border-radius:50%; background:var(--spt-green); color:#000; display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:32px; margin-bottom:10px; }

/* ---------- Page title (Spotify big) ---------- */
.page-title{ font-size:1.9rem; font-weight:800; letter-spacing:-.02em; margin:0 0 1.2rem; }
.page-title small{ font-size:.85rem; font-weight:500; color:var(--spt-text-soft); margin-left:.5rem; letter-spacing:0; }

/* ---------- Toast ---------- */
.flash{ padding:.8rem 1.1rem; border-radius:10px; font-weight:600; margin-bottom:1rem; }
.flash.ok{ background:var(--spt-green-soft); color:var(--spt-green); border:1px solid var(--spt-green); }
.flash.error{ background:#e2213422; color:#ff8a93; border:1px solid #e22134; }
.flash.info{ background:#3b82f622; color:#93c5fd; border:1px solid #3b82f6; }