/*
 * Publiax app-wide design system - the same shadcn/ui-inspired visual
 * language introduced in Video Studio (neutral palette, thin borders
 * instead of heavy shadows, restrained radius, tight typography),
 * reimplemented as plain CSS restyling this app's existing Bootstrap 5
 * primitives, since the app is server-rendered Jinja2 + Bootstrap, not
 * React (shadcn/ui itself is a React/Tailwind/Radix component library
 * and can't be dropped into this stack as-is).
 *
 * Scoped under .app-theme, applied once on <main class="content-body">
 * in base.html, so it reaches every page's content area without
 * touching the sidebar/topbar chrome or requiring per-template opt-in.
 */

.app-theme {
  --app-background: 0 0% 100%;
  --app-foreground: 222 47% 11%;
  --app-muted: 210 40% 97%;
  --app-muted-foreground: 215 16% 47%;
  --app-card: 0 0% 100%;
  --app-border: 214 32% 91%;
  --app-input: 214 32% 91%;
  --app-ring: 20 90% 58%;
  --app-primary: 20 90% 58%;
  --app-primary-foreground: 0 0% 100%;
  --app-secondary: 210 40% 96%;
  --app-secondary-foreground: 222 47% 11%;
  --app-accent: 210 40% 96%;
  --app-accent-foreground: 222 47% 11%;
  --app-destructive: 0 72% 51%;
  --app-destructive-foreground: 0 0% 100%;
  --app-success: 142 71% 45%;
  --app-radius: 0.625rem;

  color: hsl(var(--app-foreground));
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
}

.app-theme * { letter-spacing: 0; }

/* ---------- Layout shell ---------- */
.app-theme h1, .app-theme h2, .app-theme h3, .app-theme h4, .app-theme h5, .app-theme h6 {
  color: hsl(var(--app-foreground));
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.app-theme h2 { font-size: 1.5rem; }
.app-theme .text-muted { color: hsl(var(--app-muted-foreground)) !important; }

.app-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.app-page-header .app-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--app-primary));
  margin-bottom: 0.35rem;
}
.app-page-header h1, .app-page-header h2 { margin-bottom: 0.2rem; }
.app-page-header p { margin-bottom: 0; font-size: 0.875rem; }
.app-page-header .app-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.app-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid hsl(var(--app-border));
}
.app-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: calc(var(--app-radius) - 2px);
  font-size: 0.82rem;
  font-weight: 500;
  color: hsl(var(--app-muted-foreground));
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.app-subnav a:hover { background: hsl(var(--app-accent)); color: hsl(var(--app-foreground)); }
.app-subnav a.active { background: hsl(var(--app-primary) / 0.1); color: hsl(var(--app-primary)); }
.app-subnav a i { font-size: 0.85rem; width: 1rem; text-align: center; }

/* ---------- Cards ---------- */
.app-theme .card {
  background: hsl(var(--app-card));
  border: 1px solid hsl(var(--app-border));
  border-radius: var(--app-radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.app-theme .card:hover.app-hoverable {
  border-color: hsl(var(--app-ring) / 0.5);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.app-theme .card-body { padding: 1.25rem; }

/* ---------- Buttons ---------- */
.app-theme .btn {
  border-radius: calc(var(--app-radius) - 2px);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;
}
.app-theme .d-flex.flex-wrap { row-gap: 0.5rem; }
.app-theme .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--app-ring) / 0.35);
}
.app-theme .btn-primary {
  background: hsl(var(--app-primary));
  border-color: hsl(var(--app-primary));
  color: hsl(var(--app-primary-foreground));
}
.app-theme .btn-primary:hover, .app-theme .btn-primary:active {
  background: hsl(var(--app-primary) / 0.9) !important;
  border-color: hsl(var(--app-primary) / 0.9) !important;
}
.app-theme .btn-outline-primary {
  background: transparent;
  border-color: hsl(var(--app-border));
  color: hsl(var(--app-foreground));
}
.app-theme .btn-outline-primary:hover {
  background: hsl(var(--app-accent));
  border-color: hsl(var(--app-border));
  color: hsl(var(--app-foreground));
}
.app-theme .btn-outline-secondary, .app-theme .btn-outline-warning {
  background: transparent;
  border-color: hsl(var(--app-border));
  color: hsl(var(--app-foreground));
}
.app-theme .btn-outline-secondary:hover, .app-theme .btn-outline-warning:hover {
  background: hsl(var(--app-accent));
  color: hsl(var(--app-foreground));
  border-color: hsl(var(--app-border));
}
.app-theme .btn-outline-danger { border-color: hsl(var(--app-destructive) / 0.4); color: hsl(var(--app-destructive)); background: transparent; }
.app-theme .btn-outline-danger:hover { background: hsl(var(--app-destructive) / 0.08); border-color: hsl(var(--app-destructive) / 0.5); color: hsl(var(--app-destructive)); }
.app-theme .btn-outline-success { border-color: hsl(var(--app-success) / 0.4); color: hsl(var(--app-success)); background: transparent; }
.app-theme .btn-outline-success:hover { background: hsl(var(--app-success) / 0.1); border-color: hsl(var(--app-success) / 0.5); }
.app-theme .btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.app-theme .btn-lg { padding: 0.65rem 1.4rem; font-size: 0.95rem; }
.app-theme .rounded-pill { border-radius: 999px !important; }

