/* Tenex-Proj UI revamp: design tokens + reusable primitives.
   Kept class compatibility with existing PHP templates to avoid business regressions. */

:root {
  --ds-bg: #f3f6fb;
  --ds-bg-soft: #edf2f8;
  --ds-surface: #ffffff;
  --ds-surface-muted: #f8fafd;
  --ds-border: #dde4ee;
  --ds-border-strong: #c9d4e3;
  --ds-text: #0f1a2b;
  --ds-text-muted: #4f6077;
  --ds-accent: #2f6feb;
  --ds-accent-soft: #e9f0ff;
  --ds-success: #0f8f59;
  --ds-warning: #b7791f;
  --ds-danger: #c23a3a;
  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ds-shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08);
  --ds-radius-lg: 16px;
  --ds-radius-md: 12px;
  --ds-radius-sm: 10px;
  --ds-ring: 0 0 0 3px rgba(47, 111, 235, 0.2);
}

body.nf-body {
  color: var(--ds-text);
  background:
    radial-gradient(680px 260px at -14% -12%, #e6eefc, transparent 65%),
    radial-gradient(820px 300px at 112% -18%, #eaf0fb, transparent 63%),
    var(--ds-bg);
}

.nf-layout {
  min-height: 100dvh;
  grid-template-columns: 260px minmax(0, 1fr) !important;
}

.nf-sidebar {
  background: color-mix(in srgb, var(--ds-surface) 88%, #e9eff9 12%);
  border-right: 1px solid var(--ds-border);
  padding: 14px 12px;
}

.nf-brand {
  margin: 2px 6px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(145deg, #ffffff, #f3f8ff);
  color: #1d2e47;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.nf-nav-item {
  border-radius: 10px;
  border: 1px solid transparent;
  margin: 0 6px 6px;
  padding: 10px 11px;
  color: var(--ds-text-muted);
}

.nf-nav-item:hover {
  border-color: var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-text);
}

.nf-nav-item.active {
  color: #143060;
  background: linear-gradient(145deg, #ffffff, #edf3ff);
  border-color: #cfdbf6;
  box-shadow: var(--ds-shadow-sm);
}

.nf-main {
  background: transparent;
}

.nf-topbar {
  margin: 10px 14px 0;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ds-surface) 94%, transparent);
  box-shadow: var(--ds-shadow-sm);
  padding: 6px 10px;
  min-height: 58px;
}

.nf-sidebar-backdrop {
  display: none;
}

.nf-title {
  font-size: 0.85rem;
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nf-content {
  padding: 16px 14px 18px;
}

.nf-card,
.rt-card,
.nf-modal-card {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  background: linear-gradient(180deg, #ffffff, #fbfcff 45%);
  box-shadow: var(--ds-shadow-sm);
}

.nf-card + .nf-card,
.rt-card + .rt-card {
  margin-top: 14px;
}

.nf-card-title,
.rt-title {
  color: #1a2d47;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.risk-toolbar,
.rt-toolbar {
  border-bottom: 1px solid var(--ds-border);
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.nf-help,
.nf-small,
.rt-muted {
  color: var(--ds-text-muted);
}

.nf-alert {
  border-radius: 12px;
  border: 1px solid #cde2ce;
  background: #f3fbf4;
  color: #155836;
  padding: 10px 12px;
  box-shadow: var(--ds-shadow-sm);
}

.nf-alert.nf-alert-danger {
  border-color: #efc9c9;
  background: #fff2f2;
  color: #8c2d2d;
}

.nf-tab,
.rt-tab {
  border-radius: 999px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-muted);
}

.nf-tab.active,
.rt-tab.active {
  border-color: #c5d6fb;
  background: var(--ds-accent-soft);
  color: #1847a5;
}

.nf-btn {
  border-radius: 10px;
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-surface);
  color: var(--ds-text);
  min-height: 34px;
  padding: 0 12px;
  font-weight: 600;
}

.nf-btn:hover {
  background: #f2f6fc;
  border-color: #bcc9dd;
}

.nf-btn.nf-btn-primary {
  border-color: #c8d8fb;
  background: var(--ds-accent-soft);
  color: #1e4fab;
}

.nf-btn.nf-btn-primary:hover {
  background: #dde9ff;
  border-color: #adc5f6;
}

.nf-btn:focus-visible,
.nf-input:focus-visible,
.nf-tab:focus-visible {
  outline: none;
  box-shadow: var(--ds-ring);
}

.nf-input,
select.nf-input,
textarea.nf-input {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-text);
}

.nf-input::placeholder,
textarea.nf-input::placeholder {
  color: #8da0ba;
}

.nf-label {
  color: #52647d;
  font-weight: 600;
}

.nf-form-grid {
  gap: 10px;
}

.nf-table,
.rt-table {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--ds-border);
  overflow: hidden;
  background: var(--ds-surface);
}

.nf-table thead th,
.rt-table thead th {
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #566884;
  background: #f5f8fd;
  border-bottom: 1px solid var(--ds-border);
}

.nf-table td,
.rt-table td {
  color: #213045;
  border-bottom: 1px solid #e8edf5;
}

.nf-table tbody tr:hover td,
.rt-table tbody tr:hover td {
  background: #f8fbff;
}

.nf-badge,
.badge-neutral,
.badge-warning,
.badge-danger,
.badge-critical,
.badge-rida-info,
.badge-rida-decision,
.badge-rida-action {
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 9px;
}

.badge-neutral {
  background: #5f6f84;
}

.badge-warning,
.badge-rida-info {
  background: #b7791f;
}

.badge-danger,
.badge-critical {
  background: #bf3a3a;
}

.badge-rida-action,
.badge-rida-decision {
  background: #375d99;
}

.risk-summary,
.rida-summary,
.rt-kpi-grid {
  gap: 10px;
  margin-top: 12px;
}

.risk-kpi,
.rt-kpi {
  background: var(--ds-surface-muted);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.risk-kpi-label,
.rt-kpi-label {
  color: #5c6d84;
}

.risk-kpi-value,
.rt-kpi-value {
  color: #172b47;
}

.nf-modal {
  background: rgba(10, 22, 40, 0.5);
  backdrop-filter: blur(2px);
}

.nf-modal-card,
.risk-modal-card {
  border-radius: 16px;
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-md);
}

.nf-login-card {
  max-width: 470px;
  margin: min(9vh, 90px) auto;
  border-radius: 18px;
  border: 1px solid var(--ds-border);
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  box-shadow: var(--ds-shadow-md);
  padding: 20px;
}

.nf-login-card .nf-title {
  margin: 0 0 6px;
  font-size: 1.38rem;
  letter-spacing: -0.02em;
  color: #1a2d47;
  text-transform: none;
}

.nf-ai-panel {
  border-radius: 16px;
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-sm);
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.nf-ai-head {
  border-bottom: 1px solid var(--ds-border);
  background: #f5f8ff;
}

.nf-ai-subtitle {
  color: #5c6f88;
}

.nf-ai-messages {
  background: #f7fafe;
}

.nf-ai-msg-assistant {
  border-radius: 12px;
  border-color: #dbe6f8;
}

.nf-ai-msg-user {
  border-radius: 12px;
  background: #eaf1ff;
  border-color: #ccdafe;
  color: #223a68;
}

/* Standardized utility components for progressive migration. */
.app-layout {
  min-height: 100dvh;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.kpi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.data-table {
  border-radius: 14px;
  border: 1px solid var(--ds-border);
  overflow: auto;
  background: var(--ds-surface);
}

.filters-bar {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--ds-border);
}

.empty-state {
  border: 1px dashed var(--ds-border-strong);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  color: var(--ds-text-muted);
  background: #f8fbff;
}

.loading-state {
  border-radius: 12px;
  height: 110px;
  background: linear-gradient(90deg, #edf2fa 25%, #f7fafe 50%, #edf2fa 75%);
  background-size: 220% 100%;
  animation: ds-shimmer 1.4s linear infinite;
}

.form-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-surface-muted);
}

.dialog-shell {
  border-radius: 16px;
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-md);
  background: var(--ds-surface);
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.nf-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.nf-inline-actions .nf-btn {
  white-space: nowrap;
}

.nf-table-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.nf-icon-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
}

