/**
 * ATA Online Accreditation — Brand Design System
 * ================================================
 * Master brand stylesheet loaded after app.css.
 * Defines the institutional Navy + Gold palette and
 * overrides Bootstrap/app defaults for a cohesive look.
 *
 * COLOR RATIONALE (rebranded 2026-06-10 to match the public ATA website):
 *   Warm Charcoal (#2b2620) — authority, permanence, institutional gravity
 *   Amber-Gold (#d18f12) — excellence, achievement (the brand mark)
 *   Unified with ata-secure-site so the OA app and public site read as one brand.
 *
 * TO CUSTOMIZE:
 *   - Primary color:  Search for "--ata-primary"
 *   - Accent color:   Search for "--ata-accent"
 *   - Sidebar:        Search for "--ata-sidebar"
 *   - Cards/shadows:  Search for "--ata-shadow"
 */

/* ── Brand Variables ──────────────────────────────────── */
:root {
    /* Primary palette */
    --ata-primary: var(--ata-navy);
    --ata-primary-light: var(--ata-navy-light);
    --ata-primary-dark: var(--ata-navy-dark);
    --ata-accent: var(--ata-gold);
    --ata-accent-light: var(--ata-gold-light);

    /* Sidebar — v6: light sidebar (was charcoal). Warm-white surface,
       charcoal text, pale-gold active state with a gold left-bar. */
    --ata-sidebar-bg: var(--ata-surface);
    --ata-sidebar-text: var(--ata-body);
    --ata-sidebar-text-hover: var(--ata-navy-dark);
    --ata-sidebar-hover-bg: var(--ata-subtle);
    --ata-sidebar-active-bg: var(--ata-gold-light);
    --ata-sidebar-active-text: var(--ata-gold-deep);
    --ata-sidebar-border: var(--ata-border);

    /* Backgrounds */
    --ata-bg-body: var(--ata-page, #ffffff);
    --ata-bg-card: #ffffff;

    /* Text */
    --ata-text-heading: var(--ata-ink);
    --ata-text-body: var(--ata-body);
    --ata-text-muted: var(--ata-muted);

    /* Borders & shadows — v4 warm shadows, matching the public website */
    --ata-border-color: var(--ata-border);
    --ata-shadow-card: 0 1px 3px rgba(40, 30, 10, 0.05), 0 4px 16px rgba(40, 30, 10, 0.04);
    --ata-shadow-card-hover: 0 4px 12px rgba(40, 30, 10, 0.10), 0 8px 24px rgba(40, 30, 10, 0.06);

    /* Radius — v4 bumped to match website softness (14/20) */
    --ata-radius-sm: 8px;
    --ata-radius-md: 14px;
    --ata-radius-lg: 20px;
}

/* ── Body & Page ──────────────────────────────────────── */
body {
    background-color: var(--ata-bg-body);
    color: var(--ata-text-body);
    font-family: var(--ata-font-sans);
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-body);
    overflow-x: hidden;
}

.pace,
.pace .pace-progress,
.pace .pace-activity {
    display: none !important;
}

.page-content {
    display: block;
    min-height: calc(100vh - 120px);
    padding: var(--ata-space-lg);
    padding-bottom: calc(var(--ata-space-lg) + 48px);
}

/* ── Sidebar Overrides ────────────────────────────────── */
.sidebar-wrapper {
    background: var(--ata-sidebar-bg) !important;
    border-right: 1px solid var(--ata-sidebar-border) !important;
    box-shadow: 2px 0 8px rgba(42, 36, 24, 0.05) !important;
}

.sidebar-header {
    background: var(--ata-sidebar-bg) !important;
    border-bottom: 1px solid var(--ata-sidebar-border) !important;
}

