/* Add here all your CSS customizations */
.card-padding-10 {
    padding: 10px !important;
}

.iframe-container {
    overflow: hidden;
    /* 16:9 aspect ratio */
    padding-top: 50%;
    position: relative;
}

.iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.select2-selection--multiple{
    overflow: auto !important;
    height: auto !important;
    padding-bottom: 5px !important;
}

.CodeMirror {
    height: 70vh;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .userbox .name,
    .userbox .role {
        max-width: 100% !important;
    }

    /* Below 768px the theme turns .header-right into a full-width white bar
       under the logo row, built for a search box and notification icons that
       this app does not have - so the user box hugged the left edge with an
       empty right half and a stray divider. Make the bar a right-aligned row
       with the name, role and caret where a thumb expects them. */
    .header .header-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 14px;
        height: 56px;
        border-bottom: 1px solid #E4E6E2;
    }
    .header .header-right .separator,
    .header .header-right .search-toggle {
        display: none;
    }
    /* html.modern .userbox pins it absolutely at left:15px - that rule, not
       the float, is what kept it on the left; and ::after draws the 1px
       divider that made the bar look cut in half. */
    html.modern .header .header-right #userbox,
    .header .header-right #userbox {
        position: static;
        left: auto;
        float: none;
        margin: 0;
        border: 0;
        padding: 0;
    }
    .header .header-right #userbox::after {
        display: none;
    }
    .header .header-right #userbox > a {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .header .header-right #userbox .profile-info {
        text-align: right;
    }
}

@media (min-height: 800px) and (min-width: 992px) {
    .action-buttons-fixed {
        padding-bottom: 0px;
    }

    .action-buttons-fixed .action-buttons {
        padding: 15px 35px;
    }
}

html.modern.fixed .page-header {
    top: 63px;
}

.ui-datepicker {
    z-index: 20000;
}

/* ==========================================================================
   AFRICA CDC THEME
   Loads after skin_africacdc.css, so this is the override layer.

   The skin file is machine-generated (tools/make_skin_africacdc.py) and only
   re-hues what the Porto generator emitted. Everything here is the part a
   generator cannot reach: type, the brand tokens, the overview page's
   information design, focus states, and the status vocabulary.

   Palette authority: AfCDC Communication Style Guide (African Union colours).
   ========================================================================== */

:root {
    /* --- brand ---------------------------------------------------------- */
    --au-green-deep:  #1A5632;   /* AU Corporate Green - primary. 8.67:1 on white */
    --au-green:       #348F41;   /* AU Green - 4.08:1 on white.
                                    NOT for body text on white, and never a
                                    ground for white text. Accent fills only. */
    --au-red:         #9F2241;   /* AU Red - 7.56:1 on white */
    --au-gold:        #B4A269;   /* AU Gold - 2.53:1 on white. Rules, fills and
                                    borders only; never text on a light ground. */
    --au-grey:        #58595B;   /* AU Grey - body copy */

    /* --- neutrals, biased a few degrees toward the green so they read as
           chosen rather than inherited mid-grey ---------------------------- */
    --afcdc-ink:      #1D211E;
    --afcdc-ink-soft: #5A615C;
    --afcdc-rule:     #E2E6E3;
    --afcdc-surface:  #FFFFFF;
    --afcdc-canvas:   #F5F7F5;

    /* --- status ---------------------------------------------------------
       Validated with the dataviz palette checker. Green and red measure
       delta-E 1.6 under deuteranopia and green against gold 7.5 under
       protanopia: these three are NOT distinguishable by colour alone.
       Every status chip below therefore carries an icon and a text label,
       and progress magnitude is left as a single hue. Do not add a
       colour-only status indicator. -------------------------------------- */
    --afcdc-good:     #2E7D3C;
    --afcdc-warning:  #B4842A;
    --afcdc-critical: #B02E4E;
    /* Status (library: delivery_status). Each passes 4.5:1 on its own tag ground. */
    --afcdc-completed:   #2E7D3C;
    --afcdc-in-progress: #B45309;
    --afcdc-not-started: #B42318;
    --afcdc-idle:     #8A918C;
}

/* --- Typography ---------------------------------------------------------
   The style guide specifies Univers for graphics and Arial for web HTML
   text. Open Sans stays in the stack as the metric-compatible fallback the
   Porto theme was tuned against. To revert to Open Sans, delete this rule. */
/* modern.css:6 sets this as `html.modern body`, so the selector has to carry the
   same class to win on cascade order rather than lose on specificity. */
html.modern body,
html .nav-main,
html .card-title,
html .page-header h2 {
    font-family: Arial, "Helvetica Neue", "Open Sans", Helvetica, sans-serif;
}

/* Figures line up in columns everywhere they appear. */
html .progress-bar,
html .gauge-chart label,
html .afcdc-figure,
html td.text-end,
html .afcdc-deliverable__meta {
    font-variant-numeric: tabular-nums;
}

/* --- Page header --------------------------------------------------------
   61 views hand-write this header; restyling it here reaches all of them. */
html .page-header h2 {
    color: var(--afcdc-ink);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* --- The gold accent ----------------------------------------------------
   The guide puts gold and green at roughly 60% of the palette against 15%
   white and 15% red. In a dense admin UI that budget is spent almost
   entirely on green; gold earns exactly one job - the rule that closes a
   card header - so it stays an accent instead of decoration. */
html .card > .card-header {
    border-bottom: 1px solid var(--afcdc-rule);
    box-shadow: inset 0 -3px 0 -1px var(--au-gold);
}

/* --- Overview: the two goals ------------------------------------------
   Internal and External are peers, so they get equal columns and a shared
   baseline. The goal name is the heading; the gauge is the summary figure. */
html .afcdc-lens {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
}

html .afcdc-lens__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--afcdc-ink-soft);
}

html .afcdc-lens__name {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--au-green-deep);
    text-wrap: balance;
    margin: 0;
}

/* A deliverable row: WBS rail, title, then its figures. */
html .afcdc-deliverable {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 0 0.75rem;
    align-items: baseline;
    padding: 0.7rem 0;
    border-top: 1px solid var(--afcdc-rule);
    text-align: left;
}

html .afcdc-deliverable__wbs {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--au-green-deep);
    font-variant-numeric: tabular-nums;
}

html .afcdc-deliverable__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--afcdc-ink);
    line-height: 1.35;
}

html .afcdc-deliverable__meta {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--afcdc-ink-soft);
}

/* A deliverable the annual workplan does not fund yet. Marked in text as
   well as tone, because tone alone is not an encoding. */
html .afcdc-deliverable--unfunded .afcdc-deliverable__name {
    color: var(--afcdc-ink-soft);
}

/* --- Status vocabulary --------------------------------------------------
   Colour is the third encoder here, never the first. The icon and the label
   carry the meaning; see the delta-E note in the token block above. */
html .afcdc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem 0.1rem 0.4rem;
    border-radius: 2px;
    border-left: 3px solid currentColor;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0;              /* sentence case reads as a status, not a shout (GOV.UK tag) */
    text-transform: none;
    background: var(--afcdc-canvas);
    white-space: nowrap;
}
html .afcdc-status > i { font-size: 0.875em; }
html .afcdc-status--good     { color: var(--afcdc-good); }
html .afcdc-status--warning  { color: var(--afcdc-warning); }
html .afcdc-status--critical { color: var(--afcdc-critical); }
/* --afcdc-idle (#8A918C) measures 3.0:1 on the chip ground and now sits on
   most overview rows; ink-soft measures 5.9:1. The token itself stays faint
   for the disabled pagination arrows. */
html .afcdc-status--idle     { color: var(--afcdc-ink-soft); }
html .afcdc-status--active   { color: var(--au-green-deep); }
/* Completed green, In progress orange, Not started red - on a tint of the same
   hue so a row of them reads at a glance; the icon and the word still carry it. */
