Add configuration rules, refactor settings management, and enhance import functionality

- Introduced a new configuration file `.cursorrules` to define coding standards, error handling, testing requirements, and project-specific guidelines.
- Refactored `config.py` to implement a `Settings` dataclass for better management of environment variables, improving testability and maintainability.
- Updated the import duty schedule handler to utilize session management with `session_scope`, ensuring proper database session handling.
- Enhanced the import service to streamline the duty schedule import process, improving code organization and readability.
- Added new service layer functions to encapsulate business logic related to group duty pinning and duty schedule imports.
- Updated README documentation to reflect the new configuration structure and improved import functionality.

webapp/style.css

@@ -6,6 +6,22 @@
   --accent: #7aa2f7;
   --duty: #9ece6a;
   --today: #bb9af7;
+  --unavailable: #e0af68;
+  --vacation: #7dcfff;
+  --error: #f7768e;
+}
+
+[data-theme="light"] {
+  --bg: #d5d6db;
+  --surface: #b8b9c4;
+  --text: #343b58;
+  --muted: #6b7089;
+  --accent: #2e7de0;
+  --duty: #587d0a;
+  --today: #7847b3;
+  --unavailable: #b8860b;
+  --vacation: #0d6b9e;
+  --error: #c43b3b;
 }
 
 html {
@@ -134,8 +150,8 @@ body {
 }
 
 .day.holiday {
-  background: linear-gradient(135deg, var(--surface) 0%, rgba(187, 154, 247, 0.15) 100%);
-  border: 1px solid rgba(187, 154, 247, 0.35);
+  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--today) 15%, transparent) 100%);
+  border: 1px solid color-mix(in srgb, var(--today) 35%, transparent);
 }
 
 .day {
@@ -221,13 +237,13 @@ body {
 }
 
 .unavailable-marker {
-  color: #e0af68;
-  background: rgba(224, 175, 104, 0.25);
+  color: var(--unavailable);
+  background: color-mix(in srgb, var(--unavailable) 25%, transparent);
 }
 
 .vacation-marker {
-  color: #7dcfff;
-  background: rgba(125, 207, 255, 0.25);
+  color: var(--vacation);
+  background: color-mix(in srgb, var(--vacation) 25%, transparent);
 }
 
 .duty-list {
@@ -260,24 +276,65 @@ body {
   vertical-align: middle;
 }
 
-.duty-item {
+/* Timeline: dates left, cards right */
+.duty-list.duty-timeline {
+  border-left: 2px solid var(--muted);
+  padding-left: 0;
+  margin-left: 2px;
+}
+
+.duty-timeline-day {
+  margin-bottom: 0;
+}
+
+.duty-timeline-day--today {
+  scroll-margin-top: 200px;
+}
+
+.duty-timeline-row {
   display: grid;
-  grid-template-columns: 5.5em 1fr;
-  gap: 0 8px;
+  grid-template-columns: 4.2em 1fr;
+  gap: 0 10px;
+  align-items: start;
+  margin-bottom: 8px;
+  min-height: 1px;
+}
+
+.duty-timeline-date {
+  font-size: 0.8rem;
+  color: var(--muted);
+  padding-top: 10px;
+  flex-shrink: 0;
+}
+
+.duty-timeline-day--today .duty-timeline-date {
+  color: var(--today);
+  font-weight: 600;
+}
+
+.duty-timeline-card-wrap {
+  min-width: 0;
+}
+
+.duty-timeline-card.duty-item,
+.duty-list .duty-item {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2px 0;
   align-items: baseline;
   padding: 8px 10px;
-  margin-bottom: 6px;
+  margin-bottom: 0;
   border-radius: 8px;
   background: var(--surface);
   border-left: 3px solid var(--duty);
 }
 
 .duty-item--unavailable {
-  border-left-color: #e0af68;
+  border-left-color: var(--unavailable);
 }
 
 .duty-item--vacation {
-  border-left-color: #7dcfff;
+  border-left-color: var(--vacation);
 }
 
 .duty-item .duty-item-type {
@@ -302,6 +359,15 @@ body {
   color: var(--muted);
 }
 
+.duty-timeline-card .duty-item-type { grid-column: 1; grid-row: 1; }
+.duty-timeline-card .name { grid-column: 1; grid-row: 2; min-width: 0; }
+.duty-timeline-card .time { grid-column: 1; grid-row: 3; }
+
+.duty-item--current {
+  border-left-color: var(--today);
+  background: color-mix(in srgb, var(--today) 12%, var(--surface));
+}
+
 .loading, .error {
   text-align: center;
   padding: 12px;
@@ -309,7 +375,7 @@ body {
 }
 
 .error {
-  color: #f7768e;
+  color: var(--error);
 }
 
 .error[hidden], .loading.hidden {
@@ -327,7 +393,7 @@ body {
 }
 
 .access-denied p:first-child {
-  color: #f7768e;
+  color: var(--error);
   font-weight: 600;
 }