/*
 * Material Design CSS für ConnectAd Insight
 * CI-Farben: #55616f (Grau), #00A99D (Türkis)
 */

/* ============================================
   MATERIAL DESIGN VARIABLES
   ============================================ */
:root {
  /* CI Colors */
  --primary-color: #00A99D;
  --primary-dark: #00897B;
  --primary-light: #4DD0C3;
  --accent-color: #55616f;
  --accent-dark: #3D4751;
  --accent-light: #6D7985;

  /* Material Design Colors */
  --background: #FAFAFA;
  --surface: #FFFFFF;
  --error: #D32F2F;
  --success: #43A047;
  --warning: #FB8C00;
  --info: #1E88E5;

  /* Text Colors */
  --text-primary: rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.60);
  --text-disabled: rgba(0, 0, 0, 0.38);
  --text-on-primary: #FFFFFF;
  --text-on-accent: #FFFFFF;

  /* Elevation Shadows */
  --elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  --elevation-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  --elevation-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  --elevation-5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

  /* Spacing (8dp Grid) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 16px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   GLOBAL STYLES
   ============================================ */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--background);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}

h1 { font-size: 96px; font-weight: 300; letter-spacing: -1.5px; }
h2 { font-size: 60px; font-weight: 300; letter-spacing: -0.5px; }
h3 { font-size: 48px; font-weight: 400; }
h4 { font-size: 34px; font-weight: 400; letter-spacing: 0.25px; }
h5 { font-size: 24px; font-weight: 400; }
h6 { font-size: 20px; font-weight: 500; letter-spacing: 0.15px; }

.subtitle1 { font-size: 16px; font-weight: 400; letter-spacing: 0.15px; }
.subtitle2 { font-size: 14px; font-weight: 500; letter-spacing: 0.1px; }
.body1 { font-size: 16px; font-weight: 400; letter-spacing: 0.5px; }
.body2 { font-size: 14px; font-weight: 400; letter-spacing: 0.25px; }
.caption { font-size: 12px; font-weight: 400; letter-spacing: 0.4px; color: var(--text-secondary); }
.overline { font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; }

/* ============================================
   MATERIAL CARDS
   ============================================ */
.mat-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  transition: box-shadow var(--transition-normal);
}

.mat-card:hover {
  box-shadow: var(--elevation-3);
}

.mat-card-elevated {
  box-shadow: var(--elevation-4);
}

.mat-card-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  margin: calc(var(--spacing-md) * -1) calc(var(--spacing-md) * -1) var(--spacing-md);
}

.mat-card-title {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
}

.mat-card-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: var(--spacing-xs) 0 0;
}

.mat-card-content {
  padding: var(--spacing-md) 0;
}

.mat-card-actions {
  padding: var(--spacing-sm);
  margin: var(--spacing-md) calc(var(--spacing-md) * -1) calc(var(--spacing-md) * -1);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  gap: var(--spacing-sm);
}

/* ============================================
   MATERIAL BUTTONS
   ============================================ */
.mat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: all var(--transition-normal);
  text-decoration: none;
  min-width: 64px;
  height: 36px;
}

/* Raised Button (Primary) */
.mat-button-raised {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: all var(--transition-normal);
  text-decoration: none;
  min-width: 64px;
  height: 36px;
  background-color: var(--primary-color);
  color: var(--text-on-primary);
  box-shadow: var(--elevation-2);
}

.mat-button-raised:hover {
  background-color: var(--primary-dark);
  box-shadow: var(--elevation-3);
}

.mat-button-raised:active {
  box-shadow: var(--elevation-4);
}

/* Flat Button */
.mat-button-flat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: all var(--transition-normal);
  text-decoration: none;
  min-width: 64px;
  height: 36px;
  background-color: transparent;
  color: var(--primary-color);
}

.mat-button-flat:hover {
  background-color: rgba(0, 169, 157, 0.08);
}

/* Outlined Button */
.mat-button-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: all var(--transition-normal);
  text-decoration: none;
  min-width: 64px;
  height: 36px;
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid rgba(0, 169, 157, 0.5);
}

.mat-button-outlined:hover {
  background-color: rgba(0, 169, 157, 0.08);
  border-color: var(--primary-color);
}

/* Accent Button */
.mat-button-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: all var(--transition-normal);
  text-decoration: none;
  min-width: 64px;
  height: 36px;
  background-color: var(--accent-color);
  color: var(--text-on-accent);
  box-shadow: var(--elevation-2);
}

.mat-button-accent:hover {
  background-color: var(--accent-dark);
  box-shadow: var(--elevation-3);
}

/* Floating Action Button */
.mat-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: var(--text-on-primary);
  box-shadow: var(--elevation-3);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 1000;
}

