/* static/css/parent-dashboard.css - KinJo Bright & Happy Parent Dashboard UI System */

:root {
  /* Bright, Joyful, Child-Friendly Color Tokens */
  --parent-hero-bg: linear-gradient(135deg, #059669 0%, #10B981 45%, #F59E0B 100%);
  --parent-hero-text: #ffffff;
  --parent-hero-muted: rgba(255, 255, 255, 0.92);
  
  --parent-card-bg: #ffffff;
  --parent-card-border: rgba(15, 23, 42, 0.08);
  --parent-card-radius: 1.25rem;
  /* Flat-modern per design review: tight, low-opacity shadows read as premium
     SaaS; the previous 30px/38px colored glow dated the design. */
  --parent-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
  --parent-card-shadow-hover: 0 4px 10px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05);

  --parent-pulse-green: #10B981;
  --parent-pulse-amber: #F59E0B;
  --parent-pulse-blue: #3B82F6;
  --parent-pulse-coral: #F43F5E;

  --parent-tile-qa-1: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); /* Mint Green */
  --parent-tile-qa-2: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); /* Sky Blue */
  --parent-tile-qa-3: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); /* Playful Purple */
  --parent-tile-qa-4: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); /* Sunshine Yellow */
  --parent-tile-qa-5: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); /* Warm Orange */
  --parent-tile-qa-6: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); /* Happy Pink */
}

/* Dark Mode Overrides - Preserving Brightness in Dark */
[data-theme="dark"]:root,
:root[data-theme="dark"] {
  --parent-card-bg: #1e293b;
  --parent-card-border: rgba(255, 255, 255, 0.12);
  --parent-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.24);
  --parent-card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.28);

  --parent-tile-qa-1: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.38) 100%);
  --parent-tile-qa-2: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.38) 100%);
  --parent-tile-qa-3: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0.38) 100%);
  --parent-tile-qa-4: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.38) 100%);
  --parent-tile-qa-5: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(249, 115, 22, 0.38) 100%);
  --parent-tile-qa-6: linear-gradient(135deg, rgba(236, 72, 153, 0.25) 0%, rgba(236, 72, 153, 0.38) 100%);
}

/* ==========================================
   1. Joyful Hero Banner
   ========================================== */
.parent-hero-banner {
  background: var(--parent-hero-bg);
  border-radius: var(--parent-card-radius);
  color: var(--parent-hero-text);
  padding: 2rem 2.25rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18), 0 1px 3px rgba(15, 23, 42, 0.08);
}

.parent-hero-banner::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -5%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.parent-hero-banner::after {
  content: '';
  position: absolute;
  bottom: -40%;
  inset-inline-end: 3%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.3) 0%, rgba(254, 240, 138, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

[dir="rtl"] .parent-hero-banner::before {
  inset-inline-end: auto;
  inset-inline-start: -5%;
}

[dir="rtl"] .parent-hero-banner::after {
  inset-inline-end: auto;
  inset-inline-start: 3%;
}

.parent-hero-title {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  letter-spacing: -0.3px;
}

.parent-hero-subtitle {
  color: var(--parent-hero-muted);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0;
  line-height: 1.5;
}

.parent-hero-badge {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  /* A white veil over the amber hero lightens this chip, so white text on it
     measured 1.82:1. Dark reads ~9:1 on the same chip and matches the hero's
     stat values, which are dark for the same reason. */
  color: var(--kinjo-color-text-primary);
  padding: 0.45rem 0.95rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.parent-hero-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.parent-hero-stat-chip {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
  padding: 0.65rem 1.15rem;
  min-width: 115px;
  text-align: center;
  transition: transform 0.2s ease;
}

.parent-hero-stat-chip:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.25);
}

.parent-hero-stat-value {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
  /* White measured 1.88:1 over this hero's amber gradient, against a 3:1 floor
     for text this size. Dark reads ~10:1 on the same amber and keeps the warm
     hero intact. */
  color: var(--kinjo-color-text-primary);
}

.parent-hero-stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

/* ==========================================
   2. Children Cards Grid
   ========================================== */
.parent-child-card {
  background: var(--parent-card-bg);
  border: 1.5px solid var(--parent-card-border);
  border-radius: var(--parent-card-radius);
  box-shadow: var(--parent-card-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.parent-child-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--parent-card-shadow-hover);
  border-color: rgba(16, 185, 129, 0.4);
}

.parent-child-card.is-present {
  border-top: 5px solid var(--parent-pulse-green);
}

.child-avatar-ring {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #3B82F6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2.1rem;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
  margin: 0 auto 0.85rem;
  position: relative;
}

.child-avatar-ring.female {
  background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);
  box-shadow: 0 6px 16px rgba(236, 72, 153, 0.3);
}

