/* =====================================================================
   design.css — Globales Design-Token-System
   Zeiterfassungs-Plattform | Turquoise-Palette
   =====================================================================

   FARBEN ÄNDERN: Nur die :root-Variablen anpassen — alle Komponenten
   ziehen die Werte automatisch nach. Pro Mandant kann das Admin-Backend
   die CSS-Vars per <style>-Injection in layout_header.php überschreiben.

   SCHRIFTEN: Syne (Headlines) · DM Sans (Body) · JetBrains Mono (Zeiten)
   ===================================================================== */

/* -----------------------------------------------------------------
   1. DESIGN TOKENS — Turquoise-Palette
   ----------------------------------------------------------------- */
:root {
    /* Rohe Palette (aus der Vorgabe) */
    --pal-turquoise:  #40E0D0;   /* turquoise  */
    --pal-t1:         #00F5FF;   /* turquoise1 */
    --pal-t2:         #00E5EE;   /* turquoise2 */
    --pal-t3:         #00C5CD;   /* turquoise3 */
    --pal-t4:         #00868B;   /* turquoise4 */

    /* Semantische Brand-Rollen (überschreibbar per Mandant) */
    --brand-primary:   var(--pal-turquoise);
    --brand-light:     var(--pal-t1);
    --brand-mid:       var(--pal-t2);
    --brand-dark:      var(--pal-t3);
    --brand-deep:      var(--pal-t4);

    /* Oberflächen & Hintergründe */
    --bg-page:         #ffffff;
    --bg-surface:      #f0fdfc;   /* Hauch Teal-Weiß für Sektionen */
    --bg-surface-2:    #e6fafa;   /* etwas satter für Cards */
    --bg-dark:         var(--brand-deep);   /* Footer, dunkle Sektionen */

    /* Text */
    --text-primary:    #0a2122;   /* Teal-Schwarz */
    --text-muted:      #4d7c80;
    --text-on-dark:    #e0fafa;
    --text-on-accent:  #ffffff;

    /* Rahmen */
    --border-light:    #b2ebf2;
    --border-mid:      var(--brand-dark);

    /* Typografie */
    --font-heading:    'Syne', sans-serif;
    --font-body:       'DM Sans', sans-serif;
    --font-mono:       'JetBrains Mono', monospace;

    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;
    --text-4xl:   2.25rem;
    --text-5xl:   3rem;

    /* Abstände */
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-7:   1.75rem;   /* 28px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-24:  6rem;      /* 96px */

    /* Radien */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   32px;
    --radius-pill: 999px;

    /* Schatten */
    --shadow-sm:   0 1px 4px rgba(0,134,139,.08);
    --shadow-md:   0 4px 16px rgba(0,134,139,.12);
    --shadow-lg:   0 12px 40px rgba(0,134,139,.16);
    --shadow-glow: 0 0 0 3px rgba(64,224,208,.30);
    --shadow-btn:  0 4px 14px rgba(0,134,139,.35);

    /* Übergänge */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* Layout */
    --container-max: 1100px;
    --app-max:        980px;
}

/* -----------------------------------------------------------------
   2. RESET & BASIS
   ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Globaler Overflow-Schutz:
   Nur Text-Elemente bekommen overflow-wrap — KEIN globales min-width:0,
   das würde Topbar und andere Flex-Layouts zerstören. */
p, span, h1, h2, h3, h4, h5, h6, td, th, label {
    overflow-wrap: break-word;
    word-break:    break-word;
}
input, select, textarea {
    max-width:   100%;
    box-sizing:  border-box;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family:      var(--font-body);
    font-size:        var(--text-base);
    line-height:      1.6;
    color:            var(--text-primary);
    background-color: #ffffff;
    background-image:
        radial-gradient(ellipse 85% 55% at 8%   0%,   rgba(0,245,255,.05)  0%, transparent 55%),
        radial-gradient(ellipse 60% 65% at 92% 100%,  rgba(0,197,205,.06)  0%, transparent 55%);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family:  var(--font-heading);
    line-height:  1.15;
    color:        var(--text-primary);
    font-weight:  700;
}

a { color: var(--brand-deep); text-decoration: none; }
a:hover { color: var(--brand-dark); }

img, svg { display: block; max-width: 100%; }

