/* SmartInfra - the second brand colour: the blue of the Smart Tech logo, next to the orange.
   RULE: orange is the IDENTITY of the application (the header, the sidebar and its active item, the floating buttons, the hero banners, the AI assistant);
         blue is the ACTION and the STATE (Add / Save / Send / Approve buttons, the chosen tab, the ticked checkbox, the active page, the focus ring, the info badge, the circles of initials).
         Success / warning / danger keep their meaning colours. TEXT keeps its colour (black / grey): the blue is on fills, icons, borders and states, never on the words of a list or a form.
   It is switched on for every page by the class "sim-blue" on <body> (_Layout.cshtml); a view that must stay as before sets ViewData["NoBlue"] = true. */

:root {
    --sim-blue: #1e6fdc;                 /* fills with white text (contrast 4.8), icons, borders */
    --sim-blue-rgb: 30, 111, 220;
    --sim-blue-hover: #1858b4;
    --sim-blue-tint: #e8f1fd;            /* soft backgrounds */
    --sim-blue-line: #bcd4f7;            /* soft borders */
    --sim-blue-logo: #2a82ef;            /* the exact logo blue: large shapes, charts */
}

body.sim-blue {
    --bs-info: var(--sim-blue);
    --bs-info-rgb: var(--sim-blue-rgb);
    --bs-blue: var(--sim-blue);
}

/* ---- the pages and their windows read "primary" for "the chosen one" (many module styles say var(--bs-primary)): inside the content and the windows it is the blue.
        The sidebar, the header and the floating buttons are outside these areas and stay orange. */
body.sim-blue .content,
body.sim-blue .modal,
body.sim-blue .offcanvas,
body.sim-blue .dropdown-menu,
body.sim-blue .daterangepicker,
body.sim-blue .select2-dropdown {
    --bs-primary: var(--sim-blue);
    --bs-primary-rgb: var(--sim-blue-rgb);
    --bs-primary-bg-subtle: var(--sim-blue-tint);
    --bs-primary-border-subtle: var(--sim-blue-line);
    --bs-primary-text-emphasis: var(--sim-blue-hover);
}

/* ---- the buttons of an action ---------------------------------------------------------------------------------------------------------------------------- */
body.sim-blue .content .btn.btn-primary,
body.sim-blue .modal .btn.btn-primary,
body.sim-blue .offcanvas .btn.btn-primary,
body.sim-blue .auth-wrapper .btn.btn-primary,
body.sim-blue .content .btn.btn-dark,
body.sim-blue .content .btn.btn-primary-gradient {
    background: var(--sim-blue) !important; border-color: var(--sim-blue) !important; color: #fff !important;
}
body.sim-blue .content .btn.btn-primary:hover, body.sim-blue .content .btn.btn-primary:focus, body.sim-blue .content .btn.btn-primary:active,
body.sim-blue .modal .btn.btn-primary:hover, body.sim-blue .modal .btn.btn-primary:focus, body.sim-blue .modal .btn.btn-primary:active,
body.sim-blue .offcanvas .btn.btn-primary:hover, body.sim-blue .auth-wrapper .btn.btn-primary:hover,
body.sim-blue .content .btn.btn-dark:hover, body.sim-blue .content .btn.btn-primary-gradient:hover {
    background: var(--sim-blue-hover) !important; border-color: var(--sim-blue-hover) !important; color: #fff !important;
}
body.sim-blue .btn.btn-primary:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--sim-blue-rgb), .25); }
/* the second kind of button: an outline (Check, Scan, Refresh ...) - a blue frame, filled when pointed at */
body.sim-blue .content .btn.btn-outline-primary,
body.sim-blue .modal .btn.btn-outline-primary { color: var(--sim-blue) !important; border: 1px solid var(--sim-blue) !important; background: transparent; }
body.sim-blue .content .btn.btn-outline-primary:hover, body.sim-blue .content .btn.btn-outline-primary:focus, body.sim-blue .content .btn.btn-outline-primary.active,
body.sim-blue .modal .btn.btn-outline-primary:hover, body.sim-blue .modal .btn.btn-outline-primary:focus {
    background: var(--sim-blue) !important; border-color: var(--sim-blue) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(var(--sim-blue-rgb), .35);
}
body.sim-blue .content .btn.btn-soft-primary,
body.sim-blue .content .btn.btn-primary-light { background: var(--sim-blue-tint); border-color: var(--sim-blue-tint); color: var(--sim-blue); }

