/* css/custom-theme.css: Custom theme với tone màu #FBF0E1, #795548, #ebebeb */

/* === COLOR VARIABLES === */
:root {
  --warm-cream: #FBF0E1;
  /* Màu kem ấm - primary background */
  --brown-tone: #5D4037;
  /* Màu nâu đậm - thay thế blue primary */
  --light-gray: #ebebeb;
  /* Màu xám nhạt - secondary background */
  --warm-cream-dark: #F5E6D3;
  /* Màu kem đậm hơn cho hover */
  --brown-light: #795548;
  /* Màu nâu nhạt hơn */
  --brown-dark: #3E2723;
  /* Màu nâu rất đậm */
  --chat-response-bg: #F9F7F4;
  /* Nền sáng cho câu trả lời bot */
}

/* === ROW HEADER === */
#row-header {
  background: var(--warm-cream) !important;
  border-bottom: 2px solid var(--brown-tone) !important;
}

/* === RESIZABLE COLUMNS === */
.resizable-col {
  background: var(--light-gray) !important;
}

/* === CHATBOT COMPONENTS === */
.chatbot-header {
  background: var(--warm-cream) !important;
}

.chatbot-input {
  background: var(--warm-cream) !important;
  border-top: 1px solid var(--brown-tone) !important;
}

.chatbot-history {
  background: #fff !important;
}

/* === CONVERSATION SIDEBAR === */
#sidebar-conv-list .list-group-item:hover {
  background-color: var(--warm-cream) !important;
}

#sidebar-conv-list .list-group-item.active {
  background-color: var(--warm-cream-dark) !important;
  border-left-color: var(--brown-tone) !important;
}

