/* =====================================================================
   ZIQSY CMS — VIEW GROUP: PEOPLE & PROJECTS
   ---------------------------------------------------------------------
   Scope: profile (My Profile + public show), employee directory,
   project/sprint boards + team members, task lists/cards.
   Strategy: CSS-only "Elevate Bootstrap". NO markup / class / JS changes.
   Builds on the tokens defined in css/design-system.css (--zq-*).

   Load order note: this file is linked BEFORE @stack('styles'), so any
   view that ships its own <style>/@push('styles') block (projects/index,
   tasks/index, profile/show) intentionally WINS over this layer. We
   therefore only polish classes those views leave unstyled, and keep
   every selector scoped to a people/projects container so nothing leaks
   into other view groups (finance, dashboards, calendar, auth).
   ===================================================================== */

/* ==================================================================== *
 * 0. SCOPING HOOKS
 *    Containers that uniquely identify this view group. We anchor most
 *    selectors to these so the polish cannot bleed elsewhere.
 *    - My Profile uses `#basic-info` / `#skillsList` / `#interestsList`
 *    - Directory uses `.employee-card`
 *    - Projects/sprints + team use `.sprints-container`, `#teamMembersTable`,
 *      `#teamMembersCards`, `.avatar-circle`, `.role-select`
 * ==================================================================== */

/* ==================================================================== *
 * 1. MY PROFILE  (resources/views/profile.blade.php)
 *    Plain Bootstrap cards in a 3 / 9 column layout, tabbed content.
 *    Targets only the panes that belong to this page.
 * ==================================================================== */

/* --- Sidebar identity card: lift the avatar, tidy the meta --- */
.tab-content #basic-info,                      /* presence => we are on profile page tabs */
#skillsList,
#interestsList { /* anchors used only for cascade specificity context */ }

/* Avatar image inside any profile/directory identity card */
.card-body.text-center > .mb-3 > img.rounded-circle,
.card-body.text-center > img.rounded-circle {
    box-shadow: var(--zq-shadow-md);
    border: 3px solid var(--zq-surface);
    outline: 1px solid var(--zq-border);
    transition: transform var(--zq-dur) var(--zq-ease),
                box-shadow var(--zq-dur) var(--zq-ease);
}
.card-body.text-center > .mb-3 > img.rounded-circle:hover,
.card-body.text-center > img.rounded-circle:hover {
    transform: scale(1.03);
    box-shadow: var(--zq-shadow-lg);
}

/* Profile navigation tabs — turn default tabs into a calmer, pill-ish row */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--zq-border);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--zq-brand-700);
    --bs-nav-tabs-link-active-border-color: transparent;
    border-bottom: 1px solid var(--zq-border);
    gap: .25rem;
}
.nav-tabs .nav-link {
    color: var(--zq-text-muted);
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--zq-radius-sm) var(--zq-radius-sm) 0 0;
    padding: .6rem 1rem;
    transition: color var(--zq-dur) var(--zq-ease),
                background-color var(--zq-dur) var(--zq-ease),
                border-color var(--zq-dur) var(--zq-ease);
}
.nav-tabs .nav-link:hover {
    color: var(--zq-brand-700);
    background-color: var(--zq-brand-50);
}
.nav-tabs .nav-link.active {
    color: var(--zq-brand-700);
    background-color: transparent;
    border-bottom-color: var(--zq-brand-500);
}

/* Quick-info rows: subtle label / value rhythm */
.tab-content small.text-muted { letter-spacing: .02em; }

/* --- Skills & Interests sub-cards (nested .card inside the panes) --- */
#skillsList .card,
#interestsList .card {
    border-color: var(--zq-border);
    background: var(--zq-surface-2);
    box-shadow: none;
    transition: transform var(--zq-dur) var(--zq-ease),
                box-shadow var(--zq-dur) var(--zq-ease),
                border-color var(--zq-dur) var(--zq-ease);
}
#skillsList .card:hover,
#interestsList .card:hover {
    transform: translateY(-2px);
    border-color: var(--zq-brand-200);
    box-shadow: var(--zq-shadow-sm);
}
#skillsList .card h6,
#interestsList .card h6 {
    color: var(--zq-text);
    font-weight: 700;
}
/* Cluster the descriptor badges with breathing room */
#skillsList .card .badge,
#interestsList .card .badge {
    margin: .15rem .2rem 0 0;
    font-weight: 600;
}

/* ==================================================================== *
 * 2. EMPLOYEE DIRECTORY  (resources/views/directory/index.blade.php)
 *    The view ships a tiny inline `.employee-card:hover` rule (it wins
 *    for transform/box-shadow). We refine everything it leaves alone:
 *    the avatar, name, role line, role/dept badges and skill chips.
 * ==================================================================== */
