/* Modern Portal Design System */

/* ========================================
   LIME GREEN SAAS THEME - Light & Dark Modes
   ======================================== */

/* ========================================
   Custom Scrollbar - Modern Minimal Design
   ======================================== */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(180, 240, 0, 0.4);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 240, 0, 0.7);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
    background: #B4F000;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Dark theme scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(180, 240, 0, 0.3);
    border: 2px solid transparent;
    background-clip: padding-box;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 240, 0, 0.5);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:active {
    background: #B4F000;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(180, 240, 0, 0.4) transparent;
}

[data-theme="dark"] * {
    scrollbar-color: rgba(180, 240, 0, 0.3) transparent;
}

/* Sidebar specific scrollbar */
.bwp-sidebar::-webkit-scrollbar {
    width: 4px;
}

.bwp-sidebar::-webkit-scrollbar-thumb {
    background: rgba(180, 240, 0, 0.3);
    border-radius: 4px;
}

.bwp-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 240, 0, 0.5);
}

/* Modal/Content area scrollbar */
.bwp-modal-body::-webkit-scrollbar,
.bwp-messages-container::-webkit-scrollbar,
.bwp-portal-main-content::-webkit-scrollbar {
    width: 6px;
}

.bwp-modal-body::-webkit-scrollbar-thumb,
.bwp-messages-container::-webkit-scrollbar-thumb {
    background: rgba(180, 240, 0, 0.4);
    border-radius: 6px;
}

/* Light Theme (Default) */
:root,
[data-theme="light"] {
    --bwp-bg: #F3F4F6;
    --bwp-bg-secondary: #FFFFFF;
    --bwp-sidebar: #EDEFF3;
    --bwp-sidebar-text: #6B7280;
    --bwp-sidebar-hover: #E2E5EB;
    --bwp-card: #FFFFFF;
    --bwp-card-hover: #FAFAFA;
    --bwp-hover: #F8F9FA;
    --bwp-primary: #B4F000;
    --bwp-primary-hover: #9FD600;
    --bwp-primary-light: #E8FFA3;
    --bwp-primary-glow: rgba(180, 240, 0, 0.3);
    --bwp-text-dark: #111111;
    --bwp-text-secondary: #374151;
    --bwp-text-muted: #9CA3AF;
    --bwp-border: #E5E7EB;
    --bwp-border-light: #F3F4F6;
    --bwp-shadow: 0 10px 30px rgba(0,0,0,0.05);
    --bwp-shadow-hover: 0 15px 35px rgba(0,0,0,0.08);
    --bwp-shadow-strong: 0 25px 50px rgba(0,0,0,0.12);
    --bwp-input-bg: #FFFFFF;
    --bwp-input-border: #E5E7EB;
    --bwp-modal-overlay: rgba(0, 0, 0, 0.5);
    --bwp-success: #10B981;
    --bwp-warning: #F59E0B;
    --bwp-error: #EF4444;
    --bwp-info: #3B82F6;
    --bwp-radius: 20px;
    --bwp-radius-sm: 12px;
    --bwp-transition: all 0.3s ease;
}

/* Dark Theme */
[data-theme="dark"] {
    --bwp-bg: #0F0F0F;
    --bwp-bg-secondary: #1A1A1A;
    --bwp-sidebar: #141414;
    --bwp-sidebar-text: #9CA3AF;
    --bwp-sidebar-hover: #1F1F1F;
    --bwp-card: #1A1A1A;
    --bwp-card-hover: #222222;
    --bwp-hover: #252525;
    --bwp-primary: #B4F000;
    --bwp-primary-hover: #9FD600;
    --bwp-primary-light: #2D3A00;
    --bwp-primary-glow: rgba(180, 240, 0, 0.2);
    --bwp-text-dark: #FFFFFF;
    --bwp-text-secondary: #E5E7EB;
    --bwp-text-muted: #6B7280;
    --bwp-border: #2D2D2D;
    --bwp-border-light: #1F1F1F;
    --bwp-shadow: 0 10px 30px rgba(0,0,0,0.3);
    --bwp-shadow-hover: 0 15px 35px rgba(0,0,0,0.4);
    --bwp-shadow-strong: 0 25px 50px rgba(0,0,0,0.5);
    --bwp-input-bg: #1F1F1F;
    --bwp-input-border: #2D2D2D;
    --bwp-modal-overlay: rgba(0, 0, 0, 0.8);
    --bwp-success: #10B981;
    --bwp-warning: #F59E0B;
    --bwp-error: #EF4444;
    --bwp-info: #3B82F6;
}

