/* ============================================
   PaneApp Pro Theme - Enterprise Minimalist
   Inspired by Stripe/Linear design language
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Pro Light (Default) ── */
[data-style="pro"] {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Surfaces */
    --bg-body: #f8f9fa;
    --bg-page: #f8f9fa;
    --bg-surface: #ffffff;
    --bg-surface-secondary: #f9fafb;
    --bg-surface-hover: #f3f4f6;
    --bg-surface-active: #e5e7eb;
    --bg-input: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.4);
    --bg-container: rgba(255, 255, 255, 0.99);

    /* Typography */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-on-surface: #111827;
    --text-link: #2563eb;

    /* Primary */
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #3b82f6;
    --color-primary-rgb: 37, 99, 235;
    --color-gradient-primary: #2563eb;
    --color-gradient-primary-45: #2563eb;
    --color-gradient-success: #16a34a;

    /* Stat Card Gradients → flat */
    --gradient-stat-default: #ffffff;
    --gradient-stat-unprocessed: #ffffff;
    --gradient-stat-unpaid: #ffffff;
    --gradient-stat-growth: #ffffff;
    --gradient-stat-decline: #ffffff;

    /* Borders */
    --border-color: #e5e7eb;
    --border-color-light: #f3f4f6;
    --border-color-medium: #d1d5db;

    /* Border Radius (compact) */
    --border-radius-xs: 3px;
    --border-radius-sm: 4px;
    --border-radius: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;
    --border-radius-xl: 12px;
    --border-radius-pill: 20px;

    /* Shadows (very subtle) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-primary: 0 2px 8px rgba(37, 99, 235, 0.2);
    --shadow-primary-sm: 0 1px 4px rgba(37, 99, 235, 0.15);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);

    /* Component sizes (compact) */
    --stat-card-min-height: 80px;
    --table-row-height: 40px;
    --input-height: 36px;
    --button-height: 34px;

    /* RGB variants */
    --text-primary-rgb: 17, 24, 39;
}

/* ── Pro Dark ── */
[data-style="pro"][data-theme="dark"] {
    --bg-body: #0a0a0b;
    --bg-page: #0a0a0b;
    --bg-surface: #141416;
    --bg-surface-secondary: #1a1a1e;
    --bg-surface-hover: #1f1f24;
    --bg-surface-active: #27272a;
    --bg-input: #141416;
    --bg-overlay: rgba(0, 0, 0, 0.6);
    --bg-container: rgba(20, 20, 22, 0.99);

    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    --text-on-surface: #e5e7eb;
    --text-link: #60a5fa;

    --color-primary-light: #60a5fa;
    --color-gradient-success: #16a34a;

    --gradient-stat-default: #141416;
    --gradient-stat-unprocessed: #141416;
    --gradient-stat-unpaid: #141416;
    --gradient-stat-growth: #141416;
    --gradient-stat-decline: #141416;

    --border-color: #27272a;
    --border-color-light: #1f1f24;
    --border-color-medium: #3f3f46;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.35);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);

    --text-primary-rgb: 243, 244, 246;

    --color-success-light: #052e16;
    --color-success-text: #86efac;
    --color-success-border: #14532d;
    --color-warning-light: #431407;
    --color-warning-text: #fcd34d;
    --color-warning-border: #78350f;
    --color-danger-light: #450a0a;
    --color-danger-text: #fca5a5;
    --color-danger-border: #7f1d1d;
    --color-info-light: #172554;
    --color-info-text: #93c5fd;
    --color-info-border: #1e3a5f;

    --scrollbar-track: #141416;
    --scrollbar-thumb: #3f3f46;
    --scrollbar-thumb-hover: #52525b;
}

/* ============================================
   Pro Component Overrides
   ============================================ */

/* ── Stat Cards ── */
[data-style="pro"] .stat-card {
    background: var(--bg-surface) !important;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--color-primary);
    text-align: left;
    padding: 16px 20px;
    min-height: var(--stat-card-min-height);
    position: relative;
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius-md);
}

