/* MeetSync · widgets.css
 * ============================================================================
 * 第三方组件的主题层。加载顺序：vendor 原生 CSS → topic.css → 本文件。
 * 纪律与 topic.css 一致：颜色/圆角/间距只读 var(--ms-*)，不出现硬编码色值。
 * 目标：Grid.js / Tom Select / Flatpickr / Frappe Gantt / FullCalendar 五个库
 * 落进「票据」形式语言——微号大写字距的表头、发丝线行分隔、等宽数字、
 * 日光橙主行动、近黑落章式当前页。看不出是第三方默认皮。
 * ============================================================================ */

.msw { font-family: var(--ms-font); }

/* ==========================================================================
   1. Grid.js —— 票据台账
   表格在票据语言里是「登记簿」：表头是微号大写字距的栏目名，行与行之间是
   发丝线而不是斑马纹，数字一律等宽以便逐列比对。
   ========================================================================== */

.msw-grid { width: 100%; }
.msw-grid .gridjs-container {
  display: block; width: 100%; padding: 0;
  color: var(--ms-fg); font-size: var(--ms-fs-sm);
}

/* 搜索框：与 .ms-input 同形，宽度交给容器而不是库的固定 250px */
.msw-grid .gridjs-search { margin-bottom: var(--ms-s3); }
.msw-grid .gridjs-search-input {
  width: 100%; max-width: 320px; padding: 9px 12px;
  border: 1px solid var(--ms-border); border-radius: var(--ms-r-sm);
  background: var(--ms-surface-2); color: var(--ms-fg);
  font-family: inherit; font-size: var(--ms-fs-sm);
}
.msw-grid .gridjs-search-input::placeholder { color: var(--ms-faint); }
.msw-grid .gridjs-search-input:focus {
  outline: none; border-color: var(--ms-action);
  box-shadow: 0 0 0 3px var(--ms-accent-soft);
}

/* 外框：票据不用投影，用发丝线 */
.msw-grid .gridjs-wrapper {
  border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg);
  box-shadow: none; background: var(--ms-card);
}
.msw-grid .gridjs-wrapper:nth-last-of-type(2) { border-radius: var(--ms-r-lg) var(--ms-r-lg) 0 0; }

.msw-grid table.gridjs-table { width: 100%; font-size: var(--ms-fs-sm); }

.msw-grid th.gridjs-th {
  padding: 9px 12px; border: 0; border-bottom: 1px solid var(--ms-border);
  background: var(--ms-surface-2); color: var(--ms-muted);
  font-size: var(--ms-fs-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ms-ls-caps);
  /* 侧栏里的窄表列宽有限，栏目名允许折行好过被裁成「核…」 */
  white-space: normal; line-height: 1.3;
}
.msw-grid th.gridjs-th-sort:hover,
.msw-grid th.gridjs-th-sort:focus { background: var(--ms-surface-3); }
.msw-grid th.gridjs-th-fixed { box-shadow: 0 1px 0 0 var(--ms-border); }

/* 排序箭头：库给的是深灰位图，深色主题下要反相才看得见 */
.msw-grid button.gridjs-sort { height: 18px; width: 11px; opacity: .55; }
.msw-grid th.gridjs-th-sort:hover button.gridjs-sort { opacity: 1; }
[data-theme="dark"] .msw-grid button.gridjs-sort { filter: invert(1); }

/* 库把 #fff 同时写在 tbody 和 td 上，两处都要拆，否则深色主题整片白 */
.msw-grid .gridjs-tbody,
.msw-grid td.gridjs-td { background: transparent; }
.msw-grid td.gridjs-td {
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--ms-border);
  color: var(--ms-fg); vertical-align: middle;
}
.msw-grid tr.gridjs-tr:last-child td.gridjs-td { border-bottom: 0; }
.msw-grid tr.gridjs-tr:hover td.gridjs-td { background: var(--ms-surface-2); }
/* 数字列逐列对齐：票据的可比性来自等宽数字 */
.msw-grid td.gridjs-td { font-variant-numeric: tabular-nums; }
.msw-grid .ms-num { font-family: var(--ms-font-mono); letter-spacing: -.01em; }

.msw-grid td.gridjs-message { padding: var(--ms-s6) var(--ms-s4); color: var(--ms-muted); text-align: center; }

