@import './components/logo-cloud.css';
@import './components/sidebar.css';
@import './components/accepted-applications-overlay.css';
@import './components/readonly-mode.css';
@import './views/public/auth.css';
@import './views/public/public.css';
@import './views/boarder/boarder.css';
@import './views/boarder/boarder-payments.css';
@import './views/boarder/boarder-payment-process.css';
@import './views/boarder/boarder-messages.css';
@import './views/boarder/boarder-house-rules.css';
@import './views/landlord/landlord.css';
@import './views/landlord/landlord-payments.css';
@import './views/landlord/landlord-messages.css';
@import './views/admin/admin.css';

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

/* Remove background from SVG icons */
.icon-no-bg {
  background: none !important;
  fill: currentColor;
}

:root {
  /* Colors - Primary */
  --primary-green: #4a7c23;
  --dark-green: #2d4a14;
  --light-green: #7cb342;

  /* Colors - Neutral */
  --bg-cream: #fef9f0;
  --bg-green: #e8f5e9;
  --text-dark: #1a1a1a;
  --text-gray: #555555;
  --white: #ffffff;

  /* Theme Colors - Light Mode (Default) */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #fef9f0;
  --theme-bg-tertiary: #e8f5e9;
  --theme-text-primary: #1a1a1a;
  --theme-text-secondary: #555555;
  --theme-text-muted: #9ca3af;
  --theme-border: #e5e7eb;
  --theme-border-light: #f3f4f6;
  --theme-shadow: rgba(0, 0, 0, 0.1);
  --theme-shadow-light: rgba(0, 0, 0, 0.05);

  /* Colors - Semantic */
  --color-error: #d32f2f;
  --color-warning: #ff9800;
  --color-info: #1976d2;
  --color-success: #388e3c;

  /* Colors - State */
  --color-hover: rgba(74, 124, 35, 0.1);
  --color-focus: #4a7c23;
  --color-disabled: rgba(74, 124, 35, 0.3);
  --color-loading: #7cb342;

  /* Typography */
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font Sizes */
  --font-size-h1: 2.5rem; /* 40px */
  --font-size-h2: 2rem; /* 32px */
  --font-size-h3: 1.75rem; /* 28px */
  --font-size-h4: 1.5rem; /* 24px */
  --font-size-h5: 1.25rem; /* 20px */
  --font-size-h6: 1rem; /* 16px */
  --font-size-body: 1rem; /* 16px */
  --font-size-small: 0.875rem; /* 14px */
  --font-size-tiny: 0.75rem; /* 12px */

  /* Line Heights */
  --line-height-heading: 1.2;
  --line-height-body: 1.5;
  --line-height-small: 1.4;

  /* Spacing System */
  --spacing-xxs: 0.25rem; /* 4px */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 0.75rem; /* 12px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-xxl: 3rem; /* 48px */
  --spacing-xxxl: 4rem; /* 64px */

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem; /* 2px */
  --radius-md: 0.25rem; /* 4px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 1rem; /* 16px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

  /* Borders */
  --border-color: #e5e5e5;
  --border-width: 1px;

  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Transitions */
  --transition-fast: 150ms;
  --transition-medium: 250ms;
  --transition-slow: 400ms;

  /* Easing */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Dashboard Variables - Light Mode */
  --dashboard-bg: var(--theme-bg-secondary);
  --dashboard-surface: var(--theme-bg-primary);
  --dashboard-border: var(--theme-border);
  --dashboard-text-primary: var(--theme-text-primary);
  --dashboard-text-secondary: var(--theme-text-secondary);
  --dashboard-accent: var(--primary-green);
  --dashboard-accent-hover: var(--dark-green);
  --dashboard-success: #22c55e;
  --dashboard-warning: #f59e0b;
  --dashboard-info: #3b82f6;
  --dashboard-purple: #8b5cf6;
  --dashboard-pink: #ec4899;
  --dashboard-cyan: #06b6d4;
  --dashboard-red: #ef4444;
  --dashboard-orange: #f97316;
  --dashboard-yellow-light: #fef3c7;
  --dashboard-green-light: #d1fae5;
  --dashboard-red-light: #fee2e2;
  --dashboard-blue-light: #dbeafe;
}

body {
  font-family: var(--font-main);
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  transition: background-color var(--transition-medium) var(--ease-in-out),
    color var(--transition-medium) var(--ease-in-out);
}

/* Dark Mode Theme Variables */
[data-theme='dark'] {
  /* Theme Colors - Dark Mode */
  --theme-bg-primary: #0f172a;
  --theme-bg-secondary: #1e293b;
  --theme-bg-tertiary: #334155;
  --theme-text-primary: #f8fafc;
  --theme-text-secondary: #cbd5e1;
  --theme-text-muted: #64748b;
  --theme-border: #334155;
  --theme-border-light: #475569;
  --theme-shadow: rgba(0, 0, 0, 0.3);
  --theme-shadow-light: rgba(0, 0, 0, 0.2);

  /* Override specific colors for dark mode */
  --bg-cream: #1e293b;
  --bg-green: #334155;
  --white: #0f172a;

  /* Dashboard Variables - Dark Mode */
  --dashboard-bg: var(--theme-bg-secondary);
  --dashboard-surface: var(--theme-bg-primary);
  --dashboard-border: var(--theme-border);
  --dashboard-text-primary: var(--theme-text-primary);
  --dashboard-text-secondary: var(--theme-text-secondary);
  --dashboard-yellow-light: #451a03;
  --dashboard-green-light: #14532d;
  --dashboard-red-light: #450a0a;
  --dashboard-blue-light: #1e3a8a;
}

/* Form Elements Dark Mode Support */
[data-theme='dark'] input,
[data-theme='dark'] textarea,
[data-theme='dark'] select {
  background-color: var(--theme-bg-secondary);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
}

[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder {
  color: var(--theme-text-muted);
}

/* Button Dark Mode Support */
[data-theme='dark'] button:not(.demo-button):not(.navbar-icon-btn) {
  background-color: var(--theme-bg-secondary);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
}

/* Card/Panel Dark Mode Support */
[data-theme='dark'] .card,
[data-theme='dark'] .panel,
[data-theme='dark'] .modal {
  background-color: var(--theme-bg-primary);
  border-color: var(--theme-border);
}

/* Scrollbar Dark Mode Support */
[data-theme='dark'] ::-webkit-scrollbar {
  background-color: var(--theme-bg-secondary);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background-color: var(--theme-border);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--theme-border-light);
}