html .afcdc-status--completed   { color: var(--afcdc-completed);   background: #EAF4EC; }
html .afcdc-status--in-progress { color: var(--afcdc-in-progress); background: #FDF0E2; }
html .afcdc-status--not-started { color: var(--afcdc-not-started); background: #FBEAE8; }
html .afcdc-status--completed i, html .afcdc-status--in-progress i, html .afcdc-status--not-started i { font-size: 1em; }
html .progress-bar.afcdc-bar--completed   { background-color: var(--afcdc-completed) !important; }
html .progress-bar.afcdc-bar--in-progress { background-color: var(--afcdc-in-progress) !important; }
html .afcdc-drill .afcdc-status { margin-left: 0.25rem; vertical-align: 0.1em; }
html .afcdc-import__template { margin: 1.5rem 0 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--afcdc-rule); }

/* --- Progress ------------------------------------------------------------
   Progress is a magnitude, so it stays one hue. The track is tinted rather
   than grey so a 0% bar still reads as an empty measure, not a broken one. */
html .progress {
    background-color: #E8EDE9;
    border-radius: 2px;
}
html .progress-bar {
    border-radius: 2px 0 0 2px;
}
/* A zero-length bar renders no label, so the value goes beside the track. */
html .afcdc-progress-zero {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--afcdc-ink-soft);
    font-variant-numeric: tabular-nums;
}

/* --- Gauges --------------------------------------------------------------
   gauge.js paints the arc with graph_color (_PROJECT_COLOR). These are the
   surrounding bits it does not draw. */
/* Do NOT set width/height on canvas.gaugeBasic. gauge.js owns both the
   attributes and the inline style: it scales the attributes by devicePixelRatio
   and writes the CSS box back itself (vendor/gauge/gauge.js:216-221), then
   re-reads clientWidth/clientHeight at :468. Any CSS box here is read back as
   the new backing size - a max-width/height:auto pair grew the page from
   1,385px to 6,290px and broke it sideways; a fixed px pair measured as 0 wide
   and the arc stopped drawing. Size the gauge by the canvas attributes in
   app/views/projects_graphs/overview.php instead. */
html .gauge-chart {
    margin-block: -0.25rem -0.5rem;
}

html .gauge-chart label {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--au-green-deep);
    line-height: 1.1;
}
html .gauge-chart strong a {
    color: var(--afcdc-ink);
}
html .gauge-chart strong a:hover {
    color: var(--au-green-deep);
}

/* --- Footnote -----------------------------------------------------------
   Used to say plainly what is measured data and what is not. */
html .afcdc-note {
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--afcdc-ink-soft);
    border-left: 3px solid var(--au-gold);
    padding-left: 0.75rem;
    max-width: 78ch;
}

/* --- Focus --------------------------------------------------------------
   Porto's focus states are faint. Keyboard users get a real ring. */
html a:focus-visible,
html button:focus-visible,
html .btn:focus-visible,
html .nav-main a:focus-visible,
html [tabindex]:focus-visible {
    outline: 2px solid var(--au-green);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Skip link: off-canvas until a keyboard user tabs to it (GOV.UK pattern). */
html .afcdc-skip { position: absolute; left: -999px; top: 0; z-index: 10000; background: #FFF; color: var(--au-green-deep); padding: .5rem 1rem; font-weight: 700; text-decoration: none; }
html .afcdc-skip:focus { left: 1rem; top: 1rem; outline: 2px solid var(--au-green); outline-offset: 2px; }
/* The skip target takes programmatic focus; the rule above must not box the whole main region. */
html .content-body:focus { outline: 0; }
/* The mobile menu toggle is a real <button> now: strip UA chrome so the theme's round disc renders unchanged. */
html .header .toggle-sidebar-left { border: 0; padding: 0; font: inherit; cursor: pointer; }

/* --- Wide content -------------------------------------------------------
   Tables and chart canvases scroll inside themselves; the page body never
   scrolls sideways. */
html .card-body > .table-responsive,
html .afcdc-scroll {
    overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
    html *,
    html *::before,
    html *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Pagination ---------------------------------------------------------
   Inherited defect, not a new one: the Porto skin paints the current page's
   background with the brand colour but never sets its text colour, so the
   number keeps the list's default #444. Measured 1.12:1 against the AU green
   - the current page was effectively invisible. The same bug was present in
   the legacy build (grey on #134B99); the green just made it obvious.
   White on #1A5632 measures 8.67:1. */
html .pagination .page-item.active .page-link,
html .pagination .page-item.active .page-link:hover,
html .pagination .page-item.active .page-link:focus,
html .pagination > .active > a,
html .pagination > .active > span,
html .pagination > .active > a:hover,
html .pagination > .active > span:hover {
    color: #FFFFFF !important;
    font-weight: 700;
}

/* Disabled arrows were rendering at full strength, identical to live ones. */
html .pagination .page-item.disabled .page-link {
    color: var(--afcdc-idle) !important;
    opacity: 1;                 /* Porto dims the whole box; tint the ink instead */
    cursor: default;
}

/* Give the clickable pages a hover state - previously there was none. */
html .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: #E8EDE9;
    color: var(--au-green-deep) !important;
}

/* --- AWP Activities table -----------------------------------------------
   A long flat list of 55 rows, so it needs a row counter, filters in one row
   above the table, and columns that stay legible when the activity text is
   long. */
html .afcdc-count {
    display: inline-block;
    margin-left: 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--afcdc-ink-soft);
    vertical-align: middle;
}

html .afcdc-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--afcdc-rule);
}
html .afcdc-filter {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 12rem;
}
html .afcdc-filter > span {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--afcdc-ink-soft);
}
/* An active filter is visible as such: green label, green bar on the select. */
html .afcdc-filter.is-active > span { color: var(--au-green-deep); }
html .afcdc-filter.is-active > .form-select { border-left: 3px solid var(--au-green-deep); }

/* The row counter is an index, not a measure: keep it quiet and narrow. */
html .afcdc-col-num {
    width: 3rem;
    text-align: right;
    color: var(--afcdc-ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

html .afcdc-table td { vertical-align: top; }
html .afcdc-table th {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--afcdc-ink-soft);
    white-space: nowrap;
}
html .afcdc-awp {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--afcdc-ink-soft);
}
html .afcdc-lens-tag {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 2px;
    border-left: 3px solid var(--au-green-deep);
    background: var(--afcdc-canvas);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--afcdc-ink);
}

/* DataTables' own chrome, aligned with the rest of the page. */
html #datatable-activities_wrapper .dataTables_filter input {
    border: 1px solid var(--afcdc-rule);
    border-radius: 2px;
    padding: 0.25rem 0.5rem;
    margin-left: 0;
}
html #datatable-activities_wrapper .dataTables_info,
html #datatable-activities_wrapper .dataTables_length label,
html #datatable-activities_wrapper .dataTables_filter label {
    font-size: 0.8125rem;
    color: var(--afcdc-ink-soft);
}

/* --- Record-delivery affordances --------------------------------------- */
html .afcdc-record-link { font-size: .6875rem; vertical-align: middle; white-space: nowrap; }
html .afcdc-status--idle i, html .afcdc-status--good i, html .afcdc-status--active i { font-size: 1em; }

/* --- Drill-down rows: the whole row is the target -----------------------
   Bootstrap 5.2's .stretched-link spreads the name anchor over its nearest
   positioned ancestor; this class is that ancestor. Additive only (no
   display/grid/padding-top) so it sits on the overview grid row and on the
   drill-down pages' .row blocks alike. */
html .afcdc-drill { position: relative; padding-right: 1.5rem; }   /* long names wrap before the chevron */
html .afcdc-drill::after {                                          /* border chevron: nothing for a screen reader to read out */
    content: ""; position: absolute; right: .5rem; top: 50%; width: .5rem; height: .5rem;
    border-right: 2px solid var(--afcdc-ink-soft); border-bottom: 2px solid var(--afcdc-ink-soft);
    transform: translateY(-50%) rotate(-45deg); pointer-events: none;
}
html .afcdc-drill:hover, html .afcdc-drill:focus-within { background: var(--afcdc-canvas); }
html .afcdc-drill:hover::after, html .afcdc-drill:focus-within::after { border-color: var(--au-green-deep); }
html .afcdc-drill .afcdc-record-link { position: relative; z-index: 2; }   /* stays clickable above the overlay */

/* --- "Delivery recorded" confirmation strip ---------------------------- */
html .alert-success { border-left: 3px solid var(--au-green); }

/* --- Print / save as PDF -------------------------------------------------
   html.fixed pins the header, sidebar and page-header (theme.css) so a
   printout repeated the dark chrome on every page with the title 300px in
   over the cards, and Chrome dropped the bar fills. Screen is untouched. */
