dialog {
  margin: auto;
}
dialog::backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
}
dialog[open] {
  animation: dialog-in 0.15s ease-out;
}
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(203 213 225); border-radius: 9999px; }
.dark ::-webkit-scrollbar-thumb { background: rgb(51 65 85); }

.table-row-link { cursor: pointer; }

/* Styling for AI Assistant replies rendered from markdown (see
   app/utils/markdown_render.py) - plain values, not Tailwind's theme()
   function, since this app's CDN build doesn't process @theme in <style>. */
.chat-markdown :where(h1, h2, h3, h4, h5, h6) { font-weight: 600; margin: 0.6em 0 0.3em; }
.chat-markdown h1 { font-size: 1.15em; }
.chat-markdown h2 { font-size: 1.08em; }
.chat-markdown h3, .chat-markdown h4, .chat-markdown h5, .chat-markdown h6 { font-size: 1em; }
.chat-markdown p { margin: 0.5em 0; }
.chat-markdown p:first-child { margin-top: 0; }
.chat-markdown p:last-child { margin-bottom: 0; }
.chat-markdown ul, .chat-markdown ol { margin: 0.5em 0; padding-left: 1.25em; }
.chat-markdown ul { list-style: disc; }
.chat-markdown ol { list-style: decimal; }
.chat-markdown li { margin: 0.15em 0; }
.chat-markdown table { border-collapse: collapse; margin: 0.5em 0; width: 100%; font-size: 0.9em; }
.chat-markdown th, .chat-markdown td { border: 1px solid rgb(203 213 225); padding: 0.3em 0.55em; text-align: left; }
.chat-markdown th { background: rgb(241 245 249); font-weight: 600; }
.dark .chat-markdown th, .dark .chat-markdown td { border-color: rgb(71 85 105); }
.dark .chat-markdown th { background: rgb(51 65 85); }
.chat-markdown code { background: rgba(0, 0, 0, 0.06); padding: 0.1em 0.35em; border-radius: 0.25em; font-size: 0.9em; }
.dark .chat-markdown code { background: rgba(255, 255, 255, 0.1); }
.chat-markdown pre { background: rgba(0, 0, 0, 0.06); padding: 0.6em; border-radius: 0.4em; overflow-x: auto; margin: 0.5em 0; }
.dark .chat-markdown pre { background: rgba(255, 255, 255, 0.08); }
.chat-markdown pre code { background: none; padding: 0; }
.chat-markdown blockquote { border-left: 3px solid rgb(203 213 225); padding-left: 0.75em; color: rgb(100 116 139); margin: 0.5em 0; }
.dark .chat-markdown blockquote { border-color: rgb(71 85 105); color: rgb(148 163 184); }
.chat-markdown a { color: rgb(79 70 229); text-decoration: underline; }
.dark .chat-markdown a { color: rgb(129 140 248); }
.chat-markdown hr { border-color: rgb(226 232 240); margin: 0.75em 0; }
.dark .chat-markdown hr { border-color: rgb(51 65 85); }

.chat-chart { position: relative; height: 260px; width: 100%; margin: 0.75em 0; }

/* Org Tree (app/templates/team/org_tree.html) - classic CSS-only connector-line
   org chart, left-to-right: each <li> is a row (card, then its own children
   stacked to the right of it). ::before draws the short horizontal line from the
   shared vertical spine to this card; ::after draws that vertical spine itself
   (trimmed to just the span between siblings on the first/last child). No JS or
   canvas involved - this is the top-down version transposed 90 degrees (border-top
   <-> border-left, padding-top <-> padding-left). Multiple disconnected roots
   (whole-org view) stack as independent rows via the outer .org-tree column. */
.org-tree, .org-tree ul { list-style: none; margin: 0; padding: 0; }
.org-tree { display: flex; flex-direction: column; gap: 1rem; }
.org-tree ul { display: flex; flex-direction: column; justify-content: center; padding-left: 2rem; }
.org-tree ul.hidden { display: none; } /* .org-tree ul's own display:flex otherwise outranks .hidden's specificity */
.org-tree li { display: flex; flex-direction: row; align-items: center; position: relative; padding: 0.75rem 0 0.75rem 2rem; }
.org-tree > li { padding-left: 0; }

/* Line color reflects this node's own mapping: green = the Zoho-synced manager,
   blue = a manual pseudo mapping override is in effect (see .mapping-overridden,
   toggled per-node in app/templates/team/org_tree.html). */
.org-tree li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 2rem;
  height: 0;
  border-top: 3px solid rgb(16 185 129);
}
.org-tree li::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-left: 3px solid rgb(16 185 129);
}
.dark .org-tree li::before,
.dark .org-tree li::after { border-color: rgb(52 211 153); }

.org-tree li.mapping-overridden::before,
.org-tree li.mapping-overridden::after { border-color: rgb(59 130 246); }
.dark .org-tree li.mapping-overridden::before,
.dark .org-tree li.mapping-overridden::after { border-color: rgb(96 165 250); }

.org-tree li:first-child::after { top: 50%; }
.org-tree li:last-child::after { bottom: 50%; }
.org-tree li:only-child::after { display: none; }
.org-tree > li::before, .org-tree > li::after { display: none; } /* no lines before the root(s) */