/*
  BlueGym - Jazzmin Compact UI (Optimized)
  Mục tiêu:
  - Gọn font/spacing cho Jazzmin + AdminLTE
  - Giữ an toàn: không sửa template
  - Tối ưu nút bấm (bo góc, tách rời, màu trẻ trung, chữ trắng)
  - Fix responsive: mobile không mất nút, font co giãn hợp lý
*/

/* Load các fix / nền tảng đang có */
@import url("bluegym.css");
@import url("customer_quick_actions.css");
@import url("mobile.css");

/* ================================
   0) COLOR SCHEME — ngăn Chrome Android tự bật Dark Mode
   ================================ */

:root {
  color-scheme: light only;
}

html {
  color-scheme: light;
  background-color: #f8fafc;
}

/* Force toàn bộ trang về light */
body,
.wrapper,
.content-wrapper,
.main-footer,
.card,
.table,
#result_list,
#result_list tr,
#result_list td,
#result_list th,
.results,
.results tr,
.results td {
  background-color: #ffffff;
  color: #1e293b;
}

/* ================================
   1) BASE FONT SCALE
   ================================ */

html {
  font-size: 13px !important;
}

body {
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
}

.content-header h1,
.content-header .m-0 {
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
}

/* ================================
   2) SIDEBAR (menu trái)
   ================================ */

.main-sidebar .brand-link {
  padding: 0.55rem 0.85rem !important;
}

.main-sidebar .brand-text {
  font-size: 1rem !important;
}

.nav-sidebar .nav-link {
  padding: 0.45rem 0.7rem !important;
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link {
  padding: 0.4rem 0.7rem 0.4rem 1.6rem !important;
  font-size: 0.9rem !important;
}

.nav-sidebar .nav-icon {
  font-size: 0.95rem !important;
}

.sidebar .form-control {
  font-size: 0.9rem !important;
  height: 34px !important;
}

/* ================================
   3) NAVBAR (top)
   ================================ */

.main-header.navbar {
  min-height: 52px !important;
}

.main-header .nav-link {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}

/* ================================
   4) FORMS
   ================================ */

.form-control,
select.form-control,
textarea.form-control {
  font-size: 0.95rem !important;
  height: 34px !important;
  padding: 0.35rem 0.6rem !important;
}

textarea.form-control {
  height: auto !important;
  min-height: 90px;
}

.related-widget-wrapper-link {
  padding: 0.25rem 0.35rem !important;
}

/* Form labels */
label,
.col-form-label,
.form-group label {
  font-size: 0.95rem !important;
  margin-bottom: 0.25rem !important;
}

/* ================================
   5) TABLES (list view)
   ================================ */

.table {
  font-size: 0.93rem !important;
}

.table th,
.table td {
  padding: 0.45rem 0.6rem !important;
  vertical-align: middle !important;
}

.change-list .results {
  font-size: 0.93rem !important;
}

/* ================================
   6) CARDS / BOXES
   ================================ */

.card {
  border-radius: 10px !important;
}

.card-header {
  padding: 0.55rem 0.85rem !important;
}

.card-title {
  font-size: 1.05rem !important;
  margin: 0 !important;
}

.card-body {
  padding: 0.85rem !important;
}

/* ================================
   7) SELECT2
   ================================ */

.select2-container--default .select2-selection--single {
  height: 34px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 32px !important;
  font-size: 0.95rem !important;
}

.select2-container--default .select2-selection--multiple {
  min-height: 34px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  font-size: 0.9rem !important;
  margin-top: 0.25rem !important;
}

/* ================================
   8) TYPOGRAPHY COLORS (easy-on-eyes)
   ================================ */

body,
.content-wrapper,
.main-footer,
.card,
.card-body,
.card-header,
.content,
.wrapper {
  color: #2b2f36;
}

.text-muted,
.small,
small,
.help-block,
.form-text,
.select2-container--default .select2-selection__placeholder,
input::placeholder,
textarea::placeholder {
  color: #6b7280 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.content-header h1,
.card-title {
  color: #111827;
}

a {
  color: #2563eb;
}
a:hover {
  color: #1d4ed8;
}

/* Tables */
.table,
.table td,
.table th,
.table thead th {
  color: #1e293b;
}
.table .text-muted {
  color: #64748b !important;
}

/* Forms text */
.form-control,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  color: #1e293b !important;
}

/* Sidebar text */
.main-sidebar,
.main-sidebar .brand-link,
.main-sidebar .nav-sidebar > .nav-item > .nav-link,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
  color: #374151 !important;
}
.main-sidebar .text-muted,
.main-sidebar small {
  color: #6b7280 !important;
}
.main-header .navbar-nav .nav-link {
  color: #374151;
}

