/* Load Noto Sans */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#f5f7fa; --card:#f3f4f6; --text:#111827; --muted:#6b7280; --border:#e5e7eb; --accent:#0d6efd;
  --bs-body-font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI",
                         Roboto, "Helvetica Neue", Arial, "Liberation Sans",
                         sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                         "Noto Color Emoji";
}

html, body, button, input, select, textarea {
  font-family: var(--bs-body-font-family) !important;
}


body { background:var(--bg); color:var(--text); }


/* 1) Stop horizontal overflow */
html, body { width:100%; max-width:100%; overflow-x:hidden; }

/* 2) Make sizing predictable */
*, *::before, *::after { box-sizing:border-box; }

/* 3) Media never wider than viewport */
img, video, svg, canvas, iframe { max-width:100%; height:auto; display:block; }

/* 4) Clip any rogue child overflow in layout wrappers */
.container, .row, .section, header, footer { overflow-x:clip; }

/* 5) Avoid 100vw traps on mobile */
.full-width { width:100%; }           /* use this instead of width:100vw */

.backbut {
  width:25px;
  height:30px;
}
.addviewbut {
  width:22px;
  height:25px;
}



.filenames {
  margin-top: 15px !important;
}

.pillgroup {
  flex-direction: row-reverse;
}

.statusbut {
  padding: 0px 8px;
  font-size: 12px;
  border-radius: 25px;
}

/* agent.php */
.offer-pill{
  display:inline-block;        /* or inline-flex */
  background:#008000;
  color:#fff !important;
  padding:10px 16px;
  border-radius:25px;
  flex:0 0 auto;               /* guards against parent flex-grow */
  width:auto;
}

.staffgap {
  margin: 10px 0;
}


/* agent_property.php */
.icon-btn {
  background: none;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.icon-btn-danger {
  color: #dc3545; /* Bootstrap red */
}

.icon-btn-danger:hover {
  background: #f8d7da;
  border-radius: 50%;
}

.small-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dc3545;
  transition: background 0.2s;
}

.small-close:hover {
  background: #dc3545;
  color: #fff;
}

/* booking header layout (mobile: title + buttons + close on first row) */
#bookingGridWrap .booking-hdr .hdr-controls{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex:0 0 auto;            /* never expand to full width */
}
#bookingGridWrap .booking-hdr .week-label{
  margin-left:1rem;          /* desktop spacing */
}

/* Mobile: keep buttons on the first row; push date to its own line */
@media (max-width:576px){
  #bookingGridWrap .booking-hdr{ align-items:center; }
  #bookingGridWrap .booking-hdr .hdr-title{ order:1; }
  #bookingGridWrap .booking-hdr .hdr-controls{
    order:2;
    margin-left:auto;        /* right-align buttons/close */
  }
  #bookingGridWrap .booking-hdr .week-label{
    order:3;
    flex-basis:100%;         /* force new line */
    margin:2px 0 0 0;        /* small gap under the row */
  }
}

/* Desktop: date sits on its own line, right-aligned under the buttons */
@media (min-width:577px){
  #bookingGridWrap .booking-hdr{ align-items:flex-start; }
  #bookingGridWrap .booking-hdr .hdr-controls{
    order:2;
    margin-left:auto;             /* keep buttons at far right */
  }
  #bookingGridWrap .booking-hdr .week-label{
    order:3;                      /* ensure it follows the buttons */
    flex-basis:100%;              /* force a new line */
    width:100%;
    text-align:right;             /* right-align the date */
    margin:4px 0 0 0;             /* small gap below buttons */
    font-weight: bold;
  }
}


.sentdet {
  font-size: 12px;
}


/* Make all SweetAlert2 OK buttons green */
.swal2-styled.swal2-confirm {
  background-color: #16a34a !important;  /* green */
}
.swal2-styled.swal2-confirm:hover {
  filter: brightness(0.95);
}
.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(22,163,74,0.35) !important;
}



