:root{
  --wbc-primary:#1581b7;
  --wbc-ink:#061b2b;
  --wbc-bg:#0b1220;
  --wbc-panel:#0f1a2f;
  --wbc-card:#0f203c;
  --wbc-border:rgba(255,255,255,.10);
  --wbc-text:rgba(255,255,255,.92);
  --wbc-muted:rgba(255,255,255,.65);
  --wbc-danger:#ef4444;
  --wbc-warn:#f59e0b;
  --wbc-lock-border: rgba(245,158,11,.75);
  --wbc-lock-bg: rgba(245,158,11,.08);
  --wbc-ok:#22c55e;

  --wbc-radius:14px;
  --wbc-radius-sm:10px;
  --wbc-shadow: 0 10px 30px rgba(0,0,0,.35);
  --wbc-font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* Calendar item tokens (used by Works Calendar) */
  --wbc-cal-job-border: rgba(255,255,255,.92);
  --wbc-cal-job-bg: rgba(255,255,255,.04);
  --wbc-cal-booking-bg: rgba(255,255,255,.03);
  /* Today highlight tokens */
  --wbc-cal-today-border: rgba(21,129,183,.95);
  --wbc-cal-today-bg: rgba(21,129,183,.10);

}

/* Light mode overrides (default remains dark) */
html[data-wbc-theme="light"]{
  --wbc-bg:#f2f5fb;
  --wbc-panel:#ffffff;
  --wbc-card:#ffffff;
  --wbc-border:rgba(2,6,23,.12);
  --wbc-text:rgba(2,6,23,.92);
  --wbc-muted:rgba(2,6,23,.65);
  --wbc-shadow: 0 10px 30px rgba(2,6,23,.12);
  --wbc-lock-border: rgba(245,158,11,.55);
  --wbc-lock-bg: rgba(245,158,11,.10);

  /* Calendar item tokens (light) */
  --wbc-cal-job-border: rgba(21,129,183,.55);
  --wbc-cal-job-bg: rgba(21,129,183,.12);
  --wbc-cal-booking-bg: rgba(2,6,23,.03);

  /* Today highlight tokens (light) */
  --wbc-cal-today-border: rgba(21,129,183,.85);
  --wbc-cal-today-bg: rgba(21,129,183,.08);

}

/* Light mode: sidebar becomes light to match the rest of the UI */
html[data-wbc-theme="light"] .wbc-sidebar{
  background:#ffffff;
  border-right:1px solid rgba(2,6,23,.10);
  /* override local tokens used by sidebar links/buttons */
  --wbc-text:rgba(2,6,23,.92);
  --wbc-muted:rgba(2,6,23,.65);
  --wbc-border:rgba(2,6,23,.12);
}

html[data-wbc-theme="light"] .wbc-sidebar .wbc-iconbtn{
  background:rgba(2,6,23,.04);
  border-color:rgba(2,6,23,.12);
}

html[data-wbc-theme="light"] .wbc-sidebar .wbc-user__avatar{
  background:rgba(2,6,23,.06);
  border-color:rgba(2,6,23,.12);
}

html[data-wbc-theme="light"] .wbc-sidebar .wbc-nav__link:hover,
html[data-wbc-theme="light"] .wbc-sidebar .wbc-nav__item.is-active .wbc-nav__link{
  background:rgba(21,129,183,.10);
  border-color:rgba(21,129,183,.22);
}

html[data-wbc-theme="light"] body.wbc-crm-app{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(21,129,183,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(34,197,94,.10), transparent 55%),
    var(--wbc-bg);
}

/* Light mode component tweaks (keeps contrast consistent where hard-coded rgba() exists) */
html[data-wbc-theme="light"] .wbc-card{
  background:var(--wbc-card);
}
html[data-wbc-theme="light"] .wbc-input,
html[data-wbc-theme="light"] .wbc-select,
html[data-wbc-theme="light"] textarea{
  background:rgba(2,6,23,.04);
  border-color:rgba(2,6,23,.12);
  color:var(--wbc-text);
}
html[data-wbc-theme="light"] .wbc-chip{
  background:rgba(2,6,23,.05);
  border-color:rgba(2,6,23,.12);
}