.employee-card {
    border: 1px solid var(--zq-border);
    border-radius: var(--zq-radius);
    background: var(--zq-surface);
    overflow: hidden;
}
/* Gentle brand accent strip on hover (inline rule owns the lift) */
.employee-card { position: relative; }
.employee-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--zq-brand-400), var(--zq-brand-600));
    opacity: 0;
    transition: opacity var(--zq-dur) var(--zq-ease);
}
.employee-card:hover::before { opacity: 1; }

.employee-card .card-body { padding: 1.4rem 1rem 1.1rem; }

/* Directory avatar: ring + soft shadow */
.employee-card img.rounded-circle {
    border: 3px solid var(--zq-surface);
    outline: 1px solid var(--zq-border);
    box-shadow: var(--zq-shadow-sm);
    transition: transform var(--zq-dur) var(--zq-ease);
}
.employee-card:hover img.rounded-circle { transform: scale(1.04); }

.employee-card .card-title {
    font-weight: 700;
    color: var(--zq-text);
    letter-spacing: -.01em;
}
.employee-card .text-muted.small { color: var(--zq-text-muted) !important; }

/* Skill chips: neutral, pill-soft so the dept badge stays the hero */
.employee-card .badge.bg-secondary {
    background: var(--zq-slate-100) !important;
    color: var(--zq-slate-600) !important;
    font-weight: 600;
    border-radius: var(--zq-radius-pill);
}
.employee-card .badge.bg-light {
    border: 1px solid var(--zq-border);
    color: var(--zq-text-muted) !important;
    border-radius: var(--zq-radius-pill);
}
/* Departments / "Head" badges already inherit brand/warning from DS layer */

/* "View Profile" button spacing */
.employee-card .btn.w-100 { margin-top: .35rem; }

/* Directory empty state */
.container-fluid .text-muted.py-5 .bi-person-x { color: var(--zq-slate-300); }

/* ==================================================================== *
 * 3. PROJECT / SPRINT — TEAM MEMBERS
 *    (resources/views/projects/partials/team-members.blade.php, shown
 *     inside projects/show). `.avatar-circle(-mobile)` ship WITHOUT any
 *     base size/shape here, so we must give them one. Scoped to the team
 *     tables/cards so HR pages (which define their own inline) are safe.
 * ==================================================================== */
#teamMembersTable .avatar-circle,
#teamMembersCards .avatar-circle-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    border-radius: 50%;
    box-shadow: var(--zq-shadow-sm), inset 0 0 0 2px rgba(255, 255, 255, .35);
}
#teamMembersTable .avatar-circle {
    width: 38px;
    height: 38px;
    font-size: .9rem;
}
#teamMembersCards .avatar-circle-mobile {
    width: 46px;
    height: 46px;
    font-size: 1.05rem;
}

/* Inline role dropdown — compact, on-brand focus */
.role-select,
.role-select-mobile {
    border-radius: var(--zq-radius-pill);
    border-color: var(--zq-border-strong);
    font-weight: 600;
    font-size: var(--zq-fs-sm);
    color: var(--zq-text);
}

/* Sprint id chip on the detail page */
.sprint-id-display code,
.sprint-id-display .bg-light {
    background: var(--zq-slate-100) !important;
    color: var(--zq-slate-700) !important;
    border-radius: var(--zq-radius-sm);
    font-weight: 600;
}

/* Sprint-detail header band (projects/show uses .bg-gradient-primary which
   Bootstrap leaves transparent by default → give it the shared hero spine) */
.card-header.bg-gradient-primary {
    background-image: var(--zq-hero-bg) !important;
    border-bottom: none;
}

/* ==================================================================== *
 * 4. PROJECTS INDEX / TASKS INDEX — GENTLE FALLBACKS
 *    These pages bring their own full <style> blocks (dark-navy theme),
 *    which load AFTER and win. We only touch classes they DON'T define,
 *    so there is zero visual fight: the small status / project chips and
 *    the inline progress bars in the sprint table.
 * ==================================================================== */

/* Soft "project name" chip used in the sprint + task tables */
.sprints-table .badge.bg-secondary.bg-opacity-10,
#teamMembersTable .badge.bg-secondary.bg-opacity-10,
#teamMembersCards .badge.bg-secondary.bg-opacity-10 {
    border: 1px solid var(--zq-border);
    border-radius: var(--zq-radius-sm);
    font-weight: 600;
}

/* The soft secondary chip relies on bg-opacity-10 for a pale fill, but the global
   `.badge.bg-secondary { background-color: <slate-600> !important }` override
   (ui-refresh.css) cancels the opacity — leaving low-contrast `.text-secondary`
   ink on solid slate (fails AA in BOTH themes: ~1.6 light / ~2.9 dark). Restore
   an explicit pale fill + readable ink. Specific enough (+ !important) to beat the
   global solid override and the .text-secondary utility. */
