/* ============================================================
   Villa Plumbing Field Portal — Service Center expansion CSS
   Build marker: Service Center workspace v1 (May 4)
   ============================================================ */

/* ---------- WORKSPACE SHELL ---------- */
.svcw-hero{
  background:linear-gradient(135deg,#141310,#D95A00);
  color:#fff;border-radius:18px;padding:1.4rem 1.6rem;
  display:flex;gap:1.2rem;align-items:flex-start;
  margin-bottom:1rem;box-shadow:0 12px 30px rgba(20,19,16,.18);
}
.svcw-hero-ic{font-size:34px;line-height:1;flex-shrink:0;background:rgba(255,255,255,.08);width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.svcw-hero-tx h2{font-family:'Barlow Condensed',sans-serif;font-size:26px;margin:0 0 4px;letter-spacing:.3px}
.svcw-hero-tx p{margin:0 0 .55rem;color:rgba(255,255,255,.78);font-size:13px;line-height:1.55}
.svcw-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:.4rem}
.svcw-hero-meta span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:6px 10px;border-radius:10px;font-size:11px;color:rgba(255,255,255,.85)}
.svcw-hero-meta b{color:#fff;font-weight:700;letter-spacing:.3px}

.svcw-subnav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem;padding:6px;border:1px solid var(--bd-lt);background:#fff;border-radius:14px;box-shadow:0 2px 8px rgba(20,19,16,.04)}
.svcw-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;border:0;background:transparent;cursor:pointer;color:var(--tx-md);font-family:'Barlow',sans-serif;font-size:12.5px;font-weight:650;white-space:nowrap;transition:all .15s}
.svcw-tab:hover{background:#eef9f7;color:var(--teal-dk)}
.svcw-tab.on{background:var(--teal);color:#fff;box-shadow:0 4px 10px rgba(255,107,0,.28)}
.svcw-tab-ic{font-size:14px;line-height:1}

.svcw-body{display:flex;flex-direction:column;gap:1rem}
.svcw-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.svcw-stat{background:#fff;border:1px solid var(--bd-lt);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px}
.svcw-stat-ic{font-size:20px}
.svcw-stat-v{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:700;color:var(--navy);line-height:1}
.svcw-stat-l{font-size:11px;color:var(--tx-lt);text-transform:uppercase;letter-spacing:.4px;font-weight:600}

.svcw-grid{display:grid;gap:1rem;grid-template-columns:1fr}
.svcw-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.svcw-card{background:#fff;border:1px solid var(--bd-lt);border-radius:14px;overflow:hidden}
.svcw-card-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:.85rem 1rem;border-bottom:1px solid var(--bd-lt);background:#fbfdfd}
.svcw-card-hdr > span:first-child{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--navy);letter-spacing:.3px}
.svcw-card-body{padding:.95rem 1rem}
.svcw-hint{font-size:12px;color:var(--tx-lt);font-weight:500}
.svcw-foot-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:.85rem}

.svcw-row{display:flex;align-items:center;gap:10px;padding:.55rem 0;border-bottom:1px dashed var(--bd-lt)}
.svcw-row:last-child{border-bottom:none}
.svcw-row-tag{flex-shrink:0;padding:4px 10px;border-radius:8px;font-size:11px;font-weight:800;font-family:'Barlow Condensed',sans-serif;letter-spacing:.4px;background:#eef4f3;color:var(--navy)}
.svcw-row-tag.teal{background:#dcf5ef;color:#0a5c48}
.svcw-row-tag.amber{background:#fff4dc;color:#8a5c00}
.svcw-row-tag.coral{background:#ffe8e0;color:#8a2a13}
.svcw-row-tx{flex:1;min-width:0}
.svcw-row-nm{font-weight:700;color:var(--navy);font-size:14px}
.svcw-row-sub{font-size:12.5px;color:var(--tx-md);margin-top:1px}
.svcw-row-meta{font-size:11.5px;color:var(--tx-lt);margin-top:1px}
.svcw-row-pill{flex-shrink:0;font-size:11px;font-weight:700;background:#eef9f7;color:var(--teal-dk);padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.3px}

.svcw-pill{display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#eef4f3;color:var(--navy);text-transform:uppercase;letter-spacing:.3px}
.svcw-pill.teal{background:#dcf5ef;color:#0a5c48}
.svcw-pill.amber{background:#fff4dc;color:#8a5c00}
.svcw-pill.coral{background:#ffe8e0;color:#8a2a13}

.svcw-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:9px;border:1.5px solid var(--bd);background:#fff;color:var(--tx);font-size:12.5px;font-family:'Barlow',sans-serif;font-weight:650;cursor:pointer;transition:all .12s}
.svcw-btn:hover{border-color:var(--teal);color:var(--teal)}
.svcw-btn.primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.svcw-btn.primary:hover{background:var(--teal-dk);border-color:var(--teal-dk);color:#fff}
.svcw-btn.ghost{background:transparent;border-color:var(--bd-lt)}
.svcw-cb{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx-md);cursor:pointer}
.svcw-cb input{accent-color:var(--teal)}

/* TABLES */
.svcw-table-wrap{overflow-x:auto}
.svcw-table{width:100%;border-collapse:collapse;font-size:13px}
.svcw-table thead th{background:#f8fbfa;padding:8px 12px;text-align:left;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;color:var(--tx-lt);text-transform:uppercase;letter-spacing:.5px;border-bottom:1.5px solid var(--bd)}
.svcw-table tbody tr{border-bottom:1px solid var(--bd-lt)}
.svcw-table tbody tr:hover{background:#fbfdfc}
.svcw-table td{padding:8px 12px;vertical-align:middle}

/* SCHEDULE */
.svcw-sch-wrap{overflow-x:auto;border:1px solid var(--bd-lt);border-radius:12px;margin-top:.75rem}
.svcw-sch{width:100%;border-collapse:separate;border-spacing:0}
.svcw-sch th, .svcw-sch td{padding:10px;border-bottom:1px solid var(--bd-lt);text-align:left;font-size:13px;vertical-align:top}
.svcw-sch thead th{background:#f8fbfa;font-family:'Barlow Condensed',sans-serif;font-size:11.5px;color:var(--tx-lt);text-transform:uppercase;letter-spacing:.4px}
.svcw-sch-cell{min-width:160px}
.svcw-sch-cell.teal{background:#f1fcfa}
.svcw-sch-cell.amber{background:#fffaee}
.svcw-sch-cell.coral{background:#fff5f1}
.svcw-sch-job{background:#fff;border:1px solid var(--bd-lt);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.svcw-sch-job b{font-size:13px;color:var(--navy)}
.svcw-sch-job span{font-size:11.5px;color:var(--tx-lt)}
.svcw-sch-empty{font-size:12px;color:var(--teal-dk);font-weight:600;cursor:pointer;padding:6px 8px;border:1.5px dashed var(--teal);border-radius:9px;background:rgba(255,255,255,.6);text-align:center}
.svcw-sch-empty:hover{background:#eef9f7}
.svcw-sch-worker{font-weight:700;color:var(--navy);min-width:130px}

/* PRICING BUILDER */
.svcw-pb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.svcw-pb-field{display:flex;flex-direction:column;gap:5px;font-size:12px}
.svcw-pb-field > span{font-size:11px;color:var(--tx-lt);text-transform:uppercase;font-weight:700;letter-spacing:.4px}
.svcw-pb-field input,.svcw-pb-field select{padding:9px 10px;border:1.5px solid var(--bd);border-radius:9px;font-size:13px;background:#fff;outline:none;font-family:'Barlow',sans-serif}
.svcw-pb-field input:focus,.svcw-pb-field select:focus{border-color:var(--teal)}
.svcw-pb-features{margin-top:1rem}
.svcw-pb-features-hdr{font-family:'Barlow Condensed',sans-serif;font-size:13px;color:var(--navy);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.svcw-pb-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1.5px solid var(--bd);border-radius:999px;background:#fff;font-size:12.5px;cursor:pointer;margin:0 6px 6px 0}
.svcw-pb-chip input{accent-color:var(--teal)}
.svcw-pb-chip em{color:var(--tx-lt);font-style:normal;font-size:11.5px;margin-left:2px}
.svcw-pb-chip:hover{border-color:var(--teal);color:var(--teal-dk)}
.svcw-pb-result{margin-top:.85rem;background:linear-gradient(135deg,#f1fcfa,#eef9f7);border:1px solid var(--teal);border-radius:12px;padding:14px}
.svcw-pb-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.svcw-pb-num{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;color:var(--teal-dk)}
.svcw-pb-num-l{font-size:11px;color:var(--tx-lt);text-transform:uppercase;font-weight:700;letter-spacing:.4px}
.svcw-pb-breakdown{margin-top:.6rem;font-size:12.5px;color:var(--tx-md)}

/* RECOMMENDATIONS LIST */
.svcw-rec-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.svcw-rec-list li{padding:10px 12px;border:1px solid var(--bd-lt);border-radius:10px;background:#fff;display:flex;flex-direction:column;gap:2px}
.svcw-rec-list li b{color:var(--navy);font-size:13px}
.svcw-rec-list li span{color:var(--tx-md);font-size:12.5px}

/* PERMISSIONS TABLE */
.svcw-perm-table th, .svcw-perm-table td{text-align:center}
.svcw-perm-table .svcw-perm-role{text-align:left;font-weight:700;color:var(--navy);font-family:'Barlow',sans-serif;font-size:13px}

/* COMMS */
.svcw-msg-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto}
.svcw-msg{padding:10px 12px;border-radius:12px;background:#f8fbfa;border:1px solid var(--bd-lt)}
.svcw-msg.out{background:#eef9f7;border-color:var(--teal)}
.svcw-msg-meta{font-size:11px;color:var(--tx-lt);margin-bottom:3px}
.svcw-msg-tx{font-size:13px;color:var(--tx)}

/* PLATFORM SETUP */
.ps-form-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:1rem}
.ps-list{display:flex;flex-direction:column;gap:8px;margin-top:.85rem}
.ps-step{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--bd-lt);border-radius:12px;background:#fff}
.ps-step-num{width:30px;height:30px;border-radius:50%;background:var(--teal-lt);color:var(--teal-dk);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-family:'Barlow Condensed',sans-serif}
.ps-step-tx{flex:1;min-width:0}
.ps-step-nm{font-weight:700;color:var(--navy);font-size:13.5px}
.ps-step-sub{color:var(--tx-md);font-size:12px;margin-top:1px}
.ps-pct{height:8px;background:#eef4f3;border-radius:6px;overflow:hidden;margin-top:.4rem}
.ps-pct > div{height:100%;background:var(--teal);transition:width .25s}
.ps-pct-l{font-size:11.5px;color:var(--tx-lt);margin-top:4px}

/* LIVE SELECTOR */
.ls-root{position:relative;display:flex;flex-direction:column;gap:5px;width:100%}
.ls-lbl{font-size:11px;color:var(--tx-lt);text-transform:uppercase;font-weight:700;letter-spacing:.4px}
.ls-input-wrap{position:relative;display:flex;align-items:center}
.ls-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--tx-lt);font-size:13px;pointer-events:none}
.ls-input{width:100%;padding:10px 32px 10px 32px;border:1.5px solid var(--bd);border-radius:10px;font-size:14px;background:#fff;outline:none;font-family:'Barlow',sans-serif}
.ls-input:focus{border-color:var(--teal)}
.ls-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--tx-lt);font-size:13px;cursor:pointer;padding:4px 6px;border-radius:6px}
.ls-clear:hover{background:#eef4f3;color:var(--tx)}
.ls-results{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);max-height:280px;overflow-y:auto;background:#fff;border:1px solid var(--bd);border-radius:10px;box-shadow:0 12px 32px rgba(20,19,16,.18);z-index:200;padding:6px}
.ls-results.show{display:block}
.ls-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:8px 10px;background:transparent;border:0;text-align:left;border-radius:8px;cursor:pointer}
.ls-item:hover{background:#eef9f7}
.ls-item-nm{font-size:13px;color:var(--navy);font-weight:700}
.ls-item-sub{font-size:11.5px;color:var(--tx-lt)}
.ls-empty{padding:.7rem;color:var(--tx-lt);font-size:12.5px;text-align:center}
.svcw-live-wrap{margin-bottom:.6rem;max-width:520px}

/* MOBILE TECH FRAME */
.mt-shell{display:grid;grid-template-columns:minmax(320px,400px) 1fr;gap:1rem;align-items:flex-start}
.mt-frame{background:#141310;border-radius:24px;padding:14px;color:#fff;box-shadow:0 16px 40px rgba(20,19,16,.28)}
.mt-bar{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.7);padding:0 6px 8px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:8px}
.mt-stack{background:#f4f7f6;border-radius:18px;padding:12px;color:var(--tx)}
.mt-section-hdr{font-family:'Barlow Condensed',sans-serif;font-size:13px;color:var(--navy);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.mt-job{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:#fff;border:1px solid var(--bd-lt);margin-bottom:6px}
.mt-job.current{border-color:var(--teal);box-shadow:0 4px 12px rgba(255,107,0,.18)}
.mt-job.done{opacity:.55}
.mt-job-pill{padding:4px 8px;border-radius:8px;font-size:11px;font-weight:800;font-family:'Barlow Condensed',sans-serif;letter-spacing:.4px;background:#eef4f3;color:var(--navy)}
.mt-job-pill.teal{background:#dcf5ef;color:#0a5c48}
.mt-job-pill.amber{background:#fff4dc;color:#8a5c00}
.mt-job-pill.coral{background:#ffe8e0;color:#8a2a13}
.mt-job-tx{flex:1;min-width:0}
.mt-job-cust{font-weight:700;font-size:13.5px;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-job-addr{font-size:11.5px;color:var(--tx-lt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-job-task{font-size:12px;color:var(--tx-md);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-job-state{font-size:11px;font-weight:800;color:var(--teal-dk);padding:3px 7px;border-radius:6px;background:#eef9f7;flex-shrink:0;font-family:'Barlow Condensed',sans-serif;letter-spacing:.4px}
.mt-job.current .mt-job-state{color:#fff;background:var(--teal)}
.mt-job.done .mt-job-state{color:#0a5c48;background:#dcf5ef}

.mt-current{margin-top:12px;background:#fff;border-radius:14px;padding:12px;border:1px solid var(--bd-lt)}
.mt-current-hdr{font-family:'Barlow Condensed',sans-serif;font-size:14px;color:var(--navy);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.mt-current-sub{font-size:12px;color:var(--tx-md);margin:4px 0 8px}
.mt-photo-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.mt-photo-btn{padding:10px 14px;border-radius:10px;background:var(--teal);color:#fff;border:0;font-weight:700;cursor:pointer;font-size:13px}
.mt-photo-count{font-size:12.5px;color:var(--tx-md)}
.mt-field{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.mt-field > span{font-size:11px;color:var(--tx-lt);text-transform:uppercase;font-weight:700;letter-spacing:.4px}
.mt-field textarea{padding:10px;border:1.5px solid var(--bd);border-radius:10px;font-size:13px;font-family:'Barlow',sans-serif;outline:none;resize:vertical;min-height:60px;background:#fff}
.mt-field textarea:focus{border-color:var(--teal)}
.mt-foot-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.mt-cb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tx);margin-bottom:6px;cursor:pointer}
.mt-cb input{accent-color:var(--teal);width:18px;height:18px}
.mt-actions{margin-top:8px}
.mt-next{width:100%;padding:14px;background:var(--teal);color:#fff;border:0;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer;font-family:'Barlow Condensed',sans-serif;letter-spacing:.4px}
.mt-next:hover{background:var(--teal-dk)}
.mt-windows{margin-top:10px;padding-top:10px;border-top:1px dashed var(--bd-lt)}
.mt-windows-hdr{font-family:'Barlow Condensed',sans-serif;font-size:11px;color:var(--tx-lt);text-transform:uppercase;font-weight:700;letter-spacing:.4px;margin-bottom:4px}
.mt-windows-row{display:flex;flex-wrap:wrap;gap:6px}
.mt-windows-note{font-size:11.5px;color:var(--tx-lt);margin-top:6px}
.mt-done{padding:1.5rem;text-align:center;background:#fff;border-radius:14px}
.mt-done-ic{font-size:36px;margin-bottom:6px}
.mt-side .svcw-card{margin-top:0}

/* MOBILE BREAKPOINTS */
@media (max-width: 1100px){
  .svcw-grid-2{grid-template-columns:1fr}
  .svcw-pb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ps-form-row{grid-template-columns:1fr 1fr}
  .mt-shell{grid-template-columns:1fr}
  .svcw-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .svcw-pb-grid, .svcw-pb-result-grid, .ps-form-row{grid-template-columns:1fr}
  .svcw-hero{flex-direction:column;align-items:flex-start;padding:1.1rem}
  .svcw-hero-meta{margin-top:.4rem}
  .svcw-stats{grid-template-columns:repeat(2,1fr)}
  .svcw-subnav{padding:5px;gap:4px}
  .svcw-tab{font-size:12px;padding:7px 10px}
  .svcw-table thead th, .svcw-table td{padding:7px 9px;font-size:12px}
  .mt-frame{padding:10px;border-radius:18px}
  .mt-stack{padding:10px;border-radius:14px}
  .mt-job-cust{font-size:13px}
  .ls-input{font-size:14px}
}
@media (max-width: 420px){
  .svcw-hero-tx h2{font-size:22px}
  .svcw-stats{grid-template-columns:1fr 1fr}
  .svcw-stat-v{font-size:20px}
  .svcw-tab span:not(.svcw-tab-ic){font-size:11.5px}
  .mt-photo-btn{padding:9px 11px;font-size:12.5px}
  .mt-next{padding:12px;font-size:13.5px}
}

/* ── PR162 Subnav layout (always active) ── */
.svcw-subnav{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
.svcw-subnav::-webkit-scrollbar{display:none}
.svcn-extra{margin-left:auto;display:flex;gap:4px;align-items:center;flex-shrink:0}
.svcn-drop-wrap{position:relative}
.svcn-drop{display:none;position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:0 8px 24px rgba(20,19,16,.16);padding:6px;z-index:300;min-width:200px}
.svcn-drop.open{display:block}
.svcn-drop-item{display:block;width:100%;text-align:left;white-space:nowrap;border-radius:8px!important}
@media (max-width:767px){.svcn-extra{display:none!important}}

/* ── PR163: Section Lily bar (every section except Schedule) ── */
.svc-lily-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--teal-lt);border:1px solid var(--bd);border-radius:12px;
  padding:10px 14px;margin:18px 0 6px;
}
.svc-lily-bar-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.svc-lily-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--teal);
  color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;font-family:'Barlow Condensed',sans-serif;
}
.svc-lily-name{font-weight:700;font-size:13px;color:var(--teal-dk);white-space:nowrap;flex-shrink:0}
.svc-lily-input{
  flex:1;min-width:0;border:1px solid var(--bd);border-radius:8px;
  padding:7px 10px;font-size:13px;font-family:Barlow,sans-serif;background:#fff;
  color:var(--tx);outline:none;
}
.svc-lily-input:focus{border-color:var(--teal);box-shadow:0 0 0 2px rgba(255,107,0,.15)}
.svc-lily-send{
  background:var(--teal);color:#fff;border:none;border-radius:8px;
  padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:Barlow,sans-serif;flex-shrink:0;white-space:nowrap;
}
.svc-lily-send:hover{background:var(--teal-dk)}
.svc-lily-pills{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.svc-lily-pill{
  background:#fff;border:1px solid var(--bd);border-radius:20px;
  padding:4px 11px;font-size:12px;color:var(--teal-dk);cursor:pointer;
  font-family:Barlow,sans-serif;white-space:nowrap;
  transition:background .12s,border-color .12s;
}
.svc-lily-pill:hover{background:var(--teal-lt);border-color:var(--teal)}
@media (max-width:767px){
  .svc-lily-bar{flex-direction:column;align-items:stretch}
  .svc-lily-bar-left{flex-wrap:wrap}
}