/**
 * admin-ui-defaults.css
 * Phase 2A Module 2 — Default UI Settings admin panel.
 *
 * Visual language matches admin-site-config.css — section cards, field
 * grids, pill toggles, status bar. All rules self-contained here (per
 * project rule: no CSS inside PHP/HTML/JS files).
 *
 * Token-converted 2026-05-12 — every sizing/spacing/typography value
 * routes through fretly-tokens.css so .uid-btn / .uid-select / .uid-input
 * / .uid-toggle scale uniformly with the user's Interface size + Density.
 */

/* ── Panel wrapper ─────────────────────────────────────────────────────── */
.uid-panel {
  max-width: 58.5714rem;     /* ~820 px */
  margin: 0 auto;
}

.uid-panel .uid-intro {
  color: var(--text-2);
  font-size: var(--font-sm);
  line-height: 1.55;
  margin: 0 0 var(--space-lg);
}

/* ── Status bar ────────────────────────────────────────────────────────── */
.uid-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border: var(--border-w, 1px) solid var(--border);
  border-radius: var(--r-sm, var(--radius-md, 6px));
}

.uid-statusbar .uid-status-text {
  font-size: var(--font-sm);
  color: var(--text-2);
}

.uid-statusbar .uid-status-text.dirty { color: var(--accent); font-weight: var(--weight-medium); }
.uid-statusbar .uid-status-text.ok    { color: var(--ok, #2ecc71); font-weight: var(--weight-medium); }
.uid-statusbar .uid-status-text.err   { color: var(--danger, #e74c3c); font-weight: var(--weight-medium); }

.uid-statusbar-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* ── Buttons (mirror site-config pattern) ──────────────────────────────── */
.uid-btn {
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--r-sm, var(--radius-md, 6px));
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: var(--border-w, 1px) solid transparent;
  transition: background var(--t-fast, .15s), color var(--t-fast, .15s), opacity var(--t-fast, .15s);
}

.uid-btn:disabled {
  opacity: .45;
  cursor: default;
}

.uid-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.uid-btn.primary:hover:not(:disabled) {
  filter: brightness(1.1);
}

.uid-btn.ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}

.uid-btn.ghost:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}

/* ── Section grouping ──────────────────────────────────────────────────── */
.uid-section {
  background: var(--surface);
  border: var(--border-w, 1px) solid var(--border);
  border-radius: var(--r, var(--radius-md, 8px));
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  margin: 0 0 var(--space-lg);
}

.uid-section-title {
  font-size: var(--font-base);
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin: 0 0 var(--space-md);
  padding: 0 0 var(--space-sm);
  border-bottom: var(--border-w, 1px) solid var(--border);
}

/* ── Field row ─────────────────────────────────────────────────────────── */
.uid-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--border-w, 1px) solid var(--border);
}

.uid-field:last-child {
  border-bottom: none;
}

.uid-field-label {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
}

.uid-field-hint {
  display: block;
  font-size: var(--font-xs);
  font-weight: var(--weight-normal);
  color: var(--text-2);
  margin-top: var(--space-2xs);
}

.uid-field-control {
  flex: 0 0 auto;
  min-width: 10rem;          /* ~140 px */
  max-width: 15.7143rem;     /* ~220 px */
}

/* ── Select ────────────────────────────────────────────────────────────── */
.uid-select {
  width: 100%;
  height: var(--ctl-h-md, 34px);
  padding: 0 var(--space-xl) 0 var(--space-sm);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  background: var(--surface-2);
  border: var(--border-w, 1px) solid var(--border);
  border-radius: var(--r-sm, var(--radius-md, 6px));
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  cursor: pointer;
  transition: border-color var(--t-fast, .15s);
}

.uid-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--border-w-thick, 2px) rgba(232, 133, 74, .2);
}

/* ── Text input ────────────────────────────────────────────────────────── */
.uid-input {
  width: 100%;
  height: var(--ctl-h-md, 34px);
  padding: 0 var(--space-sm);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  background: var(--surface-2);
  border: var(--border-w, 1px) solid var(--border);
  border-radius: var(--r-sm, var(--radius-md, 6px));
  transition: border-color var(--t-fast, .15s);
}

.uid-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--border-w-thick, 2px) rgba(232, 133, 74, .2);
}

/* ── Toggle switch (for panel booleans) ────────────────────────────────── */
.uid-toggle {
  position: relative;
  display: inline-block;  /* inline <label> ignores width/height — the
                             track/knob are position:absolute, so without
                             this the switch collapses to 0×0 (invisible). */
  width: 3rem;        /* ~42 px */
  height: 1.7143rem;  /* ~24 px */
  flex-shrink: 0;
}

.uid-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.uid-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  transition: background var(--t-normal, .2s);
}

.uid-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.2857rem;     /* ~18 px */
  height: 1.2857rem;
  background: #fff;
  border-radius: var(--radius-full, 50%);
  transition: transform var(--t-normal, .2s);
}

.uid-toggle input:checked + .uid-toggle-track {
  background: var(--accent);
}

.uid-toggle input:checked + .uid-toggle-track::after {
  transform: translateX(1.2857rem);
}

.uid-toggle input:focus-visible + .uid-toggle-track {
  box-shadow: 0 0 0 var(--border-w-thick, 2px) rgba(232, 133, 74, .3);
}

/* ── Number input (toast duration) ─────────────────────────────────────── */
.uid-number {
  width: 6.4286rem;     /* ~90 px */
  height: var(--ctl-h-md, 34px);
  padding: 0 var(--space-sm);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  background: var(--surface-2);
  border: var(--border-w, 1px) solid var(--border);
  border-radius: var(--r-sm, var(--radius-md, 6px));
  text-align: right;
  transition: border-color var(--t-fast, .15s);
}

.uid-number:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--border-w-thick, 2px) rgba(232, 133, 74, .2);
}

/* ── Loading state ─────────────────────────────────────────────────────── */
.uid-loading {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  color: var(--text-2);
  font-size: var(--font-sm);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .uid-field {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .uid-field-control {
    width: 100%;
    max-width: none;
  }

  .uid-statusbar {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ── Diagram-styles matrix (admin > Appearance > Diagram styles) ── */
.uid-style-matrix { display: flex; flex-direction: column; gap: 2px; min-width: 340px; }
.uid-sm-row { display: grid; grid-template-columns: 1fr 80px 80px; align-items: center;
  padding: 4px 8px; border-radius: 6px; }
.uid-sm-row:nth-child(even) { background: rgba(0,0,0,0.03); }
.uid-sm-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted, #888); background: none !important; }
.uid-sm-name { font-size: 13px; }
.uid-sm-col { display: flex; justify-content: center; }
.uid-sm-default .uid-sm-name { font-weight: 600; }