.nf-icon-btn .nf-icon {
  width: 16px;
  height: 16px;
}

.nf-btn-danger-soft {
  border-color: #e7bdbd;
  color: #9d3030;
  background: #fff5f5;
}

.nf-btn-danger-soft:hover {
  border-color: #dd9d9d;
  background: #ffe8e8;
  color: #8d2424;
}

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: grid;
  gap: 8px;
}

.toast {
  max-width: 320px;
  border-radius: 12px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-md);
  padding: 10px 12px;
  color: var(--ds-text);
}

@keyframes ds-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 1180px) {
  .nf-layout {
    grid-template-columns: 1fr !important;
  }

  .nf-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, 320px);
    max-width: 320px;
    z-index: 1300;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 0 22px 38px rgba(8, 20, 38, 0.34);
    display: block;
    pointer-events: none;
  }

  body.nf-sidebar-open .nf-sidebar {
    transform: translateX(0);
    pointer-events: auto;
  }

  .nf-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1200;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(9, 19, 34, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  body.nf-sidebar-open .nf-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .nf-topbar {
    margin: 10px 10px 0;
  }

  .nf-content {
    padding: 12px 10px 16px;
  }
}

@media (max-width: 760px) {
  .nf-workspace {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .nf-topbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
  }

  .nf-user-menu-wrap {
    margin-left: 0;
  }

  .nf-title {
    grid-column: 1 / -1;
  }

  .risk-form-grid {
    grid-template-columns: 1fr;
  }

  .risk-col-span-2,
  .risk-actions {
    grid-column: span 1;
  }
}

