/* pelican-rs web UI. Palette follows the original's Filament colours
   (primary blue, gray zinc, danger red, success green, warning amber, info sky). */

:root {
  --primary-50: #eff6ff; --primary-100: #dbeafe; --primary-400: #60a5fa; --primary-500: #3b82f6;
  --primary-600: #2563eb; --primary-700: #1d4ed8;
  --danger-50: #fef2f2; --danger-400: #f87171; --danger-500: #ef4444; --danger-600: #dc2626; --danger-700: #b91c1c;
  --success-50: #f0fdf4; --success-400: #4ade80; --success-500: #22c55e; --success-600: #16a34a; --success-700: #15803d;
  --warning-50: #fffbeb; --warning-400: #fbbf24; --warning-500: #f59e0b; --warning-600: #d97706; --warning-700: #b45309;
  --info-50: #f0f9ff; --info-400: #38bdf8; --info-500: #0ea5e9; --info-600: #0284c7; --info-700: #0369a1;
  --gray-50: #fafafa; --gray-100: #f4f4f5; --gray-200: #e4e4e7; --gray-300: #d4d4d8; --gray-400: #a1a1aa;
  --gray-500: #71717a; --gray-600: #52525b; --gray-700: #3f3f46; --gray-800: #27272a; --gray-900: #18181b; --gray-950: #09090b;

  --bg: var(--gray-50);
  --surface: #fff;
  --surface-2: var(--gray-50);
  --border: rgb(9 9 11 / 0.08);
  --border-strong: var(--gray-300);
  --text: var(--gray-950);
  --text-2: var(--gray-500);
  --text-3: var(--gray-400);
  --input-bg: #fff;
  --hover: var(--gray-50);
  --muted-bg: var(--gray-200);
  --ring: var(--primary-600);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 30px -5px rgb(0 0 0 / 0.15);
  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sidebar-w: 20rem;
  --nav-text: var(--gray-700);
  --nav-active: var(--gray-100);
  --nav-accent: var(--primary-700);
  --accent: var(--primary-600);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--gray-950); --surface: var(--gray-900); --surface-2: rgb(255 255 255 / 0.03);
    --border: rgb(255 255 255 / 0.1); --border-strong: var(--gray-700);
    --text: #fff; --text-2: var(--gray-400); --text-3: var(--gray-500);
    --input-bg: rgb(255 255 255 / 0.05); --hover: rgb(255 255 255 / 0.05); --muted-bg: var(--gray-700);
    --ring: var(--primary-500); --shadow: none; --shadow-lg: 0 10px 30px -5px rgb(0 0 0 / 0.6);
    --nav-text: var(--gray-200); --nav-active: rgb(255 255 255 / 0.05); --nav-accent: var(--primary-400);
    --accent: var(--primary-400);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--gray-950); --surface: var(--gray-900); --surface-2: rgb(255 255 255 / 0.03);
  --border: rgb(255 255 255 / 0.1); --border-strong: var(--gray-700);
  --text: #fff; --text-2: var(--gray-400); --text-3: var(--gray-500);
  --input-bg: rgb(255 255 255 / 0.05); --hover: rgb(255 255 255 / 0.05); --muted-bg: var(--gray-700);
  --ring: var(--primary-500); --shadow: none; --shadow-lg: 0 10px 30px -5px rgb(0 0 0 / 0.6);
  --nav-text: var(--gray-200); --nav-active: rgb(255 255 255 / 0.05); --nav-accent: var(--primary-400);
    --accent: var(--primary-400);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.5 var(--font); background: var(--bg); color: var(--text); }
