/* static/custom.css */

/* ── Mail preview (matches TinyMCE content rendering) ────────────────────── */
.mail-preview {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.mail-preview p { margin: 0 0 1em; }
.mail-preview ul, .mail-preview ol { margin: 0 0 1em; padding-left: 2em; }
.mail-preview li { margin: 0 0 0.25em; }
.mail-preview ul { list-style-type: disc; }
.mail-preview ol { list-style-type: decimal; }
.mail-preview table { border-collapse: collapse; }
.mail-preview td, .mail-preview th { padding: 0.25em 0.5em; }
.mail-preview a { color: #2563eb; text-decoration: underline; }
.mail-preview img { max-width: 100%; height: auto; }
.mail-preview h1, .mail-preview h2, .mail-preview h3 {
  margin: 0 0 0.5em; font-weight: 600;
}

/* ── Vetami brand colours ─────────────────────────────────────────────────── */
:root {
  --vetami-orange:     #e55a00;  /* icon ring – dark orange                  */
  --vetami-amber:      #f5a623;  /* icon dots – amber / yellow               */
  --vetami-red:        #cc2222;  /* "Vetami" wordmark – red                  */
  --vetami-gray:       #444444;  /* "Kennis op maat" tagline – dark gray     */
  --vetami-rule:       #cccccc;  /* divider line – light gray                */
}

/* Utility classes */
.text-vetami-orange  { color: var(--vetami-orange); }
.text-vetami-amber   { color: var(--vetami-amber);  }
.text-vetami-red     { color: var(--vetami-red);    }
.text-vetami-gray    { color: var(--vetami-gray);   }

.bg-vetami-orange    { background-color: var(--vetami-orange); }
.bg-vetami-amber     { background-color: var(--vetami-amber);  }
.bg-vetami-red       { background-color: var(--vetami-red);    }
.bg-vetami-gray      { background-color: var(--vetami-gray);   }

.border-vetami-orange { border-color: var(--vetami-orange); }
.border-vetami-amber  { border-color: var(--vetami-amber);  }
.border-vetami-red    { border-color: var(--vetami-red);    }
.border-vetami-gray   { border-color: var(--vetami-gray);   }

/* alle links rood 
a {
    color: #dc2626;
    /* Tailwind red-600 


    text-decoration: underline;
}
*/

/* eventueel specifieker */
table a {
  color: #dc2626;
}

.table-scroll-wrapper {
  overflow-y: auto;
  max-height: calc(100vh - 5rem); /* 48px navbar + breathing room */
  position: relative;
  z-index: 0;
}

table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
}

table thead {
  position: sticky;
  top: 0;
  z-index: 20;
}

.active-course-tab {
  background-color: var(--vetami-amber) !important;
}
.hover-course-tab:hover {
  background-color: #fde8b8;
  color: #333333;
}

.btn-course {
  background-color: var(--vetami-amber) !important;
  color: #ffffff !important;
  transition: background-color 0.15s;
}
.btn-course:hover {
  background-color: #d4891a !important;
}

/* Focus ring: single vetami-amber border */
/* Focus ring: single vetami-amber border */
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--vetami-amber) !important;
}

/* Dropdown background */
select option {
  background-color: #ffffff;
}

.badge {
  font-size: 0.75rem;
  /* text-xs */
  padding: 0.125rem 0.5rem;
  /* py-0.5 px-2 */
  border-radius: 0.25rem;
  /* rounded */
  border: 1px solid #60a5fa;
  /* border-blue-400 */
  color: #2563eb;
  /* text-blue-600 */
  background-color: #f0f7ff;
  /* optional subtle background (remove if not wanted) */
  white-space: nowrap;
  /* optional: keeps badge on one line */
}

/* Keep placeholder text normal case on uppercase inputs */
.uppercase::placeholder { text-transform: none; }

/* ── Dashboard expand/collapse ──────────────────────────────────────────── */
#dashboard-courses .expanded-view { display: none; }
#dashboard-courses.dashboard-expanded .compact-view { display: none !important; }
#dashboard-courses.dashboard-expanded .expanded-view { display: block; }

