/**
 * 程序员工具箱组件样式
 * 文件位置：script/widgets/tools/index.css
 */
/* ============================================================
 * 程序员工具箱 2×2 卡片：
 *   - 顶部 head 一行（logo + "工具箱"）
 *   - 下方 4×2 grid 展示 7 个功能小图标 + 1 个"更多"占位
 *   - 整张卡是一个点击区，点哪都打开工具箱
 * 卡片背景区在主题里隐藏标题后约 176×164（2×2 cell 80×80 + gap 16/4），
 * 所有元素用 container query (cqi) 自适应，避免在小尺寸下溢出。
 * ============================================================ */
.halotab-widget-tools {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px 10px 8px;
  box-sizing: border-box;
  /* 与其它 widget 同基调：浅彩渐变 + 主题淡光晕，文字深色，整组卡的色相错开后更缤纷 */
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(99, 102, 241, .14) 0%, rgba(99, 102, 241, 0) 55%),
    radial-gradient(100% 80% at 100% 100%, rgba(168, 85, 247, .12) 0%, rgba(168, 85, 247, 0) 60%),
    linear-gradient(135deg, #eef2ff 0%, #e0e7ff 60%, #c7d2fe 100%);
  color: #1f2937;
  border-radius: inherit;
  overflow: hidden;
}

/* ============================================================
 * 装饰性 SVG 背景：纯 SVG 光晕 + 星点 + 语义图标（扳手），与其它 widget 风格统一。
 * 用 currentColor 接卡片文字色（深色）。
 * ============================================================ */
.halotab-widget-tools .halotab-widget-deco-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--ht-deco-color, currentColor);
  z-index: 0;
}
.halotab-widget-tools .halotab-widget-deco-bg svg{
  width: 100%;
  height: 100%;
  display: block;
}
/* 内容层在装饰层之上 */
.halotab-widget-tools-grid{ position: relative; z-index: 1; }

/* 功能图标网格：4 列 × 2 行，自适应剩余空间 */
.halotab-widget-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
}
.ht-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  /* 用每格自带的 --c 作为高亮色：上方提亮 → 下方原色，靠自身渐变形成层次，不再依赖内描边阴影 */
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 78%, #fff) 0%, var(--c) 100%);
  color: #fff;
}
.ht-tool svg {
  display: block;
  width: clamp(11px, 6.5cqi, 16px);
  height: clamp(11px, 6.5cqi, 16px);
}
.ht-tool-more {
  /* 占位格降低饱和度，视觉上和真正的工具拉开层级 */
  opacity: .78;
}

/* 仅供屏幕阅读器：把 tip 作为无障碍描述提供，不占视觉空间 */
.halotab-widget-tools-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
 * AppBox 内 iframe 容器：铺满整个 body
 * ---------------------------------------------------------- *
 * 盒子尺寸由 index.js 通过 appBox.open({ width, height }) 显式传入（1800×1050），
 * 不在 CSS 里写死，方便其它调用方按需覆盖。
 * ---------------------------------------------------------- */
.ht-appbox-body[data-key="tools"] {
  padding: 0;
  height: 100%;
}
.ht-appbox-tools-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 600px;
  border: 0;
  background: #f1f1f1;
}

/* ============================================================
 * 暗色主题
 *   卡片底色：浅色蓝紫渐变 → 暗色深蓝紫渐变（与 calendar dark 同色系），
 *   保留两枚紫色径向光晕的语言，文字色变浅，
 *   与 weather/calendar 在 dark 主题下整体收敛到"夜紫蓝"调。
 *   .ht-tool 单元格本身用 --c 渐变着色，无需在 dark 下覆盖。
 * ============================================================ */
html[data-theme="dark"] .halotab-widget-tools,
html[data-theme="auto"] .halotab-widget-tools{
  color: #e6ecf7;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(139,92,246,.22) 0%, rgba(139,92,246,0) 55%),
    radial-gradient(100% 80% at 100% 100%, rgba(99,102,241,.22) 0%, rgba(99,102,241,0) 60%),
    linear-gradient(135deg, #1a1838 0%, #221c44 60%, #2c2150 100%);
}
html[data-theme="dark"] .ht-appbox-tools-frame,
html[data-theme="auto"] .ht-appbox-tools-frame{
  background: #1a1a1f;
}