/* ============================================================
   EASY FORWARD — COMPONENT PRIMITIVES  (shared)
   Depends on tokens.css
   ============================================================ */

/* ---------- BUTTON ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:600;
  font-size:14px;line-height:1;height:40px;padding:0 16px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;
  white-space:nowrap;transition:background var(--dur-2) var(--ease-standard),border-color var(--dur-2) var(--ease-standard),
  box-shadow var(--dur-2) var(--ease-standard),color var(--dur-2) var(--ease-standard);background:none;color:var(--text)}
.btn svg{width:16px;height:16px}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:var(--r-sm)}
.btn-lg{height:48px;padding:0 22px;font-size:15px}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover,.btn-primary.s-hover{background:var(--accent-hover)}
.btn-primary:active,.btn-primary.s-active{background:var(--accent-active)}
.btn-secondary{background:var(--surface);border-color:var(--border-strong);color:var(--text)}
.btn-secondary:hover,.btn-secondary.s-hover{background:var(--surface-sunken);border-color:var(--text-3)}
.btn-secondary:active,.btn-secondary.s-active{background:var(--surface-sunken);border-color:var(--text-3)}
.btn-ghost{background:none;color:var(--text-2)}
.btn-ghost:hover,.btn-ghost.s-hover{background:var(--surface-sunken);color:var(--text)}
.btn-ghost:active,.btn-ghost.s-active{background:var(--border)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover,.btn-danger.s-hover{filter:brightness(.93)}
.btn:focus-visible,.btn.s-focus{outline:none;box-shadow:0 0 0 3px var(--ring)}
.btn-danger.s-focus,.btn-danger:focus-visible{box-shadow:0 0 0 3px var(--danger-ring)}
.btn:disabled,.btn.s-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.spin-inline{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--r-full);
  animation:spin .7s linear infinite;opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- INPUT ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--text)}
.field label .req{color:var(--danger)}
.input-wrap{position:relative;display:flex;align-items:center}
.input{width:100%;height:40px;padding:0 12px;font-family:var(--font-sans);font-size:14px;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);transition:border-color var(--dur-2) var(--ease-standard),box-shadow var(--dur-2) var(--ease-standard)}
.input::placeholder{color:var(--text-3)}
.input:hover{border-color:var(--border-strong)}
.input:focus,.input.s-focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.input:disabled,.input.s-disabled{background:var(--surface-sunken);color:var(--text-3);cursor:not-allowed}
.input.s-error,.input[aria-invalid="true"]{border-color:var(--danger)}
.input.s-error.s-focus{box-shadow:0 0 0 3px var(--danger-ring)}
.input-wrap .lead{position:absolute;left:11px;color:var(--text-3);display:flex;pointer-events:none}
.input-wrap .lead svg{width:16px;height:16px}
.input-wrap.has-lead .input{padding-left:36px}
.help{font-size:12px;color:var(--text-3)}
.help.err{color:var(--danger);display:flex;align-items:center;gap:5px}
.help.err svg{width:13px;height:13px}
textarea.input{height:auto;padding:10px 12px;line-height:1.5;resize:vertical;font-family:var(--font-sans)}

/* ---------- SELECT ---------- */
.select{position:relative}
.select .input{padding-right:38px;cursor:pointer;display:flex;align-items:center;background:var(--surface)}
.select .chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.select .chev svg{width:16px;height:16px;display:block}
.select-val{color:var(--text)}
.select-ph{color:var(--text-3)}
.menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:6px;z-index:10}
.menu .opt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:var(--r-sm);
  font-size:14px;color:var(--text);cursor:pointer}
.menu .opt:hover,.menu .opt.hover{background:var(--surface-sunken)}
.menu .opt.sel{color:var(--accent);font-weight:600}
.menu .opt.sel svg{width:16px;height:16px}

