/* ==========================================================================
   CRS Egypt — job page UI
   --------------------------------------------------------------------------
   Two components: the data-protection consent dialog and the share buttons.

   No icon font. The share icons were `<i class="fa fa-facebook">` from Font
   Awesome 4.7, loaded from a vendor/ folder — if that folder is missing, or the
   font file is not served, the markup renders as six empty coloured squares
   with no clue why. They are inline SVG now, so there is nothing left to fail.

   Brand colours are CRS's own (25MK-1421830). Contrast is stated where it
   matters.
   ========================================================================== */

:root {
    --crs-blue:   #00468b;   /* CRS Blue    9.34:1 on white */
    --crs-bold:   #0068d2;   /* Bold Blue   5.37:1 */
    --crs-ink:    #14161a;
    --crs-ink-2:  #4a5260;
    --crs-ink-3:  #6b7280;   /* 4.83:1 — the lightest used for text */
    --crs-line:   #e5e8ec;
    --crs-red:    #da291c;   /* Emergency Red 4.87:1 */
}

/* ==========================================================================
   Consent dialog
   ==========================================================================
   The Data Protection notice is the first thing anyone sees on this page, and
   it is a wall of legal text. Three things make that readable:

     1. A header that says what is being asked and why, not just a title. The
        body is dense enough; the reader should not have to parse it to learn
        what the two buttons do.
     2. The body scrolls, the dialog does not - and it is marked as scrollable
        with a fade at the bottom edge, so nobody stops reading at the fold
        believing they have reached the end.
     3. Neither answer is coloured as a danger. Agreeing is the primary action
        because it is what most people came to do; declining is a plain
        outline button. Red-versus-blue on a consent decision nudges the
        reader toward agreeing, which is the one thing a consent dialog must
        not do.

   The !important flags are not decoration: SweetAlert2 ships its own rules
   for every one of these elements and wins without them.
   ========================================================================== */

.crs-consent {
    width: 100% !important;
    max-width: 46rem !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 32px 80px -24px rgba(6, 24, 47, .45) !important;
    text-align: left !important;
    overflow: hidden !important;
}

/* --- Header -------------------------------------------------------------- */
.crs-consent .crs-consent-title {
    position: relative;
    display: block !important;
    padding: 24px 30px 20px 82px !important;
    margin: 0 !important;
    font-size: 1.1875rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--crs-ink) !important;
    text-align: left !important;
    background: #f7f9fc;
    border-bottom: 1px solid var(--crs-line);
}
/* The shield mark, drawn rather than loaded - the icon font this site used
   is not served. */
.crs-consent .crs-consent-title::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 24px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e6edf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300468b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 2.6v5.6c0 4.3-3 8-7.5 9.2-4.5-1.2-7.5-4.9-7.5-9.2V5.6z'/%3E%3Cpath d='m9 11.8 2.2 2.2L15.5 9.7'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
/* A second line under the title, so the header states the ask. */
.crs-consent .crs-consent-title::after {
    content: "Data Protection Act 1998 \A Please read before you apply.";
    display: block;
    margin-top: 4px;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--crs-ink-3);
    white-space: pre-line;
}

/* --- Body ---------------------------------------------------------------- */
.crs-consent .crs-consent-body {
    position: relative;
    max-height: min(50vh, 28rem);
    overflow-y: auto;
    padding: 22px 30px 26px !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: .9375rem !important;
    line-height: 1.7 !important;
    color: var(--crs-ink-2) !important;
    overscroll-behavior: contain;
    /* A fade at the bottom edge: the notice is long, and a hard cut at the
       fold reads as the end of it. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
/* The site's own .swal-content-body draws a border and its own scrollbar,
   which produced a box inside a box. */
.crs-consent-body .swal-content-body,
.crs-consent-body p.swal-content-body {
    border: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: none !important;
    text-align: left;
}
.crs-consent-body p { margin: 0 0 1.15em; }
.crs-consent-body p:last-child { margin-bottom: 0; }

.crs-consent-body .swal-content-heading,
.crs-consent-body .swal-content-heading-nodent {
    margin: 1.6em 0 .7em !important;
    padding-top: 1.2em;
    font-size: .75rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--crs-blue) !important;
    text-indent: 0 !important;
    border-top: 1px solid var(--crs-line);
}

