/*
 * JDIH Udayana — Admin panel theme
 * Clean modern look inspired by the "Kawalmu" reference (kawal.uin-alauddin.ac.id),
 * re-themed with Udayana's identity: navy (#013880) + gold (#fec310) accent,
 * white background, soft gradient blobs, generous radius/spacing.
 */

:root {
    --jdih-navy: #013880;
    --jdih-navy-dark: #001228;
    --jdih-charcoal: #15171c;
    --jdih-charcoal-soft: #1e2128;
    --jdih-gold: #fec310;
    --jdih-gold-dark: #b48a0b;
    --jdih-radius-lg: 20px;
    --jdih-radius-md: 16px;
}

/* ==================================================
 * 1. GLOBAL — background, radius, spacing
 * ================================================== */
.fi-body {
    background-color: #ffffff !important;
}

.dark .fi-body {
    background-color: #0b0d11 !important;
}

.fi-main {
    position: relative;
    z-index: 10;
}

/* Large, consistent corner radius across cards / panels / inputs */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-modal-window,
.fi-dropdown-panel {
    border-radius: var(--jdih-radius-lg) !important;
}

.fi-input-wrp,
.fi-select-input,
.fi-btn {
    border-radius: 9999px !important;
}

.fi-section {
    box-shadow: 0 1px 3px rgba(1, 56, 128, 0.06), 0 8px 24px -12px rgba(1, 56, 128, 0.08) !important;
    border-color: rgba(1, 56, 128, 0.08) !important;
}

/* ==================================================
 * 2. BACKGROUND BLOBS — soft navy glow (blue-dominant, per Udayana identity)
 * ================================================== */
.admin-bg-blob-1,
.admin-bg-blob-2 {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    filter: blur(90px);
}

.admin-bg-blob-1 {
    width: 620px;
    height: 620px;
    top: -160px;
    right: -140px;
    background: linear-gradient(to bottom right, var(--jdih-navy), #2c5a96);
    opacity: 0.14;
}

.admin-bg-blob-2 {
    width: 560px;
    height: 560px;
    bottom: -180px;
    left: 260px;
    background: linear-gradient(to top right, #2c5a96, var(--jdih-navy));
    opacity: 0.09;
}

.dark .admin-bg-blob-1 {
    opacity: 0.16;
}

.dark .admin-bg-blob-2 {
    opacity: 0.12;
}

/* ==================================================
 * 3. SIDEBAR — dark charcoal, card-style nav, gold active pill
 * ================================================== */
.fi-sidebar {
    background: var(--jdih-charcoal) !important;
    border-inline-end: none !important;
    z-index: 30;
}

.fi-sidebar-header {
    border-color: rgba(255, 255, 255, 0.08) !important;
    padding-block: 1.25rem !important;
}

/* Brand text + tagline injected via SIDEBAR_LOGO_AFTER render hook */
.jdih-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    margin-inline-start: 0.75rem;
}

.jdih-sidebar-brand-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
}

.jdih-sidebar-brand-tagline {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
}

.fi-sidebar-header-logo-ctn {
    display: flex !important;
    align-items: center;
}

.fi-sidebar-header-logo-ctn a {
    display: flex;
    align-items: center;
}

.fi-sidebar-nav-groups {
    padding-inline: 0.75rem !important;
    gap: 0.375rem !important;
}

.fi-sidebar-group-items {
    gap: 0.375rem !important;
}

