/* NiagaSuite UI - the shared admin design (slice 13.15, v0.286.0).
   Loaded after admin.css. It sets the colours, type, shape and spacing once, builds the side-menu shell, and gives every existing
   component (tables, forms, buttons, badges, alerts, cards, dropdowns) the same softer look. No class name is renamed or removed, so
   every plugin page picks the design up without being edited. Light theme only; a dark theme is on the KIV list because plugin pages still
   carry hard-coded white backgrounds. */

/* ---- tokens ------------------------------------------------------------------------------------------------------------- */
:root {
  --niaga-bg: #f6f7f9;
  --niaga-surface: #ffffff;
  --niaga-surface-2: #f4f6f8;
  --niaga-border: #e4e7ec;
  --niaga-text: #101828;
  --niaga-muted: #667085;
  --niaga-primary: #1f6f5c;
  --niaga-primary-dark: #164f42;
  --niaga-primary-soft: #e8f3ef;
  --niaga-error-bg: #fef3f2;
  --niaga-error-text: #b42318;
  --niaga-ok-bg: #ecfdf3;
  --niaga-ok-text: #067647;
  --niaga-warn-bg: #fffaeb;
  --niaga-warn-text: #93370d;
  --niaga-radius: 10px;
  --niaga-radius-sm: 8px;
  --niaga-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --niaga-shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --niaga-ring: 0 0 0 3px rgba(31, 111, 92, 0.18);
  --niaga-side-w: 272px;
  --niaga-top-h: 60px;
  --niaga-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { font-family: var(--niaga-font); font-size: 15px; line-height: 1.5; color: var(--niaga-text); background: var(--niaga-bg); -webkit-font-smoothing: antialiased; }
a { color: var(--niaga-primary); }
h1, h2, h3 { letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--niaga-primary); outline-offset: 2px; }

