/* ============================================================
   PhoneData Modul-Navbar — gemeinsames Muster fuer alle Central-Module
   1:1 aus CoWorker/Kassenbuch (pd-module.css) bzw. verwaltung.html.
   Verwendung: <link rel="stylesheet" href="/static/css/pd-navbar.css">
   plus dem Header-Block aus references/navbar-block.html.
   Werte NICHT frei aendern — bei CI-Aenderungen hier mitziehen.
   ============================================================ */

:root {
    --pd-primary: #6A5F91;
    --pd-secondary: #4A3B7A;
    --pd-accent: #8B82B9;
}

/* ---------- Kopfbereich (Lila-Band) ---------- */
header {
    background: linear-gradient(135deg, var(--pd-primary), var(--pd-secondary));
    padding: 1.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, .5);
    position: relative;
}

header h1 {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 800;
    margin-bottom: .3rem;
}

header p, header .sub {
    color: rgba(255, 255, 255, .7);
    font-size: .85rem;
}

header .back {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    font-size: .85rem;
    padding: .4rem .9rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    transition: .2s;
    white-space: nowrap;
}

header .back:hover { background: rgba(255, 255, 255, .18); }

/* ---------- Benutzer-Menue oben rechts ---------- */
.pd-user-menu {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
}

.pd-user-btn {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    color: #fff;
    font-size: .82rem;
    padding: .4rem .9rem;
    cursor: pointer;
    transition: .2s;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.pd-user-btn:hover { background: rgba(255, 255, 255, .2); }

.pd-user-btn svg.ico {
    width: 1em; height: 1em; vertical-align: -.125em;
}

.pd-dropdown-item svg.ico,
svg.ico {
    width: 1em; height: 1em; vertical-align: -.125em;
}

.pd-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 10px;
    padding: .5rem;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    z-index: 300;
    display: none;
    text-align: left;
}

.pd-dropdown.open { display: block; }

.pd-dropdown-header {
    padding: .75rem 1rem;
    font-size: .78rem;
    color: #8b949e;
    border-bottom: 1px solid #30363d;
}

.pd-dropdown-header .name {
    font-weight: 600;
    font-size: .9rem;
    color: #e6edf3;
}

.pd-dropdown-header .email {
    font-size: .75rem;
    color: #8b949e;
    margin-top: .15rem;
}

.pd-dropdown-item {
    padding: .5rem .7rem;
    border-radius: 6px;
    font-size: .82rem;
    cursor: pointer;
    color: #e6edf3;
    transition: .15s;
    text-decoration: none;
    display: block;
}

.pd-dropdown-item:hover { background: rgba(106, 95, 145, .2); }

.pd-dropdown-item.danger { color: #f85149; }

.pd-dropdown-item.danger:hover { background: rgba(248, 81, 73, .15); }