/* Global style overrides for React app — match standalone pages */

/* Sidebar scrollable */
.sidebar nav, .sidebar-nav {
  overflow-y: auto !important;
  flex: 1 1 0% !important;
}

/* Sidebar link spacing — tighter to fit all links */
.sidebar-nav a, .sidebar nav a {
  padding: 10px 14px !important;
  font-size: 13px !important;
  gap: 8px !important;
}

/* Section labels — smaller */
.sidebar-nav .sidebar-section-title {
  font-size: 10px !important;
  padding: 10px 14px 4px !important;
}

/* Content area — match standalone pages */
.main {
  background: #eef2ff !important;
}

/* Page header — match standalone purple gradient */
.page-header {
  background: linear-gradient(135deg, #1e1b4b, #312e81) !important;
  color: #fff !important;
  padding: 18px 24px !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.page-header .page-title {
  color: #fff !important;
}
.page-header .page-subtitle {
  color: rgba(255,255,255,0.7) !important;
}
.page-header .btn {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.page-header .btn-primary {
  background: #fff !important;
  color: #1e1b4b !important;
  border-color: #fff !important;
  font-weight: 700 !important;
}

/* Cards — rounded, shadow */
.card, .stat-card {
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* Tables — cleaner */
.data-table th, .table-card th {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #64748b !important;
}

/* Section cards */
.table-card, .card {
  border-radius: 14px !important;
}

/* Modal overlay */
.modal-overlay {
  background: rgba(0,0,0,0.5) !important;
}
.modal {
  border-radius: 14px !important;
}

/* ─── MOBILE RESPONSIVE for React app ─────────────────────── */
@media (max-width: 768px) {
  /* Hide sidebar by default on mobile */
  .sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
    z-index: 1000 !important;
    width: 260px !important;
  }
  .sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  /* Content takes full width — React uses .content, standalone uses .main */
  .main, .content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Page header — add left padding for hamburger */
  .page-header {
    padding-left: 54px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Content padding */
  .content > div, .main > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Stat cards grid */
  .stat-cards, .dashboard-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tables scroll horizontally */
  .table-wrapper, .table-card {
    overflow-x: auto !important;
  }
  .data-table {
    min-width: 500px !important;
  }

  /* Filter rows stack */
  .filter-row, .filters {
    flex-direction: column !important;
  }
  .filter-row select, .filter-row input, .form-input {
    width: 100% !important;
  }

  /* Cards — full width on mobile */
  .card, .stat-card, .table-card {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Dashboard stat cards grid */
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Modals full width on mobile */
  .modal {
    width: 95% !important;
    max-width: none !important;
    margin: 10px !important;
  }
  .modal-overlay {
    padding: 10px !important;
  }

  /* Buttons wrap on mobile */
  .page-header > div:last-child,
  .page-header .btn {
    width: auto !important;
  }

  /* Search inputs */
  .search-input, input[type="search"], input[placeholder*="Search"] {
    width: 100% !important;
  }

  /* Denomination grid — 2 columns on mobile */
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .stat-cards, .dashboard-cards {
    grid-template-columns: 1fr !important;
  }
}