/* ================================================================
   PERSPECTIVE CONNECT — Design System V1 (Magenta)
   ================================================================ */

/* —— Reset —— */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* V6 DESIGN-REGELN:
       - Seitenhintergrund: #EDF1F5 (blaugrau) — KEIN Rosa/Pink
       - Buttons: IMMER Outline (weißer BG, farbiger Border) — KEINE gefüllten Buttons
       - Tabellen-Header: #a91b6e (Magenta) mit weißem Text
       - Stat-Cards: Weißer BG, grauer Border #D1D9E0, Magenta-Zahl
       - Badges: border-radius 20px, heller BG + Border
       - Modals: max 480px, Outline-Buttons
       - Cards: Weißer BG, border-radius 12px, dezenter Shadow
    */

    /* Kernfarben */
    --color-connect-magenta:   #a91b6e;
    --color-primary:         #a91b6e;
    --color-primary-dark:    #7a1450;
    --color-primary-light:   #c94d92;
    --color-primary-bg:      #f8edf4;
    --color-primary-mid:     #e8c0d8;

    /* Hintergründe */
    --color-bg-page:         #EDF1F5;
    --color-bg-card:         #FFFFFF;
    --color-bg-table-header: #f8edf4;
    --color-bg-table-alt:    #F7F8FA;
    --color-bg-table-hover:  #F5D5E8;
    --color-bg-zebra:        #F3F4F6;
    --color-bg-footer:       #fafbfc;

    /* Text */
    --color-text-primary:    #1A1A2E;
    --color-text-secondary:  #4A5568;
    --color-text-muted:      #5a6a7e;
    --color-text-on-primary: #FFFFFF;

    /* Status */
    --color-success:     #1a7a4a;
    --color-success-bg:  #e9f7ef;
    --color-warning:     #e67e00;
    --color-warning-bg:  #fef3e6;
    --color-danger:      #c0392b;
    --color-danger-bg:   #fdf0ef;
    --color-info:        #0077aa;
    --color-info-bg:     #e6f3fa;
    --color-archive:     #5a6a7e;
    --color-archive-bg:  #eaeef2;

    /* Export-Buttons */
    --color-pdf:    #c0392b;
    --color-word:   #1f6bb5;
    --color-excel:  #1a7a4a;
    --color-zip:    #5a4a8a;
    --color-print:  #2e2e2e;
    --color-email:  #0077aa;
    --color-fax:    #445566;
    --color-sofort: #B8860B;

    /* Export-Button Hintergründe */
    --color-neutral:     #6b7f94;
    --color-neutral-bg:  #edf1f5;
    --color-pdf-bg:      #fdf0ef;
    --color-word-bg:     #e6f0fa;
    --color-excel-bg:    #e9f7ef;
    --color-zip-bg:      #f0ecf7;
    --color-print-bg:    #ececec;
    --color-email-bg:    #e6f3fa;
    --color-fax-bg:      #e8ecf0;
    --color-sofort-bg:   #fef6e0;

    /* Rahmen */
    --color-border:       #D1D9E0;
    --color-border-light: #E5E7EB;
    --color-border-focus: #a91b6e;

    /* Schatten */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:   0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg:   0 6px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06);

    /* Abstände */
    --spacing-xs:  4px;
    --spacing-sm:  8px;
    --spacing-md:  16px;
    --spacing-lg:  24px;
    --spacing-xl:  32px;

    /* Radien */
    --radius-sm:  5px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;

    /* Typografie */
    --font-family: 'DM Sans', system-ui, -apple-system, sans-serif;

    /* Layout */
    --sidebar-width:     220px;
    --header-height:     50px;
    --app-padding:       12px;
    --content-max-width: 1400px;
}

body {
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--color-text-primary);
    background: #EDF1F5;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    padding: var(--app-padding);
    gap: var(--app-padding);
    height: 100vh;
    overflow: hidden;
}

body.embed-mode {
    display: block;
    padding: 0;
    gap: 0;
    height: auto;
    overflow: auto;
    background: var(--color-bg-page);
}

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


/* ================================================================
   HEADER — Abgerundet, dunkles Magenta
   ================================================================ */

.header {
    background: #7a1450;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    padding: 0 16px;
    height: 58px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
    z-index: 1100;
}

/* Home-Button links — weiss mit Magenta-Icon */
.header-home {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 0;
    transition: all 0.15s;
}
.header-home:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}
.header-home.header-home-inv {
    background: #FFFFFF;
    color: #a91b6e;
}
.header-home.header-home-inv:hover {
    background: #f0e8ed;
    color: #a91b6e;
}

/* Brand neben Home-Button */
.header-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 12px;
}
.header-brand .brand-text {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    white-space: nowrap;
}
.header-brand .brand-text span {
    color: #ffffff;
    font-weight: 700;
}

/* Zentrierter Bereich: KW + Datum + Uhrzeit */
.header-center {
    flex: 1;
    text-align: center;
    color: #fff;
    line-height: 1.3;
}
.header-center-date {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.header-center-date .kw {
    font-weight: 700;
}
.header-center-time {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 1px;
}

/* Rechte Seite: Logout */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.header-logout {
    width: 32px;
    height: 32px;
    background: #e53e3e;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s;
}
.header-logout:hover {
    background: #c53030;
    color: #fff;
}


/* ================================================================
   LAYOUT — Flex mit Sidebar + Content
   ================================================================ */

.main-wrap {
    display: flex;
    gap: var(--app-padding);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

.content-main {
    padding: var(--spacing-xl) 28px 40px;
    flex: 1;
    max-width: var(--content-max-width);
}


/* ================================================================
   NO-SIDEBAR Modus (z.B. Karten-Editor)
   ================================================================ */
.no-sidebar .sidebar { display: none; }
.no-sidebar .content-main { max-width: 100%; }

/* ================================================================
   SIDEBAR — Abgerundet, dunkler Magenta-Gradient
   ================================================================ */

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100%;
    background: linear-gradient(180deg, #7a1450 0%, #5c1040 100%);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    overflow: hidden;
}

/* User-Bereich oben */
.sidebar-user {
    padding: 18px 16px 14px;
    border-bottom: 3px solid rgba(255,255,255,0.15);
}
.sidebar-user .name {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}
.sidebar-user .role {
    color: #ffffff;
    font-size: 12px;
    margin-top: 2px;
}

/* Navigation – Scrollbar unsichtbar */
.nav {
    flex: 1;
    padding: 10px 0;
    overflow-y: auto;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
.nav::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

/* Kategorie-Label (gelb) */
.nav-category {
    color: #fdffd8;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 14px 16px 4px;
}

/* Haupt-Menüpunkt */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: #e8f0f7;
    font-size: 12px;
    font-weight: 550;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    border-radius: 0;
    position: relative;
}
.nav-item:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.nav-item.active {
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 600;
}
.nav-item .icon {
    width: 18px;
    text-align: center;
    font-size: 13px;
    opacity: 0.85;
    flex-shrink: 0;
}
.nav-item .label {
    flex: 1;
}

/* Chevron */
.nav-item .chevron {
    font-size: 10px;
    opacity: 0.6;
    transition: transform 0.2s;
}
.nav-item.open .chevron {
    transform: rotate(90deg);
}

/* Sub-Menü */
.nav-sub {
    display: none;
    background: rgba(0,0,0,0.12);
}
.nav-sub.open {
    display: block;
}
.nav-sub-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 44px;
    color: #e8f0f7;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.nav-sub-item:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.nav-sub-item.active {
    color: #fff;
    font-weight: 600;
}
.nav-sub-item::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c94d92;
    flex-shrink: 0;
    margin-right: 2px;
}

