/* ==========================================================================
   RAQM ERP - DESIGN SYSTEM & STYLESHEET
   ========================================================================== */

/* --- Design Tokens / Variables --- */
:root {
    /* Brand Colors */
    --primary-color: #007F6D;
    --primary-hover: #006657;
    --primary-light: #e6f6f3;
    
    /* Neutral Light Palette */
    --bg-app: #f5f6f8;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --border-color: #e7e8eb;
    --text-primary: #0a1b39;
    --text-secondary: #626c7a;
    --text-muted: #9da4b0;
    --shadow-sm: 0 1px 2px rgba(10, 27, 57, 0.05);
    --shadow-md: 0 4px 12px rgba(10, 27, 57, 0.06);
    --shadow-lg: 0 12px 24px rgba(10, 27, 57, 0.08);
    
    /* Status Badge Colors */
    --badge-posted-bg: #e6f0fa;
    --badge-posted-txt: #0c57c4;
    --badge-draft-bg: #eef0f2;
    --badge-draft-txt: #626c7a;
    --badge-paid-bg: #e6f6f3;
    --badge-paid-txt: #007F6D;
    --badge-overdue-bg: #fdebeb;
    --badge-overdue-txt: #ef1e1e;
    --badge-partial-bg: #fff6e6;
    --badge-partial-txt: #b26a00;
    
    /* Layout Dimensions */
    --sidebar-width: 264px;
    --sidebar-collapsed-width: 76px;
    --navbar-height: 64px;
    
    /* Borders */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    
    /* Animations */
    --transition-speed: 0.3s;
    --transition-curve: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Dark Mode Overrides --- */
body.dark-mode {
    --bg-app: #081225;
    --bg-card: #0c1930;
    --bg-sidebar: #0c1930;
    --border-color: #1a2a47;
    --text-primary: #f5f6f8;
    --text-secondary: #a3afc2;
    --text-muted: #6e7d95;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4);
    
    --badge-posted-bg: rgba(12, 87, 196, 0.15);
    --badge-posted-txt: #5ca1ff;
    --badge-draft-bg: rgba(98, 108, 122, 0.15);
    --badge-draft-txt: #a3afc2;
    --badge-paid-bg: rgba(0, 127, 109, 0.15);
    --badge-paid-txt: #33ccb6;
    --badge-overdue-bg: rgba(239, 30, 30, 0.15);
    --badge-overdue-txt: #ff6b6b;
    --badge-partial-bg: rgba(178, 106, 0, 0.15);
    --badge-partial-txt: #ffb84d;
}

/* --- Base Resets --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-app);
    color: var(--text-primary);
    transition: background-color var(--transition-speed) var(--transition-curve),
                color var(--transition-speed) var(--transition-curve);
    -webkit-font-smoothing: antialiased;
}

input, button, select, textarea {
    font-family: inherit;
    color: inherit;
    border: none;
    background: none;
    outline: none;
}

ul {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

/* --- Application Layout --- */
.app-container {
    display: flex;
    min-height: 100vh;
    width: 100vw;
}

/* --- Sidebar Styles --- */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transition: width var(--transition-speed) var(--transition-curve),
                background-color var(--transition-speed) var(--transition-curve),
                border-color var(--transition-speed) var(--transition-curve);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar-header {
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    white-space: nowrap;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background-color: var(--primary-light);
    color: var(--primary-color);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-speed);
}

body.dark-mode .logo-icon {
    background-color: rgba(0, 127, 109, 0.15);
}

.logo-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--text-primary);
}

.collapse-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--bg-card);
    color: var(--text-secondary);
    transition: transform var(--transition-speed), border-color var(--transition-speed);
}

.collapse-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.sidebar.collapsed .collapse-btn {
    transform: rotate(180deg);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
}

/* Sidebar scrollbar styling */
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 2px;
}
.sidebar:hover .sidebar-nav::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
}

.nav-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    padding: 10px 24px;
    transition: opacity var(--transition-speed);
}

.sidebar.collapsed .nav-section-label {
    opacity: 0;
    pointer-events: none;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
}

.nav-item {
    width: 100%;
}

.nav-link, .submenu-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    gap: 12px;
    position: relative;
    transition: background-color 0.2s, color 0.2s;
    text-align: left;
}

.nav-link:hover, .submenu-trigger:hover {
    background-color: var(--bg-app);
    color: var(--text-primary);
}

.nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nav-text {
    flex: 1;
    white-space: nowrap;
    opacity: 1;
    transition: opacity var(--transition-speed);
}

.sidebar.collapsed .nav-text,
.sidebar.collapsed .chevron-icon {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 80px;
}

.chevron-icon {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-speed);
}

/* Expandable submenu states */
.has-submenu.expanded > .submenu-trigger > .chevron-icon {
    transform: rotate(180deg);
}

.submenu {
    max-height: 0;
    overflow: hidden;
    padding-left: 12px;
    transition: max-height var(--transition-speed) ease-out;
}

.has-submenu.expanded > .submenu {
    max-height: 1000px;
    transition: max-height var(--transition-speed) ease-in;
}

.submenu-item {
    margin-top: 2px;
}

.submenu-trigger.inner-trigger {
    padding-left: 16px;
    font-size: 13px;
    background-color: transparent;
}

.submenu-item.active-parent > .submenu-trigger.inner-trigger {
    background-color: var(--bg-app);
    color: var(--text-primary);
    font-weight: 600;
}

.submenu-inner {
    max-height: 0;
    overflow: hidden;
    padding-left: 20px;
    border-left: 1px solid var(--border-color);
    margin-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: max-height var(--transition-speed) ease-out;
}

.submenu-item.active-parent > .submenu-inner {
    max-height: 500px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.inner-item {
    position: relative;
}

.inner-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: color 0.2s, background-color 0.2s;
}

.inner-link:hover {
    color: var(--text-primary);
}

.inner-item.active .inner-link {
    color: var(--primary-color);
    font-weight: 600;
    background-color: var(--primary-light);
}

body.dark-mode .inner-item.active .inner-link {
    background-color: rgba(0, 127, 109, 0.15);
}

.bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--text-muted);
    transition: background-color 0.2s, transform 0.2s;
}

.inner-item.active .bullet {
    background-color: var(--primary-color);
    transform: scale(1.2);
}

.submenu-link-item {
    display: flex;
    align-items: center;
    padding: 10px 12px 10px 16px;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    gap: 12px;
    transition: background-color 0.2s, color 0.2s;
}

.submenu-link-item:hover {
    background-color: var(--bg-app);
    color: var(--text-primary);
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 16px 12px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dark-mode-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: var(--bg-app);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-speed);
}

.dark-mode-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .dark-mode-label span,
.sidebar.collapsed .dark-mode-label i {
    transition: opacity var(--transition-speed);
}

.sidebar.collapsed .dark-mode-container {
    justify-content: center;
    padding: 8px 0;
}

.sidebar.collapsed .dark-mode-label {
    display: none;
}

/* Switch Toggle Switch */
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    flex-shrink: 0;
}

.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-round {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--text-muted);
    transition: .3s;
    border-radius: 34px;
}

.slider-round:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .slider-round {
    background-color: var(--primary-color);
}

input:checked + .slider-round:before {
    transform: translateX(18px);
}

.logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    color: var(--primary-color);
    background-color: var(--primary-light);
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    white-space: nowrap;
    overflow: hidden;
}

body.dark-mode .logout-btn {
    background-color: rgba(0, 127, 109, 0.15);
}

.logout-btn:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-1px);
}

.logout-icon {
    width: 16px;
    height: 16px;
}

