/* =====================================================================================================
   Flashkey back-office theme (design layer v2)

   Loaded by index.html after every other stylesheet. Same visual language as the consents panel
   (consents.css, cp-* classes). Rules:
   - every global restyle of Bootstrap/legacy markup is scoped under body.fk (index.html only);
   - shared components are fk-* classes defined here: page stylesheets (fk-pages-*.css) use them and
     never redefine them;
   - no web fonts (on-premise servers may be offline).

   Contents
     1. Tokens
     2. Base
     3. Shell: top bar, user menu, main offset, section tabs, footer
     4. Layout: page container, page header
     5. Components: card, collapsible item, badge, key/value, code, KPI, segmented tabs, toolbar,
        search, chips, empty state, modal, helpers
     6. Bootstrap restyle: buttons, forms, cards, tables, badges, alerts, modals, nav-tabs,
        pagination, dropdowns, list groups, utilities
     7. Third-party widgets: jQuery UI datepicker, summernote, loading bar, snackbar
     8. Responsive
   ===================================================================================================== */


/* -----------------------------------------------------------------------------------------------------
   1. Tokens
   ----------------------------------------------------------------------------------------------------- */
:root {
    --fk-ink: #1d2433;          /* text */
    --fk-ink-2: #3a4356;        /* secondary text, labels */
    --fk-muted: #6b7385;        /* hints, meta */
    --fk-line: #e4e7ee;         /* borders */
    --fk-line-2: #d5dae4;       /* input borders */
    --fk-soft: #f5f7fb;         /* soft fills, hover */
    --fk-bg: #f3f5f9;           /* page background */
    --fk-surface: #ffffff;
    --fk-accent: #1f3864;       /* primary (navy, as the consents panel) */
    --fk-accent-2: #2b4a80;     /* hover */
    --fk-accent-3: #172a4b;     /* pressed */
    --fk-accent-soft: #e8edf6;  /* selected / focus ring fill */
    --fk-accent-light: #8fa9d6; /* accents on the dark top bar */
    --fk-header: #0f141d;       /* top bar (brand stays dark, white logo) */

    --fk-ok: #2e9e4f;     --fk-ok-bg: #e7f5ec;     --fk-ok-ink: #1d6b35;
    --fk-warn: #e2b300;   --fk-warn-bg: #fff7d9;   --fk-warn-ink: #7d5c00;
    --fk-orange: #f07c00; --fk-orange-bg: #ffeedd; --fk-orange-ink: #9a4700;
    --fk-bad: #d93025;    --fk-bad-bg: #fde4e2;    --fk-bad-ink: #a51f17;
    --fk-info: #2f6f9f;   --fk-info-bg: #e6f0f8;   --fk-info-ink: #1f4f75;
    --fk-neutral: #8a94a6; --fk-neutral-bg: #eef1f6; --fk-neutral-ink: #4a5468;

    --fk-r-sm: 8px;
    --fk-r: 12px;
    --fk-r-pill: 999px;
    --fk-shadow-1: 0 1px 2px rgba(20, 30, 60, .05);
    --fk-shadow-2: 0 8px 24px rgba(20, 30, 60, .12);
    --fk-ring: 0 0 0 3px var(--fk-accent-soft);

    --fk-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --fk-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, "Courier New", monospace;

    /* Shell geometry: the fixed top bar and the sticky section tabs under it */
    --fk-topbar-h: 56px;
    --fk-sectabs-h: 44px;
}


/* -----------------------------------------------------------------------------------------------------
   2. Base
   Body is a flex column (min-height 100vh): the footer sits at the bottom of short pages.
   Element defaults use :where() so they keep the specificity of a bare element selector and every
   Bootstrap class still wins over them.
   ----------------------------------------------------------------------------------------------------- */
body.fk {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--fk-font);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--fk-ink);
    background-color: var(--fk-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:where(body.fk) a {
    color: var(--fk-accent);
}

:where(body.fk) a:hover {
    color: var(--fk-accent-2);
}

/* Links inside running text: the navy accent alone is too close to the ink colour, an underline
   marks them (links used as controls, e.g. sort headers in grid rows, are not in these contexts) */
:where(body.fk) :where(p, label, small, .alert, .form-text, .card-text) > a:where(:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge)) {
    text-decoration: underline;
    text-decoration-color: rgba(31, 56, 100, .35);
    text-underline-offset: 2px;
}

/* Headings inherit the ink colour (so they stay white inside dark legacy headers) */
:where(body.fk) h4,
:where(body.fk) h5,
:where(body.fk) h6,
:where(body.fk) .h4,
:where(body.fk) .h5,
:where(body.fk) .h6 {
    font-weight: 600;
}

/* Images never wider than their box (e.g. the login logo, 70px tall, is wider than a phone) */
:where(body.fk) .fk-main img {
    max-width: 100%;
    object-fit: contain;
}

:where(body.fk) hr {
    border-top-color: var(--fk-line);
}

:where(body.fk) code {
    color: var(--fk-bad-ink);
}

/* Fallback for the legacy page titles (h3.display-4): replaced by .fk-page-title in the page step */
body.fk .display-4 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}

body.fk ::selection {
    background: var(--fk-accent-soft);
    color: var(--fk-ink);
}


/* -----------------------------------------------------------------------------------------------------
   3. Shell
   ----------------------------------------------------------------------------------------------------- */

/* 3.1 Top bar ------------------------------------------------------------------------------------- */
body.fk .fk-topbar {
    min-height: var(--fk-topbar-h);
    padding: 0 16px;
    background-color: var(--fk-header);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 2px 8px rgba(10, 15, 25, .18);
}

body.fk .fk-brand {
    display: flex;
    align-items: center;
    height: var(--fk-topbar-h);
    padding: 0;
    margin-right: 12px;
}

body.fk .fk-brand img {
    height: 28px;
    width: auto;
}

/* TEST environment badge */
body.fk .fk-env-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--fk-r-pill);
    background: var(--fk-bad);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
}

body.fk .fk-topbar .navbar-toggler {
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--fk-r-sm);
    font-size: 1.1rem;
}

body.fk .fk-topbar .navbar-toggler:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(143, 169, 214, .35);
}

/* Main navigation */
body.fk .fk-topbar .navbar-nav .nav-link {
    position: relative;
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
    font-weight: 500;
}

body.fk .fk-topbar .navbar-nav .nav-link:hover,
body.fk .fk-topbar .navbar-nav .nav-link:focus {
    color: #fff;
}

body.fk .fk-topbar .navbar-nav .active > .nav-link {
    color: #fff;
}

body.fk .fk-topbar .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--fk-accent-light);
    outline-offset: -2px;
    border-radius: var(--fk-r-sm);
}

/* Login button (logged out) */
body.fk .fk-topbar .fk-login {
    background: #fff;
    border-color: #fff;
    color: var(--fk-ink);
    border-radius: var(--fk-r-pill);
    padding: 5px 14px;
}

/* 3.2 User menu: compact pill + dropdown ---------------------------------------------------------- */
body.fk .fk-usermenu {
    position: relative;
}

