/* ==========================================================================
   Crextio Unified Design System (Bootstrap 5 Edition — 100% Offline)
   Used across Dashboard (index.html) and Salary (salary.html)
   ========================================================================== */

:root {
  --font-main: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;

  --bg-canvas-start: #FDFBF7;
  --bg-canvas-mid: #FFFDF8;
  --bg-canvas-end: #FDE8B3;
  --surface-card: #FFFFFF;
  --surface-card-subtle: #FAF9F6;
  --surface-dark-card: #212126;
  --surface-dark-pill: #1C1C20;
  --accent-yellow: #F5C443;
  --accent-yellow-light: #FDE68A;
  --border-subtle: #F0EEE6;
  --border-dashed: #E4E2DC;
  --text-main: #18181B;
  --text-muted: #71717A;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: var(--font-main);
  background-color: #EAE5D9;
  color: var(--text-main);
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 992px) {
  body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
  }
}

/* ==========================================================================
   Luxury Custom Scrollbar System (Webkit & Standard CSS)
   ========================================================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(168, 162, 158, 0.45);
  border-radius: 9999px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 113, 108, 0.75);
}

/* Firefox standard scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 162, 158, 0.45) transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 196, 67, 0.6);
}

[data-theme="dark"] * {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Hide scrollbars for swipeable horizontal pill carousels on mobile & desktop */
.nav-pill-track,
.filter-pill-track,
.funnel-pipeline-bar,
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
}

.nav-pill-track::-webkit-scrollbar,
.filter-pill-track::-webkit-scrollbar,
.funnel-pipeline-bar::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Sleek micro-scrollbar for tables and offcanvas drawers */
.table-responsive {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 175, 165, 0.5) transparent;
}

.table-responsive::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

.table-responsive::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 9999px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(180, 175, 165, 0.55);
  border-radius: 9999px;
  transition: background 0.2s ease;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: #1C1C20;
}

[data-theme="dark"] .table-responsive {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

[data-theme="dark"] .table-responsive::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb:hover {
  background: #F5C443;
}

.offcanvas-body {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.offcanvas-body::-webkit-scrollbar {
  width: 4px;
}

.offcanvas-body::-webkit-scrollbar-thumb {
  background: rgba(168, 162, 158, 0.35);
  border-radius: 9999px;
}

[data-theme="dark"] .offcanvas-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

/* Master Viewport Container */
.crextio-canvas {
  width: 100%;
  max-width: 1540px;
  min-height: 920px;
  border-radius: 2.5rem;
  background: linear-gradient(135deg, var(--bg-canvas-start) 0%, var(--bg-canvas-mid) 50%, var(--bg-canvas-end) 100%);
  border: 1px solid #EDE7D9;
  box-shadow: 0 25px 60px -15px rgba(210, 185, 140, 0.4);
  padding: 2rem 2.25rem;
  position: relative;
  overflow: clip;
}

#homeSection,
#contributionSection,
#profileSection {
  scroll-margin-top: 30px;
}

/* Ambient Radial Glows */
.glow-orb-top-right {
  position: absolute;
  top: -120px;
  right: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 230, 138, 0.4) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.glow-orb-bottom-right {
  position: absolute;
  bottom: -100px;
  right: -80px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 196, 67, 0.35) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* Brand Badge */
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 1.35rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid #ECE8DC;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: #18181B;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.brand-badge:hover {
  background-color: #FFFFFF;
  color: #000000;
}

