/**
 * GeM Bid Monitor — Theme CSS Overrides
 *
 * This file contains custom styles that sit on top of the Metronic UI kit
 * (style.bundle.css). It overrides Metronic defaults where needed and adds
 * GeM-specific component styles.
 *
 * Load order: plugins.bundle.css → style.bundle.css → theme.css → style.css
 *
 * @package GeM_Bid_Monitor
 * @author  AKS Qubit Technologies Pvt. Ltd.
 */

/* ==========================================================================
   1. Dark Mode Overrides
   When dark mode is active, override Metronic's default surface colours
   with the GeM command-center palette (near-black navy tones).
   ========================================================================== */

[data-bs-theme="dark"] {
    --kt-app-bg-color: #0a0e1a;             /* Main page background */
    --kt-app-sidebar-base-bg-color: #111827; /* Sidebar background */
}

/* ==========================================================================
   2. Sidebar
   ========================================================================== */

/* Remove text underline from sidebar logo link */
.app-sidebar-logo a {
    text-decoration: none !important;
}

/* ==========================================================================
   3. Toast Notifications (Fallback Container)
   Used only when Toastr (from Metronic bundle) is not available.
   Positions toasts in the top-right corner above all other content.
   ========================================================================== */

.gem-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
}

/* ==========================================================================
   4. Confirmation Modal
   Slightly rounded corners for the SweetAlert2 fallback modal.
   ========================================================================== */

.gem-confirm-modal .modal-content {
    border-radius: 12px;
}

/* ==========================================================================
   5. Scheduler Frequency Cards
   On the /scheduler page, frequency options are displayed as selectable
   cards. The .active class is toggled by JS when the user clicks one.
   ========================================================================== */

.gem-freq-card.active {
    border-color: var(--kt-primary) !important;
    background-color: var(--kt-primary-light) !important;
}

/* ==========================================================================
   5b. Theme Mode Cards
   Selectable cards on the Appearance settings tab.
   ========================================================================== */

.gem-theme-mode-card {
    transition: all 0.2s ease;
}

.gem-theme-mode-card:hover .card {
    border-color: var(--kt-primary) !important;
}

/* ==========================================================================
   6. Clickable Bid Rows
   Rows in the bids table have cursor:pointer (via .cursor-pointer utility).
   Add a subtle hover highlight for visual feedback.
   ========================================================================== */

.gem-bid-row:hover {
    background-color: var(--kt-gray-100) !important;
}

/* Dark mode: use a very subtle white overlay instead */
[data-bs-theme="dark"] .gem-bid-row:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ==========================================================================
   7. DataTables Customisation
   The bids page has its own filter bar above the table, so we hide
   DataTables' built-in search input to avoid duplication.
   ========================================================================== */

#bids-table_wrapper .dataTables_filter {
    display: none;
}

/* ==========================================================================
   9. Print Styles
   When printing, hide the sidebar, header, and toolbar to show only
   the main content area. Useful for exporting bid tables to PDF.
   ========================================================================== */

@media print {
    .app-sidebar,
    .app-header,
    .app-toolbar {
        display: none !important;
    }
    .app-content {
        margin: 0 !important;
        padding: 0 !important;
    }
}