/* SG TimeTally – SenanGroup Product Design System (DESIGN.md) */

/* ========== §19 Definitive Color System – Authoritative Palette ========== */
/* All components derive from these scales. No random blues/greens/orange. */

:root {
  /* Primary (Brand Blue) – DESIGN §19 */
  --primary-50: #EEF4FF;
  --primary-100: #DCE8FF;
  --primary-200: #B9D1FF;
  --primary-300: #8EB6FF;
  --primary-400: #5C94F2;
  --primary-500: #3F7AE0;
  --primary-600: #2F63C7;
  --primary-700: #274FA3;
  --primary-800: #1F3E82;
  --primary-900: #162C5C;

  /* Success (Teal-Green) */
  --success-50: #ECFDF5;
  --success-100: #D1FAE5;
  --success-200: #A7F3D0;
  --success-300: #6EE7B7;
  --success-400: #34D399;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;
  --success-800: #065F46;
  --success-900: #064E3B;

  /* Warning (Amber – not orange) */
  --warning-50: #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-200: #FDE68A;
  --warning-300: #FCD34D;
  --warning-400: #FBBF24;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;
  --warning-800: #92400E;
  --warning-900: #78350F;

  /* Danger (Controlled Red) */
  --danger-50: #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-200: #FECACA;
  --danger-300: #FCA5A5;
  --danger-400: #F87171;
  --danger-500: #EF4444;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;
  --danger-800: #991B1B;
  --danger-900: #7F1D1D;

  /* Neutral (Professional Slate) */
  --neutral-50: #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;
}

/* ========== §19 Light Mode Application ========== */
:root {
  --color-background: var(--neutral-50);
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-subtle: var(--neutral-100);
  --color-border-subtle: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-text-primary: var(--neutral-800);
  --color-text-secondary: var(--neutral-600);
  --color-text-muted: var(--neutral-500);
  /* Primary: 500 default, 600 hover, 700 active – Button Final Definition */
  --color-primary: var(--primary-500);
  --color-primary-hover: var(--primary-600);
  --color-primary-active: var(--primary-700);
  --color-primary-tint: var(--primary-50);
  --color-success: var(--success-500);
  --color-success-bg: var(--success-50);
  --color-warning: var(--warning-500);
  --color-warning-bg: var(--warning-50);
  --color-danger: var(--danger-500);
  --color-danger-hover: var(--danger-600);
  --color-danger-bg: var(--danger-100);
  --color-info: var(--primary-400);
  /* §19 Button Final Definition */
  --color-button-secondary-border: var(--neutral-300);
  --color-button-secondary-text: var(--primary-600);
  --color-button-ghost-hover-bg: var(--primary-50);
}

/* ========== §5 Layout: 8px spacing grid ========== */
:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --section-gap: 32px;
  --card-padding: 24px;
  --compact-padding: 16px;
}

/* ========== §6 Typography scale ========== */
:root {
  --font-family: "Urbanist", -apple-system, BlinkMacSystemFont, sans-serif;
  --text-h1: 1.75rem;
  --text-h1-weight: 700;
  --text-h2: 1.3125rem;
  --text-h2-weight: 600;
  --text-card-title: 1rem;
  --text-card-title-weight: 600;
  --text-body: 0.9375rem;
  --text-body-weight: 400;
  --text-caption: 0.8125rem;
  --text-caption-weight: 400;
  --text-metric: 2rem;
  --text-metric-weight: 700;
}

/* ========== §15 Radius: Small (inputs, tags) / Medium (cards, buttons) ========== */
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 12px;
}

/* ========== §7 Elevation: 0 flat, 1 card, 2 floating ========== */
:root {
  --elevation-0: none;
  --elevation-1: 0 1px 3px rgba(15, 23, 42, 0.06);
  --elevation-2: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* §13 Interaction: 150–200ms ease-in-out everywhere */
:root {
  --transition-default: 0.18s ease-in-out;
}

/* ========== Legacy --sg-* map (homepage compatibility) ========== */
:root {
  --sg-primary: var(--color-primary);
  --sg-primary-hover: var(--color-primary-hover);
  --sg-accent: var(--primary-400);
  --sg-text: var(--color-text-primary);
  --sg-muted: var(--color-text-muted);
  --sg-border: var(--color-border-subtle);
  --sg-bg: var(--color-background);
  --sg-card: var(--color-surface);
  --sg-navy: var(--color-text-primary);
  --sg-blue: var(--color-primary);
  --sg-blue-light: var(--color-primary-hover);
  --sg-surface: var(--color-surface-subtle);
  --sg-surface-tint: var(--color-border-subtle);
  --sg-surface-elevated: var(--color-surface-elevated);
  --sg-surface-card: var(--color-surface);
  --sg-border-light: var(--color-border-subtle);
  --sg-text-secondary: var(--color-text-secondary);
  --sg-shadow-sm: var(--elevation-0);
  --sg-shadow: var(--elevation-1);
  --sg-shadow-md: var(--elevation-2);
  --sg-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.1);
  --sg-radius-sm: var(--radius-sm);
  --sg-radius: var(--radius-md);
  --sg-radius-lg: var(--radius-card);
  --sg-radius-xl: 12px;
  --sg-space-1: var(--space-4);
  --sg-space-2: var(--space-8);
  --sg-space-3: var(--space-12);
  --sg-space-4: var(--space-16);
  --sg-space-5: 20px;
  --sg-space-6: var(--space-24);
  --sg-space-8: var(--space-32);
  --sg-space-10: var(--space-40);
  --sg-section-gap: var(--section-gap);
  --sg-font: var(--font-family);
  --sg-title: var(--text-card-title);
  --sg-title-weight: var(--text-card-title-weight);
  --sg-body: var(--text-body);
  --sg-caption: var(--text-caption);
  --sg-caption-muted: 0.75rem;
  --sg-stat: var(--text-metric);
  --sg-stat-weight: var(--text-metric-weight);
  --sg-mint: var(--color-success);
  --sg-coral: var(--color-danger);
  --sg-sky: var(--color-info);
}

/* ========== §19 Dark Mode Application ========== */
[data-theme="dark"] {
  --color-background: var(--neutral-900);
  --color-surface: var(--neutral-800);
  --color-surface-elevated: var(--neutral-700);
  --color-surface-subtle: var(--neutral-700);
  --color-border-subtle: var(--neutral-700);
  --color-border-strong: var(--neutral-600);
  --color-text-primary: var(--neutral-100);
  --color-text-secondary: var(--neutral-300);
  --color-text-muted: var(--neutral-400);
  --color-primary: var(--primary-400);
  --color-primary-hover: var(--primary-300);
  --color-primary-active: var(--primary-500);
  --color-primary-tint: rgba(63, 122, 224, 0.15);
  --color-success: var(--success-400);
  --color-success-bg: rgba(16, 185, 129, 0.12);
  --color-warning: var(--warning-400);
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-danger: var(--danger-400);
  --color-danger-hover: var(--danger-300);
  --color-danger-bg: rgba(239, 68, 68, 0.12);
  --color-info: var(--primary-300);
  --color-button-secondary-border: var(--neutral-600);
  --color-button-secondary-text: var(--primary-400);
  --color-button-ghost-hover-bg: var(--primary-900);
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.2);
  --elevation-2: 0 4px 12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] {
  --sg-text: var(--color-text-primary);
  --sg-muted: var(--color-text-muted);
  --sg-border: var(--color-border-subtle);
  --sg-bg: var(--color-background);
  --sg-card: var(--color-surface);
  --sg-navy: var(--color-text-primary);
  --sg-blue: var(--color-primary);
  --sg-blue-light: var(--color-primary-hover);
  --sg-surface: var(--color-surface);
  --sg-surface-tint: var(--color-surface-elevated);
  --sg-surface-elevated: var(--color-surface-elevated);
  --sg-surface-card: var(--color-surface);
  --sg-border-light: var(--color-border-subtle);
  --sg-text-secondary: var(--color-text-secondary);
  --sg-primary: var(--color-primary);
  --sg-primary-hover: var(--color-primary-hover);
  --sg-shadow-sm: var(--elevation-1);
  --sg-shadow: var(--elevation-1);
  --sg-shadow-md: var(--elevation-2);
  --sg-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.home-page {
  font-family: var(--font-family);
  background: var(--color-background);
  min-height: 100vh;
  color: var(--color-text-primary);
}

/* DESIGN §1: Calm, structured – subtle brand tint only */
.home-page {
  background:
    radial-gradient(1200px 500px at 100% -5%, color-mix(in oklab, var(--color-primary) 5%, transparent), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, color-mix(in oklab, var(--color-primary) 4%, transparent), transparent 62%),
    var(--color-background);
}

/* Centered content — refined layout rhythm: 1400px max, 32px page padding. */
.home-page .container {
  width: 100% !important;
  max-width: 1400px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 var(--space-32);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .home-page .container {
    padding: 0 var(--space-16);
  }
}

/* ========== Section structure — premium rhythm (28–36px section gap) ========== */
.home-page .home-section {
  margin-bottom: 32px;
}

.home-page .home-section:last-child {
  margin-bottom: 0;
}

.home-page .section-header {
  margin-bottom: var(--space-16);
}

/* Card-title default (used by cards, panels, daily-entries). Page-level
   section titles override below to read as headline-22/700. */
.home-page .section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-8);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Page-level section headings — Linear/Notion scale. Used by the major
   sections on home (This Week's Timesheet, Holidays and Leaves). */
.home-page .timesheet-section-header .section-title,
.home-page .calendar-section .section-title,
.home-page .section-header .section-title.dark-blue-text {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.home-page .section-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ========== Card system (DESIGN §9: elevation 1, padding 24px, consistent radius) ========== */
.home-page .ds-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  box-shadow: var(--elevation-1);
  transition: box-shadow var(--transition-default), border-color var(--transition-default);
}

.home-page .attendance-section .ds-card,
.home-page .leave-section .ds-card {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
}

.home-page .ds-card:hover,
.home-page .attendance-section .ds-card:hover,
.home-page .leave-section .ds-card:hover {
  box-shadow: var(--elevation-2);
  border-color: var(--color-border-strong);
}

/* Card accent: primary only for emphasis (DESIGN §1: brand = guidance) */
.home-page .ds-card-accent {
  background: var(--color-primary);
  border: none;
  color: #fff;
  box-shadow: var(--elevation-1);
}

.home-page .ds-card-accent:hover {
  box-shadow: var(--elevation-2);
}

.home-page .ds-card-accent .section-title,
.home-page .ds-card-accent .stat-label,
.home-page .ds-card-accent .stat-value {
  color: #fff;
}

.home-page .ds-card-accent .stat-label {
  opacity: 0.9;
}

/* ----- Company announcements carousel (standalone, right after clock card) ----- */
.home-page .announcements-carousel-standalone {
  margin-top: var(--space-32);
  margin-bottom: var(--space-32);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--elevation-1);
  border: 1px solid var(--color-border-subtle);
}

.home-page .announcements-carousel-standalone .carousel,
.home-page .announcements-carousel-standalone .carousel-inner {
  min-height: 168px;
}

.home-page .announcements-carousel-standalone .carousel-item {
  min-height: 168px;
  transition: opacity 0.65s ease-in-out;
}

/* Bootstrap's stock .carousel-fade uses a fast 600ms opacity swap but
   still leaves the outgoing slide in place during the transition, which
   on slower devices looks like a hard cut. We override the inner timing
   so both slides cross-fade cleanly and keep the carousel block from
   jumping during the swap. */
.home-page .announcements-carousel-standalone.carousel-fade .carousel-item,
.home-page .announcements-carousel-standalone .carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 0.65s ease-in-out;
}

.home-page .announcements-carousel-standalone.carousel-fade .carousel-item.active,
.home-page .announcements-carousel-standalone .carousel-fade .carousel-item.active,
.home-page .announcements-carousel-standalone.carousel-fade .carousel-item-next.carousel-item-left,
.home-page .announcements-carousel-standalone.carousel-fade .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.home-page .announcements-carousel-standalone.carousel-fade .active.carousel-item-left,
.home-page .announcements-carousel-standalone.carousel-fade .active.carousel-item-right {
  opacity: 0;
}

