/* ICU Web Application - Main CSS File */
/* Replaces core.css and Tailwind CSS with Pico CSS + custom utilities */

/* ========================================================================
   CSS RESET
   ======================================================================== */

/* Universal box-sizing with border-box */
*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

/* Root and HTML defaults */
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-tap-highlight-color: transparent;
}

/* Body defaults */
body {
  margin: 0;
  line-height: inherit;
}

/* Heading resets */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* List resets */
ol, ul, menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Link resets */
a {
  color: inherit;
  text-decoration: inherit;
}

/* Form element resets */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, select {
  text-transform: none;
}

button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

/* Remove default button styling */
:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

/* Progress element */
progress {
  vertical-align: baseline;
}

/* Webkit input controls */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Summary element */
summary {
  display: list-item;
}

/* Block elements */
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

/* Image and media resets */
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

/* Table resets */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Horizontal rule */
hr {
  border-top-width: 1px;
  height: 0;
  color: inherit;
}

/* Textarea */
textarea {
  resize: vertical;
}

/* Input placeholders */
::-webkit-input-placeholder {
  opacity: 1;
  color: #9ca3af;
}

::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}

:-ms-input-placeholder {
  opacity: 1;
  color: #9ca3af;
}

::placeholder {
  opacity: 1;
  color: #9ca3af;
}

/* Disabled cursor */
:disabled {
  cursor: default;
}

/* Abbreviation */
abbr[title] {
  text-decoration: underline dotted;
}

/* Code and pre */
code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

/* Small text */
small {
  font-size: 80%;
}

/* Sub and sup */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* ========================================================================
   ROOT VARIABLES & THEME SYSTEM
   ======================================================================== */

:root {
  /* Spacing scale (matches Tailwind's 0.25rem base) */
  --spacing-0: 0;
  --spacing-0-5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1-5: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-2-5: 0.625rem;
  --spacing-3: 0.75rem;
  --spacing-3-5: 0.875rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --spacing-40: 10rem;
  --spacing-48: 12rem;
  --spacing-56: 14rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;

  /* Neutral color palette (light mode) */
  --color-neutral-50: oklch(98.5% 0 0);
  --color-neutral-100: oklch(97% 0 0);
  --color-neutral-200: oklch(92.2% 0 0);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-neutral-900: oklch(20.5% 0 0);

  /* Gray color palette */
  --color-gray-50: oklch(98.5% .002 247.839);
  --color-gray-100: oklch(96.7% .003 264.542);
  --color-gray-200: oklch(92.8% .006 264.531);
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-400: oklch(70.7% .022 261.325);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-gray-700: oklch(37.3% .034 259.733);
  --color-gray-800: oklch(27.8% .033 256.848);
  --color-gray-900: oklch(21% .034 264.665);

  /* Wisdom theme (Blue/Indigo) */
  --wisdom-50: oklch(97% .014 254.604);
  --wisdom-100: oklch(93.2% .032 255.585);
  --wisdom-200: oklch(88.2% .059 254.128);
  --wisdom-300: oklch(80.9% .105 251.813);
  --wisdom-400: oklch(70.7% .165 254.624);
  --wisdom-500: oklch(62.3% .214 259.815);
  --wisdom-600: oklch(54.6% .245 262.881);
  --wisdom-700: oklch(48.8% .243 264.376);
  --wisdom-800: oklch(42.4% .199 265.638);
  --wisdom-900: oklch(37.9% .146 265.522);
  --wisdom-secondary-50: oklch(97.9% .021 272.314);
  --wisdom-secondary-500: oklch(58.5% .233 277.117);
  --wisdom-secondary-600: oklch(51.1% .262 276.966);
  --wisdom-secondary-700: oklch(45.7% .24 277.023);
  /* Default theme alias (overridden by feature wrappers) */
  --theme-primary-50: var(--wisdom-50);
  --theme-primary-100: var(--wisdom-100);
  --theme-primary-200: var(--wisdom-200);
  --theme-primary-300: var(--wisdom-300);
  --theme-primary-400: var(--wisdom-400);
  --theme-primary-500: var(--wisdom-500);
  --theme-primary-600: var(--wisdom-600);
  --theme-primary-700: var(--wisdom-700);
  --theme-primary-800: var(--wisdom-800);
  --theme-primary-900: var(--wisdom-900);
  --theme-secondary-50: var(--wisdom-secondary-50);
  --theme-secondary-600: var(--wisdom-secondary-600);
  --theme-secondary-700: var(--wisdom-secondary-700);
  --theme-secondary-900: color-mix(in oklab, var(--wisdom-900) 20%, transparent);

  /* Refinery theme (Green/Emerald) */
  --refinery-50: oklch(98.2% .018 155.826);
  --refinery-100: oklch(96.2% .044 156.743);
  --refinery-200: oklch(92.5% .084 155.995);
  --refinery-300: oklch(87.1% .15 154.449);
  --refinery-400: oklch(79.2% .209 151.711);
  --refinery-500: oklch(72.3% .219 149.579);
  --refinery-600: oklch(62.7% .194 149.214);
  --refinery-700: oklch(52.7% .154 150.069);
  --refinery-800: oklch(44.8% .119 151.328);
  --refinery-900: oklch(39.3% .095 152.535);
  --refinery-secondary-600: oklch(59.6% .145 163.225);
  --refinery-secondary-700: oklch(50.8% .118 165.612);

  /* Guardian theme (Orange/Amber) */
  --guardian-50: oklch(98% .016 73.684);
  --guardian-100: oklch(95.4% .038 75.164);
  --guardian-200: oklch(92.7% .071 72.319);
  --guardian-300: oklch(83.7% .128 66.29);
  --guardian-400: oklch(75% .183 55.934);
  --guardian-500: oklch(70.5% .213 47.604);
  --guardian-600: oklch(64.6% .222 41.116);
  --guardian-700: oklch(55.3% .195 38.402);
  --guardian-800: oklch(47% .157 37.304);
  --guardian-900: oklch(40.8% .123 38.172);
  --guardian-secondary-600: oklch(66.6% .179 58.318);
  --guardian-secondary-700: oklch(55.5% .163 48.998);

  /* Additional utility colors */
  --color-red-50: oklch(97.1% .013 17.38);
  --color-red-100: oklch(93.6% .032 17.717);
  --color-red-200: oklch(88.5% .062 18.334);
  --color-red-300: oklch(80.8% .114 19.571);
  --color-red-400: oklch(70.4% .191 22.216);
  --color-red-500: oklch(63.7% .237 25.331);
  --color-red-600: oklch(57.7% .245 27.325);
  --color-red-700: oklch(50.5% .213 27.518);
  --color-red-900: oklch(39.6% .141 25.723);

  --color-green-500: oklch(72.3% .219 149.579);
  --color-green-600: oklch(62.7% .194 149.214);

  --color-yellow-50: oklch(98.7% .026 102.212);
  --color-yellow-100: oklch(97.3% .071 103.193);
  --color-yellow-200: oklch(94.5% .129 101.54);
  --color-yellow-300: oklch(90.5% .182 98.111);
  --color-yellow-400: oklch(85.2% .199 91.936);
  --color-yellow-500: oklch(79.5% .184 86.047);
  --color-yellow-600: oklch(73.9% .162 81.071);
  --color-yellow-700: oklch(66.8% .135 74.284);
  --color-yellow-800: oklch(60.5% .108 68.106);

  /* Border radius */
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-fast: all 150ms ease;
  --transition-normal: all 200ms ease;
  --transition-slow: all 300ms ease;
  --transition-width: width 300ms ease-in-out;

  /* Pico CSS font-size override - lock to 100% (16px) across all breakpoints */
  --pico-font-size: 100% !important;
}

