/* ============================================================
   PlexRaft — Shared tokens & components
   Kaynak: Figma  (kesin değerler)
   ============================================================ */

:root {
  /* Renkler — Figma'dan birebir */
  --navy: #0A1628;
  /* koyu lacivert (metin/handle) */
  --cyan: #00B4D8;
  /* ana vurgu (ring, chart, border) */
  --green: #47BD83;
  /* enerji ringi */
  --muted: #4A80A6;
  /* ikincil metin */
  --muted-70: rgba(74, 128, 166, 0.7);
  --card-desktop: #DFF2F7;
  --card-mobile: #E0F2FE;
  --pill-bg: rgba(160, 217, 255, 0.9);
  --sheet-bg: #7BC3F7;
  --dot-online: #059834;
  --dot-offline: #98080B;
  --glass-bg: rgba(10, 22, 40, 0.42);
  --glass-border: #00B4D8;
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-border: rgba(0, 180, 216, 0.5);
  --ai-text: rgba(232, 244, 248, 0.9);
  --gemini-label: rgba(144, 202, 249, 0.85);
  --bubble-ai-bg: rgba(255, 255, 255, 0.10);
  --bubble-ai-border: rgba(255, 255, 255, 0.18);
  --bubble-ai-text: #E8F5F7;
  --bubble-user-bg: #00B4D8;
  --bubble-user-text: #0A1628;

  --font-body: 'Poppins', sans-serif;
  --font-display: 'Montserrat', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* --- Arka plan: Figma shader (açık #CDF5FF + derin #0063B4) CSS yaklaşımı --- */
.app-bg {
  background:
    radial-gradient(55% 45% at 12% 15%, rgba(205, 245, 255, 0.14), transparent 70%),
    radial-gradient(45% 40% at 88% 10%, rgba(205, 245, 255, 0.10), transparent 65%),
    radial-gradient(70% 60% at 70% 90%, rgba(0, 99, 180, 0.55), transparent 72%),
    linear-gradient(175deg, #084a8c 0%, #063a75 40%, #071f42 75%, #04122a 100%);
  background-attachment: fixed;
}

/* --- Üst şerit rozetleri --- */
.pill {
  background: var(--pill-bg);
  border-radius: 23px;
  height: 46px;
  display: flex;
  align-items: center;
}

.pill--location {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 12px;
}

.pill--location .pill-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

.pill--location .pill-sub {
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

.pill--status {
  gap: 8px;
  padding: 0 11px 0 15px;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot-online);
  flex: none;
}

.pill--status .status-label {
  font-weight: 500;
  font-size: 17px;
  color: var(--navy);
}

.wifi-icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.wifi-icon .wifi-slash {
  display: none;
}

/* Offline durumu — Figma "iPhone 17 - 2 Ofline" çerçevesi */
body.is-offline .status-dot {
  background: var(--dot-offline);
}

body.is-offline .wifi-icon .wifi-slash {
  display: block;
}

/* Offline'dayken sayılar CANLI DEĞİL — soluklaştır ve "LAST KNOWN" etiketi bas.
   Etiket yalnızca en az bir kez gerçek veri gösterildiyse (has-live-data)
   çıkar; N/A durumunda "LAST KNOWN — Waiting..." saçmalığı oluşmaz. */
body.is-offline .mstat {
  opacity: 0.55;
}

body.is-offline .vars-cols {
  opacity: 0.55;
}

body.is-offline.has-live-data .msub::before {
  content: "LAST KNOWN — ";
  color: var(--dot-offline);
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.is-offline .mcard--chart h2::after {
  content: " — paused";
  color: var(--dot-offline);
  font-weight: 400;
  font-size: 12px;
}

/* NOT: Offline'da davranış ekrana göre BİLİNÇLİ olarak farklıdır:
   • AI Control → aktif kalır, kullanıcı komut yazabilir; komut Firebase'e
     GÖNDERİLMEZ ("module is offline" uyarısı döner), ama sohbet çalışmaya
     devam eder — cached veri hakkında konuşabilir.
   • AI Report  → risk raporu CANLI ölçüm gerektirdiği için offline'da hiç
     tetiklenmez; statik "System Offline" kartı gösterilir.
     Bkz. js/ai.js → send() → kind === "report" dalı. */

/* --- Aqua AI cam (glassmorphism) kartı --- */
.glass-card {
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ai-btn {
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 12px;
  height: 38px;
  min-width: 138px;
  padding: 0 16px;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.ai-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ai-btn:active {
  transform: scale(0.97);
}

.ai-title {
  font-weight: 700;
  color: #3BCCF7;
}

.gemini-label {
  font-weight: 400;
  font-size: 10.5px;
  color: var(--gemini-label);
}

/* --- Halka (ring) grafik: 96px, iç yarıçap 0.79 → 10px kalınlık --- */
.ring {
  position: relative;
  width: 96px;
  height: 96px;
  flex: none;
}

.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring .ring-track {
  fill: none;
  stroke-width: 10;
  opacity: 0.15;
}

.ring .ring-value {
  fill: none;
  stroke-width: 10;
  transition: stroke-dasharray 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.ring--water .ring-track,
.ring--water .ring-value {
  stroke: var(--cyan);
}

.ring--energy .ring-track,
.ring--energy .ring-value {
  stroke: var(--green);
}

.ring .ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
}

/* --- DigiField ai işareti (32px) --- */
.digifield-mark {
  width: 32px;
  height: 32px;
  flex: none;
}

/* --- Erişilebilirlik --- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}