/*
 * Waylert – Shared UI Components
 * Always import this file and use these classes instead of one-off styles.
 * See context.md § Shared components for usage rules.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&display=swap');

/* ── PRIMARY BUTTON ─────────────────────────────────────────────────────── */

.wl-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #EB6429;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1px;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.15s;
}
.wl-btn-primary:hover { background: #C9521E; }

/* Full-width variant (auth page sign-in) */
.wl-btn-primary--full { width: 100%; }


/* ── INPUT – BASE STYLES ─────────────────────────────────────────────────── */
/*
 * Two fill variants depending on the background the input sits on:
 *
 *   .wl-input--on-surface  →  placed on a WHITE surface (e.g. auth card)
 *                              fill: #f0f2f5 (gray), darkens on focus
 *
 *   .wl-input--on-base     →  placed on the GRAY page base (e.g. toolbar)
 *                              fill: #ffffff (white), stays white on focus
 */

.wl-input {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  color: #0d1b2e;
  outline: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.wl-input::placeholder { color: #9aa3b0; transition: color 0.2s; }
.wl-input:hover { color: #0d1b2e; }
.wl-input:hover::placeholder { color: #6b7a8d; }
.wl-input:focus { border-color: #EB6429; }

/* Variant: on white/surface background */
.wl-input--on-surface {
  background: #f0f2f5;
}
.wl-input--on-surface:hover {
  background: #e8eaed;
}
.wl-input--on-surface:focus {
  background: #e4e8ee;
}

/* Variant: on gray/base background */
.wl-input--on-base {
  background: #ffffff;
  border-color: #edf0f4;
}
.wl-input--on-base:hover {
  background: #f8f9fb;
}
.wl-input--on-base:focus {
  background: #ffffff;
}


/* ── INPUT WRAP (icon + input row) ──────────────────────────────────────── */
/*
 * Use when an input needs a leading icon (e.g. search box).
 * Place the icon and a bare <input> inside.
 * Apply the same --on-surface / --on-base modifier.
 */

.wl-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 14px 18px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.wl-input-wrap:focus-within { border-color: #EB6429; }

.wl-input-wrap--on-surface { background: #f0f2f5; }
.wl-input-wrap--on-surface:hover { background: #e8eaed; }
.wl-input-wrap--on-surface:focus-within { background: #e4e8ee; }

.wl-input-wrap--on-base { background: #ffffff; border-color: #edf0f4; }
.wl-input-wrap--on-base:hover { background: #f8f9fb; }

.wl-input-wrap svg { color: #9aa3b0; flex-shrink: 0; }
.wl-input-wrap:hover svg { color: #6b7a8d; }

.wl-input-wrap input {
  border: none;
  outline: none;
  background: none;
  font-size: 15px;
  color: #0d1b2e;
  width: 100%;
}
.wl-input-wrap input::placeholder { color: #9aa3b0; }
.wl-input-wrap:hover input::placeholder { color: #6b7a8d; }


/* ── SELECT ─────────────────────────────────────────────────────────────── */

.wl-select {
  padding: 14px 36px 14px 18px;
  border: 1.5px solid #edf0f4;
  border-radius: 10px;
  background: #ffffff;
  font-size: 15px;
  color: #4a5568;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa3b0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.wl-select:hover { background-color: #f8f9fb; color: #0d1b2e; }
.wl-select:focus { border-color: #EB6429; }


/* ── THEME TOGGLE BUTTON ─────────────────────────────────────────────────── */

.theme-toggle {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #4a5568);
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--bg-elevated, #f5f7fa);
  color: var(--text-primary, #0d1b2e);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── WEATHER POPOVER TEMPERATURE COLORS ── */
/* Override hardcoded dark-text colors inside weather popovers */
[data-theme="dark"] #weatherPopover [style*="color:#0d1b2e"],
[data-theme="dark"] #tccWeatherPopover [style*="color:#0d1b2e"] { color: var(--text-primary, #e8ecf1) !important; }
[data-theme="dark"] #weatherPopover [style*="color:#4a5568"],
[data-theme="dark"] #tccWeatherPopover [style*="color:#4a5568"] { color: var(--text-secondary, #8fa0b8) !important; }

/* ── LOGO THEME SWITCHING ── */
.logo-light { display: block; }
.logo-dark  { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: block; }


/* ── DARK MODE – COMPONENT OVERRIDES ────────────────────────────────────── */

[data-theme="dark"] .wl-input {
  color: var(--text-primary, #e8ecf1);
}
[data-theme="dark"] .wl-input::placeholder { color: var(--text-muted, #566a84); }
[data-theme="dark"] .wl-input:hover { color: var(--text-primary, #e8ecf1); }
[data-theme="dark"] .wl-input:hover::placeholder { color: var(--text-secondary, #8fa0b8); }

[data-theme="dark"] .wl-input--on-surface {
  background: var(--bg-elevated, #252e40);
}
[data-theme="dark"] .wl-input--on-surface:hover { background: var(--bg-hover, #2a3347); }
[data-theme="dark"] .wl-input--on-surface:focus { background: var(--bg-hover, #2a3347); }

[data-theme="dark"] .wl-input--on-base {
  background: var(--bg-surface, #1e2635);
  border-color: var(--border, #313d52);
}
[data-theme="dark"] .wl-input--on-base:hover { background: var(--bg-elevated, #252e40); }
[data-theme="dark"] .wl-input--on-base:focus { background: var(--bg-surface, #1e2635); }

[data-theme="dark"] .wl-input-wrap--on-surface { background: var(--bg-elevated, #252e40); }
[data-theme="dark"] .wl-input-wrap--on-surface:hover { background: var(--bg-hover, #2a3347); }
[data-theme="dark"] .wl-input-wrap--on-surface:focus-within { background: var(--bg-hover, #2a3347); }

[data-theme="dark"] .wl-input-wrap--on-base {
  background: var(--bg-surface, #1e2635);
  border-color: var(--border, #313d52);
}
[data-theme="dark"] .wl-input-wrap--on-base:hover { background: var(--bg-elevated, #252e40); }

[data-theme="dark"] .wl-input-wrap svg { color: var(--text-muted, #566a84); }
[data-theme="dark"] .wl-input-wrap:hover svg { color: var(--text-secondary, #8fa0b8); }
[data-theme="dark"] .wl-input-wrap input { color: var(--text-primary, #e8ecf1); }
[data-theme="dark"] .wl-input-wrap input::placeholder { color: var(--text-muted, #566a84); }
[data-theme="dark"] .wl-input-wrap:hover input::placeholder { color: var(--text-secondary, #8fa0b8); }

[data-theme="dark"] .wl-select {
  background-color: var(--bg-surface, #1e2635);
  border-color: var(--border, #313d52);
  color: var(--text-secondary, #8fa0b8);
}
[data-theme="dark"] .wl-select:hover {
  background-color: var(--bg-elevated, #252e40);
  color: var(--text-primary, #e8ecf1);
}