/* Modern dashboard. Everything is scoped to the home route body class. */
.modern-home-page {
  background: #f5f7fb;
  color: #10213c;
}

.modern-home-page .wrapper {
  background: #f5f7fb;
}

.modern-home-page .main-footer {
  display: none;
}

.modern-home-page .modern-dashboard-header {
  height: 68px;
  border-bottom: 1px solid #dfe5ed;
  background: #fff;
  box-shadow: none;
}

.modern-home-page .modern-dashboard-header .modern-brand {
  display: flex;
  align-items: center;
  width: 225px;
  height: 68px;
  padding: 0 17px;
  background: #0b223c;
  color: #fff;
  line-height: normal;
  text-align: left;
}

.modern-home-page .modern-dashboard-header .modern-brand:hover {
  background: #0b223c;
}

.modern-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  color: #f3a400;
  font-size: 30px;
}

.modern-brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.modern-brand-copy strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.2px;
  white-space: nowrap;
}

.modern-brand-copy small {
  margin-top: 3px;
  color: #e5ecf5;
  font-size: 12px;
  letter-spacing: .6px;
}

.modern-home-page .modern-dashboard-header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  margin-left: 225px;
  padding: 0 28px 0 20px;
  border: 0;
  background: #fff;
}

.modern-header-left,
.modern-header-right {
  display: flex;
  align-items: center;
}

.modern-home-page .modern-dashboard-header .sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 68px;
  padding: 0;
  color: #17304f;
  font-size: 19px;
}

.modern-home-page .modern-dashboard-header .sidebar-toggle:before {
  display: none;
}

.dashboard-menu-glyph {
  color: #17304f;
  font-family: Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
}

.modern-home-page .modern-dashboard-header .sidebar-toggle:hover {
  background: transparent;
  color: #0b63df;
}

.modern-header-left h1 {
  margin: 0 0 0 14px;
  color: #07142a;
  font-size: 19px;
  font-weight: 700;
}

.modern-header-right {
  gap: 18px;
  margin-left: auto;
}

.dashboard-quick-search {
  display: flex;
  align-items: center;
  width: 315px;
  height: 40px;
  border: 1px solid #ccd6e3;
  border-radius: 5px;
  background: #fff;
}

.dashboard-quick-search > i {
  margin-left: 13px;
  color: #284160;
  font-size: 14px;
}

.dashboard-quick-search input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 0;
  outline: 0;
  color: #243751;
  font-size: 12px;
}

.dashboard-quick-search input::placeholder {
  color: #8a98ab;
}

.dashboard-quick-search button {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #17304f;
}

.dashboard-notification {
  position: relative;
  width: 42px;
  height: 42px;
  border: 0;
  border-right: 1px solid #e6eaf0;
  background: transparent;
  color: #253a56;
  font-size: 18px;
}

.dashboard-notification span {
  position: absolute;
  top: 1px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #e3242b;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.modern-user-menu > a {
  display: flex !important;
  align-items: center;
  min-width: 205px;
  height: 68px;
  padding: 8px 4px 8px 0 !important;
  color: #122744 !important;
}

.modern-user-menu > a:hover,
.modern-user-menu.open > a {
  background: transparent !important;
}

.modern-user-menu .user-image {
  width: 38px !important;
  height: 38px !important;
  margin: 0 11px 0 0 !important;
  border: 1px solid #d7dee8;
  object-fit: cover;
}

.modern-user-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.25;
}

.modern-user-copy strong {
  font-size: 12px;
  font-weight: 700;
}

.modern-user-copy small {
  margin-top: 4px;
  color: #53657e;
  font-size: 11px;
}

.modern-user-menu .user-chevron {
  margin-left: 16px;
  color: #263e5e;
}

.modern-user-menu .dropdown-menu {
  right: 0;
  width: 210px !important;
  min-width: 210px;
  border: 1px solid #dfe5ed;
  border-radius: 5px;
  box-shadow: 0 8px 28px rgba(15, 31, 54, .13);
}

