/* =====================================================================
   BARCEP — Global responsive system
   Shared by ASN, Umum, Posyandu, and the public service pages.
   This file contains layout safeguards only; business logic stays untouched.
   ===================================================================== */

:root {
    --barcep-page-padding: clamp(16px, 2.5vw, 32px);
    --barcep-card-padding: clamp(16px, 2vw, 24px);
    --barcep-card-radius: 16px;
    --barcep-gap-xs: 6px;
    --barcep-gap-sm: 10px;
    --barcep-gap-md: 16px;
    --barcep-gap-lg: 24px;
    --barcep-gap-xl: 32px;
    --barcep-font-xs: clamp(12px, .75rem + .1vw, 13px);
    --barcep-font-sm: clamp(13px, .8rem + .15vw, 14px);
    --barcep-font-md: clamp(14px, .85rem + .2vw, 16px);
    --barcep-font-lg: clamp(16px, 1rem + .25vw, 18px);
    --barcep-font-xl: clamp(20px, 1.2rem + .4vw, 24px);
    --barcep-font-title: clamp(24px, 1.5rem + .7vw, 32px);
    --barcep-content-max: 1600px;
    --barcep-sidebar-width: 260px;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

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

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

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

img {
    height: auto;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    max-width: 100%;
    overflow-wrap: break-word;
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
select,
textarea {
    max-width: 100%;
    min-width: 0;
}

@media screen {
    /* Shared application shell. min-width: 0 is essential for charts and tables. */
    .barcep-app-wrapper,
    .barcep-app-shell {
        display: flex;
        min-height: 100vh;
        width: 100%;
        max-width: 100%;
    }

    .barcep-main,
    .barcep-content,
    .barcep-main-content,
    .main-content-wrapper,
    .content-wrapper,
    .page-wrapper {
        min-width: 0;
        max-width: 100%;
    }

    .barcep-main {
        /* The fixed sidebar is outside the flex flow. Reserving its width
           here prevents the content from becoming viewport + sidebar wide. */
        flex: 0 1 calc(100% - var(--barcep-sidebar-width));
        width: calc(100% - var(--barcep-sidebar-width));
        max-width: calc(100% - var(--barcep-sidebar-width));
        min-width: 0;
        margin-left: var(--barcep-sidebar-width);
    }

    /* Posyandu previously set width:100% in addition to sidebar spacing. */
    .barcep-main.barcep-posyandu-main {
        width: auto;
    }

    .barcep-content,
    .barcep-main-content {
        width: 100%;
        max-width: var(--barcep-content-max);
        margin-inline: auto;
        padding: var(--barcep-page-padding);
    }

    /* Older ASN views render beside the sidebar without layouts/main. */
    .barcep-sidebar ~ .barcep-topbar,
    .barcep-sidebar ~ .main-content-wrapper,
    .barcep-sidebar ~ .content-wrapper,
    .barcep-sidebar ~ .page-wrapper {
        margin-left: var(--barcep-sidebar-width) !important;
    }

    .barcep-sidebar ~ .main-content-wrapper,
    .barcep-sidebar ~ .content-wrapper,
    .barcep-sidebar ~ .page-wrapper {
        width: auto;
        max-width: none;
        padding: var(--barcep-page-padding) !important;
    }

    /* Legacy ASN controllers can render sidebar, topbar, and page view as
       direct body siblings. Reserve the fixed sidebar for those containers. */
    body.barcep-asn-page > .barcep-sidebar ~ .container,
    body.barcep-asn-page > .barcep-sidebar ~ .container-fluid {
        width: calc(100% - var(--barcep-sidebar-width));
        max-width: calc(100% - var(--barcep-sidebar-width));
        min-width: 0;
        margin-left: var(--barcep-sidebar-width);
        margin-right: 0;
    }
    /* A legacy wrapper inside the current app shell must not reserve sidebar space twice. */
    .barcep-main .main-content-wrapper,
    .barcep-main .content-wrapper,
    .barcep-main .page-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .barcep-content > .container,
    .barcep-content > .container-fluid,
    .barcep-main-content > .container,
    .barcep-main-content > .container-fluid,
    .main-content-wrapper > .container,
    .main-content-wrapper > .container-fluid,
    .content-wrapper > .container,
    .content-wrapper > .container-fluid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .barcep-content .card,
    .barcep-main-content .card,
    .main-content-wrapper .card,
    .content-wrapper .card,
    .barcep-card,
    .barcep-panel,
    .barcep-filter-card,
    .tl-card,
    .main-card {
        width: 100%;
        max-width: 100%;
    }

    .barcep-content .row > *,
    .barcep-main-content .row > *,
    .main-content-wrapper .row > *,
    .content-wrapper .row > *,
    .d-flex > * {
        min-width: 0;
    }

    .barcep-content .d-flex,
    .barcep-main-content .d-flex,
    .main-content-wrapper .d-flex,
    .content-wrapper .d-flex,
    .button-group,
    .btn-toolbar {
        min-width: 0;
    }

    .barcep-content .table-responsive,
    .barcep-main-content .table-responsive,
    .main-content-wrapper .table-responsive,
    .content-wrapper .table-responsive,
    .table-responsive,
    .table-wrapper,
    .table-wrap,
    .pd-table-wrap,
    .tl-table-wrapper,
    .dinkes-chart-scroll,
    .barcep-analysis-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive > table,
    .table-wrapper > table,
    .table-wrap > table,
    .pd-table-wrap > table,
    .tl-table-wrapper > table {
        margin-bottom: 0;
    }

    .chart-container,
    .barcep-chart-box,
    .dinkes-chart-ranking,
    .dinkes-chart-wide,
    .barcep-analysis-layout,
    .barcep-analysis-table-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .chart-container canvas,
    .barcep-chart-box canvas,
    .dinkes-chart-ranking canvas,
    .dinkes-chart-wide canvas {
        max-width: 100% !important;
    }

    .modal-dialog,
    .modal-content,
    .status-modal,
    .barcep-welcome-modal {
        max-width: calc(100% - 24px);
    }

    .modal-body {
        max-width: 100%;
        overflow-x: auto;
    }

    .barcep-topbar {
        min-width: 0;
    }

    .barcep-topbar .d-flex,
    .barcep-user-btn {
        min-width: 0;
    }

    .barcep-topbar .fw-semibold.text-dark {
        max-width: min(45vw, 260px);
    }

    .barcep-sidebar {
        width: var(--barcep-sidebar-width);
        max-width: 100%;
    }
}

/* Tablet: retain an efficient two-column layout where components support it. */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .responsive-grid,
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile and small tablet off-canvas navigation and touch-first layout. */
@media screen and (max-width: 991.98px) {
    .barcep-app-wrapper,
    .barcep-app-shell {
        display: block;
    }

    .barcep-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 320px);
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1050;
    }

    .barcep-sidebar.show,
    .barcep-sidebar.is-open {
        transform: translateX(0);
    }

    .barcep-sidebar-overlay.show,
    .barcep-sidebar-overlay.is-open {
        display: block;
        z-index: 1040;
    }

    .barcep-main,
    .barcep-sidebar ~ .barcep-topbar,
    .barcep-sidebar ~ .main-content-wrapper,
    .barcep-sidebar ~ .content-wrapper,
    .barcep-sidebar ~ .page-wrapper,
    body.barcep-asn-page > .barcep-sidebar ~ .container,
    body.barcep-asn-page > .barcep-sidebar ~ .container-fluid,
    .main-content-wrapper,
    .content-wrapper,
    .page-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .barcep-content,
    .barcep-main-content,
    .main-content-wrapper,
    .content-wrapper,
    .page-wrapper {
        padding: var(--barcep-page-padding) !important;
    }

    .barcep-content > .container-fluid,
    .barcep-main-content > .container-fluid,
    .main-content-wrapper > .container-fluid,
    .content-wrapper > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .barcep-content .card-body,
    .barcep-main-content .card-body,
    .main-content-wrapper .card-body,
    .content-wrapper .card-body,
    .barcep-card,
    .barcep-panel,
    .barcep-filter-card,
    .tl-card-body,
    .main-card {
        padding: var(--barcep-card-padding);
    }

    .filter-grid,
    .tl-filter-grid,
    .form-row,
    .responsive-grid,
    .kpi-grid,
    .summary-grid,
    .active-grid {
        grid-template-columns: 1fr !important;
    }

    .barcep-content .d-flex.justify-content-between,
    .barcep-content .d-flex.justify-content-end,
    .barcep-main-content .d-flex.justify-content-between,
    .barcep-main-content .d-flex.justify-content-end,
    .main-content-wrapper .d-flex.justify-content-between,
    .main-content-wrapper .d-flex.justify-content-end,
    .content-wrapper .d-flex.justify-content-between,
    .content-wrapper .d-flex.justify-content-end,
    .button-group,
    .btn-toolbar {
        flex-wrap: wrap;
        gap: var(--barcep-gap-sm);
    }

    .tl-card-header,
    .tl-card-body,
    .tl-pagination-bar {
        padding-left: var(--barcep-card-padding);
        padding-right: var(--barcep-card-padding);
    }

    .tl-scroll-top {
        margin-inline: var(--barcep-card-padding);
    }

    .barcep-content input.form-control,
    .barcep-content select.form-select,
    .barcep-content textarea.form-control,
    .barcep-main-content input.form-control,
    .barcep-main-content select.form-select,
    .barcep-main-content textarea.form-control,
    .main-content-wrapper input,
    .main-content-wrapper select,
    .main-content-wrapper textarea,
    .content-wrapper input,
    .content-wrapper select,
    .content-wrapper textarea {
        font-size: 16px !important;
        min-height: 44px;
    }
}