/* ================================
   9) UNIFIED BACKGROUND - All Pages
   ================================ */

.content-wrapper {
  background: #f8fafc !important;  /* sáng hơn: f1f5f9 → f8fafc */
}

.dashboard-container,
.reports-index {
  background: transparent;
  min-height: 100%;
}

.card,
.kpi-card,
.report-card,
.stat-card,
.summary-card,
.filter-bar,
.filters-card,
.alert-card {
  background: #ffffff !important;
}

.card .table,
.dashboard-table {
  background: #ffffff;
}

.table thead th,
.dashboard-table th,
.report-table th {
  background: #f8fafc !important;
}

/* ================================
   10) BUTTONS (Modern youthful + white text)
   - Fix: không dùng margin-left gây mất nút
   - Desktop: tách bằng gap
   - Mobile: wrap tốt, không tràn
   ================================ */

:root {
  /* Standard palette — phổ biến, dễ nhìn trên mobile */
  --btn-primary:   #2563eb;  /* blue-600  — chuẩn Bootstrap/Tailwind */
  --btn-success:   #16a34a;  /* green-600 — chuẩn, đủ tương phản */
  --btn-info:      #0284c7;  /* sky-600   — thay violet bằng sky blue */
  --btn-warning:   #d97706;  /* amber-600 — đậm hơn #f59e0b, rõ hơn */
  --btn-danger:    #dc2626;  /* red-600   — chuẩn */
  --btn-secondary: #6b7280;  /* gray-500  — neutral */

  --btn-radius: 8px;         /* Bo nhẹ hơn, trông gọn hơn */
}

/* Base button */
.btn,
.button,
a.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
#content-main a.addlink,
#content-main a.changelink,
#content-main a.viewlink,
.object-tools a,
.submit-row input,
.submit-row a {
  border-radius: var(--btn-radius) !important;
  font-size: 0.95rem !important;
  padding: 0.42rem 0.75rem !important;
  line-height: 1.15 !important;

  color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  white-space: nowrap;
  text-decoration: none !important;
}

/* Hover/focus */
.btn:hover,
.button:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
#content-main a.addlink:hover,
#content-main a.changelink:hover,
#content-main a.viewlink:hover,
.object-tools a:hover,
.submit-row input:hover,
.submit-row a:hover,
.btn:focus,
.button:focus,
a.button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
#content-main a.addlink:focus,
#content-main a.changelink:focus,
#content-main a.viewlink:focus {
  transform: translateY(-1px);
  filter: brightness(0.98);
  outline: none !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14) !important;
  color: #ffffff !important;
}

/* Contrast trợ giúp cho chữ trắng */
.btn,
a.addlink,
a.changelink,
a.viewlink,
.deletelink,
.submit-row input,
.submit-row a {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20) !important;
}

/* Map màu theo bootstrap classes */
.btn-primary,
.btn-info,
input[name="_save"],
input[name="_continue"],
input[name="_addanother"] {
  background: var(--btn-primary) !important;
}

.btn-success {
  background: var(--btn-success) !important;
}

.btn-warning {
  background: var(--btn-warning) !important;
}

.btn-danger {
  background: var(--btn-danger) !important;
}

.btn-secondary,
.btn-light {
  background: var(--btn-secondary) !important;
}

/* Django admin index: add/change/view links */
#content-main a.addlink {
  background: var(--btn-success) !important;
}
#content-main a.changelink {
  background: var(--btn-primary) !important;
}
#content-main a.viewlink {
  background: var(--btn-info) !important;
}

/* Deletelink (Django default) */
.deletelink {
  background: var(--btn-danger) !important;
  padding: 0.42rem 0.75rem !important;
  border-radius: var(--btn-radius) !important;
}

/* Desktop spacing: dùng gap thay vì margin-left */
#content-main .app .model-actions,
#content-main .model-actions,
#content-main td,
#content-main .module,
#content-main .app {
  /* không ép layout, chỉ để fallback */
}

