/*
 * Modern UI refresh — purely visual, purely additive.
 *
 * This file changes ZERO markup, ZERO PHP, ZERO JavaScript logic. It only
 * restyles what's already on the page. It loads after every other stylesheet
 * so its rules win the cascade without needing !important everywhere.
 *
 * Design direction: this app already has a modern indigo/blue design
 * language in a few places (the login page's gradient, the sidebar's active
 * state, the "widget"/"filters" card components) — this file extends that
 * same language to everything still stuck in the old red/gray AdminLTE
 * theme (header bar, box headers, tables, forms, buttons, modals, badges).
 */

:root {
    --xv-primary-50:  #eef4ff;
    --xv-primary-100: #dbe7ff;
    --xv-primary-200: #b8d0ff;
    --xv-primary-300: #85aeff;
    --xv-primary-400: #4b7fff;
    --xv-primary-500: #2454ff;
    --xv-primary-600: #1240f0;
    --xv-primary-700: #0f34c9;
    --xv-primary-800: #0040c1;
    --xv-primary-900: #0a2673;
    --xv-indigo-500: #6366f1;

    --xv-gray-25:  #fbfcfd;
    --xv-gray-50:  #f7f8fa;
    --xv-gray-100: #eef2f6;
    --xv-gray-200: #e3e8ef;
    --xv-gray-300: #cdd5e0;
    --xv-gray-500: #697586;
    --xv-gray-600: #4b5565;
    --xv-gray-700: #364152;
    --xv-gray-900: #121926;

    --xv-success: #17a561;
    --xv-success-bg: #e7f8f0;
    --xv-danger: #e0322f;
    --xv-danger-bg: #fdeded;
    --xv-warning: #b45309;
    --xv-warning-bg: #fef6e7;

    --xv-radius-sm: .5rem;
    --xv-radius-md: .75rem;
    --xv-radius-lg: 1rem;

    --xv-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --xv-shadow-md: 0 2px 6px -1px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .06);
    --xv-shadow-lg: 0 8px 24px -4px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .06);

    --xv-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------------
   Global
--------------------------------------------------------------------- */
html, body,
.tw-font-sans {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--xv-gray-50) !important;
    color: var(--xv-gray-900);
}

a, .btn, .tw-dw-btn, .box, button, input, select,
.form-control, .box-header, .nav-tabs > li > a {
    transition: background-color .18s var(--xv-ease), border-color .18s var(--xv-ease),
                box-shadow .18s var(--xv-ease), color .18s var(--xv-ease), transform .12s var(--xv-ease) !important;
}

/* thin, quiet scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--xv-gray-300); border-radius: 99px; border: 2px solid var(--xv-gray-50); }
::-webkit-scrollbar-thumb:hover { background: var(--xv-gray-500); }

/* ---------------------------------------------------------------------
   Header / top bar — was a solid red gradient, now the same indigo/blue
   the login page and sidebar already use, so the whole app finally reads
   as one product instead of two different skins stitched together.
--------------------------------------------------------------------- */
[class*="tw-from-red-"],
[class*="tw-from-primary-"] {
    background-image: linear-gradient(to right, var(--xv-indigo-500), var(--xv-primary-600)) !important;
}
.tw-bg-red-800, .tw-bg-primary-800,
[class*="tw-to-red-"], [class*="tw-to-primary-"] {
    background-color: var(--xv-primary-700) !important;
}
.hover\:tw-bg-red-700:hover, .hover\:tw-bg-primary-700:hover {
    background-color: var(--xv-primary-500) !important;
}
.tw-bg-red-100 { background-color: var(--xv-primary-100) !important; }
.tw-text-primary-700, .tw-text-primary-800 { color: var(--xv-primary-700) !important; }
.tw-border-primary-500\/30 { border-color: rgba(36, 84, 255, .35) !important; }

/* header buttons get a touch of glass + lift so they read as clickable chips
   on the new gradient, not flat rectangles */
.tw-bg-red-800.tw-rounded-lg, a.tw-bg-red-800, button.tw-bg-red-800 {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
}
a.tw-bg-red-800:hover, button.tw-bg-red-800:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 52, 201, .35);
}