/* Theme Transition */
body,
.bwp-portal-layout,
.bwp-sidebar,
.bwp-portal-header,
.bwp-portal-content,
.bwp-stat-card,
.bwp-card,
.bwp-modal-content,
input, select, textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Theme Toggle Button */
.bwp-theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: var(--bwp-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bwp-text-muted);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.bwp-theme-toggle:hover {
    background: var(--bwp-primary-glow);
    color: var(--bwp-text-dark);
}

.bwp-theme-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.bwp-theme-toggle .bwp-sun-icon {
    position: absolute;
}

.bwp-theme-toggle .bwp-moon-icon {
    position: absolute;
}

[data-theme="light"] .bwp-theme-toggle .bwp-sun-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

[data-theme="light"] .bwp-theme-toggle .bwp-moon-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="dark"] .bwp-theme-toggle .bwp-sun-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="dark"] .bwp-theme-toggle .bwp-moon-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

/* ========================================
   Dark Theme Specific Overrides
   ======================================== */

/* Dark mode body and main content */
[data-theme="dark"] body,
[data-theme="dark"] .bwp-portal-body,
[data-theme="dark"] .bwp-portal-layout {
    background: var(--bwp-bg) !important;
    color: var(--bwp-text-dark) !important;
}

[data-theme="dark"] .bwp-portal-main-content {
    background: var(--bwp-bg) !important;
}

[data-theme="dark"] .bwp-portal-main {
    background: var(--bwp-bg) !important;
}

/* Dark mode cards and sections */
[data-theme="dark"] .bwp-stat-card,
[data-theme="dark"] .bwp-admin-card,
[data-theme="dark"] .bwp-card,
[data-theme="dark"] .bwp-ticket-card,
[data-theme="dark"] .bwp-quick-action-card,
[data-theme="dark"] .bwp-updates-section,
[data-theme="dark"] .bwp-invoices-section,
[data-theme="dark"] .bwp-tickets-section,
[data-theme="dark"] .bwp-projects-section,
[data-theme="dark"] .bwp-kpi-card,
[data-theme="dark"] .bwp-dashboard-card,
[data-theme="dark"] .bwp-section,
[data-theme="dark"] [class*="-section"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"] {
    background: var(--bwp-card) !important;
    border-color: var(--bwp-border) !important;
}

/* Dark mode text colors - IMPORTANT: Use !important to override inline styles */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .bwp-page-header h1,
[data-theme="dark"] .bwp-dashboard-welcome h3 {
    color: #FFFFFF !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] .bwp-section-description {
    color: #E5E7EB !important;
}

[data-theme="dark"] div {
    color: #E5E7EB;
}

/* Dark mode specific text overrides */
[data-theme="dark"] [style*="color: #212529"],
[data-theme="dark"] [style*="color:#212529"],
[data-theme="dark"] [style*="color: #111"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#000"] {
    color: #FFFFFF !important;
}

[data-theme="dark"] [style*="color: #6c757d"],
[data-theme="dark"] [style*="color:#6c757d"],
[data-theme="dark"] [style*="color: #9CA3AF"],
[data-theme="dark"] [style*="color:#9CA3AF"],
[data-theme="dark"] [style*="color: #495057"],
[data-theme="dark"] [style*="color:#495057"] {
    color: #9CA3AF !important;
}

/* Dark mode inputs */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .bwp-form-input,
[data-theme="dark"] .bwp-form-select,
[data-theme="dark"] .bwp-form-textarea {
    background: #1F1F1F !important;
    border-color: #2D2D2D !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6B7280 !important;
}

/* Dark mode modals */
[data-theme="dark"] .bwp-modal-content {
    background: #1A1A1A !important;
}

[data-theme="dark"] .bwp-modal-header {
    border-color: #2D2D2D !important;
}

