/* ============================================
   INTEGRATOR - Main Application Stylesheet
   ============================================
   Pure CSS with Sprockets
   ============================================ */

/*

 *
 * === BASE RESET & FORMS ===

 *
 * === CUSTOM FONTS ===

 *
 * === UTILITIES ===

 *
 * === ANIMATIONS ===

 *
 * === COLOR SYSTEM ===

 *
 * === THEME PALETTES ===













 *
 * === CORE COMPONENTS ===





 *
 * === UI COMPONENTS ===


































 *
 * === RICH TEXT ===


 *
 * === SPECIALIZED ===


 *
 * === EXTERNAL LIBRARIES ===


 */
/* ============================================
   FORMS BASE - Form Element Base Styles
   ============================================
   These styles provide sensible defaults for form elements.
   ============================================ */

/* Reset form elements to have consistent styling */
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
  appearance: none;
  background-color: #fff;
  border-color: #d1d5db; /* gray-300 */
  border-width: 1px;
  border-radius: 0.375rem;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: var(--highlight-base, #3b82f6);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: var(--highlight-base, #3b82f6);
}

/* Input placeholder styles */
input::placeholder,
textarea::placeholder {
  color: #9ca3af; /* gray-400 */
  opacity: 1;
}

/* Select arrow styling */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  print-color-adjust: exact;
}

/* Multiple select */
select[multiple] {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  print-color-adjust: unset;
}

