/* ============================================
   Triad Pool & Spa — Admin Panel (Phase 5)
   Professional backend — Black / Grey / Slate
   ============================================ */

/* ── Variables ── */
.admin-overlay {
  --adm-bg: #0a0a0a;
  --adm-bg2: #141414;
  --adm-bg3: #1e1e1e;
  --adm-border: #2a2a2a;
  --adm-border-hover: #404040;
  --adm-text: #d4d4d4;
  --adm-sub: #737373;
  --adm-accent: #a3a3a3;
  --adm-accent2: #525252;
  --adm-white: #fafafa;
  --adm-success: #22c55e;
  --adm-danger: #ef4444;
  --adm-warn: #f59e0b;
  --adm-card: #111111;
  --adm-input: #0a0a0a;
  --adm-radius: 6px;
  --adm-highlight: #e5e5e5;
}

/* ── Overlay ── */
.admin-overlay { position:fixed; inset:0; z-index:9999; background:var(--adm-bg); display:none; flex-direction:column; overflow:hidden; transition:opacity .2s; opacity:0; font-size:13px; color:var(--adm-text); }
.admin-overlay.active { display:flex; opacity:1; }
.admin-overlay *, .admin-overlay *::before, .admin-overlay *::after { box-sizing:border-box; }

/* ── Header ── */
.admin-header { display:flex; align-items:center; justify-content:space-between; padding:0 .75rem; height:44px; border-bottom:1px solid var(--adm-border); background:var(--adm-bg2); flex-shrink:0; }
.admin-header-left { display:flex; align-items:center; gap:.5rem; flex:1; min-width:0; overflow-x:auto; }
.admin-badge { font-size:9px; font-weight:700; letter-spacing:1.5px; color:var(--adm-bg); background:var(--adm-white); padding:2px 7px; border-radius:3px; text-transform:uppercase; flex-shrink:0; }
.admin-title { font-size:12px; font-weight:600; color:var(--adm-white); flex-shrink:0; }
.admin-header-tabs { display:flex; gap:1px; margin-left:.75rem; }
.admin-tab { display:flex; align-items:center; gap:4px; padding:4px 10px; font-size:11px; font-weight:500; color:var(--adm-sub); cursor:pointer; border:none; background:none; border-radius:4px; transition:all .12s; font-family:inherit; white-space:nowrap; }
.admin-tab:hover { color:var(--adm-text); background:var(--adm-bg3); }
.admin-tab.active { color:var(--adm-white); background:var(--adm-bg3); font-weight:600; border:1px solid var(--adm-border); }
.admin-tab-icon { font-size:13px; }
.admin-header-right { display:flex; align-items:center; gap:.4rem; flex-shrink:0; }
.admin-role-label { font-size:9px; font-weight:700; letter-spacing:.5px; color:var(--adm-white); background:var(--adm-bg3); border:1px solid var(--adm-border); padding:2px 6px; border-radius:3px; text-transform:uppercase; }
.admin-user-label { font-size:11px; color:var(--adm-sub); }
.admin-user-label strong { color:var(--adm-white); }

