/* ==========================================================================
   clacky 像素风主题（覆盖 Authelia 登录页）
   配色：暗绿黑底 #0c0f0c + 荧光绿 #33ff33，全方角、硬阴影、Silkscreen 字体
   ========================================================================== */

/* ---- 像素字体 ---- */
@font-face {
    font-family: 'Silkscreen';
    src: url('/assets/fonts/silkscreen-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Silkscreen';
    src: url('/assets/fonts/silkscreen-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---- 覆盖 Authelia 的 shadcn 风格设计变量 ---- */
:root,
.dark,
[data-theme="dark"] {
    --background: #0c0f0c;
    --foreground: #33ff33;
    --card: #0c0f0c;
    --card-foreground: #33ff33;
    --popover: #0c0f0c;
    --popover-foreground: #33ff33;
    --primary: #33ff33;
    --primary-foreground: #0c0f0c;
    --secondary: #143314;
    --secondary-foreground: #33ff33;
    --muted: #0a2a0a;
    --muted-foreground: #33ff33;
    --accent: #143314;
    --accent-foreground: #33ff33;
    --destructive: #ff3355;
    --destructive-foreground: #0c0f0c;
    --border: #33ff33;
    --input: #33ff33;
    --ring: #33ff33;
    --radius: 0px;
    --radius-xs: 0px;
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --font-sans: 'Silkscreen', 'Courier New', monospace;
    --font-mono: 'Silkscreen', 'Courier New', monospace;
}

/* ---- 全局：全方角 + 像素字体 ---- */
* {
    border-radius: 0 !important;
    text-shadow: none !important;
    font-family: 'Silkscreen', 'Courier New', monospace !important;
}

html,
body {
    background: #0c0f0c !important;
    color: #33ff33 !important;
}

/* ---- 输入框 ---- */
input,
textarea,
select {
    border: 2px solid #33ff33 !important;
    background: #0c0f0c !important;
    color: #33ff33 !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6) !important;
    caret-color: #33ff33 !important;
}
input:focus,
textarea:focus,
select:focus {
    box-shadow: 3px 3px 0 #33ff33 !important;
    outline: none !important;
}

/* ---- 按钮 ---- */
button {
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7) !important;
}

/* 主按钮 */
button[type="submit"] {
    background: #33ff33 !important;
    color: #0c0f0c !important;
    border: 2px solid #33ff33 !important;
    box-shadow: 4px 4px 0 #0a3d0a !important;
}
button[type="submit"]:hover {
    background: #66ff66 !important;
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 #0a3d0a !important;
}
button[type="submit"]:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 #0a3d0a !important;
}

/* ---- 卡片容器 ---- */
[class*="card"],
[class*="Card"],
[role="dialog"],
dialog {
    border: 2px solid #33ff33 !important;
    background: #0c0f0c !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.7) !important;
}

/* ---- 链接 ---- */
a {
    color: #33ff33 !important;
}

/* ---- 复选框 / 单选 ---- */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #33ff33 !important;
}

/* ---- 加载条 ---- */
[class*="loading"],
[class*="progress"] {
    background: #33ff33 !important;
}