/* ---------- Utilities ---------- */
.is-hidden { display: none !important; }

.card--narrow { max-width: 560px; }
.card--wide   { max-width: 720px; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 1rem !important; }
.mt-075 { margin-top: .75rem !important; }

.mb-1 { margin-bottom: 1rem !important; }

.m-0 { margin: 0 !important; }

.text-muted { color: var(--muted) !important; }
.text-danger { color: #ef4444 !important; }

.opacity-60 { opacity: .6 !important; }
.opacity-80 { opacity: .8 !important; }

.grid-12 { display: grid; gap: 12px; }
.grid-10 { display: grid; gap: 10px; }

.flex-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Scrollable containers ---------- */
.scroll-y-340 { overflow: auto; max-height: 340px; }
.scroll-auto  { overflow: auto; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.th-left-6 th { text-align: left; padding: 6px; }
.th-left-8 th { text-align: left; padding: 8px; }

.td-6 td { padding: 6px; }
.td-8 td { padding: 8px; }

.tr-border td { border-top: 1px solid var(--border); }

.mono-12 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

/* ---------- Card accents ---------- */
.card-accent-warning { border-left: 6px solid #f2c94c; }
.card-accent-primary { border-left: 6px solid var(--primary); }

/* ---------- Form controls (for kit-settings select etc.) ---------- */
.label-block-strong { display: block; margin-top: 1rem; font-weight: 700; }

.select-full {
  width: 100%;
  padding: .6rem .75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

/* Progress widths via class (CSP-safe, no inline style) */
.pct-0 { width: 0%; }
.pct-1 { width: 1%; }
.pct-2 { width: 2%; }
.pct-3 { width: 3%; }
.pct-4 { width: 4%; }
.pct-5 { width: 5%; }
.pct-6 { width: 6%; }
.pct-7 { width: 7%; }
.pct-8 { width: 8%; }
.pct-9 { width: 9%; }
.pct-10 { width: 10%; }
.pct-11 { width: 11%; }
.pct-12 { width: 12%; }
.pct-13 { width: 13%; }
.pct-14 { width: 14%; }
.pct-15 { width: 15%; }
.pct-16 { width: 16%; }
.pct-17 { width: 17%; }
.pct-18 { width: 18%; }
.pct-19 { width: 19%; }
.pct-20 { width: 20%; }
.pct-21 { width: 21%; }
.pct-22 { width: 22%; }
.pct-23 { width: 23%; }
.pct-24 { width: 24%; }
.pct-25 { width: 25%; }
.pct-26 { width: 26%; }
.pct-27 { width: 27%; }
.pct-28 { width: 28%; }
.pct-29 { width: 29%; }
.pct-30 { width: 30%; }
.pct-31 { width: 31%; }
.pct-32 { width: 32%; }
.pct-33 { width: 33%; }
.pct-34 { width: 34%; }
.pct-35 { width: 35%; }
.pct-36 { width: 36%; }
.pct-37 { width: 37%; }
.pct-38 { width: 38%; }
.pct-39 { width: 39%; }
.pct-40 { width: 40%; }
.pct-41 { width: 41%; }
.pct-42 { width: 42%; }
.pct-43 { width: 43%; }
.pct-44 { width: 44%; }
.pct-45 { width: 45%; }
.pct-46 { width: 46%; }
.pct-47 { width: 47%; }
.pct-48 { width: 48%; }
.pct-49 { width: 49%; }
.pct-50 { width: 50%; }
.pct-51 { width: 51%; }
.pct-52 { width: 52%; }
.pct-53 { width: 53%; }
.pct-54 { width: 54%; }
.pct-55 { width: 55%; }
.pct-56 { width: 56%; }
.pct-57 { width: 57%; }
.pct-58 { width: 58%; }
.pct-59 { width: 59%; }
.pct-60 { width: 60%; }
.pct-61 { width: 61%; }
.pct-62 { width: 62%; }
.pct-63 { width: 63%; }
.pct-64 { width: 64%; }
.pct-65 { width: 65%; }
.pct-66 { width: 66%; }
.pct-67 { width: 67%; }
.pct-68 { width: 68%; }
.pct-69 { width: 69%; }
.pct-70 { width: 70%; }
.pct-71 { width: 71%; }
.pct-72 { width: 72%; }
.pct-73 { width: 73%; }
.pct-74 { width: 74%; }
.pct-75 { width: 75%; }
.pct-76 { width: 76%; }
.pct-77 { width: 77%; }
.pct-78 { width: 78%; }
.pct-79 { width: 79%; }
.pct-80 { width: 80%; }
.pct-81 { width: 81%; }
.pct-82 { width: 82%; }
.pct-83 { width: 83%; }
.pct-84 { width: 84%; }
.pct-85 { width: 85%; }
.pct-86 { width: 86%; }
.pct-87 { width: 87%; }
.pct-88 { width: 88%; }
.pct-89 { width: 89%; }
.pct-90 { width: 90%; }
.pct-91 { width: 91%; }
.pct-92 { width: 92%; }
.pct-93 { width: 93%; }
.pct-94 { width: 94%; }
.pct-95 { width: 95%; }
.pct-96 { width: 96%; }
.pct-97 { width: 97%; }
.pct-98 { width: 98%; }
.pct-99 { width: 99%; }
.pct-100 { width: 100%; }

/* =========================
   FORM BASE STYLES
========================= */

label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Focus state */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.15);
}

/* Disabled */
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Textareas */
textarea {
  resize: vertical;
  min-height: 80px;
}

/* Select arrow consistency */
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px),
                       calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Inline form (logout etc.) */
.inline-form {
  display: inline;
}