/* Base Dark Mode */
body.dark-mode {
    background-color: #121212ba !important;   /* Dark background for the body */
    color: #9db6a9;              /* Light text color for better readability */
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Make sure links are distinguishable */
body.dark-mode a {
    color: #9db6a9 !important;   /* Light purple links for better visibility */
    text-decoration: none;      /* Remove underline */
}

body.dark-mode a:hover {
    text-decoration: underline;   /* Underline on hover for links */
    color: #3700b3;               /* Darker purple on hover */
}

/* Apply dark theme to all elements */
body.dark-mode * {
    background-color:#49514b !important;  /* Background of all elements */
    color: #9db6a9 !important;             /* Light text for all elements */
    border-color: #333333 !important;     /* Border color for inputs and other elements */
}

/* Button styling */
 body.dark-mode b {
    background-color:  transparent !important;    /* Dark button background */
    color: #9db6a9 !important;;               /* Light text color */
   /* border: 1px solid #555555 !important; */   /* Dark border */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

body.dark-mode button:hover {
    background-color: #444444;    /* Slightly lighter background on hover */
}

body.dark-mode button.clicked {
    background-color: white !important;
    color: black !important;
}

/* Input & Textarea */
body.dark-mode input,
body.dark-mode textarea {
    background-color: #333333;     /* Dark background for input fields */
    color: #E0E0E0 !important;                /* Light text for input */
    border: 1px solid #555555;     /* Dark border */
    padding: 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus {
    border-color: #bb86fc;         /* Purple border on focus */
    outline: none;
    background-color: #444444;     /* Slightly lighter background on focus */
}

/* Cards/Containers */
body.dark-mode .card, 
body.dark-mode .container, 
body.dark-mode .modal {
    background-color: #1F1F1F;      /* Slightly lighter background for cards */
    border: 1px solid #333333;      /* Dark borders around cards */
 
    border-radius: 8px;
   /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
   box-shadow : none !important
}

/* Header/Footer */
body.dark-mode header, 
body.dark-mode footer {
    background-color: #181818;      /* Dark background for header/footer */
    color: #E0E0E0;                 /* Light text color */
  
    text-align: center;
}

/* Table Styling */
body.dark-mode table {
    width: 100%;
    border-collapse: collapse;
}

body.dark-mode th, 
body.dark-mode td {
    
    text-align: left;
    border-bottom: 1px solid #333333;
}

body.dark-mode th {
    background-color: #333333;
}

body.dark-mode tr:nth-child(even) {
    background-color: #2C2C2C;
}

/* Modals */
body.dark-mode .modal {
    background-color: #1F1F1F;    /* Dark background for modals */
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
}

body.dark-mode .modal-header {
    background-color: #333333;     /* Dark header background in modals */
    color: #E0E0E0;
}

/* Dark mode scrollbar (optional, for modern browsers) */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background-color: #444444;
    border-radius: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background-color: #222222;
}

body.dark-mode .no-bg{
	background-color: unset !important;
}
/* The .no-bg class unsets the background */
body.dark-mode .no-bg {
    background-color: unset !important;   /* Remove background from elements with .no-bg */
    color: black !important;
    border: 0px;
}

/* Additional customization for .no-bg elements */
 
body.dark-mode .no-bg h1, 
body.dark-mode .no-bg h2,
body.dark-mode .no-bg label,
body.dark-mode .no-bg p,
body.dark-mode .no-bg i{
	background-color: transparent !important;
}

body.dark-mode i,body.dark-mode h2,  body.dark-mode span {
	background-color: transparent !important;
}

body.dark-mode #dashboard h2, body.dark-mode #story-div h2, body.dark-mode .events-accordion .accordion-button:not(.collapsed), body.dark-mode .events-accordion .accordion-button, 
body.dark-mode button.accordion-button {
	color :#9db6a9 !important;
}

body.dark-mode .story-wrapper{
	scrollbar-color: #28a745 #f0f0f096 !important;
}

body.dark-mode .toggle-area, body.dark-mode button {
    background: linear-gradient(to right, #3c5240, #3a6358) !important 
}

body.dark-mode .events-container, body.dark-mode .tour-controls{
		background-color: transparent !important;
		border : none !important;
}

body.dark-mode .events-table th , body.dark-mode #listaMag th{
    background: #1a281e3b !important;
}

body.dark-mode .fc-toolbar.fc-header-toolbar{
background : transparent !important;
}

@media only screen and (max-width: 990px) {
 body.dark-mode  .mobile-title {
        margin-top: 6px;
 }
}

body.dark-mode .event-action-btn.danger,body.dark-mode .btn-outline-danger, body.dark-mode .shared-modal-footer button.cancel, body.dark-mode .btn-remove, body.dark-mode .event-form-button-cancel {
background : #7b2931 !important;
}

body.dark-mode .fc-unthemed td.fc-today{
	background :  #9db6a94f !important;
}

body.dark-mode .fc td.fc-today {
    border-style: double;
}

body.dark-mode .accordion-item:last-of-type .accordion-button.collapsed, body.dark-mode .event-form-button{
	    background: linear-gradient(to right, #3c5240, #607e7673) !important;
}

body.dark-mode .hover-underline {
    cursor: pointer;
}
body.dark-mode .lineBreak {
    word-wrap: break-word;
    word-break: break-word;
}


body.dark-mode #headerMenu, body.dark-mode .category-title, body.dark-mode .printer-checkbox-container{
	background : linear-gradient(to right, #3c5240, #41474673) !important;
	box-shadow: none !important;
}

body.dark-mode #divPrinter{
	padding-right: 0px!important;
	padding-left:0px!important;
}

body.dark-mode #sharedModalOverlay{
	background: #6f8674 !important 
}


body.dark-mode #normalUser h5, #hostUser h5 {
    padding-bottom: 0 !important;
    background: transparent !important;
}

body.dark-mode .notification-badge{
	color: #e9ecef !important;
    background: red !important;
}

body.dark-mode .toDo *{
	color : #d41515f5 !important;
}

body.dark-mode .completed *{
    color: rgb(42 183 42 / 83%) !important;
}

body.dark-mode .inProgress *{
    color: #FFA500 !important;
}

body.dark-mode .exp *{
    color: rgb(255 0 128 / 57%) !important;
}

body.dark-mode .almostExp *{
    color: rgb(255 128 0 / 66%) !important;
}

@media (max-width: 600px) {
body.dark-mode  #mobileBottomFooter {
        background: #49514b !important;
        border-top: solid 2px #0a2310 !important;
    }
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1025px) {
body.dark-mode .events-table td:before {
    color :#9db6a9 !important; 
    }
    }


@media (max-width: 600px) {
body.dark-mode  #addEntitySummary {
	width: 98% !important;
    }
}


body.dark-mode .col-1, body.dark-mode .category-section, body.dark-mode .category-header, body.dark-mode #printerConnection{
	background: transparent !important;
}


body.dark-mode .img-fluid {
	height: 100% !important;
    opacity: 0.8 !important;
}

body.dark-mode .group-header *{
	background: #5b8465 !important;
}

body.dark-mode .row{
	--bs-gutter-x: 0.5rem !important;
}

body.dark-mode .file-label{
	color : #baa25d !important;
	font-weight: bold;
	cursor: pointer !important;
	border: solid 1px #baa25d !important;
}

body.dark-mode .jstree-default .jstree-wholerow-clicked, body.dark-mode .jstree-default .jstree-clicked{
	background : transparent !important;
}


body.dark-mode .item-header {
    padding: 2px;
    }
    

body.dark-mode .menu-item-card.sold-out {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f0f0f033;
    pointer-events: none;
}

body.dark-mode .menu-item-card.sold-out:hover {
    transform: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}


body.dark-mode .quantity-badge {
    background: linear-gradient(135deg, #148a2f, #069067);
    color: white;
    border-radius: 50%;
    width: 50px; /* Reduced from 60px */
    height: 50px; /* Reduced from 60px */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem; /* Reduced from 1.4rem */
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

body.dark-mode .menu-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(40, 167, 69, 0.2) !important;
    border-color: rgba(40, 167, 69, 0.3) !important;
}
body.dark-mode .menu-item-card:hover .item-overlay {
    opacity: 1;
}

body.dark-mode .item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent!important;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 20px;
}


body.dark-mode .feature-item-list, body.dark-mode .policy-list-item-list {
    background-color: #e1e1e182 !important;
    border-left: 3px solid #28a745;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 47%);
    margin-bottom: 15px;
    padding: 15px;
} 

body.dark-mode .feature-list .feature-item-list, body.dark-mode .policy-list .policy-list-item-list  {
    background-color: #97b89e4a !important;
    border-left: 3px solid #28a745;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 47%);
    margin-bottom: 15px;
    padding: 15px;
}

body.dark-mode .feature-list .feature-item-list h3 ,body.dark-mode .feature-list .feature-item-list p, body.dark-mode .policy-list .policy-list-item-list h3  {
	background:transparent !important;
}

body.dark-mode .policy-header{
	background: #49514b !important;
}

body.dark-mode input::placeholder {
	color : #E0E0E0 !important;
}

body.dark-mode .shepherd-cancel-icon, body.dark-mode .shepherd-header h3{
	background : transparent !important;
}

body.dark-mode .shepherd-header{
	 background-color: #97b89e4a !important;
}

body.dark-mode .custom-shepherd .shepherd-button{
	background : linear-gradient(to right, #3c5240, #607e7673) !important;
	border: solid 1.5px #3c5240;
}