/* ── SIDEBAR: groups sidebar panel + date range picker ── */

.sidebar-toggle{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border2);
  color:var(--text3);font-size:15px;transition:all 0.15s;
  flex-shrink:0;
}
.sidebar-toggle:hover{background:var(--surface2);color:var(--text);border-color:var(--accent)}
.sidebar-toggle.active{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent2)}

.sidebar-backdrop{
  display:none;position:fixed;inset:0;z-index:298;
  background:var(--overlay-backdrop);backdrop-filter:blur(2px);
}
.sidebar-backdrop.open{display:block}

.sidebar{
  position:fixed;top:0;right:0;bottom:0;width:300px;
  background:var(--bg2);border-left:1px solid var(--border2);
  z-index:299;transform:translateX(100%);
  transition:transform 0.25s cubic-bezier(0.22,1,0.36,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.sidebar.open{transform:translateX(0)}

.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sidebar-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:15px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.sidebar-title-icon{font-size:14px;opacity:0.7}
.sidebar-close{
  background:none;border:none;color:var(--text3);cursor:pointer;
  font-size:18px;padding:3px 6px;border-radius:6px;line-height:1;
  transition:all 0.12s;
}
.sidebar-close:hover{background:var(--surface2);color:var(--text)}

.sidebar-section{
  padding:14px 18px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sidebar-section-label{
  font-size:9px;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--text3);margin-bottom:10px;font-weight:600;
}

/* Group pills */
.group-pill-row{display:flex;flex-direction:column;gap:4px}
.group-pill{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;cursor:pointer;
  border:1px solid transparent;transition:all 0.12s;
  user-select:none;
}
.group-pill:hover{background:var(--surface2);border-color:var(--border2)}
.group-pill.active{background:var(--accent-bg);border-color:var(--accent-border)}
.group-pill-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.group-pill-name{flex:1;font-size:12px;color:var(--text2);font-weight:500}
.group-pill.active .group-pill-name{color:var(--accent2)}
.group-pill-count{font-size:10px;color:var(--text3);
  background:var(--surface2);padding:1px 6px;border-radius:10px;}
.group-pill.active .group-pill-count{background:var(--accent-bg);color:var(--accent2)}
.group-pill-remove{
  background:none;border:none;color:var(--text3);cursor:pointer;
  font-size:14px;padding:1px 4px;border-radius:4px;line-height:1;
  opacity:0;transition:all 0.1s;
}
.group-pill:hover .group-pill-remove{opacity:1}
.group-pill-remove:hover{color:var(--red);background:var(--red-bg)}
.group-pill-cb{width:13px;height:13px;cursor:pointer;accent-color:var(--accent);flex-shrink:0}
.group-apply-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border);gap:8px;
}
.group-apply-hint{font-size:10px;color:var(--text3);flex:1}

.group-all-pill{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;cursor:pointer;
  border:1px solid var(--border2);background:var(--surface2);
  transition:all 0.12s;margin-bottom:8px;user-select:none;
}
.group-all-pill:hover{border-color:var(--accent);background:var(--surface3)}
.group-all-pill.active{background:var(--accent-bg);border-color:var(--accent-border)}
.group-all-pill-label{font-size:12px;font-weight:600;
  color:var(--text2);flex:1;}
.group-all-pill.active .group-all-pill-label{color:var(--accent2)}

/* New group input */
.new-group-row{display:flex;gap:6px;margin-top:10px}
.new-group-input{
  flex:1;padding:6px 10px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:7px;font-family:'DM Mono',monospace;font-size:11px;
  color:var(--text);outline:none;transition:border-color 0.15s;
}
.new-group-input:focus{border-color:var(--accent)}
.new-group-input::placeholder{color:var(--text3)}

/* Active group indicator in tabs bar */
.active-group-badge{
  display:none;align-items:center;gap:5px;
  padding:3px 10px 3px 6px;border-radius:20px;font-size:10px;
  background:var(--accent-bg);border:1px solid var(--accent-border);
  color:var(--accent2);cursor:pointer;white-space:nowrap;
  font-family:'DM Mono',monospace;
}
.active-group-badge.visible{display:flex}
.active-group-badge:hover{background:var(--accent-bg)}
.agb-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.agb-clear{font-size:12px;opacity:0.6;margin-left:2px}
.agb-clear:hover{opacity:1}

/* .pcard-cb base style — display/visibility controlled by portfolios.css select-mode rules */
.pcard-cb{cursor:pointer;accent-color:var(--accent)}

