/*
 * /css/components.css
 * Єдині компоненти VMEREGI поверх Bootstrap та legacy CSS.
 */

html{font-family:var(--vm-font-sans)}
body{font-family:var(--vm-font-sans);color:var(--vm-text)}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid transparent;
  box-shadow:var(--vm-focus)!important;
}

.vm-skip-link{
  position:fixed;
  left:16px;
  top:10px;
  z-index:3000;
  transform:translateY(-150%);
  padding:10px 14px;
  border-radius:var(--vm-radius-sm);
  color:#fff;
  background:var(--vm-primary);
  font-weight:800;
  text-decoration:none;
  transition:transform .18s ease;
}
.vm-skip-link:focus{transform:translateY(0)}

.vm-ui-icon{width:1.2em;height:1.2em;display:block;flex:0 0 auto}

.vm-ui-avatar{
  --vm-avatar-size:40px;
  width:var(--vm-avatar-size);
  height:var(--vm-avatar-size);
  display:inline-grid;
  place-items:center;
  flex:0 0 var(--vm-avatar-size);
  overflow:hidden;
  border:2px solid color-mix(in srgb,var(--vm-surface) 72%,transparent);
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,var(--vm-primary),var(--vm-accent));
  box-shadow:0 5px 16px rgba(35,43,90,.16);
  font-size:calc(var(--vm-avatar-size) * .31);
  font-weight:850;
}
.vm-ui-avatar img{width:100%;height:100%;display:block;object-fit:cover;background:var(--vm-surface-soft)}
.vm-ui-avatar-fallback{letter-spacing:-.03em}

.card-app,
.card:not(.border-0),
.vm-surface{
  color:var(--vm-text);
  border:1px solid var(--vm-border)!important;
  border-radius:var(--vm-radius)!important;
  background:var(--vm-surface-glass)!important;
  box-shadow:var(--vm-shadow-sm)!important;
  backdrop-filter:blur(18px) saturate(128%);
}
.card-app:hover{border-color:var(--vm-border-strong)!important;box-shadow:var(--vm-shadow)!important}
.card-header,.card-footer{color:var(--vm-text);border-color:var(--vm-border);background:color-mix(in srgb,var(--vm-surface-soft) 82%,transparent)}

.btn{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--vm-radius-sm);
  font-weight:750;
  letter-spacing:-.01em;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{min-height:34px;border-radius:10px}
.btn-lg{min-height:48px;border-radius:14px}
.btn-primary{
  border-color:transparent!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--vm-primary),#6f72fa)!important;
  box-shadow:0 10px 24px rgba(91,93,240,.24)!important;
}
.btn-primary:hover,.btn-primary:focus{background:linear-gradient(135deg,var(--vm-primary-strong),var(--vm-primary))!important;box-shadow:0 14px 30px rgba(91,93,240,.32)!important}
.btn-outline-primary{color:var(--vm-primary);border-color:var(--vm-border-strong);background:color-mix(in srgb,var(--vm-surface) 90%,transparent)}
.btn-outline-primary:hover{color:#fff;background:var(--vm-primary);border-color:var(--vm-primary)}
.btn-light,.btn-outline-secondary{color:var(--vm-text-soft);border-color:var(--vm-border);background:var(--vm-surface)}
.btn-light:hover,.btn-outline-secondary:hover{color:var(--vm-primary-strong);border-color:var(--vm-border-strong);background:var(--vm-primary-soft)}

.form-control,.form-select,.input-group-text{
  min-height:44px;
  color:var(--vm-text);
  border:1px solid var(--vm-border);
  border-radius:var(--vm-radius-sm);
  background:var(--vm-surface);
  box-shadow:none;
}
.form-control::placeholder{color:color-mix(in srgb,var(--vm-muted) 82%,transparent)}
.form-control:focus,.form-select:focus{color:var(--vm-text);border-color:var(--vm-primary);background:var(--vm-surface);box-shadow:var(--vm-focus)}
.input-group>.form-control:not(:last-child),.input-group>.form-select:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.input-group>.btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0}
.form-check-input{border-color:var(--vm-border-strong);background-color:var(--vm-surface)}
.form-check-input:checked{border-color:var(--vm-primary);background-color:var(--vm-primary)}
.form-label{color:var(--vm-text-soft);font-weight:700}
.form-text,.text-muted{color:var(--vm-muted)!important}

