/* ============================================================
   AGRODIA — Web App Design System
   Palm Oil ERP Platform | Corporate & Agricultural Theme
   Replaces: base.css
   Version: 1.0.0
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  /* Plantation Dark Backgrounds */
  --bg:           #081610;
  --bg-alt:       #0C1E14;
  --card:         #0F2419;
  --card-alt:     #122A1D;
  --card-hover:   #163222;
  --border:       #1B3D28;
  --border-soft:  #235035;

  /* Text */
  --text:         #E2EEE4;
  --text-soft:    #A0BFA6;
  --muted:        #608A68;
  --muted-dark:   #3A5E42;

  /* Palm Gold — Premium Accent */
  --gold:         #C9A84C;
  --gold-light:   #E8C96B;
  --gold-dark:    #956C1A;
  --gold-bg:      rgba(201,168,76,0.08);
  --gold-hover:   rgba(201,168,76,0.15);
  --gold-glow:    0 0 24px rgba(201,168,76,0.2);

  /* Brand Green — Palm / Estate */
  --green:        #2D7D46;
  --green-mid:    #3A9A5A;
  --green-light:  #4CB870;
  --green-pale:   #8ED4A8;
  --green-bg:     rgba(76,184,112,0.1);
  --green-hover:  rgba(76,184,112,0.18);
  --green-glow:   0 0 24px rgba(76,184,112,0.15);

  /* Earth Tones */
  --earth:        #8B5E2A;
  --earth-light:  #C4892C;
  --earth-bg:     rgba(139,94,42,0.1);

  /* Status Colors */
  --success:      #4CB870;
  --success-bg:   rgba(76,184,112,0.12);
  --warning:      #F0A030;
  --warning-bg:   rgba(240,160,48,0.12);
  --danger:       #E63946;
  --danger-bg:    rgba(230,57,70,0.12);
  --info:         #28B4CC;
  --info-bg:      rgba(40,180,204,0.12);
  --purple:       #8B5CF6;
  --purple-bg:    rgba(139,92,246,0.12);

  /* Layout */
  --side-w:       252px;
  --hdr-h:        64px;
  --radius:       10px;
  --radius-sm:    6px;
  --radius-lg:    16px;
  --radius-xl:    24px;

  /* Shadows */
  --shadow:       0 2px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 4px 32px rgba(0,0,0,0.6);
  --shadow-gold:  0 0 28px rgba(201,168,76,0.18);
  --shadow-green: 0 0 28px rgba(76,184,112,0.15);

  /* Transitions */
  --transition:    0.2s ease;
  --transition-md: 0.3s ease;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--green-light); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-light); }

img { max-width: 100%; display: block; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--card); }
::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-dark); }

/* ── Typography ───────────────────────────────────────────── */
h1 { font-size: 2rem;   font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.4; }
h4 { font-size: 1rem;   font-weight: 600; line-height: 1.4; }
h5 { font-size: 0.875rem; font-weight: 600; }
h6 { font-size: 0.75rem;  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

p { color: var(--text-soft); line-height: 1.7; }

.mono { font-family: 'JetBrains Mono', monospace; }

/* ── Ornament Divider ─────────────────────────────────────── */
.ornament {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0;
}
.ornament::before, .ornament::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
}
.ornament span { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; }

/* ── Layout Shell ─────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

/* ── Header ───────────────────────────────────────────────── */
.header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--hdr-h);
  background: rgba(8,22,16,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px 0 0;
  z-index: 100;
}

.header-brand {
  width: var(--side-w);
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
  flex-shrink: 0;
}

.brand-logo {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--green), var(--green-mid));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  border: 1px solid var(--green-light);
  box-shadow: var(--shadow-green);
  flex-shrink: 0;
}

.brand-text { line-height: 1.2; }
.brand-text .name    { font-size: 1rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.brand-text .tagline { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

.header-search {
  flex: 1; max-width: 440px;
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0 14px;
  height: 38px; transition: var(--transition);
}
.header-search:focus-within { border-color: var(--green); }
.header-search input {
  flex: 1; border: none; background: none; color: var(--text);
  font-family: inherit; font-size: 0.875rem; outline: none;
}
.header-search input::placeholder { color: var(--muted); }
.header-search .ico { color: var(--muted); font-size: 0.875rem; }
.hdr-kbd { color: var(--muted); font-size: 0.65rem; white-space: nowrap; }

/* ── Header Breadcrumb ────────────────────────────────────── */
.header-crumb {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: var(--muted);
  padding: 0 14px;
  border-left: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}
.header-crumb i { font-size: 0.7rem; color: var(--muted-dark); }
.crumb-sep  { color: var(--muted-dark); font-size: 0.65rem; }
.crumb-cur  { color: var(--text-soft); font-weight: 600; }
.hdr-chev   { font-size: 0.65rem; color: var(--muted); margin-left: 2px; }

.header-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.hdr-btn {
  width: 38px; height: 38px;
  background: none; border: 1px solid transparent;
  border-radius: var(--radius-sm); color: var(--text-soft);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; position: relative; transition: var(--transition);
}
.hdr-btn:hover { background: var(--card); border-color: var(--border); color: var(--text); }

.hdr-badge {
  position: absolute; top: 5px; right: 5px;
  width: 8px; height: 8px;
  background: var(--danger); border-radius: 50%;
  border: 1.5px solid var(--bg);
}

.estate-select {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0 12px;
  height: 38px; cursor: pointer;
  color: var(--text); font-size: 0.8rem;
  transition: var(--transition);
}
.estate-select:hover { border-color: var(--green); }
.estate-select .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

.user-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0 12px 0 6px;
  height: 38px; cursor: pointer; transition: var(--transition);
}
.user-chip:hover { border-color: var(--gold-dark); }

.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #fff;
  border: 1px solid var(--gold-dark);
}
.user-info { line-height: 1.2; }
.user-info .uname { font-size: 0.8rem;  font-weight: 600; color: var(--text); }
.user-info .urole { font-size: 0.65rem; color: var(--muted); }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: var(--hdr-h); left: 0; bottom: 0;
  width: var(--side-w);
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  z-index: 90;
}

.sidebar-section { padding: 16px 12px 4px; }
.sidebar-section-label {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-dark); padding: 0 8px; margin-bottom: 4px;
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--text-soft); font-size: 0.84rem; font-weight: 500;
  cursor: pointer; transition: var(--transition);
  border: 1px solid transparent;
  text-decoration: none; margin-bottom: 1px;
  position: relative;
}
.nav-item:hover { background: var(--card-hover); color: var(--text); border-color: var(--border); }
.nav-item.active {
  background: var(--green-bg); color: var(--green-light);
  border-color: var(--green); box-shadow: var(--shadow-green);
}
.nav-item.active .nav-ico { color: var(--green-light); }
.nav-ico { width: 16px; text-align: center; font-size: 0.9rem; flex-shrink: 0; color: var(--muted); }

.nav-badge {
  margin-left: auto;
  background: var(--warning); color: #000;
  font-size: 0.6rem; font-weight: 700;
  padding: 1px 6px; border-radius: 20px; min-width: 18px; text-align: center;
}
.nav-badge.green { background: var(--success); }
.nav-badge.red   { background: var(--danger); color: #fff; }

.sidebar-footer {
  margin-top: auto; padding: 12px;
  border-top: 1px solid var(--border);
}
.sync-info {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.sync-info .label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sync-info .val   { font-size: 0.8rem; color: var(--success); font-weight: 600; }

/* ── Main Content ─────────────────────────────────────────── */
.main {
  margin-left: var(--side-w);
  margin-top: var(--hdr-h);
  min-height: calc(100vh - var(--hdr-h));
  padding: 24px;
  flex: 1;
}

.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; gap: 12px;
}
.page-header-left  { display: flex; flex-direction: column; gap: 4px; }
.page-header-right { display: flex; align-items: center; gap: 8px; }

/* Info pill — date / status indicator in page header */
.period-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 5px 12px;
  font-size: 0.78rem; color: var(--text-soft); cursor: pointer;
  white-space: nowrap;
}
.period-pill i { color: var(--muted); font-size: 0.75rem; }

/* Date/search filter pill — inline in card toolbar */
.date-filter-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 12px;
  font-size: 0.78rem; color: var(--text-soft);
}

/* Unified page title with gold/green accent bar */
.page-title-bar {
  font-size: 1.4rem; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  line-height: 1.2;
}
.page-title-bar::before {
  content: ''; display: inline-block; flex-shrink: 0;
  width: 3px; height: 22px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--green));
}
.page-title-bar i { color: var(--green-light); font-size: 1.1rem; flex-shrink: 0; }

/* Legacy class alias — pages using .page-title still render correctly */
.page-title {
  font-size: 1.4rem; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  line-height: 1.2;
}
.page-title::before {
  content: ''; display: inline-block; flex-shrink: 0;
  width: 3px; height: 22px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--green));
}

.page-sub { font-size: 0.78rem; color: var(--muted); }
.page-sub i { margin-right: 4px; color: var(--green-light); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  transition: var(--transition);
}
.card:hover { border-color: var(--border-soft); }
.card.gold-border  { border-color: var(--gold-dark); }
.card.gold-border:hover  { box-shadow: var(--shadow-gold); }
.card.green-border { border-color: var(--green); }
.card.green-border:hover { box-shadow: var(--shadow-green); }

