/* =====================================================================
   LNC Custom Overrides — Bootstrap Reskin Layer
   File: /assets/css/custom.min.css
   Version: 0.2.0
   Date: 2026-02-16
   Notes:
   - Token-first reskin. Bootstrap tokens live in custom-bootstrap/bootstrap.min.css
   - This file is the single override layer for LNC-specific polish + components.
   - Minimal specificity. No vendor edits. No hardcoded magic colors.
   Changelog:
   - 0.2.0: Introduced LNC token aliases + normalized base .btn radius/padding.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Design Tokens (aliases on top of Bootstrap custom tokens)
   --------------------------------------------------------------------- */

   :root {

    /* =========================================================
       LNC Typography
       ========================================================= */
  
    --lnc-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
      "Apple Color Emoji", "Segoe UI Emoji";
  
    --lnc-fs-base: 0.93rem;
    --lnc-fs-sm: 0.83rem;
    --lnc-fs-xs: 0.73rem;
  
    --lnc-title: 1.3rem;
    --lnc-section: 1.1rem;
  
    --lnc-fw-regular: 400;
    --lnc-fw-medium: 500;
    --lnc-fw-semibold: 600;
  
    --lnc-text: var(--gray-900, #111827);
    --lnc-text-2: #1f2937;
    --lnc-muted: var(--gray-600, #6b7280);
    --lnc-muted-2: #9ca3af;
  
    /* =========================================================
       Brand
       ========================================================= */
  
    --lnc-primary: var(--primary, #3779f0);
    --lnc-primary-100: var(--primary-100, #e8f1ff);
    --lnc-primary-200: var(--primary-200, #cfe0ff);
    --lnc-primary-300: var(--primary-300, #a8c7ff);
    --lnc-primary-400: var(--primary-400, #78a6ff);
    --lnc-primary-600: var(--primary-600, #2f6fe0);
    --lnc-primary-700: var(--primary-700, #285fc0);
    --lnc-primary-800: var(--primary-800, #111827);
    --lnc-primary-900: var(--primary-900, #111827);
    --lnc-primary-weak: rgba(55, 121, 240, 0.10);
  
    /* =========================================================
       Surfaces
       ========================================================= */
  
    --lnc-bg: var(--body-bg, #f8fafc);
    --lnc-surface: var(--white, #ffffff);
    --lnc-surface-2: #f1f5f9;
  
    --lnc-border: var(--gray-200, #e5e7eb);
    --lnc-border-soft: var(--gray-100, #f1f5f9);
    --lnc-border-softest: var(--gray-000, #ffffff);
  
    /* =========================================================
       Radius
       ========================================================= */
  
    --lnc-radius-sm: 0.5rem;
    --lnc-radius-md: 0.75rem;
    --lnc-radius-lg: 1rem;
  
    /* =========================================================
       Shadows
       ========================================================= */
  
    --lnc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --lnc-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.10);
  
    /* =========================================================
       Controls
       ========================================================= */
  
    --lnc-ctl-h: 40px;
    --lnc-ctl-h-sm: 26px;
    --lnc-ctl-radius: 14px;
  
    /* =========================================================
       Navigation
       ========================================================= */
  
    --lnc-nav-hover-bg: rgba(27, 132, 255, .08);
    --lnc-nav-active-bg: rgba(27, 132, 255, .10);
    --lnc-nav-active-border: rgba(27, 132, 255, .18);
    --lnc-nav-radius: 14px;
    --lnc-nav-pad-y: 0.42rem;
    --lnc-nav-pad-x: 0.7rem;
    --lnc-nav-gap: 0.50rem;
    --lnc-nav-icon: 1.15rem;

        /* Dropdown */
        --lnc-dropdown-radius: 18px;
        --lnc-dropdown-shadow: 0 12px 28px rgba(15,23,42,.10);

          
        --lnc-hover-bg: rgba(15,23,42,.03);  /* neutral hover (not blue) */
        --lnc-active-bg: var(--lnc-nav-active-bg); /* alias so you can reuse */
  
    /* =========================================================
       Icon button
       ========================================================= */
  
       --lnc-iconbtn-bg: rgba(15,23,42,.03);
       --lnc-iconbtn-bg-hover: rgba(27,132,255,.10);
       --lnc-iconbtn-border: rgba(15,23,42,.06);
  
    /* =========================================================
       Focus
       ========================================================= */

    /* =========================================================
       KPIs
       ========================================================= */
        --lnc-kpi-fs: var(--lnc-fs-base);
        --lnc-kpi-fw: var(--lnc-fw-semibold);
        --lnc-kpi-label-fw: var(--lnc-fw-regular);
      
        --lnc-card-radius: var(--lnc-radius-lg);
        --lnc-card-border: var(--lnc-border);
        --lnc-card-shadow: var(--lnc-shadow-sm);

        --lt-biolink: #f72a86;  /* indigo 600 vibe */
        --lt-link:    #8c5ff5;  
        --lt-file:    #07b6d4;  
        --lt-vcard:   #12b981;  
        --lt-event:   #f32c2c;  
        --lt-static:  #f59e0c;

        --lnc-kpi-biolink-bg: color-mix(in srgb, var(--lt-biolink) 14%, #fff);
        --lnc-kpi-link-bg:    color-mix(in srgb, var(--lt-link) 14%, #fff);
        --lnc-kpi-file-bg:    color-mix(in srgb, var(--lt-file) 14%, #fff);
        --lnc-kpi-vcard-bg: color-mix(in srgb, var(--lt-vcard) 14%, #fff);
        --lnc-kpi-event-bg:   color-mix(in srgb, var(--lt-event) 14%, #fff);
        --lnc-kpi-static-bg:  color-mix(in srgb, var(--lt-static) 14%, #fff); 

         /* Alert borders */
  --lnc-alert-blue-border:   #2563eb;
  --lnc-alert-green-border:  #22c55e;
  --lnc-alert-purple-border: #7c3aed;
  --lnc-alert-yellow-border: #f59e0b;
  --lnc-alert-red-border:    #ef4444;

  /* Alert backgrounds */
  --lnc-alert-blue-bg:   #eaf2ff;
  --lnc-alert-green-bg:  #dcfce7;
  --lnc-alert-purple-bg: #f3efff;
  --lnc-alert-yellow-bg: #fef3c7;
  --lnc-alert-red-bg:    #fde7ef;

  /* Alert “ink” (text + icon) */
  --lnc-alert-blue-ink:   #2563eb;
  --lnc-alert-green-ink:  #22c55e;
  --lnc-alert-purple-ink: #7c3aed;
  --lnc-alert-yellow-ink: #f59e0b;
  --lnc-alert-red-ink:    #ef4444;

  /* Alert icon badge backgrounds */
  --lnc-alert-blue-badge-bg:   rgba(37, 99, 235, .18);
  --lnc-alert-green-badge-bg:  rgba(34, 197, 94, .18);
  --lnc-alert-purple-badge-bg: rgba(124, 58, 237, .18);
  --lnc-alert-yellow-badge-bg: rgba(245, 158, 11, .18);
  --lnc-alert-red-badge-bg:    rgba(239, 68, 68, .18);

  --lnc-tooltip-bg:        var(--lnc-alert-blue-bg);
  --lnc-tooltip-text:      var(--lnc-alert-blue-ink);
  --lnc-tooltip-border:    var(--lnc-alert-blue-border);

  --lnc-tooltip-radius:    10px;
  --lnc-tooltip-padding-y: 8px;
  --lnc-tooltip-padding-x: 10px;
  --lnc-tooltip-font-size: 12px;

  --lnc-tooltip-shadow: 0 6px 18px rgba(37, 99, 235, .18);

  /* =========================================================
   LNC BUTTON TOKENS (add to :root)
   Add these inside your existing :root block
   ========================================================= */
    --lnc-btn-radius: var(--lnc-ctl-radius);
    --lnc-btn-h: var(--lnc-ctl-h);
    --lnc-btn-h-sm: var(--lnc-ctl-h-sm);
  
    --lnc-btn-pad-x: 14px;
    --lnc-btn-pad-x-sm: 12px;
  
    --lnc-btn-neutral-bg: var(--lnc-iconbtn-bg);
    --lnc-btn-neutral-border: var(--lnc-iconbtn-border);
    --lnc-btn-neutral-hover-bg: var(--lnc-hover-bg);
    --lnc-btn-neutral-hover-border: var(--lnc-nav-active-border);
  
    --lnc-btn-primary-bg: var(--lnc-primary);
    --lnc-btn-primary-hover: var(--lnc-primary-600);
    --lnc-btn-primary-active: var(--lnc-primary-700);

        --lnc-feature-biolink-ink:  var(--lnc-kpi-blue-ink);
        --lnc-feature-biolink-bg:   var(--lnc-kpi-blue-bg);
      
        --lnc-feature-short-ink:    var(--lnc-kpi-purple-ink);
        --lnc-feature-short-bg:     var(--lnc-kpi-purple-bg);
      
        --lnc-feature-file-ink:     var(--lnc-kpi-cyan-ink);
        --lnc-feature-file-bg:      var(--lnc-kpi-cyan-bg);
      
        --lnc-feature-vcard-ink:    var(--lnc-kpi-green-ink);
        --lnc-feature-vcard-bg:     var(--lnc-kpi-green-bg);
      
        --lnc-feature-event-ink:    var(--lnc-kpi-red-ink);
        --lnc-feature-event-bg:     var(--lnc-kpi-red-bg);
      
        --lnc-feature-static-ink:   var(--lnc-kpi-orange-ink);
        --lnc-feature-static-bg:    var(--lnc-kpi-orange-bg);
  
}
  

/* ---------------------------------------------------------------------
   2) Base (body, links, typography)
   --------------------------------------------------------------------- */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--lnc-bg);
    color: var(--lnc-text);
}

a {
    color: inherit;
}

a:hover {
    color: inherit;
}

/* ==========================
   DND MODE
   Hide all divs
   ========================== */

   .dnd > div{
    display: none !important;
  }
/* ---------------------------------------------------------------------
   3) Layout (header, sidebar, containers)
   --------------------------------------------------------------------- */
/* Existing layout rules below remain in place. */

/* ---------------------------------------------------------------------
   4) Components
   - Buttons
   - Cards / panels
   - Forms / inputs
   - Tables
   - Badges / labels
   - Alerts
   - Dropdowns
   - Modals
   - Pricing / plan panels
   --------------------------------------------------------------------- */

/* Buttons — normalize away from pill defaults (keep page-specific pills where needed) */

.btn:focus,
.btn.focus {
    box-shadow: var(--lnc-focus-ring);
}

/* ---------------------------------------------------------------------
   5) Page-specific fixes (admin, auth, plans)
   --------------------------------------------------------------------- */
/* Existing page-specific rules below remain in place. */

/* ---------------------------------------------------------------------
   6) Small utilities (keep lean)
   --------------------------------------------------------------------- */
/* Existing utilities and animations below remain in place. */


@keyframes opacity-loading {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0.5;
        filter: blur(5px);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 var(--danger);
    }
    to {
        box-shadow: 0 0 0 20px transparent;
    }
}
@keyframes ac-fade-in-down {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
html {
    scroll-behavior: smooth;
}
body[data-theme-style="dark"].bg-white {
    background: var(--body-bg) !important;
}
.app {
    background: #ffffff;
}
[data-theme-style="dark"].app {
    background: #0d0f11;
}
.app-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--lnc-bg);
    z-index: 100;
    opacity: 0.5;
}

/* ================================
   LAYOUT: Sidebar (LNC reskin)
   ================================ */

   .app-overlay{
    background: var(--lnc-bg);
    opacity: .65;
  }
  
  /* Shell */
  .app-sidebar{
    background: var(--lnc-surface);
    border: 0.5px solid var(--lnc-border);
    box-shadow: var(--lnc-shadow-sm);
  
    min-width: 260px;
    max-width: 260px;
  
    /* slide-in */
    margin: 0 0 0 -300px;
    transition: margin-left .15s linear, margin-right .15s linear;
  
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 101;
  
    /* polish */
    overflow: hidden;

    /* === Sidebar footer pin fix (targeted) === */

    height: 100vh;              /* gives flex container a real height */
    display: flex;
    flex-direction: column;
  }
  
  /* RTL */
  [dir="rtl"] .app-sidebar{
    margin-left: initial;
    left: initial;
    right: 0;
    margin-right: -300px;
  }
  
  [dir="rtl"] .app-sidebar,
  [dir="rtl"] [data-theme-style="dark"] .app-sidebar{
    border-right: 0;
    border-left: 1px solid var(--lnc-border);
  }
  
  body.app-sidebar-opened .app-sidebar{ margin-left: 0; }
  [dir="rtl"] body.app-sidebar-opened .app-sidebar{ margin-right: 0; }
  
  @media (min-width: 992px){
    .app-sidebar{ margin-left: 0; }
    [dir="rtl"] .app-sidebar{ margin-right: 0; }
  }
  
  /* Title / brand */
  .app-sidebar-title{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 72px;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 0rem;
    margin: 0;
  
  }
  
  .app-sidebar-title a{
    font-family: var(--lnc-font);
    font-size: 1.25rem;
    font-weight: var(--lnc-fw-semibold);
    color: var(--lnc-text);
    text-decoration: none;
  }
  
  .app-sidebar-title a:hover{
    text-decoration: none;
  }
  
  /* Scroll wrapper */
  .app-sidebar-links-wrapper{
    overflow-y: auto;
    width: 100%;
    padding: .5rem .5rem .25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--lnc-border) transparent;
    flex: 1 1 auto;             /* replaces relying on flex-grow-1 utility */
    min-height: 0;              /* critical so overflow works inside flex */
    overflow-y: auto;
  }

  
  .app-sidebar-links-wrapper::-webkit-scrollbar{
    width: 8px;
  }
  .app-sidebar-links-wrapper::-webkit-scrollbar-thumb{
    background: var(--lnc-border);
    border-radius: 999px;
  }
  .app-sidebar-links-wrapper::-webkit-scrollbar-track{
    background: transparent;
  }
  
  /* Nav list */
  .app-sidebar-links{
    display: flex;
    flex-direction: column;
    align-items: stretch;
  
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .app-sidebar-links > li{
    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  /* Divider */
  .app-sidebar-links > .divider-wrapper{
    width: 100%;
    padding: 0rem 0rem;
    margin: 0rem 0rem;
  }
  .app-sidebar-links > .divider-wrapper > .divider{
    border-top: 1px solid var(--lnc-border-gray000);
  }
  
  /* Link item */
  .app-sidebar-links > li > a{
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--lnc-nav-gap);
  
    padding: var(--lnc-nav-pad-y) var(--lnc-nav-pad-x);
    margin: .1rem 0;
  
    border-radius: var(--lnc-nav-radius);
    border: 1px solid transparent;
    background: transparent;

    font-family: var(--lnc-font);
    font-size: var(--lnc-fs-sm);
    font-weight: var(--lnc-fw-medium);
    color: var(--lnc-muted);
    text-decoration: none;
  
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  
  .app-sidebar-links > li > a:hover{
    background: var(--lnc-nav-hover-bg);
    color: var(--lnc-primary);

  }
  
  /* Active item (soft pill, not solid blue) */
  .app-sidebar-links > li.active > a:not(.default){
    background: var(--lnc-nav-active-bg);
    border-color: var(--lnc-nav-active-border);
    color: var(--lnc-primary);
    font-weight: var(--lnc-fw-semibold);
  }
  
  /* Focus (keyboard) */
  .app-sidebar-links > li > a:focus,
  .app-sidebar-links > li > a:focus-visible{
    outline: 0;
    box-shadow: var(--lnc-focus-ring);
  }
  
  /* Footer */
  .app-sidebar-footer{
    width: 100%;
    padding: .5rem;
    background: var(--lnc-surface);
    margin-top: auto;
    flex: 0 0 auto;
  }
  
  .app-sidebar-footer > a{
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--lnc-nav-gap);
  
    padding: .7rem .95rem;
  
    border-radius: var(--lnc-nav-radius);
    border: 1px solid transparent;
  
    color: var(--lnc-muted);
    font-size: var(--lnc-fs-sm);
    font-weight: var(--lnc-fw-medium);
  
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none;
  }
  
  .app-sidebar-footer > a:hover{
    background: var(--lnc-nav-hover-bg);
    color: var(--lnc-primary);
    text-decoration: none;
  }
  
  /* Avatar / footer text */
  .app-sidebar-avatar{
    width: 36px;
    height: 36px;
    border-radius: 999px;
  }
  
  .app-sidebar-footer-block{ max-width: 100%; }
  
  .app-sidebar-footer-text,
  .dropdown-item svg{
    color: var(--lnc-muted);
  }
  
  /* Dark mode guardrails (don’t use gray-200 hover in dark) */
  [data-theme-style="dark"] .app-sidebar{
    background: var(--lnc-surface);
    border-color: var(--lnc-border);
  }
  
  [data-theme-style="dark"] .app-sidebar-links > li > a:hover{
    background: var(--lnc-nav-hover-bg);
    color: var(--lnc-text);
  }
  
  [data-theme-style="dark"] .app-sidebar-links > li.active > a:not(.default){
    background: var(--lnc-nav-active-bg);
    border-color: var(--lnc-nav-active-border);
    color: var(--lnc-text);
  }

/*Container main content*/
.app-content {
    margin-left: 0;
    flex-grow: 1;
}
[dir="rtl"] .app-content {
    margin-left: initial;
    margin-right: 0;
}
@media (min-width: 992px) {
    .app-content {
        margin-left: calc(260px + 1.5rem);
    }
    [dir="rtl"] .app-content {
        margin-left: initial;
        margin-right: calc(260px + 1.5rem);
    }
}
.app-navbar {
    min-height: 75px;
    border-bottom: 1px solid var(--gray-100);
}
[data-theme-style="dark"] .app-navbar {
    border-color: var(--gray-200);
}
html body.app .modal-header {
    padding: 1rem;
    border-bottom: 0;
}
html body.app .modal-content {
    padding: 1rem;
    border: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: calc(2 * var(--border-radius));
}
.input-group-text {
    font-size: 0.9rem;
}
.form-control-range {
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    accent-color: var(--primary);
    background: var(--gray-200);
    border-radius: var(--border-radius);
    height: 0.5rem;
    margin: 0.75rem 0;
}
.form-control-range::-moz-range-track,
.form-control-range::-webkit-slider-runnable-track {
    background: var(--gray-200);
}
.form-control-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 0.75rem;
    width: 0.75rem;
    background-color: var(--primary);
    border-radius: 50%;
    border: 2px solid var(--white);
    box-shadow: -2007px 0 0 2000px var(--primary-300);
}
.form-control-range::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 0.75rem;
    width: 0.75rem;
    background-color: var(--primary);
    border-radius: 50%;
    border: 2px solid var(--white);
    box-shadow: -2007px 0 0 2000px var(--primary-300);
}
.footer {
    margin: 0.5rem 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background: var(--white);
    color: var(--gray-700);
}
.footer a:hover:not(.dropdown-item),
.footer a:not(.dropdown-item) {
    color: var(--gray-700);
}
.footer a.icon {
    color: var(--gray-700);
}
.footer button,
.footer button:hover {
    color: var(--gray) !important;
}
.footer-logo {
    max-height: 2.5rem;
    height: 2.5rem;
}
.footer-heading {
    color: var(--black) !important;
}
.footer-social-wrapper {
    border-radius: 50%;
    aspect-ratio: 1/1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
}
.footer-social-wrapper a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.app-footer {
    border: 0px;
    padding-right : 1.25rem;
    padding-left : 1.25rem;
}
.filters-dropdown {
    width: 18rem;
    max-height: 30rem;
    overflow-y: auto;
}
.custom-breadcrumbs {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.custom-breadcrumbs > li {
    margin-right: 0.5rem;
}
.custom-breadcrumbs > li > a {
    color: var(--gray);
}
.custom-breadcrumbs > li > svg {
    color: var(--gray-400);
    margin-left: 0.5rem;
}
.font-size-little-small {
    font-size: 0.95rem;
}
.font-size-small {
    font-size: 0.9rem;
}
.font-weight-450 {
    font-weight: 450;
}
.font-weight-500 {
    font-weight: 500;
}
.list-style-none {
    list-style: none;
    padding: 0;
}
html body.app img {
    vertical-align: inherit !important;
}
.icon-favicon {
    width: 0.95rem;
    height: auto;
}
.icon-favicon-small {
    width: 0.75rem;
    height: auto;
}

html body.app .dropdown-menu{
    border: 1px solid var(--lnc-border);
    border-radius: var(--lnc-radius-lg);
    box-shadow: var(--lnc-shadow-md);
    padding: .5rem;
    margin: .5rem;
    min-width: 220px;
  }

html body.app .dropdown-item {
  border-radius: var(--lnc-radius-md);
  padding: .6rem .75rem;
  font-size: var(--lnc-fs-sm);
  font-weight: 500;
  color: var(--lnc-text);
  margin: 0.15rem 0px;
}

/* =========================================================
   CREATE DROPDOWN — preserve icon colours
   Put this at the VERY END of custom.css
   ========================================================= */

/* Base item */
html body.app .dropdown-menu .dropdown-item{
    color: var(--lnc-text) !important;
    background: transparent !important;
  }
  
  /* Hover / focus */
  html body.app .dropdown-menu .dropdown-item:hover,
  html body.app .dropdown-menu .dropdown-item:focus{
    background: var(--lnc-hover-bg) !important;
    color: var(--lnc-text) !important;
  }
  
  /* Active */
  html body.app .dropdown-menu .dropdown-item.active,
  html body.app .dropdown-menu .dropdown-item:active{
    background: var(--lnc-hover-bg) !important;
    color: var(--lnc-text) !important;
  }
  
  /* IMPORTANT:
     Do NOT touch SVG colour.
     Only ensure Lucide respects its own currentColor.
  */
  html body.app .dropdown-menu .dropdown-item svg.lucide{
    stroke: currentColor !important;
    fill: none !important;
  }

/* =========================================================
   CREATE DROPDOWN — force icon colours from tokens
   (overrides inline style="color: rgb(...)")
   Put at VERY END of custom.css
   ========================================================= */

/* 1) Map each item to a token colour */
html body.app .dropdown-menu .dropdown-item[data-target="#create_biolink"] { --create-color: var(--lt-biolink); }
html body.app .dropdown-menu .dropdown-item[data-target="#create_link"]   { --create-color: var(--lt-link); }
html body.app .dropdown-menu .dropdown-item[data-target="#create_file"]   { --create-color: var(--lt-file); }
html body.app .dropdown-menu .dropdown-item[data-target="#create_vcard"]  { --create-color: var(--lt-vcard); }
html body.app .dropdown-menu .dropdown-item[data-target="#create_event"]  { --create-color: var(--lt-event); }
html body.app .dropdown-menu .dropdown-item[data-target="#create_static"] { --create-color: var(--lt-static); }

/* 2) Force the SVG colour (beats inline style) */
html body.app .dropdown-menu .dropdown-item > svg.lucide{
  color: var(--create-color) !important; /* overrides inline color */
  stroke: currentColor !important;
  fill: none !important;
}

/* 3) Badge stays derived from icon colour (currentColor) */
html body.app .dropdown-menu .dropdown-item > svg.lucide{
  background: color-mix(in srgb, currentColor 12%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent) !important;
}



.navbar-main {
    z-index: 10;
    min-height: 0 !important;
    background: #ffffff75;
    border-bottom: 1px solid var(--gray-100);
}
[data-theme-style="dark"] .navbar-main {
    background: #00000057;
}
.navbar-main .navbar-nav > li > a {
    font-size: 0.9rem;
    font-weight: 500;
}
.navbar-main .navbar-nav > li {
    padding: 0.5rem 0 !important;
}
@media (min-width: 992px) {
    .navbar-main .navbar-nav > li {
        padding: 0.5rem !important;
    }
}
.navbar-logo {
    max-height: 2rem;
    height: 2rem;
}
.navbar-logo-mini {
    max-height: 1.25rem;
    height: 1.25rem;
}
.navbar-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.navbar-custom-toggler {
    padding: 0.5rem 0.8rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border-radius: var(--border-radius);
    color: var(--gray-700);
    border-color: var(--gray-300);
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
}
.chart-container {
    position: relative;
    margin: auto;
    height: 275px;
    width: 100%;
}
@media print {
    .chart-container canvas {
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        height: auto !important;
        width: auto !important;
    }
}
.dropdown-toggle-simple::after {
    display: none;
}
.index {
    background: #f9fcff;
}
[data-theme-style="dark"].index {
    background: var(--body-bg);
}
.index .navbar-main .btn {
    border-radius: 5rem;
    padding: 0.5rem 1rem;
}
.index-highly-rounded {
    border-radius: 1rem;
}
.user-avatar {
    border-radius: 50%;
    max-width: 80px;
    max-height: 80px;
}
.link-background-type-preset {
    width: 100%;
    height: 5rem;
    border-radius: var(--border-radius);
    transition:
        0.3s transform,
        opacity;
}
.link-background-type-preset:hover,
.link-biolink-theme:hover {
    cursor: pointer;
    transform: scale(1.025);
}
input[type="radio"]:checked ~ .link-background-type-preset {
    transform: scale(1.05);
    opacity: 0.25;
}
.link-directory-avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.link-biolink-theme {
    transition:
        0.3s transform,
        0.3s opacity,
        0.3s border-color;
    height: 22.5rem !important;
    background-size: cover !important;
    background-position: center center !important;
    border-width: 2px;
}
input[type="radio"]:checked ~ .link-biolink-theme {
    transform: scale(1.05);
    border-color: var(--primary);
}
.link-biolink-theme-custom {
    background: linear-gradient(to right, purple, pink);
    color: #fff;
}
.link-btn-straight {
    border-radius: 0;
}
.link-btn-round {
    border-radius: 50px;
}
.link-btn-rounded {
    border-radius: 0.4rem;
}
.biolink-switch-buttons .nav-link.active {
    background: var(--gray-500);
}
.biolink-preview {
    position: relative;
    margin: 0 auto;
    height: auto;
    width: auto;
    display: inline-block;
    text-align: left;
}
.biolink-preview-iframe-container {
    overflow: hidden;
    width: 300px;
    height: 625px;
    border-radius: 2.5rem;
    border: 10px solid #ffffff;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
@media (min-width: 768px) {
    .biolink-preview-iframe-container {
        width: 375px;
        height: 800px;
    }
}
.biolink-preview-iframe-loading {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.biolink-preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
}
.container-disabled {
    pointer-events: none;
    opacity: 0.5;
}
.container-disabled-simple {
    pointer-events: none;
}
.custom-row {
    border-radius: var(--border-radius);
    padding: 1.25rem;
    position: relative;
    border: 1px solid var(--gray-100);
    background: var(--white);
}
.custom-row-inactive {
    background: var(--gray-100);
}
.custom-row-side-controller {
    right: 100%;
    top: 25%;
    font-size: 1.2em;
    padding: 0.2em;
}
[dir="rtl"] .custom-row-side-controller {
    right: initial;
    left: 100%;
}
@media (min-width: 992px) {
    .custom-row-side-controller {
        position: absolute;
        padding: 0.4em 0.8em;
    }
}
.custom-row-side-controller-grab {
    cursor: grab;
    opacity: 0.5;
    transition: 0.3s opacity;
}
.biolink_block:hover .custom-row-side-controller-grab {
    opacity: 1;
}

.table-image-wrapper{
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    max-width: 2.5rem;
    max-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lnc-primary-100) !important;
  }
  
  .table-custom-container{
    border-radius: var(--lnc-radius-md) !important;
    border: 1px solid var(--lnc-border) !important;
    background: var(--lnc-surface) !important;
    color: var(--lnc-text) !important;
    box-shadow: var(--lnc-shadow-sm) !important;
    overflow: hidden !important;
  }
  
  .table-custom{ margin-bottom: 0 !important; }
  
  .table-custom thead th{
    border-top: 0 !important;
    background: var(--lnc-surface-2) !important;
    color: var(--lnc-muted) !important;
    font-size: var(--lnc-fs-xs) !important;
    font-weight: var(--lnc-fw-semibold) !important;
    letter-spacing: .04em !important;
    text-transform: capitalize !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--lnc-border) !important;
  }
  
  .table-custom th{
    padding: 12px 16px !important;
    border-color: var(--lnc-border) !important;
  }
  
  .table-custom td{
    background: var(--lnc-surface) !important;
    border-color: var(--lnc-border) !important;
    padding: 10px 16px !important;
    vertical-align: middle !important;
    border-top: 1px solid var(--lnc-border) !important;
  }
  
  .table-custom tbody tr:hover td{
    background: var(--lnc-hover-bg) !important;
  }

  
.cursor-pointer {
    cursor: pointer;
}
.no-focus:focus {
    outline: 0;
    box-shadow: none;
}
.appearance-none {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.pricing-header,
.pricing-plan {
    display: flex;
    flex-direction: column;
}
.pricing-plan {
    border: 1px solid var(--gray-100);
    height: 100%;
}
.pricing-header {
    padding: 2.2rem 2.2rem 0;
    background: var(--white);
    border-radius: calc(2 * var(--border-radius));
}
[data-theme-style="dark"] .pricing-header {
    border-color: var(--gray-100);
}
.pricing-name {
    color: var(--black);
    font-size: 1.15rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    display: inline-block;
}
.pricing-price {
    margin: 1rem 0;
}
.pricing-price-amount {
    font-size: 3rem;
    font-weight: 700;
}
.pricing-price-currency {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray);
}
.pricing-price-currency-symbol {
    font-size: 3rem;
    font-weight: 700;
}
.pricing-details {
    font-size: 0.85rem;
    color: var(--gray-600);
}
.pricing-body {
    padding: 0 2.2rem 2.2rem;
    background: var(--white);
    height: 100%;
    border-bottom-left-radius: calc(2 * var(--border-radius));
    border-bottom-right-radius: calc(2 * var(--border-radius));
}
.pricing-features {
    list-style: none;
    padding: 0;
}
.pricing-features li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
}
.pricing-tag {
    position: absolute;
    font-size: 80%;
    font-weight: 600;
    background: var(--gray-600);
    color: var(--gray-50);
    padding: 0.1rem 0.8rem;
    border-radius: var(--border-radius);
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.custom-radio-box {
    cursor: pointer;
}
.custom-radio-box .custom-radio-box-main-text {
    font-size: 1.15rem;
    font-weight: 700;
}
.custom-radio-box .custom-radio-box-main-icon {
    font-size: 1.25rem;
}
.custom-radio-box input[type="checkbox"] + div,
.custom-radio-box input[type="radio"] + div {
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--gray-100);
    background: var(--white);
}
.custom-radio-box input[type="checkbox"]:checked + div,
.custom-radio-box input[type="radio"]:checked + div {
    border: 1px solid var(--primary);
}
.custom-radio-box input[type="checkbox"]:hover + div,
.custom-radio-box input[type="radio"]:hover + div {
    border: 1px solid var(--primary);
}
.qr-code {
    width: 100rem;
}
.qr-code-loading {
    animation: opacity-loading 1s infinite ease-in-out alternate;
}
.qr-code-avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius);
    padding: 0.1rem;
    border: 0px solid var(--gray-100);
}
.cryptocurrency-icon {
    width: 40px;
    height: 40px;
}
.round-circle-lg,
.round-circle-md {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.round-circle-lg {
    width: 4.5rem;
    height: 4.5rem;
}
.invoice-table th {
    border-top: 0 !important;
}
.invoice-table td {
    vertical-align: baseline !important;
}
@media print {
    .invoice {
        page-break-after: always;
    }
    .container,
    body,
    html {
        height: auto !important;
        overflow: visible !important;
    }
    .invoice-logo {
        filter: grayscale(100%);
    }
}
.altum-animate {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
}
.altum-animate-fill-both {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.altum-animate-fill-none {
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
}
.altum-animate-fade-in {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
.btn-custom {
    padding: 0.5rem 1.5rem;
    color: var(--gray);
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-100) !important;
    font-size: 0.9rem;
    background: var(--white);
}
.btn-custom:hover {
    color: var(--gray);
    border: 1px solid var(--gray-200) !important;
}
.btn-custom.active {
    color: var(--primary);
    border: 1px solid var(--primary);
}
.blog-post-image {
    max-height: 20rem;
    object-fit: cover;
}
.blog-post-image-small {
    height: 13rem;
    max-height: 13rem;
    object-fit: cover;
}
.blog-post-content {
    line-height: 1.75;
    word-break: break-word;
}
.blog-post-content p {
    margin-bottom: 1.5rem;
}
.ql-code-block,
blockquote {
    color: var(--gray-600);
    border-radius: var(--border-radius);
}
.ql-code-block {
    background-color: var(--gray-200);
    padding: 1rem;
    overflow-x: auto;
    font-family: "Courier New", Courier, monospace;
    white-space: pre;
    font-size: 0.9rem;
    line-height: 1.5;
}
.ql-content p {
    margin-bottom: 0 !important;
}
.ql-content li[data-list="bullet"] {
    list-style-type: disc;
}
blockquote {
    border-left: 4px solid var(--gray-400);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background-color: var(--gray-100);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.6;
}
.altum-file-input {
    padding: 1rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-100);
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.altum-file-input:hover {
    border-color: var(--gray-300);
}
.altum-file-input::file-selector-button {
    border: 0;
    padding: 0.4rem 0.75rem;
    border-radius: var(--border-radius);
    background-color: var(--white);
    cursor: pointer;
    font-size: 0.9rem;
    margin-right: 1rem;
}
.altum-file-input-preview {
    max-width: 100%;
    max-height: 68px;
    min-height: 68px;
    object-fit: cover;
}
.sticky {
    position: sticky !important;
    top: 1rem;
    height: min-content;
}
.icon-zoom-animation svg,
.zoom-animation,
html body.app a svg {
    transition: transform 0.15s;
}
html body.app a:hover svg {
    transform: scale(1.1);
}
a:active svg {
    transform: scale(0.9);
}
[data-theme-style="dark"] svg[data-custom-colors] {
    color: var(--brand-color-dark) !important;
}
.icon-zoom-animation:hover svg {
    transform: scale(1.1);
}
.zoom-animation:hover {
    transform: scale(1.05);
}
.zoom-animation:active {
    transform: scale(0.95);
}
.up-animation,
.zoom-animation-subtle {
    transition: transform 0.3s;
}
.zoom-animation-subtle:hover {
    transform: scale(1.025);
}
.up-animation:hover {
    transform: translateY(-10px);
}
@media print {
    .pcr-app {
        display: none;
    }
}
.pcr-button {
    border: 1px solid #fff !important;
    outline: 1px solid var(--gray-300) !important;
    height: calc(
        var(--input-padding-y) + var(--input-padding-x) + var(--input-font-size) + calc(var(--input-font-size) / 2.75)
    ) !important;
    width: 100% !important;
}
.pcr-button,
.pcr-button::after,
.pcr-button::before {
    border-radius: var(--border-radius) !important;
}
.w-fit-content {
    width: fit-content !important;
}
.signature-avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
    background: var(--primary-100);
}
.loading-overlay {
    padding: 1.25rem;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--white);
    z-index: 100;
    opacity: 0.8;
}
[data-theme-style="dark"] .loading-overlay {
    background: var(--gray-50);
}
.input-group > .input-group-append > .btn {
    font-size: 0.9rem;
}
.ai-chat-avatar {
    width: 35px;
    height: 35px;
}
.ai-chat-big-avatar {
    width: 50px;
    height: 50px;
}
.chat-messages {
    height: 25rem;
    overflow-y: scroll;
}
.chat-image > img {
    max-height: 15rem;
}
.chat-content {
    word-break: break-word;
}
.shiki {
    overflow: auto;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.5rem;
}
.shiki code {
    background: initial !important;
}
.fa-stack-small {
    font-size: 0.65rem;
    vertical-align: middle;
}
.btn-group-custom {
    border: 1px solid var(--gray-100);
    padding: 0.5rem;
    border-radius: var(--border-radius);
    flex-wrap: wrap;
    display: inline-flex;
    gap: 0.5rem;
}
.btn-group-custom .btn {
    border-radius: var(--border-radius) !important;
    background: var(--gray-200);
}
.btn-group-custom .btn.active {
    background: var(--dark);
    color: var(--white);
    z-index: 0 !important;
}
html body.app body * {
    scrollbar-color: var(--gray-200) var(--white) !important;
    scrollbar-width: thin !important;
}
body ::-webkit-scrollbar-thumb {
    background: var(--gray-200);
    border-radius: 10px;
    width: 6px;
    height: 6px;
}
body ::-webkit-scrollbar,
body ::-webkit-scrollbar-track {
    background: var(--white);
    border-radius: 10px;
    width: 6px;
    height: 6px;
}
.internal-notification-icon {
    animation: pulse-animation 2s infinite;
}
.team-user-avatar {
    width: 45px;
    height: 45px;
}
.team-delegate-access-wrapper {
    margin: 0.75rem;
    border-radius: 0.5rem;
}
@media (min-width: 992px) {
    .team-delegate-access-wrapper {
        border-radius: 5rem;
    }
}
.announcement-wrapper {
    position: relative;
    z-index: 10;
    margin: 0.75rem;
    border-radius: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease-in;
    animation: ac-fade-in-down 0.3s ease-in 0.6s forwards;
}
@media (min-width: 992px) {
    .announcement-wrapper {
        border-radius: 5rem;
    }
}
.pwa-wrapper {
    position: fixed;
    bottom: 0;
    width: calc(100% - 1.5rem);
    z-index: 1000;
    background: hsla(0, 0%, 90%, 50%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme-style="dark"] .pwa-wrapper {
    background: hsla(0, 0%, 22%, 50%);
}
.rounded-2x {
    border-radius: calc(2 * var(--border-radius));
}
.rounded-3x {
    border-radius: calc(3 * var(--border-radius));
}
.pointer-events-all {
    pointer-events: all !important;
}
i.fa-fw {
    width: 1.25em;
    display: inline-block;
}
i.fa-xs {
    font-size: 0.85em;
}
i.fa-sm {
    font-size: 0.875em;
}
i.fa-lg {
    font-size: 1.25em;
}
i.xl {
    font-size: 1.5em;
}
.tool-icon {
    min-width: 2.75rem;
    max-height: 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
}
.tool-icon-wrapper {
    padding: 0 1.25rem;
}
.rating-star {
    cursor: pointer;
}
.rating-star svg {
    color: #ffc107;
    transition: color 0.15s;
}
.rating-star:hover svg,
.rating-star:hover ~ .rating-star svg {
    color: #f80 !important;
}
.rating-star-chosen svg,
.rating-star-chosen ~ .rating-star svg {
    color: #dd6200;
}
.link-type-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
}

/* Lnc custom styles v1 */

/* =========================================================
   KPI BLOCK (clean, dropdown-style badges)
   - card shell + icon tile badge like dropdown
   - per-KPI colour mapping via stretched-link href type=
   ========================================================= */

/* 1) KPI card shell */
html body.app .row.m-n3.justify-content-between .card.h-100{
    border-radius: var(--lnc-card-radius) !important;
    border: 1px solid var(--lnc-border-soft) !important;
    box-shadow: var(--lnc-card-shadow) !important;
    background: var(--lnc-surface) !important;
    max-height: 60px;
  
    /* default colour (biolink) */
    --kpi-color: var(--lt-biolink);
  }
  
  /* 2) Body layout */
  html body.app .row.m-n3.justify-content-between .card.h-100 > .card-body.d-flex{
    gap: .1rem !important;
    align-items: center !important;
    padding: 1.25rem !important;
  }
  
  /* 3) Icon tile wrapper = the badge (NOT the SVG) */
  html body.app .row.m-n3.justify-content-between .card.h-100 .card.border-0{
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  
    /* kill any bootstrap/altum visuals */
    border: 0 !important;
    box-shadow: none !important;
  
    /* IMPORTANT: override Altum inline background like style="background:#ecfdf5" */
    background: transparent !important;
  
    /* Make currentColor = our KPI color */
    color: var(--kpi-color) !important;
  
    /* Dropdown badge maths */
    background: color-mix(in srgb, currentColor 12%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent) !important;
  
    flex-shrink: 0 !important;
  }
  
  /* Hover feel (optional, matches dropdown hover) */
  html body.app .row.m-n3.justify-content-between .card.h-100:hover .card.border-0{
    background: color-mix(in srgb, currentColor 18%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 34%, transparent) !important;
  }
  
  /* 4) Kill inner padding + allow absolute centering */
  html body.app .row.m-n3.justify-content-between .card.h-100 .card.border-0 > .p-3{
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  
  /* stretched link fills tile (keep clickable) */
  html body.app .row.m-n3.justify-content-between .card.h-100 .card.border-0 > .p-3 > a.stretched-link{
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
  
    /* if Altum sets inline color on link, neutralise it */
    color: inherit !important;
  }
  
  /* 5) Center icon and inherit colour from tile */
  html body.app .row.m-n3.justify-content-between .card.h-100 .card.border-0 > .p-3 svg,
  html body.app .row.m-n3.justify-content-between .card.h-100 .card.border-0 > .p-3 i{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  
    color: inherit !important;
    stroke: currentColor !important;
    fill: none !important;
  
    /* IMPORTANT: no badge styles on SVG */
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  
  /* 6) Force number + label on ONE LINE */
  html body.app .row.m-n3.justify-content-between .card.h-100 > .card-body.d-flex > div{
    display: inline-flex !important;
    align-items: center !important;
    gap: .2rem !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  
  html body.app .row.m-n3.justify-content-between .card.h-100 > .card-body.d-flex > div > .card-title.h4.m-0{
    display: inline !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: var(--lnc-kpi-fs) !important;
    font-weight: var(--lnc-kpi-fw) !important;
    color: var(--lnc-text) !important;
  }
  
  html body.app .row.m-n3.justify-content-between .card.h-100 > .card-body.d-flex > div > span.text-muted{
    display: inline !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: var(--lnc-kpi-fs) !important;
    font-weight: var(--lnc-kpi-label-fw) !important;
    color: var(--lnc-muted) !important;
  }
  
  /* 7) Per-KPI colour mapping (ONLY sets --kpi-color) */
  html body.app .row.m-n3.justify-content-between .card.h-100:has(.stretched-link[href*="type=biolink"]){
    --kpi-color: var(--lt-biolink);
  }
  
  html body.app .row.m-n3.justify-content-between .card.h-100:has(.stretched-link[href*="type=link"]){
    --kpi-color: var(--lt-link);
  }
  
  html body.app .row.m-n3.justify-content-between .card.h-100:has(.stretched-link[href*="type=file"]){
    --kpi-color: var(--lt-file);
  }
  
  html body.app .row.m-n3.justify-content-between .card.h-100:has(.stretched-link[href*="type=vcard"]),
  html body.app .row.m-n3.justify-content-between .card.h-100:has(.stretched-link[href*="type=vcard_link"]){
    --kpi-color: var(--lt-vcard);
  }
  
  html body.app .row.m-n3.justify-content-between .card.h-100:has(.stretched-link[href*="type=event"]){
    --kpi-color: var(--lt-event);
  }
  
  html body.app .row.m-n3.justify-content-between .card.h-100:has(.stretched-link[href*="type=static"]){
    --kpi-color: var(--lt-static);
  }

/* =========================================================
   TABLE link-type icons (v2)
   - Reuses your existing :root vars: --lt-biolink, --lt-link, --lt-file,
     --lt-vcard, --lt-event, --lt-static
   - Works with tooltips: data-original-title OR title
   - Overrides inline background-color
   ========================================================= */

/* 1) Map type → --lt-color */
html body.app .link-type-icon[data-original-title="Biolink"],
html body.app .link-type-icon[title="Biolink"]{ --lt-color: var(--lt-biolink); }

html body.app .link-type-icon[data-original-title="Shortened URL"],
html body.app .link-type-icon[title="Shortened URL"]{ --lt-color: var(--lt-link); }

html body.app .link-type-icon[data-original-title="File link"],
html body.app .link-type-icon[title="File link"]{ --lt-color: var(--lt-file); }

html body.app .link-type-icon[data-original-title="Vcard link"],
html body.app .link-type-icon[title="Vcard link"]{ --lt-color: var(--lt-vcard); }

html body.app .link-type-icon[data-original-title="Event link"],
html body.app .link-type-icon[title="Event link"]{ --lt-color: var(--lt-event); }

html body.app .link-type-icon[data-original-title="Static site"],
html body.app .link-type-icon[title="Static site"],
html body.app .link-type-icon[data-original-title="Static sites"],
html body.app .link-type-icon[title="Static sites"]{ --lt-color: var(--lt-static); }

/* =========================================================
   TABLE ICON BADGE (same as dropdown + KPI)
   ========================================================= */

   html body.app .link-type-icon{
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
  
    display: grid !important;
    place-items: center !important;
  
    /* force colour mapping */
    color: var(--lt-color, var(--lt-biolink)) !important;
  
    /* badge background */
    background: color-mix(in srgb, currentColor 12%, transparent) !important;
  
    /* badge border */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent) !important;
  
    border: 0 !important;
    outline: 0 !important;
  }
  
  /* ensure svg inherits properly */
  html body.app .link-type-icon svg{
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
  }

/* 4) If an <i> icon is ever used */
html body.app .link-type-icon i{
  color: currentColor !important;
}

/* 5) Kill utility classes that override colour inside */
html body.app .link-type-icon .text-white,
html body.app .link-type-icon .text-light,
html body.app .link-type-icon .text-muted{
  color: inherit !important;
}

/* =========================================================
   LNC ALERTS (Bootstrap .alert override)
   Place AFTER bootstrap + after your tokens
   ========================================================= */

/* Base */
html body.app .alert{
    border-radius: var(--lnc-radius-lg) !important;
    border: 1px solid var(--lnc-border) !important;
    background: var(--lnc-surface-2) !important;
    color: var(--lnc-text) !important;
    position: relative !important;
    padding: 14px 18px !important;
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    border-width: 1px !important; /* thin border */
    border-style: solid !important;
  }
  
  /* Title + text */
  html body.app .alert .alert-heading{
    font-size: 1.35rem !important;
    font-weight: var(--lnc-fw-semibold) !important;
    line-height: 1.2 !important;
    margin: 0 0 .35rem 0 !important;
  }
  html body.app .alert p{
    margin: 0 !important;
    color: currentColor !important;
    opacity: .92 !important;
  }

/* =========================================================
   Alerts — layout fix (prevents <strong> stretching)
   ========================================================= */

   html body.app .alert{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  /* Icons + close button should never stretch */
  html body.app .alert > svg,
  html body.app .alert > .close,
  html body.app .alert > button.close,
  html body.app .alert > button{
    flex: 0 0 auto !important;
  }
  
  /* Default: direct children should NOT stretch */
  html body.app .alert > div,
  html body.app .alert > span,
  html body.app .alert > strong{
    flex: 0 0 auto !important;
    min-width: 0;
  }
  
  /* Only the main message container should grow (common in Altum alerts) */
  html body.app .alert .alert-content,
  html body.app .alert .message,
  html body.app .alert .text,
  html body.app .alert .alert-message{
    flex: 1 1 auto !important;
    min-width: 0;
  }
  
  /* Icon / first SVG or icon */
  html body.app .alert > :is(svg, i, .svg-inline--fa, .alert-icon, .icon){
    flex: 0 0 auto !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 14px !important;
  
    display: grid !important;
    place-items: center !important;
  }
  
  /* Make Lucide/FA inherit */
  html body.app .alert svg.lucide{
    stroke: currentColor !important;
    fill: none !important;
  }
  html body.app .alert svg:not(.lucide){
    fill: currentColor !important;
  }

  html body.app .alert svg {
    flex-shrink: 0;
    margin-top: 2px; /* aligns icon with first text line */
  }
  
  /* Variant mapping */
  html body.app .alert.alert-primary,
  html body.app .alert.alert-info{
    border-color: var(--lnc-alert-blue-border) !important;
    background: var(--lnc-alert-blue-bg) !important;
    color: var(--lnc-alert-blue-ink) !important;
  }

  
  html body.app .alert.alert-success{
    border-color: var(--lnc-alert-green-border) !important;
    background: var(--lnc-alert-green-bg) !important;
    color: var(--lnc-alert-green-ink) !important;
  }
 
  
  html body.app .alert.alert-purple{
    border-color: var(--lnc-alert-purple-border) !important;
    background: var(--lnc-alert-purple-bg) !important;
    color: var(--lnc-alert-purple-ink) !important;
  }
 
  
  /* Bootstrap “secondary” often used as purple in your UI */
  html body.app .alert.alert-secondary{
    border-color: var(--lnc-alert-purple-border) !important;
    background: var(--lnc-alert-purple-bg) !important;
    color: var(--lnc-alert-purple-ink) !important;
  }
 
  
  html body.app .alert.alert-warning{
    border-color: var(--lnc-alert-yellow-border) !important;
    background: var(--lnc-alert-yellow-bg) !important;
    color: var(--lnc-alert-yellow-ink) !important;
  }
  
  
  html body.app .alert.alert-danger{
    border-color: var(--lnc-alert-red-border) !important;
    background: var(--lnc-alert-red-bg) !important;
    color: var(--lnc-alert-red-ink) !important;
  }
 
  
  /* Links inside alerts */
  html body.app .alert a{
    color: currentColor !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
  }

/* Bootstrap v4 close button */
html body.app .alert button.close,
html body.app .alert .close{
  margin-left: auto !important;     /* pushes it to the far right */
  order: 999 !important;            /* ensures it comes last */
  float: none !important;           /* float doesn't work in flex */
  align-self: flex-start !important;
  line-height: 1 !important;

  /* clean look */
  opacity: .55 !important;
  text-shadow: none !important;
}

/* Hover */
html body.app .alert button.close:hover,
html body.app .alert .close:hover{
  opacity: .85 !important;
}

/* If the X is an svg inside the button */
html body.app .alert button.close svg,
html body.app .alert .close svg{
  display: block !important;
}

/* Optional: tighten spacing so it doesn't steal vertical space */
html body.app .alert button.close,
html body.app .alert .close{
  position: absolute !important;
  top: 9px !important;
  right: 15px !important;

  float: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  opacity: .6 !important;
  text-shadow: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
html body.app .alert button.close:hover,
html body.app .alert .close:hover{
  background: rgba(15,23,42,.04) !important;
  opacity: 1 !important;
}


  /* =========================================================
   LNC BUTTONS (override Bootstrap variants)
   Place AFTER bootstrap + after your tokens
   ========================================================= */

/* Base */
html body.app .btn{
    font-family: var(--lnc-font) !important;
    font-weight: var(--lnc-fw-medium) !important;
    font-size: var(--lnc-fs-base) !important;
  
    border-radius: var(--lnc-btn-radius) !important;
    padding: 0 var(--lnc-btn-pad-x) !important;
  
    height: var(--lnc-btn-h) !important;
    min-height: var(--lnc-btn-h) !important;
  
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .1rem !important;
  
    line-height: 1 !important;
    text-decoration: none !important;
  
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
  }
  
  html body.app .btn:focus,
  html body.app .btn.focus{
    outline: 0 !important;
    box-shadow: var(--lnc-focus-ring) !important;
  }
  
  html body.app .btn:disabled,
  html body.app .btn.disabled{
    opacity: .6 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
  }
  
  /* Sizes */
  html body.app .btn.btn-sm,
  html body.app .btn-group-sm > .btn{
    height: var(--lnc-btn-h-sm) !important;
    min-height: var(--lnc-btn-h-sm) !important;
    padding: 0 var(--lnc-btn-pad-x-sm) !important;
    font-size: var(--lnc-fs-sm) !important;
    border-radius: 12px !important;
  }
  
  /* Icon inheritance */
  html body.app .btn svg.lucide{ stroke: currentColor !important; fill: none !important; }
  html body.app .btn svg:not(.lucide){ fill: currentColor !important; }
  html body.app .btn i{ color: currentColor !important; }
  
  /* Primary button */

html body.app .btn.btn-primary:not(.link-btn):not(.link-btn-rounded):not(.link-btn-round):not(.link-btn-straight){
  background: var(--lnc-btn-primary-bg) !important;
  border: 1px solid var(--lnc-btn-primary-bg) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(55,121,240,.16) !important;
}

html body.app .btn.btn-primary:not(.link-btn):not(.link-btn-rounded):not(.link-btn-round):not(.link-btn-straight):hover{
  background: var(--lnc-btn-primary-hover) !important;
  border-color: var(--lnc-btn-primary-hover) !important;
}

html body.app .btn.btn-primary:not(.link-btn):not(.link-btn-rounded):not(.link-btn-round):not(.link-btn-straight):active,
html body.app .btn.btn-primary:not(.link-btn):not(.link-btn-rounded):not(.link-btn-round):not(.link-btn-straight).active,
html body.app .show > .btn.btn-primary:not(.link-btn):not(.link-btn-rounded):not(.link-btn-round):not(.link-btn-straight).dropdown-toggle{
  background: var(--lnc-btn-primary-active) !important;
  border-color: var(--lnc-btn-primary-active) !important;
  box-shadow: none !important;
}
  
  
  /* OUTLINE PRIMARY */
  html body.app .btn-outline-primary{
    background: var(--lnc-surface-2) !important;
    border: 1px solid var(--lnc-border) !important;
    color: var(--lnc-text) !important;
  
    border-radius: var(--lnc-radius-md) !important;
    font-weight: 500 !important;
  
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  
  /* Hover */
  html body.app .btn-outline-primary:hover{
    background: var(--lnc-hover-bg) !important;
    border-color: var(--lnc-primary) !important;
    color: var(--lnc-text) !important;
  }
  
  /* Active */
  html body.app .btn-btn-outline-primary:active,
  html body.app .btn-outline-primary.active{
    background: var(--lnc-surface-2) !important;
    border-color: var(--lnc-primary) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
  }
  
  /* Focus */
  html body.app .btn-outline-primary:focus{
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
  }
  
  /* NEUTRAL (maps Bootstrap “everything else” back to LNC) */
  html body.app :is(
    .btn.btn-secondary,
    .btn.btn-gray-50,
    .btn.btn-gray-100,
    .btn.btn-gray-400,
    .btn.btn-gray-500,
    .btn.btn-gray-600,
    .btn.btn-gray-700,
    .btn.btn-gray-800,
    .btn.btn-gray-900,
    .btn.btn-outline-light,
    .btn.btn-outline-secondary,
    .btn.btn-outline-dark,
    .btn.btn-outline-gray-50,
    .btn.btn-outline-gray-100,
    .btn.btn-outline-gray-200,
    .btn.btn-outline-gray-300,
    .btn.btn-outline-gray-400,
    .btn.btn-outline-gray-500,
    .btn.btn-outline-gray-600,
    .btn.btn-outline-gray-700,
    .btn.btn-outline-gray-800,
    .btn.btn-outline-gray-900,
    .btn.btn-primary-100,
    .btn.btn-primary-200,
    .btn.btn-primary-300,
    .btn.btn-primary-400
  ){
    background: var(--lnc-btn-neutral-bg) !important;
    border: 1px solid var(--lnc-btn-neutral-border) !important;
    color: var(--lnc-text) !important;
    box-shadow: none !important;
  }
  
  html body.app :is(
    .btn.btn-secondary,
    .btn.btn-gray-50,
    .btn.btn-gray-100,
    .btn.btn-gray-400,
    .btn.btn-gray-500,
    .btn.btn-gray-600,
    .btn.btn-gray-700,
    .btn.btn-gray-800,
    .btn.btn-gray-900,
    .btn.btn-outline-light,
    .btn.btn-outline-secondary,
    .btn.btn-outline-dark,
    .btn.btn-outline-gray-50,
    .btn.btn-outline-gray-100,
    .btn.btn-outline-gray-200,
    .btn.btn-outline-gray-300,
    .btn.btn-outline-gray-400,
    .btn.btn-outline-gray-500,
    .btn.btn-outline-gray-600,
    .btn.btn-outline-gray-700,
    .btn.btn-outline-gray-800,
    .btn.btn-outline-gray-900,
    .btn.btn-primary-100,
    .btn.btn-primary-200,
    .btn.btn-primary-300,
    .btn.btn-primary-400
  ):hover{
    background: var(--lnc-btn-neutral-hover-bg) !important;
    border-color: var(--lnc-btn-neutral-hover-border) !important;
    color: var(--lnc-text) !important;
  }
  
  /* SEMANTIC buttons should use alert scheme */
  html body.app .btn.btn-success{
    background: var(--lnc-alert-green-bg) !important;
    border: 1px solid var(--lnc-alert-green-border) !important;
    color: var(--lnc-alert-green-ink) !important;
  }
  html body.app .btn.btn-success:hover{
    background: color-mix(in srgb, var(--lnc-alert-green-bg) 78%, #fff) !important;
  }
  
  html body.app .btn.btn-warning{
    background: var(--lnc-alert-yellow-bg) !important;
    border: 1px solid var(--lnc-alert-yellow-border) !important;
    color: var(--lnc-alert-yellow-ink) !important;
  }
  html body.app .btn.btn-warning:hover{
    background: color-mix(in srgb, var(--lnc-alert-yellow-bg) 78%, #fff) !important;
  }
  
  html body.app .btn.btn-danger{
    background: var(--lnc-alert-red-bg) !important;
    border: 1px solid var(--lnc-alert-red-border) !important;
    color: var(--lnc-alert-red-ink) !important;
  }
  html body.app .btn.btn-danger:hover{
    background: color-mix(in srgb, var(--lnc-alert-red-bg) 78%, #fff) !important;
  }
  
  html body.app .btn.btn-info{
    background: var(--lnc-alert-blue-bg) !important;
    border: 1px solid var(--lnc-alert-blue-border) !important;
    color: var(--lnc-alert-blue-ink) !important;
  }
  html body.app .btn.btn-info:hover{
    background: color-mix(in srgb, var(--lnc-alert-blue-bg) 78%, #fff) !important;
  }
  
  /* Links */
  html body.app .btn.btn-link{
    color: var(--lnc-primary) !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-left: 10px;
  }
  html body.app .btn.btn-link:hover{
    color: var(--lnc-primary-700) !important;
    text-decoration: underline !important;
  }


  /* =========================================================
   LNC — Lucide sizing (targets real DOM: <svg class="lucide ...">)
   ========================================================= */

/* Global default: make Lucide behave like "text-sized" icons */
html body.app svg.lucide{
    width: 1em !important;
    height: 1em !important;
    stroke-width: 1.3 !important; /* optical match */
    vertical-align: -0.125em !important;
  }
  
/* Sidebar icons – final override */
.app-sidebar svg.lucide.lnc-lucide-fw,
.app-sidebar svg.lucide.lnc-lucide-sm,
.app-sidebar svg.lucide{
  width: 20px !important;
  height: 20px !important;
}
  
  /* If you use these helper classes on the SVG */
  svg.lucide.lnc-lucide-sm{ width: 14px !important; height: 14px !important; }
  svg.lucide.lnc-lucide-lg{ width: 18px !important; height: 18px !important; }
  svg.lucide.lnc-lucide-fw{ width: 16px !important; height: 16px !important; }

  /* =========================================================
   LNC — Alerts: icon colour should match alert type
   (Lucide + FontAwesome-safe)
   ========================================================= */

/* 1) Define a single “accent” per alert type */
html body.app .alert { --lnc-alert-accent: currentColor; }

html body.app .alert.alert-info    { --lnc-alert-accent: var(--lnc-alert-blue-ink); }
html body.app .alert.alert-success { --lnc-alert-accent: var(--lnc-alert-green-ink); }
html body.app .alert.alert-warning { --lnc-alert-accent: var(--lnc-alert-yellow-ink); }
html body.app .alert.alert-danger  { --lnc-alert-accent: var(--lnc-alert-red-ink); }
html body.app .alert.alert-primary { --lnc-alert-accent: var(--lnc-alert-purple-ink); }

/* 2) Force the icon “slot” to use the accent colour */
html body.app .alert > :is(
  svg.lucide,
  i,
  .svg-inline--fa,
  .alert-icon,
  .icon
){
  color: var(--lnc-alert-accent) !important;
}

/* 3) Lucide inherits from color */
html body.app .alert svg.lucide{
  stroke: currentColor !important;
  fill: none !important;
}

/* 4) FA SVG inherits from color */
html body.app .alert svg.svg-inline--fa{
  fill: currentColor !important;
}

/* 5) Close button (X) should match + be thin */
html body.app .alert .close{
  color: var(--lnc-alert-accent) !important;
  opacity: .7;
}
html body.app .alert .close:hover{ opacity: 1; }

/* Optional: make Lucide strokes feel lighter in alerts */
html body.app .alert svg.lucide{ stroke-width: 1.75; }

/* =========================================================
   LNC — Alert close (X) must match alert type colour
   ========================================================= */

/* Set the accent per alert type (uses YOUR existing vars) */
html body.app .alert { --lnc-alert-accent: currentColor; }
html body.app .alert.alert-info    { --lnc-alert-accent: var(--lnc-alert-blue-ink); }
html body.app .alert.alert-success { --lnc-alert-accent: var(--lnc-alert-green-ink); }
html body.app .alert.alert-warning { --lnc-alert-accent: var(--lnc-alert-yellow-ink); }
html body.app .alert.alert-danger  { --lnc-alert-accent: var(--lnc-alert-red-ink); }
html body.app .alert.alert-primary { --lnc-alert-accent: var(--lnc-alert-purple-ink); }

/* Force the CLOSE icon (svg) to use the accent, even if it has text-info */
html body.app .alert button.close svg,
html body.app .alert .close svg{
  color: var(--lnc-alert-accent) !important;
}

/* Lucide inherits stroke from currentColor */
html body.app .alert button.close svg.lucide,
html body.app .alert .close svg.lucide{
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.5 !important; /* thinner X */
}

/* Size + feel */
html body.app .alert button.close svg,
html body.app .alert .close svg{
  width: 16px !important;
  height: 16px !important;
  opacity: .65;
}
html body.app .alert button.close:hover svg,
html body.app .alert .close:hover svg{
  opacity: 1;
}

/* =========================================
   Hide icons inside ALL headings globally
   ========================================= */

/* Admin only: hide heading icons (prevents killing biolink iframe icons) */
html body.app :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) :is(svg,i){
    display: none !important;
  }

  /* =========================================
   Metronic-style tooltips (Bootstrap)
   ========================================= */
  
  /* Bootstrap tooltip container */
  html body.app .tooltip{
    font-family: inherit;
    opacity: 1 !important;
  }
  
.tooltip.show {
    opacity: 1 !important;
  }
  
  /* Tooltip bubble */
  .tooltip .tooltip-inner{
    background: var(--lnc-tooltip-bg) !important;
    color: var(--lnc-tooltip-text) !important;
    border: 1px solid var(--lnc-tooltip-border) !important;
    border-radius: var(--lnc-tooltip-radius) !important;
    padding: var(--lnc-tooltip-padding-y) var(--lnc-tooltip-padding-x) !important;
    font-size: var(--lnc-tooltip-font-size) !important;
    box-shadow: var(--lnc-tooltip-shadow) !important;
  }
  
  /* Arrow colour (Bootstrap 4 uses these) */
  .tooltip.bs-tooltip-top .arrow::before,
  .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before{
    border-top-color: var(--lnc-tooltip-bg) !important;
  }
  .tooltip.bs-tooltip-right .arrow::before,
  .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before{
    border-right-color: var(--lnc-tooltip-bg) !important;
  }
  .tooltip.bs-tooltip-bottom .arrow::before,
  .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before{
    border-bottom-color: var(--lnc-tooltip-bg) !important;
  }
  .tooltip.bs-tooltip-left .arrow::before,
  .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before{
    border-left-color: var(--lnc-tooltip-bg) !important;
  }

  /* =========================================================
   Dropdown "Create" menu — KPI-style icon badges (no HTML change)
   - Keeps per-item inline icon colour (style="color: ...")
   - Builds badge bg/border from currentColor
   ========================================================= */

html body.app .dropdown-menu .dropdown-item{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  /* Lucide SVG inside dropdown item */
  html body.app .dropdown-menu .dropdown-item > svg.lucide{
    /* FORCE ICON SIZE */
    width: 18px !important;
    height: 18px !important;
  
    /* Keep the SVG's OWN colour (do NOT set color here) */
    stroke: currentColor !important;
    fill: none !important;
  
    /* KPI-like badge */
    display: inline-block !important;
    padding: 6px !important;
    border-radius: 10px !important;
    box-sizing: content-box !important;
  
    /* BG + border derived from the icon colour */
    background: color-mix(in srgb, currentColor 12%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent) !important;
  
    flex-shrink: 0 !important;
    margin-right: 10px !important;
  }
  
  html body.app .dropdown-menu .dropdown-item:hover > svg.lucide,
  html body.app .dropdown-menu .dropdown-item:focus > svg.lucide{
    background: color-mix(in srgb, currentColor 18%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 34%, transparent) !important;
  }

/* =========================================================
   LNC NAV PILLS (Soft Primary Active)
   ========================================================= */

   html body.app .biolink-switch-buttons.nav-pills {
    gap: 8px;
    background: transparent;
  }
  
  /* Base pill */
  html body.app .biolink-switch-buttons .nav-link {
    border-radius: 12px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  
    color: var(--lnc-muted) !important;
    background: var(--lnc-surface-2) !important;
    border: 1px solid var(--lnc-border) !important;
  
    transition: all .15s ease;
  }
  
  /* Hover */
  html body.app .biolink-switch-buttons .nav-link:hover {
    background: var(--lnc-hover-bg) !important;
    color: var(--lnc-text) !important;
  }
  
  /* Active = SOFT PRIMARY (not CTA blue) */
  html body.app .biolink-switch-buttons .nav-link.active {
    background: color-mix(in srgb, var(--lnc-primary) 14%, transparent) !important;
    color: var(--lnc-primary) !important;
    border-color: color-mix(in srgb, var(--lnc-primary) 28%, var(--lnc-border)) !important;
  
    box-shadow: none !important;
  }

  /* =========================================================
   LNC BTN GRAY-200 (Accordion style with chevron)
   ========================================================= */

html body.app .btn.btn-block.btn-gray-200 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  
    background: var(--lnc-surface) !important;
    border: 1px solid rgba(59,130,246,.28) !important;
    color: var(--lnc-primary) !important;
  
    border-radius: 14px !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
  
    box-shadow: none !important;
    transition: all .15s ease;
  }
  
  /* Hover */
.btn.btn-block.btn-gray-200:hover {
    background: rgba(59,130,246,.06) !important;
    border-color: rgba(59,130,246,.45) !important;
  }
  
  /* Active / expanded state */
.btn.btn-block.btn-gray-200[aria-expanded="true"] {
    background: rgba(59,130,246,.10) !important;
    border-color: rgba(59,130,246,.55) !important;
  }
  
  /* =========================================================
     Chevron
     ========================================================= */
  
  /* Remove default caret if Bootstrap adds one */
.btn.btn-block.btn-gray-200::after {
    content: "";
  }
  
  /* Add Lucide-style chevron */
.btn.btn-block.btn-gray-200::after {
    content: "";
    width: 10px;
    height: 10px;
    margin-left: auto;
    margin-bottom: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  
  /* Rotate when open */
.btn.btn-block.btn-gray-200[aria-expanded="true"]::after {
    transform: rotate(-135deg);
  }

   /* =========================================================
   LNC BTN GRAY-300 (Accordion style with chevron)
   ========================================================= */

html body.app .btn.btn-block.btn-gray-300 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  
    background: var(--lnc-surface) !important;
    border: 1px solid rgba(59,130,246,.28) !important;
    color: var(--lnc-primary) !important;
  
    border-radius: 14px !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
  
    box-shadow: none !important;
    transition: all .15s ease;
  }
  
  /* Hover */
.btn.btn-block.btn-gray-300:hover {
    background: rgba(59,130,246,.06) !important;
    border-color: rgba(59,130,246,.45) !important;
  }
  
  /* Active / expanded state */
.btn.btn-block.btn-gray-300[aria-expanded="true"] {
    background: rgba(59,130,246,.10) !important;
    border-color: rgba(59,130,246,.55) !important;
  }
  
  /* =========================================================
     Chevron
     ========================================================= */
  
  /* Remove default caret if Bootstrap adds one */
.btn.btn-block.btn-gray-300::after {
    content: "";
  }
  
  /* Add Lucide-style chevron */
.btn.btn-block.btn-gray-300::after {
    content: "";
    width: 10px;
    height: 10px;
    margin-left: auto;
    margin-bottom: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  
  /* Rotate when open */
.btn.btn-block.btn-gray-300[aria-expanded="true"]::after {
    transform: rotate(-135deg);
  }

  /* =========================================================
   LNC BTN LIGHT (Surface Button)
   ========================================================= */

html body.app .btn-light, html body.app .btn-dark{
    background: var(--lnc-surface-2) !important;
    border: 1px solid var(--lnc-border) !important;
    color: var(--lnc-text) !important;
  
    border-radius: var(--lnc-radius-md) !important;
    font-weight: 500 !important;
  
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  
  /* Hover */
  html body.app .btn-light:hover, html body.app .btn-dark:hover{
    background: var(--lnc-hover-bg) !important;
    border-color: var(--lnc-primary) !important;
    color: var(--lnc-text) !important;
  }
  
  /* Active */
  html body.app .btn-light:active, html body.app .btn-dark:active{
    background: var(--lnc-surface-2) !important;
    border-color: var(--lnc-primary) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
  }
  
  /* Focus */
  html body.app .btn-light:focus, html body.app .btn-dark:focus{
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
  }

/* Hover: make Lucide icons follow button text colour */
html body.app .btn-light:hover svg.lucide,
html body.app .btn-dark:hover svg.lucide {
    color: var(--lnc-primary) !important;
}

 /* =========================================================
   QR > VCARD-only sections (CSS only) — use the form as scope
   ========================================================= */

/* Default: hide VCARD-only buttons + panels */
html body.app #form button[data-target="#vcard_phone_numbers_container"],
html body.app #form button[data-target="#vcard_socials_container"],
html body.app #form #vcard_phone_numbers_container,
html body.app #form #vcard_socials_container{
  display: none !important;
}

/* When VCARD is selected: show them */
html body.app #form:has(input[name="type"][value="vcard"]:checked) button[data-target="#vcard_phone_numbers_container"],
html body.app #form:has(input[name="type"][value="vcard"]:checked) button[data-target="#vcard_socials_container"]{
  display: flex !important;
}

html body.app #form:has(input[name="type"][value="vcard"]:checked) #vcard_phone_numbers_container,
html body.app #form:has(input[name="type"][value="vcard"]:checked) #vcard_socials_container{
  display: block !important;
}

/* Hide internal notifications bell globally */
.app-sidebar #internal_notifications_link {
    display: none !important;
  }


  /* Margins */

  .mb-4,
.my-4 {
    margin-bottom: 1rem !important;
    margin-top: 1rem !important;
}

/* =========================================================
   Global Toolbar Button
   Reusable across filters, tabs, QR types, etc.
   ========================================================= */

   .btn-toolbar{
    background: var(--lnc-surface) !important;
    border: 1px solid var(--lnc-border-soft) !important;
    color: var(--lnc-text) !important;
  
    border-radius: 12px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
  }
  
  /* Hover */
  .btn-toolbar:hover{
    background: var(--lnc-surface-2) !important;
    border-color: var(--lnc-border) !important;
    color: var(--lnc-text) !important;
  }
  
  /* Active / Selected */
  .btn-toolbar.active,
  .btn-toolbar:active,
  .btn-toolbar[aria-pressed="true"]{
    background: var(--lnc-primary) !important;
    border-color: var(--lnc-primary) !important;
    color: #fff !important;
  }
  
  /* Focus */
  .btn-toolbar:focus,
  .btn-toolbar:focus-visible{
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lnc-primary) 20%, transparent) !important;
  }
  
  /* Icons inherit properly */
  .btn-toolbar svg,
  .btn-toolbar i{
    color: currentColor !important;
    stroke: currentColor !important;
  }

/* Domain connect instruction banner: stop flex layout so text wraps naturally */
html body.app main .alert.alert-secondary.mb-4{
    display: block !important;     /* overrides global .alert{display:flex} */
    white-space: normal !important;
    line-height: 1.4 !important;
  }
  
  /* Ensure long values (IP / domain) don’t break the layout */
  html body.app main .alert.alert-secondary.mb-4 strong{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Padding */
  html body.app .p-3 {
    padding: 0.5rem !important;
}

/* =========================================================
   SIDEBAR ICONS — match dropdown badge style (currentColor)
   Scope: sidebar nav only
   ========================================================= */

/* Tune once */
:root{
    --lnc-icon-badge-bg: 12%;
    --lnc-icon-badge-border: 28%;
    --lnc-icon-badge-bg-hover: 18%;
    --lnc-icon-badge-border-hover: 34%;
    --lnc-icon-badge-radius: 10px;
    --lnc-icon-badge-pad: 6px;
    --lnc-icon-size: 18px;
  }
  
  /* Make sidebar links drive icon colour */
  html body.app .app-sidebar a{
    color: var(--lnc-text-2, var(--lnc-muted)) !important;
  }
  
  /* Hover */
  html body.app .app-sidebar a:hover{
    color: var(--lnc-text, #0f172a) !important;
  }
  
  /* Active state (adjust selector if your active class differs) */
  html body.app .app-sidebar a.active,
  html body.app .app-sidebar .nav-link.active,
  html body.app .app-sidebar .active > a{
    color: var(--lnc-primary, #3779f0) !important;
  }
  
  /* Layout: icon + label align consistently */
  html body.app .app-sidebar a,
  html body.app .app-sidebar .nav-link{
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
  }
  
  /* Lucide badge */
  html body.app .app-sidebar a > svg.lucide,
  html body.app .app-sidebar .nav-link > svg.lucide{
    width: var(--lnc-icon-size) !important;
    height: var(--lnc-icon-size) !important;
  
    stroke: currentColor !important;
    fill: none !important;
  
    display: inline-block !important;
    padding: var(--lnc-icon-badge-pad) !important;
    border-radius: var(--lnc-icon-badge-radius) !important;
    box-sizing: content-box !important;
  
    background: color-mix(in srgb, currentColor var(--lnc-icon-badge-bg), transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor var(--lnc-icon-badge-border), transparent) !important;
  
    flex-shrink: 0 !important;
  }
  
  /* Hover/Focus badge */
  html body.app .app-sidebar a:hover > svg.lucide,
  html body.app .app-sidebar a:focus > svg.lucide,
  html body.app .app-sidebar .nav-link:hover > svg.lucide,
  html body.app .app-sidebar .nav-link:focus > svg.lucide{
    background: color-mix(in srgb, currentColor var(--lnc-icon-badge-bg-hover), transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor var(--lnc-icon-badge-border-hover), transparent) !important;
  }

/* ==========================================
   PREMIUM SUBTLE FOCUS (1px, no glow)
   Put at VERY END of custom.min.css
   ========================================== */

   :root{
    --lnc-focus-border: color-mix(in srgb, var(--lnc-primary) 35%, var(--lnc-border));
  }
  
  /* Kill glow globally */
  html body.app :focus{
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* Inputs + buttons: force 1px border */
  html body.app :is(
    input,
    select,
    textarea,
    .form-control,
    .custom-select,
    .btn
  ):focus{
    border: 1px solid var(--lnc-focus-border) !important;
  }
  
  /* Bootstrap switch: visible track is label::before */
  html body.app .custom-control-input:focus ~ .custom-control-label::before{
    border: 1px solid var(--lnc-focus-border) !important;
    box-shadow: none !important;
  }

  /* ======================================================
   Bootstrap text utilities → LNC tokens (your existing vars)
   Put at VERY END of custom.css
   ====================================================== */

/* Core */
html body.app .text-body { color: var(--lnc-text) !important; }
html body.app .text-muted { color: var(--lnc-muted) !important; }
html body.app .text-secondary { color: var(--lnc-muted) !important; }

/* Primary */
html body.app .text-primary { color: var(--lnc-primary) !important; }
html body.app a.text-primary:hover,
html body.app a.text-primary:focus { color: var(--lnc-primary-600) !important; }

/* “Light/Dark” utility intent */
html body.app .text-light { color: var(--lnc-border-soft) !important; }
html body.app a.text-light:hover,
html body.app a.text-light:focus { color: var(--lnc-border) !important; }

html body.app .text-dark { color: var(--lnc-text) !important; }
html body.app a.text-dark:hover,
html body.app a.text-dark:focus { color: var(--lnc-text-2) !important; }

/* Status colours (map to your alert inks) */
html body.app .text-success { color: var(--lnc-alert-green-ink) !important; }
html body.app a.text-success:hover,
html body.app a.text-success:focus { color: color-mix(in srgb, var(--lnc-alert-green-ink) 80%, #000) !important; }

html body.app .text-danger { color: var(--lnc-alert-red-ink) !important; }
html body.app a.text-danger:hover,
html body.app a.text-danger:focus { color: color-mix(in srgb, var(--lnc-alert-red-ink) 80%, #000) !important; }

html body.app .text-warning { color: var(--lnc-alert-yellow-ink) !important; }
html body.app a.text-warning:hover,
html body.app a.text-warning:focus { color: color-mix(in srgb, var(--lnc-alert-yellow-ink) 80%, #000) !important; }

html body.app .text-info { color: var(--lnc-alert-blue-ink) !important; }
html body.app a.text-info:hover,
html body.app a.text-info:focus { color: color-mix(in srgb, var(--lnc-alert-blue-ink) 80%, #000) !important; }

/* Grays (map to surfaces/borders since you don’t have a full --lnc-gray scale) */
html body.app .text-gray-50  { color: var(--lnc-border-softest) !important; }
html body.app .text-gray-100 { color: var(--lnc-border-soft) !important; }
html body.app .text-gray-200 { color: var(--lnc-border) !important; }

html body.app .text-gray-300,
html body.app .text-gray-400,
html body.app .text-gray-500,
html body.app .text-gray-600 { color: var(--lnc-muted) !important; }

html body.app .text-gray-700,
html body.app .text-gray-800,
html body.app .text-gray-900 { color: var(--lnc-text) !important; }

/* Primary shades (you DO have these) */
html body.app .text-primary-100 { color: var(--lnc-primary-100) !important; }
html body.app .text-primary-200 { color: var(--lnc-primary-200) !important; }
html body.app .text-primary-300 { color: var(--lnc-primary-300) !important; }
html body.app .text-primary-400 { color: var(--lnc-primary-400) !important; }
html body.app .text-primary-600 { color: var(--lnc-primary-600) !important; }
html body.app .text-primary-700 { color: var(--lnc-primary-700) !important; }
html body.app .text-primary-800 { color: var(--lnc-primary-800) !important; }
html body.app .text-primary-900 { color: var(--lnc-primary-900) !important; }

/* ======================================================
   Custom controls + Badges → LNC tokens (your existing vars)
   Put at VERY END of custom.css
   ====================================================== */

/* Switch / checkbox track (Bootstrap custom-control) */
html body.app .custom-control-label::before{
    border: 0 !important;
    background: var(--lnc-border) !important;           /* was #e7e5e4 */
  }
  
  html body.app .custom-control-input[disabled] ~ .custom-control-label::before,
  html body.app .custom-control-input:disabled ~ .custom-control-label::before{
    background: color-mix(in srgb, var(--lnc-border) 75%, #0000) !important; /* slightly darker */
    opacity: .7 !important;
  }
  
  /* Badge sizing */
  html body.app .badge{
    padding: 0.45em 0.9em !important;
    border-radius: 999px !important; /* more “premium pill” */
    font-weight: var(--lnc-fw-medium) !important;
  }
  
  /* Primary */
  html body.app .badge-primary{
    color: var(--lnc-primary-700) !important;
    background: var(--lnc-primary-100) !important;
  }
  
  /* Secondary (neutral) */
  html body.app .badge-secondary{
    color: var(--lnc-muted) !important;
    background: var(--lnc-border) !important;
  }
  
  /* Success / Danger / Warning / Info mapped to your alert tokens */
  html body.app .badge-success{
    color: var(--lnc-alert-green-ink) !important;
    background: var(--lnc-alert-green-bg) !important;
  }
  
  html body.app .badge-danger{
    color: var(--lnc-alert-red-ink) !important;
    background: var(--lnc-alert-red-bg) !important;
  }
  
  html body.app .badge-warning{
    color: var(--lnc-alert-yellow-ink) !important;
    background: var(--lnc-alert-yellow-bg) !important;
  }
  
  html body.app .badge-info{
    color: var(--lnc-alert-blue-ink) !important;
    background: var(--lnc-alert-blue-bg) !important;
  }
  
  /* Light / Dark */
  html body.app .badge-light{
    color: var(--lnc-muted) !important;
    background: var(--lnc-surface-2) !important;
  }
  
  html body.app .badge-dark{
    color: #fff !important;
    background: var(--lnc-text) !important;
  }
/* =========================================================
   Plan renew toggle (Monthly / Annual / Lifetime) — match v1
   Put at VERY END of custom.css
   ========================================================= */

/* Wrapper pill */
html body.app .btn-group-toggle.btn-group-custom{
    background: var(--lnc-hover-bg) !important;
    border: 1px solid var(--lnc-border) !important;
    border-radius: 999px !important;
    padding: 6px !important;
    gap: 6px !important;
  }
  
  /* Kill Bootstrap “square group” rules */
  html body.app .btn-group-toggle.btn-group-custom > .btn,
  html body.app .btn-group-toggle.btn-group-custom > .btn:not(:last-child),
  html body.app .btn-group-toggle.btn-group-custom > .btn:not(:first-child),
  html body.app .btn-group-toggle.btn-group-custom > label.btn{
    border-radius: 999px !important;
    border: 0 !important;
    margin: 0 !important;
  }
  
  /* Default (inactive) */
  html body.app .btn-group-toggle.btn-group-custom > label.btn{
    background: transparent !important;
    color: color-mix(in srgb, var(--lnc-text) 70%, transparent) !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease !important;
  }
  
  /* Hover (inactive): keep text dark, just lift bg slightly */
  html body.app .btn-group-toggle.btn-group-custom > label.btn:hover{
    background: color-mix(in srgb, var(--lnc-primary) 6%, transparent) !important;
    color: var(--lnc-text) !important;
  }
  
  /* Active pill */
  html body.app .btn-group-toggle.btn-group-custom > label.btn.active,
  html body.app .btn-group-toggle.btn-group-custom > label.btn[aria-pressed="true"]{
    background: var(--lnc-primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.08) !important;
  }
  
  /* No focus glow on this control */
  html body.app .btn-group-toggle.btn-group-custom > label.btn:focus,
  html body.app .btn-group-toggle.btn-group-custom > label.btn:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }

  /* =========================================================
   Pricing cards — match v1 (blue header + wave + clean body)
   Drop at VERY END of custom.css
   ========================================================= */

/* Card shell */
html body.app .pricing-plan{
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  
    border: 1px solid color-mix(in srgb, var(--lnc-border) 70%, transparent) !important;
    border-radius: calc(2 * var(--border-radius)) !important;
    overflow: hidden !important;
  
    background: var(--white) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
  }
  
  html body.app .pricing-header{
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
  
    padding: 2.2rem 2.2rem 4.2rem !important;
    background: var(--lnc-primary) !important;
    color: #fff !important;
  
    border-radius: calc(2 * var(--border-radius)) 
                   calc(2 * var(--border-radius)) 
                   0 0 !important;
  
    overflow: hidden !important;
  }

  /* =========================================================
   Pricing wave — v1 (encoded + safe)
   ========================================================= */

html body.app .pricing-plan .pricing-header{
    position: relative !important;
    overflow: hidden !important;
  }
  
  /* Wave */
  html body.app .pricing-plan .pricing-header::after{
    content: "" !important;
    position: absolute !important;
    left: -10% !important;
    right: -10% !important;
    bottom: -35px !important;
    height: 135px !important;
    background-size: 120% 135px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background-repeat: no-repeat !important;
    background-position: bottom center !important;
  
    /* encoded SVG so it cannot “break” on new lines */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20300%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M30.913%2C43.944c0%2C0%2C42.911-34.464%2C87.51-14.191c77.31%2C35.14%2C113.304-1.952%2C146.638-4.729c48.654-4.056%2C69.94%2C16.218%2C69.94%2C16.218v54.396H30.913V43.944z%27%20fill%3D%27rgba(255%2C255%2C255%2C0.32)%27/%3E%3Cpath%20d%3D%27M-35.667%2C44.628c0%2C0%2C42.91-34.463%2C87.51-14.191c77.31%2C35.141%2C113.304-1.952%2C146.639-4.729c48.653-4.055%2C69.939%2C16.218%2C69.939%2C16.218v54.396H-35.667V44.628z%27%20fill%3D%27rgba(255%2C255%2C255%2C0.22)%27/%3E%3Cpath%20d%3D%27M43.415%2C98.342c0%2C0%2C48.283-68.927%2C109.133-68.927c65.886%2C0%2C97.983%2C67.914%2C97.983%2C67.914v3.716H42.401L43.415%2C98.342z%27%20fill%3D%27rgba(255%2C255%2C255%2C0.28)%27/%3E%3Cpath%20d%3D%27M-34.667%2C62.998c0%2C0%2C56-45.667%2C120.316-27.839C167.484%2C57.842%2C197%2C41.332%2C232.286%2C30.428c53.07-16.399%2C104.047%2C36.903%2C104.047%2C36.903l1.333%2C36.667l-372-2.954L-34.667%2C62.998z%27%20fill%3D%27rgba(255%2C255%2C255%2C1)%27/%3E%3C/svg%3E");
  }

  /* =========================================================
   PRICING – v1 wave join + FIX wave layering (price not cut)
   Put at VERY END of custom.css
   ========================================================= */

/* 1) Ensure header creates a stacking context */
html body.app .pricing-plan .pricing-header{
  position: relative !important;
  overflow: hidden !important; /* keeps wave tidy */
}

/* 2) Force all header content ABOVE the wave */
html body.app .pricing-plan .pricing-header > *{
  position: relative !important;
  z-index: 3 !important;
}

/* 3) Force wave BEHIND header content */
html body.app .pricing-plan .pricing-header::after{
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 4) Safety: if price elements aren’t direct children, hard-raise them too */
html body.app .pricing-plan .pricing-header .pricing-name,
html body.app .pricing-plan .pricing-header .pricing-price,
html body.app .pricing-plan .pricing-header .pricing-price-amount,
html body.app .pricing-plan .pricing-header .pricing-price-currency,
html body.app .pricing-plan .pricing-header .pricing-price-currency-symbol,
html body.app .pricing-plan .pricing-header .pricing-details{
  position: relative !important;
  z-index: 4 !important;
}

/* 5) Body – join wave + remove dead space (your v1 block) */
html body.app .pricing-plan .pricing-body{
  background: #fff !important;
  border-radius: 0 0 16px 16px !important;

  /* real “gap killer” */
  margin-top: -28px !important;

  position: relative !important;
  z-index: 2 !important;

  /* stop space-between stretching */
  justify-content: flex-start !important;

  /* tighten */
  padding-top: .75rem !important;

  height: auto !important;
  flex: 0 0 auto !important;
}
  
  /* Header typography */
  html body.app .pricing-name{
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    margin: 0 0 .75rem !important;
  }
  
  html body.app .pricing-price{
    margin: .25rem 0 1.05rem !important;
    color: #fff !important;
  }
  
  html body.app .pricing-price-currency{
    color: rgba(255,255,255,.85) !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
    letter-spacing: .02em !important;
  }
  
  html body.app .pricing-price-amount{
    color: #fff !important;
    font-size: 3.4rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  
  html body.app .pricing-details{
    color: rgba(255,255,255,.92) !important;
    font-size: 1rem !important;
    max-width: 22rem !important;
  }
  
  /* Body */
  html body.app .pricing-body{
    background: var(--white) !important;
    padding: 1.75rem 2.2rem 2.2rem !important;
    height: 100% !important;
  
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  
  /* Feature list */
  html body.app .pricing-features{
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.5rem !important;
  }
  
  html body.app .pricing-features li{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  
    margin: .9rem 0 !important;
    padding: 0 !important;
  
    color: var(--lnc-text) !important;
    font-size: 1rem !important;
  }
  
  /* Make the “number/unlimited” part feel bolder like v1 */
  html body.app .pricing-features li strong{
    font-weight: 800 !important;
  }
  
  /* Icons in list (keeps your green checks / red x) */
  html body.app .pricing-features li svg,
  html body.app .pricing-features li i{
    flex: 0 0 auto !important;
  }
  
  /* Tag pill (e.g. 34% off) */
  html body.app .pricing-tag{
    position: absolute !important;
    top: 1.6rem !important;
    left: calc(50% + 3.6rem) !important; /* sits to the right of plan name */
    transform: translateX(-50%) !important;
  
    font-size: .78rem !important;
    font-weight: 700 !important;
    padding: .25rem .65rem !important;
    border-radius: 999px !important;
  
    background: color-mix(in srgb, #22c55e 22%, white) !important;
    color: color-mix(in srgb, #14532d 80%, black) !important;
  
    border: 1px solid color-mix(in srgb, #22c55e 35%, transparent) !important;
    z-index: 2 !important;
  }
  
  /* Button at bottom of card */
  html body.app .pricing-plan .btn{
    border-radius: 14px !important;
    padding: .95rem 1.1rem !important;
    font-weight: 700 !important;
  }
  
  /* Outline button for Free card style */
  html body.app .pricing-plan .btn.btn-outline-light,
  html body.app .pricing-plan .btn.btn-outline-primary{
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--lnc-border) 80%, transparent) !important;
    color: var(--lnc-text) !important;
  }
  
  /* Solid primary button for paid cards */
  html body.app .pricing-plan .btn.btn-primary{
    background: var(--lnc-primary) !important;
    border-color: var(--lnc-primary) !important;
    color: #fff !important;
  }
  
  /* Dark mode tweaks */
  html body.app [data-theme-style="dark"] .pricing-plan{
    background: color-mix(in srgb, var(--lnc-bg) 92%, black) !important;
    border-color: color-mix(in srgb, var(--lnc-border) 55%, transparent) !important;
  }
  
  html body.app [data-theme-style="dark"] .pricing-body{
    background: color-mix(in srgb, var(--lnc-bg) 92%, black) !important;
  }
  
  html body.app [data-theme-style="dark"] .pricing-features li{
    color: var(--lnc-text) !important;
  }

/* =========================================
   FAQ – V1 Parity (LNC exact markup)
   Final Clean Version
   ========================================= */

/* -----------------------------------------
   Outer container
------------------------------------------ */
html body.app #faq_accordion.accordion.index-faq{
    background: #fbfbfc !important;
    border-radius: 20px !important;
    padding: 1.5rem !important;
  }
  
  /* -----------------------------------------
     Card reset
  ------------------------------------------ */
  html body.app #faq_accordion.accordion.index-faq .card{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 0 1rem 0 !important;
  }
  
  html body.app #faq_accordion.accordion.index-faq .card:last-child{
    margin-bottom: 0 !important;
  }
  
  html body.app #faq_accordion.accordion.index-faq .card-body{
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  
  /* -----------------------------------------
     Question button (white pill)
  ------------------------------------------ */
  html body.app #faq_accordion.accordion.index-faq h3{
    margin: 0 !important;
  }
  
  html body.app #faq_accordion.accordion.index-faq h3 > button.btn{
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
  
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
  
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  
    text-align: left !important;
    box-shadow: none !important;
    outline: none !important;
  
    color: var(--lnc-text) !important;
  }
  
  /* Kill bootstrap hover tint */
  html body.app #faq_accordion.accordion.index-faq h3 > button.btn:hover,
  html body.app #faq_accordion.accordion.index-faq h3 > button.btn:focus,
  html body.app #faq_accordion.accordion.index-faq h3 > button.btn:active{
    background: #ffffff !important;
    color: var(--lnc-text) !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* -----------------------------------------
     Answer panel
  ------------------------------------------ */
  html body.app #faq_accordion.accordion.index-faq [id^="faq_accordion_answer_"]{
    background: transparent !important;
    border: 0 !important;
    padding: .75rem 1.25rem 0.25rem !important;
    color: rgba(17,24,39,.70) !important;
    margin-top: .25rem !important;
  }
  
  /* -----------------------------------------
     Chevron wrapper (subtle grey circle)
  ------------------------------------------ */
  html body.app #faq_accordion.accordion.index-faq button span[data-icon]{
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #e7e8e9 !important;
  
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  
    flex: 0 0 32px !important;
  }
  
  /* -----------------------------------------
     Icon rendering (FA + Lucide safe)
  ------------------------------------------ */
  
  /* Base SVG */
  html body.app #faq_accordion.accordion.index-faq button span[data-icon] svg{
    width: 16px !important;
    height: 16px !important;
    color: var(--lnc-muted) !important;
    display: block !important;
  }
  
  /* Font Awesome (fill-based) */
  html body.app #faq_accordion.accordion.index-faq button span[data-icon] svg.svg-inline--fa{
    fill: currentColor !important;
    stroke: none !important;
  }
  
  /* Lucide (stroke-based) */
  html body.app #faq_accordion.accordion.index-faq button span[data-icon] svg.lucide{
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }
  
/* =========================================
   Info cards under pricing – V1 parity (tokenised)
   ========================================= */

/* Target the 3 cards under the pricing section */
html body.app .card.mb-md-0.h-100.up-animation{
   /* border: 1px solid rgba(15,23,42,.10) !important;  */
    border-radius: 18px !important;
    box-shadow: 0 4px 14px rgba(16,24,40,.06) !important;
    overflow: hidden !important;
    background: var(--lnc-surface) !important;
  }
  
  /* Card body layout */
  html body.app .card.mb-md-0.h-100.up-animation .card-body.icon-zoom-animation{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  
    padding: 2rem 2.25rem !important;
    gap: .9rem !important;
  }
  
  /* Kill any inherited centering on children */
  html body.app .card.mb-md-0.h-100.up-animation .card-body.icon-zoom-animation *{
    text-align: left !important;
  }
  
  /* Icon badge (first wrapper) */
  html body.app .card.mb-md-0.h-100.up-animation .card-body.icon-zoom-animation > div:first-child,
  html body.app .card.mb-md-0.h-100.up-animation .card-body.icon-zoom-animation > span:first-child{
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
  
    display: grid !important;
    place-items: center !important;
  
    background: var(--lnc-primary-weak) !important;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.08) !important;
    margin-bottom: .4rem !important;
  }
  
  /* Icon inside badge (Lucide + FA) */
  html body.app .card.mb-md-0.h-100.up-animation .card-body.icon-zoom-animation svg,
  html body.app .card.mb-md-0.h-100.up-animation .card-body.icon-zoom-animation i{
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
  
    color: var(--lnc-primary) !important;
    stroke: currentColor !important; /* lucide */
  }
  
  /* Title */
  html body.app .card.mb-md-0.h-100.up-animation .card-title,
  html body.app .card.mb-md-0.h-100.up-animation h1,
  html body.app .card.mb-md-0.h-100.up-animation h2,
  html body.app .card.mb-md-0.h-100.up-animation h3,
  html body.app .card.mb-md-0.h-100.up-animation h4,
  html body.app .card.mb-md-0.h-100.up-animation h5{
    margin: 0 !important;
    font-size: 0.975rem !important;
    font-weight: 700 !important;
    color: var(--lnc-text) !important;
    line-height: 1.2 !important;
  }
  
  /* Body copy */
  html body.app .card.mb-md-0.h-100.up-animation p,
  html body.app .card.mb-md-0.h-100.up-animation .card-text{
    margin: 0 !important;
    max-width: 32ch !important;
  
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--lnc-muted) !important;
  }

  /* =========================================================
   LNC | Purchase plan page (tokenised)
   Scope: .purchase-plan-page
   Paste at VERY END of custom.css
   ========================================================= */

.purchase-plan-page{
    padding-top: 1.25rem;
    padding-bottom: 2.5rem;
  }
  
  /* --- Layout (optional grid helper if you actually have .purchase-plan-grid) --- */
  .purchase-plan-page .purchase-plan-grid{
    row-gap: 1.5rem;
  }
  
  @media (min-width: 1200px){
    .purchase-plan-page .purchase-plan-grid{
      display: grid;
      grid-template-columns: 1.15fr 1fr 0.95fr;
      column-gap: 1.5rem;
      align-items: start;
    }
  
    .purchase-plan-page .purchase-plan-grid > [class*="col-"]{
      max-width: none !important;
      flex: none !important;
      width: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
  
  /* --- Cards (global for this page) --- */
  .purchase-plan-page .card{
    border-radius: var(--lnc-radius-md) !important;
    border: 1px solid color-mix(in srgb, #0f172a 8%, transparent) !important;
    box-shadow: var(--lnc-shadow-sm) !important;
    background: var(--lnc-surface) !important;
  
    /* IMPORTANT: clips footer/background to rounded corners */
    overflow: hidden !important;
  }
  
  .purchase-plan-page .card-body{
    padding: 1.1rem 1.1rem !important;
  }
  
  .purchase-plan-page .card-footer{
    background: var(--lnc-surface) !important;
    border-top: 1px solid color-mix(in srgb, #0f172a 8%, transparent) !important;
    padding: .95rem 1.1rem !important;
  }
  
  /* --- Selectable “radio cards” --- */
  .purchase-plan-page .custom-radio-box{
    position: relative !important;
    border-radius: var(--lnc-radius-md) !important;
  }
  
  /* The actual card inside radio box */
  .purchase-plan-page .custom-radio-box .card{
    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      background-color .18s ease,
      transform .15s ease !important;
  }
  
  /* Hover */
  .purchase-plan-page .custom-radio-box:hover .card{
    border-color: color-mix(in srgb, var(--lnc-primary) 28%, var(--lnc-border)) !important;
    box-shadow: var(--lnc-shadow-md) !important;
    transform: translateY(-1px) !important;
  }
  
  /* ✅ Checked (NO layout shift: keep border 1px, use outline) */
  .purchase-plan-page .custom-control-input:checked ~ .card{
    border-color: color-mix(in srgb, var(--lnc-primary) 55%, var(--lnc-border)) !important;
    background: color-mix(in srgb, var(--lnc-primary) 5%, #fff) !important;
    box-shadow: 0 10px 28px rgba(55, 121, 240, .18) !important;
  
    outline: 2px solid color-mix(in srgb, var(--lnc-primary) 75%, transparent) !important;
    outline-offset: -2px !important;
  }
  
  /* Optional: left accent bar (safe, doesn’t affect layout) */
  .purchase-plan-page .custom-control-input:checked ~ .card::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: var(--lnc-primary) !important;
  }
  
  /* --- Price emphasis --- */
  .purchase-plan-page #monthly_price_amount,
  .purchase-plan-page #quarterly_price_amount,
  .purchase-plan-page #biannual_price_amount,
  .purchase-plan-page #annual_price_amount,
  .purchase-plan-page #lifetime_price_amount{
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
  }
  
  /* --- Savings badge (use your tokens) --- */
  .purchase-plan-page .badge.badge-success{
    background: color-mix(in srgb, #22c55e 14%, #fff) !important;
    color: #16a34a !important;
    border: 1px solid color-mix(in srgb, #22c55e 25%, transparent) !important;
    font-weight: 700 !important;
  }
  
  /* --- Sticky summary --- */
  .purchase-plan-page .sticky{
    position: sticky;
    top: 1rem;
  }
  
  .purchase-plan-page .sticky .card .text-muted{
    color: var(--lnc-muted) !important;
  }
  
  .purchase-plan-page .sticky .card-body .d-flex.justify-content-between span:last-child{
    font-weight: 600 !important;
    color: var(--lnc-text) !important;
  }
  
  /* Discount code button */
  .purchase-plan-page #code_button{
    border-radius: 10px !important;
    border: 1px solid color-mix(in srgb, #0f172a 10%, transparent) !important;
    font-weight: 600 !important;
  }
  
  .purchase-plan-page #code_button:hover{
    border-color: color-mix(in srgb, var(--lnc-primary) 35%, var(--lnc-border)) !important;
  }
  
  /* Checkout button */
  .purchase-plan-page button[name="submit"].btn.btn-lg.btn-block.btn-primary{
    border-radius: var(--lnc-radius-md) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 12px 26px rgba(55, 121, 240, .25) !important;
  }
  
  .purchase-plan-page button[name="submit"].btn.btn-lg.btn-block.btn-primary:hover{
    box-shadow: 0 16px 34px rgba(55, 121, 240, .30) !important;
    transform: translateY(-1px) !important;
  }
  
  /* Bottom reassurance cards */
  .purchase-plan-page .mt-8.row{
    margin-top: 3rem !important;
  }
  
  .purchase-plan-page .mt-8 .card{
    border-radius: var(--lnc-radius-lg) !important;
  }
  
  .purchase-plan-page .mt-8 .index-icon-container{
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    background: var(--lnc-primary-weak) !important;
    border: 1px solid color-mix(in srgb, var(--lnc-primary) 18%, transparent) !important;
  }
  
  /* Responsive: disable sticky */
  @media (max-width: 1199.98px){
    .purchase-plan-page .sticky{
      position: static;
      top: auto;
    }
  }
  
  /* Optional: hide “What you’ll get” column on small screens */
  @media (max-width: 991.98px){
    .purchase-plan-page .purchase-plan-grid > :nth-child(2){
      display: none;
    }
  }
  
  @media (min-width: 992px) and (max-width: 1199.98px){
    .purchase-plan-page .purchase-plan-grid{
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      column-gap: 1.25rem;
    }
  
    .purchase-plan-page .purchase-plan-grid > :nth-child(2){
      display: none;
    }
  }

  /* =========================================
   LNC – Input Group
   ========================================= */

html body.app .input-group > .form-control,
html body.app .input-group > .custom-select,
html body.app .input-group > .custom-file .custom-file-label {
  border-radius: var(--lnc-radius-md) !important;
  border: 1px solid var(--lnc-border) !important;
  background: var(--lnc-surface) !important;
  color: var(--lnc-text) !important;
  font-size: var(--lnc-fs-base) !important;
  height: var(--lnc-ctl-h) !important;
}

html body.app .input-group > .form-control:focus,
html body.app .input-group > .custom-select:focus,
html body.app .custom-file-input:focus ~ .custom-file-label {
  border-color: var(--lnc-primary-400) !important;
  box-shadow: 0 0 0 3px var(--lnc-primary-weak) !important;
}

/* Remove harsh negative margins look */
html body.app .input-group > * + * {
  margin-left: -1px !important;
}

html body.app .input-group-text {
    background: var(--lnc-surface-2) !important;
    border: 1px solid var(--lnc-border) !important;
    color: var(--lnc-muted) !important;
    border-radius: var(--lnc-radius-md) !important;
    font-size: var(--lnc-fs-sm) !important;
  }

  html body.app .custom-select {
    border-radius: var(--lnc-radius-md) !important;
    border: 1px solid var(--lnc-border) !important;
    background-color: var(--lnc-surface) !important;
    color: var(--lnc-text) !important;
    font-size: var(--lnc-fs-base) !important;
    height: var(--lnc-ctl-h) !important;
  }
  
  html body.app .custom-select:focus {
    border-color: var(--lnc-primary-400) !important;
    box-shadow: 0 0 0 3px var(--lnc-primary-weak) !important;
  }

  /* Base */

  html body.app .custom-file-label {
    border-radius: var(--lnc-radius-md) !important;
    border: 1px solid var(--lnc-border) !important;
    background: var(--lnc-surface) !important;
  }
  
  html body.app .custom-file-label::after {
    background: var(--lnc-surface-2) !important;
    border-left: 1px solid var(--lnc-border) !important;
    color: var(--lnc-muted) !important;
  }

  html body.app .custom-range::-webkit-slider-thumb,
html body.app .custom-range::-moz-range-thumb,
html body.app .custom-range::-ms-thumb {
  background-color: var(--lnc-primary) !important;
}

html body.app .custom-range::-webkit-slider-runnable-track,
html body.app .custom-range::-moz-range-track,
html body.app .custom-range::-ms-fill-lower,
html body.app .custom-range::-ms-fill-upper {
  background-color: var(--lnc-border-soft) !important;
}

/* =========================================
   LNC Form System – Base Controls
   ========================================= */

   html body.app .form-control,
   html body.app .custom-select,
   html body.app .custom-file-label {
     height: var(--lnc-ctl-h) !important;
     min-height: var(--lnc-ctl-h) !important;
   
     border-radius: var(--lnc-radius-md) !important;
     border: 1px solid var(--lnc-border) !important;
   
     background: var(--lnc-surface) !important;
     color: var(--lnc-text) !important;
   
     font-size: var(--lnc-fs-base) !important;
     font-weight: var(--lnc-fw-regular) !important;
   
     padding: 0 0.9rem !important;
   
     box-shadow: none !important;
     transition: border-color .15s ease, box-shadow .15s ease !important;
   }

   html body.app .form-control:focus,
html body.app .custom-select:focus,
html body.app .custom-file-input:focus ~ .custom-file-label {
  border-color: var(--lnc-primary-400) !important;
  box-shadow: 0 0 0 3px var(--lnc-primary-weak) !important;
  outline: none !important;
}

/* Remove ugly hard corners */
html body.app .input-group > .form-control,
html body.app .input-group > .custom-select,
html body.app .input-group > .custom-file {
  border-radius: var(--lnc-radius-md) !important;
}

/* Prefix / suffix */
html body.app .input-group-text {
  background: var(--lnc-surface-2) !important;
  border: 1px solid var(--lnc-border) !important;
  border-radius: var(--lnc-radius-md) !important;
  color: var(--lnc-muted) !important;
  font-size: var(--lnc-fs-sm) !important;
  height: var(--lnc-ctl-h) !important;
}

/* Base box */

  html body.app .custom-file-label {
    display: flex !important;
    align-items: center !important;
  }
  
  html body.app .custom-file-label::after {
    background: var(--lnc-surface-2) !important;
    border-left: 1px solid var(--lnc-border) !important;
    color: var(--lnc-muted) !important;
  }

  html body.app .custom-range::-webkit-slider-thumb,
html body.app .custom-range::-moz-range-thumb,
html body.app .custom-range::-ms-thumb {
  background-color: var(--lnc-primary) !important;
  border-radius: 999px !important;
}

html body.app .custom-range::-webkit-slider-runnable-track,
html body.app .custom-range::-moz-range-track,
html body.app .custom-range::-ms-fill-lower,
html body.app .custom-range::-ms-fill-upper {
  background-color: var(--lnc-border-soft) !important;
}

/* =========================================
   LNC Switch – Refined Status Colours
   ========================================= */

/* OFF state (before) */
html body.app .custom-switch .custom-control-label::before{
    background: #e5e7eb !important;   /* soft neutral */
    border: 1px solid #d1d5db !important;
  }
  
  /* Knob default */
  html body.app .custom-switch .custom-control-label::after{
    background: #9ca3af !important;   /* muted grey */
  }
  
  /* ON state (after) */
  html body.app .custom-switch .custom-control-input:checked ~ .custom-control-label::before{
    background: var(--lnc-primary) !important;   /* refined green */
    border-color: var(--lnc-primary)  !important;
  }
  
  /* ON knob */
  html body.app .custom-switch .custom-control-input:checked ~ .custom-control-label::after{
    background: #ffffff !important;
  }
  
  /* Focus ring */
  html body.app .custom-switch .custom-control-input:focus ~ .custom-control-label::before{
    box-shadow: var(--lnc-primary-100) !important;
  }

  /* =========================================
   LNC Tooltip – Clean (No Arrow)
   ========================================= */

html body.app .tooltip .arrow{
    display: none !important;
  }
  

  /* =========================================
   LNC – Select2 Arrow Upgrade
   ========================================= */

/* Remove default triangle */
html body.app .select2-container--default 
.select2-selection--single .select2-selection__arrow b{
  display: none !important;
}

/* Make arrow container proper size */
html body.app .select2-container--default 
.select2-selection--single .select2-selection__arrow{
  height: 100% !important;
  right: 12px !important;
  width: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Inject LNC chevron */
html body.app .select2-container--default 
.select2-selection--single .select2-selection__arrow::after{
  content: "";
  width: 6px;
  height: 6px;

  border-right: 2px solid var(--lnc-muted);
  border-bottom: 2px solid var(--lnc-muted);

  transform: rotate(45deg);
  transition: transform .18s ease, border-color .18s ease;
}

/* Rotate when open */
html body.app 
.select2-container--open 
.select2-container--default 
.select2-selection--single 
.select2-selection__arrow::after{
  transform: rotate(-135deg);
}

/* Optional: hover color */
html body.app 
.select2-container--default 
.select2-selection--single:hover 
.select2-selection__arrow::after{
  border-color: var(--lnc-primary);
}

/* =========================================
   LNC – Hide only gem icon in Add Block modal
   ========================================= */

   html body.app 
   #biolink_link_create_modal 
   svg.lucide-gem{
     display: none !important;
   }

   /* =========================================
   LNC – Add Block Modal Icon Consistency
   ========================================= */

/* Target only add block modal */
html body.app 
#biolink_link_create_modal 
.btn{

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;              /* consistent spacing */
}

/* Lucide icons */
html body.app 
#biolink_link_create_modal 
.btn svg.lucide{
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

/* FontAwesome stacks */
html body.app 
#biolink_link_create_modal 
.btn .fa-stack{
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  font-size: 18px !important;
  flex: 0 0 18px !important;
}

/* Remove extra right margin if present */
html body.app 
#biolink_link_create_modal 
.btn .mr-2{
  margin-right: 0 !important;
}

/* =========================================
   LNC – Normalize FA brand logos in Add Block modal
   ========================================= */

/* Remove forced white inverse */
html body.app 
#biolink_link_create_modal 
.fa-inverse{
  color: inherit !important;
}

/* Remove stacked circle visual weight */
html body.app 
#biolink_link_create_modal 
.fa-stack{
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  line-height: 18px !important;
}

/* Make brand logos same visual tone as Lucide */
html body.app 
#biolink_link_create_modal 
.fa-brands,
html body.app 
#biolink_link_create_modal 
.fab{
  color: var(--lnc-muted) !important;
}

/* Hover = match Lucide hover */
html body.app 
#biolink_link_create_modal 
.btn:hover .fa-brands,
html body.app 
#biolink_link_create_modal 
.btn:hover .fab{
  color: var(--lnc-primary) !important;
}

/* =========================================================
   Add Block Modal — All blocks as wrapped inline pills
   ========================================================= */

   html body.app #biolink_link_create_modal .modal-body .row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  
  /* Kill Bootstrap column sizing */
  html body.app #biolink_link_create_modal .modal-body [class*="col-"]{
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Each block wrapper spacing */
  html body.app #biolink_link_create_modal 
  .modal-body [data-block-category]{
    margin: 0 .6rem .8rem .6rem !important; /* left + right margin */
  }
  
  /* Button styling consistency */
  html body.app #biolink_link_create_modal 
  .modal-body [data-block-category] > button{
  
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
  
    width: auto !important;
    min-width: 0 !important;
  
    padding: .6rem 1rem !important;
    border-radius: 999px !important;
  }
  
  /* Icon consistency */
  html body.app #biolink_link_create_modal 
  .modal-body [data-block-category] svg,
  html body.app #biolink_link_create_modal 
  .modal-body [data-block-category] i{
  
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  /* =========================================================
   Add Block Modal — Tighter Vertical Rhythm
   ========================================================= */

/* Reduce spacing between category sections */
#biolink_link_create_modal .mb-4{
    margin-bottom: 1rem !important;
  }
  
  /* Reduce internal card padding */
  #biolink_link_create_modal .card-body{
    padding: .75rem 1rem !important;
  }
  
  /* Reduce row spacing */
  #biolink_link_create_modal .row{
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  
  /* Reduce block wrapper spacing */
  #biolink_link_create_modal [data-block-category]{
    margin: 0 .4rem .5rem .4rem !important;
  }
  
  /* Make buttons tighter */
  #biolink_link_create_modal [data-block-category] > button{
    padding: .45rem .85rem !important;
    font-size: .9rem !important;
  }
  
  /* Reduce header section height */
  #biolink_link_create_modal .card-header,
  #biolink_link_create_modal .card-body.d-flex{
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
  }

  /* =========================================================
   Modal Header — Icon Alignment Fix (LNC)
   ========================================================= */

#biolink_link_create_modal .modal-header,
.modal .modal-header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: .9rem 1.25rem !important;
}

/* Title group */
.modal .modal-title{
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  margin: 0 !important;
  font-weight: 600;
}

/* Icon inside header */
.modal .modal-title svg,
.modal .modal-title i{
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Close button alignment */
.modal .modal-header .close{
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

/* =========================================================
   Blocks list — fix icon alignment + hide ONLY lucide gem
   (WIDER SCOPE) Put at VERY END of custom.css
   ========================================================= */

/* Use a broader scope than .biolink_block_card */
html body.app .card .fa-stack,
html body.app .biolink_block_card .fa-stack{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: relative !important;
}

/* Kill FA stack absolute layout so icons actually center */
html body.app .card .fa-stack .fa-stack-1x,
html body.app .card .fa-stack .fa-stack-2x,
html body.app .card .fa-stack svg,
html body.app .card .fa-stack i,
html body.app .biolink_block_card .fa-stack .fa-stack-1x,
html body.app .biolink_block_card .fa-stack .fa-stack-2x,
html body.app .biolink_block_card .fa-stack svg,
html body.app .biolink_block_card .fa-stack i{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Normalise icon sizing */
html body.app .card .fa-stack svg,
html body.app .card .fa-stack i,
html body.app .biolink_block_card .fa-stack svg,
html body.app .biolink_block_card .fa-stack i{
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: block !important;
}

/* Hide ONLY the gem icon (regardless of nesting) */
html body.app .card .fa-stack svg.lucide-gem,
html body.app .card .fa-stack svg[data-lucide="gem"],
html body.app .card .fa-stack [data-lucide="gem"],
html body.app .biolink_block_card .fa-stack svg.lucide-gem,
html body.app .biolink_block_card .fa-stack svg[data-lucide="gem"],
html body.app .biolink_block_card .fa-stack [data-lucide="gem"]{
  display: none !important;
}

/* =========================================
   LNC – Input Group (JOINED prefix + field)
   Put at VERY END
   ========================================= */

   html body.app .input-group{
    border-radius: var(--lnc-radius-md) !important;
  }
  
  /* Stop the global -1px overlap for *this* component */
  html body.app .input-group > * + *{
    margin-left: 0 !important;
  }
  
  /* Prefix */
  html body.app .input-group-text{
    border-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height: var(--lnc-ctl-h) !important;
  }
  
  /* Editable field right side */
  html body.app .input-group > .form-control{
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  
  /* Unified focus ring (whole group) */
  html body.app .input-group:focus-within{
    box-shadow: 0 0 0 3px var(--lnc-primary-weak) !important;
  }
  
  /* Ensure focus border colour applies cleanly on both halves */
  html body.app .input-group:focus-within .input-group-text,
  html body.app .input-group:focus-within .form-control{
    border-color: var(--lnc-primary-400) !important;
  }

  /* =========================================================
   LNC — Remove ALL modal title icons
   ========================================================= */

/* Hide SVG icons inside modal titles */
html body.app .modal .modal-title svg{
    display: none !important;
  }
  
  /* Hide font icons inside modal titles */
  html body.app .modal .modal-title i{
    display: none !important;
  }
  
  /* Remove spacing left behind by icon margin classes */
  html body.app .modal .modal-title{
    gap: 0 !important;
  }

    /* =========================================================
   Lucide
   ========================================================= */
html body.app svg.lucide {
  display: inline-block;
  vertical-align: middle;
}


/* --- FIX: restore Bootstrap btn-block stacking (theme picker / admin UI only) --- */

/* 1) Centre CONTENT for ALL UI buttons (text + icons) */
html body.app .btn,
html body.app label.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .1rem !important;
  text-align: center !important;
}

/* 2) Restore STACKING / FULL WIDTH wherever Bootstrap intends btn-block */
html body.app .btn.btn-block,
html body.app label.btn.btn-block {
  display: flex !important;      /* keeps centring working */
  width: 100% !important;        /* restores block width */
}



/* Modal header icon sizing consistency */
html body.app .modal-header svg.lucide {
    width: 1rem !important;
    height: 1rem !important;
    stroke-width: 1.5 !important;
  }

/* =========================================================
   Soft alert outline buttons (no harsh borders)
   Matches splash-style UI
   ========================================================= */
/* =========================================================
   Soft alert outline buttons (pill, compact, no shadow)
   - Default: tinted bg + soft border + alert ink
   - Hover: bg turns white, border stays, text/icon stays alert ink
   - No box-shadow on hover
   ========================================================= */

   body.app .btn.btn-outline-success,
   body.app .btn.btn-outline-info,
   body.app .btn.btn-outline-warning,
   body.app .btn.btn-outline-danger {
     border-radius: var(--lnc-radius-md) !important;
   
     font-weight: var(--lnc-fw-medium) !important;
     line-height: 1 !important;
   
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     gap: .2rem !important;
   
     box-shadow: none !important;
     transition: background-color .15s ease, border-color .15s ease !important;
   }
   
   /* Keep icons in sync */
   body.app .btn.btn-outline-success svg,
   body.app .btn.btn-outline-success i,
   body.app .btn.btn-outline-info svg,
   body.app .btn.btn-outline-info i,
   body.app .btn.btn-outline-warning svg,
   body.app .btn.btn-outline-warning i,
   body.app .btn.btn-outline-danger svg,
   body.app .btn.btn-outline-danger i {
     color: currentColor !important;
     stroke: currentColor !important;
   }
   
   /* SUCCESS */
   body.app .btn.btn-outline-success {
     background: var(--lnc-alert-green-bg) !important;
     color: var(--lnc-alert-green-ink) !important;
     border: 1px solid var(--lnc-alert-green-badge-bg) !important; /* soft border */
   }
   body.app .btn.btn-outline-success:hover {
     background: #fff !important;
     color: var(--lnc-alert-green-ink) !important;
     border-color: var(--lnc-alert-green-badge-bg) !important;
     box-shadow: none !important;
   }
   
   /* INFO */
   body.app .btn.btn-outline-info {
     background: var(--lnc-alert-blue-bg) !important;
     color: var(--lnc-alert-blue-ink) !important;
     border: 1px solid var(--lnc-alert-blue-badge-bg) !important;
   }
   body.app .btn.btn-outline-info:hover {
     background: #fff !important;
     color: var(--lnc-alert-blue-ink) !important;
     border-color: var(--lnc-alert-blue-badge-bg) !important;
     box-shadow: none !important;
   }
   
   /* WARNING */
   body.app .btn.btn-outline-warning {
     background: var(--lnc-alert-yellow-bg) !important;
     color: var(--lnc-alert-yellow-ink) !important;
     border: 1px solid var(--lnc-alert-yellow-badge-bg) !important;
   }
   body.app .btn.btn-outline-warning:hover {
     background: #fff !important;
     color: var(--lnc-alert-yellow-ink) !important;
     border-color: var(--lnc-alert-yellow-badge-bg) !important;
     box-shadow: none !important;
   }
   
   /* DANGER */
   body.app .btn.btn-outline-danger {
     background: var(--lnc-alert-red-bg) !important;
     color: var(--lnc-alert-red-ink) !important;
     border: 1px solid var(--lnc-alert-red-badge-bg) !important;
   }
   body.app .btn.btn-outline-danger:hover {
     background: #fff !important;
     color: var(--lnc-alert-red-ink) !important;
     border-color: var(--lnc-alert-red-badge-bg) !important;
     box-shadow: none !important;
   }
   
   /* Active + Focus (keep it clean, no harsh rings) */
   body.app .btn.btn-outline-success:active,
   body.app .btn.btn-outline-info:active,
   body.app .btn.btn-outline-warning:active,
   body.app .btn.btn-outline-danger:active {
     transform: none !important;
     box-shadow: none !important;
   }
   
   body.app .btn.btn-outline-success:focus,
   body.app .btn.btn-outline-info:focus,
   body.app .btn.btn-outline-warning:focus,
   body.app .btn.btn-outline-danger:focus,
   body.app .btn.btn-outline-success.focus,
   body.app .btn.btn-outline-info.focus,
   body.app .btn.btn-outline-warning.focus,
   body.app .btn.btn-outline-danger.focus {
     box-shadow: 0 0 0 .15rem rgba(0,0,0,0) !important; /* effectively none */
     outline: none !important;
   }
   
   /* Disabled */
   body.app .btn.btn-outline-success:disabled,
   body.app .btn.btn-outline-info:disabled,
   body.app .btn.btn-outline-warning:disabled,
   body.app .btn.btn-outline-danger:disabled {
     opacity: .65 !important;
     box-shadow: none !important;
   }


/* File upload container — token based */
body.app .form-group .card.bg-gray-100 {
    background: var(--lnc-surface-2) !important;
    border: 1px dashed var(--lnc-border) !important;
    border-radius: var(--lnc-radius-md) !important;
    transition: border-color .2s ease, background .2s ease;
  }
  
  /* Hover */
  body.app .form-group .card.bg-gray-100:hover {
    border-color: var(--lnc-primary) !important;
    background: var(--lnc-surface-2) !important;
  }

  /* Replace Bootstrap white tick with LNC primary */
body.app .custom-checkbox 
.custom-control-input:checked 
~ .custom-control-label::after {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%232563eb' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") !important;
}

/* =========================================
   LNC – Form helper links (Create / Manage)
   ========================================= */

   body.app .form-group > .d-flex > a.small {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
  
    padding: .35rem .6rem !important;
    border-radius: var(--lnc-radius-md) !important;
  
    color: var(--lnc-primary) !important;
    background: var(--lnc-surface-2) !important;
    box-shadow: inset 0 0 0 1px var(--lnc-border) !important;
  
    font-weight: var(--lnc-fw-medium) !important;
    text-decoration: none !important;
    line-height: 1 !important;
  }
  
  /* Icon sizing */
  body.app .form-group > .d-flex > a.small svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
  }
  
  /* Hover */
  body.app .form-group > .d-flex > a.small:hover {
    background: var(--lnc-surface) !important;
    box-shadow: inset 0 0 0 1px var(--lnc-primary) !important;
  }

  /* =========================================================
   LNC – API Key input-group layout + spacing (scoped)
   ========================================================= */

body.app #api_key,
body.app input[name="api_key"]{
  height: var(--lnc-input-h, 44px) !important;
  padding: 0 var(--lnc-input-pad-x, 14px) !important;
  border-radius: var(--lnc-radius-md) !important;
}

/* Make the input-group feel like a single “row” with spacing */
body.app .input-group:has(#api_key),
body.app .input-group:has(input[name="api_key"]) {
  align-items: center !important;
  gap: 10px !important; /* space between input + buttons */
}

/* Stop Bootstrap from hard-joining */
body.app .input-group:has(#api_key) > .form-control,
body.app .input-group:has(input[name="api_key"]) > .form-control {
  border-radius: var(--lnc-radius-md) !important;
}

/* Append container: align buttons + spacing */
body.app .input-group:has(#api_key) .input-group-append,
body.app .input-group:has(input[name="api_key"]) .input-group-append {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 0 !important;
}

/* Buttons in the append: consistent size + radius */
body.app .input-group:has(#api_key) .input-group-append .btn,
body.app .input-group:has(input[name="api_key"]) .input-group-append .btn {
  height: var(--lnc-input-h, 44px) !important;
  width: var(--lnc-input-h, 44px) !important; /* square icon buttons */
  padding: 0 !important;
  border-radius: var(--lnc-radius-md) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Icons inside those buttons */
body.app .input-group:has(#api_key) .input-group-append .btn svg,
body.app .input-group:has(input[name="api_key"]) .input-group-append .btn svg {
  width: 18px !important;
  height: 18px !important;
}

/* Restore left border on API key input */
body.app .input-group > #api_key.form-control,
body.app .input-group > input[name="api_key"].form-control {
  border-left: 1px solid var(--lnc-border) !important;
}

/* Body font*/

body {
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #292524;
    text-align: left;
    background-color: #f9fafb;
}

/* Splash page: Countdown timer input-group (scoped) */
body.app .input-group > #link_unlock_seconds.form-control,
body.app .input-group > input[name="link_unlock_seconds"].form-control {
  width: 96px !important;               /* tweak 80–120 */
  max-width: 120px !important;
  flex: 0 0 auto !important;

  height: var(--lnc-input-h, 44px) !important;

  border-left: 1px solid var(--lnc-border) !important;
  border-top-left-radius: var(--lnc-radius-md) !important;
  border-bottom-left-radius: var(--lnc-radius-md) !important;
}

/* "seconds" helper badge */
body.app #link_unlock_seconds ~ .input-group-append > .input-group-text {
  height: var(--lnc-input-h, 44px) !important;
  min-height: var(--lnc-input-h, 44px) !important;

  display: inline-flex !important;
  align-items: center !important;

  padding: 0 12px !important;
  font-weight: 500 !important;

  background: var(--lnc-surface-2) !important;
  color: var(--lnc-muted) !important;
  border: 1px solid var(--lnc-border) !important;

  border-left: 0 !important;
  border-top-right-radius: var(--lnc-radius-md) !important;
  border-bottom-right-radius: var(--lnc-radius-md) !important;

  user-select: none !important;
  pointer-events: none !important;
}

/* small gap between input + badge (your design choice) */
body.app #link_unlock_seconds ~ .input-group-append {
  margin-left: 8px !important;
}

/* Pixel type selector — active state */
body.app .btn-group-toggle .btn.active,
body.app .btn-group-toggle .btn:active,
body.app .btn-group-toggle .btn input[type="radio"]:checked + * {
  
  background: var(--lnc-primary) !important;
  border-color: var(--lnc-primary) !important;
  color: #fff !important;

  box-shadow: 0 4px 12px rgba(55,121,240,.18) !important;
}

/* QR codes table — fix dropdown icon alignment */
body.app .table .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  
  body.app .table .dropdown-toggle svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.05 !important;
    vertical-align: middle !important;
  }

  /* =========================================================
   QR Code > Frame picker (scoped)
   Fix tile sizing, centering, active styling, SVG scaling
   ========================================================= */

body.app #frame_container .row.btn-group-toggle {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }
  
  body.app #frame_container .row.btn-group-toggle > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  /* The selectable tile is a LABEL styled like a button */
  body.app #frame_container label.btn.btn-light {
    /* layout */
    display: grid !important;
    place-items: center !important;
  
    /* sizing */
    min-height: 112px !important; /* tweak 96–140 */
    height: auto !important;
  
    /* look */
    background: var(--lnc-surface-2) !important;
    border: 1px solid var(--lnc-border) !important;
    border-radius: var(--lnc-radius-md) !important;
  
    /* kill inherited btn weirdness */
    padding: 10px !important;
    box-shadow: none !important;
    transform: none !important;
  }
  
  /* Hover */
  body.app #frame_container label.btn.btn-light:hover {
    background: var(--lnc-surface) !important;
    border-color: var(--lnc-primary) !important;
    box-shadow: none !important;
  }
  
  /* Selected (active) */
  body.app #frame_container label.btn.btn-light.active,
  body.app #frame_container label.btn.btn-light:active {
    background: var(--lnc-surface) !important;
    border-color: var(--lnc-primary) !important;
    box-shadow: none !important;
  }
  
  /* Remove bootstrap active/focus glow */
/* Frame picker — selected tile */
body.app #frame_container label.btn.btn-light.active,
body.app #frame_container label.btn.btn-light:active {

  background: var(--lnc-primary) !important;
  border-color: var(--lnc-primary) !important;

  box-shadow: none !important;
}

/* Keep icon unchanged */
body.app #frame_container label.btn.btn-light.active svg,
body.app #frame_container label.btn.btn-light:active svg {
  fill: currentColor !important;
  color: inherit !important;
}

  
  /* SVG preview sizing + centering */
  body.app #frame_container label.btn.btn-light svg {
    width: 64px !important;   /* tweak */
    height: 64px !important;  /* tweak */
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
  }
  
  /* Any stray content inside (rare) */
  body.app #frame_container label.btn.btn-light > * {
    margin: 0 !important;
  }

/* =========================================================
   FIX: Non-lucide SVG icons inside buttons must inherit color
   (QR style grids use <polygon>/<path> fill attributes)
   ========================================================= */

/* Make ALL children of non-lucide svgs inherit currentColor */
html body.app .btn svg:not(.lucide),
html body.app .btn svg:not(.lucide) * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Ensure the “tile” label sets the color that SVGs inherit */
html body.app label.btn {
  color: var(--lnc-text) !important;
}

/* When selected/active: icons should go white consistently */
html body.app label.btn.active,
html body.app label.btn:has(input[type="radio"]:checked) {
  color: #fff !important;
}

/* =========================================================
   QR create: Print button should match "Embedded data" button
   (scoped, avoids global bootstrap conflicts)
   ========================================================= */

   body.app #embedded_data_container_button.btn.btn-light,
   body.app .d-print-none .btn.btn-outline-secondary[onclick*="window.print"]{
     background: var(--lnc-surface-2) !important;
     border: 1px solid var(--lnc-border) !important;
     color: var(--lnc-text) !important;
     box-shadow: inset 0 0 0 1px var(--lnc-border) !important;
   }
   
   /* Hover: same behaviour as your light buttons (no harsh outline) */
   body.app .d-print-none .btn.btn-outline-secondary[onclick*="window.print"]:hover{
     background: var(--lnc-surface) !important;
     border-color: var(--lnc-border) !important;
     color: var(--lnc-text) !important;
     box-shadow: none !important;
   }
   
   /* Icon inherits text colour */
   body.app .d-print-none .btn.btn-outline-secondary[onclick*="window.print"] svg.lucide{
     stroke: currentColor !important;
     fill: none !important;
   }

   /* =========================================================
   LNC – QR Options input-groups (Size / Margin size) + px pill
   - Match API pattern (gap, no hard-join)
   - Keep px as helper pill
   ========================================================= */

/* Target only the QR option input-groups that have a "px" append */
body.app .input-group:has(.input-group-append > .input-group-text) {
    align-items: center !important;
    gap: 10px !important;
  }
  
  /* Inputs inside those groups: standalone field look */
  body.app .input-group:has(.input-group-append > .input-group-text) > .form-control {
    height: var(--lnc-input-h, 44px) !important;
    padding: 0 var(--lnc-input-pad-x, 14px) !important;
    border-radius: var(--lnc-radius-md) !important;
  
    border: 1px solid var(--lnc-border) !important;
  }
  
  /* Append: behave like a separate pill, not joined */
  body.app .input-group:has(.input-group-append > .input-group-text) .input-group-append {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 0 !important;
  }
  
  /* The "px" helper pill */
  body.app .input-group:has(.input-group-append > .input-group-text) .input-group-append > .input-group-text {
    height: var(--lnc-input-h, 44px) !important;
    padding: 0 12px !important;
  
    display: inline-flex !important;
    align-items: center !important;
  
    border-radius: var(--lnc-radius-md) !important;
    border: 1px solid var(--lnc-border) !important;
  
    background: var(--lnc-surface-2) !important;
    color: var(--lnc-muted) !important;
  
    user-select: none !important;
    pointer-events: none !important;
  }
  
  /* ---- Fallback (if :has() ever bites on older browsers) ---- */
  /* Only applies when the input-group-text is present */
  body.app .input-group .input-group-append > .input-group-text {
    height: var(--lnc-input-h, 44px) !important;
  }


  /* =========================================================
   Links statistics – spacing after "Clear statistics" icon
   ========================================================= */

  /* Links statistics – space between Clear icon and date picker */
body.app #daterangepicker{
    margin-left: 10px !important; /* tweak 6–14px */
  }

  /* =========================================================
   Radio checked state — use LNC primary token instead of white
   ========================================================= */

body.app .custom-radio .custom-control-input:checked 
~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232563eb'/%3e%3c/svg%3e") !important;
}

/* =========================================================
   LNC – Account plan card (matches plan/renew cards)
   Requires: .lnc-plan-card on the card wrapper
   ========================================================= */

   body.app .lnc-plan-card{
    overflow: hidden !important;
    border-radius: var(--lnc-radius-xl, 18px) !important;
    border: 1px solid var(--lnc-border) !important;
    background: #fff !important;
  }
  
  /* Blue header background */
  body.app .lnc-plan-card .card-body{
    position: relative !important;
    padding-top: 118px !important; /* more room so CTA isn't cramped */
  }
  
  /* Header layer goes BEHIND content */
  body.app .lnc-plan-card .card-body::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 150px !important;
    background: var(--lnc-primary) !important;
    z-index: 0 !important;
  }
  
  /* Ensure ALL direct content sits above the header layer */
  body.app .lnc-plan-card .card-body > *{
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Title on blue header */
  body.app .lnc-plan-card .card-body > h1.h4{
    position: absolute !important;
    top: 22px !important;
    left: 22px !important;
    right: 22px !important;
    margin: 0 !important;
  
    color: #fff !important;
    font-weight: 700 !important;
  }
  
  /* Expiry line on blue header */
  body.app .lnc-plan-card .card-body > h1.h4 + p.text-muted{
    position: absolute !important;
    top: 56px !important;
    left: 22px !important;
    right: 22px !important;
    margin: 0 !important;
  
    color: rgba(255,255,255,.86) !important;
    font-size: 0.92rem !important;
  }
  
  body.app .lnc-plan-card .card-body > h1.h4 + p.text-muted strong{
    color: #fff !important;
    font-weight: 700 !important;
  }
  
  /* Primary CTA */
  body.app .lnc-plan-card .card-body > a.btn.btn-block{
    background: var(--lnc-primary) !important;
    border: 1px solid var(--lnc-primary) !important;
    color: #fff !important;
  
    border-radius: var(--lnc-radius-md) !important;
    height: var(--lnc-input-h, 44px) !important;
    padding: 0 18px !important;
  
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  
    box-shadow: 0 10px 26px rgba(55,121,240,.18) !important;
    transition: all .2s ease !important;
  }
  
  /* Pricing-style hover */
  body.app .lnc-plan-card .card-body > a.btn.btn-block:hover{
    background: var(--lnc-primary-hover, #2f6be0) !important;
    border-color: var(--lnc-primary-hover, #2f6be0) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px rgba(55,121,240,.28) !important;
  }
  
  /* List: tighter spacing + no separators */
  body.app .lnc-plan-card ul.list-style-none.m-0{
    padding: 10px 6px 4px !important;
    margin: 0 !important;
  }
  
  body.app .lnc-plan-card ul.list-style-none.m-0 > li.d-flex{
    border: 0 !important;
    padding: 6px 10px !important;   /* reduced */
    margin: 0 0 2px 0 !important;    /* reduced */
  }
  
  /* View all button – softer secondary */
  body.app .lnc-plan-card .btn.btn-outline-light{
    background: #fff !important;
    border: 1px solid var(--lnc-border) !important;
    color: var(--lnc-text) !important;
  
    border-radius: var(--lnc-radius-md) !important;
    height: var(--lnc-input-h, 44px) !important;
    padding: 0 14px !important;
  
    box-shadow: none !important;
  }
  
  body.app .lnc-plan-card .btn.btn-outline-light:hover{
    background: var(--lnc-surface-2) !important;
    box-shadow: none !important;
  }
  
  body.app .lnc-plan-card .card-body{
    position: relative !important;
    padding-top: 160px !important; /* was 118px */
  }

  .p-lg-5 {
    padding: 3rem 1rem !important;
}

@media (min-width: 768px) {
.container-md,
.container-sm,
.container {
    max-width: 988px;
}
}

@media (min-width: 576px) {
.container-sm,
.container {
    max-width: 768px;
}
}