:root {
  --fm-emerald: #0F5C4A;
  --fm-emerald-dk: #0A3D31;
  --fm-aqua: #1E9E8F;
  --fm-silver: #6B7280;
  --fm-ltgrey: #F2F4F3;
  --fm-mdgrey: #E4E8E6;
  --fm-white: #FFFFFF;
  --fm-ink: #1A1F1D;
}

body {
  background: var(--fm-ltgrey);
  color: var(--fm-ink);
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

a { color: var(--fm-emerald); }
a:hover { color: var(--fm-aqua); }

/* ---------- Topbar ---------- */
.fm-topbar {
  background: var(--fm-white);
  border-bottom: 1px solid var(--fm-mdgrey);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.fm-topbar img.fm-logo { height: 38px; }
.fm-topbar .fm-user { font-size: 13px; color: var(--fm-silver); text-align: right; }
.fm-topbar .fm-user strong { color: var(--fm-emerald-dk); }
.fm-topbar .fm-role-pill {
  background: linear-gradient(90deg, var(--fm-emerald), var(--fm-aqua));
  color: #fff; border-radius: 20px; padding: 2px 12px; font-size: 11px; font-weight: 600; letter-spacing: .5px;
}

/* ---------- Layout ---------- */
.fm-shell { display: flex; min-height: calc(100vh - 58px); }
.fm-sidebar {
  width: 240px;
  background: var(--fm-emerald-dk);
  color: #dfeee9;
  flex-shrink: 0;
  padding: 18px 0;
}
.fm-sidebar a {
  display: block;
  color: #cfe6df;
  padding: 10px 22px;
  font-size: 14px;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.fm-sidebar a:hover { background: rgba(255,255,255,.06); color: #fff; }
.fm-sidebar a.active {
  background: rgba(30,158,143,.25);
  border-left: 3px solid var(--fm-aqua);
  color: #fff;
  font-weight: 600;
}
.fm-sidebar .fm-nav-heading {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 1px;
  color: #7fa89c;
  padding: 16px 22px 6px;
}
.fm-main { flex: 1; padding: 26px 30px; max-width: 100%; overflow-x: auto; }

/* ---------- Cards ---------- */
.fm-card {
  background: var(--fm-white);
  border: 1px solid var(--fm-mdgrey);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(10,61,49,.04);
}
.fm-card h2, .fm-card h3 { color: var(--fm-emerald-dk); }
.fm-kpi { border-left: 4px solid var(--fm-aqua); }
.fm-kpi .fm-kpi-value { font-size: 28px; font-weight: 700; color: var(--fm-emerald-dk); }
.fm-kpi .fm-kpi-label { font-size: 12px; color: var(--fm-silver); text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Page header ---------- */
.fm-pagehead { margin-bottom: 20px; }
.fm-pagehead h1 { font-size: 22px; font-weight: 700; color: var(--fm-emerald-dk); margin-bottom: 2px; }
.fm-pagehead .fm-kicker { color: var(--fm-aqua); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.fm-pagehead p.fm-sub { color: var(--fm-silver); font-size: 14px; margin-top: 4px; }

/* ---------- Badges ---------- */
.badge-severity { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.badge-severity-low { background: #E4F3EE; color: #0F5C4A; }
.badge-severity-medium { background: #FFF3CD; color: #8A6D00; }
.badge-severity-high { background: #FDE3D0; color: #B4460A; }
.badge-severity-critical { background: #FBD8DA; color: #A61B29; }

.badge { font-weight: 600; font-size: 11px; }
.bg-success { background-color: var(--fm-emerald) !important; }
.bg-info { background-color: var(--fm-aqua) !important; }

/* ---------- Buttons ---------- */
.btn-fm-primary {
  background: linear-gradient(90deg, var(--fm-emerald), var(--fm-aqua));
  border: none; color: #fff; font-weight: 600;
}
.btn-fm-primary:hover { opacity: .9; color: #fff; }
.btn-outline-fm { border: 1px solid var(--fm-emerald); color: var(--fm-emerald); background: transparent; font-weight: 600; }
.btn-outline-fm:hover { background: var(--fm-emerald); color: #fff; }

/* ---------- Tables ---------- */
table.fm-table thead th {
  background: var(--fm-emerald-dk); color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; border: none;
}
table.fm-table td { vertical-align: middle; font-size: 13.5px; }
table.fm-table tbody tr:hover { background: var(--fm-ltgrey); }

/* ---------- Timeline (process instance steps) ---------- */
.fm-timeline { list-style: none; padding: 0; margin: 0; }
.fm-timeline li { position: relative; padding: 4px 0 18px 30px; border-left: 2px solid var(--fm-mdgrey); margin-left: 8px; }
.fm-timeline li:last-child { border-left: 2px solid transparent; }
.fm-timeline .fm-dot {
  position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--fm-mdgrey); border: 2px solid #fff;
}
.fm-timeline .fm-dot.done { background: var(--fm-emerald); }
.fm-timeline .fm-dot.active { background: var(--fm-aqua); box-shadow: 0 0 0 4px rgba(30,158,143,.2); }
.fm-timeline .fm-dot.escalated { background: #B4460A; }
.fm-timeline .fm-dot.rejected { background: #A61B29; }

/* ---------- Landing page ---------- */
.fm-hero {
  background: linear-gradient(120deg, var(--fm-emerald-dk) 0%, var(--fm-emerald) 55%, var(--fm-aqua) 100%);
  color: #fff; padding: 70px 8%; border-radius: 0 0 28px 28px;
}
.fm-hero .fm-kicker { color: #bdf0e6; }
.fm-hero h1 { font-size: 42px; font-weight: 800; margin-bottom: 14px; }
.fm-hero p.lead { font-size: 18px; color: #e5f5f1; max-width: 720px; }
.fm-hero .btn-fm-primary { padding: 12px 28px; font-size: 15px; }
.fm-landing-section { padding: 50px 8%; }
.fm-engine-card { border-top: 4px solid var(--fm-aqua); height: 100%; }
.fm-footer-landing { background: var(--fm-emerald-dk); color: #cfe6df; padding: 26px 8%; font-size: 13px; }

/* ---------- Login ---------- */
.fm-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(120deg, var(--fm-emerald-dk), var(--fm-emerald) 60%, var(--fm-aqua)); }
.fm-login-card { background: #fff; border-radius: 14px; padding: 34px; width: 460px; max-width: 92vw; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.fm-role-tile {
  border: 1px solid var(--fm-mdgrey); border-radius: 8px; padding: 8px 10px; font-size: 12.5px;
  cursor: pointer; text-align: left; background: var(--fm-ltgrey); transition: all .15s;
}
.fm-role-tile:hover { border-color: var(--fm-aqua); background: #fff; }
.fm-role-tile strong { display: block; color: var(--fm-emerald-dk); font-size: 12.5px; }

/* ---------- Misc ---------- */
.fm-chip { display: inline-block; background: var(--fm-ltgrey); border: 1px solid var(--fm-mdgrey); border-radius: 14px; padding: 2px 10px; font-size: 11.5px; color: var(--fm-silver); margin: 2px 3px 2px 0; }
.fm-hash { font-family: 'Consolas', monospace; font-size: 11px; color: var(--fm-silver); }
.text-fm-emerald { color: var(--fm-emerald-dk) !important; }
.text-fm-aqua { color: var(--fm-aqua) !important; }
.text-fm-silver { color: var(--fm-silver) !important; }