/* shortcuts.css — 快捷键设置面板（精简紧凑 / Token 驱动）
   所有外观属性都通过 var(--shortcut-*) 引用，外挂主题可通过覆盖 token 换肤。
   不允许在本文件中写 html[data-theme="..."] 选择器。 */

/* ===== 主容器 ===== */
.sc-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    color: var(--text);
}
.sc-panel *,
.sc-panel *::before,
.sc-panel *::after {
    box-sizing: border-box;
}

/* ===== 顶部工具栏 =====
   用负 margin 撑满 settings-body 的整个内宽（抵消其 18px 左右 padding），
   用负 top 吸到 settings-body 的最顶边（抵消其 18px 顶部 padding），
   这样滚动时下方内容不会从顶部 18px 间隙或左右 padding 边漏出。 */
.sc-toolbar {
    position: sticky;
    top: -18px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin: -18px -18px 0;
    padding: 16px 18px 12px;
    background: var(--shortcut-toolbar-bg);
    border-bottom: var(--shortcut-toolbar-border);
}

.sc-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.sc-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--shortcut-search-icon-color);
    pointer-events: none;
}
#sc-search-input {
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    padding: 0 12px 0 30px;
    font: inherit;
    font-size: 12.5px;
    color: var(--shortcut-search-text);
    background: var(--shortcut-search-bg);
    border: var(--shortcut-search-border);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#sc-search-input::placeholder {
    color: var(--shortcut-search-placeholder);
}
#sc-search-input:focus {
    border-color: var(--shortcut-search-focus-border);
    box-shadow: var(--shortcut-search-focus-shadow);
}

.sc-reset-all {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 14px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: var(--shortcut-reset-btn-text);
    background: var(--shortcut-reset-btn-bg);
    border: var(--shortcut-reset-btn-border);
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.sc-reset-all:hover {
    color: var(--shortcut-reset-btn-hover-text);
    border-color: var(--shortcut-reset-btn-hover-border);
    background: var(--shortcut-reset-btn-hover-bg);
}

/* ===== 分类与列表 ===== */
.sc-group {
    display: flex;
    flex-direction: column;
}
.sc-group + .sc-group {
    margin-top: 8px;
}
.sc-group-title {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--shortcut-group-title-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 12px 2px 6px;
}

.sc-list {
    display: flex;
    flex-direction: column;
    background: var(--shortcut-list-bg);
    border: var(--shortcut-list-border);
    border-radius: var(--shortcut-list-radius);
    overflow: hidden;
}

.sc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 36px;
    padding: 0 12px;
    border-top: var(--shortcut-row-divider);
    transition: background .12s ease;
}
.sc-row:first-child { border-top: 0; }
.sc-row:hover {
    background: var(--shortcut-row-hover-bg);
}
.sc-row.is-conflict {
    background: var(--shortcut-row-conflict-bg);
}
.sc-row.is-conflict:hover {
    background: var(--shortcut-row-conflict-hover-bg);
}

/* 名称 */
.sc-name {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--shortcut-name-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-row.is-unbound .sc-name {
    color: var(--shortcut-name-unbound-text);
}

.sc-conflict-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--shortcut-conflict-dot-bg);
    box-shadow: var(--shortcut-conflict-dot-shadow);
}

/* 右侧按钮组 */
.sc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* combo 按钮 */
.sc-combo {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 110px;
    height: 26px;
    padding: 0 8px;
    background: var(--shortcut-combo-bg);
    border: var(--shortcut-combo-border);
    border-radius: var(--shortcut-combo-radius);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    font: inherit;
    color: var(--shortcut-combo-text);
}
.sc-combo:hover {
    border-color: var(--shortcut-combo-hover-border);
    background: var(--shortcut-combo-hover-bg);
}
.sc-row.is-capturing .sc-combo {
    min-width: 200px;
    border-color: var(--shortcut-combo-capturing-border);
    background: var(--shortcut-combo-capturing-bg);
    animation: sc-pulse 1.4s ease-in-out infinite;
}
@keyframes sc-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--shortcut-combo-capturing-pulse); }
    50%       { box-shadow: 0 0 0 4px transparent; }
}

/* 单个键帽 */
.sc-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    margin: 0 1px;
    font-size: 10.5px;
    font-weight: 600;
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'Microsoft YaHei', monospace;
    color: var(--shortcut-key-text);
    background: var(--shortcut-key-bg);
    border: var(--shortcut-key-border);
    border-radius: var(--shortcut-key-radius);
    line-height: 1;
}
.sc-row.is-capturing .sc-key { display: none; }

.sc-empty {
    font-size: 11.5px;
    color: var(--shortcut-empty-text);
    font-style: italic;
}

.sc-capturing {
    font-size: 11.5px;
    color: var(--shortcut-capturing-text);
    font-weight: 600;
}
.sc-capturing .sc-hint {
    margin-left: 6px;
    font-weight: 500;
    color: var(--shortcut-capturing-hint);
}

/* 清空按钮 */
.sc-clear {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    color: var(--shortcut-clear-text);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s ease, background .15s ease;
}
.sc-clear:hover {
    color: var(--shortcut-clear-hover-text);
    background: var(--shortcut-clear-hover-bg);
}

.sc-empty-tip {
    padding: 32px 16px;
    text-align: center;
    color: var(--shortcut-empty-text);
    font-size: 12.5px;
}

/* ===== 滚动条（与说明窗口风格一致：4px / 透明 track / line-strong thumb / 4px 圆角） =====
   选择器作用于 settings-modal 在 shortcuts tab 激活时的 settings-body，
   不影响其他 tab 的滚动条。 */
#settings-modal .settings-card.shortcuts-active .settings-body::-webkit-scrollbar {
    width: 4px;
}
#settings-modal .settings-card.shortcuts-active .settings-body::-webkit-scrollbar-track {
    background: var(--shortcut-scrollbar-track);
    border-radius: 4px;
}
#settings-modal .settings-card.shortcuts-active .settings-body::-webkit-scrollbar-thumb {
    background: var(--shortcut-scrollbar-thumb);
    border-radius: 4px;
}

/* shortcuts tab 激活时的卡片高度（宽度沿用 .settings-card 默认值） */
#settings-modal .settings-card.shortcuts-active .settings-body {
    max-height: min(560px, 70vh);
}