/* ===========================================================
   Govix — ERP dashboard skin
   Inherits Tailwind utilities; adds opinionated component styles.
   =========================================================== */

:root {
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-200:#c7d2fe;
  --brand-300:#a5b4fc; --brand-400:#818cf8; --brand-500:#6366f1;
  --brand-600:#4f46e5; --brand-700:#4338ca; --brand-800:#3730a3;
  --brand-900:#312e81;
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444; --info:#0ea5e9;
}

body {
  font-feature-settings: "cv11","ss01","ss03";
}

/* --------------------------------------------- Sidebar nav items */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.625rem;
  color: rgb(71 85 105);
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.15s;
  position: relative;
}
.dark .nav-item { color: rgb(203 213 225); }
.nav-item:hover {
  background: rgb(238 242 255);
  color: rgb(67 56 202);
}
.dark .nav-item:hover { background: rgb(49 46 129 / 0.35); color: rgb(199 210 254); }

.nav-item .icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.nav-item .icon svg { width: 1.1rem; height: 1.1rem; }

.nav-item-active {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff !important;
  box-shadow: 0 8px 18px -8px rgb(99 102 241 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.1);
}
.nav-item-active:hover {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  color: #fff;
}
.nav-item-active .icon { opacity: 1; }

.nav-section {
  padding: 1rem 0.85rem 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(148 163 184);
}
.dark .nav-section { color: rgb(100 116 139); }

/* --------------------------------------------- Cards */
.card {
  background: #fff;
  border-radius: 0.875rem;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  transition: box-shadow 0.18s, transform 0.18s;
}
.dark .card { background: rgb(15 23 42); border-color: rgb(30 41 59); }

.card-soft {
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}
.dark .card-soft { background: linear-gradient(180deg, rgb(15 23 42) 0%, rgb(17 24 39) 100%); }

.card-hover:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -16px rgb(15 23 42 / 0.18);
}

