/* ==========================================
   NHA KHOA HOANG - GIAO DIEN ADMIN SANG
   Xanh duong + Vang
   ========================================== */

:root {
  --admin-blue: #164B92;
  --admin-navy: #0B2F63;
  --admin-yellow: #F4C542;
  --admin-bg: #F2F6FC;
  --admin-white: #FFFFFF;
  --admin-text: #172C49;
  --admin-muted: #60758E;
  --admin-border: #DFE7F2;
}

body {
  background: var(--admin-bg) !important;
  color: var(--admin-text) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

/* ==========================================
   HEADER
   ========================================== */

body > header {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--admin-border) !important;
  box-shadow: 0 3px 14px rgb(18 62 120 / 5%);
}

body > header h2 {
  color: var(--admin-navy) !important;
}

body > header span {
  color: var(--admin-blue) !important;
}

body > header a {
  background: #EBF2FC !important;
  color: var(--admin-blue) !important;
}

body > header a:hover {
  background: #DAE8FA !important;
}

#admin-logout {
  color: var(--admin-blue) !important;
  border-color: var(--admin-yellow) !important;
}

#admin-logout:hover {
  background: var(--admin-yellow) !important;
  color: var(--admin-navy) !important;
}

/* ==========================================
   SIDEBAR
   ========================================== */

aside {
  background: #FFFFFF !important;
  border-color: var(--admin-border) !important;
}

aside > p {
  color: var(--admin-muted) !important;
}

aside button {
  color: var(--admin-blue) !important;
  background: #F4F8FE !important;
  border-color: var(--admin-border) !important;
  transition: all .2s ease;
}

aside button:hover {
  color: var(--admin-navy) !important;
  background: #E6F0FF !important;
  border-color: #A8C4E9 !important;
  transform: translateX(2px);
}

aside .bg-navy-900 {
  background: var(--admin-blue) !important;
  color: #FFFFFF !important;
}

/* ==========================================
   MAIN CONTENT
   ========================================== */

main {
  background: var(--admin-bg) !important;
}

main h1,
main h2,
main h3 {
  color: var(--admin-navy) !important;
}

/* Thay the nen toi bang the trang */
.bg-slate-800,
.bg-slate-900,
.bg-slate-950 {
  background-color: #FFFFFF !important;
}

.bg-slate-700 {
  background-color: #EDF3FA !important;
}

/* Cac lop nen co do trong suot */
[class*="bg-slate-800/"],
[class*="bg-slate-900/"],
[class*="bg-slate-950/"],
[class*="bg-slate-700/"] {
  background-color: #F6F9FE !important;
}

/* Mau chu cho nen sang */
.text-white,
.text-slate-100,
.text-slate-200,
.text-slate-300 {
  color: var(--admin-text) !important;
}

.text-slate-400,
.text-slate-500 {
  color: var(--admin-muted) !important;
}

.text-yellow-300,
.text-yellow-400 {
  color: #B47B00 !important;
}

.text-blue-300 {
  color: var(--admin-blue) !important;
}

/* Duong vien */
.border-slate-600,
.border-slate-700,
.border-slate-800 {
  border-color: var(--admin-border) !important;
}

/* ==========================================
   STATISTIC CARDS
   ========================================== */

main section:first-child article {
  background: #FFFFFF !important;
  border: 1px solid var(--admin-border) !important;
  box-shadow: 0 4px 18px rgb(22 75 146 / 6%);
  transition: transform .2s, box-shadow .2s;
}

main section:first-child article:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgb(22 75 146 / 10%);
}

#stat-posts-count,
#stat-pending-bookings {
  color: var(--admin-blue) !important;
}

#stat-confirmed-bookings {
  color: #18827B !important;
}

/* ==========================================
   TABLES
   ========================================== */

main table {
  background: #FFFFFF !important;
  border-collapse: separate;
  border-spacing: 0;
}

main thead,
main thead tr {
  background: #EAF1FB !important;
}

main th {
  color: var(--admin-navy) !important;
  font-weight: 700;
}

main tbody tr {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--admin-border);
}

main tbody tr:nth-child(even) {
  background: #F8FAFE !important;
}

main tbody tr:hover {
  background: #EDF5FF !important;
}

main td {
  color: var(--admin-text) !important;
  border-bottom: 1px solid #EDF1F7;
  vertical-align: top;
}

/* Ten khach hang va ten dich vu */
main td .font-bold,
main td .font-semibold {
  color: var(--admin-navy);
}

/* So dien thoai */
#admin-bookings-tbody a[href^="tel:"] {
  color: var(--admin-blue) !important;
  font-weight: 700;
}

#admin-bookings-tbody a[href^="tel:"]:hover {
  text-decoration: underline;
}

/* ==========================================
   GHI CHU NOI BO
   ========================================== */

#admin-bookings-tbody td:nth-child(5) > div {
  background: #FFF8E7 !important;
  border: 1px solid #F1D78A !important;
  border-radius: 12px;
  padding: 12px;
  width: 100%;
  min-width: 0;
  height: auto;
}