/* Disable the slide transform — fade only, no horizontal shift. */
.home-page .announcements-carousel-standalone.carousel-fade .active.carousel-item-left,
.home-page .announcements-carousel-standalone.carousel-fade .active.carousel-item-prev.carousel-item-right,
.home-page .announcements-carousel-standalone.carousel-fade .carousel-item-next:not(.carousel-item-left),
.home-page .announcements-carousel-standalone.carousel-fade .carousel-item-prev:not(.carousel-item-right) {
  transform: translateX(0);
}

.home-page .announcement-slide {
  display: block;
  position: relative;
  min-height: 168px;
  padding: 22px 80px;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface-subtle);
}

.home-page .announcement-slide--with-bg {
  background-image: var(--announcement-bg-image);
  background-size: cover;
  background-position: center;
  background-color: var(--neutral-800);
}

/* Lighter, calmer overlay — subtle dark wash for legibility instead of a
   heavy left-to-right gradient. */
.home-page .announcement-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0.3) 55%, rgba(15, 23, 42, 0.15) 100%);
  pointer-events: none;
}

.home-page .announcement-slide--with-bg .announcement-slide-overlay {
  background: linear-gradient(to right, rgba(15, 23, 42, 0.68) 0%, rgba(15, 23, 42, 0.38) 65%, rgba(15, 23, 42, 0.12) 100%);
}

.home-page .announcement-slide-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: 124px;
  width: 100%;
}

.home-page .announcement-slide-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
  max-width: 520px;
}

.home-page .announcement-slide-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--space-8);
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.home-page .announcement-slide:not(.announcement-slide--with-bg) .announcement-slide-title {
  color: var(--color-text-primary);
  text-shadow: none;
}

.home-page .announcement-slide-summary {
  font-size: var(--text-body);
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--space-12);
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-page .announcement-slide:not(.announcement-slide--with-bg) .announcement-slide-summary {
  color: var(--color-text-secondary);
  text-shadow: none;
}

.home-page .announcement-slide-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 10px;
  padding: 8px 14px;
  width: fit-content;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--transition-default), border-color var(--transition-default);
}

.home-page .announcement-slide:not(.announcement-slide--with-bg) .announcement-slide-cta {
  color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 14%, transparent);
  border-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-border-subtle));
}

.home-page .announcement-slide:hover .announcement-slide-cta {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
}

.home-page .announcement-slide:not(.announcement-slide--with-bg):hover .announcement-slide-cta {
  background: color-mix(in oklab, var(--color-primary) 22%, transparent);
  border-color: var(--color-primary);
}

/* Carousel controls — refined: square-ish 42×42 buttons that feel
   purposeful rather than tiny floaty circles. */
.home-page .announcements-carousel-standalone .carousel-control-prev,
.home-page .announcements-carousel-standalone .carousel-control-next {
  width: 42px;
  height: 42px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
  transition: background var(--transition-default), border-color var(--transition-default), transform var(--transition-default);
}

.home-page .announcements-carousel-standalone .carousel-control-prev:hover,
.home-page .announcements-carousel-standalone .carousel-control-next:hover {
  background: rgba(15, 23, 42, 0.48);
  border-color: rgba(255, 255, 255, 0.4);
}

.home-page .announcements-carousel-standalone .carousel-control-prev {
  left: 14px;
}

.home-page .announcements-carousel-standalone .carousel-control-next {
  right: 14px;
}

.home-page .announcements-carousel-standalone .carousel-control-prev-icon,
.home-page .announcements-carousel-standalone .carousel-control-next-icon {
  filter: brightness(0) invert(1);
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
}

@media (max-width: 768px) {
  .home-page .announcement-slide {
    padding: 20px 64px;
    min-height: 156px;
  }

  .home-page .announcement-slide-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: 0;
  }

  .home-page .announcement-slide-title {
    font-size: 1.0625rem;
  }

  .home-page .announcements-carousel-standalone .carousel-control-prev,
  .home-page .announcements-carousel-standalone .carousel-control-next {
    width: 36px;
    height: 36px;
  }

  .home-page .announcements-carousel-standalone .carousel-control-prev { left: 10px; }
  .home-page .announcements-carousel-standalone .carousel-control-next { right: 10px; }
}

/* ========== Announcement / News detail page ========== */
.announcement-page {
  font-family: var(--font-family);
  background: var(--color-background);
  min-height: 100vh;
  color: var(--color-text-primary);
  display: block;
}

.announcement-page-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 0 var(--space-24);
}

.announcement-page-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 64px;
  flex-wrap: wrap;
}

.announcement-page-logo {
  display: flex;
  align-items: center;
}

.announcement-page-nav {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.announcement-page-nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.announcement-page-nav a:hover {
  color: var(--color-primary);
}

.announcement-page-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.announcement-page-theme:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

.announcement-page-main {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-32) var(--space-24) var(--space-48);
}

.announcement-page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  margin-bottom: var(--space-24);
}

.announcement-page-back:hover {
  color: var(--color-primary);
}

.announcement-page-article {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.announcement-page-hero-image {
  width: 100%;
  background: var(--color-surface-subtle);
  line-height: 0;
}

.announcement-page-hero-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.announcement-page-article-content {
  padding: var(--space-32);
}

.announcement-page-article-header {
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border-subtle);
}

.announcement-page-title {
  font-size: var(--text-h1);
  font-weight: var(--text-h1-weight);
  line-height: 1.3;
  margin: 0 0 var(--space-12);
  color: var(--color-text-primary);
}

.announcement-page-meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.announcement-page-meta i {
  opacity: 0.8;
}

.announcement-page-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-primary);
  max-width: 65ch;
}

.announcement-page-body p {
  margin: 0 0 1.25em;
}

.announcement-page-body p:last-child {
  margin-bottom: 0;
}

.announcement-page-body ul,
.announcement-page-body ol {
  margin: 0 0 1.25em;
  padding-left: 1.5em;
}

.announcement-page-body ul {
  list-style-type: disc;
}

.announcement-page-body ol {
  list-style-type: decimal;
}

.announcement-page-body li {
  margin-bottom: 0.35em;
}

.announcement-page-body li:last-child {
  margin-bottom: 0;
}

/* Metric cards (DESIGN §12: large metric number, weight 700) */
.home-page .stat-value {
  font-size: var(--text-metric);
  font-weight: var(--text-metric-weight);
  line-height: 1.2;
  color: var(--color-text-primary);
}

.home-page .stat-label {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  font-weight: 500;
}

.home-page .stat-grid {
  display: grid;
  gap: var(--space-16);
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

/* Form elements (DESIGN §15: radius-sm for inputs) */
.home-page .ds-form-group {
  margin-bottom: var(--space-16);
}

.home-page .ds-form-group .form-label {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  display: block;
}

.home-page .form-control {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  padding: 10px 14px;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  transition: border-color var(--transition-default), box-shadow var(--transition-default);
}

.home-page .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(63, 122, 224, 0.2);
  outline: none;
}

/* ========== §19 Button Final Definition ========== */
/* Primary: BG Primary 500, Hover 600, Active 700, Text White */
.home-page .ds-btn-primary {
  font-weight: 600;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-md);
  font-size: var(--text-caption);
  background: var(--color-primary);
  color: #fff;
  border: none;
  transition: background var(--transition-default), transform var(--transition-default);
}

.home-page .ds-btn-primary:hover {
  background: var(--color-primary-hover);
}

.home-page .ds-btn-primary:active {
  background: var(--color-primary-active);
  transform: scale(0.99);
}

/* Secondary: Transparent, Border Neutral 300/600, Text Primary 600 */
.home-page .ds-btn-secondary,
.home-page .projects-section .btn-outline-primary {
  font-weight: 600;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-md);
  font-size: var(--text-caption);
  background: transparent;
  border: 1px solid var(--color-button-secondary-border);
  color: var(--color-button-secondary-text);
  transition: background var(--transition-default), border-color var(--transition-default), color var(--transition-default);
}

.home-page .ds-btn-secondary:hover,
.home-page .projects-section .btn-outline-primary:hover {
  background: var(--color-surface-subtle);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Ghost: Text Primary 600, Hover Primary 50 background */
.home-page .btn-ghost-week {
  color: var(--color-button-secondary-text);
  background: transparent;
  border: none;
  transition: background var(--transition-default), color var(--transition-default);
}

.home-page .btn-ghost-week:hover {
  background: var(--color-button-ghost-hover-bg);
  color: var(--color-primary);
}

.home-page .home-header .home-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  background: transparent;
  border-radius: 10px;
  transition: background var(--transition-default), color var(--transition-default);
}

.home-page .home-header .home-nav-link:hover {
  background: var(--color-primary-tint);
  color: var(--color-primary-hover);
}

.home-page .home-header .home-nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
  background: var(--color-primary-tint);
}

/* Danger: BG Danger 500, Hover Danger 600 */
.home-page .ds-btn-danger {
  font-weight: 600;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-md);
  font-size: var(--text-caption);
  background: var(--color-danger);
  color: #fff;
  border: none;
  transition: background var(--transition-default);
}

.home-page .ds-btn-danger:hover {
  background: var(--color-danger-hover);
}

/* Override global body flex (styles.css) so header and main stack full width, not side-by-side */
body.home-page {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.home-page .home-header,
.home-page .container {
  flex: 0 0 auto;
  min-width: 0;
}

/* Header — refined: taller, calmer, sticks confidently to the top with a
   subtle border instead of a shadow. */
.home-page .home-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.home-page .home-header .header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: 0 var(--space-32);
  min-height: 76px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .home-page .home-header .header-inner {
    padding: 0 var(--space-16);
    min-height: 64px;
  }
}

.home-page .home-header .logo-wrap {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.home-page .home-header .logo-wrap img {
  height: 36px;
  width: auto;
  border-radius: var(--radius-sm);
  display: block;
}

/* Nav (DESIGN §8: tertiary = text only, low emphasis) */
.home-page .home-header .header-right {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-left: auto;
}

.home-page .home-header .home-nav {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}


.home-page .home-header .header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Header icon buttons — 44×44, soft border, premium hover. Shared shape
   for theme-toggle, notifications, and suggestions so the row reads as a
   single utility cluster. */
.home-page .theme-toggle,
.home-page .notifications-btn,
.home-page .suggestions-link {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-default), color var(--transition-default), border-color var(--transition-default), box-shadow var(--transition-default);
}

.home-page .theme-toggle:hover,
.home-page .notifications-btn:hover,
.home-page .suggestions-link:hover {
  color: var(--color-primary);
  background: var(--color-primary-tint);
  border-color: color-mix(in oklab, var(--color-primary) 28%, var(--color-border-subtle));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.home-page .theme-toggle i,
.home-page .notifications-btn i,
.home-page .suggestions-link i {
  font-size: 1.0625rem;
}

/* Notifications dropdown */
.home-page .notifications-wrap {
  position: relative;
}

/* Premium unread badge — slightly larger, centered ring so it pops
   without feeling cartoonish. */
.home-page .notifications-badge,
.home-page .suggestions-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--color-surface);
}

.home-page .notifications-badge {
  background: var(--danger-500);
}

.home-page .suggestions-badge {
  background: var(--primary-500);
}

.home-page .notifications-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, calc(100vw - 32px));
  max-height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  z-index: 200;
}

.home-page .notifications-dropdown[hidden] {
  display: none !important;
}

.home-page .notifications-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border-subtle);
  font-weight: 600;
  font-size: var(--text-caption);
  color: var(--color-text-primary);
}

.home-page .notifications-mark-all {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.home-page .notifications-mark-all:hover {
  text-decoration: underline;
}

.home-page .notifications-list {
  overflow-y: auto;
  max-height: 320px;
}

.home-page .notifications-item {
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-caption);
}

.home-page .notifications-item:last-child {
  border-bottom: none;
}

.home-page .notifications-item.unread {
  background: var(--primary-50);
}

.home-page .notifications-item .notifications-item-title {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.home-page .notifications-item .notifications-item-message {
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

.home-page .notifications-item .notifications-item-time {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.home-page .notifications-empty {
  padding: var(--space-24);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

/* Profile chip — refined: avatar then left-aligned name + email so the
   block reads as identity, not as a right-edge addendum. */
.home-page .home-header .profile-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: var(--space-8);
  padding-left: var(--space-16);
  border-left: 1px solid var(--color-border-subtle);
}

.home-page .home-header .home-logout-link {
  flex-shrink: 0;
  margin-left: var(--space-8);
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-default), color var(--transition-default), border-color var(--transition-default);
}

.home-page .home-header .home-logout-link:hover {
  color: var(--color-primary);
  background: var(--color-primary-tint);
  border-color: color-mix(in oklab, var(--color-primary) 28%, var(--color-border-subtle));
}

[data-theme="dark"] .home-page .home-header .home-logout-link {
  border-color: var(--color-border-subtle);
}

.home-page .home-header .profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 24%, transparent);
}