.navbar, .card { background:#fff; }
.prop-card{ background:#ecf1fa; border:1px solid #939393; }
.prop-img{ width: 160px; height: 120px; object-fit: cover; border-radius: 6px; }
.clickable{ cursor:pointer; }
.bg-booked{ background:#dcfce7 !important; }          /* green tint */
.bg-waiting{ background:#fffcd4 !important; }         /* pale yellow for Waiting Confirmation */
.bg-cancelled{ background:#e9ecef !important; }       /* light grey for Cancelled */
.bg-viewed-nooffer{ background:#eaeaea !important; }  /* light grey */
.bg-viewed-offer{ background:#eaeaea !important; }    /* peach */
.bg-not-suitable{ background:#fddede !important; }    /* pink/red tint */

.table-zebra tbody tr:nth-child(odd){ background:#f8f9fa; }
.table-zebra tbody tr:nth-child(even){ background:#eceff3; }

/* Dark mode */
.dark { --bg:#0b0f14; --card:#121820; --text:#e5e7eb; --muted:#9ca3af; --border:#1f2937; }
.dark body, .dark .navbar, .dark .card { background:var(--bg); color:var(--text); }
.dark .navbar, .dark .card { border-color:var(--border); }
.dark .prop-card{ background:var(--card); border:1px solid var(--border); }
.dark .table-zebra tbody tr:nth-child(odd){ background:#111827; }
.dark .table-zebra tbody tr:nth-child(even){ background:#0f172a; }

.py-4 {
  padding-top: 0.5rem !important;
}
.btn.btn-primary.d-none.d-sm-inline-flex {
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
}

.btn.btn-outline-primary.btn-sm {
  border-radius: 6px;
}
/* Always show background colour on property card buttons */
.prop-card .btn-outline-primary {
  @apply btn btn-primary; /* if using Tailwind, else manually: */
  background-color: #0d6efd;
  color: #fff;
  border: 1px solid #0d6efd;
}
.prop-card .btn-outline-primary:hover {
  background-color: #0b5ed7;
}

.prop-card .btn-outline-secondary {
  background-color: #6c757d;
  color: #fff;
  border: 1px solid #6c757d;
}
.prop-card .btn-outline-secondary:hover {
  background-color: #5c636a;
}

.prop-card .btn-outline-warning {
  background-color: #e3e3e3;
  color: #212529;
  border: 1px solid #8d8c8c;
}
.prop-card .btn-outline-warning:hover {
  background-color: #e3e3e3;
}

.prop-card .btn-outline-danger {
  background-color: #dc3545;
  color: #fff;
  border: 1px solid #dc3545;
}
.prop-card .btn-outline-danger:hover {
  background-color: #bb2d3b;
}

/* Add lift effect on hover */
.prop-card .btn {
  transition: all 0.2s ease-in-out;
}
.prop-card .btn:hover {
  transform: translateY(-5px);
}

#app-header{position:fixed;top:0;left:0;right:0;z-index:1050;background:#fff}
body{padding-top:90px} /* match header height */


.property-thumb{width:220px;height:140px;object-fit:cover;flex-shrink:0;border-radius: 6px;}
@media (max-width:576px){.property-thumb{width:120px;height:80px}}


.card.prop-card.p-3.myproperty {
  padding: 10px 15px !important;
  margin-top: 8px;
}

.theoffer {
  color: green;
  font-size: 20px;
  font-weight: bold;
}

.fw-bold {
  font-weight: 600 !important;
  margin-top: 3px;
  margin-bottom: 5px;
}

.btn-group-prop {
  display: flex;
  gap: .5rem;
}

.mb-2.mylogo {
  border: 2px solid lightgray;
  padding: 12px 25px;
  margin-bottom: 10px !important;
}

.cardheader {
  background-color: lightgray;
  padding: 10px;
  font-size: 20px;
  border-radius: 8px 8px 0 0;
}


.badge { display:inline-block; padding:4px 8px; border-radius:4px; font-size:12px; font-weight:600; }
.badge-waiting { background:#ffc107; color:#212529; }
.badge-booked  { background:#28a745; color:#fff; }
.badge-viewed  { background:#6c757d; color:#fff; }


.card {
  border-radius: 12px;
  padding: 8px !important;
}
.rounded {
  border-radius: 0 !important;
}
.mb-2 {
  margin: 0 !important;
  border-radius: 6px !important;
}
.d-flex.gap-2.flex-wrap {
  margin-top: 10px;
}

.btn.btn-sm.greybut {
  background-color: #6c757d;
  color: #fff;
}

.action-buttons .btn {
  width: 44px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}


.daterow {
  background-color: #d7d7d7;
  padding: 6px 2px;
}


.diffcards {
  margin: 5px !important;
  min-height: 110px;
}




/* Keep the Send/Revoke Login buttons on one line */
#ownerLoginBtn,
#ownerLoginBtnMobile {
  white-space: nowrap;      /* never wrap text */
  padding-left: 14px;
  padding-right: 14px;
}

/* Tiny phones: gently shrink so it doesn’t overflow */
@media (max-width: 360px) {
  #ownerLoginBtnMobile {
    font-size: 14px;
    padding-left: 12px;
    padding-right: 12px;
  }
}



.status-badge:focus { outline: 2px solid rgba(0,0,0,.15); outline-offset: 2px; }



<style>
/* Circular icon buttons (edit/delete) */
.icon-btn{
  --btn-size: 44px;           /* meets recommended 44x44 touch target */
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid currentColor;
  color: currentColor;
  line-height: 1;
  vertical-align: middle;
  transition: background-color .15s ease, transform .08s ease, box-shadow .15s ease;
  margin-left: .35rem;        /* space between buttons */
}
.icon-btn svg{
  width: 20px; height: 20px;
  stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* Focus/hover states */
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0,123,255,.35);  /* clear keyboard focus ring */
}

/* Variants */
.icon-btn-danger{ color:#dc3545; border-color:#dc3545; }
.icon-btn-danger:hover{ background: rgba(220,53,69,.08); }

.icon-btn-muted{ color:#6c757d; border-color:#6c757d; }
.icon-btn-muted:hover{ background: rgba(108,117,125,.08); }

/* Slightly smaller on very narrow screens */
@media (max-width: 380px){
  .icon-btn{ --btn-size: 40px; }
  .icon-btn svg{ width: 18px; height: 18px; }
}

/* Keep Actions tight but safe from wrapping weirdness */
.table td.text-end{ white-space: nowrap; }
</style>


.mt-md-5px { margin-top: 5px }


 
/*//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */





@media (max-width: 576px) {
  .btn-group-prop {
    width: 100%;
    justify-content: space-between;
  }
  .btn-group-prop .btn {
    flex: 1;
  }
  .prop-card { 
    padding: 12px; 
  }
   .mobile-head .addr { 
    flex: 1; 
    line-height: 1.2; 
  }
  .mobile-head .price { 
    white-space: nowrap; 
    margin-left: .5rem; 
  }


/*  pils right alighen mobile only */
.mt-2.d-flex.flex-wrap.gap-2 {
  flex-direction: row-reverse;
}


.py-4 {
  padding-top: 0.8rem !important;
}

} /*  end mobile only */




/*restyle*/

/* ---------- Desktop defaults ---------- */
.desktop-info { display: flex; }          /* desktop image+text row */
.m-hero, .m-owner-row { display: none; }  /* hide mobile hero on desktop */
.owner-login-desktop { display: block; }  /* keep desktop login box */

/* ---------- Phones (≤576px) ---------- */
@media (max-width:576px){

  /* Show mobile hero + owner line; hide desktop bits */
  .m-hero, .m-owner-row { display:block; }
  .desktop-info { display:none !important; }
  .owner-login-desktop { display:none !important; }

  /* Stack the header info row vertically on phones */
  .d-flex.align-items-start.justify-content-between.flex-wrap.gap-3.mb-3{
    display:block;
  }

  /* HERO */
  .m-hero{
    position:relative;
    width:100%;
    border-radius:12px;
    overflow:hidden;
    margin:6px 0 8px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
  }
  .m-hero-img{
    width:100%;
    height:180px;            /* smaller image per mock */
    object-fit:cover;
    display:block;
  }
  .m-badge{
    position:absolute;
    padding:6px 10px;
    border-radius:10px;
    font-weight:700;
    line-height:1;
  }
  .m-price{
    top:8px; right:8px;
    background:#fff; color:#111;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
    font-size:14px;
  }
  .m-addr{
    left:8px; bottom:8px;
    background:rgba(0,0,0,.72);
    color:#fff;               /* address in white */
    font-size:16px;
    max-width:78%;
  }

  /* Owner line under hero */
  .m-owner-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    margin:4px 2px 12px;
  }
  .m-owner-text{ font-size:14px; }
  .m-pill{ border-radius:6px; padding:6px 12px; }
}