/*
 * Semi theme: shadcn/ui look for the EzyPlatform admin.
 *
 * Loads after Bootstrap 4, AdminLTE 3 and ezyadmin.css and keeps every class
 * they define. Platform pages and plugin templates keep their markup; this
 * file only repaints the existing classes with the variables in tokens.css.
 *
 * Every rule is scoped under html.semi. The extra class out-ranks the
 * Bootstrap/AdminLTE rule it replaces, so few !important are needed; the ones
 * left beat Bootstrap utilities that are !important themselves.
 *
 * AdminLTE's own dark mode (body.dark-mode, ~3k rules) is never switched on:
 * theme.js moves the platform's dark switch to html.dark, which only swaps
 * tokens.
 */

/* ---------- Base ---------- */

.semi body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight);
  line-height: 1.5;
  color: var(--foreground);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.semi ::selection { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.semi h1, .semi h2, .semi h3, .semi h4, .semi h5, .semi h6,
.semi .h1, .semi .h2, .semi .h3, .semi .h4, .semi .h5, .semi .h6 {
  color: inherit;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.semi h1, .semi .h1 { font-size: 2.1875rem; }
.semi h2, .semi .h2 { font-size: 1.75rem; }
.semi h3, .semi .h3 { font-size: 1.53125rem; }
.semi h4, .semi .h4 { font-size: 1.3125rem; }
.semi h5, .semi .h5 { font-size: 1.09375rem; }
.semi h6, .semi .h6 { font-size: 0.875rem; }
.semi a { color: var(--link); }
.semi a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.semi a.nav-link:hover, .semi a.btn:hover, .semi a.dropdown-item:hover, .semi a.page-link:hover,
.semi a.brand-link:hover, .semi a.small-box-footer:hover, .semi a.list-group-item:hover { text-decoration: none; }
.semi hr { border-top-color: var(--border); }
.semi code { color: var(--foreground); background: var(--muted); padding: 0.125rem 0.3rem; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.semi pre { color: var(--foreground); background: var(--muted); border-radius: var(--radius-lg); padding: 1rem; }
.semi kbd { background: var(--muted); color: var(--foreground); border: 1px solid var(--border); box-shadow: none; }
.semi small, .semi .small { font-size: var(--text-sm); }
.semi .border, .semi .border-top, .semi .border-bottom, .semi .border-left, .semi .border-right { border-color: var(--border) !important; }
.semi [class*='elevation-'] { box-shadow: none !important; }
.semi .img-thumbnail { background: var(--card); border-color: var(--border); border-radius: var(--radius-lg); }

.semi * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.semi ::-webkit-scrollbar { width: 10px; height: 10px; }
.semi ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
.semi ::-webkit-scrollbar-track { background: transparent; }

.semi :focus-visible { outline: 2px solid color-mix(in srgb, var(--ring) 60%, transparent); outline-offset: 2px; }

/* ---------- Text and background utilities ---------- */

.semi .text-muted, .semi .form-text { color: var(--muted-foreground) !important; }
.semi .text-dark, .semi .text-body { color: var(--foreground) !important; }
.semi .text-primary { color: var(--link) !important; }
.semi .text-secondary { color: var(--muted-foreground) !important; }
.semi .text-danger { color: var(--destructive) !important; }
.semi .text-success { color: var(--success) !important; }
.semi .text-warning { color: var(--warning) !important; }
.semi .text-info { color: var(--info) !important; }
.semi .bg-white, .semi .bg-light { background-color: var(--card) !important; color: var(--card-foreground); }
.semi .bg-light { background-color: var(--muted) !important; }

/* One knob per status. Components below read --tone. */
.semi .bg-primary, .semi .badge-primary, .semi .btn-primary, .semi .btn-outline-primary, .semi .alert-primary, .semi .callout-primary, .semi .card-primary, .semi .border-primary { --tone: var(--primary); --tone-fg: var(--primary-foreground); }
.semi .bg-secondary, .semi .badge-secondary, .semi .alert-secondary, .semi .btn-outline-secondary, .semi .card-secondary, .semi .callout-secondary { --tone: var(--muted-foreground); --tone-fg: var(--background); }
.semi .bg-success, .semi .badge-success, .semi .btn-success, .semi .btn-outline-success, .semi .alert-success, .semi .callout-success, .semi .card-success, .semi .bg-green, .semi .bg-teal, .semi .bg-olive, .semi .bg-lime { --tone: var(--success); --tone-fg: oklch(0.985 0 0); }
.semi .bg-warning, .semi .badge-warning, .semi .btn-warning, .semi .btn-outline-warning, .semi .alert-warning, .semi .callout-warning, .semi .card-warning, .semi .bg-orange, .semi .bg-yellow { --tone: var(--warning); --tone-fg: oklch(0.205 0 0); }
.semi .bg-info, .semi .badge-info, .semi .btn-info, .semi .btn-outline-info, .semi .alert-info, .semi .callout-info, .semi .card-info, .semi .bg-cyan, .semi .bg-lightblue, .semi .bg-blue, .semi .bg-sky-blue, .semi .bg-indigo, .semi .bg-navy { --tone: var(--info); --tone-fg: oklch(0.985 0 0); }
.semi .bg-danger, .semi .badge-danger, .semi .btn-danger, .semi .btn-outline-danger, .semi .alert-danger, .semi .callout-danger, .semi .card-danger, .semi .bg-red, .semi .bg-maroon, .semi .bg-pink, .semi .bg-fuchsia, .semi .bg-purple { --tone: var(--destructive); --tone-fg: oklch(0.985 0 0); }
.semi .bg-dark, .semi .badge-dark, .semi .btn-outline-dark, .semi .alert-dark, .semi .card-dark, .semi .bg-gray-dark, .semi .bg-gray { --tone: var(--foreground); --tone-fg: var(--background); }
.semi .bg-purple, .semi .bg-indigo, .semi .bg-fuchsia { --tone: oklch(0.606 0.25 292.717); }

.semi .bg-primary, .semi .bg-success, .semi .bg-warning, .semi .bg-info, .semi .bg-danger, .semi .bg-secondary, .semi .bg-dark {
  background-color: var(--tone) !important;
  color: var(--tone-fg) !important;
}
.semi .border-primary { border-color: var(--primary) !important; }

/* ---------- Layout: header, sidebar, content, footer ---------- */

.semi .wrapper, .semi .content-wrapper { background-color: var(--background); color: var(--foreground); }

.semi .main-header,
.semi .main-header.navbar-white,
.semi .main-header.navbar-light {
  background-color: color-mix(in srgb, var(--background) 85%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(8px);
  backdrop-filter: saturate(1.5) blur(8px);
  border-bottom: 1px solid var(--border);
  min-height: 3.5rem;
  padding: 0.5rem 0.75rem;
}
.semi .main-header .navbar-nav .nav-link,
.semi .navbar-light .navbar-nav .nav-link {
  color: var(--muted-foreground);
  height: var(--control-h);
  min-width: var(--control-h);
  padding: 0 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}
.semi .main-header .navbar-nav .nav-link:hover,
.semi .main-header .navbar-nav .show > .nav-link {
  color: var(--accent-foreground);
  background-color: var(--accent);
}
.semi .main-header .navbar-nav .nav-link > i { font-size: var(--text-base); }
.semi .main-header .navbar-badge {
  top: 0.125rem;
  right: 0.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.1875rem;
  border: 0 !important;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 9999px !important;
  font-variant-numeric: tabular-nums;
}
.semi .navbar-search-block { background-color: var(--background); padding: 0 0.75rem; }
.semi .btn-navbar { background: transparent; border: 0; color: var(--muted-foreground); }

/* Sidebar: light rail like shadcn's sidebar, not AdminLTE's dark slab. */
.semi .main-sidebar,
.semi .main-sidebar::before,
.semi [class*='sidebar-dark-'],
.semi [class*='sidebar-light-'] {
  background-color: var(--sidebar);
  color: var(--sidebar-foreground);
}
.semi .main-sidebar { border-right: 1px solid var(--sidebar-border); box-shadow: none !important; }
.semi .main-sidebar .sidebar { padding: 0 0.5rem; }
.semi .main-sidebar .brand-link,
.semi [class*='sidebar-dark'] .brand-link,
.semi [class*='sidebar-light'] .brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3.5rem;
  padding: 0 1rem;
  color: var(--sidebar-foreground);
  border-bottom: 1px solid var(--sidebar-border);
  font-size: var(--text-brand);
  white-space: nowrap;
  overflow: hidden;
}
.semi .main-sidebar .brand-link:hover { color: var(--sidebar-foreground); }
.semi .main-sidebar .brand-link .brand-image {
  float: none;
  margin: 0;
  max-height: var(--control-h-sm);
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: none !important;
}
.semi .main-sidebar .brand-text { font-weight: 600 !important; letter-spacing: -0.01em; }

.semi .main-sidebar .user-panel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 !important;
  padding: 0.5rem !important;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.semi .main-sidebar .user-panel:hover { background-color: var(--sidebar-accent); }
.semi .main-sidebar .user-panel .info { padding: 0; overflow: hidden; }
.semi .main-sidebar .user-panel .info a,
.semi [class*='sidebar-dark'] .user-panel a:hover { color: var(--sidebar-foreground); font-weight: 500; }
.semi .main-sidebar .user-panel img { width: var(--control-h-sm); height: var(--control-h-sm); border-radius: 50%; object-fit: cover; }
.semi .avatar-tmp {
  background-color: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
  font-weight: 600;
  font-size: var(--text-sm);
}
.semi .main-avatar-tmp {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  margin-left: 0;
  border-radius: 50% !important;
}

.semi .nav-sidebar .nav-header,
.semi [class*='sidebar-dark'] .nav-header {
  padding: 1rem 0.5rem 0.375rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: color-mix(in srgb, var(--sidebar-foreground) 60%, transparent);
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
}
.semi .nav-sidebar .nav-item { margin-bottom: 1px; }
.semi .nav-sidebar .nav-link,
.semi [class*='sidebar-dark-'] .nav-sidebar > .nav-item > .nav-link,
.semi [class*='sidebar-dark-'] .nav-treeview > .nav-item > .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--control-h-sm);
  padding: 0.375rem 0.5rem;
  margin: 0;
  border-radius: var(--radius-md);
  color: var(--sidebar-foreground);
  font-size: var(--text-sm);
  line-height: 1.25rem;
  transition: background-color 0.15s, color 0.15s;
}
.semi .sidebar-mini .main-sidebar .nav-sidebar .nav-link,
.semi .sidebar-mini-md .main-sidebar .nav-sidebar .nav-link,
.semi .sidebar-mini-xs .main-sidebar .nav-sidebar .nav-link { width: auto; }
/* Bootstrap's .nav wraps; in this column that sizes every row to the longest
 * label, wider than the rail, so labels were cut off at the rail's edge
 * instead of ending in an ellipsis. */
.semi .nav-sidebar, .semi .nav-sidebar .nav-treeview { flex-wrap: nowrap; }
.semi .nav-sidebar .nav-item { min-width: 0; max-width: 100%; }
.semi .nav-sidebar .nav-link { position: relative; }
/* Long labels end in an ellipsis; theme.js puts the full text in a tooltip.
 * The badge and the chevron sit at the right edge, out of the text's way. */
.semi .nav-sidebar .nav-link p {
  display: block;
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.semi .nav-sidebar .nav-link p:has(> .right) { padding-right: 1.25rem; }
.semi .nav-sidebar .nav-link p:has(> .badge) { padding-right: 2.5rem; }
.semi .nav-sidebar .nav-link p:has(> .badge):has(> i.right) { padding-right: 3.75rem; }
.semi .nav-sidebar .nav-link .nav-icon,
.semi .nav-sidebar > .nav-item .nav-icon.fa,
.semi .nav-sidebar > .nav-item .nav-icon.fas,
.semi .nav-sidebar > .nav-item .nav-icon.far,
.semi .nav-sidebar > .nav-item .nav-icon.fab,
.semi .nav-sidebar > .nav-item .nav-icon.fad,
.semi .nav-sidebar > .nav-item .nav-icon.ion,
.semi .nav-sidebar > .nav-item .nav-icon.bi {
  width: 1.1rem;
  margin: 0;
  font-size: 0.95rem;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.75;
}
.semi .nav-sidebar .nav-link:hover,
.semi [class*='sidebar-dark-'] .nav-sidebar > .nav-item > .nav-link:hover,
.semi [class*='sidebar-dark-'] .nav-treeview > .nav-item > .nav-link:hover,
.semi [class*='sidebar-dark-'] .nav-sidebar > .nav-item.menu-open > .nav-link {
  background-color: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}
.semi [class*='sidebar-dark-'] .nav-sidebar > .nav-item.menu-open > .nav-link:not(:hover) { background-color: transparent; }
.semi .nav-sidebar .nav-link.active,
.semi .main-sidebar .nav-pills .nav-link.active,
.semi [class*='sidebar-dark-'] .nav-sidebar > .nav-item > .nav-link.active,
.semi [class*='sidebar-dark-'] .nav-treeview > .nav-item > .nav-link.active,
.semi body[data-theme-color] .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.semi body[data-theme-color] .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active {
  background-color: var(--sidebar-accent) !important;
  color: var(--sidebar-accent-foreground) !important;
  font-weight: 500;
  box-shadow: none !important;
}
.semi .nav-sidebar .nav-link.active .nav-icon { opacity: 1; }
.semi .nav-sidebar .nav-link > p > .right,
.semi .nav-sidebar .nav-link > p > .badge,
.semi .nav-sidebar .nav-link > .right {
  position: absolute;
  right: 0.5rem;
  top: 0;
  bottom: 0;
  height: 1rem;
  margin: auto 0;
  line-height: 1rem;
}
.semi .nav-sidebar .nav-link > p > i.right { width: 0.75rem; text-align: center; }
.semi .nav-sidebar .nav-link > p:has(> i.right) > .badge { right: 1.625rem; }
.semi .nav-sidebar .nav-link > p > i.right { font-size: var(--text-xs); opacity: 0.6; transition: transform 0.2s; }
.semi .nav-sidebar .menu-open > .nav-link i.right,
.semi .nav-sidebar .menu-is-opening > .nav-link i.right { transform: rotate(-90deg); }
/* Sidebar counters: light text on a light veil, readable on the dark rail
 * (the status tints used elsewhere are too dim here). */
.semi .nav-sidebar .nav-link > p > .badge,
.semi .nav-sidebar .nav-link > p > .badge[class*='badge-'] {
  background-color: color-mix(in srgb, var(--sidebar-foreground) 16%, transparent);
  color: var(--sidebar-accent-foreground);
  border-color: transparent;
  font-weight: 600;
}
.semi .nav-sidebar .nav-link > p > .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.125rem;
  font-size: 0.6875rem;
  min-width: 1.25rem;
  padding: 0 0.3125rem;
}
.semi .nav-sidebar .nav-treeview,
.semi .nav-child-indent .nav-treeview {
  margin: 1px 0 2px 0.875rem;
  padding: 0 0 0 0.5rem;
  border-left: 1px solid var(--sidebar-border);
}
.semi .nav-sidebar .nav-treeview .nav-link { min-height: 1.875rem; }
.semi .nav-sidebar .nav-treeview .nav-icon { font-size: var(--text-sm) !important; }

/* Sidebar width (AdminLTE hard-codes 250px). */
.semi .main-sidebar,
.semi .main-sidebar::before,
.semi .sidebar-mini.sidebar-collapse .main-sidebar:hover,
.semi .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused,
.semi .sidebar-mini-md.sidebar-collapse .main-sidebar:hover,
.semi .sidebar-mini-xs.sidebar-collapse .main-sidebar:hover { width: var(--sidebar-width); }
.semi .main-sidebar .brand-link,
.semi .layout-fixed .brand-link,
.semi .sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link,
.semi .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-link,
.semi .sidebar-mini.sidebar-collapse.layout-fixed .main-sidebar:hover .brand-link { width: 100%; }
/* AdminLTE sizes every sidebar link to calc(250px - ...) in a dozen nested
 * variants (hover-expanded rail, child indent, legacy, flat). The links are
 * flex rows that fill the rail, so width is never needed. */
.semi .main-sidebar .nav-sidebar .nav-link { width: auto !important; }
@media (min-width: 992px) {
  .semi body:not(.sidebar-collapse):not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
  .semi body:not(.sidebar-collapse):not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer,
  .semi body:not(.sidebar-collapse):not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header { margin-left: var(--sidebar-width); }
}

/* AdminLTE re-sizes the label while the collapsed rail is hovered open. */
.semi .sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p,
.semi .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p {
  display: block !important;
  flex: 1;
  width: auto;
  margin-left: 0;
}

/* Collapsed rail (sidebar-mini + sidebar-collapse): icons centred. */
@media (min-width: 992px) {
  .semi .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link {
    justify-content: center;
    width: auto;
  }
  .semi .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link p,
  .semi .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .brand-text,
  .semi .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .user-panel .info { display: none; }
  .semi .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-header { visibility: hidden; height: 0.75rem; padding: 0; }
  .semi .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-treeview { margin-left: 0; padding-left: 0; border-left: 0; }
  .semi .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .brand-link,
  .semi .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .user-panel { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
}

.semi .content-header { padding: 1.25rem 0.5rem 0.75rem; }
.semi .content-header h1 {
  font-size: var(--text-page-title);
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.semi .content-header .btn { align-self: center; }
.semi .content { padding: 0 0.5rem; }
.semi .content-header .breadcrumb { margin-top: 0.5rem; }

.semi .main-footer {
  background-color: var(--background);
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  padding: 0.75rem 1.25rem;
}
.semi .main-footer a { color: var(--foreground); }

.semi .control-sidebar,
.semi .control-sidebar::before,
.semi .control-sidebar-dark {
  background-color: var(--popover);
  color: var(--popover-foreground);
  border-left: 1px solid var(--border);
}
.semi .control-sidebar-dark h5, .semi .control-sidebar-dark label, .semi .control-sidebar-dark a { color: var(--popover-foreground); }
.semi .theme-color-swatch { border-color: var(--background); box-shadow: 0 0 0 1px var(--border); }
.semi .theme-color-swatch.active { box-shadow: 0 0 0 2px var(--ring); }

/* Platform's right toolbar */
.semi .right-toolbar,
.semi .right-toolbar-mini {
  background-color: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.semi .right-toolbar-item { color: var(--popover-foreground); }
.semi .right-toolbar-item:hover,
.semi .right-toolbar-close:hover,
.semi .right-toolbar-expand-toggle:hover { background-color: var(--accent); color: var(--accent-foreground); }
.semi .right-toolbar-close, .semi .right-toolbar-expand-toggle { color: var(--muted-foreground); border-color: var(--border); }
.semi .right-toolbar-item.active i { color: var(--warning); }

/* ---------- Breadcrumb ---------- */

.semi .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
  align-items: center;
}
.semi .breadcrumb-item, .semi .breadcrumb-item a { color: var(--muted-foreground); }
.semi .breadcrumb-item a:hover { color: var(--foreground); text-decoration: none; }
.semi .breadcrumb-item.active { color: var(--foreground); }
.semi .breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; }
.semi .breadcrumb-item + .breadcrumb-item::before { content: '/'; color: var(--border); padding-right: 0.5rem; }
.semi .dark .breadcrumb-item + .breadcrumb-item::before, .semi.dark .breadcrumb-item + .breadcrumb-item::before { color: var(--muted-foreground); }

/* ---------- Buttons ---------- */

.semi .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: var(--control-h);
  padding: 0 var(--control-px);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.semi .btn > i, .semi .btn > .fas, .semi .btn > .far, .semi .btn > .fa { font-size: 0.875em; }
.semi .btn-sm, .semi .btn-group-sm > .btn {
  min-height: var(--control-h-sm);
  padding: 0 0.5rem;
  font-size: 0.765rem;
  gap: 0.25rem;
  border-radius: var(--radius-md);
}
.semi .btn-xs { min-height: 1.5rem; padding: 0 0.5rem; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.semi .btn-lg, .semi .btn-group-lg > .btn { min-height: var(--control-h-lg); padding: 0 var(--control-px); font-size: var(--text-base); border-radius: var(--radius-md); }
.semi .btn-block { display: flex; width: 100%; }
/* .btn is a centred flex box here, which made Bootstrap's text-left/right do
 * nothing (plugin list: "Deactivate" sat mid-cell). Honour them. */
.semi .btn.text-left { justify-content: flex-start; }
.semi .btn.text-right { justify-content: flex-end; }
/* A padding-less link button (btn btn-link p-0) is a text link: its own width,
 * the line's height, no stretching in a flex column. */
.semi .btn.btn-link.p-0 {
  min-height: 0;
  border: 0;
  line-height: inherit;
  align-self: flex-start;
}
.semi .text-center > .btn.btn-link.p-0, .semi .btn.btn-link.p-0.text-center { align-self: center; }
/* Link buttons stacked in a flex column (module list "Latest Version":
 * Update Manually, Apply version x) take their own width instead of the
 * column's, so they line up on the cell's alignment: centred in a
 * text-center cell, left-aligned otherwise. */
.semi .flex-column > .btn.btn-link:not(.btn-block) { align-self: flex-start; }
.semi .text-center .flex-column > .btn.btn-link:not(.btn-block),
.semi .flex-column.align-items-center > .btn.btn-link:not(.btn-block) { align-self: center; }
/* "Activate | Delete": room around the separator between text links. */
.semi .d-flex > .btn.btn-link.p-0 + span { padding: 0 0.375rem; color: var(--muted-foreground); }
.semi .btn:focus, .semi .btn.focus, .semi .btn:not(:disabled):not(.disabled):active:focus {
  outline: 0;
  box-shadow: 0 0 0 var(--ring-width) color-mix(in srgb, var(--ring) 50%, transparent) !important;
}
.semi .btn.disabled, .semi .btn:disabled { opacity: 0.5; pointer-events: none; }

/* Solid: primary, success, info, warning, danger */
.semi .btn-primary, .semi .btn-success, .semi .btn-info, .semi .btn-warning, .semi .btn-danger,
.semi body[data-theme-color] .btn-primary {
  background-color: var(--tone) !important;
  border-color: var(--tone) !important;
  color: var(--tone-fg) !important;
  box-shadow: var(--shadow-xs);
}
.semi .btn-primary:hover, .semi .btn-success:hover, .semi .btn-info:hover, .semi .btn-warning:hover, .semi .btn-danger:hover,
.semi .btn-primary:not(:disabled):not(.disabled):active, .semi .btn-primary:not(:disabled):not(.disabled).active {
  background-color: color-mix(in srgb, var(--tone) 90%, var(--background)) !important;
  border-color: transparent !important;
  filter: none;
}

/* Secondary: muted fill */
.semi .btn-secondary, .semi .btn-light {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--secondary-foreground);
}
.semi .btn-secondary:hover, .semi .btn-light:hover,
.semi .btn-secondary:not(:disabled):not(.disabled):active, .semi .btn-secondary:not(:disabled):not(.disabled).active {
  background-color: color-mix(in srgb, var(--secondary) 80%, var(--foreground) 6%);
  border-color: transparent;
  color: var(--secondary-foreground);
}
.semi .btn-dark {
  background-color: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}
.semi .btn-dark:hover { background-color: color-mix(in srgb, var(--foreground) 90%, var(--background)); color: var(--background); }

/* Outline: default and every btn-outline-* */
.semi .btn-default,
.semi .btn-outline-primary, .semi .btn-outline-secondary, .semi .btn-outline-success, .semi .btn-outline-info,
.semi .btn-outline-warning, .semi .btn-outline-danger, .semi .btn-outline-dark, .semi .btn-outline-light,
.semi body[data-theme-color] .btn-outline-primary {
  background-color: var(--background) !important;
  border-color: var(--border) !important;
  color: var(--foreground) !important;
  box-shadow: var(--shadow-xs);
}
.semi .btn-outline-success, .semi .btn-outline-info, .semi .btn-outline-warning, .semi .btn-outline-danger { color: var(--tone) !important; }
.semi .btn-outline-danger { border-color: color-mix(in srgb, var(--destructive) 35%, var(--border)) !important; }
.semi .btn-default:hover,
.semi .btn-outline-primary:hover, .semi .btn-outline-secondary:hover, .semi .btn-outline-dark:hover, .semi .btn-outline-light:hover,
.semi .btn-default:not(:disabled):not(.disabled):active, .semi .btn-default:not(:disabled):not(.disabled).active,
.semi .btn-outline-primary:not(:disabled):not(.disabled):active, .semi .btn-outline-primary:not(:disabled):not(.disabled).active,
.semi .btn-outline-secondary:not(:disabled):not(.disabled).active, .semi .btn-outline-dark:not(:disabled):not(.disabled).active,
.semi body[data-theme-color] .btn-outline-primary:hover {
  background-color: var(--accent) !important;
  color: var(--accent-foreground) !important;
  border-color: var(--border) !important;
}
.semi .btn-outline-success:hover, .semi .btn-outline-info:hover, .semi .btn-outline-warning:hover, .semi .btn-outline-danger:hover,
.semi .btn-outline-danger:not(:disabled):not(.disabled):active, .semi .btn-outline-danger:not(:disabled):not(.disabled).active {
  background-color: color-mix(in srgb, var(--tone) 10%, var(--background)) !important;
  color: var(--tone) !important;
}
.semi .dark .btn-default, .semi.dark .btn-default,
.semi.dark [class*='btn-outline-'] { background-color: color-mix(in srgb, var(--input) 30%, transparent) !important; border-color: var(--input) !important; }

/* Ghost / link */
.semi .btn-link { color: var(--link); background: transparent; border-color: transparent; box-shadow: none; }
.semi .btn-link:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.semi .btn-tool, .semi .btn-flat {
  background: transparent;
  border: 0;
  color: var(--muted-foreground);
  min-height: var(--control-h-sm);
  min-width: var(--control-h-sm);
  padding: 0 0.5rem;
  box-shadow: none;
}
.semi .btn-tool:hover { background-color: var(--accent); color: var(--accent-foreground); }
.semi .card-tools { display: flex; align-items: center; gap: 0.125rem; margin: -0.25rem -0.375rem -0.25rem auto; }
/* AdminLTE floats the title and the tools; a flex row centres them on one line. */
.semi .card-header:has(> .card-tools) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.semi .card-header:has(> .card-tools)::after { display: none; }
.semi .card-header > .card-title { float: none; }
.semi .card-header > .card-tools { float: none; position: static; }
.semi .card-tools .btn-tool { min-height: 1.5rem; min-width: 1.5rem; padding: 0 0.25rem; }

.semi .btn-group > .btn:not(:first-child), .semi .btn-group > .btn-group:not(:first-child) { margin-left: -1px; }
.semi .btn-group > .btn { box-shadow: none; }
.semi .btn-group { box-shadow: var(--shadow-xs); border-radius: var(--radius-md); }
.semi .btn-group > .btn:hover, .semi .btn-group > .btn.active { z-index: 1; }

.semi .close {
  color: var(--muted-foreground);
  opacity: 0.8;
  text-shadow: none;
  font-weight: 400;
  border-radius: var(--radius-sm);
}
.semi .close:hover { color: var(--foreground); opacity: 1; }

/* ---------- Forms ---------- */

/* Field states: rest (--field-bg), hover (--field-bg-hover), focus
 * (--field-bg, --field-focus border and a 3px halo). */
.semi {
  /* Filled fields, as in the previous Semi theme: a faint fill at rest, a
   * deeper fill on hover, the rest fill again plus a clear border on focus. */
  --field-bg: color-mix(in srgb, var(--foreground) 5%, var(--background));
  --field-bg-hover: color-mix(in srgb, var(--foreground) 9%, var(--background));
  --field-focus: color-mix(in srgb, var(--input) 25%, var(--foreground) 75%);
  --field-focus-halo: color-mix(in srgb, var(--ring) 35%, transparent);
}

.semi label:not(.custom-control-label):not(.form-check-label):not(.custom-file-label):not(.btn) { font-weight: 500; font-size: var(--text-sm); margin-bottom: 0.375rem; }
.semi .col-form-label { font-weight: 500; }
/* Bootstrap pads the label for a 38px field; match the theme's control height so
 * a form row is as tall as its controls. */
.semi .col-form-label {
  padding-top: calc((var(--control-h) - 1.5em) / 2);
  padding-bottom: calc((var(--control-h) - 1.5em) / 2);
  line-height: 1.5;
  margin-bottom: 0 !important;
}
.semi .col-form-label-sm { padding-top: calc((var(--control-h-sm) - 1.5em) / 2); padding-bottom: calc((var(--control-h-sm) - 1.5em) / 2); }
/* Field with buttons, the platform's own pattern:
 *   <div class="d-flex"><input class="form-control"><button class="btn ...">
 * (password eye, Random, Show/Change). Buttons take the field's height.
 * A button right against the field (no ml-* utility) joins it as one input
 * group; a spaced button keeps an even gap. Secondary buttons turn neutral;
 * btn-primary / btn-danger keep their color as the row's main action. */
.semi .d-flex > .form-control:has(~ .btn) { align-self: center; }
.semi .d-flex > .form-control ~ .btn,
.semi .d-flex > .btn:has(~ .form-control) {
  align-self: center;
  height: var(--control-h);
  min-height: var(--control-h);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.semi .d-flex > .form-control ~ .btn[class*='ml-'] { margin-left: 0.375rem !important; }
.semi .d-flex > .form-control ~ .btn:not(.btn-primary):not(.btn-danger),
.semi .d-flex > .form-control + .btn:not([class*='ml-']),
.semi .d-flex > .form-control + .btn:not([class*='ml-']) + .btn:not([class*='ml-']) {
  background-color: var(--field-bg) !important;
  border-color: var(--input) !important;
  color: var(--foreground) !important;
  box-shadow: none;
}
.semi.dark .d-flex > .form-control ~ .btn:not(.btn-primary):not(.btn-danger),
.semi.dark .d-flex > .form-control + .btn:not([class*='ml-']),
.semi.dark .d-flex > .form-control + .btn:not([class*='ml-']) + .btn:not([class*='ml-']) {
  background-color: var(--field-bg) !important;
}
.semi .d-flex > .form-control ~ .btn:not(.btn-primary):not(.btn-danger):hover,
.semi .d-flex > .form-control + .btn:not([class*='ml-']):hover,
.semi .d-flex > .form-control + .btn:not([class*='ml-']) + .btn:not([class*='ml-']):hover {
  background-color: var(--field-bg-hover) !important;
  color: var(--foreground) !important;
}
.semi .d-flex > .form-control + .btn:not([class*='ml-']) > i,
.semi .d-flex > .form-control + .btn:not([class*='ml-']) + .btn:not([class*='ml-']) > i { color: var(--muted-foreground); }
/* joined: shared border, outer corners only */
.semi .d-flex > .form-control:has(+ .btn:not([class*='ml-'])) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.semi .d-flex > .form-control + .btn:not([class*='ml-']),
.semi .d-flex > .form-control + .btn:not([class*='ml-']) + .btn:not([class*='ml-']) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  min-width: var(--control-h);
}
.semi .d-flex > .form-control:focus + .btn:not([class*='ml-']) { border-left-color: var(--ring) !important; }
.semi .form-group { margin-bottom: 1rem; }

.semi .form-control,
.semi .custom-select,
.semi .custom-file-label {
  height: var(--control-h);
  padding: 0 var(--control-px);
  font-size: var(--text-control);
  line-height: 1.5rem;
  color: var(--foreground);
  background-color: var(--field-bg);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.semi textarea.form-control { height: auto; min-height: 4rem; line-height: 1.5; padding: 0.5rem var(--control-px); }
.semi select.form-control[multiple], .semi select.form-control[size] { height: auto; }
.semi .form-control-sm, .semi .custom-select-sm, .semi .input-group-sm > .form-control, .semi .input-group-sm > .custom-select {
  height: var(--control-h-sm);
  padding: 0 0.5rem;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}
.semi .form-control-lg { height: var(--control-h-lg); font-size: var(--text-base); }
.semi .form-control::placeholder { color: var(--muted-foreground); opacity: 1; }
.semi .form-control:focus,
.semi .custom-select:focus,
.semi .custom-file-input:focus ~ .custom-file-label {
  color: var(--foreground);
  background-color: var(--field-bg);
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px var(--field-focus-halo);
  outline: 0;
}
.semi .form-control:disabled, .semi .form-control[readonly], .semi .custom-select:disabled {
  background-color: var(--muted);
  opacity: 0.7;
  cursor: not-allowed;
}
.semi .form-control[readonly]:not(:disabled) { cursor: default; opacity: 1; }
.semi .form-control.is-invalid, .semi .was-validated .form-control:invalid,
.semi .custom-select.is-invalid {
  border-color: var(--destructive);
  background-image: none;
  padding-right: 0.75rem;
}
.semi .form-control.is-invalid:focus, .semi .custom-select.is-invalid:focus { box-shadow: 0 0 0 var(--ring-width) color-mix(in srgb, var(--destructive) 20%, transparent); }
.semi .form-control.is-valid { border-color: var(--success); background-image: none; padding-right: 0.75rem; }
.semi .invalid-feedback { color: var(--destructive); font-size: var(--text-sm); }
.semi .valid-feedback { color: var(--success); font-size: var(--text-sm); }

.semi select.form-control:not([multiple]):not([size]),
.semi .custom-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2rem;
  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='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1rem;
}
.semi select.form-control option, .semi .custom-select option { background-color: var(--popover); color: var(--popover-foreground); }

.semi .input-group-text {
  height: 100%;
  min-height: var(--control-h);
  padding: 0 0.75rem;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  background-color: var(--field-bg);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
}
.semi .input-group-sm .input-group-text { min-height: var(--control-h-sm); font-size: var(--text-sm); }
.semi .input-group > .form-control, .semi .input-group > .custom-select { box-shadow: none; }
.semi .input-group { border-radius: var(--radius-md); }
.semi .input-group > .input-group-append > .btn,
.semi .input-group > .input-group-prepend > .btn { box-shadow: none; }

.semi .custom-file,
.semi .custom-file-input { height: var(--control-h); }
/* The file name and the Browse part are centred by flex in the label's own
 * box, so neither depends on a line height matching the field height
 * (Bootstrap pads the label for 38px; a line-height match still sat high on
 * some screens). */
.semi .custom-file-label {
  display: flex;
  align-items: center;
  top: 0;
  height: var(--control-h);
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 5.5rem;
  line-height: 1.25rem;
  font-weight: var(--font-weight);
  overflow: hidden;
  white-space: nowrap;
}
.semi .custom-file-label::after {
  display: flex;
  align-items: center;
  top: 0;
  bottom: 0;
  height: auto;
  padding: 0 0.75rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--foreground);
  background-color: var(--muted);
  border-left: 1px solid var(--input);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Checkbox, radio, switch */
.semi .custom-control-label::before {
  background-color: transparent;
  border: 1px solid var(--input);
  box-shadow: var(--shadow-xs);
}
.semi.dark .custom-control-label::before { background-color: color-mix(in srgb, var(--input) 30%, transparent); }
.semi .custom-checkbox .custom-control-label::before { border-radius: 4px; }
.semi .custom-control-input:checked ~ .custom-control-label::before,
.semi body[data-theme-color] .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.semi .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 var(--ring-width) color-mix(in srgb, var(--ring) 50%, transparent); }
.semi .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--ring); }
.semi .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background: var(--primary-foreground);
  -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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 75% 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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 75% no-repeat;
}
.semi .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background: var(--primary-foreground);
  -webkit-mask: radial-gradient(circle, #000 0 28%, transparent 30%);
  mask: radial-gradient(circle, #000 0 28%, transparent 30%);
}
.semi .custom-switch .custom-control-label::before {
  border-radius: 9999px;
  background-color: var(--input);
  border-color: transparent;
}
.semi .custom-switch .custom-control-label::after {
  background-color: var(--background);
  border-radius: 9999px;
  box-shadow: var(--shadow-sm);
}
.semi.dark .custom-switch .custom-control-label::after { background-color: var(--foreground); }
.semi .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: var(--primary-foreground); }
.semi label.custom-control-label, .semi label.form-check-label { font-weight: 400; }
.semi .form-check-input { accent-color: var(--primary); }
.semi .icheck-primary > input:first-child:checked + label::before,
.semi .icheck-primary > input:first-child:checked + input[type='hidden'] + label::before {
  background-color: var(--primary);
  border-color: var(--primary);
}
.semi [class*='icheck-'] > label::before { border-color: var(--input) !important; border-radius: 4px; }
.semi .custom-range::-webkit-slider-thumb { background-color: var(--primary); }
.semi .custom-range::-moz-range-thumb { background-color: var(--primary); }
.semi .custom-range::-webkit-slider-runnable-track { background-color: var(--muted); }

