h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

/* Message styling */
.messages {
    margin-bottom: 20px;
}

.alert {
    margin-bottom: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem 1.25rem;
    color: inherit;
}

/* Navbar dropdown polish */
.navbar-taylor .dropdown-menu {
    border-radius: 0.375rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 0.25rem 0;
}

.navbar-taylor .dropdown-item {
    padding: 0.45rem 1rem;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.navbar-taylor .dropdown-item:hover,
.navbar-taylor .dropdown-item:focus {
    background-color: #eef2ff;
    border-left-color: #0275d8;
}

.navbar-notification-label,
.navbar-account-label,
.navbar-toggler-label,
.navbar-mobile-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .navbar-taylor {
        z-index: 1030;
        padding: 0.5rem 0.75rem;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
    }

    .navbar-taylor .navbar-brand {
        display: flex;
        align-items: center;
        min-width: 0;
        max-width: calc(100% - 7rem);
        font-size: 0.95rem;
        font-weight: 600;
    }

    .navbar-taylor .navbar-brand img {
        flex: 0 0 auto;
        margin-right: 0.35rem;
    }

    .navbar-taylor .navbar-toggler {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.45rem 0.65rem;
        gap: 0.45rem;
        color: #1f2937;
        background: rgba(255, 255, 255, 0.6);
        border-color: rgba(2, 117, 216, 0.35);
        border-radius: 0.375rem;
    }

    .navbar-taylor .navbar-toggler[aria-expanded="true"] {
        background: #fff;
        border-color: #0275d8;
    }

    .navbar-toggler-label {
        display: inline;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1;
    }

    .navbar-taylor .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0.75rem;
        right: 0.75rem;
        z-index: 1040;
        max-height: calc(100vh - 4.5rem);
        margin-top: 0.35rem;
        padding: 0.75rem;
        overflow-y: auto;
        background: #fff;
        border: 1px solid rgba(15, 23, 42, 0.12);
        border-radius: 0.5rem;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
    }

    .navbar-taylor .navbar-collapse.collapsing {
        height: auto !important;
        transition: none;
    }

    .navbar-taylor .navbar-nav {
        gap: 0.25rem;
    }

    .navbar-taylor .navbar-account-nav {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid #e9ecef;
    }

    .navbar-taylor .nav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0.65rem 0.75rem;
        color: #2f3a45;
        border-radius: 0.375rem;
    }

    .navbar-taylor .nav-link i {
        width: 1.25rem;
        margin-right: 0.5rem !important;
        color: #5c6773;
        text-align: center;
    }

    .navbar-taylor .navbar-account-toggle {
        padding: 0.55rem 0.65rem;
    }

    .navbar-account-details {
        display: flex;
        min-width: 0;
        flex-direction: column;
        line-height: 1.2;
    }

    .navbar-account-label {
        display: block;
        margin-bottom: 0.1rem;
        color: #6c757d;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .navbar-account-name {
        overflow: hidden;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navbar-taylor.navbar .nav-link.active {
        color: #025aa5;
        background: #e8f4fd;
        border-bottom: 0;
        border-left: 3px solid #0275d8;
        font-weight: 600;
    }

    .navbar-taylor.navbar .nav-link.active i {
        color: #025aa5;
    }

    .navbar-taylor .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin: 0.15rem 0 0.35rem;
        padding: 0.25rem;
        background: #f8fafc;
        border: 0;
        border-left: 3px solid #d5e8f8;
        border-radius: 0.375rem;
        box-shadow: none;
    }

    .navbar-taylor .dropdown-item {
        display: flex;
        align-items: center;
        min-height: 42px;
        padding: 0.55rem 0.75rem;
        color: #263238;
        white-space: normal;
        border-left: 0;
        border-radius: 0.25rem;
    }

    .navbar-taylor .dropdown-item i {
        width: 1.25rem;
        margin-right: 0.5rem !important;
        text-align: center;
    }

    .navbar-taylor .dropdown-item.nav-current-page {
        color: #025aa5;
        font-weight: 600;
    }

    .navbar-taylor .dropdown-item.nav-current-page i {
        color: #025aa5 !important;
    }

    .navbar-taylor .dropdown-divider {
        margin: 0.35rem 0.5rem;
        border-top-color: #e0e7ef;
    }

    .navbar-mobile-backdrop {
        position: fixed;
        top: 56px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1020;
        width: 100%;
        padding: 0;
        background: rgba(33, 37, 41, 0.28);
        border: 0;
    }

    .navbar-taylor .navbar-collapse.show + .navbar-mobile-backdrop,
    .navbar-taylor .navbar-collapse.collapsing + .navbar-mobile-backdrop {
        display: block;
    }
}

