/* ============================================================
   Kompas Solar — Customer Portal Design System v2
   Used by: login.html, home.html
   ============================================================ */

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

:root {
  --teal:       #00A0B0;
  --teal-d:     #007F8C;
  --teal-l:     #E8F8FA;
  --orange:     #E87722;
  --navy:       #071220;
  --green:      #10B981;
  --red:        #EF4444;
  --yellow:     #F59E0B;
  --purple:     #7C3AED;
  --purple-d:   #5B21B6;
  --gray-50:    #F9FAFB;
  --gray-100:   #F3F4F6;
  --gray-200:   #E5E7EB;
  --gray-400:   #9CA3AF;
  --gray-500:   #6B7280;
  --gray-700:   #374151;
  --gray-900:   #111827;
  --r:          14px;
  --r-sm:       10px;
  --shadow:     0 2px 12px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.12);
}

body {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  background: #F0F4F8;
  color: var(--gray-900);
  min-height: 100vh;
}

/* ── PAGE CONTAINER ── */
.page { padding: 14px; max-width: 480px; margin: 0 auto; padding-bottom: 82px; }

/* ── TOP HEADER ── */
.header {
  background: linear-gradient(135deg, var(--navy), #0D1A2A);
  padding: 16px 18px 20px;
  position: sticky; top: 0; z-index: 90;
  color: white;
}
.h-row   { display: flex; align-items: center; justify-content: space-between; }
.h-logo  { display: flex; align-items: center; gap: 10px; }
.h-logo img      { height: 34px; object-fit: contain; }
.h-logo-name     { font-size: 14px; font-weight: 700; color: var(--teal); }
.h-greeting      { font-size: 19px; font-weight: 800; margin-top: 12px; }
.h-notif {
  background: rgba(255,255,255,.1); border: none; border-radius: 10px;
  padding: 8px; cursor: pointer; color: white; font-size: 18px; position: relative;
}
.h-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--red); color: white; font-size: 9px; font-weight: 700;
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ── BOTTOM NAV ── */
.bnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: white; border-top: 1px solid var(--gray-200);
  display: flex; z-index: 90; box-shadow: 0 -2px 12px rgba(0,0,0,0.07);
}
.bnav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 7px 2px; border: none; background: transparent;
  cursor: pointer; font-family: inherit; color: var(--gray-400); gap: 2px; min-width: 0;
  transition: color 0.15s;
}
.bnav-btn.active { color: var(--teal); }
.bnav-icon  { font-size: 19px; line-height: 1; }
.bnav-label { font-size: 9px; font-weight: 600; }

/* ── SECTIONS ── */
.section         { display: none; }
.section.active  { display: block; }

/* ── CARDS ── */
.card {
  background: white; border-radius: var(--r);
  padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.card-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; }

/* ── HERO SYSTEM BANNER ── */
.hero {
  background: linear-gradient(135deg, var(--teal), var(--teal-d));
  border-radius: var(--r); padding: 18px; color: white; margin-bottom: 12px;
}
.hero-kw { font-size: 38px; font-weight: 900; line-height: 1; }

/* ── STAT TILES ── */
.stat { background: white; border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); }
.stat-val { font-size: 22px; font-weight: 900; margin-top: 3px; }
.stat-lbl { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

/* ── BADGES ── */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.b-green  { background: #D1FAE5; color: #065F46; }
.b-yellow { background: #FEF3C7; color: #92400E; }
.b-red    { background: #FEE2E2; color: #991B1B; }
.b-teal   { background: var(--teal-l); color: var(--teal-d); }
.b-gray   { background: var(--gray-100); color: var(--gray-500); }

/* ── PROGRESS BAR ── */
.progress { height: 7px; background: var(--gray-200); border-radius: 4px; overflow: hidden; margin: 6px 0; }
.progress-bar { height: 100%; border-radius: 4px; transition: width 0.6s; }

/* ── BUTTONS ── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; border-radius: 11px; font-size: 14px; font-weight: 700;
  cursor: pointer; border: none; font-family: inherit; width: 100%;
  transition: all 0.15s;
}
.btn-teal  { background: var(--teal); color: white; }
.btn-teal:hover { background: var(--teal-d); }
.btn-sm    { padding: 8px 14px; font-size: 13px; width: auto; }

/* ── FORM GROUPS ── */
.fg { margin-bottom: 12px; }
.fg label {
  font-size: 11px; font-weight: 700; color: var(--gray-700);
  text-transform: uppercase; letter-spacing: 0.4px; display: block; margin-bottom: 5px;
}
.fg input, .fg select, .fg textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--gray-200);
  border-radius: 10px; font-size: 14px; font-family: inherit; outline: none;
  background: var(--gray-50); transition: border-color 0.2s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--teal); background: white;
}
.fg textarea { min-height: 80px; resize: vertical; }

/* ── LIST ITEMS ── */
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--gray-100);
}
.list-item:last-child { border-bottom: none; }
.list-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}

