/* ------------------------------------------------------------
   Professional Theme – custom.css (Attractive Modern Version)
   ------------------------------------------------------------ */

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

/* Global Font Override */
body, html, input, button, select, textarea, .fi-header-heading, .fi-sidebar-item-label, .fi-sidebar-group-label {
    font-family: 'Outfit', sans-serif !important;
}

/* Beautiful White Sidebar with Left Accent Line */
aside, 
.fi-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02) !important;
}

.dark aside,
.dark .fi-sidebar {
    background: #09090b !important;
    border-right: 1px solid #1f1f23 !important;
    box-shadow: none !important;
}

/* Sidebar Branding Header */
.fi-sidebar-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f8fafc !important;
    padding: 16px !important;
}
.dark .fi-sidebar-header {
    background: #09090b !important;
    border-bottom: 1px solid #18181b !important;
}

/* Text and Icon styling for Sidebar Items */
.fi-sidebar-item-icon,
.fi-sidebar-group-icon,
.fi-sidebar-group-label,
.fi-sidebar-item-label {
    color: #64748b !important; /* Slate 500 */
    transition: color 0.2s ease !important;
}
.fi-sidebar-group-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.dark .fi-sidebar-item-icon,
.dark .fi-sidebar-group-icon,
.dark .fi-sidebar-group-label,
.dark .fi-sidebar-item-label {
    color: #94a3b8 !important;
}

/* Hover Sidebar Item state */
.fi-sidebar-item {
    transition: all 0.2s ease-in-out !important;
}
.fi-sidebar-item:hover {
    background-color: #f8fafc !important; /* Slate 50 */
    border-radius: 8px !important;
}
.dark .fi-sidebar-item:hover {
    background-color: #18181b !important;
}

.fi-sidebar-item:hover .fi-sidebar-item-icon,
.fi-sidebar-item:hover .fi-sidebar-item-label {
    color: #4f46e5 !important; /* Indigo 600 */
}
.dark .fi-sidebar-item:hover .fi-sidebar-item-icon,
.dark .fi-sidebar-item:hover .fi-sidebar-item-label {
    color: #818cf8 !important; /* Indigo 400 */
}

/* Active Sidebar Item state (Premium look) */
.fi-sidebar-item.fi-active {
    background: rgba(99, 102, 241, 0.07) !important; /* Soft Indigo Tint */
    border-radius: 8px !important;
    border-left: 3px solid #6366f1 !important; /* Indicator line */
}
.dark .fi-sidebar-item.fi-active {
    background: rgba(99, 102, 241, 0.12) !important;
    border-left: 3px solid #818cf8 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #4f46e5 !important; /* Indigo 600 */
    font-weight: 600 !important;
}
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #818cf8 !important;
}

/* Compact padding config */
.fi-sidebar-nav {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.fi-sidebar-item {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}
.fi-sidebar-item-button {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.fi-sidebar-group {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.fi-sidebar-nav > ul {
    gap: 0px !important;
}
.fi-sidebar-group-list {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* Topbar Premium style */
.fi-topbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    height: 50px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
}
.dark .fi-topbar {
    background-color: #09090b !important;
    border-bottom: 1px solid #1f1f23 !important;
}

/* Rounded Cards & Sections */
.fi-section {
    border-radius: 12px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03) !important;
}
.dark .fi-section {
    border-color: #1f1f23 !important;
    box-shadow: none !important;
}

/* Buttons style */
.fi-btn, .fi-btn-primary, button {
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.fi-btn:hover, .fi-btn-primary:hover, button:hover {
    transform: translateY(-1px) !important;
}

/* Compact Table Layout - Ultra Low Padding */
.fi-ta-header-cell {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    background-color: #f8fafc !important; /* Soft table header background */
}
.dark .fi-ta-header-cell {
    background-color: #09090b !important;
}

.fi-ta-cell {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.fi-ta-cell > div {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
table tbody td,
table thead th {
    border: 1px solid #f1f5f9 !important;
}
.dark table tbody td,
.dark table thead th {
    border: 1px solid #1f1f23 !important;
}
table tbody td .py-4,
table tbody td .py-3 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.fi-ta-record-checkbox-column {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 8px !important;
}

/* Form Layout */
.fi-fo-field-wrp {
    margin-bottom: 8px !important;
}
.fi-fo-layout {
    gap: 10px !important;
}
.fi-fo-grid {
    gap: 10px !important;
}
.fi-section-content {
    padding: 12px !important;
}
.fi-section-header {
    padding: 10px 12px !important;
}

.fi-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.fi-main {
    max-width: 100% !important;
}

.fi-in-entry-wrp-label span {
    font-size: 13px !important;
    text-transform: uppercase !important;
    color: #475569;
}

.fi-in-entry-wrp div {
    row-gap: 1px;
}

.custom-auth-empty-panel {
    width: 100% !important;
}

.fi-header-heading {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: #0f172a;
}
.dark .fi-header-heading {
    color: #ffffff;
}

.fi-badge {
    text-transform: capitalize;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

.center-align {
    justify-content: center !important;
}

.text-right-input input {
    text-align: right !important;
}

.gap-6 {
    gap: 1rem !important;
}

.fi-tabs .fi-active {
    background: #e2e8f0;
}

.text-sm {
    font-size: 14px !important;
}

.fi-ta-header-cell-label {
    font-weight: 600 !important;
}

.font-medium {
    font-weight: 400 !important;
}

.fi-btn-label {
    font-weight: 400 !important;
}

.ssss::after {
    content: "";
    background: #ddd;
    width: 2px;
    height: 100%;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.fi-modal-footer-actions {
    justify-content: center;
    margin-top: 30px;
}

.font-semibold {
    font-weight: 400 !important;
}

#imgTooltip {
    position: fixed;
    display: none;
    max-width: 200px;
    max-height: 150px;
    border: 1px solid #ccc;
    background: #fff;
    padding: 4px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    pointer-events: none;
}