/* Giao diện "Hiện đại" — chỉ nạp khi superuser chọn ở /manage/. Mọi quy tắc nằm dưới body.theme-modern. */
body.theme-modern {
  --page-bg: #afd562; /* giữ nền lime thương hiệu như giao diện Cổ điển */
  --radius: 20px;
  --radius-sm: 12px;
  --control-h: 44px;
  --card-border: rgba(46, 51, 138, .08);
  --border: #e3e8f4;
  --border-strong: #d3dbec;
  --surface-soft: #eef1fa;
  --shadow-card: 0 1px 2px rgba(16, 24, 64, .06), 0 6px 16px -6px rgba(30, 35, 117, .18);
  --shadow-md: 0 2px 4px rgba(16, 24, 64, .06), 0 10px 24px -8px rgba(30, 35, 117, .25);
  --focus-ring: 0 0 0 4px rgba(164, 205, 57, .35);
  --glass: rgba(255, 255, 255, .62);
  --blur: saturate(1.7) blur(18px);
  --side-w: 264px;
  background: var(--page-bg);
  letter-spacing: -.004em;
}
body.theme-modern ::selection { background: rgba(164, 205, 57, .45); }
html { scrollbar-width: thin; }

/* ---- Header (mobile / tablet): kính mờ ---- */
body.theme-modern > header {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  color: var(--brand-2);
  box-shadow: 0 1px 0 rgba(46, 51, 138, .08), 0 8px 24px -12px rgba(30, 35, 117, .25);
}
body.theme-modern .brand a, body.theme-modern .brand b { color: var(--brand-2); }
body.theme-modern .brand .subtitle { color: var(--text-muted); opacity: 1; }
body.theme-modern .user-pill { background: var(--surface-soft); color: var(--brand-2); border-color: transparent; box-shadow: none; }
body.theme-modern .logout-btn { background: transparent; color: var(--brand-2); border-color: var(--border-strong); }
body.theme-modern .logout-btn:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
body.theme-modern .nav a.login-link { color: var(--brand-2); border-color: var(--border-strong); }

