/* ============================================================================
   UI density — platform-wide
   ----------------------------------------------------------------------------
   The bundled admin template ships fairly generous metrics: 46px-tall inputs
   (padding .75rem 1rem), 14px labels and 24px box padding. On data-dense
   screens — the product form especially — that pushes everything below the
   fold and makes the page feel bloated.

   This file tightens the shared component classes to a compact scale
   (~34px controls, 13px text, 16px box padding) close to Shopify admin.

   Loaded LAST in both Backend and Control Panel <head>, so it wins over the
   template without touching the compiled bundle. Every value is driven by the
   custom properties below — change them here and the whole platform follows.
   ========================================================================== */

:root {
    --ui-h:          34px;   /* standard control height          */
    --ui-h-sm:       28px;   /* compact control height           */
    --ui-pad-y:      6px;
    --ui-pad-x:      10px;
    --ui-fs:         13px;   /* value text inside controls       */
    --ui-fs-sm:      12px;
    --ui-fs-label:   11px;   /* field labels                     */
    --ui-fs-hint:    11px;   /* helper text under a heading      */
    --ui-fs-ph:      11px;   /* placeholders                     */
    --ui-fs-title:   13px;   /* section headings                 */
    --ui-radius:     6px;
    --ui-gap:        14px;   /* vertical rhythm between fields   */
    --ui-box-pad:    16px;
    --ui-textarea-h: 58px;   /* default textarea min-height      */
    --ui-editor-h:   120px;  /* rich-text editor min-height      */
}

/* ── Form controls ───────────────────────────────────────────────────────── */

.ti-form-input,
.ti-form-select,
.form-control,
.form-select {
    padding: var(--ui-pad-y) var(--ui-pad-x);
    font-size: var(--ui-fs);
    line-height: 1.4;
    border-radius: var(--ui-radius);
    min-height: var(--ui-h);
}

/* Fix the height on single-line controls so they all line up exactly. */
input.ti-form-input:not([type="file"]),
select.ti-form-input,
input.form-control:not([type="file"]),
select.form-control {
    height: var(--ui-h);
}

textarea.ti-form-input,
textarea.form-control {
    height: auto;
    min-height: var(--ui-textarea-h);
    line-height: 1.5;
    padding: var(--ui-pad-y) var(--ui-pad-x);
}

/* The template draws the select chevron as a background image sized for the
   old padding — pull it in so it does not float away from the new edge. */
select.ti-form-input,
select.form-select {
    padding-right: 30px;
    background-position: right 8px center;
    background-size: 14px 14px;
}

/* Placeholders sit a step below the value text so a filled field reads as
   heavier than an empty one. Every engine prefix, or some browsers ignore it. */
.ti-form-input::placeholder,
.form-control::placeholder,
.combo-input::placeholder,
input::placeholder,
textarea::placeholder {
    font-size: var(--ui-fs-ph);
    opacity: 1;               /* Firefox dims placeholders by default */
    color: #9ca3af;
}
.ti-form-input::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder { font-size: var(--ui-fs-ph); }
.ti-form-input::-moz-placeholder,
.form-control::-moz-placeholder { font-size: var(--ui-fs-ph); opacity: 1; }

.ti-form-label,
label.form-label {
    margin-bottom: 4px;
    font-size: var(--ui-fs-label);
    line-height: 1.35;
    font-weight: 500;
}

/* Checkboxes / radios scale down with the rest. */
.ti-form-checkbox,
.ti-form-radio,
input[type="checkbox"].form-check-input,
input[type="radio"].form-check-input {
    width: 15px;
    height: 15px;
}

/* Input groups and any addon text. */
.ti-form-input-group > .ti-form-input { height: var(--ui-h); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.ti-btn {
    margin: 0;
    padding: var(--ui-pad-y) 12px;
    font-size: var(--ui-fs);
    line-height: 1.4;
    border-radius: var(--ui-radius);
    min-height: var(--ui-h);
}

.ti-btn-sm {
    padding: 3px 9px;
    font-size: var(--ui-fs-sm);
    min-height: var(--ui-h-sm);
}

.ti-btn-lg { padding: 9px 16px; font-size: 14px; min-height: 40px; }

/* The template's default margin:.25rem made button rows drift apart; with it
   removed, restore deliberate spacing where buttons sit side by side. */
.ti-btn + .ti-btn { margin-left: 8px; }

/* ── Boxes / cards ───────────────────────────────────────────────────────── */

.box-body   { padding: var(--ui-box-pad); }
.box-header { padding: 12px var(--ui-box-pad); }
.box-footer { padding: 12px var(--ui-box-pad); }
.box        { border-radius: 8px; margin-bottom: 16px; }

.box-title,
.box-header .box-title { font-size: var(--ui-fs-title); font-weight: 600; }

/* ── Page header ─────────────────────────────────────────────────────────── */

.page-header { margin-bottom: 14px; }
.page-header h3,
.main-content > h3 { font-size: 1.25rem; line-height: 1.3; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.ti-custom-table thead th {
    padding: 8px 12px;
    font-size: var(--ui-fs-sm);
    line-height: 1.3;
}

.ti-custom-table tbody td {
    padding: 9px 12px;
    font-size: var(--ui-fs);
    line-height: 1.45;
}

/* ── Grid rhythm ─────────────────────────────────────────────────────────── */

/* Tailwind's gap-6 (24px) between form fields is a lot at this density.
   Only tightened inside boxes so page-level layout spacing is untouched. */
.box-body .grid.gap-6  { gap: 18px; }
.box-body .grid.gap-4  { gap: var(--ui-gap); }
.box-body .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 18px; }
.box-body .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: var(--ui-gap); }