.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.card-title { font-size: 0.9rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.card-title .ico { color: var(--muted); }
.card-actions { display: flex; gap: 6px; }

/* ── KPI / Stat Cards ─────────────────────────────────────── */
.kpi-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kpi-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.kpi-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  transition: var(--transition); cursor: default;
  position: relative; overflow: hidden;
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.kpi-card.gold::before   { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.kpi-card.green::before  { background: linear-gradient(90deg, transparent, var(--success), transparent); }
.kpi-card.warn::before   { background: linear-gradient(90deg, transparent, var(--warning), transparent); }
.kpi-card.danger::before { background: linear-gradient(90deg, transparent, var(--danger), transparent); }
.kpi-card.info::before   { background: linear-gradient(90deg, transparent, var(--info), transparent); }
.kpi-card:hover { border-color: var(--border-soft); transform: translateY(-2px); box-shadow: var(--shadow); }

.kpi-top   { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.kpi-label { font-size: 0.75rem; color: var(--muted); font-weight: 500; letter-spacing: 0.02em; }
.kpi-ico   {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.kpi-ico.gold   { background: var(--gold-bg);    color: var(--gold);    border: 1px solid var(--gold-dark); }
.kpi-ico.green  { background: var(--green-bg);   color: var(--success); border: 1px solid var(--green); }
.kpi-ico.warn   { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(240,160,48,0.3); }
.kpi-ico.danger { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(230,57,70,0.3); }
.kpi-ico.info   { background: var(--info-bg);    color: var(--info);    border: 1px solid rgba(40,180,204,0.3); }
.kpi-ico.purple { background: var(--purple-bg);  color: var(--purple);  border: 1px solid rgba(139,92,246,0.3); }

.kpi-value  { font-size: 1.8rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); line-height: 1; }
.kpi-unit   { font-size: 0.8rem; color: var(--muted); margin-left: 4px; font-weight: 400; }
.kpi-change { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 0.75rem; }
.kpi-change.up   { color: var(--success); }
.kpi-change.down { color: var(--danger); }
.kpi-vs { font-size: 0.7rem; color: var(--muted); margin-left: 2px; }

.kpi-bar { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.kpi-bar-track { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.kpi-bar-fill  {
  width: var(--w, 0%);
  height: 100%; border-radius: 2px;
  background: var(--bar-c, linear-gradient(90deg, var(--green), var(--green-light)));
  transition: width 0.6s ease;
}
.kpi-pct { font-size: 0.7rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

/* ── Grid Layouts ─────────────────────────────────────────── */
.grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3    { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.grid-4    { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.grid-7-3  { display: grid; grid-template-columns: 7fr 3fr; gap: 20px; }
.grid-6-4  { display: grid; grid-template-columns: 6fr 4fr; gap: 20px; }
.grid-65-35 { display: grid; grid-template-columns: 65fr 35fr; gap: 20px; }
.col-span-2 { grid-column: span 2; }

/* ── Tables ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
thead th {
  background: var(--card-alt); color: var(--muted);
  font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td, tfoot td {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  color: var(--text-soft); vertical-align: middle;
}
tbody tr:hover td { background: var(--card-hover); color: var(--text); }
tbody tr:last-child td { border-bottom: none; }
.td-bold  { color: var(--text) !important; font-weight: 600; }
.td-mono  { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }
.td-green { color: var(--success) !important; }
.td-warn  { color: var(--warning) !important; }
.td-danger{ color: var(--danger) !important; }
.td-muted { color: var(--muted) !important; font-size: 0.75rem; }

.avatar-cell { display: flex; align-items: center; gap: 10px; }
.avatar-sm {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.avatar-sm.v2 { background: linear-gradient(135deg, var(--info), var(--purple)); }
.avatar-sm.v3 { background: linear-gradient(135deg, var(--warning), var(--danger)); }
.avatar-sm.v4 { background: linear-gradient(135deg, var(--green-mid), var(--info)); }

.tbl-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-top: 1px solid var(--border);
  background: var(--card-alt);
}
.tbl-info { font-size: 0.72rem; color: var(--muted); }
.tbl-total td { border-top: 2px solid var(--gold); border-bottom: 1px solid var(--border); background: rgba(201,168,76,0.08); font-weight: 700; padding-top: 10px; padding-bottom: 10px; }
.tbl-subtotal td { border-top: 1px solid var(--border); background: rgba(255,255,255,0.03); font-weight: 600; padding-top: 8px; padding-bottom: 8px; }
.pagination { display: flex; gap: 4px; }
.pg-btn {
  width: 28px; height: 28px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-soft);
  font-size: 0.75rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.pg-btn:hover  { border-color: var(--green); color: var(--green-light); }
.pg-btn.active { background: var(--green); border-color: var(--green); color: #fff; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
  border: 1px solid transparent; line-height: 1; white-space: nowrap;
}
.btn i, .btn svg { font-size: 0.85rem; }
.btn-sm   { padding: 5px 11px; font-size: 0.75rem; }
.btn-xs   { padding: 3px 8px;  font-size: 0.68rem; }
.btn-lg   { padding: 11px 24px; font-size: 0.9rem; }
.btn-icon { padding: 7px; width: 32px; height: 32px; justify-content: center; }

.btn-green       { background: var(--green); border-color: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-mid); border-color: var(--green-mid); }
.btn-green-light { background: var(--green-bg); border-color: var(--green); color: var(--green-light); }
.btn-green-light:hover { background: var(--green-hover); }
.btn-gold        { background: var(--gold); border-color: var(--gold); color: #000; font-weight: 700; }
.btn-gold:hover  { background: var(--gold-light); }
.btn-outline     { background: transparent; border-color: var(--border-soft); color: var(--text-soft); }
.btn-outline:hover { border-color: var(--green); color: var(--green-light); }
.btn-danger      { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #c2303a; }
.btn-ghost       { background: none; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: var(--card-hover); }

/* ── Badges / Chips ───────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 600; line-height: 1.6;
  white-space: nowrap;
}
.badge-green  { background: var(--success-bg);  color: var(--success);  border: 1px solid rgba(76,184,112,0.3); }
.badge-warn   { background: var(--warning-bg);  color: var(--warning);  border: 1px solid rgba(240,160,48,0.3); }
.badge-danger { background: var(--danger-bg);   color: var(--danger);   border: 1px solid rgba(230,57,70,0.3); }
.badge-info   { background: var(--info-bg);     color: var(--info);     border: 1px solid rgba(40,180,204,0.3); }
.badge-gold   { background: var(--gold-bg);     color: var(--gold);     border: 1px solid var(--gold-dark); }
.badge-purple { background: var(--purple-bg);   color: var(--purple);   border: 1px solid rgba(139,92,246,0.3); }
.badge-muted  { background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid var(--border); }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; margin-bottom: 6px; font-size: 0.78rem; font-weight: 600; color: var(--text-soft); }
.form-label .req { color: var(--danger); margin-left: 2px; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: inherit; font-size: 0.84rem;
  padding: 9px 12px; transition: var(--transition); outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(76,184,112,0.1);
}
.form-input::placeholder { color: var(--muted-dark); }
.form-select {
  cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23608A68' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 30px;
}
.form-textarea { resize: vertical; min-height: 90px; }
.form-hint { font-size: 0.7rem; color: var(--muted); margin-top: 4px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* ── Filters / Toolbar ────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.filter-select {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-soft);
  font-family: inherit; font-size: 0.78rem;
  padding: 6px 28px 6px 10px; cursor: pointer; outline: none;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%23608A68' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  transition: var(--transition);
}
.filter-select:hover, .filter-select:focus { border-color: var(--green); color: var(--text); }
.filter-select-sm { height: 28px; font-size: 0.72rem; padding-top: 3px; padding-bottom: 3px; }

.search-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 10px;
  height: 34px; flex: 1; max-width: 300px;
}
.search-bar input {
  flex: 1; border: none; background: none; color: var(--text);
  font-family: inherit; font-size: 0.78rem; outline: none;
}
.search-bar input::placeholder { color: var(--muted-dark); }

.ml-auto { margin-left: auto; }

/* ── Page Tabs ────────────────────────────────────────────── */
.page-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; border-bottom: none;
  color: var(--muted); background: none;
  transition: var(--transition); position: relative; bottom: -1px;
  white-space: nowrap;
}
.tab-btn i { margin-right: 0; }
.tab-btn:hover { color: var(--text); background: var(--card-hover); }
.tab-btn.active {
  color: var(--green-light); background: var(--card);
  border-color: var(--border); border-bottom-color: var(--card);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-btn .tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 6px; height: 16px;
  background: var(--green); border-radius: 10px;
  font-size: 0.62rem; line-height: 1; color: #fff; margin-left: 0;
}
.tab-btn .tab-badge-warn { background: var(--warning); }
.tab-btn .tab-badge-info { background: var(--info); }
.tab-btn .tab-badge-red  { background: var(--danger); }

/* ── Inline Tab Row (underline style, used inside cards) ──── */
.tab-row { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab-row .tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; font-size: 0.78rem; font-weight: 600;
  color: var(--muted); border: none; background: none;
  cursor: pointer; border-bottom: 2px solid transparent;
  border-radius: 0; bottom: 0;
  transition: var(--transition); margin-bottom: -1px;
  white-space: nowrap;
}
.tab-row .tab-btn.active { color: var(--green-light); border-bottom-color: var(--green-light); background: none; border-color: transparent; border-bottom-color: var(--green-light); }
.tab-row .tab-btn:hover  { color: var(--text); background: none; }

/* ── Period Toggle Buttons ────────────────────────────────── */
.period-btn-group { display: flex; gap: 2px; }
.period-btn {
  padding: 5px 13px; font-size: 0.78rem; font-weight: 600;
  background: var(--card); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; transition: var(--transition);
  border-radius: 0;
}
.period-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.period-btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.period-btn.active { background: var(--green-bg); border-color: var(--green); color: var(--green-light); }
.period-btn:hover:not(.active) { color: var(--text); border-color: var(--border-soft); }

/* ── Small Filter Buttons (map / inline) ─────────────────── */
.filter-btn-group { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-btn {
  padding: 4px 10px; font-size: 0.72rem; font-weight: 600;
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--muted); cursor: pointer;
  transition: var(--transition);
}
.filter-btn.active { background: var(--green-bg); border-color: var(--green); color: var(--green-light); }
.filter-btn:hover:not(.active) { border-color: var(--border-soft); color: var(--text-soft); }

/* ── Table Utilities ──────────────────────────────────────── */
.sort-th { cursor: pointer; user-select: none; }
.sort-th:hover { color: var(--green-light); }
.sort-th .sort-icon { margin-left: 4px; color: var(--muted-dark); font-size: 0.65rem; }
.sort-th .sort-icon::after { content: '⇅'; }
.sort-th.asc  .sort-icon::after { content: '▲'; }
.sort-th.desc .sort-icon::after { content: '▼'; }

/* ── Icon Action Buttons (table rows) ────────────────────── */
.action-btn {
  width: 28px; height: 28px;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; transition: var(--transition); flex-shrink: 0;
}
.action-btn:hover       { border-color: var(--green);    color: var(--green-light); background: var(--green-bg); }
.action-btn.edit:hover  { border-color: var(--gold-dark); color: var(--gold);       background: var(--gold-bg); }
.action-btn.del:hover   { border-color: var(--danger);   color: var(--danger);      background: var(--danger-bg); }
.action-btn.dl:hover    { border-color: var(--gold-dark); color: var(--gold);       background: var(--gold-bg); }
.action-btn.info:hover  { border-color: var(--info);     color: var(--info);        background: var(--info-bg); }

/* ── Toolbar row (filter + search + buttons) ─────────────── */
.toolbar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 16px;
}

/* ── Progress Bars ────────────────────────────────────────── */
.progress    { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress-sm { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-lg { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.progress-xs { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-fill {
  width: var(--w, 0%);
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-light));
  transition: width 0.6s ease;
}
.progress-fill.gold   { background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }
.progress-fill.warn   { background: linear-gradient(90deg, var(--warning), #FFD580); }
.progress-fill.danger { background: linear-gradient(90deg, var(--danger), #FF8080); }
.progress-fill.info   { background: linear-gradient(90deg, var(--info), #80E0F0); }

/* kpi-bar-fill color variants */
.kpi-bar-fill.gold   { background: linear-gradient(90deg, var(--gold-dark),  var(--gold-light)); }
.kpi-bar-fill.info   { background: linear-gradient(90deg, var(--info),       #80E8F8); }
.kpi-bar-fill.warn   { background: linear-gradient(90deg, var(--warning),    #FFD580); }
.kpi-bar-fill.danger { background: linear-gradient(90deg, var(--danger),     #FF8080); }
.kpi-bar-fill.purple { background: linear-gradient(90deg, var(--purple),     #C4A8FF); }

/* ── Card modifiers ───────────────────────────────────────── */
.card-flush { padding: 0 !important; }
.card-header-flush { padding: 16px 20px 0 !important; border-bottom: none !important; }
.card.danger-border  { border-color: rgba(230,57,70,0.3); }
.card.danger-border:hover { box-shadow: 0 0 16px rgba(230,57,70,0.15); }
.card.purple-border  { border-color: rgba(139,92,246,0.3); }

/* ── Button modifiers ─────────────────────────────────────── */
.btn-full { width: 100%; justify-content: center; }
.btn-tight { gap: 5px; }

/* ── Chart legend ─────────────────────────────────────────── */
.chart-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.chart-legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; }
.legend-dot  { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.legend-line { width: 10px; height: 2px;  border-radius: 1px; display: inline-block; flex-shrink: 0; }
.legend-dot.green  { background: var(--success); }
.legend-dot.gold   { background: var(--gold); }
.legend-dot.warn   { background: var(--warning); }
.legend-dot.danger { background: var(--danger); }
.legend-dot.info   { background: var(--info); }
.legend-line.green { background: var(--success); }
.legend-line.gold  { background: var(--gold); }

/* ── Stat label/value (summary rows) ─────────────────────── */
.stat-label-sm { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value-lg { font-size: 1rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }

/* ── Table cell helpers ───────────────────────────────────── */
.td-date { font-size: 0.75rem; color: var(--text-soft); }
.td-label { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.td-sub   { font-size: 0.7rem; color: var(--muted); margin-top: 1px; }
.td-actions { display: flex; gap: 4px; }

/* ── Inline date/search input ─────────────────────────────── */
.input-bare {
  background: none; border: none; color: var(--text);
  font-family: inherit; font-size: 0.78rem;
  outline: none; cursor: pointer; width: 100%;
}

/* ── Alert Box ────────────────────────────────────────────── */
.alert {
  display: flex; gap: 10px; padding: 12px 14px;
  border-radius: var(--radius-sm); border-left: 3px solid;
  margin-bottom: 12px;
}
.alert-green  { background: var(--success-bg); border-color: var(--success); }
.alert-warn   { background: var(--warning-bg); border-color: var(--warning); }
.alert-danger { background: var(--danger-bg);  border-color: var(--danger); }
.alert-info   { background: var(--info-bg);    border-color: var(--info); }
.alert-ico { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.alert-green .alert-ico  { color: var(--success); }
.alert-warn .alert-ico   { color: var(--warning); }
.alert-danger .alert-ico { color: var(--danger); }
.alert-info .alert-ico   { color: var(--info); }
.alert-body .alert-title { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.alert-body .alert-msg   { font-size: 0.77rem; color: var(--text-soft); margin-top: 2px; }

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  z-index: 200; align-items: center; justify-content: center;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); width: 580px; max-width: 95vw;
  box-shadow: 0 32px 64px rgba(0,0,0,0.6); overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  background: var(--card-alt);
}
.modal-title { font-size: 1rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.modal-title i { color: var(--green-light); }
.modal-close {
  width: 32px; height: 32px; background: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: var(--transition);
}
.modal-close:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.modal-body { padding: 24px; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 16px 24px; border-top: 1px solid var(--border);
  background: var(--card-alt);
}

/* ── Select Multi ─────────────────────────────────────────── */
.select-multi {
  width: 100%; background: var(--card-alt);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit; font-size: 0.84rem;
  padding: 8px; outline: none; min-height: 100px;
  transition: var(--transition);
}
.select-multi:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(76,184,112,0.1); }
.select-multi option { padding: 4px 8px; }

/* ── Stat Row ─────────────────────────────────────────────── */
.stat-row      { display: flex; gap: 20px; align-items: center; }
.stat-row-sep  { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.stat-item     { text-align: center; }
.stat-value { font-size: 1.4rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.stat-label { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }

/* ── Timeline ─────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 20px; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--green), transparent);
}
.tl-item { position: relative; margin-bottom: 16px; }
.tl-dot {
  position: absolute; left: -16px; top: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); border: 1.5px solid var(--bg);
}
.tl-dot.gold   { background: var(--gold); }
.tl-dot.warn   { background: var(--warning); }
.tl-dot.danger { background: var(--danger); }
.tl-title { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.tl-desc  { font-size: 0.75rem; color: var(--text-soft); margin-top: 2px; }
.tl-time  { font-size: 0.68rem; color: var(--muted); margin-top: 3px; }

/* ── Charts Container ─────────────────────────────────────── */
.chart-wrap { position: relative; width: 100%; }
.chart-wrap canvas { max-width: 100%; }

/* ── Map Container (placeholder) ─────────────────────────── */
.map-container {
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; position: relative;
}
.map-overlay {
  position: absolute; top: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 6px; z-index: 10;
}

/* ── Compliance Meter ─────────────────────────────────────── */
.compliance-ring {
  width: 80px; height: 80px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.compliance-ring-inner {
  position: absolute; inset: 6px;
  background: var(--card); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.compliance-pct   { font-size: 0.9rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.compliance-label { font-size: 0.55rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Section spacing ──────────────────────────────────────── */
.section { margin-bottom: 28px; }

/* Tab panel top-level title */
.page-section-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 20px;
  background: linear-gradient(90deg, var(--bg) 0%, var(--card-alt) 40%, var(--card-alt) 60%, var(--bg) 100%);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.page-section-title .ico { font-size: 0.9rem; }

/* Sub-section divider title */
.section-title {
  font-size: 0.8rem; font-weight: 700;
  color: var(--text); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.section-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ── Utilities ────────────────────────────────────────────── */
/* ── Flex utilities ───────────────────────────────────────── */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; }
.flex-center-gap4  { display: flex; align-items: center; gap: 4px; }
.flex-center-gap5  { display: flex; align-items: center; gap: 5px; }
.flex-center-gap6  { display: flex; align-items: center; gap: 6px; }
.flex-center-gap8  { display: flex; align-items: center; gap: 8px; }
.flex-center-gap10 { display: flex; align-items: center; gap: 10px; }
.flex-center-gap12 { display: flex; align-items: center; gap: 12px; }
.flex-baseline-gap4  { display: flex; align-items: baseline; gap: 4px; }
.flex-gap4        { display: flex; gap: 4px; }
.flex-gap4-center { display: flex; gap: 4px; justify-content: center; }
.flex-between     { display: flex; align-items: center; justify-content: space-between; }
.flex-col-gap16   { display: flex; flex-direction: column; gap: 16px; }
.items-center      { align-items: center; }
.items-start       { align-items: flex-start; }
.justify-between   { justify-content: space-between; }
.justify-center    { justify-content: center; }
.flex-1  { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.nowrap  { white-space: nowrap; }

/* ── Spacing ──────────────────────────────────────────────── */
.gap-4  { gap: 4px; }  .gap-5  { gap: 5px; }  .gap-6  { gap: 6px; }  .gap-8  { gap: 8px; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.mb-4  { margin-bottom: 4px; }  .mb-8   { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; } .mb-12  { margin-bottom: 12px; } .mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; } .mb-20  { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.mt-2  { margin-top: 2px; }     .mt-4   { margin-top: 4px; }    .mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }     .mt-10  { margin-top: 10px; }   .mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }    .mt-16  { margin-top: 16px; }   .mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.pt-12 { padding-top: 12px; }   .pt-14  { padding-top: 14px; }  .pt-16 { padding-top: 16px; }
.mr-2  { margin-right: 2px; }   .mr-3   { margin-right: 3px; }  .mr-4  { margin-right: 4px; }
.mr-5  { margin-right: 5px; }   .mr-6   { margin-right: 6px; }
.ml-4  { margin-left: 4px; }
.p-0   { padding: 0; }
.p-16  { padding: 16px; }
.card-header-pad { padding: 16px 20px 0; }
.border-b-0 { border-bottom: none; }
.border-t   { border-top: 1px solid var(--border); }
.cursor-pointer { cursor: pointer; }
.align-center { align-items: center; }

/* ── Grid utilities ───────────────────────────────────────── */
.grid-5   { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.grid-5-gap20 { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; }

/* ── Sizing ───────────────────────────────────────────────── */
.w-full { width: 100%; }

/* ── Text & Color utilities ───────────────────────────────── */
.text-right   { text-align: right; }
.text-center       { text-align: center; }
.text-center-block { display: block; text-align: center; }
/* ── Certification — missing dot-sq-10 variants ──────────── */
.dot-sq-10-info   { width: 10px; height: 10px; border-radius: 2px; background: var(--info);    flex-shrink: 0; display: inline-block; }
.dot-sq-10-purple { width: 10px; height: 10px; border-radius: 2px; background: var(--purple);  flex-shrink: 0; display: inline-block; }
/* ── Certification — cert score type tag ─────────────────── */
.cert-type-tag { font-size: 0.85rem; font-weight: 700; }
.cert-type-tag.warn   { color: var(--warning); }
.cert-type-tag.green  { color: var(--green-light); }
.cert-type-tag.info   { color: var(--success); }
/* ── Certification — risk-stat bordered variants ─────────── */
.risk-stat.stat-danger { border-color: var(--danger); background: var(--danger-bg); }
.risk-stat.stat-green  { border-color: var(--green); }
.risk-stat.stat-gold   { border-color: var(--gold-dark); background: var(--gold-bg); }
/* ── Certification — progress height variant ─────────────── */
.progress-md { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
/* ── Certification — GHG section ─────────────────────────── */
.ghg-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ghg-val { font-size: 0.8rem; font-weight: 600; }
.ghg-val.warn   { color: var(--warning); }
.ghg-val.danger { color: var(--danger); }
.ghg-val.info   { color: var(--info); }
.ghg-val.purple { color: var(--purple); }
.ghg-dot-sm { font-size: 0.5rem; margin-right: 4px; }
.section-micro-label { font-size: 0.72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
/* ── Certification — icon size ───────────────────────────── */
.icon-sm { font-size: 1rem; }
/* ── Certification — avatar gold variant ─────────────────── */
.avatar-sm.avatar-gold { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); }
/* ── Certification — prinsip table JS classes ────────────── */
.prinsip-name  { font-size: 0.84rem; font-weight: 600; color: var(--text); }
.prinsip-pct   { font-size: 0.72rem; font-family: 'JetBrains Mono', monospace; }
.prinsip-pct.terpenuhi { color: var(--success); }
.prinsip-pct.minor     { color: var(--warning); }
.prinsip-count { font-size: 0.84rem; font-weight: 700; color: var(--text); }
/* ── Certification — finding JS classes ──────────────────── */
.finding-actions { margin-left: auto; display: flex; gap: 6px; }
.finding-urgency.text-danger { color: var(--danger); }
.finding-urgency.text-warn   { color: var(--warning); }
.finding-urgency.text-muted  { color: var(--muted); }
/* ── Certification — CAPA/NCR lifecycle ──────────────────── */
.capa-lifecycle { display: flex; gap: 0; margin: 10px 0 6px; }
.capa-step { flex: 1; text-align: center; font-size: 0.62rem; padding: 5px 4px; border-top: 3px solid var(--border); color: var(--muted); position: relative; }
.capa-step.done    { border-top-color: var(--success); color: var(--success); }
.capa-step.active  { border-top-color: var(--gold);    color: var(--gold); font-weight: 700; }
.capa-step.pending { border-top-color: var(--border);  color: var(--muted); }
.capa-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; }
.capa-card:last-child { margin-bottom: 0; }
.capa-card.open   { border-left: 4px solid var(--danger); }
.capa-card.inprog { border-left: 4px solid var(--gold); }
.capa-card.closed { border-left: 4px solid var(--success); opacity: 0.75; }
.capa-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.capa-code { font-size: 0.72rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--gold); min-width: 60px; }
.capa-desc { font-size: 0.82rem; color: var(--text); flex: 1; line-height: 1.4; }
.capa-meta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.capa-meta-item { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--muted); }
/* ── Certification — GHG Calculator ─────────────────────── */
.ghg-calc-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.8rem; }
.ghg-calc-grid.hdr { font-size: 0.68rem; color: var(--muted); font-weight: 600; padding-bottom: 6px; }
.ghg-calc-grid:last-child { border-bottom: none; }
.ghg-calc-source { display: flex; align-items: center; gap: 8px; }
.ghg-calc-input { background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; color: var(--text); font-size: 0.8rem; width: 80px; text-align: right; }
.ghg-calc-input:focus { outline: none; border-color: var(--gold); }
.ghg-calc-total { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 2px solid var(--border); margin-top: 4px; font-weight: 700; }
/* ── Certification — ISPO criteria drill-down ────────────── */
.criteria-group { margin-bottom: 16px; }
.criteria-group-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--card-alt); border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border); margin-bottom: 6px; }
.criteria-group-hdr:hover { border-color: var(--green); }
.criteria-row { display: grid; grid-template-columns: 1fr 2fr 80px 100px 80px; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 0.78rem; align-items: center; }
.criteria-row.hdr { font-size: 0.68rem; color: var(--muted); font-weight: 600; background: var(--card-alt); padding-top: 6px; padding-bottom: 6px; }
.criteria-row:last-child { border-bottom: none; }
.criteria-id { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; color: var(--gold); }
.criteria-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.criteria-status-dot.ok   { background: var(--success); }
.criteria-status-dot.warn { background: var(--warning); }
.criteria-status-dot.na   { background: var(--border); }
.text-left    { text-align: left; }
.text-green       { color: var(--success) !important; }
.text-green-light { color: var(--green-light) !important; }
.text-warn    { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }
.text-info    { color: var(--info) !important; }
.text-gold    { color: var(--gold) !important; }
.text-muted   { color: var(--muted) !important; }
.text-soft    { color: var(--text-soft) !important; }
.text-purple    { color: var(--purple) !important; }
.text-gold-dark { color: var(--gold-dark) !important; }
.text-excel-green { color: #1D6F42 !important; }
.text-xs   { font-size: 0.7rem; }
.text-xxs  { font-size: 0.65rem; }
.text-tiny { font-size: 0.62rem; }
.text-60   { font-size: 0.6rem; }
.text-55   { font-size: 0.55rem; }
.text-50   { font-size: 0.5rem; }
.text-72   { font-size: 0.72rem; }
.text-nano { font-size: 0.4rem; }
.text-sm  { font-size: 0.8rem; }
.text-md  { font-size: 0.9rem; }
.text-lg  { font-size: 1.1rem; }
.text-xl  { font-size: 1.3rem; }
.fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; }
.mono { font-family: 'JetBrains Mono', monospace; }
/* Compound text utilities — font-size + color combos used frequently */
.text-meta    { font-size: 0.7rem;  color: var(--muted); }
.text-sub     { font-size: 0.65rem; color: var(--muted); }
.text-cap     { font-size: 0.68rem; color: var(--muted); }
.text-hint    { font-size: 0.75rem; color: var(--text-soft); }
.text-caption    { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.text-caption-sm { font-size: 0.7rem;  color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.text-muted-cap  { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; }
.text-label   { font-size: 0.72rem; color: var(--muted); }
.text-muted-sm { font-size: 0.75rem; color: var(--muted); }
.text-soft-xxs { font-size: 0.65rem; color: var(--text-soft); }
.text-soft-sm  { font-size: 0.78rem; color: var(--text-soft); }
.text-soft-72  { font-size: 0.72rem; color: var(--text-soft); font-weight: 600; }
.text-72-bold  { font-size: 0.72rem; font-weight: 600; }
/* Value display patterns */
.text-val    { font-size: 0.8rem;  font-weight: 600; color: var(--text); }
.text-val-sm { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.text-val-lg { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.text-val-info { font-size: 0.8rem; font-weight: 600; color: var(--info); }
.text-gold-sm  { font-size: 0.8rem;  color: var(--gold); }
.text-danger-lg { font-size: 1rem;  color: var(--danger); }
/* Mono value patterns */
.text-mono-sm     { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }
.text-mono-val    { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; color: var(--text); }
.text-mono-lg     { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 700; color: var(--text); }
.text-mono-sm-val { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 600; color: var(--text); }
.text-mono-md     { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem;  font-weight: 800; color: var(--text); }
.text-mono-xl     { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem;  font-weight: 800; color: var(--text); }
.text-val-green   { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--success); }
.text-base    { color: var(--text); }
.input-green  { accent-color: var(--green); }
.badge-xs     { font-size: 0.58rem; padding: 1px 6px; }
/* Flex layout helpers */
.flex-col-center-gap4 { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.flex-col-gap8   { display: flex; flex-direction: column; gap: 8px; }
.flex-col-gap6   { display: flex; flex-direction: column; gap: 6px; }
.flex-gap6-wrap  { display: flex; gap: 6px; flex-wrap: wrap; }
.flex-gap6       { display: flex; gap: 6px; }
.flex-gap8-mt8   { display: flex; gap: 8px; margin-top: 8px; }
.flex-between-mb4  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.flex-between-mb10 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.flex-grow-160   { flex: 1; min-width: 160px; }
.flex-col-right  { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.inline-soft-sm  { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--text-soft); }
.inline-soft-xs  { display: inline-flex; align-items: center; gap: 4px; color: var(--text-soft); }
.flex-center-gap5-xs  { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; }
.flex-center-gap8-sm  { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; }
.flex-center-gap6-mt8 { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
/* Table / list helpers */
.td-mono-right  { text-align: right; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.text-right-sub { text-align: right; color: var(--muted); font-size: 0.65rem; }
.list-row { display: flex; justify-content: space-between; font-size: 0.78rem; padding: 6px 0; border-bottom: 1px solid var(--border); }
.filter-chip { text-align: center; padding: 6px 14px; background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.info-row    { display: flex; align-items: center; gap: 8px; background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; }
/* Sizing */
.w-80  { width: 80px; }
.w-120 { width: 120px; }
.max-w-200 { max-width: 200px; }
.text-2xl  { font-size: 1.6rem; }
.text-hint-max { font-size: 0.75rem; color: var(--text-soft); max-width: 200px; }
.text-muted-md { font-size: 1rem; color: var(--muted); }
.text-muted-xs { font-size: 0.8rem; color: var(--muted); }
/* Dot indicators */
.dot-sq        { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.dot-sq-green  { width: 8px; height: 8px; border-radius: 2px; background: var(--success); flex-shrink: 0; display: inline-block; }
.dot-sq-gold   { width: 8px; height: 8px; border-radius: 2px; background: var(--gold);    flex-shrink: 0; display: inline-block; }
.dot-sq-info   { width: 8px; height: 8px; border-radius: 2px; background: var(--info);    flex-shrink: 0; display: inline-block; }
.dot-sq-warn   { width: 8px; height: 8px; border-radius: 2px; background: var(--warning); flex-shrink: 0; display: inline-block; }
.dot-sq-danger { width: 8px; height: 8px; border-radius: 2px; background: var(--danger);  flex-shrink: 0; display: inline-block; }
.dot-sq-purple { width: 8px; height: 8px; border-radius: 2px; background: var(--purple);  flex-shrink: 0; display: inline-block; }
.dot-sq-muted  { width: 8px; height: 8px; border-radius: 2px; background: var(--muted);   flex-shrink: 0; display: inline-block; }
.dot-sq-border { width: 8px; height: 8px; border-radius: 2px; background: var(--border);  flex-shrink: 0; display: inline-block; }
/* 10px & 12px dot variants */
.dot-sq-10-green  { width: 10px; height: 10px; border-radius: 2px; background: var(--success); flex-shrink: 0; display: inline-block; }
.dot-sq-10-gold   { width: 10px; height: 10px; border-radius: 2px; background: var(--gold);    flex-shrink: 0; display: inline-block; }
.dot-sq-10-warn   { width: 10px; height: 10px; border-radius: 2px; background: var(--warning); flex-shrink: 0; display: inline-block; }
.dot-sq-10-danger { width: 10px; height: 10px; border-radius: 2px; background: var(--danger);  flex-shrink: 0; display: inline-block; }
.dot-sq-12-green  { width: 12px; height: 12px; border-radius: 2px; background: var(--success); flex-shrink: 0; display: inline-block; }
.dot-sq-12-warn   { width: 12px; height: 12px; border-radius: 2px; background: var(--warning); flex-shrink: 0; display: inline-block; }
.dot-sq-12-danger { width: 12px; height: 12px; border-radius: 2px; background: var(--danger);  flex-shrink: 0; display: inline-block; }
.dot-sq-12-border { width: 12px; height: 12px; border-radius: 2px; background: var(--border);  flex-shrink: 0; display: inline-block; }
/* Dynamic-color dot: set --c via JS element.style.setProperty('--c', color) */
.dot-sq-dyn { width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--border)); flex-shrink: 0; display: inline-block; }
.dot-sq-10-dyn { width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--border)); flex-shrink: 0; display: inline-block; }
/* Heatmap avg column */
.hm-avg-col { background: var(--card-alt); }
.hm-avg-val { font-size: 0.78rem; }
/* PHT Block Map cells */
.pht-cell { width: 100%; aspect-ratio: 1; border-radius: 2px; cursor: pointer; transition: outline 0.15s; }
.pht-cell-ok     { background: var(--success);  opacity: 0.85; }
.pht-cell-warn   { background: var(--warning);  opacity: 0.85; }
.pht-cell-kritis { background: var(--danger);   opacity: 0.85; }
.pht-cell-none   { background: var(--border);   opacity: 0.30; }
/* Score circle badge (dynamic color via --c) */
.score-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--c, var(--green)) 13%, transparent);
  border: 1px solid var(--c, var(--green));
  color: var(--c, var(--green)); font-weight: 800; font-size: 0.75rem;
}
/* Miscellaneous */
.divider-v { width: 1px; height: 40px; margin: 0; background: var(--border); }
.ml-8 { margin-left: 8px; }
.btn-compact  { padding: 3px 6px; }
.pad-810      { padding: 8px 10px; }
.pad-16-20    { padding: 16px 20px; }
.filter-chip-sm { text-align: center; padding: 8px; background: var(--card-alt); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.avatar-xxs   { width: 24px; height: 24px; font-size: 0.65rem; }
.select-sm    { font-size: 0.78rem; padding: 6px 28px 6px 10px; }
.bg-info      { background: var(--info); }
.text-mono-info  { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--info); }
.text-soft-lg    { font-size: 0.82rem; color: var(--text-soft); }
.text-gold-lg    { font-size: 1.2rem; color: var(--gold); }
.flex-between-sm { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; }
.flex-center-gap6-sm { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; }
.flex-between-meta { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); margin-bottom: 4px; }
.list-row-sm { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; padding: 8px 0; border-bottom: 1px solid var(--border); }

/* ── Accent line / mini divider ───────────────────────────── */
.accent-bar-green { display: inline-block; width: 3px; border-radius: 1px; background: var(--green); }
.accent-bar-muted { display: inline-block; width: 3px; border-radius: 1px; background: var(--muted-dark); }

/* ── Misc ─────────────────────────────────────────────────── */
.divider  { height: 1px; background: var(--border); margin: 16px 0; }
.spacer   { flex: 1; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cursor-pointer { cursor: pointer; }
.accent-color-green { accent-color: var(--green); }

/* ── Estate & GIS Map Page ───────────────────────────────── */
.gold-top-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--green));
  z-index: 200;
}
.estate-map-zone { display: flex; flex-direction: column; gap: 20px; }

.map-page-layout {
  display: flex;
  height: calc(100vh - var(--hdr-h) - 48px);
  gap: 0; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; background: var(--card);
}

/* Map left controls panel */
.map-sidebar {
  width: 300px; flex-shrink: 0;
  background: var(--bg-alt); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
}
.map-sidebar-section { padding: 14px 14px 10px; border-bottom: 1px solid var(--border); }
.map-sidebar-section:last-child { border-bottom: none; }
.map-section-title {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.map-section-title i { font-size: 0.7rem; }

/* Layer toggle */
.layer-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; transition: var(--transition); }
.layer-item:hover .layer-label { color: var(--text); }
.layer-check {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; transition: var(--transition); font-size: 0.55rem;
}
.layer-check.checked         { border-color: currentColor; }
.layer-check.green-check  { background: var(--green-bg);  color: var(--success); border-color: var(--green); }
.layer-check.red-check    { background: var(--danger-bg); color: var(--danger);  border-color: rgba(230,57,70,0.4); }
.layer-check.blue-check   { background: var(--info-bg);   color: var(--info);    border-color: rgba(40,180,204,0.4); }
.layer-check.gold-check   { background: var(--gold-bg);   color: var(--gold);    border-color: var(--gold-dark); }
.layer-check.purple-check { background: var(--purple-bg); color: var(--purple);  border-color: rgba(139,92,246,0.4); }
.layer-label { font-size: 0.78rem; color: var(--text-soft); flex: 1; }
.layer-count { font-size: 0.65rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

/* Legend */
.legend-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.75rem; color: var(--text-soft); }
.legend-swatch {
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15);
}
.legend-swatch.normal { background: rgba(76,184,112,0.7);  border-color: #4CB870; }
.legend-swatch.panen  { background: rgba(40,180,204,0.7);  border-color: #28B4CC; }
.legend-swatch.pht    { background: rgba(230,57,70,0.7);   border-color: #E63946; }
.legend-swatch.sisip  { background: rgba(139,92,246,0.7);  border-color: #8B5CF6; }
.legend-swatch.hcv    { background: rgba(201,168,76,0.5);  border-color: var(--gold); }

/* Map filter */
.map-filter-row  { display: flex; flex-direction: column; gap: 7px; }
.map-filter-item { display: flex; flex-direction: column; gap: 4px; }
.map-filter-label { font-size: 0.66rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* Estate stats */
.estate-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.estate-stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.estate-stat .val { font-size: 0.95rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.estate-stat .lbl { font-size: 0.62rem; color: var(--muted); margin-top: 2px; }

/* Map canvas */
.map-canvas-area { flex: 1; position: relative; background: #051009; overflow: hidden; }
.map-grid-svg    { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.map-svg-main    { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }

/* Map controls overlay */
.map-controls { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 20; }
.map-ctrl-group {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.map-ctrl-btn {
  width: 34px; height: 34px;
  background: none; border: none; border-bottom: 1px solid var(--border);
  color: var(--text-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; transition: var(--transition);
}
.map-ctrl-btn:last-child { border-bottom: none; }
.map-ctrl-btn:hover  { background: var(--card-hover); color: var(--green-light); }
.map-ctrl-btn.active { background: var(--green-bg); color: var(--green-light); }

/* Map topbar & pills */
.map-topbar { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; z-index: 20; }
.map-info-pill {
  background: rgba(15,36,25,0.92); border: 1px solid var(--border);
  backdrop-filter: blur(8px); border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: 0.72rem; color: var(--text-soft);
  display: flex; align-items: center; gap: 6px;
}
.map-info-pill .dot    { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.map-info-pill strong  { color: var(--text); }

/* Scale bar */
.map-scale  { position: absolute; bottom: 16px; left: 16px; z-index: 20; display: flex; align-items: flex-end; gap: 6px; }
.scale-bar  { width: 80px; height: 4px; background: rgba(255,255,255,0.6); border-radius: 2px; position: relative; }
.scale-bar::before, .scale-bar::after {
  content: ''; position: absolute; top: -3px; width: 2px; height: 10px; background: rgba(255,255,255,0.6);
}
.scale-bar::before { left: 0; }
.scale-bar::after  { right: 0; }
.scale-label { font-size: 0.62rem; color: rgba(255,255,255,0.7); font-family: 'JetBrains Mono', monospace; }

/* Coordinates */
.map-coords {
  position: absolute; bottom: 16px; right: 12px; z-index: 20;
  font-size: 0.65rem; color: rgba(255,255,255,0.6); font-family: 'JetBrains Mono', monospace;
  background: rgba(8,22,16,0.8); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 10px;
}

/* Block popup */
.block-popup {
  position: absolute; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; min-width: 200px;
  box-shadow: var(--shadow-lg); z-index: 30; display: none; pointer-events: auto;
}
.block-popup.visible { display: block; }
.popup-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.popup-title { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.popup-close {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--card-alt); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; font-size: 0.6rem;
  display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.popup-close:hover { background: var(--danger-bg); color: var(--danger); border-color: rgba(230,57,70,0.3); }
.popup-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 0.75rem;
}
.popup-row .pk { color: var(--muted); }
.popup-row .pv { color: var(--text); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; }
.popup-actions { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; gap: 6px; }

/* SVG block styling */
.blok-rect { cursor: pointer; transition: opacity 0.15s ease, filter 0.15s ease; stroke-width: 1.5; }
.blok-rect:hover    { opacity: 0.85; filter: brightness(1.2); }
.blok-rect.normal   { fill: rgba(76,184,112,0.55);  stroke: #4CB870; }
.blok-rect.panen    { fill: rgba(40,180,204,0.55);  stroke: #28B4CC; }
.blok-rect.pht      { fill: rgba(230,57,70,0.55);   stroke: #E63946; animation: phtPulse 2s ease-in-out infinite; }
.blok-rect.pht:hover { animation: none; }
.blok-rect.sisip    { fill: rgba(139,92,246,0.55);  stroke: #8B5CF6; }
.blok-rect.hcv      { fill: rgba(201,168,76,0.25);  stroke: #C9A84C; stroke-dasharray: 4,3; }
.blok-rect.selected { filter: brightness(1.35) drop-shadow(0 0 8px currentColor); stroke-width: 2.5; }
.blok-label {
  font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700;
  fill: rgba(255,255,255,0.85); pointer-events: none; text-anchor: middle; dominant-baseline: middle;
}
@keyframes phtPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Map roads & water */
.road-main { fill: none; stroke: rgba(255,220,100,0.25); stroke-width: 4; stroke-linecap: round; }
.road-sec  { fill: none; stroke: rgba(200,200,200,0.15); stroke-width: 2; stroke-linecap: round; }
.water     { fill: rgba(40,130,204,0.3); stroke: rgba(40,180,204,0.5); stroke-width: 1; }
.hcv-area  { fill: rgba(201,168,76,0.12); stroke: rgba(201,168,76,0.4); stroke-width: 1.5; stroke-dasharray: 6,4; }

/* Bottom panel */
.map-bottom-panel { margin-top: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.map-bottom-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--card-alt);
}
.map-bottom-title { font-size: 0.85rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }

/* Sortable column */
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--text); }
.sortable i { font-size: 0.6rem; margin-left: 3px; color: var(--muted); }
.sortable.asc i, .sortable.desc i { color: var(--green-light); }

/* Status dot */
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.status-dot.green  { background: var(--success); box-shadow: 0 0 6px var(--success); }
.status-dot.warn   { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.status-dot.danger { background: var(--danger);  box-shadow: 0 0 6px var(--danger); }
.status-dot.info   { background: var(--info);    box-shadow: 0 0 6px var(--info); }
.status-dot.muted  { background: var(--muted); }

/* View toggle */
.map-view-toggle { display: flex; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle-btn {
  padding: 5px 10px; font-size: 0.7rem; font-weight: 600;
  background: none; border: none; color: var(--text-soft); cursor: pointer;
  transition: var(--transition); display: flex; align-items: center; gap: 4px;
}
.view-toggle-btn.active             { background: var(--green-bg); color: var(--green-light); }
.view-toggle-btn:hover:not(.active) { background: var(--card-hover); color: var(--text); }

/* Compass */
.map-compass {
  width: 34px; height: 34px; background: var(--card); border: 1px solid var(--border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.map-compass i { font-size: 1rem; color: var(--danger); }

/* Minimap */
.map-minimap {
  position: absolute; bottom: 44px; right: 12px;
  width: 110px; height: 80px;
  background: rgba(8,22,16,0.9); border: 1px solid var(--border);
  border-radius: var(--radius-sm); z-index: 20;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.minimap-svg      { width: 100%; height: 100%; opacity: 0.7; }
.minimap-viewport { stroke: var(--gold); stroke-width: 2; fill: rgba(201,168,76,0.15); }

/* ── Page-level Modifier Classes ─────────────────────────── */
/* Used to replace inline style overrides in HTML */
.main--no-pad          { padding-bottom: 0; }
.page-header--sm       { margin-bottom: 16px; }
.map-sidebar-section--push { margin-top: auto; }

/* Page title bar (Estate Map & similar full-width pages) */
.page-title-bar {
  font-size: 1.4rem; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.page-title-accent {
  display: inline-block; width: 3px; height: 20px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--green));
  flex-shrink: 0;
}
.page-subtitle { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
.page-subtitle i { margin-right: 4px; color: var(--green-light); }

/* Map layout height override (full viewport map) */
.map-layout-full { height: calc(100vh - 220px); min-height: 520px; }

/* ── Ranking cards & rank numbers ────────────────────────── */
.ranking-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--card-alt);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 5px; transition: var(--transition);
}
.ranking-card:hover { border-color: var(--border-soft); background: var(--card-hover); }
.rank-num {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; flex-shrink: 0;
}
.rank-num.gold   { background: var(--gold-bg);  color: var(--gold);  border: 1px solid var(--gold-dark); }
.rank-num.silver { background: rgba(160,191,166,0.15); color: #A0BFA6; border: 1px solid #3A5E42; }
.rank-num.bronze { background: rgba(139,94,42,0.15); color: var(--earth-light); border: 1px solid var(--earth); }
.rank-num.normal { background: var(--card); color: var(--muted); border: 1px solid var(--border); }
.rank-num.bottom { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(230,57,70,0.3); }
.rank-blok { flex: 1; }
.rank-blok-name { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.rank-blok-sub  { font-size: 0.68rem; color: var(--muted); }
.rank-val { font-size: 0.88rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.rank-bar { flex: 1; }

/* ── Export card grid ─────────────────────────────────────── */
.export-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.export-card {
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: var(--transition); cursor: pointer;
}
.export-card:hover { border-color: var(--green); transform: translateY(-2px); }
.export-card-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.export-card-name { font-size: 0.84rem; font-weight: 700; color: var(--text); }
.export-card-sub  { font-size: 0.7rem; color: var(--muted); line-height: 1.4; }
.export-btns { display: flex; gap: 4px; margin-top: auto; }
.export-btn {
  flex: 1; padding: 5px 8px; border-radius: var(--radius-sm);
  font-size: 0.68rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: var(--card);
  color: var(--muted); text-align: center; transition: var(--transition);
}
.export-btn:hover { border-color: var(--green); color: var(--green-light); }
.export-btn.gold:hover { border-color: var(--gold); color: var(--gold); }

/* ── Alert item list (dashboard / logistics / notification) ─ */
.alert-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.alert-item:last-child { border-bottom: none; padding-bottom: 0; }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.alert-dot.danger { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.alert-dot.warn   { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.alert-dot.info   { background: var(--info);    box-shadow: 0 0 6px var(--info); }
.alert-content { flex: 1; }
.alert-module  { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.alert-module.danger { color: var(--danger); }
.alert-module.warn   { color: var(--warning); }
.alert-module.info   { color: var(--info); }
.alert-text   { font-size: 0.78rem; color: var(--text-soft); line-height: 1.4; }
.alert-action { margin-top: 6px; }
.alert-time   { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }

/* ── Compliance Cards (dashboard / audit) ────────────────── */
.compliance-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  display: flex; align-items: center; gap: 16px;
  transition: var(--transition); position: relative; overflow: hidden;
}
.compliance-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.compliance-card.green-top::before { background: linear-gradient(90deg, transparent, var(--success), transparent); }
.compliance-card.gold-top::before  { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.compliance-card.info-top::before  { background: linear-gradient(90deg, transparent, var(--info), transparent); }
.compliance-card:hover { border-color: var(--border-soft); transform: translateY(-1px); box-shadow: var(--shadow); }
.compliance-info { flex: 1; }
.compliance-name { font-size: 0.82rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.compliance-desc { font-size: 0.72rem; color: var(--text-soft); }
.compliance-meta { margin-top: 8px; display: flex; align-items: center; gap: 8px; }

/* ── Period Pill hover ────────────────────────────────────── */
.period-pill:hover { border-color: var(--green); color: var(--text); }

/* ── SVG Ring Progress (compliance / cert rings) ──────────── */
.ring-holder { width: 72px; height: 72px; position: relative; flex-shrink: 0; }
.ring-holder.lg { width: 80px; height: 80px; }
.ring-holder svg { position: absolute; inset: 0; }
.ring-holder .ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; font-weight: 800; color: var(--text); line-height: 1;
}
.ring-holder.lg .ring-label { font-size: 0.9rem; }
.ring-holder .ring-label.sm { font-size: 0.75rem; }
.ring-holder .ring-label.xs { font-size: 0.7rem; }
.ring-holder .ring-label small { font-size: 0.5rem; color: var(--muted); margin-top: 1px; }
.ring-svg   { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--border); stroke-width: 6; }
.ring-fill  { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.ring-holder.lg .ring-track,
.ring-holder.lg .ring-fill  { stroke-width: 7; }
.ring-green { stroke: var(--success); }
.ring-gold  { stroke: var(--gold); }
.ring-info  { stroke: var(--info); }
.ring-warn  { stroke: var(--warning); }

/* ── Chart height utilities ───────────────────────────────── */
.chart-h-150 { height: 150px; }
.chart-h-160 { height: 160px; }
.chart-h-180 { height: 180px; }
.chart-h-200 { height: 200px; }
.chart-h-220 { height: 220px; }
.chart-h-240 { height: 240px; }
.chart-h-260 { height: 260px; }
.chart-h-280 { height: 280px; }
.chart-h-300 { height: 300px; }

/* ── Table grand total row ────────────────────────────────── */
.tbl-grand-total td {
  background: var(--card-alt) !important;
  border-top: 2px solid var(--border-soft) !important;
  font-weight: 700 !important; color: var(--text) !important;
}

/* ── Trend indicators ─────────────────────────────────────── */
.trend-up   { color: var(--success); font-size: 0.8rem; }
.trend-down { color: var(--danger);  font-size: 0.8rem; }
.trend-flat { color: var(--muted);   font-size: 0.8rem; }
.trend-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 4px;
}
.trend-badge.up   { background: var(--success-bg); color: var(--success); }
.trend-badge.down { background: var(--danger-bg);  color: var(--danger); }
.trend-badge.warn { background: var(--warning-bg); color: var(--warning); }

/* ── Rank badge ───────────────────────────────────────────── */
.rank-badge {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 800;
}
.rank-badge.rank-1 { background: linear-gradient(135deg, var(--gold-dark), var(--gold-light)); color: #000; }
.rank-badge.rank-2 { background: var(--border-soft); color: var(--text-soft); }
.rank-badge.rank-3 { background: rgba(139,94,42,0.3); color: var(--earth-light); }
.rank-badge.rank-n { background: transparent; color: var(--muted); border: 1px solid var(--border); }

/* ── Timeline icon dots (colored) ────────────────────────── */
.tl-icon {
  position: absolute; left: -20px; top: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.5rem; font-weight: 700;
}
.tl-icon.green  { background: var(--green-bg);   color: var(--success); border: 1px solid var(--green); }
.tl-icon.gold   { background: var(--gold-bg);    color: var(--gold);    border: 1px solid var(--gold-dark); }
.tl-icon.info   { background: var(--info-bg);    color: var(--info);    border: 1px solid rgba(40,180,204,0.4); }
.tl-icon.warn   { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(240,160,48,0.4); }
.tl-icon.danger { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(230,57,70,0.4); }

/* ── Top gold accent bar (page-level decoration) ─────────── */
.gold-top-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--green));
  z-index: 200;
}

/* ── Live pill indicator ──────────────────────────────────── */
.live-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(8,22,16,0.88); border: 1px solid var(--border);
  backdrop-filter: blur(6px); border-radius: var(--radius-sm);
  padding: 5px 11px; font-size: 0.7rem; color: var(--text-soft);
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 1; box-shadow: 0 0 4px var(--success); }
  50%      { opacity: 0.5; box-shadow: none; }
}

/* ── Calendar Grid (attendance / scheduling) ─────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 12px; }
.cal-header-cell {
  text-align: center; font-size: 0.65rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 0;
}
.cal-cell {
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 4px; text-align: center;
  cursor: pointer; transition: var(--transition); min-height: 52px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.cal-cell:hover { border-color: var(--green); }
.cal-cell.today { border-color: var(--gold); background: var(--gold-bg); }
.cal-cell.empty { opacity: 0; pointer-events: none; }
.cal-day { font-size: 0.72rem; font-weight: 700; color: var(--text); }
.cal-cell.today .cal-day { color: var(--gold); }
.cal-pct { font-size: 0.58rem; font-weight: 700; padding: 1px 4px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; }
.cal-pct.full, .cal-pct.high { background: var(--success-bg); color: var(--success); }
.cal-pct.med  { background: var(--warning-bg); color: var(--warning); }
.cal-pct.low  { background: var(--danger-bg);  color: var(--danger); }
.cal-pct.off  { background: var(--info-bg);    color: var(--info); }
.cal-pct.dim  { background: var(--border);     color: var(--muted); }

/* ── Checkin / activity list ──────────────────────────────── */
.checkin-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.checkin-item:last-child { border-bottom: none; }
.checkin-time { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 700; color: var(--gold); min-width: 55px; }
.checkin-info { flex: 1; }
.checkin-name { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.checkin-loc  { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }

/* ── GPS / location badge ─────────────────────────────────── */
.gps-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.65rem; padding: 2px 7px; border-radius: 10px;
  background: var(--success-bg); color: var(--success); border: 1px solid rgba(76,184,112,0.3);
}

/* ── Workflow steps (payroll / approval pipelines) ───────── */
.workflow-step { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.workflow-step:last-child { border-bottom: none; }
.step-ico {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex-shrink: 0;
}
.step-ico.done    { background: var(--success-bg); color: var(--success); border: 2px solid var(--success); }
.step-ico.pending { background: var(--gold-bg);    color: var(--gold);    border: 2px solid var(--gold); }
.step-ico.waiting { background: var(--border);     color: var(--muted);   border: 2px solid var(--border); }
.step-info { flex: 1; }
.step-name { font-size: 0.84rem; font-weight: 600; color: var(--text); }
.step-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

/* ── Mini stat card ───────────────────────────────────────── */
.mini-stat {
  text-align: center; padding: 16px;
  background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius);
}
.mini-stat-val   { font-size: 1.6rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.mini-stat-label { font-size: 0.7rem; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.mini-stat-sub   { font-size: 0.75rem; color: var(--text-soft); margin-top: 4px; }

/* ── Employee info (reusable across HRM / any people table) ─ */
.emp-info .emp-name { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.emp-info .emp-nik  { font-size: 0.68rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

/* ── Generic avatar sizes (extend .avatar-sm base) ───────── */
.avatar-md { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--gold-dark)); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.avatar-lg { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--gold-dark)); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.avatar-xl { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--gold-dark)); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; color: #fff; flex-shrink: 0; }

/* ── Heatmap table (performance/comparison grids) ────────── */
.heatmap-table { width: 100%; border-collapse: collapse; }
.heatmap-table th {
  background: var(--card-alt); color: var(--muted);
  font-weight: 600; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 8px 10px; text-align: center;
  border-bottom: 1px solid var(--border);
}
.heatmap-table td {
  padding: 8px 6px; border: 1px solid rgba(27,61,40,0.3);
  text-align: center; cursor: pointer;
  transition: var(--transition);
}
.heatmap-table td:hover { filter: brightness(1.2); }
.hm-cell {
  font-size: 0.75rem; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 6px 8px; border-radius: 4px;
  display: block;
}
.hm-above { background: rgba(76,184,112,0.2); color: var(--green-light); border: 1px solid rgba(76,184,112,0.2); }
.hm-near  { background: rgba(240,160,48,0.15); color: var(--warning); border: 1px solid rgba(240,160,48,0.2); }
.hm-below { background: rgba(230,57,70,0.15); color: var(--danger); border: 1px solid rgba(230,57,70,0.2); }
.hm-label { font-size: 0.72rem; color: var(--text-soft); font-weight: 600; text-align: left; padding: 8px 12px; }

/* ── Forecast badge & model chips ────────────────────────── */
.forecast-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--purple-bg); border: 1px solid rgba(139,92,246,0.3);
  color: var(--purple); border-radius: 20px;
  padding: 3px 10px; font-size: 0.7rem; font-weight: 600;
}
.forecast-model-info { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.model-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px;
  font-size: 0.7rem; color: var(--text-soft);
}
.model-chip i { color: var(--purple); font-size: 0.65rem; }

/* ── Estate rank card (similar to .ranking-card, wider padding) */
.estate-rank-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--card-alt);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; transition: var(--transition);
}
.estate-rank-card:hover { border-color: var(--border-soft); }
.estate-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.estate-info { flex: 1; }
.estate-info-name { font-size: 0.84rem; font-weight: 600; color: var(--text); }
.estate-info-sub  { font-size: 0.7rem; color: var(--muted); }
.estate-pct { font-size: 1rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.estate-bar { margin-top: 4px; }

/* ── Truck / fleet item (vehicle status list) ─────────────── */
.truck-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; background: var(--card-alt);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; transition: var(--transition);
}
.truck-item:last-child { margin-bottom: 0; }
.truck-item:hover { border-color: var(--border-soft); }
.truck-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.truck-info { flex: 1; min-width: 0; }
.truck-plate  { font-size: 0.85rem; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', monospace; }
.truck-driver { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
.truck-route  { font-size: 0.7rem; color: var(--text-soft); margin-top: 2px; display: flex; align-items: center; gap: 4px; }

/* ── Quick input row (clickable plate-based row) ──────────── */
.quick-input {
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; cursor: pointer; transition: var(--transition); margin-bottom: 8px;
}
.quick-input:hover { border-color: var(--green); background: var(--green-bg); }
.quick-input:last-child { margin-bottom: 0; }
.qi-plate { font-size: 0.85rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.qi-info  { font-size: 0.7rem; color: var(--muted); margin-top: 1px; }

/* ── Truck / vehicle tooltip popup ───────────────────────── */
.truck-popup {
  position: absolute; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  min-width: 190px; box-shadow: var(--shadow-lg);
  z-index: 30; display: none; pointer-events: none; font-size: 0.78rem;
}
.truck-popup.visible { display: block; }
.truck-popup-plate {
  font-size: 0.88rem; font-weight: 800; font-family: 'JetBrains Mono', monospace;
  color: var(--text); margin-bottom: 8px;
  border-bottom: 1px solid var(--border); padding-bottom: 7px;
}
.truck-popup-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0; color: var(--text-soft);
}
.truck-popup-row .pk { color: var(--muted); font-size: 0.72rem; }
.truck-popup-row .pv { color: var(--text); font-weight: 600; font-size: 0.72rem; font-family: 'JetBrains Mono', monospace; }

/* ── Summary stat cells (compact, centered) ──────────────── */
.summary-stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.summary-stat {
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 8px; text-align: center;
}
.summary-stat .val { font-size: 1.2rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.summary-stat .lbl { font-size: 0.62rem; color: var(--muted); margin-top: 2px; }

/* ── Scrollable table wrapper ─────────────────────────────── */
.table-scroll {
  max-height: 280px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}

/* ── Card-style alert item (bordered/background row) ─────── */
.alert-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; background: var(--card-alt);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; transition: var(--transition);
}
.alert-card:last-child { margin-bottom: 0; }
.alert-card:hover { border-color: var(--border-soft); }
.alert-text { font-size: 0.78rem; color: var(--text-soft); flex: 1; line-height: 1.4; }
.alert-text strong { color: var(--text); }

/* ── Assign warning-outline button ───────────────────────── */
.btn-assign {
  padding: 3px 9px; font-size: 0.68rem; font-weight: 700;
  background: var(--warning-bg); border: 1px solid rgba(240,160,48,0.4);
  border-radius: var(--radius-sm); color: var(--warning); cursor: pointer;
  transition: var(--transition);
}
.btn-assign:hover { background: var(--warning); color: #000; }

/* ── Data source / model chips (pill with icon) ───────────── */
.ds-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px;
  font-size: 0.7rem; color: var(--text-soft);
}
.ds-chip i { font-size: 0.65rem; color: var(--green-light); }

/* ── Warn badge pill ──────────────────────────────────────── */
.warn-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--warning-bg); border: 1px solid rgba(240,160,48,0.4);
  color: var(--warning); border-radius: 20px;
  padding: 4px 12px; font-size: 0.75rem; font-weight: 600;
}

/* ── Wizard / step indicator ──────────────────────────────── */
.wizard-steps { display: flex; flex-direction: column; gap: 10px; }
.wizard-step {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--card-alt);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.wizard-step.done   { border-color: var(--green); }
.wizard-step.active { border-color: var(--gold); background: var(--gold-bg); }
.wizard-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
  border: 2px solid var(--border); color: var(--muted);
}
.wizard-step.done   .wizard-step-num { background: var(--green); border-color: var(--green); color: #fff; }
.wizard-step.active .wizard-step-num { background: var(--gold);  border-color: var(--gold);  color: #000; }
.wizard-step-text  { flex: 1; }
.wizard-step-title { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.wizard-step-sub   { font-size: 0.7rem; color: var(--muted); margin-top: 1px; }

/* ── Risk stat row ────────────────────────────────────────── */
.risk-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--card-alt);
  border-radius: var(--radius-sm); margin-bottom: 6px;
  border: 1px solid var(--border);
}
.risk-stat-icon  { font-size: 0.9rem; }
.risk-stat-label { flex: 1; font-size: 0.78rem; color: var(--text-soft); }
.risk-stat-val   { font-size: 0.88rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }

/* ── Table row warning highlight ──────────────────────────── */
.tr-warn td { background: rgba(240,160,48,0.06) !important; }
.tr-warn    { border-left: 3px solid var(--warning); }

/* ── Data source chip container ───────────────────────────── */
.data-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ── Audit trail action badge ─────────────────────────────── */
.at-action {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
}
.at-action.create  { background: var(--success-bg); color: var(--success); }
.at-action.read    { background: var(--info-bg);    color: var(--info);    }
.at-action.update  { background: var(--warning-bg); color: var(--warning); }
.at-action.delete  { background: var(--danger-bg);  color: var(--danger);  }
.at-action.login   { background: var(--purple-bg);  color: var(--purple);  }
.at-action.export  { background: var(--gold-bg);    color: var(--gold);    }
.at-action.approve { background: var(--success-bg); color: var(--success); }
.at-action.upload  { background: var(--info-bg);    color: var(--info);    }

/* ── Audit trail resource monospace badge ─────────────────── */
.at-resource {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
  color: var(--text-soft); background: var(--card-alt);
  border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px;
}

/* ── IP address monospace ─────────────────────────────────── */
.ip-addr { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--muted); }

/* ── Risk score circle ────────────────────────────────────── */
.risk-score {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 0.82rem; font-weight: 800; font-family: 'JetBrains Mono', monospace;
}
.risk-score.high { background: var(--danger-bg);  color: var(--danger);  border: 2px solid var(--danger); }
.risk-score.med  { background: var(--warning-bg); color: var(--warning); border: 2px solid var(--warning); }
.risk-score.low  { background: var(--success-bg); color: var(--success); border: 2px solid var(--success); }

/* ── Audit finding badges ─────────────────────────────────── */
.finding-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.finding-major { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(230,57,70,0.3); }
.finding-minor { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(240,160,48,0.3); }
.finding-obs   { background: var(--info-bg);    color: var(--info);    border: 1px solid rgba(40,180,204,0.3); }

/* ── Val row (key-value detail row) ──────────────────────── */
.val-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.val-row:last-child { border-bottom: none; }
.val-row .lbl { color: var(--muted); }
.val-row .val { color: var(--text); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.val-row .val.gold  { color: var(--gold); }
.val-row .val.green { color: var(--success); }

/* ── Auditor report list item ─────────────────────────────── */
.auditor-report { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.auditor-report:last-child { border-bottom: none; }
.report-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }

/* ── PDF download button ──────────────────────────────────── */
.btn-pdf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-sm);
  background: var(--danger-bg); border: 1px solid rgba(230,57,70,0.3);
  color: var(--danger); font-size: 0.75rem; font-weight: 600;
  cursor: pointer; transition: var(--transition); text-decoration: none;
}
.btn-pdf:hover { background: var(--danger); color: #fff; }

/* ── Info / notice box ────────────────────────────────────── */
.info-box {
  background: var(--info-bg); border: 1px solid rgba(40,180,204,0.25);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 0.78rem; color: var(--text-soft);
}
.info-box i { color: var(--info); margin-right: 6px; }

/* ── Shift block (operations shift display) ───────────────── */
.shift-block {
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px;
}
.shift-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.shift-title  { font-size: 0.82rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.shift-row    { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; padding: 4px 0; border-bottom: 1px solid var(--border); }
.shift-row:last-child { border-bottom: none; }
.shift-row-label { color: var(--muted); }
.shift-row-val   { color: var(--text-soft); font-family: 'JetBrains Mono', monospace; font-weight: 600; }

/* ── Integration card (3rd-party platform link panel) ────── */
.integration-card {
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.integration-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.integration-logo {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--gold-bg); border: 1px solid var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--gold);
}
.integration-name { font-size: 0.92rem; font-weight: 700; color: var(--text); }
.integration-sub  { font-size: 0.72rem; color: var(--muted); }
.status-dot-row { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-soft); }

/* ── Finding card (audit/certification non-conformance) ───── */
.finding-card {
  background: var(--card-alt); border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm); padding: 12px 16px;
  margin-bottom: 8px; transition: var(--transition);
}
.finding-card:hover { border-color: var(--warning); background: var(--card-hover); }
.finding-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.finding-code { font-size: 0.72rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--gold); }
.finding-desc { font-size: 0.82rem; color: var(--text); margin-top: 3px; }
.finding-footer { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.finding-meta { font-size: 0.7rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.finding-meta i { font-size: 0.65rem; }

/* ── OER / KPI inline indicator badge ────────────────────── */
.oer-indicator {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.75rem; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  padding: 2px 8px; border-radius: 4px;
}
.oer-good { color: var(--success); background: var(--success-bg); border: 1px solid rgba(76,184,112,0.3); }
.oer-bad  { color: var(--danger);  background: var(--danger-bg);  border: 1px solid rgba(230,57,70,0.3); }

/* ── Compliance / status banner ───────────────────────────── */
.compliance-banner {
  background: linear-gradient(135deg, rgba(15,36,25,0.95), rgba(18,42,29,0.95));
  border: 1px solid var(--green); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.banner-status { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 280px; }
.banner-icon {
  width: 52px; height: 52px; background: var(--gold-bg); border: 2px solid var(--gold-dark);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--gold); flex-shrink: 0;
}
.banner-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.banner-sub   { font-size: 0.78rem; color: var(--text-soft); margin-top: 2px; }
.banner-progress { flex: 2; min-width: 200px; }
.banner-progress-track { height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; margin-bottom: 6px; }
.banner-progress-fill {
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  box-shadow: 0 0 10px rgba(201,168,76,0.4);
}
.banner-progress-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); }
.banner-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Traceability chain / step timeline ───────────────────── */
.trace-chain { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 16px 0; }
.trace-step { display: flex; flex-direction: column; align-items: center; min-width: 110px; gap: 8px; position: relative; flex-shrink: 0; }
.trace-step-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--card-alt); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--muted);
  transition: var(--transition); position: relative; z-index: 1;
}
.trace-step.active .trace-step-icon { background: var(--green-bg); border-color: var(--green-light); color: var(--green-light); box-shadow: var(--shadow-green); }
.trace-step.gold   .trace-step-icon { background: var(--gold-bg);  border-color: var(--gold); color: var(--gold); box-shadow: var(--gold-glow); }
.trace-step-label { font-size: 0.72rem; font-weight: 600; color: var(--text-soft); text-align: center; line-height: 1.3; }
.trace-step.active .trace-step-label { color: var(--green-light); }
.trace-step.gold   .trace-step-label { color: var(--gold); }
.trace-step-date { font-size: 0.62rem; color: var(--muted); text-align: center; }
.trace-step-dot { width: 8px; height: 8px; border-radius: 50%; margin: 0 auto; }
.trace-step-dot.green { background: var(--success); }
.trace-step-dot.gold  { background: var(--gold); }
.trace-step-dot.muted { background: var(--border-soft); }
.trace-connector { flex: 1; min-width: 24px; height: 2px; background: linear-gradient(90deg, var(--green), var(--gold-dark)); margin-top: -28px; flex-shrink: 0; position: relative; }
.trace-connector::after { content: ''; position: absolute; right: -6px; top: -4px; width: 0; height: 0; border-left: 7px solid var(--gold-dark); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* ── Farmer / person profile cards ───────────────────────── */
.farmer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.farmer-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; transition: var(--transition); }
.farmer-card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow); }
.farmer-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
.farmer-name { font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.farmer-id   { font-size: 0.7rem; color: var(--muted); margin-bottom: 10px; }
.farmer-stat { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-top: 1px solid var(--border); }
.farmer-stat-label { font-size: 0.72rem; color: var(--muted); }
.farmer-stat-val   { font-size: 0.8rem; font-weight: 600; color: var(--text); }

/* ── Tank meter (liquid level visual) ────────────────────── */
.tank-section { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.tank-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; align-items: center; gap: 20px; transition: var(--transition); }
.tank-card:hover { border-color: var(--border-soft); }
.tank-visual { width: 56px; height: 180px; border: 2px solid var(--border-soft); border-radius: 6px; background: var(--card-alt); position: relative; flex-shrink: 0; overflow: hidden; }
.tank-fill { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 0 0 4px 4px; transition: height 1s ease; height: var(--h, 0%); }
.tank-fill.gold { background: linear-gradient(0deg, var(--gold-dark), var(--gold), rgba(201,168,76,0.5)); }
.tank-fill.info { background: linear-gradient(0deg, #1A7A8A, var(--info), rgba(40,180,204,0.5)); }
.tank-level-line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.4); pointer-events: none; }
/* Tank bubble position variants (replaces inline left/animation-delay) */
.tank-bubble { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.6); animation: bubble 3s ease-in-out infinite; }
.tank-bubble.b1 { left: 30%; animation-delay: 0s; }
.tank-bubble.b2 { left: 55%; animation-delay: 1.2s; }
.tank-bubble.b3 { left: 70%; animation-delay: 0.6s; }
.tank-bubble.b4 { left: 25%; animation-delay: 0.4s; }
.tank-bubble.b5 { left: 60%; animation-delay: 1.5s; }
.tank-bubble.b6 { left: 80%; animation-delay: 0.9s; }
.tank-level-top { top: 1px; }
@keyframes bubble {
  0%   { bottom: 4%; opacity: 0.6; transform: translateX(0); }
  50%  { opacity: 1; transform: translateX(5px); }
  100% { bottom: 90%; opacity: 0; transform: translateX(2px); }
}
.tank-label { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 0.55rem; color: rgba(255,255,255,0.5); font-family: 'JetBrains Mono', monospace; text-align: center; white-space: nowrap; }
.tank-pct-badge { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: rgba(255,255,255,0.9); }
.tank-info { flex: 1; }
.tank-name { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tank-sub  { font-size: 0.75rem; color: var(--muted); margin-bottom: 12px; }
.tank-stat { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tank-stat-label { font-size: 0.72rem; color: var(--muted); }
.tank-stat-val   { font-size: 0.85rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.tank-progress { margin-top: 10px; }
.tank-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.6rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

/* ── Grade cards (quality grading) ───────────────────────── */
.grade-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
.grade-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; transition: var(--transition); position: relative; overflow: hidden; }
.grade-card:hover { border-color: var(--border-soft); transform: translateY(-2px); box-shadow: var(--shadow); }
.grade-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.grade-card.grade-a::before { background: linear-gradient(90deg, transparent, var(--success), transparent); }
.grade-card.grade-b::before { background: linear-gradient(90deg, transparent, var(--warning), transparent); }
.grade-letter { font-size: 2.5rem; font-weight: 900; font-family: 'JetBrains Mono', monospace; line-height: 1; margin-bottom: 8px; }
.grade-card.grade-a .grade-letter { color: var(--success); }
.grade-card.grade-b .grade-letter { color: var(--warning); }
.grade-stat { display: flex; justify-content: space-between; font-size: 0.72rem; margin-bottom: 3px; }
.grade-stat-label { color: var(--muted); }
.grade-stat-val   { color: var(--text-soft); font-family: 'JetBrains Mono', monospace; }
.grade-conf { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.grade-conf-pct   { font-size: 0.85rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.grade-conf-label { font-size: 0.62rem; color: var(--muted); }

/* ── Mill capacity ring ───────────────────────────────────── */
.capacity-ring { display: flex; flex-direction: column; align-items: center; padding: 16px; background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; }
.cap-title { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.cap-stat  { font-size: 1.6rem; font-weight: 900; font-family: 'JetBrains Mono', monospace; }
.cap-sub   { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }

/* ── QR code placeholder ──────────────────────────────────── */
.qr-placeholder { width: 140px; height: 140px; background: var(--card-alt); border: 2px solid var(--border-soft); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; }
.qr-placeholder:hover { border-color: var(--green); }
.qr-grid    { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; width: 100px; height: 100px; }
.qr-grid-sm { display: grid; grid-template-columns: repeat(6,1fr); gap: 3px; width: 80px; height: 80px; padding: 4px; }
.qr-cell    { border-radius: 1px; }
.qr-cell-on  { border-radius: 1px; background: var(--green); }
.qr-cell-off { border-radius: 1px; background: var(--muted-dark); }
.qr-corner { position: absolute; width: 28px; height: 28px; border: 3px solid var(--green-light); border-radius: 3px; }
.qr-corner.tl { top: 16px; left: 16px; } .qr-corner.tr { top: 16px; right: 16px; } .qr-corner.bl { bottom: 16px; left: 16px; }
.qr-corner.tl::after, .qr-corner.tr::after, .qr-corner.bl::after { content: ''; position: absolute; inset: 4px; background: var(--green); border-radius: 1px; }

/* ── Armada / fleet map ───────────────────────────────────── */
.armada-map-container { background: #051209; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; position: relative; height: 520px; }
.armada-map-svg { width: 100%; height: 100%; }
.armada-summary-panel { display: flex; flex-direction: column; gap: 14px; height: 100%; }

/* ── SVG map elements ─────────────────────────────────────── */
.truck-marker { cursor: pointer; transition: transform 0.3s ease; }
.truck-marker:hover { transform-origin: center; filter: brightness(1.3) drop-shadow(0 0 6px currentColor); }
.truck-moving { fill: #4CB870; } .truck-at-tph { fill: #F0A030; } .truck-at-pks { fill: #28B4CC; } .truck-idle { fill: #608A68; }
.route-line   { fill: none; stroke-width: 1.5; stroke-dasharray: 6,4; opacity: 0.55; }
.route-moving { stroke: #4CB870; } .route-pks { stroke: #28B4CC; }
.map-road-main { fill: none; stroke: rgba(255,220,100,0.2); stroke-width: 5; stroke-linecap: round; }
.map-road-sec  { fill: none; stroke: rgba(200,200,200,0.12); stroke-width: 2.5; stroke-linecap: round; }
.map-block { fill: rgba(76,184,112,0.18); stroke: rgba(76,184,112,0.45); stroke-width: 1; cursor: default; }
.map-block-label { font-family: 'Inter', sans-serif; font-size: 7px; font-weight: 700; fill: rgba(255,255,255,0.5); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.pks-star { fill: #C9A84C; font-size: 14px; }
@keyframes truckMove { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.truck-moving-anim { animation: truckMove 2s ease-in-out infinite; }

/* ── Certification cards (ISPO/RSPO/EUDR) ────────────────── */
.cert-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 24px; }
.cert-card { background: var(--card); border-radius: var(--radius); padding: 22px; position: relative; overflow: hidden; transition: var(--transition); }
.cert-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.cert-card.ispo    { border: 1px solid var(--green); }
.cert-card.ispo::before { background: linear-gradient(90deg, transparent, var(--green-light), transparent); }
.cert-card.ispo:hover   { box-shadow: var(--shadow-green); }
.cert-card.rspo    { border: 1px solid var(--gold-dark); }
.cert-card.rspo::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.cert-card.rspo:hover   { box-shadow: var(--shadow-gold); }
.cert-card.eudr-c  { border: 1px solid rgba(40,180,204,0.5); }
.cert-card.eudr-c::before { background: linear-gradient(90deg, transparent, var(--info), transparent); }
.cert-card.eudr-c:hover   { box-shadow: 0 0 24px rgba(40,180,204,0.15); }
.cert-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.cert-badge-icon { width: 52px; height: 52px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.cert-badge-icon.green { background: var(--green-bg); border: 1px solid var(--green); color: var(--green-light); }
.cert-badge-icon.gold  { background: var(--gold-bg);  border: 1px solid var(--gold-dark); color: var(--gold); }
.cert-badge-icon.info  { background: var(--info-bg);  border: 1px solid rgba(40,180,204,0.3); color: var(--info); }
.cert-name       { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.cert-status-text{ font-size: 0.75rem; font-weight: 600; margin-top: 3px; }
.cert-no         { font-size: 0.7rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.cert-score-row  { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.cert-score      { font-size: 1.8rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.cert-score-label{ font-size: 0.7rem; color: var(--muted); }
.cert-meta       { display: flex; flex-direction: column; gap: 4px; }
.cert-meta-row   { display: flex; align-items: center; justify-content: space-between; }
.cert-meta-label { font-size: 0.72rem; color: var(--muted); }
.cert-meta-val   { font-size: 0.78rem; font-weight: 600; color: var(--text-soft); }

/* ── Prinsip / criteria table ─────────────────────────────── */
.prinsip-table { width: 100%; border-collapse: collapse; }
.prinsip-row td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.prinsip-row:hover td { background: var(--card-hover); }
.prinsip-row:last-child td { border-bottom: none; }
.prinsip-code { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 800; flex-shrink: 0; }
.prinsip-code.terpenuhi { background: var(--green-bg);   color: var(--green-light); border: 1px solid var(--green); }
.prinsip-code.minor     { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(240,160,48,0.3); }
.prinsip-progress { display: flex; align-items: center; gap: 8px; }
.prinsip-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.prinsip-bar-fill { height: 100%; border-radius: 3px; transition: width 0.8s ease; }
.prinsip-bar-fill.terpenuhi { background: linear-gradient(90deg, var(--green), var(--green-light)); }
.prinsip-bar-fill.minor     { background: linear-gradient(90deg, var(--warning), #FFD580); }

/* ── Cost analysis card ───────────────────────────────────── */
.cost-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: var(--transition); position: relative; overflow: hidden; }
.cost-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.cost-card.warn-top::before  { background: linear-gradient(90deg, transparent, var(--warning), transparent); }
.cost-card.green-top::before { background: linear-gradient(90deg, transparent, var(--success), transparent); }
.cost-card:hover { border-color: var(--border-soft); transform: translateY(-2px); box-shadow: var(--shadow); }
.cost-vs { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.cost-val-main { font-size: 1.6rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.cost-unit     { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.cost-diff     { text-align: right; }
.cost-diff .label { font-size: 0.68rem; color: var(--muted); }
.cost-diff .val   { font-size: 0.9rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.cost-diff .val.warn  { color: var(--warning); }
.cost-diff .val.green { color: var(--success); }

/* ── PSAK hero value display ──────────────────────────────── */
.psak-big-val     { text-align: center; padding: 20px 0 12px; }
.psak-big-val .num{ font-size: 2.2rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--gold); }
.psak-big-val .lbl{ font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Approval action bar ──────────────────────────────────── */
.approval-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--gold-bg); border: 1px solid var(--gold-dark); border-radius: var(--radius); margin-top: 16px; }
.approval-info { font-size: 0.82rem; }
.approval-info .title { font-weight: 700; color: var(--gold); margin-bottom: 2px; }
.approval-info .sub   { color: var(--text-soft); font-size: 0.75rem; }
.approval-btns { display: flex; gap: 8px; }

/* ── Mandor / field supervisor item ──────────────────────── */
.mandor-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.mandor-item:last-child { border-bottom: none; padding-bottom: 0; }
.mandor-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.mandor-info   { flex: 1; min-width: 0; }
.mandor-name   { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.mandor-meta   { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
.mandor-stats  { text-align: right; }
.mandor-bjr    { font-size: 0.95rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.mandor-spb    { font-size: 0.68rem; color: var(--muted); margin-top: 1px; }
.mandor-rank   { font-size: 0.65rem; margin-top: 3px; }

/* ── Harvest BJR bar & target line ───────────────────────── */
.bjr-target-legend { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.kpi-progress-wrap { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tab-row-inset     { margin-bottom: 0 !important; border: none !important; }
.bjr-bar       { margin-top: 6px; }
.bjr-bar-track { height: 3px; background: var(--border); border-radius: 2px; }
.bjr-bar-fill  { height: 100%; border-radius: 2px; transition: width 0.6s ease; }
.bjr-target-line { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--gold); pointer-events: none; }

/* ── Compliance overview card (audit) ────────────────────── */
.compliance-overview {
  background: var(--card); border: 1px solid var(--gold-dark);
  border-radius: var(--radius-lg); padding: 24px;
  position: relative; overflow: hidden; margin-bottom: 24px;
  box-shadow: var(--shadow-gold);
}
.compliance-overview::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--green));
}
.compliance-overview-title {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gold); margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}

/* ── Certification ring wrap card ─────────────────────────── */
.cert-ring-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 16px 20px;
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius); transition: var(--transition); cursor: default;
}
.cert-ring-wrap:hover            { border-color: var(--border-soft); transform: translateY(-2px); box-shadow: var(--shadow); }
.cert-ring-wrap.gold-ring:hover  { border-color: var(--gold-dark); box-shadow: var(--shadow-gold); }
.cert-ring-wrap.green-ring:hover { border-color: var(--green); box-shadow: var(--shadow-green); }
.cert-name  { font-size: 0.85rem; font-weight: 700; color: var(--text); text-align: center; }
.cert-score { font-size: 1.1rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; text-align: center; }
.cert-score.gold  { color: var(--gold); }
.cert-score.green { color: var(--success); }
.cert-score.info  { color: var(--info); }
.cert-score.warn  { color: var(--warning); }
.cert-meta  { font-size: 0.65rem; color: var(--muted); text-align: center; }
.cert-next  { font-size: 0.65rem; color: var(--text-soft); text-align: center; margin-top: 4px; }

/* ── Compliance summary bar ───────────────────────────────── */
.cert-summary      { display: flex; gap: 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.cert-summary-item { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; }

/* ── Valuation hero display ───────────────────────────────── */
.val-highlight { text-align: center; padding: 20px; background: linear-gradient(135deg, var(--card-alt), var(--card)); border-radius: var(--radius); border: 1px solid var(--gold-dark); margin-bottom: 16px; }
.val-highlight .lbl { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.val-highlight .num { font-size: 2.4rem; font-weight: 800; font-family: 'JetBrains Mono'; color: var(--gold); line-height: 1.1; margin-top: 6px; }
.val-highlight .sub { font-size: 0.72rem; color: var(--text-soft); margin-top: 4px; }

/* ── Auditor access card ──────────────────────────────────── */
.auditor-access-card { background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.auditor-logo { width: 48px; height: 48px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--gold-dark), var(--gold)); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }

/* ── Dashboard chart summary ──────────────────────────────── */
.kpi-bar-fill.gold-bar { background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }
.chart-summary { display: flex; gap: 20px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.cs-item { text-align: center; flex: 1; }
.cs-val  { font-size: 1rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.cs-lbl  { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }

/* ── Additional Chart Heights ─────────────────────────────── */
.chart-150 { height: 150px; }
.chart-160 { height: 160px; }

/* ── Additional Grid ──────────────────────────────────────── */
.grid-20-gap4 { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; }

/* ── info-row color variants ──────────────────────────────── */
.info-row.gold   { background: rgba(201,168,76,0.08);  border-color: rgba(201,168,76,0.3); }
.info-row.purple { background: rgba(100,80,200,0.07);  border-color: rgba(100,80,200,0.25); }
.info-row.danger { background: var(--danger-bg);        border-color: rgba(230,57,70,0.3); }

/* ── Step Dot (circle number badge, agronomi wizard) ─────── */
.step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
}
.step-dot.active   { background: var(--gold);   color: #0a1a0f; }
.step-dot.inactive { background: var(--border);  color: var(--muted); }

/* ── SPH / Range Badges (heatmap legend) ──────────────────── */
.sph-badge-excellent { background: rgba(76,184,112,0.25); color: var(--success);    padding: 2px 8px; border-radius: 3px; font-weight: 600; font-size: 0.8rem; }
.sph-badge-normal    { background: rgba(76,184,112,0.12); color: var(--green-light);padding: 2px 8px; border-radius: 3px; font-weight: 600; font-size: 0.8rem; }
.sph-badge-rendah    { background: rgba(240,160,48,0.15);  color: var(--warning);   padding: 2px 8px; border-radius: 3px; font-weight: 600; font-size: 0.8rem; }
.sph-badge-kritis    { background: rgba(230,57,70,0.15);   color: var(--danger);    padding: 2px 8px; border-radius: 3px; font-weight: 600; font-size: 0.8rem; }

/* ── btn-xs-table: compact action button in table cells ────── */
.btn-xs-table { padding: 2px 8px; font-size: 0.7rem; }

/* ── Additional Flex Utilities ────────────────────────────── */
.flex-gap8   { display: flex; gap: 8px; }
.flex-gap10  { display: flex; gap: 10px; }
.flex-gap12  { display: flex; gap: 12px; }
.flex-gap16  { display: flex; gap: 16px; }
.flex-gap20  { display: flex; gap: 20px; }
.flex-col-gap0  { display: flex; flex-direction: column; gap: 0; }
.flex-col-gap10 { display: flex; flex-direction: column; gap: 10px; }
.flex-col-gap12 { display: flex; flex-direction: column; gap: 12px; }
.flex-col-center { display: flex; flex-direction: column; align-items: center; }
.flex-center-gap16 { display: flex; align-items: center; gap: 16px; }
.flex-center-gap20 { display: flex; align-items: center; gap: 20px; }
.flex-start-gap10  { display: flex; align-items: flex-start; gap: 10px; }
.flex-start-gap12  { display: flex; align-items: flex-start; gap: 12px; }
.flex-end-col-gap8 { margin-left: auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.flex-shrink-0 { flex-shrink: 0; }

/* ── Additional Spacing ───────────────────────────────────── */
.pb-8  { padding-bottom: 8px; }
.pb-10 { padding-bottom: 10px; }
.gap-3 { gap: 3px; }
.gap-2 { gap: 2px; }

/* ── Additional Grid Utilities ────────────────────────────── */
.grid-6        { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.grid-7        { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.grid-10       { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.grid-3-gap10  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-7-gap6   { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.grid-10-gap3  { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }

/* ── Chart Height Utilities ───────────────────────────────── */
.chart-180 { height: 180px; }
.chart-200 { height: 200px; }
.chart-220 { height: 220px; }

/* ── Additional Text Utilities ────────────────────────────── */
.text-78  { font-size: 0.78rem; }
.text-85  { font-size: 0.85rem; }
.fw-500   { font-weight: 500; }

/* ── Badge Number (inline counter in button/header) ──────── */
.badge-num {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--danger); color: #fff;
  border-radius: 20px; padding: 1px 6px;
  font-size: 0.65rem; font-weight: 700; margin-left: 4px;
}

/* ── IoT Dashboard — Sensor Node Grid ────────────────────── */
.sensor-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.sensor-node {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1.5px solid transparent;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.55rem; font-weight: 600;
  transition: 0.15s ease; position: relative;
}
.sensor-node:hover { transform: scale(1.08); z-index: 2; }
.sensor-node.sn-online  { background: rgba(76,184,112,0.18);  border-color: var(--success);  color: var(--success); }
.sensor-node.sn-warn    { background: rgba(240,160,48,0.18);   border-color: var(--warning);  color: var(--warning); }
.sensor-node.sn-offline { background: rgba(230,57,70,0.15);    border-color: var(--danger);   color: var(--danger); }
.sensor-node.sn-idle    { background: rgba(27,61,40,0.4);      border-color: var(--border);   color: var(--muted); }
.sn-label { font-size: 0.5rem; color: inherit; opacity: 0.8; margin-top: 1px; }

/* ── IoT Dashboard — LoRaWAN ──────────────────────────────── */
.lora-node-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.lora-node-row:last-child { border-bottom: none; }
.lora-signal-bar { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.lora-bar { width: 4px; border-radius: 1px; background: var(--border-soft); }
.lora-bar.active { background: var(--green-light); }
.lora-bar:nth-child(1) { height: 4px; }
.lora-bar:nth-child(2) { height: 7px; }
.lora-bar:nth-child(3) { height: 11px; }
.lora-bar:nth-child(4) { height: 16px; }
.gw-icon {
  width: 32px; height: 32px;
  background: var(--green-bg); border: 1px solid var(--green);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: var(--green-light); font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}

/* ── IoT Dashboard — Weather ──────────────────────────────── */
.weather-big {
  display: flex; align-items: center; gap: 20px;
  padding: 20px; background: var(--card-alt);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.weather-icon-big { font-size: 3.5rem; line-height: 1; flex-shrink: 0; }
.weather-temp-big { font-size: 3rem; font-weight: 800; color: var(--gold-light); line-height: 1; }
.weather-info-col { display: flex; flex-direction: column; gap: 6px; margin-left: auto; }
.weather-info-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-soft); }

.bmkg-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 16px; }
.bmkg-day {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 8px;
  text-align: center; transition: var(--transition);
}
.bmkg-day:hover { border-color: var(--green); background: var(--card-hover); }
.bmkg-day.today { border-color: var(--gold); background: var(--gold-bg); }
.bmkg-icon { font-size: 1.6rem; margin-bottom: 4px; }
.bmkg-temp { font-size: 0.8rem; font-weight: 700; color: var(--text); }
.bmkg-rain { font-size: 0.7rem; color: var(--info); margin-top: 2px; }

/* ── IoT Dashboard — Alert Pill ───────────────────────────── */
.alert-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 600;
}
.alert-pill.critical { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(230,57,70,0.3); }
.alert-pill.warn     { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(240,160,48,0.3); }
.alert-pill.info     { background: var(--info-bg);    color: var(--info);    border: 1px solid rgba(40,180,204,0.3); }

/* ── IoT Dashboard — Pulse dot (live indicator) ───────────── */
.pulse-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--success);
  animation: pulse-anim 2s infinite;
}
@keyframes pulse-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* ── IoT Dashboard — Sensor Gauge ────────────────────────── */
.sensor-gauge-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.sensor-gauge {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.gauge-ring {
  width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(var(--gauge-color, var(--green)) var(--gauge-pct, 70%), var(--card-alt) 0);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.gauge-ring::after {
  content: ''; width: 72px; height: 72px;
  background: var(--card); border-radius: 50%; position: absolute;
}
.gauge-val  { position: relative; z-index: 1; font-size: 1.1rem; font-weight: 800; color: var(--text); }
.gauge-unit { font-size: 0.6rem; color: var(--muted); margin-top: -4px; }
.gauge-label { text-align: center; font-size: 0.72rem; color: var(--text-soft); margin-top: 8px; }

/* ── IoT Dashboard — AI Banner ────────────────────────────── */
.ai-banner {
  background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(40,180,204,0.1));
  border: 1px solid rgba(139,92,246,0.3); border-radius: var(--radius-lg);
  padding: 20px 24px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 20px;
}
.ai-banner-icon {
  width: 52px; height: 52px; background: var(--purple-bg);
  border: 1px solid var(--purple); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.ai-banner-body { flex: 1; }
.ai-banner-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.ai-banner-stat { margin-left: auto; text-align: right; flex-shrink: 0; }
.ai-banner-stat .ai-acc { font-size: 1.6rem; font-weight: 800; color: var(--purple); font-family: 'JetBrains Mono', monospace; }

/* ── IoT Dashboard — Stat Mini (inside card grid) ────────── */
.stat-mini {
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px;
}
.stat-mini-center {
  background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px; text-align: center;
}
.stat-mini-label  { font-size: 0.65rem; color: var(--muted); margin-bottom: 4px; }
.stat-mini-val    { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.stat-mini-sub    { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }

/* ── IoT Dashboard — VRA / Zone ──────────────────────────── */
.zone-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-soft); }
.zone-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.zone-dot.danger  { background: var(--danger); }
.zone-dot.warn    { background: var(--warning); }
.zone-dot.success { background: var(--success); }
.zone-dot.info    { background: var(--info); }
.zone-cell {
  aspect-ratio: 1; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; cursor: pointer; transition: 0.15s;
}
.zone-cell:hover { filter: brightness(1.3); transform: scale(1.06); z-index: 2; }
.zone-cell.z-danger  { background: rgba(230,57,70,0.13);  border: 1px solid rgba(230,57,70,0.4);  color: var(--danger); }
.zone-cell.z-warn    { background: rgba(240,160,48,0.13);  border: 1px solid rgba(240,160,48,0.4);  color: var(--warning); }
.zone-cell.z-success { background: rgba(76,184,112,0.13);  border: 1px solid rgba(76,184,112,0.4);  color: var(--success); }
.zone-cell.z-info    { background: rgba(40,180,204,0.13);  border: 1px solid rgba(40,180,204,0.4);  color: var(--info); }

/* ── IoT Dashboard — Recommendation Card ─────────────────── */
.rec-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; transition: var(--transition);
}
.rec-card:hover { border-color: var(--border-soft); background: var(--card-hover); }
.rec-card.urgent { border-color: var(--danger); }
.rec-card.warn   { border-color: var(--warning); }
.rec-card-row { display: flex; align-items: center; gap: 12px; }
.rec-card-info { display: flex; gap: 16px; margin-top: 4px; }
.rec-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

/* ── IoT Dashboard — Spraying Window ─────────────────────── */
.spray-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; }
.spray-day  { border-radius: var(--radius-sm); padding: 8px; text-align: center; }
.spray-day.ok     { background: var(--success-bg); border: 1px solid var(--success); }
.spray-day.danger { background: var(--danger-bg);  border: 1px solid var(--danger); }
.spray-day.warn   { background: var(--warning-bg); border: 1px solid rgba(240,160,48,0.3); }
.spray-day-dow  { font-size: 0.65rem; color: var(--muted); }
.spray-day-date { font-size: 0.7rem; color: var(--text); }
.spray-day-ico  { font-size: 1rem; margin: 4px 0; }
.spray-day-lbl  { font-size: 0.6rem; }
.spray-day.ok .spray-day-lbl     { color: var(--success); }
.spray-day.danger .spray-day-lbl { color: var(--danger); }
.spray-day.warn .spray-day-lbl   { color: var(--warning); }

/* ── IoT Dashboard — Phenology Timeline ──────────────────── */
.pheno-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pheno-row:last-child { border-bottom: none; padding-bottom: 0; }
.pheno-connector { display: flex; flex-direction: column; align-items: center; }
.pheno-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--success); background: var(--bg); flex-shrink: 0; }
.pheno-dot.gold { border-color: var(--gold); }
.pheno-dot.info { border-color: var(--info); }
.pheno-dot.warn { border-color: var(--warning); }
.pheno-line { width: 2px; background: var(--border); flex: 1; min-height: 20px; }
.pheno-body { flex: 1; padding-bottom: 8px; }
.pheno-row:last-child .pheno-body { padding-bottom: 0; }
.pheno-header { display: flex; justify-content: space-between; margin-bottom: 4px; }

/* ── IoT Dashboard — Warning Box ─────────────────────────── */
.warn-box {
  background: var(--warning-bg);
  border: 1px solid rgba(240,160,48,0.3);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.warn-box-row { display: flex; gap: 10px; align-items: flex-start; }

/* ── IoT Dashboard — Progress bar with fixed track width ──── */
.kpi-bar-track-w40 { width: 40px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.kpi-bar-track-w60 { width: 60px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.kpi-bar-track-w180 { width: 180px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }

/* ── Mill — Misc inline style fixes ─────────────────────── */
.tank-fill-label { color: var(--gold); font-weight: 700; font-size: 0.82rem; }
.tank-fill-label.info { color: var(--info); }
.process-param-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; padding: 8px 0; }
.oer-chart-stat { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.oer-chart-stat-item { text-align: center; flex: 1; }
.oer-stat-val { font-size: 1rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.breakdown-legend { display: flex; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; }
/* ── Mill — Predictive Maintenance ──────────────────────── */
.equip-health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.equip-card { background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; position: relative; overflow: hidden; }
.equip-card.eq-warn   { border-color: rgba(240,160,48,0.4); }
.equip-card.eq-danger { border-color: rgba(230,57,70,0.35); }
.equip-card.eq-ok     { border-color: rgba(76,184,112,0.3); }
.equip-name { font-size: 0.85rem; font-weight: 600; margin-bottom: 2px; }
.equip-sub  { font-size: 0.68rem; color: var(--muted); margin-bottom: 10px; }
.equip-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.equip-metric { background: var(--card); border-radius: 4px; padding: 6px; text-align: center; }
.equip-metric-val { font-size: 0.85rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.equip-metric-lbl { font-size: 0.58rem; color: var(--muted); margin-top: 1px; }
.equip-health-bar { height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.equip-health-fill { height: 100%; background: var(--success); width: var(--w, 0%); transition: width 0.6s ease; }
.equip-health-fill.warn   { background: var(--warning); }
.equip-health-fill.danger { background: var(--danger); }
.sensor-anomaly-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.sensor-anomaly-row:last-child { border-bottom: none; }
.anomaly-sev { width: 6px; border-radius: 3px; align-self: stretch; flex-shrink: 0; }
.anomaly-sev.high   { background: var(--danger); }
.anomaly-sev.med    { background: var(--warning); }
.anomaly-sev.low    { background: var(--info); }
.anomaly-time { font-size: 0.65rem; color: var(--muted); min-width: 60px; font-family: 'JetBrains Mono', monospace; }
.anomaly-desc { font-size: 0.78rem; flex: 1; }
.anomaly-equip { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }
/* SCADA parameters panel */
.scada-param-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scada-param { background: var(--card-alt); border-radius: var(--radius-sm); padding: 10px; border: 1px solid var(--border); text-align: center; }
.scada-param.warn   { border-color: rgba(240,160,48,0.4); }
.scada-param.danger { border-color: rgba(230,57,70,0.35); }
.scada-param-val { font-size: 1.1rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.scada-param-lbl { font-size: 0.62rem; color: var(--muted); margin-top: 3px; }
.scada-param-range { font-size: 0.58rem; color: var(--border); margin-top: 1px; }
/* ── Mill — POME Monitoring ──────────────────────────────── */
.pome-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.pome-kpi { background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.pome-kpi.over-limit { border-color: rgba(230,57,70,0.4); background: rgba(230,57,70,0.05); }
.pome-kpi-val { font-size: 1.2rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.pome-kpi-lbl { font-size: 0.62rem; color: var(--muted); margin-top: 3px; }
.pome-kpi-limit { font-size: 0.58rem; color: var(--muted); margin-top: 1px; }
/* ── Mill — Maintenance Schedule ────────────────────────── */
.wo-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.wo-row:last-child { border-bottom: none; }
.wo-type-badge { padding: 3px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 600; flex-shrink: 0; }
.wo-type-badge.preventive { background: rgba(56,182,255,0.12); color: var(--info); }
.wo-type-badge.corrective  { background: rgba(230,57,70,0.1); color: var(--danger); }
.wo-type-badge.predictive  { background: rgba(160,100,240,0.12); color: var(--purple); }
.wo-body { flex: 1; }
.wo-title { font-size: 0.82rem; font-weight: 600; }
.wo-meta  { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }
.wo-due   { font-size: 0.7rem; font-family: 'JetBrains Mono', monospace; }
.pm-cal   { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.pm-cal-cell { border-radius: 3px; padding: 6px 4px; font-size: 0.62rem; text-align: center; background: var(--card-alt); border: 1px solid var(--border); }
.pm-cal-cell.pm-due   { background: rgba(56,182,255,0.1); border-color: rgba(56,182,255,0.3); color: var(--info); }
.pm-cal-cell.pm-done  { background: var(--success-bg); border-color: var(--green); color: var(--success); }
.pm-cal-cell.pm-over  { background: rgba(230,57,70,0.1); border-color: rgba(230,57,70,0.3); color: var(--danger); }
.pm-cal-cell.pm-none  { background: transparent; border-color: transparent; }
.downtime-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.75rem; }
.downtime-equip { min-width: 110px; color: var(--muted); }
.downtime-track { flex: 1; height: 14px; background: var(--border); border-radius: 3px; overflow: hidden; }
.downtime-fill  { height: 100%; background: var(--danger); width: var(--w, 0%); border-radius: 3px; display: flex; align-items: center; padding-left: 6px; font-size: 0.58rem; color: rgba(255,255,255,0.9); font-weight: 700; transition: width 0.5s ease; }
/* ── Harvest — Mandor avatar color variants ──────────────── */
.mandor-avatar.v1 { background: linear-gradient(135deg, var(--success), var(--green)); }
.mandor-avatar.v2 { background: linear-gradient(135deg, var(--green), var(--gold-dark)); }
.mandor-avatar.v3 { background: linear-gradient(135deg, var(--info), var(--purple)); }
.mandor-avatar.v4 { background: linear-gradient(135deg, var(--warning), var(--danger)); }
.mandor-avatar.v5 { background: linear-gradient(135deg, var(--gold), var(--warning)); }
/* bjr-bar-fill width via data-w */
.bjr-bar-fill { width: var(--w, 100%); }
.bjr-bar-fill.warn   { background: linear-gradient(90deg, var(--warning), #FFD580); }
.bjr-bar-fill.danger { background: linear-gradient(90deg, var(--danger), #FF8080); }
/* progress-fill width via data-w */
.progress-fill { width: var(--w, 0%); }
/* ── Harvest — Fraksi Matang ─────────────────────────────── */
.fraksi-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.fraksi-card {
  background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 8px; text-align: center;
}
.fraksi-card.active { border-color: var(--green-light); background: var(--green-bg); }
.fraksi-num  { font-size: 1.4rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.fraksi-label { font-size: 0.62rem; color: var(--muted); margin-top: 2px; }
.fraksi-pct  { font-size: 0.7rem; color: var(--muted); margin-top: 4px; }
.fraksi-bar  { height: 3px; background: var(--border); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.fraksi-bar-fill { height: 100%; background: var(--green); width: var(--w, 0%); transition: width 0.5s ease; }
.fraksi-bar-fill.danger { background: var(--danger); }
.fraksi-bar-fill.warn   { background: var(--warning); }
.fraksi-bar-fill.gold   { background: var(--gold); }
/* AI Grading cards */
.grade-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--card-alt); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.grade-ico  { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.grade-ico.green  { background: var(--success-bg); color: var(--success); }
.grade-ico.warn   { background: rgba(240,160,48,0.12); color: var(--warning); }
.grade-ico.danger { background: rgba(230,57,70,0.1); color: var(--danger); }
.grade-ico.info   { background: rgba(56,182,255,0.1); color: var(--info); }
.grade-val  { font-size: 1.2rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.grade-sub  { font-size: 0.68rem; color: var(--muted); }
/* Fruit loss tracker */
.loss-row   { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.loss-row:last-child { border-bottom: none; }
.loss-blok  { font-size: 0.78rem; font-weight: 600; min-width: 40px; }
.loss-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.loss-fill  { height: 100%; background: var(--danger); width: var(--w, 0%); border-radius: 3px; transition: width 0.5s ease; }
.loss-pct   { font-size: 0.72rem; color: var(--danger); min-width: 36px; text-align: right; font-family: 'JetBrains Mono', monospace; }
/* ── Harvest — Ancak Management ─────────────────────────── */
.ancak-map-wrap { overflow-x: auto; }
.ancak-grid-map { display: grid; gap: 3px; }
.ancak-cell {
  aspect-ratio: 1; border-radius: 3px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.52rem; font-weight: 700; color: rgba(255,255,255,0.9);
  transition: transform 0.15s, box-shadow 0.15s;
  min-width: 28px;
}
.ancak-cell:hover { transform: scale(1.08); box-shadow: 0 0 0 2px #fff; z-index: 1; }
.ancak-cell.a-green  { background: var(--success); }
.ancak-cell.a-gold   { background: var(--gold); }
.ancak-cell.a-warn   { background: var(--warning); }
.ancak-cell.a-danger { background: var(--danger); }
.ancak-cell.a-vacant { background: var(--border); color: var(--muted); }
.pemanen-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pemanen-row:last-child { border-bottom: none; }
.pemanen-num  { font-size: 0.65rem; color: var(--muted); min-width: 48px; font-family: 'JetBrains Mono', monospace; }
.pemanen-name { font-size: 0.82rem; font-weight: 600; flex: 1; }
.pemanen-ancak { font-size: 0.68rem; color: var(--muted); }
/* ── Harvest — Jadwal Rotasi / Harvest Scheduler ────────── */
.rot-cal     { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.rot-cal-hdr { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.rot-day-lbl { font-size: 0.62rem; color: var(--muted); text-align: center; padding: 2px 0; }
.rot-cell {
  aspect-ratio: 1; border-radius: 3px; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 0.55rem; font-weight: 700; transition: transform 0.15s;
  min-width: 22px;
}
.rot-cell:hover { transform: scale(1.1); z-index: 1; }
.rot-cell .rot-num { font-size: 0.6rem; font-weight: 800; }
.rot-cell .rot-blok { font-size: 0.45rem; opacity: 0.85; }
.rot-cell.r-done   { background: var(--success-bg); color: var(--success); border: 1px solid var(--green); }
.rot-cell.r-today  { background: var(--success); color: #fff; }
.rot-cell.r-late   { background: rgba(230,57,70,0.15); color: var(--danger); border: 1px solid rgba(230,57,70,0.3); }
.rot-cell.r-sched  { background: var(--card-alt); color: var(--muted); border: 1px solid var(--border); }
.rot-cell.r-off    { background: transparent; color: var(--border); }
.rot-stat-pill     { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; }
.rot-stat-pill.green  { background: var(--success-bg); color: var(--success); }
.rot-stat-pill.danger { background: rgba(230,57,70,0.1); color: var(--danger); }
.rot-stat-pill.warn   { background: rgba(240,160,48,0.12); color: var(--warning); }
/* ── Harvest — Premi & SPB Closing ──────────────────────── */
.premi-table-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.78rem; }
.premi-table-row.premi-hdr { font-size: 0.68rem; color: var(--muted); font-weight: 600; padding-bottom: 6px; }
.premi-table-row:last-child { border-bottom: none; }
.premi-total-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--gold); font-size: 0.82rem; }
.spb-close-step  { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.spb-close-step:last-child { border-bottom: none; }
.step-num-c      { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; flex-shrink: 0; }
.step-num-c.done { background: var(--success); color: #fff; }
.step-num-c.active { background: var(--gold); color: #fff; }
.step-num-c.pending { background: var(--border); color: var(--muted); }
.step-body       { flex: 1; }
.step-title      { font-size: 0.85rem; font-weight: 600; }
.step-desc       { font-size: 0.72rem; color: var(--muted); margin-top: 3px; }
.step-actions    { margin-top: 8px; display: flex; gap: 6px; }
/* ── Supply Chain — ds-chip states ───────────────────────── */
.ds-chip.active { background: var(--green-bg); border-color: var(--green); color: var(--green-light); cursor: pointer; }
.ds-chip.active i { color: var(--green-light); }
.ds-chip.warn   { border-color: var(--warning); color: var(--warning); cursor: pointer; }
.ds-chip.warn i { color: var(--warning); }
/* ── Supply Chain — trace chain ──────────────────────────── */
.trace-connector.gold-green { background: linear-gradient(90deg, var(--gold-dark), var(--green)); }
.trace-connector.gold-green::after { border-left-color: var(--green); }
.trace-chain-stats { display: flex; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
/* ── Supply Chain — avatar variants ──────────────────────── */
.avatar-sm.v5 { background: linear-gradient(135deg, var(--purple), var(--info)); }
.avatar-sm.v6 { background: linear-gradient(135deg, var(--green-mid), var(--green)); }
.farmer-avatar.v1 { background: linear-gradient(135deg, var(--green), var(--green-mid)); }
.farmer-avatar.v2 { background: linear-gradient(135deg, var(--info), var(--purple)); }
.farmer-avatar.v3 { background: linear-gradient(135deg, var(--warning), var(--gold)); }
/* ── Supply Chain — table rows ───────────────────────────── */
.tr-danger td { background: rgba(230,57,70,0.04) !important; }
.tr-danger    { border-left: 3px solid var(--danger); }
.tr-review td { background: rgba(240,160,48,0.04) !important; }
.tr-review    { border-left: 3px solid var(--warning); }
/* ── Supply Chain — action button variants ───────────────── */
.action-btn.warn   { border-color: var(--warning); color: var(--warning); }
.action-btn.danger { border-color: var(--danger);  color: var(--danger); }
/* ── Supply Chain — val-row total separator ──────────────── */
.val-row.total { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; border-bottom: none; }
.val-row.total .val { font-size: 1rem; }
/* ── Supply Chain — layout helpers ───────────────────────── */
.plasma-summary-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.card.card-gold { border-color: var(--gold-dark); }
.risk-stats-row { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.risk-stat.grow { flex: 1; min-width: 120px; }
.icon-md { font-size: 1.2rem; }
/* ── Supply Chain — GIS Plot Map ─────────────────────────── */
.gis-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.gis-legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--muted); }
.gis-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.gis-legend-dot.p-safe { background: var(--success); }
.gis-legend-dot.p-pend { background: var(--gold); }
.gis-legend-dot.p-risk { background: var(--warning); }
.gis-legend-dot.p-high { background: var(--danger); }
.gis-plot-grid { display: grid; gap: 2px; }
.gis-grid-34 { grid-template-columns: repeat(34, 1fr); }
.gis-plot-cell { aspect-ratio: 1; border-radius: 2px; cursor: pointer; min-width: 14px; transition: transform 0.15s; }
.gis-plot-cell:hover { transform: scale(1.25); z-index: 1; position: relative; }
.gis-plot-cell.p-safe { background: var(--success); }
.gis-plot-cell.p-pend { background: var(--gold); }
.gis-plot-cell.p-risk { background: var(--warning); }
.gis-plot-cell.p-high { background: var(--danger); }
/* ── Supply Chain — TBS Laundering Detection ─────────────── */
.launder-alert { border: 1px solid rgba(230,57,70,0.4); background: rgba(230,57,70,0.05); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; }
.launder-hdr { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; color: var(--danger); margin-bottom: 4px; }
/* ── Supply Chain — Farmer Registration Wizard ───────────── */
.reg-panel { display: none; }
.reg-panel.open { display: block; }
.reg-step-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 16px; }
.reg-step-tab { padding: 5px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; border: 1px solid var(--border); color: var(--muted); background: var(--card-alt); }
.reg-step-tab.active { background: var(--gold); color: #000; border-color: var(--gold); }
.reg-step-tab.done { background: var(--success-bg); color: var(--success); border-color: var(--green); }
.reg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reg-field { display: flex; flex-direction: column; gap: 4px; }
.reg-label { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.reg-input { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text); font-size: 0.82rem; width: 100%; box-sizing: border-box; }
.reg-input:focus { outline: none; border-color: var(--gold); }
/* ── Supply Chain — RSPO Mass Balance ────────────────────── */
.mb-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.8rem; }
.mb-row:last-child { border-bottom: none; }
.mb-label { flex: 1; color: var(--text-soft); }
.mb-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; min-width: 72px; text-align: right; }
.mb-val.green  { color: var(--success); }
.mb-val.danger { color: var(--danger); }
.mb-val.gold   { color: var(--gold); }
.mb-total-row  { display: flex; align-items: center; gap: 8px; padding: 10px 0 4px; border-top: 2px solid var(--border); font-size: 0.85rem; font-weight: 700; }
/* ── Audit — Report icons & layout ──────────────────────── */
.report-icon.gold  { background: var(--gold-bg);    border: 1px solid var(--gold-dark); }
.report-icon.green { background: var(--success-bg); border: 1px solid rgba(76,184,112,0.3); }
.report-icon.info  { background: var(--info-bg);    border: 1px solid rgba(40,180,204,0.3); }
.val-row.grand-total { border-top: 2px solid var(--gold-dark); padding-top: 12px; margin-top: 4px; border-bottom: none; }
.val-row.grand-total .val { font-size: 1rem; }
.risk-footer-row   { display: flex; gap: 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.auditor-name      { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.auditor-role      { font-size: 0.75rem; color: var(--text-soft); margin-top: 2px; }
.val-badge-row     { margin-top: 10px; display: flex; gap: 12px; justify-content: center; }
.valuasi-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.val-action-row    { margin-top: 16px; display: flex; gap: 10px; }
.valuasi-trend-footer { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.val-trend-num     { font-size: 1rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.val-trend-num.gold  { color: var(--gold); }
.val-trend-num.green { color: var(--success); }
.muted-note        { margin-left: auto; font-size: 0.72rem; color: var(--muted); }
.btn-pdf-lg        { padding: 10px 20px !important; font-size: 0.82rem !important; }
/* ── Dashboard & Audit — Utilities ──────────────────────── */
.btn-alert-danger { background: var(--danger-bg); border: 1px solid rgba(230,57,70,0.3); color: var(--danger); padding: 3px 8px; font-size: 0.68rem; }
.btn-alert-warn   { background: var(--warning-bg); border: 1px solid rgba(240,160,48,0.3); color: var(--warning); padding: 3px 8px; font-size: 0.68rem; }
.btn-alert-info   { background: var(--info-bg); border: 1px solid rgba(40,180,204,0.3); color: var(--info); padding: 3px 8px; font-size: 0.68rem; white-space: nowrap; }
.alert-text-soft  { font-size: 0.72rem; color: var(--text-soft); }
.alert-time-xs    { font-size: 0.65rem; color: var(--muted); margin-top: 1px; }
.estate-stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.tl-item.last     { margin-bottom: 0; }
.th-w40           { width: 40px; }
.icon-map-sm      { margin-right: 5px; font-size: 0.7rem; }
.icon-map-sm.gold { color: var(--gold); }
.icon-map-sm.soft { color: var(--text-soft); }
.icon-map-sm.earth { color: var(--earth-light); }
/* ── Logistics & Finance — Utilities ────────────────────── */
.kpi-value-xl      { font-size: 1.8rem; }
.text-xs           { font-size: 0.6rem; }
.text-xs2          { font-size: 0.65rem; }
.flex-1            { flex: 1; }
.flex-col-between  { display: flex; flex-direction: column; justify-content: space-between; }
.flex-col-gap20    { display: flex; flex-direction: column; gap: 20px; }
.flex-center-gap16 { display: flex; align-items: center; gap: 16px; }
.between-row-sm    { display: flex; justify-content: space-between; font-size: 0.78rem; padding: 8px 0; }
.flex-wrap-tags    { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.72rem; }
.ml-auto           { margin-left: auto; }
.align-end         { align-self: flex-end; }
.mb-6              { margin-bottom: 6px; }
.mb-16             { margin-bottom: 16px; }
.mr-4              { margin-right: 4px; }
.card-header-lg    { padding: 16px 20px !important; border-bottom: 1px solid var(--border) !important; }
.card-header-sm    { padding: 12px 14px !important; border-bottom: 1px solid var(--border) !important; }
.card-title-sm     { font-size: 0.82rem; }
.table-xs          { font-size: 0.72rem; }
.table-sm          { font-size: 0.8rem; }
/* ── Logistics — Truck icon variants ─────────────────────── */
.truck-icon.green  { background: var(--green-bg);    border: 1px solid var(--green); }
.truck-icon.info   { background: var(--info-bg);     border: 1px solid var(--info); }
.truck-icon.warn   { background: var(--warning-bg);  border: 1px solid rgba(240,160,48,0.3); }
.truck-icon.danger { background: var(--danger-bg);   border: 1px solid rgba(230,57,70,0.3); }
/* ── Logistics — Donut legend ─────────────────────────────── */
.donut-legend-list          { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.legend-dot-circle          { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.legend-dot-circle.green    { background: var(--success); }
.legend-dot-circle.info     { background: var(--info); }
/* ── Logistics — Date picker toolbar ─────────────────────── */
.date-picker-wrap  { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 0.78rem; color: var(--text-soft); }
.date-input-native { background: none; border: none; color: var(--text); font-family: inherit; font-size: 0.78rem; outline: none; cursor: pointer; }
.search-icon-sm    { color: var(--muted); font-size: 0.78rem; }
.live-status-icon  { color: var(--success); font-size: 0.5rem; animation: pulse-anim 2s infinite; }
/* ── Logistics — Quick input panel ───────────────────────── */
.qr-input-row      { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.quick-input-title { font-size: 0.8rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.btn.btn-full      { width: 100%; justify-content: center; }
.btn-xs-gap        { gap: 4px !important; font-size: 0.72rem !important; }
.btn-action-sm     { font-size: 0.68rem !important; gap: 4px !important; padding: 3px 9px !important; }
/* ── Logistics — Armada section header ───────────────────── */
.armada-hdr-row    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.armada-hdr-title  { font-size: 1rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.armada-hdr-sub    { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
/* ── Logistics — SVG map classes ─────────────────────────── */
.map-grid-overlay  { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.armada-map-svg    { position: relative; z-index: 2; }
.svg-pks-label     { font-family: Inter, sans-serif; font-size: 7px; font-weight: 700; fill: rgba(255,220,80,0.8); text-anchor: middle; }
.svg-pks-star      { font-size: 13px; fill: #C9A84C; text-anchor: middle; }
.svg-truck-text    { font-size: 7px; fill: #fff; text-anchor: middle; dominant-baseline: middle; }
.svg-truck-text-dim{ font-size: 7px; fill: rgba(255,255,255,0.6); text-anchor: middle; dominant-baseline: middle; }
.svg-truck-arrow   { font-size: 6px; fill: #fff; text-anchor: middle; dominant-baseline: middle; }
.svg-div-label     { font-family: Inter, sans-serif; font-size: 7px; font-weight: 600; fill: rgba(255,255,255,0.2); letter-spacing: 0.1em; }
.svg-north-text    { font-family: sans-serif; font-size: 9px; fill: rgba(255,255,255,0.35); font-weight: 700; }
.svg-coord-text    { font-family: 'JetBrains Mono', monospace; font-size: 6px; fill: rgba(96,138,104,0.45); }
.svg-legend-text   { font-size: 6.5px; fill: rgba(200,230,210,0.75); }
.svg-legend-star   { font-size: 8px; fill: #C9A84C; }
/* ── Logistics — Armada summary ──────────────────────────── */
.summary-stat-grid.grid-2 { grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 10px; }
.breakdown-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; color: var(--muted); padding: 8px 0 0; border-top: 1px solid var(--border); }
.card.card-info-bg { padding: 14px; background: var(--info-bg); border-color: rgba(40,180,204,0.3); }
.pks-queue-hdr     { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pks-queue-label   { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.pks-queue-count   { font-size: 1.3rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--info); }
.armada-list-card  { padding: 0 !important; flex: 1; }
.th-xs             { padding: 8px 6px !important; font-size: 0.65rem !important; }
.th-xs-wide        { padding: 8px 10px !important; font-size: 0.65rem !important; }
.th-xs-right       { padding: 8px 6px !important; font-size: 0.65rem !important; text-align: right !important; }
.td-eta-warn       { color: var(--warning); font-size: 0.65rem; }
.td-eta-danger     { color: var(--danger);  font-size: 0.65rem; }
.td-eta-info       { color: var(--info);    font-size: 0.65rem; }
.tr-info           { background: rgba(40,180,204,0.04); }
/* ── Logistics — Dispatcher table ────────────────────────── */
.status-text-warn  { font-size: 0.72rem; font-weight: 600; color: var(--warning); }
.status-text-danger{ font-size: 0.72rem; font-weight: 600; color: var(--danger); }
.tbl-action-footer { padding: 10px 16px; border-top: 1px solid var(--border); background: var(--card-alt); display: flex; align-items: center; justify-content: space-between; }
/* ── Logistics — Dispatcher chart legend ─────────────────── */
.legend-dot-sq-green { width: 10px; height: 10px; background: rgba(76,184,112,0.7); border-radius: 2px; display: inline-block; vertical-align: middle; }
.legend-line-gold    { width: 24px; height: 2px; background: var(--gold); display: inline-block; border-radius: 1px; vertical-align: middle; }
.chart-footer-between{ display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.72rem; color: var(--muted); }
/* ── Finance — PSAK & Revenue ────────────────────────────── */
.info-box-sm       { margin-top: 10px; padding: 8px 12px; font-size: 0.72rem; }
.info-box.green    { background: var(--success-bg); border-color: rgba(76,184,112,0.25); }
.psak-trend-row    { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.psak-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-legend-row  { display: flex; gap: 12px; margin-top: 12px; justify-content: center; }
.legend-dot-sq     { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; vertical-align: middle; }
.legend-dot-sq.gold  { background: var(--gold); }
.legend-dot-sq.green { background: var(--success); }
.val-history-row   { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.val-history-row.last { border-bottom: none; }
.val-history-num   { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text); }
.val-history-num.gold { color: var(--gold); }
.revenue-summary-row { display: flex; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; align-items: flex-end; }
.rev-metric-val    { font-size: 1.1rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.rev-metric-val.green { color: var(--green-light); }
.rev-metric-val.gold  { color: var(--gold); }
.rev-metric-val.info  { color: var(--info); }
.rev-total-sep     { border-left: 1px solid var(--border); padding-left: 24px; }
.rev-total-num     { font-size: 1.3rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.payroll-grid      { display: grid; grid-template-columns: 1fr auto; gap: 24px; }
.payroll-panel-right { min-width: 220px; }
.payroll-summary-hdr { text-align: center; padding: 16px 0; }
.payroll-big-num   { font-size: 2rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--gold); margin-top: 6px; }
.tl-dot.muted      { background: var(--border); }
/* ── Analytics — Utilities ────────────────────────────────── */
/* Legend dot color modifiers (shared across all sizes) */
.ldot-green-light { background: var(--green-light); }
.ldot-soft        { background: var(--border-soft); }
.ldot-gold        { background: var(--gold); }
.ldot-info        { background: var(--info); }
.ldot-purple      { background: var(--purple); }
.ldot-muted       { background: var(--muted); }
.ldot-success     { background: var(--success); }
.ldot-warn        { background: var(--warning); }
.ldot-danger      { background: var(--danger); }
.ldot-border      { background: var(--border); }
/* Legend dot sizes */
.legend-dot-sq-8  { width: 8px;  height: 8px;  border-radius: 2px; display: inline-block; flex-shrink: 0; vertical-align: middle; }
.legend-dot-sq-14 { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex-shrink: 0; vertical-align: middle; }
.legend-line-xs   { display: inline-block; width: 10px; height: 2px; background: var(--gold); vertical-align: middle; }
/* Chart line/fill legend samples */
.chart-line-sm          { display: inline-block; width: 16px; height: 3px; border-radius: 2px; vertical-align: middle; }
.chart-line-sm.green    { background: var(--green-light); }
.chart-line-sm.gold-dash{ background: var(--gold); border-top: 1px dashed var(--gold); }
.chart-fill-sm          { display: inline-block; width: 16px; height: 10px; background: rgba(201,168,76,0.15); border-radius: 2px; vertical-align: middle; }
/* Estate dot color variants */
.estate-dot.green-light { background: var(--green-light); }
.estate-dot.gold        { background: var(--gold); }
/* Status pills (heatmap legend) */
.status-pill         { padding: 2px 8px; border-radius: 3px; font-weight: 600; display: inline-block; }
.status-pill.success { background: rgba(76,184,112,0.2);  color: var(--green-light); }
.status-pill.warn    { background: rgba(240,160,48,0.15); color: var(--warning); }
.status-pill.danger  { background: rgba(230,57,70,0.15);  color: var(--danger); }
/* Table header with card bg */
.th-card-bg { background: var(--card) !important; }
/* Data value (forecast section) */
.data-val         { font-size: 1rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.data-val.gold    { color: var(--gold); }
.data-val.success { color: var(--success); }
.data-val.info    { color: var(--info); }
/* AI insight banner */
.info-row.ai-row  { background: linear-gradient(135deg,rgba(100,220,140,0.08),rgba(201,168,76,0.06)); border-color: rgba(100,220,140,0.3); }
.ai-icon          { width:40px;height:40px;border-radius:10px;background:rgba(100,220,140,0.15);border:1px solid rgba(100,220,140,0.3);display:flex;align-items:center;justify-content:center;color:var(--green-light);font-size:1.2rem;flex-shrink:0; }
/* Scenario card borders (soft variants) */
.card.green-border-soft  { border-color: rgba(76,184,112,0.35); }
.card.gold-border-soft   { border-color: rgba(201,168,76,0.35); }
/* Card with alt background */
.card.bg-alt        { background: var(--card-alt); }
/* Export card icon color variants */
.export-card-icon.green  { background: var(--green-bg); border: 1px solid var(--green); color: var(--green-light); }
.export-card-icon.info   { background: var(--info-bg); border: 1px solid rgba(40,180,204,0.3); color: var(--info); }
.export-card-icon.gold   { background: var(--gold-bg); border: 1px solid var(--gold-dark); color: var(--gold); }
.export-card-icon.purple { background: rgba(100,80,200,0.1); border: 1px solid rgba(100,80,200,0.3); color: var(--purple); }
/* Misc utilities */
.fs-09             { font-size: 0.9rem; }
.align-self-center { align-self: center; }
.td-card-alt       { background: var(--card-alt); }
.ranking-card.danger-soft { border-color: rgba(230,57,70,0.2); }
.rank-num.compact  { width: 22px; height: 22px; font-size: 0.68rem; }
.max-w-420         { max-width: 420px; }
.att-day-cell      { width: 100%; aspect-ratio: 1; border-radius: 4px; background: var(--day-bg); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: var(--card); font-weight: 600; }
/* ── HRM — Utilities ──────────────────────────────────────── */
.avatar-sm.v7  { background: linear-gradient(135deg, var(--info), var(--green-mid)); }
.avatar-sm.v8  { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }
.avatar-sm.v9  { background: linear-gradient(135deg, var(--warning), var(--gold)); }
.avatar-sm.v10 { background: linear-gradient(135deg, var(--danger), var(--warning)); }
.avatar-sm.v11 { background: linear-gradient(135deg, var(--gold), var(--green)); }
.avatar-sm.compact { width: 28px; height: 28px; font-size: 0.6rem; }
.kpi-value-md  { font-size: 1.4rem; }
.grid-4-gap12  { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.th-w36        { width: 36px; }
.fs-08         { font-size: 0.8rem; }
.perf-score    { font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.perf-score.info { color: var(--info); }
.perf-score.warn { color: var(--warning); }
.attend-legend-row { display: flex; gap: 16px; margin-top: 14px; font-size: 0.7rem; }
.att-dot         { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.att-dot.success { background: var(--success); opacity: 0.7; }
.att-dot.warn    { background: var(--warning); opacity: 0.7; }
.att-dot.danger  { background: var(--danger);  opacity: 0.7; }
.att-dot.info    { background: var(--info);    opacity: 0.7; }
.att-dot.today   { border: 1px solid var(--gold); }
.caption-muted   { font-size: 0.72rem; color: var(--muted); margin-bottom: 12px; }
.section-divider-center { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: center; }
.subsection-title { font-size: 0.75rem; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.btn-action-lg   { justify-content: center !important; padding: 12px !important; font-size: 0.9rem !important; }
.info-note-box   { margin-top: 12px; padding: 10px; background: var(--card-alt); border-radius: var(--radius-sm); font-size: 0.72rem; color: var(--muted); text-align: center; }
/* ── Estate Map — Utilities ───────────────────────────────── */
.layer-check.muted  { color: var(--muted); }
.progress-fill.purple { background: var(--purple); }
.search-bar-full    { max-width: 100%; height: 32px; }
.search-bar-panel   { height: 30px; max-width: 220px; }
.blk-status-dot          { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.blk-status-dot.danger   { background: var(--danger); box-shadow: 0 0 5px var(--danger); }
.blk-status-dot.purple   { background: #8B5CF6; }
.spacer-24          { height: 24px; }
.ml-0               { margin-left: 0; }
.ml-2               { margin-left: 2px; }
/* SVG Estate Map labels */
.svg-hcv-label      { font-family: Inter, sans-serif; font-size: 8px; font-weight: 700; fill: rgba(201,168,76,0.7); text-anchor: middle; }
.svg-warn-icon      { font-size: 11px; fill: #E63946; font-weight: 900; font-family: sans-serif; }
.svg-estate-div-label { font-family: Inter, sans-serif; font-size: 8px; font-weight: 600; fill: rgba(255,255,255,0.25); letter-spacing: 0.1em; }
.svg-estate-coord   { font-family: 'JetBrains Mono', monospace; font-size: 7px; fill: rgba(96,138,104,0.5); }
.svg-north-text-lg  { font-family: sans-serif; font-size: 10px; fill: rgba(255,255,255,0.4); font-weight: 700; }
/* ── Settings — Utilities ─────────────────────────────────── */
/* Stat Card (settings summary) */
.stat-card { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.stat-card-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.stat-card-icon.green  { background: var(--green-bg); border: 1px solid var(--green); color: var(--green-light); }
.stat-card-icon.gold   { background: var(--gold-bg); border: 1px solid var(--gold-dark); color: var(--gold); }
.stat-card-icon.info   { background: var(--info-bg); border: 1px solid rgba(40,180,204,0.3); color: var(--info); }
.stat-card-val { font-size: 1.2rem; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.stat-card-lbl { font-size: 0.75rem; color: var(--muted); }

/* Estate Tree */
.estate-tree { display: flex; flex-direction: column; gap: 4px; }
.estate-tree-node { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.estate-tree-header { display: flex; align-items: center; padding: 10px 14px; background: var(--card-alt); cursor: pointer; user-select: none; }
.estate-tree-header:hover { background: var(--card-hover); }
.estate-tree-arrow { font-size: 0.6rem; color: var(--muted); transition: transform 0.2s; }
.estate-tree-node.open .estate-tree-arrow { transform: rotate(90deg); }
.estate-tree-children { display: none; padding: 0 8px 8px; }
.estate-tree-node.open .estate-tree-children { display: block; }
.estate-tree-child { display: flex; align-items: center; padding: 7px 10px; border-radius: var(--radius-sm); gap: 6px; }
.estate-tree-child:hover { background: var(--card-hover); }

/* Integration Status List */
.integration-status-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.integration-status-item:last-child { border-bottom: none; }
.integration-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }

/* Role Item */
.role-item { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.role-item:last-child { border-bottom: none; }
.role-badge { flex-shrink: 0; }
.role-perms { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.role-perm-tag { font-size: 0.65rem; background: var(--card-alt); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; color: var(--muted); }

/* Form Fields */
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.form-input { background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 0.82rem; padding: 8px 10px; width: 100%; transition: border-color var(--transition); }
.form-input:focus { outline: none; border-color: var(--gold); }
.form-textarea { resize: vertical; min-height: 60px; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.input-masked-row { display: flex; align-items: center; }
.grid-3-gap16 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-2-gap12 { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.card-footer-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-top: 1px solid var(--border); background: var(--card-alt); font-size: 0.78rem; color: var(--muted); border-radius: 0 0 var(--radius) var(--radius); }
.mt-4 { margin-top: 4px; }
.w-140 { width: 140px; }
.w-80 { width: 80px; }

/* Toggle Switch */
.toggle-wrap { display: flex; align-items: center; gap: 8px; }
.toggle-input { display: none; }
.toggle-label { width: 40px; height: 22px; background: var(--border-soft); border-radius: 11px; cursor: pointer; position: relative; transition: background 0.2s; }
.toggle-label::after { content: ''; position: absolute; width: 16px; height: 16px; background: var(--muted); border-radius: 50%; top: 3px; left: 3px; transition: all 0.2s; }
.toggle-input:checked + .toggle-label { background: var(--green); }
.toggle-input:checked + .toggle-label::after { left: 21px; background: #fff; }
.toggle-sm { width: 32px; height: 18px; border-radius: 9px; background: var(--border-soft); cursor: pointer; appearance: none; position: relative; transition: background 0.2s; flex-shrink: 0; }
.toggle-sm:checked { background: var(--green); }

/* Formula / Premi */
.formula-box { background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.formula-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.82rem; }
.formula-var { font-weight: 700; }
.formula-op { color: var(--muted); font-weight: 700; font-size: 1rem; }
.formula-expr { color: var(--text-soft); display: flex; align-items: center; gap: 6px; }
.input-formula { background: var(--card); border: 1px solid var(--border-soft); border-radius: 4px; color: var(--gold); font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; padding: 3px 6px; width: 72px; text-align: center; }
.input-formula:focus { outline: none; border-color: var(--gold); }
.tbl-compact td, .tbl-compact th { padding: 6px 10px; }
.btn-xs { padding: 3px 8px; font-size: 0.7rem; }
.premi-preview-row { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.premi-preview-item { flex: 1; padding: 10px 12px; border-right: 1px solid var(--border); text-align: center; }
.premi-preview-item:last-child { border-right: none; }
.premi-preview-item.highlight { background: var(--gold-bg); border-top: 2px solid var(--gold); }
.premi-preview-lbl { font-size: 0.68rem; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; }
.premi-preview-val { font-size: 0.85rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--text); }

/* Service Status Row */
.svc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.svc-row:last-child { border-bottom: none; }
.svc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.svc-dot.green  { background: var(--success); box-shadow: 0 0 6px var(--success); }
.svc-dot.warn   { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.svc-dot.danger { background: var(--danger); box-shadow: 0 0 6px var(--danger); }

/* Sync Queue Row */
.sync-queue-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.sync-queue-row:last-child { border-bottom: none; }
.kpi-ico-sm { width: 30px; height: 30px; font-size: 0.85rem; border-radius: 7px; flex-shrink: 0; }

/* ── Agronomi — Kalender & Soil Test ─────────────────────── */
.agro-cal-wrap { overflow-x: auto; }
.agro-cal-header, .agro-cal-row { display: grid; grid-template-columns: 160px repeat(12, 1fr); border-bottom: 1px solid var(--border); }
.agro-cal-header { background: var(--card-alt); }
.agro-cal-month { padding: 6px 4px; font-size: 0.7rem; font-weight: 600; color: var(--muted); text-align: center; border-left: 1px solid var(--border); }
.agro-cal-row:hover { background: var(--card-hover); }
.agro-cal-row-lbl { padding: 8px 10px; font-size: 0.78rem; color: var(--text-soft); display: flex; align-items: center; }
.agro-cal-cell { padding: 4px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--border); min-height: 36px; justify-content: center; }
.agro-cal-pill { height: 8px; border-radius: 2px; width: 100%; }
.agro-cal-pill.sensus { background: var(--gold); }
.agro-cal-pill.soil   { background: var(--info); }
.agro-cal-pill.leaf   { background: var(--green-light); }
.agro-cal-pill.pupuk  { background: var(--success); }
.agro-cal-pill.pht    { background: var(--warning); }
.agro-cal-pill.rawat  { background: var(--border-soft); }
.agro-cal-pill.panen  { background: var(--purple); }
.agro-legend-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.agro-legend-item.sensus { background: rgba(201,168,76,0.15); color: var(--gold); }
.agro-legend-item.soil   { background: rgba(40,180,204,0.15); color: var(--info); }
.agro-legend-item.leaf   { background: rgba(76,184,112,0.15); color: var(--green-light); }
.agro-legend-item.pupuk  { background: rgba(76,184,112,0.15); color: var(--success); }
.agro-legend-item.pht    { background: rgba(240,160,48,0.15); color: var(--warning); }
.agro-legend-item.rawat  { background: var(--card-alt); color: var(--muted); }
.agro-legend-item.panen  { background: rgba(139,92,246,0.15); color: var(--purple); }
.agro-legend-sm { width: 12px; height: 12px; border-radius: 3px; }
.agro-upcoming-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.agro-upcoming-row:last-child { border-bottom: none; }
.upload-drop-zone { border: 2px dashed var(--border-soft); border-radius: var(--radius); padding: 24px; text-align: center; cursor: pointer; transition: border-color var(--transition); }
.upload-drop-zone:hover { border-color: var(--green); }

/* IoT — Threshold Form ─────────────────────────────────── */
.threshold-form-list { display: flex; flex-direction: column; gap: 0; }
.threshold-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.threshold-row:last-child { border-bottom: none; padding-bottom: 0; }
.threshold-meta { flex: 1; min-width: 0; }
.threshold-param { font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.threshold-inputs { display: flex; gap: 12px; flex-shrink: 0; }
.threshold-input-group { display: flex; flex-direction: column; gap: 4px; }
.threshold-lbl { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.threshold-input-row { display: flex; align-items: center; gap: 6px; }
.threshold-status-col { flex-shrink: 0; padding-top: 18px; }
.input-sm { background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; padding: 5px 8px; text-align: center; }
.input-sm:focus { outline: none; border-color: var(--gold); }
.w-64 { width: 64px; }

/* ── Supply Chain: RSPO Palm Trace & Farmer Reg ─────────── */
.rspo-mb-bar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rspo-mb-label { width: 140px; font-size: 0.8rem; flex-shrink: 0; }
.rspo-mb-track { flex: 1; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.rspo-mb-fill { height: 100%; border-radius: 4px; width: var(--w, 0%); }
.rspo-mb-fill.green { background: var(--green); }
.rspo-mb-fill.danger { background: var(--danger); }
.rspo-mb-fill.gold { background: var(--gold); }
.rspo-mb-val { width: 90px; text-align: right; font-size: 0.82rem; font-weight: 700; flex-shrink: 0; }
.kpi-card.mini { padding: 12px; }
.kpi-value-sm { font-size: 1.2rem; font-weight: 700; margin-top: 4px; }
.grid-three-col { display: grid; grid-template-columns: repeat(3, 1fr); }
.checklist-item { display: flex; align-items: center; font-size: 0.82rem; padding: 4px 0; color: var(--text-sub); }
.checklist-item.done { color: var(--text); }
.checklist-item.pending { color: var(--text-muted); }
.gis-plot-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.gis-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-sub); }
.gis-legend-dot { width: 12px; height: 12px; border-radius: 2px; }
.gis-legend-dot.p-safe { background: var(--green); }
.gis-legend-dot.p-pend { background: var(--gold); }
.gis-legend-dot.p-risk { background: var(--warn); }
.gis-legend-dot.p-high { background: var(--danger); }

/* ── Audit: NCR/CAPA Progress Bar ────────────────────────── */
.capa-progress-wrap { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.capa-progress-wrap.wide { min-width: 0; flex: 1; }
.capa-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.capa-bar-fill { height: 100%; width: var(--cw, 0%); background: var(--green); border-radius: 3px; transition: width 0.4s; }
.capa-pct { font-size: 0.78rem; color: var(--text-soft); white-space: nowrap; min-width: 34px; }

/* ── Audit: Risk Action Cards ────────────────────────────── */
.risk-action-list { display: flex; flex-direction: column; gap: 16px; }
.risk-action-card { padding: 0; }
.risk-action-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.risk-id-badge { font-size: 0.8rem; font-weight: 700; font-family: var(--mono); padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.risk-id-badge.danger { background: rgba(220,53,69,0.15); color: var(--danger); border: 1px solid rgba(220,53,69,0.3); }
.risk-id-badge.warn   { background: rgba(255,165,0,0.12); color: var(--warn); border: 1px solid rgba(255,165,0,0.25); }
.risk-id-badge.green  { background: var(--green-bg); color: var(--green-light); border: 1px solid var(--border-soft); }
.risk-action-title { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.risk-action-steps { display: flex; flex-direction: column; gap: 0; padding: 0 20px; }
.risk-step { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.risk-step:last-child { border-bottom: none; }
.step-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; margin-top: 1px; }
.step-icon.done      { background: var(--green-bg); color: var(--green-light); border: 1px solid var(--border-soft); }
.step-icon.inprogress{ background: rgba(255,165,0,0.12); color: var(--warn); border: 1px solid rgba(255,165,0,0.25); }
.step-icon.pending   { background: var(--card-alt); color: var(--muted); border: 1px solid var(--border); }
.step-title  { font-weight: 600; font-size: 0.88rem; color: var(--text); margin-bottom: 3px; }
.step-desc   { font-size: 0.82rem; color: var(--text-soft); }
.risk-action-footer { padding: 12px 20px; background: var(--card-alt); border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; display: flex; align-items: center; }

/* ── Audit: E-Sign Workflow ──────────────────────────────── */
.esign-doc { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.esign-doc:last-child { border-bottom: none; }
.esign-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.esign-icon.warn { background: rgba(255,165,0,0.12); color: var(--warn); }
.esign-icon.info { background: rgba(23,162,184,0.12); color: var(--info); }
.esign-icon.gold { background: var(--gold-bg); color: var(--gold); }
.esign-title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.esign-chain { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.esign-signer { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; }
.esign-signer.done    { background: var(--green-bg); border: 1px solid var(--border-soft); }
.esign-signer.active  { background: rgba(255,165,0,0.1); border: 1px solid rgba(255,165,0,0.25); }
.esign-signer.pending { background: var(--card-alt); border: 1px solid var(--border); opacity: 0.65; }
.esign-arrow { color: var(--muted); font-size: 0.75rem; }
.signer-name { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.signer-role { font-size: 0.72rem; color: var(--text-soft); }
.esign-info-box { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--green-bg); border: 1px solid var(--border-soft); border-radius: 8px; margin: 12px 20px 16px; }
.kpi-col { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 16px; }

/* ── Audit: Auditor Collab Q&A ───────────────────────────── */
.qa-thread { display: flex; flex-direction: column; gap: 0; }
.qa-item { display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.qa-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; margin-top: 2px; }
.qa-avatar.auditor  { background: var(--gold-bg); color: var(--gold); border: 1px solid rgba(201,168,76,0.3); }
.qa-avatar.internal { background: var(--green-bg); color: var(--green-light); border: 1px solid var(--border-soft); }
.qa-meta { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.qa-author { font-weight: 600; }
.qa-text { font-size: 0.87rem; color: var(--text); line-height: 1.55; }
.qa-reply-box { padding: 14px 20px; border-top: 1px solid var(--border-soft); background: var(--card-alt); }
.qa-textarea { width: 100%; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 10px 14px; font-size: 0.88rem; resize: vertical; min-height: 72px; box-sizing: border-box; font-family: inherit; }
.qa-reply-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.auditor-access-card.compact { padding: 12px 16px; }
.auditor-logo.sm { width: 36px; height: 36px; font-size: 0.9rem; }
.auditor-name.sm { font-size: 0.88rem; }
.auditor-role.sm { font-size: 0.78rem; }
.access-control-list { display: flex; flex-direction: column; gap: 0; padding: 0 16px 8px; }
.access-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; color: var(--text-soft); }
.access-item:last-child { border-bottom: none; }
.badge-xs { font-size: 0.68rem; padding: 2px 7px; }
.w-full { width: 100%; }

/* ── Audit: Finding Closure ──────────────────────────────── */
.finding-closure-card { margin-bottom: 0; }
.finding-closure-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--card-alt); border-radius: 10px 10px 0 0; }
.finding-id { font-size: 0.82rem; font-weight: 700; font-family: var(--mono); padding: 4px 12px; border-radius: 6px; white-space: nowrap; }
.finding-id.gold   { background: var(--gold-bg); color: var(--gold); border: 1px solid rgba(201,168,76,0.3); }
.finding-id.danger { background: rgba(220,53,69,0.15); color: var(--danger); border: 1px solid rgba(220,53,69,0.3); }
.finding-title { font-weight: 600; color: var(--text); }
.closure-steps-wrap { display: flex; flex-direction: column; padding: 0 20px; }
.closure-step { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.closure-step:last-child { border-bottom: none; }
.closure-step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.closure-step-num.done      { background: var(--green-bg); color: var(--green-light); border: 2px solid var(--green); }
.closure-step-num.inprogress{ background: rgba(255,165,0,0.12); color: var(--warn); border: 2px solid var(--warn); }
.closure-step-num.pending   { background: var(--card-alt); color: var(--muted); border: 2px solid var(--border); }
.closure-step-body { flex: 1; }
.closure-step-title { font-weight: 600; font-size: 0.88rem; color: var(--text); margin-bottom: 4px; }
.closure-step-desc  { font-size: 0.82rem; color: var(--text-soft); margin-bottom: 8px; }
.closure-evidence { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; padding: 6px 10px; background: var(--card-alt); border-radius: 6px; border: 1px solid var(--border); flex-wrap: wrap; gap: 6px; }
.evidence-upload { border-style: dashed; border-color: var(--warn); background: rgba(255,165,0,0.05); }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }

/* ── Dashboard: Revenue Breakdown ───────────────────────── */
.revenue-legend { display: flex; flex-direction: column; gap: 0; padding: 0 20px 16px; }
.rev-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rev-item:last-child { border-bottom: none; }
.rev-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rev-label { font-size: 0.82rem; color: var(--text-soft); }
.rev-val { font-size: 0.88rem; font-weight: 600; color: var(--text); }

/* ── Dashboard: PKS OER/KER ─────────────────────────────── */
.pks-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pks-stat-item { padding: 14px 20px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.pks-stat-item:nth-child(2), .pks-stat-item:nth-child(4) { border-right: none; }
.pks-stat-item:nth-child(3), .pks-stat-item:nth-child(4) { border-bottom: none; }
.pks-stat-label { font-size: 0.78rem; color: var(--text-soft); margin-bottom: 4px; }
.pks-stat-val { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.pks-unit { font-size: 0.85rem; font-weight: 400; color: var(--muted); }
.pks-stat-sub { font-size: 0.75rem; color: var(--text-soft); margin-top: 4px; }

/* ── Dashboard: Cuaca / Rainfall ────────────────────────── */
.weather-main { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.weather-icon-wrap { font-size: 2.2rem; line-height: 1; }
.weather-temp { font-size: 1.8rem; font-weight: 700; color: var(--text); line-height: 1; }
.weather-temp span { font-size: 1rem; color: var(--muted); }
.weather-desc { font-size: 0.8rem; color: var(--text-soft); margin-top: 4px; }
.weather-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: 1px solid var(--border); }
.weather-stat { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-right: 1px solid var(--border); }
.weather-stat:last-child { border-right: none; }
.weather-stat-icon { font-size: 1rem; }
.weather-stat-val { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.weather-stat-label { font-size: 0.7rem; color: var(--muted); }
.rainfall-bar-wrap { padding: 12px 20px 16px; }
.rainfall-label-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.rainfall-bars { display: flex; align-items: flex-end; gap: 6px; height: 48px; }
.rainfall-day { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; height: 100%; justify-content: flex-end; }
.rainfall-day span { font-size: 0.68rem; color: var(--muted); }
.rf-bar { width: 100%; height: var(--rh, 20%); background: var(--info); opacity: 0.6; border-radius: 2px 2px 0 0; min-height: 3px; }
.rf-bar.rf-today { background: var(--gold); opacity: 1; }

/* ── Dashboard: AI Forecast ─────────────────────────────── */
.ai-forecast-layout { display: grid; grid-template-columns: 1fr 280px; gap: 0; }
.ai-forecast-chart { border-right: 1px solid var(--border); padding: 16px 20px; }
.ai-forecast-sidebar { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ai-insight-card { background: var(--gold-bg); border: 1px solid rgba(201,168,76,0.25); border-radius: 8px; padding: 12px 14px; }
.ai-insight-title { font-size: 0.82rem; font-weight: 700; color: var(--gold); margin-bottom: 10px; }
.ai-forecast-months { display: flex; flex-direction: column; gap: 8px; }
.ai-month-row { display: flex; align-items: center; gap: 8px; }
.ai-month-label { font-size: 0.75rem; color: var(--text-soft); min-width: 56px; }
.ai-month-val { font-size: 0.82rem; font-weight: 600; }
.ai-conf-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.ai-conf-fill { height: 100%; width: var(--fw, 0%); background: var(--gold); border-radius: 2px; }
.ai-conf-pct { font-size: 0.7rem; color: var(--muted); min-width: 28px; text-align: right; }
.ai-factor-list { display: flex; flex-direction: column; gap: 2px; }
.ai-factor-title { font-size: 0.75rem; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.ai-factor { font-size: 0.78rem; color: var(--text-soft); padding: 3px 0; }

/* ── ESG Report Builder ──────────────────────────────────── */
.esg-pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.esg-pillar-card { border: 2px solid var(--border); border-radius: 10px; padding: 14px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; position: relative; }
.esg-pillar-card.selected { border-color: var(--gold); background: var(--gold-bg); }
.esg-pillar-card input[type=checkbox] { position: absolute; top: 8px; right: 8px; accent-color: var(--gold); }
.esg-pillar-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: 1.1rem; }
.esg-pillar-icon.env { background: var(--green-bg); color: var(--green-light); }
.esg-pillar-icon.soc { background: rgba(23,162,184,0.12); color: var(--info); }
.esg-pillar-icon.gov { background: var(--gold-bg); color: var(--gold); }
.esg-pillar-label { font-weight: 700; font-size: 0.9rem; color: var(--text); margin-bottom: 4px; }
.esg-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.esg-metric-group { background: var(--card-alt); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.esg-metric-group-title { font-weight: 700; font-size: 0.82rem; margin-bottom: 10px; }
.esg-check { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-soft); padding: 4px 0; cursor: pointer; }
.esg-check input { accent-color: var(--green); flex-shrink: 0; }
.esg-score-overall { display: flex; align-items: center; gap: 16px; padding: 8px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.esg-score-ring { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.esg-pillar-scores { display: flex; flex-direction: column; gap: 10px; }
.esg-score-row { display: flex; align-items: center; gap: 0; font-size: 0.85rem; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* ── Finance: PSAK 69 Note Preview ──────────────────────── */
.psak-note-preview { margin: 0 20px 16px; background: var(--card-alt); border: 1px solid var(--border-soft); border-radius: 8px; padding: 16px 18px; }
.psak-note-title { font-weight: 700; color: var(--gold); font-size: 0.9rem; margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.psak-note-body p { font-size: 0.84rem; color: var(--text-soft); line-height: 1.7; margin-bottom: 8px; }
.psak-note-label { font-size: 0.75rem; color: var(--muted); margin-top: 8px; font-style: italic; }

/* ── HRM: Shift & Roster ──────────────────────────────────── */
.roster-conflict-item { display:flex; align-items:center; padding:10px 12px; background:var(--card-alt); border-radius:8px; border:1px solid var(--border); }
.roster-conflict-item + .roster-conflict-item { margin-top:8px; }

/* ── HRM: Performance Evaluation ─────────────────────────── */
.perf-dist-bars { display:flex; flex-direction:column; gap:10px; }
.perf-dist-row { display:flex; align-items:center; gap:10px; }
.perf-grade { font-size:0.78rem; font-weight:600; min-width:80px; color:var(--text-soft); }
.perf-grade-wide { min-width:110px; }
.perf-grade.grade-a { color:var(--green); }
.perf-grade.grade-b { color:var(--gold); }
.perf-grade.grade-c { color:var(--info); }
.perf-grade.grade-d { color:var(--warn); }
.perf-grade.grade-e { color:var(--danger); }
.perf-bar-wrap { flex:1; height:10px; background:var(--border); border-radius:5px; overflow:hidden; }
.perf-bar { height:100%; border-radius:5px; transition:width 0.4s; }
.perf-bar-a { background:var(--green); }
.perf-bar-b { background:var(--gold); }
.perf-bar-c { background:var(--info); }
.perf-bar-d { background:var(--warn); }
.perf-bar-e { background:var(--danger); }
.perf-count { font-size:0.82rem; font-weight:700; min-width:36px; text-align:right; color:var(--text-soft); }
.pip-card { background:var(--card-alt); border:1px solid rgba(220,60,60,0.25); border-radius:10px; padding:14px 16px; }
.pip-header { display:flex; align-items:center; justify-content:space-between; }
.pip-target { font-size:0.83rem; color:var(--text-soft); }

/* ── HRM: Interview Pipeline ──────────────────────────────── */
.interview-pipeline { display:flex; align-items:flex-end; gap:4px; }
.pipeline-stage { flex:1; text-align:center; }
.pipeline-stage-label { font-size:0.75rem; color:var(--text-soft); margin-bottom:6px; }
.pipeline-count { font-size:1.4rem; font-weight:700; color:var(--text); line-height:1.2; }
.pipeline-bar-wrap-h { height:6px; background:var(--border); border-radius:3px; margin-top:6px; overflow:hidden; }
.pipeline-bar { height:6px; background:var(--info); border-radius:3px; opacity:0.85; }
.pipeline-bar-gold { background:var(--gold); }
.pipeline-arrow { color:var(--text-soft); font-size:0.9rem; padding:0 2px; padding-bottom:14px; }
.pipeline-stage-final .pipeline-count { color:var(--gold); }

/* ── Settings: Backup & Recovery ─────────────────────────── */
.backup-est-list { display:flex; flex-direction:column; gap:8px; }
.backup-est-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); font-size:0.82rem; }
.backup-est-row:last-child { border-bottom:none; padding-top:10px; font-size:0.88rem; }

/* ── Logistics: PKS Queue Comprehensive ──────────────────── */
.pks-queue-block { padding:12px 14px; border-bottom:1px solid var(--border); }
.pks-queue-alt { background:var(--card-alt); }
.pks-queue-name { font-size:0.8rem; font-weight:700; margin-bottom:8px; }
.pks-queue-row { display:flex; gap:12px; margin-bottom:8px; }
.pks-qstat { text-align:center; }
.pks-qnum { font-size:1.3rem; font-weight:700; line-height:1; }
.pks-qlabel { font-size:0.68rem; color:var(--muted); }
.pks-queue-trucks { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.pks-truck-item { display:flex; align-items:center; gap:6px; font-size:0.76rem; padding:4px 0; border-bottom:1px solid var(--border); }
.pks-truck-active { background:rgba(76,184,112,0.06); border-radius:4px; padding:4px 4px; }
.pks-queue-eta { font-size:0.75rem; color:var(--text-soft); }

/* ── Logistics: Weighbridge ───────────────────────────────── */
.wb-display { background:var(--card-alt); border:1px solid var(--border); border-radius:10px; padding:16px; }
.wb-plate { font-family:monospace; font-size:1.1rem; font-weight:700; color:var(--gold); letter-spacing:2px; margin-bottom:12px; }
.wb-reading { display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--border); }
.wb-net { border-bottom:none; padding-top:10px; }
.wb-val-label { font-size:0.78rem; color:var(--text-soft); }
.wb-val-num { font-size:1.3rem; font-weight:700; font-family:monospace; }
.wb-val-unit { font-size:0.75rem; font-weight:400; color:var(--muted); }
.wb-meta { display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; }
.wb-meta span { font-size:0.75rem; color:var(--text-soft); }
.wb-stability { display:flex; align-items:center; gap:10px; }
.wb-stab-bar { flex:1; height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.wb-stab-fill { width:95%; height:100%; background:var(--green); border-radius:4px; animation:stab-pulse 1.5s ease-in-out infinite; }
@keyframes stab-pulse { 0%,100%{opacity:1} 50%{opacity:0.7} }
.border-top { border-top:1px solid var(--border); }

/* ── Analytics: Advanced Analytics ───────────────────────── */
.adv-select { width:110px; padding:4px 8px; font-size:0.78rem; background:var(--card-alt); border:1px solid var(--border); color:var(--text); border-radius:6px; }
.adv-stat-row { display:flex; gap:16px; border-top:1px solid var(--border); padding-top:10px; }
.adv-stat { display:flex; flex-direction:column; gap:2px; }
.adv-lag-note { display:flex; align-items:flex-start; gap:6px; padding:8px 10px; background:var(--gold-bg); border:1px solid rgba(201,168,76,0.2); border-radius:8px; }
.adv-quadrant-legend { display:flex; flex-direction:column; gap:5px; }
.adv-quad-item { display:flex; align-items:center; gap:8px; font-size:0.78rem; }
.adv-quad-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* Correlation Matrix */
.corr-matrix { display:flex; flex-direction:column; gap:2px; overflow-x:auto; }
.corr-row { display:flex; gap:2px; }
.corr-cell { min-width:90px; padding:8px 6px; text-align:center; border-radius:4px; font-size:0.78rem; font-weight:600; }
.corr-label { background:transparent; color:var(--text-soft); font-size:0.75rem; font-weight:500; }
.corr-self  { background:rgba(255,255,255,0.06); color:var(--text); }
.corr-high  { background:rgba(76,184,112,0.35);  color:var(--green); }
.corr-mid   { background:rgba(201,168,76,0.25);  color:var(--gold); }
.corr-low   { background:rgba(40,180,204,0.15);  color:var(--info); }
.corr-neg   { background:rgba(230,57,70,0.20);   color:var(--danger); }
.corr-zero  { background:var(--card-alt);         color:var(--muted); }
.corr-legend { display:flex; flex-wrap:wrap; gap:14px; }
.corr-legend-item { display:flex; align-items:center; gap:6px; font-size:0.76rem; color:var(--text-soft); }
.corr-swatch { width:12px; height:12px; border-radius:3px; }

/* ── Dashboard: Multi-Estate Switcher ────────────────────── */
.estate-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; display: inline-block; }
.estate-switcher { position: relative; }
.estate-switcher-trigger { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 0.82rem; transition: var(--transition); }
.estate-switcher-trigger:hover { border-color: var(--border-soft); }
.estate-switcher-badge { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-dark); border-radius: 10px; padding: 1px 7px; font-size: 0.7rem; font-weight: 700; }
.estate-chev { color: var(--muted); font-size: 0.7rem; transition: transform 0.2s; }
.estate-switcher-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 280px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 150; overflow: hidden; }
.estate-switcher-dropdown.open { display: block; }
.estate-dropdown-header { padding: 10px 14px; font-size: 0.72rem; font-weight: 600; color: var(--muted); letter-spacing: 0.05em; border-bottom: 1px solid var(--border); background: var(--card-alt); }
.estate-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid var(--border); }
.estate-option:last-of-type { border-bottom: none; }
.estate-option:hover { background: var(--card-alt); }
.estate-option-active { background: rgba(201,168,76,0.06); }
.estate-option .fa-check { margin-left: auto; }
.estate-dropdown-footer { padding: 8px 10px; border-top: 1px solid var(--border); background: var(--card-alt); }

/* ── Dashboard: Payroll Approval Widget ──────────────────── */
.payroll-flow { display: flex; align-items: flex-start; gap: 0; }
.payroll-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.payroll-step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; border: 2px solid var(--border); background: var(--card-alt); color: var(--muted); }
.payroll-step-dot.done { background: var(--green); border-color: var(--green); color: #fff; }
.payroll-step-dot.active { background: var(--warn); border-color: var(--warn); color: #fff; box-shadow: 0 0 6px rgba(240,160,48,0.5); }
.payroll-step-dot.pending { background: var(--card); border-color: var(--border); }
.payroll-step-label { font-size: 0.7rem; color: var(--text-soft); text-align: center; }
.payroll-step-date { font-size: 0.65rem; }
.payroll-step-line { flex: 1; height: 2px; margin-top: 13px; align-self: flex-start; }
.payroll-step-line.done { background: var(--green); }
.payroll-step-line.pending { background: var(--border); }
.payroll-breakdown { display: flex; flex-direction: column; gap: 10px; }
.payroll-comp-row { display: flex; align-items: center; gap: 10px; }
.payroll-comp-label { font-size: 0.78rem; min-width: 130px; color: var(--text-soft); }
.payroll-comp-bar-wrap { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.payroll-comp-bar { height: 100%; border-radius: 4px; }
.payroll-comp-val { font-size: 0.78rem; min-width: 130px; text-align: right; }

/* ── Supply Chain: TBS Laundering Detection ──────────────── */
.launder-case { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.launder-case-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; }
.launder-case-header.danger { background:rgba(230,57,70,0.08); border-bottom:1px solid rgba(230,57,70,0.2); }
.launder-case-header.warn { background:rgba(240,160,48,0.08); border-bottom:1px solid rgba(240,160,48,0.2); }
.launder-badge { font-size:0.72rem; font-weight:700; color:var(--text-soft); letter-spacing:0.05em; }
.launder-body { padding:12px 14px; }
.launder-flags { display:flex; flex-wrap:wrap; gap:6px; }
.launder-flag { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:20px; font-size:0.72rem; font-weight:600; }
.launder-flag.danger { background:rgba(230,57,70,0.12); color:var(--danger); }
.launder-flag.warn { background:rgba(240,160,48,0.12); color:var(--warn); }
.launder-flag.info { background:rgba(40,180,204,0.12); color:var(--info); }
.launder-rules { display:flex; flex-direction:column; gap:12px; }
.launder-rule { padding:10px 12px; background:var(--card-alt); border-radius:8px; border:1px solid var(--border); }
.launder-rule-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; font-size:0.82rem; }
.launder-rule-weight { display:flex; align-items:center; gap:8px; margin-top:6px; }
.launder-weight-bar { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.launder-weight-bar div { height:100%; border-radius:3px; }

/* ── Valuation: Production Curve ─────────────────────────── */
.curve-legend { display:flex; flex-wrap:wrap; gap:16px; }
.curve-legend-item { display:flex; align-items:center; gap:6px; font-size:0.77rem; color:var(--text-soft); }
.curve-swatch { width:12px; height:12px; border-radius:3px; flex-shrink:0; }

/* ── Valuation: Due Diligence ────────────────────────────── */
.dd-category-list { display:flex; flex-direction:column; gap:12px; }
.dd-cat-row { display:flex; align-items:center; gap:10px; }
.dd-cat-label { font-size:0.8rem; color:var(--text-soft); min-width:170px; flex-shrink:0; }
.dd-cat-bar-wrap { flex:1; height:10px; background:var(--border); border-radius:5px; overflow:hidden; }
.dd-cat-bar { height:100%; border-radius:5px; transition:width 0.4s ease; }
.dd-cat-pct { font-size:0.8rem; font-weight:700; min-width:36px; text-align:right; }

.dd-risk-list { display:flex; flex-direction:column; }
.dd-risk-item { display:flex; flex-direction:column; }
.dd-risk-badge { padding:10px 12px; border-radius:0 6px 6px 0; }
.dd-risk-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.dd-risk-title { font-size:0.82rem; font-weight:600; margin-bottom:4px; }
.dd-risk-desc { font-size:0.78rem; color:var(--text-soft); margin-bottom:6px; }
.dd-risk-action { font-size:0.76rem; font-weight:500; }

.dd-timeline { display:flex; flex-direction:column; gap:0; }
.dd-tl-item { display:flex; gap:12px; padding-bottom:16px; position:relative; }
.dd-tl-item:not(:last-child)::before { content:''; position:absolute; left:7px; top:18px; bottom:0; width:1px; background:var(--border); }
.dd-tl-dot { width:15px; height:15px; border-radius:50%; border:2px solid var(--border); background:var(--card-alt); flex-shrink:0; margin-top:2px; }
.dd-tl-dot-active { border-color:var(--warn); background:var(--warn); box-shadow:0 0 6px var(--warn); }
.dd-tl-dot-pending { border-color:var(--border-soft); background:var(--card); }
.dd-tl-done .dd-tl-dot { border-color:var(--green); background:var(--green); }
.dd-tl-content { flex:1; }
.dd-tl-title { font-size:0.85rem; font-weight:600; margin-bottom:2px; }
.dd-tl-date { font-size:0.76rem; margin-bottom:4px; }
.dd-tl-desc { font-size:0.78rem; color:var(--text-soft); }

.vdr-stats { display:flex; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.vdr-stat { flex:1; padding:12px; text-align:center; border-right:1px solid var(--border); }
.vdr-stat:last-child { border-right:none; }
.vdr-val { display:block; font-size:1.4rem; font-weight:700; color:var(--gold); line-height:1.2; }
.vdr-label { display:block; font-size:0.72rem; color:var(--muted); margin-top:2px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1400px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .grid-7-3, .grid-6-4, .grid-65-35 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sidebar { display: none; }
  .main { margin-left: 0; padding: 16px; }
  .grid-2, .kpi-grid-2 { grid-template-columns: 1fr; }
  .kpi-grid-3, .kpi-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .kpi-grid, .kpi-grid-3, .kpi-grid-4 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .header-search { display: none; }
}

/* ── Upload Zone ──────────────────────────────────────────── */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--radius-sm); padding: 24px; text-align: center; cursor: pointer; transition: var(--transition); }
.upload-zone:hover { border-color: var(--green-light); background: var(--success-bg); }
.upload-zone-ico { font-size: 1.8rem; }

/* ── Carbon Credit Calculator ─────────────────────────────── */
.carbon-result-row { display: flex; gap: 12px; flex-wrap: wrap; }
.carbon-result-item { flex: 1; min-width: 160px; background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.carbon-result-lbl { font-size: 0.68rem; color: var(--muted); margin-bottom: 4px; }
.carbon-result-val { font-size: 1rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }

.carbon-summary-box { background: linear-gradient(135deg, var(--bg) 0%, var(--card-alt) 50%, var(--bg) 100%); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 20px; margin-top: 16px; }
.carbon-summary-title { font-size: 0.9rem; font-weight: 700; color: var(--text); }

.carbon-income-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; text-align: center; transition: var(--transition); }
.carbon-income-card.highlight { border-color: var(--gold); background: rgba(201,168,76,0.06); }
.carbon-income-scheme { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.carbon-income-credit { font-size: 0.72rem; color: var(--text-soft); margin-bottom: 4px; }
.carbon-income-val { font-size: 1.1rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.carbon-income-idr { font-size: 0.72rem; color: var(--muted); margin-top: 3px; }

/* ── Utility padding ──────────────────────────────────────── */
.p-12 { padding: 12px; }

/* ── Form helpers (estate-map / modals) ───────────────────── */
.form-row-2      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-section-label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }

/* ── Info Box variants ────────────────────────────────────── */
.info-box-soft { background: var(--card-alt); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.75rem; color: var(--text-soft); display: flex; align-items: flex-start; gap: 6px; }
.info-box-warn { background: var(--warn-bg, rgba(245,158,11,0.08)); border: 1px solid rgba(245,158,11,0.25); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.75rem; color: var(--warn, #f59e0b); display: flex; align-items: flex-start; gap: 6px; }
.info-box-green { background: var(--success-bg); border: 1px solid rgba(76,184,112,0.25); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.75rem; color: var(--success); display: flex; align-items: flex-start; gap: 6px; }

/* ── Card Base ────────────────────────────────────────────── */
.card-base { background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ── Radio option ─────────────────────────────────────────── */
.radio-group-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.radio-option    { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-soft); cursor: pointer; }
.radio-option input[type="radio"] { accent-color: var(--green-light); }

/* ── Toast notification ───────────────────────────────────── */
.toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 18px; font-size: 0.82rem; color: var(--text); display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.toast.show       { opacity: 1; transform: translateY(0); }
.toast-success    { border-color: var(--green); }
.toast-success i  { color: var(--success); }

/* ── Wizard Step Pills (estate-map sisip wizard) ──────────── */
.wizard-step-pill { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.wizard-pill-num  { width: 28px; height: 28px; border-radius: 50%; background: var(--card-alt); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); transition: var(--transition); }
.wizard-pill-lbl  { font-size: 0.65rem; color: var(--muted); text-align: center; white-space: nowrap; }
.wizard-step-pill.active .wizard-pill-num { background: var(--gold-bg); border-color: var(--gold); color: var(--gold); }
.wizard-step-pill.active .wizard-pill-lbl { color: var(--gold); }
.wizard-step-pill.done   .wizard-pill-num { background: var(--green-bg); border-color: var(--green); color: var(--success); }
.wizard-step-pill.done   .wizard-pill-lbl { color: var(--success); }
.wizard-step-connector { flex: 1; height: 2px; background: var(--border); border-radius: 1px; align-self: center; min-width: 16px; max-width: 40px; }

/* ── Knowledge Base ───────────────────────────────────────── */
.kb-code    { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 700; color: var(--gold); background: var(--gold-bg); border: 1px solid var(--gold-dark); border-radius: 4px; padding: 2px 7px; letter-spacing: 0.04em; }
.kb-formula { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--green-light); background: rgba(76,184,112,0.07); border: 1px solid rgba(76,184,112,0.2); border-radius: 4px; padding: 6px 10px; white-space: pre-wrap; line-height: 1.5; }