/* =====================================================================
   THEME & BASE
   ===================================================================== */
:root{
  --purple-500:#6a4c9c;
  --purple-600:#5a3e84;
  --purple-700:#4b2c91;
  --lavender-50:#f4effe;
  --lavender-75:#f3f0fa;
  --lavender-100:#f3e8ff;
  --lavender-200:#faf7ff;
  --gray-700:#4b3b72;

  --shadow-100:0 4px 10px rgba(0,0,0,.10);
  --shadow-200:0 6px 18px rgba(0,0,0,.06);

  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --text-color:#1f2937;
  --muted-color:#667085;

  /* Shared Select2 filter sizing */
  --filter-h:40px;
  --filter-radius:10px;
  

  /* Portal */
  --portal-sidebar-width:280px;
  --brand-purple:#6a4c9c;

  /* Availability colors */
  --slot-free:#28a745;
  --slot-booked:#ffc107;
  --slot-closed:#6c757d;
  --slot-past:#f8f9fa;
  --slot-yours:#0d6efd;
  --slot-pending:#fd7e14;
}

html,body{
  height:100%;
  margin:0;
  background:#fff;
  color:var(--text-color);
  font-family:var(--font-sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

a{ color:var(--purple-500); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Modern type rhythm */
h1,h2,h3,h4,h5,h6{ letter-spacing:-.02em; color:var(--text-color); font-weight:700; }
h1{ font-size:clamp(28px, 4vw, 40px); }
h2{ font-size:clamp(22px, 3vw, 32px); }
h3{ font-size:clamp(18px, 2.5vw, 24px); }
p{ margin-bottom:.7rem; }
.small, .text-muted{ color:var(--muted-color) !important; }

/* =====================================================================
   LAYOUT & PORTAL SHELL
   ===================================================================== */
.container{
  max-width:1000px; margin:50px auto 20px; background:#fff;
  padding:30px; border-radius:12px; box-shadow:var(--shadow-100);
}
.container-purple{
  background:var(--lavender-50); padding:30px; border-radius:12px;
  min-height:100vh; display:flex; flex-direction:column;
}
.container-purple > .tab-content,
#portalTabsContent{ flex:1 1 auto; min-height:0 !important; }
#portalTabsContent > .tab-pane{
  background:#fff; border-radius:12px; padding:1.5rem; box-shadow:0 4px 15px rgba(0,0,0,.07);
}
.container-purple > .portal-shell{ width:100%; margin-inline:auto; display:flex; gap:1rem; }
#portalSidebar{ --bs-offcanvas-width:var(--portal-sidebar-width); }
@media (min-width:992px){
  #portalSidebar{ position:sticky; top:1rem; height:calc(100vh - 2rem); border-right:1px solid rgba(0,0,0,.08); flex:0 0 var(--bs-offcanvas-width); }
}

/* Portal header / brand */
.portal-header{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding-left:0; }
.portal-header .btn-sidebar-toggle{ position:absolute; left:0; }
@media (min-width:992px){ .portal-header{ padding-left:var(--portal-sidebar-width); } }
.portal-left{ display:flex; align-items:center; gap:.75rem; }

.brand-wrap{ line-height:1; }
.brand-title{
  font-family:'Pacifico',cursive;
  color:var(--brand-purple);
  font-size:clamp(28px, 4vw, 48px);
  margin:0;
  margin-inline-start:76px; /* move title a bit to the right */
}
.brand-tagline{
  font-size:clamp(12px, 1.4vw, 16px);
  margin-top:.15rem;
  letter-spacing:.01em;
  color:var(--brand-purple);
  margin-inline-start:96px; /* move title a bit to the right */
}


.welcome-text{ color:var(--brand-purple); font-weight:600; font-size:clamp(14px, 1.6vw, 18px); white-space:nowrap; }
.btn-sidebar-toggle{
  width:44px; height:44px; border-radius:.75rem; border:1px solid rgba(0,0,0,.08); background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.btn-sidebar-toggle .navbar-toggler-icon{
  width:1.5em; height:1.5em; display:inline-block; background-repeat:no-repeat; background-position:center;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.60)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =====================================================================
   CARDS / HEADINGS / TABS / BUTTONS
   ===================================================================== */
.card{ border:1px solid rgba(0,0,0,.05); border-radius:12px; background:#fff; box-shadow:var(--shadow-100); }
.card .card-body p{ margin-bottom:.6rem; }
.section-heading{
  color:var(--purple-700); background:var(--lavender-100);
  padding:.5rem 1rem; border-radius:8px; font-weight:600; box-shadow:0 2px 6px rgba(75,44,145,.15);
}
.nav-pills{ background:var(--lavender-75); border-radius:1rem; padding:1rem; box-shadow:0 4px 12px rgba(0,0,0,.05); }
.nav-pills .nav-link{ border-radius:.75rem; margin-bottom:.4rem; padding:.75rem 1rem; font-weight:600; color:var(--purple-500); }
.nav-pills .nav-link.active{ background:var(--purple-500) !important; color:#fff !important; box-shadow:0 0 0 .25rem rgba(106,76,156,.25); }

button, .btn{ font-weight:600; letter-spacing:.01em; }
.btn-purple{
  background:var(--purple-700); color:#fff; border:none; border-radius:25px; padding:12px 24px; box-shadow:0 6px 14px rgba(75,44,145,.25);
}
.btn-purple:hover{ background:#3f257a; color:#fff; }

/* Soft badge used in tables */
.badge-soft{ background:#f5f5f5; color:#555; }

/* =====================================================================
   FORMS & SELECT2 (GLOBAL HELPERS)
   ===================================================================== */
.form-label{ color:var(--purple-700); font-weight:600; }
.form-control{ border-radius:10px; border-color:#ced4da; box-shadow:none; padding:10px 12px; }
.form-control:focus{ border-color:var(--purple-600); box-shadow:0 0 0 3px rgba(90,62,132,.12); }

/* Select2 base */
.select2-container{ width:100% !important; }
.select2-container--open{ z-index:2000 !important; }

/* Hide chips when we add 's2-no-chips' */
.s2-no-chips .select2-selection__choice{ display:none !important; }
.s2-no-chips .select2-selection__rendered{ padding-left:0; }

/* Light purple dropdown theme */
.tp-select2-light .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background-color:#f3eaff !important; color:#3f2a6f !important;
}
.tp-select2-light .select2-container--default .select2-results__option[aria-selected="true"]{
  background-color:#ede7f6 !important; color:#3f2a6f !important;
}
.tp-select2-light .select2-dropdown{ border-color:#e5d9ff !important; border-radius:8px; }
.tp-select2-light .select2-container--default .select2-search--dropdown .select2-search__field:focus{
  outline:none; box-shadow:0 0 0 3px rgba(90,62,132,.12); border-color:#cbb7ff;
}

/* =====================================================================
   SELECT2: UNIVERSAL “FIRST PAINT” FIX (prevents half-hidden placeholder)
   Applies inside All Services, Dashboard, Booking (logged-in & logged-out)
   ===================================================================== */

/* 1) Never clip the selection box; keep consistent size */
#allservices-root .select2-container .select2-selection--single,
#allservices     .select2-container .select2-selection--single,
#allservices-filters .select2-container .select2-selection--single,
#dashboard-root  .select2-container .select2-selection--single,
#dashboard       .select2-container .select2-selection--single,
#booking-root    .select2-container .select2-selection--single{
  display:block !important;
  height:var(--filter-h) !important;
  min-height:var(--filter-h) !important;
  border-radius:var(--filter-radius) !important;
  overflow:visible !important; /* ← prevents cropping on first render */
  box-sizing:border-box !important;
  
}

/* 2) Vertically center placeholder/value purely by line-height */
#allservices-root .select2-selection--single .select2-selection__rendered,
#allservices-root .select2-selection--single .select2-selection__placeholder,
#allservices     .select2-selection--single .select2-selection__rendered,
#allservices     .select2-selection--single .select2-selection__placeholder,
#allservices-filters .select2-selection--single .select2-selection__rendered,
#allservices-filters .select2-selection--single .select2-selection__placeholder,
#dashboard-root  .select2-selection--single .select2-selection__rendered,
#dashboard-root  .select2-selection--single .select2-selection__placeholder,
#dashboard       .select2-selection--single .select2-selection__rendered,
#dashboard       .select2-selection--single .select2-selection__placeholder,
#booking-root    .select2-selection--single .select2-selection__rendered,
#booking-root    .select2-selection--single .select2-selection__placeholder{
  position:static !important;
  transform:none !important;
  margin:0 !important;
  height:var(--filter-h) !important;
  line-height:var(--filter-h) !important;  /* ← the key to “All services” full text */
  padding:0 .75rem !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* 3) Arrow matches full height */
#allservices-root .select2-selection--single .select2-selection__arrow,
#allservices     .select2-selection--single .select2-selection__arrow,
#allservices-filters .select2-selection--single .select2-selection__arrow,
#dashboard-root  .select2-selection--single .select2-selection__arrow,
#dashboard       .select2-selection--single .select2-selection__arrow,
#booking-root    .select2-selection--single .select2-selection__arrow{
  height:var(--filter-h) !important;
}

/* 4) Native select fallback (before Select2 initializes) */
#allservices-root .form-select,
#allservices     .form-select,
#allservices-filters .form-select,
#dashboard-root  .form-select,
#dashboard       .form-select,
#booking-root    .form-select{
  min-height:var(--filter-h) !important;
  line-height:var(--filter-h) !important;
  padding:0 .75rem !important;
  border-radius:var(--filter-radius) !important;
}

/* 5) If any card was using content-visibility, force visible for filters */
#allservices-root #allservices-filters .card,
#allservices #allservices-filters .card,
#booking-root    #booking-filters .card,
#dashboard-root  #dashboard-filters .card,
#dashboard       #dashboard-filters .card{
  content-visibility:visible !important;
  contain-intrinsic-size:auto !important;
}

/* =====================================================================
   TABLES
   ===================================================================== */
.table-modern{
  --tbl-header-bg:var(--lavender-200);
  --tbl-header-border:#efe7ff;
  box-shadow:var(--shadow-200);
  border-radius:14px;
  overflow:hidden;
}
.table-modern thead th{
  background:var(--tbl-header-bg);
  border-bottom:1px solid var(--tbl-header-border) !important;
  color:var(--gray-700);
  font-weight:700;
  position:sticky; top:0; z-index:5;
}
.table-modern tbody tr:hover{ background:#fbfbfe; }
.table-modern td, .table-modern th{ vertical-align:middle; white-space:nowrap; }
.table-caption{ font-size:.9rem; color:var(--muted-color); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:768px){
  .container{ max-width:100%; padding:15px; }
  .btn-purple, .btn-secondary{ width:100%; }
  #portalTabsContent > .tab-pane{ padding:1rem; }
}

/* =====================================================================
   ALL SERVICES (SCOPED)
   ===================================================================== */
#allservices-root .card{ /* intentionally no content-visibility here to avoid clipping */ }
#allservices-root #allservices-filters .card{ border-radius:.75rem; }
#allservices-root #allservices-filters .card-header{
  border-bottom:1px solid rgba(0,0,0,.06); position:sticky; top:0; z-index:3; background:#fff;
}
#allservices-root .filters-sticky{ position:sticky; top:1rem; }

/* Stack; no horizontal scroller */
#allservices-root #allservices-filters-panel .row.g-2{
  display:block !important; overflow-x:visible !important; padding-bottom:0 !important;
  --bs-gutter-y:.5rem; --bs-gutter-x:0;
}
#allservices-root #allservices-filters-panel .row.g-2 > [class*="col-"]{
  width:100% !important; flex:0 0 100% !important; padding-left:0 !important; padding-right:0 !important;
}

/* Hide native selects only AFTER enhancement */
#allservices-root #allservices-filters-panel select.select2.is-enhanced{
  position:absolute !important; left:-99999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important;
}
#allservices-root #allservices-filters-panel select.select2:not(.is-enhanced){
  position:static !important; width:100% !important; height:auto !important; opacity:1 !important; pointer-events:auto !important;
}
@media (min-width:992px){ #allservices-root .filters-toggle-lg-hide{ display:none !important; } }

/* =====================================================================
   BOOKING (SCOPED)
   ===================================================================== */
#booking-root #booking-filters .card{ border-radius:.75rem; }
#booking-root #booking-filters .card-header{
  border-bottom:1px solid rgba(0,0,0,.06); position:sticky; top:0; z-index:3; background:#fff;
}
#booking-root .filters-sticky{ position:sticky; top:1rem; }
#booking-root #booking-filters-panel .row.g-2{
  display:block !important; overflow-x:visible !important; padding-bottom:0 !important;
  --bs-gutter-y:.5rem; --bs-gutter-x:0;
}
#booking-root #booking-filters-panel .row.g-2 > [class*="col-"]{
  width:100% !important; flex:0 0 100% !important; padding-left:0 !important; padding-right:0 !important; margin:0 !important;
}
/* Rating stars */
#booking-root .star-input{ display:inline-flex; flex-direction:row-reverse; }
#booking-root .star-input input{ display:none; }
#booking-root .star-input label{ cursor:pointer; font-size:1.1rem; line-height:1; padding:0 .05rem; }
#booking-root .star-input label:hover, #booking-root .star-input label:hover~label{ color:#f0ad4e; }
#booking-root .star-input input:checked~label{ color:#f0ad4e; }
#booking-root .rating-readonly{ color:#f0ad4e; font-size:1rem; }

