/* Override header gradient classes to use custom blue color (solid, no gradient) */
.tw-bg-gradient-to-r.tw-from-red-800.tw-to-red-900,
.tw-bg-gradient-to-r.tw-from-red-800,
.tw-bg-gradient-to-r.tw-to-red-900,
.tw-bg-gradient-to-r.tw-from-primary-800.tw-to-primary-900,
.tw-bg-gradient-to-r.tw-from-primary-800,
.tw-bg-gradient-to-r.tw-to-primary-900 {
    background-image: linear-gradient(to right, #1e40af, #1e40af) !important; /* Solid blue, no gradient */
}

.tw-from-red-800,
.tw-bg-red-800,
.tw-from-primary-800,
.tw-bg-primary-800 {
    background-color: #1e40af !important; /* Custom blue */
}

.tw-to-red-900,
.tw-bg-red-900,
.tw-to-primary-900,
.tw-bg-primary-900 {
    background-color: #3b82f6 !important; /* Custom blue */
}

/* Override indigo and blue gradient classes to solid blue */
.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500,
.tw-bg-gradient-to-r.tw-from-indigo-600,
.tw-bg-gradient-to-r.tw-to-blue-500 {
    background-image: linear-gradient(to right, #1e40af, #1e40af) !important; /* Solid blue, no gradient */
}

.tw-from-indigo-600,
.tw-bg-indigo-600 {
    background-color: #1e40af !important; /* blue */
}

.tw-to-blue-500,
.tw-bg-blue-500 {
    background-color: #3b82f6 !important; /* blue */
}

.tw-text-white,
.tw-text-indigo-600,
.tw-text-blue-500 {
    color: #ffffff !important; /* white text for contrast */
}

.tw-font-bold {
    font-weight: bold !important;
}

.tw-border-none {
    border: none !important;
}

.tw-rounded-full {
    border-radius: 1rem !important;
}

/* Add darker blue background to all dashboard tiles */
.tw-bg-white {
    background-color: #BFDBFE !important; /* Darker blue color for all tiles (blue-200) */
}

/* Ensure the ring/border is visible against darker blue background */
.tw-ring-1.tw-ring-gray-200 {
    --tw-ring-color: #93C5FD !important; /* Even darker blue for borders (blue-300) */
}

/* Adjust hover state for blue tiles */
.hover\:tw-shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2), 0 2px 4px -1px rgba(59, 130, 246, 0.1) !important;
}

/* POS System Color Scheme */
/* ==================== */

