/* ================================================================
   WebOsHost Panel Theme — Light + Dark + System
   Industry-standard dual-theme with CSS custom properties.
   ================================================================ */

/* ---- Light Blue theme (default) ---- */
:root {
    --weboshost-bg: #c4d6e8;
    --weboshost-panel-bg: #ccddf0;
    --weboshost-card-bg: #d4e4f2;
    --weboshost-card-bg-2: #c4d6e8;
    --weboshost-card-border: #9ab8d4;
    --weboshost-divider: #9ab8d4;

    --weboshost-sidebar-bg: #cddcee;
    --weboshost-sidebar-bg-2: #c4d6e8;
    --weboshost-sidebar-border: #9ab8d4;

    --weboshost-topbar-bg: #b8cee4;
    --weboshost-topbar-border: #8eb0cc;

    --weboshost-accent: #2078a8;
    --weboshost-link: #0a5e94;

    --weboshost-text: #0e1e2e;
    --weboshost-text-muted: #2e4a64;
    --weboshost-text-dim: #5a7a96;

    --weboshost-input-bg: #dce8f4;
    --weboshost-input-border: #8eb0cc;

    --weboshost-success: #16a34a;
    --weboshost-warning: #d97706;
    --weboshost-danger: #dc2626;

    --weboshost-radius: 0.65rem;
    --weboshost-shadow: 0 1px 4px rgba(30, 80, 130, 0.08), 0 1px 2px rgba(30, 80, 130, 0.04);

    --weboshost-chart-grid: rgba(30, 80, 130, 0.08);
    --weboshost-chart-text: #3a5570;
    --weboshost-tooltip-bg: #1a2a3a;
    --weboshost-tooltip-text: #f8fafc;

    --weboshost-sidebar-group-text: #1e3a54;
    --weboshost-sidebar-group-text-open: #0a1e30;
    --weboshost-sidebar-group-border: rgba(47, 139, 190, 0.22);
    --weboshost-sidebar-group-border-left: rgba(47, 139, 190, 0.45);
    --weboshost-sidebar-group-border-open: rgba(47, 139, 190, 0.35);
    --weboshost-sidebar-group-border-left-open: rgba(47, 139, 190, 0.70);
    --weboshost-sidebar-group-bg: rgba(47, 139, 190, 0.04);
    --weboshost-sidebar-group-bg-open: rgba(47, 139, 190, 0.10);
    --weboshost-sidebar-item-text: #142e44;
    --weboshost-sidebar-item-hover-bg: rgba(47, 139, 190, 0.08);
    --weboshost-sidebar-item-active-bg: rgba(47, 139, 190, 0.14);
    --weboshost-sidebar-item-active-border: rgba(47, 139, 190, 0.28);
    --weboshost-sidebar-icon-color: #2e6890;
    --weboshost-sidebar-chevron-color: #2e6890;
    --weboshost-sidebar-label-color: #1e3a54;

    --weboshost-kpi-bg: rgba(47, 139, 190, 0.10);
    --weboshost-kpi-border: #8eb0cc;
    --weboshost-search-bg: rgba(47, 139, 190, 0.12);
    --weboshost-search-border: #80a6c4;
    --weboshost-badge-bg: rgba(47, 139, 190, 0.12);
    --weboshost-badge-border: #80a6c4;
    --weboshost-badge-text: #142e44;
    --weboshost-table-even-bg: #c8daea;
    --weboshost-table-header-bg: #b8cee4;
    --weboshost-table-header-text: #142e44;
    --weboshost-table-border: #9ab8d4;
    --weboshost-action-card-bg: rgba(47, 139, 190, 0.10);
    --weboshost-action-card-border: #8eb0cc;
    --weboshost-action-card-hover-bg: rgba(47, 139, 190, 0.15);
    --weboshost-action-card-hover-border: rgba(47, 139, 190, 0.35);
    --weboshost-pill-bg: rgba(47, 139, 190, 0.12);
    --weboshost-pill-border: #80a6c4;
    --weboshost-pill-text: #142e44;
    --weboshost-empty-border: #80a6c4;
    --weboshost-empty-bg: rgba(47, 139, 190, 0.10);
    --weboshost-kbd-bg: rgba(47, 139, 190, 0.12);
    --weboshost-kbd-border: #80a6c4;
    --weboshost-kbd-text: #142e44;
    --weboshost-topbar-item-text: #142e44;
    --weboshost-topbar-shadow: 0 1px 3px rgba(30, 80, 130, 0.10);
    --weboshost-gradient-line: linear-gradient(90deg, rgba(47, 139, 190, 0.75) 0%, rgba(47, 139, 190, 0) 70%);
    --weboshost-input-focus-border: rgba(47, 139, 190, 0.60);
    --weboshost-input-focus-ring: rgba(47, 139, 190, 0.22);
    --weboshost-placeholder: #5a7a96;
}

