/* ============================================================
   NavodAi — Modern design system
   Same class names used throughout the app (btn-navodai, card-stat,
   table-wrap, badge-good/risk, navbar-navodai) — only how they look
   has changed, so no page templates needed to change.
   ============================================================ */

:root {
  --navodai-navy: #14213d;
  --navodai-blue: #2f8fef;
  --navodai-blue-light: #5fb3ff;
  --navodai-blue-dark: #1c6fd8;
  --navodai-orange: #ff7a30; /* kept for any legacy references */
  --ink: #1a2333;
  --muted: #64748b;
  --border-soft: #e6eaf1;
  --bg-canvas: #f5f7fb;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-soft: 0 1px 3px rgba(20,33,61,0.06), 0 8px 24px rgba(20,33,61,0.06);
  --shadow-card: 0 1px 2px rgba(20,33,61,0.04), 0 4px 16px rgba(20,33,61,0.05);
}

* { box-sizing: border-box; }

body {
  background: var(--bg-canvas);
  color: var(--ink);
  font-family: -apple-system, 'Segoe UI', Roboto, Inter, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--navodai-navy); letter-spacing: -0.3px; }

/* ===================== Top Nav — light, modern, icon + wordmark ===================== */
.navbar-navodai {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 1px 2px rgba(20,33,61,0.03);
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar-navodai .navbar-brand { color: var(--navodai-navy) !important; }

.navodai-wordmark {
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--navodai-navy);
}
.navodai-wordmark .ai-accent {
  background: linear-gradient(135deg, var(--navodai-blue) 0%, var(--navodai-blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.navbar-navodai .navodai-wordmark { color: var(--navodai-navy); }

/* Pill-style nav links on a light background */
.navbar-navodai .nav-link {
  color: var(--muted) !important;
  background: transparent;
  border-radius: 10px;
  padding: 8px 14px !important;
  margin: 0 2px;
  font-weight: 500;
  font-size: 0.92rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.navbar-navodai .nav-link:hover { background: #eef4ff; color: var(--navodai-blue-dark) !important; }
.navbar-navodai .nav-link.active,
.navbar-navodai .nav-item.dropdown.show .nav-link {
  background: linear-gradient(135deg, var(--navodai-blue) 0%, var(--navodai-blue-dark) 100%);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(47,143,239,0.28);
}
.navbar-navodai .dropdown-menu { border-radius: var(--radius-md); border: 1px solid var(--border-soft); box-shadow: var(--shadow-soft); }
.navbar-navodai .dropdown-item:active { background: var(--navodai-blue); }
.navbar-navodai .navbar-text { color: var(--muted) !important; }
.navbar-navodai .badge.bg-light { background: #eef4ff !important; color: var(--navodai-blue-dark) !important; font-weight: 600; }
.navbar-toggler { border: 1px solid var(--border-soft) !important; }
.navbar-toggler-icon { filter: invert(0.2); }

/* ===================== Buttons ===================== */
.btn-navodai {
  background: linear-gradient(135deg, var(--navodai-blue) 0%, var(--navodai-blue-dark) 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  padding: 8px 18px;
  box-shadow: 0 4px 14px rgba(47,143,239,0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-navodai:hover {
  background: linear-gradient(135deg, var(--navodai-blue-dark) 0%, var(--navodai-blue) 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(47,143,239,0.36);
}
.btn-navodai:active { transform: translateY(0); }
.btn-outline-secondary {
  border-radius: 10px;
  border-color: var(--border-soft);
  color: var(--muted);
  font-weight: 500;
}
.btn-outline-secondary:hover { background: #eef4ff; border-color: var(--navodai-blue-light); color: var(--navodai-blue-dark); }
.btn-outline-danger { border-radius: 10px; font-weight: 500; }
.btn-sm { border-radius: 8px; }
.btn { letter-spacing: 0.1px; }

/* ===================== Cards ===================== */
.card-stat {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.card-stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--navodai-blue) 0%, var(--navodai-blue-light) 100%);
}
.card-stat.custom-accent::before { display: none; }
.card-stat .card-body { padding: 1.25rem 1.4rem; }
.card-stat .stat-value { font-size: 2.1rem; font-weight: 800; color: var(--navodai-navy); letter-spacing: -0.5px; }
.card-stat .stat-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

.progress { height: 8px; border-radius: 20px; background: #eef1f6; }
.progress-bar { border-radius: 20px; }

.table-wrap {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-soft);
}
.table-wrap h6, .card h6 {
  color: var(--navodai-navy) !important;
  font-weight: 700 !important;
  font-size: 1.02rem;
  letter-spacing: 0.1px;
}

/* ===================== Tables ===================== */
.table { --bs-table-hover-bg: #f5f9ff; }
.table thead th {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  border-bottom: 2px solid var(--border-soft);
  padding-bottom: 10px;
}
.table td { border-color: var(--border-soft); vertical-align: middle; }
.table-active, .table-active > * { background-color: #eef4ff !important; }

/* ===================== Badges — soft pill style ===================== */
.badge { border-radius: 20px; font-weight: 600; padding: 5px 11px; font-size: 0.72rem; letter-spacing: 0.02em; }
.badge-risk { background: #fde8e8 !important; color: #c81e1e !important; }
.badge-good { background: #e3f9ed !important; color: #0f9d58 !important; }
.bg-warning { background: #fff4de !important; color: #8a5a00 !important; }
.bg-secondary { background: #eef1f6 !important; color: var(--muted) !important; }
.bg-danger { background: #fde8e8 !important; color: #c81e1e !important; }

/* ===================== Forms ===================== */
.form-control, .form-select {
  border-radius: 9px;
  border-color: var(--border-soft);
  padding: 8px 12px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--navodai-blue);
  box-shadow: 0 0 0 3px rgba(47,143,239,0.15);
}
.form-control-sm, .form-select-sm { border-radius: 8px; }
.form-label { font-weight: 600; font-size: 0.85rem; color: var(--navodai-navy); }

/* ===================== Alerts ===================== */
.alert-success { background: #e3f9ed; color: #0f7a44; border: none; border-radius: var(--radius-md); }
.alert-danger { background: #fde8e8; color: #b91c1c; border: none; border-radius: var(--radius-md); }
.alert-info { background: #eaf4ff; color: #1c5fa8; border: none; border-radius: var(--radius-md); }
.alert-warning { background: #fff4de; color: #8a5a00; border: none; border-radius: var(--radius-md); }

/* ===================== Wordmark on light standalone pages (login, install) ===================== */
.navodai-wordmark.large { font-size: 2.4rem; }

/* ===================== Pending-approval preview rows ===================== */
.pending-row { color: #8a94a3; font-style: italic; background: #f7f8fa !important; }
.pending-row td { color: #8a94a3 !important; }
.pending-badge {
  display: inline-block; background: #fff4de; color: #8a5a00; border: 1px solid #ffe1a3;
  border-radius: 12px; padding: 2px 10px; font-size: 0.7rem; font-weight: 700; font-style: normal;
  letter-spacing: 0.2px; white-space: nowrap;
}
.pending-diff { color: #8a94a3; font-size: 0.8rem; font-style: italic; }
.pending-diff .arrow { margin: 0 4px; }
.pending-diff .newval { color: #8a5a00; font-weight: 600; }

footer { color: #9aa5b5 !important; }