/* ============================================================
   🗂️  CareerBlazor — Sidebar + AppBar  (RTL / Arabic)
   ============================================================
   Custom fixed sidebar — no MudDrawer dependency
   ============================================================ */

/* ───────── CSS Variables ───────── */
:root {
    --sb-w:          260px;    /* expanded width  */
    --sb-mini:        68px;    /* collapsed width */
    --sb-top:         64px;    /* AppBar height   */
    --sb-bg:         #ffffff;
    --sb-border:      rgba(37,99,235, 0.10);
    --sb-shadow:     -3px 0 20px rgba(15,23,42, 0.07);

    --sb-text:       #4b5563;
    --sb-text-head:  #94a3b8;
    --sb-text-hover: #1d4ed8;
    --sb-text-act:   #2563eb;
    --sb-bg-hover:   rgba(37,99,235, 0.06);
    --sb-bg-act:     rgba(37,99,235, 0.10);
    --sb-accent:     #2563eb;
    --sb-logout:     #ef4444;
    --sb-logout-bg:  rgba(239,68,68, 0.07);

    --sb-radius:     10px;
    --sb-tr:         220ms cubic-bezier(0.4,0,0.2,1);

    --app-bar-bg:    rgba(255,255,255, 0.88);
    --app-bar-bdr:   rgba(226,232,240, 1);
}

[data-theme="dark"] {
    --sb-bg:         #1e293b;
    --sb-border:      rgba(255,255,255, 0.06);
    --sb-shadow:     -3px 0 20px rgba(0,0,0, 0.30);

    --sb-text:       #94a3b8;
    --sb-text-head:  #475569;
    --sb-text-hover: #93c5fd;
    --sb-text-act:   #60a5fa;
    --sb-bg-hover:   rgba(96,165,250, 0.08);
    --sb-bg-act:     rgba(96,165,250, 0.14);
    --sb-accent:     #60a5fa;
    --sb-logout:     #f87171;
    --sb-logout-bg:  rgba(248,113,113, 0.08);

    --app-bar-bg:    rgba(15,23,42, 0.90);
    --app-bar-bdr:   rgba(255,255,255, 0.06);
}

/* ───────── AppBar Override ───────── */
.career-appbar.mud-appbar {
    background : var(--app-bar-bg) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid var(--app-bar-bdr) !important;
    box-shadow : none !important;
    height     : var(--sb-top) !important;
    padding-right: 12px !important;
    padding-left : 12px !important;
    z-index    : 1300 !important;
    transition : padding-right var(--sb-tr) !important;
    color      : var(--modern-text-primary, #0f172a) !important;
}

/* When sidebar is hovered / expanded, shift AppBar padding */
body:has(.career-sidebar.sidebar-expanded) .career-appbar.mud-appbar {
    padding-right: calc(var(--sb-w) + 12px) !important;
}

[data-theme="dark"] .career-appbar.mud-appbar {
    color: #f1f5f9 !important;
}

/* ── Brand ── */
.career-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}

.career-brand-icon {
    width : 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(37,99,235,0.30);
}

