/* Reusable enterprise components (no framework required) */

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.card .card-inner{ padding: var(--s-7); }

.badge{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  font-size: var(--fs-1);
  color: var(--text-2);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  text-decoration:none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
  white-space: nowrap;
}
.btn:hover{ text-decoration:none; background: rgba(255,255,255,.08); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn.primary{
  background: linear-gradient(135deg, rgba(14,165,233,.92), rgba(34,197,94,.72));
  border-color: rgba(255,255,255,.14);
  color: #041019;
}
html[data-theme="light"] .btn.primary{ color:#041019; }

.btn.ghost{
  background: transparent;
}

.input, .select, .textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible{ box-shadow: var(--focus-2); }

.grid{
  display:grid;
  gap: var(--s-6);
}
@media (min-width: 900px){
  .grid.cols-2{ grid-template-columns: 1.1fr .9fr; }
  .grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(10,18,32,.82), rgba(10,18,32,.58));
  border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .topbar{
  background: rgba(246,248,252,.78);
}
.topbar .inner{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--s-4);
}

.nav{
  display:flex; align-items:center; gap: 10px;
}
.nav a{
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--text-2);
  text-decoration:none;
}
.nav a:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
  text-decoration:none;
}

.logo{
  display:flex; align-items:center; gap: 10px; text-decoration:none;
}
.logo-mark{
  width: 34px; height: 34px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), transparent 55%),
              linear-gradient(135deg, rgba(14,165,233,.95), rgba(34,197,94,.78));
  box-shadow: 0 12px 30px rgba(14,165,233,.18);
}
.logo-title{ font-weight: 800; letter-spacing: .2px; }
.logo-sub{ color: var(--text-3); font-size: var(--fs-1); line-height: 1.1; }

.footer{
  padding: var(--s-9) 0;
  color: var(--text-2);
}
.footer a{ color: var(--text-2); }
.footer a:hover{ color: var(--text); }
.footer .cols{
  display:grid;
  gap: var(--s-7);
}
@media (min-width: 900px){
  .footer .cols{ grid-template-columns: 1.2fr 1fr 1fr 1fr; }
}

.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display:none;
  z-index: 200;
}
.modal-backdrop[data-open="true"]{ display:block; }

.modal{
  position: fixed;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  width: min(900px, calc(100% - 2*var(--s-6)));
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  padding: var(--s-6);
}

.command-input{
  display:flex;
  gap: var(--s-3);
  align-items:center;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
}
.command-input input{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 6px 0;
}
.command-results{
  margin-top: var(--s-4);
  max-height: 50vh;
  overflow:auto;
  border-radius: 16px;
  border: 1px solid var(--border);
}
.command-item{
  display:flex;
  gap: var(--s-4);
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
  cursor:pointer;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.command-item:hover{ background: rgba(14,165,233,.10); }
.command-item[aria-selected="true"]{
  background: rgba(34,197,94,.14);
  outline:none;
}

.toast-wrap{
  position: fixed;
  right: var(--s-6);
  bottom: var(--s-6);
  z-index: 300;
  display:flex;
  flex-direction: column;
  gap: var(--s-3);
}
.toast{
  width: min(420px, calc(100vw - 2*var(--s-6)));
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.skeleton{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border-radius: 14px;
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:-20%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-35%);
  animation: shimmer 1.15s infinite;
}
@keyframes shimmer{
  100%{ transform: translateX(35%); }
}