body.fk .fk-usermenu #userMenuDropdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--fk-r-pill);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.4;
}

body.fk .fk-usermenu #userMenuDropdown:hover,
body.fk .fk-usermenu.show #userMenuDropdown {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .24);
}

body.fk .fk-usermenu #userMenuDropdown:focus {
    box-shadow: 0 0 0 3px rgba(143, 169, 214, .35);
}

body.fk .fk-usermenu #userMenuDropdown .fa-user-circle {
    font-size: 1.15em;
    margin: 0;
    opacity: .9;
}

body.fk .fk-usermenu #userMenuDropdown::after {
    margin-left: 2px;
    opacity: .8;
}

/* Rules moved from the inline <style> of index.html ("Custom Styles for User Menu"), scoped to the
   user menu: unscoped they forced every .dropdown-menu of the app (summernote toolbars included) to
   right:0. !important stays where it was, to beat the inline styles the dropdown fix script in
   index.html writes on open. */
body.fk .fk-usermenu.dropdown {
    z-index: 2000;
}

body.fk .fk-usermenu .dropdown-menu {
    position: absolute !important;
    top: 100%;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    z-index: 2001 !important;
    min-width: 220px;
    max-width: 280px;
    margin-top: 8px;
    padding: 6px;
}

body.fk .fk-usermenu .dropdown-header {
    padding: 8px 10px 6px;
    color: var(--fk-muted);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.fk .fk-usermenu .dropdown-item {
    padding: 8px 10px;
    font-size: .875rem;
    white-space: nowrap;
}

body.fk .fk-usermenu .dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
}

body.fk .fk-usermenu .dropdown-divider {
    margin: 4px 0;
}

/* 3.3 Main: offset under the fixed top bar ------------------------------------------------------- */
body.fk .fk-main {
    flex: 1 0 auto;
    min-width: 0;
    padding-top: var(--fk-topbar-h);
    padding-bottom: 48px;
    /* clips (no scroll container, the sticky tabs keep working) */
    overflow-x: clip;
}

/* /form hides the top bar (headerHidden): no offset */
body.fk .fk-header.ng-hide ~ .fk-main {
    padding-top: 0;
}

/* Legacy view wrappers ("features-area > container ... pt-5"): their 48px top padding made room for the
   old fixed grey sub-nav; the shell now provides that offset. Matches only markup the page step has
   not converted yet. */
body.fk .fk-main .features-area > .container.pt-5,
body.fk .fk-main .features-area > .container-fluid.pt-5 {
    padding-top: 16px !important;
}

/* 3.4 Section tabs: sticky white bar under the top bar, in the flow of main (it pushes the view down
   by its own height only when it is shown) ------------------------------------------------------- */
body.fk .fk-sectabs {
    position: -webkit-sticky;
    position: sticky;
    top: var(--fk-topbar-h);
    z-index: 1020;
    height: var(--fk-sectabs-h);
    background: var(--fk-surface);
    border-bottom: 1px solid var(--fk-line);
}

body.fk .fk-sectabs-inner {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

body.fk .fk-sectabs-inner::-webkit-scrollbar {
    display: none;
}

body.fk .fk-sectab {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 12px;
    color: var(--fk-muted);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

body.fk .fk-sectab:first-child {
    margin-left: -12px;
}

body.fk .fk-sectab:hover {
    color: var(--fk-ink);
    text-decoration: none;
}

body.fk .fk-sectab.active {
    color: var(--fk-ink);
}

body.fk .fk-sectab.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--fk-accent);
}

body.fk .fk-sectab:focus-visible {
    outline: 2px solid var(--fk-accent);
    outline-offset: -4px;
    border-radius: var(--fk-r-sm);
}

/* 3.5 Footer ------------------------------------------------------------------------------------- */
body.fk .fk-footer {
    flex-shrink: 0;
    padding: 14px 0;
    background: var(--fk-surface);
    border-top: 1px solid var(--fk-line);
    color: var(--fk-muted);
    font-size: .8rem;
}

body.fk .fk-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
}

body.fk .fk-footer-inner > * {
    margin: 0;
    padding: 0 14px;
    border-left: 1px solid var(--fk-line);
    line-height: 1.4;
}

body.fk .fk-footer-inner > :first-child {
    padding-left: 0;
    border-left: 0;
}

body.fk .fk-footer a {
    color: var(--fk-ink-2);
    text-decoration: none;
}

body.fk .fk-footer a:hover {
    color: var(--fk-accent);
}

body.fk .fk-footer-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

body.fk .fk-footer-lang img {
    height: 16px;
    width: auto;
    border-radius: 50%;
}

body.fk .fk-footer-version {
    font-variant-numeric: tabular-nums;
}

/* ADMIN only: Hangfire dashboard */
body.fk .fk-footer .fk-footer-ops {
    margin-left: auto;
    border-left: 0;
    padding-right: 0;
    color: var(--fk-muted);
    opacity: .7;
    font-size: .9rem;
}

body.fk .fk-footer .fk-footer-ops:hover {
    opacity: 1;
    color: var(--fk-ink);
}


/* -----------------------------------------------------------------------------------------------------
   4. Layout
   ----------------------------------------------------------------------------------------------------- */

/* Page container: replaces the views' "container p-0 pt-5" wrappers */
body.fk .fk-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Page header: title (+ subtitle) on the left, actions on the right */
body.fk .fk-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 24px 0 16px;
}

body.fk .fk-page-title {
    margin: 0;
    color: var(--fk-ink);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}

body.fk .fk-page-sub {
    margin-top: 2px;
    color: var(--fk-muted);
    font-size: .85rem;
}

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


/* -----------------------------------------------------------------------------------------------------
   5. Components
   ----------------------------------------------------------------------------------------------------- */

/* 5.1 Card --------------------------------------------------------------------------------------- */
body.fk .fk-card {
    min-width: 0;
    margin-bottom: 16px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r);
    box-shadow: var(--fk-shadow-1);
}

body.fk .fk-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--fk-line);
}

