/*
 * Neosoft UI layer (Identidade Corporativa v1.0 - C:\Neosoft\Logo\Brand one-pager.pdf).
 * Loaded LAST by Server/Shared/_ThemeOverrides.cshtml, after the vendor sheets (dataTables, select2,
 * datepicker) and the shared css/custom.css, css/site.css, so equal-specificity rules here win.
 * Colours, radii and shadows come from brand.css tokens only.
 *
 * Brand language applied to the UI:
 *  - flat, geometric shapes: small radii, hairline borders, no gradients
 *  - Deep Navy for text/structure, Bright Cyan as the accent (focus, active, selection)
 *  - Montserrat Black/Bold headings, spaced uppercase micro-labels ("SCIENCES COMPUTING")
 *  - soft grey page wash with white surfaces
 *
 * Spacing follows a 4px scale (4 / 8 / 12 / 16 / 20 / 24 / 64):
 *  page gutter 24, gap between cards 24, card padding 20, modal padding 24,
 *  form rows 12, table cells 8x12, gap between grid controls and the table 16.
 * Odd values (5, 6, 9, 10, 14) only appear where they compensate for a base/vendor offset - each is commented.
 */

/* ---------- Base & typography ---------- */

body {
    color: var(--kn-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#page-wrapper, .gray-bg {
    background-color: var(--kn-bg);
}

h1, h2 {
    color: var(--kn-primary);
    letter-spacing: -.01em;
}

h1 {
    font-weight: 900;
}

h2 {
    font-weight: 700;
}

h3, h4, h5, h6 {
    color: var(--kn-primary);
    font-weight: 700;
}

a {
    color: var(--kn-primary);
}

    a:hover, a:focus {
        color: var(--kn-accent-text);
    }

.text-muted, .help-block:not(.field-validation-error) {
    color: var(--kn-muted);
}

::selection {
    background: var(--kn-accent);
    color: var(--kn-on-accent);
}

/* ---------- Page layout ---------- */

/* #page-wrapper adds 15px and .row takes 15px back, so 9 here puts card edges 24px from the sidebar.
   The bottom padding clears the absolutely positioned footer (~44px). */
.wrapper-content {
    padding: 24px 9px 64px;
}

.footer {
    background: var(--kn-surface);
    border-top: 1px solid var(--kn-border);
    color: var(--kn-muted);
    padding: 12px 24px;
}

/* pages that start with a bare heading (Configuration/*, Brokers/Import, ...) - the 24px page padding is the gap */
.wrapper-content > h1:first-of-type, .wrapper-content > h2:first-of-type {
    margin-top: 0;
}

.wrapper-content > h1, .wrapper-content > h2 {
    margin-bottom: 16px;
}

hr {
    border-top-color: var(--kn-border);
    margin: 24px 0;
}

/* ---------- Content containers ----------
 * What renders inside .wrapper-content:
 *  - pages:    .row > .col > .ibox (title + content)  |  .row > .col > .tabs-container > .tab-pane > .panel-body
 *              or bare h2 / hr / .row blocks
 *  - partials: [k-client-ajaxpartial] divs filled by _LayoutAjax views with bare h3 / .row / form / dl / table,
 *              usually sitting in a .panel-body, .ibox-content or .modal-body
 * Rule: the container's padding is the only gap at its edges. Its first child loses the top margin and its
 * last child the bottom margin - also one level down through a <form> and through .row > .col, which is how
 * most forms and detail views are built. Between blocks, the blocks' own margins apply.
 */

.ibox-content > :first-child, .panel-body > :first-child, .modal-body > :first-child,
.tab-pane > :first-child, [k-client-ajaxpartial] > :first-child,
.ibox-content > form > :first-child, .panel-body > form > :first-child, .modal-body > form > :first-child,
[k-client-ajaxpartial] > form > :first-child,
.ibox-content > .row:first-child > [class*="col-"] > :first-child,
.panel-body > .row:first-child > [class*="col-"] > :first-child,
[k-client-ajaxpartial] > .row:first-child > [class*="col-"] > :first-child {
    margin-top: 0;
}

.ibox-content > :last-child, .panel-body > :last-child, .modal-body > :last-child,
.tab-pane > :last-child, [k-client-ajaxpartial] > :last-child,
.ibox-content > form > :last-child, .panel-body > form > :last-child, .modal-body > form > :last-child,
[k-client-ajaxpartial] > form > :last-child,
.ibox-content > .row:last-child > [class*="col-"] > :last-child,
.panel-body > .row:last-child > [class*="col-"] > :last-child,
[k-client-ajaxpartial] > .row:last-child > [class*="col-"] > :last-child,
.ibox-content > .table-responsive:last-child > .table, .panel-body > .table-responsive:last-child > .table {
    margin-bottom: 0;
}

/* _LayoutAjax appends the view's Scripts section (and a messages <script>) after the markup, so inside a
   partial :last-child is a <script>. Skip non-rendered nodes. Kept as its own rule: browsers without
   ":nth-last-child(of S)" drop just this block. */
[k-client-ajaxpartial] > :nth-last-child(1 of :not(script, style, input[type=hidden])),
[k-client-ajaxpartial] > form > :nth-last-child(1 of :not(script, style, input[type=hidden])),
.panel-body > :nth-last-child(1 of :not(script, style, input[type=hidden])),
.modal-body > :nth-last-child(1 of :not(script, style, input[type=hidden])),
.ibox-content > :nth-last-child(1 of :not(script, style, input[type=hidden])) {
    margin-bottom: 0;
}

/* an empty partial (still loading, or nothing to show) takes no space */
[k-client-ajaxpartial]:empty {
    display: none;
}

/* section headings inside a container: 24px from the block above, 12px to their content */
.ibox-content > h3, .panel-body > h3, .modal-body > h3, [k-client-ajaxpartial] > h3,
.ibox-content > h4, .panel-body > h4, .modal-body > h4, [k-client-ajaxpartial] > h4,
.ibox-content > .row > [class*="col-"] > h3, .panel-body > .row > [class*="col-"] > h3 {
    margin-bottom: 12px;
}

    .ibox-content > h3:not(:first-child), .panel-body > h3:not(:first-child), .modal-body > h3:not(:first-child),
    [k-client-ajaxpartial] > h3:not(:first-child),
    .ibox-content > h4:not(:first-child), .panel-body > h4:not(:first-child), .modal-body > h4:not(:first-child),
    [k-client-ajaxpartial] > h4:not(:first-child),
    .ibox-content > .row > [class*="col-"] > h3:not(:first-child),
    .panel-body > .row > [class*="col-"] > h3:not(:first-child) {
        margin-top: 24px;
    }

/* bootstrap panels (accordions in partials) - same inset as cards */
.panel-body {
    padding: 20px;
}

dl {
    margin-bottom: 16px;
}

/* ---------- Tab containers (most detail pages) ----------
 * .tabs-container sits directly in .row > .col (not in an .ibox), so it is styled as a card itself:
 * the tab strip is the card header, the active .panel-body is the card body.
 */

.tabs-container {
    background: var(--kn-surface);
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-shadow);
    margin-bottom: 24px;
}

    .tabs-container > .nav-tabs, .tabs-container > .tabs-left > .nav-tabs {
        border-bottom: 1px solid var(--kn-border);
        padding: 0 8px;
    }

    /* the strip and the body are one card - no gap between them */
    .tabs-container .tab-content > .tab-pane {
        padding-top: 0;
    }

    .tabs-container .panel-body, .tabs-container .tab-pane .panel-body {
        background: transparent;
        border: 0;
        border-radius: 0 0 var(--kn-radius) var(--kn-radius);
        padding: 20px;
    }

    /* tabs nested inside a tab panel (some partials) - flat, no second card */
    .tabs-container .tabs-container {
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 0;
    }