/* Dark mode color overrides */


/* ========================================================================
   GLOBAL SCROLLBAR STYLES
   ======================================================================== */

::-webkit-scrollbar {
  width: 6px;
}

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

::-webkit-scrollbar-thumb {
  background-color: color-mix(in oklab, var(--color-gray-400) 50%, transparent);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in oklab, var(--color-gray-500) 70%, transparent);
}


/* ========================================================================
   FOCUS & OUTLINE FIXES
   ======================================================================== */

/* Remove unwanted outlines and borders on interactive elements */
button,
button:focus,
button:active {
  outline: none !important;
  border: none !important;
}

a,
a:focus,
a:active {
  outline: none !important;
}

.material-icons,
.material-icons-outlined {
  outline: none !important;
  border: none !important;
}

/* Add visible focus states for accessibility */
button:focus-visible {
  outline: 2px solid var(--wisdom-500) !important;
  outline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid var(--wisdom-500) !important;
  outline-offset: 2px;
}

/* Remove focus visible outline from icon-only buttons */
button.nav-button-icon:focus-visible,
button.nav-avatar-button:focus-visible {
  outline: none !important;
}

/* ========================================================================
   BASE LAYOUT STYLES
   ======================================================================== */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.app-container {
  height: 100%;
}

/* ========================================================================
   UTILITY CLASSES - LAYOUT
   ======================================================================== */

/* Display */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.contents { display: contents; }

/* Flex direction */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

/* Flex/Grid alignment */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.self-center { align-self: center; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }

/* Flex sizing */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.grow { flex-grow: 1; }