/* ==========================================================================
   Internal notes (Profile / TempWorker detail panels)
   ========================================================================== */
.internal-notes-panel {
    --in-ink: #101828;
    --in-ink-2: #344054;
    --in-muted: #667085;
    --in-faint: #98a2b3;
    --in-line: #e6e9ef;
    --in-line-soft: #eef2f6;
    --in-primary: #0d6efd;
    --in-primary-strong: #0b5ed7;
    --in-primary-soft: #eaf2ff;
    --in-danger: #d92d20;
    --in-danger-soft: #fef3f2;
    --in-radius-lg: 14px;
    --in-radius-md: 10px;
    --in-radius-sm: 8px;

    overflow: hidden;
    margin-top: 24px;
    background: #fff;
    border: 1px solid var(--in-line);
    border-radius: var(--in-radius-lg);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 36px -18px rgba(16, 24, 40, 0.18);
}

.internal-notes-heading {
    margin: 0;
    font-size: 1rem;
    text-align: left;
}

.internal-notes-header {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 14px 18px;
    color: inherit;
    font: inherit;
    text-align: left;
    background: #fbfcfe;
    border: 0;
    border-bottom: 1px solid var(--in-line-soft);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.internal-notes-header:hover {
    background: #f6f9fd;
}

.internal-notes-header:focus {
    outline: none;
}

.internal-notes-header:focus-visible {
    outline: 2px solid #0275d8;
    outline-offset: -2px;
}

.internal-notes-title {
    margin: 0;
    color: var(--in-ink);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: left;
}

.internal-notes-title-icon {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--in-primary);
    font-size: 0.875rem;
    background: linear-gradient(140deg, #edf4ff, #dcebff);
    border: 1px solid #d4e4fb;
    border-radius: var(--in-radius-md);
}

.internal-notes-count {
    padding: 3px 9px;
    color: var(--in-muted);
    font-size: 0.72rem;
    font-weight: 700;
    background: #f1f4f8;
    border-radius: 999px;
}

.internal-notes-spacer {
    flex: 1 1 auto;
}

.internal-notes-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--in-faint);
    font-size: 0.875rem;
    transition: color 0.15s ease, transform 0.2s ease;
}

.internal-notes-panel:not(.is-collapsed) .internal-notes-chevron {
    transform: rotate(180deg);
}


.internal-notes-panel.is-collapsed .internal-notes-body {
    height: 0;
    overflow: hidden;
}

.internal-notes-panel.is-collapsed:not(.is-collapsing) .internal-notes-body {
    visibility: hidden;
}

.internal-notes-panel.is-collapsing .internal-notes-body {
    overflow: hidden;
    transition: height 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .internal-notes-panel.is-collapsing .internal-notes-body {
        transition: none;
    }
}

/* Collapsed state mirrors the Bootstrap accordion items above the panel. */
.internal-notes-panel.is-collapsed {
    border-color: #dee2e6;
    border-radius: 8px;
    box-shadow: none;
}

.internal-notes-panel.is-collapsed .internal-notes-header {
    gap: 8px;
    padding: 15px 20px;
    background: #fff;
    border-bottom: 0;
}

.internal-notes-panel.is-collapsed .internal-notes-header:hover {
    background: #f8f9fa;
}

.internal-notes-panel.is-collapsed .internal-notes-title {
    color: #212529;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
}

.internal-notes-panel.is-collapsed .internal-notes-title-icon {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    color: #212529;
    font-size: 1rem;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.internal-notes-panel.is-collapsed .internal-notes-chevron {
    color: #6c757d;
    font-size: 1rem;
}

/* ---------- Composer ---------- */
.internal-notes-composer {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--in-line-soft);
}

