/* ==========================================================================
   Dropdown indicators: every dropdown in the app shows one chevron.
   Linked in index.php after every other app stylesheet.

   Why this file exists: app.css resets every <select> to appearance:none
   ("Forms — better mobile inputs"), which removes the browser's own arrow,
   and most field skins (.input-group, the pop-up skin, the Filters drawer,
   admin toolbars, inline styles) paint the field with the `background:`
   shorthand, which also wipes any background-image. So the chevron is drawn
   here with background-* longhands marked !important. Colour, border, radius
   and height of each field stay whatever its own skin says.

   Per-control tuning, without specificity fights: set --dd-x (distance from
   the right edge), --dd-s (chevron size) and --dd-pr (room for the text).
   ========================================================================== */

:root {
    --dd-ink: #475569;
    --dd-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
    --dd-chev-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a3aebd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
}

/* 1. Native single-choice selects. */
select:not([multiple]):not([size]),
select[size="1"]:not([multiple]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: var(--dd-chev) !important;
    background-repeat: no-repeat !important;
    background-position: right var(--dd-x, 11px) center !important;
    background-size: var(--dd-s, 14px) var(--dd-s, 14px) !important;
    padding-right: var(--dd-pr, 30px) !important;
    text-overflow: ellipsis;
    cursor: pointer;
}
select:not([multiple]):disabled {
    background-image: var(--dd-chev-off) !important;
    cursor: not-allowed;
}

/* Small selects: time pickers (Hour / Minute / AM-PM), the calendar's month
   and year, rows-per-page, and compact status pickers. */
.app-time select,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.fp-year-select,
.crm-perpage select,
.tkt-status-sel,
#admin-tkt-status,
.pkg-feat-sel,
.bsv-fee-type {
    --dd-x: 8px;
    --dd-s: 12px;
    --dd-pr: 26px;
}
.app-time select { padding-left: 10px; }
/* a narrow column (two fields side by side on a phone): tighter, so all three fit */
@media (max-width: 480px) {
    .app-time { gap: 4px; }
    .app-time select { padding-left: 8px; --dd-x: 6px; --dd-pr: 21px; }
}

/* The toolbar dropdowns (search + filter row on Sales, Expenses, Products…)
   carry their own chevron icon beside the select; the select now draws the
   same chevron as every other dropdown, so that icon is hidden rather than
   shown twice. */
.txn-filter-wrap > .txn-filter-caret { display: none; }

/* 2. Chevrons that live in button markup: same ink as the select chevron, and
      fully opaque (the sign-in country picker had it at 55% on a grey tab). */
.biz-picker-caret,
.country-picker-btn > .bi-chevron-down { color: var(--dd-ink); -webkit-text-stroke: .35px currentColor; }
.country-picker-btn > .bi-chevron-down { opacity: 1 !important; font-size: .78rem !important; }

/* 3. Business switcher in the top bar. On phones the button shrinks to the
      logo and used to hide its chevron, so nothing said it opens a list. */
@media (max-width: 520px) {
    .biz-picker-btn { max-width: 66px; gap: 4px; padding-right: 8px; }
    .biz-picker-caret { display: inline-block; font-size: .68rem; }
}
/* Small phones have no spare width in the top bar, so the chevron sits as a
   small badge on the logo's corner and the button keeps its old size. */
@media (max-width: 360px) {
    .biz-picker-btn { position: relative; max-width: 56px; padding-right: 8px; }
    .biz-picker-caret {
        position: absolute; right: 1px; bottom: 1px;
        display: flex; align-items: center; justify-content: center;
        width: 15px; height: 15px; border-radius: 50%;
        background: #fff; box-shadow: 0 0 0 1px #dbe2ea;
        font-size: .5rem; -webkit-text-stroke: .5px currentColor;
    }
}

/* 4. Type-to-search customer pickers (New Sale, Sale details, POS checkout):
      the list of customers drops down under the field as you type. */
#sale-cust-search,
#ed-sale-cust-search,
#pos-cust-name {
    background-image: var(--dd-chev);
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 14px 14px;
    padding-right: 30px;
}

/* ---- Tick boxes ----------------------------------------------------------
   One look for every checkbox in the app: a rounded square that fills with
   the page's colour and shows a white tick. On/off switches keep their own
   look (anything with "switch" or "toggle" in its class, role="switch", and
   the inputs inside the switch wrappers). Display, position and opacity are
   left alone, so a box that is meant to be hidden stays hidden. */
input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):not([role="switch"]):not(.menu-toggle-control > input):not(.m2-switch input) {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    flex: none; box-sizing: border-box; width: 18px; height: 18px; min-width: 18px; padding: 0;
    border: 1.5px solid #94a3b8; border-radius: 5px;
    background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: 12px 12px;
    vertical-align: middle; cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):not([role="switch"]):not(.menu-toggle-control > input):not(.m2-switch input):hover:not(:disabled) {
    border-color: var(--lp2-h3, var(--accent, #059669));
}
input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):not([role="switch"]):not(.menu-toggle-control > input):not(.m2-switch input):checked {
    background-color: var(--lp2-h3, var(--accent, #059669)); border-color: var(--lp2-h3, var(--accent, #059669));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.6'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):not([role="switch"]):not(.menu-toggle-control > input):not(.m2-switch input):indeterminate {
    background-color: var(--lp2-h3, var(--accent, #059669)); border-color: var(--lp2-h3, var(--accent, #059669));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-width='2.4' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):not([role="switch"]):not(.menu-toggle-control > input):not(.m2-switch input):focus-visible {
    outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp2-h3, var(--accent, #059669)) 25%, transparent);
}
input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):not([role="switch"]):not(.menu-toggle-control > input):not(.m2-switch input):disabled {
    opacity: .45; cursor: not-allowed;
}
/* labels around a tick box line it up with their words */
label:has(> input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):not([role="switch"])) { cursor: pointer; }

/* ---- A field that cannot be changed looks it (e.g. an expense past its
   72-hour edit window) ---- */
input:disabled:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select:disabled, textarea:disabled {
    background-color: #f1f5f9 !important; color: #64748b !important;
    -webkit-text-fill-color: #64748b; cursor: not-allowed; opacity: 1;
}