body.fk .fk-card-title {
    margin: 0;
    color: var(--fk-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

body.fk .fk-card-body {
    padding: 16px;
}

body.fk .fk-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    background: var(--fk-soft);
    border-top: 1px solid var(--fk-line);
    border-radius: 0 0 var(--fk-r) var(--fk-r);
}

/* Section label (small caps) */
body.fk .fk-label-caps {
    color: var(--fk-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* 5.2 Collapsible list item (projects, policies, conditions, users...) ---------------------------
   <div class="fk-item">
     <button class="fk-item-head collapsed" data-toggle="collapse" data-target="#x" aria-expanded="false">
       <span class="fk-item-main"><span class="fk-item-title">..</span><span class="fk-item-meta">..</span></span>
       <span class="fk-item-aside"><span class="fk-badge is-ok">..</span><i class="fa fa-chevron-down fk-chevron"></i></span>
     </button>
     <div id="x" class="collapse" data-parent="#accordion"><div class="fk-item-body">..</div></div>
   </div>
   The chevron turns when the head has aria-expanded="true" and not .collapsed (Bootstrap keeps both
   in sync once the item has been toggled; a head that starts closed should carry class "collapsed"). */
body.fk .fk-item {
    margin-bottom: 10px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r);
    box-shadow: var(--fk-shadow-1);
}

body.fk .fk-item-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    background: var(--fk-surface);
    border: 0;
    border-radius: var(--fk-r);
    color: var(--fk-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

body.fk .fk-item-head:hover {
    background: var(--fk-soft);
}

body.fk .fk-item-head:focus {
    outline: none;
}

body.fk .fk-item-head:focus-visible {
    box-shadow: inset 0 0 0 2px var(--fk-accent);
}

body.fk .fk-item-head[aria-expanded="true"]:not(.collapsed) {
    border-radius: var(--fk-r) var(--fk-r) 0 0;
}

body.fk .fk-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

body.fk .fk-item-title {
    display: block;
    margin: 0;
    color: var(--fk-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body.fk .fk-item-meta {
    display: block;
    margin-top: 1px;
    color: var(--fk-muted);
    font-size: .82rem;
}

body.fk .fk-item-aside {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

body.fk .fk-chevron {
    flex: 0 0 auto;
    color: var(--fk-muted);
    font-size: .85rem;
    transition: transform .2s ease;
}

body.fk .fk-item-head[aria-expanded="true"]:not(.collapsed) .fk-chevron {
    transform: rotate(180deg);
}

/* Legacy fa-plus toggle icon kept inside a restyled head */
body.fk .fk-item-head .fa-plus {
    color: var(--fk-muted);
}

body.fk .fk-item-body {
    padding: 16px;
    border-top: 1px solid var(--fk-line);
}

/* 5.3 Badges ------------------------------------------------------------------------------------- */
body.fk .fk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--fk-r-pill);
    background: var(--fk-neutral-bg);
    color: var(--fk-neutral-ink);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

body.fk .fk-badge.is-ok      { background: var(--fk-ok-bg);      color: var(--fk-ok-ink); }
body.fk .fk-badge.is-warn    { background: var(--fk-warn-bg);    color: var(--fk-warn-ink); }
body.fk .fk-badge.is-orange  { background: var(--fk-orange-bg);  color: var(--fk-orange-ink); }
body.fk .fk-badge.is-bad     { background: var(--fk-bad-bg);     color: var(--fk-bad-ink); }
body.fk .fk-badge.is-info    { background: var(--fk-info-bg);    color: var(--fk-info-ink); }
body.fk .fk-badge.is-neutral { background: var(--fk-neutral-bg); color: var(--fk-neutral-ink); }
body.fk .fk-badge.is-accent  { background: var(--fk-accent-soft); color: var(--fk-accent); }

/* Status dot, inside a badge or a chip (or alone) */
body.fk .fk-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fk-neutral);
}

body.fk .fk-badge .fk-dot { width: 7px; height: 7px; }
body.fk .is-ok > .fk-dot,     body.fk .fk-dot.is-ok     { background: var(--fk-ok); }
body.fk .is-warn > .fk-dot,   body.fk .fk-dot.is-warn   { background: var(--fk-warn); }
body.fk .is-orange > .fk-dot, body.fk .fk-dot.is-orange { background: var(--fk-orange); }
body.fk .is-bad > .fk-dot,    body.fk .fk-dot.is-bad    { background: var(--fk-bad); }
body.fk .is-info > .fk-dot,   body.fk .fk-dot.is-info   { background: var(--fk-info); }
body.fk .is-accent > .fk-dot, body.fk .fk-dot.is-accent { background: var(--fk-accent); }

/* 5.4 Key / value (read-only details) ------------------------------------------------------------ */
body.fk .fk-kv {
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
    gap: 10px 24px;
    align-items: baseline;
    margin: 0;
}

body.fk .fk-kv-k {
    margin: 0;
    color: var(--fk-muted);
    font-size: .8rem;
    font-weight: 600;
}

body.fk .fk-kv-v {
    min-width: 0;
    margin: 0;
    color: var(--fk-ink);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 5.5 Code / tokens ------------------------------------------------------------------------------ */
body.fk .fk-code {
    display: inline-block;
    max-width: 100%;
    padding: 6px 10px;
    background: var(--fk-soft);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-sm);
    color: var(--fk-ink);
    font-family: var(--fk-mono);
    font-size: .82rem;
    line-height: 1.45;
    word-break: break-all;
    vertical-align: middle;
}

/* "Do not disclose" secrets keep a danger emphasis */
body.fk .fk-code.is-secret {
    background: var(--fk-bad-bg);
    border-color: transparent;
    border-left: 3px solid var(--fk-bad);
    color: var(--fk-bad-ink);
}

/* 5.6 KPI tiles (same as .cp-kpi*) -------------------------------------------------------------- */
body.fk .fk-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

body.fk .fk-kpi {
    min-width: 0;
    padding: 14px 16px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r);
}

body.fk .fk-kpi-label {
    color: var(--fk-muted);
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.fk .fk-kpi-value {
    margin-top: 4px;
    color: var(--fk-ink);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

body.fk .fk-kpi-note {
    color: var(--fk-muted);
    font-size: .78rem;
}

body.fk .fk-kpi.is-ok .fk-kpi-value     { color: var(--fk-ok-ink); }
body.fk .fk-kpi.is-warn .fk-kpi-value   { color: var(--fk-warn-ink); }
body.fk .fk-kpi.is-orange .fk-kpi-value { color: var(--fk-orange-ink); }
body.fk .fk-kpi.is-bad .fk-kpi-value    { color: var(--fk-bad-ink); }
body.fk .fk-kpi.is-accent .fk-kpi-value { color: var(--fk-accent); }

/* 5.7 Segmented tabs (same as .cp-tabs): buttons or links, .active is the selected one ----------- */
body.fk .fk-tabs {
    display: inline-flex;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    overflow-x: auto;
    background: var(--fk-soft);
    border: 1px solid var(--fk-line);
    border-radius: 10px;
    scrollbar-width: none;
}

body.fk .fk-tabs::-webkit-scrollbar {
    display: none;
}

body.fk .fk-tabs > button,
body.fk .fk-tabs > a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: transparent;
    border: 0;
    border-radius: var(--fk-r-sm);
    color: var(--fk-muted);
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

body.fk .fk-tabs > button:hover,
body.fk .fk-tabs > a:hover {
    color: var(--fk-ink);
}

body.fk .fk-tabs > .active {
    background: var(--fk-surface);
    color: var(--fk-ink);
    box-shadow: 0 1px 3px rgba(20, 30, 60, .12);
}

body.fk .fk-tabs > button:focus,
body.fk .fk-tabs > a:focus {
    outline: none;
}

body.fk .fk-tabs > button:focus-visible,
body.fk .fk-tabs > a:focus-visible {
    outline: 2px solid var(--fk-accent);
    outline-offset: 1px;
}

/* 5.8 Toolbar, search, chips (same as .cp-toolbar / .cp-search / .cp-chip) ---------------------- */
body.fk .fk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

body.fk .fk-toolbar select.form-control,
body.fk .fk-toolbar .custom-select {
    width: auto;
    max-width: 260px;
}

body.fk .fk-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 420px;
}

body.fk .fk-search > i,
body.fk .fk-search > .fa {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--fk-muted);
    pointer-events: none;
}

body.fk .fk-search .form-control,
body.fk .fk-search input {
    padding-left: 34px;
}

body.fk .fk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

body.fk .fk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-pill);
    color: var(--fk-ink);
    font-size: .8rem;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
}

