/* SW Interact admin look — matches the mockup: ink sidebar, IBM Plex, quiet cards, orange only for "live". */
:root {
  --swi-ink: #101820; --swi-side: #0f1b26; --swi-side-2: #1b2a38; --swi-side-text: #c9d2db; --swi-tally: #e8590c;
  --swi-ground: #f3f4f6; --swi-line: #dde1e6; --swi-muted: #5b6672;
}
body.fi-body { font-family: "IBM Plex Sans", system-ui, sans-serif; }
html:not(.dark) body.fi-body { background: var(--swi-ground); }

/* Sidebar */
.fi-main-sidebar.fi-sidebar { background: var(--swi-side) !important; border-inline-end: 0 !important; }
.fi-sidebar .fi-sidebar-header { background: var(--swi-side) !important; box-shadow: none !important; border-bottom: 1px solid #1f2d3a !important; }
.fi-sidebar .fi-sidebar-nav { padding-top: 12px; }
.fi-sidebar .fi-sidebar-item-btn { border-radius: 8px; color: var(--swi-side-text); }
.fi-sidebar .fi-sidebar-item-btn .fi-sidebar-item-label, .fi-sidebar .fi-sidebar-item-btn .fi-icon { color: var(--swi-side-text) !important; }
.fi-sidebar .fi-sidebar-item-btn:hover { background: var(--swi-side-2) !important; }
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: #fff !important; }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--swi-side-2) !important; box-shadow: inset 3px 0 0 var(--swi-tally); }
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar .fi-sidebar-item.fi-active .fi-icon { color: #fff !important; }
.fi-sidebar .fi-tenant-menu-trigger { background: #15222f !important; border: 1px solid #2c3d4d; border-radius: 10px; color: #fff; }
.fi-sidebar .fi-tenant-menu-trigger * { color: #fff !important; }
.fi-sidebar .fi-tenant-menu-trigger .fi-tenant-menu-trigger-text span:first-child { color: #93a1ae !important; }
.fi-sidebar .fi-sidebar-group-label { color: #93a1ae !important; }
.fi-sidebar .fi-icon-btn { color: var(--swi-side-text) !important; }

/* Top bar */
.fi-topbar-ctn .fi-topbar { box-shadow: none !important; border-bottom: 1px solid var(--swi-line); }
html:not(.dark) .fi-topbar-ctn .fi-topbar { background: #fff; }

/* Headings */
.fi-header-heading { font-weight: 600 !important; letter-spacing: -0.01em; }

/* Cards: sections, tables, widgets */
html:not(.dark) .fi-section, html:not(.dark) .fi-ta-ctn, html:not(.dark) .fi-wi-stats-overview-stat {
  border-radius: 12px !important; box-shadow: none !important; outline: 1px solid var(--swi-line) !important; --tw-ring-shadow: 0 0 #0000 !important;
}
.fi-ta-header-cell { text-transform: uppercase; font-size: 12px !important; letter-spacing: .06em; color: var(--swi-muted) !important; }
.fi-ta-header-cell .fi-ta-header-cell-sort-btn span { color: var(--swi-muted) !important; }

/* Buttons: primary is ink, as in the mockup */
.fi-btn.fi-color-primary:not(.fi-outlined) { border-radius: 8px; }
.fi-badge { border-radius: 999px !important; font-weight: 600 !important; }

/* Brand */
.swi-brand { display: flex; align-items: center; gap: 10px; font: 600 15px "IBM Plex Sans", sans-serif; color: #fff; }
.swi-brand i { width: 30px; height: 30px; border-radius: 7px; background: var(--swi-tally); display: grid; place-items: center; font: 700 13px "IBM Plex Mono", ui-monospace, monospace; font-style: normal; color: #fff; }
.fi-topbar .swi-brand { color: var(--swi-ink); }
.dark .fi-topbar .swi-brand { color: #fff; }

/* Live-now widget */
.swi-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.swi-live a { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--swi-line); text-decoration: none; color: var(--swi-ink); }
.dark .swi-live a { background: #15212b; border-color: #2c3a46; color: #f2f5f7; }
.swi-live a:hover { border-color: var(--swi-ink); }
.swi-live .tag { display: inline-flex; align-items: center; gap: 8px; font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .06em; color: #c2410c; }
.swi-live .tag.next { color: #1d4ed8; }
.swi-live .tag i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.swi-live .t { font-weight: 600; font-size: 16px; line-height: 1.3; }
.swi-live .m { font-size: 13px; color: var(--swi-muted); }
.swi-live .n { display: flex; gap: 14px; font-size: 13px; }
.swi-live-empty { padding: 18px; border: 1px dashed var(--swi-line); border-radius: 12px; color: var(--swi-muted); font-size: 14px; }

/* Sidebar header carries the brand now that the top bar is off */
.fi-sidebar .fi-sidebar-header .swi-brand { color: #fff; }
.fi-sidebar .fi-sidebar-footer, .fi-sidebar .fi-user-menu-trigger { color: var(--swi-side-text) !important; }
.fi-sidebar .fi-user-menu-trigger * { color: var(--swi-side-text) !important; }
.fi-sidebar .fi-sidebar-footer { border-top: 1px solid #1f2d3a; }

/* Ink primary (buttons, toggles, focus) like the mockup */
:root { --primary-500: #101820; --primary-600: #101820; --primary-700: #000; }
.dark { --primary-400: #e6ebf0; --primary-500: #e6ebf0; }
.fi-btn.fi-color-primary:not(.fi-outlined) { background: #101820 !important; color: #fff !important; }
.fi-btn.fi-color-primary:not(.fi-outlined):hover { background: #000 !important; }
.fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon { color: #fff !important; }

/* Search in the dark sidebar */
.fi-sidebar .fi-global-search-field .fi-input-wrp, .fi-sidebar .fi-input-wrp { background: #15222f !important; border-color: #2c3d4d !important; --tw-ring-color: #2c3d4d !important; }
.fi-sidebar .fi-input-wrp input { color: #fff !important; }
.fi-sidebar .fi-input-wrp .fi-icon { color: #93a1ae !important; }