/* Gap */
.gap-0 { gap: var(--spacing-0); }
.gap-0-5 { gap: var(--spacing-0-5); }
.gap-1 { gap: var(--spacing-1); }
.gap-1-5 { gap: var(--spacing-1-5); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-5 { gap: var(--spacing-5); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }

/* Grid */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Position */
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

/* Positioning */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.top-2 { top: var(--spacing-2); }
.top-4 { top: var(--spacing-4); }
.top-10 { top: var(--spacing-10); }
.top-16 { top: var(--spacing-16); }
.top-20 { top: var(--spacing-20); }
.right-0 { right: 0; }
.right-2 { right: var(--spacing-2); }
.right-4 { right: var(--spacing-4); }
.right-14 { right: var(--spacing-14); }
.bottom-0 { bottom: 0; }
.bottom-2 { bottom: var(--spacing-2); }
.bottom-4 { bottom: var(--spacing-4); }
.left-0 { left: 0; }
.left-1\/2 { left: 50%; }

/* Z-index */
.z-10 { z-index: 10; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* ========================================================================
   UTILITY CLASSES - SPACING
   ======================================================================== */

/* Padding */
.p-0 { padding: var(--spacing-0); }
.p-0-5 { padding: var(--spacing-0-5); }
.p-1 { padding: var(--spacing-1); }
.p-1-5 { padding: var(--spacing-1-5); }
.p-2 { padding: var(--spacing-2); }
.p-2-5 { padding: var(--spacing-2-5); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

.px-0 { padding-left: var(--spacing-0); padding-right: var(--spacing-0); }
.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }

.py-0 { padding-top: var(--spacing-0); padding-bottom: var(--spacing-0); }
.py-0-5 { padding-top: var(--spacing-0-5); padding-bottom: var(--spacing-0-5); }
.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-1-5 { padding-top: var(--spacing-1-5); padding-bottom: var(--spacing-1-5); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-2-5 { padding-top: var(--spacing-2-5); padding-bottom: var(--spacing-2-5); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }

.pt-16 { padding-top: var(--spacing-16); }
.pt-nav { padding-top: 3.375rem; } /* Match nav bar height */
.pr-2 { padding-right: var(--spacing-2); }
.pr-4 { padding-right: var(--spacing-4); }
.pr-8 { padding-right: var(--spacing-8); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-4 { padding-bottom: var(--spacing-4); }
.pb-12 { padding-bottom: var(--spacing-48); }
.pl-2 { padding-left: var(--spacing-2); }
.pl-3 { padding-left: var(--spacing-3); }
.pl-8 { padding-left: var(--spacing-8); }
.pl-10 { padding-left: var(--spacing-10); }

/* Margin */
.m-0 { margin: var(--spacing-0); }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-auto { margin: auto; }

.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }

.mt-0 { margin-top: var(--spacing-0); }
.mt-0-5 { margin-top: var(--spacing-0-5); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-auto { margin-top: auto; }
.mr-0 { margin-right: var(--spacing-0); }
.mr-1 { margin-right: var(--spacing-1); }
.mr-1-5 { margin-right: var(--spacing-1-5); }
.mr-2 { margin-right: var(--spacing-2); }
.mr-3 { margin-right: var(--spacing-3); }
.mr-10 { margin-right: var(--spacing-10); }
.mb-0 { margin-bottom: var(--spacing-0); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }
.ml-0 { margin-left: var(--spacing-0); }
.ml-0-5 { margin-left: var(--spacing-0-5); }
.ml-1 { margin-left: var(--spacing-1); }
.ml-2 { margin-left: var(--spacing-2); }
.ml-3 { margin-left: var(--spacing-3); }
.ml-4 { margin-left: var(--spacing-4); }
.ml-6 { margin-left: var(--spacing-6); }
.ml-8 { margin-left: var(--spacing-8); }
.ml-10 { margin-left: var(--spacing-10); }
.ml-auto { margin-left: auto; }

/* Space between */
.space-x-1 > * + * { margin-left: var(--spacing-1); }
.space-x-2 > * + * { margin-left: var(--spacing-2); }
.space-x-3 > * + * { margin-left: var(--spacing-3); }
.space-x-4 > * + * { margin-left: var(--spacing-4); }
.space-x-8 > * + * { margin-left: var(--spacing-8); }

.space-y-0-5 > * + * { margin-top: var(--spacing-0-5); }
.space-y-1 > * + * { margin-top: var(--spacing-1); }
.space-y-2 > * + * { margin-top: var(--spacing-2); }
.space-y-3 > * + * { margin-top: var(--spacing-3); }
.space-y-4 > * + * { margin-top: var(--spacing-4); }
.space-y-5 > * + * { margin-top: var(--spacing-5); }
.space-y-6 > * + * { margin-top: var(--spacing-6); }

/* ========================================================================
   UTILITY CLASSES - SIZING
   ======================================================================== */

/* Width */
.w-2 { width: var(--spacing-2); }
.w-3-5 { width: var(--spacing-3-5); }
.w-4 { width: var(--spacing-4); }
.w-5 { width: var(--spacing-5); }
.w-6 { width: var(--spacing-6); }
.w-8 { width: var(--spacing-8); }
.w-10 { width: var(--spacing-10); }
.w-11 { width: calc(var(--spacing-10) + var(--spacing-1)); }
.w-12 { width: var(--spacing-12); }
.w-16 { width: var(--spacing-16); }
.w-20 { width: var(--spacing-20); }
.w-48 { width: var(--spacing-48); }
.w-56 { width: var(--spacing-56); }
.w-64 { width: var(--spacing-64); }
.w-72 { width: var(--spacing-72); }
.w-80 { width: var(--spacing-80); }
.w-96 { width: var(--spacing-96); }
.w-full { width: 100%; }
.w-screen { width: 100vw; }

.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }

.min-w-0 { min-width: 0; }

/* Height */
.h-2 { height: var(--spacing-2); }
.h-3-5 { height: var(--spacing-3-5); }
.h-4 { height: var(--spacing-4); }
.h-5 { height: var(--spacing-5); }
.h-6 { height: var(--spacing-6); }
.h-8 { height: var(--spacing-8); }
.h-10 { height: var(--spacing-10); }
.h-12 { height: var(--spacing-12); }
.h-16 { height: var(--spacing-16); }
.h-full { height: 100%; }
.h-screen { height: 100vh; }

.min-h-0 { min-height: 0; }
.min-h-screen { min-height: 100vh; }
.min-h-60px { min-height: 60px; }
.min-h-full { min-height: 100%; }

.max-h-64 { max-height: var(--spacing-64); }
.max-h-60vh { max-height: 60vh; }
.max-h-90vh { max-height: 90vh; }
.max-h-150px { max-height: 150px; }

/* ========================================================================
   UTILITY CLASSES - TYPOGRAPHY
   ======================================================================== */

/* Font size */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

/* Font weight */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Text align */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Text decoration */
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }

/* Text overflow */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }

/* Letter spacing */
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wider { letter-spacing: 0.05em; }

/* ========================================================================
   UTILITY CLASSES - COLORS
   ======================================================================== */

/* Text colors */
.text-white { color: white; }
.text-black { color: black; }

.text-neutral-100 { color: var(--color-neutral-100); }
.text-neutral-200 { color: var(--color-neutral-200); }
.text-neutral-300 { color: var(--color-neutral-300); }
.text-neutral-400 { color: var(--color-neutral-400); }
.text-neutral-500 { color: var(--color-neutral-500); }
.text-neutral-600 { color: var(--color-neutral-600); }
.text-neutral-700 { color: var(--color-neutral-700); }
.text-neutral-800 { color: var(--color-neutral-800); }
.text-neutral-900 { color: var(--color-neutral-900); }

.text-gray-50 { color: var(--color-gray-50); }
.text-gray-100 { color: var(--color-gray-100); }
.text-gray-200 { color: var(--color-gray-200); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-800 { color: var(--color-gray-800); }
.text-gray-900 { color: var(--color-gray-900); }

.text-red-50 { color: var(--color-red-50); }
.text-red-100 { color: var(--color-red-100); }
.text-red-400 { color: var(--color-red-400); }
.text-red-500 { color: var(--color-red-500); }
.text-red-600 { color: var(--color-red-600); }
.text-red-700 { color: var(--color-red-700); }
.text-red-800 { color: var(--color-red-900); }

.text-green-400 { color: var(--refinery-400); }
.text-green-500 { color: var(--color-green-500); }
.text-green-600 { color: var(--color-green-600); }
.text-green-700 { color: var(--refinery-700); }
.text-green-800 { color: var(--refinery-800); }

.text-blue-100 { color: var(--wisdom-100); }
.text-blue-200 { color: var(--wisdom-200); }
.text-blue-300 { color: var(--wisdom-300); }
.text-blue-400 { color: var(--wisdom-400); }
.text-blue-500 { color: var(--wisdom-500); }
.text-blue-600 { color: var(--wisdom-600); }
.text-blue-700 { color: var(--wisdom-700); }
.text-blue-800 { color: var(--wisdom-800); }
.text-blue-900 { color: var(--wisdom-900); }

.text-purple-500 { color: var(--wisdom-secondary-500); }

.text-orange-400 { color: var(--guardian-400); }
.text-orange-500 { color: var(--guardian-500); }
.text-orange-600 { color: var(--guardian-600); }

.text-yellow-400 { color: var(--color-yellow-400); }
.text-yellow-500 { color: var(--color-yellow-500); }
.text-yellow-700 { color: var(--color-yellow-300); }
.text-yellow-800 { color: var(--color-yellow-200); }

/* Background colors */
.bg-white { background-color: white; }
.bg-black { background-color: black; }

.bg-neutral-50 { background-color: var(--color-neutral-50); }
.bg-neutral-100 { background-color: var(--color-neutral-100); }
.bg-neutral-200 { background-color: var(--color-neutral-200); }
.bg-neutral-700 { background-color: var(--color-neutral-700); }
.bg-neutral-800 { background-color: var(--color-neutral-800); }
.bg-neutral-900 { background-color: var(--color-neutral-900); }

.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-200 { background-color: var(--color-gray-200); }
.bg-gray-600 { background-color: var(--color-gray-600); }
.bg-gray-900 { background-color: var(--color-gray-900); }

.bg-blue-50 { background-color: var(--wisdom-50); }
.bg-blue-100 { background-color: var(--wisdom-100); }
.bg-blue-500 { background-color: var(--wisdom-500); }
.bg-blue-600 { background-color: var(--wisdom-600); }

.bg-red-50 { background-color: var(--color-red-50); }
.bg-red-100 { background-color: var(--color-red-100); }
.bg-red-500 { background-color: var(--color-red-500); }
.bg-red-600 { background-color: var(--color-red-600); }
.bg-red-700 { background-color: var(--color-red-700); }
.bg-red-900 { background-color: var(--color-red-900); }

.bg-orange-50 { background-color: var(--guardian-50); }
.bg-orange-100 { background-color: var(--guardian-100); }
.bg-orange-600 { background-color: var(--guardian-600); }

.bg-green-50 { background-color: var(--refinery-50); }
.bg-green-100 { background-color: var(--refinery-100); }
.bg-green-500 { background-color: var(--refinery-500); }
.bg-green-900 { background-color: var(--refinery-900); }

.bg-yellow-50 { background-color: var(--color-yellow-50); }
.bg-yellow-100 { background-color: var(--color-yellow-100); }
.bg-yellow-500 { background-color: var(--color-yellow-500); }
.bg-yellow-900 { background-color: var(--color-yellow-200); }

.bg-blue-200 { background-color: var(--wisdom-200); }
.bg-blue-700 { background-color: var(--wisdom-700); }
.bg-blue-800 { background-color: var(--wisdom-800); }
.bg-blue-900 { background-color: var(--wisdom-900); }

.bg-opacity-20 { --tw-bg-opacity: 0.2; }
.bg-opacity-30 { --tw-bg-opacity: 0.3; }
.bg-opacity-50 { --tw-bg-opacity: 0.5; }

/* Background gradients */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }

.from-blue-50 { --tw-gradient-from: var(--wisdom-50); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-blue-400 { --tw-gradient-from: var(--wisdom-400); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-blue-500 { --tw-gradient-from: var(--wisdom-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-gray-50 { --tw-gradient-from: var(--color-gray-50); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-neutral-50 { --tw-gradient-from: var(--color-neutral-50); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-green-500 { --tw-gradient-from: var(--refinery-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-orange-500 { --tw-gradient-from: var(--guardian-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

.to-indigo-50 { --tw-gradient-to: var(--wisdom-secondary-500); }
.to-indigo-500 { --tw-gradient-to: var(--wisdom-secondary-500); }
.to-indigo-600 { --tw-gradient-to: var(--wisdom-secondary-600); }
.to-emerald-600 { --tw-gradient-to: var(--refinery-secondary-600); }
.to-amber-600 { --tw-gradient-to: var(--guardian-secondary-600); }
.to-neutral-50 { --tw-gradient-to: var(--color-neutral-50); }

/* Border colors */
.border-white { border-color: white; }
.border-transparent { border-color: transparent; }
.border-current { border-color: currentColor; }

.border-neutral-100 { border-color: var(--color-neutral-100); }
.border-neutral-200 { border-color: var(--color-neutral-200); }
.border-neutral-300 { border-color: var(--color-neutral-300); }
.border-neutral-500 { border-color: var(--color-neutral-500); }
.border-neutral-600 { border-color: var(--color-neutral-600); }
.border-neutral-700 { border-color: var(--color-neutral-700); }

.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-300 { border-color: var(--color-gray-300); }

.border-blue-200 { border-color: var(--wisdom-200); }
.border-blue-300 { border-color: var(--wisdom-300); }
.border-blue-400 { border-color: var(--wisdom-400); }
.border-blue-500 { border-color: var(--wisdom-500); }
.border-blue-600 { border-color: var(--wisdom-600); }

.border-red-200 { border-color: var(--color-red-200); }
.border-red-300 { border-color: var(--color-red-300); }
.border-red-400 { border-color: var(--color-red-400); }
.border-red-700 { border-color: var(--color-red-700); }
.border-red-800 { border-color: var(--color-red-900); }
.border-red-900 { border-color: var(--color-red-900); }

.border-green-200 { border-color: var(--refinery-200); }
.border-green-300 { border-color: var(--refinery-300); }
.border-green-400 { border-color: var(--refinery-400); }

.border-yellow-200 { border-color: var(--color-yellow-200); }
.border-yellow-300 { border-color: var(--color-yellow-300); }
.border-yellow-400 { border-color: var(--color-yellow-400); }

.border-orange-600 { border-color: var(--guardian-600); }

.border-blue-700 { border-color: var(--wisdom-700); }
.border-blue-800 { border-color: var(--wisdom-800); }

/* ========================================================================
   UTILITY CLASSES - BORDERS
   ======================================================================== */

.border { border-width: 1px; border-style: solid; }
.border-0 { border-width: 0; }
.border-2 { border-width: 2px; border-style: solid; }
.border-4 { border-width: 4px; border-style: solid; }

.border-t { border-top-width: 1px; border-top-style: solid; }
.border-r { border-right-width: 1px; border-right-style: solid; }
.border-r-4 { border-right-width: 4px; border-right-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.border-l { border-left-width: 1px; border-left-style: solid; }
.border-l-4 { border-left-width: 4px; border-left-style: solid; }

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

.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

.rounded-t-xl { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
.rounded-b-xl { border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
.rounded-l-lg { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
.rounded-l-xl { border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); }
.rounded-r-xl { border-top-right-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }

/* ========================================================================
   UTILITY CLASSES - SHADOWS & EFFECTS
   ======================================================================== */

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ========================================================================
   UTILITY CLASSES - TRANSITIONS & ANIMATIONS
   ======================================================================== */

.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* ========================================================================
   UTILITY CLASSES - INTERACTIVITY
   ======================================================================== */

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

.pointer-events-none { pointer-events: none; }

.resize-none { resize: none; }
.resize-y { resize: vertical; }
.resize { resize: both; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }

.appearance-none { appearance: none; }

/* ========================================================================
   UTILITY CLASSES - MISC
   ======================================================================== */

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

.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

.group:hover .group-hover\:opacity-100 { opacity: 1; }

.transform { transform: var(--tw-transform); }
.rotate-180 { transform: rotate(180deg); }
.translate-y-full { transform: translateY(100%); }
.-translate-y-0-5 { transform: translateY(-0.125rem); }
.-translate-x-1\/2 { transform: translateX(-50%); }

.whitespace-pre-line { white-space: pre-line; }

.italic { font-style: italic; }

/* ========================================================================
   GLOBAL ANIMATIONS
   ======================================================================== */

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Toast notifications */
.toast {
  transition: all 0.3s ease-in-out;
}

/* WASM Loading Progress Indicator */
.wasm-progress-container {
  max-width: 500px;
  margin: 0 auto;
}

.wasm-progress-bar {
  position: relative;
  overflow: hidden;
}

.wasm-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: translateX(-100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.wasm-progress-smooth {
  transition: width 0.3s ease-out;
}

/* ========================================================================
   NAVIGATION BAR COMPONENTS
   ======================================================================== */

/* Main navigation container */
.nav-bar {
  position: fixed;
  top: 0;
  z-index: 50;
  width: 100%;
  background-color: white;
  border-bottom: 1px solid var(--color-neutral-200);
}


.nav-bar-inner {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-4); /* Further reduced by 10px - removed vertical padding entirely */
  width: 100%;
  height: 3.375rem; /* Fixed height to match nav bar offset */
}

@media (min-width: 1024px) {
  .nav-bar-inner {
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
  }
}

/* Navigation content wrapper */
.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Brand section */
.nav-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.nav-logo {
  display: flex;
  margin-left: var(--spacing-2);
}

@media (min-width: 768px) {
  .nav-logo {
    margin-right: var(--spacing-24);
  }
}

.nav-logo-text {
  align-self: center;
  font-size: 1.5rem;  /* Increased from 1rem */
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-neutral-900);
}

@media (min-width: 640px) {
  .nav-logo-text {
    font-size: 1.5rem;  /* Keep consistent at 1.5rem */
  }
}


/* Main menu container */
.nav-menu {
  display: flex;
  align-items: center;
}

.nav-menu-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu-list > li {
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-2);
}

.nav-menu-list > li:not(:first-child) {
  margin-left: var(--spacing-4);
}

.nav-menu-list > li:not(:last-child) {
  position: relative;
  padding-right: var(--spacing-4);
}

.nav-menu-list > li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;  /* Creates spacing from top */
  bottom: 20%;  /* Creates spacing from bottom */
  width: 1px;
  background-color: var(--color-neutral-200);
}


/* Navigation items */
.nav-item {
  display: flex;
  align-items: center;
  position: relative;
  color: var(--color-neutral-900);
  text-decoration: none;
  transition: color 200ms;
}


.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(100vh - 3.375rem); /* Updated for reduced nav bar height */
  background-color: var(--wisdom-500);
  opacity: 0;
  transition: opacity 200ms;
}

/* Active states for each app */
.nav-item-wisdom:hover {
  color: var(--wisdom-600);
}


.nav-item-wisdom.active {
  color: var(--wisdom-600);
}


.nav-item-refinery:hover {
  color: var(--refinery-600);
}


.nav-item-refinery.active {
  color: var(--refinery-600);
}


.nav-item-guardian:hover {
  color: var(--guardian-600);
}


.nav-item-guardian.active {
  color: var(--guardian-600);
}


/* Right side actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-left: auto;
}

/* Navigation button/icon style */
.nav-button-icon {
  position: relative;
  padding: var(--spacing-1-5);
  color: var(--color-neutral-500);
  border-radius: var(--radius-lg);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 200ms;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-button-icon:hover {
  color: var(--wisdom-600);
  background-color: var(--wisdom-50);
}


.nav-button-icon:focus {
  outline: none;
}

/* Beta Warning link */
.nav-beta-warning {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3);
  margin-right: var(--spacing-4);
  color: var(--color-yellow-800);
  border-radius: var(--radius-lg);
  background-color: var(--color-yellow-50);
  border: 1px solid var(--color-yellow-200);
  text-decoration: none;
  cursor: pointer;
  transition: all 200ms;
  font-size: 0.875rem;
  font-weight: 400;
}

.nav-beta-warning:hover {
  color: var(--color-yellow-900);
  background-color: var(--color-yellow-100);
  border-color: var(--color-yellow-300);
}


.nav-beta-warning-icon {
  color: var(--color-yellow-600) !important;
  font-size: 1.25rem;
}


/* Badge for notifications and tasks */
.nav-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4);
  height: var(--spacing-4);
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  background-color: var(--color-red-500);
  border: 1px solid white;
  border-radius: var(--radius-full);
  top: -0.125rem;  /* Pulled in to overlap icon */
  right: -0.125rem; /* Pulled in to overlap icon */
  z-index: 10;
  box-shadow: var(--shadow-sm);
}


.nav-badge-heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

.nav-badge-blue {
  background-color: var(--wisdom-500);
}

/* User avatar */
.nav-avatar-button {
  display: flex;
  border-radius: var(--radius-full);
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 200ms;
}

.nav-avatar-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--wisdom-300);
}


.nav-avatar {
  width: var(--spacing-8);
  height: var(--spacing-8);
  border-radius: var(--radius-full);
  background-image: linear-gradient(to right, var(--wisdom-500), var(--wisdom-secondary-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
}

/* ========================================================================
   DROPDOWN COMPONENTS
   ======================================================================== */

/* Dropdown container */
.nav-dropdown {
  position: absolute;
  right: var(--spacing-4);
  top: var(--spacing-16);
  width: var(--spacing-96);
  background-color: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-neutral-100);
  z-index: 50;
}


.nav-dropdown-tasks {
  right: var(--spacing-14);
}

.nav-dropdown-user {
  width: var(--spacing-80);
}

/* Dropdown header */
.nav-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-1-5) var(--spacing-3);
  background-image: linear-gradient(
    135deg,
    color-mix(in oklab, var(--wisdom-200) 75%, var(--wisdom-300) 25%),
    var(--wisdom-600)
  );
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  color: white;
}


.nav-dropdown-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: inherit;
  display: flex;
  align-items: center;
}

.nav-dropdown-title .material-icons,
.nav-dropdown-title .material-icons-outlined,
.nav-dropdown-title .material-symbols-outlined {
  color: color-mix(in oklab, white 85%, var(--wisdom-200) 15%);
}

/* Dropdown content */
.nav-dropdown-content {
  max-height: var(--spacing-64);
  overflow-y: auto;
  padding: var(--spacing-1) 0;
}

.nav-dropdown-items {
  padding: 0 var(--spacing-2);
  margin: 0;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-1) var(--spacing-2);
  color: var(--color-neutral-700);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color 150ms;
}


.nav-dropdown-item:hover {
  background-color: var(--color-neutral-50);
}


.nav-dropdown-item-text {
  font-size: 0.875rem;
}

.nav-dropdown-item-time {
  font-size: 0.75rem;
  color: var(--color-neutral-500);
  margin-right: var(--spacing-2);
}


.nav-dropdown-item-icon {
  color: var(--color-neutral-400);
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity 200ms;
}

.nav-dropdown-item:hover .nav-dropdown-item-icon {
  opacity: 1;
}

/* Task spinner */
.nav-task-spinner {
  width: var(--spacing-3-5);
  height: var(--spacing-3-5);
  border-radius: var(--radius-full);
  border: 2px solid var(--wisdom-500);
  border-top-color: transparent;
  animation: spin 1s linear infinite;
  margin-left: 2px;
}

/* User dropdown specific styles */
.nav-user-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-neutral-100);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  background-color: rgba(59, 130, 246, 0.04);
}


.nav-user-info {
  display: flex;
  align-items: center;
}

.nav-user-profile-icon {
  font-size: 1.75rem;
  margin-right: var(--spacing-3);
}

.nav-user-email {
  color: var(--color-neutral-800);
  font-weight: 600;
}


.nav-user-menu {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-2) 0;
  list-style: none;
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-neutral-700);
}