/* sidebar active state — keep it blue, just soften the tint */
.tw-bg-gray-200.tw-text-primary-700,
a.tw-bg-gray-200 {
    background-color: var(--xv-primary-50) !important;
    color: var(--xv-primary-700) !important;
    font-weight: 600 !important;
}

/* legacy dark AdminLTE wrapper (mostly invisible today, but safe to align) */
.skin-red .wrapper, .skin-red-light .wrapper { background-color: var(--xv-gray-50) !important; }

/* ---------------------------------------------------------------------
   Cards / boxes — the AdminLTE .box family used across list & report pages
--------------------------------------------------------------------- */
.box {
    border: 1px solid var(--xv-gray-200) !important;
    border-top: 1px solid var(--xv-gray-200) !important;
    border-radius: var(--xv-radius-md) !important;
    box-shadow: var(--xv-shadow-sm) !important;
}
.box:hover { box-shadow: var(--xv-shadow-md) !important; }

.box-header,
.box-header.with-border {
    background: transparent !important;
    color: var(--xv-gray-900) !important;
    border-bottom: 1px solid var(--xv-gray-100) !important;
    padding: 14px 18px !important;
}
.box-title {
    font-weight: 600 !important;
    color: var(--xv-gray-900) !important;
    letter-spacing: -.01em;
}
.box-body { padding: 18px !important; }

.content-header > h1,
section.content-header h1 {
    font-weight: 700 !important;
    color: var(--xv-gray-900) !important;
    letter-spacing: -.02em;
}

/* the already-modern widget/filter cards — just tune the corner + shadow
   rhythm so it lines up with everything else being restyled here */
.tw-rounded-xl.tw-ring-gray-200 { box-shadow: var(--xv-shadow-sm) !important; }
.tw-rounded-xl.tw-ring-gray-200:hover { box-shadow: var(--xv-shadow-md) !important; }

/* dashboard stat cards */
#todays_profit, .content .row .col-md-6 .tw-bg-white,
.small-box, .info-box {
    border-radius: var(--xv-radius-md) !important;
    box-shadow: var(--xv-shadow-sm) !important;
    border: 1px solid var(--xv-gray-100) !important;
}
.small-box:hover, .info-box:hover {
    box-shadow: var(--xv-shadow-md) !important;
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
   Tables & DataTables
--------------------------------------------------------------------- */
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.table > thead > tr > th {
    background: var(--xv-gray-50) !important;
    color: var(--xv-gray-600) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--xv-gray-200) !important;
    border-top: none !important;
    padding: 10px 14px !important;
}
.table > tbody > tr > td {
    border-top: 1px solid var(--xv-gray-100) !important;
    padding: 10px 14px !important;
    color: var(--xv-gray-700);
    vertical-align: middle !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--xv-gray-25) !important; }
.table-hover > tbody > tr:hover { background-color: var(--xv-primary-50) !important; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
    border-color: var(--xv-gray-200) !important;
}

div.dataTables_wrapper {
    padding-top: 4px;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--xv-radius-sm) !important;
    border: 1px solid var(--xv-gray-300) !important;
    padding: 6px 12px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--xv-radius-sm) !important;
    margin: 0 2px !important;
    border: 1px solid transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--xv-primary-600) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--xv-primary-600) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
    background: var(--xv-primary-50) !important;
    color: var(--xv-primary-700) !important;
    border-color: var(--xv-primary-100) !important;
}

/* ---------------------------------------------------------------------
   Forms
--------------------------------------------------------------------- */
.form-control {
    border: 1px solid var(--xv-gray-300) !important;
    border-radius: var(--xv-radius-sm) !important;
    box-shadow: none !important;
    padding: 8px 12px !important;
    height: auto !important;
    color: var(--xv-gray-900) !important;
}
.form-control:focus {
    border-color: var(--xv-primary-500) !important;
    box-shadow: 0 0 0 3px var(--xv-primary-100) !important;
}
label { font-weight: 600 !important; color: var(--xv-gray-700) !important; font-size: .85rem; }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--xv-gray-300) !important;
    border-radius: var(--xv-radius-sm) !important;
    min-height: 36px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
