/* ==========================================================================
   CRS Egypt Careers — dark theme, theme-surface layer
   --------------------------------------------------------------------------
   The four CRS stylesheets carry their own [data-theme="dark"] token swaps,
   and everything drawn by this redesign follows them. This file covers what
   they cannot reach: the surfaces and text colours that css/style.css states
   in absolute values on its own classes — .ftco-section, .bg-light, the
   footer, and the body copy inside the theme's wrappers.

   Loaded last, so it settles the cascade. Rules are container-scoped rather
   than global: a blanket `p { color: … !important }` would repaint the status
   pills, deadline note and code badges, which each carry a considered dark
   treatment already. Where a rule has to be broad it excludes those by class.

   Nothing here applies in the light theme — every selector is under
   [data-theme="dark"].
   ========================================================================== */

/* ==========================================================================
   1. Page surfaces
   ==========================================================================
   The theme paints sections white or near-white in several places, and only
   some of them carry .bg-light. Left alone they appear as bright bands across
   an otherwise dark page — which is exactly how the first pass failed.
   ========================================================================== */
[data-theme="dark"] body,
[data-theme="dark"] .ftco-section,
[data-theme="dark"] .ftco-section.bg-light,
[data-theme="dark"] section.ftco-section,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-lightgray,
[data-theme="dark"] #colorlib-main,
[data-theme="dark"] .colorlib-main,
[data-theme="dark"] .site-section {
    background-color: #0c0e12 !important;
    color: #eceef1;
}

/* The theme's own containers are transparent, but a few carry a white fill. */
[data-theme="dark"] .container-wrap,
[data-theme="dark"] .block,
[data-theme="dark"] .wrap,
[data-theme="dark"] .content-wrap {
    background-color: transparent !important;
}

/* ==========================================================================
   2. Body copy inside theme wrappers
   ==========================================================================
   Scoped to the panels this redesign owns. :not() keeps the elements that
   already carry a dark treatment — status pills, the deadline note, code
   badges — out of the way.
   ========================================================================== */
[data-theme="dark"] .crs-panel,
[data-theme="dark"] .crs-aside-card,
[data-theme="dark"] .crs-fact,
[data-theme="dark"] .doc,
[data-theme="dark"] .tab-content,
[data-theme="dark"] .tab-pane {
    color: #a8aeb8;
}

[data-theme="dark"] .crs-panel p:not(.crs-callout p):not([class*="crs-deadline"]):not([class*="crs-job-days"]),
[data-theme="dark"] .crs-panel li,
[data-theme="dark"] .crs-panel dd,
[data-theme="dark"] .crs-panel td,
[data-theme="dark"] .crs-panel small,
[data-theme="dark"] .crs-aside-card p,
[data-theme="dark"] .crs-aside-card li,
[data-theme="dark"] .crs-aside-card td,
[data-theme="dark"] .doc p,
[data-theme="dark"] .doc li,
[data-theme="dark"] .doc td {
    color: #a8aeb8 !important;
}

[data-theme="dark"] .crs-panel h1,
[data-theme="dark"] .crs-panel h2,
[data-theme="dark"] .crs-panel h3,
[data-theme="dark"] .crs-panel h4,
[data-theme="dark"] .crs-panel h5,
[data-theme="dark"] .crs-aside-card h1,
[data-theme="dark"] .crs-aside-card h2,
[data-theme="dark"] .crs-aside-card h3,
[data-theme="dark"] .crs-aside-card h4,
[data-theme="dark"] .doc h1,
[data-theme="dark"] .doc h2,
[data-theme="dark"] .doc h3,
[data-theme="dark"] .doc h4,
[data-theme="dark"] .crs-panel-title,
[data-theme="dark"] .crs-fact b,
[data-theme="dark"] .crs-fact strong {
    color: #eceef1 !important;
}