a { color: var(--primary-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
p { margin: 0; }
code, pre, .mono { font-family: var(--mono); font-size: 0.9em; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; vertical-align: middle; }
.icon-sm { width: 1rem; height: 1rem; flex-shrink: 0; vertical-align: middle; }
.icon-lg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.icon-xl { width: 3rem; height: 3rem; flex-shrink: 0; }

/* ---------- layout (Filament's panel layout: sidebar 20rem on the page background) ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg); position: sticky; top: 0; height: 100vh;
  overflow-y: auto; display: flex; flex-direction: column; }
.shell:not(.sidebar-only) .sidebar { border-right: 1px solid var(--border); background: var(--surface); }
.sidebar-head { height: 4rem; flex-shrink: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0 1.75rem; }
.sidebar-head .brand { display: flex; align-items: center; font-weight: 700; font-size: 1.25rem; line-height: 1.25rem; color: var(--text); letter-spacing: -0.025em; }
.sidebar-head .brand:hover { text-decoration: none; }
.sidebar-head .brand img { height: 2rem; }
.sidebar-head .sidebar-close { display: none; margin-left: auto; }
.sidebar nav { flex: 1; padding: 2rem 1rem 1rem; display: flex; flex-direction: column; gap: 1.75rem; }
.nav-group { display: flex; flex-direction: column; gap: 0.25rem; }
details.nav-group > summary { list-style: none; cursor: pointer; }
details.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group-label { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text-2); }
.nav-group-label > span { flex: 1; }
.nav-group-chevron { color: var(--text-3); transition: transform 0.15s; }
details.nav-group:not([open]) .nav-group-chevron { transform: rotate(180deg); }
.nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: 0.5rem; min-height: 2.5rem;
  color: var(--nav-text); font-size: 0.875rem; font-weight: 500; }
.nav-item .icon { width: 1.5rem; height: 1.5rem; color: var(--text-3); }
.nav-item > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--nav-active); text-decoration: none; }
.nav-item.active { background: var(--nav-active); color: var(--nav-accent); }
.nav-item.active .icon { color: var(--nav-accent); }
.nav-item .badge { margin-left: auto; }
/* The server switcher (Filament's tenant menu). */
.tenant-menu { margin: 0 1rem; }
.tenant-trigger { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--nav-text); }
.tenant-trigger:hover, .tenant-menu[open] .tenant-trigger { background: var(--nav-active); }
.tenant-trigger .icon-sm { color: var(--text-3); margin-left: auto; }
.tenant-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-avatar { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 0.375rem; background: var(--gray-950); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; }
.tenant-avatar.sm { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.tenant-list { width: 100%; max-height: 60vh; overflow-y: auto; }
.tenant-list a.active { color: var(--nav-accent); }
/* The bottom of the sidebar without a topbar: notifications and the user menu. */
.sidebar-footer { position: sticky; bottom: 0; background: inherit; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem 1.5rem; }
.sidebar-footer .notifications-btn, .user-trigger { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.5rem; border: 0;
  border-radius: 0.5rem; background: none; color: var(--nav-text); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; text-align: left; }
.sidebar-footer .notifications-btn:hover, .user-trigger:hover, .user-menu[open] .user-trigger { background: var(--nav-active); }
.sidebar-footer .notifications-btn .icon { width: 1.5rem; height: 1.5rem; color: var(--text-3); }
.sidebar-footer .notifications-label, .user-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer .notifications-count { position: static; min-width: 1.5rem; height: 1.25rem; line-height: 1.25rem; border-radius: 0.375rem;
  background: rgb(59 130 246 / 0.1); color: var(--primary-600); font-size: 0.75rem; }
.user-trigger .icon-sm { color: var(--text-3); }
.dropdown-menu.up { top: auto; bottom: calc(100% + 0.5rem); }
.user-menu .dropdown-menu { width: 100%; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { min-height: 4rem; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center;
  gap: 1rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 20; }
.topbar .brand { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; white-space: nowrap; font-weight: 700; font-size: 1.25rem;
  line-height: 1.25rem; letter-spacing: -0.025em; color: var(--text); }
.topbar .brand:hover { text-decoration: none; }
.topbar .brand img { height: 2rem; }
.topbar .spacer { flex: 1; }
.topbar .notifications-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-3); cursor: pointer; }
.topbar .notifications-btn:hover { background: var(--hover); color: var(--text-2); }
.topbar .notifications-label { display: none; }
/* The collapsible admin sidebar: collapse/expand buttons on desktop, a 4.5rem rail of icons when collapsed. */
.shell .sidebar-collapse, .shell .sidebar-expand { display: none; }
@media (min-width: 1024px) {
  .shell.collapsible .sidebar-collapse { display: inline-flex; }
  :root.sidebar-collapsed .shell.collapsible .sidebar-collapse { display: none; }
  :root.sidebar-collapsed .shell.collapsible .sidebar-expand { display: inline-flex; }
  .topbar .topbar-collapse { margin-left: -0.5rem; }
  .shell.collapsible .sidebar-head { padding-left: 1.25rem; }
  :root.sidebar-collapsed .shell.collapsible > .sidebar { width: 4.5rem; }
  :root.sidebar-collapsed .shell.collapsible > .sidebar .sidebar-head { padding: 0; justify-content: center; }
  :root.sidebar-collapsed .shell.collapsible > .sidebar :is(.brand, .nav-group-label, .nav-item > span, .nav-item > .badge, .tenant-name,
    .tenant-trigger > .icon-sm, .gs-trigger > span, .notifications-label, .notifications-count, .user-name, .user-trigger > .icon-sm) { display: none; }
  :root.sidebar-collapsed .shell.collapsible > .sidebar nav { padding: 1rem 0.75rem; gap: 1rem; }
  :root.sidebar-collapsed .shell.collapsible > .sidebar :is(.nav-item, .gs-trigger, .tenant-trigger, .notifications-btn, .user-trigger) { justify-content: center; }
  :root.sidebar-collapsed .shell.collapsible > .sidebar .gs-trigger { min-width: 0; width: 2.5rem; padding: 0; }
  :root.sidebar-collapsed .shell.collapsible > .sidebar :is(.sidebar-search, .tenant-menu) { padding: 0; margin: 0.5rem auto 0; width: max-content; }
  :root.sidebar-collapsed .shell.collapsible > .sidebar .sidebar-footer { padding: 0.75rem; align-items: center; }
}
/* Top navigation (`top_navigation` = topbar): Filament's fi-topbar-nav-groups, groups as dropdowns. */
.topbar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin: 0.5rem 1rem; padding: 0; list-style: none; }
.topbar-nav > li { display: flex; }
.topbar-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem;
  font-weight: 500; color: var(--nav-text); transition: background-color 75ms; }
.topbar-item:hover, .topbar-group[open] > .topbar-item { background: var(--hover); text-decoration: none; }
.topbar-item .icon, .topbar-group-chevron { color: var(--text-3); }
.topbar-item.active { background: var(--hover); color: var(--accent); }
.topbar-item.active .icon { color: var(--accent); }
.topbar-group .dropdown-menu .grow { flex: 1; min-width: 0; }
.topbar-group .dropdown-menu a.active, .topbar-group .dropdown-menu a.active .icon { color: var(--accent); }
.topbar-tenant .tenant-menu { margin: 0; }
.topbar-tenant .tenant-trigger { max-width: 16rem; }
.topbar-tenant .tenant-list { width: 16rem; }
@media (min-width: 1024px) { .shell.top-navigation > .sidebar, .shell.top-navigation > .sidebar-backdrop { display: none; } }
@media (max-width: 1023px) { .topbar-nav, .topbar-tenant { display: none; } }
.mobile-bar { display: none; }
.content { width: 100%; max-width: 96rem; margin: 0 auto; padding: 2rem 2rem 4rem; display: flex; flex-direction: column; gap: 1.5rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -0.025em; }
.page-head .sub { color: var(--text-2); margin-top: 0.5rem; font-size: 1.125rem; }
.page-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.topbar .menu-toggle { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 1023px) {
  .sidebar { position: fixed; z-index: 40; left: 0; transform: translateX(-100%); transition: transform 0.2s; box-shadow: var(--shadow-lg);
    background: var(--surface); }
  .shell.nav-open .sidebar { transform: none; }
  .shell.nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 39; background: rgb(9 9 11 / 0.5); }
  .sidebar-head .sidebar-close { display: inline-flex; }
  .topbar .menu-toggle { display: inline-flex; }
  .mobile-bar { display: flex; align-items: center; height: 4rem; padding: 0 1rem; position: sticky; top: 0; z-index: 20; background: var(--bg); }
  .content { padding: 1.5rem 1rem 3rem; }
}

