/*
 * KFC Rewards design system, matching the original app (src/styles.css):
 * KFC red, near-black ink, warm cream surface; Bebas Neue for display, Inter for text.
 */
:root {
    --kfc-red: #e60016;
    --kfc-red-dark: #c10028;
    --kfc-ink: #110c0b;
    --kfc-cream: #fef9f1;
    --kfc-muted: #f6efe8;
    --kfc-muted-text: #60514f;
    --kfc-border: #e3ddd8;
    --kfc-gradient: linear-gradient(135deg, #e60016 0%, #c10028 100%);
    --kfc-shadow-brand: 0 12px 30px -10px rgba(230, 0, 22, 0.45);
    --kfc-shadow-card: 0 1px 2px rgba(17, 12, 11, 0.06), 0 8px 24px -12px rgba(17, 12, 11, 0.1);
    --kfc-display: "Bebas Neue", "Anton", Impact, sans-serif;
}

html, body {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    background: var(--kfc-cream);
    color: var(--kfc-ink);
}

/* Base styles the pages rely on (previously from Bootstrap's reset). */
svg { vertical-align: middle; }
table { border-collapse: collapse; }
code, kbd, pre, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; }

/* ---- Account pages (account settings, rarer sign-in steps): the app's look ---- */
.account-shell {
    min-height: 100vh;
    background: var(--kfc-cream);
    color: var(--kfc-ink);
}

.account-shell a { color: var(--kfc-red-dark); }

/* Dark brand bar across the top, like the sidebar's brand block. */
.account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
    padding: 0 24px;
    background: var(--kfc-ink);
    color: #fbf8f5;
}

.account-shell .account-brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fbf8f5;
    text-decoration: none;
}

.account-brand-block .side-title, .account-brand-block .side-subtitle { display: block; }

.account-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.account-header-actions form { margin: 0; }

.account-shell .account-header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fbf8f5;
    font: inherit;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.account-shell .account-header-link:hover { background: rgba(255, 255, 255, 0.08); }

.account-header-user {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
    font-size: 0.8125rem;
    color: rgba(251, 248, 245, 0.6);
}

.account-brand-block .side-title { white-space: nowrap; }

@media (max-width: 767.98px) {
    .account-header { padding: 0 16px; }
    .account-header-user, .account-header-label { display: none; }
    .account-brand-block .side-subtitle { display: none; }
}

.account-body {
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 24px 48px;
}

@media (max-width: 767.98px) {
    .account-body { padding: 24px 16px 40px; }
}

/* Settings: menu on the left, the page in a white card on the right. */
.settings-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 900px) {
    .settings-grid { grid-template-columns: 240px minmax(0, 1fr); }
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--kfc-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--kfc-shadow-card);
}

.account-shell .settings-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--kfc-muted-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.account-shell .settings-link:hover { background: var(--kfc-muted); color: var(--kfc-ink); }

.account-shell .settings-link.active {
    background: rgba(230, 0, 22, 0.08);
    color: var(--kfc-red-dark);
}

.settings-panel {
    padding: 4px 24px;
    border: 1px solid var(--kfc-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--kfc-shadow-card);
}

.settings-section { padding: 20px 0; }
.settings-section + .settings-section { border-top: 1px solid var(--kfc-border); }

.account-shell .settings-title {
    margin: 0;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--kfc-ink);
}

.settings-desc {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--kfc-muted-text);
}

.settings-facts {
    display: grid;
    gap: 12px 24px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin: 16px 0 0;
}

.settings-facts dt {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kfc-muted-text);
}

.settings-facts dd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--kfc-ink);
    overflow-wrap: anywhere;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 420px;
    margin-top: 16px;
}

.settings-form .admin-actions { justify-content: flex-start; margin-top: 4px; }

/* The app's small red button (same as the Admin page's Save buttons). */
.kfc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--kfc-red);
    color: #fff;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 12, 11, 0.1);
}

