/*
 * Site foundation: shared buttons, states, inputs and file controls.
 * Extracted from legacy shell core on 2026-04-07.
 */

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 10px 12px;
  min-height: 42px;
  line-height: 1;
  border-radius: var(--btn-radius);
  border:1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text900);
  font-weight: 900;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    filter var(--transition-fast);
}
.btn:hover{
  border-color: var(--btn-border-hover);
  background: var(--btn-bg-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}
.btn:disabled,
.btn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
  filter:none;
}
.btn:disabled:hover,
.btn.is-disabled:hover{
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
}

.btn--ghost{
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
}

.btn--primary{
  border-color: rgba(240,140,40,.55);
  background: linear-gradient(180deg, rgba(240,140,40,.26), rgba(0,0,0,.14));
}
.btn--primary:hover{
  border-color: rgba(63,185,80,.45);
  background: linear-gradient(180deg, rgba(63,185,80,.14), rgba(0,0,0,.16));
}

.btn--danger{
  border-color: rgba(248,81,73,.55);
  background: linear-gradient(180deg, rgba(248,81,73,.18), rgba(0,0,0,.16));
}
.btn--danger:hover{
  border-color: rgba(248,81,73,.70);
  background: linear-gradient(180deg, rgba(248,81,73,.24), rgba(0,0,0,.16));
}

.btn--success{
  border-color: rgba(63,185,80,.55);
  background: linear-gradient(180deg, rgba(63,185,80,.16), rgba(0,0,0,.16));
}
.btn--success:hover{
  border-color: rgba(63,185,80,.75);
  background: linear-gradient(180deg, rgba(63,185,80,.22), rgba(0,0,0,.16));
}


/* Accent alias used across public templates and JS */
.btn--accent,
.btn--primaryAccent{
  border-color: rgba(240,140,40,.64);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(255,190,120,.20), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(240,140,40,.34), rgba(0,0,0,.14));
  color: var(--text900);
}
.btn--accent:hover,
.btn--primaryAccent:hover{
  border-color: rgba(240,140,40,.82);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(255,190,120,.26), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(240,140,40,.42), rgba(0,0,0,.14));
}

/* State aliases for older/newer markup */
.state--success{ border-style: solid; border-color: rgba(63,185,80,.35); background: rgba(63,185,80,.06); }
.state--warning{ border-style: solid; border-color: rgba(255,211,107,.35); background: rgba(255,211,107,.06); }

.state--compact{
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
}
.state--compact .state__icon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
}
.state--soft{
  background:
    radial-gradient(140% 130% at 0% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 62%),
    rgba(0,0,0,.12);
}

.state--dense{ padding: 10px 12px; gap: 8px; }
.state--dense .state__icon{ width: 28px; height: 28px; border-radius: 9px; }
.state--dense .state__text{ margin-top: 2px; }

.stateMount{
  min-height: 116px;
  display: flex;
  align-items: stretch;
}
.stateMount > .state{
  width: 100%;
  margin: 0;
  align-self: stretch;
}
.stateMount--compact{ min-height: 88px; }
.stateMount--dense{ min-height: 72px; }

.loadingNote,
.loadingHintShell{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color: rgba(231,237,243,.86);
  line-height: 1.45;
}
.loadingNote .spinner,
.loadingHintShell .spinner{
  flex:0 0 auto;
  margin-top:1px;
}
.loadingNote__body,
.loadingHintShell__body{ min-width: 0; }
.loadingNote__title,
.loadingHintShell__title{ font-weight: 900; }
.loadingNote__text,
.loadingHintShell__text{ margin-top: 3px; color: rgba(231,237,243,.70); font-size: 13px; }

.emptyState--compact,
.state--compact .state__text{ font-size: 13px; }

.panel__actions,
.profilePanel__footerActions,
.newsFooter__actions,
.state__actions{
  gap: 10px;
}

.ctaRow,
.actionRow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.statusInline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
}

