/* ============================================================
   PHSTI Global Institute — Django Admin Theme
   Clean, minimal design matching the frontend.
   ============================================================ */

:root {
    --blue: #0057c2;
    --blue-deep: #003b8e;
    --blue-soft: #e8f0fb;
    --red: #d6001c;
    --red-deep: #a80016;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --soft: #f8fafc;
    --green: #10b981;
    --amber: #f59e0b;
}

/* ── Reset & Base ──────────────────────────────────────────── */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: var(--soft) !important;
    color: var(--ink) !important;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--blue) !important; text-decoration: none; }
a:hover { color: var(--blue-deep) !important; }

/* ── Header ────────────────────────────────────────────────── */
#header {
    background: #fff !important;
    border-bottom: 2px solid var(--blue) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

#branding h1, #branding h1 a { color: var(--ink) !important; font-weight: 700 !important; font-size: 15px !important; }
#user-tools { color: var(--muted) !important; font-size: 13px !important; }
#user-tools a { color: var(--blue) !important; font-weight: 500 !important; }

/* ── Content ───────────────────────────────────────────────── */
#content { background: var(--soft) !important; padding: 24px !important; }

.breadcrumbs {
    background: #fff !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
}
.breadcrumbs a { color: var(--blue) !important; }

/* ── Sidebar ───────────────────────────────────────────────── */
#nav-sidebar, #nav-sidebar-inner {
    background: #fff !important;
    border-right: 1px solid var(--line) !important;
}

#nav-sidebar-inner { position: relative; overflow: hidden; }

#nav-sidebar-inner::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--red), var(--blue), var(--blue-deep));
    z-index: 10;
}

#nav-sidebar-apps h2 {
    color: var(--muted) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding: 12px 16px 4px !important;
}

#nav-sidebar-apps a {
    border-radius: 6px !important;
    margin: 1px 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    transition: background 0.12s, color 0.12s;
}

#nav-sidebar-apps a:hover {
    background: var(--blue-soft) !important;
    color: var(--blue) !important;
}

#nav-sidebar-apps a.active,
#nav-sidebar-apps a[aria-current="page"] {
    background: var(--blue) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

#nav-sidebar-apps .material-symbols-outlined { color: var(--blue); font-size: 20px !important; }
#nav-sidebar-apps a.active .material-symbols-outlined,
#nav-sidebar-apps a[aria-current="page"] .material-symbols-outlined { color: #fff !important; }

/* ── Buttons ───────────────────────────────────────────────── */
input[type="submit"],
.button,
.btn,
button[type="submit"] {
    background: var(--blue) !important;
    border: 1px solid var(--blue) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 20px !important;
    cursor: pointer !important;
    transition: background 0.12s, box-shadow 0.12s !important;
    box-shadow: 0 1px 3px rgba(0,87,194,0.12) !important;
}

input[type="submit"]:hover,
.button:hover,
.btn:hover,
button[type="submit"]:hover {
    background: var(--blue-deep) !important;
    border-color: var(--blue-deep) !important;
    box-shadow: 0 2px 6px rgba(0,87,194,0.2) !important;
}

.button.deletelink,
a.deletelink,
input[type="submit"][style*="background"] {
    background: var(--red) !important;
    border-color: var(--red) !important;
}

/* ── Form Fields ───────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="search"],
select,
textarea {
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    background: #fff !important;
    color: var(--ink) !important;
    transition: border-color 0.12s, box-shadow 0.12s !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(0,87,194,0.12) !important;
    outline: none !important;
}

label, .field-label { color: var(--ink) !important; font-weight: 600 !important; font-size: 13px !important; }
.help, .help-block { color: var(--muted) !important; font-size: 12px !important; }

/* ── Tables ────────────────────────────────────────────────── */
#result_list {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
}

#result_list th {
    background: var(--blue) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 10px 14px !important;
    border: none !important;
}

#result_list th a { color: #fff !important; }

#result_list td {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 13px !important;
    color: var(--ink) !important;
}

#result_list tr:last-child td { border-bottom: none !important; }
#result_list tr:hover td { background: var(--blue-soft) !important; }

/* ── Cards / Modules ───────────────────────────────────────── */
.module {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}

