/* Integratsiyalar markazi uslublari (admin.html, 2026-10-04). Faqat mavjud rang tokenlari ishlatiladi (kunduzgi/tungi rejimda ham ishlaydi). */

/* ---- rejimlar: bosh sahifa (plitkalar) yoki bitta integratsiya sahifasi ---- */
#subtab-crm.int-mode-landing > .card[data-int]{ display:none; }
#subtab-crm.int-mode-landing > #int-pagebar{ display:none; }
#subtab-crm.int-mode-page > #int-hub{ display:none; }
#subtab-crm.int-mode-page > .card[data-int]:not(.int-active){ display:none; }

/* ---- bosh sahifa ---- */
#int-hub{ margin-bottom:8px; }
.int-hub-title{ font-size:20px; font-weight:650; letter-spacing:-.02em; margin:0; color:var(--text-main); }
.int-hub-sub{ color:var(--text-muted); margin:6px 0 22px; max-width:660px; line-height:1.6; font-size:14.5px; }
.int-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.int-tile{
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px 16px 18px; text-align:center;
  background:var(--card-bg); border:1px solid var(--border); border-radius:16px; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .15s, background .15s, transform .12s;
}
.int-tile:hover{ border-color:var(--accent-blue); background:var(--surface-2); }
.int-tile:active{ transform:scale(.985); }
.int-tile-logo{
  display:flex; align-items:center; justify-content:center; width:100%; height:92px; padding:10px; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
}
.int-tile-logo img{ width:auto !important; height:auto !important; max-width:78% !important; max-height:62px !important; object-fit:contain; }
.int-tile-logo svg{ width:44px; height:44px; }
.int-tile-logo{ font-weight:800; font-size:26px; letter-spacing:.02em; color:var(--text-main); } /* matnli logotip (masalan SAP) */
.int-tile-status.plain{ font-size:12px; line-height:1.4; padding:0 4px; }
.int-tile-name{ font-weight:650; font-size:15.5px; color:var(--text-main); }
.int-tile-status{ display:inline-flex; align-items:flex-start; justify-content:center; gap:7px; max-width:100%; font-size:12.5px; color:var(--text-muted); min-height:18px; }
.int-dot{ width:7px; height:7px; border-radius:50%; background:var(--border-strong); flex:none; margin-top:5px; }
.int-dot.on{ background:var(--accent-green); }

/* ---- alohida integratsiya sahifasi ---- */
#int-pagebar{ margin-bottom:14px; }
.int-back{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px 7px 10px; border-radius:999px; cursor:pointer;
  background:var(--card-bg); border:1px solid var(--border); font:inherit; font-size:13.5px; font-weight:600; color:var(--text-main);
  transition:border-color .15s, background .15s;
}
.int-back:hover{ border-color:var(--accent-blue); background:var(--surface-2); }
.card.int-active{ max-width:980px !important; margin-bottom:18px; }
.card.int-active > .int-hdr{ cursor:default; padding:20px 24px !important; border-bottom:1px solid var(--border); }
.card.int-active .chevron-icon{ display:none; }
.card.int-active [id^="integration-body-"]{ display:block !important; }

/* ---- ko'rsatma bloki ---- */
.int-guide{ padding:22px 24px; background:var(--card-bg); border-bottom:1px solid var(--border); }
.int-guide-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.int-guide-ic{ width:38px; height:38px; border-radius:11px; background:var(--tint-blue); color:var(--accent-blue-dark); display:grid; place-items:center; flex:none; }
.int-guide-ic svg{ width:20px; height:20px; }
.int-guide-title{ font-weight:650; font-size:16px; color:var(--text-main); }
.int-guide-lead{ color:var(--text-muted); margin-top:3px; line-height:1.6; font-size:14px; }
.int-steps{ list-style:none; counter-reset:intstep; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.int-steps li{ counter-increment:intstep; display:flex; gap:13px; align-items:flex-start; line-height:1.6; font-size:14.5px; color:var(--text-main); }
.int-steps li::before{
  content:counter(intstep); flex:none; width:26px; height:26px; border-radius:50%; margin-top:-1px;
  background:var(--tint-blue); color:var(--accent-blue-dark); display:grid; place-items:center; font-weight:700; font-size:13px;
}
.int-steps li > span{ flex:1; min-width:0; }
.int-steps b, .int-notes b{ font-weight:650; }
.int-notes{ margin-top:18px; padding:14px 16px; background:var(--tint-amber); border:1px solid var(--border-amber); border-radius:12px; }
.int-notes-title{ font-weight:650; font-size:12.5px; color:var(--amber-text); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em; }
.int-notes ul{ margin:0; padding-left:18px; color:var(--text-main); font-size:13.5px; line-height:1.65; }

@media(max-width:600px){
  .int-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .int-tile{ padding:14px 10px; } .int-tile-logo{ height:72px; }
  .int-guide{ padding:18px 16px; } .card.int-active > .int-hdr{ padding:16px !important; }
}
.int-tile-logo svg.wm{ width:auto; height:34px; max-width:92%; }
/* CrmHub24 logotipi (CRM panelidagi, oq yozuvli) — yorug' mavzuda CRM'dagidek teskarilanadi */
.int-tile-logo img.crmhub24-logo{ max-width:86% !important; max-height:44px !important; }
:root[data-theme="light"] img.crmhub24-logo{ filter:invert(1) hue-rotate(180deg); }

/* ---- Rasmiy brend logotiplari (2026-10-11): sarlavhadagi kichik quti va plitkadagi katta maydon ---- */
:root{ --sip-ink:#0b2f70; }
:root[data-theme="dark"]{ --sip-ink:#e6edff; }
.int-logo-box{
  min-width:40px; height:40px; padding:0 9px; border-radius:9px; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--card-bg); border:1px solid var(--border);
}
.int-tile-logo{ background:linear-gradient(180deg, var(--card-bg), var(--surface-2)); }
.int-tile:hover .int-tile-logo{ border-color:var(--border-strong); }
.int-tile-logo img.brand-wm{ height:28px !important; max-width:80% !important; }
.int-tile-logo img.brand-mark{ height:50px !important; }
.int-tile-logo img.brand-mark.sap{ height:40px !important; }
.int-tile-logo svg.wm{ height:32px; }
@media(max-width:600px){
  .int-tile-logo img.brand-wm{ height:20px !important; } .int-tile-logo img.brand-mark{ height:38px !important; }
  .int-tile-logo img.brand-mark.sap{ height:30px !important; } .int-tile-logo svg.wm{ height:24px; }
}
.int-tile-logo svg.wm.icons{ height:40px; }
@media(max-width:600px){ .int-tile-logo svg.wm.icons{ height:30px; } }