/*
 * Mega Dashboard layout — full-width single column (v5.2.31).
 *
 * Replaces the v5.2.30 two-column sidebar layout. Account navigation lives
 * in the WordPress main menu now (Account → My Dashboard / My Account / Sign Out),
 * freeing the page to use the full content width for the dashboard cards.
 *
 * Brand v1.6 tokens mirrored at root for self-containment (Customizer
 * Additional CSS doesn't always load in shortcode-rendered surfaces).
 *
 * @since   5.2.31
 * @package Airi\Dashboard
 */

.airi-md {
    --md-red: #C00000;
    --md-red-hover: #9B0000;
    --md-red-tint: rgba(192, 0, 0, 0.08);
    --md-text: #1A1A1A;
    --md-text-subtle: #6B6B6B;
    --md-border: #E5E5E5;
    --md-bg-card: #FFFFFF;
    --md-bg-page: #F9F9F9;
    --md-radius: 8px;
    --md-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px;
    box-sizing: border-box;
    color: var(--md-text);
    font-family: inherit;
}

.airi-md *,
.airi-md *::before,
.airi-md *::after {
    box-sizing: border-box;
}

/* ---- main column ---- */

.airi-md__main {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Card the real .airi-card surfaces only — NOT the bare section wrappers
   (.airi-dashboard--aire / --individual / --organisation), which already wrap
   their content in an .airi-card. Carding the section too produced a double
   "card inside a card" outer box. */
.airi-md__main > .airi-card {
    background: var(--md-bg-card);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius);
    padding: 28px;
    box-shadow: var(--md-shadow);
}

.airi-md__main .airi-card-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: var(--md-text);
}

.airi-md__notice {
    color: var(--md-text-subtle);
    font-style: italic;
    padding: 12px;
    background: var(--md-bg-page);
    border-radius: var(--md-radius);
    margin: 0;
}

/* ---- responsive ---- */

@media (max-width: 768px) {
    .airi-md {
        padding: 16px 12px;
    }

    .airi-md__main {
        gap: 16px;
    }

    .airi-md__main > .airi-card {
        padding: 20px;
    }

    .airi-md__main .airi-card-title {
        font-size: 19px;
    }
}

/* ---- nested LLMS markup tidy-ups ---- */

.airi-md__main .airi-card-courses .llms-loop-title,
.airi-md__main .airi-card-certificates h3 {
    margin-top: 0;
}

.airi-md__main .airi-card-edit-account .llms-form-fields {
    max-width: 100%;
}

/* ---- task-20260531-002: LLM recommendation + org-aggregation surfaces ---- */

/* Per-learner LLM advice sits under the static recommendation. Subtle grey
   panel with the brand red accent rail (matches the static reco block). */
.airi-md__main .airi-llm-reco {
    margin: 16px 0 0;
    padding: 16px 20px;
    background: #F2F2F2;
    border-left: 4px solid var(--md-red, #C00000);
    border-radius: 0 var(--md-radius, 8px) var(--md-radius, 8px) 0;
}

.airi-md__main .airi-llm-reco-title {
    margin: 0 0 8px;
    font-size: 15px;
}

.airi-md__main .airi-llm-reco-body p {
    margin: 0 0 10px;
    color: var(--md-text, #1A1A1A);
}

.airi-md__main .airi-llm-reco-body p:last-child {
    margin-bottom: 0;
}

/* AI-disclosure note — small, muted, italic. */
.airi-md__main .airi-llm-reco-disclosure {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--md-text-subtle, #6B6B6B);
}

/* Org-aggregation card reuses .airi-card / .airi-card-body / .airi-card-col
   from the layout sheet. Locked (below-N) state is visually quieter. */
.airi-md__main .airi-card-org-locked {
    background: #F9F9F9;
    border: 1px dashed var(--md-border, #E5E5E5);
}

.airi-md__main .airi-org-alignment {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--md-text, #1A1A1A);
}

.airi-md__main .airi-org-narrative p {
    margin: 12px 0 0;
    color: var(--md-text, #1A1A1A);
}

/* Aggregate radar shares the oAIRI palette; no extra colour needed. */
.airi-md__main .airi-radar-wrap-org {
    margin: 0;
}

/* ── My Certificates / My Badges — self-rendered clean stacked list ──────────
   MegaDashboardShortcode::render_earned_list emits this markup instead of the
   native LLMS loop (a multi-column grid + preview frame that collapsed to ~1 char
   wide / vertical one-letter-per-line text in the narrow sidebar). Full control,
   guaranteed horizontal. */
.airi-card-certificates .airi-earned-list,
.airi-card-badges .airi-earned-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.airi-earned-item {
    margin: 0 0 .5rem;
}
.airi-earned-item:last-child {
    margin-bottom: 0;
}
.airi-earned-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .55rem .7rem;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease;
}
.airi-earned-link:hover,
.airi-earned-link:focus {
    border-color: #C00000;
}
.airi-earned-name {
    display: block;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.3;
    color: #1A1A1A;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    writing-mode: horizontal-tb;
}
.airi-earned-date {
    display: block;
    margin-top: .1rem;
    font-size: .78rem;
    color: #6B7280;
    writing-mode: horizontal-tb;
}