/**
 * OmniTeQ — Global SaaS Light Theme
 * UI/UX only. Does not alter business logic, hooks, or form structure.
 */

:root {
    --ot-bg: #f4f7fe;
    --ot-surface: #ffffff;
    --ot-surface-muted: #f8fafc;
    --ot-border: #e2e8f0;
    --ot-border-light: #f1f5f9;
    --ot-text: #0f172a;
    --ot-text-muted: #64748b;
    --ot-primary: #2563eb;
    --ot-primary-hover: #1d4ed8;
    --ot-primary-soft: #eff6ff;
    /* Mockup navy shell */
    --ot-sidebar-bg: #06132d;
    --ot-sidebar-text: rgba(255, 255, 255, 0.78);
    --ot-sidebar-text-hover: #f0f9ff;
    --ot-sidebar-active: #2563eb;
    --ot-sidebar-hover: rgba(59, 130, 246, 0.16);
    --ot-sidebar-active-bg: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
    --ot-sidebar-active-text: #ffffff;
    --ot-sidebar-child-hover: rgba(59, 130, 246, 0.12);
    --ot-sidebar-child-active-bg: rgba(59, 130, 246, 0.22);
    --ot-sidebar-border: rgba(255, 255, 255, 0.08);
    --ot-sidebar-section: rgba(255, 255, 255, 0.42);
    --ot-accent: #0ea5e9;
    --ot-success: #16a34a;
    --ot-warning: #d97706;
    --ot-danger: #dc2626;
    --ot-info: #0284c7;
    /* Match Create Purchase — square-leaning UI */
    --ot-radius-sm: 3px;
    --ot-radius: 3px;
    --ot-radius-lg: 3px;
    --ot-control-radius: 3px;
    --ot-control-height: 40px;
    --ot-control-border: #e2e8f0;
    --ot-control-bg: #ffffff;
    --ot-control-bg-muted: #f8fafc;
    --ot-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --ot-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    --ot-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
    --ot-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ot-font-size-base: 15px;
    --ot-sidebar-font: 1.125rem;
    --ot-sidebar-child-font: 1rem;
    --ot-sidebar-section-font: 0.75rem;
    --ot-header-h: 60px;
}

/* ── Base & shell ───────────────────────────────────────────── */
body,
html,
.wrapper,
.content-wrapper,
.main-content,
#scrollable-container,
input,
select,
textarea,
button,
.btn,
.table,
.form-control,
.modal,
.dropdown-menu,
.navbar,
.sidebar {
    font-family: var(--ot-font) !important;
}

html {
    font-size: var(--ot-font-size-base);
}

body,
html,
.wrapper,
.content-wrapper,
.main-content,
#scrollable-container {
    background-color: var(--ot-bg) !important;
    color: var(--ot-text);
}

body {
    font-size: 1rem;
    line-height: 1.5;
}

.content {
    background: transparent !important;
}

.tw-flex.thetop {
    background: var(--ot-bg);
}

/* ── App header (same dark navy as sidebar) ───────────────── */
.main-app-header {
    background-color: var(--ot-sidebar-bg) !important;
    border-bottom: 1px solid var(--ot-sidebar-border) !important;
    box-shadow: none;
    display: flex !important;
    align-items: center !important;
    min-height: var(--ot-header-h);
}

/* Vertically center toolbar row; keep horizontal layout unchanged */
.main-app-header > .tw-px-5 {
    flex: 1 1 auto;
    width: 100%;
    display: flex !important;
    align-items: center !important;
}

.main-app-header > .tw-px-5 > .tw-flex {
    align-items: center !important;
    width: 100%;
}

.main-app-header > .tw-px-5 > .tw-flex > * {
    align-self: center !important;
}

.main-app-header .tw-flex.tw-items-center,
.main-app-header .tw-flex.tw-justify-end {
    align-items: center !important;
}

/* Brand text */
.main-app-header .bard-header-brand__text {
    color: #ffffff !important;
}

/* Ghost icon/control buttons on dark header */
.main-app-header .bard-header-date-btn,
.main-app-header details.tw-dw-dropdown > summary,
.main-app-header .header-user-menu__panel,
.main-app-header .header-user-menu__panel a {
    border-radius: 3px !important;
}

.main-app-header .small-view-button,
.main-app-header .side-bar-collapse,
.main-app-header #btnCalculator,
.main-app-header .load_notifications,
.main-app-header #view_todays_profit,
.main-app-header details > summary,
.main-app-header button.tw-font-mono,
.main-app-header .bard-header-date-btn,
.main-app-header a.tw-bg-white,
.main-app-header button.tw-bg-white,
.main-app-header .bard-header-pos-btn,
.main-app-header .notifications-menu > a,
.main-app-header .omniteq-theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none !important;
}

.main-app-header details > summary {
    list-style: none;
}

.main-app-header details > summary::-webkit-details-marker {
    display: none;
}

.main-app-header .notifications-menu {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}

