/*
  經營儀錶板共用期間選擇器（CLINICOS-V4-POST-DEPLOY-UAT-FIX-BATCH-010-FOLLOWUP §2）。
  六張頁面共用同一份樣式，避免每個 workspace CSS 各抄一份。
*/
.cos-dash-period {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 16px; padding: 10px 12px;
  border: 1px solid var(--cos-border); border-radius: var(--cos-radius-md);
  background: var(--cos-surface);
}
.cos-dash-period-modes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cos-dash-period-mode {
  padding: 6px 14px; font-size: 13.5px; cursor: pointer;
  border: 1px solid var(--cos-border); border-radius: var(--cos-radius-pill);
  background: var(--cos-surface); color: var(--cos-text-subtle);
}
.cos-dash-period-mode:hover { border-color: var(--cos-accent); }
.cos-dash-period-mode.active {
  background: var(--cos-accent); border-color: var(--cos-accent); color: #fff; font-weight: 600;
}
/* 全域有 label{display:flex;flex-direction:column;font-weight:700}，這裡必須顯式覆寫，
   否則欄位標題會被擠成直排。 */
.cos-dash-period-field {
  display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px;
  min-width: 0; font-weight: 500 !important; font-size: 13px; color: var(--cos-text-subtle);
}
.cos-dash-period-field input {
  min-width: 0; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--cos-border); border-radius: var(--cos-radius-sm);
}
.cos-dash-period-apply {
  padding: 6px 14px; font-size: 13.5px; cursor: pointer; font-weight: 600;
  border: 1px solid var(--cos-accent); border-radius: var(--cos-radius-sm);
  background: var(--cos-accent); color: #fff;
}
.cos-dash-period-label {
  margin-left: auto; font-size: 13px; color: var(--cos-text-subtle); white-space: nowrap;
}

@media (max-width: 600px) {
  .cos-dash-period { gap: 8px; }
  .cos-dash-period-modes { width: 100%; }
  .cos-dash-period-mode { flex: 1 1 auto; }
  .cos-dash-period-label { margin-left: 0; width: 100%; }
}