/* =====================================================
   Lucid Compliances – App Skin (Mofi-aligned)
   - Role-based (RBAC) theming
   - Cards, tables, forms, badges, progress
   - Header/sidebar polish
   ===================================================== */

/* ---- Base / Resets ---- */
html, body { height: 100%; }
body {
  font-family: "Inter", "Outfit", system-ui, -apple-system, sans-serif;
  background-color: #f1f5f9;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
}

/* ---- Default Theme Vars (can be overridden by role themes) ---- */
:root {
  --lc-primary: #2c7be5;
  --lc-primary-600: #1f66c7;
  --lc-accent: #22b07d;
  --lc-sidebar-w: 260px;
  --lc-surface: #ffffff;
  --lc-surface-muted: #f8fafc;
  --lc-border: #e2e8f0;
  --lc-text-muted: #64748b;
  --lc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --lc-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06);
}

/* =============================
   RBAC / Role-based Theme Colors
   ============================= */
/* LAD — Lucid Admin (purple) */
body.theme-lad { --lc-primary:#6f42c1; --lc-primary-600:#5a35a1; }
/* LUS — Lucid Staff (blue)   */
body.theme-lus { --lc-primary:#0d6efd; --lc-primary-600:#0b5ed7; }
/* EAD — Evaluator Admin (green) */
body.theme-ead { --lc-primary:#198754; --lc-primary-600:#146c43; }
/* EVS — Evaluator Staff (teal)  */
body.theme-evs { --lc-primary:#20c997; --lc-primary-600:#17a381; }
/* SUS — Supplier Staff (orange) */
body.theme-sus { --lc-primary:#fd7e14; --lc-primary-600:#e96f0c; }

/* ---- Primary-driven components (works without full Bootstrap) ---- */
.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled { background-color: var(--lc-primary) !important; border-color: var(--lc-primary) !important; }
.btn-primary:hover,
.btn-primary:focus { background-color: var(--lc-primary-600) !important; border-color: var(--lc-primary-600) !important; }

.link-primary { color: var(--lc-primary) !important; }
.link-primary:hover { color: var(--lc-primary-600) !important; }

.badge.bg-primary,
.badge.text-bg-primary { background-color: var(--lc-primary) !important; }

.progress-bar { background-color: var(--lc-primary) !important; }

/* ---- Lucid Compliances logo lockups ---- */
.lc-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.lc-logo__lockup {
  display: block;
  height: 2.2rem;
  width: auto;
  max-width: min(240px, 58vw);
}

.lc-logo--header-light .lc-logo__lockup {
  height: 2rem;
  max-width: min(220px, 50vw);
}

.lc-logo--sidebar .lc-logo__lockup {
  height: 1.85rem;
  max-width: min(200px, 72vw);
}

.lc-logo--login .lc-logo__lockup {
  height: 2.5rem;
  max-width: min(280px, 85vw);
}

.login-card .logo {
  display: flex;
  justify-content: flex-start;
}

/* =============================
   App shell (sidebar + main)
   ============================= */
.lc-app-auth { overflow-x: hidden; }

.lc-main {
  margin-left: var(--lc-sidebar-w);
  min-height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--lc-surface-muted);
  transition: margin-left 0.2s ease;
}

body.lc-sidebar-collapsed .lc-main {
  margin-left: 0;
}

.lc-page {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem 2rem;
}

.lc-page--guest {
  min-height: 100vh;
}

.page-body {
  padding: 0;
  max-width: 1600px;
  margin: 0 auto;
}

/* ---- Topbar ---- */
.lc-topbar {
  position: sticky;
  top: 0;
  z-index: 1010;
  background: var(--lc-surface);
  box-shadow: var(--lc-shadow-sm);
}

.lc-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.lc-topbar__start {
  min-width: 0;
}

.lc-page-title {
  font-family: "Outfit", "Inter", sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.15rem;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.lc-breadcrumb .breadcrumb {
  font-size: 0.8125rem;
  --bs-breadcrumb-divider: "/";
}

.lc-breadcrumb .breadcrumb-item a {
  color: var(--lc-text-muted);
  text-decoration: none;
}

.lc-breadcrumb .breadcrumb-item a:hover {
  color: var(--lc-primary);
}

.lc-breadcrumb .breadcrumb-item.active {
  color: var(--lc-text-muted);
}

.lc-topbar__actions .btn-light {
  background: var(--lc-surface-muted);
  border: 1px solid var(--lc-border);
  color: #334155;
}

.lc-topbar__actions .btn-light:hover {
  background: #fff;
  border-color: #cbd5e1;
}

.lc-topbar .avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lc-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* ---- Footer ---- */
.lc-footer {
  position: relative;
  z-index: 10;
  background: var(--lc-surface);
  margin-top: auto;
}

/* =============================
   Dashboard
   ============================= */
.lc-dashboard__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.lc-dashboard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lc-range-pills {
  display: inline-flex;
  padding: 3px;
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: 999px;
  box-shadow: var(--lc-shadow-sm);
}

.lc-range-pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lc-text-muted);
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}

.lc-range-pill:hover {
  color: #0f172a;
  background: var(--lc-surface-muted);
}

.lc-range-pill.is-active {
  background: var(--lc-primary);
  color: #fff;
}

.lc-stat-card {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  height: 100%;
  box-shadow: var(--lc-shadow-sm);
  transition: box-shadow 0.15s ease;
}

.lc-stat-card:hover {
  box-shadow: var(--lc-shadow-md);
}

.lc-stat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.lc-stat-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lc-text-muted);
}

.lc-stat-card__badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: var(--lc-surface-muted);
  color: var(--lc-text-muted);
  border: 1px solid var(--lc-border);
}

