/* =========================================
   PERSONAL AREA TABS – gleiche Hoehe/Zeile wie Stellenmarkt in #header-nav
   ========================================= */

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Cluster: Personal-Area-Links gleiche Hoehe eine Zeile neben Stellenmarkt */
.base-nav-personal-cluster {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    align-self: flex-end;
    gap: 0.35rem;
    min-width: 0;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Tabs-Gruppe stretch auf Hauptnav-Hoehe */
.base-personal-area-tabs {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    align-self: stretch;
    min-width: 0;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Inner: Gap wie Hauptnav (.base-nav-links 0.35rem) */
.base-personal-area-tabs-inner {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.35rem;
    height: 100%;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Personal-Area-Links gleiche Hoehe/Masse wie Stellenmarkt */
.base-personal-area-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    box-sizing: border-box;
    padding: 0.55rem 1.05rem 0.5rem;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text-secondary);
    background-color: var(--color-surface-hover);
    border-top: 1px solid var(--color-rule-light);
    border-right: 1px solid var(--color-rule-light);
    border-bottom: none;
    border-left: 1px solid var(--color-rule-light);
    margin-bottom: -1px;
    white-space: nowrap;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Einstellungen-Reiter Desktop Icon-only kompakt */
.base-personal-area-tab-preferences {
    gap: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    justify-content: center;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Einstellungen Zahnrad-Icon */
.base-personal-area-tab-preferences-icon {
    display: block;
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Einstellungen-Label Desktop aus Platzgruenden aus */
.base-personal-area-tab-preferences-label {
    display: none;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Gespeicherte-Suchen-Reiter Icon+Label */
.base-personal-area-tab-saved-searches {
    gap: 0.4rem;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Gespeicherte-Suchen Bookmark-Icon */
.base-personal-area-tab-saved-searches-icon {
    display: block;
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Autopilot-Reiter Icon+Label */
.base-personal-area-tab-bewerbungs-autopilot {
    gap: 0.4rem;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Autopilot Senden-Icon */
.base-personal-area-tab-bewerbungs-autopilot-icon {
    display: block;
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Pseudo aus */
.base-personal-area-tab::after {
    content: "";
    display: none;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Hover */
.base-personal-area-tab:hover {
    color: var(--color-primary);
    text-decoration: none;
    background-color: var(--color-primary-wash);
    border-top-color: var(--color-primary-soft);
    border-right-color: var(--color-primary-soft);
    border-left-color: var(--color-primary-soft);
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Aktiv */
.base-personal-area-tab.is-active,
.base-personal-area-tab[aria-current="page"] {
    color: var(--color-primary);
    background-color: var(--color-surface);
    border-top: 4px solid var(--color-primary);
    border-right: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    padding-top: calc(0.55rem - 3px);
    text-decoration: none;
    box-shadow: 0 1px 0 var(--color-surface);
    z-index: 2;
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Aktiv Hover */
.base-personal-area-tab.is-active:hover,
.base-personal-area-tab[aria-current="page"]:hover {
    color: var(--color-primary-hover);
    background-color: var(--color-surface);
    border-top-color: var(--color-primary-hover);
}

/* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Fokus */
.base-personal-area-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    color: var(--color-primary);
}

@media (max-width: 1023px) {
    /* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Hamburger: Cluster Spalte */
    .base-nav-personal-cluster {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
        width: 100%;
        gap: 0;
    }

    /* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Hamburger: Tabs volle Breite, kein Gap */
    .base-personal-area-tabs,
    .base-personal-area-tabs-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }

    /* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Hamburger: Personal-Area-Reiter wie Nav-Links */
    .base-personal-area-tab {
        align-self: stretch;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
        border-top: none;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        border-left: 3px solid transparent;
        background-color: transparent;
        padding: 1.05rem 0.85rem 1.05rem 1rem;
        letter-spacing: 0.16em;
        font-size: var(--font-size-lg);
        gap: 0.65rem;
    }

    /* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Hamburger: Personal-Area Icons groesser */
    .base-personal-area-tab-saved-searches-icon,
    .base-personal-area-tab-bewerbungs-autopilot-icon,
    .base-personal-area-tab-preferences-icon {
        width: 1.15rem;
        height: 1.15rem;
    }

    /* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Hamburger: Einstellungen Icon+Text */
    .base-personal-area-tab-preferences {
        gap: 0.65rem;
        padding-left: 1rem;
        padding-right: 0.85rem;
        justify-content: flex-start;
    }

    .base-personal-area-tab-preferences-label {
        display: inline;
    }

    /* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Hamburger: aktiver Personal-Area-Reiter */
    .base-personal-area-tab.is-active,
    .base-personal-area-tab[aria-current="page"] {
        padding-top: 1.05rem;
        border-top: none;
        border-left: 3px solid var(--color-primary);
        background-color: var(--color-primary-wash);
        box-shadow: none;
    }

    /* Änderungsprotokoll: 2026-08-15 | parent-agent | @skill-css-rules, @skill-change-provenance | Hamburger: Level-2 Unternav unter den Links */
    .base-bewerbungs-autopilot-subnav-level2 {
        width: 100%;
        margin-top: 0.5rem;
    }
}