/* ═══════════════════════════════════════════════════════
   Rewire Solution – Global Styles  (LTR)
   ═══════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

:root {
    --rewire-primary:       #2563eb;
    --rewire-primary-light: #eff6ff;
    --rewire-primary-dark:  #1d4ed8;
    --rewire-success:       #16a34a;
    --rewire-warning:       #d97706;
    --rewire-danger:        #dc2626;
    --rewire-border:        #e5e7eb;
    --rewire-bg:            #f8fafc;
    --rewire-card:          #ffffff;
    --rewire-text:          #111827;
    --rewire-muted:         #6b7280;
    --rewire-radius:        12px;
    --rewire-shadow:        0 1px 4px rgba(0,0,0,0.07);
    --rewire-shadow-md:     0 4px 16px rgba(0,0,0,0.10);
}
/* ── Global focus indicator (WCAG 2.4.7) ────────────── */
:focus-visible {
    outline: 2px solid var(--rewire-primary-mid);
    outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--rewire-primary-mid);
    outline-offset: 2px;
    border-radius: 4px;
}



body {
    background: var(--rewire-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--rewire-text);
    direction: ltr;
    text-align: left;
}

/* ── Layout ─────────────────────────────────────────── */
.rewire-page {
    min-height: 100vh;
    background: var(--rewire-bg);
}

.dashboard-hero {
    background: #fff;
    border-bottom: 1px solid var(--rewire-border);
    padding: 2rem 2.5rem;
}

.hero-greeting {
    background: var(--rewire-primary-light);
    color: var(--rewire-primary);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rewire-text);
    margin-bottom: 0.25rem;
}

.hero-sub {
    color: var(--rewire-muted);
    margin-bottom: 0;
    font-size: 0.95rem;
}

.dashboard-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    padding: 1.5rem 2.5rem;
    align-items: start;
}

.dashboard-main  { min-width: 0; }
.dashboard-sidebar { display: flex; flex-direction: column; gap: 1rem; }

/* ── Navigation ─────────────────────────────────────── */
.rewire-nav {
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--rewire-border);
    padding: 0 1.5rem;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
    direction: ltr;
}

.rewire-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--rewire-text);
    margin-right: 1.5rem;
    min-width: 160px;
    text-decoration: none;
}

.brand-icon  { color: var(--rewire-primary); font-size: 1.25rem; }
.brand-name  { color: var(--rewire-text); }

.rewire-nav-tabs { display: flex; flex: 1; }

.nav-tab {
    padding: 0 1rem;
    height: 56px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--rewire-muted);
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
}
.nav-tab:hover          { color: var(--rewire-primary); }
.nav-tab.active         { color: var(--rewire-primary); border-bottom-color: var(--rewire-primary); }
.nav-tab-manager        { color: var(--rewire-warning) !important; }
.nav-tab-manager.active { border-bottom-color: var(--rewire-warning); }

.rewire-nav-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.user-info   { text-align: right; }
.user-name   { font-size: 0.875rem; font-weight: 600; }
.user-role   { font-size: 0.72rem; color: var(--rewire-muted); }

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rewire-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.small-avatar { width: 30px; height: 30px; font-size: 0.65rem; }

.btn-signout {
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #9ca3af;
    background: white;
    color: #111827 !important;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-weight: 600;
}
.btn-signout:hover { background: #f3f4f6; color: #000000 !important; border-color: #6b7280; }

/* ── Cards / Sidebar ─────────────────────────────────── */
.sidebar-card {
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
    padding: 1rem;
    box-shadow: var(--rewire-shadow);
}

.sidebar-card-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--rewire-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.sidebar-link {
    display: block;
    padding: 0.4rem 0;
    font-size: 0.875rem;
    color: var(--rewire-text);
    text-decoration: none;
    border-bottom: 1px solid var(--rewire-border);
    transition: color 0.15s;
}
.sidebar-link:last-child { border-bottom: none; }
.sidebar-link:hover      { color: var(--rewire-primary); }

/* ── Progress Card ───────────────────────────────────── */
.progress-card {
    background: var(--rewire-primary-light);
    border: 1px solid #bfdbfe;
    border-radius: var(--rewire-radius);
    padding: 1rem 1.25rem;
}
.progress-label  { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--rewire-primary); }
.progress-percent { font-size: 2rem; font-weight: 800; color: var(--rewire-primary); line-height: 1.1; }

/* ── Sections ────────────────────────────────────────── */
.section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--rewire-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* ── Buttons (unified) ───────────────────────────────── */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.btn-primary         { background: var(--rewire-primary); border-color: var(--rewire-primary); }
.btn-primary:hover   { background: var(--rewire-primary-dark); border-color: var(--rewire-primary-dark); }
.btn-success         { background: var(--rewire-success); border-color: var(--rewire-success); }
.btn-success:hover   { background: #15803d; border-color: #15803d; }
.btn-outline-primary { color: var(--rewire-primary); border-color: var(--rewire-primary); }
.btn-outline-primary:hover { background: var(--rewire-primary-light); }
.btn-ghost {
    background: transparent;
    border: 1px solid var(--rewire-border);
    color: var(--rewire-muted);
    font-size: 0.8rem;
}
.btn-ghost:hover { background: #f3f4f6; }
.btn-signout-link { background: none; border: none; color: var(--rewire-muted); cursor: pointer; font-size: 0.875rem; }

/* ── Search ──────────────────────────────────────────── */
.rewire-search {
    border-radius: 8px;
    border: 1px solid var(--rewire-border);
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    background: #fff;
    box-shadow: var(--rewire-shadow);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rewire-search:focus {
    border-color: var(--rewire-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
    outline: 2px solid var(--rewire-primary);
    outline-offset: 2px;
}

/* ── Quick Links ─────────────────────────────────────── */
.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.quick-link-card {
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--rewire-text);
    text-decoration: none;
    box-shadow: var(--rewire-shadow);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s;
    cursor: pointer;
    text-align: center;
}
.quick-link-card:hover {
    box-shadow: var(--rewire-shadow-md);
    border-color: var(--rewire-primary);
    transform: translateY(-2px);
    color: var(--rewire-primary);
}
.ql-icon { font-size: 1.5rem; }

/* Next Task Banner */
.next-task-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: var(--rewire-radius);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* ── Stage cards ─────────────────────────────────────── */
.stage-card {
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    box-shadow: var(--rewire-shadow);
    transition: box-shadow 0.15s;
}
.stage-card:hover      { box-shadow: var(--rewire-shadow-md); }
.stage-card.stage-completed { opacity: 0.8; }
.stage-card.stage-locked    { opacity: 0.55; }
.stage-card.stage-current   { border-color: var(--rewire-primary); background: #fafcff; }

.stage-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; }
.stage-title { font-weight: 600; margin: 0.2rem 0 0.2rem; font-size: 1rem; }
.stage-desc  { color: var(--rewire-muted); font-size: 0.85rem; margin-bottom: 0; }
.stage-label-tag {
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--rewire-primary);
    background: var(--rewire-primary-light);
    border-radius: 4px;
    padding: 0.1rem 0.5rem;
}
.stage-dot-current {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--rewire-primary);
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(37,99,235,0); }
}