/* =====================================================================
   DASHBOARD (SCOPED)
   ===================================================================== */
#dashboard-root #dashboard-filters .card,
#dashboard      #dashboard-filters .card{ border-radius:.75rem; }
#dashboard-root #dashboard-filters .card-header,
#dashboard      #dashboard-filters .card-header{
  background:#fff; color:#212529; border-bottom:1px solid rgba(0,0,0,.06);
  position:sticky; top:0; z-index:3;
}
#dashboard-root .filters-sticky, #dashboard .filters-sticky{ position:sticky; top:1rem; }
#dashboard-root #dashboard-filters-panel .row.g-2,
#dashboard      #dashboard-filters-panel .row.g-2{
  display:block !important; overflow-x:visible !important; padding-bottom:0 !important;
  --bs-gutter-y:.5rem; --bs-gutter-x:0;
}
#dashboard-root #dashboard-filters-panel .row.g-2 > [class*="col-"],
#dashboard      #dashboard-filters-panel .row.g-2 > [class*="col-"]{
  flex:0 0 100% !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; margin:0;
}
@media (min-width:992px){
  #dashboard-root .filters-toggle-lg-hide, #dashboard .filters-toggle-lg-hide{ display:none !important; }
}

/* =====================================================================
   AVAILABILITY / SCHEDULES (SCOPED)
   ===================================================================== */