.modern-user-menu .user-body {
  border: 0 !important;
}

.modern-user-menu .user-body .btn {
  width: 100%;
}

.modern-home-page .modern-dashboard-sidebar {
  position: fixed;
  top: 68px;
  bottom: 0;
  width: 225px;
  height: calc(100vh - 68px);
  min-height: 0;
  padding-top: 0;
  background: linear-gradient(180deg, #0d2642 0%, #0a213a 100%);
  box-shadow: none;
}

.modern-dashboard-sidebar .sidebar {
  position: relative;
  height: 100%;
  min-height: 0;
  padding: 12px 15px 150px;
  overflow-y: auto;
}

.modern-dashboard-sidebar .modern-sidebar-menu {
  background: transparent;
}

.modern-dashboard-sidebar .modern-sidebar-menu > li {
  margin-bottom: 5px;
}

.modern-dashboard-sidebar .modern-sidebar-menu > li > a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 13px;
  border: 0;
  border-radius: 5px;
  color: #e7edf6;
  font-size: 14px;
}

.modern-dashboard-sidebar .modern-sidebar-menu > li > a:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.modern-dashboard-sidebar .modern-sidebar-menu > li.active > a {
  border: 0;
  background: linear-gradient(90deg, #0c69dc, #0878ee);
  box-shadow: 0 6px 16px rgba(0, 91, 211, .28);
  color: #fff;
}

.modern-dashboard-sidebar .modern-sidebar-menu > li > a > i {
  width: 22px;
  margin-right: 9px;
  color: #d8e4f1;
  font-size: 16px;
  text-align: center;
}

.modern-dashboard-sidebar .modern-sidebar-menu > li.active > a > i {
  color: #fff;
}

.modern-sidebar-footer {
  position: absolute;
  right: 15px;
  bottom: 19px;
  left: 15px;
}

.dashboard-theme-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  height: 39px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 5px;
  background: transparent;
  color: #f2f6fb;
  font-size: 12px;
  text-align: left;
}

.dashboard-theme-toggle > i {
  width: 24px;
  font-size: 15px;
}

.dashboard-theme-toggle > span:nth-child(2) {
  flex: 1;
}

.theme-switch {
  position: relative;
  width: 29px;
  height: 17px;
  border-radius: 14px;
  background: #dde5ef;
}

.theme-switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #17304f;
  transition: transform .2s ease;
}

.dashboard-dark .theme-switch span {
  transform: translateX(12px);
}

.sidebar-copyright {
  display: flex;
  flex-direction: column;
  margin-top: 11px;
  padding: 14px 8px 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  color: #bdc9d8;
  font-size: 11px;
}

.sidebar-copyright small {
  margin-top: 8px;
  color: #9caec2;
  font-size: 10px;
}

.modern-home-page .modern-dashboard-wrapper {
  min-height: calc(100vh - 68px) !important;
  margin-left: 225px;
  background: #f5f7fb;
}

.modern-dashboard-content {
  padding: 0 24px;
}

.dashboard-toolbar {
  display: flex;
  align-items: center;
  min-height: 34px;
  gap: 10px;
}

.dashboard-toolbar-spacer {
  flex: 1;
}

.dashboard-date-control,
.dashboard-export-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  border: 1px solid #d8e0ea;
  border-radius: 5px;
  background: #fff;
  color: #1d304d;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(22, 40, 66, .04);
}

.dashboard-date-control {
  position: relative;
  min-width: 130px;
  margin: 0;
  padding: 0 10px;
  cursor: pointer;
  overflow: hidden;
}

.dashboard-date-control i:first-child,
.dashboard-export-button i {
  margin-right: 8px;
}

.dashboard-date-control i:last-of-type {
  margin-left: 8px;
}

