/* ===========================================================================
   KashmirCollabs — design tokens and base styles.
   Bootstrap provides the grid and components; this layer supplies the identity.
   =========================================================================== */

:root {
    /* Modern, colourful, professional: indigo-violet carries the brand, coral and
       amber warm it up, sky handles information. Colour arrives through gradients,
       icon tiles and badges — surfaces stay crisp white so it never turns garish.
       Deliberately no green anywhere; "verified" is indigo, matching the brand. */
    --kc-primary: #4f46e5;
    --kc-primary-dark: #4338ca;
    --kc-primary-light: #eef2ff;
    --kc-violet: #7c3aed;
    --kc-accent: #f0653a;
    --kc-accent-light: #fff0ea;
    --kc-amber: #d97706;
    --kc-amber-light: #fef3c7;
    --kc-rose: #e11d48;
    --kc-rose-light: #ffe4ec;
    --kc-sky: #0284c7;
    --kc-sky-light: #e0f2fe;

    --kc-gradient: linear-gradient(120deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%);
    --kc-gradient-warm: linear-gradient(120deg, #f0653a 0%, #e11d48 100%);

    --kc-ink: #171625;
    --kc-body: #4b4a5e;
    --kc-muted: #767489;
    --kc-line: #e8e7f0;
    --kc-surface: #ffffff;
    --kc-canvas: #f8f8fc;
    --kc-canvas-alt: #f1f0f8;

    /* "Success" without green: confirmations ride the brand indigo. */
    --kc-success: #4f46e5;
    --kc-success-bg: #eef2ff;
    --kc-warning: #b45309;
    --kc-warning-bg: #fef3c7;
    --kc-danger: #dc2626;
    --kc-danger-bg: #fee2e2;
    --kc-info-bg: #e0f2fe;
    --kc-info: #0369a1;

    --kc-radius: 10px;
    --kc-radius-lg: 16px;
    --kc-shadow-sm: 0 1px 2px rgba(23, 22, 37, .05);
    --kc-shadow: 0 2px 8px -2px rgba(79, 70, 229, .08), 0 1px 2px rgba(23, 22, 37, .05);
    --kc-shadow-lg: 0 16px 32px -12px rgba(79, 70, 229, .18), 0 4px 8px -4px rgba(23, 22, 37, .06);

    --bs-primary: var(--kc-primary);
    --bs-link-color: var(--kc-primary);
    --bs-link-hover-color: var(--kc-primary-dark);
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--kc-body);
    background: var(--kc-canvas);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--kc-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Layout ------------------------------------------------------------- */

.kc-shell { display: flex; flex-direction: column; min-height: 100vh; }
.kc-main { flex: 1; }

.kc-header {
    background: var(--kc-surface);
    border-bottom: 1px solid var(--kc-line);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.kc-brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--kc-ink) !important;
    letter-spacing: -0.02em;
}

.kc-brand .kc-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    margin-right: .55rem;
    border-radius: 9px;
    background: var(--kc-gradient);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 2px 6px rgba(79, 70, 229, .35);
}

/* inline-flex, not inline: vertical padding on an inline element paints but
   creates no layout height, so links with and without icons sat on different
   baselines. Flex also centres the icon against the label. */
.kc-nav-link {
    display: inline-flex;
    align-items: center;
    color: var(--kc-body);
    padding: .5rem .85rem;
    border-radius: 8px;
    font-size: .925rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}
.kc-nav-link:hover { background: var(--kc-primary-light); color: var(--kc-primary-dark); text-decoration: none; }
.kc-nav-link.active { color: var(--kc-primary); background: var(--kc-primary-light); font-weight: 600; }

/* Centre every item on the bar, and kill the list-item box on nav entries so
   the first one can't sit differently from the rest. */
.kc-header .navbar-nav { align-items: center; }
.kc-header .navbar-nav .nav-item { display: flex; align-items: center; }
.kc-header .navbar-collapse { align-items: center; }

/* Icons inside nav links and buttons share the text's optical centre. */
.kc-nav-link .bi { line-height: 1; }

.kc-footer {
    background: var(--kc-surface);
    border-top: 1px solid var(--kc-line);
    padding: 2.5rem 0 1.5rem;
    margin-top: 4rem;
    font-size: .9rem;
}
.kc-footer h6 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kc-muted); }
.kc-footer a { color: var(--kc-body); display: block; padding: .2rem 0; }

/* --- Cards -------------------------------------------------------------- */

.kc-card {
    background: var(--kc-surface);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius-lg);
    box-shadow: var(--kc-shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.kc-card-hover:hover {
    box-shadow: var(--kc-shadow-lg);
    border-color: rgba(79, 70, 229, .35);
    transform: translateY(-3px);
}

.kc-avatar {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--kc-gradient);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.15rem;
    flex-shrink: 0;
}
.kc-avatar-lg { width: 96px; height: 96px; border-radius: 22px; font-size: 2rem; }

