/* ============================================================
   /data/css/ui/subnav.css
   - Shared sub-navigation styles
   - Uses legacy page class names so no markup changes are needed
   ============================================================ */

.clients-subnav-wrap,
.accounting-subnav-wrap,
.hosting-subnav-wrap {
    margin: 0 0 18px;
}

.clients-subnav,
.accounting-subnav,
.hosting-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.clients-subnav-link,
.accounting-subnav-link,
.hosting-subnav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #d7dbe3;
    text-decoration: none;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.clients-subnav-link:hover,
.clients-subnav-link:focus,
.accounting-subnav-link:hover,
.accounting-subnav-link:focus,
.hosting-subnav-link:hover,
.hosting-subnav-link:focus {
    text-decoration: none;
    color: #ffffff;
    background: rgba(255, 136, 0, 0.12);
    border-color: rgba(255, 136, 0, 0.35);
}

.clients-subnav-link.is-active,
.accounting-subnav-link.is-active,
.hosting-subnav-link.is-active {
    color: #ffffff;
    background: rgba(255, 136, 0, 0.18);
    border-color: rgba(255, 136, 0, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(255, 136, 0, 0.25);
}