@media screen and (max-width: 767.98px) {
    .barcep-topbar {
        position: sticky;
        top: 0;
        padding: 12px var(--barcep-page-padding) !important;
        overflow: visible;
        z-index: 1030;
    }

    .barcep-topbar .fw-semibold.text-dark {
        max-width: 42vw;
    }

    .barcep-content,
    .barcep-main-content,
    .main-content-wrapper,
    .content-wrapper,
    .page-wrapper {
        padding: 16px !important;
    }

    .barcep-content h1,
    .barcep-main-content h1,
    .main-content-wrapper h1,
    .content-wrapper h1,
    .page-title {
        font-size: var(--barcep-font-title);
        line-height: 1.2;
    }

    .barcep-content .card-title,
    .barcep-main-content .card-title,
    .main-content-wrapper .card-title,
    .content-wrapper .card-title,
    .card-title {
        font-size: var(--barcep-font-xl);
        line-height: 1.25;
    }

    .barcep-content .form-label,
    .barcep-main-content .form-label,
    .main-content-wrapper label,
    .content-wrapper label {
        font-size: var(--barcep-font-md);
    }

    .button-group .btn,
    .button-group button,
    .btn-toolbar .btn {
        width: 100%;
    }

    .input-group {
        flex-wrap: wrap;
    }

    .input-group > .form-control,
    .input-group > .form-select {
        width: 100%;
        flex: 1 1 100%;
    }

    .input-group > .btn {
        margin-top: var(--barcep-gap-sm);
        border-radius: .375rem !important;
    }

    .modal-dialog {
        width: auto;
        margin: 12px;
    }
}

