/* Tokens & base */

.weather-widget{

  --ww-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  --ww-fg:#111827; --ww-muted:#6b7280; --ww-border:#e5e7eb; --ww-bg:#fff; --ww-bg-sub:#f9fafb; --ww-accent:#3b82f6;

}

.weather-widget{ font-family:var(--ww-font); color:var(--ww-fg); background:var(--ww-bg); }

.weather-widget *{ box-sizing:border-box; }

.weather-widget .ww-title{ margin:0 0 6px; font-size:1.25rem; }

.weather-widget .ww-muted{ color:var(--ww-muted); font-size:.92rem; }

.weather-widget .ww-error{ color:#991b1b; margin-top:6px; }

.weather-widget .ww-section{ margin-top:16px; }



/* Location buttons */

.weather-widget .ww-locations{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 12px; }

.weather-widget .ww-btn{

  user-select:none; cursor:pointer; padding:10px 12px; border-radius:12px;

  border:1px solid var(--ww-border); background:var(--ww-bg-sub); transition:.15s;

}

.weather-widget .ww-btn:hover{ background:#f3f4f6; transform:translateY(-1px); }

.weather-widget .ww-btn.ww-active{ border-color:var(--ww-accent); box-shadow:0 0 0 3px rgba(59,130,246,.18); background:#eff6ff; }

.weather-widget .ww-btn .ww-title-sm{ font-weight:600; }

.weather-widget .ww-btn .ww-sub{ font-size:.85rem; color:var(--ww-muted); }



/* Cards */

.weather-widget .ww-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }

.weather-widget .ww-card{ border:1px solid var(--ww-border); border-radius:12px; padding:12px; background:#fff; }



/* Tables styled like card rows */

.weather-widget table{ border-collapse:separate; border-spacing:0 8px; width:100%; }

.weather-widget th{

  background:var(--ww-bg-sub);

  padding:10px 14px;               /* match body padding for alignment */

  font-size:13px; text-align:left; border:none; color:#374151;

}

.weather-widget td{

  border-width:1px 0 1px 0; border-style:solid; border-color:var(--ww-border);

  padding:10px 14px; font-size:14px; background:#fff;

}

.weather-widget td:first-child{ border-width:1px 0 1px 1px; border-radius:8px 0 0 8px; }

.weather-widget td:last-child{  border-width:1px 1px 1px 0; border-radius:0 8px 8px 0; }



/* Keep "Den & datum" + "Interval" on one line in MAIN rows (all widths) */

.weather-widget .ww-table-48h thead th:nth-child(1),

.weather-widget .ww-table-48h thead th:nth-child(2),

.weather-widget .ww-table-48h tbody > tr:not(.ww-inline) > td:nth-child(1),

.weather-widget .ww-table-48h tbody > tr:not(.ww-inline) > td:nth-child(2){

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



/* Wind direction arrow */

.weather-widget .ww-wdir{ display:inline-block; line-height:1; vertical-align:middle; margin-left:4px; }

.weather-widget .ww-wdir-svg{ display:inline-block; fill: currentColor; }



/* Hover highlight ONLY on main rows (clickable) */

.weather-widget tbody tr.ww-rowlink:hover td{ background:#f9fafb; }

/* Remove generic hover */

.weather-widget tbody tr:hover td{ background:unset; }



.weather-widget .ww-rowlink{ cursor:pointer; }

.weather-widget .ww-icon{ width:28px; height:28px; vertical-align:middle; }



/* First/last *visible* cell have rounded corners when CLOSED */

.weather-widget td.is-first-visible{

  border-width:1px 0 1px 1px;

  border-top-left-radius:8px;

  border-bottom-left-radius:8px;

}

.weather-widget td.is-last-visible{

  border-width:1px 1px 1px 0;

  border-top-right-radius:8px;

  border-bottom-right-radius:8px;

}



/* When the row is EXPANDED (accordion open), flatten bottom corners */

.weather-widget tr.ww-expanded td.is-first-visible{ border-bottom-left-radius:0; }

.weather-widget tr.ww-expanded td.is-last-visible{  border-bottom-right-radius:0; }



/* Modal */

.weather-widget .ww-modal{

  position:fixed; inset:0; display:none; align-items:center; justify-content:center;

  background:rgba(15,23,42,.45); z-index:9999; padding:20px;

}

.weather-widget .ww-modal.ww-open{ display:flex; }

.weather-widget .ww-modal-dialog{

  width:min(900px,96vw); max-height:90vh; overflow:auto; background:#fff;

  border-radius:14px; border:1px solid var(--ww-border); box-shadow:0 10px 25px rgba(0,0,0,.2);

}

.weather-widget .ww-modal-head{

  display:flex; align-items:center; justify-content:space-between;

  padding:12px 14px; border-bottom:1px solid var(--ww-border);

}

.weather-widget .ww-modal-title{ font-weight:600; }

.weather-widget .ww-modal-body{ padding:12px 14px; }

.weather-widget .ww-close{

  appearance:none; border:1px solid var(--ww-border); background:#fff; border-radius:8px;

  padding:6px 10px; cursor:pointer; font-size:14px;

}

.weather-widget .ww-close:hover{ background:#f9fafb; }

.weather-widget .ww-modal .ww-scroll table{ border-spacing:0 6px; }

.weather-widget .ww-modal .ww-scroll td{

  border-width:1px 0 1px 0; border-style:solid; border-color:var(--ww-border);

  background:#fff; padding:8px 10px; font-size:13px;

}

.weather-widget .ww-modal .ww-scroll td:first-child{ border-left:1px solid var(--ww-border); border-radius:6px 0 0 6px; }

.weather-widget .ww-modal .ww-scroll td:last-child{  border-right:1px solid var(--ww-border); border-radius:0 6px 6px 0; }



/* Prevent wrap in modal's date-time cell */

.weather-widget .ww-modal .ww-scroll td:first-child,

.weather-widget .ww-modal .ww-scroll th:first-child{

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



/* Inline accordion ------------------------------------------- */

/* Wrapper cell: remove padding ONLY on the wrapper td (not inner table cells) */

.weather-widget tr.ww-inline > td{

  padding:0 !important;

  border:none;

  background:transparent;

}

.weather-widget .ww-inline-wrap{

  margin-top:-6px;                      /* merge under expanded row */

  padding:8px 0 10px;                   /* no side padding => align with main table borders */

  background:#fff;

  border:1px solid var(--ww-border);

  border-top:none;                      /* shares top border with expanded row */

  border-bottom-left-radius:8px; border-bottom-right-radius:8px;

  box-shadow:0 1px 3px rgba(0,0,0,.06);

}



/* Inner inline table: align via colgroup; restore padding on real cells */

.weather-widget .ww-inline-inner{

  border-collapse:separate; border-spacing:0 4px; width:100%;

  table-layout:fixed;

}

.weather-widget .ww-inline-inner td{

  padding:10px 14px !important;         /* match main rows */

  font-size:13px;

  background:#fff;

  border:0;                             /* no borders on inner cells */

}



/* Let the icon column width be driven by measured colgroup widths (no hard CSS width) */

.weather-widget .ww-table-48h thead th:nth-child(3),

.weather-widget .ww-table-48h tbody > tr:not(.ww-inline) > td:nth-child(3),

.weather-widget .ww-inline-inner td:nth-child(3){

  width: auto !important;

}



/* =========================

   Responsive column control

   48h column order:

   1 Day+Date, 2 Interval, 3 Symbol, 4 Temp, 5 Wind avg, 6 Gust,

   7 Precip, 8 Cloud, 9 Pressure, 10 Humidity

   ========================= */



/* MOBILE ≤767: show 1,2,3,4 */

@media (max-width: 767px){

  .weather-widget .ww-table-48h thead th:nth-child(n+5),

  .weather-widget .ww-table-48h tbody td:nth-child(n+5){ display:none; }

}



/* MOBILE EXTRA 768–880: show 1,2,3,4,7 */

@media (min-width: 768px) and (max-width: 880px){

  .weather-widget .ww-table-48h thead th,

  .weather-widget .ww-table-48h tbody td{ display:table-cell; }

  .weather-widget .ww-table-48h thead th:nth-child(5),

  .weather-widget .ww-table-48h tbody td:nth-child(5),

  .weather-widget .ww-table-48h thead th:nth-child(6),

  .weather-widget .ww-table-48h tbody td:nth-child(6),

  .weather-widget .ww-table-48h thead th:nth-child(8),

  .weather-widget .ww-table-48h tbody td:nth-child(8),

  .weather-widget .ww-table-48h thead th:nth-child(9),

  .weather-widget .ww-table-48h tbody td:nth-child(9),

  .weather-widget .ww-table-48h thead th:nth-child(10),

  .weather-widget .ww-table-48h tbody td:nth-child(10){ display:none; }

}



/* TABLET 881–992: show 1,2,3,4,5,7 */

@media (min-width: 881px) and (max-width: 992px){

  .weather-widget .ww-table-48h thead th,

  .weather-widget .ww-table-48h tbody td{ display:table-cell; }

  .weather-widget .ww-table-48h thead th:nth-child(6),

  .weather-widget .ww-table-48h tbody td:nth-child(6),

  .weather-widget .ww-table-48h thead th:nth-child(8),

  .weather-widget .ww-table-48h tbody td:nth-child(8),

  .weather-widget .ww-table-48h thead th:nth-child(9),

  .weather-widget .ww-table-48h tbody td:nth-child(9),

  .weather-widget .ww-table-48h thead th:nth-child(10),

  .weather-widget .ww-table-48h tbody td:nth-child(10){ display:none; }

}



/* TABLET EXTRA 993–1024: modal, show 1–7, hide 8–10 */

@media (min-width: 993px) and (max-width: 1024px){

  .weather-widget .ww-table-48h thead th:nth-child(8),

  .weather-widget .ww-table-48h tbody td:nth-child(8),

  .weather-widget .ww-table-48h thead th:nth-child(9),

  .weather-widget .ww-table-48h tbody td:nth-child(9),

  .weather-widget .ww-table-48h thead th:nth-child(10),

  .weather-widget .ww-table-48h tbody td:nth-child(10){ display:none; }

}



/* LAPTOP 1025–1366: modal, hide Pressure(9), Humidity(10) */

@media (min-width: 1025px) and (max-width: 1366px){

  .weather-widget .ww-table-48h thead th:nth-child(9),

  .weather-widget .ww-table-48h tbody td:nth-child(9),

  .weather-widget .ww-table-48h thead th:nth-child(10),

  .weather-widget .ww-table-48h tbody td:nth-child(10){ display:none; }

}



/* DESKTOP ≤2399 and WIDE ≥2400: show all (no extra rules) */