.none-i { display:none !important; }
.none { display:none; }

.w-10 { width:10% !important; }
.w-8 { width:8% !important; }
.w-7 { width:7% !important; }
.w-6 { width:6% !important; }
.w-5 { width:5% !important; }

.h-0 { height: 0; }

.fs-7 { font-size:0.875rem; }
.fs-8 { font-size:0.75rem; }

.no-wrap { white-space: nowrap; }

@media (min-width: 992px) {
	.navbar-expand-lg .navbar-brand { width: 18rem !important; }
}

/* default (light): show light logo, hide dark */
.navbar-brand-light, .brand-icon-light { display: inline-block; }
.navbar-brand-dark, .brand-icon-dark { display: none; }

/* when the theme is dark, flip them */
[data-bs-theme="dark"] .navbar-brand-light, [data-bs-theme="dark"] .brand-icon-light { display: none; }
[data-bs-theme="dark"] .navbar-brand-dark, [data-bs-theme="dark"] .brand-icon-dark  { display: inline-block; }

.text-dark-green { color:#4d913c; }

.bg-dark-green {
  background-opacity: 1;
  background-color: #4d913c !important;
}

.btn-dark-green {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #4d913c;
  --bs-btn-border-color: #4d913c;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #79af5c;
  --bs-btn-hover-border-color: #79af5c;
  --bs-btn-focus-shadow-rgb: 120, 191, 39;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #a2e453;
  --bs-btn-active-border-color: #79af5c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(15, 19, 33, 0.125);
  --bs-btn-disabled-color: #0F1321;
  --bs-btn-disabled-bg: #4d913c;
  --bs-btn-disabled-border-color: #4d913c;
}

.btn-dark-green:disabled {
    color: #FFFFFF;
    pointer-events: none;
    background-color: #4d913c;
    border-color: #4d913c;
    opacity: 0.65;
}

.btn-outline-dark-green {
  --bs-btn-color: #4d913c;
  --bs-btn-border-color: #4d913c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4d913c;
  --bs-btn-hover-border-color: #4d913c;
  --bs-btn-focus-shadow-rgb: 119, 129, 161;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d913c;
  --bs-btn-active-border-color: #4d913c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(15, 19, 33, 0.125);
  --bs-btn-disabled-color: #4d913c;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #4d913c;
  --bs-gradient: none;
}

.btn-dark-green.show {
  color: #ffffff;
  background-color: #4d913c;
  border-color: #4d913c;
}


.show-password-text {
	cursor:pointer;
}


.dropdown-menu {
 border-color:#e6e8ec;
 border-width:1px;
}
.dropdown-divider {
	border-top:1px solid #e6e8ec !important;
}

.subscription.card .sub-title {
	height:2em;
	line-height:1.2em;
}

.nav-link.btn-sm {
	line-height:1.3;
	padding:0.65em 0.35em;
	font-size:0.75em;
	font-weight:500;
}
.nav-link.btn-sm:hover {
	color:#fff;
}
.nav-link.btn-sm.active {
	color:#fff;
}

.modal { z-index:1065 !important; }
.modal-backdrop { z-index:1050 !important; }


th.sort { cursor: pointer; }

.text-opaque { opacity:25%; }

.fc-daygrid-event-dot {
	margin: 0 4px;
	box-sizing: content-box;
	width: 0;
	height: 0;
	border: 4px solid #3788d8;
	border-radius: 4px;
}

.chat_content {
	font-size: 1rem;
}

.flex-parent-widths {
	min-width:0;
	max-width:100%;
}



.query-processing-container {
    height: 60vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollable results/messages area */
.query-results {
  position: relative;
  flex: 1;
  overflow: auto;
  padding: 20px 16px 24px 16px; /* bottom padding will be adjusted by JS */
  scroll-behavior: smooth;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.0) 80%);
}

.composer {
  position: sticky;
  bottom: 0;
  background: white ;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 3px 0px 0px;
}
.composer__inner {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 1100px;
  margin: 0 auto;
}
.composer__textarea {
  width: 100%;
  resize: none;
  min-height: 44px;
  max-height: 180px;
  padding: 10px 12px;
  border-radius: 12px;
  outline: none;
  font: 15px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
}
.composer__btn {
  flex: 0 0 auto;
}