.select2-dropdown {
    border-color: var(--xv-primary-500) !important;
    border-radius: var(--xv-radius-sm) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--xv-primary-600) !important;
}
.input-group-addon {
    border-radius: var(--xv-radius-sm) 0 0 var(--xv-radius-sm) !important;
    border-color: var(--xv-gray-300) !important;
    background: var(--xv-gray-50) !important;
}

/* ---------------------------------------------------------------------
   Buttons — legacy Bootstrap .btn family (tw-dw-btn already looks modern)
--------------------------------------------------------------------- */
.btn {
    border-radius: var(--xv-radius-sm) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border-width: 1px !important;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-info {
    background: var(--xv-primary-600) !important;
    border-color: var(--xv-primary-600) !important;
}
.btn-primary:hover, .btn-info:hover {
    background: var(--xv-primary-700) !important;
    border-color: var(--xv-primary-700) !important;
}
.btn-success { background: var(--xv-success) !important; border-color: var(--xv-success) !important; }
.btn-danger  { background: var(--xv-danger) !important;  border-color: var(--xv-danger) !important; }
.btn-warning { background: #d97706 !important; border-color: #d97706 !important; }
.btn-default {
    background: #fff !important;
    border-color: var(--xv-gray-300) !important;
    color: var(--xv-gray-700) !important;
}
.btn-default:hover { background: var(--xv-gray-50) !important; }

.tw-dw-btn { box-shadow: var(--xv-shadow-sm) !important; }
.tw-dw-btn:active { transform: translateY(1px) !important; }

/* ---------------------------------------------------------------------
   Modals
--------------------------------------------------------------------- */
.modal-content {
    border: none !important;
    border-radius: var(--xv-radius-lg) !important;
    box-shadow: var(--xv-shadow-lg) !important;
}
.modal-header {
    border-bottom: 1px solid var(--xv-gray-100) !important;
    padding: 18px 24px !important;
}
.modal-body { padding: 22px 24px !important; }
.modal-footer {
    border-top: 1px solid var(--xv-gray-100) !important;
    padding: 16px 24px !important;
}
.modal-title { font-weight: 700 !important; letter-spacing: -.01em; }
.modal-backdrop.in { opacity: .5 !important; }

/* ---------------------------------------------------------------------
   Badges / labels / pills
--------------------------------------------------------------------- */
.label, .badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    letter-spacing: .01em;
}
.label-success, .badge-success, .bg-green, .bg-green-active {
    background: var(--xv-success-bg) !important; color: var(--xv-success) !important;
}
.label-danger, .badge-danger, .bg-red, .bg-red-active {
    background: var(--xv-danger-bg) !important; color: var(--xv-danger) !important;
}
.label-warning, .badge-warning, .bg-yellow, .bg-yellow-active {
    background: var(--xv-warning-bg) !important; color: var(--xv-warning) !important;
}
.label-info, .badge-info, .bg-aqua {
    background: var(--xv-primary-50) !important; color: var(--xv-primary-700) !important;
}
.label-default, .badge-default {
    background: var(--xv-gray-100) !important; color: var(--xv-gray-600) !important;
}

/* ---------------------------------------------------------------------
   Alerts / toastr
--------------------------------------------------------------------- */
.alert {
    border: none !important;
    border-radius: var(--xv-radius-md) !important;
    box-shadow: var(--xv-shadow-sm) !important;
}
.alert-success { background: var(--xv-success-bg) !important; color: #0b6b3a !important; }
.alert-danger, .alert-error { background: var(--xv-danger-bg) !important; color: #a01d1a !important; }
.alert-warning { background: var(--xv-warning-bg) !important; color: #8a4108 !important; }
.alert-info { background: var(--xv-primary-50) !important; color: var(--xv-primary-700) !important; }

#toast-container > div {
    border-radius: var(--xv-radius-md) !important;
    box-shadow: var(--xv-shadow-lg) !important;
    opacity: .98 !important;
}

/* ---------------------------------------------------------------------
   Tabs & misc chrome
--------------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--xv-gray-200) !important; }
.nav-tabs > li > a {
    border-radius: var(--xv-radius-sm) var(--xv-radius-sm) 0 0 !important;
    border: none !important;
    color: var(--xv-gray-600) !important;
    font-weight: 600 !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--xv-primary-700) !important;
    border-bottom: 2px solid var(--xv-primary-600) !important;
    background: transparent !important;
}

.panel, .well {
    border-radius: var(--xv-radius-md) !important;
    border: 1px solid var(--xv-gray-200) !important;
    box-shadow: var(--xv-shadow-sm) !important;
}

::selection { background: var(--xv-primary-200); color: var(--xv-gray-900); }

/* =====================================================================
   PART 2 — Single-branch mode + full form redesign
   =====================================================================
   IMPORTANT: every rule below is presentation-only. No field is removed,
   renamed or forced visible. Fields the app hides conditionally (e.g.
   individual-vs-business contact fields use inline display:none) are never
   overridden here — nothing in this file sets `display` on .form-group.
   ===================================================================== */

/* Single-branch: the location picker is auto-filled and hidden by
   js/xv-enhancements.js. The input stays in the DOM and still posts. */
.xv-single-branch-hidden {
    display: none !important;
}

/* ---------------------------------------------------------------------
   Form fundamentals — calmer, roomier, easier to scan
--------------------------------------------------------------------- */
.form-group {
    margin-bottom: 18px;
}

/* Labels: small, quiet, consistent — the input is the hero, not the label */
.form-group > label,
form label:not(.btn):not(.checkbox-inline):not(.radio-inline) {
    font-size: .75rem !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    color: var(--xv-gray-600) !important;
    margin-bottom: 6px !important;
}

/* Required marker: turn the raw "*" into a soft accent instead of shouting */
.form-group > label {
    text-wrap: pretty;
}

/* Inputs: bigger touch target, softer border, clear focus ring */
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 40px !important;
    font-size: .9rem !important;
    background-color: #fff !important;
}
.form-control::placeholder { color: var(--xv-gray-300) !important; }

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 12px !important;
    color: var(--xv-gray-900) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--xv-primary-500) !important;
    box-shadow: 0 0 0 3px var(--xv-primary-100) !important;
}
.select2-dropdown {
    box-shadow: var(--xv-shadow-lg) !important;
    border-color: var(--xv-gray-200) !important;
}