@media print {
    html .header, html #sidebar-left, html .sidebar-toggle, html .afcdc-skip,
    html .dataTables_length, html .dataTables_paginate, html .dataTables_filter,
    html #afcdc-filters-reset, html .afcdc-record-link, html .btn, html .afcdc-print { display: none !important; }
    html .body, html .inner-wrapper, html .content-body { display: block !important; overflow: visible !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
    html .page-header { position: static !important; left: auto !important; top: auto !important; height: auto !important; margin: 0 0 1rem !important; box-shadow: none !important; border: 0 !important; }
    html .content-body .row > .col-lg-6 { width: 50% !important; }   /* keep the goal cards side by side on a portrait page */
    html .card { box-shadow: none !important; border: 1px solid #CCC; }
    html .afcdc-deliverable, html .gauge-chart, html tr { break-inside: avoid; }
    html .progress, html .progress-bar, html .afcdc-status, html .afcdc-lens-tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   LAYOUT AND LEGIBILITY FIXES
   Measured against the running app, not eyeballed. Each block records the
   number that justified it.
   ========================================================================== */

/* --- 1. Body text was below AA everywhere ------------------------------
   theme.css:18 sets `body { color: #777 }`, which measures 4.48:1 on white,
   4.12:1 on the page ground and 3.63:1 on the alternate card ground - under
   the 4.5:1 minimum on all three. Everything inherits it: form labels,
   "Description:", "Included objectives", paragraph copy. AU Grey is the
   brand's own body colour and clears AA on every ground the app uses
   (7.01 / 6.44 / 5.68). One rule, whole app. */
html.modern body {
    color: var(--au-grey);
}

/* The page-header breadcrumb ("EDIT MODE  ENTRY: 1", "TOTAL OF 55 ENTRIES")
   is set separately at theme.css:2192 and :2232 to #757677 - 4.18:1. */
html .page-header.page-header-left-breadcrumb .breadcrumbs a,
html .page-header.page-header-left-breadcrumb .breadcrumbs span,
html .page-header.page-header-left-inline-breadcrumb .breadcrumbs a,
html .page-header.page-header-left-inline-breadcrumb .breadcrumbs span {
    color: var(--afcdc-ink-soft);
}

/* Bootstrap's default <code> pink #d63384 measures 4.14:1 on the page ground.
   AU Red is on-brand and measures 6.94:1. */
html .content-body code {
    color: var(--au-red);
}

/* --- 2. Tables were clipped inside narrow columns ----------------------
   Thirteen views hard-code style="min-width: 640px" on #datatable-list. That
   is fine on a full-width page, but progress_edit renders the same partial in
   a 468px column: the table stayed 640px wide, so the Status badge and the
   "Record delivery" button painted 127px outside the card and a user could
   not find the control at all.

   min() keeps the 640px floor where there is room and lets the table fit
   where there is not, so the same partial works in both places. Fixing it
   here rather than in thirteen views also means no view can regress it. */
html #datatable-list,
html .table-responsive > table[style*="min-width"] {
    min-width: min(640px, 100%) !important;
}

/* The list pages overflowed their wrapper by 12px (scrollWidth 1022 vs
   clientWidth 1010). The cause is not the table: the header and footer are
   Bootstrap .row elements, which carry margin-inline:-12px and expect to sit
   inside something that supplies 12px of padding. This wrapper supplies none,
   so each row is 1034px in a 1010px box. Giving the wrapper the padding the
   rows assume removes the overflow AND aligns the header/footer controls with
   the table's first column, which they never were. */
html .datatables-header-footer-wrapper {
    padding-inline: 12px;
}

/* --- 3. Task table: let the action column keep its shape ----------------- */
html #datatable-list td,
html #datatable-list th {
    vertical-align: middle;
}
html #datatable-list .afcdc-status {
    white-space: nowrap;
}

/* --- 4. Drill-down pages: the same visual language as the overview -------
   goal / objective / programme / project were never touched by the
   redesign, so they read as a different product: bare headings on the page
   ground, no card, and section labels at the old muted grey. These rules
   bring them up without rewriting the views. */
html .content-body h3 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--afcdc-ink);
}
/* "Description:", "Outcomes:", "Tasks:" and friends are <strong> run-in
   labels; make them read as labels rather than emphasis. */
html .content-body p > strong:first-child {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--afcdc-ink-soft);
    margin-bottom: 0.15rem;
}
/* Those views put <hr> inside <p> and between rows; quieten it. */
html .content-body hr {
    border-top-color: var(--afcdc-rule);
    opacity: 1;
    margin: 0.85rem 0;
}
/* The assignee fraction, so numbers line up down the column. */
html .afcdc-deliverable__meta {
    display: block;
    font-size: 0.75rem;
    color: var(--afcdc-ink-soft);
}

/* --- 5. Progress tracks -------------------------------------------------
   theme.css:15096 draws the track for a DARK theme: #474453 with an inset
   0 1px 3px rgba(0,0,0,.4). custom.css only replaced the colour, so every
   bar kept a 40%-black smudge along its top edge on a pale green ground.
   theme.css:15115 also forces border-radius:0 !important on .progress-squared,
   which every bar in the app carries - so the intended 2px never applied. */
html .progress,
html .progress-squared {
    box-shadow: none;
}
html .progress,
html .progress-bar,
html .progress-squared,
html .progress-squared .progress-bar {
    border-radius: 2px !important;
}

/* --- 6. Sidebar section labels -----------------------------------------
   modern.css:429 styles li.nav-group-label but sets no colour, so GRAPHS /
   CONTENT / ADMINISTRATIVE inherit #777 from theme.css:126 - 3.43:1 at 12px
   on the #1D2722 panel. They also cost ~66px each; three of them pushed
   Configuration and Tools below the fold at 1366x768. */
html.modern ul.nav-main li.nav-group-label {
    color: #9AA39D;            /* 5.1:1 on the sidebar ground */
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 6px 25px;
    margin-top: 14px;
    margin-bottom: 2px;
}

/* --- 7. The last three sub-AA strings -----------------------------------
   Measured on the rebuilt container; everything else now clears 4.5:1. */

/* The role line under the user's name in the top bar: 3.63:1 on the userbox
   ground - the lowest-contrast text left in the authenticated app. */
html #userbox .role,
html .userbox .role {
    color: var(--afcdc-ink-soft);
}

/* btn-light's inherited label colour lands at 4.48:1 on white. Used by
   "Clear filters" on the activities page and by the secondary buttons. */
html .btn-light,
html .btn-default {
    color: var(--au-grey);
}

/* Bootstrap .text-muted is #6c757d-ish and lands at 4.4:1 on the near-white
   card ground used by the About page. */
html .content-body .text-muted,
html .body-sign .text-muted {
    color: var(--au-grey) !important;
}

/* --- 8. The 401 / error page overflowed by 12px -------------------------
   template_setAnswer_unprotected.php puts a bare Bootstrap .row (margin
   -12px) directly inside .center-error, which supplies no padding - so the
   page every unauthenticated visitor sees scrolls sideways by 12px. */
html .body-error .center-error {
    padding-inline: 12px;
}

/* --- Sign in with Microsoft (login page) ------------------------------------
   Rendered only when the container has the Entra ID settings. Plain link
   styled as a secondary button, Microsoft's four-square mark inline. */