/* Sub-Sub-Menü (z.B. Tools innerhalb Rechnungsverwaltung) */
.nav-sub-parent .chevron-mini {
    font-size: 8px;
    opacity: 0.5;
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: auto;
}
.nav-sub-parent.open .chevron-mini {
    transform: rotate(90deg);
}
.nav-sub-sub {
    display: none;
    background: rgba(0,0,0,0.08);
}
.nav-sub-sub.open {
    display: block;
}
.nav-sub-sub-item {
    padding-left: 58px !important;
}

/* Trennlinie (optional) */
.nav-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 8px 16px;
}


/* ================================================================
   FOOTER
   ================================================================ */

.site-footer {
    padding: 14px 28px;
    border-top: 1px solid var(--color-border-light);
    background: white;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #94a3b8;
}


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

.card {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-bottom: var(--spacing-lg);
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border-light);
}

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

.card-body {
    padding: var(--spacing-xl);
}


/* ================================================================
   TABELLEN
   ================================================================ */

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.data-table thead th {
    background: #a91b6e;
    color: #FFFFFF;
    font-weight: 600;
    padding: 12px 16px;
    text-align: left;
    white-space: nowrap;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: none;
}

.data-table thead th:first-child {
    border-radius: var(--radius-md) 0 0 0;
}

.data-table thead th:last-child {
    border-radius: 0 var(--radius-md) 0 0;
}