/* ---- Dark theme ---- */
.dark {
    --weboshost-bg: #171b22;
    --weboshost-panel-bg: #1d232d;
    --weboshost-card-bg: #262f3a;
    --weboshost-card-bg-2: #222a35;
    --weboshost-card-border: #344050;
    --weboshost-divider: #303a48;

    --weboshost-sidebar-bg: #161c26;
    --weboshost-sidebar-bg-2: #111720;
    --weboshost-sidebar-border: rgba(255, 255, 255, 0.08);

    --weboshost-topbar-bg: #212a36;
    --weboshost-topbar-border: #2e3a48;

    --weboshost-accent: #2f8bbe;
    --weboshost-link: #38bdf8;

    --weboshost-text: #e5e7eb;
    --weboshost-text-muted: #9aa8bb;
    --weboshost-text-dim: #7b8aa1;

    --weboshost-input-bg: #222a35;
    --weboshost-input-border: rgba(148, 163, 184, 0.26);

    --weboshost-success: #22c55e;
    --weboshost-warning: #f59e0b;
    --weboshost-danger: #f43f5e;

    --weboshost-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

    --weboshost-chart-grid: rgba(148, 163, 184, 0.16);
    --weboshost-chart-text: #cbd5e1;
    --weboshost-tooltip-bg: #0f172a;

    --weboshost-sidebar-group-text: rgba(180, 195, 215, 0.75);
    --weboshost-sidebar-group-text-open: rgba(240, 245, 250, 0.95);
    --weboshost-sidebar-group-border: rgba(56, 189, 248, 0.10);
    --weboshost-sidebar-group-border-left: rgba(56, 189, 248, 0.25);
    --weboshost-sidebar-group-border-open: rgba(56, 189, 248, 0.30);
    --weboshost-sidebar-group-border-left-open: rgba(56, 189, 248, 0.75);
    --weboshost-sidebar-group-bg: rgba(255, 255, 255, 0.02);
    --weboshost-sidebar-group-bg-open: rgba(255, 255, 255, 0.06);
    --weboshost-sidebar-item-text: rgba(226, 232, 240, 0.92);
    --weboshost-sidebar-item-hover-bg: rgba(255, 255, 255, 0.08);
    --weboshost-sidebar-item-active-bg: rgba(56, 189, 248, 0.15);
    --weboshost-sidebar-item-active-border: rgba(56, 189, 248, 0.18);
    --weboshost-sidebar-icon-color: rgba(180, 210, 240, 0.95);
    --weboshost-sidebar-chevron-color: rgba(180, 210, 240, 0.95);
    --weboshost-sidebar-label-color: rgba(226, 232, 240, 0.95);

    --weboshost-kpi-bg: rgba(15, 23, 42, 0.18);
    --weboshost-kpi-border: rgba(148, 163, 184, 0.18);
    --weboshost-search-bg: rgba(27, 34, 44, 0.85);
    --weboshost-search-border: rgba(148, 163, 184, 0.22);
    --weboshost-badge-bg: rgba(15, 23, 42, 0.18);
    --weboshost-badge-border: rgba(148, 163, 184, 0.22);
    --weboshost-badge-text: rgba(226, 232, 240, 0.92);
    --weboshost-table-even-bg: #222a35;
    --weboshost-table-header-bg: var(--weboshost-card-bg-2);
    --weboshost-table-header-text: rgba(203, 213, 225, 0.95);
    --weboshost-table-border: rgba(148, 163, 184, 0.14);
    --weboshost-action-card-bg: rgba(15, 23, 42, 0.16);
    --weboshost-action-card-border: rgba(148, 163, 184, 0.18);
    --weboshost-action-card-hover-bg: rgba(56, 189, 248, 0.10);
    --weboshost-action-card-hover-border: rgba(56, 189, 248, 0.26);
    --weboshost-pill-bg: rgba(15, 23, 42, 0.18);
    --weboshost-pill-border: rgba(148, 163, 184, 0.18);
    --weboshost-pill-text: rgba(226, 232, 240, 0.92);
    --weboshost-empty-border: rgba(148, 163, 184, 0.28);
    --weboshost-empty-bg: rgba(15, 23, 42, 0.16);
    --weboshost-kbd-bg: rgba(15, 23, 42, 0.35);
    --weboshost-kbd-border: rgba(148, 163, 184, 0.24);
    --weboshost-kbd-text: rgba(203, 213, 225, 0.86);
    --weboshost-topbar-item-text: rgba(226, 232, 240, 0.92);
    --weboshost-topbar-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
    --weboshost-gradient-line: linear-gradient(90deg, rgba(47, 139, 190, 0.95) 0%, rgba(47, 139, 190, 0) 70%);
    --weboshost-input-focus-border: rgba(56, 189, 248, 0.55);
    --weboshost-input-focus-ring: rgba(56, 189, 248, 0.25);
    --weboshost-placeholder: rgba(148, 163, 184, 0.70);
}