.brand-icon-svg {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nav Pill Bar */
.nav-pill-track {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem;
  border-radius: 9999px;
  background-color: rgba(244, 243, 239, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(236, 232, 220, 0.8);
  gap: 0.25rem;
}

.nav-pill-btn {
  border: none;
  background: transparent;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #52525B;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.nav-pill-btn:hover {
  color: #18181B;
  background-color: rgba(0, 0, 0, 0.04);
}

.nav-pill-btn.active {
  background-color: var(--surface-dark-pill);
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  font-weight: 600;
}

/* Quick Action Buttons */
.btn-action-pill {
  height: 40px;
  padding: 0 1rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid #ECE8DC;
  font-size: 0.82rem;
  font-weight: 500;
  color: #27272A;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  cursor: pointer;
}
.btn-action-pill:hover {
  background-color: #FFFFFF;
  color: #000000;
}

.btn-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid #ECE8DC;
  color: #27272A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn-action-icon:hover {
  background-color: #FFFFFF;
  color: #000000;
}

.btn-action-pill.active,
.btn-action-icon.active {
  background-color: var(--surface-dark-pill);
  color: #FFFFFF !important;
  border-color: var(--surface-dark-pill);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-action-pill.active i,
.btn-action-pill.active .text-secondary,
.btn-action-pill.active .text-warning,
.btn-action-icon.active i,
.btn-action-icon.active .text-secondary,
.btn-action-icon.active .text-warning {
  color: var(--accent-yellow) !important;
}

/* ==========================================================================
   Badge Design & Contrast Harmonization (Light Mode)
   ========================================================================== */
/* Soft Success Badges (e.g. Enterprise Tier, Active, Verified, Paid) */
.bg-success[class*="bg-opacity"],
.badge.bg-success[class*="bg-opacity"],
.badge.bg-success-subtle {
  background-color: #DCFCE7 !important;
  color: #15803D !important;
  border: 1px solid #86EFAC !important;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.08);
}

.bg-success[class*="bg-opacity"] *,
.badge.bg-success[class*="bg-opacity"] *,
.badge.bg-success-subtle * {
  color: #15803D !important;
}

/* Soft Warning Badges */
.bg-warning[class*="bg-opacity"],
.badge.bg-warning[class*="bg-opacity"],
.badge.bg-warning-subtle {
  background-color: #FEF3C7 !important;
  color: #B45309 !important;
  border: 1px solid #FCD34D !important;
}

.bg-warning[class*="bg-opacity"] *,
.badge.bg-warning[class*="bg-opacity"] * {
  color: #B45309 !important;
}

/* Soft Primary Badges */
.bg-primary[class*="bg-opacity"],
.badge.bg-primary[class*="bg-opacity"],
.badge.bg-primary-subtle {
  background-color: #DBEAFE !important;
  color: #1D4ED8 !important;
  border: 1px solid #93C5FD !important;
}

.bg-primary[class*="bg-opacity"] *,
.badge.bg-primary[class*="bg-opacity"] * {
  color: #1D4ED8 !important;
}

/* Soft Danger Badges */
.bg-danger[class*="bg-opacity"],
.badge.bg-danger[class*="bg-opacity"],
.badge.bg-danger-subtle {
  background-color: #FEE2E2 !important;
  color: #B91C1C !important;
  border: 1px solid #FCA5A5 !important;
}

.bg-danger[class*="bg-opacity"] *,
.badge.bg-danger[class*="bg-opacity"] * {
  color: #B91C1C !important;
}

.notification-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-yellow);
  box-shadow: 0 0 0 2px #FFFFFF;
}

.user-avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Page Section Headline */
.greeting-title,
.page-title {
  font-family: var(--font-heading);
  font-size: 2.35rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #18181B;
  margin: 0;
}

/* Pipeline Allocation Bar */
.pipeline-bar-wrapper {
  max-width: 620px;
  width: 100%;
}

.pipeline-labels {
  display: grid;
  grid-template-columns: 15% 15% 58% 12%;
  font-size: 0.75rem;
  font-weight: 500;
  color: #52525B;
  margin-bottom: 0.35rem;
  padding: 0 0.25rem;
}

.pipeline-labels span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pipeline-pills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 34px;
}

