/* ============================================================================
   Base Styles
   ============================================================================ */

body {
    font-family: "Barlow", sans-serif;
}


/* ============================================================================
   Layout & Navigation
   ============================================================================ */

/* Sidebar */
.sidebar-nav {
    background-color: #f3f0eb;
    padding-top: 16px;
}

.sidebar-brand {
    background-color: white;
    height: 150px;
    padding: 16px;
}

.sidebar-header {
    color: #495057;
}

.sidebar-link {
    background: #f3f0eb !important;
}

.sidebar-link, a.sidebar-link {
    color: #343a4080;
    background: #f3f0eb !important;
}

.sidebar-link:hover {
    color: #343a40bf;
    background: #ced4da80;
    border-left-color: transparent
}

.sidebar-link i, .sidebar-link svg, a.sidebar-link i, a.sidebar-link svg {
    margin-right: .75rem;
    color: #343a4080;
}

.sidebar-item.active a i,
.sidebar-item.active a span {
    color: #006fb2 !important;
    font-weight: bold;
}

.sidebar-item:hover a i,
.sidebar-item:hover a span {
    color: #006fb2 !important;
}

/* Navbar */
.navbar-bg {
    background: linear-gradient(to right, #f3f0eb, #b1d3e8);
    height: 150px;
}

.navbar-title {
    color: #006fb2;
    margin-bottom: 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 36px;
}


/* ============================================================================
   Bootstrap Overrides
   ============================================================================ */

/* Alerts */
.alert {
    color: #212529;
    display: flex;
    padding: 0;
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 0.95rem;
    --bs-alert-padding-y: 0.95rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: 0 solid var(--bs-alert-border-color);
    --bs-alert-border-radius: var(--bs-border-radius);
    --bs-alert-link-color: inherit;
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
    margin-bottom: var(--bs-alert-margin-bottom);
    position: relative;
}

.alert-dismissible {
    padding-right: 2.85rem;
}

.alert-icon {
    background: rgba(0, 0, 0, .05);
    padding: .95rem;
}

.alert-dismissible .btn-close {
    padding: 1.1875rem .95rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.alert-message {
    box-sizing: border-box;
    padding: .95rem;
    width: 100%;
}

.alert-danger {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

.alert-danger:not(.alert-outline):not(.alert-outline-coloured) {
    background: #f8d7da;
}

.alert-warning {
    --bs-alert-color: var(--bs-warning-text-emphasis);
    --bs-alert-bg: var(--bs-warning-bg-subtle);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
    --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

.alert-success {
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-border-color: var(--bs-success-border-subtle);
    --bs-alert-link-color: var(--bs-success-text-emphasis);
}

.alert-info {
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-border-color: var(--bs-info-border-subtle);
    --bs-alert-link-color: var(--bs-info-text-emphasis);
}

/* Pagination */
.active > .page-link,
.page-link.active {
    background-color: #65a9d1;
    border-color: #65a9d1;
}

/* Cards */
a.card-body:hover p {
    text-decoration: underline;
}

/* Background Colors */
.text-bg-primary {
    color: #000 !important;
    background-color: RGBA(101, 169, 209, var(--bs-bg-opacity, 1)) !important;
}


/* ============================================================================
   Third-Party Library Overrides
   ============================================================================ */

/* Select2 - Override Bootstrap 5 theme to use AdminKit primary color */
.select2-container--bootstrap-5 .select2-selection--single:focus,
.select2-container--bootstrap-5 .select2-selection--multiple:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #65a9d1 !important;
    box-shadow: 0 0 0 0.25rem rgba(101, 169, 209, 0.25) !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #65a9d1 !important;
    color: #fff !important;
}

.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: rgba(101, 169, 209, 0.1) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: #65a9d1 !important;
    border-color: #65a9d1 !important;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
    border-color: #65a9d1 !important;
    box-shadow: 0 0 0 0.25rem rgba(101, 169, 209, 0.25) !important;
}

.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--bootstrap-5 .select2-results__option[aria-selected=true] {
    background-color: #65a9d1 !important;
    color: #fff !important;
}

.select2-container--bootstrap-5.select2-container--open .select2-dropdown {
    border-color: #65a9d1 !important;
}

.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection {
    border-bottom-color: #65a9d1 !important;
}

.select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection {
    border-top-color: #65a9d1 !important;
}

/* Custom Select */
select.hide-first:focus option:first-child {
    display: none;
}

/* DataTables */
div.dt-container div.dt-paging ul.pagination li.dt-paging-button a {
    justify-content: flex-end !important;
    margin: 2px 0 !important;
    white-space: nowrap !important;
    font-size: 0.75rem !important;
}

/* FullCalendar */
.day-cell-infobox {
    position: absolute;
    left: 0;
    top: 1.5rem;
    width: 100%;
    max-width: 100%;
    white-space: pre-line;
    height: 100%;
    height: calc(100% - 1.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 14px;
}


/* ============================================================================
   Custom Components
   ============================================================================ */

/* Profile Pictures */
.profilepic {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    width: 96px;
    height: 96px;
}

.profilepic.profilepic-sm {
    width: 48px;
    height: 48px;
    vertical-align: inherit;
}

.profilepic.profilepic-xs {
    width: 24px;
    height: 24px;
    vertical-align: inherit;
}

/* Image Upload Box */
.img-upload-box {
    background-color: #cacaca;
    position: relative;
    width: 100%;
    padding-bottom: 80%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: zoom-in;
}

.img-upload-box[role="button"] {
    cursor: pointer;
}

.img-upload-box::after {
    content: '\f030';
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 7 Free"; font-weight: 900;
    display: block;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 10vmin;
}

.img-upload-box[style*="background-image"] {
    background-color: transparent;
    border: 1px solid #cacaca;
}

.img-upload-box[style*="background-image"]::after {
    display: none;
}

.img-upload-box > button {
    display: none;
}

.img-upload-box[style*="background-image"] > button {
    display: block;
}

.img-upload-box-file-input {
    display: none;
}


/* ============================================================================
   Utility Classes
   ============================================================================ */

.gap-inside > :not(:first-child) {
    margin-left: 0.25rem;
}