:root {
  color-scheme: light;
  --primary-color: #4f46e5;
  --primary-dark: #4338ca;
  --primary-light: #e0e7ff;
  --primary: #4f46e5;
  --accent: #4f46e5;
  --accent-light: #4338ca;
  --secondary-color: #0f766e;
  --accent-color: #0f766e;
  --dark-color: #f4f7fb;
  --darker-color: #e9eef6;
  --dark-accent: #e2e8f0;
  --text-color: #1e293b;
  --text-color-secondary: #475569;
  --text-muted: #59677d;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --border-color: #dce4ef;
  --light-gray: #eef2f7;
  --box-shadow: 0 12px 30px rgba(25, 42, 70, 0.08);
  --bg-body: #f4f7fb;
  --bg-card: #ffffff;
  --table-header: #eef2f8;
  --table-hover: #f1f5fb;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --modal-bg: #ffffff;
  --shadow-color: rgba(25, 42, 70, 0.08);
}

body {
  min-height: 100vh;
  color: var(--text-color);
  background: #f4f7fb;
  background-image:
    radial-gradient(circle at 8% 0%, rgba(79, 70, 229, 0.06), transparent 28rem),
    radial-gradient(circle at 100% 40%, rgba(15, 118, 110, 0.045), transparent 24rem);
  background-attachment: fixed;
  transition: color 180ms ease, background-color 180ms ease;
}

body.dark-mode {
  color-scheme: dark;
  --primary-color: #8b9aff;
  --primary-dark: #7484f5;
  --primary-light: #303b68;
  --primary: #8b9aff;
  --accent: #8b9aff;
  --accent-light: #7484f5;
  --secondary-color: #50d4bd;
  --accent-color: #50d4bd;
  --dark-color: #101827;
  --darker-color: #0b1220;
  --dark-accent: #202c3d;
  --text-color: #e7edf7;
  --text-color-secondary: #c0ccdc;
  --text-muted: #aab8cb;
  --text-primary: #e7edf7;
  --text-secondary: #c0ccdc;
  --border-color: #2b394c;
  --light-gray: #202c3d;
  --box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  --bg-body: #101827;
  --bg-card: #182335;
  --table-header: #202c3d;
  --table-hover: #202f44;
  --input-bg: #111c2c;
  --input-border: #3a4a60;
  --modal-bg: #182335;
  --shadow-color: rgba(0, 0, 0, 0.24);
  color: var(--text-color);
  background-color: #101827;
  background-image:
    radial-gradient(circle at 8% 0%, rgba(79, 70, 229, 0.12), transparent 28rem),
    radial-gradient(circle at 100% 40%, rgba(15, 118, 110, 0.08), transparent 24rem);
}

body:not(.dark-mode) {
  --dark-color: #f4f7fb;
  --dark-text-color: #1e293b;
  --dark-text-color-secondary: #475569;
  --dark-text-muted: #59677d;
  --text-color: #1e293b;
  --text-color-secondary: #475569;
  --text-muted: #59677d;
  color: #1e293b;
  background-color: #f4f7fb;
}

body:not(.dark-mode) :is(h1, h2, h3, h4, h5, h6, label, th, td),
body:not(.dark-mode) .card,
body:not(.dark-mode) .summary-card,
body:not(.dark-mode) .action-card,
body:not(.dark-mode) .dashboard-card,
body:not(.dark-mode) .login-card,
body:not(.dark-mode) .feature-card,
body:not(.dark-mode) .faq-card,
body:not(.dark-mode) .profile-section,
body:not(.dark-mode) .admin-controls,
body:not(.dark-mode) .summary-box,
body:not(.dark-mode) .time-tracking-panel,
body:not(.dark-mode) .control-panel,
body:not(.dark-mode) .timesheet-table-container,
body:not(.dark-mode) .about-card {
  color: #1e293b;
}

body.dark-mode :is(h1, h2, h3, h4, h5, h6, label),
body.dark-mode .card,
body.dark-mode .summary-card,
body.dark-mode .action-card,
body.dark-mode .dashboard-card,
body.dark-mode .login-card,
body.dark-mode .feature-card,
body.dark-mode .faq-card,
body.dark-mode .profile-section,
body.dark-mode .admin-controls,
body.dark-mode .summary-box,
body.dark-mode .time-tracking-panel,
body.dark-mode .control-panel,
body.dark-mode .timesheet-table-container,
body.dark-mode .about-card {
  color: #e7edf7;
}

:is(.card, .summary-card, .action-card, .dashboard-card, .login-card, .feature-card,
.faq-card, .profile-section, .admin-controls, .summary-box, .time-tracking-panel, .control-panel,
.timesheet-table-container, .about-card) {
  background-color: #ffffff;
  border-color: var(--border-color);
  box-shadow: var(--box-shadow);
}