/* Checkbox and Radio base styles */
[type='checkbox'],
[type='radio'] {
  appearance: none;
  padding: 0;
  print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: var(--highlight-base, #3b82f6);
  background-color: #fff;
  border-color: #d1d5db; /* gray-300 */
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0.25rem;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,
[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: var(--highlight-base, #3b82f6);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,
[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

[type='checkbox']:checked:hover,
[type='checkbox']:checked:focus,
[type='radio']:checked:hover,
[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:indeterminate:hover,
[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

/* File input */
[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

/* Disabled state */
input:disabled,
textarea:disabled,
select:disabled {
  background-color: #f3f4f6; /* gray-100 */
  cursor: not-allowed;
  opacity: 0.7;
}

/* Range input */
[type='range'] {
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  height: 0.5rem;
  border-radius: 0.25rem;
  background-color: #e5e7eb; /* gray-200 */
}

[type='range']::-webkit-slider-thumb {
  appearance: none;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background-color: var(--highlight-base, #3b82f6);
  cursor: pointer;
  border: 0;
}

[type='range']::-moz-range-thumb {
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background-color: var(--highlight-base, #3b82f6);
  cursor: pointer;
  border: 0;
}

[type='range']:focus {
  outline: none;
}

[type='range']:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

[type='range']:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
/* ===========================================
   App Fonts Configuration
   Current: Exo (variable font)
   Alternative: Inter
   =========================================== */

/* Exo Variable Font - Official App Font */
@font-face {
  font-family: 'Exo';
  src: url(/fonts/Exo-VariableFont_wght.ttf) format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Exo';
  src: url(/fonts/Exo-Italic-VariableFont_wght.ttf) format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Inter Font - Alternative */
@font-face {
  font-family: 'Inter';
  src: url(/fonts/Inter-Regular.otf) format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url(/fonts/Inter-Bold.otf) format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ============================================
   UTILITIES CSS - Pure CSS Utilities
   ============================================
   Clases utilitarias en CSS puro.
   Organizado por categorías para fácil referencia.
   ============================================ */

/* ==========================================
   DISPLAY
   ========================================== */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* ==========================================
   FLEXBOX
   ========================================== */
/* Direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align Self */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }

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

/* ==========================================
   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)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }

.grid-flow-row { grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }

/* Column Span */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

/* Row Span */
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-full { grid-row: 1 / -1; }

/* ==========================================
   GAP (Flexbox & Grid)
   ========================================== */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-8 { column-gap: 2rem; }

.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-y-8 { row-gap: 2rem; }

/* ==========================================
   WIDTH
   ========================================== */
.w-0 { width: 0; }
.w-1 { width: 0.25rem; }
.w-2 { width: 0.5rem; }
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-32 { width: 8rem; }
.w-40 { width: 10rem; }
.w-48 { width: 12rem; }
.w-56 { width: 14rem; }
.w-64 { width: 16rem; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-min { width: min-content; }
.w-max { width: max-content; }
.w-fit { width: fit-content; }

/* Fractional widths */
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }
.w-1\/5 { width: 20%; }
.w-2\/5 { width: 40%; }
.w-3\/5 { width: 60%; }
.w-4\/5 { width: 80%; }

/* Min/Max Width */
.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.max-w-none { max-width: none; }
.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-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-full { max-width: 100%; }
.max-w-screen-sm { max-width: 640px; }
.max-w-screen-md { max-width: 768px; }
.max-w-screen-lg { max-width: 1024px; }
.max-w-screen-xl { max-width: 1280px; }

/* ==========================================
   HEIGHT
   ========================================== */
.h-0 { height: 0; }
.h-1 { height: 0.25rem; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-32 { height: 8rem; }
.h-40 { height: 10rem; }
.h-48 { height: 12rem; }
.h-56 { height: 14rem; }
.h-64 { height: 16rem; }
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-min { height: min-content; }
.h-max { height: max-content; }
.h-fit { height: fit-content; }

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

/* ==========================================
   PADDING
   ========================================== */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-8 { padding-bottom: 2rem; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-6 { padding-left: 1.5rem; }
.pl-8 { padding-left: 2rem; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-5 { padding-right: 1.25rem; }
.pr-6 { padding-right: 1.5rem; }
.pr-8 { padding-right: 2rem; }

/* ==========================================
   MARGIN
   ========================================== */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }
.m-auto { margin: auto; }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-8 { margin-left: 2rem; margin-right: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-auto { margin-bottom: auto; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-8 { margin-left: 2rem; }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-8 { margin-right: 2rem; }
.mr-auto { margin-right: auto; }

/* ============================================
   PUSH SYSTEM - Move to ABSOLUTE start/end of container
   ============================================
   Ignores DOM order. Element goes to container edges.
   Usage: <div class="push-start">I go to absolute left</div>
          <div class="push-end">I go to absolute right</div>
   ============================================ */

.push-start {
  margin-inline-start: 0;
  margin-inline-end: auto;
  order: -1;
}

.push-end {
  margin-inline-start: auto;
  margin-inline-end: 0;
  order: 999;
}

.push-center {
  margin-inline: auto;
  order: 0;
}

/* ============================================
   PULL SYSTEM - Move within available space (respects DOM order)
   ============================================
   Stays in DOM flow. Pulls within its continuation.
   Usage: <div class="pull-start">I stay at start of my space</div>
          <div class="pull-end">I go to end of my space</div>
   ============================================ */

.pull-start {
  margin-inline-end: auto;
}

.pull-end {
  margin-inline-start: auto;
}

.pull-center {
  margin-inline: auto;
}

/* Self alignment in flex/grid */
.self-start {
  justify-self: start;
  align-self: start;
}

.self-end {
  justify-self: end;
  align-self: end;
}

.self-center {
  justify-self: center;
  align-self: center;
}

/* Negative margins */
.-mt-1 { margin-top: -0.25rem; }
.-mt-2 { margin-top: -0.5rem; }
.-mt-4 { margin-top: -1rem; }
.-mb-1 { margin-bottom: -0.25rem; }
.-mb-2 { margin-bottom: -0.5rem; }
.-ml-1 { margin-left: -0.25rem; }
.-ml-2 { margin-left: -0.5rem; }
.-mr-1 { margin-right: -0.25rem; }
.-mr-2 { margin-right: -0.5rem; }

/* ==========================================
   SPACE BETWEEN (Children spacing)
   ========================================== */
.space-x-0 > * + * { margin-left: 0; }
.space-x-1 > * + * { margin-left: 0.25rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-x-6 > * + * { margin-left: 1.5rem; }
.space-x-8 > * + * { margin-left: 2rem; }

.space-y-0 > * + * { margin-top: 0; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* ==========================================
   TYPOGRAPHY - Font Size
   ========================================== */
.text-xxs { font-size: 0.625rem; line-height: 0.875rem; }
.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; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }

/* ==========================================
   TYPOGRAPHY - Font Weight
   ========================================== */
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.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; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* ==========================================
   TYPOGRAPHY - Text Alignment
   ========================================== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* ==========================================
   TYPOGRAPHY - Text Transform
   ========================================== */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* ==========================================
   TYPOGRAPHY - Text Decoration
   ========================================== */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* ==========================================
   TYPOGRAPHY - Line Height
   ========================================== */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* ==========================================
   TYPOGRAPHY - Text Overflow
   ========================================== */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis { text-overflow: ellipsis; }
.text-clip { text-overflow: clip; }

/* ==========================================
   TYPOGRAPHY - Whitespace
   ========================================== */
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* ==========================================
   TYPOGRAPHY - Word Break
   ========================================== */
.break-normal { overflow-wrap: normal; word-break: normal; }
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }

/* ==========================================
   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-8 { border-width: 8px; border-style: solid; }

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

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

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

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

.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-none { border-style: none; }

/* ==========================================
   BORDER RADIUS
   ========================================== */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: 0.125rem; }
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

.rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
.rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }
.rounded-t-md { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; }
.rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }

.rounded-b-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rounded-b { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
.rounded-b-md { border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
.rounded-b-lg { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }

.rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rounded-l { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
.rounded-l-lg { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }

.rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rounded-r { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
.rounded-r-lg { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }

/* ==========================================
   SHADOWS
   ========================================== */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); }
.shadow-none { box-shadow: none; }

/* ==========================================
   OPACITY
   ========================================== */
.opacity-0 { opacity: 0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }
.opacity-100 { opacity: 1; }

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

.inset-0 { inset: 0; }
.inset-auto { inset: auto; }

.top-0 { top: 0; }
.top-1 { top: 0.25rem; }
.top-2 { top: 0.5rem; }
.top-4 { top: 1rem; }
.top-full { top: 100%; }
.top-auto { top: auto; }

.right-0 { right: 0; }
.right-1 { right: 0.25rem; }
.right-2 { right: 0.5rem; }
.right-4 { right: 1rem; }
.right-full { right: 100%; }
.right-auto { right: auto; }

.bottom-0 { bottom: 0; }
.bottom-1 { bottom: 0.25rem; }
.bottom-2 { bottom: 0.5rem; }
.bottom-4 { bottom: 1rem; }
.bottom-full { bottom: 100%; }
.bottom-auto { bottom: auto; }

.left-0 { left: 0; }
.left-1 { left: 0.25rem; }
.left-2 { left: 0.5rem; }
.left-4 { left: 1rem; }
.left-full { left: 100%; }
.left-auto { left: auto; }

.-top-1 { top: -0.25rem; }
.-top-2 { top: -0.5rem; }
.-right-1 { right: -0.25rem; }
.-right-2 { right: -0.5rem; }

/* ==========================================
   Z-INDEX
   ========================================== */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* ==========================================
   OVERFLOW
   ========================================== */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-scroll { overflow-y: scroll; }

/* ==========================================
   CURSOR
   ========================================== */
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }

/* ==========================================
   POINTER EVENTS
   ========================================== */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ==========================================
   USER SELECT
   ========================================== */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* ==========================================
   VISIBILITY
   ========================================== */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.collapse { visibility: collapse; }

/* ==========================================
   TRANSITIONS
   ========================================== */
.transition-none { transition-property: none; }
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  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;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Duration */
.duration-75 { transition-duration: 75ms; }
.duration-100 { transition-duration: 100ms; }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }

/* Timing Function */
.ease-linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* ==========================================
   TRANSFORMS
   ========================================== */
.transform { transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
.transform-none { transform: none; }

/* Scale */
.scale-0 { transform: scale(0); }
.scale-50 { transform: scale(0.5); }
.scale-75 { transform: scale(0.75); }
.scale-90 { transform: scale(0.9); }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.scale-125 { transform: scale(1.25); }
.scale-150 { transform: scale(1.5); }

/* Rotate */
.rotate-0 { transform: rotate(0deg); }
.rotate-1 { transform: rotate(1deg); }
.rotate-2 { transform: rotate(2deg); }
.rotate-3 { transform: rotate(3deg); }
.rotate-6 { transform: rotate(6deg); }
.rotate-12 { transform: rotate(12deg); }
.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.-rotate-1 { transform: rotate(-1deg); }
.-rotate-2 { transform: rotate(-2deg); }
.-rotate-3 { transform: rotate(-3deg); }
.-rotate-6 { transform: rotate(-6deg); }
.-rotate-12 { transform: rotate(-12deg); }
.-rotate-45 { transform: rotate(-45deg); }
.-rotate-90 { transform: rotate(-90deg); }
.-rotate-180 { transform: rotate(-180deg); }

/* Translate */
.translate-x-0 { transform: translateX(0); }
.translate-x-1 { transform: translateX(0.25rem); }
.translate-x-2 { transform: translateX(0.5rem); }
.translate-x-4 { transform: translateX(1rem); }
.translate-x-full { transform: translateX(100%); }
.-translate-x-1 { transform: translateX(-0.25rem); }
.-translate-x-2 { transform: translateX(-0.5rem); }
.-translate-x-4 { transform: translateX(-1rem); }
.-translate-x-full { transform: translateX(-100%); }
.-translate-x-1\/2 { transform: translateX(-50%); }

.translate-y-0 { transform: translateY(0); }
.translate-y-1 { transform: translateY(0.25rem); }
.translate-y-2 { transform: translateY(0.5rem); }
.translate-y-4 { transform: translateY(1rem); }
.translate-y-full { transform: translateY(100%); }
.-translate-y-1 { transform: translateY(-0.25rem); }
.-translate-y-2 { transform: translateY(-0.5rem); }
.-translate-y-4 { transform: translateY(-1rem); }
.-translate-y-full { transform: translateY(-100%); }
.-translate-y-1\/2 { transform: translateY(-50%); }

/* Transform Origin */
.origin-center { transform-origin: center; }
.origin-top { transform-origin: top; }
.origin-top-right { transform-origin: top right; }
.origin-right { transform-origin: right; }
.origin-bottom-right { transform-origin: bottom right; }
.origin-bottom { transform-origin: bottom; }
.origin-bottom-left { transform-origin: bottom left; }
.origin-left { transform-origin: left; }
.origin-top-left { transform-origin: top left; }

/* ==========================================
   OBJECT FIT & POSITION
   ========================================== */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

.object-center { object-position: center; }
.object-top { object-position: top; }
.object-bottom { object-position: bottom; }
.object-left { object-position: left; }
.object-right { object-position: right; }

/* ==========================================
   VERTICAL ALIGN
   ========================================== */
.align-baseline { vertical-align: baseline; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }
.align-text-top { vertical-align: text-top; }
.align-text-bottom { vertical-align: text-bottom; }

/* ==========================================
   ASPECT RATIO
   ========================================== */
.aspect-auto { aspect-ratio: auto; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }

/* ==========================================
   LIST STYLE
   ========================================== */
.list-none { list-style-type: none; }
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }
.list-outside { list-style-position: outside; }

/* ==========================================
   OUTLINE
   ========================================== */
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.outline { outline-style: solid; }
.outline-dashed { outline-style: dashed; }
.outline-dotted { outline-style: dotted; }
.outline-0 { outline-width: 0; }
.outline-1 { outline-width: 1px; }
.outline-2 { outline-width: 2px; }
.outline-4 { outline-width: 4px; }
.outline-offset-0 { outline-offset: 0; }
.outline-offset-1 { outline-offset: 1px; }
.outline-offset-2 { outline-offset: 2px; }
.outline-offset-4 { outline-offset: 4px; }

/* ==========================================
   RING (Focus rings)
   ========================================== */
.ring-0 { box-shadow: var(--tw-ring-inset, ) 0 0 0 0 var(--tw-ring-color, currentColor); }
.ring-1 { box-shadow: var(--tw-ring-inset, ) 0 0 0 1px var(--tw-ring-color, currentColor); }
.ring-2 { box-shadow: var(--tw-ring-inset, ) 0 0 0 2px var(--tw-ring-color, currentColor); }
.ring-4 { box-shadow: var(--tw-ring-inset, ) 0 0 0 4px var(--tw-ring-color, currentColor); }
.ring-inset { --tw-ring-inset: inset; }

/* ==========================================
   SEMANTIC/COMPONENT CLASSES
   ========================================== */

/* Form Layout */
.form-row-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-row-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Flex shortcuts */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Card styles */
.card-standard {
  background-color: var(--background-base);
  border-radius: 0.5rem;
  border: 1px solid var(--content-light);
  padding: 1rem;
}

/* Table cells */
.table-header-cell {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--content-dark);
  background-color: var(--background-light);
}

.table-data-cell {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--text-dark);
  border-bottom: 1px solid var(--background-darker);
}

/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

/* Small screens (640px and up) */
@media (min-width: 640px) {
  .sm\:flex { display: flex; }
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:grid { display: grid; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }
  .sm\:items-center { align-items: center; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:w-auto { width: auto; }
  .sm\:w-full { width: 100%; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:text-left { text-align: left; }
}

/* Medium screens (768px and up) */
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:grid { display: grid; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:w-auto { width: auto; }
  .md\:w-full { width: 100%; }
  .md\:w-1\/2 { width: 50%; }
  .md\:w-1\/3 { width: 33.333333%; }
  .md\:w-2\/3 { width: 66.666667%; }
  .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .md\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .md\:text-left { text-align: left; }
}

/* Large screens (1024px and up) */
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:grid { display: grid; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:flex-row { flex-direction: row; }
  .lg\:items-center { align-items: center; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:w-auto { width: auto; }
  .lg\:w-full { width: 100%; }
  .lg\:w-1\/4 { width: 25%; }
  .lg\:w-1\/3 { width: 33.333333%; }
  .lg\:w-1\/2 { width: 50%; }
  .lg\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .lg\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
  .lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}

/* Extra large screens (1280px and up) */
@media (min-width: 1280px) {
  .xl\:flex { display: flex; }
  .xl\:hidden { display: none; }
  .xl\:block { display: block; }
  .xl\:grid { display: grid; }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .xl\:w-auto { width: auto; }
  .xl\:w-1\/4 { width: 25%; }
  .xl\:w-1\/5 { width: 20%; }
  .xl\:px-12 { padding-left: 3rem; padding-right: 3rem; }
}

/* 2XL screens (1536px and up) */
@media (min-width: 1536px) {
  .\32xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .\32xl\:w-1\/6 { width: 16.666667%; }
}

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

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ==========================================
   CONTAINER
   ========================================== */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container { max-width: 640px; }
}
@media (min-width: 768px) {
  .container { max-width: 768px; }
}
@media (min-width: 1024px) {
  .container { max-width: 1024px; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}
@media (min-width: 1536px) {
  .container { max-width: 1536px; }
}

/* ==========================================
   DIVIDE (Border between children)
   ========================================== */
.divide-y > * + * { border-top-width: 1px; border-top-style: solid; }
.divide-x > * + * { border-left-width: 1px; border-left-style: solid; }
.divide-y-0 > * + * { border-top-width: 0; }
.divide-y-2 > * + * { border-top-width: 2px; border-top-style: solid; }
.divide-x-0 > * + * { border-left-width: 0; }
.divide-x-2 > * + * { border-left-width: 2px; border-left-style: solid; }

/* Divide Colors - Standard */
.divide-gray-100 > * + * { border-color: #f3f4f6; }
.divide-gray-200 > * + * { border-color: #e5e7eb; }
.divide-gray-300 > * + * { border-color: #d1d5db; }
.divide-gray-400 > * + * { border-color: #9ca3af; }

/* Divide Colors - Custom System */
.divide-background-darker > * + * { border-color: var(--background-darker); }
.divide-content-lighter > * + * { border-color: var(--content-lighter); }

/* ==========================================
   STANDARD COLOR PALETTE
   ========================================== */

/* === WHITE & BLACK === */
.text-white { color: white; }
.text-black { color: black; }
.bg-white { background-color: white; }
.bg-black { background-color: black; }
.border-white { border-color: white; }
.border-black { border-color: black; }

/* === TRANSPARENT === */
.bg-transparent { background-color: transparent; }
.border-transparent { border-color: transparent; }

/* === GRAY SCALE === */
/* Gray 50 */
.text-gray-50 { color: #f9fafb; }
.bg-gray-50 { background-color: #f9fafb; }
.border-gray-50 { border-color: #f9fafb; }

/* Gray 100 */
.text-gray-100 { color: #f3f4f6; }
.bg-gray-100 { background-color: #f3f4f6; }
.border-gray-100 { border-color: #f3f4f6; }

/* Gray 200 */
.text-gray-200 { color: #e5e7eb; }
.bg-gray-200 { background-color: #e5e7eb; }
.border-gray-200 { border-color: #e5e7eb; }

/* Gray 300 */
.text-gray-300 { color: #d1d5db; }
.bg-gray-300 { background-color: #d1d5db; }
.border-gray-300 { border-color: #d1d5db; }

/* Gray 400 */
.text-gray-400 { color: #9ca3af; }
.bg-gray-400 { background-color: #9ca3af; }
.border-gray-400 { border-color: #9ca3af; }

/* Gray 500 */
.text-gray-500 { color: #6b7280; }
.bg-gray-500 { background-color: #6b7280; }
.border-gray-500 { border-color: #6b7280; }

/* Gray 600 */
.text-gray-600 { color: #4b5563; }
.bg-gray-600 { background-color: #4b5563; }
.border-gray-600 { border-color: #4b5563; }

/* Gray 700 */
.text-gray-700 { color: #374151; }
.bg-gray-700 { background-color: #374151; }
.border-gray-700 { border-color: #374151; }

/* Gray 800 */
.text-gray-800 { color: #1f2937; }
.bg-gray-800 { background-color: #1f2937; }
.border-gray-800 { border-color: #1f2937; }

/* Gray 900 */
.text-gray-900 { color: #111827; }
.bg-gray-900 { background-color: #111827; }
.border-gray-900 { border-color: #111827; }

/* === SLATE === */
.bg-slate-100 { background-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }

/* === RED === */
.text-red-400 { color: #f87171; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-red-400 { background-color: #f87171; }
.bg-red-500 { background-color: #ef4444; }
.border-red-400 { border-color: #f87171; }
.border-red-500 { border-color: #ef4444; }

/* === ORANGE === */
.text-orange-500 { color: #f97316; }
.text-orange-600 { color: #ea580c; }
.text-orange-700 { color: #c2410c; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-orange-200 { background-color: #fed7aa; }
.bg-orange-300 { background-color: #fdba74; }
.bg-orange-400 { background-color: #fb923c; }
.bg-orange-500 { background-color: #f97316; }
.border-orange-400 { border-color: #fb923c; }

/* === AMBER === */
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-400 { background-color: #fbbf24; }
.bg-amber-500 { background-color: #f59e0b; }
.border-amber-400 { border-color: #fbbf24; }

/* === YELLOW === */
.text-yellow-500 { color: #eab308; }
.text-yellow-600 { color: #ca8a04; }
.bg-yellow-50 { background-color: #fefce8; }
.bg-yellow-100 { background-color: #fef9c3; }
.bg-yellow-400 { background-color: #facc15; }
.border-yellow-400 { border-color: #facc15; }
.border-yellow-500 { border-color: #eab308; }

/* === GREEN === */
.text-green-500 { color: #22c55e; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.bg-green-50 { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-400 { background-color: #4ade80; }
.bg-green-500 { background-color: #22c55e; }
.border-green-400 { border-color: #4ade80; }
.border-green-500 { border-color: #22c55e; }

/* === BLUE === */
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-400 { background-color: #60a5fa; }
.bg-blue-500 { background-color: #3b82f6; }
.border-blue-400 { border-color: #60a5fa; }
.border-blue-500 { border-color: #3b82f6; }

/* === INDIGO === */
.text-indigo-500 { color: #6366f1; }
.text-indigo-600 { color: #4f46e5; }
.bg-indigo-50 { background-color: #eef2ff; }
.bg-indigo-100 { background-color: #e0e7ff; }
.bg-indigo-500 { background-color: #6366f1; }

/* === PURPLE === */
.text-purple-500 { color: #a855f7; }
.text-purple-600 { color: #9333ea; }
.bg-purple-50 { background-color: #faf5ff; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-purple-500 { background-color: #a855f7; }

/* === PINK === */
.text-pink-500 { color: #ec4899; }
.text-pink-600 { color: #db2777; }
.bg-pink-50 { background-color: #fdf2f8; }
.bg-pink-100 { background-color: #fce7f3; }
.bg-pink-500 { background-color: #ec4899; }

/* ==========================================
   CUSTOM COLOR SYSTEM (CSS Variables)
   See: colors.css for variable definitions
   ========================================== */

/* === TEXT - Global === */
.text-text-dark { color: var(--text-dark); }
.text-text-light { color: var(--text-light); }

/* === BACKGROUND PALETTE === */
.text-background-lighter { color: var(--background-lighter); }
.text-background-light { color: var(--background-light); }
.text-background-base { color: var(--background-base); }
.text-background-dark { color: var(--background-dark); }
.text-background-darker { color: var(--background-darker); }
.text-background-contrast { color: var(--background-contrast); }

.bg-background-lighter { background-color: var(--background-lighter); }
.bg-background-light { background-color: var(--background-light); }
.bg-background-base { background-color: var(--background-base); }
.bg-background-dark { background-color: var(--background-dark); }
.bg-background-darker { background-color: var(--background-darker); }
.bg-background-contrast { background-color: var(--background-contrast); }

.border-background-lighter { border-color: var(--background-lighter); }
.border-background-light { border-color: var(--background-light); }
.border-background-base { border-color: var(--background-base); }
.border-background-dark { border-color: var(--background-dark); }
.border-background-darker { border-color: var(--background-darker); }

/* === HIGHLIGHT PALETTE === */
.text-highlight-lighter { color: var(--highlight-lighter); }
.text-highlight-light { color: var(--highlight-light); }
.text-highlight-base { color: var(--highlight-base); }
.text-highlight-dark { color: var(--highlight-dark); }
.text-highlight-darker { color: var(--highlight-darker); }
.text-highlight-contrast { color: var(--highlight-contrast); }

.bg-highlight-lighter { background-color: var(--highlight-lighter); }
.bg-highlight-light { background-color: var(--highlight-light); }
.bg-highlight-base { background-color: var(--highlight-base); }
.bg-highlight-dark { background-color: var(--highlight-dark); }
.bg-highlight-darker { background-color: var(--highlight-darker); }
.bg-highlight-contrast { background-color: var(--highlight-contrast); }

.border-highlight-lighter { border-color: var(--highlight-lighter); }
.border-highlight-light { border-color: var(--highlight-light); }
.border-highlight-base { border-color: var(--highlight-base); }
.border-highlight-dark { border-color: var(--highlight-dark); }
.border-highlight-darker { border-color: var(--highlight-darker); }

/* === BASE PALETTE === */
.text-base-lighter { color: var(--base-lighter); }
.text-base-light { color: var(--base-light); }
.text-base-base { color: var(--base-base); }
.text-base-dark { color: var(--base-dark); }
.text-base-darker { color: var(--base-darker); }
.text-base-contrast { color: var(--base-contrast); }

.bg-base-lighter { background-color: var(--base-lighter); }
.bg-base-light { background-color: var(--base-light); }
.bg-base-base { background-color: var(--base-base); }
.bg-base-dark { background-color: var(--base-dark); }
.bg-base-darker { background-color: var(--base-darker); }
.bg-base-contrast { background-color: var(--base-contrast); }

.border-base-lighter { border-color: var(--base-lighter); }
.border-base-light { border-color: var(--base-light); }
.border-base-base { border-color: var(--base-base); }
.border-base-dark { border-color: var(--base-dark); }
.border-base-darker { border-color: var(--base-darker); }

/* === CONTENT PALETTE === */
.text-content-lighter { color: var(--content-lighter); }
.text-content-light { color: var(--content-light); }
.text-content-base { color: var(--content-base); }
.text-content-dark { color: var(--content-dark); }
.text-content-darker { color: var(--content-darker); }
.text-content-contrast { color: var(--content-contrast); }

.bg-content-lighter { background-color: var(--content-lighter); }
.bg-content-light { background-color: var(--content-light); }
.bg-content-base { background-color: var(--content-base); }
.bg-content-dark { background-color: var(--content-dark); }
.bg-content-darker { background-color: var(--content-darker); }
.bg-content-contrast { background-color: var(--content-contrast); }

.border-content-lighter { border-color: var(--content-lighter); }
.border-content-light { border-color: var(--content-light); }
.border-content-base { border-color: var(--content-base); }
.border-content-dark { border-color: var(--content-dark); }
.border-content-darker { border-color: var(--content-darker); }

/* === DEEP PALETTE === */
.text-deep-lighter { color: var(--deep-lighter); }
.text-deep-light { color: var(--deep-light); }
.text-deep-base { color: var(--deep-base); }
.text-deep-dark { color: var(--deep-dark); }
.text-deep-darker { color: var(--deep-darker); }
.text-deep-contrast { color: var(--deep-contrast); }

.bg-deep-lighter { background-color: var(--deep-lighter); }
.bg-deep-light { background-color: var(--deep-light); }
.bg-deep-base { background-color: var(--deep-base); }
.bg-deep-dark { background-color: var(--deep-dark); }
.bg-deep-darker { background-color: var(--deep-darker); }
.bg-deep-contrast { background-color: var(--deep-contrast); }

.border-deep-lighter { border-color: var(--deep-lighter); }
.border-deep-light { border-color: var(--deep-light); }
.border-deep-base { border-color: var(--deep-base); }
.border-deep-dark { border-color: var(--deep-dark); }
.border-deep-darker { border-color: var(--deep-darker); }

/* === GROUND PALETTE === */
.text-ground-lighter { color: var(--ground-lighter); }
.text-ground-light { color: var(--ground-light); }
.text-ground-base { color: var(--ground-base); }
.text-ground-dark { color: var(--ground-dark); }
.text-ground-darker { color: var(--ground-darker); }
.text-ground-contrast { color: var(--ground-contrast); }

.bg-ground-lighter { background-color: var(--ground-lighter); }
.bg-ground-light { background-color: var(--ground-light); }
.bg-ground-base { background-color: var(--ground-base); }
.bg-ground-dark { background-color: var(--ground-dark); }
.bg-ground-darker { background-color: var(--ground-darker); }
.bg-ground-contrast { background-color: var(--ground-contrast); }

.border-ground-lighter { border-color: var(--ground-lighter); }
.border-ground-light { border-color: var(--ground-light); }
.border-ground-base { border-color: var(--ground-base); }
.border-ground-dark { border-color: var(--ground-dark); }
.border-ground-darker { border-color: var(--ground-darker); }

/* === SUCCESS PALETTE === */
.text-success-lighter { color: var(--success-lighter); }
.text-success-light { color: var(--success-light); }
.text-success-base { color: var(--success-base); }
.text-success-dark { color: var(--success-dark); }
.text-success-darker { color: var(--success-darker); }
.text-success-contrast { color: var(--success-contrast); }

.bg-success-lighter { background-color: var(--success-lighter); }
.bg-success-light { background-color: var(--success-light); }
.bg-success-base { background-color: var(--success-base); }
.bg-success-dark { background-color: var(--success-dark); }
.bg-success-darker { background-color: var(--success-darker); }
.bg-success-contrast { background-color: var(--success-contrast); }

.border-success-lighter { border-color: var(--success-lighter); }
.border-success-light { border-color: var(--success-light); }
.border-success-base { border-color: var(--success-base); }
.border-success-dark { border-color: var(--success-dark); }
.border-success-darker { border-color: var(--success-darker); }

/* === INFO PALETTE === */
.text-info-lighter { color: var(--info-lighter); }
.text-info-light { color: var(--info-light); }
.text-info-base { color: var(--info-base); }
.text-info-dark { color: var(--info-dark); }
.text-info-darker { color: var(--info-darker); }
.text-info-contrast { color: var(--info-contrast); }

.bg-info-lighter { background-color: var(--info-lighter); }
.bg-info-light { background-color: var(--info-light); }
.bg-info-base { background-color: var(--info-base); }
.bg-info-dark { background-color: var(--info-dark); }
.bg-info-darker { background-color: var(--info-darker); }
.bg-info-contrast { background-color: var(--info-contrast); }

.border-info-lighter { border-color: var(--info-lighter); }
.border-info-light { border-color: var(--info-light); }
.border-info-base { border-color: var(--info-base); }
.border-info-dark { border-color: var(--info-dark); }
.border-info-darker { border-color: var(--info-darker); }

/* === WARNING PALETTE === */
.text-warning-lighter { color: var(--warning-lighter); }
.text-warning-light { color: var(--warning-light); }
.text-warning-base { color: var(--warning-base); }
.text-warning-dark { color: var(--warning-dark); }
.text-warning-darker { color: var(--warning-darker); }
.text-warning-contrast { color: var(--warning-contrast); }

.bg-warning-lighter { background-color: var(--warning-lighter); }
.bg-warning-light { background-color: var(--warning-light); }
.bg-warning-base { background-color: var(--warning-base); }
.bg-warning-dark { background-color: var(--warning-dark); }
.bg-warning-darker { background-color: var(--warning-darker); }
.bg-warning-contrast { background-color: var(--warning-contrast); }

.border-warning-lighter { border-color: var(--warning-lighter); }
.border-warning-light { border-color: var(--warning-light); }
.border-warning-base { border-color: var(--warning-base); }
.border-warning-dark { border-color: var(--warning-dark); }
.border-warning-darker { border-color: var(--warning-darker); }

/* === DANGER PALETTE === */
.text-danger-lighter { color: var(--danger-lighter); }
.text-danger-light { color: var(--danger-light); }
.text-danger-base { color: var(--danger-base); }
.text-danger-dark { color: var(--danger-dark); }
.text-danger-darker { color: var(--danger-darker); }
.text-danger-contrast { color: var(--danger-contrast); }

.bg-danger-lighter { background-color: var(--danger-lighter); }
.bg-danger-light { background-color: var(--danger-light); }
.bg-danger-base { background-color: var(--danger-base); }
.bg-danger-dark { background-color: var(--danger-dark); }
.bg-danger-darker { background-color: var(--danger-darker); }
.bg-danger-contrast { background-color: var(--danger-contrast); }

.border-danger-lighter { border-color: var(--danger-lighter); }
.border-danger-light { border-color: var(--danger-light); }
.border-danger-base { border-color: var(--danger-base); }
.border-danger-dark { border-color: var(--danger-dark); }
.border-danger-darker { border-color: var(--danger-darker); }

/* === MUTED PALETTE === */
.text-muted-lighter { color: var(--muted-lighter); }
.text-muted-light { color: var(--muted-light); }
.text-muted-base { color: var(--muted-base); }
.text-muted-dark { color: var(--muted-dark); }
.text-muted-darker { color: var(--muted-darker); }
.text-muted-contrast { color: var(--muted-contrast); }

.bg-muted-lighter { background-color: var(--muted-lighter); }
.bg-muted-light { background-color: var(--muted-light); }
.bg-muted-base { background-color: var(--muted-base); }
.bg-muted-dark { background-color: var(--muted-dark); }
.bg-muted-darker { background-color: var(--muted-darker); }
.bg-muted-contrast { background-color: var(--muted-contrast); }

.border-muted-lighter { border-color: var(--muted-lighter); }
.border-muted-light { border-color: var(--muted-light); }
.border-muted-base { border-color: var(--muted-base); }
.border-muted-dark { border-color: var(--muted-dark); }
.border-muted-darker { border-color: var(--muted-darker); }

/* ==========================================
   HOVER VARIANTS - Custom Colors
   ========================================== */
.hover\:bg-highlight-base:hover { background-color: var(--highlight-base); }
.hover\:bg-highlight-dark:hover { background-color: var(--highlight-dark); }
.hover\:bg-highlight-light:hover { background-color: var(--highlight-light); }
.hover\:bg-content-base:hover { background-color: var(--content-base); }
.hover\:bg-content-dark:hover { background-color: var(--content-dark); }
.hover\:bg-content-light:hover { background-color: var(--content-light); }
.hover\:bg-background-dark:hover { background-color: var(--background-dark); }
.hover\:bg-background-darker:hover { background-color: var(--background-darker); }
.hover\:bg-base-lighter:hover { background-color: var(--base-lighter); }
.hover\:bg-base-light:hover { background-color: var(--base-light); }
.hover\:bg-base-base:hover { background-color: var(--base-base); }

.hover\:text-highlight-base:hover { color: var(--highlight-base); }
.hover\:text-highlight-dark:hover { color: var(--highlight-dark); }
.hover\:text-highlight-light:hover { color: var(--highlight-light); }
.hover\:text-content-dark:hover { color: var(--content-dark); }
.hover\:text-content-darker:hover { color: var(--content-darker); }
.hover\:text-base-base:hover { color: var(--base-base); }
.hover\:text-text-dark:hover { color: var(--text-dark); }

/* ==========================================
   HOVER VARIANTS - Standard Colors
   ========================================== */
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
.hover\:text-gray-700:hover { color: #374151; }
.hover\:text-gray-900:hover { color: #111827; }

/* ==========================================
   FOCUS VARIANTS
   ========================================== */
.focus\:ring-2:focus { box-shadow: 0 0 0 2px currentColor; }
.focus\:ring-highlight-base:focus { box-shadow: 0 0 0 2px var(--highlight-base); }
.focus\:ring-highlight-light:focus { box-shadow: 0 0 0 2px var(--highlight-light); }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:border-highlight-base:focus { border-color: var(--highlight-base); }

/* ==========================================
   GROUP HOVER
   ========================================== */
.group:hover .group-hover\:text-highlight-base { color: var(--highlight-base); }
.group:hover .group-hover\:bg-background-dark { background-color: var(--background-dark); }
.group:hover .group-hover\:visible { visibility: visible; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }

/* ==========================================
   ADDITIONAL RESPONSIVE - Large screens
   ========================================== */
@media (min-width: 1024px) {
  .lg\:p-4 { padding: 1rem; }
  .lg\:p-6 { padding: 1.5rem; }
  .lg\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .lg\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .lg\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .lg\:gap-4 { gap: 1rem; }
  .lg\:gap-6 { gap: 1.5rem; }
  .lg\:col-span-1 { grid-column: span 1 / span 1; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:justify-end { justify-content: flex-end; }
}

/* ==========================================
   ADDITIONAL RESPONSIVE - Medium screens
   ========================================== */
@media (min-width: 768px) {
  .md\:p-4 { padding: 1rem; }
  .md\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .md\:gap-4 { gap: 1rem; }
  .md\:gap-6 { gap: 1.5rem; }
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:inline-flex { display: inline-flex; }
}

/* ==========================================
   ADDITIONAL RESPONSIVE - Small screens
   ========================================== */
@media (min-width: 640px) {
  .sm\:p-4 { padding: 1rem; }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:col-span-1 { grid-column: span 1 / span 1; }
  .sm\:inline-flex { display: inline-flex; }
}
/* ============================================
   ANIMATIONS CSS - Custom Animations
   ============================================
   Animaciones personalizadas en CSS puro.
   ============================================ */

/* ==========================================
   KEYFRAMES
   ========================================== */

/* Pulse Opacity */
@keyframes pulseOpacity {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Spin */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Ping */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Pulse */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Bounce */
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade Out */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Slide In from Top */
@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Slide In from Bottom */
@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Slide In from Left */
@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide In from Right */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Scale In */
@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Scale Out */
@keyframes scaleOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

/* Shake */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}

/* ==========================================
   ANIMATION CLASSES
   ========================================== */

/* Pulse Opacity - la animación personalizada del config original */
.animate-pulse-opacity {
  animation: pulseOpacity 3s cubic-bezier(0.9, 0, 0.6, 1) infinite;
}

/* Standard animations */
.animate-none { animation: none; }

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

.animate-fade-in {
  animation: fadeIn 300ms ease-out;
}

.animate-fade-out {
  animation: fadeOut 300ms ease-in;
}

.animate-slide-in-top {
  animation: slideInFromTop 300ms ease-out;
}

.animate-slide-in-bottom {
  animation: slideInFromBottom 300ms ease-out;
}

.animate-slide-in-left {
  animation: slideInFromLeft 300ms ease-out;
}

.animate-slide-in-right {
  animation: slideInFromRight 300ms ease-out;
}

.animate-scale-in {
  animation: scaleIn 200ms ease-out;
}

.animate-scale-out {
  animation: scaleOut 200ms ease-in;
}

.animate-shake {
  animation: shake 500ms ease-in-out;
}

/* ==========================================
   ANIMATION MODIFIERS
   ========================================== */

/* Delay */
.animation-delay-75 { animation-delay: 75ms; }
.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-150 { animation-delay: 150ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-500 { animation-delay: 500ms; }
.animation-delay-700 { animation-delay: 700ms; }
.animation-delay-1000 { animation-delay: 1000ms; }

/* Duration */
.animation-duration-75 { animation-duration: 75ms; }
.animation-duration-100 { animation-duration: 100ms; }
.animation-duration-150 { animation-duration: 150ms; }
.animation-duration-200 { animation-duration: 200ms; }
.animation-duration-300 { animation-duration: 300ms; }
.animation-duration-500 { animation-duration: 500ms; }
.animation-duration-700 { animation-duration: 700ms; }
.animation-duration-1000 { animation-duration: 1000ms; }

/* Iteration */
.animation-once { animation-iteration-count: 1; }
.animation-infinite { animation-iteration-count: infinite; }

/* Direction */
.animation-normal { animation-direction: normal; }
.animation-reverse { animation-direction: reverse; }
.animation-alternate { animation-direction: alternate; }
.animation-alternate-reverse { animation-direction: alternate-reverse; }

/* Fill Mode */
.animation-fill-none { animation-fill-mode: none; }
.animation-fill-forwards { animation-fill-mode: forwards; }
.animation-fill-backwards { animation-fill-mode: backwards; }
.animation-fill-both { animation-fill-mode: both; }

/* Play State */
.animation-running { animation-play-state: running; }
.animation-paused { animation-play-state: paused; }
/* ============================================================================
   COLOR SYSTEM - SINGLE SOURCE OF TRUTH
   ============================================================================

   This file defines ALL system colors. No hex values should exist elsewhere.

   MODIFICATION GUIDE:
   -------------------
   1. ADDING a new palette/color:
      → Add it here first with hex values
      → Add utility class in utilities.css if needed

   2. RENAMING a variable:
      → Update utilities.css
      → Update all CSS files using that color
      → Update all ERB templates using classes with that color

   3. CHANGING a hex value:
      → Only edit this file. Changes propagate automatically.

   NAMING CONVENTION:
   ------------------
   Structure: background, highlight, base, content, deep, ground
   Semantic:  success, info, warning, danger, tertiary

   Each palette has: lighter, light, base, dark, darker, contrast

   USAGE:
   ------
   CSS:      color: var(--highlight-base);
   Classes:  class="text-highlight-base bg-background-dark"

   ============================================================================ */

  .square {
    display: inline-block;
    width: 22px;
    height: 10px;
    margin-right: 8px;
    position: relative;
  }

  .square-min {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    position: relative;
  }

  .square-max {
    display: inline-block;
    width: 32px;
    height: 10px;
    margin-left: 10px;
    margin-right: 5px;
    position: relative;
  }


.arrow-down {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #6b7280; /* Adjust color to match your design */
  border-radius: 3px; /* Adjust for rounding effect */
}

.arrow-down::after {
  content: '';
  position: absolute;
  top: -8.75px; /* Adjust to position the transparent part */
  left: -6.50px; /* Adjust to align with the arrow */
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid white; /* Color to overlay (background color or transparent) */
  border-radius: 3px; /* Adjust for rounding effect */
}




  .black {
    background-color: #000000; /* #B2B2B2 */
  }

  .navy {
    background-color: #000080;  /* #B2B2D8 */
  }

  .blue {
    background-color: #0000FF;  /* #B2B2FF */
  }

  .green {
    background-color: #32CD32; /* #C1F0C1 */
  }

  .teal {
    background-color: #20B2AA; /* #BCE7E5 */
  }

  .lime {
    background-color: #00FF00; /* #B2FFB2 */
  }

  .orange {
    background-color: #FF4500; /* #FFC7B2 */
  }

  .red {
    background-color: #FF5733; /* #FFCCC1 */
  }

  .maroon {
    background-color: #800000; /* #D8B2B2 */
  }

  .fuchsia {
    background-color: #FF00FF; /* #FF00FF */
  }

  .purple {
    background-color: #9370DB; /* #9370DB */
  }

  .gray {
    background-color: #C0C0C0; /* #ECECEC */
  }

  .yellow {
    background-color: #FFFF00; /* #FFFFB2 */
  }

  .pink {
    background-color: #FF69B4; /* #FFD2E8 */
  }

  /*.orange-w-green {
    background-image: linear-gradient(to right, #FF4500 0%, #FF4500 33.33%, #32CD32 33.33%, #32CD32 66.66%, #FF4500 66.66%, #FF4500 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }*/
  .orange-w-green {
    background-color: #FF4500;
  }
  .orange-w-green::before {
    content: "";
    position: absolute;
    top: 0;
    left: 40.33%;
    width: 33.33%;
    height: 100%;
    background-color: #32CD32;
    transform: skewX(-20deg);
    transform-origin: 0 0;
  }

  .default {
    background-color: #00BFFF;
  }


/* ============================================================================
   SOFT PROJECT COLORS - Muted versions for visual comfort
   ============================================================================

   These colors are softer variants designed for project identification
   without visual fatigue. Based on the original colors but lightened
   to ~30-40% saturation for better readability in reports and tables.

   Usage: Project color assignment for timesheets and reports

   ============================================================================ */

  .soft-black {
    background-color: #B2B2B2;
  }

  .soft-navy {
    background-color: #B2B2D8;
  }

  .soft-blue {
    background-color: #B2B2FF;
  }

  .soft-green {
    background-color: #C1F0C1;
  }

  .soft-teal {
    background-color: #BCE7E5;
  }

  .soft-lime {
    background-color: #B2FFB2;
  }

  .soft-orange {
    background-color: #FFC7B2;
  }

  .soft-red {
    background-color: #FFCCC1;
  }

  .soft-maroon {
    background-color: #D8B2B2;
  }

  .soft-pink {
    background-color: #FFD2E8;
  }

  .soft-purple {
    background-color: #D8B2E6;
  }

  .soft-gray {
    background-color: #ECECEC;
  }

  .soft-yellow {
    background-color: #FFFFB2;
  }

  .soft-olive {
    background-color: #D8D8B2;
  }

  .soft-white {
    background-color: #F8F8F8;
  }

  .soft-silver {
    background-color: #E8E8E8;
  }

  .soft-gold {
    background-color: #FFF0B2;
  }

  .soft-brown {
    background-color: #E6C7C1;
  }

  .soft-beige {
    background-color: #F5F5E6;
  }

  .soft-indigo {
    background-color: #C7B2E6;
  }

  .soft-violet {
    background-color: #F0D2F0;
  }

  .soft-turquoise {
    background-color: #C7F0EC;
  }

  .soft-magenta {
    background-color: #FFB2FF;
  }

  .soft-default {
    background-color: #B2E5FF;
  }



  :root {
  /* ==========================================
     SINGLE SOURCE OF TRUTH - DYNAMIC COLOR SYSTEM
     ==========================================

     Only BASE colors are defined. All variants
     (lighter, light, dark, darker, lightest) are generated
     automatically using color-mix().

     CONTRAST SYSTEM:
     - Dark backgrounds (deep, base, ground) → lightest variant of same family
     - Light backgrounds (background, lightest) → darker variant of same family
     - This ensures text ALWAYS contrasts AND maintains color harmony

     TO CHANGE A COLOR: Edit only the *-base value.
     TO CREATE A THEME: Override the 11 base colors.

     ========================================== */

  /* ===================
     GLOBAL TEXT COLORS
     =================== */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     Only 6 base colors defined
     =================== */

  /* DEEP - Charcoal/Navbar (darkest) */
  --deep-base: #1e293b;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--deep-lightest);

  /* BASE - Navy/Menu items (structure dark) */
  --base-base: #334155;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--base-lightest);

  /* HIGHLIGHT - Cyan/Active states (accent color) */
  --highlight-base: #38BDF8;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: var(--highlight-darkest);

  /* CONTENT - Gray/Sidebar (neutral grays) */
  --content-base: #64748b;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--content-lightest);

  /* BACKGROUND - White/Page backgrounds */
  --background-base: #f8fafc;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--deep-base);

  /* GROUND - Soft Charcoal/Footer */
  --ground-base: #0f172a;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: var(--ground-lightest);

  /* ===================
     SEMANTIC PALETTE
     Only 5 base colors defined
     =================== */

  /* SUCCESS - Green */
  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  /* INFO - Blue */
  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  /* WARNING - Orange */
  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  /* DANGER - Red */
  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  /* MUTED - Neutral gray for disabled/muted states */
  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-contrast: var(--muted-darker);

  /* ===================
     EFFECTS PALETTE
     For overlays, glows, shadows
     =================== */

  /* LIGHT EFFECTS - White overlays/glows */
  --light-overlay-subtle: rgba(255, 255, 255, 0.03);
  --light-overlay-soft: rgba(255, 255, 255, 0.08);
  --light-overlay-medium: rgba(255, 255, 255, 0.15);
  --light-overlay-strong: rgba(255, 255, 255, 0.25);
  --light-overlay-bold: rgba(255, 255, 255, 0.40);
  --light-glow: rgba(255, 255, 255, 0.3);

  /* DARK EFFECTS - Black shadows/overlays */
  --dark-overlay-subtle: rgba(0, 0, 0, 0.05);
  --dark-overlay-soft: rgba(0, 0, 0, 0.1);
  --dark-overlay-medium: rgba(0, 0, 0, 0.15);
  --dark-overlay-strong: rgba(0, 0, 0, 0.25);
  --dark-overlay-bold: rgba(0, 0, 0, 0.50);
  --dark-glow: rgba(0, 0, 0, 0.3);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--base-base);
}

/* ============================================================================
   THEME PALETTES - Now in separate files
   ============================================================================

   Theme definitions moved to: app/assets/stylesheets/components/themes/
   - slate.css
   - emerald.css
   - rose.css
   - amber.css
   - violet.css

   Usage: <html data-palette="emerald">

   ============================================================================ */

/* ============================================================================
   PALETTE PREVIEW - For Theme Selector UI
   ============================================================================ */

.palette-preview {
  background: linear-gradient(90deg, var(--preview-highlight) 50%, var(--preview-deep) 50%);
}

.palette-slate {
  --preview-highlight: #38BDF8;
  --preview-deep: #1e293b;
}

.palette-emerald {
  --preview-highlight: #10B981;
  --preview-deep: #065F46;
}

.palette-rose {
  --preview-highlight: #FB7185;
  --preview-deep: #9F1239;
}

.palette-amber {
  --preview-highlight: #F59E0B;
  --preview-deep: #78350F;
}

.palette-violet {
  --preview-highlight: #8B5CF6;
  --preview-deep: #4C1D95;
}

.palette-dark {
  --preview-highlight: #4fd1c5;
  --preview-deep: #233242;
}

.palette-steel_blue {
  --preview-highlight: #89c5de;
  --preview-deep: #3d5e83;
}

.palette-frozen {
  --preview-highlight: #c7d7e2;
  --preview-deep: #1e2a3a;
}

.palette-atrium {
  --preview-highlight: #95c8cc;
  --preview-deep: #5d5a53;
}

.palette-accent {
  --preview-highlight: #acee01;
  --preview-deep: #1c1c1c;
}

.palette-coordinator {
  --preview-highlight: #fdb719;
  --preview-deep: #295785;
}

.palette-site {
  --preview-highlight: #e4ae62;
  --preview-deep: #2f4768;
}

.palette-america {
  --preview-highlight: #9e2a2b;
  --preview-deep: #1f2a44;
}

/* ============================================================================
   PALETTE PREVIEW v2 - Stacked Horizontal Bars (5 colors)
   ============================================================================ */

/* Theme Palette Button Styles */
.theme-palette-btn {
  transition: all 0.2s ease;
  cursor: pointer;
}

.theme-palette-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.theme-palette-btn:hover .palette-bars {
  transform: scale(1.05);
}

.theme-palette-btn:active {
  transform: translateY(-2px);
}

.palette-bars {
  display: flex;
  flex-direction: column;
  width: 75%;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--background-darker);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.palette-bars:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.palette-bars .bar {
  height: 10px;
  width: 100%;
  flex-shrink: 0;
}

/* Slate - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-slate .bar:nth-child(1) { background-color: #1e293b; }
.palette-bars.palette-slate .bar:nth-child(2) { background-color: #334155; }
.palette-bars.palette-slate .bar:nth-child(3) { background-color: #38BDF8; }
.palette-bars.palette-slate .bar:nth-child(4) { background-color: #64748b; }
.palette-bars.palette-slate .bar:nth-child(5) { background-color: #f8fafc; }

/* Emerald - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-emerald .bar:nth-child(1) { background-color: #065F46; }
.palette-bars.palette-emerald .bar:nth-child(2) { background-color: #047857; }
.palette-bars.palette-emerald .bar:nth-child(3) { background-color: #10B981; }
.palette-bars.palette-emerald .bar:nth-child(4) { background-color: #6b7280; }
.palette-bars.palette-emerald .bar:nth-child(5) { background-color: #f8fafc; }

/* Rose - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-rose .bar:nth-child(1) { background-color: #9F1239; }
.palette-bars.palette-rose .bar:nth-child(2) { background-color: #be123c; }
.palette-bars.palette-rose .bar:nth-child(3) { background-color: #FB7185; }
.palette-bars.palette-rose .bar:nth-child(4) { background-color: #6b7280; }
.palette-bars.palette-rose .bar:nth-child(5) { background-color: #f8fafc; }

/* Amber - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-amber .bar:nth-child(1) { background-color: #78350F; }
.palette-bars.palette-amber .bar:nth-child(2) { background-color: #92400e; }
.palette-bars.palette-amber .bar:nth-child(3) { background-color: #F59E0B; }
.palette-bars.palette-amber .bar:nth-child(4) { background-color: #6b7280; }
.palette-bars.palette-amber .bar:nth-child(5) { background-color: #f8fafc; }

/* Violet - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-violet .bar:nth-child(1) { background-color: #4C1D95; }
.palette-bars.palette-violet .bar:nth-child(2) { background-color: #6d28d9; }
.palette-bars.palette-violet .bar:nth-child(3) { background-color: #8B5CF6; }
.palette-bars.palette-violet .bar:nth-child(4) { background-color: #6b7280; }
.palette-bars.palette-violet .bar:nth-child(5) { background-color: #f8fafc; }

/* Dark - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-dark .bar:nth-child(1) { background-color: #0b1c2d; }
.palette-bars.palette-dark .bar:nth-child(2) { background-color: #0b1c2d; }
.palette-bars.palette-dark .bar:nth-child(3) { background-color: #4fd1c5; }
.palette-bars.palette-dark .bar:nth-child(4) { background-color: #111827; }
.palette-bars.palette-dark .bar:nth-child(5) { background-color: #233242; }

/* Steel Blue - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-steel_blue .bar:nth-child(1) { background-color: #3d5e83; }
.palette-bars.palette-steel_blue .bar:nth-child(2) { background-color: #4a6d94; }
.palette-bars.palette-steel_blue .bar:nth-child(3) { background-color: #89c5de; }
.palette-bars.palette-steel_blue .bar:nth-child(4) { background-color: #6b8599; }
.palette-bars.palette-steel_blue .bar:nth-child(5) { background-color: #f8fafc; }

/* Frozen - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-frozen .bar:nth-child(1) { background-color: #1e2a3a; }
.palette-bars.palette-frozen .bar:nth-child(2) { background-color: #2d3e50; }
.palette-bars.palette-frozen .bar:nth-child(3) { background-color: #c7d7e2; }
.palette-bars.palette-frozen .bar:nth-child(4) { background-color: #3d5166; }
.palette-bars.palette-frozen .bar:nth-child(5) { background-color: #f8fafc; }

/* Atrium - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-atrium .bar:nth-child(1) { background-color: #5d5a53; }
.palette-bars.palette-atrium .bar:nth-child(2) { background-color: #b9cece; }
.palette-bars.palette-atrium .bar:nth-child(3) { background-color: #95c8cc; }
.palette-bars.palette-atrium .bar:nth-child(4) { background-color: #959595; }
.palette-bars.palette-atrium .bar:nth-child(5) { background-color: #f8fafc; }

/* Accent - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-accent .bar:nth-child(1) { background-color: #1c1c1c; }
.palette-bars.palette-accent .bar:nth-child(2) { background-color: #ededed; }
.palette-bars.palette-accent .bar:nth-child(3) { background-color: #acee01; }
.palette-bars.palette-accent .bar:nth-child(4) { background-color: #9a9a9a; }
.palette-bars.palette-accent .bar:nth-child(5) { background-color: #f8fafc; }

/* Coordinator - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-coordinator .bar:nth-child(1) { background-color: #295785; }
.palette-bars.palette-coordinator .bar:nth-child(2) { background-color: #ececec; }
.palette-bars.palette-coordinator .bar:nth-child(3) { background-color: #fdb719; }
.palette-bars.palette-coordinator .bar:nth-child(4) { background-color: #506d95; }
.palette-bars.palette-coordinator .bar:nth-child(5) { background-color: #f8fafc; }

/* Site - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-site .bar:nth-child(1) { background-color: #2f4768; }
.palette-bars.palette-site .bar:nth-child(2) { background-color: #d5d5d5; }
.palette-bars.palette-site .bar:nth-child(3) { background-color: #e4ae62; }
.palette-bars.palette-site .bar:nth-child(4) { background-color: #506d95; }
.palette-bars.palette-site .bar:nth-child(5) { background-color: #f8fafc; }

/* America - Order: DEEP, BASE, HIGHLIGHT, CONTENT, SURFACE */
.palette-bars.palette-america .bar:nth-child(1) { background-color: #1f2a44; }
.palette-bars.palette-america .bar:nth-child(2) { background-color: #c7c9cc; }
.palette-bars.palette-america .bar:nth-child(3) { background-color: #9e2a2b; }
.palette-bars.palette-america .bar:nth-child(4) { background-color: #6c7a89; }
.palette-bars.palette-america .bar:nth-child(5) { background-color: #efefef; }


/* ============================================================================
   AUTO-CONTRAST BACKGROUND CLASSES
   ============================================================================

   These classes automatically apply BOTH background AND contrasting text color.
   Usage: Just add the class, text contrast is handled automatically.

   Example: <div class="bg-highlight-base">Text is auto-contrasted</div>

   ============================================================================ */

/* DEEP - Dark backgrounds, light text */
.bg-deep-base { background-color: var(--deep-base); color: var(--deep-contrast); }
.bg-deep-light { background-color: var(--deep-light); color: var(--deep-contrast); }
.bg-deep-lighter { background-color: var(--deep-lighter); color: var(--deep-darker); }
.bg-deep-dark { background-color: var(--deep-dark); color: var(--deep-contrast); }
.bg-deep-darker { background-color: var(--deep-darker); color: var(--deep-contrast); }

/* BASE - Dark backgrounds, light text */
.bg-base-base { background-color: var(--base-base); color: var(--base-contrast); }
.bg-base-light { background-color: var(--base-light); color: var(--base-contrast); }
.bg-base-lighter { background-color: var(--base-lighter); color: var(--base-darker); }
.bg-base-lightest { background-color: var(--base-lightest); color: var(--base-dark); }
.bg-base-dark { background-color: var(--base-dark); color: var(--base-contrast); }
.bg-base-darker { background-color: var(--base-darker); color: var(--base-contrast); }

/* HIGHLIGHT - Medium brightness, smart contrast */
.bg-highlight-base { background-color: var(--highlight-base); color: var(--highlight-contrast); }
.bg-highlight-light { background-color: var(--highlight-light); color: var(--highlight-darker); }
.bg-highlight-lighter { background-color: var(--highlight-lighter); color: var(--highlight-darker); }
.bg-highlight-lightest { background-color: var(--highlight-lightest); color: var(--highlight-dark); }
.bg-highlight-dark { background-color: var(--highlight-dark); color: var(--highlight-lightest); }
.bg-highlight-darker { background-color: var(--highlight-darker); color: var(--highlight-lightest); }

/* CONTENT - Gray backgrounds */
.bg-content-base { background-color: var(--content-base); color: var(--content-contrast); }
.bg-content-light { background-color: var(--content-light); color: var(--content-darker); }
.bg-content-lighter { background-color: var(--content-lighter); color: var(--content-darker); }
.bg-content-dark { background-color: var(--content-dark); color: var(--content-contrast); }
.bg-content-darker { background-color: var(--content-darker); color: var(--content-contrast); }

/* BACKGROUND - Light backgrounds, dark text */
.bg-background-base { background-color: var(--background-base); color: var(--background-contrast); }
.bg-background-light { background-color: var(--background-light); color: var(--background-contrast); }
.bg-background-lighter { background-color: var(--background-lighter); color: var(--background-contrast); }
.bg-background-dark { background-color: var(--background-dark); color: var(--background-contrast); }
.bg-background-darker { background-color: var(--background-darker); color: var(--background-contrast); }

/* GROUND - Dark backgrounds, light text */
.bg-ground-base { background-color: var(--ground-base); color: var(--ground-contrast); }
.bg-ground-light { background-color: var(--ground-light); color: var(--ground-contrast); }
.bg-ground-lighter { background-color: var(--ground-lighter); color: var(--ground-lightest); }
.bg-ground-lightest { background-color: var(--ground-lightest); color: var(--ground-dark); }
.bg-ground-dark { background-color: var(--ground-dark); color: var(--ground-contrast); }
.bg-ground-darker { background-color: var(--ground-darker); color: var(--ground-contrast); }

/* SUCCESS */
.bg-success-base { background-color: var(--success-base); color: var(--success-contrast); }
.bg-success-light { background-color: var(--success-light); color: var(--success-darker); }
.bg-success-dark { background-color: var(--success-dark); color: var(--success-lightest); }

/* INFO */
.bg-info-base { background-color: var(--info-base); color: var(--info-contrast); }
.bg-info-light { background-color: var(--info-light); color: var(--info-darker); }
.bg-info-dark { background-color: var(--info-dark); color: var(--info-lightest); }

/* WARNING */
.bg-warning-base { background-color: var(--warning-base); color: var(--warning-contrast); }
.bg-warning-light { background-color: var(--warning-light); color: var(--warning-darker); }
.bg-warning-dark { background-color: var(--warning-dark); color: var(--warning-lightest); }

/* DANGER */
.bg-danger-base { background-color: var(--danger-base); color: var(--danger-contrast); }
.bg-danger-light { background-color: var(--danger-light); color: var(--danger-darker); }
.bg-danger-dark { background-color: var(--danger-dark); color: var(--danger-lightest); }

/* MUTED */
.bg-muted-base { background-color: var(--muted-base); color: var(--muted-contrast); }
.bg-muted-light { background-color: var(--muted-light); color: var(--muted-darker); }
.bg-muted-dark { background-color: var(--muted-dark); color: var(--muted-lightest); }
/* ============================================================================
   SLATE THEME - Default
   ============================================================================ */

[data-palette="slate"] {
  /* TEXT COLORS */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - White/Page backgrounds */
  --background-base: #f8fafc;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--deep-base);

  /* HIGHLIGHT - Cyan/Active states (accent color) */
  --highlight-base: #38BDF8;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: #0c4a6e;

  /* BASE - Navy/Menu items (structure dark) */
  --base-base: #334155;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--base-lightest);

  /* CONTENT - Gray/Sidebar (neutral grays) */
  --content-base: #64748b;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--content-lightest);

  /* DEEP - Charcoal/Navbar (darkest) */
  --deep-base: #1e293b;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--deep-lightest);

  /* GROUND - Soft Charcoal/Footer */
  --ground-base: #0f172a;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: var(--ground-lightest);

  /* ===================
     SEMANTIC PALETTE
     =================== */

  /* SUCCESS - Green */
  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  /* INFO - Blue */
  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  /* WARNING - Orange */
  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  /* DANGER - Red */
  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  /* MUTED - Neutral gray for disabled/muted states */
  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: var(--muted-darkest);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--base-base);
}
/* ============================================================================
   EMERALD THEME - Green
   ============================================================================ */

[data-palette="emerald"] {
  /* TEXT COLORS */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - Light green tint backgrounds */
  --background-base: #f0fdf4;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--deep-base);

  /* HIGHLIGHT - Emerald/Active states (accent color) */
  --highlight-base: #10B981;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: var(--highlight-darkest);

  /* BASE - Forest/Menu items (structure dark) */
  --base-base: #064E3B;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--base-lightest);

  /* CONTENT - Gray/Sidebar (neutral grays) */
  --content-base: #6B7280;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--content-lightest);

  /* DEEP - Dark Green/Navbar (darkest) */
  --deep-base: #065F46;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--deep-lightest);

  /* GROUND - Darkest Green/Footer */
  --ground-base: #022C22;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: var(--ground-lightest);

  /* ===================
     SEMANTIC PALETTE
     =================== */

  /* SUCCESS - Green */
  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  /* INFO - Blue */
  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  /* WARNING - Orange */
  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  /* DANGER - Red */
  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  /* MUTED - Neutral gray for disabled/muted states */
  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: var(--muted-darkest);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--base-base);
}
/* ============================================================================
   ROSE THEME - Pink
   ============================================================================ */

[data-palette="rose"] {
  /* TEXT COLORS */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - Light pink tint backgrounds */
  --background-base: #fff1f2;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--deep-base);

  /* HIGHLIGHT - Rose/Active states (accent color) */
  --highlight-base: #FB7185;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: var(--highlight-darkest);

  /* BASE - Wine/Menu items (structure dark) */
  --base-base: #881337;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--base-lightest);

  /* CONTENT - Warm Gray/Sidebar (neutral grays) */
  --content-base: #78716C;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--content-lightest);

  /* DEEP - Dark Rose/Navbar (darkest) */
  --deep-base: #9F1239;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--deep-lightest);

  /* GROUND - Darkest Rose/Footer */
  --ground-base: #4C0519;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: var(--ground-lightest);

  /* ===================
     SEMANTIC PALETTE
     =================== */

  /* SUCCESS - Green */
  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  /* INFO - Blue */
  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  /* WARNING - Orange */
  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  /* DANGER - Red */
  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  /* MUTED - Neutral gray for disabled/muted states */
  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: var(--muted-darkest);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--base-base);
}
/* ============================================================================
   AMBER THEME - Orange/Brown
   ============================================================================ */

[data-palette="amber"] {
  /* TEXT COLORS */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - Light amber tint backgrounds */
  --background-base: #fffbeb;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--deep-base);

  /* HIGHLIGHT - Amber/Active states (accent color) */
  --highlight-base: #F59E0B;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: var(--highlight-darkest);

  /* BASE - Brown/Menu items (structure dark) */
  --base-base: #92400E;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--base-lightest);

  /* CONTENT - Warm Gray/Sidebar (neutral grays) */
  --content-base: #78716C;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--content-lightest);

  /* DEEP - Dark Brown/Navbar (darkest) */
  --deep-base: #78350F;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--deep-lightest);

  /* GROUND - Darkest Brown/Footer */
  --ground-base: #451A03;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: var(--ground-lightest);

  /* ===================
     SEMANTIC PALETTE
     =================== */

  /* SUCCESS - Green */
  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  /* INFO - Blue */
  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  /* WARNING - Orange */
  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  /* DANGER - Red */
  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  /* MUTED - Neutral gray for disabled/muted states */
  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: var(--muted-darkest);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--base-base);
}
/* ============================================================================
   VIOLET THEME - Purple
   ============================================================================ */

[data-palette="violet"] {
  /* TEXT COLORS */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - Light violet tint backgrounds */
  --background-base: #f5f3ff;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--deep-base);

  /* HIGHLIGHT - Violet/Active states (accent color) */
  --highlight-base: #8B5CF6;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: var(--highlight-darkest);

  /* BASE - Indigo/Menu items (structure dark) */
  --base-base: #5B21B6;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--base-lightest);

  /* CONTENT - Gray/Sidebar (neutral grays) */
  --content-base: #6B7280;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--content-lightest);

  /* DEEP - Dark Purple/Navbar (darkest) */
  --deep-base: #4C1D95;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--deep-lightest);

  /* GROUND - Darkest Purple/Footer */
  --ground-base: #2E1065;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: var(--ground-lightest);

  /* ===================
     SEMANTIC PALETTE
     =================== */

  /* SUCCESS - Green */
  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  /* INFO - Blue */
  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  /* WARNING - Orange */
  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  /* DANGER - Red */
  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  /* MUTED - Neutral gray for disabled/muted states */
  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: var(--muted-darkest);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--base-base);
}
/* ============================================================================
   DARK THEME - Dark Mode
   ============================================================================ */

[data-palette="dark"] {
  /* TEXT COLORS (inverted for dark theme) */
  --text-dark: #e5e7eb;
  --text-light: #0f172a;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - Dark theme uses BASE color for navbar/elevated backgrounds */
  --background-base: #233242;
  --background-lightest: color-mix(in srgb, var(--background-base), white 85%);
  --background-lighter: #0b1c2d; /* BASE color - used for navbar */
  --background-light: #111827;   /* CONTENT color - cards */
  --background-dark: color-mix(in srgb, var(--background-base), white 8%);
  --background-darker: color-mix(in srgb, var(--background-base), white 15%);
  --background-contrast: #e5e7eb;

  /* HIGHLIGHT - Teal/Cyan accent */
  --highlight-base: #4fd1c5;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: #0b1c2d;

  /* BASE - Dark navy for structure */
  --base-base: #0b1c2d;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 20%);
  --base-light: color-mix(in srgb, var(--base-base), white 10%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: #e5e7eb;

  /* CONTENT - Very dark gray */
  --content-base: #111827;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 30%);
  --content-light: color-mix(in srgb, var(--content-base), white 15%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: #e5e7eb;

  /* DEEP - Dark navy (used by .v2-header navbar) */
  --deep-base: #0b1c2d;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 10%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-contrast: #e5e7eb;

  /* GROUND - Medium gray */
  --ground-base: #6b7280;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: #ffffff;

  /* ===================
     SEMANTIC PALETTE
     =================== */

  /* SUCCESS - Green */
  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: #0b1c2d;

  /* INFO - Blue */
  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: #0b1c2d;

  /* WARNING - Orange */
  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: #0b1c2d;

  /* DANGER - Red */
  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: #ffffff;

  /* MUTED - Neutral gray for disabled/muted states */
  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: #0b1c2d;

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--highlight-base);
}
/* ============================================================================
   STEEL BLUE THEME
   ============================================================================ */

[data-palette="steel_blue"] {
  /* TEXT COLORS */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - Light backgrounds (same as slate) */
  --background-base: #f8fafc;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--ground-base);

  /* HIGHLIGHT - Light cyan accent */
  --highlight-base: #89c5de;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: var(--highlight-darkest);

  /* BASE - Light blue */
  --base-base: #c9e2fb;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--ground-base);

  /* CONTENT - Medium blue-gray */
  --content-base: #7495a5;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--content-lightest);

  /* DEEP - Dark blue */
  --deep-base: #3d5e83;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--deep-lightest);

  /* GROUND - Dark purple/navy */
  --ground-base: #2a244a;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: var(--ground-lightest);

  /* ===================
     SEMANTIC PALETTE
     =================== */

  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: var(--muted-darkest);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--deep-base);
}
/* ============================================================================
   FROZEN THEME
   ============================================================================ */

[data-palette="frozen"] {
  /* TEXT COLORS */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - Light backgrounds (same as slate) */
  --background-base: #f8fafc;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--ground-base);

  /* HIGHLIGHT - Light steel blue */
  --highlight-base: #c7d7e2;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: var(--highlight-darkest);

  /* BASE - Lavender */
  --base-base: #b7b1cc;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--ground-base);

  /* CONTENT - Very light gray */
  --content-base: #f2f5f7;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--ground-base);

  /* DEEP - Dark navy */
  --deep-base: #1e2a3a;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--deep-lightest);

  /* GROUND - Almost black */
  --ground-base: #0f1115;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: var(--ground-lightest);

  /* ===================
     SEMANTIC PALETTE
     =================== */

  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: var(--muted-darkest);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--deep-base);
}
/* ============================================================================
   ATRIUM THEME
   ============================================================================ */

[data-palette="atrium"] {
  /* TEXT COLORS */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - Light backgrounds (same as slate) */
  --background-base: #f8fafc;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--deep-base);

  /* HIGHLIGHT - Teal/Cyan */
  --highlight-base: #95c8cc;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: var(--highlight-darkest);

  /* BASE - Light teal */
  --base-base: #b9cece;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--deep-base);

  /* CONTENT - Neutral gray */
  --content-base: #959595;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--content-lightest);

  /* DEEP - Olive/brown-gray */
  --deep-base: #5d5a53;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--deep-lightest);

  /* GROUND - Dark olive */
  --ground-base: #4a4842;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: var(--ground-lightest);

  /* ===================
     SEMANTIC PALETTE
     =================== */

  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: var(--muted-darkest);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--deep-base);
}
/* ============================================================================
   ACCENT THEME - Dark with Lime Green
   ============================================================================ */

[data-palette="accent"] {
  /* TEXT COLORS */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - Light backgrounds (same as slate) */
  --background-base: #f8fafc;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--ground-base);

  /* HIGHLIGHT - Lime green accent */
  --highlight-base: #acee01;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: var(--highlight-darkest);

  /* BASE - Light gray */
  --base-base: #7c8061;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--ground-base);

  /* CONTENT - Medium gray */
  --content-base: #969980;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--content-lightest);

  /* DEEP - Very dark gray */
  --deep-base: #25261d;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--highlight-base);

  /* GROUND - Almost black */
  --ground-base: #181913;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: var(--highlight-base);

  /* ===================
     SEMANTIC PALETTE
     =================== */

  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: var(--muted-darkest);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--highlight-base);
}
/* ============================================================================
   COORDINATOR THEME - Blue with Golden Yellow
   ============================================================================ */

[data-palette="coordinator"] {
  /* TEXT COLORS */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - Light backgrounds (same as slate) */
  --background-base: #f8fafc;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--ground-base);

  /* HIGHLIGHT - Golden yellow accent */
  --highlight-base: #fdb719;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: var(--highlight-darkest);

  /* BASE - Light gray */
  --base-base: #ececec;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--ground-base);

  /* CONTENT - Medium blue */
  --content-base: #506d95;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--content-lightest);

  /* DEEP - Blue */
  --deep-base: #295785;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--deep-lightest);

  /* GROUND - Black */
  --ground-base: #000000;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: var(--ground-base);
  --ground-darker: var(--ground-base);
  --ground-contrast: var(--highlight-base);

  /* ===================
     SEMANTIC PALETTE
     =================== */

  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: var(--muted-darkest);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--deep-base);
}
/* ============================================================================
   SITE THEME - Navy Blue with Golden Accent
   ============================================================================ */

[data-palette="site"] {
  /* TEXT COLORS */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - Light backgrounds (same as slate) */
  --background-base: #f8fafc;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--ground-base);

  /* HIGHLIGHT - Golden/Tan accent */
  --highlight-base: #e4ae62;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: var(--highlight-darkest);

  /* BASE - Light gray */
  --base-base: #d5d5d5;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--ground-base);

  /* CONTENT - Medium blue */
  --content-base: #506d95;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--content-lightest);

  /* DEEP - Navy */
  --deep-base: #2f4768;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--deep-lightest);

  /* GROUND - Dark navy */
  --ground-base: #1e2c4a;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: var(--highlight-base);

  /* ===================
     SEMANTIC PALETTE
     =================== */

  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: var(--muted-darkest);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--deep-base);
}
/* ============================================================================
   AMERICA THEME - Red, White & Blue
   ============================================================================ */

[data-palette="america"] {
  /* TEXT COLORS */
  --text-dark: #1e293b;
  --text-light: #ffffff;

  /* ===================
     STRUCTURE PALETTE
     =================== */

  /* BACKGROUND - Light backgrounds */
  --background-base: #efefef;
  --background-lightest: color-mix(in srgb, var(--background-base), white 60%);
  --background-lighter: color-mix(in srgb, var(--background-base), white 30%);
  --background-light: color-mix(in srgb, var(--background-base), white 15%);
  --background-dark: color-mix(in srgb, var(--background-base), black 5%);
  --background-darker: color-mix(in srgb, var(--background-base), black 12%);
  --background-contrast: var(--deep-base);

  /* HIGHLIGHT - Burgundy red accent */
  --highlight-base: #9e2a2b;
  --highlight-lightest: color-mix(in srgb, var(--highlight-base), white 85%);
  --highlight-lighter: color-mix(in srgb, var(--highlight-base), white 50%);
  --highlight-light: color-mix(in srgb, var(--highlight-base), white 25%);
  --highlight-dark: color-mix(in srgb, var(--highlight-base), black 15%);
  --highlight-darker: color-mix(in srgb, var(--highlight-base), black 30%);
  --highlight-darkest: color-mix(in srgb, var(--highlight-base), black 65%);
  --highlight-contrast: var(--highlight-lightest);

  /* BASE - Silver gray */
  --base-base: #c7c9cc;
  --base-lightest: color-mix(in srgb, var(--base-base), white 85%);
  --base-lighter: color-mix(in srgb, var(--base-base), white 40%);
  --base-light: color-mix(in srgb, var(--base-base), white 20%);
  --base-dark: color-mix(in srgb, var(--base-base), black 20%);
  --base-darker: color-mix(in srgb, var(--base-base), black 40%);
  --base-contrast: var(--deep-base);

  /* CONTENT - Slate gray */
  --content-base: #6c7a89;
  --content-lightest: color-mix(in srgb, var(--content-base), white 85%);
  --content-lighter: color-mix(in srgb, var(--content-base), white 50%);
  --content-light: color-mix(in srgb, var(--content-base), white 25%);
  --content-dark: color-mix(in srgb, var(--content-base), black 15%);
  --content-darker: color-mix(in srgb, var(--content-base), black 30%);
  --content-contrast: var(--content-lightest);

  /* DEEP - Navy blue */
  --deep-base: #1f2a44;
  --deep-lightest: color-mix(in srgb, var(--deep-base), white 85%);
  --deep-lighter: color-mix(in srgb, var(--deep-base), white 30%);
  --deep-light: color-mix(in srgb, var(--deep-base), white 15%);
  --deep-dark: color-mix(in srgb, var(--deep-base), black 20%);
  --deep-darker: color-mix(in srgb, var(--deep-base), black 40%);
  --deep-contrast: var(--deep-lightest);

  /* GROUND - Dark navy */
  --ground-base: #151c2e;
  --ground-lightest: color-mix(in srgb, var(--ground-base), white 90%);
  --ground-lighter: color-mix(in srgb, var(--ground-base), white 25%);
  --ground-light: color-mix(in srgb, var(--ground-base), white 12%);
  --ground-dark: color-mix(in srgb, var(--ground-base), black 20%);
  --ground-darker: color-mix(in srgb, var(--ground-base), black 40%);
  --ground-contrast: var(--highlight-base);

  /* ===================
     SEMANTIC PALETTE
     =================== */

  --success-base: #A4C639;
  --success-lightest: color-mix(in srgb, var(--success-base), white 85%);
  --success-lighter: color-mix(in srgb, var(--success-base), white 50%);
  --success-light: color-mix(in srgb, var(--success-base), white 25%);
  --success-dark: color-mix(in srgb, var(--success-base), black 20%);
  --success-darker: color-mix(in srgb, var(--success-base), black 40%);
  --success-darkest: color-mix(in srgb, var(--success-base), black 65%);
  --success-contrast: var(--success-darkest);

  --info-base: #3FB5FF;
  --info-lightest: color-mix(in srgb, var(--info-base), white 85%);
  --info-lighter: color-mix(in srgb, var(--info-base), white 50%);
  --info-light: color-mix(in srgb, var(--info-base), white 25%);
  --info-dark: color-mix(in srgb, var(--info-base), black 20%);
  --info-darker: color-mix(in srgb, var(--info-base), black 40%);
  --info-darkest: color-mix(in srgb, var(--info-base), black 65%);
  --info-contrast: var(--info-darkest);

  --warning-base: #FFA500;
  --warning-lightest: color-mix(in srgb, var(--warning-base), white 85%);
  --warning-lighter: color-mix(in srgb, var(--warning-base), white 50%);
  --warning-light: color-mix(in srgb, var(--warning-base), white 25%);
  --warning-dark: color-mix(in srgb, var(--warning-base), black 20%);
  --warning-darker: color-mix(in srgb, var(--warning-base), black 40%);
  --warning-darkest: color-mix(in srgb, var(--warning-base), black 65%);
  --warning-contrast: var(--warning-darkest);

  --danger-base: #da0722;
  --danger-lightest: color-mix(in srgb, var(--danger-base), white 85%);
  --danger-lighter: color-mix(in srgb, var(--danger-base), white 50%);
  --danger-light: color-mix(in srgb, var(--danger-base), white 25%);
  --danger-dark: color-mix(in srgb, var(--danger-base), black 20%);
  --danger-darker: color-mix(in srgb, var(--danger-base), black 40%);
  --danger-contrast: var(--danger-lightest);

  --muted-base: #9ca3af;
  --muted-lightest: color-mix(in srgb, var(--muted-base), white 85%);
  --muted-lighter: color-mix(in srgb, var(--muted-base), white 50%);
  --muted-light: color-mix(in srgb, var(--muted-base), white 25%);
  --muted-dark: color-mix(in srgb, var(--muted-base), black 20%);
  --muted-darker: color-mix(in srgb, var(--muted-base), black 40%);
  --muted-darkest: color-mix(in srgb, var(--muted-base), black 65%);
  --muted-contrast: var(--muted-darkest);

  /* CODE */
  --code-400: var(--background-light);
  --code-600: var(--deep-base);
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  font-family: 'Exo', 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  color: var(--text-dark);
}

label {
  color: var(--text-dark);
}

/* ============================================
   MODERN SCROLLBAR - Theme-aware colors
   ============================================ */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--base-lighter) var(--base-dark);
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--base-dark);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--base-lighter);
  border-radius: 10px;
  border: 2px solid var(--base-dark);
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--base-base);
}

::-webkit-scrollbar-thumb:active {
  background: var(--deep-darker);
}

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

.main {
  flex: 1;
}

a {
  text-decoration: none;
  color: var(--highlight-base);
  transition: color 0.2s ease;

  &:hover {
    color: var(--highlight-light);
  }
}


  ol {
    list-style-type: decimal;
    list-style-position: inside;
  }

  /* Style the list items */
  ul {
    list-style: none; /* Remove the bullet */
    padding: 0; /* Remove any default padding */
    margin: 0; /* Remove any default margin */
  }


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

.title {
  font-weight: 700;
  color: var(--content-dark);
  margin-bottom: 0;
}
.extension {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--content-light);
  font-weight: 300;
}

.subtitle {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--content-base);
}

.sub-subtitle {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  color: var(--content-light);
}

.table {
  width: 100%;
  th, td {
    vertical-align: top;
  }

}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
}




.tooltip-top:hover::after,
.tooltip-bottom:hover::after,
.tooltip-top-right:hover::after,
.tooltip-top-left:hover::after,
.tooltip-bottom-right:hover::after,
.tooltip-bottom-left:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  background: var(--deep-dark);
  color: var(--deep-contrast);
  padding: 5px 15px;
  font-size: 0.8rem;
  border-radius: 4px;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
}

.tooltip-top:hover::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-bottom:hover::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-top-left:hover::after {
  bottom: 100%;
  left: 100%;
  transform: translateX(-100%);
}

.tooltip-top-right:hover::after {
  bottom: 100%;
  left: 0;
}

.tooltip-bottom-left:hover::after {
  top: 100%;
  left: 100%;
  transform: translateX(-100%);
}

.tooltip-bottom-right:hover::after {
  top: 100%;
  left: 0;
}


.snap_line {
  margin-top: 0.5rem;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: var(--background-darker);
}




/* ============================================
   LAYOUT WITH RIGHT SIDEBAR
   For pages with subpanel navigation
   ============================================ */

.layout-with-right-sidebar {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  position: relative;
  background: transparent;
}

.layout-main-content {
  flex: 1;
  min-width: 0;
}

.layout-right-sidebar {
  width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  height: fit-content;
  align-self: flex-start;
  padding: 0;
  margin: 0;
  background: transparent;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.layout-right-sidebar.collapsed {
  width: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.layout-main-content {
  transition: flex 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Toggle button in header */
.right-sidebar-toggle {
  background: none;
  border: none;
  color: var(--deep-contrast);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.right-sidebar-toggle:hover {
  color: var(--highlight-base);
}

.right-sidebar-toggle svg {
  width: 20px;
  height: 20px;
}

.right-sidebar-toggle.active {
  color: var(--highlight-base);
}

/* Mobile: sidebar goes on top */
@media (max-width: 768px) {
  .layout-with-right-sidebar {
    flex-direction: column;
  }

  .layout-right-sidebar {
    width: 100%;
    position: static;
    order: -1;
    max-height: none;
  }

  .layout-right-sidebar.collapsed {
    display: none;
  }
}

/* ============================================
   SUBPANEL MENU
   ============================================ */

.submenuPanel {
  width: 100%;
  border: none;
  background-color: var(--deep-base);
  border-radius: 8px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.submenuPanel .title {
  padding: 20px 0.75rem;
  margin: 0;
  background: transparent;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  color: var(--deep-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.submenuPanel .title * {
  background: transparent !important;
  margin: 0;
  padding: 0;
  color: inherit;
}

.submenuPanel .content {
  padding: 0;
  margin: 0;
  background-color: var(--content-light);
  border-radius: 0 0 8px 8px;
}

.submenuPanel .content p {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--deep-darker);
}

.submenuPanel .content p:last-child {
  border-bottom: none;
}

.submenuPanel .content a {
  display: block !important;
  padding: 10px 0.75rem !important;
  background-color: var(--content-light) !important;
  color: var(--content-contrast) !important;
  font-size: 0.875rem !important;
  transition: background-color 0.2s ease;
  box-shadow: none !important;
  min-width: auto !important;
}

.submenuPanel .content a:hover {
  background-color: var(--content-dark) !important;
  color: var(--highlight-base) !important;
}

/* Accordion */
  .informator {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-left: 5px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 5px;
    width: 100%;
    text-align: right;
    border: none;
    outline: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .informator-title {
    flex: 1;
  }

  .informator-icon {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.5s ease-in-out;
  }
  .div-cont {
    text-align: right;
    float: right;
    position: absolute;
  }

  .informator-icon svg {
    transform: rotate(180deg);
  }

  .active,
  .informator:hover {
    background-color: var(--content-base);
    color: var(--content-contrast);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .active .informator-icon svg {
    transform: rotate(0);
  }

  .informator-panel {
    padding: 15px;
    background-color: var(--content-light);
    color: var(--content-contrast);
    display: none;
    overflow: hidden;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: background-color 0.9s ease-in-out, color 0.9s ease-in-out;
  }

  .informator-panel.open {
    background-color: var(--content-dark);
    color: var(--content-contrast);
  }




  /* Accordion */
  .calculator {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0px;
    padding-left: 5px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 5px;
    width: 100%;
    text-align: right;
    border: none;
    outline: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .calculator-title {
    flex: 1;
  }

  .calculator-icon {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.5s ease-in-out;
  }
  .div-cont {
    text-align: right;
    float: right;
    position: absolute;
  }

  .calculator-icon svg {
    transform: rotate(180deg);
  }

  .active,
  .calculator:hover {
    background-color: var(--content-base);
    color: var(--content-contrast);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .active .informator-icon svg {
    transform: rotate(0);
  }

  .calculator-panel {
    padding: 15px;
    background-color: var(--content-light);
    color: var(--content-contrast);
    display: none;
    overflow: hidden;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: background-color 0.9s ease-in-out, color 0.9s ease-in-out;
  }

  .calculator-panel.open {
    background-color: var(--content-dark);
    color: var(--content-contrast);
  }


.flatpickr-input {
  width: 100% !important;
}
.flatpickr-wrapper {
  width: 100% !important;
}
.font-display {
  font-size: 4rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.highlight {
  font-size: 1.0rem;
  color: var(--content-light);
  font-weight: 300;
}


h1, h2, h3, h4, h5, h6 {
  background: transparent;
}

h1,
.h1 {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

h2,
.h2 {
  font-size: 1.50rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

h3,
.h3 {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

h4,
.h4 {
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

h5,
.h5 {
  font-size: 1.0rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.025em;
}




.link {
  color: #0ea5e9;

  &:hover,
  &:focus {
    color: #0284c7;
  }
}
/* Hotwire's version of data-disable-with */

/*
We have several buttons to implement
  new
  edit
  settings
  back
  done
*/
button                  .when-disabled { display: none; }
button[disabled]        .when-disabled { display: initial; }
button                  .when-enabled { display: initial; }
button[disabled]        .when-enabled { display: none; }

.btn {
  margin-top: 2px;
  margin-left: 1px;
  margin-right: 1px;
  height: 45px;
  line-height: 45px;
  transition: ease 0.1s background, ease 0.01s transform, ease 0.3s color;

  /* Base styles (was @apply) */
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.875rem;
  line-height: 45px;
  font-weight: 300;
  text-align: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0.25rem;
  text-decoration: none;

  &:hover {
    transform: scale(1.0);
    color: var(--background-base);
  }

  &:focus {
    cursor: pointer;
  }

  &:disabled {
    opacity: 0.75;
    cursor: not-allowed;
  }

  /* Icon styling */
  .icon, svg {
    margin-right: 0.5rem;
    flex-shrink: 0;
  }
}

/* Responsive styles for .btn */
@media (min-width: 640px) {
  .btn {
    width: 100%;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .btn {
    width: auto;
    flex-grow: 0;
  }
}

@media (min-width: 1024px) {
  .btn {
    width: auto;
    flex-grow: 0;
  }
}

@media (min-width: 1280px) {
  .btn {
    width: auto;
    flex-grow: 0;
  }
}

.btn-sqr {
  width: 100%;
  justify-content: flex-start;
  display: inline-flex;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 300;
  text-align: center;
  padding-top: 0;
  padding-bottom: 0;
  text-decoration: none;
  align-items: center;
  margin-top: 2px;
  margin-left: 1px;
  margin-right: 2px;
  height: 45px;
  line-height: 45px;
  transition: ease 0.1s background, ease 0.01s transform, ease 0.3s color;

  &:hover {
    transform: scale(1.0);
    color: var(--background-base);
  }

  &:focus {
    cursor: pointer;
  }

  &:disabled {
    opacity: 0.75;
    cursor: not-allowed;
  }
}

@media (min-width: 1024px) {
  .btn-sqr {
    display: inline-flex;
    width: auto;
    justify-content: space-between;
  }
}

.btn-base {
  color: white;

  &:hover, &:focus, &:visited {
    color: white;
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;

    &:hover, &:focus {
      color: white;
    }
  }
}

.ribbon {
  width: 100%;
  justify-content: flex-start;
  display: inline-flex;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 300;
  text-align: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-decoration: none;
  align-items: center;
  margin-top: 0.125rem;
  height: 45px;
  line-height: 45px;
  transition: ease 0.1s background, ease 0.01s transform, ease 0.3s color;

  &:hover {
    transform: scale(1.0);
    color: var(--background-base);
  }

  &:focus {
    cursor: pointer;
  }

  &:disabled {
    opacity: 0.75;
    cursor: not-allowed;
  }
}

@media (min-width: 1024px) {
  .ribbon {
    display: inline-flex;
    width: auto;
    justify-content: space-between;
  }
}

.ribbon-base {
  color: white;

  &:hover, &:focus, &:visited {
    color: var(--highlight-base);
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;

    &:hover, &:focus {
      color: white;
    }
  }
}

.ribbon-toggle {
  /* ribbon-base styles inline */
  color: white;
  background-color: var(--base-base);
  color: var(--highlight-base);
  font-size: 0.75rem;
  line-height: 1rem;
  height: 24px;
  line-height: 24px;

  &:hover, &:focus {
    background-color: var(--base-dark);
    color: var(--highlight-dark);
  }

  &.outline {
    color: var(--highlight-base);
  }
}

.btn-small {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  height: 24px;
  line-height: 24px;
}

.btn-medium {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  height: 36px;
  line-height: 36px;
}

.btn-large {
  font-size: 1rem;
  line-height: 1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  height: 48px;
  line-height: 48px;
}

.btn-sidebar {
  /* btn-base inline */
  color: white;
  background-color: var(--base-dark);

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--base-darker);
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: var(--base-darker);

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-add {
  /* btn-base inline */
  color: white;
  background-color: var(--highlight-dark);

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--highlight-base);
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: var(--highlight-dark);

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-edit {
  /* btn-base inline */
  color: white;
  background-color: #fdba74; /* orange-300 */
  color: #9a3412; /* orange-800 */

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: #fb923c; /* orange-400 */
    color: #7c2d12; /* orange-900 */
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: #ea580c; /* orange-600 */

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-new {
  /* btn-base inline */
  color: white;
  background-color: var(--highlight-base);
  color: var(--highlight-darker);
  background-color: var(--highlight-base) !important;

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--highlight-dark);
    color: var(--highlight-contrast);
    background-color: var(--highlight-dark) !important;
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: var(--highlight-base);

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-ref {
  background-color: var(--background-dark);
  color: var(--base-dark);

  &:hover, &:focus {
    background-color: var(--background-darker);
    color: var(--base-dark);
  }

  &.outline {
    color: var(--content-dark);
  }
}

.btn-settings {
  /* btn-base inline */
  color: white;
  background-color: #93c5fd; /* blue-300 */
  color: #1e40af; /* blue-800 */

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: #60a5fa; /* blue-400 */
    color: #1e3a8a; /* blue-900 */
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: #2563eb; /* blue-600 */

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-success {
  /* btn-base inline */
  color: white;
  background-color: var(--success-base);
  color: var(--success-darker);

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--success-dark);
    color: var(--success-contrast);
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: var(--success-dark);

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-cancel {
  /* btn-base inline */
  background-color: var(--content-base);
  color: white;

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--content-dark);
    color: var(--content-contrast);
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: var(--content-base);

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-done {
  /* btn-base inline */
  color: white;
  background-color: var(--content-dark);
  background-color: var(--base-base) !important;

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--base-base);
    background-color: var(--base-dark) !important;
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: var(--content-dark);

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-back {
  /* btn-base inline */
  color: white;
  background-color: var(--content-light);
  color: var(--content-darker);

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--content-lighter);
    color: var(--content-dark);
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: var(--content-light);

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-danger {
  /* btn-base inline */
  color: white;
  background-color: #f87171; /* red-400 */

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: #ef4444; /* red-500 */
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: #ef4444; /* red-500 - mas visible */
    border: 1px solid #ef4444;

    &:hover, &:focus {
      color: white;
      background-color: #ef4444; /* red-500 */
    }
  }
}

.btn-alert {
  /* btn-base inline */
  color: white;
  background-color: #f59e0b; /* amber-500 */

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: #fbbf24; /* amber-400 */
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: #d97706; /* amber-600 */

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-warning {
  /* btn-base inline */
  color: white;
  background-color: #f97316; /* orange-500 */

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: #fb923c; /* orange-400 */
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: #ea580c; /* orange-600 */

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-info {
  /* btn-base inline */
  color: white;
  background-color: var(--highlight-base);

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--highlight-dark);
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: var(--highlight-darker);

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-primary {
  /* btn-base inline */
  color: white;
  background-color: var(--content-dark);
  background-color: var(--base-base) !important;

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--base-dark);
    background-color: var(--base-dark) !important;
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: var(--content-dark);

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-secondary {
  /* btn-base inline */
  color: white;
  background-color: var(--highlight-base);
  background-color: var(--highlight-base) !important;

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--highlight-base);
    background-color: var(--highlight-dark) !important;
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: var(--highlight-base);

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-anchor {
  background-color: var(--background-darker);
  color: var(--base-dark);

  &:hover, &:focus {
    background-color: var(--content-lighter);
    color: var(--base-dark);
  }

  &.outline {
    color: var(--content-dark);
  }
}

.btn-tertiary {
  /* btn-base inline */
  color: white;
  background-color: #f97316; /* orange-500 */

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--warning-dark);
  }

  &.outline {
    background-color: transparent;
    outline-width: 1px;
    box-shadow: none;
    color: #f97316; /* orange-500 */

    &:hover, &:focus {
      color: white;
    }
  }
}

.btn-gray {
  background-color: var(--background-darker);
  color: var(--text-dark);

  &:hover {
    background-color: var(--base-lighter);
    color: var(--text-dark);
  }
}

.btn-light-gray {
  background-color: var(--content-lighter);
  color: var(--content-dark);

  &:hover {
    background-color: var(--content-light);
    color: var(--content-darker);
  }
}

.btn-light-blue {
  color: var(--highlight-darker);
  background-color: var(--highlight-base);
}

.btn-light-green {
  color: #15803d; /* green-700 */
  background-color: #dcfce7; /* green-100 */
}

.btn-light-red {
  color: #b91c1c; /* red-700 */
  background-color: #fee2e2; /* red-100 */
}

.btn-expanded, .btn-block {
  display: block;
  width: 100%;
}

.btn-white {
  background-color: white;
  border: 1px solid var(--content-lighter);
  color: var(--base-base);

  &:hover {
    background-color: var(--background-base);
    color: var(--base-base);
  }

  &.primary {
    color: var(--base-base);
  }

  &.secondary {
    color: var(--highlight-dark);
  }

  &.tertiary {
    color: #ea580c; /* orange-600 */
  }
}

.btn-link {
  color: var(--highlight-base);
  background-color: transparent;
  box-shadow: none;

  &:hover,
  &:focus {
    color: var(--highlight-dark);
    transform: none;
  }
}

/* ==========================================
   NEW COLOR SYSTEM (v2.0) - BUTTON CLASSES
   See: docs/COLORS.md
   Use these for new buttons or gradual migration.
   ========================================== */

/* V2 Primary Button - uses HIGHLIGHT palette */
.btn-v2-primary {
  /* btn-base inline */
  color: white;
  background-color: var(--highlight-base);
  color: var(--highlight-contrast);

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--highlight-dark);
    color: var(--highlight-contrast);
  }

  &:disabled {
    background-color: var(--highlight-lighter);
    opacity: 0.6;
  }

  &.outline {
    background-color: transparent;
    color: var(--highlight-base);
    border: 1px solid var(--highlight-base);

    &:hover, &:focus {
      background-color: var(--highlight-lighter);
    }
  }
}

/* V2 Success Button - uses SUCCESS palette */
.btn-v2-success {
  /* btn-base inline */
  color: white;
  background-color: var(--success-base);
  color: var(--success-contrast);

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--success-dark);
    color: var(--success-contrast);
  }

  &:disabled {
    background-color: var(--success-lighter);
    opacity: 0.6;
  }

  &.outline {
    background-color: transparent;
    color: var(--success-base);
    border: 1px solid var(--success-base);

    &:hover, &:focus {
      background-color: var(--success-lighter);
    }
  }
}

/* V2 Info Button - uses INFO palette */
.btn-v2-info {
  /* btn-base inline */
  color: white;
  background-color: var(--info-base);
  color: var(--info-contrast);

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--info-dark);
    color: var(--info-contrast);
  }

  &:disabled {
    background-color: var(--info-lighter);
    opacity: 0.6;
  }

  &.outline {
    background-color: transparent;
    color: var(--info-base);
    border: 1px solid var(--info-base);

    &:hover, &:focus {
      background-color: var(--info-lighter);
    }
  }
}

/* V2 Warning Button - uses WARNING palette */
.btn-v2-warning {
  /* btn-base inline */
  color: white;
  background-color: var(--warning-base);
  color: var(--warning-contrast);

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--warning-dark);
    color: var(--warning-contrast);
  }

  &:disabled {
    background-color: var(--warning-lighter);
    opacity: 0.6;
  }

  &.outline {
    background-color: transparent;
    color: var(--warning-base);
    border: 1px solid var(--warning-base);

    &:hover, &:focus {
      background-color: var(--warning-lighter);
    }
  }
}

/* V2 Danger Button - uses DANGER palette */
.btn-v2-danger {
  /* btn-base inline */
  color: white;
  background-color: var(--danger-base);
  color: var(--danger-contrast);

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--danger-dark);
    color: var(--danger-contrast);
  }

  &:disabled {
    background-color: var(--danger-lighter);
    opacity: 0.6;
  }

  &.outline {
    background-color: transparent;
    color: var(--danger-base);
    border: 1px solid var(--danger-base);

    &:hover, &:focus {
      background-color: var(--danger-lighter);
    }
  }
}

/* V2 Muted Button - uses CONTENT palette */
.btn-v2-muted {
  /* btn-base inline */
  color: white;
  background-color: var(--content-light);
  color: var(--content-contrast);

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--content-base);
    color: var(--content-contrast);
  }

  &:disabled {
    background-color: var(--content-lighter);
    opacity: 0.6;
  }

  &.outline {
    background-color: transparent;
    color: var(--content-base);
    border: 1px solid var(--content-base);

    &:hover, &:focus {
      background-color: var(--background-dark);
    }
  }
}

/* V2 Dark Button - uses BASE palette */
.btn-v2-dark {
  /* btn-base inline */
  color: white;
  background-color: var(--base-base);
  color: var(--base-contrast);

  &:hover, &:focus, &:visited {
    color: white;
  }

  &:hover, &:focus {
    background-color: var(--base-dark);
    color: var(--base-contrast);
  }

  &:disabled {
    background-color: var(--base-lighter);
    opacity: 0.6;
  }

  &.outline {
    background-color: transparent;
    color: var(--base-base);
    border: 1px solid var(--base-base);

    &:hover, &:focus {
      background-color: var(--background-darker);
    }
  }
}

/* V2 Light Button - uses SURFACE palette */
.btn-v2-light {
  background-color: var(--background-dark);
  color: var(--background-contrast);
  border: 1px solid var(--background-darker);

  &:hover, &:focus {
    background-color: var(--background-darker);
    color: var(--background-contrast);
  }

  &:disabled {
    background-color: var(--background-light);
    opacity: 0.6;
  }
}

/* V2 Link Button */
.btn-v2-link {
  background-color: transparent;
  box-shadow: none;
  color: var(--highlight-base);

  &:hover, &:focus {
    color: var(--highlight-dark);
    transform: none;
  }
}

/* ==========================================
   V2 OVERRIDE CLASSES - Use with existing buttons
   These override utility classes to use CSS variables
   ========================================== */

/* V2 Override for btn-new - uses HIGHLIGHT palette */
.v2-btn-new {
  background-color: var(--highlight-base) !important;
  color: var(--highlight-contrast) !important;
}
.v2-btn-new:hover, .v2-btn-new:focus {
  background-color: var(--highlight-dark) !important;
  color: var(--highlight-contrast) !important;
}

/* V2 Override for btn-done - uses BASE palette */
.v2-btn-done {
  background-color: var(--base-base) !important;
  color: var(--base-contrast) !important;
}
.v2-btn-done:hover, .v2-btn-done:focus {
  background-color: var(--base-dark) !important;
  color: var(--base-contrast) !important;
}

/* V2 Override for btn-primary - uses BASE palette */
.v2-btn-primary {
  background-color: var(--base-base) !important;
  color: var(--base-contrast) !important;
}
.v2-btn-primary:hover, .v2-btn-primary:focus {
  background-color: var(--base-dark) !important;
  color: var(--base-contrast) !important;
}

/* V2 Override for btn-secondary - uses HIGHLIGHT palette */
.v2-btn-secondary {
  background-color: var(--highlight-base) !important;
  color: var(--highlight-contrast) !important;
}
.v2-btn-secondary:hover, .v2-btn-secondary:focus {
  background-color: var(--highlight-dark) !important;
  color: var(--highlight-contrast) !important;
}

/* V2 Override for btn-cancel/back - uses CONTENT palette */
.v2-btn-cancel {
  background-color: var(--content-light) !important;
  color: var(--content-contrast) !important;
}
.v2-btn-cancel:hover, .v2-btn-cancel:focus {
  background-color: var(--content-base) !important;
  color: var(--content-contrast) !important;
}

/* V2 Override for aside blocks - uses CONTENT palette */
.v2-active-block {
  background-color: var(--content-dark) !important;
  color: var(--content-contrast) !important;
}
.v2-inactive-block {
  background-color: var(--content-light) !important;
  color: var(--content-contrast) !important;
}
.v2-inactive-block:hover {
  background-color: var(--highlight-base) !important;
  color: var(--highlight-contrast) !important;
}
.form-border {
  background-color: white;
  border: 1px solid var(--background-darker);
  border-radius: 0.5rem;
  padding-top: 1rem;
}

@media (min-width: 1024px) {
  .form-border {
    padding: 1rem;
  }
}

.form-group {
  margin-bottom: 1rem;
  position: relative;
  transition: all 300ms ease-in-out;
}

/* Optional: If you want to apply a modern look to all direct child inputs */
.form-group > *:last-child {
  margin-bottom: 0;
}

.form-input {
  &[disabled] {
    background-color: var(--content-lighter);
    color: var(--content-dark);
    cursor: not-allowed;
  }
}

/* non-input elements (like the Stripe card form) can be styled to look like an input */
div.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--background-base);
  border: 1px solid var(--background-dark);
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  width: 100%;
  transition: border-color 300ms ease-in-out, box-shadow 300ms ease-in-out;

  &:hover {
    border-color: var(--background-darker);
  }

  &:focus {
    outline: none;
    border-color: var(--highlight-light);
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.5);
  }

  &:disabled {
    background-color: var(--content-lighter);
    color: var(--content-dark);
    cursor: not-allowed;
  }
}


.form-control {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  color: var(--base-base);
  border: 1px solid var(--background-darker);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 500;
  line-height: 1.375;
  transition: all 300ms ease-in-out;

  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--highlight-base);
    border-color: transparent;
  }

  &[disabled] {
    background-color: var(--content-lighter);
    color: var(--content-dark);
    cursor: not-allowed;
  }

  &.error {
    border-color: #ef4444;
    background-color: #fef2f2;
    color: #b91c1c;
  }

  &.error:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px #ef4444;
  }

  &:hover {
    border-color: var(--content-lighter);
  }

  &:focus {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }
}


select:not([multiple]) {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border-color: var(--content-lighter);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:focus {
    border-color: var(--highlight-base);
    box-shadow: 0 0 0 1px var(--highlight-light);
  }

  &:hover {
    border-color: var(--content-lighter);
  }

  &:focus {
    box-shadow: 0 0 0 2px var(--highlight-base);
    border-color: transparent;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }
}

select[multiple] {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  border-radius: 0.5rem;
  border-color: var(--content-lighter);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:focus {
    border-color: var(--highlight-base);
    box-shadow: 0 0 0 1px var(--highlight-light);
  }

  &:hover {
    border-color: var(--content-lighter);
  }

  &:focus {
    box-shadow: 0 0 0 2px var(--highlight-base);
    border-color: transparent;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }
}



label,
.label {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 300;
  line-height: 1.25rem;
  color: var(--content-dark);
  margin-bottom: 0;
}

.form-hint {
  color: var(--content-dark);
  font-size: 0.75rem;
  line-height: 1rem;
  font-style: italic;

  &.error {
    color: #ef4444;
    font-size: 0.75rem;
    line-height: 1rem;
    font-style: italic;
    line-height: 1.5;
    margin-top: 0.25rem;
  }
}

.caret {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  color: var(--base-dark);
}

form.inline {
  .form-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .form-group .input {
    flex: 1;
  }

  .form-group .label {
    width: 25%;
  }
}


/* Fix flatpickr */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  display: inline-block;
}

.form-checkbox {
  border-radius: 0.25rem;
  border-color: var(--content-lighter);
  color: var(--highlight-dark);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  &:focus {
    border-color: var(--highlight-light);
    box-shadow: 0 0 0 1px var(--highlight-light);
  }

  &[disabled] {
    background-color: var(--content-lighter);
  }
}


.input-file {
  height: auto;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
  display: inline-block;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  overflow: hidden;
  position: absolute;
  border: none;

  + label {
    display: inline-flex;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0.25rem;
    text-decoration: none;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    height: 40px;
    line-height: 40px;
    transition: ease 0.3s background, ease 0.3s transform, ease 0.2s color;

    /* btn-tertiary styles */
    background-color: var(--content-light);
    color: var(--content-contrast);

    &:hover {
      background-color: var(--content-base);
    }

    &:focus {
      outline: 1px dotted var(--content-dark);
      outline: -webkit-focus-ring-color auto 5px;
    }
  }
}

[type='checkbox'] {
  padding: 0.5rem;
  border-radius: 0.25rem;
  border-color: var(--content-lighter);
  color: var(--highlight-dark);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: all 300ms ease-in-out;

  &:focus {
    border-color: var(--highlight-base);
    box-shadow: 0 0 0 2px var(--highlight-light);
  }

  &[disabled] {
    background-color: var(--content-lighter);
    border-color: var(--content-base);
    cursor: not-allowed;
    color: var(--content-dark);
  }
}

[type='radio'] {
  border-radius: 9999px;
  border-color: var(--content-lighter);
  color: var(--highlight-dark);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: all 300ms ease-in-out;

  &:focus {
    border-color: var(--highlight-base);
    box-shadow: 0 0 0 2px var(--highlight-light);
  }

  &[disabled] {
    background-color: var(--content-lighter);
    border-color: var(--content-base);
    cursor: not-allowed;
    color: var(--content-dark);
  }
}


/* To make select title bolder than normal
   We are using this in activities framing forms so far */
.custom-select optgroup {
  font-weight: 500;
}

/* ==========================================
   NEW COLOR SYSTEM (v2.0) - FORM CLASSES
   See: docs/COLORS.md
   Use these for new forms or gradual migration.
   ========================================== */

/* V2 Form Container */
.v2-form-border {
  background-color: var(--background-base);
  border: 1px solid var(--background-darker);
  border-radius: 0.5rem;
  padding: 1rem;
}

/* V2 Form Group */
.v2-form-group {
  margin-bottom: 1rem;
  position: relative;
}

/* V2 Label */
.v2-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--base-lighter);
  margin-bottom: 0.25rem;
}

/* V2 Form Control (input, textarea) */
.v2-form-control {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--background-contrast);
  background-color: var(--background-base);
  border: 1px solid var(--background-darker);
  border-radius: 0.5rem;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.v2-form-control:hover {
  border-color: var(--content-lighter);
}

.v2-form-control:focus {
  outline: none;
  border-color: var(--highlight-base);
  box-shadow: 0 0 0 3px var(--highlight-lighter);
}

.v2-form-control:disabled {
  background-color: var(--content-lighter);
  color: var(--content-dark);
  cursor: not-allowed;
}

.v2-form-control.error {
  border-color: var(--danger-base);
  background-color: var(--danger-lighter);
}

.v2-form-control.error:focus {
  box-shadow: 0 0 0 3px var(--danger-lighter);
}

/* V2 Select */
.v2-select {
  display: block;
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--background-contrast);
  background-color: var(--background-base);
  border: 1px solid var(--background-darker);
  border-radius: 0.5rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.v2-select:hover {
  border-color: var(--content-lighter);
}

.v2-select:focus {
  outline: none;
  border-color: var(--highlight-base);
  box-shadow: 0 0 0 3px var(--highlight-lighter);
}

.v2-select:disabled {
  background-color: var(--content-lighter);
  color: var(--content-dark);
  cursor: not-allowed;
}

/* V2 Checkbox */
.v2-checkbox {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--content-lighter);
  border-radius: 0.25rem;
  background-color: var(--background-base);
  transition: all 0.2s ease-in-out;
}

.v2-checkbox:checked {
  background-color: var(--highlight-base);
  border-color: var(--highlight-base);
}

.v2-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--highlight-lighter);
}

.v2-checkbox:disabled {
  background-color: var(--content-lighter);
  cursor: not-allowed;
}

/* V2 Radio */
.v2-radio {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--content-lighter);
  border-radius: 50%;
  background-color: var(--background-base);
  transition: all 0.2s ease-in-out;
}

.v2-radio:checked {
  background-color: var(--highlight-base);
  border-color: var(--highlight-base);
}

.v2-radio:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--highlight-lighter);
}

.v2-radio:disabled {
  background-color: var(--content-lighter);
  cursor: not-allowed;
}

/* V2 Form Hint */
.v2-form-hint {
  font-size: 0.75rem;
  color: var(--content-lighter);
  margin-top: 0.25rem;
}

.v2-form-hint.error {
  color: var(--danger-base);
}

/* V2 Input Group */
.v2-input-group {
  display: flex;
  align-items: stretch;
}

.v2-input-group .v2-form-control {
  flex: 1;
  border-radius: 0;
}

.v2-input-group .v2-form-control:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.v2-input-group .v2-form-control:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.v2-input-addon {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  background-color: var(--background-dark);
  border: 1px solid var(--background-darker);
  color: var(--content-dark);
  font-size: 0.875rem;
}
  /* Cross Table Stripped in X and Y when hovered */

  /* Tis works along the script cross-table striped located in \javascript\src\tables.js */
  /* Applies to the entire table */
  .cross-table {
    min-width: 100%;
    border-collapse: collapse;
  }

  /* Defines a linear gradient background using background palette */
  .cross-table .bg-gradient {
    background-color: var(--background-dark);
  }

  .cross-table th {
    background-color: var(--background-dark);
    padding: 20px 28px;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.50em;
    color: var(--background-contrast);
    text-align: left;
  }

    /* Adds a background color to all cells in the current column */
  .striped tbody td.hover-column {
    background-color: var(--muted-base);
    box-shadow: inset 0 -1px 0 var(--muted-base);
  }

  /* Adds a hover background color to the current cell and all cells to its right */
  .striped tbody td:hover,
  .striped tbody td:hover ~ td:nth-child(1),
  .striped tbody td:hover ~ td:nth-child(2),
  .striped tbody td:hover ~ td:nth-child(3),
  .striped tbody td:hover ~ td:nth-child(4),
  .striped tbody td:hover ~ td:nth-child(5),
  .striped tbody td:hover ~ td:nth-child(6) {
    background-color: var(--muted-base);
  }

  /* Adds background color to entire row on hover */
  .cross-table tr:hover {
    background-color: var(--muted-base);
    min-width: 100%;
    border-collapse: collapse;
  }

  /* Changes background color to background-darker on hover for entire row */
  .cross-table tr:hover.bg-white.hover\:bg-background-darker.cursor-pointer {
    background-color: var(--tw-bg-background-darker);
    cursor: pointer;
  }

  .cross-table .cursor-pointer {
    cursor: pointer;
  }

  .cross-table .primary-link {
    color: var(--base-base);
  }

  .cross-table .primary-link:hover {
    color: var(--base-base);
  }

  .cross-table td {
    whitespace-nowrap: ;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 300;
  }

  /* Adds a hover background color to the current cell and all cells to its right */
  .cross-table .striped tbody td:hover,
  .cross-table .striped tbody td:hover ~ td {
    background-color: var(--muted-base);
  }

  /* Adds a box-shadow to the current cell, which adds a border on top and bottom of the cell */
  .cross-table .striped tbody td:hover {
    box-shadow: inset 0 -1px 0 var(--muted-base), inset 0 1px 0 var(--muted-base);
  }

  /* Adds a background color to all cells in the current column */
  .cross-table .striped tbody td.hover-column {
    background-color: var(--muted-base);
    box-shadow: inset 0 -1px 0 var(--muted-base);
  }

    /* Adds a background color to the current cell */
  .striped tbody td:hover {
    background-color: var(--highlight-base); /* Hovered td background */ 
    color: var(--highlight-contrast);

  }


  .cross-table {
    min-width: 100%;
    border-collapse: collapse;
  }

  .cross-table th {
    padding: 20px 28px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--background-contrast);
    text-align: left;
  }

  .cross-table .striped tbody td {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 300;
  }




  .cross-table tr:nth-child(odd) {
    background-color: var(--background-base);
  }

  .cross-table tr:nth-child(even) {
    background-color: var(--background-dark);
  }

  .cross-table tr:hover {
    background-color: var(--muted-base);
  }

  .cross-table tr:hover.bg-white.hover\:bg-background-darker.cursor-pointer {
    background-color: var(--tw-bg-background-darker);
    cursor: pointer;
  }

  .cross-table .cursor-pointer {
    cursor: pointer;
  }

  .cross-table .primary-link {
    color: var(--base-base);
  }

  .cross-table .primary-link:hover {
    color: var(--base-base);
  }

  .cross-table td.hover-column {
    background-color: var(--muted-base);
    box-shadow: inset 0 -1px 0 var(--muted-base);
  }

  .cross-table .striped tbody td.hover-column {
    background-color: var(--muted-base);
    box-shadow: inset 0 -1px 0 var(--muted-base);
  }

  .cross-table .striped tbody td:hover {
    background-color: var(--muted-base);
    box-shadow: inset 0 -1px 0 var(--muted-base), inset 0 1px 0 var(--muted-base);
  }

  /* ==========================================
     STRIPED TABLE - Standard table with alternating rows
     ========================================== */

  .striped-table {
    min-width: 100%;
    border-collapse: collapse;
  }

  .striped-table th {
    background-color: var(--deep-light);
    color: var(--deep-contrast);
    padding: 12px 16px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
  }

  .striped-table td {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-dark);
  }

  .striped-table tbody tr:nth-child(odd) {
    background-color: var(--background-base);
  }

  .striped-table tbody tr:nth-child(even) {
    background-color: var(--content-lighter);
  }

  .striped-table tbody tr:hover {
    background-color: var(--content-light);
  }

  .striped-table tfoot td,
  .striped-table .table-section-header td {
    background-color: var(--content-base);
    color: var(--content-contrast);
    padding: 12px 16px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* ==========================================
     NEW COLOR SYSTEM (v2.0) - TABLE CLASSES
     See: docs/COLORS.md
     Use these for new tables or gradual migration.
     ========================================== */

  /* V2 Table - uses structure palette */
  .v2-table {
    min-width: 100%;
    border-collapse: collapse;
  }

  .v2-table th {
    background-color: var(--muted-base);
    color: var(--background-contrast);
    padding: 16px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
  }

  .v2-table td {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 400;
    color: var(--background-contrast);
  }

  .v2-table tr:nth-child(odd) {
    background-color: var(--background-base);
  }

  .v2-table tr:nth-child(even) {
    background-color: var(--background-dark);
  }

  .v2-table tbody tr:hover {
    background-color: var(--muted-base);
  }

  .v2-table .v2-link {
    color: var(--highlight-base);
    text-decoration: none;
  }

  .v2-table .v2-link:hover {
    color: var(--highlight-dark);
    text-decoration: underline;
  }

  /* V2 Table Dark Header variant */
  .v2-table-dark th {
    background-color: var(--deep-base);
    color: var(--deep-contrast);
  }

  /* V2 Table with highlight hover */
  .v2-table-highlight tbody tr:hover {
    background-color: var(--highlight-lighter);
  }

  .v2-table-highlight tbody td:hover {
    background-color: var(--highlight-base);
    color: var(--highlight-contrast);
  }

  /* V2 Bordered table */
  .v2-table-bordered {
    border: 1px solid var(--muted-base);
  }

  .v2-table-bordered th,
  .v2-table-bordered td {
    border: 1px solid var(--muted-base);
  }

  /* V2 Compact table */
  .v2-table-compact th {
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  .v2-table-compact td {
    padding: 6px 12px;
    font-size: 0.8125rem;
  }

  /* V2 Table Header Row */
  .v2-table-header {
    background-color: var(--muted-base);
  }

  .v2-table-header th {
    color: var(--background-contrast);
    font-weight: 500;
  }

  /* V2 Table Row */
  .v2-table-row {
    background-color: var(--background-base);
    transition: background-color 0.2s ease;
  }

  .v2-table-row:hover {
    background-color: var(--highlight-lighter);
  }

  /* ==========================================
     TABLE CONTROLS - Filter, Sort, Pagination
     Reusable controls for table views
     ========================================== */

  .table-controls {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--background-dark);
    border-radius: 0.375rem;
  }

  .table-controls-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
  }

  .table-control-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .table-control-group label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
  }

  .table-control-select {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    background-color: var(--background-base);
    color: var(--background-contrast);
    border: 1px solid var(--muted-base);
    border-radius: 0.25rem;
    cursor: pointer;
    min-width: 80px;
  }

  .table-control-select:hover {
    border-color: var(--highlight-base);
  }

  .table-control-select:focus {
    outline: none;
    border-color: var(--highlight-base);
    box-shadow: 0 0 0 2px var(--highlight-lighter);
  }

  .table-control-input {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    background-color: var(--background-base);
    color: var(--background-contrast);
    border: 1px solid var(--muted-base);
    border-radius: 0.25rem;
    min-width: 150px;
  }

  .table-control-input::placeholder {
    color: var(--text-muted);
  }

  .table-control-input:focus {
    outline: none;
    border-color: var(--highlight-base);
    box-shadow: 0 0 0 2px var(--highlight-lighter);
  }

  .table-control-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    background-color: var(--highlight-base);
    color: var(--highlight-contrast);
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .table-control-btn:hover {
    background-color: var(--highlight-dark);
  }

  .table-control-btn-clear {
    background-color: var(--muted-base);
    color: var(--background-contrast);
    text-decoration: none;
  }

  .table-control-btn-clear:hover {
    background-color: var(--muted-dark);
  }

  .table-control-search {
    flex: 1;
  }

  .table-control-counter {
    margin-left: auto;
  }

  .table-control-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
  }

  /* Responsive: stack controls on smaller screens */
  @media (max-width: 768px) {
    .table-controls-form {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }

    .table-control-search {
      margin-left: 0;
      width: 100%;
    }

    .table-control-input {
      flex: 1;
    }
  }

  /* No results message */
  .table-no-results {
    padding: 2rem;
    text-align: center;
    background-color: var(--background-base);
    border: 1px solid var(--muted-base);
    border-radius: 0.375rem;
    color: var(--text-muted);
  }

  .table-no-results p {
    margin: 0;
    font-size: 0.875rem;
  }

  .table-no-results strong {
    color: var(--background-contrast);
  }
/* app/assets/stylesheets/accordion.css */

/* IMPORTANT: Accordion Component Dependency Notice */
/* ------------------------------------------------ */
/* This file is part of the Accordion component, which consists of four interconnected files: */
/* 1. Helper: app/helpers/application/accordion_component.rb */
/* 2. Controller: app/javascript/controllers/accordion_controller.js */
/* 3. CSS: app/assets/stylesheets/components/accordion.css */
/* 4. ERB Template: app/views/dir */

/* These files work together to create the Accordion functionality. */
/* If you modify this file, please review the other three files to ensure */
/* your changes don't break existing functionality or styling. */

.accordion-container {
  padding: 0.5rem 0;
}

.accordion-wrapper {
  border: none;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--background-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.accordion {
  background-color: var(--background-light);
  color: var(--background-contrast);
  cursor: pointer;
  padding: 1rem 1.25rem;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 0.9375rem;
  transition: background-color 0.2s ease;
  position: relative;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.accordion:hover {
  background-color: var(--background-base);
}

.accordion.active {
  background-color: var(--background-base);
}

.accordion-title {
  display: inline-block;
  color: var(--text-dark);
  font-weight: 500;
  font-size: 0.9375rem;
}

.accordion .accordion-icon {
  color: var(--highlight-base);
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
}

.accordion .accordion-icon svg {
  width: 20px;
  height: 20px;
}

.icon-add {
  display: inline;
}

.icon-minus {
  display: none;
}

.accordion.active .icon-add {
  display: none;
}

.accordion.active .icon-minus {
  display: inline;
}

/* Panel transition for max height */
.panel {
  padding: 0 1.25rem;
  background-color: var(--background-lighter);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}

/* Only add the border when the panel is fully opened */
.panel.open {
  max-height: 2000px;
  border-top: 1px solid var(--background-darker);
}

.panel p {
  margin: 0.75rem 0;
  padding-left: 0;
  color: var(--text-base);
  font-size: 0.875rem;
  line-height: 1.6;
}

.panel h5 {
  color: var(--text-dark);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.panel ol {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.panel ol li {
  margin-bottom: 0.75rem;
  color: var(--text-base);
  font-size: 0.875rem;
  line-height: 1.6;
}

.panel ol li strong {
  color: var(--text-dark);
}

/* ==========================================
   NEW COLOR SYSTEM (v2.0) - ACCORDION CLASSES
   See: docs/COLORS.md
   Use these for new accordions or gradual migration.
   ========================================== */

.v2-accordion-wrapper {
  border: 1px solid var(--background-darker);
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: var(--background-base);
}

.v2-accordion {
  background-color: var(--background-base);
  color: var(--background-contrast);
  cursor: pointer;
  padding: 1rem 1.25rem;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 0.9375rem;
  transition: background-color 0.2s ease;
  position: relative;
  border: none;
}

.v2-accordion.active,
.v2-accordion:hover {
  background-color: var(--background-dark);
}

.v2-accordion-title {
  display: inline-block;
  color: var(--background-contrast);
  font-weight: 500;
}

.v2-accordion .v2-accordion-icon {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--highlight-base);
}

.v2-accordion .icon-add {
  display: inline;
}

.v2-accordion .icon-minus {
  display: none;
}

.v2-accordion.active .icon-add {
  display: none;
}

.v2-accordion.active .icon-minus {
  display: inline;
}

.v2-panel {
  padding: 0 1.25rem;
  background-color: var(--background-base);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-in-out;
}

.v2-panel.open {
  max-height: 1000px;
  border-top: 1px solid var(--background-darker);
}

.v2-panel p {
  margin: 1rem 0;
  padding-left: 1.25rem;
  color: var(--background-contrast);
}
.alert {
  background-color: var(--content-dark);
  color: var(--content-contrast);
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: 'Exo', 'Inter', sans-serif;
  border: 1px solid var(--content-lighter);

  svg {
    color: var(--content-lighter);
  }

  &.alert-info {
    background-color: var(--info-darker);
    color: var(--info-contrast);
    border-color: var(--info-dark);

    svg {
      color: var(--info-light);
    }
  }

  &.alert-success {
    background-color: var(--success-darker);
    color: var(--success-contrast);
    border-color: var(--success-dark);

    svg {
      color: var(--success-light);
    }
  }

  &.alert-error {
    background-color: var(--danger-darker);
    color: var(--danger-contrast);
    border-color: var(--danger-dark);

    svg {
      color: var(--danger-light);
    }
  }

  &.alert-warning {
    background-color: var(--warning-darker);
    color: var(--warning-contrast);
    border-color: var(--warning-dark);

    svg {
      color: var(--warning-light);
    }
  }

  a {
    font-weight: 600;
  }
}

.notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  justify-content: center;
  font-weight: 500;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin: 0 auto;
  max-width: fit-content;

  &.notice-info {
    background-color: var(--info-darker);
    color: var(--info-contrast);
    border: 1px solid var(--info-dark);

    svg {
      color: var(--info-light);
    }
  }

  &.notice-success {
    background-color: var(--success-darker);
    color: var(--success-contrast);
    border: 1px solid var(--success-dark);

    svg {
      color: var(--success-light);
    }
  }

  &.notice-error {
    background-color: var(--danger-darker);
    color: var(--danger-contrast);
    border: 1px solid var(--danger-dark);

    svg {
      color: var(--danger-light);
    }
  }

  &.notice-warning {
    background-color: var(--warning-darker);
    color: var(--warning-contrast);
    border: 1px solid var(--warning-dark);

    svg {
      color: var(--warning-light);
    }
  }
}
/* ============================================
   TOAST NOTIFICATION SYSTEM
   - Fixed position bottom-right
   - Stacks bottom-to-top (oldest below, newest above)
   - Auto-dismiss after 3 seconds
   ============================================ */

/* Container - fixed bottom right */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse; /* Newest on top */
  gap: 10px;
  pointer-events: none;
  max-width: 400px;
}

/* Individual toast */
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  min-width: 280px;
  max-width: 400px;

  /* Animation */
  animation: toastSlideIn 0.3s ease-out forwards;
  transform-origin: right center;
}

/* Slide in from right */
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide out to right */
@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast.toast-exit {
  animation: toastSlideOut 0.3s ease-in forwards;
}

/* Toast icon */
.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.toast-icon svg {
  width: 100%;
  height: 100%;
}

/* Toast content */
.toast-content {
  flex: 1;
}

/* Close button */
.toast-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  color: inherit;
}

.toast-close:hover {
  opacity: 1;
}

.toast-close svg {
  width: 16px;
  height: 16px;
}

/* Progress bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 8px 8px;
  animation: toastProgress 3s linear forwards;
}

@keyframes toastProgress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* Toast position relative for progress bar */
.toast {
  position: relative;
  overflow: hidden;
}

/* ============================================
   TOAST VARIANTS
   ============================================ */

/* Success */
.toast-success {
  background-color: var(--success-darker);
  color: var(--success-contrast);
  border: 1px solid var(--success-dark);
}

.toast-success .toast-icon {
  color: var(--success-light);
}

.toast-success .toast-progress {
  background-color: var(--success-light);
}

/* Error / Danger */
.toast-error {
  background-color: var(--danger-darker);
  color: var(--danger-contrast);
  border: 1px solid var(--danger-dark);
}

.toast-error .toast-icon {
  color: var(--danger-light);
}

.toast-error .toast-progress {
  background-color: var(--danger-light);
}

/* Warning */
.toast-warning {
  background-color: var(--warning-darker);
  color: var(--warning-contrast);
  border: 1px solid var(--warning-dark);
}

.toast-warning .toast-icon {
  color: var(--warning-light);
}

.toast-warning .toast-progress {
  background-color: var(--warning-light);
}

/* Info */
.toast-info {
  background-color: var(--info-darker);
  color: var(--info-contrast);
  border: 1px solid var(--info-dark);
}

.toast-info .toast-icon {
  color: var(--info-light);
}

.toast-info .toast-progress {
  background-color: var(--info-light);
}

/* Default / Neutral */
.toast-default {
  background-color: var(--content-dark);
  color: var(--content-contrast);
  border: 1px solid var(--content-lighter);
}

.toast-default .toast-icon {
  color: var(--content-lighter);
}

.toast-default .toast-progress {
  background-color: var(--content-lighter);
}

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

@media (max-width: 480px) {
  .toast-container {
    left: 10px;
    right: 10px;
    bottom: 70px;
    max-width: none;
  }

  .toast {
    min-width: auto;
    max-width: none;
    width: 100%;
  }
}
.announcement-new {
  background-color: #dbeafe;
  color: #3b82f6;
}

.announcement-fix {
  background-color: #fee2e2;
  color: #ef4444;
}

.announcement-update {
  background-color: #dcfce7;
  color: #22c55e;
}

.announcement-improvement {
  background-color: #f3e8ff;
  color: #a855f7;
}

.unread-announcements span:before {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  border-radius: 9999px;
  background-color: #ef4444;
  content: '';
}
/* ============================================
   AVATAR SYSTEM - Modular & Theme-aware
   ============================================
   Sistema unificado de avatars para User y Account

   Uso con helper:
     render_avatar(@user, size: :md, shape: :circle)
     render_avatar(@account, size: :lg, shape: :rounded)

   Clases generadas:
     .avatar.avatar--md.avatar--circle
     .avatar.avatar--lg.avatar--rounded
   ============================================ */

/* ============================================
   Variables de tamaño (sincronizadas con AvatarHelper::AVATAR_SIZES)
   ============================================ */
:root {
  --avatar-xs: 24px;
  --avatar-sm: 40px;
  --avatar-md: 48px;
  --avatar-lg: 72px;
  --avatar-xl: 100px;
}

/* ============================================
   Base Avatar
   ============================================ */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));

  /* Default size (md) */
  width: var(--avatar-md);
  height: var(--avatar-md);
}

/* ============================================
   Sizes
   ============================================ */
.avatar--xs {
  width: var(--avatar-xs);
  height: var(--avatar-xs);
}

.avatar--sm {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
}

.avatar--md {
  width: var(--avatar-md);
  height: var(--avatar-md);
}

.avatar--lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
}

.avatar--xl {
  width: var(--avatar-xl);
  height: var(--avatar-xl);
}

/* ============================================
   Shapes
   ============================================ */
.avatar--circle {
  border-radius: 50%;
}

.avatar--rounded {
  border-radius: 12px;
}

/* Responsive border-radius por tamaño */
.avatar--xs.avatar--rounded { border-radius: 6px; }
.avatar--sm.avatar--rounded { border-radius: 8px; }
.avatar--md.avatar--rounded { border-radius: 10px; }
.avatar--lg.avatar--rounded { border-radius: 14px; }
.avatar--xl.avatar--rounded { border-radius: 16px; }

/* ============================================
   Image (dentro de avatar)
   ============================================ */
.avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ============================================
   Initials Fallback
   ============================================ */
.avatar__initials {
  color: white;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* Font sizes por tamaño de avatar */
.avatar--xs .avatar__initials { font-size: 0.625rem; }
.avatar--sm .avatar__initials { font-size: 0.875rem; }
.avatar--md .avatar__initials { font-size: 1rem; }
.avatar--lg .avatar__initials { font-size: 1.5rem; }
.avatar--xl .avatar__initials { font-size: 2rem; }

/* ============================================
   Modifiers
   ============================================ */
.avatar--shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.avatar--glow {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--highlight-base) 40%, transparent);
}

.avatar--border {
  border: 2px solid white;
}

.avatar--border-highlight {
  border: 3px solid var(--highlight-base);
}

/* ============================================
   Badge/Indicator (avatar pequeño superpuesto)
   ============================================ */
.avatar-small,
.avatar__badge {
  position: absolute;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  bottom: 0;
  right: 0;
  box-shadow: 0 0 0 2px var(--background-base);
  overflow: hidden;
}

.avatar__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   Status Indicator (online/offline)
   ============================================ */
.avatar__status {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  bottom: 2px;
  right: 2px;
  border: 2px solid white;
}

.avatar__status--online {
  background: var(--success-base);
}

.avatar__status--offline {
  background: var(--content-lighter);
}

.avatar__status--busy {
  background: var(--danger-base);
}

/* ============================================
   Legacy support (mantiene compatibilidad)
   ============================================ */
.avatar.bg-info-base {
  background: var(--info-base);
}

.avatar .initials {
  color: white;
  font-weight: 500;
  text-transform: uppercase;
}

/* ============================================
   Avatar Picker - Profile Edit Form
   ============================================ */
.avatar-picker {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.avatar-picker__current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.avatar-picker__preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--highlight-base);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--highlight-base) 30%, transparent);
}

.avatar-picker__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-picker__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--content-dark);
  margin: 0;
}

.avatar-picker__subtitle {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--content-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem 0;
}

.avatar-picker__gallery {
  padding: 1rem;
  background: var(--background-lighter);
  border-radius: 12px;
  border: 1px solid var(--content-lightest);
}

.avatar-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.avatar-picker__option {
  position: relative;
  cursor: pointer;
}

.avatar-picker__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.avatar-picker__thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.avatar-picker__option:hover .avatar-picker__thumb {
  border-color: var(--highlight-lighter);
  transform: scale(1.05);
}

.avatar-picker__radio:checked + .avatar-picker__thumb {
  border-color: var(--highlight-base);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight-base) 25%, transparent);
}

.avatar-picker__radio:focus + .avatar-picker__thumb {
  outline: 2px solid var(--highlight-light);
  outline-offset: 2px;
}

.avatar-picker__upload {
  text-align: center;
}

.avatar-picker__upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--highlight-dark);
  background: color-mix(in srgb, var(--highlight-base) 10%, transparent);
  border: 1px dashed var(--highlight-base);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.avatar-picker__upload-btn:hover {
  background: color-mix(in srgb, var(--highlight-base) 20%, transparent);
  border-style: solid;
}

.avatar-picker__upload-btn svg {
  stroke: var(--highlight-base);
}

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

/* Responsive */
@media (min-width: 640px) {
  .avatar-picker__grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
pre {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 1.5rem;

  code.hljs {
    border-radius: 0.25rem;
    padding: 1rem;
  }

}

code {
  color: #ef4444;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
/* Brand colors - these are official brand colors, defined as CSS variables for consistency */
:root {
  --brand-twitter: #4099ff;
  --brand-facebook: #3B5998;
  --brand-google: #D34836;
}

.bg-twitter { background: var(--brand-twitter); }
.bg-facebook { background: var(--brand-facebook); }
.bg-google_oauth2 { background: var(--brand-google); }

.text-twitter { color: var(--brand-twitter); }
.text-facebook { color: var(--brand-facebook); }
.text-google_oauth2 { color: var(--brand-google); }

.btn-twitter {
  background: var(--brand-twitter);
  color: white;
}

.btn-facebook {
  background: var(--brand-facebook);
  color: white;
}

.btn-github {
  background-color: #6b7280;
  color: white;
}

.btn-google_oauth2 {
  background: var(--brand-google);
  color: white;
}
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.col-resize {cursor: col-resize;}
.context-menu {cursor: context-menu;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(/myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
.direct-upload {
  display: inline-block;
  position: relative;
  padding: 2px 4px;
  margin: 0 3px 3px 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  font-size: 11px;
  line-height: 13px;
}

.direct-upload--pending {
  opacity: 0.6;
}

.direct-upload__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  opacity: 0.2;
  background: var(--highlight-base);
  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
  transform: translate3d(0, 0, 0);
}

.direct-upload--complete .direct-upload__progress {
  opacity: 0.4;
}

.direct-upload--error {
  border-color: var(--danger-base);
}

input[type=file][data-direct-upload-url][disabled] {
  display: none;
}
.docs-main {
  min-height: calc(100vh - 64px);
}

.image-placeholder {
  height: 180px;
  background-color: #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-xs {
  width: 12px;
  height: auto;
}

.icon-sm {
  width: 16px;
  height: auto;
}

.icon {
  width: 20px;
  height: auto;
}

.icon-lg {
  width: 32px;
  height: auto;
}

.icon-xl {
  width: 36px;
  height: auto;
}

.icon-2xl {
  width: 48px;
  height: auto;
}

.icon-3xl {
  width: 64px;
  height: auto;
}

/* A couple handy classes for responsive YouTube and other iframe embeds */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Modal container */
.modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 50%; /* Center horizontally */
  top: 50%; /* Center vertically */
  transform: translate(-50%, -50%); /* Translate to center */
  width: 50%; /* Reduce width to 50% of screen */
  height: 50%; /* Set height to 50% of screen */
  background: var(--background-base); /* Set background color */
  overflow: auto; /* Enable scroll if needed */
  display: none; /* Hidden by default */
  border: var(--content-dark) 1px solid; /* Add border */
}

/* Style for modal title */
.modal-header {
  padding: 20px; /* Remove padding */
  background-color: var(--content-base); /* Set background color to gray */
  color: var(--background-base); /* Set text color */
  display: flex;
  align-items: center;
}

.modal-header .fas {
  color: var(--background-base);
  padding-right: 10px;
}
.modal-icon {
  font-size: 1.5em;
}

.modal-icon {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

.modal-title {
  margin: 0;
  padding: 0;
  font-size: 18px;
}

/* Modal background */
.modal-background {
  position: fixed; /* Stay in place */
  z-index: 0; /* Sit behind modal */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background: rgba(0, 0, 0, 0.8); /* Add a layer with 80% opacity */
  display: none; /* Hidden by default */
}

/* Show the modal and background */
.show-modal {
  display: block;
}

.show-background {
  display: block;
}

/* Close button */
.close-button {
  color: var(--background-base);
  float: right;
  font-size: 18px;
  font-weight: normal;
}

/* The Close Button */
.close {
  color: var(--content-light);
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: var(--content-dark);
  text-decoration: none;
  cursor: pointer;
}
.modal-footer {
  position: absolute;
  bottom: 0;
  width: 95%;
  padding-bottom: 20px;
}

/* ==========================================
   NEW COLOR SYSTEM (v2.0) - MODAL CLASSES
   See: docs/COLORS.md
   Use these for new modals or gradual migration.
   ========================================== */

/* V2 Modal Container */
.v2-modal {
  position: fixed;
  z-index: 1050;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  max-width: 600px;
  background-color: var(--background-base);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: none;
}

.v2-modal.show-modal {
  display: block;
}

/* V2 Modal Header */
.v2-modal-header {
  padding: 1rem 1.5rem;
  background-color: var(--deep-base);
  color: var(--deep-contrast);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v2-modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.v2-modal-close {
  background: none;
  border: none;
  color: var(--deep-contrast);
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.v2-modal-close:hover {
  opacity: 1;
}

/* V2 Modal Body */
.v2-modal-body {
  padding: 1.5rem;
  background-color: var(--background-base);
  color: var(--background-contrast);
}

/* V2 Modal Footer */
.v2-modal-footer {
  padding: 1rem 1.5rem;
  background-color: var(--background-dark);
  border-top: 1px solid var(--background-darker);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* V2 Modal Background/Overlay */
.v2-modal-background {
  position: fixed;
  z-index: 1040;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}

.v2-modal-background.show-background {
  display: block;
}

/* V2 Modal Sizes */
.v2-modal-sm {
  width: 90%;
  max-width: 400px;
}

.v2-modal-lg {
  width: 90%;
  max-width: 800px;
}

.v2-modal-xl {
  width: 95%;
  max-width: 1140px;
}
.nav-link {
  display: block;
  text-decoration: none;
  color: var(--content-base);
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  line-height: 30px;
  font-weight: 500;
  white-space: nowrap;

  &:hover {
    color: var(--content-dark);
  }

  &.active {
    font-weight: 600;
  }

  &:focus {
    color: var(--content-darker);
  }
}

@media (min-width: 1024px) {
  .nav-link {
    display: inline-flex;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0.75rem;
    line-height: 40px;
  }
}

/* Highlights unread notifications with background color */
[data-notifications-target="notification"]:not([data-read-at]) {
  background-color: var(--background-dark);
}

/* Highlights uninteracted notifications with blue dot */
[data-notifications-target="notification"]:not([data-interacted-at]) {
  [uninteracted] {
    display: block;
  }
}

.dropdown-menu {
  min-width: 100%;
}

@media (min-width: 1024px) {
  .dropdown-menu {
    min-width: 200px;
  }
}
/* Required to run aside effects and functionalities
   This style file works in conjuction with the script in application.html.erb */
   
:root {
  --mobile-breakpoint: 768px;
}

body {
  margin: 0;
  background-color: var(--background-dark);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: var(--deep-base);
  color: var(--deep-contrast);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
}

.brand-name {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--highlight-base);
  text-decoration: none;
}

.brand-name:hover {
  color: var(--highlight-light);
}

.header-icons {
  display: flex;
  align-items: center;
  position: relative;
}

.icon-button {
  background: none;
  border: none;
  color: var(--highlight-base);
  font-size: 1.5em;
  cursor: pointer;
  margin-left: 20px;
  position: relative;
  transition: color 0.2s ease;
}

.icon-button:hover {
  color: var(--highlight-light);
}

.dropdown {
  position: absolute;
  top: 45px;
  right: 0;
  background-color: var(--background-light);
  border-radius: 2px;
  min-width: 200px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.dropdown.active {
  max-height: 300px;
}

.dropdown ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.dropdown ul li {
  padding: 10px 15px;
  border-bottom: 1px solid var(--background-darker);
}

.dropdown ul li:last-child {
  border-bottom: none;
}

.dropdown ul li a {
  color: var(--background-contrast);
  text-decoration: none;
}

#notificationsButton {
  position: relative;
}

#notificationsButton .dropdown {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.content-wrapper {
  display: flex;
  flex: 1;
  padding-top: 60px;
  padding-bottom: 40px;
}

aside {
  width: 230px;
  background-color: var(--content-base);
  color: var(--content-contrast);
  transition: transform 0.3s ease;
  position: fixed;
  top: 60px;
  bottom: 40px;
  left: 0;
  z-index: 1010;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
}

aside nav {
  flex: 1;
  overflow-y: auto;
  padding: 0em;
}

.aside-bottom {
  flex-shrink: 0;
  border-top: 1px solid var(--base-darker);
}

aside.collapsed {
  transform: translateX(-100%);
}

aside nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

aside nav ul li {
  margin-bottom: 0;
  border-bottom: 1px solid var(--base-darker);
  background-color: var(--base-base);
}

aside nav ul li a {
  color: var(--base-contrast);
  text-decoration: none;
  transition: color 0.3s, background-color 0.3s;
  font-size: 1.1rem;
  font-weight: 500;
  display: block;
  padding: 0.75rem 1rem;
}

.aside-divider {
  border-bottom: 1px solid var(--base-dark);
}

aside nav ul li a:hover {
  color: var(--highlight-base);
}

main {
  flex: 1;
  background-color: var(--background-base);
  padding-top: 0em;
  overflow-x: hidden;
}

.transition-ready main {
  transition: transform 0.3s ease, margin-left 0.3s ease;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background-color: var(--ground-base);
  color: var(--ground-contrast);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  z-index: 1000;
}

.footer-content {
  flex-grow: 1;
  text-align: center;
  font-size: 14px;
  color: var(--highlight-base);
}

.toggle-icon {
  cursor: pointer;
  padding: 1px;
  z-index: 1001;
}

.toggle-icon svg {
  width: 24px;
  height: 24px;
  fill: transparent;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1005;
}

/* Mobile styles */
@media (max-width: 768px) {
  aside {
    transform: translateX(-100%);
    width: 200px;
  }
  
  main {
    transform: translateX(0);
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  body:not(.aside-open) main {
    transform: translateX(0);
  }
  
  .aside-open aside {
    transform: translateX(0);
  }
  
  .aside-open main {
    transform: translateX(200px);
  }
  
  .aside-open .overlay {
    display: block;
  }
}

/* Desktop styles */
@media (min-width: 769px) {
  main {
    margin-left: 230px; /* Default state with sidebar open */
    width: calc(100% - 230px);
  }

  aside.collapsed + main {
    margin-left: 0;
    width: 100%;
  }
}

/* ==========================================
   NEW COLOR SYSTEM (v2.0) - ADDITIVE CLASSES
   See: docs/COLORS.md
   These classes use the new color variables.
   Use these for new components or gradual migration.
   ========================================== */

/* V2 Header - uses DEEP palette */
.v2-header {
  background-color: var(--deep-base);
  color: var(--deep-contrast);
}

.v2-header-dark {
  background-color: var(--deep-dark);
  color: var(--deep-contrast);
}

/* V2 Sidebar/Aside - uses CONTENT palette (gray background) */
.v2-aside {
  background-color: var(--content-base);
  color: var(--content-contrast);
}

.v2-aside-dark {
  background-color: var(--content-dark);
  color: var(--content-contrast);
}

/* V2 Footer - uses GROUND palette */
.v2-footer {
  background-color: var(--ground-base);
  color: var(--ground-contrast);
}

.v2-footer-dark {
  background-color: var(--ground-dark);
  color: var(--ground-contrast);
}

/* V2 Main/Surface - uses SURFACE palette */
.v2-main {
  background-color: var(--background-base);
  color: var(--background-contrast);
}

.v2-main-alt {
  background-color: var(--background-dark);
  color: var(--background-contrast);
}

/* V2 Menu Items - uses BASE palette */
.v2-menu-item {
  background-color: var(--base-base);
  color: var(--base-contrast);
}

.v2-menu-item-light {
  background-color: var(--base-light);
  color: var(--base-contrast);
}

/* V2 Active/Highlight states - uses HIGHLIGHT palette */
.v2-active {
  background-color: var(--highlight-base);
  color: var(--highlight-contrast);
}

.v2-active:hover {
  background-color: var(--highlight-dark);
}

.v2-hover:hover {
  color: var(--highlight-base);
}

/* V2 Text colors */
.v2-text-highlight {
  color: var(--highlight-base);
}

.v2-text-background {
  color: var(--background-contrast);
}

.v2-text-muted {
  color: var(--content-lighter);
}

/* V2 Border colors */
.v2-border-base {
  border-color: var(--base-light);
}

.v2-border-background {
  border-color: var(--background-darker);
}

/* V2 Dropdown - uses SURFACE palette */
.v2-dropdown {
  background-color: var(--background-base);
  color: var(--background-contrast);
  border: 1px solid var(--background-darker);
}

.v2-dropdown-item:hover {
  background-color: var(--highlight-lighter);
}

/* V2 Aside Section Header */
.v2-aside-header {
  background-color: var(--base-light);
  color: var(--base-contrast);
}

/* V2 Aside Divider */
.v2-aside-divider {
  border-color: var(--base-base);
}

/* V2 Card */
.v2-card {
  background-color: var(--background-base);
  border-color: var(--background-darker);
}

.v2-card-highlight {
  border-color: var(--highlight-base);
}

/* V2 Aside Content - override bg classes */
.v2-aside-content {
  background-color: var(--content-base) !important;
}

.v2-text-aside {
  color: var(--content-contrast) !important;
}

/* V2 Aside Menu Items - uses BASE palette (navy items) */
.v2-aside-menu-item {
  background-color: var(--base-base) !important;
  color: var(--base-contrast) !important;
  border-bottom: 1px solid var(--base-darker) !important;
}

/* V2 Footer Buttons - override bg classes */
.v2-footer-btn {
  background-color: var(--ground-dark) !important;
  color: var(--ground-contrast) !important;
}

.v2-footer-btn:hover {
  background-color: var(--highlight-base) !important;
  color: var(--highlight-contrast) !important;
}

/* V2 Aside Links - override bg classes */
.v2-aside-link {
  border-color: var(--base-darker) !important;
  background-color: var(--base-base) !important;
}

.v2-aside-link-active {
  background-color: var(--base-base) !important;
  color: var(--base-contrast) !important;
}

.v2-aside-link-active:hover {
  background-color: var(--highlight-base) !important;
  color: var(--highlight-contrast) !important;
}

.v2-aside-link-inactive {
  background-color: var(--highlight-base) !important;
  color: var(--highlight-contrast) !important;
}

.v2-aside-sub-inactive {
  background-color: var(--base-light) !important;
}

.v2-aside-sub-active {
  background-color: var(--base-dark) !important;
}

/* ============================================
   ASIDE USER SECTION
   ============================================ */

.aside-user-section {
  padding: 1rem;
  border-bottom: 1px solid var(--base-darker);
  position: relative;
  overflow: hidden;
}

/* Grid pattern background */
.aside-user-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.aside-user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.aside-user-avatar {
  flex-shrink: 0;
  border: 2px solid var(--highlight-base);
}

.aside-user-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.aside-user-name {
  color: var(--content-contrast);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aside-user-name:hover {
  color: var(--highlight-base);
}

.aside-user-email {
  color: var(--highlight-base);
  font-size: 0.75rem;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.125rem;
}

.aside-user-role {
  color: var(--content-contrast);
  font-size: 0.8125rem;
  margin-top: 0.125rem;
  opacity: 0.85;
}
/* Light Integrator theme for Pagy's default renderer */

.pagination {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;

  .page {
    &:first-child a, &:first-child {
      border-top-left-radius: 0.25rem;
      border-bottom-left-radius: 0.25rem;
    }

    &:last-child a, &:last-child {
      border-top-right-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
    }
  }

  .disabled, .gap {
    border: 1px solid var(--background-darker);
    position: relative;
    display: block;
    line-height: 1.25;
    background-color: white;
    color: var(--content-base);
    text-decoration: none;
    padding: 0.75rem 1rem;
    margin-left: -1px;
  }

  .page {
    &.active {
      border: 1px solid var(--highlight-base);
      background-color: var(--highlight-base);
      color: white;
      position: relative;
      display: block;
      line-height: 1.25;
      text-decoration: none;
      padding: 0.75rem 1rem;
      margin-left: -1px;
    }

    a {
      border: 1px solid var(--background-darker);
      position: relative;
      display: block;
      line-height: 1.25;
      background-color: white;
      color: var(--highlight-base);
      text-decoration: none;
      padding: 0.75rem 1rem;
      margin-left: -1px;

      &:hover {
        background-color: var(--background-darker);
      }
    }
  }
}

/* ==========================================
   NEW COLOR SYSTEM (v2.0) - PAGINATION CLASSES
   See: docs/COLORS.md
   Use these for new pagination or gradual migration.
   ========================================== */

.v2-pagination {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.v2-pagination .page:first-child a,
.v2-pagination .page:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.v2-pagination .page:last-child a,
.v2-pagination .page:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.v2-pagination .disabled,
.v2-pagination .gap {
  display: block;
  position: relative;
  padding: 0.75rem 1rem;
  margin-left: -1px;
  line-height: 1.25;
  background-color: var(--background-base);
  color: var(--content-lighter);
  border: 1px solid var(--background-darker);
  text-decoration: none;
}

.v2-pagination .page.active {
  display: block;
  position: relative;
  padding: 0.75rem 1rem;
  margin-left: -1px;
  line-height: 1.25;
  background-color: var(--highlight-base);
  color: var(--highlight-contrast);
  border: 1px solid var(--highlight-base);
  text-decoration: none;
}

.v2-pagination .page a {
  display: block;
  position: relative;
  padding: 0.75rem 1rem;
  margin-left: -1px;
  line-height: 1.25;
  background-color: var(--background-base);
  color: var(--highlight-base);
  border: 1px solid var(--background-darker);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.v2-pagination .page a:hover {
  background-color: var(--highlight-lighter);
}
.tab-active {
  background: linear-gradient(116deg, var(--highlight-dark) 22%, var(--highlight-base) 90%);
  border-radius: 4px 4px 0px 0px;

  a {
    color: white;

    &:hover,
    &:focus {
      background: linear-gradient(308deg, var(--highlight-dark) 24%, var(--highlight-base) 80%);
      border-radius: 4px 4px 0px 0px;

      color: color-mix(in srgb, var(--text-dark) 40%, transparent);
    }
  }
}
/* Tree View  */
.tree{
  --spacing : 1.5rem;
  --radius  : 8px;
}

.tree li{
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul{
  margin-left  : calc(var(--radius) - var(--spacing));
  padding-left : 0;
}

.tree ul li{
  border-left : 2px solid var(--background-darker);
}

.tree ul li:last-child{
  border-color : transparent;
}

.tree ul li::before{
  content      : '';
  display      : block;
  position     : absolute;
  top          : calc(var(--spacing) / -2);
  left         : -2px;
  width        : calc(var(--spacing) + 2px);
  height       : calc(var(--spacing) + 1px);
  border       : solid var(--background-darker);
  border-width : 0 0 2px 2px;
}

.tree summary{
  display : block;
  cursor  : pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker{
  display : none;
}

.tree summary:focus{
  outline : none;
}

.tree summary:focus-visible{
  outline : 1px dotted var(--content-dark);
}

.tree li::after,
.tree summary::before{
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : var(--background-darker);
}

.tree summary::before{
  content     : '+';
  z-index     : 1;
  background  : var(--success-base);
  color       : var(--success-contrast);
  line-height : calc(2 * var(--radius) - 2px);
  text-align  : center;
}


.tree details[open] > summary::before{
  content : '−';
}
/* ============================================
   AUTH PAGES - Login / Sign Up / Password Reset
   ============================================
   Modern, sophisticated design with tech aesthetic
   ============================================ */

/* === AUTH LAYOUT === */

/* Reset box-sizing para todos los elementos auth */
[class^="auth-"],
[class*=" auth-"] {
  box-sizing: border-box;
}

/* Reset body cuando contiene auth-container */
body:has(.auth-container) {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.auth-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Left Panel - Branding/Visual */
.auth-visual {
  display: none;
  width: 50%;
  background: linear-gradient(135deg, var(--deep-darker) 0%, var(--deep-base) 50%, var(--highlight-dark) 100%);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .auth-visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
  }
}

/* Animated grid pattern */
.auth-visual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(var(--light-overlay-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--light-overlay-subtle) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

/* Floating orbs */
.auth-visual::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--highlight-base) 0%, transparent 70%);
  opacity: 0.15;
  border-radius: 50%;
  top: 20%;
  left: 10%;
  animation: float 8s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -30px) scale(1.1); }
}

.auth-visual-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: white;
}

.auth-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 2rem;
  filter: drop-shadow(0 0 20px var(--light-glow));
}

.auth-tagline {
  font-size: 2.5rem;
  font-weight: 200;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.auth-subtitle {
  font-size: 1rem;
  font-weight: 300;
  opacity: 0.8;
  max-width: 300px;
  line-height: 1.6;
}

/* Decorative elements */
.auth-decor {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.auth-decor-dot {
  width: 8px;
  height: 8px;
  background: var(--light-glow);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.auth-decor-dot:nth-child(2) {
  background: var(--highlight-base);
  box-shadow: 0 0 10px var(--highlight-base);
}

/* Right Panel - Form */
.auth-form-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 2rem;
  background: linear-gradient(180deg, var(--base-base) 0%, var(--base-dark) 100%);
  position: relative;
  overflow-y: auto;
  min-height: 100vh;
}

@media (min-width: 768px) {
  .auth-form-panel {
    padding: 4rem 3rem;
  }
}

@media (min-width: 1024px) {
  .auth-form-panel {
    width: 50%;
    padding: 4rem;
  }
}

/* For tall forms like waitlist - ensure content doesn't get cut off */
.auth-form-panel-tall {
  justify-content: flex-start;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Subtle pattern on form panel */
.auth-form-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(var(--base-lighter) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.08;
  pointer-events: none;
}

/* === AUTH CARD === */
.auth-card {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 10;
}

/* Wider card for signup */
.auth-card-wide {
  max-width: 520px;
}

.auth-card-inner {
  background: color-mix(in srgb, var(--base-lighter) 15%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 2rem; /* uniforme en los 4 lados */
  box-sizing: border-box;
  box-shadow:
    0 4px 6px -1px var(--dark-overlay-soft),
    0 2px 4px -1px var(--dark-overlay-subtle),
    0 20px 40px -10px var(--dark-overlay-medium);
  border: 1px solid color-mix(in srgb, var(--content-lighter) 20%, transparent);
  position: relative;
  overflow: hidden;
  /* Asegurar que el contenido use todo el ancho */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

@media (min-width: 480px) {
  .auth-card-inner {
    padding: 2.5rem;
  }
}

@media (min-width: 768px) {
  .auth-card-inner {
    padding: 3rem;
  }
}

/* Accent line at top */
.auth-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--highlight-base), var(--highlight-light), var(--highlight-base));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

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

/* === AUTH HEADER === */
.auth-header {
  text-align: center;
  margin-bottom: 2rem;
  width: 100%;
}

.auth-header-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-light));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--highlight-base) 30%, transparent);
}

.auth-title {
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--text-light);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.auth-description {
  font-size: 0.9rem;
  color: var(--content-lighter);
  font-weight: 300;
  opacity: 0.8;
}

/* === AUTH FORM === */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  margin: 0;
  padding: 0;
}

.auth-form-group {
  position: relative;
  min-width: 0; /* Prevent grid blowout */
}

.auth-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-light);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.auth-input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-light);
  background: color-mix(in srgb, var(--deep-base) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--content-lighter) 30%, transparent);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.auth-input::placeholder {
  color: var(--content-lighter);
}

/* Override browser autofill styles - uses theme's deep-base color */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--deep-base) inset !important;
  -webkit-text-fill-color: var(--text-light) !important;
  caret-color: var(--text-light);
  transition: background-color 5000s ease-in-out 0s;
}

.auth-input:focus {
  outline: none;
  border-color: var(--highlight-base);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight-base) 20%, transparent);
  background: color-mix(in srgb, var(--deep-darker) 70%, transparent);
}

.auth-input:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--highlight-lighter) 50%, transparent);
  background: color-mix(in srgb, var(--deep-base) 70%, transparent);
}

/* Select styling */
.auth-select {
  width: 100%;
  padding: 0.875rem 2.5rem 0.875rem 1rem;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-light);
  background-color: color-mix(in srgb, var(--deep-base) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--content-lighter) 30%, transparent);
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
}

.auth-select:focus {
  outline: none;
  border-color: var(--highlight-base);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight-base) 20%, transparent);
  background-color: color-mix(in srgb, var(--deep-darker) 70%, transparent);
}

.auth-select:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--highlight-lighter) 50%, transparent);
  background-color: color-mix(in srgb, var(--deep-base) 70%, transparent);
}

.auth-select option {
  background: var(--deep-base);
  color: var(--text-light);
}

/* Row layout for form fields */
.auth-row {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.auth-row.auth-row-2 {
  grid-template-columns: 1fr;
}

.auth-row.auth-row-2-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .auth-row.auth-row-2 {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.375rem;
  }

  .auth-row.auth-row-2-3 {
    grid-template-columns: 2fr 1fr;
    column-gap: 0.375rem;
  }
}

/* Checkbox */
.auth-checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.auth-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--content-lighter);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-checkbox:checked {
  background: var(--highlight-base);
  border-color: var(--highlight-base);
}

.auth-checkbox:hover:not(:checked) {
  border-color: var(--highlight-lighter);
}

.auth-checkbox-label {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--text-light);
  cursor: pointer;
  opacity: 0.9;
}

.auth-checkbox-label a {
  color: var(--highlight-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.auth-checkbox-label a:hover {
  color: var(--highlight-base);
  text-decoration: underline;
}

/* Hint text */
.auth-hint {
  font-size: 0.75rem;
  color: var(--text-light);
  opacity: 0.5;
  margin-top: 0.375rem;
  font-weight: 300;
}

/* Static/disabled field */
.auth-static-field {
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-light);
  opacity: 0.7;
  background: color-mix(in srgb, var(--deep-darker) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--content-lighter) 20%, transparent);
  border-radius: 8px;
}

/* === AUTH BUTTON === */
.auth-btn {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: white;
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-top: 0.5rem;
}

.auth-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--light-overlay-medium), transparent);
  transition: left 0.5s ease;
}

.auth-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--highlight-base) 35%, transparent);
}

.auth-btn:hover::before {
  left: 100%;
}

.auth-btn:active {
  transform: translateY(0);
}

/* === AUTH DIVIDER === */
.auth-divider {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  width: 100%;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--content-lighter) 30%, transparent);
}

.auth-divider-text {
  padding: 0 1rem;
  font-size: 0.75rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

/* === AUTH LINKS === */
.auth-links {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--content-lighter) 20%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.auth-link {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-light);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.7;
}

.auth-link:hover {
  color: var(--highlight-light);
  transform: translateX(4px);
  opacity: 1;
}

.auth-link-arrow {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
  color: var(--highlight-base);
}

.auth-link:hover .auth-link-arrow {
  transform: translateX(2px);
}

/* Primary link (e.g., Create Account) */
.auth-link-primary {
  font-weight: 500;
  padding: 0.5rem 0;
  opacity: 1;
  color: var(--highlight-light);
}

/* === OAUTH BUTTONS === */
.auth-oauth {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.auth-oauth-btn {
  flex: 1;
  min-width: 140px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-dark);
  background: var(--background-lighter);
  border: 1px solid var(--content-lighter);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.auth-oauth-btn:hover {
  background: var(--content-base);
  border-color: var(--content-dark);
}

.auth-oauth-btn svg {
  width: 18px;
  height: 18px;
}

/* === INVITATION BANNER === */
.auth-invitation {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, var(--highlight-lighter), var(--content-lighter));
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.auth-invitation-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 8px var(--dark-overlay-soft);
}

.auth-invitation-text {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.4;
}

.auth-invitation-text strong {
  font-weight: 500;
}

/* === ERROR MESSAGES === */
.auth-error {
  background: color-mix(in srgb, var(--danger-base) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger-base) 30%, transparent);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--danger-base);
}

.auth-error ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.auth-error ul li {
  padding-left: 1rem;
  position: relative;
}

.auth-error ul li::before {
  content: '•';
  position: absolute;
  left: 0;
}

.auth-errors {
  background: color-mix(in srgb, var(--danger-base) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger-base) 30%, transparent);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.auth-errors-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--danger-base);
  margin-bottom: 0.5rem;
}

.auth-errors-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.auth-errors-list li {
  font-size: 0.8rem;
  color: var(--danger-base);
  padding-left: 1rem;
  position: relative;
}

.auth-errors-list li::before {
  content: '•';
  position: absolute;
  left: 0;
}

/* === PASSWORD TOGGLE === */
.auth-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-wrapper .auth-input {
  padding-right: 3rem;
}

.auth-password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--content-lighter);
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-password-toggle:hover {
  color: var(--highlight-light);
}

.auth-password-toggle svg {
  width: 20px;
  height: 20px;
}

.auth-password-toggle .auth-eye-closed {
  display: none;
}

.auth-password-toggle.active .auth-eye-open {
  display: none;
}

.auth-password-toggle.active .auth-eye-closed {
  display: block;
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
  .auth-title {
    font-size: 1.5rem;
  }

  .auth-btn {
    padding: 0.875rem 1.25rem;
  }
}
/* ============================================
   QUICK LOGIN - Trusted Device Welcome Screen
   ============================================
   Premium design with animated avatar and
   glassmorphism card. Uses auth theme variables.
   ============================================ */

/* ============================================
   Container - Dark themed like auth
   ============================================ */
.quick-login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(180deg, var(--base-base) 0%, var(--base-dark) 100%);
  position: relative;
  overflow: hidden;
}

/* Animated grid pattern */
.quick-login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridPulse 4s ease-in-out infinite;
}

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

/* Floating orb effect */
.quick-login-container::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--highlight-base) 0%, transparent 70%);
  opacity: 0.08;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: orbFloat 6s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
}

/* ============================================
   Card - Glassmorphism style
   ============================================ */
.quick-login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  width: 100%;
  padding: 3rem 2.5rem;
  background: color-mix(in srgb, var(--base-lighter) 12%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid color-mix(in srgb, var(--content-lighter) 15%, transparent);
  position: relative;
  z-index: 10;
  overflow: hidden;
  animation: cardAppear 0.6s ease-out;
}

@keyframes cardAppear {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Shimmer accent line - shaped to card border */
.quick-login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--highlight-base), var(--highlight-light), var(--highlight-base));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

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

/* ============================================
   Avatar - Animated ring effect
   ============================================ */
.quick-login-avatar {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 1.5rem;
}

/* Animated ring around avatar */
.quick-login-avatar::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--highlight-base),
    var(--highlight-light),
    var(--highlight-base),
    transparent,
    var(--highlight-base)
  );
  animation: ringRotate 3s linear infinite;
  opacity: 0.8;
}

@keyframes ringRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Inner mask for ring */
.quick-login-avatar::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  background: var(--base-base);
}

.quick-login-avatar .avatar-image,
.quick-login-avatar .avatar-placeholder {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.quick-login-avatar .avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--highlight-base) 0%, var(--highlight-dark) 100%);
  color: white;
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  box-shadow:
    0 4px 20px color-mix(in srgb, var(--highlight-base) 40%, transparent),
    inset 0 -2px 10px rgba(0,0,0,0.2);
}

.quick-login-avatar .avatar-image {
  border: 3px solid var(--highlight-base);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--highlight-base) 40%, transparent);
}

/* ============================================
   Text
   ============================================ */
.quick-login-title {
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--content-lighter);
  margin: 0 0 0.25rem 0;
  letter-spacing: 0.02em;
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.quick-login-name {
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--text-light);
  margin: 0 0 1rem 0;
  letter-spacing: -0.02em;
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.quick-login-device {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--content-lighter);
  margin-bottom: 2rem;
  padding: 0.5rem 1rem;
  background: color-mix(in srgb, var(--deep-base) 50%, transparent);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--content-lighter) 20%, transparent);
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.quick-login-device .device-icon {
  display: flex;
  align-items: center;
}

.quick-login-device svg {
  width: 14px;
  height: 14px;
  stroke: var(--highlight-light);
}

/* ============================================
   Button - Premium style
   ============================================ */
.quick-login-form {
  width: 100%;
  animation: fadeInUp 0.6s ease-out 0.5s both;
}

.quick-login-button {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: white;
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.quick-login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.quick-login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--highlight-base) 40%, transparent);
}

.quick-login-button:hover::before {
  left: 100%;
}

.quick-login-button:active {
  transform: translateY(0);
}

/* ============================================
   Alternative Links
   ============================================ */
.quick-login-alternative {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--content-lighter);
  animation: fadeInUp 0.6s ease-out 0.6s both;
}

