/* Shared portal rules. Complex tables opt into scrolling, record lists into cards. */
[hidden] { display: none !important; }
.layout { grid-template-columns: 260px minmax(0, 1fr); }
.layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }
.content, .card, .detail-item, .erp-form-field, fieldset { min-width: 0; }
.content { overflow-wrap: anywhere; }
.content :is(img, video, iframe) { max-width: 100%; }
.content :is(h1, h2, h3, .detail-value, .page-note, .company-notes-input) { overflow-wrap: anywhere; }
.mobile-portal-header, .sidebar-close, .mobile-filter-toolbar,
.mobile-card-controls, .mobile-card-controls-header { display: none; }
.mobile-filter-panel { display: contents; }
.mobile-filter-summary { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; }
.mobile-actions-placeholder { display: contents; }
.mobile-search-field { min-width: 0; }
.mobile-search-bundle { display: contents; }
.sidebar-brand { min-width: 0; overflow-wrap: anywhere; }
table[data-mobile-layout="scroll"] { overflow-wrap: normal; }
table[data-mobile-layout="scroll"] :is(.num, .numeric) { white-space: nowrap; }

@media (max-width: 980px) {
    .layout, .layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }
    .portal-navigation-ready .layout {
        min-height: calc(100vh - var(--mobile-navigation-height, 56px));
        min-height: calc(100dvh - var(--mobile-navigation-height, 56px));
    }
    /* Navigation remains available in the page flow until enhancement succeeds. */
    .sidebar { position: static; transform: none; width: auto; max-width: none; max-height: none; }
    .portal-navigation-ready .sidebar {
        position: fixed; inset: 0 auto 0 0;
        width: min(320px, calc(100vw - 48px)); max-width: calc(100vw - 48px);
        height: 100vh; height: 100dvh; max-height: 100dvh;
        padding-top: max(14px, env(safe-area-inset-top));
        padding-bottom: max(14px, env(safe-area-inset-bottom));
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        transform: translateX(-100%);
    }
    .portal-navigation-ready .sidebar.is-open { transform: translateX(0); }
    .portal-navigation-ready .mobile-portal-header {
        display: flex; align-items: center; gap: 12px;
        position: sticky; top: 0; z-index: 1000;
        min-height: 56px; padding: 6px max(14px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left));
        padding-top: calc(6px + env(safe-area-inset-top));
        background: var(--surface); border-bottom: 1px solid var(--border);
    }
    .mobile-portal-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
    .portal-navigation-ready .sidebar-close { display: block; margin: 0 0 12px auto; }
    .sidebar :is(.sidebar-link, .sidebar-link-add, .sidebar-group-toggle),
    .mobile-portal-header button, .sidebar-close { min-height: 44px; }
    .sidebar-link-add { min-width: 44px; }
    .sidebar-overlay { cursor: pointer; }
    :is(.file-preview-dialog, .task-modal-dialog) { max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); }
    .content :is(.company-overview-grid, .batch-assignment-row, .partner-row-editor) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 640px) {
    html { scroll-padding-top: calc(72px + env(safe-area-inset-top)); }
    .content { padding: 14px max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left)); }
    .content :is(.card-grid, .detail-grid, .erp-form-grid, .company-kpi-grid,
        .company-overview-grid, .target-expand-grid, .product-gallery, .market-metrics,
        .sales-calendar-grid, .sales-calendar-kpi-grid, .sales-calendar-source-grid,
        .location-map-filter-grid, .composite-steps, .composite-summary-grid,
        .composite-editor-grid, .tracker-grid),
    .competitive-form .form-grid, .management :is(.fields, .stats) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .span-2, .erp-form-grid > * { grid-column: auto !important; }
    .page-header-main, .page-actions, .form-actions, .table-actions { min-width: 0; max-width: 100%; }
    .content :is(.card, .market-dashboard, .product-card, .report-card, .competitive-form) { padding: 14px; }
    .content :is(input, select, textarea), .auth-shell :is(input, select, textarea) { font-size: 16px; }
    :is(button, .btn, .pagination-link, .letter-selector-link, summary) {
        min-height: 44px; min-width: 44px; white-space: normal;
    }
    :is(.btn, .pagination-link, .letter-selector-link) { box-sizing: border-box; padding-top: 12px; padding-bottom: 12px; }
    .content :is(.fk-ms-chip-remove, .fk-ms-toggle, .erp-dp-clear-btn, .erp-dp-icon-btn,
        .erp-fu-remove, .target-expand-toggle) { min-width: 44px; min-height: 44px; }
    .content :is(.fk-ms-option, .erp-fu-dropzone) { min-height: 44px; }
    .content input:not(.fk-ms-native):not(.erp-date-native):not(.erp-fu-native),
    .content select:not(.fk-ms-native), .content textarea { max-width: 100%; }
    .content :is(.fk-ms-panel, .erp-dp-popover) { max-width: calc(100vw - 28px); }
    .fk-ms-sheet-header { padding-top: calc(10px + env(safe-area-inset-top)); }
    .fk-ms-sheet-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    .fk-ms-sheet { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .erp-dp-sheet {
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        max-height: 100dvh;
    }
    .content :is(input[type="checkbox"], input[type="radio"]) { width: 22px; height: 22px; flex-shrink: 0; }
    .content label:has(> input[type="checkbox"]), .content label:has(> input[type="radio"]) {
        min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
    }
    /* Seven calendar days (plus week selection) must still fit a 320px phone. */
    :is(.erp-dp-day-btn, .erp-dp-week-btn) { min-width: 0; min-height: 44px; }
    .auth-shell { padding: 14px; align-items: flex-start; }
    .auth-shell .card { padding: 16px; }
    .auth-shell .page-title { font-size: 26px; overflow-wrap: anywhere; }
    .auth-shell pre, .content pre { max-width: 100%; overflow-x: auto; }
    fieldset { margin-inline: 0; padding: 12px; }

    .mobile-filters-ready { display: grid !important; gap: 12px; }
    .mobile-filter-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .mobile-filter-panel { display: grid; gap: 12px; min-width: 0; }
    .mobile-filter-panel > :is(.erp-form-grid, .product-filters) { grid-template-columns: minmax(0, 1fr); }
    .mobile-search-field { width: 100%; }
    .mobile-search-bundle { display: block; }

    /* One DOM preserves form ownership, selection, inline editing and row permissions. */
    table.mobile-cards-ready { display: block; width: 100%; min-width: 0 !important; }
    table.mobile-cards-ready > thead {
        position: absolute; width: 1px; height: 1px; padding: 0;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    table.mobile-cards-ready > tbody { display: grid; gap: 12px; width: 100%; }
    table.mobile-cards-ready > tbody > tr {
        display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0;
        border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
    }
    table.mobile-cards-ready > tbody > tr > :is(td, th) {
        display: block; width: auto !important; min-width: 0; padding: 8px 12px;
        overflow-wrap: anywhere; white-space: normal; border-bottom: 0; text-align: left;
    }
    table.mobile-cards-ready > tbody > tr > [data-mobile-label]::before {
        content: attr(data-mobile-label); display: block; font-size: 12px;
        color: var(--muted); font-weight: 600; margin-bottom: 3px;
    }
    table.mobile-cards-ready > tbody > tr > .mobile-card-title { font-size: 17px; font-weight: 600; }
    table.mobile-cards-ready > tbody > tr:not(.mobile-card-expanded) > .mobile-card-secondary { display: none; }
    table.mobile-cards-ready > tbody > tr > .mobile-card-controls { display: flex; gap: 8px; flex-wrap: wrap; }
    table.mobile-cards-ready .target-expand-panel { padding: 12px; }

    .mobile-actions-placeholder { display: block; min-height: var(--mobile-actions-height, 0px); }
    [data-mobile-form-actions].mobile-actions-pinned {
        position: fixed; inset: auto 0 0; z-index: 950; margin: 0 !important;
        display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
        padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
        background: var(--surface); border-top: 1px solid var(--border);
        box-shadow: 0 -4px 14px rgb(0 0 0 / 8%); max-width: 100%;
    }
    html { scroll-padding-bottom: calc(var(--portal-mobile-actions-space, 0px) + 12px); }
    :is(body.sidebar-open, body.file-preview-open, body.task-modal-open) .mobile-actions-pinned { visibility: hidden; }
    .location-map-canvas-wrap, .location-map-canvas {
        min-height: 240px !important; height: clamp(240px, 60dvh, 560px);
    }
    .location-map-popup { min-width: 0; max-width: calc(100vw - 80px); }
    .management .chart-row { grid-template-columns: minmax(0, 1fr); }
    .management iframe { height: 65dvh; }
    .product-filters > * { max-width: 100%; }
    :is(.file-preview-dialog, .task-modal-dialog) {
        width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
        max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin: max(12px, env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
    }
    .file-preview-dialog { height: calc(100dvh - 24px); }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar-overlay { transition: none; }
}