.nav-user-menu li {
  display: block;
  width: 100%;
}

.nav-user-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-1-5) var(--spacing-4);
  text-align: left;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms;
  color: inherit;
  text-decoration: none;
}

.nav-user-menu-item:hover {
  background-color: var(--color-neutral-50);
}


.nav-user-menu-item .material-icons {
  color: var(--wisdom-500);
  margin-right: var(--spacing-2);
}


.nav-user-menu-item-policy {
  display: flex;
  flex-direction: column;
}

.nav-user-menu-item-policy-header {
  display: flex;
  align-items: center;
  width: 100%;
}

.nav-user-menu-item-policy-desc {
  font-size: 0.75rem;
  color: var(--color-neutral-500);
  margin-left: var(--spacing-8);
  margin-top: var(--spacing-1);
}


.nav-user-logout {
  padding: var(--spacing-2) 0;
  border-top: 1px solid var(--color-neutral-100);
}


.nav-user-logout-button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-5);
  text-align: left;
  color: var(--color-red-600);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms;
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

.nav-user-logout-button:hover {
  background-color: var(--color-red-50);
}


/* ========================================================================
   LOADING SCREEN
   ======================================================================== */

.loading-screen {
  position: absolute;
  inset: 0;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}


.loading-screen-content {
  text-align: center;
}

