@import '/vendor/filament/filament/resources/css/theme.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Hide Filament navigation and layout components */
nav.fi-topbar,
aside.fi-sidebar,
.fi-sidebar-close-overlay,
.fi-topbar,
header.fi-header {
    display: none !important;
}

/* Remove Filament layout padding and constraints */
.fi-layout,
.fi-body {
    padding: 0 !important;
    margin: 0 !important;
}

main.fi-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
}

.fi-main-ctn {
    padding: 0 !important;
    width: 100% !important;
}

/* Ensure proper spacing for content */
.fi-page {
    padding: 0 !important;
}

/* Ensure the wrapper container uses flexbox properly */
.fi-body {
    display: block !important;
}

/* Remove any max-width constraints on Filament containers */
.fi-container {
    max-width: 100% !important;
}

/* Force the outer wrapper to use flex layout */
.fi-body > div[x-data] {
    display: flex !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Ensure main content area takes remaining space */
.fi-body main.fi-main {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure app sidebar is visible on admin pages and content doesn't overlap */
@media (min-width: 1024px) {
    aside.lg\:translate-x-0 {
        transform: translateX(0) !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }

    /* Ensure sidebar is part of flex layout, not overlapping */
    aside.lg\:relative {
        position: relative !important;
    }

    /* Hide hamburger menu button on desktop - override any conflicting styles */
    /* Target the mobile menu toggle button specifically */
    button.mobile-menu-toggle.lg\:hidden,
    .mobile-menu-toggle.lg\:hidden,
    header button.mobile-menu-toggle {
        display: none !important;
    }
}

/* Fix login button - keep icon and text on same line */
.fi-simple-page button[type="submit"],
.fi-btn,
button[type="submit"].fi-btn,
.fi-simple-main button[type="submit"] {
    white-space: nowrap !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    min-width: max-content !important;
    width: auto !important;
}

.fi-btn-label,
.fi-simple-page button[type="submit"] span,
.fi-simple-main button[type="submit"] span {
    white-space: nowrap !important;
    display: inline !important;
}

/* Ensure icon stays inline */
.fi-btn svg,
.fi-simple-page button[type="submit"] svg,
.fi-simple-main button[type="submit"] svg {
    display: inline-block !important;
    flex-shrink: 0 !important;
    margin-right: 0.5rem !important;
}

/* Target Filament button wrapper */
.fi-btn-group,
.fi-fo-field-wrp-label {
    width: 100% !important;
}