/**
 * KinJo - Kindergarten & Childcare Management Platform
 * Professional Design System v2.0
 */

/* ============================================================================
   Anti-FOUC: stat value cells that JS will populate show a skeleton pulse
   instead of a raw "--" placeholder. Once JS writes a real value the class
   .kj-stat-loaded is added and the pulse stops.
   ============================================================================ */
.kj-stat-pending {
  display: inline-block;
  min-width: 3rem;
  height: 1em;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: kj-stat-shimmer 1.4s ease-in-out infinite;
  color: transparent !important;
  vertical-align: middle;
}
@keyframes kj-stat-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================================
   CSS Variables (Design Tokens)
   ============================================================================ */
:root {
  /* Primary Brand Colors */
  --kinjo-primary: var(--kinjo-brand);
  --kinjo-primary-dark: #001f4d;
  --kinjo-primary-light: #eaf2ff;
  --kinjo-primary-50: #f3f7fd;
  --kinjo-secondary: #64748b;
  --kinjo-secondary-dark: #475569;
  --kinjo-success: var(--kinjo-brand);
  --kinjo-success-light: #eaf2ff;
  --kinjo-info: #1e4c9a;
  --kinjo-info-light: #eaf2ff;
  --kinjo-warning: #f59e0b;
  --kinjo-warning-light: #fef3c7;
  --kinjo-danger: #ef4444;
  --kinjo-danger-light: #fee2e2;

  /* Semantic Colors */
  /* Aliased, not copied: this and --kinjo-color-bg-body are the same page canvas,
     and they used to drift — one said #f8fafc while a later rule in this file
     painted body.kinjo-app #f3f6fb, so the admin shell and every other page had
     different backgrounds. dark-mode.css still sets both explicitly for dark. */
  --kinjo-bg-light: var(--kinjo-color-bg-body, #FAF9F6);
  --kinjo-bg-dark: #0f172a;
  --kinjo-text-primary: #1e293b;
  /* The previous slate grey landed at 4.0-4.45:1 on the light tints this token is
     actually used over (pagination chrome, badges, .bg-light buttons) --
     under the 4.5:1 floor in every one of those places. dark-mode.css
     redefines this token separately, so dark surfaces are unaffected. */
  --kinjo-text-secondary: var(--kinjo-color-neutral-text);
  /* was #64748b: 3.9-4.27:1 as text on this file's tinted surfaces */
  --kinjo-text-muted: #475569;
  /* Aliases, not copies — same reason as --kinjo-bg-light above. These held their
     own #e2e8f0 / #f1f5f9 and were free to drift from the tokens they mirror. */
  --kinjo-border-color: var(--kinjo-color-border);
  --kinjo-border-light: var(--kinjo-color-border-subtle);
  --kinjo-surface: #ffffff;
  --kinjo-surface-muted: #f8fafc;
  --kinjo-navbar-height: 64px;

  /* Sidebar */
  --kinjo-sidebar-width: 280px;
  --kinjo-sidebar-bg: #ffffff;

  /* Shadows - Refined depth system */
  --kinjo-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --kinjo-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --kinjo-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --kinjo-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --kinjo-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  --kinjo-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* Border Radius */
  --kinjo-radius-sm: 0.375rem;
  --kinjo-radius: 0.5rem;
  --kinjo-radius-md: 0.75rem;
  --kinjo-radius-lg: 1rem;
  --kinjo-radius-xl: 1.5rem;
  --kinjo-radius-full: 9999px;

  /* Transitions */
  --kinjo-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --kinjo-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --kinjo-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index scale */
  --kinjo-z-dropdown: 1000;
  --kinjo-z-sticky: 1020;
  --kinjo-z-fixed: 1030;
  --kinjo-z-modal-backdrop: 1040;
  --kinjo-z-modal: 1050;
  --kinjo-z-popover: 1060;
  --kinjo-z-tooltip: 1070;
  --kinjo-z-toast: 1080;
}

/* Smooth page transitions */
body.kinjo-app {
  background: var(--kinjo-bg-light);
  color: var(--kinjo-text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="en"] body {
  font-family:
    "Inter",
    -apple-system,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
  line-height: 1.6;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Better selection color */
::selection {
  background: var(--kinjo-primary-light);
  color: var(--kinjo-primary-dark);
}

/* Focus-visible for keyboard navigation only */
:focus-visible {
  outline: 2px solid var(--kinjo-primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link for accessibility — the only definition; see the note further down
   about the duplicate that used to fight this one over the offset side. */
.skip-link {
  position: absolute;
  top: -100%;
  inset-inline-start: 0;
  padding: 0.5rem 1rem;
  background: var(--kinjo-primary);
  color: white;
  z-index: var(--kinjo-z-toast);
  border-radius: 0 0 var(--kinjo-radius-sm) var(--kinjo-radius-sm);
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
  color: white;
}

/* ============================================================================
   Analytics Dashboard Enhancements
   ============================================================================ */

.analytics-dashboard .card {
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.analytics-dashboard .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--kinjo-shadow-md) !important;
}

.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: var(--kinjo-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.rank-circle {
  width: 36px;
  height: 36px;
  border-radius: var(--kinjo-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Enhanced progress bars */
.progress {
  border-radius: var(--kinjo-radius-full);
  overflow: hidden;
  height: 0.5rem;
  background-color: var(--kinjo-border-light);
}

.progress-bar {
  
  border-radius: var(--kinjo-radius-full);
}

/* Table enhancements */
.table-hover tbody tr:hover {
  background-color: var(--kinjo-primary-50);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Chart containers */
.chart-container {
  position: relative;
  min-height: 300px;
}

/* Loading states */
.skeleton-loader {
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* Enhanced buttons */
.btn {
  border-radius: var(--kinjo-radius);
  border: 1px solid var(--kinjo-color-border-subtle);
  font-weight: 600;
  transition: var(--kinjo-transition);
  letter-spacing: 0.01em;
  background: transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--kinjo-color-success);
  border-color: var(--kinjo-color-success);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.btn-primary:hover {
  background: #a7884b;
  border-color: #a7884b;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--kinjo-text-primary);
  border-color: var(--kinjo-color-success);
}

.btn-outline-primary:hover {
  background: var(--kinjo-color-success);
  color: #111827;
  border-color: var(--kinjo-color-success);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.btn-success {
  background: var(--kinjo-success);
  border-color: var(--kinjo-success);
}

.btn-danger {
  /* --kinjo-danger (#ef4444) is the right hue for a danger *surface* -- a
     chart band, a status fill -- but white on it is 3.76:1, and this class is
     used on real controls such as "report an incident" on /safety. The action
     variant keeps the same hue at 5.74:1 with white. */
  background: var(--kinjo-color-danger-action);
  border-color: var(--kinjo-color-danger-action);
}

/* Icon button helper */
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Ghost button style */
.btn-ghost {
  background: transparent;
  border: none;
  color: var(--kinjo-text-secondary);
  padding: 0.375rem 0.75rem;
}

.btn-ghost:hover {
  background: var(--kinjo-border-light);
  color: var(--kinjo-text-primary);
}

/* Modal enhancements */
.modal-content {
  border-radius: var(--kinjo-radius-lg);
  border: none;
  box-shadow: var(--kinjo-shadow-xl);
  overflow: hidden;
}

.modal-header {
  border-radius: 0;
  background: linear-gradient(135deg, var(--kinjo-primary), var(--kinjo-primary-dark));
  color: white;
  border-bottom: none;
  padding: 1.25rem 1.5rem;
}

.modal-header .btn-close {
  filter: brightness(0) invert(1);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  background: var(--kinjo-surface-muted);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .analytics-dashboard .card-body {
    padding: 1rem;
  }

  .icon-circle {
    width: 36px;
    height: 36px;
  }

  .rank-circle {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}

/* Gradient backgrounds for enhanced visual appeal */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--kinjo-primary), var(--kinjo-primary-dark)) !important;
}

/* Enhanced list group items */
.list-group-item {
  border-radius: var(--kinjo-radius) !important;
  margin-bottom: 4px;
  transition: var(--kinjo-transition-fast);
  border-color: var(--kinjo-border-light);
}

.list-group-item:hover {
  background-color: var(--kinjo-surface-muted);
  border-color: var(--kinjo-border-color);
}

/* Enhanced badges */
.badge {
  font-weight: 500;
  border-radius: var(--kinjo-radius-sm);
  letter-spacing: 0.02em;
  /* rem, not Bootstrap's .75em: em compounds against the parent, so a badge
     inside a 14px block rendered at 10.5px on /safety. Arabic loses its dots
     and diacritics before Latin loses anything, so the 12px floor is a
     legibility limit here, not a preference. */
  font-size: 0.75rem;
}

/* Arabic is cursive -- its letters join -- and letter-spacing pulls those
   joins apart, so tracking that flatters Latin small-caps actively damages
   Arabic. The badges carry Arabic on live surfaces (the status word on
   /kpi/dashboard is "ضعيف"), so the tracking above must not apply when the
   document is Arabic. Latin text explicitly marked lang="en" keeps it. */
[dir="rtl"] .badge:not([lang="en"]) {
  letter-spacing: normal;
}

/* Pill badges */
.badge-pill {
  border-radius: var(--kinjo-radius-full);
  padding: 0.35em 0.85em;
}

/* Enhanced tooltips */
.tooltip-inner {
  border-radius: var(--kinjo-radius-sm);
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
}

/* Focus states for accessibility */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  box-shadow: 0 0 0 3px rgba(197,160,89,0.25);
  border-color: var(--kinjo-color-success);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--kinjo-primary);
  box-shadow: 0 0 0 3px rgba(31, 94, 71, 0.15);
}

/* Arabic UI font. Noto Sans Arabic is the only Arabic webfont admin_base.html
   actually loads — Cairo/Tajawal were never fetched anywhere, so this stack used
   to fall through to "Arabic Typesetting", a calligraphic face meant for setting
   classical text, not dense UI. Keep the fallbacks to real UI faces: a display
   face here makes body copy and table data noticeably harder to read. */
[lang="ar"] body,
[dir="rtl"] body {
  font-family:
    "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  line-height: 1.7;
}

.navbar-spacer {
  height: var(--kinjo-navbar-height);
}

.app-layout {
  --bs-gutter-x: 0;
}

.app-main {
  min-height: calc(100vh - var(--kinjo-navbar-height));
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

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

/* ============================================================================
   Sidebar Styles
   ============================================================================ */
.sidebar {
  position: sticky;
  top: var(--kinjo-navbar-height);
  align-self: flex-start;
  height: calc(100vh - var(--kinjo-navbar-height));
  z-index: 1020;
  padding: 0;
  border-inline-end: 1px solid rgba(15, 23, 42, 0.08);
  overflow-y: auto;
}

.sidebar-sticky {
  height: calc(100vh - var(--kinjo-navbar-height));
  padding-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Sidebar component internals (templates/components/sidebar.html)

   2ccf4401 rewrote that component onto these class names and shipped their styles
   in static/css/sidebar-professional.css — but never linked that file from base.html,
   the only template that includes the sidebar. 8bc64640 then removed the file as an
   unreferenced orphan, which it genuinely was. The markup has had no styles since:
   .sidebar-menu kept the browser's default list bullets and indent, and the header and
   profile blocks were unstyled, on all 60 templates that extend base.html.

   These rules live here, next to the .sidebar and .sidebar .nav-link rules they belong
   with, rather than restoring that file: it was written for a CSS Grid shell and a light
   yellow palette that predates the brand-token unification in d532d33f.
   --------------------------------------------------------------------------- */
/* Colours below intentionally track the dark-slate tokens from the "Design Enhancement
   Layer v3.0" further down this file (--kinjo-sidebar-*), which is the authoritative
   sidebar theme: it restyles .sidebar .nav-link to light-on-dark with !important. The
   older light .sidebar rules above are dead weight kept only for the legacy class names.
   The equivalent v3.0 rules for the profile block target .sidebar-user-card /
   .sidebar-role-badge — names 2ccf4401 renamed out of the markup — so they no longer
   match anything either. */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.8rem 0.75rem;
}

.sidebar-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  max-width: 100%;
}

.sidebar-logo img {
  max-width: 100%;
  height: auto;
}

.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  margin-inline: 0.75rem;
  margin-block-end: 0.75rem;
  padding: 0.7rem 0.8rem;
}

.sidebar-profile-avatar {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--kinjo-sidebar-active-text, #a8d4c4);
  background: rgba(31, 94, 71, 0.2);
  border: 1px solid rgba(31, 94, 71, 0.3);
}

/* min-width:0 lets the ellipsis below actually engage inside the flex row */
.sidebar-profile-info {
  min-width: 0;
}

.sidebar-profile-name {
  font-weight: 600;
  font-size: 0.875rem;
  /* #f9fafb is near-white and this sidebar is a light peach ground -- measured
     1.02:1, i.e. the signed-in user's own name was effectively invisible. A
     leftover from when this rail was dark. */
  color: var(--kinjo-color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-role {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-block-start: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--kinjo-sidebar-muted, #cbd5e1);
}

.sidebar-nav {
  padding-block-end: 1rem;
}

/* The bullets and the ~2rem inline indent came from the browser default here. */
.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-section {
  list-style: none;
  margin-block-start: 0.75rem;
  padding-inline: 0.9rem;
}

.sidebar-section .sidebar-section-title {
  margin: 0;
}

.sidebar-divider {
  height: 1px;
  background-color: #e8eef7;
  margin: 0.5rem 1rem;
}

.sidebar-user-card {
  border: 1px solid #e6edf7;
  border-radius: 0.9rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  margin-inline: 0.8rem;
  padding-top: 0.9rem;
}

.sidebar-divider-item,
.sidebar-section-item {
  list-style: none;
}

.sidebar-section-title {
  letter-spacing: 0.03em;
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.sidebar .nav-link {
  font-weight: 500;
  color: #485569;
  padding: 0.68rem 1rem;
  border-radius: 0.8rem;
  margin: 0.15rem 0.8rem;
  font-size: 0.875rem;
  text-align: start;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
}

.sidebar .nav-link:hover {
  background-color: #edf3ff;
  color: #1b67d8;
}

.sidebar .nav-link.active {
  background: #e8f0fe !important;
  color: #0c4a9e !important;
  font-weight: 700 !important;
  border-inline-start: 4px solid var(--kinjo-brand) !important;
  box-shadow: 0 1px 3px rgba(12, 74, 158, 0.08) !important;
}

.sidebar .nav-link i {
  font-size: 1.1rem;
  width: 1.1rem;
  vertical-align: middle;
  opacity: 0.9;
}

.sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

html[lang="en"] .sidebar-section-title {
  font-family: var(--kinjo-font-family-en);
}

[dir="rtl"] .sidebar {
  border-inline-end: 0;
  border-inline-start: 1px solid rgba(15, 23, 42, 0.08);
}

/* ============================================================================
   Navbar Enhancements
   ============================================================================ */
.kinjo-navbar {
  min-height: var(--kinjo-navbar-height);
  background: linear-gradient(120deg, #0f4cbd 0%, #155ecf 55%, #1b67d8 100%);
  box-shadow: 0 8px 20px rgba(13, 48, 115, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.kinjo-navbar .container-fluid {
  min-height: var(--kinjo-navbar-height);
}

.kinjo-navbar .navbar-brand {
  font-size: 1.08rem;
  color: #fff;
}

.kinjo-navbar .navbar-brand:hover {
  color: #fff;
}

.kinjo-brand-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.kinjo-navbar .nav-link {
  color: rgba(255, 255, 255, 0.94);
  border-radius: 0.6rem;
}

.kinjo-navbar .nav-link:hover,
.kinjo-navbar .nav-link:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.14);
}

.kinjo-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.28);
}

.kinjo-navbar .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

.kinjo-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2);
}

.navbar-action-btn,
.navbar-icon-btn {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.94);
  padding: 0.25rem 0.55rem;
  line-height: 1;
}

.navbar-action-btn:hover,
.navbar-icon-btn:hover,
.navbar-action-btn:focus-visible,
.navbar-icon-btn:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.14);
  border-radius: 0.6rem;
}

/* Position the hamburger bi-list icon near the logo on the right & style in gold */
.navbar .bi-list,
.kinjo-navbar .bi-list,
.navbar-icon-btn[data-sidebar-toggle="true"] .bi-list {
  color: #B49B3B !important; /* gold accent */
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}

.navbar-icon-btn[data-sidebar-toggle="true"]:hover .bi-list,
.kinjo-navbar .bi-list:hover {
  color: #cda83e !important;
  transform: scale(1.08);
}

/* Ensure RTL layout consistency */
html[dir="rtl"] .navbar .bi-list,
html[dir="rtl"] .kinjo-navbar .navbar-icon-btn[data-sidebar-toggle="true"] {
  order: -1; /* places icon before/near logo in flex row */
}

/* Parent header items.
   Scoped to .kj-nav-* so only the parent branch of components/navbar.html picks
   these up; staff headers keep the existing .nav-link treatment untouched. */
.kinjo-navbar .kj-nav-item {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.7rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* The active page reads as selected without relying on colour alone: the
   underline carries the same information for anyone who cannot separate the
   white-on-blue tints. */
.kinjo-navbar .kj-nav-item.active {
  background-color: rgba(255, 255, 255, 0.16);
  position: relative;
}

.kinjo-navbar .kj-nav-item.active::after {
  content: "";
  position: absolute;
  inset-inline: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
}

.kinjo-navbar .kj-nav-avatar {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  color: #0f4cbd;
  background-color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 6px rgba(13, 48, 115, 0.25);
}

.kinjo-navbar .kj-nav-user:hover .kj-nav-avatar,
.kinjo-navbar .kj-nav-user:focus-visible .kj-nav-avatar {
  background-color: #eef4ff;
}

/* Bootstrap's RTL build flips dropdown-menu-end correctly, but the caret and
   the icon gutter inside the items need the logical property to follow suit. */
.kinjo-navbar .dropdown-menu .dropdown-item i {
  width: 1.15rem;
  text-align: center;
}

.navbar-search-form .input-group {
  background-color: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12);
}

.navbar-search-form .form-control {
  border: 0;
  background: transparent;
}

.navbar-search-form .form-control::placeholder {
  color: #475569 !important;
  opacity: 1 !important;
}

.navbar-search-form .form-control:focus {
  box-shadow: none;
}

.navbar-search-form .btn {
  border: 0;
  border-radius: 999px;
  margin: 0.22rem;
  background-color: #f0f6ff;
  color: #1d4fa6;
}

.notification-dropdown {
  min-width: 300px;
  max-height: 400px;
  overflow-y: auto;
}

.notification-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.4rem;
}

.sidebar-backdrop {
  position: fixed;
  inset: var(--kinjo-navbar-height) 0 0;
  background: rgba(15, 23, 42, 0.36);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  z-index: 1015;
}

body.sidebar-open .sidebar-backdrop {
  opacity: 1;
  visibility: visible;
}

.sidebar-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* Avatar Styles */
.avatar-sm {
  width: 32px;
  height: 32px;
}

.avatar-md {
  width: 48px;
  height: 48px;
}

.avatar-lg {
  width: 56px;
  height: 56px;
}

/* ============================================================================
   Card Enhancements
   ============================================================================ */
.card {
  border: 1px solid var(--kinjo-border-light);
  box-shadow: var(--kinjo-shadow-xs);
  border-radius: var(--kinjo-radius-md);
  transition: var(--kinjo-transition);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--kinjo-shadow-sm);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--kinjo-border-light);
  font-weight: 600;
  padding: 1rem 1.25rem;
}

