/* ==========================================================================
   HX Console — Phase 2 design layer
   Loaded after hx-phase1.css.

     1. Product picker — brand rail and image card grid
     2. Date range — typed From/To fields and Clear
     3. Entry-screen corrections
   ========================================================================== */

/* ==========================================================================
   1. Product picker
   ========================================================================== */

.picker { display: flex; flex-direction: column; gap: 12px; min-height: 320px; }

.picker-bar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.picker-search { flex: 1 1 240px; min-width: 0; }
.picker-bar select { flex: 0 1 200px; min-width: 150px; }

.picker-stock-toggle {
    display: flex; align-items: center; gap: 7px;
    font-size: var(--t-sm); font-weight: 600; color: var(--text-2);
    white-space: nowrap; cursor: pointer; margin: 0;
}
.picker-stock-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }

/* Brand rail ------------------------------------------------------------
   A horizontal scroller rather than a wrapping block. A shop with forty
   brands would otherwise push the products themselves off the screen. */
.picker-brands {
    display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.picker-brands::-webkit-scrollbar { height: 6px; }
.picker-brands::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.pick-brand {
    display: inline-flex; align-items: center; gap: 7px;
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-family: inherit; font-size: var(--t-sm); font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.pick-brand:hover { border-color: var(--brand); color: var(--text); }
.pick-brand.is-active {
    background: var(--brand); border-color: var(--brand); color: var(--text-on-brand);
}
.pick-brand-count {
    font-family: var(--mono); font-size: var(--t-xs); font-weight: 700;
    padding: 1px 6px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-2);
}
.pick-brand.is-active .pick-brand-count {
    background: rgba(255, 255, 255, .22); color: var(--text-on-brand);
}

/* Card grid ------------------------------------------------------------- */
.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 11px;
    max-height: 56vh;
    overflow-y: auto;
    padding: 2px;
}

/* Cards -----------------------------------------------------------------
   Deliberately plain: block flow, an explicit thumbnail height, and no
   overflow clipping. The first build used a flex <button> with an
   aspect-ratio thumbnail and overflow:hidden, and every card collapsed to a
   coloured bar — the thumbnail was clipped to the button's own height and the
   text was cut away below it. Three separate things had to line up for that to
   happen, so all three are gone: no button, no aspect-ratio, no clipping.
   A min-height means the card cannot collapse even if something else on the
   page constrains it. */
