/* Settings › Taxes ( V2 ): rate tables, VAT country rates and the Canada grid.
   Sits inside .ecst-wrap, so --ecst-accent already resolves to var(--ec-brand). */

.ectx-intro { margin:0 0 10px; font-size:13px; color:var(--ecv2-g600); }

/* Frame: the border lives on a wrapper, not the collapsed table. With border-collapse the last
   row's light border-bottom beat the table's own bottom edge ( the template row is the real
   :last-child ), so the frame looked open at the bottom. The wrapper also scrolls sideways
   when the inputs no longer fit, instead of squeezing them. */
.ectx-frame { background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); box-shadow:0 1px 2px rgba(0,0,0,.05); overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.ectx-frame[hidden] { display:none; }
.ectx-frame > .ectx-table { margin:0; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.ectx-frame > .ectx-table tbody tr { border-bottom:0; border-top:1px solid var(--ecv2-g100); }
.ectx-frame > .ectx-table tbody tr:first-child { border-top:0; }
.ectx-table tbody td { padding:8px 12px; }
.ectx-table .ecv2-select { width:100%; min-width:150px; max-width:280px !important; }
.ectx-geo-name { font-size:13px; font-weight:500; color:var(--ecv2-g800); }
.ectx-group { font-size:12px; color:var(--ecv2-g500); white-space:nowrap; }
/* rate inputs keep an editable width; the frame scrolls rather than shrinking them */
.ectx-in { min-width:108px; max-width:130px; }
.ectx-in .ecv2-input { height:30px; padding:0 8px; min-width:64px; }
.ectx-col-rate { width:150px; }
.ectx-col-toggle { width:130px; }
.ectx-actions { text-align:right; white-space:nowrap; width:1%; }
.ectx-actions .ecst-state { display:inline-block; margin-right:6px; vertical-align:middle; }
.ectx-delete { padding:4px 6px !important; color:var(--ecv2-g400); vertical-align:middle; }
.ectx-delete:hover { color:var(--ecv2-danger); background:var(--ecv2-g100); }
.ectx-delete .dashicons { font-size:16px; width:16px; height:16px; }
.ectx-empty { margin:10px 2px 0; font-size:13px; color:var(--ecv2-g500); }
.ectx-add { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--ecv2-g100); }
.ectx-add .ecv2-select { max-width:280px !important; }
.ectx-add-btn { background:var(--ecst-accent) !important; border-color:var(--ecst-accent) !important; color:var(--ecst-on-accent) !important; }
.ectx-add-btn:hover { filter:brightness(.94); }
.ectx-add-btn:disabled { opacity:.6; cursor:default; }
.ectx-add .ecst-state { font-size:12px; }

/* Inline save ( ✓ ): space is always reserved so the columns never jump; visible only while the row is dirty */
.ectx-save { visibility:hidden; width:30px; height:30px; padding:0 !important; justify-content:center; vertical-align:middle; margin-right:2px; background:var(--ecst-accent) !important; border-color:var(--ecst-accent) !important; color:var(--ecst-on-accent) !important; }
.ectx-save .dashicons { font-size:20px; width:20px; height:20px; }
.ectx-save:hover { filter:brightness(.94); }
.ectx-save:focus-visible { outline:0; box-shadow:0 0 0 3px var(--ecst-accent-soft); }
.ectx-row.is-dirty .ectx-save, .ectx-row.is-saving .ectx-save { visibility:visible; }
.ectx-row.is-saving .ectx-save { opacity:.55; cursor:progress; }
.ectx-row.is-pending .ectx-save { box-shadow:0 0 0 3px var(--ecst-accent-soft); animation:ectx-nudge 1.6s ease-in-out 2; }
@keyframes ectx-nudge { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.12); } }
.ectx-table .ecv2-select.is-dirty { border-color:var(--ecv2-amber) !important; }
.ecst-state.is-pending { color:#b45309; }
.ectx-row.is-dirty > td { background:var(--ecv2-amber-light); }
@media (prefers-reduced-motion:reduce) { .ectx-row.is-pending .ectx-save { animation:none; } }

/* toggles reuse the engine's .ecst-toggle; .ectx-toggle only opts them out of the row autosave */
.ectx-toggle { vertical-align:middle; }

/* Narrow: state / country / VAT rows become cards ( name on top, rate + ✓ + delete below ) so the ✓ never scrolls out of view. */
.ectx-rates { container-type:inline-size; container-name:ectx-rates; }
@container ectx-rates (max-width:520px) {
	.ectx-rates .ectx-frame { overflow:hidden; }
	.ectx-rates .ectx-table, .ectx-rates .ectx-table tbody { display:block; width:100%; }
	.ectx-rates .ectx-table thead { display:none; }
	.ectx-rates .ectx-table tbody tr.ectx-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 12px; }
	.ectx-rates .ectx-table tbody tr.ectx-row[hidden] { display:none; }
	.ectx-rates .ectx-table tbody tr.ectx-row.is-dirty { background:var(--ecv2-amber-light); }
	.ectx-rates .ectx-table tbody td { display:block; padding:0; background:transparent !important; }
	.ectx-rates .ectx-table tbody td:first-child { flex:1 1 100%; }
	.ectx-rates .ectx-table .ecv2-select { min-width:0; max-width:none !important; }
	.ectx-rates .ectx-toggle-cell { display:flex !important; align-items:center; gap:6px; }
	.ectx-rates .ectx-toggle-cell:before { content:attr(data-label); font-size:11.5px; color:var(--ecv2-g500); }
	.ectx-rates .ectx-actions { margin-left:auto; width:auto; }
	.ectx-rates .ectx-actions .ecst-state { min-width:0; }
}

