/* ═══════════════════════════════════════════════════════════════════════════════
   ASGARD CRM — Call Reports CSS v1.0
   Аналитика звонков — WOW-дизайн с CSS-переменными
   Все классы: cr-* (Call Reports)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── PAGE LAYOUT ─── */
.cr-page{padding:0}
.cr-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-5);flex-wrap:wrap;gap:var(--sp-3)}
.cr-header h2{margin:0;font-size:20px;color:var(--t1);font-weight:var(--fw-bold)}
.cr-actions{display:flex;gap:var(--sp-2);align-items:center}

/* ─── PERIOD SELECTOR ─── */
.cr-period{display:flex;gap:var(--sp-1);background:var(--bg3);border-radius:var(--r-full);padding:3px}
.cr-period-btn{padding:6px 14px;border-radius:var(--r-full);border:none;background:transparent;color:var(--t2);font-size:12px;font-weight:var(--fw-semi);cursor:pointer;transition:all var(--base)}
.cr-period-btn:hover{color:var(--t1);background:var(--bg4)}
.cr-period-btn--active{background:linear-gradient(135deg,var(--red),var(--blue));color:#fff;box-shadow:var(--shadow-sm)}

/* ─── METRICS GRID ─── */
.cr-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-bottom:var(--sp-5)}
@media(max-width:900px){.cr-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cr-metrics{grid-template-columns:1fr}}

/* ─── METRIC CARD ─── */
.cr-metric{position:relative;background:var(--bg2);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-4);overflow:hidden;transition:transform var(--base),box-shadow var(--base)}
.cr-metric::before{content:'';position:absolute;inset:-1px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--red),var(--blue));z-index:0;opacity:.6}
.cr-metric::after{content:'';position:absolute;inset:1px;border-radius:calc(var(--r-lg) - 1px);background:var(--bg2);z-index:1}
.cr-metric>*{position:relative;z-index:2}
.cr-metric:hover{transform:translateY(-4px);box-shadow:var(--gold-glow)}

.cr-metric__icon{width:42px;height:42px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:var(--sp-2)}
.cr-metric__icon--total{background:var(--blue-bg);color:var(--blue-l)}
.cr-metric__icon--target{background:var(--ok-bg);color:var(--ok-t)}
.cr-metric__icon--missed{background:var(--err-bg);color:var(--err-t)}
.cr-metric__icon--duration{background:var(--gold-bg);color:var(--gold)}

.cr-metric__value{font-size:28px;font-weight:var(--fw-extra);color:var(--t1);line-height:1.1}
.cr-metric__label{font-size:12px;color:var(--t3);margin-top:var(--sp-1);text-transform:uppercase;letter-spacing:.04em}
.cr-metric__trend{display:inline-block;font-size:11px;font-weight:var(--fw-semi);margin-top:var(--sp-1);padding:2px 6px;border-radius:var(--r-full)}
.cr-metric__trend--up{color:var(--ok-t);background:var(--ok-bg)}
.cr-metric__trend--down{color:var(--err-t);background:var(--err-bg)}

/* ─── INSIGHT CARD (AI summary) ─── */
.cr-insight{position:relative;background:var(--bg2);border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-5);overflow:hidden;border:1px solid rgba(212,168,67,.15)}
.cr-insight::before{content:'';position:absolute;inset:-1px;border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(212,168,67,.25),rgba(59,130,246,.15));z-index:0;pointer-events:none}
.cr-insight::after{content:'';position:absolute;inset:1px;border-radius:calc(var(--r-lg) - 1px);background:var(--bg2);z-index:1}
.cr-insight>*{position:relative;z-index:2}
.cr-insight__title{font-size:14px;font-weight:var(--fw-semi);color:var(--gold);margin-bottom:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2)}
.cr-insight__text{font-size:13px;color:var(--t2);line-height:1.65}

