/*
    PHAN AirAware Widget 
    Copyright (C) 2025  Tarz L

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

*/

/* Scope root */
#phan-airaware-widget, .wwaq-card {
  --ww-bg: #1f2937;
  --ww-bg-2: #005a66;
  --ww-fg: #e5e7eb;
  --ww-sub: #9ca3af;
  --ww-border: rgba(255,255,255,.1);
  --ww-accent: #0f172a;
  --wwaq-scale: 0.8;

  /* Default images (override these via your site CSS if needed) */
  --ww-logo-image: url('./PHAN_logo.png');
  --ww-clear-image: url('./CLEAR_icon.png');

  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ww-fg);
  font-size: 13px; /* compact */
}

/* Popup frame */
.wwaq-popup{
  position:fixed;right:16px;bottom:16px;
  width:min(92vw, 860px);
  background:var(--ww-bg);
  border:1px solid var(--ww-border);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  overflow:hidden;
  z-index:2147483647; /* always on top */
  transform: scale(var(--wwaq-scale));
  transform-origin: bottom right;
}
.wwaq-head{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--ww-bg-2);border-bottom:1px solid var(--ww-border)}
.wwaq-title{color:var(--ww-fg);font-weight:700;font-size:16px;letter-spacing:.2px;flex:1}
.wwaq-loc{font-size:16px;font-weight:700;color:var(--ww-fg)}
.wwaq-btn{background:transparent;border:0;color:var(--ww-sub);cursor:pointer;padding:2px 6px;border-radius:8px}
.wwaq-btn:hover{color:#cbd5e1;background:rgba(255,255,255,.06)}
.wwaq-github {text-align:center;}
.wwaq-github a{color:var(--ww-fg);font-size:11.5px;margin-top:6px;display: inline-block;transition: transform 0.2s ease-in-out;}
.wwaq-github a:hover{transform: scale(1.3);}

/* Scrollable body */
.wwaq-body{
  padding:10px;
  max-height:min(72vh, 640px);
  overflow-y:auto;
}

.wwaq-collapsed {width: auto !important;max-width: 220px;transform: scale(var(--wwaq-scale));transform-origin: bottom right;}
.wwaq-collapsed .wwaq-body{display:none}
.wwaq-collapsed .wwaq-title {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.wwaq-collapsed .wwaq-loc {display: none; /* Optional: hides location text to save space */}

/* Banner */
.wwaq-banner{display:flex;gap:8px;align-items:center;background:var(--ww-accent);border:1px solid var(--ww-border);padding:6px 8px;border-radius:10px;margin-bottom:10px}
.wwaq-banner small{color:var(--ww-sub)}

/* Grid */
.wwaq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

/* Sections */
.wwaq-section{border:1px dashed var(--ww-border);border-radius:10px;padding:8px;background:rgba(255,255,255,.02)}
.wwaq-sec-title{font-weight:700;font-size:15px;margin-bottom:6px;display:flex;align-items:center;gap:8px}

/* Two-column inner grid */
.wwaq-grid-inner{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.cell{padding:6px;border:1px dashed var(--ww-border);border-radius:8px;background:rgba(255,255,255,.02)}
.cell .title{font-size:11.5px;color:var(--ww-sub);margin-bottom:4px}
.cell .val{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cell .desc{color:var(--ww-sub);font-size:12px;margin-top:2px}
.wwaq-date{color:var(--ww-sub);font-size:11.5px;margin-top:6px}
.wwaq-badge{padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);font-weight:700}
.wwaq-links a, .wwaq-date a{color:#fff;text-decoration:none;font-size:12px}

/* Severity color classes */
.g-green .wwaq-sec-title{color:#b9f5dc}
.g-yellow .wwaq-sec-title{color:#ffe8aa}
.g-orange .wwaq-sec-title{color:#ffd3a1}
.g-red .wwaq-sec-title{color:#ffb4b4}
.g-purple .wwaq-sec-title{color:#e3d0ff}
.g-maroon .wwaq-sec-title{color:#ffd0d0}
.g-green{border-left:4px solid rgba(16,185,129,.6)}
.g-yellow{border-left:4px solid rgba(251,191,36,.8)}
.g-orange{border-left:4px solid rgba(245,158,11,.8)}
.g-red{border-left:4px solid rgba(239,68,68,.8)}
.g-purple{border-left:4px solid rgba(139,92,246,.8)}
.g-maroon{border-left:4px solid rgba(127,29,29,.8)}
.g-green .wwaq-badge{background:rgba(16,185,129,.18);color:#b9f5dc}
.g-yellow .wwaq-badge{background:rgba(251,191,36,.8);color:#ffe8aa}
.g-orange .wwaq-badge{background:rgba(245,158,11,.8);color:#ffd3a1}
.g-red .wwaq-badge{background:rgba(239,68,68,.8);color:#ffb4b4}
.g-purple .wwaq-badge{background:rgba(139,92,246,.8);color:#e3d0ff}
.g-maroon .wwaq-badge{background:rgba(127,29,29,.35);color:#ffd0d0}
.g-na .wwaq-badge{background:rgba(107,114,128,.2);color:#e5e7eb}

/* Row placement */
.grid-aqi{grid-column:1}
.grid-spacer{grid-column:2;opacity:.5;display:flex;align-items:center;justify-content:center;border:1px dashed var(--ww-border);border-radius:10px;min-height:76px}
.grid-logo{grid-column:3;display:flex;align-items:center;justify-content:center}
.grid-covid{grid-column:1}
.grid-flu{grid-column:2}
.grid-rsv{grid-column:3}
.grid-clear{grid-column:1 / -1}

/* Logo cell — min 200px, scalable, no header/borders */
.wwaq-logo-only{border:none;background:transparent;padding:0}
.wwaq-logo-only .wwaq-sec-title{display:none}
.wwaq-logo-wrap{display:flex;align-items:center;justify-content:center;min-height:76px;padding:6px;background:transparent;border:none}
.wwaq-logo{min-width:200px;width:100%;height:48px;background-image:var(--ww-logo-image);background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2))}

/* CLEAR block */
.wwaq-clear{display:flex;gap:10px;align-items:flex-start;border:1px dashed var(--ww-border);border-radius:10px;padding:8px;background:rgba(255,255,255,.02)}
.wwaq-clear .wwaq-clear-img{width:56px;height:56px;background-image:var(--ww-clear-image);background-repeat:no-repeat;background-position:center;background-size:contain;flex:0 0 auto}
.wwaq-clear a{color:#fff;text-decoration:none;font-size:12px}

/* Page card (combobox) */
.wwaq-card{background:var(--ww-bg-2);border:1px solid var(--ww-border);border-radius:12px;padding:14px}
.wwaq-card select{padding:6px 8px;border-radius:8px;border:1px solid var(--ww-border);background:var(--ww-bg);color:var(--ww-fg)}