.nav-pills{
  gap:6px;
  padding:4px;
  border:1px solid var(--vm-border);
  border-radius:14px;
  background:var(--vm-surface-soft);
}
.nav-pills .nav-link{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:var(--vm-text-soft);
  font-weight:720;
  white-space:nowrap;
}
.nav-pills .nav-link:hover{color:var(--vm-primary);background:var(--vm-primary-soft)}
.nav-pills .nav-link.active{color:#fff;background:linear-gradient(135deg,var(--vm-primary),#6f72fa);box-shadow:0 8px 18px rgba(91,93,240,.22)}

.dropdown-menu{
  color:var(--vm-text);
  border:1px solid var(--vm-border)!important;
  border-radius:16px!important;
  background:var(--vm-surface)!important;
  box-shadow:var(--vm-shadow)!important;
}
.dropdown-item{color:var(--vm-text-soft);border-radius:10px}
.dropdown-item:hover,.dropdown-item:focus{color:var(--vm-primary-strong);background:var(--vm-primary-soft)}
.dropdown-divider{border-color:var(--vm-border)}

.modal-content{color:var(--vm-text);border:1px solid var(--vm-border);border-radius:var(--vm-radius-lg);background:var(--vm-surface);box-shadow:var(--vm-shadow-lg)}
.modal-header,.modal-footer{border-color:var(--vm-border)}
.modal-backdrop.show{opacity:.66;background:var(--vm-overlay)}

.alert{
  position:relative;
  border-radius:15px;
  border-width:1px;
  box-shadow:var(--vm-shadow-xs);
}
.alert-success{color:color-mix(in srgb,var(--vm-success) 76%,var(--vm-text));border-color:color-mix(in srgb,var(--vm-success) 28%,transparent);background:color-mix(in srgb,var(--vm-success) 12%,var(--vm-surface))}
.alert-danger{color:color-mix(in srgb,var(--vm-danger) 78%,var(--vm-text));border-color:color-mix(in srgb,var(--vm-danger) 28%,transparent);background:color-mix(in srgb,var(--vm-danger) 11%,var(--vm-surface))}
.alert-warning{color:color-mix(in srgb,var(--vm-warning) 75%,var(--vm-text));border-color:color-mix(in srgb,var(--vm-warning) 30%,transparent);background:color-mix(in srgb,var(--vm-warning) 12%,var(--vm-surface))}

.badge{border-radius:var(--vm-radius-pill);font-weight:800}

.table{--bs-table-bg:transparent;--bs-table-color:var(--vm-text);--bs-table-striped-bg:var(--vm-surface-soft);--bs-table-hover-bg:var(--vm-primary-soft);color:var(--vm-text)}
.table thead th{color:var(--vm-muted);border-color:var(--vm-border);background:var(--vm-surface-soft)}
.table td,.table th{border-color:var(--vm-border)}
.table-responsive{border:1px solid var(--vm-border);border-radius:15px;background:var(--vm-surface)}

.vm-empty-state,
.vm-error-state,
.vm-loading-state{
  display:grid;
  place-items:center;
  gap:10px;
  min-height:220px;
  padding:32px;
  border:1px dashed var(--vm-border-strong);
  border-radius:var(--vm-radius);
  color:var(--vm-muted);
  background:var(--vm-surface-soft);
  text-align:center;
}
.vm-state-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:18px;color:var(--vm-primary);background:var(--vm-primary-soft)}
.vm-state-icon .vm-ui-icon{width:26px;height:26px}

.vm-skeleton{
  position:relative;
  overflow:hidden;
  min-height:14px;
  border-radius:var(--vm-radius-xs);
  background:color-mix(in srgb,var(--vm-muted) 13%,var(--vm-surface));
}
.vm-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--vm-surface) 72%,transparent),transparent);
  animation:vm-skeleton 1.35s infinite;
}
@keyframes vm-skeleton{to{transform:translateX(100%)}}

.vm-toast-stack{position:fixed;right:18px;top:calc(var(--vm-topbar-height) + 18px);z-index:2100;display:grid;gap:10px;width:min(380px,calc(100vw - 24px))}
.vm-toast{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:14px;border:1px solid var(--vm-border);border-radius:15px;color:var(--vm-text);background:var(--vm-surface);box-shadow:var(--vm-shadow)}
.vm-toast-close{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:9px;color:var(--vm-muted);background:transparent}
.vm-toast-close:hover{color:var(--vm-text);background:var(--vm-surface-soft)}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .lp-card-feed,
html[data-theme="dark"] .vm-menu-box,
html[data-theme="dark"] .comment,
html[data-theme="dark"] .poll-opt,
html[data-theme="dark"] .poll-res,
html[data-theme="dark"] .vm-repost-box{
  color:var(--vm-text)!important;
  border-color:var(--vm-border)!important;
  background:var(--vm-surface)!important;
}
html[data-theme="dark"] .text-dark{color:var(--vm-text)!important}
html[data-theme="dark"] .border{border-color:var(--vm-border)!important}
html[data-theme="dark"] .btn-close{filter:invert(1) grayscale(100%) brightness(180%)}

@media (prefers-reduced-motion:reduce){
  .vm-skeleton::after{animation:none}
}