/* Input groups (icon + field) — make the icon a quiet prefix, not a box */
.input-group-addon {
    color: var(--xv-gray-500) !important;
    min-width: 40px;
    text-align: center;
}

/* Checkbox / radio rows breathe a little */
.checkbox, .radio { margin-top: 6px; margin-bottom: 6px; }
.checkbox label, .radio label { font-weight: 500 !important; color: var(--xv-gray-700) !important; }

/* Help text: de-emphasise so it stops competing with the field */
.help-block, p.help-block, small.text-muted {
    font-size: .75rem !important;
    color: var(--xv-gray-500) !important;
    margin-top: 4px !important;
}

/* Validation */
.has-error .form-control { border-color: var(--xv-danger) !important; }
.has-error .form-control:focus { box-shadow: 0 0 0 3px var(--xv-danger-bg) !important; }
label.error, .error:not(input):not(select):not(textarea) {
    color: var(--xv-danger) !important;
    font-size: .75rem !important;
    font-weight: 500 !important;
    margin-top: 4px;
    display: block;
}

/* ---------------------------------------------------------------------
   Form sections — group related fields into clean cards
   (applies to the .box / widget wrappers the forms already use)
--------------------------------------------------------------------- */
form .box,
.content form > .row > [class*="col-"] > .box {
    border-radius: var(--xv-radius-md) !important;
    border: 1px solid var(--xv-gray-200) !important;
    box-shadow: var(--xv-shadow-sm) !important;
    margin-bottom: 18px !important;
}
form .box-header {
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--xv-gray-100) !important;
}
form .box-header .box-title {
    font-size: .95rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    color: var(--xv-gray-900) !important;
}
form .box-body { padding: 20px !important; }

