/* integrations.css - extracted from mesh-PO_sheet.html */

.int-scroll { flex: 1; overflow-y: auto; padding: 32px 40px 56px; box-shadow: inset -1px 0 0 #e5e7eb; }
.int-container { max-width: 880px; margin: 0 auto; }
.int-header { margin-bottom: 28px; }
.int-title { font-size: 22px; font-weight: 700; color: #09090b; letter-spacing: -0.3px; line-height: 1.2; }
.int-subtitle { font-size: 13px; color: #71717a; margin-top: 6px; line-height: 1.5; }
.int-cat-label { font-size: 13px; font-weight: 500; color: #18181b; margin: 24px 0 10px; }
.int-cat-label:first-of-type { margin-top: 8px; }
.int-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: white; border: 1px solid #e4e4e7; border-radius: 10px; margin-bottom: 10px; transition: border-color 0.12s, box-shadow 0.12s; }
.int-card:hover { border-color: #d4d4d8; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.int-logo { width: 44px; height: 44px; border-radius: 10px; background: white; border: 1px solid #e4e4e7; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.int-logo svg { width: 26px; height: 26px; }
.int-body { flex: 1; min-width: 0; }
.int-name { font-size: 14px; font-weight: 600; color: #09090b; margin-bottom: 4px; }
.int-desc { font-size: 12px; color: #71717a; line-height: 1.5; max-width: 540px; }
.int-action { flex-shrink: 0; margin-left: 16px; }
.int-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 7px; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 0.12s, border-color 0.12s; font-family: inherit; }
.int-btn-connect { background: #4f6ef7; border: 1px solid #4f6ef7; color: white; }
.int-btn-connect:hover { background: #4060f0; border-color: #4060f0; }
.int-btn-reauth { background: white; border: 1px solid #e4e4e7; color: #18181b; }
.int-btn-reauth:hover { background: #fafafa; border-color: #d4d4d8; }
.int-card { cursor: pointer; }
.int-card:hover { border-color: #c7d2fe; }
.int-detail-scroll { flex: 1; overflow-y: auto; padding: 28px 32px 64px; }
.int-detail-container { max-width: 880px; margin: 0 auto; }
.int-detail-back { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border: 1px solid #e4e4e7; border-radius: 6px; background: white; font-size: 12px; color: #374151; cursor: pointer; font-family: inherit; margin-bottom: 18px; transition: background 0.12s, border-color 0.12s; }
.int-detail-back:hover { background: #f9fafb; border-color: #d1d5db; }
.int-detail-header { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: white; border: 1px solid #e4e4e7; border-radius: 10px; margin-bottom: 18px; }
.int-detail-logo { width: 44px; height: 44px; flex-shrink: 0; background: white; border: 1px solid #e4e4e7; border-radius: 9px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.int-detail-logo svg { width: 26px; height: 26px; display: block; }
.int-detail-titles { flex: 1; min-width: 0; }
.int-detail-name { font-size: 18px; font-weight: 700; color: #18181b; line-height: 1.2; }
.int-detail-status { font-size: 12px; color: #6b7280; margin-top: 3px; display: inline-flex; align-items: center; gap: 5px; }
.int-detail-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.int-detail-status.disconnected::before { background: #9ca3af; }
.int-detail-section { background: white; border: 1px solid #e4e4e7; border-radius: 10px; padding: 0 0 6px; margin-bottom: 18px; overflow: hidden; }
.int-detail-section-head { display: flex; align-items: center; padding: 16px 20px 10px; gap: 10px; }
.int-detail-section-icon { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.int-detail-section-icon svg { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.int-detail-section-title { font-size: 14.5px; font-weight: 700; color: #111827; flex: 1; }
.int-add-tmpl-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 9px; border: 1px solid #c7d2fe; background: white; color: #4f6ef7; border-radius: 6px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.12s; }
.int-add-tmpl-btn:hover { background: #eef2ff; }
.int-detail-section-sub { display: flex; align-items: center; gap: 9px; padding: 10px 16px; margin: 0 14px 14px; background: #eef2ff; border-radius: 7px; font-size: 12px; color: #4338ca; line-height: 1.5; }
.int-detail-section-sub svg { color: #4f6ef7; flex-shrink: 0; }
.int-tmpl-card { margin: 0 14px 12px; border: 1px solid #e4e4e7; border-radius: 8px; overflow: hidden; }
.int-tmpl-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: #f9fafb; cursor: pointer; transition: background 0.12s; }
.int-tmpl-head:hover { background: #f3f4f6; }
.int-tmpl-head > div:first-child { flex: 1; }
.int-tmpl-name { font-size: 13.5px; font-weight: 600; color: #111827; }
.int-tmpl-type { font-size: 11.5px; color: #71717a; margin-top: 2px; }
.int-tmpl-meta { font-size: 11.5px; color: #71717a; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.int-tmpl-meta-chev { transition: transform 0.18s; color: #9ca3af; }
.int-tmpl-card.expanded .int-tmpl-meta-chev { transform: rotate(180deg); }
.int-tmpl-body { display: none; padding: 14px 18px 14px; background: white; border-top: 1px solid #f3f4f6; }
.int-tmpl-card.expanded .int-tmpl-body { display: block; }
.int-tmpl-body-actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.int-tmpl-edit-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border: 1px solid #c7d2fe; background: white; color: #4f6ef7; border-radius: 6px; font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background 0.12s; }
.int-tmpl-edit-btn:hover { background: #eef2ff; }
.int-tmpl-header-line { font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 8px; }
.int-tmpl-body-text { font-size: 12.5px; color: #374151; line-height: 1.65; white-space: pre-wrap; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-height: 200px; overflow-y: auto; }
.int-tmpl-empty { padding: 28px 20px; text-align: center; color: #9ca3af; font-size: 12.5px; margin: 0 14px 14px; border: 1px dashed #e4e4e7; border-radius: 7px; }
.tmpl-modal { width: 720px; max-height: 86vh; }
.tmpl-modal-tabs { display: flex; gap: 0; padding: 0 24px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.tmpl-modal-tab { padding: 11px 4px; margin-right: 18px; font-size: 13px; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tmpl-modal-tab:hover { color: #374151; }
.tmpl-modal-tab.on { color: #4f6ef7; border-bottom-color: #4f6ef7; }
.tmpl-modal-body { padding: 18px 24px 8px; overflow-y: auto; flex: 1; min-height: 0; }
.tmpl-modal-label { font-size: 12.5px; font-weight: 600; color: #111827; margin-bottom: 6px; margin-top: 14px; }
.tmpl-modal-label:first-child { margin-top: 0; }
.tmpl-modal-hint { font-size: 11.5px; color: #6b7280; margin-bottom: 8px; line-height: 1.5; }
.tmpl-modal-input { width: 100%; padding: 9px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 13px; font-family: inherit; color: #111827; background: white; outline: none; transition: border-color 0.12s, box-shadow 0.12s; box-sizing: border-box; }
.tmpl-modal-input:focus { border-color: #4f6ef7; box-shadow: 0 0 0 3px rgba(79,110,247,0.10); }
.tmpl-modal-toolbar { display: flex; align-items: center; gap: 14px; padding: 8px 12px; background: #fafafa; border: 1px solid #e5e7eb; border-bottom: none; border-radius: 7px 7px 0 0; font-size: 12px; color: #374151; }
.tmpl-modal-tool { cursor: pointer; transition: color 0.12s; user-select: none; }
.tmpl-modal-tool:hover { color: #4f6ef7; }
.tmpl-modal-textarea { width: 100%; min-height: 220px; padding: 14px 14px 18px; border: 1px solid #e5e7eb; border-radius: 0 0 7px 7px; font-size: 13px; font-family: 'SF Mono', Menlo, Consolas, monospace; color: #111827; background: white; outline: none; resize: vertical; transition: border-color 0.12s, box-shadow 0.12s; box-sizing: border-box; line-height: 1.6; }
.tmpl-modal-textarea:focus { border-color: #4f6ef7; box-shadow: 0 0 0 3px rgba(79,110,247,0.10); }
.tmpl-modal-preview { padding: 16px; background: #fafaf7; border: 1px solid #e5e7eb; border-radius: 7px; font-size: 13px; line-height: 1.65; color: #111827; white-space: pre-wrap; min-height: 200px; }
.tmpl-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px; border-top: 1px solid #e5e7eb; flex-shrink: 0; background: #fafafa; }
.tmpl-modal-btn { padding: 6px 14px; border-radius: 6px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.tmpl-modal-btn.primary { background: #4f6ef7; color: white; border-color: #4f6ef7; }
.tmpl-modal-btn.primary:hover { background: #3d5bd9; }
.tmpl-modal-btn.secondary { background: white; color: #374151; border-color: #d1d5db; }
.tmpl-modal-btn.secondary:hover { background: #f9fafb; }
.int-btn-reauth .reauth-ico { color: #ea580c; display: flex; }
.int-btn-disconnect { background: white; border: 1px solid #e4e4e7; color: #71717a; }
.int-btn-disconnect:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
#internalPanel .data-tbl, #vendorPanel .data-tbl { font-size: 10.5px; }
#internalPanel .data-tbl thead th, #vendorPanel .data-tbl thead th { padding: 5px 7px; font-size: 9.5px; }
#internalPanel .data-tbl tbody td, #vendorPanel .data-tbl tbody td { padding: 4px 7px; }
#internalPanel .data-tbl .rn, #vendorPanel .data-tbl .rn { width: 28px; padding: 4px 2px !important; }
#internalPanel .data-tbl td.act-col, #vendorPanel .data-tbl td.act-col { width: 54px; padding: 2px 4px; }
#internalPanel .data-tbl td.act-col .act-btn, #vendorPanel .data-tbl td.act-col .act-btn { width: 20px; height: 20px; }
#internalPanel .data-tbl input, #vendorPanel .data-tbl input, #internalPanel .data-tbl select, #vendorPanel .data-tbl select { font-size: 10.5px; }
.np-section { margin-top: 28px; padding-top: 4px; }
.np-section-head { margin-bottom: 16px; }
.np-section-title { font-size: 14px; font-weight: 600; color: #09090b; margin-bottom: 4px; }
.np-section-sub { font-size: 12px; color: #71717a; line-height: 1.5; max-width: 620px; }
.np-table { background: white; border: 1px solid #e4e4e7; border-radius: 10px; overflow: hidden; }
.np-thead { display: grid; grid-template-columns: 1fr 88px 88px; align-items: center; padding: 10px 18px; background: #fafafa; border-bottom: 1px solid #e4e4e7; font-size: 11px; font-weight: 600; color: #71717a; text-transform: uppercase; letter-spacing: 0.3px; }
.np-channel-head { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.np-channel-ico { display: inline-flex; align-items: center; }
.np-body { display: flex; flex-direction: column; }
.np-group-label { padding: 14px 18px 8px; font-size: 11px; font-weight: 600; color: #71717a; text-transform: uppercase; letter-spacing: 0.3px; background: #fafafa; border-bottom: 1px solid #f3f4f6; }
.np-row { display: grid; grid-template-columns: 1fr 88px 88px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #f3f4f6; transition: background 0.1s; }
.np-row:hover { background: #fafbff; }
.np-row:last-child { border-bottom: none; }
.np-event-title { font-size: 12.5px; font-weight: 500; color: #18181b; line-height: 1.3; margin-bottom: 2px; }
.np-event-sub { font-size: 11.5px; color: #71717a; line-height: 1.45; max-width: 540px; }
.np-toggle-cell { display: flex; align-items: center; justify-content: center; }
.np-switch { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; }
.np-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.np-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 999px; cursor: pointer; transition: background 0.15s; }
.np-slider::before { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: white; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.np-switch input:checked + .np-slider { background: #4f6ef7; }
.np-switch input:checked + .np-slider::before { transform: translateX(14px); }
.np-switch input:focus-visible + .np-slider { box-shadow: 0 0 0 3px rgba(79,110,247,0.2); }
.np-switch input:disabled + .np-slider { opacity: 0.45; cursor: not-allowed; }