/* Stale-data indicator (cache-loaded numbers awaiting server confirmation).
       Apply class kpi-stale via kpiClass() helper. Removed automatically after
       'crm:data-fresh' event when page re-renders with confirmed server data.
       NOTE: subtle by design — пользователю нужен только лёгкий «пульс» что данные
       подгружаются. Никакой агрессивной тусклости (изначально было opacity .55 — резало глаз). */
    .kpi-stale{
      transition: opacity .3s ease;
      position: relative;
    }
    /* Маленькая пульсирующая точка после контента — рисуем ТОЛЬКО когда есть отдельный
       элемент-цифра .dash-kpi-value внутри. На больших карточках индикатор не показываем
       (мы помечаем только сами числа, не контейнеры). */
    .dash-kpi-value.kpi-stale::after,
    .kpi-stale-dot::after{
      content: "";
      display: inline-block;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--warning, #f59e0b);
      margin-left: 5px;
      vertical-align: middle;
      animation: kpiStalePulse 1.4s ease-in-out infinite;
    }
    @keyframes kpiStalePulse{
      0%,100%{ opacity: .4; }
      50%    { opacity: 1;  }
    }

    h1,h2,h3,h4{ letter-spacing:-0.02em; }
    h2{ font-size:20px; font-weight:800; }
    button,input,select,textarea{ font-family:inherit; }
    .small{ font-size: 12px; color: var(--muted); }
    .badge{
      padding:3px 8px; border-radius: 999px; background:#eef2ff; display:inline-block;
      border: 1px solid rgba(37,99,235,.15); color: #1d4ed8; font-size: 11px; font-weight: 700;
    }
    .badge-success{ background:#d1fae5; border-color: rgba(16,185,129,.25); color: #059669; }
    .badge-warning{ background:#fef3c7; border-color: rgba(245,158,11,.25); color: #d97706; }
    .badge-danger{ background:#fee2e2; border-color: rgba(239,68,68,.25); color: #dc2626; }
    .pill{ padding:3px 8px; border-radius:999px; border:1px solid var(--border); font-size:11px; font-weight:800; display:inline-block; }
    .pill.green{ background:#d1fae5; border-color: rgba(16,185,129,.25); color:#059669; }
    .pill.gray{ background:#f3f4f6; border-color: rgba(107,114,128,.25); color:#6b7280; }
    table{ width:100%; border-collapse: collapse; font-size: 13px; }
    td, th{ padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align: middle; }
    th{ font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
    .tx-col-resize{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:2}
    .tx-col-resize:hover,.tx-col-resize:active{background:var(--accent);opacity:.3}
    .tx-table td{overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}
    .link{ color: var(--accent2); font-weight: 700; cursor:pointer; }
    .link:hover{ text-decoration: underline; }
    .hr{ height:1px; background: var(--border); margin: 10px 0; }
    .kpi{ display:flex; gap:10px; flex-wrap:wrap; }
    .kpi .box{
      flex:1; min-width: 180px; padding:12px; border-radius: 12px;
      border: 1px solid var(--border); background: linear-gradient(180deg, #fff, #fbfbff);
    }
    .kpi .box b{ font-size: 20px; display: block; margin-bottom: 3px; }

    /* ── Dashboard v2 ── */
    .dash-greet{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px}
    .dash-greet-hello{font-size:17px;font-weight:700;line-height:1.3}
    .dash-greet-date{font-size:12px;color:var(--muted);margin-top:1px;text-transform:capitalize}
    .dash-greet-actions{display:flex;gap:6px;flex-wrap:wrap}

    .dash-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
    .dash-kpi-card{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;transition:box-shadow .2s,transform .15s}
    .dash-kpi-card:hover{box-shadow:0 3px 14px rgba(0,0,0,.06);transform:translateY(-1px)}
    .dash-kpi-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
    .dash-kpi-body{flex:1;min-width:0}
    .dash-kpi-value{font-size:17px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .dash-kpi-label{font-size:11px;color:var(--muted);margin-top:1px;font-weight:500}
    .dash-kpi-trend{margin-top:2px;display:flex;align-items:center;gap:4px}

    .dash-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
    .dash-section-title{font-size:14px;font-weight:700}
    .dash-section-badge{font-size:11px;font-weight:700;padding:2px 10px;border-radius:99px;background:var(--bg);color:var(--muted)}

    .dash-pipeline-card{margin-bottom:10px;padding:14px 14px 12px}
    .dash-pipeline{display:flex;gap:0;border-radius:10px;overflow:hidden;min-height:80px}
    .dash-pipe-seg{flex:1 1 0%!important;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 8px 12px;min-width:0;cursor:pointer;transition:filter .15s;border-right:2px solid rgba(255,255,255,.6)}
    .dash-pipe-seg:last-child{border-right:none}
    .dash-pipe-seg:hover{filter:brightness(0.92)}
    .dash-pipe-cnt{font-size:28px;font-weight:800;line-height:1.1}
    .dash-pipe-lbl{font-size:12px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:4px;color:var(--text);opacity:.8}

    .dash-alerts-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
    .dash-alert{flex:1;min-width:200px;display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:10px;cursor:pointer;transition:transform .15s}
    .dash-alert:hover{transform:translateY(-1px)}
    .dash-alert-danger{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.18)}
    .dash-alert-success{background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.18)}
    .dash-alert-icon{font-size:22px;flex-shrink:0}
    .dash-alert b{font-size:13px}
    .dash-alert .small{font-size:11px;color:var(--muted);margin-top:1px}

    .dash-main-grid{display:grid;grid-template-columns:1fr 320px;gap:10px;min-height:0}
    .dash-col-left{min-width:0;display:flex;flex-direction:column;gap:10px;overflow:hidden}
    .dash-col-right{min-width:0;display:flex;flex-direction:column;gap:10px}
    .dash-col-left>.card{flex-shrink:1;min-height:0;overflow:hidden;margin-top:0!important;padding:14px}
    .dash-col-right>.card{flex-shrink:0;margin-top:0!important;padding:12px}

    .dash-orders-list{display:flex;flex-direction:column;gap:0;margin-top:4px;overflow-y:auto;flex:1;min-height:0}
    .dash-order-row{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:7px;transition:background .12s}
    .dash-order-row:hover{background:var(--bg)}
    .dash-order-num{font-size:12px;font-weight:700;color:var(--accent);min-width:72px;white-space:nowrap}
    .dash-order-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
    .dash-order-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
    .dash-order-status{font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;border:1px solid;white-space:nowrap}
    .dash-order-price{font-size:12px;font-weight:700;min-width:70px;text-align:right;white-space:nowrap}

    .dash-tech-list{display:flex;flex-direction:column;gap:7px}
    .dash-tech-row{display:flex;align-items:center;gap:8px}
    .dash-tech-name{font-size:12px;font-weight:600;min-width:70px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .dash-tech-bar-wrap{flex:1;height:7px;background:var(--bg);border-radius:99px;overflow:hidden}
    .dash-tech-bar{height:100%;background:linear-gradient(90deg,var(--accent),#10b981);border-radius:99px;transition:width .4s ease}
    .dash-tech-cnt{font-size:12px;font-weight:800;min-width:18px;text-align:right}

    .dash-low-list{display:flex;flex-direction:column;gap:3px}
    .dash-low-row{display:flex;align-items:center;gap:8px;padding:2px 0}

    .dash-fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .dash-fin-item{padding:8px 10px;border-radius:8px;background:var(--bg)}
    .dash-fin-item .small{font-size:10px}
    .dash-fin-item>div:last-child{font-size:14px!important}

    @media(max-width:1100px){
      .dash-kpi{grid-template-columns:repeat(2,1fr)}
      .dash-main-grid{grid-template-columns:1fr}
    }
    @media(max-width:800px){
      .dash-kpi{grid-template-columns:1fr 1fr}
      .dash-kpi-card{padding:10px}
      .dash-kpi-value{font-size:16px}
      .dash-greet-hello{font-size:16px}
      .dash-pipeline{flex-wrap:wrap;min-height:auto}
      .dash-pipe-seg{min-width:calc(33% - 2px);padding:8px 4px}
      .dash-order-row{flex-wrap:wrap;gap:4px}
      .dash-order-price{min-width:auto}
      .dash-fin-grid{grid-template-columns:1fr 1fr}
    }
    .tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom: 10px; }
    .tab{
      padding:8px 14px; border-radius: 999px; border:1px solid var(--border);
      background:#fff; cursor:pointer; font-size: 13px; font-weight: 500;
    }
    .tab.active{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.25); color: var(--success); font-weight:700; }

    .msg{
      position: fixed; bottom: 20px; right: 20px; z-index: 999;
      background: var(--text); color: #fff; padding: 12px 18px;
      border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2);
      animation: slideIn .3s;
    }
    @keyframes slideIn{ from{ transform: translateY(100px); opacity:0; } to{ transform: translateY(0); opacity:1; } }

    body.modal-open{ overflow:hidden; }
    .modal{
      position: fixed; inset:0; z-index:100;
      background: rgba(17,24,39,.75); backdrop-filter: blur(4px);
      display:flex; align-items:center; justify-content:center;
      animation: fadeIn .2s;
    }
    @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
    @keyframes scaleIn{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:scale(1); } }
    .modal-box{
      background:#fff; border-radius: 14px; box-shadow: 0 25px 50px rgba(0,0,0,.25);
      padding:16px; max-width: 460px; width:90%; max-height:85vh; overflow-y:auto; overflow-x:hidden;
      display:flex; flex-direction:column; font-size:13px;
    }
    .modal-box:has(.modal-footer){ overflow:hidden; }
    .modal-box.modal-wide{ max-width:780px; padding:16px; }
    .modal-box.modal-full{ max-width:1000px; width:96vw; max-height:90vh; padding:0; overflow:hidden; display:flex; flex-direction:column; }
    .modal-box.modal-full .pf-head{ padding:12px 20px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
    .modal-box.modal-full .pf-body{ flex:1; overflow-y:auto; padding:12px 20px 20px; }
    .modal-box.modal-full .pf-foot{ padding:10px 20px; border-top:1px solid var(--border); flex-shrink:0; display:flex; gap:8px; flex-wrap:wrap; }
    @media(max-width:700px){
      .modal-box.modal-full{ width:100vw; max-width:100vw; max-height:100vh; border-radius:0; }
      .modal-box.modal-full .pf-body [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
    }
    .modal-box.modal-full table{ table-layout:auto !important; }
    .modal-box.modal-full .input{ padding:7px 10px; font-size:13px; }
    .modal-box.modal-wide .input{ padding:7px 10px; font-size:13px; }
    .modal-box.modal-wide .small{ font-size:12px; }
    .modal-box h3{ margin:0 0 10px; font-size:15px; }
    .modal-box .small{ font-size:12px; }
    .modal-box .input{ font-size:13px; padding:7px 10px; }
    .modal-box select.input{ font-size:13px; padding:7px 10px; }
    .modal-box .btn, .modal-box .btn2{ padding:8px 14px; font-size:13px; }
    .modal-scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0;-webkit-overflow-scrolling:touch}
    .modal-box table{ width:100% !important; table-layout:fixed !important; min-width:0 !important; }
    .modal-box table td, .modal-box table th{ max-width:none !important; overflow:visible !important; text-overflow:clip !important; }
    .modal-footer{flex-shrink:0;padding-top:14px;border-top:1px solid var(--border);margin-top:14px}


    .print-area{
      display:none;
    }
    @media print{
      body > *:not(.print-area){ display:none !important; }
      .print-area{ display:block !important; }
      .no-print{ display:none !important; }
    }