:root {
    --hq-teal: #006B63;   /* navigation / accent (tabs, links, focus) */
    --hq-slate: #2D4A5E;  /* primary action buttons (Save / Update / Add) */
}

html { font-size: 14px; }

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    color: #161d27;
    background: #f7f8fa;
    margin-bottom: 60px;
}

/* App-wide font consistency: form controls and Kendo widgets don't inherit the
   body font by default — force Inter so every page matches the design. */
input, button, select, textarea,
.k-widget, .k-grid, .k-input, .k-button, .k-window {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.footer {
    padding: 12px 0;
    background: #fff;
}

/* Global loader overlay */
.global-loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: #006b63;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.custom-toast {
    min-width: 260px;
    max-width: 360px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
}

.custom-toast.show { opacity: 1; transform: translateX(0); }
.custom-toast.success { background: #16a34a; }
.custom-toast.error   { background: #dc2626; }
.custom-toast.info    { background: #2d4a5e; }
.custom-toast.warning { background: #ca8a04; }

/* -----------------------------------------------------------------------------
   Common buttons — matches new-customer palette + Replit HQ design.
   Base .btn covers padding, radius, font. Colour classes stack on top:
     .btn-primary  teal   Save / Search
     .btn-add      navy   Add / New
     .btn-edit     gray   Edit (outline)
     .btn-delete   red    Delete (outline)
     .btn-cancel   gray-200 Cancel / Reset
   ----------------------------------------------------------------------------- */
.btn {
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border: 1px solid transparent;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:disabled,
.btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(20%);
}

/* Primary — teal (Save / Search / confirm-primary). */
/* Primary action (Save / Update / Search) — slate, matching the Configuration page. */
.btn-primary,
.searchbtn {
    background: var(--hq-slate);
    border-color: var(--hq-slate);
    color: #fff;
}
.btn-primary:hover,
.searchbtn:hover { background: #22394A; border-color: #22394A; }

/* Add — dark navy (New / Add). */
.btn-add {
    background: #2D4A5E;
    border-color: #2D4A5E;
    color: #fff;
}
.btn-add:hover { background: #22394A; border-color: #22394A; }

/* Edit — gray outline. */
.btn-edit {
    background: #fff;
    border-color: #D1D5DB;
    color: #374151;
}
.btn-edit:hover { background: #F9FAFB; }

/* Delete — red outline (toolbar / row action). */
.btn-delete {
    background: #fff;
    border-color: #FCA5A5;
    color: #DC2626;
}
.btn-delete:hover { background: #FEF2F2; border-color: #F87171; }

/* Danger — red filled (destructive confirm inside modals). */
.btn-danger {
    background: #DC2626;
    border-color: #DC2626;
    color: #fff;
}
.btn-danger:hover { background: #B91C1C; border-color: #B91C1C; }

/* Cancel / Reset — gray filled. */
.btn-cancel,
.cancelbutton,
.resetbtn {
    background: #E5E7EB;
    border-color: transparent;
    color: #334155;
}
.btn-cancel:hover,
.cancelbutton:hover,
.resetbtn:hover { background: #D1D5DB; }

/* Icon-only action buttons inside grid rows. */
.btn-icon {
    padding: 6px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1;
}

/* -----------------------------------------------------------------------------
   Common Kendo grid — matches new-customer table look.
   Wrap the grid element in `common-table common-table-blue` for the navy header.
   Palette + typography lifted from customer site.css (font-size, uppercase
   header, teal-selected pager, hidden Kendo default loader).
   ----------------------------------------------------------------------------- */
.common-table {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    /* Single (non-scrollable) table can exceed the container on narrow widths — allow horizontal
       scroll instead of clipping. Vertical stays natural (paged, so it never needs to scroll). */
    overflow-x: auto;
    position: relative;
    z-index: 10;
}

/* Non-scrollable (single-table) grids: scroll horizontally instead of clipping
   when the columns are wider than the screen — keeps them responsive. */
.common-table.common-table-scroll-x {
    overflow-x: auto;
    overflow-y: visible;
}

/* Table base — cell padding, borders, transitions (customer parity). */
.common-table table.k-table { border-collapse: collapse !important; }
.common-table table.k-table th.k-table-th {
    border-inline-start-width: 0 !important;
    text-align: left;
    padding: 12px 14px;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.common-table table.k-table th.k-table-th .k-cell-inner,
.common-table table.k-table th.k-table-th .k-column-title,
.common-table table.k-table th.k-table-th .k-cell-inner > .k-link {
    overflow: visible !important;
    text-overflow: clip !important;
}
.common-table table.k-table tr td.k-table-td {
    padding: 12px 14px;   /* match header th padding so cell text lines up under the column title */
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    transition: all 0.2s ease;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.common-table table.k-table tr td.k-table-td:last-child        { border-right: none; }
.common-table table.k-table th.k-table-th                      { border-right: 1px solid #D1D5DB; }
.common-table-blue table.k-table th.k-table-th                 { border-right: 1px solid rgba(255,255,255,0.30); }
.common-table table.k-table th.k-table-th:last-child,
.common-table-blue table.k-table th.k-table-th:last-child      { border-right: none; }
.common-table .k-grid .k-table-row.k-table-alt-row { background: transparent !important; }
.common-table .k-table-row.k-master-row:hover      { background: #F9FAFB !important; }

/* Selected row (checkbox / row click) — subtle teal wash matching customer's
   primary-light var (#006b6315 ≈ 9% alpha teal). */
.common-table .k-table-row.k-selected,
.common-table .k-table-row.k-selected td.k-table-td,
.common-table .k-table-row.k-state-selected,
.common-table .k-table-row.k-state-selected td.k-table-td {
    background-color: #006b6315 !important;
    color: #374151 !important;
}

/* common-table-blue variant — navy header (matches customer #2d4a5e). */
.common-table-blue .k-grid-header {
    background: #2D4A5E;
    color: #FFFFFF;
    border-bottom: none;
}
.common-table-blue .k-grid-header th.k-header,
.common-table-blue .k-grid-header .k-cell-inner > .k-link,
.common-table-blue .k-grid-header .k-column-title {
    background: #2D4A5E;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.08);
}

/* Row action cell — right-aligned icon buttons. */
.grid-actions {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
    width: 100%;
}

/* Filter row — white background so inputs stay readable on the navy header. */
.common-table .k-grid-header .k-filter-row,
.common-table-blue .k-grid-header .k-filter-row { background: #FFFFFF; }
.common-table .k-grid-header .k-filter-row th,
.common-table-blue .k-grid-header .k-filter-row th {
    background: #FFFFFF;
    color: #374151;
    padding: 6px 8px;
    border-color: #E5E7EB;
}
.common-table .k-grid-header .k-filter-row input {
    height: 30px;
    font-size: 12px;
}

/* No-records placeholder — span full grid width and centre the template.
   Kendo's default `.k-grid-norecords` is content-width + absolutely positioned,
   so a `text-center` template alone doesn't visually centre across the grid. */
.common-table .k-grid-norecords {
    width: 100%;
    text-align: center;
    justify-content: center;
}
.common-table .k-grid-norecords > * {
    display: block;
    width: 100%;
    text-align: center;
}

/* -----------------------------------------------------------------------------
   Pager — teal selected page number, gray-50 background (customer parity).
   ----------------------------------------------------------------------------- */
.k-pager.k-grid-pager,
.k-pager.k-grid-pager.k-pager-responsive {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid #F3F4F6;
    background-color: #F9FAFB;
}
.k-pager-numbers button.k-button.k-button-flat.k-button-primary { color: #000 !important; }
.k-pager-numbers button.k-button.k-button-flat.k-button-primary.k-selected {
    background-color: #006B63 !important;
    color: #FFFFFF !important;
}
/* Every .common-table has overflow-x:auto, so the pager shares the horizontal
   scroll container with the table. Pin it to the left edge of the visible viewport
   (width capped by hqGrid's pinPager) so the item count stays at a fixed last
   position and never scrolls sideways with the columns. */
.common-table > .k-pager.k-grid-pager {
    position: sticky;
    left: 0;
    box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   Checkbox — teal when checked, darker gray border when idle, centered in cell.
   ----------------------------------------------------------------------------- */
.k-checkbox,
input[type="checkbox"].k-checkbox {
    border: 1.5px solid #4B5563 !important; /* gray-600 — light-black */
    background-color: #FFFFFF;
}
.k-checkbox:checked,
.k-checkbox.k-checked,
input[type="checkbox"].k-checkbox:checked {
    background-color: #006B63 !important;
    border-color: #006B63 !important;
    color: #FFFFFF !important;
}
.k-checkbox:focus,
.k-checkbox.k-focus {
    box-shadow: 0 0 0 2px rgba(0, 107, 99, 0.25) !important;
    border-color: #006B63 !important;
}
/* Header select-all checkbox on navy background — white border for contrast. */
.common-table-blue .k-grid-header .k-checkbox {
    border-color: rgba(255,255,255,0.85) !important;
}

/* Center the checkbox horizontally in its column. Two strategies stacked so
   we work on every browser: :has() when supported, first-child as fallback
   (our convention always puts the checkbox column first). */
.common-table .k-grid-header th.k-table-th:has(.k-checkbox),
.common-table .k-table-td:has(.k-checkbox),
.common-table .k-grid-header tr th.k-table-th:first-child,
.common-table tbody tr td.k-table-td:first-child {
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
}
.common-table .k-table-td .k-checkbox,
.common-table .k-grid-header th.k-table-th .k-checkbox {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

/* Header select-all sits inside Kendo's .k-cell-inner flex wrapper, which
   ignores text-align. Force that wrapper (and its title span) to center so
   the header checkbox lines up with the body-row checkboxes below it. */
.common-table .k-grid-header th.k-table-th:first-child .k-cell-inner,
.common-table .k-grid-header th.k-table-th:first-child .k-cell-inner > .k-link,
.common-table .k-grid-header th.k-table-th:first-child .k-column-title {
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 100%;
}
.common-table .k-grid-header th.k-table-th:first-child .hq-select-all,
.common-table .k-table-td:first-child .hq-row-select {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

/* Lock the select-checkbox column to a constant width on EVERY grid so Kendo can't
   stretch or shrink it when a grid has fewer/more columns (scroll vs no-scroll).
   Matched by the checkbox child (hqGrid: hq-*, settlement fees: sf-*) so grids
   without a select column are never affected. 48px = hqGrid CHECKBOX_COLUMN_WIDTH. */
.common-table th.k-table-th:has(.hq-select-all),
.common-table th.k-table-th:has(.sf-select-all),
.common-table td.k-table-td:has(.hq-row-select),
.common-table td.k-table-td:has(.sf-row-select) {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
}
/* Also pin the matching <col> so table-layout:fixed grids honour the width. */
.common-table col.k-checkbox-col,
.common-table col.k-select-col {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
}

/* Hide Kendo's built-in loader (customer parity — we own the loader UX). */
.k-loading-mask,
.k-loading-image,
.k-loading-color,
.k-loading-text,
.k-loader-container,
.k-loader,
.k-i-loading { display: none !important; }

/* -----------------------------------------------------------------------------
   Modal (form container) + Confirmation modal (matches customer).
   ----------------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    padding: 16px;
}
.modal-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 640px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #2D4A5E;
    color: #fff;
}
.modal-header h2 { font-size: 15px; font-weight: 700; margin: 0; }
.modal-header .modal-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
}
.modal-header .modal-close:hover { color: #fff; }
.modal-body { padding: 20px; overflow-y: auto; }

/* Kendo/manage grid: rows are clickable for selection */
.common-table .k-grid-content tr { cursor: pointer; }

/* Non-scrollable grid (single header+body table — keeps columns aligned at any zoom) has no
   .k-grid-header/.k-grid-content wrappers, so target the table cells directly. Works in both modes. */
.common-table-blue table.k-table th.k-table-th { background: #2D4A5E; color: #FFFFFF !important; }
.common-table table.k-table tbody tr { cursor: pointer; }
.common-table table.k-table th.k-table-th:first-child,
.common-table table.k-table tbody td.k-table-td:first-child { text-align: center; padding-left: 8px; padding-right: 8px; }

/* Grids are paged (small), so let the content size to its rows — no inner vertical
   scrollbar, and no scrollbar-width squeeze that would offset the right-hand columns. */
.common-table .k-grid-content {
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
}

/* Session Settings grid: cells hold an input, so trim vertical padding to match the plain-text grid row height. */
#grdSessionMaster table.k-table tr td.k-table-td { padding-top: 6px; padding-bottom: 6px; }

/* Clickable link inside grid cells (e.g. Manage Users switch-account username) */
.hq-link,
.common-table a.hq-link,
.common-table table.k-table tr td.k-table-td a.hq-link {
    color: #006b63 !important;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* Checked checkboxes / selected radios use the teal accent (grid + modals) */
.common-table input[type="checkbox"],
.modal-overlay input[type="checkbox"],
.modal-overlay input[type="radio"] {
    accent-color: #006b63;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 20px;
    background: #F9FAFB;
    border-top: 1px solid #E5E7EB;
}

/* ------------------------------------------------------------------ */
/* Administration → Configuration screen                               */
/* ------------------------------------------------------------------ */

/* L2 tab bar (Receiving/Spot, Threshold Metal, ...) — sits above the tab box */
/* Kendo Editor toolbar — keep it monochrome (Kendo Default paints the selected/
   active tool with its red primary #ff6358; we neutralise it to gray so the
   toolbar matches the clean design). */
.k-editor .k-toolbar .k-button.k-selected,
.k-editor .k-toolbar .k-button.k-active,
.k-editor .k-toolbar .k-button:active,
.k-editor .k-toolbar .k-button.k-selected:hover {
    background-color: #E5E7EB !important;
    color: #374151 !important;
    border-color: transparent !important;
}
.k-editor .k-toolbar .k-button .k-icon,
.k-editor .k-toolbar .k-button .k-svg-icon {
    color: #374151 !important;
}

/* Inline field validation (reusable — set via common.js setFieldError).
   The jQuery-unobtrusive classes (input-validation-error / field-validation-error)
   are mapped to the SAME look so every validated form matches without extra work. */
.field-invalid,
.input-validation-error,
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: #EF4444 !important;
}
.field-invalid:focus,
.input-validation-error:focus {
    border-color: #EF4444 !important;
    box-shadow: none !important;
}
.field-error-msg,
.field-validation-error,
.field-validation-error span {
    display: block;
    margin-top: 4px;
    font-size: 12px !important;
    color: #EF4444 !important;
}
.field-error-msg { flex-basis: 100%; }

/* Toggle switch (Shipping label instruction ON/OFF) — slate when on, gray when off. */
.hq-toggle { position: relative; display: inline-flex; align-items: center; height: 24px; width: 48px; cursor: pointer; }
.hq-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.hq-toggle .hq-toggle-track {
    position: absolute; inset: 0; border-radius: 9999px;
    background: #D1D5DB; transition: background-color .15s ease;
}
.hq-toggle .hq-toggle-thumb {
    position: absolute; top: 2px; left: 2px; height: 20px; width: 20px;
    border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
    transition: transform .15s ease;
}
.hq-toggle input:checked + .hq-toggle-track { background: var(--hq-slate); }
.hq-toggle input:checked ~ .hq-toggle-thumb { transform: translateX(24px); }

.hq-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    padding: 8px 16px 0;
    border-bottom: 1px solid #E5E7EB;
}
.hq-tab {
    position: relative;
    display: inline-block;
    padding: 6px 16px 11px;
    font-size: 14px;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
    white-space: nowrap;
    background: none;
}
.hq-tab:hover { color: var(--hq-teal); }
.hq-tab.active { color: var(--hq-teal); }
.hq-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: var(--hq-teal);
}

/* White content card that holds the pills bar + the active tab's content */
.hq-tab-box {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
}

/* Lightweight rich-text editor (Form Templates policy) — toolbar matches the Replit design. */
.pmr-rte .rte-btn {
    padding: 4px 8px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    background: transparent;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    white-space: nowrap;
}
.pmr-rte .rte-btn:hover { background: #F3F4F6; }
.pmr-rte .rte-sep { display: inline-block; width: 1px; height: 16px; background: #D1D5DB; margin: 0 2px; }
.rte-content {
    min-height: 380px;
    max-height: 520px;
    overflow-y: auto;
    padding: 12px;
    font-size: 14px;
    color: #374151;
    outline: none;
}
.rte-content:empty::before { content: attr(data-placeholder); color: #9CA3AF; }
.rte-content h1 { font-size: 1.5em; font-weight: 700; margin: .3em 0; }
.rte-content h2 { font-size: 1.25em; font-weight: 700; margin: .3em 0; }
.rte-content ul { list-style: disc; padding-left: 1.5em; }
.rte-content ol { list-style: decimal; padding-left: 1.5em; }
.rte-content blockquote { border-left: 3px solid #D1D5DB; padding-left: 12px; color: #6B7280; margin: .3em 0; }

/* Admin left rail button (matches Replit .hq-left-rail-btn). */
.hq-left-rail-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    padding: 9px 14px;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.hq-left-rail-btn:hover { background-color: #F3F4F6; }
.hq-left-rail-btn.active {
    background-color: #EEF8F7;
    color: var(--hq-teal);
    border-left-color: var(--hq-teal);
}

/* Product-type pills */
.hq-pill-tab {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 9999px;
    cursor: pointer;
    white-space: nowrap;
}
.hq-pill-tab:hover { border-color: #006B63; color: #006B63; }
.hq-pill-tab.active {
    background: #2D4A5E;
    border-color: #2D4A5E;
    color: #fff;
}

/* Metal pill (Replit .hq-pill-tab.metal) — light teal active (not navy); dot colour is inline per metal. */
.hq-pill-tab.metal.active {
    background: #EEF8F7;
    border-color: #006B63;
    color: #006B63;
}
.hq-pill-tab.metal .metal-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.hq-pill-tab.metal.active .metal-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }

/* Segmented button bar (Replit .hq-seg-bar / .hq-seg) — Lock-In view switcher. */
.hq-seg-bar {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: #F3F4F6;
    border-radius: 8px;
}
.hq-seg {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.hq-seg:hover { color: #2D4A5E; }
.hq-seg.active {
    background: #2D4A5E;
    color: #fff;
}

/* Kendo Time/Date picker chrome — the WRAPPER owns the border + focus so it matches the app's
   plain inputs. (Border/focus classes on the inner <input> bleed through Kendo's wrapper as a
   stray teal line, so the inner input is stripped of border/shadow here.) */
.k-timepicker.k-input,
.k-datepicker.k-input,
.k-datetimepicker.k-input {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: #fff;
    box-shadow: none;
}
.k-timepicker.k-input.k-focus,
.k-datepicker.k-input.k-focus,
.k-datetimepicker.k-input.k-focus {
    border-color: #006B63;
    box-shadow: 0 0 0 1px #006B63;
}
.k-timepicker .k-input-inner,
.k-datepicker .k-input-inner,
.k-datetimepicker .k-input-inner {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* =============================================================================
   Responsive shell (phones + tablets) — shared, so every current and future
   screen inherits it. Primary target: iPhone 13 Pro Max (428px). Breakpoint
   `lg` (1024px) matches Tailwind, below which the two navs become drawers.
   ============================================================================= */

/* iOS Safari's address bar shrinks the visual viewport; 100dvh keeps the fixed
   app shell from clipping. `body.h-screen` beats Tailwind's `.h-screen`. */
@supports (height: 100dvh) {
    body.h-screen { height: 100dvh; }
}

/* Shared off-canvas backdrop — injected once by responsive.js, reused by both
   the top-nav drawer and the admin sidebar drawer. */
.hq-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.hq-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* Off-canvas drawer base (top-nav mobile menu + any future drawer). */
.hq-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 50;
    width: 17rem;
    max-width: 82vw;
    background: #fff;
    overflow-y: auto;
    transition: transform 0.25s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.hq-drawer-left  { left: 0;  transform: translateX(-100%); }
.hq-drawer-right { right: 0; transform: translateX(100%); }
.hq-drawer.open  { transform: translateX(0); }

/* Admin left menu: fixed sidebar on desktop, off-canvas drawer below lg. */
@media (max-width: 1023px) {
    .hq-admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 50;
        width: 17rem;
        max-width: 82vw;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    }
    .hq-admin-sidebar.open { transform: translateX(0); }
}

/* Desktop: drawers/backdrop never apply — always reset to in-flow. */
@media (min-width: 1024px) {
    .hq-drawer,
    .hq-drawer-backdrop { display: none !important; }
}