/* Інтеграції товарки (js/pages/ShopIntegrations.js), 08.11.2026.
   Лише змінні з :root у styles.css — темна тема підхоплюється сама. Префікс .shi- щоб не
   зачепити сусідні сторінки. */

.shi{} /* 12.11: на весь екран, як інші сторінки налаштувань */
.shi-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px;}
.shi-head-stat{display:flex; flex-direction:column; align-items:flex-end; line-height:1.1;}
.shi-head-stat b{font-size:26px; font-weight:800; color:var(--visa);}
.shi-head-stat span{font-size:12px; color:var(--slate);}

.shi-toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px;}
.shi-search{position:relative; flex:1 1 260px; max-width:380px;}
.shi-search input{width:100%; padding:9px 12px 9px 34px; border:1px solid var(--sky-line); border-radius:var(--radius-md); background:var(--paper); color:var(--ink); font:inherit;}
.shi-search input:focus{outline:none; border-color:var(--visa); box-shadow:0 0 0 3px var(--visa-soft);}
.shi-search-ico{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--slate); pointer-events:none;}
.shi-search-ico svg{width:16px; height:16px;}
.shi-chips{display:flex; flex-wrap:wrap; gap:6px;}
.shi-chip{border:1px solid var(--sky-line); background:var(--paper); color:var(--ink-soft); padding:6px 12px; border-radius:999px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s;}
.shi-chip:hover{background:var(--sky);}
.shi-chip.on{background:var(--visa); border-color:var(--visa); color:var(--visa-on, #fff);}
.shi-chip.sm{padding:3px 9px; font-size:12px;}
.shi-chip:disabled{opacity:.5; cursor:default;}

.shi-note{background:var(--amber-soft); color:var(--ink-soft); border-radius:var(--radius-md); padding:10px 14px; font-size:13px; margin-bottom:14px;}
.shi-alert{background:var(--stamp-soft); color:var(--stamp); border-radius:var(--radius-md); padding:10px 14px; font-size:13px; margin-bottom:14px; font-weight:600;}

.shi-group{margin-bottom:22px;}
.shi-group-title{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin:0 0 10px;}
.shi-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px;}

.shi-card{position:relative; display:flex; flex-direction:column; gap:10px; background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-card); cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s;}
.shi-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-pop); border-color:color-mix(in srgb, var(--visa) 35%, var(--sky-line));}
.shi-card.is-ok{border-color:color-mix(in srgb, var(--good) 40%, var(--sky-line));}
.shi-card.is-ok::before{content:''; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:0 3px 3px 0; background:var(--good);}
.shi-card.is-error::before{content:''; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:0 3px 3px 0; background:var(--stamp);}
.shi-card-top{display:flex; align-items:center; gap:12px;}
.shi-card-name{min-width:0; display:flex; flex-direction:column; gap:4px; align-items:flex-start;}
.shi-name{font-weight:700; font-size:14px; color:var(--ink);}
.shi-desc{font-size:12.5px; color:var(--slate); line-height:1.45; margin:0; flex:1;}
.shi-tile{flex:none; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; letter-spacing:-.02em; box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);}
.shi-conns{display:flex; flex-wrap:wrap; gap:5px;}
.shi-conn-tag{font-size:11.5px; padding:2px 8px; border-radius:999px; background:var(--good-soft); color:var(--good); font-weight:600;}
.shi-conn-tag.off{background:var(--sky); color:var(--slate);}
.shi-conn-tag.err{background:var(--stamp-soft); color:var(--stamp);}
.shi-card-foot{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; border-top:1px dashed var(--sky-line); padding-top:10px;}
.shi-soon{color:var(--amber); font-weight:600; line-height:1.3;}
.shi-ready{color:var(--good); font-weight:600;}
.shi-go{color:var(--visa); font-weight:700; white-space:nowrap;}