.logo-text {
    color: var(--ata-ink) !important;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.toggle-icon {
    color: var(--ata-gold-strong) !important;
}

.toggle-icon:hover {
    color: var(--ata-ink) !important;
}

/* Sidebar menu links */
.sidebar-wrapper .metismenu a {
    color: var(--ata-sidebar-text) !important;
    border-color: transparent !important;
    border-radius: var(--ata-radius-sm);
    margin: 1px 8px;
    transition: all 0.2s ease;
}

.sidebar-wrapper .metismenu a .parent-icon {
    color: var(--ata-sidebar-text);
}

.sidebar-wrapper .metismenu a:hover,
.sidebar-wrapper .metismenu a:focus,
.sidebar-wrapper .metismenu a:active {
    color: var(--ata-sidebar-text-hover) !important;
    background: var(--ata-sidebar-hover-bg) !important;
}

.sidebar-wrapper .metismenu .mm-active > a {
    color: var(--ata-sidebar-active-text) !important;
    background: var(--ata-sidebar-active-bg) !important;
    border-left: 3px solid var(--ata-accent) !important;
    font-weight: 600;
}

.sidebar-wrapper .metismenu .mm-active > a .parent-icon {
    color: var(--ata-accent);
}

/* Sub-menu */
.sidebar-wrapper .metismenu ul {
    border: none !important;
    background: var(--ata-subtle) !important;
    border-radius: var(--ata-radius-sm);
    margin: 2px 8px;
}

.sidebar-wrapper .metismenu ul a {
    color: var(--ata-muted) !important;
    padding-left: 22px !important;
    font-size: var(--ata-fs-small) !important;
    min-height: 40px;
}

.sidebar-wrapper .metismenu ul a:hover {
    color: var(--ata-ink) !important;
}

/* Top-level menu links — v3 senior baseline */
.sidebar-wrapper .metismenu > li > a {
    font-size: var(--ata-fs-body) !important;
    min-height: 44px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Menu section labels */
.menu-label {
    color: var(--ata-muted) !important;
    font-size: 12.5px !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 22px 16px 6px 16px !important;
}

/* Arrow icon for expandable menus */
.metismenu .has-arrow:after {
    border-color: var(--ata-sidebar-text) !important;
}

/* Sidebar profile section */
.sidebar-wrapper .user-img {
    border: 2px solid var(--ata-border);
}

/* ── Topbar Overrides ─────────────────────────────────── */
.topbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--ata-border-color) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

.topbar h4,
.topbar .topbar-title {
    color: var(--ata-text-heading) !important;
    font-weight: 600;
    font-size: var(--ata-fs-h3);
}

.topbar .navbar {
    gap: var(--ata-space-sm);
}

.mobile-toggle-menu {
    align-items: center;
    border-radius: var(--ata-radius-sm);
    color: var(--ata-navy);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.user-box .nav-link {
    border-left: 1px solid var(--ata-border);
    min-height: 60px;
    padding-left: var(--ata-space-md);
}

.user-box .user-img {
    background: var(--ata-subtle);
    border: 1px solid var(--ata-border);
    height: 36px !important;
    width: 36px !important;
}

/* ── Bootstrap Overrides ──────────────────────────────── */

/* Primary button — v6: gold-forward, unified with the public website's
   gold CTAs. Solid amber-gold fill + near-black gold-brown text (AA-safe;
   white text on gold fails contrast for our 50–75 audience). */
.btn-primary {
    background-color: var(--ata-gold) !important;
    border-color: var(--ata-gold) !important;
    color: var(--ata-on-gold) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ata-gold-bright) !important;
    border-color: var(--ata-gold-bright) !important;
    color: var(--ata-on-gold) !important;
    box-shadow: 0 4px 12px rgba(209, 143, 18, 0.30) !important;
}

.btn-primary:active {
    background-color: var(--ata-gold-strong) !important;
    border-color: var(--ata-gold-strong) !important;
    color: var(--ata-on-gold) !important;
}

/* Outline primary — v6: gold outline, gold-deep text, fills gold on hover */
.btn-outline-primary {
    color: var(--ata-gold-deep) !important;
    border-color: var(--ata-gold) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ata-gold) !important;
    border-color: var(--ata-gold) !important;
    color: var(--ata-on-gold) !important;
}

/* Form controls */
.form-control:focus,
.form-select:focus {
    border-color: var(--ata-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(43, 38, 32, 0.15) !important;
}

/* Nav tabs — v6: gold underline on the active tab, matching the public
   website's gold-underline navigation. */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--ata-gold-deep) !important;
    border-bottom-color: var(--ata-gold) !important;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    color: var(--ata-gold-strong) !important;
}

/* Nav pills */
.nav-pills .nav-link.active {
    background-color: var(--ata-primary) !important;
}

