@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap");


/* ==================================================
   Global Variables
================================================== */

:root {

    /* Fonts */
    --font-family: "Oswald", sans-serif;

    --font-large: 20px;
    --font-medium: 17px;
    --font-small: 15px;
    --text-color: #202020;
    --theme-light: #94c7eb;
    --theme-dark: #20384b;


    /* Colors */
    --page-background: #202020;
    --app-background: var(--theme-light);

    --control-background: #eeeeee;
    --control-hover: #dddddd;
    --header-background: #dddddd;

    --border-color: #222222;
    --grid-border-color: #444444;

    --selected-background: #61ce70;

    --danger-background: #8b0000;

    --error-border: #cc0000;
    --error-background: #ffe5e5;

    --overlay-background: rgba(0, 0, 0, 0.55);


    /* Shape */
    --corner-radius: 15px;


    /* Shadow */
    --box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.35);


    /* Spacing */
    --spacing-small: 10px;
    --spacing-medium: 15px;
    --spacing-large: 25px;


    /* Control Sizes */
    --input-height: 40px;
    --button-height: 40px;
    --large-button-height: 60px;


    /* Results */
    --result-row-height: 40px;
    --results-height: 450px;


    /* Containers */
    --popup-width: 500px;
}


/* ==================================================
   Global Reset
================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;
}

body {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--page-background);

    font-family: var(--font-family);
    font-size: var(--font-small);
}


/* ==================================================
   App Shell
================================================== */

.app-shell {
    position: relative;

    width: min(1500px, calc(100vw - 20px));
    min-height: 700px;

    padding: var(--spacing-small);

    background: var(--app-background);

    border-radius: var(--corner-radius);
    box-shadow: var(--box-shadow);
}


/* ==================================================
   Pages
================================================== */

.page {
    width: 100%;
    min-height: 680px;
}

.active-page {
    display: flex;
}

.hidden-page {
    display: none;
}


/* ==================================================
   Typography
================================================== */

.page-title {
    margin: 0;

    font-size: var(--font-large);
    font-weight: 700;

    text-align: center;
}

button,
label {
    font-family: var(--font-family);
    font-size: var(--font-medium);
}

input,
select,
textarea {
    font-family: var(--font-family);
    font-size: var(--font-small);
}


/* ==================================================
   Shared Layout
================================================== */

.row {
    display: flex;
    align-items: center;
}

.column {
    display: flex;
    flex-direction: column;
}

.center-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-width {
    width: 100%;
}

.scrollable {
    overflow-y: auto;
}


/* ==================================================
   Shared Buttons
================================================== */

.button,
.action-button,
.back-button,
.search-bar-button {
    height: var(--button-height);

    padding: 0 var(--spacing-medium);

    background: var(--control-background);

    border: 1px solid var(--border-color);
    border-radius: var(--corner-radius);

    box-shadow: var(--box-shadow);

    font-family: var(--font-family);
    font-size: var(--font-medium);
    font-weight: 700;

    cursor: pointer;
}

.button:hover,
.action-button:hover,
.back-button:hover,
.search-bar-button:hover {
    background: var(--control-hover);
}

.large-button {
    height: var(--large-button-height);
}

button:disabled,
.disabled-button {
    opacity: 0.45;
    cursor: not-allowed;
}

.danger-button {
    background: var(--danger-background);
}


/* ==================================================
   Shared Inputs
================================================== */

.input,
.select,
.form-input,
.search-input {
    height: var(--input-height);

    padding: 0 var(--spacing-small);

    background: var(--control-background);

    border: 1px solid var(--border-color);
    border-radius: var(--corner-radius);

    font-family: var(--font-family);
    font-size: var(--font-small);

    text-align: center;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
}


/* ==================================================
   Shared Forms
================================================== */

.form-group {
    display: flex;
    flex-direction: column;

    gap: 5px;

    min-width: 0;
}

.form-group label {
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
}


/* ==================================================
   Shared Form Grids
================================================== */

.form-grid {
    display: grid;

    width: 100%;

    gap: var(--spacing-medium);
}

.form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.form-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}


/* ==================================================
   Currency Inputs
================================================== */

.currency-input {
    display: flex;
    align-items: center;

    height: var(--input-height);

    background: var(--control-background);

    border: 1px solid var(--border-color);
    border-radius: var(--corner-radius);
}

.currency-input span {
    padding-left: var(--spacing-small);

    font-size: var(--font-small);
    font-weight: 700;
}

.currency-input input {
    flex: 1;

    width: 100%;
    height: 100%;

    padding: 0 var(--spacing-small);

    background: transparent;

    border: none;
    outline: none;

    font-family: var(--font-family);
    font-size: var(--font-small);

    text-align: center;
}


/* ==================================================
   Shared Containers
================================================== */

.panel,
.results-list {
    background: var(--control-background);

    border: 1px solid var(--border-color);
    border-radius: var(--corner-radius);

    box-shadow: var(--box-shadow);
}


/* ==================================================
   Shared Search / Scan Row
================================================== */

.search-row {
    display: flex;
    align-items: center;

    width: 100%;

    gap: var(--spacing-small);
}

.search-row .search-input {
    flex: 1;
    width: auto;
}

.search-row .search-bar-button {
    flex-shrink: 0;
}


/* ==================================================
   Shared Action Rows
================================================== */

.action-row {
    display: flex;

    width: 100%;

    gap: var(--spacing-small);
}

.action-row .action-button {
    flex: 1;
}


/* ==================================================
   Shared Results
================================================== */

.results-list {
    width: 100%;
    height: var(--results-height);

    overflow: hidden;
}

.results-body {
    height: calc(100% - var(--result-row-height));

    overflow-y: auto;
}

.results-header,
.results-row {
    display: grid;

    width: 100%;
    min-height: var(--result-row-height);

    align-items: center;
}

.results-header {
    position: sticky;
    top: 0;

    z-index: 2;

    background: var(--header-background);

    font-weight: 700;

    border-bottom: 1px solid var(--border-color);
}

.results-row {
    border-bottom: 1px solid var(--border-color);

    cursor: pointer;
}