.home-page .home-header .profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.2;
}

.home-page .home-header .profile-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.home-page .home-header .profile-title {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 400;
  line-height: 1.3;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .home-page .home-header .header-inner {
    padding: var(--space-16) var(--space-16);
    gap: var(--space-16);
  }

  .home-page .home-header .profile-block {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
}

/* Clock card — refined hero. Subtle two-stop gradient + soft inner glow
   so it reads as a confident brand surface rather than a flat fill.
   Reduced padding and grouped info hierarchy gives it a calmer rhythm. */
.home-page .clock-card {
  margin-bottom: var(--space-32);
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 62%, var(--color-primary-active) 100%);
  border: none;
  border-radius: 20px;
  color: #fff;
  box-shadow: 0 12px 32px -16px color-mix(in oklab, var(--color-primary) 65%, transparent);
  position: relative;
  overflow: hidden;
}

.home-page .clock-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(560px 220px at 12% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(420px 200px at 100% 100%, rgba(15, 23, 42, 0.18), transparent 65%);
  pointer-events: none;
}

.home-page .clock-card-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.home-page .clock-card-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-page .clock-card-today-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.home-page .clock-card-date {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}

.home-page .clock-card-status-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 6px;
}

.home-page .clock-card-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  letter-spacing: 0.01em;
}

.home-page .clock-card-state-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.home-page .clock-card-timezone {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  letter-spacing: 0.005em;
}

.home-page .clock-card-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.home-page .clock-card-actions .btn {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 12px;
  letter-spacing: 0.005em;
  transition: background var(--transition-default), box-shadow var(--transition-default), border-color var(--transition-default), transform var(--transition-default);
}

.home-page .clock-card-actions .btn.btn-green {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: var(--color-primary-hover);
}

.home-page .clock-card-actions .btn.btn-green:hover {
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-primary-active);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

.home-page .clock-card-actions .btn.btn-red {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: var(--danger-600);
}

.home-page .clock-card-actions .btn.btn-red:hover {
  background: rgba(255, 255, 255, 0.95);
  color: var(--danger-700);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

.home-page .clock-card-actions .btn.btn-white.text-blue {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.home-page .clock-card-actions .btn.btn-white.text-blue:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}

.home-page .clock-card .appeal-badge {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 900px) {
  .home-page .clock-card {
    padding: 24px;
  }
  .home-page .clock-card-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .home-page .clock-card-actions {
    justify-content: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .home-page .clock-card-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Main content container — a single quiet surface that nests the
   week-summary, timesheet, and calendar sections. */
.home-page .home-main {
  background: var(--color-surface);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
  margin-bottom: var(--space-32);
  border: 1px solid var(--color-border-subtle);
  transition: box-shadow var(--transition-default), border-color var(--transition-default);
}

@media (max-width: 768px) {
  .home-page .home-main {
    padding: 18px;
    border-radius: 16px;
  }
}

/* ========== Week Summary Bar — refined, compact, executive ========== */
.home-page .week-summary-row.week-summary-card {
  margin-bottom: var(--space-24);
  padding: 14px 20px;
  min-height: 56px;
  border-radius: 16px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  box-shadow: var(--elevation-1);
  transition: box-shadow var(--transition-default), border-color var(--transition-default);
}

.home-page .week-summary-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}

.home-page .week-summary-center {
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.home-page .week-summary-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Hours = focal metric, label = subtle, status = soft pill */
.home-page .week-kpi-hours {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.home-page .week-kpi-hours-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.home-page .week-kpi-sep {
  color: var(--color-text-muted);
  font-weight: 400;
  margin: 0 2px;
  opacity: 0.6;
}

.home-page .week-kpi-status {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--color-text-muted);
}

.home-page .week-kpi-status.status-draft { background: var(--neutral-100); color: var(--neutral-500); }
.home-page .week-kpi-status.status-submitted { background: var(--primary-100); color: var(--primary-600); }
.home-page .week-kpi-status.status-approved { background: var(--success-100); color: var(--success-700); }
.home-page .week-kpi-status.status-rejected { background: var(--danger-100); color: var(--danger-600); }

.home-page .btn-ghost-week {
  height: 36px;
  padding: 0 12px;
  font-weight: 500;
  font-size: 0.8125rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  transition: background var(--transition-default), color var(--transition-default);
}

.home-page .btn-ghost-week:hover {
  color: var(--color-primary);
  background: var(--color-primary-tint);
}

.home-page .btn-secondary-week {
  height: 36px;
  padding: 0 14px;
  font-weight: 600;
  font-size: 0.8125rem;
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  transition: background var(--transition-default), border-color var(--transition-default), color var(--transition-default);
}

.home-page .btn-secondary-week:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--color-primary) 32%, var(--color-border-subtle));
  color: var(--color-primary);
  background: var(--color-primary-tint);
}

.home-page .btn-secondary-week:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Set Recurring Activities: secondary tertiary action */
.home-page .btn-recurring-activities {
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin-right: 0;
  padding: 0 12px;
  font-weight: 600;
  font-size: 0.8125rem;
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--transition-default), border-color var(--transition-default), color var(--transition-default);
}

.home-page .btn-recurring-activities:hover {
  border-color: color-mix(in oklab, var(--color-primary) 32%, var(--color-border-subtle));
  color: var(--color-primary);
  background: var(--color-primary-tint);
}

.home-page .btn-recurring-activities .me-1 {
  margin-right: 0.25rem;
}

/* Suggestions outline button used in the same actions row — keep it
   visually aligned with the other compact actions. */
.home-page .week-summary-actions .btn-outline-primary {
  height: 36px;
  padding: 0 12px;
  font-weight: 600;
  font-size: 0.8125rem;
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
}

.home-page .week-summary-actions .btn-outline-primary:hover {
  border-color: color-mix(in oklab, var(--color-primary) 32%, var(--color-border-subtle));
  color: var(--color-primary);
  background: var(--color-primary-tint);
}

.home-page .week-summary-actions .btn.me-2 {
  margin-right: 0 !important;
}

/* Primary CTA: Log time — strongest in the row */
.home-page .btn-primary-week {
  height: 36px;
  min-width: 104px;
  padding: 0 18px;
  font-weight: 600;
  font-size: 0.8125rem;
  border-radius: 10px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  transition: background var(--transition-default), box-shadow var(--transition-default), transform var(--transition-default);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.home-page .btn-primary-week:hover {
  background: var(--color-primary-hover);
  color: #fff;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--color-primary) 45%, transparent);
}

.home-page .btn-primary-week:active {
  background: var(--color-primary-active);
  color: #fff;
  transform: scale(0.99);
}

@media (max-width: 768px) {
  .home-page .week-summary-inner {
    grid-template-columns: 1fr;
  }
  .home-page .week-summary-center,
  .home-page .week-summary-actions {
    justify-self: stretch;
  }
}

/* ========== §3 Section Header + §4 Week Navigation – one baseline, single unit ========== */
.home-page .timesheet-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}

.home-page .timesheet-section-title-wrap {
  min-width: 0;
}

.home-page .timesheet-section-header .section-title {
  margin: 0 0 var(--space-16) 0;
}

.home-page .timesheet-section-header .section-subtitle {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text-muted);
}

.home-page .timesheet-section #timesheet-header {
  font-size: 1.375rem !important;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* §4 Week label stronger than arrows; controls = single visual unit */
.home-page .timesheet-week-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}

.home-page .timesheet-week-label {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* Week navigation — single grouped surface: [← →] [date input] */
.home-page .timesheet-section-header .week-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: background var(--transition-default), border-color var(--transition-default);
}

.home-page .timesheet-section-header .week-nav-btns {
  display: flex;
  gap: 2px;
}

.home-page .btn-week-nav {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-default), color var(--transition-default);
}

.home-page .btn-week-nav:hover {
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

.home-page .week-date-input {
  width: 108px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: background var(--transition-default), border-color var(--transition-default);
}

.home-page .week-date-input:hover {
  background: var(--color-surface-subtle);
}

.home-page .week-date-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
}

/* Day cards row — refined: 140px-ish cards in a single rhythm. Active
   state is a clean primary outline + tinted background. */
.home-page .timesheet-days-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--space-24);
  /* Today / selected — primary-tinted */
  --day-today-bg: #F7FAFF;
  --day-today-border: var(--color-primary);
  --day-today-fg: var(--color-primary-hover);
  --day-today-hover-bg: #EEF4FF;
  /* Clocked in (can log time) */
  --day-clockedin-bg: var(--color-surface);
  --day-clockedin-border: var(--color-border-subtle);
  /* Not clocked in yet */
  --day-notclocked-bg: #FAFAF9;
  --day-notclocked-border: #E7E5E4;
  --day-notclocked-fg: #78716C;
  /* Time logged */
  --day-logged-bg: #ECFDF5;
  --day-logged-border: #A7F3D0;
  --day-logged-fg: #047857;
  /* Future */
  --day-future-bg: var(--neutral-50);
  --day-future-border: var(--color-border-subtle);
}

.home-page .timesheet-day {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.home-page .timesheet-day.day-clickable {
  cursor: pointer;
}

.home-page .timesheet-day:not(.day-clickable):not(.day-not-present) {
  cursor: default;
}

.home-page .timesheet-day.day-not-present {
  cursor: pointer;
}

/* ========== Timesheet day cards – refined, elegant ========== */

.home-page .timesheet-day .day-card {
  width: 100%;
  max-width: 140px;
  min-height: 132px;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  transition: border-color var(--transition-default), background var(--transition-default), box-shadow var(--transition-default), transform var(--transition-default);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Clocked in: can log time */
.home-page .timesheet-day.day-clickable .day-card.can-log {
  border-color: var(--day-clockedin-border);
  background: var(--day-clockedin-bg);
}

.home-page .timesheet-day.day-clickable:hover .day-card.can-log {
  background: var(--color-primary-tint);
  border-color: color-mix(in oklab, var(--color-primary) 32%, var(--color-border-subtle));
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

/* Today / selected — strong primary outline */
.home-page .timesheet-day .day-card.active {
  border: 2px solid var(--color-primary);
  background: var(--day-today-bg);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 14%, transparent);
}

.home-page .timesheet-day .day-card.active .day-date {
  font-weight: 700;
  color: var(--day-today-fg);
}

.home-page .timesheet-day.day-clickable:hover .day-card.can-log.active {
  background: var(--day-today-hover-bg);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 22%, transparent);
}

/* Future */
.home-page .timesheet-day .day-card.future {
  background: var(--day-future-bg);
  border-color: var(--day-future-border);
}

.home-page .timesheet-day .day-card.future .day-name,
.home-page .timesheet-day .day-card.future .day-date,
.home-page .timesheet-day .day-card.future .day-hours {
  color: var(--color-text-muted);
}

/* Not clocked in yet */
.home-page .timesheet-day .day-card.not-present {
  background: var(--day-notclocked-bg);
  border-color: var(--day-notclocked-border);
}

.home-page .timesheet-day .day-card.not-present .day-name {
  color: var(--day-notclocked-fg);
}

.home-page .timesheet-day .day-card.not-present .day-hours {
  color: var(--color-text-muted);
}

/* Time logged */
.home-page .timesheet-day .day-card.logged {
  background: var(--day-logged-bg);
  border-color: var(--day-logged-border);
}

.home-page .timesheet-day .day-card.logged .day-hours {
  color: var(--day-logged-fg);
  font-weight: 600;
}

/* Typography: day name small label */
.home-page .timesheet-day .day-card .day-name {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  order: 1;
}

/* Day number: focal */
.home-page .timesheet-day .day-card .day-date {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  margin: 2px 0 0;
  letter-spacing: -0.025em;
  order: 2;
}

/* Hours: subtle below date */
.home-page .timesheet-day .day-card .day-hours {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 6px;
  order: 3;
}

/* Status dot: hidden for now (no approved/rejected/submitted emphasis) */
.home-page .timesheet-day .day-card .day-status-dot {
  display: none;
}

/* Legacy day-inner – flat, modern (keep for buildToday until day-card in JS) */
.home-page .timesheet-day .day-inner {
  height: 60px;
  min-width: 60px;
  padding: 0 16px;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0;
  background: #FAFBFC;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--sg-caption);
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
  box-shadow: none;
}

.home-page .timesheet-day:hover .day-inner {
  background: #F8FAFC;
  border-color: #94A3B8;
}

/* Daily entries panel (guide §6B) */
.home-page .daily-entries-panel {
  margin-top: var(--space-24);
  padding: var(--card-padding);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-card);
}