.loading-screen-spinner {
  margin-bottom: var(--spacing-4);
}

.loading-screen-spinner svg {
  animation: spin 1s linear infinite;
  height: var(--spacing-12);
  width: var(--spacing-12);
  margin-left: auto;
  margin-right: auto;
  color: var(--wisdom-600);
}


.loading-screen-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-neutral-900);
  margin-bottom: var(--spacing-2);
}


.loading-screen-progress {
  width: var(--spacing-64);
  background-color: var(--color-neutral-200);
  border-radius: var(--radius-full);
  height: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}


.loading-screen-progress-bar {
  background-color: var(--wisdom-600);
  height: var(--spacing-2);
  border-radius: var(--radius-full);
  transition: width 300ms;
}


.loading-screen-status {
  font-size: 0.875rem;
  color: var(--color-neutral-600);
}


/* ========================================================================
   MAIN CONTENT LAYOUT
   ======================================================================== */

.main-content-wrapper {
  padding-top: 3.375rem;  /* Reduced to account for smaller nav bar */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-content-inner {
  flex: 1 1 0%;
  overflow-y: auto;
  width: 100%;
}

.main-content {
  height: 100%;
}

.app-container {
  height: 100%;
  position: relative;
}

/* ========================================================================
   AUTH PAGE COMPONENTS (Login, Register, etc.)
   ======================================================================== */

/* Shared page body layout */
.page-body {
  min-height: 100vh;
  background-color: var(--color-gray-50);
  color: var(--color-gray-900);
}


/* Page body modifiers */
.page-body--auth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
}