.results-row:hover {
    background: var(--control-hover);
}

.results-row.selected {
    background: var(--selected-background);

    font-weight: 700;
}

.results-header > div,
.results-row > div {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    height: var(--result-row-height);

    padding: 4px;

    border-right: 1px solid var(--grid-border-color);

    overflow: hidden;

    text-align: center;
}

.results-header > div:last-child,
.results-row > div:last-child {
    border-right: none;
}


/* ==================================================
   Shared States
================================================== */

.hidden {
    display: none !important;
}

.selected {
    background: var(--selected-background);
}

.required-error,
.form-input.required-error {
    border: 2px solid var(--error-border);

    background: var(--error-background);
}

.status-message {
    min-height: 20px;

    margin: 0;

    text-align: center;

    font-size: var(--font-medium);
    font-weight: 700;
}


/* ==================================================
   Popup
================================================== */

.popup {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--spacing-medium);

    background: var(--overlay-background);

    border-radius: var(--corner-radius);

    z-index: 1000;
}

.popup.hidden-popup {
    display: none;
}

.popup-panel {
    width: min(var(--popup-width), 100%);

    padding: var(--spacing-large);

    background: var(--app-background);

    border: 1px solid var(--border-color);
    border-radius: var(--corner-radius);

    box-shadow: var(--box-shadow);
}


/* ==================================================
   Popup Actions
================================================== */

.popup-actions {
    display: flex;
    justify-content: center;

    width: 100%;

    gap: var(--spacing-small);
}

.popup-actions .button,
.popup-actions .action-button {
    flex: 1;
}


/* ==================================================
   Home Page
================================================== */

#homePage {
    flex-direction: column;

    padding-top: 125px;

    gap: 25px;
}


/* ==================================================
   Home Button Layout
================================================== */

.home-actions {
    display: grid;

    width: 100%;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: var(--spacing-small);
    row-gap: 48px;
}

.home-action-button {
    width: 100%;
    min-height: var(--button-height);
    height: auto;
    padding: 16px;
    white-space: normal;
}

.account-page { flex-direction: column; align-items: center; gap: var(--spacing-large); padding-top: 24px; }
body.account-locked .app-shell > :not(#loginPage) { display: none !important; }
body.account-locked #mobileConnectionStatus { display: none; }
[hidden] { display: none !important; }
#loginPage { justify-content: center; min-height: min(700px, 90svh); }
#googleSignInButton { display: flex; justify-content: center; min-height: 44px; }
#loginStatus { overflow-wrap: anywhere; }
#retryLoginButton[hidden] { display: none; }
.account-panel { width: 100%; max-width: 600px; padding: 24px; border: 1px solid var(--border-color); border-radius: var(--corner-radius); background: var(--control-background); text-align: center; }
.account-panel .button { height: auto; min-height: var(--button-height); padding: 12px; }
.user-management-panel { text-align: left; }
.user-management-panel > .form-input { width: 100%; }
.user-permissions { margin: 16px 0; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--corner-radius); }
#managedUserPermissions { max-height: 40svh; overflow-y: auto; }
.user-permission-toggle { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 4px; min-height: 48px; border-bottom: 1px solid var(--border-color); }
.user-permission-toggle input { flex: none; width: 24px; height: 24px; accent-color: var(--selected-background); }
.user-permission-toggle:last-child { border-bottom: none; }

.inventory-search-page { flex-direction: column; gap: var(--spacing-small); padding-top: 24px; }
.inventory-search-controls { display: flex; gap: 16px; align-items: center; }
.inventory-search-controls input { flex: 1; min-width: 0; }
.inventory-search-page .inventory-search-list {
    height: min(var(--results-height), 45svh);
    min-height: 0;
    flex: none;
    overflow: auto;
}
.inventory-search-row {
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    touch-action: manipulation;
}
.inventory-search-controls .search-bar-button { width: 100px; }
.inventory-search-page .action-row { flex-wrap: wrap; }
#inventoryLoadStatus { white-space: pre-line; }


/* ==================================================
   Global Menu Button
================================================== */

.menu-button {
    position: relative;

    display: block;

    width: 120px;
    height: var(--button-height);

    margin-bottom: 10px;

    z-index: 100;
}


/* ==================================================
   Global Menu
================================================== */

.menu-panel {
    width: min(500px, 90%);

    padding: var(--spacing-large);

    background: var(--app-background);
}


/* ==================================================
   Global Menu Title
================================================== */

.menu-panel .page-title {
    margin-bottom: var(--spacing-large);
}


/* ==================================================
   Global Menu Buttons
================================================== */

.menu-actions {
    display: flex;
    flex-direction: column;

    width: 100%;

    gap: var(--spacing-medium);
}

.menu-actions .button {
    width: 100%;
}


/* ==================================================
   Global Menu Close Button
================================================== */

#closeGlobalMenuButton {
    margin-top: var(--spacing-small);
}


/* ==================================================
   Quick Scan Tire Page
================================================== */

#quickScannerPage {
    flex-direction: column;
    justify-content: center;

    width: 100%;
}


/* ==================================================
   Quick Scan Search
================================================== */

#quickScannerPage .search-row {
    margin-bottom: var(--spacing-medium);
}

#quickScannerPage .search-bar-button {
    width: 100px;
}


/* ==================================================
   Quick Scan Results
================================================== */

.quick-scanner-results-list {
    width: 100%;
    height: var(--results-height);

    margin-bottom: var(--spacing-medium);

    background: var(--control-background);

    border: 1px solid var(--border-color);
    border-radius: var(--corner-radius);

    box-shadow: var(--box-shadow);

    overflow-y: auto;
}


/* ==================================================
   Quick Scan Results Grid
================================================== */

.quick-scanner-results-header,
.quick-scanner-result-row {
    display: grid;

    grid-template-columns:
        1.2fr
        1.5fr
        1.2fr
        1.2fr
        1fr
        0.8fr
        0.8fr;

    width: 100%;
}


/* ==================================================
   Quick Scan Header
================================================== */

.quick-scanner-results-header {
    position: sticky;
    top: 0;

    z-index: 2;

    background: var(--header-background);

    font-weight: 700;

    border-bottom: 1px solid var(--border-color);
}