.card-body {
  padding: 1.25rem;
}

/* Dashboard Stats Cards */
.stat-card {
  /* The 4px inline-start rule here was decoration: it was --kinjo-primary on
     every card regardless of state, and a second 4px ::before stripe drew the
     same edge again. A thick coloured edge on one side of a card is the tell
     impeccable.style names outright, so the card now carries the ordinary
     component outline and lets its own content say what it is. */
  border: 1px solid var(--kinjo-color-border-subtle);
  background: var(--kinjo-color-bg-surface);
  border-radius: var(--kinjo-radius-md);
}

.stat-card.success {
  background: var(--kinjo-success-light);
}

.stat-card.warning {
  background: var(--kinjo-warning-light);
}

.stat-card.danger {
  background: var(--kinjo-danger-light);
}

.stat-card.info {
  background: var(--kinjo-info-light);
}

.stat-card .stat-icon {
  font-size: 2.5rem;
  opacity: 0.2;
}

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--kinjo-text-primary);
}

.stat-card .stat-label {
  font-size: 0.8125rem;
  color: var(--kinjo-text-muted);
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* System Overview Stats */
.system-stat {
  text-align: center;
  padding: 1rem;
}

.system-stat .system-value {
  font-size: 2rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
  color: var(--kinjo-text-primary);
}

.system-stat .system-label {
  font-size: 0.8125rem;
  color: var(--kinjo-text-muted);
  font-weight: 500;
}

/* ============================================================================
   Table Enhancements
   ============================================================================ */
.table {
  margin-bottom: 0;
  font-size: 0.875rem;
}

.table th {
  font-weight: 600;
  background-color: var(--kinjo-surface-muted);
  border-bottom: 2px solid var(--kinjo-border-color);
  white-space: nowrap;
  color: var(--kinjo-text-secondary);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.75rem 1rem;
}

.table td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.table-hover tbody tr:hover {
  background-color: var(--kinjo-primary-50);
}

/* Data Table Actions */
.table-actions {
  white-space: nowrap;
}

.table-actions .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

/* Sortable Table Headers */
.table th.sortable {
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  position: relative;
  transition: background-color 0.15s ease;
}

.table th.sortable:hover {
  background-color: var(--kinjo-primary-50);
  color: var(--kinjo-primary);
}

.table th.sortable::after {
  content: "\F282";
  font-family: "bootstrap-icons";
  margin-inline-end: 0.5rem;
  opacity: 0.3;
  font-size: 0.75rem;
}

[dir="rtl"] .table th.sortable::after {
  margin-inline-end: 0;
  margin-inline-start: 0.5rem;
}

.table th.sortable.asc::after {
  content: "\F235";
  opacity: 1;
  color: var(--kinjo-primary);
}

.table th.sortable.desc::after {
  content: "\F229";
  opacity: 1;
  color: var(--kinjo-primary);
}

/* Status Badges */
.badge-status {
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  font-weight: 500;
  border-radius: var(--kinjo-radius-full);
}

/* ============================================================================
   Form Enhancements
   ============================================================================ */
.form-label {
  font-weight: 500;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  color: var(--kinjo-text-primary);
}

.form-control,
.form-select {
  border-radius: var(--kinjo-radius);
  border-color: var(--kinjo-border-color);
  transition: var(--kinjo-transition-fast);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
}

.form-control:hover,
.form-select:hover {
  border-color: var(--kinjo-secondary);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--kinjo-primary);
  box-shadow: 0 0 0 3px rgba(31, 94, 71, 0.15);
}

/* Floating Labels Enhancement */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--kinjo-primary);
}

/* Required Field Indicator */
.required::after {
  content: " *";
  color: var(--kinjo-danger);
}

/* Input group polish */
.input-group .form-control,
.input-group .form-select {
  border-radius: var(--kinjo-radius);
}

.input-group-text {
  background: var(--kinjo-surface-muted);
  border-color: var(--kinjo-border-color);
  color: var(--kinjo-text-secondary);
  font-size: 0.875rem;
}

/* Form hint text */
.form-text {
  font-size: 0.8125rem;
  color: var(--kinjo-text-muted);
}

/* Validation styles */
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--kinjo-success);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--kinjo-danger);
}

/* ============================================================================
   Alert Enhancements
   ============================================================================ */
.alert {
  border-radius: var(--kinjo-radius-md);
  border: none;
  font-size: 0.875rem;
}

.alert-success {
  background-color: var(--kinjo-success-light);
  color: var(--kinjo-brand);
}

.alert-danger {
  background-color: var(--kinjo-danger-light);
  color: #991b1b;
}

.alert-warning {
  background-color: var(--kinjo-warning-light);
  color: #92400e;
}

.alert-info {
  background-color: var(--kinjo-info-light);
  color: #001f4d;
}

.alert-container {
  position: fixed;
  top: calc(var(--kinjo-navbar-height) + 8px);
  inset-inline-end: 20px;
  z-index: var(--kinjo-z-toast);
  max-width: 420px;
}

/* ============================================================================
   Loading States
   ============================================================================ */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--kinjo-border-light);
  border-top-color: var(--kinjo-primary);
  border-radius: var(--kinjo-radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Spinning icon glyph (e.g. <i class="bi bi-arrow-repeat bi-spin">), the
   Bootstrap-Icons equivalent of Font Awesome's fa-spin utility. */
.bi-spin {
  display: inline-block;
  animation: spin 1s linear infinite;
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--kinjo-radius-sm);
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ============================================================================
   Dashboard Specific Styles
   ============================================================================ */
.dashboard-header {
  padding: 1.5rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--kinjo-border-color);
}

