/* =========================================================
   COLORS.CSS
   Lahat ng kulay ng dashboard ay nasa file na ito lang.
   Kung gusto mong palitan ang color scheme, dito ka lang
   mag-e-edit — hindi na kailangan hawakan ang layout.css
   ========================================================= */

:root{
  /* --- Brand / navy palette --- */
  --navy-900:#0d2158;   /* pinakamadilim, ginagamit sa topbar simula */
  --navy-800:#132b6e;   /* user chip background */
  --navy-700:#1a3a8f;   /* topbar gradient dulo, banner button hover */

  /* --- Accent (links, icons, hover states) --- */
  --accent:#2f6fed;
  --accent-light:#e8f0ff;

  /* --- Amber / priority banner --- */
  --amber:#f5a623;
  --amber-light:#fff4e0;
  --amber-border:#f0d9ac;

  /* --- Alert / red (data issues) --- */
  --alert-bg:#ffe3e3;
  --alert-ink:#e0483f;

  /* --- Success (online status dot) --- */
  --success:#5fd07a;

  /* --- Neutral / grayscale --- */
  --bg:#f4f6fb;
  --card:#ffffff;
  --ink:#1c2440;
  --ink-soft:#5b6480;
  --line:#e4e8f2;
  --badge-neutral:#c6cadb;

  /* --- Group tints (Student Data / People sections) --- */
  --grp-data-bg:#fdeee0;
  --grp-data-ink:#e08a2b;
  --grp-people-bg:#e6f6ec;
  --grp-people-ink:#2fa85a;
}

/* ---------- Where each variable is applied ---------- */

body{ background:var(--bg); color:var(--ink); }

.topbar{ background:linear-gradient(90deg, var(--navy-900), var(--navy-700)); color:#fff; }
.brand .logo{ background:#fff; color:var(--navy-900); }

.userchip{ background:var(--navy-800); color:#fff; }
.userchip::before{ color:var(--success); }
.userchip:hover{ background:var(--navy-700); }

.userchip-menu{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(13,33,88,.16);
}
.userchip-menu-item{ color:var(--ink); }
.userchip-menu-item:hover{ background:var(--accent-light); color:var(--accent); }
.userchip-menu-item.logout{ color:var(--alert-ink); }
.userchip-menu-item.logout:hover{ background:var(--alert-bg); }
.userchip-menu-divider{ background:var(--line); }

.banner{
  background:var(--amber-light);
  border:1px solid var(--amber-border);
}
.banner:hover{
  border-color:var(--amber);
}
.banner-icon{ background:#fff; color:var(--amber); }
.banner-text .count{ color:var(--ink); }
.banner-text .sub{ color:var(--ink-soft); }
.banner-btn{ background:transparent; color:var(--navy-900); border-color:var(--navy-900); }
.banner:hover .banner-btn{ background:var(--navy-900); color:#fff; }

.section-title{ color:var(--ink-soft); }
.section-title::after{ background:var(--line); }

.card{ background:var(--card); border:1px solid var(--line); }
.card:hover{ border-color:var(--accent); }
.card .icon{ background:var(--accent-light); color:var(--accent); }
.card .badge{ background:var(--ink-soft); color:#fff; }
.card.zero .badge{ background:var(--badge-neutral); }
.card.alert .icon{ background:var(--alert-bg); color:var(--alert-ink); }
.card.alert .badge{ background:var(--alert-ink); }

.grp-data .icon{ background:var(--grp-data-bg); color:var(--grp-data-ink); }
.grp-people .icon{ background:var(--grp-people-bg); color:var(--grp-people-ink); }