.main-app-header .fa-info-circle.pull-left {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.main-app-header .small-view-button:hover,
.main-app-header .side-bar-collapse:hover,
.main-app-header #btnCalculator:hover,
.main-app-header .load_notifications:hover,
.main-app-header #view_todays_profit:hover,
.main-app-header details > summary:hover,
.main-app-header button.tw-font-mono:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

/* Text labels on header toolbar controls (not open dropdown panels) */
.main-app-header > .tw-px-5 > .tw-flex details > summary .tw-text-gray-800,
.main-app-header > .tw-px-5 > .tw-flex details > summary span {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* SVG / icon strokes inherit light color */
.main-app-header svg {
    display: block;
    flex-shrink: 0;
    stroke: currentColor;
    color: inherit;
}

.main-app-header .small-view-button svg,
.main-app-header .side-bar-collapse svg,
.main-app-header #btnCalculator svg,
.main-app-header .load_notifications svg,
.main-app-header #view_todays_profit svg,
.main-app-header details > summary svg {
    margin: 0 !important;
}

.main-app-header .side-bar-heading,
.main-app-header h1 {
    color: #ffffff !important;
}

/* POS button — bright blue, stands out on dark bar */
.main-app-header .bard-header-pos-btn {
    background: var(--ot-sidebar-active) !important;
    border-color: var(--ot-sidebar-active) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

.main-app-header .bard-header-pos-btn:hover {
    background: var(--ot-primary-hover) !important;
    border-color: var(--ot-primary-hover) !important;
}

/* Repair / success action buttons stay green for visibility */
.main-app-header .btn-success {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

/* Dropdown panels stay opaque below the dark header bar */
.main-app-header .tw-dw-dropdown-content,
.main-app-header .dropdown-menu,
.main-app-header ul[role="menu"],
.main-app-header .header-user-menu__panel {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--ot-text) !important;
    border: 1px solid var(--ot-border) !important;
    box-shadow: var(--ot-shadow-md) !important;
}

.main-app-header .tw-dw-dropdown-content a,
.main-app-header ul[role="menu"] a,
.main-app-header .header-user-menu__panel a {
    color: var(--ot-text-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.main-app-header .tw-dw-dropdown-content a:hover,
.main-app-header ul[role="menu"] a:hover,
.main-app-header .header-user-menu__panel a:hover {
    color: var(--ot-text) !important;
    background: var(--ot-surface-muted) !important;
}

.main-app-header .tw-dw-dropdown-content .tw-text-gray-900,
.main-app-header ul[role="menu"] .tw-text-gray-900,
.main-app-header .header-user-menu__panel .tw-text-gray-900,
.main-app-header .tw-dw-dropdown-content span,
.main-app-header ul[role="menu"] span,
.main-app-header .header-user-menu__panel span,
.main-app-header .tw-dw-dropdown-content p,
.main-app-header ul[role="menu"] p,
.main-app-header .header-user-menu__panel p,
.main-app-header .dropdown-menu span,
.main-app-header .dropdown-menu a {
    color: var(--ot-text-muted) !important;
}

.main-app-header .header-user-menu__panel .tw-text-gray-900,
.main-app-header .header-user-menu__panel .tw-font-medium {
    color: var(--ot-text) !important;
}

.main-app-header .dropdown-menu a:hover {
    color: var(--ot-text) !important;
}

/* Notification badge */
.main-app-header .notifications_count.label-warning {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* Notifications dropdown panel */
.main-app-header .notifications-menu .notifications-dropdown-panel {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid var(--ot-border) !important;
    box-shadow: var(--ot-shadow-md) !important;
    opacity: 1 !important;
}

.main-app-header .notifications-menu .notifications-dropdown-panel > li,
.main-app-header .notifications-menu .notifications-dropdown-panel .menu {
    background: transparent !important;
}

.main-app-header .notifications-menu .notification-li a {
    display: block;
    width: 100%;
    color: var(--ot-text-muted) !important;
    text-decoration: none !important;
}

.main-app-header .notifications-menu .notification-li .notif-info {
    color: var(--ot-text) !important;
}

.main-app-header .notifications-menu .notification-li .time {
    color: var(--ot-text-muted) !important;
}

.main-app-header .notifications-menu .notification-li:hover {
    background: var(--ot-surface-muted) !important;
}

.main-app-header .notifications-menu .notification-li.unread {
    background: rgba(59, 130, 246, 0.08) !important;
}

.main-app-header .notifications-menu .notification-li.unread .notif-info {
    font-weight: 600;
}

/* Superadmin info icon */
.main-app-header .fa-info-circle {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ── Sidebar (BardPOS dark navy + blue active) ───────────── */
.side-bar,
.bard-sidebar {
    background: var(--ot-sidebar-bg) !important;
    border-right: none !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
}

.sidebar-brand {
    background: var(--ot-sidebar-bg) !important;
    border-color: var(--ot-sidebar-border) !important;
    border-bottom: 1px solid var(--ot-sidebar-border) !important;
    min-height: var(--ot-header-h);
}

.sidebar-brand .side-bar-heading {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}

.sidebar-brand__logo {
    display: block;
    max-width: calc(100% - 24px);
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
}

img[src*="/uploads/business_logos/"],
img[src*="uploads/business_logos/"] {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

#side-bar {
    border-right: none !important;
    background: transparent !important;
}

/* All sidebar nav links */
.ot-sidebar-link,
#side-bar a.ot-nav-link,
#side-bar a.drop_down,
.side-bar .ot-sidebar-link,
#side-bar a.tw-text-sm:not(.ot-sidebar-child-link),
.side-bar a.tw-text-sm:not(.ot-sidebar-child-link) {
    color: var(--ot-sidebar-text) !important;
    border-radius: 3px !important;
    margin: 2px 8px;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    font-size: var(--ot-sidebar-font) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

.ot-sidebar-link:hover,
#side-bar a.ot-nav-link:hover,
#side-bar a.drop_down:hover,
.side-bar .ot-sidebar-link:hover,
#side-bar a:hover:not(.ot-sidebar-child-link) {
    background: var(--ot-sidebar-hover) !important;
    color: var(--ot-sidebar-text-hover) !important;
}

/* Selected / active — soft blue tint (not strong solid blue) */
.ot-sidebar-link--active,
#side-bar a.ot-sidebar-link--active,
#side-bar a.tw-bg-blue-50,
#side-bar a.tw-text-blue-700,
#side-bar a.tw-bg-gray-200,
.side-bar a.tw-bg-blue-50,
.side-bar a.tw-bg-gray-200 {
    background: var(--ot-sidebar-active-bg) !important;
    color: var(--ot-sidebar-active-text) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.ot-sidebar-link--active svg,
.ot-sidebar-link--active .svg,
#side-bar a.ot-sidebar-link--active svg,
#side-bar a.tw-bg-gray-200 svg,
#side-bar a.tw-bg-blue-50 svg {
    color: #93c5fd !important;
    stroke: #93c5fd !important;
}

.ot-sidebar-link--active i,
#side-bar a.ot-sidebar-link--active i {
    color: #93c5fd !important;
}

.ot-sidebar-link svg,
.ot-sidebar-link .svg,
#side-bar a.ot-nav-link svg,
#side-bar a.drop_down svg {
    opacity: 0.9;
    flex-shrink: 0;
}

/* Dropdown parent row (BardPOS accordion) */
.ot-sidebar-dropdown {
    margin-bottom: 2px;
}

#side-bar > div.ot-sidebar-dropdown,
#side-bar > div.ot-sidebar-parent--active {
    background: transparent !important;
}

.ot-sidebar-dropdown--open > a.drop_down,
#side-bar > div.ot-sidebar-parent--active > a.drop_down {
    background: var(--ot-sidebar-active-bg) !important;
    color: var(--ot-sidebar-active-text) !important;
}

/* Section headers (Premium Modules, etc.) */
.ot-sidebar-section-header,
#side-bar .ot-sidebar-section-header {
    color: var(--ot-sidebar-section) !important;
    font-size: var(--ot-sidebar-section-font) !important;
    letter-spacing: 0.1em;
    padding: 18px 16px 8px !important;
    margin-top: 8px;
    font-weight: 700 !important;
    text-transform: uppercase;
    border-top: 1px solid var(--ot-sidebar-border);
}

#side-bar .ot-sidebar-section-header:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 8px !important;
}

/* Expanded submenu panel (BardPOS-style nested links + blue accent line) */
.ot-sidebar-submenu,
#side-bar .ot-sidebar-submenu,
#side-bar .chiled {
    position: relative !important;
    padding: 4px 8px 8px 12px !important;
    margin: 2px 8px 6px 1.35rem !important;
    border-left: none !important;
}

/* Vertical blue guide line — BardPOS yellow equivalent */
.ot-sidebar-submenu::before,
#side-bar .ot-sidebar-submenu::before,
#side-bar .chiled::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 45%, #1d4ed8 100%);
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.35);
    pointer-events: none;
}

.ot-sidebar-dropdown--open > .ot-sidebar-submenu::before,
.ot-sidebar-dropdown--open > .chiled::before,
#side-bar .ot-sidebar-parent--active > .ot-sidebar-submenu::before,
#side-bar .ot-sidebar-parent--active > .chiled::before {
    background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 40%, #2563eb 100%);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.45);
}

.ot-sidebar-submenu .ot-sidebar-child-link,
#side-bar .ot-sidebar-submenu a,
#side-bar .chiled a {
    display: flex !important;
    align-items: center;
    color: rgba(255, 255, 255, 0.58) !important;
    padding: 8px 12px 8px 2.75rem !important;
    margin: 1px 0 !important;
    border-radius: var(--ot-control-radius) !important;
    font-size: var(--ot-sidebar-child-font) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.ot-sidebar-submenu .ot-sidebar-child-link:hover,
#side-bar .chiled a:hover {
    color: #e0f2fe !important;
    background: var(--ot-sidebar-child-hover) !important;
}

.ot-sidebar-submenu .ot-sidebar-child-link--active,
#side-bar .chiled a.ot-sidebar-child-link--active,
#side-bar .chiled a.tw-text-primary-700 {
    color: #bfdbfe !important;
    font-weight: 600 !important;
    background: var(--ot-sidebar-child-active-bg) !important;
}

/* Chevron on dropdown parents */
#side-bar a.drop_down .svg {
    color: rgba(147, 197, 253, 0.55) !important;
    stroke: rgba(147, 197, 253, 0.55) !important;
    transition: transform 0.2s ease, color 0.15s ease;
}

#side-bar a.drop_down:hover .svg,
.ot-sidebar-dropdown--open > a.drop_down .svg {
    color: #93c5fd !important;
    stroke: #93c5fd !important;
}

/* Neutralize any legacy Tailwind grey hover/active on sidebar links */
#side-bar a.hover\:tw-bg-gray-50:hover,
#side-bar a.hover\:tw-bg-gray-100:hover,
#side-bar a[class*="hover:tw-bg-gray"]:hover {
    background: var(--ot-sidebar-hover) !important;
    color: var(--ot-sidebar-text-hover) !important;
}