/* Filter rows (.page-search: a label and its control, side by side in each
 * column). Top-aligned, so a tall textarea does not push its label and the
 * neighbouring filters down to its middle; the label is one control tall,
 * so its text lines up with the control's first line. */
.semi .page-search { align-items: flex-start; }
.semi .page-search > label {
  margin: 0 0.5rem 0 0 !important;
  line-height: var(--control-h);
  white-space: nowrap;
}
.semi .page-search > textarea.form-control { min-height: var(--control-h); resize: vertical; }

/* ---------- Cards and boxes ---------- */

.semi .card {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  margin-bottom: 1rem;
}
.semi .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--border);
  padding: calc(var(--space) * 0.75) var(--space);
  color: var(--card-foreground);
}
.semi .card-header:first-child { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.semi .card-title { font-size: var(--text-card-title); font-weight: 500; letter-spacing: -0.01em; margin: 0; line-height: 1.5rem; }
.semi h3.card-title { margin-bottom: 0; }
.semi .card-body { padding: var(--space); }
.semi .card-footer {
  background-color: transparent;
  border-top: 1px solid var(--border);
  padding: calc(var(--space) * 0.75) var(--space);
}
.semi .card-footer:last-child { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.semi .card > .table:last-child, .semi .card-body.p-0 > .table:last-child, .semi .card-body.p-0 .table-responsive:last-child > .table { margin-bottom: 0; }
/* Colored and outline cards stay neutral: no colored header, no colored top edge. */
.semi .card[class*='card-'],
.semi .card.card-outline { border-top: 1px solid var(--border); }
.semi .card[class*='card-']:not(.card-outline) > .card-header,
.semi body[data-theme-color] .card-primary:not(.card-outline) > .card-header {
  background-color: transparent !important;
  color: var(--card-foreground) !important;
  border-color: var(--border) !important;
}
.semi .card[class*='card-']:not(.card-outline) > .card-header a,
.semi .card[class*='card-']:not(.card-outline) > .card-header .btn-tool { color: var(--muted-foreground); }
.semi .card.collapsed-card .card-header { border-bottom: 0; }

/* Card tabs (card-header p-0 > nav-tabs) */
.semi .card-header.p-0 { padding: 0 !important; }
.semi .card-header.p-0 .nav-tabs, .semi .card-tabs .card-header .nav-tabs { padding: 0 0.75rem; }

/* small-box: AdminLTE's color block becomes a stat card. */
.semi .small-box,
.semi .small-box[class*='bg-'] {
  background-color: var(--card) !important;
  color: var(--card-foreground) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.semi .small-box > .inner { padding: var(--space); }
.semi .small-box h3 {
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0.25rem 0 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  order: 2;
}
.semi .small-box > .inner { display: flex; flex-direction: column; }
.semi .small-box p { color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 500; margin: 0; order: 1; }
.semi .small-box .icon { color: var(--tone, var(--muted-foreground)); }
.semi .small-box .icon > i,
.semi .small-box .icon > i.fa, .semi .small-box .icon > i.fas, .semi .small-box .icon > i.far, .semi .small-box .icon > i.fab, .semi .small-box .icon > i.ion,
.semi .small-box:hover .icon > i, .semi .small-box:hover .icon > i.fa, .semi .small-box:hover .icon > i.fas {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1rem;
  width: var(--control-h);
  height: var(--control-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--tone, var(--muted-foreground)) 12%, transparent);
  opacity: 1;
  transform: none;
}
.semi .small-box .icon > svg { width: 1rem; height: 1rem; top: 1.25rem; right: 1.25rem; }
.semi .small-box > .small-box-footer,
.semi .small-box[class*='bg-'] > .small-box-footer,
.semi .small-box[class*='bg-'] > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  background-color: transparent !important;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground) !important;
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
}
.semi .small-box > .small-box-footer:hover { background-color: var(--accent) !important; color: var(--accent-foreground) !important; }