/* === BUTTONS === */
.btn-primary {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

.btn-primary:hover {
  background-color: var(--brown-dark) !important;
  border-color: var(--brown-dark) !important;
}

.btn-outline-primary {
  color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

.btn-outline-primary:hover {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
  color: white !important;
}

/* === CARDS & CONTAINERS === */
.card {
  border: 1px solid var(--brown-tone) !important;
}

.card-header {
  background-color: var(--warm-cream) !important;
  border-bottom: 1px solid var(--brown-tone) !important;
}

/* === DROPDOWNS === */
.dropdown-menu {
  border: 1px solid var(--brown-tone) !important;
}

.dropdown-item:hover {
  background-color: var(--warm-cream) !important;
}

/* === BORDERS & DIVIDERS === */
.border-end {
  border-color: var(--brown-tone) !important;
}

.border-top {
  border-color: var(--brown-tone) !important;
}

.border-bottom {
  border-color: var(--brown-tone) !important;
}

/* === CHAT BUBBLES === */
.chat-bubble-user {
  background: var(--brown-tone) !important;
  color: white !important;
}

.chat-bubble-bot {
  background: var(--chat-response-bg) !important;
  border: 1px solid var(--brown-light) !important;
  color: var(--brown-dark) !important;
}

/* === FORM CONTROLS === */
.form-control:focus {
  border-color: var(--brown-tone) !important;
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

.chatbot-textarea:focus {
  border-color: var(--brown-tone) !important;
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

/* === WELCOME SCREEN === */
.chatbot-related-question {
  border: 1px solid var(--brown-tone) !important;
  color: var(--brown-tone) !important;
}

.chatbot-related-question:hover {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
  color: white !important;
}

/* === CONVERSATION ITEMS === */
.conversation-item:hover {
  background-color: var(--warm-cream) !important;
}

.conversation-item.active {
  background-color: var(--warm-cream-dark) !important;
  border-left: 4px solid var(--brown-tone) !important;
}

/* === LINKS === */
a {
  color: var(--brown-tone) !important;
}

a:hover {
  color: var(--brown-dark) !important;
}

/* === TEXT COLORS === */
.text-primary {
  color: var(--brown-tone) !important;
}

.text-muted {
  color: var(--brown-light) !important;
}

/* === BADGES === */
.badge.bg-primary {
  background-color: var(--brown-tone) !important;
}

/* === SCROLLBARS (Webkit browsers) === */
.chatbot-history::-webkit-scrollbar {
  width: 6px;
}

.chatbot-history::-webkit-scrollbar-track {
  background: var(--light-gray);
}

.chatbot-history::-webkit-scrollbar-thumb {
  background: var(--brown-tone);
  border-radius: 3px;
}

.chatbot-history::-webkit-scrollbar-thumb:hover {
  background: var(--brown-dark);
}

/* Timeline body scrollbars */
.timeline-body::-webkit-scrollbar {
  width: 6px;
}

.timeline-body::-webkit-scrollbar-track {
  background: var(--light-gray);
}

.timeline-body::-webkit-scrollbar-thumb {
  background: var(--brown-tone);
  border-radius: 3px;
}

.timeline-body::-webkit-scrollbar-thumb:hover {
  background: var(--brown-dark);
}

/* Timeline item interactions */
.timeline-header:hover {
  background-color: rgba(108, 117, 125, 0.08) !important;
  transition: background-color 0.15s ease-in-out;
}

.timeline-item.expanded {
  border: 1px solid #adb5bd !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 0;
}

.timeline-item.expanded .timeline-header {
  border-radius: 6px 6px 0 0;
}

.timeline-item.expanded .timeline-body {
  border-radius: 0 0 6px 6px;
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 767.98px) {

  .chatbot-header,
  .chatbot-input {
    background: var(--warm-cream) !important;
  }
}

/* === HOVER EFFECTS === */
.nav-link:hover {
  background-color: var(--warm-cream) !important;
  color: var(--brown-tone) !important;
}

.list-group-item:hover {
  background-color: var(--warm-cream) !important;
}

/* === FOCUS STATES === */
.btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

.btn-info:focus {
  box-shadow: 0 0 0 0.2rem rgba(121, 85, 72, 0.25) !important;
}

/* === ACTIVE STATES === */
.btn-primary:active {
  background-color: var(--brown-dark) !important;
  border-color: var(--brown-dark) !important;
}

/* === LOADING STATES === */
.spinner-border.text-primary {
  color: var(--brown-tone) !important;
}

/* === TABLE STYLES === */
.table thead th {
  background-color: var(--warm-cream) !important;
  border-color: var(--brown-tone) !important;
  color: var(--brown-dark) !important;
}

.table tbody tr:hover {
  background-color: var(--warm-cream) !important;
}

.table td,
.table th {
  border-color: var(--brown-tone) !important;
}

/* === ACCORDION & COLLAPSE === */
.accordion-item {
  border: 1px solid var(--brown-tone) !important;
}

.accordion-button {
  background-color: var(--warm-cream) !important;
  color: var(--brown-tone) !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--warm-cream-dark) !important;
  color: var(--brown-dark) !important;
}

/* === MODAL === */
.modal-header {
  background-color: var(--warm-cream) !important;
  border-bottom: 1px solid var(--brown-tone) !important;
}

.modal-footer {
  border-top: 1px solid var(--brown-tone) !important;
}

/* === TOAST === */
.toast-header {
  background-color: var(--warm-cream) !important;
  border-bottom: 1px solid var(--brown-tone) !important;
}

/* === PROGRESS BAR === */
.progress-bar {
  background-color: var(--brown-tone) !important;
}

/* === PAGINATION === */
.page-link {
  color: var(--brown-tone) !important;
}

.page-link:hover {
  background-color: var(--warm-cream) !important;
  border-color: var(--brown-tone) !important;
}

.page-item.active .page-link {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

/* === BOOTSTRAP BLUE OVERRIDES === */
/* Override tất cả Bootstrap blue colors thành brown tone */

/* Primary color overrides */
.bg-primary {
  background-color: var(--brown-tone) !important;
}

.text-primary {
  color: var(--brown-tone) !important;
}

.border-primary {
  border-color: var(--brown-tone) !important;
}

/* Button variants */
.btn-primary {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--brown-dark) !important;
  border-color: var(--brown-dark) !important;
}

.btn-outline-primary {
  color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
  color: white !important;
}

/* Info color overrides (thường là blue) */
.bg-info {
  background-color: var(--brown-light) !important;
}

.text-info {
  color: var(--brown-light) !important;
}

.btn-info {
  background-color: var(--brown-light) !important;
  border-color: var(--brown-light) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

.btn-outline-info {
  color: var(--brown-light) !important;
  border-color: var(--brown-light) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
  background-color: var(--brown-light) !important;
  border-color: var(--brown-light) !important;
  color: white !important;
}

/* Alert variants */
.alert-primary {
  background-color: rgba(93, 64, 55, 0.1) !important;
  border-color: var(--brown-tone) !important;
  color: var(--brown-dark) !important;
}

.alert-info {
  background-color: rgba(121, 85, 72, 0.1) !important;
  border-color: var(--brown-light) !important;
  color: var(--brown-tone) !important;
}

/* Link colors */
a:not(.btn) {
  color: var(--brown-tone) !important;
}

a:not(.btn):hover,
a:not(.btn):focus {
  color: var(--brown-dark) !important;
}

/* Badge variants */
.badge.bg-primary {
  background-color: var(--brown-tone) !important;
}

.badge.bg-info {
  background-color: var(--brown-light) !important;
}

/* Progress bar */
.progress-bar {
  background-color: var(--brown-tone) !important;
}

.progress-bar.bg-info {
  background-color: var(--brown-light) !important;
}

/* Nav pills/tabs */
.nav-pills .nav-link.active {
  background-color: var(--brown-tone) !important;
}

.nav-tabs .nav-link.active {
  border-color: var(--brown-tone) var(--brown-tone) transparent !important;
  color: var(--brown-tone) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: var(--brown-light) var(--brown-light) transparent !important;
  color: var(--brown-tone) !important;
}

/* List group */
.list-group-item.active {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

/* Dropdown */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brown-tone) !important;
}

/* Form controls */
.form-control:focus,
.form-select:focus {
  border-color: var(--brown-tone) !important;
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

.form-check-input:checked {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

/* Pagination */
.page-link {
  color: var(--brown-tone) !important;
}

.page-link:hover,
.page-link:focus {
  background-color: var(--warm-cream) !important;
  border-color: var(--brown-tone) !important;
  color: var(--brown-dark) !important;
}

.page-item.active .page-link {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

/* Spinner */
.spinner-border.text-primary {
  color: var(--brown-tone) !important;
}

.spinner-border.text-info {
  color: var(--brown-light) !important;
}

/* Offcanvas */
.offcanvas-header {
  border-bottom-color: var(--brown-tone) !important;
}

/* Toast */
.toast-header {
  background-color: var(--warm-cream) !important;
  border-bottom: 1px solid var(--brown-tone) !important;
}

/* Carousel */
.carousel-indicators [data-bs-target] {
  background-color: var(--brown-tone) !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(0.3) sepia(1) saturate(3) hue-rotate(15deg) brightness(0.8) !important;
}

/* === COMPACT LAYOUT - GIAO DIỆN NHỎ GỌN === */

/* Giảm font size tổng thể */
body {
  font-size: 0.875rem !important;
  /* 14px thay vì 16px */
  line-height: 1.4 !important;
}

/* Header nhỏ gọn */
.chatbot-header {
  padding: 0.5rem 0.75rem !important;
  /* Giảm từ 1rem */
  font-size: 0.8rem !important;
}

.chatbot-header .small {
  font-size: 0.75rem !important;
}

/* Input area nhỏ gọn */
.chatbot-input {
  padding: 0.5rem !important;
  /* Giảm từ 1rem */
}

.chat-input-rounded {
  padding: 0.375rem 0.5rem !important;
  /* Giảm padding */
  gap: 0.5rem !important;
}

.chatbot-textarea {
  font-size: 0.875rem !important;
  padding: 0.375rem 0.5rem !important;
}

.chatbot-input .chatbot-textarea {
  margin-right: -50px !important;
}

/* Buttons nhỏ gọn */
.btn {
  font-size: 0.8rem !important;
  padding: 0.375rem 0.75rem !important;
}

.btn-sm {
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
}

.btn-icon {
  width: 32px !important;
  height: 32px !important;
  padding: 0.25rem !important;
}

.btn-send {
  width: 36px !important;
  height: 36px !important;
  padding: 0.375rem !important;
}

/* Chat history nhỏ gọn */
.chatbot-history {
  padding: 0.5rem !important;
  /* Giảm từ 1rem */
}

.chat-msg {
  margin-bottom: 0.75rem !important;
  /* Giảm từ 1rem */
}

/* Chat bubbles nhỏ gọn */
.chat-bubble-user,
.chat-bubble-bot {
  padding: 0.5rem 0.75rem !important;
  /* Giảm từ 0.75rem 1rem */
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
}

/* Welcome screen nhỏ gọn */
#chatbot-welcome {
  padding: 1rem !important;
  /* Giảm từ 2rem */
}

#chatbot-welcome h5 {
  font-size: 1rem !important;
  /* Giảm từ 1.25rem */
  margin-bottom: 0.75rem !important;
}

#chatbot-welcome p {
  font-size: 0.875rem !important;
  margin-bottom: 0.75rem !important;
}

#welcome-avatar {
  width: 60px !important;
  /* Giảm từ 80px */
  height: 60px !important;
  margin-bottom: 0.75rem !important;
}

/* Câu hỏi thường gặp nhỏ gọn */
.chatbot-related-question {
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
  margin: 0.125rem !important;
}

.chatbot-related-questions .card-header {
  padding: 0.5rem !important;
  font-size: 0.8rem !important;
}

.chatbot-related-questions .card-body {
  padding: 0.5rem !important;
}

/* Sidebar nhỏ gọn */
.conversation-item {
  padding: 0.5rem !important;
  font-size: 0.8rem !important;
}

.conversation-item .conversation-title {
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
}

.conversation-item .conversation-meta {
  font-size: 0.7rem !important;
}

/* Cards nhỏ gọn */
.card {
  font-size: 0.875rem !important;
}

.card-header {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8rem !important;
}

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

/* Modals nhỏ gọn */
.modal-header {
  padding: 0.75rem 1rem !important;
}

.modal-body {
  padding: 1rem !important;
  font-size: 0.875rem !important;
}

.modal-footer {
  padding: 0.75rem 1rem !important;
}

.modal-title {
  font-size: 1rem !important;
}

/* Dropdowns nhỏ gọn */
.dropdown-menu {
  font-size: 0.8rem !important;
}

.dropdown-item {
  padding: 0.375rem 0.75rem !important;
}

/* Forms nhỏ gọn */
.form-control {
  font-size: 0.875rem !important;
  padding: 0.375rem 0.5rem !important;
}

.form-select {
  font-size: 0.875rem !important;
  padding: 0.375rem 0.5rem !important;
}

.form-label {
  font-size: 0.8rem !important;
  margin-bottom: 0.25rem !important;
}

/* Tables nhỏ gọn */
.table {
  font-size: 0.8rem !important;
}

.table th,
.table td {
  padding: 0.375rem !important;
}

/* Badges nhỏ gọn */
.badge {
  font-size: 0.7rem !important;
  padding: 0.25rem 0.5rem !important;
}

/* Alerts nhỏ gọn */
.alert {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
}

/* Breadcrumbs nhỏ gọn */
.breadcrumb {
  font-size: 0.8rem !important;
  padding: 0.5rem 0.75rem !important;
}

/* Pagination nhỏ gọn */
.page-link {
  font-size: 0.8rem !important;
  padding: 0.375rem 0.5rem !important;
}

/* Toast nhỏ gọn */
.toast {
  font-size: 0.875rem !important;
}

.toast-body {
  padding: 0.5rem 0.75rem !important;
}

/* Offcanvas nhỏ gọn */
.offcanvas-header {
  padding: 0.75rem 1rem !important;
}

.offcanvas-body {
  padding: 1rem !important;
  font-size: 0.875rem !important;
}

.offcanvas-title {
  font-size: 1rem !important;
}

/* Message actions nhỏ gọn */
.msg-actions .btn {
  padding: 0.125rem 0.25rem !important;
  font-size: 0.7rem !important;
}

.msg-actions .dropdown-menu {
  min-width: 140px !important;
  font-size: 0.75rem !important;
}

/* Thinking display nhỏ gọn */
.thinking-display {
  font-size: 0.8rem !important;
  padding: 0.5rem 0.75rem !important;
}

/* Attachments nhỏ gọn */
.chat-attachments .att-item {
  font-size: 0.75rem !important;
  padding: 0.125rem 0.375rem !important;
}

/* Mobile adjustments cho compact layout */
@media (max-width: 767.98px) {
  body {
    font-size: 0.8rem !important;
  }

  .chatbot-header {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.75rem !important;
  }

  .chatbot-input {
    padding: 0.375rem !important;
  }

  .chat-input-rounded {
    padding: 0.25rem 0.375rem !important;
  }

  .chatbot-textarea {
    font-size: 0.8rem !important;
  }

  .btn-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .btn-send {
    width: 32px !important;
    height: 32px !important;
  }

  #chatbot-welcome {
    padding: 0.75rem !important;
  }

  #welcome-avatar {
    width: 50px !important;
    height: 50px !important;
  }

  .chatbot-related-question {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.375rem !important;
  }
}

/* === THINKING CURSOR ANIMATION === */
@keyframes blink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.thinking-cursor {
  animation: blink 1s step-end infinite;
}

/* === CONVERSATION STATUS INDICATORS IN SIDEBAR === */
#sidebar-conv-list .list-group-item.conv-processing {
  opacity: 0.6;
}

#sidebar-conv-list .list-group-item.conv-processing:hover {
  opacity: 0.8;
}

#sidebar-conv-list .list-group-item.conv-processing .conv-title-text {
  font-style: italic;
}

.conv-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.conv-status-icon .spinner-border {
  vertical-align: middle;
}

.conv-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}