/* Voice Phone admin — same design system as the WordPress plugin */
/* Voice Order Agent — admin screens (dashboard, calls, settings) */
.va-admin{
	--va-leaf:#12352a;      /* text, headings */
	--va-sprout:#2f8f57;    /* actions, live state */
	--va-sprout-dk:#24744a;
	--va-tint:#e8f3ec;      /* soft green fills */
	--va-canvas:#f4f6f5;    /* page */
	--va-line:#e1e7e3;      /* borders */
	--va-muted:#5d6b64;     /* secondary text */
	--va-red:#c23a3a;
	--va-amber:#a86a00;
	/* chart: one green hue, light → dark follows the funnel stage */
	--va-c1:#a9d5b8; --va-c2:#56a979; --va-c3:#1f6e45;
	--va-grid:#edf1ee; --va-axis:#cfd8d3;
	max-width:1240px;margin:0 auto;padding:22px 28px 40px;font-family:Inter,"Hind Siliguri",system-ui,sans-serif;color:var(--va-leaf);font-size:14px;line-height:1.6;
}
.va-admin a{color:var(--va-sprout-dk)}
.va-admin a:focus-visible,.va-admin button:focus-visible,.va-admin input:focus-visible,.va-admin select:focus-visible,.va-admin textarea:focus-visible,.va-admin summary:focus-visible{outline:2px solid var(--va-sprout);outline-offset:2px;box-shadow:none}
.va-admin h2{font-family:inherit;color:var(--va-leaf)}

