/* ==========================================================
   Gitea 主题：TECH LIGHT（科技白 · 冰蓝 · 切角动效按钮）
   适用：Gitea 1.20+
   ========================================================== */

@import "theme-gitea-light.css";

:root {
  /* ---------- 主色：科技蓝 ---------- */
  --color-primary: #0a7cff;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #0870e6;
  --color-primary-dark-2: #0763cc;
  --color-primary-dark-3: #0656b3;
  --color-primary-dark-4: #054a99;
  --color-primary-dark-5: #043d80;
  --color-primary-dark-6: #033166;
  --color-primary-dark-7: #02254d;
  --color-primary-light-1: #2b8fff;
  --color-primary-light-2: #4fa1ff;
  --color-primary-light-3: #73b4ff;
  --color-primary-light-4: #96c7ff;
  --color-primary-light-5: #bddcff;
  --color-primary-light-6: #dcecff;
  --color-primary-light-7: #eff6ff;
  --color-primary-alpha-10: #0a7cff19;
  --color-primary-alpha-20: #0a7cff33;
  --color-primary-alpha-30: #0a7cff4b;
  --color-primary-alpha-40: #0a7cff66;
  --color-primary-alpha-50: #0a7cff80;
  --color-primary-alpha-60: #0a7cff99;
  --color-primary-alpha-70: #0a7cffb3;
  --color-primary-alpha-80: #0a7cffcc;
  --color-primary-alpha-90: #0a7cffe6;
  --color-primary-hover: var(--color-primary-dark-1);
  --color-primary-active: var(--color-primary-dark-2);

  /* ---------- 自定义变量 ---------- */
  --tech-blue: #0a7cff;
  --tech-cyan: #00b8e6;
  --tech-violet: #6c5ce7;
  --tech-green: #00b86b;
  --tech-red: #e5334f;
  --tech-bg: #f3f7fc;
  --tech-line: #d5e3f2;
  --tech-ink: #0f2438;

  /* ---------- 背景 ---------- */
  --color-body: var(--tech-bg);
  --color-box-header: #eef4fb;
  --color-box-body: #ffffff;
  --color-box-body-highlight: #f5f9ff;
  --color-card: #ffffff;
  --color-header-wrapper: #ffffff;
  --color-nav-bg: #ffffff;
  --color-nav-hover-bg: #eaf3ff;
  --color-nav-text: #1b3552;
  --color-footer: #ffffff;
  --color-menu: #ffffff;
  --color-hover: #0a7cff12;
  --color-active: #0a7cff1f;
  --color-input-background: #ffffff;
  --color-input-border: #c9dbed;
  --color-input-border-hover: var(--tech-blue);
  --color-input-text: #0f2438;
  --color-code-bg: #f5f9ff;
  --color-markup-table-row: #0a7cff0a;
  --color-markup-code-block: #f1f6fc;
  --color-markup-code-inline: #0a7cff14;
  --color-secondary: #d5e3f2;
  --color-secondary-dark-1: #c6d9ee;
  --color-secondary-dark-2: #b6cde6;
  --color-secondary-light-1: #e4eef8;
  --color-secondary-light-2: #edf4fb;
  --color-secondary-light-3: #f3f8fd;
  --color-secondary-light-4: #f8fbfe;
  --color-shadow: #0f243822;
  --color-light: #0a7cff0a;
  --color-light-border: #0a7cff26;

  /* ---------- 文字 ---------- */
  --color-text: #1b3552;
  --color-text-light: #46627f;
  --color-text-light-1: #55718e;
  --color-text-light-2: #6a859f;
  --color-text-light-3: #8097ae;
  --color-text-dark: #0b1b2b;
  --color-link: #0a68d6;

  /* ---------- 状态色 ---------- */
  --color-green: #00b86b;
  --color-red: #e5334f;
  --color-orange: #f08a00;
  --color-yellow: #e6b800;
  --color-purple: #6c5ce7;
  --color-pink: #e0338f;
  --color-blue: #0a7cff;
  --color-teal: #00a896;
  --color-accent: var(--color-primary);
}

