/* ═══════════════════════════════════════════════════════════════════════════ Runtime theme variables — applied via data-theme attribute on Set by theme-switcher.js, persisted in localStorage as 'app-theme'. Overrides the :root defaults from: site.css (nav menu + shared tokens — classic values) ant-table-compact-huddle8.css (tables) ant-drawer-huddle8.css (lease dashboard drawer) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Classic (no data-theme) — AntDesign default blue ───────────────────── */ :root:not([data-theme]) { --btn-accent-bg: #1890ff; --btn-accent-hover-bg: #40a9ff; --btn-accent-color: #ffffff; --btn-accent-shadow: rgba(24,144,255,0.35); --btn-accent-soft: rgba(24,144,255,0.10); /* tint for hover washes */ --nav-nested-sub-title-bg: #f0f6ff; --nav-nested-sub-accent: #1890ff; /* ── Popover / popconfirm portal ──────── */ --pop-bg: #ffffff; --pop-border: #d9d9d9; --pop-top-border: #1677ff; --pop-shadow: 0 4px 16px rgba(0,0,0,0.12); --pop-text: rgba(0,0,0,0.88); --pop-title: rgba(0,0,0,0.88); --pop-muted: rgba(0,0,0,0.45); --pop-icon-warning: #faad14; --pop-btn-default-bg: var(--btn-default-bg); --pop-btn-default-border: #d9d9d9; --pop-btn-default-color: rgba(0,0,0,0.88); --pop-btn-default-hover-bg: #f5f5f5; --pop-btn-default-hover: var(--btn-default-hover); --pop-btn-primary-bg: var(--btn-primary-bg); --pop-btn-primary-hover-bg: var(--btn-primary-hover-bg); --pop-btn-primary-color: var(--btn-primary-color); /* ── Tooltip portal ────────────────────── */ --tooltip-bg: rgba(0,0,0,0.85); --tooltip-color: #ffffff; --tooltip-border: rgba(0,0,0,0.85); --tooltip-shadow: 0 4px 14px rgba(0,0,0,0.20); /* ── Select dropdown portal ────────────── */ --select-dd-bg: #ffffff; --select-dd-border: #d9d9d9; --select-dd-shadow: 0 4px 12px rgba(0,0,0,0.12); --select-dd-item-color: rgba(0,0,0,0.88); --select-dd-active-bg: #e6f4ff; --select-dd-active-color: #1677ff; } /* ── Huddle8 brand ───────────────────────────────────────────────────────── */ [data-theme="huddle8"] { /* Global button fill. Every per-area button token derives from these. */ --btn-primary-bg: #06381d; --btn-primary-hover-bg: #0a5229; --btn-primary-color: #eae1d0; --btn-primary-shadow: 0 1px 4px rgba(6,56,29,0.28); --btn-primary-hover-shadow: 0 2px 6px rgba(6,56,29,0.35); --btn-default-bg: #ffffff; --btn-default-border: #c8d4ce; --btn-default-hover: #f48177; /* coral */ --btn-danger-bg: #d93025; --btn-danger-hover-bg: #a81e14; --btn-danger-color: #ffffff; --btn-primary-soft: #c8e6d5; --btn-primary-soft-color: #06381d; --btn-danger-soft: #fce8e6; --btn-danger-soft-color: #a81e14; --nav-header-bg: #06381d; --nav-header-border: #054f28; --nav-header-color: #eae1d0; /* --nav-header-shadow: 0 2px 8px rgba(6,56,29,0.30);*/ --nav-toggle-color: #eae1d0; --nav-toggle-hover-color: #f48177; --nav-toggle-bg: rgba(255,255,255,0.08); --nav-toggle-border: rgba(234,225,208,0.25); --nav-toggle-hover-bg: rgba(255,255,255,0.18); --nav-drawer-header-bg: #06381d; --nav-drawer-header-color: #eae1d0; --nav-drawer-header-border: rgba(255,255,255,0.10); --nav-drawer-body-bg: #eae1d0; --nav-drawer-mask: rgba(6,56,29,0.35); --nav-drawer-close-color: #eae1d0; --nav-drawer-close-hover: #f48177; --nav-group-title-bg: #06381d; --nav-group-title-color: #eae1d0; --nav-group-title-border: rgba(255,255,255,0.10); --nav-item-color: #1c2e25; --nav-item-hover-bg: #fdf0ee; --nav-item-hover-color: #f48177; --nav-item-selected-bg: #fce4e1; --nav-item-selected-color: #f48177; --nav-item-selected-bar: #f48177; --nav-sub-title-color: #0a5229; --nav-sub-arrow-color: #a4b1ac; --nav-sub-bg: #dfd6c4; --nav-nested-sub-title-bg: rgba(6,56,29,0.09); --nav-nested-sub-accent: #70bfa6; --nav-link-icon-color: #70bfa6; --nav-focus-ring: #06381d; --nav-star-color: #a4b1ac; --nav-star-active-color: #f6b646; --nav-star-hover-bg: rgba(246,182,70,0.16); --nav-scroll-thumb: #c0b7a4; --nav-scroll-thumb-hover: #a4b1ac; --nav-quick-wrapper-bg: rgba(246,182,70,0.10); --nav-quick-wrapper-border: rgba(234,225,208,0.25); --nav-quick-color: #ffffff; --nav-quick-hover-color: #f48177; --nav-quick-hover-bg: rgba(255,255,255,0.12); --nav-quick-active-color: #f48177; --nav-quick-active-border: #f6b646; --nav-quick-active-bg: rgba(246,182,70,0.12); --nav-user-color: #eae1d0; --nav-user-hover-bg: rgba(255,255,255,0.12); --nav-avatar-auth-bg: #70bfa6; --nav-avatar-auth-color: #06381d; --nav-avatar-unauth-bg: rgba(255,255,255,0.15); --nav-avatar-unauth-color: #eae1d0; /* ── Tab card (drawer .ant-tabs-card) ──── */ --ldd-tab-card-bg: rgba(255,255,255,0.10); --ldd-tab-card-border: rgba(255,255,255,0.20); --ldd-tab-card-hover-bg: rgba(255,255,255,0.18); --ldd-tab-card-active-bg: #f48177; --ldd-tab-card-active-border: #f48177; --ldd-tab-card-active-bottom-border: #eae1d0; --ldd-tab-card-active-text: #ffffff; /* ── Popover / popconfirm portal ──────── */ --pop-bg: #ffffff; --pop-border: #c8d4ce; --pop-top-border: #06381d; --pop-shadow: 0 4px 16px rgba(6,56,29,0.14); --pop-text: #1c2e25; --pop-title: #1c2e25; --pop-muted: #7a9085; --pop-icon-warning: #f6b646; --pop-btn-default-bg: var(--btn-default-bg); --pop-btn-default-border: #c8d4ce; --pop-btn-default-color: #1c2e25; --pop-btn-default-hover-bg: #fff5f4; --pop-btn-default-hover: var(--btn-default-hover); --pop-btn-primary-bg: var(--btn-primary-bg); --pop-btn-primary-hover-bg: var(--btn-primary-hover-bg); --pop-btn-primary-color: var(--btn-primary-color); /* ── Tooltip portal ────────────────────── */ --tooltip-bg: #06381d; --tooltip-color: #eae1d0; --tooltip-border: #0a5229; --tooltip-shadow: 0 4px 14px rgba(6,56,29,0.30); /* ── Select dropdown portal ────────────── */ --select-dd-bg: #ffffff; --select-dd-border: #c8d4ce; --select-dd-shadow: 0 4px 12px rgba(6,56,29,0.12); --select-dd-item-color: #1c2e25; --select-dd-active-bg: #d9ede6; --select-dd-active-color: #06381d; /* ── Status / amount colours ─────────────── */ --status-danger: #cf1322; --status-success: #389e0d; /* ── Accent button (alternate theme color) ── */ --btn-accent-bg: #f48177; --btn-accent-hover-bg: #e06a60; --btn-accent-color: #ffffff; --btn-accent-shadow: rgba(244,129,119,0.35); /* ── Page background & footer ────────────── */ --mc-bg: #fdfaf5; --page-bg: #eae1d0; --page-title-bg: #eae1d0; --page-title-text: #06381d; --footer-bg: rgba(0, 0, 0, 0.22); --footer-text: rgba(6,56,29, 0.75); --footer-link-color: rgba(6,56,29, 0.75); --footer-link-hover-color: #f48177; /* ── SSRS report cards ──────────────────────────── */ --ssrs-card-header-bg: #06381d; --ssrs-card-header-color: #eae1d0; --ssrs-card-bg: #eae1d0; --ssrs-card-border: #f48177; --ssrs-card-body-color: #1c2e25; --ssrs-card-hover-shadow: rgba(6,56,29,0.18); /* ── Resubmission counters ──────────────────────── */ --resub-border: #c8d4ce; --resub-hover-bg: rgba(6,56,29,0.06); } /* ── Dark ────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Global button fill. Every per-area button token derives from these. */ --btn-primary-bg: #4f46e5; --btn-primary-hover-bg: #4338ca; --btn-primary-color: #ffffff; --btn-primary-shadow: 0 1px 4px rgba(79,70,229,0.35); --btn-primary-hover-shadow: 0 2px 6px rgba(79,70,229,0.45); --btn-default-bg: rgba(255,255,255,0.08); --btn-default-border: rgba(255,255,255,0.20); --btn-default-hover: #818cf8; --btn-danger-bg: #dc2626; --btn-danger-hover-bg: #b91c1c; --btn-danger-color: #ffffff; /* Dark inverts to a deep tint, not a pale one */ --btn-primary-soft: #2d3263; --btn-primary-soft-color: #a5b4fc; --btn-danger-soft: #3b1212; --btn-danger-soft-color: #fca5a5; --nav-header-bg: #0d1b2e; --nav-header-border: #2a3347; --nav-header-color: rgba(255,255,255,0.85); /* --nav-header-shadow: 0 2px 8px rgba(0,0,0,0.5);*/ --nav-toggle-color: rgba(255,255,255,0.65); --nav-toggle-hover-color: #ffffff; --nav-toggle-bg: rgba(255,255,255,0.06); --nav-toggle-border: rgba(255,255,255,0.15); --nav-toggle-hover-bg: rgba(255,255,255,0.12); --nav-drawer-header-bg: #0d1b2e; --nav-drawer-header-color: rgba(255,255,255,0.85); --nav-drawer-header-border: #2a3347; --nav-drawer-body-bg: #0d1b2e; --nav-drawer-mask: rgba(0,0,0,0.50); --nav-drawer-close-color: rgba(255,255,255,0.35); --nav-drawer-close-hover: #818cf8; --nav-group-title-bg: #141926; --nav-group-title-color: rgba(255,255,255,0.50); --nav-group-title-border: #2a3347; --nav-item-color: rgba(255,255,255,0.75); --nav-item-hover-bg: rgba(255,255,255,0.08); --nav-item-hover-color: #ffffff; --nav-item-selected-bg: rgba(129,140,248,0.12); --nav-item-selected-color: #818cf8; --nav-item-selected-bar: #818cf8; --nav-sub-title-color: rgba(255,255,255,0.750); --nav-sub-arrow-color: rgba(255,255,255,0.45); --nav-sub-bg: #0a1020; --nav-nested-sub-title-bg: rgba(129,140,248,0.10); --nav-nested-sub-accent: #818cf8; --nav-link-icon-color: rgba(255,255,255,0.45); --nav-focus-ring: #818cf8; --nav-star-color: rgba(255,255,255,0.40); --nav-star-active-color: #fbbf24; --nav-star-hover-bg: rgba(251,191,36,0.16); --nav-scroll-thumb: #2a3347; --nav-scroll-thumb-hover: #3c4763; --nav-quick-wrapper-bg: rgba(255,255,255,0.08); --nav-quick-wrapper-border: rgba(255,255,255,0.12); --nav-quick-color: rgba(255,255,255,0.65); --nav-quick-hover-color: #ffffff; --nav-quick-hover-bg: rgba(255,255,255,0.08); --nav-quick-active-color: #818cf8; --nav-quick-active-border: #818cf8; --nav-quick-active-bg: rgba(129,140,248,0.15); --nav-user-color: rgba(255,255,255,0.65); --nav-user-hover-bg: rgba(255,255,255,0.08); --nav-avatar-auth-bg: #4f46e5; --nav-avatar-auth-color: #ffffff; --nav-avatar-unauth-bg: rgba(255,255,255,0.15); --nav-avatar-unauth-color: rgba(255,255,255,0.65); /* ── Tab card (drawer .ant-tabs-card) ──── */ --ldd-tab-card-bg: rgba(255,255,255,0.05); --ldd-tab-card-border: rgba(255,255,255,0.12); --ldd-tab-card-hover-bg: rgba(255,255,255,0.10); --ldd-tab-card-active-bg: #0d1b2e; --ldd-tab-card-active-border: rgba(255,255,255,0.12); --ldd-tab-card-active-bottom-border: #0d1b2e; --ldd-tab-card-active-text: #818cf8; /* ── Popover additions ─────────────────── */ --pop-top-border: #4f46e5; --pop-btn-primary-color: var(--btn-primary-color); /* ── Tooltip portal ────────────────────── */ --tooltip-bg: #1e2636; --tooltip-color: #e2e8f0; --tooltip-border: #2a3347; --tooltip-shadow: 0 4px 14px rgba(0,0,0,0.50); /* ── Select dropdown portal ────────────── */ --select-dd-bg: #1e2636; --select-dd-border: #2a3347; --select-dd-shadow: 0 4px 12px rgba(0,0,0,0.50); --select-dd-item-color: #cbd5e1; --select-dd-active-bg: #1e2d50; --select-dd-active-color: #818cf8; /* ── Status / amount colours ─────────────── */ --status-danger: #f87171; --status-success: #4ade80; /* ── Accent button (alternate theme color) ── */ --btn-accent-bg: #818cf8; --btn-accent-hover-bg: #6366f1; --btn-accent-color: #ffffff; --btn-accent-shadow: rgba(129,140,248,0.40); /* ── Page background & footer ────────────── */ --page-bg: #0a1020; --page-title-bg: #0a1020; --page-title-text: rgba(255, 255, 255, 0.85); --footer-bg: rgba(0, 0, 0, 0.28); --footer-text: rgba(255, 255, 255, 0.50); --footer-link-color: rgba(255, 255, 255, 0.50); --footer-link-hover-color: #818cf8; /* ── SSRS report cards ──────────────────────────── */ --ssrs-card-header-bg: #1e2d45; --ssrs-card-header-color: rgba(255,255,255,0.90); --ssrs-card-bg: #141926; --ssrs-card-border: #2a3347; --ssrs-card-body-color: #8fa3bd; --ssrs-card-hover-shadow: rgba(0,0,0,0.40); /* ── Resubmission counters ────────────────────────── Lighter indigo than --btn-primary-bg: the global #4f46e5 only reaches ~3.2:1 as label text on the dark card. */ --resub-accent: #818cf8; /* Lighter than the usual dark border (#2a3347): that only reaches 1.37:1 against the card, so the clickable outline all but vanished. */ --resub-border: #5f6a8c; --resub-hover-bg: rgba(255,255,255,0.06); } /* ── Light ───────────────────────────────────────────────────────────────── */ [data-theme="light"] { /* Global button fill. Every per-area button token derives from these. */ --btn-primary-bg: #4338ca; --btn-primary-hover-bg: #3730a3; --btn-primary-color: #ffffff; --btn-primary-shadow: 0 1px 4px rgba(67,56,202,0.25); --btn-primary-hover-shadow: 0 2px 6px rgba(67,56,202,0.35); --btn-default-bg: #ffffff; --btn-default-border: #dde3eb; --btn-default-hover: #4338ca; --btn-danger-bg: #dc2626; --btn-danger-hover-bg: #991b1b; --btn-danger-color: #ffffff; --btn-primary-soft: #e0e7ff; --btn-primary-soft-color: #3730a3; --btn-danger-soft: #fee2e2; --btn-danger-soft-color: #991b1b; --nav-header-bg: #eef1f6; --nav-header-border: #dde3eb; --nav-header-color: #2c3e55; /* --nav-header-shadow: 0 1px 4px rgba(0,0,0,0.08);*/ --nav-toggle-color: #2c3e55; --nav-toggle-hover-color: #4338ca; --nav-toggle-bg: rgba(0,0,0,0.04); --nav-toggle-border: #c8d3dd; --nav-toggle-hover-bg: rgba(0,0,0,0.08); --nav-drawer-header-bg: #eef1f6; --nav-drawer-header-color: #2c3e55; --nav-drawer-header-border: #dde3eb; --nav-drawer-body-bg: #ffffff; --nav-drawer-mask: rgba(0,0,0,0.30); --nav-drawer-close-color: #6b7280; --nav-drawer-close-hover: #4338ca; --nav-group-title-bg: #eef1f6; --nav-group-title-color: #374151; --nav-group-title-border: #dde3eb; --nav-item-color: #374151; --nav-item-hover-bg: #e8f0fe; --nav-item-hover-color: #4338ca; --nav-item-selected-bg: #dbeafe; --nav-item-selected-color: #4338ca; --nav-item-selected-bar: #6366f1; --nav-sub-title-color: #4338ca; /* #6366f1 is only 4.4:1 on white */ --nav-sub-arrow-color: #9ca3af; --nav-sub-bg: #f7f9fc; --nav-nested-sub-title-bg: #eef2ff; --nav-nested-sub-accent: #6366f1; --nav-link-icon-color: #6b7280; --nav-focus-ring: #6366f1; --nav-star-color: #9ca3af; --nav-star-active-color: #e8a33d; --nav-star-hover-bg: rgba(232,163,61,0.12); --nav-scroll-thumb: #d5dae3; --nav-scroll-thumb-hover: #b6bfcd; --nav-quick-wrapper-bg: rgba(255,255,255,0.08); --nav-quick-wrapper-border: #c8d3dd; --nav-quick-color: #374151; --nav-quick-hover-color: #4338ca; --nav-quick-hover-bg: rgba(99,102,241,0.06); --nav-quick-active-color: #4338ca; --nav-quick-active-border: #6366f1; --nav-quick-active-bg: rgba(99,102,241,0.08); --nav-user-color: #374151; --nav-user-hover-bg: rgba(0,0,0,0.06); --nav-avatar-auth-bg: #6366f1; --nav-avatar-auth-color: #ffffff; --nav-avatar-unauth-bg: #c8d3dd; --nav-avatar-unauth-color: #374151; /* ── Tab card (drawer .ant-tabs-card) ──── */ --ldd-tab-card-bg: #f0f2f5; --ldd-tab-card-border: #dde3eb; --ldd-tab-card-hover-bg: #e8eaf0; --ldd-tab-card-active-bg: #ffffff; --ldd-tab-card-active-border: #dde3eb; --ldd-tab-card-active-bottom-border: #ffffff; --ldd-tab-card-active-text: #6366f1; /* ── Popover / popconfirm portal ──────── */ --pop-bg: #ffffff; --pop-border: #dde3eb; --pop-top-border: #4338ca; --pop-shadow: 0 4px 16px rgba(0,0,0,0.10); --pop-text: #374151; --pop-title: #1f2937; --pop-muted: #9ca3af; --pop-icon-warning: #f59e0b; --pop-btn-default-bg: var(--btn-default-bg); --pop-btn-default-border: #dde3eb; --pop-btn-default-color: #374151; --pop-btn-default-hover-bg: #f0f4ff; --pop-btn-default-hover: var(--btn-default-hover); --pop-btn-primary-bg: var(--btn-primary-bg); --pop-btn-primary-hover-bg: var(--btn-primary-hover-bg); --pop-btn-primary-color: var(--btn-primary-color); /* ── Tooltip portal ────────────────────── */ --tooltip-bg: #374151; --tooltip-color: #f9fafb; --tooltip-border: #4b5563; --tooltip-shadow: 0 4px 14px rgba(0,0,0,0.15); /* ── Select dropdown portal ────────────── */ --select-dd-bg: #ffffff; --select-dd-border: #dde3eb; --select-dd-shadow: 0 4px 12px rgba(0,0,0,0.08); --select-dd-item-color: #374151; --select-dd-active-bg: #e8f0fe; --select-dd-active-color: #4338ca; /* ── Status / amount colours ─────────────── */ --status-danger: #dc2626; --status-success: #16a34a; /* ── Accent button (alternate theme color) ── */ --btn-accent-bg: #4338ca; --btn-accent-hover-bg: #3730a3; --btn-accent-color: #ffffff; --btn-accent-shadow: rgba(67,56,202,0.35); /* ── Page background & footer ────────────── */ --page-bg: #c8d3dd; --page-title-bg: #c8d3dd; --page-title-text: #2c3e55; --footer-bg: rgba(0, 0, 0, 0.07); --footer-text: rgba(44, 62, 85, 0.70); --footer-link-color: rgba(44, 62, 85, 0.70); --footer-link-hover-color: #4338ca; /* ── SSRS report cards ──────────────────────────── */ --ssrs-card-header-bg: #4338ca; --ssrs-card-header-color: #ffffff; --ssrs-card-bg: #ffffff; --ssrs-card-border: #dde3eb; --ssrs-card-body-color: #4b5563; --ssrs-card-hover-shadow: rgba(67,56,202,0.18); /* ── Resubmission counters ──────────────────────── */ --resub-border: #dde3eb; --resub-hover-bg: rgba(67,56,202,0.06); } /* ── Page title text — override Bootstrap .text-white per theme ──────────── */ [data-theme="huddle8"] .page-title, [data-theme="huddle8"] .page-title .text-white, [data-theme="huddle8"] .page-title h1, [data-theme="huddle8"] .page-title h2, [data-theme="huddle8"] .page-title h3, [data-theme="huddle8"] .page-title h4, [data-theme="huddle8"] .page-title h5, [data-theme="huddle8"] .page-title h6 { color: var(--page-title-text) !important; } [data-theme="dark"] .page-title, [data-theme="dark"] .page-title .text-white, [data-theme="dark"] .page-title h1, [data-theme="dark"] .page-title h2, [data-theme="dark"] .page-title h3, [data-theme="dark"] .page-title h4, [data-theme="dark"] .page-title h5, [data-theme="dark"] .page-title h6 { color: var(--page-title-text) !important; } [data-theme="light"] .page-title, [data-theme="light"] .page-title .text-white, [data-theme="light"] .page-title h1, [data-theme="light"] .page-title h2, [data-theme="light"] .page-title h3, [data-theme="light"] .page-title h4, [data-theme="light"] .page-title h5, [data-theme="light"] .page-title h6 { color: var(--page-title-text) !important; } /* ── Page title bar — AntDesign component overrides per theme ────────────── */ /* Ghost buttons (prev/next/sync) */ [data-theme="huddle8"] .page-title .ant-btn-background-ghost { color: var(--page-title-text) !important; border-color: rgba(6, 56, 29, 0.35) !important; } [data-theme="huddle8"] .page-title .ant-btn-background-ghost:hover:not(:disabled) { color: var(--btn-default-hover) !important; border-color: var(--btn-default-hover) !important; } [data-theme="dark"] .page-title .ant-btn-background-ghost { color: var(--page-title-text) !important; border-color: rgba(255, 255, 255, 0.30) !important; } [data-theme="dark"] .page-title .ant-btn-background-ghost:hover:not(:disabled) { color: var(--btn-default-hover) !important; border-color: var(--btn-default-hover) !important; } [data-theme="light"] .page-title .ant-btn-background-ghost { color: var(--page-title-text) !important; border-color: rgba(44, 62, 85, 0.35) !important; } [data-theme="light"] .page-title .ant-btn-background-ghost:hover:not(:disabled) { color: var(--btn-default-hover) !important; border-color: var(--btn-default-hover) !important; } /* DatePicker inside page-title */ [data-theme="huddle8"] .page-title .ant-picker { background: rgba(255, 255, 255, 0.55) !important; border-color: rgba(6, 56, 29, 0.25) !important; } [data-theme="huddle8"] .page-title .ant-picker .ant-picker-input > input, [data-theme="huddle8"] .page-title .ant-picker .ant-picker-suffix .anticon { color: var(--page-title-text) !important; } [data-theme="huddle8"] .page-title .ant-picker:hover, [data-theme="huddle8"] .page-title .ant-picker-focused { border-color: #f48177 !important; box-shadow: 0 0 0 2px rgba(244, 129, 119, 0.20) !important; } [data-theme="dark"] .page-title .ant-picker { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.20) !important; } [data-theme="dark"] .page-title .ant-picker .ant-picker-input > input, [data-theme="dark"] .page-title .ant-picker .ant-picker-suffix .anticon { color: var(--page-title-text) !important; } [data-theme="dark"] .page-title .ant-picker:hover, [data-theme="dark"] .page-title .ant-picker-focused { border-color: #818cf8 !important; box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.20) !important; } [data-theme="light"] .page-title .ant-picker { background: rgba(255, 255, 255, 0.70) !important; border-color: rgba(44, 62, 85, 0.25) !important; } [data-theme="light"] .page-title .ant-picker .ant-picker-input > input, [data-theme="light"] .page-title .ant-picker .ant-picker-suffix .anticon { color: var(--page-title-text) !important; } [data-theme="light"] .page-title .ant-picker:hover, [data-theme="light"] .page-title .ant-picker-focused { border-color: #4338ca !important; box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.15) !important; } /* ── Classic — the bar is white (--page-title-bg), so every element that assumes a dark bar must be re-coloured: Bootstrap .text-white on titles and switch labels, and AntDesign Ghost buttons (white text + white border by default) would otherwise be invisible. Mirrors the three blocks above. ──── */ html:not([data-theme]) .page-title, html:not([data-theme]) .page-title .text-white, html:not([data-theme]) .page-title h1, html:not([data-theme]) .page-title h2, html:not([data-theme]) .page-title h3, html:not([data-theme]) .page-title h4, html:not([data-theme]) .page-title h5, html:not([data-theme]) .page-title h6 { color: var(--page-title-text) !important; } /* Filled, not outlined — the bar is light on classic, so a ghost button reads as a stray outline; a solid fill matches the other themes' weight. Fills from --btn-primary-*, not --btn-accent-*. These are ordinary primary actions (prev / next / refresh on the Sales Submission Monitor), so they belong on the global button colour; --btn-accent-* is the deliberately *different* alternate accent behind the opt-in .btn-theme-accent class, and in classic it is AntDesign's stock #1890ff, which read as off-brand next to the #4e73cb header. */ html:not([data-theme]) .page-title .ant-btn-background-ghost { background: var(--btn-primary-bg) !important; border-color: var(--btn-primary-bg) !important; color: var(--btn-primary-color) !important; } html:not([data-theme]) .page-title .ant-btn-background-ghost:hover:not(:disabled) { background: var(--btn-primary-hover-bg) !important; border-color: var(--btn-primary-hover-bg) !important; color: var(--btn-primary-color) !important; box-shadow: var(--btn-primary-hover-shadow) !important; } html:not([data-theme]) .page-title .ant-btn-background-ghost:disabled { background: var(--disabled-bg) !important; border-color: var(--disabled-text) !important; color: var(--disabled-text) !important; } html:not([data-theme]) .page-title .ant-picker { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.15) !important; } html:not([data-theme]) .page-title .ant-picker .ant-picker-input > input, html:not([data-theme]) .page-title .ant-picker .ant-picker-suffix .anticon { color: var(--page-title-text) !important; } html:not([data-theme]) .page-title .ant-picker:hover, html:not([data-theme]) .page-title .ant-picker-focused { border-color: var(--base-background, #4e73cb) !important; box-shadow: 0 0 0 2px rgba(78, 115, 203, 0.15) !important; } /* Switch labels */ html:not([data-theme]) .page-title .xsm-txt, [data-theme="huddle8"] .page-title .xsm-txt, [data-theme="dark"] .page-title .xsm-txt, [data-theme="light"] .page-title .xsm-txt { color: var(--page-title-text) !important; opacity: 0.80; } /* ═══════════════════════════════════════════════════════════════════════════ SWITCH — global per-theme overrides Base AntDesign: unchecked rgba(0,0,0,0.25) / checked #1890ff ═══════════════════════════════════════════════════════════════════════════ */ /* huddle8 — forest green checked, sage-grey unchecked */ [data-theme="huddle8"] .ant-switch { background-color: rgba(6, 56, 29, 0.20) !important; } [data-theme="huddle8"] .ant-switch-checked { background-color: #06381d !important; } [data-theme="huddle8"] .ant-switch:focus { box-shadow: 0 0 0 2px rgba(6, 56, 29, 0.15) !important; } [data-theme="huddle8"] .ant-switch-checked:focus { box-shadow: 0 0 0 2px rgba(6, 56, 29, 0.25) !important; } /* dark — indigo checked, dark-navy unchecked */ [data-theme="dark"] .ant-switch { background-color: rgba(255, 255, 255, 0.18) !important; } [data-theme="dark"] .ant-switch-checked { background-color: #4f46e5 !important; } [data-theme="dark"] .ant-switch:focus { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10) !important; } [data-theme="dark"] .ant-switch-checked:focus { box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.35) !important; } /* light — indigo checked, silver-grey unchecked */ [data-theme="light"] .ant-switch { background-color: rgba(0, 0, 0, 0.18) !important; } [data-theme="light"] .ant-switch-checked { background-color: #4338ca !important; } [data-theme="light"] .ant-switch:focus { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .ant-switch-checked:focus { box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.22) !important; } /* The nav drawer used to need a block of [data-theme="dark"] structural overrides here. It no longer does: main-menu.css paints every surface from a --nav-* token, so the dark values above are enough. Anything that still needs to differ per theme belongs in the token blocks, not in a rule down here — these overrides outranked main-menu.css and silently won. */ /* ═══════════════════════════════════════════════════════════════════════════ TABLE — color tokens scoped to .ant-table-wrapper (structural rules + size tokens come from ant-table-compact-huddle8.css) ═══════════════════════════════════════════════════════════════════════════ */ /* Classic — compact sizing from ant-table-compact-huddle8.css stays on for every theme; only the color tokens are swapped back to AntDesign default. */ /*:root:not([data-theme]) .ant-table-wrapper { --tbl-header-bg: #fafafa; --tbl-header-color: rgba(0,0,0,0.88); --tbl-border-color: #f0f0f0; --tbl-row-odd-bg: #ffffff; --tbl-row-even-bg: #ffffff; --tbl-row-hover-bg: #fafafa; --tbl-row-selected-bg: #e6f4ff; --tbl-sort-active: var(--btn-primary-bg); --tbl-accent: var(--btn-primary-bg); --tbl-accent-hover: var(--btn-primary-hover-bg); --tbl-coral: #ff7a45; --tbl-teal: #36cfc9; --tbl-gold: #faad14; --tbl-grey: #bfbfbf; --tbl-cream: #fafafa; --tbl-text: rgba(0,0,0,0.88); --tbl-muted: rgba(0,0,0,0.45); --tbl-expanded-bg: #fbfbfb; --tbl-expanded-tab: #f5f5f5; --tbl-inner-header: #fafafa; --tbl-pagination-active-shadow: 0 1px 4px rgba(22,119,255,0.35); --tbl-pagination-active-text: #ffffff;*/ /* Action icon-buttons derive from --btn-primary-* / --btn-danger-* (site.css); this theme only needs to set those. */ /*}*/ [data-theme="huddle8"] .ant-table-wrapper { --tbl-header-bg: #06381d; --tbl-header-color: #eae1d0; --tbl-border-color: #c8d4ce; --tbl-row-odd-bg: #ffffff; --tbl-row-even-bg: #f4f8f6; --tbl-row-hover-bg: #d9ede6; --tbl-row-selected-bg: #c0e3d5; --tbl-sort-active: #f48177; --tbl-accent: var(--btn-primary-bg); --tbl-accent-hover: var(--btn-primary-hover-bg); --tbl-coral: #f48177; --tbl-teal: #70bfa6; --tbl-gold: #f6b646; --tbl-grey: #a4b1ac; --tbl-cream: #eae1d0; --tbl-text: #1c2e25; --tbl-muted: #7a9085; --tbl-expanded-bg: #f0f6f3; --tbl-expanded-tab: #daeee5; --tbl-inner-header: #cde8dc; --tbl-pagination-active-shadow: 0 1px 4px rgba(6,56,29,0.30); --tbl-pagination-active-text: #ffffff; /* Action icon-buttons derive from --btn-primary-* / --btn-danger-* (site.css); this theme only needs to set those. */ } [data-theme="dark"] .ant-table-wrapper { --tbl-header-bg: #1e2636; --tbl-header-color: #a8b8d0; --tbl-border-color: #2a3347; --tbl-row-odd-bg: #141926; --tbl-row-even-bg: #191f2e; --tbl-row-hover-bg: #1e2d50; --tbl-row-selected-bg: #1a3560; --tbl-sort-active: #818cf8; --tbl-accent: #818cf8; --tbl-accent-hover: #6366f1; --tbl-accent-dark: #6366f1; --tbl-text: #cbd5e1; --tbl-muted: #4b5a72; --tbl-expanded-bg: #171d2d; --tbl-expanded-tab: #1c2338; --tbl-inner-header: #1a2236; --tbl-pagination-active-shadow: 0 1px 4px rgba(129,140,248,0.40); --tbl-pagination-active-text: #ffffff; /* Action icon-buttons derive from --btn-primary-* / --btn-danger-* (site.css); this theme only needs to set those. */ } [data-theme="light"] .ant-table-wrapper { --tbl-header-bg: #eef1f6; --tbl-header-color: #2c3e55; --tbl-border-color: #dde3eb; --tbl-row-odd-bg: #ffffff; --tbl-row-even-bg: #f7f9fc; --tbl-row-hover-bg: #e8f0fe; --tbl-row-selected-bg: #dbeafe; --tbl-sort-active: #6366f1; --tbl-accent: #4f46e5; --tbl-accent-hover: #4338ca; --tbl-text: #374151; --tbl-muted: #6b7280; --tbl-expanded-bg: #f5f7ff; --tbl-expanded-tab: #eaedfa; --tbl-inner-header: #e4e9f5; --tbl-pagination-active-shadow: 0 1px 4px rgba(99,102,241,0.35); --tbl-pagination-active-text: #ffffff; /* Action icon-buttons derive from --btn-primary-* / --btn-danger-* (site.css); this theme only needs to set those. */ } /* Dark — shadow override and popup (popconfirm/tooltip) portal tokens */ [data-theme="dark"] { --tbl-shadow: 0 1px 6px rgba(0,0,0,0.5); --pop-bg: #1c2338; --pop-border: #2a3347; --pop-shadow: 0 6px 24px rgba(0,0,0,0.60); --pop-text: #cbd5e1; --pop-title: #e2e8f0; --pop-muted: #8fa3bd; --pop-icon-warning: #f59e0b; --pop-btn-default-bg: var(--btn-default-bg); --pop-btn-default-border: #3a4760; --pop-btn-default-color: #a8b8d0; --pop-btn-default-hover-bg: rgba(129,140,248,0.10); --pop-btn-default-hover: var(--btn-default-hover); --pop-btn-primary-bg: var(--btn-primary-bg); --pop-btn-primary-hover-bg: var(--btn-primary-hover-bg); --pop-btn-danger-bg: var(--btn-danger-bg); --pop-btn-danger-hover-bg: var(--btn-danger-hover-bg); } /* Dark — table structural overrides where huddle8 base has hardcoded colors */ [data-theme="dark"] .ant-table-wrapper .ant-table, [data-theme="dark"] .ant-table-wrapper .ant-table-container { border-color: var(--tbl-border-color) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-container { border-top: 1px solid var(--tbl-border-color) !important; border-left: 1px solid var(--tbl-border-color) !important; } [data-theme="dark"] .ant-table-wrapper th.ant-table-column-sort { background: #232c42 !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-sticky-holder .ant-table-thead > tr > th { box-shadow: 0 2px 6px rgba(0,0,0,0.4); } [data-theme="dark"] .ant-table-wrapper ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] .ant-table-wrapper ::-webkit-scrollbar-track { background: var(--tbl-row-odd-bg); } [data-theme="dark"] .ant-table-wrapper ::-webkit-scrollbar-thumb { background: var(--tbl-muted); border-radius: 3px; } [data-theme="dark"] .ant-table-wrapper ::-webkit-scrollbar-thumb:hover { background: var(--tbl-accent); } [data-theme="dark"] .ant-table-wrapper ::-webkit-scrollbar-corner { background: var(--tbl-row-odd-bg); } [data-theme="dark"] .ant-table-wrapper, [data-theme="dark"] .ant-table-wrapper * { scrollbar-width: thin; scrollbar-color: var(--tbl-muted) var(--tbl-row-odd-bg); } /* Light — table shadow override */ [data-theme="light"] { --tbl-shadow: 0 1px 4px rgba(0,0,0,0.08); } /* ═══════════════════════════════════════════════════════════════════════════ DRAWER — Lease Dashboard Drawer tokens (all at :root / html level) (structural rules come from ant-drawer-huddle8.css) ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="huddle8"] { --ldd-accent: #06381d; --ldd-accent-hover: #0a5229; --ldd-coral: #f48177; --ldd-coral-hover: #e06a60; --ldd-teal: #70bfa6; --ldd-gold: #f6b646; --ldd-cream: #eae1d0; --ldd-grey: #a4b1ac; --ldd-header-bg: #06381d; --ldd-header-color: #eae1d0; --ldd-header-border: rgba(255,255,255,0.10); --ldd-body-bg: #eae1d0; --ldd-body-color: #1c2e25; --ldd-close-color: rgba(234,225,208,0.55); --ldd-close-hover: #f48177; --ldd-border: #c8d4ce; --ldd-tab-nav-bg: #06381d; --ldd-tab-nav-border: rgba(255,255,255,0.15); --ldd-tab-color: rgba(234,225,208,0.65); --ldd-tab-hover-color: #f48177; --ldd-tab-active-color: #f48177; --ldd-tab-ink-bar: #f48177; --ldd-modal-header-bg: #06381d; --ldd-modal-header-color: #eae1d0; --ldd-modal-body-bg: #eae1d0; --ldd-modal-border: rgba(255,255,255,0.10); --ldd-input-focus: rgba(6,56,29,0.15); --ldd-shadow: 0 6px 24px rgba(6,56,29,0.20); /* ── Sidebar ── */ --ldd-sidebar-bg: #f8f4ec; --ldd-sidebar-border: #c8d4ce; --ldd-sidebar-text: #1c2e25; --ldd-sidebar-muted: #7a9085; --ldd-cal-today-ring: #f48177; } [data-theme="dark"] { --ldd-accent: #818cf8; --ldd-accent-hover: #6366f1; --ldd-btn-primary: #4f46e5; --ldd-btn-primary-hover: #4338ca; --ldd-header-bg: #0d1b2e; --ldd-header-color: rgba(255,255,255,0.85); --ldd-header-border: #2a3347; --ldd-body-bg: #0d1b2e; --ldd-body-color: rgba(255,255,255,0.85); --ldd-close-color: rgba(255,255,255,0.35); --ldd-close-hover: #818cf8; --ldd-border: rgba(255,255,255,0.12); --ldd-tab-nav-bg: #0d1b2e; --ldd-tab-nav-border: #2a3347; --ldd-tab-color: rgba(255,255,255,0.65); --ldd-tab-hover-color: rgba(255,255,255,0.9); --ldd-tab-active-color: #818cf8; --ldd-tab-ink-bar: #818cf8; --ldd-modal-header-bg: #0d1b2e; --ldd-modal-header-color: rgba(255,255,255,0.85); --ldd-modal-body-bg: #0d1b2e; --ldd-modal-border: rgba(255,255,255,0.12); --ldd-input-bg: #102035; --ldd-input-focus: rgba(129,140,248,0.20); --ldd-shadow: 0 6px 24px rgba(0,0,0,0.50); /* ── Sidebar ── */ --ldd-sidebar-bg: #0c1828; --ldd-sidebar-border: rgba(255,255,255,0.10); --ldd-sidebar-text: rgba(255,255,255,0.75); --ldd-sidebar-muted: rgba(255,255,255,0.30); --ldd-cal-today-ring: #818cf8; } [data-theme="light"] { --ldd-accent: #6366f1; --ldd-accent-hover: #4338ca; --ldd-header-bg: #eef1f6; --ldd-header-color: #2c3e55; --ldd-header-border: #dde3eb; --ldd-body-bg: #ffffff; --ldd-body-color: #1f2937; --ldd-close-color: #6b7280; --ldd-close-hover: #4338ca; --ldd-border: #dde3eb; --ldd-tab-nav-bg: #ffffff; --ldd-tab-nav-border: #dde3eb; --ldd-tab-color: #374151; --ldd-tab-hover-color: #4338ca; --ldd-tab-active-color: #6366f1; --ldd-tab-ink-bar: #6366f1; --ldd-modal-header-bg: #eef1f6; --ldd-modal-header-color: #2c3e55; --ldd-modal-body-bg: #ffffff; --ldd-modal-border: #dde3eb; --ldd-input-focus: rgba(99,102,241,0.2); --ldd-shadow: 0 6px 24px rgba(0,0,0,0.10); /* ── Sidebar ── */ --ldd-sidebar-bg: #f7f9fc; --ldd-sidebar-border: #dde3eb; --ldd-sidebar-text: #374151; --ldd-sidebar-muted: #6b7280; --ldd-cal-today-ring: #4338ca; } /* Dark drawer — structural overrides (dark has extra rules for form inputs/buttons) */ [data-theme="dark"] .ant-modal.ldd-modal .ant-input, [data-theme="dark"] .ant-modal.ldd-modal textarea.ant-input, [data-theme="dark"] .ant-modal.ldd-modal .ant-input-affix-wrapper, [data-theme="dark"] .ant-modal.ldd-modal .ant-input-textarea-affix-wrapper { background: var(--ldd-input-bg) !important; border-color: rgba(255,255,255,0.2) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-modal.ldd-modal .ant-select-selector { background: var(--ldd-input-bg) !important; border-color: rgba(255,255,255,0.2) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-modal.ldd-modal .ant-picker { background: var(--ldd-input-bg) !important; border-color: rgba(255,255,255,0.2) !important; } [data-theme="dark"] .ant-modal.ldd-modal .ant-card { background: rgba(255,255,255,0.04) !important; border-color: var(--ldd-modal-border) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-modal.ldd-modal .ant-card-head { background: rgba(0,0,0,0.20) !important; border-bottom-color: var(--ldd-modal-border) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-drawer .ant-btn-default { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.2) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-drawer .ant-btn-primary { background: var(--ldd-btn-primary) !important; border-color: var(--ldd-btn-primary) !important; color: #ffffff !important; } [data-theme="dark"] .ant-drawer .ant-alert-error, [data-theme="dark"] .ant-modal.ldd-modal .ant-alert-error { background: rgba(255,77,79,0.12) !important; border-color: rgba(255,77,79,0.3) !important; } [data-theme="dark"] .ant-modal.ldd-modal .ant-checkbox-inner { background: var(--ldd-input-bg) !important; border-color: rgba(255,255,255,0.30) !important; } [data-theme="dark"] .ant-modal.ldd-modal .ant-btn-default { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.2) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-select-clear, [data-theme="dark"] .ant-drawer .ant-select-clear, [data-theme="dark"] .ant-modal.ldd-modal .ant-select-clear { background: var(--ldd-input-bg, #102035) !important; color: rgba(255,255,255,0.35) !important; } /* ═══════════════════════════════════════════════════════════════════════════ TABLE — structural overrides (dark & light) Huddle8 base hard-codes brand colors for these elements; must override. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Pagination item backgrounds (base: #ffffff) ──────────────────────────── */ [data-theme="dark"] .ant-table-wrapper .ant-pagination-item, [data-theme="dark"] .ant-table-wrapper .ant-pagination-prev, [data-theme="dark"] .ant-table-wrapper .ant-pagination-next, [data-theme="dark"] .ant-table-wrapper .ant-pagination-jump-prev, [data-theme="dark"] .ant-table-wrapper .ant-pagination-jump-next { background: var(--tbl-header-bg); } [data-theme="dark"] .ant-table-wrapper .ant-pagination-item-active { box-shadow: var(--tbl-pagination-active-shadow) !important; } [data-theme="dark"] .ant-table-wrapper .ant-pagination-options .ant-select-selector { background: var(--tbl-header-bg) !important; color: var(--tbl-text) !important; } [data-theme="dark"] .ant-table-wrapper .ant-pagination-options .ant-select-selection-item { color: var(--tbl-text); } [data-theme="dark"] .ant-table-wrapper .ant-pagination-options .ant-select-focused .ant-select-selector { box-shadow: 0 0 0 2px rgba(129,140,248,0.20) !important; } [data-theme="light"] .ant-table-wrapper .ant-pagination-item-active { box-shadow: var(--tbl-pagination-active-shadow) !important; } [data-theme="light"] .ant-table-wrapper .ant-pagination-options .ant-select-focused .ant-select-selector { box-shadow: 0 0 0 2px rgba(99,102,241,0.15) !important; } /* ── Summary row (base: #e8f2ed) ──────────────────────────────────────────── */ [data-theme="dark"] .ant-table-wrapper .ant-table-summary > tr > td, [data-theme="light"] .ant-table-wrapper .ant-table-summary > tr > td { background: var(--tbl-inner-header) !important; border-top-color: var(--tbl-accent) !important; color: var(--tbl-accent); } /* ── Expand icon (base: coral / #fff2f0) ──────────────────────────────────── */ [data-theme="dark"] .ant-table-wrapper .ant-table-row-expand-icon { background: rgba(129,140,248,0.06); border-color: var(--tbl-accent); color: var(--tbl-accent); } [data-theme="dark"] .ant-table-wrapper .ant-table-row-expand-icon:hover { background: var(--tbl-accent); } [data-theme="dark"] .ant-table-wrapper .ant-table-row-expand-icon-expanded { background: var(--tbl-accent); border-color: var(--tbl-accent-dark); } [data-theme="light"] .ant-table-wrapper .ant-table-row-expand-icon { background: rgba(99,102,241,0.06); border-color: var(--tbl-accent); color: var(--tbl-accent); } [data-theme="light"] .ant-table-wrapper .ant-table-row-expand-icon:hover { background: var(--tbl-accent); } [data-theme="light"] .ant-table-wrapper .ant-table-row-expand-icon-expanded { background: var(--tbl-accent); border-color: var(--tbl-accent-hover); } /* ── Tabs inside expanded rows (base: hardcoded cream rgba(234,225,208)) ───── */ [data-theme="dark"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-tab-btn { color: var(--tbl-muted) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-tab:hover .ant-tabs-tab-btn { color: var(--tbl-text) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-tab-active { background: rgba(129,140,248,0.12) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-tab-active .ant-tabs-tab-btn { color: var(--tbl-accent) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-ink-bar { background: var(--tbl-accent) !important; bottom: 0 !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-nav-more { color: var(--tbl-muted) !important; } [data-theme="light"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-nav { background: var(--tbl-expanded-tab) !important; border-bottom: 1px solid var(--tbl-border-color) !important; } [data-theme="light"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-nav-wrap, [data-theme="light"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-nav-list, [data-theme="light"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-nav-more { background: var(--tbl-expanded-tab) !important; } [data-theme="light"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-tab { background: rgba(0,0,0,0.03) !important; } [data-theme="light"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-tab-btn { color: #6b7280 !important; } [data-theme="light"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-tab:hover .ant-tabs-tab-btn { color: var(--tbl-accent) !important; } [data-theme="light"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-tab-active { background: rgba(99,102,241,0.08) !important; } [data-theme="light"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-tab-active .ant-tabs-tab-btn { color: var(--tbl-accent) !important; font-weight: 600; } [data-theme="light"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-ink-bar { background: var(--tbl-accent) !important; height: 2px !important; bottom: 0 !important; } [data-theme="light"] .ant-table-wrapper .ant-table-expanded-row .ant-tabs-nav-more { color: #6b7280 !important; } /* ── Editable row controls (base: #f4f8f6 bg, teal hover) ────────────────── */ [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input, [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input-affix-wrapper { background: var(--tbl-row-even-bg) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input:hover, [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input-affix-wrapper:hover { border-color: var(--tbl-accent) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input:focus, [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input-affix-wrapper-focused { border-color: var(--tbl-accent) !important; box-shadow: 0 0 0 2px rgba(129,140,248,0.20) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-picker { background: var(--tbl-row-even-bg) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-picker:hover, [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-picker-focused { border-color: var(--tbl-accent) !important; box-shadow: 0 0 0 2px rgba(129,140,248,0.20) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input-number { background: var(--tbl-row-even-bg) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input-number:hover, [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input-number-focused { border-color: var(--tbl-accent) !important; box-shadow: 0 0 0 2px rgba(129,140,248,0.20) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-select-selector { background: var(--tbl-row-even-bg) !important; } [data-theme="dark"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-select-focused .ant-select-selector { border-color: var(--tbl-accent) !important; box-shadow: 0 0 0 2px rgba(129,140,248,0.20) !important; } [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input, [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input-affix-wrapper { background: #ffffff !important; } [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input:hover, [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input-affix-wrapper:hover { border-color: var(--tbl-sort-active) !important; } [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input:focus, [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input-affix-wrapper-focused { border-color: var(--tbl-sort-active) !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.15) !important; } [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-picker { background: #ffffff !important; } [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-picker:hover, [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-picker-focused { border-color: var(--tbl-sort-active) !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.15) !important; } [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input-number { background: #ffffff !important; } [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input-number:hover, [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-input-number-focused { border-color: var(--tbl-sort-active) !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.15) !important; } [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-select-selector { background: #ffffff !important; } [data-theme="light"] .ant-table-wrapper .ant-table-tbody > tr > td .ant-select-focused .ant-select-selector { border-color: var(--tbl-sort-active) !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.15) !important; } /* Non-icon-only danger buttons need no per-theme rules: the base rule in ant-table-compact-huddle8.css uses var(--btn-danger-*). */ /* ═══════════════════════════════════════════════════════════════════════════ TABLE — column filter (portal: outside .ant-table-wrapper) Base hard-codes forest-green brand colors; override per theme. Note: --tbl-* variables scoped to .ant-table-wrapper are NOT available here. ═══════════════════════════════════════════════════════════════════════════ */ /* Filter trigger icon is inside wrapper so can use scoped vars */ [data-theme="dark"] .ant-table-wrapper .ant-table-filter-trigger.active { color: var(--tbl-accent); } [data-theme="light"] .ant-table-wrapper .ant-table-filter-trigger.active { color: var(--tbl-sort-active); } /* ── Dark ── */ [data-theme="dark"] .ant-table-filter-dropdown { background: var(--pop-bg) !important; border-color: var(--pop-border) !important; box-shadow: var(--pop-shadow); } [data-theme="dark"] .ant-table-filter-dropdown .ant-dropdown-menu { background: var(--pop-bg) !important; } [data-theme="dark"] .ant-table-filter-dropdown .ant-dropdown-menu-item { color: var(--pop-text); } [data-theme="dark"] .ant-table-filter-dropdown .ant-dropdown-menu-item:hover { background: #1e2d50 !important; } [data-theme="dark"] .ant-table-filter-dropdown .ant-table-filter-dropdown-btns { background: var(--pop-bg) !important; border-top-color: var(--pop-border); } [data-theme="dark"] .ant-table-filter-dropdown .ant-checkbox-inner { background: #141926 !important; border-color: var(--pop-border) !important; } [data-theme="dark"] .ant-table-filter-dropdown .ant-checkbox-checked .ant-checkbox-inner { background: #818cf8 !important; border-color: #818cf8 !important; } [data-theme="dark"] .ant-table-filter-dropdown .ant-checkbox-wrapper { color: var(--pop-text); } [data-theme="dark"] .ant-table-filter-dropdown .ant-select .ant-select-selector { background: #141926 !important; border-color: var(--pop-border) !important; color: var(--pop-text) !important; } [data-theme="dark"] .ant-table-filter-dropdown .ant-select-selection-item, [data-theme="dark"] .ant-table-filter-dropdown .ant-select-arrow { color: var(--pop-text) !important; } [data-theme="dark"] .ant-table-filter-dropdown .ant-select-focused .ant-select-selector { border-color: #818cf8 !important; box-shadow: 0 0 0 2px rgba(129,140,248,0.20) !important; } [data-theme="dark"] .ant-table-filter-dropdown .ant-input, [data-theme="dark"] .ant-table-filter-dropdown .ant-input-number, [data-theme="dark"] .ant-table-filter-dropdown .ant-picker { background: #141926; border-color: var(--pop-border); color: var(--pop-text); } [data-theme="dark"] .ant-table-filter-dropdown .ant-input-number-input, [data-theme="dark"] .ant-table-filter-dropdown .ant-picker-input > input { background: transparent; color: var(--pop-text); } [data-theme="dark"] .ant-table-filter-dropdown .ant-input::placeholder, [data-theme="dark"] .ant-table-filter-dropdown .ant-input-number-input::placeholder, [data-theme="dark"] .ant-table-filter-dropdown .ant-picker-input > input::placeholder { color: var(--pop-muted); } [data-theme="dark"] .ant-table-filter-dropdown .ant-input:hover, [data-theme="dark"] .ant-table-filter-dropdown .ant-input:focus, [data-theme="dark"] .ant-table-filter-dropdown .ant-input-number:hover, [data-theme="dark"] .ant-table-filter-dropdown .ant-input-number-focused, [data-theme="dark"] .ant-table-filter-dropdown .ant-picker:hover, [data-theme="dark"] .ant-table-filter-dropdown .ant-picker-focused { border-color: #818cf8 !important; box-shadow: 0 0 0 2px rgba(129,140,248,0.20) !important; } [data-theme="dark"] .ant-table-filter-dropdown .ant-picker-suffix { color: var(--pop-muted); } [data-theme="dark"] .ant-table-filter-dropdown .ant-input-number-handler-wrap { background: #191f2e; border-left-color: var(--pop-border); } [data-theme="dark"] .ant-table-filter-dropdown .ant-input-number-handler-up-inner, [data-theme="dark"] .ant-table-filter-dropdown .ant-input-number-handler-down-inner { color: var(--pop-text); } [data-theme="dark"] .ant-table-filter-dropdown .ant-btn-default { background: #191f2e; border-color: var(--pop-border); color: var(--pop-text); } [data-theme="dark"] .ant-table-filter-dropdown .ant-btn-default:hover { background: #141926; border-color: #818cf8; color: #818cf8; } /* ── Light ── */ [data-theme="light"] .ant-table-filter-dropdown { background: #ffffff !important; border-color: #dde3eb !important; } [data-theme="light"] .ant-table-filter-dropdown .ant-dropdown-menu { background: #ffffff !important; } [data-theme="light"] .ant-table-filter-dropdown .ant-dropdown-menu-item { color: #374151; } [data-theme="light"] .ant-table-filter-dropdown .ant-dropdown-menu-item:hover { background: #f0f4ff !important; } [data-theme="light"] .ant-table-filter-dropdown .ant-table-filter-dropdown-btns { background: #ffffff !important; border-top-color: #dde3eb; } [data-theme="light"] .ant-table-filter-dropdown .ant-checkbox-inner { background: #ffffff; border-color: #dde3eb; } [data-theme="light"] .ant-table-filter-dropdown .ant-checkbox-checked .ant-checkbox-inner { background: #6366f1 !important; border-color: #6366f1 !important; } [data-theme="light"] .ant-table-filter-dropdown .ant-checkbox-wrapper { color: #374151; } [data-theme="light"] .ant-table-filter-dropdown .ant-select .ant-select-selector { background: #f7f9fc !important; border-color: #dde3eb !important; color: #374151 !important; } [data-theme="light"] .ant-table-filter-dropdown .ant-select-selection-item, [data-theme="light"] .ant-table-filter-dropdown .ant-select-arrow { color: #374151 !important; } [data-theme="light"] .ant-table-filter-dropdown .ant-select-focused .ant-select-selector { border-color: #6366f1 !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.12) !important; } [data-theme="light"] .ant-table-filter-dropdown .ant-input, [data-theme="light"] .ant-table-filter-dropdown .ant-input-number, [data-theme="light"] .ant-table-filter-dropdown .ant-picker { background: #f7f9fc; border-color: #dde3eb; color: #374151; } [data-theme="light"] .ant-table-filter-dropdown .ant-input::placeholder, [data-theme="light"] .ant-table-filter-dropdown .ant-input-number-input::placeholder, [data-theme="light"] .ant-table-filter-dropdown .ant-picker-input > input::placeholder { color: #9ca3af; } [data-theme="light"] .ant-table-filter-dropdown .ant-input:hover, [data-theme="light"] .ant-table-filter-dropdown .ant-input:focus, [data-theme="light"] .ant-table-filter-dropdown .ant-input-number:hover, [data-theme="light"] .ant-table-filter-dropdown .ant-input-number-focused, [data-theme="light"] .ant-table-filter-dropdown .ant-picker:hover, [data-theme="light"] .ant-table-filter-dropdown .ant-picker-focused { border-color: #6366f1 !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.12) !important; } [data-theme="light"] .ant-table-filter-dropdown .ant-picker-suffix { color: #9ca3af; } [data-theme="light"] .ant-table-filter-dropdown .ant-btn-default { background: #ffffff; border-color: #dde3eb; color: #374151; } [data-theme="light"] .ant-table-filter-dropdown .ant-btn-default:hover { border-color: #6366f1; color: #6366f1; } /* ═══════════════════════════════════════════════════════════════════════════ DRAWER — Card-type tab structural overrides (dark & light) Base huddle8 CSS hard-codes brand alphas; override per theme. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .ant-drawer .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab, [data-theme="dark"] .ant-drawer .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab { background: var(--ldd-tab-card-bg) !important; border-color: var(--ldd-tab-card-border) !important; } [data-theme="dark"] .ant-drawer .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab:hover, [data-theme="dark"] .ant-drawer .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab:hover { background: var(--ldd-tab-card-hover-bg) !important; } [data-theme="dark"] .ant-drawer .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active, [data-theme="dark"] .ant-drawer .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active { background: var(--ldd-tab-card-active-bg) !important; border-color: var(--ldd-tab-card-active-border) !important; border-bottom-color: var(--ldd-tab-card-active-bottom-border) !important; } [data-theme="dark"] .ant-drawer .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn, [data-theme="dark"] .ant-drawer .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn { color: var(--ldd-tab-card-active-text) !important; } [data-theme="light"] .ant-drawer .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab, [data-theme="light"] .ant-drawer .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab { background: var(--ldd-tab-card-bg) !important; border-color: var(--ldd-tab-card-border) !important; } [data-theme="light"] .ant-drawer .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab:hover, [data-theme="light"] .ant-drawer .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab:hover { background: var(--ldd-tab-card-hover-bg) !important; } [data-theme="light"] .ant-drawer .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active, [data-theme="light"] .ant-drawer .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active { background: var(--ldd-tab-card-active-bg) !important; border-color: var(--ldd-tab-card-active-border) !important; border-bottom-color: var(--ldd-tab-card-active-bottom-border) !important; } [data-theme="light"] .ant-drawer .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn, [data-theme="light"] .ant-drawer .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn { color: var(--ldd-tab-card-active-text) !important; } /* ═══════════════════════════════════════════════════════════════════════════ POPOVER / POPCONFIRM — portal overrides (dark & light) Base compact-table CSS hard-codes huddle8 brand colors; override per theme. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Dark ── */ [data-theme="dark"] .ant-popover:has(.ant-popover-message) .ant-popover-inner { background: var(--pop-bg) !important; border: 1px solid var(--pop-border) !important; border-top: 3px solid var(--pop-top-border) !important; box-shadow: var(--pop-shadow) !important; color: var(--pop-text) !important; } [data-theme="dark"] .ant-popover:has(.ant-popover-message) .ant-popover-inner-content { background: var(--pop-bg) !important; } [data-theme="dark"] .ant-popover:has(.ant-popover-message) .ant-popover-arrow-content, [data-theme="dark"] .ant-popover:has(.ant-popover-message) .ant-popover-arrow::before { background: var(--pop-bg) !important; --antd-arrow-background-color: var(--pop-bg) !important; } [data-theme="dark"] .ant-popover:has(.ant-popover-message) .ant-popover-message, [data-theme="dark"] .ant-popover:has(.ant-popover-message) .ant-popover-message-title { color: var(--pop-text) !important; } [data-theme="dark"] .ant-popover:has(.ant-popover-message) .ant-popover-message-icon .anticon { color: var(--pop-icon-warning) !important; } [data-theme="dark"] .ant-popover:has(.ant-popover-message) .ant-popover-buttons .ant-btn.ant-btn-default { background: var(--pop-btn-default-bg) !important; border-color: var(--pop-btn-default-border) !important; color: var(--pop-btn-default-color) !important; } [data-theme="dark"] .ant-popover:has(.ant-popover-message) .ant-popover-buttons .ant-btn.ant-btn-default:hover { background: var(--pop-btn-default-hover-bg) !important; border-color: var(--pop-btn-default-hover) !important; color: var(--pop-btn-default-hover) !important; } [data-theme="dark"] .ant-popover:has(.ant-popover-message) .ant-popover-buttons .ant-btn.ant-btn-primary { background: var(--pop-btn-primary-bg) !important; border-color: var(--pop-btn-primary-bg) !important; color: var(--pop-btn-primary-color) !important; } [data-theme="dark"] .ant-popover:has(.ant-popover-message) .ant-popover-buttons .ant-btn.ant-btn-primary:hover { background: var(--pop-btn-primary-hover-bg) !important; border-color: var(--pop-btn-primary-hover-bg) !important; } /* ── Light ── */ [data-theme="light"] .ant-popover:has(.ant-popover-message) .ant-popover-inner { background: var(--pop-bg) !important; border: 1px solid var(--pop-border) !important; border-top: 3px solid var(--pop-top-border) !important; box-shadow: var(--pop-shadow) !important; color: var(--pop-text) !important; } [data-theme="light"] .ant-popover:has(.ant-popover-message) .ant-popover-inner-content { background: var(--pop-bg) !important; } [data-theme="light"] .ant-popover:has(.ant-popover-message) .ant-popover-arrow-content, [data-theme="light"] .ant-popover:has(.ant-popover-message) .ant-popover-arrow::before { background: var(--pop-bg) !important; --antd-arrow-background-color: var(--pop-bg) !important; } [data-theme="light"] .ant-popover:has(.ant-popover-message) .ant-popover-message, [data-theme="light"] .ant-popover:has(.ant-popover-message) .ant-popover-message-title { color: var(--pop-text) !important; } [data-theme="light"] .ant-popover:has(.ant-popover-message) .ant-popover-message-icon .anticon { color: var(--pop-icon-warning) !important; } [data-theme="light"] .ant-popover:has(.ant-popover-message) .ant-popover-buttons .ant-btn.ant-btn-default { background: var(--pop-btn-default-bg) !important; border-color: var(--pop-btn-default-border) !important; color: var(--pop-btn-default-color) !important; } [data-theme="light"] .ant-popover:has(.ant-popover-message) .ant-popover-buttons .ant-btn.ant-btn-default:hover { background: var(--pop-btn-default-hover-bg) !important; border-color: var(--pop-btn-default-hover) !important; color: var(--pop-btn-default-hover) !important; } [data-theme="light"] .ant-popover:has(.ant-popover-message) .ant-popover-buttons .ant-btn.ant-btn-primary { background: var(--pop-btn-primary-bg) !important; border-color: var(--pop-btn-primary-bg) !important; color: var(--pop-btn-primary-color) !important; } [data-theme="light"] .ant-popover:has(.ant-popover-message) .ant-popover-buttons .ant-btn.ant-btn-primary:hover { background: var(--pop-btn-primary-hover-bg) !important; border-color: var(--pop-btn-primary-hover-bg) !important; } /* ═══════════════════════════════════════════════════════════════════════════ TOOLTIP — portal overrides (dark & light) Base compact-table CSS hard-codes huddle8 brand colors; override per theme. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .ant-tooltip .ant-tooltip-inner, [data-theme="light"] .ant-tooltip .ant-tooltip-inner { background: var(--tooltip-bg) !important; color: var(--tooltip-color) !important; border: 1px solid var(--tooltip-border) !important; box-shadow: var(--tooltip-shadow) !important; } [data-theme="dark"] .ant-tooltip .ant-tooltip-arrow-content, [data-theme="dark"] .ant-tooltip .ant-tooltip-arrow::before, [data-theme="light"] .ant-tooltip .ant-tooltip-arrow-content, [data-theme="light"] .ant-tooltip .ant-tooltip-arrow::before { background: var(--tooltip-bg) !important; --antd-arrow-background-color: var(--tooltip-bg) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SELECT DROPDOWN — portal overrides (dark & light) Base compact-table CSS hard-codes huddle8 brand colors; override per theme. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .ant-select-dropdown, [data-theme="light"] .ant-select-dropdown { background: var(--select-dd-bg) !important; border: 1px solid var(--select-dd-border) !important; box-shadow: var(--select-dd-shadow) !important; } [data-theme="dark"] .ant-select-dropdown .ant-select-item, [data-theme="light"] .ant-select-dropdown .ant-select-item { color: var(--select-dd-item-color) !important; } [data-theme="dark"] .ant-select-dropdown .ant-select-item-option-active, [data-theme="dark"] .ant-select-dropdown .ant-select-item-option-selected, [data-theme="light"] .ant-select-dropdown .ant-select-item-option-active, [data-theme="light"] .ant-select-dropdown .ant-select-item-option-selected { background: var(--select-dd-active-bg) !important; color: var(--select-dd-active-color) !important; } /* ═══════════════════════════════════════════════════════════════════════════ DRAWER — Calendar body + chart SVG text + legend pill theme overrides components.css provides the structural rules; these add per-theme colour. ═══════════════════════════════════════════════════════════════════════════ */ /* Calendar panel background */ [data-theme="huddle8"] .ldd-sidebar-card .ant-picker-panel, [data-theme="huddle8"] .ldd-sidebar-card .ant-picker-calendar, [data-theme="huddle8"] .ldd-sidebar-card .ant-picker-date-panel, [data-theme="huddle8"] .ldd-sidebar-card .ant-picker-body, [data-theme="huddle8"] .ldd-sidebar-card .ant-picker-content, [data-theme="dark"] .ldd-sidebar-card .ant-picker-panel, [data-theme="dark"] .ldd-sidebar-card .ant-picker-calendar, [data-theme="dark"] .ldd-sidebar-card .ant-picker-date-panel, [data-theme="dark"] .ldd-sidebar-card .ant-picker-body, [data-theme="dark"] .ldd-sidebar-card .ant-picker-content, [data-theme="light"] .ldd-sidebar-card .ant-picker-panel, [data-theme="light"] .ldd-sidebar-card .ant-picker-calendar, [data-theme="light"] .ldd-sidebar-card .ant-picker-date-panel, [data-theme="light"] .ldd-sidebar-card .ant-picker-body, [data-theme="light"] .ldd-sidebar-card .ant-picker-content { background: var(--ldd-sidebar-bg) !important; } /* Weekday header row */ [data-theme="huddle8"] .ldd-sidebar-card .ant-picker-content th, [data-theme="dark"] .ldd-sidebar-card .ant-picker-content th, [data-theme="light"] .ldd-sidebar-card .ant-picker-content th { color: var(--ldd-sidebar-muted) !important; font-size: 10px; font-weight: 600; } /* Day number in default (no-status) cells */ [data-theme="huddle8"] .ldd-sidebar-card .ant-picker-calendar-date-value, [data-theme="dark"] .ldd-sidebar-card .ant-picker-calendar-date-value, [data-theme="light"] .ldd-sidebar-card .ant-picker-calendar-date-value { color: var(--ldd-sidebar-text) !important; } /* Dim adjacent-month cells */ [data-theme="huddle8"] .ldd-sidebar-card .ant-picker-cell:not(.ant-picker-cell-in-view), [data-theme="dark"] .ldd-sidebar-card .ant-picker-cell:not(.ant-picker-cell-in-view), [data-theme="light"] .ldd-sidebar-card .ant-picker-cell:not(.ant-picker-cell-in-view) { opacity: 0.28; } /* Chart SVG axis text */ [data-theme="huddle8"] .ldd-chart-container svg text, [data-theme="dark"] .ldd-chart-container svg text, [data-theme="light"] .ldd-chart-container svg text { fill: var(--ldd-sidebar-text) !important; } /* Legend pills — per-theme accent tint */ [data-theme="huddle8"] .ldd-legend-pill { border-color: rgba(6, 56, 29, 0.22); background: rgba(6, 56, 29, 0.06); color: var(--ldd-sidebar-text); } [data-theme="dark"] .ldd-legend-pill { border-color: rgba(129, 140, 248, 0.28); background: rgba(129, 140, 248, 0.07); color: var(--ldd-sidebar-text); } [data-theme="light"] .ldd-legend-pill { border-color: rgba(99, 102, 241, 0.24); background: rgba(99, 102, 241, 0.05); color: var(--ldd-sidebar-text); } /* ═══════════════════════════════════════════════════════════════════════════ CARD SURFACES — per-theme overrides Classic base lives in site.css. See the --card-* group there. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="huddle8"] { --btn-accent-soft: rgba(244,129,119,0.12); --disabled-text: rgba(6,56,29,0.30); --disabled-bg: rgba(6,56,29,0.05); } [data-theme="dark"] { --btn-accent-soft: rgba(129,140,248,0.14); --disabled-text: rgba(255,255,255,0.30); --disabled-bg: rgba(255,255,255,0.05); } [data-theme="light"] { --btn-accent-soft: rgba(67,56,202,0.10); --disabled-text: rgba(55,65,81,0.35); --disabled-bg: rgba(67,56,202,0.05); } [data-theme="huddle8"] { --card-bg: #ffffff; --card-border: #c8d4ce; --card-head-bg: rgba(6,56,29,0.06); --card-head-border: #c8d4ce; --card-head-color: #06381d; --card-body-color: #1c2e25; } [data-theme="dark"] { --card-bg: #141926; --card-border: rgba(255,255,255,0.12); --card-head-bg: #1e2636; --card-head-border: rgba(255,255,255,0.12); --card-head-color: rgba(255,255,255,0.85); --card-body-color: rgba(255,255,255,0.85); } [data-theme="light"] { --card-bg: #ffffff; --card-border: #dde3eb; --card-head-bg: #eef1f6; --card-head-border: #dde3eb; --card-head-color: #374151; --card-body-color: #374151; } /* ═══════════════════════════════════════════════════════════════════════════ FILTER FORM SIDER — per-theme overrides Classic base lives in site.css; ant-filter-form-huddle8.css holds structure only. Each theme below restates the full --ff-* set. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="huddle8"] { --ff-sider-bg: #fdfaf5; /* very light cream — sits beside white table */ --ff-sider-border: #c8d4ce; --ff-text: #1c2e25; --ff-muted: #7a9085; --ff-card-titled-head: rgba(6,56,29,0.07); --ff-card-title-color: #06381d; --ff-card-border: #d4e0da; --ff-input-bg: #ffffff; --ff-input-border: #c8d4ce; --ff-input-focus-ring: rgba(6,56,29,0.12); --ff-input-hover: #70bfa6; /* teal on hover */ --ff-input-focus: #06381d; /* forest green on focus */ --ff-cb-checked-bg: var(--btn-primary-bg); --ff-accent: var(--btn-primary-bg); --ff-btn-primary-bg: var(--btn-primary-bg); --ff-btn-primary-hover: var(--btn-primary-hover-bg); --ff-btn-shadow: var(--btn-primary-shadow); --ff-btn-primary-hover-shadow: var(--btn-primary-hover-shadow); --ff-btn-default-hover: #f48177; /* coral — deliberate exception */ --ff-toggle-hover-bg: rgba(6,56,29,0.06); } [data-theme="dark"] { --ff-sider-bg: #0d1b2e; --ff-sider-border: rgba(255,255,255,0.10); --ff-text: rgba(255,255,255,0.85); --ff-muted: rgba(255,255,255,0.35); --ff-card-titled-head: rgba(255,255,255,0.05); --ff-card-title-color: #818cf8; --ff-card-border: rgba(255,255,255,0.12); --ff-input-bg: #102035; --ff-input-border: rgba(255,255,255,0.18); --ff-input-focus-ring: rgba(129,140,248,0.20); --ff-input-hover: #818cf8; --ff-input-focus: #818cf8; --ff-cb-checked-bg: var(--btn-primary-bg); --ff-accent: #818cf8; /* lighter indigo — hover/indeterminate */ --ff-btn-primary-bg: var(--btn-primary-bg); --ff-btn-primary-hover: var(--btn-primary-hover-bg); --ff-btn-shadow: var(--btn-primary-shadow); --ff-btn-primary-hover-shadow: var(--btn-primary-hover-shadow); --ff-btn-default-hover: #818cf8; --ff-toggle-hover-bg: rgba(129,140,248,0.08); } [data-theme="light"] { --ff-sider-bg: #f7f9fc; --ff-sider-border: #dde3eb; --ff-text: #374151; --ff-muted: #9ca3af; --ff-card-titled-head: rgba(67,56,202,0.06); --ff-card-title-color: #4338ca; --ff-card-border: #dde3eb; --ff-input-bg: #ffffff; --ff-input-border: #dde3eb; --ff-input-focus-ring: rgba(99,102,241,0.15); --ff-input-hover: #6366f1; --ff-input-focus: #4338ca; --ff-cb-checked-bg: var(--btn-primary-bg); --ff-accent: var(--btn-primary-bg); --ff-btn-primary-bg: var(--btn-primary-bg); --ff-btn-primary-hover: var(--btn-primary-hover-bg); --ff-btn-shadow: var(--btn-primary-shadow); --ff-btn-primary-hover-shadow: var(--btn-primary-hover-shadow); --ff-btn-default-hover: var(--btn-default-hover); --ff-toggle-hover-bg: rgba(67,56,202,0.06); } /* Dark sider — structural overrides (base hard-codes white/cream) */ [data-theme="dark"] .ant-layout-sider .ant-btn-text { color: rgba(255,255,255,0.35) !important; } [data-theme="dark"] .ant-layout-sider .ant-btn-text:hover { color: #818cf8 !important; background: rgba(129,140,248,0.08) !important; } [data-theme="dark"] .ff-colon-right .ant-btn-default, [data-theme="dark"] .ant-layout-sider .ant-btn-default:not(.ant-btn-text) { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ff-colon-right .ant-btn-default:hover, [data-theme="dark"] .ant-layout-sider .ant-btn-default:not(.ant-btn-text):hover { border-color: #818cf8 !important; color: #818cf8 !important; } [data-theme="dark"] .ff-colon-right .ant-spin-dot-item { background: rgba(255,255,255,0.85) !important; } /* Disabled form controls — AntDesign defaults: bg #f5f5f5 + color rgba(0,0,0,.25) */ [data-theme="dark"] .ff-colon-right .ant-input[disabled], [data-theme="dark"] .ff-colon-right .ant-input-affix-wrapper-disabled, [data-theme="dark"] .ff-colon-right .ant-input-affix-wrapper-disabled .ant-input { background-color: var(--ff-input-bg) !important; color: rgba(255,255,255,0.60) !important; border-color: var(--ff-input-border) !important; } [data-theme="dark"] .ff-colon-right .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { background: var(--ff-input-bg) !important; color: rgba(255,255,255,0.60) !important; } [data-theme="dark"] .ff-colon-right .ant-select-disabled .ant-select-selection-item { color: rgba(255,255,255,0.60) !important; } [data-theme="dark"] .ff-colon-right .ant-picker.ant-picker-disabled { background: var(--ff-input-bg) !important; border-color: var(--ff-input-border) !important; } [data-theme="dark"] .ff-colon-right .ant-picker.ant-picker-disabled input, [data-theme="dark"] .ff-colon-right .ant-picker-disabled .ant-picker-input > input { color: rgba(255,255,255,0.60) !important; } /* [DisplayOnly] fields render as — override with !important */ [data-theme="dark"] .ff-colon-right .ant-form-item-control-input-content > span { color: rgba(255,255,255,0.85) !important; } /* Light sider — collapse toggle */ [data-theme="light"] .ant-layout-sider .ant-btn-text { color: #9ca3af !important; } [data-theme="light"] .ant-layout-sider .ant-btn-text:hover { color: #4338ca !important; background: rgba(67,56,202,0.06) !important; } /* Disabled form controls — light theme (ensure brand colours, not AntD grey) */ [data-theme="light"] .ff-colon-right .ant-input[disabled], [data-theme="light"] .ff-colon-right .ant-input-affix-wrapper-disabled, [data-theme="light"] .ff-colon-right .ant-input-affix-wrapper-disabled .ant-input { background-color: var(--ff-input-bg) !important; color: rgba(55,65,81,0.60) !important; border-color: var(--ff-input-border) !important; } [data-theme="light"] .ff-colon-right .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { background: var(--ff-input-bg) !important; color: rgba(55,65,81,0.60) !important; } [data-theme="light"] .ff-colon-right .ant-select-disabled .ant-select-selection-item { color: rgba(55,65,81,0.60) !important; } [data-theme="light"] .ff-colon-right .ant-picker.ant-picker-disabled { background: var(--ff-input-bg) !important; border-color: var(--ff-input-border) !important; } [data-theme="light"] .ff-colon-right .ant-picker.ant-picker-disabled input, [data-theme="light"] .ff-colon-right .ant-picker-disabled .ant-picker-input > input { color: rgba(55,65,81,0.60) !important; } [data-theme="light"] .ff-colon-right .ant-form-item-control-input-content > span { color: #374151 !important; } /* ═══════════════════════════════════════════════════════════════════════════ MAIN CONTENT AREA — dark & light overrides Base (ant-main-content-huddle8.css) hard-codes Huddle8 brand colors. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --mc-bg: #0d1b2e; --mc-text: rgba(255,255,255,0.85); --mc-muted: rgba(255,255,255,0.35); --mc-border: rgba(255,255,255,0.12); --mc-tab-nav-bg: #0d1b2e; --mc-tab-nav-border: rgba(255,255,255,0.12); --mc-tab-color: rgba(255,255,255,0.55); --mc-tab-hover-color: rgba(255,255,255,0.90); --mc-tab-active-color: #818cf8; --mc-tab-ink-bar: #818cf8; --mc-tab-content-bg: #0d1b2e; --mc-tab-card-bg: rgba(255,255,255,0.05); --mc-tab-card-border: rgba(255,255,255,0.12); --mc-tab-card-hover-bg: rgba(255,255,255,0.10); --mc-tab-card-active-bg: #1e2d50; --mc-tab-card-active-txt: #818cf8; --mc-alert-warning-bg: rgba(246,182,70,0.10); --mc-alert-warning-bdr: rgba(246,182,70,0.30); --mc-alert-error-bg: rgba(244,129,119,0.10); --mc-alert-error-bdr: rgba(244,129,119,0.30); --mc-alert-info-bg: rgba(112,191,166,0.10); --mc-alert-info-bdr: rgba(112,191,166,0.30); --mc-alert-success-bg: rgba(6,56,29,0.15); --mc-alert-success-bdr: rgba(6,56,29,0.40); --mc-tag-blue-bg: rgba(129,140,248,0.10); --mc-tag-blue-color: #818cf8; --mc-tag-blue-border: rgba(129,140,248,0.30); --mc-tag-orange-bg: rgba(246,182,70,0.10); --mc-tag-orange-color: #f6b646; --mc-tag-orange-border: rgba(246,182,70,0.30); /* Action buttons */ --mc-btn-primary-bg: #4f46e5; --mc-btn-primary-hover: #4338ca; --mc-btn-primary-color: #ffffff; --mc-btn-default-bg: rgba(255,255,255,0.06); --mc-btn-default-border: rgba(255,255,255,0.18); --mc-btn-default-color: rgba(255,255,255,0.85); --mc-btn-default-hover-border: #818cf8; --mc-btn-default-hover-color: #818cf8; --mc-btn-danger-bg: #b91c1c; --mc-btn-danger-hover: #991b1b; --mc-btn-danger-color: #ffffff; } [data-theme="light"] { --mc-bg: #f5f7ff; --mc-text: #374151; --mc-muted: #6b7280; --mc-border: #dde3eb; --mc-tab-nav-bg: #eef1f6; --mc-tab-nav-border: #dde3eb; --mc-tab-color: #374151; --mc-tab-hover-color: #4338ca; --mc-tab-active-color: #4338ca; --mc-tab-ink-bar: #6366f1; --mc-tab-content-bg: #ffffff; --mc-tab-card-bg: #f0f2f5; --mc-tab-card-border: #dde3eb; --mc-tab-card-hover-bg: #e8eaf0; --mc-tab-card-active-bg: #ffffff; --mc-tab-card-active-txt: #4338ca; --mc-alert-warning-bg: #fffbf0; --mc-alert-warning-bdr: #f59e0b; --mc-alert-error-bg: #fef2f2; --mc-alert-error-bdr: #ef4444; --mc-alert-info-bg: #f0f4ff; --mc-alert-info-bdr: #6366f1; --mc-alert-success-bg: #f0fff4; --mc-alert-success-bdr: #16a34a; --mc-tag-blue-bg: #e8f0fe; --mc-tag-blue-color: #4338ca; --mc-tag-blue-border: #c7d2fe; --mc-tag-orange-bg: #fff8e8; --mc-tag-orange-color: #b45309; --mc-tag-orange-border: #fde68a; /* Action buttons */ --mc-btn-primary-bg: #4338ca; --mc-btn-primary-hover: #3730a3; --mc-btn-primary-color: #ffffff; --mc-btn-default-bg: #ffffff; --mc-btn-default-border: #dde3eb; --mc-btn-default-color: #374151; --mc-btn-default-hover-border: #6366f1; --mc-btn-default-hover-color: #4338ca; --mc-btn-danger-bg: #ef4444; --mc-btn-danger-hover: #dc2626; --mc-btn-danger-color: #ffffff; } /* Dark — structural content overrides */ [data-theme="dark"] .ant-layout-content .ant-alert-warning .ant-alert-message { color: #d4a820 !important; } [data-theme="dark"] .ant-layout-content .ant-alert-error .ant-alert-message { color: #f48177 !important; } [data-theme="dark"] .ant-layout-content .ant-alert-info .ant-alert-message { color: #70bfa6 !important; } [data-theme="dark"] .ant-layout-content .ant-alert-success .ant-alert-message { color: #34d399 !important; } [data-theme="dark"] .ant-layout-sider ~ .ant-layout { background: var(--mc-bg) !important; } /* Light — structural content overrides */ [data-theme="light"] .ant-layout-content .ant-alert-warning .ant-alert-message { color: #92400e !important; } [data-theme="light"] .ant-layout-content .ant-alert-error .ant-alert-message { color: #dc2626 !important; } [data-theme="light"] .ant-layout-content .ant-alert-info .ant-alert-message { color: #4338ca !important; } [data-theme="light"] .ant-layout-content .ant-alert-success .ant-alert-message { color: #16a34a !important; } [data-theme="light"] .ant-layout-sider ~ .ant-layout { background: var(--mc-bg) !important; } /* Content area scrollbar — hover accent (base --mc-accent is forest green, wrong on dark/light) */ [data-theme="dark"] .ant-layout-content::-webkit-scrollbar-track { background: #0d1b2e; } [data-theme="dark"] .ant-layout-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.20); border-radius: 3px; } [data-theme="dark"] .ant-layout-content::-webkit-scrollbar-thumb:hover { background: #818cf8 !important; } [data-theme="dark"] .ant-layout-content { scrollbar-color: rgba(255,255,255,0.20) #0d1b2e; } [data-theme="dark"] .ant-layout-sider ~ .ant-layout::-webkit-scrollbar-track { background: #0d1b2e; } [data-theme="dark"] .ant-layout-sider ~ .ant-layout::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.20); border-radius: 3px; } [data-theme="dark"] .ant-layout-sider ~ .ant-layout::-webkit-scrollbar-thumb:hover { background: #818cf8 !important; } [data-theme="light"] .ant-layout-content::-webkit-scrollbar-track { background: #f5f7ff; } [data-theme="light"] .ant-layout-content::-webkit-scrollbar-thumb { background: #c5cadb; border-radius: 3px; } [data-theme="light"] .ant-layout-content::-webkit-scrollbar-thumb:hover { background: #6366f1 !important; } [data-theme="light"] .ant-layout-content { scrollbar-color: #c5cadb #f5f7ff; } [data-theme="light"] .ant-layout-sider ~ .ant-layout::-webkit-scrollbar-track { background: #f5f7ff; } [data-theme="light"] .ant-layout-sider ~ .ant-layout::-webkit-scrollbar-thumb { background: #c5cadb; border-radius: 3px; } [data-theme="light"] .ant-layout-sider ~ .ant-layout::-webkit-scrollbar-thumb:hover { background: #6366f1 !important; } /* Scrollable-content wrapper div — per-theme scrollbar overrides (base styles in components.css use --mc-bg / --mc-muted; only accent hover needs overriding) */ [data-theme="dark"] .scrollable-content::-webkit-scrollbar-track { background: #0d1b2e; } [data-theme="dark"] .scrollable-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.20); border-radius: 3px; } [data-theme="dark"] .scrollable-content::-webkit-scrollbar-thumb:hover { background: #818cf8 !important; } [data-theme="dark"] .scrollable-content::-webkit-scrollbar-corner { background: #0d1b2e; } [data-theme="dark"] .scrollable-content { scrollbar-color: rgba(255,255,255,0.20) #0d1b2e; } [data-theme="light"] .scrollable-content::-webkit-scrollbar-track { background: #f5f7ff; } [data-theme="light"] .scrollable-content::-webkit-scrollbar-thumb { background: #c5cadb; border-radius: 3px; } [data-theme="light"] .scrollable-content::-webkit-scrollbar-thumb:hover { background: #6366f1 !important; } [data-theme="light"] .scrollable-content::-webkit-scrollbar-corner { background: #f5f7ff; } [data-theme="light"] .scrollable-content { scrollbar-color: #c5cadb #f5f7ff; } /* Dark — action button box-shadow (base uses green-tinted shadow) */ [data-theme="dark"] .ant-layout-content .ant-btn-primary { box-shadow: 0 1px 4px rgba(79,70,229,0.35) !important; } [data-theme="dark"] .ant-layout-content .ant-btn-dangerous, [data-theme="dark"] .ant-layout-content .ant-btn-primary.ant-btn-dangerous { box-shadow: 0 1px 4px rgba(239,68,68,0.35) !important; } /* Light — action button box-shadow */ [data-theme="light"] .ant-layout-content .ant-btn-primary { box-shadow: 0 1px 4px rgba(67,56,202,0.30) !important; } [data-theme="light"] .ant-layout-content .ant-btn-dangerous, [data-theme="light"] .ant-layout-content .ant-btn-primary.ant-btn-dangerous { box-shadow: 0 1px 4px rgba(239,68,68,0.30) !important; } /* Dark — table empty-state image filter (base: green-sepia tint, wrong on dark bg) */ [data-theme="dark"] .ant-table-wrapper .ant-table-placeholder .ant-empty-image { filter: grayscale(1) brightness(0.4) opacity(0.45) !important; } /* Light — table empty-state image filter (neutral grey, no green tint) */ [data-theme="light"] .ant-table-wrapper .ant-table-placeholder .ant-empty-image { filter: grayscale(1) brightness(0.80) opacity(0.55) !important; } /* Classic — table empty-state image filter (AntDesign default grey, no tint) */ :root:not([data-theme]) .ant-table-wrapper .ant-table-placeholder .ant-empty-image { filter: none !important; } /* Light tab structural (dark nav strip is replaced with a light header) */ [data-theme="light"] .ant-layout-content > .ant-tabs > .ant-tabs-nav { background: var(--mc-tab-nav-bg) !important; border-bottom: 2px solid var(--mc-tab-ink-bar) !important; } [data-theme="light"] .ant-layout-content > .ant-tabs .ant-tabs-nav-wrap, [data-theme="light"] .ant-layout-content > .ant-tabs .ant-tabs-nav-list { background: var(--mc-tab-nav-bg) !important; } [data-theme="light"] .ant-layout-content > .ant-tabs .ant-tabs-tab { background: rgba(0,0,0,0.03) !important; } [data-theme="light"] .ant-layout-content > .ant-tabs .ant-tabs-tab-btn { color: var(--mc-tab-color) !important; } [data-theme="light"] .ant-layout-content > .ant-tabs .ant-tabs-tab:hover .ant-tabs-tab-btn { color: var(--mc-tab-hover-color) !important; } [data-theme="light"] .ant-layout-content > .ant-tabs .ant-tabs-tab-active .ant-tabs-tab-btn { color: var(--mc-tab-active-color) !important; } [data-theme="light"] .ant-layout-content > .ant-tabs .ant-tabs-ink-bar { background: var(--mc-tab-ink-bar) !important; height: 2px !important; bottom: 0 !important; } [data-theme="light"] .ant-layout-content > .ant-tabs .ant-tabs-nav-more { color: var(--mc-tab-color) !important; background: var(--mc-tab-nav-bg) !important; } /* ═══════════════════════════════════════════════════════════════════════════ TRANSFER — dark & light overrides Base (ant-main-content-huddle8.css) sets Huddle8 brand colors via CSS custom properties scoped to .ant-transfer. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .ant-transfer { --tf-accent: #818cf8; --tf-accent-hover: #6366f1; --tf-teal: #818cf8; --tf-coral: #818cf8; --tf-panel-bg: #141926; --tf-panel-border: #2a3347; --tf-panel-shadow: 0 2px 8px rgba(0,0,0,0.40); --tf-header-bg: #1e2636; --tf-header-color: rgba(255,255,255,0.85); --tf-header-border: #2a3347; --tf-body-bg: #141926; --tf-text: rgba(255,255,255,0.85); --tf-muted: rgba(255,255,255,0.40); --tf-item-hover-bg: #1e2d50; --tf-item-checked-bg: #1a3560; --tf-item-checked-color: rgba(255,255,255,0.95); --tf-item-disabled-color: rgba(255,255,255,0.22); --tf-search-bg: #191f2e; --tf-search-border: #2a3347; --tf-search-focus: rgba(129,140,248,0.20); --tf-op-bg: #4f46e5; --tf-op-hover: #4338ca; --tf-op-disabled-bg: #2a3347; --tf-cb-checked-bg: #818cf8; --tf-cb-border: rgba(255,255,255,0.20); --tf-footer-bg: #191f2e; --tf-footer-border: #2a3347; --tf-empty-color: rgba(255,255,255,0.35); } /* Dark — structural overrides */ /* AntDesign sets color: rgba(0,0,0,.85) directly on .ant-checkbox-wrapper, which beats inherited color from the parent li — so we must override it explicitly here. */ [data-theme="dark"] .ant-transfer .ant-checkbox-wrapper { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-transfer .ant-transfer-list-header .ant-checkbox-inner { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.30) !important; } [data-theme="dark"] .ant-transfer .ant-transfer-list-header .ant-checkbox-checked .ant-checkbox-inner, [data-theme="dark"] .ant-transfer .ant-transfer-list-header .ant-checkbox-indeterminate .ant-checkbox-inner { background: #818cf8 !important; border-color: #818cf8 !important; } [data-theme="dark"] .ant-transfer .ant-transfer-list-header .ant-checkbox-indeterminate .ant-checkbox-inner::after { background-color: #ffffff !important; } [data-theme="dark"] .ant-transfer .ant-transfer-list-header-selected { color: rgba(255,255,255,0.50) !important; } [data-theme="dark"] .ant-transfer .ant-transfer-list-search .ant-input { color: var(--tf-text) !important; } [data-theme="dark"] .ant-transfer .ant-transfer-list-content-item .ant-checkbox-inner { background: #141926 !important; border-color: rgba(255,255,255,0.20) !important; } [data-theme="dark"] .ant-transfer .ant-transfer-list-content-item .ant-checkbox-checked .ant-checkbox-inner { background: #818cf8 !important; border-color: #818cf8 !important; } [data-theme="dark"] .ant-transfer .ant-transfer-list-content::-webkit-scrollbar-track { background: #141926; } [data-theme="dark"] .ant-transfer .ant-transfer-list-content::-webkit-scrollbar-thumb { background: #2a3347; } [data-theme="dark"] .ant-transfer .ant-transfer-list-content::-webkit-scrollbar-thumb:hover { background: #818cf8; } [data-theme="dark"] .ant-transfer .ant-transfer-list-content { scrollbar-color: #2a3347 #141926; } [data-theme="light"] .ant-transfer { --tf-accent: #4338ca; --tf-accent-hover: #3730a3; --tf-teal: #6366f1; --tf-coral: #4338ca; --tf-panel-bg: #ffffff; --tf-panel-border: #dde3eb; --tf-panel-shadow: 0 2px 8px rgba(0,0,0,0.06); --tf-header-bg: #eef1f6; --tf-header-color: #2c3e55; --tf-header-border: #dde3eb; --tf-body-bg: #ffffff; --tf-text: #374151; --tf-muted: #9ca3af; --tf-item-hover-bg: #e8f0fe; --tf-item-checked-bg: #dbeafe; --tf-item-checked-color: #4338ca; --tf-item-disabled-color: #d1d5db; --tf-search-bg: #f7f9fc; --tf-search-border: #dde3eb; --tf-search-focus: rgba(99,102,241,0.15); --tf-op-bg: #4338ca; --tf-op-hover: #3730a3; --tf-op-disabled-bg: #e5e7eb; --tf-cb-checked-bg: #4338ca; --tf-cb-border: #dde3eb; --tf-footer-bg: #f7f9fc; --tf-footer-border: #dde3eb; --tf-empty-color: #9ca3af; } /* Light — structural overrides */ [data-theme="light"] .ant-transfer .ant-checkbox-wrapper { color: #374151 !important; } [data-theme="light"] .ant-transfer .ant-transfer-list-header .ant-checkbox-inner { background: rgba(255,255,255,0.60) !important; border-color: rgba(44,62,85,0.30) !important; } [data-theme="light"] .ant-transfer .ant-transfer-list-header .ant-checkbox-checked .ant-checkbox-inner, [data-theme="light"] .ant-transfer .ant-transfer-list-header .ant-checkbox-indeterminate .ant-checkbox-inner { background: #4338ca !important; border-color: #4338ca !important; } [data-theme="light"] .ant-transfer .ant-transfer-list-header .ant-checkbox-indeterminate .ant-checkbox-inner::after { background-color: #ffffff !important; } [data-theme="light"] .ant-transfer .ant-transfer-list-header-selected { color: rgba(44,62,85,0.60) !important; } [data-theme="light"] .ant-transfer .ant-transfer-list-content-item .ant-checkbox-checked .ant-checkbox-inner { background: #4338ca !important; border-color: #4338ca !important; } [data-theme="light"] .ant-transfer .ant-transfer-list-content::-webkit-scrollbar-track { background: #ffffff; } [data-theme="light"] .ant-transfer .ant-transfer-list-content::-webkit-scrollbar-thumb { background: #dde3eb; } [data-theme="light"] .ant-transfer .ant-transfer-list-content::-webkit-scrollbar-thumb:hover { background: #4338ca; } [data-theme="light"] .ant-transfer .ant-transfer-list-content { scrollbar-color: #dde3eb #ffffff; } /* ═══════════════════════════════════════════════════════════════════════════ SELECT DROPDOWN — scrollbar per theme (portal: body-level) Base AntDesign renders the list with the browser default scrollbar. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="huddle8"] .ant-select-dropdown ::-webkit-scrollbar { width: 5px; height: 5px; } [data-theme="huddle8"] .ant-select-dropdown ::-webkit-scrollbar-track { background: #ffffff; } [data-theme="huddle8"] .ant-select-dropdown ::-webkit-scrollbar-thumb { background: #c8d4ce; border-radius: 3px; } [data-theme="huddle8"] .ant-select-dropdown ::-webkit-scrollbar-thumb:hover { background: #06381d; } [data-theme="huddle8"] .ant-select-dropdown { scrollbar-width: thin; scrollbar-color: #c8d4ce #ffffff; } [data-theme="dark"] .ant-select-dropdown ::-webkit-scrollbar { width: 5px; height: 5px; } [data-theme="dark"] .ant-select-dropdown ::-webkit-scrollbar-track { background: var(--select-dd-bg); } [data-theme="dark"] .ant-select-dropdown ::-webkit-scrollbar-thumb { background: #2a3347; border-radius: 3px; } [data-theme="dark"] .ant-select-dropdown ::-webkit-scrollbar-thumb:hover { background: #818cf8; } [data-theme="dark"] .ant-select-dropdown { scrollbar-width: thin; scrollbar-color: #2a3347 var(--select-dd-bg); } [data-theme="light"] .ant-select-dropdown ::-webkit-scrollbar { width: 5px; height: 5px; } [data-theme="light"] .ant-select-dropdown ::-webkit-scrollbar-track { background: #ffffff; } [data-theme="light"] .ant-select-dropdown ::-webkit-scrollbar-thumb { background: #dde3eb; border-radius: 3px; } [data-theme="light"] .ant-select-dropdown ::-webkit-scrollbar-thumb:hover { background: #6366f1; } [data-theme="light"] .ant-select-dropdown { scrollbar-width: thin; scrollbar-color: #dde3eb #ffffff; } /* ═══════════════════════════════════════════════════════════════════════════ DATE PICKER CALENDAR — classic, dark & light portal overrides Base huddle8 styles (hardcoded brand colors) live in ant-table-compact-huddle8.css under [data-theme="huddle8"] .ant-picker-dropdown. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Classic (no data-theme) — AntDesign default blue ─────────────────────── */ :root:not([data-theme]) .ant-picker-dropdown .ant-picker-panel-container { background: #ffffff !important; border: 1px solid #d9d9d9 !important; border-top: 3px solid #1677ff !important; box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-range-arrow::before { background: #1677ff !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-panel { background: #ffffff !important; border-color: #d9d9d9 !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-header { background: #fafafa !important; border-bottom: 1px solid #f0f0f0 !important; color: rgba(0,0,0,0.88) !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-header button { color: rgba(0,0,0,0.88) !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-header button:hover { color: #1677ff !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-content th { color: rgba(0,0,0,0.45) !important; font-size: 11px; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell { color: rgba(0,0,0,0.25) !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-in-view { color: rgba(0,0,0,0.88) !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-inner { border-radius: 3px; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner { background: #f0f6ff !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner, :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-range-start .ant-picker-cell-inner, :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-range-end .ant-picker-cell-inner { background: #1677ff !important; color: #ffffff !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-in-range .ant-picker-cell-inner { background: rgba(22,119,255,0.10) !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-in-range::before, :root:not([data-theme]) .ant-picker-dropdown .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range::before { background: rgba(22,119,255,0.06) !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before { background: rgba(22,119,255,0.06) !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-range-hover::before, :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-range-hover-start::before, :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-range-hover-end::before { border-color: rgba(22,119,255,0.55) !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-cell-today .ant-picker-cell-inner::before { border-color: #1677ff !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-footer { background: #fafafa !important; border-top: 1px solid #f0f0f0 !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-today-btn { color: #1677ff !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-today-btn:hover { color: #4096ff !important; } /* Decade/year/month panels */ :root:not([data-theme]) .ant-picker-dropdown .ant-picker-decade-panel, :root:not([data-theme]) .ant-picker-dropdown .ant-picker-year-panel, :root:not([data-theme]) .ant-picker-dropdown .ant-picker-month-panel { background: #ffffff !important; } :root:not([data-theme]) .ant-picker-dropdown .ant-picker-decade-btn, :root:not([data-theme]) .ant-picker-dropdown .ant-picker-year-btn, :root:not([data-theme]) .ant-picker-dropdown .ant-picker-month-btn { color: rgba(0,0,0,0.88) !important; } /* ── Dark ── */ [data-theme="dark"] .ant-picker-dropdown .ant-picker-panel-container { background: #1e2636 !important; border: 1px solid #2a3347 !important; border-top: 3px solid #818cf8 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.50) !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-range-arrow::before { background: #4f46e5 !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-panel { background: #1e2636 !important; border-color: #2a3347 !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-header { background: #141926 !important; border-bottom: 1px solid #2a3347 !important; color: #cbd5e1 !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-header button { color: #cbd5e1 !important; font-family: Montserrat, sans-serif; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-header button:hover { color: #818cf8 !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-content th { color: #4b5a72 !important; font-family: Montserrat, sans-serif; font-size: 11px; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell { color: #4b5a72 !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-in-view { color: #cbd5e1 !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-inner { border-radius: 3px; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner { background: #1e2d50 !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner, [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-range-start .ant-picker-cell-inner, [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-range-end .ant-picker-cell-inner { background: #4f46e5 !important; color: #ffffff !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-in-range .ant-picker-cell-inner { background: rgba(79,70,229,0.18) !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-in-range::before, [data-theme="dark"] .ant-picker-dropdown .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range::before { background: rgba(79,70,229,0.10) !important; } /* Range-start / range-end half-bands must also be overridden — base CSS sets a light colour here which bleeds as a white gap on dark backgrounds. */ [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before { background: rgba(79,70,229,0.10) !important; } /* Range-hover dashed outline — match theme accent so it is visible on dark bg */ [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-range-hover::before, [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-range-hover-start::before, [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-range-hover-end::before { border-color: rgba(129,140,248,0.55) !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-today .ant-picker-cell-inner::before { border-color: #818cf8 !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-footer { background: #141926 !important; border-top: 1px solid #2a3347 !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-today-btn { color: #818cf8 !important; font-family: Montserrat, sans-serif; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-today-btn:hover { color: #6366f1 !important; } /* Decade/year/month panels */ [data-theme="dark"] .ant-picker-dropdown .ant-picker-decade-panel, [data-theme="dark"] .ant-picker-dropdown .ant-picker-year-panel, [data-theme="dark"] .ant-picker-dropdown .ant-picker-month-panel { background: #1e2636 !important; } [data-theme="dark"] .ant-picker-dropdown .ant-picker-decade-btn, [data-theme="dark"] .ant-picker-dropdown .ant-picker-year-btn, [data-theme="dark"] .ant-picker-dropdown .ant-picker-month-btn { color: #cbd5e1 !important; } /* ── Light ── */ [data-theme="light"] .ant-picker-dropdown .ant-picker-panel-container { background: #ffffff !important; border: 1px solid #dde3eb !important; border-top: 3px solid #4338ca !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-range-arrow::before { background: #4338ca !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-panel { background: #ffffff !important; border-color: #dde3eb !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-header { background: #eef1f6 !important; border-bottom: 1px solid #dde3eb !important; color: #374151 !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-header button { color: #374151 !important; font-family: Montserrat, sans-serif; } [data-theme="light"] .ant-picker-dropdown .ant-picker-header button:hover { color: #4338ca !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-content th { color: #9ca3af !important; font-family: Montserrat, sans-serif; font-size: 11px; } [data-theme="light"] .ant-picker-dropdown .ant-picker-cell { color: #9ca3af !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-in-view { color: #374151 !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-inner { border-radius: 3px; } [data-theme="light"] .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner { background: #e8f0fe !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner, [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-range-start .ant-picker-cell-inner, [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-range-end .ant-picker-cell-inner { background: #6366f1 !important; /* indigo accent for range endpoints */ color: #ffffff !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-in-range .ant-picker-cell-inner { background: rgba(99,102,241,0.10) !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-in-range::before, [data-theme="light"] .ant-picker-dropdown .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range::before { background: rgba(99,102,241,0.06) !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before { background: rgba(99,102,241,0.06) !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-range-hover::before, [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-range-hover-start::before, [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-range-hover-end::before { border-color: rgba(99,102,241,0.55) !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-cell-today .ant-picker-cell-inner::before { border-color: #6366f1 !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-footer { background: #eef1f6 !important; border-top: 1px solid #dde3eb !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-today-btn { color: #4338ca !important; font-family: Montserrat, sans-serif; } [data-theme="light"] .ant-picker-dropdown .ant-picker-today-btn:hover { color: #3730a3 !important; } /* Decade/year/month panels */ [data-theme="light"] .ant-picker-dropdown .ant-picker-decade-panel, [data-theme="light"] .ant-picker-dropdown .ant-picker-year-panel, [data-theme="light"] .ant-picker-dropdown .ant-picker-month-panel { background: #ffffff !important; } [data-theme="light"] .ant-picker-dropdown .ant-picker-decade-btn, [data-theme="light"] .ant-picker-dropdown .ant-picker-year-btn, [data-theme="light"] .ant-picker-dropdown .ant-picker-month-btn { color: #374151 !important; } /* ═══════════════════════════════════════════════════════════════════════════ DRAWER — Lease Detail tab: Card, Descriptions, Divider AntDesign hard-codes light-theme defaults; existing dark overrides only cover .ant-modal.ldd-modal — add .ant-drawer equivalents here. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Dark ── */ [data-theme="dark"] .ant-drawer .ant-card { background: rgba(255,255,255,0.04) !important; border-color: var(--ldd-border) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-drawer .ant-card-head { background: rgba(0,0,0,0.20) !important; border-bottom-color: var(--ldd-border) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-drawer .ant-card-body { color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-drawer .ant-descriptions-bordered .ant-descriptions-view { border-color: var(--ldd-border) !important; } [data-theme="dark"] .ant-drawer .ant-descriptions-bordered .ant-descriptions-item-label { background: rgba(0,0,0,0.20) !important; border-color: var(--ldd-border) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-drawer .ant-descriptions-bordered .ant-descriptions-item-content { border-color: var(--ldd-border) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-drawer .ant-descriptions-row { border-color: var(--ldd-border) !important; } [data-theme="dark"] .ant-drawer .ant-divider { border-color: var(--ldd-border) !important; } [data-theme="dark"] .ant-drawer .ant-divider-inner-text { color: var(--ldd-body-color) !important; } /* ── Light ── */ [data-theme="light"] .ant-drawer .ant-card { background: #ffffff !important; border-color: var(--ldd-border) !important; } [data-theme="light"] .ant-drawer .ant-card-head { background: var(--ldd-sidebar-bg) !important; border-bottom-color: var(--ldd-border) !important; color: var(--ldd-body-color) !important; } [data-theme="light"] .ant-drawer .ant-descriptions-bordered .ant-descriptions-view { border-color: var(--ldd-border) !important; } [data-theme="light"] .ant-drawer .ant-descriptions-bordered .ant-descriptions-item-label { background: var(--ldd-sidebar-bg) !important; border-color: var(--ldd-border) !important; color: var(--ldd-body-color) !important; } [data-theme="light"] .ant-drawer .ant-descriptions-bordered .ant-descriptions-item-content { border-color: var(--ldd-border) !important; color: var(--ldd-body-color) !important; } [data-theme="light"] .ant-drawer .ant-descriptions-row { border-color: var(--ldd-border) !important; } [data-theme="light"] .ant-drawer .ant-divider { border-color: var(--ldd-border) !important; } [data-theme="light"] .ant-drawer .ant-divider-inner-text { color: var(--ldd-body-color) !important; } /* ═══════════════════════════════════════════════════════════════════════════ MAIN CONTENT MODAL (.mc-modal) — theme-aware chrome & content Add ClassName="mc-modal" to any Modal inside a layout/page component. Chrome uses --ldd-modal-* variables (already scoped per theme above). FilterForm inputs already respond via [data-theme] .ff-colon-right rules. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Base chrome ───────────────────────────────────────────────────────── Inline fallbacks ensure classic theme (no data-theme attr) stays white. [data-theme] blocks override these vars for huddle8 / dark / light. ─────────────────────────────────────────────────────────────────────── */ .ant-modal.mc-modal .ant-modal-content { background: var(--ldd-modal-body-bg, #ffffff); box-shadow: var(--ldd-shadow, 0 6px 24px rgba(0,0,0,0.12)); /* overflow:hidden removed — it clips Select/DatePicker dropdown popups inside the modal */ } .ant-modal.mc-modal .ant-modal-header { background: var(--ldd-modal-header-bg, var(--base-background, #4e73cb)); border-bottom: 1px solid var(--ldd-modal-border, rgba(255,255,255,0.12)); padding: 12px 16px; border-top-left-radius: 2px; border-top-right-radius: 2px; } .ant-modal.mc-modal .ant-modal-title { color: var(--ldd-modal-header-color, #ffffff); font-weight: 600; font-family: 'Montserrat', sans-serif; } .ant-modal.mc-modal .ant-modal-close { color: var(--ldd-close-color, rgba(255,255,255,0.65)); transition: color 0.2s; } .ant-modal.mc-modal .ant-modal-close:hover { color: var(--ldd-close-hover, #ffffff); } .ant-modal.mc-modal .ant-modal-body { background: var(--ldd-modal-body-bg, #ffffff); color: var(--ldd-body-color, #333333); padding: 16px; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ── Card wrapper (FilterForm card) ─────────────────────────────────────── */ .ant-modal.mc-modal .ant-card { background: transparent !important; border-color: var(--ldd-border, #dee2e6) !important; color: var(--ldd-body-color, #333333) !important; } .ant-modal.mc-modal .ant-card-head { background: rgba(6,56,29,0.06) !important; border-bottom-color: var(--ldd-border, #dee2e6) !important; } .ant-modal.mc-modal .ant-card-head-title { color: var(--ldd-accent, var(--base-background, #4e73cb)) !important; font-family: 'Montserrat', sans-serif; font-weight: 600; } .ant-modal.mc-modal .ant-card-body { background: transparent !important; } /* ── Form labels ─────────────────────────────────────────────────────────── */ .ant-modal.mc-modal .ant-form-item-label > label, .ant-modal.mc-modal .ant-col label { color: var(--ldd-body-color, #333333) !important; font-family: 'Montserrat', sans-serif; } /* ── Form control focus rings ────────────────────────────────────────────── */ .ant-modal.mc-modal .ant-input:focus, .ant-modal.mc-modal .ant-input-focused, .ant-modal.mc-modal .ant-picker-focused, .ant-modal.mc-modal .ant-select-focused .ant-select-selector, .ant-modal.mc-modal .ant-input-affix-wrapper-focused, .ant-modal.mc-modal .ant-input-textarea-affix-wrapper:focus-within { border-color: var(--ldd-accent, var(--base-background, #4e73cb)) !important; box-shadow: 0 0 0 2px var(--ldd-input-focus, rgba(78,115,203,0.15)) !important; } /* ── Checkbox ────────────────────────────────────────────────────────────── */ .ant-modal.mc-modal .ant-checkbox-inner { background: #ffffff !important; border-color: var(--ldd-border, #dee2e6) !important; } .ant-modal.mc-modal .ant-checkbox:hover .ant-checkbox-inner { border-color: var(--ldd-accent, var(--base-background, #4e73cb)) !important; } .ant-modal.mc-modal .ant-checkbox-checked .ant-checkbox-inner { background: var(--ldd-accent, var(--base-background, #4e73cb)) !important; border-color: var(--ldd-accent, var(--base-background, #4e73cb)) !important; } /* ── Primary button ──────────────────────────────────────────────────────── */ .ant-modal.mc-modal .ant-btn-primary { background: var(--ldd-accent, var(--base-background, #4e73cb)) !important; border-color: var(--ldd-accent, var(--base-background, #4e73cb)) !important; color: #ffffff !important; font-family: 'Montserrat', sans-serif; font-weight: 600; } .ant-modal.mc-modal .ant-btn-primary:hover { background: var(--ldd-accent-hover, #3b5298) !important; border-color: var(--ldd-accent-hover, #3b5298) !important; } /* ── Select clear icon ───────────────────────────────────────────────────── */ .ant-modal.mc-modal .ant-select-clear { background: #ffffff !important; color: var(--ldd-grey, #9ca3af) !important; } .ant-modal.mc-modal .ant-select-clear:hover { color: var(--ldd-accent, var(--base-background, #4e73cb)) !important; } /* ── Spin dot ────────────────────────────────────────────────────────────── */ .ant-modal.mc-modal .ant-spin-dot-item { background: var(--ldd-accent, var(--base-background, #4e73cb)) !important; } /* ── Bare labels (e.g. email modal To/CC/Subject/Content) ────────────────── */ .ant-modal.mc-modal label { color: var(--ldd-body-color, #333333); } /* ── Select tag chips (Tags / Multiple mode) — base (classic fallback) ───── Scoped to .ant-select-multiple: in single mode .ant-select-selection-item is the value span and fills the control, so a chip background greys the field. */ .ant-modal.mc-modal .ant-select-multiple .ant-select-selection-item { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.15) !important; color: var(--ldd-body-color, #333333) !important; } .ant-modal.mc-modal .ant-select-selection-item-remove { color: rgba(0,0,0,0.45) !important; } .ant-modal.mc-modal .ant-select-selection-item-remove:hover { color: rgba(0,0,0,0.75) !important; } /* ── Dark — inputs, cards, buttons ──────────────────────────────────────── */ [data-theme="dark"] .ant-modal.mc-modal .ant-input, [data-theme="dark"] .ant-modal.mc-modal textarea.ant-input, [data-theme="dark"] .ant-modal.mc-modal .ant-input-affix-wrapper, [data-theme="dark"] .ant-modal.mc-modal .ant-input-textarea-affix-wrapper { background: var(--ff-input-bg) !important; border-color: var(--ff-input-border) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-input::placeholder, [data-theme="dark"] .ant-modal.mc-modal textarea.ant-input::placeholder { color: rgba(255,255,255,0.30) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-select-selector { background: var(--ff-input-bg) !important; border-color: var(--ff-input-border) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-select-selection-placeholder { color: rgba(255,255,255,0.30) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-select-multiple .ant-select-selection-item { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-select-selection-item-remove { color: rgba(255,255,255,0.45) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-select-selection-item-remove:hover { color: rgba(255,255,255,0.90) !important; } [data-theme="dark"] .ant-modal.mc-modal label { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-picker { background: var(--ff-input-bg) !important; border-color: var(--ff-input-border) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-picker-input > input { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-picker-input > input::placeholder { color: rgba(255,255,255,0.30) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-picker-suffix, [data-theme="dark"] .ant-modal.mc-modal .ant-picker-clear { color: rgba(255,255,255,0.45) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-select-arrow { color: rgba(255,255,255,0.45) !important; } /* ── Dark — divider ──────────────────────────────────────────────────────── */ [data-theme="dark"] .ant-modal.mc-modal .ant-divider { border-color: rgba(255,255,255,0.12) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-divider-inner-text { color: rgba(255,255,255,0.65) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-card { background: rgba(255,255,255,0.04) !important; border-color: var(--ldd-modal-border) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-card-head { background: rgba(0,0,0,0.20) !important; border-bottom-color: var(--ldd-modal-border) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-checkbox-inner { background: var(--ff-input-bg) !important; border-color: var(--ff-input-border) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-btn-default { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.2) !important; color: var(--ldd-body-color) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-select-clear { background: var(--ff-input-bg, #102035) !important; color: rgba(255,255,255,0.35) !important; } [data-theme="dark"] .ant-modal.mc-modal .ant-alert-error { background: rgba(255,77,79,0.12) !important; border-color: rgba(255,77,79,0.3) !important; } /* ── Light — inputs, tag chips, cards, buttons ───────────────────────────── */ [data-theme="light"] .ant-modal.mc-modal .ant-input, [data-theme="light"] .ant-modal.mc-modal textarea.ant-input, [data-theme="light"] .ant-modal.mc-modal .ant-input-affix-wrapper, [data-theme="light"] .ant-modal.mc-modal .ant-input-textarea-affix-wrapper { background: #ffffff !important; border-color: #dde3eb !important; color: #374151 !important; } [data-theme="light"] .ant-modal.mc-modal .ant-select-selector { background: #ffffff !important; border-color: #dde3eb !important; color: #374151 !important; } [data-theme="light"] .ant-modal.mc-modal .ant-select-multiple .ant-select-selection-item { background: #e8f0fe !important; border-color: #c7d2fe !important; color: #374151 !important; } [data-theme="light"] .ant-modal.mc-modal .ant-select-selection-item-remove { color: #6b7280 !important; } [data-theme="light"] .ant-modal.mc-modal .ant-select-selection-item-remove:hover { color: #4338ca !important; } [data-theme="light"] .ant-modal.mc-modal label { color: #374151 !important; } [data-theme="light"] .ant-modal.mc-modal .ant-card-head { background: var(--ldd-sidebar-bg) !important; border-bottom-color: var(--ldd-border) !important; color: var(--ldd-body-color) !important; } [data-theme="light"] .ant-modal.mc-modal .ant-btn-default { background: var(--mc-btn-default-bg) !important; border-color: var(--mc-btn-default-border) !important; color: var(--mc-btn-default-color) !important; } [data-theme="light"] .ant-modal.mc-modal .ant-btn-default:hover { border-color: var(--mc-btn-default-hover-border) !important; color: var(--mc-btn-default-hover-color) !important; } /* ── Light — picker, arrows, divider ────────────────────────────────────── */ [data-theme="light"] .ant-modal.mc-modal .ant-picker { background: #ffffff !important; border-color: #dde3eb !important; } [data-theme="light"] .ant-modal.mc-modal .ant-picker-input > input { color: #374151 !important; } [data-theme="light"] .ant-modal.mc-modal .ant-picker-input > input::placeholder { color: #9ca3af !important; } [data-theme="light"] .ant-modal.mc-modal .ant-picker-suffix, [data-theme="light"] .ant-modal.mc-modal .ant-picker-clear { color: #9ca3af !important; } [data-theme="light"] .ant-modal.mc-modal .ant-select-arrow { color: #6b7280 !important; } [data-theme="light"] .ant-modal.mc-modal .ant-divider { border-color: #dde3eb !important; } [data-theme="light"] .ant-modal.mc-modal .ant-divider-inner-text { color: #374151 !important; } /* ── Huddle8 — tag chips ─────────────────────────────────────────────────── */ [data-theme="huddle8"] .ant-modal.mc-modal .ant-select-multiple .ant-select-selection-item { background: #d9ede6 !important; border-color: #c8d4ce !important; color: #1c2e25 !important; } [data-theme="huddle8"] .ant-modal.mc-modal .ant-select-selection-item-remove { color: #7a9085 !important; } [data-theme="huddle8"] .ant-modal.mc-modal .ant-select-selection-item-remove:hover { color: #06381d !important; } [data-theme="huddle8"] .ant-modal.mc-modal label { color: #1c2e25 !important; } /* ── Huddle8 — picker, arrows, divider ──────────────────────────────────── */ [data-theme="huddle8"] .ant-modal.mc-modal .ant-picker-input > input { color: #1c2e25 !important; } [data-theme="huddle8"] .ant-modal.mc-modal .ant-picker-input > input::placeholder { color: #9aafa7 !important; } [data-theme="huddle8"] .ant-modal.mc-modal .ant-picker-suffix, [data-theme="huddle8"] .ant-modal.mc-modal .ant-picker-clear { color: #7a9085 !important; } [data-theme="huddle8"] .ant-modal.mc-modal .ant-select-arrow { color: #7a9085 !important; } [data-theme="huddle8"] .ant-modal.mc-modal .ant-divider { border-color: #c8d4ce !important; } [data-theme="huddle8"] .ant-modal.mc-modal .ant-divider-inner-text { color: #1c2e25 !important; } /* ── Classic (base) — picker, arrows, divider ───────────────────────────── */ .ant-modal.mc-modal .ant-picker-input > input { color: var(--ldd-body-color, #333333); } .ant-modal.mc-modal .ant-picker-suffix, .ant-modal.mc-modal .ant-picker-clear { color: rgba(0,0,0,0.25); } .ant-modal.mc-modal .ant-select-arrow { color: rgba(0,0,0,0.25); } .ant-modal.mc-modal .ant-divider-inner-text { color: var(--ldd-body-color, #333333); } /* ═══════════════════════════════════════════════════════════════════════════ TENANT SUMMARY BAR — per-theme tokens Used by TenantDetailsLayout.razor summary bar strip. ═══════════════════════════════════════════════════════════════════════════ */ :root { --summary-bar-bg: #f5f5f5; --summary-bar-border: #e8e8e8; --summary-bar-text: #262626; } [data-theme="huddle8"] { --summary-bar-bg: #f8f4ec; --summary-bar-border: #c8d4ce; --summary-bar-text: #1c2e25; } [data-theme="dark"] { --summary-bar-bg: #1e2636; --summary-bar-border: #2a3347; --summary-bar-text: rgba(255,255,255,0.85); } [data-theme="light"] { --summary-bar-bg: #f7f9fc; --summary-bar-border: #dde3eb; --summary-bar-text: #374151; } /* ═══════════════════════════════════════════════════════════════════════════ MAIN CONTENT AREA — Card, DatePicker, Select dark & light overrides AntDesign hard-codes white/light defaults; these rules adapt them to the active theme. Scoped to .ant-layout-content .ant-card so they only fire inside cards rendered within a content-area layout component. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Classic (base, no data-theme) — AntDesign blue-1 head ── */ .ant-layout-content .ant-card-head { background: #e6f4ff; border-bottom-color: #bae0ff; color: rgba(0,0,0,0.88); } .ant-layout-content .ant-card-head-title { color: rgba(0,0,0,0.88); } /* ── Huddle8 brand ── */ [data-theme="huddle8"] .ant-layout-content .ant-card-head { background: rgba(6,56,29,0.06) !important; border-bottom-color: #c8d4ce !important; color: #06381d !important; } [data-theme="huddle8"] .ant-layout-content .ant-card-head-title { color: #06381d !important; } /* ── Dark ── */ [data-theme="dark"] .ant-layout-content .ant-card { background: #141926 !important; border-color: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-layout-content .ant-card-head { background: #1e2636 !important; border-bottom-color: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-layout-content .ant-card-head-title { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-layout-content .ant-card-body { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-layout-content .ant-card label { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-layout-content .ant-card .ant-picker { background: #102035 !important; border-color: rgba(255,255,255,0.18) !important; } [data-theme="dark"] .ant-layout-content .ant-card .ant-picker-input > input { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-layout-content .ant-card .ant-picker-input > input::placeholder { color: rgba(255,255,255,0.35) !important; } [data-theme="dark"] .ant-layout-content .ant-card .ant-picker-suffix, [data-theme="dark"] .ant-layout-content .ant-card .ant-picker-clear { color: rgba(255,255,255,0.35) !important; } [data-theme="dark"] .ant-layout-content .ant-card .ant-picker:hover, [data-theme="dark"] .ant-layout-content .ant-card .ant-picker-focused { border-color: #818cf8 !important; box-shadow: 0 0 0 2px rgba(129,140,248,0.20) !important; } [data-theme="dark"] .ant-layout-content .ant-card .ant-select-selector { background: #102035 !important; border-color: rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-layout-content .ant-card .ant-select-selection-placeholder { color: rgba(255,255,255,0.35) !important; } [data-theme="dark"] .ant-layout-content .ant-card .ant-select-selection-item { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .ant-layout-content .ant-card .ant-select-arrow { color: rgba(255,255,255,0.45) !important; } [data-theme="dark"] .ant-layout-content .ant-card .ant-select-focused .ant-select-selector { border-color: #818cf8 !important; box-shadow: 0 0 0 2px rgba(129,140,248,0.20) !important; } [data-theme="dark"] .ant-layout-content .ant-card .ant-select-clear { background: #102035 !important; color: rgba(255,255,255,0.35) !important; } /* ── Light ── */ [data-theme="light"] .ant-layout-content .ant-card { background: #ffffff !important; border-color: #dde3eb !important; color: #374151 !important; } [data-theme="light"] .ant-layout-content .ant-card-head { background: #eef1f6 !important; border-bottom-color: #dde3eb !important; color: #374151 !important; } [data-theme="light"] .ant-layout-content .ant-card-head-title { color: #374151 !important; } [data-theme="light"] .ant-layout-content .ant-card-body { color: #374151 !important; } [data-theme="light"] .ant-layout-content .ant-card label { color: #374151 !important; } [data-theme="light"] .ant-layout-content .ant-card .ant-picker { background: #ffffff !important; border-color: #dde3eb !important; } [data-theme="light"] .ant-layout-content .ant-card .ant-picker-input > input { color: #374151 !important; } [data-theme="light"] .ant-layout-content .ant-card .ant-picker-input > input::placeholder { color: #9ca3af !important; } [data-theme="light"] .ant-layout-content .ant-card .ant-picker:hover, [data-theme="light"] .ant-layout-content .ant-card .ant-picker-focused { border-color: #6366f1 !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.12) !important; } [data-theme="light"] .ant-layout-content .ant-card .ant-select-selector { background: #ffffff !important; border-color: #dde3eb !important; color: #374151 !important; } [data-theme="light"] .ant-layout-content .ant-card .ant-select-selection-placeholder { color: #9ca3af !important; } [data-theme="light"] .ant-layout-content .ant-card .ant-select-selection-item { color: #374151 !important; } [data-theme="light"] .ant-layout-content .ant-card .ant-select-focused .ant-select-selector { border-color: #6366f1 !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.12) !important; } /* ═══════════════════════════════════════════════════════════════════════════ BARCODE RECEIPT — .brc-layout scope BarcodeReceiptLayout renders .ant-layout directly inside .scrollable-content (not inside .ant-layout-content), so the general .ant-layout-content .ant-card !important rules above never fire. These rules replicate them for .brc-layout. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Layout background ──────────────────────────────────────────────────── */ [data-theme="huddle8"] .brc-layout, [data-theme="huddle8"] .brc-layout .ant-layout { background: var(--mc-bg) !important; } [data-theme="dark"] .brc-layout, [data-theme="dark"] .brc-layout .ant-layout { background: #0d1b2e !important; } [data-theme="light"] .brc-layout, [data-theme="light"] .brc-layout .ant-layout { background: var(--mc-bg) !important; } /* ── Cards ──────────────────────────────────────────────────────────────── */ [data-theme="dark"] .brc-layout .ant-card { background: #141926 !important; border-color: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .brc-layout .ant-card-head { background: #1e2636 !important; border-bottom-color: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .brc-layout .ant-card-head-title { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .brc-layout .ant-card-body { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .brc-layout .ant-card label { color: rgba(255,255,255,0.85) !important; } [data-theme="light"] .brc-layout .ant-card { background: #ffffff !important; border-color: #dde3eb !important; color: #374151 !important; } [data-theme="light"] .brc-layout .ant-card-head { background: #eef1f6 !important; border-bottom-color: #dde3eb !important; color: #374151 !important; } [data-theme="light"] .brc-layout .ant-card-head-title { color: #374151 !important; } [data-theme="light"] .brc-layout .ant-card-body { color: #374151 !important; } [data-theme="light"] .brc-layout .ant-card label { color: #374151 !important; } /* ── Filter card — classic (no data-theme) keeps original lavender ───────── */ .brc-layout .brc-filter-card.ant-card { background: #DFD8FD !important; border-color: #b37feb !important; } /* ── Filter card — themed overrides (higher specificity wins) ────────────── */ [data-theme="huddle8"] .brc-layout .brc-filter-card.ant-card { background: rgba(6,56,29,0.10) !important; border-color: rgba(6,56,29,0.20) !important; } [data-theme="dark"] .brc-layout .brc-filter-card.ant-card { background: rgba(129,140,248,0.10) !important; border-color: rgba(129,140,248,0.22) !important; } [data-theme="light"] .brc-layout .brc-filter-card.ant-card { background: rgba(67,56,202,0.07) !important; border-color: rgba(67,56,202,0.18) !important; } /* ── Inputs (all themes need readable fields) ────────────────────────────── */ [data-theme="dark"] .brc-layout .ant-input { background: #102035 !important; border-color: rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .brc-layout .ant-input[readonly], [data-theme="dark"] .brc-layout .ant-input-affix-wrapper-readonly .ant-input { background: rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.45) !important; } [data-theme="dark"] .brc-layout .ant-input::placeholder { color: rgba(255,255,255,0.30) !important; } [data-theme="dark"] .brc-layout .ant-input:not([readonly]):hover { border-color: #818cf8 !important; } [data-theme="dark"] .brc-layout .ant-input:not([readonly]):focus { border-color: #818cf8 !important; box-shadow: 0 0 0 2px rgba(129,140,248,0.20) !important; } [data-theme="light"] .brc-layout .ant-input { background: #ffffff !important; border-color: #dde3eb !important; color: #374151 !important; } [data-theme="light"] .brc-layout .ant-input[readonly] { background: #f7f9fc !important; color: rgba(55,65,81,0.55) !important; } [data-theme="light"] .brc-layout .ant-input::placeholder { color: #9ca3af !important; } [data-theme="light"] .brc-layout .ant-input:not([readonly]):hover { border-color: #6366f1 !important; } [data-theme="light"] .brc-layout .ant-input:not([readonly]):focus { border-color: #6366f1 !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.12) !important; } /* ── Radio buttons ───────────────────────────────────────────────────────── */ [data-theme="dark"] .brc-layout .ant-radio-wrapper { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .brc-layout .ant-radio-inner { background: #102035 !important; border-color: rgba(255,255,255,0.30) !important; } [data-theme="dark"] .brc-layout .ant-radio-checked .ant-radio-inner { border-color: #818cf8 !important; } [data-theme="dark"] .brc-layout .ant-radio-checked .ant-radio-inner::after { background-color: #818cf8 !important; } [data-theme="light"] .brc-layout .ant-radio-wrapper { color: #374151 !important; } [data-theme="light"] .brc-layout .ant-radio-checked .ant-radio-inner { border-color: #4338ca !important; } [data-theme="light"] .brc-layout .ant-radio-checked .ant-radio-inner::after { background-color: #4338ca !important; } /* ── Date picker inside cards ────────────────────────────────────────────── */ [data-theme="dark"] .brc-layout .ant-card .ant-picker { background: #102035 !important; border-color: rgba(255,255,255,0.18) !important; } [data-theme="dark"] .brc-layout .ant-card .ant-picker-input > input { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .brc-layout .ant-card .ant-picker-input > input::placeholder { color: rgba(255,255,255,0.30) !important; } [data-theme="dark"] .brc-layout .ant-card .ant-picker-suffix, [data-theme="dark"] .brc-layout .ant-card .ant-picker-clear { color: rgba(255,255,255,0.35) !important; } [data-theme="dark"] .brc-layout .ant-card .ant-picker:hover, [data-theme="dark"] .brc-layout .ant-card .ant-picker-focused { border-color: #818cf8 !important; box-shadow: 0 0 0 2px rgba(129,140,248,0.20) !important; } [data-theme="light"] .brc-layout .ant-card .ant-picker { background: #ffffff !important; border-color: #dde3eb !important; } [data-theme="light"] .brc-layout .ant-card .ant-picker-input > input { color: #374151 !important; } [data-theme="light"] .brc-layout .ant-card .ant-picker-input > input::placeholder { color: #9ca3af !important; } [data-theme="light"] .brc-layout .ant-card .ant-picker:hover, [data-theme="light"] .brc-layout .ant-card .ant-picker-focused { border-color: #6366f1 !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.12) !important; } /* ── Span text nodes inside brc-layout (not in cards — filter area) ─────── */ [data-theme="dark"] .brc-layout .ant-card .ant-typography { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .brc-layout .ant-card span { color: rgba(255,255,255,0.85) !important; } [data-theme="light"] .brc-layout .ant-card .ant-typography { color: #374151 !important; } [data-theme="light"] .brc-layout .ant-card span { color: #374151 !important; } /* ── Spin container background ───────────────────────────────────────────── */ [data-theme="dark"] .brc-layout .ant-spin-container { background: #0d1b2e !important; } [data-theme="light"] .brc-layout .ant-spin-container { background: var(--mc-bg) !important; } /* ── Height fill — flex chain: Layout → Spin → inner Layout → Row → Col ─── */ /* Applied to all themes so the background fills the full scrollable-content */ /* and the Account Summary card stretches to match the Payment card height. */ .brc-layout .ant-spin-nested-loading, .brc-layout .ant-spin-container { flex: 1 !important; display: flex !important; flex-direction: column !important; min-height: 0; height: inherit; } /* Spin's unclassed wrapper
defaults to content height and breaks the fill chain. */ .brc-layout > .ant-spin-nested-loading > div { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0; } .brc-content-row { flex: 1 !important; align-items: stretch !important; flex-wrap: nowrap !important; /* keep Payment beside Account Summary */ min-height: 0; } .brc-account-col, .brc-payment-col { display: flex !important; flex-direction: column !important; min-height: 0; } /* Account Summary is fixed-width (Col Flex="270px"); Payment takes the rest. */ .brc-payment-col { min-width: 0; /* let the table shrink instead of forcing the row wider */ } /* The filter card keeps its natural height; only the content row flexes. */ .brc-layout > .brc-filter-card { flex-shrink: 0; } /* Card is a flex column so its body fills it; basis 0, not auto, or it grows past the footer. */ .brc-account-col > .ant-card, .brc-payment-col > .ant-card { flex: 1 1 0%; display: flex; flex-direction: column; min-height: 0; } .brc-account-col > .ant-card > .ant-card-head, .brc-payment-col > .ant-card > .ant-card-head { flex-shrink: 0; } .brc-account-col > .ant-card > .ant-card-body, .brc-payment-col > .ant-card > .ant-card-body { flex: 1 1 0%; min-height: 0; } /* Flex column so the table claims whatever is left below the payment form. */ .brc-payment-col > .ant-card > .ant-card-body { display: flex; flex-direction: column; } /* ── Outstanding Transactions table — fill down to the footer ────────────── */ /* Keep ScrollY on the Table for the fixed-header structure, but override its inline max-height so the body ends above the footer on any viewport instead of at 60vh. */ .brc-payment-col .ant-table-wrapper, .brc-payment-col .ant-table-wrapper .ant-spin-nested-loading, .brc-payment-col .ant-table-wrapper .ant-spin-nested-loading > div, .brc-payment-col .ant-table-wrapper .ant-spin-container, .brc-payment-col .ant-table, .brc-payment-col .ant-table-container { flex: 1 1 0%; display: flex; flex-direction: column; min-height: 0; } .brc-payment-col .ant-table-title, .brc-payment-col .ant-table-header { flex-shrink: 0; } .brc-payment-col .ant-table-body { flex: 1 1 0%; min-height: 100px; /* floor, so a short viewport still shows rows */ max-height: none !important; /* beats the inline max-height from ScrollY */ } /* ── Bilingual table headers ─────────────────────────────────────────────── */ /* TitleTemplate's
breaks on the language boundary; keep-all stops CJK splitting mid-run. */ .brc-payment-col .ant-table-thead .ant-table-column-title { display: block; word-break: keep-all; } /* ── Disabled buttons — dark & light ────────────────────────────────────── */ [data-theme="dark"] .brc-layout .ant-btn:disabled, [data-theme="dark"] .brc-layout .ant-btn[disabled] { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; color: #6b7280 !important; box-shadow: none !important; } [data-theme="dark"] .brc-layout .ant-btn:disabled .anticon, [data-theme="dark"] .brc-layout .ant-btn[disabled] .anticon { color: #6b7280 !important; fill: #6b7280 !important; } [data-theme="light"] .brc-layout .ant-btn:disabled, [data-theme="light"] .brc-layout .ant-btn[disabled] { background: #f0f2f5 !important; border-color: #dde3eb !important; color: #9ca3af !important; box-shadow: none !important; } [data-theme="light"] .brc-layout .ant-btn:disabled .anticon, [data-theme="light"] .brc-layout .ant-btn[disabled] .anticon { color: #9ca3af !important; fill: #9ca3af !important; } [data-theme="huddle8"] .brc-layout .ant-btn:disabled, [data-theme="huddle8"] .brc-layout .ant-btn[disabled] { background: rgba(6,56,29,0.04) !important; border-color: rgba(6,56,29,0.15) !important; color: rgba(6,56,29,0.30) !important; box-shadow: none !important; } /* ── Table — prevent theme from changing font-size/weight on header & body ── */ /* font-size/weight are already set via HeaderStyle/Style inline on columns */ [data-theme] .brc-layout .ant-table-thead > tr > th { font-size: inherit !important; font-weight: inherit !important; } [data-theme] .brc-layout .ant-table-tbody > tr > td { font-size: inherit !important; font-weight: inherit !important; } /* ── Table — color-only theme overrides (no size/spacing changes) ────────── */ /* dark */ [data-theme="dark"] .brc-layout .ant-table { background: #141926 !important; color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .brc-layout .ant-table-thead > tr > th { background: #1e2636 !important; color: rgba(255,255,255,0.85) !important; border-bottom-color: rgba(255,255,255,0.12) !important; } [data-theme="dark"] .brc-layout .ant-table-tbody > tr > td { background: #141926 !important; color: rgba(255,255,255,0.85) !important; border-bottom-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .brc-layout .ant-table-tbody > tr.ant-table-row:hover > td { background: rgba(255,255,255,0.05) !important; } [data-theme="dark"] .brc-layout .ant-table-tbody > tr.ant-table-row-selected > td { background: rgba(129,140,248,0.15) !important; } [data-theme="dark"] .brc-layout .ant-table-title { background: #1e2636 !important; color: rgba(255,255,255,0.85) !important; border-color: rgba(255,255,255,0.12) !important; } [data-theme="dark"] .brc-layout .ant-table-title .ant-typography { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .brc-layout .ant-table-title span { color: rgba(255,255,255,0.85) !important; } [data-theme="dark"] .brc-layout .ant-table-container { border-color: rgba(255,255,255,0.12) !important; } [data-theme="dark"] .brc-layout .ant-table-container::before, [data-theme="dark"] .brc-layout .ant-table-container::after { background: transparent !important; } [data-theme="dark"] .brc-layout .ant-table-thead > tr > th:not(:last-child)::before { background-color: rgba(255,255,255,0.12) !important; } [data-theme="dark"] .brc-layout .ant-table-cell-scrollbar { background: #1e2636 !important; } [data-theme="dark"] .brc-layout .ant-table-empty .ant-table-tbody > tr > td { background: #141926 !important; color: rgba(255,255,255,0.45) !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .brc-layout .ant-empty-description { color: rgba(255,255,255,0.45) !important; } [data-theme="dark"] .brc-layout .ant-table-column-sorter { color: rgba(255,255,255,0.45) !important; } [data-theme="dark"] .brc-layout .ant-checkbox-inner { background: #102035 !important; border-color: rgba(255,255,255,0.30) !important; } [data-theme="dark"] .brc-layout .ant-checkbox-checked .ant-checkbox-inner { background: #818cf8 !important; border-color: #818cf8 !important; } /* light */ [data-theme="light"] .brc-layout .ant-table { background: #ffffff !important; color: #374151 !important; } [data-theme="light"] .brc-layout .ant-table-thead > tr > th { background: #eef1f6 !important; color: #374151 !important; border-bottom-color: #dde3eb !important; } [data-theme="light"] .brc-layout .ant-table-tbody > tr > td { background: #ffffff !important; color: #374151 !important; border-bottom-color: #eaecf0 !important; } [data-theme="light"] .brc-layout .ant-table-tbody > tr.ant-table-row:hover > td { background: #f0f4f9 !important; } [data-theme="light"] .brc-layout .ant-table-tbody > tr.ant-table-row-selected > td { background: rgba(67,56,202,0.07) !important; } [data-theme="light"] .brc-layout .ant-table-title { background: #eef1f6 !important; color: #374151 !important; border-bottom-color: #dde3eb !important; } [data-theme="light"] .brc-layout .ant-table-title .ant-typography { color: #374151 !important; } [data-theme="light"] .brc-layout .ant-table-title span { color: #374151 !important; } [data-theme="light"] .brc-layout .ant-table-container { border-color: #dde3eb !important; } [data-theme="light"] .brc-layout .ant-table-cell-scrollbar { background: #eef1f6 !important; } [data-theme="light"] .brc-layout .ant-empty-description { color: #9ca3af !important; } [data-theme="light"] .brc-layout .ant-checkbox-checked .ant-checkbox-inner { background: #4338ca !important; border-color: #4338ca !important; } /* huddle8 — use brand green accent, keep AntDesign default whites/grays as base */ [data-theme="huddle8"] .brc-layout .ant-table-tbody > tr.ant-table-row-selected > td { background: rgba(6,56,29,0.08) !important; } [data-theme="huddle8"] .brc-layout .ant-checkbox-checked .ant-checkbox-inner { background: #06381d !important; border-color: #06381d !important; }