/*
 * Bridge between Bootstrap 5 and the Inno Biz tokens ckn.css defines.
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * CANONICAL SOURCE: shared/themes/ckn/ — do not edit a copy under a project's themes/ckn/.
 * Placed in every ckn.systems.* project by tools/sync-theme.sh; `--check` fails on drift.
 * ─────────────────────────────────────────────────────────────────────────────────────────
 *
 * Bootstrap is loaded because the standard `@ckn-technology/ui` components emit its class
 * names in their own markup, and `ckn-modal`/`ckn-confirm` drive visibility through the
 * Bootstrap 5 JS global. ckn.css itself stays framework-free per its own docstring; this file
 * is the only place Bootstrap's defaults are pulled onto those tokens, scoped to
 * `.ckn-content-body` so it never leaks onto the rail or shell chrome ckn.css owns.
 *
 * Every rule here exists because Bootstrap's own value is *wrong for this design system*, not
 * merely different — mostly its #0d6efd primary, which DevSpec §3 replaces with --ink
 * everywhere, and its own red/green, which §2 marks "hard-coded, never themed".
 *
 * ckn.systems.integration used to solve the same problem the other way, with a hand-written
 * `console.css` that reimplemented the subset of Bootstrap the components emit and gave up on
 * modals entirely (`.modal { display: none }`, because it shipped no Bootstrap JS). That file
 * is gone: the retoning it did for alerts, nav, pagination, forms and spinners is folded in
 * below, and its own layout primitives moved into ckn.css.
 */

.ckn-content-body {
    font-family: var(--sans);
    color: var(--ink);
}

/*
 * Primary is always --ink (DevSpec §3); destructive is always --err.
 *
 * These declare real properties rather than `--bs-btn-*` custom properties. Bootstrap only
 * began reading `--bs-btn-bg` and friends in 5.2; the vendored copy here is 5.0.2, which
 * compiles the colour straight into `.btn-primary { background-color: #0d6efd }`. Setting the
 * variables therefore styled nothing at all — every primary action in the product rendered in
 * Bootstrap's blue, a hue that is not in the palette, while this file read as though §3 were
 * being enforced. If the vendored Bootstrap is ever upgraded past 5.2, these still win: a
 * real declaration beats the variable-driven default.
 */
.ckn-content-body .btn-primary {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #ffffff;
    border-radius: var(--r-md);
    font-weight: 600;
}

