/*
 * TimeTracker 1.6.4
 * Jasny motyw aplikacji + taski w układzie kolumnowym.
 * Plik celowo jest ładowany po app.css, żeby nie naruszać logiki i starszych komponentów.
 */

:root {
  color-scheme: light;
  --bg: #f4f6fa;
  --bg-elevated: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-soft: #f8f9fc;
  --bg-input: #f7f8fb;
  --bg-input-hover: #f2f4f8;
  --bg-input-focus: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f8f9fc;
  --surface-muted: #f1f3f7;
  --text: #172033;
  --text-soft: #354052;
  --muted: #6f798d;
  --muted-2: #929bad;
  --border: #e7eaf0;
  --border-strong: #d8dde7;
  --border-subtle: var(--separator-color);
  --separator-color: #e7eaf0;
  --workspace-section-gap: 20px;
  --accent: #3968F6;
  --accent-strong: #315BCF;
  --accent-soft: rgba(57, 104, 246, .085);
  --success: #16855b;
  --warning: #b7791f;
  --danger: #c2413b;
  --purple: #3968F6;
  --shadow: 0 18px 45px rgba(26, 37, 58, .11);
  --shadow-soft: 0 8px 24px rgba(34, 45, 68, .07);
  --accent-border: rgba(57, 104, 246, .22);
  --accent-glow: rgba(57, 104, 246, .08);
  --app-overlay-background: rgba(31, 41, 59, .34);
  --app-overlay-backdrop: blur(9px);
  --context-menu-overlay-bg: rgba(31, 41, 59, .06);
  --context-menu-shadow: 0 18px 45px rgba(32, 42, 63, .18);

  /* Semantic surface/control tokens shared by light and dark themes. */
  --sidebar-surface: #ffffff;
  --header-surface: #ffffff;
  --modal-surface: #f0f2f6;
  --modal-section-surface: #ffffff;
  --modal-section-surface-soft: #f8f9fc;
  --list-section-surface: transparent;
  --list-item-surface: #ffffff;
  --list-item-hover-surface: #ffffff;
  --list-item-done-surface: #fafbfd;
  --row-surface: var(--list-item-surface);
  --row-hover-surface: var(--list-item-hover-surface);
  --app-menu-owner-bg: var(--row-surface);
  --menu-surface: #ffffff;
  --editor-surface: #ffffff;
  --neutral-control-surface: #f0f2f6;
  --neutral-control-hover-surface: #e9edf3;
  --client-avatar-bg: hsl(var(--client-avatar-hue, 235) 70% 94%);
  --client-avatar-fg: hsl(var(--client-avatar-hue, 235) 58% 36%);
  --client-avatar-border: transparent;
  --project-avatar-bg: hsl(var(--project-avatar-hue, 235) 70% 94%);
  --project-avatar-fg: hsl(var(--project-avatar-hue, 235) 58% 36%);
  --project-avatar-border: transparent;
  --chat-avatar-bg: hsl(var(--chat-avatar-hue, 235) 70% 94%);
  --chat-avatar-fg: hsl(var(--chat-avatar-hue, 235) 58% 36%);
  --chat-avatar-border: hsl(var(--chat-avatar-hue, 235) 55% 82%);
  --form-control-bg: #e3e7ee;
  --form-control-hover-bg: #dde2ea;
  --form-control-focus-bg: #ffffff;
  --form-control-border: #cfd6e1;
  --form-control-hover-border: #bcc5d2;
  /* Final application controls keep the established light appearance. */
  --form-control-final-bg: #f4f6f9;
  --form-control-final-hover-bg: #f0f3f7;
  --form-control-final-focus-bg: #ffffff;
  --form-control-final-border: #e3e7ee;
  --form-placeholder: #9aa2b1;
  --select-option-hover-bg: #f4f5fa;
  --ui-btn-neutral-bg: #ECECFB;
  --ui-btn-neutral-hover: #E1E0FA;
  --ui-btn-neutral-fg: #315BCF;
  --ui-btn-disabled-bg: #F2F2FA;
  --ui-btn-disabled-fg: #8A89A8;
  --ui-btn-primary-bg: var(--accent);
  --ui-btn-primary-hover: var(--accent-strong);
  --timer-clock-face-bg: #ffffff;
  --timer-clock-track: #dfe4ee;
  --timer-clock-track-major: #c8d0df;
  --timer-clock-shadow: 0 14px 34px rgba(35, 43, 70, .055);
  --timer-clock-inset: inset 0 0 0 1px rgba(40, 50, 72, .035);
  --chart-track-bg: #eef1f5;
  --chart-grid-bg: #e8ebf0;
  --chart-bar-bg: linear-gradient(180deg, #6F91F8, #3968F6);
  --chart-bar-soft-bg: linear-gradient(180deg, #B5C5F8, #849FF0);
  --chart-month-hover-bg: #f6f7fa;
  --chart-month-selected-bg: #E8EFFF;
  --selection-bg: rgba(57, 104, 246, .15);
  --control-check-bg: #e7e9ee;
  --progress-bg: linear-gradient(90deg, #6F91F8, #3968F6);
  --progress-danger-bg: linear-gradient(90deg, #e0736d, #c2413b);
  --entry-play-bg: #eef2ff;
  --entry-play-fg: #3968F6;
  --entry-play-hover-bg: #3968F6;
  --entry-play-hover-fg: #ffffff;
  --chat-admin-bg: #DCE7FF;
  --chat-client-bg: #DCF4E5;
  --chat-admin-label-bg: #C5D5FF;
  --chat-admin-label-text: #2449A8;
  --chat-client-label-bg: #C4E8D0;
  --chat-client-label-text: #25643f;
  --chat-system-bg: #f7f8fa;
  --alert-info-bg: #E9E7FF;
  --alert-info-fg: #5148C8;
  --alert-warning-bg: #FFF0CC;
  --alert-warning-fg: #8C5C0E;
  --alert-danger-bg: #FBE2DF;
  --alert-danger-fg: #A72D27;
  --alert-success-bg: #DDF3E6;
  --alert-success-fg: #226B49;
  --alert-muted-bg: #E8EBF0;
  --alert-muted-fg: #4F5968;
  --btn-danger-bg: #f8e9e7;
  --btn-danger-hover-bg: #f3ddda;
  --btn-danger-fg: var(--danger);
  --btn-danger-hover-fg: #9f312d;
  --btn-danger-disabled-bg: #f1e4e2;
  --btn-danger-disabled-fg: #b78783;
  --app-scrollbar-thumb: #cbd1dc;
  --app-scrollbar-thumb-hover: #adb5c3;
}

html,
body {
  background: var(--bg) !important;
  color: var(--text);
}

body {
  scrollbar-color: #cbd1dc transparent;
}

.app {
  background: var(--bg);
}

.main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  background: var(--bg);
}

/* Header wykorzystuje pełną szerokość obszaru main, a właściwa treść pozostaje ograniczona. */
.view {
  width: 100%;
  max-width: 1366px;
  margin-inline: auto;
}

.panel,
.section,
.chart {
  background: var(--section-surface, var(--surface)) !important;
  border: 0 !important;
  box-shadow: var(--shadow-soft) !important;
}

.modal-card {
  background: var(--modal-surface) !important;
  border: 0 !important;
  box-shadow: var(--shadow-soft) !important;
}

.sidebar {
  background: var(--sidebar-surface) !important;
  border: 0 !important;
  box-shadow: 10px 0 34px rgba(35, 44, 65, .045) !important;
}

.brand {
  padding: 2px 5px 12px;
  border-bottom: 0;
}

.brand-logo {
  width: 210px;
  max-width: 100% !important;
  max-height: 56px !important;
}

.nav-btn {
  color: var(--muted) !important;
  border: 0 !important;
}

.nav-btn:hover {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
  transform: none;
}

.nav-btn.active {
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
  box-shadow: none !important;
}

.nav-count,
.info-settings-pill {
  background: var(--neutral-control-surface) !important;
  color: var(--text-soft) !important;
}.header {
  position: sticky !important;
  top: 14px !important;
  margin: 0 0 32px !important;
  padding: 14px 16px !important;
  background: var(--header-surface) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 28px rgba(35, 44, 65, .07);
  backdrop-filter: none !important;
}

#headerContextActions {
  margin-left: auto;
  justify-content: flex-end !important;
}

#headerContextActions > *,
#headerButtonsActions > * {
  flex-shrink: 0;
}

.tasks-filters,
.analysis-filters {
  justify-content: flex-end;
}

.title-lg,
.title-md,
.row-title,
.task-card-title,
.stat-value,
.tile-value,
.timer-time,
.timer-revenue,
.entry-task-title {
  color: var(--text) !important;
}

.eyebrow {
  color: var(--muted-2) !important;
}

.helper-text,
.muted,
.row-meta,
.task-card-text,
.chart-label,
.budget-card-meta,
.budget-card-usage,
.budget-card-extra,
.settings-toggle-content small {
  color: var(--muted) !important;
}

.info-settings-group,
.app-shortcut-row,
.settings-toggle,
.budget-card {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}


.system-info-list,
.backup-info-list,
.detail-grid {
  gap: 0 !important;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-soft);
}

#detailBudgetsSection,
#detailEntriesSection {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#detailBudgetsSection .task-summary-row,
#detailEntriesSection .row {
  background: var(--list-item-surface) !important;
}

.tile,
.tile:hover {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.info-settings-group-head strong,
.settings-toggle-content strong,
.app-shortcut-row,
.budget-card-title {
  color: var(--text) !important;
}

.app-shortcut-label {
  color: var(--text-soft) !important;
}

.app-shortcut-key {
  background: var(--surface) !important;
  color: var(--text-soft) !important;
  box-shadow: inset 0 0 0 1px var(--border-strong) !important;
}

.timer-info {
  background: var(--surface) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.timer-revenue,
.row-data-value-accent,
.rich-content a,
.rich-editor-area a {
  color: var(--accent-strong) !important;
}