/* ---------------------------------------------------------------------
   Line-item entry tables (Purchase entry, POS cart, Stock transfer…)
   These are the busiest screens — make them readable and calm.
--------------------------------------------------------------------- */
#purchase_entry_table,
#pos_table,
.table.table-slim {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
#purchase_entry_table > thead > tr > th,
#pos_table > thead > tr > th {
    background: var(--xv-gray-50) !important;
    color: var(--xv-gray-600) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 8px !important;
    border-bottom: 1px solid var(--xv-gray-200) !important;
    white-space: nowrap;
}
#purchase_entry_table > tbody > tr > td,
#pos_table > tbody > tr > td {
    padding: 8px !important;
    vertical-align: middle !important;
    border-top: 1px solid var(--xv-gray-100) !important;
}
#purchase_entry_table > tbody > tr:hover,
#pos_table > tbody > tr:hover {
    background: var(--xv-primary-50) !important;
}
/* inputs inside line tables should be compact, not full-height */
#purchase_entry_table .form-control,
#pos_table .form-control {
    min-height: 34px !important;
    padding: 5px 8px !important;
    font-size: .85rem !important;
}
/* numeric cells align right so columns of money read cleanly */
#purchase_entry_table td input.input_number,
#pos_table td input.input_number {
    text-align: right;
}

/* ---------------------------------------------------------------------
   Totals / summary panels — make the number you care about obvious
--------------------------------------------------------------------- */
.table.bg-gray,
table.bg-gray {
    background: var(--xv-gray-50) !important;
    border-radius: var(--xv-radius-md) !important;
    overflow: hidden;
}
.table.bg-gray > tbody > tr > th,
.table.bg-gray > tbody > tr > td {
    border-top: 1px solid var(--xv-gray-200) !important;
    padding: 9px 14px !important;
}
.table.bg-gray > tbody > tr > th {
    font-weight: 600 !important;
    color: var(--xv-gray-600) !important;
    font-size: .82rem !important;
}
/* the grand-total-ish rows */
#grand_total, #total_payable, .total_payable_span,
span#total_subtotal, #payment_due {
    font-weight: 800 !important;
    color: var(--xv-primary-700) !important;
}

/* ---------------------------------------------------------------------
   Actions — one obvious primary button, quiet secondaries
--------------------------------------------------------------------- */
.btn, .tw-dw-btn {
    padding: 9px 18px !important;
    font-size: .875rem !important;
}
.btn-lg { padding: 12px 24px !important; }
.btn-xs, .tw-dw-btn-xs { padding: 4px 10px !important; font-size: .75rem !important; }

/* Submit rows get separated from the fields above them */
.modal-footer,
form .row > .col-md-12 > .btn-primary:last-child {
    margin-top: 4px;
}

/* ---------------------------------------------------------------------
   Modals — most add/edit forms (customer, supplier, payment…) live here
--------------------------------------------------------------------- */
.modal-dialog { margin-top: 40px; }
.modal-header {
    background: #fff !important;
    border-radius: var(--xv-radius-lg) var(--xv-radius-lg) 0 0 !important;
}
.modal-header .modal-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--xv-gray-900) !important;
}
.modal-header .close {
    opacity: .5;
    font-size: 1.5rem;
    transition: opacity .15s var(--xv-ease);
}
.modal-header .close:hover { opacity: 1; }
.modal-body { background: #fff !important; }
.modal-footer { background: var(--xv-gray-25) !important; }
/* wider modals for the dense forms so fields stop cramping */
@media (min-width: 992px) {
    .modal-lg { width: 900px; }
}

/* Tabs inside forms (contact more-info, product tabs…) */
.nav-tabs > li > a { padding: 10px 16px !important; }

/* ---------------------------------------------------------------------
   Page chrome
--------------------------------------------------------------------- */
section.content { padding: 16px 18px !important; }
section.content-header { padding: 18px 18px 6px !important; }
section.content-header h1 { font-size: 1.45rem !important; }

/* Filters panel reads as a subtle toolbar rather than a heavy card */
#accordion .box-header, .box-header.with-border[style*="cursor"] {
    background: transparent !important;
}

/* DataTables toolbar spacing */
.dataTables_wrapper .row.margin-bottom-20 { margin-bottom: 14px !important; }
.dt-buttons .btn { margin-right: 6px; }

/* Print: never print our chrome */
@media print {
    .xv-single-branch-hidden { display: none !important; }
}