/* Messages, Dialogs, and Results */
.dialog {
	margin-bottom:18px;
}
.dialog .dialog-content {
	background-color:#F3F5FF;
	color:var(--bs-body-color);
	margin-bottom: 0.25rem;
	border-radius:0.75rem;
	position:relative;
	max-width:100%;
	padding:0.75rem 1rem;
}
.dialog-content {
	font-size:0.9175rem;
}
.dialog .dialog-content .dialog-time {
	flex-shrink:0;
	padding-left:0.75rem;
	position:relative;
	display:flex;
	align-items:flex-end;
}
.dialog-time span {
	height:1rem;
	line-height:1rem;
	white-space:nowrap;
	display:inline-block;
	vertical-align:bottom;
	font-size:0.678rem;
	opacity:0.7;
	position:relative;
	top:7px;
	right:-4px;
}

.counter {
  transition: transform .15s ease, color .15s ease;
}
.counter.bump { 
	transform: scale(1.08);
	color: rgb(0, 97, 255);
}


.profile-colors > .prc.active { border:2px solid black; }

.width-3x {
    width: 2rem!important
}
.width-4x {
    width: 2.5rem!important
}
.width-5x {
    width: 3rem!important
}
.width-6x {
    width: 3.5rem!important
}
.width-7x {
    width: 4rem!important
}
.height-3x {
    height: 2rem!important
}
.height-4x {
    height: 2.5rem!important
}
.height-5x {
    height: 3rem!important
}
.height-6x {
    height: 3.5rem!important
}
.height-7x {
    height: 4rem!important
}


.btn-circle-ripple {
    position: relative
}

.btn-circle-ripple::before {
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #0592be;
    animation: pulse 2s infinite ease-in-out
}

.bg-gradient-light {
	background:linear-gradient(84.06deg, rgba(255,255,255, 86%) -28.62%, rgba(190,195,195,85%) 98.74%);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0
    }

    50% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(1.5);
        opacity: 0
    }
}




.th-status-wrap {
    display: flex;
    align-items: flex-start;
    padding: 8px 12px;
    margin-bottom: 8px;
}

/* The spinning ring around your logo */
#th_status_logo {
    position: relative;
    animation: th-spin-ring 1.2s linear infinite;
}
#th_status_logo.done {
    animation: none;
}
@keyframes th-spin-ring {
    /* The btn-circle-ripple already handles the ring — 
       if it doesn't spin by default, add this wrapper approach */
    to { --ring-angle: 360deg; }
}

.th-status-line {
	white-space: normal;
	word-wrap: break-word;
}

.th-status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
}
.th-status-toggle .material-symbols-rounded {
    transition: transform 0.2s;
}
.th-status-toggle.open .material-symbols-rounded {
    transform: rotate(180deg);
}

.th-status-log {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-left: 2px solid var(--bs-border-color);
    padding-left: 10px;
    margin-top: 4px;
}
.th-status-log.open { max-height: 180px; overflow-y: auto; }

.th-log-entry {
    font-size: 11px;
    color: var(--bs-secondary-color);
    padding: 2px 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.th-log-entry::before {
    content: '·';
    color: var(--bs-border-color);
}
.th-log-entry.latest {
    color: var(--bs-body-color);
}
.th-log-entry.latest::before {
    content: '›';
    color: var(--bs-success);
}



/* ------------------------------------------------------------------
   Working view vertical layout.

   The toolbar is no longer a fixed height. It is short when there is no
   current-version box, taller when there is one, and taller again when a
   long statement wraps to two lines. The previous rule subtracted a
   hardcoded 56px for it, so any other toolbar height pushed the composer
   below the fold.

   Instead #working_strategy (and the admin detail page, #admin_strategy_detail)
   owns the vertical budget as a flex column:
   the toolbar takes exactly the height it needs, and .content-wrapper
   absorbs whatever is left. Nothing has to know the toolbar height, so
   the composer (or, on the admin detail page, the scrolling table) stays
   on screen in every case.

   Both the conversational view (#working_strategy) and the admin
   strategy-detail view (#admin_strategy_detail) use this layout, so each rule
   lists both ids. The #working_strategy selectors are unchanged from before;
   #admin_strategy_detail was added alongside them.

   The :not(.none) on #working_strategy is deliberate and load-bearing: that
   view is an ID selector toggled by the .none class, and without :not the id
   rule would outrank `.none { display:none }` and render while hidden. The
   admin view is never hidden this way, so it needs no :not. */
#working_strategy:not(.none),
#admin_strategy_detail {
	/* 64px navbar + 2rem page padding. These mirror admin-theme.css
	   `.content-wrapper { height: calc(100vh - 64px - 2rem) }` — the template
	   budget this view replaces. Kept in one custom property so the two
	   viewport declarations below cannot drift apart. */
	--th-chrome: calc(64px + 2rem);

	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--th-chrome));  /* fallback for browsers without dvh */
	height: calc(100dvh - var(--th-chrome)); /* dvh accounts for mobile browser chrome */
	min-height: 0;
}