/* ==================================================
   Quick Scan Rows
================================================== */

.quick-scanner-result-row {
    border-bottom: 1px solid var(--border-color);

    cursor: pointer;
}

.quick-scanner-result-row:hover {
    background: var(--control-hover);
}

.quick-scanner-result-row.last-scanned {
    background: #ffe3a3;
    color: #202020;
    font-weight: 700;
    box-shadow: inset 5px 0 #bd7300;
}

.quick-scanner-result-row.selected {
    background: var(--selected-background);
    font-weight: 700;
}


/* ==================================================
   Quick Scan Cells
================================================== */

.quick-scanner-results-header > div,
.quick-scanner-result-row > div {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    height: var(--result-row-height);

    padding: 4px;

    border-right: 1px solid var(--grid-border-color);

    overflow: hidden;

    text-align: center;
}

.quick-scanner-results-header > div:last-child,
.quick-scanner-result-row > div:last-child {
    border-right: none;
}


/* ==================================================
   Quick Scan Actions
================================================== */

#quickScannerPage .action-row {
    margin-bottom: var(--spacing-medium);
}

#quickScannerPage .action-row:last-child {
    margin-bottom: 0;
}

#quickScannerPage .action-button {
    height: var(--button-height);
}


/* ==================================================
   Quick Scan Remove Button
================================================== */

#quickScannerRemoveButton:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}


/* ==================================================
   Quick Scan Add / Edit Tire Page
================================================== */

#quickScanAddTirePage {
    flex-direction: column;

    width: 100%;

}

#quickScanAddTirePage .page-title {
    margin-top: -30px;
    margin-bottom: var(--spacing-medium);
}


/* ==================================================
   Tire Identification
================================================== */

.quick-scan-tire-id {
    margin-bottom: var(--spacing-medium);
}


/* ==================================================
   SKU
================================================== */

.quick-scan-tire-sku {
    width: 100%;

    margin-bottom: var(--spacing-medium);
}

/* ==================================================
   Possible Matches
================================================== */

.quick-scan-tire-matches {
    width: 100%;

    margin-bottom: var(--spacing-medium);
}

.quick-scan-match-title {
    margin-bottom: 5px;

    font-size: var(--font-large);
    font-weight: 700;
}

.quick-scan-match-header,
.quick-scan-match-row {
    display: grid;

    grid-template-columns:
        1.2fr
        1.5fr
        1fr
        1.2fr
        1fr
        1fr
        0.8fr;

    width: 100%;
}

.quick-scan-match-header {
    padding-right: 15.5px;
    box-sizing: border-box;

    background: var(--header-background);

    font-weight: 700;

    border: 1px solid var(--border-color);
    border-bottom: none;

    border-radius: var(--corner-radius) var(--corner-radius) 0 0;
}

.quick-scan-match-body {
    height: 160px;

    background: var(--control-background);

    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--corner-radius) var(--corner-radius);

    overflow-y: scroll;
}

.quick-scan-match-row {
    min-height: var(--result-row-height);

    border-bottom: 1px solid var(--border-color);

    cursor: pointer;
}

.quick-scan-match-row:hover {
    background: var(--control-hover);
}

.quick-scan-match-row.selected {
    background: var(--selected-background);

    font-weight: 700;
}

.quick-scan-match-header > div,
.quick-scan-match-row > div {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    height: var(--result-row-height);

    padding: 4px;

    border-right: 1px solid var(--grid-border-color);

    overflow: hidden;

    text-align: center;
}

.quick-scan-match-header > div:last-child,
.quick-scan-match-row > div:last-child {
    border-right: none;
}

/* ==================================================
   Vendor / Bin
================================================== */

.quick-scan-tire-location {
    margin-bottom: var(--spacing-medium);
}


/* ==================================================
   Cost / Retail / On Hand
================================================== */

.quick-scan-tire-inventory {
    margin-bottom: var(--spacing-large);
}


/* ==================================================
   Actions
================================================== */

.quick-scan-tire-actions {
    margin-top: auto;
    margin-bottom: var(--spacing-medium);
}


/* ==================================================
   Quick Scan Comparison Page
================================================== */

#quickScanComparisonPage {
    flex-direction: column;
    justify-content: center;

    width: 100%;
}


/* ==================================================
   Comparison Summary
================================================== */

.quick-scan-comparison-summary {
    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    width: 100%;

    gap: var(--spacing-medium);

    margin-bottom: var(--spacing-medium);
}


.comparison-summary-item {
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 70px;

    background: var(--control-background);

    border: 1px solid var(--border-color);
    border-radius: var(--corner-radius);

    box-shadow: var(--box-shadow);
}


.comparison-summary-item span {
    font-size: var(--font-small);
}


.comparison-summary-item strong {
    font-size: var(--font-large);
}


/* ==================================================
   Comparison Results
================================================== */

.quick-scan-comparison-results {
    width: 100%;
    height: var(--results-height);

    margin-bottom: var(--spacing-medium);

    background: var(--control-background);

    border: 1px solid var(--border-color);
    border-radius: var(--corner-radius);

    box-shadow: var(--box-shadow);

    overflow-y: auto;
}


.quick-scan-comparison-header,
.quick-scan-comparison-row {
    display: grid;

    grid-template-columns:
        1.1fr
        1.4fr
        1.2fr
        1.2fr
        0.8fr
        0.7fr
        0.7fr
        0.8fr
        0.9fr;

    width: 100%;
}


.quick-scan-comparison-header {
    position: sticky;

    top: 0;

    z-index: 2;

    background: var(--header-background);

    font-weight: bold;
}


.quick-scan-comparison-header > div,
.quick-scan-comparison-row > div {
    padding: 8px;

    text-align: center;

    border-bottom: 1px solid var(--border-color);

    overflow: hidden;
    text-overflow: ellipsis;
}


.quick-scan-comparison-row {
    background: var(--control-background);
}


.quick-scan-comparison-row:hover {
    background: var(--control-background);
}


/* ==================================================
   Quick Scan Shopmonkey Review Page
================================================== */