.quick-login-alternative .alternative-link {
  color: var(--highlight-light);
  text-decoration: none;
  margin-left: 0.25rem;
  transition: all 0.2s ease;
}

.quick-login-alternative .alternative-link:hover {
  color: var(--highlight-base);
  text-decoration: underline;
}

.quick-login-forget {
  margin-top: 0.75rem;
  animation: fadeInUp 0.6s ease-out 0.7s both;
}

.quick-login-forget .forget-link {
  font-size: 0.75rem;
  color: var(--content-lighter);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
  transition: color 0.2s ease;
}

.quick-login-forget .forget-link:hover {
  color: var(--danger-base);
}

/* ============================================
   Security Note - Floating badge
   ============================================ */
.quick-login-security-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  color: var(--content-lighter);
  background: color-mix(in srgb, var(--success-base) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--success-base) 25%, transparent);
  border-radius: 30px;
  position: relative;
  z-index: 10;
  animation: fadeInUp 0.6s ease-out 0.8s both;
}

.quick-login-security-note svg {
  flex-shrink: 0;
  stroke: var(--success-base);
  animation: shieldPulse 2s ease-in-out infinite;
}

@keyframes shieldPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 480px) {
  .quick-login-container {
    padding: 1rem;
  }

  .quick-login-card {
    padding: 2rem 1.5rem;
    border-radius: 20px;
  }

  .quick-login-avatar {
    width: 80px;
    height: 80px;
  }

  .quick-login-avatar .avatar-placeholder {
    font-size: 2rem;
  }

  .quick-login-name {
    font-size: 1.5rem;
  }
}
/* Trusted Devices CSS
 *
 * Styles for the device management page in Settings.
 * UX SEGURIDAD: Diseño claro para educación de amenaza.
 * This file is 100% NEW per CLAUDE.md.
 */