body.fk .fk-chip:hover {
    border-color: var(--fk-line-2);
    color: var(--fk-ink);
    text-decoration: none;
}

body.fk .fk-chip .fk-count {
    color: var(--fk-muted);
    font-variant-numeric: tabular-nums;
}

body.fk .fk-chip.active {
    border-color: var(--fk-ink);
    box-shadow: inset 0 0 0 1px var(--fk-ink);
}

body.fk .fk-chip.active .fk-count {
    color: var(--fk-ink);
}

body.fk .fk-chip:focus {
    outline: none;
}

body.fk .fk-chip:focus-visible {
    outline: 2px solid var(--fk-accent);
    outline-offset: 2px;
}

/* 5.9 Empty state -------------------------------------------------------------------------------- */
body.fk .fk-empty {
    padding: 32px 12px;
    color: var(--fk-muted);
    text-align: center;
}

body.fk .fk-empty > i,
body.fk .fk-empty > .fa {
    display: block;
    margin-bottom: 8px;
    font-size: 1.6rem;
    opacity: .6;
}

/* 5.10 uib modal templates (bare container-fluid + h2): put .fk-modal on the container ------------ */
body.fk .fk-modal {
    padding: 20px;
}

body.fk .fk-modal > h2,
body.fk .fk-modal .fk-modal-title {
    margin: 0 0 16px;
    color: var(--fk-ink);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
}

body.fk .fk-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fk-line);
}

/* 5.11 Helpers ----------------------------------------------------------------------------------- */
body.fk .fk-hint {
    margin-top: 3px;
    color: var(--fk-muted);
    font-size: .78rem;
}

body.fk .fk-num {
    font-variant-numeric: tabular-nums;
}


/* -----------------------------------------------------------------------------------------------------
   6. Bootstrap restyle (untouched markup already follows the theme)
   ----------------------------------------------------------------------------------------------------- */

/* 6.1 Buttons ------------------------------------------------------------------------------------ */
:where(body.fk) .btn {
    padding: 6px 14px;
    border-radius: var(--fk-r-sm);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5;
}

:where(body.fk) .btn-sm,
:where(body.fk) .btn-group-sm > .btn {
    padding: 4px 10px;
    border-radius: var(--fk-r-sm);
    font-size: .8rem;
}

:where(body.fk) .btn-lg,
:where(body.fk) .btn-group-lg > .btn {
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 1rem;
}

:where(body.fk) .btn:focus,
:where(body.fk) .btn.focus {
    box-shadow: var(--fk-ring);
}

:where(body.fk) .btn.disabled,
:where(body.fk) .btn:disabled {
    opacity: .55;
}

/* Primary: accent */
:where(body.fk) .btn-primary {
    background-color: var(--fk-accent);
    border-color: var(--fk-accent);
    color: #fff;
}

:where(body.fk) .btn-primary:hover {
    background-color: var(--fk-accent-2);
    border-color: var(--fk-accent-2);
    color: #fff;
}

:where(body.fk) .btn-primary:not(:disabled):not(.disabled):active,
:where(body.fk) .btn-primary:not(:disabled):not(.disabled).active,
:where(body.fk) .show > .btn-primary.dropdown-toggle {
    background-color: var(--fk-accent-3);
    border-color: var(--fk-accent-3);
    color: #fff;
}

:where(body.fk) .btn-primary.disabled,
:where(body.fk) .btn-primary:disabled {
    background-color: var(--fk-accent);
    border-color: var(--fk-accent);
    color: #fff;
}

:where(body.fk) .btn-primary:focus,
:where(body.fk) .btn-primary.focus,
:where(body.fk) .btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 3px rgba(31, 56, 100, .25);
}

/* Secondary actions: white with a line border */
:where(body.fk) .btn-secondary,
:where(body.fk) .btn-light,
:where(body.fk) .btn-default {
    background-color: var(--fk-surface);
    border-color: var(--fk-line-2);
    color: var(--fk-ink);
}

:where(body.fk) .btn-secondary:hover,
:where(body.fk) .btn-light:hover,
:where(body.fk) .btn-default:hover {
    background-color: var(--fk-soft);
    border-color: #c3cad6;
    color: var(--fk-ink);
}

:where(body.fk) .btn-secondary:not(:disabled):not(.disabled):active,
:where(body.fk) .btn-secondary:not(:disabled):not(.disabled).active,
:where(body.fk) .btn-light:not(:disabled):not(.disabled):active,
:where(body.fk) .btn-light:not(:disabled):not(.disabled).active,
:where(body.fk) .btn-default:not(:disabled):not(.disabled):active,
:where(body.fk) .btn-default:not(:disabled):not(.disabled).active,
:where(body.fk) .show > .btn-secondary.dropdown-toggle,
:where(body.fk) .show > .btn-light.dropdown-toggle {
    background-color: #eceff5;
    border-color: #c3cad6;
    color: var(--fk-ink);
}

:where(body.fk) .btn-secondary.disabled,
:where(body.fk) .btn-secondary:disabled,
:where(body.fk) .btn-light.disabled,
:where(body.fk) .btn-light:disabled {
    background-color: var(--fk-surface);
    border-color: var(--fk-line-2);
    color: var(--fk-ink);
}

:where(body.fk) .btn-secondary:focus,
:where(body.fk) .btn-light:focus,
:where(body.fk) .btn-default:focus,
:where(body.fk) .btn-secondary:not(:disabled):not(.disabled):active:focus,
:where(body.fk) .btn-light:not(:disabled):not(.disabled):active:focus {
    box-shadow: var(--fk-ring);
}

/* Dark: ink */
:where(body.fk) .btn-dark {
    background-color: var(--fk-ink);
    border-color: var(--fk-ink);
    color: #fff;
}

:where(body.fk) .btn-dark:hover,
:where(body.fk) .btn-dark:not(:disabled):not(.disabled):active,
:where(body.fk) .btn-dark:not(:disabled):not(.disabled).active {
    background-color: #2b3447;
    border-color: #2b3447;
    color: #fff;
}

:where(body.fk) .btn-dark:focus,
:where(body.fk) .btn-dark:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 3px rgba(29, 36, 51, .2);
}

/* Info: accent outline */
:where(body.fk) .btn-info {
    background-color: var(--fk-surface);
    border-color: var(--fk-accent);
    color: var(--fk-accent);
}

