/* Venta app theme */
@font-face {
  font-family: "SegoeRegular";
  src: url("../fonts/SegoeUI.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SegoeLight";
  src: url("../fonts/segoeuil.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --venta-bg: #f5f7fb;
  --venta-surface: #ffffff;
  --venta-surface-2: #f8fafc;
  --venta-text: #111827;
  --venta-muted: #667085;
  --venta-border: #d8dee8;
  --venta-primary: #42a5f5;
  --venta-primary-contrast: #07111f;
  --venta-toggle-off: #f8fafc;
  --venta-toggle-thumb: #ffffff;
  --venta-toggle-shadow: rgba(15, 23, 42, 0.16);
  color-scheme: light;
}

html.theme-dark,
body.dark-mode {
  --venta-bg: #0f172a;
  --venta-surface: #161f32;
  --venta-surface-2: #1e293b;
  --venta-text: #eef4ff;
  --venta-muted: #aebbd0;
  --venta-border: #334155;
  --venta-primary: #60a5fa;
  --venta-primary-contrast: #08111f;
  --venta-toggle-off: #111c31;
  --venta-toggle-thumb: #eef4ff;
  --venta-toggle-shadow: rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

html.theme-light,
body.light-mode {
  color-scheme: light;
}

body {
  background: var(--venta-bg) !important;
  color: var(--venta-text) !important;
  font-family: "SegoeRegular", "Segoe UI", Arial, sans-serif !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

body :where(*):not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi) {
  font-family: "SegoeRegular", "Segoe UI", Arial, sans-serif;
}

html,
body {
  min-height: 100%;
}

.main-content,
.content,
.app,
.container,
.container-fluid {
  background: var(--venta-bg) !important;
  color: var(--venta-text) !important;
}

.card,
.card-body,
.modal-content,
.modal-body,
.dropdown-menu,
.message-dropdown,
.settings-dropdown,
.table-container,
.custom-card,
.report-card,
.filter-card,
.summary-card,
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody,
.dataTables_scrollHead,
.info-card,
.info-card-body,
.settlement-card,
.settlement-body,
.mapping-card,
.mapping-card-body,
.layout-card,
.layout-card-body,
.variant-card,
.toast,
.toast-body,
.page-card,
.search-card,
.grid-card {
  background-color: var(--venta-surface) !important;
  background: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.message-footer,
.settings-header,
.table-light,
.dataTables_scrollHead,
.accordion-button,
.accordion-body,
.list-group-item {
  background-color: var(--venta-surface-2) !important;
  background: var(--venta-surface-2) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
label,
.form-label,
.card-title,
.modal-title,
.dataTables_info,
.dataTables_length,
.dataTables_filter,
.dataTables_wrapper label,
.table,
table,
th,
td,
p,
span {
  color: inherit;
}

html.theme-dark body,
html.theme-dark body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.spinner-border) {
  border-color: var(--venta-border);
}

html.theme-dark body [style*="background: #fff"],
html.theme-dark body [style*="background:#fff"],
html.theme-dark body [style*="background: white"],
html.theme-dark body [style*="background:white"],
html.theme-dark body [style*="background-color: white"],
html.theme-dark body [style*="background-color:white"],
html.theme-dark body [style*="background-color: #fff"],
html.theme-dark body [style*="background-color:#fff"],
html.theme-dark body [style*="background: #ffffff"],
html.theme-dark body [style*="background:#ffffff"],
html.theme-dark body [style*="background-color: #ffffff"],
html.theme-dark body [style*="background-color:#ffffff"] {
  background: var(--venta-surface) !important;
  background-color: var(--venta-surface) !important;
}

html.theme-dark body [style*="background: #f4"],
html.theme-dark body [style*="background:#f4"],
html.theme-dark body [style*="background: #f8"],
html.theme-dark body [style*="background:#f8"],
html.theme-dark body [style*="background: #f9"],
html.theme-dark body [style*="background:#f9"],
html.theme-dark body [style*="background-color: #f4"],
html.theme-dark body [style*="background-color:#f4"],
html.theme-dark body [style*="background-color: #f8"],
html.theme-dark body [style*="background-color:#f8"],
html.theme-dark body [style*="background-color: #f9"],
html.theme-dark body [style*="background-color:#f9"] {
  background: var(--venta-surface-2) !important;
  background-color: var(--venta-surface-2) !important;
}

html.theme-dark body [style*="color: black"],
html.theme-dark body [style*="color:black"],
html.theme-dark body [style*="color: #000"],
html.theme-dark body [style*="color:#000"],
html.theme-dark body [style*="color: #111"],
html.theme-dark body [style*="color:#111"],
html.theme-dark body [style*="color: #222"],
html.theme-dark body [style*="color:#222"],
html.theme-dark body [style*="color: #333"],
html.theme-dark body [style*="color:#333"] {
  color: var(--venta-text) !important;
}

a {
  color: var(--venta-primary);
}

.form-control,
.form-select,
input,
select,
textarea,
.input-group-text,
.page-link,
.dt-button,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--venta-muted) !important;
}

.table,
table.dataTable,
.dataTable,
.table > :not(caption) > * > * {
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

table.dataTable thead th,
.table thead th,
thead th {
  background-color: var(--venta-surface-2) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

table.dataTable tbody tr,
.table tbody tr,
tbody tr,
tbody td {
  background-color: var(--venta-surface) !important;
  background: var(--venta-surface) !important;
}

table.dataTable tbody tr:hover,
.table-hover tbody tr:hover {
  background-color: color-mix(in srgb, var(--venta-primary) 10%, var(--venta-surface)) !important;
}

.btn-dark,
.btn-primary {
  background-color: var(--venta-primary) !important;
  border-color: var(--venta-primary) !important;
  color: var(--venta-primary-contrast) !important;
}

.btn-light,
.btn-secondary {
  background-color: var(--venta-surface-2) !important;
  border-color: var(--venta-border) !important;
  color: var(--venta-text) !important;
}

.btn-danger,
.delete-btn {
  color: #fff !important;
}

.sidebar {
  background: linear-gradient(180deg, #121826 0%, #0b1020 100%) !important;
}

.sidebar .menu-title,
.sidebar a,
.sidebar .section-label {
  color: #f8fafc;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--venta-surface) !important;
  border-color: var(--venta-border) !important;
  color: var(--venta-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-results__option {
  color: var(--venta-text) !important;
}

.select2-dropdown,
.select2-search__field {
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--venta-primary) !important;
  color: var(--venta-primary-contrast) !important;
}

.alert:not(.alert-success):not(.alert-danger):not(.alert-warning):not(.alert-info) {
  background-color: var(--venta-surface-2) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

.low-stock-card,
.message-item {
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

.low-stock-card:hover,
.message-item:hover {
  background-color: var(--venta-surface-2) !important;
}

.item-name,
.stock-reorder strong {
  color: var(--venta-text) !important;
}

.alert-location,
.stock-info span,
.stock-reorder span,
.item-uom,
.text-muted,
.small,
small {
  color: var(--venta-muted) !important;
}

html.theme-light body {
  background: var(--venta-bg) !important;
  color: var(--venta-text) !important;
}

/* Final app-wide overrides: keep every page synced with the selected theme. */
html.theme-dark body,
html.theme-light body,
html.theme-dark .main-content,
html.theme-light .main-content,
html.theme-dark .content,
html.theme-light .content,
html.theme-dark .container,
html.theme-light .container,
html.theme-dark .container-fluid,
html.theme-light .container-fluid {
  background: var(--venta-bg) !important;
  background-color: var(--venta-bg) !important;
  color: var(--venta-text) !important;
}

html.theme-dark body :where(h1, h2, h3, h4, h5, h6, p, label, span, div, strong, b, small, li, dt, dd, th, td, legend),
html.theme-light body :where(h1, h2, h3, h4, h5, h6, p, label, span, div, strong, b, small, li, dt, dd, th, td, legend) {
  color: inherit;
}

html.theme-dark body :where(.card, .custom-card, .glass-card, .chart-card, .insight-card, .info-card, .summary-card, .report-card, .filter-card, .search-card, .page-card, .grid-card, .gatepass-card, .table-section, .table-wrap, .modern-modal, .variant-card, .mapping-card, .layout-card, .settlement-card),
html.theme-light body :where(.card, .custom-card, .glass-card, .chart-card, .insight-card, .info-card, .summary-card, .report-card, .filter-card, .search-card, .page-card, .grid-card, .gatepass-card, .table-section, .table-wrap, .modern-modal, .variant-card, .mapping-card, .layout-card, .settlement-card) {
  background: var(--venta-surface) !important;
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

html.theme-dark body :where(.card-body, .modal-body, .toast-body, .info-card-body, .mapping-card-body, .layout-card-body, .settlement-body, .ai-card-body),
html.theme-light body :where(.card-body, .modal-body, .toast-body, .info-card-body, .mapping-card-body, .layout-card-body, .settlement-body, .ai-card-body) {
  background: var(--venta-surface) !important;
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
}

html.theme-dark body :where(.card-header, .card-footer, .modal-header, .modal-footer, .modern-modal-header, .accordion-button, .accordion-body, .list-group-item, .nav-tabs, .tab-content),
html.theme-light body :where(.card-header, .card-footer, .modal-header, .modal-footer, .modern-modal-header, .accordion-button, .accordion-body, .list-group-item, .nav-tabs, .tab-content) {
  background: var(--venta-surface-2) !important;
  background-color: var(--venta-surface-2) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

html.theme-dark body :where(table, .table, table.display, table.dataTable, .dataTable, .user-table, .table-container),
html.theme-light body :where(table, .table, table.display, table.dataTable, .dataTable, .user-table, .table-container) {
  background: var(--venta-surface) !important;
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

html.theme-dark body :where(table thead, table thead tr, table thead th, .table thead th, table.dataTable thead th, table.dataTable thead td),
html.theme-light body :where(table thead, table thead tr, table thead th, .table thead th, table.dataTable thead th, table.dataTable thead td) {
  background: var(--venta-surface-2) !important;
  background-color: var(--venta-surface-2) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

html.theme-dark body :where(table tbody, table tbody tr, table tbody td, .table tbody tr, .table tbody td, table.dataTable tbody tr, table.dataTable tbody td),
html.theme-light body :where(table tbody, table tbody tr, table tbody td, .table tbody tr, .table tbody td, table.dataTable tbody tr, table.dataTable tbody td) {
  background: var(--venta-surface) !important;
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

html.theme-dark body :where(.table-striped > tbody > tr:nth-of-type(odd) > *, table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd, table.dataTable tbody tr.odd),
html.theme-light body :where(.table-striped > tbody > tr:nth-of-type(odd) > *, table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd, table.dataTable tbody tr.odd) {
  background: var(--venta-surface-2) !important;
  background-color: var(--venta-surface-2) !important;
  color: var(--venta-text) !important;
}

html.theme-dark body :where(table tbody tr:hover, table.dataTable.display tbody tr:hover, table.dataTable.hover tbody tr:hover, .table-hover > tbody > tr:hover > *),
html.theme-light body :where(table tbody tr:hover, table.dataTable.display tbody tr:hover, table.dataTable.hover tbody tr:hover, .table-hover > tbody > tr:hover > *) {
  background: color-mix(in srgb, var(--venta-primary) 13%, var(--venta-surface)) !important;
  background-color: color-mix(in srgb, var(--venta-primary) 13%, var(--venta-surface)) !important;
  color: var(--venta-text) !important;
}

html.theme-dark body :where(.dataTables_wrapper, .dataTables_scroll, .dataTables_scrollHead, .dataTables_scrollHeadInner, .dataTables_scrollBody, .dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate),
html.theme-light body :where(.dataTables_wrapper, .dataTables_scroll, .dataTables_scrollHead, .dataTables_scrollHeadInner, .dataTables_scrollBody, .dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate) {
  background: var(--venta-surface) !important;
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

html.theme-dark body :where(.dataTables_wrapper .dataTables_paginate .paginate_button, .page-link),
html.theme-light body :where(.dataTables_wrapper .dataTables_paginate .paginate_button, .page-link) {
  background: var(--venta-surface-2) !important;
  background-color: var(--venta-surface-2) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

html.theme-dark body :where(.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, .page-item.active .page-link),
html.theme-light body :where(.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, .page-item.active .page-link) {
  background: var(--venta-primary) !important;
  background-color: var(--venta-primary) !important;
  color: var(--venta-primary-contrast) !important;
  border-color: var(--venta-primary) !important;
}

html.theme-dark body :where(input, select, textarea, .form-control, .form-select, .input-group-text, .select2-selection, .select2-dropdown, .select2-search__field),
html.theme-light body :where(input, select, textarea, .form-control, .form-select, .input-group-text, .select2-selection, .select2-dropdown, .select2-search__field) {
  background: var(--venta-surface) !important;
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

html.theme-dark body :where(.select2-results, .select2-results__options, .select2-results__option, .select2-selection__rendered, .select2-selection__placeholder),
html.theme-light body :where(.select2-results, .select2-results__options, .select2-results__option, .select2-selection__rendered, .select2-selection__placeholder) {
  background: var(--venta-surface) !important;
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
}

html.theme-dark body :where(.dropdown-menu, .dropdown-item, .message-dropdown, .settings-dropdown, .message-item, .low-stock-card),
html.theme-light body :where(.dropdown-menu, .dropdown-item, .message-dropdown, .settings-dropdown, .message-item, .low-stock-card) {
  background: var(--venta-surface) !important;
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

html.theme-dark body :where(.dropdown-item:hover, .message-item:hover, .low-stock-card:hover),
html.theme-light body :where(.dropdown-item:hover, .message-item:hover, .low-stock-card:hover) {
  background: var(--venta-surface-2) !important;
  background-color: var(--venta-surface-2) !important;
  color: var(--venta-text) !important;
}

html.theme-dark body :where(.badge, .status-badge, .nav-link, .card-title, .table-title, .title, .card-info, .alert-location, .text-muted),
html.theme-light body :where(.badge, .status-badge, .nav-link, .card-title, .table-title, .title, .card-info, .alert-location, .text-muted) {
  color: inherit;
}

html.theme-dark body :where(.btn:not(.btn-danger):not(.btn-success):not(.btn-warning), .dt-button),
html.theme-light body :where(.btn:not(.btn-danger):not(.btn-success):not(.btn-warning), .dt-button) {
  border-color: var(--venta-border) !important;
}

html.theme-dark body :where(hr, .border, .border-top, .border-bottom, .border-start, .border-end),
html.theme-light body :where(hr, .border, .border-top, .border-bottom, .border-start, .border-end) {
  border-color: var(--venta-border) !important;
}

/* High-specificity fixes for page-level important styles. */
html.theme-dark body .main-content .menu-item,
html.theme-dark body .main-content .menu-card,
html.theme-dark body .main-content .menu-tile,
html.theme-dark body .main-content .permission-group,
html.theme-dark body .main-content .permission-row,
html.theme-dark body .main-content .permission-list,
html.theme-dark body .main-content .summary-tile,
html.theme-dark body .main-content .group-header,
html.theme-dark body .main-content .empty-state,
html.theme-dark body .main-content .user-table-row,
html.theme-dark body .main-content .glass-card,
html.theme-dark body .main-content .chart-card,
html.theme-dark body .main-content .insight-card,
html.theme-dark body .main-content .table-section,
html.theme-dark body .main-content .gatepass-card,
html.theme-dark body .main-content .modern-modal,
html.theme-dark body .main-content .report-card,
html.theme-dark body .main-content .filter-card,
html.theme-dark body .main-content .info-card,
html.theme-dark body .main-content .settlement-card,
html.theme-dark body .main-content .mapping-card,
html.theme-dark body .main-content .layout-card {
  background: var(--venta-surface) !important;
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

html.theme-dark body .main-content .menu-item:hover {
  background: var(--venta-primary) !important;
  background-color: var(--venta-primary) !important;
  color: var(--venta-primary-contrast) !important;
}

html.theme-dark body .main-content .menu-color,
html.theme-dark body .main-content .menu-title,
html.theme-dark body .main-content .permission-name,
html.theme-dark body .main-content .permission-field,
html.theme-dark body .main-content .group-title,
html.theme-dark body .main-content .summary-label,
html.theme-dark body .main-content .summary-value,
html.theme-dark body .main-content .card-title,
html.theme-dark body .main-content .card-info,
html.theme-dark body .main-content .card-info span,
html.theme-dark body .main-content .title,
html.theme-dark body .main-content .title p {
  color: var(--venta-text) !important;
}

html.theme-dark body .main-content .summary-label,
html.theme-dark body .main-content .permission-field,
html.theme-dark body .main-content .permission-status,
html.theme-dark body .main-content .card-info span.label,
html.theme-dark body .main-content .text-muted {
  color: var(--venta-muted) !important;
}

html.theme-dark body [data-theme-surface="surface"] {
  background: var(--venta-surface) !important;
  background-color: var(--venta-surface) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

html.theme-dark body [data-theme-surface="muted"] {
  background: var(--venta-surface-2) !important;
  background-color: var(--venta-surface-2) !important;
  color: var(--venta-text) !important;
  border-color: var(--venta-border) !important;
}

html.theme-dark body [data-theme-text="text"] {
  color: var(--venta-text) !important;
}

html.theme-dark body [data-theme-text="muted"] {
  color: var(--venta-muted) !important;
}

/* Global toggle/switch styling for every page. */
html.theme-dark body :where(.form-switch, .custom-toggle),
html.theme-light body :where(.form-switch, .custom-toggle) {
  min-height: 32px;
}

html.theme-dark body :where(.form-switch .form-check-input, .custom-toggle .form-check-input, input[role="switch"]),
html.theme-light body :where(.form-switch .form-check-input, .custom-toggle .form-check-input, input[role="switch"]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 60px !important;
  min-width: 60px !important;
  height: 35px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--venta-border) !important;
  background-color: var(--venta-toggle-off) !important;
  background-image:
    radial-gradient(circle at 26% 50%, var(--venta-toggle-thumb) 0 11px, transparent 12px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 1px 3px var(--venta-toggle-shadow) !important;
  cursor: pointer !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-position 0.2s ease !important;
}

html.theme-dark body :where(.form-switch .form-check-input:checked, .custom-toggle .form-check-input:checked, input[role="switch"]:checked),
html.theme-light body :where(.form-switch .form-check-input:checked, .custom-toggle .form-check-input:checked, input[role="switch"]:checked) {
  background-color: var(--venta-primary) !important;
  border-color: var(--venta-primary) !important;
  background-image:
    radial-gradient(circle at 74% 50%, #ffffff 0 11px, transparent 12px) !important;
}

html.theme-dark body :where(.form-switch .form-check-input:focus, .custom-toggle .form-check-input:focus, input[role="switch"]:focus),
html.theme-light body :where(.form-switch .form-check-input:focus, .custom-toggle .form-check-input:focus, input[role="switch"]:focus) {
  border-color: var(--venta-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--venta-primary) 25%, transparent) !important;
}

html.theme-dark body :where(.form-switch .form-check-input:disabled, .custom-toggle .form-check-input:disabled, input[role="switch"]:disabled),
html.theme-light body :where(.form-switch .form-check-input:disabled, .custom-toggle .form-check-input:disabled, input[role="switch"]:disabled) {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
}

html.theme-dark body :where(.toggle-switch),
html.theme-light body :where(.toggle-switch) {
  display: inline-flex;
  align-items: center;
  min-height: 35px;
}

html.theme-dark body :where(.toggle-switch input),
html.theme-light body :where(.toggle-switch input) {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

html.theme-dark body :where(.toggle-switch .slider),
html.theme-light body :where(.toggle-switch .slider) {
  width: 60px !important;
  height: 35px !important;
  border-radius: 999px !important;
  border: 1px solid var(--venta-border) !important;
  background: var(--venta-toggle-off) !important;
  box-shadow: 0 1px 3px var(--venta-toggle-shadow) !important;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

html.theme-dark body :where(.toggle-switch .slider::before),
html.theme-light body :where(.toggle-switch .slider::before) {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 6px;
  top: 5px;
  border-radius: 50%;
  background: var(--venta-toggle-thumb) !important;
  transition: transform 0.2s ease;
}

html.theme-dark body :where(.toggle-switch input:checked + .slider),
html.theme-light body :where(.toggle-switch input:checked + .slider) {
  background: var(--venta-primary) !important;
  border-color: var(--venta-primary) !important;
}

html.theme-dark body :where(.toggle-switch input:checked + .slider::before),
html.theme-light body :where(.toggle-switch input:checked + .slider::before) {
  transform: translateX(25px);
}

/* Professional app polish: stable layout, clean spacing, and predictable controls. */
:root {
  --venta-radius-sm: 6px;
  --venta-radius-md: 8px;
  --venta-radius-lg: 12px;
  --venta-shadow-card: 0 10px 28px rgba(15, 23, 42, 0.08);
  --venta-shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06);
  --venta-focus: 0 0 0 3px color-mix(in srgb, var(--venta-primary) 22%, transparent);
}

html.theme-dark {
  --venta-shadow-card: 0 14px 34px rgba(0, 0, 0, 0.24);
  --venta-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.18);
}

html,
body {
  overflow-x: hidden;
}

body {
  font-family: "SegoeRegular", "Segoe UI", Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.45;
}

.app {
  min-height: 100vh;
  width: 100%;
}

.main-content {
  padding: 0 22px 28px !important;
}

.main-content > :not(.dashboard-header):first-child {
  margin-top: 18px;
}

.main-content > .card,
.main-content > .custom-card,
.main-content > .page-card,
.main-content > .filter-card,
.main-content > .report-card,
.main-content > .table-container,
.main-content > form > .card {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100%;
}

.card,
.custom-card,
.page-card,
.filter-card,
.report-card,
.summary-card,
.info-card,
.search-card,
.grid-card,
.item-row,
.table-container {
  border: 1px solid var(--venta-border) !important;
  border-radius: var(--venta-radius-lg) !important;
  box-shadow: var(--venta-shadow-card) !important;
  margin-top: 16px !important;
  opacity: 1 !important;
  overflow: hidden;
  transform: none !important;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease !important;
}

.card:hover,
.custom-card:hover,
.page-card:hover,
.filter-card:hover,
.report-card:hover,
.summary-card:hover,
.info-card:hover,
.search-card:hover,
.grid-card:hover,
.item-row:hover {
  box-shadow: var(--venta-shadow-card) !important;
  cursor: default !important;
  transform: none !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
  align-items: center;
  border-color: var(--venta-border) !important;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  min-height: 56px;
  padding: 14px 16px !important;
}

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

.card-title,
.modal-title,
.table-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

.row {
  row-gap: 14px;
}

.form-label,
label {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  margin-bottom: 6px !important;
}

.form-control,
.form-select,
.input-group-text,
input,
select,
textarea {
  border-radius: var(--venta-radius-sm) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  min-height: 40px;
}

textarea.form-control,
textarea {
  min-height: 96px;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--venta-primary) !important;
  box-shadow: var(--venta-focus) !important;
  outline: 0 !important;
}

.select2-container {
  max-width: 100%;
  width: 100% !important;
}

.select2-container--default .select2-selection--single {
  align-items: center !important;
  border-radius: var(--venta-radius-sm) !important;
  display: flex !important;
  min-height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.2 !important;
  padding-left: 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
}

.btn,
button.btn,
a.btn {
  align-items: center;
  border-radius: var(--venta-radius-sm) !important;
  display: inline-flex;
  font-size: 13px !important;
  font-weight: 800 !important;
  gap: 8px;
  justify-content: center;
  line-height: 1.2 !important;
  min-height: 40px;
  padding: 9px 14px !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.btn-sm {
  min-height: 32px;
  padding: 6px 10px !important;
}

.btn:hover {
  filter: brightness(1.04);
}

.btn:focus,
.btn:focus-visible {
  box-shadow: var(--venta-focus) !important;
}

.btn-success {
  background-color: #168a4a !important;
  border-color: #168a4a !important;
  color: #fff !important;
}

.btn-warning {
  color: #111827 !important;
}

.btn-danger,
.delete-btn {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

.table-container {
  padding: 0 !important;
  width: 100%;
}

.table-responsive,
.dataTables_wrapper,
.dataTables_scroll {
  width: 100%;
}

.table,
table,
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
  margin: 0 !important;
  width: 100% !important;
}

.table th,
.table td,
table.dataTable thead th,
table.dataTable tbody td,
table th,
table td {
  border-bottom: 1px solid var(--venta-border) !important;
  padding: 11px 12px !important;
  vertical-align: middle !important;
}

.table thead th,
table.dataTable thead th,
table thead th {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
}

table.dataTable.no-footer,
.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 1px solid var(--venta-border) !important;
}

.dataTables_wrapper {
  padding: 12px !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 12px;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  margin-left: 8px;
  min-height: 36px;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 12px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--venta-radius-sm) !important;
  margin: 0 2px !important;
  padding: 6px 10px !important;
}

.modal-content {
  border-radius: var(--venta-radius-lg) !important;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.26) !important;
  overflow: hidden;
}

.dropdown-menu {
  border-radius: var(--venta-radius-md) !important;
  box-shadow: var(--venta-shadow-card) !important;
  padding: 8px !important;
}

.dropdown-item {
  border-radius: var(--venta-radius-sm);
  font-weight: 700;
  padding: 9px 10px;
}

.alert {
  border-radius: var(--venta-radius-md) !important;
  box-shadow: var(--venta-shadow-soft);
}

.item-card-list,
#items-container,
#po-items-container,
#po-inward-items-container {
  display: grid;
  gap: 16px;
}

.item-row {
  padding: 16px !important;
}

.item-row-header {
  align-items: center;
  border-bottom: 1px solid var(--venta-border);
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
}

.item-row-title {
  font-size: 15px;
  font-weight: 900;
}

.delete-item-btn {
  align-items: center;
  border: 1px solid var(--venta-border);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.delete-item-btn:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

.menu-item,
.menu-card,
.menu-tile {
  border-radius: var(--venta-radius-lg) !important;
  min-height: 72px;
}

.badge,
.status-badge {
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 6px 10px !important;
}

hr {
  opacity: 1 !important;
}

@media (max-width: 992px) {
  .main-content {
    padding: 0 12px 22px !important;
  }

  .card-body,
  .modal-body {
    padding: 14px !important;
  }

  .card-header,
  .card-footer,
  .modal-header,
  .modal-footer {
    align-items: stretch;
  }

  .btn,
  button.btn,
  a.btn {
    white-space: normal;
  }
}

@media (max-width: 576px) {
  body {
    font-size: 13px;
  }

  .main-content {
    padding: 0 8px 18px !important;
  }

  .dashboard-header {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  .card,
  .custom-card,
  .page-card,
  .filter-card,
  .report-card,
  .summary-card,
  .info-card,
  .search-card,
  .grid-card,
  .item-row,
  .table-container {
    border-radius: var(--venta-radius-md) !important;
    margin-top: 12px !important;
  }

  .dataTables_wrapper {
    padding: 8px !important;
  }
}

/* Stable workspace shell: sidebar/header/footer stay fixed, only content scrolls. */
html,
body {
  height: 100%;
}

body {
  overflow: hidden !important;
}

.app {
  display: flex !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  width: 100% !important;
}

.sidebar {
  flex: 0 0 auto !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
}

.main-content {
  display: grid !important;
  flex: 1 1 auto !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 100% !important;
}

.dashboard-header {
  grid-row: 1 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 20 !important;
}

.page-scroll-content {
  grid-row: 2 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 18px 22px 22px !important;
  scrollbar-gutter: stable;
}

.page-scroll-content > :first-child {
  margin-top: 0 !important;
}

.footer-container {
  grid-row: 3 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  min-height: 34px;
  position: relative !important;
  z-index: 15 !important;
}

@media (max-width: 992px) {
  body {
    overflow: auto !important;
  }

  .app {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .main-content {
    display: grid !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .page-scroll-content {
    padding: 14px 12px 18px !important;
  }
}

@media (max-width: 576px) {
  .page-scroll-content {
    padding: 12px 8px 16px !important;
  }
}