html,
body,
.fi-layout,
.fi-main-ctn {
    background: var(--weboshost-bg) !important;
    color: var(--weboshost-text) !important;
}

.fi-main {
    min-height: 100vh !important;
    background: var(--weboshost-panel-bg) !important;
    color: var(--weboshost-text) !important;
}

/* Sidebar */
.fi-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: linear-gradient(180deg, var(--weboshost-sidebar-bg) 0%, var(--weboshost-sidebar-bg-2) 100%) !important;
    border-right: 1px solid var(--weboshost-sidebar-border) !important;
}

.dark .fi-sidebar {
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

.fi-sidebar-header {
    border-bottom: 1px solid var(--weboshost-sidebar-border) !important;
    padding-bottom: 0.6rem;
    background: var(--weboshost-topbar-bg) !important;
    color: var(--weboshost-text) !important;
}

.fi-sidebar-header * {
    color: inherit !important;
}

/* Sidebar group headers — default (collapsed/dimmer) */
.fi-sidebar-group > .fi-sidebar-group-button {
    color: var(--weboshost-sidebar-group-text) !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    border: 1px solid var(--weboshost-sidebar-group-border) !important;
    border-left: 3px solid var(--weboshost-sidebar-group-border-left) !important;
    border-radius: 0.6rem !important;
    padding: 0.55rem 0.8rem !important;
    margin-bottom: 0.35rem;
    background: var(--weboshost-sidebar-group-bg) !important;
    transition: all 0.2s ease;
}

/* Sidebar group header — open (brighter) */
.fi-sidebar-group.fi-sidebar-group-open > .fi-sidebar-group-button {
    color: var(--weboshost-sidebar-group-text-open) !important;
    border: 1px solid var(--weboshost-sidebar-group-border-open) !important;
    border-left: 3px solid var(--weboshost-sidebar-group-border-left-open) !important;
    background: var(--weboshost-sidebar-group-bg-open) !important;
}

/* Force ALL gray icon-buttons in sidebar to be visible */
.fi-sidebar .fi-icon-btn {
    color: var(--weboshost-sidebar-icon-color) !important;
}

.fi-sidebar .fi-icon-btn svg {
    color: var(--weboshost-sidebar-icon-color) !important;
    stroke: var(--weboshost-sidebar-icon-color) !important;
    opacity: 1 !important;
}

/* Sidebar group label text */
.fi-sidebar-group-label {
    color: var(--weboshost-sidebar-label-color) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Sidebar group collapse chevron — force visible */
.fi-sidebar-group .fi-sidebar-group-collapse-button,
.fi-sidebar .fi-sidebar-group-collapse-button,
.fi-sidebar .fi-icon-btn.fi-sidebar-group-collapse-button,
button.fi-sidebar-group-collapse-button {
    color: var(--weboshost-sidebar-chevron-color) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.fi-sidebar-group .fi-sidebar-group-collapse-button svg,
.fi-sidebar .fi-sidebar-group-collapse-button svg,
.fi-sidebar .fi-icon-btn.fi-sidebar-group-collapse-button svg,
button.fi-sidebar-group-collapse-button svg,
.fi-sidebar-group-collapse-button .fi-icon-btn-icon {
    color: var(--weboshost-sidebar-chevron-color) !important;
    stroke: var(--weboshost-sidebar-chevron-color) !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.fi-sidebar-group-button:hover .fi-sidebar-group-collapse-button,
.fi-sidebar-group-button:hover .fi-sidebar-group-collapse-button svg {
    color: #f8fafc !important;
    stroke: #f8fafc !important;
}

/* Sidebar group icon */
.fi-sidebar-group-icon {
    color: var(--weboshost-sidebar-icon-color) !important;
}

.fi-sidebar-item-button {
    border-radius: 0.6rem;
    color: var(--weboshost-sidebar-item-text) !important;
    margin: 0.08rem 0;
    transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.fi-sidebar-item-button * {
    color: inherit !important;
}

.fi-sidebar-item-button:hover {
    background: var(--weboshost-sidebar-item-hover-bg) !important;
    transform: translateX(1px);
}

/* Filament marks active items with bg-gray-100 / dark:bg-white/5, not a dedicated class */
.fi-sidebar .fi-sidebar-item-button.bg-gray-100 {
    background: var(--weboshost-sidebar-item-active-bg) !important;
    border: 1px solid var(--weboshost-sidebar-item-active-border) !important;
}

/* Topbar */
.fi-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--weboshost-topbar-border) !important;
    background: var(--weboshost-topbar-bg) !important;
    box-shadow: var(--weboshost-topbar-shadow);
}

.fi-topbar > div,
.fi-topbar .bg-white {
    background: var(--weboshost-topbar-bg) !important;
}

.fi-topbar .fi-topbar-item {
    color: var(--weboshost-topbar-item-text) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--weboshost-bg);
}

::-webkit-scrollbar-thumb {
    background: #8aaccb;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6a96b8;
}

.dark ::-webkit-scrollbar-track {
    background: var(--weboshost-bg);
}

.dark ::-webkit-scrollbar-thumb {
    background: #3a5570;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #4a6a85;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #8aaccb var(--weboshost-bg);
}

.dark * {
    scrollbar-color: #3a5570 var(--weboshost-bg);
}

/* ---- Theme harmony: override Filament's hardcoded Tailwind classes ---- */
.bg-white {
    background-color: var(--weboshost-card-bg) !important;
}

.bg-gray-50 {
    background-color: var(--weboshost-card-bg-2) !important;
}

.bg-gray-100 {
    background-color: var(--weboshost-card-bg-2) !important;
}

.bg-gray-200 {
    background-color: var(--weboshost-divider) !important;
}

.ring-gray-950\/5 {
    --tw-ring-color: var(--weboshost-card-border) !important;
}

.shadow-sm {
    box-shadow: var(--weboshost-shadow) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300 {
    border-color: var(--weboshost-card-border) !important;
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--weboshost-divider) !important;
}

.text-gray-950,
.text-gray-900,
.text-gray-800 {
    color: var(--weboshost-text) !important;
}

.text-gray-700,
.text-gray-600 {
    color: var(--weboshost-text) !important;
}

.text-gray-500,
.text-gray-400 {
    color: var(--weboshost-text-muted) !important;
}

.text-gray-300 {
    color: var(--weboshost-text-dim) !important;
}

/* ---- Compiled component overrides (Filament bakes bg-white into CSS, not classes) ---- */

/* Choices.js select dropdowns */
.choices__list--dropdown,
.choices__list[aria-expanded] {
    background: var(--weboshost-card-bg) !important;
    border: 1px solid var(--weboshost-card-border) !important;
    box-shadow: none !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: var(--weboshost-sidebar-item-hover-bg) !important;
}

.choices__item--choice {
    color: var(--weboshost-text-muted) !important;
}

.choices__item--choice.choices__item--selectable {
    color: var(--weboshost-text) !important;
}

.choices__inner {
    color: var(--weboshost-text) !important;
}

.choices__input {
    color: var(--weboshost-text) !important;
}

.choices__placeholder.choices__item {
    color: var(--weboshost-placeholder) !important;
}

/* Native select option/optgroup backgrounds */
select option,
select optgroup {
    background: var(--weboshost-input-bg) !important;
    color: var(--weboshost-text) !important;
}

/* Filament modals */
.fi-modal-window {
    background: var(--weboshost-card-bg) !important;
}

.fi-modal-content {
    background: var(--weboshost-card-bg) !important;
}

.fi-modal-header {
    background: var(--weboshost-card-bg) !important;
    border-color: var(--weboshost-divider) !important;
}

.fi-modal-footer {
    background: var(--weboshost-card-bg-2) !important;
    border-color: var(--weboshost-divider) !important;
}

/* Filament dropdowns */
.fi-dropdown-panel {
    background: var(--weboshost-card-bg) !important;
    border: 1px solid var(--weboshost-card-border) !important;
}

.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus-visible {
    background: var(--weboshost-sidebar-item-hover-bg) !important;
}

/* Filament notifications */
.fi-no-notification {
    background: var(--weboshost-card-bg) !important;
    border: 1px solid var(--weboshost-card-border) !important;
}

/* Checkbox inputs — make them visible in both themes */
.fi-checkbox-input {
    background: var(--weboshost-input-bg) !important;
    border: 1px solid var(--weboshost-input-border) !important;
}

.fi-checkbox-input:checked {
    background: var(--weboshost-accent) !important;
    border-color: var(--weboshost-accent) !important;
}

/* Toggle switch */
.fi-fo-toggle {
    background-color: #8eb0cc !important;
}

.fi-fo-toggle[aria-checked="true"],
.fi-fo-toggle:checked {
    background-color: var(--weboshost-accent) !important;
}

.dark .fi-fo-toggle {
    background-color: #3a4a5a !important;
}

.dark .fi-fo-toggle[aria-checked="true"],
.dark .fi-fo-toggle:checked {
    background-color: var(--weboshost-accent) !important;
}

/* Radio inputs */
.fi-radio-input {
    background: var(--weboshost-input-bg) !important;
    border: 1px solid var(--weboshost-input-border) !important;
}

.fi-radio-input:checked {
    border-color: var(--weboshost-accent) !important;
}

/* Tabs (non-contained) */
.fi-tabs {
    background: var(--weboshost-card-bg) !important;
}

/* Pagination hover */
.fi-pagination-item:hover {
    background: var(--weboshost-sidebar-item-hover-bg) !important;
}

/* Badge containers on buttons/links */
.fi-btn-badge-ctn,
.fi-icon-btn-badge-ctn,
.fi-link-badge-ctn {
    background: var(--weboshost-card-bg) !important;
}

/* Global search results */
.fi-global-search-results-ctn {
    background: var(--weboshost-card-bg) !important;
    border: 1px solid var(--weboshost-card-border) !important;
}

/* Dark theme: make input wrappers more visible (was dark:bg-white/5 = barely visible) */
.dark .fi-input-wrp {
    background: var(--weboshost-input-bg) !important;
    border: 1px solid var(--weboshost-input-border) !important;
}

/* Filament infolists / resource list items */
.fi-in-entry-wrp {
    border-color: var(--weboshost-divider) !important;
}

/* Action panels and footers */
.fi-ac {
    background: transparent !important;
}

.fi-form-actions {
    background: var(--weboshost-card-bg-2) !important;
}

/* Filament simple layout (login page) — card surface */
.fi-simple-main-ctn {
    background: var(--weboshost-card-bg) !important;
    border: 1px solid var(--weboshost-card-border) !important;
}

/* Ring overrides for all Filament components */
[class*="ring-gray-950"] {
    --tw-ring-color: var(--weboshost-card-border) !important;
}

[class*="ring-white/10"] {
    --tw-ring-color: var(--weboshost-card-border) !important;
}

/* Dividers inside dropdowns and panels */
[class*="divide-gray-100"] > :not([hidden]) ~ :not([hidden]),
[class*="divide-white/5"] > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--weboshost-divider) !important;
}

