/* Shared Fox Network service rail and theme */
:root {
    --fox-rail-bg: rgba(255, 255, 255, .94);
    --fox-rail-text: #2b2d42;
    --fox-rail-muted: #778094;
    --fox-rail-border: rgba(43, 45, 66, .09);
    --fox-rail-hover: #fff1e9;
}

[data-theme="dark"] {
    --fox-rail-bg: rgba(35, 37, 57, .97);
    --fox-rail-text: #f3f4f8;
    --fox-rail-muted: #a3a8b8;
    --fox-rail-border: rgba(255, 255, 255, .1);
    --fox-rail-hover: rgba(233, 122, 67, .18);
}

.fox-service-sidebar {
    position: fixed;
    z-index: 1100;
    inset-block: 18px;
    inset-inline-start: 18px;
    display: flex;
    flex-direction: column;
    width: 224px;
    padding: 17px 13px 13px;
    overflow: auto;
    border: 1px solid var(--fox-rail-border);
    border-radius: 22px;
    color: var(--fox-rail-text);
    background: var(--fox-rail-bg);
    box-shadow: 0 16px 48px rgba(30, 33, 52, .14);
    backdrop-filter: blur(18px);
    transition: background .25s ease, color .25s ease;
}

.fox-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 2px 7px 17px; border-bottom: 1px solid var(--fox-rail-border); color: inherit; text-decoration: none; }
.fox-sidebar-brand img { width: 42px; height: 42px; object-fit: contain; }
.fox-sidebar-brand strong, .fox-sidebar-brand small { display: block; }
.fox-sidebar-brand strong { font: 800 .75rem Arial, sans-serif; letter-spacing: .1em; }
.fox-sidebar-brand small { margin-top: 4px; color: var(--fox-rail-muted); font-size: .75rem; }
.fox-sidebar-label { display: block; margin: 17px 8px 7px; color: var(--fox-rail-muted); font-size: .7rem; font-weight: 800; }
.fox-sidebar-nav { display: grid; gap: 4px; }
.fox-sidebar-nav a { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 10px; border-radius: 11px; color: var(--fox-rail-text); font-size: .82rem; font-weight: 600; text-decoration: none; transition: background .18s, color .18s, transform .18s; }
.fox-sidebar-nav a i { width: 18px; color: var(--fox-rail-muted); text-align: center; }
.fox-sidebar-nav a:hover, .fox-sidebar-nav a.is-active { color: #a94720; background: var(--fox-rail-hover); }
.fox-sidebar-nav a:hover { transform: translateX(-2px); }
[data-theme="dark"] .fox-sidebar-nav a:hover, [data-theme="dark"] .fox-sidebar-nav a.is-active { color: #ffb899; }
.fox-sidebar-nav a.is-active i { color: var(--primary, #e97a43); }
.fox-sidebar-vouchers { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.fox-sidebar-vouchers a { display: flex; justify-content: center; gap: 4px; padding: 7px 4px; border: 1px solid var(--fox-rail-border); border-radius: 9px; color: var(--fox-rail-muted); font-size: .7rem; text-decoration: none; transition: .18s ease; }
.fox-sidebar-vouchers a span { color: var(--fox-rail-text); font-weight: 800; }
.fox-sidebar-vouchers a:hover { border-color: var(--primary, #e97a43); color: var(--fox-rail-text); background: var(--fox-rail-hover); }
.fox-sidebar-bottom { display: grid; gap: 11px; margin-top: auto; padding-top: 18px; }
.fox-sidebar-theme { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--fox-rail-border); border-radius: 11px; color: var(--fox-rail-text); background: transparent; font: inherit; font-size: .78rem; cursor: pointer; }
.fox-sidebar-theme:hover { background: var(--fox-rail-hover); }
.fox-sidebar-theme i { color: var(--primary, #e97a43); }
.fox-sidebar-help { padding: 0 9px; color: var(--fox-rail-muted); font-size: .7rem; }
.fox-sidebar-help a { color: var(--primary, #e97a43); font-weight: 800; }

.fx-has-sidebar { padding-inline-start: 260px !important; }
.fx-has-sidebar > .login-container { margin-inline-start: auto; margin-inline-end: auto; }
.fx-status-body.fx-has-sidebar { padding-inline-start: 260px; }
.fx-campaign-body.fx-has-sidebar { padding-inline-start: 260px; }
.fx-landing-body.fx-has-sidebar { padding-inline-start: 260px; }

@media (max-width: 960px) {
    .fox-service-sidebar {
        inset: auto 10px 10px;
        flex-direction: row;
        align-items: center;
        width: auto;
        height: 70px;
        padding: 5px 8px;
        overflow: hidden;
        border-radius: 18px;
    }
    .fox-sidebar-brand, .fox-sidebar-label, .fox-sidebar-vouchers, .fox-sidebar-help { display: none; }
    .fox-sidebar-nav { display: flex; flex: 1; justify-content: space-around; gap: 2px; min-width: 0; }
    .fox-sidebar-nav a { flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 54px; padding: 3px 1px; font-size: .62rem; }
    .fox-sidebar-nav a i { width: auto; font-size: 1rem; }
    .fox-sidebar-nav a span { display: none; }
    .fox-sidebar-nav a:hover { transform: translateY(-1px); }
    .fox-sidebar-bottom { margin: 0; padding: 0 0 0 5px; }
    .fox-sidebar-theme { display: grid; width: 42px; min-height: 42px; place-items: center; padding: 0; border-radius: 12px; }
    .fox-sidebar-theme span { display: none; }
    .fx-has-sidebar, .fx-status-body.fx-has-sidebar, .fx-campaign-body.fx-has-sidebar, .fx-landing-body.fx-has-sidebar { padding-inline-start: revert !important; padding-bottom: 96px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .fox-sidebar-nav a, .fox-sidebar-vouchers a, .fox-sidebar-theme { transition: none; }
}