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

@layer base {
  /* Override Tailwind's list-style: none reset for post content */

  div.post-content li {
    display: list-item !important;
  }

  /* Hide Quill's ql-ui span elements that create duplicate markers */
  div.post-content .ql-ui {
    display: none !important;
  }

  /* Quill wraps BOTH ordered and unordered lists in <ol> tags! */
  /* For lists WITH data-list attributes, remove container styling and use li styling */
  div.post-content ol:has(li[data-list]),
  div.post-content ul:has(li[data-list]) {
    list-style-type: none !important;
  }

  /* Ordered lists - li elements control the style */
  div.post-content li[data-list="ordered"] {
    list-style-type: decimal !important;
  }

  /* Bullet lists - li elements control the style */
  div.post-content li[data-list="bullet"] {
    list-style-type: disc !important;
  }

  /* For standard HTML lists WITHOUT data-list attributes, use traditional styling */
  div.post-content ol:not(:has(li[data-list])) {
    list-style-type: decimal !important;
  }

  div.post-content ul:not(:has(li[data-list])) {
    list-style-type: disc !important;
  }

  /* Quill editor - proper list styling */
  .ql-editor ol,
  .ql-editor ul {
    padding-left: 1.5em;
    list-style-position: outside;
  }

  /* Quill wraps BOTH ordered and unordered lists in <ol> tags! */
  /* Remove list styling from containers that have data-list children */
  .ql-editor ol:has(li[data-list]),
  .ql-editor ul:has(li[data-list]) {
    list-style-type: none;
    list-style: none;
  }

  /* Hide Quill's ql-ui span elements that create duplicate markers */
  .ql-editor .ql-ui {
    display: none !important;
  }

  /* Ordered lists - target li with data-list */
  .ql-editor li[data-list="ordered"] {
    list-style-type: decimal;
    padding-left: 0;
  }

  /* Bullet lists - target li with data-list */
  .ql-editor li[data-list="bullet"],
  .ql-editor ol > li[data-list="bullet"] {
    list-style-type: disc;
    padding-left: 0;
  }

  .ql-editor li {
    display: list-item;
  }

  /* Ensure standard ol/ul also work (without data-list attributes) */
  .ql-editor ol:not(:has(li[data-list])) {
    list-style-type: decimal;
  }

  .ql-editor ul:not(:has(li[data-list])) {
    list-style-type: disc;
  }
}

@source '../../vendor/namu/wirechat/resources/views/**/*.blade.php';
@source '../../vendor/namu/wirechat/src/Livewire/**/*.php';

/* Dynamic Theme System - CSS Custom Properties generated by theme_css_vars() */