.afcdc-sso { margin-top: 1.25rem; }
.afcdc-sso__or { display: flex; align-items: center; gap: .75rem; color: #58595B; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.afcdc-sso__or::before, .afcdc-sso__or::after { content: ""; flex: 1; height: 1px; background: #DDDBD2; }
.afcdc-sso__btn { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 48px; padding: .75rem 1rem; border: 1px solid #C9C7BF; border-radius: 4px; background: #FFFFFF; color: #1E2A22; font-weight: 600; text-decoration: none; }
.afcdc-sso__btn:hover, .afcdc-sso__btn:focus-visible { background: #F6F5F0; border-color: #1A5632; color: #1A5632; text-decoration: none; outline: 2px solid #348F41; outline-offset: 2px; }
.afcdc-sso__hint { margin: .75rem 0 0; font-size: .8125rem; color: #58595B; }

/* Filing by content: the note under the goal / objective / programme dropdown on the add and edit forms. */
.afcdc-suggest { margin-top: .4rem; font-size: .8125rem; line-height: 1.45; color: #58595B; }
.afcdc-suggest:empty { display: none; }
.afcdc-suggest strong { color: #1E2A22; font-weight: 600; }
.afcdc-suggest a { color: #1A5632; text-decoration: underline; }
.afcdc-suggest a:hover, .afcdc-suggest a:focus-visible { color: #348F41; }

/* --- List pages (Projects, Progress, Programmes, Objectives, Goals) --------
   The toolbar is the search box alone. Pressing it, or the filter button on
   it, opens a small panel under it holding every filter - the same labelled
   boxes the overview uses, in a grid - with Apply and Clear; what the search
   would find appears at the top of the same panel as you type. A filter in
   force stands beside the box as a chip whose x lifts it. The table keeps
   one line per row: the parent column shows the code and truncates its
   (repeated, long) name; the name column stops at two lines; and the columns
   that carry no information on a phone - the checkbox, the row counter,
   "Active" - step aside below 992px, where the table would otherwise wrap
   every row to five lines. */
html .afcdc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
html .afcdc-search-wrap { position: relative; flex: 0 1 26rem; min-width: 0; max-width: 100%; }
html .afcdc-search-wrap .afcdc-search { width: 100%; }
/* The search stands beside the Add button, so it takes that button's height rather than the small filters'. */
html .afcdc-toolbar .afcdc-search .form-control,
html .afcdc-toolbar .afcdc-search .btn {
    height: calc(1.5em + 0.9rem + 2px);
    padding-top: 0.45rem; padding-bottom: 0.45rem;
    font-size: 0.875rem; line-height: 1.5;
}
html .afcdc-toolbar .afcdc-search .btn { display: inline-flex; align-items: center; }
html .afcdc-search.is-active .form-control { border-left: 3px solid var(--au-green-deep); }
html .afcdc-search__filters { gap: 0.35rem; font-weight: 600; white-space: nowrap; }
html .afcdc-search__filters .bx { font-size: 1.15rem; }
html .afcdc-search__word { font-size: 0.8125rem; }
html .afcdc-search__filters.is-active { color: var(--au-green-deep); border-color: var(--au-green-deep) !important; }
html .afcdc-search__filters[aria-expanded="true"] { background: #E8EEE9; color: var(--au-green-deep); }
html .afcdc-search__count {
    min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 999px;
    background: var(--au-green-deep); color: #FFF;
    font-size: 0.6875rem; font-weight: 700; line-height: 1.15rem; text-align: center;
}
/* The panel hangs under the box's left edge (custom.js hangs it under the
   right edge instead when the window is short of room), over the table. */
html .afcdc-filterbox {
    position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 35;
    width: min(46rem, calc(100vw - 2rem)); padding: 0 1.1rem 1.1rem;
    background: var(--afcdc-surface); border: 1px solid #D3D8D4; border-radius: 10px;
    box-shadow: 0 18px 44px rgba(29, 33, 30, 0.2), 0 2px 6px rgba(29, 33, 30, 0.08);
}
html .afcdc-filterbox.is-right { left: auto; right: 0; }
/* The head: a green band with the title, the count in force, and a close. */
html .afcdc-filterbox__head {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 0 -1.1rem 0.9rem; padding: 0.65rem 0.75rem 0.65rem 1.1rem;
    background: var(--au-green-deep); color: #FFF; border-radius: 9px 9px 0 0;
}
html .afcdc-filterbox__head strong { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; }
html .afcdc-filterbox__n { font-size: 0.75rem; opacity: 0.85; }
html .afcdc-filterbox__close {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #FFF; font-size: 1.25rem; line-height: 1;
}
html .afcdc-filterbox__close:hover, html .afcdc-filterbox__close:focus-visible { background: rgba(255, 255, 255, 0.28); }
html .afcdc-filterbox__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.85rem 1rem; }
html .afcdc-filterbox .afcdc-filter { min-width: 0; }
html .afcdc-filterbox .afcdc-filter .form-select-sm { width: 100%; min-width: 0; max-width: none; }
html .afcdc-filterbox__foot { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--afcdc-rule); }
html .afcdc-filterbox__clear { font-size: 0.8125rem; font-weight: 600; color: var(--afcdc-ink-soft); text-decoration: underline; }
html .afcdc-filterbox__clear:hover, html .afcdc-filterbox__clear:focus-visible { color: var(--au-green-deep); }
/* What the search finds, at the top of the same panel while you type. */
html .afcdc-filterbox__found .afcdc-typeahead { position: static; margin: -0.3rem -1.1rem 0.85rem; max-height: 15rem; border: 0; border-bottom: 1px solid var(--afcdc-rule); border-radius: 0; box-shadow: none; }
html .afcdc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
html .afcdc-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%;
    padding: 0.2rem 0.55rem 0.2rem 0.65rem; border-radius: 999px;
    background: #E8EEE9; color: var(--au-green-deep);
    font-size: 0.75rem; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap;
}
html .afcdc-chip:hover, html .afcdc-chip:focus-visible { background: #D6E6DA; color: var(--au-green-deep); text-decoration: none; }
html .afcdc-chip > span { color: var(--afcdc-ink-soft); font-weight: 500; }
html .afcdc-chip > b { font-size: 1.05rem; line-height: 1; font-weight: 400; }
/* A filter's name while nothing is chosen: a quiet outline, so the filters are in view before they are wanted. */
html button.afcdc-chip--off { background: transparent; border: 1px dashed #B9C2BC; color: var(--afcdc-ink-soft); font-weight: 500; padding: 0.15rem 0.6rem; cursor: pointer; }
html button.afcdc-chip--off:hover, html button.afcdc-chip--off:focus-visible { border-style: solid; border-color: var(--au-green-deep); color: var(--au-green-deep); background: #F0F6F1; }
/* The Tasks column on the Projects list: how many, and a square in the status colour. */
html .afcdc-col-tasks { white-space: nowrap; font-variant-numeric: tabular-nums; }
html .afcdc-tasks-n { display: inline-block; min-width: 1.1rem; text-align: right; font-weight: 600; color: var(--afcdc-ink); }
html .afcdc-square { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; margin-left: 0.5rem; border-radius: 3px; vertical-align: -0.25em; background: var(--afcdc-ink-soft); color: #FFF; }
html .afcdc-square .bx { font-size: 0.8rem; line-height: 1; }
html .afcdc-square--completed   { background: var(--afcdc-completed); }
html .afcdc-square--in-progress { background: var(--afcdc-in-progress); }
html .afcdc-square--not-started { background: var(--afcdc-not-started); }
html .afcdc-square--idle        { background: transparent; border: 1px solid var(--afcdc-idle); color: var(--afcdc-idle); }
@media (max-width: 767.98px) {
    html .afcdc-search-wrap { flex: 1 1 100%; }
    html .afcdc-filterbox, html .afcdc-filterbox.is-right { width: auto; left: 0; right: 0; }
    html .afcdc-filterbox__grid { grid-template-columns: 1fr; }
    html .afcdc-filter .form-select-sm { max-width: none; }
}
@media print { html .afcdc-filterbox, html .afcdc-search__filters { display: none !important; } }
html #datatable-list th { white-space: nowrap; }
html .afcdc-code { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; color: var(--afcdc-ink); }
html .afcdc-parent { color: var(--afcdc-ink-soft); }
html td.afcdc-cell-parent { max-width: 20rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html td.afcdc-cell-name { max-width: 34rem; }
html .afcdc-clamp {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html td.afcdc-col-actions { white-space: nowrap; }
html td.afcdc-col-actions a {          /* 44px targets (WCAG 2.5.8) without widening the column */
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; margin: -0.5rem 0;
}
@media (max-width: 991.98px) {
    html #datatable-list .afcdc-col-check,
    html #datatable-list .afcdc-col-num,
    html #datatable-list .afcdc-col-active { display: none; }
    html td.afcdc-cell-parent { max-width: 9rem; }
    /* Sighted users see the code alone; a screen reader still gets the name. */
    html td.afcdc-cell-parent .afcdc-parent {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    /* With the Active column out of the way, an inactive row says so itself. */
    html tr.afcdc-row--inactive td.afcdc-cell-name .afcdc-clamp::after { content: " \00b7 Inactive"; font-weight: 600; }
}
html tr.afcdc-row--inactive td { color: var(--afcdc-ink-soft); }

/* --- List toolbar that stays put -------------------------------------
   On a desktop the toolbar (Add, the filters, the search) sticks below the
   fixed page header while the table scrolls under it, so Add is always in
   reach on a 134-row list. custom.js sets --afcdc-sticky-top from the real
   height of the fixed header, and marks the bar is-stuck once it is pinned
   so it only casts a shadow when there is something under it. Below 992px
   the toolbar stacks too tall to pin, so the Add button alone floats at the
   bottom right, clear of the thumb's home position and the safe area. */
@media (min-width: 992px) {
    /* The theme gives .inner-wrapper overflow:hidden, and an overflow:hidden
       ancestor becomes a sticky element's scroll reference even though it
       never scrolls - so nothing inside it could ever stick to the page.
       overflow:clip clips exactly the same and creates no scroll container. */
    html.fixed .inner-wrapper { overflow: clip; }
    html.fixed .datatable-header.afcdc-sticky {
        position: sticky;
        top: var(--afcdc-sticky-top, 150px);
        z-index: 20;
        background: var(--afcdc-surface);
        padding-top: 0.75rem;
        margin-top: -0.75rem;
        /* Bottom padding keeps the toolbar row's own margin INSIDE the bar
           (a child margin would otherwise collapse out of it), so when the
           bar is pinned the rows sliding under it get a clear band of
           background rather than touching its edge. */
        padding-bottom: 0.5rem;
        transition: box-shadow 0.15s ease;
    }
    html.fixed .datatable-header.afcdc-sticky.is-stuck {
        box-shadow: 0 10px 12px -10px rgba(29, 33, 30, 0.22);
    }
}
@media (max-width: 991.98px) {
    html .afcdc-add-col { margin: 0 !important; }
    html a.afcdc-add.btn.btn-primary {
        position: fixed;
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        z-index: 1030;
        border-radius: 999px;
        padding: 0.85rem 1.35rem;
        min-height: 3rem;
        box-shadow: 0 8px 20px rgba(29, 33, 30, 0.28);
    }
}
@media (max-width: 991.98px) {
    /* Room under the last row, so the floating button never hides it. */
    html body:has(a.afcdc-add) .content-body { padding-bottom: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    html.fixed .datatable-header.afcdc-sticky { transition: none; }
}

/* --- Re-filed activities awaiting vetting --------------------------------
   A moved row carries a band on its left: gold while it waits, red where the
   two judges disagreed or the text was too thin to be sure, green once a
   person has accepted it. Colour never stands alone - the note under the
   name says the same in words, and carries the Accept / Undo links. */
html #datatable-list tr.afcdc-review td:first-child { box-shadow: inset 4px 0 0 var(--au-gold); }
html #datatable-list tr.afcdc-review--split td:first-child,
html #datatable-list tr.afcdc-review--low td:first-child { box-shadow: inset 4px 0 0 var(--au-red); }
html #datatable-list tr.afcdc-review--accepted td:first-child { box-shadow: inset 4px 0 0 var(--au-green); }
html #datatable-list tr.afcdc-review--proposed { background-color: #FBF8EE !important; }
html #datatable-list tr.afcdc-review--split, html #datatable-list tr.afcdc-review--low { background-color: #FBEFF2 !important; }
html .afcdc-review__note { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.5; color: var(--afcdc-ink-soft); }
html .afcdc-review__note code { font-size: 0.75rem; color: var(--afcdc-ink); background: transparent; padding: 0; }
html .afcdc-review__tag { display: inline-block; padding: 0 0.4rem; border-radius: 2px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--au-gold); color: var(--afcdc-ink); }
html tr.afcdc-review--split .afcdc-review__tag, html tr.afcdc-review--low .afcdc-review__tag { background: var(--au-red); color: #FFF; }
html tr.afcdc-review--accepted .afcdc-review__tag { background: var(--au-green-deep); color: #FFF; }
html .afcdc-review__why { font-style: italic; }
html .afcdc-review__also { display: inline; color: var(--afcdc-ink-soft); }
/* Merging activities */
html .afcdc-add-col { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
html .afcdc-merge__title { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--afcdc-ink); }
html .afcdc-merge__lead { font-size: 0.875rem; line-height: 1.5; color: var(--afcdc-ink-soft); max-width: 70ch; margin-bottom: 1rem; }
html .afcdc-merge__table td { vertical-align: top; font-size: 0.875rem; }
html .afcdc-merge__table input[type="radio"] { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; }
html .afcdc-merge__tasks { margin: 0; padding-left: 1.1rem; }
html .afcdc-merge__tasks li { margin-bottom: 0.15rem; }
html .afcdc-merge__was { display: block; color: var(--afcdc-ink-soft); font-size: 0.75rem; }
html .afcdc-merge__hint { display: block; margin-top: 0.25rem; color: var(--afcdc-ink-soft); font-size: 0.75rem; }
html .afcdc-review-panel.afcdc-merge-panel { border-left-color: var(--au-green-deep); background: #F1F7F3; }
html .afcdc-merge-panel .afcdc-review__tag { background: var(--au-green-deep); color: #FFF; }
html .afcdc-review__act { margin-left: 0.5rem; font-weight: 600; color: var(--au-green-deep); text-decoration: underline; white-space: nowrap; }


/* Unfinished activities: a red tag naming what is missing, in the list and on
 * the edit form. Rows keep the vetting band when they have one (those rules
 * come first in the file and are more specific, so they win). */
html #datatable-list tr.afcdc-gap:not(.afcdc-review) td:first-child { box-shadow: inset 4px 0 0 var(--au-red); }
html .afcdc-gap__note { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.5; color: var(--afcdc-ink-soft); }
html .afcdc-gap__tag { display: inline-block; padding: 0 0.4rem; border-radius: 2px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--au-red); color: #FFF; }

/* The same vetting note as a panel at the top of the edit form. */
html .afcdc-review-panel, html .afcdc-gap-panel, html .afcdc-form-errors { padding: 0.6rem 0.9rem; margin: 0 0 1rem; border-left: 4px solid var(--au-gold); border-radius: 2px; background: #FBF8EE; font-size: 0.8125rem; line-height: 1.5; color: var(--afcdc-ink); }
html .afcdc-review-panel .afcdc-review__note, html .afcdc-gap-panel .afcdc-gap__note { margin-top: 0; font-size: 0.8125rem; }
html .afcdc-review-panel.afcdc-review--split, html .afcdc-review-panel.afcdc-review--low, html .afcdc-gap-panel, html .afcdc-form-errors { border-left-color: var(--au-red); background: #FBEFF2; }
html .afcdc-review-panel.afcdc-review--split .afcdc-review__tag, html .afcdc-review-panel.afcdc-review--low .afcdc-review__tag { background: var(--au-red); color: #FFF; }
html .afcdc-review-panel.afcdc-review--accepted { border-left-color: var(--au-green); background: #F0F6F1; }
html .afcdc-review-panel.afcdc-review--accepted .afcdc-review__tag { background: var(--au-green-deep); color: #FFF; }
html .afcdc-review-panel .afcdc-review__act { font-size: 0.8125rem; }

/* Required fields the save was refused on. */
html .afcdc-field--missing .form-control, html .afcdc-field--missing .select2-container .select2-selection--single { border-color: var(--au-red) !important; }
html .afcdc-field__msg { margin-top: 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--au-red); }

/* A goal / objective / programme changed on the edit form before it is saved. */
html .afcdc-field--changed .form-control, html .afcdc-field--changed .select2-container .select2-selection--single { border-color: var(--au-gold) !important; background-color: #FBF8EE !important; }
/* select2 sizes itself from the hidden <select> at start-up; below 992px that
 * measures a few characters wide, and the box shrank to a letter. */
html form.ecommerce-form .form-group .select2-container { width: 100% !important; }
html .afcdc-field__changed { margin-top: 0.25rem; padding-left: 0.5rem; border-left: 3px solid var(--au-gold); font-size: 0.75rem; color: var(--afcdc-ink-soft); }

/* Needs input: a flag beside the code, on lists and drill-downs. */
html .afcdc-flag { color: var(--au-red); font-size: 0.95em; vertical-align: -0.1em; margin-right: 0.15rem; }

/* "Check placement": a placement a person chose that the wording disagrees with. Red, like the other checks. */
html #datatable-list tr.afcdc-review--proposed.afcdc-review--check td:first-child { box-shadow: inset 4px 0 0 var(--au-red); }
html #datatable-list tr.afcdc-review--proposed.afcdc-review--check { background-color: #FBEFF2 !important; }
html tr.afcdc-review--proposed.afcdc-review--check .afcdc-review__tag, html .afcdc-review-panel.afcdc-review--proposed.afcdc-review--check .afcdc-review__tag { background: var(--au-red); color: #FFF; }
html .afcdc-review-panel.afcdc-review--proposed.afcdc-review--check { border-left-color: var(--au-red); background: #FBEFF2; }
/* An accepted check or move is green whatever its confidence was. */
html #datatable-list tr.afcdc-review--accepted { background-color: #F0F6F1 !important; }
html #datatable-list tr.afcdc-review--accepted td:first-child { box-shadow: inset 4px 0 0 var(--au-green); }
/* The flag stays hoverable on drill-down rows, above the stretched link's overlay. */
html .afcdc-drill .afcdc-flag { position: relative; z-index: 2; }

/* Boxes filled from the wording on the add form, until a person touches them. */
html .afcdc-field--suggested .select2-container .select2-selection--single { border-color: var(--au-gold) !important; background-color: #FBF8EE !important; }
html .afcdc-field__suggested { margin-top: 0.25rem; padding-left: 0.5rem; border-left: 3px solid var(--au-gold); font-size: 0.75rem; color: var(--afcdc-ink-soft); }

/* What a programme is for and what already sits there, under the programme box. */
html .afcdc-neighbours { margin-top: 0.4rem; font-size: 0.75rem; line-height: 1.5; color: var(--afcdc-ink-soft); }
html .afcdc-neighbours__what { margin: 0 0 0.2rem; }
html .afcdc-neighbours__lead { font-weight: 600; color: var(--afcdc-ink); }
html .afcdc-neighbours .afcdc-code { font-size: 0.75rem; }

/* "…" in the page numbers: pressable, with a small go-to-page box beneath. */
html .pagination .afcdc-jump { position: relative; }
html .pagination .afcdc-jump > .page-link { cursor: pointer; }
html .pagination .afcdc-jump.is-open > .page-link { background: var(--au-green-deep); color: #FFF; }
html .afcdc-jump__box { position: absolute; left: 50%; bottom: calc(100% + 0.4rem); transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.6rem; background: #FFF; border: 1px solid #D9DCD6; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); white-space: nowrap; font-size: 0.8125rem; }
html .afcdc-jump__box label { margin: 0; display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
html .afcdc-jump__box input { width: 4.5rem; }
html .afcdc-jump__of { color: var(--afcdc-ink-soft); }

/* What the list search would find, under the box as you type. */
html .afcdc-search { position: relative; }
html .afcdc-typeahead { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 30; max-height: 22rem; overflow-y: auto; background: #FFF; border: 1px solid #D9DCD6; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); font-size: 0.8125rem; text-align: left; }
html .afcdc-typeahead__group { padding: 0.35rem 0.75rem 0.15rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--afcdc-ink-soft); }
html .afcdc-typeahead__item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0.75rem; cursor: pointer; line-height: 1.35; }
html .afcdc-typeahead__item > span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--afcdc-ink); }
html .afcdc-typeahead__item > small { flex: 0 0 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--afcdc-ink-soft); }
html .afcdc-typeahead__act { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--au-green-deep) !important; }
html .afcdc-typeahead__item.is-active, html .afcdc-typeahead__item:hover { background: #F0F6F1; }
html .afcdc-typeahead__all { border-top: 1px solid #EEF0EC; font-weight: 600; color: var(--au-green-deep); }
html .dataTables_paginate .ellipsis { position: relative; cursor: pointer; padding: 0 0.5em; }
html .dataTables_paginate .ellipsis.is-open { color: var(--au-green-deep); font-weight: 700; }
/* The Bootstrap skin marks the dots "disabled", which switches clicks off. */
html .dataTables_paginate .page-item.disabled > [data-dt-idx="ellipsis"] { pointer-events: auto; cursor: pointer; color: var(--afcdc-ink-soft); }
html .dataTables_paginate .page-item.is-open > [data-dt-idx="ellipsis"] { background: var(--au-green-deep); color: #FFF; }

/* A row found through its description says so, with the words marked. */
html .afcdc-match { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.5; color: var(--afcdc-ink-soft); font-weight: 400; }
html .afcdc-match__tag { display: inline-block; padding: 0 0.4rem; border-radius: 2px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: #E8EEE9; color: var(--au-green-deep); }
html .afcdc-match mark, html .afcdc-typeahead__why mark { background: #FBF0B8; color: inherit; padding: 0 0.1em; border-radius: 2px; }
html .afcdc-typeahead__item { flex-wrap: wrap; row-gap: 0.1rem; }
html .afcdc-typeahead__why { flex: 1 1 100%; font-size: 0.75rem; color: var(--afcdc-ink-soft); white-space: normal; line-height: 1.4; }
html .afcdc-typeahead__why b { font-weight: 700; color: var(--au-green-deep); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; }
@media print { html .afcdc-match mark { background: transparent; text-decoration: underline; font-weight: 700; } }

/* Tasks typed on the add form, before the activity exists. */
html .afcdc-new-tasks__lead { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--afcdc-ink-soft); }
html #afcdc-new-tasks td { vertical-align: middle; }
html #afcdc-new-tasks .afcdc-new-task__num { color: var(--afcdc-ink-soft); }

/* A row that only carries an action, not a way into another page: the same
   spacing as a drill-down row, without the chevron that promises one. */
html .afcdc-drill--flat { padding-right: .5rem; }
html .afcdc-drill--flat::after { content: none; }
html .afcdc-drill--flat:hover, html .afcdc-drill--flat:focus-within { background: transparent; }

/* Tasks edited inside the activity form. A saved task marked for removal
   stays on the page, struck through, until Save is pressed: nothing has
   happened yet and the mark can be taken back. */
html #afcdc-new-tasks .afcdc-task__num { color: var(--afcdc-ink-soft); }
html tr.afcdc-task--removed { opacity: 0.55; }
html tr.afcdc-task--removed input[type="text"] { text-decoration: line-through; background: var(--afcdc-canvas); }
html [data-undo-remove-task] { font-size: 0.75rem; font-weight: 600; color: var(--au-green-deep); text-decoration: underline; }
html .afcdc-task__kept { color: var(--afcdc-ink-soft); cursor: help; }
/* Two-column forms (activity add/edit, Progress, the generic add/edit forms,
   users, the profile). Two columns is the normal state: one column is for a
   SMALL screen only - a tablet, a phone, a narrow window. The test is the
   room the row really has (a container query on the row), so an open or a
   collapsed sidebar is accounted for: from 800px of row the columns sit side
   by side (400px each at the least), below it each takes the full width, the
   second under the first. With the sidebar open that is a window of about
   1160px and up, so a 1280px or 1366px laptop keeps its two columns;
   Bootstrap's own breakpoint kept them side by side down to 992px, where the
   open sidebar left each one 318px wide and the tasks table unreadable. (A
   first version asked for 1040px of row and stacked on nearly every laptop.)
   A browser without container queries keeps them stacked. */
html .afcdc-split { container-type: inline-size; }
html .afcdc-split > .afcdc-split__col { flex: 0 0 100%; max-width: 100%; }
@container (min-width: 800px) {
    html .afcdc-split[data-cols="2"] > .afcdc-split__col,
    html .afcdc-split[data-cols="3"] > .afcdc-split__col { flex: 0 0 50%; max-width: 50%; }
}
@container (min-width: 1320px) {
    html .afcdc-split[data-cols="3"] > .afcdc-split__col { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
/* The signed-in user's box in the top bar. theme.css makes its menu exactly
   as wide as the box (.userbox .dropdown-menu: width 100%, min-width 0), and
   modern.css hides the name and role at 1440px and below - which left the
   box, and so the menu, the 55px of the avatar: on a 13-inch laptop "System
   Information" was cut off and "Logout" ran off the screen. The theme's own
   correction (modern.css, "html.modern:not(.sidebar-left-collapsed)
   .userbox.show .dropdown-menu") is keyed to .userbox.show, a class
   Bootstrap 4 put on the parent and Bootstrap 5 does not, so it never
   applied. This top bar has only the title beside it, so from 992px the name
   and role stay and the box keeps a width a menu can live in; below that the
   avatar stands alone and the menu gets a width of its own, held to the right
   edge so it cannot leave the screen. */
@media (min-width: 992px) {
    html.modern .userbox { min-width: 215px; }
}
@media (min-width: 992px) and (max-width: 1440px) {
    html.modern:not(.sidebar-left-collapsed) .userbox .profile-info,
    html.modern:not(.sidebar-left-collapsed) .userbox .profile-info + i { display: inline-block; }
}
@media (min-width: 768px) and (max-width: 991px) {
    /* !important: Bootstrap's positioning writes an inline "inset" on the menu when it opens. */
    html.modern .userbox .dropdown-menu { width: 215px; left: auto !important; right: -10px !important; }
}
/* The whole text of a task box that does not fit, under its row while the box is being edited (pm_projects.js). */
html #afcdc-new-tasks tr.afcdc-task__peek td { padding: 0.15rem 0.75rem 0.6rem; font-size: 0.8125rem; line-height: 1.45; color: var(--afcdc-ink); background: transparent; white-space: normal; word-break: break-word; }
html .afcdc-task__peek-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--au-green-deep); margin-right: 0.25rem; }
/* The Status box on the activity form, and beside it "how far along" while a task is in progress. */
html .afcdc-task__status-wrap { display: flex; align-items: center; gap: 0.35rem; }
html select.afcdc-task__pct { flex: 0 0 auto; width: auto; min-width: 5.5rem; }
/* Files attached to an activity (projects/_attachments.php). */
html .afcdc-attach { margin-top: 1rem; }
html .afcdc-attach__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
html .afcdc-attach__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--afcdc-ink); display: flex; align-items: center; gap: 0.35rem; }
html .afcdc-attach__count { font-weight: 400; color: var(--afcdc-ink-soft); }
html .afcdc-attach__add { cursor: pointer; }
html .afcdc-attach__add:focus-within { outline: 2px solid var(--au-green-deep); outline-offset: 2px; }
html .afcdc-attach.is-busy .afcdc-attach__add { opacity: 0.6; pointer-events: none; }
html .afcdc-attach__status { margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--au-green-deep); }
html .afcdc-attach__status.is-bad { color: var(--afcdc-not-started); }
html .afcdc-attach__list { list-style: none; margin: 0; padding: 0; }
html .afcdc-attach__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--afcdc-rule, #E3E6E4); }
html .afcdc-attach__item:first-child { border-top: 0; }
html .afcdc-attach__icon { font-size: 1.6rem; flex: 0 0 auto; color: var(--afcdc-ink-soft); }
html .afcdc-attach__icon--pdf { color: #B42318; }
html .afcdc-attach__icon--docx, html .afcdc-attach__icon--doc { color: #1F5FA8; }
html .afcdc-attach__icon--xlsx, html .afcdc-attach__icon--xls { color: #1D6F42; }
html .afcdc-attach__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html .afcdc-attach__name { font-weight: 600; overflow-wrap: anywhere; }
html .afcdc-attach__meta { font-size: 0.75rem; color: var(--afcdc-ink-soft); }
html .afcdc-attach__acts { display: inline-flex; gap: 0.3rem; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
html .afcdc-attach__empty { margin: 0.25rem 0 0; font-size: 0.8125rem; }
/* The preview of a Word or Excel file. */
html .afcdc-preview__lead { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
html .afcdc-preview__note { font-size: 0.8125rem; color: var(--afcdc-ink-soft); border-left: 3px solid var(--afcdc-rule, #D0D5D2); padding-left: 0.6rem; }
html .afcdc-preview__error { color: var(--afcdc-not-started); }
html .afcdc-preview__doc { max-width: 60rem; line-height: 1.55; }
html .afcdc-preview__doc h3, html .afcdc-preview__sheet { font-size: 1.15rem; font-weight: 700; margin: 1.25rem 0 0.5rem; }
html .afcdc-preview__doc h4 { font-size: 1rem; font-weight: 700; margin: 1rem 0 0.4rem; }
html .afcdc-preview__li { margin: 0 0 0.3rem 1rem; }
html .afcdc-preview__wrap { max-height: 70vh; overflow: auto; margin-bottom: 1rem; }
html .afcdc-preview__table { font-size: 0.8125rem; margin: 0; }
html .afcdc-preview__table th[scope="row"] { color: var(--afcdc-ink-soft); font-weight: 400; background: var(--afcdc-canvas); position: sticky; left: 0; }
html .afcdc-preview__table td { white-space: pre-wrap; min-width: 4rem; }
/* Reordering objectives on the Overview (administrators). The bar floats at
   the foot of the screen - the page header is fixed and grows tall on narrow
   screens, so a bar pinned under it would hide - and the rows shrink to code,
   name and arrows while they are being moved. */
html .afcdc-reorder__ctl { display: none; }
html .afcdc-reorder-bar { position: fixed; z-index: 1030; right: 16px; bottom: 16px; width: min(40rem, calc(100vw - 32px));
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.75rem 1rem;
    background: #FFF; border: 1px solid var(--afcdc-rule, #D0D5D2); border-left: 4px solid var(--au-green-deep); border-radius: 4px; box-shadow: 0 8px 28px rgba(0,0,0,.16); }
html .afcdc-reorder-bar__text { margin: 0; flex: 1 1 18rem; font-size: 0.8125rem; line-height: 1.45; }
html .afcdc-reorder-bar__acts { display: inline-flex; gap: 0.5rem; }
html .afcdc-reorder-bar__msg { flex-basis: 100%; font-size: 0.8125rem; color: var(--afcdc-not-started); }
html .afcdc-reorder-bar__msg:empty { display: none; }
html body.afcdc-reordering .content-body { padding-bottom: 11rem; }
html body.afcdc-reordering .scroll-to-top { display: none !important; }
html body.afcdc-reordering .afcdc-deliverable { grid-template-columns: 2.75rem 1fr auto; align-items: center; cursor: grab;
    padding: 0.5rem 0.5rem 0.5rem 0.4rem; margin-bottom: 0.35rem; border: 1px dashed var(--afcdc-rule, #C9D0CC); border-radius: 4px; background: #FFF; }
html body.afcdc-reordering .afcdc-deliverable::after { content: none; }
html body.afcdc-reordering .afcdc-deliverable__meta { display: none; }
html body.afcdc-reordering .afcdc-deliverable .stretched-link { pointer-events: none; color: inherit; }
html body.afcdc-reordering .afcdc-deliverable .stretched-link::after { display: none; }
html body.afcdc-reordering .afcdc-reorder__ctl { display: inline-flex; grid-column: 3; grid-row: 1; align-items: center; gap: 0.25rem; position: relative; z-index: 3; }
html .afcdc-reorder__grip { font-size: 1.2rem; color: var(--afcdc-ink-soft); margin-right: 0.15rem; }
html .afcdc-reorder__up, html .afcdc-reorder__down { border: 1px solid var(--afcdc-rule, #C9D0CC); background: #FFF; border-radius: 3px; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--afcdc-ink); cursor: pointer; }
html .afcdc-reorder__up:hover, html .afcdc-reorder__down:hover, html .afcdc-reorder__up:focus-visible, html .afcdc-reorder__down:focus-visible { border-color: var(--au-green-deep); color: var(--au-green-deep); outline: none; box-shadow: 0 0 0 2px rgba(26,86,50,.25); }
html .afcdc-reorder-placeholder { height: 2.9rem; margin-bottom: 0.35rem; border: 2px dashed var(--au-green-deep); border-radius: 4px; background: rgba(26,86,50,.04); visibility: visible !important; }
html body.afcdc-reordering .ui-sortable-helper { box-shadow: 0 8px 22px rgba(0,0,0,.14); cursor: grabbing; }
@media print { html .afcdc-reorder-bar, html .afcdc-reorder__ctl, html .afcdc-reorder-start { display: none !important; } }
/* Record delivery and Edit on an overview row stay together: a long name must not leave one on each line. */
html .afcdc-row-actions { display: inline-block; white-space: nowrap; }
/* A project run by another unit than its objective's says so under its name. */
html .afcdc-unit-tag .afcdc-match__tag { color: var(--au-green-deep); }
html .afcdc-unit-tag__from { color: var(--afcdc-ink-soft); }
/* The Tasks header on the Projects list sorts by status (list.php). */
html th.afcdc-col-tasks a.afcdc-sort { color: inherit; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.2rem; }
html th.afcdc-col-tasks a.afcdc-sort .bx { font-size: 1rem; color: var(--afcdc-ink-soft); }
html th.afcdc-col-tasks a.afcdc-sort:hover, html th.afcdc-col-tasks a.afcdc-sort:focus-visible { color: var(--au-green-deep); text-decoration: underline; }
html th.afcdc-col-tasks a.afcdc-sort.is-active, html th.afcdc-col-tasks a.afcdc-sort.is-active .bx { color: var(--au-green-deep); }
/* Delete on the activity form: a default button that reads as the one to
   think about, not a red block beside Save. */
html .afcdc-btn-danger { color: var(--afcdc-not-started); }
html .afcdc-btn-danger:hover, html .afcdc-btn-danger:focus-visible { color: #FFF; background: var(--afcdc-not-started); border-color: var(--afcdc-not-started); }
/* A row found by some of the words of a search only: the found words
   marked as in a description passage, the missing ones struck. */
html .afcdc-match--partial s, html .afcdc-typeahead__why--partial s { color: var(--afcdc-ink-soft); text-decoration-color: var(--afcdc-not-started); }
html .afcdc-match--partial .afcdc-match__tag, html .afcdc-typeahead__why--partial b { color: var(--afcdc-in-progress); }
/* The Status box on the activity form: its band on the left is the colour
   the Projects list's square would show for that status; nothing recorded
   yet is the same quiet grey as an idle square. */
html select.afcdc-task__status { min-width: 8.5rem; border-left: 4px solid var(--afcdc-idle); padding-left: 0.5rem; }
html select.afcdc-task__status[data-afcdc-status="1"] { border-left-color: var(--afcdc-completed); }
html select.afcdc-task__status[data-afcdc-status="2"] { border-left-color: var(--afcdc-in-progress); }
html select.afcdc-task__status[data-afcdc-status="0"] { border-left-color: var(--afcdc-not-started); }
html select.afcdc-task__status:disabled { background-color: var(--afcdc-canvas); opacity: 1; }
html #afcdc-new-tasks .afcdc-task__status-later { font-size: 0.75rem; color: var(--afcdc-ink-soft); font-style: italic; }

/* Import a work plan: the review page reuses the vetting bands and tags. */
html .afcdc-import__title { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--afcdc-ink); }
html .afcdc-import__lead { margin: 0 0 0.75rem; font-size: 0.8125rem; line-height: 1.5; color: var(--afcdc-ink-soft); }
html .afcdc-import__hint { font-weight: 400; color: var(--afcdc-ink-soft); font-size: 0.75rem; }
html .afcdc-import__how { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--afcdc-rule); font-size: 0.8125rem; line-height: 1.5; color: var(--afcdc-ink-soft); }
html .afcdc-import__how p { margin: 0 0 0.5rem; }
html .afcdc-import__meta { font-size: 0.75rem; color: var(--afcdc-ink-soft); }
html .afcdc-import__batches td { vertical-align: top; font-size: 0.8125rem; }
html .afcdc-import__tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; }
html .afcdc-import__tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border: 1px solid var(--afcdc-rule); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--afcdc-ink-soft); text-decoration: none; background: var(--afcdc-surface); }
html .afcdc-import__tab:hover, html .afcdc-import__tab:focus { color: var(--afcdc-ink); border-color: var(--au-green); text-decoration: none; }
html .afcdc-import__tab.is-active { color: #FFF; background: var(--au-green-deep); border-color: var(--au-green-deep); }
html .afcdc-import__n { font-variant-numeric: tabular-nums; font-weight: 700; }
html .afcdc-import__tools { display: flex; gap: 0.5rem; flex-wrap: wrap; }
html .afcdc-import__table td { vertical-align: top; }
html .afcdc-import__desc { margin-top: 0.15rem; font-size: 0.8125rem; color: var(--afcdc-ink-soft); }
html .afcdc-import__facts { margin-top: 0.25rem; font-size: 0.75rem; color: var(--afcdc-ink-soft); }
html .afcdc-import__note, html .afcdc-import__proposal { margin-top: 0.4rem; }
html .afcdc-import__diff { margin: 0.25rem 0 0.25rem 1rem; padding: 0; font-size: 0.75rem; }
html .afcdc-import__diff del { color: var(--au-red); text-decoration: line-through; }
html .afcdc-import__diff ins { color: var(--au-green-deep); text-decoration: none; font-weight: 600; }
html .afcdc-import__descedit { margin-top: 0.4rem; }
html .afcdc-import__descedit label { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--afcdc-ink-soft); margin-bottom: 0.15rem; }
html .afcdc-import__desc-input { font-size: 0.8125rem; }
html .afcdc-import__needs { display: inline; margin-left: 0.35rem; font-weight: 400; letter-spacing: 0; text-transform: none; font-style: italic; color: var(--au-red); }
html .afcdc-import__needs--empty { font-weight: 700; font-style: normal; }
html .afcdc-import__descedit--suggested .afcdc-import__desc-input { border-color: var(--au-gold); background: #FBF8EE; }
html .afcdc-import__code { margin-top: 0.15rem; font-size: 0.75rem; color: var(--afcdc-ink-soft); }
html .afcdc-import__code code { font-size: 0.75rem; font-weight: 700; color: var(--afcdc-ink); background: transparent; padding: 0; }
html .afcdc-import__nearest { margin-top: 0.2rem; font-size: 0.75rem; color: var(--afcdc-ink-soft); }
html .afcdc-import__tag--split, html .afcdc-import__tag--low, html .afcdc-import__tag--none { background: var(--au-red) !important; color: #FFF !important; }
html .afcdc-import__tag--agreed { background: var(--au-green-deep) !important; color: #FFF !important; }
html .afcdc-import__box { display: block; margin: 0 0 0.4rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--afcdc-ink-soft); }
html .afcdc-import__box span { display: block; margin-bottom: 0.15rem; }
html .afcdc-import__box select { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.8125rem; }
html .afcdc-import__accept { margin-bottom: 0.25rem; }
/* Actions that are named, not drawn.
   Every list puts bare icons in this column, so the shared rule pins
   `td.afcdc-col-actions a` to a fixed 2.75rem square - a 44px target that
   does not widen the column. The review page is the one place that labels
   its actions, because Accept, Accept as new and Skip are decisions to read
   rather than icons to recognise, and a word does not fit in a 44px box: the
   label overflowed its own button and collided with the one beside it. Here
   the square becomes a MINIMUM, so a button grows to its text while a lone
   icon still gets its target. */
html .afcdc-import__table td.afcdc-col-actions a {
    width: auto;
    min-width: 2.75rem;
    height: auto;
    min-height: 2.75rem;   /* the same 44px target the icon buttons keep elsewhere */
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    margin: 0;
}
/* Free to wrap in that narrow column rather than forcing it wider. */
html .afcdc-import__table td.afcdc-col-actions { white-space: normal; }
/* The cell wraps so the buttons stack; the label inside one does not, or
   "Accept as new" breaks across two lines in a column this narrow. */
html .afcdc-import__table td.afcdc-col-actions a { margin: 0 0.35rem 0.35rem 0; white-space: nowrap; }
/* The actions inside a row note are links, not buttons: without this the
   "disabled" class the script adds while a POST is in flight looks the same
   as before and a second click answers "that row was already decided". */
html .afcdc-review__act.disabled { pointer-events: none; opacity: 0.55; }
html #datatable-list tr.afcdc-review--agreed td:first-child { box-shadow: inset 4px 0 0 var(--au-gold); }
html #datatable-list tr.afcdc-row--inactive td { color: var(--afcdc-idle); }

/* Focal person: a dropdown under each task's name on the activity forms. */
html .afcdc-task__focal { margin-top: 0.35rem; }
html .afcdc-th-sub { font-weight: 400; text-transform: none; letter-spacing: 0; }