/* ══════════════════════════════════════════════
   THEME SYSTEM - Light & Dark Mode
   ══════════════════════════════════════════════ */

/* ═══════════ LIGHT THEME (Default) ═══════════ */
:root,
[data-theme="light"] {
    /* Page */
    --theme-bg: #f0f2f5;
    --theme-bg-alt: #f5f6fa;

    /* Cards / Containers */
    --theme-card: #ffffff;
    --theme-card-hover: #f8fafc;
    --theme-card-alt: #f9f9fb;

    /* Text */
    --theme-text: #1f2937;
    --theme-text-secondary: #6b7280;
    --theme-text-muted: #9ca3af;
    --theme-text-inverse: #ffffff;

    /* Borders */
    --theme-border: #e5e7eb;
    --theme-border-light: #f3f4f6;

    /* Shadows */
    --theme-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
    --theme-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --theme-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

    /* Scrollbar */
    --theme-scrollbar: #bdbdbd;
    --theme-scrollbar-hover: #a0a0a0;

    /* Input / Form */
    --theme-input-bg: #ffffff;
    --theme-input-border: #d1d5db;
    --theme-input-text: #1f2937;
    --theme-input-placeholder: #9ca3af;
    --theme-input-disabled-bg: #f3f4f6;

    /* Menu / Sidebar */
    --theme-menu-bg: #ffffff;
    --theme-menu-hover: #f3f4f6;
    --theme-menu-active: #eff6ff;
    --theme-menu-text: #374151;

    /* Header */
    --theme-header-bg: #ffffff;
    --theme-header-border: #e5e7eb;

    /* Table */
    --theme-table-header-bg: #f9fafb;
    --theme-table-row-hover: #f3f4f6;
    --theme-table-border: #e5e7eb;
    --theme-table-stripe: #fafafa;

    /* Popup / Modal */
    --theme-overlay: rgba(0, 0, 0, 0.5);
    --theme-popup-bg: #ffffff;

    /* Misc */
    --theme-divider: #e5e7eb;
    --theme-skeleton: #e5e7eb;
    --theme-badge-bg: #f3f4f6;
    --theme-tooltip-bg: #1f2937;
    --theme-tooltip-text: #ffffff;
}

/* ═══════════ DARK THEME ═══════════ */
[data-theme="dark"] {
    /* Page */
    --theme-bg: #0f1117;
    --theme-bg-alt: #161923;

    /* Cards / Containers */
    --theme-card: #1a1d2e;
    --theme-card-hover: #242838;
    --theme-card-alt: #1e2133;

    /* Text */
    --theme-text: #e5e7eb;
    --theme-text-secondary: #9ca3af;
    --theme-text-muted: #6b7280;
    --theme-text-inverse: #1f2937;

    /* Borders */
    --theme-border: #2d3148;
    --theme-border-light: #252940;

    /* Shadows */
    --theme-shadow-sm: 0 1px 3px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.3);
    --theme-shadow-md: 0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
    --theme-shadow-lg: 0 10px 15px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3);

    /* Scrollbar */
    --theme-scrollbar: #3d4155;
    --theme-scrollbar-hover: #4d5169;

    /* Input / Form */
    --theme-input-bg: #1e2133;
    --theme-input-border: #2d3148;
    --theme-input-text: #e5e7eb;
    --theme-input-placeholder: #6b7280;
    --theme-input-disabled-bg: #252940;

    /* Menu / Sidebar */
    --theme-menu-bg: #161923;
    --theme-menu-hover: #242838;
    --theme-menu-active: #1e2a4a;
    --theme-menu-text: #d1d5db;

    /* Header */
    --theme-header-bg: #1a1d2e;
    --theme-header-border: #2d3148;

    /* Table */
    --theme-table-header-bg: #1e2133;
    --theme-table-row-hover: #242838;
    --theme-table-border: #2d3148;
    --theme-table-stripe: #1e2133;

    /* Popup / Modal */
    --theme-overlay: rgba(0, 0, 0, 0.7);
    --theme-popup-bg: #1a1d2e;

    /* Misc */
    --theme-divider: #2d3148;
    --theme-skeleton: #2d3148;
    --theme-badge-bg: #252940;
    --theme-tooltip-bg: #e5e7eb;
    --theme-tooltip-text: #1f2937;
}


/* ══════════════════════════════════════════════
   GLOBAL OVERRIDES - Theme-aware base styles
   ══════════════════════════════════════════════ */

html, body {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
    background-color: var(--theme-scrollbar) !important;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-scrollbar-hover) !important;
}
::-webkit-scrollbar-track {
    background-color: var(--theme-bg) !important;
}

