/* =========================================================
   NSMS Ghana - MVP UI
   Pure CSS (No frameworks)
   ========================================================= */

:root {
  --bg: #f4f7ff;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: rgba(17, 24, 39, 0.08);

  --primary: #2f80ed;
  --primary2: #6d5efc;
  --teal: #12b3c7;
  --green: #27ae60;
  --amber: #f2c94c;
  --red: #eb5757;

  --shadow: 0 10px 25px rgba(17, 24, 39, 0.08);
  --shadow2: 0 14px 34px rgba(17, 24, 39, 0.12);
  --radius: 16px;

  /* --- NEW SIDEBAR VARIABLES --- */
  --sidebar-bg: #ffffff;
  --sidebar-text: #374151; /* Dark gray for text labels */
  --sidebar-icon: #6b7280; /* NEW: Medium gray for icons */
  --sidebar-muted: #9ca3af;
  --sidebar-line: #e5e7eb;
  --sidebar-active-bg: #f3f4f6;
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(47,128,237,0.16), transparent 60%),
    radial-gradient(700px 400px at 95% 10%, rgba(109,94,252,0.16), transparent 60%),
    var(--bg);
}


/* Fix global scrollbar that breaks the footer */
body {
  overflow: hidden !important;
}

/* Make only the main content area scrollable */
#view {
  overflow-y: auto;
  max-height: calc(100vh - 140px); /* Adjust 140px to match your header/nav height */
}

/* ---------------- Login ---------------- */
.login-view{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}
.login-card{
  width: min(520px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.90));
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow2);
  padding: 18px;
}
.login-brand{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 6px 14px;
  border-bottom: 1px solid var(--line);
}
.logo{
  width: 48px; height: 48px;
  border-radius: 16px;
  display: grid; place-items: center;
  color: white;
  font-weight: 950;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 14px 30px rgba(47,128,237,0.30);
}
.login-title{ font-weight: 950; }
.login-sub{ color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 2px; }
.login-form{ padding: 14px 6px 6px; display: grid; gap: 12px; }
.field label{ display:block; font-size: 12px; font-weight: 800; color: rgba(17,24,39,0.72); margin-bottom: 6px; }
.field input, .field select{
  width: 100%;
  border: 1px solid var(--line);
  outline: none;
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 14px rgba(17,24,39,0.05);
  font-weight: 800;
}
.login-hint{
  margin-top: 6px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.hint-title{ font-size: 12px; font-weight: 900; color: rgba(17,24,39,0.74); margin-bottom: 8px; }
.hint-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.hint{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 10px;
  background: linear-gradient(180deg, rgba(47,128,237,0.05), rgba(109,94,252,0.04));
}
.hint-k{ font-weight: 900; font-size: 12px; }
.hint-v{ color: var(--muted); font-weight: 800; font-size: 12px; margin-top: 2px; }
.error{
  background: rgba(235,87,87,0.10);
  border: 1px solid rgba(235,87,87,0.25);
  color: rgba(235,87,87,0.95);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 12px;
}

/* ---------------- Buttons ---------------- */
.btn{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 12px;
  font-weight: 900;
  cursor: pointer;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 8px 18px rgba(17,24,39,0.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow2); border-color: rgba(47,128,237,0.28); }
.btn.primary{
  color: white;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
}
.btn.ghost{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
  box-shadow: none;
  color: var(--sidebar-text);
}
.btn.ghost:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.24); box-shadow: none; }
.btn.small{ padding: 10px 10px; border-radius: 12px; font-size: 12px; }
.btn.danger{ background: rgba(235,87,87,0.10); border-color: rgba(235,87,87,0.20); color: rgba(200,30,30,0.95); }
.btn.full{ width: 100%; }

.hidden{ display: none !important; }

/* ---------------- App Layout ---------------- */
.app{
  height: 100%;
  display: grid;
  grid-template-columns: 260px 1fr;
}


.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-line);
  padding: 16px 14px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-top {
  padding: 6px 4px;
}

.sidebar-brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sidebar-logo {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 950;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 18px 34px rgba(47, 128, 237, 0.30);
}

.sidebar-name {
  color: var(--sidebar-text); /* Changed from var(--sidebar-text) but now it's dark */
  font-weight: 950;
}

.sidebar-sub {
  color: var(--sidebar-muted); /* Changed from var(--sidebar-muted) */
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}