/* ============================================
   Container
   ============================================ */
.trusted-devices-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

/* ============================================
   Header
   ============================================ */
.trusted-devices-header {
  margin-bottom: 2rem;
}

.trusted-devices-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  margin: 0 0 0.5rem 0;
}

.trusted-devices-title svg {
  stroke: var(--primary-color, #3b82f6);
}

.trusted-devices-description {
  font-size: 0.875rem;
  color: var(--text-secondary, #64748b);
  margin: 0;
  line-height: 1.5;
}

.trusted-devices-note {
  font-size: 0.8125rem;
  color: var(--text-tertiary, #94a3b8);
  margin: 0.5rem 0 0 0;
  line-height: 1.4;
  font-style: italic;
}

/* ============================================
   Device List
   ============================================ */
.trusted-devices-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ============================================
   Device Card
   ============================================ */
.trusted-device-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.trusted-device-card:hover {
  border-color: var(--primary-light, #93c5fd);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.trusted-device-card.current-device {
  border-color: var(--success-color, #10b981);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, transparent 100%);
}

/* Device Icon */
.device-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--bg-secondary, #f1f5f9);
  border-radius: 10px;
  flex-shrink: 0;
}

.device-icon-container svg {
  stroke: var(--text-secondary, #64748b);
}

.current-device .device-icon-container {
  background: rgba(16, 185, 129, 0.1);
}

.current-device .device-icon-container svg {
  stroke: var(--success-color, #10b981);
}

/* Device Info */
.device-info {
  flex: 1;
  min-width: 0;
}

.device-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  margin-bottom: 0.5rem;
}

.current-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--success-color, #10b981);
  background: rgba(16, 185, 129, 0.1);
  border-radius: 4px;
}

.device-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.device-detail {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.detail-label {
  color: var(--text-tertiary, #94a3b8);
}

.detail-value {
  color: var(--text-secondary, #64748b);
}

/* Device Actions */
.device-actions {
  flex-shrink: 0;
}

.revoke-button {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--danger-color, #ef4444);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.revoke-button:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

/* ============================================
   Warning
   ============================================ */
.trusted-devices-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
}

.trusted-devices-warning svg {
  flex-shrink: 0;
  stroke: var(--warning-color, #f59e0b);
}

.trusted-devices-warning span {
  font-size: 0.875rem;
  color: var(--warning-dark, #b45309);
  line-height: 1.5;
}

/* ============================================
   Actions
   ============================================ */
.trusted-devices-actions {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

.revoke-all-button {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background: var(--danger-color, #ef4444);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.revoke-all-button:hover {
  background: var(--danger-dark, #dc2626);
}

/* ============================================
   Empty State
   ============================================ */
.trusted-devices-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  background: var(--bg-secondary, #f8fafc);
  border: 2px dashed var(--border-color, #e2e8f0);
  border-radius: 12px;
}

.trusted-devices-empty svg {
  stroke: var(--text-tertiary, #94a3b8);
  margin-bottom: 1rem;
}

.trusted-devices-empty p {
  font-size: 0.875rem;
  color: var(--text-secondary, #64748b);
  max-width: 300px;
  margin: 0;
  line-height: 1.5;
}

/* ============================================
   Remember Device Checkbox (Login Form)
   ============================================ */
.remember-device-container {
  margin: 1rem 0;
}

.remember-device-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.remember-device-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color, #3b82f6);
}

.remember-device-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
}

.remember-device-hint {
  margin: 0.25rem 0 0 1.625rem;
  font-size: 0.75rem;
  color: var(--text-tertiary, #94a3b8);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 640px) {
  .trusted-devices-container {
    padding: 1rem;
  }

  .trusted-device-card {
    flex-direction: column;
    align-items: stretch;
  }

  .device-icon-container {
    width: 40px;
    height: 40px;
  }

  .device-actions {
    margin-top: 1rem;
  }

  .revoke-button {
    width: 100%;
  }
}
/* ============================================
   ACCOUNT SECURITY - Password & 2FA Settings
   ============================================
   Light theme with subtle grid pattern,
   floating cards, and animated accents.
   ============================================ */

/* ============================================
   Container - Light theme for account pages
   ============================================ */
.security-settings-container {
  min-height: calc(100vh - 80px);
  padding: 2rem;
  background: var(--background-lighter);
  position: relative;
  overflow: hidden;
}

/* Subtle background grid pattern */
.security-settings-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(var(--content-lightest) 1px, transparent 1px),
    linear-gradient(90deg, var(--content-lightest) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
  pointer-events: none;
}

/* Subtle floating accent */
.security-settings-container::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--highlight-lightest) 0%, transparent 70%);
  opacity: 0.6;
  border-radius: 50%;
  top: -200px;
  right: -200px;
  pointer-events: none;
}

/* ============================================
   Page Header
   ============================================ */
.security-page-header {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeInDown 0.6s ease-out;
}

@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.security-page-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px color-mix(in srgb, var(--highlight-base) 25%, transparent);
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.security-page-icon svg {
  width: 32px;
  height: 32px;
  stroke: white;
}

.security-page-title {
  font-size: 2rem;
  font-weight: 400;
  color: var(--base-dark);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.security-page-subtitle {
  font-size: 1rem;
  color: var(--content-dark);
  font-weight: 300;
}

/* ============================================
   Cards Grid
   ============================================ */
.security-cards-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .security-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================
   Security Card - Light theme with subtle shadow
   ============================================ */
.security-card {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid var(--content-lightest);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  animation: cardSlideUp 0.6s ease-out backwards;
}

.security-card:nth-child(1) { animation-delay: 0.1s; }
.security-card:nth-child(2) { animation-delay: 0.2s; }

@keyframes cardSlideUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Card accent line */
.security-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--highlight-base), var(--highlight-light), var(--highlight-base));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

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

/* Card for 2FA - different accent */
.security-card--2fa::before {
  background: linear-gradient(90deg, var(--success-base), var(--success-light), var(--success-base));
  background-size: 200% 100%;
}

/* ============================================
   Card Header
   ============================================ */
.security-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.security-card-icon {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--highlight-base) 20%, transparent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.security-card-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--highlight-dark);
}

.security-card-icon--success {
  background: color-mix(in srgb, var(--success-base) 20%, transparent);
}

.security-card-icon--success svg {
  stroke: var(--success-base);
}

.security-card-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--base-dark);
  margin: 0;
}

.security-card-description {
  font-size: 0.85rem;
  color: var(--content-dark);
  font-weight: 300;
  margin: 0;
}

/* ============================================
   Form Elements
   ============================================ */
.security-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.security-form-group {
  position: relative;
}

.security-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--content-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.security-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--base-dark);
  background: var(--background-lighter);
  border: 1px solid var(--content-lightest);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.security-input::placeholder {
  color: var(--content-base);
}

.security-input:focus {
  outline: none;
  border-color: var(--highlight-base);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight-base) 15%, transparent);
  background: white;
}

.security-input:hover:not(:focus) {
  border-color: var(--content-lighter);
}

/* Password strength hint */
.security-hint {
  font-size: 0.7rem;
  color: var(--content-dark);
  margin-top: 0.375rem;
  font-weight: 400;
}

/* ============================================
   Buttons
   ============================================ */
.security-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.security-btn {
  padding: 0.875rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.security-btn--primary {
  color: white;
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  box-shadow: 0 4px 15px color-mix(in srgb, var(--highlight-base) 30%, transparent);
}

.security-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--highlight-base) 40%, transparent);
}

.security-btn--secondary {
  color: var(--content-dark);
  background: var(--background-lighter);
  border: 1px solid var(--content-lightest);
}

.security-btn--secondary:hover {
  background: var(--content-lightest);
  border-color: var(--content-lighter);
}

.security-btn--success {
  color: white;
  background: linear-gradient(135deg, var(--success-base), var(--success-dark));
  box-shadow: 0 4px 15px color-mix(in srgb, var(--success-base) 30%, transparent);
}

.security-btn--success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--success-base) 40%, transparent);
}