/* ---------- auth / simple layout ---------- */
.simple { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; }
.simple-card { width: 100%; max-width: 28rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 3rem 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.simple-card .logo { display: flex; justify-content: center; }
.simple-card .logo img { height: 3rem; }
.simple-card h1 { text-align: center; font-size: 1.5rem; font-weight: 700; }
.simple-card .sub { text-align: center; color: var(--text-2); }

/* ---------- cards / sections ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-head { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; }
.card-head h2, .card-head h3 { font-size: 1rem; font-weight: 600; }
.card-head .desc { color: var(--text-2); font-size: 0.875rem; margin-top: 0.125rem; }
.card-body { padding: 1.5rem; }
.card-foot { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; gap: 0.75rem; justify-content: flex-end; }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-full { grid-column: 1 / -1; }
@media (max-width: 767px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } .span-2, .span-3 { grid-column: auto; } }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.muted { color: var(--text-2); }
.small { font-size: 0.8125rem; }
.stat { padding: 1.5rem; }
.stat .label { color: var(--text-2); font-size: 0.875rem; font-weight: 500; }
.stat .value { font-size: 1.875rem; font-weight: 600; margin-top: 0.5rem; letter-spacing: -0.02em; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm); font: inherit; font-weight: 600; font-size: 0.875rem; line-height: 1.25rem;
  border: 1px solid transparent; cursor: pointer; background: var(--primary-600); color: #fff; white-space: nowrap;
  transition: background 0.15s; text-decoration: none !important; }
.btn:hover { background: var(--primary-500); }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn:disabled, .btn.htmx-request { opacity: 0.6; cursor: progress; }
.btn-gray { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow); }
.btn-gray:hover { background: var(--hover); }
.btn-danger { background: var(--danger-600); } .btn-danger:hover { background: var(--danger-500); }
.btn-success { background: var(--success-600); } .btn-success:hover { background: var(--success-500); }
.btn-warning { background: var(--warning-600); } .btn-warning:hover { background: var(--warning-500); }
.btn-sm { padding: 0.25rem 0.625rem; font-size: 0.8125rem; }
.btn-block { width: 100%; }
.btn-link { background: none; border: none; color: var(--primary-600); padding: 0; font-weight: 600; box-shadow: none; }
.btn-link:hover { background: none; text-decoration: underline !important; }
.btn-link.danger { color: var(--danger-600); display: inline-flex; align-items: center; gap: 0.25rem; }
.btn-link.danger { color: var(--danger-600); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm);
  background: none; border: none; color: var(--text-3); cursor: pointer; }
.icon-btn:hover { background: var(--hover); color: var(--text-2); }
.icon-btn.danger:hover { color: var(--danger-600); }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem;
  font-weight: 500; line-height: 1.25rem; background: rgb(113 113 122 / 0.1); color: var(--gray-600); border: 1px solid rgb(113 113 122 / 0.2); white-space: nowrap; }
.badge-primary { background: rgb(59 130 246 / 0.1); color: var(--primary-600); border-color: rgb(59 130 246 / 0.25); }
.badge-success { background: rgb(34 197 94 / 0.1); color: var(--success-600); border-color: rgb(34 197 94 / 0.25); }
.badge-danger { background: rgb(239 68 68 / 0.1); color: var(--danger-600); border-color: rgb(239 68 68 / 0.25); }
.badge-warning { background: rgb(245 158 11 / 0.1); color: var(--warning-600); border-color: rgb(245 158 11 / 0.25); }
.badge-info { background: rgb(14 165 233 / 0.1); color: var(--info-600); border-color: rgb(14 165 233 / 0.25); }
:root[data-theme="dark"] .badge { color: var(--gray-300); }
.text-success { color: var(--success-600); } .text-danger { color: var(--danger-600); } .text-warning { color: var(--warning-600); }
.text-info { color: var(--info-600); } .text-primary { color: var(--primary-600); } .text-gray { color: var(--text-3); }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field > label, .field-label { font-size: 0.875rem; font-weight: 500; display: flex; gap: 0.25rem; align-items: center; }
.field .req { color: var(--danger-600); }
.field .hint { color: var(--text-2); font-size: 0.8125rem; }
.field .error { color: var(--danger-600); font-size: 0.875rem; }
.input, .select, .textarea { width: 100%; font: inherit; color: var(--text); background: var(--input-bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; box-shadow: var(--shadow); transition: border-color 0.15s, box-shadow 0.15s; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.7; background: var(--surface-2); cursor: not-allowed; }
.kv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 2rem; gap: 0.5rem; align-items: center; }
.kv-table { border-radius: var(--radius-sm); background: var(--input-bg); box-shadow: inset 0 0 0 1px var(--border-strong); overflow: hidden; }
.kv-table .kv-grid { gap: 0; }
.kv-table .kv-head { border-bottom: 1px solid var(--border-strong); font-size: 0.875rem; font-weight: 500; color: var(--text); }
.kv-table .kv-head > span { padding: 0.5rem 0.75rem; }
.kv-table .kv-head > span + span, .kv-table [data-kv-row] > * + * { border-left: 1px solid var(--border-strong); }
.kv-table [data-kv-row] + [data-kv-row] { border-top: 1px solid var(--border-strong); }
.kv-table [data-kv-row] .input { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.kv-table [data-kv-row] > .icon-btn { width: 100%; height: 100%; border-radius: 0; }
.kv-table.reorderable .kv-grid { grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, 1.5fr) 2rem; }
.kv-table .kv-handle { width: 100%; height: 100%; border-radius: 0; cursor: grab; color: var(--text-3); }
.kv-table [data-kv-row].dragging { opacity: 0.5; }
.kv-table .kv-foot { display: flex; justify-content: center; padding: 0.5rem; border-top: 1px solid var(--border-strong); font-size: 0.875rem; }
.tags-input { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0.3rem 0.5rem; background: var(--input-bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.tags-input:focus-within { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
.tags-input.disabled { opacity: 0.7; background: var(--surface-2); }
.tags-input .chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem;
  font-weight: 500; background: rgb(59 130 246 / 0.1); color: var(--primary-600); border: 1px solid rgb(59 130 246 / 0.25); word-break: break-all; }
.tags-input .chip button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font-size: 0.9rem; line-height: 1; }
.tags-input .tags-entry { flex: 1; min-width: 8rem; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; padding: 0.2rem 0; }
.has-error .input, .has-error .select, .has-error .textarea { border-color: var(--danger-600); }
.textarea { min-height: 6rem; resize: vertical; }
.textarea.code { font-family: var(--mono); font-size: 0.8125rem; min-height: 12rem; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: 0; flex: 1; min-width: 0; }
.input-group .input:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .input:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group .addon { display: flex; align-items: center; padding: 0 0.75rem; background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--text-2); font-size: 0.875rem; white-space: nowrap; }
.input-group .addon:first-child { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .addon:last-child { border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
/* prefixIcon()/suffixIcon()/suffix actions: inside the field's frame, on the input's background. */
.input-group .addon-icon, .input-group .addon-actions { background: var(--input-bg); color: var(--text-3); }
.input-group .addon-icon { padding: 0 0.625rem; }
.input-group .addon-actions { gap: 0.25rem; padding: 0 0.25rem; }
.input-group .addon-actions .icon-btn { width: 2rem; height: 2rem; color: var(--text-3); }
.input-group .addon-actions .icon-btn:hover { color: var(--text-2); }
.input-group .select { border-radius: 0; flex: 1; min-width: 0; }
.input-group .select:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
/* A read-only ToggleButtons state (the server condition): a solid button in its colour. */
.state-btn { display: inline-flex; align-items: center; gap: 0.375rem; align-self: flex-start; padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 600; color: #fff; background: var(--gray-600); }
.state-btn.danger { background: var(--danger-600); } .state-btn.warning { background: var(--warning-600); }
.state-btn.success { background: var(--success-600); } .state-btn.info { background: var(--info-600); } .state-btn.primary { background: var(--primary-600); }
.check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
.check input[type=checkbox], .check input[type=radio] { width: 1rem; height: 1rem; accent-color: var(--primary-600); margin: 0; }
.toggle { position: relative; display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; font-size: 0.875rem; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track { width: 2.75rem; height: 1.5rem; border-radius: 999px; background: var(--muted-bg); position: relative; transition: background 0.2s; flex-shrink: 0; }
.toggle .track::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow); transition: transform 0.2s; }
.toggle input:checked + .track { background: var(--primary-600); }
.toggle input:checked + .track::after { transform: translateX(1.25rem); }
.toggle input:focus-visible + .track { outline: 2px solid var(--ring); outline-offset: 2px; }
.radio-group { display: flex; flex-direction: column; gap: 0.5rem; }
.radio-group.inline { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; }
/* Filament ToggleButtons: each option a gray button, the checked one filled with its colour. */
.radio-group .check { position: relative; align-self: flex-start; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-weight: 600; line-height: 1.25rem;
  background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong), 0 1px 2px rgb(0 0 0 / 0.05); transition: background-color 75ms;
  --tb: var(--primary-600); --tb-text: #fff; }
.radio-group .check > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.radio-group .check .icon-sm { color: var(--text-3); }
.radio-group .check:hover { background: var(--hover); }
.radio-group .check input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.radio-group .check:has(input:checked) { background: var(--tb); color: var(--tb-text); box-shadow: var(--shadow); }
.radio-group .check:has(input:checked) .icon-sm { color: inherit; }
.radio-group .check:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.radio-group .check:has(input:disabled) { opacity: 0.7; cursor: default; }
.check.tb-success { --tb: var(--success-600); } .check.tb-danger { --tb: var(--danger-600); } .check.tb-info { --tb: var(--info-600); }
.check.tb-warning { --tb: var(--warning-500); --tb-text: var(--gray-950); } .check.tb-gray { --tb: var(--gray-600); }
.fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.fieldset > legend { font-weight: 600; padding: 0 0.5rem; }
.form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- tables ---------- */
.table-card { overflow: visible; }
.table-card > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.table-card > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.table-card .table-wrap { overflow-x: auto; }
.table-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.table-toolbar .spacer { flex: 1; }
.table-toolbar .search { max-width: 18rem; }
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 0.875rem; font-weight: 600; padding: 0.75rem 1rem; background: var(--surface-2); white-space: nowrap; }
.table th a { color: inherit; display: inline-flex; align-items: center; gap: 0.25rem; }
.table td { padding: 0.75rem 1rem; border-top: 1px solid var(--border); font-size: 0.875rem; vertical-align: middle; }
.table tr.clickable { cursor: pointer; }
.table tbody tr:hover { background: var(--hover); }
.table td.actions { text-align: right; white-space: nowrap; width: 1%; }
.table td.actions > * { margin-left: 0.25rem; }
.table .wide-only { }
@media (max-width: 767px) { .table .wide-only { display: none; } }
.table .desc { color: var(--text-2); font-size: 0.8125rem; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); flex-wrap: wrap; font-size: 0.875rem; }
.pagination { display: flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.pagination a, .pagination span { padding: 0.375rem 0.75rem; color: var(--text); border-right: 1px solid var(--border-strong); min-width: 2.25rem; text-align: center; }
.pagination > :last-child { border-right: 0; }
.pagination a:hover { background: var(--hover); text-decoration: none; }
.pagination .current { color: var(--primary-600); font-weight: 600; background: var(--hover); }
.pagination .disabled { color: var(--text-3); }
.empty { padding: 3rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.empty .icon-wrap { width: 3rem; height: 3rem; border-radius: 50%; background: var(--muted-bg); display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.empty h3 { font-size: 1rem; font-weight: 600; }

/* ---------- tabs ---------- */
.tabs { display: inline-flex; gap: 0.25rem; padding: 0.375rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 100%; overflow-x: auto; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); color: var(--text-2);
  font-weight: 500; font-size: 0.875rem; background: none; border: none; cursor: pointer; white-space: nowrap; font-family: inherit; }
.tabs a:hover, .tabs button:hover { background: var(--hover); text-decoration: none; color: var(--text); }
.tabs .active { background: var(--hover); color: var(--primary-600); }
/* Filament's contained tabs (`Tabs::make()`): the tab bar and the active tab's content in one card,
   the tab panels without frames of their own. */
.tabs-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.tabs-card > .tabs { display: flex; width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: none; padding: 0.625rem 0.75rem; background: none; }
.tabs-card .tabs .active { color: var(--nav-accent); }
.tabs-card [data-tab-panel] { padding: 1.5rem; }
.tabs-card [data-tab-panel].card { border: 0; border-radius: 0; box-shadow: none; background: none; }
.tabs-card [data-tab-panel].card:not(.card-body) { padding: 0; }
/* Filament's contained Wizard: steps in a header (icon circles; the active one primary, done ones filled
   with a check), one step's fields, ← / → and the submit icon button at the bottom. */
.wizard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.wizard-header { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none;
  border-bottom: 1px solid var(--border); overflow-x: auto; }
.wizard-step { position: relative; display: flex; }
.wizard-step-btn { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem 1.5rem; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: default; }
.wizard-step.completed .wizard-step-btn { cursor: pointer; }
.wizard-step-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 999px;
  border: 2px solid var(--border-strong); color: var(--text-2); }
.wizard-step-icon .wizard-done { display: none; }
.wizard-step-label { font-size: 0.875rem; font-weight: 500; color: var(--text-2); }
.wizard-step.active .wizard-step-icon { border-color: var(--primary-600); color: var(--primary-600); }
.wizard-step.active .wizard-step-label { color: var(--nav-accent); }
.wizard-step.completed .wizard-step-icon { border-color: var(--primary-600); background: var(--primary-600); color: #fff; }
.wizard-step.completed .wizard-step-icon > .icon:not(.wizard-done) { display: none; }
.wizard-step.completed .wizard-step-icon .wizard-done { display: block; }
.wizard-step.completed .wizard-step-label { color: var(--text); }
.wizard-sep { position: absolute; top: 0; right: 0; width: 1.25rem; height: 100%; color: var(--border); }
.wizard [data-wizard-panel] { padding: 1.5rem; }
.wizard [data-wizard-panel].card { border: 0; border-radius: 0; box-shadow: none; background: none; }
.wizard-footer { display: flex; align-items: center; gap: 0.75rem; padding: 0 1.5rem 1.5rem; }
.wizard-footer .icon-btn { width: 2.5rem; height: 2.5rem; color: var(--primary-600); }
.wizard-footer .spacer { flex: 1; }
@media (max-width: 767px) { .wizard-header { grid-auto-flow: row; } .wizard-step:not(.active) { display: none; } .wizard-sep { display: none; } }

/* ---------- dropdowns (details/summary) ---------- */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 14rem; z-index: 30; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0.25rem; display: flex; flex-direction: column; }
.dropdown-menu.left { right: auto; left: 0; }
.dropdown-menu .head { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); margin-bottom: 0.25rem; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
  color: var(--text); font: inherit; font-size: 0.875rem; background: none; border: none; cursor: pointer; text-align: left; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--hover); text-decoration: none; }
