/* ============================================================================
   JAT component layer — legacy markup restyled to the Figma design system.

   The eleven converted pages still emit the original theme's markup: .redBtn,
   .greyishBtn, .TabHeading, .tableStatic, .dataTables_paginate, .mainForm inputs
   and so on. Rewriting eleven page bodies before they can look right would be a
   lot of churn for no behaviour change, so this sheet maps those existing classes
   onto the design's components instead.

   Every rule is scoped under .jat-shell, so the ~98 pages still on the horizontal
   navbar are untouched. All values come from css/jat-figma-tokens.css.

   Component specs are from get_design_context on the real Figma components:
     Buttons          54:106  — px24/py18, radius 8, gap 12, Inter Bold 18px
     View button      82:2940 — px20/py12, radius 6, 1px black border, Bold 16px
     edit/delete      82:2702/82:2705 — 30x30, padding 8, radius 6
     more (kebab)     82:2310 — px14/py8, radius 4, three 4px dots
     select field     53:332  — 502x56, text inset 24px

   ⚠️ TWO DELIBERATE DEVIATIONS, both for contrast — see the notes at each rule.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

/* Shared button metrics — style guide §04 "Button & Link" (365:10658).

   Every text button in the shell — primary, dark, ghost and the Help pill —
   carries the same box and type, so it is declared once here and the variants
   below only describe what actually differs: colour, border and radius.

   The four values come from the token layer rather than being written inline,
   which is what makes the size scale work: an opt-in size class re-declares those
   same custom properties on the element and this rule picks them up unchanged.

   ⚠️ One knowing difference from the guide: the label weight is 600, not the
   design's Bold. That was an explicit instruction and is a one-word change if it
   should go back. */
.jat-shell .redBtn,
.jat-shell .kLimeBtn,
.jat-shell .greenBtn,
.jat-shell .blackBtn,
.jat-shell input[type="submit"].redBtn,
.jat-shell .jat-btn-primary,
.jat-shell .blueBtn,
.jat-shell .jat-btn-dark,
.jat-shell .greyishBtn,
.jat-shell .btnCancel,
.jat-shell .jat-btn-ghost,
.jat-shell .head_help .help,
.jat-shell a.help {
    padding: var(--jat-btn-py) var(--jat-btn-px);
    font-size: var(--jat-btn-fs);
    font-weight: 600;
}
/* The guide pairs every button size with a matching icon size. */
.jat-shell .redBtn .ti,
.jat-shell .kLimeBtn .ti,
.jat-shell .greenBtn .ti,
.jat-shell .blackBtn .ti,
.jat-shell .jat-btn-primary .ti,
.jat-shell .blueBtn .ti,
.jat-shell .jat-btn-dark .ti,
.jat-shell .greyishBtn .ti,
.jat-shell .btnCancel .ti,
.jat-shell .jat-btn-ghost .ti { font-size: var(--jat-btn-icon); vertical-align: -.1em; }

/* Opt-in sizes. Add alongside a colour class — `class="redBtn jat-btn-lg"` — and
   only the four tokens change; nothing else about the button is re-stated.
   Extra Small is the default above and needs no class. */
.jat-shell .jat-btn-sm     { --jat-btn-py: 12px; --jat-btn-px: 20px; --jat-btn-fs: 16px; --jat-btn-icon: 16px; }
.jat-shell .jat-btn-normal { --jat-btn-py: 18px; --jat-btn-px: 24px; --jat-btn-fs: 18px; --jat-btn-icon: 18px; }
.jat-shell .jat-btn-lg     { --jat-btn-py: 18px; --jat-btn-px: 24px; --jat-btn-fs: 20px; --jat-btn-icon: 20px; }
.jat-shell .jat-btn-xl     { --jat-btn-py: 18px; --jat-btn-px: 24px; --jat-btn-fs: 22px; --jat-btn-icon: 22px; }

/* Primary — the design's lime "Filter" button.

   ⚠️ DEVIATION: the Figma sets this text WHITE on #AFBC21, which measures
   2.09:1. WCAG AA needs 4.5:1 (the label is Inter Bold 18px = 13.5pt, just under
   the 14pt large-text threshold that would relax it to 3:1). Dark text on the
   same lime measures 6.67:1, so the foreground is dark here. The lime, the
   geometry and the weight are all exactly as designed — only the text colour
   differs. Raise it with the designer rather than reverting this quietly. */
.jat-shell .redBtn,
.jat-shell .kLimeBtn,
.jat-shell .greenBtn,
.jat-shell input[type="submit"].redBtn,
.jat-shell .jat-btn-primary {
    background: var(--jat-green);
    color: var(--jat-black);
    border: 1px solid var(--jat-green);
    border-radius: var(--jat-radius);
    font-family: var(--jat-font);
    line-height: 1.2;
    cursor: pointer;
    text-shadow: none;
    box-shadow: none;
    background-image: none;
}
.jat-shell .redBtn:hover,
.jat-shell .kLimeBtn:hover,
.jat-shell .greenBtn:hover,
.jat-shell .jat-btn-primary:hover {
    background: #9caa1c;
    border-color: #9caa1c;
    color: var(--jat-black);
}

/* Dark — the design's "Remove Filter". .blackBtn is the legacy theme's own dark
   button and its #2B2C30 is already the design's black, so it maps here rather
   than being left on the old styling. */
