/**
 * Franchise panel — critical layout utilities when Tailwind CDN is blocked or slow (mobile Safari).
 * Scoped to body.fr-portal only; does not affect marketing site.
 */

/* Body is the app shell grid — never flex the page into ribbon | sidebar | main columns. */
body.fr-portal,
body.fr-portal.flex {
    display: grid !important;
}

body.fr-portal .flex {
    display: flex !important;
}

body.fr-portal .flex-1 {
    flex: 1 1 0% !important;
}

body.fr-portal .flex-col {
    flex-direction: column !important;
}

body.fr-portal .shrink-0 {
    flex-shrink: 0 !important;
}

body.fr-portal .min-h-screen {
    min-height: 100dvh !important;
}

body.fr-portal .min-w-0 {
    min-width: 0 !important;
}

body.fr-portal .bg-surface {
    background-color: #f4f6fb !important;
}

body.fr-portal .font-sans {
    font-family: Inter, "Noto Sans Telugu", system-ui, sans-serif !important;
}

/* Do not force #sidebar fixed via utility — desktop shell owns position */
body.fr-portal .fixed:not(#sidebar):not(.fr-sidebar) {
    position: fixed !important;
}

body.fr-portal .inset-0 {
    inset: 0 !important;
}

body.fr-portal .inset-y-0 {
    top: 0 !important;
    bottom: 0 !important;
}

body.fr-portal .left-0 {
    left: 0 !important;
}

body.fr-portal .bottom-5 {
    bottom: 1.25rem !important;
}

body.fr-portal .left-5 {
    left: 1.25rem !important;
}

body.fr-portal .z-40 {
    z-index: 40 !important;
}

body.fr-portal .z-\[35\] {
    z-index: 35 !important;
}

body.fr-portal .z-\[45\] {
    z-index: 45 !important;
}

body.fr-portal .hidden {
    display: none !important;
}

body.fr-portal .items-center {
    align-items: center !important;
}

body.fr-portal .justify-center {
    justify-content: center !important;
}

body.fr-portal .justify-between {
    justify-content: space-between !important;
}

body.fr-portal .gap-2 {
    gap: 0.5rem !important;
}

body.fr-portal .h-9 {
    height: 2.25rem !important;
}

body.fr-portal .w-9 {
    width: 2.25rem !important;
}

body.fr-portal .h-14 {
    height: 3.5rem !important;
}

body.fr-portal .w-14 {
    width: 3.5rem !important;
}

body.fr-portal .rounded-full {
    border-radius: 9999px !important;
}

body.fr-portal .rounded-lg {
    border-radius: 0.5rem !important;
}

body.fr-portal .overflow-y-auto {
    overflow-y: auto !important;
}

body.fr-portal > main,
body.fr-portal > #page-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    body.fr-portal .md\:hidden:not(.hidden) {
        display: block !important;
    }

    body.fr-portal #fr-sidebar-mobile-fab.md\:hidden {
        display: flex !important;
    }

    body.fr-portal .erp-sidebar-backdrop.hidden {
        display: none !important;
    }

    body.fr-portal #fr-sidebar-mobile-fab.erp-sidebar-fab {
        display: flex !important;
    }
}

/* Sidebar drawer: same 1024px breakpoint as the shell grid and erp-mobile-menu.js */
@media (max-width: 1023px) {
    body.fr-portal #sidebar.fr-sidebar:not(.is-open):not(.erp-sidebar-is-open) {
        transform: translateX(-100%) !important;
    }

    body.fr-portal #sidebar.fr-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 40 !important;
        width: min(var(--erp-sidebar-w, 17.75rem), 92vw) !important;
        max-width: 92vw !important;
    }
}

@media (min-width: 768px) {
    body.fr-portal .md\:hidden {
        display: none !important;
    }

    body.fr-portal .md\:static {
        position: static !important;
    }

    body.fr-portal .md\:translate-x-0:not(#sidebar) {
        transform: none !important;
    }
}

@media (min-width: 1024px) {
    body.fr-portal #sidebar.fr-sidebar.fixed,
    body.fr-portal #sidebar.fr-sidebar.lg\:static {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
    }

    body.fr-portal #sidebar.fr-sidebar {
        transform: none !important;
    }
}

/* lg: utilities — required when .hidden uses !important (staff directory, payroll, etc.) */
@media (min-width: 1024px) {
    body.fr-portal .lg\:block {
        display: block !important;
    }

    body.fr-portal .lg\:flex {
        display: flex !important;
    }

    body.fr-portal .lg\:hidden {
        display: none !important;
    }
}