/* RESET */
html, body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    background-color: #f8f9fa;
    color: #2d2d2d;
}

/* MAIN LAYOUT */
.admin-panel {
    display: flex;
    width: 100%;
}

/* SIDEBAR FINAL CSS */
.sidebar {
    width: 260px;
    background: #fff;
    border-right: 1px solid #dee2e6;

    position: fixed;
    top: 0;
    left: 0;

    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 10px;
}

/* LOGO */
.sidebar .logo {
    border-bottom: 1px solid #dee2e6;
    padding: 20px;
    text-align: center;
}

.sidebar-logo{
     width: 110px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;

}

/* MENU */
.sidebar ul.menu {
    list-style: none;
    margin: 0;
    padding: 15px;
}


.sidebar ul.menu li {
    /* padding: 10px 15px; */
    cursor: pointer;
    /* border-radius: 6px; */
    transition: all 0.3s ease;
    margin-bottom: 6px;
    font-size: 15px;
    color: #495057;
}

.sidebar ul.menu li > a {
    text-decoration: none;
    color: inherit !important;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
}


.sidebar ul.menu li a i {
    margin-right: 12px;
}


.sidebar ul.menu li:hover > a,
.sidebar ul.menu li.active > a {
    background-color: #00A951;
    color: #fff !important;
}

.sidebar ul.menu li:hover a,
.sidebar ul.menu li.active a {
    color: #fff !important;
}

.sidebar ul.menu li.logout a {
    color: red !important;
}

.main-content {
    margin-left: 260px;     
    width: calc(100% - 260px);
    padding: 25px;
}

.main-content h3 {
    font-weight: 600;
}

.card h6 {
    font-weight: 500;
}

.card i {
    opacity: 0.6;
}

.progress-bar.bg-success {
    background-color: #28a745 !important;
}

.progress-bar.bg-warning {
    background-color: #fd7e14 !important;
}

.progress-bar.bg-danger {
    background-color: #dc3545 !important;
}


/* dashboard section 1 --> cards css*/

.dashboard-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.dashboard-subtext {
    color: #777;
    font-size: 14px;
    margin: 0;
}

.switch-btn {
    font-size: 14px;
    padding: 8px 15px;
}

.stat-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 18px 22px;
    border-radius: 14px;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: 0.25s ease;
}


.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 18px rgba(0,0,0,0.12);
}

/* Card Titles */
.stat-card h6 {
    color: #666;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.stat-card h3 {
    font-size: 24px;
    margin: 0;
    font-weight: 700;
}

.stat-card p {
    margin: 3px 0 0;
    font-size: 12px;
}

