/* Base theme for MBHTE Project Monitoring Platform */
:root {
  --mbhte-green: #2E7D32;
  --mbhte-light-green: #4CAF50;
  --mbhte-dark-green: #1B5E20;
  --mbhte-gold: #F4C430;
  --text-color: #1f2937;
  --muted-text: #6b7280;
  --bg: #f8fafc;
  --surface: #ffffff;
  --border: #e5e7eb;
  --focus: #2563eb;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --purple: #6f42c1;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 16px rgba(0,0,0,.08);
  --transition: 200ms ease;
}

html { scroll-behavior: smooth; }

body { background: var(--bg); color: var(--text-color); }

.container-narrow { max-width: 980px; }

.card-elevated { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.card-elevated:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-brand { background: var(--mbhte-green); border-color: var(--mbhte-green); color: #fff; }

/* Purple badge and button styles for Special Account role */
.bg-purple { background-color: var(--purple) !important; color: white !important; }
.btn-purple { background-color: var(--purple); border-color: var(--purple); color: white; }
.btn-outline-purple { color: var(--purple); border-color: var(--purple); }
.btn-outline-purple:hover { background-color: var(--purple); border-color: var(--purple); color: white; }
.text-purple { color: var(--purple) !important; }
.badge-special-account { background-color: var(--purple) !important; }
.btn-brand:hover { background: var(--mbhte-light-green); border-color: var(--mbhte-light-green); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-color); }
.btn-ghost:hover { background: #f3f4f6; }

.text-muted-2 { color: var(--muted-text) !important; }
.border-subtle { border-color: var(--border) !important; }

/* Focus ring for accessibility */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Skip link */
.skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 16px; top: 16px; width: auto; height: auto; background: #fff; padding: .5rem .75rem; border-radius: .5rem; box-shadow: var(--shadow-md); z-index: 20000; }

/* Skeleton loaders */
.skeleton { background: linear-gradient(90deg, #eee, #f7f7f7, #eee); background-size: 200% 100%; animation: shine 1.2s infinite reverse; border-radius: 6px; }
@keyframes shine { to { background-position-x: -200%; } }

/* Utility classes */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 992px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Tables */
.table-modern thead th { background: #f3f4f6; color: #111827; }
.table-modern tbody tr:hover { background: #fafafa; }

/* Forms */
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--success); }
.invalid-feedback { display: block; }

/* Nav/sidebar helpers */
.sidebar .nav-link { display: flex; align-items: center; gap: .5rem; }
.sidebar .nav-link .badge { margin-left: auto; }

/* Motion */
.fade-in { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Charts container */
.chart-card { position: relative; min-height: 260px; }

/* Lazy images */
img[loading="lazy"] { contain: content; }