/*
 * ГК ГРАНИТ — Оксидный стык.
 * Runtime adapter only: exact locked assets are listed in assets/gk-oxide/MANIFEST.json.
 * Oxide intentionally does not appear here: it belongs only inside the official logo splice.
 */
@font-face {
  font-family: "Onest";
  src: url("assets/gk-oxide/Onest-wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --gk-ink: #171412;
  --gk-field: #eee7da;
  --gk-paper: #faf7f0;
  --gk-muted: #b4a694;
  --bg: var(--gk-field);
  --bg-soft: var(--gk-paper);
  --bg-card: var(--gk-paper);
  --bg-hover: #e5ddcf;
  --line: var(--gk-ink);
  --line-soft: #d1c6b7;
  --text: var(--gk-ink);
  --text-dim: #685e54;
  --text-faint: #685e54;
  --accent: var(--gk-ink);
  --accent-ink: var(--gk-paper);
  --good: #286746;
  --warn: #7c5a17;
  --bad: #9f3028;
  --radius: 0;
  --mono: "Onest", Arial, sans-serif;
  --font-heading: "Onest", Arial, sans-serif;
  --font-body: "Onest", Arial, sans-serif;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* The approved application is a single warm material field, never OS-themed. */
@media (prefers-color-scheme: light), (prefers-color-scheme: dark) {
  :root {
    --bg: var(--gk-field);
    --bg-soft: var(--gk-paper);
    --bg-card: var(--gk-paper);
    --bg-hover: #e5ddcf;
    --line: var(--gk-ink);
    --line-soft: #d1c6b7;
    --text: var(--gk-ink);
    --text-dim: #685e54;
    --text-faint: #685e54;
    --accent: var(--gk-ink);
    --accent-ink: var(--gk-paper);
  }
}

html { color-scheme: light; scrollbar-color: var(--gk-muted) var(--gk-paper); }
body { min-width: 0; background: var(--gk-field); color: var(--gk-ink); font-family: var(--font-body); }
#app { min-height: 100vh; min-height: 100dvh; }
h1, h2, h3, .brand b { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.03em; }

::selection { color: var(--gk-paper); background: var(--gk-ink); }
:focus-visible { outline: 2px solid var(--gk-ink); outline-offset: 3px; border-radius: 0; }
.money-microhelp:focus-visible { outline: none; }

/* Straight architectural surfaces are explicit. Functional geometry such as
   avatars, progress dots and spinners is left intact. */
:is(
  .tile, .card, .tablewrap, .printdocs, .portfolio-item, .object-review-section,
  .leadcard, .kcard, .modalback > *, .shot, .pdf-frame, .crmstats, .crmmodes,
  .crmchip, .modebtn, .incoming-toast, .kcol, .kcard-message, .kcard-waiting,
  .pill, .tag, .duechip, .stagepill, .schedule-overview,
  .schedule-fact-dock, .object-workspace-panel, .object-major-section,
  .btn, input, select, textarea, .editinput
) {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.avatar, .personavatar, .tasklight, .spinner, .money-help-trigger { border-radius: 50% !important; }
button, a.btn, input, select, textarea { border-radius: 0 !important; }

#nav {
  width: 268px;
  flex-basis: 268px;
  padding: 26px 18px;
  background: var(--gk-paper);
  border-right: 1px solid var(--gk-ink);
}
.brand { padding: 0 4px 26px; }
.brand::after {
  content: "";
  display: block;
  border-top: 1px solid var(--gk-ink);
  margin-top: 18px;
}
.brand-logo { display: block; width: min(184px, 100%); height: auto; }
.brand span { margin-top: 8px; color: var(--text-faint); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

#nav button {
  min-height: 39px;
  margin-bottom: 0;
  padding: 9px 5px;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  color: var(--text-dim);
  font-size: 13px;
}
#nav button:hover, #nav button.on { background: transparent; color: var(--gk-ink); }
#nav button.on { font-weight: 600; }
#nav button.on .ico { color: var(--gk-ink); }
#nav button .ico { width: 22px; color: var(--text-faint); font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
#nav button .badge { color: var(--text-faint); font-size: 10px; }
#nav .nav-help { margin-top: 24px; padding-inline: 5px; border-top: 1px solid var(--gk-ink); }
.navuser { margin-top: 26px; padding: 14px 5px 0; border-top: 1px solid var(--gk-ink); }

#main { flex: 1 1 auto; min-width: 0; max-width: 1440px; padding: 42px 50px 80px; }
h1 { font-size: clamp(28px, 3vw, 44px); line-height: 1.03; margin-bottom: 10px; text-wrap: balance; }
h2 { margin-top: 40px; font-size: 20px; }
.sub { color: var(--text-dim); max-width: 72ch; }

.tile, .card, .printdocs, .portfolio-item, .object-review-section, .leadcard, .kcard, .modalback > *, .shot, .pdf-frame {
  background: var(--gk-paper);
  border-color: var(--line-soft);
  box-shadow: none;
}
.tile, .card, .printdocs, .portfolio-item { border-width: 1px; }
.tile { padding: 17px 18px; }
.tile .value { font-size: 30px; font-weight: 500; letter-spacing: -.045em; }
.card { padding: 18px 20px; }
.btn { border-radius: 0; background: var(--gk-ink); color: var(--gk-paper); box-shadow: none; }
.btn:hover:not(:disabled) { background: #332f2a; transform: none; }
.btn.ghost { background: transparent; color: var(--gk-ink); border: 1px solid var(--gk-ink); }
input, select, textarea, .editinput, .customer-review-form input, .customer-review-form select, .customer-review-form textarea {
  background: var(--gk-paper); border-color: var(--line-soft); color: var(--gk-ink); border-radius: 0;
}
input:focus, select:focus, textarea:focus, .editinput:focus { border-color: var(--gk-ink); box-shadow: none; }
input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; }
.pill, .tag, .duechip, .stagepill { border-radius: 0; }
.tablewrap { min-width: 0; max-width: 100%; scrollbar-color: var(--gk-muted) var(--gk-paper); }

.gallery, .portfolio-item, .leadcard, .crm-shell, .schedule-overview, .printdocs { border-radius: 0; }
.shot .tag, .shot-action, #lightbox .nav { border-radius: 0; }
.shot:hover { border-color: var(--gk-ink); }
.gantt-track { background: var(--gk-paper); background-image: none; border-block: 1px solid var(--line-soft); }
.doneform input, .shot-action { backdrop-filter: none; }
.iconbtn { min-height: 32px; padding: 6px 0; font-size: 11px; font-weight: 500; letter-spacing: .04em; }
.taskcheck { width: auto; min-width: 28px; flex-basis: auto; padding-inline: 5px; font-size: 9px; font-weight: 600; }
.tasktype { width: auto; min-width: 28px; font-size: 9px; font-weight: 600; letter-spacing: .04em; }
.shot-action { color: var(--gk-paper); background: var(--gk-ink); border-color: var(--gk-paper); }
.checkout-state-mark { width: 28px; flex-basis: 28px; font-size: 9px; letter-spacing: .02em; }

.kanban {
  max-width: 100%;
  scroll-snap-type: inline proximity;
  scrollbar-color: var(--gk-muted) var(--gk-paper);
}
.kcol { scroll-snap-align: start; }

/* A notification is an interruption, not a second dashboard. Keep the two
   newest notices on larger screens and only the newest one on a phone. */
#incoming-toasts {
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 36px));
}
.incoming-toast { padding: 10px 12px; background: var(--gk-paper); }
.incoming-toast:nth-last-child(n + 3) { display: none; }

