/* ═══════════════════════════════════════════════════════════════════════════
   VETKA CRM START PAGE  ·  Platform-Features design
   Spec: Platform-Features-DESIGN.md · Font: Inter · Base: 4px
   Gradient-border SHELL (real wrapper technique from spec)
   ═══════════════════════════════════════════════════════════════════════════ */

.vetka-crm-page {
    --cf-font:        'Inter', system-ui, -apple-system, sans-serif;
    --cf-bg:          #FFFFFF;
    --cf-text:        #111827;
    --cf-muted:       #6B7280;
    --cf-border:      #F3F4F6;
    --cf-border-2:    #E5E7EB;
    --cf-border-blue: #DBEAFE;
    --cf-shell-grad:  linear-gradient(135deg, #DBEAFE 0%, #F9FAFB 28%, #F3F4F6 54%, #E5E7EB 78%, #BFDBFE 100%);
    --cf-sh-card:     rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0.08) 0px 12px 40px 0px;
    --cf-sh-sm:       rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0.05) 0px 1px 2px 0px;
    --cf-sh-mid:      rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0.1) 0px 2px 3px -1px, rgba(25,28,33,0.02) 0px 1px 0px 0px, rgba(25,28,33,0.08) 0px 0px 0px 1px;
    --cf-r-xs:   4px;
    --cf-r-sm:   12px;
    --cf-r-md:   16px;
    --cf-r-lg:   20px;
    --cf-r-xl:   24px;
    --cf-r-pill: 9999px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 4px 0 32px;
    color: var(--cf-text);
    font-family: var(--cf-font);
}

/* ── Hero shell (gradient border wrapper) ── */
.vetka-crm-hero-shell {
    padding: 1.5px;
    border-radius: var(--cf-r-xl);
    background: var(--cf-shell-grad);
}
.vetka-crm-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px;
    padding: 28px 32px;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(4px) saturate(1.1);
    -webkit-backdrop-filter: blur(4px) saturate(1.1);
    border-radius: calc(var(--cf-r-xl) - 1.5px);
    box-shadow: var(--cf-sh-card);
    font-family: var(--cf-font);
}
.vetka-crm-kicker {
    margin: 0 0 8px;
    color: #3B82F6;
    font-family: var(--cf-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.vetka-crm-hero h1 {
    margin: 0;
    max-width: 820px;
    color: var(--cf-text);
    font-family: var(--cf-font);
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 600;
    line-height: 1.11;
    letter-spacing: -0.025em;
}
.vetka-crm-lead {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--cf-muted);
    font-family: var(--cf-font);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
}
.vetka-crm-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 14px;
    color: var(--cf-muted);
    font-family: var(--cf-font);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--cf-border-blue);
    border-radius: var(--cf-r-pill);
    box-shadow: var(--cf-sh-sm);
}
.vetka-crm-live__dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
    animation: vetka-crm-pulse 1.6s ease-in-out infinite;
}
@keyframes vetka-crm-pulse {
    0%, 100% { transform: scale(1); opacity: 0.72; }
    50%       { transform: scale(1.25); opacity: 1; }
}

/* ── Metric cards ── */
.vetka-crm-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
/* Gradient border shell — outer carries gradient, inner is white card */
.vetka-crm-card-shell {
    padding: 1.5px;
    border-radius: var(--cf-r-xl);
    background: var(--cf-shell-grad);
    transition: box-shadow 300ms ease, transform 300ms ease;
}
.vetka-crm-card-shell:hover {
    transform: translateY(-4px);
    box-shadow: rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0.1) 0px 16px 48px 0px;
}
.vetka-crm-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--cf-bg);
    border-radius: calc(var(--cf-r-xl) - 1.5px);
    box-shadow: var(--cf-sh-card);
    font-family: var(--cf-font);
}
/* ══════════════════════════════════════════════════════
   CARD VISUAL ZONE — illustration + animation system
   Gradient classes → CSS colour tokens (no solid fill)
   ══════════════════════════════════════════════════════ */