/* list-group.clear-list (summary lists in partials) */
.list-group.clear-list .list-group-item {
    border-top-color: var(--kn-border);
    padding: 12px 0;
}

/* ---------- Cards (ibox) ---------- */

.ibox {
    background: var(--kn-surface);
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-shadow);
    margin-bottom: 24px;
}

/* symmetric 14px around a 20px line (the base theme used 14/7 plus heading margins, which sat the title low) */
.ibox-title {
    background-color: var(--kn-surface);
    border: 0;
    border-top: 3px solid var(--kn-accent);
    border-bottom: 1px solid var(--kn-border);
    border-radius: var(--kn-radius) var(--kn-radius) 0 0;
    color: var(--kn-primary);
    min-height: 0;
    padding: 14px 20px;
}

    .ibox-title:after {
        content: "";
        display: table;
        clear: both;
    }

    /* title-only card (page title in _Layout): no divider line under it */
    .ibox-title:last-child {
        border-bottom: 0;
        border-radius: var(--kn-radius);
    }

    .ibox-title h5 {
        color: var(--kn-primary);
        font-size: 15px;
        font-weight: 700;
        line-height: 20px;
        margin: 0;
    }

    .ibox-tools {
        line-height: 20px;
    }

    .ibox-tools a:not(.btn) {
        color: var(--kn-muted);
    }

        .ibox-tools a:not(.btn):hover {
            color: var(--kn-primary);
        }

