/* ═══════════════════════════════════════════════════════════════════
   KME Smart — Brand Theme v3 — Compact
   ═══════════════════════════════════════════════════════════════════ */

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

/* ── DaisyUI Theme Overrides ──────────────────────────────────── */
[data-theme="light"] {
  --p: 0.55 0.17 35;   --pf: 0.48 0.15 33;   --pc: 0.99 0.005 90;
  --s: 0.5534 0.1574 276.64; --sf: 0.4877 0.1529 276; --sc: 0.985 0.002 276;
  --a: 0.65 0.16 40;   --af: 0.55 0.17 35;   --ac: 0.99 0.005 90;
  --su: 0.6479 0.155 163; --wa: 0.7457 0.164 68; --er: 0.6036 0.2049 27;
  --b1: 0.985 0.002 75; --b2: 0.968 0.004 75; --b3: 0.938 0.006 75;
  --bc: 0.22 0.03 40;
  --rounded-box: 0.625rem; --rounded-btn: 0.5rem; --animation-btn: 0.15s;
}
[data-theme="dark"] {
  --p: 0.60 0.17 35;   --pf: 0.68 0.16 38;   --pc: 0.15 0.02 40;
  --s: 0.5534 0.1574 276.64; --sf: 0.6272 0.1575 276; --sc: 0.15 0.02 276;
  --a: 0.68 0.16 40;   --af: 0.72 0.14 42;   --ac: 0.15 0.02 40;
  --su: 0.6479 0.155 163; --wa: 0.7457 0.164 68; --er: 0.6036 0.2049 27;
  --b1: 0.18 0.015 40;  --b2: 0.155 0.012 40;  --b3: 0.13 0.01 40;
  --bc: 0.92 0.008 75;
  --rounded-box: 0.625rem; --rounded-btn: 0.5rem; --animation-btn: 0.15s;
}

/* ── Base ─────────────────────────────────────────────────────── */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 13px; }
* { -webkit-font-smoothing: antialiased; }

/* ── Compact spacing helpers ──────────────────────────────────── */
.gap-compact { gap: 0.375rem; }
.p-compact { padding: 0.625rem; }

/* ── Logo ─────────────────────────────────────────────────────── */
.kme-logo-box {
  background: linear-gradient(135deg, #E05708, #ff7b33);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 900; letter-spacing: -0.02em; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(224,87,8,0.3);
  transition: transform .2s, box-shadow .2s;
}
.kme-logo-box:hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(224,87,8,0.35); }
[data-theme="dark"] .kme-logo-box { box-shadow: 0 2px 12px rgba(224,87,8,0.2); }