.hint.is-loading,
.hint.is-empty,
.hint.is-error{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height: 20px;
}

.btn--block{ width:100%; }
.btn--icon{ padding: 10px; width: 42px; min-width:42px; }
.btn--icon i{ margin:0; }


/* Inputs */
.input{
  width: 240px;
  padding: 10px 12px;
  min-height: 42px;
  border-radius: var(--control-radius);
  border:1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text900);
  outline:none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.input::placeholder{ color: var(--text700); opacity: .75; }
.input:focus{ border-color: var(--control-focus-border); box-shadow: var(--control-focus-shadow); }
.input:disabled{
  opacity:.60;
  cursor:not-allowed;
  background: rgba(0,0,0,.12);
}
.input--block{ width:100%; }
.input--sm{ padding: 7px 10px; min-height: 36px; font-size: 13px; border-radius: calc(var(--control-radius) - 2px); }
.input--xs{ padding: 6px 8px; min-height: 32px; font-size: 12px; border-radius: calc(var(--control-radius) - 4px); }

/* Select */
.select{
  min-height: 42px;
  padding: 10px 12px;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text900);
  outline:none;
}
.select:focus{ border-color: var(--control-focus-border); box-shadow: var(--control-focus-shadow); }
.select--sm{ padding: 6px 8px; min-height: 34px; font-size: 13px; border-radius: calc(var(--control-radius) - 2px); }

textarea.input{
  width:100%;
  max-width:100%;
  resize:vertical;
  min-height: 116px;
}
input[type="file"].input{
  width:100%;
  max-width:100%;
  padding: 9px 12px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.field__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.field__label{
  font-size:13px;
  font-weight:900;
  color: var(--text900);
  letter-spacing:.01em;
}
.field__meta{
  font-size:12px;
  color: var(--text700);
}
.field__hint{
  font-size:12px;
  line-height:1.55;
  color: var(--text700);
}
.field__counter{
  font-variant-numeric: tabular-nums;
}
.field > .input,
.field > .select,
.field > textarea.input,
.field > select.input{
  width:100%;
  max-width:100%;
}
.siteForm{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.siteForm__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.siteForm__toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.siteForm__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.siteForm__status{
  min-height:20px;
}
.siteForm__status[data-tone="error"]{ color: var(--danger, #ff7d7d); }
.siteForm__status[data-tone="success"]{ color: #91f7b0; }
.siteForm__status[data-tone="info"]{ color: var(--text700); }
.searchField{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 0;
}
.searchField__input{
  width:100%;
  padding-right: 38px;
}
.searchField__icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color: var(--text700);
  pointer-events:none;
}
.searchField--withIcon .searchField__input{
  padding-left: 36px;
}
.searchField__clear{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
}
.siteFilterForm{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.siteFilterForm__group{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 180px;
}
.siteFilterForm__label{
  font-size:12px;
  font-weight:800;
  color: var(--text700);
}
.sitePager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sitePager__meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width: 0;
}
.sitePager__summary{
  font-size: 12px;
  color: var(--text700);
  line-height: 1.45;
}
.fileDrop{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border-radius: 16px;
  border:1px dashed rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14));
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.fileDrop.is-drag,
.fileDrop:hover{
  border-color: rgba(240,140,40,.36);
  background: linear-gradient(180deg, rgba(240,140,40,.07), rgba(0,0,0,.14));
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.fileDrop__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.fileDrop__title{
  font-weight:900;
  color: var(--text900);
}
.fileDrop__text{
  font-size:12px;
  color: var(--text700);
  line-height:1.5;
}
.fileDrop__pick{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.filePreviewGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap:10px;
}
.filePreview{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
  padding:10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.filePreview__thumb{
  width:52px;
  height:52px;
  border-radius:12px;
  object-fit:cover;
  flex:0 0 52px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.filePreview__body{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.filePreview__name{
  font-size:13px;
  font-weight:800;
  color: var(--text900);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.filePreview__meta{
  font-size:12px;
  color: var(--text700);
}