/**
 * TailAdmin Sage Green Theme for Filament Admin Panel
 * High-Contrast & Crisp Typography Edition
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --ta-primary: #5F8575;
    --ta-primary-hover: #4D7061;
    --ta-primary-light: #F0F5F2;
    --ta-sidebar-bg: #1B2923;
    --ta-sidebar-hover: #2B3D35;
    --ta-sidebar-active: #FFFFFF;
    --ta-bg-body: #F4F7F5;
    --ta-card-bg: #FFFFFF;
    --ta-border: #E0E7E3;
    --ta-text-heading: #1B2923;
    --ta-text-body: #334155;
    --ta-success: #10B981;
    --ta-danger: #E11D48;
    --ta-warning: #F0950C;
    --ta-info: #3BA2B8;
}

.dark {
    --ta-bg-body: #131E19;
    --ta-card-bg: #1B2923;
    --ta-border: #2B3D35;
    --ta-text-heading: #F8FAFC;
    --ta-text-body: #CBD5E1;
}

/* Global Font & Body */
body, .fi-body {
    font-family: 'Inter', sans-serif !important;
    background-color: var(--ta-bg-body) !important;
    color: var(--ta-text-body) !important;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   SIDEBAR NAVIGATION
   ========================================================================== */
.fi-sidebar {
    background-color: var(--ta-sidebar-bg) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.fi-sidebar-header {
    background-color: var(--ta-sidebar-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 1.75rem 1.5rem !important;
    min-height: 5.25rem !important;
    display: flex !important;
    align-items: center !important;
}

.fi-sidebar-header .fi-logo,
.fi-sidebar-header a,
.fi-sidebar-header span,
.fi-sidebar-header .fi-brand-name {
    font-size: 1.15rem !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: #FFFFFF !important;
    display: block !important;
    padding: 0.25rem 0 !important;
}

.fi-sidebar-nav {
    padding: 1.25rem 0.85rem !important;
}

/* Group Headers */
.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.75rem 0.75rem 0.35rem !important;
}

/* Base Navigation Items (Unselected State - High Contrast) */
.fi-sidebar-item {
    margin-bottom: 0.25rem !important;
}

.fi-sidebar-item-btn {
    border-radius: 0.75rem !important;
    padding: 0.65rem 0.85rem !important;
    transition: all 0.15s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    color: #FFFFFF !important;
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    background-color: var(--ta-sidebar-hover) !important;
    color: #FFFFFF !important;
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn svg {
    color: #E2E8F0 !important;
    transition: color 0.15s ease !important;
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover > .fi-icon,
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover svg {
    color: #FFFFFF !important;
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

/* ACTIVE / SELECTED NAVIGATION ITEM */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item > .fi-sidebar-item-btn[aria-current="page"],
.fi-sidebar-item-active > .fi-sidebar-item-btn {
    background-color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item > .fi-sidebar-item-btn[aria-current="page"] > .fi-sidebar-item-label,
.fi-sidebar-item-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg,
.fi-sidebar-item > .fi-sidebar-item-btn[aria-current="page"] > .fi-icon,
.fi-sidebar-item > .fi-sidebar-item-btn[aria-current="page"] svg,
.fi-sidebar-item-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item-active > .fi-sidebar-item-btn svg {
    color: #1F3A2E !important;
}

/* Single Badge Pill */
.fi-sidebar-item-badge-ctn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

aside.fi-sidebar .fi-sidebar-item-btn .fi-badge,
aside.fi-sidebar .fi-badge {
    background-color: #24352D !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 9999px !important;
    padding: 0.1rem 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

aside.fi-sidebar .fi-sidebar-item-btn .fi-badge span,
aside.fi-sidebar .fi-sidebar-item-btn .fi-badge .fi-badge-label-ctn,
aside.fi-sidebar .fi-badge span,
aside.fi-sidebar .fi-badge-label-ctn {
    color: #6EE7B7 !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
}

.fi-sidebar-item.fi-active .fi-badge,
.fi-sidebar-item.fi-sidebar-item-active .fi-badge,
aside.fi-sidebar [aria-current="page"] .fi-badge {
    background-color: #5F8575 !important;
    border: none !important;
}

.fi-sidebar-item.fi-active .fi-badge span,
.fi-sidebar-item.fi-sidebar-item-active .fi-badge span,
aside.fi-sidebar [aria-current="page"] .fi-badge span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   TOPBAR HEADER
   ========================================================================== */
.fi-topbar {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--ta-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.dark .fi-topbar {
    background-color: var(--ta-card-bg) !important;
    border-bottom-color: var(--ta-border) !important;
}

/* ==========================================================================
   CARDS & SECTIONS
   ========================================================================== */
.fi-section,
.fi-card {
    background-color: var(--ta-card-bg) !important;
    border: 1px solid var(--ta-border) !important;
    border-radius: 1rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.fi-section-header {
    border-bottom: 1px solid var(--ta-border) !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 1rem !important;
}

.fi-section-header-heading {
    font-weight: 700 !important;
    color: var(--ta-text-heading) !important;
}

/* ==========================================================================
   TABLES & RESPONSIVENESS
   ========================================================================== */
.fi-ta-ctn {
    border: 1px solid var(--ta-border) !important;
    border-radius: 1rem !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
}

.dark .fi-ta-ctn {
    background-color: var(--ta-card-bg) !important;
}

.fi-ta-header-cell {
    background-color: #F8FAF9 !important;
    color: #475569 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--ta-border) !important;
}

.dark .fi-ta-header-cell {
    background-color: #1E2E27 !important;
    color: #94A3B8 !important;
}

.fi-ta-row:hover {
    background-color: #F9FBFA !important;
}

.dark .fi-ta-row:hover {
    background-color: #24352D !important;
}

@media (max-width: 640px) {
    .fi-ta-ctn {
        overflow-x: hidden !important;
    }
    .fi-ta-table {
        min-width: 100% !important;
        width: 100% !important;
        table-layout: auto !important;
    }
    .fi-ta-cell {
        padding: 0.5rem 0.35rem !important;
    }
    .fi-ta-cell:first-child {
        padding-left: 0.5rem !important;
        width: 44px !important;
    }
    .fi-ta-cell:last-child {
        padding-right: 0.5rem !important;
        width: 70px !important;
    }
    .fi-ta-header-cell {
        padding: 0.5rem 0.35rem !important;
        font-size: 0.7rem !important;
    }
    .fi-ta-actions {
        gap: 0.15rem !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
    }
    .fi-ta-actions .fi-icon-btn,
    .fi-ta-actions .fi-btn {
        padding: 0.2rem !important;
    }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.fi-btn-primary {
    background-color: var(--ta-primary) !important;
    border-color: var(--ta-primary) !important;
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(95, 133, 117, 0.2) !important;
    transition: all 0.15s ease !important;
}

.fi-btn-primary:hover {
    background-color: var(--ta-primary-hover) !important;
    border-color: var(--ta-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px -1px rgba(95, 133, 117, 0.3) !important;
}

/* ==========================================================================
   FORM INPUTS
   ========================================================================== */
.fi-input,
.fi-select {
    border-radius: 0.625rem !important;
    border-color: var(--ta-border) !important;
    font-size: 0.875rem !important;
    transition: all 0.15s ease !important;
}

.fi-input:focus,
.fi-select:focus {
    border-color: var(--ta-primary) !important;
    box-shadow: 0 0 0 3px rgba(95, 133, 117, 0.15) !important;
}

/* ==========================================================================
   BADGES & STATUS
   ========================================================================== */
.fi-badge {
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.75rem !important;
}

/* ==========================================================================
   FILE UPLOAD DROPZONE - "JELAJAHI" STYLING
   ========================================================================== */
.filepond--drop-label {
    cursor: pointer !important;
}

.filepond--drop-label label {
    font-size: 0 !important;
    line-height: 0 !important;
}

.filepond--drop-label label::after {
    content: "📁 Jelajahi" !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--ta-primary, #5F8575) !important;
    display: inline-block !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.5rem !important;
    background-color: rgba(95, 133, 117, 0.08) !important;
    border: 1.5px dashed var(--ta-primary, #5F8575) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.filepond--drop-label label:hover::after {
    background-color: rgba(95, 133, 117, 0.15) !important;
    transform: scale(1.02) !important;
}

/* Modern Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #BDCCC4;
    border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #3B5247;
}