#working_strategy > .toolbar,
#admin_strategy_detail > .toolbar {
	flex: 0 0 auto;
}

#working_strategy .content-wrapper,
#admin_strategy_detail .content-wrapper {
	flex: 1 1 auto;
	min-height: 0; /* lets the wrapper shrink under its content so the inner area scrolls */
	height: auto;  /* replaces the old fixed calc */
}

/* .card is a Bootstrap flex column: the body grows, the footer must not
   shrink. min-height:0 on the body is what lets the inner region scroll
   instead of stretching the card past the bottom of the screen.
   (admin-theme sets .content-right-body to flex-direction:column-reverse and
   height:100%; the column override lives further down this file.) */
#working_strategy .content-right-body,
#admin_strategy_detail .content-right-body {
	min-height: 0;
	overflow-y: auto; /* the scroll region on pages without a sticky composer */
}

#working_strategy .content-right-footer,
#admin_strategy_detail .content-right-footer {
	flex-shrink: 0;
}

/* The main panel is a flex ITEM of .content-wrapper, which the base template
   makes a flex row. A flex item defaults to `flex: 0 1 auto`, meaning it is
   sized by its content — so a brand-new conversation, whose only content is
   the short "Getting on the scent..." status line, rendered as a narrow
   column until a wide response arrived and stretched it out.

   This growth used to ride along on the .content-right class (and later on
   .content after the rename). Both were dropped when the duplicate .content
   nesting was resolved, so it is declared explicitly here.

   Targeted by NAME rather than by position. An earlier version of this rule
   was `#working_strategy .content-wrapper > .card`, which broke if the panel
   was ever wrapped in another element or stopped being the only card, and
   which outranked template rules at (1,2,0). A single purpose-named class is
   specific enough on its own and survives markup churn.

   min-width:0 lets the panel shrink under wide children — result tables, long
   code blocks — instead of overflowing the wrapper. */
.th-main-panel {
	flex: 1 1 auto;
	min-width: 0;
}

.content-right-body {
    flex-direction: column !important;
    display: flex !important;
    position: relative;
}

#dialog_responses {
    flex: 1 !important;
    height: auto !important;
    min-height: 0;
    overflow-y: auto;
}