/* ==========================================================
   全局背景：浅蓝网格 + 柔和光晕
   ========================================================== */
body {
  background-color: var(--tech-bg) !important;
  background-image:
    radial-gradient(1000px 520px at 10% -10%, #0a7cff14, transparent 60%),
    radial-gradient(800px 460px at 100% 0%, #6c5ce711, transparent 60%),
    linear-gradient(#0a7cff0d 1px, transparent 1px),
    linear-gradient(90deg, #0a7cff0d 1px, transparent 1px) !important;
  background-size: auto, auto, 40px 40px, 40px 40px !important;
  background-attachment: fixed !important;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eaf1f9; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--tech-blue), var(--tech-cyan));
  border-radius: 6px;
  border: 2px solid #eaf1f9;
}
::selection { background: #0a7cff33; color: #0b1b2b; }

/* ==========================================================
   顶部导航
   ========================================================== */
#navbar {
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent, var(--tech-blue), var(--tech-cyan), transparent) 1;
  box-shadow: 0 6px 24px #0a7cff14;
}
#navbar .item { transition: color .25s, background .25s; }
#navbar a.item:hover { color: var(--tech-blue) !important; }
#navbar .brand img { transition: transform .5s; }
#navbar .brand:hover img { transform: rotate(360deg); }

/* ==========================================================
   卡片 / 面板
   ========================================================== */
.ui.segment,
.ui.attached.segment,
.ui.card,
.ui.cards > .card {
  background: #ffffff !important;
  border-color: var(--tech-line) !important;
  box-shadow: 0 1px 2px #0f24380d, 0 4px 14px #0a7cff0a;
}

.ui.top.attached.header,
.ui.attached.header {
  background: linear-gradient(90deg, #eaf3ff, #f4f8fd) !important;
  border-color: var(--tech-line) !important;
  position: relative;
}
.ui.top.attached.header::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--tech-blue), var(--tech-cyan));
}

.ui.card,
.ui.cards > .card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ui.card:hover,
.ui.cards > .card:hover {
  transform: translateY(-3px);
  border-color: var(--tech-blue) !important;
  box-shadow: 0 10px 28px #0a7cff26, 0 0 0 1px #0a7cff44 !important;
}

.flex-list .flex-item {
  position: relative;
  transition: background .25s;
}
.flex-list .flex-item:hover {
  background: linear-gradient(90deg, #0a7cff10, transparent 70%);
}
.flex-list .flex-item::before {
  content: "";
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 2px;
  background: var(--tech-blue);
  transform: scaleY(0);
  transition: transform .25s;
}
.flex-list .flex-item:hover::before { transform: scaleY(1); }

/* ==========================================================
   科技风按钮
   - 切角造型 + 蓝色描边
   - 悬停光带扫过
   - 点击缩放反馈
   - 没有底部流动线，没有呼吸闪烁
   ========================================================== */
.ui.button,
button.ui.button,
.ui.buttons .button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--tech-blue) !important;
  background: linear-gradient(135deg, #ffffff, #eef5ff) !important;
  border: 1px solid #0a7cff88 !important;
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 0 10px #0a7cff10;
  transition: color .25s, box-shadow .3s, transform .15s, border-color .25s, background .25s;
}

