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

PlanTempus.Application/wwwroot/css/account.css

@@ -29,12 +29,12 @@ 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 {
+  & i {
     font-size: 22px;
     color: var(--color-teal);
   }
+}
 
 /* ===========================================
    PLAN GRID
@@ -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 {
     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 {
     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,12 +100,12 @@ swp-payment-icon {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-}
 
-swp-payment-icon i {
+  & i {
     font-size: 24px;
     color: var(--color-blue);
   }
+}
 
 swp-payment-info {
   flex: 1;
@@ -133,11 +133,11 @@ swp-payment-detail {
   align-items: center;
   padding: var(--spacing-4) 0;
   border-bottom: 1px solid var(--color-border);
-}
 
-swp-payment-detail:last-of-type {
+  &:last-of-type {
     border-bottom: none;
   }
+}
 
 swp-payment-label {
   font-size: var(--font-size-sm);
@@ -148,11 +148,11 @@ swp-payment-value {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   color: var(--color-text);
-}
 
-swp-payment-value.highlight {
+  &.highlight {
     color: var(--color-teal);
   }
+}
 
 /* ===========================================
    INVOICES CARD
@@ -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 {
+  &:last-child {
-  background: var(--color-background-hover);
-}
-
-swp-invoice-row: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 {
+  &:first-child {
     padding-left: var(--card-padding);
   }
 
-swp-invoice-cell:last-child {
+  &:last-child {
     padding-right: var(--card-padding);
   }
 
-/* Header cells */
+  &.mono {
-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);
-}
-
-/* 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;
@@ -264,22 +277,22 @@ swp-invoice-status {
   & i {
     font-size: 14px;
   }
-}
 
-swp-invoice-status.paid {
+  &.paid {
     background: var(--bg-green-strong);
     color: var(--color-green);
   }
 
-swp-invoice-status.pending {
+  &.pending {
     background: var(--bg-amber-strong);
     color: var(--color-amber);
   }
 
-swp-invoice-status.overdue {
+  &.overdue {
     background: var(--bg-red-strong);
     color: var(--color-red);
   }
+}
 
 /* ===========================================
    DOWNLOAD BUTTON
@@ -297,39 +310,14 @@ swp-download-btn {
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all var(--transition-fast);
-}
 
-swp-download-btn:hover {
+  & i {
-  background: var(--bg-teal-medium);
-}
-
-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);
-  }
-}

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,10 +37,9 @@ swp-auth-branding {
   color: white;
   position: relative;
   overflow: hidden;
-}
 
   /* Decorative background pattern */
