/* ══════════════════════════════════════════════════════════════════════════════
   Aquapony3D — Design System
   All shared UI component styles. Imported by index.html and design-system.html.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --ui-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-radius:      10px;
  --ui-radius-sm:   6px;
  --ui-shadow:      0 4px 20px rgba(0,0,0,0.08);
  --ui-border:      #e0e0e0;
  --ui-border-light:#f0f0f0;
  --ui-bg:          #fff;
  --ui-bg-hover:    #e8eeff;
  --ui-bg-muted:    #fafafa;
  --ui-bg-page:     #f0f0f0;
  --ui-text:        #333;
  --ui-text-muted:  #888;
  --ui-text-label:  #999;
  --ui-text-dim:    #555;
  --ui-accent:      #2563eb;
  --ui-accent-hover:#93b4f7;
  --ui-danger:      #dc2626;
  --ui-danger-bg:   #fef2f2;
  --ui-danger-border:#fca5a5;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */
.ui-panel {
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
  font-family: var(--ui-font);
}

/* ── Panel header ─────────────────────────────────────────────────────────── */
.ui-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ui-border-light);
  background: none;
}
.ui-panel-header h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Close button ─────────────────────────────────────────────────────────── */
.ui-close-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.ui-close-btn:hover { color: var(--ui-text-dim); }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.ui-tabs {
  display: flex;
  border-bottom: 1px solid var(--ui-border-light);
}
.ui-tab {
  flex: 1;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.ui-tab:hover { color: var(--ui-text-dim); }
.ui-tab.active {
  color: var(--ui-accent);
  border-bottom-color: var(--ui-accent);
}

/* ── Tab content ──────────────────────────────────────────────────────────── */
.ui-tab-content { display: none; }
.ui-tab-content.active { display: block; }

/* ── Body / section ───────────────────────────────────────────────────────── */
.ui-body {
  padding: 12px 14px;
  font-size: 11px;
  color: var(--ui-text-dim);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Row (label + value) ──────────────────────────────────────────────────── */
.ui-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ui-row label { color: var(--ui-text-label); font-size: 11px; }
.ui-row span  { font-weight: 500; color: var(--ui-text); font-size: 11px; }

/* ── Section label ────────────────────────────────────────────────────────── */
.ui-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ui-text-label);
  margin-bottom: -2px;
}

/* ── Divider ──────────────────────────────────────────────────────────────── */
.ui-divider {
  border: none;
  border-top: 1px solid var(--ui-border-light);
  margin: 2px 0;
}

/* ── Segmented control ────────────────────────────────────────────────────── */
.ui-segment {
  display: flex;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  overflow: hidden;
}
.ui-segment-btn {
  flex: 1;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--ui-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.ui-segment-btn + .ui-segment-btn { border-left: 1px solid var(--ui-border); }
.ui-segment-btn:hover { background: var(--ui-bg-hover); color: var(--ui-accent); }
.ui-segment-btn.active { background: var(--ui-accent); color: #fff; }

/* ── Card grid ────────────────────────────────────────────────────────────── */
.ui-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 64px);
  gap: 10px;
  padding: 12px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.ui-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.ui-card-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: var(--ui-bg-page);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  transition: background 0.12s, border-color 0.12s;
}
.ui-card:hover .ui-card-thumb { background-color: var(--ui-bg-hover); border-color: var(--ui-accent-hover); }
.ui-card.active .ui-card-thumb { background-color: var(--ui-accent); border-color: var(--ui-accent); opacity: 0.85; }

.ui-card-label {
  font-size: 10px;
  color: #666;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
}
.ui-card.active .ui-card-label { color: var(--ui-accent); font-weight: 600; }

/* ── Stepper ──────────────────────────────────────────────────────────────── */
.ui-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ui-stepper button {
  width: 22px;
  height: 22px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-bg-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--ui-text-dim);
  padding: 0;
}
.ui-stepper button:hover { background: var(--ui-bg-hover); border-color: var(--ui-accent-hover); }
.ui-stepper input[type=number] {
  width: 36px;
  text-align: center;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  padding: 2px 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ui-text);
  -moz-appearance: textfield;
}
.ui-stepper input[type=number]::-webkit-inner-spin-button { display: none; }