.kme-logo-text {
  font-weight: 800; letter-spacing: -0.03em;
  background: linear-gradient(135deg, #E05708, #ff7b33 60%, #8b5cf6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="dark"] .kme-logo-text {
  background: linear-gradient(135deg, #ff8c42, #ffab6b 60%, #a78bfa);
  -webkit-background-clip: text; background-clip: text;
}

/* ── Login BG ─────────────────────────────────────────────────── */
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.kme-login-bg {
  background: oklch(var(--b2));
}
[data-theme="light"] .kme-login-bg {
  background: linear-gradient(-45deg, #fef3e2, #fff7ed, #fde8d8, #ede9fe, #fef2f2, #fef3e2);
  background-size: 400% 400%; animation: gradientShift 20s ease infinite;
}

/* ── Orbs ──────────────────────────────────────────────────────── */
@keyframes float { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-40px) scale(1.1)} 66%{transform:translate(-20px,20px) scale(0.9)} }
.kme-orb { position:absolute; border-radius:50%; filter:blur(60px); opacity:0.08; pointer-events:none; }
[data-theme="light"] .kme-orb { opacity:0.12; }

/* ── Glass ─────────────────────────────────────────────────────── */
.kme-glass {
  backdrop-filter: blur(20px) saturate(180%);
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--bc)/0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
[data-theme="light"] .kme-glass {
  background: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 4px 24px rgba(224,87,8,0.05), 0 1px 4px rgba(0,0,0,0.03);
}

/* ── Input Focus ──────────────────────────────────────────────── */
.kme-input-focus:focus { box-shadow: 0 0 0 2px rgba(224,87,8,0.2); border-color: rgba(224,87,8,0.5); }
[data-theme="dark"] .kme-input-focus:focus { box-shadow: 0 0 0 2px rgba(255,123,51,0.18); border-color: rgba(255,123,51,0.4); }

/* ── Logo Pulse ───────────────────────────────────────────────── */
@keyframes kmeLogoPulse { 0%,100%{box-shadow:0 0 0 0 rgba(224,87,8,0.4)} 50%{box-shadow:0 0 0 10px rgba(224,87,8,0)} }
.kme-logo-pulse { animation: kmeLogoPulse 3s ease-in-out infinite; }

/* ── Brand Button ─────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #E05708, #ff7b33); border: none; color: #fff;
  font-weight: 700; transition: all .2s;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #c44a07, #E05708);
  box-shadow: 0 3px 12px rgba(224,87,8,0.35); transform: translateY(-1px);
}

/* ── Compact Navbar ───────────────────────────────────────────── */
.kme-navbar {
  height: 44px; min-height: 44px;
  backdrop-filter: blur(12px) saturate(180%);
  background: oklch(var(--b1)/0.92);
  border-bottom: 1px solid oklch(var(--bc)/0.06);
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center;
  padding: 0 0.75rem;
}

/* ── Compact Card ─────────────────────────────────────────────── */
.kme-card {
  border-radius: 0.625rem;
  border: 1px solid oklch(var(--bc)/0.07);
  background: oklch(var(--b1));
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  transition: box-shadow .2s, transform .2s;
}
.kme-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }

/* ── Connection Bar ───────────────────────────────────────────── */
.conn-bar { height: 2px; transition: all .4s; position: relative; overflow: hidden; }
.conn-bar::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent); animation:shimmerBar 2s infinite; }
@keyframes shimmerBar { 0%{left:-100%} 100%{left:100%} }
.conn-connected { background: linear-gradient(90deg, #10b981, #34d399, transparent 80%); }
.conn-reconnecting { background: linear-gradient(90deg, #f59e0b, #fbbf24, transparent 80%); }
.conn-offline { background: linear-gradient(90deg, #ef4444, #f87171, transparent 80%); }

/* ── Status ───────────────────────────────────────────────────── */
@keyframes pulseDot { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.35)} 50%{box-shadow:0 0 0 4px rgba(16,185,129,0)} }

/* ── Stripe ───────────────────────────────────────────────────── */
.stripe-success { background: linear-gradient(90deg, #10b981 0%, #10b98160 50%, transparent); }
.stripe-warning { background: linear-gradient(90deg, #f59e0b 0%, #f59e0b50 50%, transparent); }
.stripe-stale   { background: linear-gradient(90deg, oklch(var(--bc)/0.12), transparent 70%); }
[data-kme-device-key] .card-stripe { background: linear-gradient(90deg, #E05708, #E0570860 50%, transparent) !important; }

/* ── Toggle ───────────────────────────────────────────────────── */
.power-toggle.active { background: #10b981; }

/* ── Summary Card ─────────────────────────────────────────────── */
.summary-card { transition: all .2s; border-radius: 0.625rem; }
.summary-card:hover { box-shadow: 0 4px 16px -4px rgba(224,87,8,0.08); transform: translateY(-1px); }

/* ── Tab Active ───────────────────────────────────────────────── */
.kme-tab-active { color: oklch(var(--p)); border-bottom-color: oklch(var(--p)); }

/* ── Sort / Filter ────────────────────────────────────────────── */
.sort-btn { transition: all .15s; }
.sort-btn.active { background: oklch(var(--p)); color: oklch(var(--pc)); box-shadow: 0 1px 4px oklch(var(--p)/0.2); }
.sort-btn:hover:not(.active) { background: oklch(var(--p)/0.06); }
.filter-chip.active { background: oklch(var(--p)/0.1); color: oklch(var(--p)); border-color: oklch(var(--p)/0.25); }

/* ── Slider ───────────────────────────────────────────────────── */
.brightness-slider { background: linear-gradient(90deg, oklch(var(--b3)), #E05708); }
.brightness-slider::-webkit-slider-thumb { background: #E05708; }
.brightness-slider::-moz-range-thumb { background: #E05708; }

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(var(--bc)/0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: oklch(var(--bc)/0.22); }

/* ── Animations ───────────────────────────────────────────────── */
@keyframes cardIn { from{opacity:0;transform:translateY(12px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.kme-card-animate { animation: cardIn .4s cubic-bezier(0.16,1,0.3,1) forwards; }

@keyframes fadeInUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.kme-fade-in { animation: fadeInUp .35s cubic-bezier(0.16,1,0.3,1) forwards; }
.kme-fade-in-delay-1 { animation-delay:.06s; opacity:0; }
.kme-fade-in-delay-2 { animation-delay:.12s; opacity:0; }

/* ── Strength Bar ─────────────────────────────────────────────── */
.strength-bar { height: 2px; border-radius: 1px; transition: width .3s, background-color .3s; }

/* ── Badges ───────────────────────────────────────────────────── */
.kme-badge-pro {
  background: linear-gradient(135deg, #E05708, #ff7b33); color: #fff;
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.kme-badge-free {
  background: oklch(var(--b3)); color: oklch(var(--bc)/0.5);
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── Utilities ────────────────────────────────────────────────── */
.kme-text-brand { color: #E05708; }
[data-theme="dark"] .kme-text-brand { color: #ff8c42; }
.kme-text-muted { color: oklch(var(--bc)/0.5); }
.kme-text-subtle { color: oklch(var(--bc)/0.3); }
.kme-divider { height: 1px; background: linear-gradient(90deg, transparent, oklch(var(--bc)/0.08), transparent); }
.kme-glow { box-shadow: 0 0 14px rgba(224,87,8,0.12); }
[data-theme="dark"] .kme-glow { box-shadow: 0 0 18px rgba(224,87,8,0.15); }
.kme-focus-ring:focus-visible { outline: 2px solid #E05708; outline-offset: 1px; }

/* ── Compact Section Headers ──────────────────────────────────── */
.kme-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: oklch(var(--bc)/0.4);
}

/* ── Serial Log Output ───────────────────────────────────────── */
.serial-log-output {
  background: #111; color: #0f0; padding: 10px;
  height: 250px; overflow: auto; font-family: 'Courier New', monospace;
  font-size: 11px; border-radius: 0.5rem; line-height: 1.5;
  word-break: break-all;
}
[data-theme="light"] .serial-log-output {
  background: #1a1a2e; color: #00ff88;
}

/* ── Flash FAB Button ────────────────────────────────────────── */
.flash-fab {
  position: fixed; right: 24px; bottom: 24px;
  width: 52px; height: 52px;
  border: none; border-radius: 50%;
  background: linear-gradient(135deg, #E05708, #ff7b33);
  color: white; cursor: pointer;
  box-shadow: 0 4px 16px rgba(224,87,8,0.4);
  transition: all .2s; z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.flash-fab:hover {
  background: linear-gradient(135deg, #c44a07, #E05708);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(224,87,8,0.5);
}
.flash-fab:active { transform: translateY(0) scale(0.98); }

/* ── Settings Config Group ───────────────────────────────────── */
.serial-status-ready .serial-status-dot { background: #10b981; }
.serial-status-ready .serial-status-text { color: #10b981; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   RTL (Arabic) overrides — engaged only when html[dir="rtl"]
   ════════════════════════════════════════════════════════════ */
html[dir="rtl"] body { text-align: right; }

/* Arabic font fallback — optimises for clarity over the monospace
   latin UI default. System "Noto Kufi Arabic" or "IBM Plex Sans Arabic"
   if available, else falls back gracefully. */
html[dir="rtl"] {
  font-family: 'Noto Kufi Arabic', 'Segoe UI', 'Tahoma', 'Arial', sans-serif;
}

/* Flip common arrow icons that indicate direction */
html[dir="rtl"] .cfg-step-connector { transform: scaleX(-1); }

/* Dropdowns that are dropdown-end should flip to dropdown-start */
html[dir="rtl"] .dropdown-end { direction: rtl; }

/* Toasts/notifications slide from the opposite side */
html[dir="rtl"] .toast-item,
html[dir="rtl"] .toast-container { direction: rtl; text-align: right; }

/* Number/time badges stay LTR — numbers look wrong in rtl context */
html[dir="rtl"] .mono,
html[dir="rtl"] .font-mono,
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .kme-cp-hex,
html[dir="rtl"] .time-ago,
html[dir="rtl"] [data-kme-pv-sensor],
html[dir="rtl"] .hero-value,
html[dir="rtl"] .hero-unit,
html[dir="rtl"] .stat-pill,
html[dir="rtl"] .cfg-step-hint,
html[dir="rtl"] .cfg-canvas-meta {
  direction: ltr;
  unicode-bidi: embed;
}

/* Margin/padding swaps for the most common asymmetric utility patterns.
   Tailwind's ms-/me- utilities already handle this; these are for
   legacy ml-*/mr-*/left:/right: rules in our own CSS. */
html[dir="rtl"] .cfg-stepper > .cfg-step:first-child { order: 0; }
html[dir="rtl"] .cfg-canvas-header > div:first-child { text-align: right; }

/* Config floating action bar — keep buttons on the correct side in RTL */
html[dir="rtl"] .cfg-action-bar { flex-direction: row-reverse; }
html[dir="rtl"] .cfg-action-summary { flex-direction: row-reverse; }

/* Input fields — align text right but keep placeholder direction sensible */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] textarea {
  text-align: right;
}
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[placeholder*="GPIO"],
html[dir="rtl"] input[placeholder*="mqtt"],
html[dir="rtl"] input[placeholder*="MQTT"] {
  direction: ltr;
  text-align: left;
}

/* Language switcher button sits next to the theme toggle */
.kme-lang-toggle {
  padding: 0 8px;
  height: 28px;
  border-radius: 7px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid oklch(var(--bc)/0.1);
  color: oklch(var(--bc)/0.6);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.kme-lang-toggle:hover { border-color: #E05708; color: #E05708; }

/* ── Dark-mode overrides for MQTT Regenerate modal ─────────────
   The modal uses hardcoded light-theme colors inline; these
   overrides make it readable in dark mode without touching the HTML. */
[data-theme="dark"] #modalRegenMqtt .modal-box p[style*="color:#6b7280"],
[data-theme="dark"] #modalRegenMqtt p[style*="color:#6b7280"] {
  color: oklch(var(--bc) / 0.6) !important;
}
[data-theme="dark"] #modalRegenMqtt div[style*="background:linear-gradient(135deg,#f8fafc,#f1f5f9)"] {
  background: oklch(var(--b2)) !important;
  border-color: oklch(var(--bc) / 0.08) !important;
}
[data-theme="dark"] #modalRegenMqtt div[style*="background:#fffbeb"] {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
[data-theme="dark"] #modalRegenMqtt span[style*="color:#92400e"] {
  color: #fbbf24 !important;
}
[data-theme="dark"] #modalRegenMqtt #regenCredentials { color: oklch(var(--bc)) !important; }
[data-theme="dark"] #modalRegenMqtt #regenCredentials span[style*="color:#0f172a"] {
  color: oklch(var(--bc)) !important;
}
[data-theme="dark"] #modalRegenMqtt #regenCredentials span[style*="color:#64748b"] {
  color: oklch(var(--bc) / 0.55) !important;
}