#schedules-root .legend{
  display:flex; flex-wrap:wrap; gap:.5rem .65rem; align-items:center; margin:.5rem 0 1rem;
}
#schedules-root .legend .chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#f7f4ff; color:#4b2c91; border-radius:999px;
  padding:.35rem .65rem; font-weight:600; font-size:.875rem; letter-spacing:.01em;
  box-shadow:0 1px 3px rgba(75,44,145,.08) inset;
}
#schedules-root .legend .swatch{ width:12px; height:12px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.06) inset; }
#schedules-root .swatch.free{    background:var(--slot-free); }
#schedules-root .swatch.booked{  background:var(--slot-booked); }
#schedules-root .swatch.closed,
#schedules-root .swatch.blocked{ background:var(--slot-closed); }
#schedules-root .swatch.yours{   background:var(--slot-yours); }
#schedules-root .swatch.pending{ background:var(--slot-pending); }

/* Dot legend used by PHP (.avail-legend + .dot) */
#schedules-root .avail-legend{
  display:flex; gap:.75rem; flex-wrap:wrap;
  font-size:.9rem; color:var(--muted-color); margin:10px 0 12px;
}
#schedules-root .avail-legend > span{ display:inline-flex; align-items:center; gap:.45rem; }
#schedules-root .avail-legend .dot{
  width:12px; height:12px; border-radius:50%; display:inline-block;
  border:1px solid rgba(0,0,0,.15); box-shadow:0 0 0 1px rgba(0,0,0,.05) inset;
}
#schedules-root .avail-legend .dot.free{    background:var(--slot-free); }
#schedules-root .avail-legend .dot.booked{  background:var(--slot-booked); }
#schedules-root .avail-legend .dot.closed,
#schedules-root .avail-legend .dot.blocked{ background:var(--slot-closed); }
#schedules-root .avail-legend .dot.past{    background:var(--slot-past); }
#schedules-root .avail-legend .dot.yours{   background:var(--slot-yours); }
#schedules-root .avail-legend .dot.pending{ background:var(--slot-pending); }