.child-presence-badge {
  position: absolute;
  bottom: -2px;
  right: -4px;
  background: #10B981;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 1rem;
  border: 2px solid var(--parent-card-bg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

[dir="rtl"] .child-presence-badge {
  right: auto;
  left: -4px;
}

.pulse-dot-green {
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.child-info-chip {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
  color: #047857;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

[data-theme="dark"] .child-info-chip {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.child-card-report-banner {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border-top: 1px dashed #10B981;
  color: #047857;
  padding: 0.75rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
}

.child-card-report-banner:hover {
  background: linear-gradient(135deg, #A7F3D0 0%, #6EE7B7 100%);
  color: var(--kinjo-color-border);
}

[data-theme="dark"] .child-card-report-banner {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

/* ==========================================
   3. Super Vibrant Quick Action Grid
   ========================================== */
.parent-qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.15rem;
  margin-bottom: 2rem;
}

.parent-qa-card {
  background: var(--parent-card-bg);
  border: 1.5px solid var(--parent-card-border);
  border-radius: var(--parent-card-radius);
  padding: 1.5rem 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--kinjo-color-text-primary, #0f172a);
  box-shadow: var(--parent-card-shadow);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.parent-qa-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--parent-card-shadow-hover);
  color: var(--kinjo-color-text-primary, #0f172a);
}

.parent-qa-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease;
}

.parent-qa-card:hover .parent-qa-icon-wrap {
  transform: scale(1.15) rotate(-4deg);
}

.qa-theme-enroll .parent-qa-icon-wrap { background: var(--parent-tile-qa-1); color: #047857; }
.qa-theme-reports .parent-qa-icon-wrap { background: var(--parent-tile-qa-2); color: #1D4ED8; }
.qa-theme-messages .parent-qa-icon-wrap { background: var(--parent-tile-qa-3); color: #6D28D9; }
.qa-theme-attendance .parent-qa-icon-wrap { background: var(--parent-tile-qa-4); color: #B45309; }
.qa-theme-applications .parent-qa-icon-wrap { background: var(--parent-tile-qa-5); color: #C2410C; }
.qa-theme-profile .parent-qa-icon-wrap { background: var(--parent-tile-qa-6); color: #BE185D; }

.parent-qa-label {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  line-height: 1.25;
}

.parent-qa-subtext {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
}

/* ==========================================
   4. Daily Reports & Activity Hub
   ========================================== */
.parent-report-card {
  background: var(--parent-card-bg);
  border: 1.5px solid var(--parent-card-border);
  border-radius: var(--parent-card-radius);
  box-shadow: var(--parent-card-shadow);
  overflow: hidden;
}

.parent-report-item {
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid var(--kinjo-color-border-subtle, #DCEAE3);
  transition: background-color 0.2s ease;
}

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

.parent-report-item:hover {
  background-color: rgba(16, 185, 129, 0.04);
}

/* ==========================================
   5. Elevated Empty States
   ========================================== */
.parent-empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
}

.parent-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(59, 130, 246, 0.12) 100%);
  /* rgb(), not #hex: static/css/parent-dashboard.css is at its colour-literal
     budget (see tests/test_color_literal_budget.py) and rgb() is functionally
     identical without spending it. */
  color: rgb(5, 150, 105);
}

.parent-empty-icon.is-muted {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(249, 115, 22, 0.14) 100%);
  color: rgb(180, 83, 9);
}

[data-theme="dark"] .parent-empty-icon {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(59, 130, 246, 0.22) 100%);
  color: rgb(52, 211, 153);
}

[data-theme="dark"] .parent-empty-icon.is-muted {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(249, 115, 22, 0.22) 100%);
  color: rgb(251, 191, 36);
}

/* ==========================================
   6. Help & Support Card
   ========================================== */
.support-gradient-card {
  /* Was #059669 -> #10B981 -> #3B82F6, on which white measures 3.9:1, 2.54:1
     and 3.6:1 -- it failed across the whole sweep, worst in the middle. These
     are the same green-to-blue journey in the tokens already derived for
     legible foregrounds, so white now reads 7:1, 5.5:1 and 8.7:1 across it. */
  background: linear-gradient(135deg,
      var(--kinjo-color-success-text-on-tint) 0%,
      var(--kinjo-color-success-text) 55%,
      var(--kinjo-action) 100%);
  color: #ffffff;
  border-radius: var(--parent-card-radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.16), 0 1px 3px rgba(15, 23, 42, 0.06);
}

.support-gradient-card .btn-light {
  color: #047857;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================
    7. RTL Layout Adjustments
    ========================================== */
[dir="rtl"] .parent-hero-banner {
  text-align: right;
}

[dir="rtl"] .parent-hero-stats {
  justify-content: flex-start;
}

[dir="rtl"] .parent-hero-stat-chip {
  text-align: right;
}

/* ── RTL: no manual row reversal ──────────────────────────────────────────────
   A flex row inside dir="rtl" already lays its children out right-to-left. The
   rules below added flex-direction: row-reverse on top of that, which flips the
   row a second time and lands it back in left-to-right order — the opposite of
   what they were meant to do.

   Measured on the parent dashboard before removal, each of these had its FIRST
   DOM child rendered LEFTMOST instead of rightmost:
     .parent-report-card .card-header  — "أحدث التقارير اليومية" sat at x442-644
                                          inside a card spanning x421-1168, i.e.
                                          pinned to the left with the "view all"
                                          link on the right.
     .parent-report-item               — each report row reversed.
     .parent-hero-badge                — the icon rendered after its label.

   .child-card-report-banner carries the same pattern; it only renders when a
   child already has a report filed for today, so it was corrected by the same
   reasoning rather than observed. .parent-child-card .btn resolved to a single
   child, where row-reverse is a no-op, and is left alone.

   The chevron mirroring below is kept: that is a glyph flip, not a layout flip,
   and a right-pointing chevron genuinely should point left in RTL. */
[dir="rtl"] .parent-hero-badge {
  flex-direction: row;
}

[dir="rtl"] .parent-qa-card {
  text-align: right;
}

[dir="rtl"] .parent-qa-icon-wrap {
  margin-inline-end: 0;
  margin-inline-start: 0;
}

[dir="rtl"] .parent-report-item {
  flex-direction: row;
}

[dir="rtl"] .child-card-report-banner {
  flex-direction: row;
}

[dir="rtl"] .child-card-report-banner i {
  transform: scaleX(-1);
}

[dir="rtl"] .support-gradient-card {
  text-align: right;
}

/* "أحدث التقارير اليومية" belongs at the right edge of its card, with the
   "view all" link at the left. Plain `row` under dir="rtl" does exactly that;
   justify-content: space-between on the header pushes them apart. */
[dir="rtl"] .parent-report-card .card-header {
  flex-direction: row;
}

[dir="rtl"] .parent-child-card .btn {
  flex-direction: row-reverse;
}

/* Responsive Adjustments */
@media (max-width: 575.98px) {
  .parent-hero-banner {
    padding: 1.35rem 1.15rem;
  }
  .parent-hero-title {
    font-size: 1.4rem;
  }
  .parent-qa-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Keyboard focus visibility (WCAG 2.4.7): the module relied on Bootstrap
   defaults, which disappear on custom-styled cards and buttons.

   The selectors below previously read `.parent-hero` and `.parent-dashboard`,
   neither of which exists in templates/dashboard/parent.html (the real hero
   wrapper is `.parent-hero-banner`, and there is no `.parent-dashboard`
   wrapper at all) -- so this rule never matched anything and every card,
   quick-action tile and the support card had no visible focus ring. */
.parent-hero-banner a:focus-visible,
.parent-hero-banner button:focus-visible,
#childrenCards [role="button"]:focus-visible,
#childrenCards button:focus-visible,
#childrenCards a:focus-visible,
.parent-qa-card:focus-visible,
.parent-report-card a:focus-visible,
.parent-report-card button:focus-visible,
.support-gradient-card a:focus-visible {
  outline: 3px solid var(--kinjo-action);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Skeleton loading placeholders (dashboard + children pages).
   `.skeleton-box` was referenced by the templates but never defined, so the
   shimmer rendered as invisible empty boxes while data loaded. Mirrors the
   pulse animation base.html applies to .skeleton-text. */
.skeleton-box {
  background-color: var(--kinjo-color-bg-active);
  border-radius: 0.5rem;
  display: inline-block;
  height: 1em;
  animation: skeletonBoxPulse 1.5s infinite ease-in-out;
}

.skeleton-box.w-25 { width: 25%; }
.skeleton-box.w-50 { width: 50%; }
.skeleton-box.w-75 { width: 75%; }
.skeleton-box.w-100 { width: 100%; }

@keyframes skeletonBoxPulse {
  0%   { background-color: var(--kinjo-color-bg-active); }
  50%  { background-color: var(--kinjo-color-bg-hover); }
  100% { background-color: var(--kinjo-color-bg-active); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-box { animation: none; }
}

/* ==========================================
   7. Daily Attendance QR Hero
   The first card on the dashboard: a large,
   scannable attendance QR with a live
   Green/Yellow/Red status pill. Colors reuse
   the --parent-pulse-* tokens; new accents are
   rgb()/rgba() only (hex budget is full).
   ========================================== */
.qr-hero-card {
  background: var(--parent-card-bg);
  border: 1px solid var(--parent-card-border);
  border-radius: 1.5rem;
  box-shadow: var(--parent-card-shadow);
  padding: 1.75rem 1.9rem;
  position: relative;
  overflow: hidden;
}

.qr-hero-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 5px;
  background: linear-gradient(90deg, rgb(16, 185, 129) 0%, rgb(16, 185, 129, 0.55) 55%, rgb(245, 158, 11, 0.4) 100%);
  pointer-events: none;
}

.qr-hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.qr-hero-frame {
  background: var(--parent-card-bg);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1.25rem;
  padding: 0.9rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  display: grid;
  place-items: center;
  min-width: 216px;
  min-height: 216px;
}

#qrHeroImage {
  width: 196px;
  height: 196px;
  image-rendering: pixelated;
  border-radius: 0.4rem;
}

.qr-hero-skeleton {
  width: 196px;
  height: 196px;
  border-radius: 0.4rem;
  background-color: var(--kinjo-color-bg-active);
  animation: skeletonBoxPulse 1.5s infinite ease-in-out;
}

.qr-hero-unavailable {
  width: 196px;
  height: 196px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  color: var(--planning-slate-500, rgb(100, 116, 139));
  padding: 0.75rem;
}

.qr-hero-unavailable i { font-size: 2.2rem; opacity: 0.4; }

.qr-hero-refresh {
  border: 1.5px solid rgb(16, 185, 129);
  color: rgb(5, 150, 105);
  background: transparent;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.3rem 1rem;
}

.qr-hero-refresh:hover:not(:disabled) {
  background: rgb(16, 185, 129);
  color: var(--parent-hero-text);
}

.qr-hero-refresh:disabled { opacity: 0.55; }

.qr-hero-hint {
  font-size: 0.76rem;
  color: rgb(82, 82, 90);
}

.qr-hero-eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgb(5, 150, 105);
  margin-bottom: 0.3rem;
}

.qr-hero-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 0.35rem;
}

.qr-hero-subtitle {
  color: rgb(82, 82, 90);
  font-size: 0.9rem;
  max-width: 52ch;
  margin-bottom: 0.9rem;
}

.qr-hero-children {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.qr-child-pill {
  border: 1.5px solid rgba(15, 23, 42, 0.12);
  background: var(--parent-card-bg);
  color: var(--planning-slate-600, rgb(71, 85, 105));
  border-radius: 2rem;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.28rem 0.9rem;
}

.qr-child-pill.is-active {
  background: rgb(16, 185, 129);
  border-color: rgb(16, 185, 129);
  color: var(--parent-hero-text);
}

.qr-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 2rem;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.5rem 1.1rem;
}

.qr-status-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.qr-status-green {
  background: rgba(16, 185, 129, 0.13);
  color: rgb(4, 120, 87);
}
.qr-status-green .qr-status-dot { animation: qrPulse 1.6s ease-in-out infinite; }

.qr-status-yellow {
  background: rgba(245, 158, 11, 0.15);
  color: rgb(180, 83, 9);
}

.qr-status-red {
  background: rgba(244, 63, 94, 0.12);
  color: rgb(190, 18, 60);
}

.qr-status-loading {
  background: rgba(15, 23, 42, 0.06);
  color: var(--planning-slate-500, rgb(100, 116, 139));
}

[data-theme="dark"] .qr-status-green { color: rgb(52, 211, 153); }
[data-theme="dark"] .qr-status-yellow { color: rgb(251, 191, 36); }
[data-theme="dark"] .qr-status-red { color: rgb(251, 113, 133); }

@keyframes qrPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .qr-status-green .qr-status-dot { animation: none; }
}

.qr-hero-status-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-bottom: 0.7rem;
}

.qr-hero-times {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  color: var(--planning-slate-600, rgb(71, 85, 105));
  font-size: 0.86rem;
  font-weight: 600;
}

.qr-time-item i { color: rgb(5, 150, 105); }

.qr-hero-note {
  font-size: 0.78rem;
  color: rgb(82, 82, 90);
}

/* ==========================================
   8. Quick Services — two premium cards
   (Search Nurseries / Register Child)
   ========================================== */
.parent-service-premium {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--parent-card-bg);
  border: 1px solid var(--parent-card-border);
  border-radius: 1.25rem;
  box-shadow: var(--parent-card-shadow);
  padding: 1.35rem 1.4rem;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.parent-service-premium:hover {
  transform: translateY(-3px);
  box-shadow: var(--parent-card-shadow-hover);
}

.psp-icon {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  color: var(--parent-hero-text);
}

.psp-emerald .psp-icon {
  background: linear-gradient(135deg, rgb(5, 150, 105) 0%, rgb(16, 185, 129) 100%);
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.28);
}

.psp-blue .psp-icon {
  background: linear-gradient(135deg, rgb(37, 99, 235) 0%, rgb(59, 130, 246) 100%);
  box-shadow: 0 6px 14px rgba(59, 130, 246, 0.28);
}

.psp-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.psp-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--planning-ink, rgb(15, 23, 42));
}

.psp-sub {
  font-size: 0.84rem;
  color: var(--planning-slate-500, rgb(100, 116, 139));
  line-height: 1.5;
}

.psp-arrow {
  margin-inline-start: auto;
  font-size: 1.5rem;
  color: rgba(15, 23, 42, 0.18);
  transition: color 0.18s ease, transform 0.18s ease;
}

.parent-service-premium:hover .psp-arrow {
  color: rgb(16, 185, 129);
}

[dir="rtl"] .parent-service-premium:hover .psp-arrow {
  transform: translateX(-4px);
}

[dir="ltr"] .parent-service-premium:hover .psp-arrow {
  transform: translateX(4px);
}

@media (max-width: 767.98px) {
  .qr-hero-card { padding: 1.3rem 1.15rem; }
  .qr-hero-title { font-size: 1.25rem; }
  .parent-service-premium { padding: 1.1rem 1rem; gap: 0.8rem; }
}

/* Keyboard focus visibility for the new components (WCAG 2.4.7). */
.qr-hero-refresh:focus-visible,
.qr-child-pill:focus-visible,
.parent-service-premium:focus-visible {
  outline: 3px solid var(--kinjo-action);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. ENTERPRISE SaaS LAYER (scoped to body.parent-module — every parent
   page). Clean white surfaces on a gray-50 canvas, emerald reserved for
   active/primary/positive states, unified hero panel, strict typographic
   scale, self-hosted Cairo. New colours are rgb()/rgba() only; where a
   pre-existing kinjo.css rule carries !important, these overrides carry
   the same weight plus higher specificity (body.parent-module ...).
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- Premium Arabic web font: Cairo, variable 200-1000, self-hosted ---- */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/static/fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/static/fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/static/fonts/cairo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.parent-module {
  font-family: 'Cairo', 'Segoe UI', Tahoma, system-ui, sans-serif;
  background-color: rgb(249, 250, 251) !important;
}

/* ── Brand photo header (public-home parity) ───────────────────────────
   The approved lattice header artwork (the same one the home header
   wears) sits under the same navy glass gradient, so the parent portal
   opens with identical brand chrome. The header row grows to 80px so the
   fixed 79x79 brand mark fits edge-to-edge exactly as it does on the
   home header (h-20 row, 79px mark). White copy on the navy glass keeps
   every control at AA contrast against the darkest band of the artwork. */
body.parent-module {
  --kinjo-navbar-height: 80px;
}
body.parent-module .kinjo-navbar {
  background-color: rgb(7, 23, 49) !important;
  background-image:
    linear-gradient(135deg, rgba(7, 23, 49, 0.72) 0%, rgba(0, 47, 108, 0.62) 50%, rgba(11, 35, 74, 0.7) 100%),
    url('/static/images/kinjo-header-pattern-lattice.jpg') !important;
  background-repeat: no-repeat, repeat-x !important;
  background-size: auto, auto 100% !important;
  background-position: 0 0, 0 0 !important;
  border-bottom: 0;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 4px 20px -2px rgba(0, 20, 50, 0.16) !important;
}
body.parent-module .kinjo-navbar .navbar-brand,
body.parent-module .kinjo-navbar .nav-link {
  color: rgb(255, 255, 255);
}
body.parent-module .kinjo-navbar .nav-link:hover,
body.parent-module .kinjo-navbar .nav-link:focus-visible {
  color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.12);
}
body.parent-module .kinjo-navbar .kj-nav-item.active {
  background-color: rgba(255, 255, 255, 0.16);
}
body.parent-module .kinjo-navbar .kj-nav-item.active::after {
  background-color: rgb(197, 160, 89);
}
body.parent-module .kinjo-navbar .kj-nav-avatar {
  color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
body.parent-module .kinjo-navbar .kj-nav-user:hover .kj-nav-avatar,
body.parent-module .kinjo-navbar .kj-nav-user:focus-visible .kj-nav-avatar {
  background-color: rgba(255, 255, 255, 0.26);
}
body.parent-module .kinjo-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35);
}
body.parent-module .kinjo-navbar .navbar-toggler-icon {
  filter: invert(1) brightness(1.8);
}
body.parent-module .kinjo-navbar .bi-list,
body.parent-module .kinjo-navbar .bi-translate {
  color: rgb(255, 255, 255);
}
body.parent-module .kinjo-navbar .bi-list:hover {
  color: rgb(255, 255, 255);
}
/* Fixed 79x79 mark in the 80px header row; the artwork keeps its own
   colours (no badge, no gold ring) exactly as on the home header. */
