/* ==========================================================================
   SEMAI UI Kit — product-wide design system
   --------------------------------------------------------------------------
   Loaded globally from components/common/header.html (right after semai.css).
   Every selector is namespaced (.sem-*) so nothing here restyles existing
   markup — a page opts in by using the classes.

   Contents
     0.  Design tokens
     1.  Page hero
     2.  Cards
     3.  Buttons (incl. .sem-btn-ai: icon survives jQuery .text())
     4.  Form controls (segmented toggle, icon field, hint)
     5.  Status pills, tags, chips, avatars
     6.  KPI tiles, meter, stacked bar + legend
     7.  Data table + DataTables chrome (.sem-table-card)
     8.  Accordion (.sem-accordion)
     9.  Toolbar + search
     10. Empty state, banner, steps
     11. Responsive stacked table (.sem-table-stack)
     12. Motion + utilities
     13. Option cards (radio cards with logo / icon)
     14. Intent + funnel tags (.sem-intent-*, .sem-funnel-*)
     15. Tree table (.sem-tree: nested rows in a flat table)
     16. Sticky first column for horizontally scrolling tables
     17. Textarea, toggle chips, switch, AI prose
     18. Searchable select (bootstrap-select) - .sem-picker
     19. Tooltips - product-wide restyle of Bootstrap / MDB tooltips
     20. Site logo (domain logo with letter fallback) - .sem-logo

   Feature-specific styles belong in that feature's own stylesheet
   (e.g. static/css/aeo-query-cluster.css).
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Design tokens
   -------------------------------------------------------------------------- */
:root {
    --sem-ui-brand-25:  #FCFAFF;
    --sem-ui-brand-50:  #F9F5FF;
    --sem-ui-brand-100: #F4EBFF;
    --sem-ui-brand-200: #E9D7FE;
    --sem-ui-brand-300: #D6BBFB;
    --sem-ui-brand-500: #9E77ED;
    --sem-ui-brand-600: #7F56D9;
    --sem-ui-brand-700: #6941C6;
    --sem-ui-brand-800: #53389E;
    --sem-ui-brand-900: #42307D;

    --sem-ui-gray-25:  #FCFCFD;
    --sem-ui-gray-50:  #F9FAFB;
    --sem-ui-gray-100: #F2F4F7;
    --sem-ui-gray-200: #EAECF0;
    --sem-ui-gray-300: #D0D5DD;
    --sem-ui-gray-400: #98A2B3;
    --sem-ui-gray-500: #667085;
    --sem-ui-gray-600: #475467;
    --sem-ui-gray-700: #344054;
    --sem-ui-gray-800: #1D2939;
    --sem-ui-gray-900: #101828;

    --sem-ui-success-50:  #ECFDF3;
    --sem-ui-success-200: #ABEFC6;
    --sem-ui-success-500: #17B26A;
    --sem-ui-success-700: #067647;
    --sem-ui-danger-50:   #FEF3F2;
    --sem-ui-danger-200:  #FECDCA;
    --sem-ui-danger-500:  #F04438;
    --sem-ui-danger-700:  #B42318;
    --sem-ui-warning-50:  #FFFAEB;
    --sem-ui-warning-200: #FEDF89;
    --sem-ui-warning-500: #F79009;
    --sem-ui-warning-700: #B54708;
    --sem-ui-blue-50:     #EFF8FF;
    --sem-ui-blue-200:    #B2DDFF;
    --sem-ui-blue-500:    #2E90FA;
    --sem-ui-blue-700:    #175CD3;
    --sem-ui-orange-50:   #FEF6EE;
    --sem-ui-orange-200:  #F9DBAF;
    --sem-ui-orange-500:  #EF6820;
    --sem-ui-orange-700:  #B93815;
    --sem-ui-teal-50:     #F0FDF9;
    --sem-ui-teal-200:    #99F6E0;
    --sem-ui-teal-500:    #15B79E;
    --sem-ui-teal-700:    #107569;
    --sem-ui-pink-50:     #FDF2FA;
    --sem-ui-pink-200:    #FCCEEE;
    --sem-ui-pink-500:    #EE46BC;
    --sem-ui-pink-700:    #C11574;

    --sem-ui-border: #EAECF0;
    --sem-ui-radius-sm: 8px;
    --sem-ui-radius:    12px;
    --sem-ui-radius-lg: 16px;

    --sem-ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --sem-ui-shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --sem-ui-shadow-md: 0 8px 16px -4px rgba(16, 24, 40, .08), 0 2px 6px -2px rgba(16, 24, 40, .04);
    --sem-ui-shadow-brand: 0 6px 16px -4px rgba(127, 86, 217, .45);
    --sem-ui-ring: 0 0 0 4px rgba(127, 86, 217, .16);

    --sem-ui-gradient-brand: linear-gradient(135deg, #8B5CF6 0%, #7F56D9 45%, #6941C6 100%);
}


/* --------------------------------------------------------------------------
   1. Page hero
   -------------------------------------------------------------------------- */
/* Stacking rules for the hero (keep them; both were user-reported bugs):
   - No overflow:hidden: dropdowns opened inside a hero (bootstrap-select
     menus) must extend past it. The decorative orbs are background layers,
     so the rounded corners clip them automatically.
   - No z-index on .sem-hero: the navbar is `.navbar.z-3`, i.e. a stacking
     context at z-index 3, so its mega-menus are effectively at 3 page-wide.
     Anything below the navbar must stay under 3 or it covers those menus.
     .sem-hero-inner is z-index 1, which already beats page content; wrap
     widgets with their own z-indexes (TinyMCE: toolbar z-index 1) in
     .sem-isolate so they cannot paint over hero menus. */
.sem-hero {
    position: relative;
    border: 1px solid var(--sem-ui-brand-200);
    border-radius: var(--sem-ui-radius-lg);
    background:
        radial-gradient(circle 110px at calc(100% - 50px) 20px, rgba(127, 86, 217, .18), transparent 70%),
        radial-gradient(circle 80px at calc(100% - 240px) calc(100% + 30px), rgba(46, 144, 250, .12), transparent 70%),
        radial-gradient(1200px 300px at 100% 0%, rgba(158, 119, 237, .14), transparent 60%),
        linear-gradient(135deg, var(--sem-ui-brand-50) 0%, #FFFFFF 58%, #F5F8FF 100%);
    padding: 24px 28px;
    box-shadow: var(--sem-ui-shadow-xs);
}

.sem-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sem-hero-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    flex: 1 1 420px;
}

.sem-hero-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    background: var(--sem-ui-gradient-brand);
    box-shadow: var(--sem-ui-shadow-brand), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.sem-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sem-ui-brand-700);
    margin-bottom: 2px;
}

.sem-hero-title {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--sem-ui-gray-900);
    margin: 0 0 4px 0;
    letter-spacing: -.01em;
}

