/* =========================================================
   STRINGING APP
   Datei: static/css/app.css

   Zweck:
   - Zentrales Styling der Stringing App
   - Keine Inline-Styles in Templates
   - Einheitlicher Look für Dashboard, Kunden, Login, Registrierung

   MOSES-STYLE / DAU-UX:
   - Ruhiges, klares Layout
   - Gute Lesbarkeit
   - Mobil nutzbar
   - Erst stabil, dann weiter veredeln
   ========================================================= */


/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root {
  --app-bg: #f4f7fb;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fafc;

  --app-text: #172033;
  --app-text-soft: #64748b;
  --app-text-muted: #94a3b8;

  --app-border: rgba(15, 23, 42, 0.08);
  --app-border-strong: rgba(15, 23, 42, 0.16);

  --app-primary: #2563eb;
  --app-primary-dark: #1e40af;

  --app-nav-bg: #111827;
  --app-nav-text: #ffffff;
  --app-nav-muted: rgba(255, 255, 255, 0.65);

  --app-radius: 18px;
  --app-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  
  --sans:'Exo 2',sans-serif;
  --mono:'Share Tech Mono',monospace;
}


/* =========================================================
   BASE
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--app-bg);
  color: var(--app-text);
}

a {
  text-decoration: none;
}

.app-shell {
  padding-top: 24px;
  padding-bottom: 48px;
}

.app-page-title {
  font-weight: 700;
  letter-spacing: -0.03em;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.app-navbar {
  background: var(--app-nav-bg);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link {
  color: var(--app-nav-text);
}

.app-navbar .nav-link {
  opacity: 0.9;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
  color: #bfdbfe;
  opacity: 1;
}

.app-navbar-user {
  color: var(--app-nav-muted);
  font-size: 0.875rem;
}


/* =========================================================
   CARDS
   ========================================================= */

.app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}

.app-card-soft {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
}

.app-card-header {
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  border-radius: var(--app-radius) var(--app-radius) 0 0;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.app-stat-card .card-body {
  padding: 1.25rem;
}

.app-stat-label {
  color: var(--app-text-soft);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.app-stat-value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
}


/* =========================================================
   TABLES
   ========================================================= */

.app-table {
  margin-bottom: 0;
}

.app-table th {
  color: var(--app-text-soft);
  font-size: 0.825rem;
  font-weight: 600;
  white-space: nowrap;
}

.app-table td {
  vertical-align: middle;
}


/* =========================================================
   FORMS
   ========================================================= */

.app-form-card {
  max-width: 460px;
  margin: 48px auto;
}

.app-form-hint {
  color: var(--app-text-soft);
  font-size: 0.925rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767.98px) {
  .app-shell {
    padding-top: 16px;
  }

  .app-page-title {
    font-size: 1.75rem;
  }

  .app-stat-value {
    font-size: 1.9rem;
  }
}


/* =========================================================
   LOKALE SCHRIFTARTEN
   Zweck:
   - Google Fonts lokal ausliefern
   - Keine externe Verbindung zu Google beim Seitenaufruf
   - Datenschutzfreundlicher Betrieb der Website
   ========================================================= */

@font-face{
  font-family:"Exo 2";
  src:url("./fonts/exo-2/exo-2-v26-latin-300.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Exo 2";
  src:url("./fonts/exo-2/exo-2-v26-latin-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Exo 2";
  src:url("./fonts/exo-2/exo-2-v26-latin-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Exo 2";
  src:url("./fonts/exo-2/exo-2-v26-latin-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Exo 2";
  src:url("./fonts/exo-2/exo-2-v26-latin-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Share Tech Mono";
  src:url("./fonts/share-tech-mono/share-tech-mono-v16-latin-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}


.app-white-space-pre-wrap {
  white-space: pre-wrap;
}