.security-btn--danger {
  color: white;
  background: linear-gradient(135deg, var(--danger-base), var(--danger-dark));
  box-shadow: 0 4px 15px color-mix(in srgb, var(--danger-base) 30%, transparent);
}

.security-btn--danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--danger-base) 40%, transparent);
}

/* Button shine effect */
.security-btn--primary::before,
.security-btn--success::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.security-btn--primary:hover::before,
.security-btn--success:hover::before {
  left: 100%;
}

/* ============================================
   2FA Status Badge
   ============================================ */
.security-2fa-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.security-2fa-status--enabled {
  background: color-mix(in srgb, var(--success-base) 15%, transparent);
  color: var(--success-base);
  border: 1px solid color-mix(in srgb, var(--success-base) 30%, transparent);
}

.security-2fa-status--disabled {
  background: color-mix(in srgb, var(--warning-base) 15%, transparent);
  color: var(--warning-base);
  border: 1px solid color-mix(in srgb, var(--warning-base) 30%, transparent);
}

.security-2fa-status svg {
  width: 14px;
  height: 14px;
}

/* ============================================
   2FA Info Text
   ============================================ */
.security-2fa-info {
  font-size: 0.875rem;
  color: var(--content-dark);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 640px) {
  .security-settings-container {
    padding: 1rem;
  }

  .security-page-title {
    font-size: 1.5rem;
  }

  .security-card {
    padding: 1.5rem;
  }

  .security-actions {
    flex-direction: column;
  }

  .security-btn {
    width: 100%;
  }
}
/* ============================================
   PROFILE SETTINGS - Edit Profile Page
   ============================================
   Light theme matching account_security.css,
   floating cards, and animated accents.
   ============================================ */

