/* =====================================================================
   iGEAR360 - Integrated Governance, Excellence, Analytics & Reporting
   J.H. Cerilles State College.
   ===================================================================== */

:root {
  /* Tailwind v4 palette (sRGB equivalents of its oklch values) */
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cad5e2;
  --slate-400: #90a1b9; --slate-500: #62748e; --slate-600: #45556c; --slate-700: #314158;
  --slate-800: #1d293d; --slate-900: #0f172b;
  --rose-50: #fff1f2; --rose-100: #ffe4e6; --rose-200: #ffccd3; --rose-300: #ffa1ad; --rose-700: #c70036;
  --emerald-50: #ecfdf5; --emerald-300: #5ee9b5; --emerald-400: #00d492; --emerald-500: #00bc7d;
  --emerald-600: #009966; --emerald-700: #007a55; --emerald-900: #004e3b;
  --amber-500: #fe9a00; --amber-700: #bb4d00;
  --ink-strong: #102039;
}

/* ---------- Layout helpers ---------- */
.min-w-0 { min-width: 0; }
.ig-mt-4 { margin-top: 1rem; }
.ig-mt-5 { margin-top: 1.25rem; }
.ig-mb-5 { margin-bottom: 1.25rem; }
.text-rose-300 { color: var(--rose-300); }
.ig-page { padding-bottom: 2rem; }
.ig-stack-6 > * + * { margin-top: 1.5rem; }
.ig-stack-5 > * + * { margin-top: 1.25rem; }
.ig-stack-3 > * + * { margin-top: .75rem; }
.ig-stack-2-5 > * + * { margin-top: .625rem; }
.ig-stack-2 > * + * { margin-top: .5rem; }

.ig-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.ig-gap-2 { gap: .5rem; } .ig-gap-3 { gap: .75rem; } .ig-gap-4 { gap: 1rem; } .ig-gap-5 { gap: 1.25rem; }
.ig-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .ig-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ig-sm-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
  .ig-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .ig-xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ig-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ig-xl-span-2 { grid-column: span 2 / span 2; }
}

.app-nav-overlay:not(.is-visible) { display: none !important; }

/* ---------- Sidebar collapse (desktop only, like Tailwind lg:hidden) ---------- */
.ig-when-collapsed { display: none; }
.app-sidebar.is-collapsed .ig-when-collapsed { display: block; }
.app-sidebar.is-collapsed .ig-when-expanded { display: none; }
@media (min-width: 1024px) {
  .app-sidebar.is-collapsed .ig-collapse-hide { display: none; }
}
/* Before JS runs, honour the saved collapsed state without a flash */
@media (min-width: 1024px) {
  html.ig-sidebar-collapsed .app-sidebar { width: 4.75rem; }
  html.ig-sidebar-collapsed .app-sidebar .ig-collapse-hide { display: none; }
  html.ig-sidebar-collapsed .app-sidebar .app-sidebar__link { justify-content: center; padding-inline: 0; }
}

