.none{
    display: none;
}
#dataRows i{
    cursor: pointer;
    font-size: 19px;
}

/* Dark Mode Styles */
.dark-mode {
    background-color: #222;
    color: white;
}

/* Dark Mode for Navbar */
.dark-mode .navbar {
    background-color: #111 !important;
    border-bottom:1px solid #777;
}

.dark-mode .container.card-body {
    background-color: #333;
    color: white;
    border-radius: 10px;
}

.dark-mode #productTable {
    background-color: #444;
    border-radius: 10px;
}

.dark-mode .table-primary {
    background-color: #555 !important;
    color: white;
}

.dark-mode .alert-primary {
    background-color: #666;
    color: white;
    border-color: #888;
}

/* Dark Mode for Buttons */
.dark-mode .btn-primary {
    background-color: #0056b3;
    border-color: #084485;
}

.dark-mode .btn-danger {
    background-color: #bd2130;
    border-color: #7d1a23;
}


.dark-mode .card{
    background-color: #777;
} 
.dark-mode .badge-secondary {
    background-color: #777;
    color: white;
}

/* Dark Mode for Modals */
.dark-mode .modal-content {
    background-color: #333;
    color: white;
    border: 1px solid #555;
}

.dark-mode .modal-header {
    background-color: #444;
    border-bottom: 1px solid #666;
}

.dark-mode .modal-footer {
    background-color: #444;
    border-top: 1px solid #666;
}

/* Dark Mode for Input Fields */
.dark-mode .form-control {
    background-color: #555;
    color: white;
    border: 1px solid #777;
}

.dark-mode .form-control::placeholder {
    color: #bbb;
}

/* Dark Mode for Table */
.dark-mode .table-primary {
    background-color: #555 !important;
    color: white;
}

.dark-mode .table-striped-columns tbody tr:nth-of-type(odd) {
    background-color: #666;
}

.dark-mode .table-striped-columns tbody tr:nth-of-type(even) {
    background-color: #777;
}
.dark-mode .table-primary td ,
.dark-mode .table-primary thead th
{
    border-color: #777 !important;
}
.dark-mode .text-primary{
    color: #084485 !important;
}



/*responsive to small screen*/
@media (max-width: 768px) {
/*dark mode for action list */
    .dark-mode .dropdown-menu {
        background-color: #343a40 !important;
        /* Dark background */
        border: 1px solid #495057 !important;
        /* Border color */
    }

    .dark-mode .dropdown-item {
        color: #fff !important;
        /* White text */
    }

    .dark-mode .dropdown-item:hover {
        background-color: #495057 !important;
        /* Darker hover */
    }

/*edit on cost table in view model action*/
    #costTable thead {
        display: none;
        /* Hide table headers on small screens */
    }

    #costTable tbody tr {
        display: flex;
        flex-direction: column;
        /* Stack data in columns */
        border: 1px solid #ddd;
        margin-bottom: 10px;
        padding: 10px;
    }

    #costTable tbody tr td {
        display: flex;
        justify-content: space-between;
        padding: 5px;
        border-bottom: 1px solid #ccc;
    }

    #costTable tbody tr td:before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 10px;
    }

        /* Reduce padding */
        .table td,
        .table th {
            padding: 5px;
        }
    
        /* Center align action buttons */
        .table td:last-child {
            text-align: center;
        }
}