/* Shared layout & navigation styles extracted from inline index.php styles */
:root {
  --nav-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --nav-text-color: #fff;
  --nav-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --btn-radius: 4px;
  --transition-fast: 0.2s ease;
  --color-admin: rgba(0,123,255,0.85);
  --color-admin-active: rgba(0,123,255,1);
  /* Legacy gobo-specific variables (will alias to universal tokens) */
  --color-gobos: rgba(139,69,19,0.85);
  --color-gobos-active: rgba(139,69,19,1);

  /* ========== Universal Semantic Color Tokens (Phase 1) ==========
    These provide a neutral naming layer so visual themes (gold/indigo/etc.) can swap palettes
    without touching component class rules. Legacy gobo variables are mapped for compatibility. */
  --color-accent-bg: var(--color-gobos);              /* primary accent background (default maps to gobo brown) */
  --color-accent-bg-hover: var(--color-gobos-active); /* hover/active state */
  --color-accent-outline: rgba(255,255,255,0.30);     /* outline / focus ring layering */
  --color-accent-fg: #ffffff;                         /* foreground text/icon on accent surfaces */
  --color-accent-glow: rgba(255,215,0,0.30);          /* subtle glow for hover elevations (mapped from gold theme) */
  --color-accent-soft: linear-gradient(45deg,#ffd700,#ffed4e);
  --color-danger-gradient: linear-gradient(45deg,#ff6b6b,#ff8e8e);
  --color-success-glow: #90ee90;
  --color-warning-accent: #ffd700;
  /* Core semantic status colors (re-added after token refactor) */
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-success-bg-soft: rgb(13, 70, 26);
  --color-danger-bg-soft: rgb(83, 17, 24);

  --color-logout: rgba(220,53,69,0.85);
  --color-logout-active: rgba(220,53,69,1);
  --color-login: rgba(0,123,255,0.85);
  --color-login-active: rgba(0,123,255,1);
  --color-user-bg: rgba(40,167,69,0.25);
  --color-user-border: rgba(40,167,69,0.35);
  --color-debug-badge-bg: rgba(255,255,255,0.2);
  --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Universal Theme Tokens */
  --universal-gradient-indigo: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --universal-gradient-gold: linear-gradient(135deg,#28207e 0%,#3fa2cd 100%);
  --universal-gradient-bluegray: linear-gradient(135deg,#007bff 0%, #6c757d 100%);
  --universal-surface: #ffffff;
  --universal-surface-alt: #f8f9fa;
  --universal-text: #212529;
  --universal-text-invert: #ffffff;
  --universal-border: #dee2e6;
  --admin-nav-height: 88px;
  --universal-shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
  --universal-shadow-lg: 0 6px 18px rgba(0,0,0,0.25);
}

body.has-session-debug { margin-top: 160px !important; }
body:not(.has-session-debug) { margin-top: 88px !important; }

#nav-banner {
  background: var(--nav-bg-gradient);
  color: var(--nav-text-color);
  padding: 12px 20px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  box-shadow: var(--nav-shadow);
  font-family: var(--font-stack);
  font-size: 14px;
}
#nav-banner.debug-flex-column { gap: 18px; }
#nav-banner.normal-flex-row { gap: 12px; }

.nav-main-row { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 18px; }
.nav-title-wrapper { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:600; letter-spacing:.5px; }
.nav-debug-badge { background: var(--color-debug-badge-bg); padding:2px 6px; border-radius:3px; font-size:12px; }

.nav-main-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; }

.btn-nav { display:inline-flex; align-items:center; gap:6px; color:#fff; border:none; padding:6px 12px; border-radius:var(--btn-radius); text-decoration:none; font-size:14px; font-weight:500; cursor:pointer; transition: background-color var(--transition-fast), box-shadow var(--transition-fast); font-family:inherit; }
/* Universal nav accent button (replaces .btn-nav-gobos). Keep old class for now. */
.btn-nav-accent, .btn-nav-gobos { background: var(--color-accent-bg); }
.btn-nav-accent.active, .btn-nav-gobos.active { background: var(--color-accent-bg-hover); box-shadow:0 0 0 2px var(--color-accent-outline); }
.btn-nav-accent:hover, .btn-nav-gobos:hover { background: var(--color-accent-bg-hover); }

.btn-nav-admin { background: var(--color-admin); }
.btn-nav-admin.active { background: var(--color-admin-active); box-shadow:0 0 0 2px rgba(255,255,255,0.3); }
.btn-nav-admin:hover { background: var(--color-admin-active); }

.btn-nav-login { background: var(--color-login); }
.btn-nav-login:hover { background: var(--color-login-active); }

.btn-nav-shows { background: rgba(255,255,255,0.18); color:#fff; }
.btn-nav-shows:hover { background: rgba(255,255,255,0.3); }

.user-badge { display:flex; align-items:center; gap:8px; padding:6px 12px; background: var(--color-user-bg); border-radius:var(--btn-radius); font-size:14px; border:1px solid var(--color-user-border); }
.nav-user-badge { display:flex; align-items:center; gap:8px; }
.guest-badge { background: rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); border-radius:var(--btn-radius); padding:6px 12px; }
.user-badge-name { color:#d4edda; }
.btn-logout { background: var(--color-logout); color:#fff; border:none; padding:4px 8px; border-radius:3px; cursor:pointer; font-size:12px; transition: background-color var(--transition-fast); }
.btn-logout:hover { background: var(--color-logout-active); }

.nav-subnav { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.nav-subnav-btn { display:inline-flex; align-items:center; justify-content:center; padding:6px 14px; border-radius:var(--btn-radius); background: rgba(255,255,255,0.16); color:#fff; text-decoration:none; font-weight:500; transition: background-color var(--transition-fast), box-shadow var(--transition-fast); }
.nav-subnav-btn:hover { background: rgba(255,255,255,0.28); }
.nav-subnav-btn.active { background:#ffffff; color:#1f2933; box-shadow:0 0 0 2px rgba(255,255,255,0.35); }

/* Session Debug Panel */
.session-debug { margin-top:10px; padding:8px 12px; background:rgba(0,0,0,0.2); border-radius:6px; font-size:12px; line-height:1.4; }
.session-debug-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.session-debug-token { background: rgba(255,255,255,0.1); padding:2px 4px; border-radius:2px; font-size:11px; word-break:break-all; display:inline-block; }
.session-debug-error { background: rgba(220,53,69,0.2); padding:8px; border-radius:4px; border-left:4px solid #dc3545; }
.session-debug-error-title { color:#dc3545; }
.session-debug-none { opacity:0.8; font-style:italic; }

/* Utility */
.hidden { display:none !important; }
.is-hidden-user { opacity:0.55; transition:opacity 0.2s ease; }
.is-hidden-user:hover { opacity:0.9; }
.is-hidden-user td { color:rgba(73,80,87,0.85); }
.pointer { cursor:pointer; }

/* ---- Utility Classes (inline style consolidation) ---- */
.w-110 { width:110px; }
.w-120 { width:120px; }
.w-130 { width:130px; }
.w-140 { width:140px; }
.w-160 { width:160px; }
.w-180 { width:180px; }
.max-w-1200 { max-width:1200px; margin-left:auto; margin-right:auto; }
.mb-0 { margin-bottom:0; }
.mb-2 { margin-bottom:2px; }
.mb-4 { margin-bottom:4px; }
.mb-6 { margin-bottom:6px; }
.ml-6 { margin-left:6px; }
.ml-8 { margin-left:8px; }
.fs-12 { font-size:12px; }
.fs-13 { font-size:13px; }
.fs-14 { font-size:14px; }
.text-muted { color:#6c757d; }
.text-primary-dark { color:#495057; }
/* Lightweight text utility for dark surfaces */
.text-light { color:#f8f9fa !important; }
/* Gold theme boost for readability on gradient surfaces */
.universal-theme-gold .text-light { color:#ffffff !important; text-shadow:0 1px 1px rgba(0,0,0,0.35); }
.eyebrow { text-transform:uppercase; letter-spacing:0.18em; font-size:12px; display:inline-block; margin-bottom:6px; opacity:0.85; }
.italic { font-style:italic; }
.mono { font-family:monospace; }
.fw-bold { font-weight:bold; }
.align-center { text-align:center; }
.inline-block { display:inline-block; }
.btn-green { background:#28a745; }
.btn-gray { background:#6c757d; }
.btn-red { background:#dc3545; }
.btn-amber { background:#ffc107; }
.placeholder-auto { font-size:12px; color:#6c757d; font-style:italic; }
.stats-grid { display:flex; gap:16px; flex-wrap:wrap; }
.stats-card { flex:1 1 200px; min-width:200px; border-radius:12px; padding:14px 18px; border:1px solid rgba(255,255,255,0.25); background:rgba(255,255,255,0.08); box-shadow:var(--universal-shadow-sm); }
.universal-page:not(.universal-theme-gold) .stats-card { border-color:#e2e6ea; background:#ffffff; color:#212529; }
.stats-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:0.85; margin-bottom:6px; }
.stats-value { font-size:28px; font-weight:600; }

/* Account type badges */
.acct-badge { display:inline-block; padding:2px 6px; border-radius:4px; font-size:14px; line-height:1.2; font-weight:600; }
.acct-internal { background:rgb(14, 73, 28); color:#3ce965; border:1px solid rgba(40,167,69,0.35); }
.acct-external { background:rgba(0,123,255,0.12); color:#0056b3; border:1px solid rgba(0,123,255,0.35); }
.acct-pending { background:rgba(255,193,7,0.18); color:#a07600; border:1px solid rgba(255,193,7,0.45); }

/* Blue button variant (Edit etc.) */
.btn-blue { background:#007bff; }
.btn-blue:hover { background:#0069d9; }

@media (max-width: 780px) {
  .nav-title-wrapper { font-size:18px; }
  .nav-main-actions { gap:10px; }
  .nav-subnav { gap:8px; }
}

/* ===================================================== */
/* Universal Page Themes */
.universal-page { min-height: 60vh; max-height:fit-content; margin:0; padding:1em; box-sizing:border-box; font-family: var(--font-stack); color:var(--universal-text-invert); }
.universal-theme-indigo { 
  background: var(--universal-gradient-indigo);
  --color-accent-bg: #5b67d6;
  --color-accent-bg-hover: #4a52c0;
  --color-accent-glow: rgba(118,75,162,0.35);
  --color-warning-accent: #ffd24d;
}
.universal-theme-gold { 
  background: var(--universal-gradient-gold);
  --color-accent-bg: var(--color-gobos); /* mapping to legacy brown accent */
  --color-accent-bg-hover: var(--color-gobos-active);
  --color-accent-glow: rgba(255,215,0,0.30);
  --color-warning-accent: #ffd700;
}
.universal-theme-bluegray { 
  background: var(--universal-gradient-bluegray);
  --color-accent-bg: #1f5f99;
  --color-accent-bg-hover: #174d7d;
  --color-accent-glow: rgba(0,123,255,0.30);
  --color-warning-accent: #ffc107;
}
.universal-page .universal-surface { background:var(--universal-surface); color:var(--universal-text); border-radius:12px; padding:20px; box-shadow:var(--universal-shadow-sm); }
.universal-surface-alt { background:var(--universal-surface-alt); }
.universal-elevate { box-shadow:var(--universal-shadow-lg); }

.universal-theme-gold .universal-surface {
  background:rgba(255,255,255,0.12);
  color:#f8f9fb;
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 10px 30px -16px rgba(0,0,0,0.65),0 2px 10px rgba(0,0,0,0.35);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}

.bool-icon { display:inline-flex; align-items:center; justify-content:center; font-size:13px; width:18px; height:18px; font-weight:600; border-radius:4px; line-height:1; border:1px solid transparent; box-sizing:border-box; }
.bool-icon.true { color: var(--color-success); background: var(--color-success-bg-soft); border-color: rgba(40,167,69,0.4); }
.bool-icon.false { color: var(--color-danger); background: var(--color-danger-bg-soft); border-color: rgba(220,53,69,0.4); }
.bool-icon.true::before { content:'✔'; }
.bool-icon.false::before { content:'✖'; }

/* Toast container (shared) */
.toast-container { position:fixed; top:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:10px; }

/* ==== Utility Spacing & Layout ==== */
.ml-10 { margin-left:10px; }
.mt-4 { margin-top:4px; }
.mt-18 { margin-top:18px; }
.pad-30 { padding:30px; }
.gap-10 { gap:10px; }
.d-flex { display:flex; }
.inline { display:inline; }
.flex-wrap { display:flex; flex-wrap:wrap; }
.text-center { text-align:center; }
.lh-tight { line-height:1.3; }

/* Width / Min-width helpers */
.min-w-240 { min-width:240px; }

/* Typography utilities */
.fs-11 { font-size:11px; }
.fw-bold { font-weight:700; }

/* Color / state text classes */
.text-muted { color:#6c757d !important; }
.text-danger { color:#dc3545 !important; }
.text-success { color:#28a745 !important; }

/* Visibility state for tabs */
.is-hidden-tab { display:none; }
.is-active-tab { display:block; }

/* Session table specific */
.session-row.expired { opacity:0.6; background:#ffe6e6; }
.session-avatar { width:24px; height:24px; border-radius:50%; margin-top:4px; }
.session-token button { margin-top:4px; }
.status-expired { color:#dc3545; }
.status-active { color:#28a745; }
.session-acct.acct-internal { color:#007bff; }
.session-acct.acct-external { color:#28a745; }
.session-acct.acct-pending { color:#ffc107; }
.session-acct.acct-unknown { color:#6c757d; }
.session-sites .site-pill { font-weight:600; font-size:11px; }

/* Logs filter form & output */
.filter-form { display:flex; gap:16px; align-items:flex-end; }
.log-output { max-height:520px; overflow:auto; background:#0b0b0b; color:#c8f3c8; padding:12px; border-radius:6px; font-family:var(--font-mono, monospace); font-size:12px; line-height:1.35; }


/* ===================================================== */
/* ============== Admin Panel (restored) =============== */
/* Styles migrated from legacy gobo-admin.css portion   */
/* covering show/user/session/logs admin UI components. */

/* Tabs */
.tabs { margin-top:20px; font-family: var(--font-stack); }
.tab-nav { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.tab-nav a { padding:8px 14px; background:#f1f3f5; color:#333; text-decoration:none; border-radius:6px; font-size:14px; font-weight:600; border:1px solid #d0d4d9; transition: background .15s, color .15s, box-shadow .15s; }
.tab-nav a:hover { background:#e2e6ea; }
.tab-nav a.active { background:#0069d9; color:#fff; border-color:#0062cc; box-shadow:0 2px 4px rgba(0,0,0,0.15); }
.tab-content { padding:16px 0 28px; }
.tab-content.card-surface { background:#fff; padding:16px 18px 28px; border:1px solid #d9dee2; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.04); }

/* (Removed legacy .sites-table / .users-table in favor of universal data tables) */

/* Inline Edit Inputs */
.inline-input { width:100%; box-sizing:border-box; padding:4px 6px; font-size:12px; border:1px solid #ced4da; border-radius:4px; font-family:inherit; background:#fff; }
.inline-input:focus { outline:none; border-color:#80bdff; box-shadow:0 0 0 2px rgba(0,123,255,.25); }
.inline-select { width:100%; padding:4px 6px; font-size:12px; border:1px solid #ced4da; border-radius:4px; background:#fff; font-family:inherit; }

/* Row action buttons (gradient + translucent variants) */
.row-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; font-size:11px; font-weight:600; border-radius:6px; cursor:pointer; text-decoration:none; line-height:1.15; border:1px solid rgba(255,255,255,0.35); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); transition: background .15s, transform .15s, box-shadow .15s; box-shadow:0 2px 6px rgba(0,0,0,0.25); }
.row-btn:active { transform:translateY(1px); box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.row-btn.gold { background:linear-gradient(135deg,#ffd347,#ffbd2e); color:#5a3a00; border:none; }
.row-btn.gold:hover { background:linear-gradient(135deg,#ffc52b,#ffb114); }
.row-btn.danger { background:linear-gradient(135deg,#ff6b6b,#ff8e8e); color:#fff; border:none; }
.row-btn.danger:hover { background:linear-gradient(135deg,#ff5959,#ff7a7a); }
.row-btn.cancel { background:rgba(255,255,255,0.25); color:#fff; }
.row-btn.cancel:hover { background:rgba(255,255,255,0.38); }
.row-btn.visit { background:linear-gradient(135deg,#17a2b8,#0d6070); color:#fff; border:none; }
.row-btn.visit:hover { background:linear-gradient(135deg,#1490a5,#0a4d59); }
.row-btn.save { background:linear-gradient(135deg,#2e9d51,#34c163); color:#fff; border:none; }
.row-btn.save:hover { background:linear-gradient(135deg,#2a8e49,#30b155); }
.row-btn.small { padding:3px 8px; font-size:10px; }

/* Legacy .btn / .action-btn system fully removed (migrated to .row-btn variants). */

/* Table toolbars placed ahead of header rows */
.table-toolbar {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.table-toolbar--wrap {
  width:100%;
}

.table-view-toggle {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.table-view-toggle-label {
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(73,80,87,0.8);
}
.universal-theme-gold .table-view-toggle-label {
  color:rgba(255,255,255,0.75);
}
.table-view-toggle .btn {
  font-size:12px;
  padding:4px 12px;
  border-radius:999px;
  line-height:1.2;
}
.table-view-toggle .btn.is-active-view {
  background:var(--color-accent-bg);
  color:var(--color-accent-fg);
  border-color:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,0.25), 0 4px 10px rgba(0,0,0,0.18);
}
.table-view-toggle .btn.is-active-view:hover {
  background:var(--color-accent-bg-hover);
}
.table-summary {
  margin-left:auto;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  color:#6c757d;
}
.universal-theme-gold .table-summary {
  color:rgba(255,255,255,0.8);
}

th.is-hidden-column,
td.is-hidden-column {
  display:none !important;
}

/* Top controls area (add buttons etc.) */
.admin-controls { display:flex; gap:12px; align-items:center; margin:0 0 16px; flex-wrap:wrap; }
.admin-controls .search-box { position:relative; }
.admin-controls input[type='text'] { padding:6px 8px; border:1px solid #ced4da; border-radius:4px; font-size:13px; }

/* Forms */
.form-row { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:14px; }
.form-group { flex:1 1 180px; min-width:180px; }
.form-group label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; letter-spacing:.4px; color:#495057; }
.form-group input[type='text'],
.form-group input[type='email'] { width:100%; padding:8px 10px; font-size:13px; border:1px solid #ced4da; border-radius:4px; background:#fff; box-sizing:border-box; }
.form-group input:focus { outline:none; border-color:#80bdff; box-shadow:0 0 0 3px rgba(0,123,255,.25); }

/* Badges / Labels */
.badge { display:inline-block; padding:3px 6px; font-size:11px; border-radius:4px; background:#e9ecef; color:#495057; font-weight:500; }
.badge.admin { background:#343a40; color:#fff; }
.badge.internal { background:#28a745; color:#fff; }
.badge.external { background:#007bff; color:#fff; }
.badge.pending { background:#ffc107; color:#212529; }

/* Toast Messages */
.toast-msg { min-width:260px; padding:10px 14px; background:#343a40; color:#fff; border-radius:6px; font-size:13px; box-shadow:0 4px 10px rgba(0,0,0,0.25); position:relative; overflow:hidden; }
.toast-msg.success { background:#28a745; }
.toast-msg.error { background:#dc3545; }
.toast-msg.info { background:#007bff; }
.toast-msg + .toast-msg { margin-top:10px; }

/* Modal */
.modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:2000; padding:20px; }
.modal[aria-hidden="true"], .modal.is-hidden { display:none; }
.modal-content { background:#fff; border-radius:8px; max-width:520px; width:100%; padding:24px 26px 28px; box-shadow:0 6px 18px rgba(0,0,0,0.25); position:relative; }
.modal-header { margin-bottom:12px; }
.modal-title { margin:0 0 4px; font-size:20px; font-weight:600; }
.modal-close { position:absolute; top:10px; right:10px; background:transparent; border:none; font-size:20px; cursor:pointer; color:#666; }
.modal-close:hover { color:#000; }
.modal-footer { margin-top:20px; display:flex; justify-content:flex-end; gap:10px; }

/* Generic Buttons (contextual) */
.btn { display:inline-block; padding:6px 14px; border-radius:4px; font-size:14px; cursor:pointer; border:1px solid transparent; font-weight:500; text-decoration:none; line-height:1.3; transition: background .15s, box-shadow .15s; }
.btn:focus { outline:none; box-shadow:0 0 0 3px rgba(0,123,255,0.25); }
.btn-primary { background:#007bff; color:#fff; border-color:#007bff; }
.btn-primary:hover { background:#0069d9; }
.btn-secondary { background:#6c757d; color:#fff; border-color:#6c757d; }
.btn-secondary:hover { background:#5a6268; }
.btn-danger { background:#dc3545; color:#fff; border-color:#dc3545; }
.btn-danger:hover { background:#c82333; }
.btn-warning { background:#ffc107; color:#212529; border-color:#ffc107; }
.btn-warning:hover { background:#e0a800; }
.btn-success { background:#28a745; color:#fff; border-color:#28a745; }
.btn-success:hover { background:#218838; }
.btn-info { background:#17a2b8; color:#fff; border-color:#17a2b8; }
.btn-info:hover { background:#138496; }
.btn-light { background:#f8f9fa; color:#212529; border-color:#f8f9fa; }
.btn-light:hover { background:#e2e6ea; }
.btn-outline { background:#fff; border:1px solid #ced4da; color:#495057; }
.btn-outline:hover { background:#f8f9fa; }

/* Scroll helpers */
.table-scroll-x { overflow-x:auto; }

/* Misc */
.small-note { font-size:11px; color:#6c757d; font-style:italic; }
.row-changed { background:#fff3cd !important; }
.row-error { background:#f8d7da !important; }

/* Permission column width adjustments */
.perm-col.wide { min-width:70px; }

/* Logs tab */
.logs-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 14px; }
.logs-controls select, .logs-controls input { padding:6px 8px; border:1px solid #ced4da; border-radius:4px; font-size:13px; }
.log-viewer { background:#1e1e1e; color:#e9ecef; padding:14px 16px; border-radius:6px; font-family:monospace; font-size:12px; line-height:1.4; overflow:auto; max-height:560px; }
.log-line.error { color:#ff6b6b; }
.log-line.warn { color:#ffc107; }
.log-line.info { color:#17a2b8; }

/* Session manager table */
.sessions-table { width:100%; border-collapse:collapse; font-size:12px; }
.sessions-table th, .sessions-table td { padding:6px 6px; border-bottom:1px solid #e1e4e8; }
.sessions-table th { background:#f8f9fa; text-align:left; font-size:11px; letter-spacing:.3px; }
.sessions-table tbody tr:hover { background:#f1f9ff; }
.session-token { font-family:monospace; font-size:11px; }
.session-expired { opacity:.6; font-style:italic; }

/* ===== Universal Data Table (sorting & filters) ===== */
table.universal-data-table th { position:sticky; top:0; background:#f8f9fa; z-index:3; }
table.universal-data-table th.sortable { cursor:pointer; user-select:none; }
table.universal-data-table th.sortable:focus-visible { outline:2px solid var(--color-accent-bg); outline-offset:2px; }
table.universal-data-table th.sortable .sort-indicator-icon { opacity:.35; margin-left:4px; font-size:10px; transition:opacity .15s, transform .15s; }
table.universal-data-table th.sortable:hover .sort-indicator-icon { opacity:.6; }
table.universal-data-table th.sorted-asc, table.universal-data-table th.sorted-desc { background:#eef6ff; color:#0b4878; }
table.universal-data-table th.sorted-asc .sort-indicator-icon, table.universal-data-table th.sorted-desc .sort-indicator-icon { opacity:1; }
table.universal-data-table th.sorted-asc .sort-indicator-icon { transform:translateY(-1px) rotate(0deg); }
table.universal-data-table th.sorted-desc .sort-indicator-icon { transform:translateY(1px) rotate(180deg); }
/* Fallback if span not injected (legacy rows) */
table.universal-data-table th.sortable:not(:has(.sort-indicator-icon)) { position:relative; }
table.universal-data-table th.sortable:not(:has(.sort-indicator-icon))::after { content:'▲'; position:absolute; right:6px; top:50%; transform:translateY(-50%); opacity:.35; font-size:10px; }
table.universal-data-table th.sortable.sorted-desc:not(:has(.sort-indicator-icon))::after { transform:translateY(-50%) rotate(180deg); }
table.universal-data-table th.sortable.sorted-asc:not(:has(.sort-indicator-icon))::after { opacity:1; }
table.universal-data-table th.sortable.sorted-desc:not(:has(.sort-indicator-icon))::after { opacity:1; }
table.universal-data-table tr.filter-row th, table.universal-data-table tr.filter-row td { background:#fff; border-bottom:2px solid #e3e7ea; padding:4px 6px; }
table.universal-data-table tr.filter-row input[type=text],
table.universal-data-table tr.filter-row select { width:100%; box-sizing:border-box; padding:4px 6px; font-size:11px; border:1px solid #ced4da; border-radius:4px; background:#fff; }
table.universal-data-table tr.filter-row input[type=text]:focus,
table.universal-data-table tr.filter-row select:focus { outline:none; border-color:#80bdff; box-shadow:0 0 0 2px rgba(0,123,255,.25); }
table.universal-data-table tbody tr.column-filter-hidden { display:none !important; }
table.universal-data-table th.no-sort { cursor:default; }
table.universal-data-table th.no-sort .sort-indicator-icon { display:none; }

/* Unified cell padding & font normalization across all universal tables */
table.universal-data-table th, table.universal-data-table td { padding:8px 8px; }
table.universal-data-table td { font-size:12px; }
table.universal-data-table tbody tr:hover { background:#f6fafe; }

/* Table row state helpers */
table.data-table tbody tr.editing,
table.universal-data-table tbody tr.editing {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 4px 0 0 var(--color-accent-bg);
  transition: background 0.2s ease;
}

table.data-table tbody tr.new-record-row,
table.universal-data-table tbody tr.new-record-row {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), inset 4px 0 0 var(--color-warning-accent, rgba(255, 193, 7, 0.65));
}

table.data-table tbody tr.placeholder-row td,
table.universal-data-table tbody tr.placeholder-row td {
  padding: 18px 12px;
  text-align: center;
  font-style: italic;
  color: #6c757d;
  background: rgba(255, 255, 255, 0.85);
}

.supply-description-row td {
  background: var(--surface-subtle, rgba(0, 0, 0, 0.02));
  font-size: 0.875rem;
  color: var(--text-muted, #555);
  padding: 12px 18px 16px;
}

.supply-description {
  display: block;
  line-height: 1.45;
}

.supply-description-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.supply-description-edit-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted, #777);
}

.supply-description-edit textarea {
  min-height: 96px;
  resize: vertical;
}

table.data-table tbody tr[data-row-state="hidden"],
table.universal-data-table tbody tr[data-row-state="hidden"] {
  opacity: 0.55;
}

table.data-table tbody tr[data-row-state="hidden"]:hover,
table.universal-data-table tbody tr[data-row-state="hidden"]:hover {
  opacity: 0.9;
}

/* Simple fade-in for newly added inline rows */
.row-new,
.new-record-row { animation:fadeInRow .4s ease; }
@keyframes fadeInRow { from { background:#e7f3ff; } to { background:transparent; } }

/* End Admin Panel */

/* (Removed obsolete translucent-table-card block; unified approach uses universal data table styling) */
.value-missing { color:rgba(255,255,255,0.65); font-style:italic; font-size:12px; }
.user-hidden-flag { color:rgba(255,255,255,0.55); font-size:11px; margin-left:6px; font-style:italic; }
.site-name { font-weight:600; color:#fff; }
.short-name { font-size:11px; opacity:.75; color:#ffd700; }
.perm-col { text-align:center; }

/* ===================================================== */
/* Generic Gallery & Card Components */
.gallery { max-width:1200px; margin:40px auto 80px; padding:0 24px; }
.gallery-header { text-align:center; margin-bottom:28px; }
.gallery-title { font-size:2.4rem; margin:0 0 8px; }
.gallery-sub { font-size:1rem; color:#666; margin:0; }
.gallery-controls { margin-bottom:28px; }
.gallery-controls input,
.gallery-controls select { font-size:14px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; }
.card-item { background:#fff; border:1px solid #e2e2e2; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 2px 4px rgba(0,0,0,0.06); }
.card-thumb { aspect-ratio:1/1; background:#fafafa; display:flex; align-items:center; justify-content:center; font-size:12px; color:#888; }
.card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.card-thumb.placeholder { font-style:italic; }
.card-meta { padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; }
.item-name { font-size:15px; margin:0; line-height:1.3; }
.item-code { font-family:monospace; font-size:12px; color:#666; }
.item-category { font-size:12px; color:#444; }
.item-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.item-tags .tag { background:#eef; color:#334; padding:2px 6px; border-radius:4px; font-size:11px; }
.item-list-table { width:100%; border-collapse:collapse; }
.item-list-table th,
.item-list-table td { padding:8px 10px; border-bottom:1px solid #e1e1e1; text-align:left; font-size:14px; }
.item-list-table tbody tr:hover { background:#f9fafc; }
.item-list-table .list-thumb { height:42px; width:42px; object-fit:cover; border-radius:6px; border:1px solid #ccc; display:block; }
.item-list-table td:nth-child(1) { font-family:monospace; font-size:12px; }
.item-list-table td:nth-child(2) { font-weight:600; }
.item-list-table td:nth-child(4) .tag { background:#eef; color:#334; padding:2px 6px; border-radius:4px; font-size:11px; margin:2px 4px 2px 0; display:inline-block; }
.universal-theme-gold .item-list-table td:nth-child(4) .tag { background:rgba(255,215,0,0.28); color:#ffd700; }
.view-toggle-btn.active { background:#333; color:#fff; border-color:#333; }
@media (prefers-color-scheme: dark) {
  .gallery { color:#e7e7e7; }
  .gallery-sub { color:#aaa; }
  .gallery-controls input,
  .gallery-controls select { background:#222; border-color:#444; color:#eee; }
  .view-toggle-btn { background:#222; border-color:#444; color:#ddd; }
  .view-toggle-btn.active { background:#fff; color:#111; }
  .card-item { background:#1d1d1f; border-color:#2a2a2d; box-shadow:0 2px 6px rgba(0,0,0,0.5); }
  .card-thumb { background:#2a2a2d; color:#777; }
  .item-tags .tag { background:#313f55; color:#d4e6ff; }
  .item-list-table th,
  .item-list-table td { border-color:#333; }
  .item-list-table tbody tr:hover { background:#222b33; }
}

/* ===================================================== */
/* Generic Data Management Components (bridging goboadmin) */
/* These map old gobo-specific admin patterns to reusable classes */

/* ===== Universal data-table header + filter rows ===== */
/* Header row is used widely in admin.php markup; keep it scoped and minimal */
.data-table thead tr.header-row th { white-space:nowrap; }

/* Filter row (inserted by TableUtils.buildFilterRow) parity with universal tables */
.data-table tr.filter-row th, .data-table tr.filter-row td { background:#fff; border-bottom:2px solid #e3e7ea; padding:4px 6px; }
.data-table tr.filter-row input[type='text'],
.data-table tr.filter-row select { width:100%; box-sizing:border-box; padding:4px 6px; font-size:11px; border:1px solid #ced4da; border-radius:4px; background:#fff; }
.data-table tr.filter-row input[type='text']:focus,
.data-table tr.filter-row select:focus { outline:none; border-color:#80bdff; box-shadow:0 0 0 2px rgba(0,123,255,.25); }
/* Gold theme adjustments for filter row */
.universal-theme-gold .data-table tr.filter-row th,
.universal-theme-gold .data-table tr.filter-row td { background:rgba(255,255,255,0.18); border-bottom-color:rgba(255,255,255,0.32); }
.data-section { max-width:1400px; margin:0 auto; padding:10px; }
.data-section--wide { max-height: fit-content; max-width:fit-content }
.data-controls { background:#f8f9fa; border:1px solid #dfe3e6; border-radius:14px; padding:18px 20px; margin:0 0 26px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; }
.data-controls-left, .data-controls-right { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.data-stats { display:flex; gap:20px; align-items:center; font-size:14px; opacity:.9; }
.data-filter { padding:6px 10px; border:1px solid #ced4da; border-radius:6px; background:#fff; font-size:13px; line-height:1.3; }
.data-filter:focus { outline:none; border-color:#80bdff; box-shadow:0 0 0 2px rgba(0,123,255,.25); }
/* Fill to viewport bottom; scroll inside container, not the page */
.data-table-container {
  --data-table-sticky-surface: #fff;
  display:flex;
  flex-direction:column;
  /* Include padding/border in height calc to prevent page scrollbars */
  /* box-sizing: border-box; */
  /* Slight safety gap to account for surrounding padding/margins (reduced) */
  max-height: calc(90vh - 88px - var(--section-chrome, 72px)); /* 88px = normal fixed header */
  background:var(--data-table-sticky-surface);
  border:1px solid #e2e6ea;
  border-radius:14px;
  padding:18px 20px 12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  overflow:auto; /* both x and y */
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

/* Use dynamic viewport on mobile when supported */
@supports (height: 100dvh) {
  .data-table-container {
    max-height: calc(100dvh - 88px - var(--section-chrome, 72px));
  }
}

/* Taller header when session debug is shown */
body.has-session-debug .data-table-container {
  max-height: calc(100vh - 160px - var(--section-chrome, 72px)); /* 160px = debug header */
}
@supports (height: 100dvh) {
  body.has-session-debug .data-table-container {
    max-height: calc(100dvh - 160px - var(--section-chrome, 72px));
  }
}
.data-table-container--sticky {
  position:relative;
  --data-table-header-height: 44px;
  --data-table-toolbar-height: 0px;
  --data-table-sticky-base-offset: var(--admin-nav-height, 88px);
  --data-table-sticky-offset: calc(var(--data-table-sticky-base-offset) + var(--data-table-toolbar-height));
  --section-chrome: calc(var(--data-table-toolbar-height) + var(--data-table-header-height) + 36px);
}

body.has-session-debug .data-table-container--sticky {
  --data-table-sticky-base-offset: 160px;
}

.data-table-container--sticky:has(> .table-toolbar) {
  --data-table-toolbar-height: 54px;
}

.data-table-container--sticky .table-toolbar {
  position:sticky;
  top:var(--data-table-sticky-base-offset);
  margin:-18px -20px 12px;
  padding:12px 20px;
  background:var(--data-table-sticky-surface);
  border-bottom:1px solid rgba(0,0,0,0.08);
  border-radius:14px 14px 0 0;
  box-shadow:0 6px 18px -12px rgba(0,0,0,0.35);
  z-index:5;
}

.data-table-container--sticky .table-toolbar .btn { box-shadow:none; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { background:#f1f3f5; padding:10px 8px; text-align:left; border-bottom:2px solid #dfe3e6; font-weight:600; font-size:12px; letter-spacing:.3px; }
.data-table thead.sticky th,
.data-table thead th.sticky {
  position:sticky;
  top:var(--data-table-sticky-offset);
  z-index:4;
  box-shadow:0 6px 14px -10px rgba(0,0,0,0.35);
  background-clip:padding-box;
}
.data-table thead.sticky tr.filter-row th,
.data-table thead.sticky tr.filter-row td,
.data-table thead th.sticky.filter {
  position:sticky;
  top:calc(var(--data-table-sticky-offset) + var(--data-table-header-height));
  z-index:3;
}
.data-table td { padding:10px 8px; border-bottom:1px solid #eceff1; vertical-align:top; }
.data-table tbody tr:hover { background:#f8fbff; }
.data-table .lst-number { font-weight:600; font-family:monospace; }
.data-table .category { background:#e9ecef; padding:3px 8px; border-radius:12px; font-size:11px; display:inline-block; }
.data-table .tags { display:flex; flex-wrap:wrap; gap:4px; }
.data-table .tag { background:#eef; color:#334; padding:2px 6px; border-radius:6px; font-size:11px; }
.data-table .no-image { color:#888; font-style:italic; font-size:12px; }
.data-table .image-thumbnail { display:flex; align-items:center; gap:8px; }
.data-table .thumbnail { width:40px; height:40px; object-fit:cover; border-radius:4px; border:1px solid #ccc; transition:transform .2s ease; cursor:pointer; }
.data-table .thumbnail:hover { transform:scale(2.4); z-index:10; position:relative; box-shadow:0 4px 12px rgba(0,0,0,0.35); }
.sync-info { font-weight:600; white-space:nowrap; }
.sync-info.good { color:var(--color-success); }
.sync-info.warn { color:#b98500; }
.sync-info.danger { color:var(--color-danger); }
.sync-info.pending { color:#0b4878; }
.sync-wrapper { display:flex; align-items:center; gap:8px; min-width:260px; }
.sync-progress { width:180px; height:10px; background:rgba(0,0,0,0.1); border-radius:6px; overflow:hidden; }
.sync-progress-bar { height:100%; background:linear-gradient(90deg,#4caf50,#8bc34a); width:0%; transition:width .3s ease; }
.sync-text { font-size:12px; opacity:.85; min-width:110px; }

/* Button accent/danger variants (neutral gradient + semantic) */
.btn.btn--accent { background:linear-gradient(45deg,#ffd347,#ffbd2e); color:#5a3a00; border:none; font-weight:600; }
.btn.btn--accent:hover { background:linear-gradient(45deg,#ffc52b,#ffb114); }
.btn.btn--danger { background:linear-gradient(135deg,#ff6b6b,#ff8e8e); color:#fff; border:none; }
.btn.btn--danger:hover { background:linear-gradient(135deg,#ff5959,#ff7a7a); }

/* Loading + status messages (shared with gallery, goboadmin) */
.loading-block { text-align:center; padding:40px 10px; font-size:16px; opacity:.85; }
.status-message { margin:16px 0; padding:12px 16px; border-radius:10px; font-weight:600; text-align:center; background:#f1f3f5; color:#333; }
.status-message.success { background:rgba(40,167,69,0.15); color:#20723a; border:1px solid rgba(40,167,69,0.35); }
.status-message.error { background:rgba(220,53,69,0.15); color:#a12733; border:1px solid rgba(220,53,69,0.4); }
.status-message.info { background:#e7f3ff; color:#0b4878; border:1px solid #b9daf5; }

/* Gold theme adaptations for data components */
.universal-theme-gold .data-controls { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.28); box-shadow:0 4px 14px rgba(0,0,0,0.20); backdrop-filter:blur(6px) saturate(160%); -webkit-backdrop-filter:blur(6px) saturate(160%); }
.universal-theme-gold .data-table-container {
  --data-table-sticky-surface: rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.30);
  box-shadow:0 14px 34px -18px rgba(0,0,0,0.85),0 3px 12px rgba(0,0,0,0.35);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
.universal-theme-gold .data-table-container--sticky .table-toolbar { background:rgba(255,255,255,0.22); border-bottom:1px solid rgba(255,255,255,0.38); box-shadow:0 8px 20px -12px rgba(0,0,0,0.5); }
.universal-theme-gold .data-table th { background:rgba(255,255,255,0.20); border-bottom:2px solid rgba(255,255,255,0.32); color:#fff; }
.universal-theme-gold .data-table td { border-color:rgba(255,255,255,0.18); color:#fff; }
.universal-theme-gold .data-table tbody tr:hover { background:rgba(255,255,255,0.10); }
.universal-theme-gold .data-table .category { background:rgba(255,255,255,0.25); color:#fff; }
.universal-theme-gold .data-table .tag { background:rgba(255,215,0,0.30); color:#ffd700; }
.universal-theme-gold .data-table thead.sticky th,
.universal-theme-gold .data-table thead th.sticky,
.universal-theme-gold .data-table thead.sticky tr.filter-row th,
.universal-theme-gold .data-table thead.sticky tr.filter-row td,
.universal-theme-gold .data-table thead th.sticky.filter {
  background:rgba(255,255,255,0.24);
  box-shadow:0 8px 18px -12px rgba(0,0,0,0.55);
}
.universal-theme-gold .status-message { background:rgba(255,255,255,0.18); color:#fff; border:1px solid rgba(255,255,255,0.35); }
.universal-theme-gold .status-message.success { background:rgba(40,167,69,0.45); border-color:rgba(40,167,69,0.65); }
.universal-theme-gold .status-message.error { background:rgba(220,53,69,0.50); border-color:rgba(220,53,69,0.70); }
.universal-theme-gold .status-message.info { background:rgba(25,118,210,0.45); border-color:rgba(25,118,210,0.65); }

/* Gallery surface (public gobo gallery) shading parity with admin cards */
.universal-theme-gold .gallery.universal-surface {
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 4px 18px rgba(0,0,0,0.28);
  backdrop-filter:blur(8px) saturate(165%);
  -webkit-backdrop-filter:blur(8px) saturate(165%);
  border-radius:16px;
}
/* Gold theme gallery text contrast adjustments */
.universal-theme-gold .gallery .card-item { color:#f5f5f5; }
.universal-theme-gold .gallery .card-item .item-name { color:#ffffff; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,0.55); }
.universal-theme-gold .gallery .card-item .item-code { color:#ffd866; text-shadow:0 1px 2px rgba(0,0,0,0.45); }
.universal-theme-gold .gallery .card-item .item-category { color:#ffe8a8; text-shadow:0 1px 2px rgba(0,0,0,0.45); }
.universal-theme-gold .gallery .card-item .item-tags .tag { background:rgba(255,255,255,0.20); color:#ffe27a; border:1px solid rgba(255,255,255,0.28); }
.universal-theme-gold .gallery .card-item .item-tags .tag:hover { background:rgba(255,255,255,0.30); }
/* Gold theme list view readability */
.universal-theme-gold .gallery .item-list-table th { background:rgba(255,255,255,0.18); color:#ffffff; font-weight:600; letter-spacing:.4px; text-shadow:0 1px 2px rgba(0,0,0,0.55); }
.universal-theme-gold .gallery .item-list-table td { color:#f5f5f5; }
.universal-theme-gold .gallery .item-list-table td:nth-child(1) { color:#ffd866; text-shadow:0 1px 2px rgba(0,0,0,0.45); }
.universal-theme-gold .gallery .item-list-table td:nth-child(3) { color:#ffe8a8; }
.universal-theme-gold .gallery .item-list-table tbody tr:nth-child(even) { background:rgba(255,255,255,0.05); }
.universal-theme-gold .gallery .item-list-table tbody tr:hover { background:rgba(255,255,255,0.12) !important; }
.universal-theme-gold .gallery .item-list-table td:nth-child(4) .tag { background:rgba(255,255,255,0.20); color:#ffe27a; border:1px solid rgba(255,255,255,0.28); box-shadow:0 1px 2px rgba(0,0,0,0.25); }
.universal-theme-gold .gallery .item-list-table td:nth-child(4) .tag:hover { background:rgba(255,255,255,0.30); }

@media (max-width: 860px) {
  .data-controls { flex-direction:column; align-items:stretch; }
  .data-controls-left, .data-controls-right { justify-content:center; }
  .data-table th, .data-table td { padding:8px 6px; }
}