/* Admin CP */

:root{
  --ac-panel: rgba(0,0,0,0.55);
  --ac-panel-2: rgba(0,0,0,0.42);
  --ac-border: rgba(255,255,255,0.10);
  --ac-text: rgba(255,255,255,0.92);
  --ac-muted: rgba(255,255,255,0.70);
  --ac-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.adminShell{
  display:grid;
  grid-template-columns: 240px minmax(0,1fr);
  gap: 14px;
  padding: 16px;
}

.adminSidebar{
  background: var(--ac-panel);
  border: 1px solid var(--ac-border);
  border-radius: 14px;
  box-shadow: var(--ac-shadow);
  overflow:hidden;
}

/* Match actual admin.html classes */
.adminSidebarTitle{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--ac-text);
}

/* legacy header class kept for compatibility */
.adminSidebarHeader{ padding: 14px 14px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.adminSidebarHeader .h{ font-weight: 900; letter-spacing: 0.04em; color: var(--ac-text); }

.adminNav{
  display:flex;
  flex-direction:column;
  padding: 8px;
  gap: 6px;
}

.adminNav a,
.adminNav .adminNavItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--ac-text);
  text-decoration:none;
  font-weight: 800;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.06);
  cursor:pointer;
  text-align:left;
  width: 100%;
}

.adminNav a:hover,
.adminNav .adminNavItem:hover{ background: rgba(255,255,255,0.10); }
.adminNav a.active,
.adminNav .adminNavItem.isActive{ border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.14); }

.adminSidebarFoot{ padding: 10px 14px 14px; }
.miniNote{ font-size: 12px; color: rgba(255,255,255,0.70); line-height: 1.45; }

