/* ============================================================
   DEP — Black & White theme
   ============================================================ */
:root {
    --bw-black: #101114;
    --bw-dark: #1c1e22;
    --bw-gray: #6b7280;
    --bw-line: #e5e7eb;
    --bw-soft: #f6f7f9;
    --bw-white: #ffffff;
    --bw-accent: #101114;
    --bw-radius: 8px;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--bw-black);
    background: var(--bw-soft);
    font-size: 14px;
    letter-spacing: .1px;
}

a { color: var(--bw-black); }

/* ---------- Auth screens ---------- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bw-black);
    padding: 24px;
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--bw-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.auth-card .brand {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.3px;
    margin-bottom: 4px;
}
/* Dark band at the top of the auth card, holding the (light) logo */
.auth-logo-band {
    background: var(--bw-black);
    margin: -32px -32px 22px;
    padding: 22px;
    border-radius: 12px 12px 0 0;
    text-align: center;
}
.auth-logo-band img { height: 40px; width: auto; }

/* Header logo (dark backgrounds) */
.brand-logo { width: 120px; height: auto; display: block; }
.auth-card .subtitle { color: var(--bw-gray); font-size: 13px; margin-bottom: 22px; }

.btn-dark, .btn-dark:focus {
    background: var(--bw-black);
    border-color: var(--bw-black);
    color: #fff;
}
.btn-dark:hover { background: #000; border-color: #000; }
.btn-google {
    background: #fff;
    border: 1px solid var(--bw-line);
    color: var(--bw-black);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-google:hover { background: var(--bw-soft); }

.form-control:focus, .form-select:focus {
    border-color: var(--bw-black);
    box-shadow: 0 0 0 .15rem rgba(16,17,20,.12);
}
.divider { display:flex; align-items:center; gap:10px; color:var(--bw-gray); font-size:12px; margin:18px 0; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--bw-line); }

/* ---------- Admin shell ---------- */
.admin-header {
    background: var(--bw-black);
    color: #fff;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    position: sticky; top: 0; z-index: 1030;
}
.admin-header .brand { font-weight: 700; color:#fff; text-decoration:none; letter-spacing:-.3px; }
.admin-header .brand i { margin-right: 8px; }
.admin-header .nav-user { margin-left:auto; display:flex; align-items:center; gap:14px; }
.admin-header .nav-user img { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.admin-header a { color:#cfd2d6; text-decoration:none; }
.admin-header a:hover { color:#fff; }

.admin-body { display:flex; min-height: calc(100vh - 56px); }
.admin-sidebar {
    width: 220px;
    background: var(--bw-dark);
    padding: 14px 10px;
    flex-shrink: 0;
}
.admin-sidebar a {
    display:flex; align-items:center; gap:10px;
    color:#c3c6cc; text-decoration:none;
    padding:9px 12px; border-radius: var(--bw-radius);
    font-size: 13.5px; margin-bottom: 2px;
}
.admin-sidebar a:hover { background: rgba(255,255,255,.06); color:#fff; }
.admin-sidebar a.active { background:#fff; color:var(--bw-black); font-weight:600; }
.admin-sidebar .group-label { color:#6b7280; font-size:11px; text-transform:uppercase; letter-spacing:.6px; padding:12px 12px 6px; }

.admin-content { flex:1; padding: 20px 24px; background: var(--bw-soft); min-width:0; }
.admin-footer {
    margin: 32px auto 8px;
    padding-top: 16px;
    border-top: 1px solid var(--bw-line);
    text-align: center;
    color: var(--bw-gray);
    font-size: 12px;
    max-width: 900px;
}
.admin-footer a { color:var(--bw-black); text-decoration:none; font-weight:600; }
.admin-footer a:hover { text-decoration:underline; }
.page-head { display:flex; align-items:center; margin-bottom:16px; }
.page-head h1 { font-size: 19px; font-weight: 700; margin:0; }
.page-head .actions { margin-left:auto; display:flex; gap:8px; }

/* ---------- Cards ---------- */
.card-bw {
    background:#fff;
    border:1px solid var(--bw-line);
    border-radius: var(--bw-radius);
}
.card-bw .card-bw-head {
    padding: 12px 16px; border-bottom:1px solid var(--bw-line);
    font-weight:600; font-size:13.5px; display:flex; align-items:center;
}
.card-bw .card-bw-body { padding: 16px; }

.stat-card { background:#fff; border:1px solid var(--bw-line); border-radius: var(--bw-radius); padding:16px; }
.stat-card .label { color:var(--bw-gray); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.stat-card .value { font-size:26px; font-weight:700; margin-top:4px; }
.stat-card .icon { float:right; opacity:.15; font-size:30px; }

/* ---------- Tree view ---------- */
.tree { list-style:none; margin:0; padding:0; font-size:13.5px; }
.tree ul { list-style:none; margin:0; padding-left:18px; }
.tree li { margin:1px 0; }
.tree .node {
    display:flex; align-items:center; gap:8px;
    padding:5px 8px; border-radius:6px; cursor:pointer; user-select:none;
}
.tree .node:hover { background: var(--bw-soft); }
.tree .node.selected { background: var(--bw-black); color:#fff; }
.tree .node.selected .muted { color:#c3c6cc; }
.tree .node .caret { width:12px; text-align:center; color:var(--bw-gray); transition: transform .15s; }
.tree .node.selected .caret { color:#fff; }
.tree .node .caret.open { transform: rotate(90deg); }
.tree .node .caret.leaf { visibility:hidden; }
.tree .node .name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tree .muted { color:var(--bw-gray); font-size:11px; }
.tree .loading { color:var(--bw-gray); font-size:12px; padding:4px 8px; }

/* ---------- Details panel ---------- */
.detail-row { display:flex; padding:7px 0; border-bottom:1px dashed var(--bw-line); font-size:13px; }
.detail-row .k { width:130px; color:var(--bw-gray); flex-shrink:0; }
.detail-row .v { flex:1; word-break:break-word; }
.mask-input-group input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.preview-box { border:1px solid var(--bw-line); border-radius:6px; overflow:hidden; background:var(--bw-soft); text-align:center; }
.preview-box img { max-width:100%; max-height:260px; }
.preview-box iframe { width:100%; height:320px; border:0; }

/* ---------- Frontend ---------- */
.front-header { background:var(--bw-black); color:#fff; padding:14px 0; }
.front-header .brand { color:#fff; text-decoration:none; font-weight:700; }
.front-wrap { max-width:1100px; margin:0 auto; padding:22px 18px; }
.breadcrumb-bw { font-size:13px; }
.breadcrumb-bw a { color:var(--bw-gray); text-decoration:none; }
.breadcrumb-bw a:hover { color:var(--bw-black); }
.item-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:12px; }
.item-tile {
    background:#fff; border:1px solid var(--bw-line); border-radius:8px;
    padding:16px 12px; text-align:center; text-decoration:none; color:var(--bw-black);
    display:block; transition:border-color .15s, box-shadow .15s;
}
.item-tile:hover { border-color:var(--bw-black); box-shadow:0 4px 14px rgba(0,0,0,.06); }
.item-tile .ic { font-size:34px; margin-bottom:10px; }
.item-tile .nm { font-size:13px; word-break:break-word; }
.item-tile .meta { font-size:11px; color:var(--bw-gray); margin-top:4px; }
.list-row td { vertical-align:middle; }

/* ---------- Welcome hero ---------- */
.welcome-hero {
    background: var(--bw-black);
    color: #fff;
    border-radius: 12px;
    padding: 40px 32px;
}
.welcome-hero h1 { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.welcome-hero .lead { color: #c3c6cc; font-size: 15px; }
.welcome-search { max-width: 520px; }
.welcome-search .input-group { border-radius: 8px; overflow: hidden; }
.welcome-search .form-control:focus { box-shadow: none; }
.welcome-stats { margin-top: 18px; display: flex; gap: 20px; flex-wrap: wrap; color: #9aa0a6; font-size: 13px; }

/* ---------- Pagination (black & white) ---------- */
.pagination { gap: 4px; }
.pagination .page-link {
    color: var(--bw-black);
    border: 1px solid var(--bw-line);
    border-radius: 6px;
    min-width: 32px;
    text-align: center;
    padding: 4px 8px;
}
.pagination .page-link:hover { background: var(--bw-soft); color: var(--bw-black); }
.pagination .page-link:focus { box-shadow: 0 0 0 .15rem rgba(16,17,20,.12); }
.pagination .page-item.active .page-link {
    background: var(--bw-black);
    border-color: var(--bw-black);
    color: #fff;
}
.pagination .page-item.disabled .page-link { color: #c3c6cc; background: #fff; }

.badge-bw { background:var(--bw-black); color:#fff; font-weight:500; }
.text-muted-bw { color:var(--bw-gray) !important; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .admin-sidebar { width: 64px; }
    .admin-sidebar a span, .admin-sidebar .group-label { display:none; }
    .admin-sidebar a { justify-content:center; }
}