/*
 * Acequia System Stylesheet
 *
 * Shared component classes for system pages and the style book.
 * All values reference --acq-* tokens from acequia-tokens.css.
 * Never define raw color/spacing values here — only var(--acq-*).
 *
 * Usage:
 *   <link rel="stylesheet" href="/styles/system.css">
 *   (tokens are imported automatically)
 */

@import url('/styles/acequia-tokens.css');

/* ─── Base ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--acq-font);
  background: var(--acq-bg-gradient);
  color: var(--acq-text);
  min-height: 100vh;
  line-height: var(--acq-line-height);
  padding: var(--acq-space-xl);
  margin: 0;
}

h1, h2, h3 { color: var(--acq-text-heading); }

a { color: var(--acq-text-link); }

/* ─── Containers ──────────────────────────────────────────────────────── */

.acq-container        { max-width: 900px; margin: 0 auto; }
.acq-container--narrow { max-width: 500px; margin: 40px auto; }

/* ─── Card ────────────────────────────────────────────────────────────── */

.acq-card {
  background: var(--acq-surface-2);
  border: 1px solid var(--acq-border);
  border-radius: var(--acq-radius-xl);
  padding: var(--acq-space-3xl);
  backdrop-filter: blur(10px);
}

.acq-card--flat {
  background: var(--acq-surface-2);
  border: 1px solid var(--acq-border);
  border-radius: var(--acq-radius-lg);
  padding: var(--acq-space-xl);
}

.acq-card__title {
  font-weight: 600;
  color: var(--acq-text-heading);
  margin-bottom: var(--acq-space-sm);
}

.acq-card__muted {
  font-size: var(--acq-font-size-sm);
  color: var(--acq-text-muted);
}

/* ─── Status messages ─────────────────────────────────────────────────── */

.acq-status {
  padding: 12px 16px;
  border-radius: var(--acq-radius-md);
  text-align: center;
  margin-bottom: var(--acq-space-lg);
}

.acq-status--success { background: var(--acq-success-bg); color: var(--acq-success); }
.acq-status--error   { background: var(--acq-error-bg);   color: var(--acq-error); }
.acq-status--info    { background: var(--acq-info-bg);    color: var(--acq-info); }
.acq-status--warning { background: var(--acq-warning-bg); color: var(--acq-warning); }

/* ─── Badges ──────────────────────────────────────────────────────────── */

.acq-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--acq-radius-pill);
  font-size: var(--acq-font-size-xs);
  font-weight: 600;
}

/* Role badges */
.acq-badge--owner   { background: var(--acq-role-owner-bg);   color: var(--acq-role-owner); }
.acq-badge--editor  { background: var(--acq-role-editor-bg);  color: var(--acq-role-editor); }
.acq-badge--viewer  { background: var(--acq-role-viewer-bg);  color: var(--acq-role-viewer); }
.acq-badge--pending { background: var(--acq-role-pending-bg); color: var(--acq-role-pending); }

/* Status badges */
.acq-badge--success { background: var(--acq-success-bg); color: var(--acq-success); }
.acq-badge--error   { background: var(--acq-error-bg);   color: var(--acq-error); }
.acq-badge--warning { background: var(--acq-warning-bg); color: var(--acq-warning); }
.acq-badge--info    { background: var(--acq-info-bg);    color: var(--acq-info); }

/* Semantic badges */
.acq-badge--orange  { background: var(--acq-orange-bg); color: var(--acq-orange); }
.acq-badge--pink    { background: var(--acq-pink-bg);   color: var(--acq-pink); }
.acq-badge--gray    { background: var(--acq-gray-bg);   color: var(--acq-gray); }

/* ─── Buttons ─────────────────────────────────────────────────────────── */

.acq-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--acq-space-sm);
  padding: var(--acq-space-sm) var(--acq-space-lg);
  font-size: var(--acq-font-size-sm);
  font-weight: 600;
  font-family: var(--acq-font);
  color: var(--acq-text-heading);
  border: 1px solid transparent;
  border-radius: var(--acq-radius-md);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all var(--acq-transition);
}

.acq-btn--block   { display: flex; justify-content: center; width: 100%; }
.acq-btn--lg      { padding: 14px 24px; font-size: var(--acq-font-size-lg); }
.acq-btn--sm      { padding: var(--acq-space-xs) var(--acq-space-md); font-size: var(--acq-font-size-xs); }

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