/* Theme-aware utility classes */
@layer utilities {
  .text-theme-primary {
    color: rgb(var(--color-text-primary));
  }
  
  .text-theme-secondary {
    color: rgb(var(--color-text-secondary));
  }
  
  .text-theme-light {
    color: rgb(var(--color-text-light));
  }
  
  .placeholder-theme-light::placeholder {
    color: rgb(var(--color-text-light));
  }
  
  /* Primary color utilities - all shades */
  .bg-theme-primary {
    background-color: rgb(var(--color-primary-500));
  }

  .bg-theme-primary-50 {
    background-color: rgb(var(--color-primary-50));
  }

  .bg-theme-primary-100 {
    background-color: rgb(var(--color-primary-100));
  }

  .bg-theme-primary-200 {
    background-color: rgb(var(--color-primary-200));
  }

  .bg-theme-primary-300 {
    background-color: rgb(var(--color-primary-300));
  }

  .bg-theme-primary-400 {
    background-color: rgb(var(--color-primary-400));
  }

  .bg-theme-primary-500 {
    background-color: rgb(var(--color-primary-500));
  }

  .bg-theme-primary-600 {
    background-color: rgb(var(--color-primary-600));
  }

  .bg-theme-primary-700 {
    background-color: rgb(var(--color-primary-700));
  }

  .bg-theme-primary-800 {
    background-color: rgb(var(--color-primary-800));
  }

  .bg-theme-primary-900 {
    background-color: rgb(var(--color-primary-900));
  }

  .text-theme-primary-50 {
    color: rgb(var(--color-primary-50));
  }

  .text-theme-primary-100 {
    color: rgb(var(--color-primary-100));
  }

  .text-theme-primary-200 {
    color: rgb(var(--color-primary-200));
  }

  .text-theme-primary-300 {
    color: rgb(var(--color-primary-300));
  }

  .text-theme-primary-400 {
    color: rgb(var(--color-primary-400));
  }

  .text-theme-primary-500 {
    color: rgb(var(--color-primary-500));
  }

  .text-theme-primary-600 {
    color: rgb(var(--color-primary-600));
  }

  .text-theme-primary-700 {
    color: rgb(var(--color-primary-700));
  }

  .text-theme-primary-800 {
    color: rgb(var(--color-primary-800));
  }

  .text-theme-primary-900 {
    color: rgb(var(--color-primary-900));
  }

  .border-theme-primary-300 {
    border-color: rgb(var(--color-primary-300));
  }

  .border-theme-primary-400 {
    border-color: rgb(var(--color-primary-400));
  }

  .border-theme-primary-900 {
    border-color: rgb(var(--color-primary-900));
  }

  .hover\:bg-theme-primary-500:hover {
    background-color: rgb(var(--color-primary-500));
  }

  .hover\:bg-theme-primary-700:hover {
    background-color: rgb(var(--color-primary-700));
  }

  .hover\:text-theme-primary-100:hover {
    color: rgb(var(--color-primary-100));
  }

  .hover\:text-theme-primary-200:hover {
    color: rgb(var(--color-primary-200));
  }

  .active\:bg-theme-primary-900:active {
    background-color: rgb(var(--color-primary-900));
  }

  .focus\:border-theme-primary-900:focus {
    border-color: rgb(var(--color-primary-900));
  }

  .focus\:ring-theme-primary-200:focus {
    --tw-ring-color: rgb(var(--color-primary-200));
  }
  
  /* Secondary, accent, brand utilities */
  .bg-theme-secondary {
    background-color: rgb(var(--color-secondary));
  }

  .text-theme-secondary-color {
    color: rgb(var(--color-secondary));
  }

  .bg-theme-accent {
    background-color: rgb(var(--color-accent));
  }

  .text-theme-accent {
    color: rgb(var(--color-accent));
  }

  .bg-theme-accent-dark {
    background-color: rgb(var(--color-accent_dark));
  }

  .text-theme-accent-dark {
    color: rgb(var(--color-accent_dark));
  }

  .bg-theme-brand {
    background-color: rgb(var(--color-brand));
  }

  .profile-photo {
    background-color: rgb(var(--color-brand));
  }

  .text-theme-brand {
    color: rgb(var(--color-brand));
  }

  .text-theme-reaction {
    color: rgb(var(--color-reaction));
  }

  .text-theme-reaction-hover {
    color: rgb(var(--color-reaction-hover));
  }

  .fill-theme-logo {
    fill: rgb(var(--color-logo));
  }

  .text-theme-logo {
    color: rgb(var(--color-logo));
  }

  .bg-theme-background {
    background-color: rgb(var(--color-background));
  }

  .bg-theme-surface {
    background-color: rgb(var(--color-surface));
  }

  .bg-theme-surface-alt {
    background-color: rgb(var(--color-surface_alt));
  }

  .bg-theme-surface-dark {
    background-color: rgb(var(--color-surface_dark));
  }

  /* Success, warning, info utilities */
  .bg-theme-success {
    background-color: rgb(var(--color-success));
  }

  .text-theme-success {
    color: rgb(var(--color-success));
  }

  .bg-theme-warning {
    background-color: rgb(var(--color-warning));
  }

  .text-theme-warning {
    color: rgb(var(--color-warning));
  }

  .bg-theme-info {
    background-color: rgb(var(--color-info));
  }

  .text-theme-info {
    color: rgb(var(--color-info));
  }

  /* Danger color utilities */
  .bg-theme-danger-dark {
    background-color: rgb(var(--color-danger-dark));
  }

  .bg-theme-danger {
    background-color: rgb(var(--color-danger));
  }

  .bg-theme-danger-light {
    background-color: rgb(var(--color-danger-light));
  }

  .text-theme-danger-dark {
    color: rgb(var(--color-danger-dark));
  }

  .text-theme-danger {
    color: rgb(var(--color-danger));
  }

  .text-theme-danger-light {
    color: rgb(var(--color-danger-light));
  }

  /* Neutral colors (yellow theme) */
  .bg-theme-neutral-dark {
    background-color: rgb(var(--color-neutral-dark));
  }

  .bg-theme-neutral-light {
    background-color: rgb(var(--color-neutral-light));
  }

  .bg-theme-neutral-medium {
    background-color: rgb(var(--color-neutral-medium));
  }

  .text-theme-neutral-dark {
    color: rgb(var(--color-neutral-dark));
  }

  .text-theme-neutral-light {
    color: rgb(var(--color-neutral-light));
  }

  .text-theme-neutral-medium {
    color: rgb(var(--color-neutral-medium));
  }

  .text-theme-inverse {
    color: rgb(var(--color-text-inverse));
  }

  /* Border utilities */
  .border-theme-primary {
    border-color: rgb(var(--color-primary-300));
  }

  .border-theme-border {
    border-color: rgb(var(--color-border));
  }

  .border-theme-muted {
    border-color: rgb(var(--color-primary-400));
  }

  .border-theme-accent {
    border-color: rgb(var(--color-accent));
  }

  .border-theme-danger-dark {
    border-color: rgb(var(--color-danger-dark));
  }

  .border-theme-danger {
    border-color: rgb(var(--color-danger));
  }

  /* Focus state utilities */
  .focus\:border-theme-danger-dark:focus {
    border-color: rgb(var(--color-danger-dark));
  }

  .focus\:ring-theme-danger-light:focus {
    --tw-ring-color: rgb(var(--color-danger-light));
  }

  .focus\:ring-theme-accent:focus {
    --tw-ring-color: rgb(var(--color-accent));
  }

  /* Hover state utilities */
  .hover\:bg-theme-danger:hover {
    background-color: rgb(var(--color-danger));
  }

  .hover\:bg-theme-accent:hover {
    background-color: rgb(var(--color-accent));
  }

  .hover\:bg-theme-brand:hover {
    background-color: rgb(var(--color-brand));
  }

  .hover\:text-theme-accent:hover {
    color: rgb(var(--color-accent));
  }

  /* Active state utilities */
  .active\:bg-theme-danger:active {
    background-color: rgb(var(--color-danger));
  }

  .active\:bg-theme-accent:active {
    background-color: rgb(var(--color-accent));
  }

  .font-theme-body {
    font-family: var(--font-family-body);
  }

  .font-theme-heading {
    font-family: var(--font-family-heading);
  }
}

