/* Jenny Dev readability v1. Screen styles only; receipts keep their own layout. */
@media screen {
    body:not(:has(.invoice)) {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        line-height: 1.45;
        color: #252329;
    }
    body:not(:has(.invoice)) .header { padding: 16px 20px; }
    body:not(:has(.invoice)) h1 { font-size: 28px; line-height: 1.25; }
    body:not(:has(.invoice)) .header h1 { margin: 0; }
    body:not(:has(.invoice)) h2 { font-size: 22px; line-height: 1.3; margin-top: 0; margin-bottom: 12px; }
    body:not(:has(.invoice)) h3 { font-size: 18px; line-height: 1.35; margin-top: 0; margin-bottom: 8px; }
    body:not(:has(.invoice)) p { margin-top: 8px; margin-bottom: 10px; }
    body:not(:has(.invoice)) .container { margin-top: 20px; margin-bottom: 24px; }
    body:not(:has(.invoice)) :is(.section, .card, .panel, main > section, .login-box) {
        padding: 20px;
        margin-bottom: 18px;
    }
    body:not(:has(.invoice)) :is(.profile-heading, .details-grid) { padding: 20px 24px; }
    body:not(:has(.invoice)) :is(.summary-grid, .details-grid) { gap: 18px; }
    body:not(:has(.invoice)) .summary-grid > div { min-width: 0; }
    body:not(:has(.invoice)) .detail-section address { line-height: 1.5; }
    body:not(:has(.invoice)) :is(.help, .hint, .muted) { color: #55515a; line-height: 1.45; }
    body:not(:has(.invoice)) :is(small, .help, .hint) { font-size: 14px; }

    /* Keep account controls and actions large enough for touch, with less empty space. */
    body:not(:has(.invoice)) .jb-language-bar { padding: 8px 20px; line-height: 1.35; }
    body:not(:has(.invoice)) .jb-page-navigation { gap: 8px; margin-bottom: 16px; }
    body:not(:has(.invoice)) > .jb-page-navigation { margin-top: 16px; }
    body:not(:has(.invoice)) :is(.actions, .page-actions, .toolbar) { gap: 8px; margin-bottom: 16px; }
    body:not(:has(.invoice)) :is(.button, a.jb-navigation-button, a.back, a.back-link) {
        box-sizing: border-box;
        min-height: 44px;
        padding: 9px 14px;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
        text-align: center;
    }
    body:not(:has(.invoice)) :is(input, select, textarea, button) { font-family: inherit; font-size: 16px; }
    /* Override older per-page 13–15px fields so mobile input text stays readable. */
    body:not(:has(.invoice)) :is(input, select, textarea) { font-size: 16px !important; }
    body:not(:has(.invoice)) :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea) {
        box-sizing: border-box;
        min-height: 44px;
        padding: 9px 10px;
        border-color: #aaa4ad;
        line-height: 1.4;
    }
    body:not(:has(.invoice)) .password-field input { padding-right: 52px; }
    body:not(:has(.invoice)) input::placeholder,
    body:not(:has(.invoice)) textarea::placeholder { color: #68616c; opacity: 1; }
    body:not(:has(.invoice)) :is(label, legend) { line-height: 1.4; }
    body:not(:has(.invoice)) .search-form { gap: 8px; margin-bottom: 16px; }
    body:not(:has(.invoice)) .search-form input { min-width: 0; }
    body:not(:has(.invoice)) :is(a, button, input, select, textarea):focus-visible {
        outline: 3px solid #1b64b0;
        outline-offset: 2px;
    }

    /* Full text stays available; wide tables retain horizontal scrolling. */
    body:not(:has(.invoice)) table { font-size: 16px; line-height: 1.4; }
    body:not(:has(.invoice)) table th { font-size: 15px; font-weight: 700; line-height: 1.35; padding: 10px; }
    body:not(:has(.invoice)) table td { font-size: 16px; padding: 9px 10px; font-variant-numeric: tabular-nums; }
    body:not(:has(.invoice)) table:not(:has(input, select, button)) > tbody > tr:nth-child(even):not([class]) {
        background-color: #faf8fa;
    }
    body:not(:has(.invoice)) table:not(:has(input, select, button)) > tbody > tr:not([class]):hover { background-color: #f8eef3; }
    body:not(:has(.invoice)) table td a:not(.button):not(.jb-navigation-button) {
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
    }
    body:not(:has(.invoice)) table td a:not(.button):hover { text-decoration: underline; }
    body:not(:has(.invoice)) :is(.status, .badge, .type) { font-size: 14px; line-height: 1.35; }
    body:not(:has(.invoice)) .table-wrapper { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }

    /* Keep the existing sticky paging and return-to-row behavior. */
    body:not(:has(.invoice)) :is(.jb-orders-pager, .jb-customers-pager, .jb-list-pager) {
        padding: 10px;
        gap: 8px 12px;
        font-size: 16px;
        line-height: 1.4;
    }
    body:not(:has(.invoice)) :is(.jb-orders-summary, .jb-customers-summary, .jb-list-summary, .pagination-summary) {
        font-size: 14px;
        line-height: 1.4;
        color: #55515a;
    }
    body:not(:has(.invoice)) .pagination { line-height: 1.4; gap: 8px; }
}

@media screen and (max-width: 700px) {
    body:not(:has(.invoice)) .header { padding: 14px 12px; }
    body:not(:has(.invoice)) h1 { font-size: 24px; }
    body:not(:has(.invoice)) h2 { font-size: 21px; }
    body:not(:has(.invoice)) .container { margin-top: 16px; }
    body:not(:has(.invoice)) :is(.section, .card, .panel, main > section, .login-box) { padding: 16px; }
    body:not(:has(.invoice)) :is(.profile-heading, .details-grid) { padding: 16px; }
    body:not(:has(.invoice)) .jb-language-bar { padding: 8px 12px; }
    body:not(:has(.invoice)) .table-wrapper > table {
        display: table;
        min-width: 640px;
        overflow: visible;
        white-space: normal;
    }
    body:not(:has(.invoice)) .table-wrapper > table th { white-space: nowrap; }
}