.kfc-button:hover { background: rgba(230, 0, 22, 0.9); }
.kfc-button:disabled { opacity: 0.5; cursor: not-allowed; }
.kfc-input:disabled { background: var(--kfc-muted); color: var(--kfc-muted-text); cursor: not-allowed; }

/* Saved / error note at the top of a settings page. */
.status-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.875rem;
}

.status-note-success { background: rgba(22, 163, 74, 0.1); color: #166534; }
.status-note-error { background: rgba(230, 0, 22, 0.08); color: var(--kfc-red-dark); }

/* Bootstrap focus ring in KFC red (a few simple account pages still use Bootstrap). */
.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    border-color: var(--kfc-red);
    box-shadow: 0 0 0 1px var(--kfc-red);
}

/* ---- Sign-in pages (original /auth): one card on a red-to-black backdrop ---- */
.auth-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    overflow: clip; /* hidden still lets the glows be scrolled into view sideways */
    padding: 32px 16px;
    background: radial-gradient(circle at 20% 20%, rgba(230, 0, 22, 0.9), #140c0b 70%);
}

.auth-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
    background-size: 24px 24px;
}

.auth-glow {
    position: absolute;
    width: 384px;
    height: 384px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(64px);
}

.auth-glow-red { top: -128px; right: -128px; background: rgba(230, 0, 22, 0.4); }
.auth-glow-butter { bottom: -128px; left: -128px; background: rgba(245, 216, 74, 0.2); }

.auth-card {
    position: relative;
    width: 100%;
    max-width: 448px;
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--kfc-shadow-brand);
    color: var(--kfc-ink);
}

.auth-card-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 8px;
    background: var(--kfc-gradient);
    box-shadow: var(--kfc-shadow-brand);
    color: #fff;
    font-family: var(--kfc-display);
    font-size: 1.875rem;
}

.auth-title {
    margin-top: 12px;
    font-family: var(--kfc-display);
    font-size: 1.875rem;
    line-height: 1;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.auth-subtitle {
    margin-top: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kfc-muted-text);
}

.auth-heading {
    margin: 0 0 12px;
    font-family: var(--kfc-display);
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
}

.kfc-tabs.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-bottom: 8px;
}

.auth-tabs .kfc-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
}

.auth-field .kfc-input { font-weight: 400; }

.auth-field-error {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--kfc-red-dark);
}

.auth-submit {
    width: 100%;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: var(--kfc-red);
    color: #fff;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 12, 11, 0.1);
}

.auth-submit:hover { background: rgba(230, 0, 22, 0.9); }

.auth-note {
    margin: 0;
    font-size: 0.75rem;
    color: var(--kfc-muted-text);
}

.auth-note a { color: var(--kfc-red-dark); }

.auth-card > .auth-note + .auth-note { margin-top: 12px; }

.auth-error {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(230, 0, 22, 0.08);
    color: var(--kfc-red-dark);
    font-size: 0.875rem;
}

/* ---- Sidebar ---- */
.mud-drawer.side {
    background: var(--kfc-ink);
    color: #fbf8f5;
    display: flex;
    flex-direction: column;
}

.side .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.side-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding: 0 20px;
    border-bottom: 1px solid #2b1e1e;
    flex-shrink: 0;
}

.side-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--kfc-gradient);
    box-shadow: var(--kfc-shadow-brand);
    color: #fff;
    font-family: var(--kfc-display);
    font-size: 1.5rem;
}

.side-title {
    font-family: var(--kfc-display);
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: 0.03em;
}

.side-subtitle {
    margin-top: 3px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(251, 248, 245, 0.6);
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    flex: 1;
    overflow-y: auto;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(251, 248, 245, 0.7);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.side-link .side-icon {
    color: rgba(251, 248, 245, 0.5);
}

.side-link:hover {
    background: #231717;
    color: #fbf8f5;
}

.side-link:hover .side-icon {
    color: #fbf8f5;
}

.side-link.active {
    background: var(--kfc-gradient);
    box-shadow: var(--kfc-shadow-brand);
    color: #fff;
}

.side-link.active .side-icon {
    color: #fff;
}

.side-footer {
    padding: 16px;
    border-top: 1px solid #2b1e1e;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(251, 248, 245, 0.4);
    flex-shrink: 0;
}

/* ---- Top bar and page area ---- */
.mud-main-content.main {
    padding-top: 0;
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 64px;
    padding: 0 24px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--kfc-border);
}