/* Links */
a {
    color: var(--ata-primary);
}

a:hover {
    color: var(--ata-primary-light);
}

/* Cards */
.card {
    border: 1px solid var(--ata-border-color);
    border-radius: var(--ata-radius-md);
    box-shadow: var(--ata-shadow-card);
}

.card-header {
    background: var(--ata-surface);
    border-bottom: 1px solid var(--ata-border);
    color: var(--ata-ink);
    font-weight: var(--ata-fw-semibold);
}

.modal-content {
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    box-shadow: var(--ata-shadow-card-hover);
}

/* Pagination */
.page-item.active .page-link {
    background-color: var(--ata-primary);
    border-color: var(--ata-primary);
}

.page-link {
    color: var(--ata-primary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--ata-text-heading);
    letter-spacing: 0;
}

.form-label,
label {
    color: var(--ata-ink);
    font-size: var(--ata-fs-small);
    font-weight: var(--ata-fw-semibold);
    margin-bottom: var(--ata-space-xs);
}

.form-control,
.form-select {
    min-height: var(--ata-control-h);
    font-size: var(--ata-fs-body);
    border-color: var(--ata-border);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-body);
}

textarea.form-control {
    min-height: 132px;
}

.form-control::placeholder {
    color: #94a3b8;
}

.btn {
    border-radius: var(--ata-radius-sm);
    font-weight: var(--ata-fw-semibold);
    letter-spacing: 0;
}

.btn-ghost {
    color: var(--ata-navy);
    background: transparent;
    border-color: transparent;
}

.btn-ghost:hover,
.btn-ghost:focus {
    color: var(--ata-navy-light);
    background: var(--ata-subtle);
}

.alert {
    border-radius: var(--ata-radius-sm);
    border: 1px solid var(--ata-border);
    border-left-width: 4px;
}

.panel-contact,
.ata-panel {
    background: var(--ata-subtle);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    padding: var(--ata-space-md);
}

/* ── Contextual Mini Guide ──────────────────────────────
   v3: this is the single most-read help surface for senior users.
   Bumped headline to 18 px, body to 16 px, eyebrow to 14 px and
   added breathing room so it reads like an institutional notice
   board, not a sidebar widget. */
.ata-mini-guide {
    background: var(--ata-surface);
    border: 2px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    box-shadow: var(--ata-shadow-card);
    margin-bottom: var(--ata-space-lg);
    overflow: hidden;
}

/* P3 — Compact variant. Pages set $ataMiniGuideCompact = true; before
   including the partial. Reduces vertical footprint to a single strip
   so the banner stops dominating dense pages like the Admin Dashboard. */
.ata-mini-guide--compact .ata-mini-guide__summary {
    padding: var(--ata-space-sm) var(--ata-space-md);
}
.ata-mini-guide--compact .ata-mini-guide__eyebrow {
    display: none;
}
.ata-mini-guide--compact h2 {
    font-size: var(--ata-fs-body-lg);
}

.ata-mini-guide__summary {
    align-items: center;
    display: flex;
    gap: var(--ata-space-md);
    justify-content: space-between;
    padding: var(--ata-space-lg);
}

.ata-mini-guide__heading {
    min-width: 0;
}

.ata-mini-guide__eyebrow {
    color: var(--ata-primary);
    display: block;
    font-size: var(--ata-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.ata-mini-guide h2 {
    color: var(--ata-text-heading);
    font-size: var(--ata-fs-h3);
    font-weight: var(--ata-fw-bold);
    line-height: var(--ata-lh-tight);
    margin: 0;
}

.ata-mini-guide p {
    color: var(--ata-text-body);
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-body);
    margin: 6px 0 0;
}

.ata-mini-guide__toggle {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.35rem;
}

.ata-mini-guide__diagram {
    border-top: 1px solid var(--ata-border);
    padding: var(--ata-space-md) var(--ata-space-lg) 0;
}

.ata-mini-guide__body {
    border-top: 1px solid var(--ata-border);
    display: grid;
    gap: var(--ata-space-md);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--ata-space-lg);
}

