/* v2.css — Call Ops v2 re-skin (lead workspace + Script Library).
   Lifted from sis_call_ops_v2.html. Literal hex (no shared-var collision with theme.css).
   Loaded in addition to theme.css on index.html + lead.html. Reversible: remove the <link>. */

/* ---- v2 lead card ---- */
.v2-card{
  background:#121829; border:1px solid #26304a; border-radius:14px;
  padding:20px 22px; margin-bottom:20px;
}
.v2-card .co{font-size:28px; font-weight:800; letter-spacing:-.3px; margin:0 0 4px; color:#eef2fb;}
.v2-card .sub{color:#9aa6c0; font-size:13px; margin-bottom:16px;}
.v2-card .sub .star{color:#d8b25b;}
.v2-card .web-badge{
  display:inline-block; padding:2px 9px; border-radius:6px; font-size:11px;
  font-weight:600; margin-left:2px; vertical-align:middle;
}
.web-none{background:#3a1f24; color:#f87171; border:1px solid #5a2f36;}
.web-fb{background:#2a2440; color:#a78bfa; border:1px solid #3f3560;}
.web-url{background:#1f3a2a; color:#4ade80; border:1px solid #2f5a3f;}
.v2-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.btn-call{
  background:linear-gradient(180deg,#f0d089,#d8b25b); color:#1a1206;
  padding:11px 22px; border-radius:10px; font-weight:700; font-size:15px;
  border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn-call:hover{filter:brightness(1.07); text-decoration:none;}
.btn-call .ph{font-variant-numeric:tabular-nums;}
.link-btn{
  padding:9px 15px; border-radius:9px; font-size:13px; font-weight:500; text-decoration:none;
  background:#0e1422; border:1px solid #26304a; color:#eef2fb;
}
.link-btn:hover{border-color:#d8b25b; text-decoration:none;}

/* ---- Script Library ---- */
.sec-h{
  font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:#d8b25b; margin:0 0 12px; display:flex; align-items:center;
}
.lib-block{margin-bottom:24px;}
.tabbar{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; align-items:center;}
.tab{
  position:relative; padding:8px 14px; cursor:pointer;
  background:#0e1422; border:1px solid #26304a;
  font-size:13px; color:#9aa6c0; user-select:none; display:flex; align-items:center; gap:7px;
  border-radius:9px;
}
.tab:hover{color:#eef2fb;}
.tab.active{background:#d8b25b; color:#1a1206; border-color:#d8b25b; font-weight:700;}
.tab .x{font-size:14px; line-height:1; opacity:.55; padding:0 1px; border-radius:4px;}
.tab .x:hover{opacity:1; color:#f87171;}
.tab.active .x:hover{color:#7a1818;}
.tab.addtab{background:transparent; border-style:dashed; color:#f0d089; font-weight:600;}
.tab.addtab:hover{background:#0e1422;}
.script-wrap{
  background:#121829; border:1px solid #26304a;
  border-radius:12px; padding:22px 24px;
}
.script-body{outline:none; min-height:80px;}
.script-body:focus{box-shadow:0 0 0 2px rgba(216,178,91,.25); border-radius:8px;}
.edit-hint{font-size:11px; color:#9aa6c0; margin-bottom:12px; font-style:italic;}
.script-body h2{font-size:16px; margin:0 0 6px; color:#eef2fb;}
.script-body .goal{
  background:#1f2a16; border:1px solid #3a4d24; color:#4ade80;
  padding:10px 14px; border-radius:9px; font-weight:600; margin-bottom:18px;
}
.script-body .step{margin-bottom:18px;}
.script-body .step-h{
  font-weight:800; font-size:15px; color:#f0d089; margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.script-body .say{
  border-left:3px solid #d8b25b; background:#0e1422;
  padding:9px 14px; border-radius:0 8px 8px 0; margin:7px 0; color:#fff; font-size:14px;
}
.script-body .lock{border-left-color:#4ade80; background:#16241a; color:#d6ffe0;}
.script-body .note{color:#9aa6c0; font-size:12.5px; margin:6px 0; font-style:italic;}
.script-body .dig{margin:8px 0 0 4px; padding-left:18px;}
.script-body .dig li{margin-bottom:3px; color:#eef2fb;}
.script-body .obj{margin-bottom:14px;}
.script-body .obj .o-q{font-weight:700; color:#fbbf24; margin-bottom:4px;}
.script-body .obj .o-a{color:#eef2fb; padding-left:12px; border-left:2px solid #26304a;}
.script-body .obj-sec-h{
  font-size:13px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:#4fd1c5; margin:20px 0 12px; padding-top:14px; border-top:1px solid #26304a;
}
.script-body .stub{color:#9aa6c0;}
.saved-flash{font-size:11px; color:#4ade80; margin-left:10px; opacity:0; transition:opacity .3s;}
.saved-flash.show{opacity:1;}

/* ============================================================
   Mobile / responsive  (added 2026-06-11)
   Additive — targets theme.css shell + v2 cards. Remove this
   block to revert. Breakpoint: phones & small tablets ≤768px.
   ============================================================ */
@media (max-width: 768px){
  /* Stack the shell; sidebar becomes a scrollable top bar */
  .app-shell{flex-direction:column; height:auto; min-height:100dvh;}
  .main{overflow:visible; min-width:0;}
  .main-content{overflow:visible; padding:14px;}

  .sidebar{
    width:100%; flex-direction:row; align-items:center;
    border-right:none; border-bottom:1px solid var(--border);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .sidebar-logo{border-bottom:none; padding:10px 12px; flex-shrink:0;}
  .sidebar-nav{display:flex; flex-direction:row; align-items:center; gap:4px; padding:8px 10px; overflow-x:auto; flex:1;}
  .nav-section{margin-bottom:0; display:flex; gap:4px; align-items:center;}
  .nav-section-label{display:none;}
  .nav-item{white-space:nowrap; margin-bottom:0; padding:9px 12px;}
  .nav-item.active::before{display:none;}
  .nav-item.active{box-shadow:inset 0 -2px 0 var(--accent);}
  .nav-badge{display:none;}
  .sidebar-footer{display:none;}

  /* Header wraps; bigger tap targets on the switchers */
  .main-header{height:auto; padding:10px 14px; flex-wrap:wrap; gap:8px;}
  .header-title{font-size:16px;}
  .header-right{margin-left:auto; gap:8px; flex-wrap:wrap;}
  .vm-switcher{flex-wrap:wrap; gap:6px;}
  .vm-switcher select{padding:9px 11px; font-size:13px;}

  /* Metrics: 2 across */
  .metrics{grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px;}
  .metric-card{padding:11px 12px;}
  .metric-value{font-size:20px;}

  .panel{padding:14px;}

  /* Filters: full-width search, comfortable pills */
  .filters{gap:8px;}
  .filter-group{flex-wrap:wrap;}
  #f-search{max-width:100% !important; width:100%;}
  .pillset .pill{padding:8px 12px;}

  /* Lead table: drop noisy columns, keep Business/Tier/City/Site/Phone */
  table.data thead th, table.data tbody td{padding:9px 8px;}
  table.data th:nth-child(4), table.data td:nth-child(4),
  table.data th:nth-child(5), table.data td:nth-child(5),
  table.data th:nth-child(7), table.data td:nth-child(7),
  table.data th:nth-child(8), table.data td:nth-child(8),
  table.data th:nth-child(9), table.data td:nth-child(9){display:none;}

  /* Lead detail page: thumb-friendly call + actions */
  .v2-card{padding:16px;}
  .v2-card .co{font-size:22px;}
  .btn-call{width:100%; justify-content:center; padding:14px 22px; font-size:16px;}
  .v2-actions{gap:8px;}
  .v2-actions .link-btn{flex:1 1 auto; text-align:center; padding:11px 14px;}
  .outcome-btns{grid-template-columns:repeat(2,1fr);}
  .sticky-logger{padding:12px;}
  .script-wrap{padding:16px;}
}

/* Very small phones */
@media (max-width: 380px){
  .metrics{grid-template-columns:1fr 1fr; gap:6px;}
  .header-title{font-size:15px;}
}


/* ---- Book Walkthrough button (added 2026-06-11) ---- */
.btn-book{
  padding:11px 18px; border-radius:10px; font-weight:700; font-size:14px;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,#34d399,#10b981); color:#04210f; border:none;
}
.btn-book:hover{filter:brightness(1.07); text-decoration:none;}
@media (max-width:768px){ .btn-book{width:100%; justify-content:center; padding:14px 18px; font-size:15px;} }


/* ---- Book email capture input (added 2026-06-11) ---- */
input.book-email-input{
  flex:1 1 200px; min-width:180px; width:auto;
  padding:10px 12px; border-radius:9px; font-size:13px;
  background:#0e1422; border:1px solid #26304a; color:#eef2fb;
}
input.book-email-input::placeholder{color:#6b7894;}
input.book-email-input:focus{outline:none; border-color:#d8b25b; box-shadow:0 0 0 2px rgba(216,178,91,.2);}
@media(max-width:768px){ input.book-email-input{flex:1 1 100%; width:100%;} }