@media print {
    /* Screen responsiveness must not change the existing print/PDF layouts. */
    .barcep-sidebar,
    .barcep-sidebar-overlay,
    .barcep-topbar,
    .barcep-sidebar-toggle {
        display: none !important;
    }
}

/* Login memakai susunan flex biasa: ikon, input, lalu tombol mata. Elemen
   tidak ditumpuk sehingga tetap aman di layar HP yang sempit. */
.barcep-login-form .barcep-login-input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    min-height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.barcep-login-form .barcep-login-input-group:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}

.barcep-login-form .barcep-login-input-group > .barcep-login-input {
    display: block;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 10px;
    margin-left: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: clamp(13px, 3.8vw, 16px);
    line-height: 1.4;
}

.barcep-login-form .barcep-login-input-group > .barcep-login-input:focus {
    outline: 0;
}

.barcep-login-form .barcep-login-input-group > .barcep-login-input-icon {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 48px;
    padding: 0;
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: #6b7280;
    font-size: 1.1rem;
}

.barcep-login-form .barcep-login-input-group > span.barcep-login-input-icon {
    pointer-events: none;
}

.barcep-login-form .barcep-login-input-group > .barcep-toggle-password {
    margin-left: 0 !important;
    cursor: pointer;
}

@media screen and (max-width: 767.98px) {
    .barcep-login-right {
        padding: 12px !important;
    }

    .barcep-login-right .login-card-wrapper {
        width: 100%;
        max-width: 420px !important;
        margin-left: auto;
        margin-right: auto;
        padding: 20px !important;
        box-sizing: border-box;
    }

    .barcep-login-form {
        width: 100%;
        max-width: 100%;
    }

    .barcep-login-form button[type='submit'] {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 480px) {
    .barcep-login-right .login-card-wrapper {
        width: 100%;
        padding: 14px !important;
    }
}

/* =====================================================================
   BARCEP — Three-mode density refinement
   Desktop/notebook (992–1600), tablet/iPad (768–991), and phone (<768).
   These are presentation-only overrides.  They deliberately do not alter
   markup, routes, data loading, authorization, or any application action.
   ===================================================================== */

/* Desktop and notebook: make the working area efficient at 1366×768 while
   retaining comfortable text sizes on larger screens. */
@media screen and (min-width: 992px) and (max-width: 1600px) {
    :root {
        --barcep-sidebar-width: 222px;
        --bp-sidebar-width: 222px;
        --barcep-page-padding: 18px;
        --barcep-card-padding: 14px;
        --barcep-gap-sm: 8px;
        --barcep-gap-md: 12px;
        --barcep-gap-lg: 18px;
    }

    body.barcep-body {
        font-size: 13.5px;
        line-height: 1.45;
    }

    .barcep-sidebar {
        padding: 14px 10px;
    }

    .barcep-sidebar-logo-full {
        height: 78px;
    }

    .barcep-sidebar-nav {
        gap: 2px;
        padding-top: 4px;
    }

    .barcep-sidebar-link,
    .barcep-sidebar-group-toggle {
        gap: 9px;
        padding: 8px 10px;
        font-size: 12.5px;
    }

    .barcep-sidebar-link i {
        font-size: .95rem;
    }

    .barcep-sidebar-sublink,
    .barcep-sidebar-group-items a {
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: 12px;
    }

    .barcep-sidebar-divider {
        margin: 9px 4px;
    }

    .barcep-sidebar-illustration {
        margin-bottom: 6px;
        padding-inline: 10px;
    }

    .barcep-sidebar-illustration img {
        max-width: 112px;
        max-height: 100px;
    }

    .barcep-topbar {
        gap: 12px;
        padding: 11px 18px;
    }

    .barcep-topbar-illustration {
        right: 18px;
        height: 44px;
    }

    .barcep-topbar .fw-semibold.text-dark {
        font-size: .95rem;
    }

    .barcep-topbar .small.text-muted {
        font-size: 11px;
    }

    .barcep-avatar {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 12px;
    }

    .barcep-user-btn {
        padding: 4px 10px 4px 4px;
        font-size: 12px;
    }

    .barcep-content,
    .barcep-main-content,
    .main-content-wrapper,
    .content-wrapper,
    .page-wrapper {
        padding: var(--barcep-page-padding) !important;
    }

    .barcep-content h1,
    .barcep-main-content h1,
    .main-content-wrapper h1,
    .content-wrapper h1,
    .page-title {
        font-size: clamp(21px, 1.3vw + 7px, 25px) !important;
        line-height: 1.2;
        margin-bottom: 6px;
    }

    .barcep-content h2,
    .barcep-main-content h2,
    .main-content-wrapper h2,
    .content-wrapper h2 {
        font-size: 19px;
    }

    .barcep-content h3,
    .barcep-main-content h3,
    .main-content-wrapper h3,
    .content-wrapper h3 {
        font-size: 16px;
    }

    .barcep-content .card,
    .barcep-main-content .card,
    .main-content-wrapper .card,
    .content-wrapper .card,
    .barcep-card,
    .barcep-filter-card,
    .tl-card,
    .main-card {
        border-radius: 12px;
    }

    .barcep-content .card-body,
    .barcep-main-content .card-body,
    .main-content-wrapper .card-body,
    .content-wrapper .card-body {
        padding: 14px;
    }

    .barcep-dashboard-refresh .barcep-welcome-banner {
        gap: 12px;
        padding: 16px 18px;
    }

    .barcep-dashboard-refresh .barcep-welcome-illustration {
        height: 104px;
    }

    .barcep-dashboard-refresh .barcep-stat-card {
        padding: 13px 14px;
    }

    .barcep-dashboard-refresh .barcep-stat-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 7px;
    }

    .barcep-dashboard-refresh .barcep-stat-value {
        font-size: 1.55rem;
    }

    .barcep-dashboard-refresh .barcep-kpi-card {
        min-height: 92px;
        padding: 13px !important;
    }

    .barcep-content .form-label,
    .barcep-main-content .form-label,
    .main-content-wrapper label,
    .content-wrapper label {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .barcep-content .form-control,
    .barcep-content .form-select,
    .barcep-main-content .form-control,
    .barcep-main-content .form-select,
    .main-content-wrapper .form-control,
    .main-content-wrapper .form-select,
    .content-wrapper .form-control,
    .content-wrapper .form-select,
    .barcep-content textarea,
    .barcep-main-content textarea,
    .main-content-wrapper textarea,
    .content-wrapper textarea {
        min-height: 38px;
        font-size: 13px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .barcep-content .btn,
    .barcep-main-content .btn,
    .main-content-wrapper .btn,
    .content-wrapper .btn {
        min-height: 38px;
        padding: 7px 11px;
        font-size: 12.5px;
    }

    .barcep-content table,
    .barcep-main-content table,
    .main-content-wrapper table,
    .content-wrapper table {
        font-size: 12px;
    }

    .barcep-content .table > :not(caption) > * > *,
    .barcep-main-content .table > :not(caption) > * > *,
    .main-content-wrapper .table > :not(caption) > * > *,
    .content-wrapper .table > :not(caption) > * > * {
        padding: 8px 9px;
    }

    .barcep-content .row,
    .barcep-main-content .row,
    .main-content-wrapper .row,
    .content-wrapper .row {
        --bs-gutter-x: 14px;
        --bs-gutter-y: 14px;
    }
}

/* =====================================================================
   Comfortable desktop density
   One shared reading scale for ASN, Umum, Posyandu, Kanker, Hipertensi,
   DM, and Prolanis.  This only adjusts presentation on laptop/desktop;
   it does not change any route, form value, or application logic.
   ===================================================================== */
@media screen and (min-width: 992px) {
    body.barcep-body {
        font-size: 13px;
        line-height: 1.45;
    }

    .barcep-sidebar {
        padding: 12px 10px;
    }

    .barcep-sidebar-logo-full {
        height: 70px;
    }

    .barcep-sidebar-nav {
        padding: 6px 4px;
    }

    .barcep-sidebar-link,
    .barcep-sidebar-group-toggle {
        gap: 8px;
        min-height: 36px;
        padding: 7px 9px;
        font-size: 12.25px;
        line-height: 1.25;
    }

    .barcep-sidebar-link i,
    .barcep-sidebar-group-toggle i:first-child {
        width: 18px;
        font-size: .92rem;
    }

    .barcep-sidebar-group-items {
        padding-left: 16px;
    }

    .barcep-sidebar-sublink,
    .barcep-sidebar-group-items a {
        min-height: 32px;
        padding: 6px 9px;
        font-size: 11.75px;
        line-height: 1.25;
    }

    .barcep-content,
    .barcep-main-content,
    .main-content-wrapper,
    .content-wrapper,
    .page-wrapper {
        font-size: 13px;
    }

    .barcep-content h1,
    .barcep-main-content h1,
    .main-content-wrapper h1,
    .content-wrapper h1,
    .page-wrapper h1,
    .page-title {
        font-size: clamp(1.3rem, 1.45vw, 1.5rem) !important;
        line-height: 1.2;
    }

    .barcep-content h2,
    .barcep-main-content h2,
    .main-content-wrapper h2,
    .content-wrapper h2,
    .page-wrapper h2 {
        font-size: 1.18rem;
        line-height: 1.25;
    }

    .barcep-content h3,
    .barcep-content h4,
    .barcep-main-content h3,
    .barcep-main-content h4,
    .main-content-wrapper h3,
    .main-content-wrapper h4,
    .content-wrapper h3,
    .content-wrapper h4,
    .page-wrapper h3,
    .page-wrapper h4 {
        font-size: 1.06rem;
        line-height: 1.3;
    }

    .barcep-content .card-title,
    .barcep-main-content .card-title,
    .main-content-wrapper .card-title,
    .content-wrapper .card-title,
    .page-wrapper .card-title {
        font-size: 1rem;
    }

    .barcep-content .form-label,
    .barcep-main-content .form-label,
    .main-content-wrapper label,
    .content-wrapper label,
    .page-wrapper label {
        font-size: .78rem;
    }

    .barcep-content .form-control,
    .barcep-content .form-select,
    .barcep-main-content .form-control,
    .barcep-main-content .form-select,
    .main-content-wrapper .form-control,
    .main-content-wrapper .form-select,
    .content-wrapper .form-control,
    .content-wrapper .form-select,
    .page-wrapper .form-control,
    .page-wrapper .form-select {
        font-size: .82rem;
    }

    .barcep-content .btn,
    .barcep-main-content .btn,
    .main-content-wrapper .btn,
    .content-wrapper .btn,
    .page-wrapper .btn {
        font-size: .78rem;
    }

    .barcep-content .table,
    .barcep-main-content .table,
    .main-content-wrapper .table,
    .content-wrapper .table,
    .page-wrapper .table {
        font-size: .78rem;
    }
}

/* Tablet/iPad: preserve the compact app shell but give fields and cards room
   to breathe.  This comes after the small-tablet rule above so two-column
   grids are retained at tablet widths. */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --barcep-page-padding: 20px;
        --barcep-card-padding: 16px;
        --barcep-gap-md: 14px;
        --barcep-gap-lg: 20px;
    }

    body.barcep-body {
        font-size: 14px;
    }

    .barcep-topbar {
        padding: 14px 20px;
    }

    .barcep-content,
    .barcep-main-content,
    .main-content-wrapper,
    .content-wrapper,
    .page-wrapper {
        padding: var(--barcep-page-padding) !important;
    }

    .filter-grid,
    .tl-filter-grid,
    .form-row,
    .responsive-grid,
    .kpi-grid,
    .summary-grid,
    .active-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .barcep-content .form-control,
    .barcep-content .form-select,
    .barcep-main-content .form-control,
    .barcep-main-content .form-select,
    .main-content-wrapper .form-control,
    .main-content-wrapper .form-select,
    .content-wrapper .form-control,
    .content-wrapper .form-select,
    .barcep-content textarea,
    .barcep-main-content textarea,
    .main-content-wrapper textarea,
    .content-wrapper textarea {
        min-height: 42px !important;
        font-size: 14px !important;
    }

    .barcep-content .btn,
    .barcep-main-content .btn,
    .main-content-wrapper .btn,
    .content-wrapper .btn {
        min-height: 42px;
    }

    .barcep-dashboard-refresh .barcep-welcome-banner {
        padding: 18px 20px;
    }

    .barcep-dashboard-refresh .barcep-welcome-illustration {
        height: 116px;
    }

    .barcep-dashboard-refresh .barcep-card,
    .barcep-dashboard-refresh .barcep-stat-card {
        padding: 16px;
    }

    .modal-dialog {
        max-width: min(720px, calc(100% - 32px));
        margin-inline: auto;
    }
}

