/* =============================================================================
   iView Learning — Study Skills Shell
   Tab-based multi-tool layout + consistent "lessons-look" redesign
   Version: 1.0  |  February 2026
   ============================================================================= */

/* ───────────────────────────────────────────────────────────────────────────
   CSS VARIABLES  (fall back to design-system values when available)
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --ss-primary:       var(--brand-primary,  #5057BE);
    --ss-primary-light: rgba(80, 87, 190, 0.1);
    --ss-primary-soft:  rgba(80, 87, 190, 0.06);
    --ss-bg:            #F4F5FB;          /* page background */
    --ss-surface:       #FFFFFF;          /* card surface */
    --ss-border:        rgba(0, 0, 0, 0.07);
    --ss-text:          var(--neutral-900, #0E1015);
    --ss-muted:         var(--neutral-600, #64748B);
    --ss-radius:        14px;
    --ss-shadow:        0 2px 10px rgba(80, 87, 190, 0.08);
    --ss-shadow-hover:  0 8px 24px rgba(80, 87, 190, 0.16);
    --ss-tab-h:         52px;
    --ss-tab-bar-bg:    #FFFFFF;
}

/* ───────────────────────────────────────────────────────────────────────────
   BACKGROUND — applied to the whole content area while on a study-skills page
   ─────────────────────────────────────────────────────────────────────────── */
.ss-page-wrapper {
    background: var(--ss-bg);
    min-height: calc(100vh - var(--ss-tab-h));
    padding: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   TAB BAR — hidden: site-wide tab bar is used instead
   ─────────────────────────────────────────────────────────────────────────── */
#ss-tab-bar {
    display: none !important;
}

/* ── Individual Tab ── */
.ss-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--ss-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
    position: relative;
    border-radius: 0;
    user-select: none;
    flex-shrink: 0;
}

.ss-tab:hover {
    color: var(--ss-primary);
    background: var(--ss-primary-soft);
    text-decoration: none;
}

.ss-tab.active {
    color: var(--ss-primary);
    border-bottom-color: var(--ss-primary);
    font-weight: 700;
    background: var(--ss-primary-soft);
}

/* ── Tab icon dot ── */
.ss-tab .ss-tab-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    background: var(--ss-primary-light);
    color: var(--ss-primary);
    transition: transform 0.2s;
}

.ss-tab.active .ss-tab-icon {
    background: var(--ss-primary);
    color: #fff;
}

.ss-tab:hover .ss-tab-icon {
    transform: scale(1.1);
}

/* ── Close Button on Tab ── */
.ss-tab-close {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--ss-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    line-height: 1;
    flex-shrink: 0;
}

.ss-tab:hover .ss-tab-close,
.ss-tab.active .ss-tab-close {
    opacity: 1;
}

.ss-tab-close:hover {
    background: rgba(239,68,68, 0.12);
    color: #ef4444;
}

/* ── Tab Bar Right-Side Actions ── */
.ss-tab-bar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-left: 12px;
    border-left: 1px solid var(--ss-border);
}

.ss-btn-all-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--ss-primary);
    color: #fff !important;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: box-shadow 0.2s, transform 0.2s;
    white-space: nowrap;
}

.ss-btn-all-tools:hover {
    box-shadow: 0 4px 12px rgba(80, 87, 190, 0.35);
    transform: translateY(-1px);
}

.ss-btn-all-tools i { font-size: 0.75rem; }

/* ── "Add Tab" hint button ── */
.ss-tab-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px dashed var(--ss-primary);
    color: var(--ss-primary);
    background: transparent;
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.15s;
    flex-shrink: 0;
}

.ss-tab-add:hover {
    background: var(--ss-primary-soft);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONSISTENT PAGE HEADER CARD
   Every study-skills page shows a uniform header card (injected by JS)
   ─────────────────────────────────────────────────────────────────────────── */
.ss-page-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ss-surface);
    border-radius: var(--ss-radius);
    box-shadow: var(--ss-shadow);
    border: 1px solid var(--ss-border);
    padding: 20px 28px;
    margin-bottom: 24px;
    gap: 16px;
}

.ss-page-header-card .ss-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
}

