/* =============================================================
   WOLF-FREIGHT — MODERN UI v2.0
   Brand: --wf-primary #6B2E26 (deep brown), --wf-accent #F5A623 (gold)
   Stack: Bootstrap 3 + jQuery + Select2 + DataTables
   ============================================================= */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --wf-primary: #6B2E26;
  --wf-primary-dk: #4f221b;
  --wf-primary-lt: #8a3e35;
  --wf-accent: #F5A623;
  --wf-accent-dk: #d68910;
  --wf-bg: #f4f6f9;
  --wf-card: #ffffff;
  --wf-border: #dde2e8;
  --wf-text: #333333;
  --wf-muted: #6c757d;
  --wf-radius: 8px;
  --wf-radius-sm: 5px;
  --wf-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  --wf-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.11);
}

/* ── BASE ──────────────────────────────────────────────────── */
body {
  font-family: "Hind", sans-serif !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  background-color: var(--wf-bg) !important;
  color: var(--wf-text) !important;
}

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

a:hover {
  color: var(--wf-primary-dk);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.panel-title {
  color: var(--wf-primary) !important;
}

/* ── PAGE BACKGROUND IMAGE (OPTIONAL FEATURE) ─────────────── */
.bg-customimage {
  position: relative;
}

.bg-customimage:before {
  background-image: url("dist/images/aerial-view-container-cargo-ship-sea.jpg");
  background-size: cover;
  opacity: 0.6;
  height: 100%;
}

.page-wrapper:before {
  background-image: url("dist/images/aerial-view-container-cargo-ship-sea.jpg");
  background-size: cover;
  opacity: 0.6;
  height: 100%;
}

/* ── PAGE WRAPPER ──────────────────────────────────────────── */
.page-wrapper {
  background-color: var(--wf-bg) !important;
  min-height: 100vh;
}

/* ── NAVBAR ────────────────────────────────────────────────── */
.navbar.navbar-inverse.navbar-fixed-top {
  background: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid #e8edf3 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
  min-height: 55px;
}

.navbar.navbar-inverse.navbar-fixed-top .navbar-brand,
.navbar.navbar-inverse.navbar-fixed-top .nav>li>a {
  color: #3f4b57 !important;
}

.navbar.navbar-inverse.navbar-fixed-top .nav>li>a:hover {
  background: rgba(107, 46, 38, 0.08) !important;
  color: var(--wf-primary) !important;
}

.navbar.navbar-inverse.navbar-fixed-top i,
.navbar.navbar-inverse.navbar-fixed-top .ti,
.navbar.navbar-inverse.navbar-fixed-top .zmdi {
  color: #3f4b57 !important;
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.fixed-sidebar-left {
  background: #fff !important;
  border-right: 1px solid #eaeaea !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05) !important;
  overflow-x: hidden !important;
}

.fixed-sidebar-left .nicescroll-bar,
.fixed-sidebar-left .side-nav {
  overflow-x: hidden !important;
}

.fixed-sidebar-left,
.fixed-sidebar-left .side-nav,
.fixed-sidebar-left .side-nav a,
.fixed-sidebar-left .side-nav .right-nav-text,
.fixed-sidebar-left .side-nav .navigation-header>span {
  font-family: "Hind", sans-serif !important;
}

.side-nav li>a {
  border-radius: 6px !important;
  margin: 2px 8px !important;
  padding: 9px 12px !important;
  transition: all 0.18s ease !important;
  color: #4a4a4a !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.fixed-sidebar-left .side-nav>li>a .right-nav-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
}

.fixed-sidebar-left .side-nav li li>a,
.fixed-sidebar-left .side-nav li li>a .right-nav-text {
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

.fixed-sidebar-left .side-nav>li>a i {
  font-size: 14px !important;
}

.fixed-sidebar-left .side-nav>li[style*="text-align: center"] a span {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.side-nav li>a:hover,
.side-nav li>a:focus {
  background: rgba(107, 46, 38, 0.07) !important;
  color: var(--wf-primary) !important;
}

.side-nav li.active>a {
  background: #7b3a31 !important;
  color: #fff !important;
}

.fixed-sidebar-left .side-nav>li>a.active-page,
.fixed-sidebar-left .side-nav li a.active-page {
  background: #7b3a31 !important;
  color: #fff !important;
  border-radius: 6px !important;
}

.side-nav .navigation-header>span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #b0b0b0 !important;
}

/* Sidebar open-state cleanup */
.fixed-sidebar-left .side-nav>li {
  margin-bottom: 4px;
}

.fixed-sidebar-left .side-nav .collapse-level-1 {
  margin-top: 4px;
  margin-bottom: 8px;
  padding-left: 6px;
}

.fixed-sidebar-left .side-nav .collapse-level-1>li>a[data-toggle="modal"] {
  background: #f7f8fa !important;
  color: #4d5b67 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  border-radius: 6px !important;
  margin: 4px 8px 6px 4px !important;
  padding: 7px 10px !important;
}

.fixed-sidebar-left .side-nav .collapse-level-1>li>a[data-toggle="modal"]:hover {
  background: #eaeff4 !important;
  color: var(--wf-primary) !important;
}

.fixed-sidebar-left .side-nav .collapse-level-1>li>ul {
  margin: 0;
  padding: 0 0 0 10px;
}

.fixed-sidebar-left .side-nav .collapse-level-1>li>ul>li {
  list-style: none;
  margin: 0;
}

.fixed-sidebar-left .side-nav .collapse-level-1>li>ul>li>a {
  border-radius: 6px !important;
  margin: 2px 8px 2px 0 !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #3f4b57 !important;
  box-sizing: border-box !important;
  display: block !important;
  max-width: 100% !important;
}

.fixed-sidebar-left .side-nav .collapse-level-1>li>ul>li>a:hover {
  background: rgba(107, 46, 38, 0.08) !important;
  color: var(--wf-primary) !important;
}

/* Legacy inline margin-left on deep menu rows */
.fixed-sidebar-left .side-nav li[style*="margin-left:80px"] {
  margin-left: 0 !important;
  padding-left: 12px;
  font-size: 11px;
  color: #7a8693;
  font-weight: 600;
}

.fixed-sidebar-left .side-nav .collapse-level-2 {
  padding-left: 12px;
  margin-top: 2px;
}

.fixed-sidebar-left .side-nav .collapse-level-2>li>a {
  border-radius: 6px !important;
  margin: 2px 8px 2px 0 !important;
  padding: 6px 9px !important;
  font-size: 11.5px !important;
  color: #546271 !important;
  box-sizing: border-box !important;
  display: block !important;
  max-width: 100% !important;
}

/* Keep nested active item visually inside sidebar bounds */
.fixed-sidebar-left .side-nav .collapse-level-1 a.active-page,
.fixed-sidebar-left .side-nav .collapse-level-2 a.active-page {
  background: #7b3a31 !important;
  color: #fff !important;
  margin-right: 8px !important;
  border-radius: 6px !important;
  display: block !important;
  max-width: 90% !important;
}

/* Hello profile row */
.fixed-sidebar-left .side-nav>li[style*="text-align: center"] {
  margin: 6px 0 10px;
  padding: 6px 10px;
}

.fixed-sidebar-left .side-nav>li[style*="text-align: center"]>a {
  margin: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  padding: 8px 8px !important;
}

/* ── HEADING BAR (page title strip) ───────────────────────── */
.heading-bg {
  background: var(--wf-card) !important;
  height: auto !important;
  min-height: 50px !important;
  padding: 8px 0 !important;
  margin: 0 -24px 18px !important;
  border-bottom: 2px solid rgba(107, 46, 38, 0.10) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.heading-bg h5 {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding-top: 8px !important;
  padding-left: 8px !important;
}

/* ── BREADCRUMB ────────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 10px 0 0 0 !important;
}

.breadcrumb a {
  color: var(--wf-primary) !important;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.breadcrumb a:hover {
  opacity: 1 !important;
}

.breadcrumb>li+li::before {
  font-family: FontAwesome !important;
  content: "\f105" !important;
  color: var(--wf-primary) !important;
  opacity: 0.45;
  padding: 0 7px !important;
}

.breadcrumb .active span {
  color: var(--wf-primary) !important;
  font-weight: 600;
}

/* ── PANELS / CARDS ────────────────────────────────────────── */
.panel,
.card-view {
  border-radius: var(--wf-radius) !important;
  border: none !important;
  box-shadow: var(--wf-shadow) !important;
  margin-bottom: 20px !important;
  background: var(--wf-card) !important;
}

/* Keep full-width data panels aligned with full-width heading-bg row */
.page-wrapper .container-fluid>.panel.panel-default.border-panel,
.page-wrapper .container-fluid>.panel.panel-default.card-view,
.page-wrapper .container-fluid>.panel.card-view,
.page-wrapper .container-fluid>.row>.col-xs-12>.panel.panel-default.border-panel,
.page-wrapper .container-fluid>.row>.col-sm-12>.panel.panel-default.border-panel,
.page-wrapper .container-fluid>.row>.col-md-12>.panel.panel-default.border-panel,
.page-wrapper .container-fluid>.row>.col-lg-12>.panel.panel-default.border-panel,
.page-wrapper .container-fluid>.row>.col-xs-12>.panel.card-view,
.page-wrapper .container-fluid>.row>.col-sm-12>.panel.card-view,
.page-wrapper .container-fluid>.row>.col-md-12>.panel.card-view,
.page-wrapper .container-fluid>.row>.col-lg-12>.panel.card-view {
  margin-left: -24px !important;
  margin-right: -24px !important;
}

.panel-default>.panel-heading {
  background: var(--wf-card) !important;
  border-bottom: 1.5px solid rgba(107, 46, 38, 0.09) !important;
  border-radius: var(--wf-radius) var(--wf-radius) 0 0 !important;
  padding: 13px 18px !important;
}

.panel-title {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.panel-body {
  border-radius: 0 0 var(--wf-radius) var(--wf-radius) !important;
  padding: 20px 18px !important;
}

.panel-wrapper.collapse.in {
  border-radius: 0 0 var(--wf-radius) var(--wf-radius) !important;
  overflow: hidden;
}

/* ── FORM CONTROLS ─────────────────────────────────────────── */
.form-control {
  height: 36px !important;
  border-radius: var(--wf-radius-sm) !important;
  border: 1.5px solid var(--wf-border) !important;
  font-size: 13.5px !important;
  color: var(--wf-text) !important;
  background-color: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  padding: 6px 10px !important;
}

.form-control:focus {
  border-color: var(--wf-accent) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18) !important;
  outline: none !important;
}

textarea.form-control {
  height: auto !important;
  min-height: 82px !important;
  resize: vertical !important;
}

.form-control[disabled],
.form-control[readonly] {
  background-color: #f8f9fa !important;
  opacity: 0.78 !important;
  cursor: not-allowed !important;
}

.form-group label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #555 !important;
  margin-bottom: 4px !important;
}

/* ── SECTION HEADERS (.custombg) ───────────────────────────── */
.custombg {
  background: linear-gradient(135deg, var(--wf-primary) 0%, var(--wf-primary-lt) 100%) !important;
  color: #fff !important;
  padding: 8px 13px !important;
  border-radius: var(--wf-radius-sm) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
}

.custombg *,
.custombg i,
.custombg .fa,
.custombg .fas,
.custombg .far {
  color: #fff !important;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  border-radius: var(--wf-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  transition: all 0.18s ease !important;
  letter-spacing: 0.2px !important;
  box-shadow: none !important;
}

.btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.13) !important;
}

.btn:active {
  transform: translateY(0) !important;
}

/* Primary = brand accent (golden) */
.btn-primary,
.btn-primary:visited,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
  background: linear-gradient(135deg, var(--wf-accent), var(--wf-accent-dk)) !important;
  border-color: var(--wf-accent-dk) !important;
  color: #fff !important;
}

