/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', sans-serif;
    background: #f4f5f7;
    color: #333;
    min-height: 100vh;
}

/* ══════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════ */
.login-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #060e1c;
}

.login-bg {
    min-height: 100vh;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    position: relative;
}

.login-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(4,12,28,0.82) 0%,
        rgba(4,12,28,0.50) 50%,
        rgba(4,12,28,0.70) 100%
    );
    pointer-events: none;
}

/* ── Top bar ── */
.login-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 48px;
    background: rgba(3,10,24,0.75);
    backdrop-filter: blur(6px);
    gap: 20px;
    flex-wrap: nowrap;
}

/* Brand */
.login-brand-block {
    display: flex;
    align-items: center;
    gap: 14px;
}

.login-v-logo { display: flex; align-items: center; }

.login-brand-titles { display: flex; flex-direction: column; gap: 1px; }

.login-brand-company {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.3px;
}

.lbc-velora { color: #fff; }
.lbc-tech   { color: #3db54a; }

.login-brand-product {
    font-size: 40px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.lbc-360    { color: #3db54a; }
.lbc-signal { color: #3db54a; font-size: 20px; letter-spacing: 0; }

.login-brand-sub {
    font-size: 9.5px;
    letter-spacing: 2px;
    color: #aabbcc;
    border-top: 1px solid rgba(170,187,204,0.4);
    padding-top: 5px;
    margin-top: 4px;
    text-transform: uppercase;
}

/* Feature icons */
.login-features {
    display: flex;
    gap: 24px;
    align-items: center;
}

.login-feat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.lf-icon {
    width: 50px;
    height: 50px;
    border: 1.5px solid rgba(255,255,255,0.70);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.login-feat span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #fff;
    line-height: 1.35;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* ── Main area ── */
.login-main {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 48px 60px 64px;
    gap: 24px;
}

.login-tagline {
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.4px;
    max-width: 420px;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.login-tagline-green { color: #3db54a; }

/* ── Login Card ── */
.login-card {
    background: rgba(8, 18, 40, 0.90);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 36px 32px 32px;
    width: 340px;
    flex-shrink: 0;
    box-shadow: 0 24px 64px rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
}

.login-card-icon {
    width: 54px;
    height: 54px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #8899bb;
}

.login-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 6px;
}

.login-sub {
    font-size: 12.5px;
    color: #6b7f99;
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.55;
}

.login-field {
    margin-bottom: 14px;
}

.login-field label {
    display: none;
}

.login-field input[type="text"],
.login-field input[type="password"] {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.login-field input::placeholder { color: #4a5c72; }

.login-field input:focus {
    border-color: #3db54a;
    background: rgba(255,255,255,0.08);
}

.login-field.has-error input { border-color: #ef4444; }

.login-error {
    font-size: 12px;
    color: #ef4444;
    margin-top: 5px;
}

.login-password-wrap { position: relative; }

.login-password-wrap input { padding-right: 44px; }

.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #4a5c72;
    display: flex;
    align-items: center;
}

.toggle-password svg { width: 18px; height: 18px; }
.toggle-password:hover { color: #8899bb; }

.login-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 6px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #8899bb;
}

.checkbox-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #3db54a;
    cursor: pointer;
}

.login-forgot {
    font-size: 13px;
    color: #3db54a;
    text-decoration: none;
}

.login-forgot:hover { text-decoration: underline; }

.login-btn {
    width: 100%;
    padding: 12px;
    background: #3db54a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: background 0.2s;
}

.login-btn:hover { background: #33a040; }

/* ── Bottom bar ── */
.login-bottombar {
    position: relative;
    z-index: 2;
    background: rgba(3, 10, 24, 0.88);
    display: flex;
    padding: 18px 56px;
}

.login-stat {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: #fff;
    padding-right: 28px;
    margin-right: 28px;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.login-stat:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

.ls-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(61,181,74,0.15);
    border: 1px solid rgba(61,181,74,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3db54a;
    flex-shrink: 0;
    margin-top: 2px;
}

.login-stat strong {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.login-stat span {
    font-size: 11.5px;
    color: #6b7f99;
    line-height: 1.45;
}

/* Responsive */
@media (max-width: 900px) {
    .login-topbar { padding: 16px 24px; }
    .login-features { gap: 14px; }
    .login-main { padding: 32px 24px; flex-direction: column; align-items: flex-end; }
    .login-tagline { display: none; }
    .login-card { width: 100%; max-width: 360px; }
    .login-bottombar { padding: 14px 20px; }
    .login-stat { padding-right: 14px; margin-right: 14px; }
}

a { text-decoration: none; color: inherit; }

/* ---- App Shell ---- */
.app-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.app-shell-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---- Side Navigation ---- */
.sidebar {
    background: #1a1a2e;
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    box-shadow: 2px 0 8px rgba(0,0,0,.22);
    z-index: 100;
}

/* ---- Brand ---- */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
}

.brand-icon {
    width: 36px; height: 36px;
    background: #8b1a1a;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.brand-icon svg { width: 20px; height: 20px; }

.brand-text {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}

/* ---- Nav Menu ---- */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    padding: 8px;
    flex: 1;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: #9ca3af;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    width: 100%;
    text-align: left;
    border-radius: 6px;
    transition: color .2s ease, background-color .2s ease;
    white-space: nowrap;
    gap: 5px;
}

.sidebar-link-icon { flex-shrink: 0; }
.sidebar-link:hover { color: #e5e7eb; background: rgba(255,255,255,.06); }
.sidebar-link.active { color: #fff; background: #8b1a1a; }

/* ---- Dropdown ---- */
.sidebar-dropdown {
    position: relative;
    display: flex;
    flex-direction: column;
}

.dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid currentColor;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

.dropdown-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
    min-width: 200px;
    padding: 6px 0;
    z-index: 200;
}

.dropdown-menu-up { top: auto; bottom: 0; }

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 13px;
    color: #374151;
    transition: color .2s ease, background-color .2s ease;
    white-space: nowrap;
}

.dropdown-menu a svg { width: 14px; height: 14px; flex-shrink: 0; }

.dropdown-menu a:hover { background: #f3f4f6; color: #8b1a1a; }
.dropdown-menu a.active { color: #8b1a1a; font-weight: 600; background: #fef2f2; }

/* Open state is driven by web/js/app.js: the main-menu accordion is slid
   open/closed by jQuery on click (inline display), the flyouts below fade
   in via `.open` (hover-intent). */
.sidebar-dropdown.open > .dropdown-menu { display: block; }

/* ---- Nav accordion: main-menu dropdowns expand in place, inside the sidebar ---- */
.sidebar-menu .dropdown-menu {
    position: static;
    background: rgba(0,0,0,.15);
    border: none;
    border-radius: 6px;
    box-shadow: none;
    min-width: 0;
    width: 100%;
    padding: 4px 0 4px 14px;
    margin-top: 2px;
}

.sidebar-menu .dropdown-menu a {
    padding: 8px 12px;
    font-size: 12.5px;
    color: #c7ccd6;
    border-radius: 6px;
}

.sidebar-menu .dropdown-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-menu .dropdown-menu a.active {
    background: rgba(139,26,26,.28);
    color: #fff;
    font-weight: 600;
    border-left: 3px solid #c0392b;
    padding-left: 9px;
}

.sidebar-menu .dropdown-toggle::after { transition: transform .2s ease; }
.sidebar-menu .sidebar-dropdown.expanded > .dropdown-toggle::after { transform: rotate(90deg); }

/* ---- Nested (second-level) submenu — always flies out to the side ---- */
.dropdown-menu .has-submenu { position: relative; }
.dropdown-menu .has-submenu > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dropdown-menu .has-submenu > a::after {
    content: '›';
    font-size: 18px;
    line-height: 1;
    margin-left: 10px;
    color: #9ca3af;
    flex-shrink: 0;
}
.dropdown-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
    min-width: 180px;
    padding: 6px 0;
    z-index: 210;
}
/* Flyouts (nested submenu + footer user menu) fade/slide in on `.open`
   instead of snapping via display. visibility is delayed on close so the
   fade-out plays before the menu stops receiving the pointer. */
.dropdown-menu .submenu,
.sidebar-footer .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.dropdown-menu .submenu { transform: translateX(-4px); }
.sidebar-footer .dropdown-menu { transform: translateY(4px); }

.dropdown-menu .has-submenu.open > .submenu,
.sidebar-footer .sidebar-dropdown.open > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
}

/* Nested submenu stays a flyout (position/colors from the base .submenu rule
   above) rather than expanding in place inside the sidebar accordion —
   expanding it in place pushed the items below it (e.g. "Vendors" under
   "Inventory Details") out from under the cursor and broke the hover chain,
   collapsing the whole parent menu.
   Its links still sit under `.sidebar-menu .dropdown-menu a` in the DOM,
   which styles them for the dark in-place accordion (light text). But the
   flyout card itself is white, so restore the light-card link styling here
   or the text is nearly invisible. */
.sidebar-menu .dropdown-menu .submenu a {
    padding: 10px 18px;
    font-size: 13px;
    color: #374151;
    border-radius: 0;
}
.sidebar-menu .dropdown-menu .submenu a:hover { background: #f3f4f6; color: #8b1a1a; }
.sidebar-menu .dropdown-menu .submenu a.active {
    background: #fef2f2;
    color: #8b1a1a;
    font-weight: 600;
    border-left: none;
    padding-left: 18px;
}

/* ---- Sidebar footer (user menu) ---- */
.sidebar-footer {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    border-top: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #e5e7eb;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background .15s;
    background: none;
    border: none;
    font-family: inherit;
    width: 100%;
}

.sidebar-user:hover { background: rgba(255,255,255,.09); }

@media (prefers-reduced-motion: reduce) {
    .sidebar-link,
    .sidebar-user,
    .sidebar .dropdown-menu,
    .sidebar .dropdown-menu a,
    .sidebar .submenu,
    .sidebar-menu .dropdown-toggle::after { transition: none; }
}
.sidebar-user svg { width: 26px; height: 26px; color: #9ca3af; flex-shrink: 0; }

/* ---- Settings / page tabs ---- */
.settings-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    padding: 0;
    margin: 0 0 20px;
    list-style: none;
}
.settings-tabs li { margin: 0; }
.settings-tabs a {
    display: block;
    padding: 14px 22px;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    font-weight: 500;
    transition: color .2s, border-color .2s;
}
.settings-tabs a:hover { color: #374151; border-bottom-color: #d1d5db; }
.settings-tabs a.active { color: #dc2626; border-bottom-color: #dc2626; }

/* ---- Page header ---- */
.page-header { margin-bottom: 12px; text-align: center; }
.btn-back { font-weight: 700; }
.page-title { font-size: 18px; font-weight: 700; color: #111; }

/* ---- Page content ---- */
.page-content { padding: 16px; flex: 1; }

/* ---- Live Weight Card ---- */
.live-weight-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.live-weight-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #374151; }

.live-weight-value { font-size: 36px; font-weight: 800; color: #8b1a1a; line-height: 1.1; margin-top: 2px; }

.btn-refresh {
    display: flex; align-items: center; gap: 6px;
    border: 2px solid #8b1a1a; color: #8b1a1a;
    background: #fff; border-radius: 8px;
    padding: 6px 14px; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: background .15s, color .15s;
}

.btn-refresh:hover { background: #8b1a1a; color: #fff; }
.btn-refresh svg { width: 16px; height: 16px; }

/* ---- Two-column layout ---- */
.form-image-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
    margin-bottom: 24px;
}

/* ---- Panels ---- */
.panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px 16px;
}

.panel-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8b1a1a;
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
}

.panel-title svg { width: 16px; height: 16px; }

/* ---- Form elements ---- */
.form-row {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.form-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row.cols-1 { grid-template-columns: 1fr; }

.form-group { display: flex; flex-direction: column; gap: 3px; }

.form-label {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
}

.form-label .req { color: #dc2626; }

.form-control {
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 12px;
    color: #111;
    background: #fff;
    outline: none;
    transition: border-color .15s;
    width: 100%;
}

.form-control:focus { border-color: #8b1a1a; }

select.form-control { cursor: pointer; }

.form-control[readonly] { background: #f9fafb; }

/* ---- Payment Mode ---- */
.payment-mode-box {
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.radio-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; cursor: pointer;
}

.radio-label input[type=radio] { accent-color: #8b1a1a; width: 16px; height: 16px; }

/* ---- Captured Image ---- */
.captured-image-panel { display: flex; flex-direction: column; }

.captured-image-wrap {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #e5e7eb;
    min-height: 260px;
    display: flex; align-items: center; justify-content: center;
}

.captured-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.captured-image-wrap .no-image {
    color: #9ca3af; font-size: 13px; text-align: center;
}

.btn-retake {
    margin-top: 8px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    border: 1.5px solid #d1d5db; color: #374151;
    background: #fff; border-radius: 8px;
    padding: 7px 14px; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: background .15s;
}

.btn-retake:hover { background: #f9fafb; }
.btn-retake svg { width: 16px; height: 16px; color: #8b1a1a; }

/* ---- Weight Details ---- */
.weight-details-panel .panel-title { margin-bottom: 16px; }

.weight-fields {
    display: grid;
    grid-template-columns: 100px 1fr 1fr 1fr 1fr;
    gap: 10px;
    align-items: end;
}

.weight-value-box {
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    padding: 6px 8px;
    display: flex; align-items: center; gap: 4px;
}

.weight-value-box .wv { font-size: 13px; font-weight: 700; }
.weight-value-box .wu { font-size: 10px; color: #6b7280; }

.wv-gross { color: #16a34a; }
.wv-tare  { color: #d97706; }
.wv-net   { color: #7c3aed; }

/* ---- Action buttons ---- */
.action-bar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 16px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.btn-clear, .btn-save {
    display: flex; align-items: center; gap: 6px;
    border-radius: 8px; padding: 8px 20px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: 2px solid transparent; transition: background .15s, color .15s;
}

.btn-clear {
    background: #fff; border-color: #d1d5db; color: #374151;
}

.btn-clear:hover { background: #f9fafb; }

.btn-save {
    background: #8b1a1a; color: #fff; border-color: #8b1a1a;
}

.btn-save:hover { background: #6f1414; }

.btn-clear svg, .btn-save svg { width: 16px; height: 16px; }

/* ---- Flash messages ---- */
.alert { border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 12px; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-danger  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Global modal internal scrolling */
.modal .modal-content {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

.modal .modal-body {
    overflow-y: auto;
}

/* ── Select2 colour overrides ─────────────────────────────────────────────── */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #c96464;
    box-shadow: 0 0 0 .25rem rgba(139, 26, 26, .25);
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: #c96464;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: #c96464;
    box-shadow: 0 0 0 .25rem rgba(139, 26, 26, .25);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options
.select2-results__option.select2-results__option--highlighted {
    background-color: #f5dada;
    color: #8b1a1a;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options
.select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options
.select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: #8b1a1a;
    color: #fff;
}

/* ── Bootstrap nav-tabs: use theme color ── */
.nav-tabs .nav-link { color: #6b7280; }
.nav-tabs .nav-link:hover { color: #8b1a1a; border-color: transparent transparent #e5e7eb; }
.nav-tabs .nav-link.active {
    color: #8b1a1a;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 600;
}
.nav-tabs { border-bottom-color: #dee2e6; }

/* ── Theme outline button (matches #8b1a1a) ── */
.btn-theme-outline {
    color: #8b1a1a;
    border-color: #8b1a1a;
    background: #fff;
}
.btn-theme-outline:hover,
.btn-theme-outline:focus {
    background: #8b1a1a;
    color: #fff;
    border-color: #8b1a1a;
}

/* ── Datepicker validation state: propagate from hidden field to visible input ── */
input[type="hidden"].is-invalid + input[type="text"] {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
input[type="hidden"].is-valid + input[type="text"] {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* ── Datepicker input icon ───────────────────────────────────────────────── */
input.datepicker,
input.past-datepicker,
input.future-datepicker,
input.date-range-from,
input.date-range-to {
    padding-left: 34px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 16px 16px;
}

/* ── jQuery UI Datepicker overrides ─────────────────────────────────────── */
.ui-datepicker {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    padding: 8px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    z-index: 9999 !important;
    background: #fff;
}

.ui-datepicker .ui-datepicker-header {
    background: #f8fafc;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 6px 6px 0 0;
    color: #374151;
    padding: 6px 0;
    margin-bottom: 4px;
}

.ui-datepicker .ui-datepicker-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    line-height: 1.8;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 6px;
    cursor: pointer;
    border: none;
    background: transparent;
    border-radius: 4px;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: #e5e7eb;
    border: none;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    background-image: url('images/ui-icons_555555_256x240.png');
}

.ui-datepicker th {
    color: #6b7280;
    font-weight: 600;
    font-size: 12px;
    padding: 6px 4px;
}

.ui-datepicker td { padding: 1px; }

.ui-datepicker td a,
.ui-datepicker td span {
    text-align: center;
    border-radius: 4px;
    border: 1px solid transparent;
    padding: 4px 6px;
    color: #374151;
    background: none;
}

.ui-datepicker td a:hover {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #111827;
}

.ui-datepicker td.ui-datepicker-today a {
    font-weight: 700;
    border-color: #94a3b8;
    color: #1e293b;
    background: #f8fafc;
}

.ui-datepicker td.ui-datepicker-current-day a,
.ui-datepicker td .ui-state-active {
    background: #334155 !important;
    border-color: #334155 !important;
    color: #fff !important;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    margin: 0 2px;
}

/* ── DataTables: global cell borders ────────────────────────────────────── */
table.dataTable th,
table.dataTable td {
    border: 1px solid #e5e7eb !important;
}
table.dataTable thead th {
    border-color: #d1d5db !important;
}

/* ── Select2: theme colour overrides ────────────────────────────────────── */
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #8b1a1a !important;
    color: #fff !important;
}
.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: #f3e8e8 !important;
    color: #8b1a1a !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #8b1a1a !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 26, 26, 0.2) !important;
}

/* ── Payment Request status badges ──────────────────────────────────────── */
.pr-badge-draft,
.pr-badge-pending,
.pr-badge-approved,
.pr-badge-rejected {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    white-space: nowrap;
}
.pr-badge-draft    { background: #e0f2fe; color: #0369a1; }
.pr-badge-pending  { background: #fef9c3; color: #854d0e; }
.pr-badge-approved { background: #dcfce7; color: #166534; }
.pr-badge-rejected { background: #fee2e2; color: #991b1b; }