.last-sync {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--kfc-muted-text);
    white-space: nowrap;
    overflow: hidden;
}

.last-sync b {
    font-weight: 500;
    color: var(--kfc-ink);
}

.sync-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sync-badge-success {
    background: var(--kfc-red);
    color: #fff;
}

.sync-badge-running {
    background: var(--kfc-muted);
    color: var(--kfc-ink);
}

.sync-badge-error {
    background: var(--kfc-red-dark);
    color: #fff;
}

.signout {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--kfc-ink);
    cursor: pointer;
}

.signout:hover {
    background: var(--kfc-muted);
}

.page {
    padding: 24px;
}

@media (min-width: 1280px) {
    .page {
        padding: 32px;
    }
}

/* ---- Page header ---- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--kfc-border);
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--kfc-red);
}

.eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kfc-red);
}

.page-title {
    margin: 0;
    font-family: var(--kfc-display);
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--kfc-ink);
}

.page-description {
    margin: 8px 0 0;
    font-size: 0.875rem;
    color: var(--kfc-muted-text);
}

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

/* ---- KPI cards ---- */
.kpi-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 20px;
    border: 1px solid var(--kfc-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--kfc-shadow-card);
    transition: transform 0.15s, box-shadow 0.15s;
}

.kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--kfc-gradient);
    opacity: 0.7;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--kfc-shadow-brand);
}

.kpi-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--kfc-muted-text);
}

.kpi-value {
    margin-top: 8px;
    font-family: var(--kfc-display);
    font-size: 1.875rem;
    line-height: 1.1;
    letter-spacing: 0.025em;
    color: var(--kfc-ink);
}

.kpi-hint {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--kfc-muted-text);
}

/* Card grids with the original's (Tailwind) breakpoints: md 768px, lg 1024px, xl 1280px. */
.kfc-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}

