/* Admin Unified Design — match /nihongo/ frontend brand identity.
 *
 * Phase H: Override unfold defaults để /admin/ và /giao-vien/ trông giống
 * cùng 1 hệ thống management — chung font, color, spacing, card style.
 */

/* ===== Tokens — synced với /nihongo/ tokens.css ===== */
:root {
  --gk-primary: #E23D28;        /* đỏ son brand */
  --gk-primary-dark: #C02B1A;
  --gk-primary-soft: #FDE2DE;
  --gk-primary-50: #FEF2F0;
  --gk-ink: #1F1B16;
  --gk-ink-soft: #5C5852;
  --gk-ink-faint: #8A8680;
  --gk-paper: #FFFFFF;
  --gk-paper-alt: #F5F2EA;       /* nền giấy cũ */
  --gk-rule: #E5DFD3;
  --gk-success: #2F7F4E;
  --gk-warn: #C8761F;
  --gk-danger: #C0392B;
}

/* ===== Fonts — Plus Jakarta Sans như frontend ===== */
body, .min-h-screen, .text-sm, button, input, select, textarea {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Japanese chars dùng Noto Sans JP */
.gk-ja, .gk-ja-serif, [lang="ja"] {
  font-family: 'Noto Sans JP', 'Plus Jakarta Sans', sans-serif !important;
}

/* Mono font */
code, pre, .font-mono {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
}

/* ===== Sidebar branding ===== */
/* Logo area */
.relative.flex.items-center.justify-between.p-4 {
  background: var(--gk-paper-alt) !important;
  border-bottom: 1px solid var(--gk-rule) !important;
}

/* Sidebar primary buttons — đỏ son */
button[type="submit"].bg-primary-600,
.bg-primary-600,
.bg-primary-500 {
  background-color: var(--gk-primary) !important;
}

button[type="submit"].bg-primary-600:hover,
.bg-primary-600:hover,
.bg-primary-500:hover {
  background-color: var(--gk-primary-dark) !important;
}

/* Sidebar links — match frontend */
.bg-primary-50,
.dark\:bg-primary-500\/20 {
  background-color: var(--gk-primary-50) !important;
}

.text-primary-600,
.text-primary-500 {
  color: var(--gk-primary) !important;
}

/* ===== Page background ===== */
body, .bg-base-50, .dark\:bg-base-900 {
  background-color: var(--gk-paper-alt) !important;
}

/* Main content area */
main, #content-main {
  background-color: var(--gk-paper-alt) !important;
}

/* ===== Cards (forms, panels) ===== */
.bg-white,
[class*="bg-white"]:not(.bg-white\/10) {
  background-color: var(--gk-paper) !important;
  border-radius: 14px !important;
}

/* Form panels — gk-card style */
.module,
fieldset.module,
.form-row,
div.flex.flex-col.gap-4 > div,
.bg-white.dark\:bg-base-800,
.border.border-base-200 {
  border-radius: 14px !important;
  border-color: var(--gk-rule) !important;
}

/* ===== Buttons ===== */
.button, button.default, input[type="submit"], a.button,
button.bg-primary-600, a.bg-primary-600 {
  background: var(--gk-primary) !important;
  color: white !important;
  border: 1px solid var(--gk-primary) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}

.button:hover, button.default:hover, a.button:hover,
button.bg-primary-600:hover {
  background: var(--gk-primary-dark) !important;
  border-color: var(--gk-primary-dark) !important;
}

/* Ghost buttons */
.button.cancel, a.button.cancel,
.bg-white.border, .border.border-base-200 button {
  background: var(--gk-paper) !important;
  color: var(--gk-ink) !important;
  border: 1px solid var(--gk-rule) !important;
}

/* ===== Headers ===== */
h1, h2, h3, .text-2xl, .text-3xl, .font-bold {
  color: var(--gk-ink) !important;
  font-weight: 700 !important;
}

h1.text-2xl {
  font-size: 28px !important;
}

/* Page header */
#header, .border-b.border-base-200 {
  background: var(--gk-paper) !important;
  border-bottom: 1px solid var(--gk-rule) !important;
}

/* ===== Form fields ===== */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], input[type="date"],
input[type="datetime-local"], select, textarea {
  border: 1px solid var(--gk-rule) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  background: var(--gk-paper) !important;
  color: var(--gk-ink) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--gk-primary) !important;
  outline: 2px solid var(--gk-primary-50) !important;
}