/* Light mode: make the top header crisp white (not grey) */
html[data-wbc-theme="light"] .wbc-topbar{
  background: rgba(255,255,255,.92);
  border-bottom:1px solid rgba(2,6,23,.10);
}

html[data-wbc-theme="light"] .wbc-topbar .wbc-input{
  background: rgba(2,6,23,.04);
  border-color: rgba(2,6,23,.12);
}
html[data-wbc-theme="light"] .wbc-topbar .wbc-input::placeholder{
  color: rgba(2,6,23,.50);
}

*{box-sizing:border-box}
body.wbc-crm-app{
  margin:0;
  font-family:var(--wbc-font);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(21,129,183,.35), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(34,197,94,.20), transparent 55%),
              var(--wbc-bg);
  color:var(--wbc-text);
}

a{color:inherit}
.wbc-container{max-width:1600px;margin:0 auto;padding:22px}

/* Technician (iPad) layout */
body.wbc-role-tech .wbc-sidebar{display:none}

/* Tech shell should feel like an iPad app: full-width content, compact header */
body.wbc-role-tech .wbc-app__main{width:100%;padding:18px 18px 30px}

/* Technician topbar: match standard header spacing, but keep everything inline */
body.wbc-role-tech .wbc-topbar,
.wbc-app--tech .wbc-topbar{
  flex-wrap:nowrap;
  /* Exact match to the primary topbar spacing */
  padding:14px 22px !important;
}
body.wbc-role-tech .wbc-topbar__inner,
.wbc-app--tech .wbc-topbar__inner{
  max-width:1600px;
  margin:0 auto;
  gap:14px;
}
body.wbc-role-tech .wbc-topbar__right,
.wbc-app--tech .wbc-topbar__right{gap:10px;justify-content:flex-end;align-items:center;flex:1;min-width:0}
/* Prevent the search from overflowing off-screen on iPad */
body.wbc-role-tech .wbc-topbar__search,
.wbc-app--tech .wbc-topbar__search{flex:1 1 auto;max-width:none;min-width:0;width:auto}
body.wbc-role-tech .wbc-topbar__search .wbc-input,
.wbc-app--tech .wbc-topbar__search .wbc-input{flex:1 1 auto;min-width:0}

/* Technician dropdown menu (topbar) */
.wbc-actions{position:relative}
.wbc-actions summary{list-style:none}
.wbc-actions summary::-webkit-details-marker{display:none}
.wbc-actions__menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:240px;
  background:linear-gradient(180deg, rgba(15,32,60,.96), rgba(15,32,60,.86));
  border:1px solid var(--wbc-border);
  border-radius:14px;
  box-shadow:var(--wbc-shadow);
  padding:10px;
  display:none;
  z-index:60;
}
.wbc-actions[open] .wbc-actions__menu{display:block}
.wbc-actions__link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--wbc-text);
  border:1px solid transparent;
}
.wbc-actions__link:hover{background:rgba(21,129,183,.12);border-color:rgba(255,255,255,.10)}
.wbc-actions__divider{height:1px;background:rgba(255,255,255,.10);margin:8px 2px}
.wbc-app{display:flex;min-height:100vh}
.wbc-app__main{flex:1;min-width:0}
.wbc-app__content{padding:10px 0 52px}

.wbc-sidebar{
  width:280px;
  background: linear-gradient(180deg, rgba(6,27,43,.96), rgba(6,27,43,.90));
  border-right:1px solid var(--wbc-border);
  padding:16px 14px;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.wbc-sidebar.is-collapsed{width:76px}

/* Collapsed sidebar: hide logo and center toggle button */
.wbc-sidebar.is-collapsed .wbc-brand{display:none}
.wbc-sidebar.is-collapsed .wbc-sidebar__top{justify-content:center}

.wbc-sidebar.is-collapsed .wbc-brand__text,
.wbc-sidebar.is-collapsed .wbc-user__meta,
.wbc-sidebar.is-collapsed .wbc-nav__link{display:none}

.wbc-sidebar__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wbc-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.wbc-brand__mark{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--wbc-primary), rgba(255,255,255,.18)); box-shadow: var(--wbc-shadow)}
.wbc-brand__text{font-weight:700;letter-spacing:.2px}
.wbc-brand__logo{height:34px;max-width:170px;width:auto;display:block;object-fit:contain}
.wbc-brand__logo--light{display:none}
html[data-wbc-theme="light"] .wbc-brand__logo--dark{display:none}
html[data-wbc-theme="light"] .wbc-brand__logo--light{display:block}

