/* ============================================================================
   Cell C design system
   ----------------------------------------------------------------------------
   The palette, typography and surface rules Cell C supplied for the RICA
   experience (Design/Design Recommendation.pdf, Design/Logo.svg,
   Design/CellCSans_20240510.zip), expressed as tokens and mapped onto the
   variables the rest of the app already reads.

   Load order matters: this file must come AFTER bs-united.min.css and the
   DevExpress theme in index.html. The remap below deliberately relies on
   source order to beat their equal-specificity declarations - moving this
   link earlier silently reverts the whole theme.

   Where a value is ours rather than Cell C's it is marked (NOT IN PACK). Those
   are the ones to replace once Cell C answer:
     - status colours (success / warning / danger)
   ============================================================================ */


/* ---------------------------------------------------------------- typefaces */
/* Cell C Sans - headings and figures. Four weights from the supplied pack,
   rebuilt with their CFF hinting stripped: the vendor's hint data is
   malformed and Windows' DirectWrite (Chrome/Edge) cuts diagonal slits
   through the strokes when it applies it. Outlines, kerning and glyph set
   are unchanged. Regenerate with Design/rebuild-cellc-webfonts.py. */
@font-face {
    font-family: "Cell C Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/CellCSans-Regular-unhinted.woff2) format("woff2");
}
@font-face {
    font-family: "Cell C Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/CellCSans-Medium-unhinted.woff2) format("woff2");
}
@font-face {
    font-family: "Cell C Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/CellCSans-Bold-unhinted.woff2) format("woff2");
}
@font-face {
    font-family: "Cell C Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/CellCSans-ExtraBold-unhinted.woff2) format("woff2");
}

/* Poppins - body copy. Named in the pack but not supplied; these are the
   Google Fonts latin + latin-ext subsets, self-hosted so the app keeps
   working on a store connection that cannot reach fonts.gstatic.com. */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/Poppins-300-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/Poppins-300-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/Poppins-400-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/Poppins-400-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/Poppins-500-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/Poppins-500-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/Poppins-600-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/Poppins-600-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ------------------------------------------------------------------- tokens */
:root {
    /* base */
    --cc-bg: #090909;
    --cc-white: #FDFDFD;
    --cc-orange: #EA5B0C;
    --cc-orange-rgb: 234, 91, 12;

    /* greys, named for what they are used for rather than by pack number */
    --cc-chrome: #0F0F0F;   /* Grey 1 - topbar, rail, footer */
    --cc-card: #141414;     /* Grey 3 - panels and cards */
    --cc-field: #1E1E1E;    /* Grey 2 - inputs and nested surfaces */
    --cc-mute: #B8B8B8;     /* Grey 4 */
    --cc-hairline: #292929; /* Grey 5 - also Border 1 */

    /* text */
    --cc-text: #FFFFFF;
    --cc-text-2: #A3A3A3;
    --cc-text-3: #6F6F6F;   /* (NOT IN PACK) disabled / not-yet-reached */

    /* borders */
    --cc-border-1: #292929;
    --cc-border-2: #525252;
    --cc-border-3: #424242;
    --cc-border-4: #D6D6D6;
    /* The edge that tells a user a control is theirs to fill in. Kept apart
       from the border scale above because it is not a decorative hairline -
       WCAG 1.4.11 wants 3:1 against the surface behind it, and --cc-border-1
       manages 1.27:1 on a card. This clears 4.2:1 on both the card and the
       page without going white, which would read as an error state here. */
    --cc-border-field: #7A7A7A;

    /* status. (NOT IN PACK) - the pack defines one accent and greys only, and
       a sale-capture tool has to show checks passing, counters moving and
       lines that cannot be upgraded. Replace with Cell C's own once supplied. */
    --cc-success: #5BBF7B;
    --cc-success-rgb: 91, 191, 123;
    --cc-warning: #E0A526;
    --cc-warning-rgb: 224, 165, 38;
    --cc-danger: #E5645C;
    --cc-danger-rgb: 229, 100, 92;

    /* type */
    --cc-font-display: "Cell C Sans", "Segoe UI", Roboto, Arial, sans-serif;
    --cc-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* radii - the pack's screens use generously rounded cards and pill buttons */
    --cc-radius-sm: 0.5rem;
    --cc-radius: 0.75rem;
    --cc-radius-lg: 1.25rem;
    --cc-radius-pill: 999px;
}


/* --------------------------------------------------------- Bootstrap remap */
/* bs-united declares these on both :root and [data-bs-theme=dark], which are
   the same specificity as the selectors here - so these win on source order.
   Keep this file last in index.html. */