#content-main a.addlink,
#content-main a.changelink,
#content-main a.viewlink {
  margin-right: 10px !important;
}
#content-main a.addlink:last-child,
#content-main a.changelink:last-child,
#content-main a.viewlink:last-child {
  margin-right: 0 !important;
}

/* btn-group: dùng flex + gap (không margin-left) */
.btn-group {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.btn-group .btn {
  margin-left: 0 !important;
  flex: 0 0 auto !important;    /* không stretch — fix full-width bug */
  width: auto !important;
}

/* ================================
   DATE HIERARCHY (bộ lọc ngày đầu changelist)
   ================================ */
#change-list-date-hierarchy {
  padding: 0 0 8px 0 !important;
}

#change-list-date-hierarchy .btn-group.date-hierarchy {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
}

/* Tất cả buttons trong date hierarchy: compact, tự động rộng */
#change-list-date-hierarchy .btn-group.date-hierarchy .btn {
  flex: 0 0 auto !important;
  width: auto !important;
  font-size: 12px !important;
  padding: 5px 14px !important;
  border-radius: 6px !important;
  line-height: 1.4 !important;
  min-height: 28px !important;
  height: auto !important;
  white-space: nowrap !important;
}

/* Back button "‹ Tất cả các ngày" — slate */
#change-list-date-hierarchy .btn-group.date-hierarchy .btn-secondary {
  background: #475569 !important;
  color: #ffffff !important;
}
#change-list-date-hierarchy .btn-group.date-hierarchy .btn-secondary:hover {
  background: #334155 !important;
}

/* Tháng có thể click — blue nhạt */
#change-list-date-hierarchy .btn-group.date-hierarchy a.btn-primary:not(.active) {
  background: #3b82f6 !important;
  color: #ffffff !important;
  opacity: 0.9;
}

/* Tháng hiện tại (.active, không có href) — đậm hơn */
#change-list-date-hierarchy .btn-group.date-hierarchy .btn-primary.active {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
  cursor: default !important;
}

/* submit-row: dùng flex + gap (không margin-left) */
.submit-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.submit-row input,
.submit-row a {
  margin: 0 !important;
}

/* ================================
   11) REPORTS / DASHBOARD (giữ logic cũ)
   ================================ */

/* Base font for report pages */
.content-wrapper .report-filters,
.content-wrapper .report-table,
.content-wrapper .summary-card,
.content-wrapper .kpi-card,
.content-wrapper .chart-card,
.content-wrapper .filters-card,
.content-wrapper .filter-bar,
.content-wrapper .card,
.content-wrapper .insight-box,
.content-wrapper .result-box,
.content-wrapper p,
.content-wrapper label,
.content-wrapper span,
.content-wrapper td,
.content-wrapper th {
  font-size: 13px !important;
}

/* Report pages base font */
.reports-index,
.dashboard-container,
[class*="report"] {
  font-size: 13px;
  line-height: 1.5;
}

/* Report table header smaller */
.report-table th {
  font-size: 11px !important;
}
.report-table td {
  font-size: 13px !important;
}

/* Summary/KPI sizes */
.summary-card-label,
.kpi-label,
.kpi-sub,
.filter-label {
  font-size: 10px !important;
}
.summary-card-value,
.kpi-value {
  font-size: 18px !important;
}

/* Pagination */
.pagination a,
.pagination span {
  font-size: 12px !important;
}
.pager {
  font-size: 13px !important;
}

/* ================================
   12) COMPACT CHANGELIST TABLES (giữ logic cũ)
   ================================ */

.compact-changelist #result_list,
.compact-changelist .results table {
  font-size: 12px !important;
  table-layout: auto;
}

.compact-changelist #result_list th,
.compact-changelist #result_list td {
  font-size: 12px !important;
  padding: 6px 8px !important;
  white-space: nowrap;
  vertical-align: middle;
}

.compact-changelist #result_list th {
  font-size: 11px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  background: #f8fafc !important;
  color: #475569;
}

.compact-changelist .results {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compact-changelist #result_list tbody tr:hover {
  background-color: #f1f5f9 !important;
}
.compact-changelist #result_list tbody tr:nth-child(even) {
  background-color: #fafbfc;
}