.home-page .daily-entries-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sg-space-4);
  flex-wrap: wrap;
  gap: var(--sg-space-3);
}

.home-page .daily-entries-title {
  font-size: var(--text-card-title);
  font-weight: var(--text-card-title-weight);
  color: var(--sg-text);
  margin: 0;
}

.home-page .btn-add-entry-day {
  font-weight: 600;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-size: var(--text-caption);
  transition: background 0.2s ease;
}

.home-page .btn-add-entry-day:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

.home-page .btn-add-entry-day:active {
  background: var(--color-primary-active);
  transform: scale(0.99);
}

.home-page .daily-entries-list {
  min-height: 60px;
}

.home-page .daily-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sg-space-3) var(--sg-space-4);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  margin-bottom: var(--sg-space-2);
  background: var(--sg-card);
  transition: background 0.15s ease;
}

.home-page .daily-entry-row:hover {
  background: var(--sg-bg);
}

.home-page .daily-entry-row .entry-primary {
  font-size: var(--sg-body);
  font-weight: 500;
  color: var(--sg-text);
}

.home-page .daily-entry-row .entry-secondary {
  font-size: var(--sg-caption);
  color: var(--sg-muted);
  margin-top: 2px;
}

.home-page .daily-entry-row .entry-hours {
  font-weight: 600;
  color: var(--sg-text);
  margin-left: auto;
  padding-left: var(--sg-space-4);
}

.home-page .daily-entry-row .entry-actions {
  display: flex;
  gap: var(--sg-space-2);
  margin-left: var(--sg-space-3);
}

.home-page .daily-entry-row .entry-actions .btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--sg-radius-sm);
  background: transparent;
  color: var(--sg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.home-page .daily-entry-row .entry-actions .btn-icon:hover {
  background: var(--sg-bg);
  color: var(--sg-primary);
}

.home-page .daily-entries-total {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  border-top: 1px solid var(--color-border-subtle);
  border-top: 1px solid var(--sg-border);
  font-weight: 600;
  font-size: var(--sg-body);
  color: var(--sg-text);
}

.home-page .timesheet-section #submit-for-approval-btn {
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--sg-radius);
  font-size: var(--sg-body);
}

/* ----- Section 2: Projects (light KPI tiles, guide §7) ----- */
.home-page .projects-section .projects-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  box-shadow: var(--elevation-1);
}

.home-page .projects-section .projects-card .section-title {
  font-size: var(--text-card-title);
  font-weight: var(--text-card-title-weight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-16);
}

.home-page .projects-section .projects-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

.home-page .projects-section .projects-kpi-card {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--compact-padding);
  text-align: center;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.home-page .projects-section .projects-kpi-card:hover {
  box-shadow: var(--elevation-1);
  border-color: var(--color-border-strong);
}

.home-page .projects-section .projects-kpi-card .stat-value {
  font-size: var(--text-metric);
  font-weight: var(--text-metric-weight);
  color: var(--color-text-primary);
}

.home-page .projects-section .projects-kpi-card .stat-label {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.home-page .projects-section .projects-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border-subtle);
}

/* Secondary button (DESIGN §8: subtle surface, border visible) */
.home-page .projects-section .btn-outline-primary {
  font-weight: 600;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface);
  transition: background 0.2s ease, color 0.2s ease;
}

.home-page .projects-section .btn-outline-primary:hover {
  background: var(--sg-primary);
  color: #fff;
}

/* ----- Section 3 & 4: Attendance + Leave Days (neutral cards) ----- */
.home-page .attendance-section .row,
.home-page .leave-section .row {
  --bs-gutter-x: var(--sg-space-4);
  --bs-gutter-y: var(--sg-space-4);
}

.home-page .attendance-section .ds-card,
.home-page .attendance-section .card.bg-gray-blue.semi-round,
.home-page .leave-section .ds-card,
.home-page .leave-section .card.bg-gray-blue.semi-round {
  height: 100%;
  padding: var(--sg-space-5);
  border-radius: var(--sg-radius-lg);
  border: 1px solid var(--sg-border);
  background: var(--sg-surface-card);
  box-shadow: var(--sg-shadow-sm);
}

.home-page .attendance-section .card.bg-gray-blue.semi-round h4,
.home-page .leave-section .card.bg-gray-blue.semi-round h4 {
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--sg-navy);
  margin-bottom: var(--sg-space-2);
}

.home-page .attendance-section .card.bg-gray-blue.semi-round p,
.home-page .leave-section .card.bg-gray-blue.semi-round p {
  font-size: var(--sg-caption-muted);
  color: var(--sg-muted);
  margin-bottom: var(--sg-space-3);
  line-height: 1.4;
}

.home-page .attendance-section .card.bg-gray-blue.semi-round h5,
.home-page .leave-section .card.bg-gray-blue.semi-round h5 {
  font-size: var(--sg-stat) !important;
  font-weight: var(--sg-stat-weight);
  color: var(--sg-navy);
}

.home-page .leave-section .card .btn {
  font-size: var(--sg-caption);
  padding: 6px 14px;
  border-radius: var(--sg-radius-sm);
}

/* ----- Section 5: Holidays and Leaves calendar — refined, executive ----- */
.home-page .calendar-section .section-title {
  margin-bottom: var(--space-16);
}

.home-page .calendar-wrapper {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 20px 22px 18px;
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  max-width: 100%;
  overflow-x: auto;
}

/* Nav: view toggle + title left, Today + chevrons right */
.home-page .calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.home-page .calendar-nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Segmented Month/Week toggle */
.home-page .calendar-view-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  overflow: hidden;
  background: #F4F6F8;
  gap: 2px;
}

.home-page .btn-calendar-view {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 5px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  letter-spacing: 0.005em;
  transition: background var(--transition-default), color var(--transition-default), box-shadow var(--transition-default);
}

.home-page .btn-calendar-view + .btn-calendar-view {
  border-left: none;
}

.home-page .btn-calendar-view:hover:not(.active) {
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-text-primary);
}

.home-page .btn-calendar-view.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.home-page .calendar-nav-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.home-page .calendar-nav-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.home-page .btn-calendar-today {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: background var(--transition-default), border-color var(--transition-default), color var(--transition-default);
}

.home-page .btn-calendar-today:hover {
  background: var(--color-primary-tint);
  border-color: color-mix(in oklab, var(--color-primary) 32%, var(--color-border-subtle));
  color: var(--color-primary);
}

.home-page .btn-calendar-chevron {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-default), color var(--transition-default), border-color var(--transition-default);
}

.home-page .btn-calendar-chevron:hover {
  background: var(--color-primary-tint);
  border-color: color-mix(in oklab, var(--color-primary) 32%, var(--color-border-subtle));
  color: var(--color-primary);
}

/* Grid: 7 columns, soft borders for a calmer surface */
.home-page .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid #edf1f5;
  border-radius: 10px;
  overflow: hidden;
}

/* Week view: same layout as month – one row of day names, one row of 7 day cells */
.home-page .calendar-grid[data-view="week"] .calendar-cell-week {
  min-height: 150px;
}

.home-page .calendar-grid[data-view="week"] .calendar-cell-week,
.home-page .calendar-grid[data-view="week"] .day-name {
  min-width: 80px;
}

/* Day names row (month view) */
.home-page .calendar-grid .day-name {
  padding: 10px 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  background: #FAFCFE;
  text-align: center;
  border: none;
  border-bottom: 1px solid #edf1f5;
  border-right: 1px solid #edf1f5;
}

.home-page .calendar-grid .day-name:nth-child(7) {
  border-right: none;
}

/* Day cell: clean white, day number top-right, events below */
.home-page .calendar-grid .calendar-cell {
  min-height: 110px;
  padding: 6px;
  border-right: 1px solid #edf1f5;
  border-bottom: 1px solid #edf1f5;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  transition: background var(--transition-default);
}

.home-page .calendar-grid .calendar-cell:nth-child(7n) {
  border-right: none;
}

.home-page .calendar-grid .calendar-cell:not(.day-name):hover {
  background: #fafcff;
}

.home-page .calendar-grid .calendar-cell:empty {
  background: #FAFCFE;
}

/* Day number: top-right */
.home-page .calendar-grid .calendar-cell .calendar-day-num {
  display: block;
  text-align: right;
  padding: 2px 6px 4px 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.2;
}

/* Today: subtle primary tint + small primary chip for the number */
.home-page .calendar-grid .calendar-cell.calendar-day-today {
  background: #f2f7ff;
  box-shadow: inset 0 0 0 1px #cfe0ff;
}

.home-page .calendar-grid .calendar-cell.calendar-day-today .calendar-day-num {
  font-weight: 600;
  width: 24px;
  height: 24px;
  line-height: 24px;
  padding: 0;
  margin-left: auto;
  margin-right: 4px;
  margin-top: 2px;
  text-align: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}

.home-page .calendar-grid .calendar-cell.weekend-day {
  background: #FAFCFE;
}

.home-page .calendar-grid .calendar-cell.weekend-day .calendar-day-num {
  color: var(--color-text-muted);
}

/* Event chips container */
.home-page .calendar-grid .calendar-cell-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
  min-height: 0;
}

/* Event labels — soft, rounded pills */
.home-page .calendar-grid .calendar-cell .event-label {
  font-size: 0.6875rem;
  line-height: 1.3;
  padding: 2px 8px;
  border-radius: 8px;
  text-align: left;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  flex-shrink: 0;
}

.home-page .calendar-grid .calendar-cell .event-label-holiday {
  background: #fff1f0;
  color: #c2410c;
}

.home-page .calendar-grid .calendar-cell .event-label-leave {
  background: #eff6ff;
  color: var(--color-primary-hover);
}

/* Sick leave and retroactive log entries (e.g. "Name's Log"). */
.home-page .calendar-grid .calendar-cell .event-label-leave-sick {
  background: #ecfdf5;
  color: #047857;
}

.home-page .calendar-grid .calendar-cell .event-label-birthday {
  background: #fef3c7;
  color: #b45309;
}

.home-page .calendar-grid .calendar-cell.calendar-day-today .event-label-holiday {
  background: #ffe4e0;
  color: #b91c1c;
}

.home-page .calendar-grid .calendar-cell.calendar-day-today .event-label-leave {
  background: #dfeaff;
  color: var(--color-primary-active);
}

.home-page .calendar-grid .calendar-cell.calendar-day-today .event-label-leave-sick {
  background: #d1fae5;
  color: #065f46;
}

.home-page .calendar-grid .calendar-cell.calendar-day-today .event-label-birthday {
  background: #fde68a;
  color: #92400e;
}

.home-page .calendar-grid .calendar-cell-more {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-primary-hover);
  margin-top: 0;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--color-primary-tint);
  cursor: inherit;
}

.home-page .calendar-grid .calendar-cell.calendar-day-today .calendar-cell-more {
  background: #dfeaff;
  color: var(--color-primary-active);
}

