.wt-count-capture {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--wt-border-color, #a7b0ba);
    border-radius: 0.35rem;
    background: var(--wt-surface-subtle, rgba(0, 0, 0, 0.035));
}

.wt-count-capture > p {
    margin: 0.35rem 0;
}

.wt-count-capture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.65rem;
    margin-top: 0.65rem;
}

.wt-count-capture-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wt-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    font-weight: 500;
}

.wt-part-suggest {
    position: relative;
    min-width: 0;
    flex: 1 1 14rem;
}

.wt-part-suggest .wt-input {
    width: 100%;
}

.wt-part-suggest-list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.15rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--wt-border-color, #a7b0ba);
    border-radius: 0.35rem;
    background: var(--wt-surface, #fff);
    box-shadow: 0 0.35rem 0.85rem rgba(0, 0, 0, 0.12);
}

.wt-part-suggest-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 0.1rem 0.65rem;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
}

.wt-part-suggest-option.is-active,
.wt-part-suggest-option:hover {
    background: rgba(73, 134, 255, 0.12);
}

.wt-part-suggest-sku {
    font-weight: 600;
    word-break: break-word;
}

.wt-part-suggest-meta {
    color: var(--wt-muted, #6b7280);
    font-size: 0.85rem;
    white-space: nowrap;
}

.wt-part-suggest-desc {
    grid-column: 1 / -1;
    color: var(--wt-muted, #6b7280);
    font-size: 0.85rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.wt-kb-chat-toolbar {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.wt-kb-full {
    grid-column: 1 / -1;
}

.wt-kb-upload-list {
    padding: .5rem .75rem;
    border: 1px solid #d3d8de;
    border-radius: .5rem;
    background: #f8fafc;
    margin-bottom: .75rem;
}

.wt-kb-upload-list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.wt-kb-upload-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wt-kb-upload-list-items li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-top: 1px solid #e5e7eb;
}

.wt-kb-upload-list-items li:first-child {
    border-top: none;
}

.wt-kb-upload-list-name {
    flex: 1 1 12rem;
    min-width: 0;
    word-break: break-word;
}

.wt-kb-upload-list-item-error .wt-kb-upload-list-name {
    color: #b91c1c;
}
@import url('./help.css?v=20260516a');

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* ===== WorkTracker App Layout ===== */

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --wt-bg: #f0f2f5;
    --wt-surface: #ffffff;
    --wt-surface-muted: #fafafa;
    --wt-surface-alt: #f5f5f5;
    --wt-text: #1a1a1a;
    --wt-text-muted: #555555;
    --wt-text-subtle: #888888;
    --wt-border: #e0e0e0;
    --wt-border-strong: #cfcfcf;
    --wt-hover: #f3f6fb;
    --wt-accent: #0078d4;
    --wt-link: #1565c0;
    --wt-aichat-math: #005B60;
    --wt-shadow-soft: rgba(0, 0, 0, 0.08);
    --wt-shadow-strong: rgba(0, 0, 0, 0.18);
    --wt-dropzone-bg: #fafafa;
    --wt-dropzone-border: #90a4ae;
    --wt-dropzone-hover-bg: #eef5ff;
    --wt-dropzone-hover-border: #0078d4;
    --wt-dropzone-active-bg: #b8d9ff;
    --wt-dropzone-active-border: #005a9e;
    --wt-dropzone-active-ring: rgba(0, 90, 158, 0.45);
    --wt-dropzone-active-glow: rgba(0, 120, 212, 0.35);
    --wt-dropzone-active-text: #003d6b;
    --wt-dropzone-has-file-bg: #f1f8e9;
    --wt-dropzone-has-file-border: #4caf50;
    --wt-dropzone-has-file-text: #2e7d32;
}

/* Dark theme tokens.
   Aligned with Material Design 3 tonal elevation + WCAG AA contrast.
   - Base surface ~#121417 (not pure black; avoids halation / OLED smearing).
   - Each elevation layer is ~5-8 lightness steps brighter than the one below
     (MD3 "elevation by lightening, not shadow").
   - Text uses off-white at ~rgba(255,255,255,0.87)-equivalent values — pure
     #FFFFFF is too high contrast (21:1) and causes eye strain on dark.
   - Borders are low-opacity light overlays so they read against any layer.
   - Accent colors are lightened + slightly desaturated from the light-mode
     brand blue (#0078d4) so they keep contrast on dark surfaces.

   Contrast ratios (verified against --wt-bg #121417):
     --wt-text (#e7e9ec)        ~14.7:1 ✅ AAA body
     --wt-text-muted (#b3b7bd)  ~9.3:1  ✅ AAA body
     --wt-text-subtle (#8a8f97) ~5.4:1  ✅ AA body
     --wt-link (#93c5fd)        ~9.4:1  ✅ AAA body
*/
[data-theme="dark"] {
    --wt-bg: #121417;
    --wt-surface: #1c1f24;
    --wt-surface-muted: #232730;
    --wt-surface-alt: #2a2f3a;
    --wt-hover: #2f3541;
    --wt-text: #e7e9ec;
    --wt-text-muted: #b3b7bd;
    --wt-text-subtle: #8a8f97;
    --wt-border: rgba(255, 255, 255, 0.10);
    --wt-border-strong: rgba(255, 255, 255, 0.18);
    --wt-accent: #7ab7ff;
    --wt-link: #93c5fd;
    --wt-aichat-math: #4DEEEA;
    --wt-shadow-soft: rgba(0, 0, 0, 0.45);
    --wt-shadow-strong: rgba(0, 0, 0, 0.65);
    --wt-dropzone-bg: #232730;
    --wt-dropzone-border: rgba(147, 197, 253, 0.35);
    --wt-dropzone-hover-bg: #2a3548;
    --wt-dropzone-hover-border: #93c5fd;
    --wt-dropzone-active-bg: #1d4ed8;
    --wt-dropzone-active-border: #dbeafe;
    --wt-dropzone-active-ring: rgba(219, 234, 254, 0.95);
    --wt-dropzone-active-glow: rgba(96, 165, 250, 0.75);
    --wt-dropzone-active-text: #ffffff;
    --wt-dropzone-has-file-bg: #1f2e26;
    --wt-dropzone-has-file-border: #66bb6a;
    --wt-dropzone-has-file-text: #a5d6a7;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--wt-bg);
    color: var(--wt-text);
}

.wt-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wt-topbar {
    background: #0078d4;
    color: white;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.wt-brand {
    font-size: clamp(0.8rem, 2.2vw, 1.25rem);
    font-weight: 700;
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    min-width: 0;
}

.wt-brand-logo {
    height: 24px;
    width: auto;
    display: block;
}

.wt-topbar a, .wt-topbar button {
    color: white;
}

.wt-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex-shrink: 1;
}

/* Mentions popover fallback styles (global, non-scoped) */
.wt-mentions-panel {
    position: relative;
}

.wt-mentions-toggle {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #fff;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
}

.wt-mentions-badge {
    margin-left: 0.35rem;
    background: #ff4d4f;
    border-radius: 999px;
    min-width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    display: inline-block;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.wt-mentions-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    width: 360px;
    max-width: min(360px, 92vw);
    max-height: 420px;
    overflow: auto;
    background: #fff;
    color: #1f2328;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid #d0d7de;
    z-index: 2000;
    padding: 0.5rem;
}

.wt-mentions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.wt-mentions-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wt-mention-item {
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #fff;
    text-align: left;
    padding: 0.45rem 0.5rem;
    cursor: pointer;
    color: inherit;
}

.wt-mention-unread {
    border-color: #0969da;
    background: #f0f7ff;
}

.wt-mention-read {
    opacity: 0.9;
}

.wt-mention-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.wt-mention-item-context {
    font-size: 0.8rem;
    color: #57606a;
}

.wt-mention-item-snippet {
    font-size: 0.86rem;
    white-space: normal;
    word-break: break-word;
}

.wt-topbar-bug-btn {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    color: #fff;
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
}

.wt-topbar-bug-btn:hover {
    background: rgba(255, 255, 255, 0.24);
}

.wt-main {
    flex: 1;
    padding: 1rem;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* ===== Desktop Wide Layout =====
   The 900px default column suits phones and tablets. Pages opt into the full
   desktop width by adding `wt-page-wide` to their root element; the shell
   widens and the shared field grids gain columns. Narrow viewports are
   untouched. See .cursor/rules/desktop-wide-layout.mdc. */

@media (min-width: 1100px) {
    .wt-main:has(.wt-count-event-page) {
        max-width: min(1600px, calc(100vw - 2rem));
    }

    .wt-main:has(.wt-page-wide) {
        max-width: min(1800px, calc(100vw - 2rem));
    }

    .wt-page-wide .wt-er-amounts-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .wt-page-wide .wt-p2p-line-grid {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }

    /* Stacked card lists are a phone affordance; a wide desktop reads them
       better as a multi-column board than as one tall stack. */
    .wt-page-wide .wt-card-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
        align-items: start;
    }

    /* Single-control field groups would otherwise stretch the whole widened
       column and push the label miles away from its value. */
    .wt-page-wide .wt-er-line-editor > .wt-er-form-group {
        max-width: 34rem;
    }
}

@media (min-width: 1500px) {
    .wt-page-wide .wt-p2p-line-grid {
        grid-template-columns: repeat(5, minmax(150px, 1fr));
    }
}

/* ===== Login Page ===== */

.wt-login-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.wt-user-name {
    display: none;
}

.wt-logout-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 6px;
    padding: 0.3rem 0.75rem;
    font-size: clamp(0.68rem, 2.1vw, 0.8rem);
    cursor: pointer;
    white-space: nowrap;
}

.wt-logout-btn:hover {
    background: rgba(255,255,255,0.25);
}

.wt-login-link {
    color: white;
    text-decoration: none;
}

.wt-account-access-denied {
    max-width: 42rem;
    margin: 1.5rem auto;
}

.wt-account-access-denied .wt-page-header {
    margin-bottom: 0.75rem;
}

.wt-account-menu-panel {
    position: relative;
    min-width: 0;
    flex-shrink: 1;
    max-width: 100%;
}

.wt-account-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: min(14rem, 32vw);
    min-width: 0;
    flex-shrink: 1;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #fff;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
    font-size: clamp(0.68rem, 2.1vw, 0.8rem);
    white-space: nowrap;
}

.wt-account-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
}

.wt-account-menu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}

.wt-account-menu-caret {
    font-size: 0.7rem;
    line-height: 1;
    opacity: 0.9;
    flex-shrink: 0;
}

/* Account menu label: shrink aggressively on narrow topbars so badges/icons stay visible. */
@media (max-width: 900px) {
    .wt-account-menu-toggle {
        max-width: min(10rem, 26vw);
    }
}

@media (max-width: 680px) {
    .wt-account-menu-toggle {
        max-width: min(7.5rem, 22vw);
    }
}

.wt-account-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1999;
    background: transparent;
}

.wt-account-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    min-width: 11rem;
    background: #fff;
    color: #1f2328;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid #d0d7de;
    z-index: 2000;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.wt-account-menu-item {
    width: 100%;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #1f2328;
    text-align: left;
    padding: 0.45rem 0.55rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.wt-topbar .wt-account-menu-dropdown .wt-account-menu-item {
    color: #1f2328;
}

.wt-account-menu-item:hover:not(:disabled) {
    background: #f0f7ff;
    color: #1f2328;
}

.wt-topbar .wt-account-menu-dropdown .wt-account-menu-item:hover:not(:disabled) {
    color: #1f2328;
}

.wt-account-menu-item:disabled {
    opacity: 0.7;
    cursor: default;
}

@media (min-width: 600px) {
    .wt-user-name {
        display: inline;
    }
}

.wt-login-page {
    text-align: center;
    padding: 3rem 1rem;
}

.wt-login-page-branded {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wt-login-page-branded::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url('/images/Pentaxis_Logo_Full_Colour.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    opacity: 0.5;
    pointer-events: none;
}

.wt-login-page h1 {
    font-size: 2rem;
    color: #0078d4;
}

.wt-login-page-branded .wt-login-title {
    font-size: clamp(1.55rem, 8.5vw, 4rem);
    color: #000;
    text-transform: uppercase;
    line-height: 1.08;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 520px) {
    .wt-topbar {
        padding: 0.65rem 0.6rem;
        gap: 0.35rem;
    }

    .wt-topbar-actions {
        gap: 0.35rem;
    }

    .wt-brand {
        gap: 0.35rem;
    }

    .wt-brand-logo {
        height: 20px;
    }

    .wt-logout-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.68rem;
    }

    .wt-account-menu-toggle {
        max-width: min(5.5rem, 20vw);
        padding: 0.25rem 0.4rem;
        gap: 0.25rem;
    }
}

@media (max-width: 400px) {
    .wt-account-menu-toggle {
        max-width: min(4.5rem, 18vw);
    }
}

.wt-login-page-branded .wt-login-prebrand {
    font-size: 0.875rem;
    letter-spacing: 0.4em;
    font-weight: 600;
    color: inherit;
    text-transform: uppercase;
    /* Sits in the existing top padding above the title so the big brand
       name and the rest of the page do not shift down. */
    margin-bottom: -1.25rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.wt-login-btn {
    font-size: 1.1rem;
    padding: 0.75rem 2rem;
    border-radius: 8px;
}

/* ===== Dashboard ===== */

.wt-dashboard {
    padding: 0.5rem 0;
}

.wt-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 1.5rem;
}

.wt-welcome {
    text-align: center;
    margin-bottom: 0;
    font-size: 1.4rem;
    color: #333;
}

.wt-gear-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: background 0.15s;
    line-height: 1;
}

.wt-gear-btn:hover {
    background: rgba(0,0,0,0.06);
}

.wt-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.wt-header-actions .wt-gear-btn {
    position: static;
    right: auto;
    top: auto;
    transform: none;
}

.wt-bell-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #f5f5f5;
    color: #555;
    border: 1px solid #d9d9d9;
    font-size: 1.15rem;
    line-height: 1;
    border-radius: 999px;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wt-bell-btn-idle {
    cursor: default;
}

.wt-bell-btn-alert {
    background: #f8d7da;
    color: #b71c1c;
    border-color: #ef9a9a;
    animation: wt-bell-glow 1.1s ease-in-out infinite, wt-bell-wiggle 1.3s ease-in-out infinite;
}

.wt-bell-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #d32f2f;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1rem;
}

@keyframes wt-bell-glow {
    0%, 100% {
        box-shadow: 0 0 0 rgba(211, 47, 47, 0);
        background: #f8d7da;
    }
    50% {
        box-shadow: 0 0 0.5rem rgba(211, 47, 47, 0.75);
        background: #ffcdd2;
    }
}

@keyframes wt-bell-wiggle {
    0%, 100% {
        transform: translateY(-50%) rotate(0deg);
    }
    20% {
        transform: translateY(-50%) rotate(-12deg);
    }
    40% {
        transform: translateY(-50%) rotate(10deg);
    }
    60% {
        transform: translateY(-50%) rotate(-8deg);
    }
    80% {
        transform: translateY(-50%) rotate(6deg);
    }
}

.wt-button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.wt-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    border: none;
    border-radius: 16px;
    padding: 1.5rem 1rem;
    min-height: 140px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.wt-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.wt-tile:active {
    transform: scale(0.97);
}

.wt-tile-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.wt-tile-logo {
    height: 2.5rem;
    width: auto;
    margin-bottom: 0.5rem;
    object-fit: contain;
}

.wt-tile-logo--amazon {
    height: 3.2rem;
    width: min(100%, 13.5rem);
    margin-bottom: 0;
}

.wt-tile-logo--amazon-dark {
    display: none;
}

.wt-tile-logo--uploaded-dark {
    display: none;
}

.wt-tile-label {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.wt-tile-desc {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.25;
    color: #666;
    text-align: center;
    max-width: 14rem;
}

/* ===== Page Layout ===== */

.wt-page {
    padding: 0.5rem 0;
}

.wt-page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.wt-page-header h2 {
    margin: 0;
    font-size: 1.3rem;
}

.wt-back-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: #0078d4;
    white-space: nowrap;
}

.wt-back-btn:hover {
    background: #e8f0fe;
}

/* Use the layout-level back button; suppress per-page header back/home buttons. */
.wt-page-header .wt-back-btn {
    display: none !important;
}

/* ===== Placeholder (Coming Soon) ===== */

.wt-placeholder {
    text-align: center;
    padding: 3rem 1rem;
    background: white;
    border-radius: 16px;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.wt-placeholder-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.75rem;
}

.wt-placeholder h3 {
    margin: 0 0 0.5rem;
    color: #666;
}

/* ===== Common Components ===== */

.wt-loading {
    text-align: center;
    padding: 2rem;
    color: #666;
}

.wt-loading-ellipsis::after {
    content: "...";
    display: inline-block;
    width: 1.3em;
    overflow: hidden;
    vertical-align: bottom;
    animation: wt-loading-ellipsis 1s steps(4, end) infinite;
}

@keyframes wt-loading-ellipsis {
    0% {
        width: 0;
    }

    100% {
        width: 1.3em;
    }
}

.wt-error {
    background: #fde8e8;
    color: #c62828;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.wt-warning-panel {
    background: #fef3c7;
    color: #92400e;
    border-left: 4px solid #f59e0b;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.wt-warning-panel ul {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

.wt-warning-panel li {
    margin-bottom: 0.25rem;
}

.wt-muted {
    color: #888;
    font-style: italic;
}

.wt-section {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.wt-section h3 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    color: #333;
}

.wt-totp-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 0.75rem 0 1rem;
}

.wt-totp-qr {
    display: block;
    width: min(240px, 100%);
    height: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

/* Stacked forms inside wt-section cards (sign/share portals, envelope create, etc.) */
.wt-section-form,
.wt-public-auth-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.wt-public-auth-form {
    max-width: 28rem;
}

.wt-section-form > label,
.wt-public-auth-form > label {
    display: block;
    margin: 0;
    font-weight: 500;
    color: #333;
}

.wt-section-form > p,
.wt-public-auth-form > p {
    margin: 0;
}

.wt-section-form > .wt-input,
.wt-section-form > .wt-select,
.wt-public-auth-form > .wt-input,
.wt-public-auth-form > .wt-otp-single {
    width: 100%;
    max-width: 28rem;
}

.wt-section-form > .wt-admin-toolbar {
    margin-top: 0.25rem;
    width: 100%;
    max-width: 28rem;
}

.wt-section-form .wt-admin-toolbar > .wt-btn,
.wt-public-auth-form > .wt-btn {
    margin-top: 0;
    padding: 0.65rem 1.35rem;
    min-height: 2.5rem;
}

.wt-public-auth-notice {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    background: #f0f6fc;
    border: 1px solid #c7dff7;
    color: #1f2937;
    font-size: 0.92rem;
    line-height: 1.45;
}

.wt-otp-single {
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    max-width: 16rem;
}

/* ===== Shared toolbar/action spacing ===== */

.wt-admin-toolbar,
.wt-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.6rem;
}

.wt-admin-toolbar > label,
.wt-filter-row > label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wt-admin-toolbar > .wt-btn,
.wt-admin-toolbar > .wt-timeapproval-stepper,
.wt-admin-toolbar > .wt-timeapproval-submitted-badge,
.wt-filter-row > .wt-btn {
    margin-top: 0.2rem;
}

/* Compact success/error text shown beside the control that triggered it. */
.wt-action-feedback {
    display: inline-flex;
    align-items: center;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.3;
}

.wt-action-feedback-error {
    background: #fde8e8;
    color: #c62828;
}

/* Side-by-side transfer list (DualListPicker): filterable available/selected listboxes with move buttons between them. */
.wt-dual-list {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.wt-dual-list-col {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 240px;
    min-width: 220px;
}

.wt-dual-list-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.wt-dual-list-filter {
    width: 100%;
}

.wt-dual-list-box {
    width: 100%;
    min-height: 230px;
    padding: 0.25rem;
}

.wt-dual-list-box option {
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
}

.wt-dual-list-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0 0.25rem;
    flex: 0 0 auto;
}

.wt-dual-list-actions .wt-btn {
    white-space: nowrap;
}

/* Field-level validation: outline the offending control and explain it right below. */
.wt-input-invalid,
input.wt-input-invalid,
select.wt-input-invalid,
textarea.wt-input-invalid {
    border-color: #c62828 !important;
    outline: 1px solid #c62828;
    background: #fffafa;
}

.wt-field-error {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.3rem;
    color: #b3261e;
    font-size: 0.82rem;
    line-height: 1.35;
    max-width: 60ch;
}

.wt-field-error-icon {
    flex: 0 0 auto;
    line-height: 1.35;
}

/* Clickable list of every field that needs attention, shown beside the save action. */
.wt-validation-summary {
    border: 1px solid #f0b4b0;
    background: #fdecea;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin: 0.5rem 0 0.75rem;
    color: #7f1d1d;
}

