/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 34px;
  height: 24px;
}

.app-brand-logo.demo svg {
  width: 35px;
  height: 24px;
}

.app-brand-text.demo {
  font-size: 1.375rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 72px !important;
}
/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 254px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

/* ==========================================================================
   Dark Style Overrides for Custom Elements (Tables, Cards, Modals, Forms)
   ========================================================================== */

/* 1. Custom Tables (.subcat-table, .csv-table, .custom-datatable, .nested-table) */
.dark-style .subcat-table,
.dark-style .csv-table,
.dark-style .custom-datatable,
.dark-style .nested-table {
  background-color: transparent !important;
  color: #cfcde4 !important;
}

.dark-style .subcat-table tbody tr,
.dark-style .csv-table tbody tr,
.dark-style .custom-datatable tbody tr {
  background-color: transparent !important;
}

.dark-style .subcat-table tbody td,
.dark-style .csv-table tbody td,
.dark-style .custom-datatable tbody td,
.dark-style .nested-table tbody td {
  background-color: transparent !important;
  border-top-color: #44485e !important;
  border-bottom-color: #44485e !important;
  color: #acabc1 !important;
}

/* Zebra Striping (Even Rows) */
.dark-style .subcat-table tbody tr:nth-child(even),
.dark-style .subcat-table tbody tr:nth-child(even) td,
.dark-style .csv-table tbody tr:nth-child(even),
.dark-style .csv-table tbody tr:nth-child(even) td,
.dark-style .custom-datatable tbody tr:nth-child(even),
.dark-style .custom-datatable tbody tr:nth-child(even) td,
.dark-style .nested-table tbody tr:nth-child(even),
.dark-style .nested-table tbody tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Row Hover states */
.dark-style .subcat-table tbody tr:hover,
.dark-style .subcat-table tbody tr:hover td,
.dark-style .csv-table tbody tr:hover,
.dark-style .csv-table tbody tr:hover td,
.dark-style .custom-datatable tbody tr:hover,
.dark-style .custom-datatable tbody tr:hover td,
.dark-style .nested-table tbody tr:hover,
.dark-style .nested-table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Table Footer states */
.dark-style .subcat-table tfoot th,
.dark-style .subcat-table tfoot td,
.dark-style .csv-table tfoot th,
.dark-style .csv-table tfoot td,
.dark-style .custom-datatable tfoot th,
.dark-style .custom-datatable tfoot td {
  background-color: #2f3349 !important;
  color: #cfcde4 !important;
  border-color: #44485e !important;
}

/* 2. Custom Table Text */
.dark-style .cell-main-text {
  color: #cfcde4 !important;
}

.dark-style .cell-sub-text {
  color: #7e7f96 !important;
}

/* 3. Filters & Cards (.p_filters-card, .p_memo-section, .r_section) */
.dark-style .p_filters-card {
  background-color: #2f3349 !important;
  border-color: #44485e !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  color: #cfcde4 !important;
}

.dark-style .p_memo-section {
  background-color: #25293c !important;
  border-color: #44485e !important;
}

.dark-style .p_label {
  color: #cfcde4 !important;
}

.dark-style .p_input-group .p_input,
.dark-style .p_input-group .form-control,
.dark-style .p_input-group .form-select,
.dark-style .p_input-group .form-control-sm {
  background-color: #25293c !important;
  border-color: #44485e !important;
  color: #cfcde4 !important;
}

.dark-style .p_input-group .p_input:focus,
.dark-style .p_input-group .form-control:focus,
.dark-style .p_input-group .form-select:focus {
  border-color: #7367f0 !important;
  box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.15) !important;
}

/* Returnable Product filter layout */
.dark-style .r_section {
  background-color: #2f3349 !important;
  border-color: #44485e !important;
  color: #cfcde4 !important;
}

.dark-style .r_section-title {
  color: #cfcde4 !important;
}

.dark-style .r_label {
  color: #acabc1 !important;
}

.dark-style .r_input-group input,
.dark-style .r_input-group select,
.dark-style .r_input-group textarea,
.dark-style .r_input-group .form-control {
  background-color: #25293c !important;
  border-color: #44485e !important;
  color: #cfcde4 !important;
}

/* Ledger Dashboard overrides */
.dark-style .ledger-sheet {
  background-color: #2f3349 !important;
  border-color: #44485e !important;
}

.dark-style .product-card {
  background-color: #25293c !important;
  border-color: #44485e !important;
  color: #cfcde4 !important;
}

