/* ==========================================================================
   EduSphere SOP & Knowledge Management — module stylesheet

   ADDITIVE ONLY. portal.css owns .es-btn, .es-btn-primary, .es-field,
   .es-section-head, .es-eyebrow, .es-badge, .es-empty-state, .es-hint,
   .es-grid, .es-grid-item — nothing here redefines them.
   portal-modules.css (if enqueued) owns .es-btn-inline, .es-btn-secondary,
   .es-btn-sm, .es-portal-feedback.

   Locked accent (Master Build Guide §6.2): Ink Navy on Paper, minimal
   accent — this is a reading-heavy module, so type and whitespace carry
   it, not colour. The one deliberate exception is the "AI-suggested"
   badge on gap suggestions, which borrows the platform-wide AI tag
   colour convention (a soft violet) so AI-authored content is always
   recognizable at a glance, per §6.2's row for Module 11.
   ========================================================================== */

:root {
    --es-sop-ai-tint: #f1ecfa;
    --es-sop-ai: #6b46c1;
}

.edusphere-sop-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.es-sop-console-head {
    margin-bottom: 24px;
}

.es-sop-console-head h1 {
    font-size: 28px;
}

/* ---------- Tabs ---------- */

.es-sop-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--es-line);
    margin-bottom: 28px;
}

.es-sop-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 4px;
    margin-right: 20px;
    font-family: var(--es-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--es-slate);
    cursor: pointer;
}

.es-sop-tab:hover {
    color: var(--es-ink);
}

.es-sop-tab.is-active {
    color: var(--es-ink);
    border-bottom-color: var(--es-ink);
}

.es-sop-tab:focus-visible {
    outline: 2px solid var(--es-ochre);
    outline-offset: 2px;
}

.es-sop-panel {
    display: none;
}

.es-sop-panel.is-active {
    display: block;
}

.es-sop-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.es-sop-panel-head h2 {
    font-size: 20px;
    margin-bottom: 0;
}

/* ---------- Author form ---------- */

.es-sop-form {
    border: 1px solid var(--es-line);
    border-radius: var(--es-radius);
    padding: 20px;
    margin-bottom: 28px;
    background: var(--es-paper-raised);
}

.es-sop-form textarea {
    width: 100%;
    padding: 11px 14px;
    font-family: var(--es-font-body);
    font-size: 14px;
    color: var(--es-ink);
    background: var(--es-paper-raised);
    border: 1px solid var(--es-line);
    border-radius: var(--es-radius);
    resize: vertical;
}

.es-sop-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

/* ---------- SOP table ---------- */

.es-sop-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.es-sop-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--es-slate-light);
    padding: 8px 12px;
    border-bottom: 1px solid var(--es-line);
}

.es-sop-table td {
    padding: 12px;
    border-bottom: 1px solid var(--es-line-soft);
    vertical-align: middle;
}

.es-mono {
    font-family: var(--es-font-mono);
    font-size: 12px;
    color: var(--es-slate);
}

/* ---------- Status badges — reuse portal.css's .es-badge base ---------- */

.es-badge-sop-draft {
    background: var(--es-line-soft);
    color: var(--es-slate);
}

.es-badge-sop-in_review {
    background: #fdf3e3;
    color: var(--es-ochre-dark);
}

.es-badge-sop-published {
    background: var(--es-teal-tint);
    color: var(--es-teal);
}

.es-badge-sop-archived {
    background: var(--es-line-soft);
    color: var(--es-slate-light);
}

.es-badge-ai {
    background: var(--es-sop-ai-tint);
    color: var(--es-sop-ai);
}

/* ---------- Approval / gap / KB cards ---------- */

.es-sop-approval-card,
.es-sop-gap-card,
.es-sop-kb-card {
    border: 1px solid var(--es-line);
    border-left: 3px solid var(--es-ink);
    border-radius: var(--es-radius);
    padding: 18px 20px;
    margin-bottom: 16px;
    background: var(--es-paper-raised);
}

.es-sop-gap-card {
    border-left-color: var(--es-sop-ai);
}

.es-sop-approval-card-head,
.es-sop-gap-card-head,
.es-sop-kb-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.es-sop-approval-card-head h3,
.es-sop-gap-card-head h3,
.es-sop-kb-card-head h3 {
    font-size: 16px;
    margin-bottom: 0;
}

.es-sop-approval-category {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--es-slate);
    margin-bottom: 12px;
}

.es-sop-approval-content {
    font-size: 14px;
    line-height: 1.6;
    border-top: 1px solid var(--es-line-soft);
    border-bottom: 1px solid var(--es-line-soft);
    padding: 14px 0;
    margin-bottom: 14px;
}

.es-sop-kb-card-body {
    font-size: 14px;
    color: var(--es-slate);
    line-height: 1.6;
    margin-bottom: 10px;
}

/* ---------- Knowledge base search ---------- */

.es-sop-kb-search {
    max-width: 420px;
    margin-bottom: 24px;
}

@media (max-width: 640px) {
    .edusphere-sop-wrap {
        padding: 20px 16px 48px;
    }

    .es-sop-table,
    .es-sop-table thead,
    .es-sop-table tbody,
    .es-sop-table tr,
    .es-sop-table td {
        display: block;
        width: 100%;
    }

    .es-sop-table thead {
        display: none;
    }

    .es-sop-table tr {
        border: 1px solid var(--es-line-soft);
        border-radius: var(--es-radius);
        margin-bottom: 12px;
        padding: 8px 12px;
    }

    .es-sop-table td {
        border-bottom: none;
        padding: 6px 0;
    }
}