.dashboard-date-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.dashboard-export-button {
  padding: 0 14px;
}

.dashboard-export-button:hover {
  border-color: #9bb9e8;
  color: #0b63df;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.dashboard-kpi-card,
.dashboard-card {
  border: 1px solid #e1e6ed;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(20, 38, 63, .055);
}

.dashboard-kpi-card {
  display: flex;
  align-items: center;
  min-height: 118px;
  padding: 18px;
}

.dashboard-kpi-icon {
  display: flex;
  flex: 0 0 56px;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-right: 15px;
  border-radius: 50%;
  color: #fff;
  font-size: 23px;
}

.kpi-blue .dashboard-kpi-icon { background: linear-gradient(135deg, #2567da, #3987ee); }
.kpi-green .dashboard-kpi-icon { background: linear-gradient(135deg, #159150, #3ac273); }
.kpi-purple .dashboard-kpi-icon { background: linear-gradient(135deg, #4d34ae, #7757dd); }
.kpi-orange .dashboard-kpi-icon { background: linear-gradient(135deg, #ef6505, #ff871c); }
.kpi-teal .dashboard-kpi-icon { background: linear-gradient(135deg, #00969a, #1ab7b5); }

.dashboard-kpi-content {
  min-width: 0;
}

.dashboard-kpi-content > span {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.kpi-blue .dashboard-kpi-content > span { color: #1563d7; }
.kpi-green .dashboard-kpi-content > span { color: #179351; }
.kpi-purple .dashboard-kpi-content > span { color: #5938b7; }
.kpi-orange .dashboard-kpi-content > span { color: #e7670c; }
.kpi-teal .dashboard-kpi-content > span { color: #069398; }

.dashboard-kpi-content > strong {
  display: block;
  overflow: hidden;
  margin-bottom: 6px;
  color: #10213c;
  font-size: 18px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-kpi-content small {
  display: block;
  color: #68778d;
  font-size: 10px;
  white-space: nowrap;
}

.dashboard-kpi-content .kpi-detail {
  margin-bottom: 5px;
}

.kpi-trend i {
  margin-right: 5px;
}

.kpi-trend.positive i { color: #11a65c; }
.kpi-trend.negative i { color: #e34646; }
.kpi-trend.neutral i { color: #8794a6; }

.dashboard-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1.05fr) minmax(280px, .9fr);
  gap: 14px;
  margin-bottom: 14px;
}

.dashboard-card {
  min-width: 0;
  overflow: hidden;
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 43px;
  padding: 0 13px;
}

.dashboard-card-header h2 {
  margin: 0;
  color: #0c1c36;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-card-header > a {
  color: #0666e5;
  font-size: 10px;
  font-weight: 600;
}

.card-period-button {
  height: 27px;
  padding: 0 9px;
  border: 1px solid #d9e1eb;
  border-radius: 5px;
  background: #fff;
  color: #283d59;
  font-size: 10px;
}

.card-period-button i {
  margin-left: 5px;
}

.sales-chart-wrap {
  position: relative;
  height: 165px;
  padding: 3px 12px 0;
}

.sales-chart-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 60px;
  border-top: 1px solid #e8edf3;
}

.sales-chart-summary > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 13px;
}

.sales-chart-summary > div:not(:last-child):after {
  position: absolute;
  top: 11px;
  right: 0;
  bottom: 11px;
  width: 1px;
  background: #e5eaf0;
  content: "";
}

.sales-chart-summary span {
  margin-bottom: 4px;
  color: #68778d;
  font-size: 9px;
}

.sales-chart-summary strong {
  color: #0f213c;
  font-size: 11px;
  font-weight: 700;
}

.sales-chart-summary small {
  margin-top: 2px;
  color: #65758a;
  font-size: 9px;
}

.category-chart-layout {
  display: grid;
  grid-template-columns: 48% 52%;
  min-height: 190px;
  padding: 5px 13px 4px;
}

.category-chart-wrap {
  position: relative;
  height: 168px;
}

.category-chart-total {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.category-chart-total strong {
  color: #12233e;
  font-size: 12px;
  font-weight: 700;
}

.category-chart-total span {
  margin-top: 3px;
  color: #728095;
  font-size: 9px;
}

.category-chart-legend {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 9px;
}

.category-legend-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 11px;
}

.legend-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin: 3px 9px 0 0;
  border-radius: 50%;
}

.category-legend-item strong,
.category-legend-item small {
  display: block;
}

.category-legend-item strong {
  overflow: hidden;
  max-width: 145px;
  margin-bottom: 2px;
  color: #21324c;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-legend-item small {
  color: #68778c;
  font-size: 9px;
}

.dashboard-card-link {
  display: flex;
  align-items: center;
  min-height: 35px;
  padding: 0 14px;
  border-top: 1px solid #e8edf3;
  color: #0868e7;
  font-size: 10px;
  font-weight: 600;
}

.dashboard-card-link i {
  margin-left: 7px;
}

.quick-summary-list {
  padding: 0 13px 7px;
}

.quick-summary-list > div {
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  min-height: 39px;
  border-top: 1px solid #edf0f4;
}

.quick-summary-list > div.summary-highlight {
  margin-top: 4px;
  border-top: 1px solid #dce3ec;
}

.summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  font-size: 10px;
}

.summary-green { background: #e7f8ee; color: #12a65b; }
.summary-orange { background: #fff1e5; color: #ef7316; }
.summary-purple { background: #eee9ff; color: #6846d2; }
.summary-blue { background: #e9f1ff; color: #276edd; }
.summary-red { background: #ffeaea; color: #e7353b; }

.quick-summary-list strong {
  color: #263750;
  font-size: 10px;
  font-weight: 600;
}

.quick-summary-list b {
  color: #13243d;
  font-size: 10px;
  font-weight: 700;
  text-align: right;
}

.quick-summary-list b small {
  display: block;
  margin-top: 2px;
  color: #66758a;
  font-size: 8px;
  font-weight: 400;
}

.dashboard-inventory-grid {
  display: grid;
  grid-template-columns: 1.08fr .95fr 1.25fr;
  gap: 14px;
  margin-bottom: 14px;
}

.compact-list-card {
  display: flex;
  min-height: 268px;
  flex-direction: column;
}

.top-products-table-wrap,
.transactions-table-wrap {
  overflow-x: auto;
}

.top-products-table,
.transactions-table {
  width: 100%;
  border-collapse: collapse;
}

.top-products-table th,
.top-products-table td {
  height: 31px;
  padding: 3px 11px;
  color: #23344d;
  font-size: 9px;
  white-space: nowrap;
}

.top-products-table th {
  border-bottom: 1px solid #e8edf3;
  color: #4d5d73;
  font-weight: 600;
  text-align: left;
}

.top-products-table td:nth-child(2) {
  display: flex;
  align-items: center;
  max-width: 230px;
}

.top-products-table img {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-right: 9px;
  object-fit: contain;
}

.top-products-table td strong {
  overflow: hidden;
  color: #14253f;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.compact-list-card > .dashboard-card-link {
  margin-top: auto;
}

.inventory-list {
  padding: 0 13px 5px;
}

.inventory-list-item {
  display: flex;
  align-items: center;
  min-height: 46px;
  gap: 9px;
}

.inventory-list-item > img {
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  object-fit: contain;
}

.inventory-list-item > div:not(.expiry-missing) {
  min-width: 0;
  flex: 1;
}

.inventory-list-item strong,
.inventory-list-item small {
  display: block;
}

.inventory-list-item > div > strong {
  overflow: hidden;
  color: #1e2f49;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-list-item > div > small {
  margin-top: 3px;
  color: #68778b;
  font-size: 9px;
}

.stock-badge,
.expiry-badge {
  min-width: 42px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
}

.stock-badge.critical {
  background: #fee8e8;
  color: #e7373b;
}

.stock-badge.low {
  background: #fff0df;
  color: #ef7917;
}

.expiry-table-card {
  min-height: 268px;
}

.expiry-products-table-wrap {
  min-width: 0;
  overflow-x: auto;
}

.expiry-products-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.expiry-products-table th,
.expiry-products-table td {
  height: 40px;
  padding: 5px 11px;
  border-top: 1px solid #e8edf3;
  color: #263750;
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.expiry-products-table th {
  height: 32px;
  color: #4d5d73;
  font-size: 11px;
  font-weight: 600;
}

.expiry-products-table th:nth-child(1) { width: 44%; }
.expiry-products-table th:nth-child(2) { width: 24%; }
.expiry-products-table th:nth-child(3) { width: 17%; }
.expiry-products-table th:nth-child(4) { width: 15%; }

.expiry-product-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}

.expiry-product-cell img {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  object-fit: contain;
}

.expiry-product-cell strong {
  overflow: hidden;
  color: #172941;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expiry-lot {
  color: #4f6077;
}

.expiry-days,
.expiry-quantity {
  font-size: 12px;
  font-weight: 700;
}

.expiry-days.expiry-urgent { color: #ef3f43; }
.expiry-days.expiry-warning { color: #ed9419; }
.expiry-days.expiry-safe { color: #18a45a; }
.expiry-quantity { color: #33445d; }

.dashboard-empty-state {
  padding: 24px 12px;
  color: #78869a;
  font-size: 10px;
  text-align: center;
}

.dashboard-empty-state i {
  margin-right: 5px;
  color: #1eaf66;
}

.transactions-card {
  margin-bottom: 14px;
}

.transactions-card .dashboard-card-header {
  min-height: 39px;
}

.transactions-table th,
.transactions-table td {
  height: 32px;
  padding: 5px 17px;
  border-top: 1px solid #e9edf3;
  color: #263750;
  font-size: 10px;
  white-space: nowrap;
  text-align: left;
}

.transactions-table th {
  color: #4d5d72;
  font-size: 9px;
  font-weight: 600;
}

.payment-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 600;
}

.payment-badge i {
  margin-right: 5px;
}

.payment-card { background: #e6efff; color: #1b65d8; }
.payment-cash { background: #e5f8ec; color: #07964c; }
.payment-voucher { background: #fff0df; color: #e66e0b; }

.dashboard-status-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  gap: 18px;
  margin: 0 -24px;
  padding: 7px 24px;
  border-top: 1px solid #dfe5ed;
  background: #fff;
  color: #66768b;
  font-size: 11px;
  box-shadow: 0 -2px 8px rgba(18, 38, 63, .035);
}

.dashboard-status-main,
.dashboard-stock-statuses {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 20px;
}

.dashboard-status-main > span,
.dashboard-last-sync {
  white-space: nowrap;
}

.dashboard-status-main i,
.dashboard-last-sync i {
  margin-right: 6px;
  color: #54677f;
}

.dashboard-status-main strong,
.dashboard-last-sync strong {
  color: #32445d;
  font-weight: 600;
}

.dashboard-stock-statuses {
  justify-content: center;
  gap: 7px;
}

.dashboard-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid #e1e6ed;
  border-radius: 5px;
  background: #fff;
  color: #5d6c81;
  font-size: 10px;
  white-space: nowrap;
}

.dashboard-status-pill:hover,
.dashboard-status-pill:focus {
  color: inherit;
  text-decoration: none;
}

.dashboard-status-pill i {
  margin-right: 5px;
}

.dashboard-status-pill strong {
  margin-left: 3px;
  font-weight: 600;
}

.dashboard-status-pill.status-critical {
  border-color: #ffd7d9;
  background: #fff7f7;
  color: #d94449;
}

.dashboard-status-pill.status-low {
  border-color: #ffe1b7;
  background: #fffaf1;
  color: #d47b13;
}

.dashboard-status-pill.status-inactive {
  background: #f7f8fa;
  color: #6b7789;
}

.dashboard-last-sync {
  justify-self: end;
}

.modern-home-page .modern-brand-copy strong {
  font-size: 14px;
  letter-spacing: -.35px;
}
.modern-home-page .modern-brand-copy small { font-size: 13px; }
.modern-home-page .modern-header-left h1 { font-size: 22px; }
.modern-home-page .dashboard-quick-search input { font-size: 14px; }
.modern-home-page .modern-user-copy strong { font-size: 14px; }
.modern-home-page .modern-user-copy small { font-size: 12px; }
.modern-home-page .modern-dashboard-sidebar .modern-sidebar-menu > li > a { font-size: 15px; }
.modern-home-page .dashboard-theme-toggle,
.modern-home-page .sidebar-copyright,
.modern-home-page .sidebar-copyright small { font-size: 12px; }
.modern-home-page .dashboard-date-control,
.modern-home-page .dashboard-export-button { font-size: 13px; }
.modern-home-page .dashboard-kpi-content > span { font-size: 13px; }
.modern-home-page .dashboard-kpi-content > strong { font-size: 20px; }
.modern-home-page .dashboard-kpi-content small { font-size: 12px; }
.modern-home-page .dashboard-card-header h2 { font-size: 14px; }
.modern-home-page .dashboard-card-header > a,
.modern-home-page .card-period-button,
.modern-home-page .dashboard-card-link { font-size: 12px; }
.modern-home-page .sales-chart-summary span,
.modern-home-page .sales-chart-summary small { font-size: 11px; }
.modern-home-page .sales-chart-summary strong { font-size: 13px; }
.modern-home-page .category-chart-total strong { font-size: 14px; }
.modern-home-page .category-chart-total span,
.modern-home-page .category-legend-item small { font-size: 11px; }
.modern-home-page .category-legend-item strong { font-size: 12px; }
.modern-home-page .quick-summary-list strong,
.modern-home-page .quick-summary-list b { font-size: 12px; }
.modern-home-page .quick-summary-list b small { font-size: 10px; }
.modern-home-page .summary-icon { font-size: 12px; }
.modern-home-page .top-products-table th,
.modern-home-page .top-products-table td { font-size: 11px; }
.modern-home-page .top-products-table td strong { font-size: 12px; }
.modern-home-page .inventory-list-item > div > strong { font-size: 12px; }
.modern-home-page .inventory-list-item > div > small { font-size: 11px; }
.modern-home-page .stock-badge,
.modern-home-page .payment-badge { font-size: 11px; }
.modern-home-page .dashboard-empty-state { font-size: 12px; }
.modern-home-page .transactions-table td { font-size: 12px; }
.modern-home-page .transactions-table th { font-size: 11px; }

.modern-home-page.dashboard-dark,
.modern-home-page.dashboard-dark .wrapper,
.modern-home-page.dashboard-dark .modern-dashboard-wrapper {
  background: #111b2b;
}

.modern-home-page.dashboard-dark .modern-dashboard-header,
.modern-home-page.dashboard-dark .modern-dashboard-header .navbar,
.modern-home-page.dashboard-dark .dashboard-kpi-card,
.modern-home-page.dashboard-dark .dashboard-card,
.modern-home-page.dashboard-dark .dashboard-date-control,
.modern-home-page.dashboard-dark .dashboard-export-button,
.modern-home-page.dashboard-dark .dashboard-quick-search {
  border-color: #2a3b53;
  background: #172438;
  color: #e6edf7;
}

.modern-home-page.dashboard-dark .modern-header-left h1,
.modern-home-page.dashboard-dark .dashboard-kpi-content > strong,
.modern-home-page.dashboard-dark .dashboard-card-header h2,
.modern-home-page.dashboard-dark .top-products-table td strong,
.modern-home-page.dashboard-dark .inventory-list-item > div > strong,
.modern-home-page.dashboard-dark .quick-summary-list strong,
.modern-home-page.dashboard-dark .quick-summary-list b {
  color: #eef3fa;
}

.modern-home-page.dashboard-dark .dashboard-quick-search input {
  background: transparent;
  color: #eef3fa;
}

.modern-home-page.dashboard-dark .dashboard-status-bar,
.modern-home-page.dashboard-dark .dashboard-status-pill {
  border-color: #2a3b53;
  background: #172438;
  color: #c5d0df;
}

.modern-home-page.dashboard-dark .dashboard-status-main strong,
.modern-home-page.dashboard-dark .dashboard-last-sync strong {
  color: #eef3fa;
}

.modern-home-page.dashboard-dark .expiry-products-table th,
.modern-home-page.dashboard-dark .expiry-products-table td {
  border-color: #2a3b53;
  color: #c5d0df;
}

.modern-home-page.dashboard-dark .expiry-product-cell strong,
.modern-home-page.dashboard-dark .expiry-quantity {
  color: #eef3fa;
}

.modern-home-page.dashboard-dark .expiry-lot {
  color: #aebbcf;
}

@media (max-width: 1450px) {
  .dashboard-kpi-card { padding: 14px; }
  .dashboard-kpi-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    margin-right: 11px;
    font-size: 20px;
  }
  .dashboard-kpi-content > strong { font-size: 15px; }
  .dashboard-primary-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(260px, .85fr);
  }
}

@media (max-width: 1199px) {
  .dashboard-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-primary-grid,
  .dashboard-inventory-grid { grid-template-columns: 1fr 1fr; }
  .quick-summary-card,
  .expiry-card { grid-column: 1 / -1; }
  .dashboard-quick-search { width: 250px; }
  .dashboard-status-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .dashboard-stock-statuses {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 991px) {
  .modern-home-page .modern-dashboard-header .modern-brand {
    width: 68px;
    padding: 0 16px;
  }
  .modern-brand-copy { display: none; }
  .modern-home-page .modern-dashboard-header .navbar {
    margin-left: 68px;
    padding-right: 12px;
  }
  .modern-home-page .modern-dashboard-sidebar { transform: translate(-225px, 0); }
  .modern-home-page.sidebar-open .modern-dashboard-sidebar { transform: translate(0, 0); }
  .modern-home-page .modern-dashboard-wrapper { margin-left: 0; }
  .modern-user-menu > a { min-width: auto; }
  .modern-user-copy,
  .modern-user-menu .user-chevron { display: none; }
}

@media (max-width: 767px) {
  .modern-header-left h1,
  .dashboard-quick-search,
  .dashboard-notification { display: none; }
  .modern-dashboard-content { padding: 0 10px 16px; }
  .dashboard-status-bar {
    grid-template-columns: 1fr;
    margin: 0 -10px -16px;
    padding: 10px;
  }
  .dashboard-status-main,
  .dashboard-stock-statuses {
    flex-wrap: wrap;
    gap: 8px 14px;
  }
  .dashboard-stock-statuses,
  .dashboard-last-sync {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
  }
  .dashboard-toolbar {
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 7px 0;
  }
  .dashboard-toolbar-spacer { display: none; }
  .dashboard-kpi-grid,
  .dashboard-primary-grid,
  .dashboard-inventory-grid { grid-template-columns: 1fr; }
  .quick-summary-card,
  .expiry-card { grid-column: auto; }
  .dashboard-kpi-card { min-height: 105px; }
  .sales-chart-summary { grid-template-columns: 1fr 1fr; }
  .category-chart-layout { grid-template-columns: 1fr; }
  .category-chart-legend { padding: 5px 15px; }
}