/* ═══════════ Menu Card ═══════════ */
.menu-card {
    background: var(--theme-menu-bg) !important;
    border-color: var(--theme-border) !important;
}
.menu-card .menuitem {
    color: var(--theme-menu-text) !important;
}
.menu-card .menuitem:hover {
    background-color: transparent !important;
}
.menu-card .menuitem.active {
    background-color: transparent !important;
    color: #f7bb25 !important;
}

/* ═══════════ Common Card Styles ═══════════ */
.card,
.group,
.dash-card,
.kpi-card,
.info-card,
.stat-card,
.panel,
.widget {
    background: var(--theme-card) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

/* ═══════════ Headers ═══════════ */
.dash-header {
    background: var(--theme-header-bg) !important;
    border-bottom-color: var(--theme-header-border) !important;
}
.dash-header__title {
    color: var(--theme-text) !important;
}
.dash-header__sub,
.dash-header__user {
    color: var(--theme-text-secondary) !important;
}

/* ═══════════ DevExtreme Overrides ═══════════ */
[data-theme="dark"] .dx-widget {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-datagrid,
[data-theme="dark"] .dx-treelist {
    background-color: var(--theme-card) !important;
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-datagrid-headers,
[data-theme="dark"] .dx-treelist-headers {
    background-color: var(--theme-table-header-bg) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-table-border) !important;
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row,
[data-theme="dark"] .dx-treelist-rowsview .dx-row {
    background-color: var(--theme-card) !important;
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row:hover,
[data-theme="dark"] .dx-treelist-rowsview .dx-row:hover {
    background-color: var(--theme-table-row-hover) !important;
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row-alt,
[data-theme="dark"] .dx-treelist-rowsview .dx-row-alt {
    background-color: var(--theme-table-stripe) !important;
}

[data-theme="dark"] .dx-header-row td {
    border-color: var(--theme-table-border) !important;
}

[data-theme="dark"] .dx-datagrid-borders > .dx-datagrid-rowsview,
[data-theme="dark"] .dx-datagrid-borders > .dx-datagrid-headers {
    border-color: var(--theme-table-border) !important;
}

[data-theme="dark"] .dx-toolbar,
[data-theme="dark"] .dx-toolbar .dx-toolbar-items-container {
    background-color: var(--theme-card) !important;
}

[data-theme="dark"] .dx-texteditor {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
}

[data-theme="dark"] .dx-texteditor-input {
    color: var(--theme-input-text) !important;
}

[data-theme="dark"] .dx-placeholder::before {
    color: var(--theme-input-placeholder) !important;
}

[data-theme="dark"] .dx-popup-wrapper .dx-overlay-content {
    background-color: var(--theme-popup-bg) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] .dx-popup-title {
    background-color: var(--theme-header-bg) !important;
    color: var(--theme-text) !important;
    border-bottom-color: var(--theme-border) !important;
}

[data-theme="dark"] .dx-popup-bottom {
    background-color: var(--theme-header-bg) !important;
    border-top-color: var(--theme-border) !important;
}

[data-theme="dark"] .dx-list-item {
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] .dx-list-item:hover {
    background-color: var(--theme-menu-hover) !important;
}

[data-theme="dark"] .dx-dropdowneditor-overlay .dx-list,
[data-theme="dark"] .dx-dropdowneditor-overlay .dx-scrollview-content {
    background-color: var(--theme-card) !important;
}

[data-theme="dark"] .dx-field-label {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] .dx-form-group-caption {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-tab {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] .dx-tab.dx-tab-selected {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-tabs {
    background-color: var(--theme-card) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] .dx-menu-item .dx-menu-item-text {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-context-menu .dx-menu-item {
    background-color: var(--theme-card) !important;
}

[data-theme="dark"] .dx-context-menu .dx-menu-item:hover {
    background-color: var(--theme-menu-hover) !important;
}

[data-theme="dark"] .dx-scheduler-work-space,
[data-theme="dark"] .dx-scheduler-header {
    background-color: var(--theme-card) !important;
}

[data-theme="dark"] .dx-calendar {
    background-color: var(--theme-card) !important;
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-calendar-cell {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-pager {
    background-color: var(--theme-card) !important;
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] .dx-page {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] .dx-page.dx-selection {
    background-color: var(--theme-menu-active) !important;
    color: var(--theme-text) !important;
}

/* ═══════════ General Dark Overrides ═══════════ */
[data-theme="dark"] .vertical-line {
    background-color: var(--theme-border) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] hr {
    border-color: var(--theme-divider) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--theme-input-bg) !important;
    color: var(--theme-input-text) !important;
    border-color: var(--theme-input-border) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--theme-input-placeholder) !important;
}

/* ══════════════════════════════════════════════
   MODULE-WIDE DARK OVERRIDES
   Targets common patterns across pos, definition,
   personnel, billing, finance, etc.
   ══════════════════════════════════════════════ */

/* ═══════════ Page-level containers ═══════════ */
[data-theme="dark"] .page,
[data-theme="dark"] .page-container,
[data-theme="dark"] .main-container,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .container {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

/* ═══════════ Common white backgrounds ═══════════ */
[data-theme="dark"] .animation-createpost-container {
    background-color: var(--theme-bg) !important;
}

/* ═══════════ Side panels / drawers ═══════════ */
[data-theme="dark"] .side-panel,
[data-theme="dark"] .emp-side-panel,
[data-theme="dark"] .drawer,
[data-theme="dark"] .sidebar {
    background: var(--theme-card) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] .side-panel__header,
[data-theme="dark"] .emp-side-panel__header {
    background: var(--theme-card) !important;
    border-color: var(--theme-border) !important;
}

/* ═══════════ Info items / stat cards ═══════════ */
[data-theme="dark"] .emp-info-item,
[data-theme="dark"] .emp-perf-card,
[data-theme="dark"] .emp-punct-stat {
    background: var(--theme-card-alt) !important;
}

[data-theme="dark"] .emp-info-item__label,
[data-theme="dark"] .emp-section__title,
[data-theme="dark"] .emp-perf-card__label,
[data-theme="dark"] .emp-punct-stat__label {
    color: var(--theme-text-muted) !important;
}

[data-theme="dark"] .emp-info-item__value,
[data-theme="dark"] .emp-perf-card__value,
[data-theme="dark"] .emp-side-panel__name {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .emp-side-panel__meta,
[data-theme="dark"] .emp-side-panel__close {
    color: var(--theme-text-muted) !important;
}

/* ═══════════ Activity items ═══════════ */
[data-theme="dark"] .activity-item,
[data-theme="dark"] .emp-act-row__text,
[data-theme="dark"] .emp-punct-row__times {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] .employee-row:hover,
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .activity-item:hover,
[data-theme="dark"] .emp-act-row:hover,
[data-theme="dark"] .emp-punct-row:hover {
    background: var(--theme-card-hover) !important;
}

[data-theme="dark"] .employee-row__avatar {
    background: var(--theme-card-alt) !important;
}

/* ═══════════ AI Bubbles ═══════════ */
[data-theme="dark"] .ai-bubble__text,
[data-theme="dark"] .ai-float-bubble__text {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] .ai-bubble strong,
[data-theme="dark"] .ai-float-bubble__text strong {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .ai-bubble__label,
[data-theme="dark"] .ai-float-bubble__label {
    color: var(--theme-text-muted) !important;
}

[data-theme="dark"] .ai-bubble--skeleton {
    background: var(--theme-card-alt) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] .ai-skeleton-line {
    background: linear-gradient(90deg, var(--theme-border) 25%, var(--theme-card-alt) 50%, var(--theme-border) 75%) !important;
    background-size: 200% 100% !important;
}

/* ═══════════ Badge / Tag ═══════════ */
[data-theme="dark"] .dash-panel__badge {
    background: var(--theme-card-alt) !important;
}

/* ═══════════ Upgrade prompt ═══════════ */
[data-theme="dark"] .upgrade-prompt {
    background: var(--theme-popup-bg) !important;
}

[data-theme="dark"] .upgrade-prompt__title {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .upgrade-prompt__text {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] .upgrade-prompt__btn--ghost:hover {
    background: var(--theme-card-alt) !important;
}

/* ═══════════ Module-specific card patterns ═══════════ */
[data-theme="dark"] .checkout-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .order-card,
[data-theme="dark"] .invoice-card,
[data-theme="dark"] .report-card,
[data-theme="dark"] .setting-card,
[data-theme="dark"] .account-card {
    background: var(--theme-card) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

/* ═══════════ Tables (non-DevExtreme) ═══════════ */
[data-theme="dark"] table {
    color: var(--theme-text) !important;
}

[data-theme="dark"] th {
    background-color: var(--theme-table-header-bg) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-table-border) !important;
}

[data-theme="dark"] td {
    border-color: var(--theme-table-border) !important;
    color: var(--theme-text) !important;
}

[data-theme="dark"] tr:hover {
    background-color: var(--theme-table-row-hover) !important;
}

/* ═══════════ Labels / Headings ═══════════ */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--theme-text) !important;
}

[data-theme="dark"] label {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] p {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] span {
    color: inherit;
}

[data-theme="dark"] a {
    color: #60a5fa;
}

/* ═══════════ Buttons ═══════════ */
[data-theme="dark"] .dx-button-normal {
    background-color: var(--theme-card-alt) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-button-normal:hover {
    background-color: var(--theme-card-hover) !important;
}

/* ═══════════ Tooltip / Popover ═══════════ */
[data-theme="dark"] .dx-tooltip-wrapper .dx-overlay-content {
    background-color: var(--theme-tooltip-bg) !important;
    color: var(--theme-tooltip-text) !important;
}

/* ═══════════ Checkbox / Switch ═══════════ */
[data-theme="dark"] input[type=checkbox].cl-switcher {
    background: var(--theme-card-alt) !important;
}

/* ═══════════ DevExtreme Extra Overrides ═══════════ */
[data-theme="dark"] .dx-scrollview-content {
    background-color: transparent !important;
}

[data-theme="dark"] .dx-field-value {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-filterrow .dx-editor-cell {
    background-color: var(--theme-card-alt) !important;
}

[data-theme="dark"] .dx-header-filter-indicator {
    color: var(--theme-text-muted) !important;
}

[data-theme="dark"] .dx-datagrid-search-panel {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
}

[data-theme="dark"] .dx-datagrid-group-panel {
    background-color: var(--theme-card) !important;
    color: var(--theme-text-muted) !important;
}

[data-theme="dark"] .dx-numberbox,
[data-theme="dark"] .dx-textbox,
[data-theme="dark"] .dx-textarea,
[data-theme="dark"] .dx-datebox,
[data-theme="dark"] .dx-selectbox,
[data-theme="dark"] .dx-lookup {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
}

[data-theme="dark"] .dx-radiogroup .dx-radio-value-container {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-checkbox-text {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-loadpanel-content {
    background-color: var(--theme-card) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dx-overlay-shader {
    background-color: var(--theme-overlay) !important;
}

/* ═══════════ Chat Widget ═══════════ */
[data-theme="dark"] .chat-container,
[data-theme="dark"] .chat-messages,
[data-theme="dark"] .chat-input-container {
    background-color: var(--theme-card) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

[data-theme="dark"] .chat-header {
    background-color: var(--theme-header-bg) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] .chat-message {
    color: var(--theme-text) !important;
}

/* ═══════════ FAB Menu ═══════════ */
.fab-menu-toggle {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 10001;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #404FA8, #5C6BC0);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 16px rgba(64,79,168,.35);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
.fab-menu-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(64,79,168,.45);
}
.fab-menu-toggle .fa-xmark {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    transition: all 0.3s ease;
}
.fab-menu-toggle .fa-bars {
    transition: all 0.3s ease;
}
.fab-menu-toggle.open .fa-bars {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}
.fab-menu-toggle.open .fa-xmark {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.fab-menu-toggle.open {
    background: linear-gradient(135deg, #e04850, #FC5253);
}
.fab-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.15);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
}
.fab-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Show unread indicator on FAB toggle when chat has unread */
.fab-menu-toggle .fab-unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FC5253;
    border: 2px solid #fff;
    display: none;
    animation: fabDotPulse 2s ease-in-out infinite;
}
.fab-menu-toggle .fab-unread-dot.visible {
    display: block;
}
@keyframes fabDotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Hide FAB items by default, show when menu is open */
.chat-fab,
.theme-toggle,
.agent-fab {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.4) translateY(20px) !important;
    transition: all 0.25s cubic-bezier(.4,0,.2,1) !important;
}
.chat-fab.fab-menu-visible,
.theme-toggle.fab-menu-visible,
.agent-fab.fab-menu-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) translateY(0) !important;
}

/* ═══════════ Theme Toggle Button ═══════════ */
.theme-toggle {
    position: fixed;
    bottom: 148px;
    left: 28px;
    z-index: 10000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--theme-border);
    background: var(--theme-card);
    color: var(--theme-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: var(--theme-shadow-md);
    transition: all 0.3s ease;
}
.theme-toggle:hover {
    transform: scale(1.1) !important;
    box-shadow: var(--theme-shadow-lg);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
}
[data-theme="light"] .theme-toggle .icon-moon,
:root:not([data-theme]) .theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg);
}
[data-theme="light"] .theme-toggle .icon-sun,
:root:not([data-theme]) .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(-90deg);
}
[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg);
}
[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(90deg);
}