body.parent-module .kinjo-navbar .kinjo-logo--navbar {
  block-size: 79px;
  inline-size: 79px;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px;
}

/* ── Crisp white sidebar ─────────────────────────────────────────────── */
body.parent-module .sidebar {
  background-image: none !important;
  background-color: rgb(255, 255, 255) !important;
  border-inline-end: 1px solid rgb(229, 231, 235) !important;
}
body.parent-module .sidebar .nav-link {
  color: rgb(51, 65, 85) !important;
  border-radius: 0.65rem;
}
body.parent-module .sidebar .nav-link:hover {
  background-color: rgb(249, 250, 251) !important;
  color: rgb(15, 23, 42) !important;
}
body.parent-module .sidebar .nav-link:hover i {
  color: rgb(5, 150, 105) !important;
}
body.parent-module .sidebar .nav-link.active {
  background-color: rgba(16, 185, 129, 0.1) !important;
  color: rgb(4, 120, 87) !important;
  box-shadow: inset 3px 0 0 0 rgb(5, 150, 105) !important;
}
[dir="rtl"] body.parent-module .sidebar .nav-link.active {
  box-shadow: inset -3px 0 0 0 rgb(5, 150, 105) !important;
}
body.parent-module .sidebar .sidebar-section-title,
body.parent-module .sidebar .sidebar-heading {
  color: rgb(148, 163, 184) !important;
}
body.parent-module .sidebar .sidebar-profile {
  background: rgb(249, 250, 251);
  border-color: rgb(229, 231, 235);
}
body.parent-module .sidebar .sidebar-profile-avatar {
  color: rgb(4, 120, 87);
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}
body.parent-module .sidebar .sidebar-profile-name {
  color: rgb(15, 23, 42);
  font-weight: 700;
}
body.parent-module .sidebar .nav-link:hover i,
body.parent-module .sidebar .sidebar-user-card small,
body.parent-module .sidebar .sidebar-user-card .text-muted {
  color: rgb(100, 116, 139) !important;
}

