/* CSS Variables for Dashboard Colors */
:root {
    --dashboard-card-bg: #eff6ff;
    --dashboard-border-color: #3b82f6;
    --dashboard-icon-bg: rgba(59, 130, 246, 0.15);
    --dashboard-text-color: #3b82f6;
}

/* 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;
}

/* ========================================= */
/* DASHBOARD CARD STYLING - MODERN DESIGN  */
/* ========================================= */

/* Card Background Colors - Dark Theme with Blue Border */
.dashboard-card-bg,
.dashboard-card-1,
.dashboard-card-2,
.dashboard-card-3,
.dashboard-card-4,
.dashboard-card-5,
.dashboard-card-6,
.dashboard-card-7,
.dashboard-card-8 {
    background: #1a1a1a !important; /* Dark background */
    border: 2px solid #3b82f6 !important; /* Blue border */
}

/* Card Icon Background Colors - Blue Tint */
.dashboard-icon-1,
.dashboard-icon-2,
.dashboard-icon-3,
.dashboard-icon-4,
.dashboard-icon-5,
.dashboard-icon-6,
.dashboard-icon-7,
.dashboard-icon-8 {
    background-color: rgba(59, 130, 246, 0.15) !important; /* Light blue tint */
}

/* Card Text Colors */
.dashboard-card-text {
    color: #3b82f6 !important; /* Blue color for icons */
}

.dashboard-card-text-light {
    color: rgba(59, 130, 246, 0.8) !important;
}

.dashboard-card-text-label {
    color: #9ca3af !important; /* Gray text for labels */
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 0.875rem !important; /* Larger font for 200px cards */
    line-height: 1.2 !important;
}

.dashboard-card-value {
    color: #3b82f6 !important; /* Blue text for values */
    font-size: 1.5rem !important; /* Larger font for 200px cards */
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Card Hover Effects */
.dashboard-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3) !important;
    border-color: #60a5fa !important; /* Lighter blue on hover */
}

/* Dashboard Cards Container */
.dashboard-cards-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important; /* 6 columns */
    gap: 1rem !important;
    width: 100% !important;
}

/* Card Border and Shadow */
/* Dashboard Cards Container - Full Width Grid */
.dashboard-cards-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    width: 100% !important;
}

.dashboard-cards-container > .dashboard-card {
    flex: 1 1 calc(16.666% - 1rem) !important; /* 6 cards per row with gap */
    min-width: 150px !important;
    max-width: none !important;
    height: 180px !important;
}

/* Responsive adjustments */
@media (max-width: 1536px) {
    .dashboard-cards-container > .dashboard-card {
        flex: 1 1 calc(20% - 1rem) !important; /* 5 cards per row */
    }
}

@media (max-width: 1280px) {
    .dashboard-cards-container > .dashboard-card {
        flex: 1 1 calc(25% - 1rem) !important; /* 4 cards per row */
    }
}

@media (max-width: 1024px) {
    .dashboard-cards-container > .dashboard-card {
        flex: 1 1 calc(33.333% - 1rem) !important; /* 3 cards per row */
    }
}

@media (max-width: 768px) {
    .dashboard-cards-container > .dashboard-card {
        flex: 1 1 calc(50% - 1rem) !important; /* 2 cards per row */
    }
}

@media (max-width: 640px) {
    .dashboard-cards-container > .dashboard-card {
        flex: 1 1 100% !important; /* 1 card per row */
    }
}

/* Card Border and Shadow */
.dashboard-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--dashboard-card-bg) !important;
    border: 2px solid var(--dashboard-border-color) !important;
}

/* Dashboard cards container */
.dashboard-cards-container {
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1rem !important;
    justify-content: start !important;
}

/* Icon Styling */
.dashboard-card-icon {
    width: 3.5rem !important;
    height: 3.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.75rem !important;
}

.dashboard-card-icon svg {
    width: 2rem !important;
    height: 2rem !important;
    stroke-width: 2.5 !important;
}

/* Chart containers - Light blue background with blue border */
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1 {
    background-color: var(--dashboard-card-bg) !important;
    border: 2px solid var(--dashboard-border-color) !important;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .dashboard-card-value {
        font-size: 1.25rem !important;
    }
    
    .dashboard-card-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    .dashboard-card-icon svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    .dashboard-card {
        aspect-ratio: auto !important; /* Remove square on mobile for better content fit */
    }
}

/* 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;
}