html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* One outer gutter across phone/tablet layouts, inside the native safe area. */
@media screen and (max-width:991.98px) {
    :root { --y-mobile-gutter:16px; --y-mobile-panel-padding:16px; }
    :root body .yegan-app,
    :root body .yegan-app.sidebar-closed { padding-inline:var(--y-mobile-gutter); }
    :root body .yw > .yw-container,
    :root body .company-profile-shell > main.container {
        width:100%; max-width:100%; min-width:0; padding-inline:var(--y-mobile-gutter);
    }
    :root body .public-shell > .app-content { min-width:0; padding-inline:var(--y-mobile-gutter); }
    :root body :is(.company-edition-scope, .yegan-content form, .yw-container form, .company-profile-shell form) { min-width:0; }
    :root body fieldset { min-inline-size:0; }

    /* Floating forms keep the same gutter; side sheets become inset dialogs on phones. */
    :root body .modal { --bs-modal-margin:var(--y-mobile-gutter); }
    :root body .modal-dialog {
        width:calc(100% - 2 * var(--y-mobile-gutter)); max-width:none; margin:var(--y-mobile-gutter);
    }
    :root body .finance-dialog-backdrop { padding:var(--y-mobile-gutter); }
    :root body .finance-dialog { min-width:0; max-height:calc(100dvh - 2 * var(--y-mobile-gutter)); }
    :root body .finance-dialog-side {
        position:relative; inset:auto; width:100%; height:auto; border-radius:16px;
    }
    :root body :is(.modal-header, .modal-body, .modal-footer, .finance-dialog > header, .finance-dialog-body) {
        padding-inline:var(--y-mobile-panel-padding);
    }
}

/* Authentication uses a compact, single-row header and form-only mobile layout. */
@media screen and (max-width:767.98px) {
    :root body .yegan-public-auth .yegan-topbar {
        display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;
        min-height:60px; gap:12px; padding:8px 10px; margin:0;
    }
    :root body .yegan-public-auth .yegan-topbar .topbar-heading {
        display:flex; flex:0 0 auto; align-items:center; min-width:0;
    }
    :root body .yegan-public-auth .yegan-topbar .topbar-actions {
        display:flex; flex:0 0 auto; flex-wrap:nowrap; align-items:center; gap:6px; width:auto;
    }
    :root body .yegan-public-auth .yegan-topbar-brand { padding:0; margin:0; }
    :root body .yegan-public-auth .auth-hero-col { display:none; }
    :root body .yegan-public-auth .auth-layout-shell {
        display:block; padding:16px 0; flex:1; min-height:0;
    }
    :root body .yegan-public-auth .auth-layout-shell > .app-content {
        width:calc(100% - 2 * var(--y-mobile-gutter)); margin-inline:auto;
    }
    :root body .yegan-public-auth .auth-section { padding:0; margin:0; }
    :root body .yegan-public-auth .auth-section > .container { padding-inline:0; }
    :root body .yegan-public-auth .auth-section > .container > .row { margin-block:0; row-gap:0; }
    :root body .yegan-public-auth .auth-section > .container > .row > [class*="col-"] { margin-top:0; }
    :root body .yegan-public-auth .auth-card { min-height:0; padding:20px; }
    :root body .yegan-public-auth .auth-layout-shell:has(.auth-login-grid) { display:flex; flex-direction:column; }
    :root body .yegan-public-auth .auth-layout-shell:has(.auth-login-grid) > .app-content { margin-block:auto; }
}

/* Shared mobile density. Screen-only: desktop geometry, browser zoom and print
   styles retain their existing sizing. A narrow desktop window is not a phone.
   Do not scale the root or the whole UI. */
