/*
 * LAWCOLAB Design System — Global Stylesheet
 * Replaces the old "simple.css" black-override file.
 * Rules:
 *   1. Light backgrounds → dark text  (#1a1a2e / #374151)
 *   2. Dark backgrounds  → white text (enforced via .lc-dark)
 *   3. Brand colours: Navy #0d1b4b  Gold #FFD700  Accent #1a6b9b
 *   4. Avoid !important except where overriding Bootstrap defaults.
 */

/* ─── Design Tokens ───────────────────────────────────────────────────────── */
:root {
  --lc-navy:        #0d1b4b;
  --lc-navy-light:  #1a3a6b;
  --lc-gold:        #FFD700;
  --lc-gold-dark:   #e6b800;
  --lc-accent:      #1a6b9b;
  --lc-surface:     #ffffff;
  --lc-bg:          #f0f4f8;
  --lc-border:      #e2e8f0;
  --lc-text:        #1a1a2e;
  --lc-text-muted:  #64748b;
  --lc-success:     #16a34a;
  --lc-danger:      #dc2626;
  --lc-warning:     #d97706;
  --lc-radius:      12px;
  --lc-shadow:      0 4px 20px rgba(0,0,0,.08);
  --lc-shadow-lg:   0 12px 48px rgba(0,0,0,.14);
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--lc-bg);
  color: var(--lc-text);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  color: var(--lc-text);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .5rem;
}

p { color: var(--lc-text); margin-bottom: 1rem; }

a { color: var(--lc-navy); text-decoration: none; }
a:hover { color: var(--lc-accent); }

/* ─── Dark-section utility ────────────────────────────────────────────────── */
/* Any element with class .lc-dark (or standard dark backgrounds) forces
   white text on all children so content stays readable regardless of body
   inheriting black text from Bootstrap or old CSS. */
.lc-dark,
[class*="bg-dark"],
.dir-hero,
.dir-stats-bar,
.cta-banner,
.spotlight-section-dark {
  color: #ffffff !important;
}

.lc-dark h1,  .lc-dark h2,  .lc-dark h3,
.lc-dark h4,  .lc-dark h5,  .lc-dark h6,
.lc-dark p,   .lc-dark label,
.dir-hero h1, .dir-hero h2, .dir-hero h3,
.dir-hero h4, .dir-hero h5, .dir-hero h6,
.dir-hero p,  .dir-hero .hero-sub,
.dir-hero .dir-hero-badge,
.cta-banner h1, .cta-banner h2, .cta-banner p {
  color: #ffffff !important;
}

.lc-dark .text-muted,
.dir-hero .text-muted {
  color: rgba(255,255,255,.7) !important;
}

/* Form labels inside dark sections must be white */
.lc-dark .form-label,
.dir-hero .form-label,
.dir-search-box .form-label,
.dir-search-box label {
  color: #ffffff !important;
  font-weight: 600;
}

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
/* Remove the old "everything is black" button overrides */
.btn-primary {
  background: var(--lc-navy) !important;
  border-color: var(--lc-navy) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: 8px;
  transition: background .2s, box-shadow .2s, transform .15s;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--lc-navy-light) !important;
  border-color: var(--lc-navy-light) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13,27,75,.3);
}