.pill-segment {
  height: 100%;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  transition: transform 0.15s ease;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pill-segment:hover {
  transform: scale(1.02);
}

.pill-interviews {
  flex: 15;
  background-color: var(--surface-dark-pill);
  color: #FFFFFF;
}

.pill-hired {
  flex: 15;
  background-color: var(--accent-yellow);
  color: #18181B;
  font-weight: 700;
}

.pill-project-time {
  flex: 58;
  background-color: rgba(255, 255, 255, 0.7);
  background-image: repeating-linear-gradient(-45deg, rgba(225, 220, 205, 0.6), rgba(225, 220, 205, 0.6) 3px, transparent 3px, transparent 7px);
  border: 1px solid #E2DDD0;
  color: #3F3F46;
  justify-content: flex-start;
  padding-left: 1.25rem;
}

.pill-output {
  flex: 12;
  border: 1px solid #D5D0C0;
  background-color: rgba(255, 255, 255, 0.4);
  color: #52525B;
}

/* KPI Stat Counters */
.kpi-group {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.kpi-item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.kpi-icon-badge {
  padding: 0.35rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.03);
  color: #52525B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.kpi-figure {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #18181B;
}

.kpi-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #71717A;
  margin-top: 0.2rem;
}

/* Card Styling */
.crextio-card {
  border-radius: 1.5rem;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 12px 36px -10px rgba(220, 200, 160, 0.18);
  padding: 1.5rem;
  transition: all 0.25s ease;
}
.crextio-card:hover {
  box-shadow: 0 16px 40px -10px rgba(220, 200, 160, 0.28);
}

.card-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #FAF9F6;
  border: 1px solid rgba(228, 226, 220, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #52525B;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.card-action-btn:hover {
  background-color: #F4F3EF;
  color: #18181B;
}

/* Employee Profile Card */
.profile-hero {
  position: relative;
  width: 100%;
  height: 250px;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 12px 36px -10px rgba(220, 200, 160, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
}

.profile-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.5s ease;
}
.profile-hero:hover .profile-hero-img {
  transform: scale(1.04);
}

.profile-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.25) 50%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1.25rem;
}

.rate-badge {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Accordion Overrides */
.accordion-crextio .accordion-item {
  border: none;
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.65rem 0;
}
.accordion-crextio .accordion-item:last-child {
  border-bottom: none;
}

.accordion-crextio .accordion-button {
  background: transparent !important;
  color: #27272A;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.2rem 0;
  box-shadow: none !important;
}
.accordion-crextio .accordion-button:not(.collapsed) {
  color: #000000;
}
.accordion-crextio .accordion-button::after {
  background-size: 0.75rem;
  transition: transform 0.2s ease;
}

.device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

/* Weekly Progress Bar Chart */
.chart-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: flex-end;
  height: 140px;
  padding: 1.5rem 0.5rem 0.25rem;
  gap: 0.5rem;
}

.chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
  cursor: pointer;
}

.chart-bar {
  width: 10px;
  border-radius: 9999px;
  background-color: var(--surface-dark-pill);
  transition: all 0.3s ease;
}
.chart-col:hover .chart-bar {
  background-color: #2E2E35;
}

.chart-bar.inactive {
  background-color: rgba(220, 215, 205, 0.7);
}

.chart-bar.highlight {
  background-color: var(--accent-yellow);
  box-shadow: 0 4px 12px rgba(245, 196, 67, 0.4);
}

.floating-pill-tooltip {
  position: absolute;
  top: -26px;
  background-color: var(--accent-yellow);
  color: #18181B;
  font-weight: 700;
  font-size: 0.65rem;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.chart-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #A1A1AA;
  margin-top: 0.65rem;
  text-transform: uppercase;
}
.chart-col.highlight .chart-label {
  color: #18181B;
  font-weight: 700;
}

/* Time Tracker Radial Gauge */
.radial-container {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0.75rem auto;
}

.radial-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.radial-track {
  fill: none;
  stroke: #E8E4D8;
  stroke-width: 8;
  stroke-dasharray: 3 5;
}

.radial-progress {
  fill: none;
  stroke: var(--accent-yellow);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease-out;
}

.radial-center-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.timer-digits {
  font-size: 1.75rem;
  font-family: monospace;
  font-weight: 500;
  color: #18181B;
  letter-spacing: -0.02em;
}

.timer-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: #71717A;
}

