.dashboard-hero {
   
    border-radius: 18px;
    padding: 1.5rem;
}


.profile-img {
	width:100%;
	 height:100%;
	 object-fit:cover;
	 display:block;
}

.dashboard-card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.status-pill {
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    font-size: 0.75rem;
}

@media (max-width: 576px) {
    .dashboard-hero {
        text-align: center;
    }
}
.grid-2 { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 992px){ .grid-2 { grid-template-columns: 1fr 1fr; } }

.form-stack { display:flex; flex-direction:column; gap:10px; }
.input { width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; }
.textarea { resize: vertical; }

.card-header-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-title { display:flex; align-items:center; gap:10px; margin:0 0 10px 0; }

.actions-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

.alert { padding:10px 12px; border-radius:10px; display:flex; gap:8px; align-items:center; }
.alert.success { background:#ecfdf5; border:1px solid #a7f3d0; }
.alert.error { background:#fef2f2; border:1px solid #fecaca; }

.template-list { display:flex; flex-direction:column; gap:10px; }
.template-item { display:flex; gap:12px; align-items:center; border:1px solid #e5e7eb; border-radius:14px; padding:12px; }
.template-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; }
.template-body h4 { margin:0; }
.small { font-size: 0.9rem; }
.small-btn { padding:6px 10px; }

.hidden { display:none; }
.ai-hint { margin-top:10px; color: #000000;  padding:10px 12px; border-radius:12px; border:1px dashed #cbd5e1; background:#f8fafc; display:flex; gap:10px; align-items:flex-start; }

.empty-state { text-align:center; padding:18px; border:1px dashed #e5e7eb; border-radius:14px; }
.empty-state i { font-size:24px; margin-bottom:8px; }


<!-- invite form page styles -->


<style>
   :root{
     --brand-primary: #2563eb;
     --brand-gradient: linear-gradient(#f5f5f5, var(--brand-primary));
   }
   body{
     min-height: 100vh;
     background: #f8fafc;
   }
   .invite-shell{
     max-width: 520px;
     margin: 0 auto;
     padding: 24px 16px;
   }
   .invite-card{
     border: 1px solid rgba(15,23,42,.08);
     border-radius: 18px;
     box-shadow: 0 10px 30px rgba(15,23,42,.08);
     overflow: hidden;
     background: #fff;
   }
   .invite-hero{
     background: var(--brand-gradient);
     color: #fff;
     padding: 18px 18px;
   }
   .invite-hero h1{
     font-size: 1.25rem;
     margin: 0;
     font-weight: 700;
   }
   .invite-hero p{
     margin: 6px 0 0 0;
     opacity: .92;
     font-size: .95rem;
   }
   .invite-body{
     padding: 18px;
   }
   .pill{
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
     border-radius: 999px;
     background: rgba(37,99,235,.08);
     color: #1e40af;
     font-weight: 600;
     font-size: .9rem;
   }
   .muted{
     color: #64748b;
     font-size: .92rem;
   }
   .form-label{
     font-weight: 600;
     color: #0f172a;
   }
   .btn-brand{
     background: var(--brand-primary);
     color: #fff;
     border: none;
     font-weight: 600;
     border-radius: 12px;
     padding: 10px 14px;
   }
   .btn-brand:hover{ opacity: .92; color: #fff; }
   .btn-outline-soft{
     border: 1px solid rgba(15,23,42,.14);
     border-radius: 12px;
     padding: 10px 14px;
     font-weight: 600;
     background: #fff;
   }
   .divider{
     display:flex;
     align-items:center;
     gap:12px;
     margin: 16px 0;
     color:#94a3b8;
     font-size:.9rem;
   }
   .divider::before, .divider::after{
     content:"";
     flex:1;
     height:1px;
     background: rgba(15,23,42,.12);
   }
   .small-note{
     font-size: .85rem;
     color: #94a3b8;
     margin-top: 10px;
   }
   
 
   
//email Inbox styles
   .conversation-avatar {
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .conversation-avatar img {
       width: 40px;
       height: 40px;
       object-fit: cover;
       border-radius: 50%;
       border: 1px solid 
   #ddd;
   }
   
   .google-login-btn:active {
     transform: scale(0.97);
     filter: brightness(0.92);
     transition: transform 0.05s, filter 0.05s;
   }
   
   
  <!-- Thank you pages-->
  
    .thanks-page-body  {
        font-family: Arial, sans-serif;
        background: 
  #f5f6fa;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
  
  .thankyou-container {
    background: #fff;
    padding: 2rem 3rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-align: center;
  }
  .thankyou-container h1 {
    color: #2d9cdb;
    margin-bottom: 1rem;
  }
  .thankyou-container p {
    margin-bottom: 2rem;
    color: #333;
  }
   
 
  <!--  Sidebar styles -->
  /* Desktop sidebar */
  .sidebar {
      width: 220px;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      overflow-y: auto;
      z-index: 1040;
      background: #fff;
      border-right: 1px solid #dee2e6;
  }

  /* Push page content over */
  body {
      padding-left: 220px;
  }


  /* Mobile layout */
  @media (max-width: 768px) {

      /* hide sidebar by default */
      .sidebar {
          display: none;
      }

      body {
          padding-left: 0;
      }

  }

  .no-sidebar-padding {
    padding-left:0 !important;
	
  }
  
<!--  Sidebar styles end -->
  
  
    
   
 </style>
<!-- invite form page styles end -->




<!-- If you already include your SaaS dashboard CSS, keep that and remove this minimal styling -->
<style>
  .page { max-width: 1100px; margin: auto; padding: 25px; }
  .topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
  .title { font-size: 1.1rem; font-weight: 700; }
  .muted { opacity: .75; font-size: .9rem; }
  .actions { display:flex; gap:10px; flex-wrap:wrap; }

  .viewer { margin-top: 14px; border:1px solid #e5e7eb; border-radius: 14px; overflow:hidden; background:#fff; }
  .viewer-inner { width:100%; height: 72vh; }
  .fallback { padding:16px; }
  @media (max-width: 768px) { .viewer-inner { height: 68vh; } }
</style>

<!--table responsiveness for mobile paymentHistory-->
.payment-toggle-btn {
  border-radius: 12px;
  min-width: 180px;
}

.payment-section h2 {
  font-weight: 700;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table th,
.table td {
  vertical-align: middle;
  white-space: nowrap;
}

.table td.text-break {
  white-space: normal;
  word-break: break-word;
  min-width: 220px;
}

.status-pill {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

@media (max-width: 576px) {
  .payment-toggle-btn {
    width: 100%;
  }

  .table {
    font-size: 0.9rem;
  }

  .payment-section h2 {
    font-size: 1.2rem;
  }
}

//tenant list styles

.nav-tabs .nav-link {
    border-radius: 0.75rem 0.75rem 0 0;
    font-weight: 600;
}

.nav-tabs .nav-link.active {
    background: #f8fafc;
    border-color: #dee2e6 #dee2e6 #f8fafc;
}

.card.rounded-4 {
    border-radius: 1rem;
}

// tenant payment form 	

.payment-card {
  overflow: hidden;
}

.summary-box {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  padding: 0.9rem 1rem;
}

.total-box {
  background: #f4f8ff;
  border-color: #d9e7ff;
}

.option-tile {
  border: 1px solid #dfe3e8;
  background: #fff;
  color: inherit;
  transition: all 0.2s ease;
}

.option-tile:hover {
  border-color: var(--bs-primary);
  background: #f8fbff;
}

.btn-check:checked + .option-tile {
  border-color: var(--bs-primary);
  background: #eef5ff;
  box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.option-amount {
  font-size: 1rem;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .payment-card .card-body {
    padding: 1rem;
  }

  .summary-box {
    padding: 0.85rem 0.9rem;
  }

  .option-tile {
    padding: 1rem !important;
  }

  .option-amount {
    width: 100%;
    margin-top: 0.35rem;
    font-size: 1.05rem;
  }

  .form-label {
    margin-bottom: 0.4rem;
  }

  .btn.w-100.py-3 {
    font-size: 1rem;
  }
}
//calendar mobile css
@media (max-width: 768px) {
  .fc-header-toolbar {
    flex-direction: column;
    gap: 12px;
  }

  .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .fc-toolbar-title {
    font-size: 1.2rem !important;
    text-align: center;
  }

  .fc-button {
    padding: 0.35rem 0.55rem !important;
    font-size: 0.8rem !important;
  }
}

//calendar mobile css ends