/* Unified Client Dashboard Styles - Matches Admin Dashboard Design System */

/* Import dashboard variables - Note: CSS @import must be at top */
@import url('./dashboard-variables.css');

/* Base body styling */
body {
  background-color: var(--dashboard-bg) !important;
  font-family: var(--font-family-base) !important;
  color: var(--dashboard-text-primary) !important;
}

/* ============================================
   Mantine Component Overrides
   ============================================ */

/* Container */
.mantine-Container-root {
  max-width: 1280px;
  padding: var(--spacing-lg);
}

/* Paper/Card Components - Match admin card styles */
.mantine-Paper-root,
.mantine-Card-root {
  background: var(--dashboard-card-bg) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--dashboard-border-color) !important;
  padding: var(--spacing-lg) !important;
}

.mantine-Paper-root:hover,
.mantine-Card-root:hover {
  box-shadow: var(--shadow-lg) !important;
  transition: all var(--transition-base) !important;
}

/* Typography - Match admin dashboard */
.mantine-Title-root {
  font-family: var(--font-family-base) !important;
  color: var(--dashboard-text-primary) !important;
  font-weight: var(--font-weight-bold) !important;
}

.mantine-Text-root {
  font-family: var(--font-family-base) !important;
  color: var(--dashboard-text-primary) !important;
}

/* Buttons - Match admin button styles */
.mantine-Button-root {
  border-radius: var(--radius-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  transition: all var(--transition-base) !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
}

.mantine-Button-filled[data-color="blue"],
.mantine-Button-filled[data-color="violet"] {
  background: linear-gradient(135deg, var(--dashboard-primary) 0%, var(--dashboard-primary-dark) 100%) !important;
  border: none !important;
}

.mantine-Button-filled:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.mantine-Button-light {
  background: var(--dashboard-gray-50) !important;
  color: var(--dashboard-text-primary) !important;
}

.mantine-Button-light:hover {
  background: var(--dashboard-gray-100) !important;
}

/* Badges - Match admin badge styles */
.mantine-Badge-root {
  border-radius: 12px !important;
  padding: 4px 12px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
}

.mantine-Badge-filled[data-color="green"] {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--dashboard-success) !important;
}

.mantine-Badge-filled[data-color="yellow"],
.mantine-Badge-filled[data-color="orange"] {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--dashboard-warning) !important;
}

.mantine-Badge-filled[data-color="red"] {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--dashboard-danger) !important;
}

.mantine-Badge-filled[data-color="gray"] {
  background: rgba(156, 163, 175, 0.15) !important;
  color: var(--dashboard-gray-600) !important;
}

.mantine-Badge-filled[data-color="blue"] {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--dashboard-info) !important;
}

/* Theme Icons */
.mantine-ThemeIcon-root {
  border-radius: var(--radius-sm) !important;
}

/* Alerts */
.mantine-Alert-root {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--dashboard-border-color) !important;
}

/* Dividers */
.mantine-Divider-root {
  border-color: var(--dashboard-border-color) !important;
}

/* Welcome Header Gradient - Match admin style */
.client-welcome-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Stats Cards - Match admin stats-card style */
.client-stats-card {
  background: var(--dashboard-card-bg) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-lg) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--dashboard-border-color) !important;
  transition: all var(--transition-base) !important;
}

.client-stats-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px) !important;
}

/* Quick Actions Cards */
.client-action-card {
  cursor: pointer;
  transition: all 0.2s ease !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--dashboard-border-color) !important;
}

.client-action-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--dashboard-primary) !important;
}

/* Grid Spacing */
.mantine-Grid-root {
  gap: var(--spacing-lg) !important;
}

/* TextInput, Select, Textarea - Match admin form styles */
.mantine-TextInput-input,
.mantine-Select-input,
.mantine-Textarea-input {
  background-color: var(--dashboard-card-bg) !important;
  border-color: var(--dashboard-border-color) !important;
  color: var(--dashboard-text-primary) !important;
  border-radius: var(--radius-sm) !important;
}