.dropdown-menu .icon { color: var(--text-3); }
.dropdown-menu .danger, .dropdown-menu .danger .icon { color: var(--danger-600); }
.dropdown-menu hr { border: 0; border-top: 1px solid var(--border); margin: 0.25rem 0; }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--gray-800); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; }

/* ---------- admin global search (the sidebar/topbar field and charrafimed/global-search-modal) ---------- */
.sidebar-search { padding: 0 1rem; margin-top: 0.5rem; }
.gs-trigger { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-width: 12rem; height: 2.25rem; padding: 0 0.75rem; border-radius: 0.5rem;
  border: 0; background: var(--input-bg); box-shadow: 0 0 0 1px var(--border-strong); color: var(--text-3); font: inherit; font-size: 0.875rem; cursor: text; text-align: left; }
.topbar .gs-trigger { width: auto; }
.gs-trigger:hover { box-shadow: 0 0 0 1px var(--text-3); }
dialog.modal.gs-modal { width: min(42rem, calc(100vw - 2rem)); margin-top: min(17vh, 9.5rem); padding: 1rem; display: none; flex-direction: column; gap: 0.25rem;
  max-height: 75vh; }
dialog.modal.gs-modal[open] { display: flex; }
.gs-input-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border); }
.gs-input-row .icon { color: var(--text-3); }
.gs-input-row input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 0.875rem; padding: 0.5rem 0; }
.gs-results { overflow-y: auto; min-height: 0; }
.gs-empty { padding: 1rem; text-align: center; color: var(--nav-text); }
.gs-none { margin: 0.25rem 0; padding: 4rem 1rem; text-align: center; border-radius: 0.5rem; background: var(--surface-2); color: var(--text-2); font-size: 0.875rem; }
.gs-groups, .gs-groups ul { list-style: none; margin: 0; padding: 0; }
.gs-group { padding: 0.5rem 1rem; font-size: 0.9em; font-weight: 600; text-transform: capitalize; color: var(--text); }
.gs-item { display: flex; align-items: center; justify-content: space-between; margin: 0.25rem 0; border-radius: 0.5rem; background: rgb(24 24 27 / 0.05);
  transition: background-color 0.3s; }
