/* ============================================================
   body.css — Light Theme cho Client Area WHMCS
   Thư mục: /includes/hooks/customtemplate/body.css
   Scope: chỉ nhắm vào các phần tử trong body, không đụng
   tới #header, .main-navbar-wrapper hoặc bất kỳ ID nào
   đã được navbar.css quản lý.
   ============================================================ */

/* ─── Kế thừa biến từ navbar.css ─────────────────────────── */
/* Các biến :root đã khai báo bên navbar.css — file này KHÔNG
   khai báo lại để tránh ghi đè. Chỉ dùng var(--...) ở đây.  */

/* ══════════════════════════════════════════════════════════
   BASE — BODY & TYPOGRAPHY
   ══════════════════════════════════════════════════════════ */
body {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--text-primary) !important;
  background-color: #f1f5f9 !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  line-height: 1.3 !important;
}

a {
  /*color: var(--accent-blue) !important;*/
  text-decoration: none !important;
  transition: color var(--transition) !important;
}
a:hover {
  /*color: #1d4ed8 !important;*/
  text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT — CONTAINER & MAIN SECTION
   Scope: #main-body và các phần tử bên trong
   ══════════════════════════════════════════════════════════ */
#main-body {
  padding-top: 28px !important;
  padding-bottom: 48px !important;
}

/* ══════════════════════════════════════════════════════════
   TILE STATS (Dịch vụ / Báo giá / Ticket / Hóa đơn)
   ══════════════════════════════════════════════════════════ */
.tiles {
  margin-bottom: 24px !important;
}

.tiles .tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 12px !important;
  background: #ffffff !important;
  border: 1px solid var(--nav-border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 110px !important;
}
.tiles .tile:hover {
  box-shadow: 0 6px 24px rgba(30, 50, 100, 0.1) !important;
  transform: translateY(-2px) !important;
  border-color: #bfdbfe !important;
  color: var(--accent-blue) !important;
  text-decoration: none !important;
}

.tiles .tile .fas,
.tiles .tile .far {
  font-size: 22px !important;
  margin-bottom: 6px !important;
  opacity: 0.75;
}
.tiles .tile:hover .fas,
.tiles .tile:hover .far {
  opacity: 1;
}

.tiles .tile .stat {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--text-primary) !important;
}
.tiles .tile:hover .stat {
  color: var(--accent-blue) !important;
}

