/* ═══════════ Keenminds Platform theme — Microsoft 365 admin center (Fluent) look ═══════════
   Built on Bootstrap 5.3's CSS variables, so every page and component picks it up. */

:root {
    --km-brand: #0f6cbd;          /* Fluent brand blue */
    --km-brand-hover: #115ea3;
    --km-brand-pressed: #0c3b5e;
    --km-brand-rgb: 15, 108, 189;
    --km-brand-soft: #ebf3fc;
    --km-ink: #242424;            /* neutral foreground 1 */
    --km-ink-2: #424242;
    --km-muted: #616161;
    --km-line: #e0e0e0;
    --km-line-strong: #d1d1d1;
    --km-bg: #faf9f8;
    --km-card: #ffffff;
    --km-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .14);   /* Fluent shadow4 */

    --bs-body-font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --bs-body-font-size: .875rem;
    --bs-body-line-height: 1.45;
    --bs-body-color: var(--km-ink);
    --bs-body-bg: var(--km-bg);
    --bs-secondary-color: var(--km-muted);
    --bs-border-color: var(--km-line);
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 8px;
    --bs-primary: var(--km-brand);
    --bs-primary-rgb: var(--km-brand-rgb);
    --bs-link-color: var(--km-brand);
    --bs-link-color-rgb: var(--km-brand-rgb);
    --bs-link-hover-color: var(--km-brand-hover);
    --bs-link-hover-color-rgb: 17, 94, 163;
    --bs-focus-ring-color: rgba(var(--km-brand-rgb), .3);
}

html, body { font-family: var(--bs-body-font-family); background: var(--km-bg); }
body { -webkit-font-smoothing: antialiased; }

