/* ABOUTME: Shared CSS variables and styles for both main and admin apps. */
/* ABOUTME: Each app's base template adds its own navbar color override. */
:root {
    --psd-green: #466857;
    --psd-green-light: #8CAB4F;
    --psd-beige: #D7CDBE;
    --psd-charcoal: #221E1F;
    --psd-off-white: #f7f9f9;
    --psd-slate: #5a6d7e;
}
body {
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--psd-off-white);
    color: var(--psd-charcoal);
}
.navbar .nav-link:hover { color: var(--psd-beige) !important; }
.navbar .nav-link.active { border-bottom: 2px solid white; border-radius: 0; }
.navbar .nav-app-switcher {
    color: var(--psd-beige);
    border-color: var(--psd-beige);
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
    align-self: center;
}
.btn-primary {
    background-color: var(--psd-green);
    border-color: var(--psd-green);
}
.btn-primary:hover {
    background-color: #3a5a4b;
    border-color: #3a5a4b;
}
.btn-outline-primary {
    color: var(--psd-green);
    border-color: var(--psd-green);
}
.btn-outline-primary:hover {
    background-color: var(--psd-green);
    border-color: var(--psd-green);
}
.table-light { background-color: var(--psd-beige) !important; }
.table-light th { color: var(--psd-charcoal); }
a { color: var(--psd-green); }
a:hover { color: #3a5a4b; }
.card-header {
    background-color: var(--psd-green);
    color: white;
}
.card-header-records {
    background-color: var(--psd-beige);
    color: var(--psd-charcoal);
}
.card-header-messages {
    background-color: var(--psd-slate);
    color: white;
}
/* Message thread: a flat, full-width list that reads well for long messages.
   A thin left rule separates entries; messages hidden from the requester are
   tinted amber and tagged Private. */
.msg-thread {
    display: flex;
    flex-direction: column;
}
.msg-item {
    padding-left: 0.75rem;
    border-left: 3px solid var(--psd-beige);
}
.msg-item:not(:first-child) {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #ececec;
}
.msg-item-private {
    border-left-color: #d9b75a;
    background-color: #fbf3df;
    padding: 0.5rem 0.75rem;
    border-radius: 0 0.4rem 0.4rem 0;
}
.msg-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.msg-name {
    font-weight: 700;
    font-size: 0.9rem;
    cursor: help;
}
.msg-role {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 0.7rem;
    vertical-align: middle;
}
.msg-role-requester {
    background-color: #e8efdc;
    color: #4a6321;
}
.msg-role-technician {
    background-color: #e3e8ec;
    color: #46586a;
}
.msg-time {
    font-size: 0.78rem;
    color: #6c757d;
    white-space: nowrap;
}
.msg-sub {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.1rem;
}
.msg-private-tag {
    color: #6b5400;
    font-weight: 600;
}
.msg-body {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0.5rem 0 0;
    font-size: 1.05rem;
    line-height: 1.5;
}
/* Bubble chips for the multi-recipient message picker (rendered in shared.js). */
.recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--psd-beige);
    color: var(--psd-charcoal);
    border-radius: 0.8rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.82rem;
}
.recipient-chip-remove {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    line-height: 1;
    font-size: 1.05rem;
    cursor: pointer;
}
.recipient-chip-remove:hover { color: var(--psd-green); }
.alert-success {
    background-color: #e8f0e4;
    border-color: var(--psd-green-light);
    color: var(--psd-charcoal);
}
h2 { color: var(--psd-green); }
.modal-header-brand {
    background-color: var(--psd-green);
    color: white;
}
/* Multi-select checkbox dropdowns on the admin Audit Logs page. */
.check-dropdown .dropdown-menu { max-height: 300px; overflow-y: auto; min-width: 220px; }
.check-dropdown .dropdown-item { cursor: pointer; }
.check-dropdown .dropdown-item:active { background: inherit; color: inherit; }