@font-face {
  font-family: "Raleway SVP";
  src: url("/static/fonts/raleway-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Targeted purchases and receipts ---------- */
.primary-link,.secondary-link,.print-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:9px 15px;border-radius:12px;text-decoration:none;font-weight:750}.primary-link{background:var(--brand-dark);color:#fff}.secondary-link{border:1px solid var(--border);background:#fff;color:var(--ink)}.print-button{border:1px solid var(--border);background:#fff;color:var(--ink);cursor:pointer;font-family:inherit;font-size:inherit}.print-button:hover{background:var(--panel-hover)}
.expense-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:6px 0 20px}.expense-head h1,.expense-form-shell h1,.expense-detail-head h1{margin:2px 0 5px;line-height:1.12}.expense-head p,.expense-form-shell header p,.expense-detail-head p{margin:0;color:var(--muted)}.expense-head-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.expense-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.expense-summary article{padding:17px;border:1px solid var(--border);border-radius:16px;background:#fff}.expense-summary strong,.expense-summary span{display:block}.expense-summary strong{font:700 28px/1 "Acrom SVP",sans-serif}.expense-summary span{margin-top:7px;color:var(--muted);font-size:12px}
.expense-list{display:grid;gap:9px}.expense-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:15px 17px;border:1px solid var(--border);border-radius:15px;background:#fff;color:var(--ink);text-decoration:none}.expense-row-main,.expense-row-side{display:flex;flex-direction:column}.expense-row-main{min-width:0}.expense-row-main small{color:var(--brand-dark);font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.expense-row-main strong{overflow-wrap:anywhere;font-size:16px}.expense-row-main span{color:var(--muted);font-size:12px}.expense-row-side{align-items:flex-end;gap:6px;white-space:nowrap}
.expense-status{display:inline-flex;align-items:center;width:fit-content;padding:5px 8px;border-radius:999px;background:#eee;color:var(--muted);font-size:10px;font-weight:800}.status-requested{background:#fff0db;color:#8b5700}.status-funded{background:#fee5dc;color:var(--brand-dark)}.status-receipt_submitted{background:#e7eefb;color:#285d9e}.status-needs_clarification{background:#fff0db;color:#8b5700}.status-verified{background:var(--ok-bg);color:var(--ok)}.status-new{background:#fff0db;color:#8b5700}.status-in_progress{background:#e7eefb;color:#285d9e}.status-on_review{background:#fff0db;color:#8b5700}.status-done{background:var(--ok-bg);color:var(--ok)}.status-side{background:#f0e6ff;color:#6b3fa0}.status-routine{background:#e0f2fe;color:#0369a1}.status-critical{background:#fde2de;color:#c62f1a}
.expense-empty{padding:48px 20px;border:1px dashed var(--border);border-radius:18px;text-align:center}.expense-empty strong,.expense-empty span{display:block}.expense-empty span{color:var(--muted)}.expense-form-shell{max-width:620px;margin:12px auto;padding:24px;border:1px solid var(--border);border-radius:20px;background:#fff}.expense-form{display:grid;gap:12px;margin-top:20px}.expense-form label{margin:0;color:var(--ink);font-weight:650}.expense-form textarea{width:100%;margin-top:4px;padding:11px 14px;border:1px solid var(--border);border-radius:10px}.expense-submit{width:100%;margin-top:5px}
.expense-detail-head{margin:10px 0 18px}.expense-detail-head .expense-status{margin-bottom:8px}.expense-money-card{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--border)}.expense-money-card div{padding:16px;background:#fff}.expense-money-card span,.expense-money-card strong{display:block}.expense-money-card span{color:var(--muted);font-size:11px}.expense-money-card strong{margin-top:4px;font-size:19px}.expense-difference strong{color:var(--brand-dark)}
.expense-note,.expense-action-card,.expense-receipts{margin-top:16px;padding:18px;border:1px solid var(--border);border-radius:17px;background:#fff}.expense-note p,.expense-action-card p{margin:5px 0 0;color:var(--muted)}.expense-action-card h2,.expense-receipts h2{margin:0 0 10px;font-size:19px}.expense-action-card summary{cursor:pointer;font:700 18px "Acrom SVP",sans-serif}.expense-inline{display:flex;align-items:end;gap:10px;margin-top:14px}.expense-inline label{flex:1;margin:0}.expense-close{display:flex;gap:8px;margin-top:12px}.expense-close input{margin:0}
.expense-receipts{display:grid;gap:10px}.receipt-card{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:12px;padding:12px 0;border-top:1px solid var(--border)}.receipt-card>a img{width:86px;height:86px;border-radius:11px;object-fit:cover}.receipt-card>div{min-width:0}.receipt-card small,.receipt-card strong,.receipt-card span{display:block}.receipt-card small,.receipt-card p{color:var(--muted);font-size:11px}.receipt-card p{margin:5px 0 0}.receipt-card form{min-width:160px}.receipt-card form label{margin:0 0 6px}.receipt-review-actions{display:grid;gap:8px;min-width:190px}.receipt-review-actions form{display:grid;gap:6px}.receipt-review-actions textarea,.receipt-response textarea{width:100%;padding:9px;border:1px solid var(--border);border-radius:9px;font:inherit}.receipt-conversation,.receipt-response{grid-column:1/-1}.receipt-conversation{display:grid;gap:7px;padding:10px;border-radius:12px;background:#f6f6f6}.receipt-message{max-width:78%;padding:9px 11px;border-radius:11px;background:#fff}.receipt-message.clarification_response{margin-left:auto;background:var(--panel-hover)}.receipt-message p{margin:2px 0 0;font-size:13px}.receipt-response{display:grid;gap:10px;padding:13px;border:1px solid #e7bd71;border-radius:12px;background:var(--warn-bg)}.receipt-response label{margin:0;color:var(--ink);font-weight:650}
.registry-summary{display:flex;align-items:baseline;gap:9px;margin-bottom:15px;padding:18px;border-radius:16px;background:var(--ink);color:#fff}.registry-summary strong{font:700 28px "Acrom SVP",sans-serif}.registry-summary span{color:#d9d4d0}.registry-table{overflow-x:auto;border:1px solid var(--border);border-radius:15px;background:#fff}.registry-row{display:grid;grid-template-columns:100px 160px minmax(230px,1fr) 110px 90px;gap:10px;min-width:750px;padding:12px 14px;border-top:1px solid var(--border);font-size:13px}.registry-row:first-child{border-top:0}.registry-row span:nth-child(3){display:grid}.registry-row small{color:var(--muted)}.registry-head-row{background:#f6f6f6;color:var(--muted);font-size:11px;font-weight:800}
@media(max-width:620px){.expense-head{align-items:stretch;flex-direction:column}.expense-head-actions{justify-content:stretch}.expense-head-actions>*{flex:1}.expense-summary{gap:7px}.expense-summary article{padding:12px 10px}.expense-summary strong{font-size:23px}.expense-row{padding:13px}.expense-row-side>strong{font-size:13px}.expense-form-shell{padding:18px 14px}.expense-money-card{grid-template-columns:1fr 1fr}.expense-inline,.expense-close{align-items:stretch;flex-direction:column}.receipt-card{grid-template-columns:68px minmax(0,1fr)}.receipt-card>a img{width:68px;height:68px}.receipt-card form{grid-column:1/-1}}
@media print{.topbar,.expense-head-actions,.network-banner{display:none!important}.page{max-width:none;padding:0}.registry-table{overflow:visible}.registry-row{min-width:0}}

@font-face {
  font-family: "Raleway SVP";
  src: url("/static/fonts/raleway-semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway SVP";
  src: url("/static/fonts/raleway-bold.ttf") format("truetype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Acrom SVP";
  src: url("/static/fonts/acrom-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The app is light-only on purpose. Without this line a phone set to dark
     mode still repaints native controls — inputs, selects, scrollbars — dark,
     leaving dark fields on white cards. This pins them to the light set. */
  color-scheme: light;

  --brand: #f25826;
  --brand-dark: #c93f15;
  --ink: #271c14;
  --muted: #6b5d4f;
  --panel: #ffffff;
  --panel-hover: #fff4ef;
  --border: #e8e4e1;
  --bg: #f5f6f7;
  --tap: 48px;

  --danger: #c62f1a;
  --danger-bg: #fde2de;
  --warn: #a5680a;
  --warn-bg: #fbeecd;
  --ok: #1f7a4d;
  --ok-bg: #e1f3e8;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: "Raleway SVP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-overflow-scrolling: touch;
}

/* Prevent overscroll rubber‑banding on mobile wrappers */
html, body { overflow-x: clip; overscroll-behavior-x: none; }
main.page { overscroll-behavior-y: contain; }

h1, h2, .brand, .material-quantity { font-family: "Acrom SVP", "Raleway SVP", sans-serif; }

button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(242, 88, 38, .32);
  outline-offset: 2px;
}

/* ── Global select styling ── */
select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 48px;
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b5d4f' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center no-repeat;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
select:hover { border-color: var(--brand); }
select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(242,88,38,.12); outline: none; }
select:disabled { opacity: .5; cursor: default; background-color: #f5f5f5; }

.network-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 7px 16px;
  background: #3a3029;
  color: #fff;
  text-align: center;
  font-size: 13px;
}

a, button, input, select { touch-action: manipulation; }

/* ---------- Topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 16px;
  padding-top: calc(9px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.brand img { display: block; width: 190px; height: auto; }

.topbar-user {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.account-card { max-width: 460px; margin: 24px auto; }

.topbar-account { display: flex; align-items: center; gap: 4px; }
.logout-form { margin: 0; }
.topbar-action { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; color: var(--muted); background: transparent; }
.topbar-account > a.topbar-action { border-radius: 10px; text-decoration: none; }
.topbar-action:active { color: var(--brand-dark); background: var(--panel-hover); }

/* ---------- Layout ---------- */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.eyebrow { margin: 0 0 2px; color: var(--brand-dark); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.directory-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.add-object-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 13px; margin-left: auto; border-radius: 11px; background: var(--brand-dark); color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; }
.directory-admin-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.archive-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700; }
.directory-head h1, .object-hero h1 { margin: 0; line-height: 1.15; }
.view-switch { display: flex; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.view-switch-btn { min-width: auto; min-height: 40px; padding: 7px 13px; border-radius: 9px; background: transparent; color: var(--muted); }
.view-switch-btn.is-active { background: var(--ink); color: #fff; }

.flash {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  transition: opacity 0.3s ease, transform 0.3s ease, margin 0.3s ease;
}
.flash.is-dismissing {
  opacity: 0;
  transform: translateY(-8px);
  margin-bottom: 0;
  pointer-events: none;
}

.flash-error {
  background: var(--danger-bg);
  color: var(--danger);
}

.flash-success {
  background: var(--ok-bg);
  color: var(--ok);
}

.error-card { max-width: 480px; margin: 12vh auto 0; padding: 30px 24px; border: 1px solid var(--border); border-radius: 20px; background: #fff; text-align: center; }
.error-code { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: var(--panel-hover); color: var(--brand-dark); font-weight: 800; }
.error-card h1 { margin: 12px 0 6px; font-size: 25px; }
.error-card p { margin: 0 0 20px; color: var(--muted); }
.error-card a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 9px 16px; border-radius: 11px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 700; }

.muted { color: var(--muted); }

/* ---------- Icons ---------- */

.icon {
  flex-shrink: 0;
  vertical-align: -4px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Forms & buttons (touch-first) ---------- */

form label {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

input, button { font: inherit; }

input:not([type]), input[type="text"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input[type="file"], textarea, select {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: 4px;
  padding: 10px 14px;
  font-size: 16px; /* prevents iOS auto-zoom on focus */
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(242, 88, 38, .12); outline: none; }
textarea { resize: vertical; font: inherit; }

button {
  cursor: pointer;
  border: none;
  border-radius: 10px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 10px 18px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  transition: background-color .15s ease, transform .1s ease;
}

button:active { background: var(--brand-dark); transform: scale(.97); }

.text-button {
  background: transparent;
  color: var(--brand-dark);
  padding: 10px 12px;
}

.text-button:active { background: var(--panel-hover); }

.text-button.danger { color: var(--danger); }
.text-button.danger:active { background: var(--danger-bg); }

/* ---------- Login & registration ---------- */

.auth-page {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 15% 0%, rgba(242, 88, 38, .14), transparent 34%),
    linear-gradient(180deg, #fffaf7 0%, #f5f6f7 58%);
}

.auth-page::before {
  content: "";
  position: fixed;
  inset: auto -230px -280px auto;
  width: 620px;
  height: 760px;
  background: url("/static/brand/svp-rings.png") center / contain no-repeat;
  opacity: .035;
  pointer-events: none;
}

.auth-page .page { max-width: none; min-height: 100dvh; padding-top: max(28px, env(safe-area-inset-top)); }
.auth-page .flash { width: min(100%, 460px); margin-left: auto; margin-right: auto; }

.auth-shell { width: min(100%, 420px); margin: 0 auto; }
.auth-shell-wide { width: min(100%, 460px); }

.auth-brand { display: flex; align-items: center; justify-content: center; margin: 0 0 30px; }
.auth-brand img { display: block; width: min(78vw, 310px); height: auto; }
.auth-back { display: inline-flex; min-height: 44px; align-items: center; margin-bottom: 8px; color: var(--brand-dark); text-decoration: none; font-size: 14px; font-weight: 650; }

.login-card {
  margin: 0 auto;
  padding: 26px 22px 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 18px 60px rgba(39, 28, 20, .08);
}

.auth-heading { margin-bottom: 22px; }
.auth-heading h1 { margin: 0 0 8px; font-size: 27px; line-height: 1.15; letter-spacing: -.02em; }
.auth-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.auth-kicker { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--brand-dark); background: var(--panel-hover); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.auth-form label { margin: 14px 0 6px; color: var(--ink); font-size: 13px; font-weight: 650; }
.auth-form input { margin: 0; border-radius: 12px; background: #fbfbfb; }
.password-field { position: relative; }
.password-field input { padding-right: 88px; }
.password-toggle { position: absolute; top: 4px; right: 4px; min-width: auto; min-height: 44px; padding: 0 10px; background: transparent; color: var(--brand-dark); font-size: 12px; }
.password-toggle:active { background: var(--panel-hover); }
.auth-submit { width: 100%; margin-top: 22px; min-height: 52px; border-radius: 13px; background: var(--brand-dark); font-weight: 750; }
.auth-submit-link { display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; }
.auth-remember { display: flex; align-items: center; gap: 8px; margin-top: 16px; cursor: pointer; font-size: 14px; color: var(--ink); }
.auth-remember input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-dark); border-radius: 4px; cursor: pointer; }
.auth-switch { margin: 18px 0 0; color: var(--muted); text-align: center; font-size: 14px; }
.auth-switch a { color: var(--brand-dark); font-weight: 700; }
.auth-footnote { margin: 18px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.field-help { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.password-rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.password-rules span { padding: 4px 8px; border-radius: 999px; background: #f0f1f2; color: var(--muted); font-size: 11px; }
.password-rules span::before { content: "○ "; }
.password-rules span.is-valid { background: var(--ok-bg); color: var(--ok); }
.password-rules span.is-valid::before { content: "✓ "; }
.form-error { margin: 7px 0 0; color: var(--danger); font-size: 12px; }
.auth-disabled { text-align: center; margin: 0; }
.auth-lock { display: block; margin-bottom: 10px; font-size: 34px; }

/* ---------- Administrator invitations ---------- */

.admin-head { margin: 8px 0 18px; }
.admin-head h1 { margin: 0; font-size: 28px; }
.admin-head p { max-width: 560px; margin: 7px 0 0; color: var(--muted); font-size: 14px; }

.invite-result { position: relative; display: flex; flex-direction: column; gap: 7px; margin: 12px 0 18px; padding: 20px; overflow: hidden; border-radius: 18px; background: var(--ink); color: #fff; }
.invite-result::after { content: ""; position: absolute; right: -90px; bottom: -170px; width: 290px; height: 360px; background: url("/static/brand/svp-rings.png") center / contain no-repeat; opacity: .1; pointer-events: none; }
.invite-result span, .invite-result small { position: relative; z-index: 1; color: #d9d4d0; font-size: 12px; }
.invite-result strong { position: relative; z-index: 1; font-family: "Acrom SVP", sans-serif; font-size: clamp(19px, 6vw, 29px); letter-spacing: .04em; overflow-wrap: anywhere; }
.copy-code { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; align-self: flex-start; margin-top: 4px; background: #fff; color: var(--ink); }
.copy-code:active { background: #f0eeec; }

.invite-create { margin-top: 0; }
.invite-form > label { font-weight: 600; color: var(--ink); }
.invite-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.invite-options label { font-weight: 600; color: var(--ink); }
.invite-options select { display: block; width: 100%; min-height: 48px; margin-top: 5px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; }
.invite-form > button { width: 100%; margin-top: 18px; background: var(--ink); }

.invite-list { display: flex; flex-direction: column; }
.invite-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 14px 0; border-top: 1px solid var(--border); }
.invite-row:first-child { border-top: 0; padding-top: 2px; }
.invite-row-main { min-width: 0; }
.invite-row-main strong, .invite-row-main span, .invite-row-main small { display: block; }
.invite-row-main strong { font-size: 14px; }
.invite-row-main span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.invite-row-main small { margin-top: 3px; color: #968d87; font-size: 10px; }
.invite-row form { grid-column: 2; margin: 0; }
.invite-row .text-button { min-width: 0; min-height: 34px; padding: 5px 8px; font-size: 11px; }
.invite-status { align-self: start; padding: 4px 8px; border-radius: 999px; background: #eee; color: var(--muted); font-size: 10px; font-weight: 700; }
.invite-status.is-active { background: var(--ok-bg); color: var(--ok); }

/* ---------- Map + object list (mobile-first: fullscreen map + bottom sheet) ---------- */

.workspace {
  position: relative;
  height: calc(100dvh - 64px - env(safe-area-inset-top));
  margin: -16px;
  margin-top: 0;
}

.map-panel {
  position: absolute;
  inset: 0;
}

.map { width: 100%; height: 100%; }

.map-tools { position: absolute; z-index: 5; top: 14px; right: 14px; }
.map-tool { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: #fff; color: var(--brand-dark); box-shadow: 0 4px 16px rgba(39, 28, 20, .16); font-size: 26px; }
.map-tool.is-loading { animation: pulse 1s infinite alternate; }
@keyframes pulse { to { opacity: .45; } }

.map-fallback { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px; background: linear-gradient(145deg, #f0f1f2, #fff); text-align: center; }
.map-fallback[hidden] { display: none; }
.map-fallback-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 20px; background: var(--panel-hover); color: var(--brand-dark); font-size: 34px; }
.map-fallback p { max-width: 360px; margin: 8px 0 18px; color: var(--muted); font-size: 14px; }
.map-fallback button { background: var(--ink); }

.map-selection { position: absolute; z-index: 6; left: 14px; right: 14px; bottom: calc(32vh + 12px); padding: 14px 48px 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: 0 10px 32px rgba(39, 28, 20, .2); }
.map-selection[hidden] { display: none; }
.map-selection strong { display: block; font-size: 16px; }
.map-selection p { margin: 3px 0; color: var(--muted); font-size: 13px; }
.map-selection > span { color: var(--brand-dark); font-size: 12px; font-weight: 700; }
.map-selection > div { display: flex; gap: 8px; margin-top: 12px; }
.map-selection a { display: flex; align-items: center; justify-content: center; min-height: 44px; flex: 1; border: 1px solid var(--border); border-radius: 11px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700; }
.map-selection .selection-route { border-color: var(--brand-dark); background: var(--brand-dark); color: #fff; }
.selection-close { position: absolute; top: 6px; right: 6px; min-width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--muted); font-size: 24px; }
.selection-photo { float: left; width: 62px; height: 62px; margin: 0 10px 8px 0; border-radius: 11px; object-fit: cover; }

.sheet {
  --sheet-height: 32vh;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: 100%;
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 16px 16px 0 0;
  background: var(--bg);
  box-shadow: 0 -6px 24px rgba(39, 28, 20, 0.16);
  padding: 6px 14px calc(12px + env(safe-area-inset-bottom));
  height: var(--sheet-height);
  max-height: calc(100dvh - 72px);
  display: flex;
  flex-direction: column;
  transition: height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sheet::backdrop { display: none; }

.sheet-handle {
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  border-radius: 3px;
  background: transparent;
  margin: 0 auto 2px;
  cursor: pointer;
}

.sheet-handle::after { content: ""; display: block; width: 42px; height: 5px; margin: 9px auto; border-radius: 3px; background: #c9c3bf; }

.sheet-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.result-count { margin: 0 2px; color: var(--muted); font-size: 12px; }

.sheet-header h2 { margin: 0; font-size: 16px; }

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box .icon {
  position: absolute;
  left: 12px;
  color: var(--muted);
  pointer-events: none;
}

.search-box input {
  padding-left: 38px;
  padding-right: 42px;
}

.search-clear { position: absolute; right: 4px; min-width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--muted); font-size: 24px; }
.search-clear[hidden] { display: none; }
.list-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.quick-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.quick-filter { flex: 0 0 auto; min-width: auto; min-height: 44px; padding: 6px 11px; border: 1px solid var(--border); background: #fff; color: var(--muted); font-size: 12px; }
.quick-filter.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.sort-button { min-width: auto; min-height: 44px; padding: 5px 9px; border: 1px solid var(--border); background: #fff; color: var(--muted); font-size: 11px; }
.sort-button.is-active { border-color: var(--brand); color: var(--brand-dark); background: var(--panel-hover); }

.object-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.object.is-active { background: var(--panel-hover); border-color: var(--brand); }

.object {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
}

.object:active { background: var(--panel-hover); border-color: var(--border); }

/* dead — object-icon kept only as a reference point for the card cover placeholder */
.object-icon { display: none; }
.object-thumb { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 11px; object-fit: cover; background: #eee; }
.favorite-mark { color: var(--brand); font-family: sans-serif; font-size: 13px; }

.object-body { min-width: 0; }
.object-body strong { display: block; font-size: 15px; }
.object-body span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.object-body small { display: block; margin-top: 2px; color: #93887f; font-size: 11px; }
.object-distance { flex-shrink: 0; color: var(--brand-dark); font-size: 12px; font-weight: 700; }
.object-chevron { margin-left: auto; color: #aaa19a; font-size: 26px; }

.admin-nav { display: flex; align-items: center; gap: 4px; }
.admin-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 700; }
.admin-nav a:hover { background: var(--panel-hover); }
.map-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 4px; }
.map-filter-panel { border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.map-filter-panel > summary { min-height: 44px; padding: 10px 12px; cursor: pointer; color: var(--brand-dark); font-size: 13px; font-weight: 700; }
.map-filter-panel .map-filters { padding: 0 10px 10px; }
.map-filters label { font-size: 12px; color: var(--muted); }
.map-filters select { min-height: 40px; margin-top: 3px; font-size: 13px; }
.map-filters .check-row, .map-filters button { grid-column: 1 / -1; }
.last-sync { color: var(--muted); white-space: nowrap; font-size: 12px; }
.user-list, .audit-table, .import-preview { display: grid; gap: 8px; }
.user-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.user-row:last-child { border-bottom: 0; }
.user-row.is-disabled { opacity: .58; }
.user-row > div:first-child { display: grid; gap: 3px; }
.user-row span, .user-row small { color: var(--muted); font-size: 13px; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.row-actions form { margin: 0; }
.audit-table > div { display: grid; grid-template-columns: 130px 1fr 1fr 120px; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.password-result code { display: block; padding: 16px; margin: 16px 0; border-radius: 10px; background: #f4f1ed; font-size: 18px; word-break: break-all; }
.document-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.document-row a { display: grid; color: var(--ink); text-decoration: none; }
.document-row span { color: var(--muted); font-size: 12px; }
.photo-edit summary, .contact-edit summary { cursor: pointer; color: var(--brand-dark); font-size: 12px; }
.photo-edit .inline-form, .contact-edit .inline-form { padding-top: 8px; }
.contact-edit { margin-left: auto; }
.material-update-form { flex-wrap: wrap; }
.material-reason { display: none; flex: 1 1 160px; }
.material-save { display: none; }
.material-update-form.is-dirty .material-reason, .material-update-form.is-dirty .material-save { display: block; }
.pagination { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; }
.import-preview > div { display: grid; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.import-preview .has-error { border-color: #b73729; color: #8f241b; }

@media (max-width: 720px) {
  .admin-nav span { display: none; }
  .admin-nav a { width: 42px; justify-content: center; padding: 0; }
  .user-row { display: grid; }
  .row-actions { justify-content: flex-start; }
  .audit-table > div { grid-template-columns: 1fr 1fr; }
  .map-filters { grid-template-columns: 1fr; }
  .map-filters > * { grid-column: 1 !important; }
  .form-grid, .coordinate-grid { grid-template-columns: 1fr; gap: 0; }
  .coordinate-grid .secondary-button { margin-top: 10px; }
  .object-body small, .user-row small, .last-sync { font-size: 12px; }
}

.list-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.list-skeleton i { display: block; height: 66px; border-radius: 12px; background: linear-gradient(90deg, #eceeef 25%, #f7f8f8 45%, #eceeef 65%); background-size: 300% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
.list-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.list-state span { margin-top: 4px; }
.list-state button { margin-top: 12px; }

.list-state.list-error { color: var(--danger); }
.list-state .icon { flex-shrink: 0; }

/* ---------- Object passport page ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  color: var(--brand-dark);
  text-decoration: none;
  font-size: 15px;
}

.object-hero { padding: 8px 0 4px; }
.archive-badge { display: inline-flex; margin: 0 0 6px; padding: 4px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 11px; font-weight: 800; }
.object-address { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 4px; color: var(--muted); }
.object-address .icon { margin-top: 2px; color: var(--brand); }

.location-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-form { margin: 0; }
.chip-form button { font-family: inherit; }

.access-alert { margin-top: 14px; padding: 14px 16px; border-left: 4px solid var(--brand); border-radius: 0 12px 12px 0; background: #fff2eb; }
.access-alert strong { font-size: 13px; }
.access-alert p { margin: 4px 0 0; white-space: pre-wrap; font-size: 14px; }

.photo-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 72%); gap: 10px; margin-top: 14px; overflow-x: auto; scroll-snap-type: x mandatory; }
.photo-card { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: #fff; scroll-snap-align: start; border: 1px solid var(--border); }
.photo-card img { display: block; width: 100%; height: 160px; object-fit: cover; }
.photo-card figcaption { display: flex; flex-direction: column; padding: 9px 11px; font-size: 12px; }
.photo-card figcaption span { color: var(--muted); }
.photo-delete { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(39,28,20,.78); font-size: 22px; }
.admin-add-card summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; color: var(--brand-dark); font-weight: 700; }
.check-row { display: flex !important; align-items: center; gap: 8px; margin: 4px 0 !important; color: var(--ink) !important; }
.check-row input { width: 20px !important; min-height: 20px !important; margin: 0 !important; }

.action-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.action-chip.action-primary { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.action-chip.action-primary .icon { color: #fff; }

.action-chip:active { background: var(--panel-hover); }
.action-chip .icon { color: var(--brand); }
.action-chip.is-favorite { background: var(--warn-bg); border-color: #e7bd71; }
.action-chip.is-favorite .icon { color: #e7a500; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}

.toast.visible { opacity: 1; transform: translate(-50%, 0); }

.card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-top: 14px;
  background: var(--panel);
}

.card h2 {
  margin-top: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card h2 .icon { color: var(--brand); }

.contact-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.tel-link {
  display: flex;
  gap: 8px;
  min-height: var(--tap);
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
}
.tel-link:active { background: var(--panel-hover); }
.tel-link .icon { color: var(--brand); }
.tel-link > span { min-width: 0; display: flex; flex-direction: column; }
.tel-link strong { font-size: 14px; }
.tel-link strong em { padding: 2px 5px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-style: normal; font-size: 9px; }
.tel-link span span { color: var(--ink); font-size: 13px; }
.tel-link small { color: var(--muted); font-size: 11px; }
.contact-row form { margin: 0; }

.contact-row { display: flex; align-items: center; gap: 2px; }
.contact-row .tel-link { flex: 1; min-width: 0; }

.icon-copy-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  min-width: var(--tap);
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border-radius: 10px;
}

.icon-copy-btn:active { background: var(--panel-hover); color: var(--brand-dark); }

.icon-copy-btn.danger { color: var(--danger); }
.icon-copy-btn.danger:active { background: var(--danger-bg); color: var(--danger); }

/* ---------- Passport field cards (tap-to-edit) ---------- */

.passport-group { margin-top: 14px; }
.passport-group:first-child { margin-top: 0; }

.passport-group-title {
  margin: 0 0 6px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.field-cards { display: flex; flex-direction: column; gap: 6px; }

.field-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.field-card summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.field-card summary::-webkit-details-marker { display: none; }

.field-card:not(.field-card-add) summary .icon:last-child {
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.field-card[open]:not(.field-card-add) summary .icon:last-child { transform: rotate(180deg); }

.field-card .field-name { font-weight: 600; font-size: 14px; flex-shrink: 0; }

.field-card .field-value {
  color: var(--muted);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.field-card-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--border);
}

.field-card-readonly { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; padding: 12px; }
.field-card-readonly .field-name { font-weight: 650; font-size: 14px; }
.field-card-readonly .field-value { color: var(--muted); font-size: 14px; white-space: normal; overflow-wrap: anywhere; }

.field-card-body .inline-form { margin-top: 10px; }

.field-card-actions { display: flex; gap: 8px; }
.field-card-actions button { flex: 1; }

.field-card-add { margin-top: 10px; }
.field-card-add summary { color: var(--brand-dark); font-weight: 600; }

/* ---------- Materials (stepper) ---------- */

.material-cards { display: flex; flex-direction: column; gap: 6px; }

.material-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.material-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.material-info strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-info span { font-size: 12px; }
.material-quantity { min-width: 62px; color: var(--ink); text-align: right; font-size: 20px; font-weight: 800; }

.change-log { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.change-log li { position: relative; padding: 0 0 10px 18px; border-bottom: 1px solid var(--border); }
.change-log li:last-child { padding-bottom: 0; border-bottom: 0; }
.change-log li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.change-log strong { display: block; font-size: 13px; }
.change-log span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }

.stepper-form {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.stepper-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepper-btn:active { background: var(--panel-hover); }

.stepper-input {
  width: 56px;
  min-height: 44px;
  margin-top: 0;
  padding: 4px;
  text-align: center;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.inline-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.inline-form input { margin-top: 0; }

/* ---------- Object editor ---------- */
.object-editor { max-width: 760px; margin: 0 auto; }
.form-section h2 { margin-bottom: 12px; }
.form-section label { color: var(--ink); font-weight: 650; }
.form-grid, .coordinate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.coordinate-grid { grid-template-columns: 1fr 1fr auto; align-items: end; }
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.editor-map { width: 100%; height: 320px; margin-top: 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; }
.editor-map-fallback { margin-top: 12px; padding: 24px; border-radius: 14px; background: #f0f1f2; color: var(--muted); text-align: center; }
.editor-actions { position: sticky; bottom: 0; z-index: 8; display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 14px 14px 0 0; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.editor-actions a { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 14px; color: var(--muted); text-decoration: none; }
.danger-zone { margin: 22px 0; padding-top: 16px; border-top: 1px solid var(--border); }
.archive-button { width: 100%; border: 1px solid var(--warn); background: #fff; color: var(--warn); }
.duplicate-warning { padding: 14px 16px; border: 1px solid #e7bd71; border-radius: 14px; background: var(--warn-bg); color: #69420a; }
.duplicate-warning ul { margin: 8px 0; padding-left: 20px; }
.duplicate-warning a { color: inherit; font-weight: 700; }
.archive-list { display: flex; flex-direction: column; }
.archive-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.archive-row:first-child { border-top: 0; }
.archive-row div { min-width: 0; }
.archive-row strong, .archive-row span { display: block; }
.archive-row span { color: var(--muted); font-size: 12px; }
.archive-row a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-dark); font-weight: 700; text-decoration: none; }

/* ---------- Desktop enhancement ---------- */

@media (min-width: 860px) {
  .page { padding: 24px; }

  .workspace {
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-areas: "list map";
    gap: 16px;
    height: calc(100vh - 140px);
    margin: 0;
  }

  .map-panel {
    grid-area: map;
    position: static;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
  }

  .sheet {
    grid-area: list;
    position: static;
    width: auto;
    height: 100% !important;
    max-height: none;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: none;
    padding: 10px;
  }

  .sheet-handle { display: none; }

  .inline-form { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .inline-form input { flex: 1; min-width: 120px; }
}

@media (max-width: 859px) {
  .directory-head { align-items: center; }
  .workspace.view-list .map-panel { display: none; }
  .workspace.view-list .sheet { top: auto; height: calc(100dvh - 160px) !important; max-height: none; border-radius: 16px 16px 0 0; }
  .workspace.view-list .sheet-handle { display: none; }
  .workspace.view-map .sheet { --sheet-height: 32vh !important; }
  .workspace.view-map .result-count { display: none; }
  .workspace.view-map .sort-button { display: none; }
  .object-hero h1 { font-size: 28px; }
  .card { background: #fff; box-shadow: 0 5px 20px rgba(39, 28, 20, .045); }
}

@media (max-width: 520px) {
  .topbar-user { display: none; }
  .brand img { width: 166px; }
  .invite-options { grid-template-columns: 1fr; gap: 0; }
  .directory-head .add-object-button { width: 44px; padding: 0; font-size: 0; }
  .form-grid, .coordinate-grid { grid-template-columns: 1fr; gap: 0; }
  .coordinate-grid .secondary-button { margin-top: 10px; }
}

@media (max-width: 420px) {
  .topbar-user { display: none; }
  .auth-page .page { padding-left: 14px; padding-right: 14px; }
  .login-card { padding: 24px 18px 20px; }
  .directory-head h1 { font-size: 25px; }
  .view-switch-btn { padding-left: 10px; padding-right: 10px; }
}

/* ---------- Directory experience v4.2 ---------- */

.directory-head {
  align-items: center;
  margin: 4px 0 14px;
}
.directory-title { min-width: 0; }
.directory-title h1 { font-size: clamp(28px, 7vw, 40px); letter-spacing: -.035em; }
.directory-title p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.directory-admin-actions { flex-wrap: wrap; justify-content: flex-end; }

.view-switch {
  width: fit-content;
  margin: 0 0 14px;
  padding: 4px;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(39, 28, 20, .06);
}
.view-switch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 18px; }

.workspace {
  position: relative;
  height: auto;
  min-height: 0;
  margin: 0;
}
.directory-panel {
  position: static;
  width: 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(39, 28, 20, .055);
}
.sheet-header { gap: 10px; margin-bottom: 14px; }
.search-box input { min-height: 54px; margin: 0; border-radius: 14px; background: #f8f8f8; }
.list-meta { flex-wrap: wrap; }
.quick-filter { min-height: 44px; padding: 7px 14px; border-radius: 999px; }
.map-filter-panel { border-radius: 13px; background: #fafafa; }

.object-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; overflow: visible; }
.object {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-height: 132px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(39, 28, 20, .055);
  will-change: transform;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.object:active { transform: scale(.99); }
.object-cover { display: block; min-width: 0; background: #eee; }
.object-thumb { width: 100%; height: 100%; min-height: 132px; border-radius: 0; object-fit: cover; }
/* Stands in for a photo that has not been uploaded yet. It is a gap, not a
   feature: an embossed circle that grows on hover drew the eye away from the
   object's name and address, which are the only things on the card anyone
   actually reads. Flat, quiet, and it disappears the moment a cover exists. */
.object-cover-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 132px;
  background: #f7f3f0;
  color: #c9b8ac;
  font-family: "Acrom SVP", sans-serif;
  font-size: 30px;
  letter-spacing: .04em;
}
.object-body { display: flex; flex-direction: column; min-width: 0; padding: 14px; }
.object-body small { order: 0; margin: 0 0 4px; color: var(--brand-dark); font-size: 10px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.object-body strong { order: 1; overflow-wrap: anywhere; font-size: 17px; line-height: 1.15; }
.object-source { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 220, 120, 0.18); color: #b25d00; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.object-body > span:not(.object-card-action) { order: 2; display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.35; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.object-card-action { order: 3; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 9px; color: var(--ink); font-size: 12px; font-weight: 750; }
.object-card-action b { color: var(--brand); font-size: 16px; }
.object-distance { position: absolute; top: 10px; right: 10px; padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(39,28,20,.1); }
.object-chevron { margin-left: auto; color: #aaa19a; font-size: 26px; }

.map-panel { position: relative; display: none; min-height: 520px; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: #eee; }
.view-map .map-panel { display: block; }
.view-map .directory-panel {
  position: absolute;
  z-index: 7;
  top: 12px;
  left: 12px;
  right: 76px;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.view-map .directory-panel .sheet-header { margin: 0; }
.view-map .directory-panel .sheet-header > :not(.search-box),
.view-map .object-list { display: none; }
.view-map .search-box input { border-color: rgba(39, 28, 20, .14); background: rgba(255,255,255,.96); box-shadow: 0 8px 28px rgba(39,28,20,.16); backdrop-filter: blur(12px); }
.map-selection { left: 12px; right: 12px; bottom: 12px; padding: 14px 44px 14px 14px; border-radius: 18px; }
.map-selection > div { flex-wrap: wrap; }
.map-selection a { flex: 1 1 92px; }

@media (max-width: 520px) {
  .page { padding: 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .directory-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .directory-title p, .directory-head .archive-link { display: none; }
  .directory-admin-actions { margin: 0; }
  .directory-head .add-object-button { flex: 0 0 44px; margin: 0; border-radius: 13px; }
  .view-switch { width: 100%; }
  .view-switch-btn { flex: 1; }
  .directory-panel { padding: 10px; border-radius: 16px; }
  .list-meta { display: grid; grid-template-columns: 1fr auto; }
  .last-sync { display: none; }
  .object { grid-template-columns: 96px minmax(0, 1fr); min-height: 124px; }
  .object-thumb, .object-cover-placeholder { min-height: 124px; }
  .object-body { padding: 12px; }
  .object-body strong { font-size: 16px; }
  .map-panel { min-height: calc(100dvh - 190px); border-radius: 16px; }
}

@media (max-width: 350px) {
  .directory-panel { padding: 8px; }
  .object { grid-template-columns: 82px minmax(0, 1fr); }
  .object-body { padding: 10px; }
  .object-card-action { font-size: 11px; }
  .sort-button { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 860px) {
  .workspace { display: grid; grid-template-columns: minmax(360px, 430px) minmax(0, 1fr); grid-template-areas: "list map"; gap: 18px; height: calc(100vh - 190px); min-height: 600px; }
  .directory-panel { grid-area: list; height: 100%; overflow: hidden; display: flex !important; flex-direction: column; }
  .view-map .directory-panel { position: static; width: 100%; padding: 14px; border: 1px solid var(--border); background: #fff; box-shadow: 0 12px 36px rgba(39, 28, 20, .055); }
  .view-map .directory-panel .sheet-header > :not(.search-box) { display: flex; }
  .view-map .directory-panel .map-filter-panel { display: block; }
  .view-map .object-list { display: grid; }
  .object-list { overflow-y: auto; padding-right: 3px; }
  .map-panel { grid-area: map; display: block; min-height: 0; }
  .view-list .map-panel, .view-map .map-panel { display: block; }
  .object { grid-template-columns: 106px minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .expense-summary { grid-template-columns: 1fr 1fr; }
}

.expense-adjustment-history { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.expense-adjustment-history > strong { display: block; margin-bottom: 6px; }
.expense-adjustment-history p { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; padding: 8px 0; border-top: 1px solid var(--border); }
.expense-adjustment-history p span { font-size: 13px; }.expense-adjustment-history p small { grid-column: 1 / -1; color: var(--muted); }
.receipt-edit { grid-column: 1 / -1; padding: 10px; border: 1px solid var(--border); border-radius: 11px; }
.receipt-edit summary { cursor: pointer; color: var(--brand-dark); font-weight: 700; }
.receipt-edit form { display: grid; grid-template-columns: 110px 150px 1fr; gap: 8px; margin-top: 8px; }
.receipt-edit textarea { grid-column: 1 / -1; width: 100%; padding: 9px; border: 1px solid var(--border); border-radius: 9px; font: inherit; }
.registry-filters { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)) auto auto; align-items: end; gap: 8px; margin-bottom: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.registry-filters label { margin: 0; }.registry-filters input,.registry-filters select { margin-top: 3px; }.registry-filters a { display: inline-flex; align-items: center; min-height: 48px; color: var(--muted); }
@media (max-width: 760px) { .registry-filters { grid-template-columns: 1fr 1fr; }.registry-filters label:nth-child(n+3) { grid-column: 1 / -1; }.receipt-edit form { grid-template-columns: 1fr; }.receipt-edit textarea { grid-column: 1; } }
@media print { .registry-filters { display: none !important; } }

.asset-search{display:grid;grid-template-columns:minmax(0,1fr) 220px auto;gap:8px;margin-bottom:16px}.asset-search input,.asset-search select{margin:0}.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:11px}.asset-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:15px;border:1px solid var(--border);border-radius:16px;background:#fff;color:var(--ink);text-decoration:none}.asset-symbol{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--panel-hover);color:var(--brand-dark)}.asset-card>span:last-child{display:grid;min-width:0}.asset-card small{color:var(--muted);font-size:10px}.asset-card strong{overflow-wrap:anywhere}.asset-card span span{color:var(--muted);font-size:12px}.asset-card em{margin-top:6px;color:var(--muted);font-size:12px;font-style:normal}.asset-status{display:inline-flex;width:fit-content;margin-top:7px;padding:4px 8px;border-radius:999px;background:#eee;color:var(--muted);font-size:10px;font-weight:800}.asset-status.status-warehouse{background:var(--ok-bg);color:var(--ok)}.asset-status.status-issued{background:#e7eefb;color:#285d9e}.asset-status.status-service{background:#fff0db;color:#8b5700}.asset-detail-head{margin:10px 0 18px}.asset-detail-head h1{margin:6px 0 2px}.asset-detail-head p{margin:0;color:var(--muted)}.asset-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--border)}.asset-facts div{padding:14px;background:#fff}.asset-facts span,.asset-facts strong{display:block}.asset-facts span{color:var(--muted);font-size:11px}.asset-history{margin-top:16px;padding:18px;border:1px solid var(--border);border-radius:17px;background:#fff}.asset-history h2{margin:0 0 8px}.asset-history article{padding:10px 0;border-top:1px solid var(--border)}.asset-history article strong,.asset-history article span{display:block}.asset-history article span{color:var(--muted);font-size:11px}.asset-history article p{margin:4px 0 0}
@media(max-width:620px){.asset-search{grid-template-columns:1fr}.asset-grid{grid-template-columns:1fr}.asset-facts{grid-template-columns:1fr 1fr}}

.notification-action{position:relative}.notification-action>span{position:absolute;top:1px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--brand);color:#fff;font-size:10px;line-height:17px;text-align:center}.asset-head-actions,.inline-actions{display:flex;align-items:center;gap:8px}.asset-thumb{width:52px;height:52px;border-radius:14px;object-fit:cover}.asset-identity{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin:10px 0 18px}.asset-identity .asset-detail-head{margin:0}.asset-photo{display:block;width:120px;height:120px;border-radius:18px;object-fit:cover}.asset-qr{display:grid;justify-items:center;color:var(--muted);font-size:10px}.asset-qr img{width:94px;height:94px}.notification-list{display:grid;gap:8px}.notification-item{display:grid;gap:3px;padding:15px 17px;border:1px solid var(--border);border-radius:14px;background:#fff;color:var(--ink);text-decoration:none}.notification-item.is-unread{border-left:4px solid var(--brand);background:var(--panel-hover)}.notification-item span,.notification-item small{color:var(--muted)}.notification-item small{font-size:11px}.overdue-card .asset-symbol{background:#fff0db;color:#a33b17;font-weight:900}.role-form{display:flex;gap:6px}.role-form select{min-height:40px;margin:0}.role-form button{min-height:40px}
.custom-select{position:relative;margin:0}.custom-select>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;list-style:none}.custom-select>summary::-webkit-details-marker{display:none}.custom-select>summary:after{content:"⌄";font-size:18px}.custom-select[open]>summary{border-color:var(--brand);box-shadow:0 0 0 3px rgba(242,88,38,.12)}.custom-select>div{position:absolute;z-index:50;top:calc(100% + 6px);left:0;right:0;overflow:hidden;padding:6px;border:1px solid var(--border);border-radius:13px;background:#fff;box-shadow:0 14px 36px rgba(39,28,20,.18)}.custom-select label{display:block;margin:0;cursor:pointer}.custom-select input{position:absolute;opacity:0;pointer-events:none}.custom-select label span{display:block;padding:10px 12px;border-radius:8px}.custom-select label:hover span,.custom-select input:checked+span{background:var(--panel-hover);color:var(--brand-dark);font-weight:700}.import-steps{display:grid;gap:8px;padding-left:22px}.import-errors{margin:14px 0;padding:14px;border:1px solid #efb3a1;border-radius:12px;background:#fff3ef}.import-errors p{margin:5px 0}.qr-label-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.qr-label{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px;min-height:112px;padding:10px;border:1px dashed #888;background:#fff}.qr-label img{width:88px;height:88px}.qr-label strong,.qr-label span,.qr-label small{display:block;overflow-wrap:anywhere}.qr-label strong{font-size:16px}.qr-label span{font-size:12px}.qr-label small{color:var(--muted);font-size:9px}
@media(max-width:620px){.asset-head-actions{align-items:stretch;flex-direction:column}.asset-identity{grid-template-columns:84px minmax(0,1fr)}.asset-photo{width:84px;height:84px}.asset-qr{grid-column:1/-1;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:8px}.asset-qr img{width:72px;height:72px}.role-form{flex-wrap:wrap}}
@media(max-width:620px){.qr-label-grid{grid-template-columns:1fr}.asset-head-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}}
@media print{.asset-label-page .topbar,.asset-label-page .no-print,.asset-label-page .flash{display:none!important}.asset-label-page .page{max-width:none;padding:0}.qr-label-grid{grid-template-columns:repeat(3,1fr);gap:4mm}.qr-label{break-inside:avoid;min-height:32mm;padding:3mm;border-color:#555}}
.expense-note-error{border-color:var(--danger);background:var(--danger-bg)}.expense-note-error strong{color:var(--danger)}.expense-note-error form{margin-top:10px}

.topbar-menu{position:relative}.topbar-menu>summary{list-style:none;cursor:pointer}.topbar-menu>summary::-webkit-details-marker{display:none}.topbar-menu-panel{position:absolute;z-index:60;top:calc(100% + 8px);right:0;display:grid;min-width:230px;padding:10px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 14px 40px rgba(39,28,20,.18)}.topbar-menu-panel>strong{padding:8px 10px;color:var(--muted);font-size:12px}.topbar-menu-panel>a,.topbar-menu-panel button{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 10px;border-radius:9px;color:var(--ink);text-align:left;text-decoration:none;font-size:13px}.topbar-menu-panel>a:hover{background:var(--panel-hover)}.topbar-menu-panel form{margin:3px 0 0;padding-top:3px;border-top:1px solid var(--border)}.topbar-menu-panel form button{color:var(--danger)}

/* file-field: стилизованный input[type=file] */
.file-field{display:grid;gap:4px;margin:0}.file-field input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}.file-field-ui{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}.file-field-ui:hover{border-color:var(--brand)}.file-field input[type=file]:focus-visible+.file-field-ui,.file-field input[type=file]:focus+.file-field-ui{border-color:var(--brand);box-shadow:0 0 0 3px rgba(242,88,38,.12)}.file-field-button{display:inline-flex;align-items:center;padding:0 16px;min-height:34px;border-radius:9px;background:var(--brand);color:#fff;font-size:14px;font-weight:700;white-space:nowrap}.file-field-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:13px;min-width:0}.file-field-label{display:block;font-size:13px;font-weight:700;margin-bottom:2px}.file-field small.field-help{grid-column:1/-1;margin-top:2px}

/* task-steps: шаговый индикатор */
.task-steps{display:flex;gap:0;margin:12px 0 0;padding:0;list-style:none}.task-steps li{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;text-align:center;min-width:0}.task-steps li+li:before{content:"";position:absolute;top:16px;left:-50%;right:50%;height:3px;background:#e0e0e0;z-index:0}.task-steps li.is-done+li:before,.task-steps li.is-done:before{background:var(--brand)}.task-step-dot{position:relative;z-index:1;display:block;width:32px;height:32px;border-radius:50%;border:3px solid #e0e0e0;background:#fff;transition:background .15s,border-color .15s}.task-steps li.is-done .task-step-dot{background:var(--brand);border-color:var(--brand)}.task-steps li.is-current .task-step-dot{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(242,88,38,.14)}.task-step-label{display:block;margin-top:6px;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}.task-steps li.is-done .task-step-label{color:var(--brand-dark)}.task-steps li.is-current .task-step-label{color:var(--brand)}.task-step-time{display:block;font-size:10px;color:var(--muted);margin-top:2px}.task-status-card .ticket-primary-action{margin-top:10px}.task-status-card .ticket-primary-action button{width:100%}.task-side-states{margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff}.task-side-states summary{cursor:pointer;font-size:13px;color:var(--muted);font-weight:700}.task-side-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.task-side-buttons form{margin:0}.task-side-buttons button{width:100%;min-height:40px;font-size:13px}.status-side{background:var(--panel-hover);color:var(--muted);font-size:12px;font-weight:700}

/* === Анимации шагов статуса (фишка #2) === */

/* Шаг появляется с подскоком */
@keyframes step-bounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Линия между шагами заполняется слева */
@keyframes step-line-fill {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* Пульсация текущего шага */
@keyframes step-current-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(242,88,38,.14); }
  50% { box-shadow: 0 0 0 8px rgba(242,88,38,.08); }
}

/* Анимация появления бейджа статуса */
@keyframes status-pop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* Рисование галочки */
@keyframes checkmark-draw {
  to { stroke-dashoffset: 0; }
}

/* Вспышка на кнопке при клике */
@keyframes button-ripple {
  to { transform: scale(4); opacity: 0; }
}

/* Появление карточки статуса */
@keyframes card-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Применяем анимации — только при .animate-status (после перехода статуса) */

/* Карточка хода работы при загрузке */
.task-status-card {
  animation: card-slide-in 0.35s ease-out both;
}

/* Каждый шаг появляется последовательно — только при смене статуса */
.task-steps.animate-status li {
  animation: card-slide-in 0.3s ease-out both;
}
.task-steps.animate-status li:nth-child(1) { animation-delay: 0.05s; }
.task-steps.animate-status li:nth-child(2) { animation-delay: 0.12s; }
.task-steps.animate-status li:nth-child(3) { animation-delay: 0.19s; }
.task-steps.animate-status li:nth-child(4) { animation-delay: 0.26s; }

/* Точка выполненного шага — подскок, только при смене статуса */
.task-steps.animate-status li.is-done .task-step-dot {
  animation: step-bounce 0.4s ease-out both;
}
.task-steps.animate-status li.is-done:nth-child(1) .task-step-dot { animation-delay: 0.1s; }
.task-steps.animate-status li.is-done:nth-child(2) .task-step-dot { animation-delay: 0.2s; }
.task-steps.animate-status li.is-done:nth-child(3) .task-step-dot { animation-delay: 0.3s; }
.task-steps.animate-status li.is-done:nth-child(4) .task-step-dot { animation-delay: 0.4s; }

/* Линия между шагами — анимированное заполнение */
.task-steps li+li:before {
  background: linear-gradient(to right, var(--brand) 50%, #e0e0e0 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: none;
}
.task-steps li.is-done+li:before,
.task-steps li.is-done:before {
  background-position: 0 0;
  animation: step-line-fill 0.4s ease-out both;
}

/* Текущий шаг — пульсация */
.task-steps li.is-current .task-step-dot {
  animation: step-current-pulse 2s ease-in-out infinite;
}

/* Галочка внутри точки выполненного шага */
.task-step-dot-check {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
}
.task-steps li.is-done .task-step-dot-check {
  display: block;
}
.task-step-dot-check svg {
  display: block;
  width: 16px;
  height: 16px;
}
.task-step-dot-check .checkmark-path {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: checkmark-draw 0.3s ease-out 0.3s forwards;
}

/* Бейдж статуса — появление */
.expense-detail-head .expense-status {
  animation: status-pop 0.3s ease-out both;
}

/* Кнопка "Взять в работу" — акцент */
.ticket-primary-action button {
  position: relative;
  overflow: hidden;
}
.ticket-primary-action button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}
.ticket-primary-action button:active::after {
  animation: button-ripple 0.4s ease-out;
}

/* Бейдж "Критично" — пульсация */
.status-critical {
  animation: step-current-pulse 2s ease-in-out infinite;
}

/* ai-reco: блок рекомендации ИИ */
.ai-reco{border:1px solid var(--brand);border-left:4px solid var(--brand);background:linear-gradient(135deg,#fff 0%,#fff8f5 100%)}.ai-reco-tools{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.ai-reco-tool{display:inline-flex;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:12px;font-weight:700;color:var(--brand-dark)}.ai-reco .field-help{margin-top:8px}

.tehzor-attachments{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:10px}.tehzor-attachments img{display:block;width:100%;height:104px;border-radius:11px;object-fit:cover;background:var(--panel-hover)}

.expense-summary a.is-active article{border-color:var(--brand);box-shadow:0 0 0 3px rgba(242,88,38,.12)}
.status-critical{background:var(--danger-bg);color:var(--danger)}
.ticket-primary-action{margin-top:16px}.ticket-primary-action button{width:100%}
.expense-note a,.expense-detail-head a,.archive-row a{color:var(--brand-dark);text-decoration-color:rgba(242,88,38,.4);text-underline-offset:2px}
.expense-summary a{color:inherit;text-decoration:none}.expense-summary a article{transition:border-color .15s,box-shadow .15s}
.muted a{color:var(--brand-dark)}
.expense-note a[href^="tel:"]{white-space:nowrap}
.status-routine{background:#eef1f5;color:#4a5568}
.object-tickets{display:grid;gap:8px;margin-top:10px}.object-tickets a{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--border);border-radius:13px;color:var(--ink);text-decoration:none}.object-tickets a:hover{background:var(--panel-hover)}.object-tickets strong{overflow-wrap:anywhere;font-size:15px}.object-tickets span{color:var(--muted);font-size:12px}
.draft-blanks{margin-top:8px;padding:9px 12px;border-radius:11px;background:var(--danger-bg);color:var(--danger);font-size:13px;font-weight:700}

/* Columns follow however many cells a row actually has: the fixed repeat(6)
   this used to carry left two empty tracks on every four-column table. */
.admin-table{display:grid;gap:6px;margin-top:12px;overflow-x:auto}.admin-table-row{display:grid;grid-template-columns:minmax(140px,2fr);grid-auto-flow:column;grid-auto-columns:minmax(64px,1fr);align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:#fff}.admin-table-row>div{min-width:0;overflow-wrap:anywhere;font-size:14px}.admin-table-row strong{display:block;font-size:15px}.admin-table-row span{display:block;color:var(--muted);font-size:12px}.admin-table-header{border:0;background:transparent;padding:0 13px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:720px){.admin-table-row{grid-template-columns:1fr 1fr;grid-auto-flow:row;gap:4px 10px}.admin-table-header{display:none}.admin-table-row>div:not(:first-child):before{content:attr(data-label) ": ";color:var(--muted);font-size:12px}.admin-table-row>div:first-child{grid-column:1/-1;margin-bottom:4px}}

/* ---------- Bottom navigation (phone) ---------- */

.topbar-sections { display: flex; align-items: center; gap: 4px; }
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.bottom-nav a { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; padding: 4px 2px; border-radius: 12px; color: var(--muted); text-decoration: none; }
.bottom-nav a span { font-size: 10px; font-weight: 700; }
.bottom-nav a.is-active { color: var(--brand-dark); background: var(--panel-hover); }
.bottom-nav a:active { background: var(--panel-hover); }
.bottom-nav a i { position: absolute; top: 2px; right: calc(50% - 23px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand); color: #fff; font: 700 9px/16px "Acrom SVP", sans-serif; font-style: normal; text-align: center; }
/* Object marker — the bar's edge runs around it instead of behind it.
   The circle is filled with the bar's own colour and wrapped in a ring of the
   page background. That ring breaks the bar's straight top border, so the
   border reads as detouring around the circle — a notch. The previous version
   was a transparent outline floating over the page, which is why the content
   underneath showed through it. */
.nav-object-marker {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -20px;
  z-index: 5;
  margin: 0 10px;
  background: none !important;
}
.nav-object-marker::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 0 0 5px var(--bg);
  z-index: 0;
  transition: border-color .15s, background .15s;
}
.nav-object-marker.is-active::before {
  border-color: var(--brand);
}
.nav-object-marker:active::before {
  background: var(--panel-hover);
}
.nav-object-marker.is-active svg {
  color: var(--brand-dark);
}
.nav-object-marker svg {
  position: relative;
  z-index: 1;
  color: var(--brand);
  width: 24px; height: 24px;
}
body.has-bottom-nav { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
@media (max-width: 899px) { .topbar-sections { display: none; } .brand img { width: 150px; } }
@media (min-width: 900px) { .bottom-nav { display: none; } body.has-bottom-nav { padding-bottom: env(safe-area-inset-bottom); } }

/* ---------- Forecast accuracy ---------- */

.prediction-rate-forecast { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.prediction-rate-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
/* Outlined, not solid: three filled buttons here would shout louder than
   «Отправить официальный ответ», which is the page's real primary action. All
   three look identical on purpose — a prettier «Точно» would bias the answer. */
.prediction-rate-buttons button { width: 100%; min-height: 54px; padding: 8px 4px; border: 1.5px solid var(--brand); background: #fff; color: var(--brand-dark); font-size: 15px; }
.prediction-rate-buttons button:active { background: var(--panel-hover); }
.prediction-rate-done { margin: 0 0 4px !important; color: var(--ink) !important; }
.prediction-rate-change { margin-top: 14px; }
.prediction-rate-change > summary { color: var(--muted); font: 650 13px "Acrom SVP", sans-serif; cursor: pointer; }
.prediction-rate-change > form { margin-top: 8px; }
.prediction-rate .expense-form input[type="text"] { width: 100%; min-height: 48px; margin-top: 4px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px; font: inherit; }

/* ---------- Collapsible intake recommendation ---------- */

.ai-reco > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.ai-reco > summary::-webkit-details-marker { display: none; }
.ai-reco > summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.ai-reco[open] > summary::after { content: "▴"; }
.ai-reco-count { color: var(--muted); font-size: 12px; font-weight: 650; }
.ai-reco-forecast { margin: 10px 0 0; }

/* ---------- Time correction next to the measurement ---------- */

.task-time-fix { margin-top: 12px; }
.task-time-fix > summary { color: var(--muted); font: 650 13px "Acrom SVP", sans-serif; cursor: pointer; }
.task-time-fix input { width: 100%; min-height: 46px; margin-top: 4px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; }

/* ---------- A Tehzor photo that did not arrive ---------- */

.tehzor-attachment.is-broken { display: grid; place-items: center; min-height: 104px; padding: 10px; border: 1px dashed var(--border); border-radius: 11px; background: var(--bg); color: var(--muted); font-size: 12px; text-align: center; text-decoration: none; }

/* ---------- Analytics ---------- */

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin: 14px 0; }
.stat-tile { display: grid; gap: 2px; padding: 15px 17px; border: 1px solid var(--border); border-radius: 15px; background: #fff; }
.stat-tile strong { font: 700 28px "Acrom SVP", sans-serif; }
.stat-tile span { color: var(--muted); font-size: 12px; }
.stat-tile.is-warn { border-color: #e7bd71; background: var(--warn-bg); }
.stat-tile.is-warn strong { color: var(--warn); }
.stat-tile.is-alarm { border-color: #eab0a6; background: var(--danger-bg); }
.stat-tile.is-alarm strong { color: var(--danger); }

.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.chart-card { margin-top: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 17px; background: #fff; }
.analytics-grid .chart-card { margin-top: 0; }
.chart-card h2 { margin: 0 0 12px; font-size: 18px; }
.chart-card > p.muted { margin: 12px 0 0; font-size: 13px; }

.donut-block { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.donut { flex: 0 0 138px; width: 138px; height: 138px; transform: rotate(-90deg); }
.donut-total { transform: rotate(90deg); transform-origin: 21px 21px; fill: var(--ink); font: 700 7px "Acrom SVP", sans-serif; text-anchor: middle; }
.donut-legend { flex: 1 1 170px; display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.donut-legend li { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; font-size: 13px; }
.donut-dot { width: 11px; height: 11px; border-radius: 50%; }
.donut-legend strong { font-size: 14px; }
.donut-legend em { min-width: 38px; color: var(--muted); font-size: 12px; font-style: normal; text-align: right; }

.week-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 6px; height: 168px; }
.week-bar { display: grid; grid-template-rows: 18px minmax(0, 1fr) 18px; justify-items: center; height: 100%; }
.week-bar-count { color: var(--muted); font-size: 11px; font-weight: 700; }
.week-bar-fill { align-self: end; width: 100%; min-height: 2px; border-radius: 7px 7px 0 0; background: var(--brand); }
.week-bar-label { color: var(--muted); font-size: 10px; }

.object-bars { display: grid; gap: 4px; }
.object-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.object-bar:hover { background: var(--panel-hover); }
.object-bar-name { overflow-wrap: anywhere; font-size: 14px; font-weight: 700; }
.object-bar-value { font-size: 14px; font-weight: 700; white-space: nowrap; }
.object-bar-value em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 600; }
.object-bar-track { grid-column: 1 / -1; height: 8px; border-radius: 5px; background: #f0ece9; }
.object-bar-fill { display: block; height: 100%; min-width: 4px; border-radius: 5px; background: var(--brand); }
.object-bar-note { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }

.miss-head { margin: 18px 0 8px; font-size: 15px; }
.miss-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.miss-list li { padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; }
.miss-list li > span { margin-left: 8px; color: var(--muted); font-size: 12px; }
.miss-list li p { margin: 5px 0 0; font-size: 13px; }

/* ── Analytics extras ── */
.analytics-subhead { margin: 18px 0 10px; font-size: 14px; font-weight: 600; }
.analytics-subhead:first-of-type { margin-top: 0; }

.mini-bars { display: grid; gap: 6px; margin: 0; }
.mini-bar { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 8px; font-size: 13px; }
.mini-bar-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-bar-track { height: 22px; border-radius: 11px; background: #f0ece9; overflow: hidden; }
.mini-bar-fill { display: block; height: 100%; border-radius: 11px; background: var(--brand); min-width: 4px; }
.mini-bar-value { font-weight: 700; text-align: right; }

/* ── KPI tiles ── */
.kpi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin: 14px 0; }
.kpi-tile { display: grid; gap: 2px; padding: 16px 17px; border: 1px solid var(--border); border-radius: 15px; background: #fff; align-content: start; }
.kpi-tile strong { font: 700 28px "Acrom SVP", sans-serif; margin-top: 2px; }
.kpi-tile > span:last-child { color: var(--muted); font-size: 12px; }
.kpi-tile.is-warn { border-color: #e7bd71; background: var(--warn-bg); }
.kpi-tile.is-warn strong { color: var(--warn); }
.kpi-tile.is-alarm { border-color: #eab0a6; background: var(--danger-bg); }
.kpi-tile.is-alarm strong { color: var(--danger); }
.kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; }
.kpi-icon-total { background: #4a6fa5; }
.kpi-icon-progress { background: #a5680a; }
.kpi-icon-done { background: #1f7a4d; }
.kpi-icon-time { background: #5b4b9e; }
.kpi-icon-overdue { background: #c62f1a; }
.kpi-icon-ai { background: #6b5d4f; }

/* ── Employee load bars ── */
.tech-bars { display: grid; gap: 6px; margin-top: 12px; }
.tech-bar-row { display: grid; grid-template-columns: 36px 1fr 45px; grid-template-rows: auto auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 13px; background: #fff; }
.tech-avatar { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 15px; }
.tech-bar-info { min-width: 0; }
.tech-bar-name { display: block; overflow-wrap: anywhere; font-size: 14px; }
.tech-bar-meta { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tech-bar-meta .low-data { color: var(--warn); font-style: normal; }
.tech-bar-track { grid-column: 1 / -1; height: 8px; border-radius: 5px; background: #f0ece9; }
.tech-bar-fill { display: block; height: 100%; min-width: 4px; border-radius: 5px; background: var(--brand); }
.tech-bar-value { grid-column: 3; grid-row: 1; align-self: center; font-weight: 700; font-size: 15px; text-align: right; }

/* ── Stacked time chart ── */
.stacked-week-chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 5px; height: 170px; margin-top: 10px; }
.stacked-week-col { display: grid; grid-template-rows: 18px 1fr 18px; justify-items: center; height: 100%; }
.stacked-week-meta strong { color: var(--muted); font-size: 11px; font-weight: 700; }
.stacked-week-bars { align-self: end; display: flex; flex-direction: column-reverse; width: 100%; min-height: 2px; border-radius: 6px 6px 0 0; overflow: hidden; }
.stacked-bar { width: 100%; }
.work-bar { background: var(--brand-dark); }
.travel-bar { background: var(--warn); }
.empty-bar { background: #eeeae7; }
.stacked-week-label { color: var(--muted); font-size: 10px; white-space: nowrap; }
.stacked-legend { display: flex; gap: 14px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

.time-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 9px; margin-top: 14px; }
.time-summary-stat { padding: 12px; border-radius: 12px; background: #f6f6f6; text-align: center; }
.time-summary-stat strong { display: block; font: 700 22px "Acrom SVP", sans-serif; }
.time-summary-stat span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }

/* ── Empty state ── */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 20px; color: var(--muted); text-align: center; }
.empty-state p { margin: 0; }

/* ── PWA splash / loading screen (фишка #3) ── */
.app-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #fffdfb;
  transition: opacity 0.35s ease-out, visibility 0.35s ease-out;
}
.app-splash.is-ready {
  opacity: 0; visibility: hidden;
  pointer-events: none;
}
.app-splash-inner {
  text-align: center;
}
.app-splash-logo {
  width: 120px; height: auto;
  opacity: 0;
  animation: splash-logo-in 0.5s ease-out 0.1s forwards;
}
.app-splash-bar {
  margin: 24px auto 0;
  width: 100px; height: 3px; border-radius: 3px;
  background: #e8e6e3;
  overflow: hidden;
}
.app-splash-bar span {
  display: block;
  height: 100%; width: 30%;
  border-radius: 3px;
  background: var(--brand-dark, #211e1a);
  animation: splash-bar-walk 1.2s ease-in-out infinite;
}
@keyframes splash-logo-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes splash-bar-walk {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(200%); }
  100% { transform: translateX(400%); }
}

/* ── File preview (фишка #4) ── */
.file-preview {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 6px;
  border: 1px solid var(--border); border-radius: 10px;
  background: #fafafa;
}
.file-preview[hidden] { display: none; }
.file-preview img {
  width: 56px; height: 56px; border-radius: 8px;
  object-fit: cover;
}
.file-preview-clear {
  margin-left: auto;
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: #eee; color: var(--muted); font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.file-preview-clear:hover { background: #ddd; color: var(--ink); }

/* ── Upload progress overlay (фишка #4) ── */
.upload-progress {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,253,251,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.upload-progress[hidden] { display: none; }
.upload-progress-inner {
  text-align: center; padding: 32px;
}
.upload-progress-spin {
  width: 40px; height: 40px; margin: 0 auto 16px;
  border: 3px solid #e8e6e3; border-top-color: var(--brand-dark, #211e1a);
  border-radius: 50%;
  animation: upload-spin 0.7s linear infinite;
}
@keyframes upload-spin {
  to { transform: rotate(360deg); }
}
.upload-progress-inner strong {
  display: block; font-size: 17px; margin-bottom: 4px;
}
.upload-progress-inner span {
  display: block; color: var(--muted); font-size: 13px; margin-bottom: 16px;
}
.upload-progress-track {
  width: 180px; height: 4px; margin: 0 auto;
  border-radius: 4px; background: #e8e6e3; overflow: hidden;
}
.upload-progress-bar {
  height: 100%; width: 0%;
  border-radius: 4px; background: var(--brand-dark, #211e1a);
  transition: width 0.3s ease;
}

/* ── Content fade-in (фишка #3) ── */
.page {
  animation: content-fade-in 0.35s ease-out both;
}
@keyframes content-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .app-splash, .app-splash.is-ready { transition: none; }
  .app-splash-logo { animation: none; opacity: 1; }
  .app-splash-bar span { animation: none; }
  .page { animation: none; }
}

/* ── Push notification banner (фишка #1) ─────────────────────────────────── */
.push-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 16px; padding: 12px 16px;
  border-radius: 14px; background: #e7eefb; color: #285d9e;
  font-size: 14px;
}
.push-banner span { flex: 1; }
.push-btn { flex-shrink: 0; min-height: 38px; padding: 7px 14px; font-size: 13px; }
.push-btn.is-active { opacity: 0.6; cursor: default; }

/* ── Pull-to-refresh indicator (фишка #6) ────────────────────────────────── */
.pull-indicator {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 0 4px; font-size: 14px; color: var(--muted);
  pointer-events: none; user-select: none;
  will-change: transform, opacity;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.pull-indicator[hidden] { display: none; }
.pull-indicator.is-refreshing { opacity: 1 !important; }
.pull-indicator-spinner {
  width: 20px; height: 20px;
  border: 2px solid #d0ceca; border-top-color: var(--brand-dark, #211e1a);
  border-radius: 50%;
  animation: pull-spin 0.6s linear infinite;
}
@keyframes pull-spin {
  to { transform: rotate(360deg); }
}

/* Toggle slider for notification settings */
.toggle-row{display:flex;align-items:center;gap:12px;margin:10px 0;cursor:pointer}.toggle-row input[type=checkbox]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}.toggle-slider{position:relative;display:block;width:44px;height:26px;border-radius:13px;background:#d0ceca;transition:background .15s;flex-shrink:0}.toggle-slider:after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}.toggle-row input:checked+.toggle-slider{background:var(--brand)}.toggle-row input:checked+.toggle-slider:after{transform:translateX(18px)}.toggle-row input:focus-visible+.toggle-slider{box-shadow:0 0 0 3px rgba(242,88,38,.18)}.account-card h2{margin-bottom:0}.account-card .toggle-row+.muted{margin-top:4px;font-size:12px}
#ticketList { will-change: transform; transition: transform 0.1s ease; }

/* ══════════════════════════════════════════════════════════════
   ANALYTICS — NEW LAYOUT (admin_analytics.html redesign)
   ══════════════════════════════════════════════════════════════ */

/* ── Back link ── */
.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; color: var(--muted); font-size: 13px; text-decoration: none; }
.back-link:hover { color: var(--ink); }

/* ── Header ── */
.admin-head h1 { margin: 0 0 4px; font-size: 24px; }
.analytics-subtitle { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ── KPI grid ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 16px 0; }
.kpi-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: #fff; }
.kpi-card.kpi-card-total { border-color: #d0d9e8; }
.kpi-card.kpi-card-ok { border-color: #b5d6c0; }
.kpi-card.kpi-card-warn { border-color: #e7bd71; background: var(--warn-bg); }
.kpi-card.kpi-card-alarm { border-color: #eab0a6; background: var(--danger-bg); }
.kpi-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; color: #fff; }
.kpi-card-total .kpi-icon { background: #4a6fa5; }
.kpi-card-warn .kpi-icon { background: #a5680a; }
.kpi-card-ok .kpi-icon { background: #1f7a4d; }
.kpi-card-alarm .kpi-icon { background: #c62f1a; }
.kpi-card:not(.kpi-card-total):not(.kpi-card-warn):not(.kpi-card-ok):not(.kpi-card-alarm) .kpi-icon { background: #6b5d4f; }
.kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-value { font: 700 28px "Acrom SVP", sans-serif; line-height: 1; }
.kpi-value small { font-size: 14px; color: var(--muted); }
.kpi-label { color: var(--muted); font-size: 12px; line-height: 1.3; }

/* ── Analytics pair (two columns) ── */
.analytics-pair { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.analytics-pair > .chart-card { flex: 1 1 320px; min-width: 0; margin-top: 0; }

/* ── Time stats block ── */
.time-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; }
.time-stat-item { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fafafa; }
.time-stat-value { display: block; font: 700 22px "Acrom SVP", sans-serif; line-height: 1; }
.time-stat-value small { font-size: 12px; color: var(--muted); }
.time-stat-label { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }

/* ── Employee tech cards grid ── */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tech-card { padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: #fff; }
.tech-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tech-card-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand, #211e1a); color: #fff; font: 700 16px "Acrom SVP", sans-serif; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tech-card-info { min-width: 0; }
.tech-card-name { display: block; font-size: 15px; overflow-wrap: anywhere; }
.tech-card-role { display: block; color: var(--muted); font-size: 11px; }

.tech-card-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.tech-metric { text-align: center; }
.tech-metric-value { display: block; font: 700 18px "Acrom SVP", sans-serif; line-height: 1; }
.tech-metric-value small { font-size: 11px; color: var(--muted); }
.tech-metric-pct { color: var(--brand); }
.tech-metric-label { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }

.tech-card-times { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.tech-card-times strong { color: var(--ink); }
.tech-card-bar { margin-top: 8px; }
.tech-card-bar-track { height: 6px; border-radius: 3px; background: #f0ece9; overflow: hidden; }
.tech-card-bar-fill { height: 100%; min-width: 4px; border-radius: 3px; background: var(--brand); transition: width 0.4s ease; }
.tech-card-bar-label { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; text-align: right; }

/* ── Dual bar chart (new + completed) ── */
.dual-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 5px; height: 180px; margin: 10px 0; }
.dual-bar-col { display: grid; grid-template-rows: 18px 1fr 18px; justify-items: center; height: 100%; }
.dual-bars-inner { align-self: end; display: flex; flex-direction: column-reverse; gap: 2px; width: 100%; min-height: 2px; }
.dual-bar { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; }
.new-bar { background: var(--brand); }
.done-bar { background: var(--brand-dark); }
.dual-bar-label { color: var(--muted); font-size: 10px; white-space: nowrap; }
.dual-legend { display: flex; gap: 14px; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

/* ── Object ranking rows ── */
.object-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.object-row:hover { background: var(--panel-hover); }
.object-row-name { overflow-wrap: anywhere; font-size: 14px; font-weight: 700; }
.object-row-value { font-size: 14px; font-weight: 700; white-space: nowrap; }
.object-row-value em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 600; }
.object-row-track { grid-column: 1 / -1; height: 8px; border-radius: 5px; background: #f0ece9; }
.object-row-fill { display: block; height: 100%; min-width: 4px; border-radius: 5px; background: var(--brand); }

/* ── AI metrics bar ── */
.ai-metrics-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.ai-metric-item { padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fafafa; text-align: center; }
.ai-metric-item strong { display: block; font: 700 24px "Acrom SVP", sans-serif; }
.ai-metric-item span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

/* ── Chart card h2 with icon ── */
.chart-card h2 { display: flex; align-items: center; gap: 6px; }

/* ── Muted text ── */
p.muted { color: var(--muted); font-size: 13px; }

/* ── Responsive: smaller screens ── */
@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi-card { padding: 12px; gap: 8px; }
  .kpi-value { font-size: 22px; }
  .tech-grid { grid-template-columns: 1fr; }
  .tech-card-metrics { grid-template-columns: repeat(2, 1fr); }
  .analytics-pair > .chart-card { flex-basis: 100%; }
  .time-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-head h1 { font-size: 20px; }
}


/* ── Styled file input ── */
.file-field { position: relative; display: block; margin-top: 14px; }
.file-field-label { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ink); font-size: 13px; }
.file-field input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  min-height: 100%;
}
.file-field-ui {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fafafa;
}
.file-field-button {
  flex-shrink: 0;
  min-height: 40px;
  padding: 6px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.file-field-value {
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-field input[type="file"]:focus-visible + .file-field-ui {
  outline: 3px solid rgba(242, 88, 38, .32);
  outline-offset: 2px;
}
.file-preview {
  position: relative;
  display: inline-block;
  margin-top: 10px;
}
.file-preview img {
  display: block;
  max-width: 100%;
  max-height: 200px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.file-preview-clear {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(39, 28, 20, .7);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.file-preview-clear:active { background: rgba(39, 28, 20, .9); }

/* ── Animated task steps ── */
.task-steps { display: flex; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: step; }
.task-steps li { flex: 1; position: relative; text-align: center; counter-increment: step; }
.task-steps li::before {
  content: "";
  position: absolute;
  top: 16px;
  left: calc(-50% + 16px);
  right: calc(50% + 16px);
  height: 3px;
  background: var(--border);
  border-radius: 2px;
}
.task-steps li:first-child::before { display: none; }
.task-steps li.is-done::before { background: var(--ok); }
.task-steps li.is-current::before { background: linear-gradient(90deg, var(--ok) 0%, var(--brand) 100%); }
.task-step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: var(--border);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.task-steps li.is-done .task-step-dot { background: var(--ok); }
.task-steps li.is-current .task-step-dot {
  background: var(--brand);
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(242, 88, 38, .18);
}
.task-step-dot-check svg { display: block; width: 16px; height: 16px; stroke: #fff; stroke-width: 3; fill: none; }
.checkmark-path { stroke: currentColor; stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset 0.35s ease 0.1s; }
.task-steps li.is-done .checkmark-path { stroke-dashoffset: 0; }
.task-step-label { display: block; font-size: 10px; font-weight: 650; color: var(--muted); }
.task-steps li.is-done .task-step-label { color: var(--ok); }
.task-steps li.is-current .task-step-label { color: var(--brand-dark); font-weight: 700; }
.task-step-time { display: block; font-size: 9px; color: var(--muted); margin-top: 2px; }

/* ── Status changed animation ── */
.animate-status .task-step-dot { animation: step-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes step-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ── Notification permission banner ── */
/* Icon, text and two buttons never fit one row on a phone: the buttons did not
   shrink and ran off the right edge, so «Не сейчас» was half off-screen. They
   wrap onto their own full-width row instead. */
.notif-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff4ef 0%, #fffaf7 100%);
  border: 1px solid rgba(242, 88, 38, .2);
  font-size: 13px;
}
.notif-banner-actions { display: flex; flex: 0 0 auto; gap: 8px; margin-left: auto; }
@media (max-width: 560px) {
  .notif-banner-actions { flex: 1 1 100%; margin-left: 0; }
  .notif-banner-actions button { flex: 1; }
}
.notif-banner-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 20px;
}
.notif-banner-icon { flex: 0 0 40px; }
.notif-banner p { flex: 1 1 140px; min-width: 0; margin: 0; color: var(--ink); }
.notif-banner button {
  flex-shrink: 0;
  min-width: auto;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--brand-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.notif-banner .secondary-button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}
.notif-banner.is-dismissing {
  opacity: 0;
  transform: translateY(-10px);
  margin-bottom: 0;
  max-height: 0;
  overflow: hidden;
  will-change: transform, opacity;
  transition: opacity 0.25s ease, transform 0.25s ease, margin 0.25s ease, max-height 0.25s ease;
}

/* ── Upload progress overlay ── */
.upload-progress {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
}
.upload-progress-inner {
  width: 280px;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0 20px 60px rgba(39, 28, 20, .15);
}
.upload-progress-spin {
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: upload-spin 0.7s linear infinite;
}
@keyframes upload-spin { to { transform: rotate(360deg); } }
.upload-progress-inner strong { display: block; margin-bottom: 8px; font-size: 15px; }
.upload-progress-inner span { display: block; color: var(--muted); font-size: 12px; }
.upload-progress-track {
  height: 6px;
  margin-top: 12px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.upload-progress-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--brand);
  transition: width 0.3s ease;
}

/* ── Side task state buttons as chips ── */
.task-side-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.task-side-buttons form { margin: 0; }
.task-side-buttons button { min-height: 44px; padding: 6px 14px; font-size: 12px; }

/* ── Prediction rate card refinements ── */
.prediction-rate { margin-top: 16px; }
.prediction-rate h2 { margin: 0 0 6px; font-size: 17px; }
.prediction-rate-forecast { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.prediction-rate-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.prediction-rate-buttons button { flex: 1; min-width: 80px; }
.prediction-rate-done { font-size: 14px; margin: 0 0 8px; color: var(--ok); }
.prediction-rate-change { margin-top: 10px; }
.prediction-rate-change summary { cursor: pointer; color: var(--brand-dark); font-size: 12px; font-weight: 600; }
.prediction-rate-change .prediction-rate-buttons { margin-top: 8px; }

/* ── AI recommendation card ── */
.ai-reco { margin-top: 16px; }
.ai-reco summary { cursor: pointer; font-weight: 600; }
.ai-reco-count { font-weight: 400; color: var(--muted); font-size: 12px; }
.ai-reco-forecast { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.ai-reco-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ai-reco-tool {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel-hover);
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 600;
}

/* ── Task time fix ── */
.task-time-fix { margin-top: 10px; }
.task-time-fix summary { cursor: pointer; color: var(--brand-dark); font-size: 12px; font-weight: 600; }
.task-time-fix .expense-form { margin-top: 8px; }

/* ── Ticket primary action buttons ── */
.ticket-primary-action { margin-top: 12px; }
.ticket-primary-action button { width: 100%; min-height: 50px; border-radius: 12px; font-size: 16px; font-weight: 700; }

/* ── Task status card ── */
.task-status-card { margin-top: 16px; }
.task-status-card > strong { display: block; margin-bottom: 4px; font-size: 14px; }

/* ---------- «Нужна помощь» ---------- */

.help-call-banner {
  display: grid;
  gap: 2px;
  margin: 12px 0;
  padding: 14px 17px;
  border: 1px solid #e7bd71;
  border-left: 4px solid var(--warn);
  border-radius: 15px;
  background: var(--warn-bg);
  color: var(--ink);
  text-decoration: none;
}
.help-call-banner strong { font-size: 15px; }
.help-call-banner span { color: var(--muted); font-size: 12px; }

.status-help { background: var(--warn-bg); color: var(--warn); }

.help-card {
  margin-top: 16px;
  padding: 17px;
  border: 1px solid #e7bd71;
  border-left: 4px solid var(--warn);
  border-radius: 17px;
  background: var(--warn-bg);
}
.help-card.is-joined { border-color: #9ccdb1; border-left-color: var(--ok); background: var(--ok-bg); }
.help-card > strong { display: block; font-size: 17px; }
.help-card p { margin: 6px 0 0; }
.help-card-note { font-size: 15px; font-style: italic; }
.help-card .muted { font-size: 12px; }
.help-card form { margin-top: 12px; }
.help-card.is-joined form button { width: 100%; }

.task-helpers { margin: 6px 0 0; font-size: 13px; }

.task-help-ask { margin-top: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.task-help-ask > summary { color: var(--warn); font: 700 13px "Acrom SVP", sans-serif; cursor: pointer; }
.task-help-ask input[type="text"] { width: 100%; min-height: 46px; margin-top: 4px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; }

.help-pending { margin-top: 10px; padding: 12px 14px; border: 1px solid #e7bd71; border-radius: 12px; background: var(--warn-bg); }
.help-pending > strong { display: block; font-size: 14px; }
.help-pending p { margin: 5px 0 0; font-size: 13px; }
.help-pending form { margin-top: 10px; }

/* ---------- Chart colours that used to live in style= attributes ----------
   The policy allows no inline style attributes, so every one of them was being
   dropped and the charts rendered colourless. Fixed colours belong here; the
   per-row numbers (widths, heights) are emitted in a nonced <style> block at
   the bottom of admin_analytics.html. */

.legend-swatch.is-new { background: var(--brand); }
.legend-swatch.is-done, .legend-dot.is-work { background: var(--brand-dark); }
.legend-dot.is-travel { background: var(--warn); }
.stacked-bar.empty-bar { height: 100%; }
.admin-empty-note { padding: 24px; color: var(--muted); text-align: center; }
.list-cut-note { margin-top: 12px; padding: 11px 14px; border: 1px dashed var(--border); border-radius: 12px; text-align: center; }