/* Legend — compact inline pills with subtle bullets */
.home-page .calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #edf1f5;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.home-page .calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.home-page .legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.home-page .legend-holiday { background: #f97316; }
.home-page .legend-leave { background: var(--color-primary); }
.home-page .legend-leave-sick { background: #047857; }
.home-page .legend-birthday { background: #d97706; }
.home-page .legend-weekend { background: var(--neutral-400); }

/* Clickable day cells */
.home-page .calendar-grid .calendar-cell-clickable {
  cursor: pointer;
}

.home-page .calendar-grid .calendar-cell-clickable:hover {
  background: #fafcff;
}

.home-page .calendar-grid .calendar-cell.calendar-day-today.calendar-cell-clickable:hover {
  background: #e9f1ff;
}

/* Modal: calendar day events – header and close button */
.calendar-day-events-modal-content .calendar-day-events-modal-header {
  align-items: center;
  border-bottom: 1px solid var(--sg-border);
  padding: var(--sg-space-4) var(--sg-space-5);
}

.calendar-day-events-modal-content .modal-title {
  font-size: var(--sg-title);
  font-weight: var(--sg-title-weight);
  color: var(--sg-navy);
  margin: 0;
}

.btn-calendar-modal-close {
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  margin-left: auto;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-sm);
  background: var(--sg-surface-elevated);
  color: var(--sg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-calendar-modal-close:hover {
  background: var(--sg-surface);
  border-color: var(--sg-border);
  color: var(--sg-navy);
}

.btn-calendar-modal-close:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--sg-accent);
}

.calendar-day-events-modal-footer {
  border-top: 1px solid var(--sg-border);
  padding: var(--sg-space-3) var(--sg-space-5);
}

.btn-calendar-modal-close-footer {
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--sg-radius-sm);
  border: 1px solid var(--sg-border);
  background: var(--sg-surface-elevated);
  color: var(--sg-text-secondary);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-calendar-modal-close-footer:hover {
  background: var(--sg-surface);
  border-color: var(--sg-accent);
  color: var(--sg-navy);
}

.home-page .calendar-day-events-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-page .calendar-day-events-list li {
  padding: var(--sg-space-2) var(--sg-space-3);
  margin-bottom: var(--sg-space-2);
  border-radius: var(--sg-radius-sm);
  font-size: var(--sg-caption);
}

.home-page .calendar-day-events-list li.calendar-event-type-holiday {
  background: #fef2f2;
  color: #991b1b;
  border-left: 3px solid #f87171;
}

.home-page .calendar-day-events-list li.calendar-event-type-annual-leave,
.home-page .calendar-day-events-list li.calendar-event-type-sick-leave,
.home-page .calendar-day-events-list li.calendar-event-type-maternity-leave,
.home-page .calendar-day-events-list li.calendar-event-type-compensatory-leave {
  background: #eff6ff;
  color: #1e40af;
  border-left: 3px solid #60a5fa;
}

/* Sick / log leaves in the day-events modal — green to match calendar pills. */
.home-page .calendar-day-events-list li.is-sick {
  background: #ecfdf5;
  color: #065f46;
  border-left-color: #34d399;
}

.home-page .calendar-day-events-list li.calendar-event-type-birthday {
  background: #fffbeb;
  color: #92400e;
  border-left: 3px solid #fbbf24;
}

[data-theme="dark"] .home-page .calendar-day-events-list li.calendar-event-type-annual-leave,
[data-theme="dark"] .home-page .calendar-day-events-list li.calendar-event-type-sick-leave,
[data-theme="dark"] .home-page .calendar-day-events-list li.calendar-event-type-maternity-leave,
[data-theme="dark"] .home-page .calendar-day-events-list li.calendar-event-type-compensatory-leave {
  background: rgba(96, 165, 250, 0.2);
  color: #93c5fd;
  border-left-color: #60a5fa;
}

[data-theme="dark"] .home-page .calendar-day-events-list li.is-sick {
  background: rgba(52, 211, 153, 0.2);
  color: #6ee7b7;
  border-left-color: #34d399;
}

[data-theme="dark"] .home-page .calendar-day-events-list li.calendar-event-type-holiday {
  background: rgba(248, 113, 113, 0.2);
  color: #fca5a5;
  border-left-color: #f87171;
}

[data-theme="dark"] .home-page .calendar-day-events-list li.calendar-event-type-birthday {
  background: rgba(251, 191, 36, 0.2);
  color: #fcd34d;
  border-left-color: #fbbf24;
}

/* ----- Dividers ----- */
.home-page hr {
  border: none;
  height: 1px;
  background: var(--sg-border);
  margin: var(--sg-section-gap) 0;
}

/* ----- Buttons (global on home) ----- */
.home-page .btn-dark-blue {
  background: var(--sg-blue) !important;
  border-color: var(--sg-blue);
}

.home-page .btn-green {
  background: var(--sg-mint) !important;
  border-color: var(--sg-mint);
}

.home-page .btn-red {
  background: var(--sg-coral) !important;
  border-color: var(--sg-coral);
}

.home-page .btn-blue {
  background: var(--sg-accent) !important;
  border-color: var(--sg-accent);
}

/* ========== Log Time Entry Modal (refined per guide) ========== */
/* Guide: width 720px, radius 18px, soft shadow */
#newTimesheetModal .modal-dialog {
  max-width: 720px;
}

#newTimesheetModal .modal-content {
  border-radius: 18px;
  border: 1px solid #E5E7EB;
  border-left: 4px solid #1E3A8A;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  font-family: var(--sg-font);
}

#newTimesheetModal .modal-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid #E5E7EB;
}

#newTimesheetModal .modal-title {
  font-size: 22px;
  font-weight: 600;
  color: #111827;
}

#newTimesheetModal .modal-header .modal-subtitle {
  font-size: 14px;
  color: #6B7280;
  margin-top: 4px;
}

#newTimesheetModal .modal-body {
  padding: 0 28px 28px;
}

/* Form: 20px between groups, 2-col grid on desktop */
#newTimesheetModal .row.g-3 {
  --bs-gutter-y: 20px;
}

#newTimesheetModal .form-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

/* Inputs: primary focus ring #1E3A8A */
#newTimesheetModal .form-control {
  height: 44px;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  font-size: 15px;
  padding: 10px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#newTimesheetModal .form-control:focus {
  border-color: #1E3A8A;
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
  outline: none;
}

/* Select2: primary accent */
#newTimesheetModal .select2-container--default .select2-selection--single {
  height: 44px;
  padding: 8px 14px;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#newTimesheetModal .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #1E3A8A;
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
}

#newTimesheetModal .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 26px;
  color: #374151;
}

#newTimesheetModal .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
}

#newTimesheetModal .select2-dropdown {
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#newTimesheetModal .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #1E3A8A;
  color: #fff;
}

#newTimesheetModal .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  padding: 10px 14px;
  height: 40px;
}

#newTimesheetModal .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #1E3A8A;
  outline: none;
}

/* Modal footer: primary Log button emphasized */
#newTimesheetModal .modal-footer {
  padding: 20px 28px 28px;
  gap: 12px;
  border-top: 1px solid #E5E7EB;
  justify-content: flex-end;
}

#newTimesheetModal .btn-modal-cancel {
  background: #fff;
  color: #6B7280;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

#newTimesheetModal .btn-modal-cancel:hover {
  background: #F9FAFB;
  border-color: #9CA3AF;
  color: #374151;
}

/* Log Time: primary button, full emphasis */
#newTimesheetModal .btn-modal-primary {
  background: #1E3A8A;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 32px;
  font-weight: 600;
  font-size: 15px;
  height: 44px;
  min-width: 140px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

#newTimesheetModal .btn-modal-primary:hover {
  background: #1E40AF;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.35);
}

#newTimesheetModal .btn-modal-primary:active {
  transform: translateY(1px);
}

/* Add Another Entry: primary accent, dashed */
#newTimesheetModal .btn-add-entry {
  background: transparent;
  color: var(--color-primary);
  border: 1px dashed #1E3A8A;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#newTimesheetModal .btn-add-entry:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  border-color: var(--color-primary-hover);
  color: #1E40AF;
}

/* Textarea: radius 12px, padding 14px (guide) */
#newTimesheetModal textarea.form-control {
  resize: vertical;
  min-height: 80px;
  border-radius: 12px;
  padding: 14px;
  height: auto;
}

#newTimesheetModal .required-ast {
  color: #DC2626;
}

/* ========== Update Timesheet Modal (refined, same system as Log Time) ========== */
#updateTimesheetModal .modal-dialog {
  max-width: 720px;
}

#updateTimesheetModal .update-timesheet-modal-content {
  border-radius: 18px;
  border: 1px solid #E5E7EB;
  border-left: 4px solid #1E3A8A;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  font-family: var(--sg-font);
}

#updateTimesheetModal .update-modal-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid #E5E7EB;
}

#updateTimesheetModal .update-modal-title {
  font-size: 22px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

#updateTimesheetModal .modal-body {
  padding: 20px 28px 24px;
}

#updateTimesheetModal .row.g-3 {
  --bs-gutter-y: 20px;
}

#updateTimesheetModal .form-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#updateTimesheetModal .form-control {
  height: 44px;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  font-size: 15px;
  padding: 10px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#updateTimesheetModal .form-control:focus {
  border-color: #1E3A8A;
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
  outline: none;
}

#updateTimesheetModal textarea.form-control {
  border-radius: 12px;
  padding: 14px;
  height: auto;
  min-height: 80px;
}

#updateTimesheetModal .select2-container--default .select2-selection--single {
  height: 44px;
  padding: 8px 14px;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#updateTimesheetModal .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #1E3A8A;
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
}

#updateTimesheetModal .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #1E3A8A;
  color: #fff;
}

#updateTimesheetModal .modal-footer {
  padding: 20px 28px 28px;
  gap: 12px;
  border-top: 1px solid #E5E7EB;
  justify-content: flex-end;
}

#updateTimesheetModal .btn-modal-cancel {
  background: #fff;
  color: #6B7280;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

#updateTimesheetModal .btn-modal-cancel:hover {
  background: #F9FAFB;
  border-color: #9CA3AF;
  color: #374151;
}

#updateTimesheetModal .btn-modal-primary {
  background: #1E3A8A;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 32px;
  font-weight: 600;
  font-size: 15px;
  height: 44px;
  min-width: 140px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

#updateTimesheetModal .btn-modal-primary:hover {
  background: #1E40AF;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.35);
}

#updateTimesheetModal .btn-add-entry-update {
  background: transparent;
  color: var(--color-primary);
  border: 1px dashed #1E3A8A;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#updateTimesheetModal .btn-add-entry-update:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  border-color: var(--color-primary-hover);
  color: #1E40AF;
}

#updateTimesheetModal .required-ast {
  color: #DC2626;
}

/* ========== Appeal Missing Clock-in Modal (same as Log Time / Update Timesheet) ========== */
#appealMissingClockInModal .modal-dialog {
  max-width: 720px;
}

#appealMissingClockInModal .appeal-missing-clockin-modal-content {
  border-radius: 18px;
  border: 1px solid #E5E7EB;
  border-left: 4px solid #1E3A8A;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  font-family: var(--sg-font);
}

#appealMissingClockInModal .modal-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid #E5E7EB;
}

#appealMissingClockInModal .modal-title {
  font-size: 22px;
  font-weight: 600;
  color: #111827;
}

#appealMissingClockInModal .modal-header .modal-subtitle {
  font-size: 14px;
  color: #6B7280;
  margin-top: 4px;
}

#appealMissingClockInModal .modal-body {
  padding: 0 28px 28px;
}

#appealMissingClockInModal .row.g-3 {
  --bs-gutter-y: 20px;
}

#appealMissingClockInModal .form-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#appealMissingClockInModal .form-control {
  height: 44px;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  font-size: 15px;
  padding: 10px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#appealMissingClockInModal .form-control:focus {
  border-color: #1E3A8A;
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
  outline: none;
}

#appealMissingClockInModal #missing_appeal_type {
  width: 100%;
  min-width: 280px;
  max-width: 100%;
  box-sizing: border-box;
}

#appealMissingClockInModal textarea.form-control {
  resize: vertical;
  min-height: 80px;
  border-radius: 12px;
  padding: 14px;
  height: auto;
}

#appealMissingClockInModal .appeal-missing-dates-list {
  border-radius: 10px;
  font-size: 14px;
}

#appealMissingClockInModal .appeal-missing-date-chip {
  background: #E0E7FF;
  color: #3730A3;
  border-radius: 8px;
}

#appealMissingClockInModal .appeal-remove-date {
  color: #6366F1;
  font-size: 18px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.8;
}

#appealMissingClockInModal .appeal-remove-date:hover {
  opacity: 1;
  color: #4338CA;
}

#appealMissingClockInModal .modal-footer {
  padding: 20px 28px 28px;
  gap: 12px;
  border-top: 1px solid #E5E7EB;
  justify-content: flex-end;
}

#appealMissingClockInModal .btn-modal-cancel {
  background: #fff;
  color: #6B7280;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

#appealMissingClockInModal .btn-modal-cancel:hover {
  background: #F9FAFB;
  border-color: #9CA3AF;
  color: #374151;
}

#appealMissingClockInModal .btn-modal-primary {
  background: #1E3A8A;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 32px;
  font-weight: 600;
  font-size: 15px;
  height: 44px;
  min-width: 140px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

#appealMissingClockInModal .btn-modal-primary:hover {
  background: #1E40AF;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.35);
}