/* -----------------------------------------------------------------
   3. LAYOUT-HELFER
   ----------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.app-container {
    width: 100%;
    max-width: var(--app-max);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

/* -----------------------------------------------------------------
   4. SCHALTFLÄCHEN
   ----------------------------------------------------------------- */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         0.65rem 1.4rem;
    font-family:     var(--font-body);
    font-size:       var(--text-sm);
    font-weight:     500;
    line-height:     1;
    border-radius:   var(--radius-md);
    border:          2px solid transparent;
    cursor:          pointer;
    transition:      background var(--transition-fast),
                     color var(--transition-fast),
                     border-color var(--transition-fast),
                     box-shadow var(--transition-fast),
                     transform var(--transition-fast);
    text-decoration: none;
    white-space:     nowrap;
    user-select:     none;
}
.btn:active { transform: translateY(1px); }

/* Primär */
.btn-primary {
    background: var(--brand-deep);
    color:      var(--text-on-accent);
    border-color: var(--brand-deep);
    box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--text-on-accent);
    box-shadow: var(--shadow-lg);
}

/* Ghost / Outline */
.btn-ghost {
    background:  transparent;
    color:       var(--brand-deep);
    border-color: var(--border-mid);
}
.btn-ghost:hover {
    background:  var(--bg-surface);
    border-color: var(--brand-deep);
    color: var(--brand-deep);
}

/* Licht (auf dunklem Hintergrund) */
.btn-light {
    background:  rgba(255,255,255,.15);
    color:       #fff;
    border-color: rgba(255,255,255,.3);
    backdrop-filter: blur(8px);
}
.btn-light:hover {
    background:  rgba(255,255,255,.25);
    color: #fff;
}