:where(body.fk) .btn-info:hover,
:where(body.fk) .btn-info:not(:disabled):not(.disabled):active,
:where(body.fk) .btn-info:not(:disabled):not(.disabled).active {
    background-color: var(--fk-accent-soft);
    border-color: var(--fk-accent);
    color: var(--fk-accent);
}

:where(body.fk) .btn-info.disabled,
:where(body.fk) .btn-info:disabled {
    background-color: var(--fk-surface);
    border-color: var(--fk-accent);
    color: var(--fk-accent);
}

:where(body.fk) .btn-info:focus,
:where(body.fk) .btn-info:not(:disabled):not(.disabled):active:focus {
    box-shadow: var(--fk-ring);
}

/* Danger / success / warning */
:where(body.fk) .btn-danger {
    background-color: var(--fk-bad);
    border-color: var(--fk-bad);
    color: #fff;
}

:where(body.fk) .btn-danger:hover,
:where(body.fk) .btn-danger:not(:disabled):not(.disabled):active,
:where(body.fk) .btn-danger:not(:disabled):not(.disabled).active {
    background-color: #b9271e;
    border-color: #b9271e;
    color: #fff;
}

:where(body.fk) .btn-danger:focus,
:where(body.fk) .btn-danger:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 3px rgba(217, 48, 37, .2);
}

:where(body.fk) .btn-success {
    background-color: var(--fk-ok);
    border-color: var(--fk-ok);
    color: #fff;
}

:where(body.fk) .btn-success:hover,
:where(body.fk) .btn-success:not(:disabled):not(.disabled):active,
:where(body.fk) .btn-success:not(:disabled):not(.disabled).active {
    background-color: #278843;
    border-color: #278843;
    color: #fff;
}

:where(body.fk) .btn-success:focus,
:where(body.fk) .btn-success:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 3px rgba(46, 158, 79, .2);
}

:where(body.fk) .btn-warning {
    background-color: var(--fk-warn);
    border-color: var(--fk-warn);
    color: #3d2e00;
}

:where(body.fk) .btn-warning:hover,
:where(body.fk) .btn-warning:not(:disabled):not(.disabled):active {
    background-color: #c99f00;
    border-color: #c99f00;
    color: #2b2000;
}

:where(body.fk) .btn-warning:focus {
    box-shadow: 0 0 0 3px rgba(226, 179, 0, .25);
}

/* Outline variants */
:where(body.fk) .btn-outline-primary {
    border-color: var(--fk-accent);
    color: var(--fk-accent);
}

:where(body.fk) .btn-outline-primary:hover,
:where(body.fk) .btn-outline-primary:not(:disabled):not(.disabled):active,
:where(body.fk) .btn-outline-primary:not(:disabled):not(.disabled).active {
    background-color: var(--fk-accent);
    border-color: var(--fk-accent);
    color: #fff;
}

:where(body.fk) .btn-outline-secondary,
:where(body.fk) .btn-outline-dark,
:where(body.fk) .btn-outline-light {
    border-color: var(--fk-line-2);
    color: var(--fk-ink-2);
}

:where(body.fk) .btn-outline-secondary:hover,
:where(body.fk) .btn-outline-dark:hover,
:where(body.fk) .btn-outline-light:hover,
:where(body.fk) .btn-outline-secondary:not(:disabled):not(.disabled):active,
:where(body.fk) .btn-outline-dark:not(:disabled):not(.disabled):active,
:where(body.fk) .btn-outline-light:not(:disabled):not(.disabled):active {
    background-color: var(--fk-soft);
    border-color: #c3cad6;
    color: var(--fk-ink);
}

:where(body.fk) .btn-outline-info {
    border-color: var(--fk-info);
    color: var(--fk-info);
}

:where(body.fk) .btn-outline-info:hover,
:where(body.fk) .btn-outline-info:not(:disabled):not(.disabled):active {
    background-color: var(--fk-info-bg);
    border-color: var(--fk-info);
    color: var(--fk-info-ink);
}

:where(body.fk) .btn-outline-danger {
    border-color: var(--fk-bad);
    color: var(--fk-bad);
}

:where(body.fk) .btn-outline-danger:hover,
:where(body.fk) .btn-outline-danger:not(:disabled):not(.disabled):active {
    background-color: var(--fk-bad);
    border-color: var(--fk-bad);
    color: #fff;
}

:where(body.fk) .btn-outline-success {
    border-color: var(--fk-ok);
    color: var(--fk-ok-ink);
}

:where(body.fk) .btn-outline-success:hover,
:where(body.fk) .btn-outline-success:not(:disabled):not(.disabled):active {
    background-color: var(--fk-ok);
    border-color: var(--fk-ok);
    color: #fff;
}

:where(body.fk) .btn-outline-warning {
    border-color: var(--fk-warn);
    color: var(--fk-warn-ink);
}

:where(body.fk) .btn-outline-warning:hover,
:where(body.fk) .btn-outline-warning:not(:disabled):not(.disabled):active {
    background-color: var(--fk-warn-bg);
    border-color: var(--fk-warn);
    color: var(--fk-warn-ink);
}

:where(body.fk) [class*="btn-outline-"]:focus {
    box-shadow: var(--fk-ring);
}

:where(body.fk) .btn-link {
    color: var(--fk-accent);
}

:where(body.fk) .btn-link:hover {
    color: var(--fk-accent-2);
}

/* Legacy combos: "btn ... border border-dark [rounded]" is a secondary action, "btn bg-black/bg-dark
   text-white" a primary one. !important only where a Bootstrap utility (itself !important) is beaten. */
:where(body.fk) .btn.border-dark {
    border-color: var(--fk-line-2) !important;
}

:where(body.fk) .btn.border-dark:not(.btn-primary):not(.btn-info):not(.btn-danger):not(.btn-success):not(.btn-dark):not(.btn-warning) {
    background-color: var(--fk-surface);
    color: var(--fk-ink);
}

:where(body.fk) .btn.border-dark:not(.btn-primary):not(.btn-info):not(.btn-danger):not(.btn-success):not(.btn-dark):not(.btn-warning):hover {
    background-color: var(--fk-soft);
    border-color: #c3cad6 !important;
}

:where(body.fk) .btn-primary.border-dark,
:where(body.fk) .btn-info.border-dark { border-color: var(--fk-accent) !important; }
:where(body.fk) .btn-danger.border-dark { border-color: var(--fk-bad) !important; }
:where(body.fk) .btn-success.border-dark { border-color: var(--fk-ok) !important; }
:where(body.fk) .btn-dark.border-dark { border-color: var(--fk-ink) !important; }
:where(body.fk) .btn-warning.border-dark { border-color: var(--fk-warn) !important; }

:where(body.fk) .btn.rounded {
    border-radius: var(--fk-r-sm) !important;
}

:where(body.fk) .btn.bg-black,
:where(body.fk) .btn.bg-dark {
    background-color: var(--fk-accent) !important;
    border-color: var(--fk-accent);
    color: #fff;
}