#appealMissingClockInModal .required-ast {
  color: #DC2626;
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
  .home-page .timesheet-day {
    flex: 0 0 calc(50% - 6px);
    min-width: 0;
  }

  .home-page .timesheet-day .day-card {
    max-width: none;
    min-height: 110px;
  }

  .home-page .timesheet-day .day-inner {
    height: 44px;
    width: 44px;
    font-size: 0.75rem;
  }

  .home-page .timesheet-section-header {
    align-items: stretch;
  }

  .home-page .timesheet-week-controls {
    width: 100%;
    justify-content: space-between;
  }

  .home-page .projects-section .stat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sg-space-3);
  }

  .home-page .projects-section .stat-value,
  .home-page .projects-section .card h5 {
    font-size: 1.5rem !important;
  }
}

/* ----- Dark theme: home page overrides (hardcoded colors) ----- */
[data-theme="dark"] .home-page .home-header {
  background: var(--sg-card);
  border-bottom-color: var(--sg-border);
}

[data-theme="dark"] .home-page .clock-card {
  background: linear-gradient(135deg, #1E3A8A 0%, #2D4FB8 55%, #3A63D6 100%);
  border: none;
  box-shadow: 0 12px 32px -16px rgba(37, 99, 235, 0.55);
}

[data-theme="dark"] .home-page .clock-card-today-label,
[data-theme="dark"] .home-page .clock-card-timezone {
  color: rgba(255, 255, 255, 0.78);
}

[data-theme="dark"] .home-page .clock-card-date { color: #fff; }
[data-theme="dark"] .home-page .clock-card-state-pill {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Dark: subtle layered surface, very soft stroke, no heavy slab */
[data-theme="dark"] .home-page .week-summary-row.week-summary-card {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
  box-shadow: var(--elevation-1);
}

[data-theme="dark"] .home-page .week-kpi-hours {
  color: #fff;
}

[data-theme="dark"] .home-page .week-kpi-hours-label {
  color: rgba(148, 163, 184, 0.9);
}

[data-theme="dark"] .home-page .week-kpi-status {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.95);
}

[data-theme="dark"] .home-page .week-kpi-status.status-draft { background: rgba(255, 255, 255, 0.08); color: var(--neutral-400); }
[data-theme="dark"] .home-page .week-kpi-status.status-submitted { background: rgba(92, 148, 242, 0.2); color: var(--primary-300); }
[data-theme="dark"] .home-page .week-kpi-status.status-approved { background: rgba(52, 211, 153, 0.2); color: var(--success-300); }
[data-theme="dark"] .home-page .week-kpi-status.status-rejected { background: rgba(248, 113, 113, 0.2); color: var(--danger-300); }

[data-theme="dark"] .home-page .btn-primary-week {
  background: var(--primary-500);
}

[data-theme="dark"] .home-page .btn-primary-week:hover {
  background: var(--primary-400);
}

[data-theme="dark"] .home-page .timesheet-section #timesheet-header {
  color: #f1f5f9;
}

[data-theme="dark"] .home-page .timesheet-section-header .section-subtitle {
  color: rgba(226, 232, 240, 0.7);
}

[data-theme="dark"] .home-page .timesheet-week-label {
  color: rgba(226, 232, 240, 0.95);
}

[data-theme="dark"] .home-page .timesheet-section-header .week-switcher {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .home-page .btn-week-nav {
  color: rgba(226, 232, 240, 0.8);
}

[data-theme="dark"] .home-page .btn-week-nav:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

[data-theme="dark"] .home-page .week-date-input {
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .home-page .home-main {
  background: var(--sg-card);
  border-color: var(--sg-border);
}

[data-theme="dark"] .home-page .timesheet-day .day-card {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .home-page .timesheet-day .day-card .day-name,
[data-theme="dark"] .home-page .timesheet-day .day-card .day-date,
[data-theme="dark"] .home-page .timesheet-day .day-card .day-hours {
  color: #E2E8F0;
  background: none;
}

[data-theme="dark"] .home-page .timesheet-days-row {
  --day-today-bg: rgba(99, 102, 241, 0.22);
  --day-today-border: #6366F1;
  --day-today-fg: #A5B4FC;
  --day-today-hover-bg: rgba(99, 102, 241, 0.3);
  --day-clockedin-bg: var(--color-surface);
  --day-clockedin-border: var(--color-border-subtle);
  --day-notclocked-bg: rgba(120, 113, 108, 0.12);
  --day-notclocked-border: var(--neutral-600);
  --day-notclocked-fg: #D6D3D1;
  --day-logged-bg: rgba(16, 185, 129, 0.25);
  --day-logged-border: rgba(52, 211, 153, 0.5);
  --day-logged-fg: #6EE7B7;
  --day-future-bg: var(--color-surface);
  --day-future-border: var(--color-border-subtle);
}

[data-theme="dark"] .home-page .timesheet-day.day-clickable .day-card.can-log {
  background: var(--day-clockedin-bg);
  border-color: var(--day-clockedin-border);
}

[data-theme="dark"] .home-page .timesheet-day .day-card.active .day-name,
[data-theme="dark"] .home-page .timesheet-day .day-card.active .day-date,
[data-theme="dark"] .home-page .timesheet-day .day-card.active .day-hours {
  color: var(--day-today-fg);
  background: none;
}

[data-theme="dark"] .home-page .timesheet-day .day-card.active .day-date {
  font-weight: 700;
}

[data-theme="dark"] .home-page .timesheet-day .day-card.not-present .day-name {
  color: var(--day-notclocked-fg);
  background: none;
}

[data-theme="dark"] .home-page .timesheet-day .day-card.not-present .day-date,
[data-theme="dark"] .home-page .timesheet-day .day-card.not-present .day-hours {
  color: var(--color-text-muted);
}

[data-theme="dark"] .home-page .timesheet-day .day-card.logged .day-name,
[data-theme="dark"] .home-page .timesheet-day .day-card.logged .day-date {
  color: #E2E8F0;
  background: none;
}

[data-theme="dark"] .home-page .timesheet-day .day-card.logged .day-hours {
  color: var(--day-logged-fg);
}

[data-theme="dark"] .home-page .timesheet-day .day-card.future {
  background: var(--day-future-bg);
  border-color: var(--day-future-border);
}

[data-theme="dark"] .home-page .timesheet-day .day-card.future .day-name,
[data-theme="dark"] .home-page .timesheet-day .day-card.future .day-date,
[data-theme="dark"] .home-page .timesheet-day .day-card.future .day-hours {
  color: var(--color-text-muted);
}

[data-theme="dark"] .home-page .timesheet-day .day-inner {
  background: var(--sg-surface);
  border-color: var(--sg-border);
}

/* Fallback for legacy current-day markup still using .day-inner/.custom-day */
[data-theme="dark"] .home-page .timesheet-day .day-inner.day-yet,
[data-theme="dark"] .home-page .timesheet-day .custom-day.day-yet {
  background: #DBEAFE !important;
  border-color: #93C5FD !important;
}

[data-theme="dark"] .home-page .timesheet-day .day-inner.day-yet span,
[data-theme="dark"] .home-page .timesheet-day .custom-day.day-yet span {
  color: #0F172A !important;
}

[data-theme="dark"] .home-page .calendar-wrapper {
  background: var(--sg-card);
  border-color: var(--sg-border);
}

[data-theme="dark"] .home-page .calendar-nav-title {
  color: var(--sg-text);
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell {
  background: var(--sg-surface);
  border-color: var(--sg-border);
  color: var(--sg-text-secondary);
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell .calendar-day-num {
  color: var(--sg-text-secondary);
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell.calendar-day-today {
  background: rgba(63, 122, 224, 0.18);
  box-shadow: inset 0 0 0 1px rgba(63, 122, 224, 0.4);
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell.calendar-day-today .calendar-day-num {
  background: var(--primary-500);
  color: #fff;
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell.weekend-day {
  background: var(--neutral-900);
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell.weekend-day .calendar-day-num {
  color: var(--neutral-400);
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell:empty {
  background: var(--sg-bg);
}

/* Leave and event labels on calendar cells – visible in dark mode */
[data-theme="dark"] .home-page .calendar-grid .calendar-cell .event-label-leave {
  background: rgba(96, 165, 250, 0.25);
  color: #93c5fd;
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell.calendar-day-today .event-label-leave {
  background: rgba(96, 165, 250, 0.4);
  color: #bfdbfe;
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell .event-label-leave-sick {
  background: rgba(52, 211, 153, 0.22);
  color: #6ee7b7;
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell.calendar-day-today .event-label-leave-sick {
  background: rgba(52, 211, 153, 0.38);
  color: #a7f3d0;
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell .event-label-holiday {
  background: rgba(248, 113, 113, 0.25);
  color: #fca5a5;
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell.calendar-day-today .event-label-holiday {
  background: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell .event-label-birthday {
  background: rgba(251, 191, 36, 0.25);
  color: #fcd34d;
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell.calendar-day-today .event-label-birthday {
  background: rgba(251, 191, 36, 0.35);
  color: #fde68a;
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell-more {
  background: rgba(96, 165, 250, 0.3);
  color: #93c5fd;
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell.calendar-day-today .calendar-cell-more {
  background: rgba(96, 165, 250, 0.5);
  color: #bfdbfe;
}

[data-theme="dark"] .home-page .calendar-legend {
  border-top-color: var(--sg-border);
  color: var(--sg-muted);
}

[data-theme="dark"] .home-page .calendar-view-toggle {
  border-color: var(--color-border-subtle);
  background: rgba(15, 23, 42, 0.5);
}

[data-theme="dark"] .home-page .btn-calendar-view {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .home-page .btn-calendar-view:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

[data-theme="dark"] .home-page .btn-calendar-view.active {
  background: var(--color-primary);
  color: #fff;
}

[data-theme="dark"] .home-page .btn-calendar-today,
[data-theme="dark"] .home-page .btn-calendar-chevron {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .home-page .btn-calendar-today:hover,
[data-theme="dark"] .home-page .btn-calendar-chevron:hover {
  background: rgba(63, 122, 224, 0.18);
  border-color: var(--color-primary);
  color: var(--primary-300);
}

[data-theme="dark"] .home-page .calendar-grid {
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .home-page .calendar-grid .day-name {
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: var(--color-border-subtle);
  border-right-color: var(--color-border-subtle);
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell {
  border-right-color: var(--color-border-subtle);
  border-bottom-color: var(--color-border-subtle);
}

[data-theme="dark"] .home-page .calendar-grid .calendar-cell:not(.day-name):hover,
[data-theme="dark"] .home-page .calendar-grid .calendar-cell-clickable:hover {
  background: rgba(63, 122, 224, 0.08);
}


[data-theme="dark"] .home-page .ds-card {
  background: var(--sg-card);
  border-color: var(--sg-border);
}

/* Global card/text consistency for all home cards (including Bootstrap .card blocks) */
[data-theme="dark"] .home-page .home-main,
[data-theme="dark"] .home-page .card,
[data-theme="dark"] .home-page .projects-card,
[data-theme="dark"] .home-page .projects-kpi-card,
[data-theme="dark"] .home-page .daily-entries-panel,
[data-theme="dark"] .home-page .calendar-wrapper {
  background: var(--color-surface) !important;
  border-color: var(--sg-border) !important;
  color: var(--sg-text) !important;
}

[data-theme="dark"] .home-page .card h1,
[data-theme="dark"] .home-page .card h2,
[data-theme="dark"] .home-page .card h3,
[data-theme="dark"] .home-page .card h4,
[data-theme="dark"] .home-page .card h5,
[data-theme="dark"] .home-page .card h6,
[data-theme="dark"] .home-page .section-title,
[data-theme="dark"] .home-page .stat-value,
[data-theme="dark"] .home-page .profile-name {
  color: var(--sg-text) !important;
}

[data-theme="dark"] .home-page .card p,
[data-theme="dark"] .home-page .section-subtitle,
[data-theme="dark"] .home-page .stat-label,
[data-theme="dark"] .home-page .profile-title,
[data-theme="dark"] .home-page .daily-entries-total,
[data-theme="dark"] .home-page .text-muted {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .home-page .dark-blue-text {
  color: var(--sg-text) !important;
}

[data-theme="dark"] .home-page .bg-gray-blue {
  background-color: var(--sg-surface) !important;
}

[data-theme="dark"] .home-page hr {
  background: var(--sg-border);
}

/* Ensure the overall page canvas is truly dark (override legacy white body !important) */
html[data-theme="dark"],
html[data-theme="dark"] body.home-page {
  background-color: var(--sg-bg) !important;
  color: var(--sg-text);
}

[data-theme="dark"] .home-page .week-kpi-status.status-submitted {
  background: #1E3A8A;
  color: #BFDBFE;
}

[data-theme="dark"] .home-page .week-kpi-status.status-approved {
  background: #064E3B;
  color: #6EE7B7;
}

[data-theme="dark"] .home-page .week-kpi-status.status-rejected {
  background: #7F1D1D;
  color: #FCA5A5;
}

[data-theme="dark"] .calendar-day-events-modal-content {
  background: var(--sg-card);
  color: var(--sg-text);
  border: 1px solid var(--sg-border);
}

[data-theme="dark"] .calendar-day-events-modal-content .calendar-day-events-modal-header,
[data-theme="dark"] .calendar-day-events-modal-content .calendar-day-events-modal-footer {
  border-color: var(--sg-border);
}

[data-theme="dark"] .btn-calendar-modal-close,
[data-theme="dark"] .btn-calendar-modal-close-footer {
  background: var(--sg-surface);
  color: var(--sg-text);
  border-color: var(--sg-border);
}

[data-theme="dark"] .announcement-page {
  color: var(--sg-text);
}

/* Override styles.css body { background-color: #fff !important } so dark mode is not white */
html[data-theme="dark"] body.announcement-page {
  background-color: var(--sg-bg) !important;
  background: var(--sg-bg) !important;
}

[data-theme="dark"] .announcement-page-header {
  background: var(--color-surface);
  border-bottom-color: var(--color-border-subtle);
}

[data-theme="dark"] .announcement-page-nav a {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .announcement-page-nav a:hover {
  color: var(--primary-300);
}

[data-theme="dark"] .announcement-page-theme {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .announcement-page-theme:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

[data-theme="dark"] .announcement-page-article {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .announcement-page-back {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .announcement-page-back:hover {
  color: var(--primary-300);
}

[data-theme="dark"] .announcement-page-hero-image {
  background: var(--color-surface-subtle);
}

[data-theme="dark"] .announcement-page-article-header {
  border-bottom-color: var(--color-border-subtle);
}

[data-theme="dark"] .announcement-page-title {
  color: var(--color-text-primary);
}

[data-theme="dark"] .announcement-page-meta {
  color: var(--color-text-muted);
}

[data-theme="dark"] .announcement-page-body {
  color: var(--color-text-primary);
}

/* ========== Timesheet form pages (Log time / Edit timesheet – same design as home modals) ========== */
/* Page background: same as home (gradient in light, solid in dark) */
body.timesheet-form-page {
  font-family: var(--font-family);
  min-height: 100vh;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  background:
    radial-gradient(1200px 500px at 100% -5%, color-mix(in oklab, var(--color-primary) 5%, transparent), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, color-mix(in oklab, var(--color-primary) 4%, transparent), transparent 62%),
    var(--color-background);
}

.timesheet-form-page {
  font-family: var(--font-family);
  color: var(--color-text-primary);
}

.timesheet-form-page .announcement-page-article {
  border-left: 4px solid var(--color-primary);
  box-shadow: var(--elevation-2);
}

.timesheet-form-page .announcement-page-article-content {
  padding: var(--space-32);
}

.timesheet-form-page .announcement-page-article-header {
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border-subtle);
}

.timesheet-form-page .announcement-page-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-8);
}

.timesheet-form-page .announcement-page-meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Form: same spacing and layout as modals */
.timesheet-form-page .row.g-3 {
  --bs-gutter-y: 20px;
}

.timesheet-form-page .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  display: block;
}

.timesheet-form-page .form-control {
  height: 44px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  font-size: 15px;
  padding: 10px 14px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.timesheet-form-page .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 25%, transparent);
  outline: none;
}

.timesheet-form-page textarea.form-control {
  resize: vertical;
  min-height: 80px;
  border-radius: 12px;
  padding: 14px;
  height: auto;
}

.timesheet-form-page .required-ast {
  color: var(--color-danger);
}

/* Select2 – theme-aware */
.timesheet-form-page .select2-container--default .select2-selection--single {
  height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.timesheet-form-page .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 25%, transparent);
}

.timesheet-form-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 26px;
  color: var(--color-text-primary);
}

.timesheet-form-page .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
}

.timesheet-form-page .select2-dropdown {
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  box-shadow: var(--elevation-2);
  background: var(--color-surface);
}

.timesheet-form-page .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary);
  color: #fff;
}

.timesheet-form-page .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  padding: 10px 14px;
  height: 40px;
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.timesheet-form-page .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* Buttons */
.timesheet-form-page .btn-modal-cancel {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.timesheet-form-page .btn-modal-cancel:hover {
  background: var(--color-surface-subtle);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.timesheet-form-page .btn-modal-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 32px;
  font-weight: 600;
  font-size: 15px;
  height: 44px;
  min-width: 140px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.timesheet-form-page .btn-modal-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--color-primary) 35%, transparent);
}

.timesheet-form-page .btn-modal-primary:active {
  transform: translateY(1px);
}

.timesheet-form-page .btn-add-entry {
  background: transparent;
  color: var(--color-primary);
  border: 1px dashed var(--color-primary);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.timesheet-form-page .btn-add-entry:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  border-color: var(--color-primary-hover);
  color: var(--color-primary-hover);
}

/* Delete/Remove entry buttons */
.timesheet-form-page .btn-red {
  background: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: #fff !important;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
}

.timesheet-form-page .btn-red:hover {
  background: var(--color-danger-hover) !important;
  border-color: var(--color-danger-hover) !important;
  color: #fff !important;
}

.timesheet-form-page hr {
  border: none;
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-24) 0;
}

.timesheet-form-page #older-timesheets .row.g-3,
.timesheet-form-page #more-projects .row.g-3,
.timesheet-form-page #older-timesheets + div .row.g-3 {
  --bs-gutter-y: 20px;
}

/* Dark mode: timesheet form pages (page background same as home). Override styles.css body white !important */
html[data-theme="dark"] body.timesheet-form-page {
  background: var(--color-background) !important;
  background-color: var(--color-background) !important;
}

[data-theme="dark"] .timesheet-form-page {
  color: var(--color-text-primary);
}

[data-theme="dark"] .timesheet-form-page .announcement-page-article {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
  border-left-color: var(--color-primary);
}

[data-theme="dark"] .timesheet-form-page .form-control {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
  color: var(--color-text-primary);
}

[data-theme="dark"] .timesheet-form-page .form-control::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

[data-theme="dark"] .timesheet-form-page .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25);
}

[data-theme="dark"] .timesheet-form-page .form-label {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .timesheet-form-page .select2-container--default .select2-selection--single,
[data-theme="dark"] .timesheet-form-page .select2-dropdown {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
  color: var(--color-text-primary);
}

[data-theme="dark"] .timesheet-form-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-text-primary);
}

[data-theme="dark"] .timesheet-form-page .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
  color: var(--color-text-primary);
}

[data-theme="dark"] .timesheet-form-page .btn-modal-cancel {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
  color: var(--color-text-muted);
}

[data-theme="dark"] .timesheet-form-page .btn-modal-cancel:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

[data-theme="dark"] .timesheet-form-page .btn-add-entry {
  color: var(--color-primary-hover);
  border-color: var(--color-primary);
}

[data-theme="dark"] .timesheet-form-page .btn-add-entry:hover {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-color: var(--color-primary-hover);
  color: var(--primary-300);
}

[data-theme="dark"] #newTimesheetModal .modal-content,
[data-theme="dark"] #updateTimesheetModal .update-timesheet-modal-content,
[data-theme="dark"] #appealMissingClockInModal .appeal-missing-clockin-modal-content {
  background: var(--sg-card);
  border-color: var(--sg-border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] #newTimesheetModal .modal-header,
[data-theme="dark"] #updateTimesheetModal .update-modal-header,
[data-theme="dark"] #newTimesheetModal .modal-footer,
[data-theme="dark"] #updateTimesheetModal .modal-footer,
[data-theme="dark"] #appealMissingClockInModal .modal-header,
[data-theme="dark"] #appealMissingClockInModal .modal-footer {
  border-color: var(--sg-border);
}

[data-theme="dark"] #newTimesheetModal .modal-title,
[data-theme="dark"] #updateTimesheetModal .update-modal-title,
[data-theme="dark"] #appealMissingClockInModal .modal-title {
  color: var(--sg-text);
}

[data-theme="dark"] #newTimesheetModal .modal-header .modal-subtitle,
[data-theme="dark"] #appealMissingClockInModal .modal-header .modal-subtitle {
  color: var(--sg-muted);
}

[data-theme="dark"] #newTimesheetModal .form-label,
[data-theme="dark"] #updateTimesheetModal .form-label,
[data-theme="dark"] #appealMissingClockInModal .form-label {
  color: var(--sg-text-secondary);
}

[data-theme="dark"] #newTimesheetModal .form-control,
[data-theme="dark"] #updateTimesheetModal .form-control,
[data-theme="dark"] #appealMissingClockInModal .form-control {
  background: var(--sg-surface);
  border-color: var(--sg-border);
  color: var(--sg-text);
}

[data-theme="dark"] #appealMissingClockInModal .appeal-missing-dates-list {
  background: var(--sg-surface);
  border-color: var(--sg-border);
  color: var(--sg-text);
}

[data-theme="dark"] #appealMissingClockInModal .appeal-missing-dates-list .text-muted {
  color: var(--sg-muted) !important;
}

[data-theme="dark"] #appealMissingClockInModal .appeal-missing-date-chip {
  background: rgba(99, 102, 241, 0.25);
  color: #A5B4FC;
}

[data-theme="dark"] #appealMissingClockInModal .appeal-remove-date {
  color: #A5B4FC;
}

[data-theme="dark"] #appealMissingClockInModal .appeal-remove-date:hover {
  color: #C7D2FE;
}

[data-theme="dark"] .home-page .form-control::placeholder,
[data-theme="dark"] #newTimesheetModal .form-control::placeholder,
[data-theme="dark"] #updateTimesheetModal .form-control::placeholder,
[data-theme="dark"] #appealMissingClockInModal .form-control::placeholder,
[data-theme="dark"] #newTimesheetModal .select2-container--default .select2-search--dropdown .select2-search__field::placeholder,
[data-theme="dark"] #updateTimesheetModal .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
  color: #94A3B8 !important;
  opacity: 1;
}

[data-theme="dark"] #newTimesheetModal .form-control:focus,
[data-theme="dark"] #updateTimesheetModal .form-control:focus,
[data-theme="dark"] #appealMissingClockInModal .form-control:focus {
  border-color: var(--sg-primary);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25);
}