/* Page header */
.fi-header {
    color: var(--weboshost-text) !important;
}

.fi-header-heading {
    color: var(--weboshost-text) !important;
}

.fi-breadcrumbs,
.fi-section-description {
    color: var(--weboshost-text-muted) !important;
}

.fi-breadcrumbs a {
    color: var(--weboshost-link) !important;
}

/* Core containers */
.fi-section,
.fi-ta,
.fi-wi-widget {
    border-radius: var(--weboshost-radius) !important;
    border: 1px solid var(--weboshost-card-border) !important;
    background: var(--weboshost-card-bg) !important;
    box-shadow: var(--weboshost-shadow);
    overflow: hidden;
}

.fi-section::before,
.fi-ta::before,
.fi-wi-widget::before {
    content: "";
    display: block;
    height: 2px;
    background: var(--weboshost-gradient-line);
}

.fi-section-header,
.fi-ta-header,
.fi-ta-header-toolbar {
    background: var(--weboshost-card-bg-2) !important;
    border-bottom: 1px solid var(--weboshost-divider) !important;
}

.fi-section-header-heading,
.fi-ta-header-heading {
    color: var(--weboshost-text) !important;
}

.fi-ta-content,
.fi-section-content {
    background: var(--weboshost-card-bg) !important;
}

