refactor: restructure web application with modular JavaScript and remove legacy code

- Deleted the `app.js` file and migrated its functionality to a modular structure with multiple JavaScript files for better organization and maintainability.
- Updated `index.html` to reference the new `main.js` module, ensuring proper loading of the application.
- Introduced new utility modules for API requests, authentication, calendar handling, and DOM manipulation to enhance code clarity and separation of concerns.
- Enhanced CSS styles for improved layout and theming consistency across the application.
- Added comprehensive comments and documentation to new modules to facilitate future development and understanding.

webapp/style.css

@@ -1,3 +1,4 @@
+/* === Variables & themes */
 :root {
   --bg: #1a1b26;
   --surface: #24283b;
@@ -41,6 +42,7 @@
   --error: #e06c75;
 }
 
+/* === Layout & base */
 html {
   scrollbar-gutter: stable;
   scrollbar-width: none;
@@ -132,7 +134,7 @@ body {
   touch-action: pan-y;
 }
 
-
+/* === Calendar grid & day cells */
 .calendar {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -214,11 +216,12 @@ body {
   min-width: 0;
 }
 
+/* === Hints (tooltips) */
 .calendar-event-hint {
   position: fixed;
   z-index: 1000;
   width: max-content;
-  max-width: min(90vw, 600px);
+  max-width: min(98vw, 900px);
   padding: 8px 12px;
   background: var(--surface);
   color: var(--text);
@@ -231,10 +234,6 @@ body {
   transform: translateY(-100%);
 }
 
-.calendar-event-hint .calendar-event-hint-rows {
-  white-space: normal;
-}
-
 .calendar-event-hint.below {
   transform: none;
 }
@@ -253,13 +252,15 @@ body {
 .calendar-event-hint-row {
   display: table;
   width: max-content;
+  min-width: max-content;
   white-space: nowrap;
 }
 
 .calendar-event-hint-row .calendar-event-hint-time {
   display: table-cell;
   white-space: nowrap;
-  min-width: 8.5em;
+  width: 7.5em;
+  min-width: 7.5em;
   vertical-align: top;
   padding-right: 0.35em;
 }
@@ -269,7 +270,7 @@ body {
   white-space: nowrap !important;
 }
 
-/* Маркеры: компактный размер 11px, кнопки для доступности и тапа */
+/* === Markers (duty / unavailable / vacation) */
 .duty-marker,
 .unavailable-marker,
 .vacation-marker {
@@ -314,6 +315,7 @@ body {
   box-shadow: 0 0 0 2px var(--vacation);
 }
 
+/* === Duty list & timeline */
 .duty-list {
   font-size: 0.9rem;
 }
@@ -545,6 +547,7 @@ body {
   background: color-mix(in srgb, var(--today) 12%, var(--surface));
 }
 
+/* === Loading / error / access denied */
 .loading, .error {
   text-align: center;
   padding: 12px;