.kfc-grid.kpi-grid-6,
.kfc-grid.kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* One column on phones, then 2, then 4 (original: sm:grid-cols-2 lg:grid-cols-4 / md:grid-cols-2 lg:grid-cols-4). */
@media (min-width: 640px) {
    .kfc-grid.kpi-grid-4-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .kfc-grid.kpi-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kfc-grid.kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .kfc-grid.kpi-grid-4-md { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .kfc-grid.kpi-grid-4-sm,
    .kfc-grid.kpi-grid-4-md { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .kfc-grid.chart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kfc-grid.chart-grid > .chart-wide { grid-column: span 2; }
}

@media (min-width: 1280px) {
    .kfc-grid.kpi-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Area chart (dashboard growth): faint dashed grid lines and a fading fill, as the original's Recharts chart. */
.kfc-area-chart {
    height: 256px !important;
    margin-top: 16px;
}

.kfc-area-chart .mud-charts-gridlines-yaxis path {
    stroke-dasharray: 3 3;
}

.kfc-area-chart path.mud-chart-line[fill]:not([fill="none"]) {
    fill: url(#kfc-area-fade);
    fill-opacity: 1;
}

/* ---- Cards, tables and controls (MudBlazor overrides) ---- */
.page .mud-paper-outlined,
.page .mud-table-outlined {
    border-color: var(--kfc-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--kfc-shadow-card);
}

.page .mud-table-outlined {
    overflow: hidden;
}

/* Card and table titles use the display face, as the original's h3s.
   (Not inputs: MudBlazor also puts this class on text inputs.) */
.page .mud-typography-subtitle1:not(.mud-input) {
    font-family: var(--kfc-display);
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.page h5.mud-typography {
    font-family: var(--kfc-display);
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.page .mud-table-head .mud-table-cell {
    font-weight: 600;
    color: var(--kfc-ink);
}

/* Small table text (original: text-xs cells such as dates). */
.page .mud-table-cell.text-xs {
    font-size: 0.75rem;
}

.page .mud-button-outlined:not(.mud-button-outlined-primary) {
    background: #fff;
    border-color: var(--kfc-border);
    color: var(--kfc-ink);
}

.page .mud-button-filled-primary {
    background: var(--kfc-gradient);
}

.month-picker {
    min-width: 180px;
    max-width: 200px;
    background: #fff;
    border-radius: 8px;
}

.page code {
    font-size: 0.8rem;
    color: var(--kfc-muted-text);
    background: none;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

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

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Keep the member details heading clear of the fixed top bar when scrolled to. */
#member-detail {
    scroll-margin-top: 64px;
}

/* Movement page from/to grids. */
.movement-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.movement-grid th {
    padding: 8px;
    text-align: right;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
}

.movement-grid td {
    padding: 8px;
    text-align: right;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-variant-numeric: tabular-nums;
}

.movement-grid td.row-label {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
}

.movement-grid .moved {
    font-weight: 500;
}

/* Purchases page: raw JSON payload, one line, truncated. */
code.payload {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.6);
}

/* ---- Bar charts (Shared/BarList.razor), styled like the original's Recharts charts ---- */
.kc {
    --kc-bar: #dc2626;        /* the original's bar colour */
    --kc-axis: #666;
    position: relative;
    font-size: 11px;
    color: var(--kc-axis);
}

/* The bar and the hover box */
.kc-bar { position: relative; background: var(--kc-bar); }

/* Shown and moved next to the mouse by js/app.js, gliding like the original's. */
.kc-tip {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1500;
    transition: transform 0.2s ease-out;
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--kfc-ink);
    white-space: nowrap;
    pointer-events: none;
}

.kc-tip-item { color: var(--kc-bar); }

/* Horizontal bars: names on the left, scale along the bottom (288px high, as the original). */
.kc-h-body {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 260px;
}

.kc-h-grid {
    position: absolute;
    inset: 0 0 0 calc(var(--kc-label-w) + 8px);
    border-left: 1px solid var(--kc-axis);
    border-bottom: 1px solid var(--kc-axis);
}

.kc-grid-v, .kc-grid-h { position: absolute; opacity: 0.6; }
.kc-grid-v { top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(to bottom, #ccc 0 3px, transparent 3px 6px); }
.kc-grid-h { left: 0; right: 0; height: 1px; background: repeating-linear-gradient(to right, #ccc 0 3px, transparent 3px 6px); }

.kc-row {
    position: relative;
    display: grid;
    flex: 1;
    min-height: 0;
    grid-template-columns: var(--kc-label-w) 1fr;
    align-items: center;
    gap: 8px;
}

.kc-cat {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
}

.kc-band { position: relative; display: flex; align-items: center; height: 100%; }
.kc-h .kc-bar { height: 70%; max-height: 28px; min-width: 1px; }

.kc-band:hover { background: rgba(204, 204, 204, 0.35); } /* hover band, as the original */
.kc-tip.show { display: block; }

.kc-h-xaxis {
    position: relative;
    height: 20px;
    margin-left: calc(var(--kc-label-w) + 8px);
}

.kc-h-xaxis span, .kc-v-yaxis span { position: absolute; white-space: nowrap; }
.kc-h-xaxis span { top: 4px; transform: translateX(-50%); }

@media (max-width: 600px) {
    .kc-h { --kc-label-w: 96px !important; }
}

/* Upright bars (special mission funnel): number on top, stage names underneath. */
.kc-v-body { display: flex; height: 240px; }

.kc-v-yaxis {
    position: relative;
    width: 48px;
    flex-shrink: 0;
}

.kc-v-yaxis span { right: 8px; transform: translateY(50%); }

.kc-v .kc-plot {
    position: relative;
    display: flex;
    flex: 1;
    gap: 8%;
    padding: 0 4%;
    align-items: flex-end;
    border-left: 1px solid var(--kc-axis);
    border-bottom: 1px solid var(--kc-axis);
}

.kc-col {
    position: relative;
    display: flex;
    flex: 1;
    height: 100%;
    align-items: flex-end;
}

.kc-col:hover { background: rgba(204, 204, 204, 0.35); }
.kc-v .kc-bar { width: 100%; min-height: 1px; }

.kc-bar-value {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    text-align: center;
    color: var(--kc-axis);
}

.kc-v-xaxis {
    display: flex;
    gap: 8%;
    margin-left: 48px;
    padding: 6px 4% 0;
    font-size: 12px;
}

.kc-v-xaxis span { flex: 1; text-align: center; }

/* One-line text cut off with "…"; full text in the tooltip. */
.truncate {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- Compact controls, matching the original's shadcn components ---- */

/* Select box (original: h-9 rounded-md border-input shadow-sm px-3 text-sm, chevron at 50% opacity). */
.kfc-select {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 12px;
    border: 1px solid #eae3de;
    border-radius: 10px;
    background: transparent;
    box-shadow: 0 1px 2px rgba(17, 12, 11, 0.05);
    font: inherit;
    font-size: 0.875rem;
    color: var(--kfc-ink);
    white-space: nowrap;
    cursor: pointer;
}

.kfc-select:hover {
    background: rgba(255, 255, 255, 0.6);
}

.kfc-select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px var(--kfc-red);
}

.kfc-select .kfc-select-chevron {
    opacity: 0.5;
}

.kfc-select-popover .mud-menu-item {
    font-size: 0.875rem;
}

.kfc-select-popover .kfc-select-selected {
    font-weight: 500;
}

/* Small uppercase label before a select (original's "FROM" / "TO"). */
.picker-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--kfc-muted-text);
}

/* Tabs (original: grey rounded track, active tab a white raised pill). */
.kfc-tabs {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 4px;
    border-radius: 12px;
    background: var(--kfc-muted);
    color: var(--kfc-muted-text);
}

.kfc-tab {
    height: 100%;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.kfc-tab:hover {
    color: var(--kfc-ink);
}

.kfc-tab.active {
    background: var(--kfc-cream);
    color: var(--kfc-ink);
    box-shadow: 0 1px 3px rgba(17, 12, 11, 0.12);
}

/* Native checkbox with a small grey label (original: h-3.5 w-3.5 accent-primary, text-xs). */
.kfc-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--kfc-muted-text);
    user-select: none;
    cursor: pointer;
}

.kfc-check input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--kfc-red);
    cursor: pointer;
}

/* Header action buttons (original: size "sm": h-8 rounded-md px-3 text-xs, shadow-sm). */
.page-actions .mud-button-root {
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(17, 12, 11, 0.05);
}

.page-actions .mud-button-outlined:not(.mud-button-outlined-primary) {
    background: var(--kfc-cream);
    border-color: #eae3de;
}

.page-actions .mud-button-root .mud-button-icon-start {
    margin-right: 6px;
}

.page-actions .mud-button-root .mud-icon-root {
    font-size: 1rem;
}

/* Text / date inputs (original: shadcn Input, h-9 rounded-md border-input px-3 text-sm shadow-sm). */
.kfc-input {
    height: 36px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid #eae3de;
    border-radius: 10px;
    background: transparent;
    box-shadow: 0 1px 2px rgba(17, 12, 11, 0.05);
    font: inherit;
    font-size: 0.875rem;
    color: var(--kfc-ink);
}

.kfc-input::placeholder {
    color: var(--kfc-muted-text);
}

.kfc-input:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--kfc-red);
}

/* Search box with a leading icon (original: max-w-md, icon inside, pl-9). */
.kfc-search {
    position: relative;
    flex: 1;
    max-width: 448px;
}

.kfc-search.kfc-search-sm {
    max-width: 384px;
}

/* A plain grey message box (original: rounded border, white card, p-6, small muted text). */
.kfc-plain-note {
    padding: 24px;
    border: 1px solid var(--kfc-border);
    border-radius: 12px;
    background: #fff;
    font-size: 0.875rem;
    color: var(--kfc-muted-text);
}

.kfc-search .kfc-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kfc-muted-text);
    pointer-events: none;
}

