/* Shared mobile ergonomics loaded after page-level styles. */
@media (max-width: 760px) {
    :root {
        --primary: #059669 !important;
        --primary-hover: #047857 !important;
    }

    html {
        width: 100%;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    body {
        width: 100%;
        overflow-x: hidden;
        font-size: 16px;
    }

    body,
    button,
    input,
    select,
    textarea {
        letter-spacing: 0 !important;
    }

    header {
        position: sticky;
        top: 0;
    }

    .nav-bar {
        min-height: 58px;
        padding: 7px 10px !important;
        gap: 9px !important;
    }

    .nav-logo-large img {
        width: 56px !important;
        max-height: 48px;
    }

    .nav-island {
        min-width: 0;
        max-width: calc(100vw - 86px);
        gap: 5px !important;
        padding: 5px 7px !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-island::-webkit-scrollbar,
    .dashboard-nav::-webkit-scrollbar,
    .workspace-actions::-webkit-scrollbar {
        display: none;
    }

    .nav-dashboard-link {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 6px 8px !important;
        font-size: .84rem !important;
        white-space: nowrap;
    }

    .nav-login-icon {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px;
    }

    main,
    .content {
        width: 100%;
        min-width: 0;
    }

    .content {
        padding: 14px 11px 28px !important;
    }

    .flash-stack {
        margin-bottom: 11px;
    }

    .msg,
    .notice,
    .success-message,
    .error-messages {
        border-radius: 7px !important;
        padding: 10px 11px !important;
        font-size: .88rem !important;
        line-height: 1.45;
    }

    .footer-inner {
        padding: 14px 12px 18px !important;
        font-size: .78rem !important;
        line-height: 1.55;
    }

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

    input,
    select,
    textarea,
    .field-group input,
    .field-group select,
    .field-group textarea {
        min-height: 44px !important;
        max-width: 100%;
        padding: 9px 11px !important;
        border-radius: 7px !important;
        font-size: 16px !important;
    }

    textarea {
        min-height: 96px !important;
    }

    button,
    .btn-primary,
    .btn-secondary,
    .btn-gradient,
    .btn-outline,
    .btn-chip,
    .command-button,
    input[type="submit"] {
        min-height: 44px;
        border-radius: 7px !important;
        font-size: .9rem !important;
    }

    .btn-primary,
    .btn-gradient,
    .btn-create,
    .renewal-form button {
        border-color: #059669 !important;
        background: #059669 !important;
        color: #fff !important;
        box-shadow: 0 7px 18px rgba(5, 150, 105, .2) !important;
    }

    .btn-primary:hover,
    .btn-gradient:hover,
    .btn-create:hover,
    .renewal-form button:hover {
        background: #047857 !important;
    }

    .tab-btn.active,
    .invoice-number {
        color: #047857 !important;
        border-bottom-color: #059669 !important;
    }

    .field-group input:focus,
    .field-group select:focus,
    .field-group textarea:focus,
    .form-group input:focus,
    .form-group textarea:focus {
        border-color: #059669 !important;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, .14) !important;
    }

    .icon-only,
    .modal-close,
    .password-toggle,
    .workspace-tool.icon-only {
        min-width: 40px !important;
        width: 40px !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 !important;
    }

    .panel,
    .card,
    .ph-card,
    .ph-panel,
    .admin-card,
    .account-panel,
    .invoice-form-container,
    .login-card,
    .stat-card,
    .summary-item {
        border-radius: 8px !important;
    }

    .panel,
    .card,
    .admin-card,
    .invoice-form-container {
        padding: 15px !important;
    }

    .panel-header,
    .owner-header,
    .history-header,
    .account-header,
    .ph-card-header {
        gap: 10px !important;
    }

    .panel-title,
    .admin-title,
    .owner-title {
        font-size: 1.12rem !important;
        line-height: 1.3;
    }

    .mgr-grid,
    .perf-grid,
    .dashboard-grid,
    .form-grid,
    .form-row,
    .invoice-grid,
    .pos-grid,
    .scan-section,
    .stock-paths,
    .category-row,
    .permission-grid,
    .report-metrics,
    .report-columns {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 11px !important;
    }

    .stats-layout,
    .summary-grid,
    .stats-summary,
    .ph-grid,
    .pos-stock-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .stat-box,
    .ph-stat,
    .summary-item,
    .stat-card {
        min-width: 0;
        min-height: 88px !important;
        padding: 12px !important;
    }

    .stat-value,
    .summary-value,
    .ph-stat strong,
    .stat-card-value {
        overflow-wrap: anywhere;
        font-size: 1.05rem !important;
    }

    .action-grid,
    .action-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .action-grid > *,
    .action-buttons > * {
        width: 100% !important;
        min-width: 0;
        justify-content: center;
        white-space: normal !important;
        text-align: center;
    }

    .table-wrapper,
    .table-wrap,
    .table-scroll,
    .data-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .invoice-table-wrapper,
    .items-table-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: .84rem !important;
    }

    .table th,
    .table td,
    .ph-table th,
    .ph-table td,
    .admin-table th,
    .admin-table td,
    .account-table th,
    .account-table td {
        padding: 9px 10px !important;
    }

    .modal-backdrop {
        align-items: flex-end !important;
        padding: 8px 8px 0 !important;
    }

    .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 12px) !important;
        margin: 0 !important;
        padding: 15px !important;
        border-radius: 10px 10px 0 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .modal-header {
        position: sticky;
        top: -15px;
        z-index: 3;
        margin: -15px -15px 14px !important;
        padding: 13px 15px !important;
        background: #fff;
    }

    .registration-form {
        padding: 0 !important;
    }

    .modal-card .field-group[style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .choice-card {
        min-height: 82px !important;
        padding: 10px !important;
    }

    .owner-actions,
    .form-actions,
    .report-controls {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    .owner-actions > *,
    .form-actions > *,
    .report-controls > * {
        width: 100%;
    }

    .filter-bar {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    .segmented,
    .dashboard-nav,
    .workspace-actions {
        max-width: 100%;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    .segment,
    .dashboard-nav a,
    .workspace-tool {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .account-header {
        align-items: flex-start !important;
        margin-bottom: 15px !important;
        padding-bottom: 15px !important;
    }

    .account-logo {
        width: 58px !important;
        height: 58px !important;
        flex: 0 0 58px;
        border-radius: 8px !important;
    }

    .account-info h1 {
        font-size: 1.2rem !important;
        overflow-wrap: anywhere;
    }

    .page-header,
    .pos-header {
        align-items: stretch !important;
        flex-direction: column !important;
        margin-bottom: 15px !important;
    }

    .page-title,
    .pos-title {
        font-size: 1.25rem !important;
        line-height: 1.3;
    }

    .invoice-list-container,
    .pos-container {
        width: 100%;
        padding: 0 !important;
    }

    .scan-card {
        padding: 14px !important;
        border-radius: 8px !important;
    }

    .scanned-item {
        align-items: flex-start !important;
        gap: 9px;
    }

    .ph-hero {
        padding: 16px !important;
        border-radius: 8px !important;
    }

    .ph-hero::after {
        display: none !important;
    }

    .ph-card-header,
    .report-head {
        padding: 13px !important;
    }

    .back-to-top {
        right: 10px !important;
        bottom: 10px !important;
    }

    .single-page-layout,
    .packages-grid,
    .home-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .hero-section,
    .packages-section {
        border-radius: 8px !important;
    }
}

@media (max-width: 420px) {
    .content {
        padding-inline: 9px !important;
    }

    .stats-layout,
    .summary-grid,
    .stats-summary,
    .ph-grid,
    .pos-stock-strip {
        gap: 7px !important;
    }

    .choice-grid,
    .owner-actions,
    .form-actions,
    .report-controls {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .panel,
    .card,
    .admin-card,
    .invoice-form-container {
        padding: 13px !important;
    }
}