/* Панелі API і вебхуків */
.shi-panel{background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-lg); padding:20px; margin:26px 0; box-shadow:var(--shadow-card); scroll-margin-top:80px;}
.shi-panel-head{display:flex; gap:14px; align-items:flex-start; margin-bottom:14px;}
.shi-panel-head h3{margin:0 0 4px; font-size:16px; color:var(--ink);}
.shi-endpoint{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--sky); border-radius:var(--radius-md); padding:10px 12px; margin-bottom:14px;}
.shi-endpoint code{font-family:var(--font-mono); font-size:13px; color:var(--ink); word-break:break-all; flex:1; min-width:200px;}
.shi-method{font-family:var(--font-mono); font-size:11px; font-weight:700; background:var(--visa); color:var(--visa-on, #fff); padding:3px 7px; border-radius:6px;}
.shi-issue{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
.shi-issue input, .shi-issue select, .shi-hook-add input, .shi-inline input{flex:1 1 220px; padding:9px 12px; border:1px solid var(--sky-line); border-radius:var(--radius-md); background:var(--paper); color:var(--ink); font:inherit;}
.shi-issue select{flex:0 1 240px;}
.shi-newkey{border:2px solid var(--visa); background:var(--visa-soft); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:14px;}
.shi-newkey-title{font-weight:700; font-size:13px; color:var(--visa-ink); margin-bottom:8px;}
.shi-newkey-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.shi-newkey-row code{font-family:var(--font-mono); font-size:13.5px; background:var(--paper); padding:6px 10px; border-radius:8px; word-break:break-all; flex:1; min-width:220px; color:var(--ink);}

.shi-table-wrap{overflow-x:auto; margin-bottom:12px;}
.shi-table{width:100%; border-collapse:collapse; font-size:13px;}
.shi-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate); font-weight:700; padding:6px 8px; border-bottom:1px solid var(--sky-line);}
.shi-table td{padding:8px; border-bottom:1px solid var(--sky-line); color:var(--ink-soft); vertical-align:top;}
.shi-table tr.revoked td{opacity:.55;}
.shi-td-act{text-align:right; white-space:nowrap;}

.shi-docs{margin-top:16px;}
.shi-tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--sky-line);}
.shi-tabs button{border:0; background:none; padding:8px 12px; font:inherit; font-size:13px; font-weight:600; color:var(--slate); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.shi-tabs button.on{color:var(--visa); border-bottom-color:var(--visa);}
.shi-tabs .shi-tabs-copy{margin-left:auto; display:inline-flex; align-items:center; gap:5px;}
.shi-tabs-copy svg, .shi-endpoint .btn svg, .shi-newkey .btn svg, .shi-issue .btn svg, .shi-hook-add .btn svg, .shi-conn-tabs svg{width:14px; height:14px;}
.shi-code{background:var(--ink-invert); color:#e8f4ef; font-family:var(--font-mono); font-size:12.5px; line-height:1.55; padding:14px 16px; border-radius:0 0 var(--radius-md) var(--radius-md); overflow-x:auto; margin:0 0 10px; white-space:pre;}
.shi-fields{margin-top:10px;}
.shi-fields summary{cursor:pointer; font-weight:700; font-size:13px; color:var(--ink-soft); margin-bottom:8px;}
.shi-fields td.mono{white-space:nowrap; color:var(--ink); font-size:12px;}

/* Вебхуки */
.shi-hook{display:flex; gap:12px; align-items:flex-start; justify-content:space-between; border:1px solid var(--sky-line); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:10px;}
.shi-hook.off{opacity:.6;}
.shi-hook-main{min-width:0; display:flex; flex-direction:column; gap:6px;}
.shi-hook-url{font-family:var(--font-mono); font-size:13px; color:var(--ink); word-break:break-all;}
.shi-hook-events{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.shi-hook-main .hint a{margin-left:6px;}
.shi-hook-act{display:flex; gap:8px; align-items:center; flex:none;}
.shi-hook-add{display:flex; flex-wrap:wrap; gap:10px; align-items:center; border:1px dashed var(--sky-line); border-radius:var(--radius-md); padding:12px 14px;}
.shi-bad{color:var(--stamp);}
.shi-check{display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--ink-soft); cursor:pointer; font-weight:500;}

/* Перемикач */
.shi-switch{position:relative; display:inline-block; width:40px; height:22px; flex:none; cursor:pointer;}
.shi-switch input{opacity:0; width:0; height:0; position:absolute;}
.shi-switch span{position:absolute; inset:0; background:var(--sky-line); border-radius:999px; transition:background .18s;}
.shi-switch span::after{content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:var(--paper); box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .18s;}
.shi-switch input:checked + span{background:var(--good);}
.shi-switch input:checked + span::after{transform:translateX(18px);}
.shi-switch input:disabled + span{opacity:.5;}

/* Шухляда */
.shi-drawer{max-width:640px; width:min(640px, 100vw);}
.shi-drawer-title{display:flex; gap:12px; align-items:center;}
.shi-drawer-title h3{margin:0 0 2px; font-size:17px;}
.shi-conn-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;}
.shi-conn-tabs button{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--sky-line); background:var(--paper); color:var(--ink-soft); padding:6px 11px; border-radius:var(--radius-sm); font:inherit; font-size:13px; font-weight:600; cursor:pointer;}
.shi-conn-tabs button.on{border-color:var(--visa); background:var(--visa-soft); color:var(--visa-ink);}
.shi-dot{width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--slate);}
.shi-dot.ok{background:var(--good);} .shi-dot.err{background:var(--stamp);} .shi-dot.off{background:var(--sky-line);}
.shi-row2{display:flex; gap:14px; align-items:flex-end;}
.shi-row2 .field:first-child{flex:1;}
.shi-enabled{display:flex; flex-direction:column; align-items:flex-start;}
.shi-enabled .shi-switch{margin:8px 0;}
.shi-saved{margin-left:8px; font-size:11.5px; font-weight:700; color:var(--good); background:var(--good-soft); padding:1px 7px; border-radius:999px;}
.shi-clear{margin-left:8px; font-size:12px; font-weight:500;}
.shi-help{margin-top:4px; line-height:1.4;}
.shi-inline{display:flex; gap:8px; align-items:center;}
.shi-picked{font-size:13px; font-weight:600; color:var(--visa-ink); background:var(--visa-soft); border-radius:8px; padding:6px 10px; margin-bottom:6px;}
.shi-pick-list{display:flex; flex-direction:column; max-height:220px; overflow-y:auto; border:1px solid var(--sky-line); border-radius:var(--radius-sm); margin-top:6px;}
.shi-pick-list button{text-align:left; border:0; border-bottom:1px solid var(--sky-line); background:var(--paper); color:var(--ink-soft); padding:8px 10px; font:inherit; font-size:13px; cursor:pointer;}
.shi-pick-list button:hover{background:var(--sky);}
.shi-np-found{margin:6px 0 12px;}
.shi-pick{display:inline-block; margin:0 6px 6px 0; border:1px solid var(--sky-line); background:var(--paper); color:var(--ink-soft); padding:6px 10px; border-radius:var(--radius-sm); font:inherit; font-size:13px; cursor:pointer;}
.shi-pick.on{border-color:var(--good); background:var(--good-soft); color:var(--good); font-weight:600;}
.shi-test{border-radius:var(--radius-md); padding:10px 14px; font-size:13px; font-weight:600; margin-top:6px;}
.shi-test.ok{background:var(--good-soft); color:var(--good);}
.shi-test.bad{background:var(--stamp-soft); color:var(--stamp);}
.shi-foot{align-items:center;}
.shi-spacer{flex:1;}

