/* ============================================================
   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: #007bff !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; /* Legacy: #2859a4 → theme */
  border-bottom: 2px solid var(--theme-primary) !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: var(--theme-info, #17a2b8) !important;
}
.areas-and-tables .areas-status-serving {
  color: var(--theme-primary, #28a745) !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, #fff3cd) !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;
}

/* ============================================================
   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-accent, #20c997) !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;
}