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

@layer base {
  :root {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Email specific styles */
.email-content table { width: 100%; border-collapse: collapse; }
.email-content table.table-container { width: auto; margin-bottom: 20px; }
.email-content td, .email-content th { padding: 8px; border: 1px solid #e5e7eb; }
.email-content img { max-width: 100%; height: auto; }
.email-content div[style] { max-width: 100% !important; }
.email-content * { max-width: 100% !important; word-wrap: break-word; }
.email-content font { font-family: inherit; }
.email-content .total-row td { border-top: 1px solid #e5e7eb; }
.email-content a { color: #3b82f6; text-decoration: underline; }
.email-content p { margin-bottom: 0.75em; }
.email-content .header { margin-bottom: 1em; }
.email-content .footer { font-size: 0.875rem; color: #6b7280; margin-top: 1em; }

/* Email editor styles */
.email-editor {
  /* Allow text direction to be controlled by component */
  direction: inherit;
  unicode-bidi: isolate;
  text-align: inherit;
}

/* Email content wrapper should respect natural text direction */
.email-content-wrapper {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  overflow: hidden;
}

.email-content {
  direction: rtl;
  text-align: right;
}

.email-content-wrapper * {
  max-width: 100%;
  word-wrap: break-word;
}

/* Styles for forwarded/replied content */
.email-original-content {
  padding-left: 10px;
  border-left: 2px solid #e0e0e0;
  margin: 10px 0;
  color: #555;
  font-size: 13px;
}

.quote-header {
  margin: 10px 0;
  color: #666;
  font-size: 13px;
}

blockquote.quoted-content {
  padding-left: 10px;
  border-left: 3px solid #ddd;
  margin: 5px 0;
  color: #555;
  background-color: #f8f8f8;
  border-radius: 4px;
  font-size: 13px;
}

/* Forwarded message header styling */
div[style*="---------- Forwarded message ---------"] {
  color: #555;
  font-family: Arial, sans-serif;
  margin-bottom: 15px;
}

/* Make sure reply-body class is properly styled */
.reply-body {
  margin-top: 20px;
}

/* Match spacing in ComposerEmail */
.email-content > div[style*="min-height"] {
  padding: 16px;
}

/* Enhanced email content preservation */
.preserve-email-formatting button,
.preserve-email-formatting a[role="button"],
.preserve-email-formatting a.button,
.preserve-email-formatting .button,
.preserve-email-formatting [class*="btn"],
.preserve-email-formatting [class*="button"] {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  background-color: #f97316; /* Orange for the Confirm Now button */
  color: white !important;
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  border: none;
  margin: 0.5rem 0;
}

/* Ensure images are displayed properly */
.preserve-email-formatting img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* Ensure divs with background images are displayed */
.preserve-email-formatting [style*="background-image"] {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 40px;
}

/* Preserve text styling */
.preserve-email-formatting p,
.preserve-email-formatting div,
.preserve-email-formatting span {
  margin-bottom: 0.75rem;
  max-width: 100%;
  word-break: break-word;
}

/* Ensure the prose class doesn't override important email styling */
.prose.preserve-email-formatting a {
  text-decoration: none;
  color: #3b82f6;
}

.prose.preserve-email-formatting img {
  margin: 0;
}