/* --- Badges ------------------------------------------------------------- */

.kc-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .75rem; font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 3px;
    background: var(--kc-canvas-alt);
    color: var(--kc-body);
    white-space: nowrap;
}
.kc-badge-verified { background: var(--kc-success-bg); color: var(--kc-success); }
.kc-badge-pending  { background: var(--kc-warning-bg); color: var(--kc-warning); }
.kc-badge-danger   { background: var(--kc-danger-bg);  color: var(--kc-danger); }
.kc-badge-info     { background: var(--kc-info-bg);    color: var(--kc-info); }
.kc-badge-accent   { background: var(--kc-accent-light); color: var(--kc-accent); }

/* Spec §60 — sponsored placement must always be visibly labelled. */
.kc-badge-featured {
    background: var(--kc-accent-light);
    color: var(--kc-accent);
    border: 1px solid rgba(217, 119, 6, .25);
}

/* Spec §11 — self-declared figures must never look like verified ones. */
.kc-stat-declared { color: var(--kc-muted); }
.kc-stat-verified { color: var(--kc-success); }

/* --- Stats -------------------------------------------------------------- */

.kc-stat-value {
    font-size: 1.4rem; font-weight: 700; color: var(--kc-ink);
    line-height: 1.2; letter-spacing: -0.02em;
}
.kc-stat-label {
    font-size: .75rem; color: var(--kc-muted);
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}

/* --- Buttons ------------------------------------------------------------ */

.btn-kc-primary {
    background: var(--kc-gradient); border: none; color: #fff;
    font-weight: 600;
    border-radius: var(--kc-radius);
    box-shadow: 0 2px 8px rgba(79, 70, 229, .3);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-kc-primary:hover, .btn-kc-primary:focus {
    color: #fff; filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, .38);
}
.btn-kc-primary:disabled { background: var(--kc-gradient); opacity: .55; color: #fff; }
.btn-kc-outline {
    background: var(--kc-surface); border: 1.5px solid var(--kc-line);
    color: var(--kc-primary); font-weight: 600;
    border-radius: var(--kc-radius);
    transition: border-color .12s ease, background .12s ease;
}
.btn-kc-outline:hover {
    background: var(--kc-primary-light); border-color: var(--kc-primary);
    color: var(--kc-primary-dark);
}

/* --- Hero --------------------------------------------------------------- */

.kc-hero {
    background:
        radial-gradient(ellipse 42% 55% at 12% 0%, rgba(240, 101, 58, .13), transparent 70%),
        radial-gradient(ellipse 46% 60% at 88% 4%, rgba(2, 132, 199, .12), transparent 70%),
        radial-gradient(ellipse 70% 65% at 50% -18%, rgba(124, 58, 237, .16), transparent 72%),
        var(--kc-surface);
    border-bottom: 1px solid var(--kc-line);
    padding: 4.5rem 0 3.5rem;
}
.kc-hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.kc-hero h1 .kc-grad-text, .kc-grad-text {
    background: var(--kc-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.kc-hero-sub { font-size: 1.1rem; color: var(--kc-body); max-width: 40rem; }

.kc-searchbar {
    background: var(--kc-surface);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius-lg);
    box-shadow: var(--kc-shadow-lg);
    padding: .5rem;
}
.kc-searchbar .form-control, .kc-searchbar .form-select {
    border: none; box-shadow: none !important;
}
.kc-searchbar .form-control:focus, .kc-searchbar .form-select:focus { outline: none; }

/* --- Filters ------------------------------------------------------------ */

.kc-filter-panel {
    background: var(--kc-surface);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius-lg);
    padding: 1.25rem;
}
.kc-filter-group + .kc-filter-group {
    margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--kc-line);
}
.kc-filter-label {
    font-size: .78rem; font-weight: 700; color: var(--kc-ink);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem;
}

/* --- Admin -------------------------------------------------------------- */

.kc-admin-sidebar {
    background: var(--kc-surface);
    border-right: 1px solid var(--kc-line);
    min-height: calc(100vh - 61px);
    padding: 1.25rem 0;
}
.kc-admin-link {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem 1.25rem;
    color: var(--kc-body); font-size: .92rem; font-weight: 500;
}
.kc-admin-link:hover { background: var(--kc-canvas-alt); color: var(--kc-ink); text-decoration: none; }
.kc-admin-link.active {
    background: var(--kc-primary-light); color: var(--kc-primary-dark); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--kc-primary);
}
.kc-admin-section {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--kc-muted);
    padding: 1rem 1.25rem .35rem;
}

