/*
 * Falcon360 mobile compact UI pass.
 * Loaded last from includes/header.php so mobile-only overrides win without changing desktop layout.
 */

.topbar__menu-icon {
    display: none;
}
.sidebar__mobile-portals { display: none; }

@media (max-width: 980px) {
    body.app-body .topbar {
        padding: 0.45rem 0.65rem 0;
    }

    body.app-body .topbar__inner {
        min-height: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.55rem;
        padding: 0.45rem 0.55rem;
        border-radius: 14px;
    }

    body.app-body .topbar__left {
        flex: 1 1 auto;
        gap: 0.5rem;
        min-width: 0;
    }

    body.app-body .topbar__left > div {
        min-width: 0;
    }

    body.app-body .topbar__menu.falcon360-mobile-menu-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 4px;
        border-radius: 12px;
        border: 1px solid currentColor;
        background: transparent;
        box-shadow: none;
    }

    body.app-body .topbar__menu.falcon360-mobile-menu-trigger span {
        display: none;
    }

    body.app-body .topbar__menu-icon {
        display: block;
        width: 26px;
        height: 26px;
    }

    .sidebar__mobile-portals { display: block; margin-bottom: .75rem; }
    body.is-sidebar-open { overflow: hidden; }
    body.app-body .sidebar { height: 100dvh; max-height: 100dvh; overscroll-behavior: contain; }
    body.app-body .sidebar__nav { min-height: 0; padding: .35rem; overflow-y: auto; overscroll-behavior: contain; }
    body.is-sidebar-open :is(.f360-assistant-launcher, .f360-assistant) { visibility: hidden; }
    body.app-body .sidebar__close { flex: 0 0 44px; width: 44px; height: 44px; }
    body.app-body .sidebar__close span { top: 21px; left: 14px; width: 16px; }

    body.app-body .topbar__eyebrow,
    body.app-body .topbar__subtitle {
        display: none;
    }

    body.app-body .topbar__title {
        max-width: 100%;
        overflow: hidden;
        color: #f8fafc;
        font-size: 1rem;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.app-body .topbar__right {
        flex: 0 0 auto;
        width: auto;
        gap: 0.4rem;
        justify-content: flex-end;
    }

    body.app-body .topbar__actions,
    body.app-body .topbar__user {
        display: none;
    }

    body.app-body .topbar__right > .button {
        min-height: 32px;
        padding: 0.34rem 0.55rem;
        border-radius: 9px;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.15;
    }

    body.app-body .page-content {
        padding-top: 0.55rem;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: min(82vw, 280px);
        max-width: 280px;
        padding: 0.45rem;
        gap: 0.35rem;
    }

    .sidebar__brand {
        gap: 0.35rem;
        min-height: 0;
        padding: 0.35rem 0.4rem;
        border-radius: 10px;
    }

    .sidebar__brand-link {
        gap: 0.42rem;
    }

    .sidebar__logo {
        width: 30px;
        height: 30px;
    }

    .sidebar__title {
        font-size: 0.86rem;
        line-height: 1.1;
    }

    .sidebar__subtitle {
        display: none;
    }

    .sidebar__close {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .sidebar__close span {
        top: 15px;
        left: 8px;
        width: 14px;
    }

    .sidebar__nav {
        padding-right: 0.1rem;
    }

    .sidebar__group + .sidebar__group {
        margin-top: 4px;
    }

    .sidebar__label,
    .sidebar-section,
    .sidebar__group-toggle {
        min-height: auto;
        margin-bottom: 2px;
        padding: 0.12rem 0.35rem;
        font-size: 9.5px;
        font-weight: 400;
        line-height: 1.1;
    }

    .sidebar__link,
    .sidebar a.sidebar__link,
    .sidebar button.sidebar__link {
        gap: 0.35rem;
        min-height: 32px;
        padding: 5px 7px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.15;
    }

    .sidebar__link + .sidebar__link {
        margin-top: 2px;
    }

    .sidebar__icon {
        width: 21px;
        height: 21px;
        border-radius: 6px;
        font-size: 8px;
        font-weight: 400;
    }

    .sidebar__children {
        gap: 2px;
        margin: 0.05rem 0 0.16rem 0.42rem;
    }

    .sidebar__link--child {
        min-height: 28px;
        padding: 4px 6px 4px 8px;
        font-size: 11.5px;
    }

    .sidebar__link--child .sidebar__icon {
        width: 18px;
        height: 18px;
        font-size: 7px;
    }

    .sidebar__badge {
        padding: 0.06rem 0.28rem;
        font-size: 0.58rem;
        font-weight: 400;
    }
}

@media (max-width: 768px) {
    body.falcon360-portal-body,
    body.portal-hr,
    body.portal-registrar,
    body.portal-accounting,
    body.portal-admin-compliance,
    body.portal-body {
        font-size: 14px;
    }

    body.portal-hr .falcon360-portal,
    body.portal-registrar .falcon360-portal,
    body.portal-accounting .falcon360-portal,
    body.portal-admin-compliance .falcon360-portal {
        gap: 0.7rem;
    }

    body.portal-hr .falcon360-portal-hero,
    body.portal-registrar .falcon360-portal-hero,
    body.portal-accounting .falcon360-portal-hero,
    body.portal-admin-compliance .falcon360-portal-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.45rem;
        padding: 0.72rem 0.8rem;
        border-radius: 8px;
    }

    body.portal-hr .falcon360-portal-kicker,
    body.portal-registrar .falcon360-portal-kicker,
    body.portal-accounting .falcon360-portal-kicker,
    body.portal-admin-compliance .falcon360-portal-kicker,
    body.portal-registrar .registrar-breadcrumb {
        display: none;
    }

    body.portal-hr .falcon360-portal-hero h2,
    body.portal-registrar .falcon360-portal-hero h2,
    body.portal-accounting .falcon360-portal-hero h2,
    body.portal-admin-compliance .falcon360-portal-hero h2 {
        font-size: 1.12rem;
        line-height: 1.15;
    }

    body.portal-hr .falcon360-portal-hero p,
    body.portal-registrar .falcon360-portal-hero p,
    body.portal-accounting .falcon360-portal-hero p,
    body.portal-admin-compliance .falcon360-portal-hero p {
        margin-top: 0.25rem;
        font-size: 0.82rem;
        line-height: 1.35;
    }

    body.portal-hr .falcon360-user-chip,
    body.portal-registrar .falcon360-user-chip,
    body.portal-accounting .falcon360-user-chip,
    body.portal-admin-compliance .falcon360-user-chip {
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 0.42rem 0.55rem;
    }

    body.portal-hr .falcon360-user-chip span,
    body.portal-registrar .falcon360-user-chip span,
    body.portal-accounting .falcon360-user-chip span,
    body.portal-admin-compliance .falcon360-user-chip span {
        font-size: 0.68rem;
    }

    body.portal-hr .falcon360-actions,
    body.portal-registrar .falcon360-actions,
    body.portal-accounting .falcon360-actions,
    body.portal-admin-compliance .falcon360-actions {
        flex-direction: row;
        gap: 0.4rem;
    }

    body.portal-hr .falcon360-action,
    body.portal-registrar .falcon360-action,
    body.portal-accounting .falcon360-action,
    body.portal-admin-compliance .falcon360-action,
    body.portal-body .portal-action,
    body.portal-body .portal-action-primary,
    body.portal-body .portal-nav__link,
    body.portal-body .button,
    body.portal-body .hr-quick-card,
    body.portal-body .table-actions .button {
        width: auto;
        min-height: 32px;
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.2;
        box-shadow: none;
    }

    body.portal-hr .falcon360-panel,
    body.portal-hr .falcon360-stat-card,
    body.portal-hr .falcon360-module-card,
    body.portal-registrar .falcon360-panel,
    body.portal-registrar .falcon360-stat-card,
    body.portal-registrar .falcon360-module-card,
    body.portal-accounting .falcon360-panel,
    body.portal-accounting .falcon360-stat-card,
    body.portal-accounting .falcon360-module-card,
    body.portal-admin-compliance .falcon360-panel,
    body.portal-admin-compliance .falcon360-stat-card,
    body.portal-admin-compliance .falcon360-module-card {
        padding: 0.72rem;
        border-radius: 8px;
    }

    body.portal-hr .falcon360-grid,
    body.portal-hr .falcon360-module-grid,
    body.portal-registrar .falcon360-grid,
    body.portal-registrar .falcon360-module-grid,
    body.portal-accounting .falcon360-grid,
    body.portal-accounting .falcon360-module-grid,
    body.portal-admin-compliance .falcon360-grid,
    body.portal-admin-compliance .falcon360-module-grid {
        gap: 0.55rem;
        grid-template-columns: minmax(0, 1fr);
    }

    body.portal-hr .falcon360-stat-card span,
    body.portal-hr .falcon360-module-card span,
    body.portal-hr .falcon360-panel__label,
    body.portal-registrar .falcon360-stat-card span,
    body.portal-registrar .falcon360-module-card span,
    body.portal-registrar .falcon360-panel__label,
    body.portal-accounting .falcon360-stat-card span,
    body.portal-accounting .falcon360-module-card span,
    body.portal-accounting .falcon360-panel__label,
    body.portal-admin-compliance .falcon360-stat-card span,
    body.portal-admin-compliance .falcon360-module-card span,
    body.portal-admin-compliance .falcon360-panel__label {
        font-size: 0.68rem;
        font-weight: 600;
    }

    body.portal-hr .falcon360-stat-card strong,
    body.portal-registrar .falcon360-stat-card strong,
    body.portal-accounting .falcon360-stat-card strong,
    body.portal-admin-compliance .falcon360-stat-card strong {
        font-size: 1.35rem;
    }

    body.portal-hr .falcon360-panel h3,
    body.portal-hr .falcon360-module-card h3,
    body.portal-registrar .falcon360-panel h3,
    body.portal-registrar .falcon360-module-card h3,
    body.portal-accounting .falcon360-panel h3,
    body.portal-accounting .falcon360-module-card h3,
    body.portal-admin-compliance .falcon360-panel h3,
    body.portal-admin-compliance .falcon360-module-card h3 {
        font-size: 0.98rem;
        line-height: 1.2;
    }

    body.portal-hr .falcon360-panel p,
    body.portal-hr .falcon360-stat-card p,
    body.portal-hr .falcon360-module-card p,
    body.portal-registrar .falcon360-panel p,
    body.portal-registrar .falcon360-stat-card p,
    body.portal-registrar .falcon360-module-card p,
    body.portal-accounting .falcon360-panel p,
    body.portal-accounting .falcon360-stat-card p,
    body.portal-accounting .falcon360-module-card p,
    body.portal-admin-compliance .falcon360-panel p,
    body.portal-admin-compliance .falcon360-stat-card p,
    body.portal-admin-compliance .falcon360-module-card p {
        font-size: 0.82rem;
        line-height: 1.4;
    }
}

