:root {
  --ttg-bg: #0f0f10;
  --ttg-surface: #161618;
  --ttg-text: #e8e8ea;
  --ttg-muted: #a0a0a5;
  --ttg-primary: #fe2c55; /* TikTok pink */
  --ttg-accent: #25f4ee;  /* TikTok blue */
  --ttg-border: #2a2a2e;
  --ttg-success: #22c55e;
  --ttg-warning: #f59e0b;
  --ttg-danger: #ef4444;
}

/***** Base *****/
body.ttg {
  background: var(--ttg-bg);
  color: var(--ttg-text);
}
.ttg a { color: var(--ttg-accent); text-decoration: none; }
.ttg a:hover { color: var(--ttg-primary); }

/***** Navigation *****/
.ttg .navbar {
  background: linear-gradient(180deg, #121214, #0f0f10);
  border-bottom: 1px solid var(--ttg-border);
}
.ttg .navbar .nav-link { color: var(--ttg-text); opacity: 0.85; }
.ttg .navbar .nav-link:hover { opacity: 1; color: #fff; }
.ttg .navbar-brand { color: #fff; font-weight: 700; }

/***** Cards *****/
.ttg .card {
  background: var(--ttg-surface);
  color: var(--ttg-text);
  border: 1px solid var(--ttg-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.ttg .card .card-title { color: #fff; }
.ttg .card .card-text { color: var(--ttg-muted); }

/***** Buttons *****/
.btn-ttg {
  background: var(--ttg-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
}
.btn-ttg:hover { opacity: 0.95; filter: drop-shadow(0 6px 18px rgba(254,44,85,0.35)); color:#fff; }
.btn-ttg-outline { border: 2px solid var(--ttg-primary); color: var(--ttg-primary); background: transparent; border-radius: 999px; }
.btn-ttg-outline:hover { background: var(--ttg-primary); color: #fff; }

/***** Badges *****/
.badge-ttg { background: var(--ttg-accent); color: #111; border-radius: 999px; }
.badge-ttg-success { background: var(--ttg-success); color: #111; }
.badge-ttg-warning { background: var(--ttg-warning); color: #111; }
.badge-ttg-danger { background: var(--ttg-danger); color: #111; }

/***** Sections *****/
.ttg .section {
  background: var(--ttg-surface);
  border: 1px solid var(--ttg-border);
  border-radius: 20px;
  padding: 24px;
}

/***** Tables *****/
.ttg table { color: var(--ttg-text); }
.ttg table thead { background: #1d1d20; }
.ttg table tr { border-color: var(--ttg-border); }

/***** Utilities *****/
.text-muted-ttg { color: var(--ttg-muted) !important; }
.border-ttg { border-color: var(--ttg-border) !important; }
.bg-surface-ttg { background: var(--ttg-surface) !important; }

/***** Forms *****/
.ttg .form-control, .ttg .form-select {
  background: #141417;
  border: 1px solid var(--ttg-border);
  color: var(--ttg-text);
}
.ttg .form-control:focus, .ttg .form-select:focus { border-color: var(--ttg-accent); box-shadow: 0 0 0 0.25rem rgba(37,244,238,0.15); }

/***** Hero *****/
.hero-ttg {
  background: radial-gradient(1200px 600px at 10% 10%, rgba(37,244,238,0.15), transparent),
              radial-gradient(900px 500px at 80% 20%, rgba(254,44,85,0.15), transparent),
              linear-gradient(180deg, #101012, #0c0c0d);
  color: var(--ttg-text);
  border-bottom: 1px solid var(--ttg-border);
}
.hero-ttg .title { color: #fff; font-weight: 800; }
.hero-ttg .subtitle { color: var(--ttg-muted); }

/***** Footer *****/
.footer-ttg { background: #0c0c0d; border-top: 1px solid var(--ttg-border); color: var(--ttg-text); }
.footer-ttg a { color: var(--ttg-muted); }
.footer-ttg a:hover { color: #fff; }

/***** Admin Layout *****/
.admin-sidebar {
  background: var(--ttg-surface);
  border-right: 1px solid var(--ttg-border);
  min-height: 100vh;
  padding-top: 12px;
}
.admin-sidebar .nav-link {
  color: var(--ttg-text);
  opacity: 0.85;
  border-radius: 12px;
  margin: 4px 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-sidebar .nav-link:hover {
  background: #1b1b1f;
  color: #fff;
  opacity: 1;
}
.admin-sidebar .nav-link.active {
  background: rgba(254, 44, 85, 0.18);
  color: #fff;
}
.admin-sidebar .nav-link .bi { font-size: 1.1rem; }

.admin-main {
  min-height: 100vh;
  padding-bottom: 40px;
}

@media (max-width: 767.98px) {
  .admin-sidebar { min-height: auto; }
}

/* Improve table visuals in dark theme */
.ttg table thead th { color: #fff; }
.ttg .table-striped > tbody > tr:nth-of-type(odd) > * { background: #141417; }
.ttg .table-striped > tbody > tr:nth-of-type(even) > * { background: #161618; }

/***** Modern App Shell (Admin + Optional User) *****/
.app-shell {
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(37,244,238,0.08), transparent),
              radial-gradient(900px 500px at 80% 20%, rgba(254,44,85,0.09), transparent),
              linear-gradient(180deg, #0e0e10 0%, #0b0b0c 100%);
  display: flex; /* make sidebar + main sit side-by-side */
}
.app-sidebar {
  position: sticky; top: 0; height: 100vh; width: 260px; /* fixed width, never collapsible */
  background: rgba(22,22,24,0.9); backdrop-filter: blur(12px);
  border-right: 1px solid var(--ttg-border);
  display: flex; flex-direction: column; gap: 8px; padding: 14px 10px;
  z-index: 1040;
}
/* removed hover-expand behavior */
.app-sidebar .brand { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; }
.app-sidebar .brand .logo { width:34px; height:34px; border-radius:10px; background: linear-gradient(135deg, var(--ttg-primary), var(--ttg-accent)); box-shadow: 0 6px 18px rgba(254,44,85,0.2); }
.app-sidebar .brand .title { font-weight:800; white-space:nowrap; opacity:.95; }
.app-nav { list-style:none; margin:8px 0 0; padding:0; }
.app-nav .label { font-size:.75rem; color:var(--ttg-muted); letter-spacing:.06em; margin:12px 8px 6px; opacity:.9; display:block; }
.app-nav a {
  display:flex; align-items:center; gap:12px; padding:10px 12px; margin:4px 6px; border-radius:12px;
  color:var(--ttg-text); opacity:.85; border:1px solid transparent; transition: all .2s ease;
}
.app-nav a .bi { font-size:1.1rem; width:22px; text-align:center; }
.app-nav a:hover { background:#1b1b1f; color:#fff; opacity:1; }
.app-nav a.active { background: rgba(254,44,85,0.18); color:#fff; border-color: rgba(254,44,85,0.25); box-shadow: inset 0 0 0 1px rgba(254,44,85,0.18); }
.app-main { min-height:100vh; flex: 1; }
.app-topbar { position: sticky; top:0; z-index:1030; background: rgba(22,22,24,0.7); backdrop-filter: blur(10px); border-bottom:1px solid var(--ttg-border); }
.app-topbar .inner { height: auto; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.app-topbar .actions { flex-wrap: wrap; }
.app-topbar .inner { height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; overflow: visible; }
.app-topbar .search { flex:1; max-width:520px; }
.app-topbar .search input { width:100%; background:#141417; border:1px solid var(--ttg-border); color:var(--ttg-text); border-radius:12px; padding:10px 12px; }
.app-topbar .actions { display:flex; align-items:center; gap:8px; }
.ttg.app-shell .app-topbar .actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.avatar { width:34px; height:34px; border-radius:50%; background:#222; display:inline-flex; align-items:center; justify-content:center; color:#ccc; border:1px solid var(--ttg-border); }

/* Sidebar footer for Logout at bottom */
.app-sidebar-footer { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--ttg-border); }
.app-sidebar-footer a { display:flex; align-items:center; gap:12px; padding:10px 12px; margin:4px 6px; border-radius:12px; color:var(--ttg-text); opacity:.85; border:1px solid transparent; }
.app-sidebar-footer a:hover { background:#1b1b1f; color:#fff; opacity:1; }

/* Always visible sidebar on mobile: remove slide-out behavior */
@media (max-width: 991.98px) {
  .app-shell { flex-direction: row; }
  .app-sidebar { position: fixed; left: 0; top: 0; height: 100dvh; }
  .app-main { margin-left: 260px; }
  .ttg.app-shell .app-topbar .actions { flex-wrap: wrap; gap: 6px; }
}
@media (min-width: 992px) {
  .app-main { margin-left: 0; }
}

/* Content wrappers */
.page-wrap { padding: 18px; }
.kpi-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-radius:16px; background: var(--ttg-surface); border:1px solid var(--ttg-border); position: relative; }
.kpi-card .value { font-size:1.75rem; font-weight:800; }
/* Ensure the chip sits at the card's bottom-right so header can use full width */
.kpi-card .chip { position: absolute; right: 16px; bottom: 16px; }
/* Modern table polish */
.table-modern { --rowOdd:#141417; --rowEven:#161618; }
.table-modern thead th { color:#fff; border-bottom-color:var(--ttg-border); }
.table-modern tbody tr:nth-of-type(odd) > * { background: var(--rowOdd) !important; }
.table-modern tbody tr:nth-of-type(even) > * { background: var(--rowEven) !important; }

/* Utility chips */
.chip { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--ttg-border); background:#141417; color:var(--ttg-text); font-size:.85rem; }
.chip .dot { width:8px; height:8px; border-radius:50%; background:var(--ttg-accent); }

/* Markdown/bio readability */
.prose a { color: #ffffff; text-decoration: underline; }
.prose a:hover { color: var(--ttg-accent); }

/* Support Theme Overrides */
.support-theme, .support-theme .text-muted, .support-theme .kpi-card, .support-theme .kpi-card .value, .support-theme .app-topbar .inner span, .support-theme .app-nav a, .support-theme .chip, .support-theme .table-modern thead th {
  color: #ffffff !important;
}
.support-theme .text-muted { color: rgba(255,255,255,0.7) !important; }
.support-theme .kpi-card { background: rgba(22,22,24,0.95); border-color: var(--ttg-border); }
.support-theme .chip { background: #141417; border-color: var(--ttg-border); }
/* ensure links remain legible */
.support-theme a { color: var(--ttg-accent); }
.support-theme a:hover { color: #fff; }
/* tables */
.support-theme .table-modern thead th { color:#fff !important; }
/* sidebar labels remain readable */
.support-theme .app-nav .label { color: rgba(255,255,255,0.6) !important; }
/* inputs on topbar search */
.support-theme .app-topbar .search input { color:#fff; }
/* toast text */
.support-theme .toast .toast-body { color:#fff; }
/* Support tables readability: ensure table body text is white on dark backgrounds */
.support-theme .table,
.support-theme .table-modern,
.support-theme .table td,
.support-theme .table th,
.support-theme .table-modern tbody td,
.support-theme .table-modern tbody th { color:#ffffff !important; }
/* Admin Theme Overrides (tables readability) */
.admin-theme .table,
.admin-theme .table-modern,
.admin-theme .table td,
.admin-theme .table th,
.admin-theme .table-modern tbody td,
.admin-theme .table-modern tbody th { color:#ffffff !important; }
/* User Theme Overrides */
.user-theme, .user-theme .text-muted, .user-theme .app-nav a, .user-theme .chip, .user-theme .kpi-card, .user-theme .kpi-card .value, .user-theme .table-modern thead th, .user-theme .app-topbar .inner span {
  color: #ffffff !important;
}
.user-theme .text-muted { color: rgba(255,255,255,0.7) !important; }
.user-theme .app-nav .label { color: rgba(255,255,255,0.6) !important; }
.user-theme .kpi-card { background: rgba(22,22,24,0.95); border-color: var(--ttg-border); }
.user-theme .chip { background: #141417; border-color: var(--ttg-border); }
.user-theme a { color: var(--ttg-accent); }
.user-theme a:hover { color: #fff; }
.user-theme .app-topbar .search input { color:#fff; }
/* Alerts & miscellaneous copy */
.user-theme .alert { color:#fff; }
.user-theme .form-label, .user-theme label { color:#fff; }
/* Toasts */
.user-theme .toast, .user-theme .toast .toast-body { color:#fff; }
/* Modals & popups */
.user-theme .modal-content { background:#111827; color:#ffffff; border-color:#1f2937; }
.user-theme .modal-header { background:#1f2937; color:#ffffff; border-bottom-color:#374151; }
.user-theme .modal-title { color:#ffffff; }
.user-theme .modal-body a { color:#ffffff; }
.user-theme .modal-footer { background:#0f172a; border-top-color:#1f2937; }
.user-theme .btn-close { filter: invert(1) brightness(200%); opacity: .85; }
.user-theme .btn-close:focus { box-shadow: 0 0 0 .25rem rgba(124,58,237,.5); }
/* Dropdowns & popovers */
.user-theme .dropdown-menu, .user-theme .popover { background:#111827; color:#fff; border-color:#1f2937; }
.user-theme .popover .popover-header { background:#1f2937; color:#fff; border-bottom-color:#374151; }
.user-theme .dropdown-item { color:#fff; }
.user-theme .dropdown-item:hover { background:#1b1b1f; color:#fff; }
/* User tables readability: ensure table body text is white on dark backgrounds */
.user-theme .table,
.user-theme .table-modern,
.user-theme .table td,
.user-theme .table th,
.user-theme .table-modern tbody td,
.user-theme .table-modern tbody th {
  color: #ffffff !important;
}

/* Recent Activity table header override to ensure legibility on white background */
.ttg.app-shell.admin-theme .table-modern.recent-activity thead th,
.ttg.app-shell.admin-theme .table-modern.recent-activity thead tr,
.ttg.app-shell.admin-theme .table-modern.recent-activity thead { 
  background: #ffffff !important; 
  color: #000000 !important; 
}

/* Admin Recent Activity table header - force black text on white background */
.ttg.app-shell.admin-theme .recent-activity thead,
.ttg.app-shell.admin-theme .recent-activity thead tr,
.ttg.app-shell.admin-theme .recent-activity thead th,
.ttg.app-shell.admin-theme .recent-activity th {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Ensure outline buttons are visible on dark admin topbar */
.ttg.app-shell .app-topbar .actions .btn { border-width: 1px; }
.ttg.app-shell .app-topbar .actions .btn-outline-warning {
  color: var(--ttg-warning);
  border-color: var(--ttg-warning);
}
.ttg.app-shell .app-topbar .actions .btn-outline-info {
  color: var(--ttg-accent);
  border-color: var(--ttg-accent);
}
.ttg.app-shell .app-topbar .actions .btn-outline-info:hover {
  background: rgba(37, 244, 238, 0.12);
  color: #fff;
}
.ttg.app-shell .app-topbar .actions .btn-outline-warning:hover {
  background: rgba(245, 158, 11, 0.12);
  color: #fff;
}

/* Prevent header clipping on very small screens */
@media (max-width: 480px) {
  .ttg.app-shell .app-topbar .inner { height: auto; padding-top: 8px; padding-bottom: 8px; }
  .ttg.app-shell .app-topbar .actions { flex-wrap: wrap; gap: 6px; }
}