.semi .info-box {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: 1rem;
  min-height: auto;
  align-items: center;
  gap: 0.25rem;
}
.semi .info-box .info-box-icon,
.semi .info-box .info-box-icon[class*='bg-'] {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.125rem;
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--tone, var(--muted-foreground)) 12%, transparent) !important;
  color: var(--tone, var(--muted-foreground)) !important;
  box-shadow: none;
}
.semi .info-box .info-box-text { color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 500; text-transform: none; }
.semi .info-box .info-box-number { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.semi .info-box[class*='bg-'] { background-color: var(--card) !important; color: var(--card-foreground) !important; }

.semi .callout {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tone, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 1rem 1.25rem;
}
.semi .callout h5 { font-size: var(--text-base); font-weight: 600; margin-bottom: 0.25rem; }
.semi .callout p { color: var(--muted-foreground); }
.semi .callout a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Badge ---------- */

.semi .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
.semi .badge-pill { border-radius: 9999px; }
.semi .badge-primary, .semi body[data-theme-color] .badge-primary { background-color: var(--primary) !important; color: var(--primary-foreground) !important; border-color: transparent !important; }
.semi .badge-secondary, .semi .badge-light { background-color: var(--secondary); color: var(--secondary-foreground); }
.semi .badge-dark { background-color: var(--foreground); color: var(--background); }
.semi .badge-success, .semi .badge-info, .semi .badge-warning, .semi .badge-danger {
  background-color: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--tone);
  border-color: color-mix(in srgb, var(--tone) 22%, transparent);
}
.semi .main-header .navbar-badge.badge-warning, .semi .main-header .navbar-badge.badge-danger, .semi .main-header .navbar-badge.badge-info, .semi .main-header .navbar-badge.badge-success {
  background-color: var(--tone);
  color: var(--tone-fg);
  box-shadow: 0 0 0 2px var(--background);
}

