/* Loyalty Admin styles — themed to match CWARE Connect (the WhatsApp engine).

   The engine's whole look is a token-driven stylesheet, so we adopt the same
   tokens here. Bootstrap 5.3 (loaded from the CDN in App.razor, BEFORE this file)
   still does the component plumbing; we map it onto the engine palette by
   remapping Bootstrap's own --bs-* variables and overriding the handful of
   component classes that don't read those variables. Source order (this file
   after bootstrap.min.css) wins, so almost nothing needs !important. */

/* ==========================================================================
   Design tokens (copied from the engine's site.css)
   ========================================================================== */
:root {
    /* surfaces */
    --bg:          #f6f8fa;          /* slate-50 */
    --panel:       #ffffff;
    --border:      #e2e8f0;          /* slate-200 */
    --border-soft: #eef1f5;
    --nav-bg:      #ffffff;
    --nav-border:  #e2e8f0;

    /* text */
    --text:        #0f172a;          /* slate-900 */
    --muted:       #64748b;          /* slate-500 */
    --muted-2:     #94a3b8;          /* slate-400 */
    --nav-text:    #1e293b;          /* slate-800 */

    /* brand */
    --brand:       #15205c;          /* CWARE navy */
    --brand-700:   #1c2d6b;
    --accent:      #1f78c8;          /* CWARE blue */

    /* status — only --status-err is referenced (validation text + error banner);
       the other engine status aliases were unused here, so they're trimmed. */
    --status-err:  #dc2626;

    /* ---- Map Bootstrap onto the engine palette (one place, everything follows) ---- */
    --bs-primary:            #15205c;
    --bs-primary-rgb:        21, 32, 92;
    --bs-link-color:         #1f78c8;
    --bs-link-color-rgb:     31, 120, 200;
    --bs-link-hover-color:   #15205c;
    --bs-body-bg:            #f6f8fa;
    --bs-body-color:         #0f172a;
    --bs-body-color-rgb:     15, 23, 42;
    --bs-border-color:       #e2e8f0;
    --bs-secondary-color:    #64748b;        /* .text-muted / .small read this in BS 5.3 */
    --bs-secondary-color-rgb:100, 116, 139;
    --bs-tertiary-color:     #94a3b8;
    --bs-emphasis-color:     #0f172a;
    --bs-success:            #16a34a;
    --bs-success-rgb:        22, 163, 74;
    --bs-danger:             #dc2626;
    --bs-danger-rgb:         220, 38, 38;
    --bs-warning:            #d97706;
    --bs-warning-rgb:        217, 119, 6;
    --bs-info:               #2563eb;
    --bs-info-rgb:           37, 99, 235;
    --bs-body-font-family:   "Inter Variable", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    /* The engine sits at a 14px base; rems stay calibrated to the 16px root so
       Bootstrap's spacing geometry is untouched. */
    font-family: "Inter Variable", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
    background: var(--bg);
    font-feature-settings: "cv11", "ss01";   /* nicer Inter alternates; harmless without Inter */
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==========================================================================
   App shell — full-width top bar + light side rail + scrolling main
   ========================================================================== */
.app {
    display: grid;
    grid-template-columns: 232px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "top top" "side main";
    height: 100dvh;
    overflow: hidden;
}
.app > .top  { grid-area: top; }
.app > .side { grid-area: side; }
/* min-width:0 lets this grid item shrink below its widest child's intrinsic
   width, so a wide .table-responsive scrolls inside its own box instead of
   forcing the whole pane to scroll sideways on a narrow screen. */
.app > .main { grid-area: main; overflow: auto; min-width: 0; padding: 20px 24px; }

/* ===== Top bar ===== */
.top {
    background: var(--panel);
    border-bottom: 1px solid var(--nav-border);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    color: var(--nav-text);
}
.top .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 14px;
}
.top .brand .cware-logo { height: 24px; width: auto; display: block; }
.top .brand .name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.1;
    color: var(--brand);
    padding-left: 12px;
    border-left: 1px solid var(--border-soft);
}
.top .brand .name span {
    display: block;
    font-weight: 400;
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px;
}
.top .spacer { flex: 1; }
.top form { margin: 0; display: inline-flex; }

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.user-chip .email {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-chip .role {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 2px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.topbar-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
}
.topbar-link:hover { color: var(--brand); text-decoration: underline; }

/* ===== Side rail ===== */
.side {
    background: var(--panel);
    border-right: 1px solid var(--nav-border);
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
}
.side a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 3px;
    font-size: 13px;
    color: var(--nav-text);
    text-decoration: none;
    line-height: 1.2;
    font-weight: 500;
}
.side a:hover { background: var(--bg); color: var(--brand); text-decoration: none; }
.side a.active { background: var(--brand); color: #fff; }
.side a.active .ic { color: #fff; opacity: 1; }
.side a .ic {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    color: var(--muted);
    flex-shrink: 0;
}
.side .section {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-2);
    padding: 14px 10px 4px;
    font-weight: 600;
}
.side hr { border: 0; border-top: 1px solid var(--border-soft); margin: 8px 4px; }

/* ==========================================================================
   Minimal layout (the unauthenticated /Account pages — no nav shell)
   ========================================================================== */
.minimal-shell {
    min-height: 100dvh;
    background: var(--bg);
    padding: 7vh 16px 24px;
}
.minimal-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}
.minimal-brand .cware-logo { height: 26px; width: auto; }
.minimal-brand .name { font-weight: 600; font-size: 15px; color: var(--brand); line-height: 1.15; }
.minimal-brand .name span { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }

