/**
 * Portal TELADIA Theme
 * Wendet TELADIA Banking Design System auf gesamtes Portal an
 * Version: 1.0.0
 */

/* Import TELADIA Design System */
@import url('./teladia-banking-design-system.css');

/* Portal-spezifische Anpassungen */
:root {
  /* Überschreibe Portal-Variablen mit TELADIA-Design */
  --bg: var(--color-bg);
  --fg: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-primary);
  --danger: var(--color-error);
  --warn: var(--color-warning);
  --card: var(--color-surface);
  --border: var(--color-border);
  --focus: var(--color-primary);
  --shadow: var(--shadow-soft);
  --font: var(--font-sans);
}

/* Light Theme (Standard für Banking) */
:root.light {
  --bg: var(--color-bg);
  --fg: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-primary);
  --danger: var(--color-error);
  --warn: var(--color-warning);
  --card: var(--color-surface);
  --border: var(--color-border);
  --focus: var(--color-primary);
  --shadow: var(--shadow-soft);
}

/* Header mit TELADIA-Style */
header {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Navigation mit TELADIA-Style */
nav button {
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-2) var(--spacing-4) !important;
  font-weight: var(--font-weight-medium) !important;
  transition: all var(--transition-fast) !important;
}

nav button:hover {
  background: var(--color-bg) !important;
  border-color: var(--color-primary) !important;
}

nav button.active {
  background: rgba(31, 74, 122, 0.1) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Cards mit TELADIA-Style */
.card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  padding: var(--spacing-6) !important;
  transition: all var(--transition-base) !important;
}

.card:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px) !important;
}

/* Buttons mit TELADIA-Style */
.btn {
  border-radius: var(--radius-full) !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: var(--font-weight-semibold) !important;
  transition: all var(--transition-fast) !important;
}

.btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-hover) !important;
}

.btn.warn {
  background: var(--color-warning) !important;
  color: #fff !important;
}

.btn.danger {
  background: var(--color-error) !important;
  color: #fff !important;
}

.btn.ghost {
  background: transparent !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

.btn.ghost:hover {
  background: var(--color-bg) !important;
  border-color: var(--color-primary) !important;
}

/* Forms mit TELADIA-Style */
.controls input,
.controls select {
  border-radius: var(--radius-md) !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--color-border) !important;
  transition: all var(--transition-fast) !important;
}

.controls input:focus,
.controls select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(31, 74, 122, 0.1) !important;
}

/* Tables mit TELADIA-Style */
table {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-soft) !important;
}

th {
  background: var(--color-bg) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-transform: uppercase !important;
  font-size: var(--font-size-sm) !important;
  letter-spacing: 0.05em !important;
}

tr:hover td {
  background: var(--color-bg) !important;
}

/* Badges mit TELADIA-Style */
.badge {
  border-radius: var(--radius-full) !important;
  padding: 0.25rem 0.75rem !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* TogetherSystems Branding mit TELADIA-Farben */
.ts-brand-banner {
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-light)) !important;
  color: #fff !important;
}

/* KPI Cards */
.kpi {
  border-radius: var(--radius-lg) !important;
  padding: var(--spacing-4) var(--spacing-6) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-light) !important;
}

/* Main Container */
main {
  max-width: 1400px !important;
  padding: var(--spacing-6) !important;
}

/* Footer */
footer {
  background: var(--color-surface) !important;
  border-top: 1px solid var(--color-border) !important;
  padding: var(--spacing-8) var(--spacing-6) !important;
}