.ata-mini-guide__action {
    align-items: flex-start;
    background: var(--ata-subtle);
    border: 1px solid var(--ata-gold);
    border-radius: var(--ata-radius-sm);
    box-shadow: inset 0 0 0 1px rgba(200, 169, 81, 0.14);
    display: flex;
    gap: var(--ata-space-sm);
    height: 100%;
    min-width: 0;
    padding: var(--ata-space-md);
}

.ata-mini-guide__action-icon {
    align-items: center;
    background: var(--ata-surface);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-navy);
    display: inline-flex;
    flex: 0 0 auto;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.ata-mini-guide__action-icon i {
    font-size: 1.25rem;
}

.ata-mini-guide__body h3 {
    color: var(--ata-text-heading);
    font-size: var(--ata-fs-body);
    font-weight: 700;
    margin: 0 0 0.6rem;
}

.ata-mini-guide__body ul {
    color: var(--ata-text-body);
    font-size: var(--ata-fs-body);
    line-height: var(--ata-lh-body);
    margin: 0;
    padding-left: 1.4rem;
}

.ata-mini-guide__body li + li {
    margin-top: 0.5rem;
}

.ata-mini-guide__meta {
    align-items: center;
    background: var(--ata-subtle);
    border-radius: var(--ata-radius-sm);
    color: var(--ata-text-body);
    display: flex;
    font-size: var(--ata-fs-small);
    gap: var(--ata-space-sm);
    grid-column: 1 / -1;
    justify-content: space-between;
    padding: var(--ata-space-md) var(--ata-space-lg);
}

.ata-mini-guide__meta a {
    align-items: center;
    color: var(--ata-primary);
    display: inline-flex;
    gap: 0.35rem;
    font-weight: 700;
    text-decoration: none;
}

.ata-mini-guide__meta a:hover,
.ata-mini-guide__meta a:focus {
    text-decoration: underline;
}

.ata-mini-guide__stage {
    align-items: center;
    background: var(--ata-gold-light);
    border: 1px solid var(--ata-gold);
    border-radius: var(--ata-radius-pill);
    color: var(--ata-navy-dark);
    display: inline-flex;
    font-weight: var(--ata-fw-semibold);
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
}

/* ── Guide Diagrams ───────────────────────────────────── */
.ata-guide-diagram {
    background: #ffffff;
    border: 2px solid var(--ata-border);
    border-radius: var(--ata-radius-md);
    margin: 0 0 var(--ata-space-md);
    padding: var(--ata-space-md);
}

.ata-mini-guide__diagram .ata-guide-diagram {
    background: var(--ata-subtle);
    margin-bottom: 0;
}

.ata-guide-diagram__header {
    margin-bottom: var(--ata-space-sm);
}

.ata-guide-diagram__header h3 {
    color: var(--ata-text-heading);
    font-size: var(--ata-fs-body);
    font-weight: 700;
    line-height: var(--ata-lh-tight);
    margin: 0 0 0.4rem;
}

.ata-guide-diagram__header p,
.ata-guide-diagram__note {
    color: var(--ata-text-body);
    font-size: var(--ata-fs-small);
    line-height: var(--ata-lh-body);
    margin: 0;
}