#side-bar .ot-sidebar-link i,
#side-bar a.ot-nav-link i,
#side-bar a.drop_down i {
    color: inherit !important;
    width: 1.35rem;
    font-size: 1.15rem !important;
    text-align: center;
}

#side-bar a.drop_down .svg,
#side-bar a.ot-nav-link svg,
#side-bar a.ot-sidebar-link svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
}

@media (min-width: 1024px) {
    .sidebar-brand {
        display: none !important;
    }
}

/* ── Page content header (card style, not dark band) ─────── */
/* Exclude CRM client portal .content-header-custom (branded gradient band in custom.css) */
.content-header:not(.content-header-custom) {
    background: var(--ot-surface) !important;
    border: 1px solid var(--ot-border) !important;
    border-radius: var(--ot-radius) !important;
    padding: 16px 20px !important;
    margin: 0 0 20px 0 !important;
    box-shadow: var(--ot-shadow-sm);
}

.content-header:not(.content-header-custom) h1,
.content-header:not(.content-header-custom) h1 small,
.content-header:not(.content-header-custom) .h1,
.content-header:not(.content-header-custom) .h1 small {
    color: var(--ot-text) !important;
    font-weight: 700 !important;
    font-size: 1.35rem !important;
}

.content-header:not(.content-header-custom) h1 small {
    color: var(--ot-text-muted) !important;
    opacity: 1 !important;
}

.content-header:not(.content-header-custom) .breadcrumb {
    background: transparent !important;
    color: var(--ot-text-muted) !important;
    margin-bottom: 0;
    padding: 4px 0 0;
}

.content-header:not(.content-header-custom) .breadcrumb > li > a {
    color: var(--ot-primary) !important;
}

.content-header:not(.content-header-custom) .breadcrumb > .active {
    color: var(--ot-text-muted) !important;
}

/* ── Cards / boxes ────────────────────────────────────────── */
.box,
.card,
.panel,
.info-box,
.nav-tabs-custom,
.external-event {
    background: var(--ot-surface) !important;
    border: 1px solid var(--ot-border) !important;
    border-radius: var(--ot-radius) !important;
    box-shadow: var(--ot-shadow) !important;
}

.box-header,
.card-header,
.panel-heading {
    background: var(--ot-surface-muted) !important;
    border-bottom: 1px solid var(--ot-border) !important;
    border-radius: var(--ot-radius) var(--ot-radius) 0 0 !important;
    padding: 14px 18px !important;
}

.box-title,
.card-title,
.panel-title {
    color: var(--ot-text) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

.box-body,
.card-body,
.panel-body {
    padding: 18px !important;
}

.box-footer,
.card-footer {
    background: var(--ot-surface-muted) !important;
    border-top: 1px solid var(--ot-border) !important;
    border-radius: 0 0 var(--ot-radius) var(--ot-radius) !important;
}

/* ── Dashboard (mockup layout) ──────────────────────────── */
#scrollable-container:has(.bard-dashboard-intro) {
    background: var(--ot-bg) !important;
    padding-top: 0.65rem !important;
}

@media (min-width: 992px) {
    #scrollable-container:has(.bard-dashboard-intro) {
        padding-top: 0.85rem !important;
    }
}

.bard-dashboard-intro,
.dashboard-header {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0.35rem !important;
    padding-top: 0.2rem !important;
    padding-bottom: 0 !important;
}

.bard-dashboard-intro__shop,
.dashboard-header h1 {
    color: var(--ot-text) !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 !important;
}

.bard-dashboard-intro__welcome {
    color: #94a3b8 !important;
    font-size: 0.9rem !important;
    margin-top: 4px;
    font-weight: 400;
}

.bard-filter-btn,
.dashboard-header-btn {
    background: var(--ot-surface) !important;
    border: 1px solid #e8ecf0 !important;
    color: var(--ot-text) !important;
    border-radius: var(--ot-control-radius) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    min-height: 38px;
}