.sidebar.collapsed .logout-text {
    display: none;
}

.sidebar.collapsed .logout-btn {
    padding: 12px 0;
    width: 44px;
    margin: 0 auto;
}

/* --- Main Content Layout --- */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    min-width: 0;
    max-width: calc(100vw - var(--sidebar-width));
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: margin-left var(--transition-speed) var(--transition-curve);
}

.sidebar.collapsed + .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* --- Top Navigation Bar --- */
.top-navbar {
    height: var(--navbar-height);
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    /* Was 46px, which is the height of .odoo-app-navbar, not an offset. It
       left a 46px hole above the bar and let it overlap the page title, and it
       disagreed with .sidebar-header, which is pinned to top: 0. */
    top: 0;
    z-index: 50;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    max-width: 600px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.nav-search-bar {
    display: flex;
    align-items: center;
    background-color: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    width: 100%;
    max-width: 320px;
    gap: 8px;
    transition: border-color 0.2s, background-color var(--transition-speed);
}

.nav-search-bar:focus-within {
    border-color: var(--primary-color);
    background-color: var(--bg-card);
}

.search-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.nav-search-bar input {
    font-size: 13px;
    width: 100%;
    color: var(--text-primary);
}

.nav-search-bar input::placeholder {
    color: var(--text-muted);
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.nav-action-btn:hover {
    background-color: var(--bg-app);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.notification-btn {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    background-color: var(--badge-overdue-txt);
    border-radius: 50%;
}

.user-avatar-container {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: border-color 0.2s;
}

.user-avatar-container:hover {
    border-color: var(--primary-color);
}

.user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Dashboard Body --- */
.dashboard-body {
    padding: 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    overflow: visible;
}

/* --- Page Header --- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    width: 100%;
    min-height: 52px;
}

.page-title-area {
    min-width: 0;
    flex-shrink: 1;
    flex: 1;
}

.page-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.breadcrumbs ol {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.breadcrumbs ol li {
    list-style-type: none !important;
}

.breadcrumbs a {
    color: var(--text-secondary);
    transition: color 0.2s;
}

.breadcrumbs a:hover {
    color: var(--primary-color);
}

.breadcrumbs .active {
    color: var(--text-muted);
    font-weight: 400;
}

/* Header Floating Popovers */
.nav-popover-floating {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
    z-index: 999999 !important;
    width: 320px;
    padding: 16px;
    animation: fadeInDown 0.18s ease-out;
}

.dark-mode .nav-popover-floating {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

/* Row Action Dropdown Menu */
.row-action-popover-floating {
    position: fixed;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    z-index: 999999 !important;
    width: 170px;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    animation: fadeInDown 0.15s ease-out;
}

body.dark-mode .row-action-popover-floating {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.row-action-popover-floating .menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

.row-action-popover-floating .menu-item:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

.row-action-popover-floating .menu-item.danger:hover {
    background-color: #fef2f2;
    color: #ef4444;
}

/* Filter Tabs Styling */
.filter-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-app);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.filter-tab {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tab:hover {
    color: var(--text-primary);
}

.filter-tab.active {
    background: var(--bg-card);
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Filter Bar (inventory / purchase / report pages) --- */
.filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.filter-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-app);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.filter-pill {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-pill:hover {
    color: var(--text-primary);
}

.filter-pill.active {
    background: var(--bg-card);
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-actions .search-box,
.search-box {
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    width: 220px;
    gap: 8px;
    transition: border-color 0.2s, background-color var(--transition-speed);
}

.search-box:focus-within {
    border-color: var(--primary-color);
    background-color: var(--bg-card);
}

.search-box svg,
.search-box .search-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-box input {
    font-size: 13px;
    width: 100%;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
}

.search-box input::placeholder {
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .search-box {
        width: 100%;
    }
}

/* Detail pages: form sheet + Odoo-style side action panel */
@media (max-width: 1024px) {
    .detail-layout {
        grid-template-columns: 1fr !important;
    }
    .detail-actions-panel {
        position: static !important;
        order: 0 !important;
    }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.popover-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.popover-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
}

.popover-item:hover {
    background: var(--bg-app);
}

.popover-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.popover-item-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}

.popover-item-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Odoo API Modal */
.odoo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.odoo-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    width: 480px;
    max-width: 90vw;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Buttons System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    gap: 8px;
    transition: all 0.2s var(--transition-curve);
    height: 38px;
}

.btn-icon {
    width: 16px;
    height: 16px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 4px 10px rgba(0, 127, 109, 0.2);
}

.btn-outline {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-outline:hover {
    background-color: var(--bg-app);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.btn-icon-only {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-only:hover {
    background-color: var(--bg-app);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.btn-icon-square {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-square:hover, .btn-icon-square.active {
    background-color: var(--bg-app);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.btn-icon-square.active {
    background-color: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark-mode .btn-icon-square.active {
    background-color: rgba(0, 127, 109, 0.15);
}

/* --- Table Card Panel --- */
.table-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

/* Table Toolbar */
.table-toolbar {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
}

.status-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-pill {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 20px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    transition: all 0.2s var(--transition-curve);
}

.filter-pill:hover {
    background-color: var(--bg-app);
    color: var(--text-primary);
}

.filter-pill.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-weight: 600;
}

.toolbar-actions, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.toolbar-search, .search-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.toolbar-search input, .table-search-input {
    padding: 8px 12px 8px 36px !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-app);
    color: var(--text-primary);
    font-size: 13px;
    width: 220px;
    transition: border-color 0.2s;
}

.toolbar-search .search-icon, .search-input-container .search-icon {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}
.toolbar-search {
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 12px 6px 36px;
    width: 220px;
    gap: 8px;
    transition: border-color 0.2s, background-color var(--transition-speed);
}

.toolbar-search:focus-within {
    border-color: var(--primary-color);
    background-color: var(--bg-card);
}

.toolbar-search input {
    font-size: 13px;
    width: 100%;
    color: var(--text-primary);
    background: transparent;
    border: none;
}

.toolbar-search input::placeholder {
    color: var(--text-muted);
}

.view-toggles {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Responsive Table --- */
.table-responsive {
    overflow-x: auto;
    width: 100%;
}

.invoices-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

.invoices-table th {
    background-color: var(--bg-app);
    color: var(--text-secondary);
    font-weight: 600;
    padding: 14px 20px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.invoices-table td {
    padding: 16px 20px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    transition: background-color 0.15s, border-color var(--transition-speed);
}

.invoices-table tbody tr {
    transition: background-color 0.15s;
}

.invoices-table tbody tr:hover {
    background-color: rgba(10, 27, 57, 0.015);
}

body.dark-mode .invoices-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.invoices-table tbody tr.row-selected {
    background-color: rgba(0, 127, 109, 0.03);
}

body.dark-mode .invoices-table tbody tr.row-selected {
    background-color: rgba(0, 127, 109, 0.08);
}

/* Table columns layout alignment */
.col-checkbox {
    width: 48px;
    padding-right: 0 !important;
}

.col-center {
    text-align: center;
    justify-content: center;
}

.inv-number {
    font-weight: 600;
    color: var(--text-primary);
}

.customer-cell {
    font-weight: 500;
}

.amount {
    font-weight: 500;
    font-family: 'Inter', monospace;
}

.currency-total {
    font-weight: 700;
    color: var(--text-primary);
}

/* Checkbox Custom Styling */
.custom-checkbox {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
}

.custom-checkbox input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.custom-checkbox label {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--text-muted);
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.custom-checkbox input[type="checkbox"]:checked + label {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.custom-checkbox input[type="checkbox"]:checked + label::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: capitalize;
}

.status-badge.posted {
    background-color: var(--badge-posted-bg);
    color: var(--badge-posted-txt);
}

.status-badge.draft {
    background-color: var(--badge-draft-bg);
    color: var(--badge-draft-txt);
}

.status-badge.paid {
    background-color: var(--badge-paid-bg);
    color: var(--badge-paid-txt);
}

.status-badge.overdue {
    background-color: var(--badge-overdue-bg);
    color: var(--badge-overdue-txt);
}

.status-badge.partial {
    background-color: var(--badge-partial-bg);
    color: var(--badge-partial-txt);
}

/* Table elements */
.activity-icon {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.row-actions-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: background-color 0.15s, color 0.15s;
}

.row-actions-btn:hover {
    background-color: var(--bg-app);
    color: var(--text-primary);
}

/* --- Modals System --- */
/* Generic floating overlay used by dynamically created modals (app.js) and
   page-level modals (e.g. inventory-scrap.html). Hidden by default; pages
   toggle it with an inline display:flex. */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(10, 27, 57, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(10, 27, 57, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed) var(--transition-curve);
}

.modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 500px;
    padding: 24px;
    transform: translateY(20px);
    transition: transform var(--transition-speed) var(--transition-curve);
}

.modal-backdrop.open .modal-container {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.close-modal-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background-color 0.2s;
}

.close-modal-btn:hover {
    background-color: var(--bg-app);
    color: var(--text-primary);
}

.form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-group input, .form-group select {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    background-color: var(--bg-app);
    color: var(--text-primary);
    width: 100%;
    transition: border-color 0.2s, background-color 0.2s;
}

.form-group input:focus, .form-group select:focus {
    border-color: var(--primary-color);
    background-color: var(--bg-card);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

/* --- Invoice / Bill Line Items Builder (Odoo-style) --- */
.invoice-lines-table {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    /* Intentionally not clipped (overflow: visible) so the product
       suggestion dropdown isn't cut off by this container's edges. */
}

.invoice-line-head {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.invoice-line-row:last-child {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.invoice-line-head,
.invoice-line-row {
    display: grid;
    grid-template-columns: 1fr 64px 100px 100px 28px;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
}

.invoice-line-head {
    background-color: var(--bg-app);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.invoice-line-head span:nth-child(2),
.invoice-line-head span:nth-child(3),
.invoice-line-head span:nth-child(4) {
    text-align: right;
}

.invoice-line-row {
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-card);
}

.invoice-line-row .line-qty-input,
.invoice-line-row .line-price-input {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
    text-align: right;
    background-color: var(--bg-app);
    color: var(--text-primary);
    width: 100%;
}

.line-product-cell {
    position: relative;
}

.line-product-input {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
    background-color: var(--bg-app);
    color: var(--text-primary);
    width: 100%;
}

.line-product-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    z-index: 40;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.line-product-suggestions.open {
    display: block;
}

.line-product-suggestion {
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.line-product-suggestion:hover,
.line-product-suggestion.active {
    background-color: var(--bg-app);
}

.line-product-suggestion span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-product-suggestion .suggestion-price {
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.line-subtotal-display {
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.line-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
}

.line-remove-btn:hover {
    background-color: var(--danger-bg, rgba(239, 68, 68, 0.1));
    color: var(--danger-color, #ef4444);
}

.line-remove-btn i {
    width: 14px;
    height: 14px;
}

.add-line-btn {
    margin-top: 10px;
}

.invoice-total-row {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 4px 0;
    font-size: 14px;
}

.invoice-total-row .invoice-total-label {
    color: var(--text-secondary);
    font-weight: 600;
}

.invoice-total-row .invoice-total-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1100;
}

.toast {
    background-color: var(--text-primary);
    color: var(--bg-card);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(50px);
    opacity: 0;
    animation: toast-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes toast-in {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- Responsive Adaptations --- */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 76px;
    }
    
    .logo-text, .nav-text, .chevron-icon, .nav-section-label, .dark-mode-label, .logout-text {
        display: none !important;
    }
    
    .sidebar-header {
        justify-content: center;
        padding: 0;
    }
    
    .collapse-btn {
        display: none;
    }
    
    .nav-menu {
        padding: 0 8px;
    }
    
    .nav-link, .submenu-trigger {
        justify-content: center;
        padding: 12px 0;
    }
    
    .submenu, .submenu-inner {
        display: none !important;
    }
    
    .dark-mode-container {
        justify-content: center;
        padding: 8px 0;
    }
    
    .logout-btn {
        padding: 12px 0;
        width: 44px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100% !important;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    .sidebar-header {
        padding: 0 20px;
    }
    
    .logo-text {
        display: block !important;
    }
    
    .sidebar-nav, .sidebar-footer {
        display: none;
    }
    
    .main-content {
        margin-left: 0 !important;
    }
    
    .top-navbar {
        padding: 0 16px;
    }
    
    .nav-search-bar {
        display: none;
    }
    
    .dashboard-body {
        padding: 16px;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .page-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .toolbar-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .toolbar-search {
        width: 100%;
    }
}

/* ==========================================================================
   KPI GRID & DASHBOARD CARDS
   ========================================================================== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.kpi-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s, background-color var(--transition-speed);
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kpi-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.kpi-icon-container {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-icon-container.sales {
    background-color: var(--badge-paid-bg);
    color: var(--badge-paid-txt);
}

.kpi-icon-container.expenses {
    background-color: var(--badge-draft-bg);
    color: var(--badge-draft-txt);
}

.kpi-icon-container.unpaid {
    background-color: var(--badge-overdue-bg);
    color: var(--badge-overdue-txt);
}

.kpi-icon-container.profit {
    background-color: var(--badge-posted-bg);
    color: var(--badge-posted-txt);
}

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.kpi-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
}

.text-success {
    color: var(--badge-paid-txt);
}

.text-success-reverse {
    color: var(--badge-paid-txt);
}

.text-error {
    color: var(--badge-overdue-txt);
}

/* ==========================================================================
   PANELS GRID & CHARTS
   ========================================================================== */
.dashboard-panels-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

@media (max-width: 1024px) {
    .dashboard-panels-grid {
        grid-template-columns: 1fr;
    }
}

.panel-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.panel-body {
    padding: 24px;
}

.chart-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 280px;
}

.mock-chart-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 180px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
}

.chart-bar-group {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100%;
    position: relative;
}

.bar {
    width: 16px;
    border-radius: 4px 4px 0 0;
    transition: opacity 0.2s, height 0.3s ease;
    cursor: pointer;
}

.bar:hover {
    opacity: 0.8;
}

.bar-revenue {
    background-color: var(--primary-color);
}

.bar-expense {
    background-color: var(--text-muted);
}

.bar-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.chart-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-revenue {
    background-color: var(--primary-color);
}

.dot-expense {
    background-color: var(--text-muted);
}

/* ==========================================================================
   RECENT ACTIVITY LIST
   ========================================================================== */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.activity-icon-container {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon-container i {
    width: 16px;
    height: 16px;
}

.activity-icon-container.posted {
    background-color: var(--badge-posted-bg);
    color: var(--badge-posted-txt);
}

.activity-icon-container.paid {
    background-color: var(--badge-paid-bg);
    color: var(--badge-paid-txt);
}

.activity-icon-container.overdue {
    background-color: var(--badge-overdue-bg);
    color: var(--badge-overdue-txt);
}

.activity-icon-container.created {
    background-color: var(--badge-draft-bg);
    color: var(--badge-draft-txt);
}

.activity-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.activity-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}

.activity-text strong {
    font-weight: 600;
}

.activity-time {
    font-size: 11px;
    color: var(--text-muted);
}

/* ==========================================================================
   PRODUCTS CATALOG GRID
   ========================================================================== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}

.product-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color var(--transition-speed);
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.product-img-placeholder {
    height: 140px;
    background-color: var(--bg-app);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: background-color var(--transition-speed);
}

.product-img-placeholder i {
    width: 48px;
    height: 48px;
}

.product-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.product-sku {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.product-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    flex: 1;
}

.product-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.product-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    font-family: 'Inter', monospace;
}

/* ========================================================================== 
   SHARED APPLICATION TABLES
   ========================================================================== */
.data-table-wrap {
    width: 100%;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.data-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-primary);
}

.data-table th {
    padding: 13px 18px;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.45;
    vertical-align: middle;
    white-space: nowrap;
}

.data-table tbody tr { transition: background-color .18s ease; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--primary-light) 45%, transparent); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .cell-primary { font-weight: 650; }
.data-table .cell-secondary { color: var(--text-secondary); }
.data-table .cell-amount { color: var(--primary-color); font-weight: 700; font-variant-numeric: tabular-nums; }

.table-empty-state {
    display: flex;
    min-height: 250px;
    padding: 36px 20px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: var(--text-secondary);
    text-align: center;
}

.table-empty-state .empty-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary-color);
}

.table-empty-state .empty-icon svg { width: 24px; height: 24px; }
.table-empty-state h3 { margin: 4px 0 0; color: var(--text-primary); font-size: 15px; }
.table-empty-state p { max-width: 430px; margin: 0; font-size: 12px; line-height: 1.65; }

.module-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--badge-paid-bg);
    color: var(--badge-paid-txt);
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
}

.module-status.neutral { background: var(--bg-app); color: var(--text-secondary); }
.module-status.warning { background: var(--badge-draft-bg); color: var(--badge-draft-txt); }
.module-status.danger { background: var(--badge-overdue-bg); color: var(--badge-overdue-txt); }

@media (max-width: 768px) {
    .data-table th, .data-table td { padding-left: 14px; padding-right: 14px; }
}

/* Odoo-compatible list controls */
.odoo-search-control{position:relative;padding:12px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-card)}
.odoo-search-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:none;margin-left:0;border:0;background:transparent;padding:0}
.odoo-search-main>i,.odoo-search-main>svg{display:none}
.odoo-search-main input{flex:1 1 240px;min-width:230px;height:38px;border:1px solid var(--border-color);border-radius:9px;padding:0 13px 0 36px;outline:none;background:var(--bg-app) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 11px center;background-size:16px;color:var(--text-primary);font:inherit;font-size:13px;transition:border-color .15s,box-shadow .15s}
.odoo-search-main input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-light)}
.odoo-search-main button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border:1px solid var(--border-color);border-radius:9px;background:var(--bg-card);color:var(--text-secondary);font-weight:600;font-size:12.5px;white-space:nowrap;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.odoo-search-main button:hover{border-color:var(--primary-color);color:var(--primary-color)}
.odoo-search-main button.active{background:var(--primary-light);color:var(--primary-color);border-color:var(--primary-color)}
.odoo-search-main button svg{width:15px;height:15px}
.odoo-filter-panel{display:none;position:absolute;z-index:1100;right:18px;top:calc(100% + 12px);width:min(680px,calc(100vw - 50px));grid-template-columns:1.3fr 1fr 1fr;gap:0;background:var(--bg-card);border:1px solid var(--border-color);border-radius:13px;box-shadow:0 20px 50px rgba(15,23,42,.16);overflow:hidden}.odoo-filter-panel.show{display:grid}
.odoo-filter-panel section{padding:17px;border-right:1px solid var(--border-color)}.odoo-filter-panel section:last-of-type{border-right:0}.odoo-filter-panel h4{margin:0 0 11px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.odoo-chip-grid{display:flex;flex-wrap:wrap;gap:7px}.odoo-chip-grid button{border:1px solid var(--border-color);border-radius:999px;padding:6px 9px;background:var(--bg-app);color:var(--text-secondary);font:inherit;font-size:11px;cursor:pointer}.odoo-chip-grid button.active{border-color:var(--primary-color);background:var(--primary-light);color:var(--primary-color);font-weight:700}
.odoo-date-range{display:grid;gap:7px}.odoo-date-range input,.odoo-filter-panel select{width:100%;border:1px solid var(--border-color);border-radius:8px;padding:8px;background:var(--bg-app);color:var(--text-primary);font:inherit;font-size:11px}.odoo-date-range span{font-size:10px;color:var(--text-muted)}
.odoo-filter-panel footer{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding:11px 17px;border-top:1px solid var(--border-color)}.odoo-filter-panel footer button{border:1px solid var(--border-color);border-radius:8px;padding:7px 13px;background:var(--bg-card);color:var(--text-secondary);font-weight:700;cursor:pointer}.odoo-filter-panel footer .primary{border-color:var(--primary-color);background:var(--primary-color);color:#fff}
.odoo-selection-bar{display:none;align-items:center;gap:8px;padding:11px 18px;background:var(--primary-light);border-bottom:1px solid color-mix(in srgb,var(--primary-color) 20%,var(--border-color));color:var(--primary-color);flex-wrap:wrap}.odoo-selection-bar.show{display:flex}.odoo-selection-bar strong{margin-right:auto;font-size:12px}.odoo-selection-bar button{display:inline-flex;align-items:center;gap:5px;border:1px solid color-mix(in srgb,var(--primary-color) 35%,var(--border-color));border-radius:8px;padding:7px 10px;background:var(--bg-card);color:var(--primary-color);font:inherit;font-size:11px;font-weight:700;cursor:pointer}.odoo-selection-bar button svg{width:14px}.odoo-selection-bar button:disabled{opacity:.5}.odoo-actions-wrap{position:relative}.odoo-actions-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:210px;padding:6px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-card);box-shadow:0 14px 34px rgba(15,23,42,.16)}.odoo-actions-menu button{display:block;width:100%;border:0;background:none;text-align:left;padding:9px 10px;border-radius:7px}.odoo-actions-menu button:hover{background:var(--bg-app)}.raqm-print-sheet{display:none}.raqm-print-sheet table{width:100%;border-collapse:collapse}.raqm-print-sheet th,.raqm-print-sheet td{border-bottom:1px solid #d7dde5;padding:8px 10px;text-align:left}
.audit-trigger{display:inline-grid;place-items:center;border:0;background:transparent;color:var(--text-muted);cursor:pointer}.audit-trigger svg{width:16px;height:16px}.audit-trigger:hover{color:var(--primary-color)}
.odoo-pager{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-top:1px solid var(--border-color);color:var(--text-secondary);font-size:11px}.odoo-pager>div{display:flex;align-items:center;gap:9px}.odoo-pager button{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);color:var(--text-secondary);cursor:pointer}.odoo-pager button:disabled{opacity:.35}.odoo-pager svg{width:14px}
.odoo-empty{text-align:center!important;padding:34px!important;color:var(--text-muted)!important}.odoo-empty.error{color:#dc2626!important}.odoo-group-row td{background:var(--bg-app)}.odoo-group-row strong{margin-right:9px}.odoo-group-row span{color:var(--text-muted);font-size:11px}
/* Rows that match the active filter get a light distinctive tint */
tbody tr.raqm-filter-hit>td{background:color-mix(in srgb,var(--primary-color) 9%,transparent)}
tbody tr.raqm-filter-hit>td:first-child{box-shadow:inset 3px 0 0 var(--primary-color)}
tbody tr.raqm-filter-hit>td .status-badge{box-shadow:none}
/* Rows outside the current journal-entries page (kept in DOM so search/filter stays global) */
tbody tr.off{display:none}
#odoo-audit-overlay{position:fixed;z-index:1998;inset:0;background:rgba(15,23,42,.28);opacity:0;visibility:hidden;transition:.2s}#odoo-audit-drawer.show+#odoo-audit-overlay{opacity:1;visibility:visible}
#odoo-audit-drawer{position:fixed;z-index:1999;top:0;right:0;width:min(440px,100%);height:100vh;background:var(--bg-card);border-left:1px solid var(--border-color);box-shadow:-18px 0 50px rgba(15,23,42,.14);transform:translateX(102%);transition:transform .25s ease;display:flex;flex-direction:column}#odoo-audit-drawer.show{transform:none}#odoo-audit-drawer>header{display:flex;align-items:center;justify-content:space-between;padding:19px 20px;border-bottom:1px solid var(--border-color)}#odoo-audit-drawer h3{margin:0;font-size:16px}#odoo-audit-drawer header p{margin:3px 0 0;color:var(--text-muted);font-size:11px}#odoo-audit-drawer header button{border:0;background:transparent;color:var(--text-secondary);cursor:pointer}.audit-timeline{overflow:auto;padding:20px}.audit-event{position:relative;display:grid;grid-template-columns:18px 1fr;gap:10px;padding-bottom:22px}.audit-event:before{content:"";position:absolute;left:6px;top:15px;bottom:0;border-left:1px solid var(--border-color)}.audit-event:last-child:before{display:none}.audit-dot{position:relative;z-index:1;width:13px;height:13px;margin-top:3px;border-radius:50%;border:3px solid var(--primary-light);background:var(--primary-color)}.audit-event header{display:flex;justify-content:space-between;gap:8px}.audit-event header strong{font-size:12px}.audit-event time{color:var(--text-muted);font-size:10px}.audit-event h4{margin:7px 0 3px;font-size:12px}.audit-event p{margin:5px 0;color:var(--text-secondary);font-size:11px;line-height:1.6}.audit-change{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:6px;margin-top:7px;padding:8px;border-radius:8px;background:var(--bg-app);font-size:10px}.audit-change b{grid-column:1/-1;color:var(--text-secondary)}.audit-change svg{width:12px;color:var(--text-muted)}
.odoo-import-card{width:min(760px,calc(100vw - 32px));max-height:82vh;overflow:auto;border-radius:14px;background:var(--bg-card);box-shadow:0 24px 70px rgba(15,23,42,.25);padding:22px}.odoo-import-card h3{margin:0 0 4px}.odoo-import-card>p,.odoo-import-card>small{color:var(--text-muted);font-size:12px}.odoo-import-table{overflow:auto;margin:16px 0;border:1px solid var(--border-color);border-radius:9px}.odoo-import-table table{width:100%;border-collapse:collapse;font-size:11px}.odoo-import-table th,.odoo-import-table td{padding:9px;border-bottom:1px solid var(--border-color);text-align:left;white-space:nowrap}.odoo-import-table th{background:var(--bg-app);color:var(--text-secondary)}.odoo-import-card footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.odoo-import-card footer button{border:1px solid var(--border-color);border-radius:8px;padding:9px 14px;background:var(--bg-card);cursor:pointer}.odoo-import-card footer .primary{border-color:var(--primary-color);background:var(--primary-color);color:#fff}
#odoo-panel-close{position:absolute;z-index:2;top:8px;right:8px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--text-muted);cursor:pointer}#odoo-panel-close:hover{background:var(--bg-app);color:var(--text-primary)}#odoo-panel-close svg{width:16px}
.odoo-native-control-hidden{display:none!important}.odoo-universal-shell{margin-bottom:12px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-card)}.odoo-universal-shell .odoo-filter-panel{top:calc(100% + 6px)}.odoo-universal-shell .odoo-filter-panel[data-open="group"] .odoo-chip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.odoo-shell-group td{padding:10px 14px!important;background:var(--bg-app)!important;color:var(--text-primary)!important}.odoo-shell-group strong{margin-right:10px}.odoo-shell-group span{color:var(--text-muted);font-size:11px}
@media(max-width:720px){.odoo-filter-panel.show{display:block}.odoo-filter-panel section{border-right:0;border-bottom:1px solid var(--border-color)}.odoo-selection-bar{overflow:auto}.odoo-selection-bar strong{white-space:nowrap}.odoo-search-main{max-width:none}}
.odoo-custom-filter{margin-top:14px;border-top:1px solid var(--border-color);padding-top:12px}.odoo-custom-filter summary{cursor:pointer;color:var(--primary-color);font-size:12px;font-weight:700}.odoo-custom-filter>div{display:grid;gap:7px;margin-top:10px}.odoo-custom-filter select,.odoo-custom-filter input,#odoo-favorites-list+button{width:100%;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-app);color:var(--text-primary);padding:8px;font:inherit;font-size:11px}#odoo-favorites-list{display:grid;gap:6px;margin-bottom:9px}#odoo-favorites-list>div{display:grid;grid-template-columns:1fr 30px;gap:5px}#odoo-favorites-list button{border:1px solid var(--border-color);border-radius:8px;background:var(--bg-app);color:var(--text-secondary);padding:7px;text-align:left;cursor:pointer}#odoo-favorites-list button:last-child{text-align:center;color:var(--danger-color)}#odoo-favorites-list small{color:var(--text-muted)}#odoo-save-favorite{display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}#odoo-save-favorite svg{width:14px}
.odoo-search-main{max-width:none}.odoo-search-main>input{min-width:230px}.odoo-search-main>button{white-space:nowrap}#odoo-search-facets{display:flex;align-items:center;flex-wrap:wrap;gap:6px;overflow:auto;max-width:none;flex:1 1 100%;order:10;padding-top:3px}#odoo-search-facets:empty{display:none}#odoo-search-facets>span{display:flex;align-items:center;gap:4px;white-space:nowrap;border-radius:5px;background:var(--primary-light);color:var(--primary-color);padding:5px 6px;font-size:10px;font-weight:700}#odoo-search-facets button{border:0!important;padding:0!important;color:inherit;background:transparent;font-size:15px;line-height:1}.odoo-filter-panel[data-open] > section{display:none}.odoo-filter-panel[data-open="filters"] > section[data-menu="filters"],.odoo-filter-panel[data-open="group"] > section[data-menu="group"],.odoo-filter-panel[data-open="favorites"] > section[data-menu="favorites"]{display:block;border-right:0}.odoo-filter-panel[data-open]{grid-template-columns:minmax(320px,520px);right:0;left:auto;width:min(520px,calc(100vw - 40px))}.odoo-rule{display:grid!important;grid-template-columns:1fr 1.1fr 1fr 28px;gap:5px}.odoo-rule select,.odoo-rule input{min-width:0}.odoo-rule button,#odoo-add-rule{border:1px solid var(--border-color);border-radius:7px;background:var(--bg-app);color:var(--text-secondary);cursor:pointer}#odoo-add-rule{padding:7px 10px;margin-top:7px;color:var(--primary-color);font-weight:700}.odoo-dialog{position:fixed;z-index:2100;inset:0;display:none;place-items:center;background:rgba(15,23,42,.35)}.odoo-dialog.show{display:grid}.odoo-dialog form{width:min(420px,calc(100vw - 32px));border-radius:14px;background:var(--bg-card);box-shadow:0 24px 70px rgba(15,23,42,.25);padding:22px}.odoo-dialog h3{margin:0 0 18px}.odoo-dialog label{display:grid;gap:7px;margin:12px 0;color:var(--text-secondary);font-size:12px;font-weight:600}.odoo-dialog label:has(input[type="checkbox"]){display:flex;align-items:center}.odoo-dialog input:not([type="checkbox"]){border:1px solid var(--border-color);border-radius:9px;background:var(--bg-app);color:var(--text-primary);padding:10px}.odoo-dialog footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.odoo-dialog footer button{border:1px solid var(--border-color);border-radius:8px;padding:9px 14px;background:var(--bg-card);cursor:pointer}.odoo-dialog footer .primary{border-color:var(--primary-color);background:var(--primary-color);color:#fff}
/* Odoo-style optional column chooser */
.odoo-column-list{display:grid;grid-template-columns:repeat(2,minmax(170px,1fr));gap:7px;max-height:390px;overflow:auto;padding:4px 2px 10px}.odoo-column-list label{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--text-primary)}.odoo-column-list label:hover{background:var(--bg-app)}.odoo-column-list input{width:17px;height:17px;accent-color:var(--primary-color)}.odoo-reset-columns{border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);border-radius:8px;padding:9px 13px;cursor:pointer}@media(max-width:700px){.odoo-column-list{grid-template-columns:1fr}}
.odoo-filter-panel[data-open="columns"] > section[data-menu="columns"]{display:block;border-right:0}
.odoo-search-main>[data-list-view]{min-width:40px;padding-inline:10px}.odoo-search-main>[data-list-view].active{background:var(--primary-light);color:var(--primary-color)}.table-card[hidden],.table-responsive[hidden]{display:none!important}.odoo-generic-kanban{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px}.odoo-kanban-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:13px;padding:16px;box-shadow:var(--shadow-sm);cursor:pointer}.odoo-kanban-card:hover{border-color:var(--primary-color);transform:translateY(-1px)}.odoo-kanban-card h3{margin:0 0 13px;font-size:15px;color:var(--text-primary)}.odoo-kanban-card div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--border-color);font-size:11px}.odoo-kanban-card b{color:var(--text-muted)}.odoo-kanban-card span{text-align:right;color:var(--text-primary)}
.raqm-import-dialog{position:fixed;inset:0;z-index:10050;background:rgba(15,23,42,.48);display:grid;place-items:center;padding:24px}.raqm-import-dialog[hidden]{display:none!important}.raqm-import-dialog>section{width:min(920px,96vw);max-height:88vh;overflow:auto;background:var(--bg-card);border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.25)}.raqm-import-dialog header,.raqm-import-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border-color)}.raqm-import-dialog footer{border:0;border-top:1px solid var(--border-color);justify-content:flex-end}.raqm-import-dialog h3,.raqm-import-dialog p{margin:0}.raqm-import-dialog header p{color:var(--text-muted);margin-top:4px}.raqm-import-dialog button{border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);border-radius:9px;padding:10px 16px;cursor:pointer}.raqm-import-dialog button.primary{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.raqm-import-summary{padding:16px 24px;font-weight:700;color:var(--primary-color)}.raqm-import-preview{overflow:auto;padding:0 24px 8px}.raqm-import-preview table{width:100%;border-collapse:collapse}.raqm-import-preview th,.raqm-import-preview td{padding:11px 12px;border-bottom:1px solid var(--border-color);text-align:left;white-space:nowrap}
.raqm-export-tools,.raqm-import-tools{display:flex;align-items:center;gap:10px;padding:14px 24px 0}.raqm-export-tools .raqm-export-count{margin-inline-start:auto;color:var(--text-muted);font-size:12px}.raqm-export-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;padding:16px 24px 20px}.raqm-export-field{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--border-color);border-radius:9px;background:var(--bg-app);cursor:pointer;font-size:13px;color:var(--text-primary)}.raqm-export-field:hover{border-color:var(--primary-color)}.raqm-export-field input{width:16px;height:16px;accent-color:var(--primary-color)}.raqm-import-hint{color:var(--text-muted);font-size:12px}.raqm-import-errors{margin:14px 24px 0;padding:14px 16px;border:1px solid #fca5a5;border-radius:11px;background:#fef2f2;color:#b91c1c}.raqm-import-errors[hidden]{display:none!important}.raqm-import-errors strong{display:block;font-size:13px;margin-bottom:8px}.raqm-import-errors ul{margin:0;padding-inline-start:18px;max-height:220px;overflow:auto}.raqm-import-errors li{font-size:12.5px;line-height:1.7}.raqm-import-errors p{margin:8px 0 0;font-size:12px}.raqm-import-repair{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.raqm-import-repair select{width:100%;padding:8px 10px;border:1px solid #fca5a5;border-radius:8px;background:var(--bg-card);color:var(--text-primary);font:inherit;font-size:12.5px;cursor:pointer}.raqm-product-picker{margin:12px 24px 0;border:1px solid var(--border-color);border-radius:11px;background:var(--bg-app);overflow:hidden}.raqm-product-picker[hidden]{display:none!important}.raqm-product-picker input[type=search]{width:100%;border:0;border-bottom:1px solid var(--border-color);border-radius:0;padding:11px 14px;font:inherit;background:var(--bg-card);color:var(--text-primary)}.raqm-product-list{max-height:230px;overflow:auto;padding:6px}.raqm-product-list button{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--text-primary)}.raqm-product-list button:hover{background:var(--bg-card)}.raqm-product-list button b{font-family:ui-monospace,Consolas,monospace;color:var(--primary-color);white-space:nowrap}.raqm-product-list button span{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.raqm-product-empty{margin:0;padding:12px 14px;font-size:12px;color:var(--text-muted)}
#raqm-command-palette:not(.is-open){display:none!important;visibility:hidden!important;pointer-events:none!important}
.raqm-odoo-form input,.raqm-odoo-form select,.raqm-odoo-form textarea,.so-field input,.so-field select,.so-lines input,.so-lines select,#so-note{width:100%;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-app);color:var(--text-primary);padding:8px 10px;font:inherit}
.raqm-odoo-form textarea,#so-note{min-height:80px;margin-top:8px}
.raqm-odoo-form .form-group{display:flex;flex-direction:column;gap:6px}
.odoo-notebook{margin-top:22px}
.odoo-notebook-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--border-color)}
.odoo-notebook-tab{background:transparent;border:0;border-bottom:2px solid transparent;padding:12px 18px;margin-bottom:-1px;font:inherit;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer}
.odoo-notebook-tab:hover{color:var(--text-primary)}
.odoo-notebook-tab.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}
.odoo-notebook-page{display:none;padding:18px 0 4px}
.odoo-notebook-page.active{display:block}
.odoo-notebook .so-grid{margin-top:4px}
.odoo-info-group{margin-bottom:22px}
.odoo-info-group h4{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--text-primary)}
.odoo-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
.odoo-notebook .so-field{align-items:center}
.odoo-notebook .so-field b,.odoo-notebook .detail-field label{color:var(--text-muted);font-size:12px;font-weight:600}
.odoo-notebook select,.odoo-notebook input,.odoo-notebook textarea{width:100%;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-app);color:var(--text-primary);padding:8px 10px;font:inherit}
.odoo-notebook textarea{min-height:110px;resize:vertical}
.odoo-contacts-table,.odoo-notebook table{width:100%;border-collapse:collapse}
.odoo-contacts-table th,.odoo-contacts-table td,.odoo-notebook td,.odoo-notebook th{padding:10px;border-bottom:1px solid var(--border-color);text-align:left;vertical-align:middle}
@media(max-width:850px){.odoo-info-grid{grid-template-columns:1fr}}
.odoo-add-line{margin-top:10px}
.report-table .indent{padding-left:36px}
.report-table .section-header td{font-weight:700;background:var(--bg-app)}
.report-table .section-total td{font-weight:700;color:var(--primary-color);border-top:2px solid var(--primary-color)}
.report-table .grand-total td{font-weight:700;background:var(--primary-color);color:#fff}
.raqm-chatter-card{margin-top:24px}.raqm-chatter-card .chatter-composer{margin-bottom:16px}.raqm-chatter-card .chatter-buttons{display:flex;gap:8px;margin-bottom:12px}.raqm-chatter-card .chatter-input-area{display:flex;gap:12px}.raqm-chatter-card .chatter-input-area input{flex:1;padding:10px 14px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-app);color:var(--text-primary);font:inherit}
#raqm-send-dialog p{margin:0 0 8px;color:var(--text-muted);font-size:12px}
@media print{
    body.raqm-printing .app-container,
    body.raqm-printing .toast-container,
    body.raqm-printing .odoo-dialog,
    body.raqm-printing #odoo-audit-drawer,
    body.raqm-printing #odoo-audit-overlay{display:none!important}
    body.raqm-printing .raqm-print-sheet{display:block;padding:24px}
    body.raqm-printing .raqm-print-sheet h1{font-size:22px;margin:0 0 16px}
}