-swp-auth-branding::before {
+  &::before {
     content: '';
     position: absolute;
     top: -50%;
@@ -42,7 +50,7 @@ swp-auth-branding::before {
     pointer-events: none;
   }
 
-swp-auth-branding::after {
+  &::after {
     content: '';
     position: absolute;
     bottom: -30%;
@@ -53,6 +61,21 @@ swp-auth-branding::after {
     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 {
   display: flex;
   align-items: center;
@@ -60,18 +83,23 @@ swp-auth-logo {
   margin-bottom: var(--spacing-16);
   position: relative;
   z-index: 1;
-}
 
-swp-auth-logo i {
+  & i {
     font-size: 32px;
   }
 
-swp-auth-logo span {
+  & 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 {
   display: block;
   font-size: var(--font-size-3xl);
@@ -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 {
+  swp-auth-logo {
     color: var(--color-text);
     margin-bottom: var(--spacing-12);
+
+    & i {
+      color: var(--color-teal);
     }
 
-swp-auth-plan-panel swp-auth-logo i {
+    @media (max-width: 768px) {
-  color: var(--color-teal);
+      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,13 +222,17 @@ swp-plan-price-amount {
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
   line-height: 1;
-}
 
-swp-plan-price-amount.contact {
+  &.contact {
     font-size: var(--font-size-xl);
     color: var(--color-purple);
   }
 
+  @media (max-width: 768px) {
+    font-size: 28px;
+  }
+}
+
 swp-plan-price-period {
   font-size: var(--font-size-base);
   color: var(--color-text-secondary);
@@ -185,13 +250,13 @@ swp-plan-feature {
   gap: var(--spacing-3);
   font-size: var(--font-size-sm);
   color: var(--color-text);
-}
 
-swp-plan-feature i {
+  & i {
     font-size: 18px;
     color: var(--color-green);
     flex-shrink: 0;
   }
+}
 
 /* ===========================================
    CHANGE PLAN LINK
@@ -199,9 +264,8 @@ swp-plan-feature i {
 swp-change-plan-link {
   display: block;
   margin-top: var(--spacing-6);
-}
 
-swp-change-plan-link a {
+  & a {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-2);
@@ -209,16 +273,21 @@ swp-change-plan-link a {
     color: var(--color-text-secondary);
     text-decoration: none;
     transition: color var(--transition-fast);
-}
 
-swp-change-plan-link a:hover {
+    &:hover {
       color: var(--color-teal);
     }
+  }
 
-swp-change-plan-link i {
+  & i {
     font-size: 16px;
   }
 
+  @media (max-width: 480px) {
+    text-align: center;
+  }
+}
+
 /* ===========================================
    FEATURE LIST
    =========================================== */
@@ -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,13 +315,17 @@ swp-auth-feature {
   align-items: center;
   gap: var(--spacing-3);
   font-size: var(--font-size-base);
-}
 
-swp-auth-feature i {
+  & i {
     font-size: 20px;
     opacity: 0.9;
   }
 
+  @media (max-width: 768px) {
+    font-size: var(--font-size-sm);
+  }
+}
+
 /* ===========================================
    FORM PANEL (Right Side)
    =========================================== */
@@ -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,11 +405,11 @@ swp-user-verified {
   justify-content: center;
   color: var(--color-green);
   flex-shrink: 0;
-}
 
-swp-user-verified i {
+  & i {
     font-size: 22px;
   }
+}
 
 /* ===========================================
    FORM ELEMENTS
@@ -325,21 +421,16 @@ swp-auth-form {
   gap: var(--spacing-5);
 }
 
-swp-form-input select option {
+swp-form-input {
+  select option {
     padding: var(--spacing-2);
   }
 
-swp-form-label .optional {
+  &.has-icon input {
-  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 {
+  .input-icon {
     position: absolute;
     right: var(--spacing-3);
     top: 50%;
@@ -349,16 +440,24 @@ swp-form-input .input-icon {
     padding: var(--spacing-2);
     border-radius: var(--radius-sm);
     transition: color var(--transition-fast);
-}
 
-swp-form-input .input-icon:hover {
+    &:hover {
       color: var(--color-text-secondary);
     }
 
-swp-form-input .input-icon i {
+    & i {
       font-size: 20px;
       display: block;
     }
+  }
+}
+
+swp-form-label {
+  .optional {
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-muted);
+  }
+}
 
 /* ===========================================
    PASSWORD STRENGTH INDICATOR
@@ -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 {
+  &.weak {
     width: 25%;
     background: var(--color-red);
   }
 
-swp-strength-fill.fair {
+  &.fair {
     width: 50%;
     background: var(--color-amber);
   }
 
-swp-strength-fill.good {
+  &.good {
     width: 75%;
     background: var(--color-blue);
   }
 
-swp-strength-fill.strong {
+  &.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); }
+  &.weak { color: var(--color-red); }
-swp-strength-text.fair { color: var(--color-amber); }
+  &.fair { color: var(--color-amber); }
-swp-strength-text.good { color: var(--color-blue); }
+  &.good { color: var(--color-blue); }
-swp-strength-text.strong { color: var(--color-green); }
+  &.strong { color: var(--color-green); }
+}
 
 /* ===========================================
    CHECKBOX
@@ -424,9 +523,8 @@ swp-form-checkbox {
   align-items: flex-start;
   gap: var(--spacing-3);
   cursor: pointer;
-}
 
-swp-form-checkbox input[type="checkbox"] {
+  input[type="checkbox"] {
     width: 18px;
     height: 18px;
     margin: 0;
@@ -436,20 +534,21 @@ swp-form-checkbox input[type="checkbox"] {
     margin-top: 2px;
   }
 
-swp-form-checkbox span {
+  & span {
     font-size: var(--font-size-sm);
     color: var(--color-text-secondary);
     line-height: var(--line-height-normal);
   }
 
-swp-form-checkbox a {
+  & a {
     color: var(--color-teal);
     text-decoration: none;
-}
 
-swp-form-checkbox a:hover {
+    &:hover {
       text-decoration: underline;
     }
+  }
+}
 
 /* Button base styles in components.css */
 
@@ -465,17 +564,17 @@ swp-auth-footer {
 swp-auth-footer-text {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
-}
 
-swp-auth-footer-text a {
+  & a {
     color: var(--color-teal);
     font-weight: var(--font-weight-medium);
     text-decoration: none;
-}
 
-swp-auth-footer-text a:hover {
+    &:hover {
       text-decoration: underline;
     }
+  }
+}
 
 /* ===========================================
    DIVIDER
@@ -485,20 +584,20 @@ swp-auth-divider {
   align-items: center;
   gap: var(--spacing-4);
   margin: var(--spacing-6) 0;
-}
 
-swp-auth-divider::before,
+  &::before,
-swp-auth-divider::after {
+  &::after {
     content: '';
     flex: 1;
     height: 1px;
     background: var(--color-border);
   }
 
-swp-auth-divider span {
+  & span {
     font-size: var(--font-size-sm);
     color: var(--color-text-muted);
   }
+}
 
 /* ===========================================
    SOCIAL LOGIN
@@ -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;
@@ -560,16 +658,16 @@ swp-pricing-header {
   align-items: center;
   text-align: center;
   margin-bottom: var(--spacing-16);
-}
 
-swp-pricing-header swp-auth-logo {
+  swp-auth-logo {
     margin-bottom: var(--spacing-10);
     color: var(--color-text);
-}
 
-swp-pricing-header swp-auth-logo i {
+    & i {
       color: var(--color-teal);
     }
+  }
+}
 
 swp-pricing-title {
   display: block;
@@ -592,38 +690,43 @@ swp-pricing-grid {
   max-width: 1100px;
   width: 100%;
   align-items: stretch;
-}
 
-/* Plan cards in pricing grid */
+  swp-plan-card {
-swp-pricing-grid swp-plan-card {
     padding: var(--spacing-8);
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
+
+    &.popular {
+      border-color: var(--color-teal);
+      box-shadow: var(--shadow-focus-ring);
+      transform: scale(1.02);
+
+      @media (max-width: 1024px) {
+        transform: none;
+        order: -1;
+      }
+    }
   }
 
-swp-pricing-grid swp-plan-features {
+  swp-plan-features {
     flex: 1;
   }
 
-swp-pricing-grid swp-plan-action {
+  swp-plan-action {
     margin-top: auto;
     padding-top: var(--spacing-6);
   }
 
-swp-pricing-grid swp-plan-card.popular {
+  @media (max-width: 1024px) {
-  border-color: var(--color-teal);
+    grid-template-columns: 1fr;
-  box-shadow: var(--shadow-focus-ring);
+    max-width: 400px;
-  transform: scale(1.02);
+  }
 }
 
 /* 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,17 +735,17 @@ swp-pricing-footer {
 swp-pricing-footer-text {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
-}
 
-swp-pricing-footer-text a {
+  & a {
     color: var(--color-teal);
     font-weight: var(--font-weight-medium);
     text-decoration: none;
-}
 
-swp-pricing-footer-text a:hover {
+    &:hover {
       text-decoration: underline;
     }
+  }
+}
 
 /* ===========================================
    PAYMENT PAGE
@@ -661,16 +764,16 @@ swp-order-line {
   justify-content: space-between;
   font-size: var(--font-size-sm);
   color: var(--color-text);
-}
 
-swp-order-line.discount {
+  &.discount {
     color: var(--color-green);
   }
 
-swp-order-line.total {
+  &.total {
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-base);
   }
+}
 
 swp-order-divider {
   height: 1px;
@@ -694,11 +797,11 @@ swp-payment-secure {
   border-radius: var(--border-radius);
   font-size: var(--font-size-sm);
   color: var(--color-green);
-}
 
-swp-payment-secure i {
+  & i {
     font-size: 16px;
   }
+}
 
 swp-payment-processing {
   display: flex;
@@ -745,11 +848,11 @@ swp-success-icon {
   background: var(--bg-green-strong);
   border-radius: 50%;
   color: var(--color-green);
-}
 
-swp-success-icon i {
+  & i {
     font-size: 32px;
   }
+}
 
 swp-success-title {
   font-size: var(--font-size-xl);
@@ -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;
-  }
 }

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,17 +60,16 @@ swp-cash-stats {
   gap: var(--spacing-8);
   max-width: var(--page-max-width);
   margin: 0 auto;
-}
 
-swp-cash-stats:not(.active) {
+  &: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;
@@ -89,21 +86,22 @@ swp-cash-stat-label {
     margin-top: var(--spacing-2);
   }
 
-swp-cash-stat.highlight swp-cash-stat-value {
+  &.highlight swp-cash-stat-value {
     color: var(--color-teal);
   }
 
-swp-cash-stat.warning swp-cash-stat-value {
+  &.warning swp-cash-stat-value {
     color: var(--color-amber);
   }
 
-swp-cash-stat.negative swp-cash-stat-value {
+  &.negative swp-cash-stat-value {
     color: var(--color-red);
   }
 
-swp-cash-stat.user swp-cash-stat-value {
+  &.user swp-cash-stat-value {
     color: var(--color-blue);
   }
+}
 
 /* ===========================================
    ACTION BAR (Table Header)
@@ -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;
+
+  input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--color-teal);
+    cursor: pointer;
+  }
+
+  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-header,
   swp-cash-table-body {
     display: grid;
     grid-column: 1 / -1;
     grid-template-columns: subgrid;
   }
 
-swp-cash-table-header {
+  swp-cash-table-footer {
-  background: var(--color-background-alt);
+    grid-column: 1 / -1;
-  border-bottom: 1px solid var(--color-border);
+    display: flex;
-  padding: var(--spacing-6) var(--spacing-10);
     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,91 +203,72 @@ swp-cash-th {
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--color-text-secondary);
-}
 
-swp-cash-th.right {
+  &.right {
     text-align: right;
   }
 
-swp-cash-th.checkbox,
+  &.checkbox {
-swp-cash-td.checkbox {
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-swp-cash-table input[type="checkbox"] {
+  &:nth-child(9) {
-  width: 16px;
+    text-align: center;
-  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);
 }
 
 swp-cash-td {
   font-size: var(--font-size-base);
   color: var(--color-text);
-}
 
-swp-cash-td.right {
+  &.right {
     text-align: right;
   }
 
-swp-cash-td.mono {
+  &.mono {
     font-family: var(--font-mono);
   }
 
-swp-cash-td.muted {
+  &.muted {
     color: var(--color-text-secondary);
     font-size: var(--font-size-sm);
   }
 
-swp-cash-td.negative {
+  &.negative {
     color: var(--color-red);
   }
 
-swp-cash-td.positive {
+  &.positive {
     color: var(--color-green);
   }
 
-swp-cash-td.id {
+  &.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 {
+  .dates {
     font-size: var(--font-size-sm);
     color: var(--color-text-secondary);
   }
+}
 
 /* ===========================================
    ROW TOGGLE & EXPANDABLE DETAIL
@@ -262,28 +283,26 @@ swp-row-toggle {
   color: var(--color-text-secondary);
   cursor: pointer;
   transition: all var(--transition-fast);
-}
 
-swp-row-toggle:hover {
+  &:hover {
     background: var(--color-background-alt);
     color: var(--color-text);
   }
 
-swp-row-toggle i {
+  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);
-}
 
-swp-cash-row-detail.expanded {
+  &.expanded {
     display: block;
   }
 
@@ -297,37 +316,17 @@ swp-row-detail-actions {
     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 {
+  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;
 }
 
 /* ===========================================
@@ -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,26 +347,25 @@ 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 {
+  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) {
+    &:not(:first-child) {
       text-align: right;
     }
+  }
+}
 
 swp-data-row {
   display: grid;
@@ -382,11 +374,11 @@ swp-data-row {
   padding: var(--spacing-7) 0;
   border-bottom: 1px solid var(--color-border);
   align-items: center;
-}
 
-swp-data-row:last-child {
+  &:last-child {
     border-bottom: none;
   }
+}
 
 swp-data-label {
   font-size: var(--font-size-base);
@@ -400,7 +392,8 @@ swp-data-system {
   color: var(--color-text-secondary);
 }
 
-swp-data-input input {
+swp-data-input {
+  input {
     width: 100%;
     padding: var(--spacing-4) var(--spacing-5);
     font-size: var(--font-size-base);
@@ -409,29 +402,30 @@ swp-data-input input {
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     background: var(--color-surface);
-}
 
-swp-data-input input:focus {
+    &:focus {
       outline: none;
       border-color: var(--color-teal);
     }
 
-swp-data-input input::placeholder {
+    &::placeholder {
       color: var(--color-text-muted);
       font-family: var(--font-family);
       font-size: var(--font-size-sm);
     }
+  }
+}
 
 swp-data-value {
   text-align: right;
   font-family: var(--font-mono);
   font-size: var(--font-size-base);
   color: var(--color-text);
-}
 
-swp-data-value.muted {
+  &.muted {
     color: var(--color-text-secondary);
   }
+}
 
 swp-table-note {
   display: block;
@@ -452,43 +446,46 @@ swp-calc-row {
   align-items: center;
   padding: var(--spacing-7) 0;
   border-bottom: 1px solid var(--color-border);
-}
 
-swp-calc-row:last-of-type {
+  &:last-of-type {
     border-bottom: none;
   }
 
-swp-calc-row.input-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 {
+swp-calc-label {
+  span {
     display: block;
     font-size: var(--font-size-base);
     color: var(--color-text);
   }
 
-swp-calc-label small {
+  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);
-}
 
-swp-calc-value.muted {
+  &.muted {
     color: var(--color-text-secondary);
   }
+}
 
-swp-calc-input input {
+swp-calc-input {
+  input {
     width: 140px;
     padding: var(--spacing-6) var(--spacing-7);
     font-size: var(--font-size-lg);
@@ -497,12 +494,13 @@ swp-calc-input input {
     border: 2px solid var(--color-border);
     border-radius: var(--radius-md);
     background: var(--color-surface);
-}
 
-swp-calc-input input:focus {
+    &:focus {
       outline: none;
       border-color: var(--color-teal);
     }
+  }
+}
 
 /* ===========================================
    DIFFERENCE BOX
@@ -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 {
+  &.positive {
     background: var(--bg-green-medium);
+
+    swp-difference-value {
+      color: var(--color-green);
+    }
   }
 
-swp-difference-box.negative {
+  &.negative {
     background: var(--bg-red-medium);
+
+    swp-difference-value {
+      color: var(--color-red);
+    }
   }
 
-swp-difference-box.neutral {
+  &.neutral {
     background: var(--bg-teal-medium);
+
+    swp-difference-value {
+      color: var(--color-teal);
+    }
   }
 
   swp-difference-label {
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
     color: var(--color-text);
-}
 
-swp-difference-label small {
+    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-value {
     font-size: var(--font-size-2xl);
     font-weight: var(--font-weight-semibold);
     font-family: var(--font-mono);
   }
-
-swp-difference-box.positive swp-difference-value {
-  color: var(--color-green);
-}
-
-swp-difference-box.negative swp-difference-value {
-  color: var(--color-red);
-}
-
-swp-difference-box.neutral swp-difference-value {
-  color: var(--color-teal);
 }
 
 /* ===========================================
@@ -568,7 +566,6 @@ swp-period-display {
   padding: var(--spacing-8);
   background: var(--color-background-alt);
   border-radius: var(--radius-lg);
-}
 
   swp-period-label {
     display: block;
@@ -587,12 +584,13 @@ swp-period-value {
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
     color: var(--color-text);
-}
 
-swp-period-value .arrow {
+    .arrow {
       color: var(--color-teal);
       font-weight: var(--font-weight-regular);
     }
+  }
+}
 
 /* ===========================================
    FORM ELEMENTS
@@ -605,11 +603,11 @@ swp-form-grid {
 
 swp-form-field {
   display: block;
-}
 
-swp-form-field.full-width {
+  &.full-width {
     grid-column: 1 / -1;
   }
+}
 
 swp-form-label {
   display: block;
@@ -619,14 +617,14 @@ swp-form-label {
   margin-bottom: var(--spacing-3);
   text-transform: uppercase;
   letter-spacing: 0.3px;
-}
 
-swp-form-label .required {
+  .required {
     color: var(--color-red);
   }
+}
 
-swp-form-input input,
+swp-form-input {
-swp-form-input select {
+  input, select {
     width: 100%;
     padding: var(--spacing-5) var(--spacing-6);
     font-size: var(--font-size-base);
@@ -635,13 +633,13 @@ swp-form-input select {
     border-radius: var(--radius-md);
     background: var(--color-surface);
     transition: border-color var(--transition-fast);
-}
 
-swp-form-input input:focus,
+    &:focus {
-swp-form-input select:focus {
       outline: none;
       border-color: var(--color-teal);
     }
+  }
+}
 
 swp-auto-id {
   display: block;
@@ -655,7 +653,8 @@ swp-auto-id {
 /* ===========================================
    NOTE FIELD
    =========================================== */
-swp-note-field textarea {
+swp-note-field {
+  textarea {
     width: 100%;
     min-height: 80px;
     padding: var(--spacing-6);
@@ -664,12 +663,13 @@ swp-note-field textarea {
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     resize: vertical;
-}
 
-swp-note-field textarea:focus {
+    &:focus {
       outline: none;
       border-color: var(--color-teal);
     }
+  }
+}
 
 swp-note-hint {
   display: block;
@@ -701,9 +701,8 @@ swp-checkbox-field {
   background: var(--color-background-alt);
   border-radius: var(--radius-lg);
   grid-column: 1 / -1;
-}
 
-swp-checkbox-field input[type="checkbox"] {
+  input[type="checkbox"] {
     width: 18px;
     height: 18px;
     margin-top: var(--spacing-1);
@@ -711,22 +710,19 @@ swp-checkbox-field input[type="checkbox"] {
     cursor: pointer;
   }
 
-swp-checkbox-field label {
+  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,19 +743,23 @@ 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, swp-cash-td {
-  swp-cash-th:nth-child(3),
+    &:nth-child(3),
-  swp-cash-td:nth-child(3),
+    &:nth-child(6) {
-  swp-cash-th:nth-child(6),
-  swp-cash-td:nth-child(6) {
       display: none;
     }
   }
+}
+
+@media (max-width: 900px) {
+  swp-cash-grid {
+    grid-template-columns: 1fr;
+  }
+}
 
 @media (max-width: 768px) {
   swp-filter-bar {

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 {
+  &:last-child {
     border-bottom: none;
   }
 
-swp-table-row-base:hover {
+  &: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);
 }
 
 /* ===========================================
@@ -79,11 +77,11 @@ swp-list-item-base {
   border-radius: var(--radius-lg);
   cursor: pointer;
   transition: background var(--transition-fast);
-}
 
-swp-list-item-base:hover {
+  &:hover {
     background: var(--color-background-hover);
   }
+}
 
 /* ===========================================
    BASE PATTERNS - Icon Container
@@ -122,107 +120,107 @@ swp-btn {
   & i {
     font-size: 18px;
   }
-}
 
   /* Primary button */
-swp-btn.primary {
+  &.primary {
     background: var(--color-teal);
     color: white;
     border-color: var(--color-teal);
-}
 
-swp-btn.primary:hover {
+    &:hover {
       background: #00796b;
       border-color: #00796b;
     }
 
-swp-btn.primary:active {
+    &:active {
       transform: translateY(1px);
     }
 
-swp-btn.primary:disabled {
+    &:disabled {
       background: var(--color-border);
       border-color: var(--color-border);
       cursor: not-allowed;
     }
+  }
 
   /* Secondary button */
-swp-btn.secondary {
+  &.secondary {
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     color: var(--color-text);
-}
 
-swp-btn.secondary:hover {
+    &:hover {
       background: var(--color-background-hover);
     }
+  }
 
   /* Ghost button */
-swp-btn.ghost {
+  &.ghost {
     background: transparent;
     color: var(--color-text-secondary);
-}
 
-swp-btn.ghost:hover {
+    &:hover {
       color: var(--color-text);
     }
+  }
 
   /* Outline button */
-swp-btn.outline {
+  &.outline {
     background: transparent;
     border: 1px solid var(--color-teal);
     color: var(--color-teal);
-}
 
-swp-btn.outline:hover {
+    &:hover {
       background: var(--bg-teal-medium);
     }
 
-swp-btn.outline.purple {
+    &.purple {
       border-color: var(--color-purple);
       color: var(--color-purple);
-}
 
-swp-btn.outline.purple:hover {
+      &:hover {
         background: var(--bg-purple-medium);
       }
+    }
+  }
 
   /* Social button */
-swp-btn.social {
+  &.social {
     background: var(--color-background);
     color: var(--color-text);
     border-color: var(--color-border);
-}
 
-swp-btn.social:hover {
+    &:hover {
       background: var(--color-background-hover);
       border-color: var(--color-text-muted);
     }
 
-swp-btn.social img {
+    & img {
       width: 20px;
       height: 20px;
     }
+  }
 
   /* Size variants */
-swp-btn.sm {
+  &.sm {
     padding: var(--spacing-2) var(--spacing-3);
     font-size: var(--font-size-xs);
-}
 
-swp-btn.sm i {
+    & i {
       font-size: 14px;
     }
+  }
 
-swp-btn.lg {
+  &.lg {
     padding: var(--spacing-4) var(--spacing-8);
     font-size: var(--font-size-lg);
   }
 
   /* Full width */
-swp-btn.full-width {
+  &.full-width {
     width: 100%;
   }
+}
 
 /* ===========================================
    STATUS BADGES (swp-status-badge)
@@ -235,9 +233,8 @@ swp-status-badge {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   border-radius: var(--radius-pill);
-}
 
-swp-status-badge::before {
+  &::before {
     content: '';
     width: 6px;
     height: 6px;
@@ -245,91 +242,70 @@ swp-status-badge::before {
     background: currentColor;
   }
 
-/* Status variants */
+  /* Status variants - green */
-swp-status-badge.approved,
+  &.approved,
-swp-status-badge.active {
+  &.active,
+  &.valid,
+  &.confirmed {
     background: var(--bg-green-strong);
     color: var(--color-green);
   }
 
-swp-status-badge.draft,
+  /* Status variants - amber */
-swp-status-badge.invited {
+  &.draft,
+  &.invited,
+  &.expiring,
+  &.warning,
+  &.pending {
     background: var(--bg-amber-strong);
     color: #b45309;
   }
 
+  /* Use color-amber for pending specifically */
+  &.pending {
+    color: var(--color-amber);
+  }
+
   /* Role variants */
-swp-status-badge.owner {
+  &.owner,
+  &.enrolled,
+  &.ferie {
     background: var(--bg-teal-strong);
     color: var(--color-teal);
   }
 
-swp-status-badge.admin {
+  &.admin {
     background: var(--bg-purple-strong);
     color: var(--color-purple);
   }
 
-swp-status-badge.leader {
+  &.leader,
+  &.fri,
+  &.info,
+  &.inprogress,
+  &.in-progress {
     background: var(--bg-blue-strong);
     color: var(--color-blue);
   }
 
-swp-status-badge.employee {
+  &.employee {
     background: var(--color-background-alt);
     color: var(--color-text-secondary);
   }
 
-/* Additional status variants */
+  /* Danger/red variants */
-swp-status-badge.valid {
+  &.sygdom,
-  background: var(--bg-green-strong);
+  &.danger {
-  color: var(--color-green);
-}
-
-swp-status-badge.expiring,
-swp-status-badge.warning {
-  background: var(--bg-amber-strong);
-  color: #b45309;
-}
-
-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 */
+  /* Completed - muted */
-swp-status-badge.confirmed {
+  &.completed {
-  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);
   }
+}
 
 /* ===========================================
    PLAN CARDS (swp-plan-card)
@@ -342,30 +318,29 @@ swp-plan-card {
   border-radius: var(--radius-xl);
   padding: var(--spacing-10);
   transition: all var(--transition-normal);
-}
 
-swp-plan-card.selected,
+  &.selected,
-swp-plan-card.current {
+  &.current {
     border-color: var(--color-teal);
     box-shadow: 0 0 0 3px var(--bg-teal-strong);
-}
 
-swp-plan-card.popular {
+    swp-btn.secondary {
-  border-color: var(--color-amber);
-}
-
-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);
-}
-
-/* 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;
     }
+  }
+
+  &.popular {
+    border-color: var(--color-amber);
+  }
+
+  &.enterprise {
+    background: var(--gradient-enterprise);
+    border-color: var(--color-purple);
+  }
+}
 
 /* Plan badge */
 swp-plan-badge {
@@ -379,42 +354,42 @@ swp-plan-badge {
   letter-spacing: 0.5px;
   border-radius: var(--radius-pill);
   width: fit-content;
+
+  & i {
+    font-size: 14px;
   }
 
-swp-plan-badge.current,
+  &.current,
-swp-plan-badge.selected {
+  &.selected {
     background: var(--bg-teal-strong);
     color: var(--color-teal);
   }
 
-swp-plan-badge.popular {
+  &.popular {
     background: var(--bg-amber-strong);
     color: var(--color-amber);
   }
 
-swp-plan-badge.enterprise {
+  &.enterprise {
     background: var(--bg-purple-strong);
     color: var(--color-purple);
   }
 
-swp-plan-badge.free {
+  &.free {
     background: var(--bg-green-strong);
     color: var(--color-green);
   }
-
-swp-plan-badge i {
-  font-size: 14px;
 }
 
 /* Plan action */
 swp-plan-action {
   margin-top: auto;
   padding-top: var(--card-padding);
-}
 
-swp-plan-action swp-btn {
+  swp-btn {
     width: 100%;
   }
+}
 
 /* ===========================================
    AVATARS (swp-avatar)
@@ -428,50 +403,47 @@ swp-avatar {
   justify-content: center;
   font-weight: var(--font-weight-semibold);
   flex-shrink: 0;
-}
-
   /* Default size (md = 40px) */
-swp-avatar {
   width: 40px;
   height: 40px;
   font-size: var(--font-size-sm);
-}
 
   /* Size variants */
-swp-avatar.size-xs {
+  &.size-xs {
     width: 24px;
     height: 24px;
     font-size: 10px;
   }
 
-swp-avatar.size-sm {
+  &.size-sm {
     width: 36px;
     height: 36px;
     font-size: var(--font-size-xs);
   }
 
-swp-avatar.size-lg {
+  &.size-lg {
     width: 80px;
     height: 80px;
     font-size: var(--font-size-2xl);
   }
 
   /* Color variants */
-swp-avatar.purple {
+  &.purple {
     background: var(--color-purple);
   }
 
-swp-avatar.blue {
+  &.blue {
     background: var(--color-blue);
   }
 
-swp-avatar.amber {
+  &.amber {
     background: var(--color-amber);
   }
 
-swp-avatar.teal {
+  &.teal {
     background: var(--color-teal);
   }
+}
 
 /* ===========================================
    ICON BUTTONS (swp-icon-btn)
@@ -536,13 +508,13 @@ 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 {
+  swp-section-label {
     padding-bottom: 0;
     border-bottom: none;
     margin-bottom: 0;
   }
+}
 
 swp-section-action {
   font-size: var(--font-size-sm);
@@ -593,6 +565,7 @@ swp-add-button {
     background: var(--bg-teal-subtle);
   }
 }
+
 /* ===========================================
    USER INFO PATTERN (shared across auth, waitlist, employees, drawers)
    =========================================== */
@@ -657,11 +630,10 @@ swp-form-label {
 
 swp-form-input {
   position: relative;
-}
 
-swp-form-input input,
+  input,
-swp-form-input select,
+  select,
-swp-form-input textarea {
+  textarea {
     width: 100%;
     padding: var(--spacing-3) var(--spacing-4);
     font-size: var(--font-size-base);
@@ -671,22 +643,19 @@ swp-form-input textarea {
     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,
+    &::placeholder {
-swp-form-input textarea::placeholder {
       color: var(--color-text-muted);
     }
 
-swp-form-input input:focus,
+    &:focus {
-swp-form-input select:focus,
-swp-form-input textarea:focus {
       outline: none;
       border-color: var(--color-teal);
       box-shadow: var(--shadow-focus-ring);
     }
+  }
 
-swp-form-input select {
+  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");
@@ -695,10 +664,11 @@ swp-form-input select {
     padding-right: 40px;
   }
 
-swp-form-input textarea {
+  textarea {
     resize: vertical;
     min-height: 80px;
   }
+}
 
 /* ===========================================
    EMPTY STATE PATTERN

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%);
 }
 
 /* ===========================================

PlanTempus.Application/wwwroot/css/employees.css

@@ -32,12 +32,12 @@ swp-users-count {
   gap: var(--spacing-4);
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
-}
 
-swp-users-count strong {
+  strong {
     color: var(--color-text);
     font-weight: var(--font-weight-semibold);
   }
+}
 
 swp-users-progress {
   width: 120px;
@@ -45,7 +45,6 @@ swp-users-progress {
   background: var(--color-border);
   border-radius: var(--radius-sm);
   overflow: hidden;
-}
 
   swp-users-progress-bar {
     display: block;
@@ -54,6 +53,7 @@ swp-users-progress-bar {
     border-radius: var(--radius-sm);
     transition: width var(--transition-normal);
   }
+}
 
 /* ===========================================
    EMPLOYEE TABLE (Grid + Subgrid)
@@ -69,7 +69,6 @@ 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;
@@ -77,12 +76,31 @@ swp-employee-table-header {
     grid-template-columns: subgrid;
     background: var(--color-background-alt);
     padding: 0 var(--spacing-10);
+
+    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 {
+  &:last-child {
-  cursor: pointer;
-}
-
-swp-employee-table-body swp-employee-row:hover {
-  background: var(--color-background-hover);
-}
-
-swp-employee-row: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) */
+  &:last-child {
-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);
 }
 
 /* ===========================================
@@ -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 {
+  &.purple { background: var(--color-purple); }
-  background: var(--color-purple);
+  &.blue { background: var(--color-blue); }
-}
+  &.amber { background: var(--color-amber); }
-
-swp-user-avatar.blue {
-  background: var(--color-blue);
-}
-
-swp-user-avatar.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,28 +198,25 @@ 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 {
+  table {
     width: 100%;
     border-collapse: collapse;
   }
 
-swp-permissions-matrix th,
+  th, td {
-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);
-}
 
-swp-permissions-matrix th:first-child,
+    &:first-child {
-swp-permissions-matrix td:first-child {
       text-align: left;
       font-weight: var(--font-weight-medium);
     }
+  }
 
-swp-permissions-matrix thead th {
+  thead th {
     background: var(--color-background-alt);
     font-size: var(--font-size-xs);
     font-weight: var(--font-weight-semibold);
@@ -240,38 +225,37 @@ swp-permissions-matrix thead th {
     color: var(--color-text-secondary);
   }
 
-swp-permissions-matrix tbody tr:last-child td {
+  tbody tr:last-child td {
     border-bottom: none;
   }
 
-swp-permissions-matrix .permission-name {
+  .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 {
+    i {
       font-size: 18px;
       color: var(--color-text-secondary);
     }
+  }
 
-swp-permissions-matrix .check {
+  .check {
     color: var(--color-teal);
     font-size: 20px;
   }
 
-swp-permissions-matrix .no-access {
+  .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);
-}
 
-swp-tag.master {
+  &.master {
     background: var(--bg-purple-strong);
     color: var(--color-purple);
   }
 
-swp-tag.senior {
+  &.senior {
     background: var(--bg-blue-strong);
     color: var(--color-blue);
   }
 
-swp-tag.junior {
+  &.junior {
     background: var(--bg-amber-strong);
     color: #b45309;
   }
 
-swp-tag.cert {
+  &.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;
-}
 
-swp-employee-status[data-active="true"] {
+  &[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"] {
+  &[data-active="false"] {
     background: var(--bg-red-medium);
     color: var(--color-red);
     border: 1px solid var(--bg-red-border);
   }
 
-swp-employee-status .icon {
+  .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,7 +389,6 @@ swp-fact-inline {
   display: flex;
   align-items: baseline;
   gap: var(--spacing-2);
-}
 
   swp-fact-inline-value {
     font-size: var(--font-size-lg);
@@ -414,8 +401,11 @@ 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;
-}
 
-swp-edit-value:hover {
+  &:hover {
     background: var(--color-background);
   }
 
-swp-edit-value:focus {
+  &:focus {
     outline: none;
     background: var(--color-surface);
     border-color: var(--color-teal);
   }
 
-/* swp-section-label is now in components.css */
+  &.mono {
+    font-family: var(--font-mono);
+    width: 150px;
+    text-align: right;
+    justify-self: end;
+  }
+}
+
+swp-edit-select {
+  display: block;
+
+  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;
+
+    &: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,35 +519,29 @@ swp-back-link {
   font-size: var(--font-size-sm);
   cursor: pointer;
   transition: color var(--transition-fast);
-}
 
-swp-back-link:hover {
+  &:hover {
     color: var(--color-teal);
   }
 
-swp-back-link i {
+  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 {
+  > 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;
-  }
 }
 
 /* ===========================================
@@ -523,14 +558,17 @@ swp-schedule-row {
   align-items: center;
   padding: var(--spacing-4) 0;
   border-bottom: 1px solid var(--color-border);
-}
 
-swp-schedule-row:last-child {
+  &:last-child {
     border-bottom: none;
   }
 
-swp-schedule-row.off {
+  &.off {
     color: var(--color-text-secondary);
+
+    swp-schedule-time {
+      color: var(--color-text-secondary);
+    }
   }
 
   swp-schedule-day {
@@ -543,9 +581,6 @@ swp-schedule-time {
     font-family: var(--font-mono);
     color: var(--color-teal);
   }
-
-swp-schedule-row.off swp-schedule-time {
-  color: var(--color-text-secondary);
 }
 
 /* ===========================================
@@ -563,9 +598,8 @@ swp-service-item {
   align-items: center;
   padding: var(--spacing-4) 0;
   border-bottom: 1px solid var(--color-border);
-}
 
-swp-service-item:last-child {
+  &:last-child {
     border-bottom: none;
   }
 
@@ -585,10 +619,10 @@ swp-service-price {
     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,25 +638,20 @@ swp-document-item {
   background: var(--color-background-alt);
   border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
-}
 
-/* Icon (optional) */
+  i, swp-document-icon {
-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 {
+  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;
@@ -637,16 +666,19 @@ swp-document-meta {
       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 {
+  &: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;
 }
 
 /* ===========================================
@@ -729,86 +701,83 @@ swp-edit-row input[data-type="number"] {
 swp-salary-table {
   display: grid;
   grid-template-columns: 1fr 120px 60px;
+
+  swp-salary-table-header {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    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-header,
   swp-salary-table-body {
     display: grid;
     grid-column: 1 / -1;
     grid-template-columns: subgrid;
   }
 
-swp-salary-table-header {
-  border-bottom: 1px solid var(--color-border);
-}
-
   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);
+
+    &:last-child {
+      border-bottom: none;
     }
 
-swp-salary-table-row:last-child {
+    &:hover {
-  border-bottom: none;
+      background: var(--color-background-hover);
+
+      swp-salary-table-cell i {
+        color: var(--color-teal);
+      }
+    }
   }
 
   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:first-child {
+    &:first-child {
       padding-left: 0;
     }
 
-swp-salary-table-cell:last-child {
+    &:last-child {
       padding-right: 0;
       text-align: right;
     }
 
-swp-salary-table-header swp-salary-table-cell {
+    &.mono {
-  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.mono {
       font-family: var(--font-mono);
     }
 
-/* Chevron for row actions */
+    i {
-swp-salary-table-cell i {
       color: var(--color-text-muted);
       font-size: 16px;
     }
-
-swp-salary-table-row {
-  cursor: pointer;
-  transition: background var(--transition-fast);
   }
-
-swp-salary-table-row:hover {
-  background: var(--color-background-hover);
-}
-
-swp-salary-table-row:hover swp-salary-table-cell i {
-  color: var(--color-teal);
 }
 
 /* ===========================================
-   SUBSECTION TITLE (for grouped lists like courses)
+   SUBSECTION TITLE
    =========================================== */
 swp-subsection {
   display: block;
   margin-bottom: var(--spacing-6);
-}
 
-swp-subsection:last-of-type {
+  &:last-of-type {
     margin-bottom: 0;
   }
 
@@ -819,9 +788,10 @@ swp-subsection-title {
     color: var(--color-text-secondary);
     margin-bottom: var(--spacing-3);
   }
+}
 
 /* ===========================================
-   SIMPLE LIST (dates + badge, like vacation)
+   SIMPLE LIST
    =========================================== */
 swp-simple-list {
   display: flex;
@@ -838,7 +808,6 @@ 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;
@@ -846,18 +815,18 @@ swp-simple-item-text {
     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 {
+.rates-content {
+  swp-data-table {
     display: grid;
     grid-template-columns: 28px 1fr 100px;
   }
 
-.rates-content swp-data-row {
+  swp-data-row {
     display: grid;
     grid-column: 1 / -1;
     grid-template-columns: subgrid;
@@ -865,36 +834,35 @@ swp-simple-item-text {
     gap: 12px;
     padding: 12px 0;
     border-bottom: 1px solid var(--color-border);
-}
 
-.rates-content swp-data-row:last-child {
+    &:last-child {
       border-bottom: none;
     }
 
-.rates-content swp-data-row input[type="checkbox"] {
+    input[type="checkbox"] {
       width: 18px;
       height: 18px;
       accent-color: var(--color-teal);
     }
-
-.rates-content swp-data-label {
-  font-size: var(--font-size-base);
   }
 
-.rates-content swp-data-label.disabled {
+  swp-data-label {
+    font-size: var(--font-size-base);
+
+    &.disabled {
       opacity: 0.4;
     }
+  }
 
-.rates-content swp-data-input {
+  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 {
+    input {
       width: 100px;
       padding: 6px 8px;
       border: 1px solid var(--color-border);
@@ -904,20 +872,56 @@ swp-simple-item-text {
       text-align: right;
     }
 
-.rates-content swp-data-input.disabled input {
+    &.disabled input {
       opacity: 0.4;
       background: var(--color-background);
     }
+  }
 
-.rates-content swp-section-label {
+  swp-section-label {
     margin-bottom: 12px;
   }
 
-.rates-content swp-data-section {
+  swp-data-section {
     margin-top: 24px;
     padding-top: 16px;
     border-top: 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;
+  }
+
+  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);
+    }
+
+    &:nth-child(3) {
+      font-weight: var(--font-weight-medium);
+    }
+
+    &:nth-child(6) {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      font-weight: var(--font-weight-semibold);
+      text-align: right;
+    }
+  }
+
+  swp-data-table-header swp-data-table-cell:nth-child(6) {
+    text-align: right;
+  }
+}
 
 /* ===========================================
    RESPONSIVE
@@ -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 {
+    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);
 }