/* ============================================================
   ACHIEVE COMPONENT LIBRARY (#584, phase 3 - PROPOSED)

   Small, named, reusable components built on tokens.css. Every class is
   prefixed `ach-` so it can never collide with the 3,000 existing
   classes, and every colour, radius, shadow and size comes from a token.

   Rules:
   - EXTENDS Bootstrap, never replaces it: buttons are `class="btn ach-btn
     ach-btn-primary"`, cards are plain divs (Bootstrap .card is optional).
   - Variants are modifiers on the base class (ach-btn-primary,
     ach-pill--success, ach-card-header--brand). A new look is a new
     modifier here, not a new class in a feature sheet.
   - Modals are NOT here: the #534 soft-blue standard in style-shared.css
     is the modal component. Dialog-family and help-slim modals stay.
   - Switches: use the existing .switch in style-shared.css.
   - Tables opt OUT of the global purple `table, td, th` border rule with
     their own scoped reset (that global rule stays: Definition tables
     need it).

   Loaded globally by base.html after tokens.css (phase 4, agreed 23 Oct
   2026). Nothing live uses an ach- class until a page is migrated, so
   loading the sheet changes nothing visually.
   ============================================================ */

/* ---- Buttons (use with Bootstrap .btn) ---- */
.ach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    white-space: nowrap;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ach-btn:focus,
.ach-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.ach-btn:disabled,
.ach-btn.disabled {
    opacity: 0.55;
    pointer-events: none;
}

.ach-btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}
.ach-btn-primary:hover {
    background-color: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    color: var(--text-on-accent);
}

/* The #534 unified secondary (Close / Cancel) */
.ach-btn-secondary {
    background-color: var(--surface);
    border-color: var(--line-band-strong);
    color: var(--text-strong);
}
.ach-btn-secondary:hover {
    background-color: var(--surface-band-soft);
    color: var(--text-strong);
}

/* Destructive actions read the action-red tokens, not --danger: --danger is
   the RAG / state red (pills, notices, invalid fields) and must not move
   with the button colour (29 Oct 2026). */
.ach-btn-danger {
    background-color: var(--accent-danger);
    border-color: var(--accent-danger);
    color: var(--text-on-accent);
}
.ach-btn-danger:hover {
    background-color: var(--accent-danger-hover);
    border-color: var(--accent-danger-hover);
    color: var(--text-on-accent);
}

/* Quiet action (agreed 23 Oct 2026): teal for navigation-type buttons that
   are not direct calls to action, e.g. "View All Activities" and "View
   Full Calendar" (the retired .achieve-footer-button-primary family). */
.ach-btn-quiet {
    background-color: var(--accent-teal);
    border-color: var(--accent-teal);
    color: var(--text-on-accent);
}
.ach-btn-quiet:hover {
    background-color: var(--accent-teal-hover);
    border-color: var(--accent-teal-hover);
    color: var(--text-on-accent);
}

.ach-btn-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--link);
    padding-left: 4px;
    padding-right: 4px;
}
.ach-btn-link:hover {
    color: var(--text-strong);
    text-decoration: underline;
}

.ach-btn-sm {
    font-size: var(--text-sm);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}
/* Large: the one prominent action on a page (Add all questions, the BGE
   editor's Save). Added 28 Oct 2026 for the button sweep. */
.ach-btn-lg {
    font-size: var(--text-md);
    padding: 12px 20px;
}
.ach-btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
}
.ach-btn-icon.ach-btn-sm {
    width: 28px;
    height: 28px;
}
.ach-btn-block {
    display: flex;
    width: 100%;
}

/* ---- Cards ---- */
.ach-card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    /* Harmless on a div; they let an <a> or a <button> be the card (a
       tile) without the browser's link and button chrome, at the same
       specificity as the modifiers below so those still win. */
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-decoration: none;
    padding: 0;
}
.ach-card:hover,
.ach-card:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
}
.ach-card--flat {
    box-shadow: none;
}
/* Interactive: the card is the control (a link, a button or a data-url
   tile). Pointer, a 4px lift and the raised shadow on hover (Mark, 29 Oct
   2026), the focus ring on keyboard focus. Added for the card sweep. */