/* Dark mode tables */
[data-theme="dark"] table,
[data-theme="dark"] .bwp-table,
[data-theme="dark"] .bwp-invoices-list table {
    background: #1A1A1A !important;
}

[data-theme="dark"] th {
    background: #0F0F0F !important;
    border-color: #2D2D2D !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] td {
    border-color: #2D2D2D !important;
    color: #E5E7EB !important;
}

[data-theme="dark"] thead {
    background: #0F0F0F !important;
}

[data-theme="dark"] tbody tr:hover {
    background: #222222 !important;
}

/* Dark mode buttons - keep lime accent */
[data-theme="dark"] .bwp-btn-primary {
    background: #B4F000 !important;
    color: #111111 !important;
}

[data-theme="dark"] .bwp-btn-secondary {
    background: #2D2D2D !important;
    color: #FFFFFF !important;
    border-color: #3D3D3D !important;
}

/* Dark mode links */
[data-theme="dark"] a {
    color: #B4F000;
}

[data-theme="dark"] a:hover {
    color: #9FD600;
}

/* Dark mode View PDF buttons */
[data-theme="dark"] .bwp-btn-download,
[data-theme="dark"] [class*="view-pdf"],
[data-theme="dark"] button[style*="background: #111"] {
    background: #B4F000 !important;
    color: #111111 !important;
}

/* Dark mode badges */
[data-theme="dark"] .bwp-status-badge {
    border: 1px solid rgba(255,255,255,0.1);
}

/* Dark mode inline status badges - Pending (Yellow) */
[data-theme="dark"] span[style*="background: #FEF3C7"],
[data-theme="dark"] span[style*="background: #fef3c7"],
[data-theme="dark"] span[style*="background:#FEF3C7"],
[data-theme="dark"] span[style*="background:#fef3c7"],
[data-theme="dark"] div[style*="background: #FEF3C7"],
[data-theme="dark"] div[style*="background: #fef3c7"],
[data-theme="dark"] div[style*="background:#FEF3C7"],
[data-theme="dark"] div[style*="background:#fef3c7"] {
    background: #422006 !important;
    color: #FCD34D !important;
}

/* Dark mode inline status badges - Active/Blue */
[data-theme="dark"] span[style*="background: #DBEAFE"],
[data-theme="dark"] span[style*="background: #dbeafe"],
[data-theme="dark"] span[style*="background:#DBEAFE"],
[data-theme="dark"] span[style*="background:#dbeafe"],
[data-theme="dark"] div[style*="background: #DBEAFE"],
[data-theme="dark"] div[style*="background: #dbeafe"],
[data-theme="dark"] div[style*="background:#DBEAFE"],
[data-theme="dark"] div[style*="background:#dbeafe"] {
    background: #1E3A5F !important;
    color: #93C5FD !important;
}

/* Dark mode inline status badges - Success/Green (multiple variations) */
[data-theme="dark"] span[style*="background: #d1fae5"],
[data-theme="dark"] span[style*="background:#d1fae5"],
[data-theme="dark"] div[style*="background: #d1fae5"],
[data-theme="dark"] div[style*="background:#d1fae5"],
[data-theme="dark"] span[style*="background: #d4edda"],
[data-theme="dark"] span[style*="background:#d4edda"],
[data-theme="dark"] div[style*="background: #d4edda"],
[data-theme="dark"] div[style*="background:#d4edda"],
[data-theme="dark"] span[style*="background: #D4EDDA"],
[data-theme="dark"] div[style*="background: #D4EDDA"],
[data-theme="dark"] span[style*="background: #e8f5e9"],
[data-theme="dark"] span[style*="background:#e8f5e9"],
[data-theme="dark"] div[style*="background: #e8f5e9"],
[data-theme="dark"] div[style*="background:#e8f5e9"] {
    background: #064E3B !important;
    color: #6EE7B7 !important;
}

/* Ensure text inside success badges is visible in dark mode */
[data-theme="dark"] span[style*="background: #d1fae5"] *,
[data-theme="dark"] span[style*="background: #d4edda"] *,
[data-theme="dark"] span[style*="background: #e8f5e9"] *,
[data-theme="dark"] div[style*="background: #d1fae5"] *,
[data-theme="dark"] div[style*="background: #d4edda"] *,
[data-theme="dark"] div[style*="background: #e8f5e9"] * {
    color: #6EE7B7 !important;
}

