/*
 * base.css - basic look of text, buttons, form fields, alerts. Colours come from theme.css.
 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 15px; line-height: 1.45;
  background: var(--bg); color: var(--text);
  transition: background .25s, color .25s;
}
/* soft coloured glow behind everything - this is what makes the glass look "glassy" */
body.panel::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 420px at 8% 12%, var(--blob-1), transparent 70%),
    radial-gradient(520px 420px at 92% 18%, var(--blob-2), transparent 70%),
    radial-gradient(560px 460px at 55% 100%, var(--blob-3), transparent 70%);
}
a { color: var(--primary); }
h1, h2 { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.grow { flex: 1; }
.nw { white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.ic { flex: none; vertical-align: middle; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  background: var(--seg-bg); color: var(--text); text-decoration: none;
  padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; font-family: inherit;
}
.btn:hover { filter: brightness(1.06); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; }

/* form fields */
label { display: block; margin: 10px 0 4px; font-size: 13px; color: var(--muted); }
label.chk { display: flex; align-items: center; gap: 8px; color: var(--text); margin: 6px 0; font-size: 14px; }
.fc, .zone {
  width: 100%; padding: 9px 11px; border-radius: 10px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text);
}
.fc:focus, .zone:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); }

/* messages */
.alert { padding: 11px 14px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; }
.a-ok  { background: rgba(18, 161, 80, .16); color: var(--ok); border: 1px solid rgba(18, 161, 80, .35); }
.a-err { background: rgba(229, 72, 77, .14); color: var(--danger); border: 1px solid rgba(229, 72, 77, .35); }

/* centred box used by install.php */
body.center { display: flex; align-items: center; justify-content: center; padding: 16px; }
.box { background: var(--surface-solid); border: 1px solid var(--border); border-radius: 18px; padding: 24px; width: 100%; max-width: 460px; box-shadow: var(--shadow); }

/* helpers to show/hide things on phones */
.only-mobile { display: none !important; }
@media (max-width: 820px) { .only-mobile { display: inline-flex !important; } }
@media (max-width: 520px) { .hide-small { display: none !important; } }

/* The appearance icon shows ONLY the icon of the current choice (theme.js sets data-theme-pref) */
.ti-light, .ti-dark, .ti-system { display: none; }
html[data-theme-pref="light"]  .ti-light  { display: inline-flex; }
html[data-theme-pref="dark"]   .ti-dark   { display: inline-flex; }
html[data-theme-pref="system"] .ti-system { display: inline-flex; }