/* ── SERVICE CARDS ── */
.svc-card {
  display: flex; align-items: center; gap: 12px; padding: 13px;
  background: white; border-radius: var(--r); box-shadow: var(--shadow);
  margin-bottom: 10px; cursor: pointer; transition: box-shadow 0.15s;
}
.svc-card:hover { box-shadow: var(--shadow-md); }

/* ── WARRANTY CARDS ── */
.war-card { border: 1.5px solid var(--gray-200); border-radius: var(--r); padding: 13px; margin-bottom: 10px; }
.war-card.wactive   { border-color: var(--green); }
.war-card.wexpiring { border-color: var(--yellow); }
.war-card.wexpired  { border-color: var(--red); opacity: .7; }

/* ── OFFER CARDS ── */
.offer {
  background: linear-gradient(135deg, var(--orange), #C05010);
  border-radius: var(--r); padding: 14px; color: white; margin-bottom: 10px;
}

/* ── POINTS BANNER ── */
.points-banner {
  background: linear-gradient(135deg, var(--purple), var(--purple-d));
  border-radius: var(--r); padding: 16px; color: white; margin-bottom: 12px; cursor: pointer;
}

/* ── LOADING ── */
.loading { text-align: center; padding: 28px; color: var(--gray-400); }
.spinner {
  width: 26px; height: 26px; border: 3px solid var(--gray-200);
  border-top-color: var(--teal); border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 0 auto 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── NOTIFICATION PANEL ── */
.notif-panel {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200;
  display: none; align-items: flex-end; justify-content: center;
}
.notif-panel.open { display: flex; }
.notif-box {
  background: white; border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto; padding: 20px;
}

/* ── TIMELINE ── */
.tl-item  { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.tl-item:last-child { border-bottom: none; }
.tl-dot   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.tl-dot.done      { background: var(--green); }
.tl-dot.active-tl { background: var(--teal); }
.tl-dot.pending   { background: var(--gray-200); }

/* ── FCM PUSH NOTIFICATION BANNER ── */
.push-banner {
  background: linear-gradient(135deg, var(--teal), var(--teal-d));
  border-radius: var(--r); padding: 14px 16px; color: white;
  margin-bottom: 12px; display: flex; align-items: center; gap: 12px;
}
.push-banner button {
  background: white; color: var(--teal-d); border: none;
  border-radius: 8px; padding: 7px 14px; font-size: 12px;
  font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit;
}

/* ══ MONITOR SECTION (dark theme) ══ */
#sec-monitor { background: #0B1426; min-height: 100vh; padding: 0; }
.mn-bar  { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #111C2D; }
.mn-dot  { width: 8px; height: 8px; border-radius: 50%; background: #374151; transition: background .4s, box-shadow .4s; }
.mn-status  { font-size: 11px; font-weight: 700; color: #374151; }
.mn-refresh { background: rgba(255,255,255,.07); border: none; border-radius: 8px; padding: 5px 12px; color: #6B7280; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; }
.mn-updated { font-size: 10px; color: #1E2D45; text-align: center; padding: 5px 0 2px; }
.mn-scroll  { padding: 0 0 80px; overflow-y: auto; }
.mn-card    { background: #141E30; border-radius: 18px; margin: 10px 12px 0; padding: 16px; border: 1px solid rgba(255,255,255,.05); }
.mn-label   { font-size: 10px; font-weight: 700; color: #4B5563; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 14px; }
.mn-pill    { font-size: 10px; padding: 3px 10px; border-radius: 20px; font-weight: 700; }
.mn-flow    { display: grid; grid-template-columns: 1fr 72px 1fr; grid-template-rows: 1fr 1fr; gap: 8px; align-items: center; }
.mn-node    { border-radius: 14px; padding: 13px 8px; text-align: center; }
.mn-node-val  { font-size: 20px; font-weight: 900; line-height: 1; margin: 4px 0 2px; }
.mn-node-unit { font-size: 9px; color: #4B5563; }
.mn-node-lbl  { font-size: 10px; font-weight: 700; margin-top: 4px; }
.mn-inv     { grid-column: 2; grid-row: 1/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.mn-inv-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 0 0 6px rgba(0,160,176,.12), 0 0 0 13px rgba(0,160,176,.06); }
.mn-e3 { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; }
.mn-e2 { display: grid; grid-template-columns: 1fr 1fr; text-align: center; margin-top: 12px; }
.mn-eVal { font-size: 20px; font-weight: 900; color: white; line-height: 1.1; }
.mn-eLbl { font-size: 9px; font-weight: 700; margin-bottom: 6px; }
.mn-eSub { font-size: 9px; color: #374151; margin-top: 2px; }
.mn-div  { height: 1px; background: #1B2637; margin: 12px 0; }
.mn-soc  { font-size: 32px; font-weight: 900; }
.mn-bat-bar  { background: #1F2937; border-radius: 6px; height: 8px; overflow: hidden; margin: 8px 0 4px; }
.mn-bat-fill { height: 100%; border-radius: 6px; transition: width 1s ease; }
.mn-bat3     { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px; }
.mn-bat-cell { background: #0B1426; border-radius: 10px; padding: 9px; text-align: center; }
.mn-bat-cell-lbl { font-size: 9px; color: #4B5563; margin-bottom: 3px; }
.mn-bat-cell-val { font-size: 15px; font-weight: 800; }
.mn-rings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; }
.mn-ring-wrap { position: relative; width: 84px; height: 84px; margin: 0 auto 8px; }
.mn-ring-val  { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 15px; font-weight: 900; color: white; }
.mn-temps     { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mn-temp-cell { background: #0B1426; border-radius: 12px; padding: 14px; text-align: center; }
.mn-temp-val  { font-size: 28px; font-weight: 900; color: white; line-height: 1; }
.mn-pv2       { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mn-pv-cell   { background: #0B1426; border-radius: 10px; padding: 10px; text-align: center; }

@keyframes foxPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
  50%      { box-shadow: 0 0 0 6px rgba(16,185,129,.05); }
}
@keyframes arrowPulse {
  0%,100% { transform: rotate(90deg) scale(1); }
  50%      { transform: rotate(90deg) scale(1.3); }
}

/* ── DARK MODE ─────────────────────────────────────────── */
[data-theme="dark"] body            { background: #0D1117; color: #E6EDF3; }
[data-theme="dark"] .card           { background: #161B22; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
[data-theme="dark"] .fg input,
[data-theme="dark"] .fg select,
[data-theme="dark"] .fg textarea    { background: #0D1117; border-color: #30363D; color: #E6EDF3; }
[data-theme="dark"] .bnav           { background: #161B22; border-color: #30363D; }
[data-theme="dark"] .bnav-btn       { color: #6E7681; }
[data-theme="dark"] .svc-card       { background: #161B22; }
[data-theme="dark"] .war-card       { border-color: #30363D; }
[data-theme="dark"] .stat           { background: #161B22; }

/* ── OFFER ANNOUNCEMENT STYLE ──────────────────────────── */
.offer-announce {
  background: linear-gradient(135deg, #1E40AF, #1E3A8A);
  border-radius: var(--r); padding: 14px; color: white;
  display: flex; align-items: flex-start; gap: 10px;
}
.offer { display: flex; align-items: flex-start; gap: 10px; }