/* Login screen logo swapping (login page may not have data-wbc-theme set) */
.wbc-auth__logo-img--light{display:none}
html[data-wbc-theme="light"] .wbc-auth__logo-img--dark{display:none}
html[data-wbc-theme="light"] .wbc-auth__logo-img--light{display:inline-block}
@media (prefers-color-scheme: light){
  .wbc-auth__logo-img--dark{display:none}
  .wbc-auth__logo-img--light{display:inline-block}
}
.wbc-sidebar.is-collapsed .wbc-brand__logo{height:32px;max-width:44px}

.wbc-iconbtn{
  border:1px solid var(--wbc-border);
  background:rgba(255,255,255,.06);
  color:var(--wbc-text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}

.wbc-nav{padding-top:6px}
.wbc-nav__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wbc-nav__item{}
.wbc-nav__link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid transparent;
  color:var(--wbc-text);
}
.wbc-nav__item.is-active .wbc-nav__link,
.wbc-nav__link:hover{
  background:rgba(21,129,183,.12);
  border-color:rgba(21,129,183,.25);
}

.wbc-sidebar__bottom{margin-top:auto;padding-top:12px;border-top:1px solid var(--wbc-border);display:flex;flex-direction:column;gap:10px}
.wbc-user{display:flex;gap:10px;align-items:center}
.wbc-user__avatar{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.10);border:1px solid var(--wbc-border);font-weight:800}
.wbc-user__name{font-weight:700}
.wbc-user__role{color:var(--wbc-muted);font-size:12px}
.wbc-link{color:var(--wbc-muted);text-decoration:none}
.wbc-link:hover{color:var(--wbc-text)}

.wbc-topbar{
  padding:14px 22px;
  border-bottom:1px solid var(--wbc-border);
  background: rgba(15,26,47,.55);
  backdrop-filter: blur(8px);
  position:sticky;
  top:0;
  z-index:20;
  display:block;
}