.ibox.collapsed .ibox-title {
    border-bottom-color: transparent;
}

.ibox-content {
    background-color: var(--kn-surface);
    border: 0;
    border-radius: 0 0 var(--kn-radius) var(--kn-radius);
    padding: 20px;
}

    /* base theme pads the grid wrapper 30px at the bottom; the container padding already gives the gap */
    .ibox-content .dataTables_wrapper, .panel-body .dataTables_wrapper, .modal-body .dataTables_wrapper {
        padding-bottom: 0;
    }

    /* stacked sections inside one card */
    .ibox-content + .ibox-content {
        border-top: 1px solid var(--kn-border);
    }

/* .ibox-content used on its own (login, account pages) gets the full card treatment */
:not(.ibox):not(.panel-body) > .ibox-content {
    border: 1px solid var(--kn-border);
    border-top: 3px solid var(--kn-accent);
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-shadow);
}

.ibox-footer {
    background: var(--kn-surface-alt);
    border-top: 1px solid var(--kn-border);
    border-radius: 0 0 var(--kn-radius) var(--kn-radius);
    padding: 12px 20px;
}

/* ---------- Forms ---------- */

.control-label, .form-group > label {
    color: var(--kn-primary);
    font-weight: 600;
}

/* site.css tightened rows to 10px for the long forms; 12 keeps them compact on the 4px scale */
.form-group {
    margin-bottom: 12px;
}

/* stacked labels sit 4px above their field */
.form-group > label {
    margin-bottom: 4px;
}

.help-block {
    margin-top: 4px;
    margin-bottom: 0;
}

.form-control, .single-line {
    background-color: var(--kn-surface);
    border: 1px solid var(--kn-border-strong);
    border-radius: var(--kn-radius);
    color: var(--kn-text);
    height: 34px;
    padding: 6px 12px;
    font-size: 13px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

textarea.form-control {
    height: auto;
    min-height: 72px;
}

select[multiple].form-control, select[size].form-control {
    height: auto;
}

.input-sm.form-control, .form-group-sm .form-control {
    height: 30px;
    padding: 4px 10px;
    font-size: 12px;
}

.form-control:hover, .single-line:hover {
    border-color: var(--kn-primary);
}

.form-control:focus, .single-line:focus {
    border-color: var(--kn-accent) !important;
    box-shadow: var(--kn-focus-ring);
    outline: 0;
}

.form-control::placeholder {
    color: var(--kn-muted);
    opacity: .75;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: var(--kn-disabled-bg);
    border-color: var(--kn-border);
    color: var(--kn-muted);
    cursor: not-allowed;
}

.form-control[readonly]:not([disabled]) {
    cursor: default;
}

.has-error .form-control, .form-control.error, .form-control.input-validation-error {
    border-color: var(--kn-danger);
}

    .has-error .form-control:focus, .form-control.input-validation-error:focus {
        border-color: var(--kn-danger) !important;
        box-shadow: 0 0 0 3px rgba(180, 35, 24, .2);
    }

.has-error .control-label, .has-error .help-block, .field-validation-error, label.error {
    color: var(--kn-danger);
    font-weight: 600;
}

.has-warning .form-control {
    border-color: var(--kn-warning);
}

.has-success .form-control {
    border-color: var(--kn-success);
}

.input-group-addon {
    background-color: var(--kn-surface-alt);
    border: 1px solid var(--kn-border-strong);
    border-radius: var(--kn-radius);
    color: var(--kn-muted);
}

.input-group .form-control:first-child, .input-group-addon:first-child,
.input-group-btn:first-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .form-control:last-child, .input-group-addon:last-child,
.input-group-btn:last-child > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0;
}

