Adds localization support across application views

Implements localization for dashboard, cash register, account, and profile sections

Adds localization keys for various UI elements, improving internationalization support
Refactors view components to use ILocalizationService for dynamic text rendering
Prepares ground for multi-language support with translation-ready markup

PlanTempus.Application/wwwroot/css/account.css

@@ -10,14 +10,14 @@
    =========================================== */
 swp-account-section {
   display: block;
-  margin-bottom: var(--spacing-8);
+  margin-bottom: var(--section-gap);
 }
 
 swp-account-section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--spacing-4);
+  margin-bottom: var(--section-gap);
 }
 
 swp-account-section-title {
@@ -40,7 +40,7 @@ swp-account-section-title i {
 swp-plan-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: var(--spacing-5);
+  gap: var(--card-gap);
 }
 
 @media (max-width: 1024px) {
@@ -82,7 +82,7 @@ swp-plan-badge.popular {
 /* Plan action buttons */
 swp-plan-action {
   margin-top: auto;
-  padding-top: var(--spacing-5);
+  padding-top: var(--card-padding);
 }
 
 swp-plan-action swp-btn {
@@ -96,7 +96,7 @@ swp-plan-action swp-btn {
 swp-billing-grid {
   display: grid;
   grid-template-columns: 380px 1fr;
-  gap: var(--spacing-6);
+  gap: var(--card-gap);
 }
 
 @media (max-width: 1024px) {
@@ -111,18 +111,18 @@ swp-billing-grid {
 swp-payment-card {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-5);
+  gap: var(--card-padding);
   background: var(--color-surface);
   border-radius: var(--radius-lg);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-  padding: var(--spacing-6);
+  padding: var(--card-padding);
 }
 
 swp-payment-method {
   display: flex;
   align-items: center;
   gap: var(--spacing-4);
-  padding: var(--spacing-4);
+  padding: var(--card-padding);
   background: var(--color-background-alt);
   border-radius: var(--radius-md);
 }
@@ -168,7 +168,7 @@ swp-payment-detail {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--spacing-3) 0;
+  padding: var(--spacing-4) 0;
   border-bottom: 1px solid var(--color-border);
 }
 
@@ -206,7 +206,7 @@ swp-invoices-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--spacing-4) var(--spacing-5);
+  padding: var(--card-padding);
   border-bottom: 1px solid var(--color-border);
 }
 
@@ -255,17 +255,17 @@ swp-invoice-row:last-child {
 }
 
 swp-invoice-cell {
-  padding: var(--spacing-3) var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-4);
   font-size: var(--font-size-sm);
   color: var(--color-text);
 }
 
 swp-invoice-cell:first-child {
-  padding-left: var(--spacing-5);
+  padding-left: var(--card-padding);
 }
 
 swp-invoice-cell:last-child {
-  padding-right: var(--spacing-5);
+  padding-right: var(--card-padding);
 }
 
 /* Header cells */
@@ -275,8 +275,8 @@ swp-invoice-table-header swp-invoice-cell {
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--color-text-secondary);
-  padding-top: var(--spacing-3);
-  padding-bottom: var(--spacing-3);
+  padding-top: var(--spacing-4);
+  padding-bottom: var(--spacing-4);
 }
 
 /* Invoice number mono font */
@@ -384,18 +384,18 @@ swp-btn.sm i {
   }
 
   swp-invoice-cell {
-    padding: var(--spacing-2) var(--spacing-3);
+    padding: var(--spacing-3) var(--spacing-3);
   }
 
   swp-invoice-cell:first-child {
-    padding-left: var(--spacing-4);
+    padding-left: var(--spacing-5);
   }
 
   swp-invoice-cell:last-child {
-    padding-right: var(--spacing-4);
+    padding-right: var(--spacing-5);
   }
 
   swp-payment-card {
-    padding: var(--spacing-4);
+    padding: var(--spacing-5);
   }
 }

PlanTempus.Application/wwwroot/css/attentions.css

