/* ============================================================
   admin.css — khu quản trị (IIG CMS). Màu cam/đỏ/vàng/trắng.
   ============================================================ */

:root {
  --orange:      #ff6a00;
  --orange-dark: #e85c00;
  --red:         #e4002b;
  --red-dark:    #c00024;
  --yellow:      #ffc107;
  --ink:         #241a12;
  --muted:       #6f6157;
  --line:        #e7ded5;
  --bg:          #f6f2ee;
  --white:       #ffffff;
  --radius:      12px;
  --grad-warm:   linear-gradient(120deg, var(--red) 0%, var(--orange) 60%, var(--yellow) 100%);
  --shadow:      0 4px 16px rgba(0,0,0,.06);
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--orange-dark); }

.admin { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar { background: var(--ink); color: #e7ddd3; display: flex; flex-direction: column; }
.sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand img { height: 40px; background: var(--white); border-radius: 8px; padding: .2rem; }
.sidebar-brand strong { color: var(--white); font-size: 1rem; line-height: 1.1; }
.sidebar-brand span { color: var(--yellow); font-size: .72rem; }
.sidebar nav { padding: .6rem .55rem; display: grid; gap: .1rem; }
.sidebar nav a {
  display: flex; align-items: center; gap: .55rem; padding: .48rem .75rem; border-radius: 9px;
  color: #e7ddd3; font-weight: 600; font-size: .87rem; line-height: 1.3;
}
.sidebar nav a .ic { width: 18px; text-align: center; font-size: .92em; }
.sidebar nav a:hover { background: rgba(255,255,255,.08); color: var(--white); }
.sidebar nav a.active { background: var(--grad-warm); color: var(--white); }

/* ── Menu dạng cây: mỗi nhóm gập/mở ── */
.nav-group { margin-top: .15rem; }
.nav-group .group-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer; font: inherit;
  color: #9a8b7d; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  padding: .55rem .75rem .3rem; text-align: left;
}
.nav-group:first-of-type .group-toggle { padding-top: .3rem; }
.nav-group .group-toggle:hover { color: #c9bcae; }
.nav-group .group-toggle .chev { font-size: .75rem; transition: transform .15s ease; }
.nav-group.open .group-toggle .chev { transform: rotate(180deg); }
.nav-group .group-body { display: none; gap: .1rem; }
.nav-group.open .group-body { display: grid; }
.nav-group.active-group .group-toggle { color: var(--orange); }

/* ── Main ── */
.admin-main { display: flex; flex-direction: column; min-width: 0; }
.topbar-admin {
  background: var(--white); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; padding: .7rem 1.3rem; position: sticky; top: 0; z-index: 20;
}
.topbar-admin h1 { font-size: 1.15rem; margin: 0; }
.topbar-admin .spacer { margin-inline-start: auto; }
.topbar-admin .user { color: var(--muted); font-size: .9rem; }
.sidebar-toggle { display: none; border: 1px solid var(--line); background: var(--white); border-radius: 8px; padding: .4rem .6rem; font-size: 1.1rem; cursor: pointer; }

.content { padding: 1.4rem; }

/* ── Cards / stat ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.stat {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.stat::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--grad-warm); }
.stat .n { font-size: 1.9rem; font-weight: 800; color: var(--red); }
.stat .l { color: var(--muted); font-size: .88rem; }

.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 1.05rem; margin: 0; }
.panel-head .spacer { margin-inline-start: auto; }
.panel-body { padding: 1.2rem; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.05rem; border-radius: 10px;
  border: none; cursor: pointer; font-weight: 700; font-size: .9rem; font-family: inherit; line-height: 1;
}
.btn-primary { background: var(--grad-warm); color: var(--white); }
.btn-primary:hover { color: var(--white); filter: brightness(1.04); }
.btn-light { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.btn-light:hover { background: #efe7df; }
.btn-danger { background: #fdeaea; color: var(--red-dark); border: 1px solid #f2c4c4; }
.btn-danger:hover { background: #fbdada; }
.btn-sm { padding: .4rem .7rem; font-size: .82rem; border-radius: 8px; }

/* ── Table ── */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th, table.data td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data th { background: var(--bg); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
table.data tr:hover td { background: #fffaf5; }
table.data .thumb-cell img { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; }
.actions-cell { display: flex; gap: .4rem; white-space: nowrap; }

/* ── Chip filter (lọc theo loại / trạng thái) ── */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.chip {
  display: inline-flex; align-items: center; padding: .38rem .85rem; border-radius: 999px;
  background: var(--bg); border: 1.5px solid var(--line); color: var(--ink);
  font-size: .84rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.chip:hover { border-color: var(--orange); color: var(--orange-dark); background: #fff3ea; }
.chip.active { background: var(--grad-warm); border-color: transparent; color: var(--white); }
.chip.active:hover { color: var(--white); }
.chip-select {
  padding: .4rem .6rem; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: .82rem; font-weight: 600; font-family: inherit;
}

/* ── Badge ── */
.badge { display: inline-block; padding: .22rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.badge-moi { background: #fff2d6; color: #9a6b00; }
.badge-da_lien_he { background: #e3f0ff; color: #1c5fb0; }
.badge-da_tu_van { background: #f0e6ff; color: #6b3fb0; }
.badge-hoc_vien { background: #e6f7ea; color: #1a7f37; }
.badge-hoan_thanh { background: #e6f7ea; color: #1a7f37; }
.badge-huy { background: #fdeaea; color: var(--red-dark); }
.badge-published { background: #e6f7ea; color: #1a7f37; }
.badge-draft { background: #eee7df; color: var(--muted); }
.badge-on { background: #e6f7ea; color: #1a7f37; }
.badge-off { background: #eee7df; color: var(--muted); }

/* ── Forms ── */
.form-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
.form-2col { grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-weight: 700; font-size: .9rem; }
.field .req { color: var(--red); }
.field .hint { color: var(--muted); font-size: .82rem; }
.field input[type=text], .field input[type=email], .field input[type=url], .field input[type=number],
.field input[type=password], .field input[type=date], .field select, .field textarea {
  padding: .65rem .75rem; border: 1.5px solid var(--line); border-radius: 9px; font: inherit; background: var(--white); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,106,0,.15);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.field .err { color: var(--red); font-size: .84rem; }
.field textarea { min-height: 140px; resize: vertical; }
.check { display: flex; align-items: center; gap: .5rem; }
.check input { width: 18px; height: 18px; accent-color: var(--orange); }
.form-actions { display: flex; gap: .6rem; margin-top: 1.2rem; }

.thumb-preview { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* ── Flash ── */
.flash { padding: .85rem 1.1rem; border-radius: 10px; margin-bottom: 1.2rem; font-weight: 600; }
.flash-success { background: #e6f7ea; color: #1a7f37; border: 1px solid #b7e4c4; }
.flash-error { background: #fdeaea; color: var(--red-dark); border: 1px solid #f2c4c4; }

/* ── Media library ── */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.media-item { background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.media-item .frame { aspect-ratio: 1; background: var(--bg); }
.media-item .frame img { width: 100%; height: 100%; object-fit: cover; }
.media-item .meta { padding: .5rem .6rem; font-size: .75rem; color: var(--muted); word-break: break-all; }
.media-item .row { display: flex; gap: .3rem; padding: 0 .6rem .6rem; }
.copy-input { width: 100%; font-size: .72rem; padding: .3rem; border: 1px solid var(--line); border-radius: 6px; }

.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }

/* ── Hướng dẫn sử dụng (wiki) ── */
.wiki-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 1.6rem; align-items: start; }
.wiki-toc { position: sticky; top: 74px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; max-height: calc(100vh - 100px); overflow-y: auto; }
.wiki-toc-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .5rem; font-weight: 700; }
.wiki-toc nav { display: grid; gap: .1rem; }
.wiki-toc nav a { display: block; padding: .4rem .55rem; border-radius: 8px; font-size: .85rem; color: var(--ink); }
.wiki-toc nav a:hover { background: var(--bg); color: var(--orange-dark); }
.wiki-content { min-width: 0; }
.wiki-section { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.5rem; margin-bottom: 1.2rem; scroll-margin-top: 84px; }
.wiki-section h2 { color: var(--red); font-size: 1.1rem; margin: 0 0 .8rem; }
.wiki-body p { margin: 0 0 .7rem; }
.wiki-body ul { margin: 0 0 .4rem; padding-inline-start: 1.3rem; }
.wiki-body li { margin-bottom: .4rem; }
.wiki-body ul ul { margin-top: .4rem; }
.wiki-body code { background: var(--bg); padding: .1rem .4rem; border-radius: 5px; font-size: .88em; }
@media (max-width: 880px) {
  .wiki-wrap { grid-template-columns: 1fr; }
  .wiki-toc { position: static; max-height: none; }
}

/* ── Login ── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--grad-warm); padding: 1rem; }
.login-card { background: var(--white); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); padding: 2rem; width: 100%; max-width: 380px; }
.login-card .logo { text-align: center; margin-bottom: 1.2rem; }
.login-card .logo img { height: 60px; margin-inline: auto; }
.login-card h1 { text-align: center; font-size: 1.3rem; margin: 0 0 1.4rem; }
.login-card .btn-primary { width: 100%; justify-content: center; padding: .8rem; }

/* ── Responsive ── */
@media (max-width: 880px) {
  .admin { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: 250px; transform: translateX(-100%); transition: transform .2s ease; z-index: 60; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: inline-block; }
  .form-2col { grid-template-columns: 1fr; }
}