.ata-guide-diagram__items {
    align-items: stretch;
    display: grid;
    gap: var(--ata-space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ata-guide-diagram--steps .ata-guide-diagram__items,
.ata-guide-diagram--cycle .ata-guide-diagram__items {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.ata-guide-diagram--split .ata-guide-diagram__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ata-guide-diagram__item {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-sm);
    display: flex;
    gap: 0.55rem;
    height: 100%;
    min-width: 0;
    min-height: 88px;
    padding: 0.75rem;
    position: relative;
}

.ata-guide-diagram--steps .ata-guide-diagram__item:not(:last-child)::after {
    background: var(--ata-primary);
    content: "";
    height: 2px;
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    z-index: 1;
}

.ata-guide-diagram--steps .ata-guide-diagram__item:not(:last-child)::before {
    border-right: 2px solid var(--ata-primary);
    border-top: 2px solid var(--ata-primary);
    content: "";
    height: 8px;
    position: absolute;
    right: -1.03rem;
    top: calc(50% - 4px);
    transform: rotate(45deg);
    width: 8px;
    z-index: 1;
}

.ata-guide-diagram--cycle .ata-guide-diagram__item:not(:last-child)::after {
    background: var(--ata-primary);
    content: "";
    height: 2px;
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    z-index: 1;
}

.ata-guide-diagram--cycle .ata-guide-diagram__item:not(:last-child)::before {
    border-right: 2px solid var(--ata-primary);
    border-top: 2px solid var(--ata-primary);
    content: "";
    height: 7px;
    position: absolute;
    right: -1.02rem;
    top: calc(50% - 3.5px);
    transform: rotate(45deg);
    width: 7px;
    z-index: 1;
}

.ata-guide-diagram__item.is-current {
    border-color: var(--ata-primary);
    box-shadow: 0 0 0 2px rgba(43, 38, 32, 0.12);
}

.ata-guide-diagram__icon {
    align-items: center;
    background: var(--ata-navy);
    border: 1px solid var(--ata-navy);
    border-radius: 999px;
    color: var(--ata-surface);
    display: inline-flex;
    flex: 0 0 auto;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.ata-guide-diagram__icon i {
    font-size: 1.25rem;
}

.ata-guide-diagram__content {
    display: block;
    min-width: 0;
}

.ata-guide-diagram__label {
    color: var(--ata-text-heading);
    display: block;
    font-size: var(--ata-fs-small);
    font-weight: 700;
    line-height: var(--ata-lh-tight);
}

.ata-guide-diagram__details {
    color: var(--ata-text-body);
    display: block;
    font-size: var(--ata-fs-small);
    line-height: var(--ata-lh-body);
    margin-top: 0.4rem;
}

.ata-guide-diagram__note {
    background: #fff;
    border-radius: var(--ata-radius-sm);
    margin-top: var(--ata-space-sm);
    padding: 0.65rem 0.75rem;
}

.ata-guide-diagram--compact {
    padding: var(--ata-space-sm);
}

.ata-guide-diagram--compact .ata-guide-diagram__header h3 {
    font-size: 0.88rem;
}

.ata-guide-diagram--compact .ata-guide-diagram__header p,
.ata-guide-diagram--compact .ata-guide-diagram__note {
    font-size: 0.8rem;
}

.ata-guide-diagram--compact .ata-guide-diagram__item {
    padding: 0.6rem;
}

/* Breadcrumb */
.breadcrumb-item a {
    color: var(--ata-primary);
}

.breadcrumb-item.active {
    color: var(--ata-text-muted);
}

/* Badges */
.bg-primary {
    background-color: var(--ata-primary) !important;
}

/* Progress bar */
.progress-bar {
    background-color: var(--ata-primary);
}

/* ── Page Content ─────────────────────────────────────── */
.page-content {
    background-color: var(--ata-bg-body);
}

.wrapper {
    overflow-x: hidden !important;
}

.wrapper table {
    white-space: normal !important;
}

/* ── Scrollbar (light sidebar) ────────────────────────── */
.sidebar-wrapper .simplebar-scrollbar::before {
    background-color: rgba(42, 36, 24, 0.22) !important;
}

/* ── Mobile Sidebar ───────────────────────────────────── */
@media screen and (max-width: 1024px) {
    .sidebar-wrapper {
        left: -250px;
    }

    .wrapper.toggled .sidebar-wrapper {
        left: 0;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2) !important;
    }
}

/* ── Collapsed Sidebar State ──────────────────────────── */
.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper {
    background: var(--ata-sidebar-bg) !important;
}

.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-text {
    color: transparent !important;
}

/* ── Footer ───────────────────────────────────────────── */
.page-footer {
    border-top-color: var(--ata-border-color);
    color: var(--ata-text-muted);
    font-size: var(--ata-fs-small);
    left: auto !important;
    margin-left: 250px;
    padding: 14px 24px;
    position: static !important;
    right: auto !important;
}

.wrapper.toggled .page-footer {
    margin-left: 70px;
}

/* ──────────────────────────────────────────────────────
   v3 Senior-mode toggle pill — drop into the user menu so
   reviewers and applicants can flip into "comfortable
   reading" mode without leaving their workflow.
   ────────────────────────────────────────────────────── */
.ata-text-size-toggle {
    align-items: center;
    background: var(--ata-surface);
    border: 1px solid var(--ata-border);
    border-radius: var(--ata-radius-pill);
    color: var(--ata-navy);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--ata-fs-small);
    font-weight: var(--ata-fw-semibold);
    gap: 8px;
    min-height: var(--ata-control-h-sm);
    padding: 6px 14px;
}

.ata-text-size-toggle:hover,
.ata-text-size-toggle:focus {
    background: var(--ata-subtle);
    color: var(--ata-navy-dark);
}

body.ata-large-text .ata-text-size-toggle {
    background: var(--ata-gold-light);
    border-color: var(--ata-gold);
    color: var(--ata-navy-dark);
}

@media screen and (max-width: 1024px) {
    .page-content {
        padding: var(--ata-space-md);
        padding-bottom: calc(var(--ata-space-md) + 64px);
    }

    .topbar .navbar {
        padding-left: var(--ata-space-md);
        padding-right: var(--ata-space-md);
    }
}

@media screen and (max-width: 767px) {
    .topbar .navbar {
        min-height: 56px;
        padding-left: var(--ata-space-sm);
        padding-right: var(--ata-space-sm);
    }

    .mobile-toggle-menu {
        height: 36px;
        width: 36px;
    }

    .user-box .nav-link {
        border-left: 0;
        min-height: 56px;
        padding-left: var(--ata-space-xs);
        padding-right: 0;
    }

    .user-box .user-img {
        height: 32px !important;
        width: 32px !important;
    }

    .user-box .user-info {
        display: none;
    }

    .ata-mini-guide__summary {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--ata-space-sm);
        padding: var(--ata-space-md);
    }

    .ata-mini-guide__body {
        grid-template-columns: 1fr;
        padding: var(--ata-space-md);
    }

    .ata-mini-guide__diagram {
        padding: var(--ata-space-md) var(--ata-space-md) 0;
    }

    .ata-guide-diagram--steps .ata-guide-diagram__items,
    .ata-guide-diagram--split .ata-guide-diagram__items,
    .ata-guide-diagram--cycle .ata-guide-diagram__items {
        grid-template-columns: 1fr;
    }

    .ata-guide-diagram--steps .ata-guide-diagram__item:not(:last-child)::after,
    .ata-guide-diagram--cycle .ata-guide-diagram__item:not(:last-child)::after {
        bottom: -1rem;
        left: 1.45rem;
        right: auto;
        top: auto;
        transform: rotate(90deg);
    }

    .ata-guide-diagram--steps .ata-guide-diagram__item:not(:last-child)::before,
    .ata-guide-diagram--cycle .ata-guide-diagram__item:not(:last-child)::before {
        bottom: -1.05rem;
        left: calc(1.45rem + 0.43rem);
        right: auto;
        top: auto;
        transform: rotate(135deg);
    }

    .ata-mini-guide__meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-footer {
        left: 0 !important;
        margin-left: 0;
        position: static;
    }

    .page-wrapper {
        margin-bottom: 0;
    }

    .page-content {
        min-height: calc(100vh - 60px);
        padding: var(--ata-space-md);
    }
}