@@ -20,7 +20,7 @@ swp-attention-item {
   grid-template-columns: subgrid;
   align-items: center;
   gap: var(--spacing-8);
-  padding: var(--spacing-5) var(--spacing-6);
+  padding: var(--card-padding);
   background: var(--color-background-alt);
   border-radius: var(--radius-xl);
   border-left: 3px solid var(--color-border);

PlanTempus.Application/wwwroot/css/bookings.css

@@ -19,7 +19,7 @@ swp-booking-item {
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
   align-items: center;
-  padding: var(--spacing-4);
+  padding: var(--card-padding);
   background: var(--color-background-alt);
   border-radius: var(--radius-lg);
   cursor: pointer;

PlanTempus.Application/wwwroot/css/design-tokens.css

@@ -190,7 +190,10 @@
   --container-max-width-lg: 1400px;
 
   /* -------- Card Spacing -------- */
-  --card-body-padding: var(--spacing-5);
+  --card-padding: 12px;
+  --card-gap: 24px;
+  --section-gap: 24px;
+  --page-padding: 24px;
 
   /* -------- Calendar Grid -------- */
   --hour-height: 64px;

PlanTempus.Application/wwwroot/css/notifications.css

@@ -19,7 +19,7 @@ swp-notification-item {
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
   align-items: center;
-  padding: var(--spacing-5) var(--spacing-6);
+  padding: var(--card-padding);
   background: var(--color-background-alt);
   border-radius: var(--radius-xl);
   cursor: pointer;

PlanTempus.Application/wwwroot/css/page.css

@@ -11,7 +11,7 @@ swp-page-container {
   display: block;
   max-width: var(--page-max-width);
   margin: 0 auto;
-  padding: var(--spacing-6);
+  padding: var(--page-padding);
 }
 
 /* ===========================================
@@ -21,7 +21,7 @@ swp-page-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: var(--spacing-6);
+  margin-bottom: var(--section-gap);
 }
 
 swp-page-title h1 {
@@ -49,16 +49,15 @@ swp-card {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-lg);
-  padding: var(--spacing-5);
-  margin-bottom: var(--spacing-5);
+  padding: var(--card-padding);
 }
 
 swp-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: calc(-1 * var(--spacing-5)) calc(-1 * var(--spacing-5)) var(--spacing-4) calc(-1 * var(--spacing-5));
-  padding: var(--spacing-4) var(--spacing-5);
+  margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) var(--spacing-5) calc(-1 * var(--card-padding));
+  padding: var(--spacing-4) var(--card-padding);
   border-bottom: 1px solid var(--color-border);
 }
 
@@ -96,7 +95,7 @@ swp-card-content:has(> swp-booking-list),
 swp-card-content:has(> swp-notification-list),
 swp-card-content:has(> swp-attention-list) {
   display: grid;
-  gap: var(--spacing-4);
+  gap: var(--spacing-5);
 }
 
 swp-card-content:has(> swp-booking-list) {
@@ -134,13 +133,13 @@ swp-item-desc {
 swp-dashboard-grid {
   display: grid;
   grid-template-columns: 1fr 380px;
-  gap: var(--spacing-5);
+  gap: var(--card-gap);
 }
 
 swp-main-column,
 swp-side-column {
   display: grid;
-  gap: var(--spacing-5);
+  gap: var(--card-gap);
   align-content: start;
 }
 
@@ -149,7 +148,7 @@ swp-side-column {
    =========================================== */
 swp-ai-insight {
   display: block;
-  padding: var(--spacing-4) var(--spacing-5);
+  padding: var(--card-padding);
   background: linear-gradient(135deg,
     color-mix(in srgb, var(--color-purple) 8%, transparent),
     color-mix(in srgb, var(--color-teal) 8%, transparent)
@@ -183,14 +182,14 @@ swp-ai-text {
 swp-quick-actions {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2);
+  gap: var(--spacing-3);
 }
 
 swp-quick-action-btn {
   display: flex;
   align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-3);
+  gap: var(--spacing-3);
+  padding: var(--card-padding);
   font-size: var(--font-size-base);
   font-family: var(--font-family);
   color: var(--color-text);
@@ -226,7 +225,7 @@ swp-quick-action-btn i {
 
 @media (max-width: 768px) {
   swp-page-container {
-    padding: var(--spacing-4);
+    padding: var(--spacing-5);
   }
 
   swp-page-header {

PlanTempus.Application/wwwroot/css/quick-stats.css

@@ -10,7 +10,7 @@
 swp-quick-stats {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: var(--spacing-3);
+  gap: var(--card-gap);
 }
 
 /* ===========================================
@@ -19,8 +19,8 @@ swp-quick-stats {
 swp-quick-stat {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
-  padding: var(--spacing-3);
+  gap: var(--spacing-2);
+  padding: var(--card-padding);
   background: var(--color-background-alt);
   border-radius: var(--radius-md);
 }

PlanTempus.Application/wwwroot/css/stats.css

@@ -11,15 +11,15 @@ swp-stats-bar,
 swp-stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: var(--spacing-4);
-  margin-bottom: var(--spacing-5);
+  gap: var(--card-gap);
+  margin-bottom: var(--section-gap);
 }
 
 swp-stats-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: var(--spacing-4);
-  margin-bottom: var(--spacing-5);
+  gap: var(--card-gap);
+  margin-bottom: var(--section-gap);
 }
 
 /* ===========================================
@@ -30,15 +30,15 @@ swp-stat-card {
   flex-direction: column;
   background: var(--color-surface);
   border-radius: var(--border-radius-lg);
-  padding: var(--spacing-4) var(--spacing-5);
+  padding: var(--card-padding);
   border: 1px solid var(--color-border);
 }
 
 swp-stat-box {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
-  padding: var(--spacing-4);
+  gap: var(--spacing-2);
+  padding: var(--card-padding);
   background: var(--color-surface);
   border-radius: var(--border-radius);
   border: 1px solid var(--color-border);
@@ -72,7 +72,7 @@ swp-stat-label {
   display: block;
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
-  margin-top: var(--spacing-1);
+  margin-top: var(--spacing-2);
 }
 
 swp-stat-box swp-stat-label {

PlanTempus.Application/wwwroot/css/waitlist.css

@@ -10,8 +10,8 @@
 swp-waitlist-card {
   display: flex;
   align-items: center;
-  gap: var(--spacing-3);
-  padding: var(--spacing-4);
+  gap: var(--spacing-4);
+  padding: var(--card-padding);
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);