.quick-actions .btn {
  width: 100%;
  text-align: start;
  padding: 1rem;
}

.quick-actions .btn i {
  font-size: 1.5rem;
}

/* Chart Containers */
.chart-container {
  position: relative;
  height: 300px;
  padding: 1rem;
}

/* ============================================================================
   Enrollment Status Colors
   ============================================================================ */
.status-draft {
  color: var(--kinjo-secondary);
}
.status-submitted {
  color: var(--kinjo-info);
}
.status-pending_review {
  color: var(--kinjo-warning);
}
.status-accepted {
  color: var(--kinjo-success);
}
.status-rejected {
  color: var(--kinjo-danger);
}
.status-active {
  color: var(--kinjo-success);
}
.status-withdrawn {
  color: var(--kinjo-secondary);
}
.status-waitlisted {
  color: var(--kinjo-warning);
}

.bg-status-draft {
  background-color: var(--kinjo-secondary) !important;
}
.bg-status-submitted {
  background-color: var(--kinjo-info) !important;
}
.bg-status-pending {
  background-color: var(--kinjo-warning) !important;
}
.bg-status-accepted {
  background-color: var(--kinjo-success) !important;
}
.bg-status-rejected {
  background-color: var(--kinjo-danger) !important;
}
.bg-status-active {
  background-color: var(--kinjo-success) !important;
}

/* ============================================================================
   KPI Dashboard Styles
   ============================================================================ */
.kpi-card {
  text-align: center;
  padding: 1.5rem;
}

.kpi-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.kpi-label {
  font-size: 0.875rem;
  color: var(--kinjo-text-secondary);
  margin-top: 0.5rem;
}

.kpi-trend {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.kpi-trend.up {
  color: var(--kinjo-success);
}
.kpi-trend.down {
  color: var(--kinjo-danger);
}

/* Governance Score Band Colors */
.band-green {
  color: var(--kinjo-brand);
  background-color: rgba(147, 197, 253, 0.22);
}
.band-amber {
  color: #fd7e14;
  background-color: rgba(253, 126, 20, 0.1);
}
.band-red {
  color: #dc3545;
  background-color: rgba(220, 53, 69, 0.1);
}
.band-insufficient {
  color: #6c757d;
  background-color: rgba(108, 117, 125, 0.1);
}

/* ============================================================================
   Attendance Grid
   ============================================================================ */
.attendance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}

.attendance-cell {
  padding: 0.75rem;
  text-align: center;
  border-radius: 0.375rem;
  border: 1px solid var(--kinjo-border-color);
  cursor: pointer;
  transition: var(--kinjo-transition);
}

.attendance-cell:hover {
  border-color: var(--kinjo-primary);
}

.attendance-cell.present {
  background-color: rgba(25, 135, 84, 0.1);
  border-color: var(--kinjo-success);
}

.attendance-cell.absent {
  background-color: rgba(220, 53, 69, 0.1);
  border-color: var(--kinjo-danger);
}

/* ============================================================================
   Daily Report Form
   ============================================================================ */
.meal-checkbox {
  padding: 1rem;
  border: 1px solid var(--kinjo-border-color);
  border-radius: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: var(--kinjo-transition);
}

.meal-checkbox:hover {
  border-color: var(--kinjo-primary);
}

.meal-checkbox.checked {
  background-color: rgba(31, 94, 71, 0.1);
  border-color: var(--kinjo-primary);
}

.meal-checkbox i {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* ============================================================================
   Empty States
   ============================================================================ */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--kinjo-text-muted);
}

.empty-state i {
  font-size: 4rem;
  opacity: 0.2;
  margin-bottom: 1rem;
  display: block;
}

.empty-state h5 {
  color: var(--kinjo-text-secondary);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.empty-state p {
  max-width: 400px;
  margin: 0 auto;
  color: var(--kinjo-text-muted);
}

/* ============================================================================
   Responsive Adjustments
   ============================================================================ */
@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    top: var(--kinjo-navbar-height);
    bottom: 0;
    height: calc(100vh - var(--kinjo-navbar-height));
    width: min(86vw, 320px);
    max-width: 320px;
    margin: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.26);
    border-inline-end: 1px solid rgba(15, 23, 42, 0.12);
    z-index: 1025;
    padding-top: 0;
  }

  [dir="rtl"] .sidebar {
    /* inset-inline-* already flips with direction, so the base rule above puts the drawer
       on the correct edge in RTL. Re-stating it here inverted (start:auto / end:0) pinned
       the drawer to the left edge instead, and then translateX(102%) slid it toward the
       middle — leaving a permanent sliver of it on screen while "closed". Only the
       transform needs an RTL variant: transforms do not flip with direction. */
    transform: translateX(102%);
    border-inline-end: 0;
    border-inline-start: 1px solid rgba(15, 23, 42, 0.12);
  }

  .sidebar.show,
  /* `[dir="rtl"] .sidebar` (0,2,1) outranks a bare `.sidebar.show` (0,2,0), so without
     an RTL-qualified selector here the drawer keeps its closed transform and never slides
     in on Arabic — which is the default language. */
  [dir="rtl"] .sidebar.show {
    transform: translateX(0);
  }

  .sidebar-sticky {
    height: 100%;
  }

  .stat-card .stat-value {
    font-size: 1.5rem;
  }

  .kpi-value {
    font-size: 1.75rem;
  }

  .chart-container {
    height: 250px;
  }

  .kinjo-navbar .navbar-collapse {
    margin-top: 0.7rem;
    border-radius: 0.9rem;
    padding: 0.7rem;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.22);
  }

  /* Matches the selector shape (and !important) of the desktop
     "white-on-navy" header text rule further down this file, so that rule
     cannot win here on source order alone. Without this, the mobile drawer
     rendered white nav-link text on its own white card background —
     confirmed live: getComputedStyle returned color: rgb(255,255,255) on
     backgroundColor: rgb(255,255,255), i.e. every link here was invisible. */
  .kinjo-navbar .navbar-collapse .navbar-nav > .nav-item > .nav-link,
  .kinjo-navbar .navbar-collapse .nav-link,
  .kinjo-navbar .navbar-collapse .navbar-action-btn {
    color: #213547 !important;
  }

  .kinjo-navbar .navbar-collapse .navbar-nav > .nav-item > .nav-link:hover,
  .kinjo-navbar .navbar-collapse .navbar-nav > .nav-item > .nav-link:focus-visible,
  .kinjo-navbar .navbar-collapse .nav-link:hover,
  .kinjo-navbar .navbar-collapse .navbar-action-btn:hover {
    background-color: #eef4ff !important;
    color: #1148a6 !important;
  }
}

@media (min-width: 768px) {
  .sidebar.collapse {
    display: block !important;
  }
}

/* Responsive layout refinements */
.app-main {
  min-width: 0;
}

.container-fluid {
  max-width: 100%;
}

.page-header-wrap {
  align-items: flex-start;
}

.page-header-actions {
  width: 100%;
  justify-content: flex-start;
}

.alert-container {
  inset-inline-end: 1rem;
  inset-inline-start: 1rem;
  max-width: min(420px, calc(100vw - 2rem));
}

/* Search form lives directly in the navbar header (not inside the
   collapsible menu) so it's always visible. Below `lg` it drops to its own
   full-width row under the brand/toggler row; at `lg`+ it sits inline,
   centered, with a sensible max width. */
.navbar-search-form {
  order: 5;
  flex: 1 0 100%;
  width: 100%;
  max-width: 100%;
  margin-top: 0.5rem;
}

@media (min-width: 992px) {
  .navbar-search-form {
    order: 0;
    flex: 0 1 400px;
    width: auto;
    max-width: 400px;
    margin-top: 0;
    margin-inline: auto;
  }
}

.navbar-search-form .input-group {
  width: 100%;
}

.table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.chart-container {
  position: relative;
  width: 100%;
  min-height: 280px;
  height: min(62vh, 320px);
}

.chart-container--macro {
  height: var(--chart-height, min(62vh, 320px));
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.chart-container.position-relative {
  height: var(--chart-height, min(62vh, 320px));
}

.card .chart-container {
  min-height: 260px;
}

.kpi-card {
  min-width: 0;
}

.kpi-value,
.system-value,
.stat-value,
.display-5 {
  overflow-wrap: anywhere;
}

.msg-preview {
  white-space: normal;
  line-height: 1.55;
}

.text-truncate-2,
.text-truncate-3 {
  max-width: 100%;
}

.avatar-lg {
  width: clamp(3.5rem, 14vw, 5.5rem);
  height: clamp(3.5rem, 14vw, 5.5rem);
}

@media (max-width: 991.98px) {
  .chart-container {
    height: min(54vh, 300px);
  }

  .chart-container--macro {
    height: min(54vh, 300px);
  }

  .chart-container.position-relative {
    height: min(54vh, 300px);
  }

  .card .chart-container {
    min-height: 240px;
  }
}

@media (max-width: 767.98px) {
  .app-main-with-sidebar,
  .app-main-full {
    padding-inline: 0.75rem;
  }

  .page-header-wrap {
    gap: 1rem;
  }

  .page-header-actions {
    flex-direction: column;
  }

  .page-header-actions .btn,
  .page-header-actions .btn-group,
  .page-header-actions .dropdown {
    width: 100%;
  }

  .page-header-actions .btn-group,
  .page-header-actions .btn-group .btn,
  .page-header-actions .dropdown .btn {
    justify-content: center;
  }

  .chart-container {
    min-height: 230px;
    height: 230px;
  }

  .chart-container--macro {
    height: 230px;
  }

  .chart-container.position-relative {
    height: 230px;
  }

  .card .chart-container {
    min-height: 220px;
  }

  .modal-dialog {
    margin: 0.75rem;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-inline: 1rem;
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer .btn {
    width: 100%;
  }

  .notification-dropdown {
    min-width: min(300px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
  }

  .msg-preview {
    max-height: 4.8em;
  }
}

@media (max-width: 575.98px) {
  .chart-container {
    min-height: 210px;
    height: 210px;
  }

  .chart-container--macro {
    height: 210px;
  }

  .chart-container.position-relative {
    height: 210px;
  }

  .card .chart-container {
    min-height: 210px;
  }

  .kpi-value {
    font-size: 1.75rem;
  }

  .metric-value {
    font-size: 1.75rem;
  }

  .status-widget,
  .manager-stat-card,
  .system-stat {
    min-height: 0;
  }
}

/* Print Styles */
@media print {
  .sidebar,
  .navbar,
  .btn,
  .no-print,
  .alert-container,
  .loading-overlay {
    display: none !important;
  }

  main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .card {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }

  .table th {
    background-color: #f0f0f0 !important;
  }

  a[href]::after {
    content: none;
  }
}

/* ============================================================================
   Animation Classes
   ============================================================================ */
.fade-in {
  animation: fadeIn 0.3s ease-out both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Staggered entrance animation for card grids */
.stagger-enter > * {
  opacity: 0;
  transform: translateY(12px);
  animation: staggerFadeIn 0.4s ease-out forwards;
}

.stagger-enter > *:nth-child(1) {
  animation-delay: 0.05s;
}
.stagger-enter > *:nth-child(2) {
  animation-delay: 0.1s;
}
.stagger-enter > *:nth-child(3) {
  animation-delay: 0.15s;
}
.stagger-enter > *:nth-child(4) {
  animation-delay: 0.2s;
}
.stagger-enter > *:nth-child(5) {
  animation-delay: 0.25s;
}
.stagger-enter > *:nth-child(6) {
  animation-delay: 0.3s;
}

@keyframes staggerFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   Breadcrumb Enhancement
   ============================================================================ */
.breadcrumb {
  font-size: 0.8125rem;
  background: none;
  padding: 0;
  margin-bottom: 0;
}

.breadcrumb-item a {
  color: var(--kinjo-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
  color: var(--kinjo-primary);
}

.breadcrumb-item.active {
  color: var(--kinjo-text-secondary);
}

/* Hide breadcrumbs on small screens — GWS responsive guidance: secondary
   navigation aids should not compete for space on mobile. */
@media (max-width: 767.98px) {
  nav[aria-label="Breadcrumb"],
  nav[aria-label="مسار التنقل"] {
    display: none;
  }
}

/* ============================================================================
   Page Header Enhancement
   ============================================================================ */
.page-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--kinjo-border-light);
}

.page-header h1,
.page-header .h2 {
  font-weight: 700;
  color: var(--kinjo-text-primary);
  margin-bottom: 0.25rem;
}

/* ============================================================================
   Dropdown Enhancements
   ============================================================================ */
.dropdown-menu {
  border: 1px solid var(--kinjo-border-light);
  box-shadow: var(--kinjo-shadow-md);
  border-radius: var(--kinjo-radius-md);
  padding: 0.5rem;
  animation: dropdownFade 0.15s ease-out;
}

@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  border-radius: var(--kinjo-radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: var(--kinjo-transition-fast);
}

.dropdown-item:hover {
  background-color: var(--kinjo-primary-50);
  color: var(--kinjo-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--kinjo-primary);
}

.dropdown-divider {
  margin: 0.375rem 0;
  border-color: var(--kinjo-border-light);
}

/* ============================================================================
   Pagination Enhancement
   ============================================================================ */
.pagination .page-link {
  border-radius: var(--kinjo-radius);
  margin: 0 2px;
  border: 1px solid var(--kinjo-border-color);
  color: var(--kinjo-text-secondary);
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  transition: var(--kinjo-transition-fast);
}

.pagination .page-link:hover {
  background-color: var(--kinjo-primary-50);
  border-color: var(--kinjo-primary);
  color: var(--kinjo-primary);
}

.pagination .page-item.active .page-link {
  background-color: var(--kinjo-primary);
  border-color: var(--kinjo-primary);
  /* The active state set a dark brand background and no foreground, so it
     inherited the secondary grey from .page-link above: grey on dark green,
     measured at 1.6:1 on /safety. A background and its foreground are one
     decision; setting only half of the pair is how this happens. */
  color: var(--kinjo-color-text-inverse);
}

/* ============================================================================
   Utility Classes
   ============================================================================ */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 1rem;
}

/* Hover lift effect for interactive cards */
.hover-lift {
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--kinjo-shadow-md);
}

/* Divider with text */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--kinjo-text-muted);
  font-size: 0.8125rem;
  margin: 1.5rem 0;
}

