:root {
  --nf-bg: #f4f8ea;
  --nf-surface: #ffffff;
  --nf-text: #1a2a16;
  --nf-border: #d7e4b3;
  --nf-primary: #132f13;
  --nf-secondary: #3f5536;
  --nf-danger: #9f2d2d;
  --nf-warning: #9a7a00;
}
* { box-sizing: border-box; }
body.nf-body { margin: 0; font-family: "Segoe UI", Tahoma, sans-serif; background: var(--nf-bg); color: var(--nf-text); }
.nf-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.nf-sidebar { background: #132f13; color: #f8fbe9; padding: 20px 14px; }
.nf-brand { font-size: 22px; font-weight: 700; margin-bottom: 22px; }
.nf-nav-item { display: block; color: #dbeab6; text-decoration: none; padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; }
.nf-nav-item.active, .nf-nav-item:hover { background: #cee44a; color: #132f13; }
.nf-main { padding: 14px 20px; }
.nf-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.nf-menu-toggle { padding: 6px 10px; }
.nf-title { font-size: 20px; font-weight: 700; }
.nf-user { margin-left: auto; font-size: 13px; }
.nf-content { display: block; }
.nf-card { background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: 10px; padding: 14px; }
.nf-card-title { margin: 0 0 10px; font-size: 18px; }
.nf-grid { display: grid; gap: 14px; }
.nf-grid-2 { grid-template-columns: 1fr 1fr; }
.nf-inline, .nf-inline-form, .nf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nf-form-grid { display: grid; gap: 8px; }
.nf-label { font-size: 12px; color: #4d6470; }
.nf-input { width: 100%; border: 1px solid var(--nf-border); border-radius: 8px; padding: 8px 9px; background: #fff; }
.nf-btn { border: 1px solid transparent; border-radius: 8px; padding: 8px 11px; cursor: pointer; text-decoration: none; display: inline-block; }
.nf-btn-primary { background: var(--nf-primary); color: #fff; }
.nf-btn-secondary { background: #f8fbe9; color: var(--nf-secondary); border-color: #b7cb7f; }
.nf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nf-table th, .nf-table td { border-bottom: 1px solid var(--nf-border); padding: 7px; vertical-align: top; }
.nf-badge { display: inline-block; border-radius: 999px; padding: 3px 8px; font-size: 12px; color: #fff; }
.badge-neutral { background: #4e6347; }
.badge-warning { background: var(--nf-warning); }
.badge-danger, .badge-critical { background: var(--nf-danger); }
.nf-alert { border: 1px solid #bcd38a; background: #f5fae8; border-radius: 8px; padding: 8px; }
.nf-alert-danger { border-color: #e4b4b4; background: #ffecec; }
.nf-small { font-size: 11px; color: #53654d; }
.nf-help { font-size: 12px; color: #475c40; }
.nf-login-card { max-width: 440px; margin: 80px auto; background: #fff; border: 1px solid var(--nf-border); border-radius: 10px; padding: 16px; }
.nf-tab { text-decoration: none; padding: 6px 10px; border: 1px solid var(--nf-border); border-radius: 8px; color: #32452d; }
.nf-tab.active { background: #ecf6c6; border-color: #cee44a; }
.nf-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); justify-content: center; align-items: center; z-index: 20; }
/* Dialog modals are hidden by default and shown only when [open] is set by showModal(). */
dialog.nf-modal { display: none; }
dialog.nf-modal[open] { display: flex; }
.nf-modal-card { width: min(620px, 96vw); background: #fff; border-radius: 10px; border: 1px solid var(--nf-border); padding: 14px; }
.gantt-table td { width: 9%; height: 24px; }
.gantt-cell-active { background: #cee44a; }
.nf-sidebar-collapsed .nf-layout { grid-template-columns: 1fr; }
.nf-sidebar-collapsed .nf-sidebar { display: none; }

/* Compact mode for inline planning table */
.planning-inline-card { padding: 10px; }
.planning-inline-card .nf-card-title { margin-bottom: 6px; font-size: 16px; }
.planning-inline-table { font-size: 12px; }
.planning-inline-table th,
.planning-inline-table td { padding: 4px 5px; line-height: 1.15; }
.planning-inline-table .nf-input {
  padding: 4px 6px;
  min-height: 28px;
  font-size: 12px;
  border-radius: 6px;
}
.planning-inline-table .nf-btn { padding: 5px 8px; font-size: 12px; }
.planning-inline-table th:last-child,
.planning-inline-table td:last-child { white-space: nowrap; width: 1%; }

.risk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.risk-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.rida-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.risk-kpi {
  border: 1px solid var(--nf-border);
  border-radius: 8px;
  background: #f8fbe9;
  padding: 9px 10px;
}
.risk-kpi-label {
  display: block;
  font-size: 12px;
  color: #4f6349;
}
.risk-kpi-value {
  display: block;
  margin-top: 3px;
  font-size: 22px;
  font-weight: 700;
  color: #132f13;
}
.risk-table td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.risk-title {
  font-weight: 600;
}
.badge-rida-info { background: #9a7a00; }
.badge-rida-decision { background: #45603e; }
.badge-rida-action { background: #132f13; }
.risk-modal-card {
  width: min(860px, 96vw);
  max-height: 90vh;
  overflow: auto;
}
.risk-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.risk-col-span-2 {
  grid-column: span 2;
}
.risk-actions {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 900px) {
  .nf-layout { grid-template-columns: 1fr; }
  .nf-sidebar { display: none; }
  .nf-sidebar-collapsed .nf-sidebar { display: none; }
  .nf-grid-2 { grid-template-columns: 1fr; }
  .risk-summary, .rida-summary { grid-template-columns: 1fr; }
  .risk-form-grid { grid-template-columns: 1fr; }
  .risk-col-span-2, .risk-actions { grid-column: span 1; }
}