/* ================================================================
   SERIALAI CMS — Admin Panel  v2  modern dark
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #080f18;
    --bg2:       #0d1825;
    --bg3:       #121f30;
    --bg4:       #182840;
    --border:    rgba(255,255,255,.07);
    --border2:   rgba(255,255,255,.12);
    --accent:    #f7c948;
    --accent2:   #ffac2f;
    --danger:    #ff5d78;
    --success:   #34d399;
    --info:      #60a5fa;
    --purple:    #a78bfa;
    --text:      #e4edf6;
    --muted:     #6a8499;
    --muted2:    #8fa5ba;
    --sw:        240px;
    --radius:    16px;
    --shadow:    0 24px 64px rgba(0,0,0,.45);
}

html,body { height:100%; background:var(--bg); color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font-family:inherit; font-size:inherit; }

/* ── Layout ───────────────────────────────────────────────── */
.admin-layout { display:grid; grid-template-columns:var(--sw) 1fr; min-height:100vh; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
    position:sticky; top:0; height:100vh;
    background:linear-gradient(180deg, var(--bg2) 0%, #0b1520 100%);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column;
    overflow-y:auto; scrollbar-width:none;
}
.sidebar::-webkit-scrollbar { display:none; }

.brand {
    display:flex; align-items:center; gap:12px;
    padding:24px 20px 20px;
    border-bottom:1px solid var(--border);
}
.brand-mark {
    width:40px; height:40px; border-radius:14px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:grid; place-items:center;
    font-size:20px; font-weight:950; color:#111;
    flex-shrink:0;
    box-shadow:0 8px 24px rgba(247,201,72,.28);
}
.brand-text strong { display:block; font-size:13.5px; font-weight:900; letter-spacing:.2px; }
.brand-text span { display:block; font-size:11px; color:var(--muted2); margin-top:1px; }

/* Nav sections */
.nav-section { padding:14px 12px 4px; }
.nav-label {
    padding:0 8px; margin-bottom:4px;
    font-size:10px; font-weight:900;
    text-transform:uppercase; letter-spacing:.8px;
    color:var(--muted);
}
.menu { display:flex; flex-direction:column; gap:2px; padding:0 12px 12px; }
.menu a {
    display:flex; align-items:center; gap:10px;
    height:42px; padding:0 10px;
    border-radius:12px; font-size:13.5px; font-weight:700;
    color:var(--muted2);
    transition:background .15s,color .15s;
    position:relative;
}
.menu a .nav-icon { width:20px;height:20px;flex-shrink:0;opacity:.7;transition:opacity .15s; }
.menu a:hover { background:rgba(255,255,255,.055); color:var(--text); }
.menu a:hover .nav-icon { opacity:1; }
.menu a.active {
    background:linear-gradient(135deg,rgba(247,201,72,.14),rgba(247,201,72,.06));
    color:var(--accent); font-weight:900;
    box-shadow:inset 0 0 0 1px rgba(247,201,72,.18);
}
.menu a.active .nav-icon { opacity:1; }
.menu a.ext { color:var(--muted); font-size:13px; }
.menu a.ext:hover { color:var(--text); background:none; }

.sidebar-spacer { flex:1; }
.sidebar-footer {
    padding:12px;
    border-top:1px solid var(--border);
}
.logout {
    display:flex; align-items:center; gap:10px;
    height:42px; padding:0 12px;
    border-radius:12px; font-size:13.5px; font-weight:800;
    color:var(--danger);
    background:rgba(255,93,120,.07);
    border:1px solid rgba(255,93,120,.14);
    transition:background .15s,border-color .15s;
    cursor:pointer;
}
.logout svg { width:18px;height:18px;flex-shrink:0; }
.logout:hover { background:rgba(255,93,120,.14); border-color:rgba(255,93,120,.28); }

/* ── Content ──────────────────────────────────────────────── */
.content { min-width:0; background:var(--bg); }

.topbar {
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; padding:18px 32px;
    background:rgba(13,24,37,.82);
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(16px);
    position:sticky; top:0; z-index:40;
}
.topbar-left h1 { font-size:20px; font-weight:950; letter-spacing:-.3px; line-height:1.1; }
.topbar-left p { font-size:12.5px; color:var(--muted2); margin-top:3px; }
.top-actions { display:flex; gap:8px; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
    background:var(--bg2);
    border:1px solid var(--border);
    border-radius:20px;
    padding:24px;
}
.card-title {
    display:flex; align-items:center; gap:10px;
    font-size:15px; font-weight:900; margin-bottom:20px;
}
.card-title-icon {
    width:34px; height:34px; border-radius:11px;
    display:grid; place-items:center; flex-shrink:0;
}
.card-title-icon svg { width:18px;height:18px;flex-shrink:0; }

/* ── Stat cards ───────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat-card {
    background:var(--bg2); border:1px solid var(--border); border-radius:20px;
    padding:20px 22px; display:flex; align-items:center; gap:16px;
    transition:border-color .2s,transform .18s,box-shadow .18s;
    cursor:pointer;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.3); }
.stat-icon {
    width:52px; height:52px; border-radius:16px;
    display:grid; place-items:center; flex-shrink:0;
    font-size:24px;
}
.stat-icon svg { width:26px; height:26px; }
.stat-val { font-size:30px; font-weight:950; line-height:1; }
.stat-label { font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--muted2); margin-top:4px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:7px;
    height:38px; padding:0 16px; border-radius:12px; border:0;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#111; font-size:13.5px; font-weight:900;
    cursor:pointer; transition:opacity .18s,transform .15s;
    white-space:nowrap; text-decoration:none;
    box-shadow:0 6px 18px rgba(247,201,72,.2);
}
.btn:hover { opacity:.88; transform:translateY(-1px); }
.btn.ghost {
    background:rgba(255,255,255,.055); border:1px solid var(--border2);
    color:var(--text); box-shadow:none;
}
.btn.ghost:hover { background:rgba(255,255,255,.09); }
.btn.danger { background:rgba(255,93,120,.12); border:1px solid rgba(255,93,120,.22); color:var(--danger); box-shadow:none; }
.btn.danger:hover { background:rgba(255,93,120,.22); }
.btn.info { background:rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.22); color:var(--info); box-shadow:none; }
.btn.sm { height:32px; padding:0 12px; font-size:12.5px; border-radius:10px; }
.btn svg { width:15px;height:15px;flex-shrink:0; }

/* ── Toolbar ──────────────────────────────────────────────── */
.toolbar {
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; flex-wrap:wrap; margin-bottom:20px;
}
.toolbar-left { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.search-input {
    height:38px; padding:0 14px; border-radius:12px;
    background:var(--bg3); border:1px solid var(--border);
    color:var(--text); width:220px; outline:none;
    transition:border-color .18s,background .18s;
}
.search-input:focus { border-color:rgba(247,201,72,.35); background:var(--bg4); }
.search-input::placeholder { color:var(--muted); }
select.search-input { cursor:pointer; }

/* ── Table ────────────────────────────────────────────────── */
.table-wrap {
    overflow-x:auto; border-radius:18px;
    border:1px solid var(--border);
    background:var(--bg2);
}
table { width:100%; border-collapse:collapse; font-size:13.5px; }
thead th {
    padding:12px 16px; text-align:left;
    font-size:10.5px; font-weight:900;
    text-transform:uppercase; letter-spacing:.6px;
    color:var(--muted); background:var(--bg3);
    border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody tr { border-bottom:1px solid var(--border); transition:background .12s; }
tbody tr:last-child { border-bottom:0; }
tbody tr:hover { background:rgba(255,255,255,.02); }
tbody td { padding:13px 16px; vertical-align:middle; }
.td-poster img {
    width:44px; height:60px; object-fit:cover;
    border-radius:10px; border:1px solid var(--border);
    background:var(--bg3); display:block;
}
.td-title strong { display:block; font-weight:900; font-size:13.5px; }
.td-title span { display:block; font-size:11.5px; color:var(--muted2); margin-top:2px; }
.td-actions { display:flex; gap:6px; }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:999px;
    font-size:11px; font-weight:900;
    background:rgba(255,255,255,.06);
    border:1px solid var(--border); color:var(--muted2);
}
.badge.green { background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.25); color:var(--success); }
.badge.yellow { background:rgba(247,201,72,.1); border-color:rgba(247,201,72,.25); color:var(--accent); }
.badge.red { background:rgba(255,93,120,.09); border-color:rgba(255,93,120,.22); color:var(--danger); }
.badge.blue { background:rgba(96,165,250,.09); border-color:rgba(96,165,250,.22); color:var(--info); }

/* ── Forms ────────────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-group.span2 { grid-column:span 2; }
label {
    font-size:11px; font-weight:900;
    text-transform:uppercase; letter-spacing:.6px; color:var(--muted2);
}
input[type="text"],input[type="number"],input[type="email"],
input[type="url"],input[type="password"],input[type="date"],
select,textarea {
    width:100%; height:42px; padding:0 14px;
    background:var(--bg3); border:1px solid var(--border);
    border-radius:12px; color:var(--text); outline:none;
    transition:border-color .18s,background .18s;
}
textarea { height:auto; padding:12px 14px; resize:vertical; min-height:100px; }
input:focus,select:focus,textarea:focus {
    border-color:rgba(247,201,72,.4); background:var(--bg4);
}
input::placeholder,textarea::placeholder { color:var(--muted); }
select option { background:var(--bg2); }
.form-hint { font-size:12px; color:var(--muted); }
input[type="file"] {
    height:auto; padding:10px 14px; cursor:pointer;
    background:var(--bg3); border:1px dashed rgba(255,255,255,.14);
    border-radius:12px;
}
input[type="file"]:hover { border-color:rgba(247,201,72,.3); }
input[type="checkbox"] { width:18px;height:18px; accent-color:var(--accent); cursor:pointer; }

/* ── Section divider ──────────────────────────────────────── */
.section-block {
    padding:20px; border-radius:16px;
    background:var(--bg3); border:1px solid var(--border);
    margin-bottom:16px;
}
.section-block-title {
    font-size:13px; font-weight:900; margin-bottom:16px;
    display:flex; align-items:center; gap:8px; color:var(--text);
}
.section-block-title svg { width:16px;height:16px;flex-shrink:0;color:var(--accent); }

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    display:flex; align-items:center; gap:12px;
    padding:14px 18px; border-radius:14px;
    font-size:13.5px; font-weight:700; margin-bottom:18px;
}
.alert svg { width:20px;height:20px;flex-shrink:0; }
.alert.success { background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.22); color:var(--success); }
.alert.error   { background:rgba(255,93,120,.08); border:1px solid rgba(255,93,120,.22); color:var(--danger); }
.alert.info    { background:rgba(96,165,250,.08); border:1px solid rgba(96,165,250,.22); color:var(--info); }