/* Override specific green text colors in dark mode */
[data-theme="dark"] [style*="color: #155724"],
[data-theme="dark"] [style*="color:#155724"],
[data-theme="dark"] [style*="color: #065f46"],
[data-theme="dark"] [style*="color:#065f46"],
[data-theme="dark"] [style*="color: #2e7d32"],
[data-theme="dark"] [style*="color:#2e7d32"] {
    color: #6EE7B7 !important;
}

/* Dark mode inline status badges - Error/Red */
[data-theme="dark"] span[style*="background: #fee2e2"],
[data-theme="dark"] span[style*="background:#fee2e2"],
[data-theme="dark"] div[style*="background: #fee2e2"],
[data-theme="dark"] div[style*="background:#fee2e2"] {
    background: #450A0A !important;
    color: #FCA5A5 !important;
}

/* Dark mode inline status badges - Gray */
[data-theme="dark"] span[style*="background: #f3f4f6"],
[data-theme="dark"] span[style*="background: #F3F4F6"],
[data-theme="dark"] span[style*="background:#f3f4f6"],
[data-theme="dark"] span[style*="background:#F3F4F6"],
[data-theme="dark"] div[style*="background: #f3f4f6"],
[data-theme="dark"] div[style*="background: #F3F4F6"],
[data-theme="dark"] div[style*="background:#f3f4f6"],
[data-theme="dark"] div[style*="background:#F3F4F6"] {
    background: #374151 !important;
    color: #D1D5DB !important;
}

/* Dark mode info cards - Blue and Orange */
[data-theme="dark"] div[style*="background: #e3f2fd"],
[data-theme="dark"] div[style*="background:#e3f2fd"] {
    background: #1E3A5F !important;
}

[data-theme="dark"] div[style*="background: #fff3e0"],
[data-theme="dark"] div[style*="background:#fff3e0"] {
    background: #422006 !important;
}

[data-theme="dark"] div[style*="background: #ffebee"],
[data-theme="dark"] div[style*="background:#ffebee"] {
    background: #450A0A !important;
}

/* Dark mode dropdowns */
[data-theme="dark"] .bwp-dropdown-menu {
    background: var(--bwp-card) !important;
    border-color: var(--bwp-border) !important;
}

[data-theme="dark"] .bwp-dropdown-item:hover {
    background: var(--bwp-bg) !important;
}

/* Dark mode messages */
[data-theme="dark"] .bwp-messages-container {
    background: var(--bwp-bg) !important;
}

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

/* Keep lime accent on first stat card in dark mode */
[data-theme="dark"] .bwp-stats-grid > .bwp-stat-card:first-child {
    background: var(--bwp-primary) !important;
}

[data-theme="dark"] .bwp-stats-grid > .bwp-stat-card:first-child * {
    color: #111111 !important;
}

/* Dark mode revenue section */
[data-theme="dark"] .bwp-revenue-section {
    background: var(--bwp-card) !important;
}

[data-theme="dark"] .bwp-revenue-card {
    background: var(--bwp-bg) !important;
}

/* Dark mode action icons */
[data-theme="dark"] .bwp-action-icon {
    background: var(--bwp-bg) !important;
}

[data-theme="dark"] .bwp-action-icon svg {
    stroke: var(--bwp-text-muted) !important;
}

/* ========================================
   Override Inline Styles for Dark Mode
   ======================================== */

/* Override any element with inline white background */
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
[data-theme="dark"] [style*="background: rgb(255,255,255)"] {
    background: #1A1A1A !important;
}

/* Override light gray backgrounds */
[data-theme="dark"] [style*="background: #F3F4F6"],
[data-theme="dark"] [style*="background:#F3F4F6"],
[data-theme="dark"] [style*="background: #f3f4f6"],
[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"] {
    background: #0F0F0F !important;
}