/* ── Toggle ───────────────────────────────────────────────────────────────── */
.ui-toggle { display: flex; align-items: center; cursor: pointer; }
.ui-toggle input { display: none; }
.ui-toggle-track {
  width: 32px; height: 18px;
  background: var(--ui-border);
  border-radius: 9px;
  position: relative;
  transition: background 0.15s;
}
.ui-toggle input:checked + .ui-toggle-track { background: var(--ui-accent); }
.ui-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.15s;
}
.ui-toggle input:checked + .ui-toggle-track .ui-toggle-thumb { left: 16px; }

/* ── Button row ───────────────────────────────────────────────────────────── */
.ui-btn-row {
  display: flex;
  gap: 6px;
}

/* ── Button ───────────────────────────────────────────────────────────────── */
.ui-btn {
  flex: 1;
  padding: 5px 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-bg-muted);
  font-size: 10px;
  font-weight: 500;
  color: var(--ui-text-dim);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ui-btn:hover { background: var(--ui-bg-hover); border-color: var(--ui-accent-hover); color: var(--ui-accent); }
.ui-btn-danger:hover { background: var(--ui-danger-bg); border-color: var(--ui-danger-border); color: var(--ui-danger); }

/* ── Hint pill ────────────────────────────────────────────────────────────── */
.ui-hint {
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--ui-border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 11px;
  color: var(--ui-text-muted);
  white-space: nowrap;
  font-family: var(--ui-font);
  backdrop-filter: blur(4px);
}

.ui-hint-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--ui-border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11px;
  font-family: var(--ui-font);
  font-weight: 500;
  color: var(--ui-text-dim);
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ui-hint-btn:hover {
  background: var(--ui-bg-hover);
  border-color: var(--ui-accent-hover);
  color: var(--ui-accent);
}
.ui-hint-btn svg { flex-shrink: 0; }

/* ── Placeholder for empty tab ────────────────────────────────────────────── */
.ui-empty {
  padding: 24px 14px;
  text-align: center;
  font-size: 11px;
  color: var(--ui-text-label);
}

/* ── Stats sub-tabs ───────────────────────────────────────────────────────── */
.stats-subtabs {
  display: flex;
  border-bottom: 1px solid var(--ui-border-light);
  padding: 0 10px;
  gap: 2px;
}
.stats-subtab {
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.stats-subtab:hover { color: var(--ui-text-dim); }
.stats-subtab.active { color: var(--ui-accent); border-bottom-color: var(--ui-accent); }

.stats-subpanel { display: none; padding: 10px 14px; }
.stats-subpanel.active { display: block; }

/* ── Stats grid — 2 columns fixed ────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  align-items: start;
}

.stats-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
}

#stats-warnings {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── Stepper unit label ───────────────────────────────────────────────────── */
.stats-unit {
  font-size: 10px;
  color: var(--ui-text-muted);
  white-space: nowrap;
}


.stats-meter-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stats-meter-row label {
  width: 60px;
  flex-shrink: 0;
  color: var(--ui-text-label);
  font-size: 11px;
}
.stats-meter-row > span {
  width: 52px;
  flex-shrink: 0;
  text-align: right;
  font-weight: 500;
  color: var(--ui-text);
  font-size: 11px;
}
.stats-meter {
  flex: 1;
  height: 6px;
  background: var(--ui-border-light);
  border-radius: 3px;
  overflow: hidden;
}
.stats-meter-fill {
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width 0.3s, background 0.3s;
  background: #22c55e;
}
.stats-meter-fill.warn    { background: #f59e0b; }
.stats-meter-fill.danger  { background: #ef4444; }

.stats-warning {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.stats-warning.warn {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
.stats-warning.danger {
  background: var(--ui-danger-bg);
  color: var(--ui-danger);
  border: 1px solid var(--ui-danger-border);
}

.stats-money {
  font-weight: 600;
  font-size: 12px;
  color: var(--ui-text);
}
.stats-money.positive { color: #16a34a; }
.stats-money.negative { color: var(--ui-danger); }

.stats-total-row {
  border-top: 1px solid var(--ui-border-light);
  padding-top: 4px;
  margin-top: 2px;
}