.internal-notes-composer textarea,
.internal-notes-edit-form textarea {
    display: block;
    width: 100%;
    min-height: 76px;
    max-height: 70vh;
    padding: 11px 13px;
    color: var(--in-ink-2);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.55;
    background: #fcfdfe;
    border: 1px solid #dfe3ea;
    border-radius: var(--in-radius-md);
    box-shadow: none;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Autogrow already sizes the field when JS is available. */
.internal-notes-panel.is-enhanced textarea {
    resize: none;
}

.internal-notes-composer textarea::placeholder,
.internal-notes-edit-form textarea::placeholder {
    color: var(--in-faint);
}

.internal-notes-composer textarea:focus,
.internal-notes-edit-form textarea:focus {
    background: #fff;
    border-color: var(--in-primary);
    box-shadow: 0 0 0 3.5px rgba(13, 110, 253, 0.16);
}

.internal-notes-composer-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
}

.internal-notes-counter {
    color: var(--in-faint);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.internal-notes-counter.is-near-limit {
    color: #b54708;
    font-weight: 600;
}

.internal-notes-errors {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: #b42318;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ---------- Notes list ---------- */
.internal-notes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 14px 18px 16px;
    list-style: none;
}

.internal-note {
    position: relative;
    padding: 12px 14px 13px 16px;
    background: #fbfcfe;
    border: 1px solid #edf1f6;
    border-radius: var(--in-radius-md);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.internal-note::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;
    background: #cfe1fb;
    border-radius: 0 3px 3px 0;
    transition: background-color 0.15s ease;
}

.internal-note:hover {
    background: #fff;
    border-color: #dde4ec;
    box-shadow: 0 6px 18px -12px rgba(16, 24, 40, 0.28);
}

.internal-note:hover::before {
    background: #9cc3fa;
}

.internal-note.is-editing {
    background: #fff;
    border-color: #dce5f2;
}

.internal-note-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 5px;
}

.internal-note-author {
    color: var(--in-ink);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}

.internal-note-time {
    color: var(--in-faint);
    font-size: 0.78rem;
}

.internal-note-edited {
    padding: 2px 7px;
    color: var(--in-muted);
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: #f1f4f8;
    border-radius: 999px;
    cursor: default;
}

.internal-note-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    opacity: 0;
    transform: translateX(3px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.internal-note:hover .internal-note-actions,
.internal-note:focus-within .internal-note-actions {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .internal-note-actions {
        opacity: 1;
        transform: none;
    }
}

.internal-note-actions form {
    margin: 0;
    padding: 0;
}

.internal-note-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--in-faint);
    font-size: 0.78rem;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--in-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.internal-note-action:hover,
.internal-note-action:focus {
    color: var(--in-ink-2);
    text-decoration: none;
    background: #f1f4f8;
}

.internal-note-action--danger:hover,
.internal-note-action--danger:focus {
    color: var(--in-danger);
    background: var(--in-danger-soft);
}

.internal-note-body {
    color: var(--in-ink-2);
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: left;
    overflow-wrap: anywhere;
}

.internal-note.is-new {
    animation: internal-note-flash 1.8s ease-out;
}

@keyframes internal-note-flash {
    0% {
        background: #eef5ff;
        border-color: #bcd8fb;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
    }

    100% {
        background: #fbfcfe;
        border-color: #edf1f6;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .internal-note.is-new {
        animation: none;
    }
}

/* ---------- Inline editor ---------- */
.internal-notes-edit-form {
    margin-top: 6px;
}

.internal-notes-edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
}

/* ---------- Empty state ---------- */
.internal-notes-empty {
    margin: 6px 18px 18px;
    padding: 28px 20px;
    color: var(--in-muted);
    text-align: center;
    background: #fbfcfe;
    border: 1.5px dashed #d8dfe8;
    border-radius: var(--in-radius-md);
}

.internal-notes-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 11px;
    color: var(--in-primary);
    font-size: 1.05rem;
    background: var(--in-primary-soft);
    border-radius: 50%;
}

.internal-notes-empty-title {
    margin: 0 0 3px;
    color: var(--in-ink-2);
    font-size: 0.875rem;
    font-weight: 700;
}

.internal-notes-empty-copy {
    margin: 0;
    font-size: 0.8125rem;
}

/* ---------- List / roster preview ---------- */
.internal-note-preview {
    display: block;
    color: inherit;
    text-decoration: none;
    background-color: #f8f9fa;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.internal-note-preview:hover,
.internal-note-preview:focus {
    color: inherit;
    text-decoration: none;
}

.internal-note-preview:hover {
    background-color: #f1f4f8;
}

.internal-note-preview:focus-visible {
    outline: 2px solid #0275d8;
    outline-offset: 2px;
}

.internal-note-preview-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}

