/* CrmHub24 Qo'ng'iroqlar sahifasi: tepada sonlar + davr/yozuv filtri (2026-10-20, Mobicom so'rovi).
 * Ranglar CRM tokenlaridan — ikkala mavzuga o'zi moslashadi; fon (has-bg) bo'lsa bloklar yarim shaffof. */
#page-calls .cl-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:var(--bg-panel);border:1px solid var(--border-dark);border-radius:12px;overflow:hidden;margin-bottom:12px}
#page-calls .cl-kpi{display:flex;flex-direction:column;gap:3px;padding:13px 16px;text-align:left;background:none;border:0;border-right:1px solid var(--border-dark);color:var(--text-main);font:inherit;min-width:0}
#page-calls .cl-kpi:last-child{border-right:0}
#page-calls button.cl-kpi{cursor:pointer}
#page-calls button.cl-kpi:hover{background:var(--hover)}
#page-calls .cl-kpi.on{background:var(--accent-soft)}
#page-calls .cl-kpi:focus-visible{outline:none;box-shadow:inset var(--ring)}
#page-calls .cl-kpi .l{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-calls .cl-kpi .v{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-calls .cl-kpi .s{font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;min-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-calls .cl-kpi.rec .v{color:var(--accent-text)}

#page-calls .cl-bar{display:flex;flex-direction:column;gap:10px;background:var(--bg-panel);border:1px solid var(--border-dark);border-radius:12px;padding:10px 12px;margin-bottom:14px}
#page-calls .cl-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#page-calls .cl-sp{flex:1}
#page-calls .cl-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:10px;background:color-mix(in srgb,var(--text-main) 6%,transparent)}
#page-calls .cl-seg button{border:0;background:none;color:var(--text-muted);font:inherit;font-size:12.5px;padding:6px 11px;border-radius:8px;cursor:pointer;white-space:nowrap}
#page-calls .cl-seg button:hover{color:var(--text-main)}
#page-calls .cl-seg button.on{background:var(--bg-panel);color:var(--text-main);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.14)}
#page-calls .cl-seg button:focus-visible{outline:none;box-shadow:var(--ring)}
#page-calls .cl-dates{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted)}
#page-calls .cl-dates[hidden]{display:none}
#page-calls .cl-bar select,#page-calls .cl-bar input{min-height:36px;border-radius:10px;border:1px solid var(--border-dark2);background:color-mix(in srgb,var(--text-main) 4%,transparent);color:var(--text-main);padding:0 12px;font:inherit;font-size:13px;min-width:0}
#page-calls .cl-bar select option{background:var(--bg-panel);color:var(--text-main)}
#page-calls .cl-bar input[type=date]{padding:0 8px}
#page-calls .cl-bar select:focus,#page-calls .cl-bar input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
#page-calls .cl-search{flex:1 1 200px}
#page-calls .cl-link{background:none;border:0;color:var(--accent-text);font:inherit;font-size:12.5px;cursor:pointer;padding:4px 2px}
#page-calls .cl-link[hidden]{display:none}
#page-calls .cl-tokens{display:flex;flex-wrap:wrap;gap:6px}
#page-calls .cl-tokens[hidden]{display:none}
#page-calls .cl-tok{display:inline-flex;align-items:center;gap:4px;font-size:12px;border:1px solid var(--border-dark2);border-radius:999px;padding:2px 4px 2px 10px;color:var(--text-main);max-width:100%}
#page-calls .cl-tok button{border:0;background:none;color:var(--text-muted);cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
#page-calls .cl-tok button:hover{color:var(--text-main)}
#page-calls .cl-foot{font-size:12px;color:var(--text-muted);padding:10px 4px 0}

#page-calls.has-bg .cl-kpis,#page-calls.has-bg .cl-bar{background:color-mix(in srgb,var(--bg-panel) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#page-calls.has-bg .cl-foot{color:var(--text-main)}

@media (max-width:1100px){
  #page-calls .cl-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  #page-calls .cl-kpi:nth-child(3n){border-right:0}
  #page-calls .cl-kpi:nth-child(-n+3){border-bottom:1px solid var(--border-dark)}
}
@media (max-width:520px){
  #page-calls .cl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #page-calls .cl-kpi{border-right:1px solid var(--border-dark)!important;border-bottom:1px solid var(--border-dark)}
  #page-calls .cl-kpi:nth-child(2n){border-right:0!important}
}