/* ==========================================================================
   Desktop-Layout (Etappe 5), ab 1100px. Komplett additiv zu styles.css:
   eigene "d-"-Klassenpraefixe, damit nichts mit dem mobilen Markup kollidiert.
   Alle Regeln (bis auf die Absicherung direkt darunter) stehen hinter dem
   @media-Block, sodass unterhalb der Breite nichts von hier greifen kann.
   ========================================================================== */

/* Ohne diese Zeile wuerde #desktop-shell unterhalb 1100px trotz fehlendem
   "hidden"-Attribut als normaler Block gerendert (Standard-display von div)
   und sich mit #app-shell ueberlappen. */
#desktop-shell { display: none; }

@media (min-width: 1100px) {

  #app-shell:not(.hidden) { display: none; }

  #desktop-shell:not(.hidden) {
    display: flex;
    height: 100vh;
    width: 100%;
  }

  /* ===== Sidebar ===== */
  #desktop-shell {
    --d-sidebar-w: 74px;
  }
  .d-sidebar {
    width: var(--d-sidebar-w); flex-shrink: 0;
    background: linear-gradient(185deg, #132A52, #0F2140);
    display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0;
    transition: width .22s ease; color: #fff; overflow: hidden;
  }
  .d-sidebar.expanded { --d-sidebar-w: 238px; width: 238px; }

  .d-sidebar .only-expanded { display: none; }
  .d-sidebar.expanded .only-expanded { display: block; }

  .d-sidebar-brand {
    height: 64px; display: flex; align-items: center; gap: 11px; flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.1); padding: 0 19px;
  }
  .d-sidebar:not(.expanded) .d-sidebar-brand { justify-content: center; padding: 0; }
  .d-logo {
    width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--primary);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0;
  }
  .d-brand-name { font-weight: 800; font-size: 17px; color: #fff; white-space: nowrap; }
  .d-brand-name span { color: #8FB4E8; }

  .d-sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 0; }

  .d-nav-list { padding: 0 13px; display: flex; flex-direction: column; gap: 3px; }
  .d-side-link {
    display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 11px; position: relative;
    color: rgba(255,255,255,.68); cursor: pointer; white-space: nowrap; font-size: 13.5px; font-weight: 600;
    border: none; background: none; width: 100%; text-align: left;
  }
  .d-sidebar:not(.expanded) .d-side-link { justify-content: center; padding: 11px 0; }
  .d-side-link svg { width: 19px; height: 19px; flex-shrink: 0; }
  .d-side-link:hover { background: rgba(255,255,255,.09); color: #fff; }
  .d-side-link.active { background: rgba(255,255,255,.15); color: #fff; }
  .d-side-link.active::before {
    content: ""; position: absolute; left: -13px; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0; background: #6EA0E8;
  }
  .d-side-link .label-text { display: none; }
  .d-sidebar.expanded .d-side-link .label-text { display: inline; }
  .d-side-link .d-badge {
    margin-left: auto; background: var(--warning); color: #2B1C00; font-size: 10px; font-weight: 700;
    padding: 1px 7px; border-radius: 20px;
  }
  /* Rot statt orange, sobald mindestens ein ueberfaelliger Eintrag in der
     gezaehlten Menge enthalten ist (nicht nur "bald faellig"). Hoehere
     Spezifitaet als die Basisregel, damit die Farbe unabhaengig von
     eingeklappt/ausgeklappt sicher greift. */
  .d-side-link .d-badge.urgent { background: var(--negative); color: #fff; }
  .d-sidebar:not(.expanded) .d-side-link .d-badge {
    position: absolute; top: 6px; right: 14px; margin: 0; width: 8px; height: 8px; padding: 0;
    border-radius: 50%; font-size: 0; line-height: 0;
  }

  .d-sidebar-footer { flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.1); padding: 10px 13px 12px; }
  .d-sidebar-toggle {
    display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: 10px; width: 100%;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.72);
    cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; margin-bottom: 10px;
  }
  .d-sidebar:not(.expanded) .d-sidebar-toggle { justify-content: center; padding: 10px 0; }
  .d-sidebar-toggle:hover { background: rgba(255,255,255,.13); color: #fff; }
  .d-sidebar-toggle svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s ease; }
  .d-sidebar-toggle .label-text { display: none; }
  .d-sidebar.expanded .d-sidebar-toggle .label-text { display: inline; }
  .d-sidebar.expanded .d-sidebar-toggle svg { transform: scaleX(-1); }

  .d-sidebar-profile {
    display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 11px; cursor: pointer;
    white-space: nowrap; border: none; background: none; width: 100%; text-align: left;
  }
  .d-sidebar:not(.expanded) .d-sidebar-profile { justify-content: center; padding: 8px 0; }
  .d-sidebar-profile:hover { background: rgba(255,255,255,.08); }
  .d-p-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: #6EA0E8; color: #0F2140; font-weight: 800;
    font-size: 12.5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .d-p-info { overflow: hidden; min-width: 0; }
  .d-p-name { font-size: 12.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; }
  .d-p-email { font-size: 10.5px; color: rgba(255,255,255,.5); overflow: hidden; text-overflow: ellipsis; }

  /* ===== Obere Navigationsleiste (Alternative zur Sidebar) =====
     Standardmaessig ausgeblendet; #desktop-shell.nav-topbar (siehe
     initDesktopSettingsFromUser) blendet sie ein und die Sidebar aus. */
  #d-topbar { display: none; }
  #desktop-shell.nav-topbar { flex-direction: column; }
  #desktop-shell.nav-topbar .d-sidebar { display: none; }
  /* Grid statt Flex, damit die Nav-Pills relativ zur GESAMTEN Leistenbreite
     zentriert stehen (Logo/Profil koennen unterschiedlich breit sein, ohne
     dass sich das Zentrum der mittleren Spalte dadurch verschiebt). */
  #desktop-shell.nav-topbar #d-topbar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 20px;
    height: 64px; flex-shrink: 0;
    padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--border);
  }
  #desktop-shell.nav-topbar .d-main-area { flex: none; height: calc(100vh - 64px); }

  .d-topbar-brand { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 11px; }
  .d-topbar-brand-name { font-weight: 800; font-size: 17px; color: var(--text); white-space: nowrap; }
  .d-topbar-brand-name span { color: var(--primary-light); }

  .d-topbar-nav { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 4px; }
  .d-top-link {
    flex-direction: row; width: auto; padding: 9px 15px; border-radius: 10px;
    color: var(--text-muted); position: relative;
  }
  .d-top-link:hover { background: var(--surface-alt); color: var(--text); }
  .d-top-link.active { background: var(--primary-tint); color: var(--primary); }
  .d-top-link.active::before { content: none; }
  .d-top-link .label-text { display: inline; }
  .d-top-link .d-badge { position: static; margin-left: 6px; width: auto; height: auto; padding: 1px 7px; font-size: 10px; line-height: normal; border-radius: 20px; }

  .d-topbar-profile {
    grid-column: 3; justify-self: end;
    display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; border-radius: 30px;
    border: 1px solid var(--border); background: none; cursor: pointer; flex-shrink: 0;
  }
  .d-topbar-profile:hover { background: var(--surface-alt); }
  .d-topbar-p-name { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; }

  /* ===== Hauptbereich ===== */
  .d-main-area { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; }
  .d-main-inner { max-width: 880px; margin: 0 auto; padding: 28px 40px 60px; }
  /* .d-main-area ist der Scroll-Container -- sticky haelt das Banner beim Scrollen
     oben sichtbar, analog zum .app-header-Muster im mobilen Layout. */
  #d-impersonation-banner, #d-offline-banner { position: sticky; top: 0; z-index: 5; }
  .d-page-header { margin-bottom: 20px; }
  .d-page-header h1 { font-size: 22px; margin: 0; color: var(--text); }
  .d-page-header .sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }

  .d-screen { display: none; }
  .d-screen.active { display: block; }

  /* ===== Dashboard: Karten ===== */
  .d-card-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; margin-bottom: 22px; }
  .d-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
  .d-card-balance {
    background: linear-gradient(150deg, var(--primary), var(--primary-light)); color: #fff; border: none;
    box-shadow: 0 16px 32px -14px rgba(27,75,143,.5); position: relative; overflow: hidden;
  }
  .d-card-balance::after {
    content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px;
    border-radius: 50%; background: rgba(255,255,255,.08);
  }
  .d-card .d-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .85; display: flex; align-items: center; gap: 6px; }
  .d-card .d-label svg { width: 13px; height: 13px; }
  .d-card .d-amount { font-family: 'IBM Plex Mono', monospace; font-size: 28px; font-weight: 600; margin-top: 7px; position: relative; font-variant-numeric: tabular-nums; }
  .d-card-sub .d-amount { font-size: 21px; }
  .d-card-sub.pos .d-amount { color: var(--positive); }
  .d-card-sub.neg .d-amount { color: var(--negative); }
  .d-card-sub .d-label { color: var(--text-muted); }
  .d-ratio-bar { margin-top: 12px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; display: flex; position: relative; }
  .d-ratio-bar .seg-pos { background: #7FD6AC; }
  .d-ratio-bar .seg-neg { background: #F0A79A; }
  .d-ratio-legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; opacity: .85; position: relative; }

  /* ===== Fälligkeits-Banner ===== */
  .d-due-banner {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 13px; background: var(--warning-bg);
    border: 1px solid var(--warning); color: var(--warning); font-size: 12.5px; font-weight: 600; margin-bottom: 20px; cursor: pointer;
  }
  .d-due-banner svg { width: 17px; height: 17px; flex-shrink: 0; }

  .d-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .d-section-title h3 { font-size: 14.5px; margin: 0; color: var(--text); }

  /* ===== Tabellen-Look (Dashboard-Transaktionen, Fälligkeiten, spaeter Kontakte) ===== */
  .d-tx-table { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
  .d-tx-row { display: flex; align-items: center; gap: 13px; padding: var(--d-row-py, 12px) 18px; border-bottom: 1px solid var(--border); }
  .d-tx-row:last-child { border-bottom: none; }
  .d-tx-row:hover { background: var(--surface-alt); }
  .d-tx-row.overdue { background: var(--negative-bg); }
  .d-tx-row.overdue:hover { background: var(--negative-bg); }
  .d-tx-row.overdue .d-tx-info .meta { color: var(--negative); font-weight: 600; }
  .d-tx-row.due-soon { background: var(--warning-bg); }
  .d-tx-row.due-soon:hover { background: var(--warning-bg); }
  .d-tx-row.due-soon .d-tx-info .meta { color: var(--warning); font-weight: 600; }
  .d-avatar {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; color: #fff; flex-shrink: 0;
  }
  .d-tx-info { flex: 1; min-width: 0; }
  .d-tx-info .name { font-size: 13px; font-weight: 600; color: var(--text); }
  .d-tx-info .meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; display: flex; gap: 6px; align-items: center; }
  .d-tag { font-size: 9.5px; font-weight: 600; padding: 1px 7px; border-radius: 20px; background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border); }
  .d-tx-amount { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
  .d-tx-amount.pos { color: var(--positive); }
  .d-tx-amount.neg { color: var(--negative); }

  .d-row-actions { display: flex; gap: 5px; margin-left: 12px; opacity: .4; transition: opacity .15s ease; }
  .d-tx-row:hover .d-row-actions { opacity: 1; }
  .d-row-btn {
    width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted);
  }
  .d-row-btn svg { width: 13.5px; height: 13.5px; }
  .d-row-btn.d-edit-btn:hover { background: var(--primary-tint); color: var(--primary); border-color: var(--primary); }
  .d-row-btn.d-delete-btn:hover { background: var(--negative-bg); color: var(--negative); border-color: var(--negative); }

  /* ===== Kontakte ===== */
  .d-search-bar {
    display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 11px 15px; color: var(--text-muted); font-size: 13px; margin-bottom: 16px; max-width: 340px;
  }
  .d-search-bar svg { width: 15px; height: 15px; flex-shrink: 0; }
  .d-search-bar input { border: none; background: transparent; outline: none; color: var(--text); font-size: 13px; flex: 1; font-family: 'Inter'; }

  .d-contact-row { cursor: pointer; }
  .d-contact-amount { text-align: right; }
  .d-sub { display: block; font-family: 'Inter'; font-weight: 500; font-size: 9.5px; color: var(--text-muted); margin-top: 1px; }

  /* ===== Kontakt-Detail ===== */
  .d-page-header-with-back { display: flex; align-items: center; gap: 12px; }
  .d-page-header-with-back h1 { margin: 0; }
  .d-back-btn {
    width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); flex-shrink: 0;
  }
  .d-back-btn svg { width: 16px; height: 16px; }
  .d-back-btn:hover { background: var(--surface-alt); }

  /* Kontakt-Detail: Identitaet (Avatar/Name/Button) und Saldo-Kacheln als EIN
     zusammenhaengender Block statt zwei getrennt wirkender Karten — gemeinsamer
     Rahmen/Radius, mit einer Trennlinie zwischen den beiden Zonen. */
  .d-detail-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
    padding: 26px 28px; margin-bottom: 22px;
  }
  .d-detail-hero {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
    padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border);
  }
  .d-detail-hero .d-avatar { width: 58px; height: 58px; font-size: 19px; }
  .d-detail-hero .d-dname { font-size: 16px; font-weight: 700; color: var(--text); }
  .d-repay-btn {
    margin-top: 6px; background: var(--primary); color: #fff; border: none; border-radius: 11px;
    padding: 10px 18px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  }
  /* Eigenes Grid, das explizit auf 1 vs. 3 Kacheln reagiert (nicht einfach eine
     Spalte der Dashboard-3er-Reihe ausblenden). Der Grid-CONTAINER selbst bleibt
     in beiden Faellen 100% breit (buendig mit Hero und Verlaufsliste) — im
     1-Kachel-Fall wird nur die sichtbare Spaltenbreite ueber minmax() begrenzt
     und zentriert, nicht der Container (das war der Bug: max-width auf dem
     Container machte ihn schmaler als Hero/Liste statt nur die Karte selbst). */
  .d-detail-stats { display: grid; gap: 14px; }
  .d-detail-stats.stats-3 { grid-template-columns: repeat(3, 1fr); }
  .d-detail-stats.stats-1 { grid-template-columns: minmax(0, 320px); justify-content: center; }
  .d-stat-item {
    background: var(--surface-alt); border: 1px solid var(--border); border-radius: 14px;
    padding: 16px 18px; text-align: center;
  }
  .d-stat-item .d-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--text-muted); }
  .d-stat-item .d-amount { font-family: 'IBM Plex Mono', monospace; font-size: 21px; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }

  /* ===== FAB + Slide-in-Panel =====
     Formularfelder (.field, .segmented, .chip-row, .amount-input-wrap, .repay-contact,
     .open-amount-box, .debt-pick-list, .save-btn, .hidden ...) sind bereits global in
     styles.css definiert (nicht auf #app-shell beschraenkt) und werden hier bewusst
     unveraendert wiederverwendet statt dupliziert — nur die Panel-Chrome selbst ist neu. */
  .d-fab {
    position: fixed; bottom: 28px; right: 36px; width: 54px; height: 54px; border-radius: 17px;
    background: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 14px 28px -10px rgba(27,75,143,.6); z-index: 20; border: 1px solid var(--fab-border);
    opacity: 1; transform: translateX(0);
    transition: opacity .32s cubic-bezier(.2,.9,.3,1), transform .32s cubic-bezier(.2,.9,.3,1);
  }
  .d-fab svg { width: 23px; height: 23px; stroke: #fff; }
  /* Ein-/Ausblenden je nach aktivem Screen (siehe setDesktopFabVisible in
     desktop.js): beide Richtungen liegen auf derselben Achse (rechts) und sind
     nur zeitlich gespiegelt -- Erscheinen bewegt sich von hier nach links in die
     finale Position, Verschwinden von der finalen Position aus weiter hierher. */
  .d-fab.d-fab-hidden { opacity: 0; transform: translateX(16px); pointer-events: none; }

  .d-panel-overlay {
    position: fixed; inset: 0; background: rgba(12,20,36,.35); opacity: 0; pointer-events: none;
    transition: opacity .25s ease; z-index: 50;
  }
  .d-panel-overlay.open { opacity: 1; pointer-events: auto; }
  .d-side-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 440px; background: var(--surface); box-shadow: var(--shadow);
    transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.9,.3,1); z-index: 51;
    display: flex; flex-direction: column;
  }
  .d-panel-overlay.open .d-side-panel { transform: translateX(0); }
  .d-panel-header {
    display: flex; align-items: center; justify-content: space-between; padding: 20px 24px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .d-panel-header h2 { font-size: 16px; margin: 0; color: var(--text); }
  .d-panel-close {
    width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-alt);
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text);
  }
  .d-panel-close svg { width: 15px; height: 15px; }
  .d-panel-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .d-panel-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 15px; }
  .d-panel-footer { padding: 18px 24px; border-top: 1px solid var(--border); flex-shrink: 0; }

  /* ===== Einstellungen ===== */
  .settings-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 20px; max-width: 540px; margin-bottom: 16px;
  }
  .settings-card .glabel { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 9px; }
  .settings-card .ghint { font-size: 11.5px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; }
  .settings-card .theme-seg { max-width: 340px; }

  .opt-row { display: flex; gap: 10px; }
  .opt-card { flex: 1; border: 1px solid var(--border); border-radius: 12px; padding: 13px; cursor: pointer; text-align: center; transition: .15s; }
  .opt-card:hover { border-color: var(--primary-light); }
  .opt-card.active { border-color: var(--primary); background: var(--primary-tint); }
  .opt-card .icon { margin-bottom: 7px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
  .opt-card.active .icon { color: var(--primary); }
  .opt-card svg { width: 20px; height: 20px; }
  .opt-card .t { font-size: 11.5px; font-weight: 600; color: var(--text); }

  .settings-card .settings-row { max-width: none; }
}