:root {
    --wattle-primary: #182029;
    --wattle-sidebar-fg-inactive: #94a5b5;
    --wattle-sidebar-fg-hover: #FFF;
    --wattle-sidebar-bg: #222e3c;
    --wattle-sidebar-bg-hover: #1F2A35;
    --wattle-top-nav-bg-hover: #f5f7fb;
}

/* Global */
body {
    box-sizing: border-box;
    margin: 0;
}

.form-control, .form-select, button, .alert, .form-custom-image, .col, .card,
.sidebar-link, .top-nav-link, .dropdown-menu, .badge, .incident-nav-link, .btn {
    transition: none !important;
    border-radius: 0.20rem !important;
}

.field-validation-error, #comment-error {
    font-size: 0.8rem !important;
    color: var(--bs-danger) !important;
}

.input-validation-error {
    border-color: var(--bs-danger) !important;
}

.dropdown-item:focus,
.dropdown-item:active {
    background-color: var(--bs-light) !important;
    color: var(--wattle-primary) !important;
}

a {
    text-decoration: none !important;
}

.ql-toolbar {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.20rem 0.20rem 0 0 !important;
}

.ql-container {
    border: 1px solid var(--bs-border-color) !important;
    border-top: 0 !important;
    border-radius: 0 0 0.20rem 0.20rem !important;
}

.page-link {
    color: #000 !important;
    transition: none !important;
    border-radius: 0 !important;
}

.active > .page-link {
    background-color: var(--wattle-sidebar-bg) !important;
    border-color: var(--wattle-sidebar-bg) !important;
    color: #FFF !important;
}

.dropdown-item.active, dropdown-item:active {
    background-color: var(--wattle-sidebar-bg) !important;
    color: #FFF !important;
}

#graph-content {
    min-height: 450px !important;
}

.contact-avatar {
    width: 75px !important;
    height: 75px !important;
    border-radius: 50%;
}

/* Layout */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Sidebar & Navigation */
.logo-container {
    background-color: var(--wattle-primary);
}

.sidebar {
    background-color: var(--wattle-sidebar-bg);
}

.sidebar-header, .sidebar-link {
    color: var(--wattle-sidebar-fg-inactive) !important;
    font-size: 0.9em !important;
}

.sidebar-link:hover,
.sidebar .active {
    background-color: var(--wattle-sidebar-bg-hover) !important;
    color: var(--wattle-sidebar-fg-hover) !important;
}

.sidebar--mobile .offcanvas-header {
    background-color: var(--wattle-primary) !important;
}

.sidebar--mobile {
    background-color: var(--wattle-sidebar-bg) !important;
}

/* Top-bar Navigation */
.top-navigation {
    min-height: 3.5rem;
}

.top-nav-link {
    color: var(--wattle-sidebar-fg-inactive) !important;
    font-size: 0.9em !important;
}

.top-nav-link:hover,
.top-nav-link:active,
.top-nav-link:focus {
    background-color: var(--wattle-top-nav-bg-hover) !important;
    color: var(--wattle-sidebar-bg) !important
}

.top-nav-dropdown-item:not(small) {
    color: var(--wattle-primary) !important;
    font-weight: 600 !important;
}

@media (min-width: 768px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        min-width: 250px;
        height: 100%;
        min-height: 100vh;
        position: sticky;
        top: 0;
    }

    .sidebar-nav-toggler {
        display: none;
    }
}

/* Authentication */
.full-bg-wrapper {
    width: 100%;
    min-height: 100vh;
    height: 100%;
    background-image: url("/images/wattle-bg.png");
    background-size: cover;
    background-position: center;
    overflow-y: hidden;
}

.form-custom-container label {
    font-size: 0.9rem;
}

/* Incident Index */
.incident-dashboard {
    background-color: var(--wattle-top-nav-bg-hover);
}

.incident-nav-link {
    color: var(--wattle-primary) !important;
    border-radius: 0.20rem 0.20rem 0 0 !important;
}

.incident-nav-link:hover,
.incident-nav-link.active {
    background-color: var(--wattle-top-nav-bg-hover) !important;
}

.incident-list-group a {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: var(--wattle-top-nav-bg-hover) !important;
    box-shadow: none;
}

th {
    color: var(--bs-secondary) !important;
}

tr > td > a {
    text-decoration: none !important;
    color: var(--wattle-primary) !important;
}

/* Incident Detail */
.incident-list-group-item h6 {
    font-size: 0.8em;
    text-transform: uppercase;
}

.incident-details-col {
    border-right: 0;
}

.custom-file-upload {
    font-size: 0.8em !important;
}

.activity-card-item img,
.activity-card-item table,
.activity-card-item meta,
.activity-card-item pre {
    display: none !important;
}

.activity-card-item,
.activity-card-item *,
.activity-card-item > * {
    font-size: 16px !important;
    font-family: inherit !important;
}

@media (min-width: 992px) {
    .incident-details-col {
        border-right: 1px solid var(--bs-border-color);
    }
}

/* Create Incident */
.create-incident-form-item label {
    font-size: 0.8em !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: var(--bs-secondary) !important;
}

.alert {
    border: 0 !important;
    border-radius: 10px !important;
}

.alert-danger {
    background-color: #fff0f0 !important;
    border-left: 10px solid #C10000 !important;
}

.alert-warning {
    background-color: #fdf7e7 !important;
    border-left: 10px solid #f0ab00 !important;
}

.alert-primary {
    background-color: #e7f1fa !important;
    border-left: 10px solid #38a0f3 !important;
}

#search-form {
    width: 100%;
}

@media (min-width: 575px) {
    #search-form {
        width: unset;
    }
}

.activity-card-item,
.description-card-text,
.incident-rct *:not(h6) {
    word-wrap: break-word !important;
    white-space: break-spaces !important;
}

@media (min-width: 575px) {
    .incident-dashboard #summary-data {
        max-width: 1050px;
    }
}

.incident-dashboard .dropdown-menu {
    min-width: 300px;
}

.incident-dashboard .dropdown-menu h6,
.incident-dashboard .dropdown-menu small,
.incident-dashboard .dropdown-menu a {
    overflow-wrap: break-word; 
    white-space: normal;
}

@media (min-width: 575px) {
    .incident-dashboard .dropdown-menu {
        min-width: 500px;
    }

    .incident-dashboard .dropdown-menu h6,
    .incident-dashboard .dropdown-menu small,
    .incident-dashboard .dropdown-menu a {
        overflow-wrap: unset;
        white-space: unset;
    }
}

@media (min-width: 768px) {
    .incident-dashboard .dropdown-menu {
        min-width: 650px;
    }
}

.activity-comment {
    white-space: normal;
    padding-top: 10px;
}

.activity-comment ul {
    margin-bottom: 10px;
}

.activity-comment p {
    margin: 0;
}