/* KPI cards */
.kpi {
  position: relative;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 0.875rem;
  background: #fff;
  border: 1px solid rgb(226 232 240);
  overflow: hidden;
  transition: all 0.2s;
}
.dark .kpi { background: rgb(15 23 42); border-color: rgb(30 41 59); }
.kpi:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -18px rgb(15 23 42 / 0.2); }
.kpi-label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgb(100 116 139);
}
.dark .kpi-label { color: rgb(148 163 184); }
.kpi-value {
  margin-top: 0.6rem;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgb(15 23 42);
}
.dark .kpi-value { color: rgb(241 245 249); }
.kpi-unit { font-size: 0.8rem; font-weight: 500; color: rgb(100 116 139); margin-left: 0.25rem; }
.kpi-delta { display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; font-weight:600; padding:.15rem .5rem; border-radius:9999px; margin-top:.55rem; }
.kpi-delta.up { background: rgb(220 252 231); color: rgb(22 101 52); }
.kpi-delta.down { background: rgb(254 226 226); color: rgb(153 27 27); }
.kpi-icon {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.25rem; height: 2.25rem; border-radius: 0.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.kpi-icon.violet { background: rgb(238 242 255); color: rgb(67 56 202); }
.kpi-icon.green  { background: rgb(220 252 231); color: rgb(22 101 52); }
.kpi-icon.amber  { background: rgb(254 243 199); color: rgb(146 64 14); }
.kpi-icon.sky    { background: rgb(224 242 254); color: rgb(7 89 133); }
.kpi-icon.rose   { background: rgb(255 228 230); color: rgb(159 18 57); }
.dark .kpi-icon.violet { background: rgb(49 46 129 / 0.4); color: rgb(199 210 254); }
.dark .kpi-icon.green  { background: rgb(6 78 59 / 0.4);   color: rgb(167 243 208); }
.dark .kpi-icon.amber  { background: rgb(120 53 15 / 0.4); color: rgb(253 230 138); }
.dark .kpi-icon.sky    { background: rgb(12 74 110 / 0.4); color: rgb(186 230 253); }
.dark .kpi-icon.rose   { background: rgb(136 19 55 / 0.4); color: rgb(254 205 211); }
.kpi-icon svg { width: 1.15rem; height: 1.15rem; }

/* --------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  border-radius: .625rem;
  font-weight: 600; font-size: .8rem;
  letter-spacing: 0.01em;
  transition: all .15s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--brand-600); color:#fff; box-shadow: 0 6px 14px -8px rgb(79 70 229 / 0.6); }
.btn-primary:hover { background: var(--brand-700); transform: translateY(-1px); }
.btn-secondary { background: rgb(248 250 252); color: rgb(51 65 85); border-color: rgb(226 232 240); }
.btn-secondary:hover { background: rgb(241 245 249); }
.dark .btn-secondary { background: rgb(30 41 59); color: rgb(226 232 240); border-color: rgb(51 65 85); }
.dark .btn-secondary:hover { background: rgb(51 65 85); }
.btn-danger  { background: rgb(254 226 226); color: rgb(153 27 27); }
.btn-danger:hover  { background: rgb(254 202 202); }
.btn-success { background: rgb(220 252 231); color: rgb(22 101 52); }
.btn-success:hover { background: rgb(187 247 208); }
.btn-ghost { background: transparent; color: rgb(51 65 85); }
.btn-ghost:hover { background: rgb(241 245 249); }
.dark .btn-ghost { color: rgb(203 213 225); }
.dark .btn-ghost:hover { background: rgb(30 41 59); }

/* --------------------------------------------- Badges */
.badge {
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.18rem .55rem; border-radius:9999px;
  font-size:.7rem; font-weight:600;
  letter-spacing: 0.01em;
}
.badge::before { content: ""; width: .35rem; height: .35rem; border-radius: 9999px; background: currentColor; opacity: .65; }
.badge-green { background: rgb(220 252 231); color: rgb(22 101 52); }
.badge-amber { background: rgb(254 243 199); color: rgb(146 64 14); }
.badge-red   { background: rgb(254 226 226); color: rgb(153 27 27); }
.badge-slate { background: rgb(241 245 249); color: rgb(71 85 105); }
.badge-violet{ background: rgb(238 242 255); color: rgb(67 56 202); }
.badge-sky   { background: rgb(224 242 254); color: rgb(7 89 133); }

/* --------------------------------------------- Tables */
th {
  text-align: left;
  padding: 0.7rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgb(100 116 139);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgb(248 250 252);
  border-bottom: 1px solid rgb(226 232 240);
}
.dark th { background: rgb(17 24 39); color: rgb(148 163 184); border-color: rgb(30 41 59); }
td {
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  border-top: 1px solid rgb(241 245 249);
  vertical-align: middle;
}
.dark td { border-color: rgb(30 41 59); }
table { width: 100%; }
tbody tr { transition: background-color 0.12s; }
tbody tr:hover { background: rgb(249 250 251); }
.dark tbody tr:hover { background: rgb(30 41 59 / 0.45); }

/* --------------------------------------------- Inputs */
.input, select.input, textarea.input,
input[type="text"].input, input[type="email"].input, input[type="password"].input {
  width:100%;
  border-radius:.55rem;
  border:1px solid rgb(226 232 240);
  padding:.55rem .8rem;
  font-size:.875rem;
  background: #fff;
  color: rgb(15 23 42);
  transition: border-color .12s, box-shadow .12s;
}
.dark .input, .dark select.input, .dark textarea.input {
  background: rgb(15 23 42);
  border-color: rgb(51 65 85);
  color: rgb(241 245 249);
}
.input:focus { outline:none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgb(99 102 241 / .18); }

/* --------------------------------------------- Misc */
.divider-soft { border-color: rgb(241 245 249); }
.dark .divider-soft { border-color: rgb(30 41 59); }

.topbar-search {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem;
  background: rgb(248 250 252);
  border: 1px solid rgb(226 232 240);
  border-radius: .625rem;
  width: 18rem; max-width: 100%;
  font-size: .8rem;
  color: rgb(100 116 139);
  cursor: pointer;
}
.dark .topbar-search { background: rgb(30 41 59); border-color: rgb(51 65 85); color: rgb(148 163 184); }
.topbar-search kbd {
  margin-left: auto;
  font-family: inherit;
  font-size: .65rem;
  padding: .1rem .35rem;
  border-radius: .25rem;
  background: rgb(241 245 249);
  border: 1px solid rgb(226 232 240);
  color: rgb(71 85 105);
}
.dark .topbar-search kbd { background: rgb(51 65 85); border-color: rgb(71 85 105); color: rgb(203 213 225); }

.scroll-fade-mask {
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}

/* Skeleton bar (loading) */
@keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }
.skeleton {
  background: linear-gradient(90deg, rgb(241 245 249) 0%, rgb(226 232 240) 50%, rgb(241 245 249) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: .375rem;
}

/* Print */
@media print {
  aside, header, .no-print { display: none !important; }
  main { padding: 0 !important; }
}