/* ==========================================================================
   Raqm Combo Select — Odoo-style "many2one" field: search existing records
   or create a new one on the fly ("+ Create '...'"). Used for Vendor /
   Product / Product Category pickers. See js/raqm-combo-select.js
   ========================================================================== */
.raqm-combo {
    position: relative;
}

.raqm-combo-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.raqm-combo-input-row .raqm-combo-input {
    flex: 1;
    min-width: 0;
}

.raqm-combo-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    background: var(--bg-app);
    text-decoration: none;
}
.raqm-combo-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    background: var(--bg-app);
    cursor: pointer;
    padding: 0;
}
.raqm-combo-arrow:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.raqm-combo-link[hidden] {
    display: none !important;
}
.order-lines-table .raqm-combo,
.so-lines .raqm-combo {
    min-width: 180px;
    width: 100%;
}
.order-lines-table td .raqm-combo-input,
.so-lines td .raqm-combo-input {
    background: var(--bg-app) !important;
    border: 1px solid var(--border-color) !important;
    min-width: 160px;
    width: 100%;
    color: var(--text-primary) !important;
}

.raqm-combo-link:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.raqm-combo-link i {
    width: 16px;
    height: 16px;
}

.raqm-combo-input {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
}

.raqm-combo-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.raqm-combo-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 360px;
    z-index: 40;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 220px;
    overflow-y: auto;
    display: none;
}