body.login-page { background: var(--gk-field); color: var(--gk-ink); }
.login-page form {
  width: min(380px, calc(100vw - 40px));
  padding: 34px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.login-logo { display: block; width: 214px; height: auto; margin-bottom: 34px; }
.login-page form::before { content: ""; display: block; border-top: 1px solid var(--gk-ink); margin-bottom: 18px; }
.login-page h1 { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.login-page p { color: var(--text-dim); margin-bottom: 28px; }
.login-page input { background: transparent; border: 0; border-bottom: 1px solid var(--line-soft); padding: 13px 0; }
.login-page input:focus { outline: none; border-bottom-color: var(--gk-ink); }
.login-page button { background: var(--gk-ink); border-radius: 0; margin-top: 18px; }
.login-page .err { color: var(--bad); }

@media (max-width: 1180px) {
  #app { flex-direction: column; }
  #nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    flex-basis: auto;
    height: auto;
    max-height: none;
    gap: 8px 18px;
    padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
    position: sticky;
    top: 0;
    z-index: 30;
    overflow: clip;
    border-right: 0;
    border-bottom: 1px solid var(--gk-ink);
  }
  .brand { grid-column: 1; grid-row: 1; align-self: center; width: auto !important; min-width: 0; padding: 0 !important; }
  .brand-logo { width: min(176px, 46vw); }
  .brand span { margin-top: 3px; font-size: 9px; }
  .brand::after { display: none; }
  #navlinks {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 20px;
    min-width: 0;
    max-width: 100%;
    padding-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    border-top: 1px solid var(--line-soft);
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
  }
  #nav button {
    flex: 0 0 auto;
    width: auto;
    min-height: 42px;
    margin: 0;
    padding: 7px 0 8px;
    border-bottom: 0;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  #navfooter { display: flex; grid-column: 2; grid-row: 1; align-items: center; gap: 12px; align-self: center; }
  #nav .nav-help { width: auto; min-height: 38px; margin: 0; padding: 6px 10px; border: 1px solid var(--gk-ink); }
  .navuser { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; white-space: nowrap; }
  .navuser .btn { min-height: 38px; padding: 6px 10px; }
  #main { width: 100%; max-width: none; padding: 32px max(28px, env(safe-area-inset-right)) 64px max(28px, env(safe-area-inset-left)); }
}