/* ==========================================================================
   Page chrome
   ========================================================================== */
h1 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text);
}
/* Blazor's <FocusOnNavigate> focuses the page h1 after each route change; hide
   the visual ring (the h1 isn't keyboard-interactive). */
h1:focus, h1:focus-visible { outline: none; }
h1 .sub { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 8px; }

/* ==========================================================================
   Bootstrap component overrides — make BS components read like the engine
   ========================================================================== */

/* Cards: white, hairline border, 4px radius; the .card-header reads like the
   engine's .card .head (uppercase, muted, faint cap background). */
.card {
    --bs-card-bg: var(--panel);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: 4px;
    --bs-card-inner-border-radius: 3px;
    --bs-card-cap-bg: #fafbfc;
    --bs-card-cap-color: var(--muted);
    --bs-card-color: var(--text);
}
.card-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
/* Keep interactive bits inside a header readable (don't uppercase buttons). */
.card-header .btn { text-transform: none; letter-spacing: normal; }

/* Buttons: engine sizing via Bootstrap's own variables (no specificity fights). */
.btn {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 6px;
    --bs-btn-font-size: 13px;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 4px;
}
.btn-sm {
    --bs-btn-padding-x: 10px;
    --bs-btn-padding-y: 4px;
    --bs-btn-font-size: 12px;
    --bs-btn-border-radius: 3px;
}
/* Solid primary = navy. (.btn-primary's fill reads --bs-btn-bg, NOT the global
   --bs-primary, so it must be set here explicitly.) */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: 21, 32, 92;
}
/* Outline buttons = the engine's neutral white button (brand-tinted text for the
   "primary" variant, plain text for "secondary"). */
.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--bg);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-bg: var(--bg);
    --bs-btn-active-border-color: var(--border);
    --bs-btn-focus-shadow-rgb: 21, 32, 92;
}
.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-hover-color: var(--brand);
    --bs-btn-active-color: var(--brand);
}
.btn-outline-secondary {
    --bs-btn-color: var(--text);
    --bs-btn-hover-color: var(--brand);
    --bs-btn-active-color: var(--brand);
}
/* Link-style buttons (PII reveal, log-out fallback) take the accent colour. */
.btn-link { --bs-btn-color: var(--accent); --bs-btn-hover-color: var(--brand); }