/* ---------- CHECKBOX / RADIO ---------- */
.opt-row{display:flex;gap:10px;align-items:flex-start}
.opt-row .txt{display:flex;flex-direction:column;gap:1px}
.opt-row .txt b{font-size:14px;font-weight:500;color:var(--text);line-height:1.35}
.opt-row .txt span{font-size:12.5px;color:var(--text-3)}
.box{width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);
  display:flex;align-items:center;justify-content:center;flex:none;transition:all var(--dur-2) var(--ease-standard);margin-top:1px}
.box svg{width:13px;height:13px;color:#fff;opacity:0}
.box.checked,.box.indet{background:var(--accent);border-color:var(--accent)}
.box.checked svg,.box.indet svg{opacity:1}
.box.s-focus{box-shadow:0 0 0 3px var(--ring)}
.box.s-error{border-color:var(--danger)}
.box.s-disabled{background:var(--surface-sunken);border-color:var(--border);cursor:not-allowed}
.box.checked.s-disabled{background:var(--border-strong);border-color:var(--border-strong)}
.radio{width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:var(--r-full);background:var(--surface);
  display:flex;align-items:center;justify-content:center;flex:none;transition:all var(--dur-2) var(--ease-standard);margin-top:1px}
.radio i{width:8px;height:8px;border-radius:var(--r-full);background:var(--accent);transform:scale(0);transition:transform var(--dur-2) var(--ease-standard)}
.radio.sel{border-color:var(--accent)}
.radio.sel i{transform:scale(1)}
.radio.s-focus{box-shadow:0 0 0 3px var(--ring)}
.radio.s-disabled{background:var(--surface-sunken);border-color:var(--border)}
.radio.sel.s-disabled i{background:var(--border-strong)}

/* ---------- TOGGLE ---------- */
.toggle{width:38px;height:21px;border-radius:var(--r-full);background:var(--surface-sunken);border:1px solid var(--border-strong);
  position:relative;cursor:pointer;transition:all var(--dur-2) var(--ease-standard);flex:none}
.toggle i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:var(--r-full);background:#fff;box-shadow:var(--sh-sm);
  transition:transform var(--dur-2) var(--ease-standard)}
.toggle.on{background:var(--accent);border-color:var(--accent)}
.toggle.on i{transform:translateX(17px)}
.toggle.s-focus{box-shadow:0 0 0 3px var(--ring)}
.toggle.s-disabled{opacity:.5;cursor:not-allowed}

/* ---------- BADGE ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:3px 10px 3px 8px;border-radius:var(--r-full);
  border:1px solid;line-height:1.45;white-space:nowrap}
.badge .bd{width:7px;height:7px;border-radius:var(--r-full);flex:none}
.badge .ct{font-family:var(--font-mono);font-size:11px;opacity:.7}
.badge-solid{border:none;color:#fff;padding:4px 11px}
.badge-green{background:var(--st-green-bg);border-color:var(--st-green-bd);color:var(--st-green-tx)}
.badge-green .bd{background:var(--st-green-bd)}
.badge-amber{background:var(--st-amber-bg);border-color:var(--st-amber-bd);color:var(--st-amber-tx)}
.badge-amber .bd{background:var(--st-amber-bd)}
.badge-red{background:var(--st-red-bg);border-color:var(--st-red-bd);color:var(--st-red-tx)}
.badge-red .bd{background:var(--st-red-bd)}
.badge-blue{background:var(--st-blue-bg);border-color:var(--st-blue-bd);color:var(--st-blue-tx)}
.badge-blue .bd{background:var(--st-blue-bd)}
.badge-gray{background:var(--st-gray-bg);border-color:var(--st-gray-bd);color:var(--st-gray-tx)}
.badge-gray .bd{background:var(--st-gray-bd)}
html[data-theme="dark"] .badge-green{background:rgba(76,175,80,.14);color:#9FD8A2}
html[data-theme="dark"] .badge-amber{background:rgba(255,183,3,.14);color:#FFD566}
html[data-theme="dark"] .badge-red{background:rgba(229,57,53,.16);color:#FF9C99}
html[data-theme="dark"] .badge-blue{background:rgba(25,118,210,.18);color:#90C4F2}
html[data-theme="dark"] .badge-gray{background:rgba(144,164,174,.16);color:#B8C6CE}

/* ---------- TAG ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:4px 6px 4px 11px;border-radius:var(--r-md);
  background:var(--surface-sunken);border:1px solid var(--border);color:var(--text);line-height:1.4}
.tag.no-x{padding:4px 11px}
.tag .dot{width:7px;height:7px;border-radius:var(--r-full);flex:none}
.tag .x{width:18px;height:18px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-3);transition:all var(--dur-2) var(--ease-standard)}
.tag .x:hover{background:var(--border);color:var(--text)}
.tag .x svg{width:12px;height:12px}
.tag.sel{background:var(--teal-50);border-color:var(--teal-300);color:var(--teal-700)}
html[data-theme="dark"] .tag.sel{background:rgba(5,167,160,.16);border-color:var(--teal-700);color:var(--teal-300)}
.tag.s-disabled{opacity:.5}

/* ---------- AVATAR ---------- */
.av{border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;
  background:var(--teal-500);position:relative;flex:none;font-family:var(--font-sans)}