/* ============================================
   Container - Light theme for profile pages
   ============================================ */
.profile-settings-container {
  min-height: calc(100vh - 80px);
  padding: 2rem;
  background: var(--background-lighter);
  position: relative;
  overflow: hidden;
}

/* Subtle background grid pattern */
.profile-settings-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(var(--content-lightest) 1px, transparent 1px),
    linear-gradient(90deg, var(--content-lightest) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
  pointer-events: none;
}

/* Subtle floating accent */
.profile-settings-container::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--highlight-lightest) 0%, transparent 70%);
  opacity: 0.6;
  border-radius: 50%;
  top: -200px;
  right: -200px;
  pointer-events: none;
}

/* ============================================
   Page Header
   ============================================ */
.profile-page-header {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-bottom: 3rem;
  animation: profileFadeInDown 0.6s ease-out;
}

@keyframes profileFadeInDown {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.profile-page-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px color-mix(in srgb, var(--highlight-base) 25%, transparent);
  animation: profileIconFloat 3s ease-in-out infinite;
}

@keyframes profileIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.profile-page-icon svg {
  width: 32px;
  height: 32px;
  stroke: white;
}

.profile-page-title {
  font-size: 2rem;
  font-weight: 400;
  color: var(--base-dark);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.profile-page-subtitle {
  font-size: 1rem;
  color: var(--content-dark);
  font-weight: 300;
}

/* ============================================
   Cards Grid
   ============================================ */
.profile-cards-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .profile-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================
   Profile Card - Light theme with subtle shadow
   ============================================ */
.profile-card {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid var(--content-lightest);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  animation: profileCardSlideUp 0.6s ease-out backwards;
}

.profile-card:nth-child(1) { animation-delay: 0.1s; }
.profile-card:nth-child(2) { animation-delay: 0.2s; }

@keyframes profileCardSlideUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Card accent line */
.profile-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--highlight-base), var(--highlight-light), var(--highlight-base));
  background-size: 200% 100%;
  animation: profileShimmer 3s linear infinite;
}

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

/* Avatar card - different accent */
.profile-card--avatar::before {
  background: linear-gradient(90deg, var(--info-base), var(--info-light), var(--info-base));
  background-size: 200% 100%;
}

/* ============================================
   Card Header
   ============================================ */
.profile-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.profile-card-icon {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--highlight-base) 20%, transparent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-card-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--highlight-dark);
}

.profile-card-icon--info {
  background: color-mix(in srgb, var(--info-base) 20%, transparent);
}

.profile-card-icon--info svg {
  stroke: var(--info-base);
}

.profile-card-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--base-dark);
  margin: 0;
}

.profile-card-description {
  font-size: 0.85rem;
  color: var(--content-dark);
  font-weight: 300;
  margin: 0;
}

/* ============================================
   Form Elements
   ============================================ */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.profile-form-group {
  position: relative;
}

.profile-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--content-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.profile-input,
.profile-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--base-dark);
  background: var(--background-lighter);
  border: 1px solid var(--content-lightest);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.profile-input::placeholder {
  color: var(--content-base);
}

.profile-input:focus,
.profile-select:focus {
  outline: none;
  border-color: var(--highlight-base);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight-base) 15%, transparent);
  background: white;
}

.profile-input:hover:not(:focus),
.profile-select:hover:not(:focus) {
  border-color: var(--content-lighter);
}

/* Select arrow styling */
.profile-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ============================================
   Alert Messages
   ============================================ */
.profile-alert {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-alert--warning {
  background: color-mix(in srgb, var(--warning-base) 15%, transparent);
  color: var(--warning-dark);
  border: 1px solid color-mix(in srgb, var(--warning-base) 30%, transparent);
}

/* ============================================
   Buttons
   ============================================ */
.profile-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.profile-btn {
  padding: 0.875rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-btn--primary {
  color: white;
  background: linear-gradient(135deg, var(--success-base), var(--success-dark));
  box-shadow: 0 4px 15px color-mix(in srgb, var(--success-base) 30%, transparent);
}

.profile-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--success-base) 40%, transparent);
}

.profile-btn--secondary {
  color: white;
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  box-shadow: 0 4px 15px color-mix(in srgb, var(--highlight-base) 30%, transparent);
}

.profile-btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--highlight-base) 40%, transparent);
}

.profile-btn--danger {
  color: white;
  background: linear-gradient(135deg, var(--danger-base), var(--danger-dark));
  box-shadow: 0 4px 15px color-mix(in srgb, var(--danger-base) 30%, transparent);
}

.profile-btn--danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--danger-base) 40%, transparent);
}

/* Button shine effect */
.profile-btn--primary::before,
.profile-btn--secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.profile-btn--primary:hover::before,
.profile-btn--secondary:hover::before {
  left: 100%;
}

/* ============================================
   Avatar Section in Card
   ============================================ */
.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.profile-avatar-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--highlight-base);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--highlight-base) 30%, transparent);
  animation: profileAvatarPulse 2s ease-in-out infinite;
}

@keyframes profileAvatarPulse {
  0%, 100% { box-shadow: 0 8px 30px color-mix(in srgb, var(--highlight-base) 30%, transparent); }
  50% { box-shadow: 0 8px 40px color-mix(in srgb, var(--highlight-base) 50%, transparent); }
}

.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--base-dark);
  margin: 0;
}

/* ============================================
   Avatar Gallery
   ============================================ */
.profile-avatar-gallery {
  width: 100%;
}

.profile-avatar-subtitle {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--content-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem 0;
  text-align: center;
}

.profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .profile-avatar-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.profile-avatar-option {
  position: relative;
  cursor: pointer;
}

.profile-avatar-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.profile-avatar-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.profile-avatar-option:hover .profile-avatar-thumb {
  border-color: var(--highlight-lighter);
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.profile-avatar-radio:checked + .profile-avatar-thumb {
  border-color: var(--highlight-base);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight-base) 25%, transparent);
}

.profile-avatar-radio:focus + .profile-avatar-thumb {
  outline: 2px solid var(--highlight-light);
  outline-offset: 2px;
}

/* ============================================
   Upload Button
   ============================================ */
.profile-upload-section {
  width: 100%;
  text-align: center;
}

.profile-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--highlight-dark);
  background: color-mix(in srgb, var(--highlight-base) 10%, transparent);
  border: 1px dashed var(--highlight-base);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-upload-btn:hover {
  background: color-mix(in srgb, var(--highlight-base) 20%, transparent);
  border-style: solid;
}

.profile-upload-btn svg {
  stroke: var(--highlight-base);
}

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

/* ============================================
   Actions Footer (outside cards)
   ============================================ */
.profile-footer-actions {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 900px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--content-lightest);
}

.profile-footer-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 640px) {
  .profile-settings-container {
    padding: 1rem;
  }

  .profile-page-title {
    font-size: 1.5rem;
  }

  .profile-card {
    padding: 1.5rem;
  }

  .profile-actions {
    flex-direction: column;
  }

  .profile-btn {
    width: 100%;
  }

  .profile-footer-actions {
    flex-direction: column;
  }

  .profile-footer-left {
    flex-direction: column;
    width: 100%;
  }

  .profile-footer-left .profile-btn,
  .profile-footer-actions > .profile-btn {
    width: 100%;
  }
}
/* ============================================
   PROFESSIONAL PROFILE - Premium Personal Showcase
   ============================================
   Elegant, modern, sophisticated design
   for professional presentation.
   ============================================ */

/* ============================================
   Container
   ============================================ */
.pro-profile {
  min-height: 100vh;
  background: var(--background-lighter);
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
  padding-top: 0;
}

/* Subtle background grid pattern */
.pro-profile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(var(--content-lightest) 1px, transparent 1px),
    linear-gradient(90deg, var(--content-lightest) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

/* Subtle floating accent */
.pro-profile::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--highlight-lightest) 0%, transparent 70%);
  opacity: 0.6;
  border-radius: 50%;
  top: -200px;
  right: -200px;
  pointer-events: none;
  z-index: -1;
}

/* Gradient header background - uses div element */
.pro-profile__header-bg {
  position: absolute;
  top: 0;
  left: 1rem;
  right: 1rem;
  height: 140px;
  background: linear-gradient(
    135deg,
    var(--highlight-dark) 0%,
    var(--highlight-base) 50%,
    var(--deep-base) 100%
  );
  border-radius: 0 0 24px 24px;
  z-index: 0;
  pointer-events: none;
}

/* Floating orbs decoration on header */
.pro-profile__header-bg::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
  top: -150px;
  right: 0;
  pointer-events: none;
}

/* ============================================
   Header Section
   Override global header styles from aside.css
   ============================================ */
.pro-profile__header {
  position: relative !important;
  z-index: 50;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  padding: 1.25rem 2rem !important;
  text-align: left;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start !important;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  background-color: transparent !important;
}

.pro-profile__avatar-wrapper {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.pro-profile__avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.pro-profile__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pro-profile__name {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  color: white !important;
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.pro-profile__title {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255,255,255,0.9) !important;
  margin: 0;
}

/* ============================================
   Quick Stats Bar
   ============================================ */
.pro-profile__stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.35rem;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border-radius: 8px;
}

.pro-profile__stat {
  text-align: center;
}

.pro-profile__stat-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: white !important;
  line-height: 1;
}

.pro-profile__stat-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 400;
  color: rgba(255,255,255,0.75) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.15rem;
}

/* ============================================
   Main Content Area
   ============================================ */
.pro-profile__content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 2rem 3rem;
}

/* ============================================
   Profile Card
   ============================================ */
.pro-profile__card {
  background: white;
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.08),
    0 10px 30px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  animation: cardReveal 0.8s ease-out backwards;
}

.pro-profile__card:nth-child(1) { animation-delay: 0.1s; }
.pro-profile__card:nth-child(2) { animation-delay: 0.2s; }
.pro-profile__card:nth-child(3) { animation-delay: 0.3s; }
.pro-profile__card:nth-child(4) { animation-delay: 0.4s; }

@keyframes cardReveal {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card accent */
.pro-profile__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--highlight-base), var(--highlight-dark));
  border-radius: 4px 0 0 4px;
}

.pro-profile__card--full::before {
  display: none;
}

/* ============================================
   Section Headers
   ============================================ */
.pro-profile__section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.pro-profile__section-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pro-profile__section-icon svg {
  width: 22px;
  height: 22px;
  stroke: white;
}

.pro-profile__section-icon--success {
  background: linear-gradient(135deg, var(--success-base), var(--success-dark));
}

.pro-profile__section-icon--info {
  background: linear-gradient(135deg, var(--info-base), var(--info-dark));
}

.pro-profile__section-icon--warning {
  background: linear-gradient(135deg, var(--warning-base), var(--warning-dark));
}

.pro-profile__section-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--base-dark);
  margin: 0;
}

.pro-profile__section-subtitle {
  font-size: 0.85rem;
  color: var(--content-dark);
  font-weight: 300;
  margin: 0;
}

/* ============================================
   Bio Section
   ============================================ */
.pro-profile__bio {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--content-darker);
  font-weight: 300;
}

.pro-profile__bio p {
  margin: 0 0 1rem;
}

.pro-profile__bio p:last-child {
  margin-bottom: 0;
}

/* ============================================
   Skills Section
   ============================================ */
.pro-profile__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pro-profile__skill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--background-lighter);
  border: 1px solid var(--content-lightest);
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--content-darker);
  transition: all 0.3s ease;
}

.pro-profile__skill:hover {
  background: var(--highlight-lightest);
  border-color: var(--highlight-light);
  color: var(--highlight-dark);
  transform: translateY(-2px);
}

.pro-profile__skill--primary {
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  border-color: transparent;
  color: white;
}

.pro-profile__skill--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--highlight-base) 40%, transparent);
}

/* Skill level indicator */
.pro-profile__skill-level {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-base);
}

.pro-profile__skill-level--expert {
  background: var(--success-base);
}

.pro-profile__skill-level--advanced {
  background: var(--info-base);
}

.pro-profile__skill-level--intermediate {
  background: var(--warning-base);
}

/* ============================================
   Experience Timeline
   ============================================ */
.pro-profile__timeline {
  position: relative;
  padding-left: 2rem;
}

/* Timeline line */
.pro-profile__timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--highlight-base), var(--content-lightest));
  border-radius: 2px;
}

.pro-profile__timeline-item {
  position: relative;
  padding-bottom: 2rem;
}

.pro-profile__timeline-item:last-child {
  padding-bottom: 0;
}

/* Timeline dot */
.pro-profile__timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 6px;
  width: 16px;
  height: 16px;
  background: white;
  border: 3px solid var(--highlight-base);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--background-lighter);
  z-index: 1;
}

.pro-profile__timeline-item:first-child::before {
  background: var(--highlight-base);
}

.pro-profile__job-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.pro-profile__company-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--background-lighter);
  border: 1px solid var(--content-lightest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--highlight-base);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.pro-profile__job-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--base-dark);
  margin: 0 0 0.25rem;
}

.pro-profile__company-name {
  font-size: 0.95rem;
  color: var(--content-darker);
  font-weight: 400;
  margin: 0;
}

.pro-profile__job-period {
  font-size: 0.8rem;
  color: var(--content-base);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.pro-profile__job-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--content-dark);
  margin-top: 0.75rem;
}

.pro-profile__job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.pro-profile__job-tag {
  padding: 0.25rem 0.75rem;
  background: var(--background-lighter);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--content-darker);
}

/* ============================================
   Education Section
   ============================================ */
.pro-profile__education-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--background-lighter);
  border-radius: 16px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.pro-profile__education-item:last-child {
  margin-bottom: 0;
}

.pro-profile__education-item:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.pro-profile__edu-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--info-base), var(--info-dark));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pro-profile__edu-icon svg {
  width: 24px;
  height: 24px;
  stroke: white;
}

.pro-profile__edu-degree {
  font-size: 1rem;
  font-weight: 500;
  color: var(--base-dark);
  margin: 0 0 0.25rem;
}

.pro-profile__edu-school {
  font-size: 0.9rem;
  color: var(--content-darker);
  margin: 0;
}

.pro-profile__edu-year {
  font-size: 0.8rem;
  color: var(--content-base);
  margin-top: 0.25rem;
}

/* ============================================
   Contact / Social Links
   ============================================ */
.pro-profile__social {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.pro-profile__social-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: var(--background-lighter);
  border: 1px solid var(--content-lightest);
  border-radius: 12px;
  text-decoration: none;
  color: var(--content-darker);
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 200px;
}

.pro-profile__social-link:hover {
  border-color: var(--highlight-base);
  background: var(--highlight-lightest);
  color: var(--highlight-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.pro-profile__social-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pro-profile__social-icon svg {
  width: 18px;
  height: 18px;
}

.pro-profile__social-icon--email {
  background: linear-gradient(135deg, #EA4335, #FBBC05);
}

.pro-profile__social-icon--linkedin {
  background: linear-gradient(135deg, #0077B5, #00A0DC);
}

.pro-profile__social-icon--github {
  background: linear-gradient(135deg, #333, #6e5494);
}

.pro-profile__social-icon--twitter {
  background: linear-gradient(135deg, #1DA1F2, #14171A);
}

.pro-profile__social-icon--website {
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
}

.pro-profile__social-icon svg {
  stroke: white;
  fill: none;
}

/* ============================================
   Action Buttons
   ============================================ */
.pro-profile__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--content-lightest);
}

.pro-profile__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.pro-profile__btn--primary {
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  color: white;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--highlight-base) 30%, transparent);
}

.pro-profile__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--highlight-base) 40%, transparent);
}

.pro-profile__btn--secondary {
  background: white;
  color: var(--content-darker);
  border: 1px solid var(--content-lightest);
}

.pro-profile__btn--secondary:hover {
  border-color: var(--highlight-base);
  color: var(--highlight-dark);
}

.pro-profile__btn svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   Grid Layout for Cards
   ============================================ */
.pro-profile__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .pro-profile__grid {
    grid-template-columns: 1fr 1fr;
  }

  .pro-profile__grid .pro-profile__card--wide {
    grid-column: 1 / -1;
  }
}

/* ============================================
   Empty State
   ============================================ */
.pro-profile__empty {
  text-align: center;
  padding: 2rem;
  color: var(--content-base);
  font-style: italic;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .pro-profile__header-bg {
    left: 0.5rem;
    right: 0.5rem;
    height: 120px;
  }

  .pro-profile__header {
    padding: 1rem !important;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .pro-profile__avatar {
    width: 70px;
    height: 70px;
  }

  .pro-profile__name {
    font-size: 1.25rem;
  }

  .pro-profile__stats {
    width: 100%;
    justify-content: center;
    gap: 1rem;
    padding: 0.4rem 0.75rem;
    margin-top: 0.5rem;
  }

  .pro-profile__stat-value {
    font-size: 1rem;
  }

  .pro-profile__stat-label {
    font-size: 0.55rem;
  }

  .pro-profile__content {
    padding: 1rem 0.75rem 2rem;
  }

  .pro-profile__card {
    padding: 1.25rem;
    border-radius: 14px;
  }

  .pro-profile__social-link {
    min-width: 100%;
  }

  .pro-profile__actions {
    flex-direction: column;
  }

  .pro-profile__btn {
    width: 100%;
  }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  .pro-profile::before,
  .pro-profile::after {
    display: none;
  }

  .pro-profile__header {
    background: var(--highlight-base);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .pro-profile__actions {
    display: none;
  }
}
/* ============================================
   LANDING PAGE - Modern, Sophisticated Design
   ============================================
   Matches auth pages aesthetic
   ============================================ */

/* === CONTAINER === */
.landing-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--deep-darker) 0%, var(--deep-base) 50%, var(--base-dark) 100%);
  position: relative;
  overflow-x: hidden;
}

/* Animated grid pattern */
.landing-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(var(--light-overlay-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--light-overlay-subtle) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* === NAVBAR === */
.landing-nav {
  position: relative;
  z-index: 100;
  padding: 1rem 2rem;
  background: var(--dark-overlay-soft);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--light-overlay-subtle);
}

.landing-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.landing-nav-brand {
  flex-shrink: 0;
}

.landing-logo {
  font-size: 1.5rem;
  font-weight: 200;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
}

.landing-nav-links {
  display: flex;
  gap: 1.5rem;
}

.landing-nav-link {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--content-lighter);
  text-decoration: none;
  transition: color 0.2s ease;
  padding: 0.5rem 0;
}

.landing-nav-link:hover {
  color: white;
}

.landing-nav-auth {
  display: flex;
  gap: 0.75rem;
}

.landing-nav-auth .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
}

/* === HERO SECTION === */
.landing-hero {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  min-height: 60vh;
}

/* Floating orb effect */
.landing-hero::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--highlight-base) 0%, transparent 70%);
  opacity: 0.1;
  border-radius: 50%;
  top: 10%;
  right: 10%;
  animation: heroFloat 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 30px) scale(1.1); }
}

.landing-hero-content {
  text-align: center;
  max-width: 800px;
}

.landing-title {
  font-size: 4rem;
  font-weight: 200;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: white;
  margin-bottom: 1rem;
}

.landing-subtitle {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--highlight-light);
  margin-bottom: 0.5rem;
}

.landing-tagline {
  font-size: 1rem;
  font-weight: 300;
  color: var(--content-lighter);
  margin-bottom: 2.5rem;
}

.landing-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* === SECTIONS === */
.landing-section {
  position: relative;
  z-index: 10;
  padding: 5rem 2rem;
}

.landing-section-alt {
  background: var(--dark-overlay-soft);
}

.landing-section-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.landing-section-title {
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: 0.05em;
  color: white;
  text-align: center;
  margin-bottom: 3rem;
}

/* === FEATURES === */
.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.landing-feature {
  background: var(--dark-overlay-soft);
  border: 1px solid var(--light-overlay-subtle);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.landing-feature:hover {
  transform: translateY(-4px);
  border-color: var(--highlight-base);
  box-shadow: 0 10px 40px var(--dark-overlay-medium);
}

.landing-feature-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.landing-feature-title {
  font-size: 1.25rem;
  font-weight: 400;
  color: white;
  margin-bottom: 0.75rem;
}

.landing-feature-desc {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--content-lighter);
  line-height: 1.6;
}

/* === ABOUT === */
.landing-about-content {
  max-width: 700px;
  margin: 0 auto;
}

.landing-about-content p {
  font-size: 1rem;
  font-weight: 300;
  color: var(--content-lighter);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* === NEWSLETTER === */
.landing-newsletter {
  background: var(--dark-overlay-soft);
  border: 1px solid var(--light-overlay-subtle);
  border-radius: 16px;
  padding: 3rem;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.landing-newsletter-title {
  font-size: 1.5rem;
  font-weight: 300;
  color: white;
  margin-bottom: 0.5rem;
}

.landing-newsletter-desc {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--content-lighter);
  margin-bottom: 1.5rem;
}

.landing-newsletter-form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.landing-newsletter-input {
  flex: 1;
  min-width: 200px;
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
  font-weight: 300;
  color: white;
  background: var(--base-darker);
  border: 1px solid var(--content-base);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.landing-newsletter-input::placeholder {
  color: var(--content-lighter);
}

.landing-newsletter-input:focus {
  outline: none;
  border-color: var(--highlight-base);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight-base) 20%, transparent);
}

/* === FOOTER === */
.landing-footer {
  position: relative;
  z-index: 10;
  padding: 2rem;
  text-align: center;
  border-top: 1px solid var(--light-overlay-subtle);
}

.landing-footer p {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--content-lighter);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .landing-nav {
    padding: 1rem;
  }

  .landing-nav-inner {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .landing-nav-links {
    display: none;
  }

  .landing-title {
    font-size: 2.5rem;
  }

  .landing-subtitle {
    font-size: 1.2rem;
  }

  .landing-section {
    padding: 3rem 1rem;
  }

  .landing-feature {
    padding: 1.5rem;
  }
}
/* team_cards.css - Modern Team Members UI Component */
/* Futuristic card-based design for team management */

/* ============================================
   VIEW CONTROLS - Toggle & Search
   ============================================ */

.team-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.team-search {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.team-search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  background: var(--background-darker);
  border: 1px solid var(--background-darker);
  border-radius: 10px;
  color: var(--text-base);
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.team-search-input:focus {
  outline: none;
  border-color: var(--highlight-base);
  box-shadow: 0 0 0 3px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.1);
}

.team-search-input::placeholder {
  color: var(--text-muted);
}

.team-search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.team-view-toggle {
  display: flex;
  background: var(--background-darker);
  border-radius: 10px;
  padding: 4px;
}

.team-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
}

.team-view-btn svg {
  width: 18px;
  height: 18px;
}

.team-view-btn:hover {
  color: var(--text-base);
}

.team-view-btn.active {
  background: var(--highlight-base);
  color: white;
}

/* Hidden radio inputs for CSS-only toggle */
.view-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Default state - Cards view */
.team-list { display: none; }
.team-section-divider.team-grid-only { display: flex; }
div.team-grid-only { display: grid; }

/* When List is checked */
#view-list:checked ~ * .team-grid,
#view-list:checked ~ .team-container .team-grid { display: none !important; }

#view-list:checked ~ * .team-list,
#view-list:checked ~ .team-container .team-list { display: block !important; }

#view-list:checked ~ * .team-grid-only,
#view-list:checked ~ .team-container .team-grid-only { display: none !important; }

#view-list:checked ~ .team-controls .team-view-toggle label[for="view-list"] {
  background: var(--highlight-base);
  color: white;
}

/* When Cards is checked (default) */
#view-cards:checked ~ .team-controls .team-view-toggle label[for="view-cards"] {
  background: var(--highlight-base);
  color: white;
}

/* ============================================
   LIST VIEW - Compact for many users
   ============================================ */

.team-list {
  display: none;
  background: var(--background-light);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--background-darker);
}

.team-list-header {
  display: grid;
  grid-template-columns: 60px 2fr 1.5fr 1fr 120px;
  padding: 0.875rem 1.25rem;
  background: var(--background-darker);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  gap: 1rem;
}

.team-list-row {
  display: grid;
  grid-template-columns: 60px 2fr 1.5fr 1fr 120px;
  padding: 0.875rem 1.25rem;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--background-darker);
  transition: all 0.2s ease;
}

.team-list-row:last-child {
  border-bottom: none;
}

.team-list-row:hover {
  background: var(--background-base);
}

.team-list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
}

.team-list-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-list-user {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.team-list-name {
  font-weight: 600;
  color: var(--text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
}

.team-list-email {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-list-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.team-list-role {
  padding: 0.2rem 0.5rem;
  background: var(--background-darker);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.team-list-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
}

.team-list-status .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.team-list-status .status-dot.active {
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

.team-list-status .status-dot.admin {
  background: #8B5CF6;
  box-shadow: 0 0 8px #8B5CF6;
}

.team-list-status .status-dot.pending {
  background: #F59E0B;
  box-shadow: 0 0 8px #F59E0B;
}

.team-list-actions {
  display: flex;
  justify-content: flex-end;
}

.team-list-actions .btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
}

/* List Section Divider */
.team-list-divider {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(90deg, var(--background-darker) 0%, var(--background-base) 100%);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  gap: 0.5rem;
}

.team-list-divider svg {
  width: 14px;
  height: 14px;
}

/* ============================================
   GRID VIEW (Cards)
   ============================================ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}

.team-card {
  position: relative;
  background: linear-gradient(145deg,
    var(--background-light) 0%,
    var(--background-base) 100%);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid var(--background-darker);
  overflow: hidden;
}

.team-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--highlight-base) 0%,
    var(--highlight-light) 50%,
    var(--highlight-base) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 0 30px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.1);
  border-color: var(--highlight-base);
}

.team-card:hover::before {
  opacity: 1;
}

/* Card Header */
.team-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.team-card-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.team-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

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

.team-card-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-base);
  margin: 0 0 0.25rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-card-email {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status Badge */
.team-card-status {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-indicator.active {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.status-indicator.active::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: pulse-glow 2s ease-in-out infinite;
}

.status-indicator.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

.status-indicator.pending::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F59E0B;
  animation: pulse-glow-warning 2s ease-in-out infinite;
}

.status-indicator.admin {
  background: rgba(139, 92, 246, 0.15);
  color: #8B5CF6;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px #10B981; }
  50% { box-shadow: 0 0 16px #10B981, 0 0 24px rgba(16, 185, 129, 0.5); }
}

@keyframes pulse-glow-warning {
  0%, 100% { box-shadow: 0 0 8px #F59E0B; }
  50% { box-shadow: 0 0 16px #F59E0B, 0 0 24px rgba(245, 158, 11, 0.5); }
}

/* Card Body - Meta Info */
.team-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: var(--background-darker);
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.meta-tag svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.meta-tag:hover {
  background: var(--highlight-base);
  color: white;
}

.meta-tag:hover svg {
  opacity: 1;
}

/* Card Actions */
.team-card-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--background-darker);
}

.team-card-actions .btn {
  flex: 1;
  justify-content: center;
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

/* Section Divider */
.team-section-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0 1.5rem;
}

.team-section-divider::before,
.team-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--background-darker) 50%,
    transparent 100%);
}

.team-section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--background-darker);
  border-radius: 25px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.team-section-title svg {
  width: 16px;
  height: 16px;
}

/* Invitation Card Variant */
.team-card.invitation {
  background: linear-gradient(145deg,
    rgba(245, 158, 11, 0.05) 0%,
    var(--background-base) 100%);
  border-style: dashed;
}

.team-card.invitation:hover {
  border-color: #F59E0B;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 0 30px rgba(245, 158, 11, 0.1);
}

/* Copy Link Button */
.copy-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  background: transparent;
  border: 1px solid var(--background-darker);
  border-radius: 6px;
  font-size: 0.7rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-link-btn:hover {
  background: var(--highlight-base);
  border-color: var(--highlight-base);
  color: white;
}

.copy-link-btn svg {
  width: 12px;
  height: 12px;
}

/* Stats Bar */
.team-stats-bar {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--background-darker);
  border-radius: 12px;
  margin-bottom: 2rem;
}

.team-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.team-stat-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-light);
  border-radius: 10px;
  color: var(--highlight-base);
}

.team-stat-icon svg {
  width: 20px;
  height: 20px;
}

.team-stat-info {
  display: flex;
  flex-direction: column;
}

.team-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-base);
  line-height: 1;
}

.team-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Empty State */
.team-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
  color: var(--text-muted);
}

.team-empty-state svg {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Responsive */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
  }

  .team-stats-bar {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .team-stat {
    flex: 1;
    min-width: calc(50% - 0.5rem);
  }
}
/* data_grid.css - Modern Data Grid/List Component */
/* Reusable card/list view for any data collection */

/* ============================================
   VIEW CONTROLS - Toggle & Search
   ============================================ */

.data-grid-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.data-grid-search {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.data-grid-search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  background: var(--background-darker);
  border: 1px solid var(--background-darker);
  border-radius: 10px;
  color: var(--text-base);
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.data-grid-search-input:focus {
  outline: none;
  border-color: var(--highlight-base);
  box-shadow: 0 0 0 3px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.1);
}

.data-grid-search-input::placeholder {
  color: var(--text-muted);
}

.data-grid-search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.data-grid-view-toggle {
  display: flex;
  background: var(--background-darker);
  border-radius: 10px;
  padding: 4px;
  position: relative;
}

/* Sliding indicator pill */
.data-grid-view-toggle::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--highlight-base);
  border-radius: 8px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.data-grid-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.3s ease;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  position: relative;
  z-index: 1;
  flex: 1;
}

.data-grid-view-btn svg {
  width: 18px;
  height: 18px;
}

.data-grid-view-btn:hover {
  color: var(--text-base);
}

/* Hidden radio inputs for CSS-only toggle */
.data-grid-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Default state - Cards view */
.data-grid-list { display: none; }

/* Slide indicator to List position */
[id$="-view-list"]:checked ~ .data-grid-controls .data-grid-view-toggle::before {
  transform: translateX(100%);
}

/* When List is checked */
[id$="-view-list"]:checked ~ * .data-grid-cards,
[id$="-view-list"]:checked ~ .data-grid-container .data-grid-cards { display: none !important; }

[id$="-view-list"]:checked ~ * .data-grid-list,
[id$="-view-list"]:checked ~ .data-grid-container .data-grid-list { display: block !important; }

[id$="-view-list"]:checked ~ .data-grid-controls .data-grid-view-toggle label[for$="-view-list"] {
  color: white;
}

/* When Cards is checked (default) */
[id$="-view-cards"]:checked ~ .data-grid-controls .data-grid-view-toggle label[for$="-view-cards"] {
  color: white;
}

/* ============================================
   STATS BAR
   ============================================ */

.data-grid-stats {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--background-darker);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.data-grid-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.data-grid-stat-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-light);
  border-radius: 10px;
  color: var(--highlight-base);
}

.data-grid-stat-icon svg {
  width: 20px;
  height: 20px;
}

.data-grid-stat-info {
  display: flex;
  flex-direction: column;
}

.data-grid-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-base);
  line-height: 1;
}

.data-grid-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* ============================================
   CARDS VIEW
   ============================================ */

.data-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  padding: 0.5rem 0;
}

.data-grid-card {
  position: relative;
  background: linear-gradient(145deg,
    var(--background-light) 0%,
    var(--background-base) 100%);
  border-radius: 16px;
  padding: 1.25rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid var(--background-darker);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.data-grid-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--highlight-base) 0%,
    var(--highlight-light) 50%,
    var(--highlight-base) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.data-grid-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 0 30px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.1);
  border-color: var(--highlight-base);
}

.data-grid-card:hover::before {
  opacity: 1;
}

/* Card Header */
.data-grid-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.data-grid-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--highlight-base);
  border-radius: 12px;
  color: white;
  flex-shrink: 0;
}

.data-grid-card-icon svg {
  width: 24px;
  height: 24px;
}

.data-grid-card-title-wrap {
  flex: 1;
  min-width: 0;
}

.data-grid-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-base);
  margin: 0 0 0.25rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-grid-card-subtitle {
  font-size: 0.8rem;
  color: var(--highlight-darker);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card Status Badge */
.data-grid-card-status {
  margin-top: 0.35rem;
}

.data-grid-card-status .data-grid-status-badge::before {
  display: none;
}

.data-grid-card-status .data-grid-status-badge {
  padding-left: 0;
  color: var(--highlight-darker);
  background: transparent;
}

.data-grid-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-grid-status-badge.status-active,
.data-grid-status-badge.status-completed {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.data-grid-status-badge.status-pending,
.data-grid-status-badge.status-in_progress {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

.data-grid-status-badge.status-draft,
.data-grid-status-badge.status-inactive {
  background: rgba(107, 114, 128, 0.15);
  color: #6B7280;
}

.data-grid-status-badge.status-cancelled,
.data-grid-status-badge.status-error {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

.data-grid-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 8px currentColor; }
  50% { box-shadow: 0 0 16px currentColor, 0 0 24px currentColor; }
}

/* Card Meta Tags */
.data-grid-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.data-grid-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: var(--background-darker);
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--highlight-contrast);
  transition: all 0.2s ease;
}