.nav {
  display: grid;
  gap: 8px;
  padding: 6px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  color: var(--sidebar-text); /* Changed from var(--sidebar-text) */
  cursor: pointer;
  user-select: none;
  transition: all .15s ease;
  /* THE COLOR RING */
  border-left: 4px solid transparent;
}

.nav-item:hover {
  background: var(--sidebar-active-bg);
  /* border-color: var(--sidebar-active-bg); */ /* Optional: change ring on hover */
}

.nav-item.active {
  background: var(--sidebar-active-bg);
  font-weight: 900;
  color: var(--text);
}

.nav-item i {
  font-size: 18px;       /* Set the icon size */
  color: var(--sidebar-icon); /* Set the default icon color */
  opacity: 0.9;          /* Slightly transparent for a softer look */
  width: 20px;           /* Give it a fixed width for alignment */
  text-align: center;    /* Center the icon within its container */
}

.nav-label {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.1px;
}


/* --- ASSIGNING THE COLOR RINGS TO EACH NAV ITEM --- */
/* You will need to add these classes to your HTML/JS nav items */
.nav-item.nav-dashboard { border-left-color: var(--primary); }

.nav-item.nav-schools { border-left-color: var(--teal); }
.nav-item.nav-teachers { border-left-color: var(--green); }
.nav-item.nav-students { border-left-color: var(--amber); }
.nav-item.nav-attendance { border-left-color: var(--red); }
.nav-item.nav-foodstock { border-left-color: var(--muted); }
.nav-item.nav-feeding { border-left-color: var(--primary2); }
.nav-item.nav-transfers { border-left-color: var(--teal); }
.nav-item.nav-onboarding { border-left-color: var(--green); }
.nav-item.nav-settings { border-left-color: var(--muted); }


.sidebar-bottom {
  padding: 8px 4px 6px;
  border-top: 1px solid var(--sidebar-line);
  display: grid;
  gap: 10px;
}

.side-chip {
  font-size: 12px;
  font-weight: 900;
  color: var(--sidebar-text); /* Changed from var(--sidebar-text) */
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--sidebar-line); /* Changed from old border */
  background: var(--sidebar-active-bg); /* Changed from old bg */
}
.nav-item .nav-icon {
  color: var(--sidebar-icon) !important; /* For SVG icons */
  fill: var(--sidebar-icon) !important;   /* For SVG icons */
  opacity: 1 !important;                  /* Override any low opacity */
  filter: none !important;                /* Remove any inherited filters */
}


/* Main area */
.main{
  padding: 18px 16px 26px;
  overflow: auto;
}
.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.85));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.topbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}
.menu-btn{ display: none; }
.title-wrap{ display: flex; flex-direction: column; gap: 2px; }
.title{ font-size: 18px; font-weight: 950; line-height: 1.1; }
.subtitle{ font-size: 12px; color: var(--muted); font-weight: 700; }

.top-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}
.select{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 14px rgba(17,24,39,0.05);
}
.select label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}
.select select{
  border: none;
  outline: none;
  font-weight: 900;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}
.icon-btn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.9);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 6px 14px rgba(17,24,39,0.05);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.icon-btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: rgba(47,128,237,0.28);
}
.badge{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(235,87,87,0.18);
}
.profile{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 14px rgba(17,24,39,0.05);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.profile:hover{ transform: translateY(-2px); box-shadow: var(--shadow2); }
.avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 950;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 10px 22px rgba(47,128,237,0.25);
}
.profile .name{ font-weight: 950; font-size: 13px; }
.profile .role{ display:block; font-size: 11px; color: var(--muted); margin-top: -2px; font-weight: 800; }
.chev{ opacity: 0.7; }

/* View */
.view{
  margin-top: 14px;
}

/* Cards + panels (dashboard-like) */
.cards{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow2);
  border-color: rgba(47,128,237,0.28);
}
.card::before{
  content:"";
  position: absolute;
  inset: -80px -80px auto auto;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle at 30% 30%, rgba(47,128,237,0.22), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(109,94,252,0.16), transparent 55%);
  transform: rotate(12deg);
  pointer-events: none;
}
.card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-icon{
  width: 40px; height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17,24,39,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.86));
}
.card .label{ color: var(--muted); font-size: 12px; font-weight: 900; }
.card .value{ margin-top: 6px; font-size: 22px; font-weight: 950; }

.grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
.panel{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-header{
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.88));
}
.panel-title{ font-weight: 950; font-size: 14px; }
.panel-sub{ color: var(--muted); font-size: 12px; font-weight: 800; }
.panel-body{ padding: 14px; }