#quickScanShopmonkeyPage {
    flex-direction: column;
    justify-content: center;

    width: 100%;
}


/* ==================================================
   Shopmonkey Review Summary
================================================== */

#quickScanShopmonkeyPage .quick-scan-comparison-summary {
    grid-template-columns: repeat(5, 1fr);
}


/* ==================================================
   Shopmonkey Review Results
================================================== */

#quickScanShopmonkeyPage .quick-scan-comparison-results {
    width: 100%;
    height: var(--results-height);

    margin-bottom: var(--spacing-medium);

    background: var(--control-background);

    border: 1px solid var(--border-color);
    border-radius: var(--corner-radius);

    box-shadow: var(--box-shadow);

    overflow-y: auto;
}


/* ==================================================
   Shopmonkey Review Actions
================================================== */

#quickScanShopmonkeyPage .action-row {
    width: 100%;

    margin-bottom: 0;
}

#quickScanShopmonkeyPage .action-button {
    flex: 1;
    height: var(--button-height);
}

/* ==================================================
   On Hand Stepper
================================================== */

.on-hand-stepper {
    display: grid;
    grid-template-columns: 75px 1fr 75px;
    width: 100%;
    height: var(--input-height);
    background: var(--control-background);
    border: 1px solid var(--border-color);
    border-radius: var(--corner-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.on-hand-stepper button,
.on-hand-stepper input {
    height: 100%;
    border: none;
    background: transparent;
    font-family: "Oswald", sans-serif;
    font-size: var(--font-medium);
    color: var(--text-color);
}

.on-hand-stepper button {
    cursor: pointer;
    font-size: var(--font-large);
}

.on-hand-stepper button:first-child {
    border-right: 1px solid var(--border-color);
}

.on-hand-stepper button:last-child {
    border-left: 1px solid var(--border-color);
}

.on-hand-stepper input {
    width: 100%;
    min-width: 0;
    text-align: center;
    outline: none;
    appearance: textfield;
}

.on-hand-stepper input::-webkit-inner-spin-button,
.on-hand-stepper input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

.on-hand-stepper:focus-within {
    outline: 2px solid var(--text-color);
    outline-offset: 1px;
}



/* ==================================================
   Quick Scan Rim Page
================================================== */

#quickScannerRimPage {
    flex-direction: column;
    justify-content: center;

    width: 100%;
}


/* ==================================================
   Quick Scan Rim Search
================================================== */

#quickScannerRimPage .search-row {
    margin-bottom: var(--spacing-medium);
}

#quickScannerRimPage .search-bar-button {
    width: 100px;
}


/* ==================================================
   Quick Scan Rim Results
================================================== */

#quickScannerRimPage .quick-scanner-results-list {
    margin-bottom: var(--spacing-medium);
}


/* ==================================================
   Quick Scan Rim Results Grid
================================================== */

.quick-scanner-rim-results-grid,
.quick-scanner-rim-result-row {
    grid-template-columns:
        1.2fr
        1fr
        1.5fr
        0.9fr
        0.7fr
        1.2fr
        0.8fr
        0.7fr
        0.7fr;
}


/* ==================================================
   Quick Scan Rim Actions
================================================== */

#quickScannerRimPage .action-row {
    margin-bottom: var(--spacing-medium);
}

#quickScannerRimPage .action-row:last-child {
    margin-bottom: 0;
}

#quickScannerRimPage .action-button {
    height: var(--button-height);
}


/* ==================================================
   Quick Scan Add / Edit Rim Page
================================================== */

#quickScanAddRimPage {
    flex-direction: column;

    width: 100%;
}

#quickScanAddRimPage .page-title {
    margin-top: -30px;
    margin-bottom: var(--spacing-medium);
}


/* ==================================================
   Rim Identification
================================================== */

.quick-scan-rim-id {
    grid-template-columns:
        repeat(5, 1fr);

    margin-bottom: var(--spacing-medium);
}


/* ==================================================
   Rim SKU / Category
================================================== */

.quick-scan-rim-sku {
    margin-bottom: var(--spacing-medium);
}


/* ==================================================
   Quick Scan Rim Possible Matches
================================================== */

#quickScanRimMatches {
    margin-bottom: var(--spacing-medium);
}

.quick-scan-rim-match-grid,
.quick-scan-rim-match-row {
    grid-template-columns:
        1.2fr
        1fr
        1.5fr
        0.9fr
        0.7fr
        1.2fr
        1fr
        0.8fr
        0.7fr;
}


/* ==================================================
   Quick Scan Rim Location
================================================== */

.quick-scan-rim-location {
    margin-bottom: var(--spacing-medium);
}


/* ==================================================
   Quick Scan Rim Inventory
================================================== */

.quick-scan-rim-inventory {
    margin-bottom: var(--spacing-medium);
}


/* ==================================================
   Quick Scan Rim Notes
================================================== */

.quick-scan-rim-notes {
    margin-bottom: var(--spacing-large);
}

.quick-scan-rim-notes textarea {
    height: 70px;

    padding: var(--spacing-small);

    resize: vertical;

    text-align: left;
}


/* ==================================================
   Quick Scan Rim Actions
================================================== */

.quick-scan-rim-actions {
    margin-top: auto;
    margin-bottom: var(--spacing-medium);
}


/* ==================================================
   Quick Scan Rim Comparison Page
================================================== */

#quickScanRimComparisonPage {
    flex-direction: column;
    justify-content: center;

    width: 100%;
}


/* ==================================================
   Quick Scan Rim Comparison Grid
================================================== */

.quick-scan-rim-comparison-grid,
.quick-scan-rim-comparison-row {
    grid-template-columns:
        1.1fr
        0.9fr
        1.3fr
        0.8fr
        1.1fr
        0.7fr
        0.7fr
        0.7fr
        0.8fr
        0.9fr;
}


/* ==================================================
   Quick Scan Rim Shopmonkey Review Page
================================================== */

#quickScanRimShopmonkeyPage {
    flex-direction: column;
    justify-content: center;

    width: 100%;
}


/* ==================================================
   Quick Scan Rim Shopmonkey Summary
================================================== */

