/**
 * Project layer on top of the vendored Metronic bundle (assets/css/styles.css).
 *
 * Everything here is expressed with Metronic's semantic tokens (--primary,
 * --border, --muted-foreground, ...) so light/dark mode and RTL keep working.
 *
 * Load order matters: this file must come after styles.css.
 *
 * Sections:
 *   1. Typography      - Persian/Latin font selection and digit handling
 *   2. Utility fill    - utilities the prebuilt Tailwind bundle does not ship
 *   3. Data tables     - Livewire table extras (filter row, synced scrollbar)
 *   4. Chat            - conversation timelines
 *   5. File manager    - knowledge-base file cards
 *   6. Editor          - markdown editor
 *   7. Toasts          - Livewire notification stack
 */

/* ---------------------------------------------------------------- 1. Typography */

:root {
  --kt-admin-font-latin: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --kt-admin-font-persian: "Vazirmatn FD", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: var(--kt-admin-font-latin);
}

html[lang="fa"] {
  --font-sans: var(--kt-admin-font-persian);
}

/* Identifiers, timestamps and other machine values stay left-to-right and in
   Latin digits even inside a Persian right-to-left page. */
.kt-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

.kt-latin-digits {
  font-feature-settings: normal;
  font-variant-numeric: lining-nums tabular-nums;
  font-family: var(--kt-admin-font-latin);
}

.kt-persian-digits,
.text-mono.kt-persian-digits,
.kt-badge.kt-persian-digits {
  font-family: var(--kt-admin-font-persian);
  font-feature-settings: normal;
  font-variant-numeric: normal;
}

/* Vazirmatn FD renders Latin digits as Persian glyphs; LTR form controls keep
   English digits for passwords, captchas, IDs, and other machine values. */
html[lang="fa"] .kt-input.kt-ltr,
html[lang="fa"] .kt-input.kt-ltr > input,
html[lang="fa"] input.kt-input.kt-ltr,
html[lang="fa"] .kt-input.kt-latin-digits,
html[lang="fa"] .kt-input.kt-latin-digits > input,
html[lang="fa"] input.kt-input.kt-latin-digits,
html[lang="fa"] .kt-select.kt-ltr,
html[lang="fa"] .kt-select.kt-latin-digits {
  font-feature-settings: normal;
  font-variant-numeric: lining-nums tabular-nums;
  font-family: var(--kt-admin-font-latin);
}

/* ---------------------------------------------------------------- 2. Utility fill */

/* The theme's Tailwind output only contains utilities its own demos used, so a
   handful of standard ones are absent. They are reproduced verbatim here. */

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.font-bold {
  --tw-font-weight: 700;
  font-weight: 700;
}

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

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.break-words {
  overflow-wrap: break-word;
}

.mt-auto {
  margin-top: auto;
}

.max-w-\[920px\] {
  max-width: 920px;
}

@media (width >= 64rem) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Metronic's markup uses these two as semantic hooks but ships no rules for
   them, so the text styling is supplied here. */
.kt-form-hint {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--muted-foreground);
}

.kt-checkbox-label {
  font-size: var(--text-2sm);
  font-weight: 500;
  color: var(--foreground);
}

/* ---------------------------------------------------------------- 3. Data tables */

/* A second scrollbar above wide tables, kept in sync with the table wrapper by
   the layout script. Both scrollers are siblings inside .kt-card-table. */
.kt-table-scrollbar-top {
  overflow-x: auto;
  overflow-y: hidden;
}

.kt-table-scrollbar-top > div {
  height: 1px;
}

/* Per-column filter inputs live in a second header row. */
.kt-table thead tr.kt-table-filter-row th {
  padding-top: 0;
  padding-bottom: 0.625rem;
  vertical-align: top;
  background-color: var(--muted);
}

.kt-table-filter-row .kt-input,
.kt-table-filter-row .kt-select {
  min-width: 6rem;
  font-weight: 400;
}

/* Number cells use .kt-ltr, which flips logical inline borders in RTL tables
   and drops the shared edge with the next RTL column (e.g. تعداد کاربر | وضعیت).
   Keep the visible grid line on the cell's physical start edge instead. */
.kt-table-border td.kt-ltr,
.kt-table-border th.kt-ltr {
  border-inline-end-width: 0;
  border-inline-start: 1px solid var(--border);
}

.kt-table-border td.kt-ltr:last-child,
.kt-table-border th.kt-ltr:last-child {
  border-inline-start-width: 0;
}

/* Long free-text cells: clamp to a single line, reveal the rest on hover. */
.kt-text-preview {
  display: block;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kt-text-preview-hover:hover .kt-text-preview {
  max-width: none;
  overflow: visible;
  white-space: normal;
}

/* ---------------------------------------------------------------- 4. Chat */

.kt-chat-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: 32rem;
  overflow-y: auto;
  padding: 1.25rem;
}

.kt-chat-message {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-width: 42rem;
}

.kt-chat-message-question {
  align-self: flex-start;
}

.kt-chat-message-answer {
  align-self: flex-end;
  align-items: flex-end;
}

.kt-chat-bubble {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
  font-size: var(--text-2sm);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  background-color: var(--background);
  color: var(--foreground);
}

.kt-chat-message-answer .kt-chat-bubble {
  border-color: color-mix(in oklab, var(--primary) 25%, transparent);
  background-color: color-mix(in oklab, var(--primary) 8%, transparent);
}

.kt-chat-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-2xs);
  color: var(--muted-foreground);
}

/* ---------------------------------------------------------------- 5. File manager */

.kt-file-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  background-color: var(--card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kt-file-card:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--foreground) 6%, transparent);
}

.kt-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  font-size: 1.125rem;
  color: var(--primary);
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
}

.kt-file-icon-pdf {
  color: var(--destructive);
  background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
}

/* A file name may be a long path with no break opportunities. */
.kt-file-name {
  font-size: var(--text-2sm);
  font-weight: 500;
  color: var(--mono);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- 6. Editor */

.kt-md-editor-textarea {
  width: 100%;
  min-height: 28rem;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-2sm);
  line-height: 1.75;
  color: var(--foreground);
  background-color: var(--background);
  outline: none;
  resize: vertical;
}

.kt-md-editor-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent);
}

/* ---------------------------------------------------------------- 7. Toasts */

.kt-toast-stack {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  pointer-events: none;
}

.kt-toast-stack .kt-alert {
  pointer-events: auto;
  min-width: 18rem;
  max-width: 26rem;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--foreground) 12%, transparent);
  animation: kt-toast-in 0.2s ease-out;
}

@keyframes kt-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}