.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-right: 8px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #66bb6a; /* Green for active */
}

input:checked + .slider:before {
    transform: translateX(26px);
    background-color: #fff;
}

input:not(:checked) + .slider {
    background-color: #ff7043; /* Orange for inactive */
}

input:not(:checked) + .slider:before {
    transform: translateX(0);
    background-color: #fff;
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.slider i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

.light-icon {
    left: 7.5px;
    color: #c5b313;
}

.dark-icon {
    right: 8px;
    color: #000; /* White for dark mode icon */
}

input:checked + .slider .light-icon {
    display: none;
}

input:not(:checked) + .slider .dark-icon {
    display: none;
}

.footer-total {
    background: #dbdbdb;
}

.align-right {
    text-align: right;
}

.aline-center {
    text-align: center;
}

.align-left {
    text-align: left;
}

td.footer_total_bill.align-middle {

}

table.dataTable tfoot tr.footer-total td {
    padding: 8px 10px;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
}

a.dt-button.buttons-columnVisibility {
    background: linear-gradient(to bottom, #343a4075 0%, #5559 100%);
}


/* Add these styles to your main CSS file or create a separate dark-mode.css file */
body.dark-mode {
    background-color: #3f3f3f;
    color: #ffffff;
}

.dark-mode .navbar {
    background-color: #1e1e1e;
}

.dark-mode .card, .dark-mode .navbar-brand-wrapper, .dark-mode .navbar-collapse, .dark-mode .card .card-header, .dark-mode .list-group-item, .dark-mode .table td, .dark-mode .table th, .dark-mode .table thead th, .dark-mode a.dt-button, .dark-mode .dataTables_paginate .paginate_button.current, .dark-mode div.dataTables_wrapper div.dataTables_info, .dark-mode div.dataTables_wrapper div.dataTables_paginate, .dark-mode .dt-button-collection a.dt-button.buttons-columnVisibility.active, .dark-mode .dataTables_wrapper .dataTables_filter input {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

.dark-mode div.dt-button-collection a.dt-button.active:not(.disabled) {
    background: linear-gradient(to bottom, #343a40 0%, #555 100%);
}

.dark-mode .modal-content {
    background-color: #2b2b2b;
}

.dark-mode .modal-header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #555;
}

.dark-mode .modal-body {
    background-color: #2b2b2b;
    color: #ffffff;
}

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

.dark-mode .form-control {
    background-color: #3f3f3f !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
}

.dark-mode .form-control:focus {
    background-color: #4a4a4a !important;
    border-color: #66bb6a !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 187, 106, 0.25) !important;
}

.dark-mode .form-control::placeholder {
    color: #aaa !important;
}

.dark-mode .input-group-text {
    background-color: #555 !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
}

.dark-mode .input-group-text i {
    color: #ffffff !important;
}

.dark-mode .input-group-text.bg-info {
    background-color: #17a2b8 !important;
}

.dark-mode .input-group-text.bg-info i {
    color: #ffffff !important;
}

.dark-mode .input-group-text.bg-success {
    background-color: #28a745 !important;
}

.dark-mode .input-group-text.bg-success i {
    color: #ffffff !important;
}

.dark-mode .modal-header .bg-info {
    background-color: #17a2b8 !important;
}

.dark-mode .modal-header .bg-success {
    background-color: #28a745 !important;
}

.dark-mode .autocomplete-suggestions {
    background-color: #3f3f3f !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
}

.dark-mode .autocomplete-suggestion {
    color: #ffffff !important;
    border-bottom: 1px solid #555 !important;
}

.dark-mode .autocomplete-suggestion:hover,
.dark-mode .autocomplete-suggestion.active {
    background-color: #4a4a4a !important;
}

.dark-mode .autocomplete-suggestion.selected {
    background-color: #17a2b8 !important;
    color: white !important;
}

.dark-mode .form-text {
    color: #aaa !important;
}

.dark-mode .btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

.dark-mode .btn-secondary:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
}

.dark-mode .close {
    color: #ffffff !important;
    text-shadow: none !important;
    opacity: 0.8;
}

.dark-mode .close:hover {
    color: #ffffff !important;
    opacity: 1;
}

.dark-mode .close:hover {
    color: #ffffff !important;
    opacity: 1;
}

.dark-mode .input-group:focus-within .input-group-text {
    background-color: #66bb6a !important;
}

/* Ensure Font Awesome icons display properly */
.fa, .fas, .far, .fab {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

.fas {
    font-weight: 900 !important;
}

.far {
    font-weight: 400 !important;
}

.fab {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}

/* Specifically ensure fa-cogs displays */
.fa-cogs:before, .fas.fa-cogs:before {
    content: "\f085" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* Additional specific icon fixes */
.fa-cog:before, .fas.fa-cog:before {
    content: "\f013" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-headset:before, .fas.fa-headset:before {
    content: "\f095" !important; /* Using fa-phone since fa-headset doesn't exist in FA 5.0.13 */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-comment:before, .fas.fa-comment:before {
    content: "\f075" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-comment-dots:before, .fas.fa-comment-dots:before {
    content: "\f086" !important; /* Using fa-comments since fa-comment-dots doesn't exist in FA 5.0.13 */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-cogs:before, .fas.fa-cogs:before {
    content: "\f085" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-tools:before, .fas.fa-tools:before {
    content: "\f0ad" !important; /* Using fa-wrench since fa-tools doesn't exist in FA 5.0.13 */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-edit:before, .fas.fa-edit:before {
    content: "\f044" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* Ensure all FontAwesome icons are visible in modals */
.dark-mode .modal .fas,
.dark-mode .modal .fa {
    color: inherit !important;
}

.dark-mode .input-group-prepend .input-group-text .fas,
.dark-mode .input-group-prepend .input-group-text .fa {
    color: #ffffff !important;
}

/* Light mode icon visibility */
.input-group-text .fas,
.input-group-text .fa {
    color: #ffffff;
}

.input-group-text.bg-info .fas,
.input-group-text.bg-info .fa {
    color: #ffffff !important;
}

.input-group-text.bg-success .fas,
.input-group-text.bg-success .fa {
    color: #ffffff !important;
}

.input-group-text.bg-light .fas,
.input-group-text.bg-light .fa {
    color: #6c757d !important;
}

/* Dark mode specific input group styling */
.dark-mode .input-group-text.bg-light {
    background-color: #555 !important;
    border-color: #555 !important;
}

.dark-mode .input-group-text.bg-light .fas,
.dark-mode .input-group-text.bg-light .fa {
    color: #ffffff !important;
}

.dark-mode .text-secondary {
    color: #ffffff !important;
}

.dark-mode .info-value {
    color: #ffffff;
}

.dark-mode .autocomplete-items div {
    color: black;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 630px;
    }
}

@media (min-width: 1200px) and (max-width: 1600px) {
    .widget {
        height: unset !important
    }
}

@media (min-width: 1200px) and (max-width: 1600px) {
    .widget .row .text-muted {
        width: unset !important;
        text-align: left !important;
        word-wrap: break-word !important;
    }
}