.av.sm{width:28px;height:28px;font-size:11px}
.av.md{width:36px;height:36px;font-size:13px}
.av.lg{width:48px;height:48px;font-size:16px}
.av.navy{background:var(--navy-600)}
.av.amber{background:var(--amber-500);color:var(--navy-900)}
.av .st{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:var(--r-full);border:2px solid var(--surface)}
.av-img{background:repeating-linear-gradient(45deg,var(--surface-sunken),var(--surface-sunken) 5px,var(--border) 5px,var(--border) 10px);
  color:var(--text-3);font-family:var(--font-mono);font-size:9px}
.av-group{display:flex}
.av-group .av{border:2px solid var(--surface);margin-left:-10px}
.av-group .av:first-child{margin-left:0}
.av-group .more{background:var(--surface-sunken);color:var(--text-2);font-size:12px}

/* ---------- TOOLTIP ---------- */
.tip-host{position:relative;display:inline-flex}
.tip{position:absolute;background:var(--navy-900);color:#fff;font-size:12.5px;font-weight:500;padding:6px 10px;border-radius:var(--r-sm);
  white-space:nowrap;box-shadow:var(--sh-md);z-index:20;pointer-events:none}
html[data-theme="dark"] .tip{background:#000;border:1px solid var(--border)}
.tip::after{content:"";position:absolute;width:8px;height:8px;background:inherit;transform:rotate(45deg)}
.tip.top{bottom:calc(100% + 9px);left:50%;transform:translateX(-50%)}
.tip.top::after{bottom:-4px;left:50%;margin-left:-4px}
.tip.bottom{top:calc(100% + 9px);left:50%;transform:translateX(-50%)}
.tip.bottom::after{top:-4px;left:50%;margin-left:-4px}
.tip-static{opacity:1}
.tip-hover{opacity:0;transition:opacity var(--dur-2) var(--ease-standard)}
.tip-host:hover .tip-hover{opacity:1}

/* ---------- SPINNER ---------- */
.spin{border-radius:var(--r-full);border:2.5px solid var(--border);border-top-color:var(--accent);animation:spin .7s linear infinite}
.spin.sm{width:18px;height:18px;border-width:2px}
.spin.md{width:26px;height:26px}
.spin.lg{width:38px;height:38px;border-width:3px}

/* ---------- DIVIDER ---------- */
.divider{height:1px;background:var(--border);border:none;width:100%}
.divider-lbl{display:flex;align-items:center;gap:14px;color:var(--text-3);font-family:var(--font-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;width:100%}
.divider-lbl::before,.divider-lbl::after{content:"";height:1px;background:var(--border);flex:1}
.divider-v{width:1px;background:var(--border);align-self:stretch;min-height:32px}

/* ---------- TABLE PATTERN ---------- */
.tbl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-sm);overflow:hidden}
.tbl-toolbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between}
.tbl-filters{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.tbl-toolbar .tbl-search{position:relative;width:300px;max-width:100%}
.tbl-toolbar .tbl-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-3)}
.tbl-toolbar .tbl-search input{width:100%;height:38px;padding:0 12px 0 36px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);font-family:var(--font-sans);font-size:13.5px;color:var(--text)}
.tbl-toolbar .tbl-search input::placeholder{color:var(--text-3)}
.tbl-toolbar .tbl-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);background:var(--surface)}
.tbl-toolbar .spacer{flex:1}
.filter-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px;border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:13.5px;font-weight:500;cursor:pointer;
  font-family:var(--font-sans);transition:all var(--dur-2) var(--ease-standard);white-space:nowrap}