.sem-hero-sub {
    font-size: 14px;
    line-height: 1.6;
    color: var(--sem-ui-gray-600);
    margin: 0;
    max-width: 720px;
}

.sem-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.sem-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}


/* --------------------------------------------------------------------------
   2. Cards
   -------------------------------------------------------------------------- */
.sem-card {
    background: #fff;
    border: 1px solid var(--sem-ui-border);
    border-radius: var(--sem-ui-radius-lg);
    box-shadow: var(--sem-ui-shadow-xs);
}

.sem-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--sem-ui-border);
}

.sem-card-head.no-border { border-bottom: 0; padding-bottom: 6px; }

.sem-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--sem-ui-gray-900);
    margin: 0;
    line-height: 1.4;
}

.sem-card-title .sem-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--sem-ui-brand-700);
    background: var(--sem-ui-brand-50);
    border: 1px solid var(--sem-ui-brand-200);
    border-radius: 999px;
    padding: 0 9px;
    line-height: 20px;
}

.sem-card-sub {
    font-size: 13px;
    color: var(--sem-ui-gray-500);
    margin: 2px 0 0 0;
    line-height: 1.5;
}

.sem-card-body { padding: 22px; }
.sem-card-body.flush { padding: 0; }


/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.sem-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: var(--sem-font-inter, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .15s ease;
}
.sem-btn:focus-visible { outline: none; box-shadow: var(--sem-ui-ring); }
.sem-btn:disabled,
.sem-btn.disabled { cursor: not-allowed; opacity: .7; transform: none !important; }

.sem-btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; gap: 6px; }
.sem-btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }

.sem-btn-primary {
    color: #fff;
    background: var(--sem-ui-gradient-brand);
    border-color: var(--sem-ui-brand-700);
    box-shadow: var(--sem-ui-shadow-xs), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.sem-btn-primary:hover {
    color: #fff;
    box-shadow: var(--sem-ui-shadow-brand);
    transform: translateY(-1px);
}
.sem-btn-primary:active { transform: translateY(0); }

.sem-btn-secondary {
    color: var(--sem-ui-gray-700);
    background: #fff;
    border-color: var(--sem-ui-gray-300);
    box-shadow: var(--sem-ui-shadow-xs);
}
.sem-btn-secondary:hover {
    color: var(--sem-ui-gray-900);
    background: var(--sem-ui-gray-50);
}

.sem-btn-soft {
    color: var(--sem-ui-brand-700);
    background: var(--sem-ui-brand-50);
    border-color: var(--sem-ui-brand-200);
}
.sem-btn-soft:hover {
    color: var(--sem-ui-brand-800);
    background: var(--sem-ui-brand-100);
}

.sem-btn-ghost {
    color: var(--sem-ui-gray-600);
    background: transparent;
}
.sem-btn-ghost:hover { color: var(--sem-ui-brand-700); background: var(--sem-ui-brand-50); }

/* Square icon-only button (copy, open link, ...) */
.sem-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--sem-ui-gray-400);
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s ease;
}
.sem-icon-btn:hover {
    color: var(--sem-ui-brand-700);
    background: var(--sem-ui-brand-50);
    border-color: var(--sem-ui-brand-200);
}
.sem-icon-btn:focus-visible { outline: none; box-shadow: var(--sem-ui-ring); }

/* AI action button: the sparkle is drawn by CSS so it survives JS that
   rewrites the label with jQuery .text(); while :disabled it becomes a
   spinner (e.g. "Generating..."). */
.sem-btn-ai::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2l2.1 6.1L19 10l-5.9 1.9L11 18l-2.1-6.1L3 10l5.9-1.9z'/%3E%3Cpath d='M19 14l.95 2.55L22.5 17.5l-2.55.95L19 21l-.95-2.55L15.5 17.5l2.55-.95z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2l2.1 6.1L19 10l-5.9 1.9L11 18l-2.1-6.1L3 10l5.9-1.9z'/%3E%3Cpath d='M19 14l.95 2.55L22.5 17.5l-2.55.95L19 21l-.95-2.55L15.5 17.5l2.55-.95z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sem-btn-ai:disabled::before {
    -webkit-mask: none;
            mask: none;
    background: transparent;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    flex-basis: 15px;
    animation: sem-spin .7s linear infinite;
}

/* Refresh / re-run button: icon drawn by CSS (survives JS that rewrites the
   label with .text()), spinner while :disabled. */
.sem-btn-refresh::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sem-btn-refresh:disabled::before {
    -webkit-mask: none;
            mask: none;
    background: transparent;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sem-spin .7s linear infinite;
}


/* --------------------------------------------------------------------------
   4. Form controls
   -------------------------------------------------------------------------- */
.sem-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sem-ui-gray-700);
    margin-bottom: 8px;
}

/* Segmented toggle built on real radio inputs:
   <div class="sem-segmented">
     <input type="radio" id="a" name="x" checked><label for="a">A</label>
     <input type="radio" id="b" name="x"><label for="b">B</label>
   </div> */
.sem-segmented {
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
    padding: 4px;
    background: var(--sem-ui-gray-100);
    border: 1px solid var(--sem-ui-border);
    border-radius: 12px;
    max-width: 100%;
}
.sem-segmented > input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.sem-segmented > label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sem-ui-gray-500);
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s ease;
}
.sem-segmented > label:hover { color: var(--sem-ui-gray-800); }
.sem-segmented > input[type="radio"]:checked + label {
    color: var(--sem-ui-brand-700);
    background: #fff;
    box-shadow: var(--sem-ui-shadow-sm);
}
.sem-segmented > input[type="radio"]:focus-visible + label { box-shadow: var(--sem-ui-ring); }
.sem-segmented > label i { font-size: 15px; }

/* Text input with a leading icon */
.sem-field {
    position: relative;
    width: 100%;
}
.sem-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sem-ui-gray-400);
    font-size: 18px;
    pointer-events: none;
    transition: color .15s ease;
}
/* input.sem-input beats semai.css's global input[type="text"] rule */
input.sem-input,
.sem-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px 0 44px;
    font-family: var(--sem-font-inter, 'Inter', sans-serif);
    font-size: 15px;
    color: var(--sem-ui-gray-900);
    background: #fff;
    border: 1px solid var(--sem-ui-gray-300);
    border-radius: 10px;
    box-shadow: var(--sem-ui-shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input.sem-input::placeholder,
.sem-input::placeholder { color: var(--sem-ui-gray-400); }
input.sem-input:hover,
.sem-input:hover { border-color: var(--sem-ui-brand-300); }
input.sem-input:focus,
.sem-input:focus {
    outline: none;
    border-color: var(--sem-ui-brand-500);
    box-shadow: var(--sem-ui-shadow-xs), var(--sem-ui-ring);
}
.sem-field:focus-within .sem-field-icon { color: var(--sem-ui-brand-600); }

/* Native <select> styled to match .sem-input (works inside .sem-field for a
   leading icon). A required select still on its empty placeholder option is
   :invalid, which greys the text like a placeholder. */
select.sem-select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 40px 0 14px;
    font-family: var(--sem-font-inter, 'Inter', sans-serif);
    font-size: 15px;
    color: var(--sem-ui-gray-900);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
    border: 1px solid var(--sem-ui-gray-300);
    border-radius: 10px;
    box-shadow: var(--sem-ui-shadow-xs);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sem-field select.sem-select { padding-left: 44px; }
select.sem-select:hover { border-color: var(--sem-ui-brand-300); }
select.sem-select:focus {
    outline: none;
    border-color: var(--sem-ui-brand-500);
    box-shadow: var(--sem-ui-shadow-xs), var(--sem-ui-ring);
}
select.sem-select:invalid { color: var(--sem-ui-gray-400); }
select.sem-select option { color: var(--sem-ui-gray-900); }
select.sem-select option[value=""] { color: var(--sem-ui-gray-400); }

.sem-field-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sem-ui-gray-500);
}
.sem-field-hint i { color: var(--sem-ui-brand-500); margin-top: 1px; }


