/* ============================================================
   Aquila Innovations — Admin Panel Stylesheet
   ============================================================ */

* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; }
body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: #f1f5f9; color: #0f172a;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* ---------- Alerts (shared) ---------- */
.alert { display: flex; align-items: flex-start; gap: .8rem; padding: .9rem 1.1rem; border-radius: .8rem; font-size: .9rem; font-weight: 500; margin-bottom: 1rem; }
.alert-green { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-red { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-amber { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.alert-blue { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.alert-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: inherit; opacity: .6; }

/* ---------- Buttons ---------- */
.btn-primary {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 700;
    padding: .7rem 1.3rem; border-radius: .7rem; color: #fff; cursor: pointer; border: none;
    background: linear-gradient(135deg,#2455de,#0ea5e9);
    box-shadow: 0 10px 26px -10px rgba(36,85,222,.55); transition: all .25s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(36,85,222,.65); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
    padding: .7rem 1.2rem; border-radius: .7rem; color: #1e3a9f;
    background: #eef4ff; transition: all .2s; border: none; cursor: pointer;
}
.btn-ghost:hover { background: #dce7fd; }
.btn-outline {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
    padding: .7rem 1.2rem; border-radius: .7rem; color: #1e3a9f;
    border: 1.5px solid #c0d4fb; background: transparent; transition: all .2s; cursor: pointer;
}
.btn-outline:hover { background: #eef4ff; }
.btn-sm { padding: .5rem .85rem; font-size: .84rem; border-radius: .6rem; }

/* ---------- Login ---------- */
.login-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#0b1633,#1e3a9f 60%,#0ea5e9);
    position: relative; overflow: hidden; padding: 1.5rem;
}
.login-blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .4; }
.login-blob-1 { width: 460px; height: 460px; top: -140px; right: -100px; background: #f59e0b; }
.login-blob-2 { width: 420px; height: 420px; bottom: -140px; left: -120px; background: #0ea5e9; }
.login-wrap { width: 100%; max-width: 420px; position: relative; z-index: 2; }
.login-card {
    background: #fff; border-radius: 1.6rem; padding: 2.2rem;
    box-shadow: 0 40px 90px -20px rgba(0,0,0,.5);
}

/* ---------- Admin layout ---------- */
.admin-body { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 260px; flex-shrink: 0; background: #0b1633; color: #cbd5e1;
    display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 60;
    transition: transform .3s ease;
}
.sidebar-brand {
    display: flex; align-items: center; gap: .8rem; padding: 1.25rem 1.4rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-mark {
    width: 42px; height: 42px; border-radius: .9rem; display: grid; place-items: center;
    background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #0b1633; font-weight: 800; font-size: 1.3rem;
}
.brand-text b { display: block; color: #fff; font-size: 1.05rem; letter-spacing: .02em; }
.brand-text small { font-size: .7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .12em; }
.sidebar-nav { padding: .9rem .8rem; overflow-y: auto; flex: 1; }
.nav-group-label { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: #64748b; padding: .9rem .8rem .5rem; }
.nav-item {
    display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem;
    border-radius: .65rem; font-size: .9rem; font-weight: 600; color: #94a3b8; transition: all .2s; margin-bottom: 2px;
}
.nav-item i { width: 20px; text-align: center; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: linear-gradient(135deg,#2455de,#0ea5e9); color: #fff; box-shadow: 0 10px 24px -8px rgba(36,85,222,.6); }
.sidebar-overlay { position: fixed; inset: 0; background: rgba(2,6,23,.5); z-index: 55; display: none; }

.admin-main { flex: 1; margin-left: 260px; display: flex; flex-direction: column; min-height: 100vh; }
.admin-topbar {
    height: 68px; background: #fff; border-bottom: 1px solid #e2e8f0;
    display: flex; align-items: center; gap: .8rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 50;
}
.topbar-icon {
    width: 42px; height: 42px; border-radius: .6rem; border: none; cursor: pointer;
    background: #f1f5f9; color: #334155; font-size: 1.05rem; display: grid; place-items: center; transition: all .2s;
}
.topbar-icon:hover { background: #eef4ff; color: #1e3a9f; }
.admin-page-title { font-weight: 800; color: #0f172a; font-size: 1rem; }
.topbar-link { color: #334155; font-size: .85rem; font-weight: 600; padding: .45rem .85rem; border-radius: .6rem; background: #f1f5f9; transition: all .2s; }
.topbar-link:hover { background: #eef4ff; color: #1e3a9f; }
.admin-profile { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: .7rem; cursor: pointer; }
.admin-profile:hover { background: #f8fafc; }
.avatar-sm { width: 38px; height: 38px; border-radius: .7rem; display: grid; place-items: center; font-weight: 800; font-size: .95rem; }
.hp-info b { display: block; font-size: .85rem; color: #0f172a; line-height: 1.2; }
.hp-info small { font-size: .72rem; color: #94a3b8; }

.admin-content { padding: 1.8rem 1.8rem 2rem; flex: 1; }
.admin-footer { padding: 1rem 1.8rem; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; font-size: .8rem; color: #94a3b8; }

/* ---------- Cards ---------- */
.admin-card {
    background: #fff; border: 1px solid #eef1f6; border-radius: 1.1rem; padding: 1.4rem;
    box-shadow: 0 4px 20px rgba(2,6,23,.04);
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.card-head h3 { font-size: 1rem; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: .5rem; }
.stat-card-lg {
    background: #fff; border: 1px solid #eef1f6; border-radius: 1.1rem; padding: 1.4rem;
    box-shadow: 0 4px 20px rgba(2,6,23,.04); transition: all .25s; display: block;
}
.stat-card-lg:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -14px rgba(2,6,23,.14); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.badge-green { background: #ecfdf5; color: #047857; }
.badge-red { background: #fef2f2; color: #b91c1c; }
.badge-amber { background: #fffbeb; color: #b45309; }
.badge-blue { background: #eff6ff; color: #1d4ed8; }
.badge-slate { background: #f1f5f9; color: #475569; }

/* ---------- Icon buttons ---------- */
.icon-btn {
    width: 34px; height: 34px; border-radius: .55rem; border: none; cursor: pointer;
    background: #f1f5f9; color: #475569; display: grid; place-items: center; transition: all .2s;
}
.icon-btn:hover { background: #eef4ff; color: #1e3a9f; transform: scale(1.06); }
.icon-btn.is-active { background: #fffbeb; }

/* ---------- Forms ---------- */
.form-label { display: block; font-size: .82rem; font-weight: 700; color: #334155; margin-bottom: .4rem; }
.form-input {
    width: 100%; padding: .68rem .95rem; border-radius: .7rem; border: 1.5px solid #e2e8f0;
    background: #fff; font-size: .9rem; color: #0f172a; transition: all .2s; outline: none; font-family: inherit;
}
.form-input:focus { border-color: #6194f0; box-shadow: 0 0 0 4px rgba(97,148,240,.15); }
textarea.form-input { resize: vertical; }
.input-icon-wrap { position: relative; display: flex; align-items: center; }
.input-icon-wrap > i { position: absolute; left: .95rem; color: #94a3b8; font-size: .9rem; }
.input-icon-wrap .form-input { padding-left: 2.5rem; padding-right: 2.7rem; }
.pw-toggle { position: absolute; right: .6rem; width: 32px; height: 32px; border: none; background: none; color: #94a3b8; cursor: pointer; border-radius: .4rem; }
.pw-toggle:hover { background: #f1f5f9; color: #334155; }

/* ---------- Toggle switch ---------- */
.toggle-row { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .9rem; font-weight: 600; color: #334155; }
.toggle-row input { display: none; }
.toggle-switch { width: 42px; height: 24px; border-radius: 999px; background: #cbd5e1; position: relative; transition: all .25s; flex-shrink: 0; }
.toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: all .25s; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.toggle-row input:checked + .toggle-switch { background: linear-gradient(135deg,#2455de,#0ea5e9); }
.toggle-row input:checked + .toggle-switch::after { left: 21px; }

/* ---------- Drop zone ---------- */
.drop-zone {
    border: 2px dashed #c0d4fb; border-radius: 1rem; background: #f8faff;
    text-align: center; padding: 2rem; cursor: pointer; transition: all .25s;
}
.drop-zone.dragover { border-color: #2455de; background: #eef4ff; transform: scale(1.01); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.6); backdrop-filter: blur(4px); }
.modal-card {
    position: relative; background: #fff; border-radius: 1.2rem; padding: 1.6rem;
    width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 40px 90px -20px rgba(0,0,0,.4); animation: modalUp .3s ease;
}
@keyframes modalUp { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-card-sm { max-width: 480px; }

/* ---------- DataTables tweaks ---------- */
.dataTable { width: 100% !important; }
.dataTable th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; border-bottom: 2px solid #e2e8f0 !important; padding: .8rem .9rem !important; background: #f8fafc; }
.dataTable td { font-size: .88rem; padding: .75rem .9rem !important; border-bottom: 1px solid #eef1f6 !important; vertical-align: middle; }
.dataTable tbody tr:hover { background: #f8faff; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin: .7rem .9rem; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { padding: .4rem .6rem; border: 1.5px solid #e2e8f0; border-radius: .55rem; outline: none; }
.dataTables_wrapper .dataTables_paginate { padding: .8rem .9rem 1rem; }
.dataTables_wrapper .paginate_button { padding: .35rem .7rem !important; border-radius: .5rem !important; margin: 0 2px; }
.dataTables_wrapper .paginate_button.current { background: linear-gradient(135deg,#2455de,#0ea5e9) !important; color: #fff !important; border: none !important; }

/* ---------- Icon picker ---------- */
.icon-option input { display: none; }
.icon-box { width: 42px; height: 42px; border-radius: .6rem; border: 1.5px solid #e2e8f0; display: grid; place-items: center; color: #64748b; cursor: pointer; transition: all .2s; }
.icon-option input:checked + .icon-box { border-color: #2455de; background: #eef4ff; color: #2455de; transform: scale(1.08); }

/* ---------- Password strength ---------- */
.strength-bar { height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.strength-fill { height: 100%; width: 0%; border-radius: 999px; background: #dc2626; transition: all .3s; }

/* ---------- Toast ---------- */
#toast { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: .6rem; }
.toast-item { padding: .9rem 1.1rem; border-radius: .8rem; color: #fff; font-size: .88rem; font-weight: 600; box-shadow: 0 20px 44px -12px rgba(0,0,0,.35); animation: toastIn .3s ease; min-width: 260px; }
.toast-item.toast-success { background: #059669; }
.toast-item.toast-error { background: #dc2626; }
.toast-item.toast-info { background: #1d4ed8; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

/* ---------- Utility ---------- */
.text-brand-950 { color: #0b1633; }
.text-brand-900 { color: #16294a; }
.text-brand-700 { color: #1e43c4; }
.text-brand-600 { color: #2455de; }
.text-gold-500 { color: #f59e0b; }
.bg-brand-50 { background: #eef4ff; }
.max-w-3xl { max-width: 56rem; }
.max-w-xl { max-width: 36rem; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.sm\:grid-cols-2 { }
.lg\:grid-cols-3 { }
.lg\:grid-cols-4 { }
.gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; }
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; }
.flex-1 { flex: 1; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-x-2 > * + * { margin-left: .5rem; }
.pt-2 { padding-top: .5rem; } .pt-3 { padding-top: .75rem; } .pb-4 { padding-bottom: 1rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .25rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-full { width: 100%; }
.text-sm { font-size: .88rem; } .text-xs { font-size: .78rem; } .text-lg { font-size: 1.1rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.9rem; } .text-4xl { font-size: 2.3rem; }
.font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-semibold { font-weight: 600; }
.text-center { text-align: center; } .text-right { text-align: right; }
.rounded-full { border-radius: 999px; } .rounded-xl { border-radius: .8rem; }
.object-cover { object-fit: cover; } .object-center { object-position: center; }
.overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; }
.hidden { display: none !important; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.max-w-xs { max-width: 18rem; } .max-w-md { max-width: 28rem; }
.text-slate-400 { color: #94a3b8; } .text-slate-500 { color: #64748b; } .text-slate-600 { color: #475569; } .text-slate-700 { color: #334155; } .text-slate-800 { color: #1e293b; }
.text-white { color: #fff; }
.text-rose-400 { color: #f43f5e; } .text-rose-500 { color: #f43f5e; } .text-rose-600 { color: #e11d48; }
.text-emerald-600 { color: #059669; } .text-emerald-500 { color: #10b981; }
.text-amber-500 { color: #f59e0b; } .text-gold-500 { color: #f59e0b; }
.bg-slate-50 { background: #f8fafc; } .bg-slate-100 { background: #f1f5f9; } .bg-slate-900 { background: #0f172a; }
.bg-white { background: #fff; }
.h-44 { height: 11rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .admin-sidebar { transform: translateX(-100%); }
    .admin-sidebar.open { transform: translateX(0); }
    .sidebar-overlay.show { display: block; }
    .admin-main { margin-left: 0; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-6,
    .lg\:grid-cols-3, .lg\:grid-cols-4, .sm\:grid-cols-2 { grid-template-columns: 1fr; }
    .admin-content { padding: 1.1rem; }
    .admin-topbar { padding: 0 .9rem; }
}