/* Override dark text to white */
[data-theme="dark"] [style*="color: #111"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color: #212529"],
[data-theme="dark"] [style*="color:#212529"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:black"] {
    color: #FFFFFF !important;
}

/* Override muted text colors */
[data-theme="dark"] [style*="color: #495057"],
[data-theme="dark"] [style*="color:#495057"],
[data-theme="dark"] [style*="color: #6c757d"],
[data-theme="dark"] [style*="color:#6c757d"],
[data-theme="dark"] [style*="color: #9CA3AF"],
[data-theme="dark"] [style*="color:#9CA3AF"] {
    color: #9CA3AF !important;
}

/* Override border colors */
[data-theme="dark"] [style*="border: 1px solid #e"],
[data-theme="dark"] [style*="border:1px solid #e"] {
    border-color: #2D2D2D !important;
}

/* Override box shadows */
[data-theme="dark"] [style*="box-shadow: 0"] {
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

/* ========================================
   Page-Specific Dark Mode Overrides
   ======================================== */

/* Time Tracking Page */
[data-theme="dark"] .bwp-time-tracking-page .bwp-section-card[style*="background: #fff"],
[data-theme="dark"] .bwp-timesheet-report-page .bwp-section-card[style*="background: #fff"],
[data-theme="dark"] .bwp-timesheet-report-page .bwp-filters[style*="background: #fff"] {
    background: #1A1A1A !important;
}

/* Files Page */
[data-theme="dark"] #bwp-files-container[style*="background: #fff"] {
    background: #1A1A1A !important;
}

[data-theme="dark"] .bwp-file-card[style*="background: #fff"] {
    background: #1A1A1A !important;
    border-color: #2D2D2D !important;
}

/* Tasks Page */
[data-theme="dark"] .bwp-admin-tasks-page .bwp-tasks-list-card[style*="background: #fff"] {
    background: #1A1A1A !important;
}

/* All section cards with inline white background */
[data-theme="dark"] .bwp-section-card[style*="background: #fff"] {
    background: #1A1A1A !important;
}

/* Force dark background on all portal content areas */
[data-theme="dark"] .bwp-portal-content {
    background: var(--bwp-bg) !important;
}

/* Global Lime Theme Overrides */
.bwp-portal-main-content {
    background: var(--bwp-bg) !important;
}

/* Stat Cards - Lime Theme */
.bwp-stat-card {
    background: var(--bwp-card) !important;
    border-radius: var(--bwp-radius) !important;
    box-shadow: var(--bwp-shadow) !important;
    border: none !important;
    transition: var(--bwp-transition) !important;
}

.bwp-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bwp-shadow-hover) !important;
}

/* First stat card - Lime accent */
.bwp-stat-card.bwp-stat-primary,
.bwp-stats-grid > .bwp-stat-card:first-child {
    background: var(--bwp-primary) !important;
}

.bwp-stat-card.bwp-stat-primary *,
.bwp-stats-grid > .bwp-stat-card:first-child * {
    color: var(--bwp-text-dark) !important;
}

/* Revenue Section - Lime Theme */
.bwp-revenue-section {
    background: var(--bwp-card) !important;
    border-radius: var(--bwp-radius) !important;
    box-shadow: var(--bwp-shadow) !important;
}

.bwp-revenue-card {
    background: var(--bwp-bg) !important;
    border-radius: 16px !important;
    transition: var(--bwp-transition) !important;
}

.bwp-revenue-card:hover {
    background: rgba(180, 240, 0, 0.1) !important;
}

/* Quick Action Cards - Lime Theme */
.bwp-admin-card,
.bwp-action-card {
    background: var(--bwp-card) !important;
    border-radius: 18px !important;
    box-shadow: var(--bwp-shadow) !important;
    border: none !important;
    transition: var(--bwp-transition) !important;
}

.bwp-admin-card:hover,
.bwp-action-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--bwp-shadow-hover) !important;
}

.bwp-admin-card:hover .bwp-action-icon,
.bwp-action-card:hover .bwp-action-icon {
    background: var(--bwp-primary) !important;
}

.bwp-admin-card:hover .bwp-action-icon svg,
.bwp-action-card:hover .bwp-action-icon svg {
    stroke: #111 !important;
}

/* Stat Cards Hover */
.bwp-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
}