/* --------------------------------------------------------------------------
   5. Status pills, tags, chips, avatars
   -------------------------------------------------------------------------- */
.sem-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--sem-ui-gray-200);
    background: var(--sem-ui-gray-50);
    color: var(--sem-ui-gray-700);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}
.sem-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 6px;
}
.sem-status.is-success { background: var(--sem-ui-success-50); border-color: var(--sem-ui-success-200); color: var(--sem-ui-success-700); }
.sem-status.is-danger  { background: var(--sem-ui-danger-50);  border-color: var(--sem-ui-danger-200);  color: var(--sem-ui-danger-700); }
.sem-status.is-warning,
.sem-status.is-progress { background: var(--sem-ui-warning-50); border-color: var(--sem-ui-warning-200); color: var(--sem-ui-warning-700); }
.sem-status.is-brand   { background: var(--sem-ui-brand-50);   border-color: var(--sem-ui-brand-200);   color: var(--sem-ui-brand-700); }
.sem-status.is-progress .sem-status-dot { animation: sem-pulse 1.4s ease-in-out infinite; }

/* Tags (intent, category ...) */
.sem-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 6px;
    border: 1px solid var(--sem-ui-gray-200);
    background: var(--sem-ui-gray-50);
    color: var(--sem-ui-gray-700);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    text-transform: capitalize;
}
.sem-tag-brand  { background: var(--sem-ui-brand-50);   border-color: var(--sem-ui-brand-200);   color: var(--sem-ui-brand-700); }
.sem-tag-green  { background: var(--sem-ui-success-50); border-color: var(--sem-ui-success-200); color: var(--sem-ui-success-700); }
.sem-tag-blue   { background: var(--sem-ui-blue-50);    border-color: var(--sem-ui-blue-200);    color: var(--sem-ui-blue-700); }
.sem-tag-orange { background: var(--sem-ui-orange-50);  border-color: var(--sem-ui-orange-200);  color: var(--sem-ui-orange-700); }
.sem-tag-teal   { background: var(--sem-ui-teal-50);    border-color: var(--sem-ui-teal-200);    color: var(--sem-ui-teal-700); }
.sem-tag-pink   { background: var(--sem-ui-pink-50);    border-color: var(--sem-ui-pink-200);    color: var(--sem-ui-pink-700); }

/* Chips: hero feature chips and toggleable filter chips */
.sem-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--sem-ui-border);
    background: rgba(255, 255, 255, .8);
    color: var(--sem-ui-gray-700);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}
.sem-chip i { color: var(--sem-ui-brand-600); font-size: 13px; }

button.sem-chip { cursor: pointer; font-family: inherit; transition: all .15s ease; }
button.sem-chip:hover { border-color: var(--sem-ui-brand-300); color: var(--sem-ui-brand-700); }
button.sem-chip:focus-visible { outline: none; box-shadow: var(--sem-ui-ring); }
button.sem-chip.active {
    background: var(--sem-ui-brand-600);
    border-color: var(--sem-ui-brand-600);
    color: #fff;
}
button.sem-chip.active i { color: #fff; }
.sem-chip .sem-chip-count {
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--sem-ui-gray-100);
    color: var(--sem-ui-gray-600);
    text-align: center;
    line-height: 18px;
}
button.sem-chip.active .sem-chip-count { background: rgba(255, 255, 255, .25); color: #fff; }

/* Rounded square icon/avatar */
.sem-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    font-size: 17px;
    background: var(--sem-ui-brand-50);
    color: var(--sem-ui-brand-700);
    border: 1px solid var(--sem-ui-brand-100);
}
.sem-avatar.is-blue   { background: var(--sem-ui-blue-50);    color: var(--sem-ui-blue-700);    border-color: #D1E9FF; }
.sem-avatar.is-orange { background: var(--sem-ui-orange-50);  color: var(--sem-ui-orange-700);  border-color: #FDEAD7; }
.sem-avatar.is-green  { background: var(--sem-ui-success-50); color: var(--sem-ui-success-700); border-color: #DCFAE6; }
.sem-avatar.is-gray   { background: var(--sem-ui-gray-50);    color: var(--sem-ui-gray-600);    border-color: var(--sem-ui-gray-200); }
.sem-avatar-sm { width: 30px; height: 30px; flex-basis: 30px; font-size: 14px; border-radius: 8px; }


/* --------------------------------------------------------------------------
   6. KPI tiles, meter, stacked bar
   -------------------------------------------------------------------------- */
.sem-kpi {
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--sem-ui-border);
    border-radius: var(--sem-ui-radius);
    box-shadow: var(--sem-ui-shadow-xs);
    transition: box-shadow .2s ease, transform .2s ease;
}
.sem-kpi:hover { box-shadow: var(--sem-ui-shadow-md); transform: translateY(-1px); }
.sem-kpi-body { min-width: 0; }
.sem-kpi-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--sem-ui-gray-500);
    margin: 0;
}
.sem-kpi-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sem-ui-gray-900);
    margin: 2px 0 0 0;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sem-kpi-value.is-text { font-size: 18px; text-transform: capitalize; padding-top: 4px; }
.sem-kpi-sub { font-size: 12.5px; color: var(--sem-ui-gray-500); margin: 2px 0 0 0; }

/* Thin progress / magnitude meter */
.sem-meter {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: var(--sem-ui-gray-100);
    overflow: hidden;
}
.sem-meter > span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sem-ui-brand-300), var(--sem-ui-brand-600));
    transition: width .6s cubic-bezier(.2, .7, .2, 1);
}

