/* Shared Apple-ish tokens for Artus.Snab redesign */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;560;600;640;680;720&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", "Monaco", ui-monospace, monospace;

  /* Base neutrals — warmer than stock iOS to feel less generic */
  --bg:          #f6f5f2;
  --bg-elev:    #ffffff;
  --bg-sunken:  #eeece6;
  --bd:         #e4e2dc;
  --bd-strong:  #d3d0c7;
  --ink:        #1a1a1c;
  --ink-2:      #4b4a48;
  --ink-3:      #7a7872;
  --ink-4:      #a4a299;

  /* Accent — keep apple blue but with a slightly softer chroma */
  --pri:        #2d6cdf;
  --pri-2:      #1f54b8;
  --pri-tint:   #e7efff;

  --success:    #2d9b5c;
  --success-tint:#e3f3ea;
  --warning:    #d08100;
  --warning-tint:#fbf0d9;
  --danger:     #d2362d;
  --danger-tint:#fae2e0;
  --violet:     #7a52d8;
  --violet-tint:#efe9fb;

  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-sm:   6px;

  --shadow-1:  0 1px 2px rgba(20,18,14,.05), 0 0 0 0.5px rgba(20,18,14,.04);
  --shadow-2:  0 6px 18px rgba(20,18,14,.08), 0 0 0 0.5px rgba(20,18,14,.04);
  --shadow-3:  0 22px 48px rgba(20,18,14,.14), 0 0 0 0.5px rgba(20,18,14,.05);

  --control-h: 38px;
  --control-h-sm: 28px;
}

/* Artboard resets */
.ab { font-family: var(--font-sans); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  font-feature-settings: "cv11", "ss01", "ss03";
}
.ab * { box-sizing: border-box; }
.ab button { font-family: inherit; letter-spacing: inherit; }
.ab input, .ab textarea, .ab select { font-family: inherit; letter-spacing: inherit; }