/* 披露矩阵的勾/叉：语义靠颜色而不是靠读者认图标 */
.ms-disclose { display: inline-flex; color: var(--ms-faint); }
.ms-disclose[data-on="1"] { color: var(--ms-ok); }

/* 分页：当前页是「落章」——近黑实底，其余是空白票面 */
.msw-grid .gridjs-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ms-s3);
  padding-top: var(--ms-s3); color: var(--ms-muted); font-size: var(--ms-fs-xs);
}
.msw-grid .gridjs-pagination::after { display: none; }
.msw-grid .gridjs-pagination .gridjs-summary { float: none; margin: 0; }
.msw-grid .gridjs-pagination .gridjs-pages { float: none; display: flex; }
.msw-grid .gridjs-pagination .gridjs-pages button {
  padding: 5px 11px; border: 1px solid var(--ms-border); border-right: 0;
  background: var(--ms-surface); color: var(--ms-fg-2);
  font-family: inherit; font-size: var(--ms-fs-xs); font-weight: 600;
}
.msw-grid .gridjs-pagination .gridjs-pages button:first-child { border-radius: var(--ms-r-sm) 0 0 var(--ms-r-sm); }
.msw-grid .gridjs-pagination .gridjs-pages button:last-child { border-right: 1px solid var(--ms-border); border-radius: 0 var(--ms-r-sm) var(--ms-r-sm) 0; }
.msw-grid .gridjs-pagination .gridjs-pages button:hover:not(:disabled) { background: var(--ms-surface-2); color: var(--ms-fg); }
.msw-grid .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
  background: var(--ms-navy); border-color: var(--ms-navy); color: var(--ms-navy-on);
}
.msw-grid .gridjs-pagination .gridjs-pages button:disabled { background: var(--ms-surface); color: var(--ms-faint); }
.msw-grid .gridjs-pagination .gridjs-pages button:focus-visible {
  outline: 2px solid var(--ms-action); outline-offset: -2px; box-shadow: none;
}

/* ==========================================================================
   2. Tom Select —— 筛选票根
   ========================================================================== */

.msw-select { width: 100%; }
/* 下拉的标签不是 <label>（Tom Select 会重建控件，for= 指向会失效），
   这里用同形的 span 顶上，视觉与 .ms-field label 完全一致 */
.ms-field .ms-field-label { font-size: var(--ms-fs-sm); font-weight: 600; color: var(--ms-fg-2); }
.ts-wrapper { font-family: var(--ms-font); font-size: var(--ms-fs-sm); }
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  min-height: 40px; padding: 6px 10px;
  border: 1px solid var(--ms-border); border-radius: var(--ms-r-sm);
  background: var(--ms-surface-2); color: var(--ms-fg); box-shadow: none;
}
.ts-wrapper.single .ts-control { background-image: none; }
.ts-wrapper.focus .ts-control {
  border-color: var(--ms-action); box-shadow: 0 0 0 3px var(--ms-accent-soft);
}
.ts-control > input, .ts-control > input::placeholder { color: var(--ms-fg); }
.ts-control > input::placeholder { color: var(--ms-faint); }
.ts-wrapper.single.input-active .ts-control { background: var(--ms-surface-2); }

/* 多选项＝小票根：橙描边 + 淡橙底 */
.ts-wrapper.multi .ts-control > .item {
  margin: 0 4px 0 0; padding: 2px 8px;
  border: 1px solid var(--ms-action); border-radius: var(--ms-r-pill);
  background: var(--ms-accent-soft); color: var(--ms-action);
  font-size: var(--ms-fs-xs); font-weight: 650;
}
.ts-wrapper.multi .ts-control > .item.active { background: var(--ms-action); color: var(--ms-action-fg); }
.plugin-remove_button .item .remove { border-left-color: var(--ms-action); padding: 0 5px; }
.plugin-remove_button .item .remove:hover { background: transparent; opacity: .6; }

.ts-dropdown {
  margin-top: 4px; border: 1px solid var(--ms-border); border-radius: var(--ms-r-sm);
  background: var(--ms-card); color: var(--ms-fg); box-shadow: var(--ms-shadow-2);
}
.ts-dropdown .option { padding: 9px 12px; font-size: var(--ms-fs-sm); }
.ts-dropdown .active { background: var(--ms-accent-soft); color: var(--ms-action); }
.ts-dropdown .selected { font-weight: 650; }
.ts-dropdown .no-results { padding: 12px; color: var(--ms-muted); }
.ts-dropdown .ts-dropdown-content { max-height: 260px; }
.plugin-clear_button .clear-button { color: var(--ms-faint); opacity: 1; }
.plugin-clear_button .clear-button:hover { color: var(--ms-action); }

