/* Monthly habit calendar — uses HabitFlow light/dark theme variables */
#monthly-calendar-modal.overlay{align-items:flex-start;padding:12px;overflow-y:auto;}
#monthly-calendar-modal .monthly-calendar-panel{
  position:relative;width:100%;max-width:1240px;max-height:none;margin:0 auto;
  border-radius:16px;overflow:visible;box-shadow:var(--shl);
}
#monthly-calendar-modal .monthly-calendar-close{
  position:absolute;top:14px;right:14px;z-index:20;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);background:var(--white);color:var(--ink);
  cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh);
}
#monthly-calendar-modal .monthly-calendar-close:hover{background:var(--accent);color:#fff;border-color:var(--accent);}

#monthly-calendar-modal .monthly-calendar-wrap{
  --rl-bg:var(--bg);--rl-bg-soft:var(--bg);--rl-card:var(--white);--rl-ink:var(--ink);
  --rl-ink-soft:var(--muted);--rl-accent:var(--accent);--rl-accent-2:var(--amber);
  --rl-line:var(--border);--rl-danger:var(--red);--rl-shadow:rgba(0,0,0,.08);--rl-radius:14px;
  --rl-c1:var(--accent);--rl-c2:var(--blue);--rl-c3:var(--orange);--rl-c4:var(--teal);
  --rl-c5:var(--purple);--rl-c6:var(--pink);--rl-c7:#6366f1;--rl-c8:var(--cyan);
  --rl-check-fill:#fff;
  background:var(--rl-bg);color:var(--rl-ink);font-family:var(--sans);transition:background .25s,color .25s;
  border-radius:16px;padding:28px 24px 48px;border:1px solid var(--border);
}
[data-theme="dark"] #monthly-calendar-modal .monthly-calendar-wrap{--rl-shadow:rgba(0,0,0,.35);}

#monthly-calendar-modal .rl-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:28px;flex-wrap:wrap;padding-right:40px;}
#monthly-calendar-modal .rl-brand .rl-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rl-accent);font-weight:600;}
#monthly-calendar-modal .rl-brand h2{font-family:var(--serif);font-size:2rem;font-weight:700;margin:0;letter-spacing:-0.02em;color:var(--rl-ink);}
#monthly-calendar-modal .rl-brand p{margin:6px 0 0;color:var(--rl-ink-soft);font-size:14px;max-width:460px;line-height:1.55;}
#monthly-calendar-modal .rl-controls{display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
#monthly-calendar-modal .rl-picker-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
#monthly-calendar-modal .rl-picker-label{font-size:10px;color:var(--rl-ink-soft);letter-spacing:.08em;text-transform:uppercase;font-weight:600;}
#monthly-calendar-modal .rl-view-picker{display:flex;gap:4px;align-items:center;background:var(--rl-card);border:1px solid var(--rl-line);padding:5px;border-radius:999px;box-shadow:var(--sh);flex-wrap:wrap;}
#monthly-calendar-modal .rl-view-btn{padding:7px 12px;border-radius:999px;border:none;background:transparent;color:var(--rl-ink-soft);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:var(--sans);}
#monthly-calendar-modal .rl-view-btn.active{background:var(--rl-accent);color:#fff;}
#monthly-calendar-modal .rl-view-btn:hover:not(.active){color:var(--rl-ink);background:var(--rl-bg);}

#monthly-calendar-modal .rl-hero{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:center;background:var(--rl-card);border:1px solid var(--rl-line);border-radius:var(--rl-radius);padding:28px 32px;margin-bottom:24px;box-shadow:var(--sh);}
#monthly-calendar-modal .rl-wheel-box{position:relative;width:200px;height:200px;}
#monthly-calendar-modal .rl-wheel-box svg{width:100%;height:100%;transform:rotate(-90deg);}
#monthly-calendar-modal .rl-wheel-box .rl-center-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
#monthly-calendar-modal .rl-center-label .rl-pct{font-family:var(--serif);font-size:38px;font-weight:700;line-height:1;color:var(--rl-ink);}
#monthly-calendar-modal .rl-center-label .rl-sub{font-size:10px;color:var(--rl-ink-soft);letter-spacing:.1em;text-transform:uppercase;margin-top:4px;font-weight:600;}
#monthly-calendar-modal .rl-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
#monthly-calendar-modal .rl-stat{border-left:2px solid var(--rl-line);padding-left:14px;}
#monthly-calendar-modal .rl-stat .rl-num{font-size:26px;font-weight:700;color:var(--rl-accent);font-variant-numeric:tabular-nums;}
#monthly-calendar-modal .rl-stat .rl-lbl{font-size:12px;color:var(--rl-ink-soft);margin-top:2px;}
#monthly-calendar-modal .rl-month-nav{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
#monthly-calendar-modal .rl-month-nav button{background:var(--rl-card);border:1px solid var(--rl-line);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:16px;color:var(--rl-ink);display:flex;align-items:center;justify-content:center;}
#monthly-calendar-modal .rl-month-nav button:hover{background:var(--rl-accent);color:#fff;border-color:var(--rl-accent);}
#monthly-calendar-modal .rl-month-title{font-family:var(--serif);font-size:22px;font-weight:700;min-width:180px;text-align:center;color:var(--rl-ink);}
#monthly-calendar-modal .rl-tracker-card{background:var(--rl-card);border:1px solid var(--rl-line);border-radius:var(--rl-radius);padding:20px;box-shadow:var(--sh);}
#monthly-calendar-modal .rl-empty{padding:32px 16px;text-align:center;color:var(--rl-ink-soft);font-size:14px;line-height:1.6;}