.filter-btn:hover{border-color:var(--border-strong);color:var(--text)}
.filter-btn svg{width:15px;height:15px;color:var(--text-3)}
.filter-btn.active{border-color:var(--accent);background:var(--teal-50);color:var(--teal-700)}
html[data-theme="dark"] .filter-btn.active{background:rgba(5,167,160,.14);color:var(--teal-300)}
.filter-btn .fct{font-family:var(--font-mono);font-size:11px;background:var(--accent);color:var(--on-accent);border-radius:var(--r-full);padding:0 6px;font-weight:600}

.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl thead th{text-align:left;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);height:42px;padding:0 16px;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap;user-select:none}
table.tbl thead th.sortable{cursor:pointer}
table.tbl thead th.sortable:hover{color:var(--text-2)}
table.tbl thead th .th-in{display:inline-flex;align-items:center;gap:5px}
table.tbl thead th .th-in svg{width:13px;height:13px;opacity:.7}
table.tbl thead th.sorted{color:var(--accent)}
table.tbl tbody td{height:44px;padding:0 16px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;white-space:nowrap}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
table.tbl tbody tr:hover{background:var(--surface-sunken)}
.cell-id{font-family:var(--font-mono);font-size:13px;color:var(--text);font-weight:500}
.cell-main{font-weight:600;color:var(--text);line-height:1.25}
.cell-sub{font-size:12px;color:var(--text-3);line-height:1.3}
.cell-stack{display:flex;flex-direction:column;gap:1px}
.cell-route{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:13px;color:var(--text-2)}
.cell-route svg{width:14px;height:14px;color:var(--accent)}
.cell-time{font-family:var(--font-mono);font-size:12.5px;color:var(--text-3)}
.col-check{width:44px;padding-left:18px!important}
.col-actions{width:96px;text-align:right}
.row-actions{display:inline-flex;align-items:center;gap:2px;justify-content:flex-end}
.row-actions .ia{width:30px;height:30px;border-radius:var(--r-sm);border:none;background:none;color:var(--text-3);display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer;transition:all var(--dur-2) var(--ease-standard)}
.row-actions .ia svg{width:16px;height:16px}
.row-actions .ia:hover{background:var(--surface);color:var(--accent);box-shadow:var(--sh-xs)}
.row-actions .ia.peek{opacity:0}
table.tbl tbody tr:hover .row-actions .ia.peek{opacity:1}

.tbl-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);
  border-top:1px solid var(--border);flex-wrap:wrap}
.tbl-foot .meta{font-size:13px;color:var(--text-3)}
.tbl-foot .meta b{color:var(--text-2);font-weight:600;font-family:var(--font-mono)}
.pager{display:flex;align-items:center;gap:4px}
.pager button{min-width:32px;height:32px;padding:0 8px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);font-family:var(--font-mono);font-size:13px;cursor:pointer;transition:all var(--dur-2) var(--ease-standard)}
.pager button:hover:not(:disabled){border-color:var(--border-strong);color:var(--text)}
.pager button.cur{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager .ell{color:var(--text-3);padding:0 2px}
.rows-sel{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-3)}
.bulkbar{display:flex;align-items:center;gap:var(--sp-3);padding:10px var(--sp-5);background:var(--teal-50);border-bottom:1px solid var(--teal-200);font-size:13.5px;color:var(--teal-800)}
html[data-theme="dark"] .bulkbar{background:rgba(5,167,160,.12);border-color:var(--teal-800);color:var(--teal-200)}
.bulkbar b{font-weight:700}
.bulkbar .spacer{flex:1}