.acq-btn--success       { background: var(--acq-success-solid); color: #fff; }
.acq-btn--success:hover { background: var(--acq-success-hover); }

.acq-btn--danger        { background: var(--acq-error-solid); color: #fff; }
.acq-btn--danger:hover  { filter: brightness(1.1); }

.acq-btn--muted         { background: var(--acq-text-dim); }
.acq-btn--muted:hover   { filter: brightness(1.2); }

.acq-btn--ghost              { background: transparent; color: var(--acq-text); border-color: var(--acq-border); }
.acq-btn--ghost:hover        { background: var(--acq-surface-2); border-color: var(--acq-border-strong); }

.acq-btn:disabled       { opacity: 0.4; cursor: not-allowed; }

/* ─── Form elements ───────────────────────────────────────────────────── */

.acq-input {
  width: 100%;
  padding: var(--acq-space-md);
  background: var(--acq-surface-1);
  border: 1px solid var(--acq-border);
  border-radius: var(--acq-radius-md);
  color: var(--acq-text-heading);
  font-size: var(--acq-font-size);
  font-family: var(--acq-font);
  transition: border-color var(--acq-transition-fast);
}

.acq-input:focus      { outline: none; border-color: var(--acq-accent); }
.acq-input::placeholder { color: var(--acq-text-dim); }
.acq-input--error     { border-color: var(--acq-error); }
.acq-input--valid     { border-color: var(--acq-success); }
.acq-input--mono      { font-family: var(--acq-font-mono); }

.acq-select, .acq-textarea {
  display: block;
  width: 100%;
  padding: var(--acq-space-md);
  background: var(--acq-surface-1);
  border: 1px solid var(--acq-border);
  border-radius: var(--acq-radius-md);
  color: var(--acq-text-heading);
  font-family: var(--acq-font);
  font-size: var(--acq-font-size);
  transition: border-color var(--acq-transition-fast);
}

.acq-select:focus, .acq-textarea:focus {
  outline: none;
  border-color: var(--acq-accent);
}

.acq-label {
  display: block;
  color: var(--acq-text-muted);
  font-size: var(--acq-font-size);
  margin-bottom: 6px;
}

/* ─── Data / info rows ────────────────────────────────────────────────── */

.acq-info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--acq-border-subtle);
}

.acq-info-row:last-child { border-bottom: none; }

.acq-info-row__label { color: var(--acq-text-muted); }
.acq-info-row__value { color: var(--acq-text-heading); font-family: var(--acq-font-mono); }

/* ─── Online indicator ────────────────────────────────────────────────── */

.acq-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.acq-online-dot--on  { background: var(--acq-success-solid); box-shadow: 0 0 4px var(--acq-success-solid); }
.acq-online-dot--off { background: var(--acq-text-dim); }

/* ─── Status pill (compact badge for connection state) ────────────────── */

.acq-status-pill {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: var(--acq-radius-pill);
  white-space: nowrap;
}

.acq-status-pill--ready      { background: var(--acq-success-bg); color: var(--acq-success); }
.acq-status-pill--connecting { background: var(--acq-warning-bg); color: var(--acq-warning); }
.acq-status-pill--error      { background: var(--acq-error-bg);   color: var(--acq-error); }

/* ─── Theme toggle ────────────────────────────────────────────────────── */

.acq-theme-toggle {
  position: fixed;
  top: var(--acq-space-lg);
  right: var(--acq-space-lg);
  z-index: var(--acq-z-dropdown);
  background: var(--acq-surface-2);
  border: 1px solid var(--acq-border);
  border-radius: var(--acq-radius-pill);
  padding: var(--acq-space-xs) var(--acq-space-md);
  cursor: pointer;
  font-size: var(--acq-font-size-sm);
  color: var(--acq-text-muted);
  transition: all var(--acq-transition-fast);
  backdrop-filter: blur(10px);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: var(--acq-space-xs);
}

.acq-theme-toggle:hover {
  border-color: var(--acq-border-strong);
  color: var(--acq-text);
}

/* ─── Tool surfaces ───────────────────────────────────────────────────── *
 *
 * The compact density for working UI: a component's shadow root, or a tool
 * app's page (WebDavSync). Scope with `.acq-tool` on a container (or on
 * <body>); inside it, bare <button>, <input>, <select> and <textarea> take
 * the compact look, so markup stays plain. The page-scale classes above
 * (.acq-card, .acq-btn, .acq-input) are for system pages — login, dashboard.
 *
 * The scope is wrapped in :where() so it adds no specificity: a modifier
 * such as .acq-btn--primary still wins over the bare-button default.
 *
 * A component uses these by linking this file inside its shadow root —
 *   <link rel="stylesheet" href="/styles/system.css">
 * — where the document rules above (body, headings) match nothing. The
 * tokens come from the page; see ensureTokens() in /components/system-styles.js
 * for hosts that do not load them.
 */

:where(.acq-tool) {
  font-family: var(--acq-font);
  font-size: var(--acq-font-size);
  color: var(--acq-text);
}

:where(.acq-tool) button {
  font: inherit;
  font-size: var(--acq-font-size-sm);
  padding: 6px 12px;
  border-radius: var(--acq-radius-sm);
  border: 1px solid var(--acq-border);
  background: var(--acq-surface-2);
  color: var(--acq-text);
  cursor: pointer;
  white-space: nowrap;
}
:where(.acq-tool) button:hover:not(:disabled) { border-color: var(--acq-border-strong); }
:where(.acq-tool) button:disabled { opacity: 0.45; cursor: default; }