#monthly-calendar-modal #rl-gridView{overflow-x:auto;-webkit-overflow-scrolling:touch;}
#monthly-calendar-modal #rl-gridView table{border-collapse:collapse;width:100%;min-width:900px;}
#monthly-calendar-modal #rl-gridView th,#monthly-calendar-modal #rl-gridView td{text-align:center;padding:0;}
#monthly-calendar-modal #rl-gridView thead th{font-size:11px;color:var(--rl-ink-soft);font-weight:600;padding-bottom:8px;}
#monthly-calendar-modal #rl-gridView thead th.rl-habit-col{text-align:left;min-width:230px;padding-left:8px;}
#monthly-calendar-modal #rl-gridView thead th.rl-day-col{width:26px;font-size:10px;}
#monthly-calendar-modal #rl-gridView thead th.rl-sun{color:var(--rl-danger);}
#monthly-calendar-modal #rl-gridView tbody tr{border-top:1px solid var(--rl-line);}
#monthly-calendar-modal #rl-gridView td.rl-habit-name{text-align:left;padding:10px 8px;font-size:13.5px;display:flex;align-items:center;gap:8px;min-width:230px;color:var(--rl-ink);font-weight:500;}
#monthly-calendar-modal #rl-gridView td.rl-habit-name .rl-swatch{width:9px;height:9px;border-radius:50%;flex:none;}
#monthly-calendar-modal #rl-gridView td.rl-day-cell{padding:3px;}
#monthly-calendar-modal #rl-gridView td.rl-pct-col{width:60px;font-size:12px;color:var(--rl-ink-soft);font-variant-numeric:tabular-nums;}
#monthly-calendar-modal #rl-gridView td.rl-pct-col .rl-bar-bg{width:44px;height:5px;background:var(--rl-line);border-radius:3px;margin:0 auto 4px;overflow:hidden;}
#monthly-calendar-modal #rl-gridView td.rl-pct-col .rl-bar-fill{height:100%;background:var(--rl-accent);border-radius:3px;}

#monthly-calendar-modal .habit-day-check{
  width:22px;height:22px;border-radius:50%;border:1.5px solid var(--b2);cursor:pointer;margin:0 auto;
  position:relative;display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;user-select:none;background:transparent;flex-shrink:0;
}
#monthly-calendar-modal .habit-day-check.sm{width:19px;height:19px;}
#monthly-calendar-modal .habit-day-check:hover{border-color:var(--rc-color,var(--rl-accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--rc-color,var(--rl-accent)) 20%,transparent);}
#monthly-calendar-modal .habit-day-check.on{border-color:var(--rc-color,var(--rl-accent));}
#monthly-calendar-modal .habit-day-check .rc-fill{position:absolute;inset:0;border-radius:50%;background:var(--rc-color,var(--rl-accent));transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
#monthly-calendar-modal .habit-day-check.on .rc-fill{transform:scale(1);}
#monthly-calendar-modal .habit-day-check .rc-tick{position:relative;z-index:2;width:10px;height:10px;opacity:0;transform:scale(0);}
#monthly-calendar-modal .habit-day-check.on .rc-tick{opacity:1;transform:scale(1);}