/* Canada grid */
.ectx-canada { container-type:inline-size; container-name:ectx-canada; }
.ectx-canada-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; font-size:13px; font-weight:500; color:var(--ecv2-g700); }
.ectx-canada-bar .ecv2-select { max-width:220px !important; }
.ectx-canada-bar .ectx-hint { font-weight:400; font-size:12px; color:var(--ecv2-g500); }
.ectx-canada-table tbody td { padding:8px 10px; }
.ectx-canada-table .ectx-prov { font-weight:500; color:var(--ecv2-g800); min-width:110px; }
.ectx-canada-table .ectx-col-rate { width:auto; }
.ectx-row.is-off .ectx-in { opacity:.45; }
.ectx-row.is-off .ectx-in:focus-within, .ectx-row.is-off .ectx-in.is-dirty { opacity:1; }

/* Narrow: one card per province, GST / PST / HST side by side under the name. */
@container ectx-canada (max-width:700px) {
	.ectx-canada-frame { overflow:hidden; }
	.ectx-canada-table, .ectx-canada-table tbody { display:block; width:100%; }
	.ectx-canada-table thead { display:none; }
	.ectx-canada-table tbody tr.ectx-row { display:flex; flex-wrap:wrap; align-items:center; gap:0 10px; padding:10px 12px; }
	.ectx-canada-table tbody tr.ectx-row:after { content:""; order:4; flex-basis:100%; height:0; } /* line break between the name line and the rates */
	.ectx-canada-table tbody td { display:block; padding:0; background:transparent !important; }
	.ectx-canada-table tbody tr.ectx-row.is-dirty { background:var(--ecv2-amber-light); }
	.ectx-canada-table .ectx-prov { order:1; flex:1 1 auto; min-width:0; }
	.ectx-canada-table .ectx-collect-cell { order:2; display:flex; align-items:center; gap:6px; }
	.ectx-canada-table .ectx-collect-cell:before { content:attr(data-label); font-size:11.5px; color:var(--ecv2-g500); }
	.ectx-canada-table .ectx-actions { order:3; width:auto; }
	.ectx-canada-table .ectx-rate-cell { order:5; flex:1 1 90px; min-width:90px; margin-top:8px; }
	.ectx-canada-table .ectx-rate-cell:before { content:attr(data-label); display:block; margin-bottom:3px; font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ecv2-g500); }
	.ectx-canada-table .ectx-rate-cell .ectx-in { min-width:0; max-width:none; width:100%; }
	.ectx-canada-table .ectx-actions .ecst-state { min-width:0; }
}

@media ( max-width: 782px ) {
	.ectx-add .ecv2-select { max-width:100% !important; }
	.ectx-col-rate, .ectx-col-toggle { width:auto; }
}

/* ==================================================================
   Rate tables, 6.0.0: a saved row reads as text with Edit / Delete on
   hover; editing swaps the fields into the same columns; delete asks
   in the table; adding happens in the last row.
================================================================== */
/* 6.0.2: only the state and country tables have the resting view; the VAT per country rows keep their fields and ✓ */
.ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row .ectx-edit, .ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row .ectx-in, .ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row .ectx-edit-actions { display:none; }
.ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row.is-editing .ectx-edit, .ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row.is-editing .ectx-in { display:inline-flex; }
.ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row.is-editing select.ectx-edit { display:block; width:100%; max-width:320px; }
.ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row.is-editing .ectx-edit-actions { display:inline-flex; align-items:center; gap:6px; }
.ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row.is-editing .ectx-view, .ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row.is-editing .ectx-row-actions { display:none; }

