/* InfaBuild — shared base styles + global UI polish */
:root {
  --brand: #1D4ED8;
  --brand-hover: #1E40AF;
  --accent: #F7941E;           /* InfaBuild orange (from logo) */
  --ink: #0F172A;
}

body {
  font-family: 'Inter', sans-serif;
  background: #EEF2F7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.font-display { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.012em; }

::selection { background: rgba(29, 78, 216, .16); }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #C3CEDB; border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #94A3B8; background-clip: padding-box; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ---------- Sidebar ---------- */
.sidebar-grad {
  background: linear-gradient(168deg, #0B1F3A 0%, #0F2B4C 55%, #123862 100%);
  box-shadow: 4px 0 34px rgba(2, 12, 27, .30);
}
#sidebar { width: 240px; }
@media (min-width: 1024px) {
  #sidebar.is-collapsed { width: 72px; }
  #sidebar.is-collapsed .sb-label { display: none; }
}
/* Active nav item gets a soft glow */
#sidebar a.bg-brand { box-shadow: 0 10px 22px -10px rgba(37, 99, 235, .75); }

/* ---------- Main content: subtle backdrop + entrance ---------- */
#tz-main {
  background:
    radial-gradient(1100px 420px at 100% -8%, rgba(37, 99, 235, .06), transparent 60%),
    radial-gradient(900px 360px at -5% 0%, rgba(247, 148, 30, .045), transparent 55%),
    #F1F5F9;
  animation: tzFade .45s ease both;
}
@keyframes tzFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Cards (standard app card = .rounded-2xl.border.border-slate-100) ---------- */
.rounded-2xl.border.border-slate-100 {
  transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}
.rounded-2xl.border.border-slate-100.shadow-sm {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -10px rgba(15, 43, 76, .14);
}
.rounded-2xl.border.border-slate-100.shadow-sm:hover {
  box-shadow: 0 14px 34px -14px rgba(15, 43, 76, .26);
  transform: translateY(-3px);
  border-color: #E2E8F0;
}

/* ---------- Brand buttons: gradient, depth, press ---------- */
button.bg-brand, a.bg-brand {
  background-image: linear-gradient(135deg, #2F6BF0 0%, #1D4ED8 100%);
  box-shadow: 0 10px 20px -8px rgba(29, 78, 216, .55);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
button.bg-brand:hover, a.bg-brand:hover {
  filter: brightness(1.06);
  box-shadow: 0 16px 28px -8px rgba(29, 78, 216, .62);
  transform: translateY(-1px);
}
button.bg-brand:active, a.bg-brand:active {
  transform: translateY(0);
  box-shadow: 0 5px 12px -5px rgba(29, 78, 216, .55);
}

/* ---------- Form controls ---------- */
input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }

.fld {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: #334155;
  background: #f8fafc;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.fld:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, .25);
  background: #fff;
}

/* Gentle hover feedback on icon/ghost action buttons used across tables */
a[title], button[title] { transition: background-color .15s ease, color .15s ease, transform .15s ease; }