.data-grid-meta-tag svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.data-grid-meta-tag:hover {
  background: var(--highlight-base);
  color: white;
}

.data-grid-meta-tag:hover svg {
  opacity: 1;
}

/* Card Actions */
.data-grid-card-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--background-darker);
}

.data-grid-card-actions .btn {
  flex: 1;
  justify-content: center;
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

/* ============================================
   LIST VIEW
   ============================================ */

.data-grid-list {
  background: var(--background-light);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--background-darker);
}

.data-grid-list-header {
  display: grid;
  padding: 0.875rem 1.25rem;
  background: var(--background-darker);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  gap: 1rem;
}

.data-grid-list-row {
  display: grid;
  padding: 0.875rem 1.25rem;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--background-darker);
  transition: all 0.2s ease;
  cursor: pointer;
}

.data-grid-list-row:last-child {
  border-bottom: none;
}

.data-grid-list-row:hover {
  background: rgba(var(--highlight-base-rgb, 59, 130, 246), 0.08);
  border-left: 3px solid var(--highlight-base);
  padding-left: calc(1.25rem - 3px);
}

.data-grid-list-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--highlight-base);
  border-radius: 10px;
  color: white;
}

.data-grid-list-icon svg {
  width: 20px;
  height: 20px;
}

.data-grid-list-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.data-grid-list-name {
  font-weight: 600;
  color: var(--highlight-contrast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
}

.data-grid-list-subtitle {
  font-size: 0.75rem;
  color: var(--highlight-darker);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-grid-list-cell {
  font-size: 0.85rem;
  color: var(--highlight-contrast);
}

.data-grid-list-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--highlight-darker);
}

.data-grid-list-status .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.data-grid-list-status.status-active,
.data-grid-list-status.status-completed { color: #10B981; }
.data-grid-list-status.status-pending,
.data-grid-list-status.status-in_progress { color: #F59E0B; }
.data-grid-list-status.status-draft,
.data-grid-list-status.status-inactive { color: #6B7280; }
.data-grid-list-status.status-cancelled,
.data-grid-list-status.status-error { color: #EF4444; }

.data-grid-list-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.data-grid-list-actions .btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.data-grid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--background-light);
  border-radius: 16px;
  border: 2px dashed var(--background-darker);
}

.data-grid-empty svg {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.data-grid-empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-base);
  margin-bottom: 0.5rem;
}

.data-grid-empty-text {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

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

@media (max-width: 768px) {
  .data-grid-cards {
    grid-template-columns: 1fr;
  }

  .data-grid-stats {
    gap: 1rem;
  }

  .data-grid-stat {
    flex: 1;
    min-width: calc(50% - 0.5rem);
  }

  .data-grid-list-header,
  .data-grid-list-row {
    grid-template-columns: 50px 1fr auto;
  }

  .data-grid-list-row > *:not(:nth-child(-n+3)) {
    display: none;
  }
}
/* ============================================
   TIMECARD COMPONENT - Executive Design
   ============================================
   Elegant, refined, professional aesthetic
   Construction Management Dashboard
   ============================================ */

.timecard {
  display: block;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.04);
}

.timecard:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Header */
.timecard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: white;
  border-bottom: 1px solid var(--base-lighter);
}

.timecard-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--deep-base);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.timecard-title svg {
  width: 18px;
  height: 18px;
  color: var(--highlight-base);
}

.timecard-week {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-light);
  background: var(--content-base);
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

/* Days Grid */
.timecard-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr) 1.4fr;
  background: var(--base-lighter);
  gap: 1px;
}

.timecard-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0.5rem;
  background: white;
  transition: background 0.2s ease;
  min-height: 84px;
}

.timecard-day:hover {
  background: var(--ground-lightest);
}

.timecard-day-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--base-base);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.timecard-day-hours {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--base-light);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.timecard-day-hours.has-hours {
  color: var(--deep-base);
  font-weight: 500;
}

/* Today indicator */
.timecard-day.is-today {
  background: var(--ground-lightest);
  position: relative;
}

.timecard-day.is-today::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--highlight-base);
  border-radius: 0 0 3px 3px;
}

.timecard-day.is-today .timecard-day-label {
  color: var(--highlight-dark);
  font-weight: 700;
}

.timecard-day.is-today .timecard-day-hours {
  color: var(--highlight-base);
  font-weight: 600;
}

/* Clocked-in state - Active session indicator */
.timecard-day.is-clocked-in {
  background: var(--success-base);
  position: relative;
}

.timecard-day.is-clocked-in::before {
  background: var(--success-dark);
}

.timecard-day.is-clocked-in .timecard-day-label {
  color: var(--success-contrast);
  font-weight: 700;
}

.timecard-day-status {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--success-contrast);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  animation: pulse-in 2s ease-in-out infinite;
}

@keyframes pulse-in {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Real-time timer in stats */
.timecard-timer {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--success-base);
  letter-spacing: 0.02em;
}

/* Weekend styling */
.timecard-day.is-weekend {
  background: var(--base-lightest);
  color: var(--base-base);
}

.timecard-day.is-weekend .timecard-day-label,
.timecard-day.is-weekend .timecard-day-hours {
  color: inherit;
  opacity: 0.8;
}

/* Total column */
.timecard-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem;
  background: var(--highlight-base);
  color: var(--text-light);
}

.timecard-total-label {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.375rem;
  opacity: 0.9;
}

.timecard-total-hours {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-light);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.timecard-total-suffix {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--text-light);
  margin-top: 0.25rem;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

/* Progress bar */
.timecard-progress {
  padding: 1rem 1.5rem;
  background: white;
  border-top: 1px solid var(--base-lighter);
}

.timecard-progress-bar {
  height: 6px;
  background: var(--ground-lighter);
  border-radius: 3px;
  overflow: hidden;
}

.timecard-progress-fill {
  height: 100%;
  background: var(--highlight-base);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.timecard-progress-text {
  display: flex;
  justify-content: space-between;
  margin-top: 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--base-base);
}

.timecard-progress-text span:last-child {
  color: var(--highlight-dark);
  font-weight: 600;
}

/* Stats row */
.timecard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--base-lighter);
  gap: 1px;
  border-top: 1px solid var(--base-lighter);
}

.timecard-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem;
  background: white;
  transition: background 0.2s ease;
}

.timecard-stat:hover {
  background: var(--ground-lightest);
}

.timecard-stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--base-base);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.timecard-stat-value {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--deep-base);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.timecard-stat-value.no-hours {
  color: var(--base-light);
  font-weight: 400;
}

/* Clock status badge */
.timecard-clock-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.timecard-clock-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.timecard-clock-badge.in {
  background: var(--success-base);
  color: var(--success-contrast);
}

.timecard-clock-badge.out {
  background: var(--deep-base);
  color: var(--text-light);
}

/* Responsive */
@media (max-width: 640px) {
  .timecard {
    border-radius: 12px;
  }

  .timecard-header {
    padding: 1rem 1.25rem;
  }

  .timecard-days {
    grid-template-columns: repeat(4, 1fr);
  }

  .timecard-day {
    min-height: 72px;
    padding: 1rem 0.25rem;
  }

  .timecard-total {
    grid-column: span 4;
    flex-direction: row;
    gap: 0.625rem;
    padding: 1rem;
  }

  .timecard-total-label {
    margin-bottom: 0;
  }

  .timecard-total-hours {
    font-size: 1.5rem;
  }

  .timecard-progress {
    padding: 0.875rem 1.25rem;
  }

  .timecard-stat {
    padding: 1rem 0.5rem;
  }

  .timecard-stat-value {
    font-size: 1.25rem;
  }
}

@media (max-width: 400px) {
  .timecard-day-hours {
    font-size: 1.25rem;
  }

  .timecard-day-label {
    font-size: 0.5625rem;
  }
}
/* Phase 2: Timesheet Engine - Today Focus + Week Summary */
/* Responsive design for WEB and MOBILE WebView */
/* COLORS: Using ONLY system variables from colors.css */

/* Page Container */
.timesheet-page {
  max-width: 100%;
}

/* ============================================
   TODAY'S TIMECARD - Primary Focus
   ============================================ */
.today-timecard {
  background: var(--background-lighter);
  border-radius: 0.75rem;
  border: 1px solid var(--content-lighter);
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 20px var(--dark-overlay-soft);
}

.today-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--content-lighter);
}

.today-date {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.day-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--base-base);
}

.full-date {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--deep-base);
}

.status-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  border-radius: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-badge.status-active {
  background: var(--success-base);
  color: var(--success-contrast);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--success-light); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

/* Timer Container */
.today-timer-container {
  text-align: center;
}

.today-timer {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  font-size: 4rem;
  font-weight: 700;
  color: var(--success-base);
  letter-spacing: 0.05em;
  margin: 1rem 0;
}

@media (max-width: 640px) {
  .today-timer {
    font-size: 2.5rem;
  }
}

/* Today Details */
.today-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--background-dark);
  border-radius: 0.5rem;
}

@media (max-width: 480px) {
  .today-details {
    grid-template-columns: 1fr;
  }
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--content-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--deep-base);
}

/* Platform indicators */
.detail-value.platform-web::before { content: "🖥️ "; }
.detail-value.platform-android::before { content: "📱 "; }
.detail-value.platform-ios::before { content: "📱 "; }
.detail-value.platform-api::before { content: "🔌 "; }

/* Today Actions */
.today-actions {
  margin-top: 1.5rem;
}

.btn-clock-out {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Empty State */
.today-empty {
  text-align: center;
  padding: 2rem;
}

.empty-timer {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  font-size: 3rem;
  font-weight: 300;
  color: var(--muted-base);
  margin-bottom: 0.5rem;
}

.empty-message {
  font-size: 0.9375rem;
  color: var(--muted-base);
  margin: 0;
}

/* ============================================
   WEEK SUMMARY - Secondary View
   ============================================ */
.week-summary {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 480px) {
  .week-summary {
    gap: 0.25rem;
  }
}

.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.5rem;
  background: var(--background-dark);
  border-radius: 0.5rem;
  border: 1px solid var(--content-lighter);
  transition: transform 0.2s, box-shadow 0.2s;
}

.week-day:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--dark-overlay-soft);
}

.week-day-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.week-day-today {
  background: var(--base-base);
  border-color: var(--base-base);
  box-shadow: 0 4px 12px var(--dark-overlay-medium);
}

.week-day-today .week-day-name,
.week-day-today .week-day-number,
.week-day-today .week-day-hours {
  color: var(--base-contrast);
}

.week-day-past {
  opacity: 0.7;
}

.week-day-name {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--content-base);
  letter-spacing: 0.05em;
}

.week-day-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--deep-base);
  line-height: 1.2;
}

.week-day-hours {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--content-base);
  margin-top: 0.25rem;
}

.hours-zero {
  color: var(--danger-base);
}

.hours-active {
  color: var(--success-base);
  animation: blink 1s ease-in-out infinite;
}

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

/* ============================================
   LEGACY STYLES (preserved for compatibility)
   ============================================ */
.active-sessions-container {
  margin-bottom: 1.5rem;
}

.active-sessions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.session-count {
  font-size: 0.875rem;
  color: var(--content-base);
  background: var(--background-dark);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
}

.active-sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.session-card {
  background: var(--background-lighter);
  border-radius: 0.5rem;
  border: 1px solid var(--content-lighter);
  padding: 1rem;
}

.session-card.session-active {
  border-left: 4px solid var(--success-base);
}

/* ============================================
   TEAM MONITORING PANEL (Admin/Manager Only)
   UI-3: Vista separada de supervisión
   ============================================ */
.team-monitoring-panel {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--background-dark);
  border-radius: 0.5rem;
  border: 1px dashed var(--content-lighter);
}

.team-monitoring-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--content-lighter);
}

.team-monitoring-panel .panel-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--content-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.team-sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.team-session-card {
  background: var(--background-lighter);
  border-radius: 0.5rem;
  border: 1px solid var(--content-lighter);
  padding: 0.75rem;
  border-left: 3px solid var(--warning-base);
}

.team-session-user {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--deep-base);
  margin-bottom: 0.25rem;
}

.team-session-project {
  font-size: 0.75rem;
  color: var(--content-base);
  margin-bottom: 0.5rem;
}

.team-session-timer {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--warning-base);
  margin-bottom: 0.5rem;
}

.team-session-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--muted-base);
  margin-bottom: 0.5rem;
}

.team-session-actions {
  margin-top: 0.5rem;
}

.team-session-actions .btn {
  width: 100%;
  font-size: 0.75rem;
  padding: 0.375rem 0.5rem;
}
/* ==========================================================================
   Waitlist Styles
   ========================================================================== */

/* Waitlist Form Info Banner */
.waitlist-info {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.waitlist-info-muted {
  background: rgba(156, 163, 175, 0.1);
  border-color: rgba(156, 163, 175, 0.2);
}

.waitlist-info-icon {
  flex-shrink: 0;
  color: #6366f1;
}

.waitlist-info-muted .waitlist-info-icon {
  color: #6b7280;
}

.waitlist-info-text {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.5;
  margin: 0;
}

/* Success Page Styles */
.waitlist-success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.waitlist-success-content {
  text-align: left;
}

.waitlist-success-title {
  font-size: 1rem;
  font-weight: 600;
  color: #166534;
  margin-bottom: 1rem;
}

.waitlist-success-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.waitlist-success-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #374151;
  font-size: 0.875rem;
}

.waitlist-success-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: #22c55e;
  color: white;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Success Icon Override */
.auth-header-icon-success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

/* Textarea in Auth Form */
.auth-textarea {
  resize: vertical;
  min-height: 80px;
}

/* ==========================================================================
   Admin Waitlist Panel
   ========================================================================== */

/* Stats Cards */
.waitlist-stat-card {
  background: white;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.waitlist-stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
}

.waitlist-stat-label {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.waitlist-stat-pending .waitlist-stat-number { color: #f59e0b; }
.waitlist-stat-contacted .waitlist-stat-number { color: #3b82f6; }
.waitlist-stat-invited .waitlist-stat-number { color: #22c55e; }
.waitlist-stat-registered .waitlist-stat-number { color: #8b5cf6; }

/* Filter Buttons */
.waitlist-filter-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  background: white;
  color: #374151;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.waitlist-filter-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.waitlist-filter-btn.active {
  background: #4f46e5;
  color: white;
  border-color: #4f46e5;
}

/* Table */
.waitlist-table {
  width: 100%;
  border-collapse: collapse;
}

.waitlist-table thead {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.waitlist-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.waitlist-table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.waitlist-table tbody tr:hover {
  background: #f9fafb;
}

/* Message Row */
.waitlist-message-row {
  background: #fafafa !important;
}

.waitlist-message-row:hover {
  background: #f5f5f5 !important;
}

.waitlist-message {
  font-size: 0.8125rem;
  color: #4b5563;
  padding: 0.5rem;
  background: white;
  border-radius: 0.25rem;
  border-left: 3px solid #d1d5db;
}

/* Status Badges */
.waitlist-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
}

.badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.badge-info {
  background: #dbeafe;
  color: #1e40af;
}

.badge-success {
  background: #d1fae5;
  color: #065f46;
}

.badge-primary {
  background: #ede9fe;
  color: #5b21b6;
}

.badge-secondary {
  background: #f3f4f6;
  color: #4b5563;
}

/* Action Buttons */
.waitlist-action-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.waitlist-action-contact {
  background: #dbeafe;
  color: #1e40af;
}

.waitlist-action-contact:hover {
  background: #bfdbfe;
}

.waitlist-action-invite {
  background: #d1fae5;
  color: #065f46;
}

.waitlist-action-invite:hover {
  background: #a7f3d0;
}

.waitlist-action-delete {
  background: #fee2e2;
  color: #991b1b;
}

.waitlist-action-delete:hover {
  background: #fecaca;
}

/* Empty State */
.waitlist-empty {
  text-align: center;
  padding: 3rem;
  background: white;
  border-radius: 0.5rem;
  border: 2px dashed #e5e7eb;
}

/* Responsive */
@media (max-width: 768px) {
  .waitlist-table {
    display: block;
    overflow-x: auto;
  }

  .waitlist-stat-card {
    padding: 0.75rem;
  }

  .waitlist-stat-number {
    font-size: 1.25rem;
  }
}
/* ============================================
   DASHBOARD LAYOUT - Executive Design
   ============================================
   Premium, sophisticated, C-suite aesthetic
   ============================================ */

/* ============================================
   BREADCRUMB - Refined Navigation
   ============================================ */

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb-link {
  color: var(--highlight-base, #3b82f6);
  font-weight: 500;
  font-size: 0.8125rem;
  text-decoration: none;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}

.breadcrumb-link:hover {
  color: var(--highlight-dark);
  background: rgba(var(--highlight-base-rgb, 59, 130, 246), 0.08);
}

.breadcrumb-chevron {
  width: 14px;
  height: 14px;
  color: var(--base-light);
  flex-shrink: 0;
}

.breadcrumb-current {
  color: var(--content-base);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.25rem 0.625rem;
}

/* Breadcrumb Container */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(180deg, var(--ground-lightest, #f8fafc) 0%, white 100%);
  border-bottom: 1px solid var(--base-lighter, #e2e8f0);
  margin-bottom: 0;
}

/* ============================================
   DASHBOARD HEADER - Executive Welcome
   ============================================ */

.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 0 1.5rem 0;
  margin-bottom: 0.5rem;
}

.dashboard-greeting {
  flex: 1;
}

.dashboard-greeting h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--deep-base);
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--deep-base) 0%, var(--deep-dark) 50%, var(--highlight-base) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dashboard-date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--content-base);
  padding: 0.375rem 0.875rem;
  background: var(--ground-lightest);
  border-radius: 20px;
  border: 1px solid var(--base-lighter);
}

.dashboard-date::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--highlight-base);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* ============================================
   ACTION BUTTONS - Premium Style
   ============================================ */

.dashboard-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  padding-top: 0.25rem;
}

.dashboard-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.dashboard-actions .btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.dashboard-actions .btn-secondary {
  background: white;
  color: var(--deep-base);
  border: 1px solid var(--base-lighter);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dashboard-actions .btn-secondary:hover {
  background: var(--ground-lightest);
  border-color: var(--highlight-base);
  color: var(--highlight-base);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.15);
}

.dashboard-actions .btn-secondary svg {
  color: var(--highlight-base);
}

.dashboard-actions .btn-primary {
  background: linear-gradient(135deg, var(--highlight-base) 0%, var(--highlight-dark) 100%);
  color: white;
  border: none;
  box-shadow:
    0 2px 4px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.2),
    0 4px 12px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.15);
}

.dashboard-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.3),
    0 8px 24px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.2);
}

.dashboard-actions .btn-primary svg {
  color: white;
}

/* ============================================
   TIMECARD ENHANCEMENT
   ============================================ */

.v2-main {
  margin-top: 0;
}

.v2-main .timecard {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--base-lightest, #f1f5f9);
}

/* Disable hover transform in dashboard */
.v2-main .timecard:hover {
  transform: none;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.5rem 0 1rem 0;
  }

  .dashboard-greeting h1 {
    font-size: 1.5rem;
  }

  .dashboard-date {
    align-self: flex-start;
  }

  .dashboard-actions {
    width: 100%;
  }

  .dashboard-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .dashboard-greeting h1 {
    font-size: 1.25rem;
  }

  .dashboard-actions {
    flex-direction: column;
  }

  .dashboard-actions .btn {
    width: 100%;
  }
}

/* ============================================
   EXECUTIVE METRICS CARDS
   ============================================ */

.dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.dash-metric-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dash-metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--highlight-base), var(--highlight-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dash-metric-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.04);
}

.dash-metric-card:hover::before {
  opacity: 1;
}

.dash-metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.dash-metric-icon svg {
  width: 24px;
  height: 24px;
}

.dash-metric-projects {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
  color: #8B5CF6;
}

.dash-metric-tasks {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
  color: #F59E0B;
}

.dash-metric-team {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
  color: #10B981;
}

.dash-metric-hours {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
  color: #3B82F6;
}

.dash-metric-content {
  margin-bottom: 0.75rem;
}

.dash-metric-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--deep-base);
  line-height: 1;
  letter-spacing: -0.02em;
}

.dash-metric-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--content-base);
  margin-top: 0.375rem;
}

.dash-metric-trend {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--content-lighter);
}

.dash-metric-trend svg {
  width: 14px;
  height: 14px;
}

.dash-trend-up {
  color: #10B981;
}

.dash-trend-warning {
  color: #F59E0B;
}

.dash-trend-down {
  color: #EF4444;
}

/* Avatar Stack */
.dash-avatar-stack {
  display: flex;
  align-items: center;
}

.dash-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 600;
  color: white;
  border: 2px solid white;
  margin-left: -8px;
}

.dash-avatar:first-child {
  margin-left: 0;
}

.dash-avatar-more {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--content-base);
  background: var(--ground-lighter);
  border: 2px solid white;
  margin-left: -8px;
}

/* ============================================
   CHARTS SECTION
   ============================================ */

.dash-charts {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.dash-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid var(--base-lightest, #f1f5f9);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03);
}

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.dash-card-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-base);
  margin: 0;
}

.dash-card-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--content-base);
  background: var(--ground-lighter);
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Bar Chart */
.dash-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 160px;
  gap: 0.75rem;
  padding-top: 1.5rem;
}

.dash-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.dash-bar {
  flex: 1;
  width: 100%;
  max-width: 40px;
  background: var(--ground-lighter);
  border-radius: 6px 6px 0 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.dash-bar-fill {
  width: 100%;
  height: var(--bar-height);
  background: linear-gradient(180deg, var(--highlight-base), var(--highlight-dark));
  border-radius: 6px 6px 0 0;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-bar-today .dash-bar-fill {
  background: linear-gradient(180deg, #10B981, #059669);
}

.dash-bar-weekend .dash-bar-fill {
  background: linear-gradient(180deg, var(--base-light), var(--base-base));
}

.dash-bar-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--content-lighter);
  text-transform: uppercase;
  margin-top: 0.625rem;
  letter-spacing: 0.03em;
}

.dash-bar-today .dash-bar-label {
  color: #10B981;
}

/* Donut Chart */
.dash-donut-container {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.dash-donut {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

.dash-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.dash-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.dash-donut-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--deep-base);
  line-height: 1;
}

.dash-donut-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--content-lighter);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

.dash-donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.dash-legend-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--content-base);
}

.dash-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.dash-legend-val {
  margin-left: auto;
  font-weight: 600;
  color: var(--deep-base);
}

/* ============================================
   MAIN ROW - DONUT + TIMECARD (40/60)
   ============================================ */

.dash-main-row {
  display: grid;
  grid-template-columns: 2fr 3fr; /* 40% / 60% ratio */
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  grid-auto-rows: 1fr;
}

.dash-main-row > * {
  min-height: 0;
}

.dash-timecard-wrap {
  min-width: 0;
}

.dash-timecard-wrap .v2-main {
  margin-top: 0;
  height: 100%;
}

.dash-timecard-wrap .v2-main .timecard {
  width: 100%;
  max-width: 100%;
  height: 100%;
}

/* Remove hover animation in dashboard context */
.dash-timecard-wrap .v2-main .timecard:hover {
  transform: none;
}

.dash-weekly-card {
  margin-bottom: 1.5rem;
}

/* ============================================
   RESPONSIVE - METRICS & CHARTS
   ============================================ */

@media (max-width: 1200px) {
  .dash-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .dash-main-row {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  /* On small screens: timecard first, then donut */
  .dash-main-row .dash-status-card {
    order: 2;
  }

  .dash-main-row .dash-timecard-wrap {
    order: 1;
  }

  .dash-main-row > * {
    overflow: visible;
  }

  .dash-donut-container {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .dash-metrics {
    grid-template-columns: 1fr;
  }

  .dash-donut-container {
    flex-direction: column;
    text-align: center;
  }

  .dash-donut-legend {
    width: 100%;
  }
}
/* ============================================
   EXECUTIVE DASHBOARD - Premium Design System
   ============================================
   A stunning, modern dashboard experience
   Construction Management Excellence
   ============================================ */

/* ============================================
   BASE CONTAINER
   ============================================ */
.exec-dashboard {
  padding: 1.5rem;
  max-width: 1600px;
  margin: 0 auto;
}

/* ============================================
   WELCOME HEADER
   ============================================ */
.exec-welcome {
  margin-bottom: 2rem;
}

.exec-welcome-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.exec-welcome-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--deep-base);
  margin: 0 0 0.25rem 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--deep-base) 0%, var(--highlight-base) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.exec-welcome-subtitle {
  font-size: 0.9375rem;
  color: var(--content-base);
  margin: 0;
}

.exec-welcome-actions {
  display: flex;
  gap: 0.75rem;
}

.exec-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--content-base);
  background: white;
  border: 1px solid var(--base-lighter);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.exec-header-btn svg {
  width: 18px;
  height: 18px;
  color: var(--highlight-base);
}

.exec-header-btn:hover {
  background: var(--ground-lightest);
  border-color: var(--highlight-base);
  color: var(--deep-base);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.exec-header-btn-primary {
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  border-color: transparent;
  color: white;
}

.exec-header-btn-primary svg {
  color: white;
}

.exec-header-btn-primary:hover {
  background: linear-gradient(135deg, var(--highlight-dark), var(--highlight-base));
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 16px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.4);
}

.exec-welcome-date {
  text-align: right;
  flex-shrink: 0;
}

.exec-date-day {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--highlight-base);
}

.exec-date-full {
  display: block;
  font-size: 0.875rem;
  color: var(--content-base);
  margin-top: 0.125rem;
}

/* ============================================
   TIMECARD SECTION
   ============================================ */
.exec-timecard-section {
  margin-bottom: 1.5rem;
}

.exec-timecard-section .v2-main {
  margin-top: 0;
}

.exec-timecard-section .timecard {
  border-radius: 16px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.exec-timecard-section .timecard:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.04);
}

/* ============================================
   KPI METRICS GRID
   ============================================ */
.exec-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.exec-kpi-card {
  background: white;
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.exec-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--highlight-base), var(--highlight-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.exec-kpi-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.04);
}

.exec-kpi-card:hover::before {
  opacity: 1;
}

.exec-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  color: white;
}

.exec-kpi-icon svg {
  width: 22px;
  height: 22px;
}

.exec-kpi-projects .exec-kpi-icon { background: linear-gradient(135deg, #667eea, #764ba2); }
.exec-kpi-tasks .exec-kpi-icon { background: linear-gradient(135deg, #f093fb, #f5576c); }
.exec-kpi-hours .exec-kpi-icon { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.exec-kpi-team .exec-kpi-icon { background: linear-gradient(135deg, #43e97b, #38f9d7); }

.exec-kpi-content {
  flex: 1;
}

.exec-kpi-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--deep-base);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.exec-kpi-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--content-base);
  margin-top: 0.25rem;
}

.exec-kpi-trend {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.exec-kpi-trend svg {
  width: 14px;
  height: 14px;
}

.exec-trend-up {
  color: #10B981;
}

.exec-trend-warning {
  color: #F59E0B;
}

.exec-trend-neutral {
  color: var(--content-base);
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.exec-kpi-progress {
  height: 6px;
  background: var(--ground-lighter);
  border-radius: 3px;
  overflow: hidden;
}

.exec-kpi-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--highlight-base), var(--highlight-light));
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* Avatar Stack in KPI */
.exec-avatar-stack {
  display: flex;
  align-items: center;
}

.exec-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 600;
  color: white;
  border: 2px solid white;
  margin-left: -8px;
}

.exec-avatar:first-child {
  margin-left: 0;
}

.exec-avatar-more {
  background: var(--deep-base);
  font-size: 0.5625rem;
}

/* ============================================
   MAIN CONTENT GRID
   ============================================ */
.exec-main-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.exec-column-primary {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.exec-column-secondary {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ============================================
   CARD BASE STYLES
   ============================================ */
.exec-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03);
}

.exec-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ground-lighter);
}

.exec-card-title h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-base);
  margin: 0;
}

.exec-card-subtitle {
  display: block;
  font-size: 0.75rem;
  color: var(--content-lighter);
  margin-top: 0.125rem;
}

.exec-card-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--highlight-base);
  text-decoration: none;
  transition: all 0.2s ease;
}

.exec-card-link:hover {
  color: var(--highlight-dark);
  gap: 0.5rem;
}

.exec-card-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.exec-card-link:hover svg {
  transform: translateX(2px);
}

.exec-card-actions {
  display: flex;
  gap: 0.375rem;
}

/* Chips */
.exec-chip {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--content-base);
  background: var(--ground-lighter);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.exec-chip:hover {
  background: var(--ground-light);
  color: var(--deep-base);
}

.exec-chip-active {
  background: var(--highlight-base);
  color: white;
}

.exec-chip-active:hover {
  background: var(--highlight-dark);
  color: white;
}

/* ============================================
   BAR CHART
   ============================================ */
.exec-chart-container {
  padding: 1.5rem;
}

.exec-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 180px;
  gap: 0.75rem;
  padding: 0 0.5rem;
  margin-bottom: 1.5rem;
}

.exec-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
}

.exec-bar {
  flex: 1;
  width: 100%;
  max-width: 48px;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.exec-bar::before {
  content: attr(data-value);
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--content-base);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.exec-bar-item:hover .exec-bar::before {
  opacity: 1;
}

.exec-bar-fill {
  width: 100%;
  height: var(--bar-height, 0%);
  background: linear-gradient(180deg, var(--highlight-base) 0%, var(--highlight-light) 100%);
  border-radius: 8px 8px 4px 4px;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.exec-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
  border-radius: 8px 8px 0 0;
}

.exec-bar-complete .exec-bar-fill {
  background: linear-gradient(180deg, #10B981 0%, #34D399 100%);
}

.exec-bar-current .exec-bar-fill {
  background: linear-gradient(180deg, var(--highlight-base) 0%, var(--highlight-light) 100%);
  animation: pulse-bar 2s ease-in-out infinite;
}

@keyframes pulse-bar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.exec-bar-weekend .exec-bar-fill {
  background: linear-gradient(180deg, var(--base-light) 0%, var(--base-lighter) 100%);
}

.exec-bar-today .exec-bar-label {
  color: var(--highlight-base);
  font-weight: 700;
}

.exec-bar-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--content-base);
  text-transform: uppercase;
}

.exec-bar-weekend .exec-bar-label {
  color: var(--content-lighter);
}

/* Chart Summary */
.exec-chart-summary {
  display: flex;
  justify-content: space-around;
  padding-top: 1rem;
  border-top: 1px solid var(--ground-lighter);
}

.exec-chart-stat {
  text-align: center;
}

.exec-chart-stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--deep-base);
}

.exec-chart-stat-value.text-success {
  color: #10B981;
}

.exec-chart-stat-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--content-lighter);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

/* ============================================
   TASKS LIST
   ============================================ */
.exec-tasks-list {
  padding: 0.5rem;
}

.exec-task-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.exec-task-item:hover {
  background: var(--ground-lightest);
}

.exec-task-high {
  border-left-color: #EF4444;
}

.exec-task-medium {
  border-left-color: #F59E0B;
}

.exec-task-completed {
  opacity: 0.6;
}

.exec-task-completed .exec-task-title {
  text-decoration: line-through;
}

/* Custom Checkbox */
.exec-task-check {
  flex-shrink: 0;
  padding-top: 0.125rem;
}

.exec-task-check input {
  display: none;
}

.exec-task-check label {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--base-light);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.exec-task-check label::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.exec-task-check input:checked + label {
  background: #10B981;
  border-color: #10B981;
}

.exec-task-check input:checked + label::after {
  opacity: 1;
}

.exec-task-check label:hover {
  border-color: var(--highlight-base);
}

.exec-task-content {
  flex: 1;
  min-width: 0;
}

.exec-task-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--deep-base);
  margin-bottom: 0.375rem;
}

.exec-task-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.exec-task-project {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--content-base);
}

.exec-task-project svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.exec-task-due {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--content-lighter);
}

.exec-due-urgent {
  color: #EF4444;
  font-weight: 600;
}

.exec-due-done {
  color: #10B981;
}

.exec-task-priority {
  flex-shrink: 0;
}

.exec-priority-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 4px;
  background: var(--ground-lighter);
  color: var(--content-base);
}

.exec-priority-high {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.exec-priority-medium {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.exec-check-icon {
  width: 24px;
  height: 24px;
  color: #10B981;
}

/* ============================================
   DONUT CHART
   ============================================ */
.exec-donut-container {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.exec-donut-chart {
  position: relative;
  width: 160px;
  height: 160px;
}

.exec-donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.exec-donut-segment {
  transition: stroke-dasharray 0.6s ease;
}

.exec-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.exec-donut-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--deep-base);
  line-height: 1;
}

.exec-donut-label {
  display: block;
  font-size: 0.75rem;
  color: var(--content-lighter);
  margin-top: 0.25rem;
}

.exec-donut-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.exec-legend-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.exec-legend-item:hover {
  background: var(--ground-lightest);
}

.exec-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.exec-legend-label {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--content-base);
}

.exec-legend-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--deep-base);
}

/* ============================================
   TEAM LIST
   ============================================ */
.exec-team-list {
  padding: 0.5rem;
}

.exec-team-member {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.exec-team-member:hover {
  background: var(--ground-lightest);
}

.exec-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  position: relative;
  flex-shrink: 0;
}

.exec-member-status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
}

.exec-status-online {
  background: #10B981;
}

.exec-status-away {
  background: #F59E0B;
}

.exec-status-offline {
  background: var(--base-light);
}

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

.exec-member-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--deep-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exec-member-role {
  display: block;
  font-size: 0.75rem;
  color: var(--content-lighter);
}

.exec-member-project {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--highlight-base);
  background: rgba(var(--highlight-base-rgb, 59, 130, 246), 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* ============================================
   QUICK ACTIONS
   ============================================ */
.exec-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 1rem;
}

.exec-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem;
  background: var(--ground-lightest);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.exec-action-btn:hover {
  background: var(--ground-lighter);
  transform: translateY(-2px);
}

.exec-action-btn span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--content-base);
}

.exec-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.exec-action-icon svg {
  width: 20px;
  height: 20px;
}