/* Portfolio selection action bar */
.portfolio-action-bar{
  display:none;align-items:center;gap:10px;
  background:var(--accent-bg);border:1px solid var(--accent-border);
  padding:8px 14px;border-radius:10px;margin-bottom:14px;
  animation:slideIn 0.18s cubic-bezier(0.22,1,0.36,1);
}
.portfolio-action-bar.visible{display:flex}
.pab-count{font-size:12px;color:var(--accent2);font-weight:500;flex:1}

/* Group colour swatches */
.group-color-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}

/* Sidebar footer sections */
.sidebar-body{flex:1;overflow-y:auto;padding-bottom:16px}

/* ── DATE RANGE BUTTON ── */
.daterange-btn{
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:20px;font-size:11px;font-weight:500;
  cursor:pointer;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);
  transition:all 0.15s;user-select:none;white-space:nowrap;
}
.daterange-btn:hover{background:var(--surface3);color:var(--text)}
.daterange-backdrop{
  display:none;position:fixed;inset:0;z-index:499;
}
.daterange-backdrop.open{display:block}
.daterange-btn.open{border-color:var(--accent);background:var(--surface2);color:var(--accent2)}
.daterange-icon{display:flex;align-items:center;opacity:0.7}

/* ── DATE PICKER POPOVER ── */
.daterange-popover{
  position:fixed;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:14px;box-shadow:var(--shadow-xl);
  z-index:500;padding:16px;
  display:none;
  animation:panelIn 0.18s cubic-bezier(0.22,1,0.36,1);
}
.daterange-popover.open{display:block}

/* Presets row */
.dr-presets{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.dr-preset{
  padding:4px 12px;border-radius:10px;font-size:11px;font-weight:500;
  cursor:pointer;border:1px solid var(--border2);
  background:var(--surface2);color:var(--text3);
  transition:all 0.12s;user-select:none;
}
.dr-preset:hover{border-color:var(--accent);color:var(--accent2)}
.dr-preset.active{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent2)}

/* Two-month calendar layout */
.dr-calendars{display:flex;gap:16px}
.dr-calendar{width:224px}
.dr-cal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.dr-cal-nav{
  background:none;border:none;color:var(--text3);cursor:pointer;
  font-size:14px;padding:3px 7px;border-radius:6px;line-height:1;
  transition:all 0.12s;font-family:'DM Mono',monospace;
}
.dr-cal-nav:hover{background:var(--surface2);color:var(--text)}
.dr-cal-nav:disabled{opacity:0.2;cursor:not-allowed}
.dr-cal-month-label{font-size:12px;font-weight:600;color:var(--text);font-family:'Bricolage Grotesque',sans-serif}
.dr-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.dr-cal-dow{
  font-size:9px;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text3);text-align:center;padding:2px 0 5px;
}
.dr-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:11px;border-radius:6px;cursor:pointer;
  color:var(--text2);transition:background 0.1s,color 0.1s;
  position:relative;user-select:none;
}
.dr-day:hover:not(.dr-day-disabled):not(.dr-day-empty){background:var(--surface2);color:var(--text)}
.dr-day-empty{cursor:default}
.dr-day-disabled{color:var(--text3);opacity:0.3;cursor:not-allowed}
.dr-day-today{font-weight:700;color:var(--accent2)}
.dr-day-today::after{
  content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--accent);
}
.dr-day-in-range{background:var(--accent-bg);border-radius:0;color:var(--text)}
.dr-day-start,.dr-day-end{
  background:var(--accent)!important;color:white!important;
  border-radius:6px!important;font-weight:600;
}
.dr-day-start.dr-day-in-range{border-radius:6px 0 0 6px!important}
.dr-day-end.dr-day-in-range{border-radius:0 6px 6px 0!important}

/* Footer */
.dr-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  gap:12px;
}
.dr-selection-label{font-size:11px;color:var(--text3);flex:1}
.dr-selection-label span{color:var(--text2);font-weight:500}

/* Data notice banner */
.dr-notice{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:8px;margin-bottom:14px;
  background:rgba(var(--amber-ch),0.08);border:1px solid rgba(var(--amber-ch),0.2);
  font-size:10.5px;color:var(--amber);line-height:1.4;
}
.dr-notice-icon{flex-shrink:0;font-size:12px}

/* Global date range badge shown on tabs */
.daterange-badge{
  font-size:10px;color:var(--text3);
  background:var(--surface2);border:1px solid var(--border);
  padding:2px 8px;border-radius:5px;margin-left:8px;
  font-family:'DM Mono',monospace;
}