/*!
 * TheWorldTimeMap Styles
 * Combined modular framework with project-specific styles
 */

/* Import modular CSS framework */
@import '../styles/base/_variables.css';
@import '../styles/base/_reset.css';
@import '../styles/base/_typography.css';

@import '../styles/components/_buttons.css';
@import '../styles/components/_forms.css';
@import '../styles/components/_cards.css';

@import '../styles/utilities/_spacing.css';
@import '../styles/utilities/_layout.css';
@import '../styles/utilities/_borders.css';

/* Import Aurora Card Component */
@import url('../styles/components/aurora-cards/style.css');

/* Project-specific variables and base styles */
:root {
  --brandA: 99, 102, 241;  /* indigo-500 */
  --brandB: 56, 189, 248;  /* sky-400 */
  --accent: 16, 185, 129;  /* emerald-500 */
  /* 页面背景（用于左右"缝隙"着色） */
  --page-bg: #f7f3ee; /* warm light gray */
}

.dark { --page-bg: #111827; /* gray-900 */ }

html, body { height: 100%; }

body {
  font-family: Noto Sans SC, Tahoma, Arial, Roboto, "Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB", Simsun, sans-self, system-ui, -apple-system;
  background-color: var(--page-bg) !important; /* override utility bg- classes */
}

.serif { font-family: Noto Serif SC, Georgia, "Times New Roman", serif; }

/* Project-specific component styles */
.brand-grad {
  background: linear-gradient(135deg, rgba(var(--brandA),1), rgba(var(--brandB),1));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.card { transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-2px); }

.btn { transition: transform .15s ease, background-color .15s ease, opacity .15s ease; }
.btn:active { transform: translateY(1px) scale(.99); }

.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.dark .shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* 时间网格系统 */
.time-grid { grid-template-columns: minmax(160px, 30%) repeat(24, minmax(0, 1fr)); }
@media (max-width: 1024px) { .time-grid { grid-template-columns: minmax(140px, 32%) repeat(24, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .time-grid { grid-template-columns: minmax(120px, 34%) repeat(24, minmax(0, 1fr)); } }

.cell { position: relative; height: 44px; border-right: 1px solid rgba(0,0,0,.06); }
.time-grid#hourHeader > div:not(:first-child) { height: 44px; }
.dark .cell { border-right-color: rgba(255,255,255,.08); }

.row-left { position: sticky; left: 0; z-index: 3; }
.row-left { height: 44px; padding-top: 0 !important; padding-bottom: 0 !important; }
#hourHeader .row-left { height: 44px; padding-top: 0 !important; padding-bottom: 0 !important; }

.top-sticky { position: sticky; top: 0; z-index: 5; }
.top-sticky.glass {
  background: rgba(255,255,255,0.68);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  z-index: 50; /* 确保站点顶部栏高于任何内部粘性元素 */
}

.dark .top-sticky.glass {
  background: rgba(17,24,39,0.55);
  border-bottom-color: rgba(255,255,255,0.12);
}

/* 顶部导航菜单：模块化的链接配色（便于增减菜单） */
.topbar .nav-menu a { color: #374151; /* gray-700 */ }
.topbar .nav-menu a:hover { color: #111827; /* gray-900 */ }
.dark .topbar .nav-menu a { color: #7e838b; }
.dark .topbar .nav-menu a:hover { color: #7e838b; }

/* 深色模式下"更多工具与参考"标题配色与顶部菜单保持一致 */
.dark #toolsTitle { color: #7e838b !important; }

/* 深色模式下"专业时区工具"标题配色与顶部菜单保持一致 */
.dark [data-i18n="sections.specialTools"] { color: #7e838b !important; }

/* 同步卡片小标题与正文为相同配色 */
.dark #toolWorldClockTitle,
.dark #toolConverterTitle,
.dark #toolOverlapTitle { color: #7e838b !important; }
.dark #toolWorldClockText,
.dark #toolConverterText,
.dark #toolOverlapText { color: #7e838b !important; }

/* FAQ 区块深色模式配色同步 */
.dark #faqTitle,
.dark #faqQ1, .dark #faqQ2, .dark #faqQ3, .dark #faqQ4, .dark #faqQ5,
.dark #faqA1, .dark #faqA2, .dark #faqA3, .dark #faqA4, .dark #faqA5 { color: #7e838b !important; }

/* 顶部工具条控件统一高度与视觉样式 */
.topbar .topbar-ctl { height: 36px; padding: 0 10px; font-size: 12px; display:inline-flex; align-items:center; line-height: 1; }
.topbar .segmented { height: 36px; display:inline-flex; align-items:center; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,0.12); }
.dark .topbar .segmented { border-color: rgba(255,255,255,0.18); }
.topbar .segmented > button { height: 100%; padding: 0 12px; font-size: 12px; line-height: 1; border: none !important; }
.topbar select.topbar-ctl { appearance: none; -webkit-appearance: none; padding-right: 28px; }

/* 时间轴头部的粘顶层级略低于站点顶部栏，避免覆盖 */
#hourHeader { z-index: 8; }

.now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(var(--accent), .95); transform: translateX(-1px); pointer-events: none; }
.now-label { position:absolute; transform: translate(-50%, -50%); background: rgba(16,185,129,.95); color:#fff; font-size:12px; font-weight:700; line-height:1; padding:4px 8px; border-radius: 9999px; pointer-events:none; box-shadow: 0 2px 6px rgba(0,0,0,.2); z-index: 12; }

.day-boundary, .day-boundary-start { display: none !important; }

.hour-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: .9; }
.hour-label .num { font-size: 14px; font-weight: 700; line-height: 1; display:block; }
.hour-label .ampm { font-size: 10px; opacity: .75; line-height: 1; display:block; margin-top: 2px; }

/* 顶部小时字号更大，上下堆叠 AM/PM */
.header-hour { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; }
.header-hour .num { font-size: 16px; font-weight: 800; line-height:1; }
.header-hour .ampm { font-size: 10px; opacity:.75; line-height:1; margin-top: 2px; }

.midnight-dot { display:none; }

/* 更鲜明的昼/夜/暮光配色 */
.bg-day { background: #f0f6fa; }
.dark .bg-day { background: linear-gradient(180deg, rgba(146,64,14,.22), rgba(180,83,9,.16)); }

.bg-night { background: #d1d9f5; }
.dark .bg-night { background: linear-gradient(180deg, rgba(67,56,202,.60), rgba(3,105,161,.48)); }

.bg-twilight { background: #fff0e6; }
.dark .bg-twilight { background: linear-gradient(180deg, rgba(245,158,11,.28), rgba(251,191,36,.20)); }

/* 工作时段（约 9-16 点）改为淡黄色高亮 */
.cell.workhour { background: #e6fcf5 !important; }
.dark .cell.workhour { background: linear-gradient(180deg, rgba(202,138,4,.30), rgba(202,138,4,.24)) !important; }

/* 跨日分隔线（每行本地午夜） */
.day-sep { border-left: 0; }
.day-sep::before { display: none; }
.mid-gap { position: relative; }
.mid-gap::after { display: none; }
.dark .mid-gap::after { display: none; }

/* 左列文本溢出处理 */
.row-left { min-width: 0; }
.row-left .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; }

/* 本地时区行高亮 */
.row-local .row-left { border-left: 4px solid rgba(99,102,241,.85); background-color: rgba(99,102,241,.05); }
.dark .row-local .row-left { border-left-color: rgba(99,102,241,.9); background-color: rgba(99,102,241,.12); }
.row-local > div.cell { filter: saturate(1.05) brightness(1.02); }

/* 本地行因有 4px 左边框，文本会比其它城市"视觉上"更靠右。
   这里将本地行左侧内边距减少 4px，使其与其它行的文本左起对齐。 */
.row-local .row-left { padding-left: 3.75rem !important; } /* pl-16 = 4rem -> 4rem - 4px = 3.75rem */
@media (min-width: 768px) {
  .row-local .row-left { padding-left: 4.75rem !important; } /* md:pl-20 = 5rem -> 5rem - 4px = 4.75rem */
}

/* 拖拽排序可视化 */
.row.dragging { opacity: .7; }
.row.dragging-active { opacity: .95; box-shadow: 0 8px 24px rgba(0,0,0,.15); cursor: grabbing; }
.row.drag-over-top { box-shadow: 0 -2px 0 0 rgba(99,102,241,.9); }
.row.drag-over-bottom { box-shadow: 0 2px 0 0 rgba(99,102,241,.9); }
.row-left { cursor: grab; }
.row-left:active { cursor: grabbing; }

/* 拖拽占位符（挤开空间） */
.row.placeholder { border: 2px dashed rgba(99,102,241,.5); border-radius: 8px; margin-bottom: 25px; }

/* 小时标题行使用抓手指针，和左侧一致 */
#hourHeader { cursor: grab; }
#hourHeader:active { cursor: grabbing; }

/* 鼠标跟随对比带 */
#hoverBand { position:absolute; top:0; bottom:0; width:40px; background: rgba(108, 117, 125, 0.15); pointer-events:none; display:none; }
.dark #hoverBand { background: linear-gradient(180deg, rgba(99,102,241,.22), rgba(56,189,248,.22)); }

/* 搜索建议选中态 */
.suggest-active { background: rgba(99,102,241,.12) !important; }
.dark .suggest-active { background: rgba(99,102,241,.22) !important; }

/* 框选选择带 */
.select-band { position:absolute; top:0; bottom:0; background: rgba(99,102,241,.15); border: 2px solid rgba(99,102,241,.6); border-radius: 6px; pointer-events:auto; display:none; z-index:12; }
.dark .select-band { background: rgba(99,102,241,.22); border-color: rgba(99,102,241,.75); }
.select-band .sel-handle { position:absolute; top:0; bottom:0; width:8px; background: rgba(0,0,0,.15); cursor: ew-resize; }
.dark .select-band .sel-handle { background: rgba(255,255,255,.22); }
.select-band .sel-handle.left { left:-4px; border-top-left-radius:6px; border-bottom-left-radius:6px; }
.select-band .sel-handle.right { right:-4px; border-top-right-radius:6px; border-bottom-right-radius:6px; }
.select-band .sel-info { position:absolute; top:-22px; left:50%; transform: translateX(-50%); background: rgba(17,24,39,.9); color:#fff; font-size:11px; padding:3px 8px; border-radius: 9999px; white-space:nowrap; }

/* 顶部两种工具条统一高度 */
.grid-toolbar { height: 60px; padding-top: 0; padding-bottom: 0; }

/* 周末高亮：更明显的暖色系遮罩（与工作日区分更强） */
.cell.weekend { box-shadow: inset 0 0 0 9999px rgba(236, 72, 153, .20); /* rose-500 @ .20 */ }
.dark .cell.weekend { box-shadow: inset 0 0 0 9999px rgba(236, 72, 153, .32); }

/* 滚动条微样式（如出现） */
.scroll-smooth::-webkit-scrollbar { height: 10px; width: 10px; }
.scroll-smooth::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 9999px; }
.dark .scroll-smooth::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }

/* 将每行的 24 小时合并为一个"大格子"外轮廓（基于每行本地 0/23 点） */
.row > div.cell { border-right: none !important; position: relative; }
.row > div.cell.day-start {
  border-top-left-radius: 6px; border-bottom-left-radius: 6px;
  padding-left: 2px; background-clip: content-box;
}
.row > div.cell.day-end {
  border-top-right-radius: 6px; border-bottom-right-radius: 6px;
  padding-right: 2px; background-clip: content-box;
}

/* 0 点格子稍微深一点，增强一天起始的辨识度 */
.row > div.cell.day-start::before {
  content: ""; position: absolute; inset: 0; border-top-left-radius: 6px; border-bottom-left-radius: 6px; background: rgba(0,0,0,.08); pointer-events: none;
}
.dark .row > div.cell.day-start::before { background: rgba(0,0,0,.10); }

/* 0 点的日期两行显示样式 */
.header-hour .month { font-size: 10px; opacity: .75; text-transform: uppercase; line-height: 1; }
.header-hour .day { font-size: 14px; font-weight: 700; line-height: 1.1; }
.hour-label .month { font-size: 10px; opacity: .75; text-transform: uppercase; line-height: 1; display:block; }
.hour-label .day { font-size: 14px; font-weight: 700; line-height: 1.1; display:block; }

/* 取消旧的整列加粗分隔线，避免与按行 0/23 逻辑冲突 */

/* Header Tools Dropdown Styles */
.nav-menu .group:hover .fa-chevron-down {
  transform: rotate(180deg);
}

/* 统一工具下拉菜单与其他导航项的深色模式颜色 - 使用更精确的选择器 */
.dark .topbar .nav-menu .group > div.absolute a {
  color: #7e838b !important;
}
.dark .topbar .nav-menu .group > div.absolute a:hover {
  color: #f3f4f6 !important; /* gray-100 */
  background-color: #374151 !important; /* gray-700 */
}

/* 确保工具下拉菜单在深色模式下有正确的背景和边框 */
.dark .topbar .nav-menu .group > div.absolute {
  background-color: #1f2937 !important; /* gray-800 */
  border-color: #374151 !important; /* gray-700 */
}

/* 统一工具按钮本身的深色模式颜色 - 确保不影响group hover */
.dark .topbar .nav-menu .group > button {
  color: #7e838b !important;
}
.dark .topbar .nav-menu .group > button:hover {
  color: #7e838b !important;
}

/* 确保工具下拉菜单的group-hover功能正常工作 */
.topbar .nav-menu .group:hover > div.absolute {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 统一工具卡片的hover样式，使其与其他卡片一致 */
.dark .aurora-solid-card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease !important;
}
.dark .aurora-solid-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important; /* 更明显的浅色边框 */
  transform: translateY(-2px) scale(1.02) !important;
}

/* 为所有卡片添加更明显的hover边框效果 */
.dark .bg-white:hover,
.dark .aurora-solid-container:hover {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* 通用卡片hover效果增强 */
.dark [class*="card"]:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Enhanced Tool Cards Styles */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.dark .hover-lift:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.btn-primary-sm {
  @apply px-3 py-1.5 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700 transition-colors;
}

/* Tool status badges */
.tool-badge {
  @apply text-xs px-2 py-1 rounded-full font-medium;
}
.tool-badge-new {
  @apply bg-green-100 text-green-800;
}
.tool-badge-hot {
  @apply bg-blue-100 text-blue-800;
}
.tool-badge-pro {
  @apply bg-purple-100 text-purple-800;
}
.dark .tool-badge-new {
  @apply bg-green-900 text-green-300;
}
.dark .tool-badge-hot {
  @apply bg-blue-900 text-blue-300;
}
.dark .tool-badge-pro {
  @apply bg-purple-900 text-purple-300;
}