/* ============================================================================
 * theme-shims.1.0.0.css
 *
 * Self-contained replacement for the small subset of `theme-dashboard`
 * (Bootstrap 3 era) styles that the application actually uses, extracted
 * from `lib/theme-dashboard/dist/toolkit-inverse.css`.
 *
 * Why this exists:
 *   The full `toolkit-inverse.css` (237 KB) and `toolkit.js` (124 KB) were
 *   removed in the BS5 cleanup. An audit of every *.cshtml showed that out
 *   of all the toolkit's custom components (statcard, statlist, growl,
 *   iconav, btn-outline, panel-aqua, sidebar-*, input-icon, flex-table,
 *   tile-*, nav-heading, nav-toggler), the codebase only references:
 *     - `panel*`                (~800 uses; .panel-default + custom variants)
 *     - `dashhead*`             (161 uses across 70 files)
 *     - `icon`/`icon-*` glyphs  (~30 unique entypo names)
 *     - `input-with-icon`       (companion to icon glyphs in form inputs)
 *     - `nav-bordered`          (1 use, in VisionMenu/Default.cshtml)
 *     - `navbar-toggle`/`icon-bar`  (BS3 hamburger - 2 navbar partials)
 *
 * Source attribution (line numbers refer to toolkit-inverse.css):
 *     @font-face                 6264-6270
 *     .icon, .icon:before        6271-6285
 *     .icon-* glyph code points  6302-...
 *     .input-with-icon           9122-9135
 *     .dashhead*                 9344-9431
 *     .nav-bordered*             6028-6092
 *     .navbar-toggle, .icon-bar  3447-3475 (+ inverse override 3783-3785)
 *     .panel*                    4583-4834 (BS3 panel base + .panel-default)
 *
 * How to remove this file:
 *   1. Migrate the dashhead pattern in views to a BS5 equivalent (e.g., a
 *      simple flex header with .h2/.text-muted).
 *   2. Migrate the 30 entypo glyph references in views to Bootstrap Icons,
 *      Font Awesome, or another icon set; remove this @font-face.
 *   3. Migrate VisionMenu/Default.cshtml off `.nav-bordered`.
 *   4. Migrate the navbar partials off `.navbar-toggle`/`.icon-bar` to BS5's
 *      `.navbar-toggler` + `.navbar-toggler-icon`.
 *   5. Migrate `.panel` markup to BS5 `.card` (panel == card structurally;
 *      .panel-heading == .card-header, .panel-body == .card-body,
 *      .panel-footer == .card-footer).
 * Once all five migrations land, this file can be deleted entirely.
 * ============================================================================ */


/* ----- Bootstrap 3 base behaviour (toolkit-inverse.css L276 + L?) -------- */
/* BS5 ships with `a { text-decoration: underline }` by default, so removing */
/* the toolkit caused every link in navs, dropdowns, tables, panels, etc.   */
/* to render with a permanent underline. Restore the BS3 / toolkit default. */

