/* Copied and adapted from previous Svelte custom.css to work with Bootstrap */
:root{
  --sidebar-bg:#1f2937; /* dark slate */
  --sidebar-color:#e6eef8;
  --brand-color:#0ea5a4;
  --card-bg:#ffffff;
  --page-bg:#f3f6fb;
}
html,body{height:100%;}
body{background:var(--page-bg);font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;margin:0}
.sidebar{background:var(--sidebar-bg);color:var(--sidebar-color);min-height:100vh}
.sidebar .brand{padding:1rem;font-weight:700;color:var(--brand-color);border-bottom:1px solid rgba(255,255,255,0.04)}
.sidebar nav{display:flex;flex-direction:column;gap:0.75rem;padding:1rem}
.sidebar .nav-link{color:var(--sidebar-color);display:flex;align-items:center;padding:0.75rem;border-radius:8px;text-decoration:none}
.sidebar .nav-link i { margin-right:0.6rem }
.sidebar .nav-link:hover{background:rgba(255,255,255,0.03);color:#fff}
.sidebar .nav-link.active{background:rgba(255,255,255,0.06);color:#fff}
.main-header{background:#fff;border-bottom:1px solid #e6eef8;padding:0.75rem 1rem;margin-bottom:1rem}
.stats-card{background:var(--card-bg);border-radius:8px;padding:1rem;box-shadow:0 1px 2px rgba(16,24,40,0.04);color:#0f172a}
.stats-card .stat-label{color:#6b7280;font-size:0.85rem}
.stats-card .stat-number{color:var(--brand-color);font-weight:700;font-size:1.6rem}
.container, .main-header, .table-card, main { color: #0f172a; }
.stats-card, .table-card { color: #0f172a; }
main { background: var(--page-bg); color: #0f172a; min-height: 100vh; }
main, main h1, main h2, main h3, main h4, main p, main table, main td, main th, main .btn, main .form-control { color: #0f172a !important; }
.stats-card, .table-card, .card { background: var(--card-bg) !important; }
.table-card{background:var(--card-bg);border-radius:8px;padding:0.5rem;box-shadow:0 1px 2px rgba(16,24,40,0.04)}
.search-input{max-width:420px}
.brand-small{color:var(--brand-color);font-weight:700}
.sidebar .logout{color:#ffb4b4}
.mobile-sidebar{background:var(--sidebar-bg);color:var(--sidebar-color);height:100%;padding:1rem}
.mobile-sidebar { width: 80vw; max-width: 320px }
.slide-sidebar { background: var(--sidebar-bg); color: var(--sidebar-color); height: 100%; padding: 1rem; width: 80vw; max-width: 320px }
.topbar { position: sticky; top: 0; left: 0; right: 0; z-index: 1100; display:flex; align-items:center; justify-content:space-between }
.topbar .title { flex: 1 1 auto; text-align: left; font-size:1rem; font-weight:600 }
.topbar .btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; margin-left:0.5rem }
.topbar { padding-top:0.35rem; padding-bottom:0.35rem }
.overlay-bg { animation: overlay-fade-in 180ms ease forwards }
@keyframes overlay-fade-in { from { opacity: 0 } to { opacity: 0.5 } }
.slide-sidebar { transform: translateX(-100%); animation: slide-in 220ms cubic-bezier(.2,.9,.3,1) forwards; box-shadow: 0 8px 24px rgba(2,6,23,0.24); border-right: 1px solid rgba(255,255,255,0.03); }
@keyframes slide-in { from { transform: translateX(-100%) } to { transform: translateX(0) } }
@keyframes slide-out { from { transform: translateX(0) } to { transform: translateX(-100%) } }
.overlay-bg.closing { animation: overlay-fade-out 160ms ease forwards }
@keyframes overlay-fade-out { from { opacity: 0.5 } to { opacity: 0 } }
.slide-sidebar.closing { animation: slide-out 200ms cubic-bezier(.2,.9,.3,1) forwards }
.sidebar .nav-link.active { background: rgba(255,255,255,0.04); color: #fff; position: relative }
.sidebar .nav-link.active::before { content: ''; position: absolute; left: 0.4rem; top: 10%; bottom: 10%; width: 4px; background: var(--brand-color); border-radius: 2px }
.sidebar .sidebar-version { font-size: 0.85rem; color: rgba(255,255,255,0.75); border-top: 1px solid rgba(255,255,255,0.03); padding-top: 0.75rem }
.slide-sidebar .brand { padding-top: 0.25rem; padding-bottom: 0.5rem; font-size: 1.15rem }
.slide-sidebar nav { display:flex; flex-direction:column; gap:0.4rem; margin-top: 0.25rem }
.slide-sidebar .nav-link { display:flex; align-items:center; gap:0.75rem; padding:0.65rem 0.6rem; border-radius:8px; color:var(--sidebar-color); text-align:left }
.slide-sidebar .nav-link:hover { background: rgba(255,255,255,0.03) }
.slide-sidebar .nav-link.active { background: rgba(255,255,255,0.06); color: #fff; position: relative }
.slide-sidebar .nav-link.active::before { content: ''; position: absolute; left: 0.4rem; top: 10%; bottom: 10%; width: 4px; background: var(--brand-color); border-radius: 2px }
.slide-sidebar .logout { margin-top: 0.75rem; color:#ffb4b4 }
.slide-sidebar .sidebar-version { margin-top: 1.25rem }
@media (min-width: 768px) { .slide-sidebar { width: 360px; max-width: 360px } .slide-sidebar .brand { font-size: 1.25rem } .slide-sidebar .nav-link { padding:0.85rem 0.8rem } }
.sidebar-version{color:var(--sidebar-color);opacity:0.95;font-size:0.85rem}
.mobile-sidebar .sidebar-version{color:var(--sidebar-color);opacity:0.95}
.sidebar .bi { font-size:1.05rem; vertical-align:-0.125rem; margin-right:0.55rem }
.mobile-sidebar .bi { margin-right:0.6rem }
.stats-card { padding: 0.9rem }
.stat-label { font-size: 0.82rem }
.stat-number { font-size: 1.4rem }
.stat-icon { font-size: 1.6rem }
@media (max-width: 575.98px) { .stats-card { padding: 0.85rem } .stat-number { font-size: 1.25rem } .stat-icon { font-size: 1.35rem } .main-header { padding: 0.5rem } .container { padding-left: 0.75rem; padding-right: 0.75rem } }
@media (min-width: 576px) and (max-width: 991.98px) { .stat-number { font-size: 1.4rem } .stat-icon { font-size: 1.5rem } .stats-card { padding: 0.9rem } }
.toolbar-icons { display:flex; gap:0.5rem; align-items:center }
.toolbar-icons .bi { font-size:1.1rem; color:#111827 }