/* Forms */
.form-control,
.form-select {
    border-color: var(--border);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(31, 120, 200, 0.15);
}
.form-select {
    /* recolour the caret to slate to match the palette */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-label { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.form-text { color: var(--muted); font-size: 11px; }

/* Alerts: re-tinted to the engine's desaturated status palette. */
.alert { border-radius: 4px; font-size: 13px; }
.alert-danger  { --bs-alert-color: #991b1b; --bs-alert-bg: #fef2f2; --bs-alert-border-color: #fecaca; }
.alert-warning { --bs-alert-color: #92400e; --bs-alert-bg: #fffbeb; --bs-alert-border-color: #fde68a; }
.alert-success { --bs-alert-color: #065f46; --bs-alert-bg: #ecfdf5; --bs-alert-border-color: #a7f3d0; }
.alert-info    { --bs-alert-color: #1e40af; --bs-alert-bg: #eff6ff; --bs-alert-border-color: #bfdbfe; }

/* Tables: the engine's table.t look. Reaches plain Bootstrap tables AND the
   QuickGrid bodies (they render real <table class="table">). */
.table {
    --bs-table-bg: var(--panel);
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border-soft);
    --bs-table-hover-bg: #f9fbfd;
    --bs-table-hover-color: var(--text);
    font-size: 13px;
}
.table > thead > tr > th,
.table thead th {
    color: var(--muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.mono,
code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
}

/* ==========================================================================
   Status chips — the engine's .tag idiom: desaturated, a leading dot.
   Class names are unchanged so StatusBadge.razor stays as-is.
   ========================================================================== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
}
.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}
.status-validated    { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
.status-claimed      { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.status-senttoerp    { background: #ecfdf5; color: #047857; border-color: #d1fae5; }
.status-duplicate    { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
.status-pending      { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.status-failed       { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.status-deadlettered { background: #fee2e2; color: #991b1b; border-color: #fca5a5; font-weight: 600; }

/* Log level chips (same desaturated family, no dot). */
.log-level {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.log-level-error   { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.log-level-warning { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.log-level-info    { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
.log-level-debug   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.log-level-other   { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }

.logs-grid { background-color: var(--panel); }

.log-message {
    display: inline-block;
    max-width: 48rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.log-raw {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.75rem;
    font-size: 0.8rem;
    color: var(--text);
    max-height: 24rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.local-time { white-space: nowrap; }

/* ==========================================================================
   Overview stat cards (KPI) — engine sizing
   ========================================================================== */
.stat-card .stat-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.stat-card .stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}
.stat-card .stat-detail {
    font-size: 12px;
    color: var(--muted);
}

/* Optional engine KPI grid (a page may opt in instead of the Bootstrap grid). */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

/* ==========================================================================
   Click-to-reveal personal values
   ========================================================================== */
.pii-reveal { white-space: nowrap; }
.pii-toggle {
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    vertical-align: baseline;
}
.pii-toggle:hover { text-decoration: underline; }

/* ==========================================================================
   Overview intake chart — one bar per hour, engine accent blue
   ========================================================================== */
.intake-chart {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 150px;
    padding-top: 0.5rem;
}
.intake-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}
/* Instant CSS tooltip (the native title attribute dwells too long and resets on
   every auto-refresh). */
.intake-slot:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% - 0.25rem);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--brand);
    color: #ffffff;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
    pointer-events: none;
    z-index: 10;
}
.intake-slot:hover .intake-bar { background-color: var(--brand); }
.intake-bar-area {
    flex: 1;
    display: flex;
    align-items: flex-end;
}
.intake-bar {
    width: 100%;
    background-color: var(--accent);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}
.intake-label {
    height: 1.1rem;
    font-size: 0.7rem;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
    overflow: visible;
}

/* ==========================================================================
   Status timeline (registration detail)
   ========================================================================== */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item {
    position: relative;
    margin-left: 0.4rem;
    padding: 0 0 1rem 1.25rem;
    border-left: 2px solid var(--border);
}
.timeline-item:last-child { padding-bottom: 0.25rem; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 0.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--muted);
}

/* Audit detail can be long; wrap it instead of stretching the table. */
.audit-detail {
    display: inline-block;
    max-width: 36rem;
    white-space: normal;
    word-break: break-word;
}

/* Form validation messages. */
.validation-message { color: var(--status-err); font-size: 0.875rem; }

/* ==========================================================================
   Blazor error banner (engine red style); hidden until the runtime shows it.
   ========================================================================== */
#blazor-error-ui {
    background: #fef2f2;
    color: var(--status-err);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1);
    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;
}

/* ==========================================================================
   Narrow viewports (tablet / phone) — below ~720px the fixed 232px side rail
   eats too much width, so collapse the shell to a single column and reflow the
   rail into a horizontal, scrollable nav strip under the top bar. The desktop
   layout above is untouched.
   ========================================================================== */
@media (max-width: 720px) {
    .app {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "top" "side" "main";
    }

    /* Top bar: pack left and wrap instead of overflowing; drop the spacer's
       push and the brand subtitle, and rein in the email so it can't dominate. */
    .top { flex-wrap: wrap; row-gap: 6px; padding: 8px 14px; }
    .top .spacer { display: none; }
    .top .brand .name span { display: none; }
    .user-chip .email { max-width: 120px; }

    /* Side rail -> horizontal strip. NavMenu's links are direct flex children,
       so a row direction is all that's needed; the section label doesn't belong
       in a single-line strip. */
    .side {
        flex-direction: row;
        align-items: center;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 8px;
        border-right: 0;
        border-bottom: 1px solid var(--nav-border);
    }
    .side a { white-space: nowrap; }
    .side .section, .side hr { display: none; }

    /* Keep the pane itself from scrolling sideways on a phone; any genuinely
       wide table sits in its own .table-responsive scroll box, so its data
       stays reachable there. Vertical scrolling is unaffected. */
    .app > .main { padding: 14px 14px; overflow-x: hidden; }
}