/* Bản sao từ repo quanlythoigian (public/theme.css): giữ hai bản giống nhau khi sửa giao diện chung. */
/* iforgotmywayhome: bộ giao diện chung cho trang quản trị, web app, điều khoản (và trang quản lý của PyloS).
   Phong cách kiến trúc cổ đại: khối đá xám pha màu pastel, hoa văn meander, nút như cột đá, tiêu đề như dải frieze.
   Nền tối là mặc định (không theo hệ điều hành); <html data-theme="light"> để chuyển sang nền sáng (xem theme.js). */

/* Font tự lưu trong web (giấy phép OFL, xem fonts/OFL.txt). Cinzel không có dấu tiếng Việt nên chỉ dùng cho tên web. */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/cinzel-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-vietnamese-600-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/be-vietnam-pro-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/be-vietnam-pro-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/be-vietnam-pro-vietnamese-500-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/be-vietnam-pro-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/be-vietnam-pro-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/be-vietnam-pro-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/be-vietnam-pro-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Cormorant Garamond', 'Be Vietnam Pro', Georgia, serif;
  --font-mark: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Nền tối: đá bazan */
  --bg: #1d1f24;
  --bg-deep: #17191d;
  --surface: #2a2d34;
  --surface-2: #353943;
  --field: #1d1f24;
  --border: #4a4f5a;
  --field-border: #7d838f;
  --text: #e7e2d8;
  --muted: #b3ada3;
  /* Pastel: xanh hồ, đất nung, oải hương, vàng đá, rêu. Dùng làm chữ được ở nền tối. */
  --lake: #a7c7c5;
  --terra: #e3b7a5;
  --lavender: #c3b8db;
  --gold: #e8d8a8;
  --moss: #b5c9a8;
  /* Màu chữ của từng màu nhấn (nền tối: chính màu pastel; nền sáng: bản đậm cho đủ tương phản) */
  --lake-ink: var(--lake);
  --terra-ink: var(--terra);
  --lavender-ink: var(--lavender);
  --gold-ink: var(--gold);
  --moss-ink: var(--moss);
  /* Vạch màu trang trí (lịch, ô ưu tiên…) */
  --lake-mark: var(--lake);
  --terra-mark: var(--terra);
  --lavender-mark: var(--lavender);
  --gold-mark: var(--gold);
  --moss-mark: var(--moss);
  --on-pastel: #1d1f24;

  --primary: var(--lake);
  --primary-text: var(--on-pastel);
  --primary-soft: color-mix(in srgb, var(--lake) 16%, transparent);
  --primary-cap: #7fa3a0;
  --link: var(--lake-ink);
  --ok: var(--moss-ink);
  --err: #eea898;
  --warn-bg: color-mix(in srgb, var(--gold) 16%, var(--surface));
  --warn-text: var(--gold-ink);

  --radius: 3px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 14px 30px -18px rgba(0, 0, 0, .8), 0 2px 4px rgba(0, 0, 0, .25);
  --stone: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .05));
  --meander-color: color-mix(in srgb, var(--gold) 55%, var(--border));
  color-scheme: dark;
}

:root[data-theme="light"] {
  /* Nền sáng: cẩm thạch */
  --bg: #f1eee8;
  --bg-deep: #e9e5dd;
  --surface: #e2ddd3;
  --surface-2: #d6d0c4;
  --field: #f7f5f0;
  --border: #b9b1a2;
  --field-border: #7c7466;
  --text: #2a2d34;
  --muted: #57534c;
  --lake-ink: #2f615e;
  --terra-ink: #8a4632;
  --lavender-ink: #574683;
  --gold-ink: #6b5714;
  --moss-ink: #41603a;
  --lake-mark: #6f9e9a;
  --terra-mark: #c27f68;
  --lavender-mark: #8f80b8;
  --gold-mark: #b8a15a;
  --moss-mark: #7f9c6f;
  --primary-cap: #6f9e9a;
  --primary-soft: color-mix(in srgb, var(--lake) 40%, transparent);
  --err: #9b3a2a;
  --warn-bg: color-mix(in srgb, var(--gold) 45%, var(--bg));
  --shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 24px -16px rgba(60, 50, 30, .45), 0 1px 2px rgba(60, 50, 30, .15);
  --stone: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(0, 0, 0, .02));
  --meander-color: color-mix(in srgb, var(--gold-mark) 70%, var(--border));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--text);
  background: radial-gradient(1200px 600px at 50% -200px, color-mix(in srgb, var(--surface) 70%, transparent), transparent), var(--bg);
  background-attachment: fixed;
}
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.2; font-variant-numeric: lining-nums; }
/* Cormorant mặc định dùng số kiểu cổ (0 trông như o): số trong font tiêu đề luôn dùng kiểu thẳng hàng */
.num-display { font-family: var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
h1 { font-size: 1.8rem; letter-spacing: .02em; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
code, pre, kbd { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--lake-ink); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--lavender) 45%, transparent); }

