/* Gnovate UI — shared design system. Drop into each product's public/ and <link> it.
   One palette, type scale, components, states and motion across every Gnovate dashboard.
   Owner: Girish S / Gnovate Technologies. Additive: apply the classes, keep existing ids/JS hooks. */

:root{
  /* type */
  --gn-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gn-fs-xs:12px; --gn-fs-sm:14px; --gn-fs-base:16px; --gn-fs-lg:18px; --gn-fs-xl:24px; --gn-fs-2xl:32px;
  --gn-lh:1.5; --gn-fw-med:540; --gn-fw-bold:680;
  /* spacing (4px base) */
  --gn-1:4px; --gn-2:8px; --gn-3:12px; --gn-4:16px; --gn-5:20px; --gn-6:24px; --gn-8:32px;
  /* radius */
  --gn-r-sm:6px; --gn-r:8px; --gn-r-lg:12px; --gn-r-pill:999px;
  /* light palette */
  --gn-bg:#f6f7f9; --gn-surface:#ffffff; --gn-surface-2:#f1f3f7; --gn-border:#e4e7ec;
  --gn-text:#1a2233; --gn-muted:#667085; --gn-faint:#98a2b3;
  --gn-primary:#4f46e5; --gn-primary-hover:#4338ca; --gn-primary-soft:#eef2ff;
  --gn-verified:#16a34a; --gn-verified-soft:#e7f6ec;
  --gn-waiting:#b45309;  --gn-waiting-soft:#fef3e2;
  --gn-failed:#dc2626;   --gn-failed-soft:#fdecec;
  --gn-degraded:#5b6472; --gn-degraded-soft:#eceef2;
  --gn-info:#2563eb;     --gn-info-soft:#e8f0fe;
  --gn-shadow:0 1px 2px rgba(16,24,40,.06); --gn-shadow-lg:0 6px 20px rgba(16,24,40,.10);
  --gn-focus:0 0 0 3px rgba(79,70,229,.35);
  --gn-motion:160ms;
}
:root:not([data-theme="light"]) { }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gn-bg:#0e1320; --gn-surface:#161b27; --gn-surface-2:#1e2533; --gn-border:#2a3142;
    --gn-text:#e6e9f0; --gn-muted:#9aa5bc; --gn-faint:#6b7589;
    --gn-primary:#818cf8; --gn-primary-hover:#a5b0ff; --gn-primary-soft:#1e2340;
    --gn-verified:#34d399; --gn-verified-soft:#113224;
    --gn-waiting:#fbbf24;  --gn-waiting-soft:#36290c;
    --gn-failed:#f87171;   --gn-failed-soft:#3a1b1b;
    --gn-degraded:#94a0b8; --gn-degraded-soft:#232a38;
    --gn-info:#60a5fa;     --gn-info-soft:#13243d;
    --gn-shadow:0 1px 2px rgba(0,0,0,.4); --gn-shadow-lg:0 8px 24px rgba(0,0,0,.5);
    --gn-focus:0 0 0 3px rgba(129,140,248,.4);
  }
}
:root[data-theme="dark"]{
  --gn-bg:#0e1320; --gn-surface:#161b27; --gn-surface-2:#1e2533; --gn-border:#2a3142;
  --gn-text:#e6e9f0; --gn-muted:#9aa5bc; --gn-faint:#6b7589;
  --gn-primary:#818cf8; --gn-primary-hover:#a5b0ff; --gn-primary-soft:#1e2340;
  --gn-verified:#34d399; --gn-verified-soft:#113224; --gn-waiting:#fbbf24; --gn-waiting-soft:#36290c;
  --gn-failed:#f87171; --gn-failed-soft:#3a1b1b; --gn-degraded:#94a0b8; --gn-degraded-soft:#232a38;
  --gn-info:#60a5fa; --gn-info-soft:#13243d; --gn-shadow:0 1px 2px rgba(0,0,0,.4); --gn-shadow-lg:0 8px 24px rgba(0,0,0,.5);
}

.gn, .gn *{box-sizing:border-box}
.gn{font-family:var(--gn-font);font-size:var(--gn-fs-base);line-height:var(--gn-lh);color:var(--gn-text);background:var(--gn-bg);-webkit-font-smoothing:antialiased}
.gn-wrap{max-width:1040px;margin:0 auto;padding:var(--gn-6) var(--gn-4)}
.gn h1{font-size:var(--gn-fs-2xl);font-weight:var(--gn-fw-bold);margin:0 0 var(--gn-2)}
.gn h2{font-size:var(--gn-fs-xl);font-weight:var(--gn-fw-bold);margin:var(--gn-6) 0 var(--gn-3)}
.gn h3{font-size:var(--gn-fs-lg);font-weight:var(--gn-fw-med);margin:0 0 var(--gn-2)}
.gn a{color:var(--gn-primary);text-decoration:none}
.gn a:hover{text-decoration:underline}
.gn-muted{color:var(--gn-muted)} .gn-faint{color:var(--gn-faint)} .gn-sm{font-size:var(--gn-fs-sm)}

/* card */
.gn-card{background:var(--gn-surface);border:1px solid var(--gn-border);border-radius:var(--gn-r-lg);
  padding:var(--gn-5);box-shadow:var(--gn-shadow);transition:box-shadow var(--gn-motion) ease,transform var(--gn-motion) ease}