:root,
[data-bs-theme="dark"] {
    --bs-body-bg: var(--cc-bg);
    --bs-body-bg-rgb: 9, 9, 9;
    --bs-body-color: var(--cc-text);
    --bs-body-color-rgb: 255, 255, 255;
    --bs-body-font-family: var(--cc-font-body);
    --bs-body-line-height: 1.45;
    --bs-heading-color: var(--cc-text);
    --bs-emphasis-color: var(--cc-text);
    --bs-emphasis-color-rgb: 255, 255, 255;

    --bs-primary: var(--cc-orange);
    --bs-primary-rgb: var(--cc-orange-rgb);
    --bs-primary-text-emphasis: var(--cc-orange);
    --bs-primary-bg-subtle: rgba(var(--cc-orange-rgb), 0.14);
    --bs-primary-border-subtle: rgba(var(--cc-orange-rgb), 0.45);

    --bs-secondary: var(--cc-text-2);
    --bs-secondary-rgb: 163, 163, 163;
    --bs-secondary-color: var(--cc-text-2);
    --bs-secondary-bg: var(--cc-field);
    --bs-tertiary-bg: var(--cc-card);
    --bs-tertiary-color: var(--cc-text-3);

    --bs-success: var(--cc-success);
    --bs-success-rgb: var(--cc-success-rgb);
    --bs-success-text-emphasis: var(--cc-success);
    --bs-warning: var(--cc-warning);
    --bs-warning-rgb: var(--cc-warning-rgb);
    --bs-warning-text-emphasis: var(--cc-warning);
    --bs-danger: var(--cc-danger);
    --bs-danger-rgb: var(--cc-danger-rgb);
    --bs-danger-text-emphasis: var(--cc-danger);
    --bs-info: var(--cc-text-2);
    --bs-info-rgb: 163, 163, 163;
    --bs-dark: var(--cc-field);
    --bs-light: var(--cc-white);

    --bs-border-color: var(--cc-border-1);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);

    --bs-link-color: var(--cc-orange);
    --bs-link-color-rgb: var(--cc-orange-rgb);
    --bs-link-hover-color: #FF7A2E;
    --bs-link-hover-color-rgb: 255, 122, 46;

    /* The greys are read all over the app - gray-500 for captions, gray-400
       for values, gray-600 for what has not been reached yet, gray-800 for
       track fills. Mapped onto the pack's text and border levels. */
    --bs-gray-100: #FDFDFD;
    --bs-gray-200: #EDEDED;
    --bs-gray-300: var(--cc-border-4);
    --bs-gray-400: var(--cc-mute);
    --bs-gray-500: var(--cc-text-2);
    --bs-gray-600: var(--cc-text-3);
    --bs-gray-700: var(--cc-border-3);
    --bs-gray-800: var(--cc-hairline);
    --bs-gray-900: var(--cc-chrome);

    --bs-focus-ring-color: rgba(var(--cc-orange-rgb), 0.4);
}

body {
    font-family: var(--cc-font-body);
    background-color: var(--cc-bg);
    color: var(--cc-text);
}

/* Headings carry the display face. Sizes stay where the app already set them -
   the pack's scale is drawn for a consumer journey of one card per screen, and
   an agent working a twelve-step wizard needs the denser end of it. */
h1, h2, h3, h4, h5, h6,
.cc-display {
    font-family: var(--cc-font-display);
    font-weight: 700;
}

/* The horizontal cell C lockup is 307x148. Rendered through the same
   AppFragmentProvider.SvgIcon helper as every other icon, so it needs to undo
   the square 1em box .app-svg-icon gives them. Declared after app.css loads,
   so it wins on source order. */
.app-svg-wordmark {
    width: 2.074em;
    height: 1em;
}

/* Figures that line up in a column - prices, counts, phone numbers. */
.cc-figure {
    font-family: var(--cc-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* A small pill carrying a state. Neutral by default; the modifiers below are
   the (NOT IN PACK) status colours. */
.cc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--cc-border-3);
    border-radius: var(--cc-radius-pill);
    color: var(--cc-text-2);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.25rem;
    white-space: nowrap;
}
.cc-chip-accent {
    border-color: var(--cc-orange);
    color: var(--cc-orange);
}
.cc-chip-success {
    border-color: rgba(var(--cc-success-rgb), 0.45);
    background: rgba(var(--cc-success-rgb), 0.08);
    color: var(--cc-success);
}
.cc-chip-warning {
    border-color: rgba(var(--cc-warning-rgb), 0.45);
    background: rgba(var(--cc-warning-rgb), 0.08);
    color: var(--cc-warning);
}
.cc-chip-danger {
    border-color: rgba(var(--cc-danger-rgb), 0.45);
    background: rgba(var(--cc-danger-rgb), 0.08);
    color: var(--cc-danger);
}


/* ------------------------------------------------------ DevExpress overrides */
/* The bootstrap-external theme derives most of its palette from the --bs-*
   variables above, so this section only covers what it pins to a value the
   remap cannot reach. Each rule repeats the theme's own selector: those
   variables are declared ON the component element, so a :root declaration
   would never win no matter how late it loads. */

/* Editors sit on the card, not on the page, so they need their own surface -
   inheriting --bs-body-bg would paint them the same near-black as the ground. */