.increase { color: #22b122; font-weight: 600; }
.warning  { color: #e67e22; font-weight: 600; }
.subtext  { color: #777; }


.icon-box {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.soft-blue   { background: #e8f1ff; color: #3d7bff; }
.soft-green  { background: #e6f7f1; color: #25a973; }
.soft-purple { background: #f3e9ff; color: #9a59ff; }
.soft-orange { background: #fff2e6; color: #ff8f4a; }
.soft-yellow { background: #fff8db; color: #d4b11f; }
.soft-red    { background: #ffe9ec; color: #ff5167; }



/* dashboard section 2 Payment Status Card */
.payment-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    border: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.payment-card h5 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.property-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 0;
}

.property-name {
    width: 120px;
    font-size: 15px;
    font-weight: 600;
    color: #444;
    margin: 0;
}

/* Status small data boxes */
.status-box {
    background: #f5f5f5;
    border-radius: 10px;
    padding: 8px 14px;
    min-width: 90px;
    text-align: center;
}

.status-box .value {
    font-size: 18px;
    font-weight: 700;
    display: block;
}

.status-box .label {
    font-size: 12px;
    color: #666;
}

/* Color Variants */
.status-box.green {
    background: #e6f7f1;
    color: #1fa463;
}

.status-box.yellow {
    background: #fff7e1;
    color: #e6a027;
}

.status-box.red {
    background: #ffe8e9;
    color: #ff3f57;
}

/* Divider */
.payment-card hr {
    margin: 10px 0;
    border-color: #eee;
}



/* recent activites dashbaord section 3*/
.custom-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
}

.property-block {
  width: 100%;
}

.property-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.property-header h6 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

/* LABELS */
.property-header .right span {
  margin-left: 18px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.paid-label i { color: #4caf50; font-size: 16px; }
.pending-label i { color: #ff9800; font-size: 16px; }
.overdue-label i { color: #f44336; font-size: 16px; }

.paid-label { color: #4caf50; }
.pending-label { color: #ff9800; }
.overdue-label { color: #f44336; }

/* BAR */
.status-bar {
  width: 100%;
  height: 12px;
  background: #eee;
  display: flex;
  border-radius: 20px;
  overflow: hidden;
}

.paid { background: #4caf50; }
.pending { background: #ffc107; }
.overdue { background: #f44336; }


.custom-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.activity-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 22px;
}

.circle-bg {
    width: 38px;
    height: 38px;
    background: #f1f3f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}

.circle-bg i {
    font-size: 18px;
    color: #555;
}

.activity-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.activity-time {
    margin: 3px 0 0;
    font-size: 12px;
    color: #777;
}

/* Booking QSection 1 css*/
.booking-card {
    background: #f4f6fa;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.card-smcard {
    flex: 0 0 20%;
    max-width: 20%;
}

.payment-card{

    flex: 0 0 20%;
    max-width: 20%;
}

.col-payment{
    flex: 1 0 25%;
}
.booking-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px 15px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
    transition: 0.3s ease-in-out;
}

.booking-card:hover {
    transform: translateY(-5px);
}

.booking-card h6 {
    font-size: 15px;
    font-weight: 500;
    color: #555;
    margin-bottom: 6px;
}

.booking-card h3 {
    font-size: 28px;
    font-weight: 700;
}

.yellow-text { color: #f7c843; }
.blue-text   { color: #3a7afe; }
.green-text  { color: #28c76f; }
.purple-text { color: #857ddb; }


/* === SECTION 2: SEARCH BAR + FILTERS === */
.search-active {
    background: #f5f5f5;
    border-radius: 10px;
    border: 1px solid #ccc;
    height: 45px;
    transition: 0.25s;
}

.search-active:focus {
    border-color: #00A951;
    box-shadow: 0 0 0 2px rgba(0,169,81,0.2);
}

.custom-select,
.custom-date {
    height: 45px;
    font-size: 14px;
    border-radius: 10px;
}

.btn-green {
    background-color: #00A951 !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 8px 18px;
}

/* == BOKKING SCETION 3RD==*/
.selected-bar {
    background: #e8f2ff;
    border-radius: 10px;
    padding: 12px 18px;
    font-weight: 500;
}

.action-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 14px;
}
.action-btn:hover {
    background: #f1f5f9;
}

.btn-green {
    background: #4ade80;
    color: white;
}
.btn-green:hover {
    background: #22c55e;
}

.table-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}

.status-badge {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}
.status-blue { background: #e1efff; color: #2563eb; }
.status-yellow { background: #fff7d6; color: #d97706; }
.status-green { background: #dbf9e2; color: #15803d; }
.status-red { background: #fde8e8; color: #c53030; }


.icon-btn {
    font-size: 14px;  
    color: #475569;    
    cursor: pointer;
    margin-right: 2px; 
     
}

.properties-bg {
    font-size: 11px;
    background-color: #cfcfcf91;
}

.icon-btn:hover {
    color: black;
}

.small-text {
    font-size: 12px;
    color: #64748b;
    margin-top: -4px;
}

.users-tst{
    margin-top: -4px;

}

.users-tst i {
    color: #b5c1cc;
    margin-right: 6px;
    font-size: 14px;
}
.table td, .table th {
    font-size: 13px;
}

/* deatils in arrow js include in html */
.details-grid {
    display: flex;               
    justify-content: flex-start;
    gap: 35px;                  
    background: #fafafa;
    padding: 15px 20px;
    border-left: 3px solid #ddd;
}

.details-block {
    min-width: 264px;            
}

.details-block .title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
}

.details-block .value {
    font-size: 12px;
    color: #666;
}

/* GREEN BUTTON */
.add-btn {
    background: #00A951;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

.add-btn i {
    font-size: 14px;
}

.exportbtn{
     border-radius: 10px;
    border: 1px solid #ccc;
    height: 45px;         /* search bar ke height ke same */
    transition: 0.25s;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

}

.search-box{
  position: relative;
}

.search-box i{
    gap: 8px; 
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
  font-size: 14px;
}

.search-box input{
  padding-left: 32px;
}

/* BOOKING NEW FORM (ADD FORM)*/
/* BOOKING NEW FORM (ADD FORM) */
.stepper-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    margin: 20px 0 40px 0;
}

.step-item {
    text-align: center;
    position: relative;
    flex: 1;
}

/* STEP CIRCLE */
.step-circle {
    width: 36px;
    height: 36px;
    background: #C0BEBE;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-weight: 600;
    font-size: 14px;
    z-index: 2;
    position: relative;
    color: #000;
}

/* ACTIVE STEP */
.step-item.active .step-circle {
    background: #22c55e;
    color: #fff;
}

/* COMPLETED STEP */
.step-item.completed .step-circle {
    background: #22c55e;
    color: #fff;
}

.step-item.completed .step-circle::after {
    content: "✓";
    font-size: 16px;
    font-weight: 700;
}

/* CONNECTOR LINE */
.step-item::after {
    content: "";
    position: absolute;
    top: 18px; /* center of circle */
    left: 50%;
    width: 100%;
    height: 2px;
    background: #C0BEBE;
    z-index: 1;
}

/* GREEN CONNECTOR FOR COMPLETED */
.step-item.completed::after {
    background: #22c55e;
}

/* REMOVE LAST CONNECTOR */
.step-item:last-child::after {
    display: none;
}

/* STEP LABEL */
.step-label {
    font-size: 12px;
    margin-top: 6px;
    color: #5a5a5a;
}

/* ACTIVE / COMPLETED LABEL */
.step-item.active .step-label,
.step-item.completed .step-label {
    color: #22c55e;
    font-weight: 500;
}


 

.btn-cancel {
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    background-color: #e6e6e6;
    border: 1px solid #d1d1d1;
    color: #333;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-cancel:hover {
    background-color: #d5d5d5;
    color: #000;
}



/* ---- CARD ---- */
.title {
    font-size: 15px;
    font-weight: 600;
}
.label-text {
    font-size: 13px;
    color: #000000;
      font-weight: 700;
}

/* ---- SEARCH ---- */
.search-box {
    
    border-radius: 5px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
}
.search-input {
    border: none;
    background: none;
    width: 100%;
    font-size: 12px;
    background: #f5f5f5;
}

/* ---- CUSTOMER CARDS ---- */
.customer-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: 0.2s;
}

.customer-card.selected {
    border-color: #2e7d32;
    background: #f1fbf4;
}

.customer-card .selected-check {
    display: none;
}

.customer-card.selected .selected-check {
    display: block;
}



.cust-name {
    font-size: 14px;
    font-weight: 600;
}

.slab-btn.active {
    background-color: #2e7d32 !important;
    color: #fff !important;
    border-color: #2e7d32;
}


.role-tag, .status-tag {
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 4px;
}
.role-tag { background: #d3d3d3; }
.status-tag { background: #4CAF50; color: #fff; }

.line {
    margin: 0;
    font-size: 12px;
}
.small-line { font-size: 11px; color: #666; }
.address { font-size: 11px; color: #444; }
.phone { font-size: 13px; font-weight: 600; }

/* ---- Button ---- */
.continue-btn {
    width: 45%;
    background: #4CAF50;
    color: #fff;
    font-size: 13px;
    padding: 8px 0;
    border-radius: 6px;
}

.search-icon{
     position: absolute;
    right: 12px;    /* right side bring */
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 16px;
    pointer-events: none;
}

.search-icon-right {
    font-size: 18px;
    color: #666;
}

.selected-customer-card {
    background: #eaf7ef;
    border: 1px solid #4CAF50;
    padding: 10px 14px;      /* smaller clean padding */
    border-radius: 6px;
    font-size: 12px;         /* reduce font */
    width: 100%;
}

.selected-title {
    font-size: 13px;
    font-weight: 600;
    color: #257a35;
    margin-bottom: 6px;
}

.sel-item {
    font-size: 12px;
    margin-bottom: 2px !important; /* reduce space */
}

.sel-item strong {
    font-weight: 600;
}


/* booking sec form step 2 css*/

.area-box {
    border: 1px solid #ddd;
    padding: 14px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    transition: 0.3s;
}
.area-box:hover,
.area-box.active {
    border-color: #257a35;
    background: #e8f6ee;
    color: #257a35;
}
.area-box span {
    font-size: 11px;
    font-weight: 400;
}
/*for form steps connected css using js also  */
.form-step { display: none; }
.form-step.active { display: block; }
.step-item.active .step-circle {
    background: #257a35;
    color: #fff;
}

/*booking form title css*/
.title {
    font-size: 21px;
    font-weight: 700;
}

.label-text {
    opacity: 0.8;
     font-size: 13px;
    color: #000000;
      font-weight: 700;
}

.inner-row-card {
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
}

/* booking step 3 total vala card*/
.info-row strong {
    font-size: 15px;
    color: #000000;
    font-weight: 500;
}

.remaining-row strong {
    font-size: 18px;
    font-weight: 600;
}

.remain-value {
    font-size: 20px;
    font-weight: 700;
    color: #28a745; 
}


/*BOOKING FORM STEP-4 CSS*/
.upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 10px 20px;
    text-align: center;
    background: #f8fafc;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
}
.upload-area:hover { background:#eef6ff; }

.file-upload {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    top: 0;
    left: 0;
    cursor: pointer;
}

#signature-canvas {
    width: 100%;
    height: 180px;
    border: 1px dashed #aaa;
    background: #fff;
    border-radius: 8px;
    touch-action: none;
}

.aadharcard-txt{
    position:absolute; 
    inset:0;   
    width:100%;
    height:100%;
    opacity:0; 
    cursor:pointer;
}

.file-design{
    display:none; 
    text-align:center;
     margin-top:10px;

}
/*step 5 booking form QR */
.receipt-card{
 border: round;
 max-width:400px; 
 margin:auto;
  text-align:left;
}

.booking-stepFcard{
background: #fff;
border-radius: 12px; 
border: round;
max-width:400px; 
margin:auto;
text-align:left;
}

.icon-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}


/*.view-bbtn{
    background-color:#fcb01c;
    color:#000
    
}*/

.view-bbtn {
    background-color: #fff;
    color: #000;
    border: 1px solid #fcb01c;
}
.view-bbtn:hover {
    background-color: #fcb01c;
    color: #000;
    border-color: #fcb01c;
}


/*BOOKING VIEW PAGE CSSS*/
/* MAIN VIEW CARD */
.booking-view-card {
    background: #fff;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* PAGE TITLE */
.booking-view-title {
    font-weight: 700;
    color: #00A951;
}

/* CUSTOM TABS */
.custom-nav-tabs .nav-link {
    background: #e9f7f0;
    color: #00A951;
    font-weight: 600;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    transition: 0.3s;
}

.custom-nav-tabs .nav-link:hover {
    background: #d9f3e5;
}

.custom-nav-tabs .nav-link.active {
    background: #00A951;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(0, 169, 81, 0.3);
}

.nav-item {
    padding: 0 8px;
}

/* TAB CONTENT BOX */
.view-box {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* SECTION HEADER */
.section-header {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 6px;
    border-bottom: 3px solid #fcb01c;
    margin-bottom: 20px;
    color: #00A951;
}

/* INFO ROWS */
.info-row {
    display: flex;
    margin-bottom: 12px;
}

.info-label {
    width: 200px;
    font-weight: 600;
    color: #555;
}

.info-value {
    color: #222;
}

/* QR BUTTON */


.qr-btn {
    background-color: #00A951 !important;
    color: #fff !important;
    padding: 6px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    border: none;
}

.custom-header-line {
    border-bottom: 3px solid #fcb01c;
}


.bv-section-header{
    font-size: 18px;
    font-weight: 700;
   
    margin-bottom: 20px;
    color: #00A951;
    
}










/*USER POPUP CSS*/

.popup-small {
    max-width: 650px !important;   
}

.modal-dialog {
    max-width: 400px !important; /* jitna chahiye utna */
}

.user-hr{
    padding-bottom: 4px;;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #111;
}

.form-control.custom-input,
.form-select.custom-input {
    height: 30px;                
    font-size: 12px;             
    background: #f5f6f8;         
    border: 1px solid #d4d4d4;    
    border-radius: 6px;           
    padding: 6px 10px;        
}

.custom-input::placeholder {
    color: #7a7a7a;
    opacity: 1;
}

.form-label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 3px;
    color: #333;
}

.row.g-3 {
    --bs-gutter-y: 6px;         
}

.row.g-3 > [class*='col'] {
    padding-right: 8px;           
    padding-left: 8px;
}

textarea.custom-input {
    height: auto;
    min-height: 75px;
    resize: none;
}

.btn-submit {
    background: #2563eb;         
    color: #fff;
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 6px;
}

.btn-cancel {
    background: #f3f4f6;
    color: #111;
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 6px;
}

.modal-header {
    background: #fff !important;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 4px;
}

.modal-title {
    color: #000;
    font-size: 16px;
    font-weight: 600;
}

.view-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.view-value {
    
    border-radius: 6px;
    font-size: 14px;
    color: #5a626c;
}

.view-row div {
    margin-bottom: 8px;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0px;
}

/*for xl size popup form*/
@media (min-width: 1200px) {
    .modal-xl {
        max-width: 95% !important;
    }
}

/* .modal {
    overflow: hidden !important;
} */

.modal-body {
    padding-top: 10px !important;    
    padding-bottom: 20px !important;  
    overflow-y: auto !important;
}

.modal-content {
    padding-bottom: 15px !important;
}

/* XL Form Spacing Fix */
@media (min-width: 1200px) {

    /* Inside form body gap */
    .modal-xl .modal-body {
        padding-top: 15px !important;      
        padding-bottom: 15px !important;  
        padding-left: 20px !important;
        padding-right: 20px !important;
         max-height: none !important;
        overflow-y: visible !important;
    }

    .modal-xl .modal-footer {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .modal-xl .modal-footer .btn {
        height: 40px !important;
        font-size: 14px !important;
        font-weight: 500;
    }
}


/* PROPERTIES SECTION CSS*/
.property-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 6px rgb(0 0 0 / 6%);
}

.metric-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.metric-value {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #222;
}

.info-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 10px;
}

.metric-blue {
    background: #e9f1ff;
}
.metric-green {
    background: #e8ffe9;
}

.metric-icon {
    font-size: 22px;
}

.text-blue {
    color: #1a73e8;
}

.text-green {
    color: #28a745;
}

.price-box {
    background: #f6ebff;
    padding: 10px 14px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
}

.text-purple {
    color: #8a40d8;
}

.amenities span {
    background: #f2f2f2;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    margin-right: 4px;
    margin-bottom: 4px;
    display: inline-block;
}

/*PROPERTY ADD POP UP FORM CSS*/
.area-btn {
    background: #f1f1f1;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    border: 1px solid #ddd;
}

.area-btn:hover {
    background: #e0e0e0;
}

.switch {
    position: relative;
    width: 42px;
    height: 22px;
    display: inline-block;
}

.switch input {
    display:none;
}

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

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #28a745;
}

input:checked + .slider:before {
    transform: translateX(19px);
}

.properties-addbtn{
    height: 40px !important;
    font-size: 14px !important;
    font-weight: 500;
    padding-bottom:5px;
    margin-top: 8px !important;
    margin-bottom: 0 !important;

}

#addPropertyModal .modal-dialog {
    margin-top: 20px !important;  
    margin-bottom: 0px;
    max-height: calc(100vh - 30px) !important;
}

#addPropertyModal .modal-content {
    overflow: hidden; 
}

#addPropertyModal .modal-body {
    padding-bottom: 5px !important;
}

#addPropertyModal .modal-body .row:last-child {
    margin-bottom: 0 !important;
}

#addPropertyModal .row.g-3 {
    --bs-gutter-y: 2px !important;
}


/* PROPERTY EDIT FORM CSS */

#editPropertyModal .modal-dialog {
    margin-top: 20px !important;
    margin-bottom: 0px;
    max-height: calc(100vh - 30px) !important;
}

#editPropertyModal .modal-content {
    overflow: hidden;
}

#editPropertyModal .modal-body {
    padding-bottom: 5px !important;
}

#editPropertyModal .modal-body .row:last-child {
    margin-bottom: 0 !important;
}

#editPropertyModal .row.g-3 {
    --bs-gutter-y: 2px !important;
}
#editPropertyModal .modal-body {
    max-height: calc(100vh - 160px) !important;
    overflow-y: hidden;
}

#editPropertyModal .modal-footer .btn {
    margin-top: 20px !important;  
}


/*PAYMENT POPUP CSS*/
.payment-modal .modal-content {
    border-radius: 12px;
    padding: 5px;
}

.payment-modal .modal-header {
    border-bottom: 1px solid #eee;
}

.payment-modal .modal-title {
    font-size: 20px;
    font-weight: 600;
}

.modal-label {
    font-size: 12px;
    font-weight: 600;
    color: #777;
    margin-bottom: 0;
}

.modal-value {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.price {
    color: #000;
    font-weight: 700;
}

.green-text {
    color: #00A651;
    font-weight: 600;
}

.status-badge {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 20px;
    display: inline-block;
    font-weight: 600;
}

.status-badge.paid {
    background: #d6f5d6;
    color: #0d8629;
}


/*PAYMENT SLAB CSS*/

/* MAIN WRAPPER */
.pay-slab-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    margin: 10px;
    font-family: 'Inter', sans-serif;
}

/* HEADER */
.pay-slab-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pay-slab-subinfo {
    margin-top: -5px;
}

.pay-slab-badge {
    background: #e9f3ff;
    padding: 3px 8px;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 12px;
}

.pay-slab-small {
    font-size: 12px;
    color: #777;
}

.pay-slab-auto-btn {
    padding: 5px 15px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    border-radius: 8px;
    font-size: 13px;
}

/* VALUE CARD */
.pay-slab-info-card {
    background: #f2f7ff;
    border: 1px solid #dce8ff;
    padding: 18px 20px;
    border-radius: 10px;
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
}

.pay-slab-title {
    margin-bottom: 3px !important;
    font-size: 13px;
    color: #666;
}

.slab-title {
    color: #000 !important;
    font-weight: 600 !important;
}


.pay-slab-value {
    margin-top: 0;
}

/* PROGRESS */
.pay-slab-progress-box {
    margin-top: 22px;
    position: relative;
}

.pay-slab-progress-label {
    margin-bottom: 6px !important;
}

.pay-slab-progress {
    width: 100%;
    height: 6px;
    background: #ececec;
    border-radius: 20px;
    overflow: hidden;
}

.pay-slab-progress-fill {
    width: 45%;
    height: 100%;
    background: #0fa958;
}

.pay-slab-progress-value {
    text-align: right;
    margin-top: 6px;
    font-size: 13px;
    color: #444;
}

/* SLABS SECTION */
.pay-slab-slab-title {
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
}

.pay-slab-add-btn {
    background: #fafafa;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 6px;
}

/* SLAB CARDS */
.pay-slab-card {
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    padding: 15px;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
}

.pay-slab-row {
    margin-top: 3px;
}

.pay-slab-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
}

.pay-slab-status.paid {
    background: #d8f6d8;
    color: #0b7c0b;
}

.pay-slab-status.pending {
    background: #fee9c8;
    color: #b06800;
}

.pay-slab-icon {
    font-size: 16px;
    margin-left: 12px;
    cursor: pointer;
    color: #777;
}

/* RED DELETE ICON */
.pay-slab-delete {
    color: #d90000 !important;
}


/*PAYMENT SLAB AUTO SPLIT POP CSS*/

.pay-auto-modal .pay-auto-box {
    border-radius: 12px;
    padding: 0;
}

.pay-auto-modal .modal-header {
    border-bottom: none;
    padding: 20px 24px;
}

.pay-auto-modal .modal-title {
    font-size: 18px;
    font-weight: 600;
}

.pay-auto-modal .btn-close {
    background-size: 12px;
}

.pay-auto-modal .modal-body {
    padding: 0 24px 14px; 
}

.pay-auto-modal .form-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.pay-auto-modal .auto-input-box {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 16px;
    border: 1px solid #e6e6e6;
    background: #fff;
}

.pay-auto-modal .highlight-box {
    background: #eaf2ff;
    font-weight: 700;
    color: #0b8a2d;
    position: relative;
}

.pay-auto-modal .highlight-title {
    font-size: 12px;
    font-weight: 600;
    color: #6b6b6b;
}

.pay-auto-modal .gray-box {
    background: #f1f1f3;
    position: relative;
}

.pay-auto-modal .amount-title {
    font-size: 13px;
    font-weight: 600;
    color: #4f4f4f;
}

.pay-auto-modal .small-note {
    font-size: 12px;
    color: #6a6a6a;
    margin: 4px 0 0;
}

.pay-auto-modal .modal-footer {
    padding: 0 24px 18px; 
    border-top: none;
}

.pay-auto-modal .cancel-btn,
.pay-auto-modal .generate-btn {
    border-radius: 8px;
    width: 100%; 
}

.pay-auto-modal .cancel-btn {
    background: #fff;
    border: 1px solid #cfcfcf;
}

.pay-auto-modal .generate-btn {
    background: #0a8f36;
    color: #fff;
}


/* PAYMENT ADD NEW SLAB MODAL CSS POPUP */
.pay-auto-modal .pay-auto-box {
    border-radius: 12px;
    padding: 0;
}

.pay-auto-modal .modal-header {
    border-bottom: none;
    padding: 10px 18px; 
}

.pay-auto-modal .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 0; 
}

.pay-auto-modal .modal-body {
    padding: 0 18px 6px; 
}

.pay-auto-modal .form-label {
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 2px !important; 
    color: #4b4b4b;
    margin-top: 4px !important; 
}

.pay-auto-modal .input-box {
    padding: 6px 10px; 
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    background: #f1f1f2;
    font-size: 13.5px;
    color: #333;
    margin-bottom: 3px !important; 
}

.pay-auto-modal .input-box::placeholder {
    color: #a0a0a0;
    font-size: 13px;
}

.pay-auto-modal .modal-footer {
    padding: 6px 14px 12px; 
    border-top: none;
    margin-top: 0 !important;
}

.pay-auto-modal .cancel-btn,
.pay-auto-modal .generate-btn {
    width: 48%;
    border-radius: 8px;
    padding: 7px 0; 
    font-size: 14px;
    font-weight: 600;
}

.pay-auto-modal .cancel-btn {
    background: #fff;
    border: 1px solid #cfcfcf;
    color: #333;
}

.pay-auto-modal .generate-btn {
    background: #0a8f36;
    color: #fff;
}

.pay-auto-modal .modal-dialog {
    max-width: 400px;
}

/*RECEIPT MODAL POPUP CSS*/

.receipt-modal .receipt-box {
    border-radius: 12px;
    padding: 0;
}

.receipt-modal .modal-header {
    border-bottom: none;
    padding: 14px 20px;
}

.receipt-modal .modal-title {
    font-size: 17px;
    font-weight: 600;
    color: #2c2c2c;
}

.receipt-modal .modal-body {
    padding: 0 20px 10px;
    font-size: 14px;
}

.label-title {
    font-size: 13px;
    font-weight: 600;
    color: #777;
    margin-bottom: 2px;
}

.label-value {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    margin-bottom: 4px;
}

.preview-box {
    border: 1px dashed #d2d2d2;
    background: #f9f9f9;
    padding: 40px 0;
    border-radius: 8px;
    font-size: 13px;
    color: #9b9b9b;
}

.input-box {
    background: #f5f5f6;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    margin-top: 4px;
}

.receipt-modal .modal-footer {
    padding: 10px 14px 16px;
    border-top: none;
}

.verify-btn {
    background: #0a8f36;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 0;
}

.reject-btn {
    background: #e54b4b;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 0;
}

.reject-btn i, .verify-btn i {
    font-size: 15px;
}



/* DOCUMENT SECTION CSS */
.doc-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: 0.3s;
    font-family: 'Inter', sans-serif;
}

.doc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.doc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.doc-icon {
    background: #eaf1ff;
    color: #2d6cdf;
    font-size: 32px;
    padding: 8px 15px;
    border-radius: 10px;
}

.doc-badge {
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 10px;
    font-weight: 500;
}

.doc-badge.legal { background: #e3eaff; color: #2b4dcc; }
.doc-badge.financial { background: #e5fbee; color: #1c8d41; }
.doc-badge.technical { background: #f4e5ff; color: #9b3ec8; }

.doc-title {
    margin: 12px 0;
    font-size: 15px;
    font-weight: 600;  
    color: #111;
}

.doc-info p {
    font-size: 13px;
    margin: 2px 0;
    font-weight: 400;
    color: #6c757d;    
}

.doc-info strong {
    font-weight: 500;
    color: #444;
}

/* PROPERTY TAG */
.doc-tag {
    background: #eaf1ff;
    color: #2e61d3;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.doc-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.doc-btn {
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    background: #fff;
    cursor: pointer;
    color: #111;
}

.doc-btn i {
    margin-right: 6px;
    font-size: 14px;
}

.doc-btn:hover { background: #f5f7fa; }

.doc-btn.delete {
    color: #d9534f;
    border-color: #e7b5b5;
}

.doc-btn.delete:hover {
    background: #ffe5e4;
}

/* DOCUMENT POPUP CSS*/

/* Upload Document Popup CSS */
.upload-doc-box {
    border-radius: 12px;
    padding: 5px;
    font-family: "Inter", sans-serif;
}

.upload-doc-modal .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

.upload-doc-modal .form-label {
    font-size: 13px;
    font-weight: 500;
    color: #111;
}

.upload-doc-modal .input-box {
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
}

.upload-drop-box {
    border: 1px dashed #c5c5c5;
    border-radius: 10px;
    padding: 25px;
    margin-top: 5px;
    background: #fafafa;
}

.upload-icon {
    font-size: 28px;
    color: #6c757d;
    margin-bottom: 6px;
}

.upload-text {
    font-size: 13px;
    color: #6c757d;
}

.choose-btn {
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
}

.choose-btn:hover {
    background: #f5f7fa;
}

.upload-btn {
    background: #59a96a;
    color: #fff;
    border-radius: 8px;
    padding: 9px;
    font-size: 14px;
    font-weight: 500;
}

.upload-btn:hover {
    background: #4e925b;
}


.upload-drop-box {
    border: 2px dashed #d3dbe6;
    border-radius: 10px;
    padding: 35px;
    background: #fafbff;
}

.upload-icon {
    font-size: 26px;
    color: #5b7cfa;
    margin-bottom: 8px;
}

.upload-text {
    font-size: 14px;
    color: #6b7280;
}

.file-input {
    display: none; 
}

.choose-file-label {
    background: #fff;
    border: 1px solid #cfd5e1;
    padding: 7px 18px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: inline-block;
}

.choose-file-label:hover {
    background: #f3f4f6;
}

/*SUPPORT SECTION CSS*/
.tickets-main-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 20px 20px 16px;
    border-radius: 14px;
}

.tickets-heading {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #111;
}

.support-card {
    display: flex;
    justify-content: space-between;
    padding: 16px 14px;
    border: 1px solid #e7e7e7;
    border-radius: 12px;
    margin-bottom: 10px;
}

.top-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket-id {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 14px;
    font-weight: 500;
}

.status-open { background:#E8F2FF; color:#0066D6; }
.status-progress { background:#FFF6D2; color:#B48700; }
.status-resolved { background:#E4F7E8; color:#2FA44F; }

.priority-high { background:#FFE1E1; color:#C60000; }
.priority-medium { background:#FFF3C9; color:#A37500; }
.priority-low { background:#E4F9F4; color:#077A60; }

.project-tag { background:#EEE; color:#333; }

.ticket-title {
    font-size: 16px;
    font-weight: 600;
    margin: 4px 0 2px;
}

.ticket-desc {
    font-size: 13px;
    color: #555;
}

.bottom-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 6px;
    color: #777;
}

.left-sec {
    width: 100%;
}

.view-btn {
    border: 1px solid #d6d6d6;
    background: #fff;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 14px;
    height: fit-content;
}

.support-card {
    cursor: pointer;
    transition: box-shadow 0.25s ease;
}

.support-card:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

/*SUPPORT POPUP CSS*/

.ticket-modal-box {
    border-radius: 12px;
    padding: 5px 10px;
    background: #fff;
    border: none;
}

.ticket-modal-box .modal-header {
    border-bottom: 1px solid #eee;
}

.ticket-modal-box .modal-title {
    font-size: 17px;
    font-weight: 600;
}

.ticket-label {
    margin: 0;
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.ticket-value {
    margin-top: -2px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.ticket-msg-box {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 12px 14px;
}

.ticket-msg-text {
    font-size: 14px;
    margin: 0 0 3px 0;
    color: #444;
}

.ticket-msg-time {
    font-size: 11px;
    color: #888;
}

.ticket-reply-box {
    height: 90px;
    font-size: 14px;
    resize: none;
    border-radius: 8px;
}

/* Status Select */
.ticket-select {
    height: 45px;
    border-radius: 8px;
    font-size: 14px;
}

.ticket-send-btn {
    background: #59a96a;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    border: none;
}

.ticket-select {
    padding: 10px;
    border-radius: 8px;
}

/*NOTIFICATION CSS*/
.info-line {
    display: flex;
    align-items: center;
    gap: 20px;  
    margin-top: 6px;
}

.info-item {
    font-size: 12px;        
    color: #aaa;           
    font-weight: 400;       
    display: flex;
    align-items: center;
}
.info-item i {
    font-size: 12px;      
    color: #aaa;            
    margin-right: 5px;     
}


/*POPUP - NOTIFICATION*/
/*VIEW POPUP*/
.noti-box {
    border-radius: 10px;
    padding: 5px 8px;
}

.noti-label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
}

.noti-value {
    font-size: 13px;
    color: #222;
    margin-bottom: 2px;
}

.noti-msg {
    font-size: 12px;
    color: #222;
    line-height: 1.4;
    margin-bottom: 0;
}

.noti-small {
    font-size: 11px;
    color: #222;
}

.noti-badge {
    padding: 3px 10px;
    border-radius: 30px;
    font-size: 11px;
    text-transform: capitalize;
    font-weight: 500;
}

.noti-badge-blue {
    background: #d8e6ff;
    color: #2d6cdf;
}

.noti-badge-green {
    background: #d8ffe7;
    color: #28a745;
}

/*ADD NEW NOTIFICATION POPUP*/
.noti-new-box {
    border-radius: 12px;
}

.noti-subtext {
    font-size: 13px;
    color: #666;
    margin-top: -5px;
}

.noti-label {
    font-size: 12px;
    font-weight: 600;
    color: #444;
}

.noti-input,
.noti-textarea {
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #333; 
    background: #f8f8f8; 
}

.noti-input::placeholder,
.noti-textarea::placeholder {
    color: #333;
    opacity: 0.7;
}

.noti-textarea {
    height: 85px;
    resize: none;
}

.char-count {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.cancel-btn {
    font-size: 13px;
    padding: 7px 18px;
}

.send-btn {
    background-color: #28a745;
    color: white;
    font-size: 13px;
    padding: 7px 18px;
}

.noti-tabs-wrapper input[type="radio"] {
    display: none;
}

.noti-tabs {
    display: flex;
    width: 100%;
    border-radius: 50px;  
    background: #f0f0f0;
    border: 1px solid #ccc;
    overflow: hidden; 
}

.noti-tab {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    color: #333;
    background: transparent;
    margin: 0; 
    border-radius: 0;
}

#sendNowTab:checked ~ .noti-tabs .col-6 label[for="sendNowTab"],
#scheduleTab:checked ~ .noti-tabs .col-6 label[for="scheduleTab"] {
    background: #fff;
    color: #333;
    z-index: 2;
    position: relative;
    border-radius: 50px; 
    margin: 0; 
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1); 
}

.noti-tab:hover {
    background: #fff;
    color: #333;
    z-index: 1;
    position: relative;
    border-radius: 50px;
    margin: 0;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
}

#scheduleSection {
    display: none;
    transition: all 0.3s ease;
}

#scheduleTab:checked ~ #scheduleSection {
    display: block;
}
.schedule-box, .noti-tabs-wrapper {
    overflow: visible;
}

.row, .additional-options {
    overflow: visible;
}

.noti-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
    color: #333;            
    background: #f8f8f8;      
    border: 1px solid #ccc;
    border-radius: 6px;
    appearance: auto;        
    position: relative;
    z-index: 10;
}

.noti-label {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    display: block;
    margin-bottom: 4px;
}

/*SETTING SECTION CSS*/

/* MAIN WRAPPER */
.settings-tabs-wrapper {
    width: 100%;
    position: relative;
}

/* Hide Radio Buttons */
.settings-tabs-wrapper input[type="radio"] {
    display: none;
}

/* TABS ROW */
.settings-tabs {
    display: flex;
    background: #f1f1f1;
    border-radius: 40px;
    padding: 4px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

/* EACH TAB */
.settings-tab {
    text-align: center;
    padding: 10px 0;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #555;
    transition: 0.3s ease;
}

/* HOVER EFFECT */
.settings-tab:hover {
    background: #fff;
}

/* ACTIVE TAB */
#genTab:checked ~ .settings-tabs label[for="genTab"],
#notiTab:checked ~ .settings-tabs label[for="notiTab"],
#payTab:checked   ~ .settings-tabs label[for="payTab"],
#secTab:checked   ~ .settings-tabs label[for="secTab"],
#bookTab:checked  ~ .settings-tabs label[for="bookTab"],
#sysTab:checked   ~ .settings-tabs label[for="sysTab"] {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-weight: 600;
    border-radius: 40px;
}

/* Hide all tab content boxes */
.tab-content-box {
    display: none;
}

/* SHOW tab based on selected radio button */
#genTab:checked ~ #genCard { display: block; }
#notiTab:checked ~ #notiCard { display: block; }
#payTab:checked ~ #payCard { display: block; }
#secTab:checked ~ #secCard { display: block; }
#bookTab:checked ~ #bookCard { display: block; }
#sysTab:checked ~ #sysCard { display: block; }


/* HIDING & SHOWING CARDS */
.settings-card {
    display: none;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #eee;
}

/* SHOW ACTIVE TAB CARD */
#genTab:checked ~ #genCard,
#notiTab:checked ~ #notiCard,
#payTab:checked ~ #payCard,
#secTab:checked ~ #secCard,
#bookTab:checked ~ #bookCard,
#sysTab:checked ~ #sysCard {
    display: block;
}

/* LABELS + INPUTS */
.set-label {
    font-size: 12px;
    color: #2d2d2d;
    font-weight: 600;
    margin-bottom: 4px;
}

.settings-hr {
    border: none;
    border-top: 1px solid #958e8e;
    margin: -18px 11px 18px;
      margin-left: 0px;    
    width: 98%; 
}


.set-input {
    border-radius: 8px !important;
    font-size: 14px;
    padding: 8px 10px;
    background: #f8f8f8;
    border: 1px solid #ddd;
}

.save-btn {
    background: #28a745;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    border: none;
}

.save-btn:hover {
    background: #218838;
}


.set-subtext {
    font-size: 12px;
    color: #777;
    margin-top: -2px;
}



.toggle-switch {
    position: relative;
    width: 40px;
    height: 20px;
    appearance: none;
    -webkit-appearance: none;
    background: #ccc;
    outline: none;
    border-radius: 20px;
    transition: 0.3s;
    cursor: pointer;
}

.toggle-switch:checked {
    background: #28a745; 
}

.toggle-switch::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    top: 1px;
    left: 1px;
    background: white;
    transition: 0.3s;
}

.toggle-switch:checked::before {
    transform: translateX(20px);
}


.set-card-subtitle{
    font-size: 14px;
    color:#777
}


.form-select.set-input {
    height: 42px;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 6px;
}

.form-select {
    background-position: right 12px center !important;
    background-size: 16px !important;
    cursor: pointer;
}

.set-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.set-subtext-bs{
    font-size: 11px;
    color: #777;
    margin-top: 4px;
}

.settings-hr-sec{
    border: none;
    border-top: 1px solid #958e8e;
    margin: -8px 14px 3px;
      margin-left: 0px;    
    width: 98%;
}


/*SYSTEM SECTION CSS*/
.sys-box {
    width: 100%;
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sys-blue { background: #e9f3ff; border: 1px solid #b8d7ff; }
.sys-orange { background: #fff3e4; border: 1px solid #ffd4a6; }
.sys-purple { background: #f4eaff; border: 1px solid #d9c1ff; }

.sys-title {
    font-weight: 600;
}
.sys-text {
    margin: 0;
    font-size: 13px;
}

/* BUTTONS */
.sys-btn-blue {
    background: #e9f3ff;
    color: #1e88e5;
    border: 1px solid #1e88e5;
    transition: 0.3s;
}
.sys-btn-blue:hover {
    background: #d7e3ed;     
    border-color: #1e88e5;   
    color: #000;              
}
.sys-btn-blue:hover i {
    color: #000;             
}

.sys-btn-orange {
    background: #fff3e0;    
    color: #fb8c00;            
    border: 1px solid #fb8c00;
    transition: 0.3s;
}

.sys-btn-orange:hover {
    background: #ffe0b2;       
    border-color: #fb8c00;
    color: #000;                
}

.sys-btn-orange:hover i {
    color: #000;              
}


.sys-btn-purple {
    background: #f8e6fb;        
    color: #8e24aa;            
    border: 1px solid #8e24aa;
    transition: 0.3s;
}

.sys-btn-purple:hover {
    background: #eacaf0;       
    border-color: #8e24aa;
    color: #000;
}

.sys-btn-purple:hover i {
    color: #000;
}



/* INFO BOX */
.sys-info-box {
    border: 1px solid #e2e2e2;
    padding: 12px;
    border-radius: 10px;
}
.sys-info-label {
    font-size: 13px;
    color: #666;
}
.sys-info-value {
    font-weight: 600;
    margin: 3px 0 0;
}

/* SECTION TITLES */
.sys-section-title {
    font-weight: 600;
    margin-bottom: 12px;
    margin-left: 5px;
}


.system-card{
    display: block;               
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid #eee;
    margin-top: 12px;
}

/* List container */
.log-list {
    margin-top: 10px;
}

/* Each item */
.log-item {
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 10px;
    transition: 0.2s;
}

/* Hover */
.log-item:hover {
    background: #f1f5f9;
}

/* Icon color */
.log-item i {
    font-size: 16px;
}


/**/

/* ==========================
   BOOKING VIEW PAGE STYLES
========================== */


/* WRAPPER */
.booking-tabs-wrapper {
    width: 100%;
    position: relative;
}

/* HIDE RADIO */
.booking-tabs-wrapper input[type="radio"] {
    display: none;
}

/* TABS ROW */
.booking-tabs {
    display: flex;
    background: #f1f1f1;
    border-radius: 40px;
    padding: 4px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

/* EACH TAB */
.booking-tab {
    text-align: center;
    padding: 10px 0;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #555;
    transition: 0.3s ease;
}

.booking-tab:hover {
    background: #fff;
}

/* ACTIVE TAB */
#custTab:checked ~ .booking-tabs label[for="custTab"],
#landTab:checked ~ .booking-tabs label[for="landTab"],
#payTab:checked  ~ .booking-tabs label[for="payTab"],
#docTab:checked  ~ .booking-tabs label[for="docTab"] {
    background: #fff;
    color: #000;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* HIDE ALL CONTENT */
.tab-box {
    display: none;
}

/* SHOW SELECTED TAB */
#custTab:checked ~ #custCard,
#landTab:checked ~ #landCard,
#payTab:checked  ~ #payCardBox,
#docTab:checked  ~ #docCard {
    display: block;
}

/* CARD DESIGN */
.booking-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 22px;
    border: 1px solid #eee;
}

/* LABEL + VALUE */
.view-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.view-label {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    margin-bottom: 2px;
}

.view-value {
    font-size: 14px;
    color: #000;
    font-weight: 500;
    margin: 0;
}

/*sidebar dropdown css */

#masterMenu {
    background: #ffffff !important;
    padding-left: 50px !important; 
           
}

#masterMenu li {
    background: #ffffff !important;
}

#masterMenu .submenu-link {
    background: #ffffff !important;
    color: #495057 !important;  
    position: relative;
    padding-left: 14px !important; 
}

#masterMenu .submenu-link:hover {
    background: #ffffff !important;
    color: #27ae60 !important;
}

.master-link i.fa-chevron-down {
    margin-left: 10px !important;
}

#masterMenu .submenu-link:hover::before {
    color: #27ae60 !important;
}

#masterMenu .submenu-link.active::before {
    color: #27ae60 !important;
}

#masterMenu li.active .submenu-link {
    color: #27ae60 !important;
}

#masterMenu .submenu-link::before {
    margin-right: 2px !important;  
}

.drop_menu_new li a {
    padding-left: 16px !important;
}

.submenu-link.active {
    background: #7267EF;
    color: #fff !important;
    border-radius: 6px;
}

.drop_menu_new{
    list-style-type: disc;

}

#masterMenu li.active::marker {
    color: #27ae60 !important;
}

.drop_menu_new li a {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 25px !important; 
}

#masterMenu .submenu-link {
    position: relative;
   padding-left: 2px !important;
}



.side_modal .modal-dialog {
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.side_modal .modal-content {
    height: 100vh;
    overflow: auto;
    border-radius: 0;
}

/*.side_modal .modal-content {
    height: auto !important;
    max-height: 90vh !important;
    overflow-y: visible !important;
    border-radius: 0;
}*/


.side_modal .modal-footer {
    background: #fff;
}

.side_modal.fade .modal-dialog {
    -webkit-transform: translate(100px, 0);
    transform: translate(100px, 0);
}

.side_modal.show .modal-dialog {
    -webkit-transform: none;
    transform: none;
}

/*Searchble dropdwon */

/* .dropdown-search-container {
    position: relative;
}

.dropdown-selected {
    border: 1px solid #ccc;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-menu-custom {
    position: absolute;
    top: 100%;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-top: 5px;
    display: none;
    z-index: 1000;
}

.dropdown-search-input {
    width: 100%;
    border: 0;
    padding: 10px 12px;
    border-bottom: 1px solid #ddd;
    outline: none;
}

.dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-list li {
    padding: 10px 12px;
    cursor: pointer;
}

.dropdown-list li:hover {
    background: #f2f2f2;
} */


.dropdown-search-container {
    position: relative;
}

.dropdown-selected {
    border: 1px solid #ccc;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-menu-custom {
    position: absolute;
    top: 100%;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-top: 5px;
    display: none; /* IMPORTANT */
    z-index: 1000;
}

.dropdown-search-input {
    width: 100%;
    border: 0;
    padding: 10px 12px;
    border-bottom: 1px solid #ddd;
    outline: none;
}

.dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-list li {
    padding: 10px 12px;
    cursor: pointer;
}

.dropdown-list li:hover {
    background: #f2f2f2;
}

/*DOCUMENT VIEW FORM*/

.view-doc-box {
    border-radius: 10px;
    background: #fff;
}

.label-title {
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

.label-value {
    font-size: 15px;
    font-weight: 500;
    color: #222;
    margin-bottom: 0;
}

.preview-box {
    border: 1px dashed #b7b7b7;
    background: #f9f9f9;
    padding: 40px 10px;
    border-radius: 8px;
}

.download-btn {
    background: #1e88e5;
    color: #fff;
    border-radius: 8px;
}

.download-btn:hover {
    background: #166dba;
}

.delete-btn {
    background: #d9534f;
    color: #fff;
    border-radius: 8px;
}

.delete-btn:hover {
    background: #c9302c;
}


.w-60{
    max-width: 60% !important;
}

.amenity-tag {
    background: #eef2ff;
    color: #4338ca;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    margin-right: 4px;
    display: inline-block;
}

.text-purple {
    color: #6d28d9 !important;
}

.doc-btn {
    text-decoration: none !important;
}


.signature-img {
    width: 90px;           
    height: 90px;         
    object-fit: contain;   
    background: #f8fafc;   
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 6px;         
    display: block;
}


.booking-view-link {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    
}

.sign-box{
    margin-left: -14px;
    margin-top: -9px;
}
















































































/* NEW SELF-DASHBAORD CSS*/
.growf-panel{
    display: flex;
    width:100%;
}

.main-content{
    justify-content: center;
    display: auto;
}

.switch-btn{
    font-size: 14px;
    padding: 8px 15;
}

.self-dashboard-title{
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.self-dashboard-subtext{
    color: #777;
    font-size: 14px;
    margin: 0;
}

.grow-card{
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid #eee;
}

.grow-card h6 {
    color: #666;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.grow-card h3 {
    font-size: 24px;
    margin: 0;
    font-weight: 700;
}

.grow-card p {
    margin: 3px 0 0;
    font-size: 12px;
}

.up { color: #22b122; font-weight: 600; }
.warning  { color: #e67e22; font-weight: 600; }
.subtext  { color: #777; }

.icon-box {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    
}

.soft-blue   { background: #e8f1ff; color: #3d7bff; }
.soft-green  { background: #e6f7f1; color: #25a973; }
.soft-purple { background: #f3e9ff; color: #9a59ff; }
.soft-orange { background: #fff2e6; color: #ff8f4a; }
.soft-yellow { background: #fff8db; color: #d4b11f; }
.soft-red    { background: #ffe9ec; color: #ff5167; }


/* Section 2 dashboard self */
.grow-custom-card {
  background: #fff;
  border-radius: 12px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
}

.skybreez-block {
  width: 100%;
}

.skybreez-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.skybreez-header h6 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.skybreez-header .right span {
  margin-left: 18px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.paid-label i { color: #4caf50; font-size: 16px; }
.pending-label i { color: #ff9800; font-size: 16px; }
.overdue-label i { color: #f44336; font-size: 16px; }

.paid-label { color: #4caf50; }
.pending-label { color: #ff9800; }
.overdue-label { color: #f44336; }


.paid{
    color:#4caf50;
}
.pending{
    color:#ff9800;
}

.overdue{
    color:#f44336;
}

/*section 3 self dashbaord Recent css*/
.recent-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 22px;
}

.circle-bg {
    width: 38px;
    height: 38px;
    background: #f1f3f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}

.circle-bg i {
    font-size: 18px;
    color: #555;
}

.recent-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.recent-time {
    margin: 3px 0 0;
    font-size: 12px;
    color: #777;
}

.qr_card{
  background: #fff;
  border-radius: 12px;
  max-width: 400px;
  margin: auto;
}


/* LOGIN PAGE CSS */

.login_page{
    width: 100%;
    min-height: 100vh;
    display: flex;
   
    position: relative;
 
    
}

.login_a{
     width: 70%;
     background:#fff;
     padding: 20px;
    display: flex;
    flex-direction: column;
  /*  align-items: center;  horizontal center */
    text-align: center;  
    justify-content: center;

    position: sticky;
    height: 100vh;
    top: 0;
   
  
}


.login_form{
    background-color:#00a951;
    width: 100%;
    max-width: 30%;
  /*  padding-left: 40px !important;
    padding-right: 40px !important;*/

    flex:1; 
    overflow-y:auto;

}

.signup-row {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    max-width: 100%;               
    margin: 20px auto 0 auto;
    gap: 10px;
}

.signup-text {
    font-size: 14px;
    color: var(--muted);
    font-weight: 500;
}

.signup-text-link {
    font-size: 15px;
    font-weight: 600;
    color: #133652;      
    text-decoration: none; 
    transition: color 0.3s;
}

.useradd_d{
  
    padding-left: 40px !important;
    padding-right: 40px !important;
    width:100%;
    padding-top: 20px;
    padding-bottom: 20px;

}

.login-left-box button {
    font-size: 16px;
    height: 48px;
    border-radius: 10px;
}


.login-form-box {
    width: 90%;
    max-width: 380px;
    margin: 0 auto;
    text-align: left;
}

.login-heading {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}


.or-line {
    height: 1px;
    background: #eee;
    margin: 10px 0 20px 0;
}


.login-input {
    width: 100%;
    height: 52px;
    background: #eef5f0;
    border: 1px solid #d5e6db;
    border-radius: 25px;
    padding: 12px 20px;
    font-size: 15px;
    outline: none;
    transition: 0.2s;
}


.password-box {
    position: relative;
}

.eye-icon {
    position: absolute;
    right: 18px;
    top: 15px;
    font-size: 18px;
    color: #6d6d6d;
    cursor: pointer;
}


.btn-login {
    
    width: 50%;
    height: 50px;
    background: #00c078;
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}


.right-big {
    font-size: 28px;
    color: #fff;
    font-weight: 700;
}

.right-desc {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.login-heading {
    font-size: 30px;
    font-weight: 800;
    color: #1c1c1c;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.login-sub {
    font-size: 15px;
    color: #7a7a7a;
    margin-bottom: 20px;
}

.btn-login {
    width: 60%;              
    height: 46px;           
    border-radius: 25px;
    background: #00c078;
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    display: block;
    margin: 20px auto 0 auto; 
    cursor: pointer;
    transition: 0.2s;
}

.btn-login:hover {
    background: #00a666;
    box-shadow: 0 4px 8px rgba(0, 160, 80, 0.3);
}


.right-welcome {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    opacity: 0.95;
    margin-bottom: 8px;
}

.right-title {
    font-size: 34px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.right-desc {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    max-width: 300px;
    margin: 0 auto;
}


.login_form {
    position: relative;
    background: linear-gradient(135deg, #00a951, #009c7a, #008b6d); 
}

.login_form::before,
.login_form::after {
    content: "";
    position: absolute;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
}

.login_form::before {
    width: 180px;
    height: 180px;
    bottom: 40px;
    right: 30px;
}

.login_form::after {
    width: 120px;
    height: 120px;
    top: 40px;
    left: 40px;
}