/**
 * LegalOS Design Language
 * Legal Practice Management & CRM Platform
 *
 * Overlay layer on the shared Velzon-based admin shell (same
 * bootstrap.min.css / app.min.css / custom.min.css this workspace already
 * ships). Mirrors the token architecture used by the sibling l360-theme
 * overlay (CSS custom properties, --lex-* namespace) so the two platforms
 * read as the same design system, styled for a legal-practice context.
 */
:root {
  --lex-primary: #695eef;
  --lex-primary-light: #8f87f3;
  --lex-primary-muted: rgba(105, 94, 239, 0.12);
  --lex-success: #0ab39c;
  --lex-warning: #d98a0b;
  --lex-danger: #e5633a;
  --lex-info: #5596f7;
  --lex-gold: #b08d57;
  --lex-gold-light: #d3b88c;

  --lex-navy: #14213d;
  --lex-navy-mid: #1f2f57;
  --lex-navy-light: #2c3f75;

  --lex-text: #262a33;
  --lex-text-soft: #4a5163;
  --lex-slate: #7a8091;
  --lex-slate-light: #a4a9b8;

  --lex-bg: #f4f6fa;
  --lex-surface: #ffffff;
  --lex-border: #e6e9ef;
  --lex-border-soft: #eef0f5;

  --lex-radius: 0.55rem;
  --lex-radius-sm: 0.375rem;
  --lex-shadow: 0 1px 2px rgba(20, 33, 61, 0.06), 0 4px 16px rgba(20, 33, 61, 0.05);
  --lex-shadow-md: 0 6px 20px rgba(105, 94, 239, 0.10);

  --lex-font-display: "Outfit", sans-serif;
}

body {
  background-color: var(--lex-bg) !important;
  font-family: var(--lex-font-display);
  color: var(--lex-text);
}

/* ---- Sidebar brand box ---- */
.app-menu .navbar-brand-box {
  background: var(--lex-navy);
  display: flex;
  align-items: center;
}

.lex-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-family: var(--lex-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.lex-brand-mark .lex-brand-crest {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--lex-gold), var(--lex-gold-light));
  color: var(--lex-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

/* ---- Page header ---- */
.lex-page-header h4 {
  font-family: var(--lex-font-display);
  font-weight: 600;
  color: var(--lex-text);
}

/* ---- Cards ---- */
.card {
  border-radius: var(--lex-radius);
  box-shadow: var(--lex-shadow);
}

.lex-stat-card {
  border-radius: var(--lex-radius);
  border: 1px solid var(--lex-border-soft);
}

.lex-stat-card .lex-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lex-primary-muted);
  color: var(--lex-primary);
  font-size: 1.25rem;
}

/* ---- Sidebar nav items awaiting a future phase ---- */
.lex-soon-item .nav-link {
  color: var(--lex-slate-light) !important;
  cursor: default;
}

.lex-soon-badge {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--lex-border);
  color: var(--lex-slate);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  margin-left: auto;
}

/* ---- Auth / login ---- */
.lex-auth-wrapper {
  min-height: 100vh;
  display: flex;
}

.lex-auth-brand-panel {
  flex: 1 1 50%;
  background: linear-gradient(160deg, var(--lex-navy) 0%, var(--lex-navy-mid) 65%, var(--lex-navy-light) 100%);
  color: #fff;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem;
}

.lex-auth-brand-panel .lex-brand-crest {
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
  border-radius: 12px;
}

.lex-auth-form-panel {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lex-surface);
  padding: 2rem;
}

.lex-empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--lex-slate);
}

.lex-empty-state i {
  font-size: 2.25rem;
  color: var(--lex-slate-light);
  display: block;
  margin-bottom: 0.75rem;
}