body.dark-mode :is(.card, .summary-card, .action-card, .dashboard-card, .login-card,
.feature-card, .faq-card, .profile-section, .admin-controls, .summary-box, .time-tracking-panel,
.control-panel, .timesheet-table-container, .about-card) {
  background-color: #182335;
  border-color: #2b394c;
  box-shadow: var(--box-shadow);
}

body:not(.dark-mode) :is(.card, .summary-card, .action-card, .dashboard-card,
.login-card, .feature-card, .faq-card, .profile-section, .admin-controls, .summary-box,
.time-tracking-panel, .control-panel, .timesheet-table-container, .about-card)
:is(p, span, small, label, li, dt, dd, .status-label, .status-value, .card-value,
.countdown-timer, .progress-value, .card-content h4) {
  color: #334155;
}

body.dark-mode :is(.card, .summary-card, .action-card, .dashboard-card, .login-card,
.feature-card, .faq-card, .profile-section, .admin-controls, .summary-box, .time-tracking-panel,
.control-panel, .timesheet-table-container, .about-card)
:is(p, span, small, label, li, dt, dd, .status-label, .status-value, .card-value,
.countdown-timer, .progress-value, .card-content h4) {
  color: #c0ccdc;
}

body:not(.dark-mode) :is(.text-muted, .text-secondary, .page-subtitle, .footer-desc,
.footer-links a, .guest-login-note p, .guest-login-note dt, .status-label,
.status-unavailable, .no-active) {
  color: #59677d !important;
}

body.dark-mode :is(.text-muted, .text-secondary, .page-subtitle, .footer-desc,
.footer-links a, .guest-login-note p, .guest-login-note dt, .status-label,
.status-unavailable, .no-active) {
  color: #aab8cb !important;
}

body:not(.dark-mode) .navbar,
body:not(.dark-mode) .user-dropdown-content {
  background-color: rgba(255, 255, 255, 0.96);
  color: #1e293b;
  border-color: #dce4ef;
}

body:not(.dark-mode) .navbar-logo,
body:not(.dark-mode) .nav-link,
body:not(.dark-mode) .user-name,
body:not(.dark-mode) .user-dropdown-btn {
  color: #243247 !important;
}

body.dark-mode .navbar,
body.dark-mode .user-dropdown-content {
  background-color: rgba(17, 27, 42, 0.97);
  color: #e7edf7;
  border-color: #2b394c;
}

body.dark-mode .navbar-logo,
body.dark-mode .nav-link,
body.dark-mode .user-name,
body.dark-mode .user-dropdown-btn {
  color: #e7edf7 !important;
}

body:not(.dark-mode) footer {
  color: #334155;
  background-color: #eaf0f7;
  border-color: #dce4ef;
}

body:not(.dark-mode) .footer-logo,
body:not(.dark-mode) .footer-title {
  color: #1e293b;
}

body.dark-mode footer {
  color: #c0ccdc;
  background-color: #0b1220;
  border-color: #2b394c;
}

body.dark-mode .footer-logo,
body.dark-mode .footer-title {
  color: #e7edf7;
}

body:not(.dark-mode) :is(.form-control, .form-select, input, select, textarea, .date-field) {
  color: #1e293b;
  background-color: #ffffff;
  border-color: #cbd5e1;
}

body.dark-mode :is(.form-control, .form-select, input, select, textarea, .date-field) {
  color: #e7edf7;
  background-color: #111c2c;
  border-color: #3a4a60;
}

:is(.form-control, .form-select, input, select, textarea, .date-field):focus {
  border-color: #6875e8;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16);
}

body.dark-mode :is(.form-control, .form-select, input, select, textarea, .date-field)::placeholder {
  color: #91a0b5;
}

body:not(.dark-mode) .table {
  color: #243247;
  --bs-table-color: #243247;
  --bs-table-bg: #ffffff;
  --bs-table-border-color: #dce4ef;
  --bs-table-hover-bg: #f1f5fb;
  --bs-table-hover-color: #1e293b;
}

body.dark-mode .table {
  color: #d8e2f0;
  --bs-table-color: #d8e2f0;
  --bs-table-bg: #182335;
  --bs-table-border-color: #2b394c;
  --bs-table-hover-bg: #202f44;
  --bs-table-hover-color: #f1f5fb;
}

body:not(.dark-mode) .table > :not(caption) > * > * {
  color: #334155;
  border-color: #dce4ef;
}

body.dark-mode .table > :not(caption) > * > * {
  color: #d8e2f0;
  border-color: #2b394c;
}

body.dark-mode .dashboard-container .table:not(.table-dark) > :not(caption) > * > * {
  color: #d8e2f0;
  background-color: #182335;
  border-color: #2b394c;
}