.weboshost-form-surface {
    border-radius: var(--weboshost-radius);
    border: 1px solid var(--weboshost-card-border);
    background: var(--weboshost-card-bg);
    box-shadow: var(--weboshost-shadow);
    overflow: hidden;
    padding: 1rem;
}

/* Settings page: keep everything within the same dark surface */
.weboshost-settings-form .fi-tabs {
    background: var(--weboshost-card-bg-2) !important;
    border-bottom: 1px solid var(--weboshost-divider) !important;
    border-top-left-radius: var(--weboshost-radius);
    border-top-right-radius: var(--weboshost-radius);
}

.weboshost-settings-form .fi-tabs-item {
    color: var(--weboshost-text-muted) !important;
}

.weboshost-settings-form .fi-tabs-item.fi-tabs-item-active {
    color: var(--weboshost-text) !important;
}

/* Tables */
.fi-ta-table {
    background: var(--weboshost-card-bg) !important;
}

.fi-ta-pagination {
    background: var(--weboshost-card-bg-2) !important;
    border-top: 1px solid var(--weboshost-divider) !important;
}

.fi-ta-table thead th {
    background: var(--weboshost-table-header-bg) !important;
    color: var(--weboshost-table-header-text) !important;
    border-bottom: 1px solid var(--weboshost-divider) !important;
}