/* ---------- Alert ---------- */

.semi .alert {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  font-size: var(--text-sm);
}
.semi .alert-success, .semi .alert-info, .semi .alert-warning, .semi .alert-danger, .semi .alert-primary {
  color: var(--card-foreground);
  background-color: color-mix(in srgb, var(--tone) 7%, var(--card));
  border-color: color-mix(in srgb, var(--tone) 30%, var(--border));
}
.semi .alert-danger { color: var(--destructive); }
.semi .alert > .icon, .semi .alert > i:first-child { color: var(--tone, inherit); margin-right: 0.375rem; }
.semi .alert .alert-heading, .semi .alert h5 { font-size: var(--text-sm); font-weight: 600; color: inherit; }
.semi .alert a, .semi .alert .alert-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.semi .alert-dismissible .close { padding: 0.625rem 0.875rem; color: inherit; }

/* ---------- Tables ---------- */

.semi .table {
  color: var(--foreground);
  background-color: transparent;
  font-size: var(--text-sm);
}
.semi .table th, .semi .table td {
  border-top: 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.semi .table thead th,
.semi .table > thead > tr > th {
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
  font-weight: 500;
}
.semi .table tbody tr:last-child td { border-bottom: 0; }
.semi .card-body.p-0 .table:not(.table-bordered) tr > :first-child,
.semi .card > .table tr > :first-child { padding-left: 1.25rem; }
.semi .card-body.p-0 .table:not(.table-bordered) tr > :last-child,
.semi .card > .table tr > :last-child { padding-right: 1.25rem; }
.semi .card-body:not(.p-0) .table tbody tr:last-child td,
.semi .table-bordered tbody tr:last-child td { border-bottom: 1px solid var(--border); }
.semi .table-hover tbody tr:hover,
.semi table.dataTable tbody tr:hover { background-color: color-mix(in srgb, var(--muted) 60%, transparent); color: var(--foreground); }
.semi .table-striped tbody tr:nth-of-type(odd) { background-color: color-mix(in srgb, var(--muted) 45%, transparent); }
.semi .table-bordered, .semi .table-bordered th, .semi .table-bordered td,
.semi .table-responsive > .table-bordered { border-color: var(--border); }
/* Bordered tables keep every cell edge, the top row included (the generic
 * .table rule above drops border-top). */
.semi .table-bordered :where(thead, tbody, tfoot) > tr > :where(th, td) { border: 1px solid var(--border); }
.semi .table-bordered thead th, .semi .table-bordered thead td { border-bottom-width: 1px; }
.semi .table-bordered { border-radius: var(--radius-lg); }
/* Bordered table in a padding-less card body (p-0), shadcn-style: the frame
 * sits on the table's box (the scroll area when it scrolls), inset from the
 * card, and the table's own outer cell edges go. The frame stays whole while
 * a wide table scrolls inside it. */
.semi .card-body.p-0:has(> .table-bordered) {
  width: auto;
  margin: var(--space);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.semi .card-body.p-0:has(> .table-responsive > .table-bordered) { padding: var(--space) !important; }
.semi .card-body.p-0 > .table-responsive:has(> .table-bordered) {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.semi .card-body.p-0:has(> .table-bordered) > .table-bordered,
.semi .card-body.p-0 > .table-responsive > .table-bordered { margin-bottom: 0; border: 0; }
.semi .card-body.p-0:has(> .table-bordered) > .table-bordered > * > tr > :first-child,
.semi .card-body.p-0 > .table-responsive > .table-bordered > * > tr > :first-child { border-left: 0; }
.semi .card-body.p-0:has(> .table-bordered) > .table-bordered > * > tr > :last-child,
.semi .card-body.p-0 > .table-responsive > .table-bordered > * > tr > :last-child { border-right: 0; }
.semi .card-body.p-0:has(> .table-bordered) > .table-bordered > :first-child > tr:first-child > *,
.semi .card-body.p-0 > .table-responsive > .table-bordered > :first-child > tr:first-child > * { border-top: 0; }
.semi .card-body.p-0:has(> .table-bordered) > .table-bordered > :last-child > tr:last-child > *,
.semi .card-body.p-0 > .table-responsive > .table-bordered > :last-child > tr:last-child > * { border-bottom: 0; }
.semi .card-body.p-0:has(> .dataTables_wrapper .table-bordered) { padding: var(--space) !important; }
.semi .table .thead-light th, .semi .table .thead-dark th {
  background-color: color-mix(in srgb, var(--muted) 50%, transparent);
  color: var(--muted-foreground);
  border-color: var(--border);
}
.semi .table-active, .semi .table-active > td, .semi .table-active > th { background-color: var(--accent); }
.semi table.bg-white, .semi .table.bg-white { background-color: transparent !important; }
.semi table a:not(.btn) { color: var(--foreground); font-weight: 500; }
.semi table a:not(.btn):hover { color: var(--foreground); }

/* DataTables */
.semi .dataTables_wrapper .dataTables_info { color: var(--muted-foreground); font-size: var(--text-sm); padding-top: 0.75rem; }
.semi .dataTables_wrapper .dataTables_filter input, .semi .dataTables_wrapper .dataTables_length select { margin-left: 0.5rem; }
.semi table.dataTable thead .sorting::before, .semi table.dataTable thead .sorting::after,
.semi table.dataTable thead .sorting_asc::before, .semi table.dataTable thead .sorting_desc::after { opacity: 0.25; }
.semi table.dataTable { border-collapse: collapse !important; }

/* ---------- Pagination ---------- */

.semi .pagination { gap: 0.25rem; align-items: center; }
.semi .page-link,
.semi .pagination .page-item:first-child .page-link,
.semi .pagination .page-item:last-child .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h);
  height: var(--control-h);
  padding: 0 0.625rem;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--foreground);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}
