/* ============================================================
   CIRROSTRATUS BRAND OVERRIDE — cirrostratus-brand.css
   Tango Lima Professional Services
   "Educate. Aviate. Validate."
   
   Loads AFTER main.e9ba2dcd.css to override the default theme.
   Brand colors derived from official Cirrostratus assets.
   ============================================================ */

/* -----------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (BRAND TOKENS)
   ----------------------------------------------------------- */
:root {
  /* Primary Palette */
  --cs-navy:        #1F4E79;
  --cs-navy-dark:   #163A5C;
  --cs-navy-deeper: #0F2A44;
  --cs-steel:       #4682B4;
  --cs-steel-light: #5A9BC8;
  --cs-sky:         #6AAFE6;
  --cs-sky-light:   #8DC4F0;
  
  /* Accent Palette */
  --cs-bronze:      #B8860B;
  --cs-gold:        #D4A017;
  --cs-gold-light:  #E8C54A;
  --cs-teal:        #2E8B57;
  --cs-teal-light:  #3DA86E;
  --cs-slate:       #405A7D;
  
  /* Neutrals */
  --cs-white:       #FFFFFF;
  --cs-off-white:   #F4F7FB;
  --cs-light-gray:  #E8EDF4;
  --cs-mid-gray:    #94A3B8;
  --cs-dark-gray:   #475569;
  --cs-charcoal:    #1E293B;
  
  /* Semantic */
  --cs-success:     #2E8B57;
  --cs-warning:     #D4A017;
  --cs-error:       #DC2626;
  --cs-info:        #4682B4;
  
  /* Surfaces */
  --cs-page-bg:     #EFF4F9;
  --cs-card-bg:     #FFFFFF;
  --cs-sidebar-bg:  #1F4E79;
  --cs-header-bg:   #FFFFFF;
  --cs-table-header: #1F4E79;
  
  /* Shadows */
  --cs-shadow-sm:   0 1px 3px rgba(31, 78, 121, 0.08);
  --cs-shadow-md:   0 4px 12px rgba(31, 78, 121, 0.10);
  --cs-shadow-lg:   0 8px 30px rgba(31, 78, 121, 0.12);
  --cs-shadow-xl:   0 20px 50px rgba(31, 78, 121, 0.15);
  
  /* Override the app theme variables */
  --app-bg:         #1F4E79;
  --app-hover:      #163A5C;
  --app-text:       #1F4E79;
  --app-primary-color: #FFFFFF;
}


/* -----------------------------------------------------------
   2. GLOBAL RESETS & BASE
   ----------------------------------------------------------- */

/* Body background */
body {
  background-color: var(--cs-page-bg) !important;
  color: var(--cs-charcoal);
}

/* Override the default font stack - keep Poppins, refine fallbacks */
* {
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

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

/* Selection color */
::selection {
  background-color: var(--cs-steel);
  color: var(--cs-white);
}


/* -----------------------------------------------------------
   3. TOP BANNER BAR (Super Admin bar)
   ----------------------------------------------------------- */

/* The role banner at top - uses inline backgroundColor so we need !important */
.fixed.top-0.left-0.right-0.z-50,
div.fixed.top-0.left-0.right-0.z-50 {
  background-color: var(--cs-navy-deeper) !important;
  background-image: linear-gradient(135deg, var(--cs-navy-deeper) 0%, var(--cs-navy) 100%) !important;
}

/* Also catch via height */
.h-\[30px\].fixed.top-0 {
  background-color: var(--cs-navy-deeper) !important;
  background-image: linear-gradient(135deg, var(--cs-navy-deeper) 0%, var(--cs-navy) 100%) !important;
}

.bg-red-700,
.bg-\[\#C41E3A\],
header .bg-red-700 {
  background-color: var(--cs-navy-deeper) !important;
  background-image: linear-gradient(135deg, var(--cs-navy-deeper) 0%, var(--cs-navy) 100%) !important;
}


/* -----------------------------------------------------------
   4. HEADER / TOP NAVIGATION
   ----------------------------------------------------------- */

/* Main header bar */
header.fixed,
header.sticky,
.bg-white.shadow-lg.fixed {
  background-color: var(--cs-header-bg) !important;
  border-bottom: 2px solid var(--cs-light-gray) !important;
  box-shadow: var(--cs-shadow-sm) !important;
}

/* Profile avatar border */
.border-\[\#1b468a\] {
  border-color: var(--cs-navy) !important;
}

/* Profile hover */
.hover\:bg-\[\#1b468a\]\/10:hover {
  background-color: rgba(31, 78, 121, 0.10) !important;
}

/* Dashboard title */
.bg-\[\#1b468a\] {
  background-color: var(--cs-navy) !important;
}

/* Hamburger menu icon */
.text-gray-700 {
  color: var(--cs-dark-gray) !important;
}

/* Profile dropdown menu — text & icons must be white on dark bg
   Dropdown structure: div.absolute.right-0.z-50.mt-2.w-56.bg-app.rounded-lg.shadow-xl
     > div.py-1
       > a.text-app (Profile)
       > button.text-app (Logout)
   The .text-app class sets navy color; override to white inside dropdown */
div.absolute.z-50.w-56.bg-app {
  color: var(--cs-white) !important;
}

div.absolute.z-50.w-56.bg-app .text-app,
div.absolute.z-50.w-56.bg-app a.text-app,
div.absolute.z-50.w-56.bg-app button.text-app,
div.absolute.z-50.w-56.bg-app a,
div.absolute.z-50.w-56.bg-app button,
div.absolute.z-50.w-56.bg-app span,
div.absolute.z-50.w-56.bg-app div {
  color: var(--cs-white) !important;
}

div.absolute.z-50.w-56.bg-app a:hover,
div.absolute.z-50.w-56.bg-app button:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--cs-white) !important;
}

/* Dropdown icons — force white fill/stroke */
div.absolute.z-50.w-56.bg-app svg,
div.absolute.z-50.w-56.bg-app svg.text-app,
div.absolute.z-50.w-56.bg-app svg path {
  color: var(--cs-white) !important;
  fill: var(--cs-white) !important;
}


/* -----------------------------------------------------------
   5. SIDEBAR NAVIGATION
   ----------------------------------------------------------- */

/* Sidebar container - apply navy gradient */
/* The sidebar uses bg-app class and inline --app-bg variable */
.bg-app,
[class*="bg-app"],
.fixed.left-0.top-0.h-full.bg-app,
div.fixed.left-0.top-0.h-full {
  background-color: var(--cs-sidebar-bg) !important;
  background-image: linear-gradient(180deg, 
    var(--cs-navy-deeper) 0%, 
    var(--cs-navy) 40%, 
    var(--cs-slate) 100%
  ) !important;
}

/* Sidebar menu items */
.menu-item {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: all 0.2s ease !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
}

/* Menu hover state */
.menu-hover:hover,
.menu-item:hover {
  background-color: rgba(70, 130, 180, 0.3) !important;
  color: var(--cs-white) !important;
}

/* Active menu item */
.menu-active {
  background-color: var(--cs-steel) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(70, 130, 180, 0.35) !important;
}

.menu-active,
.menu-active a,
.menu-active span {
  color: var(--cs-white) !important;
}

/* Sidebar logo area */
.sidebar img[alt="Logo"],
.h-48.w-48 img,
header img[alt*="logo" i],
header img[alt*="Logo" i] {
  filter: none !important;
}

/* Sidebar text colors */
.text-app {
  color: var(--cs-navy) !important;
}

/* Sidebar scrollbar */
.bg-app::-webkit-scrollbar,
[class*="bg-app"]::-webkit-scrollbar {
  width: 4px;
}