.raqm-combo-menu.open {
    display: block;
}

.raqm-combo-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.raqm-combo-item:hover {
    background-color: var(--bg-app);
}

.raqm-combo-item.raqm-combo-create {
    color: var(--primary-color);
    font-weight: 500;
    border-top: 1px solid var(--border-color);
}


.odoo-line-section td{font-weight:700;background:var(--bg-app)}
.odoo-line-note td{font-style:italic;color:var(--text-muted)}
.odoo-line-actions{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px;align-items:center}
.odoo-line-actions .add-line-btn{margin-top:0}
#raqm-app-nav,#raqm-sales-nav,#raqm-inventory-nav,#raqm-purchase-nav{position:relative;z-index:200;overflow:visible;flex:0 0 auto}
.odoo-app-navbar{display:flex;align-items:center;gap:2px;background:#fff;border-bottom:1px solid var(--border-color);padding:0 16px;min-height:46px;position:sticky;top:0;z-index:200}
.odoo-app-back{background:transparent;border:0;cursor:pointer;font:inherit;color:var(--text-secondary);padding:6px 12px;border-radius:6px;display:inline-flex;align-items:center;gap:6px}
.odoo-app-back:hover{background:var(--bg-app,#eef1f4);color:var(--text-primary)}
.odoo-app-brand{font-weight:700;color:var(--primary-color);text-decoration:none;padding:0 12px 0 4px;font-size:15px}
.odoo-app-link{background:none;border:0;color:#374151;padding:12px 12px;font:inherit;font-size:14px;cursor:pointer;text-decoration:none;display:inline-block}
.odoo-app-link:hover,.odoo-app-drop:hover>.odoo-app-link,.odoo-app-link.active,.odoo-app-drop.active>.odoo-app-link{color:var(--primary-color)}
.odoo-app-drop{position:relative}
.odoo-app-menu{display:none;position:absolute;left:0;top:100%;min-width:210px;max-height:min(70vh,420px);overflow:auto;background:#fff;border:1px solid var(--border-color);border-radius:4px;box-shadow:0 10px 30px rgba(15,23,42,.12);padding:6px 0;z-index:210}
.odoo-app-drop:hover .odoo-app-menu,.odoo-app-drop:focus-within .odoo-app-menu{display:block}
.odoo-app-menu a{display:block;padding:8px 16px;color:#1f2937;text-decoration:none;font-size:13px}
.odoo-app-menu a:hover,.odoo-app-menu a.active{background:var(--primary-light);color:var(--primary-color)}
.odoo-cp{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#fff;border-bottom:1px solid var(--border-color);flex-wrap:wrap}
.odoo-cp .btn-primary{min-width:64px}
.odoo-cp-title{margin:0;font-size:18px;font-weight:600;color:#1f2937}
.odoo-cp-search{flex:1;max-width:520px;margin-left:auto}
.odoo-pager{color:#6b7280;font-size:13px;white-space:nowrap}
.odoo-list-body{padding:0!important}
.odoo-list{font-size:13px}
.odoo-list th{font-weight:600;color:#4b5563;background:#f8fafc;white-space:nowrap}
.odoo-list td,.odoo-list th{padding:8px 10px}
.odoo-list tbody tr{cursor:pointer}
.odoo-list tbody tr:hover{background:#f8fafc}
.col-check{width:32px}
.sales-person{display:inline-flex;align-items:center;gap:8px}
.sales-avatar{width:22px;height:22px;border-radius:50%;background:var(--primary-color);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.odoo-activity{color:#6b7280;font-size:12px}
.odoo-activity.empty{opacity:.45}
.date-today{color:#d97706;font-weight:600}
.date-late{color:#dc2626;font-weight:600}
.amount-info{color:var(--primary-color);font-weight:600}
.odoo-flag.yes{background:#fee2e2;color:#b91c1c;border-radius:4px;padding:1px 6px;font-size:11px;font-weight:700}
.sales-order-link{color:var(--primary-color);font-weight:700;text-decoration:none}
.inv-overview{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:14px;padding:16px}
.inv-op-card{background:#fff;border:1px solid var(--border-color);border-radius:4px;min-height:150px;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between}
.inv-op-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.inv-op-head a{color:var(--primary-color);font-weight:700;text-decoration:none}
.inv-op-btn{display:inline-block;background:var(--primary-color);color:#fff;border-radius:4px;padding:5px 10px;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
.inv-op-btn.ghost{background:var(--primary-color)}
.inv-op-btn:hover{background:var(--primary-hover);color:#fff}
.inv-op-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;color:#6b7280;font-size:12px}
.inv-op-meta a{color:#6b7280;text-decoration:none;display:flex;gap:10px}
.inv-op-meta b{min-width:18px;text-align:right}
.status-badge.ready{background:var(--primary-light);color:var(--primary-color)}
@media(max-width:1100px){.inv-overview{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.inv-overview{grid-template-columns:1fr}}

/* ==========================================================================
   PRODUCTS PAGE — CARD / LIST VIEW SWITCH + ODOO-STYLE LIST & ACTIONS
   ========================================================================== */
.product-view-switch{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--border-color);border-radius:9px;padding:3px;background:var(--bg-app)}
.view-switch-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--text-muted);border-radius:6px;padding:7px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.view-switch-btn svg{width:15px;height:15px}
.view-switch-btn:hover{color:var(--text-primary)}
.view-switch-btn.active{background:var(--bg-card);color:var(--primary-color);box-shadow:var(--shadow-sm)}

.products-list-view{margin-top:20px}
.products-grid[hidden],.products-list-view[hidden]{display:none!important}

.products-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px 18px;border-top:1px solid var(--border-color,#e5e7eb)}
.products-pagination[hidden]{display:none}
.pagination-info{font-size:13px;color:var(--text-muted,#6b7280);white-space:nowrap}
.pagination-info b{color:var(--text-color,#1f2937);font-weight:600}
.pagination-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pagination-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.page-btn{min-width:32px;height:32px;padding:0 10px;border:1px solid var(--border-color,#e5e7eb);background:#fff;color:var(--text-color,#1f2937);border-radius:6px;font-size:13px;line-height:1;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.page-btn:hover:not(:disabled){border-color:var(--primary-color,#4f46e5);color:var(--primary-color,#4f46e5)}
.page-btn.active{background:var(--primary-color,#4f46e5);border-color:var(--primary-color,#4f46e5);color:#fff}
.page-btn:disabled{opacity:.45;cursor:not-allowed}
.page-ellipsis{color:var(--text-muted,#6b7280);padding:0 2px}
.page-size-label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted,#6b7280);white-space:nowrap}
.page-size-label select{height:32px;border:1px solid var(--border-color,#e5e7eb);border-radius:6px;padding:0 6px;background:#fff;color:var(--text-color,#1f2937);font-size:13px;cursor:pointer}

/* ---- Odoo-style Filters / Group By search panel (products.html) ---- */
.raqm-search-panel{background:#fff;border:1px solid var(--border-color,#e5e7eb);border-radius:8px;padding:8px 12px;margin-top:16px}
.raqm-search-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oq-dropdown{position:relative}
.oq-dropdown-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 12px;background:#fff;border:1px solid var(--border-color,#e5e7eb);border-radius:6px;color:var(--text-color,#1f2937);font-size:13.5px;font-weight:500;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.oq-dropdown-btn:hover{border-color:var(--primary-color,#4f46e5)}
.oq-dropdown-btn .oq-dropdown-caret{display:flex;opacity:.7}
.oq-dropdown-btn svg, .oq-filter-row svg, .group-header-title svg{width:15px;height:15px}
.oq-count-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--primary-color,#4f46e5);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.oq-dropdown-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:264px;background:#fff;border:1px solid var(--border-color,#e5e7eb);border-radius:8px;box-shadow:0 12px 32px rgba(15,23,42,.14);z-index:120;overflow:hidden}
.oq-filters-scroll{max-height:min(360px,60vh);overflow-y:auto}
.oq-filter-section{padding:6px}
.oq-filter-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;background:transparent;border:0;border-radius:6px;color:var(--text-color,#1f2937);font-size:13.5px;text-align:start;cursor:pointer;transition:background .12s}
.oq-filter-row:hover{background:#f1f4f9}
.oq-filter-row > i{visibility:hidden;color:var(--primary-color,#4f46e5);flex:none}
.oq-filter-row.is-on > i{visibility:visible}
.oq-filter-row.is-on{color:var(--primary-color,#4f46e5);font-weight:600}
.oq-filter-custom{padding:4px 6px 8px;border-top:1px solid var(--border-color,#e5e7eb)}
.oq-filter-custom input{width:100%;height:32px;border:1px solid var(--border-color,#e5e7eb);border-radius:6px;padding:0 10px;font-size:13px;color:var(--text-color,#1f2937)}
.oq-filter-custom input:focus{outline:none;border-color:var(--primary-color,#4f46e5)}
.raqm-filter-chips{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.raqm-filter-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border:1px solid var(--border-color,#e5e7eb);background:#f6f8fb;border-radius:999px;font-size:12.5px;color:var(--text-color,#1f2937)}
.raqm-filter-chip .raqm-chip-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:0;background:transparent;color:var(--text-muted,#6b7280);font-size:15px;line-height:1;cursor:pointer;border-radius:50%;transition:background .12s,color .12s}
.raqm-filter-chip .raqm-chip-x:hover{background:#e5e9f0;color:#b42318}

/* ---- grouping headers (grid + table) ---- */
.products-group-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 4px 6px;border-top:1px solid var(--border-color,#e5e7eb);margin-top:8px}
.products-group-header:first-child{border-top:0;margin-top:0}
.products-group-title{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-color,#1f2937);text-transform:uppercase;letter-spacing:.03em}
.products-group-count,.group-header-count{display:inline-flex;align-items:center;background:var(--border-color,#e5e7eb);color:var(--text-muted,#6b7280);border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:600}
tr.group-header-row td{background:#f6f8fb;border-top:1px solid var(--border-color,#e5e7eb);border-bottom:1px solid var(--border-color,#e5e7eb)}
.group-header-title{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--text-color,#1f2937);text-transform:uppercase;letter-spacing:.03em;font-size:12.5px}
.group-header-count{margin-inline-start:10px}

/* ---- favorites star (table rows + product cards) ---- */
.fav-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;background:transparent;color:var(--text-muted,#9ca3af);cursor:pointer;border-radius:6px;transition:color .12s,background .12s,transform .12s}
.fav-btn:hover{background:#f1f4f9;color:#f59e0b;transform:scale(1.08)}
.fav-btn svg{width:16px;height:16px}
.fav-btn.on{color:#f59e0b}
.fav-btn.on svg{fill:currentColor}
.col-fav{width:36px;text-align:center}
.card-fav{position:absolute;top:8px;inset-inline-end:8px;z-index:2;background:rgba(255,255,255,.85);border-radius:8px}
.product-card{position:relative}
.products-list-card{border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-card);box-shadow:var(--shadow-sm);overflow:hidden}
.products-table-wrap{overflow-x:auto;max-height:66vh}
.products-list-table{width:100%;border-collapse:collapse}
.products-list-table th,.products-list-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border-color);white-space:nowrap}
.products-list-table thead th{background:var(--bg-app);color:var(--text-secondary);font-size:11px;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:2}
.products-list-table .col-checkbox{width:42px;text-align:center}
.products-list-table .amount{text-align:right;font-variant-numeric:tabular-nums}
body.dark-mode .products-list-table thead th{background:#1f2937}
.products-list-table tr[hidden]{display:none}
.raqm-products-actions .odoo-actions-menu button{display:flex;align-items:center;gap:9px;color:var(--text-primary)}
.raqm-products-actions .odoo-actions-menu button svg{width:15px;height:15px;color:var(--text-muted);flex:0 0 auto}
.raqm-products-actions .odoo-actions-menu button:hover svg{color:var(--primary-color)}
.raqm-products-actions .odoo-actions-menu .actions-menu-divider{margin:5px 4px;border:0;border-top:1px solid var(--border-color)}
@media(max-width:640px){.view-switch-btn span{display:none}.view-switch-btn{padding:7px 9px}}