/**
 * Tooltip-time 极简卡（小卡）：方桌 / 圆桌共用 DOM；包含 main / root / stack
 * 三层布局、专用细进度条 (`rc-tooltip-time-bar`)、标题溢出 (`--overflow` pill)、
 * antd Tooltip 浮层时刻显示样式，以及 `[data-tooltip-time='on']` 整链 overflow
 * 抬升与圆桌 / 空态 / 预约态的标题颜色和 pill 底色覆盖。
 */

/** 非 comfortable：tooltip 极简卡（方桌 / 圆桌共用 DOM） */
.rc.rc--tooltip-time {
  .rc-tooltip-time-main {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .rc-tooltip-time-root {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    min-height: 0;
    overflow: visible;
    width: 100%;
    position: relative;
    padding: 0;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /** 纵向 flex 只参与「进度条 + 标题」；时间走 antd Tooltip 浮层，不占文档流高度 */
  .rc-tooltip-time-stack {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    padding: 4px;
    box-sizing: border-box;
    overflow: visible;
    display: flex;
    flex-direction: column;
    /**
     * 用 stretch 给进度条明确可用宽度（否则在某些合并容器里会被收缩到 0）。
     * 标题自身用 text-align 居中；tooltip 浮层不参与布局。
     */
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .rc-tooltip-time-progress {
    width: 100%;
    max-width: 92%;
    pointer-events: none;
  }

  .rc-tooltip-time-pay-badge {
    pointer-events: none;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** 专用细进度条（勿复用 .rc-progress，避免全局 flex/gap/高度被覆盖） */
  .rc-tooltip-time-bar {
    display: block;
    flex-shrink: 0;
    width: 100%;
  }

  .rc-tooltip-time-bar__track {
    width: 100%;
    height: 3px;
    border-radius: 1.5px;
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
  }

  .rc-tooltip-time-bar__fill {
    display: block;
    height: 100%;
    border-radius: 1.5px;
    background: #1677b6;
    transition: width 0.6s ease;
  }

  .rc-tooltip-time-bar__fill--warn {
    background: #f5c542;
  }

  &.rc--occupied .rc-tooltip-time-bar__track {
    background: rgba(255, 255, 255, 0.22);
  }

  &.rc--occupied .rc-tooltip-time-bar__fill:not(.rc-tooltip-time-bar__fill--warn) {
    background: #ffffff;
  }

  .rc-tooltip-time-title-anchor {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    min-width: 0;
  }

  .rc-tooltip-time-title {
    display: block;
    margin: 0;
    width: 100%;
    max-width: 100%;
    font-weight: 700;
    font-size: clamp(12px, 3.5cqmin, 15px);
    line-height: 1.25;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /**
   * 标题溢出修饰类（`--overflow`）：
   * 让小卡桌名不受卡片宽度限制，能以 anchor 中心为锚向左右**溢出**卡片显示。
   * 同时被以下两种布局复用：
   * - `RoomCardTooltipTitleOnlyLayout`（空态纯标题，仅桌名）
   * - `RoomCardTooltipTimeLayout`（占用 / 预约态，含 badge / 进度条 / 标题 / 时间气泡）
   *
   * 实现：
   * - 选择器使用「元素类 + 修饰类」**同元素链**（BEM modifier），specificity 比基础规则
   *   `.rc-tooltip-time-title` 多一级，保证 `overflow / max-width / ellipsis` 一定被覆盖，
   *   不受后续 `&[data-shape='circle'] ... .rc-tooltip-time-title` 等同级选择器源序干扰；
   * - anchor 仍 100% 宽 + flex 居中 + overflow visible，保持原有居中点；
   * - title 是 flex item，`flex-shrink: 0` + `width: auto` + `max-width: none`
   *   让宽度由内容决定，比 anchor 宽时会自然居中溢出；
   * - 取消 ellipsis / overflow:hidden，文字完整显示；
   * - 祖先链上的 `data-tooltip-time='on'` 已把 `.pisell-res-floor-room-card`、
   *   `__viewport-compensate`、`.rc--tooltip-time`、`.rc-tooltip-time-main` 都设为
   *   `overflow: visible`，title 文字可以直接突破小卡边框。
   * - 占用态的时间 antd Tooltip 仍锚在 title span 上，气泡会自动跟随 title 实际宽度。
   */
  .rc-tooltip-time-title-anchor.rc-tooltip-time-title-anchor--overflow {
    overflow: visible;
    max-width: none;
  }

  .rc-tooltip-time-title.rc-tooltip-time-title--overflow {
    width: auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    flex-shrink: 0;
    /**
     * 溢出标题 pill 托底：
     * - `isolation: isolate` + `position: relative` + `z-index: 10` 保证同卡内
     *   永远盖过进度条 / pay-badge / 圆盘环；跨 item 的抢占由 ItemLayer.less 的
     *   `:hover` / `-read-selected` z-index 抬升联动；
     * - 颜色用 **CSS 变量 + rgba 通道** 表达，方便单独调透明度而不动颜色：
     *     - `--rc-pill-bg-rgb` 文字深色（默认 pill 浅底） → 白色 `255, 255, 255`
     *     - `--rc-pill-bg-alpha` 默认 `0.8`，越大越实
     *   下方占用 / 圆桌覆盖里只动 `--rc-pill-bg-rgb`（切深底）或 `--rc-pill-bg-alpha`
     *   （单独调透明度），互不耦合。
     */
    --rc-pill-bg-rgb: 255, 255, 255;
    --rc-pill-bg-alpha: 0.8;
    isolation: isolate;
    position: relative;
    z-index: 10;
    background-color: rgba(var(--rc-pill-bg-rgb), var(--rc-pill-bg-alpha));
    padding: 0 4px;
    border-radius: 4px;
  }

  /** 占用 / 占用-付款 / 占用-超时：白字 → 深色 pill 托底（透明度沿用默认 0.8） */
  &.rc--occupied .rc-tooltip-time-title.rc-tooltip-time-title--overflow,
  &.rc--occupied-pay
    .rc-tooltip-time-title.rc-tooltip-time-title--overflow,
  &.rc--occupied-timeout
    .rc-tooltip-time-title.rc-tooltip-time-title--overflow {
    --rc-pill-bg-rgb: 31, 31, 31;
  }

  /** antd Tooltip 浮层：`title` 展示时间；不占 flex，且不拦截画布点击 */
  .rc-tooltip-time-ant-overlay {
    pointer-events: none;
    z-index: 6;

    .pisell-lowcode-tooltip-inner {
      color: #ffffff !important;
      font-weight: 600;
      font-size: clamp(11px, 3cqmin, 13px);
      line-height: 1.2;
      padding: 4px !important;
      border-radius: 6px !important;
      box-shadow: none;
      min-height: 0;
    }

    .pisell-lowcode-tooltip-arrow::before {
      box-shadow: none !important;
    }

    /** antd v5 某些主题会在 arrow 上再叠一层，造成“分割线” */
    .pisell-lowcode-tooltip-arrow::after {
      box-shadow: none !important;
    }
  }

  .rc-tooltip-time-ant-overlay--reserved .pisell-lowcode-tooltip-arrow::before {
    box-shadow: none !important;
  }

  .rc-tooltip-time-ant-overlay--reserved .pisell-lowcode-tooltip-arrow::after {
    box-shadow: none !important;
  }

  &.rc--occupied .rc-tooltip-time-title {
    color: #ffffff;
  }

  &.rc--reserved .rc-tooltip-time-title {
    color: var(--c-text-1);
  }

  &.rc--occupied-pay .rc-tooltip-time-title,
  &.rc--occupied-timeout .rc-tooltip-time-title {
    color: #ffffff;
  }

  /** 空态小卡：确保标题可见（不依赖 rc-header 的默认文案色） */
  &.rc--empty .rc-tooltip-time-title {
    color: var(--c-text-1);
  }
}

&[data-shape='circle'] .rc.rc--tooltip-time .rc-tooltip-time-title {
  color: #ffffff;
}

/** 圆桌默认（白字）：溢出 title 切深色 pill 底（透明度沿用 0.8 不动） */
&[data-shape='circle']
  .rc.rc--tooltip-time
  .rc-tooltip-time-title.rc-tooltip-time-title--overflow {
  --rc-pill-bg-rgb: 31, 31, 31;
}

/** 圆桌空态小卡：标题仍用黑/灰阶（压过上一条圆桌默认白字） */
&[data-shape='circle'] .rc.rc--empty.rc--tooltip-time .rc-tooltip-time-title {
  color: var(--c-text-1);
}

/** 圆桌空态（深字）：恢复成浅色 pill 底 */
&[data-shape='circle']
  .rc.rc--empty.rc--tooltip-time
  .rc-tooltip-time-title.rc-tooltip-time-title--overflow {
  --rc-pill-bg-rgb: 255, 255, 255;
}

/** 圆桌小卡：付款/待付款徽章相对标题下移一点 */
&[data-shape='circle'] .rc.rc--tooltip-time .rc-tooltip-time-pay-badge {
  top: -28px;
}

&[data-shape='circle'] .rc.rc--tooltip-time.rc--reserved .rc-tooltip-time-title {
  color: var(--c-text-1);
}

/** 圆桌预约态（深字）：恢复成浅色 pill 底（覆盖上方圆桌默认深色底） */
&[data-shape='circle']
  .rc.rc--tooltip-time.rc--reserved
  .rc-tooltip-time-title.rc-tooltip-time-title--overflow {
  --rc-pill-bg-rgb: 255, 255, 255;
}

/**
 * tooltip 极简：气泡/三角可溢出正文与圆盘裁剪区（避免被多层 overflow:hidden 裁切）
 */
&[data-tooltip-time='on'] {
  overflow: visible;

  .pisell-res-floor-room-card__viewport-compensate {
    overflow: visible;
  }

  .rc.rc--tooltip-time {
    overflow: visible;
  }

  .rc.rc--tooltip-time .rc-tooltip-time-main {
    overflow: visible;
  }

  &[data-shape='circle'] {
    overflow: visible;

    .rc.rc--tooltip-time {
      overflow-x: visible;
      overflow-y: visible;
    }
  }
}