/* Labels */
label, .text-font-default-light,
.form-row label, fieldset label {
  font-weight: 600 !important;
  color: var(--gk-ink) !important;
  font-size: 13px !important;
}

/* ===== Tables (changelist) ===== */
table#result_list {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--gk-rule) !important;
  background: var(--gk-paper) !important;
}

table#result_list thead th {
  background: var(--gk-paper-alt) !important;
  color: var(--gk-ink-soft) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--gk-rule) !important;
}

table#result_list tbody tr {
  border-bottom: 1px solid var(--gk-rule) !important;
}

table#result_list tbody tr:hover {
  background: var(--gk-paper-alt) !important;
}

/* Action links in tables */
table#result_list a {
  color: var(--gk-primary) !important;
  font-weight: 600 !important;
}

/* ===== Messages / alerts ===== */
ul.messagelist li.success,
.bg-green-50, .text-green-700 {
  background: #E6F4EA !important;
  color: #1B5E20 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  border-left: 4px solid var(--gk-success) !important;
}

ul.messagelist li.error, ul.messagelist li.warning,
.bg-red-50, .text-red-700 {
  background: #FDECEC !important;
  color: #9A1D1D !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  border-left: 4px solid var(--gk-danger) !important;
}

/* ===== Fieldsets ===== */
fieldset.module {
  margin-bottom: 16px !important;
  border-radius: 14px !important;
  background: var(--gk-paper) !important;
  border: 1px solid var(--gk-rule) !important;
}

fieldset.module h2 {
  background: var(--gk-paper-alt) !important;
  color: var(--gk-ink) !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--gk-rule) !important;
  border-radius: 14px 14px 0 0 !important;
}

/* ===== Brand mark in sidebar logo ===== */
header h1 a, header a.font-bold {
  color: var(--gk-primary) !important;
}

/* ===== Custom: Top-right "Đi tới /giao-vien/" link ===== */
#user-tools::before {
  content: "👨‍🏫 Trang giáo viên";
  display: inline-block;
  background: var(--gk-primary-50);
  color: var(--gk-primary);
  padding: 6px 12px;
  border-radius: 6px;
  margin-right: 12px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

/* Object tools (top-right buttons trên changelist) */
ul.object-tools li a, ul.object-tools li.addlink a {
  background: var(--gk-primary) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* ===== Material symbols use brand color ===== */
.material-symbols-outlined {
  color: inherit !important;
}

/* ═════ RESPONSIVE — /admin/ index + analytics dashboard ═════
   Các template admin có nhiều inline grid `repeat(4, 1fr)` cho stat tile;
   responsive.css đã phủ qua selector `.gk-mgmt-main` nhưng admin dùng class
   khác (`#content`, `.dashboard`). Bổ sung override theo container admin. */

/* Tablet (641–1024px) */
@media (max-width: 1024px) {
  #content [style*="grid-template-columns:repeat(5, 1fr)"],
  #content [style*="grid-template-columns:repeat(4, 1fr)"],
  .dashboard [style*="grid-template-columns:repeat(4, 1fr)"],
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #content [style*="grid-template-columns:2fr 1fr"],
  #content [style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
  .stat-grid[style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
  #content [style*="grid-template-columns:repeat(5, 1fr)"],
  #content [style*="grid-template-columns:repeat(4, 1fr)"],
  #content [style*="grid-template-columns:repeat(3, 1fr)"],
  #content [style*="grid-template-columns:1fr 1fr"],
  .dashboard [style*="grid-template-columns:repeat(4, 1fr)"],
  .stat-grid,
  .stat-grid[style*="grid-template-columns:repeat(3, 1fr)"],
  .stat-grid[style*="grid-template-columns:repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  #content [style*="grid-template-columns:2fr 1fr"],
  #content [style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
  #content [style*="padding:24px 32px"],
  #content [style*="padding:28px 32px"] {
    padding: 16px 14px !important;
  }
  /* Greeting hero — wrap avatar + text */
  #content [style*="display:flex"][style*="align-items:center"][style*="gap:24px"] {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
  /* Tables (admin changelist + analytics metric) */
  #content table,
  #content table.metric,
  #content table#result_list {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  /* Filter bar (analytics dashboard) */
  .filter-bar { flex-wrap: wrap !important; }
  /* Pass bar (analytics) — thu 60% */
  .pass-bar { width: 60px !important; }
}