/* =========================================================
   DARK DASHBOARD THEME — FULL
   (Variables grouped up top for easy tweaking)
   ========================================================= */

/* =========================
   ⚙️ CONFIG — GLOBAL
   ========================= */
   :root {
    /* === COLORS === */
    --bg-dark:            #000;     /* page background */
    --card-bg:            #222;     /* widget card background */
    --card-bg-2:          #333;     /* secondary shade for gradients */
    --card-border:        #232323;  /* card border line */
    --accent:             #501147;  /* headers / accents */
    --text-main:          #fff;     /* primary text on dark */
    --text-muted:         #ccc;     /* headings / labels muted */
    --text-subtle:        #bbb;     /* secondary text */
    --clock-bg:           #494949;  /* flip clock strip background */
    --radar-border:       var(--card-border);
  
    /* === THERMOSTAT TEXT KNOBS (left/right column in tables) === */
    --th-label-color:     #bbb;  /* "Set:", "Fan:", "Circulate:" */
    --th-value-color:     #ddd;  /* 71°F, Auto, On/Off */
  
    /* === GRADIENTS === */
    --thermo-gradient-cool: linear-gradient(to bottom, #023e6b, #04509b);
    --thermo-gradient-heat: linear-gradient(to bottom, #8b0000, #b30000);
    --thermo-gradient-off:  linear-gradient(to bottom, #333, #555);
    --conditions-gradient:  linear-gradient(135deg, var(--card-bg), var(--card-bg-2) 85%);
  
    /* === TYPOGRAPHY === */
    --font: "Tahoma", Geneva, sans-serif;
    --title-size:        clamp(.8em, 1.4vw, 1.8em);
    --sub-title-size:    clamp(.8em, 1.2vw, 1.6em);
    --value-size:        clamp(1.2em, 3vw, 3.5em);
    --subvalue-size:     clamp(.7em, 1.1vw, 1.6em);
    --zone-header-size:  clamp(.8em, 1.4vw, 1.25em);
    --thermo-main-size:  clamp(1.4em, 5vw, 2.6em);
    --mode-label-size:   clamp(1em, 2vw, 1.18em);
    --table-size:        clamp(0.97em, 1.8vw, 1.13em);
    --last-updated-size: clamp(0.7em, 1vw, 0.93em);
  
    /* === SIZING === */
    --card-height:       250px;
    --card-min-height:   230px;
    --border-radius:     10px;
    --shadow:            0 0 10px rgba(0,0,0,0.4);
  
    /* === SPACING === */
    --card-gap:          10px;
    --row-gap:           5px;
    --padding-main:      20px;
  
    /* === WIDGET-SPECIFIC: Thermostat pill constants === */
    --thermo-pill-w:     120px;   /* or 9ch for character-based width */
    --thermo-pill-h:     28px;
  
    /* === FORECAST GRID (if used in this dashboard) === */
    --wf-cards:          5;       /* number of daily tiles */
  }
  
  /* Optional: night overlay controlled via --night-tint (0..1) */
  #night-tint {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,var(--night-tint, 0));
    z-index: 9999; pointer-events: none;
    transition: background 0.8s linear;
  }
  
  /* =========================
     BASE
     ========================= */
  body {
    margin: 0;
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font);
    overflow-x: hidden;
  }
  
  .dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    padding: var(--padding-main);
  }
  
  /* Clock in weather bar */
  .digital-clock[data-widget="digital-clock"]{
/*
    border-style: dotted;
    border-color: #f00;
    border-width: 5px;
*/

    color: #fff;  
    --base: 220px;
  }
  


  /* =========================
     LAYOUT ROWS
     ========================= */
  .top-row, .bottom-row, .widget-row {
    display: flex;
    gap: var(--card-gap);
    justify-content: center;
    align-items: stretch;
    width: 96.5vw;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
  }
  
  .middle-row {
    display: block;
    width: 96.5vw;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
  }

  .bottom-row {
    margin-top: 20px;
  }

  .sun-tracker {
    isolation: isolate;
    position: relative; 
   }

  
  .widget-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  /* =========================
     CARD STYLING
     ========================= */
  .widget-card, .zone {
    flex: 1 1 0;
    height: var(--card-height);
    min-height: var(--card-min-height);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    box-sizing: border-box;
  }
  
  /* =========================
     SPECIAL WIDGETS
     ========================= */
  .google-slides-wrapper {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    background: var(--card-bg);
    width: 100%;
    height: 100%;
  }
  .google-slides-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }
  
  .current-conditions,
  .current-conditions-single {
    flex: 1 1 0;
    background: var(--conditions-gradient);
    justify-content: center;
  }
  
  /* =========================
     TEXT STYLES
     ========================= */
  .widget-title {
    font-size: var(--title-size);
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .widget-sub-title {
    font-size: var(--sub-title-size);
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-align: center;
    display: block;
  }
  .widget-value {
    font-size: var(--value-size);
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
  }
  .widget-subvalue {
    font-size: var(--subvalue-size);
    font-weight: 400;
    color: var(--text-subtle);
    margin: 2px 0;
  }
  
  /* =========================
     Radar
     ========================= */
  .radar-card {
    margin-top: 10px;
    width:95%;
    display: flex;
    justify-content: center;
    align-items:center;
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--radar-border);
  }
 .radar {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);    

  }
  
  /* =========================
     Clock
     ========================= */
  .clock-wrapper {
    margin-top: 10px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    background: var(--clock-bg);
  }
  #flipClock, .flip-clock-wrapper {
    justify-content: flex-start;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* =========================
     Watering Schedule
     ========================= */
  .watering-widget {
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #0d1b2a, #1b263b);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    overflow: hidden;
  }
  .watering-header {
    padding: 16px 18px 8px 18px;
    font-weight: bold;
    font-size: 1.2em;
    color: #fff;
    flex: 0 0 auto;
    letter-spacing: 0.01em;
  }
  .watering-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    flex: 1 1 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    padding: 16px 18px 18px 18px;
  }
  .watering-card {
    background: #2b2d42;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 0;
    box-shadow: inset 0 0 3px #000;
    color: #fff;
    font-family: inherit;
    font-size: 1em;
  }
  .watering-card:nth-child(1) { border-top-left-radius: 12px; }
  .watering-card:nth-child(2) { border-top-right-radius: 12px; }
  .watering-card:nth-child(3) { border-bottom-left-radius: 12px; }
  .watering-card:nth-child(4) { border-bottom-right-radius: 12px; }
  .zone-name { font-weight: bold; font-size: 1.8em; margin-bottom: 2px; }
  .zone-time { font-size: 1.5em; color: #aaa; margin-top: 0; font-weight: 400; }
  
  /* =========================
     THERMOSTAT (global defaults)
     ========================= */
  .zone-header {
    background: var(--accent);
    color: #fff;
    font-size: var(--zone-header-size);
    font-weight: 700;
    text-align: center;
    width: 100%;
    padding: 8px 0;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
  }
  .zone-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
  .temperature {
    font-size: var(--thermo-main-size);
    font-weight: 700;
    margin: 4px 0;
    letter-spacing: -1.5px;
    color: #fff;
  }
  .mode-cool, .mode-heat, .mode-off {
    border-radius: 8px;
    margin: 4px 0;
    padding: 2px 22px;       /* default padding for non-widget pills */
    font-size: var(--mode-label-size);
    font-weight: 600;
    display: inline-block;   /* default display for non-widget pills */
  }
  .mode-cool { background: var(--thermo-gradient-cool); color: #fff; }
  .mode-heat { background: var(--thermo-gradient-heat); color: #fff; }
  .mode-off  { background: var(--thermo-gradient-off);  color: #ccc; }
  
  /* Table: now uses variable colors so it matches your new widget */
  .thermo-table {
    font-size: var(--table-size);
    width: 100%;
    color: var(--text-main);
  }
  .thermo-table td:first-child {
    text-align: right;
    color: var(--th-label-color);   /* ← left label color knob */
    font-weight: 600;
  }
  .thermo-table td:last-child {
    text-align: left;
    color: var(--th-value-color);   /* ← right value color knob */
    font-weight: 700;
  }
  
  .last-updated {
    font-size: var(--last-updated-size);
    text-align: center;
    color: #535353;
  }
  
  /* === FORECAST COLORS (if used) === */
  .widget-title.ht { color: #FFB300; font-weight: bold; }
  .widget-title.lt { color: #64B5F6; font-weight: bold; }
  .widget-subvalue.precip { color: #d1d1d1; }
  
  /* =========================
     WRAPPER FLATTENING (legacy)
     =========================
     NOTE: display: contents can confuse Safari layout/stacking.
     Keep only if you know you need it for this page.
  */
  .thermo-widget,
  .thermo-block {
    display: contents !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }
  
  /* =========================
     Forecast grid (if used)
     ========================= */
  .weather-forecast { display: block !important; }
  .forecast-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--wf-cards), minmax(0, 1fr));
    gap: var(--card-gap);
    align-items: stretch;
  }
  
  /* =========================
     RESPONSIVE
     ========================= */
  @media (max-width: 900px) {
    .top-row, .middle-row, .bottom-row {
      flex-direction: column;
      gap: 12px;
      width: 99vw;
    }
    .widget-card, .zone {
      max-width: 100vw;
      height: auto;
    }
  }
  
  /* =========================================================
     THERMOSTAT WIDGET-ONLY PILL SIZING (constant width)
     Scoped to the widget container so other cards are unaffected.
     ========================================================= */
  #thermo-widget {
    --pill-w: var(--thermo-pill-w);
    --pill-h: var(--thermo-pill-h);
  }
  #thermo-widget .zone-body { min-width: 0; } /* allow shrink for ellipsis */
  
  #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;                /* center label */
    align-items: center;
    justify-content: center;
  
    width: var(--pill-w);
    min-width: var(--pill-w);
    max-width: var(--pill-w);
    height: var(--pill-h);
    line-height: var(--pill-h);
    flex: 0 0 var(--pill-w);             /* don’t let flex parent stretch it */
  
    padding: 0 8px;                      /* stays inside fixed width */
    box-sizing: border-box;
  
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* =========================================================
     FORECAST SLOT (keeps width constant across daily/hourly)
     ========================================================= */
  #forecast-slot {
    flex: 5 1 0;   /* ≈ width of five standard cards; adjust as desired */
    min-width: 0;
    display: flex;
  }
  #forecast-slot > * {
    flex: 1 1 0;
    min-width: 0;
  }
  #forecast-slot .weather-forecast,
  #forecast-slot .forecast-grid {
    display: block !important;
  }
  #forecast-slot .forecast-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--wf-cards), minmax(0, 1fr));
    gap: var(--card-gap);
  }
  #forecast-slot .widget-card {
    height: var(--card-height);
    min-height: var(--card-min-height);
  }