/* ============================================================
   Fusion WooCommerce — Theme-Aware Styles
   Uses Odoo's CSS custom properties for dark/light mode support.
   Odoo 19 sets color_scheme cookie to "dark" or "bright" and
   applies .o_dark on the body or uses Bootstrap variables.
   ============================================================ */

/* ----------------------------------------------------------
   CSS Custom Properties — light defaults, dark overrides
   ---------------------------------------------------------- */
:root {
    --woo-bg-primary: #ffffff;
    --woo-bg-secondary: #f9fafb;
    --woo-bg-tertiary: #f3f4f6;
    --woo-bg-hover: #f3f4f6;
    --woo-bg-selected: #ede9fe;
    --woo-border: #e5e7eb;
    --woo-border-light: #f3f4f6;
    --woo-text-primary: #111827;
    --woo-text-secondary: #374151;
    --woo-text-muted: #6b7280;
    --woo-text-faint: #9ca3af;
    --woo-accent: #7c3aed;
    --woo-accent-hover: #6d28d9;
    --woo-accent-glow: rgba(124, 58, 237, 0.15);
    --woo-success: #059669;
    --woo-success-bg: #d1fae5;
    --woo-success-text: #065f46;
    --woo-warning: #d97706;
    --woo-warning-bg: #fef3c7;
    --woo-warning-text: #92400e;
    --woo-danger: #dc2626;
    --woo-danger-bg: #fee2e2;
    --woo-danger-text: #991b1b;
    --woo-info-bg: #dbeafe;
    --woo-info-text: #1e40af;
    --woo-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --woo-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
    --woo-progress-bg: #e5e7eb;
    --woo-spinner-track: #e5e7eb;
    --woo-btn-secondary-bg: #ffffff;
    --woo-btn-secondary-border: #d1d5db;
    --woo-btn-secondary-hover: #f3f4f6;
    --woo-input-bg: #ffffff;
    --woo-input-border: #d1d5db;
}

/* Dark mode — theme_detect.js reads Odoo's color_scheme cookie and sets
   data-woo-theme="dark" on <html>. We also include @media query as fallback. */
html[data-woo-theme="dark"],
html[style*="color-scheme: dark"] {
    --woo-bg-primary: #1e1e2e;
    --woo-bg-secondary: #262637;
    --woo-bg-tertiary: #2e2e42;
    --woo-bg-hover: #33334a;
    --woo-bg-selected: #3b2d6b;
    --woo-border: #3c3c54;
    --woo-border-light: #33334a;
    --woo-text-primary: #e4e4e7;
    --woo-text-secondary: #c4c4cc;
    --woo-text-muted: #9ca3af;
    --woo-text-faint: #6b7280;
    --woo-accent: #a78bfa;
    --woo-accent-hover: #8b5cf6;
    --woo-accent-glow: rgba(167, 139, 250, 0.2);
    --woo-success: #34d399;
    --woo-success-bg: #064e3b;
    --woo-success-text: #6ee7b7;
    --woo-warning: #fbbf24;
    --woo-warning-bg: #451a03;
    --woo-warning-text: #fcd34d;
    --woo-danger: #f87171;
    --woo-danger-bg: #450a0a;
    --woo-danger-text: #fca5a5;
    --woo-info-bg: #1e3a5f;
    --woo-info-text: #93c5fd;
    --woo-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --woo-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
    --woo-progress-bg: #3c3c54;
    --woo-spinner-track: #3c3c54;
    --woo-btn-secondary-bg: #2e2e42;
    --woo-btn-secondary-border: #3c3c54;
    --woo-btn-secondary-hover: #33334a;
    --woo-input-bg: #2e2e42;
    --woo-input-border: #3c3c54;
}

/* ----------------------------------------------------------
   Status badges
   ---------------------------------------------------------- */
.woo-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.woo-badge-mapped, .woo-badge-success {
    background: var(--woo-success-bg);
    color: var(--woo-success-text);
}
.woo-badge-unmapped {
    background: var(--woo-bg-tertiary);
    color: var(--woo-text-muted);
}
.woo-badge-conflict {
    background: var(--woo-warning-bg);
    color: var(--woo-warning-text);
}
.woo-badge-error, .woo-badge-failed {
    background: var(--woo-danger-bg);
    color: var(--woo-danger-text);
}

/* ----------------------------------------------------------
   Tab navigation
   ---------------------------------------------------------- */