input[type=checkbox], input[type=radio] {
    accent-color: var(--kn-primary);
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    cursor: pointer;
}

.checkbox label, .radio label {
    font-weight: 500;
}

/* select2 (default + bootstrap themes) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap .select2-selection {
    border: 1px solid var(--kn-border-strong) !important;
    border-radius: var(--kn-radius) !important;
    min-height: 34px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection,
.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
    border-color: var(--kn-accent) !important;
    box-shadow: var(--kn-focus-ring) !important;
}

.select2-container--default .select2-dropdown,
.select2-container--bootstrap .select2-dropdown {
    border: 1px solid var(--kn-border) !important;
    border-radius: var(--kn-radius) !important;
    box-shadow: var(--kn-shadow-lg) !important;
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: var(--kn-accent-tint);
    color: var(--kn-primary);
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--bootstrap .select2-results__option[aria-selected=true] {
    background-color: var(--kn-primary);
    color: #fff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    background-color: var(--kn-accent-tint);
    border: 1px solid var(--kn-accent);
    border-radius: var(--kn-radius-pill);
    color: var(--kn-primary);
    font-weight: 600;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--bootstrap.select2-container--disabled .select2-selection {
    background-color: var(--kn-disabled-bg) !important;
}

/* datepicker */
.datepicker.dropdown-menu {
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-shadow-lg);
    padding: 8px;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.active, .datepicker table tr td span.active,
.datepicker table tr td span.active:hover, .datepicker table tr td.selected {
    background: var(--kn-primary) !important;
    border-color: var(--kn-primary) !important;
    color: #fff !important;
    text-shadow: none;
}

.datepicker table tr td.today, .datepicker table tr td.today:hover {
    background: var(--kn-accent-tint) !important;
    color: var(--kn-primary) !important;
    box-shadow: inset 0 0 0 1px var(--kn-accent);
}

.datepicker table tr td.day:hover, .datepicker table tr td span:hover {
    background: var(--kn-accent-tint);
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--kn-radius);
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

    .btn:focus-visible {
        box-shadow: var(--kn-focus-ring) !important;
    }

    .btn:active, .btn.active {
        box-shadow: none;
    }

.btn-default, .btn-white {
    background: var(--kn-surface);
    border: 1px solid var(--kn-border-strong);
    color: var(--kn-primary);
}

    .btn-default:hover, .btn-default:focus, .btn-white:hover, .btn-white:focus {
        background: var(--kn-surface-alt);
        border-color: var(--kn-primary);
        color: var(--kn-primary);
    }

.btn-info {
    background-color: var(--kn-accent);
    border-color: var(--kn-accent);
    color: var(--kn-on-accent);
}

    .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
        background-color: var(--kn-accent-hover);
        border-color: var(--kn-accent-hover);
        color: var(--kn-on-accent);
    }

.btn-danger {
    background-color: var(--kn-danger);
    border-color: var(--kn-danger);
}

/* Legacy Planicare button classes (custom.css) re-mapped onto the brand palette */
.btn-bg-azul-planicare, .btn-bg-azul-escuro-planicare {
    background-color: var(--kn-primary);
    border-color: var(--kn-primary);
    color: #fff !important;
}

    .btn-bg-azul-planicare:hover, .btn-bg-azul-escuro-planicare:hover,
    .btn-bg-azul-planicare:focus, .btn-bg-azul-escuro-planicare:focus {
        background-color: var(--kn-primary-hover);
        border-color: var(--kn-primary-hover);
        color: #fff !important;
    }

.btn-bg-cinza-planicare {
    background-color: var(--kn-surface);
    border-color: var(--kn-border-strong);
    color: var(--kn-primary) !important;
}

    .btn-bg-cinza-planicare:hover, .btn-bg-cinza-planicare:focus {
        background-color: var(--kn-surface-alt) !important;
        border-color: var(--kn-primary) !important;
        color: var(--kn-primary) !important;
    }