.gs-item:hover, .gs-item:focus-within { background: rgb(24 24 27 / 0.08); }
:root[data-theme="dark"] .gs-item { background: rgb(255 255 255 / 0.03); }
:root[data-theme="dark"] .gs-item:hover, :root[data-theme="dark"] .gs-item:focus-within { background: rgb(255 255 255 / 0.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gs-item { background: rgb(255 255 255 / 0.03); }
  :root:not([data-theme="light"]) .gs-item:hover, :root:not([data-theme="light"]) .gs-item:focus-within { background: rgb(255 255 255 / 0.08); }
}
.gs-item a { display: block; flex: 1; padding: 0.75rem; outline: none; color: var(--text); }
.gs-item a:hover { text-decoration: none; }
.gs-item h4 { font-size: 0.875rem; font-weight: 500; }
.gs-item .gs-remove { margin-right: 0.5rem; color: var(--text-3); }
.gs-footer { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0.25rem 0 0; padding: 0.25rem 0.5rem 0; color: var(--text-2); font-size: 0.875rem; }
.gs-footer li { display: flex; align-items: center; gap: 0.25rem; }
.gs-footer kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.25rem; border-radius: 0.25rem;
  box-shadow: 0 0 0 1px var(--border-strong); font-family: inherit; font-size: 0.75rem; color: var(--text-3); }