.wt-validation-summary-title {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.wt-validation-summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

.wt-validation-summary li {
    margin: 0.15rem 0;
}

.wt-validation-summary-link {
    background: none;
    border: none;
    padding: 0;
    color: #7f1d1d;
    font: inherit;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

.wt-admin-toolbar + .wt-admin-toolbar,
.wt-filter-row + .wt-filter-row {
    margin-top: 0.5rem;
}

.wt-toolbar-gap-top {
    margin-top: 0.5rem;
}

.wt-toolbar-gap-bottom {
    margin-bottom: 0.5rem;
}

.wt-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wt-section-header h3 {
    margin: 0;
}

.wt-stack-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wt-inline-check {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.wt-inline-check-offset {
    margin-top: 1.5rem;
}

.wt-editor-actions-split {
    justify-content: space-between;
    align-items: center;
}

.wt-note-label {
    display: block;
    margin-top: 0.5rem;
}

.wt-table-wrap-min0 {
    min-width: 0;
}

/* Vertical scroll hosts for tall grids. Declared with the other table styles
   (see "Data Tables") so the overflow cascade stays predictable. */
.wt-table-wrap-maxh-62vh {
    max-height: 62vh;
}

.wt-table-wrap-maxh-280 {
    max-height: 280px;
}

.wt-row-clickable,
.wt-sortable-col {
    cursor: pointer;
}

.wt-section-subsection {
    margin-top: 0.75rem;
}

.wt-grid-col-full {
    grid-column: 1 / -1;
}

.wt-select-minw-260 {
    min-width: 260px;
}

.wt-input-maxw-120-center {
    max-width: 120px;
    margin: 0 auto;
}

.wt-input-maxw-7rem {
    max-width: 7rem;
}

.wt-input-maxw-6rem {
    max-width: 6rem;
}

.wt-input-maxw-20rem {
    max-width: 20rem;
}

.wt-input-maxw-24rem {
    max-width: 24rem;
}

.wt-input-maxw-28rem {
    max-width: 28rem;
}

.wt-input-minw-12rem {
    min-width: 12rem;
}

.wt-input-minw-14rem {
    min-width: 14rem;
}

.wt-input-minw-16rem {
    min-width: 16rem;
}

.wt-textarea-maxw-32rem {
    max-width: 32rem;
}

.wt-textarea-maxw-36rem {
    max-width: 36rem;
}

.wt-textarea-maxw-40rem {
    max-width: 40rem;
}

.wt-textarea-maxw-48rem {
    max-width: 48rem;
}

/* Compound selector required: base .wt-dialog sets max-width: 420px later in this file. */
.wt-dialog.wt-dialog-w-480 {
    max-width: 480px;
    width: min(95vw, 480px);
}

.wt-dialog.wt-dialog-w-520 {
    max-width: 520px;
    width: min(94vw, 520px);
}

.wt-dialog.wt-dialog-w-560 {
    max-width: 560px;
    width: min(94vw, 560px);
}

.wt-dialog.wt-dialog-w-760 {
    max-width: 760px;
    width: min(96vw, 760px);
}

.wt-dialog.wt-dialog-w-960 {
    max-width: 960px;
    width: min(96vw, 960px);
}

.wt-dialog.wt-dialog-w-1100 {
    max-width: 1100px;
    width: min(98vw, 1100px);
}

.wt-th-w-90 {
    width: 90px;
}

.wt-th-w-170 {
    width: 170px;
}

.wt-th-w-190 {
    width: 190px;
}

.wt-th-w-320 {
    width: 320px;
}

.wt-pre-wrap-break {
    white-space: pre-wrap;
    word-break: break-word;
}

.wt-json-panel {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    max-height: 60vh;
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    overflow: auto;
    font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: 0.85rem;
}

.wt-maxw-680 {
    max-width: 680px;
}

.wt-p2p-po-number {
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 600;
}

.wt-p2p-po-version {
    font-size: 0.72rem;
    line-height: 1.1;
}

.wt-badge-offset-left-xs {
    margin-left: 0.35rem;
}

.wt-inline-self-center {
    align-self: center;
}

.wt-muted-small {
    font-size: 0.85rem;
}

.wt-gap-top-1rem {
    margin-top: 1rem;
}

.wt-gap-bottom-075 {
    margin-bottom: 0.75rem;
}

.wt-estimate-timeline-cell {
    text-align: center;
    min-width: 5.5rem;
}

.wt-estimate-timeline-cell-active {
    background-color: #d9ecff;
}

/* ===== Buttons ===== */

.wt-btn {
    background: #0078d4;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s;
}

.wt-btn:hover:not(:disabled) {
    background: #005a9e;
}

.wt-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wt-btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}

.wt-btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    width: 100%;
}

.wt-btn-primary {
    background: #0078d4;
}

.wt-btn-icon {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
}

.wt-btn-icon.wt-btn-danger:hover {
    color: #c62828;
}

/* ===== Form Controls ===== */

.wt-input, .wt-textarea, .wt-select, .wt-date-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
}

.wt-textarea {
    resize: vertical;
}

