:root {
    --navbar-size: 56px;
}

body {
    margin: 0;
}

.body-content {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

.hd-col {
    display: flex;
    flex: 1 0 0;
}

.hd-container {
    display: flex;
    height: calc(100vh - var(--navbar-size, 56px));
}

.hd-nav-col {
    display: flex;
    flex-direction: row;
    flex: 0 1 auto;
    max-width: 40%;
}

.hd-nav-expandable {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
   padding: 6px;
}

.resizable-border-hover:active {
    cursor: col-resize;
    border-color: #5897FE !important;
}

.resizable-border-hover:hover {
    cursor: col-resize;
    border-color: #5897FE !important;
}

.hd-nav-main {
    display:flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin: 6px;
}

.hd-nav-ticket-container {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    overflow-y:auto;
}

.hd-nav-ticket-item {
    display:flex;
    flex-direction:column;
    flex: 0 1 auto
}

.hd-main-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.hd-nav-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    font-size: 1.5em;
    justify-content:left
}

.hd-nav-icon:hover {
    background-color:blue;
}

.hd-main-subject {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.hd-subject-header {
    display: flex;
    flex-direction: row;
    align-items:baseline;
    margin-right:6px;
    margin-left:6px;
}

.hd-subject-subHeader {
    display: flex;
    flex-direction: row;
    margin-right:6px;
    margin-left:6px;
}

.hd-subject-nav {
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    align-items:center;
    height: 3em;
}

.hd-subject-nav-item {
    display:flex;
    flex: 1 0 auto;
    justify-content:space-around;
    align-items:center;
    font-size:1.1em;
}

.hd-main-body {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    padding-left: 16px;
    height: 60%;
    overflow: auto;
    background-color: #f7eded;
}

.hd-email-card {
    display: flex;
    flex: 0 0 0;
    flex-direction: column;
    margin-bottom: 1em;
    padding: 0.5em;
    background-color:white;
}

.hd-email-card:last-child {
    margin-top: 16px;
}


.hd-email-header {
    display: flex;
    flex-direction: row;
    flex: 0 0 0;
}

.hd-email-body {
}

.hd-email-footer {
    display: flex;
    flex: 0 0 0;
    flex-direction: row;
    align-items: center;
}

.hd-main-compose {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    max-height: 15em;
}

.hd-compose-body {
    display: flex;
    flex: 1 0 auto;
    flex-direction: row;
    padding: 1em
}

.hd-compose-right {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    padding: 6px;
}

.hd-compose-textarea {
    flex: 0 1 auto;
    resize: none;
    border: none;
}

.hd-compose-resizable {
    flex: 0 0 auto;
    border-top: 8px solid #161c2d;
    border-width: 3px;
    line-height: 0px;
}

.hd-compose-resizable:hover {
    cursor: n-resize;
    border-color: #5897FE !important;
}

    .hd-compose-resizable:active {
        cursor: n-resize;
        border-color: #5897FE !important;
    }

/* Pending attachments render as compact wrapped pills (shared by the classic
   compose, the redesigned composer, create, and portal forms) instead of
   full-width stacked rows - a handful of files costs one thin row, not the
   whole compose area. */
.file-attachment-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.attach-chip {
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    max-width: 100%;
    background: #fff;
    font-size: 0.875rem;
}

.attach-chip-icon {
    color: #6c757d;
}

.attach-chip-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attach-chip-size {
    color: #6c757d;
    /* Same size as the name: the two spans are box-centered by the flex row, so
       differing font sizes put their baselines a subpixel apart, which rasterizes
       as a visible step. Hierarchy comes from the muted color. */
    font-size: 0.875rem;
    white-space: nowrap;
}

.attach-chip .js-attachment-times {
    cursor: pointer;
    opacity: 0.55;
}

.attach-chip .js-attachment-times:hover {
    opacity: 1;
}

.attach-chip-total {
    width: 100%;
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
}

/* The reply window is a fixed-height flex column, so an uploader that grows
   pushes the send row out of the box with no way to reach it. The uploader
   yields first (scrolls when squeezed), the pill rows cap themselves, and the
   editor keeps a usable floor - the send row always fits. */
#tinyReplyWindow #attachmentComponent {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#tinyReplyWindow .file-attachment-list {
    margin-top: 0.5rem;
    max-height: min(9rem, 18vh);
    overflow-y: auto;
}

