:root {
  --bg: #ffffff;
  --card: #ffffff;
  /* Matches the card stroke used in the brand illustrations (#E5E7EB) */
  --card-border: #e5e7eb;
}

html,
body {
  background: var(--bg) !important;
  background-image: none !important;
}

/* Welcome dashboard */
.welcome-container {
  background: var(--bg) !important;
  background-image: none !important;
}

.user-info-card,
.quick-actions-card,
.quick-stats-card,
.calendar-preview-section,
.dashboard-shell-card,
.summary-chart-card,
.mini-metric-card {
  background: var(--card) !important;
  border-color: var(--card-border) !important;
}

/* Attendance Dashboard: remove the outer card shell so only the inner panels
   read as cards (no card-on-card). */
.calendar-preview-section.attendance-dashboard {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Landing feature cards: illustrations sit directly on the card surface. */
.feature-illustration {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Welcome dashboard: flatten nested mini panels inside shell cards. */
.metric-mini-card,
.month-stats-attendance,
.summary-chart-card.mini-chart-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.month-stats-attendance {
  border-top: 1px solid #eef2f6 !important;
  border-radius: 0 !important;
  padding-top: 12px !important;
}

.quick-actions-card .action-link {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid #eef2f6 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.inline-stat {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Timesheet editor */
.category-container,
.time-tracking-clock-card,
.summary-card,
.key-metrics-card,
.chart-card,
.calendar-section.dashboard-card,
.summary-cell-card {
  background: var(--card) !important;
  border-color: var(--card-border) !important;
}

/* Dashboard/calendar container — no border color */
.main-dashboard-container.left.card {
  background: var(--card) !important;
  border: none !important;
}

.category-container,
.summary-card {
  border: 1px solid var(--card-border) !important;
}

/* Work Hours + Month Stats + Attendance moved below the calendar (left column) */
.calendar-left-col .summary-right-workhours,
.calendar-left-col .calendar-attendance-chart .chart-card {
  border: 1px solid var(--card-border) !important;
}

/* Time Tracking card — no inner border */
.time-tracking-clock-card {
  border: none !important;
}

.info-container {
  background: var(--card) !important;
}

/* Action sections — soft, eye-pleasing separation (no bold border) */
.actions-container .action-section {
  background: #f8fafc !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
}

/* Settings modal */
.settings-card,
.settings-modal-container,
.reminder-management-list {
  background: var(--card) !important;
  border-color: var(--card-border) !important;
}

.settings-card,
.settings-modal-container {
  border: 1px solid var(--card-border) !important;
}

/* Landing */
.feature-card,
.pricing-highlight,
.step-card {
  background: var(--card) !important;
  border-color: var(--card-border) !important;
}

/* Pricing */
.plan {
  background: var(--card) !important;
  border-color: var(--card-border) !important;
}

/* User details / account settings */
.card-section {
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
}

/* Shared card surfaces on standalone pages */
.card,
.form-card,
.section-card,
.workspace {
  background: var(--card) !important;
  border-color: var(--card-border) !important;
}

.card,
.form-card,
.section-card {
  border: 1px solid var(--card-border) !important;
}

/* Timesheet layout wrapper — no outer box */
.container > .card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Auth modals */
.auth-modal-content {
  background: var(--card) !important;
  border-color: var(--card-border) !important;
}