/* ==========================================================================
   登录页 / 用户管理 / 鉴权相关提示的样式。

   单独一个文件，不往 style.css 里追加——那份由 .workbuddy/tools/tokenize_css.py
   生成，它按「主题令牌层 → 组件规则」切分并重写，混进去容易被下次重跑搞乱。
   颜色一律引用 style.css 里的主题令牌，所以深浅色自动跟随，不需要重复两套。
   ========================================================================== */

/* ---------- 导航栏：当前用户 / 退出 ---------- */

.nav-user {
    margin-left: auto;          /* 和 .theme-toggle 抢右侧空间，两者配合见下方覆盖 */
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    flex-shrink: 0;
}

/* 原来 .theme-toggle 自带 margin-left:auto；现在右侧多了用户区，
   改成固定间距，否则两个 auto 会平分空间、把两块挤开 */
.navbar .theme-toggle {
    margin-left: 12px;
}

.nav-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.nav-user-role {
    font-size: 11px;
    line-height: 1.7;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    white-space: nowrap;
}

.nav-logout {
    margin: 0;
}

.nav-logout .btn-small {
    background: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-muted);
}

.nav-logout .btn-small:hover {
    background: var(--color-surface-3);
    color: var(--color-text);
}

/* ---------- 轻提示（登录过期、无权限、保存成功） ---------- */

.centra-toast-box {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10001;             /* 高于 modal-overlay(10000)，弹窗里的操作也能提示 */
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.centra-toast {
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.18);
    transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}

.centra-toast-ok {
    border-color: var(--color-success);
    color: var(--color-success);
}

.centra-toast-err {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.centra-toast-out {
    opacity: 0;
    transform: translateY(-6px);
}

/* ---------- 登录页 ---------- */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--color-bg);
}

.auth-card {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 32px 28px 28px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.1);
}

.auth-head {
    text-align: center;
    margin-bottom: 2px;
}

.auth-logo {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-accent);
}

.auth-sub {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--color-faint);
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-muted);
}

.auth-field input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out);
}

.auth-field input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.auth-error {
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 8px;
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.auth-submit {
    width: 100%;
    padding: 11px;
    margin-top: 2px;
    font-size: 14px;
    border-radius: 8px;         /* 覆盖 .btn 的胶囊圆角：登录按钮做成矩形更稳 */
}

/* ---------- 个人设置（修改密码，所有角色可用） ---------- */

/* 导航栏的「修改密码」链接，外观与旁边「退出」按钮一致 */
a.nav-me-link {
    background: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-muted);
    text-decoration: none;
    display: inline-block;
}

a.nav-me-link:hover {
    background: var(--color-surface-3);
    color: var(--color-text);
}

.me-wrap {
    display: flex;
    justify-content: center;
    padding: 48px 16px;
}

.me-card {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    padding: 28px 26px 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.1);
}

.me-card h3 {
    margin: 0 0 4px;
    font-size: 18px;
    color: var(--color-text);
}

.me-info {
    font-size: 13px;
    color: var(--color-muted);
    margin: 0 0 16px;
}

/* ---------- 用户管理页 ---------- */

.user-modal {
    width: 440px;
    max-width: calc(100vw - 32px);
}

/* 自绘角色下拉：原生 select 的弹出列表是 OS 渲染的，CSS 够不着，
   要贴合主题只能整个自己画。值仍存在隐藏的 select 里，样式层只管显示。 */
.combo {
    position: relative;
    max-width: 420px;
}

.combo-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 34px;                 /* 与 .account-form input 等高 */
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
}

.combo-toggle:focus-visible,
.combo.open .combo-toggle {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.combo-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--color-muted);
    transition: transform 0.16s var(--ease-out);
    flex-shrink: 0;
}

.combo.open .combo-arrow {
    transform: rotate(180deg);
}

.combo-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;                  /* 只需压过弹窗内部其他元素 */
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.18);
}

.combo-option {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-text);
    cursor: pointer;
    outline: none;
}

.combo-option:hover,
.combo-option:focus {
    background: var(--color-surface-3);
}

.combo-option.is-selected {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
}

/* 选项里不再放长文案，说明挪到下拉框正下方的小字，跟随选中项变化 */
.u-role-hint {
    margin-top: 6px;
    max-width: 420px;
}

.badge-admin {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.badge-on {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.u-time {
    font-size: 12.5px;
    color: var(--color-muted);
}

.u-muted {
    color: var(--color-faint);
}

.u-ops {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

/* .btn-small 默认是无边框的浅底样式，放在白底表格里几乎看不出是按钮，
   这里补上描边——用户管理页的操作列需要一眼看出「这三个能点」 */
.u-ops .btn-small {
    padding: 5px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
}

.u-ops .btn-small:hover:not(:disabled) {
    background: var(--color-surface-3);
    color: var(--color-text);
}

.u-ops .btn-small:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.u-danger {
    color: var(--color-danger);
}

.u-danger:hover:not(:disabled) {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger);
}