/* ── Pagination ───────────────────────────────────────────── */
.pagination { display:flex; gap:6px; align-items:center; margin-top:22px; flex-wrap:wrap; }
.pagination a,.pagination span {
    min-width:36px; height:36px; display:grid; place-items:center;
    border-radius:10px; font-size:13px; font-weight:860;
    background:var(--bg3); border:1px solid var(--border);
    color:var(--muted2); transition:background .15s,color .15s;
}
.pagination a:hover { background:rgba(255,255,255,.07); color:var(--text); }
.pagination span.active { background:rgba(247,201,72,.14); border-color:rgba(247,201,72,.3); color:var(--accent); }

/* ── TMDb result card ─────────────────────────────────────── */
.tmdb-card {
    display:grid; grid-template-columns:100px 1fr 270px;
    gap:20px; align-items:start;
    padding:22px; background:var(--bg2);
    border:1px solid var(--border); border-radius:20px;
    transition:border-color .2s;
}
.tmdb-card:hover { border-color:rgba(247,201,72,.2); }
.tmdb-card img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:12px; }
.tmdb-import-box {
    padding:16px; background:var(--bg3);
    border:1px solid var(--border); border-radius:14px;
}

/* ── Info grid (what we import) ───────────────────────────── */
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.info-block {
    padding:16px; background:var(--bg3);
    border:1px solid var(--border); border-radius:14px;
    transition:border-color .2s;
}
.info-block:hover { border-color:rgba(247,201,72,.18); }
.info-block-icon { font-size:22px; margin-bottom:10px; }
.info-block strong { display:block; font-size:13px; font-weight:900; margin-bottom:4px; }
.info-block p { font-size:12px; color:var(--muted2); line-height:1.5; margin:0; }