/* ---------- User menu (UserMenu.jsx) ---------- */
.ig-user-menu { width: 100%; padding: 1rem; }
.ig-user-menu__head { display: flex; align-items: center; gap: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--slate-100); }
.ig-user-menu__avatar { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: .75rem; background: #0b1930; color: white; font-size: .75rem; line-height: 1.333333; font-weight: 700; }
.ig-user-menu__head h1 { color: #111827; font-size: .875rem; line-height: 1.428571; font-weight: 600; }
.ig-user-menu__head p { color: var(--slate-500); font-size: .75rem; line-height: 1.333333; }
.ig-user-menu__items { margin-top: .75rem; }
.ig-user-menu__items > * + * { margin-top: .25rem; }
.ig-user-menu__item { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: .5rem; color: #111827; font-size: .875rem; line-height: 1.428571; text-align: left; }
.ig-user-menu__item:hover { background: var(--slate-100); color: #111827; }
.ig-user-menu__item.is-danger { color: #9f1239; font-weight: 600; }
.ig-user-menu__item.is-danger:hover { background: #fff1f2; }

/* ---------- Page heroes ---------- */
.ig-hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
  padding: 1.5rem 1.25rem; border-radius: 22px; background: #0b1930; color: white;
  box-shadow: 0 18px 45px rgba(9,24,48,.15);
}
@media (min-width: 640px) { .ig-hero { padding-inline: 1.75rem; } }
@media (min-width: 768px) { .ig-hero { flex-direction: row; align-items: flex-end; } }
.ig-hero__ring { pointer-events: none; position: absolute; right: -4rem; top: -7rem; width: 18rem; height: 18rem; border: 44px solid rgba(255,255,255,.025); border-radius: 9999px; }

/* Module header (UniversityAnalytics.jsx). It is a <header>, and the global
   `header { padding-inline: max(.75rem, ...) }` rule wins over its padding
   utilities in the original, so horizontal padding is .75rem there too. */
.ig-module-hero { position: relative; overflow: hidden; padding-block: 1.5rem; border-radius: 22px; background: #0b1930; color: white; box-shadow: 0 18px 45px rgba(9,24,48,.15); }
@media (min-width: 768px) { .ig-module-hero { display: flex; align-items: flex-end; justify-content: space-between; } }
.ig-module-hero__ring { pointer-events: none; position: absolute; right: -3rem; top: -6rem; width: 16rem; height: 16rem; border: 40px solid rgba(255,255,255,.025); border-radius: 9999px; }
.ig-module-hero__actions { position: relative; margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (min-width: 768px) { .ig-module-hero__actions { margin-top: 0; } }
.ig-glass-chip { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; background: rgba(255,255,255,.07); color: #e2e8f0; font-size: .75rem; line-height: 1.333333; font-weight: 600; }
/* In the original, the global `button { font: inherit }` rule outranks Tailwind's text utilities,
   so buttons render at the inherited 16px/normal. Reproduced here for every such button. */
button.ig-glass-chip, .ig-outline-btn, .ig-glass-btn, .ig-ghost-btn, .ig-user-menu__item { font-size: 1rem !important; line-height: 1.5rem !important; font-weight: 400 !important; }
button.ig-glass-chip:hover { background: rgba(255,255,255,.12); }

.ig-standard-header { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
@media (min-width: 640px) { .ig-standard-header { flex-direction: row; align-items: flex-end; } }

.ig-kicker { margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; color: var(--rose-300); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; }
.ig-hero-title { color: white; font-size: 1.5rem; line-height: 1.333333; font-weight: 800; letter-spacing: -.03em; }
@media (min-width: 640px) { .ig-hero-title { font-size: 2rem; } }
.ig-hero-lead { margin-top: .5rem; max-width: 42rem; color: var(--slate-300); font-size: .875rem; line-height: 1.625; }
.ig-hero-lead.is-tight { max-width: none; line-height: 1.428571; }
.ig-hero-period { position: relative; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; background: rgba(255,255,255,.07); font-size: .875rem; line-height: 1.428571; backdrop-filter: blur(4px); }
.ig-hero-period b { display: block; color: white; font-weight: 700; }
.ig-hero-period small { display: block; color: var(--slate-400); font-size: .75rem; line-height: 1.333333; }
.ig-status-pill { width: fit-content; display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border: 1px solid rgba(0,212,146,.2); border-radius: 9999px; background: rgba(0,212,146,.1); color: var(--emerald-300); font-size: .75rem; line-height: 1.333333; font-weight: 700; }
.ig-status-pill i { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--emerald-400); animation: ig-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes ig-pulse { 50% { opacity: .5; } }
.ig-glass-btn { width: fit-content; display: flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; background: rgba(255,255,255,.1); color: white; font-size: .875rem; line-height: 1.428571; font-weight: 700; backdrop-filter: blur(4px); }
.ig-glass-btn:hover { background: rgba(255,255,255,.16); }

/* ---------- Cards ---------- */
.ig-card-pad { padding: 1.25rem; }
@media (min-width: 640px) { .ig-card-pad { padding: 1.5rem; } }
.ig-p-5 { padding: 1.25rem; }
.ig-p-6 { padding: 1.5rem; }

/* rounded-2xl border border-slate-200 bg-white shadow-sm + `main article.rounded-2xl` override */
.ig-panel { border: 1px solid rgba(219,227,237,.9); border-radius: 18px; background: white; box-shadow: var(--shadow-card); }
/* same card on a <section> (the `main article` override doesn't apply there) */
.ig-panel.is-plain { border-color: var(--slate-200); border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }

.ig-card-title { color: var(--slate-900); font-weight: 700; }
.ig-card-title.is-module { color: #122033; font-size: 15px; }
.ig-card-sub { margin-top: .25rem; color: var(--slate-500); font-size: .75rem; line-height: 1.333333; }
.ig-card-sub.is-flush { margin-top: 0; }
.ig-card-head { margin-bottom: 1.25rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ig-card-head.is-tight { gap: .75rem; }
.ig-card-head.is-center { margin-bottom: 0; align-items: center; }
.ig-icon-head { display: flex; align-items: center; gap: .75rem; }
.ig-more-btn { width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .5rem; color: var(--slate-400); }
.ig-more-btn:hover { background: var(--slate-100); color: var(--slate-700); }
.ig-trend-badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: .5rem; padding: .25rem .625rem; font-size: .75rem; line-height: 1.333333; font-weight: 700; }
.ig-trend-badge.is-up { background: var(--emerald-50); color: var(--emerald-700); }
.ig-trend-badge.is-down { background: var(--rose-50); color: var(--rose-700); }
.ig-badge-up { border-radius: .5rem; background: var(--emerald-50); padding: .25rem .625rem; color: var(--emerald-700); font-size: .75rem; line-height: 1.333333; font-weight: 700; white-space: nowrap; }
.text-cherry-icon { color: #9f1239; }
.text-emerald-icon { color: var(--emerald-600); }
.text-amber-icon { color: var(--amber-500); }
.text-slate-icon { color: var(--slate-400); }

/* Dashboard metric card (MetricCard in Dashboard.jsx) */
.ig-metric { position: relative; overflow: hidden; padding: 1.25rem; }
.ig-metric__bar { position: absolute; inset: 0 0 auto 0; height: 2px; transform: scaleX(0); transform-origin: left; background: linear-gradient(to right, #a3133d, #d34a70); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.ig-metric:hover .ig-metric__bar { transform: scaleX(1); }
.ig-metric__top { display: flex; align-items: flex-start; justify-content: space-between; }
.ig-metric__label { color: var(--slate-500); font-size: .875rem; line-height: 1.428571; font-weight: 600; }
.ig-metric__value { margin-top: .5rem; color: var(--ink-strong); font-size: 2rem; font-weight: 800; }
.ig-metric__icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: .75rem; background: var(--rose-50); color: #9f1239; }
.ig-metric__foot { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--slate-100); display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .75rem; line-height: 1.333333; }
.ig-metric__foot > span:first-child { color: var(--slate-500); }
.ig-delta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.ig-delta.is-up { color: var(--emerald-700); }
.ig-delta.is-down { color: var(--amber-700); }

/* Module KPI card (UniversityAnalytics.jsx) */
.ig-kpi { position: relative; overflow: hidden; padding: 1.25rem; }
.ig-kpi__edge { position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: linear-gradient(to bottom, #a3133d, transparent); opacity: 0; transition: opacity .15s cubic-bezier(.4,0,.2,1); }
.ig-kpi:hover .ig-kpi__edge { opacity: 1; }
.ig-kpi__top { display: flex; align-items: center; justify-content: space-between; }
.ig-kpi__label { color: var(--slate-500); font-size: .75rem; line-height: 1.333333; font-weight: 600; }
.ig-kpi__index { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: .5rem; background: var(--slate-50); color: var(--slate-400); font-size: 10px; font-weight: 700; }
.ig-kpi__row { margin-top: .75rem; display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.ig-kpi__value { color: var(--ink-strong); font-size: 1.9rem; font-weight: 800; }
.ig-kpi__change { margin-bottom: .25rem; display: flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border-radius: .375rem; background: var(--emerald-50); color: var(--emerald-700); font-size: 10px; font-weight: 700; }
.ig-kpi__change.is-down { background: var(--rose-50); color: var(--rose-700); }
.ig-kpi__note { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--slate-100); color: var(--slate-500); font-size: 11px; }

/* Simple stat card (System Health) */
.ig-stat__label { color: var(--slate-500); font-size: .875rem; line-height: 1.428571; font-weight: 600; }
.ig-stat__value { margin-top: .5rem; display: block; color: var(--slate-900); font-size: 1.875rem; line-height: 1.2; font-weight: 700; }
.ig-stat__icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: .75rem; background: var(--rose-50); color: #9f1239; }
.ig-stat__note { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--slate-100); color: var(--emerald-700); font-size: .75rem; line-height: 1.333333; }

/* Charts */
.ig-chart { position: relative; width: 100%; }
.ig-chart.h-48 { height: 12rem; } .ig-chart.h-52 { height: 13rem; } .ig-chart.h-64 { height: 16rem; } .ig-chart.h-72 { height: 18rem; }
.ig-chart canvas { display: block; }
.ig-donut-center { pointer-events: none; position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ig-donut-center b { color: var(--slate-900); font-size: 1.5rem; line-height: 1.333333; font-weight: 900; }
.ig-donut-center span { color: var(--slate-500); font-size: .75rem; line-height: 1.333333; }

/* Legends under donuts */
.ig-legend-row { display: flex; align-items: center; justify-content: space-between; font-size: .875rem; line-height: 1.428571; }
.ig-legend-row > span { display: flex; align-items: center; gap: .5rem; color: var(--slate-600); }
.ig-legend-row > b { color: var(--slate-900); font-weight: 700; }
.ig-legend-row > b small { color: var(--slate-400); font-weight: 500; }
.ig-legend-row.is-small { font-size: .75rem; line-height: 1.333333; }
.ig-legend-row.is-small > b { color: var(--slate-800); }
.ig-dot { display: inline-block; width: .625rem; height: .625rem; border-radius: 9999px; }
.ig-dot.is-sm { width: .5rem; height: .5rem; }

/* Progress bars */
.ig-progress-list { margin-top: 1.5rem; }
.ig-progress-list > * + * { margin-top: 1.25rem; }
.ig-progress__label { margin-bottom: .5rem; display: flex; justify-content: space-between; font-size: .75rem; line-height: 1.333333; }
.ig-progress__label > span:first-child { display: flex; align-items: center; gap: .5rem; color: var(--slate-700); font-weight: 600; }
.ig-progress__label > span:last-child { color: var(--slate-500); }
.ig-progress { height: .5rem; overflow: hidden; border-radius: 9999px; background: var(--slate-100); }
.ig-progress > div { height: 100%; border-radius: 9999px; background: linear-gradient(to right, #1e3a5f, #9f1239); }

/* Research & extension tiles */
.ig-tiles { margin-top: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: .75rem; border-radius: .75rem; background: var(--slate-50); text-align: center; }
.ig-tiles > div { padding: .75rem; border-radius: .5rem; background: white; }
.ig-tiles b { color: var(--slate-900); font-size: 1.25rem; line-height: 1.4; }
.ig-tiles p { margin-top: .25rem; color: var(--slate-500); font-size: .75rem; line-height: 1.333333; }
@media (min-width: 640px) {
  .ig-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ig-tiles > div { background: transparent; }
  .ig-tiles > div + div { border-left: 1px solid var(--slate-100); }
}

/* Bordered list rows */
.ig-alert-list { margin-top: 1rem; }
.ig-alert-list > * + * { margin-top: .5rem; }
.ig-alert { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--slate-100); border-radius: .75rem; }
.ig-alert svg { flex: 0 0 auto; }
.ig-alert p:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--slate-800); font-size: .875rem; line-height: 1.428571; font-weight: 600; }
.ig-alert p + p { color: var(--slate-500); font-size: .75rem; line-height: 1.333333; }

.ig-insight { display: flex; gap: .75rem; padding: .875rem; border: 1px solid var(--slate-100); border-radius: .75rem; background: rgba(248,250,252,.7); }
.ig-insight > span { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .5rem; background: var(--emerald-50); color: var(--emerald-600); }
.ig-insight p { color: var(--slate-700); font-size: .75rem; line-height: 1.25rem; }

/* ---------- Tables ---------- */
.ig-table-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--slate-100); }
@media (min-width: 640px) { .ig-table-head { padding-inline: 1.5rem; } }
.ig-outline-btn { padding: .5rem .75rem; border: 1px solid var(--slate-200); border-radius: .5rem; color: var(--slate-600); font-size: .75rem; line-height: 1.333333; font-weight: 700; }
.ig-outline-btn:hover { background: var(--slate-50); }
.ig-table-wrap { overflow-x: auto; }
.ig-table { width: 100%; min-width: 650px; text-align: left; font-size: .875rem; line-height: 1.428571; }
.ig-table thead tr { border-bottom: 1px solid var(--slate-200); background: rgba(248,250,252,.8); color: var(--slate-500); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.ig-table th { padding: .875rem 1.25rem; font-weight: 700; }
.ig-table td { padding: 1rem 1.25rem; color: var(--slate-600); }
.ig-table td:first-child { color: var(--slate-800); font-weight: 600; }
.ig-table tbody tr { border-bottom: 1px solid var(--slate-100); transition: background-color .15s; }
.ig-table tbody tr:last-child { border-bottom: 0; }
.ig-table tbody tr:hover { background: rgba(248,250,252,.6); }
@media (min-width: 640px) { .ig-table th, .ig-table td { padding-inline: 1.5rem; } }

/* System Health service table variant */
.ig-table.is-compact thead tr { border-top: 1px solid var(--slate-100); border-bottom-color: var(--slate-100); background: var(--slate-50); font-size: .75rem; line-height: 1.333333; letter-spacing: normal; }
.ig-table.is-compact th, .ig-table.is-compact td { padding: .75rem 1rem; }
.ig-table.is-compact td:first-child { color: var(--slate-800); }
.ig-ok { display: inline-flex; align-items: center; gap: .375rem; color: var(--emerald-700); font-size: .75rem; line-height: 1.333333; font-weight: 700; }

/* ---------- Profile ---------- */
.ig-profile-cover { height: 6rem; background: linear-gradient(to right, #1e3a5f, #9f1239); }
.ig-profile-body { padding: 0 1.5rem 1.5rem; }
.ig-profile-avatar { margin-top: -2.5rem; width: 5rem; height: 5rem; display: grid; place-items: center; border: 4px solid white; border-radius: 1rem; background: var(--rose-50); color: #9f1239; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.ig-profile-name { margin-top: 1rem; color: var(--slate-900); font-size: 1.25rem; line-height: 1.4; font-weight: 900; }
.ig-profile-role { margin-top: .25rem; color: #9f1239; font-size: .875rem; line-height: 1.428571; font-weight: 600; }
.ig-profile-facts { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--slate-100); color: var(--slate-600); font-size: .875rem; line-height: 1.428571; }
.ig-profile-facts > * + * { margin-top: .75rem; }
.ig-profile-facts p { display: flex; align-items: center; gap: .75rem; }
.ig-soft-tile { padding: 1rem; border-radius: .75rem; background: var(--slate-50); }
.ig-soft-tile p { color: var(--slate-500); font-size: .75rem; line-height: 1.333333; font-weight: 600; }
.ig-soft-tile b { margin-top: .5rem; display: block; color: var(--slate-900); }
.ig-soft-tile span { color: var(--emerald-700); font-size: .75rem; line-height: 1.333333; }
.ig-check-row { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--slate-100); border-radius: .75rem; }
.ig-check-row span { color: var(--slate-700); font-size: .875rem; line-height: 1.428571; font-weight: 500; }
.ig-footnote { margin-top: 1rem; color: var(--slate-400); font-size: .75rem; line-height: 1.333333; }
.ig-activity { margin-top: 1rem; }
.ig-activity > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--slate-100); }
.ig-activity > div + div { margin-top: .75rem; }
.ig-activity > div:last-child { border-bottom: 0; }
.ig-activity span:first-child { color: var(--slate-700); font-size: .875rem; line-height: 1.428571; font-weight: 500; }
.ig-activity span:last-child { flex: 0 0 auto; color: var(--slate-400); font-size: .75rem; line-height: 1.333333; }
.ig-callout { margin-top: 1.25rem; padding: 1rem; border-radius: .75rem; background: var(--emerald-50); color: var(--emerald-900); font-size: .875rem; line-height: 1.428571; }
.ig-callout p { margin-top: .25rem; color: var(--emerald-700); font-size: .75rem; line-height: 1.333333; }
.ig-ghost-btn { margin-top: 1rem; padding: .625rem 1rem; border: 1px solid var(--slate-200); border-radius: .75rem; color: var(--slate-700); font-size: .875rem; line-height: 1.428571; font-weight: 700; }
.ig-ghost-btn:hover { background: var(--slate-50); }
.ig-ghost-btn.is-block { margin-top: .75rem; width: 100%; padding: .75rem 1rem; text-align: left; }

/* ---------- Settings ---------- */
.ig-field { color: var(--slate-600); font-size: .75rem; line-height: 1.333333; font-weight: 600; }
.ig-field.is-block { display: block; }
.ig-field .minimal-input { margin-top: .5rem; }
.ig-toggle { display: flex; cursor: pointer; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--slate-100); border-radius: .75rem; }
.ig-toggle b { display: block; color: var(--slate-800); font-size: .875rem; line-height: 1.428571; }
.ig-toggle small { margin-top: .25rem; display: block; color: var(--slate-500); font-size: .75rem; line-height: 1.333333; }
.ig-switch { position: relative; width: 2.75rem; height: 1.5rem; flex: 0 0 auto; border-radius: 9999px; background: var(--slate-300); transition: all .15s cubic-bezier(.4,0,.2,1); }
.ig-switch > span { position: absolute; top: .25rem; left: .25rem; width: 1rem; height: 1rem; border-radius: 9999px; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); transition: all .15s cubic-bezier(.4,0,.2,1); }
.ig-switch[aria-checked="true"] { background: #9f1239; }
.ig-switch[aria-checked="true"] > span { left: 1.5rem; }
.ig-density { padding: 1rem; border: 1px solid var(--slate-200); border-radius: .75rem; background: white; }
.ig-density.is-selected { border: 2px solid #9f1239; }
.ig-density > div { margin-bottom: .75rem; height: 2.5rem; border-radius: .5rem; background: var(--slate-100); }
.ig-density p { color: var(--slate-700); font-size: .75rem; line-height: 1.333333; font-weight: 700; }
.ig-dl { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; font-size: .875rem; line-height: 1.428571; }
.ig-dl dt { color: var(--slate-500); font-size: .75rem; line-height: 1.333333; font-weight: 400; }
.ig-dl dd { margin-top: .25rem; color: var(--slate-800); font-weight: 700; }
.ig-dl dd.is-ok { color: var(--emerald-700); }

/* ---------- Charts: Recharts-like tooltip ---------- */
.ig-chart-tooltip { position: absolute; pointer-events: none; z-index: 5; min-width: 7rem; padding: .625rem .75rem; border: 1px solid #e2e8f0; border-radius: 12px; background: white; box-shadow: 0 8px 24px rgba(15,23,42,.08); color: #0f172a; font-size: 12px; line-height: 1.5; opacity: 0; transition: opacity .12s, transform .12s; white-space: nowrap; }
.ig-chart-tooltip p { margin: 0; }
.ig-chart-tooltip p + p { margin-top: .25rem; }

/* ---------- Login helpers ---------- */
.ig-eye-hide { display: none; }
[data-password-toggle][aria-pressed="true"] .ig-eye-show { display: none; }
[data-password-toggle][aria-pressed="true"] .ig-eye-hide { display: block; }
.ig-demo-active { display: none; }
.login-accounts > button.is-active .ig-demo-idle { display: none; }
.login-accounts > button.is-active .ig-demo-active { display: block; }

/* =====================================================================
   Landing page (Landing.jsx)
   ===================================================================== */
.lp { min-height: 100vh; overflow-x: hidden; background: #f5f7fa; color: #102039; }
.lp-wrap { max-width: 1240px; margin-inline: auto; }

/* Top navigation */
.lp-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(7,24,47,.75); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.lp-nav__inner { max-width: 1440px; height: 5rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; padding-inline: 1.25rem; }
.lp-brand { display: flex; align-items: center; gap: .75rem; }
.lp-brand__mark { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: .75rem; background: linear-gradient(to bottom right, #c32750, #8b1236); color: white; font-size: .875rem; line-height: 1.428571; font-weight: 900; box-shadow: 0 10px 15px -3px rgba(77,2,24,.3), 0 4px 6px -4px rgba(77,2,24,.3); }
.lp-brand b { display: block; color: white; font-size: 17px; letter-spacing: -.025em; }
.lp-brand b span { color: var(--rose-300); }
.lp-brand small { display: block; color: var(--slate-400); font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; }
.lp-nav__links { display: none; align-items: center; gap: 1.75rem; color: var(--slate-300); font-size: .75rem; line-height: 1.333333; font-weight: 600; }
.lp-nav__links a { transition: color .15s cubic-bezier(.4,0,.2,1); }
.lp-nav__links a:hover { color: white; }
.lp-nav__end { display: flex; align-items: center; gap: .75rem; }
.lp-nav__note { display: none; align-items: center; gap: .5rem; color: var(--slate-400); font-size: .75rem; line-height: 1.333333; }

/* Cherry buttons */
.lp-btn { display: flex; flex-shrink: 0; align-items: center; gap: .5rem; border-radius: .75rem; background: #a3133d; color: white; font-weight: 700; transition: all .15s cubic-bezier(.4,0,.2,1); }
.lp-btn:hover { background: #bd194b; color: white; }
.lp-btn--sm { padding: .625rem 1rem; font-size: .75rem; line-height: 1.333333; box-shadow: 0 10px 15px -3px rgba(77,2,24,.2), 0 4px 6px -4px rgba(77,2,24,.2); }
.lp-btn--lg { padding: .875rem 1.5rem; font-size: .875rem; line-height: 1.428571; }
.lp-btn--lift { box-shadow: 0 20px 25px -5px rgba(77,2,24,.25), 0 8px 10px -6px rgba(77,2,24,.25); }
.lp-btn--lift:hover { transform: translateY(-.125rem); }
.lp-btn--static { transition: none; }
.lp-btn-ghost { padding: .875rem 1.5rem; border: 1px solid rgba(255,255,255,.15); border-radius: .75rem; background: rgba(255,255,255,.05); color: var(--slate-200); font-size: .875rem; line-height: 1.428571; font-weight: 700; transition: all .15s cubic-bezier(.4,0,.2,1); }
.lp-btn-ghost:hover { background: rgba(255,255,255,.1); color: var(--slate-200); }

/* Hero */
.lp-hero { position: relative; isolation: isolate; min-height: 92vh; overflow: hidden; padding: 9rem 1.25rem 6rem; background-color: #07182f; color: white; }
.lp-hero__video { position: absolute; inset: 0; z-index: -20; width: 100%; height: 100%; object-fit: cover; }
.lp-hero__shade { position: absolute; inset: 0; z-index: -10; background: linear-gradient(90deg, rgba(7,24,47,.97) 0%, rgba(7,24,47,.87) 45%, rgba(7,24,47,.62) 100%); }
.lp-hero__glow { position: absolute; inset: 0; z-index: -10; background: radial-gradient(circle at 75% 45%, rgba(163,19,61,.18), transparent 48%); }
.lp-hero__ring { pointer-events: none; position: absolute; left: 58%; top: 4rem; width: 38rem; height: 38rem; border: 100px solid rgba(255,255,255,.025); border-radius: 9999px; }
.lp-hero__blob { pointer-events: none; position: absolute; left: -10rem; bottom: -18rem; width: 34rem; height: 34rem; border-radius: 9999px; background: rgba(163,19,61,.1); filter: blur(64px); }
.lp-hero__grid { position: relative; width: 100%; max-width: 1340px; margin-inline: auto; display: grid; align-items: center; gap: 4rem; }
.lp-eyebrow { margin-bottom: 1.5rem; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border: 1px solid rgba(255,161,173,.2); border-radius: 9999px; background: rgba(255,161,173,.09); color: var(--rose-100); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .17em; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.lp-hero__title { max-width: 48rem; font-size: 2.25rem; line-height: 1.08; font-weight: 800; letter-spacing: -.045em; }
.lp-hero__lead { margin-top: 1.5rem; max-width: 42rem; color: var(--slate-300); font-size: 1rem; line-height: 2rem; }
.lp-hero__ctas { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.lp-hero__checks { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; color: var(--slate-400); font-size: .75rem; line-height: 1.333333; }
.lp-hero__checks span { display: flex; align-items: center; gap: .5rem; }
.lp-hero__checks svg { color: var(--emerald-400); }

/* Hero dashboard preview */
.lp-preview__halo { position: absolute; inset: -2rem; border-radius: 9999px; background: rgba(255,32,86,.1); filter: blur(64px); }
.lp-preview { position: relative; overflow: hidden; padding: .75rem; border: 1px solid rgba(255,255,255,.15); border-radius: 28px; background: rgba(255,255,255,.08); box-shadow: 0 35px 90px rgba(0,0,0,.38); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.lp-preview__shine { position: absolute; left: 3rem; right: 3rem; top: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(255,161,173,.6), transparent); }
.lp-preview__screen { padding: 1.25rem; border-radius: 19px; background: #f7f9fc; color: #102039; }
.lp-preview__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--slate-200); }
.lp-preview__head p { color: #a3133d; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; }
.lp-preview__head h2 { margin-top: .25rem; font-weight: 700; }
.lp-live { display: flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: 9999px; background: var(--emerald-50); color: var(--emerald-700); font-size: 9px; font-weight: 700; }
.lp-live i { width: .375rem; height: .375rem; border-radius: 9999px; background: var(--emerald-500); }
.lp-preview__measures { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.lp-preview__measures > div { padding: .875rem; border: 1px solid var(--slate-200); border-radius: .75rem; background: white; }
.lp-preview__measures b { font-size: 1.25rem; line-height: 1.4; }
.lp-preview__measures p { margin-top: .25rem; color: var(--slate-500); font-size: 9px; }
.lp-preview__chart { margin-top: .75rem; padding: 1rem; border: 1px solid var(--slate-200); border-radius: .75rem; background: white; }
.lp-preview__chart-head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; }
.lp-preview__chart-head p { margin-top: .125rem; color: var(--slate-400); font-size: 8px; }
.lp-preview__chart-head > span { padding: .25rem .5rem; border-radius: .375rem; background: var(--emerald-50); color: var(--emerald-700); font-weight: 700; }
.lp-preview__bars { margin-top: .75rem; height: 6rem; display: flex; align-items: flex-end; gap: .5rem; }
.lp-preview__bars i { flex: 1 1 0%; border-radius: .25rem .25rem 0 0; background: linear-gradient(to top, #19385d, #a3133d); }
.lp-preview__badge { position: absolute; bottom: -1.25rem; left: -1.75rem; display: none; align-items: center; gap: .75rem; padding: .875rem; border: 1px solid rgba(255,255,255,.15); border-radius: 1rem; background: rgba(12,32,60,.9); box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.lp-preview__badge > span { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: .75rem; background: rgba(0,212,146,.1); color: var(--emerald-300); }
.lp-preview__badge b { display: block; font-size: .75rem; line-height: 1.333333; }
.lp-preview__badge div span { color: var(--slate-400); font-size: 9px; }

/* Measures strip */
.lp-measures { padding: 2rem 1.25rem; border-bottom: 1px solid var(--slate-200); background: white; }
.lp-measures__grid { max-width: 1200px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.lp-measures__grid > div { text-align: center; }
.lp-measures__grid b { color: #102039; font-size: 1.5rem; line-height: 1.333333; font-weight: 800; }
.lp-measures__grid p { margin-top: .25rem; color: var(--slate-500); font-size: .75rem; line-height: 1.333333; }

/* Sections */
.lp-section { position: relative; padding: 5rem 1.25rem; }
.lp-section__intro { max-width: 42rem; margin-inline: auto; text-align: center; }
.lp-label { margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; color: #a3133d; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.lp-label.is-center { width: fit-content; margin-inline: auto; }
.lp-label.is-light { color: var(--rose-300); }
.lp-h2 { font-size: 1.875rem; line-height: 1.2; font-weight: 800; letter-spacing: -.035em; }
.lp-intro-text { margin-top: 1rem; color: var(--slate-500); font-size: .875rem; line-height: 1.75rem; }
.lp-body { margin-top: 1.25rem; color: var(--slate-500); font-size: .875rem; line-height: 1.75rem; }

/* Capabilities */
.lp-capabilities__glow { pointer-events: none; position: absolute; inset: 0 0 auto 0; max-width: 56rem; height: 24rem; margin-inline: auto; background: radial-gradient(ellipse, rgba(163,19,61,.07), transparent 68%); }
.lp-cap-grid { position: relative; margin-top: 3rem; display: grid; gap: 1.25rem; }
.lp-cap { padding: 1.5rem; }
.lp-cap__top { display: flex; align-items: center; justify-content: space-between; }
.lp-cap__icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .75rem; background: var(--rose-50); color: #a3133d; transition: all .15s cubic-bezier(.4,0,.2,1); }
.lp-cap:hover .lp-cap__icon { transform: translateY(-.125rem); background: #a3133d; color: white; }
.lp-cap__num { color: var(--slate-300); font-size: 10px; font-weight: 700; }
.lp-cap h3 { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.555556; font-weight: 700; }
.lp-cap p { margin-top: .75rem; color: var(--slate-500); font-size: .875rem; line-height: 1.5rem; }
.lp-cap__more { margin-top: 1.5rem; display: flex; align-items: center; gap: .25rem; color: #a3133d; font-size: .75rem; line-height: 1.333333; font-weight: 700; opacity: 0; transition: all .15s cubic-bezier(.4,0,.2,1); }
.lp-cap:hover .lp-cap__more { opacity: 1; }

/* Platform */
.lp-platform { background: #0b1930; color: white; }
.lp-platform__intro { display: grid; gap: 2rem; }
.lp-platform__intro > p { max-width: 42rem; color: var(--slate-400); font-size: .875rem; line-height: 1.75rem; }
.lp-modules { margin-top: 3rem; display: grid; gap: 1rem; }
.lp-module { position: relative; min-height: 12rem; overflow: hidden; padding: 1.5rem; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; transition: all .3s cubic-bezier(.4,0,.2,1); }
.lp-module:hover { transform: translateY(-.25rem); border-color: rgba(255,255,255,.2); }
.lp-module__ring { position: absolute; right: -3rem; top: -3rem; width: 10rem; height: 10rem; border: 30px solid rgba(255,255,255,.035); border-radius: 9999px; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.lp-module:hover .lp-module__ring { transform: scale(1.1); }
.lp-module__icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; background: rgba(255,255,255,.08); color: var(--rose-200); }
.lp-module__text { position: absolute; bottom: 1.5rem; left: 1.5rem; }
.lp-module__text h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 700; }
.lp-module__text p { margin-top: .25rem; color: rgba(255,255,255,.55); font-size: .75rem; line-height: 1.333333; }
.lp-module__arrow { position: absolute; bottom: 1.5rem; right: 1.5rem; transform: translateX(.5rem); color: rgba(255,255,255,0); transition: all .15s cubic-bezier(.4,0,.2,1); }
.lp-module:hover .lp-module__arrow { transform: translateX(0); color: rgba(255,255,255,.7); }

/* Governance */
.lp-governance { display: grid; gap: 3rem; }
.lp-flow { position: relative; padding: 1.5rem; border: 1px solid var(--slate-200); border-radius: 24px; background: white; box-shadow: 0 24px 65px rgba(15,28,47,.09); }
.lp-flow__accent { position: absolute; left: -.75rem; top: 3rem; width: .25rem; height: 5rem; border-radius: 9999px; background: #a3133d; }
.lp-flow__title { color: var(--slate-400); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.lp-flow__steps { margin-top: 1.75rem; }
.lp-flow__steps > * + * { margin-top: .5rem; }
.lp-step { display: flex; align-items: center; gap: 1rem; padding: .75rem; border: 1px solid transparent; border-radius: .75rem; transition: all .15s cubic-bezier(.4,0,.2,1); }
.lp-step:hover { border-color: var(--slate-100); background: var(--slate-50); }
.lp-step__num { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: .75rem; background: var(--slate-100); color: var(--slate-500); font-size: 10px; font-weight: 700; }
.lp-step__num.is-final { background: #a3133d; color: white; }
.lp-step__text { flex: 1 1 0%; }
.lp-step__text b { display: block; font-size: .875rem; line-height: 1.428571; }
.lp-step__text span { color: var(--slate-400); font-size: 10px; }
.lp-step__chev { color: var(--slate-300); }
.lp-trust { margin-top: 1.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.lp-trust > div { display: flex; align-items: center; gap: .5rem; padding: .75rem; border: 1px solid var(--slate-200); border-radius: .75rem; background: white; color: var(--slate-700); font-size: .75rem; line-height: 1.333333; font-weight: 600; }

/* Call to action */
.lp-cta-wrap { padding: 0 1.25rem 5rem; }
.lp-cta { max-width: 1240px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.75rem; overflow: hidden; padding: 2.5rem 1.5rem; border-radius: 24px; background: #0b1930; color: white; text-align: center; }
.lp-cta__label { margin-bottom: .5rem; justify-content: center; letter-spacing: .17em; }
.lp-cta h2 { font-size: 1.5rem; line-height: 1.333333; font-weight: 800; letter-spacing: -.03em; }
.lp-cta p { margin-top: .5rem; color: var(--slate-400); font-size: .875rem; line-height: 1.428571; }

/* Footer */
.lp-footer { padding: 2rem 1.25rem; border-top: 1px solid var(--slate-200); background: white; }
.lp-footer > div { max-width: 1240px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .75rem; color: var(--slate-400); font-size: 11px; text-align: center; }

@media (min-width: 640px) {
  .lp-nav__inner { padding-inline: 2rem; }
  .lp-nav__note { display: flex; }
  .lp-btn--sm { padding-inline: 1.25rem; }
  .lp-hero { padding: 11rem 2rem 6rem; }
  .lp-hero__title { font-size: 3rem; }
  .lp-hero__lead { font-size: 1.125rem; }
  .lp-preview__badge { display: flex; }
  .lp-measures { padding-inline: 2rem; }
  .lp-measures__grid b { font-size: 1.875rem; line-height: 1.2; }
  .lp-section { padding-inline: 2rem; }
  .lp-h2 { font-size: 2.25rem; line-height: 1.111111; }
  .lp-cap { padding: 1.75rem; }
  .lp-flow { padding: 2rem; }
  .lp-cta-wrap { padding-inline: 2rem; }
  .lp-cta { padding-inline: 2.5rem; }
  .lp-cta h2 { font-size: 1.875rem; line-height: 1.2; }
  .lp-footer { padding-inline: 2rem; }
  .lp-footer > div { flex-direction: row; text-align: left; }
}
@media (min-width: 768px) {
  .lp-cap-grid, .lp-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-module.is-wide { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
  .lp-nav__inner { padding-inline: 3rem; }
  .lp-nav__links { display: flex; }
  .lp-hero { display: flex; align-items: center; padding: 11rem 3rem 8rem; }
  .lp-hero__title { font-size: 4rem; }
  .lp-hero__grid { grid-template-columns: 1.08fr .92fr; }
  .lp-measures { padding-inline: 3rem; }
  .lp-measures__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-section { padding: 7rem 3rem; }
  .lp-platform__intro { grid-template-columns: .75fr 1.25fr; align-items: end; }
  .lp-platform__intro > p { justify-self: end; }
  .lp-governance { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .lp-cta-wrap { padding: 0 3rem 7rem; }
  .lp-cta { flex-direction: row; padding: 3rem 3.5rem; text-align: left; }
  .lp-cta__label { justify-content: flex-start; }
}

/* Chart legend (Recharts DefaultLegendContent) */
.ig-chart-legend { position: absolute; margin: 0; padding: 0; text-align: center; list-style: none; pointer-events: none; }
.ig-chart-legend li { display: inline-block; margin-right: 10px; }
.ig-chart-legend svg { display: inline-block; vertical-align: middle; margin-right: 4px; }
.ig-chart-frame { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- Live data (iGEAR360.FS / HC / SIS) ---------- */
.ig-hero-side { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }
@media (min-width: 768px) { .ig-hero-side { align-items: flex-end; } }
.ig-live-badge { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ig-live-badge.is-sample { border-color: rgba(253,199,0,.25); background: rgba(253,199,0,.1); color: #fde68a; }
.ig-live-badge.is-sample i { background: #fbbf24; animation: none; }
.ig-live-badge.is-stale { border-color: rgba(251,113,133,.3); background: rgba(251,113,133,.12); color: #fecdd3; }
.ig-live-badge.is-stale i { background: #fb7185; }
.ig-live-notice { display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem; border: 1px solid #fde68a; border-radius: .875rem; background: #fffbeb; color: #92400e; font-size: .8125rem; line-height: 1.4; }
.ig-live-notice svg { flex: 0 0 auto; color: #d97706; }
[data-live-page].is-refreshing [data-live-region="badge"] i { animation-duration: .6s; }
.ig-flash { display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem; border: 1px solid #a7f3d0; border-radius: .875rem; background: #ecfdf5; color: #065f46; font-size: .875rem; }
.ig-flash.is-error { border-color: #fecdd3; background: #fff1f2; color: #9f1239; }
.ig-empty-row td { color: var(--slate-500); text-align: center; font-style: italic; }
.app-sidebar__status.is-down b { color: #fecdd3; }
.app-sidebar__status.is-down > i { background: linear-gradient(90deg, #fb7185 100%, transparent 0); }

/* Settings ▸ dashboard access matrix */
.ig-access-wrap { overflow-x: auto; margin-top: 1.25rem; border: 1px solid var(--slate-100); border-radius: .875rem; }
.ig-access { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ig-access th, .ig-access td { padding: .5rem .625rem; border-bottom: 1px solid var(--slate-100); text-align: center; white-space: nowrap; }
.ig-access th:first-child, .ig-access td:first-child { position: sticky; left: 0; z-index: 1; background: white; text-align: left; font-weight: 600; color: var(--slate-800); }
.ig-access thead th { background: #f8fafc; color: var(--slate-500); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ig-access thead th:first-child { background: #f8fafc; }
.ig-access input { width: 1rem; height: 1rem; accent-color: #9f1239; }
.ig-access small { display: block; color: var(--slate-400); font-weight: 400; text-transform: none; letter-spacing: 0; }
.ig-range-row { display: flex; align-items: center; gap: .75rem; }
.ig-range-row input[type=range] { flex: 1; accent-color: #9f1239; }
.ig-range-row output { min-width: 4.5rem; text-align: right; font-weight: 700; color: var(--slate-800); font-variant-numeric: tabular-nums; }
.ig-field small { display: block; margin-top: .25rem; color: var(--slate-500); font-size: .75rem; font-weight: 400; }
.ig-check { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem 1rem; border: 1px solid var(--slate-100); border-radius: .875rem; cursor: pointer; }
.ig-check input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: #9f1239; }
.ig-check b { display: block; color: var(--slate-800); font-size: .875rem; }
.ig-check small { display: block; color: var(--slate-500); font-size: .75rem; }
.ig-solid-btn { border: 0; background: #9f1239 !important; color: white; }
.ig-solid-btn:hover { background: #881337 !important; }
.ig-field.is-block, label.ig-field { display: block; }
.ig-panel .ig-glass-btn.ig-solid-btn { font-size: .875rem !important; font-weight: 700 !important; }
.ig-mt-2 { margin-top: .5rem; }
a.app-sidebar__status { display: block; color: inherit; text-decoration: none; }
a.app-sidebar__status:hover { background: rgba(255,255,255,.07); }
.app-sidebar__status.is-down .app-sidebar__status-icon { color: #fb7185; background: rgba(251,113,133,.12); }
.app-sidebar__status > i { transition: background .3s; }