.fi-ta-table tbody tr {
    background: var(--weboshost-card-bg) !important;
}

.fi-ta-table tbody tr:nth-child(even) {
    background: var(--weboshost-table-even-bg) !important;
}

.fi-ta-table tbody td {
    color: var(--weboshost-text) !important;
    border-bottom: 1px solid var(--weboshost-table-border) !important;
}

.fi-ta-text-item,
.fi-ta .fi-ta-text {
    color: var(--weboshost-text) !important;
}

/* Pagination numbers, per-page input, and all table content must be high contrast */
.fi-ta-pagination * {
    color: var(--weboshost-text) !important;
}

.fi-ta-pagination select,
.fi-ta-pagination input {
    background: var(--weboshost-input-bg) !important;
    color: var(--weboshost-text) !important;
    border-color: var(--weboshost-input-border) !important;
}

/* All column content inside tables — badges, text, numbers */
.fi-ta-table tbody td * {
    color: var(--weboshost-text) !important;
}

/* Filament badge text inside tables */
.fi-ta-table .fi-badge {
    color: var(--weboshost-text) !important;
}

/* Status badges with colors should keep their own colors */
.fi-ta-table .fi-badge.fi-color-success,
.fi-ta-table .fi-badge.fi-color-success * {
    color: #166534 !important;
}

.dark .fi-ta-table .fi-badge.fi-color-success,
.dark .fi-ta-table .fi-badge.fi-color-success * {
    color: #a7f3d0 !important;
}

/* Ensure all text inside table columns (including custom column components) is readable */
.fi-ta-col-wrp {
    color: var(--weboshost-text) !important;
}

/* Table action links: make them feel like small control-panel buttons */
.fi-ta .fi-ac-link-action {
    padding: 0.2rem 0.55rem !important;
    border-radius: 999px !important;
    border: 1px solid var(--weboshost-badge-border) !important;
    background: var(--weboshost-badge-bg) !important;
    color: var(--weboshost-badge-text) !important;
    font-weight: 800 !important;
    gap: 0.35rem !important;
}

.fi-ta .fi-ac-link-action:hover {
    background: var(--weboshost-action-card-hover-bg) !important;
    border-color: var(--weboshost-action-card-hover-border) !important;
}

/* Filament badges: align with WebOsHost pills */
.fi-badge {
    border-radius: 999px !important;
    border: 1px solid var(--weboshost-badge-border) !important;
    background: var(--weboshost-badge-bg) !important;
    color: var(--weboshost-badge-text) !important;
    font-weight: 900 !important;
}