.btn-bg-verde-agua-planicare, .btn-bg-verde-agua-escuro-planicare,
.btn-bg-azul-vivido-planicare, .btn-bg-azul-vivido-escuro-planicare,
.btn-bg-azul-celestial-planicare, .btn-bg-azul-celestial-escuro-planicare {
    background-color: var(--kn-accent);
    border-color: var(--kn-accent);
    color: var(--kn-on-accent) !important;
}

    .btn-bg-verde-agua-planicare:hover, .btn-bg-azul-vivido-planicare:hover, .btn-bg-azul-celestial-planicare:hover,
    .btn-bg-verde-agua-planicare:focus, .btn-bg-azul-vivido-planicare:focus, .btn-bg-azul-celestial-planicare:focus {
        background-color: var(--kn-accent-hover);
        border-color: var(--kn-accent-hover);
        color: var(--kn-on-accent) !important;
    }

.text-azul-planicare {
    color: var(--kn-primary);
}

/* ---------- Tables ---------- */

.table {
    background-color: var(--kn-surface);
    color: var(--kn-text);
    margin-bottom: 16px;
}

    .table > thead > tr > th, .table > thead > tr > td {
        background-color: var(--kn-surface-alt);
        border-bottom: 2px solid var(--kn-primary);
        color: var(--kn-primary);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        vertical-align: bottom;
    }

    .table > tbody > tr > td, .table > tbody > tr > th,
    .table > tfoot > tr > td, .table > tfoot > tr > th,
    .table > thead > tr > th, .table > thead > tr > td {
        border-top: 1px solid var(--kn-border);
        padding: 8px 12px;
        vertical-align: middle;
    }

    /* header gets more air above the label than below, so it reads as attached to its column */
    .table > thead > tr > th, .table > thead > tr > td {
        padding: 12px 12px 8px;
    }

    .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {
        border-top: 0;
    }

    .table > tfoot > tr > td, .table > tfoot > tr > th {
        background-color: var(--kn-surface-alt);
        border-top: 2px solid var(--kn-border);
        font-weight: 700;
    }

/* bordered tables keep the outer frame but lose vertical cell rules - horizontal hairlines read cleaner */
.table-bordered {
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius);
}

    .table-bordered > thead > tr > th, .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > th, .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > th, .table-bordered > tfoot > tr > td {
        border-left: 0;
        border-right: 0;
    }

    .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
        background-color: var(--kn-surface-alt);
        border-bottom: 2px solid var(--kn-primary);
    }

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--kn-surface-alt);
}

.table-hover > tbody > tr {
    transition: background-color .1s;
}

    .table-hover > tbody > tr:hover, .table-hover > tbody > tr:hover > td {
        background-color: var(--kn-accent-tint);
    }

.table > tbody > tr.active > td, .table > tbody > tr.selected > td,
table.dataTable tbody tr.selected, table.dataTable tbody tr.selected > td {
    background-color: var(--kn-accent-tint);
    box-shadow: inset 3px 0 0 var(--kn-accent);
}

.table-condensed > thead > tr > th, .table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > td {
    padding: 4px 8px;
}

.table .btn-xs, .table .btn-sm {
    border-radius: var(--kn-radius-sm);
}

.table-responsive {
    border: 0;
}

/* DataTables chrome - selectors match dataTables.bootstrap.min.css (div.x div.y) or they lose to it */
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_info {
    color: var(--kn-muted);
    font-weight: 500;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    height: 32px;
    border-radius: var(--kn-radius);
    margin-left: 8px;
}

/* controls row -> table -> info/pager row: 16px each way (table.dataTable already has 6px !important) */
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter {
    margin-bottom: 10px;
}

div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 10px;
}

/* 6px centres a 20px line against the 32px pager buttons */
div.dataTables_wrapper div.dataTables_info {
    font-size: 12px;
    line-height: 20px;
    padding-top: 6px;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after {
    color: var(--kn-accent-text);
}

/* ---------- Pagination ---------- */

.pagination > li > a, .pagination > li > span {
    border: 1px solid var(--kn-border);
    color: var(--kn-primary);
    font-weight: 600;
    margin-left: 4px;
    min-width: 32px;
    line-height: 20px;
    padding: 5px 10px;
    text-align: center;
    border-radius: var(--kn-radius) !important;
}

    .pagination > li > a:hover, .pagination > li > a:focus {
        background-color: var(--kn-accent-tint);
        border-color: var(--kn-accent);
        color: var(--kn-primary);
    }

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover,
.pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: var(--kn-primary);
    border-color: var(--kn-primary);
    color: #fff;
}

.pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > span {
    background-color: var(--kn-surface);
    border-color: var(--kn-border);
    color: var(--kn-border-strong);
}

/* ---------- Lists ---------- */

.list-group {
    border-radius: var(--kn-radius);
}

.list-group-item {
    background-color: var(--kn-surface);
    border: 1px solid var(--kn-border);
    color: var(--kn-text);
    padding: 12px 16px;
}

    .list-group-item:first-child {
        border-top-left-radius: var(--kn-radius);
        border-top-right-radius: var(--kn-radius);
    }

    .list-group-item:last-child {
        border-bottom-left-radius: var(--kn-radius);
        border-bottom-right-radius: var(--kn-radius);
    }

a.list-group-item, button.list-group-item {
    color: var(--kn-primary);
}

    a.list-group-item:hover, a.list-group-item:focus, button.list-group-item:hover, button.list-group-item:focus {
        background-color: var(--kn-accent-tint);
        color: var(--kn-primary);
    }

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    background-color: var(--kn-accent-tint);
    border-color: var(--kn-border);
    box-shadow: inset 3px 0 0 var(--kn-accent);
    color: var(--kn-primary);
    font-weight: 600;
    z-index: 1;
}

    .list-group-item.active .list-group-item-text {
        color: var(--kn-muted);
    }

.list-group-item-heading {
    color: var(--kn-primary);
    font-weight: 700;
}

.list-group-item-text {
    color: var(--kn-muted);
}

/* definition lists (detail views) */
dl dt {
    color: var(--kn-muted);
    font-weight: 600;
}

dl dd {
    color: var(--kn-text);
}

/* ---------- Tabs ---------- */

.nav-tabs {
    border-bottom: 1px solid var(--kn-border);
}

    .nav-tabs > li > a {
        border: 0 !important;
        border-radius: 0;
        color: var(--kn-muted);
        margin-right: 0;
        padding: 12px 16px;
        position: relative;
    }

        .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
            background-color: transparent;
            color: var(--kn-primary);
        }

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        background: transparent;
        color: var(--kn-primary);
        font-weight: 700;
    }

        .nav-tabs > li.active > a:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 3px;
            background: var(--kn-accent);
        }

.tab-content > .tab-pane {
    padding-top: 16px;
}

/* ---------- Labels & badges ---------- */

.label, .badge {
    border-radius: var(--kn-radius-pill);
    font-weight: 700;
    letter-spacing: .03em;
    padding: 2px 8px;
}

/* neutral fill only when the markup did not pick a colour (some views use bootstrap bg-* on badges) */
.label:not([class*="bg-"]), .badge:not([class*="bg-"]) {
    background-color: var(--kn-disabled-bg);
    color: var(--kn-primary);
}

.label.label-primary, .badge.badge-primary {
    background-color: var(--kn-primary);
    color: #fff;
}

.label.label-info, .badge.badge-info {
    background-color: var(--kn-accent);
    color: var(--kn-on-accent);
}

.label.label-success, .badge.badge-success {
    background-color: var(--kn-success-tint);
    color: var(--kn-success);
}

.label.label-warning, .badge.badge-warning {
    background-color: var(--kn-warning-tint);
    color: var(--kn-warning);
}

.label.label-danger, .badge.badge-danger {
    background-color: var(--kn-danger-tint);
    color: var(--kn-danger);
}

/* ---------- Alerts ---------- */

.alert {
    border: 0;
    border-left: 4px solid;
    border-radius: var(--kn-radius);
    font-weight: 500;
}

.alert-info {
    background-color: var(--kn-accent-tint);
    border-left-color: var(--kn-accent);
    color: var(--kn-primary);
}

.alert-success {
    background-color: var(--kn-success-tint);
    border-left-color: var(--kn-success);
    color: var(--kn-success);
}

.alert-warning {
    background-color: var(--kn-warning-tint);
    border-left-color: var(--kn-warning);
    color: var(--kn-warning);
}

.alert-danger {
    background-color: var(--kn-danger-tint);
    border-left-color: var(--kn-danger);
    color: var(--kn-danger);
}