/* Viewport + tooltip cursor */
#schedules-root .availability-viewport{ overflow-y:auto; overflow-x:auto; }
#schedules-root #availability [data-bs-toggle="tooltip"]{ cursor:help; }

/* =====================================================================
   PROFILE / BUSINESS / MESSAGES / NOTIFICATIONS / REVIEWS / SETTINGS
   ===================================================================== */
#profile-root .avatar{
  width:88px; height:88px; border-radius:50%; object-fit:cover; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
#profile-root .stat{
  display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; background:#faf7ff; border-radius:.75rem; font-weight:600;
}
#business-root .card-compact .card-body{ padding:1rem; }
#business-root .status-pill{
  display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:999px; background:#f5f5f5; color:#444; font-weight:600; font-size:.85rem;
}
#messages-root .thread{ max-height:60vh; overflow:auto; border-radius:12px; border:1px solid rgba(0,0,0,.05); }
#messages-root .msg{ padding:.5rem .75rem; border-radius:.75rem; margin-bottom:.35rem; max-width:75%; }
#messages-root .msg.me{ background:#ede7f6; margin-left:auto; }
#messages-root .msg.them{ background:#f8f8f8; }
#notifications-root .item{ display:flex; gap:.75rem; padding:.6rem .75rem; border-radius:.75rem; }
#notifications-root .item.unread{ background:#f8f5ff; }
#notifications-root .item .time{ color:var(--muted-color); font-size:.85rem; }
#reviews-root .review{ border-bottom:1px solid rgba(0,0,0,.06); padding:1rem 0; }
#reviews-root .rating{ color:#f0ad4e; }
#settings-root .group{ background:#faf7ff; padding:1rem; border-radius:.75rem; margin-bottom:1rem; }
#settings-root .group h6{ margin-bottom:.5rem; color:var(--purple-700); }

/* =====================================================================
   UTILITIES
   ===================================================================== */
.filters-sticky{ position:sticky; top:1rem; }
.empty-state{
  text-align:center; padding:2rem; border:1px dashed rgba(0,0,0,.08); border-radius:12px; color:var(--muted-color);
}

/* Two-line clamp for long comments */
.line-clamp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}


/* Lilac (very light purple) look for booking cards */
.card.booking-card{
  background-color: var(--lavender-200);   /* lightest purple from palette */
  border: 1px solid #E7D9FF !important;    /* subtle purple border (overrides .border-0) */
  color: #2D2246;                          /* readable on lilac */
}

/* Let the lilac show through the footer */
.card.booking-card .card-footer{
  background-color: transparent !important;
}

/* Optional: soften the "soft" badge on lilac */
.card.booking-card .badge-soft{
  background-color: rgba(111, 66, 193, .12); /* based on Bootstrap purple #6f42c1 */
  color: #5B3EA4;
}

/* Optional: tiny hover lift */
.card.booking-card:hover{
  box-shadow: 0 .25rem .75rem rgba(45,34,70,.08);
  transform: translateY(-1px);
  transition: box-shadow .2s ease, transform .2s ease;
}