/* Topbar layout (supports inner wrappers used by the theme template) */
.wbc-topbar__inner{
  max-width:1600px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.wbc-topbar__left{display:flex;align-items:center;gap:12px;min-width:0}
.wbc-topbar__right{display:flex;gap:10px;align-items:center;min-width:0}
.wbc-topbar__nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wbc-topbar__search{display:flex;gap:8px;align-items:center;width:min(620px, 100%)}
.wbc-topbar__search .wbc-input{min-width:240px}
.wbc-topbar__meta{display:flex;align-items:center}
.wbc-search{display:flex;gap:8px;align-items:center;width:min(620px, 100%)}
.wbc-input{
  width:100%;
  border-radius:14px;
  border:1px solid var(--wbc-border);
  background:rgba(255,255,255,.06);
  color:var(--wbc-text);
  padding:10px 12px;
  outline:none;
}
.wbc-input::placeholder{color:rgba(255,255,255,.45)}


/* Topbar logo */
.wbc-topbar__logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.wbc-topbar__logo-img{height:28px;width:auto;display:block}
.wbc-topbar__logo-text{font-style:italic;font-weight:800;letter-spacing:1px;color:#fff}

/* Desktop “Live” pill should be green-outlined */
.wbc-chip.wbc-chip--live{border-color:rgba(34,197,94,.70)}

/* Technician week-list dashboard (used by [wbc_tech_dashboard]) */
.wbc-tech-dashboard{width:100%;max-width:1600px;margin:0 auto;padding:18px 18px 0}
.wbc-tech-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;margin:6px 0 14px}
.wbc-tech-head h2{margin:0;font-size:22px;letter-spacing:.2px}
.wbc-tech-week{color:var(--wbc-muted);font-size:13px}
.wbc-tech-actions{display:none}
.wbc-tech-weeklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.wbc-tech-day{background:linear-gradient(180deg, rgba(15,32,60,.88), rgba(15,32,60,.70));border:1px solid var(--wbc-border);border-radius:var(--wbc-radius);box-shadow:var(--wbc-shadow);overflow:hidden}
.wbc-tech-dayhead{padding:18px 20px;border-bottom:1px solid var(--wbc-border);font-weight:800}
.wbc-tech-empty{padding:18px 20px;color:var(--wbc-muted)}
.wbc-tech-item{display:flex;gap:12px;padding:18px 20px;border-top:1px solid rgba(255,255,255,.06);text-decoration:none;align-items:flex-start}
.wbc-tech-item:hover{background:rgba(21,129,183,.10)}
.wbc-tech-time{width:54px;min-width:54px;font-weight:800;letter-spacing:.2px}
.wbc-tech-main{min-width:0;flex:1}
.wbc-tech-line1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wbc-tech-badge{font-size:11px;font-weight:800;letter-spacing:.6px;padding:4px 8px;border-radius:999px;border:1px solid var(--wbc-border);background:rgba(255,255,255,.06)}
.wbc-tech-badge.is-job{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.12)}
.wbc-tech-badge.is-booking{border-color:rgba(21,129,183,.35);background:rgba(21,129,183,.12)}
.wbc-tech-vrm{font-weight:900}
.wbc-tech-mm{color:var(--wbc-muted);font-size:12px}
.wbc-tech-line2{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.wbc-tech-customer{font-weight:700}
.wbc-tech-status{color:var(--wbc-muted);font-size:12px}

@media (max-width: 980px){
  .wbc-topbar__inner{padding:0}
  /* Non-tech only: allow header to stack when space is limited */
  body:not(.wbc-role-tech) .wbc-topbar__left{flex:1 1 100%}
  body:not(.wbc-role-tech) .wbc-topbar__search{flex:1 1 100%}
  body:not(.wbc-role-tech) .wbc-topbar__search .wbc-input{min-width:0}

  /* Technician: keep everything on a single row; shrink search instead of wrapping */
  body.wbc-role-tech .wbc-topbar__inner,
  .wbc-app--tech .wbc-topbar__inner{flex-wrap:nowrap}
  body.wbc-role-tech .wbc-topbar__left,
  .wbc-app--tech .wbc-topbar__left{flex:0 0 auto}
  body.wbc-role-tech .wbc-topbar__right,
  .wbc-app--tech .wbc-topbar__right{flex:1 1 auto;min-width:0}
  body.wbc-role-tech .wbc-topbar__search,
  .wbc-app--tech .wbc-topbar__search{flex:1 1 auto;min-width:0;max-width:560px}
  body.wbc-role-tech .wbc-topbar__search .wbc-input,
  .wbc-app--tech .wbc-topbar__search .wbc-input{width:100%;min-width:0}
  body.wbc-role-tech .wbc-topbar__menu,
  .wbc-app--tech .wbc-topbar__menu{flex:0 0 auto}
  .wbc-tech-dashboard{padding:16px}
  .wbc-tech-weeklist{grid-template-columns:1fr}
}

.wbc-chip{
  border:1px solid var(--wbc-border);
  background:rgba(255,255,255,.06);
  padding:8px 10px;
  border-radius:999px;
  color:var(--wbc-muted);
  font-size:12px;
  white-space:nowrap;
}

.wbc-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:18px 0 16px}
.wbc-h1{margin:0;font-size:28px;letter-spacing:.2px}
.wbc-h2{margin:0;font-size:18px}
.wbc-muted{margin:6px 0 0;color:var(--wbc-muted)}

.wbc-grid{display:grid;grid-template-columns:1fr;gap:14px}

/* Search bars (list views) */
.wbc-searchbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wbc-searchbar .wbc-input{flex:1;min-width:260px}

/* Small stat tiles (e.g., customer profile) */
.wbc-mini-stat__value{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:15px;
}

/* Tables */
.wbc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.wbc-table thead th{
  text-align:left;
  padding:10px 12px;
  font-size:12px;
  font-weight:800;
  color:var(--wbc-text);
  opacity:.92;
  border-bottom:1px solid var(--wbc-border);
}

