/*
 * Layout of netcare Reports: grey page, white cards for the sidebar and the content, breadcrumb as chips,
 * underlined tabs. Loaded after site.css and startpage.css, so it overrides their colors.
 * Few colors: the netcare blue #0099ff and its tint for everything active, greys for text, lines and the page.
 * Status colors (success, warning, danger) stay those of Bootstrap.
 */
:root {
    --nc-primary: #0099ff;
    --nc-primary-tint: #e6f5ff;
    --nc-text: #1d2939;
    --nc-muted: #6b7a90;
    --nc-border: #dfe6ee;
    --nc-page: #f3f6fa;
    --nc-danger-tint: #fdeff1;
    --nc-radius: 12px;
    --nc-radius-sm: 7px;
    --nc-shadow: 0 1px 2px rgba(29, 41, 57, .05), 0 2px 8px rgba(29, 41, 57, .04);
}

body {
    background-color: var(--nc-page);
    color: var(--nc-text);
}

a,
a:hover {
    color: var(--nc-primary);
}

h1, h2, h3, h4, h5, h6,
label {
    color: var(--nc-text);
}

.text-muted {
    color: var(--nc-muted) !important;
}

/* ---------- navigation */
.navbar-brand {
    padding: 0px 15px;
}

.navbar.fixed-top {
    border-bottom: 1px solid var(--nc-border);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--nc-text);
    border-bottom: 3px solid transparent;
    padding-bottom: 12px;
}

