html, body { margin: 0; background: var(--background); }
body { font-family: var(--font-sans); color: var(--foreground); font-size: 14px; line-height: 20px; }
a { color: inherit; }
* { box-sizing: border-box; }

.app { display: flex; flex-wrap: wrap; min-height: 100vh; background: var(--background); }
.app__side { flex: 1 1 260px; max-width: 100%; display: flex; flex-direction: column; }
.app__side .k-side { position: sticky; top: 0; min-height: auto; }
.app__main { flex: 999 1 560px; min-width: 0; padding: 16px 24px 48px 8px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .app__main { padding: 8px 16px 40px; } }

.store-pill { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 9999px; background: var(--surface-glass); text-decoration: none; font-size: 13px; line-height: 18px; }
.store-pill b { font-weight: 500; }
.store-dot { width: 8px; height: 8px; border-radius: 9999px; flex: none; }

.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.head__titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.title { margin: 0; font-size: 36px; line-height: 40px; font-weight: 400; }
.subtitle { margin: 0; font-size: 16px; line-height: 24px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grow { flex-grow: 1; }

.panel { border-radius: 32px; background: var(--surface-raised); padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel--flush { padding: 20px 8px 8px; gap: 8px; }
.panel--flush > .panel__head { padding: 0 16px; }
.panel--glass { background: var(--surface-glass); }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.panel__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; }
.muted { color: var(--muted-foreground); }
.mono { font-family: var(--font-mono); }
.nums { font-variant-numeric: tabular-nums; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.span-all { grid-column: 1 / -1; }
.split { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.split__main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.split__aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Компактные плитки с цифрами */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.stat { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 16px 10px 10px; border-radius: 9999px; background: var(--surface-raised); text-decoration: none; color: var(--foreground); }
.stat:hover { box-shadow: inset 0 0 0 1px var(--border); }
.stat__icon { flex: none; width: 36px; height: 36px; border-radius: 9999px; background: var(--lavender); display: inline-flex; align-items: center; justify-content: center; }
.stat__value { font-size: 20px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 14px; line-height: 18px; min-width: 0; }

/* Календарь */
.week { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 6px; min-width: 940px; }
.week--day { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.wcol { display: flex; flex-direction: column; gap: 6px; min-height: 360px; padding: 8px; border-radius: 20px; background: var(--background); }
.wcol--today { background: var(--cream); }
.wcol__head { display: flex; align-items: center; gap: 8px; padding: 0 2px 4px; }
.wcol__dow { color: var(--muted-foreground); font-size: 14px; }
.wdate { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 9999px; font-size: 16px; font-variant-numeric: tabular-nums; }
.wdate--today { background: var(--yellow); color: var(--on-brand); }
.wcol__add { margin-left: auto; }
.ev { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 16px; text-decoration: none; overflow: hidden; }
.ev__car { font-size: 14px; line-height: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev__meta { font-size: 12px; line-height: 16px; }
.ev--0 { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border); color: var(--foreground); }
.ev--1 { background: var(--blue); color: var(--on-blue); }
.ev--2 { background: var(--yellow); color: var(--on-brand); }
.ev--3 { background: var(--primary); color: var(--primary-foreground); }
.ev--4 { background: var(--lime); color: var(--on-brand); }
.ev--5 { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--muted-foreground); }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; min-width: 760px; }
.mcell { min-height: 104px; padding: 8px; border-radius: 16px; background: var(--background); display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 0; text-align: left; font-family: inherit; color: var(--foreground); cursor: pointer; }
.mcell--out { background: transparent; color: var(--muted-foreground); }
.mcell--today { background: var(--cream); }
.mcell .ev { padding: 3px 8px; border-radius: 9999px; font-size: 12px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; }
.legend .ev { padding: 4px 12px; border-radius: 9999px; font-size: 12px; }
.scroll-x { overflow-x: auto; }

/* Таблица дефектов */
.defects { min-width: 760px; }
.drow { display: grid; grid-template-columns: 32px minmax(200px, 2fr) minmax(190px, 1.3fr) 140px 112px; border-top: 1px solid var(--border); font-size: 14px; }
.drow .row { flex-wrap: nowrap; }
.k-alert__text, .k-alert__title { overflow-wrap: anywhere; }
.client-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.client-row__text { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drow--head { border-top: 0; font-weight: 500; color: var(--muted-foreground); }
.drow > div { padding: 12px; min-width: 0; }
.drow > div:first-child { padding-left: 20px; }
.drow .shop { background: var(--background); }
.drow--edit { background: var(--background); }
.drow--edit .shop { background: var(--surface-raised); }
.stack { display: flex; flex-direction: column; gap: 6px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 6px; }
.two-eq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.panel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--border); }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.kv__k { font-size: 13px; color: var(--muted-foreground); }
.kv__v { font-size: 16px; line-height: 24px; }

.req { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.req__main { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.folders { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.folder { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 16px 10px 10px; border: 0; border-radius: 9999px; background: var(--surface-raised); color: var(--foreground); font-family: inherit; text-align: left; cursor: pointer; }
.folder--on { background: var(--primary); color: var(--primary-foreground); }
.folder--on .stat__icon { background: var(--yellow); color: var(--on-brand); }
.flist__item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); }

.empty { padding: 40px 16px; text-align: center; font-size: 16px; }
.toast-wrap { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 2000; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: 12px 16px; border-radius: 16px; background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-lg); font-size: 14px; }
.toast--error { background: var(--destructive); color: var(--destructive-foreground); }
.hidden-input { display: none; }
.btn-link { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Стоимость */
.cost { display: flex; flex-direction: column; border-radius: 16px; background: var(--background); padding: 4px 16px; }
.cost__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; }
.cost__row + .cost__row { border-top: 1px solid var(--border); }
.cost__row b { font-weight: 500; white-space: nowrap; }
.cost__row--total { font-size: 18px; line-height: 24px; }
.cost__row--total b { font-weight: 600; }
.call { display: flex; align-items: center; gap: 14px; padding: 4px 0 8px; }
.call__phone { font-size: 24px; line-height: 32px; font-weight: 600; text-decoration: none; }
.call__phone:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Дашборд */
.dash { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.dash__chart { flex: 999 1 520px; }
.dash__cal { flex: 1 1 300px; overflow: visible; }
.hero { font-size: 36px; line-height: 40px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dayrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 16px; background: var(--background); text-decoration: none; color: var(--foreground); }
.dayrow:hover { box-shadow: inset 0 0 0 1px var(--border); }
.chart { display: flex; flex-direction: column; gap: 8px; }
.chart__plot { position: relative; margin-left: 32px; }
.chart__grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--border); }
.chart__tick { position: absolute; left: -32px; width: 24px; transform: translateY(-50%); text-align: right; font-size: 12px; line-height: 16px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.chart__cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.chart__col { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; cursor: default; }
.chart__col:hover, .chart__col:focus-visible { background: var(--muted); border-radius: 8px; }
.chart__bar { display: block; width: min(24px, 70%); background: var(--blue); border-radius: 4px 4px 0 0; }
.chart__val { position: absolute; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }
.chart__tip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: var(--primary); color: var(--primary-foreground); font-size: 12px; line-height: 16px; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 2; }
.chart__col:hover .chart__tip, .chart__col:focus-visible .chart__tip { opacity: 1; }
.chart__col:first-child .chart__tip { left: 0; transform: none; }
.chart__col:last-child .chart__tip { left: auto; right: 0; transform: none; }
.chart__labels { display: flex; gap: 2px; margin-left: 32px; }
.chart__lbl { flex: 1 1 0; text-align: center; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.chart__lbl--cur { color: var(--foreground); font-weight: 600; }
.chart__table summary { cursor: pointer; font-size: 13px; width: max-content; }
.chart__table table { margin-top: 8px; max-width: 360px; }

/* СТО: бренд в меню, настройки */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.brand__logo { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 12px; background: var(--surface-raised); }
.brand__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.logo-box { height: 148px; border-radius: 20px; background: var(--background); display: flex; align-items: center; justify-content: center; padding: 16px; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.phone-row { display: flex; align-items: flex-end; gap: 8px; }
.phone-row .k-iconbtn { margin-bottom: 4px; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 16px; }

/* СТО: затраты */
.month-nav { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 9999px; background: var(--surface-raised); }
.month-nav__label { min-width: 136px; text-align: center; font-size: 15px; font-weight: 500; }
.stat--btn { border: 0; font-family: inherit; font-size: inherit; text-align: left; cursor: pointer; }
.stat--on { box-shadow: inset 0 0 0 2px var(--foreground); }
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.exp-sec { gap: 8px; }
.tool { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 6px; border-top: 1px solid var(--border); }
.tool__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tool__name { font-weight: 500; min-width: 0; }
.tool__sum { font-weight: 600; white-space: nowrap; }
.tool__bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.exp-sec .panel__title { font-size: 18px; line-height: 24px; }
.util .k-switch { white-space: nowrap; }
.util { display: grid; grid-template-columns: minmax(200px, 1.3fr) 160px minmax(210px, 1fr) 160px; align-items: center; border-top: 1px solid var(--border); }
.util > div { padding: 10px 12px; min-width: 0; }
.util > div:first-child { padding-left: 16px; }
.util--head { font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
@media (max-width: 1100px) {
  .util { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .util--head { display: none; }
}

/* Вход */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--background); }
.login__card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 32px; background: var(--surface-raised); }
.login__title { margin: 0; font-size: 28px; line-height: 36px; font-weight: 500; }
.brand--big .brand__name { font-size: 22px; line-height: 28px; font-weight: 600; }
.brand__mark { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--yellow); color: var(--on-brand); display: inline-flex; align-items: center; justify-content: center; }