/* ---- the chosen one: the list / grid switch, filled toggles, step numbers */
body.sim-blue .content .icon-list .btn.active,
body.sim-blue .content .icon-list .btn.bg-primary,
body.sim-blue .content .btn-group .btn.active:not(.btn-light):not(.btn-white) { background: var(--sim-blue) !important; border-color: var(--sim-blue) !important; color: #fff !important; }
body.sim-blue .content .bg-primary:not(.progress-bar),
body.sim-blue .modal .bg-primary { background-color: var(--sim-blue) !important; }
body.sim-blue .content .badge.badge-primary,
body.sim-blue .content .badge.bg-primary { background: var(--sim-blue) !important; color: #fff !important; }
body.sim-blue .content .bg-primary-transparent,
body.sim-blue .content .bg-soft-primary,
body.sim-blue .modal .bg-primary-transparent,
body.sim-blue .content .badge.badge-soft-primary,
body.sim-blue .modal .badge.badge-soft-primary { background: var(--sim-blue-tint) !important; color: var(--sim-blue) !important; }
body.sim-blue .content .border-primary { border-color: var(--sim-blue) !important; }

/* ---- the little icons of a row (view, edit) - blue icons; delete keeps its red */
body.sim-blue .action-icon a:not([class*="delete"]):not(.text-danger) { color: var(--sim-blue); }
body.sim-blue .action-icon a:not([class*="delete"]):not(.text-danger):hover { background: var(--sim-blue-tint); color: var(--sim-blue-hover); }

/* ---- selection: ticked checkboxes / radios / switches, the active page, the focus ring of a field, progress */
body.sim-blue .form-check-input:checked { background-color: var(--sim-blue); border-color: var(--sim-blue); }
body.sim-blue .form-check-input:focus,
body.sim-blue .form-control:focus,
body.sim-blue .form-select:focus,
body.sim-blue .select2-container--default.select2-container--focus .select2-selection--single,
body.sim-blue .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--sim-blue); box-shadow: 0 0 0 .2rem rgba(var(--sim-blue-rgb), .15); }
body.sim-blue .page-item.active .page-link { background: var(--sim-blue); border-color: var(--sim-blue); color: #fff; }
body.sim-blue .progress-bar { background-color: var(--sim-blue); }
body.sim-blue .daterangepicker td.active,
body.sim-blue .daterangepicker td.active:hover,
body.sim-blue .daterangepicker .ranges li.active { background-color: var(--sim-blue); color: #fff; }
body.sim-blue .daterangepicker .drp-buttons .btn.btn-primary { background: var(--sim-blue); border-color: var(--sim-blue); }
body.sim-blue .select2-container--default .select2-results__option--highlighted[aria-selected],
body.sim-blue .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--sim-blue); color: #fff; }
body.sim-blue .bootstrap-datetimepicker-widget table td.active,
body.sim-blue .bootstrap-datetimepicker-widget table td.active:hover { background-color: var(--sim-blue); }

/* ---- the chosen tab: underline tabs get a soft blue background and a blue line; the filled tabs (nav-tabs-solid: Monitoring, Audit, Twin, AI, Review) are a blue fill */
body.sim-blue .nav-underline .nav-link.active { background: rgba(var(--sim-blue-rgb), .08); }
body.sim-blue .nav-tabs.nav-tabs-solid .nav-link.active,
body.sim-blue .nav-tabs.nav-tabs-solid .nav-link.active:hover { background: var(--sim-blue) !important; border-color: var(--sim-blue) !important; color: #fff !important; }
body.sim-blue .content .text-primary,
body.sim-blue .modal .text-primary { color: var(--sim-blue) !important; }

/* ---- the chosen tab / step: the underline or the frame is blue, the words keep their colour */
body.sim-blue .nav-tabs .nav-link.active,
body.sim-blue .nav-underline .nav-link.active { border-bottom-color: var(--sim-blue); }
body.sim-blue .modal .nav-pills .nav-link.active,
body.sim-blue .user-vtabs .nav-link.active { border-color: var(--sim-blue); background: var(--sim-blue-tint); }
body.sim-blue .modal .nav-pills .nav-link.active .fw-medium,
body.sim-blue .user-vtabs .nav-link.active .fw-medium { color: #212529; }
body.sim-blue .modal .nav-pills .nav-link.active .user-vtab-icon,
body.sim-blue .user-vtabs .nav-link.active .user-vtab-icon { background: var(--sim-blue); color: #fff; }

/* ---- information: info badges, info tiles, the circle with the initials of a person */
body.sim-blue .badge.badge-info { background: var(--sim-blue); color: #fff; }
body.sim-blue .avatar.bg-info { background-color: var(--sim-blue) !important; }
body.sim-blue .avatar.bg-primary-transparent,
body.sim-blue .avatar-initials { background: var(--sim-blue-tint) !important; color: var(--sim-blue) !important; }

/* ---- the same state colours in the pages that wrote their own CSS (they read --bs-primary for "the chosen one") */
body.sim-blue #set-page .set-nav-item.active { background: var(--sim-blue-tint); color: var(--sim-blue); }
body.sim-blue #set-page .set-nav-item.active .set-nav-icon,
body.sim-blue #set-page .set-scope-icon { background: var(--sim-blue); }
body.sim-blue #set-page .set-row.own::before { background: var(--sim-blue); }
body.sim-blue .pl-steps .nav-link.active { background: var(--sim-blue); border-color: var(--sim-blue); color: #fff; }
body.sim-blue .pl-steps .nav-link.active .pl-step-n { color: var(--sim-blue); }

/* ---- the sign-in pages (their body is white and carries the same class) */
body.sim-blue.bg-white .btn.btn-primary { background: var(--sim-blue) !important; border-color: var(--sim-blue) !important; color: #fff !important; }
body.sim-blue.bg-white .btn.btn-primary:hover { background: var(--sim-blue-hover) !important; border-color: var(--sim-blue-hover) !important; }

/* ---- small chosen-state bits of single pages */
body.sim-blue .num-scope-icon { background: var(--sim-blue) !important; }
body.sim-blue .rpt-item.active .ti { color: var(--sim-blue) !important; }
body.sim-blue .rpt-item.active { color: #212529 !important; }

/* ---- readable text on the chosen (filled) things -------------------------------------------------------------------------------------------------------- */
/* a count badge inside a filled tab: white with blue figures */
body.sim-blue .nav-tabs-solid .nav-link.active .badge,
body.sim-blue .nav-tabs-solid .nav-link.active .badge[class*="badge-soft"],
body.sim-blue .nav-tabs-solid .nav-link.active .badge.bg-light { background: #fff !important; color: var(--sim-blue) !important; }
/* a chosen list item (the manholes and devices of the field install, pickers): a blue fill, white words, a lighter second line */
body.sim-blue .list-group-item.active,
body.sim-blue .list-group-item-action.active { background: var(--sim-blue) !important; border-color: var(--sim-blue) !important; color: #fff !important; }
body.sim-blue .list-group-item.active .small,
body.sim-blue .list-group-item.active small,
body.sim-blue .list-group-item.active .text-muted,
body.sim-blue .list-group-item.active .fs-12,
body.sim-blue .list-group-item.active .prv-mono,
body.sim-blue .list-group-item.active .badge-light { color: rgba(255, 255, 255, .88) !important; }
body.sim-blue .list-group-item.active .badge { background: #fff !important; color: var(--sim-blue) !important; }
/* a chosen item of a drop-down list */
body.sim-blue .dropdown-item.active,
body.sim-blue .dropdown-item:active { background: var(--sim-blue) !important; color: #fff !important; }
/* ... and everything inside it (a second line, the grey native name of a language, the tick) stays readable: white, a little lighter for the small words */
body.sim-blue .dropdown-item.active i,
body.sim-blue .dropdown-item:active i { color: #fff !important; }
body.sim-blue .dropdown-item.active small,
body.sim-blue .dropdown-item.active .small,
body.sim-blue .dropdown-item.active .text-muted,
body.sim-blue .dropdown-item.active .text-body-secondary,
body.sim-blue .dropdown-item.active .fs-12,
body.sim-blue .dropdown-item:active small,
body.sim-blue .dropdown-item:active .text-muted { color: rgba(255, 255, 255, .88) !important; }

/* ---- windows and pages: the words of the chosen tab stay dark (the blue is the line under it); the filled tabs (nav-tabs-solid) keep their white words */
body.sim-blue .nav-tabs:not(.nav-tabs-solid) .nav-link.active,
body.sim-blue .nav-underline .nav-link.active,
body.sim-blue .modal .nav-tabs:not(.nav-tabs-solid) .nav-link.active { color: #212529 !important; }
body.sim-blue .nav-tabs:not(.nav-tabs-solid) .nav-link:hover:not(.active):not(.disabled) { color: var(--sim-blue-hover); }

/* ---- the little windows of the header and the pages (the notification panel, the drop-downs, popovers): the buttons and the links of an action are blue like everywhere else */
body.sim-blue .dropdown-menu .btn.btn-primary,
body.sim-blue .popover .btn.btn-primary,
body.sim-blue .toast .btn.btn-primary { background: var(--sim-blue) !important; border-color: var(--sim-blue) !important; color: #fff !important; }
body.sim-blue .dropdown-menu .btn.btn-primary:hover,
body.sim-blue .popover .btn.btn-primary:hover { background: var(--sim-blue-hover) !important; border-color: var(--sim-blue-hover) !important; }
body.sim-blue .dropdown-menu .text-primary,
body.sim-blue .popover .text-primary,
body.sim-blue .dropdown-menu a.text-primary { color: var(--sim-blue) !important; }
body.sim-blue .dropdown-menu .btn.btn-outline-primary { color: var(--sim-blue) !important; border-color: var(--sim-blue) !important; }

/* ---- readable words on the soft (pale) labels: the yellow and the green of the words were too light on white (contrast 1.6 to 2.1); the pale fill and the shape stay as they are */
body.sim-blue .badge-soft-warning, body.sim-blue .badge.bg-warning-transparent, body.sim-blue .text-warning-emphasis { color: #8a5a00 !important; }
body.sim-blue .badge-soft-success, body.sim-blue .mon-live { color: #027a3a !important; }
body.sim-blue .alert-warning { color: #7a5a00 !important; }
body.sim-blue .badge-soft-warning i, body.sim-blue .badge-soft-success i { color: inherit !important; }
body.sim-blue #dt-page:not(.is-paused):not(.is-playback) .dt-live, body.sim-blue #dt-page:not(.is-paused):not(.is-playback) .dt-live #dt-live-text { color: #027a3a !important; }