/* Post content styling */

/* Header styling */
.post-content h1 {
  font-size: x-large !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.2 !important;
  color: rgb(var(--color-text-primary)) !important;
}

.post-content h2 {
  font-size: x-large !important;
  margin-top: 2rem !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.3 !important;
  color: rgb(var(--color-text-primary)) !important;
}

.post-content h3 {
  font-size: x-large !important;
  margin-top: 1.75rem !important;
  margin-bottom: 1rem !important;
  line-height: 1.4 !important;
  color: rgb(var(--color-text-primary)) !important;
}

.post-content h4 {
  font-size: x-large !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.875rem !important;
  line-height: 1.4 !important;
  color: rgb(var(--color-text-primary)) !important;
}

.post-content h5 {
  font-size: x-large !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.5 !important;
  color: rgb(var(--color-text-primary)) !important;
}

.post-content h6 {
  font-size: x-large !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.5 !important;
  color: rgb(var(--color-text-primary)) !important;
}

/* Link styling */
.post-content a {
  text-decoration: underline !important;
  color: rgb(var(--color-text-primary)) !important;
}

.post-content a:hover {
  color: rgb(var(--color-text-secondary)) !important;
}

/* List styling - !important to override Tailwind preflight reset */
/* General list container styles */
div.post-content ul,
div.post-content ol,
.post-content > ul,
.post-content > ol {
  list-style-position: outside !important;
  margin-left: 2.5rem !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  padding-left: 0 !important;
}

/* Default list item styles */
div.post-content ul li,
div.post-content ol li,
.post-content > ul > li,
.post-content > ol > li {
  display: list-item !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  padding-left: 0.5rem !important;
  margin-left: 0 !important;
}

/* Quill uses data-list attributes on li elements - these must override defaults */
/* Quill wraps BOTH ordered and unordered lists in <ol> tags! */
/* Remove list styling from containers that have data-list children */
div.post-content ol:has(li[data-list]),
div.post-content ul:has(li[data-list]),
.post-content > ol:has(li[data-list]),
.post-content > ul:has(li[data-list]) {
  list-style-type: none !important;
  list-style: none !important;
}

/* Ordered lists from Quill - the li element controls the style */
div.post-content li[data-list="ordered"],
.post-content > ol > li[data-list="ordered"] {
  list-style-type: decimal !important;
}

/* Bullet lists from Quill - the li element controls the style */
div.post-content li[data-list="bullet"],
.post-content > ul > li[data-list="bullet"],
.post-content > ol > li[data-list="bullet"] {
  list-style-type: disc !important;
}

/* Standard HTML lists (without data-list) - fallback styles */
div.post-content ul:not(:has(li[data-list])),
.post-content > ul:not(:has(li[data-list])) {
  list-style: disc !important;
  list-style-type: disc !important;
}

div.post-content ul:not(:has(li[data-list])) li,
.post-content > ul:not(:has(li[data-list])) > li {
  list-style-type: disc !important;
}

div.post-content ol:not(:has(li[data-list])),
.post-content > ol:not(:has(li[data-list])) {
  list-style: decimal !important;
  list-style-type: decimal !important;
}

div.post-content ol:not(:has(li[data-list])) li,
.post-content > ol:not(:has(li[data-list])) > li {
  list-style-type: decimal !important;
}

/* Nested list styles */
.post-content ul ul {
  list-style-type: circle !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.post-content ul ul ul {
  list-style-type: square !important;
}

.post-content ol ol {
  list-style-type: lower-alpha !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.post-content ol ol ol {
  list-style-type: lower-roman !important;
}

/* Nested list combinations */
.post-content ul ol,
.post-content ol ul {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Tagify focus styles - use theme-accent color */
tags.tagify.tagify--focus {
  --tagify-dd-color-primary: rgb(var(--color-accent)) !important;
  border-color: rgb(var(--color-accent)) !important;
  box-shadow: 0 0 0 1px rgb(var(--color-accent)) !important;
}