/* iPad landscape / compact tablet. At these widths a permanent sidebar
   leaves too little room for a three-column examination form. Use the same
   non-overlapping drawer model as smaller tablets; the menu remains available
   from the top bar and the examination area receives the full viewport. */
@media screen and (min-width: 992px) and (max-width: 1199.98px),
       screen and (min-width: 1200px) and (max-width: 1399.98px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .barcep-app-wrapper,
    .barcep-app-shell {
        display: block;
    }

    .barcep-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 320px);
        max-width: 86vw;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1050;
    }

    .barcep-sidebar.show,
    .barcep-sidebar.is-open {
        transform: translateX(0);
    }

    .barcep-sidebar-overlay.show,
    .barcep-sidebar-overlay.is-open {
        display: block;
        z-index: 1040;
    }

    .barcep-main,
    .barcep-sidebar ~ .barcep-topbar,
    .barcep-sidebar ~ .main-content-wrapper,
    .barcep-sidebar ~ .content-wrapper,
    .barcep-sidebar ~ .page-wrapper,
    body.barcep-asn-page > .barcep-sidebar ~ .container,
    body.barcep-asn-page > .barcep-sidebar ~ .container-fluid,
    .main-content-wrapper,
    .content-wrapper,
    .page-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        margin-left: 0 !important;
    }

    .barcep-sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Phone: retain the established one-column flow and make every interactive
   target comfortably tappable.  Wide data remains inside its own scroller. */