.kfc-search .kfc-input {
    padding-left: 36px;
}

/* Label above an input (original: text-xs label, space-y-1.5). */
.kfc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--kfc-ink);
}

/* Toolbar row of 36px controls (original: default-size buttons, h-9 px-4 text-sm). */
.kfc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.kfc-toolbar .mud-button-root {
    height: 36px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 0.875rem;
    box-shadow: 0 1px 2px rgba(17, 12, 11, 0.05);
}

.kfc-toolbar .mud-button-outlined:not(.mud-button-outlined-primary) {
    background: var(--kfc-cream);
    border-color: #eae3de;
}

/* ---- Admin page sections (original admin.tsx: bordered cards, small semibold titles, xs hints) ---- */
.admin-card {
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid var(--kfc-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--kfc-shadow-card);
}

.admin-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--kfc-ink);
}

.admin-card-desc {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: var(--kfc-muted-text);
}

.admin-grid {
    display: grid;
    gap: 16px;
    margin-top: 16px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .admin-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .admin-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.admin-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--kfc-ink);
}

.admin-switch-box {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 12px 8px 4px;
    border: 1px solid var(--kfc-border);
    border-radius: 8px;
}

.admin-switch-box .mud-switch { margin: 0; }

.admin-switch-label {
    padding-top: 6px;
    font-size: 0.875rem;
    color: var(--kfc-ink);
}