#tinyReplyWindow .tinyMCEContainer {
    min-height: 3em;
}

/* The reply window has no drop zone - the toolbar attachment button opens the
   file picker directly (create and portal pages keep the full-size zone). The
   pill list only surfaces once something is attached. */
#tinyReplyWindow .attachment-file-div {
    display: none;
}

#tinyReplyWindow .file-attachment-list:not(:has(.js-attachment-item)) {
    display: none;
}

.hd-label {
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding: 0.10rem;
}

.prevent-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.rotate-90 {
    transform: rotate(90deg);
    transform-origin: center;
}

.rotate-180 {
    writing-mode: vertical-lr;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
}

.pinnable {
    cursor: pointer;
}

.pinnable-left {
    width: .35em;
    background-color: #DEE2E6;
}

.pinnable:hover > .pinnable-left {
    background-color: #0FB0FF !important;
}

.pinnable:hover > .js-taskCounter > .js-taskCount {
    background-color: #0FB0FF !important;
}

.pinnable-pinned {
    cursor: pointer;
}

.pinnable-pinned-left {
    height: .35em;
    background-color: #DEE2E6;
}

.pinnable-pinned:hover > .pinnable-pinned-left {
    background-color: #0FB0FF;
}

.pinnable-pinned-container .pinnable-pinned:not(:first-child) {
    margin-left: 0.5rem;
}

.disable-scrollbars::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
}

.disable-scrollbars {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.hd-label-container {
    padding-right:.5em;
}
/*
.trumbowyg-box,
.trumbowyg-editor {
    min-height: 100px !important;
}
*/
.profile-img {
    border-radius:50%;
    max-width:32px;
    max-height:32px;
}

.right-panel{
    border-left:solid 3px #DDD;
}

.panel-segment {
    margin-bottom: 10px;
    margin-left:5px;
}

.relationship-item-name{
    font-weight: bold;
    display:block;
}
.relationship-item-description{
    display:block;
    font-size:0.8rem;
}

.sibling-header {
    border-bottom: solid 3px rgb(25,135,84);
}

.guardian-header {
    border-bottom: solid 3px rgb(13,110,253);
}

/* Relationship navigation breadcrumb styling */
.js-breadcrumb-container {
    background-color: #f8f9fa;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.js-breadcrumb-container .breadcrumb {
    margin-bottom: 0;
    background: transparent;
    padding: 0;
}

.js-breadcrumb-container .breadcrumb-item a {
    color: #0d6efd;
    text-decoration: none;
}

.js-breadcrumb-container .breadcrumb-item a:hover {
    text-decoration: underline;
}

/* Clickable relationship items */
.js-relationship-navigate {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.js-relationship-navigate:hover {
    background-color: #e9ecef !important;
}

.js-relationship-navigate .fa-chevron-right {
    opacity: 0.5;
    transition: opacity 0.15s ease-in-out;
}

.js-relationship-navigate:hover .fa-chevron-right {
    opacity: 1;
}

.user-badge-text {
    font-family: Menlo, Consolas, Courier
}

/*Sub-menu*/
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.inline-error,
.inline-error-conflict {
    position: relative;
    border: 1px solid red;
    box-shadow: 0px 0px 2px 1px #FF0000;
    outline: none;
}

.inline-info {
    position: relative;
    border: 1px solid #0d6efd;
    box-shadow: 0px 0px 2px 1px #0d6efd;
    outline: none;
}

/* Italic colored caption below a form input, matching FormValidation.js error styling. */
.inline-info-message,
.inline-error-message {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    font-style: italic;
}

.inline-info-message {
    color: #0d6efd;
}

.inline-error-message {
    color: red;
}

.ui-autocomplete {
    max-height: 400px;
    overflow-y: auto; /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index: 1000 !important;
}

/* ====== Contextual Styling ====== */
/* User */
.card-header.user-header {
    border-color: #6EA7FE;
    background-color: #6EA7FE;
    color: #FFF;
    margin: -1px;
}

/* Asset */
.card-header.asset-header {
    border-color: #19A179;
    background-color: #19A179;
    color: #FFF;
    margin: -1px;
}

/* Ticket */
.card-header.ticket-header {
    border-color: #FFB272;
    background-color: #FFB272;
    color: #FFF;
    margin: -1px;
}

.editing-labels .non-label-edit {
    display: none;
}

.ticketLabels:not(.editing-labels) > :not(.non-label-edit) {
    display: none;
}

.ticketBuildings:not(.editing-labels) > :not(.non-label-edit) {
    display: none;
}

.editLabelForm {
    display: inline;
}

.labelList {
    display: inline-flex;
    flex-wrap: wrap;
}

    .labelList .badge {
        float: left;
    }


.buildingList {
    display: inline-flex;
    flex-wrap: wrap;
}

    .buildingList .badge {
        float: left;
    }


.departmentList {
    display: inline-flex;
    flex-wrap: wrap;
}

    .departmentList .badge {
        float: left;
    }

.fakeLabelButton {
    line-height: 0;
}

/*LOW CONTRAST FORM-SELECT*/
.form-select-dark {
    background-image: url("../img/chevron-down-white.svg")!important;
}

/* ====== Activity Log Timeline ====== */
.activity-timeline {
    position: relative;
    padding-left: 2rem;
    margin-left: 1rem;
}

.activity-timeline::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #dee2e6;
}

.activity-entry {
    position: relative;
    margin-bottom: 1rem;
}

.activity-entry-icon {
    position: absolute;
    left: -2rem;
    top: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #fff;
    z-index: 1;
    transform: translateX(-50%);
    left: -1.25rem;
}

.activity-entry-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: box-shadow 0.15s ease-in-out;
}

