/* ==========================================================================
   Voyzant Support Portal - design system
   Loaded LAST by every layout so it can refine Bootstrap and the legacy sheets.
   Purely presentational: no rule here changes what any control does.
   ========================================================================== */

:root {
    /* Brand + neutrals */
    --vz-primary: #2563eb;
    --vz-primary-hover: #1d4ed8;
    --vz-primary-soft: #eff6ff;
    --vz-navy: #0e2238;
    --vz-success: #16a34a;
    --vz-success-soft: #ecfdf3;
    --vz-danger: #dc2626;
    --vz-danger-soft: #fef2f2;
    --vz-warning: #d97706;
    --vz-warning-soft: #fffbeb;
    --vz-info: #0891b2;
    --vz-text: #1f2937;
    --vz-text-strong: #111827;
    --vz-muted: #6b7280;
    --vz-border: #e5e7eb;
    --vz-border-strong: #d1d5db;
    --vz-surface: #ffffff;
    --vz-surface-alt: #f9fafb;
    --vz-bg: #f6f8fb;
    /* Shape + depth */
    --vz-radius-sm: 6px;
    --vz-radius: 8px;
    --vz-radius-lg: 12px;
    --vz-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --vz-shadow: 0 4px 12px rgba(16, 24, 40, .08);
    --vz-shadow-lg: 0 20px 40px rgba(16, 24, 40, .14);
    --vz-ring: 0 0 0 3px rgba(37, 99, 235, .25);
    --vz-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --vz-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    /* Bootstrap hooks */
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: #2563eb;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1d4ed8;
    --bs-body-color: #1f2937;
    --bs-border-color: #e5e7eb;
    --bs-border-radius: 8px;
}

/* ---------- Base ---------- */

html {
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    font-family: var(--vz-font);
    color: var(--vz-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--vz-text-strong);
    font-weight: 600;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }

a { color: var(--vz-primary); }
a:hover { color: var(--vz-primary-hover); }

img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--vz-primary); outline-offset: 2px; }

::selection { background: rgba(37, 99, 235, .18); }

/* ---------- Page header pattern ---------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.page-title {
    margin: 0;
    font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
    font-weight: 600;
    color: var(--vz-text-strong);
}

.page-subtitle {
    margin: 4px 0 0;
    color: var(--vz-muted);
    font-size: .925rem;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-narrow { max-width: 960px; }
.page-medium { max-width: 1200px; }

/* ---------- Cards / surfaces ---------- */

.card {
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-radius-lg);
    box-shadow: var(--vz-shadow-sm);
    background-color: var(--vz-surface);
}

.card.border-0 { border: 1px solid var(--vz-border) !important; }

.card-header {
    background: var(--vz-surface);
    border-bottom: 1px solid var(--vz-border);
    padding: 16px 20px;
}

.card-header:first-child { border-radius: var(--vz-radius-lg) var(--vz-radius-lg) 0 0; }

.card-body { padding: 20px; }

@media (min-width: 992px) {
    .card-body { padding: 24px; }
}

.card-footer {
    background: var(--vz-surface-alt);
    border-top: 1px solid var(--vz-border);
}

.vz-card {
    background: var(--vz-surface);
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-radius-lg);
    box-shadow: var(--vz-shadow-sm);
    padding: 20px;
}

@media (min-width: 992px) {
    .vz-card { padding: 24px; }
}

.vz-card + .vz-card { margin-top: 16px; }

.vz-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--vz-text-strong);
    margin: 0 0 4px;
}

.vz-section-desc {
    color: var(--vz-muted);
    font-size: .875rem;
    margin: 0 0 16px;
}

.vz-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--vz-muted);
}

    .vz-empty .vz-empty-icon {
        font-size: 2.25rem;
        color: #9ca3af;
        display: block;
        margin-bottom: 8px;
    }

    .vz-empty h3 { color: var(--vz-text-strong); margin-bottom: 4px; }

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--vz-radius);
    font-weight: 500;
    padding: .5rem 1rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-sm { padding: .3rem .65rem; border-radius: var(--vz-radius-sm); }
.btn-lg { padding: .7rem 1.25rem; border-radius: 10px; }

.btn-primary {
    --bs-btn-bg: var(--vz-primary);
    --bs-btn-border-color: var(--vz-primary);
    --bs-btn-hover-bg: var(--vz-primary-hover);
    --bs-btn-hover-border-color: var(--vz-primary-hover);
    --bs-btn-active-bg: #1e40af;
    --bs-btn-active-border-color: #1e40af;
    --bs-btn-disabled-bg: var(--vz-primary);
    --bs-btn-disabled-border-color: var(--vz-primary);
    color: #fff;
    background-color: var(--vz-primary);
    border-color: var(--vz-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--vz-primary);
    --bs-btn-border-color: #bfdbfe;
    --bs-btn-hover-bg: var(--vz-primary-soft);
    --bs-btn-hover-color: var(--vz-primary-hover);
    --bs-btn-hover-border-color: var(--vz-primary);
    --bs-btn-active-bg: var(--vz-primary);
    --bs-btn-active-border-color: var(--vz-primary);
    --bs-btn-active-color: #fff;
}