/* ==========================================================================
   3. Flatpickr —— 日期票面
   ========================================================================== */

.msw-date { cursor: pointer; }
.flatpickr-calendar {
  font-family: var(--ms-font); border-radius: var(--ms-r-lg);
  background: var(--ms-card); border: 1px solid var(--ms-border);
  box-shadow: var(--ms-shadow-2);
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months { padding-top: 6px; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: var(--ms-fg); font-weight: 700; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--ms-fg-2); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--ms-action); }
span.flatpickr-weekday {
  color: var(--ms-muted); font-size: var(--ms-fs-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ms-ls-caps); background: transparent;
}
.flatpickr-day {
  color: var(--ms-fg); border-radius: var(--ms-r-sm); font-variant-numeric: tabular-nums;
}
.flatpickr-day:hover { background: var(--ms-surface-2); border-color: transparent; }
.flatpickr-day.today { border-color: var(--ms-action); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover {
  background: var(--ms-action); border-color: var(--ms-action); color: var(--ms-action-fg);
}
.flatpickr-day.inRange { background: var(--ms-accent-soft); border-color: var(--ms-accent-soft); box-shadow: none; color: var(--ms-action); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--ms-faint); }
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
  color: var(--ms-fg); font-family: var(--ms-font-mono);
}
.flatpickr-time input:hover, .flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover { background: var(--ms-surface-2); }
.flatpickr-innerContainer, .flatpickr-days, .flatpickr-rContainer { background: transparent; }
.flatpickr-calendar .flatpickr-time { border-top: 1px solid var(--ms-border); }

/* ==========================================================================
   4. Frappe Gantt —— 排期票带
   库自带 20 个 --g-* 变量，主题化只需转接到 --ms-*。
   ========================================================================== */

.msw-gantt {
  --g-bar-color: var(--ms-surface-3);
  --g-bar-border: var(--ms-border-strong);
  --g-progress-color: var(--ms-action);
  --g-expected-progress: var(--ms-info-soft);
  --g-handle-color: var(--ms-action);
  --g-arrow-color: var(--ms-border-strong);
  --g-border-color: var(--ms-border);
  --g-row-color: var(--ms-card);
  --g-row-border-color: var(--ms-border);
  --g-tick-color: var(--ms-border);
  --g-tick-color-thick: var(--ms-border-strong);
  --g-header-background: var(--ms-surface-2);
  --g-text-dark: var(--ms-fg);
  --g-text-light: var(--ms-action-fg);
  --g-text-muted: var(--ms-muted);
  --g-today-highlight: var(--ms-accent-soft);
  --g-weekend-highlight-color: var(--ms-surface-2);
  --g-weekend-label-color: var(--ms-faint);
  --g-actions-background: var(--ms-surface-2);
  --g-popup-actions: var(--ms-fg);

  border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg);
  background: var(--ms-card); overflow: hidden;
}
.msw-gantt .gantt-container { font-family: var(--ms-font); }
.msw-gantt .grid-header { fill: var(--ms-surface-2); }
.msw-gantt .upper-text, .msw-gantt .lower-text {
  font-size: var(--ms-fs-micro); font-weight: 650; fill: var(--ms-muted);
  text-transform: uppercase; letter-spacing: var(--ms-ls-caps);
}
.msw-gantt .bar-label { font-size: var(--ms-fs-xs); font-weight: 650; }
.msw-gantt .bar-wrapper .bar { stroke-width: 1; }
/* 状态色带：产品状态是票据的语义色，不靠库的默认蓝。
 * 类名由 task.custom_class 下发，库把它加在 .bar-wrapper 上。 */