.ss-page-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--ss-primary-light);
    color: var(--ss-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.ss-page-header-card h1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ss-text);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-page-header-card .ss-page-subtitle {
    font-size: 0.82rem;
    color: var(--ss-muted);
    margin: 0;
}

.ss-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Back to Hub link ── */
.ss-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ss-primary) !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity 0.15s;
}

.ss-back-btn:hover { opacity: 0.75; }

/* ─────────────────────────────────────────────────────────────────────────────
   UNIVERSAL CARD OVERRIDES
   Normalise all the per-page card styles to a consistent look.
   Covers every *-card class discovered across ~40 study skills pages.
   ─────────────────────────────────────────────────────────────────────────── */
#ss-primary-pane .card,
#ss-primary-pane .assessment-card,
#ss-primary-pane .timer-card,
#ss-primary-pane .stats-card,
#ss-primary-pane .clean-header,
#ss-primary-pane .analytics-card,
#ss-primary-pane .question-card,
#ss-primary-pane .editor-card,
#ss-primary-pane .create-card,
#ss-primary-pane .item-card,
#ss-primary-pane .achievement-card,
#ss-primary-pane .exam-card,
#ss-primary-pane .stat-card,
#ss-primary-pane .cornell-card,
#ss-primary-pane .map-card,
#ss-primary-pane .feature-card,
#ss-primary-pane .template-card,
#ss-primary-pane .filter-card {
    background: var(--ss-surface) !important;
    border-radius: var(--ss-radius) !important;
    box-shadow: var(--ss-shadow) !important;
    border: 1px solid var(--ss-border) !important;
}

/* Hover lift on interactive/clickable cards */
#ss-primary-pane .card[onclick],
#ss-primary-pane .card[style*="cursor: pointer"],
#ss-primary-pane .course-module-card,
#ss-primary-pane .card-tool,
#ss-primary-pane .item-card,
#ss-primary-pane .template-card,
#ss-primary-pane .map-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer;
}

#ss-primary-pane .card[onclick]:hover,
#ss-primary-pane .card[style*="cursor: pointer"]:hover,
#ss-primary-pane .course-module-card:hover,
#ss-primary-pane .card-tool:hover,
#ss-primary-pane .item-card:hover,
#ss-primary-pane .template-card:hover,
#ss-primary-pane .map-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ss-shadow-hover) !important;
}

/* Primary buttons — match brand */
#ss-primary-pane .btn-primary {
    background: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
}

#ss-primary-pane .btn-primary:hover,
#ss-primary-pane .btn-primary:focus {
    background: #4049A8 !important;
    border-color: #4049A8 !important;
    box-shadow: 0 4px 12px rgba(80, 87, 190, 0.3) !important;
}

/* Soft background variants — re-map to brand */
#ss-primary-pane .bg-soft-primary { background: var(--ss-primary-light) !important; }
#ss-primary-pane .text-primary     { color: var(--ss-primary) !important; }

/* ── Remove double-shadow from nested .card-body ── */
#ss-primary-pane .card > .card-body {
    box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CLEAN HEADER OVERRIDES  (used in pomodoro, timer, etc.)
   ─────────────────────────────────────────────────────────────────────────── */
#ss-primary-pane .clean-header {
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
}

#ss-primary-pane .clean-header h1,
#ss-primary-pane .clean-header h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--ss-text) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE WRAPPER PADDING
   Keep extra side padding on wrapper minimal; individual pages own their padding.
   ─────────────────────────────────────────────────────────────────────────── */
.ss-page-wrapper {
    padding: 0 !important;          /* reset — primary pane handles content padding */
}

#ss-primary-pane {
    padding: 20px 24px 40px;
}

/* Pages that wrap their content in container-fluid — avoid double padding */
#ss-primary-pane > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* When split view is active, primary pane manages its own scroll padding */
#ss-page-wrapper.ss-split-view #ss-primary-pane {
    padding: 12px 16px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — MOBILE
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #ss-tab-bar { padding: 0 8px; gap: 2px; }
    .ss-tab { padding: 0 10px; font-size: 0.75rem; }
    .ss-page-header-card { flex-direction: column; align-items: flex-start; padding: 16px; }
    #ss-primary-pane { padding: 12px 12px 32px; }
    #ss-page-wrapper.ss-split-view { flex-direction: column; height: auto; }
    #ss-page-wrapper.ss-split-view #ss-primary-pane,
    .ss-split-pane { flex: 1 1 auto; min-height: 50vh; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BREADCRUMB  (mirror lessons page breadcrumb style)
   ─────────────────────────────────────────────────────────────────────────── */
.ss-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--ss-muted);
    margin-bottom: 16px;
    padding: 0;
    list-style: none;
}