body.nf-theme-dark {
  --ds-bg: #0b1220;
  --ds-bg-soft: #101a2d;
  --ds-surface: #111c30;
  --ds-surface-muted: #0f192b;
  --ds-border: #2d3d57;
  --ds-border-strong: #3a4f72;
  --ds-text: #e7eefc;
  --ds-text-muted: #9eb0cd;
  --ds-accent: #7aa7ff;
  --ds-accent-soft: #1b2a46;
}

body.nf-theme-dark .nf-body,
body.nf-theme-dark {
  color: var(--ds-text);
  background:
    radial-gradient(700px 280px at -8% -18%, #1a2f52, transparent 66%),
    radial-gradient(900px 340px at 106% -24%, #111f38, transparent 62%),
    #090f1b;
}

body.nf-theme-dark .nf-card,
body.nf-theme-dark .rt-card,
body.nf-theme-dark .nf-modal-card,
body.nf-theme-dark .nf-topbar,
body.nf-theme-dark .nf-sidebar,
body.nf-theme-dark .nf-ai-panel,
body.nf-theme-dark .nf-login-card {
  background: linear-gradient(180deg, #101b2f, #0d1628);
  border-color: var(--ds-border);
  color: var(--ds-text);
}

body.nf-theme-dark .nf-brand {
  background: linear-gradient(145deg, #13233d, #0f1a30);
  border-color: var(--ds-border);
  color: #e4eeff;
}

body.nf-theme-dark .nf-nav-item.active {
  background: #1a2b49;
  border-color: #35507b;
  color: #e9f0ff;
}

body.nf-theme-dark .nf-btn {
  background: #122038;
  border-color: #334d74;
  color: #dde8fb;
}

body.nf-theme-dark .nf-btn:hover {
  background: #172844;
}

body.nf-theme-dark .nf-btn.nf-btn-primary {
  background: #1f3152;
  border-color: #4f73b1;
  color: #dbe8ff;
}

body.nf-theme-dark .nf-btn-danger-soft {
  background: #3a1f2a;
  border-color: #704055;
  color: #ffccd6;
}

body.nf-theme-dark .nf-btn-danger-soft:hover {
  background: #4a2431;
  border-color: #8b4a63;
  color: #ffe0e6;
}

body.nf-theme-dark .nf-input,
body.nf-theme-dark select.nf-input,
body.nf-theme-dark textarea.nf-input {
  background: #0e192c;
  border-color: #2d4264;
  color: #e3ebfa;
}

body.nf-theme-dark .nf-table thead th,
body.nf-theme-dark .rt-table thead th {
  background: #14243f;
  color: #b5c6e1;
  border-bottom-color: #2d4264;
}

body.nf-theme-dark .nf-table td,
body.nf-theme-dark .rt-table td {
  border-bottom-color: #223450;
  color: #dce7f9;
}

body.nf-theme-dark .nf-table tbody tr:hover td,
body.nf-theme-dark .rt-table tbody tr:hover td {
  background: #13253f;
}

body.nf-theme-dark .nf-alert {
  background: #16322b;
  border-color: #2e5d50;
  color: #bde8d6;
}

body.nf-theme-dark .nf-alert.nf-alert-danger {
  background: #3f1b24;
  border-color: #6f2d3c;
  color: #f4c7d0;
}