.btn-warning {
  background: linear-gradient(135deg, var(--lc-gold), #FFA500) !important;
  border-color: var(--lc-gold) !important;
  color: var(--lc-navy) !important;
  font-weight: 700;
  border-radius: 8px;
}
.btn-warning:hover, .btn-warning:focus {
  background: linear-gradient(135deg, #ffe033, #ffb300) !important;
  color: var(--lc-navy) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,165,0,.35);
}

.btn-outline-primary {
  color: var(--lc-navy) !important;
  border-color: var(--lc-navy) !important;
  background: transparent !important;
  font-weight: 600;
  border-radius: 8px;
}
.btn-outline-primary:hover {
  background: var(--lc-navy) !important;
  color: #ffffff !important;
}

.btn-outline-light {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.5) !important;
  background: transparent !important;
}
.btn-outline-light:hover {
  background: rgba(255,255,255,.15) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.btn-secondary {
  background: var(--lc-text-muted) !important;
  border-color: var(--lc-text-muted) !important;
  color: #fff !important;
  border-radius: 8px;
}

/* ─── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  box-shadow: var(--lc-shadow);
}
.card-header {
  background: var(--lc-navy) !important;
  color: #ffffff !important;
  border-bottom: none;
  border-radius: var(--lc-radius) var(--lc-radius) 0 0 !important;
  font-weight: 600;
  padding: 1rem 1.25rem;
}
/* Headings inside dark card headers must be white */
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header p, .card-header span, .card-header small,
.card-header .text-muted {
  color: #ffffff !important;
}
.card-title { color: var(--lc-text); font-weight: 700; }
.card-text  { color: var(--lc-text-muted); }

/* ─── Navbar ───────────────────────────────────────────────────────────────── */
.navbar {
  background-color: var(--lc-navy) !important;
  border-bottom: none !important;
}
.navbar-brand { color: #ffffff !important; }
.nav-link     { color: rgba(255,255,255,.85) !important; }
.nav-link:hover { color: #ffffff !important; }

/* ─── Hero / dark sections — NO white override ────────────────────────────── */
/* Remove old rule that forced hero to white */
.hero-section,
.landing-page .hero-section {
  background: unset; /* don't force white; let individual pages control */
}
.cta-section { background: unset; }

/* ─── Forms ────────────────────────────────────────────────────────────────── */
.form-label {
  font-weight: 600;
  font-size: .88rem;
  color: var(--lc-text);
  margin-bottom: .35rem;
}
.form-control, .form-select {
  border: 1.5px solid var(--lc-border);
  border-radius: 8px;
  color: var(--lc-text);
  background: #fff;
  font-size: .93rem;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--lc-navy);
  box-shadow: 0 0 0 3px rgba(13,27,75,.12);
  outline: none;
}
.form-control::placeholder { color: #94a3b8; }

/* ─── Tables ───────────────────────────────────────────────────────────────── */
.table { color: var(--lc-text); }
.table thead th {
  background: var(--lc-navy);
  color: #ffffff;
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: none;
  padding: .85rem 1rem;
}
.table > tbody > tr:hover td { background: #f0f4ff; }

/* ─── Alerts / Badges ─────────────────────────────────────────────────────── */
.alert { border-radius: var(--lc-radius); border: none; font-weight: 500; }
.alert-success { background: #dcfce7; color: #15803d; }
.alert-danger   { background: #fee2e2; color: #b91c1c; }
.alert-warning  { background: #fef9c3; color: #92400e; }
.alert-info     { background: #dbeafe; color: #1e40af; }

.badge {
  font-size: .72rem;
  font-weight: 700;
  padding: .3em .65em;
  border-radius: 50px;
}

/* ─── Pagination ───────────────────────────────────────────────────────────── */
.page-link { color: var(--lc-navy); }
.page-item.active .page-link {
  background: var(--lc-navy);
  border-color: var(--lc-navy);
  color: #fff;
}

/* ─── Sidebar / Nav panels ────────────────────────────────────────────────── */
.sidebar-nav .nav-link {
  color: var(--lc-text) !important;
  border-radius: 8px;
  padding: .55rem .9rem;
  font-size: .88rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
  background: #eef2ff;
  color: var(--lc-navy) !important;
  font-weight: 600;
}

/* ─── Dashboard stats cards ────────────────────────────────────────────────── */
.stat-card {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  box-shadow: var(--lc-shadow);
  padding: 1.5rem;
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--lc-shadow-lg);
}
.stat-card h6 {
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--lc-text-muted) !important;
  margin-bottom: .4rem;
}
.stat-card h2, .stat-card .stat-number {
  font-size: 2.2rem; font-weight: 800;
  color: var(--lc-text) !important; line-height: 1;
}
.stat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #fff;
}

/* ─── Admin cards ──────────────────────────────────────────────────────────── */
.admin-card {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  padding: 1.5rem;
  box-shadow: var(--lc-shadow);
  transition: transform .2s, box-shadow .2s;
}
.admin-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lc-shadow-lg);
}
.admin-card-icon {
  width: 50px; height: 50px; border-radius: 12px;
  background: var(--lc-navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.admin-card h6 {
  font-size: .8rem; font-weight: 700;
  color: var(--lc-text-muted) !important;
  text-transform: uppercase; letter-spacing: .06em;
}
.admin-card h2 { font-size: 2rem; font-weight: 800; color: var(--lc-text) !important; }

/* ─── Feature cards ────────────────────────────────────────────────────────── */
.feature-card {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--lc-shadow);
  transition: transform .2s, box-shadow .2s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--lc-shadow-lg); }
.feature-card h4 { color: var(--lc-text) !important; font-weight: 700; }
.feature-card p  { color: var(--lc-text-muted) !important; font-size: .92rem; }
.feature-item h6 { color: var(--lc-text) !important; font-weight: 600; }
.feature-item p  { color: var(--lc-text-muted); }
.feature-item i  { display: block; margin-bottom: .5rem; }

/* ─── Section utilities ────────────────────────────────────────────────────── */
.section-light {
  background: var(--lc-surface) !important;
  color: var(--lc-text) !important;
}
.section-light h1,.section-light h2,.section-light h3,
.section-light h4,.section-light h5,.section-light h6 {
  color: var(--lc-text) !important;
}

.section-muted {
  background: var(--lc-bg) !important;
  color: var(--lc-text) !important;
}

.section-navy {
  background: var(--lc-navy) !important;
  color: #ffffff !important;
}
.section-navy h1,.section-navy h2,.section-navy h3,
.section-navy h4,.section-navy h5,.section-navy p,
.section-navy label,.section-navy .form-label {
  color: #ffffff !important;
}
.section-navy .text-muted { color: rgba(255,255,255,.72) !important; }

/* ─── Modals ───────────────────────────────────────────────────────────────── */
.modal-header {
  background: var(--lc-navy);
  color: #fff;
  border-bottom: none;
  border-radius: var(--lc-radius) var(--lc-radius) 0 0;
}
.modal-header .modal-title { color: #fff !important; font-weight: 700; }
.modal-header .btn-close { filter: invert(1); }
.modal-content { border-radius: var(--lc-radius); border: none; box-shadow: var(--lc-shadow-lg); }

/* ─── Flash messages / toasts ──────────────────────────────────────────────── */
.flash-message {
  border-radius: var(--lc-radius);
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
  font-weight: 500;
  display: flex; align-items: flex-start; gap: .75rem;
}

/* ─── Breadcrumbs ──────────────────────────────────────────────────────────── */
.breadcrumb { background: transparent; padding: 0; }
.breadcrumb-item a { color: var(--lc-navy); font-weight: 500; }
.breadcrumb-item.active { color: var(--lc-text-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--lc-text-muted); }

/* ─── Dropdowns ────────────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  box-shadow: var(--lc-shadow-lg);
  padding: .5rem;
}
.dropdown-item {
  border-radius: 7px;
  color: var(--lc-text) !important;
  font-size: .88rem;
  padding: .5rem .85rem;
  transition: background .15s;
}
.dropdown-item:hover { background: #eef2ff !important; color: var(--lc-navy) !important; }

/* ─── Progress bars ────────────────────────────────────────────────────────── */
.progress { border-radius: 50px; background: #e2e8f0; }
.progress-bar { border-radius: 50px; }

/* ─── Scrollbar (webkit) ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ─── Legacy class compatibility (old templates used these) ────────────────── */
.text-gradient-os {
  background: linear-gradient(45deg, var(--lc-navy), var(--lc-accent));
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.text-blue-os { color: var(--lc-accent); font-weight: 800; }
.text-gradient-taskdrip {
  background: linear-gradient(45deg, #007bff, #66b3ff);
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }
  .stat-card h2 { font-size: 1.75rem; }
}