.badge.bg-secondary.bg-opacity-10 {
    background-color: var(--zq-slate-100, #f1f5f9) !important;
    color: var(--zq-slate-700, #334155) !important;
}
[data-bs-theme="dark"] .badge.bg-secondary.bg-opacity-10 {
    background-color: var(--zq-slate-700, #334155) !important;
    color: var(--zq-slate-100, #f1f5f9) !important;
}

/* Thin progress bars in the sprint table read a touch crisper */
.sprints-table .progress {
    background: var(--zq-slate-100);
    border-radius: var(--zq-radius-pill);
    overflow: hidden;
}
.sprints-table .progress-bar {
    border-radius: var(--zq-radius-pill);
}

/* ==================================================================== *
 * 5. DARK MODE
 *    Re-tint the surfaces/borders that we hard-anchored to light values.
 *    (Views with their own light-hard-coded inline blocks are out of our
 *     reach by design; we only adjust what this file owns.)
 * ==================================================================== */
[data-bs-theme="dark"] .employee-card,
[data-bs-theme="dark"] #skillsList .card,
[data-bs-theme="dark"] #interestsList .card {
    background: var(--zq-surface);
    border-color: var(--zq-border);
}
[data-bs-theme="dark"] #skillsList .card,
[data-bs-theme="dark"] #interestsList .card {
    background: var(--zq-surface-2);
}
[data-bs-theme="dark"] .employee-card img.rounded-circle,
[data-bs-theme="dark"] .card-body.text-center > .mb-3 > img.rounded-circle,
[data-bs-theme="dark"] .card-body.text-center > img.rounded-circle {
    border-color: var(--zq-surface);
    outline-color: var(--zq-border);
}
[data-bs-theme="dark"] .employee-card .badge.bg-secondary {
    background: var(--zq-slate-700) !important;
    color: var(--zq-slate-200) !important;
}
[data-bs-theme="dark"] .employee-card .badge.bg-light {
    border-color: var(--zq-border);
    color: var(--zq-text-muted) !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    background-color: rgba(0, 174, 239, .12);
}
[data-bs-theme="dark"] .sprint-id-display code,
[data-bs-theme="dark"] .sprint-id-display .bg-light,
[data-bs-theme="dark"] .sprints-table .progress {
    background: var(--zq-surface-2) !important;
    color: var(--zq-slate-200) !important;
}

/* projects/index hard-codes the sprint table to a white wrapper (#fff) with
   #333 cell text and a pale hover. Its inner <table class="table"> paints cells
   transparent, so the white wrapper shows through every row under Eclipse,
   stranding light/muted cell text on white (fails AA). Re-point the surface,
   cell ink and hover for dark; the always-dark gradient <thead> is unaffected. */
[data-bs-theme="dark"] .sprints-table {
    background: var(--zq-surface);
}
[data-bs-theme="dark"] .sprints-table td {
    color: var(--zq-text);
    border-color: var(--zq-border);
}
[data-bs-theme="dark"] .sprints-table tbody tr:hover {
    background: var(--zq-surface-2);
}
/* Mobile twin of the sprint table: the .sprint-card list hard-codes a white
   surface, a pale header gradient and navy #0a192f titles — invisible / glaring
   under Eclipse. Re-point them (these are display:none on desktop, so an axe
   desktop pass can't see them; verified at a mobile width instead). */
[data-bs-theme="dark"] .sprint-card {
    background: var(--zq-surface);
}
[data-bs-theme="dark"] .sprint-card-header {
    background: var(--zq-surface-2);
    border-bottom-color: var(--zq-border);
}
[data-bs-theme="dark"] .sprint-name {
    color: var(--zq-text);
}
[data-bs-theme="dark"] .sprint-description,
[data-bs-theme="dark"] .meta-item {
    color: var(--zq-text-muted);
}
[data-bs-theme="dark"] .meta-item i {
    color: var(--zq-text);
}
[data-bs-theme="dark"] .sprint-meta {
    border-top-color: var(--zq-border);
}

/* ==================================================================== *
 * 6. MOTION-REDUCE RESPECT
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    .employee-card,
    .employee-card::before,
    .employee-card img.rounded-circle,
    #skillsList .card,
    #interestsList .card,
    .card-body.text-center > .mb-3 > img.rounded-circle,
    .card-body.text-center > img.rounded-circle,
    .nav-tabs .nav-link {
        transition: none !important;
    }
    .employee-card:hover img.rounded-circle,
    .card-body.text-center > .mb-3 > img.rounded-circle:hover,
    .card-body.text-center > img.rounded-circle:hover,
    #skillsList .card:hover,
    #interestsList .card:hover {
        transform: none !important;
    }
}