/* ─── SVG CHART ─── */
.cr-chart{background:var(--bg2);border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-5);border:1px solid var(--brd)}
.cr-chart__title{font-size:14px;font-weight:var(--fw-semi);color:var(--t1);margin-bottom:var(--sp-3)}
.cr-chart__svg{width:100%;overflow:visible}
.cr-chart__grid-line{stroke:var(--brd);stroke-dasharray:4 4}
.cr-chart__axis-label{fill:var(--t3);font-size:11px}
.cr-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cr-chart__line--total{stroke:var(--blue-l)}
.cr-chart__line--target{stroke:var(--ok-t)}
.cr-chart__line--missed{stroke:var(--err-t)}
.cr-chart__area{opacity:.08}
.cr-chart__area--total{fill:var(--blue-l)}
.cr-chart__area--target{fill:var(--ok-t)}
.cr-chart__area--missed{fill:var(--err-t)}
.cr-chart__dot{r:4;cursor:pointer;transition:r var(--fast)}
.cr-chart__dot:hover{r:6}
.cr-chart__dot--total{fill:var(--blue-l)}
.cr-chart__dot--target{fill:var(--ok-t)}
.cr-chart__dot--missed{fill:var(--err-t)}
.cr-chart__legend{display:flex;gap:var(--sp-5);margin-top:var(--sp-3);font-size:12px;color:var(--t2)}
.cr-chart__legend-item{display:flex;align-items:center;gap:var(--sp-1)}
.cr-chart__legend-dot{width:10px;height:10px;border-radius:var(--r-full)}
.cr-chart__legend-dot--total{background:var(--blue-l)}
.cr-chart__legend-dot--target{background:var(--ok-t)}
.cr-chart__legend-dot--missed{background:var(--err-t)}
.cr-chart__tooltip{position:absolute;pointer-events:none;z-index:50;background:var(--bg0);color:var(--t1);font-size:12px;border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);box-shadow:var(--shadow-lg);line-height:1.6;white-space:nowrap;border:1px solid var(--brd)}

/* ─── EMPLOYEE ACTIVITY ─── */
.cr-employees{background:var(--bg2);border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-5);border:1px solid var(--brd)}
.cr-employees__title{font-size:14px;font-weight:var(--fw-semi);color:var(--t1);margin-bottom:var(--sp-3)}
.cr-employees__table{width:100%;border-collapse:collapse}
.cr-employees__table th{padding:var(--sp-2) var(--sp-3);text-align:left;font-size:12px;color:var(--t3);font-weight:var(--fw-semi);border-bottom:1px solid var(--brd);text-transform:uppercase;letter-spacing:.04em}
.cr-employees__table td{padding:var(--sp-2) var(--sp-3);font-size:13px;color:var(--t1);border-bottom:1px solid var(--brd-m)}
.cr-employees__table tr:hover{background:var(--bg3)}
.cr-employees__rank{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-full);font-size:11px;font-weight:var(--fw-bold)}
.cr-employees__rank--1{background:var(--gold-bg);color:var(--gold)}
.cr-employees__rank--2{background:var(--blue-bg);color:var(--blue-l)}
.cr-employees__rank--3{background:var(--ok-bg);color:var(--ok-t)}
.cr-employees__bar{height:6px;border-radius:var(--r-full);background:var(--bg4);overflow:hidden;min-width:60px}
.cr-employees__bar-fill{height:100%;border-radius:var(--r-full);transition:width .6s ease}
.cr-employees__bar-fill--good{background:var(--ok-t)}
.cr-employees__bar-fill--mid{background:var(--gold)}
.cr-employees__bar-fill--low{background:var(--err-t)}

/* ─── REPORT LIST ─── */
.cr-list{background:var(--bg2);border-radius:var(--r-lg);border:1px solid var(--brd);overflow:hidden}
.cr-list__empty{padding:var(--sp-10);text-align:center;color:var(--t3);font-size:14px}
.cr-list__table{width:100%;border-collapse:collapse}
.cr-list__table th{padding:var(--sp-3);text-align:left;font-size:12px;color:var(--t3);font-weight:var(--fw-semi);background:var(--bg4);border-bottom:1px solid var(--brd);text-transform:uppercase;letter-spacing:.04em}
.cr-list__table td{padding:var(--sp-3);font-size:13px;color:var(--t1);border-bottom:1px solid var(--brd-m)}
.cr-list__row{cursor:pointer;transition:background var(--fast)}
.cr-list__row:hover{background:var(--bg3)}