/* Typography helpers */
.t-title { font-size: 22px; font-weight: 680; letter-spacing:-0.028em; line-height: 1.15; }
.t-h2    { font-size: 17px; font-weight: 640; letter-spacing:-0.022em; line-height: 1.25; }
.t-body  { font-size: 14px; line-height: 1.45; letter-spacing: -0.008em; }
.t-small { font-size: 12px; line-height: 1.4; color: var(--ink-3); letter-spacing: 0; }
.t-xs    { font-size: 11px; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); font-weight: 600;}
.t-mono  { font-family: var(--font-mono); letter-spacing: 0; font-feature-settings: "tnum", "zero"; font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height: var(--control-h); padding: 0 14px; border-radius: 8px;
  border: 0; font-size: 14px; font-weight: 580; cursor: pointer;
  background: var(--pri); color: #fff;
  transition: filter .12s ease, transform .05s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
  filter: none !important; transform: none !important;
}
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; color: #fff;
  animation: btn-spin .7s linear infinite;
}
.btn.sec.is-loading::after, .btn.ghost.is-loading::after { color: var(--ink-2); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn.sec { background: rgba(30,28,22,.06); color: var(--ink); }
.btn.sec:hover { background: rgba(30,28,22,.1); }
.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: rgba(30,28,22,.06); }
.btn.sm { height: var(--control-h-sm); padding: 0 10px; font-size: 12.5px; border-radius: 6px; }
.btn.ai { background: linear-gradient(135deg,#8b5cf6,#ec4899 60%,#f59e0b); color:#fff; box-shadow: 0 6px 16px rgba(139,92,246,.28); }
.btn.ai:hover { filter: brightness(1.04) saturate(1.05); }

/* Global focus ring for any custom button without the .btn class */
button:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: 6px; }
/* Disabled state for any element with aria-disabled */
button:disabled { cursor: not-allowed; }

/* Input */
.inp, .sel, .ta {
  width: 100%; max-width: 100%; height: var(--control-h);
  box-sizing: border-box;
  padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--bd); background: #fff; color: var(--ink);
  font: inherit; font-size: 14px;
  transition: border-color .12s, box-shadow .12s;
  appearance: none; -webkit-appearance: none;
}
.ta { height: auto; padding: 10px 12px; min-height: 96px; resize: vertical; }
.sel { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%237a7872' stroke-width='1.4' d='M1 1l4 4 4-4'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right: 30px; }
.inp:focus, .sel:focus, .ta:focus { outline: 0; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(45,108,223,.18); }

.label { display:block; font-size: 12px; color: var(--ink-2); font-weight: 580; margin-bottom: 6px; }

/* Card */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.card .pad { padding: 16px; }
.card .pad-lg { padding: 20px 22px; }

/* Badge */
.badge { display:inline-flex; align-items:center; gap:4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 620; line-height: 1.2; }
.badge .dot { width:6px; height:6px; border-radius:50%; background: currentColor; }
.b-new    { background: var(--pri-tint);     color: #1b49a3; }
.b-work   { background: var(--warning-tint); color: #7a4a00; }
.b-deliv  { background: var(--violet-tint);  color: #4c2ea1; }
.b-done   { background: var(--success-tint); color: #1e6b40; }
.b-pay    { background: #fbe8d1;             color: #8a4d00; }
.b-late   { background: var(--danger-tint);  color: #98241d; }
.b-muted  { background: rgba(30,28,22,.06);  color: var(--ink-2); }

/* Divider */
.hr { height:1px; background: var(--bd); border: 0; }

/* App chrome (shared header) */
.app-header {
  display:flex; align-items:center; gap: 10px;
  padding: 10px 18px;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--bd);
}
.app-header .brand { font-weight: 720; letter-spacing:-0.03em; font-size: 15px; display:flex; align-items:center; gap: 8px; }
.app-header .brand .logo { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #2d6cdf, #7a52d8); display:grid; place-items:center; color:#fff; font-size: 12px; font-weight: 800; }
.app-header .navs { display:flex; gap: 2px; margin-left: 12px; }
.app-header .navs a, .app-header .navs button { display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 7px; font-size: 13px; color: var(--ink-2); text-decoration:none; font-weight:560; background:transparent; border:0; cursor:pointer; font-family:inherit; }
.app-header .navs a.on, .app-header .navs button.on { background: rgba(30,28,22,.07); color: var(--ink); }
.app-header .navs a:hover, .app-header .navs button:hover { background: rgba(30,28,22,.05); }
.app-header .spacer { flex:1; }
.app-header .who { display:flex; align-items:center; gap:8px; padding: 4px 4px 4px 10px; border-radius:999px; background: rgba(30,28,22,.05); font-size: 12.5px; color: var(--ink-2); }
.app-header .who .av { width:22px; height:22px; border-radius:50%; background:#cfd3dc; color:#1a2a4a; display:grid; place-items:center; font-size:11px; font-weight:700; }

/* Tiny SVG icon */
.ico { width:16px; height:16px; flex: 0 0 auto; }
.ico-sm { width:13px; height:13px; }

/* Sheet animations */
@keyframes sheetFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheetSlide { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes slideLeft { from { transform: translateX(100%) } to { transform: translateX(0) } }
@keyframes menuFade { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: translateY(0) } }
@keyframes expandDown { from { opacity: 0; transform: translateY(-6px); max-height: 0 } to { opacity: 1; transform: translateY(0); max-height: 1200px } }

/* ─── Адаптив: <=820px (планшет/телефон) ───────────────────────────── */
@media (max-width: 820px) {
  /* Шапка: уменьшаем паддинги, скрываем «КОМПАНИЯ»-лейбл */
  header > div:first-child > div:nth-child(3) > span:first-child { display: none; }

  /* Таблицы: оборачиваем в горизонтальный скролл */
  .card > table,
  .card > div > table {
    min-width: 720px;
  }
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Модалки: больше места */
  div[onclick] > div[style*="min(560px"],
  div[onclick] > div[style*="min(440px"],
  div[onclick] > div[style*="min(420px"],
  div[onclick] > div[style*="min(380px"] {
    width: 96vw !important;
    max-width: 96vw !important;
  }

  /* Уменьшаем шрифты и отступы в ScreenHeader */
  h1 { font-size: 22px !important; }
  .t-title { font-size: 18px !important; }
}

/* ─── Узкий мобайл: <=520px ──────────────────────────────────────────── */
@media (max-width: 520px) {
  /* Шапка: поджимаем сильнее */
  header { gap: 8px !important; padding: 0 10px !important; }
  /* Скрываем разделитель и блок «КОМПАНИЯ» в десктопной шапке (mobile shell сам показывает оргу) */
  header > div:first-child > div:nth-child(2) { display: none; }
  header > div:first-child > div:nth-child(3) { display: none; }

  /* Навигация: горизонтальный скролл */
  nav[role="navigation"] {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: calc(100vw - 130px);
    -webkit-overflow-scrolling: touch;
  }
  nav[role="navigation"]::-webkit-scrollbar { display: none; }
  nav[role="navigation"] button { flex-shrink: 0; white-space: nowrap; }

  /* Имя пользователя в верхнем меню скрываем — оставляем только инициалы */
  header > div:last-child > div > button > span:first-child { display: none; }

  /* Inline-панели в раскрытой заявке: одна колонка вместо двух */
  td[colspan] > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Split-pane снабженца: убираем фиксированную колонку 340px */
  div[style*="grid-template-columns: 340px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* KPI-сетка 4-5 колонок → 2 */
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: repeat(5"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 3 колонки → 1 */
  div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 2 колонки в настройках → 1 */
  div[style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important;
  }

  /* Контент-страницы: меньше паддинги */
  div[style*="padding: 24px 32px"] { padding: 16px 14px !important; }
  div[style*="padding: 28px 36px"] { padding: 16px 14px !important; }

  /* Чат-панель: меньше лимит ширины */
  div[style*="width:440px"], div[style*="width: 440px"],
  div[style*="width:480px"], div[style*="width: 480px"] {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Кнопки в шапке экрана могут переноситься */
  div[style*="flex-wrap"] { flex-wrap: wrap; }

  /* Inline-аккордеон заявки: вертикальный layout */
  td[colspan] > div { padding: 12px 14px !important; }
}

/* ─── Touch-friendly hit areas — везде на тач-устройствах ─────────── */
@media (hover: none) and (pointer: coarse) {
  button, .btn, [role="button"] {
    min-height: 36px;
  }
  .btn.sm { min-height: 32px; }
}

/* Auth screen entrance ─────────────────────────────────────── */
.auth-split {
  animation: authShellIn .52s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes authShellIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.auth-form-panel > * {
  animation: authFormIn .55s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: 180ms;
}
@keyframes authFormIn {
  from { opacity: 0; transform: translateX(14px); filter: blur(2px); }
  to   { opacity: 1; transform: translateX(0);    filter: blur(0); }
}

/* Cascading rise for brand-panel elements */
.auth-rise {
  animation: authRise .6s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes authRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Drifting background blobs — feels alive, not decorative clip-art */
.auth-blob-1 {
  animation: authBlobDrift1 14s ease-in-out infinite alternate,
             authBlobFade .9s ease-out both;
}
.auth-blob-2 {
  animation: authBlobDrift2 18s ease-in-out infinite alternate,
             authBlobFade 1.2s ease-out .15s both;
}
@keyframes authBlobDrift1 {
  0%   { transform: translate(0, 0)      scale(1); }
  100% { transform: translate(-40px, 30px) scale(1.1); }
}
@keyframes authBlobDrift2 {
  0%   { transform: translate(0, 0)      scale(1); }
  100% { transform: translate(30px, -20px) scale(1.08); }
}
@keyframes authBlobFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Shimmer line sweeping once across the brand panel on mount */
.auth-shimmer {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: authShimmer 1.6s cubic-bezier(.2,.8,.25,1) .4s 1 forwards;
}
@keyframes authShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Logo micro-pop */
.auth-logo-spin {
  animation: authLogoPop .7s cubic-bezier(.3, 1.4, .5, 1) .1s both;
}
@keyframes authLogoPop {
  0%   { opacity: 0; transform: scale(.4) rotate(-20deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-split, .auth-form-panel > *, .auth-rise, .auth-blob-1, .auth-blob-2,
  .auth-shimmer, .auth-logo-spin {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  /* Auth: stack brand-panel on top of form on mobile */
  .auth-split {
    width: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }
  .auth-brand {
    padding: 24px 20px !important;
  }
  .auth-brand > div:nth-child(4) { /* the big title block */
    font-size: 22px !important;
  }
  .auth-form-panel {
    padding: 24px 20px !important;
  }
}

/* ─── Mobile foreman flow ────────────────────────────────────────
   Scopes to .is-mobile-foreman wrapper in shell.jsx so we don't
   affect the desktop V2 embed in screens.jsx. */
.is-mobile-foreman > .ab {
  width: 100% !important;
  height: 100% !important;
  flex: 1;
  min-height: 0;
  background: var(--bg);
}
/* Progress strip — tighter */
.is-mobile-foreman > .ab > div:first-child {
  padding: 10px 16px 0 !important;
}
/* Main scroll area */
.is-mobile-foreman > .ab > div:nth-child(2) {
  padding: 20px 16px !important;
}
/* Titles — scale down */
.is-mobile-foreman h1.t-title {
  font-size: 24px !important;
  max-width: 100% !important;
  line-height: 1.2;
}
/* Object grid → single column on phone */
.is-mobile-foreman > .ab > div:nth-child(2) > div[style*="grid-template-columns"] {
  grid-template-columns: 1fr !important;
}
/* Textarea — shorter on phone */
.is-mobile-foreman textarea {
  min-height: 180px !important;
  font-size: 14px !important;
}
/* Send-footer → stack */
.is-mobile-foreman .btn {
  min-width: 0 !important;
}
/* Success modal — full-width with safe padding */
.is-mobile-foreman > .ab > div[style*="position: absolute"] > div {
  width: calc(100vw - 32px) !important;
  max-width: 420px !important;
  padding: 20px !important;
}