.fi-badge.fi-color-success {
    border-color: rgba(34, 197, 94, 0.55) !important;
    background: rgba(34, 197, 94, 0.14) !important;
    color: #a7f3d0 !important;
}

.fi-badge.fi-color-warning {
    border-color: rgba(245, 158, 11, 0.65) !important;
    background: rgba(245, 158, 11, 0.14) !important;
    color: #fde68a !important;
}

.fi-badge.fi-color-danger {
    border-color: rgba(244, 63, 94, 0.70) !important;
    background: rgba(244, 63, 94, 0.14) !important;
    color: #fecdd3 !important;
}

.fi-badge.fi-color-primary {
    border-color: rgba(56, 189, 248, 0.45) !important;
    background: rgba(56, 189, 248, 0.14) !important;
    color: #bae6fd !important;
}

/* Forms / inputs */
input,
textarea,
select,
.fi-input,
.fi-select-input {
    background: var(--weboshost-input-bg) !important;
    color: var(--weboshost-text) !important;
    border-color: var(--weboshost-input-border) !important;
}

/* Filament form wrappers (prevents light/white inputs in custom themes) */
.fi-input-wrp,
.fi-fo-field-wrp-content {
    background: var(--weboshost-input-bg) !important;
    border: 1px solid var(--weboshost-input-border) !important;
    border-radius: 0.65rem !important;
}

.fi-input-wrp:focus-within,
.fi-fo-field-wrp-content:focus-within {
    border-color: var(--weboshost-input-focus-border) !important;
    box-shadow: 0 0 0 2px var(--weboshost-input-focus-ring) !important;
}

.fi-input-wrp .fi-input,
.fi-input-wrp input,
.fi-input-wrp textarea,
.fi-input-wrp select {
    background: transparent !important;
    color: var(--weboshost-text) !important;
}

.fi-fo-field-wrp-label,
.fi-fo-field-wrp-label * {
    color: var(--weboshost-text) !important;
}

.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint {
    color: var(--weboshost-text-muted) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--weboshost-placeholder) !important;
}

input:focus,
textarea:focus,
select:focus,
.fi-input:focus {
    outline: none !important;
    border-color: var(--weboshost-input-focus-border) !important;
    box-shadow: 0 0 0 2px var(--weboshost-input-focus-ring) !important;
}

/* WebOsHost topbar additions */
.weboshost-topbar-status {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    flex-wrap: wrap;
}

.weboshost-global-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.4rem 0.25rem 0.6rem;
    border-radius: 0.65rem;
    border: 1px solid var(--weboshost-search-border);
    background: var(--weboshost-search-bg);
}

.weboshost-global-search-input {
    width: 18rem;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: var(--weboshost-text) !important;
    font-size: 0.82rem;
}

.weboshost-global-search-input::placeholder {
    color: var(--weboshost-placeholder);
}

.weboshost-kbd {
    border: 1px solid var(--weboshost-kbd-border);
    border-radius: 0.35rem;
    font-size: 0.65rem;
    line-height: 1;
    padding: 0.2rem 0.3rem;
    color: var(--weboshost-kbd-text);
    background: var(--weboshost-kbd-bg);
}

.weboshost-status-chip {
    border-radius: 999px;
    border: 1px solid var(--weboshost-pill-border);
    background: var(--weboshost-pill-bg);
    color: var(--weboshost-pill-text);
    font-size: 0.68rem;
    padding: 0.16rem 0.55rem;
    font-weight: 800;
}

.weboshost-status-chip.is-active {
    border-color: rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.14);
    color: #a7f3d0;
}

.weboshost-status-chip.is-warn {
    border-color: rgba(245, 158, 11, 0.65);
    background: rgba(245, 158, 11, 0.14);
    color: #fde68a;
}

.weboshost-status-chip.is-error {
    border-color: rgba(244, 63, 94, 0.7);
    background: rgba(244, 63, 94, 0.14);
    color: #fecdd3;
}

/* Tooltip used by hint icons */
.weboshost-hint-hidden {
    display: none !important;
}

.weboshost-tooltip {
    position: absolute;
    z-index: 9999;
    max-width: 280px;
    padding: 0.55rem 0.7rem;
    background: var(--weboshost-tooltip-bg);
    color: var(--weboshost-tooltip-text);
    font-size: 0.72rem;
    line-height: 1.25;
    border-radius: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

/* Reusable custom components used by dashboard + insights pages */
.weboshost-card {
    border-radius: var(--weboshost-radius);
    border: 1px solid var(--weboshost-card-border);
    background: var(--weboshost-card-bg);
    box-shadow: var(--weboshost-shadow);
    padding: 1.25rem;
}

.weboshost-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.weboshost-card-title {
    font-size: 0.72rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--weboshost-text-muted);
}