/* Scroll to Bottom Button */
.scroll-to-bottom-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: rgba(255, 255, 255, 0.85);
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.scroll-to-bottom-btn:hover {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.scroll-to-bottom-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.scroll-to-bottom-btn .material-symbols-rounded {
    font-size: 20px;
    line-height: 1;
}


/* Editable Strategy Title */
.strategy-title-editable {
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    outline: none;
    min-width: 50px;
}

.strategy-title-editable:hover {
    background-color: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.strategy-title-editable.editing {
    background-color: #fff;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.15);
    cursor: text;
}

/* Saved Badge */
.strategy-saved-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background-color: #38a169;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.strategy-saved-badge.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}



.sidebar-icon {
	margin-right:0.15rem;
}
.nav-link, 
.sidebar-dropdown .sidebar-item .sidebar-link {
	font-size: 0.9125rem !important;
}
.sidebar-dropdown .sidebar-item .sidebar-link {
	padding: 0.24rem 0.70rem;
}

.page-header.v3 {
	background-color:#0d1117 !important;
	border-bottom:2px solid #2b3647;
}


.page-header.v3 .navbar-nav .nav-item { flex-shrink: 0; }
.page-header.v3 .btn { white-space: nowrap; }

.footer.v3 {
	background-color:#0d1117 !important;
	border-top:2px solid #2b3647;
	color:#76808f !important;
}

.v3 .nav-link {
	color:#cfe2ff !important;
}

.btn.primary {
    background: #16263f	;
    border-color: #4c9aff;
    color: #cfe2ff;
    font-weight: 500
}

.btn.primary:hover {
    background: #1c3357
}
/* ============================================================
   Dark-mode overrides for custom conversational-UI classes.
   Keyed on data-bs-theme="dark" (set on <html> by the theme),
   the same mechanism the rest of the UI uses. Light is untouched.
   ============================================================ */

/* Composer: light def hardcodes background:white -> give it a dark surface. */
[data-bs-theme="dark"] .composer {
	background: var(--bs-body-bg);
}

/* User dialog highlight: light #F3F5FF -> an elevated dark surface so the
   user bubble still reads as a highlight against the near-black page. */
[data-bs-theme="dark"] .dialog .dialog-content {
	background-color: var(--bs-secondary-bg);
}

/* Initials: .text-info resolves to #66a0ff in dark (Bootstrap, !important).
   Lift it to a lighter blue. Extra specificity + !important to win. */
[data-bs-theme="dark"] .dialog .dialog-content .text-info {
	color: #9cc4ff !important;
}

/* ==========================================================================
   ADMIN — strategy-management & user-management views
   Moved out of per-view <style> blocks (strategy_detail.php, user_detail.php)
   so all styling lives in this stylesheet. Shared rules are defined once.
   ========================================================================== */

/* Stat tiles (usage boxes) + info tiles (account / subscription). */
.admin-stat-tiles { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.admin-stat-tile,
.admin-kv-tile {
	flex:1; background:#fff; border:1px solid #e6e7ea; border-radius:10px;
	padding:14px 16px;
}
.admin-stat-tile { min-width:140px; }
.admin-kv-tile   { min-width:240px; }
.admin-stat-tile .label { font-size:12px; color:#6c757d; text-transform:uppercase; letter-spacing:.4px; }
.admin-stat-tile .value { font-size:22px; font-weight:600; color:#2b2b3a; margin-top:2px; }
.admin-kv-tile h6 { font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#6c757d; margin:0 0 10px; font-weight:600; }

/* Key/value rows inside the account + subscription tiles. */
.admin-kv { display:flex; justify-content:space-between; gap:16px; padding:5px 0; border-bottom:1px solid #f1f2f4; font-size:14px; }
.admin-kv:last-child { border-bottom:0; }
.admin-kv .k { color:#6c757d; }
.admin-kv .v { font-weight:500; color:#2b2b3a; text-align:right; word-break:break-word; }
.admin-kv .v.is-past { color:#c53030; }

/* Shared table helpers. */
.admin-muted { color:#6c757d; }
.admin-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.admin-table .cost { font-weight:600; }
.admin-strategy-link { text-decoration:none; font-weight:600; }
.admin-strategy-link:hover { text-decoration:underline; }

/* Admin detail pages (strategy + user) have no composer to pin at the bottom,
   so unlike the conversational view they should NOT be a fixed-height inner
   scroll box. That box clipped the footnote on a long page and left a gap on a
   short one, and it was the reason the table shrank (a fixed flex scroller does
   not give a display:table child a definite width to fill). Letting the panel
   size to its content and the outer page scroll fixes the footnote spacing AND
   the table width in one move — no min-width hack needed.
   Scoped to the admin ids so the conversational view is untouched. */
#admin_strategy_detail,
#admin_strategy_detail .content-wrapper,
#admin_strategy_detail .content-right-body {
	height: auto;
	min-height: 0;
	overflow: visible;
}

/* Index page uses DataTables and lives in the app frame, which caps the page at
   100vh and hides overflow — so the PAGE cannot scroll to reveal content below
   the fold. Keep this page's own bounded-height scroll area (the fixed-height
   .content-wrapper it inherits) and make the card a flex column inside it: the
   body scrolls, and the footnote sits in a pinned footer that stays visible.
   On a short window the content area scrolls; the footer is always in view.
   (The detail/user pages have no frame-scroll conflict, so they content-size
   above; this page cannot, which is why it is handled separately.) */
#admin_strategy_management .card { display:flex; flex-direction:column; height:100%; min-height:0; }
#admin_strategy_management .content-right-body { flex:1 1 auto; min-height:0; overflow-y:auto; }
#admin_strategy_management .card-footer { flex:0 0 auto; }
.content-right-body > .table-responsive { width:100%; }

/* Still need the table itself forced to full width: display:table shrinks to
   content in auto layout even when its wrapper is full width. */
.admin-table.w-100 { width:100%; min-width:100%; }

/* Small utility classes replacing former inline styles in the admin views. */
.admin-fs-11 { font-size:11px; }
.admin-fs-12 { font-size:12px; }
.admin-fs-13 { font-size:13px; }
.admin-nowrap { white-space:nowrap; }
.admin-plain-link { text-decoration:none; }
.admin-col-reqid { width:70px; }

/* Activity timeline (strategy_detail): request rows + interwoven event steps. */
.admin-timeline-table td { vertical-align:top; }
.tl-request-row td { border-top:1px solid #eef0f3; }
.tl-event-row td { border-top:0; padding-top:5px; padding-bottom:5px; background:#fbfbfd; }
.tl-event-row .tl-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#ced4da; margin-right:8px; vertical-align:middle; }
.tl-event-row .tl-step { font-size:13px; color:#495057; font-weight:500; }
.tl-event-row .tl-actor { font-size:10px; color:#adb5bd; text-transform:uppercase; letter-spacing:.03em; margin-left:8px; }
.tl-event-row .tl-detail { color:#6c757d; font-size:12px; margin-left:8px; }
.admin-prompt-cell { max-width:420px; }
.admin-prompt-cell .ptext { white-space:pre-wrap; word-break:break-word; }

/* Dark-mode: the admin tiles/timeline hardcode light colors above; remap to
   theme tokens so they recolor with data-bs-theme. Light is untouched. */
[data-bs-theme="dark"] .admin-stat-tile,
[data-bs-theme="dark"] .admin-kv-tile { background: var(--bs-secondary-bg); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .admin-stat-tile .value,
[data-bs-theme="dark"] .admin-kv .v { color: var(--bs-body-color); }
[data-bs-theme="dark"] .admin-stat-tile .label,
[data-bs-theme="dark"] .admin-muted,
[data-bs-theme="dark"] .admin-kv-tile h6,
[data-bs-theme="dark"] .admin-kv .k,
[data-bs-theme="dark"] .tl-event-row .tl-detail { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .admin-kv { border-bottom-color: var(--bs-border-color); }
[data-bs-theme="dark"] .tl-request-row td { border-top-color: var(--bs-border-color); }
[data-bs-theme="dark"] .tl-event-row td { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .tl-event-row .tl-step { color: var(--bs-body-color); }
[data-bs-theme="dark"] .tl-event-row .tl-dot { background: var(--bs-secondary-color); }
[data-bs-theme="dark"] .tl-event-row .tl-actor { color: var(--bs-tertiary-color); }
[data-bs-theme="dark"] .admin-timeline-table > thead.table-light th,
[data-bs-theme="dark"] .admin-timeline-table > thead.table-light tr {
	background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color);
}

/* Admin strategy-management INDEX page: clickable rows + DataTables controls.
   (Moved out of strategy_management.php's <style> block.) */
.admin-table tbody tr { cursor:pointer; }
.admin-table tbody tr:hover { background:#f0f1ff; }
[data-bs-theme="dark"] .admin-table tbody tr:hover { background: var(--bs-tertiary-bg); }

/* DataTables header + pagination carry fixed light backgrounds that do not
   follow the theme; recolor in dark mode. */
[data-bs-theme="dark"] .admin-table > thead.table-light th,
[data-bs-theme="dark"] .admin-table > thead.table-light tr {
	background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .dataTables_paginate .page-link {
	background: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color);
}
[data-bs-theme="dark"] .dataTables_paginate .page-item.active .page-link {
	background: var(--bs-primary); border-color: var(--bs-primary); color: #fff;
}
[data-bs-theme="dark"] .dataTables_paginate .page-item.disabled .page-link {
	background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .dataTables_paginate .page-link:hover {
	background: var(--bs-tertiary-bg); border-color: var(--bs-border-color);
}
.admin-badge-ls { letter-spacing:.3px; }