[data-theme="dark"] #newTimesheetModal .btn-modal-cancel,
[data-theme="dark"] #updateTimesheetModal .btn-modal-cancel,
[data-theme="dark"] #appealMissingClockInModal .btn-modal-cancel {
  background: var(--sg-surface);
  border-color: var(--sg-border);
  color: var(--sg-muted);
}

[data-theme="dark"] #newTimesheetModal .btn-modal-cancel:hover,
[data-theme="dark"] #updateTimesheetModal .btn-modal-cancel:hover,
[data-theme="dark"] #appealMissingClockInModal .btn-modal-cancel:hover {
  background: #334155;
  border-color: #475569;
  color: var(--sg-text);
}

[data-theme="dark"] #appealMissingClockInModal .btn-modal-primary {
  background: var(--sg-primary);
  color: #fff;
}

[data-theme="dark"] #appealMissingClockInModal .btn-modal-primary:hover {
  background: var(--sg-primary-hover);
}

[data-theme="dark"] #newTimesheetModal .btn-add-entry,
[data-theme="dark"] #updateTimesheetModal .btn-add-entry-update {
  color: var(--color-primary-hover);
  border-color: var(--color-primary);
}

[data-theme="dark"] #newTimesheetModal .btn-add-entry:hover,
[data-theme="dark"] #updateTimesheetModal .btn-add-entry-update:hover {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-color: var(--color-primary-hover);
  color: #BFDBFE;
}

[data-theme="dark"] #newTimesheetModal .select2-container--default .select2-selection--single,
[data-theme="dark"] #updateTimesheetModal .select2-container--default .select2-selection--single,
[data-theme="dark"] #newTimesheetModal .select2-dropdown {
  background: var(--sg-surface);
  border-color: var(--sg-border);
  color: var(--sg-text);
}

