/* 
  NEXUS — UI v8 (Light / Executive)
  ------------------------------------------------
  Light, crisp, high-legibility theme (SaaS/enterprise).
  Works with shell (home.php) + embedded modules.
*/

:root{
  /* Backgrounds */
  --nx-bg0:#f5f7ff;
  --nx-bg1:#eef2ff;

  /* Decorative orbs (very subtle) */
  --nx-orb1:rgba(124,58,237,.10);
  --nx-orb2:rgba(37,99,235,.10);
  --nx-orb3:rgba(16,185,129,.08);

  /* Text */
  --nx-text:#0b1220;
  --nx-text2:#334155;
  --nx-muted:#64748b;

  /* Surfaces */
  --nx-surface:rgba(255,255,255,.86);
  --nx-surface2:rgba(255,255,255,.72);
  --nx-border:rgba(15,23,42,.10);
  --nx-border2:rgba(15,23,42,.08);

  /* Brand */
  --nx-primary:#2563eb; /* blue */
  --nx-accent:#7c3aed;  /* purple */
  --nx-success:#16a34a;
  --nx-warning:#f59e0b;
  --nx-danger:#ef4444;

  --nx-r12:12px;
  --nx-r16:16px;
  --nx-r20:20px;

  --nx-shadow: 0 18px 55px rgba(2,6,23,.12);
  --nx-shadow2: 0 10px 26px rgba(2,6,23,.10);

  --nx-font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--nx-text);
  font-family:var(--nx-font);
  background:
    radial-gradient(900px 520px at 15% 10%, var(--nx-orb1), transparent 60%),
    radial-gradient(900px 520px at 85% 15%, var(--nx-orb2), transparent 60%),
    radial-gradient(900px 520px at 55% 90%, var(--nx-orb3), transparent 60%),
    linear-gradient(180deg, var(--nx-bg0), var(--nx-bg1));
}

/* Shell layout */
.nx-shell{ display:flex; min-height:100vh; }
.nx-sidebar{
  width:280px;
  padding:22px 16px;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid var(--nx-border2);
  box-shadow: 0 8px 40px rgba(2,6,23,.08);
  position:sticky; top:0; height:100vh;
}

.nx-brand{ display:flex; align-items:center; gap:12px; padding:10px 10px 18px; }
.nx-dot{
  width:38px; height:38px; border-radius:14px;
  background: radial-gradient(circle at 30% 30%, var(--nx-accent), var(--nx-primary));
  box-shadow: 0 12px 22px rgba(124,58,237,.18);
}
.nx-brand b{ font-size:16px; letter-spacing:.18em; }
.nx-brand span{ display:block; font-size:12px; color:var(--nx-muted); margin-top:2px; }

.nx-nav{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.nx-nav a{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius:14px;
  color: #0f172a;
  text-decoration:none;
  border:1px solid transparent;
  background: transparent;
}
.nx-nav a:hover{
  background: rgba(37,99,235,.06);
  border-color: rgba(37,99,235,.10);
}
.nx-nav a.active{
  background: linear-gradient(90deg, rgba(37,99,235,.14), rgba(124,58,237,.10));
  border-color: rgba(37,99,235,.16);
}

.nx-main{ flex:1; padding:22px 26px; }
.nx-topbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px;
}
.nx-topbar-title{ font-size:20px; font-weight:900; letter-spacing:-.02em; }
.nx-actions{ display:flex; gap:10px; }

.nx-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--nx-border);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--nx-shadow2);
  cursor:pointer;
  text-decoration:none;
  color:var(--nx-text);
  font-weight:700;
}
.nx-btn:hover{ transform: translateY(-1px); }
.nx-btn.primary{
  border-color:transparent;
  background: linear-gradient(90deg, var(--nx-primary), var(--nx-accent));
  color:#fff;
  box-shadow: 0 14px 30px rgba(37,99,235,.18);
}
.nx-btn.primary:hover{ box-shadow: 0 18px 40px rgba(37,99,235,.20); }
.nx-btn.danger{
  background:#fff;
  border-color: rgba(239,68,68,.25);
  color:#991b1b;
}

.nx-card{
  background: rgba(255,255,255,.88);
  border: 1px solid var(--nx-border2);
  border-radius: 18px;
  box-shadow: var(--nx-shadow);
  padding: 18px;
}

.nx-grid{ display:grid; gap:14px; }
.nx-grid.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.nx-grid.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.nx-grid.cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }

.nx-kpi{
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--nx-border2);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
}
.nx-kpi .v{ font-size:28px; font-weight:900; }
.nx-kpi .l{ color:var(--nx-muted); font-size:12px; font-weight:600; }

input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--nx-border2);
  background: rgba(255,255,255,.92);
  color: var(--nx-text);
  outline:none;
}
select, option, optgroup{ color: var(--nx-text); background:#fff; }
input::placeholder, textarea::placeholder{ color: rgba(100,116,139,.85); }
input:focus,select:focus,textarea:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.nx-iframe{
  width:100%;
  height: calc(100vh - 88px);
  border:0;
  border-radius:18px;
  background: transparent;
}

@media (max-width: 980px){
  .nx-sidebar{ width:86px; padding:18px 10px; }
  .nx-brand span{ display:none; }
  .nx-brand b{ font-size:14px; letter-spacing:.12em; }
  .nx-nav a{ justify-content:center; }
  .nx-nav a span{ display:none; }
  .nx-main{ padding:18px 14px; }
}