/* Colour token setters — background driven by --cvis-l below */
.crm-grad--blue    { --cvis-c:#3B82F6; --cvis-l:#EFF6FF; --cvis-m:#BFDBFE; --cvis-a:rgba(59,130,246,0.35); }
.crm-grad--emerald { --cvis-c:#059669; --cvis-l:#ECFDF5; --cvis-m:#A7F3D0; --cvis-a:rgba(5,150,105,0.35); }
.crm-grad--sky     { --cvis-c:#0284C7; --cvis-l:#F0F9FF; --cvis-m:#BAE6FD; --cvis-a:rgba(2,132,199,0.35); }
.crm-grad--violet  { --cvis-c:#7C3AED; --cvis-l:#F5F3FF; --cvis-m:#DDD6FE; --cvis-a:rgba(124,58,237,0.35); }
.crm-grad--teal    { --cvis-c:#0D9488; --cvis-l:#F0FDFA; --cvis-m:#99F6E4; --cvis-a:rgba(13,148,136,0.35); }
.crm-grad--rose    { --cvis-c:#E11D48; --cvis-l:#FFF1F2; --cvis-m:#FECDD3; --cvis-a:rgba(225,29,72,0.35); }

/* Visual zone — light accent tint background */
.vetka-crm-card__vis {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    overflow: hidden;
    background: var(--cvis-l, #F8FAFC);
}
.vetka-crm-card__vis::after { display: none; }

/* Icon positional modifiers */
.cvis-icon-up   { align-items: flex-start; padding-top: 24px; }
.cvis-icon-left { justify-content: flex-start; padding-left: 28px; }

/* Icon bubble — solid accent colour with coloured shadow */
.vetka-crm-card__vis-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--cvis-c, #3B82F6);
    border-radius: 20px;
    box-shadow:
        0 8px 24px -8px var(--cvis-a, rgba(59,130,246,0.4)),
        0 2px 8px rgba(0,0,0,0.08);
    transition:
        transform 300ms cubic-bezier(0.4,0,0.2,1),
        box-shadow 300ms cubic-bezier(0.4,0,0.2,1);
}
.vetka-crm-card-shell:hover .vetka-crm-card__vis-icon {
    transform: scale(1.09) translateY(-4px);
    box-shadow:
        0 14px 32px -8px var(--cvis-a, rgba(59,130,246,0.5)),
        0 4px 12px rgba(0,0,0,0.1);
}
.vetka-crm-card__vis-icon > i {
    font-size: 28px;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));
}

/* ── Keyframe animations ───────────────────────────── */
@keyframes cvis-float   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-7px)} }
@keyframes cvis-float-b { 0%,100%{transform:translateY(0)}  50%{transform:translateY(7px)}  }
@keyframes cvis-spin-cw  { to { transform: rotate(360deg);  } }
@keyframes cvis-spin-ccw { to { transform: rotate(-360deg); } }
@keyframes cvis-eq {
    0%,100% { transform: scaleY(0.3); }
    50%     { transform: scaleY(1);   }
}
@keyframes cvis-blink { 0%,100%{opacity:0.45} 50%{opacity:1} }

/* ── 1. Orbit hub (Владельцы) ──────────────────────── */
.cvis-orbit { position:absolute; inset:0; pointer-events:none; }
.cvis-ring {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    border: 1.5px dashed var(--cvis-m, #BFDBFE);
    transform: translate(-50%,-50%);
}
.cvis-ring--1 { width: 90px;  height: 90px;  animation: cvis-spin-cw  20s linear infinite; }
.cvis-ring--2 { width: 132px; height: 132px; animation: cvis-spin-ccw 30s linear infinite; }
.cvis-sat {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--cvis-m, #BFDBFE);
    box-shadow: 0 2px 8px rgba(0,0,0,0.09);
    color: var(--cvis-c, #3B82F6); font-size: 12px;
}
.cvis-sat--n { top:18px;    left:50%;   transform:translateX(-50%);  animation:cvis-float   3.2s ease-in-out infinite; }
.cvis-sat--e { top:50%;     right:20px; transform:translateY(-50%);  animation:cvis-float-b 2.8s ease-in-out infinite; }
.cvis-sat--s { bottom:18px; left:50%;   transform:translateX(-50%);  animation:cvis-float   3.8s ease-in-out infinite; animation-delay:-2s; }

/* ── 2. Floating tag cloud (Питомцы) ───────────────── */
.cvis-tags { position:absolute; inset:0; pointer-events:none; }
.cvis-tag {
    position: absolute;
    padding: 4px 11px;
    background: #fff;
    border: 1.5px solid var(--cvis-m, #A7F3D0);
    border-radius: 9999px;
    color: var(--cvis-c, #059669);
    font-family: var(--cf-font,'Inter',sans-serif);
    font-size: 11px; font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    white-space: nowrap;
}
.cvis-tag--1 { top:18px;    left:12px;  animation:cvis-float   3.5s ease-in-out infinite; }
.cvis-tag--2 { top:18px;    right:12px; animation:cvis-float-b 3.0s ease-in-out infinite; }
.cvis-tag--3 { bottom:18px; left:50%;   transform:translateX(-50%);
               animation:cvis-float 4.0s ease-in-out infinite; animation-delay:-2.1s; }

/* ── 3. Mini calendar (Приёмы) ─────────────────────── */
.cvis-cal {
    position: absolute; bottom:12px; right:12px;
    width: 96px;
    background: #fff;
    border: 1px solid var(--cvis-m, #BAE6FD);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.09);
    overflow: hidden;
    font-family: var(--cf-font,'Inter',sans-serif);
    animation: cvis-float 4s ease-in-out infinite;
    z-index: 1;
}
.cvis-cal__head {
    padding: 5px 6px;
    background: var(--cvis-c, #0284C7); color: #fff;
    font-size: 8.5px; font-weight: 700;
    text-align: center; text-transform: uppercase; letter-spacing: 0.05em;
}
.cvis-cal__grid {
    display: grid; grid-template-columns: repeat(7,1fr);
    gap: 1px; padding: 3px 3px 4px;
}
.cvis-cal__cell {
    display: flex; align-items: center; justify-content: center;
    height: 11px; border-radius: 2px;
    font-size: 7px; font-weight: 500; color: #9CA3AF;
}
.cvis-cal__cell--today {
    background: var(--cvis-c, #0284C7); color: #fff; font-weight: 700;
    animation: cvis-blink 1.5s ease-in-out infinite;
}

/* ── 4. Equaliser bars (Вакцинации) ────────────────── */
.cvis-eq-wrap {
    position: absolute; bottom:0; left:0; right:0;
    display: flex; flex-direction: column; align-items: center;
    gap: 5px; padding: 0 16px 10px;
    pointer-events:none; z-index:1;
}
.cvis-eq-badge {
    padding: 2px 9px;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--cvis-m, #DDD6FE);
    border-radius: 9999px;
    color: var(--cvis-c, #7C3AED);
    font-family: var(--cf-font,'Inter',sans-serif);
    font-size: 8.5px; font-weight: 700; letter-spacing: 0.07em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07); white-space:nowrap;
}
.cvis-eq { display: flex; align-items: flex-end; gap: 4px; height: 42px; }
.cvis-eq-bar {
    width: 8px; border-radius: 3px 3px 0 0;
    background: var(--cvis-c, #7C3AED); opacity: 0.75;
    transform-origin: bottom;
    animation: cvis-eq 0.7s ease-in-out infinite alternate;
}
.cvis-eq-bar:nth-child(1){animation-delay:0s;    min-height:26px}
.cvis-eq-bar:nth-child(2){animation-delay:-0.14s;min-height:38px}
.cvis-eq-bar:nth-child(3){animation-delay:-0.28s;min-height:28px}
.cvis-eq-bar:nth-child(4){animation-delay:-0.42s;min-height:42px}
.cvis-eq-bar:nth-child(5){animation-delay:-0.56s;min-height:20px}
.cvis-eq-bar:nth-child(6){animation-delay:-0.70s;min-height:34px}
.cvis-eq-bar:nth-child(7){animation-delay:-0.84s;min-height:16px}

/* ── 5. Role chips (Сотрудники) ────────────────────── */
.cvis-roles {
    position: absolute; inset:0;
    display: flex; flex-direction: column;
    align-items: flex-end; justify-content: center;
    gap: 6px; padding-right: 12px; pointer-events:none;
}
.cvis-role {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    background: #fff;
    border: 1.5px solid var(--cvis-m, #99F6E4);
    border-radius: 9999px; color: #374151;
    font-family: var(--cf-font,'Inter',sans-serif);
    font-size: 11px; font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    animation: cvis-float 3.5s ease-in-out infinite;
}
.cvis-role:nth-child(2){animation-delay:-1.2s}
.cvis-role:nth-child(3){animation-delay:-2.5s}
.cvis-role-dot {
    width:7px; height:7px; border-radius:50%;
    background: var(--cvis-c, #0D9488); flex-shrink:0;
}

/* ── 6. Stock bar chart (Остатки) ──────────────────── */
.cvis-stock {
    position: absolute; bottom:10px; left:50%; transform:translateX(-50%);
    display: flex; flex-direction:column; gap:5px; width:116px;
    animation: cvis-float 4s ease-in-out infinite;
    pointer-events:none; z-index:1;
}
.cvis-stock-row {
    display: flex; align-items:center; gap:6px;
    font-family: var(--cf-font,'Inter',sans-serif);
    font-size: 9px; color: #6B7280; font-weight:500;
}
.cvis-stock-lbl { width:28px; text-align:right; flex-shrink:0; }
.cvis-stock-track { flex:1; height:5px; background:#F3F4F6; border-radius:9999px; overflow:hidden; }
.cvis-stock-fill {
    height:100%; border-radius:inherit;
    background: linear-gradient(90deg, var(--cvis-c,#E11D48), var(--cvis-m,#FECDD3));
}

/* Card text body */
.vetka-crm-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    border-top: 1px solid var(--cf-border);
}
.vetka-crm-card__num {
    display: block;
    color: var(--cf-text);
    font-family: var(--cf-font);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}
.vetka-crm-card__title {
    margin: 0;
    color: var(--cf-text);
    font-family: var(--cf-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.vetka-crm-card__desc {
    margin: 0;
    color: var(--cf-muted);
    font-family: var(--cf-font);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
}

/* ── Dashboard panels ── */
.vetka-crm-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 16px;
}
.vetka-crm-panel-shell {
    padding: 1.5px;
    border-radius: var(--cf-r-xl);
    background: var(--cf-shell-grad);
}
.vetka-crm-panel {
    min-width: 0;
    padding: 24px;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(4px) saturate(1.1);
    -webkit-backdrop-filter: blur(4px) saturate(1.1);
    border-radius: calc(var(--cf-r-xl) - 1.5px);
    box-shadow: var(--cf-sh-card);
    font-family: var(--cf-font);
}
.vetka-crm-panel h2 {
    margin: 0 0 18px;
    color: var(--cf-text);
    font-family: var(--cf-font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.vetka-crm-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vetka-crm-bar {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 56px;
    align-items: center;
    gap: 12px;
}
.vetka-crm-bar span {
    overflow: hidden;
    min-width: 0;
    color: var(--cf-muted);
    font-family: var(--cf-font);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vetka-crm-bar__track {
    height: 6px;
    overflow: hidden;
    background: var(--cf-border);
    border-radius: var(--cf-r-pill);
}
.vetka-crm-bar__track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #3B82F6, #60A5FA);
    border-radius: inherit;
}
.vetka-crm-bar b {
    color: var(--cf-text);
    font-family: var(--cf-font);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

/* ── Flow list ── */
.vetka-crm-flow {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Each li IS the shell */
.vetka-crm-flow li {
    padding: 1.5px;
    border-radius: var(--cf-r-md);
    background: var(--cf-shell-grad);
    transition: transform 150ms ease;
}
.vetka-crm-flow li:hover {
    transform: translateX(3px);
}
.vetka-crm-flow__inner {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: center;
    padding: 12px;
    background: var(--cf-bg);
    border-radius: calc(var(--cf-r-md) - 1.5px);
    font-family: var(--cf-font);
}
.vetka-crm-flow__num {
    display: grid;
    grid-row: span 2;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #3B82F6;
    font-family: var(--cf-font);
    font-size: 12px;
    font-weight: 800;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: var(--cf-r-sm);
}
.vetka-crm-flow__title {
    color: var(--cf-text);
    font-family: var(--cf-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.vetka-crm-flow__sub {
    color: var(--cf-muted);
    font-family: var(--cf-font);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.35;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .vetka-crm-hero      { grid-template-columns: 1fr; }
    .vetka-crm-dashboard { grid-template-columns: 1fr; }
    .vetka-crm-metrics   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vetka-crm-live      { justify-self: start; white-space: normal; }
}
@media (max-width: 760px) {
    .vetka-crm-hero                            { padding: 20px; }
    .vetka-crm-metrics                         { grid-template-columns: 1fr; }
    .vetka-crm-bar                             { grid-template-columns: 1fr; gap: 6px; }
    .vetka-crm-bar b                           { text-align: left; }
    .vetka-crm-hero-shell,
    .vetka-crm-card-shell,
    .vetka-crm-panel-shell                     { border-radius: var(--cf-r-lg); }
    .vetka-crm-hero,
    .vetka-crm-card,
    .vetka-crm-panel                           { border-radius: calc(var(--cf-r-lg) - 1.5px); }
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
    background: color-mix(in oklch, var(--surface-2) 45%, transparent) !important;
    border-color: color-mix(in oklch, var(--line) 60%, transparent) !important;
}