[data-style="pro"] .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

[data-style="pro"] .stat-card h3 {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    opacity: 1;
    margin-bottom: 6px;
    font-weight: 600;
}

[data-style="pro"] .stat-card .value {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

[data-style="pro"] .stat-card .label {
    font-size: 0.78em;
    color: var(--text-tertiary);
    opacity: 1;
}

/* Semantic border colors */
[data-style="pro"] .stat-card.unpaid {
    border-left-color: #ea580c;
}

[data-style="pro"] .stat-card.growth {
    border-left-color: #16a34a;
}

[data-style="pro"] .stat-card.decline {
    border-left-color: #dc2626;
}

[data-style="pro"] .stat-card.unprocessed {
    border-left-color: #dc2626;
}

/* Stat card link hover in Pro */
[data-style="pro"] .stat-card-link:hover .stat-card {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Sparkline container */
[data-style="pro"] .stat-card .sparkline-container {
    position: absolute;
    bottom: 12px;
    right: 16px;
    width: 80px;
    height: 28px;
    opacity: 0.6;
}

[data-style="pro"] .stat-card:hover .sparkline-container {
    opacity: 0.9;
}

/* ── Tables ── */
[data-style="pro"] th {
    background: var(--bg-surface-secondary) !important;
    color: var(--text-secondary) !important;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding: 10px 12px;
}

[data-style="pro"] td {
    padding: 8px 12px;
    font-size: 0.9em;
}

[data-style="pro"] .table-container {
    border-radius: var(--border-radius-md);
}

/* ── Navbar ── */
[data-style="pro"] .paneapp-navbar {
    min-height: 46px;
    padding: 2px 0;
}

[data-style="pro"] .navbar-inner {
    min-height: 46px;
    padding: 2px 16px;
}

[data-style="pro"] .navbar-link {
    font-size: 0.8em;
    padding: 5px 10px;
    border-radius: 5px;
}

[data-style="pro"] .navbar-link.active {
    background: var(--color-primary);
    border-radius: 5px;
}

[data-style="pro"] .navbar-dropdown-toggle {
    font-size: 0.8em;
    padding: 5px 10px;
    border-radius: 5px;
}

[data-style="pro"] .navbar-dropdown-toggle.active {
    background: var(--color-primary);
    border-radius: 5px;
}

[data-style="pro"] .navbar-logo {
    font-size: 0.95em;
}

[data-style="pro"] .navbar-dropdown-menu {
    border-radius: var(--border-radius-md);
}

/* ── Container ── */
[data-style="pro"] .container {
    padding: 20px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

/* ── Header (Pro: centered professional layout) ── */
[data-style="pro"] .header {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px 0 !important;
    text-align: center !important;
    padding: 14px 0 !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    /* Reset page-specific overrides */
    background: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: var(--text-primary) !important;
}

/* ── Title ── */
[data-style="pro"] .header h1 {
    order: 1;
    font-size: 1.3em !important;
    font-weight: 700 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
}

/* Normalize h1 icons */
[data-style="pro"] .header h1 svg {
    width: 20px !important;
    height: 20px !important;
    vertical-align: -3px !important;
}

/* ── Subtitle paragraph (admin, gestiune) ── */
[data-style="pro"] .header p {
    order: 2;
    font-size: 0.85em !important;
    margin: 0 !important;
    color: var(--text-secondary) !important;
    opacity: 1 !important;
}

/* ── Dot separator between inline items ── */
[data-style="pro"] .header .session-info::before,
[data-style="pro"] .header .driver-info::before,
[data-style="pro"] .header .last-update::before,
[data-style="pro"] .header .session-badge::before,
[data-style="pro"] .header .header-right-actions::before,
[data-style="pro"] .header > p::before,
[data-style="pro"] .header .header-subtitle::before {
    content: "\00b7" !important;
    margin: 0 10px !important;
    color: var(--text-tertiary) !important;
    font-size: 1.4em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Suppress dots on full-width row items */
[data-style="pro"] .header .client-legend::before,
[data-style="pro"] .header .admin-session-nav::before,
[data-style="pro"] .header .custom-range-panel::before,
[data-style="pro"] .header .payment-date-override::before,
[data-style="pro"] .header .version-info::before {
    content: none !important;
}

/* ── Session info ── */
[data-style="pro"] .header .session-info {
    order: 2 !important;
    font-size: 0.85em !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    text-align: center !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

[data-style="pro"] .header .session-info.next-day {
    color: var(--color-orange) !important;
    background: none !important;
}

/* Session-combined-info badge (financial2) */
[data-style="pro"] .header .session-combined-info {
    font-size: 0.85em !important;
    padding: 2px 8px !important;
    border-radius: var(--border-radius-sm) !important;
    margin-left: 6px !important;
}

/* ── Last update ── */
[data-style="pro"] .header .last-update {
    order: 3 !important;
    font-size: 0.78em !important;
    white-space: nowrap !important;
    color: var(--text-tertiary) !important;
    margin: 0 !important;
}

/* ── Driver info ── */
[data-style="pro"] .header .driver-info {
    order: 2 !important;
    font-size: 0.9em !important;
    margin: 0 !important;
    text-align: center !important;
    color: var(--text-secondary) !important;
}

/* ── Header subtitle (productie-retete, rapoarte, reports-pro) ── */
[data-style="pro"] .header .header-subtitle {
    order: 2 !important;
    margin: 0 !important;
    font-size: 0.85em !important;
    color: var(--text-secondary) !important;
}

/* ── Session badge (productie-retete) ── */
[data-style="pro"] .header .session-badge {
    order: 3 !important;
    margin: 0 !important;
    font-size: 0.78em !important;
    padding: 2px 10px !important;
}

/* ── Flatten wrapper divs (rapoarte, reports-pro) ── */
[data-style="pro"] .header .header-content,
[data-style="pro"] .header .header-content > div,
[data-style="pro"] .header .header-title,
[data-style="pro"] .header .header-title > div {
    display: contents !important;
}

/* ── Gestiune: export button + actions reset ── */
[data-style="pro"] .header .header-right-actions {
    order: 3 !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

[data-style="pro"] .header .export-button {
    position: static !important;
    transform: none !important;
    font-size: 0.82em !important;
    padding: 6px 14px !important;
    border-radius: var(--border-radius-pill) !important;
}

/* ── Admin session nav (production, driver, financial2) ── */
[data-style="pro"] .header .admin-session-nav {
    order: 10 !important;
    width: 100% !important;
    display: flex;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
}

[data-style="pro"] .header .admin-session-nav .nav-btn {
    margin: 0 !important;
    font-size: 0.82em !important;
    padding: 5px 12px !important;
}

[data-style="pro"] .header .admin-session-nav .date-selector {
    border-width: 1px !important;
    padding: 3px 8px !important;
    font-size: 0.85em !important;
}

/* ── Client legend (financial2) ── */
[data-style="pro"] .header .client-legend {
    order: 11 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px 14px !important;
    font-size: 0.8em !important;
    margin: 4px 0 0 0 !important;
    padding: 6px 12px !important;
    background: var(--bg-surface-secondary) !important;
    border: 1px solid var(--border-color-light) !important;
    border-radius: var(--border-radius-sm) !important;
}

/* ── Custom range panel (financial2) ── */
[data-style="pro"] .header .custom-range-panel {
    order: 12 !important;
    width: 100% !important;
    margin: 4px 0 0 0 !important;
}

/* ── Payment date override (financial2) — no longer in .header, lives in .page-toolbar ── */
[data-style="pro"] .header .payment-date-override {
    order: 13 !important;
    width: 100% !important;
    margin: 4px 0 0 0 !important;
    border-radius: 0 !important;
    padding: 0 0 0 16px !important;
    font-size: 0.85em !important;
}

/* ── Version info ── */
[data-style="pro"] .header .version-info {
    order: 99 !important;
    width: 100% !important;
    margin-top: 4px !important;
}

[data-style="pro"] .version-info {
    color: var(--text-tertiary) !important;
}

/* ── Buttons ── */
[data-style="pro"] .btn-primary {
    background: var(--color-primary) !important;
    border-radius: var(--border-radius);
}

[data-style="pro"] .btn-primary:hover {
    background: var(--color-primary-dark) !important;
}

[data-style="pro"] .refresh-btn,
[data-style="pro"] .nav-btn,
[data-style="pro"] .date-btn {
    background: var(--color-primary) !important;
    border-radius: var(--border-radius-pill);
}

[data-style="pro"] .refresh-btn:hover,
[data-style="pro"] .nav-btn:hover,
[data-style="pro"] .date-btn:hover {
    background: var(--color-primary-dark) !important;
}

[data-style="pro"] .admin-link,
[data-style="pro"] .logout-btn,
[data-style="pro"] .btn-header {
    background: var(--color-primary) !important;
    border-radius: var(--border-radius-md);
}

[data-style="pro"] .admin-link:hover,
[data-style="pro"] .logout-btn:hover,
[data-style="pro"] .btn-header:hover {
    background: var(--color-primary-dark) !important;
}

/* ── Sections ── */
[data-style="pro"] .section {
    border-radius: var(--border-radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

[data-style="pro"] .section h2 {
    font-size: 1.3em;
}

/* ── Tabs ── */
[data-style="pro"] .tab.active {
    background: var(--color-primary) !important;
}

/* ── Theme Toggle ── */
[data-style="pro"] .theme-toggle {
    background: none !important;
    border-radius: var(--border-radius-md);
}

[data-style="pro"][data-theme="dark"] .theme-toggle {
    background: none !important;
}

/* ── Status Badges ── */
[data-style="pro"] .status-badge {
    border-radius: var(--border-radius);
    font-size: 0.75em;
    padding: 3px 8px;
}

[data-style="pro"] .ai-badge {
    background: var(--color-primary) !important;
    border-radius: var(--border-radius);
}

[data-style="pro"] .confidence-high {
    background: var(--color-success-light) !important;
    color: var(--color-success-text) !important;
}
[data-style="pro"] .confidence-medium {
    background: var(--color-warning-light) !important;
    color: var(--color-warning-text) !important;
}
[data-style="pro"] .confidence-low {
    background: var(--color-danger-light) !important;
    color: var(--color-danger-text) !important;
}

/* ── Footer ── */
[data-style="pro"] .footer {
    border-radius: var(--border-radius-md);
    border-top: 1px solid var(--color-primary);
}

/* ── Modals ── */
[data-style="pro"] .modal-content {
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}

/* ── Filters ── */
[data-style="pro"] .filters-container {
    border-radius: var(--border-radius-md);
    padding: 16px;
}

[data-style="pro"] .compact-filters-container {
    border-radius: var(--border-radius);
}

/* ── Forms ── */
[data-style="pro"] .form-group input,
[data-style="pro"] .form-group select,
[data-style="pro"] .form-group textarea {
    border-radius: var(--border-radius);
    padding: 8px 12px;
}

/* ── Pagination ── */
[data-style="pro"] .page-number {
    border-radius: var(--border-radius-xs);
}

/* ── Toast ── */
[data-style="pro"] .paneapp-toast {
    border-radius: var(--border-radius-md);
}

/* ── Confirm dialog ── */
[data-style="pro"] .paneapp-confirm-dialog {
    border-radius: var(--border-radius-md);
}

/* ============================================
   Pro Page-Specific Overrides
   ============================================ */

/* ── Admin Page ── */
[data-style="pro"] .settings-card-header {
    background: var(--bg-surface-secondary) !important;
    color: var(--text-primary) !important;
}

[data-style="pro"] .settings-icon {
    background: rgba(var(--color-primary-rgb), 0.1);
}

[data-style="pro"] .audit-stats-grid .stat-card {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
}

[data-style="pro"] .audit-stats-grid .stat-value {
    color: var(--text-primary);
}

[data-style="pro"] .cal-header {
    background: var(--color-primary) !important;
}

[data-style="pro"] .modern-btn {
    background: var(--color-primary) !important;
}

/* ── Production Page ── */
[data-style="pro"] .products-table th {
    background: var(--bg-surface-secondary) !important;
    color: var(--text-secondary) !important;
}

/* Production — compact drivers section */
[data-style="pro"] .drivers-section {
    border-radius: var(--border-radius-md) !important;
    padding: 16px !important;
    box-shadow: var(--shadow-sm) !important;
}

[data-style="pro"] .drivers-section h2 {
    font-size: 1.2em !important;
    margin-bottom: 12px !important;
}

[data-style="pro"] .drivers-grid {
    gap: 10px !important;
}

/* Driver cards — flat white card + green left-accent */
[data-style="pro"] .driver-button {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 3px solid var(--color-success) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 10px 16px !important;
    width: auto !important;
    flex: 1 1 200px !important;
    border-radius: var(--border-radius-md) !important;
    font-size: 0.95em !important;
    flex-direction: row !important;
    gap: 8px !important;
}
[data-style="pro"] .driver-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: var(--color-success) !important;
}
[data-style="pro"] .driver-button .driver-name {
    font-size: 1em !important;
    margin-bottom: 0 !important;
    color: var(--text-primary) !important;
}
[data-style="pro"] .driver-button .driver-info {
    font-size: 0.82em !important;
    opacity: 1 !important;
    color: var(--text-secondary) !important;
}

/* Production — spacing compact */
[data-style="pro"] .top-row {
    gap: 12px !important;
    margin-bottom: 16px !important;
    grid-template-columns: 200px 1fr !important;
}

[data-style="pro"] .content-grid {
    gap: 20px !important;
    margin-bottom: 20px !important;
}

/* New orders card — flat border */
[data-style="pro"] .new-orders-card {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 20px !important;
}
[data-style="pro"] .new-orders-card.has-new {
    animation: none !important;
    border-color: var(--color-warning) !important;
}

[data-style="pro"] .pdf-btn {
    background: var(--color-success) !important;
}

/* Topbar — neutral bg */
[data-style="pro"] .new-orders-topbar {
    background: var(--bg-surface-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
[data-style="pro"] .new-orders-card.has-new .new-orders-topbar {
    background: var(--color-warning-light) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--color-warning) !important;
}

/* Topbar buttons — restyle for neutral bg */
[data-style="pro"] .btn-check {
    background: rgba(var(--text-primary-rgb), 0.06) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    backdrop-filter: none !important;
}
[data-style="pro"] .btn-check:hover {
    background: rgba(var(--text-primary-rgb), 0.1) !important;
    color: var(--text-primary) !important;
}
[data-style="pro"] .btn-sound {
    background: rgba(var(--text-primary-rgb), 0.04) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Status dot — visible on neutral bg */
[data-style="pro"] .new-orders-topbar-left .status-dot {
    background: var(--color-success) !important;
}
[data-style="pro"] .new-orders-card.has-new .new-orders-topbar-left .status-dot {
    background: var(--color-warning) !important;
}

[data-style="pro"] .summary-bar {
    background: var(--color-warning-light) !important;
}

[data-style="pro"] .product-chip .chip-qty {
    background: var(--color-orange) !important;
}

[data-style="pro"] .btn-export-excel {
    background: var(--color-success) !important;
}

[data-style="pro"] .btn-export-excel:hover {
    background: var(--color-success-dark) !important;
}

/* ── Financial2 Page ── */
[data-style="pro"] .admin-link.orange {
    background: var(--color-warning) !important;
}

[data-style="pro"] .custom-range-toggle {
    background: var(--color-success) !important;
}

[data-style="pro"] .apply-range-btn {
    background: var(--color-success) !important;
}

[data-style="pro"] .summary-card {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 3px solid var(--color-success) !important;
    box-shadow: var(--shadow-sm) !important;
    text-align: left !important;
    padding: 14px 16px !important;
}
[data-style="pro"] .summary-card h3 {
    opacity: 1 !important;
    color: var(--text-secondary) !important;
    font-size: 0.78em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
}
[data-style="pro"] .summary-card .value {
    color: var(--text-primary) !important;
    font-size: 1.5em !important;
    font-weight: 700 !important;
}
[data-style="pro"] .summary-card .value.secondary {
    font-size: 1.1em !important;
    opacity: 1 !important;
    color: var(--text-secondary) !important;
}
[data-style="pro"] .summary-card .label {
    color: var(--text-tertiary) !important;
    opacity: 1 !important;
    font-size: 0.78em !important;
}
[data-style="pro"] .summary-card .label.secondary {
    opacity: 1 !important;
    color: var(--text-tertiary) !important;
}
[data-style="pro"] .summary-card.unpaid {
    border-left-color: var(--color-orange) !important;
}
[data-style="pro"] .summary-card.total {
    border-left-color: var(--color-primary) !important;
}

[data-style="pro"] .product-quantity {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--color-primary) !important;
    background-clip: unset !important;
}

[data-style="pro"] .payment-badge.paid {
    background: var(--color-success) !important;
}

[data-style="pro"] .payment-badge.mixed-payments {
    background: var(--color-warning) !important;
}

[data-style="pro"] .payment-badge.unpaid {
    background: var(--color-orange) !important;
}

[data-style="pro"] .payment-badge.op {
    background: var(--color-primary) !important;
}

[data-style="pro"] .history-toggle {
    background: var(--color-primary) !important;
}

[data-style="pro"] .payment-date-override {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-left: 2px solid var(--border-color) !important;
    box-shadow: none !important;
    padding: 0 0 0 16px !important;
    border-radius: 0 !important;
}
[data-style="pro"] .payment-date-override.active {
    border-left-color: var(--color-danger) !important;
    color: var(--color-danger) !important;
    background: transparent !important;
    animation: none !important;
    box-shadow: none !important;
}
[data-style="pro"] .payment-date-override.active span {
    color: var(--color-danger) !important;
    font-weight: 700 !important;
}
[data-style="pro"] .payment-date-override button {
    background: var(--color-gradient-primary) !important;
    color: var(--text-on-primary) !important;
    border: none !important;
    border-radius: var(--border-radius-pill) !important;
    padding: 6px 12px !important;
    font-size: 0.85em !important;
}
[data-style="pro"] .payment-date-override button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(var(--color-primary-rgb), 0.3) !important;
    color: var(--text-on-primary) !important;
}
[data-style="pro"] .payment-date-override button.active {
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark)) !important;
    color: white !important;
    border: none !important;
}
[data-style="pro"] .payment-date-override input[type="date"] {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 4px 8px !important;
    font-size: 0.85em !important;
    width: 130px !important;
    border-radius: var(--border-radius-sm) !important;
}

/* Financial2 — legend indicators flat */
[data-style="pro"] .legend-indicator.op {
    background: rgba(var(--color-info-rgb), 0.1) !important;
}

[data-style="pro"] .legend-indicator.higher-history {
    background: rgba(var(--color-danger-rgb), 0.1) !important;
}

[data-style="pro"] .legend-indicator.past-payment {
    background: rgba(var(--color-warning-rgb), 0.1) !important;
}

/* Financial2 — has-op client flat */
[data-style="pro"] .client-item.has-op {
    background: var(--bg-surface) !important;
}

[data-style="pro"] .session-combined-info {
    background: var(--color-warning) !important;
}

[data-style="pro"] .summary-item {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-sm) !important;
    text-align: left !important;
    padding: 8px 10px !important;
}
[data-style="pro"] .summary-item.paid {
    border-left: 3px solid var(--color-success) !important;
    background: var(--bg-surface) !important;
}
[data-style="pro"] .summary-item.unpaid {
    border-left: 3px solid var(--color-orange) !important;
    background: var(--bg-surface) !important;
}
[data-style="pro"] .summary-item.total {
    border-left: 3px solid var(--color-primary) !important;
    background: var(--bg-surface) !important;
}
[data-style="pro"] .summary-label {
    font-size: 0.72em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
}
[data-style="pro"] .summary-value {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

/* ── Gestiune Page ── */
[data-style="pro"] .home-button {
    background: rgba(var(--color-primary-rgb), 0.1) !important;
    border-color: var(--border-color) !important;
    color: var(--color-primary) !important;
}

[data-style="pro"] .home-button:hover {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
    color: var(--color-primary) !important;
}

[data-style="pro"] .export-button {
    background: var(--color-success) !important;
}

/* ── Unpaid-Clients Page ── */
[data-style="pro"] body {
    background: var(--bg-body) !important;
}

[data-style="pro"] .summary-cards .summary-card {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--color-orange);
    box-shadow: var(--shadow-sm) !important;
}

[data-style="pro"] .summary-cards .summary-card h3 {
    color: var(--text-secondary);
    opacity: 1;
}

[data-style="pro"] .summary-cards .summary-card .value {
    color: var(--text-primary);
}

/* ── Rapoarte Page ── */
[data-style="pro"] .grand-total {
    background: var(--color-primary) !important;
}

/* ── Reports-Pro Page ── */
[data-style="pro"] .header-title h1 {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background-clip: unset !important;
}

[data-style="pro"] .reports-pro-btn {
    background: var(--color-primary) !important;
}

[data-style="pro"] .kpi-card::before {
    background: var(--color-primary) !important;
}

[data-style="pro"] .kpi-icon.revenue {
    background: var(--color-success) !important;
}

[data-style="pro"] .kpi-icon.orders {
    background: var(--color-primary) !important;
}

[data-style="pro"] .kpi-icon.clients {
    background: var(--color-primary-light) !important;
}

[data-style="pro"] .kpi-icon.products {
    background: var(--color-warning) !important;
}

/* ── Productie-Retete Page ── */
[data-style="pro"] .session-badge {
    background: var(--color-primary) !important;
}

[data-style="pro"] .product-btn.active {
    background: var(--color-primary) !important;
}

[data-style="pro"] .recipe-header .qty-badge {
    background: var(--color-success) !important;
}

[data-style="pro"] .ingredients-table th {
    background: var(--bg-surface-secondary) !important;
    color: var(--text-secondary) !important;
}

/* ── Financial2 - additional overrides ── */

/* Financial2 — tighter summary gap */
[data-style="pro"] .financial-summary {
    gap: 8px !important;
    margin-bottom: 14px !important;
}

/* Pending-OP summary card - flat white + indigo accent */
[data-style="pro"] .summary-card.pending-op {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 3px solid #6366f1 !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Fix inline white icons invisible on Pro white cards */
[data-style="pro"] .summary-card h3 i,
[data-style="pro"] .summary-card h3 svg {
    color: var(--text-secondary) !important;
}

/* Fix pending-op label/checkbox colors */
[data-style="pro"] .summary-card.pending-op .op-visibility-control label {
    color: var(--text-secondary) !important;
}
[data-style="pro"] .summary-card.pending-op .op-visibility-control input[type="checkbox"] {
    accent-color: #6366f1 !important;
}

/* Client hover states with hardcoded hex */
[data-style="pro"] .client-item.higher-history:hover {
    background: linear-gradient(to right, var(--bg-surface) 0%, rgba(var(--color-danger-rgb), 0.08) 100%) !important;
}
[data-style="pro"] .client-item.past-payment:hover {
    background: linear-gradient(to right, var(--bg-surface) 0%, rgba(var(--color-warning-rgb), 0.1) 100%) !important;
}

/* Export btn on driver financial (inline style with gradient in HTML) */
[data-style="pro"] .export-btn {
    background: var(--color-success) !important;
}

/* Financial2 — driver sections Pro treatment */
[data-style="pro"] .driver-section {
    border-radius: var(--border-radius-md) !important;
    padding: 12px !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 3px solid var(--color-primary) !important;
}

[data-style="pro"] .driver-header {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
}

[data-style="pro"] .driver-title {
    font-size: 1.05em !important;
}

[data-style="pro"] .drivers-container {
    gap: 14px !important;
}

[data-style="pro"] .driver-content {
    gap: 12px !important;
    margin-top: 10px !important;
}

[data-style="pro"] .driver-summary {
    gap: 6px !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
}

/* Financial2 — custom range panel Pro treatment */
[data-style="pro"] .custom-range-panel {
    border: 1px solid var(--border-color) !important;
    border-left: 3px solid var(--color-success) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 14px !important;
    border-radius: var(--border-radius-md) !important;
}

/* Financial2 — summary card hover subtle */
[data-style="pro"] .summary-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ── Admin - additional overrides ── */

/* OP settings section (inline gradient on form-group in HTML) */
[data-style="pro"] .form-group[style*="linear-gradient"] {
    background: rgba(var(--color-primary-rgb), 0.05) !important;
    border-color: var(--color-primary) !important;
}
[data-style="pro"] .form-group[style*="linear-gradient"] label {
    color: var(--color-primary) !important;
}
[data-style="pro"] .form-group[style*="linear-gradient"] small {
    color: var(--color-primary) !important;
}

/* OP badge inline (JS-generated) */
[data-style="pro"] .op-badge-inline {
    background: var(--color-primary) !important;
}

/* ── Shared spacing — tighter top sections ── */

/* Stats grid tighter (index, driver) */
[data-style="pro"] .stats-grid {
    gap: 12px !important;
    margin-bottom: 20px !important;
}

/* ============================================
   Pro Responsive
   ============================================ */
@media (max-width: 768px) {
    [data-style="pro"] .container {
        padding: 12px;
    }

    [data-style="pro"] .stat-card {
        padding: 12px 14px;
    }

    [data-style="pro"] .stat-card .value {
        font-size: 1.4em;
    }

    [data-style="pro"] .stat-card .sparkline-container {
        display: none;
    }

    [data-style="pro"] .header {
        padding: 10px 0 !important;
    }

    [data-style="pro"] .header h1 {
        font-size: 1.1em !important;
    }

    [data-style="pro"] .header .last-update {
        width: 100% !important;
        text-align: center !important;
    }

    /* Hide dot separators on mobile to prevent orphan dots when wrapping */
    [data-style="pro"] .header .session-info::before,
    [data-style="pro"] .header .driver-info::before,
    [data-style="pro"] .header .last-update::before,
    [data-style="pro"] .header .session-badge::before,
    [data-style="pro"] .header .header-right-actions::before,
    [data-style="pro"] .header > p::before,
    [data-style="pro"] .header .header-subtitle::before {
        display: none !important;
    }

    /* Stack nav buttons centered on mobile */
    [data-style="pro"] .header .admin-session-nav {
        justify-content: center !important;
    }

    /* Gestiune export button: full-width on mobile */
    [data-style="pro"] .header .header-right-actions {
        width: 100% !important;
        justify-content: center !important;
    }

    [data-style="pro"] .section {
        padding: 14px;
    }

    [data-style="pro"] th {
        padding: 8px 6px;
        font-size: 0.72em;
    }

    [data-style="pro"] td {
        padding: 6px;
        font-size: 0.82em;
    }
}

@media (max-width: 480px) {
    [data-style="pro"] .stat-card .value {
        font-size: 1.2em;
    }

    [data-style="pro"] .section {
        padding: 10px;
    }

    [data-style="pro"] th {
        padding: 6px 4px;
        font-size: 0.68em;
    }

    [data-style="pro"] td {
        padding: 5px 4px;
        font-size: 0.78em;
    }
}