/* Global background polish + Bootstrap-like form/element consistency */

:root {
  --ui-surface: color-mix(in srgb, var(--bg-card) 88%, white 12%);
  --ui-border: color-mix(in srgb, var(--border) 82%, var(--brand-main) 18%);
  --ui-focus: color-mix(in srgb, var(--brand-main) 74%, var(--brand-accent) 26%);
  --ui-focus-ring: color-mix(in srgb, var(--brand-main) 24%, transparent 76%);
}

body {
  background-color: var(--bg-main);
  background-image: none;
  background-attachment: fixed;
}

html[data-theme='dark'] body {
  background-image:
    radial-gradient(900px 460px at -10% -10%, color-mix(in srgb, var(--brand-main) 22%, transparent 78%) 0%, transparent 70%),
    radial-gradient(760px 420px at 110% -12%, color-mix(in srgb, var(--brand-accent) 20%, transparent 80%) 0%, transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-main) 90%, black 10%) 0%, var(--bg-main) 58%);
}

html[data-theme='light'] body {
  background-image:
    radial-gradient(850px 430px at -10% -10%, color-mix(in srgb, var(--brand-main) 10%, transparent 90%) 0%, transparent 72%),
    radial-gradient(700px 380px at 110% -12%, color-mix(in srgb, var(--brand-accent) 9%, transparent 91%) 0%, transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-main) 97%, white 3%) 0%, var(--bg-main) 62%);
}

main {
  border-radius: 18px;
}

/* Generic field styling */
input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='range']):not([type='file']),
select,
textarea,
.form-control,
.form-select,
.form-input,
.form-textarea {
  width: 100%;
  min-height: 42px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface);
  color: var(--text-main);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

textarea,
.form-textarea {
  min-height: 110px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: var(--text-muted);
  opacity: 0.9;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.form-input:focus,
.form-textarea:focus {
  border-color: var(--ui-focus);
  box-shadow: 0 0 0 3px var(--ui-focus-ring);
  background: var(--bg-card);
}

/* Check/radio parity with bootstrap feel */
.form-check-input,
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--brand-main);
}

.form-label,
label {
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.form-text,
small,
.text-muted {
  color: var(--text-muted) !important;
}

/* Input group compatibility */
.input-group {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > input,
.input-group > select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group-text {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--ui-border);
  border-right: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background: color-mix(in srgb, var(--bg-card) 82%, white 18%);
  color: var(--text-secondary);
}

/* Bootstrap-ish button utilities */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-outline-primary,
.btn-outline-secondary,
.btn-light,
.btn-dark {
  border-radius: 10px;
}

.btn-primary {
  background: var(--brand-gradient);
  border: 1px solid color-mix(in srgb, var(--brand-main) 60%, transparent 40%);
  color: #fff;
}

.btn-outline-primary {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--brand-main) 70%, transparent 30%);
  color: var(--brand-main);
}

.btn-outline-primary:hover {
  background: color-mix(in srgb, var(--brand-main) 14%, transparent 86%);
}

/* Tables/cards common polish */
.table,
table {
  color: var(--text-main);
}

.table th,
table th {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--ui-border);
}

.table td,
table td {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
}

.card,
.card-pro,
.modal-content {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Better auth page compatibility */
.login-card,
.auth-card {
  background: color-mix(in srgb, var(--bg-card) 76%, transparent 24%);
  border: 1px solid color-mix(in srgb, var(--border) 74%, white 26%);
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }

  main {
    border-radius: 12px;
  }
}

/* Hard-enforce consistency for legacy inline-styled forms */
form input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='range']):not([type='file']),
form select,
form textarea,
form .form-control,
form .form-select,
form .form-input,
form .form-textarea,
form .reply-input {
  background: var(--ui-surface) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

form input:focus,
form select:focus,
form textarea:focus,
form .form-control:focus,
form .form-select:focus,
form .form-input:focus,
form .form-textarea:focus,
form .reply-input:focus {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px var(--ui-focus-ring) !important;
  outline: none !important;
}

form input[type='file'] {
  padding: 0.45rem 0.6rem !important;
}

form input::placeholder,
form textarea::placeholder,
form .form-control::placeholder,
form .reply-input::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.9 !important;
}