.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kinjo-border-color);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--kinjo-border-color);
  border-radius: var(--kinjo-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--kinjo-text-muted);
}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--kinjo-radius-full);
}

/* ============================================================================
   Utility Classes
   ============================================================================ */
.cursor-pointer {
  cursor: pointer;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.min-h-300 {
  min-height: 300px;
}

.border-dashed {
  border-style: dashed !important;
}

/* Soft Background Colors */
.bg-soft-primary {
  background-color: rgba(31, 94, 71, 0.1) !important;
}
.bg-soft-secondary {
  background-color: rgba(108, 117, 125, 0.1) !important;
}
.bg-soft-success {
  background-color: rgba(25, 135, 84, 0.1) !important;
}
.bg-soft-danger {
  background-color: rgba(220, 53, 69, 0.1) !important;
}
.bg-soft-warning {
  background-color: rgba(255, 193, 7, 0.1) !important;
}

/* ============================================================================
   Page Guide Panel
   ============================================================================ */
#pageGuidePanel {
  background: linear-gradient(135deg, #f3f7fd 0%, #eaf2ff 100%);
  border: 1px solid rgba(31, 94, 71, 0.12);
}

#pageGuidePanel .guide-steps {
  padding-inline-start: 1.5rem;
  margin-bottom: 0.75rem;
}

#pageGuidePanel .guide-steps li {
  margin-bottom: 0.4rem;
}

.field-hint {
  font-size: 0.825rem;
}
.bg-soft-info {
  background-color: rgba(13, 202, 240, 0.1) !important;
}

/* Focus Visible for Accessibility */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--kinjo-color-success);
  outline-offset: 2px;
}

/* .skip-link was defined a second time here. The two definitions disagreed on the
   offset side — the first used `left: 0`, this one `inset-inline-start: 0` — and in
   RTL both applied, pinning the link to left AND right at once so it stretched the
   full width of the viewport when focused. The single definition now lives with the
   other accessibility helpers above and uses the logical property only. */

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Skeleton Loaders
   ============================================================================ */