.btn-success {
    --bs-btn-bg: var(--vz-success);
    --bs-btn-border-color: var(--vz-success);
    --bs-btn-hover-bg: #15803d;
    --bs-btn-hover-border-color: #15803d;
    --bs-btn-active-bg: #166534;
    --bs-btn-active-border-color: #166534;
}

.btn-danger {
    --bs-btn-bg: var(--vz-danger);
    --bs-btn-border-color: var(--vz-danger);
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
}

.btn-outline-secondary {
    --bs-btn-color: #374151;
    --bs-btn-border-color: var(--vz-border-strong);
    --bs-btn-hover-bg: #f3f4f6;
    --bs-btn-hover-color: #111827;
    --bs-btn-hover-border-color: #9ca3af;
    --bs-btn-active-bg: #e5e7eb;
    --bs-btn-active-color: #111827;
    --bs-btn-active-border-color: #9ca3af;
    background: #fff;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn {
    box-shadow: var(--vz-ring) !important;
    outline: 0;
}

/* Segmented choice (provider pickers etc.) */
.btn-check:checked + .btn-outline-primary {
    background-color: var(--vz-primary);
    border-color: var(--vz-primary);
    color: #fff;
    box-shadow: var(--vz-shadow-sm);
}

.btn-check:disabled + .btn,
.btn-check[disabled] + .btn {
    opacity: .55;
    cursor: not-allowed;
}

/* ---------- Forms ---------- */

.form-label {
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    font-size: .9rem;
}

.form-control,
.form-select {
    border-radius: var(--vz-radius);
    border-color: var(--vz-border-strong);
    min-height: 42px;
    font-size: .95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control { min-height: auto; }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: #9ca3af; }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--vz-primary);
    box-shadow: var(--vz-ring) !important;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: #f3f4f6;
    color: #4b5563;
}

.form-control[type=file] { padding-top: .45rem; }

.form-check-input:checked {
    background-color: var(--vz-primary);
    border-color: var(--vz-primary);
}

.form-check-label { cursor: pointer; }

.text-danger.field-validation-error,
.field-validation-error {
    display: block;
    font-size: .82rem;
    margin-top: 4px;
}

.input-validation-error { border-color: var(--vz-danger) !important; }

/* Inline field group used on toolbars */
.vz-field { display: flex; flex-direction: column; gap: 6px; }

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

.table {
    --bs-table-hover-bg: #f8fafc;
    margin-bottom: 0;
    vertical-align: middle;
}

    .table > thead th,
    .table > thead td {
        background-color: var(--vz-surface-alt);
        color: #4b5563;
        font-size: .78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        border-bottom: 1px solid var(--vz-border);
        white-space: nowrap;
    }

    .table > :not(caption) > * > * { padding: .7rem .85rem; }

.table-wrap {
    background: var(--vz-surface);
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-radius-lg);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Plain tables rendered by scripts (e.g. the error log) */
.vz-plain-table table,
#dvErrorRecord table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

    .vz-plain-table th, .vz-plain-table td,
    #dvErrorRecord th, #dvErrorRecord td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--vz-border);
        text-align: left;
        vertical-align: top;
        word-break: break-word;
    }

    .vz-plain-table th,
    #dvErrorRecord th {
        background: var(--vz-surface-alt);
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #4b5563;
    }

/* ---------- Tabs ---------- */

.nav-tabs {
    border-bottom: 1px solid var(--vz-border);
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

    .nav-tabs .nav-link {
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        color: var(--vz-muted);
        font-weight: 500;
        padding: .7rem 1rem;
        white-space: nowrap;
        background: transparent;
        margin-bottom: -1px;
    }

        .nav-tabs .nav-link:hover {
            color: var(--vz-text-strong);
            border-bottom-color: var(--vz-border-strong);
            background: transparent;
        }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            color: var(--vz-primary);
            border-bottom-color: var(--vz-primary);
            background: transparent;
        }

.tab-content > .tab-pane { padding-top: 20px; }

/* ---------- Alerts, badges, modals, progress ---------- */

.alert {
    border-radius: var(--vz-radius);
    border-width: 1px;
}

.badge { font-weight: 500; }

.modal-content {
    border: 0;
    border-radius: var(--vz-radius-lg);
    box-shadow: var(--vz-shadow-lg);
}

.modal-content.bg-transparent { box-shadow: none; }