.timer-btn-round {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #FAF9F6;
  border: 1px solid rgba(228, 226, 220, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #27272A;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.timer-btn-round:hover {
  background-color: #F2EFE8;
  transform: scale(1.05);
}

.timer-btn-dark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--surface-dark-pill);
  border: none;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.timer-btn-dark:hover {
  background-color: #2E2E35;
  transform: scale(1.05);
}

/* Onboarding Dark Card */
.onboarding-dark-card {
  border-radius: 1.75rem;
  background-color: var(--surface-dark-card);
  color: #FFFFFF;
  border: 1px solid #2E2E36;
  box-shadow: 0 20px 40px -12px rgba(10, 10, 15, 0.4);
  padding: 1.5rem;
}

.task-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.65rem;
  border-radius: 0.85rem;
  transition: background-color 0.2s ease;
  cursor: pointer;
  user-select: none;
}
.task-item-row:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.task-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #2A2A30;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #D4D4D8;
  font-size: 0.85rem;
}

.task-check-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #52525B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.task-item-row.completed .task-check-circle {
  background-color: var(--accent-yellow);
  border-color: var(--accent-yellow);
  color: #18181B;
}

.task-item-row.completed .task-title {
  text-decoration: line-through;
  color: #71717A;
}

/* Timeline & Schedule */
.day-slot-btn {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 0.25rem 0;
  color: #71717A;
  transition: all 0.2s ease;
}
.day-slot-btn:hover {
  color: #18181B;
}

.day-number-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  margin-top: 0.2rem;
  transition: all 0.2s ease;
}

.day-slot-btn.active {
  color: #18181B;
  font-weight: 700;
}
.day-slot-btn.active .day-number-circle {
  background-color: #18181B;
  color: #FFFFFF;
}

.timeline-guideline {
  border-bottom: 1px dashed var(--border-dashed);
}

.event-block-dark {
  position: absolute;
  top: 10px;
  left: 20%;
  width: 48%;
  background-color: var(--surface-dark-pill);
  color: #FFFFFF;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.event-block-dark:hover {
  transform: translateY(-2px);
}

.event-block-light {
  position: absolute;
  top: 105px;
  left: 44%;
  width: 45%;
  background-color: #FFFFFF;
  color: #18181B;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #E4E0D2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.event-block-light:hover {
  transform: translateY(-2px);
}

.avatar-stack {
  display: flex;
  align-items: center;
}
.avatar-stack img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  margin-left: -8px;
}
.event-block-dark .avatar-stack img {
  border-color: var(--surface-dark-pill);
}

/* ==========================================================================
   Mobile-Friendly Left Navigation Drawer (Offcanvas)
   ========================================================================== */
.crextio-offcanvas {
  width: 285px !important;
  background: linear-gradient(180deg, #FDFBF7 0%, #FFFDF8 60%, #FEF3C7 100%);
  border-right: 1px solid #EDE7D9;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.08);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #52525B;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mobile-nav-link:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: #18181B;
}

.mobile-nav-link.active {
  background-color: var(--surface-dark-pill);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Mobile Bottom Navigation Footer
   ========================================================================== */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(253, 251, 247, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(237, 231, 217, 0.9);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 1rem;
}

.mobile-footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  color: #71717A;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 500;
  gap: 2px;
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
  background: transparent;
  border: none;
}

.mobile-footer-item i {
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}

.mobile-footer-item:hover,
.mobile-footer-item.active {
  color: #18181B;
  font-weight: 600;
}

.mobile-footer-item.active i {
  transform: translateY(-2px);
  color: var(--surface-dark-pill);
}

.mobile-footer-item.active::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accent-yellow);
}