.semi .pagination-sm .page-link { min-width: var(--control-h-sm); height: var(--control-h-sm) !important; font-size: var(--text-sm); }
.semi .page-link:hover { background-color: var(--accent); color: var(--accent-foreground); border-color: transparent; }
.semi .page-link:focus { box-shadow: 0 0 0 var(--ring-width) color-mix(in srgb, var(--ring) 50%, transparent); }
.semi .page-item.active .page-link,
.semi body[data-theme-color] .page-item.active .page-link {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-xs);
}
.semi .page-item.disabled .page-link { color: var(--muted-foreground); background: transparent; opacity: 0.5; border-color: transparent; }

/* ---------- Navs and tabs ---------- */

/* nav-tabs: underline tabs */
.semi .nav-tabs { border-bottom: 1px solid var(--border); gap: 0.25rem; }
.semi .nav-tabs .nav-link {
  margin-bottom: -1px;
  padding: 0.625rem 0.75rem;
  color: var(--muted-foreground);
  font-weight: 500;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.semi .nav-tabs .nav-link:hover { color: var(--foreground); border-bottom-color: var(--border); }
.semi .nav-tabs .nav-link.active, .semi .nav-tabs .nav-item.show .nav-link {
  color: var(--foreground);
  background: transparent;
  border-bottom-color: var(--foreground);
}
.semi .card-header.p-0 .nav-tabs, .semi .card-header .nav-tabs { border-bottom: 0; margin-bottom: -1px; }

/* nav-pills outside the sidebar: segmented control */
.semi .content-wrapper .nav-pills,
.semi .modal .nav-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  padding: 0.1875rem;
  background-color: var(--muted);
  border-radius: var(--radius-lg);
}
.semi .content-wrapper .nav-pills .nav-link,
.semi .modal .nav-pills .nav-link {
  padding: 0.25rem 0.75rem;
  color: var(--muted-foreground);
  font-weight: 500;
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent;
}
.semi .content-wrapper .nav-pills .nav-link:hover { color: var(--foreground); }
.semi .content-wrapper .nav-pills .nav-link.active, .semi .content-wrapper .nav-pills .show > .nav-link,
.semi .modal .nav-pills .nav-link.active {
  background-color: var(--background);
  color: var(--foreground);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.semi.dark .content-wrapper .nav-pills .nav-link.active { background-color: color-mix(in srgb, var(--input) 30%, transparent); border-color: var(--input); }
.semi .nav-pills.flex-column { display: flex; }

/* ---------- Dropdown, popover, tooltip ---------- */

.semi .dropdown-menu {
  padding: 0.25rem;
  font-size: var(--text-base);
  color: var(--popover-foreground);
  background-color: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 8rem;
}
.semi .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  color: var(--popover-foreground);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.semi .dropdown-item:hover, .semi .dropdown-item:focus { background-color: var(--accent); color: var(--accent-foreground); }
.semi .dropdown-item.active, .semi .dropdown-item:active { background-color: var(--accent); color: var(--accent-foreground); font-weight: 500; }
.semi .dropdown-item.disabled, .semi .dropdown-item:disabled { color: var(--muted-foreground); opacity: 0.6; }
.semi .dropdown-divider { margin: 0.25rem -0.25rem; border-top-color: var(--border); }
.semi .dropdown-header, .semi .dropdown-item.dropdown-header {
  padding: 0.375rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted-foreground);
}
.semi .dropdown-item.dropdown-footer { justify-content: center; color: var(--muted-foreground); font-size: var(--text-sm); }
.semi .dropdown-menu-lg { min-width: 18rem; max-width: 22rem; padding: 0.25rem; }
.semi .dropdown-menu-lg .dropdown-item { padding: 0.5rem; white-space: normal; }
.semi .language-dropdown a { color: var(--popover-foreground); }

