/*
 * jumbo-ui.css — shared look for the admin panel and the front site (on top of Bootstrap 5.3).
 * Change the brand colours in :root and both apps follow.
 * Docs: docs/developer/ui.md
 */
:root {
  --jui-brand: #4f46e5;          /* indigo */
  --jui-brand-dark: #4338ca;
  --jui-brand-soft: #eef2ff;
  --jui-bg: #f6f7fb;
  --jui-surface: #ffffff;
  --jui-border: #e6e8ef;
  --jui-text: #1f2430;
  --jui-muted: #6b7280;
  --jui-radius: .75rem;
  --jui-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);

  --bs-primary: var(--jui-brand);
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: var(--jui-brand);
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: var(--jui-brand-dark);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--jui-text);
  --bs-body-bg: var(--jui-bg);
  --bs-border-color: var(--jui-border);
  --bs-border-radius: .5rem;
}

body { background: var(--jui-bg); color: var(--jui-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3 { font-weight: 650; letter-spacing: -.01em; }
.text-muted { color: var(--jui-muted) !important; }

/* Buttons in brand colour (Bootstrap 5.3 builds these from its own vars) */
.btn-primary {
  --bs-btn-bg: var(--jui-brand); --bs-btn-border-color: var(--jui-brand);
  --bs-btn-hover-bg: var(--jui-brand-dark); --bs-btn-hover-border-color: var(--jui-brand-dark);
  --bs-btn-active-bg: var(--jui-brand-dark); --bs-btn-active-border-color: var(--jui-brand-dark);
  --bs-btn-disabled-bg: var(--jui-brand); --bs-btn-disabled-border-color: var(--jui-brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--jui-brand); --bs-btn-border-color: var(--jui-brand);
  --bs-btn-hover-bg: var(--jui-brand); --bs-btn-hover-border-color: var(--jui-brand);
  --bs-btn-active-bg: var(--jui-brand); --bs-btn-active-border-color: var(--jui-brand);
}
.btn { font-weight: 500; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--jui-brand); box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15);
}
.form-check-input:checked { background-color: var(--jui-brand); border-color: var(--jui-brand); }
.nav-tabs .nav-link.active { color: var(--jui-brand); font-weight: 600; }
.page-link { color: var(--jui-brand); }
.active > .page-link, .page-link.active { background-color: var(--jui-brand); border-color: var(--jui-brand); }

/* Cards: white, soft border and shadow */
.card { border: 1px solid var(--jui-border); border-radius: var(--jui-radius); box-shadow: var(--jui-shadow); }
.card-footer { background: #fafbfc; }
.list-group { border-radius: var(--jui-radius); }
.table { --bs-table-bg: transparent; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--jui-muted); font-weight: 600; }
.table-responsive { background: var(--jui-surface); border: 1px solid var(--jui-border); border-radius: var(--jui-radius); padding: .25rem .75rem; }
.badge { font-weight: 500; }

/* Stat tiles (dashboards) */
.jui-stat { display: block; padding: 1.1rem 1.25rem; color: inherit; text-decoration: none; }
.jui-stat .jui-stat-label { color: var(--jui-muted); font-size: .85rem; }
.jui-stat .jui-stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.jui-stat:hover { background: var(--jui-brand-soft); }
.jui-icon-circle {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--jui-brand-soft); color: var(--jui-brand); font-size: 1.15rem;
}

/* Page header */
.jui-page-header { margin-bottom: 1.25rem; }
.jui-page-header h1 { margin-bottom: .15rem; }

/* Locked/unlocked content cards (front site) */
.jui-feature { transition: transform .12s ease, box-shadow .12s ease; }
.jui-feature:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 24, 40, .08); }
.jui-feature.is-locked { opacity: .85; }
.jui-feature.is-locked .jui-icon-circle { background: #f3f4f6; color: var(--jui-muted); }