.wbc-table tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
html[data-wbc-theme="light"] .wbc-table tbody td{ border-bottom:1px solid rgba(0,0,0,.08); }
.wbc-table tbody tr:last-child td{border-bottom:0}
.wbc-table th:last-child,
.wbc-table td:last-child{ text-align:right; }

@media (max-width: 980px){
  .wbc-table{display:block;overflow:auto;max-width:100%}
  .wbc-table thead, .wbc-table tbody, .wbc-table tr{width:100%}
}

.wbc-card{
  background:linear-gradient(180deg, rgba(15,32,60,.88), rgba(15,32,60,.70));
  border:1px solid var(--wbc-border);
  border-radius:var(--wbc-radius);
  box-shadow: var(--wbc-shadow);
  overflow:hidden;
}
.wbc-card__hd{padding:14px 16px;border-bottom:1px solid var(--wbc-border)}
.wbc-card__bd{padding:14px 16px}

.wbc-btn{
  border-radius:12px;
  border:1px solid var(--wbc-border);
  background:rgba(255,255,255,.06);
  color:var(--wbc-text);
  padding:10px 12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
}
.wbc-btn--primary{
  background:var(--wbc-primary);
  background-image:none;
  border-color:rgba(21,129,183,.45);
  color:#fff;
}
.wbc-btn--ghost{
  background:transparent;
}
.wbc-btn:hover{filter:brightness(1.05)}

@media (max-width: 980px){
  .wbc-sidebar{position:fixed;left:0;top:0;transform:translateX(-105%);transition:transform .2s ease;z-index:50}
  .wbc-sidebar.is-open{transform:translateX(0)}
  .wbc-app{display:block}
  .wbc-topbar{padding:12px 14px}
  .wbc-container{padding:16px}
}

.wbc-nav__label{display:inline-block}


.wbc-sidebar.is-collapsed .wbc-nav__label{display:none}



.wbc-nav__link i{
  width:20px;
  min-width:20px;
  font-size:16px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.92;
}
.wbc-nav__item.is-active .wbc-nav__link i,
.wbc-nav__link:hover i{ opacity:1; }

/* === Controls consistency fixes (Phase 2.1 polish) === */
:root{ --wbc-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Ensure all buttons inherit the CRM font */
.wbc-btn, button.wbc-btn{ font-family: var(--wbc-font); }

/* Dark selects + readable dropdown options (fix white dropdown background) */
select.wbc-input{ 
  background-color: rgba(255,255,255,.04);
  color: var(--wbc-text);
}
select.wbc-input option{
  background-color: #0f203c;
  color: #ffffff;
}

/* Some browsers render the dropdown list using optgroup backgrounds */
select.wbc-input optgroup{
  background-color: #0f203c;
  color: #ffffff;
}



/* === UI housekeeping: consistent button sizing & action rows === */
.wbc-btn{
  font-size:14px;
  line-height:1;
  min-height:40px;
  padding:10px 14px;
}
.wbc-btn--sm{
  min-height:34px;
  padding:8px 12px;
  font-size:13px;
}
.wbc-actions,
.wbc-job-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}
.wbc-actions .wbc-btn,
.wbc-job-actions .wbc-btn{
  white-space:nowrap;
}

/* ==============================
   Reports layout fixes
   ============================== */

.wbc-reports .wbc-report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: flex-end;
}

.wbc-reports .wbc-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 14px;
}

.wbc-reports .wbc-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.wbc-reports .wbc-charts .wbc-card {
  min-width: 0;
}

.wbc-reports .wbc-charts canvas,
.wbc-reports .wbc-charts svg {
  display: block;
  width: 100%;
}

