:root { --sidebar-w: 250px; --sidebar-bg: #111827; --sidebar-fg: #cbd5e1; }
body { background: #f3f4f6; font-size: .925rem; }
.admin-wrapper { display: flex; min-height: 100vh; }
.admin-sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); color: var(--sidebar-fg); position: fixed; inset: 0 auto 0 0; overflow-y: auto; z-index: 1030; transition: transform .2s; }
.sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; font-weight: 700; font-size: 1.1rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand i { font-size: 1.5rem; color: #22c55e; }
.sidebar-nav { list-style: none; margin: 0; padding: .75rem 0; }
.sidebar-nav .nav-header { padding: .9rem 1.25rem .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; }
.sidebar-nav a { display: flex; align-items: center; gap: .7rem; padding: .55rem 1.25rem; color: var(--sidebar-fg); text-decoration: none; border-left: 3px solid transparent; }
.sidebar-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidebar-nav a.active { background: rgba(34,197,94,.12); color: #fff; border-left-color: #22c55e; }
.sidebar-nav a.disabled { opacity: .45; pointer-events: none; }
.sidebar-nav a i { width: 1.2rem; text-align: center; }
.admin-main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }
.admin-topbar { background: #fff; border-bottom: 1px solid #e5e7eb; padding: .6rem 1.25rem; display: flex; align-items: center; position: sticky; top: 0; z-index: 1020; }
.topbar-title { font-weight: 600; font-size: 1.05rem; }
.avatar { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: #22c55e; color: #fff; align-items: center; justify-content: center; font-weight: 700; }
.admin-content { padding: 1.25rem; flex: 1; }
.admin-footer { padding: .75rem 1.25rem; color: #6b7280; font-size: .8rem; border-top: 1px solid #e5e7eb; }
.card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.card-header { background: #fff; font-weight: 600; }
.stat-card .fs-4 { line-height: 1.2; }
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #111827, #1f2937); }
.login-card { width: 100%; max-width: 400px; border-radius: 1rem; }
.table th { font-weight: 600; font-size: .8rem; text-transform: uppercase; color: #6b7280; }
@media (max-width: 991.98px) {
    .admin-sidebar { transform: translateX(-100%); }
    .admin-sidebar.show { transform: none; }
    .admin-main { margin-left: 0; }
}

/* ---------- Responsive / mobile ---------- */
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1029; }
.sidebar-backdrop.show { display: block; }
.topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card-header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.table-responsive > .table { margin-bottom: 0; }
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.nav-tabs .nav-link { white-space: nowrap; }
.pagination { flex-wrap: wrap; }
.card-footer .pagination { margin-bottom: 0; }
.card-footer p.small { margin-bottom: .25rem; }
.modal-dialog { margin-left: auto; margin-right: auto; }

@media (max-width: 991.98px) {
    .admin-sidebar { box-shadow: 4px 0 20px rgba(0,0,0,.3); }
    .admin-topbar { padding: .5rem .75rem; }
    .admin-content { padding: .75rem; }
    .admin-footer { padding: .6rem .75rem; text-align: center; }
    .table { font-size: .85rem; }
    .table td, .table th { white-space: nowrap; }
    .table td.wrap, .table th.wrap { white-space: normal; }
}
@media (max-width: 575.98px) {
    body { font-size: .875rem; }
    .admin-content { padding: .6rem; }
    .card-body { padding: .85rem; }
    h1, .h1 { font-size: 1.5rem; } h2, .h2 { font-size: 1.3rem; } h3, .h3 { font-size: 1.15rem; }
    .stat-card .fs-4 { font-size: 1.1rem !important; }
    .stat-card .card-body { padding: .75rem; }
    .d-flex.gap-2:has(> .btn), .d-flex.gap-3:has(> .btn) { flex-wrap: wrap; }
    .card-header .btn, .card-header form { margin-left: auto; }
    .btn-group { flex-wrap: wrap; }
    .form-control.w-auto { width: 100% !important; }
    .modal-dialog { margin: .5rem; }
    .support-msg { max-width: 90% !important; }
    .dropdown-menu { font-size: .9rem; }
}