/* style.css (Giao diện Dashboard v13 - New Theme)
   Hoàn chỉnh: thêm biến CSS thiếu, tinh chỉnh responsive và accessibility
*/

/* ========= 0. FONT & HIỆU ỨNG CƠ BẢN ========= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Font */
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Backgrounds & colors */
  --bs-body-bg: #f8f9fa; /* Nền xám rất nhạt */
  --bs-tertiary-bg: #ffffff;
  --bs-border-color: #e9ecef;
  --bs-border-color-translucent: rgba(0,0,0,0.06);
  --bs-secondary-color: #6c757d;
  --bs-primary-bg-subtle: rgba(13,110,253,0.06);
  --bs-primary-text-emphasis: #0d6efd;
  --bs-danger: #dc3545;

  /* Card */
  --card-shadow: 0 4px 12px rgba(0,0,0,0.05);
  --card-shadow-hover: 0 6px 16px rgba(0,0,0,0.08);
  --card-radius: 12px;

  /* Spacing / sizes */
  --control-gap: 1rem;
}

/* Dark mode overrides */
[data-bs-theme="dark"] {
  --bs-body-bg: #121212;
  --bs-tertiary-bg: #1e1e1e;
  --bs-border-color: #2b2b2b;
  --bs-border-color-translucent: rgba(255,255,255,0.04);
  --bs-secondary-color: #bdbdbd;
  --bs-primary-bg-subtle: rgba(13,110,253,0.12);
  --bs-primary-text-emphasis: #66a3ff;
  --bs-danger: #ff6b6b;
  --card-shadow: 0 6px 18px rgba(0,0,0,0.25);
  --card-shadow-hover: 0 8px 22px rgba(0,0,0,0.28);
}
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu {
  background-color: #222;
  color: var(--bs-body-color, #eaeaea);
}

/* Smooth transitions */
.btn, .card, .form-control, .form-select, .table-hover > tbody > tr, .list-group-item-action, .modal-content {
  transition: all 0.18s ease-in-out;
}

/* Card base */
.card {
  border: none;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background-color: var(--bs-tertiary-bg);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover) !important;
}

