/* ============================================
   MyAccess — Brutalist Design Overrides v1.0
   Match with Flora Theme design system
   ============================================
   Dependencies: bd-theme (style.css)
   ============================================ */

/* ── Reduce top gap from header on MyAccess pages ── */

.bd-main-content--full:has(.myaccess-dashboard) {
    padding-top: 5px;
}

.bd-main-content--full:has(.myaccess-dashboard) .bd-single-title {
    margin-bottom: var(--bd-space-xs);
}

/* ── Override MyAccess CSS Variables ── */

.myaccess-dashboard {
    --myaccess-accent: var(--bd-primary);
    --myaccess-accent-2: var(--bd-primary-dark);
    --myaccess-accent-strong: var(--bd-primary-dark);
    --myaccess-accent-soft: var(--bd-primary-subtle);
    --myaccess-success: var(--bd-primary);
    --myaccess-danger: #dc2626;
    --myaccess-white: var(--bd-surface);

    --myaccess-bg: var(--bd-surface-2);
    --myaccess-surface: var(--bd-surface);
    --myaccess-text: var(--bd-text);
    --myaccess-text-secondary: var(--bd-text-soft);
    --myaccess-muted: var(--bd-text-muted);
    --myaccess-border: var(--bd-border-light);
    --myaccess-border-light: var(--bd-border-light);

    --myaccess-radius: 0;
    --myaccess-radius-sm: 0;
    --myaccess-radius-lg: 0;
    --myaccess-radius-xl: 0;
    --myaccess-radius-full: 0;

    --myaccess-font: var(--bd-font);

    --myaccess-shadow-sm: var(--bd-shadow-sm);
    --myaccess-shadow: var(--bd-shadow-md);
    --myaccess-shadow-lg: var(--bd-shadow-lg);
    --myaccess-shadow-xl: var(--bd-shadow-lg);

    --myaccess-dashboard-title-font-family: var(--bd-font);
    --myaccess-dashboard-title-color: var(--bd-text);
    --myaccess-dashboard-title-weight: 900;
}

/* ── Dashboard Container — Clean ── */

.myaccess-dashboard {
    margin-top: 0 !important;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.myaccess-dashboard::before {
    display: none;
}

/* ── Hero Section — Brutalist ── */

.myaccess-dashboard__hero {
    background: var(--bd-surface);
    border: var(--bd-border-w) solid var(--bd-border);
    border-radius: 0;
    box-shadow: var(--bd-shadow-sm);
}

.myaccess-dashboard__eyebrow {
    background: var(--bd-primary-subtle);
    color: var(--bd-primary);
    border: 1px solid var(--bd-border);
    border-radius: 0;
}

.myaccess-dashboard__eyebrow::before {
    background: var(--bd-primary);
}

.myaccess-dashboard__title {
    color: var(--bd-text);
    font-family: var(--bd-font);
    font-weight: 900;
    letter-spacing: -0.03em;
}

/* ── Cards — Lighter Brutalist ── */

.myaccess-card {
    border: 2px solid var(--bd-border);
    border-radius: 0;
    background: var(--bd-surface);
    box-shadow: 3px 3px 0 0 var(--bd-dark);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.myaccess-card:hover {
    transform: translateY(-2px);
    border-color: var(--bd-primary);
    box-shadow: 4px 4px 0 0 var(--bd-primary);
}

.myaccess-card:active {
    transform: translateY(0);
    box-shadow: 2px 2px 0 0 var(--bd-dark);
}

.myaccess-card__media {
    background: var(--bd-primary-subtle);
}

.myaccess-dashboard__results {
    gap: 12px;
}

.myaccess-card__title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.myaccess-card__title a {
    color: var(--bd-text);
}

.myaccess-card__title a:hover {
    color: var(--bd-primary);
}

.myaccess-card__excerpt {
    color: var(--bd-text-soft);
}

/* ── Card Button — Brutalist ── */

.myaccess-card__button {
    border-radius: 0;
    background: var(--bd-primary);
    color: var(--bd-text-on-primary);
    font-weight: 700;
    box-shadow: 3px 3px 0 0 var(--bd-dark);
    border: 2px solid var(--bd-dark);
    transition: transform 100ms ease, box-shadow 100ms ease;
}

.myaccess-card__button:hover {
    background: var(--bd-primary-dark);
    transform: translateY(-2px);
    box-shadow: 5px 5px 0 0 var(--bd-dark);
}

.myaccess-card__button:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--bd-dark);
}