a {
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

/* BS5 dropped `.form-group { margin-bottom: 15px }` in favour of utility   */
/* classes (`.mb-3`). Until views migrate from `<div class="form-group">`,  */
/* restore the BS3 spacing - without it, every label/control row in our    */
/* search and edit forms collides with the next row.                        */
/* The :last-child rule collapses the trailing row's margin so the panel's */
/* own padding (14px on `.perception-panel`, 15px on `.panel-body`)         */
/* provides the bottom gap by itself - without this our search/edit forms */
/* render with ~30px below the last row instead of the intended ~14px.     */

.form-group {
    margin-bottom: 1rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* ----- BS5 <select> + .form-control (BS3 pattern) ---------------------------------
 * Bootstrap 5 sets `appearance: none` on `.form-control`, which strips the native
 * dropdown indicator on <select>. BS5 uses `.form-select` for the SVG chevron.
 * Until views migrate, restore the chevron for single-value selects that use
 * `select.form-control` (and size variants). Skip Select2 targets and multi-selects.
 */
select.form-control:not(.form-select):not(.select2-hidden-accessible):not([multiple]):where(:not([size]), [size="1"]) {
    --vision-form-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-image: var(--vision-form-select-chevron);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

select.form-control.form-control-sm:not(.form-select):not(.select2-hidden-accessible):not([multiple]):where(:not([size]), [size="1"]) {
    padding-right: 2.25rem;
}

select.form-control.form-control-lg:not(.form-select):not(.select2-hidden-accessible):not([multiple]):where(:not([size]), [size="1"]) {
    padding-right: 2.25rem;
}

select.form-control[multiple],
select.form-control[size]:not([size="1"]) {
    background-image: none;
}

/* Hide native record-type multi-select until Select2 replaces it (avoids option list flash). */
.record-type-select-host.record-type-select-loading {
    position: relative;
    min-height: calc(1.5em + 0.75rem + 2px);
}

.record-type-select-host.record-type-select-loading select#recordTypeCodes {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.record-type-select-host.record-type-select-loading .select2-container {
    visibility: hidden;
}

/* Select2 multi-select: match single-select chevron affordance (native [multiple] has none). */
.select2-container--classic .select2-selection--multiple {
    position: relative;
    min-height: calc(1.5em + 0.75rem + 2px);
    cursor: pointer;
}

.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
    padding-right: 2.25rem;
}

.select2-container--classic .select2-selection--multiple::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.75rem;
    width: 16px;
    height: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    background-image: var(--vision-form-select-chevron, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 12px;
}

[data-bs-theme="dark"] .select2-container--classic .select2-selection--multiple::after {
    background-image: var(--vision-form-select-chevron, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"));
}

/* Dark theme: BS5 tokens so selects are not stuck on light-surface colors; chevron matches. */
[data-bs-theme="dark"] select.form-control:not(.form-select):not(.select2-hidden-accessible):not([multiple]):where(:not([size]), [size="1"]) {
    --vision-form-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] select.form-control:not(.form-select):not(.select2-hidden-accessible):not([multiple]):where(:not([size]), [size="1"]):hover:not(:disabled) {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] select.form-control:not(.form-select):not(.select2-hidden-accessible):not([multiple]):where(:not([size]), [size="1"]):focus {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* BS5 renamed `.sr-only` to `.visually-hidden`. Our markup still uses      */
/* `<span class="sr-only">Toggle navigation</span>` etc. - without this    */
/* rule those screen-reader-only labels render as visible text.             */

.sr-only,
.sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* BS3 provided `.hide { display: none !important }`; BS5 expects `.d-none`.        */
/* Many modals/partials still use `class="hide"` on sentinel inputs and messages;   */
/* scripts toggle visibility with `addClass('hide')` / `removeClass('hide')`.       */

.hide {
    display: none !important;
}

/* BS5 renamed `.pull-left`/`.pull-right` (BS3 float utilities) to             */
/* `.float-start`/`.float-end` and dropped the old names entirely. Our        */
/* markup still uses pull-* in ~90 views (Application.cshtml panel headers,  */
/* dashhead actions, panel-heading button rows, many search-result toolbars). */
/* Without this shim those elements drop out of their float container and    */
/* stack on a new line (Application page's "Workflow Status: ..." was a      */
/* visible symptom). !important matches BS3's original behaviour so the      */
/* float wins against incidental grid/column floats in the same row.         */

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}


/* ----- Toolkit "entypo" icon font ---------------------------------------- */

@font-face {
    font-family: "toolkit-entypo";
    src: url("../fonts/vision-icons/toolkit-entypo.eot");
    src: url("../fonts/vision-icons/toolkit-entypo.eot?#iefix") format("eot"),
         url("../fonts/vision-icons/toolkit-entypo.woff2") format("woff2"),
         url("../fonts/vision-icons/toolkit-entypo.woff") format("woff"),
         url("../fonts/vision-icons/toolkit-entypo.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.icon:before {
    position: relative;
    top: 2px;
    display: inline-block;
    font-family: "toolkit-entypo";
    speak: none;
    font-size: 100%;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The 30 distinct entypo glyphs referenced in views. Sorted alphabetically. */
.icon-arrow-with-circle-down:before  { content: "\EA20"; }
.icon-arrow-with-circle-right:before { content: "\EA22"; }
.icon-bell:before                    { content: "\EA2E"; }
.icon-block:before                   { content: "\EA30"; }
.icon-calendar:before                { content: "\EA3D"; }
.icon-check:before                   { content: "\EA41"; }
.icon-chevron-left:before            { content: "\EA43"; }
.icon-chevron-right:before           { content: "\EA44"; }
.icon-circle-with-cross:before       { content: "\EA52"; }
.icon-clock:before                   { content: "\EA5A"; }
.icon-cross:before                   { content: "\EA77"; }
.icon-cycle:before                   { content: "\EA7A"; }
.icon-edit:before                    { content: "\EA8D"; }
.icon-eye:before                     { content: "\EA98"; }
.icon-help-with-circle:before        { content: "\EAC2"; }
.icon-magnifying-glass:before        { content: "\EAEF"; }
.icon-minus:before                   { content: "\EAFE"; }
.icon-paper-plane:before             { content: "\EB13"; }
.icon-pencil:before                  { content: "\EB15"; }
.icon-plus:before                    { content: "\EB1C"; }
.icon-print:before                   { content: "\EB21"; }
.icon-save:before                    { content: "\EB3B"; }
.icon-shuffle:before                 { content: "\EB48"; }
.icon-star:before                    { content: "\EB5B"; }
.icon-text-document:before           { content: "\EB68"; }
.icon-trash:before                   { content: "\EB72"; }
.icon-upload:before                  { content: "\EB84"; }
.icon-user:before                    { content: "\EB85"; }
.icon-users:before                   { content: "\EB86"; }
.icon-warning:before                 { content: "\EB94"; }


/* ----- .input-with-icon (input wrapper that positions an icon overlay) --- */

.input-with-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.input-with-icon > .form-control {
    padding-left: 30px;
}

.input-with-icon > .icon {
    position: absolute;
    top: 7px;
    left: 10px;
    color: #ccc;
}


/* ----- .dashhead (page-header pattern: 161 uses across 70 views) --------- */

.dashhead:before,
.dashhead:after {
    content: " ";
    display: table;
}

.dashhead:after {
    clear: both;
}

@media (min-width: 768px) {
    .dashhead-titles {
        float: left;
    }
}

.dashhead-title {
    margin-top: 0;
}

.dashhead-subtitle {
    margin-top: 0;
    margin-bottom: 5px;
    font-weight: normal;
    font-size: 85%;
    color: #434857;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dashhead-toolbar {
    margin-left: 0;
}

.dashhead-toolbar .input-with-icon {
    width: 100%;
    margin-bottom: 10px;
    margin-left: 0;
}

@media (min-width: 768px) {
    .dashhead-toolbar {
        float: right;
        margin-top: 12px;
    }

    .dashhead-toolbar .input-with-icon {
        width: 180px;
        margin-bottom: 0;
    }
}

.dashhead-toolbar-divider {
    float: left;
    width: 1px;
    height: 34px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #434857;
}

.dashhead-toolbar-item {
    float: left;
}

@media (max-width: 768px) {
    .dashhead-toolbar-item.btn-group-halves          { width: 100%; }
    .dashhead-toolbar-item.btn-group-halves .btn     { width: 50%; margin-left: 0; }
    .dashhead-toolbar-item.btn-group-thirds          { width: 100%; }
    .dashhead-toolbar-item.btn-group-thirds .btn     { width: 33%; margin-left: 0; }
    .dashhead-toolbar-item.btn-group-thirds .btn:last-child { width: 34%; }
    .dashhead-toolbar-item.btn-group-fourths         { width: 100%; }
    .dashhead-toolbar-item.btn-group-fourths .btn    { width: 25%; margin-left: 0; }
}


/* ----- .nav-bordered (used once, in VisionMenu/Default.cshtml) ----------- */

.nav-bordered > li {
    float: left;
}

.nav-bordered > li > a {
    display: inline-block;
    padding: 10px 0;
    font-weight: 300;
    color: #777;
    border-bottom: 4px solid transparent;
}

.nav-bordered > li > a:hover,
.nav-bordered > li > a:focus {
    color: #1CA8DD;
    background-color: transparent;
}

.nav-bordered > li + li {
    margin-left: 30px;
}

.nav-bordered > li.active > a,
.nav-bordered > li.active > a:hover,
.nav-bordered > li.active > a:focus {
    font-weight: 500;
    color: #1CA8DD;
    border-bottom-color: #1CA8DD;
}


/* ----- BS3 navbar hamburger (`.navbar-toggle` + `.icon-bar`) ------------- */
/* Used in 2 navbar partials (Common/Navbar.cshtml). The markup already   */
/* has BS5 `.navbar-toggler` alongside; once `.icon-bar` is replaced with  */
/* `<span class="navbar-toggler-icon">` these rules can be deleted.        */

.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 9px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.navbar-toggle:focus {
    outline: 0;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #888;
}

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

@media (min-width: 992px) {
    .navbar-toggle {
        display: none;
    }
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #fff;
}


/* ----- BS3 navbar layout helpers still used in markup -------------------- */
/* These are minimal shims so the existing BS3 navbar markup doesn't break  */
/* before the navbar partial migrates to BS5.                                */

.navbar-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.navbar-header {
    position: relative;
}

/* BS3 used floats; BS5 `.navbar-nav` is `display: flex`, so use auto       */
/* margins to push left/right groups apart.                                  */
.navbar-left  { margin-right: auto !important; }
.navbar-right { margin-left:  auto !important; }


/* ----- BS3 .panel / .panel-default (~800 uses across views) -------------- */
/* This is the BS3 "card" pattern. Critical: `.panel` provides the          */
/* `border-style: solid` declaration that subclassed wrappers like          */
/* `.perception-panel` (in site.2.0.0.css) inherit - those subclasses only  */
/* set border-width/-color/-radius and rely on .panel for the style. Without */
/* this rule the blue border on every search/edit form silently disappears. */
/* The full BS3 `.panel > .table*` table-inside-panel ruleset is not ported  */
/* (corner-case styling that the app didn't visibly depend on). Migrate     */
/* views to BS5 `.card` to retire this block.                                */

.panel {
    margin-bottom: 21px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-body {
    padding: 15px;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.panel-heading > .dropdown .dropdown-toggle {
    color: inherit;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
    color: inherit;
}

.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.panel-group {
    margin-bottom: 21px;
}

.panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
}

.panel-group .panel + .panel {
    margin-top: 5px;
}

.panel-group .panel-heading {
    border-bottom: 0;
}

.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
    border-top: 1px solid #ddd;
}

.panel-group .panel-footer {
    border-top: 0;
}

.panel-group .panel-footer + .panel-collapse .panel-body {
    border-bottom: 1px solid #ddd;
}

.panel-default {
    border-color: #ddd;
}

.panel-default > .panel-heading {
    color: #51586a;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #ddd;
}

.panel-default > .panel-heading .badge {
    color: #f5f5f5;
    background-color: #51586a;
}

.panel-default > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #ddd;
}