/* ---------- Forms ---------- */
.app-theme .form-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(var(--app-foreground));
  margin-bottom: 0.35rem;
}
.app-theme .form-control, .app-theme .form-select {
  border: 1px solid hsl(var(--app-input));
  border-radius: calc(var(--app-radius) - 2px);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  background: hsl(var(--app-card));
  color: hsl(var(--app-foreground));
  box-shadow: none;
}
.app-theme .form-control::placeholder { color: hsl(var(--app-muted-foreground)); }
.app-theme .form-control:focus, .app-theme .form-select:focus {
  border-color: hsl(var(--app-ring));
  box-shadow: 0 0 0 3px hsl(var(--app-ring) / 0.18);
}
.app-theme .form-control-sm, .app-theme .form-select-sm { font-size: 0.8rem; padding: 0.35rem 0.6rem; }
.app-theme .form-text { font-size: 0.78rem; color: hsl(var(--app-muted-foreground)); }
.app-theme .form-check-input:checked {
  background-color: hsl(var(--app-primary));
  border-color: hsl(var(--app-primary));
}
.app-theme .form-check-input:focus { box-shadow: 0 0 0 3px hsl(var(--app-ring) / 0.18); }

/* ---------- Badges / pills ---------- */
.app-theme .badge {
  font-weight: 500;
  font-size: 0.72rem;
  padding: 0.3em 0.6em;
  border-radius: 999px;
}
.app-theme .badge.bg-light {
  background: hsl(var(--app-muted)) !important;
  color: hsl(var(--app-muted-foreground)) !important;
  border: 1px solid hsl(var(--app-border)) !important;
}
.app-theme .badge.bg-secondary { background: hsl(var(--app-muted)) !important; color: hsl(var(--app-muted-foreground)) !important; }

/* Status badges - semantic colors kept intentionally distinct from the neutral chrome */
.app-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 600; padding: 0.3em 0.65em; border-radius: 999px; text-transform: capitalize; }
.app-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.app-status-completed, .app-status-generated, .app-status-published, .app-status-active, .app-status-success { background: hsl(var(--app-success) / 0.12); color: hsl(var(--app-success)); }
.app-status-failed, .app-status-rejected, .app-status-error { background: hsl(var(--app-destructive) / 0.1); color: hsl(var(--app-destructive)); }
.app-status-rendering, .app-status-processing, .app-status-queued, .app-status-in_progress { background: hsl(var(--app-primary) / 0.12); color: hsl(var(--app-primary)); }
.app-status-draft, .app-status-pending, .app-status-cancelled, .app-status-inactive { background: hsl(var(--app-muted)); color: hsl(var(--app-muted-foreground)); }
.app-status-awaiting_approval, .app-status-warning { background: hsl(38 92% 50% / 0.15); color: hsl(32 95% 40%); }

/* ---------- Nav pills ---------- */
.app-theme .nav-pills .nav-link {
  color: hsl(var(--app-muted-foreground));
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  background: hsl(var(--app-muted));
}
.app-theme .nav-pills .nav-link.active {
  background: hsl(var(--app-foreground));
  color: hsl(var(--app-card));
}

/* ---------- Modals ---------- */
.app-theme .modal-content {
  border: 1px solid hsl(var(--app-border));
  border-radius: var(--app-radius);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
}
.app-theme .modal-header, .app-theme .modal-footer { border-color: hsl(var(--app-border)); }
.app-theme .modal-title { font-size: 1.05rem; font-weight: 600; }

/* ---------- Tables ---------- */
.app-theme .table { color: hsl(var(--app-foreground)); font-size: 0.85rem; }
.app-theme .table thead.table-light th {
  background: hsl(var(--app-muted) / 0.6);
  color: hsl(var(--app-muted-foreground));
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid hsl(var(--app-border));
}
.app-theme .table td, .app-theme .table th { border-color: hsl(var(--app-border)); vertical-align: middle; }

/* ---------- Progress ---------- */
.app-theme .progress { background: hsl(var(--app-muted)); border-radius: 999px; overflow: hidden; }
.app-theme .progress-bar { background: hsl(var(--app-primary)); }

/* ---------- Alerts ---------- */
.app-theme .alert { border: 1px solid transparent; border-radius: var(--app-radius); font-size: 0.85rem; }
.app-theme .alert-danger { background: hsl(var(--app-destructive) / 0.08); border-color: hsl(var(--app-destructive) / 0.25); color: hsl(var(--app-destructive)); }
.app-theme .alert-success { background: hsl(var(--app-success) / 0.1); border-color: hsl(var(--app-success) / 0.3); color: hsl(150 60% 30%); }
.app-theme .alert-info { background: hsl(var(--app-primary) / 0.08); border-color: hsl(var(--app-primary) / 0.25); color: hsl(var(--app-primary)); }
.app-theme .alert-warning { background: hsl(38 92% 50% / 0.1); border-color: hsl(38 92% 50% / 0.3); color: hsl(32 95% 32%); }

/* ---------- Empty states ---------- */
.app-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5rem 1.5rem;
  border: 1px dashed hsl(var(--app-border));
  border-radius: var(--app-radius);
  background: hsl(var(--app-card));
}
.app-empty i { font-size: 1.75rem; color: hsl(var(--app-muted-foreground)); margin-bottom: 0.75rem; }
.app-empty h6 { margin-bottom: 0.25rem; }
.app-empty p { color: hsl(var(--app-muted-foreground)); font-size: 0.85rem; max-width: 26rem; margin: 0 auto; }

/* ---------- Misc ---------- */
.app-theme a { color: hsl(var(--app-primary)); }
.app-theme hr { border-color: hsl(var(--app-border)); opacity: 1; }