/**
 * MAPURAMIL KIA — layout menyesuaikan lebar layar (tanpa geser kanan untuk tombol).
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: hidden !important;
}

.maternal-portal-body .maternal-mobile-topbar {
    max-width: 100%;
    box-sizing: border-box;
}

img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

/* Sidebar kiri 16rem: pakai PADDING (bukan margin) agar lebar total = 100% viewport */
.app-shell,
.maternal-app-frame {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

@media (min-width: 1024px) {
    /* Semua halaman maternal/admin: konten di kanan sidebar (16rem), MAPURAMIL tidak tertutup */
    body.maternal-portal-body .maternal-app-frame,
    body.maternal-portal-body .maternal-app-frame.app-shell,
    body.maternal-portal-body .app-shell.maternal-app-frame,
    .app-shell.lg\:pl-64,
    .maternal-app-frame.lg\:pl-64 {
        padding-left: 16rem !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.maternal-portal-body #maternal-sidebar {
        width: 16rem !important;
        max-width: 16rem !important;
    }

    html.portal-sidebar-collapsed body.maternal-portal-body .maternal-app-frame,
    html.portal-sidebar-collapsed body.admin-portal-body .app-shell,
    html.portal-sidebar-collapsed body.admin-portal-body .app-shell.lg\:pl-64,
    html.portal-sidebar-collapsed .app-shell.lg\:pl-64,
    html.portal-sidebar-collapsed body.staff-portal-body .app-shell,
    body.portal-sidebar-collapsed.maternal-portal-body .maternal-app-frame,
    body.portal-sidebar-collapsed.admin-portal-body .app-shell,
    body.portal-sidebar-collapsed.staff-portal-body .app-shell {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Sisa file lama yang masih ml-64 — kecuali sidebar disembunyikan */
    html:not(.portal-sidebar-collapsed) .app-shell.lg\:ml-64,
    html:not(.portal-sidebar-collapsed) .maternal-app-frame.lg\:ml-64 {
        margin-left: 0 !important;
        padding-left: 16rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html.portal-sidebar-collapsed .app-shell.lg\:ml-64,
    html.portal-sidebar-collapsed .maternal-app-frame.lg\:ml-64,
    html.portal-sidebar-collapsed main.lg\:ml-64,
    html.portal-sidebar-collapsed header.lg\:ml-64 {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

.app-main,
.maternal-main-shell,
.maternal-page-content {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.app-main > *,
.maternal-main-shell > *,
.maternal-page-content > * {
    min-width: 0;
    max-width: 100%;
}

.app-main .grid > *,
.app-main .flex > *,
.maternal-main-shell .grid > *,
.maternal-main-shell .flex > *,
.maternal-page-content .grid > *,
.maternal-page-content .flex > * {
    min-width: 0;
}

.app-main table,
.maternal-main-shell table,
.maternal-page-content table {
    max-width: 100%;
}

.app-main:not(.maternal-page-content) {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

@media (min-width: 768px) {
    .app-main:not(.maternal-page-content) {
        padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
    }
}

.app-page-inner,
.maternal-page-inner {
    width: 100%;
    max-width: min(100%, 100rem);
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}

.app-main .max-w-\[1600px\],
.app-main .max-w-7xl,
.maternal-page-content .max-w-7xl {
    width: 100%;
    max-width: min(100%, 100rem);
    min-width: 0;
}

/* Judul + tombol (Edit, Simpan, Batal): bungkus ke bawah jika sempit */
.maternal-page-header {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 1rem;
}

.maternal-page-header > .min-w-0 {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 100%;
}

.maternal-action-bar {
    display: flex;
    flex-wrap: wrap !important;
    gap: 0.625rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 1024px) {
    .maternal-action-bar {
        width: auto;
        max-width: 100%;
        flex: 0 1 auto;
        justify-content: flex-end;
    }
}

.maternal-action-bar a,
.maternal-action-bar button {
    flex: 1 1 auto;
    min-width: min(100%, 8.5rem);
    max-width: 100%;
}

@media (min-width: 480px) {
    .maternal-action-bar a,
    .maternal-action-bar button {
        flex: 0 1 auto;
        width: auto;
    }
}

/* Header admin: tombol tidak mendorong lebar halaman */
.app-shell > header {
    flex-wrap: wrap;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

.app-shell > header > * {
    min-width: 0;
}

/* Tabel lebar: scroll HANYA di dalam kotak tabel, bukan seluruh halaman */
.overflow-x-auto,
.app-table-scroll,
.maternal-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-main input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
.app-main select,
.app-main textarea,
.maternal-page-content input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
.maternal-page-content select,
.maternal-page-content textarea {
    max-width: 100%;
}

.maternal-page-content h1,
.maternal-page-content h2,
.maternal-page-content h3,
.maternal-page-content p,
.maternal-page-content label,
.app-main h1,
.app-main h2,
.app-main h3,
.app-main p,
.app-main label {
    overflow-wrap: break-word;
}

.app-main .grid,
.maternal-page-content .grid {
    min-width: 0;
}

.app-main .grid > *,
.maternal-page-content .grid > * {
    min-width: 0;
}

/* Baris tombol admin / kartu: bungkus, tidak dorong lebar halaman */
.app-main .flex.justify-between,
.app-main .flex.items-center.justify-between,
.maternal-page-content .flex.justify-between {
    flex-wrap: wrap;
    gap: 0.75rem;
    max-width: 100%;
}

.app-main .flex.justify-between > *,
.maternal-page-content .flex.justify-between > * {
    min-width: 0;
    max-width: 100%;
}

/* Dekorasi keluar layar (blur di pojok) */
.maternal-page-inner > section.relative,
.maternal-page-content > section.relative {
    overflow: hidden;
}

.login-page,
.welcome-page {
    width: 100%;
    overflow-x: hidden;
}

.login-page main,
.welcome-page main {
    width: 100%;
    max-width: 100%;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

@media (max-width: 639px) {
    .app-main select[class*='min-w'],
    .maternal-page-content select[class*='min-w'] {
        min-width: 0 !important;
        width: 100%;
    }
}