/* ─────────────────────────────────────────────────────────────
   MOBILE FIX — Bottom nav padding
   Tambahkan link ke file ini di layouts/app.blade.php
   ATAU tambahkan konten ini langsung ke hansen-ui.css
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Padding bawah = tinggi bottom nav + breathing room
       Supaya konten terakhir tidak tertutup bottom nav */
    .hcrm-main {
        padding-bottom: calc(var(--hcrm-bottom-nav-h, 64px) + 1.5rem) !important;
        margin-top: calc(var(--hcrm-navbar-h, 64px) + 4px);
    }
}


/* ─────────────────────────────────────────────────────────────
   KPI CARD — nilai uang tidak overflow di mobile
   ─────────────────────────────────────────────────────────────
   Berlaku untuk dashboard dan clients/show stat cards
   ───────────────────────────────────────────────────────────── */

/* hcrm-stat-value: overflow-wrap global */
.hcrm-stat-value {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

@media (max-width: 575.98px) {
    /* Stat value: skala ke layar kecil */
    .hcrm-stat-value {
        font-size: clamp(.85rem, 3.8vw, 1.5rem);
        line-height: 1.2;
    }
    /* Stat card: icon tidak mengecilkan nilai */
    .hcrm-stat-card {
        align-items: flex-start !important;
    }
    .hcrm-stat-icon {
        flex-shrink: 0 !important;
        min-width: 52px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   DASHBOARD KPI — kpi-value.money global fix
   ─────────────────────────────────────────────────────────────
   .kpi-value.money di col-6 dan col-4 tidak overflow ke luar card
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .kpi-value.money {
        font-size: clamp(.72rem, 2.8vw, 1.1rem) !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        line-height: 1.25 !important;
    }

    /* Task KPI 3-kolom: icon lebih kecil, label tidak wrap */
    .kpi-card-3col .kpi-icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
        font-size: .8rem !important;
        flex-shrink: 0;
    }
    .kpi-card-3col .kpi-label {
        font-size: .6rem !important;
        letter-spacing: .02em !important;
        line-height: 1.25 !important;
        white-space: normal;
    }
    .kpi-card-3col .kpi-card {
        padding: 10px 9px !important;
    }
    .kpi-card-3col .kpi-value {
        font-size: clamp(1rem, 4.5vw, 1.4rem) !important;
        line-height: 1.2;
    }
}

@media (max-width: 390px) {
    .kpi-value.money {
        font-size: clamp(.68rem, 2.5vw, .95rem) !important;
    }
    .kpi-card-3col .kpi-label {
        font-size: .56rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   TABLE INFO KLIEN — text tidak terpotong
   ─────────────────────────────────────────────────────────────
   Berlaku untuk tabel informasi di clients/show
   ───────────────────────────────────────────────────────────── */
.table-info-klien {
    table-layout: fixed !important;
    width: 100% !important;
}
.table-info-klien th {
    width: 36% !important;
    vertical-align: top;
    padding-top: 10px !important;
}
.table-info-klien td {
    width: 64% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    overflow: hidden;
}
.table-info-klien td a {
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
}
.table-info-klien small {
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    display: block;
}

/* =============================================================
   ROOM 1 — Mobile Safety Net
   Mencegah horizontal overflow dan memastikan bottom nav tidak
   menutup konten pada iPhone/safe-area.
   ============================================================= */
@supports (height: 100dvh) {
    body { min-height: 100dvh; }
}

@media (max-width: 991.98px) {
    body,
    .hcrm-main,
    .mobile-main,
    .container,
    .container-fluid,
    .row,
    [class*="col-"] {
        max-width: 100%;
    }

    .hcrm-main,
    .mobile-main {
        overflow-x: hidden;
    }

    .table-responsive:not(.hcrm-auto-table-wrap) {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .dropdown-menu {
        max-width: calc(100vw - 1rem);
    }

    .hcrm-page-actions {
        gap: .5rem;
    }

    .hcrm-page-actions .dropdown,
    .hcrm-page-actions form {
        min-width: 0;
    }

    .modal,
    .hcrm-overlay,
    .hcrm-alpine-modal-shell {
        padding-left: max(.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(.75rem, env(safe-area-inset-right, 0px));
    }
}


/* ROOM 3 CLEANUP — order-safe mobile alignment fixes */
@media (max-width: 767.98px) {
    #projectFilters.collapse:not(.show),
    #surveyFilters.collapse:not(.show) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .project-page-actions,
    .survey-page-actions,
    .survey-show-actions,
    .survey-assignment-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .65rem !important;
    }

    .project-page-actions > *,
    .survey-page-actions > *,
    .survey-show-actions > *,
    .survey-assignment-actions > *,
    .project-page-actions form,
    .survey-page-actions form,
    .survey-show-actions form,
    .survey-assignment-actions form,
    .project-page-actions .dropdown,
    .survey-page-actions .dropdown,
    .survey-show-actions .dropdown,
    .survey-assignment-actions .dropdown {
        width: 100% !important;
        min-width: 0 !important;
    }

    .project-page-actions .btn,
    .survey-page-actions .btn,
    .survey-show-actions .btn,
    .survey-assignment-actions .btn,
    .project-page-actions .hcrm-btn,
    .survey-page-actions .hcrm-btn,
    .survey-show-actions .hcrm-btn,
    .survey-assignment-actions .hcrm-btn {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .clients-page .client-filter-details .client-mobile-filter-form {
        --bs-gutter-x: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .clients-page .client-filter-details .client-mobile-filter-form > * {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 768px) {
    #projectFilters.collapse,
    #surveyFilters.collapse {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        visibility: visible !important;
        overflow: visible !important;
    }
}


/* ROOM 3 FOLLOW-UP — mobile filter panels use Hansen UI toggle, not Bootstrap collapse */
@media (max-width: 767.98px) {
    #projectFilters.hcrm-responsive-filter-body:not(.show),
    #surveyFilters.hcrm-responsive-filter-body:not(.show) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #projectFilters.hcrm-responsive-filter-body.show,
    #surveyFilters.hcrm-responsive-filter-body.show {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .clients-page .client-detail-more-menu .dropdown-menu {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        max-width: calc(100vw - 1.25rem) !important;
        z-index: 3000 !important;
    }
}


/* ROOM 3 FINAL ALIGNMENT — mobile-specific hardening */
@media (max-width: 767.98px) {
    body .clients-page details.client-filter-details .hcrm-card-body {
        padding: 1rem !important;
    }

    body .clients-page details.client-filter-details .client-mobile-filter-form,
    body .clients-page details.client-filter-details .client-mobile-filter-form > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.hcrm-survey-mobile-shell {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.hcrm-survey-mobile-shell > .survey-mobile-polished {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ROOM 8 FINAL HARDENING — Users/Profile/Notifications small-screen guard */
@media (max-width: 430px) {
    .users-page,
    .user-form-page,
    .user-detail-page,
    .user-benchmark-page,
    .permission-audit-page,
    .permission-audit-global-page,
    .profile-page,
    .profile-activity-page,
    .notifications-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    .users-page .dropdown-menu,
    .profile-page .dropdown-menu,
    .notifications-page .dropdown-menu,
    .dashboard-notifications-widget .dropdown-menu {
        max-width: calc(100vw - 1.5rem) !important;
        white-space: normal !important;
    }

    .users-page .badge,
    .profile-page .badge,
    .profile-activity-page .badge,
    .notifications-page .badge {
        white-space: normal !important;
        text-align: left !important;
    }

    .user-form-page input,
    .user-form-page select,
    .user-form-page textarea,
    .profile-page input,
    .profile-page select,
    .profile-page textarea,
    .profile-activity-page input,
    .profile-activity-page select,
    .profile-activity-page textarea,
    .users-page input,
    .users-page select,
    .users-page textarea {
        font-size: 16px !important;
    }

    .permission-audit-global-page .hcrm-permission-matrix-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    .notifications-page .deal-log-detail-list li,
    .profile-page pre,
    .profile-activity-page pre {
        max-width: 100% !important;
    }
}

/* Room 9 — Auth/Error mobile containment */
@media (max-width: 767.98px) {
    .auth-construction-page,
    .maintenance-construction-page {
        padding: max(.85rem, env(safe-area-inset-top)) .85rem max(.85rem, env(safe-area-inset-bottom));
        align-items: flex-start;
    }

    .auth-construction-card {
        grid-template-columns: 1fr !important;
        border-radius: 22px !important;
        width: 100% !important;
    }

    .auth-construction-form-panel {
        padding: 1.15rem !important;
    }

    .auth-construction-form-content {
        width: 100% !important;
    }

    .auth-construction-mobile-brand {
        display: block !important;
    }

    .auth-construction-visual-panel {
        display: none !important;
    }

    .auth-construction-heading h1 {
        font-size: 1.55rem !important;
    }

    .auth-construction-heading p,
    .auth-construction-workflow,
    .auth-construction-alert {
        font-size: .9rem !important;
    }

    .auth-construction-link-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .auth-construction-link-row .auth-construction-link,
    .auth-construction-link-row .btn,
    .auth-construction-link-row form,
    .auth-construction-link-row button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .auth-construction-demo-body div {
        display: grid !important;
        gap: .15rem !important;
    }

    .auth-construction-demo-body span {
        text-align: left !important;
    }

    .maintenance-construction-card {
        border-radius: 22px !important;
        padding: 1.25rem !important;
        width: 100% !important;
    }

    .maintenance-construction-icon {
        width: 72px !important;
        height: 72px !important;
        border-radius: 22px !important;
        font-size: 2rem !important;
    }

    .maintenance-construction-user-card,
    .maintenance-construction-alert {
        width: 100% !important;
    }

    .maintenance-construction-user-card {
        align-items: flex-start !important;
    }

    .maintenance-construction-actions,
    .maintenance-construction-actions .btn,
    .maintenance-construction-actions form {
        width: 100% !important;
    }

    .maintenance-construction-actions .btn {
        min-height: 50px !important;
    }
}

/* =============================================================
   ROOM 9 PATCH — Mobile fit-screen Auth/Error refinement
   ============================================================= */
@media (max-width: 767.98px) {
    body.auth-construction-shell,
    body.maintenance-construction-shell {
        min-height: 100dvh !important;
        height: 100dvh !important;
        overflow: hidden !important;
        background:
            radial-gradient(circle at 14% 10%, rgba(245, 158, 11, .2), transparent 12rem),
            radial-gradient(circle at 88% 16%, rgba(59, 130, 246, .18), transparent 16rem),
            linear-gradient(135deg, #07162f 0%, #0b2249 52%, #061226 100%) !important;
    }

    body.auth-construction-shell::before,
    body.maintenance-construction-shell::before {
        background-size: 34px 34px, 34px 34px, 330px 330px !important;
        background-position: center, center, right -135px bottom -92px !important;
        opacity: .82 !important;
    }

    body.auth-construction-shell::after,
    body.maintenance-construction-shell::after {
        width: 210px !important;
        height: 210px !important;
        left: -82px !important;
        bottom: -72px !important;
        opacity: .58 !important;
    }

    .hcrm-auth-shell .hcrm-auth-main,
    .auth-construction-page,
    .maintenance-construction-page {
        min-height: 100dvh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .auth-construction-page,
    .maintenance-construction-page {
        padding: max(.52rem, env(safe-area-inset-top)) .58rem max(.52rem, env(safe-area-inset-bottom)) !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .auth-construction-card {
        height: calc(100dvh - max(1.04rem, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
        max-height: calc(100dvh - max(1.04rem, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.97) !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.36) !important;
    }

    .auth-construction-form-panel {
        height: 100% !important;
        padding: .78rem .82rem !important;
        justify-content: center !important;
    }

    .auth-construction-form-content {
        height: auto !important;
        max-height: 100% !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .auth-construction-mobile-brand {
        display: block !important;
        margin-bottom: .48rem !important;
    }

    .auth-construction-mobile-brand .auth-construction-logo {
        max-width: 112px !important;
        max-height: 36px !important;
        margin-bottom: .18rem !important;
    }

    .auth-construction-mobile-brand .auth-construction-kicker {
        font-size: .6rem !important;
        margin-bottom: 0 !important;
    }

    .auth-construction-heading {
        margin-bottom: .55rem !important;
        text-align: center !important;
    }

    .auth-construction-heading .auth-construction-kicker {
        display: none !important;
    }

    .auth-construction-heading h1 {
        font-size: clamp(1.12rem, 6vw, 1.38rem) !important;
        margin-bottom: .22rem !important;
        line-height: 1.08 !important;
    }

    .auth-construction-heading p {
        -webkit-line-clamp: 2 !important;
        font-size: .76rem !important;
        line-height: 1.28 !important;
        max-width: 30rem;
        margin-left: auto;
        margin-right: auto;
    }

    .auth-construction-alert {
        padding: .5rem .58rem !important;
        margin-bottom: .48rem !important;
        border-radius: 11px !important;
        font-size: .74rem !important;
        line-height: 1.26 !important;
        gap: .45rem !important;
    }

    .auth-construction-alert i {
        font-size: .9rem !important;
    }

    .auth-construction-workflow {
        padding: .5rem .58rem !important;
        margin-bottom: .55rem !important;
        border-radius: 12px !important;
        font-size: .72rem !important;
        line-height: 1.25 !important;
    }

    .auth-construction-workflow strong {
        margin-bottom: .1rem !important;
    }

    .auth-construction-workflow div {
        -webkit-line-clamp: 2 !important;
    }

    .auth-construction-form .mb-3 {
        margin-bottom: .5rem !important;
    }

    .auth-construction-form .mb-4,
    .form-check.mb-4,
    .auth-construction-workflow.mb-4,
    .auth-construction-alert.mb-4 {
        margin-bottom: .55rem !important;
    }

    .auth-construction-form .form-label,
    .auth-construction-form .hcrm-label,
    .form-check-label,
    .auth-construction-link,
    .auth-construction-form .form-text,
    .auth-construction-form .invalid-feedback {
        font-size: .74rem !important;
    }

    .auth-construction-form .form-label,
    .auth-construction-form .hcrm-label {
        margin-bottom: .18rem !important;
    }

    .auth-construction-form .form-control,
    .auth-construction-form .hcrm-input {
        min-height: 38px !important;
        border-radius: 11px !important;
        padding: .48rem .65rem !important;
        font-size: .84rem !important;
    }

    .auth-construction-password-group .btn {
        min-width: 38px !important;
        border-radius: 0 11px 11px 0 !important;
        padding: .45rem .55rem !important;
    }

    .auth-construction-submit,
    .auth-construction-form .auth-construction-submit,
    .auth-construction-form .btn-primary,
    .auth-construction-secondary {
        min-height: 39px !important;
        border-radius: 11px !important;
        padding: .48rem .65rem !important;
        font-size: .82rem !important;
    }

    .auth-construction-link-row {
        gap: .42rem !important;
    }

    .auth-construction-link-row.mt-4,
    .text-center.mt-4,
    .auth-construction-demo {
        margin-top: .55rem !important;
    }

    .auth-construction-demo {
        border-radius: 11px !important;
    }

    .auth-construction-demo summary {
        padding: .42rem .55rem !important;
        font-size: .68rem !important;
    }

    .auth-construction-demo-body {
        padding: .42rem .55rem !important;
        font-size: .65rem !important;
    }

    .auth-construction-demo-body div {
        padding: .18rem 0 !important;
    }

    .maintenance-construction-card {
        min-height: auto !important;
        height: calc(100dvh - max(1.04rem, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
        max-height: calc(100dvh - max(1.04rem, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
        padding: .82rem !important;
        border-radius: 18px !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .maintenance-construction-stripe {
        height: 6px !important;
    }

    .maintenance-construction-icon {
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
        margin: .12rem auto .48rem !important;
        font-size: 1.5rem !important;
    }

    .maintenance-construction-brand {
        margin-bottom: .38rem !important;
        gap: .12rem !important;
    }

    .maintenance-construction-brand img {
        max-width: 104px !important;
        max-height: 34px !important;
    }

    .maintenance-construction-brand span,
    .maintenance-construction-kicker {
        font-size: .58rem !important;
        letter-spacing: .06em !important;
        margin-bottom: .24rem !important;
    }

    .maintenance-construction-card h1 {
        font-size: clamp(1.1rem, 6vw, 1.38rem) !important;
        margin-bottom: .28rem !important;
        line-height: 1.08 !important;
    }

    .maintenance-construction-lead {
        -webkit-line-clamp: 2 !important;
        font-size: .75rem !important;
        line-height: 1.28 !important;
        margin-bottom: .48rem !important;
    }

    .maintenance-construction-user-card {
        padding: .52rem .58rem !important;
        margin: .45rem auto !important;
        border-radius: 12px !important;
        gap: .55rem !important;
    }

    .maintenance-construction-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 11px !important;
        font-size: 1rem !important;
    }

    .maintenance-construction-user-card strong {
        font-size: .8rem !important;
        line-height: 1.15 !important;
    }

    .maintenance-construction-user-card small,
    .maintenance-construction-label {
        font-size: .66rem !important;
        line-height: 1.18 !important;
    }

    .maintenance-construction-alert {
        padding: .52rem .58rem !important;
        margin: .45rem auto !important;
        border-radius: 12px !important;
        gap: .45rem !important;
        font-size: .72rem !important;
        line-height: 1.25 !important;
    }

    .maintenance-construction-alert i {
        font-size: .9rem !important;
    }

    .maintenance-construction-actions {
        margin-top: .48rem !important;
        gap: .42rem !important;
    }

    .maintenance-construction-btn-primary,
    .maintenance-construction-actions .btn {
        min-height: 39px !important;
        border-radius: 11px !important;
        padding: .48rem .65rem !important;
        font-size: .82rem !important;
    }

    .maintenance-construction-contact {
        font-size: .68rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .maintenance-construction-footer {
        margin-top: .52rem !important;
        gap: .28rem !important;
        font-size: .62rem !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 380px) {
    .auth-construction-mobile-brand .auth-construction-logo,
    .maintenance-construction-brand img {
        display: none !important;
    }

    .auth-construction-heading p,
    .auth-construction-workflow div,
    .maintenance-construction-lead {
        -webkit-line-clamp: 1 !important;
    }
}

/* =============================================================
   ROOM 9 PATCH V2 — Auth/Error centered fit-screen refinement
   Fix PC right-shift + mobile white-card dominance
   Scope: auth/error construction pages only
   ============================================================= */
body.auth-construction-shell,
body.maintenance-construction-shell,
body.hcrm-guest-shell.auth-construction-shell,
body.hcrm-auth-shell.auth-construction-shell {
    min-height: 100dvh !important;
    height: 100dvh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(245, 158, 11, .22), transparent 17rem),
        radial-gradient(circle at 88% 18%, rgba(59, 130, 246, .2), transparent 23rem),
        linear-gradient(135deg, #061226 0%, #0a1e41 52%, #07162f 100%) !important;
}

body.hcrm-guest-shell.auth-construction-shell > *,
body.hcrm-auth-shell.auth-construction-shell .hcrm-auth-main,
.auth-construction-page,
.maintenance-construction-page {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.auth-construction-page,
.maintenance-construction-page {
    display: grid !important;
    place-items: center !important;
    padding: clamp(.75rem, 2vw, 1.25rem) !important;
}

.auth-construction-card,
.maintenance-construction-card {
    margin: 0 auto !important;
    justify-self: center !important;
    align-self: center !important;
    max-width: calc(100vw - clamp(1.5rem, 4vw, 2.5rem)) !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    .auth-construction-card {
        width: min(980px, calc(100vw - 2.5rem)) !important;
        height: auto !important;
        min-height: min(600px, calc(100dvh - 2.5rem)) !important;
        max-height: calc(100dvh - 2.5rem) !important;
        grid-template-columns: minmax(0, 1.08fr) minmax(260px, .78fr) !important;
        border-radius: 24px !important;
        transform: none !important;
    }

    .auth-construction-form-panel,
    .auth-construction-visual-panel {
        min-height: min(600px, calc(100dvh - 2.5rem)) !important;
        height: auto !important;
    }

    .auth-construction-form-panel {
        padding: clamp(1.05rem, 2vw, 1.45rem) !important;
        justify-content: center !important;
    }

    .auth-construction-form-content {
        width: min(100%, 430px) !important;
        max-height: calc(100dvh - 4.25rem) !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .auth-construction-visual-panel {
        padding: clamp(1rem, 2vw, 1.35rem) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .auth-construction-brand-card {
        width: min(100%, 335px) !important;
        max-height: calc(100dvh - 6rem) !important;
        overflow: hidden !important;
    }

    .auth-construction-heading {
        text-align: left !important;
        margin-bottom: .8rem !important;
    }

    .auth-construction-heading h1,
    .auth-construction-brand-card h2 {
        font-size: clamp(1.25rem, 2.2vw, 1.68rem) !important;
        line-height: 1.13 !important;
    }

    .auth-construction-heading p,
    .auth-construction-brand-card p {
        font-size: .86rem !important;
        line-height: 1.38 !important;
        -webkit-line-clamp: 2 !important;
    }

    .auth-construction-workflow,
    .auth-construction-alert {
        padding: .62rem .72rem !important;
        border-radius: 13px !important;
        font-size: .8rem !important;
        line-height: 1.34 !important;
    }

    .auth-construction-form .mb-3 {
        margin-bottom: .62rem !important;
    }

    .auth-construction-form .mb-4,
    .auth-construction-workflow.mb-4,
    .auth-construction-alert.mb-4,
    .form-check.mb-4 {
        margin-bottom: .7rem !important;
    }

    .auth-construction-form .form-control,
    .auth-construction-form .hcrm-input,
    .auth-construction-submit,
    .auth-construction-form .auth-construction-submit,
    .auth-construction-form .btn-primary,
    .auth-construction-secondary {
        min-height: 40px !important;
    }

    .auth-construction-feature-list {
        gap: .48rem !important;
    }

    .auth-construction-feature-list div {
        padding: .52rem .58rem !important;
        font-size: .78rem !important;
    }

    .maintenance-construction-card {
        width: min(660px, calc(100vw - 2.5rem)) !important;
        min-height: auto !important;
        height: auto !important;
        max-height: calc(100dvh - 2.5rem) !important;
        padding: clamp(.95rem, 2vw, 1.45rem) !important;
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    .maintenance-construction-icon {
        width: 58px !important;
        height: 58px !important;
        margin: .12rem auto .55rem !important;
        font-size: 1.7rem !important;
    }

    .maintenance-construction-brand {
        margin-bottom: .42rem !important;
    }

    .maintenance-construction-brand img {
        max-width: 120px !important;
        max-height: 40px !important;
    }

    .maintenance-construction-card h1 {
        font-size: clamp(1.28rem, 3vw, 1.85rem) !important;
        margin-bottom: .35rem !important;
    }

    .maintenance-construction-lead {
        font-size: .82rem !important;
        line-height: 1.36 !important;
        margin-bottom: .55rem !important;
        -webkit-line-clamp: 2 !important;
    }

    .maintenance-construction-user-card,
    .maintenance-construction-alert {
        margin: .52rem auto !important;
        padding: .62rem .72rem !important;
        border-radius: 14px !important;
        font-size: .8rem !important;
        line-height: 1.34 !important;
    }

    .maintenance-construction-actions {
        margin-top: .58rem !important;
    }
}

@media (max-width: 767.98px) {
    body.auth-construction-shell,
    body.maintenance-construction-shell,
    body.hcrm-guest-shell.auth-construction-shell,
    body.hcrm-auth-shell.auth-construction-shell {
        min-height: 100dvh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .auth-construction-page,
    .maintenance-construction-page {
        padding: max(.8rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left)) !important;
        align-items: center !important;
        justify-items: center !important;
    }

    .auth-construction-card {
        width: min(92vw, 390px) !important;
        height: auto !important;
        min-height: auto !important;
        max-height: calc(100dvh - 1.6rem) !important;
        display: block !important;
        border-radius: 22px !important;
        background: rgba(255,255,255,.94) !important;
        box-shadow: 0 18px 46px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.12) !important;
        overflow: hidden !important;
    }

    .auth-construction-form-panel {
        height: auto !important;
        min-height: auto !important;
        padding: clamp(.95rem, 4vw, 1.25rem) !important;
        justify-content: center !important;
    }

    .auth-construction-form-content {
        height: auto !important;
        max-height: calc(100dvh - 3.7rem) !important;
        overflow: hidden !important;
        display: block !important;
    }

    .auth-construction-visual-panel {
        display: none !important;
    }

    .auth-construction-mobile-brand {
        display: block !important;
        margin-bottom: .62rem !important;
    }

    .auth-construction-mobile-brand .auth-construction-logo {
        max-width: 128px !important;
        max-height: 42px !important;
        margin-bottom: .22rem !important;
    }

    .auth-construction-mobile-brand .auth-construction-kicker {
        display: inline-flex !important;
        color: var(--hcrm-blue-dark) !important;
        font-size: .58rem !important;
        margin-bottom: 0 !important;
    }

    .auth-construction-heading {
        text-align: center !important;
        margin-bottom: .58rem !important;
    }

    .auth-construction-heading .auth-construction-kicker {
        display: none !important;
    }

    .auth-construction-heading h1 {
        font-size: clamp(1.15rem, 6vw, 1.45rem) !important;
        line-height: 1.08 !important;
        margin-bottom: .24rem !important;
    }

    .auth-construction-heading p {
        font-size: .76rem !important;
        line-height: 1.28 !important;
        -webkit-line-clamp: 2 !important;
    }

    .auth-construction-workflow,
    .auth-construction-alert {
        padding: .5rem .58rem !important;
        border-radius: 12px !important;
        font-size: .72rem !important;
        line-height: 1.25 !important;
        margin-bottom: .48rem !important;
    }

    .auth-construction-workflow div,
    .auth-construction-alert div {
        -webkit-line-clamp: 2 !important;
    }

    .auth-construction-form .mb-3 {
        margin-bottom: .46rem !important;
    }

    .auth-construction-form .mb-4,
    .auth-construction-workflow.mb-4,
    .auth-construction-alert.mb-4,
    .form-check.mb-4 {
        margin-bottom: .52rem !important;
    }

    .auth-construction-form .form-label,
    .auth-construction-form .hcrm-label,
    .form-check-label,
    .auth-construction-link,
    .auth-construction-form .form-text,
    .auth-construction-form .invalid-feedback {
        font-size: .72rem !important;
    }

    .auth-construction-form .form-control,
    .auth-construction-form .hcrm-input {
        min-height: 37px !important;
        border-radius: 11px !important;
        padding: .46rem .62rem !important;
        font-size: .82rem !important;
    }

    .auth-construction-password-group .btn {
        min-width: 37px !important;
        border-radius: 0 11px 11px 0 !important;
        padding: .42rem .52rem !important;
    }

    .auth-construction-submit,
    .auth-construction-form .auth-construction-submit,
    .auth-construction-form .btn-primary,
    .auth-construction-secondary {
        min-height: 38px !important;
        border-radius: 11px !important;
        padding: .45rem .62rem !important;
        font-size: .82rem !important;
    }

    .auth-construction-link-row {
        justify-content: center !important;
        gap: .36rem .6rem !important;
        text-align: center !important;
    }

    .auth-construction-link-row.mt-4,
    .text-center.mt-4,
    .auth-construction-demo {
        margin-top: .52rem !important;
    }

    .auth-construction-demo summary {
        padding: .4rem .52rem !important;
        font-size: .66rem !important;
    }

    .auth-construction-demo-body {
        padding: .42rem .52rem !important;
        font-size: .64rem !important;
    }

    .maintenance-construction-card {
        width: min(92vw, 410px) !important;
        height: auto !important;
        min-height: auto !important;
        max-height: calc(100dvh - 1.6rem) !important;
        padding: clamp(.85rem, 4vw, 1.15rem) !important;
        border-radius: 22px !important;
        background: rgba(255,255,255,.94) !important;
        overflow: hidden !important;
    }

    .maintenance-construction-icon {
        width: 48px !important;
        height: 48px !important;
        margin: .08rem auto .4rem !important;
        font-size: 1.35rem !important;
    }

    .maintenance-construction-brand {
        margin-bottom: .3rem !important;
    }

    .maintenance-construction-brand img {
        max-width: 108px !important;
        max-height: 34px !important;
    }

    .maintenance-construction-card h1 {
        font-size: clamp(1.08rem, 5.6vw, 1.35rem) !important;
        line-height: 1.08 !important;
        margin-bottom: .25rem !important;
    }

    .maintenance-construction-lead {
        font-size: .73rem !important;
        line-height: 1.23 !important;
        margin-bottom: .4rem !important;
        -webkit-line-clamp: 2 !important;
    }

    .maintenance-construction-user-card,
    .maintenance-construction-alert {
        margin: .4rem auto !important;
        padding: .5rem .56rem !important;
        border-radius: 12px !important;
        font-size: .71rem !important;
        line-height: 1.22 !important;
    }

    .maintenance-construction-actions {
        margin-top: .42rem !important;
        gap: .36rem !important;
    }

    .maintenance-construction-btn-primary,
    .maintenance-construction-actions .btn {
        min-height: 38px !important;
        border-radius: 11px !important;
        padding: .45rem .62rem !important;
        font-size: .8rem !important;
    }

    .maintenance-construction-footer {
        margin-top: .42rem !important;
        font-size: .6rem !important;
    }
}

@media (max-height: 640px) and (min-width: 768px) {
    body.auth-construction-shell,
    body.maintenance-construction-shell,
    .hcrm-auth-shell .hcrm-auth-main,
    .auth-construction-page,
    .maintenance-construction-page {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
    }

    .auth-construction-card {
        min-height: calc(100dvh - 1.5rem) !important;
        max-height: calc(100dvh - 1.5rem) !important;
    }

    .maintenance-construction-card {
        max-height: calc(100dvh - 1.5rem) !important;
    }
}