/* Stacked distribution bar + legend */
.sem-stackbar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--sem-ui-gray-100);
    gap: 2px;
}
.sem-stackbar > span {
    display: block;
    height: 100%;
    min-width: 4px;
    transition: flex-grow .5s ease;
}
.sem-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 12px;
}
.sem-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--sem-ui-gray-600);
    text-transform: capitalize;
}
.sem-legend-item b { color: var(--sem-ui-gray-900); font-weight: 700; }
.sem-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }


/* --------------------------------------------------------------------------
   7. Data table + DataTables chrome
   Wrap a table (and its DataTables wrapper) in .sem-table-card.
   -------------------------------------------------------------------------- */
.sem-table-card .table {
    margin: 0;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}
.sem-table-card .table > thead > tr > th {
    background: var(--sem-ui-gray-50);
    color: var(--sem-ui-gray-500);
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 12px 20px;
    border-top: 1px solid var(--sem-ui-border);
    border-bottom: 1px solid var(--sem-ui-border);
    white-space: nowrap;
    vertical-align: middle;
}
.sem-table-card .table > tbody > tr > td {
    padding: 14px 20px;
    vertical-align: middle;
    color: var(--sem-ui-gray-700);
    border-bottom: 1px solid var(--sem-ui-border);
    background: #fff;
    transition: background-color .15s ease;
}
.sem-table-card .table > tbody > tr:last-child > td { border-bottom: 0; }
.sem-table-card .table > tbody > tr:hover > td { background: var(--sem-ui-brand-25); }
.sem-table-card .table > tbody > tr.clickable-row { cursor: pointer; }
.sem-table-card .table p { margin: 0; }

/* DataTables controls */
.sem-table-card .dataTables_wrapper { padding: 0; }
.sem-table-card .sem-dt-top,
.sem-table-card .sem-dt-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
}
.sem-table-card .sem-dt-bottom { border-top: 1px solid var(--sem-ui-border); }
.sem-table-card .sem-dt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sem-table-card .dataTables_length label,
.sem-table-card .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: var(--sem-ui-gray-500);
    font-weight: 500;
}
/* div.dataTables_wrapper prefix outranks dataTables.bootstrap5.css */
.sem-table-card div.dataTables_wrapper div.dataTables_length select {
    height: 36px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--sem-ui-gray-300);
    border-radius: 8px;
    font-size: 13px;
    color: var(--sem-ui-gray-700);
    background-color: #fff;
    box-shadow: var(--sem-ui-shadow-xs);
}
.sem-table-card div.dataTables_wrapper div.dataTables_filter input {
    margin: 0 !important;
    width: 260px;
    max-width: 100%;
    height: 38px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--sem-ui-gray-300);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--sem-ui-gray-900);
    box-shadow: var(--sem-ui-shadow-xs);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") 12px center no-repeat;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sem-table-card div.dataTables_wrapper div.dataTables_filter input:focus {
    outline: none;
    border-color: var(--sem-ui-brand-500);
    box-shadow: var(--sem-ui-ring);
}
.sem-table-card .dataTables_info {
    padding: 0 !important;
    font-size: 13px;
    color: var(--sem-ui-gray-500);
}
.sem-table-card .dataTables_paginate { padding: 0 !important; }
.sem-table-card .dataTables_paginate .pagination { margin: 0; gap: 4px; flex-wrap: wrap; }
.sem-table-card .dataTables_paginate .page-link {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--sem-ui-gray-600);
    background: transparent;
    box-shadow: none;
}
.sem-table-card .dataTables_paginate .page-link:hover { background: var(--sem-ui-gray-50); color: var(--sem-ui-gray-900); }
.sem-table-card .dataTables_paginate .page-item.active .page-link {
    background: var(--sem-ui-brand-50);
    border-color: var(--sem-ui-brand-200);
    color: var(--sem-ui-brand-700);
}
.sem-table-card .dataTables_paginate .page-item.disabled .page-link { opacity: .45; }
.sem-table-card td.dataTables_empty { padding: 0 !important; background: #fff !important; }

/* Sort arrows tuned to the lighter header */
.sem-table-card table.dataTable thead > tr > th.sorting::before,
.sem-table-card table.dataTable thead > tr > th.sorting::after { color: var(--sem-ui-gray-400); }


/* --------------------------------------------------------------------------
   8. Accordion — separated card items on top of Bootstrap/MDB markup
   -------------------------------------------------------------------------- */
.sem-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sem-accordion .accordion-item {
    border: 1px solid var(--sem-ui-border) !important;
    border-radius: var(--sem-ui-radius) !important;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--sem-ui-shadow-xs);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.sem-accordion .accordion-item:hover { box-shadow: var(--sem-ui-shadow-sm); }
.sem-accordion .accordion-item.is-open {
    border-color: var(--sem-ui-brand-200) !important;
    box-shadow: var(--sem-ui-shadow-md);
}
.sem-accordion .accordion-header { margin: 0; }
.sem-accordion .accordion-button {
    gap: 14px;
    padding: 16px 20px;
    background: #fff;
    color: var(--sem-ui-gray-900);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: background-color .15s ease;
}
.sem-accordion .accordion-button:hover { background: var(--sem-ui-brand-25); }
.sem-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(180deg, var(--sem-ui-brand-50), #fff);
    color: var(--sem-ui-gray-900);
    border-bottom: 1px solid var(--sem-ui-border);
}
.sem-accordion .accordion-button:focus-visible { box-shadow: inset var(--sem-ui-ring) !important; }
.sem-accordion .accordion-button::after {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-left: 4px;
    border-radius: 8px;
    background-color: var(--sem-ui-gray-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 16px;
    background-repeat: no-repeat;
    transform: rotate(0deg);
    transition: transform .2s ease, background-color .2s ease;
}
.sem-accordion .accordion-button:not(.collapsed)::after {
    background-color: var(--sem-ui-brand-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236941C6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    transform: rotate(-180deg);
}
.sem-accordion .accordion-body { padding: 0; }


/* --------------------------------------------------------------------------
   9. Toolbar + search
   -------------------------------------------------------------------------- */
.sem-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sem-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sem-search {
    position: relative;
    width: 300px;
    max-width: 100%;
}
.sem-search > i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sem-ui-gray-400);
    font-size: 15px;
    pointer-events: none;
}
.sem-search > input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--sem-ui-gray-300);
    border-radius: 10px;
    font-size: 14px;
    color: var(--sem-ui-gray-900);
    background: #fff;
    box-shadow: var(--sem-ui-shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sem-search > input::placeholder { color: var(--sem-ui-gray-400); }
.sem-search > input:focus {
    outline: none;
    border-color: var(--sem-ui-brand-500);
    box-shadow: var(--sem-ui-ring);
}


/* --------------------------------------------------------------------------
   10. Empty state, banner, steps
   -------------------------------------------------------------------------- */
.sem-empty {
    text-align: center;
    padding: 44px 20px;
}
.sem-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 24px;
    color: var(--sem-ui-brand-600);
    background: var(--sem-ui-brand-100);
    box-shadow: 0 0 0 8px var(--sem-ui-brand-50);
    margin-bottom: 16px;
}
.sem-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--sem-ui-gray-900);
    margin: 0 0 4px 0;
}
.sem-empty-text {
    font-size: 13.5px;
    color: var(--sem-ui-gray-500);
    margin: 0 auto;
    max-width: 420px;
    line-height: 1.6;
}
.sem-empty-actions { margin-top: 18px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.sem-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--sem-ui-radius);
    border: 1px solid var(--sem-ui-brand-200);
    background: var(--sem-ui-brand-50);
    color: var(--sem-ui-brand-800);
    font-size: 14px;
    line-height: 1.55;
}
.sem-banner > i { font-size: 18px; color: var(--sem-ui-brand-600); margin-top: 1px; }
.sem-banner a { color: var(--sem-ui-brand-700); font-weight: 600; text-decoration: underline; }
.sem-banner.is-danger { border-color: var(--sem-ui-danger-200); background: var(--sem-ui-danger-50); color: var(--sem-ui-danger-700); }
.sem-banner.is-danger > i { color: var(--sem-ui-danger-500); }