/* 彻底不使用按钮的 ::after */
.ui.button::after,
button.ui.button::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* 光带扫过（仅悬停 / 点按时触发一次） */
.ui.button::before {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  z-index: -1;
  background: linear-gradient(110deg, transparent, #0a7cff33, #ffffffcc, #0a7cff33, transparent);
  transform: skewX(-25deg);
  pointer-events: none;
}
.ui.button:hover::before {
  animation: tech-sweep .7s ease-out;
}
@keyframes tech-sweep {
  from { left: -80%; }
  to   { left: 130%; }
}

.ui.button:hover,
.ui.button:focus {
  color: #fff !important;
  border-color: var(--tech-blue) !important;
  background: linear-gradient(135deg, #2b8fff, #0a68e6) !important;
  box-shadow: 0 6px 18px #0a7cff55;
}
.ui.button:active {
  transform: scale(.95);
  box-shadow: 0 2px 8px #0a7cff66;
}

/* 主按钮：渐变实心 */
.ui.primary.button,
.ui.primary.buttons .button,
.ui.blue.button {
  color: #fff !important;
  background: linear-gradient(135deg, #0a7cff, #00a8ff 60%, #00c2e6) !important;
  border-color: #5aaaff !important;
  box-shadow: 0 4px 14px #0a7cff44;
}
.ui.primary.button:hover,
.ui.primary.button:focus,
.ui.blue.button:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #2b8fff, #22b8ff 60%, #28d0f0) !important;
  box-shadow: 0 8px 22px #0a7cff66;
}
.ui.primary.button::before {
  background: linear-gradient(110deg, transparent, #ffffff66, transparent);
}

/* 绿色（创建 / 合并 / 提交） */
.ui.green.button,
.ui.positive.button,
.ui.green.buttons .button {
  color: #fff !important;
  background: linear-gradient(135deg, #00c878, #00a862) !important;
  border-color: #52dba2 !important;
  box-shadow: 0 4px 14px #00b86b44;
}
.ui.green.button:hover,
.ui.positive.button:hover {
  background: linear-gradient(135deg, #1fd88c, #00b86b) !important;
  box-shadow: 0 8px 22px #00b86b66;
}

/* 红色（删除 / 关闭） */
.ui.red.button,
.ui.negative.button,
.ui.red.buttons .button {
  color: #fff !important;
  background: linear-gradient(135deg, #f0405c, #c9213d) !important;
  border-color: #ff8fa2 !important;
  box-shadow: 0 4px 14px #e5334f44;
}
.ui.red.button:hover,
.ui.negative.button:hover {
  box-shadow: 0 8px 22px #e5334f66;
  animation: tech-glitch .35s steps(2) 1;
}
@keyframes tech-glitch {
  0%   { transform: translate(0); }
  25%  { transform: translate(-2px, 1px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0); }
}

/* 橙 / 紫 */
.ui.orange.button {
  color: #fff !important;
  background: linear-gradient(135deg, #ffa21f, #f07a00) !important;
  border-color: #ffd08a !important;
}
.ui.purple.button {
  color: #fff !important;
  background: linear-gradient(135deg, #8b7cf6, #6c5ce7) !important;
  border-color: #c3baff !important;
}

/* 描边 / 次要按钮 */
.ui.basic.button,
.ui.basic.buttons .button {
  background: #ffffff !important;
  color: var(--tech-blue) !important;
  border: 1px solid #0a7cff66 !important;
  box-shadow: none;
}
.ui.basic.button:hover {
  background: #eaf3ff !important;
  color: var(--tech-blue) !important;
  box-shadow: 0 4px 14px #0a7cff33;
}
.ui.basic.red.button,
.ui.basic.negative.button {
  color: var(--tech-red) !important;
  border-color: #e5334f88 !important;
  background: #fff !important;
}
.ui.basic.red.button:hover { background: #fff0f2 !important; color: var(--tech-red) !important; }
.ui.basic.green.button,
.ui.basic.positive.button {
  color: var(--tech-green) !important;
  border-color: #00b86b88 !important;
  background: #fff !important;
}
.ui.basic.green.button:hover { background: #eafaf2 !important; color: var(--tech-green) !important; }

/* 禁用 */
.ui.disabled.button,
.ui.button:disabled {
  opacity: .45 !important;
  animation: none !important;
  box-shadow: none !important;
  filter: grayscale(.5);
}
.ui.disabled.button::before { display: none; }

/* 小按钮：切角更小 */
.ui.mini.button, .ui.tiny.button, .ui.compact.button, .ui.icon.button {
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* 按钮组 */
.ui.buttons .button { clip-path: none; }
.ui.buttons { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

/* ==========================================================
   输入框
   ========================================================== */
.ui.input input,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="url"],
.ui.form input[type="number"],
.ui.form textarea,
.ui.selection.dropdown {
  background: #ffffff !important;
  border: 1px solid #c9dbed !important;
  color: #0f2438 !important;
  border-radius: 2px !important;
  transition: border-color .25s, box-shadow .25s;
}
.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus,
.ui.selection.active.dropdown {
  border-color: var(--tech-blue) !important;
  box-shadow: 0 0 0 3px #0a7cff22 !important;
}

/* ==========================================================
   标签页 / 菜单 / 标签
   ========================================================== */
.ui.secondary.pointing.menu .active.item,
.ui.tabular.menu .active.item {
  color: var(--tech-blue) !important;
  border-color: var(--tech-blue) !important;
}
.ui.secondary.pointing.menu .item { transition: color .25s, border-color .25s; }
.ui.secondary.pointing.menu .item:hover { color: var(--tech-blue) !important; }

.ui.label {
  border-radius: 2px !important;
  letter-spacing: .02em;
}

/* ==========================================================
   代码 / 表格
   ========================================================== */
.markup code,
.markup pre,
.code-view,
pre {
  border: 1px solid var(--tech-line) !important;
  border-radius: 3px !important;
}
.markup pre { background: #f5f9ff !important; }

.ui.table {
  background: transparent !important;
  border-color: var(--tech-line) !important;
}
.ui.table thead th {
  background: #eaf3ff !important;
  color: #0a5fc4 !important;
  letter-spacing: .06em;
  font-size: .85em;
}
.ui.table tbody tr { transition: background .2s; }
.ui.table tbody tr:hover { background: #0a7cff0d !important; }

/* 热力图 */
.heatmap-color-1 { background: #0a7cff33 !important; }
.heatmap-color-2 { background: #0a7cff66 !important; }
.heatmap-color-3 { background: #0a7cffaa !important; }
.heatmap-color-4 { background: #0a7cff !important; }

/* 头像 */
img.ui.avatar, .ui.avatar {
  border: 1px solid #0a7cff44;
  transition: box-shadow .3s, transform .3s;
}
img.ui.avatar:hover {
  box-shadow: 0 0 0 3px #0a7cff33;
  transform: scale(1.06);
}

/* 进度条 */
.ui.progress .bar {
  background: linear-gradient(90deg, var(--tech-blue), var(--tech-cyan)) !important;
}

/* 模态框 / 下拉 */
.ui.modal {
  background: #ffffff !important;
  border: 1px solid #0a7cff44 !important;
  box-shadow: 0 20px 60px #0f24384d !important;
}
.ui.dimmer { background: #0b1b2bb3 !important; backdrop-filter: blur(3px); }

.ui.dropdown .menu {
  background: #ffffff !important;
  border: 1px solid #c9dbed !important;
  box-shadow: 0 10px 30px #0f243826 !important;
}
.ui.dropdown .menu > .item:hover {
  background: #eaf3ff !important;
  color: var(--tech-blue) !important;
}

/* 页脚 */
.page-footer {
  border-top: 1px solid var(--tech-line) !important;
  background: #ffffff !important;
}

/* ==========================================================
   触屏设备：没有悬停
   ========================================================== */
@media (hover: none) {
  .ui.card:hover,
  .ui.cards > .card:hover { transform: none; }
  img.ui.avatar:hover { transform: none; }
  .ui.button:hover,
  .ui.button:focus {
    /* 触屏上悬停态会“粘住”，恢复为默认外观 */
    color: var(--tech-blue) !important;
    background: linear-gradient(135deg, #ffffff, #eef5ff) !important;
    box-shadow: inset 0 0 10px #0a7cff10;
  }
  .ui.primary.button:hover, .ui.primary.button:focus, .ui.blue.button:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #0a7cff, #00a8ff 60%, #00c2e6) !important;
    box-shadow: 0 4px 14px #0a7cff44;
  }
  .ui.green.button:hover, .ui.positive.button:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #00c878, #00a862) !important;
  }
  .ui.red.button:hover, .ui.negative.button:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #f0405c, #c9213d) !important;
    animation: none;
  }
  .ui.button:active {
    transform: scale(.96);
    filter: brightness(.95);
  }
  .ui.button:active::before { animation: tech-sweep .5s ease-out; }
}

/* ==========================================================
   手机 / 小屏适配（≤ 767px）
   ========================================================== */
@media (max-width: 767px) {
  body {
    background-size: auto, auto, 32px 32px, 32px 32px !important;
    background-attachment: scroll !important;
    font-size: 15px;
    line-height: 1.55;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  html { -webkit-text-size-adjust: 100%; }
  #navbar { backdrop-filter: none; background: #ffffff !important; min-height: 52px; }
  #navbar .item { padding: 10px 12px !important; min-height: 44px; }
  .ui.dimmer { backdrop-filter: none; }

  .page-content,
  .page-content > .ui.container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .ui.container { width: auto !important; margin-left: 10px !important; margin-right: 10px !important; }

  /* 按钮：点击区域加大，切角缩小 */
  .ui.button,
  button.ui.button {
    min-height: 40px;
    padding: 10px 16px !important;
    letter-spacing: .03em;
    font-size: 14px;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  }
  .ui.mini.button, .ui.tiny.button, .ui.compact.button, .ui.icon.button {
    min-height: 34px;
    padding: 7px 11px !important;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  }
  .ui.form .field > .ui.button,
  .ui.form > .ui.button,
  .ui.form .inline.field .ui.button {
    width: 100%;
    margin-top: 6px;
  }
  .ui.buttons { flex-wrap: wrap; }
  .ui.buttons .button { flex: 1 1 auto; }

  /* 输入框 16px，避免 iOS 自动放大 */
  .ui.input input,
  .ui.form input:not([type]),
  .ui.form input[type="text"],
  .ui.form input[type="email"],
  .ui.form input[type="password"],
  .ui.form input[type="search"],
  .ui.form input[type="url"],
  .ui.form input[type="number"],
  .ui.form textarea,
  .ui.selection.dropdown {
    font-size: 16px !important;
    min-height: 42px;
  }

  .ui.segment,
  .ui.attached.segment { padding: 12px !important; }
  .ui.top.attached.header,
  .ui.attached.header { padding: 10px 12px !important; font-size: 1.05em; }

  /* 标签页横向滑动 */
  .ui.secondary.pointing.menu,
  .repository .ui.tabs.container .ui.menu {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ui.secondary.pointing.menu::-webkit-scrollbar,
  .repository .ui.tabs.container .ui.menu::-webkit-scrollbar { display: none; }
  .ui.secondary.pointing.menu .item { white-space: nowrap; }

  /* 表格 / 代码内部横向滚动 */
  .ui.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .markup pre, pre, .code-view { overflow-x: auto; font-size: 13px; }
  .markup table { display: block; overflow-x: auto; }
  .markup img { max-width: 100%; height: auto; }

  .flex-list .flex-item { padding: 12px 6px !important; flex-wrap: wrap; }
  .flex-list .flex-item::before { display: none; }

  .ui.modal { width: calc(100% - 20px) !important; margin: 10px !important; }
  .ui.dropdown .menu { max-height: 60vh; overflow-y: auto; }

  .page-footer {
    padding: 14px 10px calc(14px + env(safe-area-inset-bottom)) !important;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  body { font-size: 14.5px; }
  .ui.button, button.ui.button { font-size: 13px; }
  h1.ui.header { font-size: 1.5em; }
  h2.ui.header { font-size: 1.3em; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .ui.button { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ==========================================================
   无障碍：尊重“减少动态效果”
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}