@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .object-registry { overflow: visible; border: 0; background: transparent; }
  .object-registry table, .object-registry tbody { display: block; width: 100%; }
  .object-registry thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .object-registry tbody { display: grid; gap: 10px; }
  .object-registry tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--line-soft);
    background: var(--gk-paper);
  }
  .object-registry tbody td {
    flex: 1 1 calc(50% - 7px);
    min-width: 132px;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .object-registry tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--text-faint);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .object-registry tbody td[data-label="№"] { flex: 0 0 58px; min-width: 0; }
  .object-registry tbody td[data-label="Объект"] { flex: 1 1 calc(100% - 72px); min-width: 150px; }
  .object-registry tbody td[data-label="Статус"] { flex-basis: 100%; min-width: 0; }
}

@media (max-width: 560px) {
  #nav {
    gap: 7px 10px;
    padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  }
  .brand-logo { width: min(166px, 48vw); }
  .brand span { display: none; }
  .navuser > span { display: none; }
  #nav .nav-help > span:not(.nav-help-mark) { display: none; }
  #nav .nav-help { grid-template-columns: 20px; padding-inline: 9px; }
  .navuser .btn { min-height: 40px; }
  #navlinks { gap: 17px; }
  #nav button { min-height: 42px; font-size: 12px; }
  #main { padding: 26px max(20px, env(safe-area-inset-right)) 58px max(20px, env(safe-area-inset-left)); }
  h1 { font-size: 29px; }
  h2 { margin-top: 34px; }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #incoming-toasts {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    left: max(12px, env(safe-area-inset-left));
  }
  .incoming-toast:not(:last-child) { display: none; }
}

@media (pointer: coarse) {
  .btn, .modebtn, .crmchip, #nav button { min-height: 44px; }
}