/* =========================================================
   静态工具类样式表（替代 Tailwind CSS Play CDN / tailwind.js）
   ---------------------------------------------------------
   tailwind.js 是 407KB 的浏览器端 JIT 编译器，需要在每次页面加载时
   解析 DOM 才能生成样式：首屏阻塞、白屏闪烁、CPU 占用高。
   本项目用到的 utility class 已在此静态列出（约 4KB，可长期缓存），
   加载即用，无需 JS。

   层叠定位（重要）
   ---------------------------------------------------------
   本文件在 partials/header.php 中 **最先** 加载，style.css **最后** 加载，
   因此这里的所有规则优先级都低于 style.css 中的同名 / 同权重规则，
   不会覆盖业务样式。请不要在本文件里写业务配色。

   颜色一律引用 style.css 中 :root 的设计 token，并保留原值作为兜底，
   这样即使 style.css 缺失也不会出现"按钮全灰"的情况，
   同时保证全站只有一处（style.css :root）定义真实色值。

   维护规则：如果模板里新增了 Tailwind 工具类（例如 mt-2 / grid / w-full），
   必须在本文件补上对应规则，否则该类不生效。
   ========================================================= */

/* ---------- 1. 基础重置（等价 Tailwind preflight 的必要子集） ---------- */
*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--c-border, #e5e7eb);
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    line-height: 1.15;
    tab-size: 4;
}

body {
    margin: 0;
    line-height: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

blockquote, dl, dd, figure, pre { margin: 0; }

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button, select { text-transform: none; }

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
    appearance: button;
    background-color: transparent;
    background-image: none;
}

button, [role="button"] { cursor: pointer; }

:-moz-focusring { outline: auto; }

progress { vertical-align: baseline; }

summary { display: list-item; }

table {
    border-color: inherit;
    border-collapse: collapse;
}

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1em;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}

img, video {
    max-width: 100%;
    height: auto;
}

input::placeholder,
textarea::placeholder {
    color: var(--c-text-muted, #9ca3af);
    opacity: 1;
}

/* ---------- 2. 工具类（项目模板中实际使用到的） ---------- */

/* display */
.flex { display: flex; }
.hidden { display: none; }

/* position */
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* flex 布局 */
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.min-w-0 { min-width: 0; }

/* 尺寸 */
.h-4 { height: 1rem; }
.h-8 { height: 2rem; }
.h-screen { height: 100vh; }
.h-\[60px\] { height: 60px; }
.w-5 { width: 1.25rem; }
.w-8 { width: 2rem; }
.w-\[240px\] { width: 240px; }

/* 外边距 */
.ml-2 { margin-left: 0.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-4 { margin-right: 1rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-y-1 > * + * { margin-top: 0.25rem; }

/* 内边距 */
.p-4 { padding: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

/* 文字（字号 / 字重为纯布局属性，颜色接 token） */
.text-center { text-align: center; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: var(--text-lg, 1.125rem); line-height: 1.75rem; }
.text-xl { font-size: var(--text-xl, 1.25rem); line-height: 1.75rem; }
.font-medium { font-weight: 500; }
.text-white { color: var(--c-surface, #ffffff); }
.text-gray-400 { color: var(--c-sidebar-muted, #9ca3af); }
.text-gray-600 { color: var(--c-text-secondary, #4b5563); }
.text-gray-800 { color: var(--c-text, #1f2937); }
.text-primary { color: var(--c-primary, #2563eb); }

/* 背景 */
.bg-white { background-color: var(--c-surface, #ffffff); }
.bg-gray-100 { background-color: var(--c-bg, #f1f5f9); }
.bg-gray-500 { background-color: var(--c-sidebar-hover, #6b7280); }
.bg-sidebar { background-color: var(--c-sidebar, #1e293b); }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
.bg-primary\/20 { background-color: var(--c-sidebar-active, rgba(37, 99, 235, .22)); }

/* 边框 / 圆角 / 阴影 */
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border-gray-700 { border-color: var(--c-sidebar-border, #374151); }
.rounded { border-radius: 0.25rem; }
.rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }

/* 溢出 */
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

/* 位移（移动端侧边栏收起） */
.-translate-x-full { transform: translateX(-100%); }

/* hover 态（放在基础类之后，保证优先级） */
.hover\:text-primary:hover { color: var(--c-primary, #2563eb); }
.hover\:text-white:hover { color: var(--c-surface, #ffffff); }
.hover\:bg-gray-700:hover { background-color: var(--c-sidebar-hover, #374151); }

/* ---------- 3. 项目自定义工具类（原 @layer utilities） ---------- */
/* 文本不换行，超出省略 */
.text-ellipsis-nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 侧边栏过渡动画 */
.sidebar-transition {
    transition: width 0.3s ease, transform 0.3s ease;
}
/* 禁止页面滚动（移动端侧边栏打开） */
.body-lock {
    overflow: hidden;
}

/* ---------- 4. 响应式变体（必须位于基础类之后） ---------- */
/* ≥640px */
@media (min-width: 640px) {
    .sm\:block { display: block; }
}

/* ≥768px */
@media (min-width: 768px) {
    .md\:block { display: block; }
    .md\:hidden { display: none; }
    .md\:sticky { position: sticky; }
    .md\:flex-row { flex-direction: row; }
    .md\:p-6 { padding: 1.5rem; }
    .md\:w-\[220px\] { width: 220px; }
    .md\:translate-x-0 { transform: translateX(0); }
}