/* Auth container - centers the card */
.auth-container {
  width: 100%;
  max-width: 28rem; /* max-w-md */
}

/* Auth card - the white box */
.auth-card {
  background-color: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Auth card body */
.auth-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .auth-card__body {
    padding: 2rem;
  }
}

@media (min-width: 768px) {
  .auth-card__body {
    gap: 1.5rem;
  }
}

/* Auth form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  width: 100%;
}

/* Auth form field container */
.auth-form > div {
  width: 100%;
  max-width: 400px;
}

@media (min-width: 768px) {
  .auth-form {
    gap: 1.5rem;
  }
}

/* Auth title */
.auth-title {
  font-size: 1.875rem; /* text-3xl */
  line-height: 2.25rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-neutral-900);
}

/* Form label */
.form-label {
  display: block;
  margin-bottom: var(--spacing-3);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-neutral-900);
  text-align: center;
}

/* Auth page input overrides - larger, more visible */
.page-body--auth .input-base {
  font-size: 1.125rem;
  padding: 1rem 1.5rem;
  border: 2px solid var(--color-neutral-300);
  background-color: white;
  border-radius: 12px;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.page-body--auth .input-base:focus {
  border-color: var(--wisdom-600);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

/* Auth page button - match input styling */
.page-body--auth .btn-primary {
  max-width: 400px;
  width: 100%;
  font-size: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
}

/* Auth description text */
.auth-description {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--color-gray-500);
  text-align: center;
  max-width: 400px;
}

/* Auth link - used for "Try again" and similar links */
.auth-link {
  font-weight: 500;
  color: var(--wisdom-600);
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
}

/* Auth alert */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.5rem;
  border-width: 1px;
}

