/* =====================================================================
   Black Thread Society — admin backend theme
   Same dark/blood palette as the storefront, but denser and utilitarian:
   this is a control room, not a showcase.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --void: #0a0a0c;
  --panel: #131316;
  --panel-2: #191a1e;
  --line: #26262c;
  --bone: #ece8dd;
  --bone-dim: #a9a5a0;
  --ash: #7c7c82;
  --blood: #7a1128;
  --blood-bright: #b21e3c;
  --gold: #c9a227;
  --success: #3f8f5f;
  --info: #4a90c4;
  --radius: 4px;
  --sidebar-w: 230px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--void); color: var(--bone);
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px;
}
a { color: inherit; text-decoration: none; }
.admin-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.admin-sidebar { background: var(--panel); border-right: 1px solid var(--line); padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-sidebar .brand { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 1.05rem; padding: 6px 10px 24px; }
.admin-sidebar .brand span { color: var(--blood-bright); }
.admin-nav-group { margin-bottom: 18px; }
.admin-nav-group .label { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ash); padding: 0 10px 8px; }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); color: var(--bone-dim); font-size: .88rem; margin-bottom: 2px; }
.admin-nav a:hover { background: var(--panel-2); color: var(--bone); }
.admin-nav a.active { background: linear-gradient(90deg, rgba(178,30,60,.25), transparent); color: var(--bone); border-left: 2px solid var(--blood-bright); padding-left: 10px; }

.admin-main { padding: 28px 36px 60px; max-width: 1400px; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.admin-topbar h1 { font-family: 'Oswald', sans-serif; font-size: 1.5rem; margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.admin-topbar .sub { color: var(--ash); font-size: .85rem; margin-top: 4px; }
.admin-user { display: flex; align-items: center; gap: 12px; font-size: .85rem; color: var(--bone-dim); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.kpi-card .label { color: var(--ash); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.kpi-card .value { font-size: 1.8rem; font-weight: 700; font-family: 'Oswald', sans-serif; }
.kpi-card .delta { font-size: .78rem; margin-top: 6px; }
.kpi-card .delta.up { color: var(--success); }
.kpi-card .delta.down { color: var(--blood-bright); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.card-head h2 { font-size: 1.05rem; margin: 0; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
@media (max-width: 1000px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

table.admin-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.admin-table th { text-align: left; color: var(--ash); text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; padding: 0 12px 12px; border-bottom: 1px solid var(--line); font-family: 'Oswald', sans-serif; }
table.admin-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.admin-table tr:hover td { background: var(--panel-2); }
.row-thumb { width: 44px; height: 44px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--line); }

.btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; font-size: .78rem; padding: 10px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2); color: var(--bone); cursor: pointer; }
.btn:hover { border-color: var(--bone-dim); }
.btn-primary { background: linear-gradient(180deg, var(--blood-bright), var(--blood)); border-color: var(--blood); color: #fff; }
.btn-primary:hover { border-color: var(--blood-bright); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--bone-dim); }
.btn-ghost:hover { color: var(--bone); }
.btn-danger { background: transparent; border-color: var(--blood); color: #ff9fae; }
.btn-danger:hover { background: rgba(122,17,40,.2); }
.btn-sm { padding: 6px 12px; font-size: .7rem; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: .78rem; color: var(--ash); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .05em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); color: var(--bone); font-family: inherit; font-size: .9rem;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blood-bright); }
.field-hint { font-size: .75rem; color: var(--ash); margin-top: 6px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

.badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-family: 'Oswald', sans-serif; }
.badge-active, .badge-connected, .badge-paid, .badge-delivered { background: rgba(63,143,95,.2); color: #a8f0c4; }
.badge-draft, .badge-disconnected { background: rgba(120,120,120,.25); color: var(--ash); }
.badge-pending { background: rgba(201,162,39,.2); color: var(--gold); }
.badge-bot { background: rgba(178,30,60,.2); color: #ff9fae; }
.badge-human { background: rgba(74,144,196,.2); color: #a9d6f5; }

.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: .87rem; }
.alert-error { background: rgba(178,30,60,.15); border: 1px solid var(--blood); color: #ffd7dc; }
.alert-success { background: rgba(63,143,95,.15); border: 1px solid var(--success); color: #c9f0d8; }
.alert-info { background: rgba(74,144,196,.12); border: 1px solid var(--info); color: #cfe8fb; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tabs a { padding: 12px 18px; color: var(--ash); font-size: .85rem; border-bottom: 2px solid transparent; }
.tabs a.active { color: var(--bone); border-color: var(--blood-bright); }

.upload-drop { border: 1px dashed var(--line); border-radius: var(--radius); padding: 24px; text-align: center; color: var(--ash); font-size: .85rem; cursor: pointer; }
.upload-drop:hover { border-color: var(--bone-dim); }
.thumb-preview { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.thumb-preview .item { position: relative; width: 90px; height: 90px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.thumb-preview .item img { width: 100%; height: 100%; object-fit: cover; }
.thumb-preview .item .del { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.7); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: .7rem; cursor: pointer; }

.variant-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 0.8fr auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.variant-row input[type=color] { padding: 2px; height: 40px; }

.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 20%, #1b1b1f, var(--void)); }
.login-card { width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; }
.login-card .brand { text-align: center; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 1.3rem; margin-bottom: 28px; }
.login-card .brand span { color: var(--blood-bright); }

.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 6px; animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(63,143,95,.6); } 70% { box-shadow: 0 0 0 6px rgba(63,143,95,0); } 100% { box-shadow: 0 0 0 0 rgba(63,143,95,0); } }
.live-feed { max-height: 360px; overflow-y: auto; }
.live-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
.live-row .path { color: var(--bone); }
.live-row .meta { color: var(--ash); }

.sort-arrows { display: flex; flex-direction: column; gap: 2px; }
.sort-arrows button { background: none; border: 1px solid var(--line); color: var(--ash); cursor: pointer; width: 22px; height: 18px; font-size: .6rem; line-height: 1; }

.page-key-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.page-key-tags label { display: flex; align-items: center; gap: 6px; background: var(--void); border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; font-size: .78rem; cursor: pointer; }
.page-key-tags input { width: auto; }

.pod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 18px; }
.pod-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.pod-card .pod-name { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1rem; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.pod-card p { color: var(--ash); font-size: .82rem; margin: 8px 0 16px; }

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: fixed; z-index: 100; transform: translateX(-100%); transition: transform .2s; width: 260px; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { padding: 20px; }
}