.career-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.career-brand-title {
    font-size  : 14px;
    font-weight: 700;
    color      : var(--modern-text-primary, #0f172a);
}

.career-brand-sub {
    font-size: 10.5px;
    color    : var(--modern-text-muted, #94a3b8);
}

[data-theme="dark"] .career-brand-title { color: #f1f5f9; }

/* ── Icon Buttons ── */
.career-icon-btn {
    border-radius: 10px !important;
    transition   : background var(--sb-tr) !important;
}

.career-icon-btn:hover {
    background: rgba(37,99,235,0.08) !important;
}

/* ── Avatar Button ── */
.career-avatar-btn {
    transition: box-shadow var(--sb-tr) !important;
}

.career-avatar-btn:hover {
    box-shadow: 0 0 0 3px rgba(37,99,235,0.25) !important;
}

/* ── User Menu ── */
.career-menu-header {
    display    : flex;
    align-items: center;
    gap        : 12px;
    padding    : 14px 16px;
    min-width  : 220px;
}

.career-menu-name {
    font-weight: 600;
    font-size  : 14px;
    color      : var(--modern-text-primary, #0f172a);
}

.career-menu-email {
    font-size: 11px;
    color    : var(--modern-text-muted, #94a3b8);
    margin-top: 2px;
}

/* ───────── SIDEBAR (Custom Fixed aside) ───────── */
.career-sidebar {
    position  : fixed;
    top       : var(--sb-top);
    right     : 0;
    bottom    : 0;
    width     : var(--sb-mini);
    background: var(--sb-bg);
    border-left: 1px solid var(--sb-border);
    box-shadow : var(--sb-shadow);
    z-index   : 1200;
    overflow-x: hidden;
    overflow-y: auto;    /* ← scroll enabled */
    transition : width var(--sb-tr);
    display   : flex;
    flex-direction: column;

    /* Thin custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(37,99,235,0.18) transparent;
}

.career-sidebar::-webkit-scrollbar          { width: 4px; }
.career-sidebar::-webkit-scrollbar-track   { background: transparent; }
.career-sidebar::-webkit-scrollbar-thumb   {
    background    : rgba(37,99,235,0.20);
    border-radius : 4px;
}

/* Expanded (hover) state */
.career-sidebar.sidebar-expanded {
    width     : var(--sb-w);
    box-shadow: -5px 0 30px rgba(37,99,235,0.10);
}

/* Mobile open state */
.career-sidebar.sidebar-mobile-open {
    width  : var(--sb-w) !important;
    z-index: 1500 !important;
    box-shadow: -6px 0 40px rgba(15,23,42,0.15);
}

/* Mobile overlay */
.career-overlay {
    position  : fixed;
    inset     : 0;
    background: rgba(15,23,42,0.45);
    z-index   : 1499;
    animation : fadeIn 200ms ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Mobile close button */
.sidebar-mobile-close {
    display        : flex;
    justify-content: flex-start;
    padding        : 8px 12px 0;
}

/* MudMainContent offset — RTL: margin-right */
.career-main-content.mud-main-content {
    padding-right: calc(var(--sb-mini) + 8px) !important;
    padding-left : 0 !important;
    transition   : padding-right var(--sb-tr) !important;
    min-height   : calc(100vh - var(--sb-top));
}

/* ───────── Sidebar Nav ───────── */
.sidebar-nav {
    display        : flex;
    flex-direction : column;
    padding        : 10px 8px 10px 4px;
    flex           : 1;
    min-height     : 0;   /* important — allows flex scroll */
}

/* ── User Card ── */
.snav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px 14px;
    overflow: hidden;
    white-space: nowrap;
    min-height: 70px;
}

.snav-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37,99,235,0.25);
}

.snav-user-info {
    overflow   : hidden;
    flex       : 1;
    transition : opacity var(--sb-tr), width var(--sb-tr);
}

.snav-user-name {
    font-size  : 13px;
    font-weight: 600;
    color      : var(--sb-text);
    overflow   : hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snav-user-status {
    display    : flex;
    align-items: center;
    gap        : 5px;
    font-size  : 11px;
    color      : #10b981;
    margin-top : 2px;
}

.snav-status-dot {
    width        : 7px;
    height       : 7px;
    border-radius: 50%;
    background   : #10b981;
    flex-shrink  : 0;
    animation    : statusPulse 2.5s ease infinite;
}

@keyframes statusPulse {
    0%,100% { transform: scale(1);    opacity: 1; }
    50%     { transform: scale(0.8);  opacity: 0.5; }
}

/* ── Divider ── */
.snav-divider {
    height    : 1px;
    background: var(--sb-border);
    margin    : 6px 2px;
    flex-shrink: 0;
}

/* ── Section Label ── */
.snav-section-label {
    font-size  : 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color      : var(--sb-text-head);
    padding    : 10px 12px 4px;
    white-space: nowrap;
    overflow   : hidden;
    flex-shrink: 0;
}

/* ── Nav Links ── */
.snav-link {
    display      : flex;
    align-items  : center;
    gap          : 10px;
    padding      : 9px 10px;
    border-radius: var(--sb-radius);
    color        : var(--sb-text);
    text-decoration: none !important;
    font-size    : 13.5px;
    font-weight  : 500;
    transition   : all var(--sb-tr);
    white-space  : nowrap;
    overflow     : hidden;
    position     : relative;
    cursor       : pointer;
    flex-shrink  : 0;
    margin-bottom: 2px;
}

.snav-link:hover {
    background: var(--sb-bg-hover);
    color     : var(--sb-text-hover);
}

.snav-link.active {
    background: var(--sb-bg-act);
    color     : var(--sb-text-act);
    font-weight: 600;
}

/* Active indicator — right bar (RTL) */
.snav-link.active::after {
    content      : '';
    position     : absolute;
    right        : 0;
    top          : 18%;
    height       : 64%;
    width        : 3px;
    background   : var(--sb-accent);
    border-radius: 3px 0 0 3px;
}

/* ── Icon ── */
.snav-icon {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 28px;
    height         : 28px;
    flex-shrink    : 0;
    border-radius  : 7px;
    transition     : background var(--sb-tr);
    color          : inherit;
}

.snav-link:hover .snav-icon   { background: rgba(37,99,235,0.08); }
.snav-link.active .snav-icon  { background: rgba(37,99,235,0.12); }

/* ── Label ── */
.snav-label {
    flex     : 1;
    overflow : hidden;
    text-overflow: ellipsis;
    transition: opacity var(--sb-tr);
}

/* ── Tooltip (mini mode) ── */
.snav-tooltip {
    position  : fixed;
    right     : calc(var(--sb-mini) + 8px);
    background: #1e293b;
    color     : #f1f5f9;
    font-size : 12px;
    padding   : 5px 11px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity   : 0;
    transform : translateX(6px);
    transition: opacity 150ms, transform 150ms;
    z-index   : 2000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.20);
}

.snav-link:hover .snav-tooltip {
    opacity  : 1;
    transform: translateX(0);
}

/* Hide tooltip when expanded */
.career-sidebar.sidebar-expanded .snav-tooltip,
.career-sidebar.sidebar-mobile-open .snav-tooltip {
    display: none;
}

/* ── Logout ── */
.snav-logout {
    color: var(--sb-logout) !important;
}

.snav-logout:hover {
    background: var(--sb-logout-bg) !important;
    color     : var(--sb-logout) !important;
}

.snav-logout .snav-icon {
    color: var(--sb-logout) !important;
}

/* ── Spacer ── */
.snav-spacer {
    flex: 1;
    min-height: 16px;
}

/* ── Hidden class (mini mode) ── */
.snav-hidden {
    opacity : 0;
    width   : 0;
    overflow: hidden;
    pointer-events: none;
}

/* ───────── Responsive ───────── */
@media (max-width: 960px) {
    .career-main-content.mud-main-content {
        padding-right: 0 !important;
    }
    .career-appbar.mud-appbar {
        padding-right: 12px !important;
    }
}

/* ============================================================
   🌙 DARK MODE SIDEBAR OVERRIDES
   ============================================================ */

/* === Scrollbar (hardcoded blue) === */
[data-theme="dark"] .career-sidebar {
    scrollbar-color: rgba(96,165,250,0.30) transparent;
}

[data-theme="dark"] .career-sidebar::-webkit-scrollbar-thumb {
    background: rgba(96,165,250,0.30);
}

/* === Expanded sidebar box-shadow (hardcoded blue) === */
[data-theme="dark"] .career-sidebar.sidebar-expanded {
    box-shadow: -5px 0 30px rgba(96,165,250,0.15);
}

/* === Mobile open sidebar box-shadow === */
[data-theme="dark"] .career-sidebar.sidebar-mobile-open {
    box-shadow: -6px 0 40px rgba(0,0,0,0.40);
}

/* === Nav link hover/active icon backgrounds (hardcoded blue) === */
[data-theme="dark"] .snav-link:hover .snav-icon {
    background: rgba(96,165,250,0.12);
}

[data-theme="dark"] .snav-link.active .snav-icon {
    background: rgba(96,165,250,0.18);
}

/* === Nav link hover/active backgrounds already use vars, ensure dark === */
[data-theme="dark"] .snav-link:hover {
    background: var(--sb-bg-hover);
    color: var(--sb-text-hover);
}

[data-theme="dark"] .snav-link.active {
    background: var(--sb-bg-act);
    color: var(--sb-text-act);
}

/* === Avatar hover ring (hardcoded blue) === */
[data-theme="dark"] .career-avatar-btn:hover {
    box-shadow: 0 0 0 3px rgba(96,165,250,0.30) !important;
}

/* === Icon button hover (hardcoded blue) === */
[data-theme="dark"] .career-icon-btn:hover {
    background: rgba(96,165,250,0.12) !important;
}

/* === Appbar padding transition === */
[data-theme="dark"] body:has(.career-sidebar.sidebar-expanded) .career-appbar.mud-appbar {
    padding-right: calc(var(--sb-w) + 12px) !important;
}