#admin-bookings-tbody td:nth-child(5) p {
  color: #4A3B20 !important;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==========================================
   INPUTS - SELECT - TEXTAREA
   ========================================== */

input:not([type="checkbox"]),
select,
textarea {
  background-color: #FFFFFF !important;
  border-color: #CBD8E8 !important;
  color: var(--admin-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: #8A9AAF !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--admin-blue) !important;
  outline: 2px solid rgb(22 75 146 / 13%) !important;
  outline-offset: 1px;
}

input[type="checkbox"] {
  accent-color: var(--admin-blue);
}

/* ==========================================
   BUTTONS
   ========================================== */

button {
  transition: background-color .18s,
              color .18s,
              box-shadow .18s;
}

/* Nut vang chu dao */
.bg-yellow-400 {
  background-color: var(--admin-yellow) !important;
  color: var(--admin-navy) !important;
}

.bg-yellow-400:hover {
  background-color: #F8D666 !important;
}

/* Nut phu */
button.bg-slate-700,
button.bg-slate-800,
button.bg-slate-900 {
  background: #EAF1FB !important;
  color: var(--admin-blue) !important;
  border-color: var(--admin-border) !important;
}

button.bg-slate-700:hover,
button.bg-slate-800:hover,
button.bg-slate-900:hover {
  background: #DCE9FA !important;
}

/* ==========================================
   MODALS
   ========================================== */

/* Lop mo phia sau hop thoai */
#post-modal,
#admin-login-overlay,
div[aria-modal="true"] {
  color: var(--admin-text);
}

#post-modal {
  background: rgb(11 47 99 / 40%) !important;
}

/* Modal tao bang JavaScript:
   lop phu ben ngoai luon giu mau toi mo */
body > div[class*="fixed"][class*="inset-0"][class*="z-"] {
  background-color: rgb(11 47 99 / 42%) !important;
}

/* Hop thoai ben trong */
[role="dialog"] {
  background: #FFFFFF !important;
  border-color: var(--admin-border) !important;
  box-shadow: 0 24px 70px rgb(11 47 99 / 18%);
}

[role="dialog"] h2,
[role="dialog"] h3 {
  color: var(--admin-navy) !important;
}

[role="dialog"] p,
[role="dialog"] label {
  color: var(--admin-text);
}

/* Modal bai viet co cau truc cu */
#post-modal > div {
  background: #FFFFFF !important;
  border-color: var(--admin-border) !important;
}

/* ==========================================
   TRANG DANG NHAP
   ========================================== */

#admin-login-overlay {
  background: linear-gradient(
    135deg,
    #E8F2FF,
    #F7FAFF 65%,
    #FFF6DC
  ) !important;
}

#admin-login-overlay > div {
  background: #FFFFFF !important;
  border-color: var(--admin-border) !important;
  box-shadow: 0 20px 60px rgb(22 75 146 / 12%);
}

#admin-login-overlay h1 {
  color: var(--admin-navy) !important;
}

/* ==========================================
   GIU MAU TRANG THAI RO RANG
   ========================================== */

[class*="bg-emerald-500/"] {
  background-color: #E3F7ED !important;
  color: #176B4A !important;
}

[class*="bg-amber-500/"] {
  background-color: #FFF2D2 !important;
  color: #996500 !important;
}

[class*="bg-blue-500/"] {
  background-color: #E3EEFF !important;
  color: #22589E !important;
}

[class*="bg-red-900/"] {
  background-color: #FDECEC !important;
  color: #AF3131 !important;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
  main {
    padding: 16px !important;
  }

  main table {
    min-width: 900px;
  }

  aside {
    border-bottom: 1px solid var(--admin-border);
  }

  [role="dialog"] {
    max-height: 92vh;
    overflow-y: auto;
  }
}

/* ==========================================
   FIX NÚT XANH ĐẬM TRONG ADMIN
   Đảm bảo chữ trắng, độ tương phản rõ ràng
   ========================================== */

main button.bg-blue-900,
main a.bg-blue-900 {
  background-color: #284B91 !important;
  color: #FFFFFF !important;
  font-weight: 700;
}

main button.bg-blue-900:hover,
main a.bg-blue-900:hover {
  background-color: #1B3671 !important;
  color: #FFFFFF !important;
}

main button.bg-blue-900:focus-visible,
main a.bg-blue-900:focus-visible {
  outline: 3px solid #EBC654;
  outline-offset: 3px;
}

/* ==========================================
   FIX NÚT XANH ĐẬM TRONG ADMIN
   Đảm bảo chữ trắng, độ tương phản rõ ràng
   ========================================== */

main button.bg-blue-900,
main a.bg-blue-900 {
  background-color: #284B91 !important;
  color: #FFFFFF !important;
  font-weight: 700;
}

main button.bg-blue-900:hover,
main a.bg-blue-900:hover {
  background-color: #1B3671 !important;
  color: #FFFFFF !important;
}

main button.bg-blue-900:focus-visible,
main a.bg-blue-900:focus-visible {
  outline: 3px solid #EBC654;
  outline-offset: 3px;
}