.auth-alert--error {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.auth-alert--info {
  background-color: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.auth-alert__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.auth-alert__message {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

/* Primary button */
.btn-primary {
  width: 100%;
  padding: var(--spacing-2-5) var(--spacing-5);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  color: white;
  background-color: var(--wisdom-600);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 150ms;
}

.btn-primary:hover {
  background-color: var(--wisdom-700);
}

.btn-primary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--wisdom-300);
}

/* ========================================================================
   PRIMARY COLOR UTILITIES (for login and auth pages)
   ======================================================================== */

.bg-primary-600 { background-color: var(--wisdom-600); }
.bg-primary-700 { background-color: var(--wisdom-700); }

.text-primary-600 { color: var(--wisdom-600); }

.border-primary-600 { border-color: var(--wisdom-600); }

/* Focus states for primary colors */
.focus\:ring-primary-300:focus {
  --tw-ring-color: var(--wisdom-300);
  box-shadow: 0 0 0 3px var(--tw-ring-color);
}

.focus\:ring-primary-800:focus {
  --tw-ring-color: var(--wisdom-800);
  box-shadow: 0 0 0 3px var(--tw-ring-color);
}

.focus\:border-primary-600:focus {
  border-color: var(--wisdom-600);
}

/* Hover states for primary colors */
.hover\:bg-primary-700:hover {
  background-color: var(--wisdom-700);
}

/* ========================================================================
   HOVER & FOCUS STATE UTILITIES
   ======================================================================== */

/* Text color hovers */
.hover\:text-gray-600:hover { color: var(--color-gray-600); }
.hover\:text-gray-700:hover { color: var(--color-gray-700); }
.hover\:text-gray-200:hover { color: var(--color-gray-200); }
.hover\:text-gray-300:hover { color: var(--color-gray-300); }
.hover\:text-neutral-700:hover { color: var(--color-neutral-700); }
.hover\:text-neutral-300:hover { color: var(--color-neutral-300); }
.hover\:text-blue-700:hover { color: var(--wisdom-700); }
.hover\:text-blue-300:hover { color: var(--wisdom-300); }

/* Background color hovers */
.hover\:bg-gray-50:hover { background-color: var(--color-gray-50); }
.hover\:bg-gray-200:hover { background-color: var(--color-gray-200); }
.hover\:bg-gray-300:hover { background-color: var(--color-gray-300); }
.hover\:bg-gray-600:hover { background-color: var(--color-gray-600); }
.hover\:bg-neutral-50:hover { background-color: var(--color-neutral-50); }
.hover\:bg-neutral-100:hover { background-color: var(--color-neutral-100); }
.hover\:bg-neutral-200:hover { background-color: var(--color-neutral-200); }
.hover\:bg-neutral-300:hover { background-color: var(--color-neutral-300); }
.hover\:bg-neutral-600:hover { background-color: var(--color-neutral-600); }
.hover\:bg-neutral-700:hover { background-color: var(--color-neutral-700); }
.hover\:bg-neutral-800:hover { background-color: var(--color-neutral-800); }
.hover\:bg-blue-700:hover { background-color: var(--wisdom-700); }
.hover\:bg-red-700:hover { background-color: var(--color-red-700); }

/* Border color hovers */
.hover\:border-neutral-300:hover { border-color: var(--color-neutral-300); }
.hover\:border-neutral-600:hover { border-color: var(--color-neutral-600); }

/* Focus ring utilities */
.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px var(--tw-ring-color, var(--wisdom-500));
}