/* ========= 1. BỐ CỤC CHÍNH ========= */
body {
  padding-top: 70px;
  font-family: var(--bs-body-font-family);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color, #212529);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.main-container { padding-top: 1.5rem; }
.navbar {
  min-height: 55px;
  background-color: var(--bs-body-bg) !important;
  border-bottom: 1px solid var(--bs-border-color);
}
.navbar .navbar-brand { font-size: 1.1rem; font-weight: 600; }
.navbar .btn-sm i { font-size: 1.1rem; }
.navbar .navbar-text { font-size: 0.9rem; color: var(--bs-secondary-color); }

/* Equal height cards on medium+ */
@media (min-width: 768px) {
  .controls-area .row > div { display: flex; }
  .controls-area .card { width: 100%; display: flex; flex-direction: column; }
  .controls-area .card .card-body { flex-grow: 1; display: flex; flex-direction: column; }
}

/* ========= 2. KHU VỰC ĐIỀU KHIỂN (CARD) ========= */
.controls-area .card .card-header {
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  background-color: transparent;
}
.controls-area .card .card-body { padding: 1.25rem; }
.controls-area .form-label.small,
.controls-area .card-subtitle {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  margin-bottom: 0.3rem !important;
}
.controls-area .form-select-sm,
.controls-area .form-control-sm,
.controls-area .input-group-sm > .form-control,
.controls-area .input-group-sm > .input-group-text,
.controls-area .btn-sm { font-size: 0.85rem; border-radius: 0.3rem; }

.controls-area .btn {
  font-weight: 500;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.controls-area .btn-primary {
  background: linear-gradient(145deg, #0d6efd, #0a58ca);
  border-color: #0a58ca;
  color: #fff;
}
.controls-area #employeeSelect { max-height: 120px; overflow-y: auto; }

/* ========= 3. THANH ĐIỀU KHIỂN KẾT QUẢ ========= */
.result-controls-card .card-body { padding: 1rem; }
.result-controls-card .row { margin-bottom: 0.75rem !important; }
.result-controls-card .btn,
.result-controls-card .form-select-sm,
.result-controls-card .form-check-label,
.result-controls-card .col-form-label-sm,
.result-controls-card .small { font-size: 0.85rem; }
.result-controls-card .input-group-sm .input-group-text { padding: 0.3rem 0.6rem; }
.col-options {
  box-shadow: var(--card-shadow) !important;
  border-radius: 0.5rem;
  border: none !important;
  background: var(--bs-tertiary-bg);
}
.result-controls-card .col-options label { font-size: 0.85rem; margin-bottom: 0.2rem; }
.result-controls-card .pagination-row { margin-bottom: 0 !important; }

/* ========= 4. BIỂU TƯỢNG SẮP XẾP ========= */
.sort-icon::after { content: ' ⇅'; font-size: 0.8em; opacity: 0.4; }
th.sorted-asc .sort-icon::after { content: ' ↑'; opacity: 1; }
th.sorted-desc .sort-icon::after { content: ' ↓'; opacity: 1; }
th[data-sort] { cursor: pointer; user-select: none; }

/* ========= 5. BẢNG (TABLE) ========= */
.table-wrap { overflow-x: auto; border: none; border-radius: var(--card-radius); }
#resultTable { min-width: 1200px; margin-bottom: 0; font-size: 0.875rem; border-collapse: separate; border-spacing: 0; }
#resultTable th, #resultTable td {
  padding: 0.6rem 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  white-space: nowrap;
}
#resultTable thead th {
  position: sticky; top: 0; z-index: 10;
  background-color: var(--bs-body-bg);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  border-bottom: 2px solid var(--bs-border-color);
}

/* Hover effect */
.table-hover > tbody > tr:hover > * {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  transition: background-color 0.12s ease;
}
#resultTable tfoot tr { border-top: 2px solid var(--bs-border-color); }

/* Responsive adjustments */
@media (max-width: 991px) {
  #resultTable { min-width: 900px; font-size: 0.82rem; }
}
@media (max-width: 575px) {
  .controls-area .card .card-body { padding: 0.75rem; }
  #resultTable { min-width: 700px; font-size: 0.78rem; }
}

/* ========= 6. LƯỚI (GRID) ========= */
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.grid-card .card-header { font-weight: 600; font-size: 1rem; }
.grid-card .card-body { padding: 1rem; }
.grid-card .card-total { font-size: 1.25rem; font-weight: 700; color: var(--bs-danger); margin: 0.3rem 0; }
.grid-card p { margin: 0.2rem 0; font-size: 0.9rem; }
.grid-card .card-footer { font-size: 0.8rem; color: var(--bs-secondary-color); margin-top: 0.5rem; padding: 0 !important; }

/* ========= 7. TRẠNG THÁI LOADING / EMPTY ========= */
.btn.is-loading .btn-text { display: none; }
.btn.is-loading .spinner-border { display: inline-block !important; }
.result-state-container {
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--card-radius);
  background-color: var(--bs-body-bg);
  padding: 1.25rem;
}
.result-state-container .state-icon { font-size: 3.5rem; color: var(--bs-secondary-color); }
.result-state-container .state-message { font-size: 1.1rem; color: var(--bs-secondary-color); }

/* ========= 8. TIỆN ÍCH & PHÂN QUYỀN ========= */
.hidden { display: none !important; }
.col-toggle { position: relative; }
.col-toggle[open] .col-options { display: block; }
.col-toggle summary { list-style: none; display: inline-block; cursor: pointer; }
.col-toggle summary::-webkit-details-marker { display: none; }
button i, .dropdown-item i { margin-right: 0.35rem; vertical-align: middle; font-size: 1.1em; }
.btn-sm i { font-size: 1em; margin-right: 0.2rem; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

.mt-auto { margin-top: auto !important; }
.admin-only, .user-only { display: none !important; }
body.is-admin .admin-only { display: flex !important; }
body.is-user .user-only { display: flex !important; }
body.is-admin .admin-only.w-100 { width: 100% !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ========= 9. MODALS ========= */
.modal-content {
  border: none;
  border-radius: var(--card-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  background: var(--bs-tertiary-bg);
}
.modal-header, .modal-footer { border: none; }
#notesList .note-meta { font-size: 0.8rem; color: var(--bs-secondary-color); }
#notesList .list-group-item { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.form-label-sm { font-size: 0.8rem; }
.form-text-sm { font-size: 0.75rem; }

/* Accessibility: focus outlines for keyboard users */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(13,110,253,0.18);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Utility helpers */
.text-muted-small { color: var(--bs-secondary-color); font-size: 0.85rem; }

/* End of file */