.span-4{ grid-column: span 4; }
.span-12{ grid-column: span 12; }

/* Attendance widgets */
.attendance{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: center;
}
.ring{
  width: 130px;
  height: 130px;
  display: grid;
  place-items: center;
  position: relative;
}
.ring svg{ width: 130px; height: 130px; transform: rotate(-90deg); }
.ring .center{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}
.ring .pct{ font-weight: 950; font-size: 22px; }
.ring .small{ font-size: 11px; color: var(--muted); font-weight: 800; margin-top: -2px; }

.legend{ display: grid; gap: 10px; }
.legend-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border: 1px dashed rgba(17,24,39,0.14);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(47,128,237,0.04), rgba(109,94,252,0.03));
}
.legend-left{ display:flex; align-items:center; gap: 10px; }
.swatch{ width: 10px; height: 10px; border-radius: 999px; }
.legend-name{ font-weight: 900; font-size: 12px; color: #27314a; }
.legend-val{ font-weight: 950; font-size: 12px; color: #27314a; }

/* Feeding bars */
.bar-wrap{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, rgba(18,179,199,0.07), rgba(47,128,237,0.04));
}
.bars{
  height: 150px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding: 8px 4px 0;
  border-bottom: 1px solid rgba(17,24,39,0.08);
}
.bar{
  position: relative;
  height: 100%;
  display: grid;
  align-items: end;
  justify-items: center;
  gap: 6px;
}
.bar .fill{
  width: 100%;
  max-width: 66px;
  height: 20%;
  border-radius: 12px 12px 10px 10px;
  background: linear-gradient(180deg, rgba(47,128,237,0.95), rgba(109,94,252,0.9));
  box-shadow: 0 12px 20px rgba(47,128,237,0.22);
  transition: height .35s ease;
}
.bar .day{ font-size: 12px; font-weight: 900; color: #334155; padding-top: 8px; }
.bar .val{
  position: absolute;
  top: 6px;
  font-size: 11px;
  font-weight: 950;
  color: rgba(17,24,39,0.70);
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(17,24,39,0.08);
  border-radius: 999px;
  padding: 4px 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.bar:hover .val{ opacity: 1; transform: translateY(0); }

.feeding-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.stat{
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
}
.stat .k{ font-size: 12px; color: var(--muted); font-weight: 900; }
.stat .v{ margin-top: 6px; font-size: 18px; font-weight: 950; }
.pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.09);
  color: rgba(17,24,39,0.72);
  background: rgba(17,24,39,0.03);
  font-weight: 900;
  white-space: nowrap;
}

/* Schools list */
.schools{ display: grid; gap: 10px; }
.school-item{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.school-item:hover{
  transform: translateY(-2px);
  border-color: rgba(47,128,237,0.28);
  box-shadow: 0 12px 26px rgba(17,24,39,0.10);
}
.school-left{ display:flex; align-items:center; gap:10px; min-width: 0; }
.school-badge{
  width: 36px; height: 36px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 950;
  color: #0f172a;
  background: linear-gradient(180deg, rgba(242,201,76,0.7), rgba(242,201,76,0.25));
  border: 1px solid rgba(242,201,76,0.35);
}
.school-name{ font-weight: 950; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.school-meta{ display:block; font-size: 11px; color: var(--muted); font-weight: 800; margin-top: 2px; }


/* Add this rule to color the active "School Management" item */
.sidebar .nav-item.nav-school-management.active {
    border-left-color: var(--primary);
}

/* Tables + forms (module pages) */
.page-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}
.table th, .table td{
  text-align: left;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(17,24,39,0.08);
  font-size: 12px;
}
.table th{
  color: rgba(17,24,39,0.70);
  font-weight: 950;
  background: rgba(17,24,39,0.02);
}
.table td{ font-weight: 800; color: rgba(17,24,39,0.78); }

.form-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.form-row .field{ margin: 0; }
.form-actions{ display:flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }

.badge-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.10);
  font-weight: 950;
  font-size: 11px;
}
.badge-status.pending{ background: rgba(242,201,76,0.15); border-color: rgba(242,201,76,0.30); }
.badge-status.approved{ background: rgba(39,174,96,0.12); border-color: rgba(39,174,96,0.25); }
.badge-status.rejected{ background: rgba(235,87,87,0.12); border-color: rgba(235,87,87,0.25); }

