/* ===============================================================
   FILE: ASSETS/CSS/app.css
   FUNGSI: Penghalus tampilan pelengkap Tailwind (CUBEX SSO)
   =============================================================== */

:root {
  --brand-900: #0b1120;
  --brand-700: #1e293b;
}

html, body { height: 100%; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Latar bermotif halus untuk panel brand */
.cbx-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Animasi masuk kartu */
@keyframes cbxRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cbx-rise { animation: cbxRise .5s cubic-bezier(.16,.84,.44,1) both; }

/* Input dengan ikon */
.cbx-field:focus-within label { color: #ea580c; }

/* Spinner tombol saat submit */
.cbx-spin {
  width: 1rem; height: 1rem;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 9999px;
  animation: cbxSpin .6s linear infinite;
}
@keyframes cbxSpin { to { transform: rotate(360deg); } }

/* ===== Sidebar collapsible ===== */
#cbxSidebar { transition: width .2s ease; }
#cbxSidebar.sb-collapsed { width: 5rem; }
#cbxSidebar.sb-collapsed .sb-text { display: none; }        /* sembunyikan label & teks brand */
#cbxSidebar.sb-collapsed .sb-link { justify-content: center; }
#cbxSidebar.sb-collapsed .sb-brandbox { justify-content: center; }
#cbxSidebar.sb-collapsed .sb-foot { text-align: center; }

/* Scrollbar tipis */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }