/* ─── RESET & BASE ──────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

:root {
    --green:       #4CAF50;
    --green-dk:    #388E3C;
    --orange:      #F5A623;
    --orange-dk:   #D4891A;
    --red:         #E53935;
    --red-dk:      #C62828;
    --blue:        #2196F3;
    --blue-dk:     #1976D2;
    --purple:      #7C4DFF;
    --purple-lt:   #EDE7F6;
    --grey-100:    #F5F5F5;
    --grey-200:    #EEEEEE;
    --grey-300:    #E0E0E0;
    --grey-500:    #9E9E9E;
    --grey-700:    #616161;
    --text-dark:   #212121;
    --text-mid:    #616161;
    --text-light:  #9E9E9E;
    --warn-bg:     #FFF3E0;
    --note-bg:     #F0F4FF;
    --radius:      10px;
    --radius-lg:   16px;
    --shadow:      0 2px 8px rgba(0,0,0,0.10);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.15);
}

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #fff;
    color: var(--text-dark);
    font-size: clamp(14px, 4vw, 20px);
    line-height: 1.4;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
input, button, select, textarea {
    font-family: inherit;
    font-size: clamp(14px, 4vw, 20px); /* prevents iOS zoom */
}

/* ─── PAGE LAYOUT SHELL ─────────────────────────────────────── */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.08);
}

/* ─── TOP HEADER / BRAND BAR ────────────────────────────────── */
.header {
    background: #fff;
    border-bottom: 1px solid var(--grey-300);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
	position: -webkit-sticky;
    top: 0;
    z-index: 100;
}
.header .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.header .brand img {
    height: 60px;
    max-width: 120px;
    object-fit: contain;
}
.header .brand-text {
    font-size: clamp(11px, 3.25vw, 16px);
    color: var(--text-mid);
    line-height: 1.2;
}
.header .brand-text strong {
    display: block;
    color: var(--text-dark);
    font-size: clamp(12px, 3.5vw, 18px);
}
.header .version {
    font-size: clamp(9px, 2.75vw, 14px);
    color: var(--text-light);
    text-align: right;
    line-height: 1.3;
}

/* ─── ORDER LIST HEADER (picker code bar) ──────────────────── */
.picker-bar {
    background: var(--grey-100);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid var(--grey-300);
}
.picker-bar .picker-left { display: flex; flex-direction: column; gap: 2px; }
.picker-bar .picker-label { font-size: clamp(10px, 3vw, 15px); color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }
.picker-bar .picker-code { font-size: clamp(28px, 8.5vw, 44px); font-weight: 700; line-height: 1; }
.picker-bar .change-picker { color: var(--blue); font-size: clamp(12px, 3.5vw, 18px); margin-top: 2px; cursor: pointer; }
.btn-mytotals {
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: clamp(11px, 3.25vw, 16px);
    font-weight: 600;
    cursor: pointer;
}

/* ─── SUBTITLE / INSTRUCTION ROW ───────────────────────────── */
.subtitle-bar {
    padding: 10px 16px;
    font-size: clamp(13px, 3.75vw, 19px);
    color: var(--text-mid);
    text-align: center;
    border-bottom: 1px solid var(--grey-200);
}
.subtitle-bar .reload {
    color: var(--blue);
    font-size: clamp(12px, 3.5vw, 18px);
    float: right;
    cursor: pointer;
}
.subtitle-bar .reload:active { opacity: 0.6; }

/* ─── ORDER CARDS (order list screen) ───────────────────────── */
.order-card {
    border-bottom: 1px solid var(--grey-200);
    padding: 16px;
    cursor: pointer;
    background: #fff;
    transition: background 0.15s;
    display: flex;
    align-items: stretch;
    gap: 12px;
}
.order-card:active { background: var(--grey-100); }
.order-card .card-body { flex: 1; }
.order-card .card-arrow {
    color: var(--grey-500);
    font-size: clamp(18px, 5.5vw, 28px);
    align-self: center;
}