.dark-style .product-card:hover {
  background-color: #2b2c40 !important;
}

.dark-style .selected-mini {
  background-color: #2f3349 !important;
  border-color: #44485e !important;
}

.dark-style .product-checklist {
  background: linear-gradient(180deg, #2f3349, #25293c) !important;
  border-color: #44485e !important;
}

.dark-style .product-checklist::-webkit-scrollbar-thumb {
  background: #3e4460 !important;
  border-color: #25293c !important;
}

.dark-style .product-checklist::-webkit-scrollbar-track {
  background: #25293c !important;
}

/* 4. Modals (.modal-card, .modal-card-custom, .big-model) */
.dark-style .modal-card,
.dark-style .modal-card-custom,
.dark-style .big-model {
  background-color: #2f3349 !important;
  color: #cfcde4 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid #44485e !important;
}

.dark-style .modal-card .modal-header,
.dark-style .modal-card .modal-footer,
.dark-style .modal-card-custom .modal-header,
.dark-style .modal-card-custom .modal-footer {
  border-color: #44485e !important;
  background-color: #2f3349 !important;
}

.dark-style .modal-card .form-control,
.dark-style .modal-card-custom .form-control {
  background-color: #25293c !important;
  border-color: #44485e !important;
  color: #cfcde4 !important;
}

/* 5. Custom Notification List (topnavbar dropdown) */
.dark-style .notification-header {
  background-color: #2f3349 !important;
  border-bottom-color: #44485e !important;
}

.dark-style .notification-item {
  border-bottom-color: #44485e !important;
}

.dark-style .notification-item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-style .notification-item.unread {
  background-color: rgba(115, 103, 240, 0.15) !important;
}

.dark-style .notification-item.read {
  background-color: #2f3349 !important;
}

.dark-style .notification-icon-box {
  background-color: rgba(115, 103, 240, 0.2) !important;
}

/* 6. AI Chatbot Widget (topnavbar offcanvas) */
.dark-style #chatgptChatBody {
  background-color: #25293c !important;
}

.dark-style .ai-msg {
  background-color: #2f3349 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

.dark-style .ai-msg span {
  color: #cfcde4 !important;
}

.dark-style div.p-3.border-top.bg-white {
  background-color: #2f3349 !important;
  border-top-color: #44485e !important;
}

/* 7. Vueform Multiselect Overrides (Dark Mode) */
.dark-style .multiselect {
  --ms-bg: #25293c !important;
  --ms-border-color: #44485e !important;
  --ms-font-color: #cfcde4 !important;
  --ms-placeholder-color: #7e7f96 !important;
  --ms-dropdown-bg: #2f3349 !important;
  --ms-dropdown-border-color: #44485e !important;
  --ms-option-bg-pointed: rgba(255, 255, 255, 0.08) !important;
  --ms-option-color-pointed: #ffffff !important;
  --ms-option-bg-selected: #7367f0 !important;
  --ms-option-color-selected: #ffffff !important;
  --ms-option-bg-selected-pointed: #685dd8 !important;
  --ms-option-color-selected-pointed: #ffffff !important;
  --ms-tag-bg: #7367f0 !important;
  --ms-tag-color: #ffffff !important;
}

.dark-style .multiselect,
.dark-style .multiselect-search {
  background-color: #25293c !important;
  color: #cfcde4 !important;
}

.dark-style .multiselect-single-label {
  color: #cfcde4 !important;
}

.dark-style .multiselect-placeholder {
  color: #7e7f96 !important;
}

.dark-style .multiselect-caret,
.dark-style .multiselect-clear {
  color: #cfcde4 !important;
  filter: invert(0.8);
}

.dark-style .multiselect-dropdown,
.dark-style .multiselect-options {
  background-color: #2f3349 !important;
  color: #cfcde4 !important;
  border-color: #44485e !important;
}

.dark-style .multiselect-option {
  background-color: #2f3349 !important;
  color: #cfcde4 !important;
}

.dark-style .multiselect-option.is-pointed,
.dark-style .multiselect-option:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.dark-style .multiselect-option.is-selected {
  background-color: #7367f0 !important;
  color: #ffffff !important;
}

.dark-style .multiselect-option.is-selected.is-pointed {
  background-color: #685dd8 !important;
  color: #ffffff !important;
}

.dark-style .multiselect-tag {
  background-color: #7367f0 !important;
  color: #ffffff !important;
}

.dark-style .multiselect-tag-remove-icon {
  filter: invert(1);
}

/* 8. Topbar Marquee & Notification Overrides */
.dark-style .mq-content-soft {
  color: #b3acff !important;
}

.dark-style .notification-title {
  color: #cfcde4 !important;
}

.dark-style .notification-message {
  color: #acabc1 !important;
}

/* 9. Global Form Control & Modal Contrast Overrides (Dark Mode) */
.dark-style input,
.dark-style select,
.dark-style textarea,
.dark-style .form-control,
.dark-style .form-select {
  background-color: #25293c !important;
  border-color: #44485e !important;
  color: #cfcde4 !important;
}

.dark-style input:focus,
.dark-style select:focus,
.dark-style textarea:focus,
.dark-style .form-control:focus,
.dark-style .form-select:focus {
  border-color: #7367f0 !important;
  box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.25) !important;
  background-color: #25293c !important;
  color: #cfcde4 !important;
}

