/* ================================================================
   responsive-extras.css
   All Charts, Cards, Boxes — Fully Responsive
   Appended after style.css via <link> in header
   ================================================================ */

/* ================================================================
   0. GLOBAL — Strip all bullets from every list in the app
   ================================================================ */
.sidebar-menu,
.sidebar-menu li,
.bottom-nav-items,
.bottom-nav-items li,
.bottom-nav-item,
nav ul,
nav ol,
nav li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Ensure bottom-nav is fixed at the bottom with flex items layout on mobile */
.bottom-nav {
  display: none;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1060 !important;
  background: var(--clr-sidebar) !important;
  border-top: 1px solid var(--clr-border) !important;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
  overflow: hidden !important;
}
@media (max-width: 1023px) {
  .bottom-nav {
    display: block !important;
  }
}
.bottom-nav-items {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-around !important;
  align-items: stretch !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 0.25rem !important;
  list-style: none !important;
}
.bottom-nav-item {
  flex: 1 !important;
  display: flex !important;
}
.bottom-nav-item a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  color: var(--clr-muted) !important;
  text-decoration: none !important;
  font-size: clamp(0.55rem, 1.5vw, 0.65rem) !important;
  font-weight: 500 !important;
  padding: 0.375rem 0.25rem !important;
  border-radius: var(--radius-sm) !important;
  position: relative !important;
}
.bottom-nav-item a i {
  font-size: 1.3rem !important;
  line-height: 1 !important;
}
.bottom-nav-item a.active {
  color: var(--clr-primary) !important;
}
.bottom-nav-item a.active::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 20% !important;
  right: 20% !important;
  height: 3px !important;
  background: var(--clr-primary) !important;
  border-radius: 0 0 4px 4px !important;
}

/* Sidebar items: never show bullets */
.sidebar-item {
  list-style: none !important;
  padding-left: 0 !important;
}


/* ================================================================
   1. CHART CONTAINERS — Fluid responsive heights
   ================================================================ */

/* Base chart wrapper: fluid by default */
.chart-container {
  position: relative;
  width: 100%;
  min-width: 0;
}

/* Default chart height for large screens */
.chart-container         { height: 320px; }
.chart-container--sm     { height: 260px; }
.chart-container--xs     { height: 220px; }

/* Chart.js needs both responsive:true + container with defined height */
.chart-container canvas,
.chart-container--sm canvas,
.chart-container--xs canvas {
  display: block !important;
  max-width: 100% !important;
}

/* Tablet: slightly shorter charts */
@media (min-width: 768px) and (max-width: 1023px) {
  .chart-container     { height: 280px; }
  .chart-container--sm { height: 240px; }
  .chart-container--xs { height: 200px; }
}

/* Mobile: compact charts that still read clearly */
@media (max-width: 767px) {
  .chart-container     { height: 240px; }
  .chart-container--sm { height: 210px; }
  .chart-container--xs { height: 180px; }
}

/* Small phones */
@media (max-width: 479px) {
  .chart-container     { height: 210px; }
  .chart-container--sm { height: 185px; }
  .chart-container--xs { height: 165px; }
}

/* TV / Large screens: taller charts */
@media (min-width: 1920px) {
  .chart-container     { height: 380px; }
  .chart-container--sm { height: 320px; }
}


/* ================================================================
   2. RESPONSIVE GRID LAYOUTS — Form panels, KPI cards, Chart grids
   ================================================================ */

/* ---- Side-by-side panel layout (form + list): col-lg-4 / col-lg-8 ---- */
.panel-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 1199px) {
  .panel-grid { grid-template-columns: 280px 1fr; }
}
@media (max-width: 1023px) {
  /* Tablet: stack vertically */
  .panel-grid { grid-template-columns: 1fr; }
}

/* ---- Two-column equal grid (charts, profile cards) ---- */
.two-col-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 767px) {
  .two-col-grid { grid-template-columns: 1fr; }
}

/* ---- Chart panel: 8/4 split ---- */
.chart-split-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 1023px) {
  .chart-split-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .chart-split-grid { grid-template-columns: 1fr; }
}

/* ---- KPI / Stat cards: 3-column auto-fit grid ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 1rem;
}

/* ---- Filter form grid: auto-fit filter fields ---- */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 0.875rem;
  align-items: end;
}


/* ================================================================
   3. GLASS CARD — All internal content responsive
   ================================================================ */

/* Card header: always flex-wrap so buttons don't overflow */
.card-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.card-header-flex h5,
.card-header-flex h4 { margin: 0; }

/* Card body: no overflow */
.glass-card {
  overflow: hidden; /* prevents content from bursting out on small screens */
  min-width: 0;
}

/* Padding steps for different screen sizes */
@media (max-width: 767px) {
  .glass-card.p-5 { padding: 1.25rem !important; }
  .glass-card.p-4 { padding: 1rem !important; }
}
@media (max-width: 479px) {
  .glass-card.p-5 { padding: 1rem !important; }
  .glass-card.p-4 { padding: 0.875rem !important; }
}


/* ================================================================
   4. QUICK ACTION BUTTONS (Dashboard) — Stack on mobile
   ================================================================ */
.quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}
/* On tablet+, show 3 columns if there's enough space */
@media (min-width: 768px) and (max-width: 1023px) {
  .quick-actions-grid { grid-template-columns: repeat(3, 1fr); }
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  text-align: left;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.25s ease;
  min-height: 72px;
}
.quick-action-btn:hover {
  transform: translateY(-2px);
}
.quick-action-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.quick-action-btn .text-primary { color: var(--clr-primary) !important; }