.ss-breadcrumb a {
    color: var(--ss-primary) !important;
    text-decoration: none !important;
    font-weight: 500;
}

.ss-breadcrumb a:hover { text-decoration: underline !important; }
.ss-breadcrumb .separator { color: var(--ss-muted); }
.ss-breadcrumb .current    { color: var(--ss-text); font-weight: 500; }

/* ─────────────────────────────────────────────────────────────────────────────
   SPLIT-VIEW LAYOUT  (two tools side by side)
   Activated when user has 2+ tabs open and clicks the split-view button
   ─────────────────────────────────────────────────────────────────────────── */
#ss-page-wrapper {
    display: block;
}

#ss-primary-pane {
    /* Normal: full width */
}

#ss-page-wrapper.ss-split-view {
    display: flex;
    flex-direction: row;
    gap: 8px;
    height: calc(100vh - 160px); /* navbar + site-tab-bar + gap */
    overflow: hidden;
}

#ss-page-wrapper.ss-split-view #ss-primary-pane {
    flex: 1 1 50%;
    overflow-y: auto;
    background: var(--ss-bg);
    border-radius: var(--ss-radius);
    border: 2px solid transparent;
    padding: 0;
    transition: border-color 0.2s;
}

#ss-page-wrapper.ss-split-view #ss-primary-pane:focus-within {
    border-color: var(--ss-primary);
}

/* Secondary pane (iframe) */
.ss-split-pane {
    flex: 1 1 50%;
    overflow-y: auto;
    background: var(--ss-bg);
    border-radius: var(--ss-radius);
    border: 2px solid var(--ss-primary-light);
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.ss-split-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--ss-border);
    background: #fff;
    border-radius: var(--ss-radius) var(--ss-radius) 0 0;
    flex-shrink: 0;
}

.ss-split-pane-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ss-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Split toggle button in tab bar actions */
.ss-split-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1.5px solid var(--ss-primary);
    border-radius: 20px;
    background: transparent;
    color: var(--ss-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.ss-split-toggle.active,
.ss-split-toggle:hover {
    background: var(--ss-primary);
    color: #fff;
}

/* Inline select in the split toggle */
.ss-split-select {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    padding: 0;
    max-width: 120px;
}

.active .ss-split-select {
    color: #fff;
}

.ss-split-group {
    gap: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   IFRAME SPLIT PANE
   ─────────────────────────────────────────────────────────────────────────── */
.ss-split-iframe {
    width: 100%;
    flex: 1 1 auto;
    border: none;
    border-radius: 0 0 var(--ss-radius) var(--ss-radius);
    background: #fff;
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRANSITIONS & ANIMATIONS
   ─────────────────────────────────────────────────────────────────────────── */
#ss-primary-pane > *:not(#ss-auto-header) {
    animation: ssPageFadeIn 0.25s ease;
}

#ss-auto-header {
    animation: ssPageFadeIn 0.2s ease;
}
@keyframes ssPageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TAB BAR ENTER ANIMATION
   ─────────────────────────────────────────────────────────────────────────── */
.ss-tab {
    animation: ssTabSlide 0.15s ease;
}

@keyframes ssTabSlide {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATE (no tabs)
   ─────────────────────────────────────────────────────────────────────────── */
.ss-tabs-empty {
    font-size: 0.78rem;
    color: var(--ss-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCROLLBAR STYLE  (for split panes)
   ─────────────────────────────────────────────────────────────────────────── */
.ss-split-pane::-webkit-scrollbar { width: 5px; }
.ss-split-pane::-webkit-scrollbar-track { background: transparent; }
.ss-split-pane::-webkit-scrollbar-thumb {
    background: rgba(80,87,190,0.2);
    border-radius: 10px;
}