/* ---- shell: side menu + top bar + content ------------------------------------------------------------------------------- */
.niaga-app-shell { flex-direction: row; align-items: stretch; }
.niaga-side {
  width: var(--niaga-side-w); flex: 0 0 var(--niaga-side-w);
  position: sticky; top: 0; align-self: flex-start; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--niaga-surface); border-right: 1px solid var(--niaga-border);
}
.niaga-side-brand { display: flex; align-items: center; gap: 0.65rem; padding: 0 1.1rem; height: var(--niaga-top-h); flex: 0 0 auto; color: var(--niaga-text); text-decoration: none; border-bottom: 1px solid var(--niaga-border); }
.niaga-side-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--niaga-primary); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.niaga-side-name { font-weight: 700; font-size: 1.02rem; display: flex; flex-direction: column; line-height: 1.15; }
.niaga-side .niaga-nav-version { margin: 0; font-size: 0.68rem; font-weight: 500; color: var(--niaga-muted); }
.niaga-side-search { position: relative; padding: 0.8rem 0.9rem 0.4rem; flex: 0 0 auto; }
.niaga-side-search input {
  width: 100%; padding: 0.5rem 2rem 0.5rem 0.75rem; border: 1px solid var(--niaga-border); border-radius: var(--niaga-radius-sm);
  background: var(--niaga-surface-2); font: inherit; font-size: 0.88rem; color: var(--niaga-text);
}
.niaga-side-search input:focus { outline: none; background: #fff; border-color: var(--niaga-primary); box-shadow: var(--niaga-ring); }
.niaga-side-search kbd {
  position: absolute; right: 1.35rem; top: 50%; transform: translateY(-30%); font: inherit; font-size: 0.72rem; color: var(--niaga-muted);
  border: 1px solid var(--niaga-border); border-radius: 5px; padding: 0 0.35rem; background: #fff; pointer-events: none;
}
.niaga-sidenav { position: relative; flex: 1 1 auto; overflow-y: auto; padding: 0.4rem 0.6rem 1.5rem; display: flex; flex-direction: column; gap: 2px; }
.niaga-side-link, .niaga-side-group > summary {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.65rem; border-radius: var(--niaga-radius-sm);
  color: #344054; font-size: 0.9rem; font-weight: 500; text-decoration: none; cursor: pointer; list-style: none;
}
.niaga-side-group > summary::-webkit-details-marker { display: none; }
.niaga-side-link:hover, .niaga-side-group > summary:hover { background: var(--niaga-surface-2); color: var(--niaga-text); }
.niaga-side-link.is-active { background: var(--niaga-primary-soft); color: var(--niaga-primary-dark); font-weight: 600; }
.niaga-side-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--niaga-muted); }
.niaga-side-link.is-active .niaga-side-icon, .niaga-side-group[open] > summary .niaga-side-icon { color: var(--niaga-primary); }
.niaga-side-group > summary span { flex: 1 1 auto; }
.niaga-side-chev { width: 15px; height: 15px; color: #98a2b3; transition: transform 0.15s; }
.niaga-side-group[open] > summary .niaga-side-chev { transform: rotate(90deg); }
.niaga-side-group[open] > summary { color: var(--niaga-text); }
.niaga-side-items { margin: 2px 0 6px 1.2rem; padding-left: 0.6rem; border-left: 1px solid var(--niaga-border); display: flex; flex-direction: column; gap: 1px; }
.niaga-side-sub { display: block; padding: 0.38rem 0.65rem; border-radius: 7px; font-size: 0.86rem; color: #475467; text-decoration: none; }
.niaga-side-sub:hover { background: var(--niaga-surface-2); color: var(--niaga-text); }
.niaga-side-sub.is-active { background: var(--niaga-primary-soft); color: var(--niaga-primary-dark); font-weight: 600; }
.niaga-side-none { margin: 0.75rem; font-size: 0.85rem; color: var(--niaga-muted); }
.niaga-side-backdrop { display: none; }

.niaga-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.niaga-topbar {
  position: sticky; top: 0; z-index: 30; height: var(--niaga-top-h); display: flex; align-items: center; gap: 0.75rem; padding: 0 1.75rem;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--niaga-border);
}
.niaga-crumbs { flex: 1 1 auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; min-width: 0; overflow: hidden; white-space: nowrap; }
.niaga-crumb-group { color: var(--niaga-muted); }
.niaga-crumb-sep { color: #98a2b3; }
.niaga-crumb-page { font-weight: 600; text-overflow: ellipsis; overflow: hidden; }
.niaga-side-toggle { display: none; background: transparent; color: var(--niaga-text); border: 1px solid var(--niaga-border); padding: 0.4rem; border-radius: var(--niaga-radius-sm); width: 38px; height: 38px; }
.niaga-side-toggle:hover { background: var(--niaga-surface-2); }
.niaga-side-toggle svg { width: 20px; height: 20px; display: block; margin: auto; }
.niaga-nav-user { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; }
.niaga-nav-user a { color: var(--niaga-text); text-decoration: none; }
.niaga-nav-user a:hover { color: var(--niaga-primary); }
.niaga-top-user { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; border-radius: var(--niaga-radius-sm); }
.niaga-top-user:hover { background: var(--niaga-surface-2); }
.niaga-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--niaga-primary-soft); color: var(--niaga-primary-dark); font-weight: 700; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; }
.niaga-top-logout { padding: 0.35rem 0.7rem; border: 1px solid var(--niaga-border); border-radius: var(--niaga-radius-sm); font-weight: 500; background: #fff; }
.niaga-top-logout:hover { background: var(--niaga-surface-2); }
.niaga-notif-toggle { background: transparent; color: var(--niaga-text); border: 1px solid transparent; position: relative; padding: 0.4rem; border-radius: var(--niaga-radius-sm); width: 38px; height: 38px; }
.niaga-notif-toggle:hover { background: var(--niaga-surface-2); color: var(--niaga-primary); }
.niaga-bell { width: 20px; height: 20px; display: block; margin: auto; }
.niaga-notif-count { position: absolute; top: 2px; right: 0; margin: 0; background: var(--niaga-error-text); color: #fff; font-size: 0.66rem; padding: 0 0.35rem; line-height: 1.3; }

.niaga-main { padding: 1.75rem; max-width: 1480px; width: 100%; }
.niaga-main h1 { font-size: 1.65rem; font-weight: 700; margin: 0 0 1.25rem; }
.niaga-main h2 { font-size: 1.15rem; font-weight: 650; }

/* ---- cards, panels, dashboard ------------------------------------------------------------------------------------------- */
.niaga-card, .niaga-overview-panel, .niaga-recent-panel, .niaga-module {
  background: var(--niaga-surface); border: 1px solid var(--niaga-border); border-radius: var(--niaga-radius); box-shadow: var(--niaga-shadow-sm);
}
.niaga-card-label { font-size: 0.74rem; letter-spacing: 0.04em; }
.niaga-card-value { font-size: 1.5rem; font-weight: 700; }
.niaga-dash-section-title { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--niaga-muted); margin: 1.6rem 0 0.75rem; }

.niaga-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.niaga-hero h2 { margin: 0; font-size: 1.5rem; font-weight: 700; }
.niaga-hero p { margin: 0.2rem 0 0; color: var(--niaga-muted); font-size: 0.92rem; }
.niaga-hero .niaga-quick-actions { margin: 0; }

.niaga-quick-actions { gap: 0.6rem; margin-bottom: 1.25rem; }
.niaga-quick-action {
  flex-direction: row; flex: 0 0 auto; min-width: 0; padding: 0.5rem 0.9rem 0.5rem 0.55rem; gap: 0.55rem; border-radius: var(--niaga-radius-sm);
  font-weight: 600; font-size: 0.88rem; box-shadow: var(--niaga-shadow-sm);
}
.niaga-quick-action:hover { border-color: var(--niaga-primary); box-shadow: var(--niaga-shadow-md); }
.niaga-quick-action-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--niaga-primary-soft); }
.niaga-quick-action-icon svg { width: 17px; height: 17px; }