/* ── Priority Tasks (sidebar) ────────────────────────── */
.priority-task {
    background: var(--rewire-bg);
    border: 1px solid var(--rewire-border);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.6rem;
}
.priority-task-top  { background: var(--rewire-primary-light); border-color: #bfdbfe; }
.priority-badge     { font-size: 0.65rem; font-weight: 700; color: var(--rewire-primary); letter-spacing: 0.06em; margin-bottom: 0.3rem; }
.priority-title     { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; }
.priority-due       { font-size: 0.75rem; color: var(--rewire-warning); margin-bottom: 0.3rem; }

/* ── Task cards ──────────────────────────────────────── */
.task-card {
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    box-shadow: var(--rewire-shadow);
}
.task-card:hover        { box-shadow: var(--rewire-shadow-md); }
.task-card-done         { opacity: 0.7; }
.task-card-active       { border-color: var(--rewire-primary); background: #fafcff; }
.task-title             { font-weight: 600; font-size: 0.9rem; margin-bottom: 0; }
.task-title-done        { text-decoration: line-through; color: var(--rewire-muted); }

.task-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.2rem;
    flex-wrap: wrap;
}
.task-due      { font-size: 0.72rem; color: var(--rewire-warning); }
.task-type-tag { font-size: 0.68rem; background: #f3f4f6; border-radius: 4px; padding: 0.1rem 0.4rem; color: var(--rewire-muted); }
.task-duration { font-size: 0.68rem; color: var(--rewire-muted); }

.task-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}
.task-badge-upcoming   { background: #f3f4f6; color: var(--rewire-muted); }
.task-badge-inprogress { background: #dbeafe; color: var(--rewire-primary); }
.task-badge-completed  { background: #dcfce7; color: var(--rewire-success); }

.task-check   { flex-shrink: 0; padding-top: 2px; }
.task-info    { flex: 1; min-width: 0; }
.task-actions { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0; }

.check-btn {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    transition: all 0.15s;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    line-height: 1;
}
.check-btn-done     { border-color: var(--rewire-success); background: var(--rewire-success); color: #fff; }
.check-btn-done:hover { background: #15803d; }
.check-btn-progress { border-color: var(--rewire-primary); background: #dbeafe; }
.check-btn-progress:hover { background: #bfdbfe; }
.check-btn-empty    { border-color: var(--rewire-border); }
.check-btn-empty:hover { border-color: var(--rewire-primary); background: var(--rewire-primary-light); }

.task-expanded {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--rewire-border);
    animation: fadeDown 0.2s ease;
}
@keyframes fadeDown {
    from { opacity:0; transform:translateY(-4px); }
    to   { opacity:1; transform:translateY(0); }
}
.task-desc-full  { font-size: 0.875rem; color: var(--rewire-muted); margin-bottom: 0.5rem; }
.task-action-hint { font-size: 0.8rem; color: var(--rewire-success); font-style: italic; }

.task-more-hint {
    font-size: 0.7rem; color: var(--rewire-primary);
    white-space: nowrap;
}
.task-chevron {
    font-size: 1.35rem; color: var(--rewire-primary); font-weight: 700;
    transition: transform 0.2s; line-height: 1;
}
.task-chevron.rotated { transform: rotate(90deg); }

/* Filter tabs */
.filter-tabs  { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.filter-tab {
    padding: 0.35rem 0.85rem;
    border-radius: 99px;
    border: 1px solid var(--rewire-border);
    background: #fff;
    color: var(--rewire-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: flex; align-items: center; gap: 0.4rem;
}
.filter-tab:hover  { border-color: var(--rewire-primary); color: var(--rewire-primary); }
.filter-tab.active { background: var(--rewire-primary); border-color: var(--rewire-primary); color: #fff; }
.filter-count {
    background: rgba(0,0,0,0.1);
    border-radius: 99px;
    padding: 0 0.4rem;
    font-size: 0.68rem;
    min-width: 18px;
    text-align: center;
}
.filter-tab.active .filter-count { background: rgba(255,255,255,0.25); }

/* Toast */
.toast-success {
    position: fixed; bottom: 2rem; right: 2rem;
    background: var(--rewire-success); color: #fff;
    padding: 0.75rem 1.5rem; border-radius: 10px;
    font-weight: 600; font-size: 0.875rem;
    box-shadow: var(--rewire-shadow-md); z-index: 9999;
    animation: slideUp 0.3s ease;
}
@keyframes slideUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Knowledge Hub ───────────────────────────────────── */
.knowledge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.knowledge-card {
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
    padding: 1.1rem;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    box-shadow: var(--rewire-shadow);
}
.knowledge-card:hover    { box-shadow: var(--rewire-shadow-md); border-color: var(--rewire-primary); }
.knowledge-card-active   { border-color: var(--rewire-primary); background: #fafcff; }
.knowledge-icon          { font-size: 1.5rem; display: block; margin-bottom: 0.4rem; }
.knowledge-cat-title     { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.1rem; }
.knowledge-preview       { font-size: 0.78rem; color: var(--rewire-muted); padding-left: 0; list-style: none; margin: 0; }
.knowledge-preview li    { padding: 0.15rem 0; border-bottom: 1px solid #f3f4f6; }
.knowledge-preview li:last-child { border-bottom: none; }

.article-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: 8px;
    margin-bottom: 0.4rem;
    transition: box-shadow 0.15s, border-color 0.15s;
    box-shadow: var(--rewire-shadow);
    color: var(--rewire-text);
}
.article-row:hover { box-shadow: var(--rewire-shadow-md); border-color: var(--rewire-primary); }
.article-icon      { font-size: 1.1rem; flex-shrink: 0; }

/* Article detail */
.article-content {
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
    padding: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--rewire-text);
    white-space: pre-wrap;
    box-shadow: var(--rewire-shadow);
}

/* ── Team Directory ──────────────────────────────────── */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
    align-items: start;
}
.team-card {
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: var(--rewire-shadow);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 240px;
}
.team-card-hover:hover {
    box-shadow: var(--rewire-shadow-md);
    border-color: var(--rewire-primary);
    transform: translateY(-2px);
}
.team-avatar-large {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--rewire-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}
.team-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--rewire-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
    margin: 0 auto 0.6rem;
}
.team-name  { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.1rem; }
.team-role  { font-size: 0.78rem; margin-bottom: 0.2rem; }

/* Team member panel overlay */
.member-panel-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.member-panel {
    background: #fff;
    width: 340px;
    height: 100vh;
    overflow-y: auto;
    padding: 2rem 1.5rem;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    position: relative;
    animation: slideIn 0.25s ease;
}
@keyframes slideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
.member-panel-close {
    position: absolute; top: 1rem; right: 1rem;
    background: none; border: none;
    font-size: 1.1rem; cursor: pointer;
    color: var(--rewire-muted);
}
.member-panel-close:hover { color: var(--rewire-text); }
.badge.bg-primary-light { background: var(--rewire-primary-light) !important; }

/* ── Learning page ───────────────────────────────────── */
.learning-breadcrumb {
    padding: 1rem 2.5rem 0;
    font-size: 0.8rem;
    color: var(--rewire-muted);
}
.learning-breadcrumb a { color: var(--rewire-muted); text-decoration: none; }
.learning-breadcrumb a:hover { color: var(--rewire-primary); }
.learning-breadcrumb span { color: var(--rewire-text); font-weight: 500; }

.learning-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    padding: 1.5rem 2.5rem;
    align-items: start;
}
.learning-main { min-width: 0; }
.learning-sidebar { display: flex; flex-direction: column; gap: 1rem; }

.learning-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }
.learning-overview {
    background: var(--rewire-primary-light);
    border: 1px solid #bfdbfe;
    border-radius: var(--rewire-radius);
    padding: 1rem 1.25rem;
}
.learning-video {
    border-radius: var(--rewire-radius);
    overflow: hidden;
    border: 1px solid var(--rewire-border);
    box-shadow: var(--rewire-shadow-md);
}

.key-steps      { display: flex; flex-direction: column; gap: 0.5rem; }
.key-step {
    display: flex; align-items: flex-start; gap: 0.75rem;
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    font-size: 0.875rem;
    box-shadow: var(--rewire-shadow);
}
.step-num {
    background: var(--rewire-primary); color: #fff;
    border-radius: 50%;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700; flex-shrink: 0;
}

.action-checklist { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--rewire-radius); padding: 1.25rem; }

.sidebar-resource {
    display: flex; align-items: center;
    padding: 0.35rem 0;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--rewire-border);
    cursor: pointer;
}
.sidebar-resource:last-child { border-bottom: none; }

.work-tool {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--rewire-border);
    font-size: 0.82rem;
}
.work-tool:last-child { border-bottom: none; }

/* ── Progress / Timeline ─────────────────────────────── */
.progress-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 1rem 0;
}
.progress-timeline::before {
    content: '';
    position: absolute;
    top: 2rem; left: 0; right: 0;
    height: 2px;
    background: var(--rewire-border);
    z-index: 0;
}
.timeline-step {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; flex: 1; position: relative; z-index: 1;
}
.timeline-circle {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
    margin-bottom: 0.5rem;
    border: 2px solid var(--rewire-border);
    background: #fff;
}
.timeline-done    { background: var(--rewire-success); color: #fff; border-color: var(--rewire-success); }
.timeline-current { background: var(--rewire-primary); color: #fff; border-color: var(--rewire-primary); }
.timeline-locked  { background: #f3f4f6; color: var(--rewire-muted); }
.timeline-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #fff;
    animation: pulse 1.5s infinite;
}
.timeline-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--rewire-muted); margin-bottom: 0.2rem; }
.timeline-title { font-size: 0.75rem; font-weight: 600; margin-bottom: 0.2rem; }
.timeline-tasks { font-size: 0.68rem; color: var(--rewire-muted); margin-bottom: 0.3rem; }

.current-focus {
    background: var(--rewire-primary-light);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.confidence-option {
    display: flex; align-items: center;
    padding: 0.65rem 1rem;
    border: 1px solid var(--rewire-border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.875rem;
}
.confidence-option:hover  { border-color: var(--rewire-primary); background: var(--rewire-primary-light); }
.confidence-option.selected { border-color: var(--rewire-primary); background: var(--rewire-primary-light); font-weight: 600; }

/* ── Manager page ────────────────────────────────────── */
.manager-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.stat-card {
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
    padding: 1.1rem;
    box-shadow: var(--rewire-shadow);
}
.stat-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--rewire-muted); margin-bottom: 0.3rem; }
.stat-value { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.stat-sub   { margin-top: 0.2rem; }

.attention-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem;
}
.attention-card {
    background: #fff;
    border: 1px solid var(--rewire-warning);
    border-radius: var(--rewire-radius);
    padding: 1rem;
    box-shadow: var(--rewire-shadow);
}

.manager-actions {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.action-card {
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
    padding: 1rem;
    box-shadow: var(--rewire-shadow);
}

/* ── Empty States ────────────────────────────────────── */
.empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 4rem 2rem; text-align: center;
}
.empty-icon    { font-size: 3rem; margin-bottom: 1rem; }
.empty-state-inline {
    text-align: center; padding: 2.5rem 1rem;
    background: #fff;
    border-radius: var(--rewire-radius);
    border: 1px dashed var(--rewire-border);
}
.empty-icon-sm { font-size: 2rem; margin-bottom: 0.5rem; }

/* ── Sidebar stage mini ──────────────────────────────── */
.stage-mini-progress { padding: 0.25rem 0; }

/* ── Landing page ────────────────────────────────────── */
.rewire-landing-old-removed { display: none; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .dashboard-body    { grid-template-columns: 1fr; }
    .dashboard-sidebar { order: -1; display: grid; grid-template-columns: repeat(2, 1fr); }
    .quick-links-grid  { grid-template-columns: repeat(2, 1fr); }
    .manager-stats     { grid-template-columns: repeat(2, 1fr); }
    .manager-actions   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .dashboard-hero  { padding: 1.25rem 1rem; }
    .dashboard-body  { padding: 1rem; }
    .hero-title      { font-size: 1.35rem; }
    .dashboard-sidebar { grid-template-columns: 1fr; }
    .learning-layout { grid-template-columns: 1fr; }
    .learning-sidebar { display: none; }
    .team-grid       { grid-template-columns: repeat(2, 1fr); }
    .knowledge-grid  { grid-template-columns: 1fr 1fr; }
    .quick-links-grid { grid-template-columns: repeat(2, 1fr); }
    .manager-stats   { grid-template-columns: 1fr 1fr; }
    .manager-actions { grid-template-columns: 1fr; }
    .progress-timeline { overflow-x: auto; }
    .rewire-nav      { padding: 0 1rem; }
    .rewire-nav-brand .brand-name { display: none; }
    .member-panel    { width: 100%; }
}

@media (max-width: 480px) {
    .team-grid        { grid-template-columns: 1fr; }
    .knowledge-grid   { grid-template-columns: 1fr; }
    .quick-links-grid { grid-template-columns: repeat(2, 1fr); }
    .manager-stats    { grid-template-columns: 1fr 1fr; }
    .filter-tab span  { display: none; }
}

/* ═══════════════════════════════════════════════════════
   Schedule Page
   ═══════════════════════════════════════════════════════ */

/* Legend */
.schedule-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--rewire-muted);
}
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Body layout */
.schedule-body { padding: 0; }

