/* DMU Blue Card PWA — styled to match the Salesforce LWC look and feel,
   plus iPhone safe-area handling for standalone PWA mode. */

:root {
    --dmu-blue: #1b5e9e;
    --dmu-blue-dark: #174d83;
    --dmu-blue-light: #2a7bc4;
    --dmu-blue-tint: #e8f4fd;
    --dmu-blue-tint-border: #b3d7f2;
    --gray-50: #f7f9fb;
    --gray-100: #eef0f4;
    --gray-200: #e0e5ee;
    --gray-300: #c7ccd6;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --red-600: #b91c1c;
    --green-600: #047857;
    --amber-500: #d97706;
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--gray-50);
    color: var(--gray-700);
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ─── Header (sticky) ────────────────────────────────────────────────── */
header.app-header {
    background: linear-gradient(135deg, var(--dmu-blue) 0%, var(--dmu-blue-light) 100%);
    color: white;
    padding-top: max(var(--safe-top), 14px);
    padding-bottom: 14px;
    padding-left: max(var(--safe-left), 16px);
    padding-right: max(var(--safe-right), 16px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
}

.header-logo {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
    background: white;
    border-radius: 50%;
    padding: 2px;
}

.header-text {
    flex: 1;
    min-width: 0;
}

.header-text h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.3px;
}

.header-subtitle {
    margin: 2px 0 0;
    font-size: 0.78rem;
    opacity: 0.88;
    line-height: 1.2;
}

.connectivity {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gray-300);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.dot.online { background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35); }
.dot.offline { background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35); }

/* ─── Offline banner ─────────────────────────────────────────────────── */
.offline-banner {
    background: var(--amber-500);
    color: white;
    padding: 8px 16px;
    text-align: center;
    font-size: 13px;
    display: none;
}

.offline-banner.visible { display: block; }

/* ─── Sync bar ───────────────────────────────────────────────────────── */
/* The tinted strip spans the window; the row inside it is constrained to the
   same column as the header and the form, so the counters and buttons line up
   with the card instead of drifting to the screen edges on a wide iPad. */
.sync-bar {
    background: var(--dmu-blue-tint);
    color: var(--dmu-blue-dark);
    padding: 10px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--dmu-blue-tint-border);
}

.sync-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}

.sync-counts { display: flex; gap: 14px; }
.sync-counts strong { font-weight: 600; }
.sync-counts .pending { color: var(--amber-500); }
.sync-counts .synced { color: var(--green-600); }
.sync-counts .failed { color: var(--red-600); }

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

/* ─── Main / Card ────────────────────────────────────────────────────── */
main {
    flex: 1;
    padding: 16px;
    padding-left: max(var(--safe-left), 16px);
    padding-right: max(var(--safe-right), 16px);
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}

.blue-card-container {
    border: 2px solid var(--dmu-blue);
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-md);
}

/* Auto-selected campaign callout */
.campaign-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--dmu-blue-tint);
    border-bottom: 1px solid var(--dmu-blue-tint-border);
    padding: 10px 16px;
    font-size: 0.875rem;
    color: var(--dmu-blue);
    font-weight: 600;
}

.campaign-banner[hidden] { display: none; }

/* ─── Two-page flow (FS #24255) ──────────────────────────────────────── */
.form-page[hidden] { display: none; }

.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    background: #f4f6f9;
    border-bottom: 1px solid #dddbda;
    font-size: 0.875rem;
}

.step-pill {
    padding: 4px 12px;
    border-radius: 12px;
    color: #706e6b;
    background: #e5e5e5;
    font-weight: 600;
}

.step-pill-active {
    color: #ffffff;
    background: var(--dmu-blue);
}

.step-arrow { color: #a8a8a8; }

.card-footer button[hidden] { display: none; }

/* Inline hint under the Conference/Event picker — "no event today",
   "two events today, pick one". */
.campaign-hint {
    margin: 6px 0 10px;
    font-size: 0.875rem;
    line-height: 1.35;
    color: #8a5340;
}

.campaign-hint[hidden] { display: none; }

/* Keep the "Show all events" row off the bottom edge of the picker
   (the hint above it is usually hidden, so it can't carry the gap). */
#conference-section .checkbox-row {
    margin-top: 10px;
}

.card-body {
    padding: 16px 20px 20px;
}

/* ─── Sections ───────────────────────────────────────────────────────── */
.form-section { margin-bottom: 20px; }
.form-section:last-child { margin-bottom: 0; }

.section-header {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dmu-blue);
    border-bottom: 2px solid var(--gray-200);
    padding-bottom: 6px;
    margin: 0 0 14px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.form-field.full-width { grid-column: 1 / -1; }

.form-field label {
    font-size: 13px;
    color: var(--gray-700);
    font-weight: 500;
}

.form-field label .required { color: var(--red-600); }