.sem-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.sem-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: var(--sem-ui-radius);
    background: var(--sem-ui-gray-25);
    border: 1px dashed var(--sem-ui-gray-200);
}
.sem-step-num {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--sem-ui-brand-700);
    background: #fff;
    border: 1px solid var(--sem-ui-brand-200);
    box-shadow: var(--sem-ui-shadow-xs);
}
.sem-step-title { font-size: 13.5px; font-weight: 600; color: var(--sem-ui-gray-900); margin: 0; line-height: 1.4; }
.sem-step-text  { font-size: 12.5px; color: var(--sem-ui-gray-500); margin: 2px 0 0 0; line-height: 1.5; }


/* --------------------------------------------------------------------------
   11. Responsive stacked table
   Add .sem-table-stack to a table and data-label="..." to each <td>; below
   768px every row becomes a card.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .sem-table-card .table.sem-table-stack > thead { display: none; }
    .sem-table-card .table.sem-table-stack,
    .sem-table-card .table.sem-table-stack > tbody,
    .sem-table-card .table.sem-table-stack > tbody > tr,
    .sem-table-card .table.sem-table-stack > tbody > tr > td {
        display: block;
        width: 100% !important;
    }
    .sem-table-card .table.sem-table-stack > tbody > tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--sem-ui-border);
    }
    .sem-table-card .table.sem-table-stack > tbody > tr:last-child { border-bottom: 0; }
    .sem-table-card .table.sem-table-stack > tbody > tr > td {
        padding: 5px 0;
        border: 0;
        background: transparent !important;
    }
    .sem-table-card .table.sem-table-stack > tbody > tr > td[data-label]:not([data-label=""]) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .sem-table-card .table.sem-table-stack > tbody > tr > td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--sem-ui-gray-400);
    }
    .sem-table-card .table.sem-table-stack > tbody > tr > td.dataTables_empty { display: block; }

    .sem-table-card .sem-dt-top,
    .sem-table-card .sem-dt-bottom { padding: 12px 16px; }
    .sem-table-card div.dataTables_wrapper div.dataTables_filter,
    .sem-table-card div.dataTables_wrapper div.dataTables_filter label,
    .sem-table-card div.dataTables_wrapper div.dataTables_filter input { width: 100%; }
}


/* --------------------------------------------------------------------------
   12. Motion + utilities
   -------------------------------------------------------------------------- */
@keyframes sem-spin { to { transform: rotate(360deg); } }

@keyframes sem-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.75); }
}

