/**
 * Modern Enterprise Admin Theme (Ant Design / Modern SaaS Style)
 * Clean, minimal, professional. No sci-fi effects.
 */

:root {
  --ant-primary: #1677ff;
  --ant-primary-hover: #0958d9;
  --ant-primary-active: #003eb3;
  --ant-primary-light: #e6f4ff;

  --ant-success: #52c41a;
  --ant-success-hover: #389e0d;
  --ant-success-light: #f6ffed;
  --ant-success-border: #b7eb8f;

  --ant-danger: #ff4d4f;
  --ant-danger-hover: #cf1322;
  --ant-danger-light: #fff1f0;
  --ant-danger-border: #ffa39e;

  --ant-warning: #faad14;
  --ant-warning-hover: #d48806;
  --ant-warning-light: #fffbe6;
  --ant-warning-border: #ffe58f;

  --ant-info: #1677ff;
  --ant-info-light: #e6f4ff;

  --ant-text: #1f2937;
  --ant-text-secondary: #4b5563;
  --ant-text-muted: #6b7280;
  --ant-text-light: #9ca3af;

  --ant-bg: #f5f7fa;
  --ant-card-bg: #ffffff;
  --ant-border: #e5e7eb;
  --ant-border-subtle: #f0f0f0;

  --ant-radius-sm: 4px;
  --ant-radius-md: 6px;
  --ant-radius-lg: 8px;

  --ant-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ==========================================================================
   Global Reset & Clean Typography
   ========================================================================== */
body {
  font-family: var(--ant-font) !important;
  color: var(--ant-text) !important;
  background-color: var(--ant-bg) !important;
  -webkit-font-smoothing: antialiased;
}

.gray-bg {
  background-color: var(--ant-bg) !important;
}

.container-div {
  padding: 16px 20px 20px !important;
}

/* ==========================================================================
   Search Panel (.search-collapse / #formId)
   ========================================================================== */
.search-collapse {
  background: #ffffff !important;
  border: 1px solid var(--ant-border) !important;
  border-radius: var(--ant-radius-lg) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  padding: 16px 20px 12px !important;
  margin-bottom: 16px !important;
}

.select-list ul {
  display: flex;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.select-list li {
  display: inline-flex;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--ant-text-secondary) !important;
}

.select-list li > label {
  width: auto !important;
  margin: 0 8px 0 0 !important;
  font-weight: 500 !important;
  color: var(--ant-text-secondary) !important;
  white-space: nowrap !important;
}

.select-list li input[type="text"],
.select-list li select,
.form-control:not(textarea):not(select[multiple]) {
  height: 34px !important;
  padding: 5px 12px !important;
  font-size: 13px !important;
  border-radius: var(--ant-radius-md) !important;
  border: 1px solid #d9d9d9 !important;
  background-color: #ffffff !important;
  color: var(--ant-text) !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.select-list li input[type="text"]:focus,
.select-list li select:focus,
.form-control:focus {
  border-color: var(--ant-primary) !important;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15) !important;
  outline: 0 !important;
}

/* ==========================================================================
   Toolbar & Buttons (Clean & Flat)
   ========================================================================== */
#toolbar,
.btn-group-sm {
  margin-bottom: 12px !important;
  display: flex;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 6px 14px !important;
  border-radius: var(--ant-radius-md) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.18s ease !important;
  cursor: pointer !important;
}

.btn-primary {
  background-color: var(--ant-primary) !important;
  border-color: var(--ant-primary) !important;
  color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--ant-primary-hover) !important;
  border-color: var(--ant-primary-hover) !important;
  color: #ffffff !important;
}

.btn-success {
  background-color: var(--ant-success) !important;
  border-color: var(--ant-success) !important;
  color: #ffffff !important;
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--ant-success-hover) !important;
  border-color: var(--ant-success-hover) !important;
  color: #ffffff !important;
}