.exec-action-time { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.exec-action-task { background: linear-gradient(135deg, #667eea, #764ba2); }
.exec-action-project { background: linear-gradient(135deg, #f093fb, #f5576c); }
.exec-action-report { background: linear-gradient(135deg, #43e97b, #38f9d7); }

/* ============================================
   PROJECTS GRID
   ============================================ */
.exec-projects-card {
  margin-top: 0;
}

.exec-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  padding: 1.5rem;
}

.exec-project-card {
  background: var(--ground-lightest);
  border-radius: 14px;
  padding: 1.25rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.exec-project-card:hover {
  background: white;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.1);
  transform: translateY(-4px);
}

.exec-project-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.exec-project-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.exec-project-icon svg {
  width: 22px;
  height: 22px;
}

.exec-project-status {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.exec-status-active {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.exec-status-planning {
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}

.exec-status-hold {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.exec-project-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-base);
  margin: 0 0 0.375rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exec-project-desc {
  font-size: 0.8125rem;
  color: var(--content-lighter);
  margin: 0 0 1rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exec-project-progress {
  margin-bottom: 1rem;
}

.exec-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--content-base);
  margin-bottom: 0.5rem;
}

.exec-progress-header span:last-child {
  font-weight: 600;
  color: var(--deep-base);
}

.exec-progress-bar {
  height: 6px;
  background: var(--ground-lighter);
  border-radius: 3px;
  overflow: hidden;
}

.exec-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10B981, #34D399);
  border-radius: 3px;
  transition: width 0.6s ease;
}

.exec-progress-planning {
  background: linear-gradient(90deg, #3B82F6, #60A5FA);
}

.exec-progress-hold {
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.exec-project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--ground-lighter);
}

.exec-project-team {
  display: flex;
  align-items: center;
}

.exec-mini-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 600;
  color: white;
  border: 2px solid white;
  margin-left: -6px;
}

.exec-mini-avatar:first-child {
  margin-left: 0;
}

.exec-mini-more {
  font-size: 0.5rem;
  color: var(--content-lighter);
  margin-left: 0.375rem;
}

.exec-project-deadline {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--content-lighter);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1280px) {
  .exec-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .exec-main-grid {
    grid-template-columns: 1fr;
  }

  .exec-column-secondary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .exec-projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .exec-dashboard {
    padding: 1rem;
  }

  .exec-welcome {
    margin-bottom: 1.5rem;
  }

  .exec-welcome-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .exec-welcome-actions {
    width: 100%;
  }

  .exec-header-btn {
    flex: 1;
    justify-content: center;
    padding: 0.75rem 1rem;
  }

  .exec-welcome-date {
    text-align: left;
  }

  .exec-welcome-title {
    font-size: 1.5rem;
  }

  .exec-kpi-grid {
    grid-template-columns: 1fr;
  }

  .exec-column-secondary {
    grid-template-columns: 1fr;
  }

  .exec-projects-grid {
    grid-template-columns: 1fr;
  }

  .exec-bar-chart {
    height: 140px;
  }

  .exec-quick-actions {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 480px) {
  .exec-quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .exec-task-item {
    flex-wrap: wrap;
  }

  .exec-task-priority {
    width: 100%;
    margin-top: 0.5rem;
    padding-left: 2.25rem;
  }
}
/* ============================================
   PROJECT DASHBOARD - Executive Design
   ============================================
   Premium dashboard for individual projects
   ============================================ */

/* ============================================
   HEADER
   ============================================ */

.proj-dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 0;
  margin-bottom: 1rem;
}

.proj-dash-title-section {
  flex: 1;
}

.proj-dash-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--deep-base);
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.proj-dash-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.proj-dash-code {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--content-base);
  background: var(--ground-lighter);
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
}

.proj-dash-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.proj-dash-badge-default {
  background: var(--base-lighter);
  color: var(--content-base);
}

.proj-dash-badge-active {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.proj-dash-badge-inactive {
  background: var(--base-lighter);
  color: var(--content-lighter);
}

.proj-dash-badge-paused {
  background: rgba(245, 158, 11, 0.15);
  color: #D97706;
}

.proj-dash-badge-stopped {
  background: rgba(239, 68, 68, 0.15);
  color: #DC2626;
}

.proj-dash-badge-cycle {
  background: rgba(59, 130, 246, 0.15);
  color: #2563EB;
}

.proj-dash-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.proj-dash-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.proj-dash-actions .btn svg {
  width: 16px;
  height: 16px;
}

.proj-dash-actions .btn-primary {
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  color: white;
  border: none;
}

.proj-dash-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.3);
}

.proj-dash-actions .btn-secondary {
  background: white;
  color: var(--content-base);
  border: 1px solid var(--base-lighter);
}

.proj-dash-actions .btn-secondary:hover {
  border-color: var(--highlight-base);
  color: var(--highlight-base);
}

/* ============================================
   KPI METRICS ROW
   ============================================ */

.proj-dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.proj-dash-metric-card {
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid var(--base-lightest);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.2s ease;
}

.proj-dash-metric-card:hover {
  border-color: var(--highlight-lighter);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.proj-dash-metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proj-dash-metric-icon svg {
  width: 20px;
  height: 20px;
}

.proj-metric-deliverables {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
  color: #8B5CF6;
}

.proj-metric-tasks {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
  color: #F59E0B;
}

.proj-metric-team {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
  color: #10B981;
}

.proj-metric-hours {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
  color: #3B82F6;
}

.proj-metric-labor {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.05));
  color: #EC4899;
}

.proj-metric-components {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(20, 184, 166, 0.05));
  color: #14B8A6;
}

.proj-metric-activities {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.05));
  color: #6366F1;
}

.proj-metric-drawings {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.05));
  color: #A855F7;
}

.proj-dash-metric-content {
  display: flex;
  flex-direction: column;
}

.proj-dash-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--deep-base);
  line-height: 1;
}

.proj-dash-metric-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--content-base);
  margin-top: 0.25rem;
}

.proj-dash-metric-trend {
  font-size: 0.6875rem;
  font-weight: 600;
}

.proj-trend-warning {
  color: #F59E0B;
}

/* ============================================
   MAIN GRID LAYOUT
   ============================================ */

.proj-dash-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.25rem;
}

.proj-dash-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.proj-dash-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ============================================
   CARDS BASE
   ============================================ */

.proj-dash-card {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--base-lightest);
  overflow: hidden;
}

.proj-dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--base-lightest);
}

.proj-dash-card-header h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--deep-base);
  margin: 0;
}

.proj-dash-card-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--content-base);
  background: var(--ground-lighter);
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
}

.proj-card-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--highlight-base);
  text-decoration: none;
}

.proj-card-link:hover {
  color: var(--highlight-dark);
}

.proj-card-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--base-lightest);
  background: var(--ground-lightest);
}

.proj-view-all-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--highlight-base);
  text-decoration: none;
}

.proj-view-all-link:hover {
  color: var(--highlight-dark);
  text-decoration: underline;
}

/* ============================================
   SCHEDULE CARD
   ============================================ */

.proj-schedule-content {
  padding: 1.25rem;
}

.proj-schedule-dates {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.proj-schedule-date {
  text-align: center;
}

.proj-schedule-date-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--content-lighter);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.proj-schedule-date-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--deep-base);
}

.proj-schedule-arrow {
  color: var(--base-light);
}

.proj-schedule-arrow svg {
  width: 24px;
  height: 24px;
}

.proj-schedule-progress {
  margin-top: 1rem;
}

.proj-schedule-progress-bar {
  height: 8px;
  background: var(--ground-lighter);
  border-radius: 4px;
  overflow: hidden;
}

.proj-schedule-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--highlight-base), var(--highlight-light));
  border-radius: 4px;
  transition: width 0.5s ease;
}

.proj-schedule-progress-info {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--content-base);
}

.proj-schedule-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--content-lighter);
}

.proj-schedule-empty p {
  margin: 0 0 1rem 0;
}

/* ============================================
   DELIVERABLES CARD
   ============================================ */

.proj-deliverables-empty {
  padding: 3rem 1.25rem;
  text-align: center;
}

.proj-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  background: var(--ground-lighter);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--content-lighter);
}

.proj-empty-icon svg {
  width: 32px;
  height: 32px;
}

.proj-deliverables-empty h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-base);
  margin: 0 0 0.5rem 0;
}

.proj-deliverables-empty p {
  font-size: 0.875rem;
  color: var(--content-base);
  margin: 0 0 1.25rem 0;
}

.proj-deliverables-list {
  padding: 0.5rem 0;
}

.proj-deliverable-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  transition: background 0.15s ease;
}

.proj-deliverable-item:hover {
  background: var(--ground-lightest);
}

.proj-deliverable-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.proj-deliverable-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--deep-base);
}

.proj-deliverable-category {
  font-size: 0.75rem;
  color: var(--content-lighter);
}

.proj-deliverable-status {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.proj-status-default {
  background: var(--base-lighter);
  color: var(--content-base);
}

.proj-status-active {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.proj-status-inactive {
  background: var(--base-lighter);
  color: var(--content-lighter);
}

.proj-status-paused {
  background: rgba(245, 158, 11, 0.15);
  color: #D97706;
}

.proj-status-stopped {
  background: rgba(239, 68, 68, 0.15);
  color: #DC2626;
}

/* ============================================
   TEAM CARD
   ============================================ */

.proj-team-list {
  padding: 0.5rem 0;
}

.proj-team-member {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
}

.proj-team-member-info {
  display: flex;
  flex-direction: column;
}

.proj-team-member-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--deep-base);
}

.proj-team-member-role {
  font-size: 0.75rem;
  color: var(--content-lighter);
}

.proj-team-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--content-lighter);
}

.proj-team-empty p {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
}

/* ============================================
   STATS CARD
   ============================================ */

.proj-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--base-lightest);
}

.proj-stat-item {
  padding: 1.25rem;
  text-align: center;
  background: white;
}

.proj-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--content-lighter);
  line-height: 1;
}

.proj-stat-value.proj-stat-active {
  color: #10B981;
}

.proj-stat-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--content-lighter);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.375rem;
}

/* ============================================
   TASKS CARD
   ============================================ */

.proj-tasks-list {
  padding: 0.5rem 0;
}

.proj-task-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
}

.proj-task-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--base-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.proj-task-checkbox svg {
  width: 12px;
  height: 12px;
}

.proj-task-completed {
  background: #10B981;
  border-color: #10B981;
  color: white;
}

.proj-task-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.proj-task-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--deep-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proj-task-title.proj-task-done {
  color: var(--content-lighter);
  text-decoration: line-through;
}

.proj-task-due {
  font-size: 0.6875rem;
  color: var(--content-lighter);
}

.proj-tasks-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--content-lighter);
}

.proj-tasks-empty p {
  margin: 0;
  font-size: 0.875rem;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

.btn-outline {
  background: transparent;
  color: var(--highlight-base);
  border: 1px solid var(--highlight-base);
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  background: var(--highlight-base);
  color: white;
}

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

@media (max-width: 1400px) {
  .proj-dash-metrics {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1100px) {
  .proj-dash-metrics {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .proj-dash-grid {
    grid-template-columns: 1fr;
  }

  .proj-dash-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .proj-dash-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .proj-dash-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .proj-dash-metrics {
    grid-template-columns: 1fr;
  }

  .proj-dash-title {
    font-size: 1.375rem;
  }

  .proj-schedule-dates {
    flex-direction: column;
    gap: 0.75rem;
  }

  .proj-schedule-arrow {
    transform: rotate(90deg);
  }
}

/* ============================================
   TREND COLORS
   ============================================ */

.proj-trend-success {
  color: #10B981;
}

.proj-trend-danger {
  color: #EF4444;
}

/* ============================================
   FLAG & MODE BADGES
   ============================================ */

.proj-dash-badge-mode {
  background: rgba(107, 114, 128, 0.15);
  color: #6B7280;
}

.proj-dash-badge-flag-white {
  background: var(--base-lighter);
  color: var(--content-lighter);
}

.proj-dash-badge-flag-red {
  background: rgba(239, 68, 68, 0.15);
  color: #DC2626;
}

.proj-dash-badge-flag-red svg {
  width: 12px;
  height: 12px;
}

.proj-dash-badge-flag-orange {
  background: rgba(249, 115, 22, 0.15);
  color: #EA580C;
}

.proj-dash-badge-flag-orange svg {
  width: 12px;
  height: 12px;
}

.proj-dash-badge-flag-yellow {
  background: rgba(234, 179, 8, 0.15);
  color: #CA8A04;
}

.proj-dash-badge-flag-yellow svg {
  width: 12px;
  height: 12px;
}

.proj-dash-badge-flag-green {
  background: rgba(34, 197, 94, 0.15);
  color: #16A34A;
}

.proj-dash-badge-flag-green svg {
  width: 12px;
  height: 12px;
}

.proj-dash-badge-flag-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #2563EB;
}

.proj-dash-badge-flag-blue svg {
  width: 12px;
  height: 12px;
}

.proj-dash-badge-location {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
}

.proj-dash-badge-location svg {
  width: 12px;
  height: 12px;
}

/* ============================================
   SCHEDULE EXTRAS
   ============================================ */

.proj-schedule-date-actual {
  display: block;
  font-size: 0.6875rem;
  color: var(--highlight-base);
  margin-top: 0.25rem;
}

.proj-progress-behind {
  background: linear-gradient(90deg, #F59E0B, #FBBF24) !important;
}

/* ============================================
   SCHEDULE HEALTH INDICATORS
   ============================================ */

.proj-schedule-health {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--base-lightest);
}

.proj-health-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.625rem 1rem;
  background: var(--ground-lightest);
  border-radius: 8px;
  min-width: 80px;
}

.proj-health-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--content-lighter);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.proj-health-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--deep-base);
}

.proj-health-danger {
  background: rgba(239, 68, 68, 0.1);
}

.proj-health-danger .proj-health-value {
  color: #DC2626;
}

.proj-health-success {
  background: rgba(16, 185, 129, 0.1);
}

.proj-health-success .proj-health-value {
  color: #059669;
}

.proj-health-warning {
  background: rgba(245, 158, 11, 0.1);
}

.proj-health-warning .proj-health-value {
  color: #D97706;
}

.proj-health-info {
  background: rgba(59, 130, 246, 0.1);
}

.proj-health-info .proj-health-value {
  color: #2563EB;
}

/* ============================================
   TASKS BREAKDOWN
   ============================================ */

.proj-breakdown-content {
  padding: 1.25rem;
}

.proj-breakdown-chart {
  margin-bottom: 1rem;
}

.proj-breakdown-bars {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ground-lighter);
}

.proj-breakdown-bar {
  height: 100%;
  transition: width 0.3s ease;
}

.proj-bar-completed {
  background: #10B981;
}

.proj-bar-progress {
  background: #3B82F6;
}

.proj-bar-received {
  background: #8B5CF6;
}

.proj-bar-overdue {
  background: #EF4444;
}

.proj-bar-default {
  background: #9CA3AF;
}

.proj-breakdown-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.625rem;
}

.proj-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.proj-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.proj-dot-completed {
  background: #10B981;
}

.proj-dot-progress {
  background: #3B82F6;
}

.proj-dot-received {
  background: #8B5CF6;
}

.proj-dot-overdue {
  background: #EF4444;
}

.proj-dot-priority {
  background: #F59E0B;
}

.proj-legend-label {
  color: var(--content-base);
  flex: 1;
}

.proj-legend-value {
  font-weight: 600;
  color: var(--deep-base);
}

/* ============================================
   DELIVERABLES STATUS BAR
   ============================================ */

.proj-deliverables-status-bar {
  display: flex;
  height: 6px;
  margin: 0;
  background: var(--ground-lighter);
}

.proj-del-bar {
  height: 100%;
  transition: width 0.3s ease;
}

.proj-del-active {
  background: #10B981;
}

.proj-del-paused {
  background: #F59E0B;
}

.proj-del-stopped {
  background: #EF4444;
}

.proj-del-default {
  background: #9CA3AF;
}

/* ============================================
   CLOCK STATUS CARD
   ============================================ */

.proj-clock-content {
  padding: 1.25rem;
}

.proj-clock-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}

.proj-clock-in {
  background: rgba(16, 185, 129, 0.1);
}

.proj-clock-out {
  background: var(--ground-lighter);
}

.proj-clock-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.proj-clock-in .proj-clock-indicator {
  background: #10B981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  animation: pulse-green 2s infinite;
}

.proj-clock-out .proj-clock-indicator {
  background: var(--content-lighter);
}

@keyframes pulse-green {
  0%, 100% {
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  }
  50% {
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.8);
  }
}

.proj-clock-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.proj-clock-in .proj-clock-label {
  color: #059669;
}

.proj-clock-out .proj-clock-label {
  color: var(--content-lighter);
}

.proj-clock-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.proj-clock-detail {
  text-align: center;
  padding: 0.75rem;
  background: var(--ground-lightest);
  border-radius: 8px;
}

.proj-clock-detail-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--deep-base);
  line-height: 1;
}

.proj-clock-detail-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--content-lighter);
  margin-top: 0.25rem;
}

/* ============================================
   BUDGET CARD
   ============================================ */

.proj-budget-content {
  padding: 1.25rem;
}

.proj-budget-item {
  margin-bottom: 1rem;
}

.proj-budget-item:last-of-type {
  margin-bottom: 0;
}

.proj-budget-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}

.proj-budget-label {
  font-size: 0.8125rem;
  color: var(--content-base);
}

.proj-budget-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--deep-base);
}

.proj-budget-bar {
  height: 8px;
  background: var(--ground-lighter);
  border-radius: 4px;
  overflow: hidden;
}

.proj-budget-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.proj-budget-labor {
  background: linear-gradient(90deg, #EC4899, #F472B6);
}

.proj-budget-material {
  background: linear-gradient(90deg, #10B981, #34D399);
}

.proj-budget-equipment {
  background: linear-gradient(90deg, #8B5CF6, #A78BFA);
}

.proj-budget-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--base-lightest);
  font-size: 0.75rem;
  color: var(--content-lighter);
  text-align: center;
}

/* ============================================
   TEAM EXTRAS
   ============================================ */

.proj-team-days {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--highlight-base);
  background: rgba(59, 130, 246, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.proj-team-summary {
  padding: 0.75rem 1.25rem;
  background: var(--ground-lightest);
  font-size: 0.75rem;
  color: var(--content-base);
  text-align: center;
}

.proj-team-avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--highlight-lighter);
  color: var(--highlight-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* ============================================
   TASK EXTRAS
   ============================================ */

.proj-task-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.proj-task-priority {
  font-weight: 700;
  color: #F59E0B;
  font-size: 0.875rem;
}

.proj-task-flag {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.proj-flag-red {
  background: #EF4444;
}

.proj-flag-orange {
  background: #F97316;
}

.proj-task-default {
  border-color: var(--base-light);
}

.proj-task-in_progress {
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.1);
}

.proj-task-received {
  border-color: #8B5CF6;
  background: rgba(139, 92, 246, 0.1);
}

.proj-task-past_due {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.1);
}

/* ============================================
   CATEGORIES BREAKDOWN
   ============================================ */

.proj-categories-list {
  padding: 0.5rem 0;
}

.proj-category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--base-lightest);
}

.proj-category-item:last-child {
  border-bottom: none;
}

.proj-category-name {
  font-size: 0.8125rem;
  color: var(--deep-base);
}

.proj-category-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--highlight-base);
  background: rgba(59, 130, 246, 0.1);
  padding: 0.25rem 0.625rem;
  border-radius: 12px;
}
/* ============================================
   COMPANY PROFILE - Executive Design
   ============================================
   Elegant, refined, professional aesthetic
   Business Account Dashboard
   ============================================ */

.company-profile {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ============================================
   PROFILE HEADER CARD
   ============================================ */
.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: white;
  border-radius: 16px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--base-lighter);
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--highlight-base), var(--highlight-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(var(--highlight-base-rgb, 59, 130, 246), 0.3);
  overflow: hidden;
}

.profile-avatar img,
.profile-avatar .profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* Avatar wrapper from helper - override default .avatar styles */
.profile-avatar .avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border-radius: 0;
  color: white !important;
}

.profile-avatar .avatar .initials,
.profile-avatar .initials {
  font-size: 1.75rem;
  font-weight: 600;
  color: white !important;
  text-transform: uppercase;
  line-height: 1;
}

/* ============================================
   NAVIGATION BAR
   ============================================ */
.profile-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.profile-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--base-base);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.profile-nav-back:hover {
  color: var(--highlight-base);
  background: var(--highlight-lightest);
}

.profile-nav-back svg {
  width: 16px;
  height: 16px;
}

.profile-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.profile-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--deep-base);
  line-height: 1.2;
  margin: 0;
}

.profile-type {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--base-base);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.profile-type-badge {
  padding: 0.25rem 0.625rem;
  background: var(--highlight-lightest);
  color: var(--highlight-dark);
  border-radius: 4px;
  font-size: 0.6875rem;
}

.profile-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* ============================================
   STATS GRID
   ============================================ */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--base-lighter);
  gap: 1px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--base-lighter);
}

.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: white;
  transition: background 0.2s ease;
  text-decoration: none;
}

.profile-stat:hover {
  background: var(--ground-lightest);
}

.profile-stat-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--highlight-lightest);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  color: var(--highlight-base);
}

.profile-stat-icon svg {
  width: 20px;
  height: 20px;
}

.profile-stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--deep-base);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.profile-stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--base-base);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.5rem;
}

/* ============================================
   QUICK LINKS GRID
   ============================================ */
.profile-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.profile-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--base-lighter);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.profile-link:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: var(--highlight-base);
}

.profile-link-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--highlight-base);
  border-radius: 12px;
  color: white;
  flex-shrink: 0;
}

.profile-link-icon svg {
  width: 24px;
  height: 24px;
}

.profile-link-content {
  flex: 1;
  min-width: 0;
}

.profile-link-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--deep-base);
  margin-bottom: 0.25rem;
}

.profile-link-desc {
  font-size: 0.75rem;
  color: var(--base-base);
  line-height: 1.4;
}

.profile-link-arrow {
  width: 20px;
  height: 20px;
  color: var(--base-light);
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

.profile-link:hover .profile-link-arrow {
  transform: translateX(4px);
  color: var(--highlight-base);
}

/* ============================================
   INFO SECTION
   ============================================ */
.profile-section {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--base-lighter);
}

.profile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: white;
  border-bottom: 1px solid var(--base-lighter);
}

.profile-section-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--deep-base);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}

.profile-section-title svg {
  width: 18px;
  height: 18px;
  color: var(--highlight-base);
}

.profile-section-content {
  padding: 0;
}

.profile-info-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--base-lighter);
  transition: background 0.2s ease;
}

.profile-info-row:last-child {
  border-bottom: none;
}

.profile-info-row:hover {
  background: var(--ground-lightest);
}

.profile-info-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--base-base);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.profile-info-value {
  font-size: 0.9375rem;
  color: var(--deep-base);
  font-weight: 500;
}

.profile-info-value.muted {
  color: var(--base-light);
  font-style: italic;
}

/* ============================================
   PERSONAL ACCOUNT VARIANT
   ============================================ */
.company-profile.is-personal .profile-avatar {
  background: linear-gradient(135deg, var(--content-base), var(--content-dark));
}

.company-profile.is-personal .profile-type-badge {
  background: var(--content-lightest);
  color: var(--content-dark);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .profile-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .profile-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
  }

  .profile-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .profile-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .profile-links {
    grid-template-columns: 1fr;
  }

  .profile-info-row {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
}

@media (max-width: 480px) {
  .profile-stats {
    grid-template-columns: 1fr 1fr;
  }

  .profile-stat {
    padding: 1rem;
  }

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

  .profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
  }

  .profile-avatar .initials {
    font-size: 1.25rem;
  }

  .profile-name {
    font-size: 1.25rem;
  }
}
/* We need to override trix.css's image gallery styles to accommodate the
  <action-text-attachment> element we wrap around attachments. Otherwise,
  images in galleries will be squished by the max-width: 33%; rule.
*/

.link_to_embed {
  white-space: normal;
  margin-top: 1rem;

  [data-behavior='embed_url'] {
    display: block;
  }
}

@media (min-width: 768px) {
  .link_to_embed {
    margin-left: 1rem;

    [data-behavior='embed_url'] {
      margin-left: 0.75rem;
      display: inline-block;
    }
  }
}

.trix-content {
  img {
    display: inline-block;
    max-width: 100%;
    height: auto;
  }

  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      > action-text-attachment,
      > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
    }
  }

  .embed {
    display: inline-block;
    line-height: 1;
    margin: 1em 0 !important;
    padding: 0 !important;
    width: 100%;
  }

  iframe, twitter-widget {
    display: inline-block !important;
  }
}

/* Trix attachment formatting */
.attachment--preview {
  margin: 0.6em 0;
  text-align: center;
  width: 100%;
}

/* Tribute styles */
.tribute-container {
  border-radius: 4px;
  border: 1px solid var(--background-darker);
  box-shadow: 0 0 4px var(--background-darker), 0 5px 20px var(--background-dark);

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  li {
    background: var(--background-base);
    padding: 0.2em 1em;
    min-width: 15em;
    max-width: 100%;
  }

  .highlight {
    background-color: #3b82f6;
    color: var(--background-base);

    span {
      font-weight: bold;
    }
  }
}

/* Tweet embeds */
blockquote.twitter-tweet {
    display: inline-block;
    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    border-color: var(--background-dark) var(--background-darker) var(--content-lighter);
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 3px var(--background-darker);
    margin: 10px 5px;
    padding: 0 16px 16px;
    max-width: 468px
}

blockquote.twitter-tweet p {
    font-size: 16px;
    font-weight: normal;
    line-height: 20px
}

blockquote.twitter-tweet a {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
    outline: 0 none
}

blockquote.twitter-tweet a:hover,blockquote.twitter-tweet a:focus {
    text-decoration: underline
}

blockquote.twitter-tweet {
    position: relative;
    background: var(--background-base);
    padding: 72px 20px 28px !important;
    box-shadow: none;
    border: 1px solid var(--background-darker);
    border-radius: 4px;
    margin: 0;
    font-style: normal;
    text-align: left;
    width: 500px;
    max-width: 100%
}

@media (max-width: 369px) {
    blockquote.twitter-tweet {
        padding:60px 17.5px 21.5px !important
    }
}

blockquote.twitter-tweet:before {
    content: 'Follow';
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 5.5px 12px 6.5px 33px;
    background: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.89 7.012c.808-.496 1.343-1.173 1.605-2.034-.786.417-1.569.703-2.351.861-.703-.756-1.593-1.14-2.66-1.14-1.043 0-1.924.366-2.643 1.078-.715.717-1.076 1.588-1.076 2.605 0 .309.039.585.117.819-3.076-.105-5.622-1.381-7.628-3.837-.34.601-.51 1.213-.51 1.846 0 1.301.549 2.332 1.645 3.089-.625-.053-1.176-.211-1.645-.47 0 .929.273 1.705.82 2.388.549.676 1.254 1.107 2.115 1.291-.312.08-.641.118-.979.118-.312 0-.533-.026-.664-.083.23.757.664 1.371 1.291 1.841.625.472 1.344.721 2.152.743-1.332 1.045-2.855 1.562-4.578 1.562-.422 0-.721-.006-.902-.038 1.697 1.102 3.586 1.649 5.676 1.649 2.139 0 4.029-.542 5.674-1.626 1.645-1.078 2.859-2.408 3.639-3.974.784-1.564 1.172-3.192 1.172-4.892v-.468c.758-.57 1.371-1.212 1.84-1.921-.68.293-1.383.492-2.11.593z' fill='%23ccc'/%3E%3C/svg%3E") 9px center no-repeat;
    background-size: 21px;
    border: 1px solid var(--content-lighter);
    border-radius: 4px;
    color: var(--content-lighter);
    font-size: 14px
}

@media (max-width: 369px) {
    blockquote.twitter-tweet:before {
        display:none
    }
}

blockquote.twitter-tweet:after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
    background: var(--background-dark) url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 12c2.21 0 4-1.795 4-4 0-2.21-1.79-4-4-4s-4 1.79-4 4c0 2.205 1.79 4 4 4zm0 2c-2.665 0-8 1.335-8 4v2h16v-2c0-2.665-5.335-4-8-4z' fill='%23444'/%3E%3C/svg%3E") center center no-repeat;
    border-radius: 4px
}

@media (max-width: 369px) {
    blockquote.twitter-tweet:after {
        top:17.5px;
        left: 17.5px
    }
}

blockquote.twitter-tweet p {
    white-space: pre-wrap;
    margin: 0 0 28px
}

@media (max-width: 369px) {
    blockquote.twitter-tweet p {
        font-size:14px;
        margin-bottom: 16px
    }
}

blockquote.twitter-tweet a {
    border: 0;
    box-shadow: none;
    color: var(--highlight-dark)
}

blockquote.twitter-tweet>a {
    color: var(--content-light)
}

trix-editor {
  /* form-control styles expanded inline */
  display: block;
  width: 100%;
  color: var(--base-base);
  border: 1px solid var(--background-darker);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 500;
  line-height: 1.375;
  transition: all 300ms ease-in-out;
  background-color: var(--background-base);
  /* trix-specific overrides */
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

trix-editor:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--highlight-base);
  border-color: transparent;
}

trix-toolbar {
  /* form-control styles expanded inline */
  display: block;
  width: 100%;
  color: var(--base-base);
  border: 1px solid var(--background-darker);
  border-radius: 0.5rem;
  font-weight: 500;
  line-height: 1.375;
  transition: all 300ms ease-in-out;
  background-color: var(--background-base);
  /* trix-specific overrides */
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0;
}
trix-toolbar * {
  box-sizing: border-box;
}
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}
trix-toolbar .trix-button-group {
  display: flex;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: var(--content-dark);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button.trix-active {
  background: var(--highlight-lighter);
  color: var(--background-contrast);
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: var(--content-lighter);
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.2em;
  height: 2.0em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}
trix-toolbar .trix-button--icon-attach::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
  top: 8%;
  bottom: 4%;
}
trix-toolbar .trix-button--icon-bold::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-italic::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-link::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-strike::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-quote::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-code::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-undo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-redo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-dialogs {
  position: relative;
}
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: var(--background-base);
  box-shadow: 0 0.3em 1em var(--content-lighter);
  border-top: 2px solid var(--content-light);
  border-radius: 5px;
  z-index: 5;
}
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid var(--content-lighter);
  background-color: var(--background-base);
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: var(--danger-base) 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
  /* btn btn-small btn-primary styles expanded inline */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: 0.375rem;
  background-color: var(--highlight-base);
  color: var(--highlight-contrast);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms ease-in-out;
}
trix-toolbar .trix-button--dialog:hover {
  background-color: var(--highlight-dark);
}
trix-toolbar .trix-dialog--link {
  max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
  width: 100%;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group .trix-button--dialog:last-of-type {
  margin-left: 0.25rem;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-dialog__link-fields {
    display: block;
  }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    margin-top: 0.5rem;
  }
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}
trix-editor .trix-button-group {
  display: inline-flex;
}
trix-editor .trix-button {
  position: relative;
  float: left;
  color: var(--content-base);
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid var(--content-lighter);
}
trix-editor .trix-button.trix-active {
  background: var(--highlight-lighter);
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: var(--background-base);
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px var(--background-darker);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: var(--content-dark);
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}
trix-editor .attachment__metadata-container {
  position: relative;
}
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: var(--background-base);
  background-color: var(--deep-dark);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
}
.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid var(--content-lighter);
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir=rtl] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: var(--background-dark);
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: ' · ';
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: var(--content-base);
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: var(--content-dark);
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid var(--content-lighter);
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;

}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;

}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
.bg-dark {
    background-color: var(--deep-dark); /* Dark background color */
}

.divrow {
    height: 12rem; /* Set a fixed height for the Components section */
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
    overflow-x: hidden; /* Enable vertical scrolling if content overflows */
    margin-bottom: 0.5rem; /* Add some space between buttons */
}

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

.direction-rtl {
    direction: rtl;
}

  
.component-item {
  display: flex;
  align-items: center;
  color: var(--base-contrast);
  font-size: 12px;
}

.component-item.active {
  background-color: var(--content-base);
  color: var(--base-dark);
  font-weight: 700;
  border-radius: 0;
}


.color-bar {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}

.deliverable-header {
  font-weight: bold;
  color: var(--base-contrast);
  font-size: 14px;
}

.components-container {
  margin-top: 1rem;
  border-top: 1px solid var(--base-dark);
}




.transition-transform {
  transition-property: transform;
}

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

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.translate-x-0 {
  transform: translateX(0);
}

.translate-x-full {
  transform: translateX(100%);
}


/* Opacity overlay for new deliverable and component modal in takeoff */
#opacity-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 40; /* Ensure it is below the modals but above other content */
  display: none; /* Initially hidden */
}

#pdf-container {
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scrollbars if the content overflows */
  display: flex;
  justify-content: center; /* Center the content horizontally */
  align-items: center; /* Center the content vertically */
  background-color: var(--base-base);
}

  #pdf-canvas {
    width: auto; /* Maintain aspect ratio */
    height: 100%;
    object-fit: contain; /* Ensure the entire content fits within the canvas */
  }


  /* Aside */
  #pdf-sidebar {
    transition: transform 0.3s ease-in-out;
    background-color: var(--base-base);
  }

  .flex-1-pdf {
    flex: 1 1 0%;
    background-color: var(--deep-darker);
  }

  .with-aside {
    margin-left: 8.33%; /* Adjust based on the width of pdf-sidebar */
    background-color: var(--base-base);
  }


  #pdf-sidebar > * {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .sidebar-item {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    margin: 0;
    background-color: var(--content-dark);
    position: relative;
  }

  .sidebar-item:hover {
    color: var(--background-light);
    background-color: var(--deep-base);
  }

  .sidebar-item.active {
    background-color: var(--deep-base);
    border-color: var(--content-base);
  }


  .tabs-item {
    flex: none;
    width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    justify-content: center;
    border: 2px solid transparent;
    margin: 0;
    color: var(--content-light);
    background-color: var(--base-darker);
    position: relative;
  }

  .tabs-item:hover {
    color: var(--background-darker);
    background-color: var(--deep-darker);
  }

  .tabs-item.active {
    background-color: var(--deep-base);
  }





  #scale-selector, #lcd-display {
    width: auto;
    height: 40px;
    flex: none;
    padding: 8px 12px;
    background-color: var(--background-dark);
    border: 2px solid transparent;
  }

  .tooltip {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: var(--deep-dark);
    color: var(--deep-contrast);
    border-radius: 5px;
    white-space: nowrap;
    z-index: 10;
    transition: opacity 0.3s, visibility 0.3s;
    font-size: 12px;
    line-height: 1.2;
  }

  .group:hover .tooltip {
    opacity: 1;
    visibility: visible;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .thumbnail {
    transition: background-color 0.3s ease;
    cursor: pointer;
  }

  .thumbnail:hover {
    background-color: var(--base-base);
  }

  /* Page numbers box */
  .relative.group {
    position: relative;
    display: inline-block;
  }

  #page-number-select {
    padding-right: 35px; /* Adjust the padding to make space for the arrow */
    padding-left: 50px;
  }

  #page-number-select option {
    background-color: var(--content-base);
  }

  .page-number-display {
    margin-left: 10px;
    color: var(--background-light);
  }

  .select-arrow {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--background-light);
  }


  /* Toolbar */
  .toolbar-icon-color {
    filter: invert(93%) sepia(4%) saturate(291%) hue-rotate(177deg) brightness(97%) contrast(90%);
  }

  .toolbar-item {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    margin: 0;
    background-color: var(--content-dark);
    position: relative;
  }

  .toolbar-item:hover {
    color: var(--background-light);
    background-color: var(--base-base);
  }

  .toolbar-item.active {
    background-color: var(--deep-base);
    border-color: var(--content-base);
  }


  /* Ribbon */
  #ribbon-bar {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out, padding 0.2s ease-in-out;
  }
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.transition {
  transition: ease-in-out 0.2s all;
}

/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
          animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  background: #fff;
  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
          box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57,57,57,0.15);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0,0,0,0.1);
}
.numInputWrapper span:active {
  background: rgba(0,0,0,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57,57,57,0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57,57,57,0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0,0,0,0.5);
}
.numInputWrapper:hover {
  background: rgba(0,0,0,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0,0,0,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0,0,0,0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
          box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
      -ms-flex-preferred-size: 14.2857143%;
          flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #569ff7;
          box-shadow: -10px 0 0 #569ff7;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57,57,57,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57,57,57,0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
          box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
          box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57,57,57,0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}