/* ── Jobs UI (scoped) ──────────────────────────────────────────────────── */
.text-2xs { font-size: 0.65rem; line-height: 0.9rem; }

.status-dot { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; flex: none; }
.status-dot--success { background: #16a34a; }
.status-dot--failed  { background: #dc2626; }
.status-dot--running { background: #2563eb; animation: jobs-pulse 1.2s ease-in-out infinite; }
@keyframes jobs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.job-row--running { box-shadow: inset 3px 0 0 #2563eb; }
.job-row--failed  { box-shadow: inset 3px 0 0 #cc2222; }
.job-runs-row > td { transition: background 0.15s ease; }

.job-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; font-size: 14px; line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.job-icon-btn:hover { background: #f3f4f6; }

/* enable/disable toggle switch */
.job-toggle {
  position: relative; width: 32px; height: 18px; border-radius: 9999px;
  background: #d1d5db; transition: background 0.15s ease; flex: none;
}
.job-toggle--on { background: var(--vetami-amber); }
.job-toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 9999px; background: #fff; transition: transform 0.15s ease;
}
.job-toggle--on .job-toggle-knob { transform: translateX(14px); }

/* log filter pills — matches the header segmented control (gray track, white active) */
.log-filter-btn {
  font-size: 0.875rem; font-weight: 500; padding: 0.25rem 0.75rem; border-radius: 0.375rem;
  color: #6b7280; transition: color 0.15s ease, background 0.15s ease;
}
.log-filter-btn:hover { color: #374151; }
.log-filter-active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

/* log line severity */
.job-log-line[data-level="WARNING"] { color: #b45309; }
.job-log-line[data-level="ERROR"]   { color: #dc2626; }

/* ── Jobs detail page: draggable split + run selection ───────────────────── */
.job-split-handle {
  height: 8px; flex: none; cursor: row-resize;
  background: #f3f4f6; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center; justify-content: center;
}
.job-split-handle:hover { background: #e5e7eb; }
.job-split-grip { width: 36px; height: 3px; border-radius: 9999px; background: #cbd5e1; }

.detail-run-row--active > td { background-color: #ffedd5 !important; }
.detail-run-row--active > td:first-child { box-shadow: inset 3px 0 0 var(--vetami-orange); }

/* ── Tailwind v2 CDN gap: enable group-hover for display utilities ────────── */
/* The precompiled v2 build does not generate the group-hover display variant, */
/* so hover fly-out submenus (e.g. "Werklijsten afdrukken") never appear.       */
.group:hover .group-hover\:block { display: block; }

/* Release-notes / rendered Markdown — restore heading sizes and list bullets that
   Tailwind's base reset strips, so `.markdown-body` (release notes) renders properly. */
.markdown-body h1 { font-size: 1.25rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: #111827; }
.markdown-body h2 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: #111827; }
.markdown-body h3 { font-size: .95rem; font-weight: 600; margin: 1rem 0 .4rem; color: #111827; }
.markdown-body p { margin: .5rem 0; line-height: 1.5; }
.markdown-body ul { list-style: disc; margin: .5rem 0; padding-left: 1.5rem; }
.markdown-body ol { list-style: decimal; margin: .5rem 0; padding-left: 1.5rem; }
.markdown-body ul ul { list-style: circle; }
.markdown-body li { margin: .25rem 0; line-height: 1.5; }
.markdown-body a { color: #2563eb; text-decoration: underline; }
.markdown-body strong { font-weight: 600; }
.markdown-body code { background: #f3f4f6; padding: .1rem .3rem; border-radius: .25rem; font-size: .85em; }

/* Mobile (< sm): scroll the whole page (navbar + tabs scroll away) instead of an internal
   scroll container. Neutralise the fixed-height partial shells so their content flows into
   the document scroll. Desktop keeps the fixed-viewport layout (see body/#main-div sm: classes). */
@media (max-width: 639px) {
  #main-div .h-full.overflow-hidden { height: auto !important; overflow: visible !important; }
}