/* ── Add-remark button (admin review pages) ───────────────
   Replaces the legacy `btn btn-success px-3 radius-10 pull-right btn-sm`
   icon-only `+` button. Shipped via `ata_add_remark_button()` helper in
   `Common/ui_helpers.php`. */
.ata-add-remark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    min-height: 36px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: var(--ata-fw-medium, 500);
    line-height: 1.2;
    color: var(--ata-navy);
    background: transparent;
    border: 1.5px solid var(--ata-navy);
    border-radius: var(--ata-radius-pill, 999px);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ata-add-remark-row {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--ata-space-xs, 6px);
    width: 100%;
}

.ata-add-remark-row--right {
    justify-content: flex-end;
}

.ata-add-remark--right {
    float: none;
    clear: none;
}

.ata-add-remark:hover,
.ata-add-remark:focus-visible {
    background: var(--ata-navy);
    color: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(43, 38, 32, 0.18);
}

.ata-add-remark:active {
    background: var(--ata-navy-dark, #161616);
    border-color: var(--ata-navy-dark, #161616);
}

.ata-add-remark .bx {
    font-size: 18px;
    line-height: 1;
}

.ata-add-remark__label {
    white-space: nowrap;
}

@media print {
    .ata-add-remark,
    .ata-add-remark-row { display: none !important; }
}