.pick-card {
    display: block;
    position: relative;
    min-height: 186px;
    padding: 0;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    font-family: inherit; text-align: left;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.pick-card:hover { border-color: var(--brand); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.pick-card:focus-visible {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent);
}
.pick-card.is-chosen { border-color: var(--brand); background: var(--brand-soft); cursor: default; }
.pick-card.is-chosen:hover { transform: none; }

.pick-thumb {
    display: block;
    width: 100%;
    height: 104px;
    object-fit: cover;
    background: var(--surface-3);
    border-bottom: 1px solid var(--line);
    border-radius: calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0;
}

/* No product image has been uploaded on this installation, so the empty state
   is designed rather than left as a broken-image icon: the product's initials
   on a colour derived from its own name, so the same item always looks the
   same and the grid stays scannable. */
.pick-thumb.is-blank {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display), sans-serif;
    font-size: 26px; font-weight: 800;
    letter-spacing: -.02em; color: #fff;
}
.pick-thumb.tone-0 { background: linear-gradient(135deg, #3E7C6B, #2C5C4F); }
.pick-thumb.tone-1 { background: linear-gradient(135deg, #4A6FA5, #33507C); }
.pick-thumb.tone-2 { background: linear-gradient(135deg, #A2673F, #7C4A2C); }
.pick-thumb.tone-3 { background: linear-gradient(135deg, #7C5CA8, #57407C); }
.pick-thumb.tone-4 { background: linear-gradient(135deg, #B0503F, #8A3A2C); }
.pick-thumb.tone-5 { background: linear-gradient(135deg, #3F8FA2, #2C6B7C); }
.pick-thumb.tone-6 { background: linear-gradient(135deg, #8A9440, #67702C); }
.pick-thumb.tone-7 { background: linear-gradient(135deg, #A6416F, #7C2C51); }

.pick-body { display: block; padding: 9px 11px 11px; }

.pick-name {
    font-size: var(--t-sm); font-weight: 700; color: var(--text);
    line-height: 1.3;
    /* Two lines, then trimmed, so one long Bengali name cannot make a card
       twice the height of its neighbours. A max-height rather than a line
       clamp, because a clamp needs display:-webkit-box, which would take the
       element out of normal flow behaviour again. */
    max-height: 2.6em; overflow: hidden;
}
.pick-code {
    display: block; margin-top: 2px;
    font-family: var(--mono); font-size: var(--t-xs);
    color: var(--text-3); font-feature-settings: 'tnum' 1, 'zero' 1;
}
.pick-figures { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.pick-price {
    font-family: var(--mono); font-size: var(--t-num); font-weight: 700; color: var(--text);
    font-feature-settings: 'tnum' 1, 'zero' 1;
}
.pick-sub { font-size: var(--t-xs); color: var(--text-3); }
.pick-stock-row { margin-top: 6px; }

.pick-flag {
    position: absolute; top: 7px; right: 7px;
    padding: 3px 8px; border-radius: 999px;
    background: var(--brand); color: var(--text-on-brand);
    font-size: var(--t-xs); font-weight: 700;
}

.picker-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding-top: 4px; border-top: 1px solid var(--line);
}

@media (max-width: 860px) {
    .picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
        gap: 9px; max-height: 48vh;
    }
    .pick-card { min-height: 168px; }
    .pick-thumb { height: 88px; }
    .pick-thumb.is-blank { font-size: 21px; }
    .picker-bar select, .picker-search { flex: 1 1 100%; }
    .picker-stock-toggle { flex: 1 1 100%; }
}

@media (max-width: 420px) {
    .picker-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   2. Date range
   ========================================================================== */

.range { flex-wrap: wrap; }
.range-presets { flex-wrap: wrap; }

.range-custom { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.range-custom.hidden { display: none; }

.range-field { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.range-field > span {
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-3);
}
.range-field input[type=date] {
    min-height: 34px; padding: 4px 9px;
    width: auto; min-width: 140px;
    font-size: var(--t-num-sm);
}

.range-clear { flex: 0 0 auto; }

@media (max-width: 860px) {
    .range-field { flex: 1 1 46%; }
    .range-field input[type=date] { width: 100%; min-width: 0; }
    .range-clear { flex: 1 1 100%; }
}

/* ==========================================================================
   3. Entry screens
   ========================================================================== */

/* The Browse button sits beside a labelled field, so it needs the same
   baseline as the inputs next to it rather than the label's. */
.filters .field > .btn { min-height: var(--tap); white-space: nowrap; }

/* Row-level warnings under a quantity or cost box. */
[data-qty-note]:empty,
[data-pu-note]:empty { display: none; }
[data-qty-note],
[data-pu-note] { margin-top: 3px; line-height: 1.35; text-align: right; }

@media (max-width: 860px) {
    [data-qty-note], [data-pu-note] { text-align: left; }
    .filters .field > .btn { width: 100%; }
}

/* ==========================================================================
   4. Search icon overlap — every search box in the console
   --------------------------------------------------------------------------
   hx.css line 304 leaves room for the magnifier with padding-left: 38px.
   Line 413 then sets `padding: 9px 13px` on input[type=search] as part of the
   generic field rule. Both selectors carry the same specificity and the
   generic one comes later, so it wins: the gap collapses to 13px and the icon
   is painted underneath the first characters of the placeholder and of
   whatever is typed.

   That is the remaining half of the "search bar text cannot be read" report —
   Phase 1 fixed the colour and the disappearance on phones, but the icon was
   still sitting on top of the text. Re-stated here with enough specificity to
   settle it, and matched on the right for the browser's clear button.
   ========================================================================== */

.hx-search input[type=search],
.hx-search input[type=text] {
    padding-left: 38px;
    padding-right: 34px;
}
.hx-search svg {
    z-index: 1;
    fill: var(--text-3);
    pointer-events: none;
}
.hx-search:focus-within svg { fill: var(--brand); }


/* ==========================================================================
   Inline product catalogue on Sales and Purchase entry
   ========================================================================== */
.inline-picker-wrap {
    margin-top: 14px;
    padding: 14px;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.inline-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.inline-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.inline-picker-grid {
    max-height: 430px;
    min-height: 188px;
}
.inline-picker .pick-card {
    min-width: 0;
}
@media (max-width: 860px) {
    .inline-picker-wrap { padding: 11px; }
    .inline-picker-grid { max-height: 52vh; min-height: 168px; }
}