.weboshost-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    border: 1px solid var(--weboshost-badge-border);
    background: var(--weboshost-badge-bg);
    color: var(--weboshost-badge-text);
}

.weboshost-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem;
}

.weboshost-kpi {
    padding: 0.9rem;
    border-radius: 0.9rem;
    border: 1px solid var(--weboshost-kpi-border);
    background: var(--weboshost-kpi-bg);
}

.weboshost-kpi-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--weboshost-text-muted);
    font-weight: 800;
}

.weboshost-kpi-value {
    margin-top: 0.35rem;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--weboshost-text);
}

.weboshost-card-value {
    margin-top: 0.35rem;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--weboshost-text);
}

.weboshost-card-muted {
    font-size: 0.75rem;
    color: var(--weboshost-text-muted);
    margin-top: 0.2rem;
}

.weboshost-chart-card {
    padding: 1rem;
    overflow: hidden;
}

.weboshost-chart-canvas {
    width: 100%;
    height: 260px;
    max-height: 280px;
    min-height: 220px;
}

.weboshost-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.weboshost-table th,
.weboshost-table td {
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--weboshost-table-border);
}

.weboshost-table th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--weboshost-table-header-text);
    font-weight: 900;
    background: var(--weboshost-table-header-bg);
}

.weboshost-table td {
    color: var(--weboshost-text);
}

.weboshost-service-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
    border: 1px solid var(--weboshost-pill-border);
    background: var(--weboshost-pill-bg);
    color: var(--weboshost-pill-text);
}

.weboshost-service-pill.ok {
    border-color: rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.14);
    color: #a7f3d0;
}

.weboshost-service-pill.warn {
    border-color: rgba(245, 158, 11, 0.65);
    background: rgba(245, 158, 11, 0.14);
    color: #fde68a;
}

.weboshost-service-pill.fail {
    border-color: rgba(244, 63, 94, 0.7);
    background: rgba(244, 63, 94, 0.14);
    color: #fecdd3;
}

.weboshost-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.weboshost-action-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem;
    border-radius: 0.9rem;
    border: 1px solid var(--weboshost-action-card-border);
    background: var(--weboshost-action-card-bg);
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.weboshost-action-card:hover {
    transform: translateY(-2px);
    background: var(--weboshost-action-card-hover-bg);
    border-color: var(--weboshost-action-card-hover-border);
}

.weboshost-action-card-title {
    font-weight: 900;
    color: var(--weboshost-text);
}

.weboshost-action-card-desc {
    color: var(--weboshost-text-muted);
    font-size: 0.85rem;
}

.weboshost-empty-state {
    border-radius: var(--weboshost-radius);
    border: 1px dashed var(--weboshost-empty-border);
    background: var(--weboshost-empty-bg);
}

.weboshost-empty-icon {
    color: var(--weboshost-text-dim);
}

.weboshost-empty-title {
    color: var(--weboshost-text);
    font-weight: 800;
}

.weboshost-empty-desc {
    color: var(--weboshost-text-muted);
}

/* Page shell component */
.weboshost-page-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.weboshost-page-shell-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.weboshost-page-shell-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--weboshost-text);
}

.weboshost-page-shell-description {
    font-size: 0.875rem;
    color: var(--weboshost-text-muted);
}

/* Topbar shell (custom topbar partials) */
.weboshost-topbar-shell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.weboshost-topbar-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--weboshost-text-muted);
}

/* Section group headers (DA Evo-style uppercase bar) */
.weboshost-section-heading {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--weboshost-text-muted);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--weboshost-divider);
    margin-bottom: 0.75rem;
}

/* Login page */
.fi-simple-layout {
    background: var(--weboshost-bg) !important;
}

.fi-simple-main-ctn {
    background: var(--weboshost-card-bg) !important;
    border: 1px solid var(--weboshost-card-border) !important;
    border-radius: var(--weboshost-radius) !important;
}

@media (max-width: 1000px) {
    .weboshost-global-search-input {
        width: 10.5rem;
    }
}