@media screen and (max-width: 767.98px) {
    :root {
        --barcep-page-padding: 14px;
        --barcep-card-padding: 14px;
        --barcep-gap-md: 12px;
        --barcep-gap-lg: 16px;
    }

    body.barcep-body {
        font-size: 14px;
    }

    .barcep-topbar {
        gap: 8px;
        padding: 10px 14px !important;
    }

    .barcep-topbar-illustration {
        display: none;
    }

    .barcep-content,
    .barcep-main-content,
    .main-content-wrapper,
    .content-wrapper,
    .page-wrapper {
        padding: var(--barcep-page-padding) !important;
    }

    .barcep-content h1,
    .barcep-main-content h1,
    .main-content-wrapper h1,
    .content-wrapper h1,
    .page-title {
        font-size: 22px !important;
        line-height: 1.2;
    }

    .barcep-content .card-body,
    .barcep-main-content .card-body,
    .main-content-wrapper .card-body,
    .content-wrapper .card-body {
        padding: 14px;
    }

    .barcep-content .form-control,
    .barcep-content .form-select,
    .barcep-main-content .form-control,
    .barcep-main-content .form-select,
    .main-content-wrapper .form-control,
    .main-content-wrapper .form-select,
    .content-wrapper .form-control,
    .content-wrapper .form-select,
    .barcep-content textarea,
    .barcep-main-content textarea,
    .main-content-wrapper textarea,
    .content-wrapper textarea {
        min-height: 44px !important;
        font-size: 16px !important;
    }

    .barcep-content .btn,
    .barcep-main-content .btn,
    .main-content-wrapper .btn,
    .content-wrapper .btn {
        min-height: 44px;
    }

    .barcep-dashboard-refresh .barcep-welcome-banner {
        align-items: flex-start;
        padding: 16px;
    }

    .barcep-dashboard-refresh .barcep-welcome-illustration {
        display: none;
    }

    .barcep-dashboard-refresh .barcep-stat-card,
    .barcep-dashboard-refresh .barcep-card {
        padding: 14px;
    }

    .barcep-dashboard-refresh .barcep-chart-box,
    .barcep-dashboard-refresh .barcep-chart-box-tall,
    .barcep-dashboard-refresh .barcep-risk-chart-box,
    .barcep-dashboard-refresh .barcep-opd-chart-box {
        height: 220px;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }

    .dropdown-menu {
        max-width: calc(100vw - 24px);
        overflow-wrap: anywhere;
    }

    .modal-dialog {
        width: auto;
        max-width: calc(100% - 24px);
        margin: 12px auto;
    }
}