/* =========================================================
   NSMS Ghana - Modern Dashboard Enhancements
   Add to existing style.css
   ========================================================= */

/* Modern Dashboard Cards */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.summary-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: white;
  font-weight: bold;
}

.card-value {
  font-size: 24px;
  font-weight: 700;
  margin: 8px 0;
}

.card-label {
  font-size: 12px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Color Scheme for Cards */
:root {
  --color-region: #3b82f6;    /* Blue */
  --color-district: #8b5cf6;   /* Purple */
  --color-school: #f59e0b;     /* Orange */
  --color-teacher: #10b981;    /* Green */
  --color-student: #06b6d4;    /* Cyan */
  --color-feeding: #ef4444;    /* Red */
}

/* Modern Attendance Widgets */
.attendance-widget {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.chart-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
}

.chart-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
}

.chart-label {
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 14px;
  color: #6b7280;
}

.attendance-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #1f2937;
}

.stat-label {
  font-size: 12px;
  color: #6b7280;
}

/* Modern Feeding Widget */
.feeding-widget {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.feeding-charts {
  display: flex;
  gap: 15px;
  margin: 15px 0;
  justify-content: space-between;
  overflow-x: auto;
  padding-bottom: 10px;
}

.feeding-bar {
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bar-container {
  width: 40px;
  height: 120px;
  display: flex;
  align-items: end;
  justify-content: center;
  margin: 10px 0;
}

.bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
  background: linear-gradient(to top, var(--color-feeding), #f87171);
}

.bar-value {
  margin-top: 5px;
  font-weight: bold;
  font-size: 12px;
}

.feeding-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.stat-box {
  text-align: center;
  padding: 10px;
}

.stat-box h3 {
  font-size: 24px;
  margin: 5px 0;
  color: #1f2937;
}

.stat-box p {
  font-size: 12px;
  color: #6b7280;
}

/* Modern Schools Widget */
.schools-widget {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.school-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

.school-item:last-child {
  border-bottom: none;
}

.school-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  background: var(--color-school);
}

.school-info {
  flex: 1;
}

.school-name {
  font-weight: 600;
  margin-bottom: 4px;
  color: #1f2937;
}

.school-meta {
  font-size: 12px;
  color: #6b7280;
}


/*
 * STYLES SPECIFIC TO THE FOOD STOCK PAGE
 * These styles are scoped with #food-stock-page and will not affect other pages.
*/

/* Use CSS Grid for the main layout */
#food-stock-page .page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns for the forms */
  gap: 24px;
}

/* Make the summary table span both columns */
#food-stock-page .page-grid article:last-child {
  grid-column: 1 / -1;
}

/* Use flexbox for form rows to ensure proper alignment */
#food-stock-page .form-row {
  display: flex;
  gap: 16px;
}

#food-stock-page .form-row .field {
  flex: 1; /* Each field takes up equal space */
}

/* Ensure form buttons are aligned nicely */
#food-stock-page .form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* Add a max-height to the summary table body to prevent it from getting too long */
#food-stock-page .panel-body table {
  max-height: 400px;
  display: block;
  overflow-y: auto;
}

/* Responsive Improvements for Dashboard */

@media (max-width: 1200px) {
  .dashboard-cards {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .feeding-charts {
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .attendance-widget, .feeding-widget, .schools-widget {
    margin-bottom: 15px;
  }

  .feeding-stats {
    grid-template-columns: 1fr;
  }

  .attendance-stats {
    flex-direction: column;
    gap: 10px;
  }
}

/* Responsive */
@media (max-width: 1100px){
  .cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .span-4{ grid-column: span 6; }
  .form-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{
    position: fixed;
    left: 0; top: 0;
    width: 260px;
    transform: translateX(-105%);
    transition: transform .2s ease;
    z-index: 50;
  }
  .sidebar.open{ transform: translateX(0); }
  .menu-btn{ display: grid; }
}
@media (max-width: 820px){
  .topbar{ flex-wrap: wrap; }
  .top-actions{ width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-4{ grid-column: span 12; }
  .attendance{ grid-template-columns: 1fr; justify-items: center; }
  .legend{ width: 100%; }
}
@media (max-width: 520px){
  .cards{ grid-template-columns: 1fr; }
  .feeding-stats{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}
@media (max-width: 1200px) {
  #food-stock-page .page-grid {
    grid-template-columns: 1fr;
  }
}