.lc-stat-card__value {
  font-family: "Outfit", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: #0f172a;
  margin: 0.25rem 0;
}

.lc-stat-card__value--lg {
  font-size: 2rem;
}

.lc-stat-card__hint {
  font-size: 0.8125rem;
  color: var(--lc-text-muted);
  margin: 0;
}

.lc-stat-card__link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lc-primary);
  text-decoration: none;
}

.lc-stat-card__link:hover {
  text-decoration: underline;
}

.lc-chart-card {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: 12px;
  box-shadow: var(--lc-shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.lc-chart-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.25rem 0;
}

.lc-chart-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
  color: #0f172a;
}

.lc-chart-card__meta {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--lc-text-muted);
  text-transform: capitalize;
}

.lc-chart-card__body {
  position: relative;
  flex: 1;
  min-height: 200px;
  padding: 0.75rem 1rem 1rem;
}

.lc-chart-card__body canvas {
  width: 100% !important;
  height: 100% !important;
}

.lc-panel {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--lc-shadow-sm);
}

.lc-panel__title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.lc-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---- Marketing / careers ---- */
.lc-careers-role-list .list-group-item { position: relative; }
.lc-job-description { line-height: 1.6; }

.lc-careers-table-wrap {
    border-color: rgb(226 232 240 / 0.98) !important;
}

.lc-careers-jobs-table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lc-primary);
    border-bottom-width: 1px;
}

.lc-careers-jobs-table__row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lc-careers-jobs-table__row:hover {
    background-color: rgb(248 250 252);
}

.lc-careers-jobs-table__row:focus-visible {
    outline: 2px solid var(--lc-primary);
    outline-offset: -2px;
}

.lc-careers-jobs-table__row a.fw-semibold:hover {
    text-decoration: underline !important;
}

/* ---- Sidebar ---- */
.sidebar .nav-link { color:#495057; border-left:3px solid transparent; border-radius:0; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { color: var(--lc-primary); border-left-color: var(--lc-primary); background: rgba(0,0,0,0.02); }
.sidebar .nav .nav { margin-left: .75rem; }

/* ---- Cards (app-wide) ---- */
.page-body .card,
.lc-page .card {
  border: 1px solid var(--lc-border);
  border-radius: 12px;
  box-shadow: var(--lc-shadow-sm);
  background: var(--lc-surface);
}

.card > .card-header {
  border-bottom: 1px solid var(--lc-border);
  background: var(--lc-surface);
  font-weight: 600;
}

.card-form .card-body { padding: 1.25rem; }

.btn-outline-primary {
  --bs-btn-color: var(--lc-primary);
  --bs-btn-border-color: var(--lc-border);
  --bs-btn-hover-bg: var(--lc-surface-muted);
  --bs-btn-hover-border-color: #cbd5e1;
  --bs-btn-hover-color: var(--lc-primary-600);
}

/* ---- Tables ---- */
.table th, .table td { vertical-align: middle; }
.table-hover tbody tr:hover { background-color: rgba(0,0,0,.02); }

/* ---- Badges / Pills ---- */
.badge { font-size: .8rem; padding: .4em .65em; }
.file-status-badge { font-size:.75rem; text-transform: uppercase; }

/* ---- Progress (subtle; avoid full-width decorative bars on stats) ---- */
.lc-dashboard .progress { display: none; }
.progress { height: 0.35rem; border-radius: 999px; background: #e2e8f0; }
.progress-bar { font-size: 0; }

/* ---- Offcanvas (notifications panel) ---- */
.offcanvas-end { width: 360px; }

/* ---- Forms ---- */
.form-label .req { color: #dc3545; margin-left: 2px; }
.invalid-feedback { display:block; }

/* ---- Utilities ---- */
.text-muted-small { color:#6c757d; font-size:.875rem; }

/* =============================
   Domain-specific badges & chips
   ============================= */
/* Activities / File status */
.badge-file-up { background:#0d6efd; }    /* UPLOADING */
.badge-file-ok { background:#198754; }    /* VALID_OK */
.badge-file-val { background:#6c757d; }   /* VALIDATING */
.badge-file-re { background:#0dcaf0; }    /* REUPLOADED */
.badge-file-f  { background:#dc3545; }    /* VALID_FAILED */

/* Tickets */
.badge-prio-high { background:#dc3545; }
.badge-prio-med  { background:#fd7e14; }
.badge-prio-low  { background:#198754; }

/* Status chips (generic) */
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; background:#f1f3f5; color:#495057; }
.chip .dot { width:.5rem; height:.5rem; border-radius:50%; background:#adb5bd; display:inline-block; }

/* ---- File table helpers ---- */
.table-files .col-actions { width: 220px; }
.table-files .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; }

/* ---- Spacing helpers ---- */
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }

/* ---- Responsive tweaks ---- */
@media (max-width: 767.98px) {
  .lc-main {
    margin-left: 0;
  }

  .page-body {
    padding: 1rem;
  }

  .lc-topbar__inner {
    flex-wrap: wrap;
    min-height: auto;
  }

  .lc-stat-card__value {
    font-size: 1.5rem;
  }

  .lc-chart-card__body {
    min-height: 180px;
  }

  .offcanvas-end { width: 100%; }
  .table-responsive .btn { font-size: 0.75rem; }
}

/* space under the header and above content cards */
.page-body .lc-alerts {
  margin: 16px 16px 0 16px;
}
.page-body .lc-alerts .alert {
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}