.modal-header, .modal-footer { border-color: var(--vz-border); }

.progress {
    border-radius: 999px;
    background-color: #e5e7eb;
}

/* ---------- Console / log panels ---------- */

.vz-console,
.matrixBoard,
#processLog {
    background-color: #0b1220 !important;
    color: #4ade80 !important;
    font-family: var(--vz-mono) !important;
    font-size: .875rem !important;
    line-height: 1.55;
    border: 1px solid #1f2937 !important;
    border-radius: var(--vz-radius) !important;
    padding: 12px 14px !important;
}

.matrixBoard {
    font-weight: 500 !important;
    height: 280px !important;
}

#processLog::placeholder { color: #64748b; }

/* ---------- Status dots (activity report) ---------- */

.dot {
    width: 14px;
    height: 14px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
    vertical-align: middle;
}

.dotgreen { background-color: var(--vz-success); }
.dotred { background-color: var(--vz-danger); }
.dotorange { background-color: #f59e0b; }

/* Collapsible rows (activity report) */
.divcollapsible {
    background-color: #fff;
    color: var(--vz-text);
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-radius);
    padding: 14px 16px;
    font-size: .95rem;
    transition: background-color .15s ease;
}

    .divcollapsible:hover,
    .divcollapsible.active { background-color: var(--vz-surface-alt); }

.divcollapsible2:after { color: var(--vz-muted); }

.contentColabs {
    background-color: #fff;
    padding: 0 4px;
}

/* ---------- Select2 alignment ---------- */

.select2-container--default .select2-selection--single {
    min-height: 42px;
    border-color: var(--vz-border-strong);
    border-radius: var(--vz-radius);
    display: flex;
    align-items: center;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }

.select2-dropdown {
    border-color: var(--vz-border-strong);
    border-radius: var(--vz-radius);
    box-shadow: var(--vz-shadow);
}

/* ---------- Loader overlay ---------- */

#dvInProgress .modal-body {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- Public success pages (SIT / Authentica) ---------- */

.success-card {
    max-width: 560px;
    margin: 48px auto;
    background: #fff;
    border: 1px solid var(--vz-border);
    border-radius: 16px;
    box-shadow: var(--vz-shadow);
    padding: 40px 28px;
    text-align: center;
}

    .success-card h2 {
        font-size: 1.5rem;
        margin: 16px 0 10px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .success-card p { margin-bottom: 6px; color: var(--vz-muted) !important; }
    .success-card p strong { color: var(--vz-text-strong); }

.checkmark {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--vz-success-soft);
    position: relative;
}

    .checkmark::after {
        content: "";
        position: absolute;
        left: 26px;
        top: 16px;
        width: 20px;
        height: 34px;
        border: solid var(--vz-success);
        border-width: 0 5px 5px 0;
        transform: rotate(45deg);
    }

.btn-home {
    margin-top: 20px;
    background: var(--vz-primary);
    color: #fff;
    padding: .65rem 1.5rem;
}

    .btn-home:hover { background: var(--vz-primary-hover); color: #fff; }

/* ---------- Description lists (details pages) ---------- */

.vz-dl > dt {
    color: var(--vz-muted);
    font-weight: 500;
    font-size: .875rem;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.vz-dl > dd {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    color: var(--vz-text-strong);
    word-break: break-word;
}

@media (max-width: 575.98px) {
    .vz-dl > dt { border-bottom: 0; padding-bottom: 0; }
}

#tblAgentReport td p { margin: 0; }

/* ---------- Simple public header (queue board, booking form, assessment) ---------- */

body.pub-shell {
    background: var(--vz-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pub-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--vz-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

    .pub-topbar .pub-topbar-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
        padding: 10px 20px;
    }

.pub-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    color: var(--vz-text-strong);
    font-weight: 600;
    font-size: 1.1rem;
    min-width: 0;
}

    .pub-brand:hover { color: var(--vz-text-strong); }

.pub-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #0e2238);
    color: #fff;
    font-weight: 700;
    flex: 0 0 auto;
}

.pub-main {
    flex: 1 0 auto;
    width: 100%;
    padding: 24px 20px 32px;
}

.pub-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--vz-border);
    color: var(--vz-muted);
    font-size: .85rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
}

    .pub-footer a { color: var(--vz-muted); }

@media (max-width: 575.98px) {
    .pub-topbar .pub-topbar-inner { padding: 10px 14px; }
    .pub-main { padding: 16px 12px 24px; }
}

/* ---------- Utilities ---------- */

.text-muted { color: var(--vz-muted) !important; }
.fw-medium { font-weight: 500 !important; }
.gap-row { row-gap: 16px; }

@media (max-width: 575.98px) {
    .btn-stack-xs > .btn { width: 100%; }
    .page-actions { width: 100%; }
    .page-actions > .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}