/* ============================================================
   Self Help Africa Malawi — Procurement Tracker
   Custom Stylesheet
   ============================================================ */

/* ---- CSS Variables ---- */
:root {
  --sha-green:       #2E7D32;
  --sha-green-dark:  #1B5E20;
  --sha-green-light: #4CAF50;
  --sha-green-pale:  #E8F5E9;
  --sha-orange:      #E65100;
  --sha-orange-light:#FF6D00;
  --sha-yellow:      #F9A825;
  --sha-teal:        #00695C;
  --sha-sidebar-bg:  #1a2535;
  --sha-sidebar-w:   240px;
  --sha-navbar-h:    56px;
  --sha-footer-h:    42px;
  --sha-text-muted:  #6c757d;
  --sha-border:      #dee2e6;
  --sha-card-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
}

/* ---- Base ---- */
body.sha-body {
  background: #f4f6f8;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
}

/* ---- Navbar ---- */
.sha-navbar {
  background: linear-gradient(135deg, var(--sha-green-dark) 0%, var(--sha-green) 100%);
  height: var(--sha-navbar-h);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  z-index: 1040;
}
.sha-logo-icon {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff;
  flex-shrink: 0;
}
.sha-brand-name  { font-size: .85rem; font-weight: 700; color: #fff; line-height: 1.1; }
.sha-brand-sub   { font-size: .65rem; color: rgba(255,255,255,.75); line-height: 1; }
.sha-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  color: #fff; font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ---- Sidebar ---- */
.sha-sidebar {
  position: fixed;
  top: var(--sha-navbar-h);
  left: 0;
  width: var(--sha-sidebar-w);
  height: calc(100vh - var(--sha-navbar-h));
  background: var(--sha-sidebar-bg);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1030;
  transition: transform .25s ease;
}
.sha-sidebar::-webkit-scrollbar { width: 4px; }
.sha-sidebar::-webkit-scrollbar-track { background: transparent; }
.sha-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.sha-sidebar-inner { padding: 0.75rem 0 1rem; }

.sha-sidenav { display: flex; flex-direction: column; }

.sha-nav-section {
  font-size: .63rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  padding: 1rem 1rem .25rem;
}

.sha-nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .45rem 1rem;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: .82rem;
  border-left: 3px solid transparent;
  transition: all .15s ease;
}
.sha-nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.sha-nav-link.active {
  color: #fff;
  background: rgba(76,175,80,.15);
  border-left-color: var(--sha-green-light);
}
.sha-nav-link i { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }

/* ---- Main Content ---- */
.sha-main {
  margin-left: var(--sha-sidebar-w);
  margin-top: var(--sha-navbar-h);
  min-height: calc(100vh - var(--sha-navbar-h) - var(--sha-footer-h));
  transition: margin-left .25s ease;
}
.sha-content { padding-bottom: 2rem; }

/* ---- Footer ---- */
.sha-footer {
  margin-left: var(--sha-sidebar-w);
  height: var(--sha-footer-h);
  background: #fff;
  border-top: 1px solid var(--sha-border);
  display: flex; align-items: center;
  transition: margin-left .25s ease;
}

/* ---- Mobile Sidebar ---- */
@media (max-width: 991.98px) {
  .sha-sidebar { transform: translateX(-100%); }
  .sha-sidebar.show { transform: translateX(0); }
  .sha-main, .sha-footer { margin-left: 0; }
}

/* ---- Cards ---- */
.sha-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--sha-card-shadow);
  border: 1px solid rgba(0,0,0,.06);
}
.sha-card-header {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--sha-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
}
.sha-card-body  { padding: 1.25rem; }

