/* ============================================================
 * DatePicker / RangePicker 样式
 * 沿用 fms 主题 CSS 变量（见 src/theme/tokens.css）
 * ============================================================ */

.fms-date-picker,
.fms-range-picker {
  display: block;
  width: 100%;
  /* 窄容器下保持日历可读（7 列日期格子约 31px），
     浮层跟随触发器宽度，视觉统一不受影响 */
  min-width: 240px;
}

/* ---------- 触发器（类 Input 外观） ---------- */
.fms-date-trigger,
.fms-range-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  /* min-height 而非 height：与 Input/Select 一致，内容不足时撑到控件高度，
     被放进更矮的容器（如表格编辑单元格）时可被 min-height:0 压缩 */
  min-height: var(--fms-control-height);
  padding: 0 var(--fms-control-padding-x);
  border: 1px solid var(--fms-border);
  border-radius: var(--fms-control-radius);
  background: var(--fms-card);
  color: var(--fms-text);
  font-size: var(--fms-font-size);
  font-family: inherit;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.fms-date-trigger:hover,
.fms-range-trigger:hover,
.fms-date-picker.is-open .fms-date-trigger,
.fms-range-picker.is-open .fms-range-trigger {
  border-color: var(--fms-primary);
}

.fms-date-picker.is-open .fms-date-trigger,
.fms-range-picker.is-open .fms-range-trigger {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fms-primary) 18%, transparent);
}

.fms-date-trigger:focus-within,
.fms-range-trigger:focus-within {
  border-color: var(--fms-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fms-primary) 18%, transparent);
}

.fms-date-prefix {
  display: inline-flex;
  color: var(--fms-text-secondary);
  flex-shrink: 0;
}

.fms-date-input,
.fms-range-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fms-text);
  font-size: var(--fms-font-size);
  font-family: inherit;
  cursor: pointer;
}

.fms-range-input {
  text-align: center;
}

.fms-range-sep {
  color: var(--fms-text-secondary);
  flex-shrink: 0;
}

.fms-date-suffix {
  display: inline-flex;
  align-items: center;
  color: var(--fms-text-secondary);
  flex-shrink: 0;
}

.fms-date-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--fms-text-secondary);
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease;
}

.fms-date-clear:hover {
  color: var(--fms-text);
  background: var(--fms-secondary-hover);
}

.fms-date-clear:focus-visible,
.fms-cal-nav:focus-visible,
.fms-cal-title-button:focus-visible,
.fms-cal-cell:focus-visible,
.fms-calendar-selector-item:focus-visible,
.fms-time-list:focus-visible {
  outline: 2px solid var(--fms-primary);
  outline-offset: 1px;
}

.fms-date-arrow {
  transition: transform 150ms ease;
}

.fms-date-picker.is-open .fms-date-arrow,
.fms-range-picker.is-open .fms-date-arrow {
  transform: rotate(180deg);
}

/* 禁用态 */
.fms-date-picker.is-disabled .fms-date-trigger,
.fms-range-picker.is-disabled .fms-range-trigger {
  background: var(--fms-disabled-bg);
  color: var(--fms-disabled-text);
  border-color: var(--fms-disabled-border);
  cursor: not-allowed;
}

.fms-date-picker.is-disabled .fms-date-input,
.fms-range-picker.is-disabled .fms-range-input {
  cursor: not-allowed;
}

/* ---------- 日历面板 ---------- */
.fms-calendar-panel {
  --fms-cal-h: 282px; /* 274px 日历内容 + 8px 底部留白，时间区使用同一总高度 */
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.fms-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.fms-cal-nav-group {
  display: inline-flex;
  flex: 0 0 auto;
}

/* 日历网格填满面板（跟随触发器宽度），1fr 让 7 列日期自适应均分 */
.fms-calendar-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.fms-cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--fms-text-secondary);
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease;
}

.fms-cal-nav:hover {
  background: var(--fms-secondary-hover);
  color: var(--fms-text);
}

.fms-cal-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
}

.fms-cal-title-button {
  height: 28px;
  padding: 0 4px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--fms-text);
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease;
}

.fms-cal-title-button:hover,
.fms-cal-title-button.is-active {
  background: var(--fms-secondary-hover);
  color: var(--fms-primary);
}

.fms-calendar-selector {
  box-sizing: border-box;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  min-height: 0;
  padding: 12px 4px 4px;
}

.fms-calendar-selector-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--fms-text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.fms-calendar-selector-item:hover {
  background: var(--fms-secondary-hover);
}

.fms-calendar-selector-item.is-current:not(.is-selected) {
  box-shadow: inset 0 0 0 1px var(--fms-primary);
  color: var(--fms-primary);
}