/* Низ меню: профиль и выход */
.side-foot { display: flex; flex-direction: column; gap: 8px; }
.side-foot > .k-btn { align-self: flex-start; }
.me { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 9999px; text-decoration: none; color: var(--foreground); background: var(--surface-glass); min-width: 0; }
.me:hover, .me--on { background: var(--surface-raised); }
.me__name { font-weight: 500; font-size: 14px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me__role { font-size: 12px; line-height: 16px; color: var(--muted-foreground); }

/* Сотрудники и роли */
.perm-box { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 20px; background: var(--surface-raised); }
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 20px; }
.roles__item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* Мастер: дефекты */
.mdef { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); }
.mdef > .nums { width: 20px; flex: none; padding-top: 2px; }
.mdef--edit { background: var(--background); }

/* Магазин: заполнение заявки */
.srow-wrap { min-width: 1060px; }
.srow { display: grid; grid-template-columns: 40px minmax(200px, 1.5fr) 150px 160px 120px 220px 150px; align-items: center; border-top: 1px solid var(--border); }
.srow > div { padding: 10px 12px; min-width: 0; }
.srow > div:first-child { padding-left: 20px; }
.srow--head { font-size: 13px; font-weight: 500; color: var(--muted-foreground); }

/* Заявки: факты, история, уведомления */
.req__facts { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.logrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.logrow:first-child { border-top: 0; }
.logrow > .nums { width: 132px; flex: none; font-size: 13px; }
.notif { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); text-decoration: none; color: var(--foreground); }
.notif:first-child { border-top: 0; }
.notif:hover { background: var(--background); border-radius: 16px; }
.notif--new { background: var(--cream); border-radius: 16px; }
.notif__dot { width: 8px; height: 8px; flex: none; border-radius: 9999px; background: var(--blue); }
.cost__row b.cost__wrap { white-space: normal; text-align: right; }
button.store-pill { border: 0; width: 100%; font-family: inherit; color: var(--foreground); text-align: left; cursor: pointer; }
button.store-pill:hover { background: var(--surface-raised); }