@media (max-width: 1200px) {
  .wbc-reports .wbc-kpis { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
  .wbc-reports .wbc-charts { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}

@media (max-width: 900px) {
  .wbc-reports .wbc-kpis { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .wbc-reports .wbc-charts { grid-template-columns: 1fr; }
  .wbc-reports .wbc-report-filters { justify-content: stretch; }
}


/* Works Calendar (Calendar page + dashboard widget)
   Markup classes added by plugin: .wbc-cal-day, .wbc-cal-item */
.wbc-cal-day{
  border:1px solid var(--wbc-border);
  background:rgba(255,255,255,.02);
}
html[data-wbc-theme="light"] .wbc-cal-day{
  background:rgba(2,6,23,.02);
}

.wbc-cal-day--today{
  border:2px solid var(--wbc-cal-today-border);
  background:var(--wbc-cal-today-bg);
}

/* Intentionally do not alter .wbc-cal-item styling for today.
   Bookings vs Jobs have distinct visual treatments and should remain consistent. */

/* =============================
   Notifications (desktop header)
   ============================= */
.wbc-notif-btn{ position: relative; }
.wbc-notif-dot{
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--wbc-primary, #1581b7);
  box-shadow: 0 0 0 2px var(--wbc-card, #0f1b2d);
}

.wbc-notif[hidden]{ display:none !important; }
.wbc-notif{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.wbc-notif__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.wbc-notif__panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: var(--wbc-card, #0f1b2d);
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -18px 0 40px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
}

.wbc-notif__hd{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.wbc-notif__title{ font-weight: 700; }
.wbc-notif__actions{ display:flex; align-items:center; gap: 8px; }
.wbc-notif__bd{ padding: 10px 10px; overflow:auto; }

.wbc-notif__ft{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display:flex;
  justify-content: flex-end;
}
html[data-wbc-theme="light"] .wbc-notif__ft{ border-top-color: rgba(0,0,0,0.10); }

.wbc-notif__list{ display:flex; flex-direction: column; gap: 8px; }
.wbc-notif__item{
  position: relative;
  padding: 10px 38px 10px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  display:block;
}

.wbc-notif__del{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: inherit;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity: 0.85;
}
html[data-wbc-theme="light"] .wbc-notif__del{ border-color: rgba(0,0,0,0.12); }
.wbc-notif__del:hover{ opacity: 1; filter: brightness(1.05); }
html[data-wbc-theme="light"] .wbc-notif__item{ border-color: rgba(0,0,0,0.1); }
.wbc-notif__item:hover{ filter: brightness(1.05); }
.wbc-notif__meta{ display:flex; justify-content: space-between; gap: 10px; font-size: 12px; opacity: 0.8; margin-top: 6px; }
.wbc-notif__unread{ border-color: var(--wbc-primary, #1581b7); }

html[data-wbc-theme="light"] .wbc-notif__backdrop{ background: rgba(0,0,0,0.25); }
html[data-wbc-theme="light"] .wbc-notif__panel{ border-left-color: rgba(0,0,0,0.10); }

/* Hide notifications on small screens (we can add mobile later) */
@media (max-width: 980px){
  .wbc-notif-btn{ display:none !important; }
}


/* Job locked sections (Completed/Invoiced) */
.wbc-joblock-banner{
  border:2px solid var(--wbc-lock-border) !important;
  background: var(--wbc-lock-bg) !important;
  box-shadow: 0 0 0 1px var(--wbc-lock-border);
}
.wbc-joblock-msg{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:2px solid var(--wbc-lock-border);
  background: var(--wbc-lock-bg);
  display:block;
}


/* Clickable table rows */
:root { --wbc-row-hover-bg: rgba(255,255,255,.04); }
html[data-wbc-theme="light"] { --wbc-row-hover-bg: rgba(0,0,0,.03); }

tr.wbc-row--clickable { transition: background 120ms ease; }
tr.wbc-row--clickable:hover { background: var(--wbc-row-hover-bg); }
tr.wbc-row--clickable td { position: relative; }



/* WBC: Hover + clickable rows for list tables */
table.wbc-table tbody tr,
table.wbc-crm-table tbody tr,
.wbc-table tbody tr {
  cursor: pointer;
  transition: background-color 120ms ease;
}
table.wbc-table tbody tr:hover,
table.wbc-crm-table tbody tr:hover,
.wbc-table tbody tr:hover {
  background-color: rgba(21, 129, 183, 0.06);
}
html[data-wbc-theme="dark"] table.wbc-table tbody tr:hover,
html[data-wbc-theme="dark"] table.wbc-crm-table tbody tr:hover,
html[data-wbc-theme="dark"] .wbc-table tbody tr:hover {
  background-color: rgba(79, 163, 209, 0.12);
}