.msw-gantt .bar-wrapper.g-tone-ok .bar-progress { fill: var(--ms-ok); }
.msw-gantt .bar-wrapper.g-tone-warn .bar-progress { fill: var(--ms-warn); }
.msw-gantt .bar-wrapper.g-tone-danger .bar-progress { fill: var(--ms-danger); }
.msw-gantt .bar-wrapper.g-tone-info .bar-progress { fill: var(--ms-info); }
.msw-gantt .bar-wrapper.g-tone-muted .bar-progress { fill: var(--ms-border-strong); }
.msw-gantt .gantt-container .popup-wrapper {
  border-radius: var(--ms-r-lg); background: var(--ms-console); color: var(--ms-console-fg);
  font-size: var(--ms-fs-xs); box-shadow: var(--ms-shadow-2);
}
.msw-gantt .gantt-container .popup-wrapper .title { font-size: var(--ms-fs-sm); font-weight: 700; }
.msw-gantt .gantt-container .grid-header .side-header,
.msw-gantt .gantt-container .side-header select,
.msw-gantt .gantt-container .side-header button {
  background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-r-sm);
  color: var(--ms-fg-2); font-family: inherit; font-size: var(--ms-fs-xs); font-weight: 650;
}
.msw-gantt .gantt-container .side-header button:hover { border-color: var(--ms-action); color: var(--ms-action); }

/* ==========================================================================
   5. FullCalendar —— 时刻表
   （原 #ms-fullcalendar 规则整体迁至此，改由 .msw-calendar 承载）
   ========================================================================== */

.msw-calendar { --fc-border-color: var(--ms-border); --fc-page-bg-color: transparent; }
.msw-calendar .fc { font-family: var(--ms-font); }
.msw-calendar .fc-toolbar { flex-wrap: wrap; gap: var(--ms-s2); margin-bottom: 14px; }
.msw-calendar .fc-toolbar-title { font-size: var(--ms-fs-lg); font-weight: 750; letter-spacing: -.03em; color: var(--ms-fg); }
.msw-calendar .fc-button {
  border-radius: var(--ms-r-sm); border-color: var(--ms-border);
  background: var(--ms-surface); color: var(--ms-fg-2); box-shadow: none;
  font-size: var(--ms-fs-xs); font-weight: 650; text-transform: none;
}
.msw-calendar .fc-button:hover,
.msw-calendar .fc-button-active {
  border-color: var(--ms-action) !important; background: var(--ms-action) !important; color: var(--ms-action-fg) !important;
}
.msw-calendar .fc-button:focus-visible { box-shadow: 0 0 0 3px var(--ms-accent-soft); }
.msw-calendar .fc-timegrid-slot-label,
.msw-calendar .fc-col-header-cell-cushion { color: var(--ms-muted); font-size: var(--ms-fs-xs); }
.msw-calendar .fc-timegrid-slot-label { font-family: var(--ms-font-mono); }
.msw-calendar .fc-event {
  border: 0; border-left: 3px solid var(--ms-accent); border-radius: 4px;
  background: var(--ms-accent-soft); color: var(--ms-accent);
  padding: 3px; font-size: var(--ms-fs-xs); cursor: pointer;
}
.msw-calendar .fc-event .fc-event-main { color: inherit; }
.msw-calendar .fc-event.ms-fc-trk-data,
.msw-calendar .fc-event.ms-fc-trk-policy { border-left-color: var(--ms-info); background: var(--ms-info-soft); color: var(--ms-info); }
.msw-calendar .fc-event.ms-fc-trk-health,
.msw-calendar .fc-event.ms-fc-trk-urban { border-left-color: var(--ms-ok); background: var(--ms-ok-soft); color: var(--ms-ok); }
.msw-calendar .fc-list-day-cushion { background: var(--ms-surface-2); }
.msw-calendar .fc-list-event:hover td { background: var(--ms-surface-2); }
.msw-calendar .fc-timegrid-now-indicator-line { border-color: var(--ms-action); }

/* ==========================================================================
   6. 移动端收敛：390 宽下表格横向滚动，甘特压缩行高
   ========================================================================== */

@media (max-width: 767px) {
  .msw-grid .gridjs-wrapper { overflow-x: auto; }
  .msw-grid th.gridjs-th, .msw-grid td.gridjs-td { padding-left: 9px; padding-right: 9px; }
  .msw-grid .gridjs-search-input { max-width: 100%; }
  .msw-grid .gridjs-pagination { flex-direction: column; align-items: stretch; gap: var(--ms-s2); }
  .msw-grid .gridjs-pagination .gridjs-pages { justify-content: center; }
  .msw-gantt { overflow-x: auto; }
}