/* Custom Brand Styling for TB Anugrah Jaya */

/* ===== RED SIDEBAR THEME ===== */

/* Red gradient background on the sidebar BODY only (header stays white to match topbar) */
.fi-sidebar {
    background-color: #b91c1c !important; /* fallback Red-700 */
    background-image: linear-gradient(to bottom, #ef4444 0%, #b91c1c 55%, #7f1d1d 100%) !important; /* Red-500 -> Red-700 -> Red-900 */
    background-attachment: local !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Sidebar header: keep it white like the rest of the top header/topbar */
.fi-sidebar-header {
    background-color: #ffffff !important;
    background-image: none !important;
}

.dark .fi-sidebar-header {
    background-color: rgb(17 24 39) !important; /* gray-900 to match dark topbar */
}

/* Brand name styling in sidebar header (red on white) */
.fi-sidebar-header .fi-logo {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    color: #b91c1c !important; /* Red-700 */
}

/* Brand text span (logo label) in the white header */
.fi-sidebar-header .fi-logo span,
.fi-sidebar-header span {
    color: #1f2937 !important; /* gray-800, readable on white */
}

.dark .fi-sidebar-header .fi-logo span,
.dark .fi-sidebar-header span {
    color: #ffffff !important;
}

/* Sidebar group headings (e.g. CAMPAIGNS, MAIL) -> light */
.fi-sidebar-group-label,
.fi-sidebar-group-icon,
.fi-sidebar-group-collapse-button {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Inactive sidebar items: light text + icon */
.fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Hover state for sidebar items */
.fi-sidebar-item > .fi-sidebar-item-button:hover,
.fi-sidebar-item > .fi-sidebar-item-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Active sidebar item: lighter translucent highlight + bright white text/icon */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: rgba(255, 255, 255, 0.22) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button:hover,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

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

/* Sidebar item connector dots (sub-grouped) -> light on red */
.fi-sidebar-item-grouped-border > div {
    background-color: rgba(255, 255, 255, 0.4) !important;
}

/* ===== TOPBAR / LOGIN BRAND (NOT on red bg) ===== */

/* Topbar brand text -> red accent (white topbar background) */
.fi-topbar .fi-logo {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.025em !important;
    color: #b91c1c !important; /* Red-700 */
}

/* Mobile font sizing */
@media (max-width: 768px) {
    .fi-sidebar-header .fi-logo,
    .fi-topbar .fi-logo {
        font-size: 1.1rem !important;
    }
}

.fi-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Login page brand styling (black text on white login bg) */
.fi-simple-layout .fi-logo {
    font-size: 2rem !important;
    font-weight: 700 !important;
    text-align: center;
    color: #111827 !important; /* gray-900 (black) */
    margin-bottom: 1rem;
}

/* Force the brand text span on the login page to black */
.fi-simple-layout .fi-logo span {
    color: #111827 !important; /* gray-900 (black) */
}

/* Login card: red accent line on the top border */
.fi-simple-main {
    border-top: 4px solid #dc2626 !important; /* Red-600 */
}

/* Dashboard stat cards: red accent line on the top border */
.fi-wi-stats-overview-stat {
    border-top: 4px solid #dc2626 !important; /* Red-600 */
}

/* ===== MAIN CONTENT AREA BACKGROUND (soft red tint matching the red sidebar) ===== */
.fi-main-ctn {
    background-color: #fef2f2 !important; /* Red-50 */
}

.dark .fi-main-ctn {
    background-color: rgb(17 24 39) !important; /* gray-900 (keep dark mode neutral) */
}

/* Topbar stays clean/white so the header band reads as one piece */
.fi-topbar > nav {
    background-color: #ffffff !important;
}

.dark .fi-topbar > nav {
    background-color: rgb(17 24 39) !important;
}

/* Transaction Print Modal - 2 buttons per row, equal size */
/* Filament's footer actions container is .fi-modal-footer-actions */
.fi-modal-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 per baris */
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100% !important;
}

/* Equal-height buttons with centered label */
.fi-modal-footer-actions > * {
    width: 100% !important;
    min-width: 0 !important;
}

.fi-modal-footer-actions button {
    width: 100% !important;
    height: 100% !important;
    min-height: 3.5rem !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Responsive layout for mobile: stack 1 per row */
@media (max-width: 640px) {
    .fi-modal-footer-actions {
        grid-template-columns: 1fr !important;
    }
}