/* ── Triage Partners design tokens ──────────────────────────────────────── */
:root {
    /* Activity type colors — one value per type, used for bars, icons, labels,
       sheet headers, and Start buttons throughout the app. */
    --color-customer:        #F32735;   /* Brand red  — Customer Job    */
    --color-customer-hover:  #c41f2b;
    --color-customer-light:  #fff0f0;

    --color-tech-assist:     #0891b2;   /* Deep teal  — Tech Assist     */
    --color-tech-assist-light: #ecfeff;

    --color-admin-time:      #d97706;   /* Amber      — Admin Time      */
    --color-admin-time-light: #fffbeb;

    --color-drive-time:      #16a34a;   /* Green      — Drive Time      */
    --color-drive-time-light: #f0fdf4;

    --color-clock:           #6b7280;   /* Gray       — Clock In/Out    */

    /* In-progress Customer activity action buttons */
    --color-photos:          #6366f1;   /* Indigo     — Take/Add Photos */
    --color-photos-hover:    #4f46e5;
    --color-jha:             #d97706;   /* Amber      — Job Hazard Assessment (safety) */
    --color-jha-hover:       #b45309;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 0;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
    }

/* ── Sticky header + step-bar wrapper ───────────────────────────────────── */
/* Wraps the page title header and WizardStepBar together so both are anchored
   at the top of the viewport regardless of whether the document or an inner
   div is the scroll container. Individual page headers should NOT set their
   own position:sticky when inside this wrapper. */
.page-top-anchored {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ── Shared wizard page footer buttons ───────────────────────────────────── */
/* JobDetails, WorkPerformed, SerializedEquipment, and WebPhotos all use these.
   Page-scoped .razor.css files should reference these globals and only override
   if a page has a genuine variation. */

.wizard-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #dee2e6;
    display: flex;
    gap: 8px;
}

.wizard-btn-back {
    flex: 1;
    padding: 13px 20px;
    background: none;
    color: #6c757d;
    font-size: 1rem;
    font-weight: 600;
    border: 1.5px solid #dee2e6;
    border-radius: 10px;
    cursor: pointer;
}
.wizard-btn-back:disabled { opacity: 0.65; cursor: not-allowed; }

.wizard-btn-save-exit {
    flex: 1;
    padding: 13px 16px;
    background: #e65100;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}
.wizard-btn-save-exit:disabled { opacity: 0.65; cursor: not-allowed; }

.wizard-btn-primary {
    flex: 1;
    padding: 13px;
    background: #2563eb;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.wizard-btn-primary:disabled { opacity: 0.65; cursor: not-allowed; }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ── Google Places autocomplete dropdown ────────────────────────────────── */
/* The Maps API injects .pac-container directly into <body>. The bottom-sheet
   backdrop sits at z-index 200 — force the dropdown above it so it is never
   obscured when the address field is inside an open sheet. */
.pac-container {
    z-index: 1500 !important;
}

/* ── Comment field row (textarea + translate icon) ───────────────────────── */
/* Wrap a <textarea> and <TranslateButton> together in this class so the icon
   sits to the right of the field at the same top edge, always visible when
   the user has enabled comment translation in Profile & Settings. */
.comment-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.comment-row textarea {
    flex: 1;
    min-width: 0;
}