/* tom-select-conform.css — conform the Tom Select widget to the app's Bootstrap-3
 * form-control look, in BOTH light and dark themes (dropdown-01).
 *
 * The base widget CSS is static/tom-select/tom-select.min.css; this file layers
 * the app's own look on top. Light matches bootstrap-paper's form controls
 * (37px, 13px, #666 text, 3px radius, #66afe9 focus). Dark is scoped under
 * `html.theme-dark` and reuses the Piggy Slate --dm-* tokens from budget-dark.css
 * so the control, dropdown, options and optgroup headers read the same as the
 * existing dark form controls (field fill #242433, edge #50506e, carrot accent).
 *
 * Dark-mode gotcha guarded here: the base widget paints white on the control and
 * dropdown; every dark rule below out-specifies it (html.theme-dark .ts-...) so no
 * bootstrap-paper/base white bleeds through. Verify by rendering, not just cascade.
 */

/* ==== Light (default) ====================================================== */

/* The control — the boxed field that stands in for the native <select>. */
.ts-wrapper .ts-control {
    min-height: 37px;
    padding: 5px 16px;
    font-size: 13px;
    line-height: 1.846;
    color: #666666;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.ts-wrapper.single .ts-control,
.ts-wrapper .ts-control > .item {
    color: #666666;
}
/* Focus — bootstrap-paper's blue edge + glow. */
.ts-wrapper.focus .ts-control {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0;
}
.ts-wrapper.disabled .ts-control {
    background-color: #eeeeee;
    color: #bbbbbb;
}
/* The type-to-search input inside the control. */
.ts-wrapper .ts-control > input {
    color: #666666;
    font-size: 13px;
}
.ts-wrapper .ts-control > input::placeholder { color: #bbbbbb; }

/* The dropdown menu. */
.ts-dropdown {
    font-size: 13px;
    color: #666666;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.ts-dropdown .option { padding: 5px 16px; color: #666666; }
.ts-dropdown .active { background-color: #f0f4f9; color: #333333; }
/* Optgroup headers — "Frequently used" / "All line items": quiet section labels. */
.ts-dropdown .optgroup-header {
    padding: 6px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #999999;
    background-color: #fafafa;
    border-top: 1px solid #eeeeee;
}
.ts-dropdown .optgroup:first-child .optgroup-header { border-top: 0; }

/* ==== Dark (html.theme-dark) =============================================== */

html.theme-dark .ts-wrapper .ts-control {
    color: var(--dm-text);
    background-color: #242433;      /* match dark .form-control field fill */
    border-color: #50506e;          /* match dark .form-control field edge */
    box-shadow: none;
}
html.theme-dark .ts-wrapper.single .ts-control,
html.theme-dark .ts-wrapper .ts-control > .item {
    color: var(--dm-text);
}
html.theme-dark .ts-wrapper.focus .ts-control {
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 2px rgba(255, 106, 20, 0.35);   /* carrot ring, as _forms.css */
}
/* When the single-select control is active (clicked / typing), the base theme
   forces `background:#fff` at higher specificity — keep it dark while searching. */
html.theme-dark .ts-wrapper.single.input-active .ts-control,
html.theme-dark .ts-wrapper.single .ts-control.focus {
    background-color: #242433;
    color: var(--dm-text);
}
html.theme-dark .ts-wrapper.disabled .ts-control {
    background-color: var(--dm-bg);
    border-color: var(--dm-border);
    color: var(--dm-muted);
}
html.theme-dark .ts-wrapper .ts-control > input { color: var(--dm-text); }
html.theme-dark .ts-wrapper .ts-control > input::placeholder { color: var(--dm-muted); }

html.theme-dark .ts-dropdown {
    color: var(--dm-text);
    background-color: var(--dm-surface);   /* same surface as the datetimepicker popup */
    border-color: var(--dm-border);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
}
html.theme-dark .ts-dropdown .option { color: var(--dm-text); }
html.theme-dark .ts-dropdown .active {
    background-color: #262636;       /* subtle lift, matches dark list/hover tone */
    color: var(--dm-link);
}
html.theme-dark .ts-dropdown .optgroup-header {
    color: var(--dm-muted);
    background-color: var(--dm-bg);
    border-top-color: var(--dm-border);
}

/* ==== Bottom-of-page room for an open dropdown ============================= */
/* A single shared spacer, grown by tom-select-init.js to exactly the amount an
   open dropdown overflows the viewport and collapsed again on close. It is inert
   and themeless — it only ever contributes height. */
.ts-dropdown-spacer {
    height: 0;
    pointer-events: none;
}