/* ─── Mobile Dark-Theme Design System ───
   Global CSS file loaded via nuxt.config.css[].
   Defines CSS custom properties on .mobile-layout so every mobile page
   can use var(--mob-*) instead of hardcoded hex colours.

   RULES FOR MOBILE PAGES:
   - Use var(--mob-bg)       for page backgrounds
   - Use var(--mob-bg-card)  for card / section backgrounds
   - Use var(--mob-bg-hover) for hover / active states
   - Use var(--mob-text)     for primary text (white)
   - Use var(--mob-text-secondary) for secondary text
   - Use var(--mob-text-muted)     for tertiary / placeholder text
   - Use var(--mob-border)   for borders
   - NEVER use hardcoded hex colours in mobile pages
*/

/* ── Variable definitions ── */
.mobile-layout {
  --mob-bg: #1a1a1a;
  --mob-bg-card: #242424;
  --mob-bg-header: #202020;
  --mob-bg-hover: #333333;
  --mob-bg-input: #242424;

  --mob-text: #ffffff;
  --mob-text-secondary: #e0e0e0;
  --mob-text-muted: #b0b0b0;

  --mob-border: #4a4a4a;
  --mob-border-light: #5a5a5a;

  --mob-blue: #4a90e2;
  --mob-blue-active: #3a7bc8;
  --mob-blue-light: #60a5fa;
  --mob-blue-text: #bfdbfe;

  --mob-green: #6ee7b7;
  --mob-green-bright: #22c55e;
  --mob-green-text: #86efac;
  --mob-bg-success: #1a2e1a;
  --mob-border-success: #2e6f2e;

  --mob-red: #ef4444;
  --mob-red-text: #fecaca;
  --mob-bg-danger: #2e1a1a;
  --mob-border-danger: #6b3a3a;

  --mob-orange: #f59e0b;
  --mob-orange-text: #fbbf24;
  --mob-bg-warning: #2e2a1a;
  --mob-border-warning: #5a4a2a;

  --mob-purple: #8b5cf6;
  --mob-purple-text: #c4b5fd;
  --mob-bg-purple: #2a2046;
  --mob-border-purple: #4a3a6a;

  --mob-overlay: rgba(0, 0, 0, 0.8);
}

/* ── Safe defaults for common elements ──
   These only apply INSIDE .mobile-layout and use low specificity
   so page-level scoped styles can easily override them. */

.mobile-layout input,
.mobile-layout textarea,
.mobile-layout select {
  background-color: var(--mob-bg-input);
  color: var(--mob-text);
  border-color: var(--mob-border);
}

.mobile-layout input::placeholder,
.mobile-layout textarea::placeholder {
  color: var(--mob-text-muted);
}

/* Bulma form elements */
.mobile-layout .input,
.mobile-layout .textarea,
.mobile-layout .select select {
  background-color: var(--mob-bg-input);
  color: var(--mob-text);
  border-color: var(--mob-border);
}

.mobile-layout .label {
  color: var(--mob-text-secondary);
}

.mobile-layout .title,
.mobile-layout .subtitle {
  color: var(--mob-text);
}

.mobile-layout .box {
  background-color: var(--mob-bg-card);
  color: var(--mob-text);
}

/* Bulma notifications & tags */
.mobile-layout .notification {
  color: var(--mob-text);
}

/* Bulma modals */
.mobile-layout .modal-card,
.mobile-layout .modal-card-head,
.mobile-layout .modal-card-body,
.mobile-layout .modal-card-foot {
  background-color: var(--mob-bg-card);
  color: var(--mob-text);
}