#monthly-calendar-modal #rl-wheelView{display:none;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:center;}
#monthly-calendar-modal .rl-wheel-seg{cursor:pointer;transition:opacity .1s;stroke:var(--rl-card);stroke-width:1;}
#monthly-calendar-modal .rl-wheel-seg.off{opacity:.18;}
#monthly-calendar-modal .rl-wheel-daylabel{font-size:7px;fill:var(--rl-ink-soft);}
#monthly-calendar-modal .rl-wheel-center-text{font-family:var(--serif);fill:var(--rl-ink);}
#monthly-calendar-modal .rl-wheel-legend{display:flex;flex-direction:column;gap:9px;min-width:220px;max-height:520px;overflow-y:auto;padding-right:6px;}
#monthly-calendar-modal .rl-legend-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--rl-ink);}
#monthly-calendar-modal .rl-legend-item .rl-swatch{width:11px;height:11px;border-radius:3px;flex:none;}
#monthly-calendar-modal .rl-legend-item .rl-name{flex:1;}
#monthly-calendar-modal .rl-legend-item .rl-pct{font-size:11.5px;color:var(--rl-ink-soft);}

#monthly-calendar-modal #rl-heatmapView{display:none;}
#monthly-calendar-modal .rl-heat-row{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--rl-line);}
#monthly-calendar-modal .rl-heat-label{width:230px;flex:none;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--rl-ink);font-weight:500;}
#monthly-calendar-modal .rl-heat-cells{display:flex;gap:3px;overflow-x:auto;padding-bottom:2px;flex:1;min-width:0;}
#monthly-calendar-modal .rl-heat-week{display:flex;gap:3px;margin-right:6px;flex-shrink:0;}
#monthly-calendar-modal .rl-heat-cell{width:19px;height:19px;border-radius:50%;cursor:pointer;flex:none;border:1.5px solid var(--b2);transition:transform .15s,background .2s;}
#monthly-calendar-modal .rl-heat-cell:hover{transform:scale(1.12);}
#monthly-calendar-modal .rl-heat-cell.on{border-color:transparent;}
#monthly-calendar-modal .rl-heat-scale{width:56px;flex:none;text-align:right;font-size:11.5px;color:var(--rl-ink-soft);font-variant-numeric:tabular-nums;}
#monthly-calendar-modal .rl-heat-daynums{display:flex;gap:3px;margin-left:242px;margin-bottom:6px;overflow-x:auto;}
#monthly-calendar-modal .rl-heat-week-nums{display:flex;gap:3px;margin-right:6px;flex-shrink:0;}
#monthly-calendar-modal .rl-heat-daynum{width:19px;text-align:center;font-size:9px;color:var(--rl-ink-soft);flex:none;}

#monthly-calendar-modal #rl-categoriesView{display:none;}
#monthly-calendar-modal .rl-cat-top{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;margin-bottom:24px;}
#monthly-calendar-modal .rl-cat-pie-block{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;}
#monthly-calendar-modal .rl-cat-pie-legend{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
#monthly-calendar-modal .rl-cat-pie-legend .rl-li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--rl-ink);}
#monthly-calendar-modal .rl-cat-cards{display:flex;gap:16px;flex-wrap:wrap;flex:1;min-width:200px;}
#monthly-calendar-modal .rl-cat-card{background:var(--rl-bg);border-radius:10px;padding:16px 18px;min-width:200px;flex:1;border:1px solid var(--rl-line);border-top-width:4px;}
#monthly-calendar-modal .rl-cat-card .rl-cat-name{font-family:var(--serif);font-weight:700;font-size:16px;margin-bottom:10px;color:var(--rl-ink);}
#monthly-calendar-modal .rl-cat-card .rl-cat-stat{font-size:22px;font-weight:700;}
#monthly-calendar-modal .rl-cat-card .rl-cat-stat-lbl{font-size:11px;color:var(--rl-ink-soft);margin-bottom:10px;}
#monthly-calendar-modal .rl-dot-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:140px;}
#monthly-calendar-modal .rl-dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--b2);}
#monthly-calendar-modal .rl-dot.filled{border-color:transparent;}
#monthly-calendar-modal .rl-cat-main{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;}
#monthly-calendar-modal .rl-cat-sidebar{flex:none;width:240px;min-width:200px;}
#monthly-calendar-modal .rl-cat-heat{flex:1;min-width:280px;overflow-x:auto;}
#monthly-calendar-modal .rl-cg-header{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#fff;padding:6px 10px;border-radius:6px;margin:14px 0 6px;font-weight:700;}
#monthly-calendar-modal .rl-cg-header:first-child{margin-top:0;}
#monthly-calendar-modal .rl-cg-item{font-size:12.5px;padding:5px 10px;display:flex;justify-content:space-between;gap:8px;color:var(--rl-ink);border-bottom:1px solid var(--rl-line);}
#monthly-calendar-modal .rl-cg-item span:last-child{color:var(--rl-ink-soft);font-variant-numeric:tabular-nums;}