[data-theme="dark"] #newTimesheetModal .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] #updateTimesheetModal .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sg-text);
}

/* ========== Shared button & modal styles (home cue) – use on dashboard, leaves, AM V2 ========== */
.btn-sg-primary {
  font-family: var(--sg-font);
  font-weight: 600;
  padding: 10px 20px;
  min-height: 40px;
  border-radius: 10px;
  border: none;
  background: var(--sg-primary);
  color: #fff;
  transition: background 0.2s ease;
}
.btn-sg-primary:hover {
  background: var(--sg-primary-hover);
  color: #fff;
}

.btn-sg-secondary,
.btn-modal-cancel {
  font-family: var(--sg-font);
  font-weight: 500;
  padding: 10px 20px;
  min-height: 40px;
  border-radius: 10px;
  background: var(--sg-card);
  border: 1px solid var(--sg-border);
  color: var(--sg-muted);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-sg-secondary:hover,
.btn-modal-cancel:hover {
  background: var(--sg-bg);
  border-color: var(--sg-muted);
  color: var(--sg-text);
}

.btn-modal-primary {
  font-family: var(--sg-font);
  font-weight: 600;
  padding: 12px 32px;
  min-height: 44px;
  border-radius: 10px;
  border: none;
  background: var(--sg-primary);
  color: #fff;
  transition: background 0.2s ease;
}
.btn-modal-primary:hover {
  background: var(--sg-primary-hover);
  color: #fff;
}

/* Bootstrap modal: home-style look when .modal-sg is on .modal-content */
.modal-content.modal-sg {
  border-radius: 18px;
  border: 1px solid var(--sg-border);
  border-left: 4px solid var(--sg-primary);
  font-family: var(--sg-font);
  box-shadow: none;
}
.modal-content.modal-sg .modal-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--sg-border);
}
.modal-content.modal-sg .modal-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--sg-text);
}
.modal-content.modal-sg .modal-body {
  padding: 0 28px 28px;
  color: var(--sg-text);
}
.modal-content.modal-sg .modal-body p {
  color: var(--sg-text);
}
.modal-content.modal-sg .modal-footer {
  padding: 20px 28px 28px;
  gap: 12px;
  border-top: 1px solid var(--sg-border);
  justify-content: flex-end;
}
.modal-content.modal-sg .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--sg-text-secondary);
  margin-bottom: 6px;
}
.modal-content.modal-sg .form-control,
.modal-content.modal-sg .form-select {
  height: 44px;
  border: 1px solid var(--sg-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  background: var(--sg-card);
  color: var(--sg-text);
}
.modal-content.modal-sg .form-control:focus,
.modal-content.modal-sg .form-select:focus {
  border-color: var(--sg-primary);
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
  outline: none;
}
[data-theme="dark"] .modal-content.modal-sg .form-control:focus,
[data-theme="dark"] .modal-content.modal-sg .form-select:focus {
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25);
}
[data-theme="dark"] .modal-content.modal-sg {
  background: var(--sg-card);
  border-color: var(--sg-border);
}
[data-theme="dark"] .modal-content.modal-sg .modal-header,
[data-theme="dark"] .modal-content.modal-sg .modal-footer {
  border-color: var(--sg-border);
}
[data-theme="dark"] .modal-content.modal-sg .modal-title {
  color: var(--sg-text);
}
[data-theme="dark"] .modal-content.modal-sg .form-control,
[data-theme="dark"] .modal-content.modal-sg .form-select {
  background: var(--sg-surface);
  border-color: var(--sg-border);
  color: var(--sg-text);
}
[data-theme="dark"] .btn-modal-cancel {
  background: var(--sg-surface);
  border-color: var(--sg-border);
  color: var(--sg-muted);
}
[data-theme="dark"] .btn-modal-cancel:hover {
  background: #334155;
  border-color: #475569;
  color: var(--sg-text);
}

/* ========== Unlogged timesheet prompt (home banner) ========== */
.home-page .timesheet-prompt-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-24);
  padding: 14px 18px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 14px;
  color: #7C2D12;
  box-shadow: 0 1px 2px rgba(154, 52, 18, 0.04);
}

.home-page .timesheet-prompt-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #FFEDD5;
  color: #C2410C;
  font-size: 0.9375rem;
}

.home-page .timesheet-prompt-body {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-page .timesheet-prompt-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #7C2D12;
  line-height: 1.35;
  margin: 0;
}

.home-page .timesheet-prompt-sub {
  font-size: 0.8125rem;
  color: #9A3412;
  margin: 0 0 6px 0;
  line-height: 1.4;
}

.home-page .timesheet-prompt-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.home-page .timesheet-prompt-day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #FED7AA;
  color: #7C2D12;
  text-decoration: none;
  line-height: 1.4;
  transition: background var(--transition-default), border-color var(--transition-default), box-shadow var(--transition-default);
}

.home-page .timesheet-prompt-day:hover,
.home-page .timesheet-prompt-day:focus {
  background: #FFEDD5;
  border-color: #FB923C;
  color: #7C2D12;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(249, 115, 22, 0.18);
}

.home-page .timesheet-prompt-day-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #C2410C;
}

.home-page .timesheet-prompt-day-date {
  font-size: 0.75rem;
  font-weight: 600;
}

.home-page .timesheet-prompt-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.home-page .btn-prompt-primary {
  background: #F97316;
  border: 1px solid #F97316;
  color: #fff;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 0.8125rem;
  line-height: 1.4;
  transition: background var(--transition-default), box-shadow var(--transition-default), transform var(--transition-default);
}

.home-page .btn-prompt-primary:hover,
.home-page .btn-prompt-primary:focus {
  background: #EA580C;
  border-color: #EA580C;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.28);
  transform: translateY(-1px);
}

.home-page .btn-prompt-dismiss {
  background: transparent;
  border: 1px solid transparent;
  color: #9A3412;
  font-weight: 500;
  padding: 6px 10px;
  font-size: 0.75rem;
  border-radius: 10px;
}

.home-page .btn-prompt-dismiss:hover {
  background: rgba(249, 115, 22, 0.12);
  color: #7C2D12;
}

@media (max-width: 768px) {
  .home-page .timesheet-prompt-card {
    flex-direction: column;
  }
  .home-page .timesheet-prompt-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
}

[data-theme="dark"] .home-page .timesheet-prompt-card {
  background: rgba(249, 115, 22, 0.08);
  border-color: rgba(249, 115, 22, 0.45);
  border-left-color: #F97316;
  color: #FED7AA;
}
[data-theme="dark"] .home-page .timesheet-prompt-title { color: #FED7AA; }
[data-theme="dark"] .home-page .timesheet-prompt-sub { color: #FDBA74; }
[data-theme="dark"] .home-page .timesheet-prompt-day {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(249, 115, 22, 0.45);
  color: #FED7AA;
}
[data-theme="dark"] .home-page .timesheet-prompt-day:hover,
[data-theme="dark"] .home-page .timesheet-prompt-day:focus {
  background: rgba(249, 115, 22, 0.18);
  border-color: #FB923C;
  color: #FFEDD5;
}
[data-theme="dark"] .home-page .timesheet-prompt-day-label { color: #FDBA74; }
[data-theme="dark"] .home-page .btn-prompt-dismiss { color: #FDBA74; }
[data-theme="dark"] .home-page .btn-prompt-dismiss:hover { background: rgba(249, 115, 22, 0.15); color: #FFEDD5; }

/* ========== Select2 – branded searchable fields (use containerCssClass / dropdownCssClass: sg-select2) ========== */

.select2-container.sg-select2 {
  vertical-align: middle;
  font-family: var(--font-sans, "Urbanist", system-ui, sans-serif);
}

.select2-container.sg-select2 .select2-selection--single {
  position: relative;
  height: auto;
  min-height: 46px;
  padding: 10px 40px 10px 38px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* Subtle “searchable” affordance on the closed control (dropdown still has the full search row). */
.select2-container.sg-select2 .select2-selection--single::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  opacity: 0.4;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-4.35-4.35M11 18a7 7 0 100-14 7 7 0 000 14z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.select2-container.sg-select2.select2-container--open .select2-selection--single::before,
.select2-container.sg-select2.select2-container--focus .select2-selection--single::before {
  opacity: 0.55;
}

.select2-container.sg-select2.select2-container--focus .select2-selection--single,
.select2-container.sg-select2.select2-container--open .select2-selection--single {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 22%, transparent);
  outline: none;
}

.select2-container.sg-select2 .select2-selection--single .select2-selection__rendered {
  line-height: 1.35;
  padding-left: 0;
  padding-right: 0;
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  font-weight: 500;
}

.select2-container.sg-select2 .select2-selection--single .select2-selection__placeholder {
  color: var(--color-text-muted);
  font-weight: 400;
}

.select2-container.sg-select2 .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 6px;
  width: 28px;
}

.select2-container.sg-select2 .select2-selection--single .select2-selection__arrow b {
  border-color: var(--color-text-muted) transparent transparent transparent;
  border-width: 6px 5px 0 5px;
  margin-left: -5px;
  margin-top: -3px;
}

.select2-dropdown.sg-select2-dropdown {
  z-index: 10050 !important;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 6px -1px rgba(15, 23, 42, 0.08),
    0 12px 24px -4px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  background: var(--color-surface);
}

.select2-dropdown.sg-select2-dropdown .select2-search--dropdown {
  padding: 10px 10px 8px;
  background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface) 100%);
  border-bottom: 1px solid var(--color-border-subtle);
}

.select2-dropdown.sg-select2-dropdown .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px 10px 36px;
  font-size: 0.875rem;
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-4.35-4.35M11 18a7 7 0 100-14 7 7 0 000 14z'/%3E%3C/svg%3E") no-repeat 10px center;
  background-size: 16px 16px;
  color: var(--color-text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select2-dropdown.sg-select2-dropdown .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 18%, transparent);
  outline: none;
}

.select2-dropdown.sg-select2-dropdown .select2-search--dropdown .select2-search__field::placeholder {
  color: var(--color-text-muted);
}

.select2-dropdown.sg-select2-dropdown .select2-results > .select2-results__options {
  max-height: min(52vh, 320px);
  padding: 6px 0 10px;
}

.select2-dropdown.sg-select2-dropdown .select2-results__option {
  padding: 0.65rem 1rem 0.65rem 0.85rem;
  margin: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--color-text-primary);
  white-space: normal;
  transition: background 0.12s ease, color 0.12s ease;
}

.select2-dropdown.sg-select2-dropdown .select2-results__option[aria-selected="true"] {
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  color: var(--color-text-primary);
  font-weight: 600;
}

.select2-dropdown.sg-select2-dropdown .select2-results__option--highlighted[aria-selected] {
  background: var(--color-primary) !important;
  color: #fff !important;
}

.select2-dropdown.sg-select2-dropdown .select2-results__option[aria-disabled="true"] {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.select2-dropdown.sg-select2-dropdown .select2-results__message {
  padding: 1rem 1.25rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

[data-theme="dark"] .select2-container.sg-select2 .select2-selection--single {
  background: color-mix(in oklab, var(--color-surface) 96%, var(--neutral-900));
  border-color: var(--color-border-strong);
}

[data-theme="dark"] .select2-container.sg-select2 .select2-selection--single::before {
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-4.35-4.35M11 18a7 7 0 100-14 7 7 0 000 14z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .select2-dropdown.sg-select2-dropdown {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.35),
    0 12px 28px -4px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .select2-dropdown.sg-select2-dropdown .select2-search--dropdown .select2-search__field {
  background-color: color-mix(in oklab, var(--neutral-800) 40%, var(--color-surface));
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

[data-theme="dark"] .select2-container.sg-select2 .select2-selection--single .select2-selection__rendered {
  color: var(--color-text-primary);
}

/* ========== SG date range (native type="date" pairs; use with sg_date_range_picker.js) ========== */

.sg-date-range {
  width: 100%;
}

.sg-date-range__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}

.sg-date-range__field {
  flex: 1 1 160px;
  min-width: 0;
}

.sg-date-range__sep {
  flex: 0 0 auto;
  padding-bottom: 0.35rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-muted, #94a3b8);
  user-select: none;
}

.sg-date-range__hint {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-muted, #64748b);
  max-width: 48rem;
}