/* Secrets are shown masked and never revealed (ADR-0003). */
.kc-secret-mask {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--kc-canvas-alt);
    border: 1px solid var(--kc-line);
    border-radius: 6px;
    padding: .35rem .6rem;
    font-size: .85rem;
    color: var(--kc-body);
}

/* Header action buttons (bell, account) line up with the nav links. */
.kc-header .btn { display: inline-flex; align-items: center; line-height: 1.25; }

/* --- Colour tiles -------------------------------------------------------- */
/* An 8-hue cycle for category cards, step markers and icon chips. Assign with
   .kc-tile-{n % 8}. Text stays white on saturated fills. */

.kc-tile { color: #fff !important; }
.kc-tile-0 { background: #4f46e5 !important; }   /* indigo   */
.kc-tile-1 { background: #f0653a !important; }   /* coral    */
.kc-tile-2 { background: #0284c7 !important; }   /* sky      */
.kc-tile-3 { background: #d97706 !important; }   /* amber    */
.kc-tile-4 { background: #7c3aed !important; }   /* violet   */
.kc-tile-5 { background: #e11d48 !important; }   /* rose     */
.kc-tile-6 { background: #0d9488 !important; }   /* deep cyan*/
.kc-tile-7 { background: #db2777 !important; }   /* magenta  */

/* Soft variants for backgrounds behind coloured text. */
.kc-tile-soft-0 { background: #eef2ff !important; color: #4f46e5 !important; }
.kc-tile-soft-1 { background: #fff0ea !important; color: #ea580c !important; }
.kc-tile-soft-2 { background: #e0f2fe !important; color: #0284c7 !important; }
.kc-tile-soft-3 { background: #fef3c7 !important; color: #b45309 !important; }
.kc-tile-soft-4 { background: #f3e8ff !important; color: #7c3aed !important; }
.kc-tile-soft-5 { background: #ffe4ec !important; color: #e11d48 !important; }
.kc-tile-soft-6 { background: #ccfbf1 !important; color: #0d9488 !important; }
.kc-tile-soft-7 { background: #fce7f3 !important; color: #db2777 !important; }

/* --- Utilities ---------------------------------------------------------- */

.kc-muted { color: var(--kc-muted); }
.kc-divider { height: 1px; background: var(--kc-line); border: 0; }
.kc-section { padding: 3.5rem 0; }
.kc-section-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }

.kc-empty {
    text-align: center; padding: 3.5rem 1.5rem;
    color: var(--kc-muted);
    border: 1px dashed var(--kc-line);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}

.kc-platform-dot {
    width: 28px; height: 28px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: .85rem; flex-shrink: 0;
}

.kc-truncate-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Validation (template defaults) ------------------------------------- */

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; font-size: .85rem; }

.blazor-error-boundary {
    background: var(--kc-danger-bg); padding: 1rem; color: var(--kc-danger);
    border-radius: var(--kc-radius); border: 1px solid rgba(180, 35, 24, .2);
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed;
    width: 100%; z-index: 1060;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* --- Admin-authored page content ---------------------------------------- */

.kc-prose h2 { font-size: 1.25rem; margin: 1.25rem 0 .5rem; }
.kc-prose h2:first-child { margin-top: 0; }
.kc-prose h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.kc-prose p { line-height: 1.7; margin-bottom: .9rem; }
.kc-prose ul, .kc-prose ol { line-height: 1.7; margin-bottom: .9rem; }
.kc-prose a { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────────
   Authentication pages

   The Identity scaffolding ships unstyled full-bleed markup that ignores the
   design system entirely. These give the sign-in, register and password-reset
   screens a single centred card, consistent with the rest of the site.
   ───────────────────────────────────────────────────────────────────────────── */

.kc-auth {
    min-height: calc(100vh - 22rem);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem 4rem;
}

/* Sized in ch so the card tracks the text it holds rather than a fixed pixel
   width, which keeps the line length comfortable at any root font size. */
.kc-auth-card {
    width: 100%;
    max-width: 46ch;
    background: var(--kc-surface);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius-lg);
    box-shadow: var(--kc-shadow-lg);
    padding: 2.5rem;
}

.kc-auth-wide { max-width: 62ch; }

.kc-auth-mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: var(--kc-gradient);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
    margin-bottom: 1.25rem;
}

.kc-auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kc-ink);
    margin: 0 0 .35rem;
    letter-spacing: -.02em;
}

.kc-auth-sub {
    color: var(--kc-muted);
    font-size: .925rem;
    margin: 0 0 1.75rem;
}

.kc-auth-card .form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--kc-body);
    margin-bottom: .375rem;
}

.kc-auth-card .form-control {
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius);
    padding: .625rem .875rem;
    font-size: .9375rem;
    background: var(--kc-canvas);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.kc-auth-card .form-control:focus {
    background: var(--kc-surface);
    border-color: var(--kc-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

.kc-auth-card .form-control::placeholder { color: #a9a7bb; }

/* A labelled rule. The line is drawn with pseudo-elements so the word sits in a
   gap rather than on top of a border, which shows through at any zoom level. */
.kc-auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0;
    color: var(--kc-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.kc-auth-divider::before,
.kc-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--kc-line);
}

.kc-auth-links {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--kc-line);
    display: flex;
    flex-direction: column;
    gap: .625rem;
    font-size: .875rem;
}

.kc-auth-links a { color: var(--kc-primary); text-decoration: none; font-weight: 500; }
.kc-auth-links a:hover { text-decoration: underline; }

.kc-auth-foot {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .875rem;
    color: var(--kc-muted);
}
.kc-auth-foot a { color: var(--kc-primary); font-weight: 600; text-decoration: none; }
.kc-auth-foot a:hover { text-decoration: underline; }

/* Validation summaries and the error banner. Rose rather than Bootstrap red so
   failures read as part of the palette instead of a browser default. */
.kc-auth-alert {
    background: var(--kc-rose-light);
    border: 1px solid rgba(225, 29, 72, .25);
    color: #9f1239;
    border-radius: var(--kc-radius);
    padding: .75rem .875rem;
    font-size: .875rem;
    margin-bottom: 1.25rem;
}
.kc-auth-card .validation-message { color: var(--kc-rose); font-size: .8125rem; }

.kc-auth-card .form-check-input:checked {
    background-color: var(--kc-primary);
    border-color: var(--kc-primary);
}
.kc-auth-card .form-check-label { font-size: .875rem; color: var(--kc-body); }

@media (max-width: 480px) {
    .kc-auth { padding: 1.5rem .75rem 3rem; }
    .kc-auth-card { padding: 1.75rem 1.25rem; }
}

.kc-auth-hint {
    font-size: .8125rem;
    color: var(--kc-muted);
    margin-top: .375rem;
    line-height: 1.5;
}
.kc-auth-hint a { color: var(--kc-primary); text-decoration: none; }
.kc-auth-hint a:hover { text-decoration: underline; }

/* Blazor's <FocusOnNavigate Selector="h1"> moves focus to the page heading after each
   navigation so screen readers announce where they have landed. That focus is always
   programmatic — headings are not in the tab order — but Chrome on Android still paints
   its default two-tone focus ring, which reads as a heavy black box drawn around the
   hero heading.

   Suppressing the ring here costs nothing: an h1 can never be reached with the Tab key,
   so there is no keyboard user relying on this indicator. Focus itself is untouched, so
   the accessibility behaviour the component exists for still works. */
h1:focus,
h1:focus-visible {
    outline: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Admin area on small screens

   The sidebar is a Bootstrap column (col-lg-2), so below 992px it stops sitting
   beside the content and stacks above it. Combined with a full-viewport
   min-height that pushed every admin page an entire screen down — the menu was
   all you could see.
   ───────────────────────────────────────────────────────────────────────────── */

.kc-admin-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--kc-surface);
    border: 0;
    border-bottom: 1px solid var(--kc-line);
    color: var(--kc-ink);
    font-weight: 600;
    font-size: .95rem;
    text-align: left;
}
.kc-admin-toggle:focus-visible {
    outline: 2px solid var(--kc-primary);
    outline-offset: -2px;
}
/* Rotates the caret to point down once the menu is open. */
.kc-admin-toggle[aria-expanded="true"] .bi-list::before { content: "\f62a"; }

@media (max-width: 991.98px) {
    .kc-admin-sidebar {
        /* The tall min-height only makes sense in the two-column layout. Here it
           would reserve a whole screen for a menu that is usually collapsed. */
        min-height: 0;
        padding: 0 0 .25rem;
        border-right: 0;
        border-bottom: 1px solid var(--kc-line);
        position: sticky;
        top: 0;
        z-index: 5;
    }

    /* Slightly larger targets once this is a phone menu rather than a dense
       desktop sidebar. */
    .kc-admin-link { padding: .7rem 1rem; }
    .kc-admin-section { padding-left: 1rem; margin-top: .75rem; }
}

/* The signed-in footer: a single line rather than four columns of marketing. */
.kc-footer-slim { padding: 1.25rem 0; }
.kc-footer-slim a { text-decoration: none; }
.kc-footer-slim a:hover { color: var(--kc-primary); text-decoration: underline; }