/* ============================================================
   Fee Management System — Theme
   Font: Inter (Google Fonts, loaded in header.php)
   Palette: Indigo brand / Slate neutrals
   ============================================================ */

:root {
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --brand-light: #eef2ff;

  --sidebar-bg: #1e293b;
  --sidebar-bg-hover: #29394f;
  --sidebar-bg-active: #4f46e5;
  --sidebar-text: #cbd5e1;
  --sidebar-text-muted: #7c8aa3;
  --sidebar-text-active: #ffffff;
  --sidebar-width: 240px;

  --body-bg: #f1f5f9;
  --card-border: #e6e9f0;
  --text-primary: #1e293b;
  --text-muted: #64748b;

  --success: #16a34a;
  --success-light: #ecfdf3;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --warning: #d97706;
  --warning-light: #fffbeb;
  --info: #0891b2;
  --info-light: #ecfeff;
  --brand-stat-light: #eef2ff;
}

html, body { height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--body-bg);
  color: var(--text-primary);
  font-size: 0.925rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* ---------- Top navbar ---------- */
.navbar.bg-dark,
body.bg-dark {
  background: var(--sidebar-bg) !important;
}
.navbar { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.navbar-brand { font-weight: 700; letter-spacing: -0.01em; }

/* ---------- App shell / layout ---------- */
.app-shell { min-height: 100vh; align-items: stretch; }
.app-main {
  flex: 1 1 auto;
  min-width: 0;          /* critical: lets flex child shrink instead of forcing siblings wider */
  padding: 1.75rem;
  overflow-x: hidden;
}

/* ---------- Sidebar ---------- */
.app-sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--sidebar-bg);
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  padding: 1.25rem 0.75rem;
  border-right: none;
}
.app-sidebar .nav-link {
  color: var(--sidebar-text);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: background .15s ease, color .15s ease;
}
.app-sidebar .nav-link i { font-size: 1rem; width: 1.1rem; text-align: center; flex-shrink: 0; }
.app-sidebar .nav-link:hover { background: var(--sidebar-bg-hover); color: #fff; }
.app-sidebar .nav-link.active { background: var(--sidebar-bg-active); color: var(--sidebar-text-active) !important; }
.app-sidebar .nav-section-label {
  color: var(--sidebar-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.9rem 0.85rem 0.35rem;
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card h6 { font-weight: 600; color: var(--text-primary); margin-bottom: 0.9rem; }

/* ---------- Stat cards (soft tint + accent, no solid saturated fills) ---------- */
.stat-card {
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.stat-card .stat-icon {
  width: 46px; height: 46px; min-width: 46px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.stat-card .stat-label { color: var(--text-muted); font-size: 0.8rem; font-weight: 500; margin-bottom: 0.15rem; }
.stat-card .stat-value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.stat-card.stat-brand .stat-icon   { background: var(--brand-stat-light); color: var(--brand); }
.stat-card.stat-info .stat-icon    { background: var(--info-light); color: var(--info); }
.stat-card.stat-success .stat-icon { background: var(--success-light); color: var(--success); }
.stat-card.stat-danger .stat-icon  { background: var(--danger-light); color: var(--danger); }
.stat-card.stat-warning .stat-icon { background: var(--warning-light); color: var(--warning); }

/* ---------- Chart containers: fixed-height wrapper prevents the
   Chart.js responsive resize-loop that was stretching the sidebar ---------- */
.chart-box { position: relative; height: 300px; }
.chart-box canvas { max-width: 100%; }

/* ---------- Buttons ---------- */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-outline-light:hover { color: var(--sidebar-bg); }

/* ---------- Tables ---------- */
.table { font-size: 0.875rem; }
.table thead th {
  background: #f8fafc;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--card-border);
}
.table-responsive { border-radius: 8px; }

/* ---------- Misc ---------- */
.tab-content { padding-top: 1rem; }
.badge { font-weight: 500; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, .15);
}

/* ---------- Branding ---------- */
.navbar-logo {
  height: 34px;
  width: auto;
  border-radius: 4px;
  background: #fff;
  padding: 2px;
}
.login-logo {
  height: 64px;
  width: auto;
}

/* ============================================================
   Mobile responsive
   ============================================================ */

/* Bootstrap's .col-md-*/.col-lg-* only get a width rule INSIDE their
   own breakpoint's media query. Below md, a bare .col-md-4 (with no
   .col-12 fallback) has no width rule at all and just shrinks to fit
   its content instead of stacking full-width. This one rule covers
   every such column across the app (51 occurrences) without touching
   desktop layout, which is untouched above 767.98px. */
@media (max-width: 767.98px) {
  .row > [class*="col-md-"],
  .row > [class*="col-lg-"],
  .row > [class*="col-xl-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---------- Sidebar: fixed drawer on tablets/phones ---------- */
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1045;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,.15);
  }
  .app-sidebar.show { transform: translateX(0); }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

  .app-main { padding: 1.1rem; }
}

@media (min-width: 992px) {
  #sidebarToggle { display: none !important; }
}

/* ---------- Small-screen polish ---------- */
@media (max-width: 575.98px) {
  .app-main { padding: 0.85rem; }
  .stat-value { font-size: 1.2rem; }
  .card.p-4 { padding: 1.25rem !important; }
  .table { font-size: 0.8rem; }
  h3 { font-size: 1.35rem; }
  h4 { font-size: 1.15rem; }

  /* Receipt: long labels ("Admission No", "Student Name") get cramped
     as 50/50 columns on narrow phones — stack them instead. Desktop
     and print keep the two-column layout. */
  #receipt-card .row > .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #receipt-card .row > .col-6:not(:last-child) { margin-bottom: 0.35rem; }
}

@media print {
  #receipt-card .row > .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Student form has 8 tabs in one row — let it scroll horizontally
   on phones instead of wrapping/overflowing the page. */
@media (max-width: 767.98px) {
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .nav-tabs .nav-item { flex: 0 0 auto; }
  .nav-tabs .nav-link { white-space: nowrap; }
}