.woo-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--woo-border);
    margin-bottom: 16px;
}
.woo-tab {
    padding: 8px 20px;
    cursor: pointer;
    font-weight: 500;
    color: var(--woo-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    transition: color 0.15s, border-color 0.15s;
}
.woo-tab:hover { color: var(--woo-text-secondary); }
.woo-tab.active {
    color: var(--woo-accent);
    border-bottom-color: var(--woo-accent);
}

/* ----------------------------------------------------------
   Top bar / stats
   ---------------------------------------------------------- */
.woo-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--woo-bg-secondary);
    border-bottom: 1px solid var(--woo-border);
    flex-wrap: wrap;
}
.woo-topbar select,
.woo-topbar input {
    border: 1px solid var(--woo-input-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.875rem;
    background: var(--woo-input-bg);
    color: var(--woo-text-primary);
}
.woo-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 14px;
    border-left: 1px solid var(--woo-border);
}
.woo-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--woo-text-primary);
}
.woo-stat-label {
    font-size: 0.7rem;
    color: var(--woo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ----------------------------------------------------------
   Search bar
   ---------------------------------------------------------- */
.woo-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.woo-search-wrap .woo-search-icon {
    position: absolute;
    left: 10px;
    color: var(--woo-text-faint);
    font-size: 14px;
    pointer-events: none;
}
.woo-search-input {
    padding: 6px 10px 6px 32px;
    border: 1px solid var(--woo-input-border);
    border-radius: 6px;
    font-size: 0.875rem;
    width: 240px;
    background: var(--woo-input-bg);
    color: var(--woo-text-primary);
    transition: border-color 0.15s;
}
.woo-search-input:focus {
    outline: none;
    border-color: var(--woo-accent);
    box-shadow: 0 0 0 2px var(--woo-accent-glow);
}
.woo-search-input::placeholder {
    color: var(--woo-text-faint);
}

/* ----------------------------------------------------------
   Tables
   ---------------------------------------------------------- */
.woo-table-wrap {
    overflow-x: auto;
}
.woo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.woo-table th {
    background: var(--woo-bg-tertiary);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--woo-text-secondary);
    border-bottom: 2px solid var(--woo-border);
    white-space: nowrap;
}
.woo-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--woo-border-light);
    color: var(--woo-text-secondary);
    vertical-align: middle;
}
.woo-table tr:hover td { background: var(--woo-bg-hover); }
.woo-table tr.selected td { background: var(--woo-bg-selected); }

/* ----------------------------------------------------------
   Split view (unmatched tab)
   ---------------------------------------------------------- */
.woo-split {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    gap: 0;
    align-items: start;
}
.woo-split-panel {
    border: 1px solid var(--woo-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--woo-bg-primary);
}
.woo-split-panel-header {
    background: var(--woo-bg-tertiary);
    padding: 10px 14px;
    font-weight: 600;
    color: var(--woo-text-secondary);
    border-bottom: 1px solid var(--woo-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.woo-split-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    gap: 8px;
    color: var(--woo-text-faint);
    font-size: 1.2rem;
}
.woo-split-list {
    max-height: 480px;
    overflow-y: auto;
}
.woo-split-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--woo-border-light);
    transition: background 0.1s;
}
.woo-split-item:hover { background: var(--woo-bg-hover); }
.woo-split-item.selected { background: var(--woo-bg-selected); }
.woo-split-item-name { font-weight: 500; color: var(--woo-text-primary); }
.woo-split-item-sub  { font-size: 0.75rem; color: var(--woo-text-muted); margin-top: 1px; }

/* ----------------------------------------------------------
   Map actions bar
   ---------------------------------------------------------- */
.woo-map-actions {
    display: flex;
    gap: 8px;
    padding: 10px 0 14px;
    flex-wrap: wrap;
}

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */
.woo-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.woo-btn-primary  { background: var(--woo-accent); color: #fff; border-color: var(--woo-accent); }
.woo-btn-primary:hover  { background: var(--woo-accent-hover); }
.woo-btn-success  { background: var(--woo-success); color: #fff; border-color: var(--woo-success); }
.woo-btn-success:hover  { background: #047857; }
.woo-btn-warning  { background: var(--woo-warning); color: #fff; border-color: var(--woo-warning); }
.woo-btn-warning:hover  { background: #b45309; }
.woo-btn-danger   { background: var(--woo-danger); color: #fff; border-color: var(--woo-danger); }
.woo-btn-danger:hover   { background: #b91c1c; }
.woo-btn-secondary {
    background: var(--woo-btn-secondary-bg);
    color: var(--woo-text-secondary);
    border-color: var(--woo-btn-secondary-border);
}
.woo-btn-secondary:hover { background: var(--woo-btn-secondary-hover); }
.woo-btn-sm { padding: 3px 10px; font-size: 0.8rem; }
.woo-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----------------------------------------------------------
   Dashboard cards
   ---------------------------------------------------------- */
.woo-dashboard {
    padding: 20px;
}
.woo-dashboard-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--woo-text-primary);
    margin-bottom: 4px;
}
.woo-dashboard-subtitle {
    font-size: 0.875rem;
    color: var(--woo-text-muted);
    margin-bottom: 24px;
}
.woo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.woo-card {
    background: var(--woo-bg-primary);
    border: 1px solid var(--woo-border);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--woo-card-shadow);
    transition: box-shadow 0.15s;
}
.woo-card:hover { box-shadow: var(--woo-card-shadow-hover); }
.woo-card-clickable { cursor: pointer; }
.woo-card-icon {
    font-size: 1.6rem;
    margin-bottom: 4px;
}
.woo-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--woo-text-primary);
    line-height: 1;
}
.woo-card-label {
    font-size: 0.8rem;
    color: var(--woo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.woo-card-sub {
    font-size: 0.78rem;
    color: var(--woo-text-faint);
    margin-top: 2px;
}
.woo-card-pending  { border-left: 4px solid #f59e0b; }
.woo-card-errors   { border-left: 4px solid #ef4444; }
.woo-card-mapped   { border-left: 4px solid #10b981; }
.woo-card-sync     { border-left: 4px solid #6366f1; }

/* ----------------------------------------------------------
   Progress bar
   ---------------------------------------------------------- */
.woo-progress-wrap {
    background: var(--woo-progress-bg);
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
    margin-top: 6px;
}
.woo-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 6px;
    transition: width 0.4s ease;
}

/* ----------------------------------------------------------
   Loading spinner
   ---------------------------------------------------------- */
.woo-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--woo-text-muted);
    gap: 10px;
    font-size: 0.9rem;
}
.woo-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--woo-spinner-track);
    border-top-color: var(--woo-accent);
    border-radius: 50%;
    animation: woo-spin 0.7s linear infinite;
}
@keyframes woo-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------
   Empty states
   ---------------------------------------------------------- */
.woo-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--woo-text-faint);
}
.woo-empty-icon { font-size: 2.5rem; margin-bottom: 10px; }
.woo-empty-text { font-size: 0.9rem; }

/* ----------------------------------------------------------
   Quick actions
   ---------------------------------------------------------- */
.woo-quick-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ----------------------------------------------------------
   Section header
   ---------------------------------------------------------- */
.woo-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--woo-text-secondary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--woo-border-light);
}