.ectx-rates .ectx-view { font-size:13.5px; color:var(--ecv2-g900); cursor:text; }
.ectx-rates .ectx-view-rate { font-variant-numeric:tabular-nums; }
.ectx-rates .ectx-view-unit { color:var(--ecv2-g400); margin-left:1px; }
.ectx-rates .ectx-row > td { vertical-align:middle; }

/* row actions: quiet until the row is hovered or something in it has focus */
.ectx-rates .ectx-row-actions { display:inline-flex; gap:2px; opacity:0; transition:opacity var(--ecv2-tr); }
.ectx-rates .ectx-row:hover .ectx-row-actions, .ectx-rates .ectx-row:focus-within .ectx-row-actions { opacity:1; }
.ectx-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--ecv2-g400); cursor:pointer; }
.ectx-icon-btn:hover { background:var(--ecv2-g100); color:var(--ecv2-g700); }
.ectx-icon-btn.ectx-delete:hover { background:var(--ecv2-danger-light, #fee2e2); color:#b91c1c; }
.ectx-icon-btn:focus-visible { outline:2px solid var(--ecst-accent, var(--ecv2-primary)); outline-offset:1px; opacity:1; }
.ectx-icon-btn .dashicons { font-size:17px; width:17px; height:17px; }

/* the editing row: a marker bar instead of a fully amber row */
.ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row.is-dirty > td { background:transparent; }
.ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row.is-editing > td { background:#fffdf7; }
.ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row.is-editing > td:first-child { box-shadow:inset 3px 0 0 0 #d97706; }
.ectx-rates:where([data-kind="state"],[data-kind="country"]) .ectx-row.is-editing.is-dirty > td:first-child { box-shadow:inset 3px 0 0 0 #d97706; }
.ectx-rates .ectx-save.ectx-save-text { visibility:visible; width:auto; height:32px; padding:0 14px !important; margin:0; }
.ectx-rates .ectx-save.ectx-save-text .dashicons { display:none; }

/* add: a dashed row at the bottom of the table, opening into the same columns */
.ectx-addopen-row > td { padding:0 !important; border-top:1px dashed var(--ecv2-g200); }
.ectx-addopen { display:flex; align-items:center; gap:8px; width:100%; padding:11px 14px; border:0; background:transparent; color:var(--ecst-accent, var(--ecv2-primary)); font-size:13px; font-weight:600; text-align:left; cursor:pointer; }
.ectx-addopen:hover { background:var(--ecv2-g50); }
.ectx-addopen-ic { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; background:var(--ecst-accent-soft, var(--ecv2-primary-light)); }
.ectx-addopen-ic .dashicons { font-size:14px; width:14px; height:14px; }
.ectx-addrow > td { background:#fbfdfe; border-top:1px solid var(--ecv2-g200); }
.ectx-addrow .ecv2-select { max-width:320px; }
.ectx-addrow .ectx-edit-actions { display:inline-flex; align-items:center; gap:6px; }

/* delete asks in place */
.ectx-confirm > td { background:#fef6f6; box-shadow:inset 3px 0 0 0 var(--ecv2-danger, #dc2626); }
.ectx-confirm-in { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ectx-confirm-ic { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:#fee2e2; color:#b91c1c; flex-shrink:0; }
.ectx-confirm-ic .dashicons { font-size:16px; width:16px; height:16px; }
.ectx-confirm-text { flex:1 1 220px; min-width:0; font-size:13px; color:#7f1d1d; }
.ectx-confirm-text b { color:#7f1d1d; }
.ectx-confirm-text span { color:#9b4444; }
.ectx-confirm-go { background:var(--ecv2-danger, #dc2626) !important; border-color:var(--ecv2-danger, #dc2626) !important; color:#fff !important; }
.ectx-confirm-go:hover { filter:brightness(.94); }

/* nothing added yet */
.ectx-rates .ectx-empty { display:flex; flex-direction:column; align-items:center; gap:7px; margin:10px 0 0; padding:22px; border:1px dashed var(--ecv2-g300); border-radius:var(--ecv2-r); background:#fbfbfc; text-align:center; }
.ectx-rates .ectx-empty[hidden] { display:none; }
.ectx-rates .ectx-empty-ic { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:var(--ecv2-g100); color:var(--ecv2-g400); }
.ectx-rates .ectx-empty b { font-size:13.5px; color:var(--ecv2-g900); }
.ectx-rates .ectx-empty > span:not(.ectx-empty-ic) { font-size:12.5px; color:var(--ecv2-g500); max-width:52ch; line-height:1.5; }

@media (max-width:760px) {
	.ectx-rates .ectx-row-actions { opacity:1; }
	.ectx-rates .ectx-row.is-editing select.ectx-edit, .ectx-addrow .ecv2-select { max-width:none; }
	.ectx-confirm-in { align-items:flex-start; }
}