.semi .popover {
  font-family: var(--font-sans);
  background-color: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.semi .popover-header { background: transparent; border-bottom-color: var(--border); font-weight: 600; font-size: var(--text-sm); color: inherit; }
.semi .popover-body { color: var(--popover-foreground); }
.semi .bs-popover-top > .arrow::before, .semi .bs-popover-auto[x-placement^='top'] > .arrow::before { border-top-color: var(--border); }
.semi .bs-popover-top > .arrow::after, .semi .bs-popover-auto[x-placement^='top'] > .arrow::after { border-top-color: var(--popover); }
.semi .bs-popover-bottom > .arrow::before, .semi .bs-popover-auto[x-placement^='bottom'] > .arrow::before { border-bottom-color: var(--border); }
.semi .bs-popover-bottom > .arrow::after, .semi .bs-popover-auto[x-placement^='bottom'] > .arrow::after { border-bottom-color: var(--popover); }

.semi .tooltip { font-family: var(--font-sans); font-size: var(--text-xs); }
.semi .tooltip-inner {
  background-color: var(--foreground);
  color: var(--background);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  max-width: 260px;
}
.semi .bs-tooltip-top .arrow::before, .semi .bs-tooltip-auto[x-placement^='top'] .arrow::before { border-top-color: var(--foreground); }
.semi .bs-tooltip-bottom .arrow::before, .semi .bs-tooltip-auto[x-placement^='bottom'] .arrow::before { border-bottom-color: var(--foreground); }
.semi .bs-tooltip-left .arrow::before, .semi .bs-tooltip-auto[x-placement^='left'] .arrow::before { border-left-color: var(--foreground); }
.semi .bs-tooltip-right .arrow::before, .semi .bs-tooltip-auto[x-placement^='right'] .arrow::before { border-right-color: var(--foreground); }

/* ---------- Modal ---------- */

/* Color and blur belong to the backdrop itself, not to .show: Bootstrap
 * drops .show first and fades the backdrop out after, so with them on .show
 * the closing frames flashed Bootstrap's black and lost the blur. Only the
 * opacity follows .show, so it fades in and out in the theme's color. */
.semi .modal-backdrop {
  background-color: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}
.semi .modal-backdrop.fade { opacity: 0; transition: opacity 0.15s linear; }
.semi .modal-backdrop.show { opacity: 1; }
.semi .modal-content {
  background-color: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.semi .modal-header {
  align-items: center;
  padding: var(--space) var(--space) 0.5rem;
  border-bottom: 0;
}
.semi .modal-title { font-size: var(--text-card-title); font-weight: 500; letter-spacing: -0.015em; line-height: 1.5rem; }
.semi .modal-header .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  margin: -0.25rem -0.5rem -0.25rem auto;
  padding: 0;
  font-size: 1.25rem;
  opacity: 0.7;
}
.semi .modal-header .close:hover { background-color: var(--accent); opacity: 1; }
.semi .modal-body { padding: 0.5rem var(--space); }
.semi .modal-footer {
  padding: 0.75rem var(--space) var(--space);
  border-top: 0;
  gap: 0.5rem;
}
.semi .modal-footer > * { margin: 0; }

/* ---------- Toasts (ezyadmin.shortToast / AdminLTE Toasts) ----------
 * Status shows as a colored icon and a light tint, not a colored edge. */

.semi .toasts-top-right, .semi .toasts-top-left, .semi .toasts-bottom-right, .semi .toasts-bottom-left {
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: calc(100vw - 1rem);
}
.semi .toasts-top-right { top: 3.5rem; right: 0; }
.semi .toasts-top-left { top: 3.5rem; left: 0; }
.semi .toast,
.semi .toast[class*='bg-'] {
  width: 22rem;
  max-width: 100%;
  margin: 0;
  flex-basis: auto;
  background-color: var(--popover) !important;
  color: var(--popover-foreground) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
}
.semi .toast[class*='bg-'] {
  background-color: color-mix(in srgb, var(--tone) 7%, var(--popover)) !important;
  border-color: color-mix(in srgb, var(--tone) 30%, var(--border));
}
.semi .toast .toast-header,
.semi .toast[class*='bg-'] .toast-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: transparent !important;
  color: var(--popover-foreground) !important;
  border-bottom: 0;
  padding: 0.75rem 0.75rem 0.125rem 0.875rem;
  font-weight: var(--font-weight-strong);
}
.semi .toast[class*='bg-'] .toast-header::before {
  content: '';
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  background-color: var(--tone);
  -webkit-mask: var(--toast-icon) center / contain no-repeat;
  mask: var(--toast-icon) center / contain no-repeat;
}
.semi .toast.bg-success { --toast-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.semi .toast.bg-danger { --toast-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E"); }
.semi .toast.bg-warning { --toast-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.semi .toast.bg-info, .semi .toast.bg-primary, .semi .toast.bg-secondary, .semi .toast.bg-dark { --toast-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.semi .toast .toast-header strong { margin-right: auto; }
.semi .toast .toast-header small { color: var(--muted-foreground) !important; }
.semi .toast .toast-header .close {
  margin: 0 !important;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  font-size: 1.125rem;
}
.semi .toast .toast-header .close:hover { background-color: var(--accent); }
.semi .toast .toast-body { padding: 0 0.875rem 0.75rem; color: var(--muted-foreground); }
.semi .toast[class*='bg-'] .toast-body { padding-left: 2.375rem; }

/* ---------- Lists, progress, misc ---------- */

.semi .list-group-item {
  background-color: var(--card);
  color: var(--card-foreground);
  border-color: var(--border);
}
.semi .list-group-item:first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.semi .list-group-item:last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.semi .list-group-item-action:hover { background-color: var(--accent); color: var(--accent-foreground); }
.semi .list-group-item.active { background-color: var(--accent); color: var(--accent-foreground); border-color: var(--border); font-weight: 500; }
.semi .list-group-unbordered > .list-group-item { background: transparent; }

.semi .progress {
  height: 0.25rem;
  background-color: var(--muted);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.semi .progress-bar { background-color: var(--primary); }
.semi .progress-bar[class*='bg-'] { background-color: var(--tone) !important; }

.semi .direct-chat-text { background: var(--muted); border-color: var(--border); color: var(--foreground); }
.semi .timeline::before { background-color: var(--border); }
.semi .timeline > div > .timeline-item { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); box-shadow: none; border-radius: var(--radius-lg); }

/* Overlays and loaders */
.semi .overlay, .semi .card > .overlay { background-color: color-mix(in srgb, var(--background) 70%, transparent); border-radius: inherit; }
.semi div.screen-loading { background-color: color-mix(in srgb, var(--background) 70%, transparent); }

/* jQuery UI autocomplete, used by admin search boxes */
/* Popups only: a field built by a jQuery UI widget (the admin combobox puts
 * ui-widget-content on its <input class="form-control">) stays a field. */
.semi ul.ui-autocomplete, .semi .ui-widget.ui-widget-content:not(input):not(textarea):not(select) {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 0.25rem;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.semi .ui-widget { font-family: var(--font-sans); font-size: var(--text-sm); }
.semi .ui-menu .ui-menu-item-wrapper { padding: 0.375rem 0.5rem; border-radius: var(--radius-sm); border: 0; }
.semi .ui-menu .ui-menu-item-wrapper.ui-state-active,
.semi ul.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper:hover {
  background: var(--accent);
  color: var(--accent-foreground);
  border: 0;
  margin: 0;
}

/* Select2 (loaded by plugins; theme "default" and "bootstrap4"). Shaped like .form-control. */
.semi .select2-container { font-size: var(--text-sm); }
.semi .select2-container--default .select2-selection--single,
.semi .select2-container--bootstrap4 .select2-selection--single,
.semi .select2-container--default .select2-selection--multiple,
.semi .select2-container--bootstrap4 .select2-selection--multiple,
.semi .select2-container--bootstrap4 .select2-selection {
  min-height: var(--control-h);
  background-color: var(--field-bg);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  color: var(--foreground);
}
.semi .select2-container--default .select2-selection--single,
.semi .select2-container--bootstrap4 .select2-selection--single { height: var(--control-h); }
.semi .select2-container .select2-selection--single { padding: 0; }
.semi .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--control-h) - 2px);
  margin-top: 0;
  padding-left: var(--control-px);
  padding-right: 2rem;
  color: var(--foreground);
}
.semi .select2-container .select2-selection__placeholder { color: var(--muted-foreground) !important; }
.semi .select2-container .select2-selection--single .select2-selection__arrow {
  height: calc(var(--control-h) - 2px);
  width: var(--control-h-sm);
  top: 0;
  right: 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='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 1rem no-repeat;
}
.semi .select2-container .select2-selection--single .select2-selection__arrow b { display: none; }
/* AdminLTE's small variant (select.form-control-sm / .text-sm) */
.semi select.form-control-sm ~ .select2-container .select2-selection--single,
.semi .text-sm .select2-container .select2-selection--single { height: var(--control-h-sm); min-height: var(--control-h-sm); }
.semi select.form-control-sm ~ .select2-container .select2-selection--single .select2-selection__rendered,
.semi .text-sm .select2-container .select2-selection--single .select2-selection__rendered { line-height: calc(var(--control-h-sm) - 2px); margin-top: 0; padding-left: 0.5rem; }
.semi select.form-control-sm ~ .select2-container .select2-selection--single .select2-selection__arrow,
.semi .text-sm .select2-container .select2-selection--single .select2-selection__arrow { top: 0; height: calc(var(--control-h-sm) - 2px); }
.semi .select2-container .select2-selection__clear { color: var(--muted-foreground); margin-right: 0.25rem; font-weight: 400; }
.semi .select2-container--default.select2-container--focus .select2-selection,
.semi .select2-container--default.select2-container--open .select2-selection,
.semi .select2-container--bootstrap4.select2-container--focus .select2-selection,
.semi .select2-container--bootstrap4.select2-container--open .select2-selection {
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px var(--field-focus-halo);
}
.semi .select2-container--open .select2-selection { border-radius: var(--radius-md) !important; }
.semi .select2-container--disabled .select2-selection { background-color: var(--muted) !important; opacity: 0.7; }
.semi .is-invalid + .select2-container .select2-selection { border-color: var(--destructive); }

.semi .select2-container .select2-selection--multiple { padding: 0.1875rem 0.375rem; }
.semi .select2-container .select2-selection--multiple .select2-selection__rendered { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; margin: 0; }
.semi .select2-container .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0 0.5rem;
  height: 1.625rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--secondary-foreground);
  background-color: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.semi .select2-container .select2-selection--multiple .select2-selection__choice__remove {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted-foreground);
  font-weight: 400;
  float: none;
}
.semi .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--foreground); background: none; }
.semi .select2-container .select2-search--inline .select2-search__field {
  margin: 0;
  height: 1.625rem;
  padding-left: 0.25rem;
  background: transparent;
  border: 0;
  color: var(--foreground);
  font-family: inherit;
  font-size: var(--text-sm);
}

.semi .select2-dropdown {
  background-color: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 1060;
}
.semi .select2-container--open .select2-dropdown--below { margin-top: 0.25rem; }
.semi .select2-container--open .select2-dropdown--above { margin-top: -0.25rem; }
.semi .select2-search--dropdown { padding: 0.25rem; border-bottom: 1px solid var(--border); }
.semi .select2-search--dropdown .select2-search__field {
  height: var(--control-h-sm);
  padding: 0 0.5rem 0 1.75rem;
  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='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 0.5rem center / 0.875rem no-repeat !important;
  color: var(--foreground);
  border: 0 !important;
  outline: 0;
  box-shadow: none !important;
}
.semi .select2-results > .select2-results__options { padding: 0.25rem; max-height: 16rem; }
.semi .select2-results__option {
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--popover-foreground);
}
.semi .select2-container .select2-results__option--highlighted,
.semi .select2-container--default .select2-results__option--highlighted[aria-selected],
.semi .select2-container--bootstrap4 .select2-results__option--highlighted,
.semi .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected='true'] {
  background-color: var(--accent);
  color: var(--accent-foreground);
}
.semi .select2-container .select2-results__option[aria-selected='true'],
.semi .select2-container--default .select2-results__option[aria-selected='true'] {
  background-color: transparent;
  color: var(--popover-foreground);
  font-weight: 500;
  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='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.875rem;
}
.semi .select2-container .select2-results__option[aria-selected='true'].select2-results__option--highlighted { background-color: var(--accent); }
.semi .select2-results__option[aria-disabled='true'] { color: var(--muted-foreground); opacity: 0.6; }
.semi .select2-results__group { padding: 0.375rem 0.5rem; font-size: var(--text-xs); font-weight: 500; color: var(--muted-foreground); }
.semi .select2-results__message { color: var(--muted-foreground); }
.semi .input-group > .select2-container { flex: 1 1 auto; width: 1% !important; }