@media (max-width:720px){
  .shi-head{flex-direction:column;}
  .shi-head-stat{align-items:flex-start;}
  .shi-grid{grid-template-columns:1fr;}
  .shi-panel{padding:14px;}
  .shi-hook{flex-direction:column;}
  .shi-drawer{min-width:0; width:100vw;}
  .shi-row2{flex-direction:column; align-items:stretch;}
  .shi-tabs .shi-tabs-copy{margin-left:0;}
}

/* ── Вигляд KeyCRM (09.11.2026): сторінка налаштувань — хлібні крихти, вкладки з циан-підкресленням,
   білі картки без рамки, пігулки статусів, циан-перемикачі. Кольори — лише --k-* (теми). ── */
.shi{font-family:var(--k-font); color:var(--k-text-2); max-width:none}
.shi .k-head{margin-bottom:4px}
.shi .k-refresh span{display:inline-flex}
.shi .k-search input{padding-left:36px}
.shi .k-search svg{pointer-events:none}
.shi-crumbs{display:flex; align-items:center; gap:8px; color:var(--k-muted); font-size:15px}
.shi-crumbs .k-title{margin:0}
.shi .shi-head-stat b{color:var(--k-cyan); font-size:22px}
.shi .shi-head-stat span{color:var(--k-muted)}
.shi-sub{margin:0 0 12px; color:var(--k-muted); font-size:13px}
.shi-ktabs{display:flex; flex-wrap:wrap; border-bottom:1px solid var(--k-border); margin-bottom:18px}
.shi-ktab{border:0; background:none; padding:12px 16px 11px; font:500 14px/1 var(--k-font); color:var(--k-text-2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px}
.shi-ktab:hover{color:var(--k-cyan)}
.shi-ktab.on{color:var(--k-cyan); border-bottom-color:var(--k-cyan)}
.shi .shi-group-title{color:var(--k-muted); font:700 12px/1.2 var(--k-font); letter-spacing:.04em}
.shi .shi-card{background:var(--k-card); border:0; border-radius:var(--k-radius-card); box-shadow:var(--k-shadow)}
.shi .shi-card:hover{transform:none; box-shadow:0 2px 10px rgba(0,0,0,.08)}
.shi .shi-card.is-ok,.shi .shi-card.is-error{border:0}
.shi .shi-card.is-ok::before{background:var(--k-st-done)}
.shi .shi-card.is-error::before{background:var(--k-danger-2)}
.shi .shi-name{color:var(--k-text)}
.shi .shi-desc{color:var(--k-muted)}
.shi .shi-tile{border-radius:var(--k-radius-card)}
.shi .shi-card .pill{border-radius:var(--k-radius); text-transform:uppercase; font:700 11px/1.3 var(--k-font); letter-spacing:.02em}
.shi .shi-card-foot{border-top:1px solid var(--k-gap)}
.shi .shi-ready{color:var(--k-st-done)}
.shi .shi-soon{color:var(--k-st-approval)}
.shi .shi-go{color:var(--k-cyan)}
.shi .shi-conn-tag{border-radius:var(--k-radius); background:var(--k-st-done-bg); color:var(--k-st-done)}
.shi .shi-conn-tag.off{background:var(--k-gap); color:var(--k-muted)}
.shi .shi-conn-tag.err{background:var(--k-card); color:var(--k-st-cancelled); box-shadow:inset 0 0 0 1px var(--k-st-cancelled)}
.shi .shi-note{background:var(--k-cyan-soft); color:var(--k-text-2); border-radius:var(--k-radius)}
.shi .shi-panel{background:var(--k-card); border:0; border-radius:var(--k-radius-card); box-shadow:var(--k-shadow)}
.shi .shi-panel-head h3{color:var(--k-text)}
.shi .shi-endpoint{background:var(--k-bg); border-radius:var(--k-radius)}
.shi .shi-endpoint code{color:var(--k-text)}
.shi .shi-method{background:var(--k-cyan); border-radius:3px}
.shi .shi-issue input,.shi .shi-issue select,.shi .shi-hook-add input,.shi .shi-inline input{background:var(--k-input); border:0; border-radius:var(--k-radius); color:var(--k-text)}
.shi .shi-table th{background:var(--k-bg); color:var(--k-muted); text-transform:none; letter-spacing:0; font:500 12.5px var(--k-font); padding:9px 10px; border-bottom:1px solid var(--k-border)}
.shi .shi-table td{border-bottom:1px solid var(--k-gap); color:var(--k-text-2); padding:10px}
.shi .shi-tabs{border-bottom-color:var(--k-border)}
.shi .shi-tabs button{color:var(--k-text-2); font-weight:500}
.shi .shi-tabs button.on{color:var(--k-cyan); border-bottom-color:var(--k-cyan)}
.shi .shi-hook{border:0; background:var(--k-card); box-shadow:var(--k-shadow); border-radius:var(--k-radius-card)}
.shi .shi-hook-url{color:var(--k-text)}
.shi .shi-hook-add{border-color:var(--k-border); border-radius:var(--k-radius-card)}
.shi .shi-switch span{background:var(--k-border)}
.shi .shi-switch span::after{background:#fff}
.shi .shi-switch input:checked + span{background:var(--k-cyan)}
.shi .btn-primary{background:var(--k-cyan); border-color:var(--k-cyan); color:#fff; border-radius:var(--k-radius)}
.shi .btn-outline,.shi .btn-ghost{border-radius:var(--k-radius)}
/* Шухляда інтеграції — поля #e6f7ff без рамки, вкладки підключень як чіпи */
.shi-drawer .field input:not([type="checkbox"]):not([type="radio"]),.shi-drawer .field select,.shi-drawer .field textarea{background:var(--k-input); border-color:transparent; border-radius:var(--k-radius); color:var(--k-text)}
.shi-drawer .shi-conn-tabs button{border-color:var(--k-border); background:var(--k-card); color:var(--k-text-2); border-radius:var(--k-radius)}
.shi-drawer .shi-conn-tabs button.on{border-color:var(--k-cyan); background:var(--k-cyan-soft); color:var(--k-cyan)}
.shi-drawer .shi-switch input:checked + span{background:var(--k-cyan)}
@media (max-width:720px){ .shi .k-spacer{display:none} }
.shi .shi-chip{border-color:var(--k-border); background:var(--k-card); color:var(--k-text-2); border-radius:var(--k-radius)}
.shi .shi-chip.on{background:var(--k-cyan); border-color:var(--k-cyan); color:#fff}

/* DeyDey (10.11.2026): інтеграції як у KeyCRM замовника — позначка «Є у KeyCRM», бета, обмін, Finmap, статуси за доставкою. */
.shi-pills{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.shi-kc{font-size:10.5px; font-weight:700; line-height:1; padding:4px 6px; border-radius:4px; background:#e6f7ff; color:#00a6f2; white-space:nowrap;}
.shi-beta{color:#7a74b2; font-weight:600; line-height:1.3;}
.shi-sync{font-size:11.5px; margin-top:-4px;}
.shi-ep-l{font-size:11px; color:var(--ink-3, #909399); white-space:nowrap;}
.shi-endpoint + .shi-endpoint{margin-top:-6px;}
.shi-fm{display:flex; flex-direction:column; gap:10px; margin:6px 0 12px; padding:12px; border:1px dashed var(--sky-line); border-radius:8px;}
.shi-fm-head{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.shi-fm select, .shi-dmap select{width:100%; min-width:180px;}
.shi-activity{display:flex; flex-direction:column; gap:6px; margin-top:12px; padding-top:10px; border-top:1px dashed var(--sky-line);}
.shi-act-row{font-size:12px; line-height:1.4;}
.shi-act-row.err{color:#cc5252;}
.shi-issue select{max-width:260px;}