.bard-filter-btn:hover,
.dashboard-header-btn:hover {
    border-color: #d1d9e0 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}

.dashboard-header-select + .select2-container .select2-selection {
    border-radius: var(--ot-control-radius) !important;
    border-color: #e8ecf0 !important;
    min-height: 38px;
}

/* Top KPI strip — separate mockup cards */
.bard-kpi-strip {
    padding-top: 0.65rem !important;
    padding-bottom: 0.85rem !important;
}

.bard-kpi-strip__inner {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.bard-kpi-item {
    position: relative;
    min-width: 0;
    padding: 1rem 1.05rem;
    background: #ffffff;
    border: none;
    border-radius: var(--ot-radius);
    box-shadow: var(--ot-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bard-kpi-item:last-child {
    border-right: none;
}

.bard-kpi-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--ot-shadow-md);
}

.bard-kpi-period {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 500;
}

.bard-kpi-period--link {
    text-decoration: none;
    color: #64748b;
    transition: color 0.15s ease;
}

.bard-kpi-period--link:hover {
    color: #2563eb;
    text-decoration: none;
}

.bard-kpi-trend {
    margin: 0.2rem 0 0;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
}

.bard-kpi-trend.is-up { color: #16a34a; }
.bard-kpi-trend.is-down { color: #dc2626; }
.bard-kpi-trend.is-flat { color: #94a3b8; }

.bard-kpi-item__row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.bard-kpi-body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bard-kpi-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bard-kpi-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
}

/* Soft pastel square tiles — match List Products KPI icons */
.bard-kpi-icon--blue   { background: #dbeafe; color: #2563eb; }
.bard-kpi-icon--pink,
.bard-kpi-icon--green  { background: #dcfce7; color: #16a34a; }
.bard-kpi-icon--amber,
.bard-kpi-icon--purple { background: #ede9fe; color: #7c3aed; }
.bard-kpi-icon--teal,
.bard-kpi-icon--indigo { background: #ccfbf1; color: #0d9488; }
.bard-kpi-icon--orange { background: #ffedd5; color: #ea580c; }
.bard-kpi-icon--sky    { background: #e0f2fe; color: #0284c7; }
.bard-kpi-icon--red    { background: #fee2e2; color: #dc2626; }

.bard-kpi-label {
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.2;
}

.bard-kpi-label .fa-info-circle,
.bard-kpi-label .hover-q {
    font-size: 0.78rem;
    line-height: 1;
}

.bard-kpi-value {
    margin: 0.15rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
    font-family: var(--ot-font) !important;
}

/* Performance section */
.bard-performance-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0.15rem 0 0.65rem;
}

.bard-performance-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

@media (min-width: 1100px) {
    .bard-performance-panel {
        grid-template-columns: 1fr 168px;
    }

    .bard-performance-panel--no-sales {
        grid-template-columns: 1fr !important;
    }
}

.bard-performance-charts {
    min-width: 0;
}

@media (min-width: 900px) {
    .bard-performance-row:not(.bard-performance-row--no-income) .bard-performance-charts {
        border-bottom: none;
    }
}

@media (min-width: 1100px) {
    .bard-performance-charts {
        border-bottom: none;
        border-right: none;
    }

    .bard-performance-panel:not(.bard-performance-panel--no-sales) .bard-performance-row {
        border-right: 1px solid #eef1f4;
    }
}

.bard-chart-block + .bard-chart-block {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.bard-chart-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 0.85rem;
}

.bard-chart-wrap {
    min-height: 156px;
    padding: 0.25rem 0;
}

.bard-chart-wrap canvas {
    max-width: 100%;
}

.bard-chart-block .bard-chart-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
}

.bard-chart-block .bard-chart-footer__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bard-chart-block .bard-chart-footer__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2563eb;
}

.bard-chart-block .bard-chart-footer__item--avg .bard-chart-footer__dot {
    background: #38bdf8;
}

.bard-chart-block .bard-chart-footer__label {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
}

.bard-chart-block .bard-chart-footer__value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}

/* Performance sidebar metrics */
.bard-kpi-sidebar {
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0;
    min-width: 0;
}

.bard-kpi-sidebar__item {
    position: relative;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid #eef1f4;
    transition: background 0.15s ease;
}

.bard-kpi-sidebar .bard-kpi-item__row {
    align-items: flex-start;
    gap: 0.55rem;
}

.bard-kpi-sidebar .bard-kpi-icon {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    margin-top: 0;
}

.bard-kpi-sidebar .bard-kpi-icon svg {
    width: 14px;
    height: 14px;
}

.bard-kpi-sidebar .bard-kpi-label {
    font-size: 0.72rem;
    line-height: 1.25;
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 3.4rem;
    padding-top: 0.2rem;
}

.bard-kpi-sidebar .bard-kpi-value {
    display: block;
    width: 100%;
    margin: 0.35rem 0 0;
    padding: 0;
    text-align: left;
    font-size: 0.95rem;
}

.bard-kpi-sidebar .bard-kpi-period {
    top: 0.7rem;
    right: 0.75rem;
    transform: none;
    font-size: 0.68rem;
    font-weight: 600;
}

.bard-kpi-sidebar__item:last-child {
    border-bottom: none;
}

.bard-kpi-sidebar__item:hover {
    background: rgba(59, 130, 246, 0.03);
}

@media (max-width: 1199px) {
    .bard-kpi-strip__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1099px) {
    .bard-kpi-item {
        border-bottom: none;
    }

    .bard-kpi-item:nth-child(2n) {
        border-right: none;
    }

    .bard-kpi-item:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

@media (max-width: 767px) {
    .bard-kpi-strip__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .bard-kpi-strip__inner {
        grid-template-columns: 1fr;
    }

    .bard-kpi-item {
        flex: 1 1 100%;
        border-right: none !important;
    }

    .bard-kpi-item:not(:last-child) {
        border-bottom: 1px solid #eef1f4;
    }
}

/* Widget / table cards below performance */
.bard-widgets-grid .tw-bg-white.tw-rounded-xl,
.bard-widgets-grid .tw-bg-white.tw-shadow-sm.tw-rounded-xl,
.tw-bg-white.tw-rounded-xl.tw-ring-1,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl {
    border-radius: 3px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    border: none !important;
}

.bard-widgets-grid .tw-ring-gray-200 {
    --tw-ring-color: transparent !important;
}

/* Header brand typography */
.bard-header-brand__text {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.bard-header-pos-btn {
    border-radius: var(--ot-control-radius) !important;
}

/* ── Tables ───────────────────────────────────────────────── */
.table {
    border-collapse: collapse;
    border-spacing: 0;
}

.table > thead > tr > th,
.table > thead > tr > td {
    background: var(--ot-surface-muted) !important;
    color: var(--ot-text-muted) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--ot-border) !important;
    padding: 12px 14px !important;
    white-space: nowrap;
    box-sizing: border-box;
}

.table > tbody > tr > td {
    padding: 12px 14px !important;
    vertical-align: middle !important;
    border-color: var(--ot-border-light) !important;
    color: var(--ot-text);
    box-sizing: border-box;
}

/* DataTables scroll — auto layout; sort icons need right padding */
.dataTables_scrollHead table.dataTable,
.dataTables_scrollBody table.dataTable,
.dataTables_scrollFoot table.dataTable,
.dataTables_scrollHeadInner table,
.dataTables_scrollBody table,
.dataTables_scrollFootInner table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
}

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc {
    padding-right: 2rem !important;
    position: relative !important;
    background-image: none !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    top: 50% !important;
    bottom: auto !important;
    right: 0.6rem !important;
    transform: translateY(-50%);
}

.dataTables_scrollHead .table > thead > tr > th,
.dataTables_scrollHead .table > thead > tr > td,
.dataTables_scrollBody .table > tbody > tr > td {
    box-sizing: border-box !important;
}

.dataTables_scrollBody {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

.table > tbody > tr:hover > td {
    background: var(--ot-surface-muted) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: rgba(248, 250, 252, 0.6);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--ot-control-radius) !important;
    border-color: var(--ot-control-border) !important;
    min-height: var(--ot-control-height) !important;
    height: var(--ot-control-height) !important;
    background: var(--ot-control-bg) !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--ot-primary) !important;
    border-color: var(--ot-primary) !important;
    color: #fff !important;
    border-radius: var(--ot-control-radius) !important;
}

/* ── Forms (Create Purchase control look — system-wide) ───── */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.input-group input[type="text"],
.input-group input[type="number"],
.input-group input[type="email"],
.input-group input[type="password"],
.input-group input[type="tel"],
.input-group input[type="search"],
.dataTables_filter input,
.ui-autocomplete-input.form-control {
    border: 1px solid var(--ot-control-border) !important;
    border-radius: var(--ot-control-radius) !important;
    min-height: var(--ot-control-height);
    background-color: var(--ot-control-bg) !important;
    box-shadow: none !important;
    color: var(--ot-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Single-line controls: flush-left text + vertically centered (system-wide) */
input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.fuel-pos-input-with-icon),
select.form-control:not(.fuel-pos-input-with-icon),
.form-control:not(textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.fuel-pos-input-with-icon),
.input-group input[type="text"],
.input-group input[type="number"],
.input-group input[type="email"],
.input-group input[type="password"],
.input-group input[type="tel"],
.input-group input[type="search"],
.input-group input[type="url"],
.input-group input[type="date"],
.input-group input[type="datetime-local"],
.input-group input[type="time"],
.dataTables_filter input,
.ui-autocomplete-input.form-control,
input[type="text"].form-control:not(.fuel-pos-input-with-icon),
input[type="number"].form-control:not(.fuel-pos-input-with-icon),
input[type="email"].form-control:not(.fuel-pos-input-with-icon),
input[type="password"].form-control:not(.fuel-pos-input-with-icon),
input[type="tel"].form-control:not(.fuel-pos-input-with-icon),
input[type="search"].form-control:not(.fuel-pos-input-with-icon),
input[type="url"].form-control:not(.fuel-pos-input-with-icon),
input[type="date"].form-control:not(.fuel-pos-input-with-icon),
input[type="datetime-local"].form-control:not(.fuel-pos-input-with-icon),
input[type="time"].form-control:not(.fuel-pos-input-with-icon) {
    height: var(--ot-control-height) !important;
    min-height: var(--ot-control-height) !important;
    padding: 0 8px !important;
    line-height: calc(var(--ot-control-height) - 2px) !important;
    text-align: left !important;
    text-align-last: left !important;
    text-indent: 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* Icon-prefixed Fuel POS inputs need left room for the absolute icon */
input.form-control.fuel-pos-input-with-icon,
input[type="text"].form-control.fuel-pos-input-with-icon,
input[type="number"].form-control.fuel-pos-input-with-icon,
select.form-control.fuel-pos-input-with-icon {
    height: var(--ot-control-height) !important;
    min-height: var(--ot-control-height) !important;
    padding: 0 12px 0 36px !important;
    line-height: calc(var(--ot-control-height) - 2px) !important;
    text-align: left !important;
    text-indent: 0 !important;
    box-sizing: border-box !important;
}
textarea.form-control.fuel-pos-input-with-icon {
    padding-left: 36px !important;
}

select.form-control {
    text-align: left !important;
    text-align-last: left !important;
}

.form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
    text-align: left !important;
    text-indent: 0 !important;
    opacity: 0.75;
}

textarea.form-control {
    min-height: 80px;
    height: auto !important;
    line-height: 1.45 !important;
    padding: 6px 8px !important;
    text-align: left !important;
    text-indent: 0 !important;
    vertical-align: top !important;
}

.form-control.input-sm,
input.input-sm,
select.input-sm {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 6px !important;
    line-height: 28px !important;
    font-size: 0.8rem;
    text-align: left !important;
    text-indent: 0 !important;
    vertical-align: middle !important;
    border-radius: var(--ot-control-radius) !important;
}

.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--ot-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    outline: none;
}

.form-group label,
.control-label {
    font-weight: 700 !important;
    color: #334155;
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
}

.input-group-addon {
    background: var(--ot-control-bg) !important;
    border-color: var(--ot-control-border) !important;
    color: var(--ot-text-muted);
    border-radius: var(--ot-control-radius) 0 0 var(--ot-control-radius);
    min-height: var(--ot-control-height);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Keep input-group addon and Select2 control on one line.
   Exclude POS cart qty steppers — they use a compact custom layout. */
.input-group:not(.file-caption-main):not(.pos-cart-qty-stepper) {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 100%;
}

.input-group:not(.file-caption-main):not(.pos-cart-qty-stepper) > .input-group-addon,
.input-group:not(.file-caption-main):not(.pos-cart-qty-stepper) > .input-group-btn {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    width: auto;
    min-width: 40px;
}

.input-group:not(.file-caption-main):not(.pos-cart-qty-stepper) > .form-control,
.input-group:not(.file-caption-main):not(.pos-cart-qty-stepper) > input.form-control,
.input-group:not(.file-caption-main):not(.pos-cart-qty-stepper) > select.form-control,
.input-group:not(.file-caption-main):not(.pos-cart-qty-stepper) > input[type="text"],
.input-group:not(.file-caption-main):not(.pos-cart-qty-stepper) > input[type="number"],
.input-group:not(.file-caption-main):not(.pos-cart-qty-stepper) > input[type="email"],
.input-group:not(.file-caption-main):not(.pos-cart-qty-stepper) > input[type="password"],
.input-group:not(.file-caption-main):not(.pos-cart-qty-stepper) > input[type="tel"],
.input-group:not(.file-caption-main):not(.pos-cart-qty-stepper) > input[type="search"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 1% !important;
    display: block !important;
    float: none !important;
    height: var(--ot-control-height) !important;
    min-height: var(--ot-control-height) !important;
    align-self: stretch;
    border-radius: var(--ot-control-radius) !important;
}

.input-group > .form-control:first-child,
.input-group > input.form-control:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .input-group-addon:first-child + .form-control,
.input-group > .input-group-addon:first-child + input {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group:not(.pos-cart-qty-stepper) > .input-group-btn > .btn,
.input-group-btn > .btn {
    min-height: var(--ot-control-height) !important;
    height: var(--ot-control-height) !important;
    border-radius: var(--ot-control-radius) !important;
    border-color: var(--ot-control-border) !important;
    box-shadow: none !important;
    padding: 0 0.75rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* POS cart qty stepper — must win over .input-group-btn > .btn (theme loads after pos-modern) */
.pos-modern-layout #pos_table .pos-cart-qty-stepper > .input-group-btn > .btn,
.pos-modern-layout #pos_table .pos-cart-qty-stepper .quantity-up,
.pos-modern-layout #pos_table .pos-cart-qty-stepper .quantity-down {
    min-height: 0 !important;
    height: 100% !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.pos-modern-layout #pos_table .pos-cart-qty-stepper > input.pos_quantity,
.pos-modern-layout #pos_table .pos-cart-qty-stepper > input.form-control {
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    min-width: 42px !important;
    max-width: none !important;
    padding: 0 1px !important;
    text-align: center !important;
    border-radius: 0 !important;
    line-height: 26px !important;
}

.input-group > .input-group-addon + .form-control + .input-group-btn > .btn,
.input-group > .form-control + .input-group-btn > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.input-group > .select2-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 1% !important;
    max-width: 100% !important;
    display: block !important;
}

.input-group > .select2-container .select2-selection--single,
.input-group > .select2-container .select2-selection--multiple {
    height: var(--ot-control-height) !important;
    min-height: var(--ot-control-height) !important;
}

/* Select2 first, button/addon on the right (e.g. Supplier +) */
.input-group > .select2-container:first-child .select2-selection--single,
.input-group > .select2-container:first-child .select2-selection--multiple,
.input-group > select.select2-hidden-accessible:first-child + .select2-container .select2-selection--single,
.input-group > select.select2-hidden-accessible:first-child + .select2-container .select2-selection--multiple {
    border-top-left-radius: var(--ot-control-radius) !important;
    border-bottom-left-radius: var(--ot-control-radius) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Addon first, then Select2 */
.input-group > .input-group-addon:first-child + .select2-container .select2-selection--single,
.input-group > .input-group-addon:first-child + .select2-container .select2-selection--multiple,
.input-group > .input-group-addon:first-child + select.select2-hidden-accessible + .select2-container .select2-selection--single,
.input-group > .input-group-addon:first-child + select.select2-hidden-accessible + .select2-container .select2-selection--multiple {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .select2-container .select2-selection__rendered {
    line-height: 38px !important;
}

.input-group > .select2-container .select2-selection__arrow {
    height: 38px !important;
}

/* bootstrap-fileinput caption bar needs table layout (not flex) */
.input-group.file-caption-main {
    display: table !important;
    border-collapse: separate !important;
    width: 100%;
}

.input-group.file-caption-main > .form-control,
.input-group.file-caption-main > .input-group-btn {
    display: table-cell !important;
    float: none !important;
    vertical-align: middle;
    width: auto;
}

.input-group.file-caption-main > .input-group-btn {
    width: 1%;
    white-space: nowrap;
}

.input-group.file-caption-main .btn-file {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.input-group.file-caption-main .btn-file input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    font-size: 100px;
    cursor: pointer;
    display: block;
    min-width: 100%;
    min-height: 100%;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-selection.select2-selection--single {
    border: 1px solid var(--ot-control-border) !important;
    border-radius: var(--ot-control-radius) !important;
    min-height: var(--ot-control-height) !important;
    height: var(--ot-control-height) !important;
    background-color: var(--ot-control-bg) !important;
    box-shadow: none !important;
    /* Kill AdminLTE's padding: 6px 12px which doubles with rendered padding */
    padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--ot-control-height) - 2px) !important;
    height: calc(var(--ot-control-height) - 2px) !important;
    margin-top: 0 !important;
    padding-left: 8px !important;
    padding-right: 28px !important;
    text-align: left !important;
    text-indent: 0 !important;
    color: var(--ot-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    text-align: left !important;
    color: #94a3b8 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--ot-control-height) - 2px) !important;
    top: 0 !important;
    right: 6px;
}

.select2-container--default .select2-selection--multiple {
    overflow: hidden;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    line-height: 36px !important;
    padding: 0 6px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: left !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0 4px 0 0 !important;
    padding: 0 6px !important;
    height: 24px;
    line-height: 22px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--ot-control-radius) !important;
    border: 1px solid var(--ot-control-border) !important;
    /* AdminLTE uses white text on blue chips — keep text dark on our light chip bg */
    background: #e2e8f0 !important;
    color: var(--ot-text) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display,
.select2-container--default .select2-selection--multiple .select2-selection__choice > span {
    color: inherit !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--ot-text-muted) !important;
    border: none !important;
    background: transparent !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--ot-primary) !important;
}

.select2-dropdown {
    border-color: var(--ot-control-border) !important;
    border-radius: var(--ot-control-radius) !important;
    box-shadow: var(--ot-shadow) !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--ot-control-border) !important;
    border-radius: var(--ot-control-radius) !important;
    min-height: 34px !important;
    box-shadow: none !important;
}

/* ── Calendars / date pickers ─────────────────────────────── */
.datepicker,
.datepicker-dropdown,
.bootstrap-datetimepicker-widget,
.bootstrap-datetimepicker-widget.dropdown-menu,
.daterangepicker {
    --ot-drp-bg: var(--ot-surface, #ffffff);
    --ot-drp-bg-muted: var(--ot-surface-muted, #f8fafc);
    --ot-drp-border: var(--ot-border, #e2e8f0);
    --ot-drp-text: var(--ot-text, #0f172a);
    --ot-drp-muted: var(--ot-text-muted, #64748b);
    --ot-drp-primary: var(--ot-primary, #2563eb);
    --ot-drp-primary-soft: var(--ot-primary-soft, #eff6ff);
    --ot-drp-range: rgba(37, 99, 235, 0.14);
    --ot-drp-day-hover: rgba(15, 23, 42, 0.06);
    border: 1px solid var(--ot-drp-border) !important;
    border-radius: 3px !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16) !important;
    background: var(--ot-drp-bg) !important;
    color: var(--ot-drp-text) !important;
    font-family: inherit !important;
    overflow: hidden;
}

.datepicker table tr td,
.datepicker table tr th,
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th,
.daterangepicker td,
.daterangepicker th {
    border-radius: 3px !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--ot-drp-primary) !important;
    border-color: var(--ot-drp-primary) !important;
    color: #fff !important;
    border-radius: 3px !important;
}

.datepicker .datepicker-switch,
.bootstrap-datetimepicker-widget .picker-switch,
.daterangepicker .calendar-table .next,
.daterangepicker .calendar-table .prev {
    border-radius: 3px !important;
}

/* Date range: keep popup above page chrome when parentEl is body */
body > .daterangepicker {
    z-index: 1060 !important;
}

/* Preset list */
.daterangepicker .ranges {
    margin: 0 !important;
    padding: 0.45rem !important;
    background: var(--ot-drp-bg) !important;
    border: 0 !important;
}

.daterangepicker .ranges ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 0.2rem !important;
}

.daterangepicker .ranges li {
    margin: 0 !important;
    padding: 0.45rem 0.65rem !important;
    border-radius: 3px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--ot-drp-text) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.daterangepicker .ranges li:hover {
    background: var(--ot-drp-bg-muted) !important;
    border-color: var(--ot-drp-border) !important;
    color: var(--ot-drp-text) !important;
}

.daterangepicker .ranges li.active {
    background: var(--ot-drp-primary-soft) !important;
    border-color: rgba(37, 99, 235, 0.28) !important;
    color: var(--ot-drp-primary) !important;
}

/*
 * Compact side-by-side picker: presets LEFT + one calendar RIGHT.
 * Applied whenever ot-drp-single-cal is present (not only Custom Range).
 * IMPORTANT: never set display:!important here — it overrides jQuery hide()
 * and leaves the calendar stuck on screen.
 */
.daterangepicker.ot-drp-single-cal {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    min-width: 0 !important;
    width: 410px !important;
    max-width: min(410px, calc(100vw - 16px)) !important;
}

/* Force flex while the plugin has shown the popup (block or flex inline styles). */
.daterangepicker.ot-drp-single-cal[style*="display: block"],
.daterangepicker.ot-drp-single-cal[style*="display:block"],
.daterangepicker.ot-drp-single-cal[style*="display: flex"],
.daterangepicker.ot-drp-single-cal[style*="display:flex"] {
    display: flex !important;
}

/* Hard-hide only when explicitly closed — never fight an open picker. */
.daterangepicker.ot-drp-single-cal[style*="display: none"],
.daterangepicker.ot-drp-single-cal[style*="display:none"] {
    display: none !important;
}

.daterangepicker.ot-drp-single-cal .ot-drp-hint {
    display: none !important;
}

.daterangepicker.ot-drp-single-cal .ranges {
    display: block !important;
    float: none !important;
    clear: none !important;
    order: 1 !important;
    flex: 0 0 132px !important;
    width: 132px !important;
    max-width: 132px !important;
    max-height: 250px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 0.35rem !important;
    border: 0 !important;
    border-right: 1px solid var(--ot-drp-border) !important;
    box-sizing: border-box !important;
}

.daterangepicker.ot-drp-single-cal .ranges ul {
    width: 100% !important;
}

.daterangepicker.ot-drp-single-cal .ranges li {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.daterangepicker.ot-drp-single-cal .drp-calendar.right {
    display: none !important;
}

.daterangepicker.ot-drp-single-cal .drp-calendar.left {
    display: block !important;
    float: none !important;
    clear: none !important;
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 268px !important;
    margin: 0 !important;
    padding: 0.25rem 0.45rem 0.15rem !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

.daterangepicker.ot-drp-single-cal .drp-calendar.left .calendar-table .prev,
.daterangepicker.ot-drp-single-cal .drp-calendar.left .calendar-table .next {
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.daterangepicker.ot-drp-single-cal .drp-buttons {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
}

.daterangepicker .calendar-table {
    background: var(--ot-drp-bg) !important;
    border-color: transparent !important;
}

.daterangepicker .calendar-table table {
    border-collapse: separate !important;
    border-spacing: 2px !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--ot-drp-text) !important;
    border: 0 !important;
}

.daterangepicker .calendar-table th {
    color: var(--ot-drp-muted) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 700 !important;
}

.daterangepicker th.month {
    padding: 0.35rem 0.2rem !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    appearance: none;
    -webkit-appearance: none;
    background: var(--ot-drp-bg-muted) !important;
    color: var(--ot-drp-text) !important;
    border: 1px solid var(--ot-drp-border) !important;
    border-radius: 3px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.55rem !important;
    height: auto !important;
    margin: 0 0.15rem !important;
    outline: none !important;
}

.daterangepicker select.monthselect {
    width: auto !important;
    min-width: 5.75rem !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.4rem !important;
}

.daterangepicker select.yearselect {
    width: auto !important;
    min-width: 3.75rem !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.4rem !important;
}

.daterangepicker .calendar-table .next,
.daterangepicker .calendar-table .prev {
    background: var(--ot-drp-bg-muted) !important;
    border: 1px solid var(--ot-drp-border) !important;
}

.daterangepicker .calendar-table .next:hover,
.daterangepicker .calendar-table .prev:hover {
    background: var(--ot-drp-primary-soft) !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-color: var(--ot-drp-text) !important;
    color: transparent !important;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background: var(--ot-drp-day-hover) !important;
    color: var(--ot-drp-text) !important;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background: transparent !important;
    color: var(--ot-drp-muted) !important;
    opacity: 0.45;
}

.daterangepicker td.in-range {
    background-color: var(--ot-drp-range) !important;
    color: var(--ot-drp-text) !important;
    border-radius: 0 !important;
}

.daterangepicker td.start-date {
    border-radius: 3px 0 0 3px !important;
}

.daterangepicker td.end-date {
    border-radius: 0 3px 3px 0 !important;
}

.daterangepicker td.start-date.end-date,
.daterangepicker td.active.start-date,
.daterangepicker td.active.end-date {
    border-radius: 3px !important;
}

.daterangepicker td.today {
    box-shadow: inset 0 0 0 1.5px var(--ot-drp-primary) !important;
}

.daterangepicker .drp-buttons {
    border-top: 1px solid var(--ot-drp-border) !important;
    background: var(--ot-drp-bg) !important;
    padding: 0.7rem 0.85rem !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.45rem !important;
}

.daterangepicker.show-calendar .drp-buttons {
    display: flex !important;
}

.daterangepicker .drp-selected {
    margin-right: auto !important;
    padding-right: 0.5rem !important;
    color: var(--ot-drp-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.daterangepicker .drp-buttons .btn {
    margin: 0 !important;
    min-height: 34px !important;
    border-radius: 3px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    padding: 0.4rem 0.85rem !important;
}

.daterangepicker .drp-buttons .cancelBtn {
    background: transparent !important;
    border: 1px solid var(--ot-drp-border) !important;
    color: var(--ot-drp-text) !important;
}

.daterangepicker .drp-buttons .applyBtn {
    background: var(--ot-drp-primary) !important;
    border-color: var(--ot-drp-primary) !important;
    color: #fff !important;
}

.daterangepicker.ot-drp-single-cal .ot-drp-hint {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.55rem 0.7rem 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ot-drp-muted);
    text-align: center;
}

.daterangepicker.ot-drp-single-cal.show-calendar .drp-buttons .applyBtn {
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Dark theme — picker is often body-anchored */
html[data-theme="dark"] .daterangepicker,
body.dark-mode .daterangepicker,
[data-theme="dark"] .daterangepicker {
    --ot-drp-bg: #111827;
    --ot-drp-bg-muted: #1f2937;
    --ot-drp-border: #334155;
    --ot-drp-text: #e2e8f0;
    --ot-drp-muted: #94a3b8;
    --ot-drp-primary: #3b82f6;
    --ot-drp-primary-soft: rgba(59, 130, 246, 0.18);
    --ot-drp-range: rgba(59, 130, 246, 0.22);
    --ot-drp-day-hover: rgba(148, 163, 184, 0.14);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .daterangepicker .calendar-table,
body.dark-mode .daterangepicker .calendar-table,
[data-theme="dark"] .daterangepicker .calendar-table,
html[data-theme="dark"] .daterangepicker .calendar-table table,
body.dark-mode .daterangepicker .calendar-table table,
[data-theme="dark"] .daterangepicker .calendar-table table {
    background: var(--ot-drp-bg) !important;
    border-color: transparent !important;
    color: var(--ot-drp-text) !important;
}

html[data-theme="dark"] .daterangepicker select.monthselect,
html[data-theme="dark"] .daterangepicker select.yearselect,
body.dark-mode .daterangepicker select.monthselect,
body.dark-mode .daterangepicker select.yearselect,
[data-theme="dark"] .daterangepicker select.monthselect,
[data-theme="dark"] .daterangepicker select.yearselect {
    background: var(--ot-drp-bg-muted) !important;
    color: var(--ot-drp-text) !important;
    border-color: var(--ot-drp-border) !important;
}

html[data-theme="dark"] .daterangepicker select.monthselect option,
html[data-theme="dark"] .daterangepicker select.yearselect option,
body.dark-mode .daterangepicker select.monthselect option,
body.dark-mode .daterangepicker select.yearselect option,
[data-theme="dark"] .daterangepicker select.monthselect option,
[data-theme="dark"] .daterangepicker select.yearselect option {
    background: #111827;
    color: #e2e8f0;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn,
button.btn,
a.btn,
.tw-dw-btn,
.ot-products-btn {
    border-radius: var(--ot-control-radius) !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    transition: all 0.15s ease;
    box-shadow: none !important;
    min-height: var(--ot-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.btn-sm,
.btn-xs,
.tw-dw-btn-sm {
    min-height: 32px !important;
    height: auto !important;
    padding: 4px 10px !important;
    border-radius: var(--ot-control-radius) !important;
}

.btn-lg,
.tw-dw-btn-lg {
    min-height: 44px !important;
    padding: 10px 20px !important;
    border-radius: var(--ot-control-radius) !important;
}

.btn-primary,
.btn-info,
.tw-dw-btn-primary {
    background: var(--ot-primary) !important;
    border-color: var(--ot-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-info:hover,
.tw-dw-btn-primary:hover {
    background: var(--ot-primary-hover) !important;
    border-color: var(--ot-primary-hover) !important;
}

.btn-success,
.tw-dw-btn-success {
    background: var(--ot-success) !important;
    border-color: var(--ot-success) !important;
    color: #fff !important;
}

.btn-success:hover,
.tw-dw-btn-success:hover {
    color: #fff !important;
}

.btn-danger,
.tw-dw-btn-error {
    background: var(--ot-danger) !important;
    border-color: var(--ot-danger) !important;
}

.btn-default,
.btn-secondary,
.tw-dw-btn-ghost {
    background: var(--ot-control-bg) !important;
    border-color: var(--ot-control-border) !important;
    color: var(--ot-text) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background: var(--ot-control-bg-muted) !important;
}

.btn-link {
    min-height: auto !important;
    box-shadow: none !important;
    border-radius: var(--ot-control-radius) !important;
}

.btn-box-tool {
    min-height: auto !important;
    height: auto !important;
    padding: 2px 6px !important;
    box-shadow: none !important;
}

.tw-dw-btn {
    border-radius: var(--ot-control-radius) !important;
    font-weight: 600 !important;
}

/* File input remove / browse — square like Create Purchase */
.file-input .btn,
.file-input .fileinput-remove,
.file-input .fileinput-remove-button,
.file-input .btn-file {
    border-radius: var(--ot-control-radius) !important;
    box-shadow: none !important;
}

/* Do not force-show Remove/Cancel when no file is selected */
.file-input.file-input-new .fileinput-remove,
.file-input.file-input-new .fileinput-remove-button,
.file-input.file-input-new .fileinput-cancel,
.file-input.file-input-new .fileinput-cancel-button,
.file-input.file-input-new .fileinput-upload,
.file-input.file-input-new .fileinput-upload-button,
.input-group.file-caption-main .file-input-new .fileinput-remove,
.file-input.file-input-new .input-group-btn > .fileinput-remove.btn,
.file-input.file-input-new .input-group-btn > .fileinput-remove-button.btn,
.file-input.file-input-new .input-group-btn > .fileinput-cancel.btn,
.file-input.file-input-new .input-group-btn > .fileinput-cancel-button.btn {
    display: none !important;
}

/* Keep filename caption visible and sized correctly against flex input-group rules */
.input-group.file-caption-main > .form-control.file-caption,
.input-group.file-caption-main > .file-caption {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* ── Status badges & labels ───────────────────────────────── */
.label,
.badge,
.tw-dw-badge {
    border-radius: 3px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
}

.label-success,
.badge-success,
.bg-green,
.tw-dw-badge-success {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.label-danger,
.badge-danger,
.bg-red,
.tw-dw-badge-error {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.label-warning,
.badge-warning,
.bg-yellow,
.tw-dw-badge-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.label-info,
.badge-info,
.bg-aqua,
.tw-dw-badge-info {
    background: #e0f2fe !important;
    color: #075985 !important;
}

.label-primary,
.badge-primary,
.bg-blue {
    background: var(--ot-primary-soft) !important;
    color: var(--ot-primary) !important;
}

/* ── Modals ───────────────────────────────────────────────── */
.modal-content {
    border: 1px solid var(--ot-border) !important;
    border-radius: var(--ot-radius-lg) !important;
    box-shadow: var(--ot-shadow-md) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--ot-surface-muted) !important;
    border-bottom: 1px solid var(--ot-border) !important;
    padding: 16px 20px !important;
}

.modal-title {
    font-weight: 700 !important;
    color: var(--ot-text);
}

.modal-body {
    padding: 20px !important;
}

.modal-footer {
    background: var(--ot-surface-muted) !important;
    border-top: 1px solid var(--ot-border) !important;
    padding: 14px 20px !important;
}

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    border-radius: var(--ot-radius-sm) !important;
    border-width: 1px !important;
    font-weight: 500;
}

/* ── Nav tabs ─────────────────────────────────────────────── */
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs > li.active > a {
    border-top-color: var(--ot-primary) !important;
    color: var(--ot-primary) !important;
    font-weight: 600;
}

.nav-tabs-custom > .nav-tabs > li > a {
    border-radius: var(--ot-radius-sm) var(--ot-radius-sm) 0 0;
    color: var(--ot-text-muted);
}

/* ── Footer ───────────────────────────────────────────────── */
footer.tw-bg-white {
    border-top: 1px solid var(--ot-border) !important;
    background: var(--ot-surface) !important;
}

/* ── Widget component (used on list pages) ────────────────── */
.components-widget .box,
.widget-user .box {
    border-radius: var(--ot-radius) !important;
}

/* ── POS global overrides (non-layout pages too) ──────────── */
.pos-product-div {
    background: var(--ot-surface);
    border-radius: var(--ot-radius);
}

.product_box {
    border-radius: var(--ot-radius) !important;
    border: 1px solid var(--ot-border) !important;
    box-shadow: var(--ot-shadow-sm) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.product_box:hover {
    box-shadow: var(--ot-shadow-md) !important;
    transform: translateY(-2px);
}

.product_box .image-container {
    border-radius: var(--ot-radius-sm) !important;
}

.pos-form-actions {
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08) !important;
}

.pos-form-actions #total_payable {
    color: var(--ot-primary) !important;
}

/* ── Auth pages ───────────────────────────────────────────── */
.auth-page {
    background: var(--ot-bg) !important;
}

.auth-page-wrap {
    background: var(--ot-bg);
}

/* ── Print: strip decorative chrome ───────────────────────── */
@media print {
    .main-app-header,
    .side-bar,
    .no-print {
        display: none !important;
    }

    .content-header {
        box-shadow: none !important;
        border: none !important;
    }
}

/* ── Touch / tablet POS terminals ─────────────────────────── */
@media (pointer: coarse) {
    .pos-modern-layout .pos-form-actions button,
    .pos-modern-layout .pos-filter-chip,
    .pos-modern-layout .product_box {
        min-height: 48px;
    }

    .btn,
    .tw-dw-btn {
        min-height: 44px;
    }
}

/* ── Mobile admin ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .content-header {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: var(--ot-radius-sm) !important;
    }

    .box-body {
        padding: 14px !important;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 10px 8px !important;
        font-size: 0.85rem;
    }
}

/* ── Laptop density ───────────────────────────────────────── */
@media (min-width: 1280px) {
    #scrollable-container {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ── List pages / filters widget ──────────────────────────── */
.box-primary {
    border-top: none !important;
}

.box-primary > .box-header {
    background: var(--ot-surface) !important;
}

.components-widget .box-tools .btn,
.box-tools .tw-dw-btn {
    border-radius: var(--ot-radius-sm) !important;
    box-shadow: var(--ot-shadow-sm);
}

/* Filter panels */
.box.box-solid,
.filter-box {
    border-radius: var(--ot-radius) !important;
}

/* Pagination & small controls */
.pagination > li > a,
.pagination > li > span {
    border-radius: var(--ot-radius-sm) !important;
    border-color: var(--ot-border) !important;
    color: var(--ot-text-muted);
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--ot-primary) !important;
    border-color: var(--ot-primary) !important;
}

/* Dropdown menus */
.dropdown-menu {
    border: 1px solid var(--ot-border) !important;
    border-radius: var(--ot-radius-sm) !important;
    box-shadow: var(--ot-shadow-md) !important;
    padding: 6px 0 !important;
}

.dropdown-menu > li > a {
    padding: 8px 16px !important;
    color: var(--ot-text);
}

.dropdown-menu > li > a:hover {
    background: var(--ot-surface-muted) !important;
    color: var(--ot-primary) !important;
}

/* Login / auth shells */
.auth-login-shell,
.auth-repair-shell,
.auth-pricing-shell {
    border: 1px solid var(--ot-border) !important;
    border-radius: var(--ot-radius-lg) !important;
    box-shadow: var(--ot-shadow-md) !important;
    background: var(--ot-surface) !important;
}

.auth-login-form-panel .form-control,
.auth-repair-form-panel .form-control {
    min-height: 44px;
}

/* Scrollable main content area */
#scrollable-container {
    padding: 1rem 1.25rem;
}

@media (min-width: 992px) {
    #scrollable-container {
        padding: 1.25rem 1.5rem;
    }
}

/* Optional widgets + Quick Access (mockup) */
.bard-optional-widgets-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 1.1rem 0 0.65rem;
}

.dashboard-overview-grid {
    margin-top: 0 !important;
}

.ot-quick-access {
    margin: 1.25rem 0 0.5rem;
}

.ot-quick-access__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.75rem;
}

.ot-quick-access__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.ot-quick-access__card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 14px 18px;
    border-radius: 3px;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.ot-quick-access__card:hover,
.ot-quick-access__card:focus {
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
}

.ot-quick-access__icon {
    width: 34px;
    height: 34px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.ot-quick-access__label {
    line-height: 1.2;
}

.ot-quick-access__card--blue { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.ot-quick-access__card--red { background: linear-gradient(135deg, #dc2626, #ef4444); }
.ot-quick-access__card--orange { background: linear-gradient(135deg, #ea580c, #f97316); }
.ot-quick-access__card--rose { background: linear-gradient(135deg, #e11d48, #f43f5e); }
.ot-quick-access__card--teal { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.ot-quick-access__card--amber { background: linear-gradient(135deg, #c2410c, #ea580c); }
.ot-quick-access__card--purple { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.ot-quick-access__card--sky { background: linear-gradient(135deg, #0284c7, #0ea5e9); }

@media (max-width: 1100px) {
    .ot-quick-access__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .ot-quick-access__grid {
        grid-template-columns: 1fr;
    }
}

/* Pace.js: keep the center spinner, hide the top left-to-right progress line */
.pace .pace-progress,
.pace .pace-progress-inner {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    box-shadow: none !important;
}

/* POS list (sales history) — same card language as admin */
section.content-header.no-print h1 {
    color: var(--ot-text) !important;
}

/* Autocomplete dropdown (search boxes) — theme-aware text for light/dark */
.ui-autocomplete,
.ui-autocomplete.ui-menu,
.ui-autocomplete.ui-widget-content {
    border: 1px solid var(--ot-control-border) !important;
    border-radius: var(--ot-control-radius) !important;
    box-shadow: var(--ot-shadow-md) !important;
    background: var(--ot-control-bg) !important;
    background-color: var(--ot-control-bg) !important;
    color: var(--ot-text) !important;
    padding: 4px 0 !important;
}

.ui-autocomplete .ui-menu-item,
.ui-autocomplete .ui-menu-item-wrapper,
.ui-menu .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item a {
    color: var(--ot-text) !important;
    border-radius: var(--ot-control-radius) !important;
    padding: 6px 12px !important;
}

.ui-autocomplete .ui-menu-item .ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-state-focus,
.ui-autocomplete .ui-state-hover {
    background: var(--ot-primary-soft, rgba(59, 130, 246, 0.2)) !important;
    border-color: transparent !important;
    color: var(--ot-text) !important;
}

[data-theme="dark"] .ui-autocomplete,
[data-theme="dark"] .ui-autocomplete.ui-menu,
[data-theme="dark"] .ui-autocomplete.ui-widget-content {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .ui-autocomplete .ui-menu-item,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper,
[data-theme="dark"] .ui-autocomplete .ui-menu-item a {
    color: #f1f5f9 !important;
    background: transparent !important;
}

[data-theme="dark"] .ui-autocomplete .ui-menu-item .ui-state-active,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
[data-theme="dark"] .ui-autocomplete .ui-state-focus,
[data-theme="dark"] .ui-autocomplete .ui-state-hover {
    background: #2563eb !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Global validation UX — red highlights + readable field errors
   (presentation only; does not change validation rules)
   ========================================================================== */
label.error,
label.ot-field-error,
.form-group label.error,
.purfm-field label.error,
.product-form-modern label.error,
.contact-form-modern label.error,
.ot-pf-row label.error,
.purchase-form-modern .purfm-field label.error,
.purchase-embed-page label.error {
    color: #dc2626 !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    display: block !important;
    margin-top: 0.3rem !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
}

.form-control.error,
.form-control.ot-control-invalid,
select.error,
textarea.error,
input.error {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15) !important;
}

.select2-container--default .select2-selection.ot-select-invalid,
.select2-container--default.select2-container--focus .select2-selection.ot-select-invalid,
.purchase-form-modern .purfm-field .select2-container--default .select2-selection.ot-select-invalid,
.purchase-form-modern .purfm-field .select2-container--default .select2-selection--single.ot-select-invalid,
.purchase-form-modern .purfm-field .select2-container--default .select2-selection--multiple.ot-select-invalid,
.product-form-modern .select2-selection.ot-select-invalid,
.contact-form-modern .select2-selection.ot-select-invalid,
.ot-select-invalid {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15) !important;
}

.ot-field-invalid > label:not(.error):not(.ot-field-error),
.ot-field-invalid .control-label:not(.error) {
    color: #b91c1c !important;
}

.ot-input-group-invalid > .form-control,
.ot-input-group-invalid > .input-group-addon,
.input-group.ot-input-group-invalid .form-control {
    border-color: #dc2626 !important;
}

[data-theme="dark"] label.error,
[data-theme="dark"] label.ot-field-error,
[data-theme="dark"] .purchase-form-modern .purfm-field label.error {
    color: #f87171 !important;
}

[data-theme="dark"] .form-control.error,
[data-theme="dark"] .form-control.ot-control-invalid,
[data-theme="dark"] .select2-container--default .select2-selection.ot-select-invalid {
    border-color: #f87171 !important;
    background-color: rgba(248, 113, 113, 0.12) !important;
}