@media (max-width: 767px) {
  body {
    padding-bottom: 74px;
  }
  .crextio-canvas {
    margin-bottom: 1rem;
    padding: 1.25rem;
    border-radius: 1.5rem;
  }
  .event-block-dark, .event-block-light {
    position: static;
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ==========================================================================
   Dark Theme Specifications ([data-theme="dark"])
   ========================================================================== */
[data-theme="dark"] {
  --bg-canvas-start: #141418;
  --bg-canvas-mid: #18181F;
  --bg-canvas-end: #221F14;
  --surface-card: #1D1D25;
  --surface-card-subtle: #24242E;
  --surface-dark-card: #131317;
  --surface-dark-pill: #F5C443;
  --accent-yellow: #F5C443;
  --accent-yellow-light: #FDE68A;
  --border-subtle: #2C2C38;
  --border-dashed: #353545;
  --text-main: #F4F4F7;
  --text-muted: #9E9EA8;
}

[data-theme="dark"] body {
  background-color: #0C0C0E;
  color: #F4F4F7;
}

[data-theme="dark"] .crextio-canvas {
  border-color: #262632;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .glow-orb-top-right {
  background: radial-gradient(circle, rgba(245, 196, 67, 0.12) 0%, transparent 70%);
}

[data-theme="dark"] .glow-orb-bottom-right {
  background: radial-gradient(circle, rgba(245, 196, 67, 0.16) 0%, transparent 70%);
}

[data-theme="dark"] .brand-badge {
  background-color: rgba(30, 30, 38, 0.85);
  border-color: #2F2F3D;
  color: #F4F4F7;
}

[data-theme="dark"] .brand-badge svg path {
  fill: #F4F4F7;
}

[data-theme="dark"] .nav-pill-track {
  background-color: rgba(24, 24, 30, 0.9);
  border-color: #2C2C38;
}

[data-theme="dark"] .nav-pill-btn {
  color: #9E9EA8;
}

[data-theme="dark"] .nav-pill-btn:hover {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .nav-pill-btn.active {
  background-color: #F5C443;
  color: #121216 !important;
  font-weight: 700;
}

[data-theme="dark"] .btn-action-pill,
[data-theme="dark"] .btn-action-icon {
  background-color: rgba(30, 30, 38, 0.85);
  border-color: #2F2F3D;
  color: #F4F4F7;
}

[data-theme="dark"] .btn-action-pill:hover,
[data-theme="dark"] .btn-action-icon:hover {
  background-color: #282834;
  color: #FFFFFF;
}

/* Ensure setting icon and action button icons glow in crisp brand gold in dark mode */
[data-theme="dark"] .btn-action-pill i,
[data-theme="dark"] .btn-action-pill .bi-gear,
[data-theme="dark"] .btn-action-pill .bi-gear-fill,
[data-theme="dark"] .btn-action-pill .text-secondary,
[data-theme="dark"] .btn-action-icon i,
[data-theme="dark"] .btn-action-icon .text-secondary,
[data-theme="dark"] i.bi-gear,
[data-theme="dark"] i.bi-gear-fill {
  color: #F5C443 !important;
}

[data-theme="dark"] .btn-action-pill:hover i,
[data-theme="dark"] .btn-action-pill:hover .bi-gear,
[data-theme="dark"] .btn-action-pill:hover .bi-gear-fill,
[data-theme="dark"] .btn-action-icon:hover i {
  color: #FFFFFF !important;
}

/* When setting or action button is active in dark mode */
[data-theme="dark"] .btn-action-pill.active,
[data-theme="dark"] .btn-action-icon.active {
  background-color: #F5C443 !important;
  border-color: #F5C443 !important;
  color: #121216 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(245, 196, 67, 0.35);
}

[data-theme="dark"] .btn-action-pill.active i,
[data-theme="dark"] .btn-action-pill.active .bi-gear,
[data-theme="dark"] .btn-action-pill.active .bi-gear-fill,
[data-theme="dark"] .btn-action-pill.active .text-secondary,
[data-theme="dark"] .btn-action-pill.active .text-warning,
[data-theme="dark"] .btn-action-icon.active i,
[data-theme="dark"] .btn-action-icon.active .text-secondary,
[data-theme="dark"] .btn-action-icon.active .text-warning {
  color: #121216 !important;
}

[data-theme="dark"] .greeting-title,
[data-theme="dark"] .page-title,
[data-theme="dark"] .kpi-figure {
  color: #F4F4F7;
}

[data-theme="dark"] .pipeline-labels {
  color: #9E9EA8;
}

[data-theme="dark"] .pill-project-time {
  background-color: rgba(30, 30, 38, 0.7);
  background-image: repeating-linear-gradient(-45deg, rgba(50, 50, 65, 0.7), rgba(50, 50, 65, 0.7) 3px, transparent 3px, transparent 7px);
  border-color: #383848;
  color: #E4E4E7;
}

[data-theme="dark"] .pill-output {
  border-color: #383848;
  background-color: rgba(30, 30, 38, 0.4);
  color: #A1A1AA;
}

[data-theme="dark"] .kpi-icon-badge {
  background-color: rgba(255, 255, 255, 0.06);
  color: #A1A1AA;
}

[data-theme="dark"] .crextio-card {
  background-color: rgba(26, 26, 34, 0.92);
  border-color: #2A2A36;
  box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .crextio-card:hover {
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .card-action-btn {
  background-color: #22222C;
  border-color: #2E2E3C;
  color: #A1A1AA;
}

[data-theme="dark"] .card-action-btn:hover {
  background-color: #2A2A38;
  color: #FFFFFF;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .accordion-crextio .accordion-button {
  color: #F4F4F7 !important;
}

[data-theme="dark"] .text-secondary {
  color: #A1A1AA !important;
}

[data-theme="dark"] .text-muted {
  color: #A1A1AA !important;
}

/* Headings in Dark Mode */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6 {
  color: #F4F4F7;
}

/* Solid bright yellow elements in dark mode require dark text */
[data-theme="dark"] .bg-warning:not([class*="bg-opacity"]),
[data-theme="dark"] .badge.bg-warning:not([class*="bg-opacity"]),
[data-theme="dark"] .btn-warning,
[data-theme="dark"] .pill-hired,
[data-theme="dark"] .cal-day-cell.is-highlighted,
[data-theme="dark"] .cal-day-cell.is-highlighted * {
  color: #121216 !important;
}

/* Semi-transparent yellow/gold badges in dark mode require bright gold text */
[data-theme="dark"] .bg-warning[class*="bg-opacity"],
[data-theme="dark"] .badge.bg-warning[class*="bg-opacity"],
[data-theme="dark"] .badge.bg-warning[class*="bg-opacity"] * {
  background-color: rgba(245, 196, 67, 0.22) !important;
  color: #FDE68A !important;
}

/* Background & Border Overrides in Dark Mode */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .border-light-subtle {
  background-color: #22222C !important;
  border-color: #2E2E3A !important;
}

[data-theme="dark"] .bg-white {
  background-color: #1F1F29 !important;
  border-color: #2E2E3C !important;
  color: #F4F4F7 !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
  border-color: #2E2E3A !important;
}

/* Soft colored status badges in Dark Mode */
[data-theme="dark"] .bg-success[class*="bg-opacity"],
[data-theme="dark"] .badge.bg-success[class*="bg-opacity"],
[data-theme="dark"] .badge.bg-success-subtle {
  background-color: rgba(34, 197, 94, 0.18) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

[data-theme="dark"] .bg-success[class*="bg-opacity"] *,
[data-theme="dark"] .badge.bg-success[class*="bg-opacity"] *,
[data-theme="dark"] .badge.bg-success-subtle * {
  color: #4ade80 !important;
}

[data-theme="dark"] .bg-primary[class*="bg-opacity"],
[data-theme="dark"] .badge.bg-primary[class*="bg-opacity"],
[data-theme="dark"] .badge.bg-primary-subtle {
  background-color: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(147, 197, 253, 0.3) !important;
}

[data-theme="dark"] .bg-primary[class*="bg-opacity"] *,
[data-theme="dark"] .badge.bg-primary[class*="bg-opacity"] *,
[data-theme="dark"] .badge.bg-primary-subtle * {
  color: #93c5fd !important;
}

[data-theme="dark"] .bg-secondary[class*="bg-opacity"],
[data-theme="dark"] .badge.bg-secondary[class*="bg-opacity"],
[data-theme="dark"] .badge.bg-secondary-subtle {
  background-color: rgba(161, 161, 170, 0.15) !important;
  color: #D4D4D8 !important;
  border: 1px solid rgba(161, 161, 170, 0.3) !important;
}

[data-theme="dark"] .bg-secondary[class*="bg-opacity"] *,
[data-theme="dark"] .badge.bg-secondary[class*="bg-opacity"] *,
[data-theme="dark"] .badge.bg-secondary-subtle * {
  color: #D4D4D8 !important;
}

[data-theme="dark"] .badge.bg-light {
  background-color: #22222E !important;
  color: #D4D4D8 !important;
  border-color: #2E2E3C !important;
}

/* Dropdown menus in Dark Mode */
[data-theme="dark"] .dropdown-menu {
  background-color: #1E1E28 !important;
  border: 1px solid #2E2E3A !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .dropdown-item {
  color: #D4D4D8 !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: #282838 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .dropdown-item.active {
  background-color: #F5C443 !important;
  color: #121216 !important;
}

[data-theme="dark"] .input-group-text {
  background-color: #1A1A22 !important;
  border-color: #2E2E3A !important;
  color: #A1A1AA !important;
}

[data-theme="dark"] .device-row div div:first-child {
  color: #F4F4F7 !important;
}

[data-theme="dark"] .radial-track {
  stroke: #2E2E3C;
}

[data-theme="dark"] .timer-digits {
  color: #F4F4F7;
}

[data-theme="dark"] .timer-btn-round {
  background-color: #22222C;
  border-color: #2E2E3A;
  color: #E4E4E7;
}

[data-theme="dark"] .timer-btn-round:hover {
  background-color: #2A2A38;
}

[data-theme="dark"] .timer-btn-dark {
  background-color: #F5C443;
  color: #121216;
}

[data-theme="dark"] .day-slot-btn {
  color: #8C8C98;
}

[data-theme="dark"] .day-slot-btn:hover {
  color: #FFFFFF;
}

[data-theme="dark"] .day-slot-btn.active {
  color: #FFFFFF;
}

[data-theme="dark"] .day-slot-btn.active .day-number-circle {
  background-color: #F5C443;
  color: #121216;
}

[data-theme="dark"] .timeline-guideline {
  border-color: #2E2E3C;
}

[data-theme="dark"] .event-block-dark {
  background-color: #131318;
  border-color: #262632;
}

[data-theme="dark"] .event-block-light {
  background-color: #24242E;
  border-color: #343442;
  color: #F4F4F7;
}

[data-theme="dark"] .event-block-light div div:first-child {
  color: #F4F4F7;
}

[data-theme="dark"] .event-block-light .avatar-stack img {
  border-color: #24242E;
}

[data-theme="dark"] .crextio-offcanvas {
  background: linear-gradient(180deg, #141418 0%, #181820 100%);
  border-color: #262632;
}

[data-theme="dark"] .mobile-nav-link {
  color: #9E9EA8;
}

[data-theme="dark"] .mobile-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
}

[data-theme="dark"] .mobile-nav-link.active {
  background-color: #F5C443;
  color: #121216 !important;
}

[data-theme="dark"] .mobile-nav-link i.bi-gear,
[data-theme="dark"] .mobile-nav-link i.bi-gear-fill {
  color: #F5C443;
}

[data-theme="dark"] .mobile-nav-link.active i.bi-gear,
[data-theme="dark"] .mobile-nav-link.active i.bi-gear-fill {
  color: #121216 !important;
}

[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(18, 18, 24, 0.94);
  border-top-color: #282834;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .mobile-footer-item {
  color: #8C8C98;
}

[data-theme="dark"] .mobile-footer-item:hover,
[data-theme="dark"] .mobile-footer-item.active {
  color: #FFFFFF;
}

[data-theme="dark"] .mobile-footer-item.active i {
  color: #F5C443;
}

[data-theme="dark"] .mobile-footer-item.active i.bi-gear,
[data-theme="dark"] .mobile-footer-item.active i.bi-gear-fill {
  color: #F5C443 !important;
}