.ach-card--interactive {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ach-card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.ach-card--interactive:focus-visible,
.ach-card--add:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
/* Add tile: the dashed "new" card at the end of a grid of cards (New
   Class, Add Member). Canvas fill, dashed muted line, centred muted
   content, and the same lift as its clickable neighbours on hover (Mark,
   29 Oct 2026). Added for the card sweep. */
.ach-card--add {
    background-color: var(--canvas);
    border: 2px dashed var(--text-muted);
    box-shadow: none;
    color: var(--text-muted);
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.ach-card--add:hover {
    background-color: var(--surface-muted);
    color: var(--text-muted);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
/* Header: the body font at the body weight, not the heading font at 600
   (30 Oct 2026, the data-box pilot: a 1.4rem page title inside the header
   read bold against every unmigrated page; the library moved to meet the
   site, as the button weight did on 28 Oct). Titles inside it bring their
   own size (h4, .achieve-page-header-text). */
.ach-card-header {
    background-color: var(--text-slate-3);
    color: var(--text-on-accent);
    padding: var(--space-2) var(--space-4);
    font-family: inherit;
    font-weight: var(--weight-regular);
    font-size: var(--text-md);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ach-card-header--light {
    background-color: var(--surface-band);
    color: var(--text-strong);
    border-bottom: 1px solid var(--line-band);
}
.ach-card-header--brand { background-color: var(--brand); }
.ach-card-header--bge { background-color: var(--brand-bge); }
.ach-card-header--teal { background-color: var(--accent-teal); }
.ach-card-header--success { background-color: var(--success-alt); }
.ach-card-header--danger { background-color: var(--danger-dark); }
.ach-card-header--amber {
    background-color: var(--warning-soft);
    color: var(--warning-ink);
    border-bottom: 1px solid var(--warning-strong);
}
/* Body: inherits the page's text size (30 Oct 2026, batch 4 walk). It was
   --text-base 0.9rem, but the legacy data box it replaced inherited 1rem, so
   every migrated page's copy had dropped a size; the library meets the site,
   as the header did in the pilot. */
.ach-card-body {
    padding: var(--space-4);
    color: var(--text);
}
.ach-card-body--tight {
    padding: var(--space-3);
}
.ach-card-footer {
    padding: var(--space-3) var(--space-4);
    background-color: var(--canvas);
    border-top: 1px solid var(--line-soft);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ach-card-footer--right {
    justify-content: flex-end;
}
/* Added 30 Oct 2026 for the data-box migration (#584 phase 5 step 8): the
   three things the legacy .achieve-data-box-* family did that the card
   lacked. */
/* Plain header: no band. A small slate title on the card's own white, for
   the quiet tiles on the home pages (was .achieve-data-box-header-small). */
.ach-card-header--plain {
    background-color: var(--surface);
    color: var(--text-slate-3);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    padding: var(--space-3) var(--space-4) 0 var(--space-4);
}
/* Sub-header: a column head or group label INSIDE the body (was
   .achieve-data-box-secondary-header). The light band, so it never reads as
   a second dark bar under the header. */
.ach-card-subheader {
    background-color: var(--surface-band);
    color: var(--text-strong);
    padding: var(--space-2) var(--space-4);
    font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--line-band);
}
/* A card may open with a sub-header instead of a header (a unit's topic
   groups on Learn, Self-evaluate, Course Coverage and the unit preview, one
   card per unit, #584 step 8 batch 4): the first one takes the card's top
   corners so its band does not poke out of the rounded card. */
.ach-card > .ach-card-subheader:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
/* Topic band: a sub-header that runs edge to edge between a unit's topic
   groups, so it touches the page. The light band is the page's own colour
   (1.02:1) and the card edge vanished; a mid blue with bold dark text read as
   a heavy label (Mark's walk, 30 Oct 2026). This is the legacy grey band's
   look (white, regular weight, 1.1rem) one notch darker so the text passes
   AA (4.62:1; the legacy #708498 was 3.86). */
.ach-card-subheader--topic {
    background-color: var(--surface-band-mid);
    color: var(--text-on-accent);
    font-weight: var(--weight-regular);
    font-size: var(--text-lg);
    padding: 10px var(--space-4);
    border-bottom: none;
    /* Cover the card's 1px light side border, as the borderless legacy box
       had none */
    margin-left: -1px;
    margin-right: -1px;
}
/* ...and the top border on the first band, where it showed as a white
   hairline under the unit tabs. Course Coverage wraps each topic in a div
   for its script, hence the second selector. */
.ach-card > .ach-card-subheader--topic:first-child,
.ach-card > :first-child > .ach-card-subheader--topic:first-child {
    margin-top: -1px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
/* Row: one item in a list inside the body, a hairline between rows and none
   after the last (was .achieve-data-box-row-bottom-border). --link marks a
   row that navigates (it carries a data-url the page's script reads). */
.ach-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
}
.ach-card-row:last-child {
    border-bottom: none;
}
.ach-card-row--link {
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.ach-card-row--link:hover {
    background-color: var(--surface-band-soft);
}
/* Phones: the row's text cell (flex-grow-1) takes the full width and its
   buttons wrap beneath it, as the legacy data-box row did ("Mobile Learn
   Page - Concept Rows", retired 31 Oct 2026). Without it the Learn and
   Self-evaluate concept text is squeezed beside up to five buttons. */
@media (max-width: 575.98px) {
    .ach-card-row {
        flex-wrap: wrap;
    }
    .ach-card-row > .flex-grow-1 {
        flex: 0 0 100%;
        margin-bottom: 8px;
    }
    .ach-card-row .btn-sm {
        padding: 0.25rem 0.4rem;
    }
}

/* ---- Pills (badges, chips, status) ---- */
.ach-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    white-space: nowrap;
    background-color: var(--surface-muted);
    color: var(--text-slate-3);
}
.ach-pill--success { background-color: var(--success-soft); color: var(--success-ink); }
.ach-pill--warning { background-color: var(--warning-soft); color: var(--warning-ink); }
.ach-pill--danger  { background-color: var(--danger-soft);  color: var(--danger-ink); }
.ach-pill--info    { background-color: var(--info-soft);    color: var(--info-ink); }
.ach-pill--brand   { background-color: var(--brand);        color: var(--text-on-accent); }
.ach-pill--bge     { background-color: var(--brand-bge);    color: var(--text-on-accent); }
.ach-pill--outline {
    background-color: transparent;
    border-color: var(--line-strong);
    color: var(--text-muted);
}
.ach-pill--count {
    padding: 0 7px;
    min-width: 22px;
    justify-content: center;
    background-color: var(--surface-band);
    color: var(--text-strong);
}

/* Muted caps caption (the "label" pattern repeated four times today) */
.ach-caption {
    display: block;
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* ---- Notices (alerts) and the amber prompt ---- */
.ach-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--canvas);
    color: var(--text);
    font-size: var(--text-base);
}
.ach-notice-icon {
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1.4;
}
.ach-notice-body {
    flex: 1 1 auto;
    min-width: 0;
}
.ach-notice-title {
    display: block;
    font-weight: var(--weight-semibold);
    margin-bottom: 2px;
}
.ach-notice-actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    gap: var(--space-2);
}
.ach-notice--info    { background-color: var(--info-soft);    border-color: var(--info);    color: var(--info-ink); }
.ach-notice--success { background-color: var(--success-soft); border-color: var(--success); color: var(--success-ink); }
.ach-notice--warning { background-color: var(--warning-soft); border-color: var(--warning); color: var(--warning-ink); }
.ach-notice--danger  { background-color: var(--danger-soft);  border-color: var(--danger);  color: var(--danger-ink); }

/* Amber prompt: only shown when something needs the teacher's attention
   (Manage Classes convention). A notice with a strong left edge. */
.ach-prompt {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--warning-strong);
    border-left-width: 5px;
    border-radius: var(--radius-md);
    background-color: var(--warning-soft);
    color: var(--warning-ink);
    font-size: var(--text-base);
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.25);
}
.ach-prompt .ach-btn {
    margin-left: auto;
}