@keyframes sem-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sem-fade-up { animation: sem-fade-up .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.sem-fade-up.d-1 { animation-delay: .05s; }
.sem-fade-up.d-2 { animation-delay: .1s; }
.sem-fade-up.d-3 { animation-delay: .15s; }

.sem-truncate {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sem-muted { color: var(--sem-ui-gray-500) !important; }

/* Wrap third-party widgets (TinyMCE, grids, charts) so their internal
   z-indexes stay inside their own stacking context and can never paint over
   menus that belong to the rest of the page. */
.sem-isolate { isolation: isolate; }
.sem-divider-dot::before { content: "\2022"; margin: 0 6px; color: var(--sem-ui-gray-300); }

@media (max-width: 767.98px) {
    .sem-hero { padding: 20px; }
    .sem-hero-title { font-size: 19px; }
    .sem-hero-icon { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }
    .sem-hero-actions,
    .sem-hero-actions .sem-btn { width: 100%; }
    .sem-card-head { padding: 16px; }
    .sem-card-body { padding: 16px; }
    .sem-steps { grid-template-columns: 1fr; }
    .sem-search { width: 100%; }
    .sem-kpi { padding: 14px; }
}

@media (max-width: 575.98px) {
    .sem-kpi { flex-direction: column; gap: 10px; }
    .sem-kpi-value.is-text { font-size: 16px; white-space: normal; }
    .sem-kpi-value { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .sem-fade-up,
    .sem-status.is-progress .sem-status-dot,
    .sem-btn-ai:disabled::before,
    .sem-btn-refresh:disabled::before { animation: none; }
    .sem-meter > span,
    .sem-kpi,
    .sem-btn { transition: none; }
}


/* --------------------------------------------------------------------------
   13. Option cards — radio inputs rendered as selectable cards
   <div class="sem-option-grid">
     <label class="sem-option-card">
       <input type="radio" name="x" value="a" required>
       <span class="sem-option-body">
         <span class="sem-option-media"><img ...> or <i class="bi ..."></i></span>
         <span class="sem-option-text"><b>Title</b><small>Description</small></span>
       </span>
     </label>
   </div>
   -------------------------------------------------------------------------- */
.sem-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.sem-option-card {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}
/* Kept focusable + validatable (required) but visually hidden */
.sem-option-card > input {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.sem-option-body {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 11px 12px;
    border: 1px solid var(--sem-ui-gray-300);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--sem-ui-shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.sem-option-card:hover .sem-option-body { border-color: var(--sem-ui-brand-300); }
.sem-option-card > input:focus-visible + .sem-option-body { box-shadow: var(--sem-ui-ring); }
.sem-option-card > input:checked + .sem-option-body {
    border-color: var(--sem-ui-brand-600);
    background: var(--sem-ui-brand-25);
    box-shadow: 0 0 0 1px var(--sem-ui-brand-600), var(--sem-ui-shadow-xs);
}
.sem-option-media {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sem-ui-gray-50);
    border: 1px solid var(--sem-ui-gray-200);
    color: var(--sem-ui-gray-600);
    font-size: 15px;
    overflow: hidden;
}
.sem-option-media img { width: 20px; height: 20px; object-fit: contain; }
/* <img> followed by an <i> fallback: the icon shows only if the image fails (img onerror="this.remove()") */
.sem-option-media img + i,
.sem-platform-mark img + i { display: none; }
.sem-option-card > input:checked + .sem-option-body .sem-option-media {
    background: #fff;
    border-color: var(--sem-ui-brand-200);
    color: var(--sem-ui-brand-700);
}
.sem-option-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sem-option-text b { font-size: 13.5px; font-weight: 600; color: var(--sem-ui-gray-900); }
.sem-option-text small { font-size: 12px; color: var(--sem-ui-gray-500); margin-top: 2px; }
/* Radio dot in the corner; becomes a check when selected */
.sem-option-body::after {
    content: "";
    margin-left: auto;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--sem-ui-gray-300);
    background: #fff;
    transition: all .15s ease;
}
.sem-option-card > input:checked + .sem-option-body::after {
    border-color: var(--sem-ui-brand-600);
    background: var(--sem-ui-brand-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}


/* --------------------------------------------------------------------------
   14. Intent + funnel tags
   Intent: <span class="sem-tag sem-intent-{slug}">  (commercial, informational ...)
   Funnel: <span class="sem-funnel sem-funnel-{tofu|mofu|bofu}">
   -------------------------------------------------------------------------- */
.sem-intent-commercial    { background: var(--sem-ui-brand-50);   border-color: var(--sem-ui-brand-200);   color: var(--sem-ui-brand-700); }
.sem-intent-transactional { background: var(--sem-ui-success-50); border-color: var(--sem-ui-success-200); color: var(--sem-ui-success-700); }
.sem-intent-informational { background: var(--sem-ui-blue-50);    border-color: var(--sem-ui-blue-200);    color: var(--sem-ui-blue-700); }
.sem-intent-navigational  { background: var(--sem-ui-orange-50);  border-color: var(--sem-ui-orange-200);  color: var(--sem-ui-orange-700); }
.sem-intent-education,
.sem-intent-educational   { background: var(--sem-ui-teal-50);    border-color: var(--sem-ui-teal-200);    color: var(--sem-ui-teal-700); }

.sem-funnel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--sem-ui-gray-200);
    background: var(--sem-ui-gray-50);
    color: var(--sem-ui-gray-700);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 18px;
    text-transform: uppercase;
    white-space: nowrap;
}
.sem-funnel::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.sem-funnel-tofu { background: var(--sem-ui-blue-50);    border-color: var(--sem-ui-blue-200);    color: var(--sem-ui-blue-700); }
.sem-funnel-mofu { background: var(--sem-ui-warning-50); border-color: var(--sem-ui-warning-200); color: var(--sem-ui-warning-700); }
.sem-funnel-bofu { background: var(--sem-ui-success-50); border-color: var(--sem-ui-success-200); color: var(--sem-ui-success-700); }


/* --------------------------------------------------------------------------
   15. Tree table — nested data rendered as flat <tr>s (parent/child linked
   by data attributes). .sem-tree on the <table>; rows get .sem-tree-root /
   .sem-tree-child / .sem-tree-leaf; the first cell holds
   <div class="sem-tree-node depth-N"> [toggle|spacer] [num] [text] </div>
   -------------------------------------------------------------------------- */
.sem-tree-node {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.sem-tree-node.depth-1 { padding-left: 30px; }
.sem-tree-node.depth-2 { padding-left: 74px; }

/* Elbow connector from the parent's toggle to this node */
.sem-tree-node.depth-1::before,
.sem-tree-node.depth-2::before {
    content: "";
    position: absolute;
    top: -16px;
    height: 29px;
    width: 14px;
    border-left: 1.5px solid var(--sem-ui-gray-300);
    border-bottom: 1.5px solid var(--sem-ui-gray-300);
    border-bottom-left-radius: 8px;
}
.sem-tree-node.depth-1::before { left: 12px; }
.sem-tree-node.depth-2::before { left: 56px; }

.sem-tree-toggle {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--sem-ui-gray-200);
    background: #fff;
    color: var(--sem-ui-gray-500);
    font-size: 11px;
    cursor: pointer;
    box-shadow: var(--sem-ui-shadow-xs);
    transition: all .15s ease;
    position: relative;
    z-index: 1;
}
.sem-tree-toggle:hover { color: var(--sem-ui-brand-700); border-color: var(--sem-ui-brand-300); background: var(--sem-ui-brand-25); }
.sem-tree-toggle.is-open { color: var(--sem-ui-brand-700); border-color: var(--sem-ui-brand-200); background: var(--sem-ui-brand-50); }
.sem-tree-spacer { flex: 0 0 26px; width: 26px; }

.sem-tree-num {
    flex: 0 0 auto;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sem-ui-brand-700);
    background: var(--sem-ui-brand-50);
    border: 1px solid var(--sem-ui-brand-100);
}
.sem-tree-node.depth-2 .sem-tree-num {
    color: var(--sem-ui-gray-600);
    background: var(--sem-ui-gray-50);
    border-color: var(--sem-ui-gray-200);
}
.sem-tree-text { min-width: 0; line-height: 1.5; padding-top: 2px; }

.sem-tree > tbody > tr.sem-tree-root > td { background: var(--sem-ui-gray-25); }
.sem-tree > tbody > tr.sem-tree-root.is-open > td { background: var(--sem-ui-brand-25); }
.sem-tree > tbody > tr.sem-tree-child > td,
.sem-tree > tbody > tr.sem-tree-leaf > td { padding-top: 10px; padding-bottom: 10px; }
.sem-tree > tbody > tr.sem-tree-leaf > td { font-size: 13px; }


/* --------------------------------------------------------------------------
   16. Sticky first column — for wide tables inside a horizontal scroller
   -------------------------------------------------------------------------- */
.sem-sticky-first > thead > tr > th:first-child,
.sem-sticky-first > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}
.sem-sticky-first > tbody > tr > td:first-child { box-shadow: 1px 0 0 var(--sem-ui-border); }


/* Platform mark (ChatGPT / Gemini / Perplexity) — see SemUI.platformMark() */
.sem-platform-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 7px;
    border: 1px solid var(--sem-ui-border);
    background: #fff;
    color: var(--sem-ui-gray-900);
    font-size: 13px;
    overflow: hidden;
}
.sem-platform-mark img { width: 16px; height: 16px; object-fit: contain; }


/* --------------------------------------------------------------------------
   17. Textarea, toggle chips (multi-select checkboxes), switch
   -------------------------------------------------------------------------- */

/* <textarea class="sem-textarea"> — matches .sem-input */
textarea.sem-textarea {
    display: block;
    width: 100%;
    min-height: 96px;
    padding: 12px 14px;
    font-family: var(--sem-font-inter, 'Inter', sans-serif);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--sem-ui-gray-900);
    background: #fff;
    border: 1px solid var(--sem-ui-gray-300);
    border-radius: 10px;
    box-shadow: var(--sem-ui-shadow-xs);
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.sem-textarea::placeholder { color: var(--sem-ui-gray-400); }
textarea.sem-textarea:hover { border-color: var(--sem-ui-brand-300); }
textarea.sem-textarea:focus {
    outline: none;
    border-color: var(--sem-ui-brand-500);
    box-shadow: var(--sem-ui-shadow-xs), var(--sem-ui-ring);
}

