/*
 * adminphp styles written by hand (plain CSS, no build step).
 * theme.css is the frozen DEPO admin theme; put new styles here.
 */

/* toasts (replacement for react-toastify) */
.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 10000; display: flex; flex-direction: column; gap: .5rem; }
.toast-item {
  display: flex; align-items: flex-start; gap: .75rem; min-width: 260px; max-width: 24rem;
  padding: .75rem 1rem; border-radius: .375rem; border-left: 4px solid; background: #fff; color: #334155;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); transition: opacity .3s;
}
.dark .toast-item { background: rgb(var(--color-darkmode-600)); color: rgb(var(--color-slate-300)); }
.toast-item--success { border-left-color: rgb(var(--color-primary)); }
.toast-item--error { border-left-color: rgb(var(--color-danger)); }
.toast-item button { color: rgb(var(--color-slate-400)); }

/* modals (confirmation / preview / paste JSON) */
.app-modal {
  position: fixed; inset: 0; z-index: 9999; display: none; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 1rem; background: rgb(0 0 0 / .5);
}
.app-modal--open { display: flex; }

/* htmx loading states */
.htmx-request.list-region { opacity: .6; transition: opacity .2s; }

.spinner {
  display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  border: 2px solid rgb(var(--color-slate-200)); border-top-color: #1e40af; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.lookup-results:empty { display: none; }

/* side menu badges */
.side-badge {
  position: absolute; top: 1.5rem; width: 1.25rem; height: 1.25rem; display: flex; align-items: center;
  justify-content: center; border-radius: 9999px; font-size: .75rem; line-height: 1rem; font-weight: 500;
}
@media (min-width: 1280px) { .side-badge { top: 1rem; } }
.side-badge--users { right: 0; background: #fbbf24; color: #000; }
.side-badge--approve { right: .75rem; background: #22c55e; color: #000; }
.side-badge--delete { right: 0; background: #e11d48; color: #000; }
@media (min-width: 1280px) {
  .side-badge--users, .side-badge--approve { right: 1.5rem; }
}

/* icons from public/images/icons.svg (lucide) */
svg.lucide { display: inline-block; flex-shrink: 0; }

/* legal content editor (TipTap) — from admin/src/components/content/content-tiptap-editor.css */
.content-tiptap-editor .content-tiptap-editor__surface {
  width: 100%;
}

.content-tiptap-editor .ProseMirror {
  box-sizing: border-box;
  cursor: text;
  min-height: 12rem;
  outline: none;
  padding: 0.75rem 0.85rem;
  width: 100%;
}

.content-tiptap-editor .ProseMirror:focus {
  box-shadow: inset 0 0 0 1px rgb(59 130 246);
}

.dark .content-tiptap-editor .ProseMirror:focus {
  box-shadow: inset 0 0 0 1px rgb(96 165 250);
}

.content-tiptap-editor .ProseMirror p {
  margin: 0.5rem 0;
}

.content-tiptap-editor .ProseMirror p:first-child {
  margin-top: 0;
}

.content-tiptap-editor .ProseMirror p:last-child {
  margin-bottom: 0;
}

.content-tiptap-editor .ProseMirror ul:not([data-type='taskList']) {
  list-style: disc;
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.content-tiptap-editor .ProseMirror ol {
  list-style: decimal;
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.content-tiptap-editor .ProseMirror ul ul,
.content-tiptap-editor .ProseMirror ol ol,
.content-tiptap-editor .ProseMirror ul ol,
.content-tiptap-editor .ProseMirror ol ul {
  margin: 0.35rem 0;
  padding-left: 1.25rem;
}

.content-tiptap-editor .ProseMirror li {
  margin: 0.25rem 0;
}

.content-tiptap-editor .ProseMirror li > p {
  margin: 0.15rem 0;
}

.content-tiptap-editor .ProseMirror strong {
  font-weight: 700;
}

.content-tiptap-editor .ProseMirror em {
  font-style: italic;
}

.content-tiptap-editor .ProseMirror u {
  text-decoration: underline;
}

.content-tiptap-editor .ProseMirror s {
  text-decoration: line-through;
}

.content-tiptap-editor .ProseMirror a {
  color: rgb(37 99 235);
  text-decoration: underline;
}

.dark .content-tiptap-editor .ProseMirror a {
  color: rgb(96 165 250);
}

.content-tiptap-editor .ProseMirror blockquote {
  border-left: 3px solid rgb(148 163 184);
  margin: 0.75rem 0;
  padding-left: 1rem;
}

.content-tiptap-editor .ProseMirror hr {
  border: 0;
  border-top: 1px solid rgb(203 213 225);
  margin: 1rem 0;
}

.content-tiptap-editor .ProseMirror ul[data-type='taskList'] {
  list-style: none;
  margin: 0.5rem 0;
  padding-left: 0;
}

.content-tiptap-editor .ProseMirror ul[data-type='taskList'] li {
  align-items: flex-start;
  display: flex;
  gap: 0.5rem;
}

.content-tiptap-editor .ProseMirror ul[data-type='taskList'] li > label {
  flex: 0 0 auto;
  margin-top: 0.2rem;
}

.content-tiptap-editor .ProseMirror ul[data-type='taskList'] li > div {
  flex: 1 1 auto;
}

.content-tiptap-editor .ProseMirror p[style*='text-align: center'],
.content-tiptap-editor .ProseMirror h1[style*='text-align: center'],
.content-tiptap-editor .ProseMirror h2[style*='text-align: center'],
.content-tiptap-editor .ProseMirror h3[style*='text-align: center'],
.content-tiptap-editor .ProseMirror blockquote[style*='text-align: center'] {
  text-align: center;
}

.content-tiptap-editor .ProseMirror p[style*='text-align: right'],
.content-tiptap-editor .ProseMirror h1[style*='text-align: right'],
.content-tiptap-editor .ProseMirror h2[style*='text-align: right'],
.content-tiptap-editor .ProseMirror h3[style*='text-align: right'],
.content-tiptap-editor .ProseMirror blockquote[style*='text-align: right'] {
  text-align: right;
}

.content-tiptap-editor .ProseMirror p[style*='text-align: left'],
.content-tiptap-editor .ProseMirror h1[style*='text-align: left'],
.content-tiptap-editor .ProseMirror h2[style*='text-align: left'],
.content-tiptap-editor .ProseMirror h3[style*='text-align: left'],
.content-tiptap-editor .ProseMirror blockquote[style*='text-align: left'] {
  text-align: left;
}

.content-tiptap-editor .table-scroll {
  margin: 0;
  overflow-x: auto;
  max-width: 100%;
}

.content-tiptap-editor .ProseMirror table {
  border-collapse: collapse;
  min-width: 100%;
  table-layout: fixed;
  width: max-content;
}

.content-tiptap-editor .ProseMirror th,
.content-tiptap-editor .ProseMirror td {
  border: 1px solid rgb(203 213 225);
  min-width: 6rem;
  padding: 0.4rem 0.6rem;
  vertical-align: top;
}

.content-tiptap-editor .ProseMirror th {
  background: rgb(248 250 252);
  font-weight: 600;
}

.dark .content-tiptap-editor .ProseMirror th {
  background: rgb(30 41 59);
}

.dark .content-tiptap-editor .ProseMirror th,
.dark .content-tiptap-editor .ProseMirror td {
  border-color: rgb(71 85 105);
}

/*
 * Animations off (default; Profile → Settings turns them on for the session).
 * Shows every theme intro element in its final state: logo, menu items, dividers, table rows.
 */
html.no-animations .intro-x,
html.no-animations .-intro-x,
html.no-animations .intro-y,
html.no-animations .-intro-y,
html.no-animations .side-nav > ul > li > a,
html.no-animations .side-nav > ul > li.side-nav__devider,
html.no-animations .side-nav > ul > li > ul,
html.no-animations .side-nav > ul > li > ul > li > a,
html.no-animations .mobile-menu .menu {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
html.no-animations .side-nav > ul > li > a.side-menu--active { z-index: 10; }
html.no-animations .toast-item { transition: none; }

/* dashboard */
.dashboard-card { display: block; transition: box-shadow .15s, transform .15s; }
.dashboard-card:hover { box-shadow: 0 0 0 2px rgb(var(--color-primary) / .6); }
.dashboard-chart { display: flex; align-items: flex-end; gap: 4px; height: 220px; padding-bottom: 1.5rem; }
.dashboard-chart__bar {
  position: relative; flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  border-radius: .25rem;
}
.dashboard-chart__bar:hover { background: rgb(var(--color-slate-200) / .5); }
.dark .dashboard-chart__bar:hover { background: rgb(var(--color-darkmode-400) / .5); }
.dashboard-chart__fill { width: 100%; max-width: 28px; border-radius: .25rem .25rem 0 0; background: rgb(var(--color-primary)); }
.dashboard-chart__value { font-size: .65rem; color: rgb(var(--color-slate-500)); margin-bottom: 2px; }
.dashboard-chart__label { position: absolute; bottom: -1.4rem; font-size: .65rem; color: rgb(var(--color-slate-500)); white-space: nowrap; }