/* =========================================================
   Ryan Family Dashboard — theme-purple.css (FULL)
   Weather + Calendars + Strava + Thermostat (scoped)

   ⚙️ CONFIG: Edit variables in the TOP SECTION only.
   Everything below consumes those variables.
   ========================================================= */


/* =========================================================
   ================  GLOBAL / BRAND CONFIG  ================
   ========================================================= */
   :root{
    /* ---- Brand colors (purple header band, etc.) ---- */
    --brand-purple-top:   #8f2a6e;        /* weather & thermostat headers (top) */
    --brand-purple-bot:   #7b1f5c;        /* weather & thermostat headers (bottom) */
    --brand-text-on-dark: #ffffff;
  
    /* ---- Global surface & utility ---- */
    --surface-white: #ffffff;
    --surface-wood-bg: url("/images/patternonwood.jpg");   /* page background image */
    --shadow-lg:   0 10px 24px rgba(0,0,0,.22);
    --shadow-md:   0 8px 24px rgba(0,0,0,.35);
    --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,.70);
  
    /* ---- Typography ---- */
    --font-ui: "Tahoma", Geneva, sans-serif;
  
    /* ---- Right-rail responsiveness ---- */
    --rail-two-col-breakpoint: 420px;     /* (we’ll override later to force 2-up at 385px) */
  
  
    /* =======================================================
       ================  WEATHER BAR CONFIG  ================
       ======================================================= */
    /* Bar sizing */
    --wx-height: 165px;                   /* total purple bar height */
    --wx-cols: 5;                         /* daily cards per row (keep in sync with PHP count) */
    --wx-card-h: 150px;                   /* daily card height inside bar */
    --wx-card-top-padding: 7px;
    --wx-gap: 5px;                        /* gap between daily cards */
  
    /* Daily card pieces */
    --wx-icon: 56px;                      /* icon size */
    --wx-title: 18px;                     /* "Today/Fri" */
    --wx-hi: 18px;                        /* high temp font size */
    --wx-lo: 16px;                        /* low temp font size */
    --wx-sub: 12px;                       /* precip label */
  
    /* Hourly grid clamps */
    --hourly-row-1: 40px;                 /* icons */
    --hourly-row-2: 22px;                 /* temps */
    --hourly-row-3: 40px;                 /* spark */
    --hourly-row-4: 6px;                  /* bar */
    --hourly-row-5: 16px;                 /* time */
    --hourly-gap: .12rem;
  
    /* Weather colors */
    --wx-white:    #fff;
    --wx-glass:    rgba(255,255,255,0.04);
    --wx-glass-br: rgba(255,255,255,0.29);
    --wx-type-outline: 0 2px 4px rgba(0,0,0,.75);
  
  
    /* =======================================================
       ===============  THERMOSTAT WIDGET CONFIG  ============
       ======================================================= */
    /* Card & header */
    --th-card-bg:     #ffffff;            /* white card */
    --th-card-br:     #dcdfea;            /* card border */
    --th-radius:      18px;               /* card/pill radius */
    --th-shadow:      var(--shadow-lg);   /* outer shadow */
    --th-header-top:  var(--brand-purple-top);
    --th-header-bot:  var(--brand-purple-bot);
  
    /* Blue info panel (Set / Fan / Circulate) */
    --th-pane-top:    #d7e9ff;            /* top of panel gradient */
    --th-pane-bot:    #c3defe;            /* bottom of panel gradient */
    --th-pane-br:     #b2d2ff;            /* panel border */
  
    /* Table text colors (EASY KNOBS) */
    --th-label-color: #081122;            /* left labels: “Set:”, “Fan:”, “Circulate:” */
    --th-value-color: #0e2e65;            /* right values: 70°F, Auto, On/Off */
  
    /* Pills (Mode) */
    --th-pill-width:  68%;                /* % of card width (60–75% looks nice) */
    --th-pill-blue-top:  #3183e3;         /* Idle/Cool top */
    --th-pill-blue-bot:  #2a78d6;         /* Idle/Cool bottom */
    --th-pill-blue-br:   #2a73cc;         /* Idle/Cool border */
    --th-pill-heat-top:  #d64a3a;         /* Heat top */
    --th-pill-heat-bot:  #e26453;         /* Heat bottom */
    --th-pill-heat-br:   #c1483a;         /* Heat border */
    --th-pill-off-top:   #eaeaea;         /* Off top */
    --th-pill-off-bot:   #dcdcdc;         /* Off bottom */
    --th-pill-off-br:    #cfcfcf;         /* Off border */
    --th-pill-text:      #ffffff;
  
    /* Thermostat spacing & sizes */
    --th-gap:        10px;
    --th-pad:        12px;
    --th-zone-size:  clamp(.9em, 1.3vw, 1.15em);
    --th-temp-size:  clamp(1.6em, 5vw, 2.8em);
    --th-label-size: clamp(0.95em, 1.8vw, 1.1em);
    --th-meta-size:  clamp(.78em, 1.1vw, .95em);
    --th-text-main:  #1b1b22;
    --th-text-soft:  #080c24;
  }
  
  
  /* =========================================================
     ===================  BASE / GLOBAL  =====================
     ========================================================= */
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body{
    margin: 0;
    color: var(--brand-text-on-dark);
    font-family: var(--font-ui);
    background: var(--surface-wood-bg) center/cover fixed no-repeat;
  }
  iframe{ border-radius: 8px; display: block; }
  
  
  /* =========================================================
     ====================  WEATHER STRIP  ====================
     ========================================================= */
  .weather{
    border-radius: 12px;
    background: linear-gradient(180deg, var(--brand-purple-top), var(--brand-purple-bot) 85%);
    padding: 8px;
    border: 0;
    box-shadow: var(--shadow-md);
    table-layout: fixed;
  }
  .weather td{ vertical-align: middle; }
  
  /* Slot that holds the PHP widget; hard-clip contents */
  #forecast-slot{
    width: 620px;
    height: var(--wx-height);
    overflow: hidden;
  }
  #forecast-slot .weather-forecast{
    width: 100%;
    height: var(--wx-height);
    overflow: hidden;
  }
  
  /* Text in weather bar */
  .widget-title{
    font-weight: 700;
    color: var(--wx-white);
    margin-bottom: 6px;
  }
  .widget-title.ht { color: #FFB300; font-weight: bold; }
  .widget-title.lt { color: #64B5F6; font-weight: bold; }
  .widget-subvalue.precip { color: #d1d1d1; }
  .wf-daily-grid{ padding-top: var(--wx-card-top-padding); }
  
  /* Right-side inline readings under the clock */
  .temp{
    color: var(--wx-white);
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    line-height: 20px;
    white-space: nowrap;
    margin-right:10px;
  }
  
  /* Clock in weather bar */
  .digital-clock[data-widget="digital-clock"]{
    color: #fff;
    --base: 68px;
    width: 93%;
    margin-right:10px;
  }
  
  /* Forecast daily layout */
  #forecast-slot .weather-forecast .forecast-grid{
    display: grid !important;
    grid-template-columns: repeat(var(--wx-cols), minmax(0, 1fr)) !important;
    gap: var(--wx-gap) !important;
    align-items: stretch !important;
  }
  #forecast-slot .weather-forecast .widget-card{
    height: var(--wx-card-h) !important;
    min-height: var(--wx-card-h) !important;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .25rem;
    background: var(--wx-glass);
    border: 1px solid var(--wx-glass-br);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    padding: 8px 10px;
  }
  #forecast-slot .weather-forecast .widget-card img{
    height: var(--wx-icon) !important; width: auto; display: block; margin: 2px 0 4px;
  }
  #forecast-slot .weather-forecast .widget-title,
  #forecast-slot .weather-forecast .widget-value,
  #forecast-slot .weather-forecast .widget-subvalue{
    color: var(--wx-white) !important;
    text-shadow: var(--wx-type-outline);
    margin: 0;
  }
  #forecast-slot .weather-forecast .widget-title{
    font-size: var(--wx-title) !important;
    font-weight: 800;
    letter-spacing: .2px;
  }
  #forecast-slot .weather-forecast .widget-value{
    display: flex; gap: .3em; align-items: baseline; line-height: 1.05;
  }
  #forecast-slot .weather-forecast .ht{ font-size: var(--wx-hi) !important; color: #FFD54F !important; font-weight: 900 !important; }
  #forecast-slot .weather-forecast .lt{ font-size: var(--wx-lo) !important; color: #81D4FA !important; font-weight: 900 !important; }
  #forecast-slot .weather-forecast .widget-subvalue{ font-size: var(--wx-sub) !important; opacity: .95 !important; }
  #forecast-slot .weather-forecast .widget-title,
  #forecast-slot .weather-forecast .widget-subvalue{
    background: transparent !important; padding: 0 !important; border-radius: 0 !important;
  }
  
  /* HOURLY readout inside the strip */
  #forecast-slot [id^="wf_"] .hourly-grid{
    grid-template-rows:
       var(--hourly-row-1)
       var(--hourly-row-2)
       var(--hourly-row-3)
       var(--hourly-row-4)
       var(--hourly-row-5)
    !important;
    row-gap: var(--hourly-gap) !important;
  }
  #forecast-slot [id^="wf_"] .icon img{ height: 34px !important; width: auto !important; display: block; }
  #forecast-slot [id^="wf_"] .temp,
  #forecast-slot [id^="wf_"] .time{
    font-size: 1.05em !important; font-weight: 800 !important; color: var(--wx-white) !important;
    text-shadow: var(--wx-type-outline) !important; white-space: nowrap;
  }
  #forecast-slot [id^="wf_"] .spark svg{ height: 42px !important; }
  #forecast-slot [id^="wf_"] .spark .spark-line{ stroke: #B3E5FC !important; }
  #forecast-slot [id^="wf_"] .spark .spark-fill{ fill: rgba(179,229,252,.22) !important; }
  #forecast-slot [id^="wf_"] .spark .pt-text{
    fill: #fff !important; stroke: rgba(0,0,0,.95) !important; stroke-width: 7px !important;
  }
  #forecast-slot [id^="wf_"] .popbar{ height: 5px !important; background: rgba(255,255,255,.38) !important; }
  
  /* Responsive tweak for weather strip */
  @media (max-width: 980px){
    #forecast-slot{ width: 100%; }
    :root{ --wx-cols: 3; }
  }
  
  
  /* =========================================================
     =================  CALENDARS & STRAVA  =================
     ========================================================= */
  .big-calendar-frame-wrapper{ width: 697px; height: 600px; overflow: hidden; border-radius: 8px; margin-bottom: 20px; }
  .big-calendar-frame-wrapper iframe{ width: 697px; height: 600px; border: none; }
  .calendar-list-frame-wrapper{ width: 246px; height: 600px; overflow: hidden; border-radius: 8px; }
  .calendar-list-frame-wrapper iframe{ width: 246px; height: 600px; border: none; }
  
  .strava-header{
    width: 547px; height: 80px;
    background: #fff url("../images/strava.jpg") center/contain no-repeat;
    border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }
  .strava{
    width: 180px; height: 410px; overflow: hidden; border-radius: 8px;
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }
  .strava-frame-wrapper{ width: 100%; height: 410px; overflow: hidden; border-radius: 8px; }
  .strava-frame-wrapper iframe{ width: 100%; height: 410px; border: none; }
  
  .countdown{
    border-radius: 8px; text-align: center; text-shadow: #BBB 5px 5px 6px;
    font-weight: bold; font-size: 40px; color: #000;
  }
  .rounded{ border-radius: 8px; }
  .family{ border-radius: 8px; opacity: .95; color: #fff; background: transparent; }
  table{ border-collapse: collapse; }
  td{ padding: 0; }
  .white-card{ background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.08); overflow: hidden; }
  
  
  /* =========================================================
     =================  THERMOSTAT (SCOPED)  =================
     ========================================================= */
  
  /* Container: two cards side-by-side (we’ll hard-force at the end too) */
  #thermo-widget{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    font-family: var(--font-ui);
  }
  
  /* Card */
  #thermo-widget .zone{
    min-width: 0;
    height: 250px;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  
    background: linear-gradient(180deg,#ffffff 0%, #fbfbfd 70%, #f4f5f8 100%);
    border: 1px solid var(--th-card-br);
    border-radius: var(--th-radius);
    box-shadow: var(--th-shadow), var(--shadow-inset-top);
    color: var(--th-text-main);
    overflow: hidden;
  }
  
  /* Header */
  #thermo-widget .zone-header{
    background:
      linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0)),
      linear-gradient(180deg,var(--th-header-top),var(--th-header-bot));
    color: #fff;
    font-size: var(--th-zone-size);
    font-weight: 700;
    text-align: center;
    padding: 12px 0 11px;
    border-radius: var(--th-radius) var(--th-radius) 0 0;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
    letter-spacing: .25px;
    position: relative;
  }
  #thermo-widget .zone-header::after{
    content:"";
    position:absolute; inset:auto 10px 0 10px; height:1px;
    background: rgba(0,0,0,.12);
    border-radius: 999px;
  }
  
  /* Body */
  #thermo-widget .zone-body{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--th-gap);
    padding: 12px 12px 14px;
    text-align: center;
    min-width: 0;
  }
  
  /* Main temperature */
  #thermo-widget .temperature{
    font-size: calc(var(--th-temp-size) * 1.02);
    font-weight: 800;
    color: var(--th-text-main);
    letter-spacing: -1.4px;
    margin: 2px 0 4px;
  }
  
  /* Mode pill */
  #thermo-widget .mode-cool,
  #thermo-widget .mode-heat,
  #thermo-widget .mode-off,
  #thermo-widget .mode-cool-idle,
  #thermo-widget .mode-heat-idle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--th-pill-width);
    max-width: 100%;
    padding: 9px 16px;
    border-radius: 16px;
    font-weight: 700;
    font-size: var(--th-label-size);
    color: var(--th-pill-text);
    letter-spacing: .2px;
    box-shadow: 0 8px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.35);
  }
  #thermo-widget .mode-cool,
  #thermo-widget .mode-cool-idle{
    background: linear-gradient(180deg,var(--th-pill-blue-top) 0%, var(--th-pill-blue-bot) 100%);
    border: 1px solid var(--th-pill-blue-br);
  }
  #thermo-widget .mode-heat,
  #thermo-widget .mode-heat-idle{
    background: linear-gradient(180deg,var(--th-pill-heat-top) 0%, var(--th-pill-heat-bot) 100%);
    border: 1px solid var(--th-pill-heat-br);
  }
  #thermo-widget .mode-off{
    background: linear-gradient(180deg,var(--th-pill-off-top) 0%, var(--th-pill-off-bot) 100%);
    color: #666;
    border: 1px solid var(--th-pill-off-br);
  }
  
  /* Info panel (Set/Fan/Circulate) */
  #thermo-widget .widget-subvalue{
    width: 92%;
    margin-top: 2px;
    border-collapse: collapse;
    table-layout: fixed;
    background:
      linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)),
      linear-gradient(180deg, var(--th-pane-top) 0%, var(--th-pane-bot) 100%);
    border: 1px solid var(--th-pane-br);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 #eef5ff, 0 6px 14px rgba(0,0,0,.08);
    overflow: hidden;
  }
  #thermo-widget .widget-subvalue td{
    padding: 9px 14px;
    vertical-align: middle;
    font-size: calc(var(--th-label-size) * 0.98);
  }
  #thermo-widget .widget-subvalue tr + tr td{
    border-top: 1px solid rgba(0,0,0,.06);
  }
  #thermo-widget .widget-subvalue td:first-child{
    width: 50%;
    text-align: right;
    color: var(--th-label-color);   /* ← easy knob */
    font-weight: 700;
    white-space: nowrap;
  }
  #thermo-widget .widget-subvalue td:last-child{
    width: 50%;
    text-align: left;
    color: var(--th-value-color);   /* ← easy knob */
    font-weight: 800;
  }
  
  /* Optional timestamp */
  #thermo-widget .last-updated{
    font-size: var(--th-meta-size);
    color: var(--th-text-soft);
    margin-top: 6px;
  }
  
  /* (Default) stack below breakpoint — we’ll override next to force 2-up) */
  @media (max-width: var(--rail-two-col-breakpoint)){
    #thermo-widget{ grid-template-columns: 1fr; }
    #thermo-widget .zone{ height: auto; }
  }
  
  
  /* =========================================================
     =============  HARD OVERRIDE (KEEP 2-UP @ ~385px)  ======
     Put this at the very end so it wins specificity/order.
     ========================================================= */
  
  /* 1) Enforce two columns inside the ~385px right rail */
  #thermo-widget{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 10px !important;
    width: 100%;
  }
  
  /* 2) Make cards shrink gracefully in tight space */
  #thermo-widget .zone{
    min-width: 0;
    height: auto;          /* avoids overflow fights */
    min-height: 210px;
  }
  
  /* 3) Only stack on truly tiny screens */
  @media (max-width: 340px){
    #thermo-widget{ grid-template-columns: 1fr !important; }
  }
  
  /* 4) Neutralize any legacy flattening rules from old code */
  .thermo-widget,
  .thermo-block{
    display: initial !important;
  }