/* ---------- modals ---------- */
dialog.modal { border: none; padding: 0; background: var(--surface); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); }
dialog.modal.wide { width: min(56rem, calc(100vw - 2rem)); }
dialog.modal::backdrop { background: rgb(9 9 11 / 0.5); }
.modal-head { padding: 1.25rem 1.5rem 0; display: flex; align-items: flex-start; gap: 1rem; }
.modal-head h2 { font-size: 1.125rem; font-weight: 600; flex: 1; }
.modal-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.modal-foot { padding: 0 1.5rem 1.25rem; display: flex; gap: 0.75rem; justify-content: flex-end; }
.modal-icon { width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 1.5rem auto 0; }
.modal-icon.danger { background: var(--danger-50); color: var(--danger-600); }
:root[data-theme="dark"] .modal-icon.danger { background: rgb(239 68 68 / 0.15); }
.modal.confirm .modal-head { justify-content: center; text-align: center; }
.modal.confirm .modal-body { text-align: center; color: var(--text-2); }
.modal.confirm .modal-foot { justify-content: stretch; }
.modal.confirm .modal-foot > * { flex: 1; }

/* ---------- notifications ---------- */
.toasts { position: fixed; top: 1rem; right: 1rem; z-index: 60; display: flex; flex-direction: column; gap: 0.75rem; width: min(24rem, calc(100vw - 2rem)); }
.toast { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1rem;
  display: flex; gap: 0.75rem; align-items: flex-start; animation: toast-in 0.2s ease-out; }
.toast .t-title { font-weight: 600; font-size: 0.875rem; }
.toast .t-body { color: var(--text-2); font-size: 0.875rem; margin-top: 0.25rem; white-space: pre-line; }
.toast .t-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast.success .t-icon { color: var(--success-500); } .toast.danger .t-icon { color: var(--danger-500); }
.toast.warning .t-icon { color: var(--warning-500); } .toast.info .t-icon { color: var(--info-500); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-0.5rem); } }
.banner { border-radius: var(--radius); padding: 0.875rem 1rem; display: flex; gap: 0.75rem; align-items: flex-start; border: 1px solid; font-size: 0.875rem; }
.banner.warning { background: rgb(245 158 11 / 0.1); border-color: rgb(245 158 11 / 0.3); }
.banner.danger { background: rgb(239 68 68 / 0.1); border-color: rgb(239 68 68 / 0.3); }
.banner.info { background: rgb(14 165 233 / 0.1); border-color: rgb(14 165 233 / 0.3); }
.banner.success { background: rgb(34 197 94 / 0.1); border-color: rgb(34 197 94 / 0.3); }
.banner .banner-close { margin-left: auto; width: 1.75rem; height: 1.75rem; }

/* ---------- progress / misc ---------- */
.progress { height: 0.5rem; border-radius: 999px; background: var(--muted-bg); overflow: hidden; min-width: 6rem; }
.progress > span { display: block; height: 100%; background: var(--success-500); border-radius: 999px; }
.progress.warning > span { background: var(--warning-500); } .progress.danger > span { background: var(--danger-500); }
.progress-label { font-size: 0.75rem; color: var(--text-2); margin-top: 0.25rem; white-space: nowrap; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; font-size: 0.875rem; }
.kv dt { color: var(--text-2); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.copyable { cursor: copy; }
.code-block { background: var(--gray-950); color: var(--gray-100); border-radius: var(--radius-sm); padding: 1rem; overflow-x: auto; font-family: var(--mono); font-size: 0.8125rem; white-space: pre; }
.spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
.server-icon { width: 2.875rem; height: 2.875rem; max-width: none; flex-shrink: 0; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); }
.divider { border: 0; border-top: 1px solid var(--border); margin: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.w-full { width: 100%; }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; }
.qr { background: #fff; padding: 0.75rem; border-radius: var(--radius-sm); display: inline-block; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; font-family: var(--mono); font-size: 0.875rem; }

/* ---------- server list cards (livewire/server-entry.blade.php) ---------- */
.server-card { position: relative; padding: 0.875rem 1rem 1rem 1.25rem; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: 0.75rem; }
.server-card:hover { border-color: var(--border-strong); }
.server-card > * { position: relative; }
.server-card-bar { position: absolute !important; left: 0; top: 0; bottom: 0; width: 0.25rem; }
.server-card-bg { position: absolute !important; inset: 0; background: right / contain no-repeat; opacity: 0.2; max-width: 680px; max-height: 140px; pointer-events: none; }
.server-card-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: center; }
@media (max-width: 639px) { .server-card-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .server-card-stats .wide-only { display: none; } }
.bg-success { background: var(--success-600); } .bg-danger { background: var(--danger-600); } .bg-warning { background: var(--warning-500); }
.bg-info { background: var(--info-500); } .bg-primary { background: var(--primary-600); } .bg-gray { background: var(--gray-400); }
.server-card-stats > div { min-width: 0; overflow-wrap: anywhere; }

