:root {
  color-scheme: light;
  --blue: #1769e0;
  --blue-dark: #0e54bd;
  --blue-soft: #eaf2ff;
  --ink: #172033;
  --muted: #677287;
  --line: #dfe4ec;
  --surface: #ffffff;
  --canvas: #f3f5f8;
  --today: #e84955;
  --today-soft: #fff0f1;
  --week: #e88d21;
  --week-soft: #fff6e8;
  --later: #6f7a8d;
  --later-soft: #f0f2f5;
  --shadow: 0 16px 48px rgba(27, 40, 68, .16);
  --column-width: 330px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); background: var(--canvas); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.auth-screen { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: linear-gradient(145deg, #edf4ff, #f7f9fc 48%, #eef1f6); }
.auth-screen[hidden] { display: none; }
.auth-card { width: min(430px, 100%); padding: 26px; border: 1px solid #d8e0eb; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(27, 40, 68, .18); }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; font-size: 1.05rem; }
.auth-form { display: grid; gap: 4px; }
.auth-form[hidden] { display: none; }
.auth-form h1 { margin: 3px 0 5px; font-size: 1.55rem; }
.auth-form p { margin: 0 0 18px; color: var(--muted); line-height: 1.45; }
.auth-form .primary-button { width: 100%; margin-top: 4px; }
.auth-error { margin: 0 0 8px; padding: 9px 11px; border: 1px solid #f0b9bd; border-radius: 8px; color: #a81e29; background: #fff4f5; font-size: .82rem; }
.password-save-option { display: flex; align-items: center; gap: 8px; margin: -3px 0 12px; color: #4f5a6c; font-size: .82rem; }
.password-save-option input { width: 17px; height: 17px; accent-color: var(--blue); }
.two-factor-qr-panel { display: grid; justify-items: center; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: center; }
.two-factor-qr { width: 220px; height: 220px; padding: 10px; border-radius: 8px; background: #fff; }
.two-factor-qr img, .two-factor-qr canvas { display: block; width: 200px !important; height: 200px !important; }
.two-factor-manual { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.two-factor-manual summary { cursor: pointer; color: var(--muted); font-weight: 650; }
.two-factor-manual[open] summary { margin-bottom: 10px; }
.auth-pending .app-header, .auth-pending .mobile-controls, .auth-pending .board { visibility: hidden; }

.app-header {
  height: 70px;
  display: grid;
  grid-template-columns: auto minmax(200px, 1fr) minmax(330px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 5;
}

.brand { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 750; white-space: nowrap; }
.brand #toggle-done-tasks { margin-left: 6px; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--blue); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.search { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--canvas); border: 1px solid transparent; border-radius: 12px; }
.search:focus-within { background: #fff; border-color: #8cb8f3; box-shadow: 0 0 0 3px rgba(23,105,224,.12); }
.search svg, .icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.global-search-shell { position: relative; min-width: 0; }
.global-search-shell.has-query .search { padding-right: 40px; }
.global-search-results { position: absolute; z-index: 80; top: 49px; left: 0; right: 0; max-height: min(620px, calc(100vh - 90px)); overflow-y: auto; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 18px 48px rgba(24,35,58,.22); }
.global-search-results[hidden] { display: none; }
.search-result-group + .search-result-group { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.search-result-title { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.global-result { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 9px 10px; border: 0; border-radius: 9px; text-align: left; color: var(--ink); background: transparent; }
.global-result:hover, .global-result:focus-visible { outline: 0; background: var(--blue-soft); }
.global-result strong, .global-result span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-result > span { color: var(--muted); font-size: .76rem; }
.global-result-counts { grid-row: 1 / span 2; grid-column: 2; align-self: center; display: flex; gap: 5px; }
.result-count { padding: 3px 7px; border-radius: 999px; color: #536176; background: #eef1f5; font-size: .68rem; font-weight: 750; white-space: nowrap; }
.result-count.open { color: #a52531; background: var(--today-soft); }
.global-result-ticket { grid-template-columns: minmax(0, 1fr) auto; }
.global-result-ticket small { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.unknown-phone-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; padding: 10px; border: 1px solid #a9c9f3; border-radius: 10px; background: var(--blue-soft); }
.unknown-phone-result > div { min-width: 0; display: grid; gap: 3px; }
.unknown-phone-result strong { font-size: .82rem; }
.unknown-phone-result span { overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.unknown-phone-result .primary-button { flex: 0 0 auto; min-height: 34px; padding: 0 11px; font-size: .76rem; }
.search-loading, .search-empty { padding: 18px 10px; color: var(--muted); text-align: center; font-size: .8rem; }

.primary-button, .secondary-button, .danger-button, .text-button, .icon-button, .avatar-button {
  border: 0; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.primary-button { min-height: 42px; padding: 0 16px; border-radius: 10px; color: #fff; background: var(--blue); font-weight: 700; box-shadow: 0 4px 12px rgba(23,105,224,.18); }
.primary-button:hover { background: var(--blue-dark); }
.primary-button.compact, .secondary-button.compact { min-height: 38px; padding: 0 13px; }
.secondary-button { min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; font-weight: 650; }
.danger-button { min-height: 42px; padding: 0 16px; border: 1px solid #f1b9bd; border-radius: 10px; color: #bd2632; background: #fff; font-weight: 650; }
.text-button { padding: 6px; color: var(--blue); background: transparent; font-weight: 650; }
.icon-button { width: 42px; height: 42px; border-radius: 10px; color: var(--muted); background: transparent; }
.icon-button:hover { background: var(--canvas); color: var(--ink); }
.avatar-button { width: 38px; height: 38px; border-radius: 50%; color: #fff; background: #27334a; font-size: .8rem; font-weight: 750; }
.scope-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); }
.scope-button { min-height: 34px; padding: 0 11px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: .8rem; font-weight: 720; white-space: nowrap; }
.scope-button.active { color: var(--blue-dark); background: #fff; box-shadow: 0 1px 5px rgba(30,44,70,.1); }

.mobile-controls { display: none; }
.board { height: calc(100vh - 70px); display: flex; align-items: stretch; gap: 8px; padding: 9px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
.person-column { flex: 0 0 var(--column-width); min-width: 280px; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; scroll-snap-align: start; }
.person-column.done-column { border-color: #cbd3df; }
.column-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.person-info { min-width: 0; display: flex; align-items: center; gap: 10px; }
.person-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-avatar { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #556176; font-size: .68rem; font-weight: 750; }
.ticket-count { min-width: 25px; height: 24px; display: grid; place-items: center; padding: 0 7px; border-radius: 999px; color: var(--muted); background: var(--canvas); font-size: .78rem; font-weight: 750; }
.column-body { min-height: 0; flex: 1; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.priority-section + .priority-section { margin-top: 8px; }
.priority-title { position: sticky; top: -1px; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 3px 4px 4px; font-size: .65rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; background: #fff; }
.priority-title.today { color: var(--today); }
.priority-title.week { color: var(--week); }
.priority-title.later { color: var(--later); }
.priority-title span { min-width: 22px; padding: 2px 7px; border-radius: 999px; text-align: center; color: inherit; background: currentColor; }
.priority-title span::first-line { color: #fff; }
.empty-group { margin: 0 3px; padding: 7px; border: 1px dashed var(--line); border-radius: 8px; color: #9099aa; text-align: center; font-size: .75rem; }

.ticket-card { width: 100%; display: block; padding: 5px 7px; margin: 0 0 4px; border: 1px solid var(--line); border-radius: 8px; text-align: left; color: inherit; background: #fff; box-shadow: 0 1px 3px rgba(35,45,70,.03); transition: border-color .15s, transform .15s, box-shadow .15s; }
.ticket-card:hover { transform: translateY(-1px); border-color: #aac9f2; box-shadow: 0 6px 16px rgba(35,45,70,.08); }
.ticket-card.selected { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(23,105,224,.12); }
.ticket-card.today { border-left: 4px solid var(--today); background: linear-gradient(90deg, var(--today-soft), #fff 32%); }
.ticket-card.week { border-left: 4px solid var(--week); }
.ticket-card.later { border-left: 4px solid #a7afbd; }
.card-top, .card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-company { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .02em; }
.source-mark { margin-right: 5px; color: var(--blue); font-weight: 400; }
.card-time { flex: 0 0 auto; color: var(--muted); font-size: .67rem; }
.card-description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; margin: 2px 0 3px; color: #344055; font-size: .76rem; font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; white-space: pre-wrap; }
.card-contact { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .68rem; }
.attachment-count { color: var(--muted); font-size: .68rem; }

.backdrop { position: fixed; inset: 70px 0 0; z-index: 20; background: rgba(21,29,43,.3); backdrop-filter: blur(1px); }
.drawer { position: fixed; z-index: 30; top: 70px; right: 0; bottom: 0; width: min(720px, 68vw); background: #fff; box-shadow: var(--shadow); transform: translateX(105%); overflow-y: auto; }
.drawer.open { transform: translateX(0); }
.drawer-head { min-height: 76px; position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); }
.drawer-head h1 { margin: 2px 0 0; font-size: 1.24rem; line-height: 1.25; }
.drawer-head-actions { display: flex; align-items: center; gap: 7px; }
.eyebrow { display: block; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
#ticket-form { padding-bottom: 0; }
.form-section, .contact-card { padding: 12px 20px; border-bottom: 1px solid var(--line); }
.ticket-controls-section { padding: 9px 20px 10px; background: #f8fafc; }
.ticket-controls-section .field { gap: 3px; margin-bottom: 0; }
.ticket-controls-section .field > span { font-size: .7rem; }
.ticket-controls-section .field select { height: 36px; padding: 0 9px; font-size: .84rem; }
.creation-fields { padding-bottom: 0; border-bottom: 0; }
.status-grid { display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 12px; }
.asset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ticket-assets { padding-top: 10px; padding-bottom: 0; }
.ticket-assets .field { margin-bottom: 10px; }
.field { display: grid; gap: 7px; margin-bottom: 16px; font-weight: 680; }
.field > span { font-size: .8rem; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid #cfd6e1; border-radius: 9px; outline: none; color: var(--ink); background: #fff; }
.field input, .field select { height: 42px; padding: 0 11px; }
.field textarea { padding: 9px 10px; resize: vertical; line-height: 1.35; font-weight: 400; }
.description-field { margin-bottom: 7px; }
#ticket-description { min-height: 42px; overflow-y: hidden; resize: none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #79aaf0; box-shadow: 0 0 0 3px rgba(23,105,224,.11); }
.contact-search-field { position: relative; }
.contact-results { position: absolute; z-index: 5; top: 69px; left: 0; right: 0; max-height: 280px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 14px 34px rgba(24,35,58,.17); }
.contact-result { width: 100%; display: grid; gap: 3px; padding: 10px; border: 0; border-radius: 8px; text-align: left; background: transparent; }
.contact-result:hover { background: var(--blue-soft); }
.contact-result span { color: var(--muted); font-size: .78rem; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.section-heading h2 { margin: 1px 0 0; font-size: .98rem; }
.contact-card { margin: 8px 20px 0; padding: 10px 12px; border: 1px solid #cbd8eb; border-radius: 10px; background: #fbfdff; }
.contact-body { display: grid; gap: 8px; }
.contact-card .customer-section-title { padding: 0 0 6px; }
.contact-grid { display: grid; grid-template-columns: .65fr 1.15fr .9fr 1.35fr; gap: 8px 12px; }
.contact-grid > div { min-width: 0; display: grid; gap: 3px; }
.contact-grid a { overflow: hidden; text-overflow: ellipsis; color: var(--blue); text-decoration: none; }
.contact-address-wide { grid-column: 1 / -1; }
.contact-address-wide a { white-space: nowrap; }
.disabled-link { pointer-events: none; color: var(--muted) !important; }
.contact-label { color: var(--muted); font-size: .74rem; }
.contact-grid strong, .contact-grid a { font-size: .8rem; }
.contact-list { display: grid; gap: 4px; align-content: start; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.contact-list-items { display: grid; gap: 4px; max-height: calc(5 * 38px); overflow-y: auto; }
.contact-row { display: grid; grid-template-columns: auto 1.1fr .9fr 1.3fr; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: .78rem; }
.contact-row-check { flex-shrink: 0; }
.contact-row-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-row-phone, .contact-row-email { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-row-phone:has(.contact-row-more[open]), .contact-row-email:has(.contact-row-more[open]) { overflow: visible; }
.contact-row-status { color: var(--blue); font-weight: 650; white-space: nowrap; }
.contact-row-select { justify-self: start; padding: 2px 0; font-size: .76rem; text-align: left; white-space: nowrap; }
.description-row { display: flex; align-items: flex-start; gap: 10px; }
.description-row .description-field { flex: 1; min-width: 0; }
.file-upload-compact { display: flex; flex-shrink: 0; align-items: center; gap: 6px; padding-top: 24px; }
.attachment-menu-wrap { position: relative; }
.attachment-menu { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 160px; margin-top: 4px; padding: 6px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.attachment-menu[hidden] { display: none; }
.attachment-menu-item { padding: 8px 10px; border: 0; border-radius: 7px; color: var(--ink); text-align: left; font-weight: 650; background: transparent; }
.attachment-menu-item:hover:not(:disabled), .attachment-menu-item:focus-visible { background: var(--canvas); }
.attachment-menu-item:disabled { color: var(--muted); cursor: default; opacity: .55; }
.file-list { display: flex; gap: 6px; overflow-x: auto; }
.note-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px; margin: 0 0 7px; padding: 8px; border: 1px solid #cdd9ea; border-radius: 9px; background: #f8fbff; }
.note-entry .field { gap: 3px; margin-bottom: 0; }
.note-entry textarea { min-height: 38px; overflow-y: hidden; resize: none; background: #fff; }
.note-actions { display: flex; align-items: flex-end; }
.note-actions[hidden] { display: none; }
.note-actions .subtle { display: none; }
.file-chip { position: relative; flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--canvas); }
.file-open { width: 100%; height: 100%; display: grid; place-items: center; border: 0; border-radius: inherit; background: transparent; font-size: 1.35rem; cursor: pointer; }
.file-open:hover { background: var(--blue-soft); }
.file-open:disabled { cursor: default; opacity: .65; }
.remove-file { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: #fff; font-size: .85rem; line-height: 1; }
.inline-history-section { max-height: 230px; margin: 0 0 7px; padding: 8px; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; background: #fafbfc; }
.compact-heading { align-items: center; margin-bottom: 9px; }
.compact-heading h2 { font-size: .92rem; }
.history-list { display: grid; gap: 6px; margin-bottom: 0; }
.visible-notes { display: grid; gap: 7px; }
.note-item { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.note-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.note-meta time { color: var(--muted); font-size: .69rem; white-space: nowrap; }
.note-item p { margin: 0; color: #394457; font-size: .84rem; line-height: 1.36; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-meta strong { font-size: .8rem; }
.empty-notes { padding: 10px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); text-align: center; font-size: .78rem; }
.change-log { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #f7f8fa; }
.change-log summary { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; color: #586477; font-size: .78rem; font-weight: 720; cursor: pointer; list-style: none; }
.change-log summary::-webkit-details-marker { display: none; }
.change-log summary::before { content: "›"; margin-right: 1px; color: var(--muted); font-size: 1.15rem; transition: transform .15s; }
.change-log[open] summary::before { transform: rotate(90deg); }
.change-log summary span:first-of-type { flex: 1; }
.change-count { min-width: 23px; padding: 2px 7px; border-radius: 999px; text-align: center; color: var(--muted); background: #e5e9ef; font-size: .68rem; }
.change-list { border-top: 1px solid var(--line); }
.change-item { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 10px; border-bottom: 1px solid #e5e8ed; color: #4f5a6c; font-size: .75rem; }
.change-item:last-child { border-bottom: 0; }
.change-item small { flex: 0 0 auto; color: var(--muted); font-size: .66rem; white-space: nowrap; }
.subtle { color: var(--muted); font-size: .8rem; }
.drawer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 9px 20px; }

.ticket-contact-summary { padding: 8px 20px; }
.ticket-contact-summary h2 { margin: 0 0 6px; color: var(--muted); font-size: .78rem; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; }
.ticket-contact-summary-list { display: grid; gap: 4px; }
.ticket-contact-summary-row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 6px 10px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdff; font-size: .78rem; }
.ticket-contact-summary-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-contact-summary-phone, .ticket-contact-summary-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-contact-summary-row a, .contact-row a { color: var(--blue); text-decoration: none; }
.ticket-contact-summary-row a:hover, .contact-row a:hover { text-decoration: underline; }

.contact-row-more { display: inline-block; }
.contact-row-more summary { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; min-height: 20px; padding: 0 4px; border-radius: 5px; color: var(--blue); font-size: .78rem; line-height: 1; cursor: pointer; list-style: none; }
.contact-row-more summary::-webkit-details-marker { display: none; }
.contact-row-more summary:hover, .contact-row-more summary:focus-visible { background: var(--blue-soft); outline: 0; }
.contact-row-more[open] { display: block; }
.contact-row-more a { display: block; margin-top: 2px; }

.location-field-wrap { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
.location-map-button { align-self: end; flex: 0 0 auto; width: 44px; min-width: 44px; height: 44px; min-height: 44px; border: 1px solid #f1b9bd; border-radius: 10px; color: #bd2632; background: #fff5f5; font-size: 1.1rem; }
.location-map-button:hover { background: #ffe9ea; }
.location-map-button:focus-visible { outline: 3px solid rgba(189,38,50,.35); outline-offset: 2px; }

#close-drawer svg, #open-location-map svg { width: 26px; height: 26px; }
#close-drawer:hover .close-drawer-icon rect { fill: #a51f2a; }
#close-drawer:focus-visible { outline: 3px solid rgba(189,38,50,.35); outline-offset: 2px; }
@media (max-width: 800px) {
  #close-drawer svg, #open-location-map svg { width: 24px; height: 24px; }
}

.settings-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; color: var(--ink); box-shadow: var(--shadow); }
.settings-dialog::backdrop { background: rgba(21,29,43,.42); backdrop-filter: blur(2px); }
.settings-dialog form { padding: 22px; }
.dialog-head, .dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-head h2 { margin: 3px 0 0; }
.column-settings { display: grid; gap: 7px; margin: 18px 0; }
.column-setting { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; cursor: grab; }
.column-setting .drag-handle { cursor: grab; color: var(--muted); font-size: 1rem; line-height: 1; touch-action: none; }
.column-setting.dragging { opacity: .45; }
.column-setting.drag-over-before { border-top-color: var(--blue); }
.column-setting.drag-over-after { border-bottom-color: var(--blue); }
.dialog-actions { justify-content: flex-end; margin-top: 20px; }
.contact-assignment-dialog { width: min(560px, calc(100vw - 24px)); }
.assignment-phone-label { margin: 16px 0; padding: 10px 12px; border-radius: 9px; color: var(--muted); background: var(--blue-soft); font-size: .84rem; }
.assignment-phone-label strong { margin-left: 5px; color: var(--ink); font-size: .95rem; }
.assignment-search-field { margin-bottom: 7px; }
.assignment-contact-results { max-height: 230px; overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.assignment-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--muted); font-size: .74rem; }
.assignment-divider::before, .assignment-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.assignment-company-results { max-height: 170px; margin-top: 7px; }
.assignment-company-selected { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; padding: 9px 12px; border-radius: 9px; color: var(--ink); background: var(--blue-soft); font-size: .84rem; }
.assignment-company-toggle { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; }
.assignment-company-toggle legend { padding: 0 4px; font-size: .8rem; }
.assignment-radio-option { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 5px 0; }
.assignment-radio-option input { width: auto; height: auto; }
.inline-assign-contact { margin-left: 5px; }
.link-entry-dialog { width: min(460px, calc(100vw - 24px)); }
.users-dialog { width: min(760px, calc(100vw - 32px)); }
.user-list { display: grid; gap: 7px; max-height: 310px; overflow-y: auto; margin: 18px 0; padding-right: 3px; }
.user-row { display: grid; grid-template-columns: auto minmax(120px, 1fr) minmax(190px, 1.4fr) auto auto auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.user-row .person-avatar { width: 34px; height: 34px; }
.user-row-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .82rem; }
.role-badge { padding: 4px 8px; border-radius: 999px; color: #335274; background: #edf4fb; font-size: .72rem; font-weight: 750; }
.active-switch { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .76rem; }
.edit-user { min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff; font-weight: 650; }
.user-row-actions { display: flex; gap: 5px; }
.delete-user { min-height: 32px; padding: 0 8px; border: 1px solid #f1c5c8; border-radius: 7px; color: #b52a35; background: #fff; font-weight: 650; }
.user-editor { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.user-editor h3 { margin: 0; }
.user-fields { display: grid; grid-template-columns: 1fr 1.3fr .9fr; gap: 10px; }
.file-preview-dialog { width: min(1100px, calc(100vw - 32px)); height: min(850px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 14px; color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.file-preview-dialog::backdrop { background: rgba(15,22,35,.72); }
.preview-head { height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 18px; border-bottom: 1px solid var(--line); }
.preview-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-preview-content { height: calc(100% - 58px); display: grid; place-items: center; overflow: auto; background: #e9edf3; }
.file-preview-content img { max-width: 100%; max-height: 100%; object-fit: contain; }
.file-preview-content iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.customer-dialog { width: min(980px, calc(100vw - 32px)); height: min(850px, calc(100vh - 32px)); padding: 0; overflow: hidden; border: 0; border-radius: 16px; color: var(--ink); background: var(--canvas); box-shadow: var(--shadow); }
.customer-dialog[open] { display: flex; flex-direction: column; }
.customer-dialog::backdrop { background: rgba(15,22,35,.58); backdrop-filter: blur(2px); }
.customer-dialog-head { min-height: 76px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.customer-dialog-head h2 { margin: 2px 0; overflow: hidden; font-size: 1.25rem; text-overflow: ellipsis; white-space: nowrap; }
.customer-webapp-data, .customer-additional-data { flex: 0 0 auto; border-bottom: 1px solid var(--line); background: #fff; }
.customer-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px 2px; }
.customer-section-title > div { display: grid; gap: 2px; }
.customer-section-title strong { font-size: .8rem; }
.customer-section-title span { color: var(--muted); font-size: .68rem; }
.customer-summary { display: grid; grid-template-columns: 1.1fr .85fr 1.25fr 1.5fr; gap: 10px; padding: 8px 18px 11px; background: #fff; }
.customer-summary > div { min-width: 0; display: grid; gap: 3px; }
.customer-summary span { color: var(--muted); font-size: .7rem; }
.customer-summary strong, .customer-summary a { overflow: hidden; color: inherit; font-size: .82rem; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.customer-summary a:not(.disabled-link) { color: var(--blue); }
.customer-additional-data { padding-bottom: 9px; }
.customer-additional-contacts { display: grid; gap: 5px; max-height: 174px; overflow-y: auto; padding: 7px 18px 0; }
.customer-additional-contact { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(0,2fr) auto; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; }
.additional-contact-person { min-width: 0; display: grid; gap: 2px; }
.additional-contact-person strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.additional-contact-person span { color: var(--muted); font-size: .66rem; }
.additional-contact-methods { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.additional-contact-methods a { padding: 4px 7px; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-size: .72rem; text-decoration: none; }
.additional-contact-dialog { width: min(570px, calc(100vw - 24px)); }
.additional-contact-hint { margin: 15px 0; padding: 9px 11px; border-radius: 8px; color: var(--muted); background: var(--blue-soft); font-size: .78rem; }
.customer-ticket-content { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 14px 18px 24px; }
.customer-ticket-section + .customer-ticket-section { margin-top: 16px; }
.customer-ticket-section > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.customer-ticket-section h3 { margin: 0; font-size: .95rem; }
.customer-ticket-list { display: grid; gap: 6px; }
.customer-ticket-row { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; padding: 9px 11px; border: 1px solid var(--line); border-left: 4px solid #a7afbd; border-radius: 9px; text-align: left; color: var(--ink); background: #fff; }
.customer-ticket-row.today { border-left-color: var(--today); }
.customer-ticket-row.week { border-left-color: var(--week); }
.customer-ticket-row:hover { border-color: #9dbfea; box-shadow: 0 5px 16px rgba(35,45,70,.07); }
.customer-ticket-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-ticket-row time { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.customer-ticket-row span { overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.customer-ticket-more { margin-top: 7px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.customer-ticket-more summary { padding: 10px 12px; color: var(--blue); font-size: .8rem; font-weight: 700; cursor: pointer; }
.customer-ticket-more .customer-ticket-list { padding: 0 7px 7px; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 10px; color: #fff; background: #202a3c; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 800px) {
  body { overflow: hidden; }
  .app-header { height: 60px; grid-template-columns: 1fr auto; padding: 0 14px; }
  .brand { font-size: 1.1rem; }
  .brand-mark { width: 28px; height: 28px; }
  .global-search-shell, .desktop-only, .avatar-button, .primary-button span { display: none; }
  .global-search-shell.mobile-open { position: fixed; z-index: 120; inset: 0; display: block; padding: 9px; background: #fff; }
  .global-search-shell.mobile-open .search { display: flex; }
  .global-search-results { position: fixed; top: 60px; left: 0; right: 0; max-height: calc(100vh - 60px); border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
  .unknown-phone-result { align-items: stretch; flex-direction: column; }
  .header-actions { gap: 4px; }
  #new-ticket { width: 42px; padding: 0; border-radius: 50%; font-size: 0; }
  #new-ticket::before { content: "+"; font-size: 1.6rem; font-weight: 400; }
  .mobile-controls { height: 104px; display: grid; gap: 5px; padding: 7px 14px; border-bottom: 1px solid var(--line); background: #fff; }
  .mobile-scope { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .mobile-filter-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .mobile-controls label { min-width: 0; flex: 1; display: grid; gap: 1px; color: var(--muted); font-size: .68rem; font-weight: 700; }
  .mobile-controls select { height: 30px; border: 0; outline: 0; color: var(--ink); background: #fff; font-size: .95rem; font-weight: 750; }
  .board { height: calc(100vh - 164px); display: block; padding: 10px; overflow-y: auto; overflow-x: hidden; scroll-snap-type: none; }
  .person-column { width: 100%; min-width: 0; height: auto; min-height: 100%; border-radius: 12px; }
  .board.mine-board .person-column { min-height: 0; }
  .person-column.mobile-hidden { display: none; }
  .column-body { overflow: visible; }
  .backdrop { inset: 0; }
  .drawer { top: 0; width: 100vw; }
  .drawer-head { min-height: 66px; padding: 9px 11px; }
  .drawer-head h1 { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
  .drawer-head .primary-button { min-height: 38px; padding: 0 11px; }
  .drawer-head-actions { gap: 2px; }
  #toggle-contact { padding: 5px; font-size: .75rem; }
  .form-section { padding: 16px; }
  .ticket-controls-section { padding: 8px 12px 9px; }
  .contact-card { margin: 8px 12px 0; padding: 10px 12px; }
  .status-grid { grid-template-columns: 1.2fr 1fr .8fr; gap: 6px; }
  .contact-grid { grid-template-columns: 1fr; gap: 10px; }
  .contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; }
  .contact-row-name, .contact-row-phone, .contact-row-email { max-width: 100%; }
  .contact-row-status, .contact-row-select { margin-left: auto; }
  .ticket-contact-summary { padding: 8px 12px; }
  .ticket-contact-summary-row { grid-template-columns: 1fr; gap: 2px; }
  .asset-grid { grid-template-columns: 1fr; }
  .location-field-wrap { grid-template-columns: 1fr auto; }
  .change-item { align-items: flex-start; flex-direction: column; gap: 3px; }
  .drawer-actions { position: sticky; bottom: 0; z-index: 2; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); }
  .customer-dialog { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; border-radius: 0; }
  .customer-dialog-head { min-height: 66px; padding: 8px 10px; }
  .customer-dialog-head h2 { font-size: 1.05rem; }
  .customer-dialog-head .primary-button { min-height: 38px; padding: 0 10px; font-size: .78rem; }
  .customer-summary { grid-template-columns: 1fr 1fr; padding: 10px 12px; }
  .customer-section-title { padding: 8px 12px 2px; }
  .customer-additional-contacts { max-height: 190px; padding: 7px 12px 0; }
  .customer-additional-contact { grid-template-columns: 1fr auto; }
  .additional-contact-methods { grid-column: 1 / -1; }
  .additional-contact-dialog { width: 100vw; max-width: none; max-height: 100vh; margin: 0; border-radius: 0; }
  .additional-contact-dialog form { max-height: 100vh; overflow-y: auto; padding: 18px 16px max(24px, env(safe-area-inset-bottom)); }
  .customer-ticket-content { height: auto; padding: 10px 10px 22px; }
  .contact-assignment-dialog { width: 100vw; max-width: none; max-height: 100vh; margin: 0; border-radius: 0; }
  .contact-assignment-dialog form { max-height: 100vh; overflow-y: auto; padding: 18px 16px max(24px, env(safe-area-inset-bottom)); }
  .note-entry.mobile-composer { position: fixed; z-index: 50; left: 8px; right: 8px; bottom: calc(var(--keyboard-inset, 0px) + 8px); margin: 0; padding: 8px; border-color: #79aaf0; background: #fff; box-shadow: 0 12px 34px rgba(18, 31, 55, .28); }
  .drawer.mobile-note-editing .drawer-actions,
  .drawer.mobile-note-editing .drawer-head-actions { visibility: hidden; }
  .note-actions { align-items: stretch; flex-direction: column; }
  .user-row { grid-template-columns: auto 1fr auto; }
  .user-row-email { grid-column: 2 / -1; grid-row: 2; }
  .role-badge { grid-column: 2; }
  .active-switch { grid-column: 2; }
  .user-row-actions { grid-column: 3; grid-row: 1; }
  .user-fields { grid-template-columns: 1fr; }
  .file-preview-dialog { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; border-radius: 0; }
  .auth-screen { padding: 12px; align-items: center; }
  .auth-card { padding: 20px 17px; border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}