/* Toggle chips built on real checkboxes (or radios):
   <div class="sem-toggle-chips">
     <input type="checkbox" id="a" ...><label for="a"><i class="bi ..."></i> A</label>
   </div> */
.sem-toggle-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sem-toggle-chips > input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.sem-toggle-chips > label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 14px 8px 12px;
    border: 1px solid var(--sem-ui-gray-300);
    border-radius: 999px;
    background: #fff;
    color: var(--sem-ui-gray-700);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    box-shadow: var(--sem-ui-shadow-xs);
    transition: all .15s ease;
}
.sem-toggle-chips > label:hover { border-color: var(--sem-ui-brand-300); color: var(--sem-ui-gray-900); }
.sem-toggle-chips > label i { font-size: 15px; }
/* Check circle that fills when selected */
.sem-toggle-chips > label::after {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-left: 2px;
    border-radius: 50%;
    border: 1px solid var(--sem-ui-gray-300);
    background: #fff;
    transition: all .15s ease;
}
.sem-toggle-chips > input:checked + label {
    border-color: var(--sem-ui-brand-600);
    background: var(--sem-ui-brand-25);
    color: var(--sem-ui-brand-800);
    box-shadow: 0 0 0 1px var(--sem-ui-brand-600);
}
.sem-toggle-chips > input:checked + label::after {
    border-color: var(--sem-ui-brand-600);
    background: var(--sem-ui-brand-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.sem-toggle-chips > input:focus-visible + label { box-shadow: var(--sem-ui-ring); }

/* Switch: <label class="sem-switch"><input type="checkbox" ...><span class="sem-switch-track"></span> Label</label>
   Wrapping label = works even when the markup is cloned (no ids needed). */
.sem-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sem-ui-gray-700);
    user-select: none;
}
.sem-switch > input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.sem-switch-track {
    position: relative;
    flex: 0 0 36px;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--sem-ui-gray-200);
    transition: background-color .18s ease;
}
.sem-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .2);
    transition: transform .18s ease;
}
.sem-switch > input:checked + .sem-switch-track { background: var(--sem-ui-brand-600); }
.sem-switch > input:checked + .sem-switch-track::after { transform: translateX(16px); }
.sem-switch > input:focus-visible + .sem-switch-track { box-shadow: var(--sem-ui-ring); }

/* Rich text produced by the AI (headings / paragraphs / lists) in a compact card */
.sem-prose { font-size: 14px; line-height: 1.7; color: var(--sem-ui-gray-700); word-break: break-word; }
.sem-prose h1, .sem-prose h2 { font-size: 16px; font-weight: 700; color: var(--sem-ui-gray-900); margin: 14px 0 6px; line-height: 1.4; }
.sem-prose h3, .sem-prose h4, .sem-prose h5, .sem-prose h6 { font-size: 14.5px; font-weight: 700; color: var(--sem-ui-gray-900); margin: 12px 0 4px; line-height: 1.4; }
.sem-prose > :first-child, .sem-prose > span > :first-child { margin-top: 0; }
.sem-prose p { margin: 0 0 10px; }
.sem-prose ul, .sem-prose ol { margin: 0 0 10px; padding-left: 20px; }
.sem-prose li { margin-bottom: 4px; }
.sem-prose strong, .sem-prose b { color: var(--sem-ui-gray-900); }
.sem-prose a { color: var(--sem-ui-brand-700); }


/* --------------------------------------------------------------------------
   18. Searchable select — bootstrap-select (.selectpicker) styled like
       select.sem-select. Opt in by wrapping the select:
         <div class="sem-picker">                     (no icon)
         <div class="sem-field sem-picker">           (with a leading icon)
           <i class="bi bi-geo-alt sem-field-icon"></i>
           <select class="selectpicker" data-live-search="true" data-width="100%">...</select>
         </div>
       .sem-picker-sm = 40px high (toolbars / filters).
   -------------------------------------------------------------------------- */
.sem-picker { position: relative; width: 100%; }
.sem-picker .bootstrap-select { width: 100% !important; }
.sem-picker .bootstrap-select > .dropdown-toggle {
    --sem-btn-border-color: var(--sem-ui-gray-300);
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0 40px 0 14px;
    background: #fff !important;
    border: 1px solid var(--sem-ui-gray-300) !important;
    border-radius: 10px !important;
    box-shadow: var(--sem-ui-shadow-xs) !important;
    color: var(--sem-ui-gray-900) !important;
    font-family: var(--sem-font-inter, 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    outline: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sem-field.sem-picker .bootstrap-select > .dropdown-toggle { padding-left: 44px; }
/* The icon sits before the plugin's button in the DOM; lift it above the button. */
.sem-field.sem-picker > .sem-field-icon { z-index: 1; }
.sem-picker.sem-picker-sm .bootstrap-select > .dropdown-toggle { height: 40px; font-size: 14px; }
/* bootstrap-select absolutely positions the label; centre it in the box */
.sem-picker .bootstrap-select > .dropdown-toggle .filter-option {
    position: static;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
}
.sem-picker .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sem-picker .bootstrap-select > .dropdown-toggle:hover { border-color: var(--sem-ui-brand-300) !important; }
.sem-picker .bootstrap-select.show > .dropdown-toggle,
.sem-picker .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--sem-ui-brand-500) !important;
    box-shadow: var(--sem-ui-shadow-xs), var(--sem-ui-ring) !important;
}
.sem-picker:focus-within > .sem-field-icon { color: var(--sem-ui-brand-600); }
/* Chevron matching select.sem-select */
.sem-picker .bootstrap-select > .dropdown-toggle::after {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 0;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: transform .2s ease;
}
.sem-picker .bootstrap-select.show > .dropdown-toggle::after { transform: rotate(180deg); }
.sem-picker .bootstrap-select .dropdown-menu {
    min-width: 100% !important;
    margin-top: 6px;
    border: 1px solid var(--sem-ui-border);
    border-radius: 12px;
    box-shadow: var(--sem-ui-shadow-md);
    padding: 6px;
}
.sem-picker .bootstrap-select .dropdown-menu .bs-searchbox { padding: 2px 2px 6px; }
.sem-picker .bootstrap-select .dropdown-menu .bs-searchbox input {
    height: 38px;
    padding: 0 12px 0 36px;
    border-radius: 8px;
    border: 1px solid var(--sem-ui-gray-300);
    font-size: 13.5px;
    box-shadow: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") 12px center no-repeat;
}
.sem-picker .bootstrap-select .dropdown-menu .bs-searchbox input:focus {
    outline: none;
    border-color: var(--sem-ui-brand-500);
    box-shadow: var(--sem-ui-ring);
}
.sem-picker .bootstrap-select .dropdown-menu li a {
    border-radius: 8px;
    font-size: 14px;
    padding: 8px 10px;
    color: var(--sem-ui-gray-700);
}
.sem-picker .bootstrap-select .dropdown-menu li a:hover,
.sem-picker .bootstrap-select .dropdown-menu li a:focus { background: var(--sem-ui-gray-50); color: var(--sem-ui-gray-900); }
.sem-picker .bootstrap-select .dropdown-menu li.selected a,
.sem-picker .bootstrap-select .dropdown-menu li a.active,
.sem-picker .bootstrap-select .dropdown-menu li a.selected {
    background: var(--sem-ui-brand-50);
    color: var(--sem-ui-brand-700);
    font-weight: 600;
}
.sem-picker .bootstrap-select .dropdown-menu li.no-results {
    padding: 10px;
    font-size: 13px;
    color: var(--sem-ui-gray-500);
    background: transparent;
}