#monthly-calendar-modal #rl-dashboardView{display:none;}
#monthly-calendar-modal .rl-dash-top{display:grid;grid-template-columns:minmax(140px,180px) 1fr minmax(140px,180px);gap:20px;margin-bottom:20px;align-items:stretch;}
#monthly-calendar-modal .rl-dash-info{display:flex;flex-direction:column;gap:10px;justify-content:center;background:var(--rl-bg);border:1px solid var(--rl-line);border-radius:10px;padding:14px;}
#monthly-calendar-modal .rl-dash-info .rl-di .rl-k{font-size:10px;color:var(--rl-ink-soft);text-transform:uppercase;font-weight:600;}
#monthly-calendar-modal .rl-dash-info .rl-di .rl-v{font-size:14px;font-weight:600;color:var(--rl-ink);}
#monthly-calendar-modal .rl-dash-chart{background:var(--rl-bg);border:1px solid var(--rl-line);border-radius:10px;padding:14px 16px;min-height:130px;}
#monthly-calendar-modal .rl-dash-rate{background:var(--rl-bg);border:1px solid var(--rl-line);border-radius:10px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;}
#monthly-calendar-modal .rl-dash-rate .rl-rlabel{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--rl-ink-soft);font-weight:600;}
#monthly-calendar-modal .rl-dash-rate .rl-rnum{font-family:var(--serif);font-size:36px;font-weight:700;color:var(--rl-accent);}
#monthly-calendar-modal .rl-dash-empty{font-size:12px;color:var(--rl-ink-soft);text-align:center;padding:24px 12px;}
#monthly-calendar-modal #rl-dashTable{overflow-x:auto;margin-bottom:20px;-webkit-overflow-scrolling:touch;}
#monthly-calendar-modal #rl-dashTable table{border-collapse:collapse;width:100%;min-width:800px;}
#monthly-calendar-modal #rl-dashTable thead th{font-size:10.5px;color:var(--rl-ink-soft);padding-bottom:6px;font-weight:600;}
#monthly-calendar-modal #rl-dashTable tbody tr{border-top:1px solid var(--rl-line);}
#monthly-calendar-modal #rl-dashTable td.rl-dname{text-align:left;padding:7px 6px;font-size:12.5px;min-width:180px;color:var(--rl-ink);font-weight:500;}
#monthly-calendar-modal #rl-dashTable td.rl-dcell{padding:2px;text-align:center;}
#monthly-calendar-modal #rl-dashTable td.rl-dpct{font-size:11px;text-align:center;color:var(--rl-ink-soft);}
#monthly-calendar-modal .rl-dash-bottom{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start;}
#monthly-calendar-modal .rl-dash-bars{background:var(--rl-bg);border:1px solid var(--rl-line);border-radius:10px;padding:14px 16px;min-height:130px;}
#monthly-calendar-modal .rl-donut-row{display:flex;gap:16px;flex-wrap:wrap;}
#monthly-calendar-modal .rl-donut-block{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--rl-bg);border:1px solid var(--rl-line);border-radius:10px;padding:12px 14px;}
#monthly-calendar-modal .rl-donut-block .rl-dlabel{font-size:9.5px;color:var(--rl-ink-soft);text-align:center;text-transform:uppercase;max-width:100px;font-weight:600;line-height:1.35;}
#monthly-calendar-modal .rl-footnote{text-align:center;margin-top:16px;color:var(--rl-ink-soft);font-size:12px;}

@media(max-width:900px){
  #monthly-calendar-modal .rl-dash-top{grid-template-columns:1fr;}
  #monthly-calendar-modal .rl-dash-bottom{grid-template-columns:1fr;}
}
@media(max-width:720px){
  #monthly-calendar-modal .rl-hero{grid-template-columns:1fr;text-align:center;}
  #monthly-calendar-modal .rl-wheel-box{margin:0 auto;}
  #monthly-calendar-modal .rl-hero-stats{grid-template-columns:1fr 1fr;}
  #monthly-calendar-modal .rl-controls{align-items:flex-start;}
  #monthly-calendar-modal .rl-heat-daynums{margin-left:0;}
  #monthly-calendar-modal .rl-cat-main{flex-direction:column;}
  #monthly-calendar-modal .rl-cat-sidebar{width:100%;}
}