.gn-card + .gn-card{margin-top:var(--gn-3)}
.gn-card-hover:hover{box-shadow:var(--gn-shadow-lg)}
.gn-row{display:flex;align-items:center;gap:var(--gn-2);flex-wrap:wrap}
.gn-between{display:flex;align-items:center;justify-content:space-between;gap:var(--gn-3);flex-wrap:wrap}

/* buttons */
.gn-btn{display:inline-flex;align-items:center;gap:var(--gn-2);font:inherit;font-weight:var(--gn-fw-med);
  font-size:var(--gn-fs-sm);padding:9px 14px;border-radius:var(--gn-r-sm);border:1px solid var(--gn-border);
  background:var(--gn-surface);color:var(--gn-text);cursor:pointer;transition:background var(--gn-motion) ease,
  border-color var(--gn-motion) ease,transform var(--gn-motion) ease}
.gn-btn:hover{background:var(--gn-surface-2)} .gn-btn:active{transform:translateY(1px)}
.gn-btn:focus-visible{outline:none;box-shadow:var(--gn-focus)}
.gn-btn-primary{background:var(--gn-primary);border-color:var(--gn-primary);color:#fff}
.gn-btn-primary:hover{background:var(--gn-primary-hover);border-color:var(--gn-primary-hover)}
.gn-btn-danger{background:var(--gn-failed);border-color:var(--gn-failed);color:#fff}
.gn-btn-ghost{background:transparent;border-color:transparent;color:var(--gn-primary)}

/* status pills */
.gn-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--gn-fs-xs);font-weight:var(--gn-fw-med);
  padding:3px 10px;border-radius:var(--gn-r-pill);line-height:1.4;white-space:nowrap}
.gn-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.gn-badge.is-verified{color:var(--gn-verified);background:var(--gn-verified-soft)}
.gn-badge.is-waiting{color:var(--gn-waiting);background:var(--gn-waiting-soft)}
.gn-badge.is-failed{color:var(--gn-failed);background:var(--gn-failed-soft)}
.gn-badge.is-degraded{color:var(--gn-degraded);background:var(--gn-degraded-soft)}
.gn-badge.is-info{color:var(--gn-info);background:var(--gn-info-soft)}

/* inputs */
.gn-input,.gn-select{font:inherit;font-size:var(--gn-fs-sm);width:100%;padding:9px 12px;border-radius:var(--gn-r-sm);
  border:1px solid var(--gn-border);background:var(--gn-surface);color:var(--gn-text);transition:border-color var(--gn-motion) ease,box-shadow var(--gn-motion) ease}
.gn-input:focus,.gn-select:focus{outline:none;border-color:var(--gn-primary);box-shadow:var(--gn-focus)}

/* filter chips (for cockpit) */
.gn-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--gn-fs-sm);padding:6px 12px;border-radius:var(--gn-r-pill);
  border:1px solid var(--gn-border);background:var(--gn-surface);color:var(--gn-muted);cursor:pointer;transition:all var(--gn-motion) ease}
.gn-chip:hover{border-color:var(--gn-primary);color:var(--gn-text)}
.gn-chip.is-active{background:var(--gn-primary-soft);border-color:var(--gn-primary);color:var(--gn-primary);font-weight:var(--gn-fw-med)}

/* table */
.gn-table{width:100%;border-collapse:collapse;font-size:var(--gn-fs-sm)}
.gn-table th{text-align:left;color:var(--gn-muted);font-weight:var(--gn-fw-med);padding:10px 12px;border-bottom:1px solid var(--gn-border)}
.gn-table td{padding:12px;border-bottom:1px solid var(--gn-border)}
.gn-table tr:hover td{background:var(--gn-surface-2)}

/* empty / loading / error states */
.gn-empty{text-align:center;color:var(--gn-muted);padding:var(--gn-8) var(--gn-4)}
.gn-empty svg,.gn-empty .gn-emoji{opacity:.6;margin-bottom:var(--gn-3)}
.gn-skeleton{background:linear-gradient(90deg,var(--gn-surface-2) 25%,var(--gn-border) 37%,var(--gn-surface-2) 63%);
  background-size:400% 100%;border-radius:var(--gn-r-sm);animation:gn-shimmer 1.4s ease infinite;height:14px}
@keyframes gn-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.gn-error{color:var(--gn-failed);background:var(--gn-failed-soft);border:1px solid var(--gn-failed);
  border-radius:var(--gn-r);padding:var(--gn-3) var(--gn-4);font-size:var(--gn-fs-sm)}

/* toast */
.gn-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--gn-text);color:var(--gn-bg);
  padding:12px 18px;border-radius:var(--gn-r);font-size:var(--gn-fs-sm);box-shadow:var(--gn-shadow-lg);
  opacity:0;pointer-events:none;transition:opacity var(--gn-motion) ease,transform var(--gn-motion) ease;z-index:50}
.gn-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:560px){
  .gn-wrap{padding:var(--gn-4) var(--gn-4)}
  .gn h1{font-size:var(--gn-fs-xl)}
  .gn-card{padding:var(--gn-4)}
  .gn-between{gap:var(--gn-2)}
}
@media (prefers-reduced-motion: reduce){
  .gn *,.gn-card,.gn-btn,.gn-chip,.gn-toast{transition:none!important;animation:none!important}
}