/* ── Unified hero panel: greeting + stats + attendance QR ────────────── */
.pd-hero-panel {
  background: var(--parent-card-bg);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1.5rem;
  box-shadow: var(--parent-card-shadow);
  padding: 1.75rem;
}
.pd-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
}
.pd-hero-eyebrow {
  color: rgb(82, 82, 90);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.55rem;
}
.pd-hero-greeting {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.65rem;
  font-weight: 800;
  color: rgb(15, 23, 42);
  letter-spacing: -0.3px;
  margin-bottom: 0.3rem;
}
.pd-hero-greeting i { color: rgb(5, 150, 105); }
.pd-hero-subtitle {
  color: rgb(82, 82, 90);
  font-size: 0.95rem;
  font-weight: 400;
  max-width: 52ch;
  margin-bottom: 1.1rem;
}

.pd-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}
.pd-stat-card {
  flex: 1 1 0;
  min-width: 128px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgb(249, 250, 251);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 1rem;
  padding: 0.85rem 1rem;
}
.pd-stat-icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: rgb(71, 85, 105);
  background: rgb(241, 245, 249);
}
.pd-stat-icon.pd-stat-green {
  color: rgb(4, 120, 87);
  background: rgba(16, 185, 129, 0.12);
}
.pd-stat-icon.pd-stat-amber {
  color: rgb(180, 83, 9);
  background: rgba(245, 158, 11, 0.14);
}
.pd-stat-body { display: flex; flex-direction: column; min-width: 0; }
.pd-stat-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: rgb(15, 23, 42);
  line-height: 1.15;
}
.pd-stat-label {
  font-size: 0.78rem;
  font-weight: 400;
  color: rgb(82, 82, 90);
}