/* ---- Sidebar nổi (desktop) ---- */
.mx-side, .mx-palette { display: none; }
@media (min-width: 1024px) {
  body.theme-modern.erg-authed { padding-left: calc(var(--side-w) + 28px); }
  body.theme-modern.erg-authed > header { display: none; }
  body.theme-modern.erg-authed .flash-stack { margin-top: 20px; }
  body.theme-modern.erg-authed .directory-wrapper { height: calc(100vh - 44px); }
  body.theme-modern.erg-authed .side-sticky { top: 20px; }
  .mx-side {
    display: flex; flex-direction: column; gap: 14px;
    position: fixed; z-index: 120; top: 14px; left: 14px; bottom: 14px; width: var(--side-w);
    padding: 16px 12px 12px;
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 26px;
    box-shadow: var(--shadow-md);
  }
  .mx-brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px; text-decoration: none; color: var(--brand-2); }
  .mx-brand:hover { text-decoration: none; }
  .mx-logo { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
  .mx-brand b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
  .mx-brand small { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
  .mx-search {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, .8);
    color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; text-align: left;
    transition: border-color .15s, box-shadow .15s;
  }
  .mx-search:hover { border-color: var(--brand); box-shadow: var(--focus-ring); }
  .mx-search svg { width: 16px; height: 16px; flex-shrink: 0; }
  .mx-search kbd { margin-left: auto; font: inherit; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--surface-soft); color: var(--brand-2); }
  .mx-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; }
  .mx-group { margin: 12px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a93b5; }
  .mx-group:first-child { margin-top: 2px; }
  .mx-nav a, .mx-link {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px; border: 0; border-radius: 14px; background: transparent;
    color: #3b4270; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; text-align: left;
    transition: background .15s, color .15s, transform .15s;
  }
  .mx-nav svg { width: 20px; height: 20px; flex-shrink: 0; opacity: .85; }
  .mx-nav a:hover, .mx-link:hover { background: rgba(46, 51, 138, .07); color: var(--brand-2); text-decoration: none; }
  .mx-nav a.is-active { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 8px 18px -8px rgba(30, 35, 117, .6); }
  .mx-nav a.is-active svg { opacity: 1; }
  .mx-nav a.is-active::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
  .mx-badge { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; text-align: center; line-height: 18px; }
  .mx-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 18px; background: var(--surface-soft); }
  .mx-user form { margin: 0; margin-left: auto; }
  .mx-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--accent-ink); background: var(--accent); overflow: hidden; }
  .mx-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
  .mx-who { min-width: 0; line-height: 1.25; }
  .mx-who b, .mx-who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mx-who b { font-size: 13px; color: var(--brand-2); }
  .mx-who small { font-size: 11px; color: var(--text-muted); }
  .mx-out { width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .mx-out svg { width: 18px; height: 18px; }
  .mx-out:hover { background: var(--danger); color: #fff; }
  body.theme-modern.erg-authed #floatingBackBtn { left: calc(var(--side-w) + 34px); width: 48px; height: 48px; border-color: transparent; box-shadow: var(--shadow-md); }
  /* Sidebar đã có đủ các mục điều hướng: menu chuông chỉ còn Thông báo + Bật thông báo/Cài app */
  body.theme-modern.erg-authed .balloon-links > a:not(#menuPushBtn):not(#menuInstallAppBtn),
  body.theme-modern.erg-authed .balloon-links > .erg-menu-divider { display: none; }
  /* Chuông nổi không cần nữa: đã có mục Thông báo trong sidebar (vẫn giữ để mở bảng) */
  body.theme-modern.erg-authed #balloonToggle { width: 48px; height: 48px; }
}

/* ---- Tìm nhanh (Ctrl+K) ---- */
body.theme-modern .mx-palette:not([hidden]) {
  display: flex; position: fixed; inset: 0; z-index: 10000002; align-items: flex-start; justify-content: center;
  padding: 14vh 16px 0; background: rgba(16, 24, 64, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mx-pal-box { width: min(560px, 100%); background: #fff; border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(16, 24, 64, .55); overflow: hidden; animation: mxPop .18s ease-out; }
.mx-pal-box input { display: block; width: 100%; height: 56px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--border); font: inherit; font-size: 16px; outline: none; box-shadow: none !important; border-radius: 0 !important; }
.mx-pal-box ul { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow-y: auto; }
.mx-pal-box li { padding: 11px 14px; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 600; color: #3b4270; }
.mx-pal-box li.on { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.mx-pal-box ul.loading { opacity: .55; transition: opacity .15s; }
.mx-pal-box li.none { color: var(--text-muted); cursor: default; background: none; }
.mx-pal-box li.res { display: grid; gap: 2px; font-weight: 400; }
.mx-pal-box li.res b { font-size: 14px; font-weight: 700; line-height: 1.35; }
.mx-pal-box li.res small { font-size: 12px; opacity: .7; }
.mx-pal-box li.res span { font-size: 13px; line-height: 1.45; opacity: .85; overflow-wrap: anywhere; }
.mx-pal-box mark { background: rgba(164, 205, 57, .55); color: inherit; border-radius: 4px; padding: 0 2px; }
.mx-pal-box li.on mark { background: #c8ea63; color: #1e2375; }
@keyframes mxPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- Nội dung ---- */
@media (prefers-reduced-motion: reduce) { .mx-pal-box { animation: none; } }

body.theme-modern.erg-authed main .card,
body.theme-modern.erg-authed main .post-card,
body.theme-modern.erg-authed main .erg-card,
body.theme-modern.erg-authed main .section-card,
body.theme-modern.erg-authed main .priority-card,
body.theme-modern.erg-authed main .list .row,
body.theme-modern.erg-authed main .filter,
body.theme-modern.erg-authed main .panel,
body.theme-modern.erg-authed main .compact {
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
}
body.theme-modern.erg-authed main .modal-content { border-radius: 24px; }
body.theme-modern.erg-authed main .filter { border-top-width: 1px; }
body.theme-modern.erg-authed main .filter summary { background: transparent; }

/* Tiêu đề thẻ ở trang quản lý: bỏ nền navy đặc, dùng chữ navy + vạch lime */
body.theme-modern.erg-authed main .card-title,
body.theme-modern.erg-authed main .card > h2,
body.theme-modern.erg-authed main .section-header {
  background: transparent;
  color: var(--brand-2);
  font-weight: 800;
  letter-spacing: -.005em;
  border-bottom: 1px solid var(--border);
  position: relative;
}
/* Vạch lime dùng inset shadow (không dùng ::before vì làm lệch flex space-between) */
body.theme-modern.erg-authed main .card-title,
body.theme-modern.erg-authed main .card > h2 { box-shadow: inset 4px 0 0 var(--accent); }
body.theme-modern.erg-authed main .btn-warning { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }
/* Nút/link trong tiêu đề thẻ từng được viết trắng-trên-navy: đổi sang nút sáng cho đọc được */
body.theme-modern.erg-authed main .card-title [style*="255,255,255"],
body.theme-modern.erg-authed main .card-title [style*="255, 255, 255"],
body.theme-modern.erg-authed main .card-title [style*="color: white"],
body.theme-modern.erg-authed main .card-title [style*="color:#fff"] { background: #fff !important; color: var(--brand-2) !important; border-color: var(--border-strong) !important; }
body.theme-modern.erg-authed main .card-title svg { color: var(--brand); }
body.theme-modern.erg-authed main .card > h2 { padding-left: 20px; }

body.theme-modern .erg-page-title, body.theme-modern.erg-authed main h1 { letter-spacing: -.02em; font-weight: 800; color: var(--brand-2); }

/* Nút */
body.theme-modern.erg-authed main .btn,
body.theme-modern.erg-authed main .btn-create,
body.theme-modern.erg-authed main .btn-ghost,
body.theme-modern.erg-authed main .btn-action,
body.theme-modern .erg-btn { border-radius: 12px; }
body.theme-modern.erg-authed main .btn-primary,
body.theme-modern.erg-authed main .btn-create,
body.theme-modern.erg-authed main .btn-publish,
body.theme-modern.erg-authed main .btn:not([class*="btn-"]),
body.theme-modern .erg-btn-primary {
  background: linear-gradient(135deg, #3a40a8, var(--brand-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(30, 35, 117, .65);
}
body.theme-modern.erg-authed main .btn-primary:hover,
body.theme-modern.erg-authed main .btn-create:hover,
body.theme-modern.erg-authed main .btn-publish:hover { filter: brightness(1.08); box-shadow: 0 12px 24px -8px rgba(30, 35, 117, .7); }

/* Ô nhập */
body.theme-modern.erg-authed main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]),
body.theme-modern.erg-authed main select,
body.theme-modern.erg-authed main textarea {
  border-color: var(--border-strong);
  background-color: rgba(255, 255, 255, .92);
  border-radius: 12px;
}
body.theme-modern.erg-authed main input:focus,
body.theme-modern.erg-authed main select:focus,
body.theme-modern.erg-authed main textarea:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }

/* Bảng */
body.theme-modern.erg-authed main table th { background: #f6f8fd; color: #6b7499; letter-spacing: .05em; }
body.theme-modern.erg-authed main tbody tr:hover td { background: #f5f7ff; }

/* Thẻ feed */
body.theme-modern .card-title, body.theme-modern .list .title, body.theme-modern .priority-title { color: var(--brand-2); letter-spacing: -.01em; }
body.theme-modern .type-pill { background: rgba(164, 205, 57, .22); color: var(--accent-ink); }
body.theme-modern .badge-priority { background: linear-gradient(135deg, #ef4444, #b91c1c); }
body.theme-modern .view-toggle button { border-radius: 12px; }
body.theme-modern .view-toggle button.active { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }

/* Bình luận */
body.theme-modern .c-bubble { background: #f1f4fb; }
body.theme-modern .c-avatar { background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(164, 205, 57, .6); }
body.theme-modern .comment-form .btn-like { background: linear-gradient(135deg, #3a40a8, var(--brand-2)); }
body.theme-modern .react-pop.is-mine .react-face { background: rgba(164, 205, 57, .22); border-color: rgba(164, 205, 57, .8); }
body.theme-modern .react-pop.is-mine .react-face b { color: var(--accent-ink); }

/* Flash */
body.theme-modern .flash { border-radius: 16px; border-width: 0; box-shadow: var(--shadow-card); background-color: #fff; }

/* Chuông nổi */
body.theme-modern #balloonToggle { box-shadow: 0 14px 30px -10px rgba(30, 35, 117, .65); }
body.theme-modern .balloon-menu { border-radius: 22px; }

/* ---- Mobile: thanh tab nổi ---- */
@media (max-width: 640px) {
  body.theme-modern.erg-authed { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  body.theme-modern .erg-tabbar {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); min-height: 62px; padding-bottom: 0;
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid rgba(255, 255, 255, .8); border-radius: 26px; box-shadow: var(--shadow-md);
    padding: 6px;
  }
  body.theme-modern .erg-tab { border-radius: 20px; font-weight: 700; }
  body.theme-modern .erg-tab.is-active, body.theme-modern .erg-tab.is-open { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
  body.theme-modern .erg-tab.is-active::before, body.theme-modern .erg-tab.is-open::before { display: none; }
  /* Khi menu/thông báo đang mở, chỉ tab đang mở được tô đậm (tránh 2 tab cùng sáng) */
  body.theme-modern .erg-tabbar:has(.is-open) .erg-tab.is-active:not(.is-open) { background: transparent; color: var(--text-muted); }
  body.theme-modern #quickBalloon { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; width: auto; }
  body.theme-modern .balloon-menu { border-radius: 24px; }
}

/* Trình duyệt không hỗ trợ blur: dùng nền đặc để vẫn đọc được */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.theme-modern { --glass: rgba(255, 255, 255, .96); }
}