/* ---- Tables ---- */
.ach-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    background-color: var(--surface);
}
/* Opt out of the global purple table borders (top of style-achieve.css).
   That rule stays for Definition tables; library tables draw their own. */
.ach-table,
.ach-table th,
.ach-table td {
    border: none;
}
.ach-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.72rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    border-bottom: 1px solid var(--line-band);
    white-space: nowrap;
}
.ach-table td {
    padding: 8px 10px;
    vertical-align: top;
    color: var(--text);
    border-bottom: 1px solid var(--line-soft);
}
.ach-table tbody tr:hover {
    background-color: var(--surface-band-soft);
}
.ach-table--banded tbody tr:nth-child(even) {
    background-color: var(--surface-band-soft);
}
.ach-table .ach-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ach-table .ach-muted {
    color: var(--text-muted);
}

/* ---- Form fields ---- */
.ach-label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-slate-3);
}
.ach-field {
    display: block;
    width: 100%;
    padding: 6px 10px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
}
.ach-field:focus {
    outline: none;
    border-color: var(--accent-steel);
    box-shadow: var(--focus-ring);
}
.ach-field::placeholder {
    color: var(--text-faint);
}
.ach-field--invalid,
.ach-field--invalid:focus {
    border-color: var(--danger);
}
.ach-field--sm {
    padding: 4px 8px;
    font-size: var(--text-sm);
}
textarea.ach-field {
    min-height: 80px;
    resize: vertical;
}
select.ach-field {
    padding-right: 28px;
}
.ach-help {
    display: block;
    margin-top: 4px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.ach-error {
    display: block;
    margin-top: 4px;
    font-size: var(--text-xs);
    color: var(--danger-dark);
}
.ach-field-group {
    margin-bottom: var(--space-4);
}