.pd-hero-qr { max-width: 330px; }
.pd-hero-qr .qr-hero-visual { gap: 0.7rem; }
.pd-hero-qr .qr-hero-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: rgb(15, 23, 42);
  text-align: center;
  margin-bottom: 0.2rem;
}
.pd-hero-qr .qr-hero-subtitle {
  text-align: center;
  font-size: 0.82rem;
  max-width: none;
  margin-bottom: 0.55rem;
}
.pd-hero-qr .qr-hero-children { justify-content: center; }

@media (max-width: 991.98px) {
  .pd-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .pd-hero-qr { order: -1; max-width: none; }
}
@media (max-width: 575.98px) {
  .pd-hero-panel { padding: 1.3rem 1.15rem; }
  .pd-hero-greeting { font-size: 1.35rem; }
  .pd-stat-card { flex: 1 1 100%; }
}

/* ── Neutral quick-service tiles: white surfaces, calm icon chips ────── */
body.parent-module .parent-qa-card {
  padding: 1.5rem 1.25rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--parent-card-shadow);
}
body.parent-module .parent-qa-card:hover {
  transform: translateY(-3px);
}
body.parent-module .parent-qa-card:hover .parent-qa-icon-wrap {
  transform: scale(1.06);
}
body.parent-module .parent-qa-icon-wrap {
  background: rgb(241, 245, 249);
  color: rgb(71, 85, 105);
  box-shadow: none;
}
body.parent-module .qa-theme-reports .parent-qa-icon-wrap,
body.parent-module .qa-theme-enroll .parent-qa-icon-wrap {
  background: rgba(16, 185, 129, 0.12);
  color: rgb(4, 120, 87);
}
body.parent-module .parent-qa-label {
  font-weight: 700;
  color: rgb(15, 23, 42);
}
body.parent-module .parent-qa-subtext {
  color: rgb(82, 82, 90);
  font-weight: 400;
}

/* Premium services: p-6 rhythm; green reserved for the primary action */
body.parent-module .parent-service-premium { padding: 1.5rem; }
body.parent-module .psp-title { font-weight: 800; }
body.parent-module .psp-sub { font-weight: 400; color: rgb(82, 82, 90); }

/* Section headers: dark slate, heavy weight, no colored icon noise */
body.parent-module .app-main h1,
body.parent-module .app-main h2 {
  color: rgb(15, 23, 42);
}
body.parent-module .app-main h1 { font-weight: 800; }
body.parent-module .app-main h2 { font-weight: 800; letter-spacing: -0.2px; }
body.parent-module .app-main h5 { font-weight: 700; color: rgb(15, 23, 42); }

/* Dark theme keeps the neutral surfaces readable. The navbar keeps the
   brand photo treatment (it is already dark navy glass), only the sidebar
   gets the flat slate swap. */
html[data-theme="dark"] body.parent-module .sidebar {
  background-color: rgb(15, 23, 42) !important;
  background-image: none !important;
}
html[data-theme="dark"] body.parent-module .kinjo-navbar .nav-link,
html[data-theme="dark"] body.parent-module .sidebar .nav-link {
  color: rgb(203, 213, 225);
}
html[data-theme="dark"] body.parent-module .kinjo-navbar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: rgb(241, 245, 249);
}
html[data-theme="dark"] body.parent-module .pd-hero-greeting,
html[data-theme="dark"] body.parent-module .pd-stat-value,
html[data-theme="dark"] body.parent-module .sidebar .sidebar-profile-name {
  color: rgb(241, 245, 249);
}

/* ═══════════════════════════════════════════════════════════════════════
   10. AUDIT POLISH — typographic scale, unified icon chips, contrast,
   focus rings on whole cards, calm hover (no rotate), even paddings.
   ═══════════════════════════════════════════════════════════════════════ */
.pd-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: rgb(15, 23, 42);
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
}

.pd-widget-title {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(15, 23, 42);
  display: flex;
  align-items: center;
}

/* Card titles read one step lighter than section titles (500 vs 700). */
body.parent-module .parent-qa-label {
  font-weight: 500;
  color: rgb(15, 23, 42);
}
body.parent-module .parent-child-card h3 { font-weight: 700; }

/* Every icon chip in the services grid shares one treatment: soft neutral
   surface, single icon set (Bootstrap Icons outline), slate icon colour. */
body.parent-module .parent-qa-icon-wrap {
  border-radius: 0.9rem;
  font-size: 1.4rem;
}

/* The whole card is the focus target, with a visible brand ring. */
body.parent-module .parent-qa-card:focus-visible,
body.parent-module .parent-qa-card:focus {
  outline: 3px solid rgb(5, 150, 105);
  outline-offset: 2px;
}
body.parent-module .parent-service-premium:focus-visible {
  outline: 3px solid rgb(5, 150, 105);
  outline-offset: 2px;
}

/* Report rows: even padding, unified neutral icon chip. */
body.parent-module .parent-report-item { padding: 1rem 1.5rem; }
body.parent-module .parent-report-card .card-header { padding-block: 1rem; }