body:not(.dark-mode) .table thead:not(.table-dark) th {
  color: #27364b;
  background-color: #eef2f8;
}

body.dark-mode .table thead:not(.table-dark) th {
  color: #e7edf7;
  background-color: #202c3d;
}

body:not(.dark-mode) .table tr:hover > * {
  background-color: #f1f5fb;
}

body.dark-mode .table tr:hover > * {
  background-color: #202f44;
}

body:not(.dark-mode) .page-title {
  color: transparent;
}

.welcome-banner,
.hero,
.hero-section {
  color: #ffffff;
}

body:not(.dark-mode) .welcome-banner :is(h1, p),
body:not(.dark-mode) .hero :is(h1, h2, h3, p),
body:not(.dark-mode) .hero-section :is(h1, h2, h3, p) {
  color: #ffffff;
}

body.dark-mode .welcome-banner :is(h1, p),
body.dark-mode .hero :is(h1, h2, h3, p),
body.dark-mode .hero-section :is(h1, h2, h3, p) {
  color: #ffffff;
}

body:not(.dark-mode) .landing-page .hero .text-gradient {
  color: transparent;
}

body:not(.dark-mode) .guest-login-note,
body:not(.dark-mode) .user-dropdown-content a:hover {
  background-color: #f1f5fb;
}

body.dark-mode .guest-login-note,
body.dark-mode .user-dropdown-content a:hover {
  background-color: #202c3d;
}

body:not(.dark-mode) .login-header h2,
body:not(.dark-mode) .guest-login-note h3,
body:not(.dark-mode) .guest-login-note dd {
  color: #1e293b;
}

body.dark-mode .login-header h2,
body.dark-mode .guest-login-note h3,
body.dark-mode .guest-login-note dd {
  color: #e7edf7;
}

body:not(.dark-mode) .login-container,
body:not(.dark-mode) .error-page {
  color: #1e293b;
  background-color: #f4f7fb;
}

body.dark-mode .login-container,
body.dark-mode .error-page {
  color: #e7edf7;
  background-color: #101827;
}

body.dark-mode .login-form .form-control,
body.dark-mode .profile-form .form-control,
body.dark-mode .password-input-group .form-control {
  color: #e7edf7;
  background-color: #111c2c;
  border-color: #3a4a60;
}

body.dark-mode .login-form .form-control::placeholder {
  color: #91a0b5;
}

body.standalone-page {
  display: block;
  min-height: 100vh;
  padding: 2rem;
  font-size: 1rem;
}

body.standalone-page > h1 {
  color: var(--text-color);
  font-size: clamp(2.5rem, 8vw, 5rem);
}

.period-option:focus-visible,
.filter-chip:focus-visible,
.table-action-btn:focus-visible,
.apply-button:focus-visible,
.tracking-btn:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}

.panel-header,
.table-header {
  border-color: var(--border-color);
}

.panel-header,
.status-item,
.period-option,
.filter-chip,
.table-action-btn {
  color: var(--text-color-secondary);
  background-color: var(--table-header);
  border-color: var(--border-color);
}

.panel-header h3,
.table-header h3,
.period-option,
.filter-chip {
  color: var(--text-color);
}

.period-option:hover,
.filter-chip:hover,
.table-action-btn:hover {
  color: var(--text-color);
  background-color: var(--table-hover);
  border-color: var(--primary-color);
}

.period-option.active,
.apply-button {
  color: #ffffff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

body.dark-mode .period-option.active,
body.dark-mode .apply-button {
  color: #101827;
}

.date-label,
.selector-label,
.filter-title,
.status-label,
.status-value,
.card-content h4,
.card-value,
.countdown-timer {
  color: var(--text-color);
}

.date-field,
.form-control,
.form-select,
input,
select,
textarea {
  color: var(--text-color);
  background-color: var(--input-bg);
  border-color: var(--input-border);
}

.date-field:focus,
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  color: var(--text-color);
  background-color: var(--input-bg);
}

.timesheet-table {
  color: var(--text-color);
  background-color: var(--bg-card);
}

.timesheet-table th {
  color: var(--text-color);
  background-color: var(--table-header);
  border-color: var(--border-color);
}

.timesheet-table td {
  color: var(--text-color-secondary);
  border-color: var(--border-color);
}

.timesheet-table tbody tr:hover {
  background-color: var(--table-hover);
}

.stat-card,
.stats-grid .stat-card {
  color: var(--text-color);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--box-shadow);
}

.stat-card :is(h1, h2, h3, h4, p, span, small, .stat-value) {
  color: var(--text-color);
}

.stat-card .stat-icon,
.card-icon {
  color: #ffffff;
}

body.dark-mode .btn-pause {
  color: #30220b;
}

@media (max-width: 768px) {
  body.standalone-page {
    padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}