/* =========================================================
   RZHAS ChangeControl – Design System v0.6
   Premium SaaS aesthetic: clean, structured, trustworthy
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --color-bg:           #f4f6f9;
  --color-surface:      #ffffff;
  --color-surface-2:    #f8fafc;
  --color-border:       #e2e8f0;
  --color-border-strong:#cbd5e1;
  --color-text:         #0f172a;
  --color-text-2:       #334155;
  --color-text-muted:   #64748b;
  --color-text-subtle:  #94a3b8;
  --color-primary:      #2563eb;
  --color-primary-h:    #1d4ed8;
  --color-primary-soft: #eff6ff;
  --color-primary-ring: rgba(37,99,235,.2);
  --color-success:      #16a34a;
  --color-success-bg:   #f0fdf4;
  --color-warn:         #d97706;
  --color-warn-bg:      #fffbeb;
  --color-danger:       #dc2626;
  --color-danger-bg:    #fef2f2;
  --color-info:         #0284c7;
  --color-info-bg:      #f0f9ff;
  --radius-sm:  .375rem;
  --radius-md:  .5rem;
  --radius-lg:  .75rem;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); min-height: 100vh; display: flex; flex-direction: column; line-height: 1.6; margin: 0; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Nav ---- */
.app-nav { background: #0f172a; border-bottom: 3px solid #2563eb; position: sticky; top: 0; z-index: 50; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.app-nav__inner { max-width: 100%; margin: 0 auto; padding: 0 1rem; height: 58px; display: flex; align-items: stretch; gap: 0; }
.app-nav__brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; flex-shrink: 0; padding-right: 1rem; margin-right: .25rem; border-right: 1px solid rgba(255,255,255,.1); }
.app-nav__logo { width: 32px; height: 32px; background: linear-gradient(135deg,#3b82f6,#1d4ed8); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: #fff; }
.app-nav__name { font-size: .95rem; font-weight: 700; color: #f8fafc; letter-spacing: -.02em; }
.app-nav__links { display: flex; align-items: stretch; gap: 0; flex: 1; }
.app-nav__link { display: inline-flex; align-items: center; padding: 0 .9rem; font-size: .92rem; font-weight: 700; color: #e2e8f0; border-bottom: 3px solid transparent; transition: color .12s, border-color .12s; text-decoration: none; white-space: nowrap; letter-spacing: 0; }
.app-nav__link:hover { color: #ffffff; border-bottom-color: rgba(255,255,255,.35); text-decoration: none; }
.app-nav__link.active { color: #ffffff; border-bottom-color: #3b82f6; }
.app-nav__right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; padding-left: .75rem; margin-left: .25rem; border-left: 1px solid rgba(255,255,255,.1); }
.app-nav__user { display: flex; align-items: center; gap: .65rem; padding: .4rem .75rem .4rem .4rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); text-decoration: none; transition: background .15s; }
.app-nav__user:hover { background: rgba(255,255,255,.15); text-decoration: none; }
.app-nav__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#3b82f6,#6366f1); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.app-nav__username { font-size: .84rem; font-weight: 700; color: #f1f5f9; line-height: 1.25; }
.app-nav__role { font-size: .7rem; color: #94a3b8; line-height: 1.1; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-nav__logout { font-size: .82rem; font-weight: 600; color: #94a3b8; padding: .45rem .8rem; border-radius: var(--radius-sm); transition: color .15s, background .15s; text-decoration: none; border: 1px solid rgba(255,255,255,.12); }
.app-nav__logout:hover { color: #f8fafc; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); text-decoration: none; }

/* ---- Layout ---- */
.app-main { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }
.app-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); padding: .875rem 1.5rem; font-size: .72rem; color: var(--color-text-muted); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---- Alerts ---- */
.flash, .alert { padding: .85rem 1.1rem; border-radius: var(--radius-md); font-size: .875rem; margin-bottom: 1.25rem; border: 1px solid transparent; animation: fadeSlideIn .2s ease; }
@keyframes fadeSlideIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.flash-info,.alert-info       { background: var(--color-info-bg);    color: #075985; border-color: #bae6fd; }
.flash-success,.alert-success { background: var(--color-success-bg); color: #14532d; border-color: #86efac; }
.flash-error,.alert-error     { background: var(--color-danger-bg);  color: #991b1b; border-color: #fca5a5; }
.flash-warn,.alert-warn       { background: var(--color-warn-bg);    color: #78350f; border-color: #fcd34d; }

/* ---- Page Header ---- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.page-title { font-size: 1.5rem; font-weight: 700; color: var(--color-text); letter-spacing: -.03em; line-height: 1.2; margin: 0; }
.page-subtitle { font-size: .875rem; color: var(--color-text-muted); margin: .3rem 0 0; }
.page-actions { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }

/* ---- Cards ---- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--color-surface); }
.card-title { font-size: .9rem; font-weight: 700; color: var(--color-text); letter-spacing: -.01em; margin: 0; }
.card-body { padding: 1.25rem; }
.section-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 1rem; }
.section-card__header { padding: .875rem 1.25rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: .5rem; background: var(--color-surface-2); }
.section-card__title { font-size: .85rem; font-weight: 700; color: var(--color-text); }
.section-card__body { padding: 1.1rem 1.25rem; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1rem; font-family: var(--font-sans); font-size: .84rem; font-weight: 600; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: all .15s ease; text-decoration: none; white-space: nowrap; line-height: 1; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 1px 3px rgba(37,99,235,.25); }
.btn-primary:hover { background: var(--color-primary-h); border-color: var(--color-primary-h); color: #fff; }
.btn-secondary { background: var(--color-surface); color: var(--color-text-2); border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--color-surface-2); color: var(--color-text); }
.btn-success { background: #16a34a; color: #fff; border-color: #16a34a; }
.btn-success:hover { background: #15803d; color: #fff; }
.btn-danger { background: var(--color-surface); color: var(--color-danger); border-color: #fca5a5; }
.btn-danger:hover { background: var(--color-danger-bg); }
.btn-warn { background: var(--color-surface); color: var(--color-warn); border-color: #fcd34d; }
.btn-warn:hover { background: var(--color-warn-bg); }
.btn-ghost { background: transparent; color: var(--color-text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text); }
.btn-link { background: transparent; border: 0; color: var(--color-primary); padding: .55rem .25rem; font-weight: 500; }
.btn-link:hover { text-decoration: underline; }
.btn-sm { padding: .38rem .7rem; font-size: .78rem; }
.btn-lg { padding: .7rem 1.35rem; font-size: .92rem; }

/* ---- Badges ---- */
.badge,.tag { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.badge-blue,.tag-info    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge-green,.tag-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.badge-amber,.tag-warn   { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge-red,.tag-error    { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.badge-gray,.tag-muted   { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; }
.role-tags { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ---- Status Badges ---- */
.status-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; border: 1px solid; }
.status-badge::before { content:""; width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.status-draft           { background:#f8fafc; color:#64748b; border-color:#e2e8f0; } .status-draft::before { background:#94a3b8; }
.status-pending_review  { background:#fffbeb; color:#b45309; border-color:#fde68a; } .status-pending_review::before { background:#f59e0b; }
.status-approved        { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; } .status-approved::before { background:#22c55e; }
.status-open            { background:#fffbeb; color:#b45309; border-color:#fde68a; } .status-open::before { background:#f59e0b; }
.status-done            { background:#f0fdf4; color:#14532d; border-color:#86efac; } .status-done::before { background:#16a34a; }
.status-rejected        { background:#fef2f2; color:#b91c1c; border-color:#fecaca; } .status-rejected::before { background:#ef4444; }
.status-needs_revision  { background:#fff7ed; color:#c2410c; border-color:#fed7aa; } .status-needs_revision::before { background:#f97316; }
.status-in_progress     { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; } .status-in_progress::before { background:#3b82f6; }
.status-in_review       { background:#faf5ff; color:#7c3aed; border-color:#e9d5ff; } .status-in_review::before { background:#a855f7; }
.status-closed          { background:#f0fdf4; color:#14532d; border-color:#86efac; } .status-closed::before { background:#16a34a; }
.status-cancelled       { background:#f8fafc; color:#94a3b8; border-color:#e2e8f0; } .status-cancelled::before { background:#cbd5e1; }
.status-reopened        { background:#fff1f2; color:#9f1239; border-color:#fda4af; } .status-reopened::before { background:#f43f5e; }
.status-unset           { background:#f8fafc; color:#94a3b8; border-color:#e2e8f0; } .status-unset::before { background:#cbd5e1; }

/* ---- Risk ---- */
.risk-niedrig  { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; padding:.22rem .65rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.risk-mittel   { background:#fffbeb; color:#b45309; border:1px solid #fde68a; padding:.22rem .65rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.risk-hoch     { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; padding:.22rem .65rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.risk-kritisch { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; padding:.22rem .65rem; border-radius:999px; font-size:.72rem; font-weight:600; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
.data-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.data-table thead tr { border-bottom: 1px solid var(--color-border); }
.data-table thead th { text-align:left; padding:.75rem 1rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); background:var(--color-surface-2); white-space:nowrap; }
.data-table tbody tr { border-bottom:1px solid #f1f5f9; transition:background .1s; }
.data-table tbody tr:nth-child(even) { background:#f8fafc; }
.data-table tbody tr:hover { background:#eff6ff; }
.data-table tbody tr:last-child { border-bottom:0; }
.data-table tbody td { padding:.8rem 1rem; vertical-align:middle; color:var(--color-text-2); }
.audit-table thead th { padding:.6rem .875rem; }
.audit-table tbody td { padding:.55rem .875rem; font-size:.8rem; vertical-align:top; line-height:1.35; }
.audit-table .audit-detail { max-width:260px; white-space:pre-line; word-break:break-word; font-size:.78rem; color:var(--color-text-2); line-height:1.35; }
.empty-state { text-align:center; padding:3rem 1rem; color:var(--color-text-muted); font-size:.88rem; }

/* ---- Forms ---- */
.form-section,.form-grid { display:flex; flex-direction:column; gap:1.25rem; }
.form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; align-items:start; }
.form-field { display:flex; flex-direction:column; gap:.35rem; }
.form-field > label { font-size:.8rem; font-weight:600; color:var(--color-text); }
.form-field .hint,.form-field small.hint { font-size:.72rem; color:var(--color-text-muted); line-height:1.4; }
.form-field input[type="text"],.form-field input[type="email"],.form-field input[type="password"],.form-field input[type="search"],.form-field input[type="date"],.form-field input[type="datetime-local"],.form-field input[type="number"],.form-field select,.form-field textarea { width:100%; padding:.55rem .75rem; font-family:var(--font-sans); font-size:.875rem; color:var(--color-text); background-color:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:var(--radius-md); outline:none; transition:border-color .15s,box-shadow .15s; }
.form-field select,select { -webkit-appearance:none; -moz-appearance:none; appearance:none; background-color:var(--color-surface) !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right .7rem center !important; background-size:1rem 1rem !important; padding-right:2.4rem !important; cursor:pointer; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-ring); }
.form-field input::placeholder,.form-field textarea::placeholder { color:var(--color-text-subtle); }
.form-field textarea { resize:vertical; min-height:4.5rem; line-height:1.5; }
.form-fieldset { border:1px solid var(--color-border); border-radius:var(--radius-md); padding:.875rem 1rem 1rem; background:var(--color-surface-2); }
.form-fieldset > legend { padding:0 .35rem; font-size:.78rem; font-weight:700; color:var(--color-text); }
.form-actions { display:flex; gap:.5rem; align-items:center; justify-content:flex-end; padding-top:.5rem; }
.checkbox-row { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.875rem; color:var(--color-text); }
.checkbox-row input[type="checkbox"] { accent-color:var(--color-primary); width:15px; height:15px; }
.role-checkboxes { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.5rem; }
.role-check { display:flex; align-items:center; gap:.5rem; padding:.5rem .65rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); cursor:pointer; font-size:.82rem; font-weight:500; color:var(--color-text-2); background:var(--color-surface); transition:border-color .15s,background .15s; }
.role-check:hover { border-color:var(--color-primary); background:var(--color-primary-soft); }
.role-check input[type="checkbox"] { accent-color:var(--color-primary); }

/* ---- Filter ---- */
.filter-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.875rem 1rem; align-items:end; }
.filter-actions { display:flex; gap:.5rem; align-items:center; }
.result-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:.875rem; }

/* ---- Utility ---- */
.mb-4{margin-bottom:1rem;} .mb-6{margin-bottom:1.5rem;} .mt-3{margin-top:.75rem;} .ml-3{margin-left:.75rem;} .p-0{padding:0;} .text-right{text-align:right;} .text-center{text-align:center;} .text-mono{font-family:var(--font-mono);font-size:.82rem;} .text-muted{color:var(--color-text-muted);} .hidden{display:none!important;} .nowrap{white-space:nowrap;} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .cursor-pointer{cursor:pointer;} .muted-small{color:var(--color-text-muted);font-size:.76rem;} .font-mono{font-family:var(--font-mono);}
.grid-2 { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }

/* ---- User Cell ---- */
.user-cell { display:flex; gap:.65rem; align-items:center; }
.avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#6366f1); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; color:#fff; flex-shrink:0; }
.avatar-sm { width:28px; height:28px; font-size:.65rem; }
.user-name { font-weight:600; font-size:.875rem; color:var(--color-text); }
.user-login { font-family:var(--font-mono); font-size:.72rem; color:var(--color-text-muted); }

/* ---- Edit Row ---- */
.edit-row > td { background:var(--color-surface-2)!important; padding:1.25rem!important; border-bottom:2px solid var(--color-primary)!important; }
.edit-form { display:flex; flex-direction:column; gap:1rem; }

/* ---- Role Blocks ---- */
.role-block { border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1rem 1.1rem; background:var(--color-surface); transition:border-color .15s,box-shadow .15s; }
.role-block:hover { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.06); }
.role-name { font-weight:700; color:var(--color-text); font-size:.875rem; margin-bottom:.2rem; }
.role-desc { color:var(--color-text-muted); font-size:.78rem; margin-bottom:.65rem; line-height:1.5; }
.role-perms { margin:0; padding-left:1rem; font-size:.78rem; color:var(--color-text-2); }
.role-perms li { margin:.2rem 0; line-height:1.5; }

/* ---- Audit Timeline ---- */
.audit-entry { position:relative; padding:.75rem .875rem .75rem 1.25rem; border-left:2px solid #e2e8f0; margin-left:.5rem; border-radius:0 var(--radius-md) var(--radius-md) 0; transition:background .1s; }
.audit-entry:hover { background:var(--color-surface-2); }
.audit-entry + .audit-entry { margin-top:.25rem; }
.audit-entry::before { content:""; position:absolute; left:-.45rem; top:1.05rem; width:.6rem; height:.6rem; border-radius:50%; background:#cbd5e1; border:2px solid #fff; box-shadow:0 0 0 1px #e2e8f0; }
.audit-entry:first-child::before { background:var(--color-primary); box-shadow:0 0 0 1px #bfdbfe; }
.audit-entry .a-action { font-size:.8rem; font-weight:700; color:var(--color-text); line-height:1.3; }
.audit-entry .a-meta { font-family:var(--font-mono); font-size:.7rem; color:var(--color-text-muted); margin-top:.15rem; }
.audit-entry .a-status { display:inline-flex; align-items:center; gap:.25rem; margin-top:.35rem; font-size:.72rem; color:var(--color-text-2); }
.audit-entry .a-detail { font-size:.78rem; color:var(--color-text-2); margin-top:.3rem; white-space:pre-line; line-height:1.5; border-left:2px solid #e2e8f0; padding-left:.5rem; }

/* ---- Locked Banner ---- */
.locked-banner { display:flex; align-items:center; gap:.75rem; padding:.875rem 1.1rem; background:#fffbeb; border:1px solid #fde68a; border-radius:var(--radius-md); margin-bottom:1.25rem; font-size:.875rem; color:#78350f; }

/* ---- Detail Layout ---- */
.detail-grid { display:grid; grid-template-columns:1fr 340px; gap:1.25rem; align-items:start; }
@media (max-width:900px) { .detail-grid { grid-template-columns:1fr; } }
.detail-meta { display:grid; grid-template-columns:1fr 1fr; gap:.875rem 1.5rem; }
.meta-item { display:flex; flex-direction:column; gap:.15rem; }
.meta-label { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-muted); }
.meta-value { font-size:.9rem; font-weight:500; color:var(--color-text); }

/* ---- Dashboard ---- */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; margin-bottom:1.75rem; }
.stat-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:1.4rem 1.5rem 1.2rem; box-shadow:var(--shadow-sm); transition:box-shadow .2s,transform .15s; display:flex; flex-direction:column; gap:.5rem; position:relative; overflow:hidden; cursor:pointer; }
.stat-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.1); transform:translateY(-3px); border-color:#93c5fd; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--color-border); }
.stat-card:hover::before { background:linear-gradient(90deg,#3b82f6,#6366f1); }
.stat-value { font-size:2.2rem; font-weight:800; color:var(--color-text); letter-spacing:-.05em; line-height:1; }
.stat-label { font-size:.76rem; font-weight:600; color:var(--color-text-muted); line-height:1.3; text-transform:uppercase; letter-spacing:.03em; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem; }
.quick-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:1.5rem 1.4rem; display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; text-decoration:none; transition:border-color .15s,box-shadow .2s,transform .15s; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.quick-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:transparent; transition:background .15s; }
.quick-card:hover { border-color:#93c5fd; box-shadow:0 8px 24px rgba(37,99,235,.1); transform:translateY(-3px); text-decoration:none; }
.quick-card:hover::before { background:linear-gradient(90deg,#3b82f6,#6366f1); }
.quick-card__icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.quick-card__label { font-size:.95rem; font-weight:700; color:var(--color-text); line-height:1.3; letter-spacing:-.02em; }
.quick-card__sub { font-size:.78rem; color:var(--color-text-muted); line-height:1.4; }
.quick-card__arrow { margin-top:auto; font-size:.75rem; color:var(--color-primary); font-weight:600; opacity:0; transition:opacity .15s; }
.quick-card:hover .quick-card__arrow { opacity:1; }

/* ---- Misc ---- */
.link-mono { font-family:var(--font-mono); font-size:.8rem; font-weight:600; color:var(--color-primary); text-decoration:none; }
.link-mono:hover { text-decoration:underline; }
.pipeline { display:flex; align-items:center; overflow-x:auto; padding:.5rem 0; }
.pipeline-step { display:flex; align-items:center; gap:.35rem; padding:.4rem .75rem; font-size:.72rem; font-weight:600; border-radius:999px; white-space:nowrap; color:var(--color-text-muted); background:var(--color-surface-2); border:1px solid var(--color-border); }
.pipeline-step.done { color:var(--color-success); background:var(--color-success-bg); border-color:#86efac; }
.pipeline-step.current { color:var(--color-primary); background:var(--color-primary-soft); border-color:#93c5fd; font-weight:700; }
.pipeline-arrow { color:#cbd5e1; font-size:.65rem; padding:0 .25rem; flex-shrink:0; }

@media print {
  .app-nav,.app-footer,.btn,.form-section { display:none!important; }
  .app-main { padding:0; }
  .card,.section-card { box-shadow:none; border:1px solid #ccc; }
  body { background:#fff; }
}

/* ================================================================
   RESPONSIVE DESIGN — Mobile & schmale Fenster
   ================================================================ */

/* Mittlere Fenster (< 1280px) — nur Content-Layout */
@media (max-width: 1280px) {
  .app-main { padding: 1.25rem 1rem; }
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr !important; }
  .quick-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Schmales Fenster (< 1350px) — Hamburger Menü */
@media (max-width: 1350px) {
  .app-nav__inner { height: 54px; padding: 0 1rem; gap: 1rem; }
  .app-nav__links { display: none; }
  .app-nav__username { display: none; }
  .app-nav__role { display: none; }
  .app-nav__user { padding: .3rem; border-radius: 50%; }
  #search-container { display: none; }
  .app-nav__hamburger { display: flex !important; }

  /* Main Content */
  .app-main { padding: 1rem .875rem; }

  /* Cards */
  .card, .section-card { border-radius: var(--radius-md); }
  .card-body { padding: 1rem; }

  /* Grids: alles einspaltig */
  .quick-grid { grid-template-columns: 1fr 1fr !important; gap: .75rem !important; }
  .stats-grid { grid-template-columns: repeat(3, 1fr) !important; gap: .5rem !important; }
  .detail-grid { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr !important; }

  /* Quick-Cards: kompakter */
  .quick-card { padding: 1rem 1rem; }
  .quick-card__icon { width: 40px; height: 40px; }
  .quick-card__label { font-size: .84rem; }
  .quick-card__sub { display: none; }
  .quick-card__arrow { display: none; }

  /* Stat-Cards */
  .stat-value { font-size: 1.7rem !important; }
  .stat-label { font-size: .68rem !important; }

  /* Tabellen: horizontal scrollbar */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 500px; }

  /* Buttons */
  .btn { font-size: .82rem; padding: .45rem .875rem; }

  /* H1 */
  h1 { font-size: 1.35rem !important; }
}

/* Sehr kleine Fenster (< 480px) */
@media (max-width: 480px) {
  .quick-grid { grid-template-columns: 1fr 1fr !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Hamburger-Menü Button (standardmäßig versteckt) */
.app-nav__hamburger {
  display: none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  padding: .4rem .5rem;
  cursor: pointer;
  color: #e2e8f0;
  align-items: center;
  gap: .25rem;
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
}
.app-nav__hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: all .2s;
}

/* Mobile Nav Overlay */
.app-nav__mobile-menu {
  display: none;
  position: fixed;
  top: 54px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0f172a;
  z-index: 100;
  padding: 1rem;
  overflow-y: auto;
  flex-direction: column;
  gap: .25rem;
}
.app-nav__mobile-menu.open { display: flex; }
.app-nav__mobile-menu a {
  display: block;
  padding: .875rem 1rem;
  color: #cbd5e1;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.app-nav__mobile-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.app-nav__mobile-menu a.active { color: #fff; background: rgba(37,99,235,.25); }

/* Tablet detail-grid */
@media (min-width: 1351px) and (max-width: 1600px) {
  .detail-grid { grid-template-columns: 1fr 280px !important; }
}

/* ================================================================
   DARK MODE
   ================================================================ */

body.dark {
  --color-bg:           #0f172a;
  --color-surface:      #1e293b;
  --color-surface-2:    #162032;
  --color-border:       #2d3f55;
  --color-border-strong:#3d5068;
  --color-text:         #f1f5f9;
  --color-text-2:       #cbd5e1;
  --color-text-muted:   #64748b;
  --color-text-subtle:  #475569;
  --color-primary:      #3b82f6;
  --color-primary-h:    #60a5fa;
  --color-primary-soft: #1e3a5f;
  --color-primary-ring: rgba(59,130,246,.25);
  --color-success:      #22c55e;
  --color-success-bg:   #052e16;
  --color-warn:         #f59e0b;
  --color-warn-bg:      #1c1200;
  --color-danger:       #f87171;
  --color-danger-bg:    #2d0a0a;
  --color-info:         #38bdf8;
  --color-info-bg:      #0c1a2e;
  --shadow-sm:          0 1px 3px rgba(0,0,0,.4);
  --shadow-md:          0 4px 12px rgba(0,0,0,.5);
}

/* Flash-Nachrichten im Dark Mode */
body.dark .flash-info    { background:#0c1a2e; color:#7dd3fc; border-color:#1e3a5f; }
body.dark .flash-success { background:#052e16; color:#86efac; border-color:#14532d; }
body.dark .flash-error   { background:#2d0a0a; color:#fca5a5; border-color:#7f1d1d; }
body.dark .flash-warn    { background:#1c1200; color:#fcd34d; border-color:#78350f; }

/* Inputs & Selects */
body.dark input, body.dark select, body.dark textarea {
  background: #162032;
  color: #f1f5f9;
  border-color: #2d3f55;
}
body.dark input::placeholder, body.dark textarea::placeholder {
  color: #475569;
}
body.dark input:focus, body.dark select:focus, body.dark textarea:focus {
  border-color: #3b82f6;
  background: #1a2a3f;
}

/* Tabellen */
body.dark table { color: #f1f5f9; }
body.dark th { color: #94a3b8; }
body.dark tr:hover td { background: rgba(255,255,255,.03) !important; }

/* Status Badges im Dark Mode */
body.dark .status-badge { filter: brightness(.85) saturate(1.2); }

/* Buttons */
body.dark .btn-secondary {
  background: #1e293b;
  color: #cbd5e1;
  border-color: #2d3f55;
}
body.dark .btn-secondary:hover {
  background: #263348;
  color: #f1f5f9;
}

/* Details/Summary */
body.dark details summary {
  background: #1e293b;
  border-color: #2d3f55;
  color: #94a3b8;
}

/* Locked Banner */
body.dark .locked-banner {
  background: #1a2a1a;
  border-color: #14532d;
}

/* Scrollbar */
body.dark ::-webkit-scrollbar { width: 8px; height: 8px; }
body.dark ::-webkit-scrollbar-track { background: #0f172a; }
body.dark ::-webkit-scrollbar-thumb { background: #2d3f55; border-radius: 4px; }
body.dark ::-webkit-scrollbar-thumb:hover { background: #3d5068; }

/* Dark Mode Toggle Button */
.dark-toggle {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  padding: .4rem .5rem;
  cursor: pointer;
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dark-toggle:hover {
  background: rgba(255,255,255,.14);
  color: #f1f5f9;
}

/* Accordion-Sektionen in Einstellungen */
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary { list-style: none; transition: background .12s ease; }
details.card > summary:hover { background: var(--color-surface-2); }
details.card:not([open]) > summary { border-radius: var(--radius-md, 10px); }
details.card[open] > summary { border-bottom: 1px solid var(--color-border); }
details.card > summary .accordion-chevron { transition: transform .15s ease; display: inline-block; }
details.card[open] > summary .accordion-chevron { transform: rotate(180deg); }

/* Aufklappbare Sidebar-Sektionen (section-card als details) */
details.section-card > summary::-webkit-details-marker { display: none; }
details.section-card > summary { list-style: none; cursor: pointer; }
details.section-card > summary:hover { filter: brightness(0.98); }