/* A visible scrollbar is part of the message here. */
.crs-consent-body::-webkit-scrollbar { width: 10px; }
.crs-consent-body::-webkit-scrollbar-track { background: #f2f4f7; border-radius: 10px; }
.crs-consent-body::-webkit-scrollbar-thumb { background: #c7cdd6; border: 3px solid #f2f4f7; border-radius: 10px; }
.crs-consent-body::-webkit-scrollbar-thumb:hover { background: #aeb6c2; }

/* --- Actions ------------------------------------------------------------- */
.crs-consent .crs-consent-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
    gap: 12px;
    padding: 18px 30px 22px !important;
    margin: 0 !important;
    background: #f7f9fc;
    border-top: 1px solid var(--crs-line);
}

.crs-consent .crs-consent-agree,
.crs-consent .crs-consent-reject {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px !important;
    font: inherit !important;
    font-size: .9375rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap;
    border-radius: 10px !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

/* White on CRS Blue — 9.34:1 */
.crs-consent .crs-consent-agree {
    color: #fff !important;
    background: var(--crs-blue) !important;
    background-image: none !important;
    border: 1px solid var(--crs-blue) !important;
}
.crs-consent .crs-consent-agree:hover {
    background: #013a74 !important;
    border-color: #013a74 !important;
}

/* Declining is an outline button, not a red one.
     · text  #14161a on white  18.11:1
     · border #98a2b3 on white  3.04:1, clearing the 3:1 for a non-text control
   Colouring this red framed a legitimate choice as a danger. */
.crs-consent .crs-consent-reject {
    color: #14161a !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #98a2b3 !important;
}
.crs-consent .crs-consent-reject:hover {
    color: #14161a !important;
    background: #eef1f5 !important;
    border-color: #6b7280 !important;
}

.crs-consent .crs-consent-agree:focus-visible,
.crs-consent .crs-consent-reject:focus-visible {
    outline: 3px solid rgba(0,104,210,.5) !important;
    outline-offset: 2px;
}

/* The backdrop: deep enough that the dialog is clearly the only thing live. */
.swal2-container.swal2-backdrop-show,
body.swal2-shown > .swal2-container {
    background: rgba(6, 24, 47, .62) !important;
}

@media (max-width: 40rem) {
    .crs-consent { border-radius: 14px !important; }
    .crs-consent .crs-consent-title { padding: 18px 20px 16px 64px !important; font-size: 1.0625rem !important; }
    .crs-consent .crs-consent-title::before { left: 20px; top: 18px; width: 32px; height: 32px; background-size: 17px 17px; }
    .crs-consent .crs-consent-body { padding: 18px 20px 22px !important; max-height: 46vh; }
    .crs-consent .crs-consent-actions { flex-direction: column-reverse; padding: 16px 20px 20px !important; }
    .crs-consent .crs-consent-agree,
    .crs-consent .crs-consent-reject { width: 100%; }
}

/* ==========================================================================
   Share buttons
   ========================================================================== */
.native-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;                 /* WCAG 2.1 AA target size */
    height: 44px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: transform .12s ease, filter .12s ease;
}
.share-btn svg { width: 20px; height: 20px; display: block; }
.share-btn:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; text-decoration: none; }
.share-btn:active { transform: none; }
.share-btn:focus-visible { outline: 3px solid rgba(0,104,210,.45); outline-offset: 2px; }

.share-facebook { background: #1877f2; }
.share-twitter  { background: #14171a; }   /* X, not the old bird blue */
.share-linkedin { background: #0a66c2; }
.share-whatsapp { background: #25d366; }
.share-email    { background: #5a6069; }
.share-copy     { background: var(--crs-blue); }

/* Confirmation after the link is copied — replaces an alert(). */
.share-copy.is-copied { background: #1a7f4b; }
.share-copied-note {
    display: inline-block; margin-left: 10px; align-self: center;
    font-size: .8125rem; font-weight: 600; color: #1a7f4b;
    opacity: 0; transition: opacity .15s ease;
}
.share-copied-note.is-visible { opacity: 1; }

/* The clipboard fallback textarea. Positioned off-screen rather than styled
   inline, because style-src-attr is 'none'. */
.share-offscreen {
    position: fixed; top: -1000px; left: -1000px;
    width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* ==========================================================================
   Date fields
   ========================================================================== */
.flatpickr-calendar {
    font-family: inherit;
    border-radius: 10px;
    box-shadow: 0 12px 32px -12px rgba(20,22,26,.3);
    z-index: 2000;                 /* above the consent dialog backdrop */
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--crs-blue);
    border-color: var(--crs-blue);
}
.flatpickr-day:hover { background: #eaf1fa; }
.flatpickr-day.today { border-color: var(--crs-bold); }
.flatpickr-months .flatpickr-month,
.flatpickr-weekday { color: var(--crs-ink); fill: var(--crs-ink); }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: var(--crs-ink); }

/* ==========================================================================
   Dropdowns
   ==========================================================================
   The chevron is a data: URI, so it costs no request and needs no icon font —
   which is what broke the share buttons and the date pickers on this site.
   ========================================================================== */
select.crs-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    cursor: pointer;
}
select.crs-select::-ms-expand { display: none; }
select.crs-select:focus {
    border-color: var(--crs-bold);
    box-shadow: 0 0 0 3px rgba(0,104,210,.18);
    outline: none;
}

/* ==========================================================================
   Language skills matrix
   ==========================================================================
   Still a table - that is the correct structure for one choice per row across
   shared columns, and it is what a screen reader needs to announce "English
   (Reading), Medium".

   What changed is everything about how it reads. It was five bare circles per
   row on a flat grid: no indication that the columns are a scale rather than
   five unrelated options, no visible relationship between the two English rows
   and the two Arabic rows, and a hit target the size of the circle. Now:

     · the two languages are visibly grouped, with the language named once and
       the skill beneath it;
     · the header states the scale and runs left-to-right from none to fluent,
       reinforced by the dots growing across the row;
     · the whole cell is the target, and the chosen cell is tinted so a
       completed row can be read at a glance rather than hunted;
     · the first column stays put when the table scrolls on a phone.
   ========================================================================== */
.crs-matrix-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--crs-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20,22,26,.05);
    overscroll-behavior-x: contain;
}
.crs-matrix {
    width: 100%;
    min-width: 34rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .875rem;
    margin: 0;
}

/* --- Header -------------------------------------------------------------- */
.crs-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 13px 10px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--crs-ink-3);
    text-align: center;
    white-space: nowrap;
    background: #f7f9fc;
    border-bottom: 1px solid var(--crs-line);
}
.crs-matrix thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    text-align: left;
    width: 34%;
    min-width: 10.5rem;
    padding-left: 18px;
    background: #f7f9fc;
}
/* The columns are a scale, not five unrelated options. Saying so costs one
   line and saves the reader working it out from the labels. */
/* Literal characters. An escape swallows the space that terminates it, and
   "\A0l"-style padding only works while the next character is not a hex digit. */
.crs-matrix thead th:nth-child(2)::after { content: "← least"; }
.crs-matrix thead th:last-child::after   { content: "most →"; }
.crs-matrix thead th:nth-child(2)::after,
.crs-matrix thead th:last-child::after {
    display: block;
    margin-top: 3px;
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
    color: #98a2b3;
}

/* --- Row label ----------------------------------------------------------- */
.crs-matrix tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    padding: 10px 14px 10px 18px;
    text-align: left;
    vertical-align: middle;
    background: #fff;
    border-bottom: 1px solid var(--crs-line);
}
.crs-matrix-lang {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--crs-ink);
}
.crs-matrix-skill {
    display: block;
    margin-top: 1px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--crs-ink-3);
}