.admin-switch-hint {
    font-size: 0.75rem;
    color: var(--kfc-muted-text);
}

.admin-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.admin-actions .mud-button-root {
    height: 32px;
    border-radius: 10px;
    text-transform: none;
}

.kfc-textarea {
    height: auto;
    padding: 8px 12px;
    resize: vertical;
}

/* Small badges (shadcn Badge): default red, destructive dark red, outline. */
.kfc-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--kfc-red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

.kfc-badge-destructive { background: var(--kfc-red-dark); }

.kfc-badge-outline {
    background: transparent;
    border-color: var(--kfc-border);
    color: var(--kfc-ink);
}

.secret-preview {
    font-size: 0.75rem;
    color: var(--kfc-muted-text);
}


.run-error {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--kfc-red-dark);
}

/* ---- Sync in progress (top bar), as the original: stage text, progress bar, Sync now button ---- */
.sync-stage {
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--kfc-muted-text);
}

@media (max-width: 1279.98px) {
    .sync-stage { display: none; } /* the original showed the stage on large screens only */
}

.sync-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--kfc-ink);
}

.sync-progress-track {
    width: 128px;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--kfc-muted);
}

.sync-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--kfc-gradient);
    transition: width 0.3s;
}

.sync-now.mud-button-root {
    height: 32px;
    border-radius: 10px;
    text-transform: none;
    white-space: nowrap;
}

.kfc-button-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--kfc-border);
    border-radius: 10px;
    background: #fff;
    color: var(--kfc-ink);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.kfc-button-outline:hover { background: var(--kfc-muted); }

/* "×2" next to a member who redeemed more than once (Fulfilment), as the original's small red badge. */
.kfc-badge-count { margin-left: 4px; padding: 0 6px; font-size: 10px; }

/* Plain notice box with an icon (as the original's shadcn Alert), e.g. Fulfilment's "No personal data". */
.kfc-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--kfc-border);
    border-radius: 12px;
    background: var(--kfc-cream); /* the page colour, as the original's Alert */
    font-size: 0.875rem;
    color: var(--kfc-ink);
}

.kfc-notice .mud-icon-root { margin-top: 1px; flex-shrink: 0; }
.kfc-notice-title { font-weight: 500; margin-bottom: 2px; }

