:root{
  --bg:#000; --bg-1:#000; --surface:#000; --surface-2:#000; --surface-hover:#252525;
  --border:#262626; --border-strong:#343434;
  --text-1:#F2F2EF; --text-2:#fff; --text-3:#686865;
  --accent:#e3121b; --accent-dim:#2C3610; --accent-text:#1A2006; --on-accent:#141B04;
  --success:#5FBF7F; --success-bg:#152418; --success-text:#8FDDA6;
  --danger:#E2645A; --danger-bg:#271718; --danger-text:#F0958C;
  --info:#5AA9E6; --info-bg:#131F2C; --info-text:#93CBF2;
  --warn:#E6B84E; --warn-bg:#241E10; --warn-text:#F2D28D;
  --radius:10px; --radius-lg:10px;
  --font: 'Inter', -apple-system, sans-serif;
  --navy: #000;
    --navy-deep: #000;
    --asphalt: #1B1F27;
    --chrome: #C9D6DF;
    --foam: #F5F8F7;
    --aqua: #2EC4B6;
    --amber: #FFB238;
    --ink: #0E1620;
    --line: rgba(201,214,223,0.18);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{ overflow: hidden; background:#fff;color:var(--text-1);font-family:var(--font);font-size:14px;line-height:1.5;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--font);cursor:pointer;}
*{scrollbar-width:thin;scrollbar-color: #214CA745 transparent;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#214CA7;border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:#3465c5;}

.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;}
.main{padding-bottom:38px;}
.app-footer{position: fixed;
  left: 248px;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: #fff;
  border-top: 1px solid #ccc;
  color: #7a8495;
  font-size: 13px;
  border-left: 1px #ddd solid;}
.app-footer b{color:var(--accent);font-weight:700; text-transform: uppercase;}

/* ---------- SIDEBAR ---------- */
.sidebar{background:var(--bg-1);
position:sticky;top:0;height:100vh;overflow-y:auto;

&::before{
  position: absolute;
  right: 0;
  top: -2px;
  width: 23px;
  height: 23px;
  /* background: url(../images/left-side-icon.svg) no-repeat; */
  content: "";
  z-index: 100;
}

}

.sidebar{display:flex;flex-direction:column;overflow:hidden; box-shadow: 6px 0px 20px 0px #102B7014;}
.sidebar-menu{overflow-y: auto;
padding: 20px 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: #214CA7 transparent;
  background: transparent;
  position: relative;
  z-index: 1;}
.sidebar-menu::-webkit-scrollbar{width:5px;}
/* sidebar background: solid black (matches header), glowing curve and fading dot grid */
.sidebar::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 620' preserveAspectRatio='xMaxYMax slice'%3E%3Cdefs%3E%3Cpattern id='d' width='12' height='12' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='6' cy='6' r='1.1' fill='%23fff'/%3E%3C/pattern%3E%3CradialGradient id='g' cx='1' cy='.8' r='.7'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='300' height='620' fill='url(%23g)'/%3E%3C/mask%3E%3ClinearGradient id='l' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fa0100' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23fa0100' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23fa0100' stop-opacity='.15'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='620' fill='url(%23d)' mask='url(%23m)'/%3E%3Cpath d='M0 500C120 420 230 280 300 110' fill='none' stroke='url(%23l)' stroke-width='1.3'/%3E%3C/svg%3E") right bottom / cover no-repeat,
    #000;
}
.sidebar-menu::-webkit-scrollbar-track{background:transparent;margin:8px 0;}
.sidebar-menu::-webkit-scrollbar-thumb{background:#214CA7;border-radius:99px;}
.sidebar-menu::-webkit-scrollbar-thumb:hover{background:#3465c5;}
.sidebar-account{margin-top: auto;
 background: #fff;
  position: relative;
  z-index: 3;
  border-radius: 24px 24px 0px 0px;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));

   @media (max-width:1199px) {
  padding: 10px 16px calc(30px + env(safe-area-inset-bottom));
   }

  }
.sidebar-account .dropdown{position:static;}
.sidebar-account-toggle{width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  background: var(--bg);
  border: 0;
  border-radius: 33px;
  color: var(--text-1);
  text-align: left;}
.sidebar-account-toggle:hover{background:var(--surface-hover);}
.sidebar-account-toggle .avatar{width:32px;height:32px;cursor:pointer;}
.sidebar-account-details{display:grid;gap:1px;min-width:0;flex:1;}
.sidebar-account-details strong{font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;}
.sidebar-account-details small{font-size:11px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-dropdown-icon{width:22px;height:22px;flex-shrink:0;color:#fff;
  transition:transform .2s ease;}
.sidebar-account .dropdown:has(.dropdown-menu.open) .sidebar-dropdown-icon{transform:rotate(180deg);}
.sidebar-user-menu{left:10px!important;right:10px!important;bottom:calc(100% + 8px)!important;top:auto!important;min-width:0!important;width:auto!important;}

/* Branch selector menu */
#branchMenu{min-width:270px;padding:12px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.14);}
#branchMenu .dropdown-item[data-branch]{display:block;margin:2px 0;padding:10px 12px;border-radius:10px;color:#15171c;transition:background .18s ease,color .18s ease;}
#branchMenu .dropdown-item[data-branch]:hover{background:#f4f6f8;color:#15171c;}
#branchMenu .dropdown-item[data-branch] strong{ text-transform: capitalize; font-size:13px!important;font-weight:700;line-height:1.2;}
#branchMenu .dropdown-item[data-branch] span{ text-transform: capitalize; font-size:11px!important;color:#6e737c!important;line-height:1.3;}
#branchMenu .dropdown-item[data-branch].active{background:var(--bg);color:#fff;}
#branchMenu .dropdown-item[data-branch].active span{color:#fff!important;}

/* Sidebar account dropdown */
.sidebar-user-menu{padding:8px!important;background:#fff!important;border:1px solid #e4e7ec!important;border-radius:10px!important;box-shadow:0 12px 30px rgba(15,23,42,.16)!important;color:#121826!important;}
.sidebar-user-menu .dropdown-user{padding:0px;gap:5px;

}
.sidebar-user-menu .dropdown-user .avatar{width:34px;height:34px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;}
.sidebar-user-menu .dropdown-user-name{ text-transform: capitalize; color:#111827;font-size:13px;font-weight:700;}
.sidebar-user-menu .dropdown-user-email{color:#667085;font-size:11px;}
.sidebar-user-menu .dropdown-divider{height:1px;margin:7px 4px;background:#d7dbe1;}
.sidebar-user-menu .dropdown-item{padding:5px 0px;border-radius:10px;color:#172033;font-size:13px;}
.sidebar-user-menu .dropdown-item i{color:#596579;font-size:15px;}
.sidebar-user-menu .dropdown-item:hover{background:#f6f7f9;color:#172033;}
.sidebar-user-menu .dropdown-item.danger{color:#ff857c;}
.sidebar-user-menu .dropdown-item.danger i{color:#ff857c;}
.sidebar-user-menu .dropdown-item.danger:hover{background:#fff4f3;color:#ef645a;}
.brand{margin-bottom: 0px;
  display: flex;
  align-items: center;
  gap: 10px;
 padding: 15px 11px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  border-radius: 0px 0px 0px 24px;

}
.sidebar-close-btn{display:none;}
.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#c97f22);display:flex;align-items:center;justify-content:center;color:var(--on-accent);position:relative;overflow:hidden;flex-shrink:0;}
.brand-mark::after{content:'';position:absolute;top:-40%;left:-20%;width:60%;height:220%;background:rgba(255,255,255,0.35);transform:rotate(25deg);}
.brand-mark i{font-size:17px;position:relative;z-index:1;}
.brand-name{font-size:15px;font-weight:600;letter-spacing:-0.2px;}
.brand-sub{font-size:11px;color:var(--text-3);margin-top:1px;}

.nav-group{margin-bottom:13px; padding: 0 0px;}
.nav-label{font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  padding: 0px 0px;
    padding-left: 0px;
  margin-bottom: 10px;
  font-weight: 700;
  position: relative;
  display: inline-block;
  padding-left: 12px;
&::before{
  position: absolute;

    top: 7px;
    left: 0;
    width: 5px;
    content: "";
    background: var(--accent);
    height: 5px;
    border-radius: 50%;
}
}
.nav-item{ border: 1px solid transparent;margin-bottom: 3px; display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;font-size:13.5px;color:#fff;cursor:pointer;position:relative;}
.nav-item i{font-size: 22px;
  width: 24px;
  text-align: center;}
.nav-item i.icon-purple{color:#9b8afb;}
.nav-item i.icon-amber{color:#ffc247;}
.nav-item i.icon-blue{color:#5cb3ff;}
.nav-item i.icon-teal{color:#35d6c4;}
.nav-item i.icon-green{color:#4fd38f;}
.nav-item i.icon-pink{color:#ff8fb8;}
.nav-item i.icon-cyan{color:#48d6e8;}
.nav-item i.icon-indigo{color:#8ea1ff;}
.nav-item i.icon-orange{color:#ffa565;}
.nav-item i.icon-gold{color:#ffd166;}
.nav-item i.icon-red{color:#ff8177;}
.nav-item i.icon-violet{color:#d98ae0;}
.nav-item i.icon-mint{color:#7be0a8;}
.nav-item{transition:background-color .2s ease,border-color .2s ease,padding-left .2s ease;}
/* hover is lighter than the active item so the two states read differently */
.nav-item:hover{background:#1f1f1f;border-color:#2a2a2a;
}
.nav-item.active:hover{background:#333;border-color:#333;padding-left:10px;}
.nav-item.active{color: var(--text-1);
  background: #333;
  border: 1px solid #333;
  border-radius: 10px;}
.nav-item.active::before{ border-radius: 10px; 
content:'';position:absolute;left:0px;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--accent);border-radius:2px;}
.nav-item .badge{margin-left:auto;font-size:10px;background:var(--accent-dim);color:var(--accent);padding:1px 6px;border-radius:20px;font-weight:500;}
.nav-item .lock{margin-left:auto;font-size:13px;color:var(--text-3);}

/* ---------- MAIN ---------- */
.main{min-width:0; background: #f4f4f47d;}
.topbar{height: 60px;
box-shadow: 0px 1px 3px 0px #1018280D;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  position: sticky;
  top: 0;

  z-index: 5;
background: #fff;
  border-radius:0;
 @media (max-width: 1199px) {
  padding: 0 10px;
 }
}
.topbar-search{
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
border: 1px solid #33333317;
  background: #ffffff1f;
  border-radius: 10px;
  transition: border-color .15s ease;
  font-size: 14px;
  font-weight: 400;width:320px;
  @media (max-width: 1199px) {
width:215px;
  }
}
.topbar-search input{background:none;border:none;outline:none;color:#000;font-family:var(--font);font-size:13px;width:100%;}
.topbar-search input::placeholder{color:#667085;}
.topbar-right{display:flex;align-items:center;gap:8px;
  @media (max-width: 1199px) {
gap:7px;
  }
}
.topbar-brand-mobile{display:flex;align-items:center;
  margin-right:15px;
  @media (max-width: 570px) {
  margin-right:0px;
  }
}
/* Forward Prime Solutions seal: round, so sized by height */
.topbar-brand-mobile img{width:auto;height:52px;display:block;}
@media (min-width: 1200px){.sidebar .brand{display:none;}}
.branch-pill{display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: #000;
  cursor: pointer;
  user-select: none;
border: 1px solid #33333317;
  background: #ffffff1f;
  text-transform: capitalize;}

.icon-btn{width:28px;height:28px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;border: 1px solid var(--accent);
  background: var(--accent);
i{
  color: #fff;
}
&:hover{
  background: var(--surface-hover);
  color: var(--text-1);
}
}

.topbar-right .icon-btn{
  background: #ffffff1f;
  cursor: pointer;
  user-select: none;
}

.dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--danger);}
.dot.hidden{display:none;}
.avatar{width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;}

/* ---------- SEARCH RESULTS ---------- */
.search-results{position:absolute;top:calc(100% + 8px);left:0;width:360px;
  max-height:380px;overflow-y:auto;padding:12px;background:#fff;
  border:1px solid #ddd;border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.14);
  z-index:30;display:none;
@media (max-width: 1199px) {
width: 100%;
}
}
.search-results.open{display:block;}
.search-group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-3);padding:8px 8px 4px;font-weight:500;}
.search-result{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;}
.search-result:hover{background:#f5f6f8;}
.search-result i{font-size:15px;color:var(--text-3);width:16px;text-align:center;flex-shrink:0;}
.search-result-title{font-size:13px;color:#172033;}
.search-result-sub{font-size:11.5px;color:var(--text-3);margin-top:1px;}
.search-empty, .dropdown-empty{padding:20px 8px;text-align:center;font-size:12.5px;color:var(--text-3);}

/* ---------- DROPDOWNS ---------- */
.dropdown{position:relative;}
.dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:270px;
padding:12px;
background:#fff;
border:1px solid #ddd;
border-radius:10px;
box-shadow:0 12px 30px rgba(15,23,42,.14);
z-index:30;display:none;}
.dropdown-menu.open{display:block;}
.dropdown-menu.dropdown-menu-wide{width:320px;}
.dropdown-header{display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 0px 10px;
  font-size: 15px;
  font-weight: 500;
  color: #000;}
.dropdown-header .link{font-size:13px;font-weight:500;cursor:pointer;}
.dropdown-header-actions{display:flex;align-items:center;gap:10px;}
.dropdown-header-actions .link-danger{color:var(--danger);}
.dropdown-header-actions .link-danger:hover{text-decoration:underline;}
.dropdown-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:10px;
font-size:13px;color:#000;cursor:pointer;}
.dropdown-item i{font-size:15px;width:16px;text-align:center;color:var(--text-3);flex-shrink:0;}
.dropdown-item:hover{background:var(--surface-hover);color:var(--text-1);}
.dropdown-item.active{background:var(--surface-hover);color:var(--accent);}
.dropdown-item.active i{color:var(--accent);}
.dropdown-item.danger{color:var(--danger-text);}
.dropdown-item.danger i{color:var(--danger-text);}
.dropdown-divider{height:0.5px;background:#26262633;margin:6px 4px;}
.dropdown-user{display:flex;align-items:center;gap:10px;padding:6px 8px 10px;}
.dropdown-user-name{font-size:13px;font-weight:600;color:#000;}
.dropdown-user-email{font-size:11.5px;color:var(--text-3);margin-top:1px;}

.notif-list, .wa-list{max-height:340px;overflow-y:auto;margin:0 -2px;}
.notif-item, .wa-item{display:flex;gap:10px;padding:9px 8px;border-radius:8px;cursor:pointer;position:relative;}
.notif-item:hover, .wa-item:hover{background:#f5f6f8;}
.notif-item.unread::after{content:'';position:absolute;top:14px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.notif-icon{width:32px;height:32px;border-radius:8px;background:#FFF1E8;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);font-size:16px;}
.notif-title{font-size:12.5px;color:#000;line-height:1.4;padding-right:10px;}
.notif-time{font-size:11px;color:var(--text-3);margin-top:2px;}
.wa-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;flex-shrink:0;}
.wa-name{font-size:12.5px;color:#000;font-weight:500;}
.wa-msg{font-size:11.5px;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;}

/* ---------- SERVICE MULTI-SELECT (searchable dropdown) ---------- */
.svc-select{position:relative;}
.svc-select-control{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:36px;padding:5px 34px 5px 10px;border:1px solid #C9D3E2;border-radius:10px;background:#fff;cursor:text;}
.svc-select-control:focus-within{border-color:var(--accent);}
.svc-chip-list{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0;}
.svc-placeholder{color:#8b93a3;font-size:13px; text-transform: capitalize;}
.svc-chip{display:flex;align-items:center;gap:5px;background:#FFF1E8;color:var(--accent);border-radius:6px;padding:3px 6px 3px 9px;font-size:12px;font-weight:500;white-space:nowrap;}
.svc-chip-remove{cursor:pointer;font-size:13px;line-height:1;color:var(--accent);opacity:.7;}
.svc-chip-remove:hover{opacity:1;}
.svc-caret{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#8b93a3;font-size:14px;pointer-events:none;}
.svc-dropdown{position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15,23,42,.14);
  z-index: 40;
  display: none;
  padding: 0px 8px 8px;
  max-height: 300px;
  overflow-y: auto;}
.svc-dropdown.open{display:block;}
.svc-dropdown-search{position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 8px 2px 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid #eee;
  z-index: 1;}
.svc-dropdown-search i.ti-search{color:#8b93a3;font-size:14px;flex-shrink:0;}
#nbServiceSearch.svc-search-input{border:1px solid #C9D3E2;border-radius:8px;outline:none;flex:1;min-width:0;height:34px;font-size:13px;color:#172033;background:#fff;padding:0 10px;}
#nbServiceSearch.svc-search-input:focus{border-color:var(--accent);}
.svc-options{display: grid;
  flex-direction: column;
  gap: 2px;
  grid-template-columns: 1fr 1fr;
@media (max-width: 767px) {
  grid-template-columns: 1fr ;
}
}
.svc-options .svc-option{display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  margin-bottom: 0;
  border-radius: 8px;
  font-size: 13px;
  color: #172033;
  cursor: pointer;
  font-weight: normal;
  text-transform: capitalize;}
.svc-options .svc-option:hover{background:#f5f6f8;}
.svc-option input[type="checkbox"]{width:auto;}
.svc-option.svc-option-hidden{display:none;}
.svc-empty{padding:12px;text-align:center;color:var(--text-3);font-size:12.5px;}

/* ---------- MODAL ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(8,7,5,0.6);display:none;
  align-items:center;justify-content:center;padding:6vh 1rem;z-index:100;overflow-y:auto;}
.modal-overlay.open{display:flex;}
.modal{background:#fff;
  border-radius:var(--radius-lg);width:100%;max-width: 725px;box-shadow:0 24px 64px rgba(0,0,0,0.5);}
.modal-header{display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 15px;
  background: #000;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid transparent;}
.modal-title{font-size: 17px;
  font-weight: 700; text-transform: capitalize;
  color: #fff;}
.modal-close{width:28px;height:28px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;border: 1px solid var(--accent);
  background: var(--accent);
i{
  color: #fff;
}
}
.modal-close:hover{background:var(--surface-hover);color:var(--text-1);}
.modal-body{padding:10px 16px;
  display: grid;
  gap: 12px;
  overflow: auto;
max-height: 459px;}
.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.modal-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}

/* ---------- PHOTO LIGHTBOX (click any uploaded photo tile to enlarge) ---------- */
#photoLightboxModal{background:rgba(8,7,5,0.85);}
.photo-lightbox{position:relative;max-width:90vw;max-height:90vh;}
.photo-lightbox img{display:block;max-width:90vw;max-height:90vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.photo-lightbox-close{position:absolute;top:-16px;right:-16px;width:34px;height:34px;border-radius:50%;border:none;background:#fff;color:#171a20;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35);}
.photo-lightbox-close:hover{background:#f6f7f9;}

/* ---------- PROFILE MODAL ---------- */
.profile-modal-body{height:auto;}
.profile-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px 0 18px;}
.profile-avatar{width:56px;height:56px;font-size:18px;margin-bottom:6px;}
.profile-name{font-size:16px;font-weight:700;color:#000; text-transform: capitalize;}
.profile-role{font-size:13px;color:var(--text-3);}
.profile-details{border-top:1px solid #ddd;padding-top:14px;display:grid;gap:12px;}
.profile-detail-row{display:flex;flex-direction:column;gap:2px;}
.profile-detail-label{font-size:12px;color:var(--text-3);}
.profile-detail-value{font-size:13.5px;color:#000;font-weight:500;}
.field label{display: block;
  font-size: 13px;
color: #667085;
  margin-bottom: 6px;
  font-weight: 600;}
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea{position: relative;
  display: flex; width: 100%;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 5px 10px 5px 12px;
  border: 1px solid #C9D3E2;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: #172033;
  resize: none!important;
  -webkit-user-select: none;
  user-select: none;}
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color:var(--accent);}
/* input[type=date]'s calendar icon is an internal shadow-DOM part — forcing
   display:flex on the host (from the shared .field input rule above) shifts
   its hit-box away from where the icon is actually painted, so clicks on the
   icon appear to do nothing. Reset to block layout so the native picker
   indicator's click target lines up with what's rendered. */
.field input[type="date"]{display:block;}
.field input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:1;}
.field textarea{resize:vertical;min-height:60px;}
.modal-footer{ padding: 10px 16px; display:flex;align-items:center;
  justify-content:flex-end;gap:10px; border-top: 1px #ddd solid;}

/* ---------- TOAST ---------- */
.toast-stack{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:8px;z-index:200;}
.toast{background:var(--surface-2);border:0.5px solid var(--border-strong);border-radius:var(--radius);padding:10px 14px;font-size:13px;color:var(--text-1);box-shadow:0 12px 32px rgba(0,0,0,0.4);display:flex;align-items:center;gap:8px;animation:toast-in 0.18s ease-out;}
.toast i{color:var(--success-text);font-size:16px;}
@keyframes toast-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.view{padding: 0px;
  max-width: 100%;
  overflow: auto;
  height: calc(100dvh - 97px - var(--shell-extra, 0px));


}
.view-header{display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 10px;
  position: sticky;
  top: 0;
  z-index: 2;
 

 }
.view-title{font-size:24px;font-weight:700;letter-spacing:-0.3px;color: #000;
@media (max-width: 768px) {
font-size: 20px;
}
}
.view-sub{font-size:13px;color:var(--text-3);margin-top:3px;}
.btn{ text-transform: capitalize;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  transition: 0.4s;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: #000;
  color: var(--text-1);
  height: 36px;
  justify-content: center;
@media (max-width: 768px) {
height: 32px;
  font-size: 12px;
}
}
.btn:hover{background:var(--bg);}
.btn-accent{font-size: 15px;
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}
.btn-accent:hover{background:var(--bg);}
.btn.danger{color:var(--danger-text);}
.btn.danger:hover{background:var(--danger-bg);}

/* ---------- KPI / CARDS ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:15px;}
.kpi{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.2rem;position:relative;overflow:hidden;}
.kpi-label{font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:6px;}
.kpi-value{font-family:var(--mono);font-size:26px;font-weight:500;margin-top:8px;}
.kpi-delta{font-size:11.5px;margin-top:6px;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;}
.up{color:var(--success-text);background:var(--success-bg);}
.down{color:var(--danger-text);background:var(--danger-bg);}

.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;}
.grid-3{display:grid;grid-template-columns:repeat(4,1fr);gap:0px 12px;
  @media (max-width:1199px) {
grid-template-columns:repeat(3,1fr);
  }
}
.card{background:#fff;border:1px solid #ddd;border-radius:20px;
  padding:18px; box-shadow: 0px 1px 3px 0px #1018280D;
  @media (max-width:1199px) {
 padding:15px;  border-radius:12px;
  }
}
.card-title{ text-transform: capitalize; font-size:20px;font-weight:600; 
  color: #000; margin-bottom:12px;display:flex;align-items:center;
  justify-content:space-between;}
.card-title .link{font-size:12px;color:var(--accent);font-weight:500;cursor:pointer;}
.card-title .link:hover{text-decoration:underline;}
.card-title-actions{display:flex;align-items:center;gap:12px;}
.chart-icon-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:10px;border:none;background:none;color:var(--text-3);padding:0;}
.chart-icon-btn:hover{background:var(--surface-hover);color:var(--text-1);}

/* bars (used on dashboard + reports) */
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end;height:100%;}
.bar{width:100%;background:var(--accent-dim);border-radius:4px 4px 0 0;position:relative;}
.bar.now{background:var(--accent);}
.bar-label{font-size:10.5px;color:var(--text-3);}

/* queue list (used on dashboard, queue, crm, reports) */
.qrow{display:flex;align-items:center;gap:10px;padding:0px 0 10px;
  border-bottom:0.5px solid var(--border);}
.qrow:last-child{border-bottom:none;}
.qav{width:32px;height:32px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text-2);}
.qmeta{flex:1;min-width:0;}
.qname{font-size:13px;font-weight:500; text-transform: capitalize; color: #000;}
.qsub{font-size:11.5px;color:var(--text-3);margin-top:1px;}
.status-pill{font-size:11px;padding:3px 12px;border-radius:20px;
  font-weight:500;white-space:nowrap;
  border-color: #fa0100;}

/* ---------- TABLES ---------- */
.table-wrap{

  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  .table-scroll{
  height: calc(100dvh - 237px - var(--shell-extra, 0px)) !important;
  }
  }
.toolbar{display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #eee;
}
.toolbar input{background:#fff;border:1px solid #e2e6ec;
  border-radius:10px;padding:8px 5px;color:#172033;font-size:13px;width:240px;}
.toolbar input:focus{outline:none;border-color:var(--accent);}
.chip{font-size:12px;padding:6px 12px;border-radius:10px;border:1px solid #e2e6ec;background:#fff;color:#475569;cursor:pointer;}
.chip.active{background:#FFF1E8;color:var(--accent);border-color:transparent;font-weight:600;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--text-3);font-weight:500;padding:15px 10px;border-bottom:0.5px solid var(--border);}
td{padding:12px 10px;border-bottom:0.5px solid #ddd;color:#000!important; text-transform: capitalize;}
tr:last-child td{border-bottom:none;}

.cell-primary{color:var(--text-1);font-weight:500;}
.mono{font-family:var(--mono);font-size:12.5px;}
.tag{font-size:11px;padding:3px 9px;border-radius:6px;font-weight:500;}
.row-edit-btn{width:32px;height:32px;border-radius:10px;border:1px solid #e2e6ec;background:#f1f2f4;display:inline-flex;align-items:center;justify-content:center;color:#475569;cursor:pointer;}
.row-edit-btn:hover{background:#e5e7eb;color:#1e293b;}

/* ---------- SCROLLABLE TABLE WITH STICKY HEADER ---------- */
.table-scroll{height:calc(100dvh - 400px - var(--shell-extra, 0px));overflow-y:auto;overflow-x:auto;
border: 1px #ddd solid; border-radius: 10px 10px 0px 0px;
  border-bottom: none;
}
.table-scroll table{width:100%;border-collapse:separate;border-spacing:0;}
.table-scroll thead th{position:sticky;top:0;background:var(--bg);z-index:2; color: #fff;}

/* ---------- TABLE PAGINATION ---------- */
.table-pagination{display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-3);
  border: 1px #ddd solid;
  padding: 10px;
  border-radius: 0px 0px 10px 10px;}
.pagination-btns{display:flex;gap:8px;}
.pagination-btns .btn{padding:6px 12px;font-size:12.5px;gap:4px;}
.pagination-btns .btn:disabled{opacity:0.4;cursor:not-allowed;}
.pagination-btns .btn:disabled:hover{background:var(--surface);}

/* Shared pager (SW.renderPager in common.js):  [‹ Prev] [1] [2] [3] [Next ›]  — same on every page */
.pagination-btns.sw-pager{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;}
.pagination-btns.sw-pager > .btn{width:auto;height:36px;padding:0 12px;gap:6px;background:#fff;color:#344054;border:1px solid #e4e7ec;border-radius:10px;font-size:13px;font-weight:500;box-shadow:none;}
.pagination-btns.sw-pager > .btn svg{flex-shrink:0;}
.pagination-btns.sw-pager > .btn:hover:not(:disabled){background:#f5f6f8;color:#101828;}
.pagination-btns.sw-pager > .btn:disabled,
.pagination-btns.sw-pager > .btn:disabled:hover{opacity:1;color:#98a2b3;background:#f9fafb;cursor:not-allowed;}
.sw-pager .pagination-pages{display:flex;align-items:center;gap:6px;}
.sw-pager .page-num{min-width:36px;height:36px;padding:0 6px;border-radius:10px;border:1px solid #e4e7ec;background:#fff;color:#344054;font-family:var(--font, inherit);font-size:13px;font-weight:600;cursor:pointer;transition:background-color .15s ease;}
.sw-pager .page-num:hover{background:#f5f6f8;}
.sw-pager .page-num.active{background:var(--accent);border-color:var(--accent);color:#fff;cursor:default;}
.sw-pager .page-num:focus-visible,.pagination-btns.sw-pager > .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (max-width:767px){
  .table-pagination:has(.sw-pager),.stf-pagination:has(.sw-pager){flex-direction:column !important;align-items:center !important;gap:10px;text-align:center;}
  .pagination-btns.sw-pager{width:auto !important;justify-content:center !important;gap:6px;}
  .pagination-btns.sw-pager > .btn{height:34px;padding:0 10px;}
  .sw-pager .page-num{min-width:34px;height:34px;}
}
@media (max-width:359px){
  .pagination-btns.sw-pager .sw-pager-label{display:none;}
  .pagination-btns.sw-pager > .btn{padding:0 9px;}
}

/* ---------- SERVICE CARDS (services, marketing, ai) ---------- */
.svc-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem;position:relative;transition:border-color 0.15s,transform 0.15s;}
.svc-card:hover{border-color:var(--border-strong);}
.svc-edit-btn{position:absolute;top:1.1rem;right:1.1rem;width:28px;height:28px;border-radius:10px;border:0.5px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--text-2);cursor:pointer;}
.svc-edit-btn:hover{background:var(--surface-hover);color:var(--text-1);}
.svc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-right:26px;}
.svc-name{font-size:14px;font-weight:600;color:var(--text-1);}
.svc-price{font-size:14px;font-weight:700;color:var(--accent);white-space:nowrap;flex-shrink:0;}
.svc-desc{font-size:12px;color:var(--text-3);margin:5px 0 14px;line-height:1.45;}
.svc-meta{display:flex;gap:16px;font-size:12px;color:var(--text-2);border-top:0.5px solid var(--border);padding-top:10px;}
.svc-meta span{display:flex;align-items:center;gap:5px;}
.svc-meta i{font-size:13px;color:var(--text-3);}

/* plan badge ribbon — used on membership.html and pricing.html */
.plan-badge{position:absolute;top:-11px;left:1.4rem;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:600;padding:3px 10px;border-radius:20px;}

.section-block{margin-bottom:0px;}
.section-block h3{font-size:14px;font-weight:600;margin-bottom:0.9rem;color:#171a20;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.inline-icon{font-size:15px;vertical-align:-2px;margin-right:5px;color:var(--text-3);}

@media(max-width:1100px){.kpi-grid,.grid-3,.pricing-grid{grid-template-columns:repeat(2,1fr);}.grid-2{grid-template-columns:1fr;}.kanban{grid-template-columns:repeat(2,1fr);}}



  /* ===== LEFT: BRAND PANEL ===== */
  .brandLoginmain{
position: relative;
  background: url('/images/login-img.png') no-repeat;
background-position: -307px 7px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 50px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background-size: cover;
  position: relative;
    .brand{
      margin-bottom: 0px!important;
      background: transparent;
      .innerLogoMain{
        img{
 width: 100px;
        }
       
      }
    }

  }


    .brand{

      .innerLogoMain{
        img{
 width: 200px;
        }
       
      }
    }

  /* drip texture */
  .drips{
    position:absolute; inset:0; pointer-events:none; opacity:0.5;
  }
  .drip{
    position:absolute; top:-10px; width:2px;
    background:linear-gradient(var(--aqua), transparent);
    animation: fall linear infinite;
    opacity:0.35;
  }
  @keyframes fall{
    0%{ transform:translateY(-40px); opacity:0;}
    10%{opacity:0.5;}
    100%{ transform:translateY(120vh); opacity:0;}
  }
 
  .brand-top{position:relative; z-index:2; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;}
  .badge{
    display:flex; align-items:center; gap:14px;
  }
  .badge-ring{
    width:52px; height:52px; border-radius:50%;
    border:2px solid var(--chrome);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    flex-shrink:0;
  }
  .badge-ring::before{
    content:'';
    position:absolute; inset:5px;
    border-radius:50%;
    border:1px dashed rgba(201,214,223,0.5);
  }
  .badge-ring svg{ width:22px; height:22px; }
  .brand-name{
   
    font-weight:700;
    font-size:22px;
    letter-spacing:0.14em;
    color: var(--foam);
  }
  .brand-name span{ color: var(--aqua); }
  .brand-sub{

    font-size:11px;
    letter-spacing:0.22em;
    color: var(--chrome);
    text-transform:uppercase;
    margin-top:2px;
  }
 
  .hero{
    position:relative; z-index:2;
    margin-top: 40px;
  }
  .eyebrow{

    font-size:12px;
    letter-spacing:0.2em;
    color: var(--accent);
    text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:''; width:26px; height:1px; background:var(--accent);
  }
  .hero h1{

    font-weight:560;
  font-size: clamp(38px, 4.6vw, 76px);
    line-height:1.04;
    letter-spacing:-0.01em;
    margin-top:18px;
    color: var(--foam);
    max-width: 12.5ch;
  }
  .hero h1 em{
    font-style:italic;
    color: var(--accent);
  }
  .hero p{

font-size: 17px;
  line-height: 1.7;
  color: rgba(245,248,247,0.62);
  max-width: 61ch;
  margin-top: 42px;
  }
 
  .stats{
    position:relative; z-index:2;
    display:flex;
    gap:40px;
    margin-top:52px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
  }
  .stat b{
    display:block;
  
    font-size:26px;
    font-weight:600;
    color: var(--foam);
  }
  .stat span{

    font-size:10.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color: var(--chrome);
  }
 
  .bay-line{
    position:relative; z-index:2;
    display:flex; align-items:center; gap:12px;
  font-size: 13px;letter-spacing:0.1em; color: var(--chrome);
    text-transform:uppercase;
  }
.bay-line a{
  color: var(--accent);
  font-weight: 700;
}
 
  /* ===== RIGHT: FORM PANEL ===== */
  .panel{
    flex:1;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    padding: 40px;
  }

 
  .cardLoginBgSec{
    position:relative; z-index:2;
    width:100%;
    max-width: 600px;
  }
 
  .card-eyebrow{
   
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color: #7C8A93;
    display:flex; align-items:center; justify-content:space-between;
  }
  .card-eyebrow .clock{ color:var(--navy); font-weight:500; }
 
  .cardLoginBgSec h2{

    font-weight:560;
    font-size:32px;
    color: var(--ink);

  }
  .cardLoginBgSec p.lead{

font-size: 13px;
  color: #6B7680;
  margin-top: 0;
  line-height: 1.6;
  margin-bottom: 23px;
  }

  .role-selector{
    display:inline-flex;
    width:auto;
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: 24px;
    padding: 4px;
    margin-bottom: 20px;
  }
  .role-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding: 9px 16px;
    border-radius: 20px;
    border: none;
    background: transparent;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .role-btn i{ font-size:15px; }
  .role-btn:hover{ color: var(--ink); }
  .role-btn.active{
    background: var(--accent);
    color: var(--on-accent);
  }
  .role-btn.active:hover{ color: var(--on-accent); }

  form{  display:flex; flex-direction:column;  }
 
  .fieldLogin{ position:relative; 
   label{
display: block;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 8px;
    font-weight: 600;
  }
  
  }

  .fieldLogin input{
    width:100%;

    font-size:17px;
    color: var(--ink);
    background:transparent;
    border:none;
    border-bottom: 1.5px solid #D7DEE0;
    padding: 8px 2px 12px;
    outline:none;
    transition: border-color 0.25s ease;
  }
  .fieldLogin input::placeholder{ color:#B7C1C6;  font-size:13px;}
  .fieldLogin input:focus{ border-color: var(--navy); }
  .fieldLogin input#pass{ padding-right: 34px; }
  .password-toggle{
    position:absolute; right:2px; top:34px;
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; padding:0;
    background:transparent; border:none; cursor:pointer;
    color:#8A9499;
  }
  .password-toggle:hover{ color: var(--navy); }
  .password-toggle svg{ width:19px; height:19px; }
  .fieldLogin input:-webkit-autofill,
  .fieldLogin input:-webkit-autofill:hover,
  .fieldLogin input:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
  }
  .fieldLogin .under{
    position:absolute; left:0; bottom:-1.5px; height:1.5px; width:0%;
    background: var(--accent);
    transition: width 0.35s ease;
  }
  .fieldLogin input:focus ~ .under{ width:100%; }

  .fieldRow{ display:flex; gap:20px; }
  .fieldRow .fieldLogin{ flex:1; min-width:0; }

  .row-between{
    display:flex; align-items:center; justify-content:space-between;
 font-size:12px;
  }
  .remember{ display:flex; align-items:center; gap:8px; color:#5B6670; }
  .remember input{ accent-color: var(--navy); width:13px; height:13px; }
  .forgot{ color: var(--navy); text-decoration:none; border-bottom:1px solid transparent; }

 
  button.submit{
    margin-top:6px;
    background: var(--accent);
    color: #000;
    border:none;
    padding:16px;
    font-weight:600;
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:10px;
    transition: background 0.25s ease, transform 0.15s ease;
    border-radius: 10px;
  }
  button.submit:hover{ background: var(--bg); color: #fff; }
  button.submit:active{ transform: scale(0.99); }
  button.submit:focus-visible{ outline:2px solid var(--aqua); outline-offset:3px; }
  button.submit svg{ width:16px; height:16px; transition: transform 0.25s ease; }
  button.submit:hover svg{ transform: translateX(3px); }
 
  .divider{
    display:flex; align-items:center; gap:14px;
    margin: 26px 0 4px;
    color:#B7C1C6;  font-size:10.5px;
    letter-spacing:0.12em; text-transform:uppercase;
  }
  .divider::before, .divider::after{ content:''; flex:1; height:1px; background:#E4E9EA; }
 
  .foot{
    margin-top:18px;

    font-size:12px;
    color:#6B7680;
    text-align:center;
  }
  .foot a{ color: var(--navy); text-decoration:none; border-bottom:1px solid var(--navy); }
 

 
  @media (max-width: 880px){
    .brandLoginmain{ display:none !important; }
    .panel{ flex:1; width:100% !important; padding: 20px !important; }
    .fieldRow{ flex-direction:column; gap:20px; }
  }
 
  @media (prefers-reduced-motion: reduce){
    .drip, .dot{ animation:none; }
  }
  .loginMainFlexAll{
    display: flex;
    height: 100dvh;
  }

/* ========== MOBILE & RESPONSIVE LAYOUT OPTIMIZATIONS ========== */
@media (max-width: 1199px) {
  .app {
    display: block !important;
  }

  .app-footer{left:0;padding:0 12px;font-size:9.5px;}

  .sidebar {
    position: fixed !important;
    top: 0;
    left: -248px;
    width: 248px !important;
    height: 100vh !important;
    z-index: 1000 !important;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.4);
    background: var(--bg-1) !important;
  }

  .sidebar.open {
    left: 0 !important;
  }

  #sidebarToggleBtn {
    display: flex !important;
  }

  /* logo lives in the header now, so the brand strip only anchors the close button */
  .brand {
    height: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    z-index: 10;
  }

  .sidebar-close-btn {
display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    flex-shrink: 0;
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
    z-index: 1000;
  }



  .topbar-brand-mobile {
    display: flex !important;
    align-items: center;
  }

  .topbar-brand-mobile img {
    width: auto;
    height: 46px;
    display: block;
  }

  .topbar {
    height: auto !important;
    min-height: 60px;
    padding: 10px 9px !important;
    flex-wrap: wrap;
    row-gap: 10px;
    gap: 8px;
  }

  #waDropdown {
    display: none !important;
  }

  #notifDropdown {
    display: block !important;
  }

  .topbar-right {
    gap: 8px !important;
    margin-left: auto;
  }

  .branch-pill {
    padding: 9px 8px !important;
    font-size: 11px !important;
    max-width: 110px;
  }

  .branch-pill span {
    display: inline-block;
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-search {
    order: 10;
    flex: 0 0 100%;
    width: 100% !important;
    max-width: none !important;
  }

  .view-header{flex-wrap:wrap;row-gap:10px;}
}

@media (max-width: 576px) {

  .kpi-grid, .grid-3, .pricing-grid {
    grid-template-columns: 1fr !important;

  }

  .kpi {
    padding: 0.85rem 0.9rem !important;
  }

  .kpi-value {
    font-size: 22px !important;
  }

  .modal-overlay {
    padding: 12px !important;
    align-items: center !important;
  }

  .modal {
    width: 100% !important;
    max-width: 100% !important;
  
  }

  .modal-row,
  .modal-row-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  .toolbar .chip {
    padding: 4px 8px !important;
    font-size: 11.5px !important;
  }

  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .table-pagination {
    flex-direction: column !important;
    gap: 10px;
    align-items: center !important;
  }
  
  .pagination-btns {

    justify-content: space-between;
  }
}



  .login-shell { min-height:100vh; padding:0px; display:grid; 
    grid-template-columns:minmax(0,1.08fr) minmax(460px,.72fr); background:#020914; }
  .login-story { position:relative; overflow:hidden; min-height:620px;
     padding:36px 34px 26px; display:flex; flex-direction:column; color:#f8fafc;
      background:url(../images/login-img-bg.png)  no-repeat; background-position: -14px 0px; background-size: cover; }
 
  .login-brand { position:relative; z-index:1; display:flex; align-items:center; 
    gap:10px; font-weight:800; font-size:20px; letter-spacing:.03em; 
  img{
    width: 200px;
  }
  
  }
  .brand-mark { width:34px; height:34px; display:grid; place-items:center; font-size:29px; color:#ff6128; font-style:italic; font-weight:900; line-height:1; transform:skew(-8deg); }
  .login-brand small { border:1px solid rgba(255,97,40,.7); color:#fa0100; border-radius:4px; padding:2px 5px; font-size:8px; letter-spacing:.08em; }
  .story-content { position:relative; z-index:1; max-width:520px; margin:auto 0; padding:0px 0 38px; }
  .story-overline { display:flex; align-items:center; gap:9px; color:#fa0100; text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.14em; }
  .story-overline::before { content:""; width:16px; height:1px; background:#fa0100; }
  .story-content h1 { margin:19px 0 19px; max-width:410px; font-size:clamp(39px,4.25vw,62px); line-height:1.08; letter-spacing:-.045em; font-weight:750; }
  .story-content h1 em { color:#fa0100; font-style:italic; }
  .story-copy { max-width:470px; color:#a9b6c8; font-size:15px; line-height:1.65; }
  .story-features { display:grid; gap:12px; margin-top:31px; }
  .story-feature { display:flex; align-items:center; gap:12px; color:#e7edf5; 
  svg{
    width: 50px;
  }
  }
  .feature-icon { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(255,104,47,.24); border-radius:8px; color:#ff6a32; background:rgba(5,18,32,.6); font-size:18px; }
  .story-feature strong { display:block; font-size:13px; font-weight:500; }
  .story-feature span { display:block; margin-top:2px; color:#8795aa; font-size:11px; }
  .story-footer { position:relative; z-index:1; color:#8996a9; font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
  .story-footer b { margin-left:8px; color:#fa0100; }
  .login-panel { padding: clamp(42px,7vh,90px) clamp(38px,5.2vw,70px);
  display: flex;
  align-items: center;
  background: linear-gradient(135deg,#fff 0%,#fbfcfe 70%,#f2f5f8) ;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  border-radius: 100px 0px 0px 100px; }
  .login-panel::after {content: "";
  position: absolute;
  right: 0;
  top: -96px;
  width: 67%;
  height: 100%;
  opacity: 0.25;
  background: url(../images/bg-right.png) no-repeat; }
  .login-card { width:100%; max-width:510px; margin:auto; position:relative; z-index:1; }
  .login-card h2 { margin:0; color:#101827; font-size:28px; line-height:1.2; letter-spacing:-.045em; font-weight:750; }
  .login-card .lead { margin:6px 0 31px; color:#7a8798; font-size:13px; }
  .role-selector { display:inline-flex; gap:5px; margin:0 0 33px; padding:0; background:none; border:0; border-radius:0; }
  .role-btn {  padding:10px 16px; border:1px solid #e0e5ec;
     border-radius:22px; background:#fff; color:#526073; 
     box-shadow:0 3px 8px rgba(22,33,51,.10); 
     font-weight:600; font-size: 15px;
    svg{
      width: 20px;
    }
    }
  .role-btn.active {font-size: 15px; border-color:#fa0100; color:#fff; background:#fa0100; box-shadow:0 5px 12px rgba(255,85,35,.30); }
  .role-btn:hover { color:#172033; }
  .role-btn.active:hover { color:#fff; }
  .login-card form { display:grid; gap:20px; margin:0; }
  .fieldLogin { position:relative; }
  .fieldLogin label { display:block; margin:0 0 8px; color:#344054; font-size:12px;
     font-weight:500; letter-spacing:.095em; text-transform:uppercase; }
  .input-wrap { position:relative; }
  .input-wrap > svg {width: 20px; position:absolute; top:50%; left:15px; transform:translateY(-50%); color:#8b98aa; font-size:17px; pointer-events:none; }
  .fieldLogin input { width:100%; height:44px; padding:0 42px; border:1px solid #dfe4ea; border-radius:7px; background:#fbfcfe; color:#172033; font:500 13px var(--font); outline:0; transition:border-color .2s,box-shadow .2s; }
  .fieldLogin input:focus {outline: none; border-color:#ff6932; box-shadow:0 0 0 3px rgba(255,99,43,.12); }
  .fieldLogin input::placeholder { color:#a6b0bd; }
  .password-toggle { position:absolute; right:11px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:0; background:transparent; color:#8793a4; display:grid; place-items:center; }
  .password-toggle svg { width:17px; height:17px; }
  .fieldLogin .under { display:none; }
  .row-between { display:flex; justify-content:space-between; align-items:center; margin-top:2px; font-size:11px; }
  .remember { display:flex; align-items:center; gap:7px; color:#7b8796; cursor:pointer; font-size: 12px; }
  .remember input { width:13px; height:13px; accent-color:#fa0100; }
  .forgot { color:#fa0100; font-weight:600; font-size: 12px; }
  button.submit { width:100%; margin:0px 0 0; min-height:47px; border:0;
     border-radius:10px; background:#fa0100;
      color:#fff; box-shadow:0 7px 12px rgba(255,83,33,.28); font-size:15px;
       font-weight:500; letter-spacing:.08em; }
  button.submit:hover { background:linear-gradient(100deg,#ff6719,#f72c1d); color:#fff; }
  button.submit:disabled { opacity:.72; cursor:wait; }
  .signup-line { margin-top:21px; text-align:center; color:#7b8796; font-size:12px; }
  .signup-line a { color:#ff5925; font-weight:600; }
  #errorAlert, #successAlert { border-radius:7px!important; }
  @media (max-width:900px) { .login-shell { grid-template-columns:1fr; padding:0; } .login-story { display:none; } .login-panel { min-height:100vh; border-radius:0; } }
  @media (max-width:480px) { .login-panel { padding:40px 22px; } .login-card h2 { font-size:26px; } .role-selector { display:flex; width:100%; } .role-btn { min-width:0; flex:1; padding:10px 8px; } }

  .fixedScrolldivCommon{
    overflow: auto;
    height: calc(100dvh - 177px - var(--shell-extra, 0px));
     @media (max-width:1199px) {
height: calc(100dvh - 215px - var(--shell-extra, 0px));
     }
  }

.signUpScrollingBottom{
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: auto;
  height: calc(100dvh - 356px - var(--shell-extra, 0px));
  .has-remove{
    padding-top: 12px!important;
  }


}

    .add-branch-btn{ background:none; border:1px dashed #ff6932; color:#ff6932; padding:9px 14px; font-size:12.5px; font-weight:500; border-radius:7px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; width:fit-content; transition:border-color .2s,color .2s; }
  .add-branch-btn:hover{ border-color:var(--bg); color:var(--bg); }
  .branch-field .input-wrap{ position:relative; }
  .remove-branch-btn{ position:absolute; right:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; border:0; background:transparent; color:#8793a4; display:grid; place-items:center; cursor:pointer; }
  .remove-branch-btn:hover{ color:#E2645A; }
  .branch-field.has-remove input{ padding-right:42px; }
/* Photo upload buttons from jobcards */
.jc-photo-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.photo-ph{flex:0 0 64px;height:56px;border-radius:8px;background:#f1f2f4;border:1px solid #eef1f5;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:13px;cursor:pointer;}
.jc-add-photo{flex:0 0 64px;height:56px;border-radius:10px;border:1px dashed #d7dbe1;background:none;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:17px;cursor:pointer;}
.jc-add-photo:hover{background:#f6f7f9;color:#475569;}

/* ========== COLOURFUL ICONS ==========
   Icons are CSS masks that paint in currentColor, so each icon gets its own colour here.
   Utility glyphs (x, plus, check, chevrons, dots, loader, search) keep the surrounding text colour. */
.ti-layout-dashboard,.ti-chart-bar,.ti-chart-line{color:#8b5cf6;}
.ti-users,.ti-user-plus,.ti-car,.ti-edit{color:#3b82f6;}
.ti-id-badge-2,.ti-atom-2,.ti-file{color:#6366f1;}
.ti-clock-hour-4,.ti-hourglass,.ti-star,.ti-star-filled,.ti-crown{color:#f59e0b;}
.ti-bulb,.ti-bell{color:#facc15;}
.ti-map-pin,.ti-trash,.ti-mail,.ti-report-money,.ti-target-arrow,.ti-logout{color:#ef4444;}
.ti-calendar-event,.ti-calendar-stats{color:#10b981;}
.ti-circle-check,.ti-play,.ti-cash{color:#22c55e;}
.ti-credit-card{color:#eab308;}
.ti-droplet,.ti-droplet-filled,.ti-wash{color:#06b6d4;}

.ti-clipboard-check,.ti-checklist,.ti-tags,.ti-gift{color:#ec4899;}
.ti-building-store,.ti-branch{color:#14b8a6;}
.ti-package,.ti-engine,.ti-alert-circle{color:#f97316;}
.ti-sparkles,.ti-brush{color:#a855f7;}
.ti-brand-whatsapp{color:#25D366;}
.ti-settings,.ti-printer{color:#94a3b8;}
/* Keep icons white on solid-colour buttons */
.btn-accent .ti,.btn-save .ti,.branch-edit-btn .ti,.btn-services-primary .ti,.btn-staff-primary .ti,.role-btn.active .ti{color:inherit;}
.btn .ti-download{color:inherit;}
/* Search icons: icon-font version + the inline SVG magnifier (header, customers, queue) */
i.ti.ti-search{color:#0ea5e9;}
svg path[d^="M14 14L11.1 11.1"]{stroke:#0ea5e9;}



.icon-btn1main{width: 37px;
  height: 37px;
  border-radius: 10px;

border: 1px solid #33333317;
  background: #ffffff1f;
  display:flex;align-items:center;justify-content:center;color:#000;
  position:relative;cursor:pointer;
  i{
    font-size: 19px;
  }
&:hover{
  background: var(--surface-hover);
  color: var(--text-1);
}
}
/* Topbar WhatsApp + notifications: filled with their own brand colours, white icon */
#waToggle,#notifToggle{color:#fff;border-color:transparent;transition:background-color .2s ease,transform .15s ease;}
#waToggle{background:#25D366;}
#waToggle:hover{background:#1ebe5b;color:#fff;}
#waToggle .wa-logo path{fill:#fff;}
#notifToggle{background:#F59E0B;}
#notifToggle:hover{background:#d98706;color:#fff;}
#waToggle:active,#notifToggle:active{transform:scale(.95);}
#notifToggle .ti-bell{color:#fff;}
#waToggle .dot,#notifToggle .dot{background:#ef4444 !important;box-shadow:0 0 0 2px #fff;}
/* ---- KPI card bottom wave (tinted per card via --kpi-wave) ---- */
.dash-stat-card,.stf-stat-card,.exp-kpi,.kpi,.m-stat-card,.pay-kpi,.leads-kpi-card{position:relative;overflow:hidden;isolation:isolate;}
.dash-stat-card::after,.stf-stat-card::after,.exp-kpi::after,.kpi::after,.m-stat-card::after,.pay-kpi::after,.leads-kpi-card::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:min(30%,38px);z-index:-1;pointer-events:none;
  background:var(--kpi-wave,#6366F1);opacity:.1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill-opacity='.55' d='M0 26C150 6 300 44 450 24S750 4 900 24s200 18 300-2V60H0Z'/%3E%3Cpath d='M0 40c200-16 350 14 600-2s400-16 600 2V60H0Z'/%3E%3C/svg%3E") no-repeat bottom/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill-opacity='.55' d='M0 26C150 6 300 44 450 24S750 4 900 24s200 18 300-2V60H0Z'/%3E%3Cpath d='M0 40c200-16 350 14 600-2s400-16 600 2V60H0Z'/%3E%3C/svg%3E") no-repeat bottom/100% 100%;
}
.dash-stat-card:has(.dash-badge-purple){--kpi-wave:#6D28D9;}
.dash-stat-card:has(.dash-badge-amber),.stf-stat-card:has(.stf-badge-amber){--kpi-wave:#C2410C;}
.dash-stat-card:has(.dash-badge-green),.stf-stat-card:has(.stf-badge-green){--kpi-wave:#15803D;}
.dash-stat-card:has(.dash-badge-blue),.stf-stat-card:has(.stf-badge-blue){--kpi-wave:#1D4ED8;}
.dash-stat-card:has(.dash-badge-teal){--kpi-wave:#0F766E;}
.dash-stat-card:has(.dash-badge-pink){--kpi-wave:#BE185D;}
.dash-stat-card:has(.dash-badge-red),.stf-stat-card:has(.stf-badge-red){--kpi-wave:#B91C1C;}
.exp-kpi:nth-child(1){--kpi-wave:#2563EB;}
.exp-kpi:nth-child(2){--kpi-wave:#059669;}
.exp-kpi:nth-child(3){--kpi-wave:#7C3AED;}
.exp-kpi:nth-child(4){--kpi-wave:#C2410C;}
.kpi--green{--kpi-wave:#25b876;}
.kpi--red{--kpi-wave:#e36363;}
.kpi--blue{--kpi-wave:#3798ed;}
.kpi--purple{--kpi-wave:#7658ff;}
.m-stat-card{--kpi-wave:#fff;}
.m-stat-card.accented{--kpi-wave:var(--accent);}
.m-stat-card::after{opacity:.08;}

/* ---- Search icon for bare toolbar search inputs (Payments, Inventory, Vehicles, Managers) ---- */
.toolbar > input[placeholder^="Search" i],#managers .toolbar > input[placeholder^="Search" i]{
  padding-left:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:11px center;background-size:15px 15px;
}

/* "#" serial-number column shared by list tables */
th.col-sl,td.col-sl{width:48px;text-align:center!important;white-space:nowrap;}
td.col-sl{color:#667085!important;font-weight:600;}

/* Header search bar */
.topbar-search{height:40px;padding:0 14px;gap:10px;
  border:1px solid #e4e7ec;background:#fff;border-radius:10px;}
.topbar-search:focus-within{border-color:#d0d5dd;box-shadow:0 0 0 3px rgba(14,165,233,.12);}
.topbar-search > svg{flex-shrink:0;}
.topbar-search > svg path{stroke:#0ea5e9;}
.topbar-search input{font-size:14px;color:#101828;}
.topbar-search input::placeholder{color:#667085;}

/* Header brand: Forward Prime Solutions seal + name */
.topbar-brand-mobile{gap:8px;text-decoration:none;}
.topbar-brand-text{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap;}
.topbar-brand-name{font-size:15px;font-weight:800;color:#0f1115;letter-spacing:-0.2px;}
.topbar-brand-sub{font-size:11px;font-weight:600;color:#667085;margin-top:2px;}
@media (max-width:420px){
  .topbar-brand-mobile img{height:40px !important;}
  .topbar-brand-name{font-size:13px;}
  .topbar-brand-sub{font-size:10px;}
}
@media (max-width:359px){ .topbar-brand-text{display:none;} }
/* the desktop header is 16px taller than the old 60px one: page heights subtract it */
:root{--shell-extra:0px;}
@media (min-width:1200px){:root{--shell-extra:16px;}}

/* KPI cards: no wave decoration; bottom padding no longer reserves room for it */
.dash-stat-card::after,.stf-stat-card::after,.exp-kpi::after,.kpi::after,.m-stat-card::after,.pay-kpi::after,.leads-kpi-card::after{content:none !important;display:none !important;}
.dash-stat-card,.stf-stat-card,.exp-kpi,.pay-kpi,.leads-kpi-card,#reports .kpi{padding-bottom:16px !important;}