Adds comprehensive Settings page with multiple configuration tabs

Introduces a new Settings page with configurable modules:
- General company information
- Calendar and booking settings
- Billing and payment configurations
- Tracking and analytics integrations

Implements modular ViewComponents for each settings section
Enhances user experience with toggle switches and detailed configuration options

PlanTempus.Application/wwwroot/css/components.css

@@ -10,11 +10,17 @@
  * - swp-plan-card (subscription plan cards)
  * - swp-avatar (user avatars with size variants)
  * - swp-icon-btn (icon-only buttons)
- * - swp-card (content cards with section-label/footer)
+ * - swp-card (content cards with header/title/section-label/footer)
+ * - swp-card-header (card header with title and actions)
+ * - swp-card-title (icon + text title)
  * - swp-section-label (card section headers)
  * - swp-section-header (section header with action link)
  * - swp-section-action (action link in section header)
  * - swp-add-button (dashed border add button)
+ * - swp-info-box (callout box with icon)
+ * - swp-section-intro (description text)
+ * - swp-section-divider (horizontal line)
+ * - swp-two-column-grid (responsive 2-column layout)
  * - BASE PATTERNS: table, list-item, icon-container (Grid+Subgrid reusable patterns)
  */
 
@@ -544,7 +550,32 @@ swp-card {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-lg);
   padding: var(--card-padding);
-  margin-top: var(--section-gap);
+}
+
+/* Card header - flex row with title and actions */
+swp-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-5) var(--card-padding);
+  border-bottom: 1px solid var(--color-border);
+  margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) var(--spacing-5);
+  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
+}
+
+/* Card title - icon + text */
+swp-card-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+
+  & i {
+    font-size: 20px;
+    color: var(--color-teal);
+  }
 }
 
 /* Section label - simple card header */
@@ -1443,3 +1474,117 @@ swp-see-all {
     text-decoration: underline;
   }
 }
+
+/* ===========================================
+   INFO BOX (Callout)
+   =========================================== */
+swp-info-box {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-5);
+  margin-top: var(--section-gap);
+  background: var(--bg-blue-subtle);
+  border: 1px solid var(--bg-blue-border);
+  border-radius: var(--radius-md);
+
+  & i {
+    font-size: 20px;
+    color: var(--color-blue);
+    flex-shrink: 0;
+  }
+
+  & p {
+    font-size: var(--font-size-sm);
+    color: var(--color-text);
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  &.success {
+    background: var(--bg-green-subtle);
+    border-color: var(--bg-green-border);
+
+    & i {
+      color: var(--color-green);
+    }
+  }
+
+  &.warning {
+    background: var(--bg-amber-subtle);
+    border-color: var(--bg-amber-border);
+
+    & i {
+      color: var(--color-amber);
+    }
+  }
+}
+
+/* ===========================================
+   SECTION INTRO (Description text)
+   =========================================== */
+swp-section-intro {
+  display: block;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-5);
+  line-height: 1.5;
+}
+
+/* ===========================================
+   SECTION DIVIDER (Horizontal line)
+   =========================================== */
+swp-section-divider {
+  display: block;
+  height: 1px;
+  background: var(--color-border);
+  margin: var(--spacing-5) 0;
+}
+
+/* ===========================================
+   ACTION BAR (Filter/toolbar with white bg)
+   =========================================== */
+swp-action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-5);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--section-gap);
+}
+
+swp-action-bar swp-btn-group {
+  display: flex;
+  gap: var(--spacing-3);
+}
+
+/* ===========================================
+   TWO COLUMN GRID
+   =========================================== */
+swp-two-column-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--card-gap);
+  align-items: start;
+
+  /* Full width cards span both columns */
+  & > .full-width {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 900px) {
+  swp-two-column-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Stacked cards in a grid column */
+.stacked-cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+}