/* Журнал обмена */
.jrow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
.jrow:first-child { border-top: 0; }
.jrow__state { gap: 4px; align-items: flex-end; text-align: right; flex: none; max-width: 260px; }

/* ===== Мобильное меню (гамбургер) ===== */
.mtop, .side-close, .side-scrim { display: none; }
@media (max-width: 860px) {
  .app { flex-direction: column; flex-wrap: nowrap; }
  .mtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 900; padding: 10px 12px 10px 16px; background: var(--background); border-bottom: 1px solid var(--border); }
  .mtop .brand { min-width: 0; }
  .mtop__burger { position: relative; flex: none; display: inline-flex; }
  .mtop__dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 9999px; background: var(--blue, var(--primary)); box-shadow: 0 0 0 2px var(--background); pointer-events: none; }
  .app__side { display: none; }
  .app__side--open { display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1001; width: min(320px, 86vw); max-width: none; overflow-y: auto; background: var(--background); box-shadow: 0 16px 48px rgba(0,0,0,.24); animation: side-in .18s ease-out; }
  .app__side--open .k-side { position: static; min-height: 100%; }
  .side-close { display: inline-flex; position: absolute; top: 12px; right: 12px; z-index: 1; }
  .app__side--open .k-side__head { padding-right: 48px; }
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(20, 20, 20, .45); animation: scrim-in .18s ease-out; }
  .app__main { flex: 1 1 auto; }
}
body.no-scroll { overflow: hidden; }
@keyframes side-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .app__side--open, .side-scrim { animation: none; } }