/* Phone landscape is intentionally treated as a mobile drawer layout.
   A phone can be 800–1199px wide after rotation, so width alone must not
   promote its sidebar to the permanent desktop layout. */
@media screen and (orientation: landscape) and (max-height: 600px) and (max-width: 1199.98px) {
    :root {
        --barcep-page-padding: 12px;
        --barcep-card-padding: 12px;
        --barcep-gap-sm: 8px;
        --barcep-gap-md: 10px;
    }

    .barcep-app-wrapper,
    .barcep-app-shell {
        display: block;
        min-height: 100dvh;
    }

    .barcep-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(280px, 80vw) !important;
        max-width: 80vw !important;
        height: 100dvh;
        padding: 8px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1050;
        overflow: hidden;
        box-shadow: 0 0 24px rgba(15, 39, 71, .24);
    }

    .barcep-sidebar.show,
    .barcep-sidebar.is-open {
        transform: translateX(0);
    }

    .barcep-sidebar-overlay.show,
    .barcep-sidebar-overlay.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
    }

    /* Bootstrap's d-lg-none hides this button again at 992px. Landscape
       phones must retain it even when their rotated width crosses lg. */
    .barcep-sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 40px;
    }

    .barcep-sidebar-close {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .barcep-sidebar-brand {
        min-height: 48px;
        padding-bottom: 4px;
    }

    .barcep-sidebar-logo-full {
        height: 42px;
        min-width: 0;
        display: flex;
        align-items: center;
    }

    .barcep-sidebar-logo-full img {
        max-height: 42px;
        width: auto;
        max-width: 150px;
        object-fit: contain;
    }

    .barcep-sidebar-nav {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 2px 0;
    }

    .barcep-sidebar-link,
    .barcep-sidebar-group-toggle {
        min-height: 36px;
        padding: 7px 9px;
        font-size: 12px;
    }

    .barcep-sidebar-sublink,
    .barcep-sidebar-group-items a {
        min-height: 34px;
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: 11.5px;
    }

    /* Inline styles in the sidebar keep the illustration visible on desktop;
       !important is needed here for the compact landscape drawer. */
    .barcep-sidebar-illustration {
        display: none !important;
    }

    .barcep-sidebar-footer {
        flex: 0 0 auto;
    }

    .barcep-sidebar-divider {
        margin: 4px;
    }

    .barcep-main,
    .barcep-sidebar ~ .barcep-topbar,
    .barcep-sidebar ~ .main-content-wrapper,
    .barcep-sidebar ~ .content-wrapper,
    .barcep-sidebar ~ .page-wrapper,
    .main-content-wrapper,
    .content-wrapper,
    .page-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        margin-left: 0 !important;
    }

    .barcep-content,
    .barcep-main-content,
    .main-content-wrapper,
    .content-wrapper,
    .page-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: var(--barcep-page-padding) !important;
    }

    .barcep-content > *,
    .barcep-main-content > *,
    .main-content-wrapper > *,
    .content-wrapper > * {
        min-width: 0;
        max-width: 100%;
    }

    .barcep-topbar {
        min-height: 56px;
        padding: 8px 12px !important;
    }

    .barcep-topbar-illustration,
    .barcep-dashboard-refresh .barcep-welcome-illustration {
        display: none;
    }

    .barcep-content .card-body,
    .barcep-main-content .card-body,
    .main-content-wrapper .card-body,
    .content-wrapper .card-body,
    .barcep-card,
    .barcep-panel,
    .barcep-filter-card,
    .main-card {
        padding: var(--barcep-card-padding);
    }

    .barcep-content .row,
    .barcep-main-content .row,
    .main-content-wrapper .row,
    .content-wrapper .row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    .barcep-content .table-responsive,
    .barcep-main-content .table-responsive,
    .main-content-wrapper .table-responsive,
    .content-wrapper .table-responsive,
    .table-responsive,
    .table-wrapper,
    .table-wrap,
    .pd-table-wrap,
    .tl-table-wrapper {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .modal-dialog {
        width: auto;
        max-width: calc(100vw - 24px);
        margin: 8px auto;
    }

    /* The registration QR dialog has enough content to exceed a short
       landscape viewport. Keep the dialog chrome in view and scroll only
       its body, without changing desktop or unrelated modal behaviour. */
    #barcepRegistrationQrModal .modal-dialog {
        max-height: calc(100dvh - 16px);
        margin-top: 8px;
        margin-bottom: 8px;
    }

    #barcepRegistrationQrModal .modal-content {
        max-height: calc(100dvh - 16px);
        min-height: 0;
        overflow: hidden;
    }

    #barcepRegistrationQrModal .modal-body {
        min-height: 0;
        overflow-y: auto;
    }

    .dropdown-menu {
        max-width: calc(100vw - 24px);
        overflow-wrap: anywhere;
    }
}