.tiles .tile .title {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  margin-top: 2px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

/* Highlight bar dưới tile */
.tiles .tile .highlight {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}
.bg-color-blue   { background: var(--accent-blue) !important; }
.bg-color-green  { background: #16a34a !important; }
.bg-color-red    { background: var(--accent-red) !important; }
.bg-color-gold   { background: #d97706 !important; }
.bg-color-orange { background: #ea580c !important; }
.bg-color-asbestos { background: #64748b !important; }

/* ══════════════════════════════════════════════════════════
   CARD — BASE STYLES
   Scope: .card bên trong .client-home-cards và .sidebar
   ══════════════════════════════════════════════════════════ */
.client-home-cards .card,
.sidebar .card {
  background: #ffffff !important;
  border: 1px solid var(--nav-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 1px 4px rgba(30, 50, 100, 0.06) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
}

/* Card header */
.client-home-cards .card-header,
.sidebar .card-header {
  background: #f8fafc !important;
  border-bottom: 1px solid var(--nav-border) !important;
  padding: 12px 16px !important;
}

.client-home-cards .card-header .card-title,
.sidebar .card-header .card-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

.client-home-cards .card-header .fas,
.client-home-cards .card-header .far,
.sidebar .card-header .fas,
.sidebar .card-header .far {
  color: var(--text-muted) !important;
  font-size: 14px !important;
}

/* Card body */
.client-home-cards .card-body,
.sidebar .card-body {
  padding: 14px 16px !important;
  font-size: 13.5px !important;
  color: var(--text-secondary) !important;
  line-height: 1.65 !important;
}

/* Card footer */
.client-home-cards .card-footer,
.sidebar .card-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--nav-border) !important;
  padding: 10px 16px !important;
}

/* Card accent borders (top) — dùng border-left thay vì border-top
   để đồng bộ với accent color của từng panel */
.card-accent-gold   { border-left: 3px solid #d97706 !important; }
.card-accent-orange { border-left: 3px solid #ea580c !important; }
.card-accent-blue   { border-left: 3px solid var(--accent-blue) !important; }
.card-accent-red    { border-left: 3px solid var(--accent-red) !important; }
.card-accent-asbestos { border-left: 3px solid #64748b !important; }

/* ── Minimise toggle ────────────────────────────────────── */
.card-minimise {
  cursor: pointer !important;
  color: var(--text-muted) !important;
  transition: transform var(--transition) !important;
}
.card-minimise:hover { color: var(--text-secondary) !important; }

/* ══════════════════════════════════════════════════════════
   SERVICE LIST (Quản lý dịch vụ)
   ══════════════════════════════════════════════════════════ */
.div-service-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  transition: background var(--transition) !important;
  cursor: pointer !important;
}
.div-service-item:hover {
  background: #f8fafc !important;
}

/* Status badge */
.div-service-status {
  flex-shrink: 0 !important;
}
.label {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}
/* label-placeholder chỉ dùng để giữ chỗ layout — ẩn đi */
.label-placeholder {
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}
.label-success {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}
.label-warning {
  background: #fef9c3 !important;
  color: #a16207 !important;
  border: 1px solid #fef08a !important;
}
.label-danger {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

/* Service name */
.div-service-name {
  flex: 1 !important;
  min-width: 0 !important;
}
.div-service-name .font-weight-bold {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.div-service-name .text-domain {
  display: block !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

/* View detail button */
.div-service-buttons {
  flex-shrink: 0 !important;
}
.btn-view-details {
  font-size: 12px !important;
  padding: 5px 12px !important;
  background: #f1f5f9 !important;
  border: 1px solid var(--nav-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all var(--transition) !important;
  cursor: pointer !important;
}
.btn-view-details:hover {
  background: var(--accent-blue-light) !important;
  border-color: var(--accent-blue-mid) !important;
  color: var(--accent-blue) !important;
}
.btn-view-details .sr-only {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   LIST GROUP (Sidebar & panels)
   ══════════════════════════════════════════════════════════ */
.list-group {
  border-radius: 0 !important;
}
.list-group-item {
  border: none !important;
  border-bottom: 1px solid var(--nav-border) !important;
  padding: 10px 16px !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: 13.5px !important;
  transition: background var(--transition), color var(--transition) !important;
}
.list-group-item:last-child {
  border-bottom: none !important;
}
.list-group-item.list-group-item-action:hover {
  background: #f8fafc !important;
  color: var(--accent-blue) !important;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS — GENERAL
   Scope: .btn bên trong .client-home-cards và .sidebar
   (không đụng tới .btn trong .main-navbar-wrapper hay #header)
   ══════════════════════════════════════════════════════════ */
.client-home-cards .btn,
.sidebar .btn {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 14px !important;
  transition: all var(--transition) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.client-home-cards .btn-default,
.sidebar .btn-default {
  background: #f1f5f9 !important;
  border: 1px solid var(--nav-border) !important;
  color: var(--text-secondary) !important;
}
.client-home-cards .btn-default:hover,
.sidebar .btn-default:hover {
  background: #e2e8f0 !important;
  color: var(--text-primary) !important;
  border-color: #cbd5e1 !important;
}

.client-home-cards .btn-success,
.sidebar .btn-success {
  background: #16a34a !important;
  border: 1px solid #15803d !important;
  color: #ffffff !important;
}
.client-home-cards .btn-success:hover,
.sidebar .btn-success:hover {
  background: #15803d !important;
}

/* Accent buttons (dùng bg-color-* class đi kèm .btn-default) */
.client-home-cards .btn.bg-color-gold {
  background: #d97706 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
}
.client-home-cards .btn.bg-color-gold:hover  { background: #b45309 !important; }
.client-home-cards .btn.bg-color-blue {
  background: var(--accent-blue) !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}
.client-home-cards .btn.bg-color-blue:hover  { background: #1d4ed8 !important; }
.client-home-cards .btn.bg-color-orange {
  background: #ea580c !important;
  border-color: #c2410c !important;
  color: #ffffff !important;
}
.client-home-cards .btn.bg-color-orange:hover { background: #c2410c !important; }
.client-home-cards .btn.bg-color-asbestos {
  background: #64748b !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}
.client-home-cards .btn.bg-color-asbestos:hover { background: #475569 !important; }

/* btn-xs */
.client-home-cards .btn-xs,
.sidebar .btn-xs {
  font-size: 11.5px !important;
  padding: 4px 10px !important;
}

/* btn-sm */
.client-home-cards .btn-sm,
.sidebar .btn-sm {
  font-size: 12.5px !important;
  padding: 5px 12px !important;
}

/* btn-block */
.client-home-cards .btn-block,
.sidebar .btn-block {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR CARD
   ══════════════════════════════════════════════════════════ */
.card-sidebar {
  border-left: none !important;
}

.sidebar .sidebar-menu-item-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 2px 0 !important;
}

.sidebar .sidebar-menu-item-icon-wrapper {
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--accent-blue-light) !important;
  border-radius: var(--radius-sm) !important;
  flex-shrink: 0 !important;
}
.sidebar .sidebar-menu-item-icon-wrapper .fas,
.sidebar .sidebar-menu-item-icon-wrapper .far {
  color: var(--accent-blue) !important;
  font-size: 13px !important;
}

.sidebar .sidebar-menu-item-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
}

.sidebar .list-group-item:hover .sidebar-menu-item-label {
  color: var(--accent-blue) !important;
}

/* ── Credit balance ─────────────────────────────────────── */
.client-home-cards h3.text-center {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
}

/* ══════════════════════════════════════════════════════════
   EMPTY STATE (Ticket / Announcement panels)
   ══════════════════════════════════════════════════════════ */
.client-home-cards .card-body p {
  font-size: 13.5px !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  line-height: 1.65 !important;
}

/* ══════════════════════════════════════════════════════════
   VIEW MORE BUTTON
   ══════════════════════════════════════════════════════════ */
.btn-view-more {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  padding: 4px 8px !important;
  border-radius: var(--radius-sm) !important;
  transition: color var(--transition) !important;
}
.btn-view-more:hover:not(.disabled) {
  color: var(--accent-blue) !important;
  text-decoration: none !important;
}
.btn-view-more.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   Scope chặt vào #footer.footer, không cascade xuống
   các list / nav / button bên trong
   ══════════════════════════════════════════════════════════ */
#footer.footer {
  background: #ffffff !important;
  border-top: 1px solid var(--nav-border) !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

#footer.footer .copyright {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}

#footer.footer .nav-link {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  padding: 4px 10px !important;
  transition: color var(--transition) !important;
}
#footer.footer .nav-link:hover {
  color: var(--accent-blue) !important;
  text-decoration: none !important;
}

/* Language/currency button — reset để không kế thừa .btn styles từ trên */
#footer.footer .btn {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: var(--radius-sm) !important;
  transition: color var(--transition), background var(--transition) !important;
}
#footer.footer .btn:hover {
  color: var(--accent-blue) !important;
  background: var(--accent-blue-light) !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #main-body {
    padding-top: 16px !important;
    padding-bottom: 32px !important;
  }

  /* Tiles */
  .tiles .tile {
    min-height: 90px !important;
    padding: 14px 8px !important;
  }
  .tiles .tile .stat  { font-size: 22px !important; }
  .tiles .tile .title { font-size: 10.5px !important; }

  /* ── Service item: grid 2 hàng ──────────────────────────
     Hàng 1: [badge]          [button icon]
     Hàng 2: [tên dịch vụ — full width]              */
  .div-service-item {
    display: grid !important;
    grid-template-areas:
      "status buttons"
      "name   name" !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 4px 8px !important;
    padding: 10px 14px !important;
    flex-wrap: unset !important;
  }

  .div-service-status {
    grid-area: status !important;
    width: auto !important;
  }

  .div-service-name {
    grid-area: name !important;
  }
  .div-service-name .font-weight-bold {
    font-size: 13px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.45 !important;
  }

  .div-service-buttons {
    grid-area: buttons !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  /* Button: chỉ hiện icon, ẩn text cho gọn */
  .btn-view-details {
    width: auto !important;
    padding: 6px 10px !important;
  }
  .btn-view-details > span:not(.sr-only) {
    display: none !important;
  }
  .btn-view-details .far {
    font-size: 15px !important;
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  .client-home-cards .card-header,
  .sidebar .card-header {
    padding: 10px 12px !important;
  }
  .client-home-cards .card-body,
  .sidebar .card-body {
    padding: 12px !important;
  }
  .div-service-item {
    padding: 8px 12px !important;
  }
}