/* =============================================================
   TrackZam house palette — Master Rebuild Work Order v4.1 §4 and
   Work Order 02 OD-001 ruling: P Blue #0027E7, navy #1B2A4A, white,
   Arial. No platform colors or platform-derived theming without a
   stored brand-registry approval record. The retired teal palette
   must never appear anywhere.
   ============================================================= */
:root {
    --tz-p-blue: #0027E7;
    --tz-navy: #1B2A4A;
    --tz-white: #FFFFFF;
    --tz-text: #1B2A4A;
    --tz-muted: #5A6478;
    --tz-border: #E2E6EA;
}

html, body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--tz-white);
    color: var(--tz-text);
}

h1, h2, h3 {
    color: var(--tz-navy);
    font-weight: 700;
}

h1:focus {
    outline: none;
}

a, .tz-link {
    color: var(--tz-p-blue);
}

.tz-header {
    background: var(--tz-white);
    border-bottom: 3px solid var(--tz-p-blue);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tz-header .tz-wordmark {
    font-size: 22px;
    font-weight: 700;
    color: var(--tz-navy);
    text-decoration: none;
}

.tz-header .tz-wordmark .tz-accent {
    color: var(--tz-p-blue);
}

/* Configuration field labels — every field is named on screen, not only by placeholder. */
.tz-field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--tz-navy);
    margin: 10px 0 4px;
}

.tz-field-label .tz-required {
    font-weight: 400;
    color: var(--tz-muted);
}

/* Primary navigation — every operator surface is reachable by clicking. */
.tz-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-wrap: wrap;
}

.tz-nav .tz-nav-link {
    color: var(--tz-navy);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.tz-nav .tz-nav-link:hover {
    background: #F2F5FF;
    color: var(--tz-p-blue);
    border-color: #D8E0FF;
}

.tz-nav .tz-nav-link.active {
    background: var(--tz-p-blue);
    color: var(--tz-white);
    border-color: var(--tz-p-blue);
}

.tz-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 28px;
}

.tz-footer {
    border-top: 1px solid var(--tz-border);
    color: var(--tz-muted);
    font-size: 12px;
    padding: 16px 28px;
}

.tz-card {
    background: var(--tz-white);
    border: 1px solid var(--tz-border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 3px 14px rgba(27, 42, 74, 0.07);
}

.tz-btn-primary {
    background: var(--tz-p-blue);
    color: var(--tz-white);
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.tz-swatch-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.tz-swatch {
    width: 180px;
    border: 1px solid var(--tz-border);
    border-radius: 10px;
    overflow: hidden;
}

.tz-swatch .tz-chip {
    height: 74px;
    border-bottom: 1px solid var(--tz-border);
}

.tz-swatch .tz-chip-label {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--tz-muted);
}

.tz-missing-asset {
    border: 1px dashed var(--tz-navy);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--tz-muted);
    font-size: 13px;
}

.blazor-error-boundary {
    background: var(--tz-navy);
    padding: 1rem;
    color: var(--tz-white);
}

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

/* ===== Screens, cards, factory, admin (P7/P8) - house palette only ===== */
.tz-input { width: 100%; padding: 10px 12px; border: 1px solid var(--tz-border); border-radius: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin-bottom: 10px; }
.tz-question-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.tz-question { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--tz-border); border-radius: 8px; cursor: pointer; }
.tz-question.selected { border-color: var(--tz-p-blue); box-shadow: 0 0 0 1px var(--tz-p-blue); }
.tz-config-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.tz-config-form input, .tz-config-form select { padding: 8px 10px; border: 1px solid var(--tz-border); border-radius: 8px; font-family: Arial, Helvetica, sans-serif; }
.tz-generate { font-size: 16px; padding: 12px 34px; }
.tz-source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.tz-source-card { border: 1px solid var(--tz-border); border-radius: 12px; padding: 18px; min-height: 150px; display: flex; flex-direction: column; gap: 6px; background: var(--tz-white); box-shadow: 0 3px 14px rgba(27,42,74,0.06); }
.tz-source-name { font-size: 18px; font-weight: 700; color: var(--tz-navy); }
.tz-source-state { font-size: 13px; font-weight: 700; color: var(--tz-muted); }
.tz-state-ready { color: var(--tz-p-blue); }
.tz-state-policypaused, .tz-state-reconnectrequired { color: var(--tz-navy); }
.tz-source-through, .tz-source-reason { font-size: 12px; color: var(--tz-muted); }
.tz-source-action { margin-top: auto; font-size: 14px; }
.tz-honesty { border-left: 3px solid var(--tz-p-blue); padding: 8px 12px; color: var(--tz-muted); }
.tz-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.tz-table th, .tz-table td { border-bottom: 1px solid var(--tz-border); text-align: left; padding: 6px 8px; }
.tz-deny td:nth-child(2) { color: var(--tz-navy); font-weight: 700; }
.tz-allow td:nth-child(2) { color: var(--tz-p-blue); font-weight: 700; }
.tz-connector-row { border: 1px solid var(--tz-border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.tz-connector-head { display: flex; gap: 12px; align-items: baseline; cursor: pointer; flex-wrap: wrap; }
.tz-state { color: var(--tz-p-blue); font-weight: 700; font-size: 13px; }
.tz-provenance { font-size: 12px; color: var(--tz-muted); border: 1px dashed var(--tz-border); border-radius: 6px; padding: 1px 8px; }
.tz-muted { color: var(--tz-muted); font-size: 13px; }
.tz-connector-detail { margin-top: 10px; }

.tz-skeleton-bar { height: 14px; background: #E2E6EA; border-radius: 6px; margin: 10px 0; animation: tzpulse 1.2s ease-in-out infinite; }
@keyframes tzpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }


.tz-compare-dark { background: #5A6478; cursor: not-allowed; opacity: 0.75; }


/* WO-04 §5.1: natural-language Screen 1 helpers (house palette only — report/chart colors
   are generated per report by the palette engine and never touch this chrome). */
.tz-example-chip {
    display: inline-block;
    margin: 4px 6px 4px 0;
    padding: 5px 10px;
    border: 1px solid var(--tz-border);
    border-radius: 14px;
    background: var(--tz-white);
    color: var(--tz-navy);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    cursor: pointer;
}

.tz-example-chip:hover {
    border-color: var(--tz-p-blue);
    color: var(--tz-p-blue);
}

/* WO-04 §31: validated-blueprint audit surface (house palette only). */
.tz-blueprint-json {
    background: #F7F8FA;
    border: 1px solid var(--tz-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    color: var(--tz-navy);
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}