:root{
  --ns-blue:#1c2240;
  --ns-orange:#ff4623;
  --ns-grey:#dfdfdf;
  --ns-ink:#1b1b1b;
  --ns-ink-60:#5b5b5b;
  --ns-row:#fafafa;
  --ns-row-alt:#f2f2f2;
  --ns-ok:#1e9f6e;
  --ns-warn:#cc8a00;
}

/* ---------- Stats ---------- */
.ns-logbook-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:12px 0 18px;
}
.ns-stat{background:var(--ns-row); border:1px solid var(--ns-grey); border-radius:10px; padding:12px; text-align:center}
.ns-stat strong{display:block; font-size:1.35rem; color:var(--ns-blue)}
.ns-stat span{color:var(--ns-ink-60); font-size:.9rem}

/* ---------- Logbook Table (fixed) ---------- */
.ns-logbook{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;              /* space between “card” rows */
  overflow:hidden;
  border:1px solid var(--ns-grey);
  border-radius:12px;
}

/* Gradient header */
.ns-logbook thead tr{
  background:linear-gradient(90deg,#06b6d4 0%, #2563eb 100%);
  color:#fff;
}
.ns-logbook thead th{
  color:#fff;
  border:none;
  padding:14px 12px;
  text-align:left;
}

/* Base cell styling (no fixed background here) */
.ns-logbook tbody td{
  padding:12px 14px;
  border:1px solid var(--ns-grey);
  color:var(--ns-ink);
  background:transparent;
  border-top-width:1px;
}

/* Zebra — apply to CELLS of the main rows */
.ns-logbook tbody tr.ns-row:nth-child(odd)  > td { background:var(--ns-row); }
.ns-logbook tbody tr.ns-row:nth-child(even) > td { background:var(--ns-row-alt); }

/* Rounded ends to make each main row look like a card */
.ns-logbook tbody tr.ns-row > td:first-child{ border-radius:12px 0 0 12px; }
.ns-logbook tbody tr.ns-row > td:last-child { border-radius:0 12px 12px 0; }

/* Hover outline + pointer */
.ns-logbook tbody tr.ns-row{ cursor:pointer; }
.ns-logbook tbody tr.ns-row:hover > td{
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  border-color:#dbeafe;
}

/* Left “ribbon” bars */
.ns-logbook tbody tr.ns-row > td:first-child{ position:relative; }
.ns-logbook tbody tr.ns-row.ns-depth-18 > td:first-child{ box-shadow:inset 4px 0 0 #0ea5e9; }
.ns-logbook tbody tr.ns-row.ns-depth-30 > td:first-child{ box-shadow:inset 4px 0 0 #2563eb; }
.ns-logbook tbody tr.ns-row.ns-training > td:first-child{ box-shadow:inset 4px 0 0 #f59e0b; }

/* Details row: transparent/flush so it sits under the “card” */
.ns-logbook tbody tr.ns-details > td{
  background:transparent !important;
  border:none !important;
  padding:0 0 8px !important;
}

/* Detail card stays as-is */
.ns-detail-card{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
}

/* Status pills (unchanged) */
.ns-pill{
  display:inline-block; padding:.25rem .55rem; border-radius:8px; font-size:.86rem; font-weight:700;
  background:#eee; color:#333;
}
.ns-pill--approved{ background:#e8f7f0; color:var(--ns-ok); }
.ns-pill--pending { background:#fff5e0; color:var(--ns-warn); }
.ns-pill--rejected{ background:#fef2f2; color:#b91c1c; }

/* Dark mode tweaks */
@media (prefers-color-scheme: dark){
  .ns-logbook { border-color:#374151; }
  .ns-logbook tbody tr.ns-row:nth-child(odd)  > td{ background:#0f172a; color:#e5e7eb; border-color:#374151; }
  .ns-logbook tbody tr.ns-row:nth-child(even) > td{ background:#111827; color:#e5e7eb; border-color:#374151; }
  .ns-detail-card{ background:#0b1220; border-color:#1f2937; }
  .ns-pill--approved{ background:#064e3b; color:#d1fae5; }
  .ns-pill--pending { background:#78350f; color:#fde68a; }
  .ns-pill--rejected{ background:#7f1d1d; color:#fecaca; }
}

/* ---------- Insights ---------- */
.ns-insights{
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#f8fafc;
  padding:0;
  overflow:hidden;             /* keep contents inside */
  margin:12px 0 18px;
  max-width:100%;
  box-sizing:border-box;       /* include padding/border in width */
}
.ns-insights-bar{
  background:linear-gradient(90deg,#06b6d4 0%, #2563eb 100%);
  color:#fff;
  padding:14px 16px;
  font-weight:800;
  border-radius:16px 16px 0 0;
}

/* Responsive Insights grid */
.ns-insights-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(108px, 1fr)); /* tighter min width */
  gap:12px;
  padding:14px;
  max-width:100%;
  box-sizing:border-box;
}
.ns-insights-grid > div{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  text-align:left;
  min-width:0;                 /* prevent item overflow */
}
.ns-insights-grid .k{ font-weight:800; font-size:22px; line-height:1.1; color:#111827; }
.ns-insights-grid .l{ margin-top:6px; font-size:12px; color:#6b7280; white-space:normal; }

/* Media tweaks (optional; grid already self-fits) */
@media (max-width: 768px){
  .ns-insights-grid{ gap:10px; padding:12px; }
}
@media (max-width: 420px){
  .ns-insights-grid{ gap:8px; padding:10px 12px; }
}

/* --- FINAL OVERRIDE: keep insights grid inside viewport on all devices --- */
.ns-insights { max-width: 100%; overflow: hidden; box-sizing: border-box; }
.ns-insights-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)) !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  max-width: 100% !important;
  box-sizing: border-box !important; /* include padding in width calc */
}
.ns-insights-grid > div{
  min-width: 0 !important;  /* allow children to shrink */
}