.wt-inline-edit {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.wt-inline-edit > span {
    flex: 1 1 auto;
    min-height: 2.1rem;
    display: flex;
    align-items: center;
    white-space: pre-wrap;
    word-break: break-word;
}

.wt-inline-edit-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wt-inline-edit-heading {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.wt-inline-edit-heading > label {
    margin: 0;
}

.wt-inline-edit-pencil {
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.05rem 0.15rem;
}

.wt-inline-edit-value {
    min-height: 2.1rem;
    display: flex;
    align-items: center;
    white-space: pre-wrap;
    word-break: break-word;
}

.wt-part-image-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.wt-part-image {
    max-width: 220px;
    max-height: 220px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.wt-part-image-wrap label,
.wt-part-file-actions {
    position: relative;
}

.wt-part-image-wrap label input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wt-part-file-actions {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.5rem;
}

.wt-btn-xs-remove {
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
}

.wt-part-detail-page .wt-section h3 {
    margin-bottom: 0.45rem;
}

.wt-part-detail-page .wt-p2p-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.1rem 1.6rem;
}

.wt-part-detail-page .wt-p2p-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.wt-part-detail-page .wt-p2p-field > label {
    margin-bottom: 0.05rem;
    font-weight: 600;
    color: #4a4a4a;
}

.wt-part-detail-page .wt-p2p-field-wide {
    grid-column: span 2;
}

.wt-part-detail-page .wt-part-media-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.wt-part-detail-page .wt-part-media-image {
    min-width: 240px;
}

.wt-part-detail-page .wt-part-media-files {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.wt-part-detail-page .wt-er-dropzone {
    max-width: 280px;
    min-height: 64px;
    padding: 0.6rem 0.75rem;
}

.wt-part-detail-page .wt-part-file-dropzone {
    max-width: 140px;
    min-height: 32px;
    padding: 0.3rem 0.4rem;
}

.wt-part-detail-page .wt-part-file-dropzone-horizontal {
    min-width: 210px;
    max-width: 260px;
    min-height: 38px;
    padding: 0.35rem 0.55rem;
}

.wt-part-detail-page .wt-er-dropzone-icon {
    font-size: 1.15rem;
}

.wt-part-detail-page .wt-er-dropzone-text {
    font-size: 0.76rem;
}

.wt-part-detail-page .wt-link {
    color: #1565c0;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.wt-part-file-heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.wt-part-file-heading label {
    margin: 0;
}

.wt-part-file-heading-edit {
    font-size: 0.95rem;
    padding: 0.05rem 0.15rem;
}

.wt-part-file-upload-controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.wt-part-file-feedback {
    margin-top: 0.35rem;
}

.wt-p2p-field.wt-part-file-busy .wt-part-file-choose-btn {
    cursor: wait;
    opacity: 0.7;
    pointer-events: none;
}

.wt-part-file-download-status {
    margin-top: 0.15rem;
    margin-bottom: 0;
}

.wt-part-file-choose-btn {
    position: relative;
    overflow: hidden;
}

.wt-part-file-choose-btn.wt-btn-secondary {
    background: #fff;
    color: #111;
    border: 2px solid #111;
    font-weight: 700;
    text-shadow: none;
}

.wt-part-file-choose-btn.wt-btn-secondary:hover:not(:disabled) {
    background: #f0f0f0;
    color: #111;
    border-color: #000;
}

.wt-part-file-choose-btn input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wt-part-file-choose-btn input[type="file"]::file-selector-button {
    color: #111;
    background: #fff;
    border: 2px solid #111;
}

.wt-part-file-edit {
    position: absolute;
    top: 0.15rem;
    right: 0.2rem;
    z-index: 2;
}

.wt-part-file-edit input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wt-part-file-edit-outside {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #b0bec5;
    border-radius: 6px;
    background: #fff;
    color: #2c3e50;
}

.wt-part-file-edit-outside input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wt-part-code-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

.wt-part-code-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wt-part-code-card > label {
    margin: 0;
}

.wt-part-code-image-wrap {
    border: 1px solid #d7d7d7;
    border-radius: 6px;
    background: #fff;
    padding: 0.3rem;
}

.wt-part-code-image {
    display: block;
    image-rendering: pixelated;
}

.wt-part-code-image-barcode {
    width: 210px;
    height: auto;
}

.wt-part-code-image-qr {
    width: 96px;
    height: 96px;
}

.wt-inventory-row-clickable {
    cursor: pointer;
}

.wt-inventory-row-clickable:hover {
    background: #f5f9ff;
}

@media (max-width: 900px) {
    .wt-part-detail-page .wt-p2p-field-wide {
        grid-column: span 1;
    }

    .wt-part-detail-page .wt-part-media-files {
        width: 100%;
    }
}

/* ===== Daily Scrum ===== */

.wt-date-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.wt-date-nav .wt-date-input {
    flex: 1;
    min-width: 140px;
}

.wt-scrum-status {
    text-align: center;
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 600;
}

.wt-status-submitted {
    background: #e8f5e9;
    color: #2e7d32;
}

.wt-status-draft {
    background: #fff3e0;
    color: #ef6c00;
}

.wt-quick-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.wt-quick-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.wt-timeslots {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 300px;
    overflow-y: auto;
}

.wt-timeslot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.wt-slot-active {
    background: #e3f2fd;
}

.wt-slot-off {
    background: #f5f5f5;
    opacity: 0.7;
}

.wt-slot-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    flex-shrink: 0;
}

.wt-slot-time {
    white-space: nowrap;
    min-width: 130px;
    font-size: 0.85rem;
}

.wt-slot-location {
    flex: 1;
    padding: 0.2rem 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.8rem;
    min-width: 0;
}

/* ===== Task List ===== */

.wt-task-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wt-task-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    gap: 0.5rem;
}

.wt-task-card-compact {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.wt-task-added {
    opacity: 0.6;
}

.wt-task-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.wt-task-info strong {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wt-task-desc {
    font-size: 0.85rem;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wt-task-meta {
    font-size: 0.75rem;
    color: #888;
}

.wt-task-single-line {
    display: block;
    font-size: 0.85rem;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wt-added-badge {
    font-size: 0.75rem;
    color: #2e7d32;
    font-weight: 600;
    white-space: nowrap;
}

.wt-add-task {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.wt-add-task .wt-input {
    flex: 1;
}

.wt-submit-section {
    text-align: center;
}

/* --- Daily Scrum: Task Search / Filter / Sort Controls --- */

.wt-scrum-task-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.wt-scrum-task-search {
    flex: 1;
    min-width: 140px;
}

.wt-scrum-task-filter,
.wt-scrum-task-sort {
    width: auto;
    min-width: 120px;
    flex: 0 1 auto;
}

.wt-scrum-task-pane {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.5rem;
    background: #fafafa;
}

.wt-scrum-task-card {
    align-items: flex-start;
}

.wt-scrum-task-title,
.wt-scrum-task-desc,
.wt-scrum-task-single-line {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: visible;
    text-overflow: initial;
}

/* ===== Checklists ===== */

.wt-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.wt-filter-row .wt-select {
    flex: 1;
    max-width: 250px;
}

.wt-checklist-toggle-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wt-checklist-create-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.wt-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wt-card {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 0.75rem;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.wt-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.wt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.wt-card-header strong {
    font-size: 0.95rem;
}

.wt-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.wt-card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wt-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.wt-badge-notstarted { background: #e0e0e0; color: #555; }
.wt-badge-workinprogress { background: #fff3e0; color: #ef6c00; }
.wt-badge-underreview { background: #e3f2fd; color: #1565c0; }
.wt-badge-complete { background: #e8f5e9; color: #2e7d32; }
.wt-badge-draft { background: #fff3e0; color: #ef6c00; }
.wt-badge-submitted { background: #e3f2fd; color: #1565c0; }
.wt-badge-pendingapproval { background: #e3f2fd; color: #1565c0; }
.wt-badge-approved { background: #e8f5e9; color: #2e7d32; }
.wt-badge-rejected { background: #fde8e8; color: #c62828; }
.wt-badge-closed { background: #e0e0e0; color: #555; }
.wt-badge-qboload { background: #f3e5f5; color: #7b1fa2; }

button.wt-badge,
.wt-badge-link {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
    text-decoration: none;
}

button.wt-badge:hover:not(:disabled),
.wt-badge-link:hover:not(:disabled) {
    filter: brightness(0.95);
    text-decoration: underline;
}

button.wt-badge:focus-visible,
.wt-badge-link:focus-visible {
    outline: 2px solid #0078d4;
    outline-offset: 2px;
}

.wt-form-users-list {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    background: #fafafa;
}

.wt-form-recipient-picker {
    margin-top: 0.25rem;
}

.wt-broadcast-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 1rem;
}

.wt-broadcast-select {
    margin: 0.45rem 0 0.55rem;
}

.wt-broadcast-selected-list {
    border: 1px solid #e5eaf0;
    border-radius: 8px;
    min-height: 220px;
    padding: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.4rem;
    background: #fafcff;
}

.wt-broadcast-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #eaf2ff;
    border: 1px solid #c8dbff;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.9rem;
}

.wt-chip-remove {
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 700;
    color: #204a8e;
    line-height: 1;
    padding: 0;
}

.wt-form-project-dialog {
    max-width: 760px;
}

.wt-form-project-table-wrap {
    max-height: 320px;
    margin-top: 0.5rem;
}

@media (max-width: 1000px) {
    .wt-broadcast-picker {
        grid-template-columns: 1fr;
    }
}

.wt-builder-help-list {
    padding-left: 1.25rem;
}

.wt-builder-help-list li {
    margin-bottom: 0.2rem;
}

.wt-builder-template-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #495057;
}

.wt-builder-template-search {
    max-width: 320px;
}

.wt-builder-toolbox-group {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem;
    background: #fafafa;
}

.wt-builder-toolbox-heading {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
}

.wt-builder-toolbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.wt-builder-toolbox-grid .wt-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.wt-builder-toolbox-tile {
    min-height: 58px;
    padding: 0.35rem 0.45rem;
    font-size: 0.82rem;
}

.wt-builder-toolbox-tile small {
    font-size: 0.68rem;
}

.wt-builder-field-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.8rem;
    color: #4b5563;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
}

.wt-builder-canvas-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

.wt-builder-canvas-row-selected {
    border-color: #0d6efd;
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.15);
}

.wt-progress-bar {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.wt-progress-sm {
    height: 6px;
}

.wt-progress-fill {
    height: 100%;
    background: #4caf50;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.wt-progress-text {
    font-size: 0.75rem;
    color: #666;
    white-space: nowrap;
}

.wt-checklist-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.75rem;
}

.wt-checklist-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wt-checklist-item {
    padding: 0.6rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
}

.wt-item-completed {
    background: #f1f8e9;
    border-color: #c5e1a5;
}

.wt-check-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.wt-check-label input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.wt-check-text {
    font-size: 0.9rem;
}

.wt-text-strike {
    text-decoration: line-through;
    color: #888;
}

.wt-item-meta {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.25rem;
    padding-left: 1.75rem;
}

.wt-item-notes {
    font-size: 0.8rem;
    color: #555;
    margin-top: 0.25rem;
    padding-left: 1.75rem;
    font-style: italic;
}

/* ===== Responsive ===== */

@media (min-width: 600px) {
    .wt-button-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .wt-tile {
        min-height: 160px;
        padding: 2rem 1.5rem;
    }

    .wt-tile-icon {
        font-size: 3rem;
    }

    .wt-tile-label {
        font-size: 1.1rem;
    }
}

@media (min-width: 1024px) {
    .wt-button-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.85rem;
    }

    .wt-tile {
        min-height: 118px;
        padding: 1rem 0.65rem;
        border-radius: 12px;
    }

    .wt-tile-icon {
        font-size: 2rem;
        margin-bottom: 0.35rem;
    }

    .wt-tile-logo {
        height: 2rem;
    }

    .wt-tile-logo--amazon {
        height: 2.5rem;
        width: min(100%, 11rem);
    }

    .wt-tile-label {
        font-size: 0.9rem;
    }
}

@media (max-width: 400px) {
    .wt-tile {
        min-height: 110px;
        padding: 1rem 0.75rem;
    }

    .wt-tile-icon {
        font-size: 2rem;
    }

    .wt-tile-label {
        font-size: 0.85rem;
    }
}

/* ===== Blazor Infrastructure ===== */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

.brand-loader {
    display: grid;
    place-items: center;
    gap: 1rem;
    margin: 14vh auto 0 auto;
}

.brand-loader-logo {
    position: relative;
    width: clamp(8rem, 18vw, 13rem);
    aspect-ratio: 1577.05 / 1745.55;
    filter: drop-shadow(0 0.9rem 1.25rem rgba(0, 44, 94, 0.22));
}

.brand-loader-outline,
.brand-loader-fill,
.brand-loader-sweep {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-image: url("/images/Pantexis_Logo.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("/images/Pantexis_Logo.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.brand-loader-outline {
    opacity: 0.3;
    background-color: #002c5e;
}

.brand-loader-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(125deg, rgba(20, 140, 140, 0.22) 0 8px, rgba(20, 140, 140, 0.04) 8px 16px);
    animation: brand-loader-lines 1.6s linear infinite;
}

.brand-loader-fill {
    inset: auto 0 0 0;
    height: var(--blazor-load-percentage, 0%);
    background: linear-gradient(180deg, #27c5c0 0%, #148c8c 50%, #002c5e 100%);
    transition: height 0.12s ease-out;
}

.brand-loader-sweep {
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.65) 50%, transparent 80%);
    transform: translateX(-130%);
    animation: brand-loader-sweep 2.1s ease-in-out infinite;
    opacity: 0.55;
}

.brand-loader-progress {
    position: static;
    inset: auto;
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: #0f3465;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.brand-loader-refresh-hint {
    max-width: min(32rem, 92vw);
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.45;
    font-weight: 500;
    text-align: center;
    color: #334155;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 52, 101, 0.18);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.25rem rgba(15, 52, 101, 0.12);
    opacity: 0;
    transform: translateY(0.5rem);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

    .brand-loader-refresh-hint.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .brand-loader-refresh-hint kbd {
        display: inline-block;
        margin: 0 0.1rem;
        padding: 0.1rem 0.35rem;
        font-family: inherit;
        font-size: 0.8em;
        font-weight: 600;
        color: #0f3465;
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-radius: 0.25rem;
        box-shadow: inset 0 -1px 0 #cbd5e1;
    }

@keyframes brand-loader-lines {
    from {
        transform: translateX(-18px);
    }

    to {
        transform: translateX(18px);
    }
}

@keyframes brand-loader-sweep {
    0%,
    30% {
        transform: translateX(-130%);
    }

    65%,
    100% {
        transform: translateX(130%);
    }
}

code {
    color: #c02d76;
}

/* ===== Timesheet ===== */

.wt-ts-month-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.wt-ts-month-title {
    margin: 0;
    flex: 1;
    text-align: center;
    font-size: 1.1rem;
}

.wt-ts-calendar {
    overflow-x: auto;
}

.wt-ts-cal-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.wt-ts-cal-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.wt-ts-cal-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 8px;
    cursor: pointer;
    padding: 0.2rem;
    transition: background 0.15s;
    font-size: 0.85rem;
}

.wt-ts-cal-cell:hover:not(.wt-ts-cal-empty) {
    background: #e3f2fd;
}

.wt-ts-cal-empty {
    cursor: default;
}

.wt-ts-cal-selected {
    background: #0078d4 !important;
    color: white;
}

.wt-ts-cal-selected .wt-ts-cal-hours {
    color: rgba(255,255,255,0.85);
}

.wt-ts-cal-today {
    outline: 2px solid #0078d4;
    outline-offset: -2px;
}

.wt-ts-cal-submitted {
    background: #e8f5e9;
}

.wt-ts-cal-submit-preview:not(.wt-ts-cal-selected) {
    background: #ffe4e6;
    box-shadow: inset 0 0 0 1px #ef4444;
}

.wt-ts-cal-submit-preview .wt-ts-cal-hours {
    color: #b91c1c;
}

.wt-ts-cal-day {
    font-weight: 600;
    font-size: 0.8rem;
}

.wt-ts-cal-hours {
    font-size: 0.65rem;
    color: #666;
    font-weight: 500;
}

.wt-ts-hours-full {
    color: #2e7d32;
    font-weight: 700;
}

.wt-ts-day-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wt-ts-day-header h3 {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 1rem;
}

.wt-ts-week-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #555;
}

.wt-ts-entries {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wt-ts-entry {
    padding: 0.65rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
}

.wt-ts-entry-approved {
    border-left: 3px solid #4caf50;
}

.wt-timeapproval-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.wt-timeapproval-page-header h2 {
    margin: 0;
}

.wt-timeapproval-summary-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.wt-timeapproval-submitted-badge {
    white-space: nowrap;
    background: #2e7d32;
    color: #fff;
}

.wt-timeapproval-inline-detail {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.wt-timeapproval-inline-detail-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.wt-timeapproval-inline-detail-heading {
    margin: 0;
    font-size: 1rem;
}

.wt-timeapproval-inline-entries-caption {
    margin: 0.75rem 0 0.35rem;
}

.wt-timeapproval-inline-summary-wrap,
.wt-timeapproval-inline-entries-wrap {
    max-width: 100%;
    overflow-x: auto;
    min-width: 0;
}

.wt-timeapproval-memo-cell {
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 22rem;
}

.wt-timeapproval-inline-flags {
    white-space: normal;
    word-break: break-word;
}

.wt-timeapproval-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    column-gap: 0.75rem;
    row-gap: 0.6rem;
}

.wt-timeapproval-toolbar > label,
.wt-timeapproval-field > label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wt-timeapproval-field {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.wt-timeapproval-field > label {
    min-width: 12rem;
}

.wt-timeapproval-stepper {
    display: flex;
    gap: 0.25rem;
}

.wt-timeapproval-toolbar > .wt-timeapproval-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-end;
    padding-bottom: 0.45rem;
    white-space: nowrap;
}

.wt-timeapproval-checkbox > input {
    margin: 0;
}

.wt-timeapproval-toolbar-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

.wt-timeapproval-toolbar-actions > .wt-timeapproval-submitted-badge {
    align-self: center;
}

.wt-timeapproval-toolbar .wt-timeapproval-submitted-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
}

.wt-timeapproval-summary-header,
.wt-timeapproval-detail-header,
.wt-timeapproval-flags {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.wt-timeapproval-summary-header {
    justify-content: space-between;
}

.wt-timeapproval-legend {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.wt-timeapproval-legend-approved,
.wt-timeapproval-cell-approved {
    color: #c62828;
}

.wt-timeapproval-legend-partial,
.wt-timeapproval-cell-partial {
    color: #ef6c00;
}

.wt-timeapproval-legend-unapproved {
    color: #333;
}

.wt-timeapproval-table tbody tr {
    cursor: pointer;
}

.wt-timeapproval-row-selected {
    background: #e3f2fd;
}

.wt-timeapproval-warning {
    color: #b71c1c;
}

.wt-timeapproval-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.wt-timeapproval-detail-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-weight: 600;
}

.wt-timeapproval-detail-wide {
    grid-column: 1 / -1;
}

.wt-ts-entry-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wt-ts-entry-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.wt-ts-entry-info strong {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wt-ts-entry-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.wt-ts-hours-display {
    font-weight: 700;
    font-size: 1rem;
    color: #0078d4;
    min-width: 3rem;
    text-align: right;
}

.wt-ts-hours-input {
    width: 5rem !important;
    text-align: center;
}

.wt-ts-desc-input {
    width: 14rem !important;
}

.wt-ts-top-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.wt-ts-submit-dock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
}

.wt-ts-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.wt-ts-submit-status {
    margin: 0;
    text-align: right;
    font-size: 0.8rem;
}

.wt-ts-common-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wt-ts-common-card {
    cursor: pointer;
    padding: 0.45rem 0.5rem;
    align-items: flex-start;
}

.wt-ts-common-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.wt-ts-record-title {
    display: block;
    font-size: 0.85rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wt-ts-record-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.2;
    max-height: 2.4em;
    white-space: normal;
    font-size: 0.8rem;
    color: #555;
}

.wt-ts-scrum-suggestion .wt-ts-record-title,
.wt-ts-scrum-suggestion .wt-ts-record-line {
    font-weight: 700;
}

.wt-ts-scrum-suggestion .wt-ts-record-line {
    color: inherit;
}

.wt-ts-common-card .wt-btn {
    flex-shrink: 0;
    align-self: center;
}

.wt-ts-add-form {
    border: 2px solid #0078d4;
}

.wt-ts-form-info {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.wt-ts-form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.wt-ts-form-row label {
    min-width: 4rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.wt-ts-form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* --- Timesheet Action Buttons --- */

.wt-ts-action-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.wt-ts-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0.5rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    background: #f0f6ff;
    color: #0078d4;
    border: 2px solid #cce0f5;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.wt-ts-action-btn:hover {
    background: #dbeafe;
    border-color: #0078d4;
}

.wt-ts-action-icon {
    font-size: 1.5rem;
}

@media (max-width: 500px) {
    .wt-ts-action-buttons {
        grid-template-columns: 1fr;
    }
}

/* --- Timesheet Picker Panel --- */

.wt-ts-picker {
    border: 2px solid #0078d4;
    max-height: 60vh;
    overflow-y: auto;
}

.wt-ts-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.wt-ts-picker-header h3 {
    margin: 0;
}

.wt-ts-picker-subhead {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin: 0.75rem 0 0.4rem;
}

/* --- Search Bar --- */

.wt-ts-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: nowrap;
}

.wt-ts-search-bar .wt-input {
    flex: 1;
    min-width: 0;
}

.wt-ts-search-old {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
}

@media (max-width: 760px) {
    .wt-ts-top-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .wt-ts-submit-dock {
        justify-content: flex-start;
    }

    .wt-ts-search-bar {
        flex-wrap: wrap;
    }
}

/* --- Overtime Badge & Toggle --- */

.wt-ts-entry-overtime {
    border-left: 3px solid #ef6c00;
}

.wt-ts-ot-badge {
    color: #ef6c00;
    font-weight: 700;
    font-size: 0.8rem;
}

.wt-ts-ot-active {
    color: #ef6c00 !important;
    font-weight: 700;
}

/* Clock (OT) / airplane (OOP): ghosted until selected; emoji color needs filter */
.wt-ts-flag-icon:not(.wt-ts-ot-active):not(.wt-ts-oop-active) {
    filter: grayscale(1) opacity(0.4);
}

.wt-ts-flag-icon.wt-ts-ot-active,
.wt-ts-flag-icon.wt-ts-oop-active {
    filter: none;
    opacity: 1;
}

.wt-ts-oop-active {
    color: #1565c0 !important;
    font-weight: 700;
}

.wt-ts-ot-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.wt-ts-ot-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.wt-ts-timeoff-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.wt-ts-timeoff-summary-head h3 {
    margin: 0;
}

.wt-ts-timeoff-summary-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.wt-ts-timeoff-summary-card {
    border: 1px solid #d5e4f5;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    background: #f7fbff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wt-ts-timeoff-summary-label {
    color: #4a4a4a;
    font-size: 0.9rem;
}

.wt-dialog.wt-ts-timeoff-dialog {
    width: min(760px, 94vw);
    max-height: min(820px, calc(100vh - 2rem));
    display: flex;
    flex-direction: column;
}

.wt-dialog.wt-ts-timeoff-dialog .wt-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.wt-ts-timeoff-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.wt-ts-timeoff-filters label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: #555;
}

.wt-ts-timeoff-balance-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.wt-ts-timeoff-balance-grid > div {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 0.45rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 3.25rem;
    text-align: center;
}

.wt-ts-timeoff-balance-grid > div span {
    font-size: 0.75rem;
    color: #666;
    line-height: 1.1;
}

.wt-ts-timeoff-balance-grid > div strong {
    font-size: 1.1rem;
    line-height: 1.1;
}

.wt-ts-timeoff-balance-total {
    border-color: #0078d4 !important;
    background: #f0f7ff;
}

.wt-ts-timeoff-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
}

.wt-ts-timeoff-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    font-size: 0.88rem;
}

.wt-ts-timeoff-planned {
    color: #b54800;
}

.wt-dialog.wt-ts-holidays-dialog {
    width: min(760px, 94vw);
    max-height: min(820px, calc(100vh - 2rem));
    display: flex;
    flex-direction: column;
}

.wt-dialog.wt-ts-holidays-dialog .wt-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.wt-dialog.wt-desktop-staged-download-dialog {
    max-height: min(820px, calc(100vh - 2rem));
    display: flex;
    flex-direction: column;
}

.wt-dialog.wt-desktop-staged-download-dialog .wt-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.wt-ts-holidays-toolbar {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.wt-ts-holidays-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: #555;
}

.wt-ts-holiday-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    font-size: 0.88rem;
    color: #555;
}

.wt-ts-holidays-table {
    table-layout: fixed;
}

.wt-ts-holidays-table th:nth-child(1),
.wt-ts-holidays-table td:nth-child(1) {
    width: 8.8rem;
}

.wt-ts-holidays-table th:nth-child(3),
.wt-ts-holidays-table td:nth-child(3) {
    width: 8rem;
    text-align: right;
}

.wt-ts-holidays-row-upcoming {
    background: #f7fbff;
}

.wt-ts-holidays-date {
    font-weight: 600;
    white-space: nowrap;
}

.wt-ts-holidays-description {
    color: #5f5f5f;
}

.wt-ts-holidays-status {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .wt-dialog.wt-ts-holidays-dialog {
        width: min(760px, calc(100vw - 1rem));
        max-height: calc(100vh - 1rem);
    }

    .wt-dialog.wt-ts-holidays-dialog .wt-dialog-header,
    .wt-dialog.wt-ts-holidays-dialog .wt-dialog-body,
    .wt-dialog.wt-ts-holidays-dialog .wt-dialog-footer {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .wt-ts-holidays-toolbar {
        grid-template-columns: 1fr;
    }

    .wt-ts-holidays-table {
        table-layout: auto;
    }

    .wt-ts-holidays-table th:nth-child(1),
    .wt-ts-holidays-table td:nth-child(1),
    .wt-ts-holidays-table th:nth-child(3),
    .wt-ts-holidays-table td:nth-child(3) {
        width: auto;
    }

    .wt-ts-holidays-table th:nth-child(3),
    .wt-ts-holidays-table td:nth-child(3) {
        text-align: left;
    }
}

/* ===== Project Lookup ===== */

.wt-proj-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.wt-proj-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    border: 1px solid #e0e0e0;
}

.wt-proj-list-item:hover {
    background: #e3f2fd;
    border-color: #0078d4;
}

.wt-proj-list-num {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0078d4;
    min-width: 80px;
    flex-shrink: 0;
}

.wt-proj-list-desc {
    font-size: 0.9rem;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Sortable Table Headers --- */

.wt-sortable-th {
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}

.wt-sortable-th:hover {
    background: #e3f2fd;
}

/* --- Project Table --- */

.wt-proj-table {
    border-collapse: collapse;
}

.wt-proj-table-row {
    cursor: pointer;
    transition: background 0.12s;
}

.wt-proj-table-row:hover {
    background: #e3f2fd !important;
}

.wt-proj-table td.wt-proj-list-num {
    font-weight: 700;
    color: #0078d4;
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    background: transparent;
    min-height: auto;
    display: table-cell;
    border-radius: 0;
}

.wt-proj-direct-lookup {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    align-items: center;
}

.wt-proj-direct-lookup .wt-input {
    flex: 1;
}

.wt-proj-detail-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wt-proj-detail-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.wt-proj-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (max-width: 500px) {
    .wt-proj-grid {
        grid-template-columns: 1fr;
    }
}

.wt-proj-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wt-proj-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wt-proj-field span {
    font-size: 0.95rem;
    color: #1a1a1a;
    padding: 0.35rem 0.5rem;
    background: #f5f5f5;
    border-radius: 6px;
    min-height: 2rem;
    display: flex;
    align-items: center;
}

.wt-proj-field .wt-part-file-upload-controls {
    flex-wrap: wrap;
}

.wt-proj-field .wt-er-dropzone.wt-part-file-dropzone-horizontal {
    flex: 1 1 180px;
    flex-direction: row;
    min-width: 180px;
    max-width: 320px;
    min-height: 38px;
    padding: 0.35rem 0.55rem;
    gap: 0.35rem;
    text-align: left;
}

.wt-proj-field .wt-er-dropzone-icon {
    font-size: 1.15rem;
}

.wt-proj-field .wt-er-dropzone-text {
    font-size: 0.76rem;
}

.wt-proj-status {
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    display: inline-block;
}

.wt-proj-status-inprogress {
    background: #fff3e0;
    color: #ef6c00;
}

.wt-proj-status-complete {
    background: #e8f5e9;
    color: #2e7d32;
}

.wt-proj-status-notstarted {
    background: #f5f5f5;
    color: #757575;
}

/* --- Workorder Tree --- */

.wt-tree {
    padding-left: 0;
}

.wt-tree-node {
    margin-bottom: 0.15rem;
}

.wt-tree-children {
    padding-left: 1.25rem;
    border-left: 2px solid #e0e0e0;
    margin-left: 0.5rem;
}

.wt-tree-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.wt-tree-toggle {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    font-size: 0.85rem;
    user-select: none;
}

.wt-tree-toggle-spacer {
    flex-shrink: 0;
    width: 1rem;
}

.wt-tree-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wt-tree-status {
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.wt-tree-complete {
    background: #e8f5e9;
}

.wt-tree-complete .wt-tree-status {
    color: #2e7d32;
}

.wt-tree-inprogress {
    background: #fff3e0;
}

.wt-tree-inprogress .wt-tree-status {
    color: #ef6c00;
}

.wt-tree-notstarted {
    background: #f5f5f5;
}

.wt-tree-notstarted .wt-tree-status {
    color: #757575;
}

.wt-tree-underreview {
    background: #e0f7fa;
}

.wt-tree-underreview .wt-tree-status {
    color: #00796b;
}

.wt-tree-cancelled {
    background: #fafafa;
    text-decoration: line-through;
    opacity: 0.6;
}

.wt-tree-cancelled .wt-tree-status {
    color: #999;
}

/* --- Data Tables --- */

.wt-table-wrap {
    overflow-x: auto;
}

/* Height-capped scroll hosts. These must come after `.wt-table-wrap` so the
   vertical axis stays scrollable when both classes sit on the same element. */
.wt-table-wrap-scroll,
.wt-table-wrap-maxh-62vh,
.wt-table-wrap-maxh-280 {
    overflow: auto;
    min-width: 0;
}

.wt-table-wrap-scroll {
    max-height: min(70vh, calc(100dvh - 14rem));
}

.wt-table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.wt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.wt-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
}

.wt-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.wt-table tbody tr:hover {
    background: #f8f9fa;
}

.wt-clickable-row {
    cursor: pointer;
}

.wt-clickable-row:focus {
    outline: 2px solid #1565c0;
    outline-offset: -2px;
}

.wt-table-grid th,
.wt-table-grid td {
    border: 1px solid #e0e0e0;
}

.wt-table-grid th {
    border-bottom-width: 1px;
}

/* Sticky header row for data tables in a vertical scroll region (see tabular-data-ui.mdc).
   `separate` is required because collapsed borders do not travel with a sticky thead.
   Note the `tr`: a `thead > th` selector matches nothing, since th is a child of tr. */
.wt-table-wrap-scroll .wt-table,
.wt-table-wrap-maxh-62vh .wt-table,
.wt-table-wrap-maxh-280 .wt-table,
.wt-table-wrap-sticky .wt-table {
    border-collapse: separate;
    border-spacing: 0;
}

.wt-table-wrap-scroll .wt-table > thead > tr > th,
.wt-table-wrap-maxh-62vh .wt-table > thead > tr > th,
.wt-table-wrap-maxh-280 .wt-table > thead > tr > th,
.wt-table-wrap-sticky .wt-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--wt-surface-alt, #f5f5f5);
}

.wt-sort-header {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.wt-sort-header:hover {
    color: #1565c0;
}

.wt-col-right {
    text-align: right;
}

.wt-col-center {
    text-align: center;
}

/* --- Project Section Header --- */

.wt-proj-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.wt-proj-section-header h3 {
    margin: 0;
}

/* --- Project Finance Note --- */

.wt-proj-finance-note {
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
    margin: 0 0 0.75rem;
}

/* --- Negative Balance --- */

.wt-proj-balance-negative {
    color: #c62828 !important;
    font-weight: 600;
}

/* --- Table Totals Row --- */

.wt-table tfoot .wt-table-total td {
    border-top: 2px solid #e0e0e0;
    border-bottom: none;
    padding-top: 0.6rem;
    font-size: 0.9rem;
}

/* --- Paid Invoice Row --- */

.wt-table-row-paid td {
    color: #2e7d32;
}

.wt-email-history-row {
    cursor: pointer;
}

.wt-email-history-row-selected {
    background: #eef6ff;
}

/* --- Tree Legend --- */

.wt-tree-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.wt-tree-legend-item {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

/* --- Time History Summary --- */

.wt-proj-time-summary {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #555;
    flex-wrap: wrap;
    align-items: center;
}

/* --- Time History Date Filters --- */

.wt-time-date-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.wt-time-date-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wt-time-date-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
}

.wt-time-date-field input[type="date"] {
    width: auto;
    min-width: 140px;
}

/* --- Compact Table --- */

.wt-table-compact th,
.wt-table-compact td {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
}

.wt-table-compact th {
    font-size: 0.7rem;
}

/* --- Compensation planning adjustments table --- */

.wt-comp-plan-formula-note {
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

@media (min-width: 1100px) {
    .wt-main:has(.wt-comp-plan-page) {
        max-width: min(1600px, calc(100vw - 2rem));
    }
}

.wt-comp-plan-lines-table-wrap {
    min-width: 0;
}

@media (min-width: 1024px) {
    .wt-comp-plan-lines-table {
        table-layout: fixed;
        width: 100%;
        min-width: 0;
    }

    .wt-comp-plan-lines-table th {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.2;
    }

    .wt-comp-plan-lines-table td {
        overflow-wrap: anywhere;
        vertical-align: middle;
    }

    .wt-comp-plan-lines-table th:nth-child(1),
    .wt-comp-plan-lines-table td:nth-child(1) {
        width: 13%;
    }

    .wt-comp-plan-lines-table th:nth-child(2),
    .wt-comp-plan-lines-table td:nth-child(2),
    .wt-comp-plan-lines-table th:nth-child(4),
    .wt-comp-plan-lines-table td:nth-child(4),
    .wt-comp-plan-lines-table th:nth-child(6),
    .wt-comp-plan-lines-table td:nth-child(6),
    .wt-comp-plan-lines-table th:nth-child(7),
    .wt-comp-plan-lines-table td:nth-child(7),
    .wt-comp-plan-lines-table th:nth-child(8),
    .wt-comp-plan-lines-table td:nth-child(8) {
        width: 7%;
    }

    .wt-comp-plan-lines-table th:nth-child(3),
    .wt-comp-plan-lines-table td:nth-child(3),
    .wt-comp-plan-lines-table th:nth-child(5),
    .wt-comp-plan-lines-table td:nth-child(5) {
        width: 9%;
    }

    .wt-comp-plan-lines-table th:nth-child(10),
    .wt-comp-plan-lines-table td:nth-child(10) {
        width: 5%;
        white-space: nowrap;
    }

  /* Notes column (9) intentionally has no width so it absorbs remaining space. */

    .wt-comp-plan-lines-table .wt-comp-plan-input {
        width: 100%;
        min-width: 0;
        max-width: none;
        box-sizing: border-box;
    }
}

@media (max-width: 1023.98px) {
    .wt-comp-plan-lines-table .wt-comp-plan-input {
        min-width: 5.5rem;
    }

    .wt-comp-plan-lines-table .wt-comp-plan-notes-input {
        min-width: 10rem;
    }
}

/* ===== Task Lookup ===== */

.wt-wo-assigned-tasks .wt-wo-assigned-tasks-row {
    cursor: pointer;
}

.wt-wo-child-table-row {
    cursor: pointer;
}

.hse-triage-nav-row {
    cursor: pointer;
}

.pto-admin-pending-row {
    cursor: pointer;
}

.wt-wo-search-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.wt-wo-search-row .wt-input:first-child {
    flex: 1;
    min-width: 200px;
}

.wt-wo-direct-input {
    width: 130px !important;
    flex: none !important;
}

.wt-task-card-clickable {
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.wt-task-card-clickable:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #0078d4;
}

.wt-wo-status-inline {
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    display: inline-block;
}

.wt-wo-status-inprogress { background: #fff3e0; color: #ef6c00; }
.wt-wo-status-notstarted { background: #f5f5f5; color: #757575; }
.wt-wo-status-underreview { background: #e0f7fa; color: #00796b; }
.wt-wo-status-complete { background: #e8f5e9; color: #2e7d32; }
.wt-wo-status-cancelled, .wt-wo-status-deleted { background: #fafafa; color: #999; }
.wt-wo-status-returned { background: #fce4ec; color: #c62828; }
.wt-wo-status-accepted { background: #e3f2fd; color: #1565c0; }

.wt-wo-due-late {
    color: #c62828 !important;
    font-weight: 600;
}

.wt-wo-due-ok {
    color: #2e7d32 !important;
    font-weight: 600;
}

.wt-wo-notes {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 300px;
    overflow-y: auto;
}

/* --- Task Lookup: Status Bar --- */

.wt-wo-status-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.wt-wo-status-lg {
    font-size: 1rem !important;
    padding: 0.3rem 0.75rem !important;
}

.wt-wo-status-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wt-wo-status-btn-inprogress { background: #ef6c00; }
.wt-wo-status-btn-inprogress:hover:not(:disabled) { background: #e65100; }
.wt-wo-status-btn-complete { background: #2e7d32; }
.wt-wo-status-btn-complete:hover:not(:disabled) { background: #1b5e20; }
.wt-wo-status-btn-cancelled { background: #757575; }
.wt-wo-status-btn-cancelled:hover:not(:disabled) { background: #616161; }
.wt-wo-status-btn-deleted { background: #c62828; }
.wt-wo-status-btn-deleted:hover:not(:disabled) { background: #b71c1c; }
.wt-wo-status-btn-returned { background: #6a1b9a; }
.wt-wo-status-btn-returned:hover:not(:disabled) { background: #4a148c; }

/* --- Task Lookup: Save Feedback --- */

.wt-wo-save-ok {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

/* --- Task Lookup: Small Input --- */

.wt-wo-small-input {
    width: 100px !important;
}

/* --- Task Lookup: Wide Field --- */

.wt-proj-field-wide {
    grid-column: 1 / -1;
}

/* ===== Role Management ===== */

.wt-role-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wt-role-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
    transition: border-color 0.15s, background 0.15s;
}

.wt-role-item:hover {
    border-color: #0078d4;
    background: #f0f6ff;
}

.wt-role-assigned {
    border-left: 3px solid #4caf50;
    background: #f1f8e9;
}

.wt-role-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    flex: 1;
}

.wt-role-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #0078d4;
}

.wt-role-name {
    font-size: 0.95rem;
    font-weight: 500;
}

.wt-role-badge-active {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    background: #e8f5e9;
    color: #2e7d32;
    white-space: nowrap;
}

.wt-role-changes {
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: #f5f5f5;
    font-size: 0.9rem;
}

.wt-role-change-add {
    color: #2e7d32;
    margin: 0 0 0.25rem;
}

.wt-role-change-remove {
    color: #c62828;
    margin: 0;
}

.wt-role-success {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

/* ===== Expense Reports ===== */

.wt-er-form-group {
    margin-bottom: 0.75rem;
}

.wt-er-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.25rem;
}

.wt-er-project-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-top: 0.5rem;
}

.wt-er-project-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.1s;
}

.wt-er-project-item:last-child {
    border-bottom: none;
}

.wt-er-project-item:hover {
    background: #e8f0fe;
}

.wt-er-project-selected {
    background: #d0e4ff;
    border-left: 3px solid #0078d4;
}

.wt-er-project-item strong {
    font-size: 0.9rem;
    min-width: 70px;
}

.wt-er-project-item span {
    font-size: 0.85rem;
    color: #555;
}

.wt-er-line-editor {
    border: 2px solid #0078d4;
    background: #f8fbff;
}

.wt-er-line-editor h4 {
    margin: 0 0 0.75rem;
    color: #0078d4;
}

.wt-er-perdiem-group {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.wt-er-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.wt-er-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

.wt-er-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0078d4;
}

.wt-er-input-group {
    display: flex;
    align-items: center;
}

.wt-er-input-prefix {
    background: #e0e0e0;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 6px 0 0 6px;
    padding: 0.5rem 0.5rem;
    font-weight: 600;
    color: #444;
    font-size: 0.9rem;
    line-height: 1;
}

.wt-er-input-group .wt-input {
    border-radius: 0 6px 6px 0;
    flex: 1;
    min-width: 0;
}

.wt-er-calc-launch {
    margin-left: 0.35rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
    min-width: 2.25rem;
    border-radius: 6px;
}

/* Expense line calculator modal (Windows-style layout) */
.wt-calc-modal {
    max-width: 280px;
    width: calc(100vw - 2rem);
    background: #f0f0f0;
    border-radius: 8px;
    padding: 0.65rem 0.75rem 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border: 1px solid #d4d4d4;
}

.wt-calc-modal-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.45rem;
    text-align: center;
}

.wt-calc-display-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.65rem;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
    background: #f7fbff;
    padding: 0.45rem 0.55rem;
    margin-bottom: 0.35rem;
    color: #111;
}

.wt-calc-gst-shortcut {
    display: block;
    width: 100%;
    margin: 0 0 0.5rem;
    padding: 0.25rem 0.35rem;
    font-size: 0.78rem;
    border: none;
    background: transparent;
    color: #0078d4;
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
}

.wt-calc-gst-shortcut:hover {
    color: #106ebe;
}

.wt-calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.wt-calc-key {
    min-height: 40px;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    background: #fafafa;
    font-size: 1rem;
    font-weight: 500;
    color: #222;
    cursor: pointer;
    padding: 0.15rem;
}

.wt-calc-key:hover:not(:disabled) {
    background: #eaeaea;
}

.wt-calc-key:active:not(:disabled) {
    background: #e0e0e0;
}

.wt-calc-key-op {
    background: #fff;
}

.wt-calc-key-muted:disabled {
    color: #b0b0b0;
    background: #f3f3f3;
    cursor: not-allowed;
    border-color: #ddd;
}

.wt-calc-key-eq {
    background: #0078d4;
    border-color: #0078d4;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
}

.wt-calc-key-eq:hover:not(:disabled) {
    background: #106ebe;
    border-color: #106ebe;
}

.wt-calc-error {
    margin-top: 0.45rem;
    font-size: 0.85rem;
}

.wt-calc-error p {
    margin: 0;
}

.wt-calc-modal-footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.65rem;
    padding-top: 0.5rem;
    border-top: 1px solid #d8d8d8;
}

.wt-calc-footer-btn {
    flex: 0 0 auto;
}

.wt-er-amounts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 500px) {
    .wt-er-amounts-grid {
        grid-template-columns: 1fr;
    }
}

.wt-er-line-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* --- Drag & Drop Upload Zone --- */

@keyframes wt-dropzone-active-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px var(--wt-dropzone-active-ring),
            0 0 18px var(--wt-dropzone-active-glow);
    }

    50% {
        box-shadow:
            0 0 0 5px var(--wt-dropzone-active-ring),
            0 0 32px var(--wt-dropzone-active-glow);
    }
}

.wt-er-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.25rem 1rem;
    border: 2px dashed var(--wt-dropzone-border);
    border-radius: 10px;
    background: var(--wt-dropzone-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    text-align: center;
    min-height: 90px;
    box-shadow: none;
}

.wt-er-dropzone:hover {
    border-color: var(--wt-dropzone-hover-border);
    background: var(--wt-dropzone-hover-bg);
}

.wt-er-dropzone.wt-er-dropzone-active,
.wt-er-dropzone.wt-dropzone-js-dragging {
    border-color: var(--wt-dropzone-active-border);
    background: var(--wt-dropzone-active-bg);
    border-style: solid;
    border-width: 3px;
    animation: wt-dropzone-active-pulse 0.85s ease-in-out infinite;
}

.wt-er-dropzone-active .wt-er-dropzone-text,
.wt-er-dropzone-active .wt-er-dropzone-icon {
    color: var(--wt-dropzone-active-text);
}

.wt-er-dropzone-active .wt-er-dropzone-text {
    font-weight: 700;
}

.wt-er-dropzone-has-file {
    border-color: var(--wt-dropzone-has-file-border);
    background: var(--wt-dropzone-has-file-bg);
    border-style: solid;
}

.wt-er-dropzone-has-file:hover {
    border-color: var(--wt-dropzone-has-file-border);
    background: var(--wt-dropzone-has-file-bg);
    filter: brightness(1.04);
}

.wt-er-dropzone-has-file:not(.wt-er-dropzone-active) .wt-er-dropzone-file {
    color: var(--wt-dropzone-has-file-text);
}

.wt-er-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.wt-er-dropzone-icon,
.wt-er-dropzone-text,
.wt-er-dropzone-file,
.wt-multifile-dropzone-summary,
.wt-docagent-dropzone-summary,
.wt-docagent-dropzone-hint-compact {
    pointer-events: none;
}

.wt-er-dropzone-icon {
    font-size: 1.75rem;
}

.wt-er-dropzone-text {
    font-size: 0.85rem;
    color: var(--wt-text-muted);
}

.wt-er-dropzone-file {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wt-dropzone-has-file-text);
}

/* --- Receipt Capture Button --- */

.wt-er-capture-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.35rem;
}

.wt-btn-capture {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: 2px solid #0078d4;
    border-radius: 8px;
    background: #e3f2fd;
    color: #0d47a1;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
    overflow: hidden;
}

.wt-btn-capture:hover:not(:disabled) {
    background: #bbdefb;
    border-color: #0d47a1;
}

.wt-btn-capture:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wt-er-capture-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.4rem;
}

.wt-er-capture-page-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.3rem 0.2rem 0.55rem;
    border: 1px solid #0078d4;
    border-radius: 999px;
    background: #e3f2fd;
    color: #0d47a1;
    font-size: 0.8rem;
    font-weight: 600;
}

.wt-er-capture-page-remove {
    border: none;
    background: transparent;
    color: #c62828;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0.15rem 0.3rem;
    border-radius: 999px;
    cursor: pointer;
}

.wt-er-capture-page-remove:hover {
    background: #ffcdd2;
}

.wt-er-capture-pages-note {
    font-size: 0.78rem;
    flex-basis: 100%;
}

.wt-btn-capture input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wt-serial-capture-field {
    margin-bottom: 0.5rem;
}

.wt-serial-capture-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.wt-serial-capture-row .wt-input {
    flex: 1 1 12rem;
    min-width: 0;
}

.wt-btn-capture-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
}

.wt-serial-capture-feedback {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.35rem;
}

/* --- Receipt Capture Modal --- */

.wt-receipt-capture-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 95vw;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: wt-dialog-in 0.15s ease-out;
}

.wt-receipt-capture-body {
    flex: 1;
    overflow: hidden;
    padding: 0.75rem 1rem;
    min-height: 300px;
}

.wt-receipt-cropper-container {
    position: relative;
    width: 100%;
    height: 55vh;
    height: 55svh;
    min-height: 200px;
    max-height: 60svh;
    overflow: hidden;
    touch-action: none;
}

.wt-receipt-cropper-img {
    display: block;
    max-width: 100%;
}

/* Improve touch hit targets for Cropper.js handles on phones/tablets. */
@media (hover: none), (pointer: coarse) {
    .wt-receipt-cropper-container .cropper-point {
        width: 20px;
        height: 20px;
        opacity: 0.95;
    }

    .wt-receipt-cropper-container .cropper-point.point-n,
    .wt-receipt-cropper-container .cropper-point.point-s {
        margin-left: -10px;
    }

    .wt-receipt-cropper-container .cropper-point.point-e,
    .wt-receipt-cropper-container .cropper-point.point-w {
        margin-top: -10px;
    }

    .wt-receipt-cropper-container .cropper-point.point-ne,
    .wt-receipt-cropper-container .cropper-point.point-nw,
    .wt-receipt-cropper-container .cropper-point.point-sw,
    .wt-receipt-cropper-container .cropper-point.point-se {
        width: 24px;
        height: 24px;
    }

    .wt-receipt-cropper-container .cropper-line {
        background-color: rgba(51, 153, 255, 0.95);
    }
}

/* ===== Confirm Dialog / Input Dialog ===== */

.wt-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.wt-dialog-overlay.wt-dialog-overlay-scrollable {
    align-items: flex-start;
    overflow-y: auto;
    padding-top: max(1rem, 2vh);
    padding-bottom: max(1rem, 2vh);
}

.wt-dialog {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    animation: wt-dialog-in 0.15s ease-out;
}

@keyframes wt-dialog-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.wt-dialog-header {
    padding: 1rem 1.25rem 0.5rem;
}

.wt-dialog-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

.wt-dialog-body {
    padding: 0.75rem 1.25rem;
}

.wt-dialog-body p {
    margin: 0;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.5;
}

.wt-dialog-body p + p {
    margin-top: 0.5rem;
}

.wt-dialog-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem 1rem;
}

.wt-dialog.wt-dialog-sm {
    max-width: 420px;
}

.wt-dialog-title {
    padding: 1rem 1.25rem 0.5rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.wt-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e7eb;
}

.wt-dialog.wt-dialog-approval-comment .wt-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1rem;
}

.wt-dialog.wt-dialog-approval-comment .wt-dialog-comment-field {
    margin: 0;
}

.wt-dialog.wt-dialog-approval-comment .wt-dialog-comment-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.25rem;
}

.wt-dialog.wt-dialog-approval-comment .wt-dialog-comment-hint {
    margin: 0.15rem 0 0.35rem;
    font-size: 0.85rem;
}

.wt-dialog.wt-dialog-approval-comment .wt-dialog-char-count {
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

.wt-dialog.wt-dialog-approval-comment .wt-dialog-footer {
    border-top: 1px solid #e5e7eb;
    padding: 1rem 1.25rem;
    gap: 0.75rem;
}

.wt-btn-secondary {
    background: #666;
}

.wt-btn-secondary:hover:not(:disabled) {
    background: #555;
}

/* ===== RichTextEditor Component ===== */

.wt-rte-wrapper {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wt-rte-wrapper:focus-within {
    border-color: #0078d4;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
}

.wt-rte-wrapper.wt-rte-readonly {
    border-color: #e5e7eb;
    background: #fafafa;
}

.wt-rte-wrapper.wt-rte-readonly:focus-within {
    border-color: #e5e7eb;
    box-shadow: none;
}

/* Toolbar */
.wt-rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: #f8f9fa;
    border-bottom: none;
    margin-bottom: 6px;
    user-select: none;
}

.wt-rte-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #374151;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.wt-rte-btn:hover {
    background: #e5e7eb;
}

.wt-rte-btn:active {
    background: #d1d5db;
}

.wt-rte-btn-ts {
    font-size: 0.9rem;
}

.wt-rte-sep {
    width: 1px;
    height: 20px;
    background: #d1d5db;
    margin: 0 4px;
    flex-shrink: 0;
}

/* Editable content area */
.wt-rte-content {
    min-height: 120px;
    max-height: 500px;
    overflow-y: auto;
    padding: 10px 12px;
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    outline: none;
    color: #1a1a1a;
    word-wrap: break-word;
}

.wt-rte-content:focus {
    background: transparent;
}

.wt-rte-content:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}

.wt-rte-content a {
    color: #0078d4;
    text-decoration: underline;
}

.wt-rte-content ul,
.wt-rte-content ol {
    margin: 0.25em 0;
    padding-left: 2em;
    list-style-position: outside;
}

.wt-rte-content ul[style],
.wt-rte-content ol[style] {
    margin-left: 0 !important;
    padding-left: 2em !important;
    text-indent: 0 !important;
}

.wt-rte-content ul {
    list-style-type: disc;
}

.wt-rte-content ol {
    list-style-type: decimal;
}

.wt-rte-content li {
    padding-left: 0.25em;
    margin-bottom: 0.15em;
    margin-left: 0;
    text-indent: 0;
}

.wt-rte-content li[style] {
    margin-left: 0 !important;
    text-indent: 0 !important;
}

.wt-rte-content p {
    margin: 0.25em 0;
}

/* Read-only state */
.wt-rte-readonly .wt-rte-content {
    background: #f5f5f5;
    border-color: #e5e7eb;
    color: #4b5563;
    cursor: default;
}

.wt-rte-mention-suggestions {
    position: fixed;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    max-height: 180px;
    overflow-y: auto;
    min-width: 220px;
    z-index: 5000;
}

.wt-rte-mention-option {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 0.45rem 0.65rem;
    font-size: 0.88rem;
    cursor: pointer;
    color: #1f2328;
}

.wt-rte-mention-option:hover {
    background: #e7f3ff;
}

.wt-rte-mention-token {
    color: #0969da !important;
    font-weight: 700 !important;
    font-style: normal !important;
    text-decoration: none !important;
}

/* ===== Password Vault ===== */

.wt-vault-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.wt-vault-toolbar-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: 0.35rem;
    flex-wrap: wrap;
}

.wt-vault-actions {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.wt-vault-entries-table {
    table-layout: fixed;
    width: 100%;
}

.wt-vault-entries-table .wt-vault-col-name {
    width: 14rem;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.wt-vault-entries-table .wt-vault-col-username {
    width: 9rem;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.wt-vault-entries-table .wt-vault-col-folder {
    width: 7rem;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.wt-vault-entries-table .wt-vault-col-modified {
    width: 6.5rem;
    white-space: nowrap;
}

.wt-vault-entries-table .wt-vault-col-actions {
    width: 12.5rem;
}

.wt-vault-reveal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.wt-vault-otp-ring {
    --remaining: 1;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #2563eb;
    background: conic-gradient(#2563eb calc(var(--remaining) * 1turn), #dbeafe 0turn);
    transform: rotate(-90deg);
    display: inline-block;
    flex: 0 0 auto;
}

.wt-vault-revealed {
    margin-top: 0.4rem;
    padding: 0.35rem 0.5rem;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: 0.85rem;
    word-break: break-all;
}

.wt-vault-revealed-row {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.wt-vault-inline-status {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #10b981;
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    display: inline-block;
}

.wt-vault-password-input {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.wt-vault-password-input .wt-input {
    flex: 1;
}

.wt-vault-entry-type-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.wt-vault-otp-source-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.wt-otp-qr-scanner-modal {
    max-width: 520px;
}

.wt-otp-qr-scanner-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: auto;
}

.wt-otp-qr-scanner-hint {
    margin: 0;
    font-size: 0.9rem;
}

.wt-otp-qr-scanner-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 55svh;
    overflow: hidden;
    border-radius: 8px;
    background: #111827;
}

.wt-otp-qr-scanner-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wt-otp-qr-scanner-frame {
    position: absolute;
    inset: 12%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.wt-otp-qr-scanner-status {
    margin: 0;
    text-align: center;
}

.wt-vault-file-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: #ffffff !important;
    background: #1f2937 !important;
    border: 1px solid #111827 !important;
    font-weight: 600;
}

.wt-vault-file-label:hover:not(:disabled) {
    background: #111827 !important;
    color: #ffffff !important;
}

.wt-vault-file-label:focus-within {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.wt-vault-file-label input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.wt-vault-gen-options {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.wt-vault-gen-options label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.wt-vault-generated {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: #ecfdf5;
    border: 1px solid #10b981;
    border-radius: 6px;
}

.wt-vault-generated code,
.wt-vault-generated .wt-secret-text {
    flex: 1;
    font-size: 0.95rem;
    word-break: break-all;
}

/* ===== Readable secret rendering (SecretText.razor) =====
   Font stack picked for unambiguous glyphs: slashed/dotted zero vs O and
   distinct 1 / l / I (Cascadia, Consolas, SF Mono, Menlo, DejaVu all qualify).
   Color-coding mirrors password-manager convention: digits blue, symbols red,
   letters in the surrounding text color. */

.wt-secret-text,
.wt-secret-input {
    font-family: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
    font-variant-numeric: slashed-zero;
    font-feature-settings: "zero" 1;
}

.wt-secret-text {
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    white-space: pre-wrap;
    word-break: break-all;
}

.wt-secret-num {
    color: #1d4ed8;
}

.wt-secret-sym {
    color: #b91c1c;
}

.wt-vault-form-secret-preview {
    margin-top: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    display: inline-block;
    max-width: 100%;
}

.wt-vault-status {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    animation: wt-vault-fadein 0.2s ease;
}

.wt-vault-status.wt-success {
    background: #ecfdf5;
    border: 1px solid #10b981;
    color: #065f46;
}

.wt-vault-status.wt-error {
    background: #fef2f2;
    border: 1px solid #ef4444;
    color: #991b1b;
}

.wt-vault-disclaimer {
    margin-top: 1rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #dbe3ef;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.82rem;
}

.wt-auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1rem;
    padding-bottom: 1rem;
}

.wt-auth-disclaimer {
    max-width: 860px;
    margin: 0 auto;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #f8fafc;
    color: #1e293b;
}

.wt-auth-disclaimer h3 {
    margin: 0 0 0.45rem 0;
    text-align: center;
    color: #0f172a;
}

.wt-auth-disclaimer p {
    margin: 0;
    line-height: 1.45;
    text-align: center;
}

.wt-legal-notice {
    margin-top: 0;
    margin-bottom: 1rem;
    border-color: #f59e0b;
    background: #fffbeb;
}

.wt-legal-notice h3 {
    color: #92400e;
    text-align: left;
}

.wt-legal-notice p {
    text-align: left;
}

.wt-legal-notice p + p {
    margin-top: 0.65rem;
}

.wt-legal-notice label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    cursor: pointer;
    font-style: normal;
    text-align: left;
}

.wt-legal-notice label input {
    margin-top: 0.2rem;
}

@keyframes wt-vault-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.wt-badge-good {
    background: #10b981;
    color: white;
}

.wt-badge-warning {
    background: #f59e0b;
    color: white;
}

.wt-badge-danger {
    background: #ef4444;
    color: white;
}

.wt-btn.wt-btn-danger {
    background: #ef4444;
    color: white;
}

.wt-btn.wt-btn-danger:hover:not(:disabled) {
    background: #dc2626;
}

.wt-btn-icon.wt-btn-danger {
    background: transparent;
    color: #ef4444;
}

.wt-vault-admin-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wt-vault-admin-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.wt-vault-kpi-card {
    background: var(--wt-surface);
    border: 1px solid var(--wt-border);
    border-radius: 8px;
    padding: 0.75rem;
}

.wt-vault-kpi-label {
    font-size: 0.8rem;
    color: var(--wt-text-muted);
}

.wt-vault-kpi-value {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wt-text);
}

/* ===== User/Person Editor ===== */

.wt-editor-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 1rem;
    align-items: start;
}

.wt-editor-list {
    min-height: 380px;
}

.wt-editor-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.wt-inline-warning {
    align-self: center;
    color: #b91c1c;
    font-weight: 600;
}

.wt-inline-success {
    align-self: center;
    color: #2e7d32;
    font-weight: 600;
}

.wt-editor-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.wt-editor-record-banner {
    margin-bottom: 1rem;
    padding: 0.65rem 0.85rem;
    background: #e8f0fe;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    color: #1e3a8a;
}

.wt-editor-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.55rem;
}

.wt-editor-group + .wt-editor-group {
    margin-top: 0.5rem;
}

.wt-editor-group--employee {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem 1rem;
}

.wt-profile-photo-block {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.wt-profile-photo-preview-wrap {
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
}

.wt-profile-photo-preview {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 1px solid var(--wt-border, #ccc);
    border-radius: 0.35rem;
    display: block;
}

.wt-profile-photo-placeholder {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--wt-border, #ccc);
    border-radius: 0.35rem;
    color: var(--wt-text-muted, #666);
    font-size: 0.85rem;
    text-align: center;
    padding: 0.35rem;
}

.wt-profile-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.wt-profile-photo-crop-modal {
    max-width: 640px;
}

.wt-profile-photo-crop-help {
    margin: 0 0 0.65rem 0;
    font-size: 0.9rem;
}

.wt-profile-photo-crop-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.wt-profile-photo-choose {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}

.wt-profile-photo-choose-disabled {
    opacity: 0.65;
    pointer-events: none;
}

.wt-input-file-hidden {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.wt-editor-group-single-col {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.wt-editor-field {
    display: flex;
    flex-direction: column;
}

.wt-editor-field .wt-input,
.wt-editor-field .wt-select {
    width: 100%;
}

.wt-editor-inline-row {
    display: grid;
    grid-template-columns: 1fr 160px auto auto;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.wt-editor-checks {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.wt-editor-status-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.wt-editor-status-label {
    font-weight: 600;
}

.wt-editor-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.wt-editor-status {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin: 0.75rem 0;
}

.wt-editor-qbo-table td .wt-select,
.wt-editor-qbo-table td .wt-input {
    width: 100%;
}

.wt-editor-qbo-actions-col {
    width: 170px;
}

.wt-editor-qbo-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

.wt-editor-qbo-table tfoot td {
    border-top: 2px solid #e0e0e0;
    background: #fafafa;
}

.wt-email-pref-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.wt-email-pref-filter {
    width: auto;
    min-width: 180px;
}

.wt-email-pref-count {
    margin-bottom: 0.5rem;
}

.wt-email-pref-template-meta {
    margin-top: 0;
    margin-bottom: 0.8rem;
    color: #4b5563;
}

@media (max-width: 980px) {
    .wt-editor-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== Procure-to-Pay ===== */

.wt-p2p-toolbar {
    flex-wrap: wrap;
}

.wt-p2p-toolbar .wt-input {
    min-width: 220px;
    flex: 1;
}

.wt-p2p-detail-header {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.wt-p2p-detail-header h3 {
    margin: 0;
}

.wt-p2p-view-switch {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
}

.wt-p2p-view-label {
    font-size: 0.82rem;
    color: #4b5563;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.wt-p2p-tabs,
.wt-p2p-workflow,
.wt-p2p-line-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.wt-p2p-view-switch .wt-p2p-tabs {
    margin-bottom: 0;
    align-items: center;
}

.wt-p2p-header-details {
    margin-bottom: 0.75rem;
}

.wt-p2p-header-details h4 {
    margin: 0 0 0.5rem 0;
}

.wt-p2p-workflow label.wt-btn {
    position: relative;
    overflow: hidden;
}

.wt-p2p-workflow label.wt-btn input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wt-row-selected {
    background: rgba(73, 134, 255, 0.08);
}

.wt-p2p-line-controls .wt-input {
    min-width: 220px;
    flex: 1;
}

.wt-p2p-line-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 0.5rem;
}

.wt-p2p-date-input-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.wt-p2p-date-input-group .wt-date-input {
    flex: 1;
    min-width: 0;
}

.wt-p2p-date-picker-btn {
    flex: 0 0 auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    font-size: 1rem;
    line-height: 1;
    background: #fff;
    cursor: pointer;
}

.wt-p2p-date-picker-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.wt-date-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.wt-date-picker-popup {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 41;
    min-width: 17.5rem;
    padding: 0.65rem;
    border: 1px solid #d5deea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}

.wt-date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}

.wt-date-picker-header strong {
    font-size: 0.92rem;
}

.wt-date-picker-dow,
.wt-date-picker-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.15rem;
}

.wt-date-picker-dow {
    margin-bottom: 0.2rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
}

.wt-date-picker-day {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 0.85rem;
    cursor: pointer;
}

.wt-date-picker-day:hover:not(.wt-date-picker-day-empty) {
    background: #e3f2fd;
}

.wt-date-picker-day-empty {
    cursor: default;
    pointer-events: none;
}

.wt-date-picker-day-selected {
    background: #0078d4 !important;
    color: #fff;
    font-weight: 600;
}

.wt-date-picker-day-today:not(.wt-date-picker-day-selected) {
    outline: 2px solid #0078d4;
    outline-offset: -2px;
}

[data-theme="dark"] .wt-p2p-date-picker-btn {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

[data-theme="dark"] .wt-date-picker-popup {
    background: #111827;
    border-color: #374151;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .wt-date-picker-dow {
    color: #9ca3af;
}

[data-theme="dark"] .wt-date-picker-day:hover:not(.wt-date-picker-day-empty) {
    background: #1e3a5f;
}

[data-theme="dark"] .wt-date-picker-day-selected {
    background: #2563eb !important;
}

[data-theme="dark"] .wt-date-picker-day-today:not(.wt-date-picker-day-selected) {
    outline-color: #60a5fa;
}

.wt-po-line-removed td {
    text-decoration: line-through;
    color: #6b7280;
}

.wt-po-line-new td,
.wt-po-line-edited td {
    font-weight: 600;
}

.wt-line-history-note {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.72rem;
    color: #4b5563;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 0.06rem 0.42rem;
}

.wt-po-prior-value {
    text-decoration: line-through;
    color: #6b7280;
    margin-right: 0.25rem;
}

.wt-po-delta-up {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 999px;
    padding: 0.04rem 0.38rem;
}

.wt-po-delta-down {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #166534;
    background: #ecfdf5;
    border: 1px solid #86efac;
    border-radius: 999px;
    padding: 0.04rem 0.38rem;
}

.wt-po-delta-neutral {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.72rem;
    color: #4b5563;
}

@media (max-width: 700px) {
    .wt-p2p-line-grid {
        grid-template-columns: 1fr;
    }
}

.wt-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 2100;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    animation: wt-vault-fadein 0.2s ease;
}

.wt-toast-success {
    background: #ecfdf5;
    border: 1px solid #10b981;
    color: #065f46;
}

.wt-toast-error {
    background: #fef2f2;
    border: 1px solid #ef4444;
    color: #991b1b;
}

.wt-kb-page {
    padding: 1rem;
    display: grid;
    gap: 1rem;
}

.wt-kb-upload,
.wt-kb-detail {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
}

/* Shared collapsible data panels (tables/lists). Knowledge Base aliases keep legacy class names. */
.wt-collapsible-panel,
.wt-kb-detail-panel {
    margin-top: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
}

.wt-collapsible-panel-toggle,
.wt-kb-detail-panel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.25rem 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: inherit;
}

.wt-collapsible-panel-toggle:hover,
.wt-kb-detail-panel-toggle:hover {
    color: #1d4ed8;
}

.wt-section.wt-collapsible-panel {
    margin-top: 0.75rem;
}

.wt-kb-instructions {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: #f8fafc;
}

.wt-kb-instructions summary {
    cursor: pointer;
    font-weight: 600;
}

.wt-kb-instructions-body {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.5rem;
    font-size: 0.92rem;
}

.wt-kb-instructions-body p {
    margin: 0;
}

.wt-kb-instructions-body dl {
    margin: 0;
    display: grid;
    gap: 0.35rem;
}

.wt-kb-instructions-body dt {
    font-weight: 600;
    margin-top: 0.35rem;
}

.wt-kb-instructions-body dd {
    margin: 0 0 0 1rem;
}

.wt-kb-instructions-body ul {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

.wt-kb-form-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    margin-bottom: 0.75rem;
}

.wt-kb-form-grid label {
    display: grid;
    gap: 0.3rem;
    align-content: start;
}

.wt-kb-form-grid input:not([type="checkbox"]),
.wt-kb-form-grid select,
.wt-kb-form-grid textarea {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
}

.wt-kb-full {
    grid-column: 1 / -1;
}

/* Must out-rank .wt-kb-form-grid label so the row lays out as flex, not grid. */
.wt-kb-form-grid label.wt-kb-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.45rem 0.6rem;
}

.wt-kb-checkbox-row input[type="checkbox"] {
    margin-top: 0.15rem;
}

.wt-kb-checkbox-row .wt-muted {
    flex-basis: 100%;
    margin-left: 1.35rem;
}

.wt-kb-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}

.wt-kb-filters label {
    display: grid;
    gap: 0.2rem;
}

.wt-kb-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.wt-kb-table th,
.wt-kb-table td {
    border: 1px solid #e2e8f0;
    padding: 0.45rem;
    text-align: left;
    vertical-align: top;
}

.wt-kb-table th {
    background: #f8fafc;
}

.wt-kb-table-small td,
.wt-kb-table-small th {
    font-size: 0.85rem;
}

.wt-kb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.wt-kb-status {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.wt-kb-ok {
    background: #dcfce7;
    color: #166534;
}

.wt-kb-fail {
    background: #fee2e2;
    color: #991b1b;
}

.wt-kb-progress {
    background: #dbeafe;
    color: #1d4ed8;
}

.wt-kb-pending {
    background: #fef9c3;
    color: #854d0e;
}

.wt-kb-tags {
    color: #64748b;
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.wt-kb-error {
    color: #b91c1c;
    font-weight: 600;
}

.wt-kb-upload-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.wt-kb-upload-success {
    color: #166534;
    font-weight: 600;
    font-size: 0.9rem;
}

.wt-kb-progress-bar {
    height: 0.5rem;
    margin-top: 0.35rem;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    max-width: 28rem;
}

.wt-kb-progress-bar-fill {
    height: 100%;
    background: #2563eb;
    transition: width 0.35s ease;
}

.wt-kb-log-error {
    color: #b42318;
    font-weight: 600;
}

.wt-kb-log-warning {
    color: #8a6d00;
    font-weight: 600;
}

.wt-kb-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ===== Knowledge Base Ask (RAG query UI) ===== */

.wt-kb-ask-page {
    padding: 1rem;
    display: grid;
    gap: 1rem;
    max-width: 960px;
}

.wt-kb-ask-form {
    display: grid;
    gap: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
}

.wt-kb-ask-scope select,
.wt-kb-ask-question textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
    font: inherit;
}

.wt-kb-ask-question textarea {
    resize: vertical;
    min-height: 4rem;
}

.wt-kb-ask-scope,
.wt-kb-ask-question {
    display: grid;
    gap: 0.3rem;
}

.wt-kb-ask-actions {
    display: flex;
    gap: 0.5rem;
}

.wt-kb-polling-note {
    color: #64748b;
    font-size: 0.8rem;
}

.wt-kb-ask-error {
    color: #b91c1c;
    font-weight: 600;
    border-left: 3px solid #b91c1c;
    padding-left: 0.5rem;
}

.wt-kb-ask-turn {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    background: #fff;
    display: grid;
    gap: 0.5rem;
}

.wt-kb-ask-q {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: baseline;
    color: #1e293b;
}

.wt-kb-ask-meta {
    color: #94a3b8;
    font-size: 0.75rem;
    margin-left: auto;
}

.wt-kb-ask-a strong {
    color: #0f172a;
}

.wt-kb-ask-answer {
    white-space: pre-wrap;
    word-wrap: break-word;
    font: inherit;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    margin: 0.25rem 0 0 0;
}

.wt-kb-ask-citations summary {
    cursor: pointer;
    font-weight: 600;
    color: #1e3a8a;
}

.wt-kb-ask-citations ol {
    margin: 0.5rem 0 0 1.25rem;
    display: grid;
    gap: 0.6rem;
}

.wt-kb-ask-cite-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.85rem;
}

.wt-kb-ask-cite-version,
.wt-kb-ask-cite-page,
.wt-kb-ask-cite-type,
.wt-kb-ask-cite-score {
    color: #64748b;
}

.wt-kb-ask-cite-score {
    margin-left: auto;
}

.wt-kb-ask-cite-snippet {
    color: #334155;
    font-size: 0.9rem;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 0.45rem 0.6rem;
    white-space: pre-wrap;
}

.wt-kb-ask-cite-tags {
    color: #64748b;
    font-size: 0.75rem;
}

/* ===== Bug Reporting ===== */

.wt-bug-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1100;
    background: #d97706;
    border: none;
    color: #fff;
    border-radius: 999px;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.wt-bug-fab:hover {
    background: #b45309;
}

.wt-bug-queued-files {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wt-bug-file-list,
.wt-bug-timeline {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

.wt-bug-file-list li,
.wt-bug-timeline li {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.wt-badge-new {
    background: #e3f2fd;
    color: #1565c0;
}

.wt-badge-inprogress {
    background: #fff3e0;
    color: #ef6c00;
}

/* ===== Customer Data ===== */

.wt-cd-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.wt-cd-toolbar-panel {
    padding-bottom: 0.75rem;
}

.wt-cd-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.wt-cd-toolbar .wt-input {
    min-width: 220px;
    flex: 1 1 260px;
}

.wt-cd-customer-select {
    flex: 2 1 420px !important;
}

.wt-cd-customer-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
    padding: 0.6rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: left;
    cursor: pointer;
}

.wt-cd-customer-card-selected {
    border-color: #0078d4;
    background: #eef6ff;
}

.wt-cd-customer-name {
    font-weight: 700;
    color: #1f2937;
}

.wt-cd-customer-meta {
    font-size: 0.78rem;
    color: #64748b;
}

.wt-cd-customer-flags {
    display: flex;
    gap: 0.35rem;
}

.wt-cd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.55rem;
}

.wt-cd-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.82rem;
    color: #4b5563;
}

.wt-cd-wide-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: #4b5563;
}

.wt-cd-checks {
    display: flex;
    gap: 1rem;
    margin-top: 0.65rem;
    font-size: 0.9rem;
}

.wt-cd-map-wrap {
    margin-top: 0.75rem;
}

.wt-cd-map-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    color: #64748b;
}

.wt-cd-map {
    width: 100%;
    height: 280px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
}

.wt-cd-project-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.6rem;
}

@media (max-width: 980px) {
    .wt-cd-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Dark Mode Overrides
   These selectors are intentionally placed at the END of the file
   AND scoped to [data-theme="dark"] so they win over earlier
   hard-coded backgrounds in light mode rules.
   ============================================================ */

[data-theme="dark"] body,
[data-theme="dark"] .wt-app {
    background: var(--wt-bg);
    color: var(--wt-text);
}

[data-theme="dark"] .wt-main {
    color: var(--wt-text);
}

/* Heading + paragraph defaults — scoped to the app shell so we don't repaint
   text inside elements that set their own background+color (badges, banners,
   colored chips). Text inside those elements inherits the parent's color. */
[data-theme="dark"] .wt-app h1,
[data-theme="dark"] .wt-app h2,
[data-theme="dark"] .wt-app h3,
[data-theme="dark"] .wt-app h4,
[data-theme="dark"] .wt-app h5,
[data-theme="dark"] .wt-app h6 {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-section h3,
[data-theme="dark"] .wt-tile-label,
[data-theme="dark"] .wt-tile-desc,
[data-theme="dark"] .wt-welcome,
[data-theme="dark"] .wt-card-header strong,
[data-theme="dark"] .wt-page-header h2,
[data-theme="dark"] .wt-dialog-header h3,
[data-theme="dark"] .wt-dialog-title,
[data-theme="dark"] .wt-dialog-body p {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-dialog-actions,
[data-theme="dark"] .wt-dialog.wt-dialog-approval-comment .wt-dialog-footer {
    border-top-color: var(--wt-border);
}

[data-theme="dark"] .wt-dialog.wt-dialog-approval-comment .wt-dialog-comment-field label {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-muted,
[data-theme="dark"] .wt-loading,
[data-theme="dark"] .wt-task-meta,
[data-theme="dark"] .wt-task-desc,
[data-theme="dark"] .wt-card-body,
[data-theme="dark"] .wt-cd-customer-meta,
[data-theme="dark"] .wt-cd-grid label,
[data-theme="dark"] .wt-cd-wide-label,
[data-theme="dark"] .wt-cd-map-toolbar,
[data-theme="dark"] .wt-progress-text,
[data-theme="dark"] .wt-quick-label,
[data-theme="dark"] .wt-item-meta,
[data-theme="dark"] .wt-checklist-meta,
[data-theme="dark"] .wt-ts-cal-hours,
[data-theme="dark"] .wt-proj-list-desc,
[data-theme="dark"] .wt-proj-field label,
[data-theme="dark"] .wt-builder-template-summary,
[data-theme="dark"] .wt-builder-field-meta,
[data-theme="dark"] .wt-er-form-group label,
[data-theme="dark"] .wt-er-dropzone-text,
[data-theme="dark"] .wt-rte-content,
[data-theme="dark"] .wt-vault-kpi-label,
[data-theme="dark"] .wt-vault-disclaimer,
[data-theme="dark"] .wt-bug-queued-files,
[data-theme="dark"] .wt-kb-tags,
[data-theme="dark"] .wt-kb-polling-note,
[data-theme="dark"] .wt-kb-ask-meta,
[data-theme="dark"] .wt-kb-ask-cite-version,
[data-theme="dark"] .wt-kb-ask-cite-page,
[data-theme="dark"] .wt-kb-ask-cite-type,
[data-theme="dark"] .wt-kb-ask-cite-score,
[data-theme="dark"] .wt-kb-ask-cite-snippet,
[data-theme="dark"] .wt-kb-ask-cite-tags,
[data-theme="dark"] .wt-cd-customer-name {
    color: var(--wt-text-muted);
}

[data-theme="dark"] .wt-tile-logo--amazon-light {
    display: none;
}

[data-theme="dark"] .wt-tile-logo--amazon-dark {
    display: block;
}

[data-theme="dark"] .wt-tile-logo--uploaded-light {
    display: none;
}

[data-theme="dark"] .wt-tile-logo--uploaded-dark {
    display: block;
}

/* Surface containers — tiles, cards, group boxes, dialogs */
[data-theme="dark"] .wt-tile,
[data-theme="dark"] .wt-section,
[data-theme="dark"] .wt-placeholder,
[data-theme="dark"] .wt-card,
[data-theme="dark"] .wt-checklist-item,
[data-theme="dark"] .wt-task-card,
[data-theme="dark"] .wt-ts-entry,
[data-theme="dark"] .wt-role-item,
[data-theme="dark"] .wt-form-users-list,
[data-theme="dark"] .wt-er-project-list,
[data-theme="dark"] .wt-er-project-item,
[data-theme="dark"] .wt-er-line-editor,
[data-theme="dark"] .wt-er-perdiem-group,
[data-theme="dark"] .wt-er-input-prefix,
[data-theme="dark"] .wt-dialog,
[data-theme="dark"] .wt-receipt-capture-modal,
[data-theme="dark"] .wt-rte-wrapper,
[data-theme="dark"] .wt-rte-content,
[data-theme="dark"] .wt-vault-kpi-card,
[data-theme="dark"] .wt-vault-revealed,
[data-theme="dark"] .wt-vault-disclaimer,
[data-theme="dark"] .wt-cd-customer-card,
[data-theme="dark"] .wt-kb-upload,
[data-theme="dark"] .wt-kb-detail,
[data-theme="dark"] .wt-collapsible-panel,
[data-theme="dark"] .wt-kb-detail-panel,
[data-theme="dark"] .wt-kb-instructions,
[data-theme="dark"] .wt-kb-ask-form,
[data-theme="dark"] .wt-kb-ask-turn,
[data-theme="dark"] .wt-kb-ask-answer,
[data-theme="dark"] .wt-kb-ask-cite-snippet,
[data-theme="dark"] .wt-kb-table,
[data-theme="dark"] .wt-calc-modal,
[data-theme="dark"] .wt-builder-toolbox-group,
[data-theme="dark"] .wt-builder-canvas-row,
[data-theme="dark"] .wt-scrum-task-pane,
[data-theme="dark"] .wt-p2p-view-switch,
[data-theme="dark"] .wt-broadcast-selected-list,
[data-theme="dark"] .wt-auth-disclaimer,
[data-theme="dark"] .wt-wo-notes,
[data-theme="dark"] .wt-kb-upload-list,
[data-theme="dark"] .wt-broadcast-chip,
[data-theme="dark"] .wt-mentions-popover,
[data-theme="dark"] .wt-mention-item {
    background: var(--wt-surface);
    color: var(--wt-text);
    border-color: var(--wt-border);
    box-shadow: 0 2px 8px var(--wt-shadow-soft);
}

[data-theme="dark"] .wt-er-dropzone {
    background: var(--wt-dropzone-bg);
    border-color: var(--wt-dropzone-border);
    color: var(--wt-text);
    box-shadow: none;
}

[data-theme="dark"] .wt-er-dropzone:hover {
    background: var(--wt-dropzone-hover-bg);
    border-color: var(--wt-dropzone-hover-border);
}

[data-theme="dark"] .wt-er-dropzone.wt-er-dropzone-active,
[data-theme="dark"] .wt-er-dropzone.wt-dropzone-js-dragging,
[data-theme="dark"] .wt-er-dropzone.wt-er-dropzone-has-file.wt-er-dropzone-active {
    background: var(--wt-dropzone-active-bg);
    border-color: var(--wt-dropzone-active-border);
    border-style: solid;
    border-width: 3px;
    animation: wt-dropzone-active-pulse 0.85s ease-in-out infinite;
}

[data-theme="dark"] .wt-er-dropzone.wt-er-dropzone-has-file:not(.wt-er-dropzone-active) {
    background: var(--wt-dropzone-has-file-bg);
    border-color: var(--wt-dropzone-has-file-border);
}

[data-theme="dark"] .wt-tile:hover {
    box-shadow: 0 4px 16px var(--wt-shadow-strong);
}

[data-theme="dark"] .wt-card:hover,
[data-theme="dark"] .wt-task-card-clickable:hover,
[data-theme="dark"] .wt-ts-common-card:hover {
    box-shadow: 0 2px 10px var(--wt-shadow-strong);
}

/* Form inputs */
[data-theme="dark"] .wt-input,
[data-theme="dark"] .wt-textarea,
[data-theme="dark"] .wt-select,
[data-theme="dark"] .wt-date-input {
    background: var(--wt-surface);
    color: var(--wt-text);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .wt-input::placeholder,
[data-theme="dark"] .wt-textarea::placeholder {
    color: var(--wt-text-subtle);
}

/* Tables */
[data-theme="dark"] .wt-table {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-table th {
    background: var(--wt-surface-muted);
    color: var(--wt-text-muted);
    border-bottom-color: var(--wt-border-strong);
}

[data-theme="dark"] .wt-kb-table th {
    background: var(--wt-surface-muted);
    color: var(--wt-text);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .wt-kb-table .wt-sort-header {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-kb-table .wt-sort-header:hover {
    color: var(--wt-accent);
}

[data-theme="dark"] .wt-table td {
    border-bottom-color: var(--wt-border);
}

[data-theme="dark"] .wt-table tbody tr:hover {
    background: var(--wt-hover);
}

[data-theme="dark"] .wt-table-grid th,
[data-theme="dark"] .wt-table-grid td {
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .wt-table-wrap-scroll .wt-table > thead > tr > th,
[data-theme="dark"] .wt-table-wrap-maxh-62vh .wt-table > thead > tr > th,
[data-theme="dark"] .wt-table-wrap-maxh-280 .wt-table > thead > tr > th,
[data-theme="dark"] .wt-table-wrap-sticky .wt-table > thead > tr > th {
    background: var(--wt-surface-muted);
}

[data-theme="dark"] .wt-clickable-row:focus {
    outline-color: var(--wt-accent);
}

/* Buttons */
[data-theme="dark"] .wt-btn-secondary {
    background: var(--wt-surface-alt);
    color: var(--wt-text);
}

[data-theme="dark"] .wt-btn-secondary:hover:not(:disabled) {
    background: var(--wt-hover);
}

[data-theme="dark"] .wt-back-btn {
    background: var(--wt-surface);
    color: var(--wt-link);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .wt-back-btn:hover {
    background: var(--wt-hover);
}

/* Sortable / link-ish styles. We deliberately do NOT override raw `a`
   so anchors inside colored chips/badges keep their parent's text color. */
[data-theme="dark"] .wt-sort-header,
[data-theme="dark"] .wt-link,
[data-theme="dark"] .wt-rte-content a,
[data-theme="dark"] .wt-login-link,
[data-theme="dark"] .wt-main p a,
[data-theme="dark"] .wt-main li a,
[data-theme="dark"] .wt-section a,
[data-theme="dark"] .wt-card a {
    color: var(--wt-link);
}

[data-theme="dark"] .wt-sort-header:hover {
    color: var(--wt-accent);
}

/* RTE toolbar inside cards */
[data-theme="dark"] .wt-rte-toolbar {
    background: var(--wt-surface-muted);
    border-color: var(--wt-border);
}

[data-theme="dark"] .wt-rte-btn {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-rte-btn:hover {
    background: var(--wt-hover);
}

[data-theme="dark"] .wt-rte-content:empty::before {
    color: var(--wt-text-subtle);
}

/* Project / read-only field display */
[data-theme="dark"] .wt-proj-field span {
    background: var(--wt-surface-muted);
    color: var(--wt-text);
}

[data-theme="dark"] .wt-proj-list-num {
    color: var(--wt-link);
}

[data-theme="dark"] .wt-proj-table td.wt-proj-list-num {
    color: var(--wt-link);
}

/* Dialog overlay needs more contrast on dark */
[data-theme="dark"] .wt-dialog-overlay {
    background: rgba(0, 0, 0, 0.65);
}

/* Top bar shadow */
[data-theme="dark"] .wt-topbar {
    box-shadow: 0 2px 10px var(--wt-shadow-strong);
}

/* Code samples */
[data-theme="dark"] code {
    color: #f9a8d4;
}

/* ----- Tinted accents (banners, status pills, alert chips) -----
   Each rule sets BOTH background AND color so child text inherits the right
   contrast. Using MD3 "container / on-container" pairs: a mid-luminance,
   desaturated background with a high-contrast on-color text. All pairs
   verified at >= 4.5:1 (WCAG AA body). */

/* Inline status banners (info-blue) */
[data-theme="dark"] .wt-editor-record-banner {
    background: #2c3e63;        /* info container */
    color: #cfe1ff;              /* on info container, ~10.7:1 */
    border-color: rgba(122, 183, 255, 0.45);
}

/* Error banner (danger-red) */
[data-theme="dark"] .wt-error {
    background: #4d2326;
    color: #ffd0d0;              /* ~9.3:1 */
    border: 1px solid rgba(255, 138, 138, 0.45);
}

/* Success banner (positive-green) */
[data-theme="dark"] .wt-wo-save-ok {
    background: #1e3d2c;
    color: #b9e9c9;              /* ~9.7:1 */
}

[data-theme="dark"] .wt-action-feedback {
    background: #1e3d2c;
    color: #b9e9c9;
}

[data-theme="dark"] .wt-action-feedback-error {
    background: #4d2326;
    color: #ffd0d0;
    border: 1px solid rgba(255, 138, 138, 0.45);
}

[data-theme="dark"] .wt-input-invalid,
[data-theme="dark"] input.wt-input-invalid,
[data-theme="dark"] select.wt-input-invalid,
[data-theme="dark"] textarea.wt-input-invalid {
    border-color: #ff8a8a !important;
    outline-color: #ff8a8a;
    background: #3a1f22;
}

[data-theme="dark"] .wt-field-error {
    color: #ffb4ab;
}

[data-theme="dark"] .wt-validation-summary {
    background: #4d2326;
    border-color: rgba(255, 138, 138, 0.45);
    color: #ffd0d0;
}

[data-theme="dark"] .wt-validation-summary-link {
    color: #ffd0d0;
}

[data-theme="dark"] .wt-bell-btn-alert {
    background: #4d2326;
    color: #ffd0d0;
    border-color: rgba(255, 138, 138, 0.45);
}

/* Neutral / closed / cancelled */
[data-theme="dark"] .wt-badge-notstarted,
[data-theme="dark"] .wt-badge-closed,
[data-theme="dark"] .wt-status-notstarted,
[data-theme="dark"] .wt-wo-status-notstarted,
[data-theme="dark"] .wt-proj-status-notstarted,
[data-theme="dark"] .wt-tree-notstarted,
[data-theme="dark"] .wt-tree-cancelled,
[data-theme="dark"] .wt-wo-status-cancelled,
[data-theme="dark"] .wt-wo-status-deleted {
    background: #3a3f49;
    color: #d6d9de;              /* ~9:1 */
}

[data-theme="dark"] .wt-tree-notstarted .wt-tree-status,
[data-theme="dark"] .wt-tree-cancelled .wt-tree-status {
    color: #d6d9de;
}

/* In-progress / draft (warning-amber) */
[data-theme="dark"] .wt-badge-workinprogress,
[data-theme="dark"] .wt-badge-inprogress,
[data-theme="dark"] .wt-badge-draft,
[data-theme="dark"] .wt-status-draft,
[data-theme="dark"] .wt-wo-status-inprogress,
[data-theme="dark"] .wt-proj-status-inprogress,
[data-theme="dark"] .wt-tree-inprogress {
    background: #4a3613;
    color: #ffe2a3;              /* ~10.5:1 */
}

[data-theme="dark"] .wt-tree-inprogress .wt-tree-status {
    color: #ffe2a3;
}

/* Pending / new / under review / accepted (info-blue) */
[data-theme="dark"] .wt-badge-underreview,
[data-theme="dark"] .wt-badge-submitted,
[data-theme="dark"] .wt-badge-pendingapproval,
[data-theme="dark"] .wt-badge-new,
[data-theme="dark"] .wt-wo-status-underreview,
[data-theme="dark"] .wt-wo-status-accepted,
[data-theme="dark"] .wt-tree-underreview,
[data-theme="dark"] .wt-timeapproval-row-selected {
    background: #2c3e63;
    color: #cfe1ff;              /* ~10.7:1 */
}

[data-theme="dark"] .wt-tree-underreview .wt-tree-status {
    color: #cfe1ff;
}

[data-theme="dark"] .wt-email-history-row-selected {
    background: #2c3e63;
    color: #cfe1ff;
}

/* Complete / approved / submitted (positive-green) */
[data-theme="dark"] .wt-badge-complete,
[data-theme="dark"] .wt-badge-approved,
[data-theme="dark"] .wt-status-submitted,
[data-theme="dark"] .wt-wo-status-complete,
[data-theme="dark"] .wt-proj-status-complete,
[data-theme="dark"] .wt-tree-complete,
[data-theme="dark"] .wt-ts-cal-submitted,
[data-theme="dark"] .wt-item-completed {
    background: #1e3d2c;
    color: #b9e9c9;              /* ~9.7:1 */
}

[data-theme="dark"] .wt-tree-complete .wt-tree-status {
    color: #b9e9c9;
}

/* Rejected / returned (danger-red) */
[data-theme="dark"] .wt-badge-rejected,
[data-theme="dark"] .wt-wo-status-returned {
    background: #4d2326;
    color: #ffd0d0;              /* ~9.3:1 */
}

/* QuickBooks load (purple accent) */
[data-theme="dark"] .wt-badge-qboload {
    background: #3b2a4a;
    color: #e7d4ff;              /* ~9.5:1 */
}

/* Tinted hover/active states */
[data-theme="dark"] .wt-inventory-row-clickable:hover,
[data-theme="dark"] .wt-sortable-th:hover,
[data-theme="dark"] .wt-proj-list-item:hover,
[data-theme="dark"] .wt-proj-table-row:hover,
[data-theme="dark"] .wt-ts-cal-cell:hover:not(.wt-ts-cal-empty) {
    background: var(--wt-hover) !important;
}

/* Action-button tile (timesheet) — light blue tile in light mode */
[data-theme="dark"] .wt-ts-action-btn {
    background: var(--wt-surface-muted);
    color: var(--wt-text);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .wt-ts-action-btn:hover {
    background: var(--wt-hover);
    border-color: var(--wt-accent);
}

/* Broadcast chip — light blue chip in light mode */
[data-theme="dark"] .wt-broadcast-chip {
    background: #1e3a8a;
    color: #dbeafe;
    border-color: #3b82f6;
}

/* ----- Pre-Blazor brand loader screen (shown before WASM downloads) ----- */
[data-theme="dark"] .brand-loader-progress {
    color: #93c5fd;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .brand-loader-refresh-hint {
    color: #dbeafe;
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(147, 197, 253, 0.28);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.35);
}

    [data-theme="dark"] .brand-loader-refresh-hint kbd {
        color: #dbeafe;
        background: #1e293b;
        border-color: #475569;
        box-shadow: inset 0 -1px 0 #475569;
    }

[data-theme="dark"] .brand-loader-outline {
    background-color: #93c5fd;
    opacity: 0.5;
}

[data-theme="dark"] .brand-loader-fill {
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 50%, #1e3a8a 100%);
}

[data-theme="dark"] .brand-loader-sweep {
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.2) 50%, transparent 80%);
}

/* ----- Daily Scrum: time slots and task rows ----- */

[data-theme="dark"] .wt-timeslots {
    background: var(--wt-surface);
    border-radius: 8px;
}

[data-theme="dark"] .wt-slot-active {
    background: var(--wt-surface-muted);
    color: var(--wt-text);
}

[data-theme="dark"] .wt-slot-off {
    background: var(--wt-surface-alt);
    color: var(--wt-text-muted);
    opacity: 0.85;
}

[data-theme="dark"] .wt-slot-time {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-slot-location {
    background: var(--wt-surface);
    color: var(--wt-text);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .wt-task-single-line,
[data-theme="dark"] .wt-scrum-task-single-line,
[data-theme="dark"] .wt-scrum-task-title,
[data-theme="dark"] .wt-task-info strong {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-task-added {
    opacity: 0.55;
}

[data-theme="dark"] .wt-added-badge {
    color: #86efac;
}

[data-theme="dark"] .wt-scrum-task-pane {
    background: var(--wt-surface-muted);
    border-color: var(--wt-border);
}

[data-theme="dark"] .wt-scrum-task-card {
    background: var(--wt-surface);
    border-color: var(--wt-border);
}

/* ----- Sweep: muted-text labels across the app -----
   These all originally use #333/#444/#555/#4b5563/#64748b/etc. on a white
   parent. In dark mode we need them to read against the dark surface. */

[data-theme="dark"] .wt-ts-holidays-row-upcoming {
    background: transparent;
}

[data-theme="dark"] .wt-part-detail-page .wt-p2p-field > label,
[data-theme="dark"] .wt-item-notes,
[data-theme="dark"] .wt-timeapproval-legend-unapproved,
[data-theme="dark"] .wt-ts-picker-subhead,
[data-theme="dark"] .wt-ts-timeoff-summary-label,
[data-theme="dark"] .wt-ts-holidays-description,
[data-theme="dark"] .wt-cd-detail-summary,
[data-theme="dark"] .wt-er-line-tag,
[data-theme="dark"] .wt-calc-modal-title,
[data-theme="dark"] .wt-vault-revealed-row,
[data-theme="dark"] .wt-vault-kpi-meta,
[data-theme="dark"] .wt-vault-stats-card,
[data-theme="dark"] .wt-email-pref-template-meta,
[data-theme="dark"] .wt-p2p-view-label,
[data-theme="dark"] .wt-p2p-tab-meta,
[data-theme="dark"] .wt-form-section-summary,
[data-theme="dark"] .wt-form-users-list-summary,
[data-theme="dark"] .wt-form-users-list-meta,
[data-theme="dark"] .wt-pdf-progress-text,
[data-theme="dark"] .wt-tt-meta,
[data-theme="dark"] .wt-bell-btn,
[data-theme="dark"] .wt-mention-item-context,
[data-theme="dark"] .wt-mention-item-snippet {
    color: var(--wt-text-muted);
}

/* RTE read-only mode (shown for view-only content) — background flips to
   a slightly elevated muted surface so the text stays readable. */
[data-theme="dark"] .wt-rte-readonly .wt-rte-content,
[data-theme="dark"] .wt-rte-content {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-rte-readonly .wt-rte-content {
    background: var(--wt-surface-muted);
    border-color: var(--wt-border);
}

/* ----- Sweep: tinted/light backgrounds that stay light on dark page ----- */

/* Light blue tinted summary cards (timesheet time-off, vault stats) */
[data-theme="dark"] .wt-ts-timeoff-summary-card,
[data-theme="dark"] .wt-vault-stats-card {
    background: var(--wt-surface-muted);
    color: var(--wt-text);
    border-color: var(--wt-border);
}

/* Timesheet time-off detail balance tile: keep emphasis without low contrast. */
[data-theme="dark"] .wt-ts-timeoff-balance-total {
    background: rgba(122, 183, 255, 0.16);
    border-color: var(--wt-accent) !important;
}

[data-theme="dark"] .wt-ts-timeoff-balance-total span {
    color: var(--wt-text) !important;
}

[data-theme="dark"] .wt-ts-timeoff-balance-total strong {
    color: var(--wt-text);
}

/* Vault toolbar buttons — light surface chips in light mode */
[data-theme="dark"] .wt-vault-toolbar-btn,
[data-theme="dark"] .wt-vault-toolbar-btn:not(:disabled) {
    background: var(--wt-surface-alt);
    color: var(--wt-text);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .wt-vault-toolbar-btn:hover:not(:disabled) {
    background: var(--wt-hover);
}

/* Vault revealed cell (warning yellow tint) — keep as warning accent */
[data-theme="dark"] .wt-vault-revealed {
    background: #4a3410;
    color: #fde68a;
    border-color: #b45309;
}

/* Vault generator output (success green tint) — dark surface so the light
   theme text and bright secret colors stay readable */
[data-theme="dark"] .wt-vault-generated {
    background: #0e3a2c;
    color: #d1fae5;
    border-color: #059669;
}

/* Secret color-coding needs brighter hues on dark surfaces (incl. the dark
   amber revealed box) to keep digits/symbols distinguishable. */
[data-theme="dark"] .wt-secret-num {
    color: #82b7ff;
}

[data-theme="dark"] .wt-secret-sym {
    color: #ff9e9e;
}

[data-theme="dark"] .wt-vault-form-secret-preview {
    background: var(--wt-surface-muted);
    border-color: var(--wt-border);
}

/* Calculator modal */
[data-theme="dark"] .wt-calc-modal {
    background: var(--wt-surface);
    color: var(--wt-text);
}

[data-theme="dark"] .wt-calc-display-input {
    background: var(--wt-surface-muted);
    color: var(--wt-text);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .wt-calc-grid button {
    background: var(--wt-surface-alt);
    color: var(--wt-text);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .wt-calc-grid button:hover:not(:disabled) {
    background: var(--wt-hover);
}

/* Expense report: line editor (light blue tinted card with blue border) */
[data-theme="dark"] .wt-er-line-editor {
    background: var(--wt-surface);
    border-color: var(--wt-accent);
}

[data-theme="dark"] .wt-er-line-editor h4 {
    color: var(--wt-link);
}

/* Mention popover (chat mentions) */
[data-theme="dark"] .wt-mention-item {
    background: var(--wt-surface);
    color: var(--wt-text);
    border-color: var(--wt-border);
}

[data-theme="dark"] .wt-mention-item:hover,
[data-theme="dark"] .wt-mention-item:focus {
    background: var(--wt-hover);
    border-color: var(--wt-border-strong);
}

/* KB status pills — keep semantic green/blue, but darker */
[data-theme="dark"] .wt-kb-ok {
    background: #14532d;
    color: #bbf7d0;
}

[data-theme="dark"] .wt-kb-progress {
    background: #1e3a8a;
    color: #bfdbfe;
}

[data-theme="dark"] .wt-kb-ask-citations summary {
    color: var(--wt-link);
}

[data-theme="dark"] .wt-kb-ask-cite-head {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-kb-ask-cite-snippet {
    background: var(--wt-surface-muted);
    color: var(--wt-text);
    border-color: var(--wt-border);
}

/* Builder toolbox tiles + canvas rows (light grey tinted) */
[data-theme="dark"] .wt-builder-toolbox-group {
    background: var(--wt-surface-muted);
    border-color: var(--wt-border);
}

[data-theme="dark"] .wt-builder-canvas-row-selected {
    border-color: var(--wt-accent);
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.4);
}

/* Part editor light-on-light "choose file" button */
[data-theme="dark"] .wt-part-file-choose-btn.wt-btn-secondary,
[data-theme="dark"] .wt-part-file-choose-btn input[type="file"]::file-selector-button {
    background: var(--wt-surface-alt);
    color: var(--wt-text);
    border-color: var(--wt-text);
}

[data-theme="dark"] .wt-part-file-choose-btn.wt-btn-secondary:hover:not(:disabled) {
    background: var(--wt-hover);
    color: var(--wt-text);
    border-color: var(--wt-border-strong);
}

/* Inventory mat select chip (light surface in light mode) */
[data-theme="dark"] .wt-inventory-mat-item {
    background: var(--wt-surface-muted);
    color: var(--wt-text);
    border-color: var(--wt-border-strong);
}

/* Broadcast chip link */
[data-theme="dark"] .wt-broadcast-link {
    color: var(--wt-link);
}

/* Misc light-tinted surfaces seen elsewhere */
[data-theme="dark"] .wt-tt-table th,
[data-theme="dark"] .wt-tt-row {
    background: var(--wt-surface-muted);
    color: var(--wt-text);
    border-color: var(--wt-border);
}

/* Notification bell button — light grey circle in light mode.
   Doubled selector raises specificity so this wins over Blazor scoped CSS. */
[data-theme="dark"] .wt-bell-btn,
[data-theme="dark"] .wt-bell-btn.wt-bell-btn {
    background: var(--wt-surface-alt);
    color: var(--wt-text-muted);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .wt-bell-btn:hover:not(.wt-bell-btn-idle):not(:disabled) {
    background: var(--wt-hover);
    color: var(--wt-text);
}

/* Mentions toggle (the @ button in the topbar). On a dark topbar / dark page
   the original semi-transparent white chip looks like a glaring white pill. */
[data-theme="dark"] .wt-mentions-toggle,
[data-theme="dark"] .wt-mentions-toggle.wt-mentions-toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

[data-theme="dark"] .wt-mentions-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Login / disclaimer page (Landing.razor) — anonymous landing page that
   shows the company brand and disclaimer text. The original .wt-login-title
   uses color:#000 so the company brand is invisible on dark, and
   .wt-auth-disclaimer h3 hard-codes color:#0f172a which beats the generic
   .wt-app h3 override. Force light text in dark mode. */
[data-theme="dark"] .wt-login-page-branded .wt-login-title,
[data-theme="dark"] .wt-login-page h1,
[data-theme="dark"] .wt-auth-disclaimer h3,
[data-theme="dark"] .wt-auth-disclaimer p {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-legal-notice {
    border-color: #b45309;
    background: #451a03;
}

[data-theme="dark"] .wt-legal-notice h3 {
    color: #fcd34d;
}

/* The branded background logo is also tinted; soften it on dark so it
   doesn't glow as harshly behind the title. */
[data-theme="dark"] .wt-login-page-branded::before {
    opacity: 0.18;
}

/* ----- Icon buttons (pencil, etc.) -----
   .wt-btn-icon has no color set so it inherits — but it's commonly placed on
   colored toolbars or colored chip backgrounds where it inherits dark text.
   Force a readable color in dark mode. */
[data-theme="dark"] .wt-btn-icon {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-btn-icon:hover:not(:disabled) {
    color: var(--wt-link);
}

[data-theme="dark"] .wt-btn-icon.wt-btn-danger {
    color: #ff8a8a;
}

[data-theme="dark"] .wt-btn-icon.wt-btn-danger:hover {
    color: #ffb3b3;
}

[data-theme="dark"] .wt-inline-edit-pencil {
    color: var(--wt-text-muted);
}

[data-theme="dark"] .wt-inline-edit-pencil:hover {
    color: var(--wt-link);
}

/* ----- Out-of-Office Calendar (inline <style> block in OOO razor page) ----- */

[data-theme="dark"] .wt-ooo-view-label,
[data-theme="dark"] .wt-ooo-list-hint {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-ooo-day-view-wrap {
    background: var(--wt-surface);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .wt-ooo-day-header-row {
    background: var(--wt-surface);
    border-bottom-color: var(--wt-border);
}

[data-theme="dark"] .wt-ooo-day-person-header {
    background: var(--wt-surface-muted);
    color: var(--wt-text);
    border-right-color: var(--wt-border);
}

[data-theme="dark"] .wt-ooo-day-time-cell {
    color: var(--wt-text-muted);
    border-right-color: var(--wt-border);
}

[data-theme="dark"] .wt-ooo-day-time-cell-hour {
    background: var(--wt-surface-muted);
}

[data-theme="dark"] .wt-ooo-day-time-cell-half {
    background: var(--wt-surface);
}

[data-theme="dark"] .wt-ooo-day-empty-row {
    border-top-color: var(--wt-border);
}

[data-theme="dark"] .wt-ooo-day-person-row {
    border-bottom-color: var(--wt-border);
}

[data-theme="dark"] .wt-ooo-day-person-cell {
    background: var(--wt-surface);
    border-right-color: var(--wt-border);
}

[data-theme="dark"] .wt-ooo-day-lane,
[data-theme="dark"] .wt-ooo-day-lane-slot-half {
    background: var(--wt-surface);
}

[data-theme="dark"] .wt-ooo-day-lane-slot-hour {
    background: var(--wt-surface-muted);
}

[data-theme="dark"] .wt-ooo-day-lane-slot {
    border-right-color: var(--wt-border);
}

[data-theme="dark"] .wt-ooo-avatar {
    background: var(--wt-surface-alt);
    color: var(--wt-text);
}

[data-theme="dark"] .wt-ooo-status-dot {
    border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .wt-ooo-person-name,
[data-theme="dark"] .wt-ooo-day-header {
    color: var(--wt-text);
}

[data-theme="dark"] .wt-ooo-day-column {
    border-color: var(--wt-border);
    background: var(--wt-surface);
}

[data-theme="dark"] .wt-ooo-day-column-today {
    background: #434b5a;
    border-color: #5a6478;
    color: #ffffff;
}

[data-theme="dark"] .wt-ooo-day-column-today .wt-ooo-day-header {
    background: #4d5668;
    border-bottom-color: #5a6478;
    color: #ffffff;
}

[data-theme="dark"] .wt-ooo-day-header {
    border-bottom-color: var(--wt-border);
}

/* Day-entry pills: keep their colored backgrounds (the legend swatch matches),
   but tint them so they don't shout against the dark page. The original
   light-mode pills were near-white — they now use ~40-50% mix into surface
   so the chips read as colored but don't blow out. */
[data-theme="dark"] .wt-ooo-day-entry-standard {
    background: #2c3e63;
    color: #0f172a;
    border-left-color: #93c5fd;
}

[data-theme="dark"] .wt-ooo-day-entry-scrum {
    background: #3b2a4a;
    color: #0f172a;
    border-left-color: #c084fc;
}

/* Improve label legibility across mixed dark/light hatch stripes. */
[data-theme="dark"] .wt-ooo-day-entry-text {
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    text-shadow:
        -1px 0 0 rgba(255, 255, 255, 1),
        1px 0 0 rgba(255, 255, 255, 1),
        0 -1px 0 rgba(255, 255, 255, 1),
        0 1px 0 rgba(255, 255, 255, 1),
        0 0 4px rgba(255, 255, 255, 0.95),
        0 0 8px rgba(255, 255, 255, 0.85) !important;
    -webkit-text-stroke: 0.75px rgba(255, 255, 255, 1) !important;
}

/* "Away" striped pills use the legend color. The hatch-rgb already drives
   the diagonal stripes — we just need to make the empty stripe darker so
   the hatch reads on a dark page. */
[data-theme="dark"] .wt-ooo-day-entry-away {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(var(--wt-ooo-hatch-rgb, 209,213,219), 0.55),
            rgba(var(--wt-ooo-hatch-rgb, 209,213,219), 0.55) 4px,
            #2a2f3a 4px,
            #2a2f3a 10px
        );
    color: #0f172a;
    border-color: rgba(var(--wt-ooo-hatch-rgb, 209,213,219), 0.55);
    border-left-color: rgba(var(--wt-ooo-hatch-rgb, 209,213,219), 0.85);
}

/* Day-only week pills */
[data-theme="dark"] .wt-ooo-pill {
    color: #0f172a;
}

/* The scrum task search/filter/sort row sits inside a section already; ensure
   selects look right in dark. Most are .wt-input/.wt-select which are themed. */

/* Mentions popover defaults light — invert for dark */
[data-theme="dark"] .wt-mention-item-context {
    color: var(--wt-text-subtle);
}

[data-theme="dark"] .wt-mention-unread {
    background: #1e3a8a;
    border-color: #3b82f6;
}

/* Inventory clickable rows */
[data-theme="dark"] .wt-inventory-row-clickable:hover {
    background: var(--wt-hover);
}

/* ----- Bootstrap component overrides (used by /profile and a few other pages) ----- */

[data-theme="dark"] .table {
    color: var(--wt-text);
    background: var(--wt-surface);
    --bs-table-bg: var(--wt-surface);
    --bs-table-color: var(--wt-text);
    --bs-table-border-color: var(--wt-border);
    --bs-table-striped-bg: var(--wt-surface-muted);
    --bs-table-striped-color: var(--wt-text);
    --bs-table-hover-bg: var(--wt-hover);
    --bs-table-hover-color: var(--wt-text);
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--wt-surface);
    color: var(--wt-text);
    border-color: var(--wt-border);
    box-shadow: none;
}

[data-theme="dark"] .table thead th {
    background-color: var(--wt-surface-muted);
    color: var(--wt-text-muted);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .form-check-label,
[data-theme="dark"] .form-label {
    color: var(--wt-text);
}

[data-theme="dark"] .form-check-input {
    background-color: var(--wt-surface-muted);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--wt-accent);
    border-color: var(--wt-accent);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--wt-surface);
    color: var(--wt-text);
    border-color: var(--wt-border-strong);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--wt-surface);
    color: var(--wt-text);
    border-color: var(--wt-accent);
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25);
}

[data-theme="dark"] .btn-primary {
    background-color: var(--wt-accent);
    border-color: var(--wt-accent);
    color: #0b1220;
}

[data-theme="dark"] .btn-primary:hover:not(:disabled) {
    background-color: #93c5fd;
    border-color: #93c5fd;
    color: #0b1220;
}

[data-theme="dark"] hr {
    border-color: var(--wt-border);
    opacity: 0.6;
}

.wt-cms-panel-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.wt-cms-panel-subheader {
    margin-bottom: 0.5rem;
}

.wt-cms-load-more {
    margin-top: 0.5rem;
    text-align: center;
}

.wt-cms-detail-header {
    margin-bottom: 0.5rem;
}

.wt-cms-detail-actions {
    margin-top: 0.75rem;
}

.wt-cms-template-row {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.wt-cms-template-row label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.wt-cms-tag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.75rem;
}

.wt-cms-tag-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
}

.wt-cms-tag-actions {
    margin-top: 0.35rem;
}

.wt-aichat-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: calc(100vh - 10rem);
}

.wt-aichat-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wt-aichat-page.wt-aichat-focus {
    position: fixed;
    inset: 0;
    z-index: 500;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1rem;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--wt-bg, #f0f2f5);
    overflow: hidden;
}

.wt-aichat-page.wt-aichat-focus .wt-aichat-shell {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.wt-aichat-layout {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
}

.wt-aichat-page.wt-aichat-focus .wt-aichat-layout {
    overflow: hidden;
}

.wt-aichat-page.wt-aichat-focus.wt-aichat-dock-left .wt-aichat-layout,
.wt-aichat-page.wt-aichat-focus.wt-aichat-dock-right .wt-aichat-layout {
    flex-direction: row;
    align-items: stretch;
    gap: 0.75rem;
}

.wt-aichat-page.wt-aichat-focus.wt-aichat-dock-right .wt-aichat-toolbar {
    order: 2;
}

.wt-aichat-page.wt-aichat-focus.wt-aichat-dock-left .wt-aichat-toolbar,
.wt-aichat-page.wt-aichat-focus.wt-aichat-dock-right .wt-aichat-toolbar {
    flex: 0 0 auto;
    width: min(18rem, 32vw);
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--wt-border, #d4d4d8);
    border-radius: 8px;
    padding: 0.65rem;
    background: var(--wt-surface, #fff);
}

.wt-aichat-main {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.wt-aichat-dock-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.wt-aichat-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wt-aichat-dock-controls-label {
    font-size: 0.8rem;
    color: var(--wt-muted, #52525b);
    margin-right: 0.15rem;
}

.wt-aichat-dock-controls .wt-btn.wt-aichat-dock-active {
    border-color: var(--wt-accent, #2563eb);
    background: color-mix(in srgb, var(--wt-accent, #2563eb) 12%, var(--wt-surface, #fff));
}

.wt-aichat-toolbar-vertical {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
}

.wt-aichat-toolbar-vertical .wt-aichat-model-picker {
    flex-direction: column;
    align-items: stretch;
}

.wt-aichat-toolbar-vertical .wt-aichat-model-help {
    align-self: flex-start;
}

.wt-aichat-toolbar-vertical .wt-aichat-knowledge-picker {
    flex-direction: column;
    align-items: stretch;
}

.wt-aichat-toolbar-vertical .wt-aichat-knowledge-list {
    flex-direction: column;
    align-items: flex-start;
}

.wt-aichat-toolbar-vertical .wt-btn {
    width: 100%;
    justify-content: center;
}

.wt-aichat-toolbar-vertical > .wt-muted {
    line-height: 1.35;
    word-break: break-word;
}

.wt-aichat-page.wt-aichat-focus .wt-aichat-messages {
    max-height: none;
    min-height: 0;
}

body.wt-aichat-focus-lock {
    overflow: hidden;
}

.wt-docagent-dropzone-hint-compact {
    display: none;
}

.wt-aichat-page.wt-aichat-focus .wt-docagent-intro {
    display: none;
}

.wt-aichat-page.wt-aichat-focus .wt-docagent-upload {
    padding: 0.35rem 0.5rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

.wt-aichat-page.wt-aichat-focus .wt-docagent-upload-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.wt-aichat-page.wt-aichat-focus .wt-docagent-upload .wt-er-dropzone {
    flex: 0 0 auto;
    flex-direction: row;
    min-height: 0;
    padding: 0.3rem 0.65rem;
    gap: 0.35rem;
    text-align: left;
    border-radius: 6px;
    white-space: nowrap;
}

.wt-aichat-page.wt-aichat-focus .wt-docagent-upload .wt-er-dropzone-icon {
    font-size: 1rem;
    line-height: 1;
}

.wt-aichat-page.wt-aichat-focus .wt-docagent-dropzone-hint-full {
    display: none;
}

.wt-aichat-page.wt-aichat-focus .wt-docagent-dropzone-hint-compact {
    display: inline;
    font-size: 0.85rem;
    color: #666;
}

.wt-aichat-page.wt-aichat-focus .wt-docagent-dropzone-summary {
    display: none;
}

.wt-aichat-page.wt-aichat-focus .wt-docagent-upload-chips {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.wt-aichat-page.wt-aichat-focus .wt-docagent-upload-chips .wt-aichat-attachment-chip {
    flex-shrink: 0;
}

.wt-aichat-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.wt-aichat-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 100%;
    width: 100%;
}

.wt-aichat-toolbar-vertical .wt-aichat-toolbar-row {
    flex-direction: column;
    align-items: stretch;
}

.wt-aichat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.wt-aichat-knowledge-picker {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--wt-border, #d4d4d8);
    border-radius: 6px;
    background: var(--wt-surface, #fff);
}

.wt-aichat-knowledge-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wt-muted, #52525b);
    padding-top: 0.15rem;
}

.wt-aichat-knowledge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
}

.wt-aichat-knowledge-option {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.wt-aichat-shell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    flex: 1 1 auto;
}

.wt-aichat-messages {
    flex: 1 1 auto;
    min-height: 20rem;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--wt-border, #d4d4d8);
    border-radius: 8px;
    padding: 0.75rem;
    background: var(--wt-surface, #fff);
}

.wt-aichat-message {
    margin-bottom: 0.75rem;
    border: 1px solid var(--wt-border, #d4d4d8);
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
}

.wt-aichat-message-user {
    background: var(--wt-surface-muted, #f5f7fb);
}

.wt-aichat-message-assistant {
    background: var(--wt-surface, #fff);
}

.wt-aichat-message-header {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.wt-aichat-message-model {
    font-weight: 500;
    font-size: 0.78rem;
    color: var(--wt-text-muted, #888);
}

.wt-aichat-message-text {
    white-space: pre-wrap;
    margin: 0;
    font-family: inherit;
}

.wt-aichat-rendered pre,
.wt-aichat-rendered pre code {
    background: #0f172a;
    color: #e2e8f0;
    overflow-x: auto;
    border-radius: 6px;
}

.wt-aichat-rendered pre {
    padding: 0.5rem;
}

.wt-aichat-rendered pre code {
    display: block;
    padding: 0;
    font-family: inherit;
}

.wt-aichat-rendered ul {
    margin: 0.35rem 0 0.35rem 1.15rem;
    padding-left: 0.2rem;
}

.wt-aichat-rendered p {
    margin: 0.2rem 0;
}

.wt-aichat-rendered p:first-child {
    margin-top: 0;
}

.wt-aichat-rendered p:last-child {
    margin-bottom: 0;
}

.wt-aichat-rendered li {
    margin: 0.2rem 0;
}

.wt-aichat-rendered li > p {
    margin: 0;
}

.wt-aichat-rendered h1,
.wt-aichat-rendered h2,
.wt-aichat-rendered h3,
.wt-aichat-rendered h4,
.wt-aichat-rendered h5,
.wt-aichat-rendered h6 {
    margin: 0.35rem 0;
}

.wt-aichat-rendered blockquote {
    margin: 0.35rem 0;
    padding-left: 0.75rem;
    border-left: 3px solid var(--wt-border, #d1d5db);
    color: var(--wt-text-muted, #6b7280);
}

.wt-aichat-rendered a {
    color: var(--wt-link, #2563eb);
    text-decoration: underline;
}

.wt-aichat-rendered table {
    border-collapse: collapse;
    margin: 0.35rem 0;
    width: 100%;
}

.wt-aichat-rendered th,
.wt-aichat-rendered td {
    border: 1px solid var(--wt-border, #d1d5db);
    padding: 0.25rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.wt-aichat-rendered th {
    background: var(--wt-surface-muted, #f3f4f6);
}

.wt-aichat-rendered .katex-display {
    margin: 0.5rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    color: var(--wt-aichat-math, #005B60);
}

.wt-aichat-rendered .katex {
    font-size: 1.05em;
    color: var(--wt-aichat-math, #005B60);
}

.wt-aichat-rendered .katex .mord,
.wt-aichat-rendered .katex .mop,
.wt-aichat-rendered .katex .mbin,
.wt-aichat-rendered .katex .mrel,
.wt-aichat-rendered .katex .mopen,
.wt-aichat-rendered .katex .mclose,
.wt-aichat-rendered .katex .mpunct,
.wt-aichat-rendered .katex .minner,
.wt-aichat-rendered .katex .msupsub,
.wt-aichat-rendered .katex .mfrac,
.wt-aichat-rendered .katex .sqrt,
.wt-aichat-rendered .katex svg {
    color: inherit;
    fill: currentColor;
}

.wt-aichat-thinking {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--wt-text-muted, #6b7280);
    font-style: italic;
}

.wt-aichat-thinking-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.wt-aichat-thinking-dots span {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.3;
    animation: wt-aichat-thinking-pulse 1s infinite ease-in-out;
}

.wt-aichat-thinking-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.wt-aichat-thinking-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes wt-aichat-thinking-pulse {
    0%, 80%, 100% {
        opacity: 0.25;
        transform: scale(0.9);
    }

    40% {
        opacity: 0.9;
        transform: scale(1);
    }
}

.wt-aichat-citations {
    margin-top: 0.5rem;
}

.wt-aichat-citations-list {
    margin: 0.5rem 0 0;
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.wt-aichat-citation-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
}

.wt-aichat-citation-number {
    font-weight: 600;
    color: var(--wt-link, #1e3a8a);
}

.wt-aichat-citation-snippet {
    white-space: pre-wrap;
}

.wt-aichat-citation-download {
    position: relative;
    overflow: hidden;
    margin-left: auto;
}

.wt-aichat-citation-download-busy {
    cursor: progress;
}

.wt-aichat-citation-download-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(37, 99, 235, 0.22);
    transition: width 0.15s ease-out;
    pointer-events: none;
    z-index: 0;
}

.wt-aichat-citation-download-label {
    position: relative;
    z-index: 1;
}

.wt-aichat-token-usage {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.3;
}

.wt-aichat-composer {
    border: 1px solid var(--wt-border, #d4d4d8);
    border-radius: 8px;
    padding: 0.6rem;
    background: var(--wt-surface, #fff);
}

.wt-aichat-composer-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wt-aichat-composer-attach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.wt-aichat-input {
    min-height: 6rem;
}

.wt-aichat-composer-drop {
    position: relative;
}

.wt-aichat-composer-drop-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.wt-aichat-composer-drop.wt-aichat-composer-dragging .wt-aichat-composer-drop-input,
.wt-aichat-composer-drop.wt-dropzone-js-dragging .wt-aichat-composer-drop-input {
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    clip: auto;
    overflow: visible;
    white-space: normal;
    pointer-events: auto;
    cursor: copy;
    z-index: 2;
}

.wt-aichat-composer-drop.wt-aichat-composer-dragging .wt-aichat-input,
.wt-aichat-composer-drop.wt-dropzone-js-dragging .wt-aichat-input {
    border-color: var(--wt-dropzone-active-border);
    background: var(--wt-dropzone-active-bg);
    box-shadow: 0 0 0 3px var(--wt-dropzone-active-ring);
}

.wt-aichat-send-status {
    font-size: 0.85rem;
    color: var(--wt-text-muted, #52525b);
}

.wt-aichat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.wt-aichat-vision-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.85rem;
}

.wt-aichat-knowledge-image-note {
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--wt-border, #d4d4d8);
    border-radius: 6px;
    background: var(--wt-surface-muted, #f8fafc);
    color: var(--wt-text-muted, #52525b);
    font-size: 0.85rem;
}

.wt-aichat-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--wt-border, #d4d4d8);
    border-radius: 999px;
    padding: 0.15rem 0.45rem;
    font-size: 0.8rem;
}

.wt-aichat-attachment-chip-failed {
    border-color: #ef4444;
    color: #b91c1c;
}

.wt-aichat-attachment-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wt-aichat-attachment-progress {
    display: inline-block;
    width: 4rem;
    height: 0.35rem;
    border-radius: 999px;
    background: var(--wt-border, #d4d4d8);
    overflow: hidden;
}

.wt-aichat-attachment-progress-bar {
    display: block;
    height: 100%;
    background: var(--wt-accent, #2563eb);
    transition: width 0.15s ease-out;
}

.wt-aichat-attachment-progress-indeterminate .wt-aichat-attachment-progress-bar {
    width: 45%;
    animation: wt-aichat-attachment-progress-indeterminate 1.1s ease-in-out infinite;
}

@keyframes wt-aichat-attachment-progress-indeterminate {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

.wt-dialog.wt-aichat-catalog-dialog,
.wt-dialog.wt-aichat-history-dialog,
.wt-dialog.wt-previous-ai-files-dialog {
    width: min(98vw, 1100px);
    max-width: min(98vw, 1100px);
}

.wt-dialog.wt-previous-ai-files-dialog {
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
}

.wt-dialog.wt-aichat-catalog-dialog .wt-dialog-header,
.wt-dialog.wt-aichat-history-dialog .wt-dialog-header,
.wt-dialog.wt-previous-ai-files-dialog .wt-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.wt-dialog.wt-aichat-catalog-dialog .wt-dialog-header h3,
.wt-dialog.wt-aichat-history-dialog .wt-dialog-header h3,
.wt-dialog.wt-previous-ai-files-dialog .wt-dialog-header h3 {
    flex: 1 1 auto;
    min-width: 0;
}

.wt-dialog.wt-aichat-catalog-dialog .wt-dialog-header .wt-btn,
.wt-dialog.wt-aichat-history-dialog .wt-dialog-header .wt-btn,
.wt-dialog.wt-previous-ai-files-dialog .wt-dialog-header .wt-btn {
    flex: 0 0 auto;
    margin-left: auto;
}

.wt-aichat-catalog-dialog .wt-dialog-body {
    max-height: 75vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wt-aichat-catalog-intro {
    margin: 0;
}

.wt-aichat-catalog-filters {
    margin: 0;
}

.wt-aichat-catalog-search {
    flex: 1 1 16rem;
    min-width: 0;
}

.wt-aichat-catalog-count {
    margin: 0;
}

.wt-aichat-catalog-table-wrap {
    min-width: 0;
    max-height: 52vh;
    overflow: auto;
}

.wt-aichat-catalog-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.wt-aichat-catalog-more {
    margin: 0;
}

.wt-aichat-history-dialog .wt-dialog-body {
    max-height: 75vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wt-previous-ai-files-dialog .wt-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wt-previous-ai-files-intro {
    margin: 0;
    flex: 0 0 auto;
}

.wt-previous-ai-files-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

.wt-previous-ai-files-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.wt-previous-ai-files-table .wt-previous-ai-files-col-status,
.wt-previous-ai-files-table .wt-previous-ai-files-col-uploaded,
.wt-previous-ai-files-table .wt-previous-ai-files-col-expires {
    white-space: nowrap;
}

.wt-previous-ai-files-dialog .wt-dialog-footer {
    flex: 0 0 auto;
}

@media (min-width: 900px) {
    .wt-dialog.wt-previous-ai-files-dialog {
        width: min(96vw, 1100px);
        max-width: min(96vw, 1100px);
    }
}

.wt-aichat-history-intro {
    margin: 0;
}

.wt-aichat-history-search-row {
    margin: 0.5rem 0 0.25rem;
}

.wt-aichat-history-search {
    width: 100%;
}

.wt-aichat-history-table-wrap {
    min-width: 0;
    max-height: 60vh;
    overflow: auto;
}

.wt-aichat-history-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.wt-aichat-history-row {
    cursor: pointer;
}

.wt-aichat-history-title {
    font-weight: 600;
}

.wt-aichat-history-preview {
    margin-top: 0.15rem;
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .wt-aichat-history-preview {
        -webkit-line-clamp: 3;
    }
}

.wt-aichat-history-col-count,
.wt-aichat-history-col-updated {
    white-space: nowrap;
}

.wt-aichat-history-col-actions {
    white-space: nowrap;
    text-align: right;
}

.wt-ai-usage-chart-wrap {
    overflow-x: auto;
    max-width: 100%;
    min-width: 0;
    padding: 0.5rem 0 0.25rem;
}

.wt-ai-usage-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    min-height: 220px;
    min-width: min(100%, 840px);
    padding: 0.25rem 0.25rem 0;
}

.wt-ai-usage-chart-column {
    flex: 1 1 0;
    min-width: 2.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.wt-ai-usage-chart-value {
    font-size: 0.72rem;
    color: #666;
    white-space: nowrap;
}

.wt-ai-usage-chart-bar-wrap {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.wt-ai-usage-chart-bar {
    width: 100%;
    max-width: 2.5rem;
    min-height: 0;
    background: linear-gradient(180deg, #42a5f5 0%, #1565c0 100%);
    border-radius: 4px 4px 0 0;
    transition: height 0.25s ease;
}

.wt-ai-usage-chart-label {
    font-size: 0.72rem;
    color: #666;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}

.wt-ai-admin-usage-dialog .wt-dialog-body {
    max-height: min(70vh, 720px);
    overflow: auto;
}

.wt-ai-admin-usage-detail-wrap {
    min-width: 0;
}

.wt-ai-admin-usage-detail-text {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.wt-aichat-model-picker {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.wt-aichat-model-help {
    border: none;
    background: none;
    padding: 0;
    color: var(--wt-link, #1565c0);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.2;
}

.wt-aichat-model-help:hover:not(:disabled) {
    color: var(--wt-accent, #2563eb);
}

.wt-aichat-model-help:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    text-decoration: none;
}

.wt-dialog.wt-aichat-model-guide-dialog {
    width: min(98vw, 960px);
    max-width: min(98vw, 960px);
}

.wt-dialog.wt-aichat-model-guide-dialog .wt-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.wt-dialog.wt-aichat-model-guide-dialog .wt-dialog-header h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.wt-aichat-model-guide-dialog .wt-dialog-body {
    max-height: 75vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.wt-aichat-model-guide-intro,
.wt-aichat-model-guide-tip {
    margin: 0;
    flex: 0 0 auto;
}

.wt-aichat-model-guide-effort-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .wt-aichat-model-guide-effort-grid {
        grid-template-columns: 1fr;
    }
}

.wt-aichat-model-guide-effort-card {
    border: 1px solid var(--wt-border, #d4d4d8);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    background: var(--wt-surface, #fff);
}

.wt-aichat-model-guide-effort-card h4 {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
}

.wt-aichat-model-guide-effort-card p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #555;
}

.wt-aichat-model-guide-effort-low {
    border-left: 4px solid #16a34a;
}

.wt-aichat-model-guide-effort-medium {
    border-left: 4px solid #ca8a04;
}

.wt-aichat-model-guide-effort-high {
    border-left: 4px solid #dc2626;
}

.wt-aichat-model-guide-table-wrap {
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.wt-aichat-model-guide-table td {
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.wt-aichat-model-guide-summary {
    font-size: 0.82rem;
    margin-top: 0.15rem;
}

.wt-aichat-model-guide-current {
    font-size: 0.82rem;
}

.wt-aichat-model-guide-row-selected {
    background: rgba(37, 99, 235, 0.06);
}

.wt-aichat-model-guide-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.wt-aichat-model-guide-badge-low {
    background: #dcfce7;
    color: #166534;
}

.wt-aichat-model-guide-badge-medium {
    background: #fef9c3;
    color: #854d0e;
}

.wt-aichat-model-guide-badge-high {
    background: #fee2e2;
    color: #991b1b;
}

[data-theme="dark"] .wt-aichat-model-guide-effort-card p {
    color: var(--wt-muted, #a1a1aa);
}

[data-theme="dark"] .wt-aichat-model-guide-badge-low {
    background: rgba(22, 163, 74, 0.2);
    color: #86efac;
}

[data-theme="dark"] .wt-aichat-model-guide-badge-medium {
    background: rgba(202, 138, 4, 0.2);
    color: #fde047;
}

[data-theme="dark"] .wt-aichat-model-guide-badge-high {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
}

[data-theme="dark"] .wt-aichat-model-guide-row-selected {
    background: rgba(147, 197, 253, 0.12);
}

/* Inventory vendor mapping (part-centric approved vendor list) */
.wt-vm-part-header {
    margin-top: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--wt-border);
}

.wt-vm-part-header h3 {
    margin: 0;
}

.wt-vm-part-desc {
    margin: 0.15rem 0 0.55rem;
    color: var(--wt-text-muted);
}

.wt-vm-part-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    font-size: 0.85rem;
    color: var(--wt-text-muted);
}

.wt-vm-vendors-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.45rem;
}

.wt-vm-vendors-head h4 {
    margin: 0;
}

.wt-vm-editor {
    margin-top: 1rem;
    border: 1px solid var(--wt-border);
    border-radius: 8px;
    background: var(--wt-surface-muted);
}

.wt-vm-part-modal .wt-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 75vh;
}

.wt-vm-part-modal-results {
    max-height: 50vh;
    overflow-y: auto;
}

/* Purchase-order catalog item picker */
.wt-part-picker .wt-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 78vh;
}

.wt-part-picker-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-height: 7.5rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--wt-border);
    border-radius: 8px;
    background: var(--wt-surface-muted);
}

.wt-part-picker-category {
    border: 1px solid var(--wt-border);
    border-radius: 999px;
    background: var(--wt-surface);
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    padding: 0.15rem 0.6rem;
    cursor: pointer;
}

.wt-part-picker-category:hover:not(:disabled) {
    border-color: #1565c0;
    color: #1565c0;
}

.wt-part-picker-category:disabled {
    cursor: default;
    opacity: 0.6;
}

.wt-part-picker-category-active {
    border-color: #1565c0;
    background: #e3f2fd;
    font-weight: 600;
}

.wt-part-picker-results {
    max-height: 46vh;
    overflow-y: auto;
    min-width: 0;
}

[data-theme="dark"] .wt-part-picker-category:hover:not(:disabled) {
    border-color: var(--wt-accent);
    color: var(--wt-accent);
}

[data-theme="dark"] .wt-part-picker-category-active {
    border-color: var(--wt-accent);
    background: #2c3e63;
    color: #cfe1ff;
}

.sig-pdf-host {
    min-height: 240px;
    max-height: min(70vh, 900px);
    overflow-y: auto;
    overflow-x: auto;
}

.sig-signing-complete-toolbar {
    align-items: center;
    flex-wrap: wrap;
}

.sig-signing-complete-heading {
    margin: 1rem 0 0.5rem 0;
}

.sig-signing-complete-table td {
    vertical-align: top;
}

.sig-signing-download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sig-signing-complete-table .sig-hash-verification {
    margin-top: 0;
    padding: 0.5rem 0.75rem;
}

.sig-typed-preview {
    margin: 0.5rem 0 1rem 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed #b8bfc7;
    border-radius: 6px;
    min-height: 3.25rem;
    display: flex;
    align-items: center;
    background: #fbfcfd;
}

.sig-typed-preview-text {
    font-size: 2rem;
    line-height: 1.2;
    color: #111;
    overflow-wrap: anywhere;
}

.sig-signing-instructions {
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    background: #f2f7ff;
    border: 1px solid #b9d2f5;
    border-radius: 6px;
}

.sig-signing-instructions li {
    margin: 0.2rem 0;
}

.sig-finish-error {
    margin-bottom: 0.5rem;
}

.sig-signing-thank-you {
    background: #ebfff3;
    border: 1px solid #7bd29f;
    border-radius: 8px;
    color: #095b2a;
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
}

.sig-hash-verification {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--wt-border, #d1d5db);
    border-radius: 8px;
}

.sig-hash-verification-summary {
    cursor: pointer;
    font-weight: 600;
}

.sig-hash-verification-body {
    margin-top: 0.65rem;
}

.sig-hash-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    word-break: break-all;
}

.sig-hash-steps {
    margin: 0.35rem 0 0 1.1rem;
    padding: 0;
}

.sig-field-overlay-signer.sig-field-overlay-awaiting-ack {
    pointer-events: auto;
    cursor: pointer;
    border-style: solid;
    border-color: #b45309;
    background: rgba(245, 158, 11, 0.18);
    animation: sig-field-pulse 1.6s ease-in-out infinite;
}

@keyframes sig-field-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.35); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15); }
}

.sig-field-placement-active .sig-pdf-page-wrap {
    cursor: crosshair;
}

.sig-field-overlay {
    position: absolute;
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    border: 2px dashed var(--wt-accent, #2563eb);
    background: rgba(37, 99, 235, 0.12);
    color: var(--wt-accent, #1e40af);
    cursor: move;
    font-size: 0.7rem;
    user-select: none;
    touch-action: none;
}

.sig-field-overlay:hover {
    background: rgba(37, 99, 235, 0.2);
}

.sig-field-overlay-readonly {
    cursor: default;
    touch-action: auto;
    pointer-events: none;
}

.sig-field-overlay-readonly:hover {
    background: rgba(37, 99, 235, 0.12);
}

.sig-field-overlay-complete {
    border-style: solid;
    border-color: #15803d;
    background: rgba(21, 128, 61, 0.14);
    color: #166534;
}

.sig-field-label {
    pointer-events: none;
    padding: 2px 4px;
    text-align: left;
    line-height: 1.2;
    word-break: break-word;
}

.sig-field-remove {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--wt-border);
    border-radius: 50%;
    background: var(--wt-surface, #fff);
    color: var(--wt-text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.sig-field-remove:hover {
    background: var(--wt-danger-bg, #fee2e2);
    color: var(--wt-danger, #b91c1c);
}

.sig-field-list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.sig-field-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--wt-border);
    font-size: 0.9rem;
}

.sig-recipient-list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.sig-recipient-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--wt-border);
}

.sig-recipient-main {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.sig-recipient-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--wt-surface-muted);
    border: 1px solid var(--wt-border);
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
}

.sig-recipient-details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    word-break: break-word;
}

.sig-recipient-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* Document composition run progress panel */
.wt-composition-progress {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.wt-composition-progress-header {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.wt-composition-progress-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem;
    font-size: 1.05rem;
}

.wt-composition-progress-subhead {
    margin: 0;
    color: #555;
    font-size: 0.92rem;
}

.wt-composition-progress-pulse {
    width: 0.65rem;
    height: 0.65rem;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: #00838f;
    box-shadow: 0 0 0 0 rgba(0, 131, 143, 0.45);
    animation: wt-composition-pulse 1.6s ease-out infinite;
    flex-shrink: 0;
}

@keyframes wt-composition-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 131, 143, 0.45);
    }

    70% {
        box-shadow: 0 0 0 0.55rem rgba(0, 131, 143, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 131, 143, 0);
    }
}

.wt-composition-progress-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.wt-composition-progress-step {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: #777;
}

.wt-composition-progress-step-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
}

.wt-composition-progress-step-complete .wt-composition-progress-step-dot {
    background: #00838f;
}

.wt-composition-progress-step-active .wt-composition-progress-step-dot {
    background: #00838f;
    animation: wt-composition-step-active 1.2s ease-in-out infinite;
}

.wt-composition-progress-step-needs-user .wt-composition-progress-step-dot {
    background: #ef6c00;
    animation: wt-composition-step-active 1.2s ease-in-out infinite;
}

.wt-composition-progress-step-active .wt-composition-progress-step-label,
.wt-composition-progress-step-needs-user .wt-composition-progress-step-label {
    color: #1f2937;
    font-weight: 600;
}

@keyframes wt-composition-step-active {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.25);
        opacity: 0.75;
    }
}

.wt-composition-progress-bar {
    position: relative;
    height: 0.55rem;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.wt-composition-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00838f, #26a69a);
    border-radius: 999px;
    transition: width 0.6s ease;
}

.wt-composition-progress-bar-indeterminate .wt-composition-progress-bar-fill {
    width: 38% !important;
    animation: wt-composition-bar-slide 1.8s ease-in-out infinite;
}

.wt-composition-progress-bar-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.45) 45%,
        transparent 70%);
    animation: wt-composition-shimmer 2.2s linear infinite;
    pointer-events: none;
}

@keyframes wt-composition-bar-slide {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(320%);
    }
}

@keyframes wt-composition-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.wt-composition-progress-ticker-wrap {
    overflow: hidden;
    border-left: 3px solid #00838f;
    padding-left: 0.65rem;
    min-height: 1.35rem;
}

.wt-composition-progress-ticker-text {
    display: inline-block;
    font-size: 0.9rem;
    color: #374151;
    white-space: nowrap;
}

.wt-composition-progress-ticker-animate .wt-composition-progress-ticker-text {
    animation: wt-composition-ticker-fade 4s ease-in-out infinite;
}

@keyframes wt-composition-ticker-fade {
    0%, 8% {
        opacity: 0.35;
        transform: translateY(0.15rem);
    }

    18%, 82% {
        opacity: 1;
        transform: translateY(0);
    }

    92%, 100% {
        opacity: 0.35;
        transform: translateY(-0.1rem);
    }
}

.wt-composition-progress-meta {
    font-size: 0.82rem;
}

.wt-composition-progress-done .wt-composition-progress-pulse,
.wt-composition-progress-done .wt-composition-progress-bar-shimmer {
    display: none;
}

.wt-composition-progress-done .wt-composition-progress-bar-fill {
    background: linear-gradient(90deg, #2e7d32, #43a047);
}

.wt-composition-progress-failed .wt-composition-progress-bar-fill {
    background: linear-gradient(90deg, #c62828, #e53935);
}

.wt-composition-progress-failed .wt-composition-progress-ticker-wrap {
    border-left-color: #c62828;
}

.wt-composition-progress-cancelled .wt-composition-progress-bar-fill {
    background: #9e9e9e;
}

.wt-composition-progress-waiting-user .wt-composition-progress-pulse {
    background: #ef6c00;
    animation: wt-composition-pulse-warn 1.6s ease-out infinite;
}

@keyframes wt-composition-pulse-warn {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 108, 0, 0.45);
    }

    70% {
        box-shadow: 0 0 0 0.55rem rgba(239, 108, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 108, 0, 0);
    }
}

.wt-composition-progress-waiting-user .wt-composition-progress-ticker-wrap {
    border-left-color: #ef6c00;
}

.wt-composition-progress-paused .wt-composition-progress-bar-fill {
    background: linear-gradient(90deg, #546e7a, #78909c);
}

.wt-composition-progress-paused .wt-composition-progress-ticker-wrap {
    border-left-color: #546e7a;
}

[data-theme="dark"] .wt-composition-progress-subhead,
[data-theme="dark"] .wt-composition-progress-meta {
    color: #b0b0b0;
}

[data-theme="dark"] .wt-composition-progress-step {
    color: #9ca3af;
}

[data-theme="dark"] .wt-composition-progress-step-active .wt-composition-progress-step-label,
[data-theme="dark"] .wt-composition-progress-step-needs-user .wt-composition-progress-step-label {
    color: #f3f4f6;
}

[data-theme="dark"] .wt-composition-progress-ticker-text {
    color: #e5e7eb;
}

[data-theme="dark"] .wt-composition-progress-bar {
    background: #333;
}

[data-theme="dark"] .wt-composition-progress-step-dot {
    background: #4b5563;
}