.adminMain{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.adminGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.adminCard{
  background: var(--ac-panel);
  border: 1px solid var(--ac-border);
  border-radius: 14px;
  box-shadow: var(--ac-shadow);
  overflow:hidden;
}

.adminCardHeader{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

/* Support both old and new title/sub classes */
.adminCardHeader .title,
.adminCardTitle{
  font-weight: 900;
  color: var(--ac-text);
  letter-spacing: 0.03em;
}

.adminCardHeader .sub,
.adminCardSub{
  font-size: 12px;
  color: var(--ac-muted);
}

.adminCardBody{ padding: 14px; }

.adminRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.adminRow .spacer{ flex:1; }

.adminField{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.adminField label{ font-size: 12px; font-weight: 900; color: var(--ac-muted); letter-spacing: 0.04em; }
.adminField input[type="text"],
.adminField select{
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.adminField input[type="text"]::placeholder{ color: rgba(255,255,255,0.55); }

.adminHelp{ font-size: 12px; color: rgba(255,255,255,0.70); line-height: 1.45; }

/* Buttons */
.acBtn,
.btn{
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  color:#fff;
  background: rgba(255,255,255,0.10);
  cursor:pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.acBtn:hover,
.btn:hover{ background: rgba(255,255,255,0.14); transform: translateY(-1px); }
.acBtn:active,
.btn:active{ transform: translateY(0); }
.acBtn:disabled,
.btn:disabled{ opacity: 0.6; cursor: not-allowed; transform:none; }

.acBtn.primary,
.btn.btnPrimary{ background: rgba(158,27,27,0.85); border-color: rgba(255,255,255,0.20); }
.acBtn.primary:hover,
.btn.btnPrimary:hover{ background: rgba(158,27,27,0.95); }

.acBtn.ghost,
.btn.btnGhost{ background: rgba(255,255,255,0.06); }

.acBtn.danger,
.btn.btnDanger{ background: rgba(150,30,30,0.20); border-color: rgba(255,80,80,0.35); }
.acBtn.danger:hover,
.btn.btnDanger:hover{ background: rgba(150,30,30,0.28); }

.btnSmall{
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 10px;
}
.btnSmall.danger{ background: rgba(150,30,30,0.20); border-color: rgba(255,80,80,0.35); }

.acPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  color:#fff;
  font-weight: 900;
}

/* Library grid */
.bgGrid,
.bgLibrary{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.bgItem,
.bgTile{
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* JS renders <img class="bgThumb"> */
.bgThumb{
  width: 100%;
  height: 110px;
  object-fit: cover;
  display:block;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.bgMeta{
  padding: 10px 10px 8px;
  display:flex;
  flex-direction:column;
  gap: 4px;
}

.bgMeta .name,
.bgName{ font-weight: 900; color: var(--ac-text); font-size: 13px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.bgMeta .path{ font-size: 11px; color: rgba(255,255,255,0.55); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.bgFlags{ font-size: 12px; color: rgba(255,255,255,0.70); }

.bgActions{
  padding: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bgActions .acBtn{ padding: 8px 10px; font-size: 12px; border-radius: 10px; }
.bgActions .full{ grid-column: 1 / -1; }

/* Tabs */
.adminTab{ display:none; }
.adminTab.active{ display:block; }

/* Basic form/table helpers used in admin.html */
.formRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.label{ font-size: 12px; font-weight: 900; color: var(--ac-muted); letter-spacing: 0.04em; }
.input,.select{
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.status{ font-size: 12px; color: rgba(255,255,255,0.80); }
.helpText{ font-size: 12px; color: rgba(255,255,255,0.70); line-height: 1.45; }

.table{ border-collapse: collapse; }
.table th,.table td{ padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.90); }
.table th{ text-align:left; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,0.70); }

/* Switch */
.switch{ position: relative; display:inline-block; width: 44px; height: 24px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; cursor:pointer; inset:0; background: rgba(255,255,255,0.18); border-radius: 999px; transition: .15s; }
.switch .slider:before{ content:""; position:absolute; height: 18px; width: 18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; }
.switch input:checked + .slider{ background: rgba(158,27,27,0.75); }
.switch input:checked + .slider:before{ transform: translateX(20px); }

@media (max-width: 900px){
  .adminShell{ grid-template-columns: 1fr; }
  .adminSidebar{ position: sticky; top: 10px; }
}


/* Dashboard extras */
.dashStats{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}
.statCard{
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px 14px;
}
.statNum{ font-size: 24px; font-weight: 1000; color: #fff; line-height: 1; }
.statLabel{ margin-top: 6px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,0.70); }

.adminDivider{ height:1px; background: rgba(255,255,255,0.08); margin: 14px 0; }

.adminGrid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 1100px){
  .adminGrid2{ grid-template-columns: 1fr; }
}

.adminCardInner{
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 12px 12px 10px;
}
.adminCardInnerTitle{
  font-weight: 1000;
  color: rgba(255,255,255,0.92);
  margin-bottom: 6px;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.10);
}
.badge.ok{ background: rgba(80,200,120,0.16); border-color: rgba(80,200,120,0.22); }
.badge.warn{ background: rgba(240,190,70,0.16); border-color: rgba(240,190,70,0.22); }

.chipList{ display:flex; flex-wrap:wrap; gap: 8px; padding-top: 8px; }
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: rgba(255,255,255,0.92);
  font-weight: 900;
}
.chipText{ max-width: 240px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.chipX{
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  cursor:pointer;
  line-height: 18px;
  font-weight: 1000;
}
.chipX:hover{ background: rgba(0,0,0,0.28); }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: rgba(255,255,255,0.86); }
.bad{ color: #ffb3b3; }

/* --- AdminCP enhancements --- */
.bulkRow{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; }

.uhModal{ position: fixed; inset: 0; display: none; z-index: 9999; }
.uhModal.open{ display: block; }
.uhBackdrop{ position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.uhPanel{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,12,14,0.72);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.uhTop{ display:flex; justify-content:space-between; align-items:flex-start; gap: 16px; padding: 16px 18px 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.uhTitle{ font-size: 18px; font-weight: 1000; color: rgba(255,255,255,0.95); }
.uhSub{ margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.72); }

.uhTabs{ display:flex; gap: 8px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.uhTab{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.86);
  padding: 8px 12px;
  border-radius: 10px;
  cursor:pointer;
  font-weight: 900;
}
.uhTab:hover{ background: rgba(255,255,255,0.12); }
.uhTab.isActive{ background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.22); }

.uhBody{ padding: 14px 18px 18px 18px; overflow: auto; max-height: calc(100vh - 190px); }
.uhPane{ display: none; }
.uhPane.active{ display: block; }
.uhCard{ background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 12px; }
.uhCardTitle{ font-weight: 1000; color: rgba(255,255,255,0.92); margin-bottom: 8px; }
.feToolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.feToolbarLeft{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.feToolbarRight{display:flex;align-items:center;gap:10px;}

.feToolbar .select{min-width:320px;max-width:480px;}

.feEditorWrap{
  margin-top:12px;
  display:flex;
  height: 65vh;
  min-height: 520px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.28);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.feGutter{
  width: 56px;
  padding: 12px 10px;
  margin:0;
  text-align:right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  line-height: 18px;
  color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.24);
  border-right: 1px solid rgba(255,255,255,0.10);
  user-select: none;
  overflow:hidden;
}

.feEditor{
  flex:1;
  border:0;
  outline:none;
  resize:none;
  padding: 12px 14px;
  background: transparent;
  color: rgba(255,255,255,0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 13px;
  line-height: 18px;
  white-space: pre;
  tab-size: 2;
}

.feEditor::selection{ background: rgba(158,27,27,0.35); }