/* ============================================================
   POSONE UNIFIED CSS - Theme Configuration System
   Thay thế cho posone.css và visnam.css
   Dùng CSS Variables từ ThemeConfig (appsettings.json)
   ============================================================ */

/* ------------------------ LINK / LINK-LIKE ---------------------------- */
/* Link, .btn-link: màu chữ link chung */
a,
.btn-link {
  color: #0071c1; /* Màu link chính (navbar, nội dung, footer) - KHÔNG thay đổi theo theme */
}

/* ----------------------------- BUTTONS -------------------------------- */
/* Nút chính (Primary) */
.btn-primary {
  background-color: var(--theme-primary) !important; /* Dùng màu theme thay vì #28a745 hoặc #2859a4 */
  border: none !important;
  color: #ffffff !important;
}

/* Nút phụ (Secondary – do dự án dùng class .btn-second cho nút phụ) */
.btn-second {
  background-color: var(--theme-primary) !important; /* Màu nền nút phụ (Hủy/Phụ) - KHÔNG thay đổi */
  border: none !important;
  color: #ffffff !important;
}

/* Nút Secondary mặc định (nếu sử dụng) – chủ yếu bỏ viền */
.btn-secondary {
  border: none !important;
}

.text-form .register-text {
  color: var(--theme-primary) !important; /* Legacy visnam: #2859a4 → theme variable */
}

/* ------------------------------ ACCENT -------------------------------- */
/* Màu nhấn (accent) dùng cho hiệu ứng hover/click, border của nút tròn */
.btn-circle {
  border-color: #20c997; /* Accent color - KHÔNG thay đổi theo theme */
  color: #20c997;
}
.btn-circle:hover {
  background-color: #20c997;
  color: #ffffff !important;
}

/* Các nút tăng/giảm số lượng (trong POS) khi hover */
.button-minus:hover,
.button-plus:hover {
  background-color: #20c997;
  color: #ffffff !important;
}

/* Hiệu ứng click chung cho các phần tử có .click-effect */
.click-effect:active {
  background-color: rgba(32, 201, 151, 0.3); /* Accent color với opacity */
}

/* ------------------------------ STATUS / STATE COLORS -------------------------------- */
/* Các trạng thái đơn hàng, thanh toán */

/* Trạng thái "Đã in chế biến" */
.status-processing,
.badge-processing {
  color: var(--theme-primary) !important; /* Legacy: #28a745 → theme */
}

/* Trạng thái "Đã thanh toán" */
.status-paid,
.badge-paid,
.label-paid {
  color: var(--theme-primary) !important; /* Legacy: #28a745 → theme */
  background-color: var(--theme-primary-pastel) !important;
}

/* Background cho các trạng thái success */
.bg-success-light {
  background-color: var(--theme-primary-pastel) !important;
}

/* Checkbox accent color */
input[type="checkbox"] {
  accent-color: var(--theme-primary) !important; /* Legacy: #28a745 → theme */
}

/* Event colors */
.event-public {
  color: var(--theme-primary) !important; /* Legacy: #28a745 → theme */
}

.event-scheduled {
  color: var(--theme-primary) !important; /* Legacy: #28a745 hoặc #2859a4 → theme */
}

/* Giá bán màu primary */
.price-sell,
.sell-price {
  color: var(--theme-primary) !important; /* Legacy: #28a745 → theme */
}

/* ------------------------------ BORDERS & HIGHLIGHTS -------------------------------- */
/* Border highlight cho active/selected items */
.border-primary-left {
  border-left: 2px solid var(--theme-primary) !important; /* Legacy: #2859a4 → theme */
}

.border-primary-bottom {
  border-bottom: 2px solid var(--theme-primary) !important;
}

/* ------------------------------ TABS -------------------------------- */
/* Tab active state */
.nav-tabs .nav-link.active {
  color: var(--theme-primary) !important; 
  border-bottom: 2px solid var(--theme-primary) !important;
  background-color: transparent !important;
}


/* ------------------------------ FORMS -------------------------------- */
/* Input focus state */
.form-control:focus,
.custom-select:focus {
  border-color: var(--theme-primary) !important; /* Legacy: #28a745 hoặc #2859a4 → theme */
  box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.25) !important;
}

/* Icon hover trong input */
.input-group-text:hover {
  color: var(--theme-primary) !important; /* Legacy: #28a745 → theme */
}