.navbar-light .navbar-nav .nav-link .fa {
    color: var(--nc-muted);
    margin-right: 2px;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover .fa {
    color: var(--nc-primary);
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .active>.nav-link:hover,
.navbar-light .navbar-nav .nav-link.active:hover,
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .show>.nav-link:hover {
    color: var(--nc-primary);
    background-color: var(--nc-primary-tint);
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active {
    border-bottom-color: var(--nc-primary);
}

.navbar-light .navbar-nav .active>.nav-link .fa,
.navbar-light .navbar-nav .nav-link.active .fa,
.navbar-light .navbar-nav .show>.nav-link .fa {
    color: var(--nc-primary);
}

.navbar .navbar-user-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    margin: -4px 6px -4px 0;
    border-radius: 50%;
    text-align: center;
    font-size: 13px;
    color: var(--nc-muted) !important;
    background-color: var(--nc-page);
}

.dropdown-menu {
    border-color: var(--nc-border);
    border-radius: var(--nc-radius-sm);
    box-shadow: 0 6px 20px rgba(29, 41, 57, .1);
}

.dropdown-menu .dropdown-item .fa {
    width: 18px;
    color: var(--nc-muted);
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item.active .fa,
.dropdown-item:active .fa {
    color: var(--nc-primary);
    background-color: var(--nc-primary-tint);
}

/* ---------- breadcrumb as chips */
.breadcrumb {
    padding: 0;
    margin-bottom: 18px;
    background: none;
    align-items: center;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item>a,
.breadcrumb-item.active>span {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 20px;
}

.breadcrumb-item>a {
    color: var(--nc-muted);
    background-color: #fff;
    border: 1px solid var(--nc-border);
}

.breadcrumb-item>a:hover,
.breadcrumb-item.breadcrumb-home>a {
    color: var(--nc-primary);
    text-decoration: none;
}

.breadcrumb-item.breadcrumb-home>a {
    padding: 4px 10px;
}

.breadcrumb-item.active>span {
    color: var(--nc-primary);
    background-color: var(--nc-primary-tint);
    border: 1px solid transparent;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: 6px;
}

.breadcrumb-item+.breadcrumb-item::before {
    padding-right: 6px;
    content: "\203A";
    font-size: 16px;
    color: var(--nc-muted);
}

/* ---------- cards: sidebar and content next to it; a sidebar-stack column holds the sidebar and further cards below it */
.app-card,
.row>.sidebar,
.sidebar-stack>.sidebar,
.row>.sidebar+[class*="col-"]:not(.content-stack),
.row>.sidebar-stack+[class*="col-"]:not(.content-stack) {
    background-color: #fff;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    box-shadow: var(--nc-shadow);
}

.app-card {
    padding: 20px;
    margin-bottom: 20px;
}

/* a page without a sidebar is one card, a page with its own container is a card as wide as the container */
.page-content:not(.page-plain):not(:has(.row>.sidebar)):not(:has(.row>.sidebar-stack)):not(:has(>.container)),
.page-content:not(.page-plain)>.container {
    background-color: #fff;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    box-shadow: var(--nc-shadow);
    padding: 20px;
    margin-bottom: 20px;
}

/* a page whose content wraps itself in .page-narrow (skills) is a narrower card in the middle, .page-small for a small form, .page-form for a horizontal one (controlling) */
.page-content:not(.page-plain):has(>.page-narrow) {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.page-content:not(.page-plain):has(>.page-narrow.page-small) {
    max-width: 700px;
}

.page-content:not(.page-plain):has(>.page-narrow.page-form) {
    max-width: 900px;
}

/* a page with its own container (settings, changelog) is as wide as its content and stands in the middle */
.page-content:not(.page-plain)>.container {
    width: fit-content;
    max-width: 860px;
}

/* the card has its own padding */
.page-content h1:first-child,
.page-content>.container>h1:first-child {
    margin-top: 0;
}

/* the cards in the stack have their own padding; a content-stack column holds several cards next to the sidebar */
.row>.sidebar-stack,
.row>.content-stack {
    padding: 0;
}

.app-card>.table:last-child {
    margin-bottom: 0;
}

/* the columns are the cards, the gap between them replaces the gutter of the grid */
.row:has(>.sidebar),
.row:has(>.sidebar-stack) {
    margin-left: 0;
    margin-right: 0;
    gap: 20px;
}

.row>.sidebar,
.sidebar-stack>.sidebar,
.row>.sidebar+[class*="col-"]:not(.content-stack),
.row>.sidebar-stack+[class*="col-"]:not(.content-stack) {
    padding: 20px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .row:has(>.sidebar),
    .row:has(>.sidebar-stack) {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .row>.sidebar,
    .row>.sidebar-stack {
        flex: 0 0 calc(25% - 15px);
        max-width: calc(25% - 15px);
    }

    .row>.sidebar+[class*="col-"],
    .row>.sidebar-stack+[class*="col-"] {
        flex: 1 1 0;
        max-width: none;
        min-width: 0;
    }
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 26px;
    line-height: 1.2;
    word-break: break-word;
}

.sidebar-title>.fa {
    flex: none;
    color: var(--nc-primary);
}

.sidebar hr,
.sidebar-stack>.app-card hr {
    margin: 14px 0;
    border-top-color: var(--nc-border);
}

/* ---------- buttons */
.btn {
    font-weight: normal;
    border-radius: var(--nc-radius-sm);
}

.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--nc-primary);
    border-color: var(--nc-primary);
    color: #fff;
}

.btn-primary:hover {
    filter: brightness(.92);
}

.btn-outline-secondary {
    color: var(--nc-text);
    background-color: #fff;
    border-color: var(--nc-border);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary.focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show>.btn-outline-secondary.dropdown-toggle {
    color: var(--nc-primary);
    background-color: var(--nc-primary-tint);
    border-color: var(--nc-primary);
    box-shadow: none;
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    color: var(--nc-muted);
    background-color: #fff;
    border-color: var(--nc-border);
}

/* the actions of a sidebar or of the card below it: light, left aligned, the icons in one column */
.sidebar .btn-block.btn-outline-secondary,
.sidebar-stack>.app-card .btn-block.btn-outline-secondary {
    padding: 8px 14px;
    text-align: left;
    background-color: var(--nc-page);
}

.sidebar .btn-block.btn-outline-secondary:hover,
.sidebar-stack>.app-card .btn-block.btn-outline-secondary:hover,
.sidebar .btn-block.btn-outline-secondary:focus,
.sidebar-stack>.app-card .btn-block.btn-outline-secondary:focus {
    background-color: var(--nc-primary-tint);
}

.sidebar .btn-block.btn-outline-secondary>.fa:first-child,
.sidebar-stack>.app-card .btn-block.btn-outline-secondary>.fa:first-child {
    width: 22px;
    margin-right: 10px;
    text-align: center;
    color: var(--nc-muted);
}

.sidebar .btn-block.btn-outline-secondary:hover>.fa:first-child,
.sidebar-stack>.app-card .btn-block.btn-outline-secondary:hover>.fa:first-child {
    color: var(--nc-primary);
}

.sidebar .btn-block+.btn-block,
.sidebar-stack>.app-card .btn-block+.btn-block {
    margin-top: 8px;
}

/* segmented switch, e.g. hours or person days */
.btn-group.d-flex {
    border-radius: var(--nc-radius-sm);
    background-color: var(--nc-page);
}

.btn-group.d-flex>.btn-outline-secondary {
    text-align: center;
    border-color: transparent;
    border-radius: 5px !important;
    background-color: transparent;
}

/* ---------- forms */
.form-control,
.input-group-text,
.select2-container--krajee-bs4 .select2-selection {
    border-color: var(--nc-border);
    border-radius: var(--nc-radius-sm);
}

/* a focused field only gets the main colour as border, no Bootstrap focus ring around fields and buttons */
.form-control:focus,
.custom-select:focus,
.select2-container--krajee-bs4.select2-container--focus .select2-selection,
.select2-container--krajee-bs4.select2-container--open:not(.select2-container--disabled) .select2-selection,
.select2-container--krajee-bs4:not(.select2-container--disabled) .select2-selection:focus {
    border-color: var(--nc-primary);
    box-shadow: none;
}

.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.custom-control-input:focus~.custom-control-label::before,
.page-link:focus {
    box-shadow: none !important;
}

.input-group-text {
    color: var(--nc-muted);
    background-color: var(--nc-page);
}

/* ---------- tabs with underline */
.nav-tabs {
    border-bottom: 1px solid var(--nc-border);
    margin-bottom: 14px;
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 10px 18px;
    color: var(--nc-muted);
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: var(--nc-radius-sm) var(--nc-radius-sm) 0 0;
}

.nav-tabs .nav-link .fa {
    margin-right: 4px;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--nc-primary);
    background-color: transparent;
    border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-item.show .nav-link {
    color: var(--nc-primary);
    background-color: var(--nc-primary-tint);
    border: none;
    border-bottom: 3px solid var(--nc-primary);
}

.tabs-x.tab-bordered .tab-content {
    padding: 0;
    border: none;
    box-shadow: none;
}

/* ---------- panels of the grids and other cards */
.card {
    border-color: var(--nc-border);
    border-radius: 10px;
}

/* white heads, the cards stand on the grey page; kartik adds bg-light, which Bootstrap sets !important */
.card-header:not([class*="alert-"]),
.card-header.bg-light,
.kv-panel-before {
    background-color: #fff !important;
    border-bottom: 1px solid var(--nc-border);
}

.card-header:first-child {
    border-radius: 10px 10px 0 0;
}

.kv-panel-before {
    padding: 8px 12px;
}

/* panel heading with the title on the left, the number of entries and the toolbar on the right */
.panel-heading-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.panel-heading-row>.panel-heading-title {
    margin: 0 auto 0 0;
    font-size: 17px;
    font-weight: bold;
}

.panel-heading-row>.sidebar-title {
    margin: 0 auto 0 0;
}

.panel-heading-row>.panel-heading-title>.fa {
    margin-right: 8px;
    color: var(--nc-primary);
}

.panel-heading-row .summary {
    font-size: 13px;
    color: var(--nc-muted);
}

.panel-heading-row .btn-toolbar {
    margin: 0;
}

/* ---------- tables */
.table {
    color: var(--nc-text);
}

.table thead th,
.kv-grid-table thead th {
    vertical-align: middle;
    background-color: var(--nc-page);
    border-bottom: 1px solid var(--nc-border);
    font-weight: bold;
}

.table td,
.table th,
.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--nc-border);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafbfd;
}

.table-hover tbody tr:hover {
    background-color: var(--nc-primary-tint);
}

.kv-page-summary,
.kv-page-summary td,
.table .kv-page-summary {
    background-color: var(--nc-page) !important;
    border-top: 2px solid var(--nc-border) !important;
    font-weight: bold;
}

.table-danger,
.table-danger>td,
.table-danger>th {
    background-color: var(--nc-danger-tint);
}

/* key-value table with an icon in front of every label, e.g. the head data of an order */
.detail-table {
    margin-bottom: 20px;
}

.detail-table th,
.detail-table td {
    padding: 9px 10px;
    vertical-align: top;
}

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

.detail-table th>.fa:first-child {
    width: 20px;
    margin-right: 10px;
    text-align: center;
    color: var(--nc-muted);
}

/* a row that needs attention, as a tinted box */
.detail-table tr.detail-highlight>th,
.detail-table tr.detail-highlight>td {
    background-color: var(--nc-primary-tint);
    border-top-color: #fff;
}

.detail-table tr.detail-highlight>th,
.detail-table tr.detail-highlight>th>.fa {
    color: var(--nc-primary);
}

.detail-table tr.detail-highlight>th {
    border-radius: var(--nc-radius-sm) 0 0 var(--nc-radius-sm);
}

.detail-table tr.detail-highlight>td {
    border-radius: 0 var(--nc-radius-sm) var(--nc-radius-sm) 0;
}

/* a problem (bookings after the service end): red instead of blue */
.detail-table tr.detail-highlight.detail-danger>th,
.detail-table tr.detail-highlight.detail-danger>td {
    background-color: var(--nc-danger-tint);
}

.detail-table tr.detail-highlight.detail-danger>th,
.detail-table tr.detail-highlight.detail-danger>th>.fa,
.detail-table tr.detail-highlight.detail-danger>td>strong {
    color: var(--danger);
}

/* ---------- progress */
.progress {
    background-color: var(--nc-border);
    border-radius: 6px;
}

/* ---------- badges and alerts */
.badge {
    font-weight: bold;
}

.badge-secondary {
    color: var(--nc-text);
    background-color: var(--nc-border);
}

.alert {
    border-radius: var(--nc-radius-sm);
}

.alert-info {
    color: var(--nc-text);
    background-color: var(--nc-primary-tint);
    border-color: var(--nc-primary-tint);
}

/* ---------- start page tiles: white rounded cards like the other cards, lifted on hover */
.products .product {
    background-color: #fff;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    box-shadow: var(--nc-shadow);
    overflow: hidden;
    padding-bottom: 0;
    transition: transform .2s ease, box-shadow .2s ease;
}

.products .product:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(29, 41, 57, .10);
}

.products .product-image {
    box-shadow: none;
    background-color: #fff;
}

.products .image {
    min-width: 0;
    margin-bottom: 0;
}

.products .excerpt {
    /* above the Font Awesome icons, which are positioned */
    z-index: 2;
    background-color: var(--nc-primary);
    font-weight: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.products .excerpt p:first-child {
    margin-bottom: 12px;
}

.products .excerpt-badge {
    padding: 4px 18px;
}

.products .product-title {
    display: block;
    padding: 12px 15px 16px;
    margin-top: 0;
    color: var(--nc-text);
}

.products .product-title h2 {
    margin: 0;
    font-size: 18px;
}

.products .product-title:hover h2,
.products .product:hover .product-title h2 {
    color: var(--nc-primary);
}

/* the reflection of the icons drawn with Font Awesome 5 (the images have it built in) */
.product-image .fa::before {
    position: relative;
    top: -8px;
}

.product-image .fa::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    top: calc(50% + 17px);
}

.product-image .fa-dashboard::after {
    content: "\f3fd";
}

.product-image .fa-line-chart::after {
    content: "\f201";
}

/* a card head with an alert colour (checks of an order) is a light tint with normal text, only the icon has the colour */
.card-header.alert-danger,
.card-header.alert-warning,
.card-header.alert-success {
    color: var(--nc-text);
    font-weight: bold;
    border-bottom: 1px solid var(--nc-border);
}

.card-header.alert-danger {
    background-color: var(--nc-danger-tint);
}

.card-header.alert-warning {
    background-color: #fff8e6;
}

.card-header.alert-success {
    background-color: #eaf7ee;
}

.card-header.alert-danger>.fa {
    color: #dc3545;
}

.card-header.alert-warning>.fa {
    color: #f0a400;
}

.card-header.alert-success>.fa {
    color: #28a745;
}

/* no inconsistent bookings in the last months, but older ones to check: a slim line instead of the red panel */
.inconsistent-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--nc-muted);
}