.niaga-kpis { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0.9rem; }
.niaga-kpi {
  position: relative; border: 1px solid var(--niaga-border); border-left: 1px solid var(--niaga-border); border-radius: var(--niaga-radius);
  padding: 1rem 1.1rem; box-shadow: var(--niaga-shadow-sm); text-decoration: none; color: var(--niaga-text);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
a.niaga-kpi:hover { border-color: #c4cbd6; box-shadow: var(--niaga-shadow-md); transform: translateY(-1px); }
.niaga-kpi::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--niaga-primary); }
.niaga-kpi.is-warn::before { background: #f79009; }
.niaga-kpi.is-ok, .niaga-kpi.is-warn { border-left-color: var(--niaga-border); }
.niaga-kpi-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em; color: var(--niaga-muted); padding-right: 1.4rem; }
.niaga-kpi-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.3rem 0 0.15rem; }
.niaga-kpi-sub { font-size: 0.82rem; }
.niaga-kpi-go { position: absolute; top: 0.85rem; right: 0.9rem; width: 16px; height: 16px; color: #98a2b3; }
a.niaga-kpi:hover .niaga-kpi-go { color: var(--niaga-primary); }
.niaga-kpi-flag { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.55rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--niaga-warn-bg); color: var(--niaga-warn-text); }
.niaga-kpi-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f79009; }

.niaga-modules { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 0.9rem; }
.niaga-module { padding: 1.05rem 1.15rem; }
.niaga-module-head h3 { font-size: 1rem; font-weight: 650; }
.niaga-btn-dash { font-size: 0.8rem; font-weight: 600; padding: 0.28rem 0.7rem; border-radius: 999px; background: var(--niaga-primary-soft); color: var(--niaga-primary-dark); text-decoration: none; white-space: nowrap; }
.niaga-btn-dash:hover { background: #d3e9e1; filter: none; }
.niaga-module-group { margin-top: 0.7rem; }
.niaga-fbtn { border-radius: 999px; background: var(--niaga-surface-2); border-color: transparent; color: #344054; font-weight: 500; text-decoration: none; }
.niaga-fbtn:hover { background: var(--niaga-primary-soft); border-color: transparent; color: var(--niaga-primary-dark); }

/* ---- tables ------------------------------------------------------------------------------------------------------------- */
.niaga-table { border-radius: var(--niaga-radius); box-shadow: var(--niaga-shadow-sm); font-size: 0.92rem; }
.niaga-table th { background: var(--niaga-surface-2); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.05em; color: var(--niaga-muted); padding: 0.65rem 0.85rem; }
.niaga-table td { padding: 0.7rem 0.85rem; }
.niaga-table tbody tr:hover td { background: #fafbfc; }
.niaga-table thead tr:first-child th:first-child { border-top-left-radius: var(--niaga-radius); }
.niaga-table thead tr:first-child th:last-child { border-top-right-radius: var(--niaga-radius); }
.niaga-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--niaga-radius); }
.niaga-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--niaga-radius); }