/* daterangepicker and tempusdominus */
.semi .daterangepicker, .semi .bootstrap-datetimepicker-widget.dropdown-menu {
  font-family: var(--font-sans);
  background-color: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.semi .daterangepicker::before, .semi .daterangepicker::after { display: none; }
.semi .daterangepicker .calendar-table { background-color: transparent; border-color: transparent; }
.semi .daterangepicker td, .semi .daterangepicker th { border-radius: var(--radius-sm); }
.semi .daterangepicker td.available:hover, .semi .daterangepicker th.available:hover { background-color: var(--accent); color: var(--accent-foreground); }
.semi .daterangepicker td.in-range { background-color: var(--accent); color: var(--accent-foreground); }
.semi .daterangepicker td.active, .semi .daterangepicker td.active:hover { background-color: var(--primary); color: var(--primary-foreground); }
.semi .daterangepicker td.off { background: transparent; color: var(--muted-foreground); }
.semi .daterangepicker .drp-buttons, .semi .daterangepicker .ranges li { border-color: var(--border); }
.semi .daterangepicker .ranges li:hover { background-color: var(--accent); }
.semi .daterangepicker .ranges li.active { background-color: var(--primary); color: var(--primary-foreground); }
.semi .daterangepicker select { background: transparent; color: var(--foreground); border: 1px solid var(--input); border-radius: 4px; }
.semi .bootstrap-datetimepicker-widget table td.active, .semi .bootstrap-datetimepicker-widget table td span.active { background-color: var(--primary); color: var(--primary-foreground); }
.semi .bootstrap-datetimepicker-widget table td.day:hover, .semi .bootstrap-datetimepicker-widget table td span:hover,
.semi .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background-color: var(--accent); }

/* Media library grid (media page and the media picker dialog).
 * Each tile is a square card: the file centred and contained, the select
 * checkbox and the delete button inside its top corners, shown on hover,
 * when selected, and always on touch screens. */