.ckn-content-body .btn-primary:hover,
.ckn-content-body .btn-primary:focus,
.ckn-content-body .btn-primary:active,
.ckn-content-body .btn-primary:first-child:active {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

.ckn-content-body .btn-danger {
    background-color: var(--err);
    border-color: var(--err);
    color: #ffffff;
    border-radius: var(--r-md);
}

/*
 * `.btn-ghost` is not a Bootstrap class — it is the name the product surfaces reach for when
 * they want the secondary button, and Bootstrap silently renders such a button as bare text
 * on a transparent background with no border. It is listed here rather than given its own
 * rule because it IS the secondary button of §3 ("transparent fill, --bd2 border, --g4
 * text"); giving it a second definition would let the two drift.
 */
.ckn-content-body .btn-outline-secondary,
.ckn-content-body .btn-secondary,
.ckn-content-body .btn-ghost {
    background-color: transparent;
    border-color: var(--bd2);
    color: var(--g4);
    border-radius: var(--r-md);
}

.ckn-content-body .btn-outline-secondary:hover,
.ckn-content-body .btn-secondary:hover,
.ckn-content-body .btn-ghost:hover {
    background-color: rgba(0, 0, 0, .04);
    border-color: var(--bd2);
    color: var(--ink);
}

/*
 * Status badges use only the functional palette (DevSpec §3), pill radius.
 *
 * The vendored Bootstrap is 5.0.2 — it has no `.text-bg-*` utilities at all (added in 5.3.0),
 * so `ckn-table`'s colorMap values from ckn-technology.md's own examples (`text-bg-success`,
 * `text-bg-danger`, …) resolve to nothing without this shim: the base `.badge` rule still sets
 * white text, but with no matching background it renders as invisible white-on-white. Defined
 * against the Inno tokens rather than Bootstrap's own red/green, which is the point — DevSpec
 * §2 marks ok/warn/err "hard-coded, never themed", and Bootstrap's danger (#dc3545) is not the
 * same value as --err (#DC2B2B).
 */
.ckn-content-body .badge {
    border-radius: var(--r-full);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ckn-content-body .text-bg-success { color: #fff !important; background-color: var(--ok) !important; }
.ckn-content-body .text-bg-danger  { color: #fff !important; background-color: var(--err) !important; }
.ckn-content-body .text-bg-warning { color: #fff !important; background-color: var(--warn) !important; }
.ckn-content-body .text-bg-info,
.ckn-content-body .text-bg-primary { color: #fff !important; background-color: var(--ink) !important; }
.ckn-content-body .text-bg-secondary,
.ckn-content-body .text-bg-light,
.ckn-content-body .text-bg-dark { color: var(--g4) !important; background-color: var(--bg) !important; border: 1px solid var(--bd); }

.ckn-badge-muted { background: var(--bg); color: var(--g4); border: 1px solid var(--bd); }

/* Hairlines, not shadows or grey-on-grey (DevSpec §3 "Never"). */
.ckn-content-body table { font-variant-numeric: tabular-nums; }

.ckn-content-body .table > :not(caption) > * > * {
    border-bottom-color: var(--bd);
    box-shadow: none;
}

.ckn-content-body .table thead th {
    color: var(--g4);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    border-bottom: 1px solid var(--bd2);
}

.ckn-content-body .form-control,
.ckn-content-body .form-select {
    border-color: var(--bd2);
    border-radius: var(--r-md);
}

.ckn-content-body .form-control:focus,
.ckn-content-body .form-select:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
}

.modal-content { border-radius: var(--r-lg); border: 1px solid var(--bd); }

/* Declared-list chips (summary field contract, intent decision allow-list). */
.ckn-content-body .ckn-chip-remove {
    font-size: .55rem;
}

/* ---------------------------------------------------------------- links and text
 *
 * Bootstrap's reboot paints every <a> #0d6efd and `.text-primary` the same. There is no blue
 * in this design system: §3 makes --ink the one action colour.
 */
.ckn-content-body a { color: var(--ink); }
.ckn-content-body a:hover { color: #000; }
.ckn-content-body .text-primary { color: var(--ink) !important; }
.ckn-content-body .text-muted   { color: var(--g4) !important; }

/* ---------------------------------------------------------------- buttons
 *
 * The focus ring is Bootstrap's blue halo; §3 rules out coloured glows, so it becomes the
 * same hairline the inputs use. `.btn-link` is a text button, not a blue link.
 */
.ckn-content-body .btn:focus,
.ckn-content-body .btn:focus-visible {
    box-shadow: 0 0 0 1px var(--ink);
}

.ckn-content-body .btn-link {
    color: var(--ink);
    text-decoration: none;
}

.ckn-content-body .btn-link:hover { color: #000000; }

/* Bootstrap 5.0.2's `.btn-close` is a background-image X in its own blue-black; the theme's
   icon buttons are drawn from currentColor, so this one is too. */
.ckn-content-body .btn-close { filter: none; opacity: .55; }
.ckn-content-body .btn-close:hover { opacity: 1; }

/* ---------------------------------------------------------------- alerts
 *
 * `ckn-alert` maps its `type` onto four of Bootstrap's contextual alerts, defaulting to
 * `alert-info` for any value it does not recognise. `danger` is NOT one of them; the error
 * type is `error`.
 *
 * Bootstrap renders these as pastel filled blocks. §3 rules that out — the surface is white
 * with hairlines — so they become a left rule in the functional colour instead. Carried over
 * from the console.css this bridge replaced.
 */
.ckn-content-body .alert {
    padding: .6rem .8rem;
    margin: .6rem 0;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--bd2);
    border-left-width: 3px;
    border-radius: var(--r-xs);
    font-size: .875rem;
}
.ckn-content-body .alert-info      { border-left-color: var(--g4); }
.ckn-content-body .alert-success   { border-left-color: var(--ok); }
.ckn-content-body .alert-warning   { border-left-color: var(--warn); }
.ckn-content-body .alert-danger    { border-left-color: var(--err); color: var(--err); }
.ckn-content-body .alert-dismissible { display: flex; align-items: flex-start; gap: .5rem; }

/* ---------------------------------------------------------------- tabs / nav
 *
 * `ckn-tabs` emits Bootstrap's nav markup. Bootstrap's own tabs are pill-cornered boxes in
 * blue; the theme's tab is an underline in ink, matching `.ckn-tab` in ckn.css so a page that
 * mixes a hand-written tab strip with a component one does not show two different tabs.
 */
.ckn-content-body .nav,
.ckn-content-body .nav-tabs {
    gap: .25rem;
    border-bottom: 1px solid var(--bd);
    margin-bottom: .8rem;
}

.ckn-content-body .nav-link {
    padding: .4rem .8rem;
    color: var(--g4);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.ckn-content-body .nav-link:hover { color: var(--ink); border-color: transparent; }
.ckn-content-body .nav-link.active,
.ckn-content-body .nav-tabs .nav-link.active {
    color: var(--ink);
    background: none;
    border-color: transparent;
    border-bottom-color: var(--ink);
    font-weight: 600;
}

/* ---------------------------------------------------------------- pagination
 *
 * Emitted by `ckn-pagination`. The cursor-paginated list screens use `.ckn-pager` instead —
 * a keyset cursor has no page numbers — so this is for a screen with a countable set.
 */
.ckn-content-body .page-link {
    color: var(--ink);
    border-color: var(--bd);
    border-radius: var(--r-xs);
}
.ckn-content-body .page-link:hover { background: var(--bg); color: var(--ink); }
.ckn-content-body .page-link:focus { box-shadow: 0 0 0 1px var(--ink); }
.ckn-content-body .page-item.active .page-link {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.ckn-content-body .page-item.disabled .page-link { opacity: .45; }

/* ---------------------------------------------------------------- forms
 *
 * Checkbox and radio fills are Bootstrap blue by default; `accent-color` retones the native
 * control in one property. Validation borrows --err rather than Bootstrap's #dc3545, which is
 * a different red from the one §2 fixes.
 */
.ckn-content-body .form-label { font-size: .8125rem; font-weight: 500; color: var(--g4); }
.ckn-content-body .form-text  { font-size: .8125rem; color: var(--g4); }

.ckn-content-body .form-check-input { accent-color: var(--ink); }
.ckn-content-body .form-check-input:checked {
    background-color: var(--ink);
    border-color: var(--ink);
}
.ckn-content-body .form-check-input:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
}

.ckn-content-body .form-control::placeholder { color: var(--g3); }
.ckn-content-body .form-control:disabled,
.ckn-content-body .form-select:disabled { background: var(--bg); color: var(--g3); }

.ckn-content-body .form-control.is-invalid,
.ckn-content-body .form-select.is-invalid {
    border-color: var(--err);
    background-image: none;   /* Bootstrap's inline warning glyph; the message below says it */
    box-shadow: none;
}
.ckn-content-body .invalid-feedback { color: var(--err); font-size: .8125rem; }

/* ---------------------------------------------------------------- feedback
 *
 * `.spinner-border` inherits currentColor, which is already --ink inside the content body;
 * only its default 2rem size is off for an inline "loading" next to a control.
 */
.ckn-content-body .spinner-border { border-width: 2px; }
.ckn-content-body .progress { height: .5rem; background: var(--bg); border-radius: var(--r-full); }
.ckn-content-body .progress-bar { background-color: var(--ink); }

/* ---------------------------------------------------------------- modal
 *
 * Bootstrap owns the modal's behaviour (this is why its JS is loaded at all); the bridge only
 * corrects the chrome. Scoped on its own rather than under `.ckn-content-body` because the
 * modal is portalled to <body> and leaves that subtree.
 */
.modal-content { border-radius: var(--r-lg); border: 1px solid var(--bd); }
.modal-header,
.modal-footer { border-color: var(--bd); }
.modal-title { font-size: 1rem; font-weight: 600; color: var(--ink); }
/* Real declarations, not `--bs-btn-*`: see the note on `.btn-primary` above — the vendored
   Bootstrap 5.0.2 does not read those variables. */
.modal .btn-primary {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #ffffff;
}
.modal .btn-primary:hover,
.modal .btn-primary:focus,
.modal .btn-primary:active {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}
.modal .btn-danger {
    background-color: var(--err);
    border-color: var(--err);
    color: #ffffff;
}