.mat-fab:hover {
  box-shadow: var(--elevation-4);
  transform: scale(1.05);
}

.mat-fab i {
  font-size: 24px;
}

/* Mini FAB */
.mat-fab-mini {
  width: 40px;
  height: 40px;
}

.mat-fab-mini i {
  font-size: 18px;
}

/* ============================================
   MATERIAL APP BAR / NAVIGATION
   ============================================ */
.mat-app-bar {
  background-color: var(--primary-color);
  color: var(--text-on-primary);
  box-shadow: var(--elevation-4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-md);
  z-index: 1100;
}

.mat-app-bar-title {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  flex: 1;
}

.mat-app-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Sidebar Navigation */
.mat-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 256px;
  background-color: var(--surface);
  box-shadow: var(--elevation-2);
  overflow-y: auto;
  z-index: 1000;
  transition: transform var(--transition-normal);
}

.mat-sidebar-header {
  padding: var(--spacing-md);
  background-color: var(--primary-color);
  color: var(--text-on-primary);
}

.mat-sidebar-logo {
  max-width: 100%;
  height: auto;
  margin-bottom: var(--spacing-sm);
}

.mat-nav-list {
  list-style: none;
  padding: var(--spacing-sm) 0;
  margin: 0;
}

.mat-nav-item {
  display: block;
}

.mat-nav-link {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--transition-fast);
  position: relative;
}

.mat-nav-link:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.mat-nav-link.active {
  background-color: rgba(0, 169, 157, 0.12);
  color: var(--primary-color);
}

.mat-nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--primary-color);
}

.mat-nav-icon {
  margin-right: var(--spacing-md);
  font-size: 24px;
  width: 24px;
  text-align: center;
  color: var(--text-secondary);
}

.mat-nav-link.active .mat-nav-icon {
  color: var(--primary-color);
}

.mat-nav-divider {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.12);
  margin: var(--spacing-sm) 0;
}

.mat-nav-subheader {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xs);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Main Content Area */
.mat-main-content {
  margin-left: 256px;
  margin-top: 0;
  padding: var(--spacing-lg);
  min-height: 100vh;
}

/* ============================================
   MATERIAL FORM INPUTS
   ============================================ */
.mat-form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-md);
  position: relative;
}

.mat-form-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  transition: color var(--transition-fast);
}

.mat-input {
  padding: var(--spacing-sm) var(--spacing-sm);
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
  background-color: transparent;
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition-fast);
}

.mat-input:focus {
  border-bottom-color: var(--primary-color);
}

.mat-input:focus + .mat-form-label {
  color: var(--primary-color);
}

/* Filled Input */
.mat-input-filled {
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--spacing-md) var(--spacing-sm) var(--spacing-xs);
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
}

.mat-input-filled:focus {
  background-color: rgba(0, 0, 0, 0.12);
}

/* Outlined Input */
.mat-input-outlined {
  border: 1px solid rgba(0, 0, 0, 0.38);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
}

.mat-input-outlined:focus {
  border-color: var(--primary-color);
  border-width: 2px;
}

/* ============================================
   MATERIAL TABLES
   ============================================ */
.mat-table {
  width: 100%;
  background-color: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
  overflow: hidden;
}

.mat-table table {
  width: 100%;
  border-collapse: collapse;
}

.mat-table thead {
  background-color: var(--background);
}

.mat-table th {
  padding: var(--spacing-md);
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mat-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
}

.mat-table tbody tr {
  transition: background-color var(--transition-fast);
}

.mat-table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.mat-table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================
   MATERIAL CHIPS
   ============================================ */
.mat-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xl);
  font-size: 13px;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
  margin: var(--spacing-xs);
  transition: background-color var(--transition-fast);
}

.mat-chip:hover {
  background-color: rgba(0, 0, 0, 0.20);
}

.mat-chip-primary {
  background-color: var(--primary-color);
  color: var(--text-on-primary);
}

.mat-chip-accent {
  background-color: var(--accent-color);
  color: var(--text-on-accent);
}

/* ============================================
   MATERIAL SNACKBAR / TOAST
   ============================================ */
.mat-snackbar {
  position: fixed;
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  background-color: #323232;
  color: #FFFFFF;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-width: 288px;
  max-width: 568px;
  z-index: 9999;
  animation: slideUp var(--transition-normal);
}