.fms-calendar-selector-item.is-selected {
  background: var(--fms-primary);
  color: var(--fms-primary-text);
  font-weight: 600;
}

.fms-cal-weekdays {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.fms-cal-weekday {
  text-align: center;
  padding: 4px 0;
  font-size: 12px;
  color: var(--fms-text-secondary);
}

.fms-cal-rows {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fms-cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.fms-cal-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: var(--fms-text);
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.fms-cal-cell:hover {
  background: var(--fms-secondary-hover);
}

.fms-cal-cell.is-other-month {
  color: var(--fms-text-secondary);
  opacity: 0.45;
}

.fms-cal-cell.is-disabled {
  color: var(--fms-disabled-text);
  cursor: not-allowed;
}

.fms-cal-cell:disabled {
  opacity: 1;
}

.fms-cal-cell.is-disabled:hover {
  background: transparent;
}

/* 今日标记 */
.fms-cal-cell.is-today:not(.is-selected):not(.is-range-start):not(.is-range-end)
  .fms-cal-cell-inner {
  font-weight: 600;
  color: var(--fms-primary);
}

.fms-cal-cell.is-today:not(.is-selected):not(.is-range-start):not(.is-range-end)::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fms-primary);
}

/* 单选选中 */
.fms-cal-cell.is-selected {
  background: var(--fms-primary);
  color: var(--fms-primary-text);
  font-weight: 600;
}

/* 范围区间底色 */
.fms-cal-cell.is-in-range,
.fms-cal-cell.is-in-hover-range {
  background: color-mix(in srgb, var(--fms-primary) 12%, transparent);
  border-radius: 0;
}

/* 范围端点（声明在 in-range 之后，优先级更高） */
.fms-cal-cell.is-range-start,
.fms-cal-cell.is-range-end {
  background: var(--fms-primary);
  color: var(--fms-primary-text);
  font-weight: 600;
}

.fms-cal-cell.is-range-start {
  border-radius: 6px 0 0 6px;
}

.fms-cal-cell.is-range-end {
  border-radius: 0 6px 6px 0;
}

.fms-cal-cell.is-range-single {
  border-radius: 6px;
}

/* ---------- 时间选择（右侧面板，antd 风格：左日期 / 右时间） ---------- */
.fms-calendar-panel.has-time {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 主体行：左日期 + 右时间并排；align-items:stretch 让时间区高度撑满 */
.fms-calendar-body {
  display: flex;
  align-items: stretch;
}

.fms-calendar-main {
  flex: 1 1 auto;
  height: var(--fms-cal-h);
  display: flex;
  flex-direction: column;
  padding-right: 8px;
}

.fms-calendar-time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding-left: 12px;
  border-left: 1px solid var(--fms-border);
}

.fms-calendar-panel.is-time-only .fms-calendar-time {
  height: var(--fms-cal-h);
  padding-left: 0;
  border-left: none;
}

/* 范围模式：开始 / 结束 两组左右排列 */
.fms-calendar-time .fms-time-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.fms-calendar-panel.is-range .fms-calendar-time {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

.fms-calendar-panel.is-range .fms-time-group {
  height: var(--fms-cal-h);
  gap: 4px;
}

.fms-calendar-panel.is-range .fms-time-group .fms-time-select {
  flex: 1 1 auto;
  min-height: 0;
}

.fms-calendar-panel.is-range .fms-time-group + .fms-time-group {
  border-left: 1px solid var(--fms-border);
}

.fms-time-label {
  font-size: 12px;
  color: var(--fms-text-secondary);
  flex-shrink: 0;
}

.fms-time-select {
  display: flex;
  align-items: stretch;
}

/* 单选模式：时间区与日历主体同高，列表填充后溢出滚动 */
.fms-calendar-time > .fms-time-select {
  height: var(--fms-cal-h);
}

.fms-time-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
}

.fms-time-col:not(:first-child) {
  border-left: 1px solid var(--fms-border);
}

.fms-time-list {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.fms-time-list:focus-visible {
  position: relative;
  z-index: 1;
}

.fms-time-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fms-time-item {
  width: 100%;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  color: var(--fms-text);
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.fms-time-item:hover {
  background: var(--fms-secondary-hover);
}

.fms-time-item.is-active {
  background: var(--fms-primary);
  color: var(--fms-primary-text);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .fms-date-trigger,
  .fms-range-trigger,
  .fms-date-clear,
  .fms-date-arrow,
  .fms-cal-nav,
  .fms-cal-title-button,
  .fms-cal-cell,
  .fms-calendar-selector-item,
  .fms-time-item {
    transition: none;
  }
}