:where(body.fk) .btn.bg-black:hover,
:where(body.fk) .btn.bg-dark:hover {
    background-color: var(--fk-accent-2) !important;
    border-color: var(--fk-accent-2);
}

/* 6.2 Forms -------------------------------------------------------------------------------------- */
:where(body.fk) .form-control,
:where(body.fk) .custom-select {
    height: 38px;
    padding: 6px 12px;
    background-color: var(--fk-surface);
    border: 1px solid var(--fk-line-2);
    border-radius: var(--fk-r-sm);
    color: var(--fk-ink);
    font-size: .9375rem;
    line-height: 1.5;
}

:where(body.fk) .custom-select {
    padding-right: 32px;
}

:where(body.fk) textarea.form-control,
:where(body.fk) select.form-control[multiple],
:where(body.fk) select.form-control[size],
:where(body.fk) .form-control-plaintext {
    height: auto;
}

:where(body.fk) .form-control-sm {
    height: 32px;
    padding: 4px 10px;
    font-size: .82rem;
}

:where(body.fk) .form-control-lg {
    height: 46px;
    padding: 8px 14px;
    font-size: 1.05rem;
}

:where(body.fk) .form-control:focus,
:where(body.fk) .custom-select:focus {
    border-color: var(--fk-accent);
    box-shadow: var(--fk-ring);
    color: var(--fk-ink);
}

:where(body.fk) .form-control::placeholder {
    color: #98a0b0;
    opacity: 1;
}

:where(body.fk) .form-control:disabled,
:where(body.fk) .form-control[readonly],
:where(body.fk) .custom-select:disabled {
    background-color: var(--fk-soft);
    color: var(--fk-ink-2);
}

:where(body.fk) .form-control.is-invalid,
:where(body.fk) .was-validated .form-control:invalid {
    border-color: var(--fk-bad);
}

:where(body.fk) .input-group-text {
    background-color: var(--fk-soft);
    border-color: var(--fk-line-2);
    border-radius: var(--fk-r-sm);
    color: var(--fk-ink-2);
    font-size: .875rem;
}

/* Field labels: small, semibold, secondary ink. Labels that wrap a checkbox/radio (or any control),
   form-check/custom-control labels and label.badge keep their own look. */
:where(body.fk) label {
    color: var(--fk-ink-2);
}

:where(body.fk) label:where(:not(.form-check-label):not(.custom-control-label):not(.badge):not(.fk-badge):not(.btn):not(:has(input, select, textarea))) {
    margin-bottom: 4px;
    font-size: .82rem;
    font-weight: 600;
}

:where(body.fk) label.font-weight-bold:where(:not(.badge):not(.fk-badge):not(:has(input, select, textarea))) {
    font-weight: 600 !important;
}

:where(body.fk) .form-text,
:where(body.fk) small.form-text {
    color: var(--fk-muted);
    font-size: .78rem;
}

:where(body.fk) input[type="checkbox"],
:where(body.fk) input[type="radio"] {
    accent-color: var(--fk-accent);
}

:where(body.fk) label > input[type="checkbox"],
:where(body.fk) label > input[type="radio"] {
    vertical-align: -2px;
}

:where(body.fk) .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--fk-accent);
    border-color: var(--fk-accent);
}

:where(body.fk) .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--fk-ring);
}

/* 6.3 Cards -------------------------------------------------------------------------------------- */
:where(body.fk) .card {
    background-color: var(--fk-surface);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r);
    box-shadow: var(--fk-shadow-1);
}

:where(body.fk) .card-header {
    padding: 12px 16px;
    background-color: var(--fk-soft);
    border-bottom: 1px solid var(--fk-line);
    color: var(--fk-ink);
}

:where(body.fk) .card-header:first-child {
    border-radius: calc(var(--fk-r) - 1px) calc(var(--fk-r) - 1px) 0 0;
}

:where(body.fk) .card-footer {
    padding: 12px 16px;
    background-color: var(--fk-soft);
    border-top: 1px solid var(--fk-line);
}

:where(body.fk) .card-footer:last-child {
    border-radius: 0 0 calc(var(--fk-r) - 1px) calc(var(--fk-r) - 1px);
}

:where(body.fk) .card-title {
    color: var(--fk-ink);
    font-weight: 600;
}

/* .card-rounded (nsite.css) is a borderless 15px card: same as the theme card */
:where(body.fk) .card.card-rounded {
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r);
    box-shadow: var(--fk-shadow-1);
}

/* 6.4 Tables ------------------------------------------------------------------------------------- */
:where(body.fk) .table {
    color: var(--fk-ink);
    font-size: .875rem;
}

:where(body.fk) .table th,
:where(body.fk) .table td {
    padding: 10px 12px;
    border-top: 1px solid var(--fk-line);
    vertical-align: middle;
}

:where(body.fk) .table thead th {
    background-color: var(--fk-soft);
    border-top: 0;
    border-bottom: 1px solid var(--fk-line);
    color: var(--fk-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: bottom;
}

:where(body.fk) .table thead th a {
    color: inherit;
}

:where(body.fk) .table tbody + tbody {
    border-top: 1px solid var(--fk-line);
}

:where(body.fk) .table-sm th,
:where(body.fk) .table-sm td {
    padding: 6px 8px;
}

:where(body.fk) .table tbody tr:hover {
    background-color: var(--fk-soft);
}

:where(body.fk) .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(245, 247, 251, .65);
}

:where(body.fk) .table-striped tbody tr:nth-of-type(odd):hover {
    background-color: var(--fk-soft);
}

:where(body.fk) .table-bordered,
:where(body.fk) .table-bordered th,
:where(body.fk) .table-bordered td {
    border-color: var(--fk-line);
}

:where(body.fk) .table .thead-dark th,
:where(body.fk) .table .thead-light th {
    background-color: var(--fk-soft);
    border-color: var(--fk-line);
    color: var(--fk-muted);
}

:where(body.fk) .table-responsive {
    border-radius: var(--fk-r-sm);
}

:where(body.fk) .table td.num,
:where(body.fk) .table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 6.5 Bootstrap badges --------------------------------------------------------------------------- */
:where(body.fk) .badge {
    padding: 3px 10px;
    border-radius: var(--fk-r-pill);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}