/* ── Buttons ── */
.admin-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:5px 12px; border-radius:4px; font-size:11px; font-weight:600;
  cursor:pointer; border:1px solid var(--adm-border); background:var(--adm-bg3);
  color:var(--adm-text); transition:all .15s; font-family:inherit; line-height:1.4;
  text-decoration:none; gap:4px;
}
.admin-btn:hover { border-color:var(--adm-border-hover); background:#262626; color:var(--adm-white); }
.admin-btn:active { background:#1a1a1a; transform:translateY(0.5px); }
.admin-btn:disabled { opacity:.4; cursor:not-allowed; }

.admin-btn-primary {
  background:#fafafa; color:#0a0a0a; border-color:#fafafa;
  font-weight:700;
}
.admin-btn-primary:hover { background:#e5e5e5; border-color:#e5e5e5; color:#0a0a0a; }
.admin-btn-primary:active { background:#d4d4d4; border-color:#d4d4d4; color:#0a0a0a; }

.admin-btn-danger { color:var(--adm-danger); border-color:rgba(239,68,68,.25); background:transparent; }
.admin-btn-danger:hover { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.5); color:#f87171; }
.admin-btn-danger:active { background:rgba(239,68,68,.15); }

.admin-btn-sm { padding:3px 8px; font-size:10px; }

/* ── Body ── */
.admin-body { display:flex; flex:1; overflow:hidden; }
.admin-content { flex:1; overflow-y:auto; padding:.75rem 1rem; }
.admin-panel { display:none; }
.admin-panel.active { display:block; }
.admin-panel-header { margin-bottom:.6rem; }
.admin-panel-title { font-size:14px; font-weight:700; color:var(--adm-white); margin-bottom:2px; }
.admin-panel-desc { font-size:11px; color:var(--adm-sub); }

/* ── Cards ── */
.admin-card { background:var(--adm-card); border:1px solid var(--adm-border); border-radius:var(--adm-radius); padding:.65rem .75rem; margin-bottom:.5rem; }
.admin-card-title { font-size:12px; font-weight:600; color:var(--adm-white); margin-bottom:2px; }
.admin-card-desc { font-size:10px; color:var(--adm-sub); margin-bottom:.4rem; }
.admin-card-divider { height:1px; background:var(--adm-border); margin:.4rem 0; }

/* ── Form Elements — compact ── */
.admin-form-group { margin-bottom:.4rem; }
.admin-form-compact { margin-bottom:.3rem; }
.admin-form-group label { display:block; font-size:10px; font-weight:600; color:var(--adm-sub); margin-bottom:2px; text-transform:uppercase; letter-spacing:.3px; }
.label-hint { font-weight:400; text-transform:none; letter-spacing:0; }
.admin-input, .admin-select, .admin-textarea { width:100%; padding:5px 8px; border:1px solid var(--adm-border); border-radius:4px; font-size:12px; font-family:inherit; color:var(--adm-text); background:var(--adm-input); transition:border-color .15s; }
.admin-input:focus, .admin-select:focus, .admin-textarea:focus { outline:none; border-color:#525252; box-shadow:0 0 0 2px rgba(82,82,82,.2); }
.admin-textarea { resize:vertical; min-height:32px; }
.admin-textarea-sm { min-height:24px; }
.admin-select { cursor:pointer; -webkit-appearance:auto; }
.admin-input-row { display:flex; gap:.35rem; }
.admin-input-row .admin-form-group { flex:1; }
.admin-input-readonly { background:var(--adm-bg3); color:var(--adm-sub); cursor:not-allowed; opacity:.6; }
.admin-readonly-note { font-size:9px; color:var(--adm-sub); font-style:italic; margin-top:2px; }
.admin-upload-row { display:flex; gap:.3rem; align-items:center; }
.admin-upload-row .admin-input { flex:1; }
.admin-range { width:100%; cursor:pointer; accent-color:#a3a3a3; }

/* ── Content Split Pane ── */
.content-split-pane { display:flex; gap:0; height:calc(100vh - 85px); }
.content-editor-pane { flex:0 0 430px; overflow-y:auto; min-width:280px; max-width:70%; padding-right:0; }
.content-splitter { flex:0 0 6px; background:var(--adm-bg2); cursor:col-resize; position:relative; transition:background .15s; }
.content-splitter:hover, .content-splitter.dragging { background:#525252; }
.content-splitter::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2px; height:32px; background:var(--adm-sub); border-radius:2px; opacity:.5; }
.content-splitter:hover::after, .content-splitter.dragging::after { background:#fff; opacity:.8; }
.content-preview-pane { flex:1; display:flex; flex-direction:column; min-width:200px; border:1px solid var(--adm-border); border-radius:var(--adm-radius); overflow:hidden; background:var(--adm-bg); }
.content-section-header { display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:11px; font-weight:600; color:var(--adm-white); padding-bottom:2px; }
.content-chevron { font-size:8px; color:var(--adm-sub); transition:transform .2s; }
.content-fields.collapsed { display:none; }

/* ── Preview ── */
.preview-toolbar { display:flex; align-items:center; justify-content:space-between; padding:4px 8px; border-bottom:1px solid var(--adm-border); background:var(--adm-bg2); flex-shrink:0; }
.preview-toolbar-title { font-size:10px; font-weight:600; color:var(--adm-sub); text-transform:uppercase; letter-spacing:.5px; }
.preview-device-btns { display:flex; gap:2px; }
.preview-device-btn { padding:2px 6px; border:1px solid var(--adm-border); border-radius:3px; background:var(--adm-bg); cursor:pointer; font-size:12px; transition:all .12s; color:var(--adm-text); }
.preview-device-btn.active { border-color:#525252; background:var(--adm-bg3); }
.preview-device-btn:hover { border-color:#525252; }
.preview-iframe-wrap { flex:1; display:flex; justify-content:center; padding:4px; overflow:auto; background:var(--adm-bg); }
.preview-iframe { width:100%; height:100%; border:none; border-radius:4px; background:#fff; transition:max-width .3s; }

/* ── Slide/Logo Rows (flex, inside content editor) ── */
.admin-slide-row { display:flex; align-items:flex-start; gap:6px; padding:5px 6px; border:1px solid var(--adm-border); border-radius:4px; margin-bottom:3px; background:var(--adm-bg); cursor:grab; position:relative; }
.admin-slide-row:hover { border-color:var(--adm-border-hover); }
.drag-handle { color:var(--adm-sub); font-size:10px; cursor:grab; padding-top:4px; min-width:12px; }
.slide-fields { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.slide-actions { display:flex; flex-direction:column; gap:2px; padding-top:2px; }
.slide-thumb, .logo-thumb { width:44px; height:34px; object-fit:cover; border-radius:3px; border:1px solid var(--adm-border); }
.logo-thumb { object-fit:contain; background:var(--adm-bg3); padding:2px; }
/* Hover enlarge thumbnail */
.thumb-hover-wrap { position:relative; flex-shrink:0; }
.thumb-hover-wrap img { transition:none; }
.thumb-hover-wrap:hover img { position:absolute; z-index:100; width:180px; height:auto; max-height:160px; top:0; left:0; border:2px solid #525252; border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,.5); object-fit:contain; background:var(--adm-bg2); padding:4px; }
/* Reserve space so row doesn't collapse on hover */
.thumb-hover-wrap::after { content:''; display:block; width:44px; height:34px; }
.logo-size-control { display:flex; align-items:center; gap:3px; }
.logo-size-control label { font-size:9px; color:var(--adm-sub); min-width:30px; text-align:right; text-transform:none; }
/* Upload row */
.admin-upload-row { display:flex; gap:4px; align-items:center; }

/* ── Toggle Switch ── */
.admin-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--adm-border); }
.admin-toggle-row:last-child { border-bottom:none; }
.admin-toggle-label { font-size:12px; color:var(--adm-text); }
.admin-toggle-hint { font-size:9px; color:var(--adm-sub); }
.admin-toggle { position:relative; width:34px; height:18px; flex-shrink:0; }
.admin-toggle input { opacity:0; width:0; height:0; }
.admin-toggle-slider { position:absolute; inset:0; background:var(--adm-bg3); border-radius:18px; cursor:pointer; transition:background .2s; border:1px solid var(--adm-border); }
.admin-toggle-slider::before { content:''; position:absolute; width:12px; height:12px; border-radius:50%; background:#fff; top:2px; left:2px; transition:transform .2s; }
.admin-toggle input:checked+.admin-toggle-slider { background:#525252; border-color:#525252; }
.admin-toggle input:checked+.admin-toggle-slider::before { transform:translateX(16px); }

/* ── Table ── */
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th { text-align:left; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--adm-sub); padding:5px 6px; border-bottom:1px solid var(--adm-border); }
.admin-table td { padding:5px 6px; font-size:11px; color:var(--adm-text); border-bottom:1px solid var(--adm-border); vertical-align:middle; }
.admin-table tr:hover td { background:rgba(255,255,255,.02); }
.admin-role-badge { display:inline-block; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:1px 6px; border-radius:3px; }
.admin-role-badge.superadmin { background:rgba(250,250,250,.1); color:var(--adm-white); border:1px solid rgba(250,250,250,.2); }
.admin-role-badge.admin { background:rgba(148,163,184,.1); color:var(--adm-sub); border:1px solid rgba(148,163,184,.15); }
.admin-role-badge.review_editor { background:rgba(34,197,94,.08); color:var(--adm-success); border:1px solid rgba(34,197,94,.15); }
.admin-protected-badge { font-size:10px; }
.admin-table-actions { display:flex; gap:3px; flex-wrap:wrap; }

/* ── Role Legend ── */
.role-legend { display:flex; flex-direction:column; gap:4px; }
.role-legend-item { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--adm-text); }
.role-legend-item .admin-role-badge { min-width:75px; text-align:center; }

/* ── Permission Sub-Row ── */
.perm-sub-row td { padding:0 6px 6px !important; border-bottom:1px solid var(--adm-border); }
.perm-sub-row:hover td { background:transparent !important; }
.perm-sub-inner { display:flex; align-items:center; gap:6px; padding:4px 8px; background:var(--adm-bg); border-radius:4px; border:1px solid var(--adm-border); }
.perm-sub-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--adm-sub); white-space:nowrap; margin-right:2px; }
.perm-pill { display:inline-flex; align-items:center; gap:4px; font-size:10px; padding:3px 8px; border-radius:20px; border:1px solid var(--adm-border); color:var(--adm-sub); cursor:pointer; transition:all .15s; user-select:none; background:transparent; font-family:inherit; }
.perm-pill:hover { border-color:var(--adm-border-hover); color:var(--adm-text); }
.perm-pill.active { border-color:#525252; background:rgba(255,255,255,.06); color:var(--adm-white); font-weight:600; }
.perm-pill-dot { width:6px; height:6px; border-radius:50%; background:var(--adm-bg3); transition:background .15s; }
.perm-pill.active .perm-pill-dot { background:var(--adm-white); }

/* ── Centered Layout (Users, etc.) ── */
.admin-centered { max-width:680px; margin:0 auto; }

/* ── Login ── */
.admin-login { display:flex; align-items:center; justify-content:center; height:100%; background:linear-gradient(135deg, #141414 0%, #0a0a0a 100%); }
.admin-login-box { width:300px; padding:1.5rem; text-align:center; background:var(--adm-bg2); border:1px solid var(--adm-border); border-radius:var(--adm-radius); box-shadow:0 8px 32px rgba(0,0,0,.4); }
.admin-login-title { font-size:15px; font-weight:700; color:var(--adm-white); margin-bottom:3px; }
.admin-login-subtitle { font-size:11px; color:var(--adm-sub); margin-bottom:1.2rem; }
.admin-login-box .admin-form-group { text-align:left; }
.admin-login-box .admin-btn-primary { width:100%; padding:7px; margin-top:4px; }
.admin-login-error { font-size:10px; color:var(--adm-danger); background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); border-radius:4px; padding:4px 8px; margin-bottom:.5rem; display:none; }
.admin-login-error.show { display:block; }

/* ── Modal ── */
.admin-modal-backdrop { position:fixed; inset:0; z-index:10001; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.admin-modal-backdrop.active { display:flex; }
.admin-modal { background:#141414; border:1px solid #2a2a2a; border-radius:8px; padding:1.5rem; width:380px; max-width:90vw; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.admin-modal-title { font-size:14px; font-weight:700; color:#fafafa; margin-bottom:4px; }
.admin-modal-desc { font-size:11px; color:#737373; margin-bottom:.75rem; }
.admin-modal .admin-input { background:#0a0a0a; border:1px solid #2a2a2a; color:#fafafa; }
.admin-modal .admin-input:focus { border-color:#525252; box-shadow:0 0 0 2px rgba(82,82,82,.2); }
.admin-modal .admin-form-group label { color:#d4d4d4; }
.admin-modal-actions { display:flex; justify-content:flex-end; gap:6px; margin-top:.75rem; }

/* ── Toast ── */
.admin-toast { position:fixed; bottom:1rem; right:1rem; z-index:10001; background:var(--adm-bg2); color:var(--adm-text); padding:6px 14px; border-radius:6px; font-size:11px; font-weight:500; border:1px solid var(--adm-border); box-shadow:0 4px 20px rgba(0,0,0,.4); transform:translateY(80px); opacity:0; transition:all .25s; max-width:320px; }
.admin-toast.show { transform:translateY(0); opacity:1; }
.admin-toast.success { border-color:var(--adm-success); color:var(--adm-success); }
.admin-toast.error { border-color:var(--adm-danger); color:var(--adm-danger); }

/* ── API Banner ── */
.api-unavailable-banner { display:none; position:fixed; top:42px; left:0; right:0; z-index:99; background:rgba(245,158,11,.06); border-bottom:1px solid rgba(245,158,11,.3); padding:3px 1rem; text-align:center; font-size:10px; color:var(--adm-warn); font-weight:500; }
.api-unavailable-banner.show { display:block; }

/* ── Empty ── */
.admin-empty { text-align:center; padding:1.2rem .5rem; color:var(--adm-sub); }
.admin-empty-icon { font-size:1.5rem; margin-bottom:4px; opacity:.3; }
.admin-empty-text { font-size:11px; }

/* ── Docs ── */
.docs-nav { display:flex; gap:2px; margin-bottom:.6rem; flex-wrap:wrap; }
.docs-nav-btn { padding:3px 8px; border:1px solid var(--adm-border); border-radius:4px; background:var(--adm-bg); font-size:10px; font-weight:500; cursor:pointer; color:var(--adm-sub); transition:all .12s; font-family:inherit; }
.docs-nav-btn:hover { border-color:var(--adm-border-hover); color:var(--adm-text); }
.docs-nav-btn.active { border-color:#525252; background:var(--adm-bg3); color:var(--adm-white); font-weight:600; }
.docs-sub-btn { padding:3px 8px; border:1px solid var(--adm-border); border-radius:4px; background:var(--adm-bg); font-size:10px; font-weight:500; cursor:pointer; color:var(--adm-sub); transition:all .12s; font-family:inherit; }
.docs-sub-btn:hover { border-color:var(--adm-border-hover); color:var(--adm-text); }
.docs-sub-btn.active { border-color:var(--adm-accent); background:rgba(163,163,163,.1); color:var(--adm-white); font-weight:600; }
.docs-article { line-height:1.6; }
.docs-article h3 { font-size:13px; color:var(--adm-white); margin-bottom:.5rem; }
.docs-article p { font-size:11px; color:var(--adm-text); margin-bottom:.4rem; }
.docs-article code { background:var(--adm-bg); padding:1px 4px; border-radius:2px; font-size:10px; font-family:'SF Mono',Monaco,monospace; color:#a3a3a3; border:1px solid var(--adm-border); }
.docs-article kbd { background:var(--adm-bg3); border:1px solid var(--adm-border); padding:1px 5px; border-radius:3px; font-size:10px; font-family:inherit; color:var(--adm-text); }
.docs-article a { color:#a3a3a3; text-decoration:underline; text-underline-offset:2px; }
.docs-article a:hover { color:var(--adm-white); }
.docs-article em { color:var(--adm-white); font-style:normal; font-weight:600; }

/* ── Responsive ── */
@media (max-width:1024px) {
  .content-split-pane { flex-direction:column; height:auto; }
  .content-editor-pane { flex:none !important; width:100% !important; }
  .content-splitter { display:none; }
  .content-preview-pane { height:350px; }
}
@media (max-width:768px) {
  .admin-header { flex-wrap:wrap; height:auto; padding:4px 6px; }
  .admin-header-tabs { margin-left:0; }
  .admin-tab-label { display:none; }
  .admin-content { padding:.5rem; }
  .admin-user-label, .admin-role-label { display:none; }
  .admin-input-row { flex-direction:column; }
  .logo-fields { flex-wrap:wrap; }
  .perms-grid { grid-template-columns:1fr 1fr; }
  .admin-centered { max-width:100%; }
}