/* Shared screen-only enhancements. Existing desktop and print styles stay authoritative. */
.mobile-nav-toggle { display: none; }

@media screen and (max-width: 1023px) {
    .responsive-app .page-shell { padding: 20px 14px 32px; }
    .responsive-app .page-container,
    .responsive-app .page-container > *,
    .responsive-app .row > *,
    .responsive-app .card,
    .responsive-app .card-body { min-width: 0; max-width: 100%; }
    .responsive-app :is(h1, h2, h3, h4, h5, .mini-value, .summary-value, .premium-value, .stat-value, .metric-value, .big-money) { overflow-wrap: anywhere; }
    .responsive-app :is(.table-responsive, .recipe-table-wrap, .revision-compare-scroll, .pm-quote-table-wrap, .stock-tab-panel) {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }
    /* Preserve every column, with readable widths instead of shrinking inputs. */
    .responsive-app .table-responsive > table:not(.analysis-table) { min-width: 720px; }
    .responsive-app .recipe-items-table { min-width: 1120px; }
    .responsive-app .teklif-items-table { min-width: 1419px; }
    .responsive-app .revision-compare-table { min-width: 1180px; }
    .responsive-app .stock-table { min-width: 800px; }
    .responsive-app :is(.table-responsive, .recipe-table-wrap):focus-visible { outline: 2px solid #258cfb; outline-offset: 2px; }
    .responsive-app .form-control,
    .responsive-app .form-select { max-width: 100%; }
    .responsive-app :is(.btn, .logout-btn, .nav-link, .setup-tab-btn, .stock-tab, .pdf-mini-btn) {
        min-height: 44px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .responsive-app :is(.btn-close) { min-width: 24px; min-height: 24px; padding: 10px; }
    .responsive-app :is(.premium-analysis-row, .stats-grid, .group-summary-grid, .crm-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .responsive-app :is(.notes-grid, .charts-grid, .dashboard-grid, .mini-grid) { grid-template-columns: minmax(0, 1fr); }
    .responsive-app .modal-dialog { max-width: calc(100% - 24px); margin: 12px auto; }
    .responsive-app .modal-content { max-height: calc(100dvh - 24px); overflow-y: auto; }
    .responsive-app .modal-body { min-height: 0; overflow-y: auto; }
    .responsive-app .modal-header { gap: 12px; }
    .responsive-app .modal-title { overflow-wrap: anywhere; min-width: 0; }
    .responsive-app .modal-footer { gap: 8px; }
    .responsive-app .pm-quote-overlay { padding: 12px; }
    .responsive-app .pm-quote-dialog { width: 100%; max-height: calc(100dvh - 24px); }
    .responsive-app .pm-quote-head { min-width: 0; }
    .responsive-app .pm-quote-title { font-size: 1.4rem; overflow-wrap: anywhere; }

    /* JS enhances this to a native modal dialog (focus containment and Escape). */
    .responsive-app.mobile-nav-ready .topbar-inner { min-height: 64px; padding: 10px 14px; }
    .responsive-app.mobile-nav-ready .brand-wrap { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
    .responsive-app.mobile-nav-ready .topbar :is(.main-nav, .right-tools) { display: none; }
    .responsive-app .mobile-nav-toggle:not([hidden]) {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        min-height: 44px; padding: 8px 12px; border: 1px solid var(--line);
        border-radius: 14px; background: var(--panel); color: var(--brand); font: inherit;
    }
    .responsive-app.mobile-nav-open { overflow: hidden; }
    .responsive-app .mobile-drawer {
        position: fixed; inset: 0 0 0 auto; margin: 0;
        width: min(390px, calc(100% - 24px)); max-width: none;
        height: 100dvh; max-height: 100dvh; padding: 18px;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
        border: 0; border-radius: 20px 0 0 20px;
        background: var(--panel); color: var(--brand); overflow-y: auto;
    }
    .responsive-app .mobile-drawer::backdrop { background: rgba(15, 23, 42, .48); }
    .responsive-app .mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
    .responsive-app .mobile-drawer .right-tools { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
    .responsive-app .mobile-drawer .user-chip { flex: 1; min-width: 0; overflow-wrap: anywhere; }
    .responsive-app .mobile-drawer .main-nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
    .responsive-app .mobile-drawer .main-nav > a,
    .responsive-app .mobile-drawer .nav-drop-toggle { display: block; width: 100%; text-align: left; padding: 12px; min-height: 44px; border-radius: 10px; }
    .responsive-app .mobile-drawer :is(.nav-drop-menu, .notif-menu) {
        position: static !important; transform: none !important; float: none;
        width: 100%; min-width: 0; max-width: 100%; margin: 4px 0;
        box-shadow: none;
    }
    .responsive-app .mobile-drawer .notif-wrap:has(.show) { width: 100%; }
    .responsive-app .mobile-drawer .dropdown-item { white-space: normal; overflow-wrap: anywhere; min-height: 44px; }
    .responsive-app .mobile-drawer .notif-head { flex-wrap: wrap; }
}

@media screen and (max-width: 767px) {
    .responsive-app .page-shell { padding: 16px 12px 28px; }
    .responsive-app .page-container > :is(.container, .container-fluid) { padding-left: 0; padding-right: 0; }
    .responsive-app :is(.container, .container-fluid) > .d-flex.justify-content-between,
    .responsive-app :is(.card-header, .filter-actions, .table-header, .log-table-header, .pager, .stock-tabs, .job-summary) { flex-wrap: wrap; gap: 12px; }
    .responsive-app .d-flex > :is(div, form) { min-width: 0; }
    .responsive-app :is(.container, .container-fluid) > .d-flex.justify-content-between > .d-flex { flex-wrap: wrap; }
    .responsive-app :is(.hero-box, .approval-box, .content-box, .box, .crm-panel) { padding: 16px; }
    .responsive-app :is(.premium-analysis-row, .stats-grid, .group-summary-grid, .crm-grid, .menu-perm-grid, .pdf-builder-grid, .pm-quote-grid) { grid-template-columns: minmax(0, 1fr); }
    .responsive-app .pdf-cover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .responsive-app .detail-premium-hero { padding: 16px !important; gap: 18px; }
    .responsive-app .detail-premium-identity { gap: 16px; }
    .responsive-app .detail-premium-icon { width: 58px; height: 76px; flex-basis: 58px; }
    .responsive-app .detail-premium-icon svg { width: 38px; height: 38px; }
    .responsive-app .detail-premium-title { font-size: 2rem; letter-spacing: -.5px; overflow-wrap: anywhere; }
    .responsive-app .detail-premium-actions { padding: 12px; gap: 10px; }
    .responsive-app .detail-premium-action { white-space: normal; min-height: 48px; padding: 10px; }
    .responsive-app .approval-box .action-grid,
    .responsive-app .approval-box .approval-submit-form { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
    .responsive-app .approval-box .action-grid > *,
    .responsive-app .approval-box .approval-action-btn { width: 100%; max-width: 100%; }
    .responsive-app .approval-box .approval-submit-form .form-select { min-width: 0; width: 100%; }
    .responsive-app :is(.form-control, .form-select, .pm-quote-table input, .pm-quote-table select) { font-size: 16px; min-height: 44px; }
    .responsive-app textarea.form-control { min-height: 96px; }
    .responsive-app .recipe-items-table :is(input, select) { font-size: 16px; min-height: 44px; }
    .responsive-app .teklif-items-table tbody :is(input, select, textarea) { font-size: 16px !important; }
    .responsive-app :is(.action-grid, .template-toolbar, .page-buttons, .stock-tabs) { gap: 8px; flex-wrap: wrap; }
    .responsive-app .hero-stats { min-width: 0; width: 100%; }
    .responsive-app .stock-wrap { max-width: 100%; }
    .responsive-app .stock-detail-table { table-layout: fixed; }
    .responsive-app .stock-detail-table td { padding: 10px; overflow-wrap: anywhere; }
    .responsive-app .stock-detail-table .label { width: 42%; }
    .responsive-app .stock-summary { display: block; width: 100%; margin: 0; padding: 10px 14px; }
    .responsive-app .job-summary-meta { margin-left: 0; }
    .responsive-app .recipe-sort-title,
    .responsive-app .recipe-revision-line { white-space: normal; overflow-wrap: anywhere; }
    .responsive-app .material-suggestion-item { min-height: 44px; overflow-wrap: anywhere; }
    .responsive-app .performance-card { padding: 12px; }
    .responsive-app .performance-board { grid-template-columns: 100px repeat(5, minmax(190px, 1fr)); min-width: 1120px; }
    .responsive-app .month-column { display: block; }
    .responsive-app .chart-card { padding: 16px; }
    .responsive-app .cari-delete-guide-checks > div { grid-template-columns: 26px minmax(0, 1fr); }
    .responsive-app .cari-delete-guide-checks strong { grid-column: 2; overflow-wrap: anywhere; }
}

@media screen and (max-width: 1023px) {
    body.responsive-login { overflow: auto; min-height: 100dvh; padding: 20px 0; background-attachment: scroll; }
    .responsive-login .login-hit-area { margin: auto; }
    .responsive-login .login-input { font-size: 16px; }
    .responsive-login .mobile-login-brand { display: block; color: #fff; text-align: center; margin-bottom: 24px; }
    .responsive-login .mobile-login-brand strong { display: block; font-size: 26px; margin-bottom: 6px; }
}