.order-card .order-num { font-size: clamp(22px, 7vw, 36px); font-weight: 300; color: var(--text-dark); }
.order-card .order-num span { font-size: clamp(13px, 3.75vw, 19px); color: var(--text-light); margin-left: 10px; }
.order-card .order-meta { margin-top: 4px; font-size: clamp(16px, 5vw, 26px); color: var(--text-mid); }
.order-card .order-start {
    color: var(--blue);
    font-size: clamp(18px, 5.5vw, 28px);
    font-weight: 300;
    margin-top: 6px;
}
.order-card .order-tags { text-align: right; }
.order-card .order-tags .tag-pallets { font-weight: 700; font-size: clamp(12px, 3.5vw, 18px); }
.order-card .order-tags .tag-items { font-size: clamp(11px, 3.25vw, 16px); color: var(--text-mid); }
.order-card .tag-freight { color: var(--green); font-weight: 600; font-size: clamp(16px, 5vw, 26px); margin-top: 4px; }
.order-card .tag-urgent { color: var(--red); font-weight: 700; font-size: clamp(11px, 3.25vw, 16px); }

/* ─── PICK LIST SCREEN ──────────────────────────────────────── */
.order-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--grey-300);
    background: #fff;
}
.order-header .oh-top-row { display: flex; justify-content: space-between; align-items: center; }
.order-header .oh-order { font-size: clamp(12px, 3.5vw, 18px); }
.order-header .oh-order strong { font-size: clamp(13px, 3.75vw, 19px); }
.order-header .oh-delivery { font-size: clamp(11px, 3vw, 14px); font-weight: 700; color: #E53935; text-align: right; }
.order-header .oh-customer { font-size: clamp(11px, 3.25vw, 16px); color: var(--text-mid); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Notes banner */
.notes-banner {
    background: var(--note-bg);
    border-bottom: 1px solid #D0DEFF;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.notes-banner > div { min-width: 0; flex: 1; overflow: hidden; }
.notes-banner .notes-text { font-size: clamp(12px, 3.5vw, 18px); font-weight: 600; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-banner .notes-label { font-size: clamp(9px, 2.75vw, 14px); color: var(--text-light); text-transform: uppercase; }
.btn-view-notes {
    background: var(--purple);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: clamp(12px, 3.5vw, 18px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-view-notes:active { background: #6a3de8; }

/* Sort header row */
.sort-row {
    display: grid;
    grid-template-columns: 90px 1fr 70px 70px 42px 80px;
    gap: 4px;
    padding: 8px 16px 6px;
    font-size: clamp(10px, 3vw, 15px);
    color: var(--blue);
    font-weight: 600;
    border-bottom: 2px solid var(--grey-200);
    background: var(--grey-100);
    position: sticky;
	position: -webkit-sticky;
    top: 0;
    z-index: 50;
}
.sort-row .col { display: flex; align-items: center; gap: 3px; cursor: pointer; }
.sort-row .col .arrow { font-size: clamp(8px, 2.5vw, 13px); }
.sort-row .col-qty, .sort-row .col-status { color: var(--text-mid); font-weight: 500; }

/* Pick line rows */
.pick-list { flex: 1; overflow-y: auto; }
.pick-line {
    display: grid;
    grid-template-columns: 90px 1fr 70px 70px 42px 80px;
    gap: 4px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--grey-200);
    cursor: pointer;
    background: #fff;
    transition: background 0.15s;
	-webkit-overflow-scrolling: touch;
}
.pick-line:active { background: var(--grey-100); }
.pick-line .pl-face { font-size: clamp(18px, 5.5vw, 28px); font-weight: 600;white-space: nowrap; }
.pick-line .pl-code { font-size: clamp(15px, 4.5vw, 23px); font-weight: 500; }
.pick-line .pl-weight { font-size: clamp(15px, 4.5vw, 23px); color: var(--text-mid); text-align: center; }
.pick-line .pl-size { font-size: clamp(15px, 4.5vw, 23px); color: var(--green); text-align: center; }
.pick-line .pl-qty  { font-size: clamp(15px, 4.5vw, 23px); font-weight: 600; text-align: center; }
.pick-line .pl-status { font-size: clamp(15px, 4.5vw, 23px); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.pick-line .pl-arrow { color: var(--grey-500); font-size: clamp(15px, 4.5vw, 23px); justify-self: end; }

/* Status colours */
.status-not-picked   { color: var(--red); }
.status-picked       { color: var(--green); }
.status-partial      { color: var(--orange); }
.status-unavailable  { color: var(--red); }

/* Row highlight colours based on status */
.pick-line.picked    { background: #E8F5E9; }
.pick-line.partial   { background: #FFF8E1; }
.pick-line.unavailable { background: #FFEBEE; }

/* Code colour flags — some stock codes display in orange/red */
.code-flag-orange { color: var(--orange); font-weight: 600; }
.code-flag-red    { color: var(--red);    font-weight: 600; }

/* ─── BOTTOM STATUS BAR (pick list) ─────────────────────────── */
.bottom-bar {
    background: #fff;
    border-top: 2px solid var(--grey-200);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
	position: -webkit-sticky;
    bottom: 0;
    z-index: 50;
}
.bottom-bar .bb-back { color: var(--red); font-size: clamp(14px, 4vw, 20px); font-weight: 600; cursor: pointer; }
.bottom-bar .bb-back:active { opacity: 0.6; }
.bottom-bar .bb-notes { color: var(--blue); font-size: clamp(11px, 3.25vw, 16px); font-weight: 700; text-align: center; cursor: pointer; line-height: 1.3; }
.bottom-bar .bb-notes:active { opacity: 0.6; }
.bottom-bar .bb-progress { font-size: clamp(12px, 3.5vw, 18px); color: var(--text-mid); text-align: center; }
.bottom-bar .bb-progress .est { font-size: clamp(10px, 3vw, 15px); color: var(--text-light); }
.bottom-bar .bb-finish { color: var(--blue); font-size: clamp(20px, 6vw, 30px); font-weight: 700; cursor: pointer; }
.bottom-bar .bb-finish:active { opacity: 0.6; }


/* ─── ITEM DETAIL SCREEN (full-screen overlay style) ────────── */
.detail-page { display: flex; flex-direction: column; min-height: 100vh; }

.detail-back-row {
    padding: 10px 16px 0;
}
.detail-back-btn {
    color: var(--red);
    font-size: clamp(13px, 3.75vw, 19px);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.detail-back-btn:active { opacity: 0.6; }

.detail-pickface-row {
    display: flex;
    align-items: center;
    padding: 28px 20px 10px;
    position: relative;
}

.detail-pickface {
    text-align: center;
    font-size: clamp(56px, 18vw, 90px);
    font-weight: 700;
    line-height: 1;
    flex: 1;
}

.detail-pickface-row .di-right {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.detail-page {
    padding-bottom: 300px; /* Increased padding so main content isn't hidden */
}

.detail-pickface .pf-label { font-size: clamp(12px, 3.5vw, 18px); color: var(--text-light); font-weight: 400; margin-bottom: 4px; }

.detail-pickface-row .di-right { display: flex; flex-direction: column; gap: 6px; }
.detail-pickface-row .di-badge {
    background: var(--grey-200);
    border-radius: 6px;
    padding: 6px 14px;
    text-align: center;
    min-width: 90px;
}
.detail-pickface-row .di-badge .badge-label { font-size: clamp(9px, 2.75vw, 13px); color: var(--text-light); }
.detail-pickface-row .di-badge .badge-val   { font-size: clamp(16px, 5vw, 26px); font-weight: 700; }
.detail-pickface-row .di-badge.highlight    { background: #FFE0B2; }

.detail-stock {
    text-align: center;
    padding: 8px 24px 12px;
}
.detail-stock .di-label { font-size: clamp(11px, 3.25vw, 16px); color: var(--text-light); }
.detail-stock .di-code { font-size: clamp(34px, 10vw, 52px); font-weight: 700; }
.detail-stock .di-name { font-size: clamp(13px, 3.75vw, 19px); color: var(--text-light); margin-top: 2px; }

/* Bulk info */
.detail-bulk {
    text-align: center;
    padding: 8px 16px;
    font-size: clamp(14px, 4vw, 20px);
    font-weight: 600;
    color: var(--text-mid);
}
.detail-bulk .breakdown-flag {
    color: var(--red);
    font-size: clamp(16px, 5vw, 26px);
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-top: 2px;
}
.detail-bulk .breakdown-sub {
    color: var(--red);
    font-size: clamp(13px, 3.75vw, 19px);
    font-weight: 600;
    display: block;
}

/* Pick section (photo + boxes) */
.pick-section {
    position: relative;
    padding: 24px 16px;
}
.box-photo {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.box-photo img {
    max-height: 110px;
    max-width: 110px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--grey-200);
}

/* Inner/Outer pick boxes */
.pick-boxes {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 32px;
}
.pick-box { text-align: center; }
.pick-box .pb-label { font-size: clamp(14px, 4vw, 20px); color: var(--text-mid); margin-bottom: 8px; }
.pick-box .pb-label.highlight { color: var(--red); font-weight: 700; font-size: clamp(16px, 4.5vw, 22px); }
.pick-box .pb-num {
    background: var(--blue);
    color: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(60px, 18vw, 95px);
    font-weight: 700;
    min-width: 130px;
    height: 140px;
    padding: 0 16px;
}
.pick-box .pb-num.small { min-width: 100px; height: 110px; font-size: clamp(46px, 14vw, 75px); }
.pick-box .pb-sublabel { font-size: clamp(13px, 3.5vw, 18px); color: var(--text-light); margin-top: 6px; }
.pick-box .pb-sublabel.highlight { color: var(--red); font-weight: 600; font-size: clamp(14px, 4vw, 20px); }

/* Product photo — positioned right, pick boxes stay centred */
.product-photo {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
.product-photo img {
    max-height: 160px;
    max-width: 160px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--grey-200);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Mobile: stack badges below pickface, box photo below pick boxes */
@media (max-width: 550px) {
    .detail-pickface-row {
        flex-direction: column;
        padding: 20px 16px 10px;
    }
    .detail-pickface-row .di-right {
        position: static;
        transform: none;
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        margin-top: 12px;
        width: 100%;
    }
    .detail-pickface-row .di-badge {
        flex: 1;
        max-width: 160px;
    }
    .pick-section {
        position: static;
    }
    .product-photo { display: none; }
    .box-photo {
        position: static;
        transform: none;
        text-align: center;
        margin-top: 16px;
    }
    .box-photo img {
        max-height: 130px;
        max-width: 130px;
    }
}

/* Item image */
.detail-image {
    text-align: center;
    padding: 8px 16px;
}
.detail-image img { max-height: 80px; max-width: 120px; object-fit: contain; }

/* Action buttons (Picked / Not all / Not at all) */
.action-buttons, 
.detail-cancel {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 900px; /* Match the .page container max-width */
    margin: 0 auto;
    background: #fff;
    z-index: 100;
}

.action-buttons {
    bottom: 45px; /* Offset by the height of the cancel bar */
}




.action-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 18px 24px;
    border: none;
    cursor: pointer;
    font-size: clamp(18px, 5.5vw, 28px);
    font-weight: 600;
    color: #fff;
    gap: 12px;
    transition: filter 0.15s;
}
.action-btn:active { filter: brightness(0.88); }
.action-btn .ab-num { font-size: clamp(16px, 5vw, 26px); min-width: 24px; }
.action-btn.btn-picked      { background: var(--green); }
.action-btn.btn-partial     { background: var(--orange); }
.action-btn.btn-unavailable { background: var(--red); }

/* Cancel link at bottom */
.detail-cancel {
    bottom: 0;
    height: 45px;
    border-top: 1px solid var(--grey-300); /* */
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.detail-cancel .order-ref { font-size: clamp(11px, 3.25vw, 16px); color: var(--text-light); }

/* ─── MODALS / OVERLAYS ─────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    display: flex;
    align-items: flex-end;   /* slide up from bottom on mobile */
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.modal {
    background: #fff;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-width: 600px;
    padding: 24px 20px 32px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    max-height: 85vh;
    overflow-y: auto;
}
.modal-overlay.active .modal { transform: translateY(0); }
.modal h2 { font-size: clamp(20px, 6vw, 30px); font-weight: 600; text-align: center; margin-bottom: 18px; }

/* Totals iframe modal */
.totals-modal {
    max-height: 90vh;
    height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 16px 16px 0;
}
.totals-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 12px;
}
.totals-header h2 { margin-bottom: 0; }
.totals-close {
    position: absolute;
    right: 0;
    background: none;
    border: none;
    font-size: clamp(18px, 5.5vw, 28px);
    color: var(--text-mid);
    cursor: pointer;
    padding: 4px 8px;
}
.totals-modal iframe {
    flex: 1;
    width: 100%;
    border: none;
    border-radius: var(--radius) var(--radius) 0 0;
}

/* Pallet / Carton toggle */
.toggle-container {
    display: flex;
    border: 2px solid var(--blue);
    border-radius: 8px;
    overflow: hidden;
    max-width: 320px;
    margin: 0 auto 22px;
}
.toggle-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: #fff;
    color: var(--blue);
    font-size: clamp(14px, 4vw, 20px);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.toggle-btn.active {
    background: var(--blue);
    color: #fff;
}

/* Qty selector */
.qty-selector {
    text-align: center;
    margin: 16px 0;
}
.qty-selector .qs-label { font-size: clamp(13px, 3.75vw, 19px); color: var(--text-mid); margin-bottom: 6px; }
.qty-selector .qs-sublabel { font-size: clamp(11px, 3.25vw, 16px); color: var(--text-light); font-style: italic; }
.qty-dropdown {
    display: block;
    margin: 12px auto 0;
    width: 100%;
    max-width: 200px;
    padding: 12px 16px;
    font-size: clamp(16px, 4.5vw, 22px);
    font-weight: 600;
    border: 2px solid var(--grey-300);
    border-radius: 10px;
    background: #fff;
    color: var(--text-dark);
    text-align: center;
    appearance: auto;
    cursor: pointer;
}
.qty-dropdown:focus {
    border-color: var(--blue);
    outline: none;
}

/* Form rows in modal */
.form-row {
	text-align: center;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
}
.form-row label { font-size: clamp(13px, 3.75vw, 19px); font-weight: 600; white-space: nowrap; min-width: 130px; text-align: right; }
.form-row input[type="text"],
.form-row textarea {
    flex: 1;
    border: 1px solid var(--grey-300);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: clamp(14px, 4vw, 20px);
    background: #fff;
}
.form-row input[type="text"]:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(33,150,243,0.2);
}
.form-row input.highlight-input { background: #FFE0B2; }
.form-row .input-hint { font-size: clamp(10px, 3vw, 15px); color: var(--text-light); }

/* Take photo link */
.photo-link {
    text-align: center;
    color: var(--blue);
    font-size: clamp(14px, 4vw, 20px);
    font-weight: 600;
    margin: 18px 0 8px;
    cursor: pointer;
}
.photo-link:active { opacity: 0.6; }

/* Modal action buttons */
.modal-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.modal-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 8px;
    font-size: clamp(14px, 4.25vw, 22px);
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s;
}
.modal-btn:active { filter: brightness(0.88); }
.modal-btn.green   { background: var(--green); }
.modal-btn.grey    { background: var(--grey-500); color: #fff; }
.modal-btn.red     { background: var(--red); }

/* Confirmation overlay (Not available at all) */
.confirm-overlay { background: rgba(0,0,0,0.55); }
.confirm-modal {
    border-radius: var(--radius-lg);
    padding: 32px 24px 24px;
    margin: 0 16px;
    align-self: center;
}
.confirm-modal h2 { font-size: clamp(26px, 8vw, 40px); color: var(--red); margin-bottom: 12px; }
.confirm-modal p  { font-size: clamp(13px, 3.75vw, 19px); color: var(--text-mid); margin-bottom: 16px; }
.confirm-modal .form-row { justify-content: flex-start; }
.confirm-modal .form-row label { min-width: auto; text-align: left; }

.picked-confirm-item { text-align: center; margin-bottom: 18px; }
.picked-confirm-item .di-code { font-size: clamp(20px, 6vw, 32px); font-weight: 700; color: var(--text); }
.picked-confirm-item .di-name { font-size: clamp(14px, 4vw, 18px); color: var(--text-mid); margin-top: 4px; }

/* ─── PARTIAL PICK MODAL ────────────────────────────────────── */
.partial-modal .qty-input-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 20px 0;
}
.partial-modal .qty-display {
    font-size: clamp(38px, 12vw, 60px);
    font-weight: 700;
    color: var(--text-dark);
    min-width: 64px;
    text-align: center;
}
.partial-modal .qty-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--blue);
    background: #fff;
    color: var(--blue);
    font-size: clamp(22px, 7vw, 36px);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.partial-modal .qty-btn:active { background: var(--blue); color: #fff; }
.partial-modal .qty-of { font-size: clamp(12px, 3.5vw, 18px); color: var(--text-light); text-align: center; margin-top: -8px; margin-bottom: 8px; }

/* ─── NOTES FULL MODAL ──────────────────────────────────────── */
.notes-modal textarea {
    width: 100%;
    min-height: 120px;
    border: 1px solid var(--grey-300);
    border-radius: 8px;
    padding: 12px;
    font-size: clamp(13px, 3.75vw, 19px);
    resize: vertical;
    background: var(--note-bg);
}

/* ─── LOADING / EMPTY STATES ────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-light);
    font-size: clamp(14px, 4.25vw, 22px);
}
.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-mid);
}
.spinner {
    width: 40px; height: 40px;
    border: 4px solid var(--grey-200);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── LOGIN / PICKER SELECT ─────────────────────────────────── */
.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--grey-100);
    padding: 40px 24px;
    text-align: center;
}
.login-page .login-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 40px 28px;
    width: 100%;
    max-width: 380px;
}
.login-page h1 { font-size: clamp(18px, 5.5vw, 28px); margin-bottom: 6px; }
.login-page .login-sub { color: var(--text-light); font-size: clamp(12px, 3.5vw, 18px); margin-bottom: 28px; }
.login-page .pin-input {
    font-size: clamp(28px, 9vw, 46px);
    font-weight: 700;
    letter-spacing: 8px;
    text-align: center;
    border: 2px solid var(--grey-300);
    border-radius: 10px;
    padding: 14px 8px;
    width: 100%;
    background: var(--grey-100);
}
.login-page .pin-input:focus { border-color: var(--blue); outline: none; background: #fff; }
.login-page .pin-error { color: var(--red); font-size: clamp(12px, 3.5vw, 18px); margin-top: 10px; min-height: 20px; }
.login-page .btn-login {
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: clamp(15px, 4.5vw, 23px);
    font-weight: 700;
    cursor: pointer;
}
.login-page .btn-login:active { background: var(--blue-dk); }
.login-page .btn-login:disabled { background: var(--grey-300); color: #fff; cursor: default; }

/* ─── SCROLLBAR (tablets) ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--grey-300); border-radius: 3px; }



.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.keypad button {
    padding: 20px;
    font-size: clamp(18px, 5.5vw, 28px);
    font-weight: bold;
    border-radius: 10px;
    border: none;
    background: #f0f0f0;
    cursor: pointer;
}

.keypad button:active {
    background: #d6d6d6;
}

/* === TASKS BADGE (floating indicator) === */
.tasks-badge {
    position: sticky; /* Makes it stick to the top when scrolling */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #FF5722; /* Original orange colour */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    font-weight: 700;
    font-size: clamp(14px, 4vw, 20px);
    z-index: 150; /* Above the header */
    border-radius: 0; /* Changed from floating circle to full-width bar */
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.tasks-badge:active { transform: scale(0.95); }
.tasks-badge .tasks-count {
    background: #fff;
    color: #FF5722; /* Match the bar color */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: clamp(12px, 3.5vw, 18px);
}

/* === UN-PICK BUTTON === */
.btn-unpick {
    background: #757575 !important;
}
.btn-unpick:active {
    filter: brightness(0.85) !important;
}

/* === TASKS PAGE === */
.task-card {
    border-bottom: 1px solid var(--grey-200);
    padding: 16px;
    cursor: pointer;
    background: #fff;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 12px;
}
.task-card:active { background: var(--grey-100); }
.task-card .task-priority {
    width: 8px;
    height: 60px;
    border-radius: 4px;
    flex-shrink: 0;
}
.task-card .task-priority.high   { background: #F44336; }
.task-card .task-priority.medium { background: #FF9800; }
.task-card .task-priority.normal { background: #9E9E9E; }
.task-card .task-body { flex: 1; }
.task-card .task-title { font-size: clamp(14px, 4vw, 20px); font-weight: 600; margin-bottom: 4px; }
.task-card .task-desc { font-size: clamp(15px, 4.5vw, 23px); color: var(--text-mid); }
.task-card .task-time { font-size: clamp(10px, 3vw, 15px); color: var(--text-light); margin-top: 4px; }
.task-card .task-arrow { color: var(--grey-500); font-size: clamp(18px, 5.5vw, 28px); }

/* Task detail modal — centered */
#taskDetailModal {
    align-items: center;
}
#taskDetailModal .task-detail-modal {
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    max-width: 500px;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s;
}
#taskDetailModal.active .task-detail-modal {
    transform: scale(1);
    opacity: 1;
}
.task-detail-modal h2 { font-size: clamp(18px, 5.5vw, 28px); margin-bottom: 16px; }
.task-detail-modal .task-meta {
    background: var(--grey-100);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: clamp(12px, 3.5vw, 18px);
    color: var(--text-mid);
}
.task-detail-modal .task-desc-full {
    font-size: clamp(16px, 5vw, 26px);
    line-height: 1.6;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.photo-slot {
	text-align: center;
}
	
	
}