.activity-entry-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.activity-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.activity-event-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    color: #fff;
    white-space: nowrap;
}

/* Right-aligned like the notification run cards' timestamps */
.activity-timestamp {
    margin-left: auto;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
}

.activity-body {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.activity-actor {
    display: inline-block;
    cursor: pointer;
}

.activity-entity-link {
    font-weight: 600;
    text-decoration: none;
}

.activity-entity-link:hover {
    text-decoration: underline;
}

.activity-entity-deleted {
    font-weight: 600;
    color: #6c757d;
    font-style: italic;
}

.activity-entity-deleted .fas {
    font-size: 0.75em;
    opacity: 0.6;
}

.activity-details-toggle {
    cursor: pointer;
    font-size: 0.8rem;
    color: #6c757d;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.activity-details-toggle:hover {
    color: #495057;
}

.activity-change {
    font-size: 0.85rem;
    padding: 0.25rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.activity-change-label {
    font-weight: 600;
    color: #495057;
    min-width: 6rem;
}

.activity-token-text {
    font-size: 0.8rem;
    color: #868e96;
    margin-top: 0.25rem;
}

/* Category icon colors */
.activity-cat-ticket { background-color: #6EA7FE; }
.activity-cat-message { background-color: #0FB0FF; }
.activity-cat-building { background-color: #58C09A; }
.activity-cat-department { background-color: #A76EFE; }
.activity-cat-label { background-color: #FFB272; }
.activity-cat-group { background-color: #3CBFA4; }
.activity-cat-task { background-color: #6D757D; }
.activity-cat-person { background-color: #7CB342; }
.activity-cat-setting { background-color: #8D6E63; }
.activity-cat-status { background-color: #F95C67; }
.activity-cat-mailbox { background-color: #5C6BC0; }
.activity-cat-feedback { background-color: #FF6B9D; }
.activity-cat-role { background-color: #607D8B; }
.activity-cat-ticket-view { background-color: #4DB6AC; }
.activity-cat-context { background-color: #90A4AE; }
.activity-cat-portal-question { background-color: #AB47BC; }
.activity-cat-portal-form { background-color: #7E57C2; }
.activity-cat-automation { background-color: #FF7043; }
.activity-cat-notification { background-color: #FFB300; }
.activity-cat-sla-rule { background-color: #EC407A; }
.activity-cat-preference { background-color: #26C6DA; }
.activity-cat-attachment { background-color: #A1887F; }
.activity-cat-other { background-color: #adb5bd; }
.activity-cat-default { background-color: #adb5bd; }

/* Badge colors matching icon colors */
.activity-badge-ticket { background-color: #6EA7FE; }
.activity-badge-message { background-color: #0FB0FF; }
.activity-badge-building { background-color: #58C09A; }
.activity-badge-department { background-color: #A76EFE; }
.activity-badge-label { background-color: #FFB272; }
.activity-badge-group { background-color: #3CBFA4; }
.activity-badge-task { background-color: #6D757D; }
.activity-badge-person { background-color: #7CB342; }
.activity-badge-setting { background-color: #8D6E63; }
.activity-badge-status { background-color: #F95C67; }
.activity-badge-mailbox { background-color: #5C6BC0; }
.activity-badge-feedback { background-color: #FF6B9D; }
.activity-badge-role { background-color: #607D8B; }
.activity-badge-ticket-view { background-color: #4DB6AC; }
.activity-badge-context { background-color: #90A4AE; }
.activity-badge-portal-question { background-color: #AB47BC; }
.activity-badge-portal-form { background-color: #7E57C2; }
.activity-badge-automation { background-color: #FF7043; }
.activity-badge-notification { background-color: #FFB300; }
.activity-badge-sla-rule { background-color: #EC407A; }
.activity-badge-preference { background-color: #26C6DA; }
.activity-badge-attachment { background-color: #A1887F; }
.activity-badge-other { background-color: #adb5bd; }
.activity-badge-default { background-color: #adb5bd; }

/* Filter card styling */
.activity-filter-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #f8f9fa;
}

/* User group card */
.activity-user-group {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
}

.activity-user-header {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #dee2e6;
    transition: background-color 0.15s ease-in-out;
}

.activity-user-header:hover {
    background: #e9ecef;
}

.activity-user-chevron {
    transition: transform 0.2s ease-in-out;
    color: #6c757d;
}

.activity-user-group > .collapse.show + .activity-user-header .activity-user-chevron,
.activity-user-header[aria-expanded="false"] .activity-user-chevron {
    /* chevron rotation handled by JS toggleClass */
}

.activity-user-group > .collapse {
    padding: 0.5rem 0.75rem;
}

/* Shared avatar badges */
.activity-user-avatar-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: rgba(108, 117, 125, 0.3);
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.activity-user-avatar-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(108, 117, 125, 0.3);
    color: rgba(0, 0, 0, 0.5);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* User detail header */
.activity-user-detail-header {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
}

@media (max-width: 768px) {
    .activity-timeline {
        padding-left: 1.5rem;
        margin-left: 0.5rem;
    }
    .activity-entry-card {
        padding: 0.5rem 0.75rem;
    }
    .activity-user-header {
        padding: 0.5rem 0.75rem;
    }
    .activity-user-detail-header .d-flex {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* Notification log v2: flat run cards (no timeline rail - every run is
   ticket-shaped, so the left accent encodes the OUTCOME instead: green
   all-sent, amber partial/suppressed, red all-withheld, neutral legacy) */
.nl-run-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.nl-run {
    background: #fff;
    border: 1px solid #e9ecef;
    border-left-width: 3px;
    border-radius: 0.35rem;
    padding: 0.6rem 0.9rem;
}

.nl-run-sent {
    border-left-color: #10b981;
}

.nl-run-partial,
.nl-run-suppressed {
    border-left-color: #f59e0b;
}

.nl-run-withheld {
    border-left-color: #ef4444;
}

.nl-run-legacy {
    border-left-color: #ced4da;
}

/* Delivery-truth refinements on the recipient chips (writeback-stamped rows).
   Failed keeps the danger palette but a dashed border separates "we tried and
   the mailbox bounced" from the solid withheld "we never tried". */
.nl-chip-failed {
    background: #fee2e2;
    color: #991b1b;
    border: 1px dashed #ef4444;
}

.nl-chip-skipped {
    background: #fef3c7;
    color: #92400e;
}

/* Synthesized "didn't run" rows: dashed accent = computed, not recorded */
.nl-run-quiet {
    border-left-style: dashed;
    border-left-color: #adb5bd;
    background: #f8f9fa;
}

.nl-quiet-why {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #6c757d;
}

.nl-quiet-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: #adb5bd;
}

.nl-uncovered-note {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: #6c757d;
}

.nl-run-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.nl-run-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: inherit;
    text-decoration: none;
}

a.nl-run-name:hover {
    text-decoration: underline;
}

.nl-run-context {
    color: #6c757d;
}

.nl-run-time {
    margin-left: auto;
    color: #6c757d;
    font-size: 0.75rem;
    white-space: nowrap;
}

.notification-data-content {
    font-size: 0.8rem;
    font-family: monospace;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: #495057;
}

.suppression-banner {
    display: flex;
    align-items: center;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 0.35rem;
    padding: 0.4rem 0.65rem;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    color: #92400e;
}

.recipient-cards {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.recipient-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.35rem;
    padding: 0.3rem 0.6rem;
}

.rc-email {
    font-size: 0.75rem;
    color: #495057;
    min-width: 170px;
    padding-top: 0.15rem;
    padding-right: 0.6rem;
    margin-right: 0.6rem;
    border-right: 1px solid #dee2e6;
}

.action-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    flex: 1;
}

.tag {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
}

.tag-added {
    background: #d1fae5;
    color: #065f46;
}

.tag-removed {
    background: #fee2e2;
    color: #991b1b;
}

.tag-suppressed {
    background: #fef3c7;
    color: #92400e;
}

/* Notification log v2: per-run verdict line from the recipient ground-truth rows */
.nl-verdict {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.nl-verdict-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #065f46;
    margin-right: 0.25rem;
    white-space: nowrap;
}

.nl-verdict-count.nl-verdict-withheld {
    color: #991b1b;
}

.nl-chip {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.nl-chip-sent {
    background: #d1fae5;
    color: #065f46;
}

.nl-chip-withheld {
    background: #fee2e2;
    color: #991b1b;
}

.nl-chip-more {
    font-size: 0.72rem;
    color: #6c757d;
}

.nl-trail-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

/* Profile notifications tab: the expectation card rows */
.nl-expectations {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.nl-expectation {
    border: 1px solid #e9ecef;
    border-radius: 0.35rem;
    padding: 0.5rem 0.75rem;
}

.nl-expectation-silenced {
    opacity: 0.65;
}

.nl-expectation-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.nl-expectation-subs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.nl-chip-view {
    background: #e0e7ff;
    color: #3730a3;
}

/* Validation errors carried inside empty inputs as placeholder text
   (FormValidation.js) - red to match the below-field messages */
.inline-error-placeholder::placeholder {
    color: red;
    font-style: italic;
    opacity: 1;
}

/* A tags widget's message paints into its borderless inner search input;
   the surrounding box carries the error outline instead */
.form-control.dropdown:has(input.inline-error) {
    border: 1px solid red;
    box-shadow: 0px 0px 2px 1px #FF0000;
}

.form-control.dropdown input.inline-error {
    box-shadow: none;
}

/* Same treatment for selects: the rewritten placeholder option shows through
   the closed select in error red */
.inline-error-select {
    color: red;
    font-style: italic;
}

/* SLA chips (classic): v2-label-style expansion - resting = hourglass + due
   moment; click/tap (slaChips.js toggles .sla-open) or keyboard focus reveals
   the rule name + % of the clock used. The countdown ticker only ever
   rewrites .js-sla-chip-text, so the expansion span survives re-ticks.
   Deliberately NO :hover growth: an expansion that wraps the chip to a new
   line drops it out from under the cursor, and hover-dependent state then
   flaps open/closed forever. :focus-visible (not :focus) so a mouse click's
   focus can't hold a toggled-closed chip open. */
.js-sla-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
}

.js-sla-chip i {
    margin-right: 0.3rem;
}

.js-sla-chip .sla-chip-more {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 600;
    margin-left: 0;
    transition: max-width 0.28s ease, opacity 0.22s ease, margin-left 0.28s ease;
}

.js-sla-chip:focus-visible .sla-chip-more,
.js-sla-chip.sla-open .sla-chip-more {
    max-width: 30rem;
    opacity: 0.9;
    margin-left: 0.3rem;
}

#waffle-slot {
    display: inline-flex;
    position: relative;   /* the panel is absolutely positioned against this */
    flex: 0 0 auto;       /* don't let a full flex header squeeze it to zero width */
    min-width: 36px;      /* reserve the icon's box so the navbar doesn't reflow */
    min-height: 36px;     /* when the icon lands - the loader is a deferred script */

    --waffle-icon-color: var(--bs-navbar-color, rgba(0, 0, 0, .55));
    --waffle-icon-hover-color: var(--bs-navbar-hover-color, rgba(0, 0, 0, .7));
}