.btn-lg {
    padding:     0.85rem 1.8rem;
    font-size:   var(--text-base);
    border-radius: var(--radius-lg);
}
.btn-sm {
    padding:    0.45rem 0.9rem;
    font-size:  var(--text-xs);
    border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------------
   5. KARTEN
   ----------------------------------------------------------------- */
.card {
    background:    var(--bg-page);
    border:        1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    box-shadow:    var(--shadow-sm);
}
.card-elevated {
    box-shadow: var(--shadow-md);
}

/* -----------------------------------------------------------------
   6. FORMULARE
   ----------------------------------------------------------------- */
.form-group {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
    min-width:      0;          /* verhindert Overflow in Grid-Zellen */
}
.form-group + .form-group { margin-top: var(--space-4); }

/* In Grid-Containern: kein zusätzlicher margin-top auf Geschwister-Gruppen */
.form-row   > .form-group,
.form-row-3 > .form-group,
.form-row-auto > .form-group { margin-top: 0; }

/* ── Formular-Grid-Utilities ──────────────────────────────────── */
/* Immer align-items:start damit unterschiedlich hohe Labels
   die Inputs NICHT vertikal verschieben */
.form-row {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   var(--space-4);
    align-items:           start;
}
.form-row-3 {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   var(--space-4);
    align-items:           start;
}
.form-row-auto {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   var(--space-4);
    align-items:           start;
}
/* Responsiv: unter 600px alles einspaltig */
@media (max-width: 600px) {
    .form-row,
    .form-row-3,
    .form-row-auto { grid-template-columns: 1fr; }
}

.form-label {
    font-size:   var(--text-sm);
    font-weight: 500;
    color:       var(--text-primary);
}

.form-control {
    width:         100%;
    min-width:     0;           /* Grid-Overflow verhindern */
    box-sizing:    border-box;  /* padding in width einschließen */
    padding:       0.65rem 0.9rem;
    font-family:   var(--font-body);
    font-size:     var(--text-base);
    color:         var(--text-primary);
    background:    var(--bg-page);
    border:        1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    outline:       none;
    transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* Textarea: kein horizontales Resize über Container hinaus */
textarea.form-control { resize: vertical; min-height: 80px; }
/* Select: immer volle Breite */
select.form-control   { appearance: auto; }
.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow:   var(--shadow-glow);
}
.form-control::placeholder { color: var(--text-muted); }

.form-error {
    font-size: var(--text-xs);
    color:     #dc2626;
    margin-top: var(--space-1);
}

.form-hint {
    font-size:   var(--text-xs);
    color:       var(--text-muted);
    line-height: 1.4;
    margin-top:  2px;
}

/* -----------------------------------------------------------------
   7. BADGES & TAGS
   ----------------------------------------------------------------- */
.badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       2px 10px;
    font-size:     var(--text-xs);
    font-weight:   500;
    border-radius: var(--radius-pill);
}
.badge-primary { background: var(--bg-surface-2); color: var(--brand-deep); }
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef9c3; color: #854d0e; }
.badge-danger  { background: #fee2e2; color: #991b1b; }

/* -----------------------------------------------------------------
   8. APP-NAVIGATION (layout_header.php)
   ----------------------------------------------------------------- */
.topbar {
    position:       sticky;
    top:            0;
    z-index:        100;
    background:     rgba(255,255,255,.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom:  1px solid var(--border-light);
    height:         60px;
    display:        flex;
    align-items:    center;
    gap:            var(--space-6);
    padding-inline: var(--space-6);
    /* WICHTIG: overflow:visible damit Dropdown-Panels nicht abgeschnitten werden */
    overflow:       visible;
}

.topbar-brand {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size:   var(--text-lg);
    color:       var(--brand-deep);
    text-decoration: none;
    flex-shrink: 0;
}
.topbar-brand img { height: 32px; width: auto; }

.topbar-nav {
    display:   flex;
    gap:       var(--space-1);
    flex:      1;
    list-style: none;
}
.topbar-nav a {
    display:       block;
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size:     var(--text-sm);
    font-weight:   500;
    color:         var(--text-muted);
    transition:    background var(--transition-fast), color var(--transition-fast);
}
.topbar-nav a:hover {
    background: var(--bg-surface);
    color:      var(--text-primary);
}
.topbar-nav a.active {
    background: var(--bg-surface-2);
    color:      var(--brand-deep);
}

.topbar-user {
    display:        flex;
    align-items:    center;
    gap:            var(--space-3);
    font-size:      var(--text-sm);
    color:          var(--text-muted);
    flex-shrink:    0;
    white-space:    nowrap;          /* Name bricht nicht um */
    overflow:       visible;         /* Dropdown-Panel nicht abschneiden */
    position:       relative;        /* Stacking-Context für Dropdowns */
}
/* Navigations-Links nie überlaufen lassen */
.topbar-nav {
    overflow: visible;               /* Dropdowns aus der Nav heraus sichtbar */
    flex-wrap: wrap;
}

/* App-Main-Bereich */
.app-main {
    max-width:    var(--app-max);
    margin-inline: auto;
    padding:      var(--space-8) var(--space-6);
}

/* -----------------------------------------------------------------
   9. ALERT / FLASH MESSAGES
   ----------------------------------------------------------------- */
.alert {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-3);
    padding:       var(--space-4);
    border-radius: var(--radius-md);
    font-size:     var(--text-sm);
    margin-bottom: var(--space-4);
}
.alert-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.alert-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.alert-info    { background: var(--bg-surface); border: 1px solid var(--border-light); color: var(--brand-deep); }

/* -----------------------------------------------------------------
   10. KEYFRAME-ANIMATIONEN (genutzt in Landing + Timer)
   ----------------------------------------------------------------- */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rotateCW  { to { transform: rotate(360deg); } }
@keyframes rotateCCW { to { transform: rotate(-360deg); } }
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(64,224,208,.4); }
    50%       { box-shadow: 0 0 0 10px rgba(64,224,208,0); }
}
@keyframes shimmer {
    from { background-position: -200% center; }
    to   { background-position:  200% center; }
}

/* -----------------------------------------------------------------
   11. ZEITANZEIGE — mono für alle numerischen Zeitwerte
   ----------------------------------------------------------------- */
.time-value {
    font-family: var(--font-mono);
    font-weight: 500;
    color:       var(--brand-deep);
    letter-spacing: 0.04em;
}
.time-value-lg {
    font-family: var(--font-mono);
    font-size:   var(--text-4xl);
    font-weight: 500;
    color:       var(--brand-deep);
    letter-spacing: 0.06em;
}

/* -----------------------------------------------------------------
   12. RESPONSIVE GRUNDREGELN
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --text-5xl: 2.25rem;
        --text-4xl: 1.875rem;
        --text-3xl: 1.5rem;
    }
    .topbar-nav { display: none; } /* Mobile Nav kommt in Phase 4 */
    .app-main   { padding: var(--space-4) var(--space-4); }
}