@media (max-width: 1400px) {
  .compact-changelist #result_list th,
  .compact-changelist #result_list td {
    font-size: 11px !important;
    padding: 5px 6px !important;
  }
  .compact-changelist #result_list th {
    font-size: 10px !important;
  }
}

@media (max-width: 1200px) {
  .compact-changelist #result_list th,
  .compact-changelist #result_list td {
    font-size: 10px !important;
    padding: 4px 5px !important;
  }
  .compact-changelist #result_list th {
    font-size: 9px !important;
  }
}

/* ================================
   13) RESPONSIVE (Mobile & Small screens) - FIX NÚT BỊ MẤT
   ================================ */

@media (max-width: 768px) {
  html {
    font-size: 12px !important;
  }

  body,
  .content-wrapper,
  .content-wrapper .content,
  .container-fluid {
    font-size: 12px !important;
  }

  .content-header h1,
  .content-header .h1 {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }

  .nav-sidebar .nav-link {
    padding: 0.55rem 0.75rem !important;
  }

  /* Cards gọn hơn */
  .card,
  .box {
    border-radius: 12px !important;
  }
  .card-header,
  .card-body,
  .box-header,
  .box-body {
    padding: 10px 12px !important;
  }

  /* Button: không nowrap cứng để tránh tràn -> cho phép wrap */
  .btn,
  .button,
  a.button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  #content-main a.addlink,
  #content-main a.changelink,
  #content-main a.viewlink,
  .object-tools a,
  .submit-row input,
  .submit-row a {
    font-size: 11px !important;
    padding: 6px 8px !important;
    min-height: 32px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Object tools wrap - không mất nút */
  .object-tools {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 10px 0 !important;
  }
  .object-tools li {
    margin: 0 !important;
    float: none !important;
  }

  /* submit row wrap - không mất nút */
  .submit-row {
    gap: 8px !important;
    padding: 10px 12px !important;
    overflow: visible !important;
  }
  .submit-row input,
  .submit-row a {
    flex: 1 1 auto !important;
  }

  /* Bảng list: chống tràn ngang */
  .results,
  .changelist-results,
  #result_list {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #result_list th,
  #result_list td {
    font-size: 11px !important;
    padding: 5px 7px !important;
    white-space: nowrap;
  }

  /* Filter sidebar */
  #changelist-filter,
  .changelist-filter {
    position: static !important;
    width: 100% !important;
    margin-top: 10px !important;
  }
  #changelist-filter h2,
  #changelist-filter h3 {
    font-size: 11px !important;
    margin: 6px 0 !important;
  }
  #changelist-filter ul {
    margin: 0 !important;
    padding-left: 16px !important;
  }

  /* Form aligned: label/input xuống dòng */
  .form-row,
  .aligned .form-row {
    display: block !important;
    padding: 8px 0 !important;
  }
  .aligned label {
    width: 100% !important;
    float: none !important;
    margin: 0 0 4px 0 !important;
    font-size: 11px !important;
    opacity: 0.92;
  }
  .aligned .form-row > div,
  .aligned .form-row .fieldBox {
    width: 100% !important;
    float: none !important;
  }

  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  select,
  textarea,
  .vTextField,
  .vLargeTextField,
  .form-control {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 11px !important;
  }

  .content-header h1,
  .content-header .h1 {
    font-size: 16px !important;
  }

  /* Nút: ưu tiên 1 cột để không mất nút */
  .submit-row input,
  .submit-row a,
  .object-tools a {
    flex: 1 1 100% !important;
  }
}
 /*================================
   Top quick-search boxes (mobile) - align & beautify
   ================================ */