/* ================================================================
   5. BUDGET PROGRESS BOX — Responsive flex row
   ================================================================ */
.budget-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.budget-item-header .budget-name {
  font-weight: 700;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  color: var(--clr-primary);
  flex: 1 1 120px;
  min-width: 0;
  word-break: break-word;
}
.budget-item-header .budget-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
@media (max-width: 479px) {
  .budget-item-header { flex-direction: column; align-items: flex-start; }
  .budget-item-header .budget-meta { width: 100%; justify-content: space-between; }
}


/* ================================================================
   6. TRANSACTIONS FILTER FORM — Responsive grid
   ================================================================ */
.tx-filter-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr 1fr 1fr;
  gap: 0.875rem;
  align-items: end;
}
@media (max-width: 1199px) {
  .tx-filter-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 767px) {
  .tx-filter-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) {
  .tx-filter-grid { grid-template-columns: 1fr; }
}


/* ================================================================
   7. TABLE — Mobile card-style rows on very small screens
   ================================================================ */
@media (max-width: 479px) {
  /* Convert table rows to stacked card-style on tiny phones */
  .table-to-cards thead { display: none; }
  .table-to-cards tr {
    display: block;
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--clr-card);
  }
  .table-to-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    gap: 0.5rem;
  }
  .table-to-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--clr-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  .table-to-cards td:last-child {
    padding-top: 0.5rem;
    border-top: 1px solid var(--clr-border);
    margin-top: 0.25rem;
    justify-content: flex-end;
  }
}


/* ================================================================
   8. SAVINGS GOAL CARD — Funds form stays inline
   ================================================================ */
.goal-funds-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.goal-funds-form input {
  flex: 1 1 0%;
  min-width: 0;
}
.goal-funds-form button {
  flex-shrink: 0;
  white-space: nowrap;
}


/* ================================================================
   9. REPORTS — KPI stat boxes + chart panels
   ================================================================ */
.reports-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 767px) {
  .reports-kpi-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
}
@media (max-width: 479px) {
  .reports-kpi-grid { grid-template-columns: 1fr; }
  .reports-kpi-grid .glass-card { text-align: left !important; display: flex; align-items: center; gap: 1rem; }
  .reports-kpi-grid .glass-card small { display: block; }
  .reports-kpi-grid .glass-card h3 { font-size: 1.25rem; }
}


/* ================================================================
   10. INDEX / LANDING — Feature cards
   ================================================================ */
.feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1.5rem;
}


/* ================================================================
   11. NOTIFICATIONS BOX — Full width on mobile
   ================================================================ */
.notification-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 10px;
  align-items: flex-start;
  transition: background 0.2s ease;
  word-break: break-word;
}
.notification-item:hover {
  background: var(--clr-sidebar-active);
}
.notification-item .notif-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
@media (max-width: 479px) {
  .notification-item { padding: 0.75rem; gap: 0.75rem; }
}


/* ================================================================
   12. PROFILE CARDS — Equal height side-by-side
   ================================================================ */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 767px) {
  .profile-grid { grid-template-columns: 1fr; }
}


/* ================================================================
   13. CONTACT FORM — Centered & constrained
   ================================================================ */
.contact-wrapper {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}


/* ================================================================
   14. BOOTSTRAP COLUMN FALLBACKS — Ensure stacking on mobile
   ================================================================ */

/* All col-lg-* should be full width on tablet/mobile */
@media (max-width: 1023px) {
  .col-lg-4, .col-lg-8 { flex: 0 0 100%; max-width: 100%; width: 100%; }
}
/* col-md-* stacking on mobile */
@media (max-width: 767px) {
  .col-md-3, .col-md-4, .col-md-6 { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .col-md-2, .col-md-2\.5          { flex: 0 0 50%;  max-width: 50%; }
}
@media (max-width: 479px) {
  .col-md-2, .col-md-2\.5 { flex: 0 0 100%; max-width: 100%; }
  .col-md-3, .col-md-4    { flex: 0 0 100%; max-width: 100%; }
  /* KPI boxes: 3-across even on tiny screens (they're small numbers) */
  .reports-kpi-grid .col-md-4 { flex: 0 0 auto; max-width: auto; }
}


/* ================================================================
   15. INLINE HEIGHT OVERRIDE (removes inline style="height:300px")
      Applied via the chart-container class on the parent div
   ================================================================ */
div[style*="height: 300px"],
div[style*="height: 350px"],
div[style*="height: 280px"] {
  height: auto !important;
  min-height: 200px;
}
/* This forces Chart.js to fill its parent container properly */
div[style*="height: 300px"] canvas,
div[style*="height: 350px"] canvas,
div[style*="height: 280px"] canvas {
  height: 100% !important;
  width: 100% !important;
}


/* ================================================================
   16. UTILITIES
   ================================================================ */
.min-w-0    { min-width: 0; }
.word-break { word-break: break-word; overflow-wrap: anywhere; }
.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ================================================================
   17. SITE FOOTER
   ================================================================ */
.site-footer {
  border-top: 1px solid var(--clr-border) !important;
  margin-top: 3.5rem !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  min-height: 60px;
}
.site-footer a {
  color: var(--clr-muted) !important;
  transition: color var(--tr) !important;
}
.site-footer a:hover {
  color: var(--clr-primary) !important;
}
.site-footer a.hover-danger:hover {
  color: var(--clr-danger) !important;
}

/* On mobile/tablet, add padding bottom to footer so floating bottom-nav doesn't overlap/hide it */
@media (max-width: 1023px) {
  .site-footer {
    padding-bottom: calc(1.5rem + var(--bottom-nav-h)) !important;
  }
}