.bg-app::-webkit-scrollbar-thumb,
[class*="bg-app"]::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.bg-app::-webkit-scrollbar-track,
[class*="bg-app"]::-webkit-scrollbar-track {
  background-color: transparent;
}


/* -----------------------------------------------------------
   6. MAIN CONTENT AREA
   ----------------------------------------------------------- */

/* Page background */
.bg-bgcolor,
main.bg-bgcolor {
  background-color: var(--cs-page-bg) !important;
}

/* Page titles */
h1.text-3xl,
.text-3xl.font-bold {
  color: var(--cs-navy) !important;
  background: none !important;
  -webkit-text-fill-color: var(--cs-navy) !important;
}

/* Dashboard title specific override */
.bg-\[\#1b468a\].bg-clip-text.text-transparent {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--cs-navy) !important;
  color: var(--cs-navy) !important;
}

/* Section headings */
h2, h3 {
  color: var(--cs-charcoal);
}

/* Subtitle / description text */
.text-gray-500,
.text-darktext {
  color: var(--cs-dark-gray) !important;
}


/* -----------------------------------------------------------
   7. CARDS & PANELS
   ----------------------------------------------------------- */

/* Dashboard stat cards */
.bg-white.rounded-lg,
.bg-white.rounded-xl,
.bg-white.shadow,
.bg-white.shadow-md,
.bg-white.shadow-lg {
  background-color: var(--cs-card-bg) !important;
  border: 1px solid var(--cs-light-gray) !important;
  border-radius: 12px !important;
  box-shadow: var(--cs-shadow-sm) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.bg-white.rounded-lg:hover,
.bg-white.rounded-xl:hover,
.bg-white.shadow:hover,
.bg-white.shadow-md:hover,
.bg-white.shadow-lg:hover {
  box-shadow: var(--cs-shadow-md) !important;
  transform: translateY(-1px);
}

/* Card headings */
.text-xl.font-semibold,
.text-lg.font-semibold,
.font-semibold.text-gray-800 {
  color: var(--cs-charcoal) !important;
}


/* -----------------------------------------------------------
   8. TABLES
   ----------------------------------------------------------- */

/* Table header row */
th.border,
thead th,
.bg-\[\#0A2245\],
.bg-\[\#0a2245\],
.bg-\[\#0D2D5E\],
.bg-\[\#0d2d5e\],
th[class*="bg-"] {
  background-color: var(--cs-navy) !important;
  color: var(--cs-white) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
}

/* Table header borders */
th.border:first-child {
  border-left: 1px solid var(--cs-navy) !important;
  border-top-left-radius: 8px !important;
}

th.border:last-child {
  border-right: 1px solid var(--cs-navy) !important;
  border-top-right-radius: 8px !important;
}

/* Table body */
.table-line {
  border-color: var(--cs-light-gray) !important;
}

td.border:first-child {
  border-left: 1px solid var(--cs-light-gray) !important;
}

td.border:last-child {
  border-right: 1px solid var(--cs-light-gray) !important;
}

/* Table row hover */
tr:hover td {
  background-color: rgba(70, 130, 180, 0.04) !important;
}

/* Table text */
.text-tabletext {
  color: var(--cs-dark-gray) !important;
}

/* Table wrapper */
.custom_table_wrapper {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: var(--cs-shadow-sm) !important;
}


/* -----------------------------------------------------------
   9. BUTTONS
   ----------------------------------------------------------- */

/* Primary buttons */
.bg-\[\#1b468a\],
button.bg-\[\#1b468a\],
a.bg-\[\#1b468a\],
[class*="bg-blue-600"],
[class*="bg-blue-700"],
.bg-blue-600,
.bg-blue-700 {
  background-color: var(--cs-navy) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
}

.bg-\[\#1b468a\]:hover,
button.bg-\[\#1b468a\]:hover,
.bg-blue-600:hover,
.bg-blue-700:hover,
.hover\:bg-\[\#1b468a\]\/90:hover {
  background-color: var(--cs-navy-dark) !important;
  box-shadow: 0 4px 12px rgba(31, 78, 121, 0.25) !important;
  transform: translateY(-1px);
}

/* Success/Green buttons */
.bg-green-600,
.bg-green-700,
.bg-emerald-500 {
  background-color: var(--cs-teal) !important;
}

.bg-green-600:hover,
.bg-green-700:hover,
.bg-emerald-500:hover {
  background-color: var(--cs-teal-light) !important;
}

/* Warning/Orange buttons */
.bg-yellow-500,
.bg-orange-500,
.bg-amber-500 {
  background-color: var(--cs-bronze) !important;
}

/* Danger/Red buttons - keep red but refine */
.bg-red-600,
.bg-red-500 {
  background-color: var(--cs-error) !important;
  border-radius: 8px !important;
}

/* Logout button */
.logout-btn {
  background-color: var(--cs-error) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.logout-btn:hover {
  background-color: #B91C1C !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
}

/* All button border radius consistency */
button,
[type="button"],
[type="submit"],
a[role="button"] {
  border-radius: 8px;
}

/* Focus rings */
.focus\:ring-\[\#1b468a\]:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--cs-steel) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.2) !important;
}


/* -----------------------------------------------------------
   10. FORM INPUTS
   ----------------------------------------------------------- */

/* Input fields */
.bg-inputbg,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
  background-color: var(--cs-off-white) !important;
  border-color: var(--cs-light-gray) !important;
  border-radius: 8px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Input focus */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--cs-steel) !important;
  --tw-ring-color: var(--cs-steel) !important;
  box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.15) !important;
}

/* Input border color override */
.border-inputborder {
  border-color: var(--cs-steel-light) !important;
}

/* Search inputs */
input[type="search"],
input[placeholder*="Search"] {
  background-color: var(--cs-off-white) !important;
  border: 1px solid var(--cs-light-gray) !important;
  border-radius: 10px !important;
  padding-left: 12px !important;
}

/* Checkboxes and radios */
[type="checkbox"]:checked,
[type="radio"]:checked {
  background-color: var(--cs-navy) !important;
  border-color: var(--cs-navy) !important;
}


/* -----------------------------------------------------------
   11. LOGIN PAGE
   ----------------------------------------------------------- */

/* Login page background */
.min-h-screen.bg-cover.bg-center {
  background-image: none !important;
  background-color: var(--cs-navy-deeper) !important;
  background-image: 
    radial-gradient(ellipse at 30% 20%, rgba(70, 130, 180, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(46, 139, 87, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--cs-navy-deeper) 0%, var(--cs-navy) 50%, var(--cs-slate) 100%) !important;
}

/* Login card */
.bg-gradient-to-b.from-light_blue {
  background: var(--cs-white) !important;
  border: 1px solid var(--cs-light-gray) !important;
  box-shadow: var(--cs-shadow-xl) !important;
  border-radius: 20px !important;
}

.from-light_blue {
  --tw-gradient-from: var(--cs-off-white) !important;
}

/* Login heading */
.text-maincolor,
h3.text-maincolor {
  color: var(--cs-navy) !important;
}

/* Login form labels */
.text-gray-700 {
  color: var(--cs-dark-gray) !important;
}

/* Login submit button */
.bg-\[\#1b468a\] {
  background-color: var(--cs-navy) !important;
}


/* -----------------------------------------------------------
   12. STATUS BADGES & PILLS
   ----------------------------------------------------------- */

/* Role badges */
.bg-blue-100 {
  background-color: rgba(70, 130, 180, 0.12) !important;
}

.text-blue-800 {
  color: var(--cs-navy) !important;
}

.bg-green-100 {
  background-color: rgba(46, 139, 87, 0.12) !important;
}

.text-green-800 {
  color: var(--cs-teal) !important;
}

.bg-yellow-100,
.bg-amber-100 {
  background-color: rgba(184, 134, 11, 0.12) !important;
}

.text-yellow-800 {
  color: var(--cs-bronze) !important;
}

/* Generic badge styling */
span.rounded-full,
.inline-flex.rounded-full {
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}


/* -----------------------------------------------------------
   13. PIE CHARTS / DATA VISUALIZATION
   ----------------------------------------------------------- */

/* The dashboard pie chart card titles */
.text-xl.font-semibold,
h2.text-xl {
  color: var(--cs-navy) !important;
  font-weight: 600 !important;
}


/* -----------------------------------------------------------
   14. MODAL / DIALOG OVERRIDES
   ----------------------------------------------------------- */

/* Modal backdrop */
.fixed.inset-0.bg-black\/50,
.fixed.inset-0[class*="bg-black"] {
  background-color: rgba(15, 42, 68, 0.6) !important;
  backdrop-filter: blur(4px) !important;
}

/* Modal container */
.bg-white.rounded-lg.shadow-xl,
.bg-white.rounded-2xl {
  border-radius: 16px !important;
  box-shadow: var(--cs-shadow-xl) !important;
}


/* -----------------------------------------------------------
   15. LOADING INDICATOR
   ----------------------------------------------------------- */

/* Loader circle */
.loader-gif {
  background-color: var(--cs-navy) !important;
  box-shadow: 0 0 20px rgba(31, 78, 121, 0.3) !important;
}

.loading-text {
  color: var(--cs-navy) !important;
  font-weight: 500 !important;
}


/* -----------------------------------------------------------
   16. TOOLTIPS & POPOVERS
   ----------------------------------------------------------- */

[role="tooltip"] {
  background-color: var(--cs-charcoal) !important;
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
}


/* -----------------------------------------------------------
   17. TOAST NOTIFICATIONS
   ----------------------------------------------------------- */

.Toastify__toast {
  border-radius: 10px !important;
  box-shadow: var(--cs-shadow-md) !important;
}


/* -----------------------------------------------------------
   18. SCROLLBARS (GLOBAL)
   ----------------------------------------------------------- */

/* Show a subtle scrollbar */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

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

::-webkit-scrollbar-thumb {
  background-color: var(--cs-mid-gray);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--cs-dark-gray);
}


/* -----------------------------------------------------------
   19. RESPONSIVE REFINEMENTS
   ----------------------------------------------------------- */

@media (max-width: 768px) {
  /* Mobile sidebar overlay */
  .fixed.inset-0.z-40 .bg-app {
    background-image: linear-gradient(180deg,
      var(--cs-navy-deeper) 0%,
      var(--cs-navy) 100%
    ) !important;
  }
  
  /* Mobile header */
  header.fixed {
    box-shadow: var(--cs-shadow-md) !important;
  }
  
  /* Mobile cards */
  .bg-white.rounded-lg,
  .bg-white.rounded-xl {
    border-radius: 10px !important;
  }
}


/* -----------------------------------------------------------
   20. ANIMATION & POLISH
   ----------------------------------------------------------- */

/* Subtle page transitions */
main {
  animation: fadeIn 0.3s ease-out;
}

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

/* Link hover colors */
a:hover {
  color: var(--cs-steel);
}

/* Dividers */
hr,
.border-gray-200 {
  border-color: var(--cs-light-gray) !important;
}

/* Icon colors in sidebar */
.bg-app svg,
[class*="bg-app"] svg {
  color: rgba(255, 255, 255, 0.8);
}

.menu-active svg {
  color: var(--cs-white) !important;
}

/* Action icons in tables (the lock, user, edit icons) */
.text-teal-500,
.text-teal-600 {
  color: var(--cs-steel) !important;
}

.text-teal-500:hover,
.text-teal-600:hover {
  color: var(--cs-navy) !important;
}


/* -----------------------------------------------------------
   21. FOOTER (if present)
   ----------------------------------------------------------- */

footer,
.footer {
  background-color: var(--cs-navy-deeper) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}


/* -----------------------------------------------------------
   22. PRINT STYLES
   ----------------------------------------------------------- */

@media print {
  .bg-app,
  [class*="bg-app"],
  header,
  nav {
    display: none !important;
  }
  
  body {
    background: white !important;
  }
  
  .bg-white {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}


/* -----------------------------------------------------------
   23. LESSONS PAGE — CARD GRID LAYOUT
   Converts the zigzag timeline into a responsive card grid.
   Original layout: alternating left/right cards with center timeline.
   New layout: 2-3 cards per row in a clean grid.
   ----------------------------------------------------------- */

/* Page background override — remove the blue gradient bg */
.min-h-screen.bg-gradient-to-br.from-blue-50.to-indigo-100 {
  background: var(--cs-page-bg) !important;
}

/* The timeline outer container — make it a grid parent */
.bg-whitecolor.backdrop-blur-md {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Hide the vertical timeline line */
.bg-whitecolor .absolute.top-0.h-full.w-1,
.bg-whitecolor > .absolute[class*="bg-gradient-to-b"][class*="from-\[#1B468A\]"] {
  display: none !important;
}

/* The items wrapper — convert from vertical stack to grid */
.bg-whitecolor .space-y-12 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 24px !important;
  padding-left: 0 !important;
  align-items: stretch !important;
}

/* Reset Tailwind space-y-12 child margins (it adds margin-top to children) */
.bg-whitecolor .space-y-12 > * + * {
  margin-top: 0 !important;
}

/* Each timeline item — reset the flex-row/alternating layout */
.bg-whitecolor .space-y-12 > div.relative.flex {
  flex-direction: column !important;
  align-items: stretch !important;
  margin: 0 !important;
}

/* Hide the timeline dots */
.bg-whitecolor .space-y-12 .absolute.rounded-full.bg-white.border-4 {
  display: none !important;
}

/* Hide mobile step labels */
.md\:hidden.mt-4.text-sm.font-semibold {
  display: none !important;
}

/* Card — take full width of grid cell, remove the 5/12 constraint */
.bg-whitecolor .space-y-12 .w-full.md\:w-5\/12 {
  width: 100% !important;
  margin: 0 !important;
}

/* Force all lesson cards to equal height within each grid row */
.bg-whitecolor .space-y-12 > div.relative.flex {
  min-height: 0 !important;
}

.bg-whitecolor .space-y-12 .bg-white.rounded-xl.shadow-lg {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Card header — fixed height to fit up to 4 lines of title text */
.bg-whitecolor .space-y-12 .p-5.bg-gradient-to-r {
  min-height: 120px !important;
  display: flex !important;
  align-items: flex-start !important;
}

/* Card header text — force white */
.bg-whitecolor .space-y-12 .p-5.bg-gradient-to-r h3,
.bg-whitecolor .space-y-12 .p-5.bg-gradient-to-r span,
.bg-whitecolor .space-y-12 .p-5.bg-gradient-to-r .text-xl,
.p-5.bg-gradient-to-r h3.text-xl,
.p-5.bg-gradient-to-r .text-xl.font-semibold {
  color: var(--cs-white) !important;
  -webkit-text-fill-color: var(--cs-white) !important;
}

/* Card header icons (plane, delete) — force white */
.bg-whitecolor .space-y-12 .p-5.bg-gradient-to-r svg,
.bg-whitecolor .space-y-12 .p-5.bg-gradient-to-r button {
  color: var(--cs-white) !important;
}

/* Card body — flex-grow to fill remaining space */
.bg-whitecolor .space-y-12 .bg-white.rounded-xl.shadow-lg > .p-5:last-child {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Push the footer (Lesson X of Y / Explore) to the bottom */
.bg-whitecolor .space-y-12 .mt-4.pt-4.border-t {
  margin-top: auto !important;
}

/* Remap the header gradient colors to Cirrostratus brand palette */
.p-5.bg-gradient-to-r.from-blue-500.to-blue-700 {
  background: linear-gradient(135deg, var(--cs-navy) 0%, var(--cs-steel) 100%) !important;
}

.p-5.bg-gradient-to-r.from-purple-500.to-purple-700 {
  background: linear-gradient(135deg, var(--cs-navy-deeper) 0%, var(--cs-navy) 100%) !important;
}

.p-5.bg-gradient-to-r.from-teal-500.to-teal-700 {
  background: linear-gradient(135deg, var(--cs-teal) 0%, #1a6b42 100%) !important;
}

.p-5.bg-gradient-to-r.from-indigo-500.to-indigo-700 {
  background: linear-gradient(135deg, var(--cs-slate) 0%, var(--cs-navy) 100%) !important;
}

.p-5.bg-gradient-to-r.from-cyan-500.to-cyan-700 {
  background: linear-gradient(135deg, var(--cs-steel) 0%, var(--cs-navy-dark) 100%) !important;
}

.p-5.bg-gradient-to-r.from-sky-500.to-sky-700 {
  background: linear-gradient(135deg, var(--cs-bronze) 0%, #8a6508 100%) !important;
}

/* Lesson card refinements */
.bg-whitecolor .space-y-12 .bg-white.rounded-xl.shadow-lg {
  border-radius: 12px !important;
  border: 1px solid var(--cs-light-gray) !important;
  box-shadow: var(--cs-shadow-sm) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  transform: none !important;
}

.bg-whitecolor .space-y-12 .bg-white.rounded-xl.shadow-lg:hover {
  box-shadow: var(--cs-shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Explore link — use brand color */
.text-sm.text-\[\#1B468A\].font-medium {
  color: var(--cs-navy) !important;
}

.text-sm.text-\[\#1B468A\].font-medium:hover {
  color: var(--cs-steel) !important;
}

/* Lesson counter badge — brand it */
.bg-blue-100.text-blue-800.rounded-full {
  background-color: rgba(70, 130, 180, 0.12) !important;
  color: var(--cs-navy) !important;
}

/* Responsive: single column on small screens */
@media (max-width: 640px) {
  .bg-whitecolor .space-y-12 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}


/* ============================================================
   TIER 1.3 - LOGIN AUTH UX ENHANCEMENTS
   ============================================================ */

/* Error message styling for failed login */
[class*="login"] [class*="error"],
[class*="Login"] [class*="error"],
[class*="auth"] [class*="error"],
[class*="login"] [role="alert"],
form [class*="error-message"],
form [class*="errorMessage"] {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
    border: 1px solid #FCA5A5 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 0 0 16px 0 !important;
    font-family: var(--cs-font-primary, "Poppins", sans-serif) !important;
    font-size: 14px !important;
    text-align: center;
    animation: csShake 0.4s ease;
}
@keyframes csShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
[class*="forgot"] h1, [class*="forgot"] h2, [class*="Forgot"] h1,
[class*="reset"] h1, [class*="reset"] h2, [class*="Reset"] h1 {
    color: var(--cs-navy-deeper, #0F2A44) !important;
    font-family: var(--cs-font-primary, "Poppins", sans-serif) !important;
}
.cs-session-toast {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    background: #FEF3C7; color: #92400E; padding: 12px 24px;
    border-radius: 8px; border: 1px solid #FCD34D; z-index: 10000;
    font-family: var(--cs-font-primary, "Poppins", sans-serif);
    font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: csSlideDown 0.3s ease;
}
@keyframes csSlideDown {
    from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}


/* ============================================================
   TIER 1.4 - RESPONSIVE LAYOUT ENHANCEMENTS
   ============================================================ */
@media (max-width: 768px) {
    [class*="sidebar"], [class*="Sidebar"] {
        width: 60px !important; min-width: 60px !important;
        overflow: hidden; transition: width 0.3s ease;
    }
    [class*="sidebar"]:hover, [class*="Sidebar"]:hover {
        width: 250px !important; overflow: visible;
    }
    form [class*="row"], form [class*="grid"] {
        flex-direction: column !important; grid-template-columns: 1fr !important;
    }
    form [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    [class*="dashboard"] [class*="card"] { min-width: 100% !important; }
}
@media (max-width: 480px) {
    form input, form select, form textarea {
        width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    }
    [class*="login"] [class*="card"], [class*="loginContainer"], [class*="login-container"] {
        width: 95% !important; max-width: 95% !important; margin: 10px auto !important; padding: 20px !important;
    }
    #cs-login-banner img, #cs-sidebar-banner img { max-height: 50px !important; }
    form button[type="submit"] { width: 100% !important; }
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }
}

/* TIER 2: Dashboard & Navigation CSS */
.cs-dashboard{padding:24px 32px;max-width:1200px;margin:0 auto;font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif}
.cs-dash-header{margin-bottom:28px;padding-bottom:16px;border-bottom:2px solid #E8EDF2}
.cs-dash-title{font-size:1.75rem;font-weight:600;color:var(--cs-navy,#1F4E79);margin:0 0 4px 0;line-height:1.3}
.cs-dash-subtitle{font-size:.875rem;color:var(--cs-slate,#64748B);font-weight:400}
.cs-dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px}
.cs-dash-cards--secondary{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:28px}
.cs-dash-card{background:#FFF;border:1px solid #E2E8F0;border-radius:12px;padding:20px;display:flex;align-items:center;gap:16px;transition:transform .15s ease,box-shadow .15s ease}
.cs-dash-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(31,78,121,.1)}
.cs-dash-card__icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.cs-dash-card__body{display:flex;flex-direction:column;min-width:0}
.cs-dash-card__value{font-size:1.5rem;font-weight:700;color:var(--cs-navy-deeper,#163A5C);line-height:1.2}
.cs-dash-card__label{font-size:.8rem;color:var(--cs-slate,#64748B);font-weight:500;text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.cs-dash-heading{font-size:1.1rem;font-weight:600;color:var(--cs-navy,#1F4E79);margin:32px 0 16px 0;padding-bottom:8px;border-bottom:1px solid #E8EDF2}
.cs-quick-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.cs-quick-action{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid #CBD5E1;border-radius:8px;background:#FFF;font-family:'Poppins',sans-serif;font-size:.875rem;font-weight:500;color:var(--cs-navy,#1F4E79);cursor:pointer;transition:all .15s ease}
.cs-quick-action:hover{background:var(--cs-navy,#1F4E79);color:#FFF;border-color:var(--cs-navy,#1F4E79)}
.cs-quick-action__icon{font-size:1.1rem}
.cs-activity-feed{background:#FFF;border:1px solid #E2E8F0;border-radius:12px;overflow:hidden;margin-bottom:24px}
.cs-activity-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #F1F5F9;font-size:.875rem;transition:background .1s ease}
.cs-activity-row:last-child{border-bottom:none}
.cs-activity-row:hover{background:#F8FAFC}
.cs-activity-row__icon{flex-shrink:0;font-size:1.1rem}
.cs-activity-row__text{flex:1;color:#334155;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-activity-row__time{flex-shrink:0;color:var(--cs-slate,#64748B);font-size:.75rem}
.cs-enroll-cards,.cs-student-progress{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px}
.cs-enroll-card{background:#FFF;border:1px solid #E2E8F0;border-radius:12px;padding:18px;transition:transform .15s ease,box-shadow .15s ease}
.cs-enroll-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(31,78,121,.08)}
.cs-enroll-card__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.cs-enroll-card__title{font-weight:600;color:var(--cs-navy-deeper,#163A5C);font-size:.95rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-enroll-card__pct{font-weight:700;font-size:.95rem;flex-shrink:0;margin-left:8px}
.cs-enroll-card__sub{font-size:.8rem;color:var(--cs-slate,#64748B);margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-progress-bar{width:100%;height:6px;background:#E8EDF2;border-radius:3px;overflow:hidden;margin-top:8px}
.cs-progress-bar__fill{height:100%;border-radius:3px;transition:width .5s ease}
.cs-upcoming-list{background:#FFF;border:1px solid #E2E8F0;border-radius:12px;overflow:hidden;margin-bottom:24px}
.cs-due-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #F1F5F9;font-size:.875rem}
.cs-due-row:last-child{border-bottom:none}
.cs-due-row__label{color:#334155;font-weight:500}
.cs-due-row__date{color:var(--cs-slate,#64748B);font-size:.8rem}
.cs-due-row--urgent{background:#FEF2F2}
.cs-due-row--urgent .cs-due-row__label{color:#DC2626}
.cs-due-row--urgent .cs-due-row__date{color:#DC2626;font-weight:600}
.cs-comp-tracker{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.cs-comp-badge{display:flex;align-items:center;gap:8px;background:#FFF;border:1px solid #E2E8F0;border-radius:8px;padding:10px 14px;font-size:.85rem}
.cs-comp-badge__label{color:#334155;font-weight:500}
.cs-comp-badge__status{padding:2px 10px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.cs-study-widget{display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,#1F4E79 0%,#2A6B9F 100%);border-radius:12px;padding:24px;margin-bottom:24px;color:#FFF}
.cs-study-widget__icon{font-size:2.5rem;flex-shrink:0}
.cs-study-widget__body h3{font-size:1.1rem;font-weight:600;margin:0 0 6px 0;color:#FFF}
.cs-study-widget__body p{font-size:.85rem;margin:0 0 12px 0;opacity:.9;line-height:1.5;color:#E8EDF2}
.cs-study-widget__btn{display:inline-block;padding:8px 20px;background:#C4955A;color:#FFF;border:none;border-radius:6px;font-family:'Poppins',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s ease}
.cs-study-widget__btn:hover{background:#B08048}
.cs-empty-state{text-align:center;padding:32px 16px;color:var(--cs-slate,#64748B);font-size:.875rem;font-style:italic}
.cs-nav-active{background:rgba(31,78,121,.12)!important;color:var(--cs-navy,#1F4E79)!important;font-weight:600!important;border-right:3px solid var(--cs-navy,#1F4E79)!important}
.cs-menu-group{margin:4px 0}
.cs-menu-group__toggle{display:flex;align-items:center;gap:6px;width:100%;padding:10px 16px;border:none;background:transparent;font-family:'Poppins',sans-serif;font-size:.8rem;font-weight:600;color:var(--cs-slate,#64748B);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:color .15s ease}
.cs-menu-group__toggle:hover{color:var(--cs-navy,#1F4E79)}
.cs-menu-group__arrow{font-size:.7rem;flex-shrink:0;transition:transform .15s ease}
.cs-menu-group__items{overflow:hidden;transition:max-height .25s ease;max-height:500px}
.cs-menu-group__items--collapsed{max-height:0}
.cs-menu-group__items a,.cs-menu-group__items li{padding-left:32px!important}
.cs-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#DC2626;color:#FFF;font-size:.65rem;font-weight:700;position:absolute;top:4px;right:4px;line-height:1}
@media(max-width:768px){.cs-dashboard{padding:16px}.cs-dash-title{font-size:1.35rem}.cs-dash-cards{grid-template-columns:repeat(2,1fr);gap:10px}.cs-dash-card{padding:14px}.cs-dash-card__icon{width:40px;height:40px;font-size:1.2rem}.cs-dash-card__value{font-size:1.2rem}.cs-quick-actions{flex-direction:column}.cs-enroll-cards,.cs-student-progress{grid-template-columns:1fr}.cs-study-widget{flex-direction:column;text-align:center}.cs-comp-tracker{flex-direction:column}}
@media(max-width:480px){.cs-dash-cards{grid-template-columns:1fr}}
@media print{.cs-quick-actions,.cs-study-widget,.cs-menu-group__toggle{display:none!important}.cs-dashboard{padding:0}.cs-dash-card{border:1px solid #CCC;box-shadow:none}}

/* Tier 2 fix: hide default React dashboard charts when custom dashboard is present */
#cs-dashboard-root ~ div,
#cs-dashboard-root ~ section,
.cs-dashboard ~ div[class],
.cs-dashboard ~ .row,
.cs-dashboard ~ [class*="chart"],
.cs-dashboard ~ [class*="Card"],
.cs-dashboard ~ [class*="grid"],
.cs-dashboard ~ [class*="dashboard"] {
  display: none !important;
}
#cs-dashboard-root {
  margin-top: 0;
  padding-top: 0;
}

/* ---- Preflight Data Sheet (PDS) ---- */
#pds-app { max-width: 900px; margin: 2rem auto; padding: 0 1rem; font-family: var(--font-body, 'Inter', sans-serif); }
.pds-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--brand-gold, #c9a227); }
.pds-header .pds-title { font-size: 1.5rem; font-weight: 700; color: var(--brand-navy, #1b2a4a); margin: 0; }
.pds-header-actions { display: flex; gap: .5rem; align-items: center; }
.pds-status-bar { font-size: .85rem; padding: .25rem .75rem; border-radius: 12px; background: var(--brand-light, #f0f4f8); color: var(--brand-navy, #1b2a4a); }
.pds-btn { padding: .5rem 1.25rem; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: .9rem; transition: background .2s, opacity .2s; }
.pds-btn-save { background: var(--brand-navy, #1b2a4a); color: #fff; }
.pds-btn-save:hover { opacity: .85; }
.pds-btn-submit { background: var(--brand-gold, #c9a227); color: #fff; }
.pds-btn-submit:hover { opacity: .85; }
.pds-body { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; }
@media (max-width: 768px) { .pds-body { grid-template-columns: 1fr; } }
.pds-sidebar { position: sticky; top: 5rem; align-self: start; }
.pds-sidebar ul { list-style: none; padding: 0; margin: 0; }
.pds-sidebar li { margin-bottom: .25rem; }
.pds-sidebar a { display: block; padding: .45rem .75rem; border-radius: 6px; color: var(--brand-navy, #1b2a4a); text-decoration: none; font-size: .85rem; transition: background .15s; }
.pds-sidebar a:hover, .pds-sidebar a.active { background: var(--brand-gold, #c9a227); color: #fff; }
.pds-content { min-width: 0; }
.pds-section { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.25rem; margin-bottom: 1.25rem; }
.pds-section h2 { font-size: 1.1rem; color: var(--brand-navy, #1b2a4a); margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid #e2e8f0; }
.pds-field { margin-bottom: 1rem; }
.pds-field label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .3rem; color: #475569; }
.pds-field input, .pds-field select, .pds-field textarea { width: 100%; padding: .5rem .75rem; border: 1px solid #cbd5e1; border-radius: 6px; font-size: .9rem; font-family: inherit; box-sizing: border-box; }
.pds-field textarea { min-height: 80px; resize: vertical; }
.pds-field input:focus, .pds-field select:focus, .pds-field textarea:focus { outline: none; border-color: var(--brand-gold, #c9a227); box-shadow: 0 0 0 2px rgba(201,162,39,.2); }
.pds-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.pds-leg-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; align-items: end; margin-bottom: .5rem; }
.pds-leg-row .pds-field { margin-bottom: 0; }
@media (max-width: 600px) { .pds-leg-row { grid-template-columns: repeat(2, 1fr); } }
.pds-add-btn { background: none; border: 1px dashed #cbd5e1; border-radius: 6px; padding: .5rem 1rem; cursor: pointer; color: var(--brand-navy, #1b2a4a); font-size: .85rem; width: 100%; margin-top: .5rem; transition: border-color .2s; }
.pds-add-btn:hover { border-color: var(--brand-gold, #c9a227); }
.pds-checklist label { display: flex; align-items: center; gap: .5rem; font-weight: 400; font-size: .9rem; padding: .3rem 0; cursor: pointer; }
.pds-checklist input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-gold, #c9a227); }
.pds-footer { margin-top: 1rem; }
.pds-rubric-area { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.25rem; }
.pds-rubric-area h3 { margin: 0 0 .75rem; font-size: 1rem; color: var(--brand-navy, #1b2a4a); }
.pds-rubric-item { display: flex; justify-content: space-between; padding: .4rem 0; border-bottom: 1px solid #f1f5f9; font-size: .9rem; }
.pds-rubric-score { font-weight: 700; color: var(--brand-gold, #c9a227); }
.pds-toast { position: fixed; bottom: 2rem; right: 2rem; padding: .75rem 1.5rem; border-radius: 8px; color: #fff; font-weight: 600; z-index: 9999; animation: pdsSlideIn .3s ease; }
.pds-toast.success { background: #16a34a; }
.pds-toast.error { background: #dc2626; }
@keyframes pdsSlideIn { from { transform: translateY(1rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/*
 * Cirrostratus Brand Additions — A12/A13/A14 UI Modules
 * ======================================================
 * Append this CSS to cirrostratus-brand.css (or load after it).
 * Provides shared utility classes and layout primitives used by:
 *   - cirrostratus-lessons.js       (A12 Lesson Formatter)
 *   - cirrostratus-flight-validator.js (A13/A14 Flight Validator)
 *   - cirrostratus-gradebook.js     (Gradebook Dashboard)
 *
 * Each module also injects its own scoped <style> block at runtime
 * for component-specific rules. This file covers shared patterns,
 * host-app overrides, and print styles.
 */

/* ================================================================
   Section 24 — Shared Trigger-Button Foundation
   ================================================================ */

/*
 * All three modules place a fixed trigger button at bottom-right.
 * When multiple modules are active, stack them vertically.
 */
#cs-lessons-trigger-btn {
  bottom: 24px;
}
#cs-gradebook-trigger-btn {
  bottom: 84px !important;
}
#cs-flight-trigger-btn {
  bottom: 144px !important;
}

/* ================================================================
   Section 25 — Shared Panel & Overlay Primitives
   ================================================================ */

/* Ensure panel overlays render above the host app's sidebar/header */
.cs-lessons-panel,
.cs-flight-panel,
.cs-gradebook-panel {
  z-index: 9999 !important;
}

/* Body scroll lock while a panel is open */
body.cs-panel-open {
  overflow: hidden !important;
}

/* ================================================================
   Section 26 — Shared Typography Utilities
   ================================================================ */

.cs-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-text-center { text-align: center; }
.cs-text-right  { text-align: right; }

.cs-text-sm   { font-size: .78rem; }
.cs-text-xs   { font-size: .7rem; }
.cs-text-bold { font-weight: 700; }
.cs-text-caps {
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;
}

/* Semantic colors */
.cs-text-success { color: var(--cs-success, #2E8B57); }
.cs-text-warning { color: var(--cs-warning, #D4A017); }
.cs-text-error   { color: var(--cs-error, #DC2626); }
.cs-text-info    { color: var(--cs-info, #4682B4); }
.cs-text-muted   { color: var(--cs-mid-gray, #94A3B8); }

/* ================================================================
   Section 27 — Shared Badge Foundation
   ================================================================ */

.cs-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.4;
}

/* Tier badges — Gold / Silver / Bronze / Incomplete */
.cs-badge--gold       { background: rgba(212, 160, 23, .12); color: var(--cs-gold, #D4A017); }
.cs-badge--silver     { background: rgba(148, 163, 184, .15); color: var(--cs-mid-gray, #94A3B8); }
.cs-badge--bronze     { background: rgba(184, 134, 11, .12);  color: var(--cs-bronze, #B8860B); }
.cs-badge--incomplete { background: rgba(220, 38, 38, .12);   color: var(--cs-error, #DC2626); }

/* Status badges */
.cs-badge--pending    { background: rgba(148, 163, 184, .15); color: var(--cs-mid-gray, #94A3B8); }
.cs-badge--processing { background: rgba(70, 130, 180, .12);  color: var(--cs-info, #4682B4); }
.cs-badge--completed  { background: rgba(46, 139, 87, .12);   color: var(--cs-success, #2E8B57); }
.cs-badge--graded     { background: rgba(46, 139, 87, .12);   color: var(--cs-success, #2E8B57); }
.cs-badge--failed     { background: rgba(220, 38, 38, .12);   color: var(--cs-error, #DC2626); }
.cs-badge--draft      { background: rgba(148, 163, 184, .15); color: var(--cs-mid-gray, #94A3B8); }
.cs-badge--published  { background: rgba(46, 139, 87, .12);   color: var(--cs-success, #2E8B57); }

/* Strand badges — Dual Ascent */
.cs-badge--developmental,
.cs-badge--development { background: rgba(70, 130, 180, .12); color: var(--cs-steel, #4682B4); }
.cs-badge--mastery     { background: rgba(212, 160, 23, .12); color: var(--cs-gold, #D4A017); }

/* Mastery status badges */
.cs-badge--not_started { background: rgba(148, 163, 184, .15); color: var(--cs-mid-gray, #94A3B8); }
.cs-badge--developing  { background: rgba(70, 130, 180, .12);  color: var(--cs-steel, #4682B4); }
.cs-badge--approaching { background: rgba(212, 160, 23, .12);  color: var(--cs-warning, #D4A017); }
.cs-badge--mastered    { background: rgba(46, 139, 87, .12);   color: var(--cs-success, #2E8B57); }
.cs-badge--exceeded    { background: rgba(212, 160, 23, .12);  color: var(--cs-gold, #D4A017); }

/* CoL Phase badges */
.cs-badge--educate  { background: rgba(70, 130, 180, .12);  color: var(--cs-steel, #4682B4); }
.cs-badge--aviate   { background: rgba(46, 139, 87, .12);   color: var(--cs-teal, #2E8B57); }
.cs-badge--validate { background: rgba(212, 160, 23, .12);  color: var(--cs-gold, #D4A017); }

/* Bloom level & safety */
.cs-badge--bloom  { background: rgba(70, 130, 180, .1);  color: var(--cs-steel, #4682B4); }
.cs-badge--safety { background: rgba(220, 38, 38, .1);   color: var(--cs-error, #DC2626); }

/* Size variant */
.cs-badge--lg {
  font-size: 1rem;
  padding: 8px 20px;
  border-radius: 10px;
}

/* ================================================================
   Section 28 — Shared Button Foundation
   ================================================================ */

.cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border: none;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
  line-height: 1.4;
}

.cs-btn--primary {
  background: var(--cs-navy, #1F4E79);
  color: var(--cs-white, #FFF);
}
.cs-btn--primary:hover {
  background: var(--cs-navy-dark, #163A5C);
  box-shadow: 0 4px 12px rgba(31, 78, 121, .25);
  transform: translateY(-1px);
}

.cs-btn--secondary {
  background: var(--cs-white, #FFF);
  color: var(--cs-navy, #1F4E79);
  border: 1px solid var(--cs-light-gray, #E8EDF4);
}
.cs-btn--secondary:hover {
  border-color: var(--cs-steel, #4682B4);
  background: rgba(70, 130, 180, .04);
}

.cs-btn--success {
  background: var(--cs-teal, #2E8B57);
  color: var(--cs-white, #FFF);
}
.cs-btn--success:hover {
  background: var(--cs-teal-light, #3DA86E);
}

.cs-btn--danger {
  background: var(--cs-error, #DC2626);
  color: var(--cs-white, #FFF);
}
.cs-btn--danger:hover {
  background: #B91C1C;
}

.cs-btn--export {
  background: var(--cs-teal, #2E8B57);
  color: var(--cs-white, #FFF);
}
.cs-btn--export:hover {
  background: var(--cs-teal-light, #3DA86E);
}

.cs-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
}

/* ================================================================
   Section 29 — Shared Card Foundation
   ================================================================ */

.cs-card {
  background: var(--cs-card-bg, #FFF);
  border: 1px solid var(--cs-light-gray, #E8EDF4);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--cs-shadow-sm, 0 1px 3px rgba(31, 78, 121, .08));
}

.cs-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cs-navy, #1F4E79);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cs-light-gray, #E8EDF4);
}

.cs-card--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--cs-shadow-md, 0 4px 12px rgba(31, 78, 121, .10));
  transition: transform .15s ease, box-shadow .15s ease;
}

/* ================================================================
   Section 30 — Shared Table Foundation
   ================================================================ */

.cs-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--cs-light-gray, #E8EDF4);
  box-shadow: var(--cs-shadow-sm, 0 1px 3px rgba(31, 78, 121, .08));
}

.cs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

.cs-table th {
  text-align: left;
  padding: 11px 14px;
  background: var(--cs-navy, #1F4E79);
  color: var(--cs-white, #FFF);
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  position: sticky;
  top: 0;
  z-index: 1;
}

.cs-table th:first-child { border-top-left-radius: 12px; }
.cs-table th:last-child  { border-top-right-radius: 12px; }

.cs-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--cs-light-gray, #E8EDF4);
  color: var(--cs-charcoal, #1E293B);
}

.cs-table tbody tr {
  transition: background .1s ease;
}

.cs-table tbody tr:hover td {
  background: rgba(70, 130, 180, .03);
}

.cs-table tbody tr[data-clickable] {
  cursor: pointer;
}

/* Zebra striping */
.cs-table--striped tbody tr:nth-child(even) td {
  background: var(--cs-off-white, #F4F7FB);
}
.cs-table--striped tbody tr:nth-child(even):hover td {
  background: rgba(70, 130, 180, .05);
}

/* Sortable header */
.cs-table th[data-sortable] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.cs-sort-arrow {
  margin-left: 4px;
  font-size: .65rem;
  opacity: .7;
}
.cs-sort-arrow--active {
  opacity: 1;
}

/* ================================================================
   Section 31 — Shared Form Elements
   ================================================================ */

.cs-field {
  margin-bottom: 16px;
}

.cs-field label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: 4px;
  color: var(--cs-dark-gray, #475569);
}

.cs-field input,
.cs-field select,
.cs-field textarea {
  width: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
  border: 1px solid var(--cs-light-gray, #E8EDF4);
  border-radius: 10px;
  background: var(--cs-off-white, #F4F7FB);
  font-family: "Poppins", sans-serif;
  font-size: .875rem;
  color: var(--cs-charcoal, #1E293B);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.cs-field input:focus,
.cs-field select:focus,
.cs-field textarea:focus {
  border-color: var(--cs-steel, #4682B4);
  box-shadow: 0 0 0 3px rgba(70, 130, 180, .15);
}

.cs-field input[type="file"] {
  padding: 8px 10px;
  background: var(--cs-white, #FFF);
}

.cs-field textarea {
  min-height: 80px;
  resize: vertical;
}

.cs-select {
  padding: 10px 14px;
  border: 1px solid var(--cs-light-gray, #E8EDF4);
  border-radius: 10px;
  background: var(--cs-white, #FFF);
  font-family: "Poppins", sans-serif;
  font-size: .85rem;
  color: var(--cs-charcoal, #1E293B);
  cursor: pointer;
  outline: none;
}

.cs-search {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid var(--cs-light-gray, #E8EDF4);
  border-radius: 10px;
  background: var(--cs-white, #FFF);
  font-family: "Poppins", sans-serif;
  font-size: .875rem;
  color: var(--cs-charcoal, #1E293B);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.cs-search:focus {
  border-color: var(--cs-steel, #4682B4);
  box-shadow: 0 0 0 3px rgba(70, 130, 180, .15);
}

/* ================================================================
   Section 32 — Shared Loading / Empty / Error States
   ================================================================ */

.cs-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
}

.cs-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--cs-light-gray, #E8EDF4);
  border-top-color: var(--cs-navy, #1F4E79);
  border-radius: 50%;
  animation: csSpin .7s linear infinite;
}

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

.cs-spinner-text {
  font-size: .85rem;
  color: var(--cs-dark-gray, #475569);
}

.cs-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--cs-mid-gray, #94A3B8);
  font-size: .9rem;
  font-style: italic;
}

.cs-error-msg {
  text-align: center;
  padding: 48px 20px;
  color: var(--cs-error, #DC2626);
  font-size: .9rem;
}

/* ================================================================
   Section 33 — Shared Toast Notification
   ================================================================ */

.cs-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 10px;
  color: var(--cs-white, #FFF);
  font-family: "Poppins", sans-serif;
  font-size: .875rem;
  font-weight: 600;
  z-index: 10001;
  box-shadow: var(--cs-shadow-lg, 0 8px 30px rgba(31, 78, 121, .12));
  animation: csToastIn .3s ease;
}

.cs-toast--success { background: var(--cs-success, #2E8B57); }
.cs-toast--error   { background: var(--cs-error, #DC2626); }
.cs-toast--info    { background: var(--cs-info, #4682B4); }
.cs-toast--warning { background: var(--cs-warning, #D4A017); }

@keyframes csToastIn {
  from { transform: translateX(-50%) translateY(12px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ================================================================
   Section 34 — Shared Stat Card Row
   ================================================================ */

.cs-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.cs-stat-card {
  background: var(--cs-card-bg, #FFF);
  border: 1px solid var(--cs-light-gray, #E8EDF4);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--cs-shadow-sm, 0 1px 3px rgba(31, 78, 121, .08));
  transition: transform .15s ease, box-shadow .15s ease;
}

.cs-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cs-shadow-md, 0 4px 12px rgba(31, 78, 121, .10));
}

.cs-stat-card--clickable {
  cursor: pointer;
}

.cs-stat-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.cs-stat-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cs-stat-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cs-navy-deeper, #163A5C);
  line-height: 1.2;
}

.cs-stat-card__label {
  font-size: .78rem;
  color: var(--cs-dark-gray, #475569);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: 2px;
}

/* ================================================================
   Section 35 — Shared Progress Bar
   ================================================================ */

.cs-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-progress__track {
  flex: 1;
  height: 8px;
  background: var(--cs-light-gray, #E8EDF4);
  border-radius: 4px;
  overflow: hidden;
}

.cs-progress__fill {
  height: 100%;
  border-radius: 4px;
  transition: width .5s ease;
}

.cs-progress__fill--success { background: var(--cs-success, #2E8B57); }
.cs-progress__fill--warning { background: var(--cs-warning, #D4A017); }
.cs-progress__fill--error   { background: var(--cs-error, #DC2626); }
.cs-progress__fill--gold    { background: var(--cs-gold, #D4A017); }
.cs-progress__fill--navy    { background: var(--cs-navy, #1F4E79); }
.cs-progress__fill--steel   { background: var(--cs-steel, #4682B4); }
.cs-progress__fill--teal    { background: var(--cs-teal, #2E8B57); }

.cs-progress__label {
  font-weight: 700;
  font-size: .85rem;
  min-width: 36px;
}

/* Mini progress bar (for table cells) */
.cs-mini-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-mini-bar__track {
  flex: 1;
  height: 6px;
  background: var(--cs-light-gray, #E8EDF4);
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
  max-width: 120px;
}

.cs-mini-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}

.cs-mini-bar__label {
  font-weight: 600;
  font-size: .82rem;
  min-width: 36px;
}

/* ================================================================
   Section 36 — Shared Detail Header (navy gradient)
   ================================================================ */

.cs-detail-header {
  background: linear-gradient(135deg, var(--cs-navy-deeper, #0F2A44) 0%, var(--cs-navy, #1F4E79) 100%);
  color: var(--cs-white, #FFF);
  padding: 24px 28px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.cs-detail-header__name {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.cs-detail-header__sub {
  font-size: .9rem;
  opacity: .8;
  margin: 0 0 12px;
}

.cs-detail-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ================================================================
   Section 37 — Tier Color Utilities
   ================================================================ */

/* Background tints for tier-colored containers */
.cs-bg-gold       { background: rgba(212, 160, 23, .08); }
.cs-bg-silver     { background: rgba(148, 163, 184, .10); }
.cs-bg-bronze     { background: rgba(184, 134, 11, .08); }
.cs-bg-navy       { background: rgba(31, 78, 121, .08); }
.cs-bg-teal       { background: rgba(46, 139, 87, .08); }
.cs-bg-steel      { background: rgba(70, 130, 180, .08); }
.cs-bg-error      { background: rgba(220, 38, 38, .08); }
.cs-bg-warning    { background: rgba(212, 160, 23, .08); }

/* Border-left accent (used for at-risk rows, alerts, etc.) */
.cs-border-warning { border-left: 3px solid var(--cs-warning, #D4A017); }
.cs-border-error   { border-left: 3px solid var(--cs-error, #DC2626); }
.cs-border-success { border-left: 3px solid var(--cs-success, #2E8B57); }
.cs-border-info    { border-left: 3px solid var(--cs-info, #4682B4); }

/* ================================================================
   Section 38 — Trajectory Indicators
   ================================================================ */

.cs-trajectory {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .85rem;
  font-weight: 700;
}

.cs-trajectory--improving    { color: var(--cs-success, #2E8B57); }
.cs-trajectory--stable       { color: var(--cs-info, #4682B4); }
.cs-trajectory--declining    { color: var(--cs-error, #DC2626); }
.cs-trajectory--first_attempt { color: var(--cs-mid-gray, #94A3B8); }

/* ================================================================
   Section 39 — Decay Flag
   ================================================================ */

.cs-decay-flag {
  color: var(--cs-warning, #D4A017);
  font-weight: 600;
  font-size: .9rem;
}

/* ================================================================
   Section 40 — Host-App Integration Overrides
   ================================================================ */

/*
 * When a Cirrostratus panel is open, prevent the host React app
 * from scrolling underneath.
 */
body:has(.cs-lessons-panel),
body:has(.cs-flight-panel),
body:has(.cs-gradebook-panel) {
  overflow: hidden;
}

/*
 * The host app sidebar links that correspond to our modules
 * get branded highlighting when the module panel is open.
 */
.sidebar-link--lessons.cs-active,
.sidebar-link--flight-validator.cs-active,
.sidebar-link--gradebook.cs-active {
  background: linear-gradient(135deg, var(--cs-navy, #1F4E79) 0%, var(--cs-steel, #4682B4) 100%);
  color: var(--cs-white, #FFF) !important;
  border-radius: 8px;
}

/* ================================================================
   Section 41 — Print Styles
   ================================================================ */

@media print {
  /* Hide trigger buttons and topbars when printing */
  #cs-lessons-trigger-btn,
  #cs-gradebook-trigger-btn,
  #cs-flight-trigger-btn,
  .cs-lessons-topbar,
  .cs-fv-topbar,
  .cs-gb-topbar,
  .cs-fv-tabs,
  .cs-toast,
  .cs-fv-toast {
    display: none !important;
  }

  /* Panels become static for print */
  .cs-lessons-panel,
  .cs-flight-panel,
  .cs-gradebook-panel {
    position: static !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  /* Ensure content is not clipped */
  .cs-lessons-body,
  .cs-fv-body,
  .cs-gb-body {
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Cards should not break across pages */
  .cs-card,
  .cs-fv-card,
  .cs-gb-card,
  .cs-section-card,
  .cs-lesson-card,
  .cs-fv-result-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  /* Tables should use dark borders for print */
  .cs-table th,
  .cs-fv-table th,
  .cs-gb-table th,
  .cs-comp-table th,
  .cs-attempts-table th {
    background: #1F4E79 !important;
    color: #FFF !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Force badge colors in print */
  .cs-badge,
  .cs-fv-badge,
  .cs-gb-badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ================================================================
   Section 42 — Responsive Shared Breakpoints
   ================================================================ */

@media (max-width: 768px) {
  .cs-stats-row {
    grid-template-columns: 1fr;
  }

  .cs-detail-header {
    padding: 18px 16px;
  }

  .cs-detail-header__name {
    font-size: 1.15rem;
  }

  .cs-stat-card {
    padding: 14px;
  }

  .cs-stat-card__icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
}

@media (max-width: 640px) {
  .cs-stat-card__value {
    font-size: 1.2rem;
  }

  .cs-btn {
    padding: 8px 16px;
    font-size: .82rem;
  }
}

/* ================================================================
   Section 43 — Reduced Motion
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .cs-spinner,
  .cs-fv-spinner,
  .cs-gb-spinner {
    animation-duration: 1.5s;
  }

  .cs-lessons-panel,
  .cs-flight-panel,
  .cs-gradebook-panel,
  .cs-toast,
  .cs-fv-toast {
    animation: none !important;
  }

  .cs-lesson-card,
  .cs-stat-card,
  .cs-card--hover,
  .cs-btn,
  .cs-fv-btn,
  .cs-gb-btn {
    transition: none !important;
  }
}

/* === Hide overlay trigger buttons (moved to sidebar nav) === */
#cs-flight-trigger-btn,
#cs-gradebook-trigger-btn,
#cs-lessons-trigger-btn {
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Kill ALL transitions on fixed header elements */
header[data-cs-banner],
header[data-cs-banner] *,
[data-cs-banner] {
  transition: none !important;
  animation: none !important;
  -webkit-transition: none !important;
}

/* Also target by the Tailwind transition class directly */
.transition-all.duration-300.shadow-lg.fixed {
  transition: none !important;
}

/* === Sidebar font consistency (cmd-353) === */
/* Override Tailwind utility classes on React sidebar group headers */
.cursor-pointer.uppercase {
  text-transform: none !important;
}
.cursor-pointer .uppercase {
  text-transform: none !important;
}
.cursor-pointer.font-semibold,
.cursor-pointer .font-semibold {
  font-weight: 500 !important;
}
.cursor-pointer.tracking-wider,
.cursor-pointer .tracking-wider {
  letter-spacing: 0.3px !important;
}
.cursor-pointer.text-sm,
.cursor-pointer .text-sm {
  font-size: 14px !important;
}
/* Also fix the brand CSS menu group toggle */
.cs-menu-group__toggle {
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px !important;
}
/* Reduce transition flash */
.menu-item {
  transition: none !important;
}

/* === Hide React sidebar menu content (cmd-359) === */
/* Our overlay sidebar (v3) covers this area — hide React's items */
.menu-item {
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Hide React group headers (the cursor-pointer toggle divs) */
.cursor-pointer.uppercase,
.fixed.left-0.top-0.h-full .cursor-pointer {
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}