/* Wrapper: cho các ô tìm kiếm xếp dọc gọn */
@media (max-width: 768px) {
  /* Các input tìm kiếm trên header thường nằm trong navbar hoặc content header,
     mình target theo placeholder tiếng Việt để không phụ thuộc class (an toàn với code hiện tại) */
  input[placeholder*="Tìm kiếm Nhân Viên"],
  input[placeholder*="Tìm kiếm Khách Hàng"],
  input[placeholder*="Tìm kiếm Đơn Hàng"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    border-radius: 12px !important;
    padding: 10px 44px 10px 14px !important; /* chừa chỗ cho icon */
    font-size: 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    background: #ffffff !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
  }

  /* Tạo khoảng cách giữa 3 ô */
  input[placeholder*="Tìm kiếm Nhân Viên"] { margin-top: 8px !important; }
  input[placeholder*="Tìm kiếm Khách Hàng"] { margin-top: 10px !important; }
  input[placeholder*="Tìm kiếm Đơn Hàng"] { margin-top: 10px !important; }

  /* Nút kính lúp (thường là button kế ngay sau input trong input-group) */
  input[placeholder*="Tìm kiếm Nhân Viên"] + .input-group-append .btn,
  input[placeholder*="Tìm kiếm Khách Hàng"] + .input-group-append .btn,
  input[placeholder*="Tìm kiếm Đơn Hàng"] + .input-group-append .btn,
  input[placeholder*="Tìm kiếm Nhân Viên"] + .input-group-btn .btn,
  input[placeholder*="Tìm kiếm Khách Hàng"] + .input-group-btn .btn,
  input[placeholder*="Tìm kiếm Đơn Hàng"] + .input-group-btn .btn {
    height: 40px !important;
    border-radius: 12px !important;
    margin-left: 8px !important;
  }

  /* Nếu layout dùng input-group (AdminLTE) */
  .input-group .form-control {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
  }
  .input-group-append .btn,
  .input-group-btn .btn {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }

  /* Icon kính lúp cân giữa */
  .input-group-append .btn i,
  .input-group-btn .btn i {
    font-size: 14px !important;
    line-height: 1 !important;
  }
}
/* a.button không có class màu riêng → fallback slate */
a.button:not(.addlink):not(.changelink):not(.viewlink):not(.deletelink):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
  background: var(--btn-secondary) !important;
  color: #ffffff !important;
}

/* Button nền sáng (light/outline/default) — chữ tối để đọc được */
.btn-light,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-default,
.btn-white {
  color: #1e293b !important;
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.btn-light:hover,
.btn-outline-secondary:hover,
.btn-default:hover,
.btn-white:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ================================
   MOBILE NAVBAR - Ẩn search boxes
   (Override Jazzmin - đặt cuối file để cao nhất cascade)
   ================================ */
@media (max-width: 768px) {
  /* Navbar: 1 hàng, không wrap */
  .main-header.navbar {
    flex-wrap: nowrap !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
  }

  /* Ẩn toàn bộ search box trong navbar — nhiều lớp selector */
  .form-control-navbar,
  .btn-navbar,
  .main-header .input-group,
  .main-header .input-group-sm,
  .main-header .input-group-append,
  .main-header .navbar-nav form,
  .main-header .navbar-nav input,
  .main-header .navbar-nav .input-group {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ẩn li wrapper chứa form search */
  .main-header .navbar-nav > .nav-item:has(.form-control-navbar),
  .main-header .navbar-nav > .nav-item:has(form),
  .main-header .navbar-nav > .nav-item:has(input) {
    display: none !important;
  }

  /* User dropdown bám phải */
  .main-header .navbar-nav.ml-auto {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
}

/* ================================
   MOBILE CONTENT - Giảm toàn bộ font trong vùng nội dung
   ================================ */
@media (max-width: 768px) {
  .content-wrapper p,
  .content-wrapper span,
  .content-wrapper td,
  .content-wrapper th,
  .content-wrapper li,
  .content-wrapper a:not(.btn):not(.nav-link),
  .content-wrapper label,
  .content-wrapper small,
  .content-wrapper .small,
  .content-wrapper .text-muted,
  .content-wrapper .badge,
  .content-wrapper .help-block,
  .content-wrapper .form-text,
  .breadcrumb-item,
  .paginator,
  .paginator a {
    font-size: 11px !important;
  }

  .content-wrapper h2,
  .content-wrapper h3,
  .content-wrapper .card-title {
    font-size: 13px !important;
  }

  .content-wrapper h4,
  .content-wrapper h5,
  .content-wrapper h6 {
    font-size: 12px !important;
  }
}

/* ================================
   FORCE LIGHT SIDEBAR & NAVBAR
   (Override Jazzmin dark-sidebar nếu server chưa update settings)
   ================================ */

/* Sidebar: nền trắng, text tối */
.main-sidebar,
.sidebar,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link,
.sidebar-dark .nav-sidebar > .nav-item > .nav-link {
  background-color: #ffffff !important;
  color: #374151 !important;
}

.main-sidebar .brand-link {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

.main-sidebar .brand-text {
  color: #1e293b !important;
}

/* Nav links */
.main-sidebar .nav-sidebar > .nav-item > .nav-link {
  color: #374151 !important;
}
.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
  background-color: #f1f5f9 !important;
  color: #1d4ed8 !important;
}
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
}

/* Submenu */
.main-sidebar .nav-sidebar .nav-treeview {
  background-color: #f8fafc !important;
}
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
  color: #4b5563 !important;
}
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
  color: #1d4ed8 !important;
  background-color: #eff6ff !important;
}