/* ----------------------------------------------------------
   Checkbox column
   ---------------------------------------------------------- */
.woo-table th.woo-check-col,
.woo-table td.woo-check-col {
    width: 36px;
    text-align: center;
}

/* ----------------------------------------------------------
   Theme-aware utility classes
   ---------------------------------------------------------- */
.woo-text-muted { color: var(--woo-text-muted) !important; }
.woo-text-faint { color: var(--woo-text-faint) !important; }

/* Inline code snippets (SKU etc.) */
.woo-code {
    font-family: monospace;
    font-size: 0.85em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--woo-bg-tertiary);
    color: var(--woo-text-secondary);
}

/* ----------------------------------------------------------
   Client action wrapper — ensure background matches theme
   ---------------------------------------------------------- */
.o_action.o_client_action .woo-dashboard,
.o_action.o_client_action .p-3 {
    background: var(--woo-bg-primary);
    color: var(--woo-text-primary);
    min-height: 100%;
}

/* ----------------------------------------------------------
   Form view overrides — theme-aware inputs in Odoo forms
   ---------------------------------------------------------- */
.o_form_view .woo-table th {
    background: var(--woo-bg-tertiary);
    color: var(--woo-text-secondary);
}
.o_form_view .woo-table td {
    color: var(--woo-text-secondary);
    border-bottom-color: var(--woo-border-light);
}

/* ----------------------------------------------------------
   Checkbox overrides for dark mode
   ---------------------------------------------------------- */
.woo-table input[type="checkbox"],
.woo-topbar input[type="checkbox"] {
    accent-color: var(--woo-accent);
}

/* ----------------------------------------------------------
   Select dropdown — theme aware
   ---------------------------------------------------------- */
.woo-topbar select {
    background: var(--woo-input-bg);
    color: var(--woo-text-primary);
    border-color: var(--woo-input-border);
}
.woo-topbar select option {
    background: var(--woo-bg-primary);
    color: var(--woo-text-primary);
}

/* ----------------------------------------------------------
   Odoo native overrides for our views
   These ensure Odoo's own notebook/tab/statusbar elements
   inside our module's form views respect the theme.
   ---------------------------------------------------------- */
.o_form_view .o_notebook .nav-link {
    color: var(--woo-text-muted);
}
.o_form_view .o_notebook .nav-link.active {
    color: var(--woo-text-primary);
}

/* ----------------------------------------------------------
   Ensure strong/bold text uses theme colour
   ---------------------------------------------------------- */
.woo-table strong,
.woo-card strong {
    color: var(--woo-text-primary);
}

/* ----------------------------------------------------------
   Pagination
   ---------------------------------------------------------- */
.woo-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0;
}
.woo-pagination-info {
    font-size: 0.85rem;
    color: var(--woo-text-muted);
}

/* ----------------------------------------------------------
   Icon buttons (price sync arrows)
   ---------------------------------------------------------- */
.woo-btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: var(--woo-text-muted);
    font-size: 0.8rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.woo-btn-icon:hover {
    color: var(--woo-accent);
    background: var(--woo-bg-hover);
}
.woo-price-sync-col {
    width: 60px;
    white-space: nowrap;
}