@media (max-width: 640px) {
    body.portal-body .portal-page {
        padding: 0.65rem;
    }

    body.portal-body .portal-shell {
        gap: 0.65rem;
    }

    body.portal-body .portal-topbar,
    body.portal-body .portal-hero,
    body.portal-body .portal-dashboard-card,
    body.portal-body .portal-stat-card,
    body.portal-body .portal-panel,
    body.portal-body .portal-profile-card,
    body.portal-body .portal-report-card,
    body.portal-body .card,
    body.portal-body .section-card {
        padding: 0.8rem;
        border-radius: 14px;
    }

    body.portal-body .portal-hero h1,
    body.portal-body .section-heading h3 {
        font-size: 1.08rem;
        line-height: 1.2;
    }

    body.portal-body .portal-hero__eyebrow,
    body.portal-body .portal-hero__meta {
        display: none;
    }

    body.portal-body .portal-hero p,
    body.portal-body .section-heading p,
    body.portal-body .hr-dir-meta,
    body.portal-body .hr-201-kv,
    body.portal-body .hr-quick-card p {
        font-size: 0.82rem !important;
        line-height: 1.4;
    }

    body.portal-body .portal-nav,
    body.portal-body .table-actions,
    body.portal-body .hr-quick-grid {
        gap: 0.45rem;
    }
}