/* Nút reset hover */
.btn-reset:hover {
  border-color: var(--theme-primary) !important; /* Legacy: #28a745 hoặc #2859a4 → theme */
  color: var(--theme-primary) !important;
}

/* ------------------------------ GRADIENTS -------------------------------- */
/* Gradient background cho hero sections */
.hero-gradient {
  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-light) 100%) !important;
}

/* Animated gradient background */
.gradient-animated {
  background: linear-gradient(
    -45deg,
    var(--theme-primary),
    var(--theme-primary-dark),
    var(--theme-primary),
    var(--theme-primary-dark)
  ) !important;
  background-size: 400% 400% !important;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ------------------------------ TEXT COLORS -------------------------------- */
/* Text màu primary */
.text-primary-theme {
  color: var(--theme-primary) !important;
}

.text-primary-dark {
  color: var(--theme-primary-dark) !important;
}

.text-primary-light {
  color: var(--theme-primary-light) !important;
}

/* ------------------------------ BACKGROUNDS -------------------------------- */
/* Background màu primary */
.bg-primary-theme {
  background-color: var(--theme-primary) !important;
}

.bg-primary-dark {
  background-color: var(--theme-primary-dark) !important;
}

.bg-primary-light {
  background-color: var(--theme-primary-light) !important;
}

.bg-primary-pastel {
  background-color: var(--theme-primary-pastel) !important;
}

.bg-primary-mint {
  background-color: var(--theme-primary-mint) !important;
}

/* ------------------------------ LINKS (Footer, etc.) -------------------------------- */
/* Link trong footer */
.footer-link,
.login-footer a {
  color: var(--theme-primary) !important; /* Legacy: #28a745 hoặc #2859a4 → theme */
}

.footer-link:hover {
  color: var(--theme-primary-dark) !important;
}

/* ------------------------------ SPECIAL CASES -------------------------------- */
/* Các trường hợp đặc biệt từ posone.css và visnam.css */

/* Region selection button (visnam specific) */
.btn-region-select {
  background-color: var(--theme-primary) !important; /* Legacy: #2859a4 → theme */
}

/* Total price display */
.total-price {
  color: var(--theme-primary) !important; /* Legacy: #2859a4 → theme */
  font-weight: 700;
}

/* ------------------------------ SEMANTIC COLORS (KHÔNG ĐỔI THEO THEME) -------------------------------- */
/* Các màu semantic giữ nguyên theo Bootstrap standard */

.btn-success {
  background-color: #28a745 !important; /* Bootstrap green - KHÔNG thay đổi */
  border-color: #28a745 !important;
}

.btn-danger {
  background-color: #dc3545 !important; /* Bootstrap red - KHÔNG thay đổi */
  border-color: #dc3545 !important;
}

.btn-warning {
  background-color: #ffc107 !important; /* Bootstrap yellow - KHÔNG thay đổi */
  border-color: #ffc107 !important;
}

.btn-info {
  background-color: #17a2b8 !important; /* Bootstrap cyan - KHÔNG thay đổi */
  border-color: #17a2b8 !important;
}

.text-success {
  color: #28a745 !important; /* Bootstrap green - KHÔNG thay đổi */
}

.text-danger {
  color: #dc3545 !important; /* Bootstrap red - KHÔNG thay đổi */
}

.text-warning {
  color: #ffc107 !important; /* Bootstrap yellow - KHÔNG thay đổi */
}

.text-info {
  color: #17a2b8 !important; /* Bootstrap cyan - KHÔNG thay đổi */
}

/* ------------------------------ TAB COLORS (OrderList, etc.) -------------------------------- */
/* Màu nền cho tabs active trong danh sách đơn hàng và khu vực */
.bg-olive-active {
  background-color: var(--theme-primary-pastel, #d4edda) !important; /* Nền nhạt khi active */
  border-left: 3px solid var(--theme-primary) !important; /* Vạch nhấn bên trái */
}

.bg-olive-active .area-name {
  font-weight: 600 !important;
  color: #000000 !important;
}

.bg-no-olive {
  background-color: #ffffff !important; /* Nền trắng cho items không active */
  border-left: 3px solid transparent !important;
}

.bg-no-olive:hover {
  background-color: var(--theme-primary-pastel, #e8f5e8) !important; /* Hover nhạt */
}

.bg-olive-2 {
  background-color: var(--theme-primary-dark) !important; /* Nền đậm cho phần phụ */
}

/* ------------------------------ SIDEBAR THEME GRADIENTS -------------------------------- */
/* Gradient cho sidebar main background */
.sidebar-gradient-bg {
  background: linear-gradient(180deg, 
    var(--theme-primary-deep) 0%, 
    var(--theme-primary-medium) 100%) !important;
}

/* Gradient cho user footer */
.user-footer-gradient {
  background: linear-gradient(135deg, 
    var(--theme-primary) 0%, 
    var(--theme-primary-dark) 100%) !important;
}

/* Gradient cho avatar background */
.avatar-gradient {
  background: linear-gradient(135deg, 
    var(--theme-primary-pastel) 0%, 
    var(--theme-primary-mint) 100%) !important;
}

/* Menu item colors */
.menu-item-active {
  background: var(--theme-primary) !important;
  color: #FFFFFF !important;
  border-left: 4px solid var(--theme-primary-light) !important;
}

.menu-item-hover:hover {
  background: var(--theme-primary-dark) !important;
  color: #FFFFFF !important;
}

/* Online indicator dot */
.online-indicator {
  background: var(--theme-primary-light) !important;
  border: 2px solid var(--theme-primary-dark) !important;
}

/* ------------------------------ HELPER: RGB Values -------------------------------- */
/* Để dùng cho rgba() trong box-shadow, opacity, etc. */
/* CSS không hỗ trợ tách RGB từ hex, nên cần define riêng nếu cần rgba */
/* Sẽ được override bởi ThemeService nếu cần */

/* ------------------------------ NOTES -------------------------------- */
/*
MIGRATION NOTES:
1. posone.css dùng #28a745 (green) → var(--theme-primary)
2. visnam.css dùng #2859a4 (blue) → var(--theme-primary)
3. Accent color #20c997 (teal) KHÔNG thay đổi theo theme
4. Semantic colors (success, danger, warning, info) GIỮ NGUYÊN
5. Link color #0071c1 GIỮ NGUYÊN

USAGE:
- Configure theme trong appsettings.json
- ThemeService sẽ inject CSS variables
- File này dùng CSS variables thay vì hardcoded colors
- Build 1 lần, deploy nhiều theme khác nhau

BENEFITS:
- Không cần posone.css và visnam.css riêng
- Không cần gọi API GetPlatform().FileCss
- Thay đổi theme chỉ cần edit appsettings.json
- Không cần rebuild khi đổi theme
*/

/* ============================================================
   SALES MODULE - ORDER CREATE F&B
   ============================================================ */

.order-create-fnb .attribute-label-chip {
  background-color: var(--theme-info, #17a2b8) !important;
  color: #ffffff !important;
}
.order-create-fnb .attribute-field-highlight {
  background-color: var(--theme-info, #17a2b8) !important;
  color: #ffffff !important;
}
.order-create-fnb .btn-attr-highlight {
  background-color: var(--theme-info, #17a2b8) !important;
}
.order-create-fnb .area-name-emphasis {
  color: var(--theme-warning, #ffc107) !important;
}
.order-create-fnb .order-status-paid {
  color: var(--theme-success, #28a745) !important;
}
.order-create-fnb .order-status-printed {
  color: var(--theme-danger, #dc3545) !important;
}
.order-create-fnb .order-status-serving {
  color: var(--theme-primary) !important;
}
.order-create-fnb .order-status-new {
  color: var(--theme-info, #17a2b8) !important;
}
.order-create-fnb .order-total-text,
.order-create-fnb .order-total-value {
  color: var(--theme-primary-dark, #0d503c) !important;
}
.order-create-fnb .btn-print-processing {
  background-color: var(--theme-accent, #20c997) !important;
}

/* ============================================================
   SALES MODULE - AREAS AND TABLES
   ============================================================ */

.areas-and-tables .table-area-name {
  color: #555 !important;
}
.areas-and-tables .table-meta-icon {
  color: #555 !important;
}
.areas-and-tables .table-meta-text {
  color: #555 !important;
}
.areas-and-tables .areas-status-printed {
  color: var(--theme-danger, #dc3545) !important;
}
.areas-and-tables .areas-status-new {
  color: #ffffff !important; /* White text for 'Đơn mới nhận' to improve contrast on green cards */
}
.areas-and-tables .areas-status-serving {
  /*color: var(--theme-primary, #28a745) !important;*/
  color: #ffffff !important;
}
.areas-and-tables .areas-amount-text {
  color: var(--theme-success, #28a745) !important;
}

/* Màu thẻ bàn theo trạng thái */
.areas-and-tables .areas-card-selected, 
.order-card-selected {
  background-color: var(--theme-warning-light, #fee69c) !important;
}
.areas-and-tables .areas-card-printed {
  background-color: var(--theme-danger-light, #f8d7da) !important;
}
.areas-and-tables .areas-card-serving {
  /*background-color: var(--theme-info-light, #d1ecf1) !important;*/
  background-color: #1BAE78 !important;
}

/* Nút Chuyển/Gộp bàn (màu cùng tông với màu thẻ bàn, nhạt hơn, chữ đen) */
.areas-and-tables .areas-transfer-btn {
  color: #000000 !important;
  border: none !important;
}

.areas-and-tables .areas-card-selected .areas-transfer-btn {
  background-color: #fff9e6 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    height: 3rem;
}

.areas-and-tables .areas-card-printed .areas-transfer-btn {
  background-color: #fbe4e7 !important; /* nhạt hơn màu #f8d7da */
}

.areas-and-tables .areas-card-serving .areas-transfer-btn {
  background-color: #17c98a !important; /* nhạt hơn màu #1BAE78 */
}

/* Text màu trắng cho bàn đã in chế biến */
.areas-and-tables .areas-card-serving .table-area-name {
  color: #ffffff !important;
}
.areas-and-tables .areas-card-serving .table-meta-icon {
  color: #ffffff !important;
}
.areas-and-tables .areas-card-serving .table-meta-text {
  color: #ffffff !important;
}
.areas-and-tables .areas-card-serving .areas-amount-text {
  color: #ffffff !important;
}
.areas-and-tables .areas-card-serving span {
  color: #ffffff !important;
}

.areas-and-tables .areas-transfer-banner {
  background-color: #fff4e5;
  border: 1px dashed var(--theme-warning, #ffc107);
  border-radius: 8px;
  color: #8a5a00;
  padding: 0.75rem 1rem;
}

.areas-and-tables .areas-transfer-banner button {
  font-weight: 600;
  text-decoration: underline;
}

.areas-and-tables .areas-card-selectable {
  box-shadow: 0 0 12px rgba(13, 110, 253, 0.2);
  position: relative;
}

.areas-and-tables .areas-card-selectable::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  border: 2px dashed var(--theme-primary, #0d6efd);
  pointer-events: none;
}

.areas-and-tables .areas-card-source {
  border: 2px solid var(--theme-warning, #ffc107) !important;
}

.areas-and-tables .areas-card-disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.2);
  position: relative;
}

.areas-and-tables .areas-card-disabled::after {
  content: "Đã in tạm tính";
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-danger, #dc3545);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ============================================================
   SALES MODULE - ORDER LIST
   ============================================================ */

.order-list .badge-status-new {
  background-color: var(--theme-secondary, #007bff) !important;
  color: #ffffff !important;
}
.order-list .badge-status-confirm {
  background-color: var(--theme-primary) !important;
  color: #ffffff !important;
}
.order-list .badge-status-send {
  background-color: var(--theme-danger-light, #f8d7da) !important;
  color: var(--theme-danger, #dc3545) !important;
}
.order-list .badge-status-receive {
  background-color: var(--theme-success, #28a745) !important;
  color: #ffffff !important;
}

/* ============================================================
   AREAS SIDEBAR - Area Selection Buttons
   ============================================================ */

/* Nút chọn tất cả khu vực */
.areas-and-tables .areas-selectall-bg {
  background-color: var(--theme-primary) !important;;
  color: #ffffff !important;
}

.areas-and-tables .areas-no-selectall-bg {
  background-color: var(--theme-success, #28a745) !important;
  color: #ffffff !important;
}


/* Area items in sidebar */
.areas-and-tables .bg-no-olive .area-name {
  color: #333333 !important;
}

.areas-and-tables .bg-no-olive .text-gray {
  color: #666666 !important;
}

.areas-and-tables .bg-olive-active .area-name {
  color: #000000 !important;
  font-weight: 700 !important;
}

.areas-and-tables .bg-olive-active .text-gray {
  color: #555555 !important;
}