/* Day tabs */
.day-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid var(--rewire-border);
    overflow-x: auto;
    padding: 0 1.5rem;
}

.day-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 1.25rem;
    border: none;
    background: transparent;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    color: var(--rewire-muted);
    transition: all 0.15s;
    white-space: nowrap;
    min-width: 110px;
    gap: 0.15rem;
}
.day-tab:hover    { color: var(--rewire-primary); }
.day-tab.active   { color: var(--rewire-primary); border-bottom-color: var(--rewire-primary); }

.day-name  { font-weight: 700; font-size: 0.9rem; }
.day-date  { font-size: 0.7rem; letter-spacing: 0.05em; }
.day-count { font-size: 0.68rem; background: #f3f4f6; border-radius: 99px; padding: 0.1rem 0.5rem; margin-top: 0.1rem; }
.day-tab.active .day-count { background: #dbeafe; color: var(--rewire-primary); }

/* Content grid */
.schedule-content {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    align-items: start;
}

.schedule-main    { min-width: 0; }
.schedule-sidebar { display: flex; flex-direction: column; gap: 1rem; }

/* Day header */
.schedule-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.day-progress-pill {
    background: var(--rewire-primary-light);
    color: var(--rewire-primary);
    border-radius: 99px;
    padding: 0.3rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Timeline */
.timeline-schedule { display: flex; flex-direction: column; gap: 0; }

.schedule-event {
    display: flex;
    gap: 0;
    position: relative;
}

.event-time-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 72px;
    flex-shrink: 0;
    padding-top: 2px;
    padding-right: 0.75rem;
}
.event-time     { font-size: 0.82rem; font-weight: 600; color: var(--rewire-text); }
.event-duration { font-size: 0.68rem; color: var(--rewire-muted); }

.event-line-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    flex-shrink: 0;
}
.event-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid;
    background: #fff;
    flex-shrink: 0;
    margin-top: 4px;
    z-index: 1;
    transition: transform 0.15s;
}
.schedule-event:hover .event-dot { transform: scale(1.25); }
.event-line {
    width: 2px;
    background: var(--rewire-border);
    flex: 1;
    min-height: 20px;
}
.schedule-event:last-child .event-line { display: none; }

/* Event card */
.event-card {
    flex: 1;
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    margin-left: 0.75rem;
    box-shadow: var(--rewire-shadow);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.event-card:hover    { box-shadow: var(--rewire-shadow-md); border-color: #d1d5db; }
.event-card-done     { opacity: 0.65; background: #f9fafb; }
.event-completed .event-dot { background: var(--rewire-success) !important; border-color: var(--rewire-success) !important; }
.event-completed .event-line { background: #bbf7d0; }

.event-type-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.event-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
    color: var(--rewire-text);
}

.event-desc {
    font-size: 0.82rem;
    color: var(--rewire-muted);
    line-height: 1.5;
    margin-bottom: 0.4rem;
}

.event-meta {
    font-size: 0.75rem;
    color: var(--rewire-muted);
    margin-top: 0.2rem;
}

.event-prep {
    font-size: 0.75rem;
    color: var(--rewire-warning);
    background: #fffbeb;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    margin-top: 0.5rem;
    border: 1px solid #fde68a;
}

/* Buttons */
.btn-mark-done {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    border: 1px solid var(--rewire-primary);
    color: var(--rewire-primary);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-mark-done:hover { background: var(--rewire-primary); color: #fff; }

.done-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rewire-success);
    background: #dcfce7;
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    white-space: nowrap;
}

/* Week overview sidebar */
.week-overview-row {
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 0.3rem;
    transition: background 0.12s;
}
.week-overview-row:hover   { background: var(--rewire-bg); }
.week-row-active           { background: var(--rewire-primary-light); }

/* Big percent */
.schedule-big-pct {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--rewire-primary);
    line-height: 1;
}

/* Prep list */
.prep-list {
    padding-left: 1.2rem;
    margin: 0;
    font-size: 0.82rem;
    color: var(--rewire-text);
    line-height: 2;
}

/* Contacts */
.contact-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--rewire-border);
}
.contact-row:last-child { border-bottom: none; }
.contact-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rewire-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .schedule-content { grid-template-columns: 1fr; }
    .schedule-sidebar { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .schedule-content { padding: 1rem; }
    .schedule-sidebar { grid-template-columns: 1fr; }
    .event-time-col   { width: 54px; font-size: 0.72rem; }
    .schedule-legend  { display: none; }
    .day-tab          { min-width: 80px; padding: 0.65rem 0.75rem; }
}

/* ═══════════════════════════════════════════════════════
   Overdue Alert
   ═══════════════════════════════════════════════════════ */