/* ── Login ────────────────────────────────────────────────── */
.login-wrap {
    min-height:100vh; display:flex;
    align-items:center; justify-content:center; padding:24px;
    background:
        radial-gradient(circle at 15% 50%, rgba(247,201,72,.07), transparent 45%),
        radial-gradient(circle at 85% 20%, rgba(96,165,250,.06), transparent 40%),
        var(--bg);
}
.login-box {
    width:420px; background:var(--bg2);
    border:1px solid var(--border); border-radius:24px;
    padding:36px; box-shadow:var(--shadow);
}
.login-logo {
    width:56px; height:56px; border-radius:18px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:grid; place-items:center;
    font-size:28px; font-weight:950; color:#111;
    margin-bottom:20px;
    box-shadow:0 12px 32px rgba(247,201,72,.3);
}
.login-box h1 { font-size:26px; font-weight:950; letter-spacing:-.5px; margin-bottom:6px; }
.login-box > p { color:var(--muted2); font-size:14px; margin-bottom:28px; }
.login-box .form-group { margin-bottom:16px; }
.login-box .btn { width:100%; justify-content:center; height:46px; font-size:15px; margin-top:6px; }
.login-box input { background:var(--bg3); }

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:1100px){
    .stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px){
    :root { --sw:64px; }
    .brand-text,.nav-label,.menu a span { display:none; }
    .brand { justify-content:center; padding:16px 12px; }
    .menu a { justify-content:center; padding:0; height:44px; }
    .menu a .nav-icon { margin:0; opacity:.8; }
    .sidebar-footer .logout span { display:none; }
    .logout { justify-content:center; padding:0; width:44px; height:44px; border-radius:50%; }
    .topbar { padding:14px 20px; }
    .nav-section { padding:10px 6px 2px; }
    .info-grid { grid-template-columns:1fr 1fr; }
    .tmdb-card { grid-template-columns:80px 1fr; }
    .tmdb-import-box { grid-column:span 2; }
}
@media(max-width:600px){
    .admin-layout { grid-template-columns:1fr; }
    .sidebar { position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;flex-direction:row;z-index:100;border-right:none;border-top:1px solid var(--border); }
    .brand,.sidebar-footer,.nav-section { display:none; }
    .menu { flex-direction:row; padding:6px 8px; overflow-x:auto; }
    .menu a { flex-direction:column; height:52px; font-size:10px; gap:3px; border-radius:10px; }
    .menu a span { display:block; font-size:10px; }
    .form-grid { grid-template-columns:1fr; }
    .form-group.span2 { grid-column:span 1; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .info-grid { grid-template-columns:1fr; }
}

/* ── Global input dark fix ──────────────────────────────────── */
input, select, textarea,
input[type="text"], input[type="number"], input[type="email"],
input[type="url"], input[type="password"], input[type="date"],
input[type="search"], input[type="file"] {
    background: var(--bg3) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    color: var(--text) !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
input:focus, select:focus, textarea:focus {
    border-color: rgba(247,201,72,.4) !important;
    background: var(--bg4) !important;
    box-shadow: 0 0 0 3px rgba(247,201,72,.08) !important;
}
input::placeholder, textarea::placeholder {
    color: var(--muted) !important;
    opacity: 1 !important;
}
/* Chrome autofill override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg3) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
}
select option { background: var(--bg2) !important; color: var(--text) !important; }
/* File input */
input[type="file"] {
    height: auto !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    border-style: dashed !important;
    border-color: rgba(255,255,255,.14) !important;
}
input[type="file"]:hover { border-color: rgba(247,201,72,.3) !important; }
/* Checkbox stays normal */
input[type="checkbox"] {
    width: 18px !important; height: 18px !important;
    border-radius: 5px !important;
    border: 1px solid var(--border2) !important;
    accent-color: var(--accent) !important;
    cursor: pointer !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background: var(--bg3) !important;
}

/* ── Autocomplete dropdown dark (Chrome) ── */
input:-webkit-autofill { transition: background-color 9999s ease-in-out 0s !important; }
::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.5); }
::-webkit-list-button { display: none !important; }

/* ── Unified input height and sizing ── */
.admin-layout input:not([type="checkbox"]):not([type="file"]),
.admin-layout select,
.admin-layout textarea {
    height: 42px !important;
    font-size: 14px !important;
    padding: 0 14px !important;
    width: 100% !important;
    display: block !important;
}
.admin-layout textarea { height: auto !important; padding: 11px 14px !important; min-height: 90px !important; }
.admin-layout input[type="file"] { height: auto !important; padding: 10px 14px !important; }
.admin-layout input[type="number"] { -moz-appearance: textfield !important; }
.admin-layout input[type="number"]::-webkit-outer-spin-button,
.admin-layout input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none !important; }

/* ── Search input in toolbar ── */
.search-input { height: 38px !important; font-size: 13.5px !important; }

/* Disable browser datalist/autocomplete popup styling */
input[list] { appearance: none !important; }