/* ---------- header ---------- */
.va-top{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin-bottom:22px}
.va-brand{display:flex;align-items:center;gap:12px}
.va-logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--va-sprout);color:#fff}
.va-admin .va-title{margin:0;padding:0;font-size:21px;font-weight:700;line-height:1.2;color:var(--va-leaf)}
.va-pill{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:12px;font-weight:500;color:var(--va-muted)}
.va-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#b8c2bd}
.va-pill.is-live{color:var(--va-sprout-dk)}.va-pill.is-live::before{background:var(--va-sprout);box-shadow:0 0 0 3px var(--va-tint)}
.va-tabs{display:flex;gap:2px;padding:4px;border-radius:12px;background:#fff;border:1px solid var(--va-line)}
.va-tabs a{padding:7px 16px;border-radius:9px;color:var(--va-muted);font-weight:500;text-decoration:none}
.va-tabs a:hover{color:var(--va-leaf);background:var(--va-canvas)}
.va-tabs a.is-on{background:var(--va-leaf);color:#fff}
.va-top-extra{margin-left:auto}

/* segmented control (range / filters) */
.va-seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:#fff;border:1px solid var(--va-line)}
.va-seg a{padding:5px 12px;border-radius:7px;font-size:13px;color:var(--va-muted);text-decoration:none}
.va-seg a:hover{color:var(--va-leaf)}
.va-seg a.is-on{background:var(--va-tint);color:var(--va-sprout-dk);font-weight:600}
.va-btn-ghost{display:inline-block;padding:7px 14px;border:1px solid var(--va-line);border-radius:10px;background:#fff;text-decoration:none;font-weight:500}
.va-btn-sm{display:inline-block;padding:3px 10px;border-radius:8px;background:var(--va-canvas);text-decoration:none;font-size:13px;font-weight:500}
.va-btn-sm:hover{background:var(--va-tint)}

/* ---------- funnel: the dashboard's one bold element ---------- */
.va-funnel{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;margin-bottom:14px;border-radius:18px;background:#fff;border:1px solid var(--va-line);overflow:hidden}
.va-stage{padding:22px 24px}
.va-stage-k{font-size:14px;color:var(--va-muted)}
.va-stage-v{font-size:44px;font-weight:700;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.va-stage-s{font-size:13px;color:var(--va-muted);margin-top:6px}
.va-stage-win{background:var(--va-leaf);color:#fff}
.va-stage-win .va-stage-k,.va-stage-win .va-stage-s{color:#b9d6c6}
.va-step{display:grid;place-items:center;width:64px;position:relative}
.va-step::before{content:"";position:absolute;inset:18px 50%;border-left:1px dashed var(--va-line)}
.va-step span{position:relative;padding:4px 8px;border-radius:999px;background:var(--va-tint);color:var(--va-sprout-dk);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:900px){
	.va-funnel{grid-template-columns:1fr}
	.va-step{width:auto;height:34px}
	.va-step::before{inset:0 50%}
}

/* secondary numbers: one quiet strip, not more cards */
.va-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:22px;border-radius:14px;background:#fff;border:1px solid var(--va-line)}
.va-strip>div{display:flex;flex-direction:column;padding:14px 20px}
.va-strip>div+div{border-left:1px solid var(--va-line)}
.va-k{font-size:13px;color:var(--va-muted)}
.va-v{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.va-s{font-size:12px;color:var(--va-muted)}
@media (max-width:900px){.va-strip{grid-template-columns:repeat(2,1fr)}.va-strip>div:nth-child(3){border-left:0}.va-strip>div:nth-child(n+3){border-top:1px solid var(--va-line)}}

/* ---------- cards ---------- */
.va-card{background:#fff;border:1px solid var(--va-line);border-radius:14px;padding:18px 20px;margin:0 0 16px}
.va-card.va-flush{padding:0;overflow:hidden}
.va-card-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px}
.va-admin .va-card-head h2{margin:0;font-size:16px;font-weight:600}
.va-hint{font-size:12px;color:var(--va-muted)}
.va-legend{display:flex;flex-wrap:wrap;gap:14px;margin-left:auto;font-size:12px;color:var(--va-muted)}
.va-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.va-note{margin:8px 0 0;font-size:12px;color:var(--va-muted)}
.va-empty{margin:4px 0;color:var(--va-muted)}
.va-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.va-cols>.va-card{margin:0 0 16px}
@media (max-width:1000px){.va-cols{grid-template-columns:1fr}}
.va-grp:hover path{opacity:.75}
.va-admin svg text{font-family:Inter,"Hind Siliguri",system-ui,sans-serif}

/* reasons as horizontal bars */
.va-bars{margin:0;padding:0;list-style:none}
.va-bars li{margin:0 0 12px}
.va-bars-row{display:flex;justify-content:space-between;font-size:13px}
.va-num{font-weight:600;font-variant-numeric:tabular-nums}
.va-bars-track{height:8px;margin-top:4px;border-radius:4px;background:var(--va-canvas);overflow:hidden}
.va-bars-track i{display:block;height:100%;border-radius:4px;background:var(--va-c2)}

/* ---------- tables ---------- */
.va-table{width:100%;border-collapse:collapse;font-size:13.5px}
.va-table th{padding:10px 14px;text-align:left;font-weight:500;font-size:12.5px;color:var(--va-muted);border-bottom:1px solid var(--va-line);background:transparent}
.va-table td{padding:11px 14px;border-bottom:1px solid var(--va-grid);vertical-align:middle}
.va-table tbody tr:last-child td{border-bottom:0}
.va-table tbody tr:hover td{background:#fafcfb}
.va-card:not(.va-flush) .va-table th:first-child,.va-card:not(.va-flush) .va-table td:first-child{padding-left:0}
.va-card:not(.va-flush) .va-table th:last-child,.va-card:not(.va-flush) .va-table td:last-child{padding-right:0}
.va-r{text-align:right!important;font-variant-numeric:tabular-nums}
.va-date{display:block;font-weight:500}
.va-sub2{display:block;font-size:12px;color:var(--va-muted)}
.va-muted{color:var(--va-muted)}
.va-table code{background:var(--va-canvas);padding:2px 6px;border-radius:5px;font-size:12px}
.va-kv th{width:34%;font-size:13px;color:var(--va-muted);border-bottom:1px solid var(--va-grid);font-weight:500}
.va-details summary{cursor:pointer;font-weight:600}
.va-details[open] summary{margin-bottom:10px}

/* status badges: label text carries meaning, color only reinforces */
.va-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--va-canvas);color:var(--va-muted);white-space:nowrap}
.va-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.va-badge.is-ok{background:var(--va-tint);color:var(--va-sprout-dk)}
.va-badge.is-warn{background:#fdf3e1;color:var(--va-amber)}
.va-badge.is-bad{background:#fbeaea;color:var(--va-red)}

/* ---------- call detail ---------- */
.va-detail-head{display:flex;align-items:baseline;gap:14px;margin:0 0 14px}
.va-admin .va-detail-head h2{margin:0;font-size:20px}
.va-chat{display:flex;flex-direction:column;gap:10px;max-width:760px}
.va-msg{max-width:78%;padding:10px 14px;border-radius:16px;line-height:1.6}
.va-msg.is-agent{align-self:flex-start;background:var(--va-canvas);border-bottom-left-radius:4px}
.va-msg.is-user{align-self:flex-end;background:var(--va-tint);border-bottom-right-radius:4px}
.va-who{display:block;font-size:11.5px;font-weight:600;color:var(--va-muted);margin-bottom:2px}

/* ---------- settings ---------- */
.va-settings .va-sec{padding:6px 24px 8px}
.va-settings .va-sec>h2{margin:16px 0 4px;font-size:16px;font-weight:600}
.va-settings .form-table{margin:0}
.va-settings .form-table th{width:220px;padding:16px 20px 16px 0;font-weight:500;color:var(--va-leaf)}
.va-settings .form-table td{padding:14px 0}
.va-settings .form-table tr+tr th,.va-settings .form-table tr+tr td{border-top:1px solid var(--va-grid)}
.va-settings input[type=url],.va-settings input[type=text],.va-settings input[type=number],.va-settings input[type=password],.va-settings input:not([type]),.va-settings select,.va-settings textarea{border:1px solid #cdd6d1;border-radius:8px;min-height:36px;padding:4px 10px;font-family:inherit;box-shadow:none}
.va-settings textarea{padding:8px 10px;line-height:1.6}
.va-settings input:focus,.va-settings select:focus,.va-settings textarea:focus{border-color:var(--va-sprout);box-shadow:0 0 0 3px var(--va-tint);outline:0}
.va-settings .description{color:var(--va-muted);font-size:12.5px}
.va-settings code{background:var(--va-canvas);border-radius:5px;padding:2px 6px}
/* checkboxes become switches */
.va-settings input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;width:38px;height:22px;margin:0 8px 0 0;border:0;border-radius:999px;background:#c9d2cd;vertical-align:-6px;cursor:pointer;transition:background-color .15s;box-shadow:none}
.va-settings input[type=checkbox]::before{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;margin:0;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.va-settings input[type=checkbox]:checked{background:var(--va-sprout)}
.va-settings input[type=checkbox]:checked::before{content:"";transform:translateX(16px)}
.va-savebar{position:sticky;bottom:0;z-index:5;display:flex;justify-content:flex-end;margin:0 -2px;padding:14px 0;background:linear-gradient(transparent,var(--va-canvas) 30%)}
.va-admin .button-primary{min-height:40px;padding:0 22px;border:0;border-radius:10px;background:var(--va-sprout);font-family:inherit;font-size:14px;font-weight:600}
.va-admin .button-primary:hover,.va-admin .button-primary:focus{background:var(--va-sprout-dk)}
.va-admin .button{border-radius:8px}
.va-admin .notice{border-radius:10px;margin:0 0 16px}

@media (max-width:782px){
	.va-admin{margin-right:12px}
	.va-top-extra{margin-left:0}
	.va-settings .form-table th{width:auto;padding-bottom:0}
	.va-settings .form-table tr+tr td{border-top:0}
	.va-calls th:nth-child(5),.va-calls td:nth-child(5),.va-calls th:nth-child(8),.va-calls td:nth-child(8){display:none}
}
@media (prefers-reduced-motion:reduce){.va-settings input[type=checkbox],.va-settings input[type=checkbox]::before{transition:none}}

/* ---------- standalone app additions ---------- */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--va-canvas,#f4f6f5);-webkit-font-smoothing:antialiased}
:root{--va-canvas:#f4f6f5}
.va-admin input,.va-admin select,.va-admin textarea,.va-admin button{font:inherit}
.va-admin input,.va-admin select,.va-admin textarea{color:var(--va-leaf)}
.va-title small{font-size:12px;font-weight:600;color:var(--va-sprout-dk);background:var(--va-tint);padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:3px}
.va-pill.is-bad{color:var(--va-red)}.va-pill.is-bad::before{background:var(--va-red)}
.va-logout{margin:0}
.va-link{border:0;background:none;padding:0;color:var(--va-sprout-dk);cursor:pointer;font-weight:500;text-decoration:underline;text-underline-offset:2px}
.va-link.is-danger{color:var(--va-red)}
.va-inline{display:inline;margin:0}
.va-foot{margin-top:28px;font-size:12px;color:var(--va-muted);text-align:center}
.va-notice{padding:12px 16px;border-radius:10px;margin:0 0 16px;background:var(--va-tint);color:var(--va-leaf);border:1px solid #cfe6d7}
.va-notice.is-bad{background:#fbeaea;border-color:#f0cccc;color:#8b2020}
.va-badge.is-info{background:#e8eefb;color:#2d4f9e}
.va-btn,.button-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 20px;border:0;border-radius:10px;background:var(--va-sprout);color:#fff;font-weight:600;text-decoration:none;cursor:pointer}
.va-btn:hover,.button-primary:hover{background:var(--va-sprout-dk);color:#fff}
.va-admin .va-btn,.va-admin .button-primary,.va-admin .va-btn:hover{color:#fff}
.va-card .va-btn,.va-card form{margin-top:4px}
.va-btn-ghost{cursor:pointer;color:var(--va-leaf);line-height:1.5;font-size:14px}
.va-btn-ghost.is-danger{color:var(--va-red);margin-right:auto}
.va-btn-ghost:hover{border-color:#c9d4ce}
.va-scroll{overflow-x:auto}
.va-search{display:flex;gap:8px;align-items:center;margin:0 0 14px}
.va-search input{min-height:38px;padding:4px 12px;border:1px solid #cdd6d1;border-radius:10px;width:min(320px,100%);background:#fff}
.va-search input:focus{border-color:var(--va-sprout);box-shadow:0 0 0 3px var(--va-tint);outline:0}
.va-table tr.is-off td{color:var(--va-muted)}
.va-cols-wide{grid-template-columns:2fr 1fr}
@media (max-width:1000px){.va-cols-wide{grid-template-columns:1fr}}
.va-msg.is-sys{align-self:center;max-width:92%;padding:3px 12px;border-radius:999px;background:transparent;border:1px dashed var(--va-line);color:var(--va-muted);font-size:12.5px}
/* settings layout without WP's form-table */
.va-settings .form-table{width:100%;border-collapse:collapse}
.va-settings .form-table th{text-align:left;vertical-align:top}
.va-settings .regular-text{width:min(380px,100%)}
.va-settings .large-text{width:100%}
.va-settings .description{margin:6px 0 0}
.va-settings label{cursor:pointer}
.va-inl{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:13px;color:var(--va-muted)}
.va-savebar{gap:10px;align-items:center}
.va-toc{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;gap:4px;padding:10px 0;margin-bottom:6px;background:var(--va-canvas)}
.va-toc a{padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--va-line);font-size:13px;color:var(--va-muted);text-decoration:none}
.va-toc a:hover{color:var(--va-leaf);border-color:#c9d4ce}
.va-sec{scroll-margin-top:60px}
@media (max-width:782px){
  .va-admin{padding:16px}
  .va-settings .form-table th,.va-settings .form-table td{display:block;width:auto}
  .va-settings .form-table td{padding-top:6px}
  .va-inl{margin:6px 10px 0 0}
}
/* live calls */
.va-live-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px 0;border-top:1px solid var(--va-grid)}
.va-live-row:first-child{border-top:0}
.va-live-row .va-sub2{flex-basis:100%}
.va-dot{width:8px;height:8px;border-radius:50%;background:var(--va-sprout);box-shadow:0 0 0 3px var(--va-tint);animation:va-pulse 1.6s infinite}
@keyframes va-pulse{50%{box-shadow:0 0 0 6px transparent}}
/* test call */
.va-dial{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 0 8px}
.va-call-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:116px;height:116px;border:0;border-radius:50%;background:var(--va-sprout);color:#fff;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(47,143,87,.28);transition:transform .12s,background-color .15s}
.va-call-btn:hover{transform:scale(1.03)}
.va-call-btn:disabled{background:#b8c2bd;box-shadow:none;cursor:not-allowed}
.va-call-btn.is-live{background:var(--va-red);box-shadow:0 8px 24px rgba(194,58,58,.28)}
.va-call-btn.is-live svg{transform:rotate(135deg)}
.va-call-state{font-weight:500;color:var(--va-muted);min-height:1.6em;text-align:center}
.va-meter{width:180px;height:6px;border-radius:3px;background:var(--va-canvas);overflow:hidden}
.va-meter i{display:block;height:100%;width:0;background:var(--va-c2);transition:width .08s}
#va-chat{max-height:520px;overflow-y:auto}
/* login */
.va-login-body{min-height:100vh;display:grid;place-items:center}
.va-login{width:min(380px,100%);padding:16px}
.va-login form{display:flex;flex-direction:column;gap:10px;padding:26px}
.va-login .va-brand{margin-bottom:8px}
.va-login input{min-height:42px;padding:6px 12px;border:1px solid #cdd6d1;border-radius:10px}
.va-login input:focus{border-color:var(--va-sprout);box-shadow:0 0 0 3px var(--va-tint);outline:0}
@media (prefers-reduced-motion:reduce){.va-dot{animation:none}.va-call-btn{transition:none}}
.va-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.va-tabs a{white-space:nowrap}
@media (max-width:600px){.va-tabs a{padding:7px 12px}.va-top{gap:12px}}
.va-pre{margin:8px 0 0;padding:12px;border-radius:10px;background:var(--va-canvas);font-size:12px;line-height:1.5;overflow-x:auto;white-space:pre}
.va-mini label{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;font-size:13px;color:var(--va-muted)}
.va-mini input{min-height:38px;padding:4px 10px;border:1px solid #cdd6d1;border-radius:8px;color:var(--va-leaf)}
.va-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.va-cols>*{min-width:0}
.va-kv td code{word-break:break-all;white-space:normal}
.va-mini input{width:100%;min-width:0;box-sizing:border-box}
.va-row2>*{min-width:0}

/* ---------- v1.7 shell: left sidebar ---------- */
:root{--va-leaf:#12352a;--va-sprout:#2f8f57;--va-sprout-dk:#24744a;--va-tint:#e8f3ec;--va-line:#e1e7e3;--va-muted:#5d6b64;--va-red:#c23a3a}
body{font-family:Inter,"Hind Siliguri",system-ui,sans-serif;color:var(--va-leaf)}
.va-shell{display:flex;min-height:100vh}
.va-shell>.va-admin{flex:1;min-width:0;margin:0 auto}
.va-side{position:sticky;top:0;height:100vh;width:236px;flex:0 0 236px;display:flex;flex-direction:column;gap:18px;padding:20px 14px;background:#fff;border-right:1px solid var(--va-line);font-size:14px}
.va-side .va-brand{padding:0 8px}
.va-logo-img{width:34px;height:34px;border-radius:9px;flex:none}
.va-side .va-title{font-size:17px;font-weight:700;line-height:1.2}
.va-nav{display:flex;flex-direction:column;gap:2px}
.va-nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--va-muted);font-weight:500;text-decoration:none;white-space:nowrap}
.va-nav a svg{width:18px;height:18px;flex:none}
.va-nav a:hover{background:var(--va-canvas);color:var(--va-leaf)}
.va-nav a.is-on{background:var(--va-tint);color:var(--va-sprout-dk);font-weight:600}
.va-nav a:focus-visible,.va-side button:focus-visible{outline:2px solid var(--va-sprout);outline-offset:2px}
.va-side .va-logout{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 8px 0;border-top:1px solid var(--va-line)}
.va-ver{font-size:12px;color:var(--va-muted)}
.va-admin .va-h1{margin:0;font-size:22px;font-weight:700;line-height:1.25;color:var(--va-leaf)}
.va-top-extra{margin-left:auto}
.va-sect{display:flex;align-items:center;gap:12px;margin:26px 0 12px;font-size:15px;font-weight:600}
.va-codes{display:grid;grid-template-columns:3fr 2fr;gap:14px;margin-top:14px}
.va-codes>*{min-width:0}
.va-code-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--va-muted)}
.va-rec{display:inline-block;padding:0 6px;border-radius:5px;background:#fbeaea;color:var(--va-red);font-size:10.5px;font-weight:700;letter-spacing:.04em;vertical-align:1px}
@media (max-width:1000px){.va-codes{grid-template-columns:1fr}}
@media (max-width:860px){
  .va-shell{flex-direction:column}
  .va-side{position:sticky;z-index:20;height:auto;width:auto;flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--va-line)}
  .va-side .va-brand{padding:0}
  .va-side .va-logout{margin:0 0 0 auto;padding:0;border:0;gap:10px}
  .va-nav{order:3;flex-basis:100%;flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px}
  .va-nav a{padding:7px 11px}
  .va-top-extra{margin-left:0;max-width:100%}
}
.va-shell>.va-admin{width:100%}
.va-seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.va-seg a{white-space:nowrap}
.va-pre{max-width:100%}