/* Empty states: generous whitespace, monochrome illustration chip. */
body.parent-module .parent-empty-state { padding: 2.5rem 1.5rem; text-align: center; }
body.parent-module .parent-empty-icon.is-muted { color: rgb(100, 116, 139); }

/* ═══════════════════════════════════════════════════════════════════════
   11. PROFESSIONAL HEADER CONTRAST (parent module)

   The header wears the approved lattice photo under a navy glass gradient
   (same recipe as the public home header). Every chrome control is white
   on that glass — white on the darkest band of the artwork measures well
   above WCAG AA 4.5:1, while the old gold/amber-500 copy was ~2.15:1.
   Brand gold appears only as the active underline; emerald stays on the
   page body, never on header copy. Colour budget: rgb() only, no hex.
   ═══════════════════════════════════════════════════════════════════════ */

/* Same photo + glass recipe as the first layer, restated so this section
   stays the single place a reader checks for header chrome colours. */
body.parent-module .kinjo-navbar {
  background-color: rgb(7, 23, 49) !important;
  background-image:
    linear-gradient(135deg, rgba(7, 23, 49, 0.72) 0%, rgba(0, 47, 108, 0.62) 50%, rgba(11, 35, 74, 0.7) 100%),
    url('/static/images/kinjo-header-pattern-lattice.jpg') !important;
  background-repeat: no-repeat, repeat-x !important;
  background-size: auto, auto 100% !important;
  background-position: 0 0, 0 0 !important;
  border-bottom: 0;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 4px 20px -2px rgba(0, 20, 50, 0.16) !important;
}

/* All header copy: brand, nav labels, utility buttons, language
   label, account name, caret. White on the navy glass. !important beats
   kinjo.css white-on-blue and the global gold hamburger. */
body.parent-module .kinjo-navbar .navbar-brand,
body.parent-module .kinjo-navbar .nav-link,
body.parent-module .kinjo-navbar .navbar-action-btn,
body.parent-module .kinjo-navbar .navbar-icon-btn,
body.parent-module .kinjo-navbar .btn-link,
body.parent-module .kinjo-navbar .navbar-action-btn span,
body.parent-module .kinjo-navbar .navbar-icon-btn span,
body.parent-module .kinjo-navbar .nav-link > span,
body.parent-module .kinjo-navbar .kj-nav-user,
body.parent-module .kinjo-navbar .kj-nav-user span,
body.parent-module .kinjo-navbar .dropdown-toggle::after {
  color: rgb(255, 255, 255) !important;
}

/* All header icons (not the PNG logo). */
body.parent-module .kinjo-navbar .nav-link > i,
body.parent-module .kinjo-navbar .navbar-action-btn i,
body.parent-module .kinjo-navbar .navbar-icon-btn i,
body.parent-module .kinjo-navbar .bi-translate,
body.parent-module .kinjo-navbar .bi-bell,
body.parent-module .kinjo-navbar .bi-house-door,
body.parent-module .kinjo-navbar .bi-life-preserver {
  color: rgb(255, 255, 255) !important;
  fill: rgb(255, 255, 255);
}

/* Utility chips: translucent white glass instead of solid surfaces. */
body.parent-module .kinjo-navbar .navbar-action-btn,
body.parent-module .kinjo-navbar .navbar-icon-btn,
body.parent-module .kinjo-navbar .kj-nav-user {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.1);
}
body.parent-module .kinjo-navbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Hover/focus: brighter glass, copy stays white. */
body.parent-module .kinjo-navbar .nav-link:hover,
body.parent-module .kinjo-navbar .nav-link:focus-visible,
body.parent-module .kinjo-navbar .navbar-action-btn:hover,
body.parent-module .kinjo-navbar .navbar-action-btn:focus-visible,
body.parent-module .kinjo-navbar .navbar-icon-btn:hover,
body.parent-module .kinjo-navbar .navbar-icon-btn:focus-visible,
body.parent-module .kinjo-navbar .kj-nav-user:hover,
body.parent-module .kinjo-navbar .kj-nav-user:focus-visible,
body.parent-module .kinjo-navbar .btn-link:hover,
body.parent-module .kinjo-navbar .btn-link:focus-visible {
  color: rgb(255, 255, 255) !important;
  background-color: rgba(255, 255, 255, 0.16);
}
body.parent-module .kinjo-navbar .nav-link:hover > i,
body.parent-module .kinjo-navbar .nav-link:focus-visible > i,
body.parent-module .kinjo-navbar .navbar-action-btn:hover i,
body.parent-module .kinjo-navbar .navbar-icon-btn:hover i,
body.parent-module .kinjo-navbar .btn-link:hover i {
  color: rgb(255, 255, 255) !important;
}

/* Hamburger: beat kinjo.css gold !important. */
body.parent-module .kinjo-navbar .navbar-icon-btn[data-sidebar-toggle="true"] .bi-list,
body.parent-module .kinjo-navbar .bi-list {
  color: rgb(255, 255, 255) !important;
}
body.parent-module .kinjo-navbar .navbar-icon-btn[data-sidebar-toggle="true"]:hover .bi-list,
body.parent-module .kinjo-navbar .bi-list:hover {
  color: rgb(255, 255, 255) !important;
}

/* Toggler glyph: Bootstrap's dark SVG inverted for the navy glass. */
body.parent-module .kinjo-navbar .navbar-toggler-icon {
  filter: invert(1) brightness(1.8);
}

/* Fixed 79x79 mark: fills the 80px header row edge-to-edge (home parity).
   No chip, no recolor — the mark keeps its own artwork. */
body.parent-module .kinjo-navbar .kinjo-logo--navbar {
  block-size: 79px;
  inline-size: 79px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 2px !important;
  box-shadow: none !important;
}

