From 5e2cab9bd5f0d21beb3d2f8a469cb79d97c5196e Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Wed, 14 Jan 2026 16:31:28 +0100
Subject: [PATCH] Refactor CSS using nested selectors and media queries

Improves CSS organization by adopting PostCSS nesting syntax
Enhances responsiveness with refined media query implementations
Reduces code repetition and improves maintainability of stylesheets

Modernizes CSS structure across multiple component stylesheets
---
 .../wwwroot/css/account.css                   |  174 ++-
 PlanTempus.Application/wwwroot/css/auth.css   |  641 ++++++-----
 PlanTempus.Application/wwwroot/css/cash.css   |  730 ++++++------
 .../wwwroot/css/components.css                |  588 +++++-----
 .../wwwroot/css/design-tokens.css             |    3 +
 .../wwwroot/css/employees.css                 | 1011 ++++++++---------
 6 files changed, 1539 insertions(+), 1608 deletions(-)

diff --git a/PlanTempus.Application/wwwroot/css/account.css b/PlanTempus.Application/wwwroot/css/account.css
index 45864d4..830a7ef 100644
--- a/PlanTempus.Application/wwwroot/css/account.css
+++ b/PlanTempus.Application/wwwroot/css/account.css
@@ -29,11 +29,11 @@ swp-account-section-title {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
-}
 
-swp-account-section-title i {
-  font-size: 22px;
-  color: var(--color-teal);
+  & i {
+    font-size: 22px;
+    color: var(--color-teal);
+  }
 }
 
 /* ===========================================
@@ -43,10 +43,8 @@ swp-plan-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--card-gap);
-}
 
-@media (max-width: 1024px) {
-  swp-plan-grid {
+  @media (max-width: 1024px) {
     grid-template-columns: 1fr;
   }
 }
@@ -60,10 +58,8 @@ swp-billing-grid {
   display: grid;
   grid-template-columns: 380px 1fr;
   gap: var(--card-gap);
-}
 
-@media (max-width: 1024px) {
-  swp-billing-grid {
+  @media (max-width: 1024px) {
     grid-template-columns: 1fr;
   }
 }
@@ -79,6 +75,10 @@ swp-payment-card {
   border-radius: var(--radius-lg);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   padding: var(--card-padding);
+
+  @media (max-width: 768px) {
+    padding: var(--spacing-5);
+  }
 }
 
 swp-payment-method {
@@ -100,11 +100,11 @@ swp-payment-icon {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-}
 
-swp-payment-icon i {
-  font-size: 24px;
-  color: var(--color-blue);
+  & i {
+    font-size: 24px;
+    color: var(--color-blue);
+  }
 }
 
 swp-payment-info {
@@ -133,10 +133,10 @@ swp-payment-detail {
   align-items: center;
   padding: var(--spacing-4) 0;
   border-bottom: 1px solid var(--color-border);
-}
 
-swp-payment-detail:last-of-type {
-  border-bottom: none;
+  &:last-of-type {
+    border-bottom: none;
+  }
 }
 
 swp-payment-label {
@@ -148,10 +148,10 @@ swp-payment-value {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   color: var(--color-text);
-}
 
-swp-payment-value.highlight {
-  color: var(--color-teal);
+  &.highlight {
+    color: var(--color-teal);
+  }
 }
 
 /* ===========================================
@@ -185,6 +185,10 @@ swp-invoices-title {
 swp-invoice-table {
   display: grid;
   grid-template-columns: 100px minmax(120px, 1fr) 100px 100px 80px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 80px minmax(100px, 1fr) 80px 80px 70px;
+  }
 }
 
 swp-invoice-table-header {
@@ -192,12 +196,26 @@ swp-invoice-table-header {
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
   background: var(--color-background-alt);
+
+  swp-invoice-cell {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--color-text-secondary);
+    padding-top: var(--spacing-4);
+    padding-bottom: var(--spacing-4);
+  }
 }
 
 swp-invoice-table-body {
   display: grid;
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
+
+  swp-invoice-row:hover {
+    background: var(--color-background-hover);
+  }
 }
 
 swp-invoice-row {
@@ -207,50 +225,45 @@ swp-invoice-row {
   align-items: center;
   border-bottom: 1px solid var(--color-border);
   transition: background var(--transition-fast);
-}
 
-swp-invoice-table-body swp-invoice-row:hover {
-  background: var(--color-background-hover);
-}
-
-swp-invoice-row:last-child {
-  border-bottom: none;
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 swp-invoice-cell {
   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(--card-padding);
-}
+  &:first-child {
+    padding-left: var(--card-padding);
+  }
 
-swp-invoice-cell:last-child {
-  padding-right: var(--card-padding);
-}
+  &:last-child {
+    padding-right: var(--card-padding);
+  }
 
-/* Header cells */
-swp-invoice-table-header swp-invoice-cell {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-text-secondary);
-  padding-top: var(--spacing-4);
-  padding-bottom: var(--spacing-4);
-}
+  &.mono {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+  }
 
-/* Invoice number mono font */
-swp-invoice-cell.mono {
-  font-family: var(--font-mono);
-  font-size: var(--font-size-xs);
+  @media (max-width: 768px) {
+    padding: var(--spacing-3) var(--spacing-3);
+
+    &:first-child {
+      padding-left: var(--spacing-5);
+    }
+
+    &:last-child {
+      padding-right: var(--spacing-5);
+    }
+  }
 }
 
 /* ===========================================
    INVOICE STATUS BADGES
-   Parent pattern with color variants + CSS nesting
    =========================================== */
 swp-invoice-status {
   display: inline-flex;
@@ -260,25 +273,25 @@ swp-invoice-status {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   border-radius: var(--radius-sm);
-  
+
   & i {
     font-size: 14px;
   }
-}
 
-swp-invoice-status.paid {
-  background: var(--bg-green-strong);
-  color: var(--color-green);
-}
+  &.paid {
+    background: var(--bg-green-strong);
+    color: var(--color-green);
+  }
 
-swp-invoice-status.pending {
-  background: var(--bg-amber-strong);
-  color: var(--color-amber);
-}
+  &.pending {
+    background: var(--bg-amber-strong);
+    color: var(--color-amber);
+  }
 
-swp-invoice-status.overdue {
-  background: var(--bg-red-strong);
-  color: var(--color-red);
+  &.overdue {
+    background: var(--bg-red-strong);
+    color: var(--color-red);
+  }
 }
 
 /* ===========================================
@@ -297,39 +310,14 @@ swp-download-btn {
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all var(--transition-fast);
-}
 
-swp-download-btn:hover {
-  background: var(--bg-teal-medium);
-}
+  & i {
+    font-size: 14px;
+  }
 
-swp-download-btn i {
-  font-size: 14px;
+  &:hover {
+    background: var(--bg-teal-medium);
+  }
 }
 
 /* Button styles in components.css */
-
-/* ===========================================
-   RESPONSIVE
-   =========================================== */
-@media (max-width: 768px) {
-  swp-invoice-table {
-    grid-template-columns: 80px minmax(100px, 1fr) 80px 80px 70px;
-  }
-
-  swp-invoice-cell {
-    padding: var(--spacing-3) var(--spacing-3);
-  }
-
-  swp-invoice-cell:first-child {
-    padding-left: var(--spacing-5);
-  }
-
-  swp-invoice-cell:last-child {
-    padding-right: var(--spacing-5);
-  }
-
-  swp-payment-card {
-    padding: var(--spacing-5);
-  }
-}
diff --git a/PlanTempus.Application/wwwroot/css/auth.css b/PlanTempus.Application/wwwroot/css/auth.css
index 2326064..84c0c4b 100644
--- a/PlanTempus.Application/wwwroot/css/auth.css
+++ b/PlanTempus.Application/wwwroot/css/auth.css
@@ -14,6 +14,15 @@ swp-auth-layout {
   display: grid;
   grid-template-columns: 45fr 55fr;
   min-height: 100vh;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 40fr 60fr;
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
 }
 
 /* ===========================================
@@ -28,29 +37,43 @@ swp-auth-branding {
   color: white;
   position: relative;
   overflow: hidden;
-}
 
-/* Decorative background pattern */
-swp-auth-branding::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  right: -50%;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-  pointer-events: none;
-}
+  /* Decorative background pattern */
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -50%;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+    pointer-events: none;
+  }
 