.dark-style label,
.dark-style .form-label,
.dark-style legend {
  color: #cfcde4 !important;
}

.dark-style .modal-title,
.dark-style .modal-body h1,
.dark-style .modal-body h2,
.dark-style .modal-body h3,
.dark-style .modal-body h4,
.dark-style .modal-body h5,
.dark-style .modal-body h6,
.dark-style .modal-card h1,
.dark-style .modal-card h2,
.dark-style .modal-card h3,
.dark-style .modal-card h4,
.dark-style .modal-card h5,
.dark-style .modal-card-custom h1,
.dark-style .modal-card-custom h2,
.dark-style .modal-card-custom h3,
.dark-style .modal-card-custom h4,
.dark-style .modal-card-custom h5,
.dark-style .big-model h1,
.dark-style .big-model h2,
.dark-style .big-model h3,
.dark-style .big-model h4,
.dark-style .big-model h5 {
  color: #cfcde4 !important;
}

.dark-style select option {
  background-color: #25293c !important;
  color: #cfcde4 !important;
}

.dark-style .btn-close {
  filter: invert(1) grayscale(1) brightness(2) !important;
}

.dark-style .modal-content {
  background-color: #2f3349 !important;
  color: #cfcde4 !important;
  border-color: #44485e !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.dark-style .modal-header,
.dark-style .modal-body,
.dark-style .modal-footer,
.dark-style .modal-body-no-scroll {
  border-color: #44485e !important;
  background-color: #2f3349 !important;
  color: #cfcde4 !important;
}

.dark-style .modal-header.danger {
  background-color: rgba(255, 76, 81, 0.15) !important;
  border-bottom-color: rgba(255, 76, 81, 0.3) !important;
  color: #ff4c51 !important;
}

/* Ensure flat tables like projecttowermodel also look dark-correct */
.dark-style .projecttowermodel,
.dark-style .provious_money_peceipt_bable {
  background-color: transparent !important;
  color: #cfcde4 !important;
}

.dark-style .projecttowermodel tbody td,
.dark-style .provious_money_peceipt_bable tbody td {
  border-color: #44485e !important;
  color: #acabc1 !important;
}

/* 10. Select2 Overrides (Dark Mode) */
.dark-style .select2-container--default .select2-selection--single,
.dark-style .select2-container--default .select2-selection--multiple {
  background-color: #25293c !important;
  border-color: #44485e !important;
  color: #cfcde4 !important;
}

.dark-style .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #cfcde4 !important;
}

.dark-style .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: #cfcde4 !important;
}

.dark-style .select2-container--default .select2-selection__placeholder {
  color: #7e7f96 !important;
}

.dark-style .select2-dropdown {
  background-color: #2f3349 !important;
  border-color: #44485e !important;
  color: #cfcde4 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.dark-style .select2-results__option {
  background-color: #2f3349 !important;
  color: #cfcde4 !important;
}

.dark-style .select2-container--default .select2-results__option--highlighted[aria-selected],
.dark-style .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #7367f0 !important;
  color: #ffffff !important;
}

.dark-style .select2-search--dropdown {
  background-color: #2f3349 !important;
}

.dark-style .select2-search--dropdown .select2-search__field {
  background-color: #25293c !important;
  border-color: #44485e !important;
  color: #cfcde4 !important;
}

.dark-style .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #7367f0 !important;
  border-color: #7367f0 !important;
  color: #ffffff !important;
}