:where(body.fk) .badge.badge-success   { background-color: var(--fk-ok-bg);      color: var(--fk-ok-ink); }
:where(body.fk) .badge.badge-warning   { background-color: var(--fk-warn-bg);    color: var(--fk-warn-ink); }
:where(body.fk) .badge.badge-danger    { background-color: var(--fk-bad-bg);     color: var(--fk-bad-ink); }
:where(body.fk) .badge.badge-info      { background-color: var(--fk-info-bg);    color: var(--fk-info-ink); }
:where(body.fk) .badge.badge-primary   { background-color: var(--fk-accent-soft); color: var(--fk-accent); }
:where(body.fk) .badge.badge-secondary,
:where(body.fk) .badge.badge-light     { background-color: var(--fk-neutral-bg); color: var(--fk-neutral-ink); }
:where(body.fk) .badge.badge-dark      { background-color: var(--fk-ink);        color: #fff; }

/* 6.6 Alerts ------------------------------------------------------------------------------------- */
:where(body.fk) .alert {
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: var(--fk-r-sm);
    font-size: .9rem;
}

:where(body.fk) .alert-success   { background-color: var(--fk-ok-bg);      border-color: rgba(46, 158, 79, .25); color: var(--fk-ok-ink); }
:where(body.fk) .alert-warning   { background-color: var(--fk-warn-bg);    border-color: rgba(226, 179, 0, .35); color: var(--fk-warn-ink); }
:where(body.fk) .alert-danger    { background-color: var(--fk-bad-bg);     border-color: rgba(217, 48, 37, .25); color: var(--fk-bad-ink); }
:where(body.fk) .alert-info      { background-color: var(--fk-info-bg);    border-color: rgba(47, 111, 159, .25); color: var(--fk-info-ink); }
:where(body.fk) .alert-primary   { background-color: var(--fk-accent-soft); border-color: rgba(31, 56, 100, .2); color: var(--fk-accent); }
:where(body.fk) .alert-secondary,
:where(body.fk) .alert-light     { background-color: var(--fk-soft);       border-color: var(--fk-line);          color: var(--fk-ink-2); }
:where(body.fk) .alert-dark      { background-color: var(--fk-neutral-bg); border-color: var(--fk-line-2);        color: var(--fk-neutral-ink); }

:where(body.fk) .alert .alert-heading {
    color: inherit;
    font-size: 1rem;
    font-weight: 600;
}

:where(body.fk) .alert hr {
    border-top-color: currentColor;
    opacity: .2;
}

:where(body.fk) .alert .alert-link {
    color: inherit;
}

/* 6.7 Modals ------------------------------------------------------------------------------------- */
:where(body.fk) .modal-content {
    border: 0;
    border-radius: var(--fk-r);
    box-shadow: var(--fk-shadow-2);
}

:where(body.fk) .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--fk-line);
}

:where(body.fk) .modal-title {
    color: var(--fk-ink);
    font-size: 1.15rem;
    font-weight: 600;
}

:where(body.fk) .modal-body {
    padding: 20px;
}

:where(body.fk) .modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--fk-line);
}

:where(body.fk) .modal-backdrop {
    background-color: var(--fk-header);
}

:where(body.fk) .modal-backdrop.show {
    opacity: .45;
}

/* 6.8 Nav tabs: underline tabs, as the section tabs ---------------------------------------------- */
:where(body.fk) .nav-tabs {
    gap: 4px;
    border-bottom: 1px solid var(--fk-line);
}

:where(body.fk) .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--fk-muted);
    font-weight: 500;
}

:where(body.fk) .nav-tabs .nav-link:hover,
:where(body.fk) .nav-tabs .nav-link:focus {
    border-color: transparent;
    color: var(--fk-ink);
}

:where(body.fk) .nav-tabs .nav-link.active,
:where(body.fk) .nav-tabs .nav-item.show .nav-link {
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--fk-accent);
    color: var(--fk-ink);
}

:where(body.fk) .nav-pills .nav-link {
    border-radius: var(--fk-r-sm);
    color: var(--fk-ink-2);
}

:where(body.fk) .nav-pills .nav-link.active,
:where(body.fk) .nav-pills .show > .nav-link {
    background-color: var(--fk-accent);
    color: #fff;
}

/* 6.9 Pagination --------------------------------------------------------------------------------- */
:where(body.fk) .pagination {
    flex-wrap: wrap;
    gap: 4px;
}

:where(body.fk) .pagination .page-item .page-link {
    margin-left: 0;
    padding: 6px 12px;
    background-color: var(--fk-surface);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-sm);
    color: var(--fk-ink-2);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

:where(body.fk) .pagination .page-item .page-link:hover {
    background-color: var(--fk-soft);
    border-color: var(--fk-line-2);
    color: var(--fk-ink);
}

:where(body.fk) .pagination .page-item .page-link:focus {
    box-shadow: var(--fk-ring);
}

:where(body.fk) .pagination .page-item.active .page-link {
    background-color: var(--fk-accent);
    border-color: var(--fk-accent);
    color: #fff;
}

:where(body.fk) .pagination .page-item.disabled .page-link {
    background-color: var(--fk-surface);
    border-color: var(--fk-line);
    color: #b6bcc8;
}

/* 6.10 Dropdowns (all of them; the user menu adds its own positioning in 3.2) --------------------- */
:where(body.fk) .dropdown-menu {
    padding: 6px;
    background-color: var(--fk-surface);
    border: 0;
    border-radius: var(--fk-r);
    box-shadow: var(--fk-shadow-2), 0 0 0 1px rgba(20, 30, 60, .06);
    color: var(--fk-ink);
    font-size: .875rem;
}

/* z-index kept from the rules moved out of index.html: every open menu (summernote toolbars included)
   stays above the fixed top bar and the section tabs, as before */
body.fk .dropdown-menu {
    z-index: 2001 !important;
}

:where(body.fk) .dropdown-item {
    padding: 7px 10px;
    border-radius: var(--fk-r-sm);
    color: var(--fk-ink);
}

:where(body.fk) .dropdown-item:hover,
:where(body.fk) .dropdown-item:focus {
    background-color: var(--fk-soft);
    color: var(--fk-ink);
}

:where(body.fk) .dropdown-item.active,
:where(body.fk) .dropdown-item:active {
    background-color: var(--fk-accent-soft);
    color: var(--fk-accent);
}

:where(body.fk) .dropdown-item.text-danger {
    color: var(--fk-bad) !important;
}

:where(body.fk) .dropdown-item.text-danger:hover,
:where(body.fk) .dropdown-item.text-danger:focus {
    background-color: var(--fk-bad-bg);
}

:where(body.fk) .dropdown-divider {
    border-top-color: var(--fk-line);
}

/* 6.11 List groups ------------------------------------------------------------------------------- */
:where(body.fk) .list-group {
    border-radius: var(--fk-r-sm);
}

:where(body.fk) .list-group-item {
    border-color: var(--fk-line);
}

:where(body.fk) .list-group-item.active {
    background-color: var(--fk-accent);
    border-color: var(--fk-accent);
}

/* 6.12 Utilities mapped on the palette (Bootstrap utilities are !important) ----------------------- */
:where(body.fk) .text-muted { color: var(--fk-muted) !important; }
:where(body.fk) .text-primary { color: var(--fk-accent) !important; }
:where(body.fk) .bg-primary { background-color: var(--fk-accent) !important; }
:where(body.fk) .border-primary { border-color: var(--fk-accent) !important; }
:where(body.fk) .bg-dark { background-color: var(--fk-ink) !important; }
:where(body.fk) .bg-light { background-color: var(--fk-soft) !important; }
:where(body.fk) .border-dark:not(.btn) { border-color: var(--fk-line-2) !important; }
:where(body.fk) .border { border-color: var(--fk-line) !important; }
:where(body.fk) .border-top,
:where(body.fk) .border-bottom,
:where(body.fk) .border-left,
:where(body.fk) .border-right { border-color: var(--fk-line) !important; }
:where(body.fk) .border-success { border-color: var(--fk-ok) !important; }
:where(body.fk) .border-warning { border-color: var(--fk-warn) !important; }
:where(body.fk) .border-danger { border-color: var(--fk-bad) !important; }
:where(body.fk) .rounded:not(.btn):not(.badge) { border-radius: var(--fk-r-sm) !important; }