/* Default */
.btn-default,
.btn-default:active {
  background: #fff !important;
  border: 1.5px solid var(--wf-border) !important;
  color: #555 !important;
}

.btn-default:hover {
  background: #f4f6f9 !important;
  border-color: #c0c8d2 !important;
  color: #333 !important;
}

/* Danger */
.btn-danger,
.btn-danger:active,
.btn-danger:hover {
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  border-color: #c0392b !important;
  color: #fff !important;
}

/* Success */
.btn-success,
.btn-success:active,
.btn-success:hover {
  background: linear-gradient(135deg, #27ae60, #1e8449) !important;
  border-color: #1e8449 !important;
  color: #fff !important;
}

/* Info */
.btn-info,
.btn-info:active,
.btn-info:hover {
  background: linear-gradient(135deg, #2980b9, #2471a3) !important;
  border-color: #2471a3 !important;
  color: #fff !important;
}

/* Warning */
.btn-warning,
.btn-warning:active,
.btn-warning:hover {
  background: linear-gradient(135deg, #f39c12, #d68910) !important;
  border-color: #d68910 !important;
  color: #fff !important;
}

/* Dark */
.btn-dark,
.btn-dark:active,
.btn-dark:hover {
  background: linear-gradient(135deg, #555, #333) !important;
  border-color: #2a2a2a !important;
  color: #fff !important;
}

/* Icon buttons – icons inherit parent color */
.btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.btn .fa,
.btn .fas,
.btn .far,
.btn-icon .fa,
.btn-icon .fas,
.btn-icon .far {
  color: inherit !important;
}

/* Square dashboard buttons */
.btn-sq {
  height: 100px !important;
  font-size: 15px !important;
  margin-right: 5px !important;
  margin-bottom: 10px !important;
  padding-top: 15px !important;
  border-radius: var(--wf-radius) !important;
  background: linear-gradient(145deg, var(--wf-primary), var(--wf-primary-lt)) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(107, 46, 38, 0.28) !important;
  transition: all 0.2s ease !important;
}

.btn-sq:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 20px rgba(107, 46, 38, 0.34) !important;
}

.fa-3x {
  font-size: 32px !important;
  margin-bottom: 6px !important;
}

/* ── TABLES ────────────────────────────────────────────────── */
.table {
  font-size: 13px !important;
}

.table>thead>tr>th {
  background: #f8f9fa !important;
  border-bottom: 2px solid rgba(107, 46, 38, 0.14) !important;
  color: var(--wf-primary) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.table>tbody>tr>td {
  vertical-align: middle !important;
  padding: 9px 12px !important;
  border-color: #f0f1f3 !important;
  font-size: 13px !important;
}

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: rgba(107, 46, 38, 0.025) !important;
}

.table>tbody>tr:hover>td {
  background-color: rgba(245, 166, 35, 0.07) !important;
}

/* ── BADGES & LABELS ───────────────────────────────────────── */
.badge {
  border-radius: 10px !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
}

.label {
  border-radius: 4px !important;
  font-size: 11px !important;
  padding: 3px 7px !important;
  font-weight: 600 !important;
}

.label-success {
  background-color: #27ae60 !important;
}

.label-danger {
  background-color: #e74c3c !important;
}

.label-warning {
  background-color: #e67e22 !important;
  color: #fff !important;
}

.label-info {
  background-color: #2980b9 !important;
}

.label-primary {
  background-color: var(--wf-primary) !important;
}

.label-default {
  background-color: #95a5a6 !important;
}

/* ── SELECT2 ───────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--wf-border) !important;
  border-radius: var(--wf-radius-sm) !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important;
  font-size: 13.5px !important;
  color: var(--wf-text) !important;
  padding-left: 10px !important;
}

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

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--wf-accent) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18) !important;
  outline: none !important;
}

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

.select2-dropdown {
  border: 1.5px solid var(--wf-border) !important;
  border-radius: var(--wf-radius-sm) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.11) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--wf-border) !important;
  border-radius: 4px !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
}

.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--wf-border) !important;
  border-radius: var(--wf-radius-sm) !important;
  min-height: 36px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--wf-accent) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18) !important;
}

/* ── DATATABLES ────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1.5px solid var(--wf-border) !important;
  border-radius: var(--wf-radius-sm) !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  height: 34px;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--wf-accent) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18) !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--wf-primary) !important;
  border-color: var(--wf-primary) !important;
  color: #fff !important;
  border-radius: var(--wf-radius-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(107, 46, 38, 0.08) !important;
  border-color: transparent !important;
  color: var(--wf-primary) !important;
  border-radius: var(--wf-radius-sm) !important;
}

.dataTables_wrapper .dataTables_info {
  font-size: 12.5px !important;
  color: var(--wf-muted) !important;
}

/* Global table toolbar: keep Search then Add in one line */
.wf-table-actions {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.wf-table-actions .dataTables_filter {
  margin: 0 !important;
  float: none !important;
}

.wf-table-actions .dataTables_filter label {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.wf-table-actions .dataTables_filter input {
  margin-left: 0 !important;
  width: 200px;
}

@media (max-width: 991px) {
  .wf-table-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .wf-table-actions .dataTables_filter input {
    width: 170px;
  }
}

@media (max-width: 480px) {
  .wf-table-actions .dataTables_filter input {
    width: 140px;
  }
}

/* ── MODALS ────────────────────────────────────────────────── */
.modal-content {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden !important;
}

.modal-header {
  background: linear-gradient(135deg, var(--wf-primary), var(--wf-primary-lt)) !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  border-bottom: none !important;
}

.modal-header .modal-title {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.modal-header .close {
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

.modal-header .close:hover {
  color: #fff !important;
}

.modal-footer {
  border-top: 1.5px solid #f0f2f5 !important;
  padding: 12px 20px !important;
}

/* ── INPUT GROUPS ──────────────────────────────────────────── */
.input-group-addon {
  background: #f8f9fa !important;
  border: 1.5px solid var(--wf-border) !important;
  border-radius: var(--wf-radius-sm) !important;
  color: var(--wf-primary) !important;
  font-size: 13px !important;
}

/* ── TABS ──────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid rgba(107, 46, 38, 0.14) !important;
}

.nav-tabs>li>a {
  border-radius: 6px 6px 0 0 !important;
  color: #666 !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  transition: all 0.18s ease !important;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  background: var(--wf-primary) !important;
  color: #fff !important;
  border-color: var(--wf-primary) !important;
}

.nav-tabs>li>a:hover {
  background: rgba(107, 46, 38, 0.06) !important;
  color: var(--wf-primary) !important;
  border-color: transparent !important;
}

/* ── ALERTS ────────────────────────────────────────────────── */
.alert {
  border-radius: var(--wf-radius-sm) !important;
  border: none !important;
  font-size: 13.5px !important;
}

.alert-success {
  background: #eafaf1 !important;
  color: #1e8449 !important;
}

.alert-danger {
  background: #fdedec !important;
  color: #c0392b !important;
}

.alert-warning {
  background: #fef9e7 !important;
  color: #9a7d0a !important;
}

.alert-info {
  background: #eaf4fc !important;
  color: #1a5276 !important;
}

/* ── FILTER CANVAS ─────────────────────────────────────────── */
.filter-canvas {
  border-left: none !important;
  box-shadow: -5px 0 28px rgba(0, 0, 0, 0.13) !important;
}

.filter-canvas-header {
  background: linear-gradient(135deg, var(--wf-primary), var(--wf-primary-lt)) !important;
  border-bottom: none !important;
  color: #fff !important;
}

.filter-canvas-header h5,
.filter-canvas-header .txt-dark {
  color: #fff !important;
  font-weight: 600 !important;
}

.filter-canvas-header .close {
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* ── ICONS ─────────────────────────────────────────────────── */
.fa,
.fas,
.far {
  color: var(--wf-primary);
}

/* ── UTILITIES ─────────────────────────────────────────────── */
.txt-dark {
  color: #333 !important;
}

.capitalize-font {
  text-transform: capitalize;
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .heading-bg {
    margin: 0 -10px 12px !important;
    padding: 6px 0 !important;
    min-height: 44px !important;
  }

  .heading-bg h5 {
    font-size: 13.5px !important;
    padding-left: 6px !important;
  }

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

  .page-wrapper .container-fluid>.panel.panel-default.border-panel,
  .page-wrapper .container-fluid>.panel.panel-default.card-view,
  .page-wrapper .container-fluid>.panel.card-view,
  .page-wrapper .container-fluid>.row>.col-xs-12>.panel.panel-default.border-panel,
  .page-wrapper .container-fluid>.row>.col-sm-12>.panel.panel-default.border-panel,
  .page-wrapper .container-fluid>.row>.col-md-12>.panel.panel-default.border-panel,
  .page-wrapper .container-fluid>.row>.col-lg-12>.panel.panel-default.border-panel,
  .page-wrapper .container-fluid>.row>.col-xs-12>.panel.card-view,
  .page-wrapper .container-fluid>.row>.col-sm-12>.panel.card-view,
  .page-wrapper .container-fluid>.row>.col-md-12>.panel.card-view,
  .page-wrapper .container-fluid>.row>.col-lg-12>.panel.card-view {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

  .btn {
    padding: 6px 10px !important;
    font-size: 12.5px !important;
  }

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

  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fixed-sidebar-left .side-nav>li>a .right-nav-text {
    font-size: 12.5px !important;
  }

  .fixed-sidebar-left .side-nav>li[style*="text-align: center"] a span {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .btn-sq {
    height: 80px !important;
    font-size: 13px !important;
  }

  .custombg {
    font-size: 12px !important;
    padding: 7px 10px !important;
  }
}

/* ── DASHBOARD CLEAN MODERN (index.php only) ──────────────── */
.dashboard-page .heading-bg {
  margin-bottom: 18px !important;
}

.dashboard-page .dashboard-heading-row>[class*="col-"] {
  min-height: 46px;
  display: flex;
  align-items: center;
}

.dashboard-page .dashboard-heading-title h5 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.dashboard-page .dashboard-heading-breadcrumb {
  justify-content: flex-end;
}

.dashboard-page .dashboard-heading-breadcrumb .breadcrumb {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dashboard-page .dashboard-main-row {
  margin-top: 4px;
}

.dashboard-page .dashboard-stat-col {
  margin-bottom: 2px;
}

.dashboard-page .dashboard-stat-col .panel.panel-default.card-view.pa-0[style*="background-color"] {
  background: #fff !important;
  border: 1px solid #e5ebf1 !important;
  border-top: 1px solid rgba(107, 46, 38, 0.25) !important;
  border-radius: 12px !important;
  box-shadow: 0 7px 18px rgba(30, 41, 59, 0.07) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-page .dashboard-stat-col .panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(30, 41, 59, 0.11) !important;
}

.dashboard-page .dashboard-stat-col a {
  display: block;
  color: inherit;
}

.dashboard-page .sm-data-box {
  padding: 20px 16px !important;
  min-height: 118px;
}

.dashboard-page .sm-data-box .row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dashboard-page .dashboard-stat-col .sm-data-box .col-xs-6 {
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.dashboard-page .sm-data-box .counter {
  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #152238 !important;
  margin-top: 2px !important;
}

.dashboard-page .sm-data-box .capitalize-font {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #5e6a78 !important;
  margin-top: 7px !important;
}

.dashboard-page .dashboard-stat-col .data-wrap-left {
  order: 2;
  text-align: center !important;
}

.dashboard-page .dashboard-stat-col .data-wrap-right {
  order: 1;
  text-align: center !important;
}

.dashboard-page .sm-data-box .data-right-rep-icon {
  font-size: 30px !important;
  color: var(--wf-primary) !important;
  opacity: 0.9;
  margin: 0 auto !important;
}

.dashboard-page .dashboard-greeting-card {
  min-height: 232px;
  border: 1px solid #e5ebf1 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 22px rgba(30, 41, 59, 0.08) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%) !important;
}

.dashboard-page .dashboard-greeting-title,
.dashboard-page #lblGreetings {
  font-size: 25px !important;
  font-weight: 700 !important;
  margin: 8px 0 6px !important;
}

.dashboard-page .dashboard-link-col .btn-sq {
  width: 100%;
  min-height: 96px;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 9px 20px rgba(107, 46, 38, 0.18) !important;
}

.dashboard-page .dashboard-link-col .btn-sq .fa-3x {
  font-size: 24px !important;
  margin-bottom: 8px !important;
}

.dashboard-page .dashboard-track-card {
  margin-top: 16px !important;
}

.dashboard-page .dashboard-track-card .panel-body {
  padding-top: 14px !important;
  padding-bottom: 10px !important;
}

.dashboard-page .dashboard-track-form .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.dashboard-page .dashboard-track-form .dashboard-track-action {
  margin-bottom: 10px;
}

.dashboard-page .dashboard-track-form .dashboard-track-action .btn {
  min-width: 120px;
}

.dashboard-page .dashboard-track-form label.control-label {
  font-size: 11.5px !important;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  color: #5f6b77 !important;
}

@media (max-width: 991px) {
  .dashboard-page .dashboard-right-col {
    margin-top: 8px;
  }

  .dashboard-page .dashboard-greeting-card {
    min-height: 180px;
  }

  .dashboard-page .dashboard-link-col .btn-sq {
    min-height: 84px;
  }
}

@media (max-width: 768px) {
  .dashboard-page .dashboard-heading-row>[class*="col-"] {
    min-height: auto;
    display: block;
  }

  .dashboard-page .dashboard-heading-breadcrumb {
    text-align: left;
  }

  .dashboard-page .dashboard-heading-breadcrumb .breadcrumb {
    margin-top: 6px !important;
  }

  .dashboard-page .sm-data-box {
    min-height: 84px;
    padding: 12px 12px !important;
  }

  .dashboard-page .sm-data-box .counter {
    font-size: 20px !important;
  }

  .dashboard-page .sm-data-box .capitalize-font {
    font-size: 13px !important;
  }

  .dashboard-page .dashboard-greeting-title,
  .dashboard-page #lblGreetings {
    font-size: 22px !important;
  }
}