.focus\:ring-4:focus {
  box-shadow: 0 0 0 4px var(--tw-ring-color, var(--wisdom-300));
}

.focus\:ring-blue-300:focus {
  --tw-ring-color: var(--wisdom-300);
}

.focus\:ring-blue-500:focus {
  --tw-ring-color: var(--wisdom-500);
}

.focus\:ring-blue-800:focus {
  --tw-ring-color: var(--wisdom-800);
}

.focus\:ring-red-500:focus {
  --tw-ring-color: var(--color-red-500);
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus\:border-blue-500:focus {
  border-color: var(--wisdom-500);
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Peer selectors for custom checkboxes/toggles */
.peer:focus ~ .peer-focus\:ring-4 {
  box-shadow: 0 0 0 4px var(--tw-ring-color, var(--wisdom-300));
}

.peer:focus ~ .peer-focus\:ring-blue-300 {
  --tw-ring-color: var(--wisdom-300);
}

.peer:focus ~ .peer-focus\:ring-blue-800 {
  --tw-ring-color: var(--wisdom-800);
}

.peer:focus ~ .peer-focus\:outline-none {
  outline: none;
}

.peer:checked ~ .peer-checked\:bg-blue-600 {
  background-color: var(--wisdom-600);
}

.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
  transform: translateX(100%);
}

.peer:checked ~ .peer-checked\:after\:border-white::after {
  border-color: white;
}

/* After pseudo-element utilities for custom controls */
.after\:content-\[\'\'\\]::after {
  content: '';
}

.after\:absolute::after {
  position: absolute;
}

.after\:top-\[2px\]::after {
  top: 2px;
}

.after\:left-\[2px\]::after {
  left: 2px;
}

.after\:bg-white::after {
  background-color: white;
}

.after\:border-gray-300::after {
  border-color: var(--color-gray-300);
}

.after\:border::after {
  border-width: 1px;
  border-style: solid;
}

.after\:rounded-full::after {
  border-radius: var(--radius-full);
}

.after\:h-5::after {
  height: var(--spacing-5);
}

.after\:w-5::after {
  width: var(--spacing-5);
}

.after\:transition-all::after {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ========================================================================
   RESPONSIVE UTILITIES
   ======================================================================== */

/* Small screens (640px and up) */
@media (min-width: 640px) {
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:max-w-md { max-width: 28rem; }
  .sm\:p-8 { padding: var(--spacing-8); }
  .sm\:px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
}

/* Medium screens (768px and up) */
@media (min-width: 768px) {
  .md\:space-y-6 > * + * { margin-top: var(--spacing-6); }
  .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .md\:mt-0 { margin-top: var(--spacing-0); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Large screens (1024px and up) */
@media (min-width: 1024px) {
  .lg\:px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
  .lg\:py-0 { padding-top: var(--spacing-0); padding-bottom: var(--spacing-0); }
}

/* Extra large screens (1280px and up) */
@media (min-width: 1280px) {
  .xl\:p-0 { padding: var(--spacing-0); }
}

/* ========================================================================
   DARK MODE UTILITIES
   ======================================================================== */

/* Dark mode is handled via 


/* ========================================================================
   WASM TEMPLATE SEMANTIC CLASSES
   ======================================================================== */

/* Item Header */
.item-header {
  height: 2.5rem;
  padding: 0 var(--spacing-6);
  border-bottom: 1px solid var(--color-neutral-200);
  background-color: white;
  box-shadow: var(--shadow-sm);
}

.item-header > div {
  height: 100%;
  min-height: 2.5rem;
}

.item-header h1 {
  line-height: 1.2;
  font-size: 1rem;
}


/* Popup Menu - Wisdom Theme Overrides */
.popup-menu-input:focus {
  border-color: var(--wisdom-500);
  box-shadow: 0 0 0 1px var(--wisdom-500);
}

.popup-menu-save-button {
  background-color: var(--wisdom-600);
}

.popup-menu-save-button:hover {
  background-color: var(--wisdom-700);
}

/* Loading Container */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.loading-spinner {
  animation: spin 1s linear infinite;
  border-radius: var(--radius-full);
  height: var(--spacing-10);
  width: var(--spacing-10);
  border: 2px solid transparent;
  border-top: 2px solid var(--color-neutral-500);
}

.loading-text {
  margin-left: var(--spacing-3);
  font-size: var(--text-base);
  color: var(--color-neutral-700);
}


/* ========================================================================
   SUPPORT PAGE STYLES
   ======================================================================== */

.page-body--support {
  height: 100vh;
  overflow: hidden;
}

.tab-button {
  transition: all 0.2s ease;
}