/* Keep wide data inside its own scroll area rather than widening the page. */
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; }
button, input, select, textarea { max-width: 100%; }
button, .btn, .link { touch-action: manipulation; }
.app { min-height: 100vh; min-height: 100dvh; }
.sidebar { height: 100vh; height: 100dvh; gap: 0; }
.sidebar .brand, .sidebottom { flex-shrink: 0; }
.sidebar .nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sidebar .sidebottom { margin-top: 20px; }
.main, main, .grid > *, .rightcol, .card, .stat, .fields > *, .details > *,
.profile, .profile > div, .heading > div, .cardhead > div { min-width: 0; }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fields, .details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.heading, .cardhead, .toolbar, .actions, .tablefoot, .footer { flex-wrap: wrap; }
.heading > div, .cardhead > div { flex: 1 1 180px; }
.profile { max-width: 100%; }
.avatar, .statIcon { flex-shrink: 0; }
.profile b, .profile small, .details strong, .unitbox, .note, .event,
.task strong, .heading p, .cardhead p, .gate p, .toast { overflow-wrap: anywhere; }
.search { min-width: min(180px, 100%); }
.toolbar select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.btn { white-space: normal; text-align: center; }
.tablewrap { width: 100%; max-width: 100%; overscroll-behavior-x: contain; }
.tablewrap td { overflow-wrap: anywhere; }
.gate { width: calc(100% - 32px); }
label input, label select, label textarea { min-width: 0; }
input[type="file"] { overflow: hidden; }
input[type="checkbox"] { flex-shrink: 0; }
.modalback { padding: 20px; overscroll-behavior: contain; }
.modal { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overscroll-behavior: contain; }
.modalhead { align-items: center; gap: 12px; }
.modalhead h2 { overflow-wrap: anywhere; }
.modalhead button { flex-shrink: 0; }
.modalbody, .modalbody form > div { min-width: 0; max-width: 100%; }
.modalbody [style*="display:flex"] { flex-wrap: wrap; }
.modalbody iframe { display: block; max-width: 100%; }
body:has(.modalback) { overflow: hidden; }
.toast { bottom: max(20px, env(safe-area-inset-bottom)); }

@media (max-width: 1100px) {
    .app { grid-template-columns: 210px minmax(0, 1fr); }
    .sidebar { width: 210px; padding: 24px 12px; }
    .brand { padding: 0 6px; gap: 9px; }
    .brand b { font-size: 24px; }
    .brand small { font-size: 9px; }
    .nav button { padding: 12px 10px; gap: 9px; }
    main { padding: 24px; }
    .topbar { padding: 16px 24px; }
    .grid { grid-template-columns: minmax(0, 1fr); }
    .rightcol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .stats { gap: 12px; }
    .stat { padding: 15px; }
    .stat .row { gap: 8px; flex-wrap: wrap; }
}

@media (max-width: 800px) {
    .app { display: block; }
    .sidebar { position: static; width: 100%; height: auto; padding: 16px; display: block; }
    .brand { padding: 0; }
    .brand b { font-size: 23px; }
    .brandmark { width: 36px; height: 38px; }
    .sidebar .label, .sidebottom { display: none; }
    .sidebar .nav {
        display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px;
        overflow-x: auto; overflow-y: hidden; margin-top: 16px; padding-bottom: 6px;
        scrollbar-width: thin;
    }
    .nav button { flex: 0 0 auto; min-height: 44px; font-size: 12px; padding: 10px 12px; }
    .nav button.active:before { display: none; }
    .topbar { padding: 16px; gap: 14px; align-items: flex-start; }
    .crumb { flex-basis: 100%; font-size: 12px; }
    .profile { flex: 1 1 200px; }
    .profile b { font-size: 13px; }
    .profile small { font-size: 12px; }
    .topbar > div:last-child { margin-bottom: 0 !important; }
    main { padding: 24px 16px 32px; }
    h1 { font-size: clamp(23px, 4vw, 29px); }
    .heading { gap: 14px; margin-bottom: 20px; }
    .heading .btn { padding: 11px 14px; font-size: 12px; }
    .btn, .btn.small, .link { min-height: 44px; }
    .btn.small { padding: 10px 12px; font-size: 12px; }
    .link { display: inline-flex; align-items: center; white-space: normal; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .stat .value { font-size: 29px; }
    .stat .row, .stat small { font-size: 12px; }
    .welcome { padding: 20px; }
    .welcome .visual { display: none; }
    .cardhead { padding: 16px; }
    .toolbar { padding: 14px 16px; gap: 10px; }
    .search { flex-basis: 100%; }
    .search input, .toolbar select { min-height: 44px; font-size: 16px; }
    .search .icon { top: 14px; }
    .toolbar select { flex: 1 1 160px; }
    .tablewrap table { min-width: 580px; }
    .tablewrap::before {
        content: 'Geser tabel ke samping untuk melihat kolom lainnya';
        display: block; position: sticky; left: 0; padding: 8px 16px;
        font-size: 11px; color: #61756a; background: #f8faf7;
    }
    .tablefoot { padding: 12px 16px; gap: 8px; font-size: 11px; }
    .fields { grid-template-columns: minmax(0, 1fr); }
    .full { grid-column: 1 / -1; }
    label { font-size: 13px; }
    label input, label select, label textarea { min-height: 44px; font-size: 16px; }
    label textarea { min-height: 110px; }
    .check { min-height: 44px; font-size: 13px; }
    .check input { min-height: 0; width: 20px; height: 20px; }
    .modalback { padding: 12px; }
    .modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
    .modalhead { padding: 14px 16px; }
    .modalhead button { width: 44px; height: 44px; font-size: 23px; }
    .modalbody { padding: 20px 16px; }
    .detailcols { grid-template-columns: minmax(0, 1fr); }
    .actions { gap: 10px; }
    .note { font-size: 12px; }
    .footer { gap: 10px; font-size: 11px; }
    .gate { margin: 24px auto; padding: 28px 24px; }
    .gate p { font-size: 13px; }
    .toast { padding: 12px 16px; font-size: 13px; }
}

@media (max-width: 480px) {
    .heading { align-items: stretch; }
    .heading > div, .heading > .btn { flex-basis: 100%; }
    .rightcol { display: block; }
    .topbar > div:last-child { width: 100%; }
    .topbar > div:last-child .btn { flex: 1 1 120px; }
    .stat { padding: 13px; }
    .stat .statIcon { padding: 7px; }
    .stat .row { align-items: flex-start; }
    .stat .value { font-size: 27px; }
    .details { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .details strong { font-size: 13px; }
    .actions > .btn { flex: 1 1 120px; }
    .gate { padding: 24px 20px; }
    .modalbody iframe { height: 55vh !important; min-height: 200px !important; }
    .modalbody form > [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
    .footer { flex-direction: column; }
}

@media (max-height: 500px) and (max-width: 950px) {
    .modalback { padding: 8px; }
    .modal { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
    .modalhead { padding: 8px 16px; }
    .gate { margin: 16px auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
}