/* ---- KPI Tiles ---- */
.kpi-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.kpi-tile {
  background: #fff;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  box-shadow: var(--sha-card-shadow);
  border: 1px solid rgba(0,0,0,.06);
  position: relative; overflow: hidden;
}
.kpi-tile::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--kpi-color, var(--sha-green));
}
.kpi-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--kpi-bg, var(--sha-green-pale));
  color: var(--kpi-color, var(--sha-green));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: .6rem;
}
.kpi-value  { font-size: 1.4rem; font-weight: 700; color: #1a2535; line-height: 1.1; }
.kpi-label  { font-size: .72rem; color: var(--sha-text-muted); margin-top: .2rem; }
.kpi-sub    { font-size: .7rem; color: var(--sha-text-muted); margin-top: .15rem; }

/* ---- Status Timeline ---- */
.pr-timeline { position: relative; padding-left: 28px; }
.pr-timeline::before {
  content: '';
  position: absolute; left: 10px; top: 0; bottom: 0;
  width: 2px; background: var(--sha-border);
}
.timeline-item { position: relative; margin-bottom: 1rem; }
.timeline-dot {
  position: absolute; left: -22px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--sha-border);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--sha-border);
}
.timeline-dot.active  { background: var(--sha-green); box-shadow: 0 0 0 2px var(--sha-green-pale); }
.timeline-dot.done    { background: #6c757d; }
.timeline-dot.stalled { background: #dc3545; box-shadow: 0 0 0 2px #f8d7da; }

/* ---- Tables ---- */
.sha-table { font-size: .82rem; }
.sha-table th { font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--sha-text-muted); background: #f8f9fa; }
.sha-table td { vertical-align: middle; }
.sha-table tr:hover td { background: #fafbfc; }

/* ---- Page Header ---- */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.page-header-left h1 { font-size: 1.3rem; font-weight: 700; color: #1a2535; margin: 0; }
.page-header-left .breadcrumb { font-size: .78rem; margin: .2rem 0 0; }

/* ---- Badges / Pills ---- */
.badge { font-size: .7rem; font-weight: 600; padding: .3em .55em; }

/* ---- Workflow progress bar ---- */
.workflow-steps {
  display: flex; align-items: center; gap: 0;
  overflow-x: auto; padding: .5rem 0;
}
.workflow-step {
  display: flex; align-items: center; flex-shrink: 0;
  font-size: .68rem; color: #999; gap: 0;
}
.workflow-step-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #dee2e6; flex-shrink: 0;
}
.workflow-step-dot.done   { background: var(--sha-green); }
.workflow-step-dot.active { background: #0d6efd; box-shadow: 0 0 0 3px rgba(13,110,253,.2); }
.workflow-step-dot.stall  { background: #dc3545; }
.workflow-step-line { width: 24px; height: 2px; background: #dee2e6; flex-shrink: 0; }
.workflow-step-line.done { background: var(--sha-green); }
.workflow-step-label { display: none; }

/* ---- Alerts ---- */
.sha-alert-item {
  padding: .6rem .8rem; border-radius: 6px;
  border-left: 4px solid var(--sha-green);
  background: var(--sha-green-pale); margin-bottom: .5rem;
  font-size: .8rem;
}
.sha-alert-item.warning { border-color: var(--sha-yellow); background: #FFF9C4; }
.sha-alert-item.danger  { border-color: #dc3545; background: #FFEBEE; }

/* ---- Filter Bar ---- */
.filter-bar {
  background: #fff; border-radius: 8px; padding: .75rem 1rem;
  border: 1px solid var(--sha-border); margin-bottom: 1rem;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}

/* ---- Login Page ---- */
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--sha-green-dark) 0%, #1B5E20 40%, #2E7D32 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.login-card {
  background: #fff; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: 100%; max-width: 420px;
  overflow: hidden;
}
.login-header {
  background: linear-gradient(135deg, var(--sha-green-dark), var(--sha-green));
  padding: 2rem 2rem 1.5rem;
  text-align: center; color: #fff;
}
.login-logo {
  width: 64px; height: 64px; border-radius: 16px;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 1rem;
}
.login-body { padding: 2rem; }

/* ---- Responsive ---- */
@media (max-width: 575.98px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-value { font-size: 1.1rem; }
}

/* ---- Utilities ---- */
.text-sha-green { color: var(--sha-green) !important; }
.bg-sha-green   { background: var(--sha-green) !important; }
.border-sha     { border-color: var(--sha-green) !important; }
.fw-600 { font-weight: 600; }
.fs-xs  { font-size: .75rem; }
.gap-05 { gap: .5rem; }
.cursor-pointer { cursor: pointer; }