.myaccess-card__button--outline {
    background: transparent;
    color: var(--bd-primary);
    border-color: var(--bd-primary);
    box-shadow: none;
}

.myaccess-card__button--outline:hover {
    background: var(--bd-primary-subtle);
    color: var(--bd-primary-dark);
    border-color: var(--bd-primary-dark);
    box-shadow: none;
}

.myaccess-card__button--soft {
    background: var(--bd-primary-subtle);
    color: var(--bd-primary-dark);
    border-color: transparent;
    box-shadow: none;
}

.myaccess-card__button--soft:hover {
    background: rgba(249, 115, 22, 0.18);
    box-shadow: none;
}

/* ── Card Tone Colours → Use Orange Variants ── */

.myaccess-card[class*="--tone-"] {
    --myaccess-accent: var(--bd-primary);
    --myaccess-accent-2: var(--bd-primary-dark);
    --myaccess-accent-strong: var(--bd-primary-dark);
    --myaccess-accent-soft: var(--bd-primary-subtle);
    --myaccess-card-border-color: var(--bd-border);
}

/* ── Search / Controls — Brutalist ── */

.myaccess-dashboard .myaccess-control {
    border: var(--bd-border-w) solid var(--bd-border) !important;
    border-radius: 0 !important;
    background: var(--bd-surface) !important;
    box-shadow: inset 2px 2px 0 0 var(--bd-border-light);
}

.myaccess-dashboard .myaccess-control:focus {
    border-color: var(--bd-primary) !important;
    box-shadow: inset 2px 2px 0 0 var(--bd-primary), 0 0 0 3px var(--bd-primary-subtle) !important;
}

.myaccess-dashboard .myaccess-control--search {
    border: var(--bd-border-w) solid var(--bd-border) !important;
    border-radius: 0 !important;
    background: var(--bd-surface) !important;
    box-shadow: inset 2px 2px 0 0 var(--bd-border-light);
}

.myaccess-dashboard .myaccess-control--search:focus {
    border-color: var(--bd-primary) !important;
    background: var(--bd-surface) !important;
    box-shadow: inset 2px 2px 0 0 var(--bd-primary), 0 0 0 3px var(--bd-primary-subtle) !important;
}

.myaccess-dashboard .myaccess-control--button {
    border-radius: 0 !important;
    background: var(--bd-primary) !important;
    color: var(--bd-text-on-primary) !important;
    font-weight: 700;
    box-shadow: 3px 3px 0 0 var(--bd-dark) !important;
    border: 2px solid var(--bd-dark) !important;
}

.myaccess-dashboard .myaccess-control--button:hover {
    background: var(--bd-primary-dark) !important;
    box-shadow: 5px 5px 0 0 var(--bd-dark) !important;
}

.myaccess-dashboard .myaccess-control--button--secondary {
    background: var(--bd-surface) !important;
    color: var(--bd-text) !important;
    box-shadow: 3px 3px 0 0 var(--bd-dark) !important;
    border: 2px solid var(--bd-dark) !important;
}

.myaccess-dashboard .myaccess-control--button--secondary:hover {
    background: var(--bd-surface-2) !important;
    box-shadow: 5px 5px 0 0 var(--bd-dark) !important;
}

/* ── Summary Card — Brutalist ── */

.myaccess-dashboard__summary-card {
    border: var(--bd-border-w) solid var(--bd-border);
    border-radius: 0;
    border-left: var(--bd-border-w) solid var(--bd-primary);
    background: var(--bd-surface);
    box-shadow: var(--bd-shadow-card);
}

.myaccess-dashboard__summary-card strong {
    font-weight: 700;
}

/* ── Report Bug — Orange Primary ── */

.myaccess-report-bug__trigger {
    border-radius: 0;
    border: 2px solid var(--bd-dark);
    background: var(--bd-primary);
    color: var(--bd-text-on-primary);
    font-weight: 700;
    box-shadow: 3px 3px 0 0 var(--bd-dark);
}

.myaccess-report-bug__trigger::before {
    content: "\26A0";
    font-size: 0.9em;
    line-height: 1;
}

.myaccess-report-bug__trigger:hover {
    background: var(--bd-primary-dark);
    border-color: var(--bd-dark);
    box-shadow: 4px 4px 0 0 var(--bd-dark);
    transform: translateY(-1px);
}