.inconsistent-hint>span>.fa {
    margin-right: 8px;
    color: #28a745;
}

.app-card:has(>.inconsistent-hint) {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* in a report that is one card (booking report) it stands above the tabs */
.grids>.inconsistent-hint {
    margin-bottom: 15px;
    padding: 8px 12px;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-sm);
}

/* the inconsistent bookings: one red panel with a part for the time and one for the project bookings, above the tabs
   (booking report) or the other checks (controlling) */
.inconsistent-entries {
    margin-bottom: 15px;
}

/* in a card of its own (project report) */
.app-card>.inconsistent-entries {
    margin-bottom: 0;
}

.inconsistent-entries>.card-header .btn-sm {
    padding: 1px 8px;
}

.inconsistent-note,
.inconsistent-section-title,
.inconsistent-section-none {
    padding: 8px 12px;
}

.inconsistent-section {
    border-top: 1px solid var(--nc-border);
}

.card-header+.inconsistent-section {
    border-top: 0;
}

.inconsistent-section-title {
    font-weight: bold;
}

.inconsistent-section-title>.fa,
.inconsistent-section-none>.fa {
    margin-right: 8px;
    color: #dc3545;
}

.inconsistent-section-title>.badge {
    margin-left: 4px;
}

.inconsistent-section-none {
    color: var(--nc-muted);
}