-swp-auth-branding::after {
-  content: '';
-  position: absolute;
-  bottom: -30%;
-  left: -30%;
-  width: 80%;
-  height: 80%;
-  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
-  pointer-events: none;
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -30%;
+    left: -30%;
+    width: 80%;
+    height: 80%;
+    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
+    pointer-events: none;
+  }
+
+  @media (max-width: 1024px) {
+    padding: var(--spacing-16);
+  }
+
+  @media (max-width: 768px) {
+    padding: var(--spacing-10) var(--spacing-6);
+    text-align: center;
+    align-items: center;
+  }
+
+  @media (max-width: 480px) {
+    padding: var(--spacing-8) var(--spacing-5);
+  }
 }
 
 swp-auth-logo {
@@ -60,16 +83,21 @@ swp-auth-logo {
   margin-bottom: var(--spacing-16);
   position: relative;
   z-index: 1;
-}
 
-swp-auth-logo i {
-  font-size: 32px;
-}
+  & i {
+    font-size: 32px;
+  }
 
-swp-auth-logo span {
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: -0.5px;
+  & span {
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-bold);
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 768px) {
+    margin-bottom: var(--spacing-6);
+    justify-content: center;
+  }
 }
 
 swp-auth-tagline {
@@ -81,6 +109,15 @@ swp-auth-tagline {
   position: relative;
   z-index: 1;
   max-width: 400px;
+
+  @media (max-width: 1024px) {
+    font-size: var(--font-size-2xl);
+  }
+
+  @media (max-width: 768px) {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--spacing-4);
+  }
 }
 
 swp-auth-subtitle {
@@ -92,6 +129,10 @@ swp-auth-subtitle {
   z-index: 1;
   max-width: 380px;
   line-height: var(--line-height-relaxed);
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 }
 
 /* ===========================================
@@ -104,15 +145,31 @@ swp-auth-plan-panel {
   padding: var(--spacing-24);
   background: var(--color-background);
   position: relative;
-}
 
-swp-auth-plan-panel swp-auth-logo {
-  color: var(--color-text);
-  margin-bottom: var(--spacing-12);
-}
+  swp-auth-logo {
+    color: var(--color-text);
+    margin-bottom: var(--spacing-12);
 
-swp-auth-plan-panel swp-auth-logo i {
-  color: var(--color-teal);
+    & i {
+      color: var(--color-teal);
+    }
+
+    @media (max-width: 768px) {
+      display: none;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    padding: var(--spacing-16);
+  }
+
+  @media (max-width: 768px) {
+    padding: var(--spacing-6);
+  }
+
+  @media (max-width: 480px) {
+    padding: var(--spacing-5);
+  }
 }
 
 swp-selected-plan-header {
@@ -123,6 +180,10 @@ swp-selected-plan-header {
   letter-spacing: 0.5px;
   color: var(--color-text-secondary);
   margin-bottom: var(--spacing-5);
+
+  @media (max-width: 768px) {
+    text-align: center;
+  }
 }
 
 /* ===========================================
@@ -161,11 +222,15 @@ swp-plan-price-amount {
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
   line-height: 1;
-}
 
-swp-plan-price-amount.contact {
-  font-size: var(--font-size-xl);
-  color: var(--color-purple);
+  &.contact {
+    font-size: var(--font-size-xl);
+    color: var(--color-purple);
+  }
+
+  @media (max-width: 768px) {
+    font-size: 28px;
+  }
 }
 
 swp-plan-price-period {
@@ -185,12 +250,12 @@ swp-plan-feature {
   gap: var(--spacing-3);
   font-size: var(--font-size-sm);
   color: var(--color-text);
-}
 
-swp-plan-feature i {
-  font-size: 18px;
-  color: var(--color-green);
-  flex-shrink: 0;
+  & i {
+    font-size: 18px;
+    color: var(--color-green);
+    flex-shrink: 0;
+  }
 }
 
 /* ===========================================
@@ -199,24 +264,28 @@ swp-plan-feature i {
 swp-change-plan-link {
   display: block;
   margin-top: var(--spacing-6);
-}
 
-swp-change-plan-link a {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  transition: color var(--transition-fast);
-}
+  & a {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-2);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    text-decoration: none;
+    transition: color var(--transition-fast);
 
-swp-change-plan-link a:hover {
-  color: var(--color-teal);
-}
+    &:hover {
+      color: var(--color-teal);
+    }
+  }
 
-swp-change-plan-link i {
-  font-size: 16px;
+  & i {
+    font-size: 16px;
+  }
+
+  @media (max-width: 480px) {
+    text-align: center;
+  }
 }
 
 /* ===========================================
@@ -228,6 +297,17 @@ swp-auth-features {
   gap: var(--spacing-5);
   position: relative;
   z-index: 1;
+
+  @media (max-width: 768px) {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--spacing-4);
+  }
+
+  @media (max-width: 480px) {
+    display: none;
+  }
 }
 
 swp-auth-feature {
@@ -235,11 +315,15 @@ swp-auth-feature {
   align-items: center;
   gap: var(--spacing-3);
   font-size: var(--font-size-base);
-}
 
-swp-auth-feature i {
-  font-size: 20px;
-  opacity: 0.9;
+  & i {
+    font-size: 20px;
+    opacity: 0.9;
+  }
+
+  @media (max-width: 768px) {
+    font-size: var(--font-size-sm);
+  }
 }
 
 /* ===========================================
@@ -252,11 +336,23 @@ swp-auth-form-panel {
   align-items: center;
   padding: var(--spacing-24);
   background: var(--color-surface);
+
+  @media (max-width: 768px) {
+    padding: var(--spacing-10) var(--spacing-6);
+  }
+
+  @media (max-width: 480px) {
+    padding: var(--spacing-8) var(--spacing-5);
+  }
 }
 
 swp-auth-form-container {
   width: 100%;
   max-width: 420px;
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+  }
 }
 
 swp-auth-header {
@@ -309,10 +405,10 @@ swp-user-verified {
   justify-content: center;
   color: var(--color-green);
   flex-shrink: 0;
-}
 
-swp-user-verified i {
-  font-size: 22px;
+  & i {
+    font-size: 22px;
+  }
 }
 
 /* ===========================================
@@ -325,39 +421,42 @@ swp-auth-form {
   gap: var(--spacing-5);
 }
 
-swp-form-input select option {
-  padding: var(--spacing-2);
+swp-form-input {
+  select option {
+    padding: var(--spacing-2);
+  }
+
+  &.has-icon input {
+    padding-right: 44px;
+  }
+
+  .input-icon {
+    position: absolute;
+    right: var(--spacing-3);
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    padding: var(--spacing-2);
+    border-radius: var(--radius-sm);
+    transition: color var(--transition-fast);
+
+    &:hover {
+      color: var(--color-text-secondary);
+    }
+
+    & i {
+      font-size: 20px;
+      display: block;
+    }
+  }
 }
 
-swp-form-label .optional {
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-muted);
-}
-
-/* Input with icon */
-swp-form-input.has-icon input {
-  padding-right: 44px;
-}
-
-swp-form-input .input-icon {
-  position: absolute;
-  right: var(--spacing-3);
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--color-text-muted);
-  cursor: pointer;
-  padding: var(--spacing-2);
-  border-radius: var(--radius-sm);
-  transition: color var(--transition-fast);
-}
-
-swp-form-input .input-icon:hover {
-  color: var(--color-text-secondary);
-}
-
-swp-form-input .input-icon i {
-  font-size: 20px;
-  display: block;
+swp-form-label {
+  .optional {
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-muted);
+  }
 }
 
 /* ===========================================
@@ -383,38 +482,38 @@ swp-strength-fill {
   width: 0%;
   border-radius: 2px;
   transition: width var(--transition-normal), background var(--transition-normal);
-}
 
-swp-strength-fill.weak {
-  width: 25%;
-  background: var(--color-red);
-}
+  &.weak {
+    width: 25%;
+    background: var(--color-red);
+  }
 
-swp-strength-fill.fair {
-  width: 50%;
-  background: var(--color-amber);
-}
+  &.fair {
+    width: 50%;
+    background: var(--color-amber);
+  }
 
-swp-strength-fill.good {
-  width: 75%;
-  background: var(--color-blue);
-}
+  &.good {
+    width: 75%;
+    background: var(--color-blue);
+  }
 
-swp-strength-fill.strong {
-  width: 100%;
-  background: var(--color-green);
+  &.strong {
+    width: 100%;
+    background: var(--color-green);
+  }
 }
 
 swp-strength-text {
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
   min-width: 50px;
-}
 
-swp-strength-text.weak { color: var(--color-red); }
-swp-strength-text.fair { color: var(--color-amber); }
-swp-strength-text.good { color: var(--color-blue); }
-swp-strength-text.strong { color: var(--color-green); }
+  &.weak { color: var(--color-red); }
+  &.fair { color: var(--color-amber); }
+  &.good { color: var(--color-blue); }
+  &.strong { color: var(--color-green); }
+}
 
 /* ===========================================
    CHECKBOX
@@ -424,31 +523,31 @@ swp-form-checkbox {
   align-items: flex-start;
   gap: var(--spacing-3);
   cursor: pointer;
-}
 
-swp-form-checkbox input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  margin: 0;
-  cursor: pointer;
-  accent-color: var(--color-teal);
-  flex-shrink: 0;
-  margin-top: 2px;
-}
+  input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    margin: 0;
+    cursor: pointer;
+    accent-color: var(--color-teal);
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
 
-swp-form-checkbox span {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  line-height: var(--line-height-normal);
-}
+  & span {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    line-height: var(--line-height-normal);
+  }
 
-swp-form-checkbox a {
-  color: var(--color-teal);
-  text-decoration: none;
-}
+  & a {
+    color: var(--color-teal);
+    text-decoration: none;
 
-swp-form-checkbox a:hover {
-  text-decoration: underline;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 /* Button base styles in components.css */
@@ -465,16 +564,16 @@ swp-auth-footer {
 swp-auth-footer-text {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
-}
 
-swp-auth-footer-text a {
-  color: var(--color-teal);
-  font-weight: var(--font-weight-medium);
-  text-decoration: none;
-}
+  & a {
+    color: var(--color-teal);
+    font-weight: var(--font-weight-medium);
+    text-decoration: none;
 
-swp-auth-footer-text a:hover {
-  text-decoration: underline;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 /* ===========================================
@@ -485,19 +584,19 @@ swp-auth-divider {
   align-items: center;
   gap: var(--spacing-4);
   margin: var(--spacing-6) 0;
-}
 
-swp-auth-divider::before,
-swp-auth-divider::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: var(--color-border);
-}
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--color-border);
+  }
 
-swp-auth-divider span {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-muted);
+  & span {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+  }
 }
 
 /* ===========================================
@@ -514,7 +613,6 @@ swp-social-buttons {
 /* ===========================================
    FORM MESSAGES
    =========================================== */
-/* Parent pattern with color variants - using CSS nesting */
 swp-form-error,
 swp-form-success {
   display: flex;
@@ -524,7 +622,7 @@ swp-form-success {
   border: 1px solid;
   border-radius: var(--border-radius);
   font-size: var(--font-size-sm);
-  
+
   & i {
     font-size: 18px;
   }
@@ -560,15 +658,15 @@ swp-pricing-header {
   align-items: center;
   text-align: center;
   margin-bottom: var(--spacing-16);
-}
 
-swp-pricing-header swp-auth-logo {
-  margin-bottom: var(--spacing-10);
-  color: var(--color-text);
-}
+  swp-auth-logo {
+    margin-bottom: var(--spacing-10);
+    color: var(--color-text);
 
-swp-pricing-header swp-auth-logo i {
-  color: var(--color-teal);
+    & i {
+      color: var(--color-teal);
+    }
+  }
 }
 
 swp-pricing-title {
@@ -592,38 +690,43 @@ swp-pricing-grid {
   max-width: 1100px;
   width: 100%;
   align-items: stretch;
-}
 
-/* Plan cards in pricing grid */
-swp-pricing-grid swp-plan-card {
-  padding: var(--spacing-8);
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
+  swp-plan-card {
+    padding: var(--spacing-8);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 
-swp-pricing-grid swp-plan-features {
-  flex: 1;
-}
+    &.popular {
+      border-color: var(--color-teal);
+      box-shadow: var(--shadow-focus-ring);
+      transform: scale(1.02);
 
-swp-pricing-grid swp-plan-action {
-  margin-top: auto;
-  padding-top: var(--spacing-6);
-}
+      @media (max-width: 1024px) {
+        transform: none;
+        order: -1;
+      }
+    }
+  }
 
-swp-pricing-grid swp-plan-card.popular {
-  border-color: var(--color-teal);
-  box-shadow: var(--shadow-focus-ring);
-  transform: scale(1.02);
+  swp-plan-features {
+    flex: 1;
+  }
+
+  swp-plan-action {
+    margin-top: auto;
+    padding-top: var(--spacing-6);
+  }
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+    max-width: 400px;
+  }
 }
 
 /* Plan badge/button styles in components.css */
 
-swp-pricing-grid swp-plan-action {
-  margin-top: var(--spacing-6);
-}
-
 swp-pricing-footer {
   margin-top: var(--spacing-12);
   text-align: center;
@@ -632,16 +735,16 @@ swp-pricing-footer {
 swp-pricing-footer-text {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
-}
 
-swp-pricing-footer-text a {
-  color: var(--color-teal);
-  font-weight: var(--font-weight-medium);
-  text-decoration: none;
-}
+  & a {
+    color: var(--color-teal);
+    font-weight: var(--font-weight-medium);
+    text-decoration: none;
 
-swp-pricing-footer-text a:hover {
-  text-decoration: underline;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 /* ===========================================
@@ -661,15 +764,15 @@ swp-order-line {
   justify-content: space-between;
   font-size: var(--font-size-sm);
   color: var(--color-text);
-}
 
-swp-order-line.discount {
-  color: var(--color-green);
-}
+  &.discount {
+    color: var(--color-green);
+  }
 
-swp-order-line.total {
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-base);
+  &.total {
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-base);
+  }
 }
 
 swp-order-divider {
@@ -694,10 +797,10 @@ swp-payment-secure {
   border-radius: var(--border-radius);
   font-size: var(--font-size-sm);
   color: var(--color-green);
-}
 
-swp-payment-secure i {
-  font-size: 16px;
+  & i {
+    font-size: 16px;
+  }
 }
 
 swp-payment-processing {
@@ -745,10 +848,10 @@ swp-success-icon {
   background: var(--bg-green-strong);
   border-radius: 50%;
   color: var(--color-green);
-}
 
-swp-success-icon i {
-  font-size: 32px;
+  & i {
+    font-size: 32px;
+  }
 }
 
 swp-success-title {
@@ -763,120 +866,10 @@ swp-success-text {
 }
 
 /* ===========================================
-   RESPONSIVE DESIGN
+   RESPONSIVE - Plan Card (shared)
    =========================================== */
-@media (max-width: 1024px) {
-  swp-auth-layout {
-    grid-template-columns: 40fr 60fr;
-  }
-
-  swp-auth-branding {
-    padding: var(--spacing-16);
-  }
-
-  swp-auth-plan-panel {
-    padding: var(--spacing-16);
-  }
-
-  swp-auth-tagline {
-    font-size: var(--font-size-2xl);
-  }
-
-  swp-pricing-grid {
-    grid-template-columns: 1fr;
-    max-width: 400px;
-  }
-
-  swp-pricing-grid swp-plan-card.popular {
-    transform: none;
-    order: -1;
-  }
-}
-
 @media (max-width: 768px) {
-  swp-auth-layout {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-  }
-
-  swp-auth-branding {
-    padding: var(--spacing-10) var(--spacing-6);
-    text-align: center;
-    align-items: center;
-  }
-
-  swp-auth-plan-panel {
-    padding: var(--spacing-6);
-  }
-
-  swp-auth-plan-panel swp-auth-logo {
-    display: none;
-  }
-
-  swp-selected-plan-header {
-    text-align: center;
-  }
-
   swp-plan-card {
     padding: var(--spacing-5);
   }
-
-  swp-plan-price-amount {
-    font-size: 28px;
-  }
-
-  swp-auth-logo {
-    margin-bottom: var(--spacing-6);
-    justify-content: center;
-  }
-
-  swp-auth-tagline {
-    font-size: var(--font-size-xl);
-    margin-bottom: var(--spacing-4);
-  }
-
-  swp-auth-subtitle {
-    display: none;
-  }
-
-  swp-auth-features {
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: var(--spacing-4);
-  }
-
-  swp-auth-feature {
-    font-size: var(--font-size-sm);
-  }
-
-  swp-auth-form-panel {
-    padding: var(--spacing-10) var(--spacing-6);
-  }
-
-  swp-auth-form-container {
-    max-width: 100%;
-  }
-}
-
-@media (max-width: 480px) {
-  swp-auth-branding {
-    padding: var(--spacing-8) var(--spacing-5);
-  }
-
-  swp-auth-plan-panel {
-    padding: var(--spacing-5);
-  }
-
-  swp-auth-form-panel {
-    padding: var(--spacing-8) var(--spacing-5);
-  }
-
-  swp-auth-features {
-    display: none;
-  }
-
-  swp-change-plan-link {
-    text-align: center;
-  }
 }
diff --git a/PlanTempus.Application/wwwroot/css/cash.css b/PlanTempus.Application/wwwroot/css/cash.css
index 9fb4384..f7b8ba9 100644
--- a/PlanTempus.Application/wwwroot/css/cash.css
+++ b/PlanTempus.Application/wwwroot/css/cash.css
@@ -19,6 +19,20 @@ swp-filter-bar {
   border-radius: var(--radius-lg);
   margin-bottom: var(--spacing-10);
   flex-wrap: wrap;
+
+  input, select {
+    padding: var(--spacing-4) var(--spacing-6);
+    font-size: var(--font-size-md);
+    font-family: var(--font-family);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+
+    &:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+  }
 }
 
 swp-filter-group {
@@ -33,22 +47,6 @@ swp-filter-label {
   color: var(--color-text-secondary);
 }
 
-swp-filter-bar input,
-swp-filter-bar select {
-  padding: var(--spacing-4) var(--spacing-6);
-  font-size: var(--font-size-md);
-  font-family: var(--font-family);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-}
-
-swp-filter-bar input:focus,
-swp-filter-bar select:focus {
-  outline: none;
-  border-color: var(--color-teal);
-}
-
 swp-filter-spacer {
   flex: 1;
 }
@@ -62,47 +60,47 @@ swp-cash-stats {
   gap: var(--spacing-8);
   max-width: var(--page-max-width);
   margin: 0 auto;
-}
 
-swp-cash-stats:not(.active) {
-  display: none;
+  &:not(.active) {
+    display: none;
+  }
 }
 
 swp-cash-stat {
   background: var(--color-background-alt);
   border-radius: var(--radius-lg);
   padding: var(--spacing-6) var(--spacing-8);
-}
 
-swp-cash-stat-value {
-  display: block;
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-semibold);
-  font-family: var(--font-mono);
-  color: var(--color-text);
-}
+  swp-cash-stat-value {
+    display: block;
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-semibold);
+    font-family: var(--font-mono);
+    color: var(--color-text);
+  }
 
-swp-cash-stat-label {
-  display: block;
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  margin-top: var(--spacing-2);
-}
+  swp-cash-stat-label {
+    display: block;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    margin-top: var(--spacing-2);
+  }
 
-swp-cash-stat.highlight swp-cash-stat-value {
-  color: var(--color-teal);
-}
+  &.highlight swp-cash-stat-value {
+    color: var(--color-teal);
+  }
 
-swp-cash-stat.warning swp-cash-stat-value {
-  color: var(--color-amber);
-}
+  &.warning swp-cash-stat-value {
+    color: var(--color-amber);
+  }
 
-swp-cash-stat.negative swp-cash-stat-value {
-  color: var(--color-red);
-}
+  &.negative swp-cash-stat-value {
+    color: var(--color-red);
+  }
 
-swp-cash-stat.user swp-cash-stat-value {
-  color: var(--color-blue);
+  &.user swp-cash-stat-value {
+    color: var(--color-blue);
+  }
 }
 
 /* ===========================================
@@ -134,20 +132,41 @@ swp-cash-table {
   border: 1px solid var(--color-border);
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   overflow: hidden;
-}
 
-swp-cash-table-header,
-swp-cash-table-body {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
-}
+  input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--color-teal);
+    cursor: pointer;
+  }
 
-swp-cash-table-header {
-  background: var(--color-background-alt);
-  border-bottom: 1px solid var(--color-border);
-  padding: var(--spacing-6) var(--spacing-10);
-  align-items: center;
+  swp-cash-table-header {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    background: var(--color-background-alt);
+    border-bottom: 1px solid var(--color-border);
+    padding: var(--spacing-6) var(--spacing-10);
+    align-items: center;
+  }
+
+  swp-cash-table-body {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+  }
+
+  swp-cash-table-footer {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-7) var(--spacing-10);
+    background: var(--color-background-alt);
+    border-top: 1px solid var(--color-border);
+    font-size: var(--font-size-md);
+    color: var(--color-text-secondary);
+  }
 }
 
 swp-cash-table-row {
@@ -155,6 +174,27 @@ swp-cash-table-row {
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
   align-items: center;
+  padding: var(--spacing-7) var(--spacing-10);
+  border-bottom: 1px solid var(--color-border);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: var(--color-background-hover);
+  }
+
+  &.draft-row {
+    background: var(--bg-amber-subtle);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--bg-amber-medium);
+    }
+  }
 }
 
 swp-cash-th {
@@ -163,90 +203,71 @@ swp-cash-th {
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--color-text-secondary);
-}
 
-swp-cash-th.right {
-  text-align: right;
-}
+  &.right {
+    text-align: right;
+  }
 
-swp-cash-th.checkbox,
-swp-cash-td.checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  &.checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-swp-cash-table input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  accent-color: var(--color-teal);
-  cursor: pointer;
-}
-
-swp-cash-table-row {
-  padding: var(--spacing-7) var(--spacing-10);
-  border-bottom: 1px solid var(--color-border);
-  cursor: pointer;
-  transition: background var(--transition-fast);
-}
-
-swp-cash-table-row:last-child {
-  border-bottom: none;
-}
-
-swp-cash-table-row:hover {
-  background: var(--color-background-hover);
-}
-
-/* Draft row - clickable to go to Kasseafstemning */
-swp-cash-table-row.draft-row {
-  background: var(--bg-amber-subtle);
-  cursor: pointer;
-}
-
-swp-cash-table-row.draft-row:hover {
-  background: var(--bg-amber-medium);
+  &:nth-child(9) {
+    text-align: center;
+  }
 }
 
 swp-cash-td {
   font-size: var(--font-size-base);
   color: var(--color-text);
-}
 
-swp-cash-td.right {
-  text-align: right;
-}
+  &.right {
+    text-align: right;
+  }
 
-swp-cash-td.mono {
-  font-family: var(--font-mono);
-}
+  &.mono {
+    font-family: var(--font-mono);
+  }
 
-swp-cash-td.muted {
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
-}
+  &.muted {
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-sm);
+  }
 
-swp-cash-td.negative {
-  color: var(--color-red);
-}
+  &.negative {
+    color: var(--color-red);
+  }
 
-swp-cash-td.positive {
-  color: var(--color-green);
-}
+  &.positive {
+    color: var(--color-green);
+  }
 
-swp-cash-td.id {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  font-family: var(--font-mono);
+  &.id {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    font-family: var(--font-mono);
+  }
+
+  &.checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:nth-child(9) {
+    text-align: center;
+  }
 }
 
 swp-period-cell {
   display: block;
-}
 
-swp-period-cell .dates {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
+  .dates {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+  }
 }
 
 /* ===========================================
@@ -262,72 +283,50 @@ swp-row-toggle {
   color: var(--color-text-secondary);
   cursor: pointer;
   transition: all var(--transition-fast);
+
+  &:hover {
+    background: var(--color-background-alt);
+    color: var(--color-text);
+  }
+
+  i {
+    font-size: var(--font-size-lg);
+    transition: transform var(--transition-fast);
+  }
 }
 
-swp-row-toggle:hover {
-  background: var(--color-background-alt);
-  color: var(--color-text);
-}
-
-swp-row-toggle i {
-  font-size: var(--font-size-lg);
-  transition: transform var(--transition-fast);
-}
-
-/* Row detail - hidden by default */
 swp-cash-row-detail {
   grid-column: 1 / -1;
   display: none;
   overflow: hidden;
   background: var(--color-background-alt);
   border-bottom: 1px solid var(--color-border);
+
+  &.expanded {
+    display: block;
+  }
+
+  swp-row-detail-content {
+    display: block;
+    padding: var(--spacing-8) var(--spacing-10);
+  }
+
+  swp-row-detail-actions {
+    display: flex;
+    gap: var(--spacing-4);
+    justify-content: flex-end;
+  }
 }
 
-swp-cash-row-detail.expanded {
-  display: block;
-}
-
-swp-row-detail-content {
-  display: block;
-  padding: var(--spacing-8) var(--spacing-10);
-}
-
-swp-row-detail-actions {
-  display: flex;
-  gap: var(--spacing-4);
-  justify-content: flex-end;
-}
-
-/* Legacy support */
 swp-row-arrow {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   color: var(--color-text-secondary);
-}
 
-swp-row-arrow i {
-  font-size: var(--font-size-lg);
-}
-
-swp-cash-table-footer {
-  grid-column: 1 / -1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-7) var(--spacing-10);
-  background: var(--color-background-alt);
-  border-top: 1px solid var(--color-border);
-  font-size: var(--font-size-md);
-  color: var(--color-text-secondary);
-}
-
-/* Status badge styles in components.css */
-
-/* Center status column */
-swp-cash-th:nth-child(9),
-swp-cash-td:nth-child(9) {
-  text-align: center;
+  i {
+    font-size: var(--font-size-lg);
+  }
 }
 
 /* ===========================================
@@ -339,12 +338,6 @@ swp-cash-grid {
   gap: var(--spacing-12);
 }
 
-@media (max-width: 900px) {
-  swp-cash-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
 swp-cash-column {
   display: grid;
   gap: var(--spacing-10);
@@ -354,25 +347,24 @@ swp-cash-column {
 /* ===========================================
    DATA TABLE (Dagens Tal)
    =========================================== */
-
 swp-data-header {
   display: grid;
   grid-template-columns: 1fr 100px 140px;
   gap: var(--spacing-6);
   padding: var(--spacing-5) 0;
   border-bottom: 2px solid var(--color-border);
-}
 
-swp-data-header span {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-text-secondary);
-}
+  span {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--color-text-secondary);
 
-swp-data-header span:not(:first-child) {
-  text-align: right;
+    &:not(:first-child) {
+      text-align: right;
+    }
+  }
 }
 
 swp-data-row {
@@ -382,10 +374,10 @@ swp-data-row {
   padding: var(--spacing-7) 0;
   border-bottom: 1px solid var(--color-border);
   align-items: center;
-}
 
-swp-data-row:last-child {
-  border-bottom: none;
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 swp-data-label {
@@ -400,26 +392,28 @@ swp-data-system {
   color: var(--color-text-secondary);
 }
 
-swp-data-input input {
-  width: 100%;
-  padding: var(--spacing-4) var(--spacing-5);
-  font-size: var(--font-size-base);
-  font-family: var(--font-mono);
-  text-align: right;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-}
+swp-data-input {
+  input {
+    width: 100%;
+    padding: var(--spacing-4) var(--spacing-5);
+    font-size: var(--font-size-base);
+    font-family: var(--font-mono);
+    text-align: right;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
 
-swp-data-input input:focus {
-  outline: none;
-  border-color: var(--color-teal);
-}
+    &:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
 
-swp-data-input input::placeholder {
-  color: var(--color-text-muted);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
+    &::placeholder {
+      color: var(--color-text-muted);
+      font-family: var(--font-family);
+      font-size: var(--font-size-sm);
+    }
+  }
 }
 
 swp-data-value {
@@ -427,10 +421,10 @@ swp-data-value {
   font-family: var(--font-mono);
   font-size: var(--font-size-base);
   color: var(--color-text);
-}
 
-swp-data-value.muted {
-  color: var(--color-text-secondary);
+  &.muted {
+    color: var(--color-text-secondary);
+  }
 }
 
 swp-table-note {
@@ -452,56 +446,60 @@ swp-calc-row {
   align-items: center;
   padding: var(--spacing-7) 0;
   border-bottom: 1px solid var(--color-border);
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+
+  &.input-row {
+    background: var(--color-background-alt);
+    margin: var(--spacing-8) calc(-1 * var(--spacing-5)) calc(-1 * var(--spacing-5));
+    padding: var(--spacing-8) var(--spacing-5);
+    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
+  }
 }
 
-swp-calc-row:last-of-type {
-  border-bottom: none;
-}
+swp-calc-label {
+  span {
+    display: block;
+    font-size: var(--font-size-base);
+    color: var(--color-text);
+  }
 
-swp-calc-row.input-row {
-  background: var(--color-background-alt);
-  margin: var(--spacing-8) calc(-1 * var(--spacing-5)) calc(-1 * var(--spacing-5));
-  padding: var(--spacing-8) var(--spacing-5);
-  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
-}
-
-swp-calc-label span {
-  display: block;
-  font-size: var(--font-size-base);
-  color: var(--color-text);
-}
-
-swp-calc-label small {
-  display: block;
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  margin-top: var(--spacing-1);
+  small {
+    display: block;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    margin-top: var(--spacing-1);
+  }
 }
 
 swp-calc-value {
   font-family: var(--font-mono);
   font-size: var(--font-size-base);
   color: var(--color-text);
+
+  &.muted {
+    color: var(--color-text-secondary);
+  }
 }
 
-swp-calc-value.muted {
-  color: var(--color-text-secondary);
-}
+swp-calc-input {
+  input {
+    width: 140px;
+    padding: var(--spacing-6) var(--spacing-7);
+    font-size: var(--font-size-lg);
+    font-family: var(--font-mono);
+    text-align: right;
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
 
-swp-calc-input input {
-  width: 140px;
-  padding: var(--spacing-6) var(--spacing-7);
-  font-size: var(--font-size-lg);
-  font-family: var(--font-mono);
-  text-align: right;
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-}
-
-swp-calc-input input:focus {
-  outline: none;
-  border-color: var(--color-teal);
+    &:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+  }
 }
 
 /* ===========================================
@@ -514,50 +512,50 @@ swp-difference-box {
   padding: var(--spacing-10);
   border-radius: var(--radius-lg);
   background: var(--color-background-alt);
-}
 
-swp-difference-box.positive {
-  background: var(--bg-green-medium);
-}
+  &.positive {
+    background: var(--bg-green-medium);
 
-swp-difference-box.negative {
-  background: var(--bg-red-medium);
-}
+    swp-difference-value {
+      color: var(--color-green);
+    }
+  }
 
-swp-difference-box.neutral {
-  background: var(--bg-teal-medium);
-}
+  &.negative {
+    background: var(--bg-red-medium);
 
-swp-difference-label {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text);
-}
+    swp-difference-value {
+      color: var(--color-red);
+    }
+  }
 
-swp-difference-label small {
-  display: block;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-regular);
-  color: var(--color-text-secondary);
-  margin-top: var(--spacing-2);
-}
+  &.neutral {
+    background: var(--bg-teal-medium);
 
-swp-difference-value {
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-semibold);
-  font-family: var(--font-mono);
-}
+    swp-difference-value {
+      color: var(--color-teal);
+    }
+  }
 
-swp-difference-box.positive swp-difference-value {
-  color: var(--color-green);
-}
+  swp-difference-label {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text);
 
-swp-difference-box.negative swp-difference-value {
-  color: var(--color-red);
-}
+    small {
+      display: block;
+      font-size: var(--font-size-sm);
+      font-weight: var(--font-weight-regular);
+      color: var(--color-text-secondary);
+      margin-top: var(--spacing-2);
+    }
+  }
 
-swp-difference-box.neutral swp-difference-value {
-  color: var(--color-teal);
+  swp-difference-value {
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-semibold);
+    font-family: var(--font-mono);
+  }
 }
 
 /* ===========================================
@@ -568,30 +566,30 @@ swp-period-display {
   padding: var(--spacing-8);
   background: var(--color-background-alt);
   border-radius: var(--radius-lg);
-}
 
-swp-period-label {
-  display: block;
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-text-secondary);
-  margin-bottom: var(--spacing-4);
-}
+  swp-period-label {
+    display: block;
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--color-text-secondary);
+    margin-bottom: var(--spacing-4);
+  }
 
-swp-period-value {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-5);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text);
-}
+  swp-period-value {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-5);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text);
 
-swp-period-value .arrow {
-  color: var(--color-teal);
-  font-weight: var(--font-weight-regular);
+    .arrow {
+      color: var(--color-teal);
+      font-weight: var(--font-weight-regular);
+    }
+  }
 }
 
 /* ===========================================
@@ -605,10 +603,10 @@ swp-form-grid {
 
 swp-form-field {
   display: block;
-}
 
-swp-form-field.full-width {
-  grid-column: 1 / -1;
+  &.full-width {
+    grid-column: 1 / -1;
+  }
 }
 
 swp-form-label {
@@ -619,28 +617,28 @@ swp-form-label {
   margin-bottom: var(--spacing-3);
   text-transform: uppercase;
   letter-spacing: 0.3px;
+
+  .required {
+    color: var(--color-red);
+  }
 }
 
-swp-form-label .required {
-  color: var(--color-red);
-}
+swp-form-input {
+  input, select {
+    width: 100%;
+    padding: var(--spacing-5) var(--spacing-6);
+    font-size: var(--font-size-base);
+    font-family: var(--font-family);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    transition: border-color var(--transition-fast);
 
-swp-form-input input,
-swp-form-input select {
-  width: 100%;
-  padding: var(--spacing-5) var(--spacing-6);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  transition: border-color var(--transition-fast);
-}
-
-swp-form-input input:focus,
-swp-form-input select:focus {
-  outline: none;
-  border-color: var(--color-teal);
+    &:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+  }
 }
 
 swp-auto-id {
@@ -655,20 +653,22 @@ swp-auto-id {
 /* ===========================================
    NOTE FIELD
    =========================================== */
-swp-note-field textarea {
-  width: 100%;
-  min-height: 80px;
-  padding: var(--spacing-6);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  resize: vertical;
-}
+swp-note-field {
+  textarea {
+    width: 100%;
+    min-height: 80px;
+    padding: var(--spacing-6);
+    font-size: var(--font-size-base);
+    font-family: var(--font-family);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    resize: vertical;
 
-swp-note-field textarea:focus {
-  outline: none;
-  border-color: var(--color-teal);
+    &:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+  }
 }
 
 swp-note-hint {
@@ -701,32 +701,28 @@ swp-checkbox-field {
   background: var(--color-background-alt);
   border-radius: var(--radius-lg);
   grid-column: 1 / -1;
-}
 
-swp-checkbox-field input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  margin-top: var(--spacing-1);
-  accent-color: var(--color-teal);
-  cursor: pointer;
-}
+  input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    margin-top: var(--spacing-1);
+    accent-color: var(--color-teal);
+    cursor: pointer;
+  }
 
-swp-checkbox-field label {
-  font-size: var(--font-size-md);
-  color: var(--color-text);
-  cursor: pointer;
-  line-height: var(--line-height-normal);
+  label {
+    font-size: var(--font-size-md);
+    color: var(--color-text);
+    cursor: pointer;
+    line-height: var(--line-height-normal);
+  }
 }
 
-/* Card footer base styles in components.css */
-
 swp-actions-right {
   display: flex;
   gap: var(--spacing-5);
 }
 
-/* Button styles in components.css */
-
 /* ===========================================
    SYSTEM NOTE
    =========================================== */
@@ -747,17 +743,21 @@ swp-system-note {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  /* Table columns defined on parent - subgrid inherits */
   swp-cash-table {
     grid-template-columns: 50px 80px 1fr 100px 110px 120px 40px;
   }
 
-  /* Hide some columns on smaller screens */
-  swp-cash-th:nth-child(3),
-  swp-cash-td:nth-child(3),
-  swp-cash-th:nth-child(6),
-  swp-cash-td:nth-child(6) {
-    display: none;
+  swp-cash-th, swp-cash-td {
+    &:nth-child(3),
+    &:nth-child(6) {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 900px) {
+  swp-cash-grid {
+    grid-template-columns: 1fr;
   }
 }
 
diff --git a/PlanTempus.Application/wwwroot/css/components.css b/PlanTempus.Application/wwwroot/css/components.css
index 9149acf..613483e 100644
--- a/PlanTempus.Application/wwwroot/css/components.css
+++ b/PlanTempus.Application/wwwroot/css/components.css
@@ -1,4 +1,4 @@
-g/**
+/**
  * UI Components - Shared reusable components
  *
  * This file contains all shared UI components used across the application.
@@ -21,13 +21,20 @@ g/**
 /* ===========================================
    BASE PATTERNS - Grid + Subgrid Tables
    =========================================== */
-/* Base table structure - use with feature-specific column definitions */
 swp-table-header-base {
   display: grid;
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
   background: var(--color-background-alt);
   border-bottom: 1px solid var(--color-border);
+
+  swp-table-cell-base {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--color-text-secondary);
+  }
 }
 
 swp-table-body-base {
@@ -43,23 +50,14 @@ swp-table-row-base {
   align-items: center;
   border-bottom: 1px solid var(--color-border);
   transition: background var(--transition-fast);
-}
 
-swp-table-row-base:last-child {
-  border-bottom: none;
-}
+  &:last-child {
+    border-bottom: none;
+  }
 
-swp-table-row-base:hover {
-  background: var(--color-background-hover);
-}
-
-/* Header cells base styling */
-swp-table-header-base swp-table-cell-base {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-text-secondary);
+  &:hover {
+    background: var(--color-background-hover);
+  }
 }
 
 /* ===========================================
@@ -79,10 +77,10 @@ swp-list-item-base {
   border-radius: var(--radius-lg);
   cursor: pointer;
   transition: background var(--transition-fast);
-}
 
-swp-list-item-base:hover {
-  background: var(--color-background-hover);
+  &:hover {
+    background: var(--color-background-hover);
+  }
 }
 
 /* ===========================================
@@ -118,110 +116,110 @@ swp-btn {
   cursor: pointer;
   transition: all var(--transition-fast);
   text-decoration: none;
-  
+
   & i {
     font-size: 18px;
   }
-}
 
-/* Primary button */
-swp-btn.primary {
-  background: var(--color-teal);
-  color: white;
-  border-color: var(--color-teal);
-}
+  /* Primary button */
+  &.primary {
+    background: var(--color-teal);
+    color: white;
+    border-color: var(--color-teal);
 
-swp-btn.primary:hover {
-  background: #00796b;
-  border-color: #00796b;
-}
+    &:hover {
+      background: #00796b;
+      border-color: #00796b;
+    }
 
-swp-btn.primary:active {
-  transform: translateY(1px);
-}
+    &:active {
+      transform: translateY(1px);
+    }
 
-swp-btn.primary:disabled {
-  background: var(--color-border);
-  border-color: var(--color-border);
-  cursor: not-allowed;
-}
+    &:disabled {
+      background: var(--color-border);
+      border-color: var(--color-border);
+      cursor: not-allowed;
+    }
+  }
 
-/* Secondary button */
-swp-btn.secondary {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  color: var(--color-text);
-}
+  /* Secondary button */
+  &.secondary {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    color: var(--color-text);
 
-swp-btn.secondary:hover {
-  background: var(--color-background-hover);
-}
+    &:hover {
+      background: var(--color-background-hover);
+    }
+  }
 
-/* Ghost button */
-swp-btn.ghost {
-  background: transparent;
-  color: var(--color-text-secondary);
-}
+  /* Ghost button */
+  &.ghost {
+    background: transparent;
+    color: var(--color-text-secondary);
 
-swp-btn.ghost:hover {
-  color: var(--color-text);
-}
+    &:hover {
+      color: var(--color-text);
+    }
+  }
 
-/* Outline button */
-swp-btn.outline {
-  background: transparent;
-  border: 1px solid var(--color-teal);
-  color: var(--color-teal);
-}
+  /* Outline button */
+  &.outline {
+    background: transparent;
+    border: 1px solid var(--color-teal);
+    color: var(--color-teal);
 
-swp-btn.outline:hover {
-  background: var(--bg-teal-medium);
-}
+    &:hover {
+      background: var(--bg-teal-medium);
+    }
 
-swp-btn.outline.purple {
-  border-color: var(--color-purple);
-  color: var(--color-purple);
-}
+    &.purple {
+      border-color: var(--color-purple);
+      color: var(--color-purple);
 
-swp-btn.outline.purple:hover {
-  background: var(--bg-purple-medium);
-}
+      &:hover {
+        background: var(--bg-purple-medium);
+      }
+    }
+  }
 
-/* Social button */
-swp-btn.social {
-  background: var(--color-background);
-  color: var(--color-text);
-  border-color: var(--color-border);
-}
+  /* Social button */
+  &.social {
+    background: var(--color-background);
+    color: var(--color-text);
+    border-color: var(--color-border);
 
-swp-btn.social:hover {
-  background: var(--color-background-hover);
-  border-color: var(--color-text-muted);
-}
+    &:hover {
+      background: var(--color-background-hover);
+      border-color: var(--color-text-muted);
+    }
 
-swp-btn.social img {
-  width: 20px;
-  height: 20px;
-}
+    & img {
+      width: 20px;
+      height: 20px;
+    }
+  }
 
-/* Size variants */
-swp-btn.sm {
-  padding: var(--spacing-2) var(--spacing-3);
-  font-size: var(--font-size-xs);
-}
+  /* Size variants */
+  &.sm {
+    padding: var(--spacing-2) var(--spacing-3);
+    font-size: var(--font-size-xs);
 
-swp-btn.sm i {
-  font-size: 14px;
-}
+    & i {
+      font-size: 14px;
+    }
+  }
 
-swp-btn.lg {
-  padding: var(--spacing-4) var(--spacing-8);
-  font-size: var(--font-size-lg);
-}
+  &.lg {
+    padding: var(--spacing-4) var(--spacing-8);
+    font-size: var(--font-size-lg);
+  }
 
-/* Full width */
-swp-btn.full-width {
-  width: 100%;
+  /* Full width */
+  &.full-width {
+    width: 100%;
+  }
 }
 
 /* ===========================================
@@ -235,100 +233,78 @@ swp-status-badge {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   border-radius: var(--radius-pill);
-}
 
-swp-status-badge::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: var(--radius-full);
-  background: currentColor;
-}
+  &::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: var(--radius-full);
+    background: currentColor;
+  }
 
-/* Status variants */
-swp-status-badge.approved,
-swp-status-badge.active {
-  background: var(--bg-green-strong);
-  color: var(--color-green);
-}
+  /* Status variants - green */
+  &.approved,
+  &.active,
+  &.valid,
+  &.confirmed {
+    background: var(--bg-green-strong);
+    color: var(--color-green);
+  }
 
-swp-status-badge.draft,
-swp-status-badge.invited {
-  background: var(--bg-amber-strong);
-  color: #b45309;
-}
+  /* Status variants - amber */
+  &.draft,
+  &.invited,
+  &.expiring,
+  &.warning,
+  &.pending {
+    background: var(--bg-amber-strong);
+    color: #b45309;
+  }
 
-/* Role variants */
-swp-status-badge.owner {
-  background: var(--bg-teal-strong);
-  color: var(--color-teal);
-}
+  /* Use color-amber for pending specifically */
+  &.pending {
+    color: var(--color-amber);
+  }
 
-swp-status-badge.admin {
-  background: var(--bg-purple-strong);
-  color: var(--color-purple);
-}
+  /* Role variants */
+  &.owner,
+  &.enrolled,
+  &.ferie {
+    background: var(--bg-teal-strong);
+    color: var(--color-teal);
+  }
 
-swp-status-badge.leader {
-  background: var(--bg-blue-strong);
-  color: var(--color-blue);
-}
+  &.admin {
+    background: var(--bg-purple-strong);
+    color: var(--color-purple);
+  }
 
-swp-status-badge.employee {
-  background: var(--color-background-alt);
-  color: var(--color-text-secondary);
-}
+  &.leader,
+  &.fri,
+  &.info,
+  &.inprogress,
+  &.in-progress {
+    background: var(--bg-blue-strong);
+    color: var(--color-blue);
+  }
 
-/* Additional status variants */
-swp-status-badge.valid {
-  background: var(--bg-green-strong);
-  color: var(--color-green);
-}
+  &.employee {
+    background: var(--color-background-alt);
+    color: var(--color-text-secondary);
+  }
 
-swp-status-badge.expiring,
-swp-status-badge.warning {
-  background: var(--bg-amber-strong);
-  color: #b45309;
-}
+  /* Danger/red variants */
+  &.sygdom,
+  &.danger {
+    background: var(--bg-red-strong);
+    color: var(--color-red);
+  }
 
-swp-status-badge.enrolled,
-swp-status-badge.ferie {
-  background: var(--bg-teal-strong);
-  color: var(--color-teal);
-}
-
-swp-status-badge.fri,
-swp-status-badge.info {
-  background: var(--bg-blue-strong);
-  color: var(--color-blue);
-}
-
-swp-status-badge.sygdom,
-swp-status-badge.danger {
-  background: var(--bg-red-strong);
-  color: var(--color-red);
-}
-
-/* Booking/scheduling specific variants */
-swp-status-badge.confirmed {
-  background: var(--bg-green-strong);
-  color: var(--color-green);
-}
-
-swp-status-badge.pending {
-  background: var(--bg-amber-strong);
-  color: var(--color-amber);
-}
-
-swp-status-badge.inprogress,
-swp-status-badge.in-progress {
-  background: var(--bg-blue-strong);
-  color: var(--color-blue);
-}
-
-swp-status-badge.completed {
-  background: var(--color-background-hover);
-  color: var(--color-text-secondary);
+  /* Completed - muted */
+  &.completed {
+    background: var(--color-background-hover);
+    color: var(--color-text-secondary);
+  }
 }
 
 /* ===========================================
@@ -342,29 +318,28 @@ swp-plan-card {
   border-radius: var(--radius-xl);
   padding: var(--spacing-10);
   transition: all var(--transition-normal);
-}
 
-swp-plan-card.selected,
-swp-plan-card.current {
-  border-color: var(--color-teal);
-  box-shadow: 0 0 0 3px var(--bg-teal-strong);
-}
+  &.selected,
+  &.current {
+    border-color: var(--color-teal);
+    box-shadow: 0 0 0 3px var(--bg-teal-strong);
 
-swp-plan-card.popular {
-  border-color: var(--color-amber);
-}
+    swp-btn.secondary {
+      background: var(--color-background-alt);
+      color: var(--color-text-secondary);
+      cursor: default;
+      pointer-events: none;
+    }
+  }
 
-swp-plan-card.enterprise {
-  background: linear-gradient(135deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-purple) 5%, var(--color-surface)) 100%);
-  border-color: var(--color-purple);
-}
+  &.popular {
+    border-color: var(--color-amber);
+  }
 
-/* Disabled button for current plan */
-swp-plan-card.current swp-btn.secondary {
-  background: var(--color-background-alt);
-  color: var(--color-text-secondary);
-  cursor: default;
-  pointer-events: none;
+  &.enterprise {
+    background: var(--gradient-enterprise);
+    border-color: var(--color-purple);
+  }
 }
 
 /* Plan badge */
@@ -379,41 +354,41 @@ swp-plan-badge {
   letter-spacing: 0.5px;
   border-radius: var(--radius-pill);
   width: fit-content;
-}
 
-swp-plan-badge.current,
-swp-plan-badge.selected {
-  background: var(--bg-teal-strong);
-  color: var(--color-teal);
-}
+  & i {
+    font-size: 14px;
+  }
 
-swp-plan-badge.popular {
-  background: var(--bg-amber-strong);
-  color: var(--color-amber);
-}
+  &.current,
+  &.selected {
+    background: var(--bg-teal-strong);
+    color: var(--color-teal);
+  }
 
-swp-plan-badge.enterprise {
-  background: var(--bg-purple-strong);
-  color: var(--color-purple);
-}
+  &.popular {
+    background: var(--bg-amber-strong);
+    color: var(--color-amber);
+  }
 
-swp-plan-badge.free {
-  background: var(--bg-green-strong);
-  color: var(--color-green);
-}
+  &.enterprise {
+    background: var(--bg-purple-strong);
+    color: var(--color-purple);
+  }
 
-swp-plan-badge i {
-  font-size: 14px;
+  &.free {
+    background: var(--bg-green-strong);
+    color: var(--color-green);
+  }
 }
 
 /* Plan action */
 swp-plan-action {
   margin-top: auto;
   padding-top: var(--card-padding);
-}
 
-swp-plan-action swp-btn {
-  width: 100%;
+  swp-btn {
+    width: 100%;
+  }
 }
 
 /* ===========================================
@@ -428,49 +403,46 @@ swp-avatar {
   justify-content: center;
   font-weight: var(--font-weight-semibold);
   flex-shrink: 0;
-}
-
-/* Default size (md = 40px) */
-swp-avatar {
+  /* Default size (md = 40px) */
   width: 40px;
   height: 40px;
   font-size: var(--font-size-sm);
-}
 
-/* Size variants */
-swp-avatar.size-xs {
-  width: 24px;
-  height: 24px;
-  font-size: 10px;
-}
+  /* Size variants */
+  &.size-xs {
+    width: 24px;
+    height: 24px;
+    font-size: 10px;
+  }
 
-swp-avatar.size-sm {
-  width: 36px;
-  height: 36px;
-  font-size: var(--font-size-xs);
-}
+  &.size-sm {
+    width: 36px;
+    height: 36px;
+    font-size: var(--font-size-xs);
+  }
 
-swp-avatar.size-lg {
-  width: 80px;
-  height: 80px;
-  font-size: var(--font-size-2xl);
-}
+  &.size-lg {
+    width: 80px;
+    height: 80px;
+    font-size: var(--font-size-2xl);
+  }
 
-/* Color variants */
-swp-avatar.purple {
-  background: var(--color-purple);
-}
+  /* Color variants */
+  &.purple {
+    background: var(--color-purple);
+  }
 
-swp-avatar.blue {
-  background: var(--color-blue);
-}
+  &.blue {
+    background: var(--color-blue);
+  }
 
-swp-avatar.amber {
-  background: var(--color-amber);
-}
+  &.amber {
+    background: var(--color-amber);
+  }
 
-swp-avatar.teal {
-  background: var(--color-teal);
+  &.teal {
+    background: var(--color-teal);
+  }
 }
 
 /* ===========================================
@@ -488,16 +460,16 @@ swp-icon-btn {
   color: var(--color-text-secondary);
   cursor: pointer;
   transition: all var(--transition-fast);
-  
+
   & i {
     font-size: 18px;
   }
-  
+
   &:hover {
     background: var(--color-background-alt);
     color: var(--color-text);
   }
-  
+
   &.danger:hover {
     background: var(--bg-red-medium);
     color: var(--color-red);
@@ -536,12 +508,12 @@ swp-section-header {
   padding-bottom: var(--spacing-4);
   border-bottom: 1px solid var(--color-border);
   margin-bottom: var(--spacing-6);
-}
 
-swp-section-header swp-section-label {
-  padding-bottom: 0;
-  border-bottom: none;
-  margin-bottom: 0;
+  swp-section-label {
+    padding-bottom: 0;
+    border-bottom: none;
+    margin-bottom: 0;
+  }
 }
 
 swp-section-action {
@@ -549,7 +521,7 @@ swp-section-action {
   color: var(--color-teal);
   cursor: pointer;
   transition: opacity var(--transition-fast);
-  
+
   &:hover {
     opacity: 0.8;
   }
@@ -586,13 +558,14 @@ swp-add-button {
   font-size: var(--font-size-md);
   cursor: pointer;
   transition: all var(--transition-fast);
-  
+
   &:hover {
     border-color: var(--color-teal);
     color: var(--color-teal);
     background: var(--bg-teal-subtle);
   }
 }
+
 /* ===========================================
    USER INFO PATTERN (shared across auth, waitlist, employees, drawers)
    =========================================== */
@@ -657,47 +630,44 @@ swp-form-label {
 
 swp-form-input {
   position: relative;
-}
 
-swp-form-input input,
-swp-form-input select,
-swp-form-input textarea {
-  width: 100%;
-  padding: var(--spacing-3) var(--spacing-4);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family);
-  color: var(--color-text);
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius);
-  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-}
+  input,
+  select,
+  textarea {
+    width: 100%;
+    padding: var(--spacing-3) var(--spacing-4);
+    font-size: var(--font-size-base);
+    font-family: var(--font-family);
+    color: var(--color-text);
+    background: var(--color-background);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius);
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
 
-swp-form-input input::placeholder,
-swp-form-input textarea::placeholder {
-  color: var(--color-text-muted);
-}
+    &::placeholder {
+      color: var(--color-text-muted);
+    }
 
-swp-form-input input:focus,
-swp-form-input select:focus,
-swp-form-input textarea:focus {
-  outline: none;
-  border-color: var(--color-teal);
-  box-shadow: var(--shadow-focus-ring);
-}
+    &:focus {
+      outline: none;
+      border-color: var(--color-teal);
+      box-shadow: var(--shadow-focus-ring);
+    }
+  }
 
-swp-form-input select {
-  cursor: pointer;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  padding-right: 40px;
-}
+  select {
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    padding-right: 40px;
+  }
 
-swp-form-input textarea {
-  resize: vertical;
-  min-height: 80px;
+  textarea {
+    resize: vertical;
+    min-height: 80px;
+  }
 }
 
 /* ===========================================
@@ -710,13 +680,13 @@ swp-empty-state {
   justify-content: center;
   padding: var(--spacing-10) var(--spacing-6);
   text-align: center;
-  
+
   & i {
     font-size: 48px;
     color: var(--color-border);
     margin-bottom: var(--spacing-4);
   }
-  
+
   & span {
     font-size: var(--font-size-base);
     color: var(--color-text-secondary);
diff --git a/PlanTempus.Application/wwwroot/css/design-tokens.css b/PlanTempus.Application/wwwroot/css/design-tokens.css
index 02c08a3..50eb16b 100644
--- a/PlanTempus.Application/wwwroot/css/design-tokens.css
+++ b/PlanTempus.Application/wwwroot/css/design-tokens.css
@@ -91,6 +91,9 @@
   --bg-purple-medium: color-mix(in srgb, var(--color-purple) var(--overlay-medium), transparent);
   --bg-purple-strong: color-mix(in srgb, var(--color-purple) var(--overlay-strong), transparent);
   --border-purple: color-mix(in srgb, var(--color-purple) var(--overlay-border), transparent);
+
+  /* -------- Gradient Tokens -------- */
+  --gradient-enterprise: linear-gradient(135deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-purple) 5%, var(--color-surface)) 100%);
 }
 
 /* ===========================================
diff --git a/PlanTempus.Application/wwwroot/css/employees.css b/PlanTempus.Application/wwwroot/css/employees.css
index c086f48..40dfe3b 100644
--- a/PlanTempus.Application/wwwroot/css/employees.css
+++ b/PlanTempus.Application/wwwroot/css/employees.css
@@ -32,11 +32,11 @@ swp-users-count {
   gap: var(--spacing-4);
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
-}
 
-swp-users-count strong {
-  color: var(--color-text);
-  font-weight: var(--font-weight-semibold);
+  strong {
+    color: var(--color-text);
+    font-weight: var(--font-weight-semibold);
+  }
 }
 
 swp-users-progress {
@@ -45,14 +45,14 @@ swp-users-progress {
   background: var(--color-border);
   border-radius: var(--radius-sm);
   overflow: hidden;
-}
 
-swp-users-progress-bar {
-  display: block;
-  height: 100%;
-  background: var(--color-teal);
-  border-radius: var(--radius-sm);
-  transition: width var(--transition-normal);
+  swp-users-progress-bar {
+    display: block;
+    height: 100%;
+    background: var(--color-teal);
+    border-radius: var(--radius-sm);
+    transition: width var(--transition-normal);
+  }
 }
 
 /* ===========================================
@@ -69,20 +69,38 @@ swp-employee-table-card {
 swp-employee-table {
   display: grid;
   grid-template-columns: minmax(220px, 1fr) 120px 140px 120px 40px;
-}
 
-swp-employee-table-header {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
-  background: var(--color-background-alt);
-  padding: 0 var(--spacing-10);
-}
+  swp-employee-table-header {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    background: var(--color-background-alt);
+    padding: 0 var(--spacing-10);
 
-swp-employee-table-body {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
+    swp-employee-cell {
+      font-size: var(--font-size-xs);
+      font-weight: var(--font-weight-semibold);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      padding-top: var(--spacing-5);
+      padding-bottom: var(--spacing-5);
+    }
+  }
+
+  swp-employee-table-body {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+
+    swp-employee-row {
+      cursor: pointer;
+
+      &:hover {
+        background: var(--color-background-hover);
+      }
+    }
+  }
 }
 
 swp-employee-row {
@@ -93,42 +111,22 @@ swp-employee-row {
   padding: 0 var(--spacing-10);
   border-bottom: 1px solid var(--color-border);
   transition: background var(--transition-fast);
-}
 
-swp-employee-table-body swp-employee-row {
-  cursor: pointer;
-}
-
-swp-employee-table-body swp-employee-row:hover {
-  background: var(--color-background-hover);
-}
-
-swp-employee-row:last-child {
-  border-bottom: none;
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 swp-employee-cell {
   padding: var(--spacing-5) 0;
   font-size: var(--font-size-base);
   color: var(--color-text);
-}
 
-/* Chevron cell (last column) */
-swp-employee-cell:last-child {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Header cells */
-swp-employee-table-header swp-employee-cell {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-text-secondary);
-  padding-top: var(--spacing-5);
-  padding-bottom: var(--spacing-5);
+  &:last-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 /* ===========================================
@@ -152,18 +150,10 @@ swp-user-avatar {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   flex-shrink: 0;
-}
 
-swp-user-avatar.purple {
-  background: var(--color-purple);
-}
-
-swp-user-avatar.blue {
-  background: var(--color-blue);
-}
-
-swp-user-avatar.amber {
-  background: var(--color-amber);
+  &.purple { background: var(--color-purple); }
+  &.blue { background: var(--color-blue); }
+  &.amber { background: var(--color-amber); }
 }
 
 swp-user-details {
@@ -199,8 +189,6 @@ swp-table-actions {
   justify-content: flex-end;
 }
 
-/* Icon button styles in components.css */
-
 /* ===========================================
    PERMISSIONS MATRIX
    =========================================== */
@@ -210,68 +198,64 @@ swp-permissions-matrix {
   border-radius: var(--radius-lg);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   overflow: hidden;
-}
 
-swp-permissions-matrix table {
-  width: 100%;
-  border-collapse: collapse;
-}
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
 
-swp-permissions-matrix th,
-swp-permissions-matrix td {
-  padding: var(--spacing-5) var(--spacing-6);
-  text-align: center;
-  border-bottom: 1px solid var(--color-border);
-  font-size: var(--font-size-base);
-}
+  th, td {
+    padding: var(--spacing-5) var(--spacing-6);
+    text-align: center;
+    border-bottom: 1px solid var(--color-border);
+    font-size: var(--font-size-base);
 
-swp-permissions-matrix th:first-child,
-swp-permissions-matrix td:first-child {
-  text-align: left;
-  font-weight: var(--font-weight-medium);
-}
+    &:first-child {
+      text-align: left;
+      font-weight: var(--font-weight-medium);
+    }
+  }
 
-swp-permissions-matrix thead th {
-  background: var(--color-background-alt);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-text-secondary);
-}
+  thead th {
+    background: var(--color-background-alt);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--color-text-secondary);
+  }
 
-swp-permissions-matrix tbody tr:last-child td {
-  border-bottom: none;
-}
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
 
-swp-permissions-matrix .permission-name {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  font-size: var(--font-size-base);
-  color: var(--color-text);
-}
+  .permission-name {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-3);
+    font-size: var(--font-size-base);
+    color: var(--color-text);
 
-swp-permissions-matrix .permission-name i {
-  font-size: 18px;
-  color: var(--color-text-secondary);
-}
+    i {
+      font-size: 18px;
+      color: var(--color-text-secondary);
+    }
+  }
 
-swp-permissions-matrix .check {
-  color: var(--color-teal);
-  font-size: 20px;
-}
+  .check {
+    color: var(--color-teal);
+    font-size: 20px;
+  }
 
-swp-permissions-matrix .no-access {
-  color: var(--color-border);
-  font-size: 16px;
+  .no-access {
+    color: var(--color-border);
+    font-size: 16px;
+  }
 }
 
 /* ===========================================
-   EMPLOYEE DETAIL VIEW (replaces page content)
+   EMPLOYEE DETAIL VIEW
    =========================================== */
-
-/* Large avatar for detail view */
 swp-employee-avatar-large {
   width: 80px;
   height: 80px;
@@ -284,13 +268,12 @@ swp-employee-avatar-large {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-semibold);
   flex-shrink: 0;
+
+  &.purple { background: var(--color-purple); }
+  &.blue { background: var(--color-blue); }
+  &.amber { background: var(--color-amber); }
 }
 
-swp-employee-avatar-large.purple { background: var(--color-purple); }
-swp-employee-avatar-large.blue { background: var(--color-blue); }
-swp-employee-avatar-large.amber { background: var(--color-amber); }
-
-/* Detail header content (inside swp-header-content) */
 swp-employee-detail-header {
   display: flex;
   gap: var(--spacing-12);
@@ -304,7 +287,6 @@ swp-employee-info {
   min-width: 0;
 }
 
-/* Name row with name + tags + status */
 swp-employee-name-row {
   display: flex;
   align-items: center;
@@ -317,7 +299,9 @@ swp-employee-name {
   color: var(--color-text);
 }
 
-/* Tags row */
+/* ===========================================
+   TAGS
+   =========================================== */
 swp-tags-row {
   display: flex;
   align-items: center;
@@ -337,29 +321,31 @@ swp-tag {
   border-radius: var(--radius-sm);
   background: var(--color-background);
   color: var(--color-text-secondary);
+
+  &.master {
+    background: var(--bg-purple-strong);
+    color: var(--color-purple);
+  }
+
+  &.senior {
+    background: var(--bg-blue-strong);
+    color: var(--color-blue);
+  }
+
+  &.junior {
+    background: var(--bg-amber-strong);
+    color: #b45309;
+  }
+
+  &.cert {
+    background: var(--bg-teal-strong);
+    color: var(--color-teal);
+  }
 }
 
-swp-tag.master {
-  background: var(--bg-purple-strong);
-  color: var(--color-purple);
-}
-
-swp-tag.senior {
-  background: var(--bg-blue-strong);
-  color: var(--color-blue);
-}
-
-swp-tag.junior {
-  background: var(--bg-amber-strong);
-  color: #b45309;
-}
-
-swp-tag.cert {
-  background: var(--bg-teal-strong);
-  color: var(--color-teal);
-}
-
-/* Employee status indicator */
+/* ===========================================
+   EMPLOYEE STATUS INDICATOR
+   =========================================== */
 swp-employee-status {
   display: inline-flex;
   align-items: center;
@@ -371,25 +357,27 @@ swp-employee-status {
   cursor: pointer;
   transition: all var(--transition-fast);
   margin-left: auto;
+
+  &[data-active="true"] {
+    background: var(--bg-green-strong);
+    color: var(--color-green);
+    border: 1px solid var(--bg-green-border);
+  }
+
+  &[data-active="false"] {
+    background: var(--bg-red-medium);
+    color: var(--color-red);
+    border: 1px solid var(--bg-red-border);
+  }
+
+  .icon {
+    font-size: var(--font-size-base);
+  }
 }
 
-swp-employee-status[data-active="true"] {
-  background: var(--bg-green-strong);
-  color: var(--color-green);
-  border: 1px solid var(--bg-green-border);
-}
-
-swp-employee-status[data-active="false"] {
-  background: var(--bg-red-medium);
-  color: var(--color-red);
-  border: 1px solid var(--bg-red-border);
-}
-
-swp-employee-status .icon {
-  font-size: var(--font-size-base);
-}
-
-/* Inline fact boxes (horizontal baseline alignment) */
+/* ===========================================
+   FACT BOXES (Inline)
+   =========================================== */
 swp-fact-boxes-inline {
   display: flex;
   gap: var(--spacing-12);
@@ -401,21 +389,23 @@ swp-fact-inline {
   display: flex;
   align-items: baseline;
   gap: var(--spacing-2);
+
+  swp-fact-inline-value {
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+    font-family: var(--font-mono);
+    color: var(--color-text);
+  }
+
+  swp-fact-inline-label {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+  }
 }
 
-swp-fact-inline-value {
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  font-family: var(--font-mono);
-  color: var(--color-text);
-}
-
-swp-fact-inline-label {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-}
-
-/* Edit rows for contenteditable (Grid + Subgrid) */
+/* ===========================================
+   EDIT SECTION (Grid + Subgrid)
+   =========================================== */
 swp-edit-section {
   display: grid;
   grid-template-columns: 140px 1fr;
@@ -427,6 +417,34 @@ swp-edit-row {
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
   align-items: center;
+
+  input {
+    font-size: var(--font-size-base);
+    padding: var(--spacing-4) var(--spacing-5);
+    border-radius: var(--radius-sm);
+    background: var(--color-background-alt);
+    border: 1px solid var(--color-border);
+    color: var(--color-text);
+    transition: all var(--transition-fast);
+    cursor: text;
+
+    &:hover {
+      background: var(--color-background);
+    }
+
+    &:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    &[data-type="number"] {
+      font-family: var(--font-mono);
+      text-align: right;
+      width: 150px;
+      justify-self: end;
+    }
+  }
 }
 
 swp-edit-label {
@@ -443,19 +461,43 @@ swp-edit-value {
   border: 1px solid transparent;
   transition: all var(--transition-fast);
   cursor: text;
+
+  &:hover {
+    background: var(--color-background);
+  }
+
+  &:focus {
+    outline: none;
+    background: var(--color-surface);
+    border-color: var(--color-teal);
+  }
+
+  &.mono {
+    font-family: var(--font-mono);
+    width: 150px;
+    text-align: right;
+    justify-self: end;
+  }
 }
 
-swp-edit-value:hover {
-  background: var(--color-background);
-}
+swp-edit-select {
+  display: block;
 
-swp-edit-value:focus {
-  outline: none;
-  background: var(--color-surface);
-  border-color: var(--color-teal);
-}
+  select {
+    width: 100%;
+    padding: var(--spacing-2) var(--spacing-4);
+    font-size: var(--font-size-base);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-surface);
+    cursor: pointer;
 
-/* swp-section-label is now in components.css */
+    &:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+  }
+}
 
 /* ===========================================
    VIEW CONTAINERS (List/Detail swap)
@@ -469,7 +511,6 @@ swp-employee-detail-view {
   min-height: calc(100vh - 60px);
 }
 
-/* Back link */
 swp-back-link {
   display: inline-flex;
   align-items: center;
@@ -478,34 +519,28 @@ swp-back-link {
   font-size: var(--font-size-sm);
   cursor: pointer;
   transition: color var(--transition-fast);
+
+  &:hover {
+    color: var(--color-teal);
+  }
+
+  i {
+    font-size: 16px;
+  }
 }
 
-swp-back-link:hover {
-  color: var(--color-teal);
-}
-
-swp-back-link i {
-  font-size: 16px;
-}
-
-/* Detail grid for cards (2-column layout) */
+/* ===========================================
+   DETAIL GRID (2-column layout)
+   =========================================== */
 swp-detail-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--spacing-8);
-}
 
-swp-detail-grid > div {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
-
-/* swp-card base styles in components.css */
-
-@media (max-width: 900px) {
-  swp-detail-grid {
-    grid-template-columns: 1fr;
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
   }
 }
 
@@ -523,29 +558,29 @@ swp-schedule-row {
   align-items: center;
   padding: var(--spacing-4) 0;
   border-bottom: 1px solid var(--color-border);
-}
 
-swp-schedule-row:last-child {
-  border-bottom: none;
-}
+  &:last-child {
+    border-bottom: none;
+  }
 
-swp-schedule-row.off {
-  color: var(--color-text-secondary);
-}
+  &.off {
+    color: var(--color-text-secondary);
 
-swp-schedule-day {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-}
+    swp-schedule-time {
+      color: var(--color-text-secondary);
+    }
+  }
 
-swp-schedule-time {
-  font-size: var(--font-size-base);
-  font-family: var(--font-mono);
-  color: var(--color-teal);
-}
+  swp-schedule-day {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+  }
 
-swp-schedule-row.off swp-schedule-time {
-  color: var(--color-text-secondary);
+  swp-schedule-time {
+    font-size: var(--font-size-base);
+    font-family: var(--font-mono);
+    color: var(--color-teal);
+  }
 }
 
 /* ===========================================
@@ -563,32 +598,31 @@ swp-service-item {
   align-items: center;
   padding: var(--spacing-4) 0;
   border-bottom: 1px solid var(--color-border);
-}
 
-swp-service-item:last-child {
-  border-bottom: none;
-}
+  &:last-child {
+    border-bottom: none;
+  }
 
-swp-service-name {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-}
+  swp-service-name {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+  }
 
-swp-service-duration {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-}
+  swp-service-duration {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+  }
 
-swp-service-price {
-  font-size: var(--font-size-base);
-  font-family: var(--font-mono);
-  color: var(--color-teal);
-  font-weight: var(--font-weight-medium);
+  swp-service-price {
+    font-size: var(--font-size-base);
+    font-family: var(--font-mono);
+    color: var(--color-teal);
+    font-weight: var(--font-weight-medium);
+  }
 }
 
 /* ===========================================
    DOCUMENT LIST (HR tab)
-   Also used for certs, courses, and similar lists
    =========================================== */
 swp-document-list {
   display: flex;
@@ -604,49 +638,47 @@ swp-document-item {
   background: var(--color-background-alt);
   border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
+
+  i, swp-document-icon {
+    font-size: 20px;
+    color: var(--color-text-secondary);
+    flex-shrink: 0;
+  }
+
+  i.ph-file-pdf {
+    color: var(--color-red);
+  }
+
+  swp-document-info {
+    flex: 1;
+    min-width: 0;
+
+    swp-document-name {
+      display: block;
+      font-size: var(--font-size-base);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-text);
+    }
+
+    swp-document-meta {
+      display: block;
+      font-size: var(--font-size-sm);
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+  }
+
+  swp-document-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-2);
+    flex-shrink: 0;
+  }
 }
 
-/* Icon (optional) */
-swp-document-item i,
-swp-document-icon {
-  font-size: 20px;
-  color: var(--color-text-secondary);
-  flex-shrink: 0;
-}
-
-swp-document-item i.ph-file-pdf {
-  color: var(--color-red);
-}
-
-/* Info wrapper (name + meta) */
-swp-document-info {
-  flex: 1;
-  min-width: 0;
-}
-
-swp-document-name {
-  display: block;
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text);
-}
-
-swp-document-meta {
-  display: block;
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  margin-top: 2px;
-}
-
-/* Actions (buttons/badges at end) */
-swp-document-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  flex-shrink: 0;
-}
-
-/* Notes area */
+/* ===========================================
+   NOTES AREA
+   =========================================== */
 swp-notes-area {
   display: block;
   min-height: 100px;
@@ -656,71 +688,11 @@ swp-notes-area {
   font-size: var(--font-size-base);
   color: var(--color-text-secondary);
   line-height: 1.6;
-}
 
-swp-notes-area:focus {
-  outline: none;
-  color: var(--color-text);
-}
-
-/* ===========================================
-   EDIT SELECT (dropdown in edit rows)
-   =========================================== */
-swp-edit-select {
-  display: block;
-}
-
-swp-edit-select select {
-  width: 100%;
-  padding: var(--spacing-2) var(--spacing-4);
-  font-size: var(--font-size-base);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface);
-  cursor: pointer;
-}
-
-swp-edit-select select:focus {
-  outline: none;
-  border-color: var(--color-teal);
-}
-
-/* Mono variant for edit-value */
-swp-edit-value.mono {
-  font-family: var(--font-mono);
-  width: 150px;
-  text-align: right;
-  justify-self: end;
-}
-
-/* Input in edit-row */
-swp-edit-row input {
-  font-size: var(--font-size-base);
-  padding: var(--spacing-4) var(--spacing-5);
-  border-radius: var(--radius-sm);
-  background: var(--color-background-alt);
-  border: 1px solid var(--color-border);
-  color: var(--color-text);
-  transition: all var(--transition-fast);
-  cursor: text;
-}
-
-swp-edit-row input:hover {
-  background: var(--color-background);
-}
-
-swp-edit-row input:focus {
-  outline: none;
-  background: var(--color-surface);
-  border-color: var(--color-teal);
-}
-
-/* Number input variant */
-swp-edit-row input[data-type="number"] {
-  font-family: var(--font-mono);
-  text-align: right;
-  width: 150px;
-  justify-self: end;
+  &:focus {
+    outline: none;
+    color: var(--color-text);
+  }
 }
 
 /* ===========================================
@@ -729,99 +701,97 @@ swp-edit-row input[data-type="number"] {
 swp-salary-table {
   display: grid;
   grid-template-columns: 1fr 120px 60px;
-}
 
-swp-salary-table-header,
-swp-salary-table-body {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
-}
+  swp-salary-table-header {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    border-bottom: 1px solid var(--color-border);
 
-swp-salary-table-header {
-  border-bottom: 1px solid var(--color-border);
-}
+    swp-salary-table-cell {
+      font-size: var(--font-size-xs);
+      font-weight: var(--font-weight-semibold);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+  }
 
-swp-salary-table-row {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-}
+  swp-salary-table-body {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+  }
 
-swp-salary-table-row:last-child {
-  border-bottom: none;
-}
+  swp-salary-table-row {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: center;
+    border-bottom: 1px solid var(--color-border);
+    cursor: pointer;
+    transition: background var(--transition-fast);
 
-swp-salary-table-cell {
-  padding: var(--spacing-4) var(--spacing-2);
-  font-size: var(--font-size-base);
-  color: var(--color-text);
-}
+    &:last-child {
+      border-bottom: none;
+    }
 
-swp-salary-table-cell:first-child {
-  padding-left: 0;
-}
+    &:hover {
+      background: var(--color-background-hover);
 
-swp-salary-table-cell:last-child {
-  padding-right: 0;
-  text-align: right;
-}
+      swp-salary-table-cell i {
+        color: var(--color-teal);
+      }
+    }
+  }
 
-swp-salary-table-header swp-salary-table-cell {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-text-secondary);
-}
+  swp-salary-table-cell {
+    padding: var(--spacing-4) var(--spacing-2);
+    font-size: var(--font-size-base);
+    color: var(--color-text);
 
-swp-salary-table-cell.mono {
-  font-family: var(--font-mono);
-}
+    &:first-child {
+      padding-left: 0;
+    }
 
-/* Chevron for row actions */
-swp-salary-table-cell i {
-  color: var(--color-text-muted);
-  font-size: 16px;
-}
+    &:last-child {
+      padding-right: 0;
+      text-align: right;
+    }
 
-swp-salary-table-row {
-  cursor: pointer;
-  transition: background var(--transition-fast);
-}
+    &.mono {
+      font-family: var(--font-mono);
+    }
 
-swp-salary-table-row:hover {
-  background: var(--color-background-hover);
-}
-
-swp-salary-table-row:hover swp-salary-table-cell i {
-  color: var(--color-teal);
+    i {
+      color: var(--color-text-muted);
+      font-size: 16px;
+    }
+  }
 }
 
 /* ===========================================
-   SUBSECTION TITLE (for grouped lists like courses)
+   SUBSECTION TITLE
    =========================================== */
 swp-subsection {
   display: block;
   margin-bottom: var(--spacing-6);
-}
 
-swp-subsection:last-of-type {
-  margin-bottom: 0;
-}
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 
-swp-subsection-title {
-  display: block;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-secondary);
-  margin-bottom: var(--spacing-3);
+  swp-subsection-title {
+    display: block;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-secondary);
+    margin-bottom: var(--spacing-3);
+  }
 }
 
 /* ===========================================
-   SIMPLE LIST (dates + badge, like vacation)
+   SIMPLE LIST
    =========================================== */
 swp-simple-list {
   display: flex;
@@ -838,85 +808,119 @@ swp-simple-item {
   background: var(--color-background-alt);
   border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
-}
 
-swp-simple-item-text {
-  flex: 1;
-  font-size: var(--font-size-base);
-  font-family: var(--font-mono);
-  color: var(--color-text);
+  swp-simple-item-text {
+    flex: 1;
+    font-size: var(--font-size-base);
+    font-family: var(--font-mono);
+    color: var(--color-text);
+  }
 }
 
-/* swp-add-button styles in components.css */
-
 /* ===========================================
-   RATES DRAWER CONTENT (overrides for swp-data-*)
+   RATES DRAWER CONTENT
    =========================================== */
-.rates-content swp-data-table {
-  display: grid;
-  grid-template-columns: 28px 1fr 100px;
+.rates-content {
+  swp-data-table {
+    display: grid;
+    grid-template-columns: 28px 1fr 100px;
+  }
+
+  swp-data-row {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 0;
+    border-bottom: 1px solid var(--color-border);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      accent-color: var(--color-teal);
+    }
+  }
+
+  swp-data-label {
+    font-size: var(--font-size-base);
+
+    &.disabled {
+      opacity: 0.4;
+    }
+  }
+
+  swp-data-input {
+    display: flex;
+    align-items: center;
+    justify-self: end;
+    gap: 4px;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+
+    input {
+      width: 100px;
+      padding: 6px 8px;
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-sm);
+      font-size: var(--font-size-sm);
+      font-family: var(--font-mono);
+      text-align: right;
+    }
+
+    &.disabled input {
+      opacity: 0.4;
+      background: var(--color-background);
+    }
+  }
+
+  swp-section-label {
+    margin-bottom: 12px;
+  }
+
+  swp-data-section {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid var(--color-border);
+  }
 }
 
-.rates-content swp-data-row {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 0;
-  border-bottom: 1px solid var(--color-border);
-}
+/* ===========================================
+   STATS BOOKINGS TABLE
+   =========================================== */
+.stats-bookings {
+  swp-data-table {
+    grid-template-columns: 90px 60px minmax(120px, 1fr) minmax(150px, 1fr) 80px 100px 100px;
+  }
 
-.rates-content swp-data-row:last-child {
-  border-bottom: none;
-}
+  swp-data-table-row swp-data-table-cell {
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(5) {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
 
-.rates-content swp-data-row input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  accent-color: var(--color-teal);
-}
+    &:nth-child(3) {
+      font-weight: var(--font-weight-medium);
+    }
 
-.rates-content swp-data-label {
-  font-size: var(--font-size-base);
-}
+    &:nth-child(6) {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      font-weight: var(--font-weight-semibold);
+      text-align: right;
+    }
+  }
 
-.rates-content swp-data-label.disabled {
-  opacity: 0.4;
-}
-
-.rates-content swp-data-input {
-  display: flex;
-  align-items: center;
-  justify-self: end;
-  gap: 4px;
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-}
-
-.rates-content swp-data-input input {
-  width: 100px;
-  padding: 6px 8px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  font-size: var(--font-size-sm);
-  font-family: var(--font-mono);
-  text-align: right;
-}
-
-.rates-content swp-data-input.disabled input {
-  opacity: 0.4;
-  background: var(--color-background);
-}
-
-.rates-content swp-section-label {
-  margin-bottom: 12px;
-}
-
-.rates-content swp-data-section {
-  margin-top: 24px;
-  padding-top: 16px;
-  border-top: 1px solid var(--color-border);
+  swp-data-table-header swp-data-table-cell:nth-child(6) {
+    text-align: right;
+  }
 }
 
 /* ===========================================
@@ -928,6 +932,12 @@ swp-simple-item-text {
   }
 }
 
+@media (max-width: 900px) {
+  swp-detail-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 @media (max-width: 768px) {
   swp-employee-table {
     grid-template-columns: minmax(160px, 1fr) 90px 110px 90px 40px;
@@ -946,43 +956,10 @@ swp-simple-item-text {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-4);
-  }
 
-  swp-users-header swp-btn {
-    width: 100%;
-    justify-content: center;
+    swp-btn {
+      width: 100%;
+      justify-content: center;
+    }
   }
 }
-
-/* ===========================================
-   STATS BOOKINGS TABLE (columns for swp-data-table)
-   =========================================== */
-.stats-bookings swp-data-table {
-  grid-template-columns: 90px 60px minmax(120px, 1fr) minmax(150px, 1fr) 80px 100px 100px;
-}
-
-/* Dato, Tid, Varighed: mono + muted */
-.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(1),
-.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(2),
-.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(5) {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--color-text-secondary);
-}
-
-/* Kunde: medium */
-.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(3) {
-  font-weight: var(--font-weight-medium);
-}
-
-/* Beløb: mono + bold + right */
-.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(6),
-.stats-bookings swp-data-table-header swp-data-table-cell:nth-child(6) {
-  text-align: right;
-}
-
-.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(6) {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: var(--font-weight-semibold);
-}