/* ============================================================
   Carbon Design System — Navigation / UI Shell
   Sidebar oscuro #161616, top bar blanca con borde inferior
   Referencia: https://carbondesignsystem.com/components/ui-shell/
   ============================================================ */

/* ── Top navbar / Header ── */
.navbar-empleadores {
    background-color: #161616 !important;  /* Carbon UI Shell header */
    background-image: none !important;
    border-bottom: 1px solid #393939 !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-height: 3rem;
}
.navbar-empleadores .navbar-brand {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    color: #f4f4f4 !important;
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.1px;
    text-shadow: none;
    padding: 0 1rem;
    line-height: 3rem;
}
.navbar-empleadores .navbar-brand:hover {
    color: #f4f4f4 !important;
    background-color: #353535 !important;
    text-decoration: none;
    transform: none;
    transition: background-color 70ms ease;
}
.navbar-empleadores .navbar-toggler {
    border-color: #6f6f6f;
    border-radius: 0;
}
.navbar-empleadores .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28244,244,244,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Sidebar / Left nav panel ── */
.nav-scrollable {
    background-color: #161616 !important;    /* Carbon UI Shell nav */
    background-image: none !important;
    border-right: 1px solid #393939 !important;
}

/* ── Nav links ── */
.nav-scrollable .nav-link {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    color: #c6c6c6 !important;
    padding: 0.875rem 1rem;
    margin: 0;
    border-radius: 0 !important;
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.16px;
    border-left: 4px solid transparent;
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    transition: background-color 70ms ease, color 70ms ease, border-color 70ms ease;
    transform: none !important;
    box-shadow: none !important;
}
.nav-scrollable .nav-link:hover {
    background-color: #353535 !important;
    color: #f4f4f4 !important;
    border-left-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}
.nav-scrollable .nav-link.active {
    background-color: #393939 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-left: 4px solid var(--carbon-blue) !important;
    box-shadow: none !important;
    font-weight: 600;
}
.nav-scrollable .nav-link.active:hover {
    background-color: #4c4c4c !important;
    transform: none !important;
}

/* ── Icons en nav ── */
.nav-scrollable .nav-link span[class*="bi-"] {
    margin-right: 0.75rem;
    font-size: 1rem;
    width: 1.25rem;
    display: inline-block;
    text-align: center;
    flex-shrink: 0;
}

/* ── Nav section divider ── */
.nav-divider {
    border-color: #393939;
    margin: 0.25rem 0;
    opacity: 1;
}

/* ── Nav section title (opcional) ── */
.nav-section-title {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: #6f6f6f;
    padding: 0.75rem 1rem 0.25rem;
    cursor: default;
    user-select: none;
}

/* ── Logout button ── */
.logout-btn {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    background: none !important;
    border: none !important;
    border-left: 4px solid transparent !important;
    width: 100%;
    text-align: left;
    color: #fa4d56 !important;         /* Carbon danger/red en dark */
    font-weight: 400;
    font-size: 0.875rem;
    border-radius: 0 !important;
    padding: 0.875rem 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    transition: background-color 70ms ease;
    cursor: pointer;
}
.logout-btn:hover {
    background-color: rgba(250, 77, 86, 0.1) !important;
    color: #fa4d56 !important;
}

/* ── Top row (header bar en Blazor) ── */
.top-row {
    background-color: #161616 !important;
    border-bottom: 1px solid #393939 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1.5rem;
}
.top-row ::deep a, .top-row ::deep .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.875rem;
    color: #78a9ff;              /* Carbon link en dark */
}
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
    color: #a6c8ff;
    text-decoration: none;
}

/* ── User info en header ── */
.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}
.user-welcome {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    color: #c6c6c6;
    font-weight: 400;
    font-size: 0.875rem;
}
.current-time {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    color: #8d8d8d;
    font-size: 0.8125rem;
    letter-spacing: 0.32px;
}

/* ── Responsive ── */
@media (max-width: 640.98px) {
    .top-row { justify-content: space-between; }
    .top-row ::deep a, .top-row ::deep .btn-link { margin-left: 0; }
}
@media (max-width: 768px) {
    .navbar-empleadores .navbar-brand { font-size: 0.875rem; }
    .nav-scrollable .nav-link { padding: 0.75rem 1rem; }
}

/* ── Sidebar siempre visible en escritorio ── */
@media (min-width: 641px) {
    .sidebar .navbar-toggler { display: none; }
    .sidebar .collapse        { display: block !important; }
    .sidebar .nav-scrollable  {
        height: calc(100vh - 3rem);
        overflow-y: auto;
    }
}

/* ── Layout principal (override scoped CSS para build publicado) ── */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
}
.page > main { flex: 1; }

@media (min-width: 641px) {
    .page {
        flex-direction: row !important;
    }
    .page > .sidebar {
        width: 250px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        flex-shrink: 0;
    }
    .page > main {
        margin-left: 250px;
        width: calc(100% - 250px);
        min-height: 100vh;
    }
    .page > main > .top-row {
        position: sticky;
        top: 0;
        z-index: 999;
    }
}