[data-theme="dark"] .crs-panel-note,
[data-theme="dark"] .crs-facts dt,
[data-theme="dark"] .crs-fact dt,
[data-theme="dark"] .crs-aside-label,
[data-theme="dark"] .crs-share-head p {
    color: #878e99 !important;                                  /* 5.0:1 */
}
[data-theme="dark"] .crs-facts dd,
[data-theme="dark"] .crs-fact dd { color: #eceef1 !important; }
[data-theme="dark"] .crs-share-head h3 { color: #eceef1 !important; }
[data-theme="dark"] .crs-aside-date { color: #a8aeb8 !important; }

/* The wide fact block sits on a tinted fill in the light theme. */
[data-theme="dark"] .crs-fact-wide,
[data-theme="dark"] .crs-fact.is-wide {
    background-color: #1b212b !important;
}
[data-theme="dark"] .crs-fact-wide dd { color: #d4d8de !important; }
[data-theme="dark"] .crs-fact-wide dt { color: #949ba6 !important; }
[data-theme="dark"] .crs-facts { background-color: rgba(255,255,255,.09) !important; }
[data-theme="dark"] .crs-fact { background-color: #151920 !important; }

[data-theme="dark"] .crs-panel a:not(.btn),
[data-theme="dark"] .crs-aside-card a:not(.btn),
[data-theme="dark"] .doc a:not(.btn) { color: #7cb6ff !important; }
[data-theme="dark"] .crs-panel a:not(.btn):hover,
[data-theme="dark"] .doc a:not(.btn):hover { color: #a8ccf7 !important; }

/* ==========================================================================
   3. Summary rail
   ========================================================================== */
[data-theme="dark"] .crs-aside-list > div { border-bottom-color: rgba(255,255,255,.09) !important; }
[data-theme="dark"] .crs-aside-list dt { color: #a8aeb8 !important; }
[data-theme="dark"] .crs-aside-list dd { color: #eceef1 !important; }

/* ==========================================================================
   4. Share row
   ==========================================================================
   The brand marks keep their own colours — those are the point of them — but
   the neutral two need to stop being light grey chips on a dark card.
   ========================================================================== */
[data-theme="dark"] .native-share-buttons .share-email,
[data-theme="dark"] .native-share-buttons .share-copy {
    color: #eceef1 !important;
    background-color: #2a323d !important;
}
[data-theme="dark"] .native-share-buttons .share-email:hover,
[data-theme="dark"] .native-share-buttons .share-copy:hover { background-color: #3a4553 !important; }
[data-theme="dark"] .share-copied-note { color: #9ede63 !important; }

/* ==========================================================================
   5. Footer
   ==========================================================================
   The theme states the footer's text colours absolutely, so on a dark ground
   they came out near-black on near-black — the worst thing in the screenshot.
   ========================================================================== */
[data-theme="dark"] .ftco-footer,
[data-theme="dark"] footer.ftco-footer,
[data-theme="dark"] .ftco-footer.ftco-bg-dark,
[data-theme="dark"] footer {
    background-color: #0e1116 !important;
    color: #a8aeb8 !important;
}
[data-theme="dark"] .ftco-footer p,
[data-theme="dark"] .ftco-footer li,
[data-theme="dark"] .ftco-footer span,
[data-theme="dark"] .ftco-footer .ftco-footer-widget p,
[data-theme="dark"] footer p,
[data-theme="dark"] footer li { color: #a8aeb8 !important; }   /* 7.4:1 on #0e1116 */

[data-theme="dark"] .ftco-footer h1,
[data-theme="dark"] .ftco-footer h2,
[data-theme="dark"] .ftco-footer h3,
[data-theme="dark"] .ftco-footer h4,
[data-theme="dark"] .ftco-footer .ftco-heading-2,
[data-theme="dark"] footer h2 { color: #eceef1 !important; }   /* 15.4:1 */

[data-theme="dark"] .ftco-footer a,
[data-theme="dark"] footer a { color: #9db8dd !important; }    /* 8.1:1 */
[data-theme="dark"] .ftco-footer a:hover,
[data-theme="dark"] footer a:hover { color: #cde0f9 !important; }
[data-theme="dark"] .ftco-footer .icon,
[data-theme="dark"] .ftco-footer svg { color: #7cb6ff !important; }
[data-theme="dark"] .ftco-footer hr,
[data-theme="dark"] footer hr { border-color: rgba(255,255,255,.12) !important; }

/* ==========================================================================
   6. Consent dialog
   ==========================================================================
   SweetAlert draws the shell; the redesign styles it through .crs-consent.
   Its body copy is set by the theme, one level deeper than the container.
   ========================================================================== */
[data-theme="dark"] .swal2-container { background-color: rgba(6,8,12,.72) !important; }
[data-theme="dark"] .swal2-popup,
[data-theme="dark"] .crs-consent { background-color: #151920 !important; }
[data-theme="dark"] .crs-consent .crs-consent-body,
[data-theme="dark"] .crs-consent .crs-consent-body p,
[data-theme="dark"] .crs-consent .crs-consent-body li,
[data-theme="dark"] .crs-consent .crs-consent-body span,
[data-theme="dark"] .crs-consent .crs-consent-body div {
    color: #c3c9d2 !important;                                  /* 11.4:1 */
    background-color: transparent !important;
}
[data-theme="dark"] .crs-consent .crs-consent-body strong,
[data-theme="dark"] .crs-consent .crs-consent-body b { color: #eceef1 !important; }
[data-theme="dark"] .crs-consent .swal2-title,
[data-theme="dark"] .crs-consent .crs-consent-title { color: #eceef1 !important; }
[data-theme="dark"] .crs-consent .crs-consent-title span,
[data-theme="dark"] .crs-consent .crs-consent-title small { color: #a8aeb8 !important; }
/* The fade at the foot of the scroll area has to fade to the dark panel, or
   it reads as a grey smear. */
[data-theme="dark"] .crs-consent .crs-consent-body::after,
[data-theme="dark"] .crs-consent-scrim {
    background: linear-gradient(180deg, rgba(21,25,32,0) 0%, #151920 100%) !important;
}

/* ==========================================================================
   7. SweetAlert elsewhere (validation and submission messages)
   ========================================================================== */
[data-theme="dark"] .swal2-popup .swal2-title { color: #eceef1 !important; }
[data-theme="dark"] .swal2-popup .swal2-html-container,
[data-theme="dark"] .swal2-popup #swal2-content { color: #c3c9d2 !important; }
[data-theme="dark"] .swal2-popup .swal2-confirm {
    color: #0e1116 !important;
    background-color: #7cb6ff !important;
}
[data-theme="dark"] .swal2-popup .swal2-cancel {
    color: #eceef1 !important;
    background-color: #2a323d !important;
}

/* ==========================================================================
   8. Tables and dividers the theme leaves light
   ========================================================================== */
[data-theme="dark"] table:not(.crs-matrix) { color: #a8aeb8; }
[data-theme="dark"] table:not(.crs-matrix) th,
[data-theme="dark"] table:not(.crs-matrix) td { border-color: rgba(255,255,255,.09) !important; }
[data-theme="dark"] hr { border-color: rgba(255,255,255,.10) !important; }

/* ==========================================================================
   9. Form controls the theme styles directly
   ========================================================================== */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    color: #eceef1;
    background-color: #1c212a;
    border-color: rgba(255,255,255,.22);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #878e99; }
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: #eceef1;
    -webkit-box-shadow: 0 0 0 1000px #1c212a inset;
}
/* Native widgets — date pickers, scrollbars, spinners — follow this. */
[data-theme="dark"] { color-scheme: dark; }