:root{--brand:#4f46e5;--brand-2:#7c3aed;--surface:#fff;--surface-2:#f8fafc;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;--sidebar:#111827;--shadow:0 18px 50px rgba(15,23,42,.08)}
html.dark{--surface:#111827;--surface-2:#0f172a;--text:#f8fafc;--muted:#94a3b8;--border:#263244;--sidebar:#070b14;--shadow:0 18px 50px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at 85% 0,rgba(99,102,241,.12),transparent 28%),var(--surface-2);color:var(--text);min-height:100vh}a,button,input,select,textarea{transition:.2s ease}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(99,102,241,.28);outline-offset:2px}
.app-sidebar{background:linear-gradient(180deg,var(--sidebar),#172554 110%)}.nav-link{position:relative;border:1px solid transparent}.nav-link:hover{transform:translateX(3px);background:rgba(255,255,255,.08)}.nav-link.active{background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 10px 24px rgba(79,70,229,.28)}.nav-link.active:before{content:"";position:absolute;left:-8px;width:4px;height:26px;border-radius:9px;background:#a5b4fc}
.app-header{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}.page-heading{background:linear-gradient(135deg,#312e81,#6d28d9 70%,#9333ea);box-shadow:0 20px 45px rgba(76,29,149,.22)}
main>div,.panel-card{animation:rise .32s ease both}@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bg-white,.dark\:bg-gray-800,.dark\:bg-gray-900{border-color:var(--border)}table{border-collapse:separate;border-spacing:0}thead th{white-space:nowrap}tbody tr:hover{background:rgba(99,102,241,.045)}input,select,textarea{max-width:100%}.responsive-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:20px}html.dark ::-webkit-scrollbar-thumb{background:#475569}
@media(min-width:768px){.main-content-area{width:calc(100% - 17rem);margin-left:17rem}.app-sidebar{width:17rem}}
@media(max-width:767px){main{padding:1rem!important}.page-heading{border-radius:1.25rem!important;padding:1.1rem!important}.page-heading h1{font-size:1.3rem!important}.mobile-hide{display:none!important}table{min-width:720px}.app-header{padding:.75rem 1rem!important}.admin-user-label{display:none}.grid{gap:1rem!important}.p-6{padding:1rem}.p-8{padding:1.25rem}.text-3xl{font-size:1.6rem}.text-4xl{font-size:1.85rem}}
@media(max-width:420px){main{padding:.75rem!important}.app-header{padding:.65rem .75rem!important}.theme-label{display:none}}

/* Global class-based theme compatibility for every legacy admin page. */
html{color-scheme:light}html.dark{color-scheme:dark}
html.dark body{background:radial-gradient(circle at 85% 0,rgba(99,102,241,.13),transparent 28%),#0f172a!important;color:#f8fafc!important}
html.dark .bg-white{background-color:#111827!important}
html.dark .bg-gray-50,html.dark .bg-slate-50{background-color:#0f172a!important}
html.dark .bg-gray-100,html.dark .bg-slate-100{background-color:#1f2937!important}
html.dark .bg-gray-200,html.dark .bg-slate-200{background-color:#334155!important}
html.dark .text-gray-900,html.dark .text-gray-800,html.dark .text-slate-900,html.dark .text-slate-800{color:#f8fafc!important}
html.dark .text-gray-700,html.dark .text-gray-600,html.dark .text-slate-700,html.dark .text-slate-600{color:#cbd5e1!important}
html.dark .text-gray-500,html.dark .text-slate-500{color:#94a3b8!important}
html.dark .border-gray-100,html.dark .border-gray-200,html.dark .border-gray-300,html.dark .border-slate-100,html.dark .border-slate-200,html.dark .border-slate-300{border-color:#334155!important}
html.dark input,html.dark select,html.dark textarea{background-color:#1f2937!important;color:#f8fafc!important;border-color:#475569!important}
html.dark input::placeholder,html.dark textarea::placeholder{color:#94a3b8!important}
html.dark option{background:#1f2937;color:#f8fafc}
html.dark table{color:#e5e7eb}
html.dark thead,html.dark thead tr{background-color:#1f2937!important}
html.dark tbody tr{border-color:#334155!important}
html.dark tbody tr:hover{background-color:rgba(99,102,241,.1)!important}
html.dark .shadow,html.dark .shadow-md,html.dark .shadow-lg,html.dark .shadow-xl,html.dark .shadow-2xl{--tw-shadow-color:rgba(0,0,0,.38)!important}

/* Professional responsive system */
:root{--radius-xl:1.25rem;--radius-2xl:1.75rem;--content-max:1600px}
main{width:100%;max-width:var(--content-max);margin-inline:auto}
main form{max-width:100%}
main .rounded-2xl,main .rounded-3xl{overflow-wrap:anywhere}
main .shadow,main .shadow-md,main .shadow-lg,main .shadow-xl{box-shadow:var(--shadow)}
main input:not([type=checkbox]):not([type=radio]),main select,main textarea{min-height:46px;border-radius:12px}
main button,main a{touch-action:manipulation}
main table{width:100%;font-size:.875rem}
main th,main td{padding:.85rem 1rem;vertical-align:middle}
main thead th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:color-mix(in srgb,var(--surface-2) 82%,transparent)}
.responsive-table{width:100%;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.responsive-table table{min-width:760px}
.panel-card,.bg-white{border:1px solid var(--border)}
.empty-state{padding:2.5rem 1rem;text-align:center;color:var(--muted)}

@media(max-width:1023px){
  .lg\:grid-cols-4,.lg\:grid-cols-3,.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:767px){
  main{max-width:100%;overflow-x:hidden}
  .grid-cols-2,.md\:grid-cols-2,.lg\:grid-cols-2,.lg\:grid-cols-3,.lg\:grid-cols-4{grid-template-columns:1fr!important}
  .flex.items-center.justify-between{gap:.75rem;flex-wrap:wrap}
  main form .flex{flex-wrap:wrap}
  main form button,main form .btn{min-height:46px}
  .responsive-table{margin-inline:0;border-radius:14px}
  .responsive-table table{min-width:680px}
  .page-heading p{max-width:100%}
}
@media(max-width:480px){
  main th,main td{padding:.7rem .75rem}
  .responsive-table table{min-width:620px}
  .page-heading h2{font-size:1.45rem!important}
}


/* Mobile overflow hardening */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }
@media (max-width: 767px) {
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
  table { min-width: 680px; }
  .fixed.inset-0 > div, [role="dialog"] > div { max-width: calc(100vw - 1rem) !important; margin-left: auto !important; margin-right: auto !important; }
}