.myaccess-report-bug__trigger:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 0 var(--bd-dark);
}

.myaccess-report-bug__overlay {
    background: rgba(15, 23, 36, 0.7);
    backdrop-filter: none;
}

.myaccess-report-bug__modal {
    border: var(--bd-border-w) solid var(--bd-border);
    border-radius: 0;
    background: var(--bd-surface);
    box-shadow: var(--bd-shadow-lg);
}

.myaccess-report-bug__title {
    color: var(--bd-text);
    font-family: var(--bd-font);
    font-weight: 900;
}

.myaccess-report-bug__input {
    border: var(--bd-border-w) solid var(--bd-border);
    border-radius: 0;
    background: var(--bd-surface);
    box-shadow: inset 2px 2px 0 0 var(--bd-border-light);
}

.myaccess-report-bug__input:focus {
    border-color: var(--bd-primary);
    box-shadow: inset 2px 2px 0 0 var(--bd-primary), 0 0 0 3px var(--bd-primary-subtle);
}

/* ── Access Modal — Brutalist ── */

.myaccess-access-modal {
    border: var(--bd-border-w) solid var(--bd-border);
    border-radius: 0;
    background: var(--bd-surface);
    box-shadow: var(--bd-shadow-lg);
}

.myaccess-access-modal__title {
    color: var(--bd-text);
    font-family: var(--bd-font);
    font-weight: 900;
}

/* ── Notice — Brutalist ── */

.myaccess-notice {
    border: var(--bd-border-w) solid var(--bd-border);
    border-radius: 0;
    background: var(--bd-surface);
    box-shadow: var(--bd-shadow-sm);
}

.myaccess-notice--warning {
    color: var(--bd-primary-dark);
    background: var(--bd-primary-subtle);
    border-color: var(--bd-primary);
}

/* ── eLCB Courses Section — Brutalist ── */

.myaccess-courses-section {
    border-top: var(--bd-border-w) solid var(--bd-border);
}

.myaccess-courses-heading {
    color: var(--bd-text);
    font-family: var(--bd-font);
    font-weight: 900;
}

/* ── Skeleton Loading — Brutalist ── */

.myaccess-card--skeleton .myaccess-skeleton {
    background: linear-gradient(90deg, var(--bd-border-light) 25%, var(--bd-surface-3) 37%, var(--bd-border-light) 63%);
    background-size: 400% 100%;
    border-radius: 0;
}

/* ── Empty State — Brutalist ── */

.myaccess-dashboard__empty-state {
    border: var(--bd-border-w) solid var(--bd-border);
    border-radius: 0;
    background: var(--bd-surface);
    color: var(--bd-text-muted);
}

/* ── Meta / Status — Theme text ── */

.myaccess-dashboard__meta {
    color: var(--bd-text-muted);
}

.myaccess-dashboard__status--loading {
    color: var(--bd-primary);
    font-weight: 700;
}

.myaccess-dashboard__status--empty {
    color: var(--bd-text-soft);
}

.myaccess-dashboard__status--error {
    color: var(--myaccess-danger);
    font-weight: 700;
}

/* ── Remove all rounded corners from overlays, modals, inputs ── */

.myaccess-report-bug__modal,
.myaccess-report-bug__input,
.myaccess-report-bug__textarea,
.myaccess-report-bug__submit,
.myaccess-report-bug__cancel {
    border-radius: 0;
}

/* ── Card tones all use orange ── */

.myaccess-card[class*="--tone-"] .myaccess-card__button {
    background: var(--bd-primary);
    color: var(--bd-text-on-primary);
    border-color: var(--bd-dark);
    box-shadow: 3px 3px 0 0 var(--bd-dark);
}

.myaccess-card[class*="--tone-"] .myaccess-card__button:hover {
    background: var(--bd-primary-dark);
}

/* ── Responsive Overrides ── */

@media (max-width: 720px) {
    .myaccess-dashboard {
        border-width: 2px;
        padding: 10px;
    }

    .myaccess-dashboard__hero {
        border-width: 2px;
    }

    .myaccess-card {
        border-width: 2px;
    }

    .myaccess-card__button {
        box-shadow: 2px 2px 0 0 var(--bd-dark);
    }
}

@media (prefers-reduced-motion: reduce) {
    .myaccess-dashboard,
    .myaccess-dashboard *,
    .myaccess-dashboard *::before,
    .myaccess-dashboard *::after {
        animation: none !important;
        transition: none !important;
    }
}