/* Revenue Cards Hover */
.bwp-revenue-card:hover {
    background: rgba(180, 240, 0, 0.15) !important;
}

/* Buttons - Lime Theme */
.bwp-btn-primary,
button.bwp-primary,
a.bwp-btn-primary {
    background: var(--bwp-primary) !important;
    color: var(--bwp-text-dark) !important;
    border-radius: var(--bwp-radius-sm) !important;
    border: none !important;
    font-weight: 500 !important;
    transition: var(--bwp-transition) !important;
}

.bwp-btn-primary:hover,
button.bwp-primary:hover,
a.bwp-btn-primary:hover {
    background: var(--bwp-primary-hover) !important;
    transform: translateY(-1px);
}

.bwp-btn-secondary {
    background: var(--bwp-bg) !important;
    color: var(--bwp-text-dark) !important;
    border-radius: var(--bwp-radius-sm) !important;
}

/* Status Badges - Lime Theme */
.bwp-badge-completed,
.badge-completed {
    background: #D9F99D !important;
    color: #365314 !important;
}

.bwp-badge-pending,
.badge-pending {
    background: #FEF3C7 !important;
    color: #92400E !important;
}

.bwp-badge-cancelled,
.badge-cancelled {
    background: #FEE2E2 !important;
    color: #991B1B !important;
}

.bwp-badge-progress,
.badge-progress {
    background: #DBEAFE !important;
    color: #1E40AF !important;
}

/* Tables - Lime Theme */
.bwp-table {
    background: var(--bwp-card);
    border-radius: var(--bwp-radius);
    overflow: hidden;
}

.bwp-table thead {
    background: #F9FAFB;
}

.bwp-table th {
    border-bottom: 1px solid var(--bwp-border);
    font-weight: 500;
    color: var(--bwp-text-muted);
}

.bwp-table tr:hover {
    background: var(--bwp-bg);
}

/* Links - Lime Theme */
.bwp-link,
a.bwp-link {
    color: var(--bwp-text-dark) !important;
    transition: var(--bwp-transition);
}

.bwp-link:hover,
a.bwp-link:hover {
    color: var(--bwp-primary-hover) !important;
}

/* KPI Grid - Responsive Row Layout */
.bwp-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 30px;
}

@media (max-width: 1200px) {
	.bwp-kpi-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.bwp-kpi-grid {
		grid-template-columns: 1fr;
	}
}

/* Login Page - LIME THEME */
.bwp-login-page {
	margin: 0;
	padding: 0;
	background: var(--bwp-bg);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	transition: background-color 0.3s ease;
}

.bwp-login-container {
	display: flex;
	width: 100%;
	max-width: 1100px;
	background: var(--bwp-card);
	border-radius: 24px;
	box-shadow: var(--bwp-shadow-strong);
	overflow: hidden;
	min-height: 580px;
	margin: 20px;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.bwp-login-left {
	flex: 1;
	background: #111111;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px;
	position: relative;
	overflow: hidden;
}

.bwp-login-left::before {
	content: '';
	position: absolute;
	bottom: -30%;
	right: -30%;
	width: 400px;
	height: 400px;
	background: #B4F000;
	border-radius: 50%;
	opacity: 0.15;
	animation: pulse 15s infinite;
}

.bwp-login-left::after {
	content: '';
	position: absolute;
	top: -20%;
	left: -20%;
	width: 300px;
	height: 300px;
	background: #B4F000;
	border-radius: 50%;
	opacity: 0.08;
	animation: pulse 20s infinite reverse;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 0.15; }
	50% { transform: scale(1.1); opacity: 0.25; }
}

.bwp-login-brand {
	position: relative;
	z-index: 1;
	text-align: center;
}

.bwp-logo {
	width: 70px;
	height: 70px;
	background: #B4F000;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: bold;
	color: #111;
	margin: 0 auto 30px;
}

.bwp-login-brand h1 {
	font-size: 32px;
	font-weight: 600;
	margin: 0 0 12px 0;
	color: #fff;
}

.bwp-login-brand p {
	font-size: 18px;
	opacity: 0.9;
	margin: 0;
}