.semi ul.media-list { gap: 0.75rem; }
.semi ul.media-list > li[id^='mediaItem'] {
  position: relative;
  justify-self: stretch;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color 150ms, box-shadow 150ms;
}
.semi ul.media-list > li[id^='mediaItem']:hover {
  border-color: color-mix(in srgb, var(--border) 40%, var(--foreground) 35%);
  box-shadow: var(--shadow-sm);
}
.semi ul.media-list > li[id^='mediaItem']:has(.media-item-checkbox:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
/* the file itself */
.semi ul.media-list > li[id^='mediaItem'] > img,
.semi ul.media-list > li[id^='mediaItem'] > img.img-thumbnail {
  width: 100% !important;
  height: 100% !important;
  padding: 0.75rem;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.semi ul.media-list > li[id^='mediaItem'] > video,
.semi ul.media-list > li[id^='mediaItem'] .video-thumbnail { width: 100%; height: 100%; object-fit: cover; }
.semi ul.media-list > li[id^='mediaItem'] > .d-flex { width: 100%; height: 100%; }
.semi ul.media-list > li[id^='mediaItem'] .file-thumbnail {
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  background-color: color-mix(in srgb, var(--muted) 60%, transparent);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.semi ul.media-list > li[id^='mediaItem'] .file-thumbnail i { font-size: 2rem; color: var(--muted-foreground); }
.semi ul.media-list > li[id^='mediaItem'] .file-thumbnail .text-dark-always { color: var(--foreground) !important; }
.semi ul.media-list > li[id^='mediaItem'] .file-thumbnail audio { width: 100%; }
/* select checkbox: top left, inside */
.semi ul.media-list .media-item-checkbox {
  top: 0.5rem;
  left: 0.5rem;
  bottom: auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  transform: none;
  z-index: 3;
  cursor: pointer;
  accent-color: var(--primary);
  opacity: 0;
  transition: opacity 150ms;
}
/* delete: a small round button, top right, inside */
.semi ul.media-list .delete-button {
  top: 0.375rem;
  right: 0.375rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted-foreground) !important;
  background-color: color-mix(in srgb, var(--background) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 9999px;
  transform: none;
  z-index: 3;
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms, background-color 150ms, color 150ms;
}
.semi ul.media-list .delete-button:hover {
  color: oklch(0.985 0 0) !important;
  background-color: var(--destructive);
  border-color: var(--destructive);
}
.semi ul.media-list > li[id^='mediaItem']:hover .media-item-checkbox,
.semi ul.media-list > li[id^='mediaItem']:hover .delete-button,
.semi ul.media-list .media-item-checkbox:checked,
.semi ul.media-list .media-item-checkbox:focus-visible { opacity: 1; }
@media (hover: none) {
  .semi ul.media-list .media-item-checkbox,
  .semi ul.media-list .delete-button { opacity: 1; }
}
/* date headings between groups */
.semi ul.media-list > li:not([id^='mediaItem']):not(.media-list-display-list) {
  padding: 0.75rem 0 0 !important;
  font-size: var(--text-sm);
  font-weight: 600 !important;
  color: var(--muted-foreground);
  /* A date heading is plain text: never a border, fill or hover ring. */
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
}
.semi ul.media-list > li:not([id^='mediaItem']):not(.media-list-display-list):first-child { padding-top: 0 !important; }
.semi .media-list.dragover { outline: 2px dashed var(--ring); outline-offset: 4px; background-color: var(--accent); }
.semi .file-thumbnail, .semi .audio-thumbnail, .semi .video-thumbnail { border-radius: var(--radius-lg); }

/* PhotoSwipe viewer: the admin opens it over the Media Details dialog, which
 * showed through its 92% backdrop. Near-opaque once open, so the file stands
 * alone (transparent images included). */
.semi .pswp { --pswp-bg: #09090b; --pswp-placeholder-bg: transparent; }
.semi .pswp--open .pswp__bg { opacity: 0.97 !important; }
/* Thumbnail strip along the bottom of the viewer (built by theme.js). */
.semi .semi-pswp-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  padding: 0.875rem 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.semi .semi-pswp-strip::-webkit-scrollbar { display: none; }
.semi .pswp--ui-visible .semi-pswp-strip { opacity: 1; }
.semi .semi-pswp-strip__track { display: flex; gap: 0.5rem; width: max-content; margin: 0 auto; }
.semi .semi-pswp-thumb {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: rgb(255 255 255 / 0.06);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12);
  opacity: 0.5;
  transition: opacity 0.15s, box-shadow 0.15s, transform 0.15s;
}
.semi .semi-pswp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.semi .semi-pswp-thumb:hover { opacity: 0.85; }
.semi .semi-pswp-thumb:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.semi .semi-pswp-thumb.is-active { opacity: 1; box-shadow: none; outline: 2px solid #fff; outline-offset: 2px; }
/* The dialog it was opened from steps aside while the viewer is up. */
.semi body:has(> .pswp--open) .modal.show .modal-dialog { visibility: hidden; }

/* Login, 2FA, setup (register-page / login-page) */
.semi .login-page, .semi .register-page {
  background-color: var(--muted);
  background-image: radial-gradient(color-mix(in srgb, var(--foreground) 6%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}
.semi .login-box, .semi .register-box { width: 380px; max-width: calc(100vw - 2rem); }
.semi .login-logo, .semi .register-logo {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.semi .login-logo a, .semi .register-logo a { color: var(--foreground); }
.semi .login-card-body, .semi .register-card-body {
  background-color: var(--card);
  color: var(--card-foreground);
  padding: 1.5rem;
  border-radius: var(--radius-xl);
}
.semi .login-box-msg, .semi .register-box-msg { color: var(--muted-foreground); padding: 0 0 1.25rem; text-align: left; }
.semi .login-page .card, .semi .register-page .card { box-shadow: var(--shadow-sm); }
.semi .login-page .input-group .form-control, .semi .register-page .input-group .form-control { border-right: 0; }
.semi .login-page .input-group-text, .semi .register-page .input-group-text { background-color: transparent; border-left: 0; }

/* Error pages */
.semi .error-page > .headline { color: var(--muted-foreground); font-weight: 600; }
.semi .error-page > .error-content > h3 { font-weight: 600; }

/* Editors embedded by plugins */
.semi .tox.tox-tinymce { border-color: var(--border); border-radius: var(--radius-lg); }
.semi .ck.ck-editor__main > .ck-editor__editable { background: var(--background); color: var(--foreground); }
.semi .ck.ck-balloon-panel { z-index: 999999 !important; }
.semi .note-editor.note-frame { border-color: var(--border); border-radius: var(--radius-lg); }

/* Header theme switch */
#semiThemeToggle .semi-icon-sun { display: none; }
.semi.dark #semiThemeToggle .semi-icon-sun { display: inline-block; }
.semi.dark #semiThemeToggle .semi-icon-moon { display: none; }

/* ---------- Interactions ----------
 * Quiet, 150ms. Colors only, plus Lyra's 1px press on buttons; nothing grows
 * or lifts. prefers-reduced-motion (below) turns transitions off. */

.semi .btn,
.semi .form-control,
.semi .custom-select,
.semi .custom-control-label::before,
.semi .select2-container .select2-selection,
.semi .small-box,
.semi .info-box,
.semi .card,
.semi .table tbody tr,
.semi .nav-sidebar .nav-link .nav-icon,
.semi .page-link,
.semi .dropdown-item,
.semi .list-group-item,
.semi a {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Buttons: press */
.semi .btn:not(:disabled):not(.disabled):active { transform: translateY(1px); }
.semi .dropdown-toggle[aria-expanded='true']:active { transform: none; }

/* Fields: the border firms up under the pointer (not while focused, disabled
 * or invalid, which have their own colors). */
.semi .form-control:hover:not(:focus):not(:disabled):not([readonly]),
.semi .custom-select:hover:not(:focus):not(:disabled),
.semi .custom-file:hover .custom-file-label,
.semi .select2-container:not(.select2-container--focus):not(.select2-container--open):not(.select2-container--disabled):hover .select2-selection {
  background-color: var(--field-bg-hover);
}
.semi .custom-control:hover .custom-control-input:not(:checked):not(:disabled) ~ .custom-control-label::before {
  border-color: color-mix(in srgb, var(--input) 45%, var(--foreground) 55%);
}
.semi .custom-switch:hover .custom-control-input:not(:checked):not(:disabled) ~ .custom-control-label::before {
  background-color: color-mix(in srgb, var(--input) 75%, var(--foreground) 25%);
}
.semi .custom-control-label { cursor: pointer; }

/* Table rows: every body row answers the pointer, as shadcn's TableRow does. */
.semi .table:not(.table-borderless) > tbody > tr:hover { background-color: color-mix(in srgb, var(--muted) 60%, transparent); }

/* Icon-only actions in tables (<a|button class="btn btn-link"><i ...></i>):
 * ghost icon buttons, muted until hovered, then their own color. */
.semi .table .btn-link:has(> i:only-child) {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  min-height: var(--control-h-sm);
  padding: 0 !important;
  border-radius: var(--radius-md);
  text-decoration: none;
}
.semi .table .btn-link:has(> i:only-child) > i { color: var(--muted-foreground) !important; transition: color 150ms; }
.semi .table .btn-link:has(> i:only-child):hover { background-color: var(--accent); }
.semi .table .btn-link:has(> i:only-child):hover > i { color: var(--foreground) !important; }
.semi .table .btn-link:has(> i.text-info:only-child):hover { background-color: color-mix(in srgb, var(--info) 12%, transparent); }
.semi .table .btn-link:has(> i.text-info:only-child):hover > i { color: var(--info) !important; }
.semi .table .btn-link:has(> i.text-primary:only-child):hover { background-color: color-mix(in srgb, var(--link) 12%, transparent); }
.semi .table .btn-link:has(> i.text-primary:only-child):hover > i { color: var(--link) !important; }
.semi .table .btn-link:has(> i.text-success:only-child):hover { background-color: color-mix(in srgb, var(--success) 12%, transparent); }
.semi .table .btn-link:has(> i.text-success:only-child):hover > i { color: var(--success) !important; }
.semi .table .btn-link:has(> i.text-warning:only-child):hover { background-color: color-mix(in srgb, var(--warning) 14%, transparent); }
.semi .table .btn-link:has(> i.text-warning:only-child):hover > i { color: var(--warning) !important; }
.semi .table .btn-link:has(> i.text-danger:only-child):hover { background-color: color-mix(in srgb, var(--destructive) 12%, transparent); }
.semi .table .btn-link:has(> i.text-danger:only-child):hover > i { color: var(--destructive) !important; }

/* Cards answer the pointer only when the whole card is clickable (a link, an
 * onclick handler or .cursor-pointer); plain cards stay still. */
.semi a.card:hover,
.semi .card[onclick]:hover,
.semi .card.cursor-pointer:hover,
.semi a.small-box:hover,
.semi .small-box[onclick]:hover,
.semi .small-box.cursor-pointer:hover,
.semi a.info-box:hover,
.semi .info-box[onclick]:hover,
.semi .info-box.cursor-pointer:hover {
  background-color: color-mix(in srgb, var(--card) 35%, var(--muted)) !important;
  text-decoration: none;
}

/* Stat cards: only the footer link moves. */
.semi .small-box > .small-box-footer > i { transition: transform 150ms; }
.semi .small-box > .small-box-footer:hover > i { transform: translateX(2px); }

/* Sidebar: the icon brightens with its row. */
.semi .nav-sidebar .nav-link:hover .nav-icon { opacity: 1; }
.semi .main-sidebar .brand-link:hover .brand-image { opacity: 0.85; }

.semi .image-button:hover, .semi .img-thumbnail:hover { border-color: var(--ring); }

/* Links inside text keep their underline offset on hover */
.semi .card-body p a:hover, .semi .form-text a:hover, .semi .callout a:hover { text-decoration-thickness: 1px; }

/* Fast tooltip (theme.js) for plain title attributes; Bootstrap tooltips
 * also fade in quicker than their default 150ms. */
.semi-tip {
  position: fixed;
  z-index: 1080;
  max-width: 280px;
  padding: 0.375rem 0.625rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  color: var(--background);
  background-color: var(--foreground);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.1s, transform 0.1s;
}
.semi-tip.show { opacity: 1; transform: none; }
.semi .tooltip.fade { transition-duration: 0.1s; }

@media (prefers-reduced-motion: reduce) {
  .semi *, .semi *::before, .semi *::after { transition-duration: 0.01ms !important; }
}

/* The platform's own color option (body[data-theme-color]) paints with
 * !important rules through --ezy-theme-accent. Point it at the theme tokens. */
.semi body[data-theme-color] { --ezy-theme-accent: var(--link); }

/* AdminLTE centres small-box text and hides its icon below 768px. */
@media (max-width: 767.98px) {
  .semi .small-box { text-align: left; }
  .semi .small-box .icon { display: block; }
  .semi .content-header .breadcrumb { margin-top: 0.25rem; }
}

/* No focus ring or outline on sidebar links; the fill already marks them. */
.semi .main-sidebar .nav-sidebar .nav-link:focus,
.semi .main-sidebar .nav-sidebar .nav-link:focus-visible,
.semi .main-sidebar .nav-sidebar .nav-link:active {
  outline: none;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * ezyarticle editor (Edit Post / Edit Page)
 * ------------------------------------------------------------------------ */

/* Title bar: action buttons + title field + icon buttons, as one field. */
.semi .input-group:has(> #titleInput) {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: 2.5rem;
  overflow: hidden;
  background-color: var(--field-bg) !important;
  border: 1px solid var(--input) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.semi .input-group:has(> #titleInput:hover) { background-color: var(--field-bg-hover) !important; }
.semi .input-group:has(> #titleInput:focus) {
  border-color: var(--field-focus) !important;
  box-shadow: 0 0 0 3px var(--field-focus-halo);
}
.semi .input-group:has(> #titleInput) > .input-group-prepend {
  display: flex;
  align-items: stretch;
  margin: 0;
  border: 0 !important;
}
.semi .input-group:has(> #titleInput) > .input-group-prepend > div { display: flex; border: 0 !important; }
.semi .input-group:has(> #titleInput) > .input-group-prepend > div:has(> .btn.d-none) { display: none; }
.semi .input-group:has(> #titleInput) > #titleInput + .input-group-prepend > div:not(:has(> .d-none)) {
  border-left: 1px solid var(--input) !important;
}
.semi .input-group:has(> #titleInput) .btn {
  min-height: 0;
  height: 100%;
  min-width: 2.5rem;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
  transform: none !important;
}
.semi .input-group:has(> #titleInput) .btn-light {
  color: var(--muted-foreground);
  background-color: transparent;
}
.semi .input-group:has(> #titleInput) .btn-light:not(:disabled):hover { color: var(--foreground); background-color: var(--accent); }
.semi .input-group:has(> #titleInput) .btn-light:disabled { opacity: 0.45; background-color: transparent; }
.semi .input-group:has(> #titleInput) .btn.bg-black {
  color: var(--primary-foreground) !important;
  background-color: var(--primary) !important;
}
.semi .input-group:has(> #titleInput) .btn.bg-black:hover { background-color: color-mix(in srgb, var(--primary) 88%, var(--background)) !important; }
.semi .input-group:has(> #titleInput) .btn-success:disabled { opacity: 0.55; }
.semi #titleInput {
  min-width: 0;
  padding: 0 0.875rem !important;
  font-size: var(--text-base, 0.9375rem);
  font-weight: 500;
  color: var(--foreground);
  background: transparent;
  outline: 0;
}
.semi #titleInput::placeholder { color: var(--muted-foreground); font-weight: 400; }

/* Settings panel on the right: one even list of rows. */
.semi .editor-menu {
  padding: 0.25rem 0.5rem !important;
  background-color: var(--card);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg);
}
.semi .editor-menu > .nav { margin-top: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
/* Every row the same height and divider, nested ones included (a stray
 * <li> in the template otherwise makes some rows taller). */
.semi .editor-menu .nav-item {
  margin: 0 !important;
  padding: 0.125rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.semi .editor-menu .nav-item:last-child { border-bottom: 0 !important; }
.semi .ezyarticle-expandable-item {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0 0.5rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--foreground) !important;
  border-radius: var(--radius-md);
  text-decoration: none !important;
  transition: background-color 0.15s;
}
.semi .ezyarticle-expandable-item:hover { background-color: var(--accent); }
.semi .ezyarticle-expandable-item > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.semi .ezyarticle-expandable-item .nav-icon {
  flex: none;
  width: 1rem;
  margin: 0 !important;
  font-size: 0.875rem !important;
  text-align: center;
  color: var(--muted-foreground);
}
.semi .ezyarticle-expandable-item > span:last-child { flex: none; font-size: 0.75rem; color: var(--muted-foreground); }
.semi .ezyarticle-expandable-item > span:last-child .fa-angle-left { transform: rotate(-90deg); }
.semi .ezyarticle-expandable-item:not(.collapsed) > span:last-child .fa-angle-down { transform: rotate(180deg); }
.semi .editor-menu .collapse.show,
.semi .editor-menu .collapsing { padding: 0.25rem 0.5rem 0.5rem; margin: 0 !important; }
/* Templates add mb-2/mt-2 around the row link and its panel (Menus page);
 * the row already carries its own spacing. */
.semi .editor-menu .ezyarticle-expandable-item { margin: 0 !important; }
.semi .editor-menu .nav-item > .collapse:not(.show) { margin: 0 !important; }

/* Card header with a small select and a button next to it (ezyarticle Menus:
 * "Select menu  [Extension v] [Edit]"): one height, a real gap, the select
 * not pulled into the button by .card-tools' negative margin. */
.semi .card-header > .card-tools.form-control,
.semi .card-header > .card-tools.custom-select { margin-top: 0; margin-bottom: 0; margin-right: 0; }
.semi .card-header > .form-control-sm ~ .btn:not(.btn-tool),
.semi .card-header > .custom-select-sm ~ .btn:not(.btn-tool) {
  min-height: var(--control-h-sm);
  height: var(--control-h-sm);
  padding: 0 0.625rem;
  font-size: var(--text-sm);
}
/* Admin combobox (jQuery UI): its wrapper fills the field's slot like a select. */
.semi span:has(> .address-combobox-input) { display: flex; flex: 1 1 auto; min-width: 0; position: relative; }
.semi span:has(> .address-combobox-input) > .address-combobox-input { width: 100%; }
/* The combobox input carries jQuery UI's ui-widget-content/ui-state-default
 * (and ui-state-hover/-focus/-active while used). jQuery UI paints those
 * white with a grey border and its own text color, and a plugin may load its
 * stylesheet after the theme or put the field inside a ui-widget-content
 * box. These win in every case and keep the field a theme field. */
.semi input.form-control.address-combobox-input,
.semi input.form-control.ui-widget-content,
.semi input.form-control.ui-state-default {
  background-image: none;
  background-color: var(--field-bg) !important;
  border: 1px solid var(--input) !important;
  color: var(--foreground) !important;
  font-weight: inherit;
  height: var(--control-h);
  box-shadow: none !important;           /* like the select beside it */
}
.semi input.form-control.address-combobox-input:hover:not(:focus):not(:disabled),
.semi input.form-control.ui-state-default.ui-state-hover:not(:focus) {
  background-color: var(--field-bg-hover) !important;
}
.semi input.form-control.address-combobox-input:focus,
.semi input.form-control.ui-state-default.ui-state-focus,
.semi input.form-control.ui-state-default.ui-state-active {
  background-color: var(--field-bg) !important;
  border-color: var(--field-focus) !important;
  box-shadow: 0 0 0 3px var(--field-focus-halo) !important;
  outline: 0;
}
.semi-classic input.form-control.address-combobox-input,
.semi-classic input.form-control.ui-widget-content,
.semi-classic input.form-control.ui-state-default { border-color: var(--field-border) !important; }
.semi-classic input.form-control.address-combobox-input:focus { background-color: var(--background) !important; border-color: var(--field-focus) !important; }