/* ---- forms and buttons -------------------------------------------------------------------------------------------------- */
.niaga-form input[type=text], .niaga-form input[type=email], .niaga-form input[type=password], .niaga-form input[type=number], .niaga-form input[type=date],
.niaga-form input[type=search], .niaga-form input[type=tel], .niaga-form input[type=url], .niaga-form select, .niaga-form textarea,
.niaga-main input[type=text], .niaga-main input[type=search], .niaga-main input[type=number], .niaga-main input[type=date], .niaga-main select, .niaga-main textarea {
  border: 1px solid #d0d5dd; border-radius: var(--niaga-radius-sm); background: #fff; font: inherit; font-size: 0.93rem; color: var(--niaga-text);
  padding: 0.5rem 0.7rem; box-shadow: var(--niaga-shadow-sm);
}
.niaga-form input:focus, .niaga-form select:focus, .niaga-form textarea:focus,
.niaga-main input[type=text]:focus, .niaga-main input[type=search]:focus, .niaga-main input[type=number]:focus, .niaga-main input[type=date]:focus, .niaga-main select:focus, .niaga-main textarea:focus {
  outline: none; border-color: var(--niaga-primary); box-shadow: var(--niaga-ring);
}
.niaga-form label { font-weight: 500; color: #344054; }
.niaga-form fieldset { border-radius: var(--niaga-radius); }

button, .niaga-btn { border-radius: var(--niaga-radius-sm); font: inherit; font-size: 0.92rem; font-weight: 600; padding: 0.55rem 1rem; box-shadow: var(--niaga-shadow-sm); transition: background 0.12s, border-color 0.12s; }
.niaga-btn-secondary { background: #fff; color: #344054; border: 1px solid #d0d5dd; }
.niaga-btn-secondary:hover { background: var(--niaga-surface-2); }
.niaga-btn-danger { background: #fff; color: var(--niaga-error-text); border: 1px solid #fda29b; }
.niaga-btn-danger:hover { background: var(--niaga-error-bg); }
.niaga-link-btn { box-shadow: none; font-weight: 500; }
.niaga-side-toggle, .niaga-notif-toggle, .niaga-password-toggle { box-shadow: none; }

/* ---- badges, alerts ----------------------------------------------------------------------------------------------------- */
.niaga-badge { border-radius: 999px; padding: 0.12rem 0.6rem; font-weight: 600; font-size: 0.72rem; }
.niaga-alert { border-radius: var(--niaga-radius-sm); border: 1px solid transparent; padding: 0.7rem 1rem; }
.niaga-alert-error { border-color: #fecdca; }
.niaga-alert-ok { border-color: #abefc6; }
.niaga-alert-warning { border-color: #fedf89; }

/* ---- dropdowns and notifications ---------------------------------------------------------------------------------------- */
.niaga-dropdown-menu { border-radius: var(--niaga-radius); border: 1px solid var(--niaga-border); box-shadow: var(--niaga-shadow-md); }
.niaga-dropdown-menu a, .niaga-dropdown-menu button { border-radius: 6px; }
.niaga-notif-menu { right: 0; left: auto; }

/* ---- small screens: the menu slides in --------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .niaga-topbar { padding: 0 1rem; }
  .niaga-main { padding: 1.25rem 1rem; }
  .niaga-top-name { display: none; }
  .js .niaga-side-toggle { display: inline-flex; }
  .js .niaga-side {
    position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; transform: translateX(-102%); transition: transform 0.2s ease; box-shadow: var(--niaga-shadow-md); width: min(86vw, var(--niaga-side-w));
  }
  .js body.is-side-open .niaga-side { transform: none; }
  .js .niaga-side-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(16, 24, 40, 0.45); }
  .js body.is-side-open .niaga-side-backdrop { display: block; }
  /* Without JavaScript the menu cannot open and close, so it stacks above the page instead. */
  html:not(.js) .niaga-app-shell { flex-direction: column; }
  html:not(.js) .niaga-side { position: static; width: 100%; flex-basis: auto; height: auto; max-height: 55vh; border-right: 0; border-bottom: 1px solid var(--niaga-border); }
}
@media (max-width: 640px) {
  .niaga-crumb-group, .niaga-crumb-sep { display: none; }
  .niaga-main h1 { font-size: 1.4rem; }
  .niaga-hero h2 { font-size: 1.3rem; }
  .niaga-quick-action { flex: 1 1 calc(50% - 0.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .niaga-side, .niaga-kpi, .niaga-side-chev { transition: none; }
}
@media print {
  .niaga-side, .niaga-topbar, .niaga-side-backdrop { display: none !important; }
  .niaga-main { padding: 0; max-width: none; }
}

/* The home page opens with its own greeting, so the page title stays for screen readers and the browser tab only. */
.niaga-page-home .niaga-main > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.niaga-page-home .niaga-hero { margin-top: -0.25rem; }

/* Uploaded company logo (v0.286.0): shown as-is, not on a coloured tile */
img.niaga-brand-logo { background: none; object-fit: contain; }
img.niaga-side-mark.niaga-brand-logo { width: auto; max-width: 150px; height: 34px; border-radius: 4px; }
img.niaga-auth-mark.niaga-brand-logo { width: auto; max-width: 180px; height: 48px; border-radius: 4px; }
.niaga-brand-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.niaga-brand-row input[type=number] { width: 5.2rem; }
.niaga-brand-row input[type=color] { width: 3rem; height: 2.4rem; padding: 2px; }
.niaga-brand-swatch { width: 2.4rem; height: 2.4rem; border-radius: 8px; border: 1px solid var(--niaga-border); }
.niaga-brand-preview { max-height: 56px; max-width: 220px; border: 1px solid var(--niaga-border); border-radius: 6px; padding: 4px; background: #fff; }
.niaga-brand-preview-sm { max-height: 32px; }