/* CeGov dashboard shell.
 *
 * Spec section 9: the Medical History page must be indistinguishable from the
 * rest of auegov.ac.in. These are the tokens from the spec table -- sample the
 * exact values from the live stylesheet before the presentation and replace
 * them here if they differ.
 */

:root {
  --cg-bg: #0B0F19;
  --cg-sidebar: #121826;
  --cg-card: #151C2C;
  --cg-border: #1F2937;
  --cg-accent: #6366F1;
  --cg-accent-bg: rgba(99, 102, 241, 0.14);
  --cg-text: #E5E7EB;
  --cg-muted: #9CA3AF;
  --cg-danger: #EF4444;
  --cg-ok: #34D399;
  --cg-warn: #FBBF24;
  --cg-radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cg-bg);
  color: var(--cg-text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--cg-accent); }

.cg-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 24px;
  background: var(--cg-sidebar);
  border-bottom: 1px solid var(--cg-border);
  position: sticky; top: 0; z-index: 30;
}

.cg-logo { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; }
.cg-logo .seal {
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f0a03a, #b5541a);
  border: 2px solid #e8e2d5;
  flex: none;
}
.cg-burger {
  background: none; border: none; color: var(--cg-text);
  font-size: 22px; cursor: pointer; padding: 6px 10px; line-height: 1;
}
.cg-header .spacer { margin-left: auto; }
.cg-user { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.cg-user .pic {
  width: 34px; height: 34px; border-radius: 50%;
  background: #2a3550; border: 1px solid #3a4763;
  display: grid; place-items: center; color: #c3cee0;
  object-fit: cover;
}
.cg-theme {
  width: 38px; height: 38px; border-radius: 50%;
  background: #1c2436; border: 1px solid var(--cg-border); color: var(--cg-warn);
  display: grid; place-items: center; font-size: 16px;
}

.cg-layout { display: flex; min-height: calc(100vh - 67px); }

.cg-sidebar {
  width: 280px; flex: none;
  background: var(--cg-sidebar);
  border-right: 1px solid var(--cg-border);
  padding: 14px 12px 40px;
}

.cg-group { padding: 12px 14px; color: var(--cg-text); font-weight: 600; display: flex; align-items: center; gap: 12px; }
.cg-group .chev { margin-left: auto; color: var(--cg-muted); font-size: 12px; }

.cg-nav { display: flex; flex-direction: column; gap: 2px; }
.cg-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  min-height: 48px;
  border-radius: 10px;
  color: var(--cg-text);
  text-decoration: none;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.cg-nav a:hover { background: rgba(255, 255, 255, 0.04); }
.cg-nav a[aria-current="page"] {
  background: var(--cg-accent-bg);
  color: #A5B4FC;
  border-left-color: var(--cg-accent);
  font-weight: 600;
}
.cg-nav .ico, .cg-group .ico { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; opacity: 0.9; }
.cg-nav .ico svg, .cg-group .ico svg { width: 19px; height: 19px; }

.cg-main { flex: 1; padding: 26px 32px 80px; min-width: 0; }
.cg-title { font-size: 30px; font-weight: 700; margin: 0 0 6px; }
.cg-crumb { color: var(--cg-muted); margin: 0 0 22px; font-size: 15px; }
.cg-crumb a { color: var(--cg-muted); text-decoration: none; }

.cg-panel {
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  padding: 22px;
  margin-bottom: 20px;
}
.cg-panel h2 { font-size: 18px; margin: 0 0 16px; }

/* The empty-state pattern from the No Dues page -- reused, not reinvented. */
.cg-empty {
  display: grid; place-items: center;
  min-height: 210px;
}
.cg-empty .inner {
  background: #1b2439;
  border-radius: 10px;
  padding: 26px 58px;
  font-size: 20px;
  font-weight: 700;
}

.cg-emergency { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.cg-blood { text-align: center; padding-right: 28px; border-right: 1px solid var(--cg-border); }
.cg-blood .v { font-size: 46px; font-weight: 800; line-height: 1; }
.cg-blood .k { color: var(--cg-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.cg-emergency .block { min-width: 190px; }
.cg-emergency .block .k { color: var(--cg-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }

.cg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-chip {
  padding: 5px 12px; border-radius: 999px; font-size: 14px;
  background: #1e2739; border: 1px solid var(--cg-border); color: var(--cg-text);
}
.cg-chip.danger { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.4); color: #FCA5A5; font-weight: 600; }
.cg-chip.accent { background: var(--cg-accent-bg); border-color: rgba(99,102,241,0.4); color: #A5B4FC; }
.cg-chip.muted { color: var(--cg-muted); }

.cg-visit { border: 1px solid var(--cg-border); border-radius: 10px; margin-bottom: 10px; background: #131a29; }
.cg-visit > summary {
  list-style: none; cursor: pointer; padding: 15px 18px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 56px;
}
.cg-visit > summary::-webkit-details-marker { display: none; }
.cg-visit > summary:hover { background: #172032; }
.cg-visit .when { font-weight: 600; min-width: 170px; }
.cg-visit .body { padding: 4px 18px 18px; border-top: 1px solid var(--cg-border); }

.cg-kv { display: grid; grid-template-columns: 170px 1fr; gap: 10px 18px; margin: 14px 0 0; }
.cg-kv dt { color: var(--cg-muted); font-size: 14px; }
.cg-kv dd { margin: 0; }

table.cg-table { width: 100%; border-collapse: collapse; font-size: 15px; }
table.cg-table th, table.cg-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cg-border); }
table.cg-table th { color: var(--cg-muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
table.cg-table tr:last-child td { border-bottom: none; }

.cg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border-radius: 9px; border: 1px solid var(--cg-border);
  background: #1c2436; color: var(--cg-text);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.cg-btn:hover { background: #222c42; }
/* A deeper indigo than the accent, so white text on it passes 4.5:1 (6.3:1). */
.cg-btn-primary { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.cg-btn-primary:hover { background: #4338ca; }

.cg-field { display: block; margin-bottom: 16px; }
.cg-field > span.l { display: block; font-weight: 600; margin-bottom: 6px; font-size: 15px; }
.cg-field input, .cg-field select, .cg-field textarea {
  width: 100%; min-height: 46px; padding: 11px 13px;
  font: inherit; color: var(--cg-text);
  background: #0f1523; border: 1px solid var(--cg-border); border-radius: 9px;
}
.cg-field input:focus, .cg-field select:focus, .cg-field textarea:focus {
  outline: 2px solid var(--cg-accent); outline-offset: 1px; border-color: var(--cg-accent);
}
.cg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.cg-notice {
  background: #131a29; border: 1px solid var(--cg-border);
  border-left: 3px solid var(--cg-accent);
  padding: 16px 18px; border-radius: 9px; margin-bottom: 18px;
  font-size: 15px; color: var(--cg-muted);
}
.cg-notice strong { color: var(--cg-text); display: block; margin-bottom: 4px; }

.cg-stale {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #FDE68A;
  padding: 14px 18px; border-radius: 9px; margin-bottom: 18px;
}

.cg-asof { color: var(--cg-muted); font-size: 13px; margin-top: 18px; }

.cg-chart { width: 100%; height: 190px; }
.cg-legend { display: flex; gap: 18px; flex-wrap: wrap; color: var(--cg-muted); font-size: 14px; margin-top: 10px; }
.cg-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; }

/* The sidebar becomes a scrolling strip rather than disappearing -- a student
 * on a phone still needs to reach Medical History. */
@media (max-width: 900px) {
  .cg-layout { flex-direction: column; }
  .cg-sidebar {
    width: 100%; padding: 8px 10px;
    border-right: 0; border-bottom: 1px solid var(--cg-border);
    display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .cg-group { display: none; }
  .cg-nav { flex-direction: row; gap: 6px; }
  .cg-nav a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 10px 14px; }
  .cg-nav a[aria-current="page"] { border-left: 0; border-bottom-color: var(--cg-accent); }
  .cg-main { padding: 20px 16px 60px; }
  .cg-grid2 { grid-template-columns: 1fr; }
  .cg-emergency { gap: 18px; }
  .cg-blood { border-right: 0; padding-right: 0; }
  .cg-kv { grid-template-columns: 1fr; gap: 2px; }
  .cg-kv dd { margin-bottom: 10px; }
  .cg-header { padding: 12px 16px; gap: 12px; }
  .cg-logo { font-size: 19px; }
}

.cg-table-wrap { overflow-x: auto; }

/* The coded allergy picker (hard rule 1): tick rather than type. */
.cg-allergies { border: 0; padding: 0; margin: 4px 0 18px; min-width: 0; }
.cg-allergies legend { padding: 0; }
.cg-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.cg-check {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--cg-border); border-radius: 8px; background: #0f1522; cursor: pointer;
}
.cg-check:has(input:checked) { border-color: var(--cg-accent); background: var(--cg-accent-bg); }
.cg-check input { width: 18px; height: 18px; accent-color: var(--cg-accent); }
.cg-hint { color: var(--cg-muted); font-size: 14px; margin: 10px 0 0; }

/* The stand-in's sign-in: a roll number box, and the students seen most recently. */
.cg-roll { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.cg-roll .cg-field { flex: 1; min-width: 200px; margin: 0; }
.cg-pick { margin: 0 0 8px; }
.cg-pick .cg-btn { width: 100%; justify-content: flex-start; gap: 10px; }
.cg-pick-meta { color: var(--cg-muted); font-weight: 400; }
.cg-notice-danger { border-left-color: var(--cg-danger); }