/* =====================================================================
   BARCEP — v2 FIX (tambahan, taruh paling bawah file)
   Masalah di screenshot: form Pemeriksaan tertutup sidebar (label kiri
   terpotong). Konten yang bersaudara dengan sidebar kini selalu digeser,
   dan form Pemeriksaan diletakkan di tengah area kanan sidebar.
   Semua aturan di bawah hanya presentasi.
   ===================================================================== */

/* 1. Satu variabel offset: = lebar sidebar saat sidebar permanen,
      0 saat sidebar menjadi drawer (sama persis dengan breakpoint drawer di atas). */
:root { --barcep-offset: var(--barcep-sidebar-width); }

@media screen and (max-width: 1199.98px) {
    :root { --barcep-offset: 0px; }
}
@media screen and (min-width: 1200px) and (max-width: 1399.98px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    :root { --barcep-offset: 0px; }
}

/* 2. Semua konten yang menjadi saudara langsung sidebar digeser, apa pun class-nya. */
@media screen {
    .barcep-sidebar.barcep-sidebar ~ :where(:not(
        .barcep-sidebar-overlay, .modal, .modal-backdrop, .offcanvas,
        .toast-container, .swal2-container, .position-fixed, .fixed-top,
        .fixed-bottom, script, style, link, template, noscript, [hidden]
    )) {
        margin-left: var(--barcep-offset);
        max-width: calc(100% - var(--barcep-offset));
        min-width: 0;
    }
}