.dark-style .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255, 255, 255, 0.8) !important;
  border-right-color: rgba(255, 255, 255, 0.2) !important;
}

.dark-style .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #ffffff !important;
  background-color: transparent !important;
}

.dark-style .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #cfcde4 transparent transparent transparent !important;
}

.dark-style .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #cfcde4 transparent !important;
}

/* ==========================================================================
   11. Compact Table Styles and Text Truncation
   ========================================================================== */

/* Reduce table font sizes and paddings project-wide to solve scroll issues */
.table {
  font-size: 12.5px !important;
}

.table th {
  font-size: 11.5px !important;
  padding: 8px 10px !important;
  white-space: nowrap;
}

.table td {
  padding: 8px 10px !important;
}

/* Truncation with Ellipsis */
.tb-cell-truncate {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   12. Project-Wide Dark Mode Overrides
   ========================================================================== */

/* Summary & Counter Cards */
.dark-style .summary-card {
  background-color: #2f3349 !important;
  border-color: rgba(225, 222, 245, 0.15) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-style .summary-card h6 {
  color: #a3a4cc !important;
}

.dark-style .summary-card h3 {
  color: #cfd3ec !important;
}

/* Custom Modal Systems */
.dark-style .modal-card,
.dark-style .modal-header,
.dark-style .modal-body,
.dark-style .modal-footer,
.dark-style .modal-body-no-scroll,
.dark-style .p_modal,
.dark-style .p_modal-head,
.dark-style .p_modal-body,
.dark-style .p_modal-foot,
.dark-style .p_modal-info,
.dark-style .custom-modal,
.dark-style .custom-modal-box {
  background-color: #2f3349 !important;
  color: #cfd3ec !important;
  border-color: rgba(225, 222, 245, 0.15) !important;
}

.dark-style .custom-modal-header {
  border-bottom-color: rgba(225, 222, 245, 0.15) !important;
}

.dark-style .custom-modal-footer {
  border-top-color: rgba(225, 222, 245, 0.15) !important;
}

.dark-style .modal-header.danger {
  background: rgba(234, 84, 85, 0.15) !important;
  color: #ea5455 !important;
  border-bottom-color: rgba(234, 84, 85, 0.25) !important;
}

/* Custom form elements and standard inputs */
.dark-style .form-row .form-label,
.dark-style .form-label {
  color: #cfd3ec !important;
}

.dark-style .form-input,
.dark-style .form-control,
.dark-style .form-select,
.dark-style .p_input,
.dark-style input.form-control,
.dark-style select.form-select,
.dark-style textarea.form-control {
  background-color: #25293c !important;
  color: #cfd3ec !important;
  border-color: rgba(225, 222, 245, 0.15) !important;
}

.dark-style .form-input:focus,
.dark-style .form-control:focus,
.dark-style .form-select:focus,
.dark-style .p_input:focus {
  border-color: #7367f0 !important;
  background-color: #25293c !important;
  color: #cfd3ec !important;
  box-shadow: 0 0 0 4px rgba(115, 103, 240, 0.15) !important;
}

/* Vueform Multiselect dark theme */
.dark-style .multiselect,
.dark-style .multiselect-dropdown,
.dark-style .multiselect-options,
.dark-style .multiselect-option {
  background-color: #25293c !important;
  border-color: rgba(225, 222, 245, 0.15) !important;
  color: #cfd3ec !important;
}

.dark-style .multiselect-option.is-selected {
  background-color: #7367f0 !important;
  color: #ffffff !important;
}

.dark-style .multiselect-option.is-pointed {
  background-color: rgba(115, 103, 240, 0.15) !important;
}

/* Filter components */
.dark-style .p_filters-card {
  background-color: #2f3349 !important;
  border-color: rgba(225, 222, 245, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark-style .p_filters-header {
  border-bottom-color: rgba(225, 222, 245, 0.1) !important;
}

/* Pagination components */
.dark-style .p_page-btn {
  background-color: #2f3349 !important;
  border-color: rgba(225, 222, 245, 0.15) !important;
  color: #cfd3ec !important;
}

.dark-style .p_page-btn:hover {
  background-color: #25293c !important;
}

.dark-style .p_page-btn.active {
  background-color: #7367f0 !important;
  color: #ffffff !important;
  border-color: #7367f0 !important;
}

/* Close & Ghost Buttons */
.dark-style .btn-close {
  color: #cfd3ec !important;
}

.dark-style .btn-close:hover {
  background-color: rgba(225, 222, 245, 0.08) !important;
}

.dark-style .btn-ghost {
  background-color: #2f3349 !important;
  color: #cfd3ec !important;
  border-color: rgba(225, 222, 245, 0.15) !important;
}

.dark-style .btn-ghost:hover {
  background-color: #25293c !important;
}

/* Autocomplete suggestions */
.dark-style .p_suggestion-title {
  color: #cfd3ec !important;
}

.dark-style .p_suggestion-meta {
  color: #a3a4cc !important;
}

/* Table footers */
.dark-style tfoot th,
.dark-style .subcat-table tfoot th {
  background-color: #25293c !important;
  color: #cfd3ec !important;
  border-color: rgba(225, 222, 245, 0.15) !important;
}

/* Loading Overlays */
.dark-style .table-loading-overlay {
  background-color: rgba(37, 41, 60, 0.7) !important;
  color: #cfd3ec !important;
}

/* Custom Scrollbars */
.dark-style ::-webkit-scrollbar-thumb {
  background-color: rgba(225, 222, 245, 0.15) !important;
  border-color: #25293c !important;
}

.dark-style ::-webkit-scrollbar-track {
  background-color: #25293c !important;
}

/* Card header and generic white background overrides for dark mode */
.dark-style .bg-white {
  background-color: var(--bs-card-bg, #2f3349) !important;
}

.dark-style .card-header.bg-white {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(225, 222, 245, 0.15) !important;
}

/* Table-light header overrides for dark mode */
.dark-style thead.table-light,
.dark-style .table-light,
.dark-style .table-light th {
  background-color: #25293c !important;
  color: #cfd3ec !important;
  border-color: rgba(225, 222, 245, 0.15) !important;
}

/* Bulletproof dark styles for Expiry Card and Table */
.dark-style .expiry-card {
  background-color: #2f3349 !important;
  border-color: rgba(234, 84, 85, 0.25) !important;
}

.dark-style .expiry-card table,
.dark-style .expiry-card tr,
.dark-style .expiry-card td {
  background-color: transparent !important;
  background: transparent !important;
}

/* General Text Dark contrast correction */
.dark-style .text-dark,
.dark-style td .text-dark,
.dark-style .fw-bold.text-dark {
  color: #cfd3ec !important;
}

.dark-style .badge.bg-light.text-dark {
  background-color: rgba(225, 222, 245, 0.08) !important;
  color: #cfd3ec !important;
}

.dark-style .badge.bg-warning.text-dark {
  background-color: rgba(255, 159, 67, 0.16) !important;
  color: #ff9f43 !important;
}

/* Badge label color overrides */
.dark-style .expiry-card .expiry-count-badge {
  background: rgba(234, 84, 85, 0.2) !important;
  color: #ff858f !important;
  border-color: rgba(234, 84, 85, 0.3) !important;
}

.dark-style .bg-label-danger,
.dark-style .badge.bg-label-danger {
  background-color: rgba(234, 84, 85, 0.16) !important;
  color: #ea5455 !important;
}

.dark-style .badge.bg-label-warning {
  background-color: rgba(255, 159, 67, 0.16) !important;
  color: #ff9f43 !important;
}

.dark-style .badge.bg-label-primary {
  background-color: rgba(115, 103, 240, 0.16) !important;
  color: #7367f0 !important;
}

.dark-style .bg-label-success {
  background-color: rgba(40, 199, 111, 0.16) !important;
  color: #28c76f !important;
}

/* Nested Table Header in Departments Dashboard */
.dark-style .nested-table th {
  background-color: #25293c !important;
  color: #cfd3ec !important;
}

/* Home Ledger Dashboard & Sheets */
.dark-style .home-dashboard {
  background: radial-gradient(circle at 20% 10%, rgba(99, 102, 241, 0.25), transparent 42%), 
              radial-gradient(circle at 90% 0%, rgba(14, 165, 233, 0.2), transparent 40%), 
              linear-gradient(180deg, #2f3349, #25293c) !important;
  border-color: rgba(225, 222, 245, 0.15) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}

.dark-style .selected-mini {
  background-color: #2f3349 !important;
  border-color: rgba(225, 222, 245, 0.15) !important;
}

.dark-style .ledger-sheet {
  background-color: #2f3349 !important;
  border-color: rgba(225, 222, 245, 0.15) !important;
}

/* ==========================================================================
   Premium Modal Backdrop & Modal Card Highlights (Global Overrides)
   ========================================================================== */
.modal-backdrop, 
.modal-backdrop-custom, 
.custom-modal-backdrop, 
.p_modal-backdrop,
.modal-backdrop-custom-glass {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Create / Edit / View Modals (Standard Highlight) */
.modal-card, 
.big-model,
.custom-modal-content {
  border-top: 4px solid #7367f0 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18), 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  transition: all 0.3s ease;
}

/* Delete Modals (Desktop Warning Highlight) */
.modal-card:has(.modal-header.danger),
.modal-card:has(.btn-danger) {
  width: 520px !important; /* Wider desktop layout */
  max-width: 95% !important;
  border: 1px solid rgb(150, 141, 244) !important; /* Premium light purple border */
  border-top: 4px solid #ea5455 !important; /* Alert red top border */
  border-radius: 16px !important;
  box-shadow: 0 25px 60px rgba(150, 141, 244, 0.12), 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
  animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalFadeIn {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-card:has(.modal-header.danger) .modal-header.danger {
  background: transparent !important;
  border-bottom: 1px solid #f3f4f6 !important;
  color: #ea5455 !important;
  padding: 12px 20px !important; /* Compact header padding */
}

.modal-card:has(.modal-header.danger) .modal-header.danger h5 {
  font-weight: 700 !important;
  font-size: 15.5px !important;
  color: #ea5455 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.modal-card:has(.modal-header.danger) .modal-body {
  padding: 18px 20px !important; /* Compact body padding */
  color: #4b5563 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.modal-card:has(.modal-header.danger) .modal-body b.text-danger {
  color: #ea5455 !important;
  font-weight: 700 !important;
}

.modal-card:has(.modal-header.danger) .modal-footer {
  background: #fafafa !important;
  border-top: 1px solid #f3f4f6 !important;
  padding: 10px 20px !important; /* Compact footer padding */
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* Delete Button styles in Delete Modal */
.modal-card:has(.modal-header.danger) .btn-danger {
  background: #ea5455 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  height: 38px !important; /* Perfect desktop height */
  font-size: 13.5px !important;
  box-shadow: 0 4px 8px rgba(234, 84, 85, 0.2) !important;
  transition: all 0.2s ease !important;
}
.modal-card:has(.modal-header.danger) .btn-danger:hover {
  background: #e03e3e !important;
  box-shadow: 0 6px 14px rgba(234, 84, 85, 0.35) !important;
  transform: translateY(-1px) !important;
}

.modal-card:has(.modal-header.danger) .btn-ghost {
  background: #ffffff !important;
  color: #4b5563 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  height: 38px !important; /* Perfect desktop height */
  font-size: 13.5px !important;
  transition: all 0.2s ease !important;
}
.modal-card:has(.modal-header.danger) .btn-ghost:hover {
  background: #f9fafb !important;
  color: #1f2937 !important;
  border-color: #c4c6cc !important;
}

/* ==========================================================================
   Dark Style Overrides for Modals
   ========================================================================== */
.dark-style .modal-card,
.dark-style .big-model,
.dark-style .custom-modal-content {
  background: #2f3349 !important;
  color: #cfd3ec !important;
  border-color: #3f4256 !important;
}

.dark-style .modal-header,
.dark-style .modal-body-no-scroll,
.dark-style .modal-body,
.dark-style .modal-footer {
  background: #2f3349 !important;
  color: #cfd3ec !important;
  border-color: rgba(225, 222, 245, 0.1) !important;
}

.dark-style .modal-card:has(.modal-header.danger) .modal-header.danger {
  border-bottom-color: rgba(234, 84, 85, 0.2) !important;
  color: #ff4d4f !important;
}

.dark-style .modal-card:has(.modal-header.danger) .modal-header.danger h5 {
  color: #ff4d4f !important;
}

.dark-style .modal-card:has(.modal-header.danger) .modal-body {
  color: #cfd3ec !important;
}

.dark-style .modal-card:has(.modal-header.danger) .modal-footer {
  background: #25293c !important;
  border-top-color: rgba(225, 222, 245, 0.1) !important;
}

.dark-style .modal-card:has(.modal-header.danger) .btn-ghost {
  background: #2f3349 !important;
  color: #cfd3ec !important;
  border-color: #3f4256 !important;
}
.dark-style .modal-card:has(.modal-header.danger) .btn-ghost:hover {
  background: #25293c !important;
  border-color: #4b4f68 !important;
}