.data-table tbody td {
    padding: 13px 16px;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.data-table tbody tr:nth-child(even) {
    background: var(--color-bg-table-alt);
}

.data-table tbody tr:hover {
    background: #f8f9fa;
}

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

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

.data-table .amount,
.data-table .number {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 600;
}

.action-buttons {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: center;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.btn-icon:hover {
    background: var(--color-primary-bg);
}

.btn-icon-danger:hover {
    background: var(--color-danger-bg);
}


/* ================================================================
   BUTTONS — V5 KOMPLETT (NUR OUTLINE)
   Referenz: _docs/design-system-v5-buttons-komplett.html
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid #D1D9E0;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, opacity .15s, transform .1s;
    line-height: 1;
}
.btn:hover { opacity: .88; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn i { font-size: .9em; }

/* ── Größen ── */
.btn-xl  { padding: 13px 22px; font-size: 15px; }
.btn-lg  { padding: 10px 18px; font-size: 13.5px; }
.btn-md  { padding: 8px 13px;  font-size: 13px; }
.btn-sm  { padding: 5px 9px;   font-size: 12px; }
.btn-xs  { padding: 3px 7px;   font-size: 11px; }

/* ── Icon-only Größen ── */
.btn-ico-lg { padding: 9px 11px;  font-size: 14px; }
.btn-ico-md { padding: 7px 9px;   font-size: 13px; }
.btn-ico-sm { padding: 4px 7px;   font-size: 12px; }
.btn-ico-xs { padding: 3px 5px;   font-size: 11px; }
.btn-ico    { padding: 5px 7px;   font-size: 12px; }

/* ── HAUPT-BUTTONS ── */
.btn-std { background: #FFFFFF; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-std:hover { background: var(--color-primary); color: #FFFFFF; }

.btn-neutral { background: #FFFFFF; color: var(--color-neutral); border: 1.5px solid var(--color-neutral); }
.btn-neutral:hover { background: var(--color-neutral); color: #FFFFFF; }

.btn-neu { background: #FFFFFF; color: var(--color-primary); border: 1.5px solid var(--color-primary); border-radius: var(--radius-md); font-family: var(--font-family); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: all .15s; line-height: 1; white-space: nowrap; }
.btn-neu:hover { background: var(--color-primary); color: #FFFFFF; }
.btn-neu:active { transform: scale(.97); }
.btn-neu.btn-xl  { padding: 13px 22px; font-size: 15px; }
.btn-neu.btn-lg  { padding: 10px 18px; font-size: 13.5px; }
.btn-neu.btn-md  { padding: 8px 14px;  font-size: 13px; }
.btn-neu.btn-sm  { padding: 6px 12px;  font-size: 12px; }
.btn-neu.btn-xs  { padding: 4px 8px;   font-size: 11px; }

/* ── STATUS-BUTTONS (alle Outline) ── */
.btn-success { background: #FFFFFF; color: var(--color-success); border: 1.5px solid var(--color-success); }
.btn-success:hover { background: var(--color-success); color: #FFFFFF; }

.btn-danger { background: #FFFFFF; color: var(--color-danger); border: 1.5px solid var(--color-danger); }
.btn-danger:hover { background: var(--color-danger); color: #FFFFFF; }

.btn-warning { background: #FFFFFF; color: var(--color-warning); border: 1.5px solid var(--color-warning); }
.btn-warning:hover { background: var(--color-warning); color: #FFFFFF; }

.btn-info { background: #FFFFFF; color: var(--color-info); border: 1.5px solid var(--color-info); }
.btn-info:hover { background: var(--color-info); color: #FFFFFF; }

.btn-archive { background: #FFFFFF; color: var(--color-archive); border: 1.5px solid var(--color-archive); }
.btn-archive:hover { background: var(--color-archive); color: #FFFFFF; }

/* ── EXPORT-BUTTONS (alle Outline) ── */
.btn-pdf { background: #FFFFFF; color: var(--color-pdf); border: 1.5px solid var(--color-pdf); }
.btn-pdf:hover { background: var(--color-pdf); color: #FFFFFF; }

.btn-word { background: #FFFFFF; color: var(--color-word); border: 1.5px solid var(--color-word); }
.btn-word:hover { background: var(--color-word); color: #FFFFFF; }

.btn-excel { background: #FFFFFF; color: var(--color-excel); border: 1.5px solid var(--color-excel); }
.btn-excel:hover { background: var(--color-excel); color: #FFFFFF; }

.btn-zip { background: #FFFFFF; color: var(--color-zip); border: 1.5px solid var(--color-zip); }
.btn-zip:hover { background: var(--color-zip); color: #FFFFFF; }

.btn-print { background: #FFFFFF; color: var(--color-print); border: 1.5px solid var(--color-print); }
.btn-print:hover { background: var(--color-print); color: #FFFFFF; }

.btn-email { background: #FFFFFF; color: var(--color-email); border: 1.5px solid var(--color-email); }
.btn-email:hover { background: var(--color-email); color: #FFFFFF; }

.btn-fax { background: #FFFFFF; color: var(--color-fax); border: 1.5px solid var(--color-fax); }
.btn-fax:hover { background: var(--color-fax); color: #FFFFFF; }

.btn-sofort { background: #FFFFFF; color: var(--color-sofort); border: 1.5px solid var(--color-sofort); }
.btn-sofort:hover { background: var(--color-sofort); color: #FFFFFF; }


/* ================================================================
   FORMULARE
   ================================================================ */

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.form-control {
    width: 100%;
    padding: 9px 12px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-bg-card);
    border: 1.5px solid #D1D9E0;
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(169, 27, 110, 0.12);
}

.form-control::placeholder {
    color: var(--color-text-muted);
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234A5568' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.form-row {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1;
    min-width: 200px;
}


/* ================================================================
   BADGES
   ================================================================ */

.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success { background: #e8f5e9; color: #1a7a4a; border: 1px solid #1a7a4a; }
.badge-warning { background: #fff3e0; color: #e67e00; border: 1px solid #e67e00; }
.badge-danger  { background: #faf0f5; color: #c0392b; border: 1px solid #c0392b; }
.badge-info    { background: #e6f3fa; color: #0077aa; border: 1px solid #0077aa; }


/* ================================================================
   ALERTS
   ================================================================ */

.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid;
}

.alert-success { background: var(--color-success-bg); color: #1E7E45; border-left-color: var(--color-success); }
.alert-warning { background: var(--color-warning-bg); color: #92400E; border-left-color: var(--color-warning); }
.alert-danger  { background: var(--color-danger-bg);  color: #991B1B; border-left-color: var(--color-danger); }
.alert-info    { background: var(--color-info-bg);    color: var(--color-primary-dark); border-left-color: var(--color-primary); }


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

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #D1D9E0;
    text-align: left;
}

.stat-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #a91b6e;
    line-height: 1.1;
}

.stat-detail {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 6px;
}


/* ================================================================
   ACTION-BAR — Kompakte Zeile über Tabellen (Suche + Buttons)
   ================================================================ */

.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.action-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}

.action-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.action-bar .search-input {
    max-width: 300px;
    width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font-family);
    background: #fff;
}

.action-bar .search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(169,27,110,0.15);
}


/* ================================================================
   FILTER-BAR — Leichter Container für Filter mit Dropdowns
   ================================================================ */

.filter-bar {
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}


/* ================================================================
   FORM-HINT — Kleiner Hilfetext unter Feldern
   ================================================================ */

.form-hint {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}


/* ================================================================
   DATE-INPUT Placeholder
   ================================================================ */

.date-input::placeholder {
    color: #b0b8c4;
    font-style: italic;
    font-size: 12px;
}


/* btn-neu / btn-std — jetzt im V5 BUTTONS Block oben definiert */


/* ================================================================
   LEGACY VARIABLEN (Aliase aus master-styles.css)
   Werden von Legacy-Komponenten referenziert.
   TODO: Schrittweise durch V5-Variablen ersetzen
   ================================================================ */
:root {
    /* Primary Colors → Alias */
    --primary-blue: var(--color-primary);
    --primary-blue-dark: var(--color-primary-dark);
    --primary-blue-light: rgba(169, 27, 110, 0.1);

    /* Status Colors → Alias */
    --success-green: var(--color-success);
    --success-light: rgba(26, 122, 74, 0.1);
    --error-red: var(--color-danger);
    --error-light: rgba(192, 57, 43, 0.1);
    --warning-orange: var(--color-warning);
    --warning-light: rgba(230, 126, 0, 0.1);
    --info-purple: #9C27B0;
    --info-light: rgba(156, 39, 176, 0.1);

    /* Text Colors (Legacy) */
    --text-dark: #333333;
    --text-medium: #666666;
    --text-light: #888888;
    --text-muted: #999999;

    /* Border Colors (Legacy) */
    --border-light: #e8e8e8;
    --border-medium: #e0e0e0;
    --border-dark: #d0d0d0;

    /* Background Colors (Legacy) */
    --background-light: #f9f9f9;
    --background-white: #ffffff;
    --background-gray: #f5f5f5;

    /* Shadows (Legacy) */
    --shadow-light: 0 2px 8px rgba(169, 27, 110, 0.08);
    --shadow-medium: 0 4px 12px rgba(169, 27, 110, 0.10);
    --shadow-strong: 0 8px 24px rgba(169, 27, 110, 0.16);
    --shadow-primary: 0 4px 12px rgba(169, 27, 110, 0.15);

    /* Transitions (Legacy) */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Border Radius → Alias */
    --radius-small: var(--radius-sm);
    --radius-medium: var(--radius-md);
    --radius-large: var(--radius-lg);

    /* Spacing (Legacy — feste Werte, NICHT die V5-Werte überschreiben) */
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
}


/* ================================================================
   LEGACY KOMPONENTEN (aus master-styles.css übernommen)
   TODO: Schrittweise in V5-Komponenten umbauen
   ================================================================ */

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--background-light); }
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-small); }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* --- Utility Classes --- */
.container-fluid { width: 100%; padding: 0 20px; }
.container-centered, .main-container, .container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}
.container-centered { flex-grow: 1; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.font-semibold { font-weight: 600; }
.text-primary { color: var(--primary-blue); }

/* --- Cockpit & Dashboard System --- */
.statistik-container {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 20px;
    margin-bottom: 20px;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
}

.chart-box {
    background: white;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-light);
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}
.chart-box:hover {
    box-shadow: var(--shadow-primary);
    transform: translateY(-2px);
}
.chart-box:has(.summary-box) { align-self: start; }
.is-collapsed-item { align-self: start; }

.chart-header {
    background: var(--color-primary-bg, #f8edf4);
    color: var(--color-primary-dark, #7a1450);
    padding: 0 20px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-primary-mid, #e8c0d8);
}
.chart-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary-dark, #7a1450);
}
.chart-header.header-light {
    background: #f8f9fa;
    border-bottom: 1px solid var(--border-medium);
}
.chart-header.header-light h3 {
    color: var(--text-dark);
    text-shadow: none;
}

.chart-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.summary-box.chart-content { flex-grow: 0; }
.chart-content.no-padding { padding: 0; }
.collapsed .chart-content { max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.collapse-icon { color: var(--color-primary-dark, #7a1450); font-size: 16px; transition: transform 0.3s ease; }
.header-light .collapse-icon { color: var(--text-medium); }
.collapsed .collapse-icon { transform: rotate(180deg); }

.scrollable-content { max-height: 65vh; overflow-y: auto; }
.linke-spalte, .rechte-spalte { display: contents; }
.main-chart-wrapper, .sub-chart-wrapper { position: relative; flex-grow: 1; }

/* Form Layout für Filter in chart-content */
.chart-content form.d-flex {
    display: flex;
    gap: 20px;
    align-items: end;
    flex-wrap: wrap;
}
.chart-content form.d-flex .form-group {
    margin-bottom: 0;
    min-width: 200px;
}
.chart-content form.d-flex .form-group:first-child {
    flex-grow: 1;
    min-width: 250px;
}

/* --- Statistik-Tabelle --- */
.statistik-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.statistik-tabelle th {
    background: transparent;
    color: var(--text-dark);
    font-weight: 700;
    padding: 12px 20px;
    text-align: left;
    border-bottom: 2px solid var(--border-light);
    font-size: 14px;
}
.statistik-tabelle th:nth-child(2) { text-align: center; }
.statistik-tabelle th:nth-child(3) { text-align: right; }
.statistik-tabelle td {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    background: transparent;
}
.statistik-tabelle tbody tr:nth-of-type(odd) { background-color: white; }
.statistik-tabelle tbody tr:nth-of-type(even) { background-color: rgba(169, 27, 110, 0.06); }
.statistik-tabelle td:nth-child(2) { text-align: center; }
.statistik-tabelle tr:last-child td { border-bottom: none; }

/* Zusammenfassung */
.summary-box { background-color: #FFF9E1; border-color: #FFECB3; }
.summary-box .chart-content { padding: 10px; background-color: #FFF9E1; }
.summary-box .statistik-tabelle tbody tr { background-color: transparent !important; }
.summary-box .statistik-tabelle td { border: none; font-weight: 700; }
.text-gruen, .row-gruen td { color: var(--success-green); }
.text-rot, .row-rot td { color: var(--error-red); }
.total-row td { color: var(--text-dark); }

/* --- Filter-Section --- */
.filter-section {
    background: white;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-light);
    margin-bottom: 20px;
    overflow: hidden;
}
.filter-header {
    background: var(--color-primary-bg, #f8edf4);
    color: var(--color-primary-dark, #7a1450);
    padding: 0 20px;
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-primary-mid, #e8c0d8);
}
.filter-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary-dark, #7a1450);
}
.filter-content {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 180px 180px 100px 100px;
    gap: 16px;
    align-items: end;
    background: white;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.filter-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

/* --- Form-Input/Select/Textarea System --- */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    background: white;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-family: inherit;
    height: 40px;
    box-sizing: border-box;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px var(--primary-blue-light);
}
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: #9ca3af;
}
.form-input[type="date"] { color: #374151; cursor: pointer; }
.form-input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; padding: 4px; border-radius: 4px; }
.form-input[type="date"]::-webkit-calendar-picker-indicator:hover { background-color: var(--primary-blue-light); }

/* --- Tiles-System (Dashboards) --- */
.tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}
.tile {
    background: white;
    border-radius: var(--radius-large);
    padding: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 120px;
}
.tile:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-primary);
    border-color: var(--primary-blue);
}
.tile-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    flex-shrink: 0;
}
.tile-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}
.tile-description {
    font-size: 16px;
    color: var(--text-medium);
    line-height: 1.4;
}
.tile[data-href] { cursor: pointer; }

/* --- Table-Section --- */
.table-section {
    background: white;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-light);
    overflow: hidden;
    margin-bottom: 20px;
}
.table-header {
    background: var(--color-primary-bg, #f8edf4);
    color: var(--color-primary-dark, #7a1450);
    padding: 0 20px;
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-primary-mid, #e8c0d8);
}
.table-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary-dark, #7a1450);
}
.table-container {
    background: var(--background-white);
    overflow: hidden;
}
.rechnungs-zeile {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* --- Status-Badges --- */
.status-badge {
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.status-active {
    background: linear-gradient(135deg, var(--primary-blue-light), rgba(169, 27, 110, 0.15));
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue-light);
}
.status-badge.status-active {
    background: var(--success-light);
    color: var(--success-green);
    border: 1px solid var(--success-green);
}
.status-inactive {
    background: var(--error-light);
    color: var(--error-red);
}
.status-pending {
    background: var(--warning-light);
    color: var(--warning-orange);
}

/* --- Content-Header --- */
.content-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-light);
}
.content-title {
    margin: 0;
    margin-left: 20px;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
}

/* --- Action-Platform --- */
.action-platform {
    background: white;
    border-radius: var(--radius-large);
    padding: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-light);
    margin-bottom: 30px;
}
.action-platform h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 10px;
}

/* --- Tab-System --- */
.header-actions-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 2.5rem;
    padding: 0 1rem;
}
.tab-navigation {
    display: flex;
    border-bottom: none;
    margin-bottom: -2px;
}
.tab-link {
    padding: 1rem 1.5rem;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #6c757d;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.tab-link:hover { color: var(--primary-blue); }
.tab-link.active {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}
.tab-content {
    display: none;
    animation: fadeIn 0.5s;
}
.tab-content.active { display: block; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Action-Btn System --- */
.action-button-group {
    display: flex;
    gap: 0.75rem;
}
.action-btn {
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: #343a40;
    font-size: 0.9rem;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.action-btn.edit-btn { border-color: var(--primary-blue); color: var(--primary-blue); }
.action-btn.edit-btn:hover { background-color: var(--primary-blue); color: #fff; }

/* --- Form-Card System --- */
.form-card {
    background-color: #D8DCE4;
    padding: 2rem 2.5rem;
    border-radius: 8px;
    border: 1px solid #c6cdd7;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}
.form-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary-dark, #7a1450);
    background-color: var(--color-primary-bg, #f8edf4);
    margin: -2rem -2.5rem 2rem -2.5rem;
    padding: 1rem 2.5rem;
    border-bottom: 1px solid var(--color-primary-mid, #e8c0d8);
    border-radius: 8px 8px 0 0;
}
.data-grid, .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem 2.5rem;
}
.data-block label {
    display: block;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.data-block p {
    font-size: 1.0rem;
    margin: 0;
    padding: 12px 14px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    min-height: 21px;
}
.form-group label {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}
.form-group input, .form-group select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus, .form-group select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.form-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
}
#stammdaten-form { display: none; }
#stammdaten-ansicht .data-block label {
    color: var(--primary-blue);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}
#stammdaten-ansicht .data-block p {
    background-color: #f9fafb;
    border: 1px solid #9ca3af;
    min-height: 45px;
    display: flex;
    align-items: center;
    font-size: 1rem;
    padding: 12px 14px;
    border-radius: 6px;
    margin: 0;
}

/* --- Dokumenten-Tab --- */
#drop-zone {
    border: 3px dashed #d0d7de;
    border-radius: 8px;
    padding: 50px;
    text-align: center;
    color: #6c757d;
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: #f8f9fa;
    margin-bottom: 2rem;
}
#drop-zone.dragover {
    border-color: var(--primary-blue);
    background-color: #e9f5ff;
    color: var(--primary-blue);
}
#drop-zone i { font-size: 3rem; margin-bottom: 1rem; display: block; }
.dokumenten-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.dokumenten-header h3 { margin: 0; font-size: 1.2rem; color: #004a99; }
.dokumenten-liste { list-style: none; padding: 0; }
.folder-header, .file-item { display: flex; align-items: center; padding: 10px; border-radius: 6px; margin-bottom: 5px; transition: background-color 0.2s; }
.folder-header { background-color: #f8f9fa; cursor: pointer; font-weight: bold; }
.file-item { background-color: #fff; border: 1px solid #eef2f5; }
.item-name { flex-grow: 1; }
.item-date { font-size: 0.9em; color: #6c757d; margin-right: 15px; }
.item-actions a { color: #007bff; text-decoration: none; font-weight: 600; }
.toggle-icon, .item-icon { margin-right: 10px; width: 20px; text-align: center; color: #6c757d; }
.folder-header .item-icon { color: #007bff; }

/* --- Zeitnachweis-Tab --- */
.monats-block { margin-bottom: 2.5rem; }
.monats-header { font-size: 1.8rem; color: var(--primary-blue); margin: 0 0 1.5rem 0; padding-bottom: 0.75rem; border-bottom: 2px solid #e0e0e0; }
.einsatz-liste { list-style: none; padding: 0; }
.einsatz-item { display: grid; grid-template-columns: 100px 1fr 150px 180px; gap: 1.5rem; align-items: center; padding: 1rem; background-color: #fff; border: 1px solid #eef2f5; border-radius: 6px; margin-bottom: 0.75rem; }
.einsatz-datum { font-weight: bold; font-size: 1.1rem; }
.einsatz-kunde { font-weight: 500; }
.einsatz-zeit, .einsatz-stunden { text-align: right; color: #343a40; }
.monats-summary { text-align: right; margin-top: 1rem; font-size: 1.2rem; font-weight: bold; padding-top: 1rem; border-top: 1px solid #e0e0e0; }

/* --- Verlauf-Tab --- */
.verlauf-liste { list-style: none; padding: 0; border-left: 3px solid var(--primary-blue); margin-left: 10px; }
.verlauf-item { padding: 1rem 1.5rem; margin-bottom: 1.5rem; position: relative; }
.verlauf-item::before { content: ''; position: absolute; left: -11px; top: 18px; height: 16px; width: 16px; background-color: var(--primary-blue); border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--primary-blue); }
.verlauf-datum { display: block; font-weight: 600; color: #343a40; margin-bottom: 0.25rem; }
.verlauf-beschreibung { display: block; color: #495057; }
.verlauf-user { display: block; font-size: 0.85rem; color: #6c757d; margin-top: 0.5rem; }

/* --- Auswertung/Filter-Card --- */
.filter-card {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    box-shadow: none;
}
.auswertung-table { font-size: 14px; margin-bottom: 0; }
.auswertung-table th {
    font-weight: 600;
    color: var(--text-dark);
    background-color: #e9ecef;
    padding: 12px 15px;
}
.auswertung-table td { padding: 12px 15px; vertical-align: middle; }
.auswertung-table .text-danger { color: #dc3545 !important; font-weight: 700; }
.auswertung-table .text-success { color: #198754 !important; font-weight: 700; }
.auswertung-table .text-primary { color: var(--primary-blue) !important; }

/* --- Progress-Bar --- */
.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-blue), #6ab8e0);
    border-radius: 4px;
    transition: width 0.5s ease;
}
.progress-bar-inner.gruen { background: linear-gradient(90deg, #27ae60, #2ecc71); }
.progress-bar-inner.orange { background: linear-gradient(90deg, #f39c12, #f1c40f); }

/* --- Lohn-Cockpit --- */
.cockpit-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}
.cockpit-header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--background-white);
    padding: 16px 20px;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-light);
    margin-bottom: 20px;
}
.cockpit-header .content-header { margin: 0; padding: 0; border: none; }
.cockpit-header .filter-form {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cockpit-header .form-group { margin-bottom: 0; }
.cockpit-header .form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-medium);
    margin: 0 0 4px 4px;
}

.cockpit-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}
.kpi-tile {
    background: var(--background-white);
    border-radius: var(--radius-large);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-left: 5px solid;
    box-shadow: var(--shadow-light);
    transition: all 0.2s ease;
}
.kpi-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); }
.kpi-tile-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
}
.kpi-tile-content .value { font-size: 26px; font-weight: 700; line-height: 1.2; }
.kpi-tile-content .label { font-size: 14px; color: var(--text-medium); }
.kpi-tile.info { border-color: var(--primary-blue); }
.kpi-tile.info .kpi-tile-icon { background: var(--primary-blue); }
.kpi-tile.info .value { color: var(--primary-blue); }
.kpi-tile.success { border-color: var(--success-green); }
.kpi-tile.success .kpi-tile-icon { background: var(--success-green); }
.kpi-tile.success .value { color: var(--success-green); }
.kpi-tile.warning { border-color: var(--warning-orange); }
.kpi-tile.warning .kpi-tile-icon { background: var(--warning-orange); }
.kpi-tile.warning .value { color: var(--warning-orange); }

.workflow-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    background: var(--background-gray);
    padding: 20px;
    border-radius: var(--radius-large);
    margin-bottom: 32px;
}
.workflow-step {
    background: var(--background-white);
    padding: 20px;
    border-radius: var(--radius-medium);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-light);
}
.workflow-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.workflow-step-header .step-number {
    background: var(--primary-blue);
    color: white;
    font-weight: 700;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.workflow-step-header h4 { margin: 0; font-size: 16px; font-weight: 600; }
.workflow-step p { font-size: 14px; color: var(--text-medium); margin-bottom: 16px; flex-grow: 1; }
.workflow-step .btn { width: 100%; }

.sidebar-column { position: sticky; top: 20px; }
.live-sidebar {
    background: var(--background-white);
    border-radius: var(--radius-large);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-light);
    overflow: hidden;
}
.live-sidebar-header {
    background: var(--color-primary-bg, #f8edf4);
    color: var(--color-primary-dark, #7a1450);
    padding: 12px 16px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--color-primary-mid, #e8c0d8);
}
.spitzenreiter-box {
    padding: 16px;
    background: var(--primary-blue-light);
    text-align: center;
}
.spitzenreiter-box .label {
    font-weight: 600;
    color: var(--primary-blue-dark);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.spitzenreiter-box .name { font-size: 18px; font-weight: 700; color: var(--text-dark); margin: 0; }
.spitzenreiter-box .stunden { font-size: 14px; color: var(--text-medium); margin: 4px 0 0; }
.mitarbeiter-liste { list-style: none; padding: 0; max-height: 50vh; overflow-y: auto; }
.mitarbeiter-liste li { padding: 12px 16px; border-bottom: 1px solid var(--border-light); transition: background-color 0.15s; }
.mitarbeiter-liste li:last-child { border-bottom: none; }
.mitarbeiter-liste li:hover { background-color: var(--background-gray); }
.ma-info { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 14px; }
.ma-name { font-weight: 600; color: var(--text-dark); }
.ma-stunden { font-size: 13px; color: var(--text-medium); }

/* --- Data-Table Responsive --- */
@media (max-width: 1200px) {
    .data-table { font-size: 13px; }
    .data-table th, .data-table td { padding: 12px 16px; }
}
@media (max-width: 768px) {
    .chart-content form.d-flex { flex-direction: column; align-items: stretch; }
    .chart-content form.d-flex .form-group { min-width: auto; width: 100%; }
    .data-table th:nth-child(2), .data-table td:nth-child(2) { display: none; }
    .auswertung-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ================================================================
   Rechnungsversand Widget (Dashboard)
   ================================================================ */
.rv-card { padding: 6px 14px; display: flex; flex-direction: column; overflow-y: auto; }
.rv-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0f5fa; }
.rv-item:last-child { border-bottom: none; }
.rv-info { min-width: 0; }
.rv-firma { font-size: 0.78rem; font-weight: 600; color: #1a3a5c; }
.rv-detail { font-size: 0.65rem; color: #94a8bc; }
.rv-detail.rv-zip { color: #d97706; }
.rv-detail.rv-zip i { margin-right: 3px; }
.btn-icon.send { background: #0f2947; color: #80c8f0; width: 26px; height: 26px; font-size: 0.6rem; border: none; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rv-all-wrap { padding-top: 6px; margin-top: auto; }
.rv-all-btn { font-family: 'DM Sans', sans-serif; width: 100%; font-size: 0.72rem; font-weight: 600; padding: 7px 12px; border: 1px solid #0f2947; border-radius: 7px; background: transparent; color: #0f2947; cursor: pointer; }
.rv-all-btn:hover { background: #0f2947; color: #80c8f0; }


/* ================================================================
   PERSPECTIVE CONNECT — Kompatibilitaets-Aliase
   Mapping der alten global.css Variablen auf design-system.css
   ================================================================ */
:root {
    /* Farben */
    --magenta:       var(--color-primary);
    --magenta-dark:  var(--color-primary-dark);
    --magenta-light: var(--color-primary-light);
    --magenta-glow:  rgba(169, 27, 110, 0.10);

    /* Text */
    --text:          var(--color-text-primary);
    --muted:         var(--color-text-muted);

    /* Hintergruende */
    --bg:            var(--color-bg-page);
    --bg-card:       var(--color-bg-card);

    /* Rahmen */
    --border:        var(--color-border);
    --border-light:  var(--color-border-light);

    /* Status */
    --success:       var(--color-success);
    --warning:       var(--color-warning);
    --danger:        var(--color-danger);
    --info:          var(--color-info);

    /* Radien (Aliase fuer alte Namen) */
    --radius-pill:   100px;
    --radius-xl:     var(--radius-lg);

    /* Typografie */
    --font-body:     var(--font-family);
    --font-heading:  var(--font-family);

    /* Transitions */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.2s ease;
}

/* ================================================================
   PP-* KLASSEN — Bewerberverwaltung / Kunden-Module
   (aus global.css uebernommen, Magenta-Design)
   ================================================================ */

/* -- Layout -- */
.pp-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px; }
.pp-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; flex-wrap: wrap; }
.pp-page-title { font-size: 21px; font-weight: 700; color: var(--color-primary); }
.pp-page-sub { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }

/* -- Nav Tabs -- */
.pp-nav-tabs {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: 8px 16px; box-shadow: var(--shadow-sm);
}
.pp-nav-tab {
    display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px;
    font-size: 13.5px; font-weight: 600; color: var(--color-text-muted); text-decoration: none;
    border: 1.5px solid transparent; transition: all 0.15s ease;
}
.pp-nav-tab:hover { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-border); }
.pp-nav-tab.active { background: #faf0f5; color: var(--color-primary) !important; border-color: var(--color-primary); }
.pp-nav-title { font-size: 15px; font-weight: 700; color: var(--color-text-primary); position: absolute; left: 50%; transform: translateX(-50%); }

/* -- Toolbar -- */
.pp-toolbar {
    display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
    background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: 12px 16px; box-shadow: var(--shadow-sm); flex-wrap: nowrap; overflow-x: auto;
}
.pp-toolbar .pp-input { min-width: 180px; max-width: 260px; }
.pp-toolbar-divider { width: 1px; height: 28px; background: var(--color-border); margin: 0 6px; flex-shrink: 0; }
.pp-toolbar-spacer { flex: 1; min-width: 12px; }
.pp-filter-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
    border-radius: 20px; font-size: 12px; font-weight: 700; text-decoration: none;
    border: 1.5px solid transparent; transition: all 0.15s ease; white-space: nowrap; flex-shrink: 0;
}
.pp-filter-btn.aktiv { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.pp-filter-btn.inaktiv { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.pp-filter-btn.vermittelt { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary-mid); }
.pp-filter-btn.reset-btn { background: #fff; color: var(--color-text-muted); border-color: var(--color-border); }
.pp-filter-btn.active-filter { box-shadow: 0 0 0 2px currentColor; }

/* -- Cards -- */
.pp-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 20px; }
.pp-card-header { padding: 14px 20px; border-bottom: 1px solid var(--color-border); background: var(--color-primary-bg); display: flex; align-items: center; justify-content: space-between; }
.pp-card-title { font-size: 14px; font-weight: 700; color: var(--color-primary); display: flex; align-items: center; gap: 6px; }
.pp-card-body { padding: 20px; }

/* -- Buttons -- */
.pp-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px;
    border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1.5px solid var(--color-primary); background: #fff; color: var(--color-text-primary);
    text-decoration: none; transition: all 0.15s ease; line-height: 1.4; white-space: nowrap;
    font-family: var(--font-family);
}
.pp-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pp-btn svg { flex-shrink: 0; }
.pp-btn-sm { padding: 5px 11px; font-size: 12px; }
.pp-btn-primary { background: #fff; color: var(--color-text-primary); border-color: var(--color-primary); }
.pp-btn-primary:hover { background: var(--color-primary); color: #fff; }
.pp-btn-success { background: #fff; color: var(--color-text-primary); border-color: var(--color-success); }
.pp-btn-success:hover { background: var(--color-success); color: #fff; }
.pp-btn-danger { background: #fff; color: var(--color-text-primary); border-color: var(--color-danger); }
.pp-btn-danger:hover { background: var(--color-danger); color: #fff; }
.pp-btn-outline { background: #fff; color: var(--color-text-primary); border-color: var(--color-primary); }
.pp-btn-outline:hover { background: var(--color-primary); color: #fff; }
.pp-btn-ghost { background: none; border: 1.5px solid #d1d5db; color: #6b7280; padding: 5px 9px; }
.pp-btn-ghost:hover { background: #fee2e2; border-color: var(--color-danger); color: var(--color-danger); }

/* -- Forms -- */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.pp-group { display: flex; flex-direction: column; gap: 5px; }
.pp-group.full { grid-column: 1 / -1; }
.pp-label { font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.pp-label .req { color: var(--color-danger); }
.pp-input {
    padding: 9px 12px; border: 1.5px solid var(--color-border); border-radius: 6px;
    font-size: 14px; color: var(--color-text-primary); background: #fff; font-family: var(--font-family);
    transition: border-color 0.15s ease, box-shadow 0.15s ease; width: 100%;
}
.pp-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(169,27,110,0.1); }
select.pp-input { cursor: pointer; }
textarea.pp-input { resize: vertical; min-height: 72px; }

/* -- Entry blocks -- */
.pp-entry { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 12px; background: #faf0f5; }
.pp-entry-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pp-entry-title { font-size: 13px; font-weight: 700; color: var(--color-primary); }
.pp-remove { color: var(--color-danger); cursor: pointer; background: none; border: none; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.pp-remove:hover { background: #fee2e2; }
.pp-task-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.pp-task-row input { flex: 1; }
.pp-add-task { font-size: 12px; color: var(--color-primary); cursor: pointer; background: none; border: 1px dashed var(--color-primary); padding: 4px 10px; border-radius: 4px; margin-top: 4px; }
.pp-add-task:hover { background: var(--color-primary-bg); }

/* -- Table -- */
.pp-table { width: 100%; border-collapse: collapse; }
.pp-table th { background: var(--color-primary); color: #fff; padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.pp-table td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); font-size: 13.5px; }
.pp-table tr:last-child td { border-bottom: none; }
.pp-table tr:hover td { background: var(--color-primary-bg); }
.pp-table a { color: var(--color-primary); font-weight: 700; text-decoration: none; }
.pp-table a:hover { text-decoration: underline; }

/* -- Badges -- */
.pp-badge { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.pp-badge-aktiv { background: #dcfce7; color: #166534; }
.pp-badge-inaktiv { background: #f3f4f6; color: #374151; }
.pp-badge-vermittelt { background: var(--color-primary-bg); color: var(--color-primary); }

/* -- Upload zone -- */
.pp-upload-zone {
    border: 2px dashed var(--color-primary); border-radius: var(--radius-sm); padding: 26px 20px;
    text-align: center; background: var(--color-primary-bg); cursor: pointer; transition: background 0.15s ease; position: relative;
}
.pp-upload-zone:hover, .pp-upload-zone.drag-over { background: #e8c0d8; }
.pp-upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.pp-upload-icon { font-size: 30px; display: block; margin-bottom: 6px; }
.pp-upload-text { font-size: 14px; color: var(--color-primary); font-weight: 700; }
.pp-upload-hint { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }

/* -- Doc list -- */
.pp-doc-list { list-style: none; }
.pp-doc-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 6px; margin-bottom: 8px; background: #faf0f5; }
.pp-doc-icon { font-size: 20px; flex-shrink: 0; }
.pp-doc-info { flex: 1; min-width: 0; }
.pp-doc-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-doc-meta { font-size: 11px; color: var(--color-text-muted); }

/* -- Timeline -- */
.pp-timeline-item { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.pp-timeline-item:last-child { border-bottom: none; }
.pp-timeline-period { width: 110px; flex-shrink: 0; font-size: 12px; color: var(--color-text-muted); font-weight: 700; padding-top: 2px; }
.pp-timeline-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.pp-timeline-sub { font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.pp-timeline-tasks { font-size: 12.5px; padding-left: 14px; }
.pp-timeline-tasks li { margin-bottom: 2px; }

/* -- Info grid -- */
.pp-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pp-info-label { padding: 6px 12px 6px 0; font-size: 11.5px; color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; border-bottom: 1px solid var(--color-border); }
.pp-info-value { padding: 6px 0 6px 12px; font-size: 13.5px; border-bottom: 1px solid var(--color-border); }

/* -- Lang tags -- */
.pp-lang-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-lang-tag { background: var(--color-primary-bg); border: 1px solid var(--color-border); border-radius: 20px; padding: 4px 10px; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.pp-lang-tag button { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.pp-lang-tag button:hover { color: var(--color-danger); }

/* -- Two-col layout -- */
.pp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .pp-two-col { grid-template-columns: 1fr; } }

/* -- Alerts -- */
.pp-alert { padding: 12px 16px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
.pp-alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.pp-alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.pp-alert-info { background: var(--color-primary-bg); color: var(--color-primary); border: 1px solid var(--color-border); }

/* -- Toast -- */
#pp-toast { position: fixed; bottom: 24px; right: 24px; background: #1a1a2e; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 13px; z-index: 9999; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; pointer-events: none; max-width: 320px; }
#pp-toast.show { opacity: 1; transform: translateY(0); }
#pp-toast.success { background: var(--color-success); }
#pp-toast.error { background: var(--color-danger); }

/* -- Spinner -- */
.pp-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: pp-spin .6s linear infinite; display: inline-block; }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* -- Form Grid (Import) -- */
.pp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 10px; }
.pp-form-group { display: flex; flex-direction: column; gap: 5px; }
.pp-form-group.full { grid-column: 1 / -1; }
.pp-entry-block { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 12px; background: #faf0f5; }

/* -- PP Responsive -- */
@media (max-width: 768px) {
    .pp-grid { grid-template-columns: 1fr; }
    .pp-info-grid { grid-template-columns: 1fr; }
    .pp-info-label { border-bottom: none; padding-bottom: 0; }
    .pp-page-header { flex-direction: column; align-items: flex-start; }
    .pp-table thead { display: none; }
    .pp-table td { display: block; padding: 6px 14px; }
    .pp-table td::before { content: attr(data-label) ': '; font-weight: 700; color: var(--color-text-muted); }
    .pp-nav-title { display: none; }
}


/* ================================================================
   PERSPECTIVE CONNECT — Inline-CSS Kompatibilitaet
   Dashboard-Kacheln, Bewerbungen-Tabelle, Status-Elemente
   ================================================================ */

/* Page Layout */
.page { max-width: 1320px; margin: 0 auto; padding: 28px 24px 60px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.page-title { font-size: 1.45rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }

/* Badges */
.badge { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-magenta { background: var(--color-primary); color: white; }
.badge-outline { border: 1.5px solid var(--color-primary); color: var(--color-primary); background: transparent; }

/* Table Wrap */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 2px solid var(--color-primary); background: white; }
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap table th {
    background: #a91b6e; color: #FFFFFF;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 12px 14px; text-align: left; white-space: nowrap;
}
.table-wrap table td { padding: 14px; border-top: 1px solid var(--color-border-light); font-size: 0.86rem; vertical-align: top; }
.table-wrap table tr:hover td { background: #faf0f5; }

/* Status Pill */
.status-pill {
    display: inline-block; padding: 3px 10px; border-radius: 100px;
    font-size: 0.72rem; font-weight: 700; color: white; white-space: nowrap;
}

/* Section Label */
.section-label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-primary); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

/* Messages */
.msg { padding: 10px 14px; border-radius: var(--radius-md); font-size: 0.84rem; margin-bottom: 16px; }
.msg-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.msg-error { background: #fff0f5; border: 1px solid #ffc0d8; color: #9e0040; }

/* Empty State */
.empty-state { text-align: center; padding: 60px 20px; color: #bbb; font-size: 0.95rem; }
.empty-state svg {
    width: 48px; height: 48px; stroke: #ddd; fill: none; stroke-width: 1.2;
    margin: 0 auto 12px; display: block;
}

/* ================================================================
   MODALS
   ================================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-box {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: modalSlideIn 0.2s ease-out;
}
.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #E5E7EB;
    font-weight: 600;
    font-size: 16px;
}
.modal-body {
    padding: 20px;
}
.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #E5E7EB;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ================================================================
   FILTER PILLS
   ================================================================ */
.filter-pill {
    background: #FFFFFF;
    border: 1.5px solid #D1D9E0;
    color: #1A1A2E;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.filter-pill:hover {
    border-color: #a91b6e;
    color: #a91b6e;
}
.filter-pill.active {
    border-color: #a91b6e;
    color: #a91b6e;
    background: #faf0f5;
}

/* Animations */
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.7;} }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
@keyframes modalSlideIn { from{opacity:0;transform:translateY(-50px);} to{opacity:1;transform:translateY(0);} }
.animate-in { animation: fadeIn 0.3s ease-out both; }

/* Responsive */
@media (max-width: 768px) {
    .page { padding: 16px 12px 40px; }
    .page-head { flex-direction: column; align-items: flex-start; }
}