@tailwind base;
@tailwind components;
@tailwind utilities;

@custom-variant dark (&:is(.dark *));

:root {
  --font-size: 16px;
  --background: 35 8% 96%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 158 24% 24%;
  --primary-foreground: 0 0% 100%;
  --secondary: 150 7% 57%;
  --secondary-foreground: 0 0% 100%;
  --muted: 35 8% 90%;
  --muted-foreground: 0 0% 42%;
  --accent: 43 62% 49%;
  --accent-foreground: 0 0% 10%;
  --destructive: 0 84% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 35 8% 82%;
  --input: transparent;
  --input-background: 0 0% 100%;
  --switch-background: 35 8% 82%;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: 158 24% 24%;
  --chart-1: 158 24% 24%;
  --chart-2: 150 7% 57%;
  --chart-3: 43 62% 49%;
  --chart-4: 0 84% 50%;
  --chart-5: 0 0% 42%;
  --radius: 0.625rem;
  --sidebar: 0 0% 10%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 158 24% 24%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 158 24% 24%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 0 0% 20%;
  --sidebar-ring: 158 24% 24%;
  --re-green: #2d4a3e;
  --re-gold: #c9b037;
  --re-dark: #1a1a1a;
  --re-light-green: #8a9b8e;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-re-green: var(--re-green);
  --color-re-gold: var(--re-gold);
  --color-re-dark: var(--re-dark);
  --color-re-light-green: var(--re-light-green);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }

  /* CSS Reset for better text alignment */
  * {
    box-sizing: border-box;
  }

  /* Ensure proper text alignment inheritance */
  p, div, span, h1, h2, h3, h4, h5, h6 {
    text-align: inherit;
  }

  /* Fix for text wrapping in all elements */
  * {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Better text rendering */
  body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/**
 * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
 */
@layer base {
  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
    h1 {
      font-size: 1.875rem;
      font-weight: var(--font-weight-medium);
      line-height: 1.4;
      letter-spacing: -0.025em;
    }

    h2 {
      font-size: 1.5rem;
      font-weight: var(--font-weight-medium);
      line-height: 1.4;
      letter-spacing: -0.025em;
    }

    h3 {
      font-size: 1.25rem;
      font-weight: var(--font-weight-medium);
      line-height: 1.4;
    }

    h4 {
      font-size: 1rem;
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    p {
      font-size: 0.875rem;
      font-weight: var(--font-weight-normal);
      line-height: 1.6;
    }

    label {
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    button {
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    input {
      font-size: 0.875rem;
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
    }
  }
}

/* Utility classes for better spacing and layout */
@layer components {
  /* Input focus styles for navbar */
  input[type="text"]:focus,
  input[type="search"]:focus,
  input:focus {
    outline: none;
  }
  
  /* Ensure gray borders render properly */
  .border-gray-300 {
    border-color: #d1d5db !important;
  }
  
  .border-gray-400 {
    border-color: #9ca3af !important;
    border-width: 1px !important;
    border-style: solid !important;
  }
  
  .border-gray-500 {
    border-color: #6b7280 !important;
  }
  
  .border-gray-200 {
    border-color: #e5e7eb !important;
  }
  
  .hover\:border-gray-400:hover {
    border-color: #9ca3af !important;
  }
  
  .hover\:border-gray-500:hover {
    border-color: #6b7280 !important;
  }
  
  /* Ensure all inputs have visible borders by default */
  input[data-slot="input"],
  textarea[data-slot="textarea"],
  [data-slot="select-trigger"] {
    border-width: 1px !important;
    border-style: solid !important;
  }
  
  /* Focus states for inputs - Override all blue focus colors with light green */
  input:focus-visible,
  input[type="text"]:focus-visible,
  input[type="number"]:focus-visible,
  input[type="email"]:focus-visible,
  input[type="search"]:focus-visible,
  input[type="password"]:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [data-slot="input"]:focus-visible,
  [data-slot="textarea"]:focus-visible,
  [data-slot="select-trigger"]:focus-visible,
  input:focus,
  input[type="text"]:focus,
  input[type="number"]:focus,
  input[type="email"]:focus,
  input[type="search"]:focus,
  textarea:focus,
  select:focus {
    border-color: var(--re-light-green) !important;
    outline: none !important;
    box-shadow: none !important;
    --tw-ring-width: 0 !important;
    --tw-ring-offset-width: 0 !important;
  }
  
  /* Override any blue focus classes */
  .focus\:border-blue-400:focus,
  .focus\:border-blue-500:focus,
  .focus\:ring-blue-200:focus,
  .focus\:ring-blue-500:focus {
    border-color: var(--re-light-green) !important;
    --tw-ring-color: var(--re-light-green) !important;
  }
  
  .focus\:border-re-green:focus {
    border-color: var(--re-green) !important;
  }
  
  .focus\:ring-re-green:focus {
    --tw-ring-color: var(--re-green) !important;
  }
  
  .focus-visible\:border-re-light-green:focus-visible {
    border-color: var(--re-light-green) !important;
  }
  
  .focus-visible\:ring-re-light-green\/30:focus-visible {
    --tw-ring-width: 0 !important;
    box-shadow: none !important;
  }
  
  .focus\:ring-1:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
  
  /* Ensure gray text colors render properly */
  .text-gray-400 {
    color: #9ca3af !important;
  }
  
  .text-gray-600 {
    color: #4b5563 !important;
  }
  
  /* Navbar specific styling */
  header.bg-white {
    background-color: #ffffff !important;
  }
  
  /* Card border colors */
  .border-gray-200 {
    border-color: #e5e7eb !important;
  }
  
  /* Ensure cards with gray borders render properly */
  [class*="border-gray"] {
    border-style: solid;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .min-w-0 {
    min-width: 0;
  }
  
  /* Line clamp utilities for text truncation */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  /* Text alignment and wrapping utilities */
  .text-wrap-balance {
    text-wrap: balance;
  }
  
  .text-wrap-pretty {
    text-wrap: pretty;
  }
  
  /* Better text alignment for conversation bubbles */
  .conversation-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: left;
    line-height: 1.6;
  }
  
  /* Fix for text alignment in flex containers */
  .flex-text-align {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* Ensure proper text flow in message bubbles */
  .message-content {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: left;
    line-height: 1.5;
  }
  
  /* Fix for avatar alignment */
  .avatar-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Message bubble container */
  .message-bubble {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
  }
  
  /* Fix for text indentation issues */
  .text-indent-reset {
    text-indent: 0;
    padding-left: 0;
    margin-left: 0;
  }

  /* Additional utilities for better text alignment */
  .text-align-left {
    text-align: left;
  }
  
  .text-align-justify {
    text-align: justify;
  }
  
  /* Fix for text wrapping in containers */
  .text-wrap-normal {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Better line height for readability */
  .leading-relaxed {
    line-height: 1.625;
  }
  
  .leading-loose {
    line-height: 2;
  }
  
  /* Fix for flex item alignment */
  .flex-start {
    align-items: flex-start;
  }
  
  .flex-center {
    align-items: center;
  }
  
  /* Message bubble specific styles */
  .message-bubble-content {
    display: block;
    width: 100%;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.5;
  }
  
  /* Fix for text alignment in nested elements */
  .text-content {
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.6;
  }

  /* Ensure CSS custom properties work with Tailwind */
  .text-re-green {
    color: var(--re-green);
  }
  
  .group:hover .group-hover\:text-re-green {
    color: var(--re-green);
  }
  
  /* Fix for gradient backgrounds */
  .bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }
  
  /* Ensure proper CSS loading */
  .space-y-6 > * + * {
    margin-top: 1.5rem;
  }
  
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  
  /* Fix for flex utilities */
  .flex-1 {
    flex: 1 1 0%;
  }
  
  .min-w-0 {
    min-width: 0px;
  }
  
  /* Ensure proper text wrapping */
  .break-words {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Sidebar and layout fixes */
  .sidebar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 50;
  }

  .main-content-with-sidebar {
    margin-left: 16rem; /* 256px - matches w-64 */
  }

  /* Ensure proper flex behavior */
  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .min-w-0 {
    min-width: 0;
  }

  /* Fix for sidebar trigger positioning */
  .sidebar-trigger {
    z-index: 10;
  }

  /* Ensure search bar doesn't overlap */
  .search-container {
    position: relative;
    z-index: 5;
  }

  /* Mobile sidebar fixes */
  @media (max-width: 768px) {
    .sidebar-mobile {
      position: fixed;
      top: 0;
      left: -100%;
      width: 16rem;
      height: 100vh;
      z-index: 50;
      transition: left 0.3s ease;
    }

    .sidebar-mobile.open {
      left: 0;
    }

    .main-content-mobile {
      width: 100%;
      margin-left: 0;
    }
  }

  /* Ensure proper sidebar behavior */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
  }

  /* Sidebar toggle animations */
  .sidebar-container {
    transition: width 0.3s ease-in-out;
    overflow: hidden;
  }

  .sidebar-content {
    width: 16rem; /* 256px */
    height: 100vh;
    position: relative;
  }

  .main-content-full {
    width: 100%;
    transition: all 0.3s ease-in-out;
  }

  .main-content-with-sidebar {
    width: calc(100% - 16rem);
    transition: all 0.3s ease-in-out;
  }

  /* Ensure smooth transitions */
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }

  /* Fix for search bar positioning */
  .search-container {
    position: relative;
    z-index: 1;
  }

  /* Ensure proper flex behavior */
  .flex-1 {
    flex: 1 1 0%;
  }

  .min-w-0 {
    min-width: 0;
  }

  /* Fix for destructive button variant */
  .bg-destructive {
    background-color: #dc2626 !important; /* red-600 */
  }

  .hover\:bg-destructive\/90:hover {
    background-color: rgb(220 38 38 / 0.9) !important;
  }

  /* Ensure border colors work properly */
  .border-gray-200 {
    border-color: rgb(229 231 235) !important;
  }

  .border-gray-300 {
    border-color: rgb(209 213 219) !important;
  }

  .hover\:border-gray-400:hover {
    border-color: rgb(156 163 175) !important;
  }

  /* Fix for card backgrounds */
  .bg-white {
    background-color: rgb(255 255 255) !important;
  }

  /* Ensure dialog backgrounds are white */
  [data-slot="dialog-content"] {
    background-color: rgb(255 255 255) !important;
  }

  /* Custom scrollbar for better UX */
  .overflow-y-auto::-webkit-scrollbar {
    width: 6px;
  }

  .overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
  }

  .overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgb(203 213 225);
    border-radius: 3px;
  }

  .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgb(148 163 184);
  }

  /* Firefox scrollbar */
  .overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: rgb(203 213 225) transparent;
  }
}

html {
  font-size: var(--font-size);
}