.form-field input:not([type=checkbox]),
.form-field select,
.form-field textarea {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    color: var(--gray-700);
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
}

.form-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231b5e9e' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: 2px solid var(--dmu-blue);
    outline-offset: 0;
    border-color: var(--dmu-blue);
}

.form-field input.readonly { background: var(--gray-50); color: var(--gray-500); }

.form-field textarea { min-height: 90px; resize: vertical; }

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 500;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    user-select: none;
    -webkit-user-select: none;
    min-height: 44px;
}

.checkbox-row:hover { border-color: var(--dmu-blue); }
.checkbox-row input[type=checkbox] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--dmu-blue);
    margin: 0;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

button {
    font: inherit;
    border: none;
    border-radius: 6px;
    padding: 12px 22px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s, opacity 0.15s;
    min-height: 44px;
}

button.primary {
    background: var(--dmu-blue);
    color: white;
}

button.primary:hover, button.primary:active { background: var(--dmu-blue-dark); }

button.secondary {
    background: white;
    color: var(--dmu-blue);
    border: 1px solid var(--dmu-blue);
}

button.subtle {
    background: white;
    color: var(--dmu-blue-dark);
    border: 1px solid var(--gray-300);
    padding: 6px 12px;
    font-size: 13px;
    min-height: 32px;
}

button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ─── Toast ──────────────────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: calc(24px + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    transition: transform 0.25s ease;
    z-index: 1000;
    max-width: 90vw;
    text-align: center;
}

.toast.visible { transform: translateX(-50%) translateY(0); }
.toast-success { background: var(--green-600); }
.toast-error { background: var(--red-600); }
.toast-warn { background: var(--amber-500); }
.toast-info { background: var(--dmu-blue); }

/* ─── App footer ─────────────────────────────────────────────────────── */
footer.app-footer {
    text-align: center;
    color: var(--gray-500);
    font-size: 11px;
    padding: 14px;
    padding-bottom: max(14px, var(--safe-bottom));
}

/* ─── Mobile responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
    .card-body { padding: 14px 14px 18px; }
    main { padding: 12px; padding-left: max(var(--safe-left), 12px); padding-right: max(var(--safe-right), 12px); }
    .header-text h1 { font-size: 1.25rem; }
    .header-subtitle { font-size: 0.72rem; }
    .header-logo { width: 44px; height: 44px; }
    .sync-bar { padding: 8px 12px; font-size: 12px; }
    .blue-card-container { border-radius: 10px; }
    /* Page 2 shows three buttons (Clear / Back / Save Lead) — let them share
       the row rather than crowd it. */
    .card-footer button { flex: 1 1 auto; }
    /* Keep both step pills on one line on a phone */
    .step-indicator { gap: 6px; padding: 8px 12px; font-size: 0.8125rem; }
    .step-pill { padding: 4px 10px; }
}

/* When PDL is checked, hide the entire Conference / Event section —
   PDL leads have no associated event by definition. Vendor Param is
   a hidden input outside this section so it still ships with the
   payload (cleared by JS when PDL is on). */
.pdl-active #conference-section { display: none; }

/* Sync log — a diagnostics affordance, deliberately quiet so it never competes
   with the form. Advisors will not notice it; Aaron can find it in a hurry. */
.diary-toggle {
    margin-left: 0.75rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    color: #6b7a88;
    background: transparent;
    border: 1px solid #c9d3dc;
    border-radius: 4px;
}

.diary-panel {
    max-height: 40vh;
    margin: 0;
    padding: 0.75rem 1rem;
    overflow: auto;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    line-height: 1.5;
    color: #2d3b47;
    background: #f4f7f9;
    border-top: 1px solid #c9d3dc;
    white-space: pre;
}

/* ─── Prospect view ──────────────────────────────────────────────────── */
/* Page 1 is handed to the prospect. Sync counters are advisor information,
   so they come off the screen while a prospect is holding the iPad. */
body.prospect-view .sync-bar { display: none; }

.footer-pending {
    margin-left: 0.75rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    color: #8a6100;
    background: #fff6e0;
    border: 1px solid #e8cf94;
    border-radius: 4px;
}

.footer-pending.has-failed {
    color: #8a1c1c;
    background: #fdecec;
    border-color: #efb9b9;
}

/* ─── Large screens ──────────────────────────────────────────────────── */
/* The 720px cap was sized for phones and strands most of an iPad in
   landscape. Widen on bigger viewports, but stay bounded — a text input
   stretched across 1200px is harder to use, not easier. */
@media (min-width: 900px) {
    .header-inner,
    main,
    .sync-bar-inner { max-width: 1040px; }
    .form-grid { gap: 16px 32px; }
    .card-body { padding: 22px 26px 26px; }
}

@media (min-width: 1200px) {
    .header-inner,
    main,
    .sync-bar-inner { max-width: 1120px; }
}