/**
 * =============================================================================
 * HOSPITAL FE — RESPONSIVE LAYOUT ENGINE
 * =============================================================================
 * Loads LAST in index.html — overrides all legacy Metronic/Bootstrap CSS.
 * Tailwind-first: utility classes drive the layout, this file handles
 * the Metronic legacy class bridge + off-canvas sidebar drawer.
 * =============================================================================
 *
 * BREAKPOINTS:
 *   Mobile  < 768px   (xs/sm — phones)
 *   Tablet  768-991px (md — iPad portrait)
 *   Desktop ≥ 992px   (lg/xl)
 * =============================================================================
 */

/* ============================================================
   1. DESKTOP LAYOUT (≥992px)
   ============================================================ */
@media (min-width: 992px) {
  /* Sidebar — fixed, full height */
  body .page-sidebar-wrapper {
    position: fixed !important;
    top: var(--header-height, 60px) !important;
    left: 0 !important;
    width: var(--sidebar-width, 250px) !important;
    height: calc(100dvh - var(--header-height, 60px)) !important;
    z-index: var(--z-sidebar, 1050) !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    display: block !important;
    transform: none !important;
    /* Reset any flex child properties */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }

  body.page-sidebar-closed .page-sidebar-wrapper {
    width: var(--sidebar-width-closed, 54px) !important;
  }

  /* Content wrapper — offset by sidebar width (sidebar is fixed, not in flow) */
  body .page-content-wrapper {
    margin-left: var(--sidebar-width, 250px) !important;
    width: calc(100% - var(--sidebar-width, 250px)) !important;
    max-width: calc(100% - var(--sidebar-width, 250px)) !important;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    float: none !important;
    /* Override AppMain.html ::ng-deep flex values */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    min-height: calc(100dvh - var(--header-height, 60px)) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body .page-content-wrapper .page-content {
    margin-left: 0 !important;
    padding-top: 0 !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-sidebar-closed .page-content-wrapper {
    margin-left: var(--sidebar-width-closed, 54px) !important;
    width: calc(100% - var(--sidebar-width-closed, 54px)) !important;
    max-width: calc(100% - var(--sidebar-width-closed, 54px)) !important;
  }

  /* page-container: reset flex to not interfere with fixed sidebar */
  body .page-container {
    display: block !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* No backdrop on desktop */
  .sidebar-backdrop { display: none !important; }

  /* Logo area matches sidebar width */
  body .page-header.navbar .page-logo {
    width: var(--sidebar-width, 250px) !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  body.page-sidebar-closed .page-header.navbar .page-logo {
    width: var(--sidebar-width-closed, 54px) !important;
  }
}

/* ============================================================
   2. TABLET LAYOUT (768px–991px) — iPad portrait & small laptops
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
  /* Sidebar as off-canvas drawer */
  body .page-sidebar-wrapper {
    position: fixed !important;
    top: var(--header-height, 60px) !important;
    left: 0 !important;
    width: 280px !important;
    height: calc(100dvh - var(--header-height, 60px)) !important;
    z-index: var(--z-sidebar, 1050) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  /* When sidebar is OPEN on tablet */
  body:not(.page-sidebar-closed) .page-sidebar-wrapper {
    transform: translateX(0) !important;
    box-shadow: var(--shadow-xl, 0 24px 48px rgba(0,0,0,0.5)) !important;
  }

  body .page-sidebar-wrapper .page-sidebar {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  /* Content fills full width */
  body .page-content-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body .page-content-wrapper .page-content {
    margin-left: 0 !important;
    padding-top: 0 !important;
    padding-right: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 16px !important;
    width: 100% !important;
  }

  /* Backdrop for sidebar overlay on tablet */
  body:not(.page-sidebar-closed) .sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: var(--header-height, 60px) 0 0 0 !important;
    background: rgba(2, 6, 23, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: var(--z-backdrop, 1040) !important;
    cursor: pointer !important;
  }

  /* Logo — no sidebar width constraint */
  body .page-header.navbar .page-logo {
    width: auto !important;
    min-width: 160px !important;
  }

  /* Show hamburger toggler */
  body .page-header.navbar .responsive-toggler {
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;
  }

  /* 2-column grid on tablet (md-3, md-4 columns) */
  body .col-md-3,
  body .col-md-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  body .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   3. MOBILE LAYOUT (<768px) — Phones
   ============================================================ */
@media (max-width: 767px) {
  /* Sidebar drawer */
  body .page-sidebar-wrapper {
    position: fixed !important;
    top: var(--header-height, 60px) !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: calc(100dvh - var(--header-height, 60px)) !important;
    z-index: var(--z-sidebar, 1050) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
  }

  body:not(.page-sidebar-closed) .page-sidebar-wrapper {
    transform: translateX(0) !important;
    box-shadow: var(--shadow-2xl, 0 32px 64px rgba(0,0,0,0.75)) !important;
  }

  body .page-sidebar-wrapper .page-sidebar {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  /* Content full width */
  body .page-content-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
  }

  body .page-content-wrapper .page-content {
    margin-left: 0 !important;
    padding-top: 0 !important;
    padding-right: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Backdrop */
  body:not(.page-sidebar-closed) .sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: var(--header-height, 60px) 0 0 0 !important;
    background: rgba(2, 6, 23, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: var(--z-backdrop, 1040) !important;
    cursor: pointer !important;
  }

  /* Header compact */
  body .page-header.navbar .page-logo {
    width: auto !important;
    min-width: 0 !important;
  }

  body .page-header.navbar .page-logo a span.brand-title {
    display: none !important; /* Hide text brand on very small screens */
  }

  /* Show hamburger */
  body .page-header.navbar .responsive-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    margin-top: 0 !important;
  }

  /* Stack all Bootstrap columns vertically */
  body .col-xs-1, body .col-xs-2, body .col-xs-3, body .col-xs-4,
  body .col-xs-5, body .col-xs-6, body .col-xs-7, body .col-xs-8,
  body .col-xs-9, body .col-xs-10, body .col-xs-11, body .col-xs-12,
  body .col-sm-1, body .col-sm-2, body .col-sm-3, body .col-sm-4,
  body .col-sm-5, body .col-sm-6, body .col-sm-7, body .col-sm-8,
  body .col-sm-9, body .col-sm-10, body .col-sm-11, body .col-sm-12,
  body .col-md-1, body .col-md-2, body .col-md-3, body .col-md-4,
  body .col-md-5, body .col-md-6, body .col-md-7, body .col-md-8,
  body .col-md-9, body .col-md-10, body .col-md-11, body .col-md-12,
  body .col-lg-1, body .col-lg-2, body .col-lg-3, body .col-lg-4,
  body .col-lg-5, body .col-lg-6, body .col-lg-7, body .col-lg-8,
  body .col-lg-9, body .col-lg-10, body .col-lg-11, body .col-lg-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Cards reduced padding on phone */
  body .portlet.light {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  /* Tables horizontal scroll */
  body .table-responsive,
  body div.table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Modals — fullscreen on phone */
  body .modal-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    min-height: 100dvh !important;
  }

  body .modal-content {
    border-radius: 0 !important;
    min-height: 100dvh !important;
  }
}

/* ============================================================
   4. PAGE-BAR / MODULE SUB-NAVIGATION — Responsive Tabs
   ============================================================ */
/* Desktop: full horizontal scroll */
body .page-bar {
  display: flex !important;
  align-items: center !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 8px 12px !important;
  background: var(--color-bg-surface, #0c1920) !important;
  border-bottom: 1px solid var(--color-border-default) !important;
  position: sticky !important;
  top: var(--header-height, 60px) !important;
  z-index: var(--z-sticky, 200) !important;
}

body .page-bar::-webkit-scrollbar { display: none !important; }

body .page-bar .page-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body .page-bar .page-breadcrumb > li {
  flex-shrink: 0 !important;
}

/* Tab buttons — use Tailwind utility look */
body .page-bar .page-breadcrumb > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary, #94a3b8) !important;
  background: transparent !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  min-height: 34px !important;
  cursor: pointer !important;
}

body .page-bar .page-breadcrumb > li > a:hover {
  color: var(--color-text-primary) !important;
  background: var(--color-accent-subtle) !important;
  border-color: var(--color-accent-primary) !important;
}

body .page-bar .page-breadcrumb > li > a.link3-active,
body .page-bar .page-breadcrumb > li > a.active {
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-hover)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 0 12px var(--color-accent-glow) !important;
  font-weight: 600 !important;
}

/* Module right-side label (active store/inventory label) */
body .page-bar .right .label,
body .page-bar .right .label-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: var(--color-status-info-bg) !important;
  color: var(--color-status-info-text) !important;
  border: 1px solid var(--color-status-info-border) !important;
  white-space: nowrap !important;
}

/* Tablet: scroll tabs */
@media (max-width: 991px) {
  body .page-bar {
    top: var(--header-height, 60px) !important;
    padding: 6px 10px !important;
  }
  body .page-bar .page-breadcrumb > li > a {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
}

/* Mobile: compact scrollable pill row */
@media (max-width: 767px) {
  body .page-bar {
    padding: 6px 8px !important;
  }
  body .page-bar .page-breadcrumb > li > a {
    padding: 4px 8px !important;
    font-size: 11.5px !important;
    min-height: 30px !important;
  }
}

/* ============================================================
   5. INVENTORY MODULE — Tailwind Responsive Overrides
   ============================================================ */
/* Inventory active store badge area */
.inv-store-badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px !important;
  background: var(--color-status-info-bg) !important;
  border: 1px solid var(--color-status-info-border) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-status-info-text) !important;
  flex-shrink: 0 !important;
}

/* Goods Receipt list — action + filter row */
.gr-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

@media (max-width: 767px) {
  .gr-action-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .gr-action-row > * {
    width: 100% !important;
  }
}

/* ============================================================
   6. SETTINGS MODULE — Horizontal Tab Navigation
   ============================================================ */
/* The settings page-bar dropdown "More..." */
.bil-hr-dropdown {
  min-width: 200px !important;
  background: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border-default) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px !important;
  overflow: hidden !important;
}

.bil-hr-dropdown li a {
  display: block !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.bil-hr-dropdown li a:hover {
  background: var(--color-accent-subtle) !important;
  color: var(--color-text-primary) !important;
}

.hr-ddlCstm {
  border-bottom: 1px solid var(--color-border-subtle) !important;
  margin-bottom: 4px !important;
}
.hr-ddlCstm:last-child { border-bottom: none !important; }

/* Settings forms layout */
@media (max-width: 767px) {
  body #AddUserSection form,
  body #addapplicationSection form,
  body #addroleSection form {
    width: 100% !important;
  }

  /* Settings grid: stack input groups */
  body .settings-new .form-horizontal .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  body .settings-new .form-horizontal .control-label {
    text-align: left !important;
    font-weight: 600 !important;
  }
}

/* ============================================================
   7. WARDSUPPLY / KHO HÀNG MODULE
   ============================================================ */
/* Ward supply internal consumption table */
.wardsupply-grid-container {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 12px !important;
}

@media (max-width: 767px) {
  /* Stack consumption filter row */
  .consumption-filter-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Patient/ward info card on mobile */
  .ward-patient-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }
}

/* ============================================================
   8. PATIENT INFO HEADER BANNER — Responsive
   ============================================================ */
@media (max-width: 991px) {
  .patient-info-header {
    margin-left: 8px !important;
    max-width: calc(100vw - 200px) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .patient-info-header::-webkit-scrollbar { display: none !important; }
}

@media (max-width: 767px) {
  .patient-info-header {
    max-width: calc(100vw - 140px) !important;
  }
  .patient-pill .pill-label {
    display: none !important;
  }
  .patient-pill {
    font-size: 11px !important;
    padding: 0 2px !important;
  }
}

@media (max-width: 480px) {
  .patient-pill.patient-age-gender,
  .patient-pill.patient-membership {
    display: none !important;
  }
  .patient-info-header {
    max-width: calc(100vw - 120px) !important;
  }
}

/* ============================================================
   9. AG-GRID RESPONSIVE
   ============================================================ */
/* Ensure grid fills container width */
body .ag-theme-fresh {
  width: 100% !important;
  overflow: hidden !important;
}

body .ag-theme-fresh .ag-root-wrapper {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--color-border-default) !important;
}

/* Compact grid on tablet */
@media (max-width: 991px) {
  body .ag-theme-fresh .ag-row {
    height: 36px !important;
    min-height: 36px !important;
  }
  body .ag-theme-fresh .ag-cell {
    font-size: 12.5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body .ag-theme-fresh .ag-header-cell {
    font-size: 10px !important;
    padding-left: 10px !important;
  }
}

/* Compact grid on phone */
@media (max-width: 767px) {
  body .ag-theme-fresh .ag-row {
    height: 32px !important;
    min-height: 32px !important;
  }
  body .ag-theme-fresh .ag-cell {
    font-size: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Stack pagination on mobile */
  body .ag-theme-fresh .ag-paging-panel {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px !important;
  }
}

/* ============================================================
   10. DASHBOARD STAT CARDS — Responsive Grid
   ============================================================ */
/* 4-column on large desktop */
@media (min-width: 1200px) {
  .dashboard-stat-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
}

/* 3-column on desktop */
@media (min-width: 992px) and (max-width: 1199px) {
  .dashboard-stat-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}

/* 2-column on tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .dashboard-stat-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* 1-column on phone */
@media (max-width: 767px) {
  .dashboard-stat-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Compact stat card on phone */
  .dashboard-stat.dashboard-stat-v2 {
    min-height: 90px !important;
    padding: 14px !important;
  }
}

/* ============================================================
   11. FORM ACTIONS — Responsive Button Groups
   ============================================================ */
@media (max-width: 767px) {
  body .form-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  body .form-actions .btn,
  body .form-actions button {
    width: 100% !important;
    min-height: 44px !important; /* WCAG touch target */
    justify-content: center !important;
  }

  /* d-flex containers wrap on mobile */
  body .d-flex:not(.patient-info-header):not(.dsf-stat-card) {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ============================================================
   12. PRINT — PRESERVE LAYOUT
   Ensure responsive overrides don't break print stylesheets
   ============================================================ */
@media print {
  body .page-sidebar-wrapper,
  body .page-header.navbar,
  body .page-bar,
  .sidebar-backdrop { display: none !important; }

  body .page-content-wrapper .page-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }
}

/* ============================================================
   13. SETTINGS & INVENTORY FORM RESPONSIVENESS OVERRIDES
   Ensure premium layout, spacing, alignment, and structure
   for all forms across settings and inventory modules.
   ============================================================ */
body .settings-new form,
body .inventory-view form,
body .hm-form,
body form.form-horizontal {
  width: 100% !important;
  max-width: 100% !important;
}

/* Form Groups Layout */
body .settings-new .form-group,
body .inventory-view .form-group,
body .hm-form .form-group {
  margin-bottom: var(--space-4, 16px) !important;
}

/* Stack form labels and controls on tablet & mobile */
@media (max-width: 991px) {
  body .settings-new .form-group,
  body .inventory-view .form-group,
  body .hm-form .form-group,
  body form.form-horizontal .form-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
  }

  body .settings-new .control-label,
  body .inventory-view .control-label,
  body .hm-form .control-label,
  body form.form-horizontal .control-label {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 2px !important;
    float: none !important;
  }

  body .settings-new .form-group > div,
  body .inventory-view .form-group > div,
  body .hm-form .form-group > div,
  body form.form-horizontal .form-group > div {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }
}

/* Input Fields Premium Styling Overrides */
body .settings-new input[type="text"],
body .settings-new input[type="number"],
body .settings-new input[type="email"],
body .settings-new input[type="password"],
body .settings-new input[type="date"],
body .settings-new select,
body .settings-new textarea,
body .inventory-view input,
body .inventory-view select,
body .inventory-view textarea,
body .hm-form input,
body .hm-form select,
body .hm-form textarea {
  background-color: var(--color-bg-base, #071115) !important;
  border: 1px solid var(--color-border-default, rgba(255,255,255,0.12)) !important;
  color: var(--color-text-primary, #f8fafc) !important;
  border-radius: var(--radius-input, 8px) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

body .settings-new input:focus,
body .settings-new select:focus,
body .settings-new textarea:focus,
body .inventory-view input:focus,
body .inventory-view select:focus,
body .inventory-view textarea:focus,
body .hm-form input:focus,
body .hm-form select:focus,
body .hm-form textarea:focus {
  border-color: var(--color-accent-primary, #0d9488) !important;
  box-shadow: 0 0 0 3px var(--color-accent-glow, rgba(13,148,136,0.15)) !important;
  outline: none !important;
}

/* ============================================================
   14. INVENTORY DASHBOARD STATS CARD OVERRIDES
   Modern Flexbox architecture replacing Metronic legacy floats
   ============================================================ */
body .dashboard-inv-stat {
  background-color: var(--color-bg-surface, #0b1a20) !important;
  border: 1px solid var(--color-border-default, rgba(255,255,255,0.12)) !important;
  border-radius: var(--radius-card, 12px) !important;
  padding: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: auto !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body .dashboard-inv-stat .details {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
}

body .dashboard-inv-stat .board-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  margin-bottom: 8px !important;
}

body .dashboard-inv-stat .board-title p {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--color-text-secondary, #94a3b8) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

body .dashboard-inv-stat .board-title .count {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--color-text-primary, #f8fafc) !important;
  float: none !important;
  line-height: 1 !important;
}

body .dashboard-inv-stat .left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  float: none !important;
  border-top: 1px solid var(--color-border-subtle, rgba(255,255,255,0.06)) !important;
  padding-top: 8px !important;
}

body .dashboard-inv-stat .left span {
  font-size: 11px !important;
  color: var(--color-text-muted, #64748b) !important;
  display: inline-block !important;
  margin-right: 0 !important;
}


/* ============================================================
   15. PAGE-BAR NAV LAYOUT FIX
   Ensures the module tab navigation bar renders immediately
   below the fixed header with no blank space above.
   Root cause: position:sticky + top:60px on a flex-column child
   in Chrome produces an extra 40px offset (sticky-in-flex bug).
   Fix: Use normal block flow (no sticky). The page-container
   already has padding-top:60px to clear the header.
   ============================================================ */

/* Remove any residual sticky/fixed positioning Tailwind may add */
body .page-bar.fixed-top-bar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  z-index: auto !important;
  /* Ensure display stays as flex-compatible */
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  /* Consistent bar height */
  min-height: 44px !important;
  padding: 6px 16px !important;
}

/* The nav tabs inside fixed-top-bar */
body .page-bar.fixed-top-bar .page-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body .page-bar.fixed-top-bar .page-breadcrumb::-webkit-scrollbar {
  display: none !important;
}

/* Active tab styling */
body .page-bar.fixed-top-bar .page-breadcrumb > li > a.link3-active,
body .page-bar.fixed-top-bar .page-breadcrumb > li > a[class*="active"] {
  background-color: var(--color-accent-primary, #3b82f6) !important;
  color: #fff !important;
  border-color: var(--color-accent-primary, #3b82f6) !important;
}

/* Wrapper after the page-bar — add small top padding for breathing room */
body .page-content .flex.flex-col > .wrapper,
body .page-content-wrapper .page-content .wrapper.w-full {
  padding-top: 12px !important;
}

/* For old-style modules that wrap content in portlet directly */
body .page-content > .wrapper,
body .page-content > .container-fluid,
body .page-content > .portlet {
  padding-top: 8px !important;
}