.inconsistent-section-none>.fa {
    color: #28a745;
}

.inconsistent-section .kv-grid-table {
    margin-bottom: 0;
}

/* the tables in line with the titles */
.inconsistent-section .kv-grid-table th:first-child,
.inconsistent-section .kv-grid-table td:first-child {
    padding-left: 12px;
}

.inconsistent-section .kv-grid-table th:last-child,
.inconsistent-section .kv-grid-table td:last-child {
    padding-right: 12px;
}

/* the checked period and the pages below the inconsistent bookings: a slim line */
.card-footer.inconsistent-pager {
    padding: 4px 12px;
    font-size: 13px;
    color: var(--nc-muted);
    background-color: #fff;
    border-radius: 0 0 10px 10px;
}

.inconsistent-pager .btn-sm {
    padding: 1px 8px;
    font-size: 12px;
}

/* the same in a grid panel heading (inconsistent bookings) */
.card-header.alert-danger .panel-heading-title>.fa {
    color: #dc3545;
}

.card-header.alert-danger .panel-heading-row .summary {
    font-weight: normal;
}

/* in a red frame (border-danger) the line below the head is red as well */
.card.border-danger>.card-header.alert-danger {
    border-bottom-color: #dc3545;
}

/* ---------- footer */
.footer {
    background-color: #fff;
    border-top: 1px solid var(--nc-border);
    color: var(--nc-muted);
    font-size: 13px;
}

/* personal settings: title with the icon in a tinted square, sections with their module icon, the table in a frame */
.site-settings .settings-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.site-settings .settings-title-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--nc-radius-sm);
    background-color: var(--nc-primary-tint);
    color: var(--nc-primary);
    font-size: 22px;
}

.site-settings .settings-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 22px;
}

.site-settings .settings-section>.fa {
    color: var(--nc-primary);
    font-size: 20px;
}

.site-settings .settings-subtitle {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
}

.site-settings .settings-hint {
    margin-bottom: 16px;
    color: var(--nc-muted);
    font-size: 13px;
}

.site-settings .settings-table {
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-sm);
}

.site-settings .settings-table>.table {
    margin-bottom: 0;
}

.site-settings .settings-table>.table thead th {
    border-top: 0;
    background-color: var(--nc-page);
}

.site-settings .settings-table>.table td,
.site-settings .settings-table>.table th {
    padding: 8px 14px;
    vertical-align: middle;
}