.overdue-alert {
    background: #fff5f5;
    border: 1.5px solid #fecaca;
    border-radius: var(--rewire-radius);
    padding: 1rem 1.1rem;
}
.overdue-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #fee2e2;
    font-size: 0.85rem;
    color: #7f1d1d;
}
.overdue-item:last-of-type { border-bottom: none; }
.overdue-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
}
.overdue-badge {
    font-size: 0.72rem;
    font-weight: 700;
    background: #fecaca;
    color: #991b1b;
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

/* Behind stage card */
.stage-behind {
    border-color: #fecaca !important;
    background: #fff5f5 !important;
}

/* ═══════════════════════════════════════════════════════
   Overdue Task Styles
   ═══════════════════════════════════════════════════════ */

.task-card-overdue {
    border-color: #fecaca !important;
    background: #fff9f9 !important;
}
.task-card-overdue:hover { border-color: #f87171 !important; }

.task-overdue-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #991b1b;
    background: #fecaca;
    border-radius: 4px;
    padding: 0.12rem 0.45rem;
    margin-right: 0.35rem;
}

.check-btn-overdue {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid #ef4444;
    background: #fff5f5;
    cursor: pointer;
    transition: all 0.15s;
}
.check-btn-overdue:hover { background: #ef4444; }

.overdue-hero-badge {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #991b1b;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 99px;
    padding: 0.35rem 0.9rem;
    align-self: flex-start;
}

.filter-tab-danger {
    color: #dc2626 !important;
}
.filter-tab-danger.active {
    border-bottom-color: #dc2626 !important;
    color: #dc2626 !important;
}
.filter-tab-danger .filter-count {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

/* ═══════════════════════════════════════════════════════
   View Switcher (Tasks / Schedule)
   ═══════════════════════════════════════════════════════ */
.view-switcher {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 2rem 0;
    border-bottom: 1px solid var(--rewire-border);
    background: #fff;
}
.view-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border: none;
    background: transparent;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--rewire-muted);
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: -1px;
}
.view-tab:hover  { color: var(--rewire-primary); }
.view-tab.active { color: var(--rewire-primary); border-bottom-color: var(--rewire-primary); }
.view-tab-count  {
    font-size: 0.72rem; font-weight: 700;
    background: var(--rewire-primary-light);
    color: var(--rewire-primary);
    border-radius: 99px;
    padding: 0.1rem 0.55rem;
}
.view-tab-danger {
    font-size: 0.72rem; font-weight: 700;
    background: #fee2e2; color: #991b1b;
    border-radius: 99px;
    padding: 0.1rem 0.55rem;
}

/* ═══════════════════════════════════════════════════════
   Team detail panel (inside Knowledge)
   ═══════════════════════════════════════════════════════ */
.team-detail-panel {
    background: var(--rewire-primary-light);
    border: 1.5px solid var(--rewire-primary);
    border-radius: var(--rewire-radius);
    padding: 1.25rem 1.5rem;
}
.team-avatar-lg {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.1rem !important;
}
.team-card-selected {
    border-color: var(--rewire-primary) !important;
    background: var(--rewire-primary-light) !important;
}

/* ═══════════════════════════════════════════════════════
   Chat Widget — FAB + Floating Window
   ═══════════════════════════════════════════════════════ */

/* Floating open button */
.chat-fab {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--rewire-primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 20px rgba(99,102,241,0.45);
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.chat-fab:hover        { transform: scale(1.08); box-shadow: 0 6px 24px rgba(99,102,241,0.55); }
.chat-fab-active       { background: #374151; }
.chat-fab-icon         { font-size: 1.3rem; line-height: 1; }
.chat-fab-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 99px;
    padding: 0.1rem 0.4rem;
    min-width: 18px;
    text-align: center;
}

/* Chat window */
.chat-window {
    position: fixed;
    bottom: 5.5rem;
    right: 1.75rem;
    width: 360px;
    max-height: 540px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 999;
    animation: chatSlideUp 0.22s ease;
}
@keyframes chatSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Header */
.chat-header {
    background: var(--rewire-primary);
    color: #fff;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.chat-avatar {
    width: 34px; height: 34px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.chat-header-title    { font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
.chat-header-sub      { font-size: 0.72rem; opacity: 0.8; }
.chat-header-dot      { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot-online           { background: #4ade80; }
.dot-typing           { background: #fbbf24; animation: pulse 1s infinite; }

/* Messages area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #f9fafb;
}
.chat-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
}
.row-user  { justify-content: flex-end; }
.row-bot   { justify-content: flex-start; }

.chat-bubble {
    max-width: 78%;
    padding: 0.55rem 0.85rem;
    border-radius: 14px;
    font-size: 0.84rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.bubble-user {
    background: var(--rewire-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.bubble-bot {
    background: #fff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 4px;
}
.bot-icon {
    width: 24px; height: 24px;
    background: var(--rewire-primary-light);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Typing animation */
.bubble-typing {
    display: flex; align-items: center; gap: 4px;
    padding: 0.6rem 0.9rem;
}
.typing-dot {
    width: 7px; height: 7px;
    background: #9ca3af;
    border-radius: 50%;
    animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%,60%,100% { transform: translateY(0); }
    30%         { transform: translateY(-5px); }
}

/* Suggested questions */
.chat-suggestions {
    padding: 0.5rem 1rem 0.25rem;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
    flex-shrink: 0;
}
.suggestions-label {
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 600;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.suggestion-chip {
    display: inline-block;
    margin: 0 0.3rem 0.3rem 0;
    padding: 0.3rem 0.7rem;
    background: var(--rewire-primary-light);
    color: var(--rewire-primary);
    border: 1px solid var(--rewire-primary);
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.suggestion-chip:hover {
    background: var(--rewire-primary);
    color: #fff;
}

/* Error */
.chat-error {
    padding: 0.35rem 1rem;
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.78rem;
    flex-shrink: 0;
}

/* Input field */
.chat-input-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.chat-input {
    flex: 1;
    border: 1.5px solid #e5e7eb;
    border-radius: 99px;
    padding: 0.45rem 0.9rem;
    font-size: 0.84rem;
    transition: border-color 0.15s;
    background: #f9fafb;
}
.chat-input:focus       { border-color: var(--rewire-primary); background: #fff; }
.chat-input:disabled    { opacity: 0.6; cursor: not-allowed; }
.chat-send {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--rewire-primary);
    color: #fff;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, opacity 0.15s;
    flex-shrink: 0;
}
.chat-send:hover            { transform: scale(1.1); }
.chat-send-disabled         { opacity: 0.4; cursor: not-allowed; transform: none !important; }

@media (max-width: 480px) {
    .chat-window { width: calc(100vw - 2rem); right: 1rem; }
}

/* ═══════════════════════════════════════════════════════
   Media Blocks (image, audio, pdf, video)
   ═══════════════════════════════════════════════════════ */
.media-block {
    border-radius: var(--rewire-radius);
    overflow: hidden;
}
.media-doc-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: #f8fafc;
    border: 1.5px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
}
.media-doc-icon { font-size: 2rem; flex-shrink: 0; }

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: fadeIn 0.2s ease;
}
.lightbox-img {
    max-width: 92vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    object-fit: contain;
}
.lightbox-close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px; height: 40px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ═══════════════════════════════════════════════════════
   Learning Media Cards
   ═══════════════════════════════════════════════════════ */
.learning-media-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1.5px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.learning-media-card:hover     { border-color: var(--rewire-primary); box-shadow: var(--rewire-shadow); }
.learning-card-done            { opacity: 0.65; }
.learning-card-overdue         { border-color: #fca5a5; background: #fff8f8; }

.learning-media-thumb {
    position: relative;
    width: 100px;
    height: 62px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.learning-thumb-img         { width: 100%; height: 100%; object-fit: cover; }
.learning-thumb-placeholder { font-size: 2rem; }
.learning-play-btn {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.learning-media-info   { flex: 1; min-width: 0; }
.learning-media-action { flex-shrink: 0; }

/* ── Auth Pages ─────────────────────────────────────────── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f5e9 100%);
    padding: 2rem;
}

.auth-card {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    border: 0.5px solid #e8eaed;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Force everything inside auth-card to stack vertically */
.auth-card form,
.auth-card > div,
.auth-card > p,
.auth-card > h2,
.auth-card > h3 {
    display: block !important;
    width: 100% !important;
    flex-direction: column !important;
}

.auth-field {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1rem;
}

.auth-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    margin-bottom: 0;
}

.auth-row .auth-field {
    flex: 1;
    width: auto !important;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.auth-logo .brand-icon { font-size: 28px; }
.auth-logo .brand-name { font-size: 20px; font-weight: 700; color: #1a1a2e; }

.auth-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    text-align: center;
    margin: 0 0 6px;
}

.auth-sub {
    font-size: 14px;
    color: #6b7280;
    text-align: center;
    margin: 0 0 1.75rem;
}

.auth-field {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}

.auth-row {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
}

.auth-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.auth-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #1a1a2e;
    background: #fafafa;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.auth-input:focus {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
    border-color: #4f46e5;
    background: white;
}

.auth-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 1rem;
    text-align: center;
}

.auth-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: background 0.15s;
}

.auth-btn:hover { background: #4338ca; color: white; }
.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-btn-google {
    background: white;
    color: #374151;
    border: 1.5px solid #d1d5db;
}

.auth-btn-google:hover { background: #f9fafb; color: #374151; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0.5rem 0 0.75rem;
    color: #9ca3af;
    font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.auth-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 1.25rem;
    font-size: 13px;
    color: #6b7280;
}

.auth-links a { color: #4f46e5; text-decoration: none; font-weight: 500; }
.auth-links a:hover { text-decoration: underline; }

/* ── Landing Page ─────────────────────────────────────── */
.rewire-landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #f0f4ff 0%, #fafffe 60%, #e8f5e9 100%);
}

.landing-hero {
    text-align: center;
    padding: 80px 24px 60px;
    max-width: 760px;
    margin: 0 auto;
}

.landing-badge {
    display: inline-block;
    background: #e0e7ff;
    color: #4f46e5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 99px;
    margin-bottom: 20px;
}

.brand-logo-landing {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 24px;
}

.landing-title {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    color: #1a1a2e;
    margin-bottom: 20px;
}

.landing-sub {
    font-size: 18px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 36px;
}

.landing-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Features */
.landing-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 60px;
}

.feature-card {
    background: white;
    border-radius: 16px;
    padding: 28px 24px;
    border: 1px solid #e8eaed;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.feature-icon { font-size: 32px; margin-bottom: 12px; }

.feature-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
}

.feature-card p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* Stages */
.landing-stages {
    background: white;
    border-top: 1px solid #e8eaed;
    border-bottom: 1px solid #e8eaed;
    padding: 48px 24px;
    text-align: center;
}

.stages-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 28px;
}

.stages-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.stage-pill {
    background: #f0f4ff;
    color: #4f46e5;
    border: 1.5px solid #c7d2fe;
    border-radius: 99px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
}

.stage-arrow { color: #9ca3af; font-size: 20px; font-weight: 300; }

/* Footer CTA */
.landing-footer-cta {
    text-align: center;
    padding: 60px 24px 80px;
}

/* ══ Org Chart / Team Directory ═══════════════════════ */
.org-tier {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.org-connector {
    width: 2px;
    height: 32px;
    background: #c7d2fe;
    margin: 0 auto;
}

.org-card {
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px 18px;
    text-align: center;
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.15s, box-shadow 0.15s;
}

.org-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(79,70,229,0.12);
    border-color: #a5b4fc;
}

.org-card-lead {
    border-color: #4f46e5;
    background: linear-gradient(135deg, #eef2ff 0%, #ffffff 100%);
    width: 210px;
}

.org-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #4f46e5;
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem;
    margin-bottom: 6px;
}

.org-avatar-lead {
    width: 64px; height: 64px;
    font-size: 1.2rem;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.org-avatar-sm { width: 44px; height: 44px; font-size: 0.85rem; }

.org-avatar-xs {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #4f46e5;
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.7rem;
    flex-shrink: 0;
}

.org-name { font-weight: 700; font-size: 0.88rem; color: #111827; }
.org-role { font-size: 0.73rem; color: #6b7280; line-height: 1.3; }

.org-dept {
    font-size: 0.68rem;
    background: #f3f4f6;
    color: #374151;
    padding: 2px 8px;
    border-radius: 99px;
    margin-top: 2px;
}

.org-dept-lead { background: #e0e7ff; color: #4338ca; }

.org-expertise {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}

.org-tag {
    font-size: 0.62rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    padding: 1px 6px;
    border-radius: 99px;
}

.org-email {
    font-size: 0.68rem;
    color: #4f46e5;
    text-decoration: none;
    margin-top: 4px;
    word-break: break-all;
}

/* Directory table */
.dir-table { border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; }
.dir-header {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 2fr 1fr;
    gap: 12px;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dir-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 2fr 1fr;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    align-items: center;
    background: white;
    font-size: 13px;
    transition: background 0.1s;
}
.dir-row:last-child { border-bottom: none; }
.dir-row:hover { background: #fafafa; }

/* ══ Knowledge Hub improvements ══════════════════════ */
.knowledge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.knowledge-card {
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.knowledge-card:hover {
    border-color: #a5b4fc;
    box-shadow: 0 4px 16px rgba(79,70,229,0.1);
    transform: translateY(-2px);
}

.knowledge-card-active {
    border-color: #4f46e5;
    background: linear-gradient(135deg, #eef2ff 0%, #ffffff 100%);
}

.knowledge-icon { font-size: 28px; display: block; margin-bottom: 8px; }
.knowledge-cat-title { font-weight: 700; font-size: 14px; color: #111827; margin: 0 0 2px; }

.knowledge-preview {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.knowledge-preview li {
    font-size: 12px;
    color: #6b7280;
    padding: 2px 0;
    border-left: 2px solid #e5e7eb;
    padding-left: 8px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Article row improvements */
.article-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: white;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.15s;
    cursor: pointer;
}

.article-row:hover {
    border-color: #a5b4fc;
    background: #fafaff;
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(79,70,229,0.08);
}

.article-icon { font-size: 20px; flex-shrink: 0; }

/* ══ Article detail page improvements ════════════════ */
.article-content-body {
    line-height: 1.8;
    font-size: 15px;
    color: #374151;
}

.article-content-body pre {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

.article-section-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.article-section-card h2 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eef2ff;
}

/* ══ Pinned articles grid ════════════════════════════ */
.pinned-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.pinned-card {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    border: 1.5px solid #c7d2fe;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    transition: all 0.15s;
}

.pinned-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(79,70,229,0.15);
    border-color: #818cf8;
}

.pinned-icon { font-size: 22px; margin-bottom: 4px; }

/* stat pills */
.stat-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 99px;
    padding: 6px 16px;
    font-size: 13px;
}

.stat-pill-num { font-weight: 700; color: #4f46e5; font-size: 16px; }
.stat-pill-label { color: #6b7280; }

/* Make sure validation messages don't break layout */
.auth-field .validation-message {
    display: block;
    font-size: 12px;
    color: #dc2626;
    margin-top: 4px;
}

/* ══ Course Playlist ════════════════════════════════ */
.course-card {
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
    transition: background 0.1s;
}
.course-header:hover { background: #fafafa; }

.course-header-left { display: flex; align-items: center; gap: 14px; }
.course-header-right { display: flex; align-items: center; gap: 8px; }

.course-icon { font-size: 28px; }
.course-title { font-weight: 700; font-size: 15px; color: #111827; }
.course-meta { font-size: 12px; color: #6b7280; margin-top: 2px; }
.course-pct { font-weight: 700; color: #4f46e5; font-size: 14px; }

.course-progress-bar {
    height: 4px;
    background: #f3f4f6;
}
.course-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    transition: width 0.4s ease;
    border-radius: 0 2px 2px 0;
}

.course-playlist {
    border-top: 1px solid #f3f4f6;
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    border-bottom: 1px solid #f9fafb;
    cursor: pointer;
    transition: background 0.1s;
    background: #fff;
}
.playlist-item:last-child { border-bottom: none; }
.playlist-item:hover { background: #f8f7ff; }
.playlist-item-watched { opacity: 0.7; background: #f9fafb; }
.playlist-item-watched:hover { background: #f3f4f6; }

.playlist-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
}
.playlist-check {
    color: white;
    background: #16a34a;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.playlist-num-text { color: #6b7280; }

.playlist-info { flex: 1; }
.playlist-title { font-size: 13px; font-weight: 500; color: #111827; }
.playlist-item-watched .playlist-title { color: #6b7280; }
.playlist-status { font-size: 11px; color: #16a34a; margin-top: 1px; }
.playlist-play { color: #9ca3af; font-size: 12px; }
.playlist-item:hover .playlist-play { color: #4f46e5; }

/* ══ Video Modal ════════════════════════════════════ */
.video-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.video-modal {
    background: #111;
    border-radius: 14px;
    width: 100%;
    max-width: 860px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}

.video-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #1f2937;
    color: white;
}

.video-modal-footer {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background: #1f2937;
}

/* ══ Auth card — force vertical layout ═════════════ */
.auth-card {
    display: block !important;
}

.auth-card > *,
.auth-card form > *,
.auth-card .auth-field,
.auth-card input,
.auth-card .auth-btn,
.auth-card .auth-links,
.auth-card .auth-error,
.auth-card .alert {
    display: block !important;
    width: 100% !important;
    flex-direction: column !important;
}

.auth-card .auth-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    width: 100% !important;
}

.auth-card .auth-row .auth-field {
    flex: 1 !important;
    width: auto !important;
    display: block !important;
}

.auth-card label,
.auth-card .auth-label {
    display: block !important;
    width: 100%;
    margin-bottom: 4px;
}

/* ══ Final auth layout fix ══════════════════════════ */
.auth-page .auth-card {
    display: block !important;
    flex-direction: unset !important;
}

.auth-page .auth-card form,
.auth-page .auth-card > div:not(.auth-logo):not(.auth-links) {
    display: block !important;
}

.auth-page .auth-card .auth-field {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    flex: unset !important;
}

.auth-page .auth-card .auth-input {
    display: block !important;
    width: 100% !important;
}

.auth-page .auth-card .auth-btn {
    display: block !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
}

/* ══ Exam Page ═══════════════════════════════════════ */
.exam-question { transition: opacity 0.2s; }
.exam-q-hidden { display: none; }
.exam-q-active { display: block; }

.exam-q-num {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.exam-q-text {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    line-height: 1.5;
    margin-bottom: 4px;
}

.exam-options { display: flex; flex-direction: column; gap: 10px; }

.exam-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    transition: all 0.15s;
    width: 100%;
}
.exam-option:hover { border-color: #a5b4fc; background: #f8f7ff; }
.exam-option-selected {
    border-color: #4f46e5;
    background: #eef2ff;
    color: #4338ca;
    font-weight: 600;
}

.exam-option-letter {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.exam-option-selected .exam-option-letter {
    background: #4f46e5;
    color: white;
}

/* Results */
.exam-result-card {
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    margin-bottom: 24px;
}
.exam-pass { background: linear-gradient(135deg, #d1fae5, #a7f3d0); border: 2px solid #6ee7b7; }
.exam-fail { background: linear-gradient(135deg, #fef3c7, #fde68a); border: 2px solid #fcd34d; }
.exam-result-icon { font-size: 48px; margin-bottom: 12px; }
.exam-result-title { font-size: 24px; font-weight: 800; color: #111827; }
.exam-result-score { font-size: 48px; font-weight: 800; color: #111827; line-height: 1.1; margin-top: 8px; }
.exam-result-pct { font-size: 18px; font-weight: 700; color: #374151; }

/* Review */
.exam-review-card {
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 10px;
    border-left: 4px solid;
}
.review-correct { background: #f0fdf4; border-color: #16a34a; }
.review-wrong   { background: #fef2f2; border-color: #dc2626; }

.exam-explanation {
    font-size: 12px;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 8px;
}

/* ══ Exam ════════════════════════════════════════════ */
.exam-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.15s;
    background: white;
}
.exam-option:hover { border-color: #a5b4fc; background: #f8f7ff; }
.exam-option-selected {
    border-color: #4f46e5;
    background: #eef2ff;
}
.exam-option-letter {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.exam-option-selected .exam-option-letter {
    background: #4f46e5; color: white;
}
.border-success { border-left-color: #16a34a !important; }
.border-danger  { border-left-color: #dc2626 !important; }

/* ══ Exam CTA Box ══════════════════════════════════ */
.exam-cta-box {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    border: 1.5px solid #c7d2fe;
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

/* ─── Completion Page ─────────────────────────────────────── */
.completion-hero {
    background: linear-gradient(135deg, var(--rewire-primary) 0%, #1a56db 100%);
    color: #fff;
    text-align: center;
    padding: 3rem 1.5rem;
}
.completion-hero .hero-title,
.completion-hero .hero-sub { color: #fff; }
.completion-badge-wrap { display: flex; justify-content: center; }
.completion-badge {
    font-size: 4rem;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    width: 6rem; height: 6rem;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid rgba(255,255,255,0.35);
}
.completion-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 768px) { .completion-kpis { grid-template-columns: repeat(2, 1fr); } }
.completion-kpi-card {
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.completion-kpi-icon { font-size: 1.75rem; margin-bottom: .35rem; }
.completion-kpi-value { font-size: 1.4rem; font-weight: 800; color: var(--rewire-primary); }
.completion-kpi-label { font-size: 0.7rem; font-weight: 700; letter-spacing: .06em; color: var(--rewire-muted); text-transform: uppercase; }
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 600px) { .achievement-grid { grid-template-columns: repeat(2, 1fr); } }
.achievement-item {
    border: 1px solid var(--rewire-border);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    background: #f8fafc;
}
.achievement-gold {
    border-color: #f59e0b;
    background: #fffbeb;
}
.achievement-icon { font-size: 2rem; display: block; margin-bottom: .4rem; }
.achievement-name { font-size: .82rem; font-weight: 700; }
.achievement-sub { font-size: .7rem; color: var(--rewire-muted); }
.next-steps-list { display: flex; flex-direction: column; gap: .85rem; }
.next-step-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--rewire-border);
    border-radius: 10px;
    background: #f8fafc;
}
.next-step-icon { font-size: 1.5rem; flex-shrink: 0; }

/* Completion banner on Dashboard */
.completion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, var(--rewire-primary) 0%, #1a56db 100%);
    color: #fff;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
}
.completion-banner .btn-light { color: var(--rewire-primary); font-weight: 700; }

/* ─── Progress KPI Cards ──────────────────────────────────── */
.progress-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 768px) { .progress-kpi-row { grid-template-columns: repeat(2, 1fr); } }
.progress-kpi-card {
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: 12px;
    padding: 1.1rem 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.progress-kpi-icon { font-size: 1.5rem; margin-bottom: .2rem; }
.progress-kpi-value { font-size: 1.25rem; font-weight: 800; color: var(--rewire-primary); }
.progress-kpi-label { font-size: 0.68rem; font-weight: 700; letter-spacing: .06em; color: var(--rewire-muted); text-transform: uppercase; margin-bottom: .25rem; }
.progress-kpi-pct { font-size: 0.72rem; color: var(--rewire-muted); margin-top: .3rem; }

/* ─── Feedback History ────────────────────────────────────── */
.feedback-history-list { display: flex; flex-direction: column; gap: .75rem; }
.feedback-history-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .85rem 1rem;
    background: #f8fafc;
    border: 1px solid var(--rewire-border);
    border-radius: 10px;
}
.feedback-history-emoji { font-size: 1.75rem; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════
   REWIRE — DESIGN REFRESH (Option A)
   Blue-only palette · No emojis · Refined typography
   ═══════════════════════════════════════════════════════ */

/* ── Override root variables ─────────────────────────── */
:root {
    --rewire-primary:       #1e40af;   /* deep cobalt */
    --rewire-primary-mid:   #2563eb;   /* royal blue   */
    --rewire-primary-light: #eff6ff;   /* pale blue    */
    --rewire-primary-dark:  #1e3a8a;   /* ink blue     */
    --rewire-accent:        #3b82f6;   /* bright blue  */
    --rewire-accent-light:  #dbeafe;   /* sky tint     */
    --rewire-success:       #1d4ed8;   /* blue-success (replaces green) */
    --rewire-warning:       #2563eb;   /* blue-warning */
    --rewire-danger:        #1e40af;   /* blue-danger  */
    --rewire-border:        #dbeafe;
    --rewire-bg:            #f0f5ff;   /* off-white blue tint */
    --rewire-card:          #ffffff;
    --rewire-text:          #0f172a;
    --rewire-muted:         #475569;
    --rewire-radius:        10px;
    --rewire-shadow:        0 2px 8px rgba(30,64,175,0.08);
    --rewire-shadow-md:     0 4px 20px rgba(30,64,175,0.12);
    --rewire-shadow-neo:    0 2px 8px rgba(30,64,175,0.08), 0 0 0 1px rgba(30,64,175,0.06);
}

/* ── Typography ──────────────────────────────────────── */
body {
    font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--rewire-bg);
    letter-spacing: -0.01em;
}

h1, h2, h3, .hero-title, .brand-name {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* ── Navigation bar ──────────────────────────────────── */
.rewire-nav {
    background: #fff;
    border-bottom: 1px solid var(--rewire-border);
    box-shadow: 0 1px 0 rgba(30,64,175,0.06);
}

.brand-icon { color: var(--rewire-primary); }
.brand-name {
    color: var(--rewire-primary-dark);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.nav-tab { color: var(--rewire-muted); font-weight: 500; }
.nav-tab:hover          { color: var(--rewire-primary); }
.nav-tab.active,
.nav-tab[aria-current]  {
    color: var(--rewire-primary) !important;
    border-bottom: 2px solid var(--rewire-primary) !important;
    font-weight: 600;
}
.nav-tab-manager        { color: var(--rewire-primary-mid) !important; }
.nav-tab-manager.active { border-bottom-color: var(--rewire-primary-mid); }

.user-avatar {
    background: var(--rewire-primary);
    font-weight: 700;
    letter-spacing: -0.03em;
}
.btn-signout {
    border-color: var(--rewire-border);
    color: var(--rewire-muted);
    font-weight: 500;
}
.btn-signout:hover {
    background: var(--rewire-primary-light);
    color: var(--rewire-primary);
    border-color: var(--rewire-accent);
}

/* ── Hero / page header ──────────────────────────────── */
.dashboard-hero {
    background: linear-gradient(135deg, var(--rewire-primary-dark) 0%, var(--rewire-primary-mid) 100%);
    border-bottom: none;
    padding: 2rem 2.5rem;
}
.hero-title { color: #fff; font-size: 1.6rem; font-weight: 800; }
.hero-sub   { color: rgba(255,255,255,0.75); font-size: 0.9rem; }
.hero-greeting {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    font-weight: 600;
}

/* ── Cards ───────────────────────────────────────────── */
.card {
    border: 1px solid var(--rewire-border) !important;
    box-shadow: var(--rewire-shadow-neo) !important;
    border-radius: var(--rewire-radius) !important;
    transition: box-shadow 0.2s ease;
}
.card:hover {
    box-shadow: var(--rewire-shadow-md) !important;
}

.stat-card {
    border: 1px solid var(--rewire-border);
    box-shadow: var(--rewire-shadow-neo);
    border-radius: var(--rewire-radius);
}
.stat-card:hover {
    border-color: var(--rewire-accent-light);
    box-shadow: 0 4px 20px rgba(37,99,235,0.12);
    transform: translateY(-1px);
}

/* ── Section labels ──────────────────────────────────── */
.section-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--rewire-primary);
    text-transform: uppercase;
    border-left: 3px solid var(--rewire-primary);
    padding-left: 0.5rem;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn-primary {
    background: var(--rewire-primary-mid) !important;
    border-color: var(--rewire-primary-mid) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.btn-primary:hover {
    background: var(--rewire-primary-dark) !important;
    border-color: var(--rewire-primary-dark) !important;
}
.btn-outline-primary {
    border-color: var(--rewire-primary-mid) !important;
    color: var(--rewire-primary-mid) !important;
    font-weight: 500;
}
.btn-outline-primary:hover {
    background: var(--rewire-primary-mid) !important;
    color: #fff !important;
}

/* ── Tables ──────────────────────────────────────────── */
.table { border-collapse: separate; border-spacing: 0; }
.table thead th {
    background: var(--rewire-primary-light);
    color: var(--rewire-primary-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--rewire-accent-light);
    padding: 0.75rem 1rem;
}
.table tbody tr:nth-child(even) { background: #f8faff; }
.table tbody tr:hover { background: var(--rewire-primary-light); }
.table tbody td {
    padding: 0.75rem 1rem;
    border-color: var(--rewire-border);
    font-size: 0.875rem;
    color: var(--rewire-text);
    vertical-align: middle;
}

/* ── Badges ──────────────────────────────────────────── */
.badge.bg-success  { background: var(--rewire-primary-mid) !important; }
.badge.bg-warning  { background: var(--rewire-accent) !important; }
.badge.bg-danger   { background: var(--rewire-primary-dark) !important; }
.badge.bg-primary  { background: var(--rewire-primary-mid) !important; }
.badge.bg-secondary { background: var(--rewire-muted) !important; }

/* ── Progress bars ───────────────────────────────────── */
.progress-bar { background: var(--rewire-primary-mid) !important; }
.progress {
    background: var(--rewire-accent-light);
    border-radius: 99px;
}

/* ── Timeline ────────────────────────────────────────── */
.timeline-done    { background: var(--rewire-primary-mid); border-color: var(--rewire-primary-mid); }
.timeline-current { background: var(--rewire-accent); border-color: var(--rewire-accent); }
.timeline-locked  { background: var(--rewire-accent-light); color: var(--rewire-muted); border-color: var(--rewire-border); }
.progress-timeline::before { background: var(--rewire-accent-light); }

/* ── Task / article cards ────────────────────────────── */
.task-card, .article-card, .knowledge-card, .course-card {
    border: 1px solid var(--rewire-border) !important;
    border-radius: var(--rewire-radius);
    box-shadow: var(--rewire-shadow);
    transition: box-shadow 0.2s, transform 0.2s;
}
.task-card:hover, .article-card:hover, .knowledge-card:hover, .course-card:hover {
    box-shadow: var(--rewire-shadow-md);
    transform: translateY(-1px);
}
.task-card.completed {
    border-left: 4px solid var(--rewire-primary-mid) !important;
    background: var(--rewire-primary-light);
}

/* ── Alerts / attention cards ────────────────────────── */
.attention-card {
    border: 1px solid var(--rewire-accent-light);
    border-left: 4px solid var(--rewire-primary-mid);
    box-shadow: var(--rewire-shadow);
}

/* ── KPI cards ───────────────────────────────────────── */
.progress-kpi-card, .completion-kpi-card {
    border: 1px solid var(--rewire-border);
    box-shadow: var(--rewire-shadow-neo);
    transition: box-shadow 0.2s, transform 0.2s;
}
.progress-kpi-card:hover, .completion-kpi-card:hover {
    box-shadow: 0 4px 20px rgba(37,99,235,0.12);
    transform: translateY(-1px);
    border-color: var(--rewire-accent-light);
}
.progress-kpi-value { color: var(--rewire-primary-mid); font-weight: 800; }
.completion-kpi-value { color: var(--rewire-primary-mid); }

/* ── Completion hero ─────────────────────────────────── */
.completion-hero {
    background: linear-gradient(135deg, var(--rewire-primary-dark) 0%, var(--rewire-primary-mid) 100%);
}
.completion-banner {
    background: linear-gradient(135deg, var(--rewire-primary-dark) 0%, var(--rewire-primary-mid) 100%);
}

/* ── Next task banner ────────────────────────────────── */
.next-task-banner {
    border-left: 4px solid var(--rewire-primary-mid);
    background: var(--rewire-primary-light);
    box-shadow: var(--rewire-shadow);
}
.current-focus {
    background: var(--rewire-primary-light);
    border-left: 4px solid var(--rewire-primary-mid);
    border-radius: 8px;
    padding: 1rem;
}

/* ── Forms ───────────────────────────────────────────── */
.form-control:focus {
    border-color: var(--rewire-primary-mid);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.confidence-option.selected {
    background: var(--rewire-primary-light);
    border-color: var(--rewire-primary-mid);
    color: var(--rewire-primary-dark);
}
.confidence-option:hover {
    border-color: var(--rewire-accent);
    background: var(--rewire-primary-light);
}

/* ── Chat widget ─────────────────────────────────────── */
.chat-fab {
    background: #1e1b4b;
    box-shadow: 0 4px 20px rgba(30,27,75,0.45);
}
.chat-fab:hover { background: #312e81; }

/* ── Landing page ────────────────────────────────────── */
.landing-title {
    color: var(--rewire-primary-dark);
    font-weight: 800;
    letter-spacing: -0.04em;
}
.landing-badge {
    background: var(--rewire-accent-light);
    color: var(--rewire-primary-mid);
    font-weight: 700;
    border: 1px solid var(--rewire-border);
}
.feature-card {
    border: 1px solid var(--rewire-border);
    box-shadow: var(--rewire-shadow-neo);
    transition: box-shadow 0.2s, transform 0.2s;
}
.feature-card:hover {
    box-shadow: var(--rewire-shadow-md);
    transform: translateY(-2px);
    border-color: var(--rewire-accent-light);
}
.roadmap-step {
    border: 1px solid var(--rewire-border);
    background: #fff;
    box-shadow: var(--rewire-shadow);
}
.roadmap-step.active {
    background: var(--rewire-primary-mid);
    border-color: var(--rewire-primary-mid);
    box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}

/* ── Alerts (success/danger) ─────────────────────────── */
.alert-success {
    background: var(--rewire-primary-light) !important;
    color: var(--rewire-primary-dark) !important;
    border-color: var(--rewire-border) !important;
}

/* ── Brand icon as logo mark ─────────────────────────── */
.brand-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--rewire-primary-dark) 0%, var(--rewire-primary-mid) 100%);
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.02em;
    box-shadow: 0 2px 6px rgba(30,64,175,0.3);
}

/* ── Confidence dots ─────────────────────────────────── */
.feedback-history-emoji {
    color: var(--rewire-primary-mid);
    font-size: 0.75rem;
    letter-spacing: -2px;
    min-width: 3.5rem;
    font-weight: 700;
    padding-top: 0.2rem;
}
.confidence-option {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    border: 1px solid var(--rewire-border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.9rem;
}
.confidence-option .me-2 {
    color: var(--rewire-primary-mid);
    font-size: 0.7rem;
    letter-spacing: -2px;
    min-width: 3.5rem;
    font-weight: 800;
}

/* ── Improve table in Manager page ──────────────────── */
.table-bordered { border-color: var(--rewire-border) !important; }
.table-bordered th,
.table-bordered td { border-color: var(--rewire-border) !important; }

/* ── Alert info blue ─────────────────────────────────── */
.alert-info {
    background: var(--rewire-primary-light) !important;
    border-color: var(--rewire-accent-light) !important;
    color: var(--rewire-primary-dark) !important;
}

/* ── Logo image ──────────────────────────────────────── */
.brand-logo-img {
    height: 28px;
    width: auto;
    object-fit: contain;
    border-radius: 5px;
}
.brand-logo-landing-img {
    height: 32px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 5px;
    margin-right: 6px;
}
/* Override the box style now that it's an image */
.rewire-nav-brand .brand-icon {
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* ── Knowledge category cards (clean grid) ───────────── */
.knowledge-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}
.kcat-card {
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: var(--rewire-radius);
    padding: 1rem 1.1rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    box-shadow: var(--rewire-shadow);
}
.kcat-card:hover {
    border-color: var(--rewire-primary-mid);
    box-shadow: 0 2px 12px rgba(37,99,235,0.12);
}
.kcat-card-active {
    background: var(--rewire-primary-light);
    border-color: var(--rewire-primary-mid);
    border-left: 3px solid var(--rewire-primary-mid);
}
.kcat-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rewire-text);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}
.kcat-count {
    font-size: 0.72rem;
    color: var(--rewire-muted);
    font-weight: 400;
}
.kcat-card-active .kcat-count { color: var(--rewire-primary-mid); }

/* ── Article row type badges ─────────────────────────── */
.article-row-type { flex-shrink: 0; width: 64px; }
.atype-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
}
.atype-video  { background: var(--rewire-accent-light); color: var(--rewire-primary-mid); }
.atype-audio  { background: #e0f2fe; color: #0369a1; }
.atype-info   { background: #fef9c3; color: #854d0e; }
.atype-text   { background: var(--rewire-primary-light); color: var(--rewire-primary-dark); }

/* ── Pinned card — clean ─────────────────────────────── */
.pinned-card {
    display: block;
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-top: 3px solid var(--rewire-primary-mid);
    border-radius: var(--rewire-radius);
    padding: 0.85rem 1rem;
    transition: box-shadow 0.15s, transform 0.15s;
    box-shadow: var(--rewire-shadow);
}
.pinned-card:hover {
    box-shadow: var(--rewire-shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}
.pinned-cat {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rewire-primary-mid);
}

/* ── Chat tooltip (first visit) ──────────────────────── */
.chat-tooltip {
    position: fixed;
    bottom: 90px;
    right: 1.5rem;
    width: 240px;
    background: #fff;
    border: 1px solid var(--rewire-border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(30,64,175,0.15);
    padding: 0.9rem 1rem;
    z-index: 999;
    animation: tooltip-in 0.25s ease;
}
.chat-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 22px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-right: 1px solid var(--rewire-border);
    border-bottom: 1px solid var(--rewire-border);
    transform: rotate(45deg);
}
@keyframes tooltip-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chat-tooltip-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: var(--rewire-muted);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s;
}
.chat-tooltip-close:hover { background: var(--rewire-primary-light); color: var(--rewire-primary); }
.chat-tooltip-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--rewire-primary-dark);
    margin-bottom: 0.3rem;
    padding-right: 16px;
}
.chat-tooltip-text {
    font-size: 0.78rem;
    color: var(--rewire-muted);
    line-height: 1.45;
}

/* ── Auth pages — stacked logo layout ───────────────── */
.auth-logo-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 1.25rem;
    width: 100%;
}
.auth-logo-img {
    height: 64px;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}
.auth-company-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rewire-primary-dark);
    letter-spacing: -0.02em;
    font-family: 'Inter', 'DM Sans', sans-serif;
    text-align: center;
    width: 100%;
}

/* ── Chat FAB — gradient bolt icon ──────────────────── */
.chat-fab-bolt {
    width: 26px;
    height: 26px;
    display: block;
    filter: drop-shadow(0 1px 3px rgba(167,139,250,0.4));
}

/* ── ArticleDetails — back button + tabs ─────────────── */
.article-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.article-back-btn:hover {
    background: rgba(255,255,255,0.28);
    color: #fff;
    text-decoration: none;
}
.article-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--rewire-border);
    margin-bottom: 1rem;
}
.article-tab-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rewire-muted);
    cursor: pointer;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    border-radius: 0;
}
.article-tab-btn:hover { color: var(--rewire-primary-mid); }
.article-tab-active {
    color: var(--rewire-primary-mid) !important;
    border-bottom-color: var(--rewire-primary-mid) !important;
    font-weight: 700;
}
.article-section-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rewire-primary-dark);
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--rewire-border);
}

/* ── Goals Popup (Month 3 self-review) ───────────────── */
.goals-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.goals-popup {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.goals-popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid var(--rewire-border);
    background: linear-gradient(135deg, var(--rewire-primary-dark) 0%, var(--rewire-primary-mid) 100%);
    color: #fff;
    border-radius: 16px 16px 0 0;
}
.goals-popup-title { font-size: 1.2rem; font-weight: 800; }
.goals-popup-sub   { font-size: 0.82rem; opacity: 0.8; margin-top: 2px; }
.goals-popup-close {
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; cursor: pointer; flex-shrink: 0;
    transition: background 0.15s;
}
.goals-popup-close:hover { background: rgba(255,255,255,.35); }
.goals-popup-body {
    overflow-y: auto;
    padding: 1.25rem 1.75rem;
    flex: 1;
}
.goals-field { margin-bottom: 1.25rem; }
.goals-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--rewire-primary-dark);
    margin-bottom: 0.2rem;
}
.goals-required { color: var(--rewire-accent); }
.goals-hint {
    font-size: 0.75rem;
    color: var(--rewire-muted);
    margin-bottom: 0.4rem;
}
.goals-textarea {
    width: 100%;
    border: 1px solid var(--rewire-border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    font-family: 'DM Sans', 'Inter', sans-serif;
    color: var(--rewire-text);
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #fafbff;
}
.goals-textarea:focus {
    outline: 2px solid var(--rewire-primary-mid);
    outline-offset: 2px;
    border-color: var(--rewire-primary-mid);
    background: #fff;
}
.goals-popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rewire-border);
    flex-wrap: wrap;
}
.goals-submit-btn {
    min-width: 200px;
    font-weight: 600;
}

/* ── QA Checklist popup ──────────────────────────────── */
.qa-progress-bar-wrap {
    height: 6px;
    background: var(--rewire-accent-light);
    border-radius: 99px;
    margin-bottom: 0.4rem;
    overflow: hidden;
}
.qa-progress-bar {
    height: 100%;
    background: var(--rewire-primary-mid);
    border-radius: 99px;
    transition: width 0.3s ease;
}
.qa-progress-label {
    font-size: 0.75rem;
    color: var(--rewire-muted);
    margin-bottom: 1.1rem;
    font-weight: 500;
}
.qa-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--rewire-border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    background: #fafbff;
}
.qa-item:hover { background: var(--rewire-primary-light); border-color: var(--rewire-accent-light); }
.qa-item-done  { background: #f0fdf4; border-color: #bbf7d0; }
.qa-checkbox {
    width: 22px; height: 22px;
    border: 2px solid var(--rewire-border);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
    color: #fff;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 1px;
}
.qa-checkbox-done {
    background: #16a34a;
    border-color: #16a34a;
}
.qa-item-text {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--rewire-text);
}
.qa-item-done .qa-item-text {
    color: var(--rewire-muted);
    text-decoration: line-through;
    text-decoration-color: #86efac;
}

/* ── Article accordion sections ──────────────────────── */
.accordion-section {
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    gap: 0.75rem;
}
.accordion-trigger:hover .accordion-title {
    color: var(--rewire-primary-mid);
}
.accordion-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rewire-primary-dark);
    transition: color 0.15s;
    line-height: 1.4;
}
.accordion-chevron {
    font-size: 1.3rem;
    color: var(--rewire-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
    display: inline-block;
    line-height: 1;
    transform: rotate(0deg);
    padding-bottom: 2px;
}
.accordion-chevron-open {
    transform: rotate(90deg);
}
.accordion-body {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 0.5px solid var(--rewire-border);
}
.accordion-open {
    border-color: var(--rewire-accent-light);
    box-shadow: 0 1px 6px rgba(37,99,235,0.07);
}

/* ── Learning page — task highlight on arrival ───────── */
.learning-highlight {
    border: 2px solid var(--rewire-primary-mid) !important;
    border-radius: 10px;
}
@keyframes learning-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,99,235,0.35); }
    50%  { box-shadow: 0 0 0 12px rgba(37,99,235,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
.learning-highlight-pulse {
    border: 2px solid var(--rewire-primary-mid) !important;
    border-radius: 10px;
    animation: learning-pulse 0.7s ease 2;
}

/* ══════════════════════════════════════════════════
   About Modal
   ══════════════════════════════════════════════════ */

.about-i-btn {
    position: fixed;
    bottom: 28px;
    left: 28px;
    z-index: 910;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.25);
    font-family: 'DM Sans', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    font-style: italic;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(30,64,175,0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s, box-shadow 0.18s;
    padding: 0;
}
.about-i-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37,99,235,0.50);
}
.about-i-btn:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
}
.about-i-letter { display: block; line-height: 1; margin-top: 1px; }

.about-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(10,15,40,0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: about-fade 0.2s ease;
}
@keyframes about-fade { from { opacity:0; } to { opacity:1; } }

.about-popup {
    background: #fff;
    border-radius: 20px;
    width: min(440px, 94vw);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15,23,42,0.30);
    animation: about-slide 0.22s cubic-bezier(0.34,1.3,0.64,1);
    font-family: 'DM Sans','Inter',sans-serif;
}
@keyframes about-slide {
    from { transform: translateY(24px) scale(0.97); opacity:0; }
    to   { transform: translateY(0) scale(1); opacity:1; }
}

.about-popup-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    direction: rtl;
}
.about-popup-title {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.about-popup-x {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.about-popup-x:hover { background: rgba(255,255,255,0.28); }

.about-popup-body {
    padding: 20px 28px 16px;
    direction: rtl;
}

/* לוגו Rewire בראש הפופ-אפ */
.about-rewire-logo {
    height: 48px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
    margin: 0 auto 4px;
}

.about-center-block { text-align: center; margin-bottom: 2px; }

.about-project-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.about-project-sub { font-size: 0.83rem; color: #6b7280; }
.about-year { font-size: 0.84rem; color: #374151; font-weight: 500; margin-bottom: 4px; }
.about-faculty-link {
    font-size: 0.83rem;
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
    display: inline-block;
}
.about-faculty-link:hover { color: #1d4ed8; }

.about-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, #dbeafe 40%, #dbeafe 60%, transparent);
    margin: 13px 0;
}

/* שורת צוות + לוגו HIT */
.about-team-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.about-team-text {
    flex: 1;
    font-size: 0.85rem;
    color: #111827;
    line-height: 1.8;
}
.about-hit-logo-col {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}
.about-hit-logo-img {
    width: 100px;
    height: auto;
    object-fit: contain;
}

.about-lbl { font-weight: 700; color: #1e3a8a; font-size: 0.83rem; }
.about-section-line { margin-bottom: 2px; }
.about-names { font-size: 0.87rem; color: #111827; line-height: 1.75; text-align: center; }

.about-popup-footer {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    text-align: center;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.88);
    padding: 9px 20px;
    letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════
   Podcast Player
   ══════════════════════════════════════════════════ */

/* עוטף חיצוני — מכסה את כל הקרטיס הלבן */
.pod-outer {
    background: linear-gradient(145deg, #1e3a8a 0%, #1e40af 60%, #2563eb 100%);
    border-radius: 16px;
    padding: 22px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(30,64,175,0.35);
}

.pod-card {
    font-family: 'DM Sans', sans-serif;
    color: #fff;
    width: 100%;
}

/* Top row */
.pod-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    direction: rtl;
    text-align: center;
}
.pod-icon-wrap {
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pod-mic { font-size: 1.3rem; }
.pod-info { text-align: center; }
.pod-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.6);
    margin-bottom: 3px;
    text-align: center;
}
.pod-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1.3;
}

/* Progress */
.pod-progress-wrap {
    cursor: pointer;
    padding: 6px 0;
    margin-bottom: 4px;
}
.pod-progress-bg {
    position: relative;
    height: 4px;
    background: rgba(255,255,255,0.22);
    border-radius: 99px;
}
.pod-progress-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: #fff;
    border-radius: 99px;
    transition: width 0.25s linear;
}
.pod-progress-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px; height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.28);
    transition: left 0.25s linear;
}

/* Times */
.pod-times {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 16px;
}

/* Controls */
.pod-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-bottom: 16px;
}
.pod-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, opacity 0.15s;
    padding: 0;
}
.pod-btn:hover { opacity: 0.8; transform: scale(1.1); }
.pod-play {
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 56px;
    height: 56px;
}
.pod-play:hover { background: rgba(255,255,255,0.32); }
.pod-skip { opacity: 0.72; }

/* Volume */
.pod-volume-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pod-vol-icon { font-size: 0.88rem; opacity: 0.7; }
.pod-volume-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    border-radius: 99px;
    background: rgba(255,255,255,0.25);
    outline: none;
    cursor: pointer;
}
.pod-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

/* ── Star rating (#15) ───────────────────────────────── */
.star-rating-row {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    align-items: center;
}
.star-btn {
    background: none;
    border: none;
    font-size: 2.8rem;
    cursor: pointer;
    padding: 0 3px;
    line-height: 1;
    transition: transform 0.12s;
    -webkit-text-stroke: 1.5px #2563eb;
}
.star-btn:hover  { transform: scale(1.15); }
.star-btn.star-filled {
    color: #2563eb;
    -webkit-text-stroke: 0;
}
.star-btn.star-empty {
    color: transparent;
    -webkit-text-stroke: 1.5px #93c5fd;
}

/* ── Timeline incomplete (#18) ───────────────────────── */
.timeline-behind {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

/* ═══════════════════════════════════════════════════════
   Onboarding Tour
   ═══════════════════════════════════════════════════════ */
.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(10,15,40,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: tour-fade 0.2s ease;
}
@keyframes tour-fade { from { opacity:0; } to { opacity:1; } }

.tour-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 360px;
    width: 100%;
    padding: 26px 26px 22px;
    text-align: center;
    box-shadow: var(--rewire-shadow-md);
    animation: tour-pop 0.18s ease;
}
@keyframes tour-pop { from { opacity:0; transform:scale(0.96);} to { opacity:1; transform:scale(1);} }
.tour-modal-emoji { font-size: 1.9rem; margin-bottom: 10px; }
.tour-modal-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.tour-modal-body  { font-size: 0.85rem; color: var(--rewire-muted); line-height: 1.55; margin: 0 0 20px; }

.coach-spot {
    position: relative;
    z-index: 1101;
    box-shadow: 0 0 0 4px #fff, 0 0 0 9999px rgba(15,23,42,0.6);
    border-radius: 6px;
    background: #fff;
    color: var(--rewire-primary) !important;
}

.coach-box {
    position: fixed;
    z-index: 1102;
    background: #fff;
    border-radius: 12px;
    width: 260px;
    padding: 14px 16px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.22);
}
.coach-arrow {
    position: absolute;
    top: -7px;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
}
.coach-counter { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; color: var(--rewire-primary); margin-bottom: 6px; }
.coach-track { height: 3px; background: #eef2f7; border-radius: 99px; margin-bottom: 10px; overflow: hidden; }
.coach-fill  { height: 100%; background: var(--rewire-primary); border-radius: 99px; transition: width 0.2s; }
.coach-title { font-size: 0.9rem; font-weight: 700; margin: 0 0 4px; }
.coach-body  { font-size: 0.8rem; color: var(--rewire-muted); line-height: 1.5; margin: 0 0 14px; }
.coach-actions { display: flex; align-items: center; justify-content: space-between; }
.coach-skip { font-size: 0.75rem; color: var(--rewire-muted); background: none; border: none; cursor: pointer; padding: 4px 0; }
.coach-skip:hover { color: var(--rewire-text); text-decoration: underline; }
.coach-nav { display: flex; gap: 6px; }
.coach-back { font-size: 0.78rem; color: var(--rewire-muted); background: none; border: none; cursor: pointer; padding: 6px 8px; }
.coach-next { font-size: 0.78rem; font-weight: 600; color: #fff; background: var(--rewire-primary); border: none; border-radius: 7px; padding: 6px 14px; cursor: pointer; }
.coach-next:hover { background: var(--rewire-primary-dark); }

@media (max-width: 640px) {
    .coach-box { width: 220px; }
}