.bwp-login-right {
	flex: 1;
	padding: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bwp-login-card {
	width: 100%;
	max-width: 400px;
}

.bwp-login-card h2 {
	font-size: 28px;
	font-weight: 600;
	color: #212529;
	margin: 0 0 30px 0;
}

.bwp-form-group {
	margin-bottom: 24px;
}

.bwp-form-group label {
	display: block;
	font-weight: 500;
	color: #495057;
	margin-bottom: 8px;
	font-size: 14px;
}

.bwp-form-input,
.bwp-form-select,
.bwp-form-textarea {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #e9ecef;
	border-radius: 8px;
	font-size: 15px;
	transition: all 0.2s;
	background: #fff;
}

.bwp-form-input:focus,
.bwp-form-select:focus,
.bwp-form-textarea:focus {
	outline: none;
	border-color: #B4F000;
	box-shadow: 0 0 0 3px rgba(180, 240, 0, 0.15);
}

.bwp-form-group-inline {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bwp-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.bwp-checkbox-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.bwp-forgot-link {
	color: #111;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s;
}

.bwp-forgot-link:hover {
	color: #9FD600;
	text-decoration: underline;
}

.bwp-btn-primary,
.bwp-btn-secondary {
	padding: 14px 28px;
	border: none;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
}

.bwp-btn-primary {
	background: #B4F000;
	color: #111;
}

.bwp-btn-primary:hover:not(:disabled) {
	background: #9FD600;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(180, 240, 0, 0.35);
}

.bwp-btn-secondary {
	background: #F3F4F6;
	color: #111;
	border: none;
}

.bwp-btn-secondary:hover:not(:disabled) {
	background: #E5E7EB;
}

.bwp-btn-block {
	width: 100%;
}

.bwp-btn-primary:disabled,
.bwp-btn-secondary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.bwp-message {
	margin-top: 16px;
	font-size: 14px;
}

.bwp-message .bwp-success {
	color: #0ab39c;
	padding: 12px;
	background: #d1f2eb;
	border-radius: 8px;
}

.bwp-message .bwp-error {
	color: #f06548;
	padding: 12px;
	background: #ffe5e0;
	border-radius: 8px;
}

/* Portal Layout */
.bwp-portal-body {
	margin: 0;
	padding: 0;
	background: #F3F4F6;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bwp-portal-layout {
	display: flex;
	min-height: 100vh;
}

/* Note: Main sidebar and header styles are now inline in class-portal-ui.php for better modularity */

/* Portal Content - Updated for header */
.bwp-portal-content {
	flex: 1;
	margin-left: var(--sidebar-collapsed, 72px);
	margin-top: var(--header-height, 64px);
	padding: 24px;
	min-height: calc(100vh - var(--header-height, 64px));
	transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: #F3F4F6;
}

/* Legacy support for pages without header */
.bwp-portal-layout .bwp-portal-content {
	margin-top: 0;
	min-height: 100vh;
}

.bwp-page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

.bwp-page-header h1 {
	font-size: 28px;
	font-weight: 600;
	color: #212529;
	margin: 0;
}

.bwp-back-link {
	color: #111;
	text-decoration: none;
	font-size: 14px;
	margin-bottom: 20px;
	display: inline-block;
	transition: all 0.2s;
}

.bwp-back-link:hover {
	color: #9FD600;
}

/* Tickets */
.bwp-tickets-list {
	display: grid;
	gap: 20px;
}

.bwp-ticket-card {
	background: #fff;
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
}

.bwp-ticket-card:hover {
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
	transform: translateY(-4px);
}

.bwp-ticket-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
}

.bwp-ticket-card-header h3 {
	font-size: 18px;
	font-weight: 600;
	color: #212529;
	margin: 0;
	flex: 1;
}

.bwp-ticket-badges {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.bwp-status-badge {
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.bwp-status-badge.status-open {
	background: #D9F99D;
	color: #365314;
}

.bwp-status-badge.status-closed {
	background: #FEE2E2;
	color: #991B1B;
}

.bwp-status-badge.status-in_progress {
	background: #DBEAFE;
	color: #1E40AF;
}

.bwp-status-badge.priority-low {
	background: #F3F4F6;
	color: #6B7280;
}

.bwp-status-badge.priority-medium {
	background: #FEF3C7;
	color: #92400E;
}

.bwp-status-badge.priority-high {
	background: #FED7AA;
	color: #9A3412;
}

.bwp-status-badge.priority-urgent {
	background: #FEE2E2;
	color: #991B1B;
}

.bwp-ticket-excerpt {
	color: #6c757d;
	margin: 0 0 12px 0;
	line-height: 1.6;
}

.bwp-ticket-meta {
	display: flex;
	gap: 16px;
	font-size: 13px;
	color: #6c757d;
}

/* Ticket Detail / Chat */
.bwp-ticket-detail-page {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 100px);
}

.bwp-ticket-header {
	padding: 24px;
	border-bottom: 1px solid #e9ecef;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.bwp-ticket-header-left h1 {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 12px 0;
}

.bwp-ticket-meta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.bwp-ticket-chat {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.bwp-messages-container {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
	background: #F3F4F6;
}

.bwp-messages-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bwp-message-item {
	display: flex;
	gap: 12px;
	max-width: 70%;
}

.bwp-message-item.bwp-message-customer {
	margin-left: auto;
	flex-direction: row-reverse;
}

.bwp-message-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #e9ecef;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.bwp-message-content-wrapper {
	flex: 1;
}

.bwp-message-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.bwp-message-header strong {
	font-size: 14px;
	color: #212529;
}

.bwp-message-date {
	font-size: 12px;
	color: #6c757d;
}

.bwp-message-text {
	background: #fff;
	padding: 12px 16px;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	color: #495057;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.bwp-message-customer .bwp-message-text {
	background: #111111;
	color: #fff;
}

.bwp-message-attachments {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bwp-attachment-image {
	display: inline-block;
	max-width: 200px;
	border-radius: 8px;
	overflow: hidden;
}

.bwp-attachment-image img {
	width: 100%;
	height: auto;
	display: block;
}

.bwp-attachment-file {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #f8f9fa;
	border-radius: 8px;
	color: #495057;
	text-decoration: none;
	font-size: 13px;
	transition: background 0.2s;
}

.bwp-attachment-file:hover {
	background: #e9ecef;
}

/* Reply Form */
.bwp-ticket-reply {
	padding: 20px;
	border-top: 1px solid #e9ecef;
	background: #fff;
}

.bwp-file-upload-area {
	margin-bottom: 12px;
}

.bwp-file-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.bwp-file-item {
	position: relative;
	display: inline-block;
}

.bwp-file-item img {
	max-width: 100px;
	max-height: 100px;
	border-radius: 8px;
}

.bwp-file-item .bwp-remove-file {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #dc3545;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bwp-btn-attach {
	padding: 8px 16px;
	background: #f8f9fa;
	border: 2px dashed #dee2e6;
	border-radius: 8px;
	color: #6c757d;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s;
}

.bwp-btn-attach:hover {
	background: #e9ecef;
	border-color: #adb5bd;
}

.bwp-reply-textarea {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #e9ecef;
	border-radius: 8px;
	font-size: 15px;
	resize: vertical;
	font-family: inherit;
}

.bwp-reply-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
}

/* Empty State */
.bwp-empty-state {
	text-align: center;
	padding: 60px 20px;
	color: #6c757d;
}

.bwp-empty-state p {
	font-size: 16px;
	margin-bottom: 20px;
}

/* Loading */
.bwp-loading {
	text-align: center;
	padding: 40px;
	color: #6c757d;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.bwp-login-container {
		flex-direction: column;
		min-height: auto;
	}
	
	.bwp-login-left {
		padding: 40px 20px;
		min-height: 200px;
	}
	
	.bwp-login-right {
		padding: 40px 20px;
	}
	
	.bwp-sidebar {
		transform: translateX(-100%);
		transition: transform 0.3s;
	}
	
	.bwp-sidebar.open {
		transform: translateX(0);
	}
	
	.bwp-portal-content {
		margin-left: 0;
		padding: 20px;
	}
	
	.bwp-message-item {
		max-width: 85%;
	}
	
	.bwp-ticket-detail-page {
		height: calc(100vh - 60px);
	}
}