/* ---------- server console ---------- */
/* Joined buttons (Filament's button group: the console's power actions). */
.btn-group { display: inline-flex; flex-wrap: nowrap; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.btn-group > .btn { border-radius: 0; box-shadow: none; }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.btn-group > .btn:last-child, .btn-group > .btn:has(+ .btn[hidden]:last-child) { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.btn-group > .btn:disabled { opacity: 0.7; }
.stat-blocks { gap: 1rem; }
.stat-sm { padding: 0.875rem 1rem; }
.stat-sm .label { font-size: 0.8125rem; color: var(--text-2); }
.stat-sm .value { font-size: 1.125rem; font-weight: 600; overflow-wrap: anywhere; }
.console-card { overflow: hidden; background: rgb(19 26 32); border-color: rgb(255 255 255 / 0.08); }
#terminal { padding: 0.5rem 0.75rem; min-height: 10rem; }
.console-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-top: 1px solid rgb(255 255 255 / 0.1); color: var(--gray-400); }
.console-input input { flex: 1; background: transparent; border: 0; color: #e4e4e7; font: 0.875rem var(--mono); padding: 0.5rem 0; outline: none; }
.console-input input[readonly] { cursor: not-allowed; opacity: 0.6; }
canvas.chart { width: 100%; height: 120px; display: block; }

/* ---------- file manager ---------- */
.crumbs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.25rem; }
#fm.drop { outline: 2px dashed var(--primary-500); outline-offset: 4px; }
.fm-uploads { position: fixed; right: 1rem; bottom: 1rem; width: min(24rem, calc(100vw - 2rem)); z-index: 50; box-shadow: var(--shadow-lg); max-height: 50vh; overflow: auto; }
.fm-table td:first-child, .fm-table th:first-child { width: 2rem; }
.CodeMirror { font-family: var(--mono); font-size: 0.8125rem; height: 65vh; }
.table tr.group-row td { background: var(--surface-2); padding-top: 0.5rem; padding-bottom: 0.5rem; }
.table tr.group-row:hover { background: var(--surface-2); }

/* ---------- admin dashboard / health ---------- */
.dash-section > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.dash-section > summary::-webkit-details-marker { display: none; }
.dash-section > summary h2 { gap: 0.5rem; }
.health-icon { display: inline-flex; padding: 0.5rem; border-radius: 9999px; flex-shrink: 0; }
.health-icon .icon { width: 1.5rem; height: 1.5rem; }
.bg-success { background: rgb(34 197 94 / 0.15); } .bg-warning { background: rgb(245 158 11 / 0.15); }
.bg-info { background: rgb(59 130 246 / 0.15); } .bg-danger { background: rgb(239 68 68 / 0.15); } .bg-gray { background: var(--muted-bg); }
.log-extra { margin-top: 0.375rem; }
.log-extra pre { max-height: 24rem; overflow: auto; white-space: pre-wrap; word-break: break-all; font-size: 0.75rem; }
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bulk-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.bulk-bar[hidden] { display: none; }
.bulk-bar .spacer { flex: 1; }
.table .bulk-cell { width: 2.5rem; padding-right: 0; }
/* ---------- installer wizard ---------- */
.wizard-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; counter-reset: step; }
.wizard-steps li { counter-increment: step; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px;
  font-size: 0.8125rem; color: var(--text-3); border: 1px solid var(--border); }
.wizard-steps li::before { content: counter(step); font-weight: 600; }
.wizard-steps li.done { color: var(--success-600); border-color: rgb(34 197 94 / 0.35); }
.wizard-steps li.current { color: var(--primary-600); border-color: var(--primary-600); font-weight: 600; }

/* Footer content of PHP plugins' render hooks (ADR-0020). */
.app-footer { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; margin-top: 1.5rem; text-align: center; color: var(--text-2); font-size: 0.875rem; }
.app-footer-name { font-weight: 600; color: inherit; }
.simple { flex-direction: column; }
/* Filament's simple layout: the card centred in the space above the footer at the bottom. */
.simple > .simple-card { margin-block: auto; }
.simple > .app-footer { margin-top: 1.5rem; }
.simple-card .logo .brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; }
/* Error pages: the panel's (Filament simple layout) and Laravel's minimal one. */
.error-card { gap: 0.5rem; }
.error-card h1 { display: flex; align-items: center; justify-content: center; gap: 0.25rem; font-size: 1.5rem; letter-spacing: -0.025em; }
.error-card .sub { font-size: 0.875rem; }
.error-minimal { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--text-2);
  font-size: 1.125rem; letter-spacing: 0.05em; }
.error-minimal .code { padding: 0 1rem; border-right: 1px solid var(--text-3); }
.error-minimal .message { margin-left: 1rem; text-transform: uppercase; }