/* ---- Members filter pop-ups (as the original's shadcn Popover) ---- */
.kfc-pop { position: relative; display: inline-flex; }

.kfc-pop-panel.mud-popover {
    border: 1px solid var(--kfc-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(17, 12, 11, 0.1);
    margin-top: 4px;
    color: var(--kfc-ink);
}

.kfc-pop-body { display: flex; flex-direction: column; gap: 16px; padding: 12px; }
.kfc-pop-head { padding: 12px; border-bottom: 1px solid var(--kfc-border); }
.kfc-pop-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.kfc-pop-heading {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--kfc-muted-text);
}

.kfc-pop-head-row .kfc-pop-heading { margin-bottom: 0; }
.kfc-pop-note { margin: 0; font-size: 11px; color: var(--kfc-muted-text); }
.kfc-pop-list { max-height: 288px; overflow-y: auto; padding: 8px; }
.kfc-pop-empty { padding: 12px; text-align: center; font-size: 0.75rem; color: var(--kfc-muted-text); }

.kfc-pop-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    cursor: pointer;
}

.kfc-pop-item:hover { background: rgba(240, 235, 231, 0.6); }
.kfc-pop-item input { width: 14px; height: 14px; margin: 2px 0 0; accent-color: var(--kfc-red); cursor: pointer; }
.kfc-pop-item-text { min-width: 0; flex: 1; }
.kfc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.kfc-input-sm { height: 32px; }

/* Small on/off buttons (segments, levels, months, types): red when on. */
.kfc-toggles { display: flex; flex-wrap: wrap; gap: 6px; }

.kfc-toggle {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--kfc-border);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--kfc-ink);
    cursor: pointer;
}

.kfc-toggle:hover { background: var(--kfc-muted); }
.kfc-toggle-num { min-width: 36px; }
.kfc-toggle.on { border-color: var(--kfc-red); background: var(--kfc-red); color: #fff; }
.kfc-toggle.on:hover { background: rgba(230, 0, 22, 0.9); }

/* Yes / No / Any buttons: click to cycle. */
.kfc-tri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.kfc-tri {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid var(--kfc-border);
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    text-align: left;
    color: var(--kfc-ink);
    cursor: pointer;
}

.kfc-tri:hover { background: rgba(240, 235, 231, 0.6); }
.kfc-tri-label { font-size: 10px; text-transform: uppercase; color: var(--kfc-muted-text); }
.kfc-tri-value { font-weight: 500; }

/* Plain text button ("Clear", "Clear all"). */
.kfc-ghost {
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--kfc-ink);
    cursor: pointer;
}

.kfc-ghost:hover { background: var(--kfc-muted); }
.kfc-ghost-wide { width: 100%; height: 32px; }

/* Grey count on a filter button, and the removable active-filter tags. */
.kfc-badge-soft { margin-left: 2px; background: var(--kfc-muted); color: var(--kfc-ink); }

.kfc-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.kfc-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 4px 1px 8px;
    border-radius: 999px;
    background: var(--kfc-muted);
    font-size: 11px;
    font-weight: 600;
    color: var(--kfc-ink);
}

.kfc-filter-tag button {
    border: 0;
    border-radius: 4px;
    padding: 0 4px;
    background: transparent;
    font-size: 13px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.kfc-filter-tag button:hover { background: rgba(17, 12, 11, 0.08); }

/* Dashboard menu segments: the pie with a list of counts and percentages beside it. */
.segment-chart { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; }
.segment-pie { flex: 1 1 160px; min-width: 140px; }
.segment-pie .mud-chart-legend { display: none; } /* replaced by the list */
.segment-legend { flex: 1 1 180px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }

.segment-legend li {
    display: grid;
    grid-template-columns: 10px 1fr auto 52px;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--kfc-border);
}

.segment-legend li:last-child { border-bottom: 0; }
.segment-dot { width: 10px; height: 10px; border-radius: 50%; }
.segment-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.segment-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--kfc-muted-text); }