.module h2, .module caption {
    background: var(--blue) !important;
    color: #fff !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: none !important;
}

.module .module-body { background: #fff !important; color: var(--ink) !important; }

/* ── Messages ──────────────────────────────────────────────── */
.messagelist { border-radius: 8px !important; overflow: hidden !important; margin-bottom: 16px !important; }
.messagelist .success { background: var(--green) !important; color: #fff !important; border-radius: 8px !important; border: none !important; padding: 12px 16px !important; }
.messagelist .error { background: var(--red) !important; color: #fff !important; border-radius: 8px !important; border: none !important; padding: 12px 16px !important; }
.messagelist .warning { background: var(--amber) !important; color: #fff !important; border-radius: 8px !important; border: none !important; padding: 12px 16px !important; }
.messagelist .info { background: var(--blue) !important; color: #fff !important; border-radius: 8px !important; border: none !important; padding: 12px 16px !important; }

/* ── Fieldsets ─────────────────────────────────────────────── */
fieldset {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    background: #fff !important;
}

fieldset legend, fieldset .collapse-toggle { color: var(--ink) !important; font-weight: 600 !important; }

/* ── Inlines ───────────────────────────────────────────────── */
.inline-group {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.inline-group h3 {
    background: var(--blue) !important;
    color: #fff !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.inline-add-row { background: #fff !important; border-top: 1px solid var(--line) !important; }
.inline-add-row a { color: var(--blue) !important; font-weight: 600 !important; }

/* ── Filter Sidebar ────────────────────────────────────────── */
#changelist-filter {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 16px !important;
}

#changelist-filter h2 { color: var(--ink) !important; font-size: 13px !important; font-weight: 600 !important; }
#changelist-filter label { color: var(--ink) !important; font-weight: 500 !important; }
#changelist-filter a { color: var(--blue) !important; }
#changelist-filter a.selected { color: var(--blue-deep) !important; font-weight: 700 !important; }

/* ── Pagination ────────────────────────────────────────────── */
.pagination {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 6px !important;
}

.pagination a, .pagination span { color: var(--blue) !important; font-weight: 500 !important; padding: 4px 10px !important; }
.pagination .this-page { background: var(--blue) !important; color: #fff !important; border-radius: 4px !important; font-weight: 600 !important; }

/* ── Object Tools ──────────────────────────────────────────── */
.object-tools {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 0 !important;
}

/* ── Footer ────────────────────────────────────────────────── */
#footer {
    border-top: 1px solid var(--line) !important;
    background: #fff !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    padding: 12px 24px !important;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--soft); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Dark Mode ─────────────────────────────────────────────── */
.dark body, body.dark { background: #1e293b !important; color: #e2e8f0 !important; }
.dark #header { background: #0f172a !important; border-bottom-color: var(--blue) !important; }
.dark #branding h1, .dark #branding h1 a { color: #e2e8f0 !important; }
.dark #user-tools { color: #94a3b8 !important; }
.dark #content { background: #1e293b !important; }
.dark #nav-sidebar, .dark #nav-sidebar-inner { background: #0f172a !important; border-right-color: rgba(255,255,255,0.06) !important; }
.dark #result_list th { background: var(--blue-deep) !important; }
.dark #result_list td { color: #e2e8f0 !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
.dark .module { background: #0f172a !important; border-color: rgba(255,255,255,0.06) !important; }
.dark .module h2, .dark .module caption { background: var(--blue-deep) !important; }
.dark input, .dark select, .dark textarea { background: #1e293b !important; border-color: rgba(255,255,255,0.1) !important; color: #e2e8f0 !important; }
.dark label, .dark .field-label { color: #e2e8f0 !important; }
.dark .breadcrumbs { background: #0f172a !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
.dark #changelist-filter { background: #0f172a !important; border-color: rgba(255,255,255,0.06) !important; }
.dark fieldset { background: #0f172a !important; border-color: rgba(255,255,255,0.06) !important; }
.dark .inline-group { background: #0f172a !important; border-color: rgba(255,255,255,0.06) !important; }
.dark #footer { background: #0f172a !important; border-top-color: rgba(255,255,255,0.06) !important; color: #94a3b8 !important; }

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}