.internal-note-preview-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #344054;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: left;
}

.internal-note-preview-count {
    margin-left: auto;
    padding: 1px 7px;
    color: #0b5ed7;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    background: #e3eefd;
    border-radius: 999px;
}

.internal-note-preview-title + .internal-note-preview-count {
    margin-left: 0;
}

.internal-note-preview-body {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Employee number shown as a quiet suffix right after a person's name. */
.employee-number {
    color: #6c757d;
    font-size: 0.8em;
    font-weight: 400;
    white-space: nowrap;
}

/* Keep screen-reader labels out of copied text ("Name #722", not "Name Employee number#722"). */
.employee-number .sr-only,
.person-license .sr-only {
    -webkit-user-select: none;
    user-select: none;
}

/* Job role colors (Support, Onsite Expeditor, Second Shift), shared by role badges and job tile icons.
   Kept apart from the OSHA 30 (green) and OSHA 10 (teal) badges on the same cards. */
.role-support {
    background-color: #6f42c1;
    color: #fff;
}

.role-onsite-expeditor {
    background-color: #795548;
    color: #fff;
}

.role-second-shift {
    background-color: #1b2a4e;
    color: #fff;
}

/* Frosted glass, for controls that float over photos or scrolling content. The tint on
   .glass-button is about as clear as it can go and still keep its dark icon readable over a black
   photo, even where blur isn't supported. --solid is for spots with nothing behind the button. */
.glass-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #1d2939;
    background: rgba(255, 255, 255, 0.45);
    border: 0.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.14),
        0 4px 12px rgba(16, 24, 40, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 2px rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.06);
    backdrop-filter: blur(12px) saturate(170%) brightness(1.06);
    cursor: pointer;
    transition: transform 0.15s ease;
}

/* Widens the tap target to 44px without changing how the button looks. */
.glass-button::after {
    content: "";
    position: absolute;
    inset: -6px;
}

.glass-button:hover,
.glass-button:focus {
    color: #1d2939;
    text-decoration: none;
}

@media (hover: hover) {
    .glass-button:hover {
        transform: scale(1.06);
    }
}

.glass-button:active {
    transform: scale(0.95);
}

.glass-button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* A dropdown menu that opens over a photo. It holds text, so its tint stays much more solid. */
.dropdown-menu.glass-menu {
    background: rgba(255, 255, 255, 0.97);
    border: 0.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 0.75rem;
    box-shadow:
        0 2px 4px rgba(16, 24, 40, 0.1),
        0 10px 28px rgba(16, 24, 40, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .dropdown-menu.glass-menu {
        background: rgba(255, 255, 255, 0.8);
        -webkit-backdrop-filter: blur(16px) saturate(170%);
        backdrop-filter: blur(16px) saturate(170%);
    }
}

.glass-menu .dropdown-item:hover,
.glass-menu .dropdown-item:focus {
    background: rgba(16, 24, 40, 0.07);
}

.glass-menu .dropdown-divider {
    border-top-color: rgba(16, 24, 40, 0.1);
}

@media (prefers-reduced-transparency: reduce) {
    .glass-button {
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .dropdown-menu.glass-menu {
        background: rgba(255, 255, 255, 0.97);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.glass-button--solid {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Corner menu on a person card. */
.card-menu {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

/* Keeps a long name clear of the corner menu; equal on both sides so it stays centered. */
.card-menu + .card-title {
    padding-right: 1.75rem;
    padding-left: 1.75rem;
}

/* iOS Safari turns digit runs such as electrical license numbers into blue tel: links, but skips
   text inside <code>. Wrap those numbers in <code class="no-phone-link"> to keep them plain text;
   this undoes Bootstrap's monospace, pink code styling. */
code.no-phone-link {
    color: inherit;
    font: inherit;
    overflow-wrap: inherit;
}

/* field_label.html's label weight (a Bootstrap 5 class that Bootstrap 4 lacks). */
.fw-medium {
    font-weight: 500;
}

/* How far below the sticky navbar a field lands when an error summary link jumps to it, so its
   label shows too. */
:root {
    --sticky-nav-offset: 7rem;
}

.form-control {
    scroll-margin-top: var(--sticky-nav-offset);
}