.fi-sidebar-item-btn {
    border-radius: var(--jdih-radius-md) !important;
    padding-block: 0.65rem !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Filament sets its own explicit (non-inherited) color directly on the
   label span and icon — overriding color on the parent .fi-sidebar-item-btn
   has no effect on them, so both must be targeted explicitly here. */
.fi-sidebar-item-label,
.fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item-btn svg {
    color: rgba(255, 255, 255, 0.82) !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item-btn:hover > .fi-icon,
.fi-sidebar-item-btn:hover svg {
    color: #ffffff !important;
}

/* Active item: solid navy pill (per spec — replaces thin border-left).
   Blue is Udayana's dominant identity color; gold stays a minor accent
   elsewhere (badge dot, chart bar), matching the real unud.ac.id site. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(135deg, #1d4ed8, var(--jdih-navy)) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px -4px rgba(1, 56, 128, 0.55);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg {
    color: #ffffff !important;
}

.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ==================================================
 * 4. TOPBAR — clean white/transparent with soft shadow
 * ================================================== */
.fi-topbar {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(1, 56, 128, 0.06) !important;
    box-shadow: 0 1px 2px rgba(1, 56, 128, 0.04) !important;
}

.dark .fi-topbar {
    background-color: rgba(11, 13, 17, 0.85) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Brand text + tagline injected via TOPBAR_LOGO_AFTER render hook —
   visible because sidebarCollapsibleOnDesktop() moves the brand logo
   into the topbar and hides the sidebar's own header on desktop. */
.jdih-topbar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    margin-inline-start: 0.65rem;
}

.jdih-topbar-brand-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.dark .jdih-topbar-brand-name {
    color: #f8fafc;
}

.jdih-topbar-brand-tagline {
    font-size: 0.68rem;
    color: #64748b;
}

/* Global search — pill shape */
.fi-global-search .fi-input-wrp {
    border-radius: 9999px !important;
    background-color: #f4f5f7 !important;
    border-color: transparent !important;
}

.dark .fi-global-search .fi-input-wrp {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-global-search .fi-input {
    border-radius: 9999px !important;
}

/* ==================================================
 * 5. PAGE HEADER — badge + bold heading
 * ================================================== */
.jdih-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.85rem;
    margin-bottom: 0.6rem;
    border-radius: 9999px;
    background-color: color-mix(in srgb, var(--jdih-gold) 16%, white);
    color: var(--jdih-gold-dark);
    font-size: 0.75rem;
    font-weight: 600;
}

.dark .jdih-page-badge {
    background-color: color-mix(in srgb, var(--jdih-gold) 20%, black);
    color: var(--jdih-gold);
}

.jdih-page-badge-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background-color: var(--jdih-gold);
}

.fi-header-heading {
    font-size: 1.875rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    color: #0f172a !important;
}

.dark .fi-header-heading {
    color: #f8fafc !important;
}

/* ==================================================
 * 6. STAT CARDS — bold values, soft shadow
 * ================================================== */
.fi-wi-stats-overview-stat {
    border: none !important;
    box-shadow: 0 1px 3px rgba(1, 56, 128, 0.06), 0 10px 28px -14px rgba(1, 56, 128, 0.12) !important;
    padding: 1.5rem !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.dark .fi-wi-stats-overview-stat-value {
    color: #f8fafc !important;
}

.fi-wi-stats-overview-stat-label {
    font-weight: 500 !important;
    color: #64748b !important;
}

/* ==================================================
 * 7. BUTTONS — pill shape, brand accent
 * ================================================== */
.fi-btn {
    font-weight: 600 !important;
}

.fi-btn-color-primary {
    box-shadow: 0 4px 14px -4px rgba(1, 56, 128, 0.35) !important;
}

/* ==================================================
 * 8. TABLES — lighter borders, generous spacing, soft hover
 * ================================================== */
.fi-ta-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.fi-ta-row {
    transition: background-color 0.15s ease;
}

.fi-ta-row:hover {
    background-color: color-mix(in srgb, var(--jdih-navy) 5%, white) !important;
}

.dark .fi-ta-row:hover {
    background-color: rgba(44, 90, 150, 0.1) !important;
}

.fi-ta-header-cell {
    font-weight: 600 !important;
    color: #64748b !important;
}

.fi-ta-cell-content {
    padding-block: 0.9rem !important;
}