/* Dải frieze: chữ in hoa giãn rộng, gạch đôi bên dưới như mép dầm đá */
.frieze {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  font-size: .95rem; padding-bottom: 6px; border-bottom: 3px double var(--border);
}
.wordmark { font-family: var(--font-mark); font-weight: 600; letter-spacing: .06em; text-transform: lowercase; }

/* Hoa văn meander (Hy Lạp): chỉ ở đầu trang và giữa các phần */
.meander {
  height: 16px; flex: none; background: var(--meander-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='16'%20viewBox='0%200%2018%2016'%3E%3Cpath%20d='M0%20.75H18M0%2015.25H18M0%2012H3V3.5H14V10H7V6.5H10.5'%20fill='none'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='square'/%3E%3C/svg%3E") repeat-x left center / 18px 16px;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='16'%20viewBox='0%200%2018%2016'%3E%3Cpath%20d='M0%20.75H18M0%2015.25H18M0%2012H3V3.5H14V10H7V6.5H10.5'%20fill='none'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='square'/%3E%3C/svg%3E") repeat-x left center / 18px 16px;
}
hr.meander { border: 0; margin: 20px 0; }

/* Khối đá */
.card {
  background: var(--stone), var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px;
}

/* Nút như cột đá: đầu cột và chân cột là hai gờ rộng hơn thân */
.btn {
  position: relative; font: inherit; font-weight: 600; font-size: .9rem; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  padding: 8px 15px; margin: 3px 4px; border-radius: 1px; cursor: pointer; text-decoration: none;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  transition: background .15s, border-color .15s, color .15s;
}
.btn::before, .btn::after {
  content: ''; position: absolute; left: -4px; right: -4px; height: 3px; border-radius: 1px;
  background: var(--border); pointer-events: none;
}
.btn::before { top: -4px; }
.btn::after { bottom: -4px; }
.btn:hover { border-color: var(--field-border); background: color-mix(in srgb, var(--surface-2) 80%, var(--text) 8%); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary-cap); color: var(--primary-text); }
.btn.primary::before, .btn.primary::after { background: var(--primary-cap); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.terra { background: var(--terra); border-color: var(--terra-mark); color: var(--on-pastel); }
.btn.terra::before, .btn.terra::after { background: var(--terra-mark); }
.btn.danger { color: var(--err); }
.btn.ghost, .btn.icon { margin: 0; background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost::before, .btn.ghost::after, .btn.icon::before, .btn.icon::after { display: none; }
.btn.ghost:hover, .btn.icon:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.btn.ghost.danger { color: var(--err); }
.btn.sm { padding: 5px 10px; font-size: .82rem; }
.btn.icon { padding: 7px; }
.btn.block { display: flex; width: calc(100% - 8px); }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--field-border);
  border-radius: 2px; padding: 9px 12px; min-width: 0; max-width: 100%;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--lake-ink); outline-offset: -1px; border-color: transparent; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--lake-mark); flex: none; margin: 0; }

/* Nhãn màu pastel: trạng thái, qua lọc / bị chặn, thêm / sửa / xoá */
.badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 2px; white-space: nowrap; color: var(--on-pastel); background: var(--surface-2);
}
.badge.lake, .badge.create, .badge.reply { background: var(--lake); }
.badge.terra, .badge.delete, .badge.skip { background: var(--terra); }
.badge.lavender, .badge.agent, .badge.calbot { background: var(--lavender); }
.badge.gold, .badge.update, .badge.tool { background: var(--gold); }
.badge.moss, .badge.ok, .badge.message { background: var(--moss); }
.badge.muted { background: var(--surface-2); color: var(--muted); }

/* Nút sáng / tối */
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }

.temple { width: 26px; height: 26px; flex: none; color: var(--gold-ink); }