/* Nav header (group labels: "1. 🛒 Bán hàng...") */
.main-sidebar .nav-sidebar .nav-header {
  color: #6b7280 !important;
  background-color: transparent !important;
}

/* Navbar (top) — white bar */
.main-header.navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.main-header .navbar-nav .nav-link {
  color: #374151 !important;
}

/* ================================
   MOBILE SEARCH BOXES - Ẩn triệt để
   (Bổ sung selector cho mọi trường hợp)
   ================================ */
@media (max-width: 768px) {
  /* Ẩn toàn bộ form search trong navbar */
  .main-header form,
  .main-header .navbar-search,
  .main-header [class*="search"],
  .form-control-navbar,
  .btn-navbar {
    display: none !important;
  }

  /* Ẩn nav-item chứa form/input */
  .main-header .navbar-nav .nav-item:has(form),
  .main-header .navbar-nav .nav-item:has(input),
  .main-header .navbar-nav .nav-item:has(.input-group) {
    display: none !important;
  }

  /* Fallback cho browser không hỗ trợ :has()
     Chỉ target navbar trái (không phải ml-auto = user dropdown) */
  .main-header .navbar-nav:not(.ml-auto) > li:nth-child(2),
  .main-header .navbar-nav:not(.ml-auto) > li:nth-child(3),
  .main-header .navbar-nav:not(.ml-auto) > li:nth-child(4) {
    display: none !important;
  }
}

/* ================================
   FORCE LIGHT CHANGELIST — Override dark theme / browser dark mode
   ================================ */
#result_list,
#result_list tbody,
#result_list tbody tr,
#result_list tbody td,
#result_list thead,
#result_list thead th,
.results table,
.results tbody tr,
.results tbody td,
.change-list .results,
.changelist-results {
  background-color: #ffffff !important;
  color: #1e293b !important;
}

#result_list tbody tr:nth-child(even),
.results tbody tr:nth-child(even) {
  background-color: #f8fafc !important;
}

#result_list tbody tr:hover,
.results tbody tr:hover {
  background-color: #eff6ff !important;
}

/* Header row */
#result_list thead th,
.results thead th {
  background-color: #f1f5f9 !important;
  color: #374151 !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

/* Links trong bảng */
#result_list td a,
.results td a {
  color: #2563eb !important;
}

/* Checkbox column */
#result_list .action-checkbox,
.results .action-checkbox {
  background-color: transparent !important;
}

/* ================================
   INLINE GROUP (Jazzmin stacked: card-outline card-success/secondary)
   ================================ */

/* Card-outline top border: giảm từ 3px → 1px, màu nhạt thay vì màu xanh/xám đậm */
.inline-group .card.card-outline,
.inline-group .card.card-outline.card-success,
.inline-group .card.card-outline.card-secondary {
  border-top-width: 1px !important;
  border-top-color: #e2e8f0 !important;
  border-color: #e2e8f0 !important;
}

/* Card-header: bỏ border-bottom sắc, dùng màu cực nhạt */
.inline-group .card-header {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 8px 12px !important;
  background-color: #f8fafc !important;
}

/* Outer card-body (wrapper của tất cả inline records) */
.inline-group > fieldset.card > .card-body {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Inner card-body: chứa form fields (Sản phẩm, Số lượng...) — dịch xuống */
.inline-group .inline-related .card.card-outline .card-body,
.inline-group .new-stacked .card-body {
  padding-top: 20px !important;
  padding-bottom: 16px !important;
}

/* Khoảng cách giữa các form-group rows trong inline */
.inline-group .card-body .form-group {
  margin-bottom: 12px !important;
}

/* h3 title trong inline card */
.inline-group .card-title {
  font-size: 13px !important;
  margin: 0 !important;
}