/* The fills: the page-scale modifiers, with a border to match. */
:where(.acq-tool) .acq-btn--primary { border-color: var(--acq-accent); }
:where(.acq-tool) .acq-btn--primary:hover:not(:disabled) { border-color: var(--acq-accent-hover); }
:where(.acq-tool) .acq-btn--success { border-color: var(--acq-success-solid); }
:where(.acq-tool) .acq-btn--success:hover:not(:disabled) { border-color: var(--acq-success-hover); }
:where(.acq-tool) .acq-btn--danger { border-color: var(--acq-error-solid); }
/* A row action: small. */
:where(.acq-tool) .acq-btn--sm { padding: 2px 7px; font-size: var(--acq-font-size-xs); }
/* No chrome: a disclosure toggle, a close ×. */
.acq-btn--bare {
  padding: 0 4px;
  border: none;
  background: none;
  color: var(--acq-text-muted);
  font-size: var(--acq-font-size-xxs);
}
.acq-btn--bare:hover:not(:disabled) { color: var(--acq-text-heading); }
/* Brief feedback on a button — a connection test, a copy — set from script. */
:where(.acq-tool) button[data-flash='success'] { background: var(--acq-success-solid); border-color: var(--acq-success-solid); color: #fff; }
:where(.acq-tool) button[data-flash='error']   { background: var(--acq-error-solid);   border-color: var(--acq-error-solid);   color: #fff; }
:where(.acq-tool) button[data-flash='pending'] { background: var(--acq-warning-bg);    border-color: var(--acq-warning-bg);    color: var(--acq-warning); }

:where(.acq-tool) :is(input:not([type='checkbox'], [type='radio']), select, textarea) {
  width: 100%;
  font: inherit;
  font-size: var(--acq-font-size-sm);
  color: var(--acq-text);
  background: var(--acq-surface-0);
  border: 1px solid var(--acq-border);
  border-radius: var(--acq-radius-sm);
  padding: 6px 8px;
}
:where(.acq-tool) :is(input, select, textarea):focus { outline: none; border-color: var(--acq-accent); }
:where(.acq-tool) input::placeholder { color: var(--acq-text-dim); }
:where(.acq-tool) textarea { font-family: var(--acq-font-mono); font-size: var(--acq-font-size-xs); resize: vertical; }
:where(.acq-tool) :is(input[type='checkbox'], input[type='radio']) { margin: 0 6px 0 0; }

:where(.acq-tool) .acq-label {
  font-size: var(--acq-font-size-xs);
  margin-bottom: var(--acq-space-xs);
}
:where(.acq-tool) .acq-status {
  margin-bottom: 0;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--acq-radius-sm);
  font-size: var(--acq-font-size-sm);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Panel — the tool card. */
.acq-panel {
  padding: var(--acq-space-md);
  background: var(--acq-surface-1);
  border: 1px solid var(--acq-border);
  border-radius: var(--acq-radius-lg);
}
.acq-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--acq-space-sm);
}
.acq-panel__title { margin: 0; font-size: var(--acq-font-size); color: var(--acq-text-heading); }
.acq-panel__summary { font-size: var(--acq-font-size-xs); color: var(--acq-text-muted); }
.acq-section-title {
  margin: 10px 0 4px;
  font-size: var(--acq-font-size-xs);
  font-weight: normal;
  color: var(--acq-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Row — one item in a list, its actions on the right. */
.acq-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--acq-space-sm);
  padding: 4px 6px;
  border-radius: var(--acq-radius-xs);
}
.acq-row:hover { background: var(--acq-surface-2); }
.acq-row__actions { display: flex; gap: var(--acq-space-xs); flex-shrink: 0; }

/* Dialog — an opaque box over a dimmed page. */
.acq-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--acq-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acq-backdrop);
}
.acq-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  background: var(--acq-bg-dark-1);
  color: var(--acq-text);
  border: 1px solid var(--acq-border);
  border-radius: var(--acq-radius-lg);
  box-shadow: var(--acq-shadow-lg);
}
.acq-dialog__header,
.acq-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--acq-space-sm);
  flex-wrap: wrap;
  padding: var(--acq-space-md) var(--acq-space-lg);
}
.acq-dialog__header { border-bottom: 1px solid var(--acq-border-subtle); }
.acq-dialog__footer { border-top: 1px solid var(--acq-border-subtle); }
.acq-dialog__title { margin: 0; font-size: var(--acq-font-size); color: var(--acq-text-heading); }
.acq-dialog__body { flex: 1; min-height: 0; overflow: auto; padding: var(--acq-space-lg); }

/* ─── Utilities ───────────────────────────────────────────────────────── */

.hidden     { display: none; }
.text-mono  { font-family: var(--acq-font-mono); }
.text-center { text-align: center; }
.text-muted { color: var(--acq-text-muted); }