:root{
  --bs-body-bg:#f8f9fa;
  --bs-body-color:#212529;
  --bs-secondary-color:#6c757d;
  --bs-border-color:#dee2e6;
}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bs-body-bg);
  color:var(--bs-body-color);
}
.app-page{
  min-height:100%;
  display:flex;
  flex-direction:column;
}
.app-main{
  flex:1 1 auto;
}
.app-muted{color:var(--bs-secondary-color)!important}
mark.ocr-highlight{
  background:rgba(13,110,253,.18);
  color:inherit;
  padding:0 .125rem;
  border-radius:.2rem;
}
.app-pre{
  white-space:pre-wrap;
  word-break:break-word;
}
.hidden{display:none!important}

/* Sizing */
.min-h-screen{min-height:100vh}
.h-screen{height:100vh}
.h-full{height:100%}
.w-full{width:100%}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-7xl{max-width:80rem}
.max-w-6xl{max-width:72rem}
.max-w-4xl{max-width:56rem}
.max-w-3xl{max-width:48rem}
.max-w-2xl{max-width:42rem}

/* Spacing */
.px-4{padding-left:1rem;padding-right:1rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.p-6{padding:1.5rem}
.p-5{padding:1.25rem}
.p-4{padding:1rem}
.p-3{padding:.75rem}
.p-2{padding:.5rem}
.mb-6{margin-bottom:1.5rem}
.mb-4{margin-bottom:1rem}
.mb-3{margin-bottom:.75rem}
.mt-4{margin-top:1rem}
.mt-3{margin-top:.75rem}
.mt-2{margin-top:.5rem}

/* Border Radius */
.rounded-2xl{border-radius:1rem}
.rounded-xl{border-radius:.75rem}
.rounded-lg{border-radius:.5rem}
.rounded-md{border-radius:.375rem}
.rounded{border-radius:.25rem}

/* Borders */
.border{border:1px solid var(--bs-border-color)!important}
.border-b{border-bottom:1px solid var(--bs-border-color)!important}
.border-t{border-top:1px solid var(--bs-border-color)!important}
.border-l{border-left:1px solid var(--bs-border-color)!important}
.border-r{border-right:1px solid var(--bs-border-color)!important}

/* Backgrounds - Light theme */
.bg-slate-950{background:#f8f9fa!important}
.bg-slate-900{background:#ffffff!important}
.bg-slate-800{background:#ffffff!important}
.bg-slate-700{background:#ffffff!important}
.bg-slate-950\/70{background:rgba(248,249,250,.7)!important}
.bg-slate-900\/70{background:rgba(255,255,255,.7)!important}
.bg-slate-900\/75{background:rgba(255,255,255,.75)!important}
.bg-slate-900\/50{background:rgba(255,255,255,.5)!important}
.bg-slate-800\/50{background:rgba(255,255,255,.5)!important}
.bg-slate-950\/60{background:rgba(248,249,250,.6)!important}
.bg-slate-900\/60{background:rgba(255,255,255,.6)!important}
.bg-slate-950\/40{background:rgba(248,249,250,.4)!important}
.bg-white{background:#ffffff!important}

/* Text colors - Light theme */
.text-slate-100{color:#212529!important}
.text-slate-200{color:#212529!important}
.text-slate-300{color:#212529!important}
.text-slate-400{color:#6c757d!important}
.text-slate-500{color:#6c757d!important}
.text-slate-600{color:#6c757d!important}
.text-slate-700{color:#6c757d!important}
.text-slate-950{color:#212529!important}

/* Border colors */
.border-slate-800{border-color:var(--bs-border-color)!important}
.border-slate-700{border-color:var(--bs-border-color)!important}
.border-slate-600{border-color:var(--bs-border-color)!important}
.border-slate-500{border-color:var(--bs-border-color)!important}

/* Font sizes */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-black{font-weight:800}

/* Flexbox & Grid */
.flex{display:flex}
.grid{display:grid}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}

/* Overflow */
.overflow-auto{overflow:auto}
.overflow-hidden{overflow:hidden}

/* Opacity */
.opacity-60{opacity:.6}
.opacity-50{opacity:.5}

/* Hover states - Bootstrap Light accents */
.hover\:border-cyan-400:hover{border-color:#0d6efd!important}
.hover\:border-sky-400:hover{border-color:#0d6efd!important}
.hover\:border-indigo-400:hover{border-color:#0d6efd!important}
.hover\:border-emerald-400:hover{border-color:#198754!important}
.hover\:border-rose-400:hover{border-color:#dc3545!important}
.hover\:border-amber-400:hover{border-color:#ffc107!important}

/* Side Panel */
.side-panel {
  background:#fff;
  border-left:1px solid var(--bs-border-color);
  transition:width 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease, transform 0.3s ease;
}
.has-side-panel .sidebar { width:200px; transition:width 0.3s ease; }
.has-side-panel main { max-width:35%; }
.has-side-panel .details-panel { display:none; }
.side-panel-tabs button { transition:all 0.2s ease; position:relative; }
.side-panel-tabs button::after {
  content:'';position:absolute;left:.75rem;right:.75rem;bottom:0;height:2px;background:#0d6efd;
  transform:scaleX(0);transition:transform 0.2s ease;border-radius:1px;
}
.side-panel-tabs button.active-tab-indicator::after,
.side-panel-tabs button.border-primary::after { transform:scaleX(1); }
.side-panel-tabs .border-top-2 { border-top-width:2px !important; }
.border-top-primary { border-top-color:#0d6efd !important; }

/* Side panel card hover effect */
.side-panel-card { transition:background 0.15s ease, border-color 0.15s ease; }
.side-panel-card:hover { background:#f8f9fa; border-color:#adb5bd !important; }

/* Task pulse animation for running tasks */
@keyframes taskPulse {
  0%,100% { opacity:1; }
  50% { opacity:0.65; }
}
.task-pulse { animation:taskPulse 2s ease-in-out infinite; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform:scale(1); }
    50% { opacity: 0.4; transform:scale(0.85); }
}

/* Spin icon for refresh buttons */
@keyframes spinIcon {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
.spin-icon { animation:spinIcon 1s linear infinite; display:inline-block; }

/* Task badges */
.task-status-pending,.bg-warning-subtle{background-color:#fff3cd!important;color:#664d03!important}
.task-status-running,.bg-info-subtle{background-color:#cfe2ff!important;color:#084298!important}
.task-status-completed,.bg-success-subtle{background-color:#d1e7dd!important;color:#0f5132!important}
.task-status-failed,.bg-danger-subtle{background-color:#f8d7da!important;background-color:#842029!important;color:#fff!important}

/* Edit history item */
.edit-history-item { transition:background 0.15s ease; }
.edit-history-item:hover { background:#f8f9fa; }

/* UUID link */
.uuid-link { cursor:pointer; }
.uuid-link:hover { text-decoration:underline; }

/* Transition utility for side panel elements */
.transition-all { transition:all 0.2s ease; }

/* Responsive panel */
@media (max-width:1200px) {
  .side-panel {
    position:fixed;top:56px;right:0;bottom:0;width:90%;z-index:40;
    box-shadow:-0.5rem 0 2rem rgba(0,0,0,0.18);
    animation:slideInRight 0.25s ease-out;
  }
}
@keyframes slideInRight {
  from { transform:translateX(100%); opacity:0; }
  to { transform:translateX(0); opacity:1; }
}