.btn-danger {
  background-color: var(--ant-danger) !important;
  border-color: var(--ant-danger) !important;
  color: #ffffff !important;
}
.btn-danger:hover, .btn-danger:focus {
  background-color: var(--ant-danger-hover) !important;
  border-color: var(--ant-danger-hover) !important;
  color: #ffffff !important;
}

.btn-warning {
  background-color: var(--ant-warning) !important;
  border-color: var(--ant-warning) !important;
  color: #ffffff !important;
}
.btn-warning:hover, .btn-warning:focus {
  background-color: var(--ant-warning-hover) !important;
  border-color: var(--ant-warning-hover) !important;
  color: #ffffff !important;
}

.btn-info {
  background-color: #0891b2 !important;
  border-color: #0891b2 !important;
  color: #ffffff !important;
}
.btn-info:hover, .btn-info:focus {
  background-color: #0e7490 !important;
  border-color: #0e7490 !important;
  color: #ffffff !important;
}

.btn-default {
  background-color: #ffffff !important;
  border-color: #d9d9d9 !important;
  color: var(--ant-text-secondary) !important;
}
.btn-default:hover, .btn-default:focus {
  background-color: #fafafa !important;
  border-color: var(--ant-primary) !important;
  color: var(--ant-primary) !important;
}

.btn-rounded {
  border-radius: 9999px !important;
}

.btn-xs {
  padding: 3px 8px !important;
  font-size: 12px !important;
  border-radius: var(--ant-radius-sm) !important;
}

/* ==========================================================================
   Table & Bootstrap-Table (Ant Design Table Style)
   ========================================================================== */
.bootstrap-table {
  background: #ffffff !important;
  border: 1px solid var(--ant-border) !important;
  border-radius: var(--ant-radius-lg) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  padding: 0 !important;
  overflow: visible !important;
}

.fixed-table-container {
  border: none !important;
}

.table {
  margin-bottom: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.table > thead > tr > th {
  background-color: #fafafa !important;
  color: var(--ant-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--ant-border-subtle) !important;
  border-top: none !important;
  white-space: nowrap !important;
}

.table > tbody > tr > td {
  padding: 12px 16px !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  color: var(--ant-text) !important;
  border-top: 1px solid var(--ant-border-subtle) !important;
  border-bottom: none !important;
}

.table-hover > tbody > tr:hover,
.table > tbody > tr:hover {
  background-color: #f9fafb !important;
}

/* Status Badges & Chips (Ant Design Tag Style) */
.badge,
.label {
  display: inline-flex;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
  border: 1px solid transparent !important;
}

.label-primary, .badge-primary {
  background-color: var(--ant-primary-light) !important;
  color: var(--ant-primary) !important;
  border-color: #91caff !important;
}

.label-success, .badge-success {
  background-color: var(--ant-success-light) !important;
  color: #389e0d !important;
  border-color: var(--ant-success-border) !important;
}

.label-danger, .badge-danger {
  background-color: var(--ant-danger-light) !important;
  color: #cf1322 !important;
  border-color: var(--ant-danger-border) !important;
}

.label-warning, .badge-warning {
  background-color: var(--ant-warning-light) !important;
  color: #d48806 !important;
  border-color: var(--ant-warning-border) !important;
}

/* Pagination */
.fixed-table-pagination {
  padding: 10px 16px !important;
  border-top: 1px solid var(--ant-border-subtle) !important;
}

.pagination > li > a,
.pagination > li > span {
  border-radius: var(--ant-radius-sm) !important;
  margin: 0 2px !important;
  border: 1px solid #d9d9d9 !important;
  color: var(--ant-text-secondary) !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--ant-primary) !important;
  border-color: var(--ant-primary) !important;
  color: #ffffff !important;
}

/* Modals */
.modal-content {
  border-radius: var(--ant-radius-lg) !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.modal-header {
  padding: 14px 20px !important;
  background-color: #fafafa !important;
  border-bottom: 1px solid var(--ant-border-subtle) !important;
}

.modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ant-text) !important;
}