@keyframes slideUp {
  from {
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.mat-snackbar-action {
  background: none;
  border: none;
  color: var(--primary-light);
  font-weight: 500;
  cursor: pointer;
  padding: var(--spacing-xs);
  text-transform: uppercase;
  font-size: 14px;
}

/* ============================================
   MATERIAL PROGRESS INDICATORS
   ============================================ */
.mat-progress-linear {
  height: 4px;
  background-color: rgba(0, 169, 157, 0.2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.mat-progress-linear-bar {
  height: 100%;
  background-color: var(--primary-color);
  transition: width var(--transition-normal);
}

/* Circular Progress */
.mat-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 169, 157, 0.2);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.elevation-0 { box-shadow: none; }
.elevation-1 { box-shadow: var(--elevation-1); }
.elevation-2 { box-shadow: var(--elevation-2); }
.elevation-3 { box-shadow: var(--elevation-3); }
.elevation-4 { box-shadow: var(--elevation-4); }
.elevation-5 { box-shadow: var(--elevation-5); }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }

/* ============================================
   MATERIAL PAGINATION
   ============================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-lg) 0;
  padding: 0;
  list-style: none;
}

.pagination li {
  display: inline-block;
}

.pagination li a,
.pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-primary);
  background-color: transparent;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.pagination li a:hover {
  background-color: rgba(0, 169, 157, 0.08);
  color: var(--primary-color);
}

/* Active page */
.pagination li.active span,
.pagination li.active a {
  background-color: var(--primary-color);
  color: var(--text-on-primary);
  box-shadow: var(--elevation-2);
}

/* Disabled state */
.pagination li.disabled span,
.pagination li.disabled a {
  color: var(--text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Previous/Next buttons */
.pagination li a[rel="prev"],
.pagination li a[rel="next"],
.pagination li span[rel="prev"],
.pagination li span[rel="next"] {
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.pagination li a[rel="prev"]:hover,
.pagination li a[rel="next"]:hover {
  border-color: var(--primary-color);
  background-color: rgba(0, 169, 157, 0.08);
}

/* Dots/Ellipsis */
.pagination li.disabled span {
  border: none;
  background: transparent;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .pagination {
    gap: var(--spacing-xs);
  }

  .pagination li a,
  .pagination li span {
    min-width: 36px;
    height: 36px;
    padding: var(--spacing-xs);
    font-size: 13px;
  }

  /* Hide page numbers on mobile, keep only prev/next and active */
  .pagination li:not(.active):not(:first-child):not(:last-child) {
    display: none;
  }

  .pagination li.active {
    display: inline-block;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .mat-sidebar {
    transform: translateX(-100%);
  }

  .mat-sidebar.open {
    transform: translateX(0);
  }

  .mat-main-content {
    margin-left: 0;
  }

  h1 { font-size: 48px; }
  h2 { font-size: 36px; }
  h3 { font-size: 30px; }
  h4 { font-size: 24px; }
}

/* ============================================
   DATEPICKER COMPATIBILITY
   ============================================ */
/* Ensure datepicker works with Material Design */
.xdsoft_datetimepicker {
  z-index: 9999 !important;
  box-shadow: var(--elevation-4) !important;
  font-family: 'Roboto', sans-serif !important;
}

.xdsoft_datepicker {
  background: white !important;
}

.xdsoft_calendar td.xdsoft_default,
.xdsoft_calendar td.xdsoft_current,
.xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
  background: var(--primary-color) !important;
  color: white !important;
}

.xdsoft_calendar td:hover,
.xdsoft_timepicker .xdsoft_time_box >div >div:hover {
  background: var(--primary-light) !important;
  color: white !important;
}

.xdsoft_calendar th {
  background: var(--accent-color) !important;
  color: white !important;
}

/* Prevent Material input styles from interfering */
input[datepicker] {
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* ============================================
   KPI NUMBER RESPONSIVE SIZING
   ============================================ */
.kpi-number {
  margin: 0;
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: white;
}

/* ============================================
   PANEL COMPATIBILITY (für bestehende Templates)
   ============================================ */
.panel {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.panel.white {
  background: var(--surface);
}

.panel-heading {
  padding: var(--spacing-md);
  background-color: var(--accent-color);
  color: var(--text-on-accent);
  font-weight: 500;
  border-bottom: none;
}

.panel-body {
  padding: var(--spacing-md);
}

/* ============================================
   BUTTON COMPATIBILITY
   ============================================ */
.button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  background-color: var(--primary-color);
  color: var(--text-on-primary);
  box-shadow: var(--elevation-2);
}

.button:hover, button:hover {
  background-color: var(--primary-dark);
  box-shadow: var(--elevation-3);
  color: var(--text-on-primary);
  text-decoration: none;
}

.button.secondary {
  background-color: var(--accent-color);
  color: var(--text-on-accent);
}

.button.secondary:hover {
  background-color: var(--accent-dark);
}

.button.callout {
  background-color: var(--warning);
  color: var(--text-on-primary);
}

.button.success {
  background-color: var(--success);
}

.button.alert {
  background-color: var(--error);
}