/* Header buttons styling */
.header-btn {
    background-color: var(--theme-color, #1e40af) !important;
    color: var(--theme-text-color, #ffffff) !important;
}

.header-btn:hover {
    background-color: var(--theme-hover-color, #2563eb) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.header-btn-active {
    background-color: var(--theme-hover-color, #2563eb) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Date display button styling */
.date-display {
    background-color: var(--theme-color, #1e40af) !important;
    color: var(--theme-text-color, #ffffff) !important;
}

/* List Group styling with updated colors */
.list-group {
    border-radius: 0.375rem;
    overflow: hidden;
}

/* Light background for regular list items */
.list-group-item {
    background-color: #DBEAFE !important; /* Light blue background */
    border-color: #BFDBFE !important; /* Light blue border */
    color: #555 !important;
}

/* Enhanced blue color scheme for active items */
.list-group-item.active {
    background-color: #1e40af !important; /* Blue background for active item */
    border-color: #1e40af !important;
    color: white !important;
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.25) !important; /* Subtle glow effect */
}

/* Style all elements within an active list item */
.list-group-item.active * {
    color: white !important; /* Ensure all text is white for contrast */
}

/* Style active state focus */
.list-group-item.active:focus, 
.list-group-item.active:hover {
    background-color: #1e3a8a !important; /* Slightly darker blue on hover/focus */
    border-color: #1e40af !important;
}

/* Style for list items that are being hovered or focused */
.list-group-item-action:hover, 
.list-group-item-action:focus {
    background-color: rgba(30, 64, 175, 0.1) !important; /* Light blue background on hover */
}

/* For list-group headers or special elements */
.list-group-item-heading {
    color: #1e40af !important; /* Blue text for headings */
}

/* If list group has badges, style them in active state */
.list-group-item.active .badge {
    background-color: white !important;
    color: #1e40af !important;
}

/* Light blue color for pos-tab-content to match button/list-group background */
.pos-tab-content {
    background-color: #EFF6FF !important; /* Light blue color */
}

/* Notification dropdown styling to match header buttons */
.notifications-menu .dropdown-menu {
    background-color: #DBEAFE !important; /* Light blue background */
    border: 1px solid #BFDBFE !important; /* Light blue border */
}

.notifications-menu .notification-li.unread {
    background-color: rgba(30, 64, 175, 0.15) !important; /* Light blue background */
}

.notifications-menu .dropdown-menu .footer a {
    color: #1e40af !important; /* Blue text for footer link */
    font-weight: 500 !important;
}

.notifications-menu .dropdown-menu .footer a:hover {
    background-color: rgba(30, 64, 175, 0.2) !important; /* Light blue on hover */
}

/* POS Button Styling */
/* =================== */

/* Primary POS buttons (Multiple Pay) */
.pos-btn-primary {
    background-color: var(--theme-color, #1e40af) !important;
    color: var(--theme-text-color, #ffffff) !important;
    border: 2px solid var(--theme-color, #1e40af) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.pos-btn-primary:hover {
    background-color: var(--theme-hover-color, #2563eb) !important;
    border-color: var(--theme-hover-color, #2563eb) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Success POS buttons (Cash) */
.pos-btn-success {
    background-color: #22c55e !important;
    color: white !important;
    border: 2px solid #22c55e !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.pos-btn-success:hover {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Danger POS buttons (Cancel/Delete) */
.pos-btn-danger {
    background-color: #ef4444 !important;
    color: white !important;
    border: 2px solid #ef4444 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.pos-btn-danger:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Secondary POS buttons (Draft, Quotation, etc.) */
.pos-btn-secondary {
    background-color: #6b7280 !important;
    color: white !important;
    border: 2px solid #6b7280 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.pos-btn-secondary:hover {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Warning POS buttons (Suspend) */
.pos-btn-warning {
    background-color: #f59e0b !important;
    color: white !important;
    border: 2px solid #f59e0b !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.pos-btn-warning:hover {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Info POS buttons (Recent) */
.pos-btn-info {
    background-color: #3b82f6 !important;
    color: white !important;
    border: 2px solid #3b82f6 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.pos-btn-info:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Purple POS buttons (Credit Sale) */
.pos-btn-purple {
    background-color: #8b5cf6 !important;
    color: white !important;
    border: 2px solid #8b5cf6 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.pos-btn-purple:hover {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Pink POS buttons (Card) */
.pos-btn-pink {
    background-color: #ec4899 !important;
    color: white !important;
    border: 2px solid #ec4899 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.pos-btn-pink:hover {
    background-color: #db2777 !important;
    border-color: #db2777 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Button icon styling */
.pos-btn i {
    font-size: 1.1em !important;
    margin-right: 4px !important;
}

/* Button responsiveness */
@media (max-width: 768px) {
    .pos-btn {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
    }
}

/* Auth2 Page Specific Styling */
/* ========================== */

/* Light blue background from auth2 page with background image */
body.pace-done {
    background: linear-gradient(rgba(239, 246, 255, 0.85), rgba(239, 246, 255, 0.85)), url('/img/login-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Override backgrounds in auth2 containers */
.eq-height-row,
.right-col {
    background: transparent !important;
}

/* Light blue from container-fluid in auth2 */
.container-fluid {
    background: #EFF6FF !important;
}

/* Override any row backgrounds */
.row {
    background: transparent !important;
}

/* Update wizard content background */
.wizard > .content {
    background-color: #EFF6FF !important;
}

/* Light blue from pace loading elements */
.pace,
.pace-done {
    background: #EFF6FF !important;
}

/* Override AdminLTE auth backgrounds */
.auth-page,
.login-page,
.register-page {
    background: linear-gradient(rgba(239, 246, 255, 0.85), rgba(239, 246, 255, 0.85)), url('/img/login-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* White login card styling */
.auth-form,
.login-form,
.register-form {
    background: #ffffff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure login card and its containers are white */
.tw-bg-white,
.tw-p-5.tw-rounded-2xl,
.tw-shadow-sm.tw-ring-1 {
    background-color: #ffffff !important;
}

/* Override blue backgrounds specifically on auth pages */
body.pace-done .tw-bg-white {
    background-color: #ffffff !important;
}

/* Make sure the login form container is white */
.col-md-4 > div {
    background-color: #ffffff !important;
}