.mantine-TextInput-input:focus,
.mantine-Select-input:focus,
.mantine-Textarea-input:focus {
  border-color: var(--dashboard-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

.mantine-TextInput-label,
.mantine-Select-label,
.mantine-Textarea-label {
  color: var(--dashboard-text-primary) !important;
  font-weight: var(--font-weight-medium) !important;
  margin-bottom: var(--spacing-xs) !important;
}

/* Code blocks for embed codes */
.mantine-Code-root {
  background-color: var(--dashboard-gray-100) !important;
  color: var(--dashboard-text-primary) !important;
  border: 1px solid var(--dashboard-border-color) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--spacing-md) !important;
  font-family: 'Courier New', monospace !important;
}

/* Tabs - Match admin tab styles */
.mantine-Tabs-tab {
  color: var(--dashboard-text-secondary) !important;
  border-bottom: 2px solid transparent !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
}

.mantine-Tabs-tab[data-active="true"] {
  color: var(--dashboard-primary) !important;
  border-bottom-color: var(--dashboard-primary) !important;
  font-weight: var(--font-weight-semibold) !important;
}

.mantine-Tabs-panel {
  padding-top: var(--spacing-lg) !important;
}

/* ============================================
   Dark Theme Support
   ============================================ */

[data-theme="dark"] .mantine-Paper-root,
[data-theme="dark"] .mantine-Card-root,
.dark-theme .mantine-Paper-root,
.dark-theme .mantine-Card-root {
  background-color: var(--dashboard-card-bg) !important;
  border-color: var(--dashboard-border-color) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .mantine-Text-root,
.dark-theme .mantine-Text-root {
  color: var(--dashboard-text-primary) !important;
}

[data-theme="dark"] .mantine-Title-root,
.dark-theme .mantine-Title-root {
  color: var(--dashboard-text-primary) !important;
}

[data-theme="dark"] .mantine-Button-light,
.dark-theme .mantine-Button-light {
  background-color: var(--dashboard-gray-100) !important;
  color: var(--dashboard-text-primary) !important;
}

[data-theme="dark"] .mantine-Button-light:hover,
.dark-theme .mantine-Button-light:hover {
  background-color: var(--dashboard-gray-200) !important;
}

[data-theme="dark"] .mantine-Alert-root,
.dark-theme .mantine-Alert-root {
  background-color: var(--dashboard-card-bg) !important;
  border-color: var(--dashboard-border-color) !important;
}

[data-theme="dark"] .mantine-Divider-root,
.dark-theme .mantine-Divider-root {
  border-color: var(--dashboard-border-color) !important;
}

/* ============================================
   Layout Components
   ============================================ */

/* Sidebar Navigation - Match admin sidebar if using TablerAdminLayout */
.mantine-Navbar-root,
[class*="TablerAdminLayout"] .sidebar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
}

/* Main Content Area */
.mantine-AppShell-main {
  background: var(--dashboard-bg) !important;
  padding: var(--spacing-lg) !important;
}

/* Override inline styles from TablerAdminLayout */
div[style*="display: flex"][style*="flex: 1"] {
  background: var(--dashboard-bg) !important;
}

/* Header box override */
div[style*="height: 60"] {
  background: var(--dashboard-header-bg) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  border-bottom: 1px solid var(--dashboard-border-color) !important;
}

/* Content wrapper padding */
div[style*="flex: 1"][style*="padding: '16px'"],
div[style*="flex: 1"][style*="padding: 16px"] {
  background: var(--dashboard-bg) !important;
  padding: var(--spacing-lg) !important;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 767.98px) {
  .mantine-Container-root {
    padding: var(--spacing-sm) var(--spacing-xs) !important;
  }
  
  .mantine-Paper-root,
  .mantine-Card-root {
    padding: var(--spacing-md) !important;
  }
  
  .client-welcome-header {
    padding: var(--spacing-lg) !important;
  }
}