/* Page titles like "Active users": semibold, 28px, tight. */
h1, .h3 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; color: var(--km-ink); }
h2, h3, h4, h5, .h4, .h5 { font-weight: 600; color: var(--km-ink); }
h1:focus { outline: none; }
.text-muted { color: var(--km-muted) !important; }
code { color: #8a3707; background: #f5f5f5; padding: .05em .3em; border-radius: 3px; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Cards: flat white tiles with the Fluent elevation ── */
.card {
    border: 0;
    border-radius: 8px;
    box-shadow: var(--km-shadow);
    background: var(--km-card);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid #f0f0f0;
    padding: .9rem 1.25rem;
    font-weight: 600;
    font-size: .95rem;
}
.card-header:first-child { border-radius: 8px 8px 0 0; }
.card-footer { background: #fff; border-top: 1px solid #f0f0f0; }
.card-footer:last-child { border-radius: 0 0 8px 8px; }

/* ── Buttons (Fluent: flat, 4px radius, semibold) ── */
.btn { font-weight: 600; font-size: .875rem; border-radius: 4px; padding: .32rem .9rem; min-height: 32px; box-shadow: none !important; }
.btn-sm { min-height: 24px; padding: .15rem .55rem; font-size: .8125rem; }
.btn-lg { min-height: 40px; }
.btn-primary {
    --bs-btn-bg: var(--km-brand);
    --bs-btn-border-color: var(--km-brand);
    --bs-btn-hover-bg: var(--km-brand-hover);
    --bs-btn-hover-border-color: var(--km-brand-hover);
    --bs-btn-active-bg: var(--km-brand-pressed);
    --bs-btn-active-border-color: var(--km-brand-pressed);
    --bs-btn-disabled-bg: #f0f0f0;
    --bs-btn-disabled-border-color: #e0e0e0;
    --bs-btn-disabled-color: #bdbdbd;
}
.btn-outline-secondary, .btn-outline-primary, .btn-light {
    --bs-btn-color: var(--km-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--km-line-strong);
    --bs-btn-hover-color: var(--km-ink);
    --bs-btn-hover-bg: #f5f5f5;
    --bs-btn-hover-border-color: #c7c7c7;
    --bs-btn-active-bg: #e0e0e0;
    --bs-btn-active-color: var(--km-ink);
    --bs-btn-active-border-color: #b3b3b3;
}
.btn-outline-primary { --bs-btn-color: var(--km-brand); }
.btn-outline-danger { --bs-btn-bg: #fff; --bs-btn-border-color: var(--km-line-strong); --bs-btn-color: #c50f1f; --bs-btn-hover-bg: #fdf3f4; --bs-btn-hover-color: #b10e1c; --bs-btn-hover-border-color: #e6a2a8; }
.btn-outline-success { --bs-btn-bg: #fff; --bs-btn-border-color: var(--km-line-strong); --bs-btn-color: #107c10; --bs-btn-hover-bg: #f1faf1; --bs-btn-hover-color: #0e700e; --bs-btn-hover-border-color: #9fd89f; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { outline: 2px solid var(--km-brand); outline-offset: 1px; }

/* ── Inputs: white, thin neutral border, darker bottom edge, brand underline on focus ── */
.form-control, .form-select {
    border: 1px solid var(--km-line-strong);
    border-bottom-color: #616161;
    border-radius: 4px;
    min-height: 32px;
    font-size: .875rem;
    background-color: #fff;
}
.form-control:focus, .form-select:focus { border-color: var(--km-line-strong); border-bottom: 2px solid var(--km-brand); outline: 0; box-shadow: none; }
.form-control-sm, .form-select-sm { min-height: 28px; font-size: .8125rem; }
.form-label { font-weight: 600; color: var(--km-ink); font-size: .875rem; }
.form-check-input { border-color: #616161; border-radius: 3px; }
.form-check-input:checked { background-color: var(--km-brand); border-color: var(--km-brand); }
.form-switch .form-check-input { border-radius: 2em; }
.input-group-text { background: #f5f5f5; border-color: var(--km-line-strong); color: var(--km-muted); font-size: .8125rem; }
.form-text { color: var(--km-muted); font-size: .78rem; }
.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; }
.darker-border-checkbox.form-check-input { border-color: #616161; }

/* ── Tables (DetailsList: no grid lines, hover rows, plain headers) ── */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f5f5f5; --bs-table-active-bg: var(--km-brand-soft); margin-bottom: 0; font-size: .875rem; }
.table > thead th {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--km-ink-2);
    background: #fff;
    border-bottom: 1px solid var(--km-line);
    padding-top: .6rem;
    padding-bottom: .6rem;
    white-space: nowrap;
}
.table > :not(caption) > * > * { border-color: #f0f0f0; padding: .55rem 1rem; }
.table td a { font-weight: 600; color: var(--km-brand); }

/* ── Status badges: Fluent "subtle" badges ── */
.badge { font-weight: 600; font-size: .72rem; border-radius: 4px; padding: .25em .55em; }
.text-bg-success { color: #0e700e !important; background: #f1faf1 !important; box-shadow: inset 0 0 0 1px #9fd89f; }
.text-bg-warning { color: #8a3707 !important; background: #fff9f5 !important; box-shadow: inset 0 0 0 1px #fdcfb4; }
.text-bg-danger { color: #b10e1c !important; background: #fdf3f4 !important; box-shadow: inset 0 0 0 1px #eeacb2; }
.text-bg-info { color: #115ea3 !important; background: #ebf3fc !important; box-shadow: inset 0 0 0 1px #b4d6fa; }
.text-bg-secondary, .text-bg-light { color: #424242 !important; background: #f5f5f5 !important; box-shadow: inset 0 0 0 1px #e0e0e0; border: 0 !important; }

/* ── Message bars (Fluent MessageBar) ── */
.alert { border: 0; border-left: 4px solid; border-radius: 4px; padding: .65rem 1rem; font-size: .875rem; }
.alert-info { background: #ebf3fc; border-left-color: var(--km-brand); color: var(--km-ink); }
.alert-warning { background: #fff9f5; border-left-color: #f7630c; color: var(--km-ink); }
.alert-success { background: #f1faf1; border-left-color: #107c10; color: var(--km-ink); }
.alert-danger { background: #fdf3f4; border-left-color: #c50f1f; color: var(--km-ink); }

/* ── Lists, pills (account pages, customer types) ── */
.list-group { --bs-list-group-border-color: #f0f0f0; --bs-list-group-active-bg: var(--km-brand-soft); --bs-list-group-active-color: var(--km-ink); --bs-list-group-active-border-color: #f0f0f0; }
.list-group-item.active { box-shadow: inset 3px 0 0 var(--km-brand); font-weight: 600; }
.list-group-item.active .small, .list-group-item.active .text-muted { color: var(--km-muted) !important; }
.nav-pills .nav-link { color: var(--km-ink); border-radius: 4px; padding: .5rem .85rem; position: relative; }
.nav-pills .nav-link:hover { background: #f0f0f0; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: #fff; color: var(--km-ink); font-weight: 600; box-shadow: var(--km-shadow); }
.nav-pills .nav-link.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--km-brand); }

/* ── Progress ── */
.progress { background: #e0e0e0; border-radius: 2px; height: 4px !important; }
.progress-bar { background: var(--km-brand); }

/* ── Validation & errors ── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #107c10; }
.invalid { outline: 1px solid #c50f1f; }
.validation-message { color: #c50f1f; font-size: .8125rem; }

.blazor-error-boundary { background: #fdf3f4; border-left: 4px solid #c50f1f; padding: 1rem 1.25rem; color: var(--km-ink); border-radius: 4px; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ── Command bar (M365: subtle text buttons under the page title) ── */
.command-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin: 0 0 1rem -.5rem; }
.command-bar .cmd {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 0; background: none; border-radius: 4px;
    padding: .4rem .65rem; color: var(--km-ink); font-size: .875rem; text-decoration: none; cursor: pointer;
}
.command-bar .cmd i { color: var(--km-brand); font-size: 1rem; }
.command-bar .cmd:hover { background: #f0f0f0; text-decoration: none; color: var(--km-ink); }
.command-bar .cmd:disabled { opacity: .45; cursor: default; }
.command-bar .cmd-sep { width: 1px; height: 1.25rem; background: var(--km-line); margin: 0 .35rem; }
.command-bar .cmd-search { margin-left: auto; max-width: 18rem; }

/* Clickable list rows (open a panel). */
.table-click > tbody > tr { cursor: pointer; }
.row-title { font-weight: 600; color: var(--km-ink); }
.row-sub { color: var(--km-muted); font-size: .8125rem; }