/* The two rows of one language read as a pair; the next language starts a new
   block rather than continuing an undifferentiated list of four. */
.crs-matrix tbody tr.is-group-start th,
.crs-matrix tbody tr.is-group-start td { border-top: 1px solid var(--crs-line); }
.crs-matrix tbody tr.is-group-start:first-child th,
.crs-matrix tbody tr.is-group-start:first-child td { border-top: 0; }
/* The language block is marked by the rule above it and by naming the
   language once - a coloured spine drawn with an absolutely positioned
   pseudo-element on a sticky cell renders unpredictably once the table
   scrolls sideways, so it is not worth the trick. */

.crs-matrix tbody tr:last-child th,
.crs-matrix tbody tr:last-child td { border-bottom: 0; }

.crs-matrix tbody tr:hover th,
.crs-matrix tbody tr:hover td { background: #f7f9fc; }

.crs-matrix td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
    background: #fff;
    border-bottom: 1px solid var(--crs-line);
    transition: background-color .12s ease;
}

/* The input stays focusable, so arrow keys still move through the group. */
.crs-matrix-input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* The label fills the cell, so the target is the whole box. */
.crs-matrix-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    margin: 0;
    cursor: pointer;
}
.crs-matrix-dot::before {
    content: "";
    width: 22px;
    height: 22px;
    border: 2px solid #c3cad4;
    border-radius: 50%;
    background: #fff;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.crs-matrix-dot:hover::before { border-color: var(--crs-bold); transform: scale(1.06); }

/* The dots grow left to right, so the scale is legible before any label is
   read - and a filled cell is visible from the far side of the row. */
.crs-matrix td:nth-child(2) .crs-matrix-dot::before { width: 18px; height: 18px; }
.crs-matrix td:nth-child(3) .crs-matrix-dot::before { width: 19px; height: 19px; }
.crs-matrix td:nth-child(4) .crs-matrix-dot::before { width: 20px; height: 20px; }
.crs-matrix td:nth-child(5) .crs-matrix-dot::before { width: 21px; height: 21px; }
.crs-matrix td:nth-child(6) .crs-matrix-dot::before { width: 22px; height: 22px; }

/* --- Colour ---------------------------------------------------------------
   Five columns are a progression, so the fill progresses with them. The wash
   is deliberately faint - it has to read as a direction, not compete with the
   chosen cell, which is the only thing in the table that should carry weight.
   -------------------------------------------------------------------------- */
.crs-matrix td:nth-child(2) { background: #fcfcfd; }
.crs-matrix td:nth-child(3) { background: #f6f9fd; }
.crs-matrix td:nth-child(4) { background: #f0f5fc; }
.crs-matrix td:nth-child(5) { background: #e9f1fb; }
.crs-matrix td:nth-child(6) { background: #e2ecf9; }

/* The header carries the same progression, one step stronger. */
.crs-matrix thead th:nth-child(2) { background: #f5f7fa; }
.crs-matrix thead th:nth-child(3) { background: #eff4fa; }
.crs-matrix thead th:nth-child(4) { background: #e8f0f9; }
.crs-matrix thead th:nth-child(5) { background: #e0eaf7; }
.crs-matrix thead th:nth-child(6) { background: #d7e4f5; }
.crs-matrix thead th:nth-child(6) { color: var(--crs-blue); }

/* Dots pick up the same ramp, so an empty row still shows its direction. */
.crs-matrix td:nth-child(4) .crs-matrix-dot::before { border-color: #b4c2d4; }
.crs-matrix td:nth-child(5) .crs-matrix-dot::before { border-color: #a3b6cf; }
.crs-matrix td:nth-child(6) .crs-matrix-dot::before { border-color: #8fa8c9; }

.crs-matrix tbody tr:hover td:nth-child(2) { background: #f4f6f9; }
.crs-matrix tbody tr:hover td:nth-child(3) { background: #eef3f9; }
.crs-matrix tbody tr:hover td:nth-child(4) { background: #e8eff8; }
.crs-matrix tbody tr:hover td:nth-child(5) { background: #e1ebf7; }
.crs-matrix tbody tr:hover td:nth-child(6) { background: #dae6f5; }

.crs-matrix-input:checked + .crs-matrix-dot::before {
    border-color: var(--crs-blue);
    background: var(--crs-blue);
    box-shadow: inset 0 0 0 4px #fff;
}
/* The chosen cell, not just the dot. Written after the column wash and with
   matching specificity, so it wins whichever column it lands in. */
.crs-matrix td:nth-child(n):has(.crs-matrix-input:checked) {
    background: #cfe0f5;
    box-shadow: inset 0 0 0 1px rgba(0,70,139,.18);
}
.crs-matrix tbody tr:hover td:nth-child(n):has(.crs-matrix-input:checked) { background: #c4d9f2; }

.crs-matrix-input:focus-visible + .crs-matrix-dot::before {
    outline: 3px solid rgba(0,104,210,.45);
    outline-offset: 3px;
}

/* A row still waiting for an answer, once the form has been submitted once. */
.form-group.has-error .crs-matrix-wrap { border-color: var(--crs-red); }

@media (max-width: 40rem) {
    .crs-matrix { min-width: 30rem; font-size: .8125rem; }
    .crs-matrix thead th { padding: 10px 6px; font-size: .625rem; letter-spacing: .04em; }
    .crs-matrix thead th:first-child { min-width: 8.5rem; padding-left: 14px; }
    .crs-matrix tbody th { padding: 8px 10px 8px 14px; }
    .crs-matrix-lang { font-size: .8125rem; }
    .crs-matrix-dot { min-height: 50px; }
}

/* ==========================================================================
   Dropdowns — styling select2, which the site already loads
   ==========================================================================
   NOT replacing it. An earlier revision of this file shipped a second combobox
   implementation that converted the same <select> elements select2 had already
   taken over. Two libraries owning one control is what broke the form layout.
   ========================================================================== */
.select2-container--default .select2-selection--single {
    height: 48px;
    padding: 0 6px;
    background: #fff;
    border: 1px solid #cfd4dc;
    border-radius: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 46px;
    padding-left: 8px;
    color: var(--crs-ink);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--crs-ink-3);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px; right: 10px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--crs-bold);
    box-shadow: 0 0 0 3px rgba(0,104,210,.18);
}
.select2-dropdown {
    border-color: #cfd4dc;
    border-radius: 8px;
    box-shadow: 0 12px 32px -12px rgba(20,22,26,.28);
    overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 10px 12px;
    border: 1px solid #cfd4dc;
    border-radius: 6px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--crs-blue);     /* white on CRS Blue — 9.34:1 */
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background: #eaf1fa;
    color: var(--crs-blue);
    font-weight: 700;
}
.select2-results__option { padding: 10px 12px; }

/* Used by the matrix labels, which carry their text for screen readers only. */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   Dark theme — token swap only
   ========================================================================== */
[data-theme="dark"] {
    --crs-blue:   #4d9bff;
    --crs-bold:   #7cb6ff;
    --crs-ink:    #eceef1;
    --crs-ink-2:  #a8aeb8;
    --crs-ink-3:  #878e99;
    --crs-line:   rgba(255,255,255,.10);
    --crs-red:    #ff7c70;
}

/* --- Language matrix ----------------------------------------------------- */
[data-theme="dark"] .crs-matrix-wrap { background: #151920; border-color: var(--crs-line); }
[data-theme="dark"] .crs-matrix thead th,
[data-theme="dark"] .crs-matrix thead th:first-child { background: #1b212b; color: var(--crs-ink-3); }
[data-theme="dark"] .crs-matrix tbody th { background: #151920; }
[data-theme="dark"] .crs-matrix-lang { color: var(--crs-ink); }

/* The column ramp, rebuilt for a dark ground rather than inverted. */
[data-theme="dark"] .crs-matrix td:nth-child(2) { background: #151920; }
[data-theme="dark"] .crs-matrix td:nth-child(3) { background: #171d26; }
[data-theme="dark"] .crs-matrix td:nth-child(4) { background: #19212c; }
[data-theme="dark"] .crs-matrix td:nth-child(5) { background: #1b2533; }
[data-theme="dark"] .crs-matrix td:nth-child(6) { background: #1d2939; }
[data-theme="dark"] .crs-matrix thead th:nth-child(2) { background: #191f28; }
[data-theme="dark"] .crs-matrix thead th:nth-child(3) { background: #1b222c; }
[data-theme="dark"] .crs-matrix thead th:nth-child(4) { background: #1d2634; }
[data-theme="dark"] .crs-matrix thead th:nth-child(5) { background: #1f2a3b; }
[data-theme="dark"] .crs-matrix thead th:nth-child(6) { background: #223045; color: var(--crs-bold); }
[data-theme="dark"] .crs-matrix td:nth-child(n):has(.crs-matrix-input:checked) {
    background: #24405f;
    box-shadow: inset 0 0 0 1px rgba(124,182,255,.36);
}
[data-theme="dark"] .crs-matrix tbody tr:hover th,
[data-theme="dark"] .crs-matrix tbody tr:hover td { background: #1b212b; }
[data-theme="dark"] .crs-matrix tbody tr:hover td:nth-child(n):has(.crs-matrix-input:checked) { background: #2a4a6d; }
[data-theme="dark"] .crs-matrix-dot::before { background: #12161d; border-color: #48525f; }
[data-theme="dark"] .crs-matrix-input:checked + .crs-matrix-dot::before {
    background: var(--crs-bold);
    border-color: var(--crs-bold);
    box-shadow: inset 0 0 0 4px #12161d;
}

/* --- Consent dialog ------------------------------------------------------ */
[data-theme="dark"] .crs-consent { background: #151920 !important; }
[data-theme="dark"] .crs-consent .crs-consent-title { color: var(--crs-ink) !important; background: #1b212b; border-bottom-color: var(--crs-line); }
[data-theme="dark"] .crs-consent .crs-consent-title::before { background-color: rgba(77,155,255,.16); }
[data-theme="dark"] .crs-consent .crs-consent-body { color: var(--crs-ink-2) !important; border-bottom-color: var(--crs-line); }
[data-theme="dark"] .crs-consent-body .swal-content-heading,
[data-theme="dark"] .crs-consent-body .swal-content-heading-nodent { color: var(--crs-bold) !important; border-top-color: var(--crs-line); }
[data-theme="dark"] .crs-consent-body::-webkit-scrollbar-track { background: #1b212b; }
[data-theme="dark"] .crs-consent-body::-webkit-scrollbar-thumb { background: #3c4553; border-color: #1b212b; }
[data-theme="dark"] .crs-consent .crs-consent-actions { background: #1b212b; border-top-color: var(--crs-line); }
[data-theme="dark"] .crs-consent .crs-consent-agree { color: #0e1116 !important; background: var(--crs-bold) !important; border-color: var(--crs-bold) !important; }
[data-theme="dark"] .crs-consent .crs-consent-agree:hover { background: #a8ccf7 !important; border-color: #a8ccf7 !important; }
[data-theme="dark"] .crs-consent .crs-consent-reject { color: var(--crs-ink) !important; background: #1c212a !important; border-color: #48525f !important; }
[data-theme="dark"] .crs-consent .crs-consent-reject:hover { color: var(--crs-ink) !important; background: #262d38 !important; border-color: #6b7583 !important; }

/* --- Date picker --------------------------------------------------------- */
[data-theme="dark"] .flatpickr-calendar { background: #1c212a; color: var(--crs-ink); box-shadow: 0 12px 32px -12px rgba(0,0,0,.8); }
[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-weekday { color: var(--crs-ink); fill: var(--crs-ink); }
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month input.cur-year { color: var(--crs-ink); background: #1c212a; }
[data-theme="dark"] .flatpickr-day { color: var(--crs-ink-2); }
[data-theme="dark"] .flatpickr-day:hover { background: #262d38; }
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.selected:hover { color: #0e1116; background: var(--crs-bold); border-color: var(--crs-bold); }
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay { color: #5a6472; }