/* =============================================
   Frontier CRM — Global Stylesheet (style.css)
   Single source of truth for look & feel
   ============================================= */

/* ---------- CSS Reset (modern, minimal) ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------- Design tokens ---------- */
:root{
  --bg:#f3f4f6;              /* gray-100 */
  --surface:#ffffff;          /* white */
  --surface-alt:#EAEAEA;      /* light sidebar */
  --text:#1f2937;             /* gray-800 */
  --muted:#6b7280;            /* gray-500/600 */
  --brand:#fb923c;            /* orange-400/500 */
  --brand-600:#ea580c;        /* orange-600 */
  --primary:#2563eb;          /* blue-600 */
  --success:#16a34a;          /* green-600 */
  --warning:#ca8a04;          /* yellow-600 */
  --danger:#dc2626;           /* red-600 */
  --ring:rgba(99,102,241,.35);
  --radius:16px;              /* rounded-2xl vibe */
  --shadow:0 10px 20px -8px rgba(0,0,0,.15),0 4px 10px -6px rgba(0,0,0,.08);
}

html{color-scheme:light}
body{background:var(--bg);color:var(--text);font-weight: 400; font-size: 14px; line-height: 1.45; font-family: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji"}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:16rem;background:var(--surface-alt);padding:1.5rem 1rem;position:relative}
.sidebar__logo{height:4rem;margin:0 auto 1.5rem}
.sidebar__nav{display:flex;flex-direction:column;gap:.75rem}
.sidebar-link{display:block;padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.75rem;transition:.15s}
.sidebar-link:hover{color:var(--brand-600);border-color:var(--brand)}
.sidebar-link--active{background:var(--brand);color:#fff;border-color:transparent}

.content{flex:1;padding:1rem}
@media (min-width:768px){.content{padding:2rem}}

.container{max-width:112rem;margin:0 auto}

/* --- Mobile sidebar (burger) --- */
@media (max-width: 767px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 50;
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
}

/* Mobile topbar + backdrop (optional) */
.topbar{position:sticky;top:0;z-index:40;background:#EAEAEA;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;z-index: 40;}
.backdrop.is-open{display:block}

/* ---------- Cards ---------- */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem}
@media (min-width:640px){.card{padding:1.25rem}}
.card--muted{background:#eff6ff} /* blue-50 */

/* ---------- Headings & text helpers ---------- */
.h1{font-weight:700;font-size:1.25rem}
@media (min-width:640px){.h1{font-size:1.5rem}}
.h2{font-weight:700;font-size:1.125rem}
.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;border-radius:.75rem;border:1px solid transparent;cursor:pointer;transition:.15s;font-weight:600}
.btn:focus{outline:none;box-shadow:0 0 0 4px var(--ring)}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:#1d4ed8}
.btn--brand{background:var(--brand);color:#fff}
.btn--brand:hover{background:var(--brand-600)}
.btn--danger{background:var(--danger);color:#fff}
.btn--outline{background:#fff;border-color:#d1d5db;color:var(--text)}
.btn--outline:hover{border-color:var(--brand);color:var(--brand-600)}

/* ---------- Forms ---------- */
.label{display:block;margin-bottom:.25rem;font-weight:500}
.input,.select,.textarea{width:100%;padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.5rem;background:#fff;transition:border-color .15s,box-shadow .15s}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.textarea{min-height:7rem;resize:vertical}

/* ---------- Grid helpers (simple, responsive) ---------- */
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* ---------- Utilities ---------- */
.rounded{border-radius:var(--radius)}
.shadow{box-shadow:var(--shadow)}
.section{margin-bottom:1.5rem}
.center-between{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.badge{display:inline-block;padding:.125rem .5rem;border-radius:.5rem;font-size:.75rem}
.badge--success{background:#dcfce7;color:#166534}
.badge--warn{background:#fef9c3;color:#854d0e}

/* ---------- Table (for lists) ---------- */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table thead th{font-weight:600;text-align:left;color:var(--muted);padding:.5rem .75rem}
.table tbody tr{background:#fff}
.table tbody td{padding:.75rem}
.table tbody tr:hover{box-shadow:var(--shadow)}

/* ---------- Modal (robot page) ---------- */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:50}
.modal.is-open{display:flex}
.modal__content{background:#fff;border-radius:12px;padding:1rem;max-width:28rem;width:100%}

/* ---------- Charts containers ---------- */
.chart{
  position: relative;
  width: 100%;            /* ← ширина по контейнеру */
  height: 20rem;
}
@media (min-width:640px){.chart{height:22rem}}
@media (min-width:1024px){.chart{height:24rem}}

/* ВАЖНО: заставляем canvas занять всю обёртку,
   перекрываем height:auto из ресета */
.chart > canvas{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* (опционально) Полноширинный режим без внутренних отступов .card */
.card .chart--fullbleed{
  width: calc(100% + 2rem);
  margin-left: -1rem;
}
@media (min-width:640px){
  .card .chart--fullbleed{
    width: calc(100% + 2.5rem);
    margin-left: -1.25rem;
  }
}


/* ---------- Accessibility ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Page-specific light theming ---------- */
.kur-card{background:#eff6ff}
.ya-card{background:#fef3c7}
.cooper-card{background:#ecfdf5}

/* ---------- Links ---------- */
a{color:inherit;text-decoration:none}
a.link{color:var(--primary)}
a.link:hover{text-decoration:underline}

/* ---------- Favicon fallback size ---------- */
.link-favicon{width:16px;height:16px}

/* Sidebar submenu с плавным разворотом */
.sidebar-item { position: relative; }
.submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .5rem;
  margin-left: 1rem;
  transition: max-height .3s ease, opacity .3s ease;
}
.sidebar-item:hover .submenu {
  max-height: 500px; /* достаточно большое значение для всех подпунктов */
  opacity: 1;
}
.sidebar-sublink {
  padding: .25rem .75rem;
  border-radius: .5rem;
  font-size: .875rem;
  color: var(--muted);
  transition: .15s;
}
.sidebar-sublink:hover {
  color: var(--brand-600);
  background: #fff;
}



/* Активные ссылки в сайдбаре */
.sidebar-link--active,
.sidebar-sublink.sidebar-link--active {
  color: var(--primary, #2563eb);
  background: rgba(37,99,235,0.08);
  font-weight: 600;
}



/* Мобильная навигация */
.topnav-link,
.topnav-sublink {
  padding: .25rem .5rem;
  border-bottom: 2px solid transparent;
}
.topnav-link--active {
  border-bottom-color: currentColor;
  font-weight: 600;
}