/* Database notifications: topbar bell and slide-over (Filament `DatabaseNotifications`). */
.notifications-btn { position: relative; }
.notifications-count { position: absolute; top: -0.125rem; right: -0.25rem; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem;
  border-radius: 9999px; background: var(--primary-600); color: #fff; font-size: 0.6875rem; font-weight: 600; line-height: 1.125rem; text-align: center; }
dialog.modal.slide-over { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(28rem, 100vw); border-radius: 0; }
.notifications-panel { display: flex; flex-direction: column; min-height: 100%; }
.notifications-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem 0.5rem; }
.notifications-head h2 { font-size: 1.125rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.notifications-tools { display: flex; gap: 1rem; padding: 0 1.5rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.notifications-list { display: flex; flex-direction: column; }
.notification { display: flex; gap: 0.75rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); }
.notification.unread { background: var(--hover); }
.notification-icon { flex: none; padding-top: 0.125rem; }
.notification-icon.text-info { color: var(--info-600); } .notification-icon.text-primary { color: var(--primary-600); } .notification-icon.text-gray { color: var(--text-3); }
.notification-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; }
.notification-title { font-weight: 600; }
.notification-date { color: var(--text-3); font-size: 0.75rem; }
.notification-body { color: var(--text-2); overflow-wrap: anywhere; }
.notification-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.notification-close { flex: none; width: 1.75rem; height: 1.75rem; }
.notifications-pages { display: flex; justify-content: space-between; padding: 1rem 1.5rem; }
.notifications-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 3rem 1.5rem; text-align: center; }
.notifications-empty-icon { width: 3rem; height: 3rem; border-radius: 50%; background: var(--muted-bg); color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.notifications-empty h2 { font-size: 1.125rem; font-weight: 600; }

/* Page loads: a bar along the top from the click until the next page shows. */
html.nav-loading::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 10000; background: var(--primary-600);
  transform-origin: left; animation: nav-progress 6s cubic-bezier(0.1, 0.7, 0.2, 1) forwards; }
@keyframes nav-progress { from { transform: scaleX(0.05); } to { transform: scaleX(0.95); } }

/* A PHP plugin's Filament page inside our layout: our content area already pads and centers it. */
.sidecar-page > .fi-main { padding: 0; margin: 0; max-width: none; width: 100%; }

/* Filament list tabs (centered) and the filters dropdown of tables. */
.tabs-row { display: flex; justify-content: center; }
.table-filters { position: relative; }
.filter-btn { position: relative; }
.filter-count { position: absolute; top: -0.125rem; right: -0.125rem; min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: 9999px;
  background: rgb(59 130 246 / 0.1); color: var(--primary-600); font-size: 0.625rem; font-weight: 600; line-height: 1rem; text-align: center; }
.filters-menu { width: 20rem; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.filters-head { display: flex; align-items: center; justify-content: space-between; }
.filters-menu .field { display: flex; flex-direction: column; gap: 0.5rem; }
.filters-menu .field .label { font-size: 0.875rem; font-weight: 500; }
.filters-menu .select { width: 100%; }
.server-grid { padding: 1rem; }
.dropdown-menu .filters-head .btn-link { width: auto; padding: 0; }
/* Alert banners as Filament callouts: a lighter title, muted body, the icon in the status colour. */
.banner strong { font-weight: 500; }
.banner strong + div { color: var(--text-2); margin-top: 0.125rem; }
.banner.warning > .icon { color: var(--warning-500); }
.banner.danger > .icon { color: var(--danger-500); }
.banner.success > .icon { color: var(--success-500); }
.banner.info > .icon { color: var(--info-500); }

/* Filament page forms: labels with hint actions/icons, grid repeaters. */
.col-span-full { grid-column: 1 / -1; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.label-row label { margin: 0; }
.field .label-row { margin-bottom: 0.25rem; }
.hint-action { background: none; border: 0; padding: 0; color: var(--primary-600); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.hint-action:hover { text-decoration: underline; }
.hint-icon { color: var(--text-3); display: inline-flex; }
.repeater-item { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.repeater-item .field { margin: 0; }
.textarea.autosize { field-sizing: content; min-height: 4.5rem; resize: none; }
.repeater-item .hint { color: var(--text-2); font-size: 0.875rem; margin: 0; }
.label-row .req { color: var(--danger-600); margin-left: 0.125rem; }

/* Filament fieldsets: a rounded frame with the legend on its top edge. */
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin: 0; min-width: 0;
  display: flex; flex-direction: column; gap: 1.5rem; }
fieldset > legend { padding: 0 0.5rem; margin-left: -0.5rem; font-size: 0.875rem; font-weight: 500; }
/* Filament's disabled() fields shown read-only: gray, muted. */
.input.is-disabled { background: var(--surface-2); color: var(--text-2); }
.info-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 1fr); }
.server-icon-cell { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding-top: 1.75rem; }
.text-primary { color: var(--primary-600); }
@media (max-width: 767px) { .info-grid { grid-template-columns: minmax(0, 1fr); } }
/* Infolist entries (Filament TextEntry): the label above the value. */
.entries { display: grid; gap: 1.5rem; }
.entries-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.entries > div { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; min-width: 0; overflow-wrap: anywhere; }
.entries .entry-label { font-weight: 500; color: var(--text); }
@media (max-width: 767px) { .entries-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Bare icon actions (`button_style`): Filament's XL icon buttons. */
.icon-btn.action-icon { width: 2.25rem; height: 2.25rem; color: var(--primary-600); }
.icon-btn.action-icon:hover { color: var(--primary-500); }
.icon-btn.action-icon.danger { color: var(--danger-600); }
td.actions .icon-btn.action-icon { width: 2rem; height: 2rem; }
.icon-btn.action-icon.text-success { color: var(--success-600); }
/* `button_style` (the default): page header actions are bare XL icons, the label left to the tooltip. */
.icon-actions .page-actions .btn:has(svg) { font-size: 0; gap: 0; padding: 0.375rem; background: none; border-color: transparent;
  box-shadow: none; color: var(--primary-600); }
.icon-actions .page-actions .btn:has(svg):hover { background: var(--hover); }
.icon-actions .page-actions .btn:has(svg) .icon-sm, .icon-actions .page-actions .btn:has(svg) .icon { width: 1.5rem; height: 1.5rem; }
.icon-actions .page-actions .btn-danger:has(svg) { color: var(--danger-600); }
.icon-actions .page-actions .btn-gray:has(svg) { color: var(--text-3); }
.icon-actions .page-actions .btn-success:has(svg) { color: var(--success-600); }
.icon-actions .page-actions .btn:has(svg):disabled { opacity: 0.5; }