/* CSS Variables for Dashboard Colors */
:root {
    --dashboard-card-bg: #FFFFFF;
    --dashboard-border-color: #D6B76A;
    --dashboard-icon-bg: rgba(214, 183, 106, 0.15);
    --dashboard-text-color: #D6B76A;
    --primary-navy: #0C1F33;
    --champagne-gold: #D6B76A;
    --soft-grey: #E6E666;
    --crystal-white: #FFFFFF;
    --navy-light: #1a3a52;
    --navy-dark: #071520;
    --gold-light: #e5c88a;
    --gold-dark: #b89850;
}

/* Override header gradient classes to use Deep Navy */
.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, #0C1F33, #1a3a52) !important; /* Deep Navy gradient */
}

.tw-from-red-800,
.tw-bg-red-800,
.tw-from-primary-800,
.tw-bg-primary-800 {
    background-color: #0C1F33 !important; /* Deep Navy */
}

.tw-to-red-900,
.tw-bg-red-900,
.tw-to-primary-900,
.tw-bg-primary-900 {
    background-color: #1a3a52 !important; /* Navy Light */
}

/* Override indigo and blue gradient classes to Deep Navy */
.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, #0C1F33, #1a3a52) !important; /* Deep Navy gradient */
}

.tw-from-indigo-600,
.tw-bg-indigo-600 {
    background-color: #0C1F33 !important; /* Deep Navy */
}

.tw-to-blue-500,
.tw-bg-blue-500 {
    background-color: #1a3a52 !important; /* Navy Light */
}

.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 - Crystal White with Champagne Gold 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: #FFFFFF !important; /* Crystal White background */
    border: 2px solid #D6B76A !important; /* Champagne Gold border */
}

/* Card Icon Background Colors - Champagne Gold 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(214, 183, 106, 0.15) !important; /* Light champagne tint */
}

/* Card Text Colors */
.dashboard-card-text {
    color: #D6B76A !important; /* Champagne Gold for icons */
}

.dashboard-card-text-light {
    color: rgba(214, 183, 106, 0.8) !important;
}

.dashboard-card-text-label {
    color: #6b7280 !important; /* Gray text for labels on light background */
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
}

.dashboard-card-value {
    color: #0C1F33 !important; /* Deep Navy for values on light background */
    font-size: 1.5rem !important;
    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(214, 183, 106, 0.5) !important;
    border-color: #b89850 !important; /* Darker gold 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(214, 183, 106, 0.2) !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 - Crystal White background with Champagne Gold border */
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1 {
    background-color: #FFFFFF !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, #0C1F33) !important;
    color: var(--theme-text-color, #FFFFFF) !important;
    border: 1px solid #D6B76A !important;
}

.header-btn:hover {
    background-color: var(--theme-hover-color, #1a3a52) !important;
    box-shadow: 0 2px 4px rgba(214, 183, 106, 0.3) !important;
    border-color: #e5c88a !important;
}

.header-btn-active {
    background-color: #D6B76A !important;
    color: #0C1F33 !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, #0C1F33) !important;
    color: var(--theme-text-color, #FFFFFF) !important;
    border: 1px solid #D6B76A !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: #ffffff !important; /* Light cream background */
    border-color: #E6E666 !important; /* Soft Grey border */
    color: #0C1F33 !important;
}

/* Enhanced Navy/Gold color scheme for active items */
.list-group-item.active {
    background-color: #0C1F33 !important; /* Deep Navy for active item */
    border-color: #D6B76A !important; /* Champagne Gold border */
    color: #FFFFFF !important;
    box-shadow: 0 0 0 2px rgba(214, 183, 106, 0.35) !important; /* Gold 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: #1a3a52 !important; /* Slightly lighter Navy on hover/focus */
    border-color: #e5c88a !important; /* Lighter gold */
}

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

/* For list-group headers or special elements */
.list-group-item-heading {
    color: #D6B76A !important; /* Champagne Gold for headings */
}

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

/* Light cream color for pos-tab-content */
.pos-tab-content {
    background-color: #ffffff !important; /* Light cream color */
}

/* Notification dropdown styling to match header buttons */
.notifications-menu .dropdown-menu {
    background-color: #FFFFFF !important; /* Crystal White background */
    border: 1px solid #D6B76A !important; /* Champagne Gold border */
}

.notifications-menu .notification-li.unread {
    background-color: rgba(214, 183, 106, 0.15) !important; /* Light gold background */
}

.notifications-menu .dropdown-menu .footer a {
    color: #0C1F33 !important; /* Deep Navy for footer link */
    font-weight: 500 !important;
}

.notifications-menu .dropdown-menu .footer a:hover {
    background-color: rgba(214, 183, 106, 0.2) !important; /* Light gold on hover */
}

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

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

.pos-btn-primary:hover {
    background-color: var(--theme-hover-color, #1a3a52) !important;
    border-color: #e5c88a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(214, 183, 106, 0.3) !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: #0C1F33 !important;
    color: white !important;
    border: 2px solid #D6B76A !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.pos-btn-info:hover {
    background-color: #1a3a52 !important;
    border-color: #e5c88a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(214, 183, 106, 0.3) !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 cream background for auth2 page with background image */
body.pace-done {
    background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), 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 cream from container-fluid in auth2 */
.container-fluid {
    background: #ffffff !important;
}

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

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

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

/* Override AdminLTE auth backgrounds */
.auth-page,
.login-page,
.register-page {
    background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), 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;
}