/* ── Shared widgets that hardcode the old metrics ────────────────────────── */

/* Combobox (product form, masters) */
.combo-control { min-height: var(--ui-h); padding: 3px 8px; gap: 6px; }
.combo-input   { font-size: var(--ui-fs); padding: 2px; min-width: 90px; }
.combo-chip    { font-size: var(--ui-fs-sm); padding: 2px 7px; }
.combo-opt     { padding: 7px 11px; font-size: var(--ui-fs); }
.combo-add     { padding: 9px 11px; font-size: var(--ui-fs); }
.combo-note    { padding: 9px 11px; font-size: var(--ui-fs-sm); }

/* Section headings + helper text used across the newer screens */
.sec-title  { font-size: var(--ui-fs-title); }
.sec-hint   { font-size: var(--ui-fs-hint); line-height: 1.45; }
.form-text,
.help-text,
.text-muted-sm { font-size: var(--ui-fs-hint); }

/* Badges and chips */
.badge { font-size: 11px; padding: 2px 7px; }

/* ── Dropdown menus ──────────────────────────────────────────────────────── */

/* The template (Preline) and the app's own menus. */
.ti-dropdown-menu,
.hs-dropdown-menu { padding: 4px; border-radius: var(--ui-radius); }

.ti-dropdown-item,
.hs-dropdown-menu a,
.hs-dropdown-menu button {
    padding: 6px 10px;
    font-size: var(--ui-fs);
    line-height: 1.4;
    border-radius: 4px;
}

/* Native select options — honoured by Firefox and Chromium on Windows. */
select.ti-form-input option,
select.form-select option { font-size: var(--ui-fs); }

/* Our combobox dropdown (product form, masters, RFQ). */
.combo-dropdown { border-radius: var(--ui-radius); max-height: 240px; }

/* ── Third-party pickers ─────────────────────────────────────────────────── */

/* Choices.js */
.choices { margin-bottom: 0; }
.choices__inner {
    min-height: var(--ui-h);
    padding: 3px 8px;
    font-size: var(--ui-fs);
    border-radius: var(--ui-radius);
}
.choices__input { font-size: var(--ui-fs); margin-bottom: 0; }
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item { padding: 7px 10px; font-size: var(--ui-fs); }
.choices__list--multiple .choices__item { font-size: var(--ui-fs-sm); padding: 2px 7px; margin: 2px 3px 2px 0; }

/* Tom Select */
.ts-control {
    min-height: var(--ui-h);
    padding: 3px 8px !important;
    font-size: var(--ui-fs);
    border-radius: var(--ui-radius);
}
.ts-control input { font-size: var(--ui-fs); }
.ts-dropdown, .ts-dropdown .option { font-size: var(--ui-fs); }
.ts-dropdown .option { padding: 7px 10px; }
.ts-control .item { font-size: var(--ui-fs-sm); }

/* Flatpickr / native date + time controls keep the same box as text inputs. */
input[type="date"].ti-form-input,
input[type="time"].ti-form-input,
input[type="datetime-local"].ti-form-input,
input[type="month"].ti-form-input { height: var(--ui-h); font-size: var(--ui-fs); }
.flatpickr-calendar { font-size: var(--ui-fs); }

/* File inputs */
input[type="file"].ti-form-input { font-size: var(--ui-fs-sm); padding: 5px 8px; min-height: var(--ui-h); }

/* ── Rich-text editor (Quill) ────────────────────────────────────────────── */

.ql-container, .ql-editor { font-size: var(--ui-fs); }
.ql-editor { min-height: var(--ui-editor-h); padding: 9px 11px; line-height: 1.6; }
.ql-editor.ql-blank::before { font-size: var(--ui-fs-ph); font-style: normal; }

/* Toolbar controls — the default 28px buttons look oversized next to 34px inputs. */
.ql-toolbar.ql-snow { padding: 4px 6px; }
.ql-snow .ql-formats { margin-right: 8px; }
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button { width: 24px; height: 24px; padding: 3px; }
.ql-snow .ql-picker { font-size: var(--ui-fs); height: 24px; line-height: 24px; }
.ql-snow .ql-picker-label { padding-left: 6px; padding-right: 16px; }
.ql-snow .ql-picker.ql-header { width: 92px; }
.ql-snow .ql-picker-options { padding: 4px 6px; }
.ql-snow .ql-picker-item { font-size: var(--ui-fs); padding: 3px 4px; }
.ql-snow .ql-tooltip { font-size: var(--ui-fs); }
.ql-snow .ql-tooltip input[type="text"] { font-size: var(--ui-fs); height: 26px; }

/* ── Modals ──────────────────────────────────────────────────────────────── */

.ti-modal-header  { padding: 12px 18px; }
.ti-modal-body    { padding: 16px 18px; }
.ti-modal-footer  { padding: 12px 18px; }

/* ── Sidebar / navigation stay as designed ───────────────────────────────── */
/* Deliberately untouched: the side menu has its own vetted rhythm and
   shrinking it makes the nav harder to hit. */