/* ---------- Dropdowns & popovers ---------- */

.dropdown-menu {
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-shadow-lg);
    padding: 4px 0;
}

    .dropdown-menu > li > a {
        border-radius: var(--kn-radius-sm);
        margin: 0 4px;
        padding: 4px 12px;
    }

        .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-color: var(--kn-accent-tint);
            color: var(--kn-primary);
        }

    .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
        background-color: var(--kn-primary);
        color: #fff;
    }

.tooltip-inner {
    background-color: var(--kn-primary-ink);
    border-radius: var(--kn-radius);
    font-weight: 500;
}

/* ---------- Modals (headers reuse .ibox-title) ---------- */

.modal-content {
    border: 0;
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-shadow-lg);
    overflow: hidden;
}

.modal-header, .modal-header.ibox-title {
    border-radius: 0;
    padding: 16px 24px;
}

    .modal-header .modal-title {
        color: var(--kn-primary);
        font-size: 16px;
        font-weight: 700;
    }

/* base theme used 20px 30px 30px - match the 24px header/footer inset */
.modal-body {
    padding: 24px;
}

.modal-footer {
    background-color: var(--kn-surface-alt);
    border-top: 1px solid var(--kn-border);
    padding: 12px 24px;
}

/* custom.css forces a white close button (for the old navy header); headers are white now */
.close {
    color: var(--kn-muted) !important;
    font-weight: 400;
    text-shadow: none;
}

    .close:hover, .close:focus {
        color: var(--kn-primary) !important;
    }

/* bootstrap's 21px x reads tiny at weight 400 - enlarge it; line-height matches the title's (16px x 1.42857)
   so the header keeps its height, and the side padding widens the click target */
.modal-header .close {
    font-size: 30px;
    line-height: 23px;
    margin-top: 0;
    padding: 0 4px;
    margin-right: -4px;
}

.modal-backdrop.in {
    background-color: var(--kn-primary-ink);
    opacity: .55;
}

/* ---------- Navigation ---------- */

.navbar-default {
    border-right: 1px solid var(--kn-border);
}

.navbar-static-side .nav > li > a {
    border-radius: 0;
}

/* inset bar instead of the base theme's border-left, which pushed the active item's text 4px right */
.navbar-static-side .nav > li.active {
    background: var(--kn-accent-tint);
    border-left: 0;
    box-shadow: inset 4px 0 0 var(--kn-accent);
}

    .navbar-static-side .nav > li.active > a {
        color: var(--kn-primary);
    }

.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus {
    background-color: var(--kn-surface-alt);
    color: var(--kn-primary);
}

.navbar-static-side .nav-second-level li a {
    color: var(--kn-muted);
    font-weight: 500;
}

    .navbar-static-side .nav-second-level li a:hover {
        color: var(--kn-primary);
    }

    .navbar-static-side .nav-second-level li.active > a {
        color: var(--kn-primary);
        font-weight: 600;
    }

.navbar-static-top {
    background-color: var(--kn-surface);
    border-bottom: 1px solid var(--kn-border);
}

/* ---------- Panels & wells (legacy bootstrap containers) ---------- */

.panel {
    border-color: var(--kn-border);
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-shadow);
}

.panel-default > .panel-heading {
    background-color: var(--kn-surface-alt);
    border-color: var(--kn-border);
    color: var(--kn-primary);
    font-weight: 700;
}

.well {
    background-color: var(--kn-surface-alt);
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius);
    box-shadow: none;
}

/* ---------- SweetAlert ---------- */

.swal2-popup {
    border-radius: var(--kn-radius) !important;
    font-family: var(--kn-font-family) !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--kn-primary) !important;
    border-radius: var(--kn-radius) !important;
}

.swal2-styled.swal2-cancel {
    background-color: var(--kn-surface) !important;
    border: 1px solid var(--kn-border-strong) !important;
    border-radius: var(--kn-radius) !important;
    color: var(--kn-primary) !important;
}

.swal2-styled:focus {
    box-shadow: var(--kn-focus-ring) !important;
}

/* ---------- Scrollbars ---------- */

* {
    scrollbar-color: var(--kn-border-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--kn-border-strong);
    border: 2px solid transparent;
    border-radius: var(--kn-radius-pill);
    background-clip: padding-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--kn-muted);
    }