.skeleton-loader {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

.skeleton-text {
  height: 2rem;
  width: 60px;
  margin: 0;
}

.skeleton-text-sm {
  height: 1rem;
  width: 30px;
  margin: 0;
}

.skeleton-card {
  height: 100px;
  border-radius: 8px;
}

.skeleton-table-row {
  height: 40px;
  margin-bottom: 8px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Hide skeleton when content loads */
.stat-value.loaded .skeleton-loader {
  display: none;
}

/* ============================================================================
   Shared Page Header Utilities
   ============================================================================ */
:root {
  --kinjo-primary-xlight: #f3f7fd;
}

.page-header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kinjo-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

.page-header-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.25rem;
  color: var(--kinjo-text-primary);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ============================================================================
   Shared Typography Utilities
   ============================================================================ */
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.card-title-sm {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--kinjo-text-primary);
}

.section-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--kinjo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================================
   Stat Card Layout Helpers
   ============================================================================ */
.stat-card .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.stat-info {
  flex: 1;
  min-width: 0;
}

.stat-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--kinjo-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* ============================================================================
   Stagger Animation (children variant)
   ============================================================================ */
.stagger-children > * {
  opacity: 0;
  transform: translateY(10px);
  animation: staggerFadeIn 0.4s ease-out forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.04s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.08s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.12s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.16s; }
.stagger-children > *:nth-child(5)  { animation-delay: 0.20s; }
.stagger-children > *:nth-child(6)  { animation-delay: 0.24s; }
.stagger-children > *:nth-child(7)  { animation-delay: 0.28s; }
.stagger-children > *:nth-child(8)  { animation-delay: 0.32s; }
.stagger-children > *:nth-child(9)  { animation-delay: 0.36s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.40s; }
.stagger-children > *:nth-child(11) { animation-delay: 0.44s; }
.stagger-children > *:nth-child(12) { animation-delay: 0.48s; }

/* ============================================================================
   Extended stagger (enter variant, children 7–12)
   ============================================================================ */
.stagger-enter > *:nth-child(7)  { animation-delay: 0.35s; }
.stagger-enter > *:nth-child(8)  { animation-delay: 0.40s; }
.stagger-enter > *:nth-child(9)  { animation-delay: 0.45s; }
.stagger-enter > *:nth-child(10) { animation-delay: 0.50s; }
.stagger-enter > *:nth-child(11) { animation-delay: 0.55s; }
.stagger-enter > *:nth-child(12) { animation-delay: 0.60s; }

/* ============================================================================
   Nav Tabs — Pill variant (used on enrollment, tasks, kindergarten tabs)
   ============================================================================ */
.nav-tabs-pill {
  border-bottom: none;
  gap: 0.25rem;
  background: var(--kinjo-surface-muted);
  border-radius: var(--kinjo-radius-full);
  padding: 0.25rem;
  display: inline-flex;
  flex-wrap: wrap;
}

.nav-tabs-pill .nav-link {
  border: none;
  border-radius: var(--kinjo-radius-full);
  color: var(--kinjo-text-secondary);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.4rem 1rem;
  transition: var(--kinjo-transition-fast);
  white-space: nowrap;
  background: transparent;
}

.nav-tabs-pill .nav-link:hover {
  color: var(--kinjo-primary);
  background: rgba(31, 94, 71, 0.06);
}

.nav-tabs-pill .nav-link.active {
  background: var(--kinjo-surface);
  color: var(--kinjo-primary);
  font-weight: 600;
  box-shadow: var(--kinjo-shadow-sm);
}

.nav-tabs-pill .badge {
  font-size: 0.75rem;
  padding: 0.2em 0.55em;
  border-radius: var(--kinjo-radius-full);
  vertical-align: middle;
}

/* ============================================================================
   Soft badge variants (professional, non-garish status pills)
   ============================================================================ */
.badge-soft {
  font-weight: 600;
  padding: 0.3em 0.75em;
  border-radius: var(--kinjo-radius-full);
  font-size: 0.78rem;
}

.badge-soft-primary   { background: var(--kinjo-primary-light);  color: var(--kinjo-primary-dark); }
.badge-soft-success   { background: var(--kinjo-success-light);   color: var(--kinjo-brand); }
.badge-soft-warning   { background: var(--kinjo-warning-light);   color: #92400e; }
.badge-soft-danger    { background: var(--kinjo-danger-light);    color: #991b1b; }
.badge-soft-info      { background: var(--kinjo-info-light);      color: var(--kinjo-brand); }
.badge-soft-secondary { background: #f1f5f9;                      color: var(--kinjo-text-secondary); }
.badge-soft-purple    { background: rgba(124,58,237,0.12);        color: #6d28d9; }

/* ============================================================================
   Table — Sticky header + skeleton loading rows
   ============================================================================ */
.table-sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--kinjo-surface-muted);
}

.table-skeleton-row td { padding: 0.85rem 1rem; }

.table-skeleton-cell {
  height: 0.85rem;
  border-radius: var(--kinjo-radius-sm);
  background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* ============================================================================
   Alert container — entrance animation from top-right
   ============================================================================ */
.alert-container .alert {
  animation: alertSlideIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes alertSlideIn {
  from { opacity: 0; transform: translateX(14px) translateY(-6px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}

/* ============================================================================
   Input group — seamless icon prefix
   ============================================================================ */
.input-group-icon .input-group-text {
  background: transparent;
  border-inline-end: none;
  color: var(--kinjo-text-muted);
  transition: border-color 0.15s;
}

.input-group-icon .form-control,
.input-group-icon .form-select {
  border-inline-start: none;
  padding-inline-start: 0.375rem;
}

.input-group-icon:focus-within .input-group-text,
.input-group-icon:focus-within .form-control,
.input-group-icon:focus-within .form-select {
  border-color: var(--kinjo-primary);
}

.input-group-icon .form-control:focus,
.input-group-icon .form-select:focus {
  box-shadow: 0 0 0 3px rgba(31, 94, 71, 0.15);
}

/* ============================================================================
   Step Indicator — design-token shadow overrides
   ============================================================================ */
.step-circle {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.step-item.active .step-circle {
  box-shadow: 0 4px 12px rgba(31, 94, 71, 0.25) !important;
}

.step-item.completed .step-circle {
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.22) !important;
}

/* ============================================================================
   Footer
   ============================================================================ */
.bg-surface-muted {
  background-color: var(--kinjo-surface-muted) !important;
}

.footer-link {
  font-size: 0.8125rem;
  color: var(--kinjo-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-link:hover {
  color: var(--kinjo-primary);
  text-decoration: none;
}

.footer-version {
  opacity: 0.55;
}

/* ============================================================================
   KPI Card — band-aware left border (applied via inline style from macro)
   ============================================================================ */
/* Band state is already carried by the pill badge the KPI card renders, so the
   coloured edge was a second copy of the same signal in the shape impeccable.style
   flags. A soft surface tint keeps the at-a-glance read without the tell, and the
   badge remains the non-colour-dependent cue. */
.kpi-card.band-green        { background: var(--kinjo-success-light) !important; }
.kpi-card.band-amber        { background: var(--kinjo-warning-light) !important; }
.kpi-card.band-red          { background: var(--kinjo-danger-light)  !important; }
.kpi-card.band-insufficient { background: var(--kinjo-bg-light)      !important; }

/* ============================================================================
   Breadcrumb size utility
   ============================================================================ */
.breadcrumb-sm { font-size: 0.82rem; }

/* ============================================================================
   Form counter / tiny label utilities
   ============================================================================ */
.form-counter { font-size: 0.75rem; color: var(--kinjo-text-muted); }
.text-xs      { font-size: 0.78rem; }

/* ============================================================================
   Stat icon wrappers — replaces repeated inline background+color styles
   ============================================================================ */
.stat-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--kinjo-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.stat-icon-success { background: rgba(16, 185, 129, 0.12); color: var(--kinjo-success); }
.stat-icon-danger  { background: rgba(239, 68, 68, 0.12);  color: var(--kinjo-danger);  }
.stat-icon-warning { background: rgba(245, 158, 11, 0.12); color: var(--kinjo-warning); }
.stat-icon-info    { background: rgba(47, 125, 98, 0.12);  color: var(--kinjo-info);    }
.stat-icon-primary { background: var(--kinjo-primary-light); color: var(--kinjo-primary); }
.stat-icon-secondary { background: rgba(100,116,139,0.12); color: #64748b; }

/* ============================================================================
   Message list — shared across supervisor/manager messaging pages
   ============================================================================ */
.msg-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--kinjo-border-light);
  transition: background 0.15s;
  cursor: pointer;
}
.msg-item:hover { background: var(--kinjo-bg-light); }
.msg-item.unread {
  /* The tinted background already marks unread; the 3px edge repeated it. */
  background: var(--kinjo-primary-50);
  font-weight: var(--kinjo-font-weight-semibold, 600);
}
.msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--kinjo-primary-light);
  color: var(--kinjo-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.85rem;
}
.msg-preview {
  font-size: 0.8rem;
  color: var(--kinjo-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.msg-time { font-size: 0.75rem; color: var(--kinjo-text-muted); white-space: nowrap; }
.msg-body-content { white-space: pre-line; line-height: 1.7; }

/* Small avatar circles used in child/attendance list rows */
.child-avatar-sm { width:30px;height:30px;border-radius:50%;background:var(--kinjo-primary-xlight);color:var(--kinjo-primary);display:flex;align-items:center;justify-content:center;font-size:0.8rem;flex-shrink:0; }
.att-avatar-sm { width:32px;height:32px;border-radius:50%;background:var(--kinjo-primary-xlight);color:var(--kinjo-primary);display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0; }

/* ============================================================================
   Card band — RTL-safe coloured inline-start border for stat/KPI cards
   ============================================================================ */
/* These were 4px coloured edges applied as a utility -- decoration by
   construction, since the class says nothing about state. They now tint the
   surface. .card-band-purple additionally carried a raw #6f42c1, a sixth brand
   colour in a product whose tokens say not to add a fifth; it maps onto the
   canonical info role instead. */
.card-band-primary { background: var(--kinjo-primary-light) !important; }
.card-band-success { background: var(--kinjo-success-light) !important; }
.card-band-danger  { background: var(--kinjo-danger-light)  !important; }
.card-band-warning { background: var(--kinjo-warning-light) !important; }
.card-band-info    { background: var(--kinjo-info-light)    !important; }
.card-band-purple  { background: var(--kinjo-info-light)    !important; }

/* ============================================================================
   Additional text-colour utilities (non-Bootstrap colours)
   ============================================================================ */
.text-purple { color: #6f42c1 !important; }
.text-amber  { color: #d97706 !important; }

/* ============================================================================
   Badge size variants
   ============================================================================ */
.badge-xs { font-size: 0.75rem; }
.badge-lg { font-size: 1.1rem; padding: 0.375rem 1rem; border-radius: 50px; }

/* ============================================================================
   Progress bar size variant
   ============================================================================ */
.progress-sm { height: 4px !important; border-radius: 0 !important; margin: 0 !important; }

/* ============================================================================
   Table header compact style
   ============================================================================ */
.th-sm { font-size: 0.75rem; font-weight: 700; color: var(--kinjo-text-muted); }

/* ============================================================================
   Whitespace utility
   ============================================================================ */
.ws-pre-line { white-space: pre-line; }

/* ============================================================================
   Cursor utility
   ============================================================================ */
.cursor-pointer { cursor: pointer; }

/* ============================================================================
   Extended border-radius
   ============================================================================ */
.rounded-xl { border-radius: 1.25rem !important; }

/* ============================================================================
   KinJo Design Enhancement Layer v3.0
   Professional polish: dark sidebar, elevated stat cards, refined typography
   ============================================================================ */

/* ── Sidebar: Dark Slate Theme ─────────────────────────────────────────────── */
:root {
  --kinjo-sidebar-bg:       #111827;
  --kinjo-sidebar-text:     #d1d5db;
  --kinjo-sidebar-muted:    #cbd5e1;
  --kinjo-sidebar-border:   rgba(255,255,255,0.06);
  --kinjo-sidebar-hover:    rgba(255,255,255,0.07);
  --kinjo-sidebar-active-bg:#001f4d;
  --kinjo-sidebar-active-text:#a8d4c4;
  --kinjo-sidebar-accent:   #1e4c9a;
}

/* This layer restyles the sidebar's text to light-on-dark (--kinjo-sidebar-text is
   #d1d5db), but --kinjo-sidebar-bg was only ever painted onto .sidebar inside the
   max-width:767.98px block near the end of this file. Above 768px the sidebar therefore
   had no background at all and rendered near-white link text on the page's white surface
   — roughly 1.4:1 contrast. The background belongs at every width, not just on mobile. */
.sidebar {
  background-color: var(--kinjo-sidebar-bg) !important;
  border-inline-end: 1px solid var(--kinjo-sidebar-border) !important;
}
[dir="rtl"] .sidebar {
  border-inline-start: 1px solid var(--kinjo-sidebar-border) !important;
  border-inline-end: 0 !important;
}

.sidebar-user-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0.75rem !important;
  margin-inline: 0.75rem !important;
}
.sidebar-user-card h6 {
  color: #f9fafb !important;
  font-weight: 600;
}
.sidebar-user-card small,
.sidebar-user-card .text-muted {
  color: var(--kinjo-sidebar-muted) !important;
}
.sidebar-user-card .avatar-md {
  background: rgba(0,47,108,0.2) !important;
  border: 1px solid rgba(0,47,108,0.3);
}
.sidebar-user-card .avatar-md i {
  color: #a8d4c4 !important;
}

.sidebar-section-title {
  color: var(--kinjo-sidebar-muted) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.07em !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

.sidebar-divider {
  background-color: var(--kinjo-sidebar-border) !important;
}

.sidebar .nav-link {
  color: var(--kinjo-sidebar-text) !important;
  border-radius: 0.6rem !important;
  margin: 0.1rem 0.65rem !important;
  padding: 0.6rem 0.9rem !important;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar .nav-link i {
  color: var(--kinjo-sidebar-muted) !important;
  font-size: 1.05rem;
  transition: color 0.18s ease;
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
}
.sidebar .nav-link:hover {
  background: var(--kinjo-sidebar-hover) !important;
  color: #f9fafb !important;
}
.sidebar .nav-link:hover i {
  color: #a8d4c4 !important;
}
.sidebar .nav-link.active {
  background: var(--kinjo-sidebar-active-bg) !important;
  color: var(--kinjo-sidebar-active-text) !important;
  font-weight: 600;
  box-shadow: none !important;
}
.sidebar .nav-link.active i {
  color: var(--kinjo-sidebar-accent) !important;
}

/* Role badge in sidebar */
.sidebar-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.sidebar-role-badge.role-admin    { background: rgba(239,68,68,0.15); color: #fca5a5; }
.sidebar-role-badge.role-manager  { background: rgba(245,158,11,0.15); color: #fcd34d; }
.sidebar-role-badge.role-supervisor { background: rgba(0,47,108,0.25); color: #93c5fd; }
.sidebar-role-badge.role-parent   { background: rgba(197,160,89,0.18); color: #c5a059; }

/* ── Navbar Refinements ──────────────────────────────────────────────────── */
.kinjo-navbar {
  background-color: #0f2d6b !important;
  background-image: linear-gradient(135deg, rgba(15,45,107,0.88) 0%, rgba(21,73,184,0.85) 60%, rgba(29,96,224,0.80) 100%), url('/static/images/kinjo-header-background.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 4px 24px rgba(15,45,107,0.35) !important;
}
.kinjo-brand-icon {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}
.kinjo-navbar .navbar-brand {
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  font-size: 1.15rem !important;
}

/* ── Stat Cards: Icon-Block Style ───────────────────────────────────────── */
.stat-card {
  border: 0 !important;
  border-radius: 0.875rem !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.22s ease, transform 0.22s ease !important;
  position: relative;
  overflow: hidden;
}
/* The .stat-card::before stripe was removed with the border above: it drew a
   second 4px coloured edge on the same side of the same card. State now reads
   from the card's tinted surface. */

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 8px 32px rgba(0,0,0,0.07) !important;
  transform: translateY(-2px);
}
.stat-card .card-body {
  padding: 1.25rem 1.25rem 1.25rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  text-align: start !important;
}
.stat-card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
}
.stat-card .stat-value {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--kinjo-text-primary) !important;
  letter-spacing: -0.02em;
}
.stat-card .stat-label {
  font-size: 0.75rem !important;
  color: var(--kinjo-text-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.2rem;
  display: block;
}
.stat-card-body-text { flex: 1; min-width: 0; }

/* Icon color variants */
.stat-card-icon.primary { background: #eaf2ff; color: var(--kinjo-brand); }
.stat-card-icon.success { background: #eaf2ff; color: #002f6c; }
.stat-card-icon.warning { background: #fef3c7; color: #d97706; }
.stat-card-icon.danger  { background: #fee2e2; color: #dc2626; }
.stat-card-icon.info    { background: #eaf2ff; color: #1e4c9a; }
.stat-card-icon.purple  { background: #ede9fe; color: #7c3aed; }

/* ── Card Refinements ──────────────────────────────────────────────────── */
.card {
  border: 1px solid #edf2f7 !important;
  border-radius: 0.875rem !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
.card-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--kinjo-color-border-subtle) !important;
  padding: 1rem 1.25rem !important;
  border-radius: 0.875rem 0.875rem 0 0 !important;
}
.card-title {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--kinjo-text-primary) !important;
  letter-spacing: -0.01em;
}
.card-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--kinjo-color-border-subtle) !important;
  border-radius: 0 0 0.875rem 0.875rem !important;
}

/* ── Attendance Grid: Avatar-Card Style ─────────────────────────────────── */
.attendance-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 0.625rem !important;
}
.attendance-cell {
  border-radius: 0.75rem !important;
  border: 2px solid #e8eef7 !important;
  background: #fff;
  padding: 0.75rem 0.5rem !important;
  cursor: pointer;
  transition: all 0.18s ease !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.attendance-cell:hover {
  border-color: var(--kinjo-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,47,108,0.12);
  transform: translateY(-1px);
}
.attendance-cell .att-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  background: #e8eef7;
  color: var(--kinjo-color-text-secondary);
  flex-shrink: 0;
  margin-bottom: 0.1rem;
  border: 2px solid transparent;
  transition: all 0.18s ease;
}
.attendance-cell .att-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--kinjo-text-secondary);
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.attendance-cell .att-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #d1d5db;
  margin: 0 auto;
}
.attendance-cell.present {
  background: #f0fdf4 !important;
  border-color: var(--kinjo-success) !important;
}
.attendance-cell.present .att-avatar {
  background: #eaf2ff;
  color: #002f6c;
  border-color: rgba(0,47,108,0.2);
}
.attendance-cell.present .att-status-dot { background: var(--kinjo-success); }
.attendance-cell.absent {
  background: #fff5f5 !important;
  border-color: var(--kinjo-danger) !important;
}
.attendance-cell.absent .att-avatar {
  background: #fee2e2;
  color: #dc2626;
  border-color: rgba(220,38,38,0.2);
}
.attendance-cell.absent .att-status-dot { background: var(--kinjo-danger); }
.attendance-cell.late {
  background: #fffbeb !important;
  border-color: var(--kinjo-warning) !important;
}
.attendance-cell.late .att-avatar {
  background: #fef3c7;
  color: #d97706;
}
.attendance-cell.late .att-status-dot { background: var(--kinjo-warning); }
.attendance-cell.checked_out {
  background: #f5f3ff !important;
  border-color: #7c3aed !important;
}
.attendance-cell.checked_out .att-avatar {
  background: #ede9fe;
  color: #7c3aed;
}
.attendance-cell.checked_out .att-status-dot { background: #7c3aed; }

/* ── Quick Action Buttons ───────────────────────────────────────────────── */
.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all 0.18s ease;
  color: var(--kinjo-text-primary);
  background: var(--kinjo-surface);
  width: 100%;
}
.quick-action-btn:hover {
  transform: translateX(4px);
  text-decoration: none;
}
[dir="rtl"] .quick-action-btn:hover { transform: translateX(-4px); }

.quick-action-btn .qa-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.quick-action-btn.qa-success { border-color: #d8e4f2; background: #f3f7fd; color: #002f6c; }
.quick-action-btn.qa-success:hover { border-color: var(--kinjo-success); box-shadow: 0 2px 12px rgba(0,47,108,0.18); }
.quick-action-btn.qa-success .qa-icon { background: #eaf2ff; color: #002f6c; }

.quick-action-btn.qa-primary { border-color: #d8e4f2; background: #f3f7fd; color: #001f4d; }
.quick-action-btn.qa-primary:hover { border-color: var(--kinjo-primary); box-shadow: 0 2px 12px rgba(0,47,108,0.18); }
.quick-action-btn.qa-primary .qa-icon { background: #eaf2ff; color: var(--kinjo-brand); }

.quick-action-btn.qa-info { border-color: #d8e4f2; background: #f3f7fd; color: #001f4d; }
.quick-action-btn.qa-info:hover { border-color: var(--kinjo-info); box-shadow: 0 2px 12px rgba(30,76,154,0.18); }
.quick-action-btn.qa-info .qa-icon { background: #eaf2ff; color: #1e4c9a; }

.quick-action-btn.qa-warning { border-color: #fef3c7; background: #fffbeb; color: #78350f; }
.quick-action-btn.qa-warning:hover { border-color: var(--kinjo-warning); box-shadow: 0 2px 12px rgba(217,119,6,0.18); }
.quick-action-btn.qa-warning .qa-icon { background: #fef3c7; color: #d97706; }

.quick-action-btn.qa-danger { border-color: #fee2e2; background: #fff5f5; color: #7f1d1d; }
.quick-action-btn.qa-danger:hover { border-color: var(--kinjo-danger); box-shadow: 0 2px 12px rgba(220,38,38,0.18); }
.quick-action-btn.qa-danger .qa-icon { background: #fee2e2; color: #dc2626; }
.quick-action-btn.qa-secondary { border-color: #e2e8f0; background: #f8fafc; color: #475569; }
.quick-action-btn.qa-secondary:hover { border-color: #94a3b8; box-shadow: 0 2px 12px rgba(71,85,105,0.14); }
.quick-action-btn.qa-secondary .qa-icon { background: #f1f5f9; color: #64748b; }

/* ── Page Header ────────────────────────────────────────────────────────── */
.page-header-wrap {
  position: relative;
  background-color: #002f6c;
  background-image: 
    linear-gradient(135deg, rgba(0, 47, 108, 0.68) 0%, rgba(0, 31, 77, 0.58) 100%),
    url('/static/images/kinjo-header-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  box-shadow: 0 4px 15px rgba(0, 47, 108, 0.12);
  color: #ffffff;
}
.page-header-title {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 0.25rem !important;
  letter-spacing: -0.02em;
}
.page-header-wrap .text-muted,
.page-header-wrap .breadcrumb-item,
.page-header-wrap .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.85) !important;
}
.page-header-wrap .breadcrumb-item a:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
  border-radius: 0.25rem;
}
.page-header-wrap .breadcrumb-item.active {
  color: #c5a059 !important;
  font-weight: 700;
}



/* ── Table Refinements ──────────────────────────────────────────────────── */
.table th {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kinjo-text-muted) !important;
  background: #f8fafc !important;
  border-bottom: 2px solid #edf2f7 !important;
}
.table tbody tr {
  transition: background 0.12s ease;
}
.table tbody tr:hover {
  background: #f8faff !important;
}
.table-responsive {
  border-radius: 0.75rem;
  overflow: hidden;
}

/* ── Alert / Banner ─────────────────────────────────────────────────────── */
.alert-primary {
  background: linear-gradient(135deg, #f3f7fd 0%, #eaf2ff 100%) !important;
  border: 1px solid #b8cde5 !important;
  color: #001f4d !important;
  border-radius: 0.875rem !important;
}
.alert-success {
  background: linear-gradient(135deg, #f3f7fd 0%, #eaf2ff 100%) !important;
  border: 1px solid #b8cde5 !important;
  color: #002f6c !important;
  border-radius: 0.875rem !important;
}
.alert-warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 100%) !important;
  border: 1px solid #fde68a !important;
  color: #78350f !important;
  border-radius: 0.875rem !important;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-soft {
  font-weight: 600;
}

/* ── Form Controls ──────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: 0.625rem !important;
  border-color: var(--kinjo-color-border) !important;
  font-size: 0.9rem !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--kinjo-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,47,108,0.12) !important;
}
.form-label {
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  color: var(--kinjo-text-secondary) !important;
  margin-bottom: 0.4rem !important;
}

/* ── Btn Refinements ───────────────────────────────────────────────────── */
.btn {
  border-radius: 0.625rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: all 0.18s ease !important;
}
.btn-primary {
  background: linear-gradient(135deg, var(--kinjo-brand), #001f4d) !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,47,108,0.35) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1e4c9a, var(--kinjo-brand)) !important;
  box-shadow: 0 4px 12px rgba(0,47,108,0.4) !important;
  transform: translateY(-1px);
}
.btn-success {
  background: linear-gradient(135deg, #002f6c, #001f4d) !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,47,108,0.35) !important;
}
.btn-success:hover {
  background: linear-gradient(135deg, #001f4d, #002f6c) !important;
  transform: translateY(-1px);
}
.btn-outline-primary {
  border-color: #d8e4f2 !important;
  color: var(--kinjo-brand) !important;
  background: #f3f7fd !important;
}
.btn-outline-primary:hover {
  background: #eaf2ff !important;
  border-color: var(--kinjo-primary) !important;
  transform: translateY(-1px);
}
.btn-sm { padding: 0.4rem 0.85rem !important; font-size: 0.8125rem !important; }
.btn-lg { padding: 0.75rem 1.5rem !important; font-size: 1rem !important; }

/* ── List Group ─────────────────────────────────────────────────────────── */
.list-group-item {
  border-color: var(--kinjo-color-border-subtle) !important;
  transition: background 0.15s ease !important;
}
.list-group-item:hover { background: #f3f7fd !important; }
.list-group-flush .list-group-item:first-child { border-top: 0 !important; }

/* ── KPI Cards ──────────────────────────────────────────────────────────── */
.kpi-card {
  border-radius: 0.875rem !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.03) !important;
  border: 1px solid #edf2f7 !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.kpi-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 8px 32px rgba(0,0,0,0.06) !important;
  transform: translateY(-2px);
}
.kpi-value {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
.kpi-label {
  font-size: 0.775rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Dropdown ────────────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid #e8eef7 !important;
  border-radius: 0.875rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  padding: 0.5rem !important;
}
.dropdown-item {
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 0.75rem !important;
  transition: background 0.12s ease !important;
}
.dropdown-item:hover { background: #f3f7fd !important; }
.dropdown-item:active { background: #eaf2ff !important; color: #001f4d !important; }
.dropdown-divider { margin: 0.35rem 0 !important; border-color: var(--kinjo-color-border-subtle) !important; }

/* ── Modal Refinements ──────────────────────────────────────────────────── */
.modal-content {
  border: 0 !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
}
.modal-header {
  border-bottom: 1px solid var(--kinjo-color-border-subtle) !important;
  padding: 1.25rem 1.5rem !important;
}
.modal-footer {
  border-top: 1px solid var(--kinjo-color-border-subtle) !important;
  padding: 1rem 1.5rem !important;
  background: #f8fafc !important;
  border-radius: 0 0 1.25rem 1.25rem !important;
}

/* ── Empty State ─────────────────────────────────────────────────────────── */
.empty-state {
  padding: 3.5rem 2rem !important;
}
.empty-state i {
  font-size: 3.5rem !important;
  opacity: 0.15 !important;
  color: var(--kinjo-color-text-muted);
  display: block;
  margin-bottom: 1.25rem !important;
}

/* ── Welcome Banner ─────────────────────────────────────────────────────── */
.welcome-banner {
  background: linear-gradient(135deg, #001f4d 0%, var(--kinjo-brand) 50%, #1e4c9a 100%);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  border: 0 !important;
  box-shadow: 0 4px 24px rgba(0,47,108,0.3) !important;
}
.welcome-banner::before {
  content: '';
  position: absolute;
  inset-inline-end: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.welcome-banner::after {
  content: '';
  position: absolute;
  inset-inline-start: -40px;
  bottom: -80px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.welcome-banner h5, .welcome-banner .h5 { color: #fff !important; font-weight: 700; }
.welcome-banner p, .welcome-banner span, .welcome-banner small { color: rgba(255,255,255,0.85) !important; }

/* ── Progress Bars ──────────────────────────────────────────────────────── */
.progress {
  border-radius: 999px !important;
  height: 6px !important;
  background: #e8eef7 !important;
}
.progress-bar {
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--kinjo-primary), #1e4c9a) !important;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  border: 0 !important;
  border-radius: 0.875rem !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb-item a { color: var(--kinjo-primary) !important; text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--kinjo-text-muted) !important; }

/* ── Scroll & Layout polish ─────────────────────────────────────────────── */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* ── Responsive sidebar dark override ──────────────────────────────────── */
@media (max-width: 767.98px) {
  .sidebar {
    background-color: var(--kinjo-sidebar-bg) !important;
    border: 0 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3) !important;
  }
}

/* ── Spinner refinement ─────────────────────────────────────────────────── */
.spinner-border { border-width: 0.15em; }

/* body.kinjo-app's background was declared twice in this file: once near the top
   from --kinjo-bg-light, and again here as a hardcoded #f3f6fb with !important to
   beat it. The !important also meant dark mode could not flip the page canvas on
   any non-admin page. The single declaration is the token-driven one above. */

/* ── Animated stat counter ──────────────────────────────────────────────── */
@keyframes kj-count-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-value-animate { animation: kj-count-in 0.4s ease both; }

/* ── Card hover lift on dashboard ──────────────────────────────────────── */
.card-hover {
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.card-hover:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.10) !important;
  transform: translateY(-3px);
}

/* ── Section dividers in content ────────────────────────────────────────── */
.content-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
  margin: 1.5rem 0;
}

/* ============================================================================
   Brand alignment: header logo, nav alignment/RTL, sidebar palette
   ============================================================================
   The gold-bordered logo badge only ever existed in admin_design_system.css,
   which base.html does not load. On every non-admin page the same
   .kinjo-logo--navbar markup therefore rendered as a bare image with no badge
   and no height lock — it also sized itself from --admin-header-height, a token
   that is not defined outside the admin shell, so the box fell back to the img
   width/height attributes. These rules give the shared header the same
   treatment, bound to --kinjo-navbar-height instead.
   ============================================================================ */

:root {
  --kinjo-gold: #d4af37;
  --kinjo-gold-deep: #b8912a;
  --kinjo-logo-blue-top: #1b4f96;
  --kinjo-logo-blue-bottom: #10356b;
}

.kinjo-navbar .kinjo-logo--navbar {
  /* Square badge locked to the header height, as the admin header does it, so
     the mark scales with the bar instead of being sized by the img attributes.
     object-fit keeps the square artwork undistorted. */
  block-size: var(--kinjo-navbar-height);
  inline-size: var(--kinjo-navbar-height);
  box-sizing: border-box;
  padding: 4px;
  object-fit: contain;
  border: 2px solid var(--kinjo-gold);
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    var(--kinjo-logo-blue-top) 0%,
    var(--kinjo-logo-blue-bottom) 100%
  );
  /* Inner gold hairline reads as a bevelled edge. Drawn with box-shadow so the
     box geometry — and therefore the header-height lock above — is untouched. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 2px var(--kinjo-gold-deep),
    0 2px 8px rgba(6, 19, 39, 0.24);
}

.kinjo-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  padding-block: 0;
  padding-inline: 0;
  margin-inline-start: 0;
  margin-inline-end: 0.75rem;
}

/* The badge sits flush against the edge where the header colour begins. The
   12px it stood off by was .container-fluid's own gutter padding
   (--bs-gutter-x / 2), not anything in the brand itself, so the padding is
   dropped on the leading side only — the trailing side keeps its gutter so the
   account menu does not collide with the window edge. */
.kinjo-navbar > .container-fluid {
  padding-inline-start: 0;
}

/* A gold hairline under the bar ties the header to the badge, rather than
   leaving the logo as the only gold element on a plain blue band.

   padding-block: 0 is load-bearing, not cosmetic. Bootstrap's .navbar carries
   0.5rem of vertical padding, so a badge sized to the full header height would
   push the bar to 80px while .navbar-spacer stays at 64px — the fixed header
   would then overlap the top of every page. Removing the padding lets the badge
   sit flush at exactly --kinjo-navbar-height, as it does in the admin shell.

   The hairline is an inset shadow rather than a border for the same reason: a
   border is added to the box, which pushed the bar to 65px against a 64px
   .navbar-spacer and left the header covering 1px of every page. An inset
   shadow paints inside the box, so the bar stays exactly the header height. */
.kinjo-navbar {
  /* The earlier .kinjo-navbar rule sets a 1px translucent-white border-bottom;
     that border is what made the bar 65px. Clearing it here is what keeps the
     header and its spacer the same height. */
  border-bottom: 0;
  padding-block: 0;

  /* Shared approved header artwork. The navy glass layer keeps controls
     readable while leaving the photograph recognizable beneath it. */
  background-color: #002f6c !important;
  background-image: linear-gradient(rgba(0, 47, 108, .70), rgba(0, 31, 77, .56)), url('/static/images/kinjo-header-background.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow:
    inset 0 -1px 0 rgba(197, 160, 89, .72),
    0 4px 18px rgba(0, 31, 77, .30) !important;
}

/* ── Header nav alignment (RTL-safe) ──────────────────────────────────────────
   Spacing came from Bootstrap ms-1/me-1 utilities on the label, which puts the
   gap on a logical side of the *text* rather than between icon and text. In RTL
   that read as uneven leading space and the labels did not line up with one
   another. Spacing now comes from flex `gap` on the link, which is
   direction-agnostic, so الرئيسية / الأسئلة الشائعة / خريطة الموقع align
   identically in both directions. */
.kinjo-navbar .navbar-nav {
  align-items: center;
  gap: 0.15rem;
}

/* The nav list carries Bootstrap's .ms-auto, i.e. margin-inline-start: auto,
   which pushes the whole menu to the far inline-end. In RTL that stranded it
   against the left edge with a ~790px void between it and the logo. The list
   now spans the free space instead, so its contents can be split deliberately:
   navigation stays with the logo, utilities go to the far side. */
.kinjo-navbar .navbar-nav.ms-auto {
  margin-inline: 0 !important;
  flex: 1 1 auto;
}

/* Split point. Everything from this item on — the language toggle and the
   account menu — is pushed to the inline-end, which is the LEFT in RTL.
   Notifications / الرئيسية / المساعدة stay grouped beside the logo on the
   right, so the header has a navigation side and a utilities side rather than
   one undifferentiated run. */
.kinjo-navbar .navbar-nav > .kj-nav-tail {
  margin-inline-start: auto;
}

/* Header foreground sits on the navy overlay, so white is the readable default. */
.kinjo-navbar .navbar-nav > .nav-item > .nav-link,
.kinjo-navbar .navbar-action-btn,
.kinjo-navbar .navbar-icon-btn,
.kinjo-navbar .navbar-brand {
  color: #ffffff !important;
}

.kinjo-navbar .navbar-nav > .nav-item > .nav-link:hover,
.kinjo-navbar .navbar-nav > .nav-item > .nav-link:focus-visible,
.kinjo-navbar .navbar-action-btn:hover,
.kinjo-navbar .navbar-icon-btn:hover,
.kinjo-navbar .navbar-action-btn:focus-visible,
.kinjo-navbar .navbar-icon-btn:focus-visible {
  color: #ffffff !important;
  background-color: rgba(197, 160, 89, .18) !important;
}

.kinjo-navbar .navbar-nav > .nav-item > .nav-link.active {
  background-color: rgba(197, 160, 89, .24) !important;
}

.kinjo-navbar .kj-nav-item.active::after {
  background-color: #c5a059;
}

/* The toggler remains a readable white control on the navy photo overlay. */
.kinjo-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, .35);
}

.kinjo-navbar .navbar-toggler-icon {
  filter: none;
}

/* The gold avatar badge carries the brand accent against the navy header. */
.kinjo-navbar .kj-nav-avatar {
  color: #002f6c;
  background-color: #c5a059;
  border-color: rgba(255, 255, 255, 0.75);
}

.kinjo-navbar .kj-nav-user:hover .kj-nav-avatar,
.kinjo-navbar .kj-nav-user:focus-visible .kj-nav-avatar {
  background-color: #e8d697;
}

/* The staff search sat as a white pill on a dark band. On a light band it needs
   a defined edge or it dissolves into the header. */
.kinjo-navbar .navbar-search-form .input-group {
  border: 1px solid rgba(255, 255, 255, .28);
}

/* min-block-size gives every item the same box height. Without it the language
   toggle (a <button>, with its own UA line-height) and the account link resolve
   to different heights, and centring different-height boxes leaves their text
   on visibly different lines. */
.kinjo-navbar .navbar-nav > .nav-item > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: 2.5rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.6rem;
  white-space: nowrap;
  font-size: 0.95rem;
  line-height: 1.2;
}

/* The avatar is 2rem tall, so with the shared 0.45rem block padding the account
   link stands 6px taller than its neighbours and its text sits off their line.
   Trimming the block padding brings it back to the same 2.5rem box. This has to
   live after the rule above — same specificity, so source order decides. */
.kinjo-navbar .navbar-nav > .nav-item > .nav-link.kj-nav-user {
  padding-block: 0.25rem;
}

/* The utility margins are now redundant; neutralise them so they cannot
   reintroduce the asymmetry this block exists to remove. */
.kinjo-navbar .navbar-nav > .nav-item > .nav-link > .ms-1,
.kinjo-navbar .navbar-nav > .nav-item > .nav-link > .me-1 {
  margin-inline: 0 !important;
}

/* The staff account link carries an .avatar-sm circle instead of the parent's
   .kj-nav-avatar. Sizing it to 1.6rem makes that link 40px tall too
   (1.6rem + 2 x 0.45rem padding = 2.5rem), so every header item shares one
   line for staff as well as for parents. Done by sizing rather than :has() so
   it does not depend on selector support. */
.kinjo-navbar .navbar-nav > .nav-item > .nav-link > .avatar-sm {
  inline-size: 1.6rem;
  block-size: 1.6rem;
  flex: 0 0 auto;
}

/* Icons share one optical column so the labels start on the same line. */
.kinjo-navbar .navbar-nav > .nav-item > .nav-link > i {
  inline-size: 1.25rem;
  text-align: center;
  flex: 0 0 auto;
}

.kinjo-navbar .dropdown-menu {
  border: 0;
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(6, 19, 39, 0.18);
  padding-block: 0.4rem;
}

.kinjo-navbar .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.5rem;
  border-radius: 0.4rem;
  margin-inline: 0.35rem;
  inline-size: auto;
  transition: padding-inline-start 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

/* Hovering a dropdown item nudges its text inward (a logical property, so the
   nudge is toward the trailing edge in both RTL and LTR) and switches to the
   brand-primary color, on top of the existing background tint below. */
.kinjo-navbar .dropdown-item:hover,
.kinjo-navbar .dropdown-item:focus-visible {
  padding-inline-start: 1rem;
  color: var(--kinjo-primary-dark);
}

/* ── Header nav: mega-menu (الخدمات) and governorates grid ───────────────────
   .hover-bg is the reusable hover treatment for a top-level header link. The
   header itself is a navy photo band (see .kinjo-navbar background-image
   above), so its "primary" accent is the gold already used for the active/
   hover states on this bar, not --kinjo-primary (a blue that would nearly
   vanish against navy-on-navy). */
.kinjo-navbar .hover-bg:hover,
.kinjo-navbar .hover-bg:focus-visible {
  background-color: rgba(197, 160, 89, 0.18);
}

/* Bootstrap's .rounded-pill sets border-radius directly on the element, but
   the descendant rule at .kinjo-navbar .navbar-nav > .nav-item > .nav-link
   (higher specificity, no !important) already claims border-radius: 0.6rem.
   This re-asserts the pill shape for any nav-link that opts in. */
.kinjo-navbar .navbar-nav > .nav-item > .nav-link.rounded-pill {
  border-radius: 50rem !important;
}

/* Services mega-menu: wide enough for three columns side by side, so a
   parent, a manager and a supervisor each see their own list rather than one
   long scroll. data-bs-popper="static" on the markup drops Popper's dynamic
   placement in favor of this fixed width/position, which is what a mega-menu
   anchored to one toggle needs. */
.kinjo-navbar .kj-mega-menu {
  inline-size: min(56rem, 92vw);
  inset-inline-start: 0;
}

/* A vertical rule between columns reads as three grouped lists rather than
   one long one that happens to wrap; skipped on the first column so there is
   no rule against the menu's own edge. */
.kinjo-navbar .kj-mega-col + .kj-mega-col {
  border-inline-start: 1px solid rgba(6, 19, 39, 0.08);
  padding-inline-start: 1.5rem;
}

@media (max-width: 991.98px) {
  /* Below the navbar-expand-lg breakpoint the whole nav collapses into the
     hamburger drawer, where the menu already stacks full-width — the fixed
     desktop width would otherwise force horizontal scrolling in the drawer. */
  .kinjo-navbar .kj-mega-menu {
    inline-size: 100%;
  }
  .kinjo-navbar .kj-mega-col + .kj-mega-col {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

/* Governorates: 12 items as a two-column grid (.row.g-2 / .col-6 in the
   markup) instead of one 12-row list, so the menu grows sideways and never
   needs its own scrollbar. */
.kinjo-navbar .kj-gov-menu {
  inline-size: min(24rem, 92vw);
}

.kinjo-navbar .kj-gov-menu .dropdown-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desktop hover-to-open: kinjo-app.js calls bootstrap.Dropdown's own
   show()/hide() on mouseenter/mouseleave for screens >= 992px, which keeps
   aria-expanded and the .show class correct — a bare ":hover { display }"
   rule would show the menu visually without Bootstrap ever knowing it was
   open, leaving aria-expanded stale and desyncing the next click. Below
   992px the toggle keeps Bootstrap's default click behavior for touch.
   The fade-in itself reuses the existing sitewide @keyframes dropdownFade,
   already wired to .dropdown-menu.show a few hundred lines up — the hover
   path opens through the same .show class, so no separate animation rule is
   needed here. */

/* ── Sidebar: red wave, white text ────────────────────────────────────────────
   Replaces the dark-slate field. The wave runs #A80019 → #CC0022 → #E4002B.

   These are pure-chroma reds, not the earlier brick tones, and that is what
   makes them read as vivid: #DC2626 carries 38 of both green and blue, while
   #E4002B drops green to zero. It is the more saturated colour and it holds
   white marginally better at the same time (4.85:1 against 4.83:1).

   White is the text colour throughout: 7.9 / 5.9 / 4.85:1 across the stops. The
   wave stops here because this is the ceiling — #EF4444 puts white at 3.76:1
   and #F01B2D at 4.29:1, both below AA. Anything brighter needs dark text.

   The v3.0 layer paints .sidebar with background-color and !important, so the
   wave has to be set as background-image at the same weight to land. */
:root {
  --kinjo-sidebar-bg: #ffc9bb;
  --kinjo-sidebar-text: #3f241f;
  --kinjo-sidebar-muted: rgba(63, 36, 31, 0.74);
  --kinjo-sidebar-border: rgba(63, 36, 31, 0.14);
  --kinjo-sidebar-hover: rgba(130, 65, 54, 0.12);
  --kinjo-sidebar-active-bg: #efaa9b;
  --kinjo-sidebar-active-text: #3f241f;
  --kinjo-sidebar-accent: #873d32;
}

.sidebar {
  /* The wave sheen darkens rather than lightens, and that is a contrast
     decision, not a taste one. A white sheen over this rail composites #DC2626
     up to rgb(226,77,77), where white text falls to 3.89:1 — below AA — and it
     still failed at 4.30:1 with the alpha dropped to 0.10, because the bright
     end of the wave has almost no headroom to give. Darkening moves every
     pixel the other way, so the worst case stays the bare #DC2626 at 4.83:1
     and the rail keeps its curve. */
  background-image:
    radial-gradient(120% 90% at 5% 100%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(160deg, #ffd9cf 0%, #ffc9bb 55%, #f6b5a5 100%) !important;
  background-color: #ffc9bb !important;
}

/* Active row: a deeper red fill (white on it is 10.4:1) plus a gold edge, so
   the current page is marked by more than fill colour alone. */
.sidebar .nav-link.active {
  box-shadow: inset 3px 0 0 0 #873d32 !important;
}

[dir="rtl"] .sidebar .nav-link.active {
  box-shadow: inset -3px 0 0 0 #873d32 !important;
}

/* Section labels and dividers were tuned for the slate field; on red they need
   to lean on white rather than the old cool greys. */
.sidebar .sidebar-section-title,
.sidebar .sidebar-heading {
  color: rgba(63, 36, 31, 0.72) !important;
}

.sidebar .sidebar-profile {
  background: rgba(255, 255, 255, 0.44);
  border-color: rgba(63, 36, 31, 0.12);
}

.sidebar .sidebar-profile-avatar {
  background: var(--kinjo-color-bg-surface);
  color: var(--kinjo-color-sidebar-accent);
}

/* The light navigation surface retains readable dark text in the
   utility/sidebar rules that were originally tuned for a dark rail. */
.sidebar .nav-link:hover { color: var(--kinjo-color-sidebar-ink) !important; }
.sidebar .nav-link:hover i { color: var(--kinjo-color-sidebar-accent) !important; }
.sidebar-user-card h6 { color: var(--kinjo-color-sidebar-ink) !important; }
.sidebar-user-card small,
.sidebar-user-card .text-muted { color: rgba(63, 36, 31, .72) !important; }

/* ── Sidebar logo: same width as the menu items ───────────────────────────────
   .kinjo-logo--sidebar was a fixed 120px inside the rail, so the mark sat as a
   small island above full-width menu rows. The nav links use
   `margin: 0.15rem 0.8rem`, so matching that inline padding here makes the logo
   box exactly as wide as a menu item. */
.sidebar-header {
  padding-inline: 0;
  padding-block: 0.9rem 0.75rem;
}

.sidebar-logo {
  inline-size: 100%;
  justify-content: center;
}

/* Mirrors the menu rows exactly. The margin to match is 0.65rem, not the
   0.8rem in the older .sidebar .nav-link rule above: the v3.0 layer restyles
   the rows with `margin: 0.1rem 0.65rem !important`, and that is what actually
   wins. Matching the 0.8rem left the logo 4.8px narrower than every row. */
.sidebar .kinjo-logo--sidebar {
  margin-inline: 0.65rem;
  inline-size: calc(100% - 1.3rem);
  block-size: auto;
  max-inline-size: none;
  box-sizing: border-box;
  padding: 0.6rem;
  border-radius: 0.85rem;
  /* A light panel, not the old blue tint: the artwork is blue-and-gold and a
     blue wash on the red rail turned it muddy. */
  border: 1px solid rgba(244, 215, 124, 0.55);
  background: rgba(255, 255, 255, 0.14);
}

/* ---- MFA QR image -------------------------------------------------------
   Sizing lives here rather than in a style attribute on the tag. The element
   ships with a transparent 1x1 placeholder and the real QR is set by JS, so it
   must never render as a broken-image box; the fixed box also reserves space
   so revealing it causes no layout shift. */
.mfa-qr-image {
  max-width: 220px;
  height: auto;
}

/* ---- Error-page status code ---------------------------------------------
   Was a gradient clipped through the text (linear-gradient + background-clip:
   text). Gradient text is decoration that carries no meaning and is one of the
   anti-patterns impeccable.style names outright, so the numeral is a solid
   brand colour instead.

   Also drops font-weight 800: no 800 face is loaded anywhere in this product,
   so the browser was synthesising it. 700 is a real, loaded weight. */
.error-code {
  font-size: clamp(3.5rem, 12vw, 6rem);
  line-height: 1;
  font-weight: 700;
  color: var(--kinjo-brand);
  display: inline-block;
}

/* ---------------------------------------------------------------------------
   Accessible foregrounds for Bootstrap's tint utilities.

   Bootstrap pairs a saturated brand colour with a very light tint of itself
   (.text-warning on .bg-warning-subtle, .text-success on .bg-success-subtle).
   Those pairs are decorative, not legible: measured in Chromium on
   /kpi/dashboard, the amber pair renders at 1.47:1 and .text-warning on a
   white card at 1.63:1, against a 4.5:1 requirement for
   text this size. The numbers in those badges are enrolment percentages --
   the actual content of the page.

   These map the foreground onto the semantic tokens that were derived for
   exactly this job, each measured against the surface it sits on. Kept in
   kinjo.css because all three shells (base, admin_base, manager_base) load
   it, whereas admin_design_system.css never reaches /kpi/dashboard.

   !important is required, not lazy: these compete with Bootstrap's own
   single-class utilities, and losing the cascade here means the declaration
   silently does nothing.
   --------------------------------------------------------------------------- */
.text-warning,
.badge.bg-warning-subtle.text-warning,
.text-warning-emphasis {
  color: var(--kinjo-color-warning-text-on-tint) !important;
}

.badge.bg-success-subtle.text-success,
.text-success-emphasis {
  color: var(--kinjo-color-success-text-on-tint) !important;
}

.badge.bg-danger-subtle.text-danger,
.text-danger-emphasis,
.badge.badge-lg {
  color: var(--kinjo-color-danger-text-strong) !important;
}

.badge.bg-light.text-secondary,
.btn.text-secondary,
.badge.bg-secondary-subtle {
  color: var(--kinjo-color-neutral-text) !important;
}

/* White on Bootstrap's danger red is 3.76:1. This is the "report an incident"
   button on /safety, so it is the one control on the page that must not be
   hard to read. Overriding the button's own custom properties keeps hover and
   focus states derived from the same colour instead of fighting them. */
/* Bootstrap's outline-secondary foreground is 4.45:1 on the light
   panel it sits in on /safety -- just under the floor, on a control ("clear
   filters") rather than decoration. */
/* Bootstrap's outline-success foreground measures 4.34:1 on the very
   light grounds these pages use -- a miss of 4%, on a control. */
.btn-outline-success {
  --bs-btn-color: var(--kinjo-color-success-text);
  --bs-btn-hover-bg: var(--kinjo-color-success-text);
  --bs-btn-hover-border-color: var(--kinjo-color-success-text);
}

.btn-outline-secondary {
  --bs-btn-color: var(--kinjo-color-neutral-text);
  --bs-btn-hover-bg: var(--kinjo-color-neutral-text);
  --bs-btn-hover-border-color: var(--kinjo-color-neutral-text);
}

/* Bootstrap's outline variants paint the FILL value as the foreground, which is
   the one thing the palette says never to do. Two of them reach live controls:

     .btn-outline-warning  amber fill on the near-white admin canvas = 1.62:1
     .btn-outline-danger   red fill on the light manager panel      = 4.33:1

   The first is the bulk "تعليق" (suspend) control and the per-row reset-password
   icons on /admin/users; the second is "إزالة" (remove) on /manager/supervisors.
   Both are destructive actions, so they are the last things on the page that
   should be hard to read. Measured identically in Chromium, Firefox and WebKit,
   so this is the colour, not an engine artifact.

   These two surfaces were simply never in the audit's route list, which is why
   four earlier sweeps reported zero. */
.btn-outline-warning {
  --bs-btn-color: var(--kinjo-color-warning-text);
  --bs-btn-border-color: var(--kinjo-color-warning-text);
  --bs-btn-hover-bg: var(--kinjo-color-warning-text);
  --bs-btn-hover-border-color: var(--kinjo-color-warning-text);
  --bs-btn-active-bg: var(--kinjo-color-warning-text);
  --bs-btn-active-border-color: var(--kinjo-color-warning-text);
}

.btn-outline-danger {
  --bs-btn-color: var(--kinjo-color-danger-text-strong);
  --bs-btn-border-color: var(--kinjo-color-danger-text-strong);
  --bs-btn-hover-bg: var(--kinjo-color-danger-text-strong);
  --bs-btn-hover-border-color: var(--kinjo-color-danger-text-strong);
  --bs-btn-active-bg: var(--kinjo-color-danger-text-strong);
  --bs-btn-active-border-color: var(--kinjo-color-danger-text-strong);
}

/* `code` inherits Bootstrap's 0.875em, and on /admin/users it sits inside a
   <small> that is itself 0.875em: 14 x .875 x .875 = 10.72px, under the 12px
   floor where Arabic loses its dots. Identical failure to `.badge`, which
   compounded to 10.5px for the same reason. rem cannot compound. */
code {
  font-size: var(--kinjo-font-size-xs);
}

.btn-danger {
  --bs-btn-bg: var(--kinjo-color-danger-action);
  --bs-btn-border-color: var(--kinjo-color-danger-action);
  --bs-btn-hover-bg: var(--kinjo-color-danger-text-strong);
  --bs-btn-hover-border-color: var(--kinjo-color-danger-text-strong);
  --bs-btn-active-bg: var(--kinjo-color-danger-text-strong);
  --bs-btn-active-border-color: var(--kinjo-color-danger-text-strong);
}

/* ---------------------------------------------------------------------------
   Arabic tracking invariant.

   Arabic is a cursive script: its letters join, and CSS Text says a UA should
   not insert spacing where that would sever a cursive connection.

   MEASURED, because the obvious story turned out to be wrong. Chromium honours
   that rule completely: at 32px, letter-spacing:4px adds +0.00px to the advance
   width of a joined word, to a word containing non-joiners, and to Arabic-Indic
   digits. It only lands where the run is not cursive -- +8px across two word
   spaces, +16px on the Latin in "KPI لوحة". So the tracking on these selectors
   was NOT breaking joins in Chromium; it was widening word gaps slightly and
   tracking Latin fragments embedded in Arabic strings.

   The rule stays for three reasons, none of which is "joins were breaking":
   a declaration that does nothing inside Arabic words is noise that invites
   someone to "fix" it by raising the value; the effects it DOES have -- uneven
   word gaps, tracked Latin inside an Arabic sentence -- are unwanted; and
   suppression inside cursive runs is engine behaviour this project has only
   verified in Chromium (WebKit and Firefox were not installed to test).

   Measured in Chromium across 18 routes before writing this rule: 142 Arabic
   text nodes were receiving non-normal tracking, from 25 distinct CSS rules --
   .table th (18 nodes, 0.05em), .sidebar-section-title (13, 0.07em !important),
   .card-title (11, -0.01em), .text-label-bold (7), .kpi-label (6),
   #rankingsTable th (6, 0.08em), .page-header-title (5, -0.02em),
   .stat-card .stat-label (4), .status-chip (3), .filter-label (2, 0.09em) and
   fifteen more with one node each.

   Fixing 25 rules one at a time would fix today's 142 nodes and none of
   tomorrow's, so this states the invariant instead: in an RTL document, text
   has normal tracking. Two escapes keep it honest rather than absolute --
   lang="en" for genuinely Latin content, and .allow-tracking for a case that
   has been proved in a browser to need it. Neither exists in the codebase
   today, which is the point: tracking on Arabic should have to be argued for.

   The LTR/English UI is untouched; nothing below this selector applies there.

   !important is load-bearing, not lazy: two of the 25 rules
   (.sidebar-section-title and .kpi-value) declare tracking !important
   themselves, and a guard that loses to them would silently do nothing --
   which is exactly the class of failure this workstream kept hitting.

   Enforced by tests/test_arabic_typography.py, which fails on any Arabic node
   that renders with non-normal tracking and carries a synthetic control
   proving the check still catches a real violation.
   --------------------------------------------------------------------------- */
[dir="rtl"] *:not([lang="en"]):not([lang="en"] *):not(.allow-tracking):not(.allow-tracking *) {
  letter-spacing: normal !important;
}

/* .text-warning is mapped to a dark amber for light surfaces (see above), which
   inverts on a dark one: on the supervisor welcome banner's navy it measured
   1.55:1. Dark panels that carry .text-warning need the on-dark variant, and
   they have to be named -- CSS cannot ask whether a background is dark. */
.welcome-banner-v2 .text-warning,
.welcome-banner-v2 .text-warning i {
  color: var(--kinjo-color-warning-on-dark) !important;
}

/* ── KinJo Brand Header & Navigation ─────────────────────────────────────── */
.kinjo-public-header {
  background-color: var(--kinjo-brand) !important;
  background-image: linear-gradient(rgba(0, 47, 108, 0.56), rgba(0, 31, 77, 0.42)), url('/static/images/kinjo-header-background.jpg') !important;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--kinjo-color-text-inverse) !important;
  box-shadow: 0px 8px 24px rgba(0, 31, 77, 0.22) !important;
}
.kinjo-public-header nav a,
.kinjo-public-header nav button {
  color: var(--kinjo-color-text-inverse) !important;
  transition: all 0.2s ease-in-out;
}
.kinjo-public-header nav a:hover,
.kinjo-public-header nav button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.kinjo-public-header .nav-active-indicator {
  color: var(--kinjo-color-gold-soft) !important;
  border-bottom: 2px solid var(--kinjo-color-gold-soft);
}

/* ── Modal / Dialog Backdrop Filter (60% Black + 4px Blur) ──────────────── */
.modal-backdrop-blur {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ── Login Required Dialog Styling (Material UI compliant) ───────────────── */
.login-dialog-container {
  background-color: var(--kinjo-color-bg-surface) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}
.login-dialog-title {
  color: var(--kinjo-brand) !important;
  font-weight: 600 !important;
  font-size: 1.35rem !important;
}
.login-dialog-body {
  color: var(--kinjo-color-neutral-text) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}
.login-dialog-btn-primary {
  background-color: var(--kinjo-brand) !important;
  color: var(--kinjo-color-text-inverse) !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease;
}
.login-dialog-btn-primary:hover {
  background-color: var(--kinjo-action) !important;
}
.login-dialog-btn-secondary {
  background-color: transparent !important;
  border: 2px solid var(--kinjo-brand) !important;
  color: var(--kinjo-brand) !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.login-dialog-btn-secondary:hover {
  background-color: rgba(0, 47, 108, 0.08) !important;
}