#quickScanRimShopmonkeyPage .quick-scan-comparison-summary {
    grid-template-columns:
        repeat(5, 1fr);
}


/* ==================================================
   Quick Scan Rim Shopmonkey Actions
================================================== */

#quickScanRimShopmonkeyPage .action-row {
    width: 100%;

    margin-bottom: 0;
}

#quickScanRimShopmonkeyPage .action-button {
    flex: 1;
    height: var(--button-height);
}

/* Sortable Quick Scan headers */
.sortable-header { cursor: pointer; user-select: none; }
.sortable-header:hover { background: var(--control-hover); }
.sortable-header:focus-visible { outline: 2px solid var(--text-color); outline-offset: -3px; }
.sortable-header::after { content: "\2195"; margin-left: 5px; opacity: 0.45; }
.sortable-header[data-sort="ascending"]::after { content: "\2191"; opacity: 1; }
.sortable-header[data-sort="descending"]::after { content: "\2193"; opacity: 1; }

.inventory-cache-status {
    margin: 0 0 var(--spacing-small);
    font-size: var(--font-small);
}

.inventory-cache-status:empty { display: none; }
.inventory-cache-status.is-loading { display: flex; align-items: center; gap: 8px; }
.inventory-cache-status.is-loading::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-right-color: transparent;
    border-radius: 50%;
    animation: inventory-loading 800ms linear infinite;
}
@keyframes inventory-loading { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .inventory-cache-status.is-loading::before { animation: none; }
}

/* Home language slider */
.home-language-switch {
    position: absolute;
    top: var(--spacing-small);
    right: var(--spacing-small);
    min-height: var(--button-height);
}

.language-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-medium);
    font-size: var(--font-medium);
}

:is(#menuLanguageToggle, #accountLanguageToggle) {
    appearance: none;
    width: 58px;
    height: 30px;
    flex: 0 0 auto;
    margin: 0;
    border: 2px solid var(--border-color);
    border-radius: 18px;
    background: var(--control-background);
    cursor: pointer;
    position: relative;
}

:is(#menuLanguageToggle, #accountLanguageToggle)::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-color);
    transition: transform 150ms;
}

:is(#menuLanguageToggle, #accountLanguageToggle):checked::before { transform: translateX(28px); }
:is(#menuLanguageToggle, #accountLanguageToggle):focus-visible { outline: 3px solid var(--text-color); outline-offset: 3px; }

/* Appearance preferences */
:root[data-color="green"] { --theme-light: #b9ddc4; --theme-dark: #203c2d; }
:root[data-color="purple"] { --theme-light: #d4c5eb; --theme-dark: #352943; }
:root[data-color="neutral"] { --theme-light: #e1e4e8; --theme-dark: #30343b; }
:root[data-color="orange"] { --theme-light: #f4d4b4; --theme-dark: #493322; }
:root[data-color="teal"] { --theme-light: #b8dedb; --theme-dark: #203e3d; }
:root[data-color="rose"] { --theme-light: #ecc7d2; --theme-dark: #462b35; }

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
    color-scheme: dark;
    --page-background: #121519;
    --app-background: var(--theme-dark);
    --text-color: #f1f4f8;
    --control-background: #303943;
    --control-hover: #414e5c;
    --header-background: #303943;
    --border-color: #a0afbd;
    --grid-border-color: #7d8c9a;
    --selected-background: #285e3e;
    --error-border: #ff8585;
    --error-background: #582c32;
}

:root[data-font-size="small"] {
    --font-large: 18px; --font-medium: 15px; --font-small: 13px;
}
:root[data-font-size="large"] {
    --font-large: 24px; --font-medium: 21px; --font-small: 19px;
    --input-height: 48px; --button-height: 48px; --result-row-height: 48px;
}

body, button, input, select, textarea { color: var(--text-color); }

/* Bin selection stays visible while scanning products. */
#menuResetScanButton { margin-top: 18px; margin-bottom: 18px; }
.scan-bin-status { padding: var(--spacing-small); background: var(--theme-light); border-radius: 8px; font-weight: bold; }
.scan-bin-toggle {
    position: absolute;
    top: var(--spacing-small);
    right: var(--spacing-small);
    width: auto;
    min-width: 140px;
    height: var(--button-height);
    padding: 0 var(--spacing-medium);
    font-size: var(--font-medium);
    z-index: 100;
}
.search-input.waiting-for-bin::placeholder { font-weight: 700; }
.scan-bin-toggle[aria-pressed="true"] { outline: 3px solid var(--text-color); outline-offset: 2px; }
.select-last-button {
    position: absolute;
    top: var(--spacing-small);
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: var(--button-height);
    padding: 0 8px;
    font-size: var(--font-small);
    z-index: 100;
}
[hidden] { display: none !important; }

/* Settings */
#settingsPopup, #appearancePopup {
    position: fixed;
    border-radius: 0;
}

#scanHistorySelection {
    height: auto;
    min-height: 180px;
    width: 100%;
}

.settings-panel .popup-actions { margin-top: var(--spacing-medium); }

/* Fixed colors keep Restore Defaults readable across all themes. */
#restoreSettingsDefaultsButton {
    color: #202020;
    background: #eeeeee;
    border-color: #222222;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    color-scheme: light;
}

#restoreSettingsDefaultsButton:hover { background: #dddddd; }
#restoreSettingsDefaultsButton:focus-visible { outline: 3px solid #202020; outline-offset: 2px; }

#errorLogPopup {
    position: fixed;
    border-radius: 0;
}

.error-log-panel {
    width: min(850px, 100%);
    max-height: calc(100vh - 30px);
    overflow-y: auto;
}

#errorLogContent {
    max-height: 50vh;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: var(--spacing-medium);
    background: var(--control-background);
    border: 1px solid var(--border-color);
    font-size: var(--font-small);
}

.error-log-panel .popup-actions { flex-wrap: wrap; }

.settings-panel {
    max-height: calc(100vh - 2 * var(--spacing-medium));
    overflow-y: auto;
}

.settings-panel p {
    margin: var(--spacing-medium) 0 var(--spacing-large);
}

.settings-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-small);
    margin: var(--spacing-medium) 0 var(--spacing-large);
}