@media screen and (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
    :root {
        --y-mobile-body: .7875rem;
        --y-mobile-input: max(1rem, 16px);
        --y-mobile-touch: 44px;
        --y-mobile-space: var(--y-mobile-panel-padding);
    }

    body { font-size: var(--y-mobile-body); line-height: 1.6; }
    :root body :is(h1, .h1) { font-size: 1.35rem; line-height: 1.4; }
    :root body :is(h2, .h2, .page-heading h2, .company-page-title) { font-size: 1.17rem; line-height: 1.45; }
    :root body .topbar-heading h1 { font-size: .9rem; }
    :root body :is(h3, .h3) { font-size: .99rem; line-height: 1.5; }
    :root body :is(h4, .h4, h5, .h5, h6, .h6) { font-size: .9rem; line-height: 1.5; }
    :root body :is(.form-label, .form-check-label, .nav-text, .dropdown-item, .yegan-select-option) { font-size: var(--y-mobile-body); }
    :root body :is(.form-text, .validation-message, .invalid-feedback) { font-size: .73125rem; line-height: 1.5; }
    :root body :is(.stat-card strong, .finance-kpi strong, .finance-balance-tile strong, .commerce-finance-value) { font-size: 1.125rem; }

    /* Icons shrink visually without shrinking their button's hit area. */
    :root body :is(.fa-solid, .fa-regular, .fa-brands, .fas, .far, .fab, .bi),
    :root body :is(button, .btn, .nav-link, .sidebar-link) > svg { scale: .9; }

    /* Text entry remains 16px to avoid focus zoom on mobile browsers. */
    :root body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    :root body :is(select, textarea, .form-control, .form-select, .yegan-select-trigger) {
        font-size: var(--y-mobile-input) !important;
        min-height: var(--y-mobile-touch) !important;
        max-width: 100%;
        line-height: 1.5;
    }
    :root body :is(textarea, textarea.form-control) { min-height: 88px !important; }
    :root body :is(button, .btn, .app-btn, .page-link, .nav-link, .dropdown-item, .sidebar-link, .sidebar-sublink, summary, [role="button"], .yegan-select-option) {
        min-height: var(--y-mobile-touch) !important;
        min-width: var(--y-mobile-touch) !important;
        font-size: var(--y-mobile-body);
        touch-action: manipulation;
    }
    :root body :is(.btn, .app-btn, .nav-link, .page-link) {
        padding: .45rem .675rem;
        line-height: 1.4;
        white-space: normal;
    }
    :root body :is(.btn-close, .icon-action, .pi-reference-button) {
        box-sizing: border-box; width: 44px; height: 44px; flex-shrink: 0;
    }
    :root body .btn-close { padding: 12px; }
    :root body :is(.form-check, label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) { min-height: 44px; align-content: center; }
    :root body :is(.form-check-label, .form-switch > label) { padding-block: .45rem; }

    :root body :is(.yegan-content, .yegan-main, .workspace-content) { min-width: 0; }
    :root body .yegan-content { padding-block: .72rem .9rem; }
    :root body :is(.yegan-card, .card-body, .panel-card, .report-results, .report-filters, .commerce-deal-header, .finance-section, .pi-workspace .pi-section, .coa-editor) { padding: var(--y-mobile-space); }
    :root body :is(.page-heading, .report-heading, .commerce-deal-title, .coa-editor-heading) { gap: .675rem; margin-block-end: .9rem; flex-wrap: wrap; }
    :root body :is(.page-heading-actions, .commerce-header-actions, .report-heading-actions, .form-actions, .coa-editor-actions, .modal-footer) { gap: .45rem; flex-wrap: wrap; }
    :root body :is(.commerce-deal-summary, .company-details) { gap: .9rem; padding-block: .9rem; }
    :root body :is(.g-3, .g-4, .g-5) { --bs-gutter-x: .9rem; --bs-gutter-y: .72rem; }

    :root body .p-4 { padding: var(--y-mobile-panel-padding) !important; }
    :root body .p-5 { padding: 2.16rem !important; }
    :root body :is(.trade-tabbar, .commerce-tab-content) { padding-inline: .72rem; }
    :root body .trade-tab { padding-block: .72rem; }
    :root body :is(.yegan-pagination, .pagination-actions) { flex-wrap: wrap; max-width: 100%; gap: .315rem; }
    :root body .report-table-scroll { max-width: 100%; overflow-x: auto; }

    /* Only form fields collapse: keep report/chart/data grids intact. */
    :root body form .row > :is([class^="col-"], [class*=" col-"]):not(table *) { width: 100%; flex: 0 0 100%; }
    :root body :is(.coa-form-grid, .finance-person-fields > .row, .report-filter-grid, .report-filter-grid.no-project, .report-filter-grid.is-inventory) { grid-template-columns: minmax(0, 1fr); gap: .72rem; }
    :root body :is(.input-group, .yegan-select, .coa-field) { min-width: 0; }
    :root body :is(.table-responsive, .table-wrap, .yegan-table-wrap, .totals-table-wrap) { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
    :root body :is(.table, .yegan-table) { --y-table-cell-padding: .54rem .585rem; --y-table-header-padding: .585rem; }
    :root body :is(.table, .yegan-table) :is(th, td) { font-size: .7875rem; }
    :root body :is(.contract-report-table, .pi-lines-table) :is(th, td) { padding: .585rem; }
    :root body .totals-table tbody td { font-size: .84375rem; }

    :root body :is(.modal-header, .modal-body, .modal-footer, .finance-dialog-body, .finance-dialog-header) { padding:var(--y-mobile-panel-padding); }
    :root body .modal-dialog { margin:var(--y-mobile-gutter); max-width:calc(100% - 2 * var(--y-mobile-gutter)); }
    :root body :is(.modal-body, .finance-dialog-body) { overflow-y: auto; overscroll-behavior: contain; }
    :root body .yegan-topbar { --header-control-size: 44px; grid-template-columns: 44px minmax(0, 1fr); }
    :root body .yegan-header-controls { --header-control-size: 44px; }
    :root body .yegan-topbar :is(.user-button, .yegan-mode-button, .remittance-menu > button, .mobile-menu-button) { width: 44px; height: 44px; }
    :root body :is(.breadcrumb, .yegan-footer) { font-size: .73125rem; }
}

/* Keep appearance touch targets independent of their visual colour swatches. */
:root body .yegan-appearance { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
:root body .yegan-appearance .theme-switcher { display:flex; flex:0 0 auto; gap:2px; }
:root body .yegan-appearance .theme-dot {
    display:inline-grid; place-items:center; flex:0 0 44px;
    width:44px; height:44px; min-width:44px; min-height:44px;
    padding:0; border:0; border-radius:10px; background:transparent; box-shadow:none;
}
.theme-dot-swatch { display:block; width:20px; height:20px; border-radius:50%; }
.theme-dot.blue .theme-dot-swatch { background:#0f7fa8; }
.theme-dot.maroon .theme-dot-swatch { background:#7e263d; }
.theme-dot.orange .theme-dot-swatch { background:#a84f0d; }
.theme-dot.teal .theme-dot-swatch { background:#0f766e; }
.theme-dot.selected .theme-dot-swatch { outline:2px solid var(--y-primary); outline-offset:3px; }
.theme-dot:focus-visible { outline:2px solid var(--y-primary); outline-offset:1px; }
.topbar-theme-picker > summary { display:grid; place-items:center; cursor:pointer; list-style:none; width:44px; height:44px; }
.topbar-theme-picker > summary::-webkit-details-marker { display:none; }
.topbar-theme-panel { position:absolute; inset-inline-end:.75rem; top:calc(100% + 8px); padding:12px; border:1px solid var(--y-border); border-radius:14px; background:var(--y-surface); box-shadow:var(--y-shadow-md); z-index:1050; max-width:calc(100vw - 32px); }
:root body .yegan-topbar .topbar-theme-panel .theme-switcher { display:flex; }

/* Tabs must retain their intrinsic text width while the strip scrolls. */
:root body .wc .wc-tabs { display:flex; flex-wrap:nowrap; min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; gap:18px; -webkit-overflow-scrolling:touch; }
:root body .wc .wc-tabs > button { display:inline-flex; flex:0 0 auto; width:auto; min-width:max-content; white-space:nowrap; padding-inline:12px; align-items:center; justify-content:center; line-height:1.5; }

@media screen and (max-width:767.98px) {
    .yl-header .yl-header-actions { position:relative; }
    .yl-header .yl-theme-picker { position:static; }
    .yl-header .yl-theme-panel { inset-inline:0; top:calc(100% + 8px); min-width:0; width:auto; max-width:100%; padding:12px; }
    :root body .yl-theme-panel .yegan-appearance { justify-content:center; gap:8px; }
    .yegan-topbar .topbar-actions { min-width:0; flex-wrap:wrap; }
    :root body :is(.table-responsive, .table-wrap, .yegan-table-wrap, .report-table-scroll) { min-width:0; overflow-x:auto; max-width:100%; }
    :root body :is(.table-responsive, .table-wrap, .yegan-table-wrap, .report-table-scroll) > table { table-layout:auto; width:max-content; min-width:100%; }
    :root body :is(.table-responsive, .table-wrap, .yegan-table-wrap, .report-table-scroll) > table :is(th,td) { white-space:nowrap; word-break:normal; overflow-wrap:normal; }
    :root body :is(.table-responsive, .table-wrap, .yegan-table-wrap, .report-table-scroll) > table :is(.transaction-description-cell, .description-cell, .report-description) { white-space:normal; min-width:14rem; max-width:24rem; overflow-wrap:break-word; }
}