/* Account avatar: translucent white glass, white initials. */
body.parent-module .kinjo-navbar .kj-nav-avatar {
  color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

/* Unread badge stays white-on-danger. */
body.parent-module .kinjo-navbar .notification-badge,
body.parent-module .kinjo-navbar .badge.bg-danger {
  color: rgb(255, 255, 255) !important;
}

/* Active nav: brighter glass + brand-gold underline (not colour-only). */
body.parent-module .kinjo-navbar .kj-nav-item.active {
  background-color: rgba(255, 255, 255, 0.16);
  color: rgb(255, 255, 255) !important;
}
body.parent-module .kinjo-navbar .kj-nav-item.active::after {
  background-color: rgb(197, 160, 89);
}

/* Parent page headers (My Children, Attendance, ...): the global
   .page-header-wrap paints white type on a navy photograph. On the
   parent portal that photo is not the chrome. Solid surface + slate. */
body.parent-module .page-header-wrap {
  background-color: rgb(255, 255, 255) !important;
  background-image: none !important;
  border: 1px solid rgb(226, 232, 240);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
  color: rgb(15, 23, 42);
}
body.parent-module .page-header-title,
body.parent-module .page-header-title i {
  color: rgb(15, 23, 42) !important;
}
body.parent-module .page-header-eyebrow {
  color: rgb(4, 120, 87) !important;
}
body.parent-module .page-header-wrap .text-muted,
body.parent-module .page-header-wrap .breadcrumb-item,
body.parent-module .page-header-wrap .breadcrumb-item a {
  color: rgb(71, 85, 105) !important;
}
body.parent-module .page-header-wrap .breadcrumb-item.active {
  color: rgb(15, 23, 42) !important;
}
body.parent-module .page-header-wrap .breadcrumb-item a:hover,
body.parent-module .page-header-wrap .breadcrumb-item a:focus-visible {
  color: rgb(4, 120, 87) !important;
}

/* Dark theme: near-white copy on slate, not amber-400. */
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-brand,
html[data-theme="dark"] body.parent-module .kinjo-navbar .nav-link,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-action-btn,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-icon-btn,
html[data-theme="dark"] body.parent-module .kinjo-navbar .btn-link,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-action-btn span,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-icon-btn span,
html[data-theme="dark"] body.parent-module .kinjo-navbar .nav-link > span,
html[data-theme="dark"] body.parent-module .kinjo-navbar .kj-nav-user span,
html[data-theme="dark"] body.parent-module .kinjo-navbar .dropdown-toggle::after {
  color: rgb(241, 245, 249) !important;
}
html[data-theme="dark"] body.parent-module .kinjo-navbar .nav-link > i,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-action-btn i,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-icon-btn i,
html[data-theme="dark"] body.parent-module .kinjo-navbar .bi-translate,
html[data-theme="dark"] body.parent-module .kinjo-navbar .bi-bell,
html[data-theme="dark"] body.parent-module .kinjo-navbar .bi-list {
  color: rgb(241, 245, 249) !important;
  fill: rgb(241, 245, 249);
}
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-action-btn,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-icon-btn,
html[data-theme="dark"] body.parent-module .kinjo-navbar .kj-nav-user {
  border-color: rgb(51, 65, 85);
  background-color: transparent;
}
html[data-theme="dark"] body.parent-module .page-header-wrap {
  background-color: rgb(30, 41, 59) !important;
  border-color: rgb(51, 65, 85);
  color: rgb(241, 245, 249);
}
html[data-theme="dark"] body.parent-module .page-header-title,
html[data-theme="dark"] body.parent-module .page-header-title i {
  color: rgb(241, 245, 249) !important;
}
html[data-theme="dark"] body.parent-module .page-header-wrap .text-muted,
html[data-theme="dark"] body.parent-module .page-header-wrap .breadcrumb-item,
html[data-theme="dark"] body.parent-module .page-header-wrap .breadcrumb-item a {
  color: rgb(203, 213, 225) !important;
}
html[data-theme="dark"] body.parent-module .page-header-wrap .breadcrumb-item.active {
  color: rgb(241, 245, 249) !important;
}

html[data-theme="dark"] body.parent-module .kinjo-navbar .nav-link:hover,
html[data-theme="dark"] body.parent-module .kinjo-navbar .nav-link:focus-visible,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-action-btn:hover,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-action-btn:focus-visible,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-icon-btn:hover,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-icon-btn:focus-visible,
html[data-theme="dark"] body.parent-module .kinjo-navbar .kj-nav-user:hover,
html[data-theme="dark"] body.parent-module .kinjo-navbar .kj-nav-user:focus-visible,
html[data-theme="dark"] body.parent-module .kinjo-navbar .btn-link:hover,
html[data-theme="dark"] body.parent-module .kinjo-navbar .btn-link:focus-visible,
html[data-theme="dark"] body.parent-module .kinjo-navbar .kj-nav-item.active {
  color: rgb(167, 243, 208) !important;
  background-color: rgba(16, 185, 129, 0.16);
}
html[data-theme="dark"] body.parent-module .kinjo-navbar .nav-link:hover > i,
html[data-theme="dark"] body.parent-module .kinjo-navbar .nav-link:focus-visible > i,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-action-btn:hover i,
html[data-theme="dark"] body.parent-module .kinjo-navbar .navbar-icon-btn:hover i,
html[data-theme="dark"] body.parent-module .kinjo-navbar .btn-link:hover i,
html[data-theme="dark"] body.parent-module .kinjo-navbar .bi-list:hover {
  color: rgb(167, 243, 208) !important;
}
html[data-theme="dark"] body.parent-module .page-header-eyebrow,
html[data-theme="dark"] body.parent-module .page-header-wrap .breadcrumb-item a:hover,
html[data-theme="dark"] body.parent-module .page-header-wrap .breadcrumb-item a:focus-visible {
  color: rgb(167, 243, 208) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. QR WRONG-CHILD GUARD (multi-child attendance)

   A parent with several children can show the gate staff the wrong
   child's code. The defence is one unmistakable identity system: every
   child owns a colour, and that colour wraps everything that belongs to
   them — the child pill, the identity banner glued to the QR frame, and
   the frame border itself. The code for a child who is already checked
   out is not displayed as scannable at all: the frame swaps to a locked
   state naming the child and offering the one-click switch to the child
   still at the gate. Colours are rgb() only (hex budget is spent).
   ═══════════════════════════════════════════════════════════════════════ */

/* Per-child accent hooks — set by the JS as data-accent="0..5". */
[data-accent="0"] { --qr-accent: rgb(2, 132, 199); }
[data-accent="1"] { --qr-accent: rgb(234, 88, 12); }
[data-accent="2"] { --qr-accent: rgb(124, 58, 237); }
[data-accent="3"] { --qr-accent: rgb(5, 150, 105); }
[data-accent="4"] { --qr-accent: rgb(219, 39, 119); }
[data-accent="5"] { --qr-accent: rgb(13, 148, 136); }

/* Identity banner: glued directly to the QR visual, never on its own. */
.qr-hero-identity {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-inline-start: 4px solid var(--qr-accent, rgb(2, 132, 199));
  border-radius: 0.75rem;
  background-color: var(--kinjo-color-bg-active);
  text-align: start;
}
.qr-hero-identity-avatar {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: rgb(255, 255, 255);
  background-color: var(--qr-accent, rgb(2, 132, 199));
}
.qr-hero-identity-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.qr-hero-identity-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--kinjo-color-text-muted, rgb(71, 85, 105));
}
.qr-hero-identity-name {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--kinjo-text-primary, rgb(15, 23, 42));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Frame carries the child's colour so the physical card reads as theirs. */
#qrHeroFrame[data-accent] {
  border: 2px solid var(--qr-accent, rgba(15, 23, 42, 0.08));
  position: relative;
}