/* Spacing for the global menu and its settings popups. */
:is(.menu-panel, .settings-panel, .error-log-panel) .page-title {
    margin-bottom: 32px;
}

:is(.menu-panel, .settings-panel, .error-log-panel) .menu-actions {
    gap: 22px;
}

:is(.menu-panel, .settings-panel, .error-log-panel) .popup-actions {
    gap: 22px;
    margin-top: 22px;
}

:is(.menu-panel, .settings-panel, .error-log-panel) .button {
    height: calc(var(--button-height) - 4px);
    flex-shrink: 0;
}

.menu-panel {
    max-height: calc(100dvh - 2 * var(--spacing-medium));
    overflow-y: auto;
}

/* Close actions sit apart from the other menu controls. */
:is(.menu-panel, .settings-panel, .error-log-panel) .popup-actions {
    flex-wrap: wrap;
}

:is(#closeGlobalMenuButton, #closeSettingsButton, #closeAppDataButton,
    #closeAppearanceButton, #closeHistoryTypeButton, #closeScanHistoryButton,
    #closeErrorLogButton) {
    width: 75%;
    align-self: center;
    margin-top: 18px;
}

.popup-actions :is(#closeSettingsButton, #closeAppDataButton,
    #closeAppearanceButton, #closeScanHistoryButton, #closeErrorLogButton) {
    flex: 0 0 75%;
    margin-inline: 12.5%;
}
/* Local tire cleanup review */
#tireCleanupPage { flex-direction: column; align-items: center; gap: 12px; padding: 70px 24px 24px; box-sizing: border-box; }
#tireCleanupPage > p { max-width: 1100px; margin: 0; text-align: center; }
#tireCleanupPage > .action-row { width: 100%; max-width: 1100px; justify-content: center; flex-wrap: wrap; }
#tireCleanupPage > .action-row button { min-width: 180px; height: auto; min-height: var(--button-height); padding: 10px 16px; }
#cleanupFilter { width: min(100%, 600px); }
#cleanupReviewBody { width: 100%; max-width: 1100px; }
.cleanup-card { box-sizing: border-box; width: 100%; }
.cleanup-card { margin: 16px 0; padding: 16px; border: 1px solid #8c9ba5; border-radius: 12px; }
.cleanup-card pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; font: 14px monospace; }
.cleanup-card details { margin: 12px 0; }
.cleanup-card label { display: block; }
.cleanup-tab[aria-pressed="true"] { background: #496d58; }
#openTireCleanupButton { margin-top: 0; }
.cleanup-comparison { width: 100%; overflow-x: auto; margin: 16px 0; }
.cleanup-comparison table { width: 100%; border-collapse: collapse; min-width: 950px; font-size: 18px; }
.cleanup-comparison th, .cleanup-comparison td { border: 1px solid #8c9ba5; padding: 10px; text-align: left; vertical-align: top; }
.cleanup-comparison th { background: #303a45; }
.cleanup-comparison td:last-child { background: #496d58; }
.cleanup-note { width: 100%; box-sizing: border-box; margin: 8px 0; height: auto; text-align: left; padding: 12px; }
/* Keep touch layouts anchored while Android's keyboard resizes the viewport.
   Avoid nested sticky/shadow layers in the scrolling scanner on these devices. */
@media (hover: none) and (pointer: coarse) {
    body {
        display: block;
        min-height: 100svh;
    }
    .app-shell {
        margin: 10px auto;
        min-height: 0;
        box-shadow: none;
    }
    .page { min-height: 0; }
    #quickScannerPage, #quickScannerRimPage { justify-content: flex-start; }
    .quick-scanner-results-list,
    #quickScannerRimPage .quick-scanner-results-list {
        height: clamp(180px, 40svh, 450px);
        box-shadow: none;
    }
    button, input { box-shadow: none; }
}

/* Comfortable controls on Android phones and tablets, including keyboard resize. */
@media (pointer: coarse) {
    button { touch-action: manipulation; }
    button, .input, .select, .form-input, .search-input,
    .currency-input, .on-hand-stepper { min-height: 48px; }
    input, select, textarea { font-size: max(16px, var(--font-small)); }
    .quick-scanner-result-row { min-height: 48px; }
    .search-input { min-width: 0; }
    .popup-panel {
        max-height: calc(100dvh - 2 * var(--spacing-medium));
        overflow-y: auto;
    }
    .popup-actions { flex-wrap: wrap; }
}

/* Keep wide inventory columns inside their own horizontal scroll area. */
@media (max-width: 700px) {
    body { display: block; }
    .app-shell { min-height: 0; margin: 10px auto; }
    .page { min-height: 0; }
    .search-input { min-width: 0; }
    .scan-bin-toggle, .select-last-button {
        position: static;
        transform: none;
        width: 100%;
        margin-bottom: var(--spacing-small);
        min-height: max(48px, var(--button-height));
        height: auto;
        padding-block: 8px;
    }
    .action-row { flex-wrap: wrap; }
    .action-row .action-button { flex: 1 1 140px; height: auto; min-height: var(--button-height); padding-block: 8px; }
    .form-grid, .quick-scan-rim-id, .quick-scan-comparison-summary,
    #quickScanRimShopmonkeyPage .quick-scan-comparison-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .quick-scanner-results-list { overflow-x: auto; }
    .quick-scanner-results-header, .quick-scanner-result-row { min-width: 720px; }
    .quick-scanner-rim-results-grid, .quick-scanner-rim-result-row { min-width: 900px; }
    #tireCleanupPage { padding-inline: 0; }
    .popup-panel { padding: var(--spacing-medium); }
}

@media (max-width: 400px) {
    .form-grid, .quick-scan-rim-id { grid-template-columns: minmax(0, 1fr); }
}

.comparison-detail-changes { grid-column: 1 / -1; text-align: left; padding: 8px; overflow-wrap: anywhere; }
.mobile-scan-summary { display: none; }
.quick-scan-match-row { touch-action: manipulation; }
#bugReportPopup { position: fixed; border-radius: 0; }
.bug-report-description { display: block; width: 100%; height: 160px; min-height: 160px; text-align: left; padding: 12px; resize: vertical; border: 2px solid var(--border-color); }
.bug-report-screenshot-preview { width: 100%; max-height: 220px; object-fit: contain; }
#bugReportStatus { overflow-wrap: anywhere; }
.mobile-connection-status {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    margin: 0;
    padding: 12px;
    background: var(--error-background);
    color: #202020;
    text-align: center;
}

@media (max-width: 700px) {
    #homePage { padding-top: 24px; }
    .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 40px; }
    .home-action-button { min-height: 72px; }
    .mobile-scan-summary { display: block; margin: 0 0 10px; }
    :is(#quickScannerPage, #quickScannerRimPage, #quickScanComparisonPage,
        #quickScanRimComparisonPage, #quickScanShopmonkeyPage, #quickScanRimShopmonkeyPage) .action-button {
        height: auto;
        min-height: 48px;
        padding-block: 10px;
    }
    #quickScanAddTirePage .page-title, #quickScanAddRimPage .page-title { margin-top: 0; }
    .quick-scanner-results-header, .quick-scanner-rim-results-grid {
        min-width: 0;
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        padding-right: 0;
    }
    .quick-scanner-results-header > div { height: auto; min-height: 48px; overflow-wrap: anywhere; }
    .quick-scanner-result-row, .quick-scanner-rim-result-row,
    .quick-scan-match-row, .quick-scan-rim-match-row,
    .quick-scan-comparison-row, .quick-scan-rim-comparison-row {
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        padding: 12px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        margin-bottom: 10px;
    }
    :is(.quick-scanner-result-row, .quick-scan-match-row, .quick-scan-comparison-row) > div {
        display: block;
        height: auto;
        min-height: 36px;
        padding: 0;
        border: none;
        text-align: left;
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    [data-mobile-label]::before {
        content: attr(data-mobile-label);
        display: block;
        font-size: 13px;
        font-weight: 400;
        opacity: 0.8;
    }
    .quick-scanner-results-list { padding: 8px; }
    .quick-scan-match-header, .quick-scan-comparison-header {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    }
    .quick-scan-match-body { height: auto; max-height: 350px; padding: 8px; }
    .quick-scan-comparison-results { padding: 8px; }
}


/* Portrait tablets: spend the additional page height on inventory grids. */
@media (pointer: coarse) and (orientation: portrait) and (min-width: 600px) {
    .app-shell {
        display: flex;
        flex-direction: column;
        min-height: calc(100svh - 20px);
    }
    .menu-button { flex-shrink: 0; }
    :is(#homePage, #quickScannerPage, #quickScannerRimPage,
        #quickScanAddTirePage, #quickScanAddRimPage) {
        flex: 1;
        min-height: calc(100svh - 98px);
    }
    :is(#quickScannerPage, #quickScannerRimPage,
        #quickScanAddTirePage, #quickScanAddRimPage) > * { flex-shrink: 0; }
    :is(#quickScannerPage, #quickScannerRimPage) .quick-scanner-results-list {
        flex: 1 0 0;
        height: auto;
        min-height: 450px;
    }
    :is(#quickScanAddTirePage, #quickScanAddRimPage) .quick-scan-tire-matches {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
    }
    :is(#quickScanAddTirePage, #quickScanAddRimPage) .quick-scan-match-body {
        flex: 1 0 0;
        height: auto;
        min-height: 220px;
        max-height: none;
    }
}

.activity-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.activity-filters label { display:flex; flex-direction:column; gap:6px; }
.activity-history-rows { max-height:50vh; overflow-y:auto; margin:16px 0; }
.activity-history-entry { padding:12px; border-bottom:1px solid currentColor; overflow-wrap:anywhere; }
.activity-history-entry pre { white-space:pre-wrap; font-size:0.85em; }
@media(max-width:600px) { .activity-filters { grid-template-columns:1fr; } }

/* App Data and scan history retain their controls as full routed screens. */
.routed-data-page > .popup-panel { width:100%; max-height:none; overflow:visible; }
.routed-data-page { position:relative; min-width:0; max-width:100%; }
.routed-data-page > .popup-panel, .routed-data-page .menu-actions { min-width:0; max-width:100%; }
.routed-data-page .button { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }

/* Compact menu header and options; keep touch targets at least 44px. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.menu-panel { width:min(460px,calc(100vw - 24px)); }
.menu-header { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:12px; margin-bottom:20px; }
.menu-header .language-switch { justify-self:center; margin:0; gap:8px; font-size:var(--font-small); }
.menu-icon-button { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--border-color); border-radius:10px; color:var(--text-color); background:var(--control-background); cursor:pointer; }
.menu-icon-button svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.menu-icon-button:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.menu-panel .compact-menu-actions, .account-menu-panel .compact-menu-actions { align-items:center; gap:10px; }
.menu-panel .compact-menu-actions .button, .account-menu-panel .compact-menu-actions .button { width:min(100%,300px); height:auto; min-height:44px; padding:8px 14px; font-size:var(--font-medium); line-height:1.25; }
.account-menu-panel { width:min(420px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; }

/* Shared search, scan and editor layout. */
body.quick-scan-editor-layout-active #globalMenuButton { display:none; }
body.quick-scan-editor-layout-active .app-shell { min-height:0; }
.compact-quick-scan-editor { min-height:0; gap:10px; }
.compact-workflow-page .page-title { display:none; }
.quick-scan-editor-toolbar[hidden] { display:none; }
.quick-scan-editor-toolbar { display:grid; grid-template-columns:72px minmax(0,1fr) 72px; align-items:center; gap:8px; margin:0 0 9px; }
.quick-scan-editor-toolbar .button { width:100%; min-height:40px; height:40px; padding:6px; font-size:var(--font-small); }
.quick-scan-editor-heading { margin:0; text-align:center; font-size:var(--font-medium); line-height:1.25; font-weight:600; }
.compact-workflow-page .workflow-field-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.compact-quick-scan-editor input::placeholder { color:#969ca5; opacity:1; }
.compact-quick-scan-editor select:has(option:checked[value=""]) { color:#969ca5; }
.compact-quick-scan-editor .form-grid, .compact-quick-scan-editor .form-group { margin-top:0; margin-bottom:0; }
.compact-quick-scan-editor .action-row { margin-top:6px; }
.compact-quick-scan-editor .quick-scan-match-title { display:none; }
.compact-quick-scan-editor .quick-scan-match-body:not(:has(.quick-scan-match-row)) { display:block; }
.match-viewport-shell { position:relative; width:100%; min-width:0; }
.match-empty-overlay { position:absolute; left:0; right:0; display:grid; place-items:center; pointer-events:none; color:#969ca5; font-size:var(--font-medium); text-align:center; }
.match-empty-overlay[hidden] { display:none; }
.scan-compact-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:min(100%,600px); margin-inline:auto; }
.scan-compact-actions :is(.button,.action-button) { position:static; transform:none; z-index:auto; min-width:0; width:100%; min-height:40px; height:auto; padding:8px 14px; margin:0; font-size:var(--font-medium); overflow-wrap:anywhere; }
.scan-compact-actions > :last-child { grid-column:1 / -1; width:calc((100% - 12px)/2); justify-self:center; }
.scan-finalize-dialog { width:min(90vw,420px); padding:20px; border:1px solid var(--border-color); border-radius:var(--corner-radius); background:var(--control-background); color:var(--text-color); text-align:center; }
.scan-finalize-dialog::backdrop { background:rgb(0 0 0 / 65%); }
.scan-finalize-dialog .action-button { display:block; width:100%; height:auto; min-height:44px; margin-top:10px; padding:8px; }

/* One horizontal viewport for both match headers and rows. */
:is(#quickScanAddTirePage,#quickScanAddRimPage).compact-quick-scan-editor .quick-scan-tire-matches { display:block; min-width:0; max-width:100%; overflow-x:auto; }
#quickScanAddTirePage.compact-quick-scan-editor { --match-width:1820px; --match-columns:140px 200px 130px 160px 140px 140px 110px 190px 140px 150px 320px; }
#quickScanAddRimPage.compact-quick-scan-editor { --match-width:2170px; --match-columns:100px 150px 140px 200px 130px 110px 160px 130px 140px 110px 190px 140px 150px 320px; }
.compact-quick-scan-editor .quick-scan-match-header,
.compact-quick-scan-editor .quick-scan-match-body { min-width:var(--match-width); }
.compact-quick-scan-editor .quick-scan-match-header,
.compact-quick-scan-editor .quick-scan-match-row { grid-template-columns:var(--match-columns); gap:0; }
.compact-quick-scan-editor .quick-scan-match-row { padding:0; margin:0; border-radius:0; border:none; }
:is(#quickScanAddTirePage,#quickScanAddRimPage).compact-quick-scan-editor .quick-scan-match-body { flex:none; height:var(--match-height,220px); min-height:220px; max-height:none; width:var(--match-width); padding:0; overflow-y:auto; }
.compact-quick-scan-editor .quick-scan-match-row > div { min-width:0; padding:6px; text-align:center; overflow-wrap:anywhere; }
.compact-quick-scan-editor .quick-scan-match-row [data-mobile-label]::before { display:none; }
.compact-quick-scan-editor .quick-scan-match-body:not(:has(.quick-scan-match-row)) { min-width:var(--match-width); width:var(--match-width); }
.rim-match-image { display:flex !important; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.rim-match-image img { width:80px; height:70px; object-fit:contain; }
.quick-scan-notes-field { width:100%; }
.quick-scan-notes-field textarea { resize:vertical; min-height:60px; }
#signedInIdentity { overflow-wrap:anywhere; text-align:center; margin:12px 0 20px; }
.compact-workflow-page { padding-top:0; }
:is(#quickScannerPage,#quickScannerRimPage,#quickScanAddTirePage,#quickScanAddRimPage).compact-workflow-page { min-height:0; }
.compact-workflow-page:is(#quickScannerPage,#quickScannerRimPage,#tireInventorySearchPage,#rimInventorySearchPage,#quickScanComparisonPage,#quickScanRimComparisonPage,#quickScanShopmonkeyPage,#quickScanRimShopmonkeyPage) .workflow-grid { height:var(--workflow-height,350px); min-height:220px; max-height:none; flex:none; padding:0; }
.compact-workflow-page textarea::placeholder { color:#969ca5; opacity:1; }
.compact-workflow-page .workflow-bottom-status { order:100; margin:4px 0 0; font-size:var(--font-small); }
:is(#quickScanAddTirePage,#quickScanAddRimPage).compact-workflow-page :is(.form-input,.currency-input,.on-hand-stepper) { height:44px; min-height:44px; }
:is(#quickScanAddTirePage,#quickScanAddRimPage).compact-workflow-page :is(.currency-input,.on-hand-stepper) input { height:100%; min-height:0; }
:is(#quickScanAddTirePage,#quickScanAddRimPage).compact-workflow-page .on-hand-stepper button { height:44px; min-height:44px; }
:is(#quickScanAddTirePage,#quickScanAddRimPage).compact-workflow-page textarea.form-input { height:52px; min-height:52px; padding:6px 8px; }
:is(#quickScanAddTirePage,#quickScanAddRimPage).compact-workflow-page textarea.form-input:focus { height:120px; min-height:120px; }
.compact-workflow-page .workflow-grid { max-width:100%; min-width:0; overflow:auto; }
.compact-workflow-page .workflow-grid :is(.quick-scanner-results-header,.quick-scanner-result-row,.quick-scan-comparison-header,.quick-scan-comparison-row) { display:grid; grid-template-columns:var(--workflow-columns); width:var(--workflow-width); min-width:var(--workflow-width); gap:0; padding:0; margin:0; }
.compact-workflow-page .workflow-grid :is(.quick-scanner-result-row,.quick-scan-comparison-row) > div { min-width:0; padding:6px; overflow-wrap:anywhere; }
.compact-workflow-page .workflow-grid [data-mobile-label]::before { display:none; }
@media(max-width:360px) { .menu-header { gap:6px; }.menu-header .language-switch { gap:5px; font-size:13px; } }