.dxbl-text-edit {
    --dxbl-text-edit-bg: var(--cc-field);
    --dxbl-text-edit-color: var(--cc-text);
    --dxbl-text-edit-border-color: var(--cc-border-field);
    --dxbl-text-edit-border-radius: var(--cc-radius-sm);
    --dxbl-text-edit-focus-border-color: var(--cc-orange);
    --dxbl-text-edit-readonly-bg: var(--cc-card);
    --dxbl-text-edit-disabled-bg: var(--cc-card);
    --dxbl-text-edit-disabled-color: var(--cc-text-3);
}

/* A disabled editor must not advertise itself as fillable, so it drops back to
   the hairline - the border is the affordance, and it should go when the
   affordance does. */
.dxbl-text-edit.dxbl-disabled {
    --dxbl-text-edit-border-color: var(--cc-border-1);
}

.dxbl-edit-dropdown {
    --dxbl-edit-dropdown-bg: var(--cc-card);
    --dxbl-edit-dropdown-color: var(--cc-text);
    --dxbl-edit-dropdown-border-color: var(--cc-border-1);
    --dxbl-edit-dropdown-border-radius: var(--cc-radius);
}

.dxbl-dropdown,
.dxbl-itemlist-dropdown {
    --dxbl-dropdown-bg: var(--cc-card);
    --dxbl-dropdown-color: var(--cc-text);
    --dxbl-dropdown-border-color: var(--cc-border-1);
    --dxbl-dropdown-border-radius: var(--cc-radius);
}

.dxbl-list-box,
.dxbl-list-box-render-container {
    --dxbl-list-box-bg: var(--cc-card);
    --dxbl-list-box-color: var(--cc-text);
    --dxbl-list-box-border-color: var(--cc-border-1);
    --dxbl-list-box-item-hover-bg: rgba(255, 255, 255, 0.06);
    --dxbl-list-box-item-hover-color: var(--cc-text);
    --dxbl-list-box-item-selected-bg: var(--cc-orange);
    --dxbl-list-box-item-selected-color: #fff;
    --dxbl-list-box-item-selected-hover-bg: var(--cc-orange);
    --dxbl-list-box-item-selected-hover-color: #fff;
    --dxbl-list-box-group-item-font-weight: 600;
}

.dxbl-modal,
.dxbl-message-box {
    --dxbl-popup-bg: var(--cc-card);
    --dxbl-popup-color: var(--cc-text);
    --dxbl-popup-border-color: var(--cc-border-1);
    --dxbl-popup-border-radius: var(--cc-radius-lg);
    --dxbl-popup-header-bg: var(--cc-card);
    --dxbl-popup-header-color: var(--cc-text);
    --dxbl-popup-footer-bg: var(--cc-card);
    --dxbl-popup-footer-color: var(--cc-text);
    --dxbl-popup-back-bg: #000;
}

/* Pill buttons, to match .app-btn and the pack's screens. */
.dxbl-btn {
    --dxbl-btn-border-radius: var(--cc-radius-pill);
}

/* Checked already resolves from --bs-primary, so it is orange for free. The
   problem is the UNCHECKED box: the theme paints it --bs-body-bg with a
   transparent border, which on a #141414 card is a near-black square with no
   edge - invisible. It needs the field surface and a border of its own. */
.dxbl-checkbox {
    --dxbl-checkbox-check-element-unchecked-bg: var(--cc-field);
    --dxbl-checkbox-check-element-unchecked-border-color: var(--cc-border-field);
    --dxbl-checkbox-check-element-unchecked-hover-bg: var(--cc-field);
    --dxbl-checkbox-check-element-unchecked-hover-border-color: var(--cc-border-4);
    --dxbl-checkbox-check-element-readonly-bg: var(--cc-card);
    --dxbl-checkbox-radio-bg: var(--cc-field);
    --dxbl-checkbox-radio-hover-bg: var(--cc-field);
    --dxbl-checkbox-radio-unchecked-border-color: var(--cc-border-field);
    --dxbl-checkbox-radio-unchecked-hover-border-color: var(--cc-border-4);
    /* No switch is used in the app yet, so this is the state it will wake up
       in. Off, it was a #090909 knob on a #1E1E1E track on a #141414 card -
       1.19:1 and 1.11:1, invisible twice over. A switch has no border variable
       to lean on the way the editors above do, so the track itself has to
       carry the contrast: grey pill and pale knob when off, orange pill when
       on. Note the theme feeds this same variable to `opacity` with a 50%
       fallback, so setting it to a colour makes that declaration invalid and
       the track renders solid - clearing this value would fade it, not
       restore it. */
    --dxbl-checkbox-switch-unchecked-bg: var(--cc-border-field);
    --dxbl-checkbox-switch-unchecked-hover-bg: var(--cc-border-4);
    --dxbl-checkbox-switch-element-unchecked-bg: var(--cc-white);
}