/* --------------------------------------------------------------------------
   19. Tooltips — product-wide restyle.
       Every tooltip in the app (Bootstrap 5.1 JS via data-bs-toggle="tooltip"
       or $().tooltip(), and MDB's data-mdb-tooltip-init) renders MDB's
       .tooltip markup, which MDB paints as a flat grey box with the arrow
       hidden. Override MDB's variables here (this file loads after
       mdb.min.css) for a dark tooltip with an arrow. No markup changes needed.
       Bootstrap 5.1 places the tooltip flush against the trigger (offset 0),
       so the arrow lives in padding on the trigger-facing side (Bootstrap's
       own approach); MDB's 6px offset just adds a little extra air.
   -------------------------------------------------------------------------- */
.tooltip {
    --mdb-tooltip-bg: #0C111D;
    --mdb-tooltip-color: #fff;
    --mdb-tooltip-max-width: 280px;
    --mdb-tooltip-padding-x: 12px;
    --mdb-tooltip-padding-y: 8px;
    --mdb-tooltip-border-radius: 8px;
    --mdb-tooltip-font-size: 12.5px;
    --mdb-tooltip-opacity: 1;
    --mdb-tooltip-arrow-width: 12px;
    --mdb-tooltip-arrow-height: 6px;
    font-family: var(--sem-font-inter, 'Inter', sans-serif);
    line-height: 1.5;
}
.tooltip .tooltip-inner {
    font-weight: 500;
    letter-spacing: .005em;
    overflow-wrap: anywhere;
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, .14), 0 4px 6px -2px rgba(16, 24, 40, .08);
}
.tooltip .tooltip-arrow { position: absolute; display: block; }
.tooltip.bs-tooltip-top,
.tooltip.bs-tooltip-auto[data-popper-placement^=top]    { padding: var(--mdb-tooltip-arrow-height) 0; }
.tooltip.bs-tooltip-bottom,
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] { padding: var(--mdb-tooltip-arrow-height) 0; }
.tooltip.bs-tooltip-end,
.tooltip.bs-tooltip-auto[data-popper-placement^=right]  { padding: 0 var(--mdb-tooltip-arrow-height); }
.tooltip.bs-tooltip-start,
.tooltip.bs-tooltip-auto[data-popper-placement^=left]   { padding: 0 var(--mdb-tooltip-arrow-height); }
.tooltip.bs-tooltip-top .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow    { bottom: 0; }
.tooltip.bs-tooltip-bottom .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow { top: 0; }
.tooltip.bs-tooltip-end .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow  { left: 0; }
.tooltip.bs-tooltip-start .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow   { right: 0; }

/* --------------------------------------------------------------------------
   20. Site logo — a domain's logo with a letter fallback.
       Server: GET /site-logo/?host=<domain or url>[&size=32|64|128]
       (200 + image, or 404 when the site has no logo; semai_core.site_logo,
       docs: semai_core/docs/site-logo.md).

       <span class="sem-logo">S<img class="sem-logo-img" src="/site-logo/?host=semai.ai" alt="" loading="lazy"></span>

       semai-ui.js handles the image's load/error globally (no inline
       handlers): on load the tile gets .has-logo (white tile, logo shown;
       tiny 16px icons also get .is-small-logo); on error the image is
       removed and the letter stays. SemUI.siteLogo(urlOrHost, {size}) builds
       this markup for JS-rendered pages. Any existing avatar can opt in by
       adding .sem-logo plus the img; its own size/colour rules still apply
       (a .sem-avatar keeps its 38/30px size and .is-* colour, see below).
       The fallback can be an icon instead of a letter:
       <span class="sem-avatar is-blue sem-logo"><i class="bi bi-globe2"></i><img class="sem-logo-img" src="..."></span>
   -------------------------------------------------------------------------- */
.sem-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    background: var(--sem-ui-gradient-brand);
    box-sizing: border-box;
}
.sem-logo-sm { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; font-size: 13px; }
.sem-logo-lg { width: 52px; height: 52px; flex-basis: 52px; border-radius: 14px; font-size: 22px; }
.sem-logo-img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64%;
    height: 64%;
    object-fit: contain;
    /* Rendered but invisible until it loads: a display:none image with loading="lazy"
       is never fetched by Chrome, so the tile would stay on its fallback forever. */
    opacity: 0;
}
/* State classes win over any avatar colour rules the tile carries. */
.sem-logo.has-logo {
    background: #fff !important;
    color: transparent !important;
    border: 1px solid var(--sem-ui-border) !important;
    box-shadow: var(--sem-ui-shadow-xs);
}
.sem-logo.has-logo > .sem-logo-img { opacity: 1; }
.sem-logo.is-small-logo > .sem-logo-img { width: 44%; height: 44%; }
/* .sem-avatar opt-in: :where() keeps this at one-class specificity, so it
   beats the generic .sem-logo sizing above but the avatar's .is-blue /
   .is-orange ... colours still win. */
.sem-avatar:where(.sem-logo) {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    font-size: 17px;
    background: var(--sem-ui-brand-50);
    color: var(--sem-ui-brand-700);
    text-transform: none;
}
.sem-avatar-sm:where(.sem-logo) { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; font-size: 14px; }
@media (max-width: 767.98px) {
    /* matches .sem-hero-icon on phones */
    .sem-hero .sem-logo-lg { width: 44px; height: 44px; flex-basis: 44px; font-size: 19px; border-radius: 12px; }
    /* hero with a logo tile: back button + logo on the first row, the text full width below */
    .sem-hero-main:has(> .sem-logo-lg) { flex-wrap: wrap; align-items: center; }
    .sem-hero-main:has(> .sem-logo-lg) > .sem-logo-lg ~ div { flex: 1 1 100%; }
}