/* ─── BADGES ─── */
.cr-badge{display:inline-block;padding:2px 10px;border-radius:var(--r-full);font-size:11px;font-weight:var(--fw-semi)}
.cr-badge--daily{background:var(--blue-bg);color:var(--blue-l)}
.cr-badge--weekly{background:var(--ok-bg);color:var(--ok-t)}
.cr-badge--monthly{background:rgba(168,85,247,.12);color:#c084fc}
.cr-badge--system{background:var(--bg4);color:var(--t2)}
.cr-badge--manual{background:var(--gold-bg);color:var(--gold)}

/* ─── MODAL DETAIL ─── */
.cr-detail{max-width:720px}
.cr-detail__header{margin-bottom:var(--sp-4)}
.cr-detail__title{font-size:18px;font-weight:var(--fw-bold);color:var(--t1);margin:0 0 var(--sp-1)}
.cr-detail__subtitle{font-size:13px;color:var(--t3)}
.cr-detail__metrics{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-4);flex-wrap:wrap}
.cr-detail__mini{padding:var(--sp-3) var(--sp-4);background:var(--bg3);border-radius:var(--r-md);text-align:center;min-width:80px;border:1px solid var(--brd-m)}
.cr-detail__mini-value{font-size:22px;font-weight:var(--fw-bold);color:var(--gold)}
.cr-detail__mini-label{font-size:11px;color:var(--t3);margin-top:2px}
.cr-detail__summary{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:var(--sp-4);white-space:pre-wrap}
.cr-detail__recs{margin-top:var(--sp-3)}
.cr-detail__recs-title{font-size:13px;font-weight:var(--fw-semi);color:var(--t1);margin-bottom:var(--sp-2)}
.cr-detail__recs-list{margin:0;padding-left:var(--sp-5)}
.cr-detail__recs-list li{padding:var(--sp-1) 0;color:var(--t2);font-size:13px;line-height:1.5}
.cr-detail__recs-list li::marker{color:var(--gold)}

/* ─── HTML REPORT inside modal ─── */
.cr-html-report{background:var(--bg3);border-radius:var(--r-md);padding:var(--sp-4);margin-top:var(--sp-4);border:1px solid var(--brd-m);overflow-x:auto}
.cr-html-report iframe{width:100%;border:none;border-radius:var(--r-sm);min-height:500px;background:#fff}

/* ─── GENERATE MODAL ─── */
.cr-generate{display:flex;flex-direction:column;gap:var(--sp-3);min-width:350px}
.cr-generate__label{display:flex;flex-direction:column;gap:var(--sp-1);font-size:13px;color:var(--t2)}

/* ─── ACCORDION ─── */
.cr-accordion{border:1px solid var(--brd);border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--sp-2)}
.cr-accordion__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);background:var(--bg3);cursor:pointer;transition:background var(--fast);font-size:13px;color:var(--t1);font-weight:var(--fw-med);user-select:none}
.cr-accordion__head:hover{background:var(--bg4)}
.cr-accordion__arrow{transition:transform var(--base);font-size:12px;color:var(--t3)}
.cr-accordion--open .cr-accordion__arrow{transform:rotate(180deg)}
.cr-accordion__body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.cr-accordion--open .cr-accordion__body{max-height:2000px}
.cr-accordion__content{padding:var(--sp-3) var(--sp-4)}

/* ─── SKELETON ─── */
.cr-skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:200% 100%;animation:cr-shimmer 1.5s infinite;border-radius:var(--r-sm);display:inline-block}
@keyframes cr-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.cr-skeleton--card{height:120px;border-radius:var(--r-lg)}
.cr-skeleton--row{height:44px;margin-bottom:var(--sp-1);border-radius:var(--r-sm)}
.cr-skeleton--chart{height:200px;border-radius:var(--r-lg);margin-bottom:var(--sp-5)}

/* ─── ANIMATIONS ─── */
@keyframes cr-slideUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cr-countFlash{0%{box-shadow:0 0 0 0 rgba(212,168,67,.5)}50%{box-shadow:0 0 18px 4px rgba(212,168,67,.25)}100%{box-shadow:0 0 0 0 transparent}}
@keyframes cr-goldenGlow{0%{box-shadow:0 0 0 0 rgba(212,168,67,0)}50%{box-shadow:0 0 16px 2px rgba(212,168,67,.18)}100%{box-shadow:0 0 0 0 rgba(212,168,67,0)}}
@keyframes cr-fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes cr-pathDraw{0%{stroke-dashoffset:var(--path-len,2000)}100%{stroke-dashoffset:0}}

.cr-wow-card{animation:cr-slideUp .35s ease both}
.cr-wow-flash{animation:cr-countFlash .6s ease}
.cr-wow-glow{animation:cr-goldenGlow 1.5s ease-in-out}
.cr-chart__line--animate{animation:cr-pathDraw 1.2s ease both}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  .cr-header{flex-direction:column;align-items:flex-start}
  .cr-detail__metrics{flex-direction:column}
  .cr-chart__legend{flex-wrap:wrap}
  .cr-employees__table .cr-col-hide-sm{display:none}
}
@media(max-width:480px){
  .cr-metrics{grid-template-columns:1fr}
  .cr-actions{flex-direction:column;width:100%}
  .cr-period{flex-wrap:wrap;justify-content:center}
}