@charset "UTF-8";

 :root {
            --header-bg: lightseagreen; /* Default blue */
            --footer-bg: #f0f0f0; /* Default light gray */
            --header-text-color: white; /* Default white */
            --footer-text-color: #333; /* Default dark gray */
        }

/* When --header-bg is white or #fff, override styles */
:is([style*="--header-bg: white"], [style*="--header-bg: #fff"], [style*="--header-bg: #ffffff"]) {
    --header-bg: #f0f0f0 !important; /* Apply grey background */
    --header-text-color: #000 !important; /* Apply black text */
}
/* When --footer-bg is white or #fff, override styles */
:is([style*="--footer-bg: white"], [style*="--footer-bg: #fff"], [style*="--header-bg: #ffffff"]) {
    --footer-bg: #fff !important; /* Apply grey background */
    --footer-text-color: #000 !important; /* Apply black text */
}

html, body {
            margin: 0;
            padding: 0;
            min-height: 100vh; /* Ensure full viewport height */
            display: flex;
            flex-direction: column;
        }

        body {
            flex: 1;
        }

        main {
            flex: 1;
        }
 
        header, button, .btn-floating {
        	background-color: var(--header-bg);
            color: var(--header-text-color);
        }
         footer {
            background-color: var(--footer-bg);
            color: var(--footer-text-color);
            text-align: center;
        }
         nav { 
           background-color: var(--header-bg); /* Example color */
        }
         nav .brand-logo {
            transition: margin 0.3s ease; /* Smooth transition for logo */
        }
      
        header img {
            height: 40px;
        }
		
		.modal {
			background-color: var(--footer-bg);
		}
		.modal.bottom-sheet{
			max-height: 75%;
		}
		
 		@media only screen and (max-width: 992.99px){
 			.modal {width: 100%;}
 		}
 		
 		
   		.responsive-btn {
 		   width: 100%; /* Full width by default */
		}
		@media (min-width: 600px) { /* Medium screens */
		    .responsive-btn {
		        width: 50%;
		    }
		}
		@media (min-width: 992px) { /* Large screens */
		    .responsive-btn {
		        width: 33.33%;
		    }
		}
        
        .header .apartment-name {
            font-size: 1.5rem;
            font-weight: bold;
        }
        .header .menu-icon {
            font-size: 2rem;
            cursor: pointer;
        }

        /* Side Navigation */
        .sidenav {
            width: 300px;
        }
        .sidenav .user-view {
            background-color: var(--header-bg); 
            color: var(--header-text-color);
        }
        .sidenav .user-view img {
            border-radius: 50%;
        }
        .sidenav .user-info {
            margin-top: 15px;
        }

    /* btn loading css */  
    .btn-loading {
        position: relative;
        cursor: not-allowed;
    }
    .btn-loading::after {
        content: ".....";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 2px;
    }
    .btn-loading::after {
        animation: dots 1.5s infinite linear;
    }
    @keyframes dots {
        0% {
            content: "Pls wait...";
        }
        33% {
            content: "Pls wait...";
        }
        66% {
            content: "Pls wait...";
        }
        100% {
            content: "Pls wait...";
        }
    }
    /* btn loading css ends */      
    
        /* Skeleton CSS */
       .skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}
       .skeleton-header {
  width: 80%;
  height: 20px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

.skeleton-line {
  margin-top: 1rem;
  width: 100%;
  height: 15px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

.skeleton-line.short {
  width: 60%;
}

       @keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/*Skeleton ends*/

.cursor-pointer {
	cursor: pointer;
}

.cross-mark {
	position: relative;
	background-color: #f0f0f0;
}
.cross-mark::before, .cross-mark::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 100%;
	background-color: red;
	transform-origin: center;
}
.cross-mark::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.cross-mark::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.helper-text-font {
	color: rgba(0, 0, 0, 0.54);
	font-size: 12px;
}

.toast { /* General toast styles */
	top: auto;
}

.toast-bottom-right { /* Specific position styles */
    bottom: 20px;
    right: 20px;
}
.toast-bottom-left {
    bottom: 20px;
    left: 20px;
}
.toast-top-right {
    top: 20px;
    right: 20px;
}
.toast-top-left {
    top: 20px;
    left: 20px;
}
.toast-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header-bg-color {
	color: orangered  !important;
}
/* ... other position styles */
  
        /* Fixed Bottom Navigation - WhatsApp Style */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        }
        .bottom-nav a {
            flex-grow: 1;
            text-align: center;
            color: #757575;
            font-size: 12px;
        }
        .bottom-nav a.active {
            color: var(--header-bg);
        }
        .bottom-nav i {
            display: block;
            font-size: 24px;
            margin-bottom: 3px;
        }