/* -----------------------------------------------------------------------------------------------------
   7. Third-party widgets: radius/border harmonisation only
   ----------------------------------------------------------------------------------------------------- */

/* jQuery UI datepicker (ui-date) */
:where(body.fk) .ui-datepicker {
    padding: 6px;
    border: 1px solid var(--fk-line) !important;
    border-radius: var(--fk-r);
    box-shadow: var(--fk-shadow-2);
    font-family: var(--fk-font);
    font-size: .85rem;
}

:where(body.fk) .ui-datepicker .ui-datepicker-header {
    background: var(--fk-soft);
    border: 0;
    border-radius: var(--fk-r-sm);
    color: var(--fk-ink);
}

:where(body.fk) .ui-datepicker .ui-state-default {
    border-color: transparent;
    border-radius: 6px;
    background: var(--fk-soft);
    color: var(--fk-ink);
    text-align: center;
}

:where(body.fk) .ui-datepicker .ui-state-highlight {
    border-color: var(--fk-line-2);
    background: var(--fk-surface);
}

:where(body.fk) .ui-datepicker .ui-state-active,
:where(body.fk) .ui-datepicker .ui-state-hover {
    border-color: var(--fk-accent);
    background: var(--fk-accent);
    color: #fff;
}

/* summernote (bs4) */
:where(body.fk) .note-editor.note-frame {
    border: 1px solid var(--fk-line-2);
    border-radius: var(--fk-r-sm);
}

:where(body.fk) .note-editor.note-frame .note-toolbar {
    background: var(--fk-soft);
    border-bottom: 1px solid var(--fk-line);
    border-radius: var(--fk-r-sm) var(--fk-r-sm) 0 0;
}

:where(body.fk) .note-editor.note-frame .note-statusbar {
    background: var(--fk-soft);
    border-top: 1px solid var(--fk-line);
    border-radius: 0 0 var(--fk-r-sm) var(--fk-r-sm);
}

:where(body.fk) .note-editor .note-btn {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: .8rem;
}

:where(body.fk) .note-editor.note-frame.codeview .note-editing-area .note-codable {
    border-radius: 0;
}

/* angular-loading-bar */
:where(body.fk) #loading-bar .bar {
    background: var(--fk-accent-light);
}

:where(body.fk) #loading-bar .peg {
    box-shadow: 0 0 10px var(--fk-accent-light), 0 0 5px var(--fk-accent-light);
}

:where(body.fk) #loading-bar-spinner .spinner-icon {
    border-top-color: var(--fk-accent-light);
    border-left-color: var(--fk-accent-light);
}

/* snackbar messages */
:where(body.fk) #snackbarMessage,
:where(body.fk) #snackbarKOMessage {
    border-radius: var(--fk-r-sm);
    box-shadow: var(--fk-shadow-2);
    font-size: .9rem;
}

:where(body.fk) #snackbarMessage {
    background-color: var(--fk-ink);
}


/* -----------------------------------------------------------------------------------------------------
   8. Responsive
   ----------------------------------------------------------------------------------------------------- */

/* Desktop top bar (navbar-expand-lg): links fill the 56 px bar, active = white + light underline */
@media (min-width: 992px) {
    body.fk .fk-topbar {
        padding: 0 20px;
    }

    body.fk .fk-mainnav {
        align-self: stretch;
        margin-left: 20px;
    }

    body.fk .fk-topbar .fk-mainnav .nav-link {
        display: flex;
        align-items: center;
        height: var(--fk-topbar-h);
        padding: 0 12px;
    }

    body.fk .fk-topbar .fk-mainnav .active > .nav-link::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 0;
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: var(--fk-accent-light);
    }

    body.fk .fk-env-badge {
        margin-right: 4px;
    }
}

/* Collapsed top bar (phones and tablets): stacked links, active = subtle pill */
@media (max-width: 991.98px) {
    body.fk .fk-env-badge {
        margin-right: auto;
    }

    body.fk .fk-topbar .navbar-collapse {
        margin: 0 -16px;
        padding: 6px 16px 12px;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    body.fk .fk-topbar .fk-mainnav .nav-link {
        padding: 10px 12px;
        border-radius: var(--fk-r-sm);
    }

    body.fk .fk-topbar .fk-mainnav .active > .nav-link {
        background: rgba(255, 255, 255, .10);
    }

    body.fk .fk-topbar .fk-user {
        margin-top: 8px !important;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    /* the pill is on the left in the stacked menu: the dropdown opens under it, aligned left */
    body.fk .fk-usermenu .dropdown-menu {
        left: 0 !important;
        right: auto !important;
    }
}

@media (max-width: 991px) {
    body.fk .fk-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body.fk .fk-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    body.fk .fk-footer-inner > * {
        padding: 0;
        border-left: 0;
    }

    body.fk .fk-footer .fk-footer-ops {
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    body.fk .fk-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.fk .fk-page-head {
        margin-top: 16px;
    }

    body.fk .fk-kv {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    body.fk .fk-kv-v {
        margin-bottom: 10px;
    }

    body.fk .fk-kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Legacy view wrappers "container p-0": full width on phones, the rows' -15px gutters would
       overflow the viewport; a 16px gutter as the page container (until the page step) */
    body.fk .container.p-0,
    body.fk .container-fluid.p-0 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* =====================================================================================================
   9. Shared rules collected from the page step (requested by more than one area)
   ===================================================================================================== */

/* Page titles at the same height whether or not the head has actions (one button high) */
body.fk .fk-page-head {
    min-height: 34px;
}

/* jQuery UI writes z-index:1 inline on the datepicker: any sticky or positioned element would cover it.
   Above page content, below the section tabs (1020) and the top bar (1030). */
body.fk #ui-datepicker-div {
    z-index: 1010 !important;
}

/* Status badges written as <label ng-show> must not get the field-label margin */
:where(body.fk) label.fk-badge {
    margin: 0;
}

/* Visible keyboard focus on every button (the soft ring alone is barely visible on white) */
body.fk .btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(31, 56, 100, .28);
    outline: none;
}

/* Modals open below the fixed top bar instead of covering it (centred dialogs keep Bootstrap's math) */
@media (min-width: 576px) {
    body.fk .modal-dialog:not(.modal-dialog-centered) {
        margin-top: calc(var(--fk-topbar-h) + 16px);
    }

    body.fk .modal-dialog-scrollable:not(.modal-dialog-centered) {
        max-height: calc(100% - var(--fk-topbar-h) - 16px - 1.75rem);
    }
}