/*
   Optional Cenovus theme (2024 Cenovus Brand Guidelines).

   Loaded after site.css on every layout. Every rule is scoped under html.theme-cenovus, which
   cenovus-theme.js adds only when the cflow-theme preference is "cenovus" - without that class this
   file changes nothing and the CFlow theme stays exactly as it is.

   Most of the application already paints through the site.css :root variables, so the theme is
   mainly the variable block below. The rules after it cover only what does not follow those
   variables: hard-coded CFlow blues, the Kendo theme's own primary colour and a few page styles.

   Not recoloured - these colours carry business meaning, not branding: risk exposure Low / Medium /
   High / Extreme and the provisional risk colours, overdue, danger / error, success, warning,
   database StateColor values, status badges, workflow progress states, MOC type colours, status
   lights, flags and file-type icons.

   Contrast: white text is only used on Slate (9.3:1) and Slate 80% (5.3:1). Sky and its tints
   always take a Slate foreground - white on Sky is 2.8:1.
*/

/* #region 1.Tokens */

html.theme-cenovus {
    /* Cenovus primary, primary tints and secondary accent. Tints are the brand's 100/80/60/40 steps. */
    --cen-slate: #244C5A;
    --cen-slate-80: #50707B;
    --cen-sky: #6BA4B8;
    --cen-sky-60: #A6C8D4;
    --cen-sky-40: #C4DBE3;
    --cen-sienna: #CF4520;

    /* site.css :root variables */
    --primary-color: var(--cen-slate);
    --primary-light: var(--cen-slate-80);
    --primary-lighter: var(--cen-sky-60);
    --primary-lightest: var(--cen-sky-40);

    /* Dashboard: Total tile, and the Opened / Closed activity chart, which reads these two variables
       when it draws. The Open and Closed tiles share them, so their own colours are set below. */
    --moc-total-projects: var(--cen-slate);
    --moc-open-projects: var(--cen-slate);
    --moc-closed-projects: var(--cen-sky);
}

/* #endregion */

/* #region 2.Links */

/* :where() keeps these at Bootstrap's own a / a:hover weight, so any class that already colours a
   link (buttons, menu links, Kendo links) still wins. Only plain links take Sienna. */
:where(html.theme-cenovus) a,
:where(html.theme-cenovus) a:hover {
    color: var(--cen-sienna);
}

html.theme-cenovus .link-text,
html.theme-cenovus .review-note-add {
    color: var(--cen-sienna) !important;
}

/* Action item "Add update" / "+ n more updates" / comment links carry an inline color:blue. */
html.theme-cenovus a.link[style*="color:blue"] {
    color: var(--cen-sienna) !important;
}

/* Header links sit on Slate, where Sienna fails contrast - Sky 40% instead of the lime hover. */
html.theme-cenovus .usr-link:hover {
    color: var(--cen-sky-40);
}

/* #endregion */

/* #region 3.Tabs */

html.theme-cenovus .styled-tab .nav-item .active {
    color: var(--cen-slate) !important;
}

html.theme-cenovus .styled-tab .nav-link.active::before {
    background-color: var(--cen-sienna);
}

/* #endregion */

/* #region 4.Dashboard */

/* Open: Sky with a Slate foreground, white fails contrast on Sky. The white tile icon is darkened
   to match. Closed keeps its existing grey; Overdue keeps its red (site.css, not overridden). */
html.theme-cenovus .dashboard .widgets .open {
    background-color: var(--cen-sky);
}

html.theme-cenovus .dashboard .widgets .open .count,
html.theme-cenovus .dashboard .widgets .open .title {
    color: var(--cen-slate);
}

html.theme-cenovus .dashboard .widgets .open img {
    filter: brightness(0) opacity(0.75);
}

html.theme-cenovus .dashboard .widgets .closed {
    background-color: #b7b7b7;
}

/* My Tasks: Slate 80 with white. My Action Items: Sky 60 with a Slate foreground, the same
   treatment as Open (white on light Sky fails contrast). Brand colours only - layout is in site.css. */
html.theme-cenovus .dashboard .widgets .my-tasks {
    background-color: var(--cen-slate-80);
}

html.theme-cenovus .dashboard .widgets .my-actions {
    background-color: var(--cen-sky-60);
}

html.theme-cenovus .dashboard .widgets .my-actions .count,
html.theme-cenovus .dashboard .widgets .my-actions .title,
html.theme-cenovus .dashboard .widgets .my-actions > .fa {
    color: var(--cen-slate);
}

/* Threats By Unit / Zone drill-down icon - an inline #0D92F4, so !important is needed. */
html.theme-cenovus .dashboard .entities .k-icon {
    color: var(--cen-sienna) !important;
}

/* #endregion */

/* #region 5.Kendo */

/* Indeterminate checkbox dash is an SVG data URI with the CFlow blue in it. */
html.theme-cenovus .k-checkbox.k-indeterminate,
html.theme-cenovus .k-checkbox:indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23244C5A' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e");
}

/* #endregion */

/* #region 6.Risk Matrix */

/* Only the selection / header chrome around the matrix. The exposure colours are untouched. */
html.theme-cenovus .ra-reference-bar {
    background-color: var(--cen-sky-40);
}

html.theme-cenovus .ra-matrix td.ra-cell-selected {
    box-shadow: inset 0 0 0 2px rgba(36, 76, 90, 0.25);
}

html.theme-cenovus .table th.ra-axis-header {
    background-color: var(--cen-sky-40);
    border-color: var(--cen-sky-60);
}

/* #endregion */

/* #region 7.Threat */

/* Threat.cshtml page styles that hard-code a blue. */
html.theme-cenovus .threat-section-header .ts-title {
    color: var(--cen-slate);
}

html.theme-cenovus #progress-strip .tp-clickable:hover {
    background: var(--cen-sky-40);
}

/* #endregion */