/* 3. overflow-x:hidden di html DAN body mematikan position:sticky (topbar).
      'clip' tetap mencegah scroll horizontal tanpa efek samping itu. */
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}

/* 4. Sidebar/overlay: header.php sudah mendefinisikan layout flex, scroll <nav>, dan overlay.
      Di sini hanya ilustrasi yang dikoreksi (lihat bawah). */

/* Laptop pendek (mis. 1366×768 dengan toolbar): ilustrasi dokter disembunyikan
   supaya menu & Logout tidak terpotong. */
@media screen and (min-width: 992px) and (max-height: 760px) {
    .barcep-sidebar-illustration { display: none !important; }
}

/* Input angka: sembunyikan spinner di layar sentuh agar tidak memakan lebar */
@media (hover: none) and (pointer: coarse) {
    input[type='number']::-webkit-inner-spin-button,
    input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
}

/* 7. Form Pemeriksaan (legacy: dirender sebagai saudara sidebar, bukan di dalam .barcep-main).
      Pada desktop: lebar maks 1080px, diletakkan di tengah area di sebelah kanan sidebar.
      Pada drawer (<1200px) aturan drawer di atas (!important) membuatnya selebar layar. */
@media screen {
    body.barcep-asn-page > .barcep-sidebar ~ .container.barcep-pemeriksaan-asn,
    .barcep-sidebar.barcep-sidebar ~ .barcep-pemeriksaan-asn {
        width: auto;
        max-width: min(1080px, calc(100% - var(--barcep-offset)));
        margin-left: max(var(--barcep-offset), calc((100% + var(--barcep-offset) - 1080px) / 2));
        margin-right: 0;
    }
}

/* 8. Lembar hasil (pemeriksaan/detail): kertas A4 diletakkan di tengah area
      di sebelah kanan sidebar. Aturan geser umum di atas (margin-left = lebar
      sidebar) menghapus margin:auto milik .sheet, sehingga lembar menempel kiri.
      Hanya layar; cetak/PDF memakai aturan @media print milik halaman itu. */
@media screen {
    .barcep-sidebar.barcep-sidebar ~ .sheet {
        width: min(210mm, calc(100% - var(--barcep-offset)));
        max-width: calc(100% - var(--barcep-offset));
        margin-left: max(var(--barcep-offset), calc((100% + var(--barcep-offset) - 210mm) / 2));
        margin-right: 0;
    }
}