/* ============================================================================
   Fragment Header Navigation - Dropdown Style
   Shared by all service fragments (subscription, accounting, etc.)
   ============================================================================ */

.fragment-nav,
.subscription-nav,
.marketing-nav {
    position: relative;
    display: inline-block;
    margin-bottom: 24px;
}

.fragment-nav-header,
.subscription-nav-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--theme-bg-card, rgba(255,255,255,0.04));
    border: 1px solid var(--theme-border-light, rgba(255,255,255,0.08));
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 220px;
    width: 100%;
    color: inherit;
}

.fragment-nav-header:hover,
.subscription-nav-header:hover {
    background: var(--theme-bg-hover, rgba(255,255,255,0.08));
    border-color: var(--theme-border-medium, rgba(255,255,255,0.12));
}

.fragment-nav-info,
.subscription-nav-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.fragment-nav-title,
.subscription-nav-plan {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-primary, #f5eedd);
}

.fragment-nav-header::after,
.subscription-nav-header::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    color: var(--theme-text-secondary, #e1d6b6);
    transition: transform 0.2s;
}

.fragment-nav-links,
.subscription-nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--theme-bg-tertiary, #3f3a2f);
    border: 1px solid var(--theme-border-light, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    min-width: 220px;
}

.fragment-nav.open .fragment-nav-links,
.subscription-nav.open .subscription-nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fragment-nav.open .fragment-nav-header::after,
.subscription-nav.open .subscription-nav-header::after {
    transform: rotate(180deg);
}

.fragment-nav-link,
.subscription-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text-secondary, #e1d6b6);
    text-decoration: none;
    transition: all 0.15s;
}

.fragment-nav-link:hover,
.subscription-nav-link:hover {
    background: var(--theme-bg-hover, rgba(255,255,255,0.08));
    color: var(--theme-text-primary, #f5eedd);
}

.fragment-nav-link.active,
.subscription-nav-link.active {
    background: var(--theme-text-accent, #f1c574);
    color: var(--theme-bg-primary, #1b1915);
    font-weight: 600;
}

.fragment-nav-link.active:hover,
.subscription-nav-link.active:hover {
    background: var(--theme-text-accent, #f1c574);
}

.fragment-nav-link i,
.subscription-nav-link i {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.fragment-nav-link span,
.subscription-nav-link span {
    flex: 1;
}

.fragment-nav-divider,
.subscription-nav-divider {
    height: 1px;
    background: var(--theme-border-light, rgba(255,255,255,0.08));
    margin: 8px 0;
}

/* Status badges for fragment headers */
.fragment-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.fragment-status.status-active,
.fragment-status.status-confirmed {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.fragment-status.status-pending {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
}

.fragment-status.status-inactive,
.fragment-status.status-cancelled {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}