.jat-shell .blueBtn,
.jat-shell .blackBtn,
.jat-shell .jat-btn-dark {
    background: var(--jat-black);
    color: var(--jat-white);
    border: 1px solid var(--jat-black);
    border-radius: var(--jat-radius);
    font-family: var(--jat-font);
    line-height: 1.2;
    cursor: pointer;
    text-shadow: none;
    box-shadow: none;
    background-image: none;
}
.jat-shell .blueBtn:hover,
.jat-shell .blackBtn:hover,
.jat-shell .jat-btn-dark:hover { background: #3a3b40; border-color: #3a3b40; color: var(--jat-white); }

/* Ghost — the design's row-level "View": white, 1px black border, radius 6. */
.jat-shell .greyishBtn,
.jat-shell .btnCancel,
.jat-shell .jat-btn-ghost {
    background: var(--jat-white);
    color: var(--jat-black);
    border: 1px solid var(--jat-black);
    border-radius: var(--jat-radius-sm);
    font-family: var(--jat-font);
    line-height: 1.2;
    cursor: pointer;
    text-shadow: none;
    box-shadow: none;
    background-image: none;
}
.jat-shell .greyishBtn:hover,
.jat-shell .btnCancel:hover,
.jat-shell .jat-btn-ghost:hover { background: #f2f2f3; color: var(--jat-black); }

/* Keyboard focus must stay visible — the legacy theme removes outlines. */
.jat-shell .redBtn:focus-visible,
.jat-shell .blueBtn:focus-visible,
.jat-shell .greyishBtn:focus-visible,
.jat-shell .btnCancel:focus-visible,
.jat-shell .kLimeBtn:focus-visible,
.jat-shell .jat-nav-item:focus-visible,
.jat-shell input:focus-visible,
.jat-shell select:focus-visible,
.jat-shell textarea:focus-visible {
    outline: 2px solid var(--jat-black);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Row action buttons — the Actions column from style guide §08 (376:18515).

   The design's row reads:  [View] │ [mint pencil] [dark trash] │ ⋮
   Geometry from get_design_context: edit/delete 82:2702 / 82:2705 are 30x30,
   padding 8, radius 6; the kebab 82:2310 is px14/py8, radius 4, three 4px dots.

   Every action link in this app carries the legacy class `.btn14` (a white 2px
   -radius box holding a coloured PNG sprite). The markup now also carries
   `.jat-icon-btn` plus an `is-*` variant, added by the sprite-to-glyph pass, so
   the design lives on ONE class and `.btn14` is left to the unconverted pages.

   The app has more row actions than the design shows (activate, deactivate, add,
   clone, export, publish, calendar, view). The design offers exactly two solid
   affordances and one ghost, so the extras take the ghost: the glyph carries the
   meaning, which also beats the old sprites' colour-only encoding of
   approved/unapproved.

   ⚠️ DEVIATION: the Figma puts a WHITE glyph on the mint #76C38B edit chip,
   which measures 2.11:1 against its background. WCAG 1.4.11 asks 3:1 for
   meaningful non-text content, so the glyph is dark here. The delete chip's
   white-on-#6F7074 measures 4.95:1 and is left exactly as designed. */
.jat-shell .jat-icon-btn {
    width: 30px; height: 30px;
    display: inline-grid; place-items: center;
    vertical-align: middle;
    box-sizing: border-box;
    /* main.css pins `.btn14 { padding: 6px 8px }` and overrides it with
       !important inside several breakpoints. Fixed box + centred grid means the
       glyph stays put whichever padding wins. */
    padding: 0;
    border: 1px solid var(--jat-gray);
    border-radius: var(--jat-radius-sm);
    background: var(--jat-white);
    background-image: none;
    color: var(--jat-gray-dark);
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
}
.jat-shell .jat-icon-btn:hover {
    background: #f2f2f3;
    border-color: var(--jat-gray-dark);
    color: var(--jat-black);
    text-decoration: none;
}
/* 30x30 chip with 8px padding leaves a 14px live area, which is also the guide's
   Extra Small icon size. Iconography §06 (367:14864) draws icons on a 24px grid
   with an 18px live area and a 2px stroke, and ships them as an Outline and a
   Fill set — the shapes are Tabler's, so the webfont already matches the design's
   set rather than standing in for it. Row actions use the Fill set in the
   mockups; Tabler has -filled variants for trash/eye/filter but not pencil, so
   these stay outline for consistency. */
.jat-shell .jat-icon-btn .ti { font-size: var(--jat-btn-icon); line-height: 1; }

/* Any sprite left inside one of these — a page the glyph pass has not reached —
   is sized to fit rather than hidden, so it degrades to a small icon in a chip
   instead of an empty box. */
.jat-shell .jat-icon-btn img,
.jat-shell .btn14 img { width: 14px; height: 14px; display: block; }

.jat-shell .jat-icon-btn.is-edit {
    background: var(--jat-mint); border-color: var(--jat-mint); color: var(--jat-black);
}
.jat-shell .jat-icon-btn.is-edit:hover { background: #64b47b; border-color: #64b47b; }

.jat-shell .jat-icon-btn.is-delete {
    background: var(--jat-gray-dark); border-color: var(--jat-gray-dark); color: var(--jat-white);
}
.jat-shell .jat-icon-btn.is-delete:hover { background: #5c5d61; border-color: #5c5d61; color: var(--jat-white); }

.jat-shell .jat-icon-btn:focus-visible {
    outline: 2px solid var(--jat-black);
    outline-offset: 2px;
}

/* A `.btn14` with a text label rather than an icon (one "View" link) stays a
   text control — the fixed square above would clip it. */
.jat-shell .btn14 {
    border: 1px solid var(--jat-gray);
    border-radius: var(--jat-radius-sm);
    background: var(--jat-white);
    background-image: none;
    color: var(--jat-black);
    box-shadow: none;
    text-decoration: none;
}

.jat-shell .jat-kebab {
    background: none; border: 0; cursor: pointer;
    padding: 8px 14px; border-radius: 4px;
    color: var(--jat-gray-dark); font-size: 20px; line-height: 1;
}
.jat-shell .jat-action-sep { display: inline-block; width: 1px; height: 26px; background: var(--jat-gray); vertical-align: middle; }

/* ---------------------------------------------------------------------------
   Tabs — the style guide underlines the active tab in the brand colour.
   Legacy markup is .TabHeading holding .Heading anchors.
   --------------------------------------------------------------------------- */
/* ⚠️ SPECIFICITY NOTE — read before editing these selectors.

   The converted pages still carry <body class="tbl">, so css/tabler-compat.css
   is also styling them. Its rules are written as `body.tbl .TabHeading .Heading`,
   which scores (0,3,1) and therefore OUTRANKS a plain `.jat-shell .TabHeading
   .Heading` at (0,3,0) — the tab rules silently did nothing until this was
   measured in the browser. It additionally sets background and color !important.

   So these selectors deliberately lead with `body` to reach (0,3,1) and win on
   load order, and re-declare background/color as !important to beat the compat
   layer's own. Nothing else here needs !important.

   body.tbl is kept on MOST converted pages, because js/jat-forms.js keys off it to
   un-skin the Uniform radio/checkbox widgets.

   ⚠️ EXCEPTION — edit_client_profile.php deliberately omits `tbl`. On pages that
   lean on Uniform-skinned FILE inputs and radios, that same un-skinning breaks
   them: the logo upload's hidden file input becomes a visible native "Choose
   File" control on top of the styled button, and the Yes/No radios lose their
   controls entirely. That is the identical breakage that forced clientregistration.php
   off body.tbl in July. Without `tbl` the tabler-compat rules simply do not apply,
   so the selectors below still win — they just no longer need to out-rank anything. */
body .jat-shell .TabHeading {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #ececed;
    background: transparent;
    margin-bottom: var(--jat-card-gap);
    padding: 0;
}
body .jat-shell .TabHeading .Heading,
body .jat-shell .TabHeading a.Heading {
    /* main.css carries `.TabHeading .Heading { border: 1px solid #AFBC21
       !important }` from an earlier pass that unified tabs to the brand lime.
       !important can only be answered with !important, so the border is forced
       here. Confirmed by walking the matched CSSOM rules in the browser rather
       than assumed — the other candidates (jat-forms.css, tabler-compat.css)
       set no border priority at all. */
    background: transparent !important;
    color: var(--jat-gray-dark) !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0;
    padding: 14px 20px;
    margin-bottom: 0;
    font-weight: 600;
    font-size: var(--jat-fs-body);
    text-decoration: none;
    box-shadow: none;
}
body .jat-shell .TabHeading .Heading:hover { color: var(--jat-black) !important; }

/* The active tab carries .current_tab in this codebase, not .active/.current —
   worth naming explicitly because styling the wrong one fails silently: every
   tab simply looks inactive and nothing appears broken. */
body .jat-shell .TabHeading .Heading.current_tab,
body .jat-shell .TabHeading .Heading.active,
body .jat-shell .TabHeading .Heading.current {
    color: var(--jat-black) !important;
    background: transparent !important;
    border-color: transparent !important;
    border-bottom: 3px solid var(--jat-green) !important;
}

/* The legacy "Help" pill sat oddly inside the tab row; make it a quiet ghost.
   main.css declares `.help { float: right !important; color: #fff !important }`,
   both of which have to be answered: the float is a no-op inside the flex tab row
   (so the link landed at the LEFT, before the first tab), and the forced white
   left white-on-white text — a blank box where the word "Help" should be. `order`
   plus an auto margin restores the far-right placement the float intended. */
.jat-shell .head_help .help,
.jat-shell a.help {
    background: var(--jat-white);
    color: var(--jat-black) !important;
    border: 1px solid var(--jat-gray);
    border-radius: var(--jat-radius-sm);
    box-shadow: none;
    text-shadow: none;
    float: none !important;
    margin: 0 !important;
}
.jat-shell .TabHeading a.help { order: 99; margin-left: auto !important; align-self: center; }
/* Same treatment inside a card header, where the design puts the header's
   action at the far right of the bar. */
.jat-shell .widget .head a.help { margin-left: auto !important; }

/* ---------------------------------------------------------------------------
   Tables — header rule, generous rows, hairline separators, no zebra.
   --------------------------------------------------------------------------- */
.jat-shell .tableStatic {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    border: 0;
}
.jat-shell .tableStatic thead td,
.jat-shell .tableStatic thead th,
.jat-shell .tableStatic > tbody > tr:first-child > td.Heading {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #ececed;
    padding: 0 12px 16px;
    font-weight: 700;
    font-size: var(--jat-fs-body);
    color: var(--jat-black);
    text-align: left;
    white-space: nowrap;
}
.jat-shell .tableStatic td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #f1f1f2;
    padding: 18px 12px;
    font-size: var(--jat-fs-body);
    color: var(--jat-black);
    vertical-align: middle;
}
/* Sortable headers are anchors inside thead td; the legacy theme colours all
   links olive, which made every header read as a highlighted cell. */
.jat-shell .tableStatic thead a {
    color: var(--jat-black);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.jat-shell .tableStatic thead a:hover { color: var(--jat-black); text-decoration: none; }

/* Replace the sprite sort arrow with a caret drawn in CSS, matching the design's
   caret-sort glyph, so it inherits colour instead of shipping a fixed image. */
.jat-shell .tableStatic thead a .arrow_down,
.jat-shell .tableStatic thead a .arrow_up {
    background: none !important;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--jat-gray-mid);
    display: inline-block;
}
.jat-shell .tableStatic thead a .arrow_up { border-top: 0; border-bottom: 5px solid var(--jat-gray-mid); }

.jat-shell .tableStatic tr:last-child td { border-bottom: 0; }
.jat-shell .tableStatic tr:hover td { background: #fafafa; }
/* Kill the legacy alternating-row shading — the design has none. */
.jat-shell .tableStatic tr.odd td,
.jat-shell .tableStatic tr.even td,
.jat-shell .tableStatic tr.alt td { background: transparent; }

/* Wide tables scroll inside their card rather than pushing the page sideways. */
/* Keep wide tables inside the page instead of widening the document — the widest
   (Manage Client, 11 columns) pushed everything past the viewport and cut off the
   Action column.

   Long unbroken cell values (emails, package names) are what actually forced the
   width, so the fix is to let them wrap. Two heavier approaches were tried first
   and both broke something else, so don't reach for them again:

     `display: block; overflow-x: auto` ON THE TABLE stops the page growing but
     drops the table out of its own layout box — the anonymous inner table then
     shrinks to fit, so every NARROW table stopped filling its card and the row
     rules ended part-way across.

     `overflow-x: auto` ON THE CONTAINER keeps width: 100% working, but a
     container that also holds the pager clips it: per spec, overflow-x: auto with
     overflow-y: visible computes overflow-y to auto, so the box scrolls and
     clips on BOTH axes.

     `overflow-wrap: anywhere` ON THE CELLS does fit the table, because unlike
     break-word it feeds into min-content sizing — but that is also why it breaks
     text that had room to begin with ("NAIC S", "rechell umang @gma il.com").

   So the wrapper is real markup, added around all 26 .tableStatic tables. */
.jat-shell .jat-table-scroll,
.jat-shell .table-responsive { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   Pagination
   --------------------------------------------------------------------------- */
.jat-shell .dataTables_paginate {
    display: flex; justify-content: center; align-items: center; gap: 6px;
    padding: 22px 0 4px; color: var(--jat-gray-dark); float: none;
}
.jat-shell .dataTables_paginate a,
.jat-shell .dataTables_paginate span a {
    min-width: 34px; height: 34px;
    display: inline-grid; place-items: center;
    border: 1px solid transparent; border-radius: var(--jat-radius-sm);
    background: transparent; color: var(--jat-gray-dark);
    font-weight: 500; text-decoration: none; padding: 0 8px;
}
.jat-shell .dataTables_paginate a:hover { background: #f2f2f3; color: var(--jat-black); }
.jat-shell .dataTables_paginate a.current,
.jat-shell .dataTables_paginate .current a,
.jat-shell .dataTables_paginate .active a {
    border-color: var(--jat-black); color: var(--jat-black); font-weight: 700; background: transparent;
}
.jat-shell .dataTables_paginate .disabled a {
    color: var(--jat-gray); cursor: default; pointer-events: none;
}

/* ⚠️ includes/ps_pagination.php emits the page links in REVERSE document order —
   Last, >>, 5, 4, 3, 2, 1, First — because the legacy theme lays them out with
   `.paging_full_numbers li { float: right }`, which flips them back to
   First → Last on screen. A flex row ignores float, so the raw reversal became
   visible the moment the pager was restyled. row-reverse restores the intended
   reading order without touching pagination markup shared by both apps. The same
   reversal puts Per Page and Go, which come FIRST in the DOM, at the end of the
   row — which is also where the legacy layout placed them. */
.jat-shell .dataTables_paginate { flex-direction: row-reverse; flex-wrap: wrap; }
.jat-shell .dataTables_paginate li { list-style: none; float: none; }

.jat-shell .per_page_block,
.jat-shell .go_to_block {
    display: flex; align-items: center; gap: 8px;
    width: auto; margin: 0 0 0 10px;
}
.jat-shell .go_to_block .mainForm { display: flex; align-items: center; gap: 8px; margin: 0; }
.jat-shell .go_to_block .width_40 { width: 62px; }
.jat-shell .go_to_block .go_text { width: 100%; text-align: center; }
.jat-shell .per_page_block .lbl_per_page { margin: 0; white-space: nowrap; }
/* main.css pins the Uniform-skinned page-size select to 40% of a block that no
   longer has a width, so it collapses. */
.jat-shell .paging_full_numbers #uniform-per_page,
.jat-shell .paging_full_numbers #uniform-compare_per_page { width: auto !important; min-width: 86px; }

/* ---------------------------------------------------------------------------
   Form controls — 35px tall, radius 8, 1px Gray border (53:332 relaxed).
   Height is relaxed to a min so long labels and select2 do not clip.
   --------------------------------------------------------------------------- */
.jat-shell input[type="text"],
.jat-shell input[type="email"],
.jat-shell input[type="password"],
.jat-shell input[type="number"],
.jat-shell input[type="search"],
.jat-shell input[type="tel"],
.jat-shell input[type="url"],
.jat-shell input[type="date"],
.jat-shell textarea,
.jat-shell select {
    font-family: var(--jat-font);
    font-size: var(--jat-fs-body);
    color: var(--jat-dark-1);
    background: var(--jat-white);
    border: 1px solid var(--jat-field-border);
    border-radius: var(--jat-radius);
    padding: 5px 14px;
    line-height: var(--jat-lh-body);
    min-height: 35px;
    box-shadow: none;
    box-sizing: border-box;
}
.jat-shell textarea { min-height: 120px; resize: vertical; }

/* States — style guide §05 (367:13013): Default / Focus / Active / Error /
   Inactive. Focus and Active both darken the outline; the visible difference in
   the guide is that Active also has a value in it, which CSS gets for free. */
.jat-shell input[type="text"]:focus,
.jat-shell input[type="email"]:focus,
.jat-shell input[type="password"]:focus,
.jat-shell input[type="number"]:focus,
.jat-shell input[type="search"]:focus,
.jat-shell select:focus,
.jat-shell textarea:focus { border-color: var(--jat-dark-1); }

.jat-shell input:disabled,
.jat-shell select:disabled,
.jat-shell textarea:disabled,
.jat-shell input[readonly],
.jat-shell textarea[readonly] {
    background: var(--jat-light-3);
    color: var(--jat-gray-dark);
    cursor: not-allowed;
}

/* Error. The app marks invalid fields with .formError / .error / aria-invalid
   depending on which validation path ran, so all three are matched. */
.jat-shell input.formError,
.jat-shell input.error,
.jat-shell select.error,
.jat-shell textarea.error,
.jat-shell [aria-invalid="true"] { border-color: var(--jat-danger); }
.jat-shell .formErrorContent,
.jat-shell .jat-field-error { color: var(--jat-danger-text); font-size: var(--jat-fs-small); }

/* Assistive text under a field — Dark 2 in the guide. */
.jat-shell .jat-field-help { color: var(--jat-dark-2); font-size: var(--jat-fs-small); }

.jat-shell input::placeholder,
.jat-shell textarea::placeholder { color: var(--jat-gray-mid); }

.jat-shell .mainForm label,
.jat-shell label {
    font-family: var(--jat-font);
    font-size: var(--jat-fs-body);
    font-weight: 600;
    color: var(--jat-black);
    line-height: var(--jat-lh-heading);
}
.jat-shell label.radioLable { font-weight: 500; }

/* main.css:2148 pins `.mainForm label { width: 10.5% }`, which is ~105px in a
   card and wraps most two-word labels ("Company Name", "Payment Status") onto a
   second line — visible as ragged two-line labels beside single-line fields.
   A min-width lets them sit on one line while the percentage still governs how
   the row divides at wider sizes. Not the design's label-above-field layout,
   which the flat `label, div, label, div` markup cannot express without
   wrappers — see the note in the session summary. */
.jat-shell .mainForm .rowElem > label { min-width: 118px; }
/* Required marker — the guide puts a red asterisk after the label. */
.jat-shell label .required,
.jat-shell .mainForm .req { color: var(--jat-danger-text); }

/* Selection tools — style guide §07 (376:18859). The guide fills a checked box
   and a checked radio with the dark neutral. `accent-color` gets exactly that
   from the native controls, with no markup change and nothing for the legacy
   Uniform skin to fight over. */
.jat-shell input[type="checkbox"],
.jat-shell input[type="radio"] { accent-color: var(--jat-dark-1); }

/* select2 v3 is still in use on several pages; match its skin to the inputs. */
.jat-shell .select2-container .select2-choice {
    height: auto; min-height: 35px;
    line-height: 1.4;
    padding: 5px 14px;
    border: 1px solid var(--jat-field-border);
    border-radius: var(--jat-radius);
    background: var(--jat-white);
    background-image: none;
    box-shadow: none;
    color: var(--jat-black);
    font-size: var(--jat-fs-body);
}
.jat-shell .select2-container .select2-choice .select2-arrow { background: none; border: 0; }
.jat-shell .select2-container .select2-choice .select2-arrow b { background: none; }
.jat-shell .select2-container .select2-choice .select2-arrow::after {
    content: ''; position: absolute; top: 50%; right: 16px;
    width: 9px; height: 9px; margin-top: -6px;
    border-right: 2px solid var(--jat-gray-dark);
    border-bottom: 2px solid var(--jat-gray-dark);
    transform: rotate(45deg);
}

/* Search cards read as a filter panel, matching the design's Filter block. */
.jat-shell fieldset.search { border: 0; padding: 0; margin: 0; }
.jat-shell .widget .head h5.iList,
.jat-shell .widget .head .iList {
    background-image: none;
    padding-left: 0;
}

/* ----------------------------------------------------------------------------
   Action button groups.

   css/main.css:1323 pins `.span3 { width: 22.404% !important }` globally, and
   css/main.css:3496 narrows `.frmUpdateProfile .btns.span3` further at some
   breakpoints. With the design's larger button padding the Save / Upgrade /
   Cancel group no longer fits and wraps mid-label, overlapping itself.

   Letting the group size to its content and flow as a flex row fixes it without
   touching main.css, which is shared with the ~98 unconverted pages.
   ---------------------------------------------------------------------------- */
.jat-shell .mainForm .widget > .rowElem.jat-actions > .span3,
.jat-shell .rowElem > .span3.btns,
.jat-shell .rowElem > .btns.span3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: auto !important;
    max-width: none !important;
}
/* Anchors styled as buttons sit on the text baseline by default. */
.jat-shell a.blueBtn,
.jat-shell a.greyishBtn,
.jat-shell a.button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Legacy vs Bootstrap 5 class collision: .tooltip

   Bootstrap 5 (bundled in assets/tabler/css/tabler.min.css, loaded app-wide by
   views/parts/styles.view.php:24) claims .tooltip for the floating popup
   element itself and keeps it at opacity:0 until JS adds .show.

   JAT has always used class="tooltip" for an INLINE LABEL that tooltipster
   binds to -- e.g. the "[SI]:", "Participation:" and "[JAT CE SI Rolling
   Index]:" captions on the report stat cards. Once Tabler went in on
   2026-08-18 every one of those captions rendered at opacity:0, which read as
   "the statistic titles have gone missing". The values beside them stayed
   visible because they are bare text nodes with no class.

   Bootstrap's own popups are appended to <body> by Popper and always carry
   role="tooltip"; the legacy inline spans never do. Excluding that attribute
   restores the captions without disabling a single real Bootstrap tooltip.
   --------------------------------------------------------------------------- */
.tooltip:not([role="tooltip"]) {
    opacity: 1;
    font-size: 1rem;
}

/* ---------------------------------------------------------------------------
   Report pie charts + their legends

   Scoped to body.tbl on purpose: the pdf_* views render under a bare <body> and
   never load this file, so client-facing PDF exports keep the colours they have
   always had. This changes the on-screen report only.

   Colours: green / blue / orange / red, assigned by answer so the scale reads
   good -> bad left to right. Chosen for near-equal brightness across the four.

   Validated with the dataviz validator (light surface, --pairs all):
     CVD separation   worst pair dE 11.1 (protan), tritan 13.2   PASS
     Normal vision    worst pair dE 22.4                          PASS
     Chroma floor     all four clear it                           PASS
     Lightness band   #FFA000 at L 0.784 sits above the band      FAIL
     Contrast         #00D58A 1.88, #FFA000 1.99 vs surface       WARN
   The orange is the lightest of the four, so it carries slightly more visual
   weight than its share of the data - worth knowing, not worth blocking on.
   The contrast WARN needs relief and has it: every slice is spelled out with
   an exact count in the legend table beside the chart.

   How the colours reach the canvas: pieChart() in js/my_script.js walks every
   <td> and overwrites chartColours[row] from the computed CSS colour, so the
   LAST cell in each row wins. That is the value cell -- which is why the value
   carries the series colour and the label is free to sit in normal ink with a
   swatch. Restyling here rather than in the markup also avoids editing these
   four hex values in ~200 places across 20 files.
   --------------------------------------------------------------------------- */
/* Matched on the id, not the class, because the legends use TWO classes:
   .chartData_other on the summary cards and .chartData on the per-question
   charts in all_questions.view.php. Every legend is emitted with an id
   starting "chartData"; the Employee Type / Employee Experience breakdown
   tables reuse .chartData_other with no id, and the hidden highchart_* tables
   have none either. So this selector catches every real legend and nothing
   else -- class alone missed the per-question charts, and class+[id] leaked
   swatches onto the breakdown tables, where a colour per row means nothing. */
body.tbl table[id^="chartData"] tr:nth-child(1) td { color: #00D58A; }  /* Strongly Agree    */
body.tbl table[id^="chartData"] tr:nth-child(2) td { color: #0D8DF2; }  /* Agree             */
body.tbl table[id^="chartData"] tr:nth-child(3) td { color: #FFA000; }  /* Disagree          */
body.tbl table[id^="chartData"] tr:nth-child(4) td { color: #FF2D4F; }  /* Strongly Disagree */

/* Centre the chart and its legend.

   Two nesting shapes exist and the first attempt only handled one: in
   widget_left_block the canvas is a direct child of .rowElem, but in
   widget_right_block it sits inside .hrir_rvr_block, so a `> canvas` match
   skipped it entirely. Match on a descendant instead.

   Centring is done with text-align + inline-level children rather than flex,
   so the canvas and the legend sit side by side when the card is wide enough
   and stack -- still centred -- when it is not. :has() is progressive; where
   it is unsupported the previous left-aligned layout simply remains. */
body.tbl .rowElem:has(canvas.chart),
body.tbl .hrir_rvr_block:has(canvas.chart) {
    text-align: center;
}
/* Never size the canvas in CSS -- its bitmap is a fixed 200x200 attribute pair,
   so any CSS width would resample and blur it. */
body.tbl canvas.chart {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

body.tbl table[id^="chartData"] {
    /* A block-level table centred with auto margins. inline-table was tried so the
       legend could sit beside the canvas, but in a quarter-width card it overflowed
       and painted over the neighbouring panel. Staying inside the card matters more
       than sitting side by side. */
    display: table;
    margin: 14px auto 0;
    max-width: 100%;
    text-align: left;
    border-collapse: collapse;
    border: 0;
    font-size: 13px;
    line-height: 1.45;
}
body.tbl table[id^="chartData"] tr + tr td { border-top: 1px solid #eceae4; }
body.tbl table[id^="chartData"] td {
    border: 0;
    padding: 7px 2px;
    background: none;
    cursor: pointer;          /* slices are click-to-pull-out; the cells drive it */
}

/* Label cell: normal ink, with the series colour carried by a swatch instead of
   the text. currentColor picks up the row rule above, so the swatch and the
   slice can never drift apart. */
body.tbl table[id^="chartData"] td:first-child {
    color: #52514e;
    padding-right: 22px;
    white-space: nowrap;
}
body.tbl table[id^="chartData"] td:first-child::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    margin-right: 9px;
    border-radius: 3px;
    background: currentColor;
    vertical-align: baseline;
}
/* The swatch must stay the series colour while the text goes to ink, so the
   colour lives on the ::before via a second rule per row. */
body.tbl table[id^="chartData"] tr:nth-child(1) td:first-child::before { background: #00D58A; }
body.tbl table[id^="chartData"] tr:nth-child(2) td:first-child::before { background: #0D8DF2; }
body.tbl table[id^="chartData"] tr:nth-child(3) td:first-child::before { background: #FFA000; }
body.tbl table[id^="chartData"] tr:nth-child(4) td:first-child::before { background: #FF2D4F; }

/* Value cell keeps the series colour -- pieChart() reads it -- and gets figure
   alignment so the counts form a clean column. */
body.tbl table[id^="chartData"] td:last-child {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 2.5em;
}

/* ---------------------------------------------------------------------------
   .ico -- information icon for an otherwise empty <span>

   Used on the [Internal] compare heading, where the span carries only a title
   attribute. Its sibling [External] heading still uses class="tooltip", where
   tooltipster generates the circled "?" itself (icon:'?', iconDesktop:true in
   views/parts/footer.view.php:15). A .ico span gets no such treatment, so the
   glyph is drawn here instead.

   Text rather than an image or icon font: it matches how .tooltipster-icon
   already works, has no font dependency, and stays crisp at any zoom.
   --------------------------------------------------------------------------- */
body.tbl .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--jat-green);   /* primary action / active accent token */
    color: var(--jat-black);        /* 7.2:1 on the green; white would be 2.1:1 */
    font-family: Georgia, "Times New Roman", serif;  /* the serif i reads as an info mark */
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    vertical-align: middle;
    margin: 0 5px;
    cursor: pointer;                /* it opens a dialog, so it is a button */
    user-select: none;
    border: 0;
    transition: filter .15s ease;
}
body.tbl .ico:hover { filter: brightness(.92); }
body.tbl .ico:focus-visible {
    outline: 2px solid var(--jat-black);
    outline-offset: 2px;
}
body.tbl .ico::before { content: "i"; }

/* ---------------------------------------------------------------------------
   "Compare the findings by" option rows

   Each option is a real checkbox with a <label for>, so it always worked -- it
   just did not look like anything. The checkbox sits in a floated .fl div and
   the label carries .width_70 (width:70% !important), which left the two
   miles apart with nothing marking the pair as one control.

   Laid out as a row instead: the whole thing reads as one clickable item, with
   a hover state and a checked state so the current selection is visible at a
   glance. The floats are cancelled rather than removed from the markup, since
   .fl and .width_70 are shared utility classes used all over the app.
   --------------------------------------------------------------------------- */
body.tbl .rvr_cmp_type {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
body.tbl .rvr_cmp_type:hover {
    background: #f6f8ea;
    border-color: #e2e8c4;
}
/* Selected state -- :has() is progressive; without it the row simply stays
   plain and the checkbox alone shows the state, as it does today. */
body.tbl .rvr_cmp_type:has(input[type="checkbox"]:checked) {
    background: #f1f5dd;
    border-color: var(--jat-green);
}

/* Cancel the float utilities inside the row only. */
body.tbl .rvr_cmp_type > .fl {
    float: none !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    padding-top: 1px;
}
body.tbl .rvr_cmp_type label {
    float: none !important;
    width: auto !important;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.35;
    color: var(--jat-black);
    -webkit-user-select: none;
    user-select: none;
}

body.tbl .rvr_cmp_type input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--jat-green);   /* branded tick, no image needed */
    cursor: pointer;
    flex: 0 0 auto;
}

/* The pencil "Edit" link is a sibling of the label, not a child -- a label
   toggles its checkbox on any click inside it, so nesting the link there both
   opened the dialog and flipped the option. Kept on the same row, pushed to
   the end, and given its own hit area. */
body.tbl .rvr_cmp_type .hideicon {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    border-radius: 4px;
}
body.tbl .rvr_cmp_type .hideicon:hover { background: rgba(0,0,0,.07); }
body.tbl .rvr_cmp_type .hideicon img { vertical-align: middle; display: block; }

/* ---------------------------------------------------------------------------
   "Compare the findings by [Internal]" -- branch / department rows

   Each row is a Branch select, a Department select and an add-row button. The
   selects carry .width_40 (float:left; width:40% !important) which does not
   survive in a quarter-width card, and .add-branch-icon is only styled inside
   #dialog-branch-and-department over in register-form.css -- so here it fell
   back to the browser's default button box.

   Laid out as a flex row so the two selects share the space and the button
   sits with them. #afterAppend holds the rows added by the + button, which are
   cloned from this markup and so need the same treatment.
   --------------------------------------------------------------------------- */
body.tbl .branch_dept_div,
body.tbl #afterAppend > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
body.tbl .branch_dept_div > select,
body.tbl .branch_dept_div > .select2-container,
body.tbl #afterAppend select,
body.tbl #afterAppend .select2-container {
    float: none !important;
    width: auto !important;
    flex: 1 1 150px;
    min-width: 0;                /* a flex item will not shrink below content without this */
    margin-right: 0 !important;
}

/* Add- and remove-row buttons. Both were unstyled: .add-branch-icon is only
   defined inside #dialog-branch-and-department in register-form.css, and
   .remove_button (built in ajax.php with the appended row) is defined nowhere
   at all, so both fell back to the browser's default button box.
   Shared geometry here; the colours differ below so add reads as the primary
   action and remove as the quieter, destructive one. */
body.tbl .add-branch-icon,
body.tbl .remove_button {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: filter .12s ease, background .12s ease, border-color .12s ease;
}

/* Add: the primary action, matching the Reset button's filled treatment. */
body.tbl .add-branch-icon {
    border: 1px solid var(--jat-green);
    background: var(--jat-green);
    color: #fff;
}
body.tbl .add-branch-icon:hover { filter: brightness(.92); }

/* Remove: outlined and quiet by default, turning red only on hover so the
   destructive action is signalled at the point of clicking rather than
   shouting from every appended row. */
body.tbl .remove_button {
    border: 1px solid var(--jat-gray);
    background: #fff;
    color: var(--jat-gray-dark);
}
body.tbl .remove_button:hover {
    border-color: #FF2D4F;
    background: #fff5f6;
    color: #FF2D4F;
}

body.tbl .add-branch-icon:focus-visible,
body.tbl .remove_button:focus-visible { outline: 2px solid var(--jat-black); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Dashboard shortcut tiles -- hidden for now.

   The "Setting up your Profile / Surveys / View Survey Reports" tile grid on
   dashboard.php. Hidden here rather than removed from the markup: the grid is
   repeated five times in dashboard.php, once per user type (C, A, AR, R with
   and without Client Admin), across roughly two hundred lines of conditional
   PHP. Cutting that out would be a large, easily-broken change to revert.

   Scoped to body.tbl, so admin/index.php -- which uses the same classes with
   its own copy of the tiles -- is unaffected. Deleting this block brings them
   straight back.
   --------------------------------------------------------------------------- */
/* Matched on .homepage_tabs alone. The first attempt used
   ul.middleNav.homepage_tabs and did not take, while the sibling
   .homepage_heading rule did -- so the class is present but the tag or the
   second class does not hold in the rendered markup. The single class is
   specific enough: it appears only on this grid and on admin/index.php,
   which does not load this stylesheet. */
body.tbl .homepage_heading,
body.tbl .homepage_tabs {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Admin home tiles — one size for every tile

   admin/index.php lays its shortcuts out as .middleNav.homepage_tabs, where
   admin/css/main.css gives the anchor a 140px width but no height, so each
   tile grew to fit its own contents. Measured on the rendered page, that
   produced SEVEN different heights across the five grids:

     75px  Report            single line, 20px icon
     77px  My Profile        single line, 20px icon, taller SVG box
     79px  Surveys           single line, 22px icon
     81px  Country etc.      single line, 24px icon
     97px  Payment History   two lines,   20px icon
     99px  Manage Templates  two lines,   22px icon
    103px  Sub Department    two lines,   24px icon

   Two causes, so two fixes. The label wrap is handled by giving every anchor
   the same min-height and centring its contents, rather than letting the text
   dictate the box. The icons are inline SVGs whose width/height attributes were
   authored at 20, 22 and 24 -- each with a matching viewBox, so constraining
   them to one size scales rather than crops.

   min-height is the tallest tile the page can currently produce (two lines at
   the largest icon), so nothing that fits today starts overflowing. The value
   is a floor, not a fixed height: a longer label still grows its tile instead
   of spilling out of it.

   Scoped to .jat-content so it reaches only pages on the new shell, and it
   outranks .middleNav li a (0,1,2) with (0,2,2) -- no !important needed, and
   this file already loads after admin/css/main.css.

   The client copy of these tiles is hidden by the rule above, so this affects
   the admin home page alone.
   --------------------------------------------------------------------------- */
.jat-content .homepage_tabs {
    /* Replaces the floated li layout: a wrapping flex row gives even gaps and
       reflows on narrow screens without clearfix hacks. */
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.jat-content .homepage_tabs li {
    float: none;
    margin: 0;
}

.jat-content .homepage_tabs li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 104px;
    padding: 12px 8px;
}

/* The span carried the old icon spacing; the flex gap owns it now. */
.jat-content .homepage_tabs li a span {
    padding: 0;
    line-height: 1.3;
}

/* Authored at 20/22/24 with matching viewBoxes -- one size, scaled not cropped. */
.jat-content .homepage_tabs li a svg {
    width: 24px;
    height: 24px;
    flex: none;
}

/* ---------------------------------------------------------------------------
   Printable Getting Started

   The "Printable Instructions" button used to open print_steps.php, a separate
   copy of the guide that had drifted badly from the on-screen one -- 35 images,
   the old menu wording, and no per-user-type gating, so it printed steps that
   did not apply to the reader. Printing the section already on screen means the
   two can never disagree again.

   Everything outside the guide is hidden, every collapsed step is forced open,
   and the accordion's own controls are dropped since they mean nothing on paper.
   --------------------------------------------------------------------------- */
@media print {
    /* App chrome */
    body.tbl .jat-sidebar,
    body.tbl .jat-topbar,
    body.tbl #footer,
    body.tbl .ajax_loader { display: none !important; }

    /* Everything on the dashboard that is not the guide */
    body.tbl .csd-grid,
    body.tbl .homepage_heading,
    body.tbl .homepage_tabs,
    body.tbl #btnPrint,
    body.tbl .btn-align,
    body.tbl .step-nxt-btn { display: none !important; }

    /* Every step open, not just the one the reader happened to be on */
    body.tbl .dashboard-guide .menu_body_que { display: block !important; }

    /* Give the guide the whole page */
    body.tbl,
    body.tbl .jat-shell,
    body.tbl .jat-main,
    body.tbl .jat-content,
    body.tbl .dashboard-guide {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    /* Keep a step and its heading together across a page break. */
    body.tbl .dashboard-guide .head { break-after: avoid; page-break-after: avoid; }
    body.tbl .dashboard-guide .menu_body_que { break-inside: auto; }
    body.tbl .dashboard-guide p { break-inside: avoid; page-break-inside: avoid; }

    /* Links are useless as links on paper, but the label still matters. */
    body.tbl .dashboard-guide a { text-decoration: none !important; color: inherit !important; }
}