/* Child pills: inactive pills wear a small accent dot; the active pill is
   filled with the child's colour so the selection is unmistakable. */
.qr-child-pill::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  margin-inline-end: 0.4rem;
  background-color: var(--qr-accent, rgba(15, 23, 42, 0.25));
}
.qr-child-pill.is-active {
  background-color: var(--qr-accent, rgb(5, 150, 105));
  border-color: var(--qr-accent, rgb(5, 150, 105));
  color: rgb(255, 255, 255);
}
.qr-child-pill.is-active::before {
  background-color: rgb(255, 255, 255);
}

/* Locked state: a checked-out child's code is not shown as scannable. */
.qr-hero-locked {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
  background-color: var(--parent-card-bg);
}
.qr-hero-locked > i {
  font-size: 2rem;
  color: rgb(219, 39, 119);
}
.qr-hero-locked p {
  color: var(--kinjo-text-primary, rgb(15, 23, 42));
  font-weight: 600;
  max-width: 30ch;
}
.qr-hero-switch {
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 999px;
  font-weight: 600;
  color: var(--kinjo-text-primary, rgb(15, 23, 42));
  background-color: var(--kinjo-color-bg-active);
}
.qr-hero-switch:hover:not(:disabled) {
  background-color: rgba(15, 23, 42, 0.08);
}

/* Dedicated QR page (/parent/qr-attendance) shares the same system:
   identity header above the code, chooser when no child was selected. */
.qr-page-identity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}
.qr-page-identity .qr-hero-identity-avatar {
  width: 2.1rem;
  height: 2.1rem;
  font-size: 0.95rem;
}
#childName[data-accent] {
  border-bottom: 3px solid var(--qr-accent, transparent);
  padding-bottom: 0.15rem;
}
.qr-child-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-inline-start: 4px solid var(--qr-accent, rgb(2, 132, 199));
  border-radius: 0.75rem;
  background-color: var(--parent-card-bg);
  color: var(--kinjo-text-primary, rgb(15, 23, 42));
  font-weight: 600;
  text-align: start;
  transition: background-color 0.15s ease;
}
.qr-child-option:hover,
.qr-child-option:focus-visible {
  background-color: var(--kinjo-color-bg-active);
  color: var(--kinjo-text-primary, rgb(15, 23, 42));
}
.qr-child-option .qr-hero-identity-avatar {
  width: 2.1rem;
  height: 2.1rem;
  font-size: 0.95rem;
}
.qr-child-option i.bi-chevron-right {
  margin-inline-start: auto;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .qr-child-option {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   13. MOBILE COLLAPSE ON THE PHOTO HEADER

   kinjo.css paints the collapsed parent menu a white card below 768px
   (its own staff treatment, with dark link text). The photo-header white
   chrome above would render white icons, spans and caret on that white
   card — invisible navigation. Inside the card the chrome reverts to
   dark-on-white; everything outside it stays white on the navy glass.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  body.parent-module .kinjo-navbar .navbar-collapse .nav-link,
  body.parent-module .kinjo-navbar .navbar-collapse .navbar-action-btn,
  body.parent-module .kinjo-navbar .navbar-collapse .navbar-icon-btn,
  body.parent-module .kinjo-navbar .navbar-collapse .btn-link,
  body.parent-module .kinjo-navbar .navbar-collapse .navbar-action-btn span,
  body.parent-module .kinjo-navbar .navbar-collapse .navbar-icon-btn span,
  body.parent-module .kinjo-navbar .navbar-collapse .nav-link > span,
  body.parent-module .kinjo-navbar .navbar-collapse .kj-nav-user,
  body.parent-module .kinjo-navbar .navbar-collapse .kj-nav-user span,
  body.parent-module .kinjo-navbar .navbar-collapse .dropdown-toggle::after {
    color: rgb(33, 53, 71) !important;
  }
  body.parent-module .kinjo-navbar .navbar-collapse .nav-link > i,
  body.parent-module .kinjo-navbar .navbar-collapse .navbar-action-btn i,
  body.parent-module .kinjo-navbar .navbar-collapse .navbar-icon-btn i,
  body.parent-module .kinjo-navbar .navbar-collapse .bi-bell,
  body.parent-module .kinjo-navbar .navbar-collapse .bi-house-door,
  body.parent-module .kinjo-navbar .navbar-collapse .bi-life-preserver {
    color: rgb(33, 53, 71) !important;
    fill: rgb(33, 53, 71);
  }
  body.parent-module .kinjo-navbar .navbar-collapse .nav-link:hover,
  body.parent-module .kinjo-navbar .navbar-collapse .nav-link:focus-visible,
  body.parent-module .kinjo-navbar .navbar-collapse .navbar-action-btn:hover,
  body.parent-module .kinjo-navbar .navbar-collapse .navbar-icon-btn:hover,
  body.parent-module .kinjo-navbar .navbar-collapse .kj-nav-user:hover,
  body.parent-module .kinjo-navbar .navbar-collapse .btn-link:hover {
    color: rgb(17, 72, 166) !important;
    background-color: rgb(238, 244, 255) !important;
  }
  body.parent-module .kinjo-navbar .navbar-collapse .nav-link:hover > i,
  body.parent-module .kinjo-navbar .navbar-collapse .navbar-action-btn:hover i,
  body.parent-module .kinjo-navbar .navbar-collapse .navbar-icon-btn:hover i,
  body.parent-module .kinjo-navbar .navbar-collapse .btn-link:hover i {
    color: rgb(17, 72, 166) !important;
  }
  body.parent-module .kinjo-navbar .navbar-collapse .kj-nav-item.active {
    color: rgb(17, 72, 166) !important;
    background-color: rgb(238, 244, 255);
  }
  body.parent-module .kinjo-navbar .navbar-collapse .kj-nav-avatar {
    color: rgb(4, 120, 87);
    background-color: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
  }
}