:root {
  --bg: #f4f6f7;
  --panel: #ffffff;
  --ink: #1f2a33;
  --muted: #667680;
  --line: #d9e0e4;
  --blue: #245b7a;
  --blue-dark: #173d53;
  --urgent: #c44734;
  --review: #d49a25;
  --done: #2e7a54;
  --zone: #e6edf1;
  --zone-active: #cfe3ed;
  --shadow: 0 16px 42px rgba(31, 42, 51, .11);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
}

button, input, select, textarea { font: inherit; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px clamp(18px, 4vw, 42px);
  background: var(--blue-dark);
  color: #fff;
}

.eyebrow {
  margin: 0 0 6px;
  color: #6fa3bd;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.topbar .eyebrow { color: #b6d8e7; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 0;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.1;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(95px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
}

.status-strip span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .08);
  color: #dcecf3;
  font-size: 13px;
}

.status-strip strong {
  color: #fff;
  font-size: 24px;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .7fr);
  gap: 18px;
  padding: 18px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.map-panel, .form-panel, .list-panel { padding: clamp(18px, 3vw, 28px); }
.list-panel { grid-column: 1 / -1; }

.panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.floor-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f8f9;
}

.tab {
  min-width: 62px;
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
}

.tab.is-active {
  background: var(--blue);
  color: #fff;
}

.plan {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, minmax(42px, 1fr));
  gap: 10px;
  min-height: 470px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(31, 42, 51, .05) 1px, transparent 1px),
    linear-gradient(rgba(31, 42, 51, .05) 1px, transparent 1px),
    #fbfcfc;
  background-size: 36px 36px;
}

.zone {
  border: 1px solid #becbd1;
  border-radius: 8px;
  background: var(--zone);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  text-align: center;
}

.zone:hover, .zone.is-selected {
  background: var(--zone-active);
  border-color: var(--blue);
  outline: 3px solid rgba(36, 91, 122, .16);
}

.zone-a { grid-column: 1 / 5; grid-row: 1 / 4; }
.zone-b { grid-column: 5 / 9; grid-row: 1 / 5; }
.zone-c { grid-column: 1 / 7; grid-row: 4 / 8; }
.zone-d { grid-column: 7 / 13; grid-row: 5 / 9; }
.zone-e { grid-column: 9 / 13; grid-row: 1 / 3; }
.zone-f { grid-column: 9 / 13; grid-row: 3 / 5; }

.pin {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .28);
}

.pin-1 { top: 26%; left: 25%; background: var(--urgent); }
.pin-2 { right: 24%; bottom: 24%; background: var(--review); }
.pin-3 { left: 37%; bottom: 33%; background: var(--done); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
}

.urgent { background: var(--urgent); }
.review { background: var(--review); }
.done { background: var(--done); }

form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--ink);
  background: #f9fbfb;
}

textarea { resize: vertical; }

.primary-action {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.primary-action:hover { background: var(--blue-dark); }

.damage-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.damage-card {
  display: grid;
  gap: 10px;
  min-height: 180px;
  padding: 18px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--review);
  border-radius: 8px;
  background: #fff;
}

.damage-card[data-priority="urgent"] { border-left-color: var(--urgent); }
.damage-card[data-priority="done"] { border-left-color: var(--done); }

.damage-card.is-highlighted {
  border-color: rgba(37, 101, 132, .55);
  box-shadow: 0 0 0 3px rgba(37, 101, 132, .16), 0 18px 34px rgba(24, 50, 64, .16);
}

.map-pin.is-active {
  z-index: 5;
  outline: 4px solid rgba(255, 255, 255, .72);
  box-shadow: 0 0 0 5px rgba(37, 101, 132, .32), 0 8px 18px rgba(0, 0, 0, .42);
}

.map-report-popover {
  position: absolute;
  z-index: 6;
  width: min(330px, 78vw);
  max-height: 360px;
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(18, 48, 62, .20);
  border-radius: 8px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 42px rgba(7, 25, 35, .28);
  transform: translate(18px, -50%);
  pointer-events: auto;
}

.map-report-popover.is-left {
  transform: translate(calc(-100% - 18px), -50%);
}

.map-report-popover.is-top {
  transform: translate(18px, calc(-100% + 12px));
}

.map-report-popover.is-left.is-top {
  transform: translate(calc(-100% - 18px), calc(-100% + 12px));
}

.map-report-popover h3 {
  margin: 10px 28px 6px 0;
  font-size: 18px;
}

.map-report-popover p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.42;
}

.map-popover-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.damage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef2f4;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.damage-card h3 {
  margin: 0;
  font-size: 18px;
}

.damage-card p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 980px) {
  .topbar, .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace, .damage-list { grid-template-columns: 1fr; }
  .status-strip { width: 100%; }
}

@media (max-width: 620px) {
  .workspace { padding: 10px; }
  .status-strip { grid-template-columns: 1fr; }

  .plan {
    grid-template-rows: repeat(8, 44px);
    min-height: 0;
    overflow-x: auto;
  }

  .floor-tabs { width: 100%; }
  .tab { flex: 1; }
}

.photo-help {
  margin-top: -6px;
  color: var(--muted);
  font-size: 13px;
}

.photo-preview {
  display: block;
}

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  width: 100%;
}

.form-panel .photo-gallery {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.form-panel .photo-thumb {
  aspect-ratio: 4 / 3;
}

.photo-preview:empty,
.photo-gallery:empty {
  display: none;
}

.photo-thumb {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef2f4;
}

.photo-zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(11, 26, 36, .86);
}

.photo-lightbox[hidden] {
  display: none;
}

.photo-lightbox img {
  display: block;
  max-width: min(1120px, 94vw);
  max-height: 88vh;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  object-fit: contain;
}

.photo-lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

body.has-photo-lightbox {
  overflow: hidden;
}

.photo-tool {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(31, 42, 51, .82);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}

.photo-remove {
  right: 5px;
}

.photo-rotate {
  left: 5px;
  right: auto;
  background: rgba(38, 100, 130, .9);
}

.photo-count {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f9fbfb;
  color: var(--muted);
  font-weight: 700;
}

.error-state {
  border-color: rgba(196, 71, 52, .45);
  color: var(--urgent);
  background: #fff8f6;
}

.primary-action:disabled {
  cursor: wait;
  opacity: .7;
}


.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #dcecf3;
  font-weight: 700;
}

.small-action,
.secondary-action,
.danger-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
}

.topbar .small-action {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.danger-action {
  border-color: rgba(196, 71, 52, .35);
  color: var(--urgent);
}

.auth-screen {
  display: grid;
  min-height: calc(100vh - 100px);
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(460px, 100%);
  margin: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.auth-note,
.owner-note,
.status-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.status-note {
  padding: 10px;
  border-radius: 8px;
  background: #f6f8f9;
  color: var(--blue-dark);
  font-weight: 700;
}

.form-actions,
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-actions .primary-action {
  flex: 1 1 190px;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(320px, .7fr) minmax(0, 1.3fr);
  gap: 18px;
  padding: 18px;
}

.user-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.user-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.user-card h3,
.user-card p {
  margin: 0;
}

.user-card p {
  color: var(--muted);
}

.check-row {
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: start;
}

.check-row input {
  width: auto;
}

.photo-delete-server {
  left: auto;
  right: 5px;
  background: rgba(196, 71, 52, .92);
}

.photo-rotate-server,
.photo-rotate {
  left: 5px;
  right: auto;
  background: rgba(38, 100, 130, .94);
}

@media (max-width: 980px) {
  .admin-layout,
  .user-list {
    grid-template-columns: 1fr;
  }
}

.auth-link {
  display: inline-flex;
  justify-content: center;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

.auth-heading {
  margin: 0 0 18px;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.05;
}

.menu-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 18px;
  padding: 18px;
}

.menu-tile {
  display: grid;
  gap: 12px;
  min-height: 210px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
}

.menu-tile strong {
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1;
}

.menu-tile p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}

@media (max-width: 760px) {
  .menu-layout {
    grid-template-columns: 1fr;
  }
}

.aerial-plan {
  position: relative;
  width: min(760px, 100%);
  max-height: 78vh;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101820;
  cursor: crosshair;
}

.aerial-plan img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.map-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-pin,
.current-marker {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .38);
  transform: translate(-50%, -50%);
}

.map-pin {
  pointer-events: auto;
  cursor: pointer;
}

.map-pin span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.map-pin.urgent,
.current-marker {
  background: var(--urgent);
}

.map-pin.review {
  background: var(--review);
}

.map-pin.done {
  background: var(--done);
}

.current-marker {
  z-index: 3;
  pointer-events: none;
  animation: markerPulse 1.4s ease-in-out infinite;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  touch-action: none;
}

.current-marker.is-editing { pointer-events: auto; cursor: grab; }
.current-marker.is-dragging { cursor: grabbing; animation: none; box-shadow: 0 0 0 6px rgba(37,101,132,.25),0 6px 16px rgba(0,0,0,.42); }

.map-help {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

@keyframes markerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 71, 52, .42), 0 4px 12px rgba(0, 0, 0, .38); }
  50% { box-shadow: 0 0 0 10px rgba(196, 71, 52, 0), 0 4px 12px rgba(0, 0, 0, .38); }
}

.map-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.map-toolbar .secondary-action {
  min-width: 44px;
}

#zoom-label {
  min-width: 58px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.aerial-plan {
  touch-action: none;
  cursor: grab;
}

.aerial-plan:active {
  cursor: grabbing;
}

.aerial-canvas {
  position: relative;
  transform-origin: 0 0;
  will-change: transform;
}

.aerial-canvas img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.aerial-canvas .map-pins,
.aerial-canvas .current-marker {
  transform-origin: 0 0;
}

.admin-menu {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.dashboard-layout {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.dashboard-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
}

.stat-card {
  min-height: 118px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(18, 47, 62, .08);
}

.stat-card span {
  display: block;
  min-height: 34px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.stat-card strong {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 18px;
}

.dashboard-panel {
  padding: 24px;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-heading h2,
.dashboard-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
}

.compact-list {
  display: grid;
  gap: 10px;
}

.compact-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.compact-item strong,
.compact-item p,
.compact-item small {
  overflow-wrap: anywhere;
}

.compact-item p {
  margin: 4px 0;
  color: var(--muted);
  font-weight: 700;
}

.compact-item small,
.muted-copy,
.empty-state {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.status-dot {
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--review);
}

.status-dot.urgent {
  background: var(--urgent);
}

.status-dot.done {
  background: var(--done);
}

.damage-type-list {
  display: grid;
  gap: 10px;
}

.damage-type-item {
  grid-template-columns: 1fr auto;
}

.damage-type-item.is-muted {
  opacity: 0.62;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.quick-actions a {
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}


.placeholder-layout {
  padding: 18px;
}

.placeholder-panel {
  width: min(900px, 100%);
  padding: clamp(24px, 4vw, 42px);
}

.placeholder-panel p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 18px;
}

.side-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: 92px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  padding: 14px 10px;
  background: #122f3e;
  color: #fff;
  box-shadow: 8px 0 24px rgba(18, 47, 62, .18);
}

.side-brand {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin: 0 auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

.side-links {
  display: grid;
  align-content: start;
  gap: 8px;
}

.side-links a {
  display: grid;
  min-height: 48px;
  place-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.side-links a:hover,
.side-links a.is-active {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

body:has(.side-nav),
body.has-side-nav {
  padding-left: 92px;
}

body:has(.side-nav) .topbar,
body.has-side-nav .topbar {
  margin-left: 0;
}

@media (max-width: 760px) {
  .side-nav {
    width: 74px;
    padding-inline: 8px;
  }

  body:has(.side-nav),
  body.has-side-nav {
    padding-left: 74px;
  }

  .side-links a {
    min-height: 44px;
    font-size: 10px;
  }

  .dashboard-strip,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .section-heading {
    display: grid;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .damage-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: 76px;
  }

  body:has(.side-nav),
  body.has-side-nav {
    padding-left: 0;
  }

  .topbar {
    display: grid;
    gap: 14px;
    padding: 18px 14px;
  }

  .topbar h1 {
    font-size: 34px;
  }

  .top-actions {
    width: 100%;
    justify-content: space-between;
  }

  .top-actions #current-user {
    flex: 1 1 100%;
  }

  .small-action,
  .secondary-action,
  .danger-action,
  .primary-action {
    min-height: 44px;
  }

  .status-strip {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .status-strip span {
    padding: 10px 8px;
    font-size: 12px;
  }

  .workspace,
  .dashboard-layout,
  .placeholder-layout,
  .admin-layout {
    padding: 12px;
  }

  .map-panel,
  .form-panel,
  .list-panel,
  .dashboard-panel,
  .panel {
    padding: 16px;
  }

  .panel-head {
    display: grid;
    gap: 12px;
  }

  .floor-tabs,
  .map-toolbar {
    width: 100%;
  }

  .floor-tabs .tab {
    flex: 1 1 0;
  }

  .map-toolbar {
    display: grid;
    grid-template-columns: 48px 1fr 48px 82px;
  }

  .aerial-plan {
    width: 100%;
    max-height: 62vh;
    border-radius: 8px;
  }

  .map-help {
    font-size: 13px;
  }

  .form-actions,
  .card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  input[type="file"] {
    min-height: 58px;
    padding: 14px;
    background: #fff;
  }

  .photo-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-thumb {
    aspect-ratio: 1 / 1;
  }

  .photo-tool {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .damage-list {
    grid-template-columns: 1fr;
  }

  .damage-card {
    min-height: 0;
  }

  .side-nav {
    inset: auto 0 0 0;
    width: auto;
    height: 68px;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    overflow-x: auto;
    box-shadow: 0 -8px 24px rgba(18, 47, 62, .18);
  }

  .side-brand {
    width: 48px;
    height: 48px;
    margin: 0;
    font-size: 13px;
  }

  .side-links {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .side-links::-webkit-scrollbar {
    display: none;
  }

  .side-links a {
    min-width: 76px;
    min-height: 48px;
    padding: 6px 8px;
    font-size: 10px;
    white-space: normal;
  }
}

@media (max-width: 430px) {
  .topbar h1 {
    font-size: 30px;
  }

  .status-strip {
    grid-template-columns: 1fr;
  }

  .map-toolbar {
    grid-template-columns: 44px 1fr 44px;
  }

  .map-toolbar #zoom-reset {
    grid-column: 1 / -1;
  }

  .photo-gallery {
    grid-template-columns: 1fr;
  }
}


.documents-layout {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.admin-documents-layout {
  grid-template-columns: minmax(320px, .45fr) minmax(0, 1fr);
  align-items: start;
}

.documents-panel {
  padding: 24px;
}

.document-list {
  display: grid;
  gap: 12px;
}

.document-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--done);
  border-radius: 8px;
  background: #fff;
}

.document-card.is-locked {
  border-left-color: var(--review);
  opacity: .86;
}

.document-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 8px;
  background: #e8f0f4;
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 900;
}

.document-body {
  min-width: 0;
}

.document-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.document-title-row h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.document-body p {
  margin: 8px 0 12px;
  color: var(--muted);
}

.check-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
}

.check-row input {
  width: auto;
}

@media (max-width: 980px) {
  .admin-documents-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .documents-layout {
    padding: 12px;
  }

  .documents-panel {
    padding: 16px;
  }

  .document-card {
    grid-template-columns: 1fr;
  }

  .document-title-row {
    display: grid;
  }

  .document-icon {
    width: 52px;
    height: 52px;
  }
}


.owner-admin-layout {
  grid-template-columns: minmax(360px, .75fr) minmax(0, 1fr);
}

.owner-form-panel {
  align-self: start;
}

.form-grid.two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.owner-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.owner-card {
  gap: 12px;
}

.owner-share-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.owner-share-row span {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafb;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.owner-share-row strong {
  color: var(--ink);
  font-size: 20px;
}

@media (max-width: 1180px) {
  .owner-admin-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .form-grid.two-cols,
  .owner-share-row {
    grid-template-columns: 1fr;
  }
}




.owner-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.owner-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 14px;
}

.owner-table th,
.owner-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.owner-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef4f6;
  color: var(--blue-dark);
}

.owner-table tbody tr:hover {
  background: #f8fafb;
}

.owner-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table-sort {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.table-sort.is-active {
  color: var(--blue);
}

.table-actions {
  display: flex;
  gap: 8px;
}

.table-actions .secondary-action,
.table-actions .danger-action {
  min-height: 34px;
  padding: 6px 10px;
}

@media (max-width: 760px) {
  .owner-table-wrap {
    margin-inline: -4px;
  }

  .owner-table {
    min-width: 980px;
    font-size: 13px;
  }

  .owner-table th,
  .owner-table td {
    padding: 9px 10px;
  }
}


.owner-list-panel {
  grid-column: 1 / -1;
}

.owner-list-panel .user-list {
  display: block;
}

.owner-form-panel[hidden] {
  display: none;
}

#show-owner-form {
  white-space: nowrap;
}


@media (min-width: 761px) {
  .owner-list-panel {
    width: calc(100vw - 92px - 36px);
    max-width: none;
  }

  .owner-table-wrap {
    overflow-x: visible;
  }

  .owner-table {
    width: max-content;
    min-width: 100%;
  }

  body.has-side-nav:has(.owner-table) {
    overflow-x: auto;
  }
}


@media (max-width: 760px) {
  body.reports-page {
    background: #f4f7f8;
    padding-bottom: 78px;
  }

  body.reports-page.has-side-nav {
    padding-left: 0;
  }

  body.reports-page .topbar {
    padding: 16px 14px 12px;
    gap: 10px;
  }

  body.reports-page .topbar h1 {
    font-size: 28px;
    line-height: 1.05;
  }

  body.reports-page .topbar .eyebrow,
  body.reports-page .status-strip,
  body.reports-page .legend,
  body.reports-page .floor-tabs {
    display: none;
  }

  body.reports-page .top-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
    align-items: center;
  }

  body.reports-page .top-actions #current-user {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body.reports-page .top-actions .small-action,
  body.reports-page .top-actions button.small-action {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    font-size: 14px;
  }

  body.reports-page .workspace {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }

  body.reports-page .panel {
    border-radius: 8px;
    box-shadow: none;
  }

  body.reports-page .map-panel {
    order: 1;
    padding: 12px;
  }

  body.reports-page .map-panel .panel-head {
    gap: 6px;
    margin-bottom: 8px;
  }

  body.reports-page .map-panel h2 {
    font-size: 20px;
  }

  body.reports-page .map-toolbar {
    display: grid;
    grid-template-columns: 52px 1fr 52px 76px;
    margin-bottom: 8px;
  }

  body.reports-page .map-toolbar .secondary-action {
    min-height: 42px;
    padding: 0;
  }

  body.reports-page #zoom-label {
    display: grid;
    place-items: center;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-weight: 800;
  }

  body.reports-page .aerial-plan {
    width: 100%;
    max-height: 32vh;
    min-height: 170px;
    border-radius: 8px;
  }

  body.reports-page .map-help {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.35;
  }

  body.reports-page .form-panel {
    order: 2;
    padding: 16px;
  }

  body.reports-page .form-panel .eyebrow {
    margin-bottom: 4px;
  }

  body.reports-page .form-panel h2 {
    margin-bottom: 14px;
    font-size: 24px;
  }

  body.reports-page #damage-form {
    display: grid;
    gap: 12px;
  }

  body.reports-page label {
    gap: 7px;
    font-size: 15px;
  }

  body.reports-page input,
  body.reports-page select,
  body.reports-page textarea {
    min-height: 50px;
    border-radius: 8px;
    font-size: 16px;
  }

  body.reports-page textarea {
    min-height: 132px;
  }

  body.reports-page .optional-report-field {
    display: none;
  }

  body.reports-page input[type="file"] {
    min-height: 58px;
    padding: 13px;
    background: #fff;
  }

  body.reports-page .photo-help {
    margin-top: -4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eef5f7;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
  }

  body.reports-page .photo-preview {
    margin-top: 0;
  }


  body.reports-page .form-panel .photo-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.reports-page .form-panel .photo-thumb {
    min-height: 118px;
  }

  body.reports-page .form-actions {
    position: sticky;
    bottom: 68px;
    z-index: 20;
    display: grid;
    gap: 8px;
    margin: 6px -16px -16px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
  }

  body.reports-page .primary-action,
  body.reports-page .secondary-action,
  body.reports-page .danger-action {
    min-height: 50px;
    border-radius: 8px;
    font-size: 16px;
  }

  body.reports-page .list-panel {
    order: 3;
    padding: 12px;
  }

  body.reports-page .list-panel .panel-head {
    display: grid;
    gap: 10px;
  }

  body.reports-page .list-panel h2 {
    font-size: 20px;
  }

  body.reports-page .damage-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.reports-page .damage-card {
    min-height: 0;
    padding: 14px;
  }

  body.reports-page .map-report-popover {
    width: min(320px, 88vw);
    max-height: 55vh;
  }
}

@media (max-width: 760px) {
  body.reports-page.report-entry-only {
    padding-bottom: 84px;
  }

  body.reports-page.report-entry-only .workspace {
    padding-bottom: 4px;
  }
}



.report-entry-only .report-entry-hidden {
  display: none !important;
}

.report-entry-only .workspace {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
}

@media (max-width: 980px) {
  .report-entry-only .workspace {
    grid-template-columns: 1fr;
  }
}



@media (max-width: 760px) {
  body.dashboard-page .dashboard-layout {
    gap: 10px;
    padding: 10px;
  }

  body.dashboard-page .dashboard-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  body.dashboard-page .stat-card {
    min-height: 0;
    padding: 9px 8px;
    border-radius: 8px;
    box-shadow: none;
  }

  body.dashboard-page .stat-card span {
    min-height: 0;
    font-size: 10px;
    line-height: 1.15;
  }

  body.dashboard-page .stat-card strong {
    margin-top: 6px;
    font-size: 24px;
  }

  body.dashboard-page .dashboard-panel {
    padding: 14px;
  }

  body.dashboard-page .section-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
  }

  body.dashboard-page .section-heading h2,
  body.dashboard-page .dashboard-panel h2 {
    font-size: 22px;
  }

  body.dashboard-page .section-heading .secondary-action {
    min-height: 36px;
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  body.dashboard-page .compact-item {
    gap: 8px;
    padding: 10px 0;
  }

  body.dashboard-page .compact-item p,
  body.dashboard-page .compact-item small,
  body.dashboard-page .muted-copy {
    font-size: 13px;
    line-height: 1.35;
  }

  body.dashboard-page .dashboard-grid {
    gap: 10px;
  }

  body.dashboard-page .quick-actions {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 10px;
  }

  body.dashboard-page .quick-actions a {
    min-height: 38px;
    justify-content: start;
    place-items: center start;
    padding: 0 12px;
    font-size: 14px;
    text-align: left;
  }
}

@media (max-width: 430px) {
  body.dashboard-page .dashboard-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



.document-browser {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.document-category-nav {
  position: sticky;
  top: 14px;
  display: grid;
  gap: 8px;
}

.category-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.category-filter span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-filter strong {
  min-width: 28px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef2f4;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.category-filter.is-active {
  border-color: rgba(37, 101, 132, .45);
  background: #eaf3f6;
  color: var(--blue-dark);
}

.document-groups {
  display: grid;
  gap: 16px;
}

.document-category-section {
  display: grid;
  gap: 10px;
}

.document-category-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.document-category-heading h3 {
  margin: 0;
  font-size: 22px;
}

.document-category-heading span {
  color: var(--muted);
  font-weight: 800;
}

.document-category-list {
  display: grid;
  gap: 10px;
}

@media (max-width: 980px) {
  .document-browser {
    grid-template-columns: 1fr;
  }

  .document-category-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .category-filter {
    min-width: 180px;
  }
}

@media (max-width: 760px) {
  .document-category-heading h3 {
    font-size: 19px;
  }

  .category-filter {
    min-width: 150px;
    min-height: 38px;
    font-size: 13px;
  }
}



.document-browser-shell {
  display: grid;
  gap: 14px;
}

.document-searchbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.document-searchbar label {
  gap: 6px;
}

.document-searchbar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.document-searchbar input {
  min-height: 44px;
  background: #fff;
}

.document-search-count {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: #eef2f4;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .document-searchbar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .document-search-count {
    min-height: 34px;
    justify-content: start;
    place-items: center start;
  }
}



.owner-searchbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.owner-searchbar label {
  gap: 6px;
}

.owner-searchbar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.owner-searchbar input {
  min-height: 44px;
  background: #fff;
}

.owner-search-count {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: #eef2f4;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .owner-searchbar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .owner-search-count {
    min-height: 34px;
    justify-content: start;
    place-items: center start;
  }
}



.info-layout {
  display: grid;
  grid-template-columns: minmax(320px, .7fr) minmax(0, 1.3fr);
  gap: 18px;
  padding: 18px;
}

.info-public-layout {
  grid-template-columns: 1fr;
}

.info-form-panel,
.info-list-panel {
  padding: clamp(18px, 3vw, 28px);
}

.info-list {
  display: grid;
  gap: 14px;
}

.info-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.info-card.is-draft {
  background: #fbfcfd;
  border-style: dashed;
}

.info-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.info-card h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
}

.info-body-text {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
}

.info-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.info-photo-grid a {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef2f4;
}

.info-photo-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.info-doc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 980px) {
  .info-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .info-card-head {
    display: grid;
  }
}


.info-calendar {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafb;
}

.info-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.info-calendar-head h3 {
  margin: 0;
  font-size: 20px;
  text-transform: capitalize;
}

.info-calendar-weekdays,
.info-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.info-calendar-weekdays span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.info-calendar-day {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 92px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.info-calendar-day.is-muted {
  opacity: .45;
}

.info-calendar-day.is-today {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(36, 91, 122, .12);
}

.info-calendar-day strong {
  color: var(--blue-dark);
  font-size: 13px;
}

.info-calendar-day button {
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 4px 6px;
  background: #e9f1f5;
  color: var(--blue-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-calendar-day span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .info-calendar {
    padding: 10px;
  }

  .info-calendar-grid {
    gap: 4px;
  }

  .info-calendar-day {
    min-height: 58px;
    padding: 5px;
  }

  .info-calendar-day button {
    padding: 3px 4px;
    font-size: 11px;
  }
}


.owner-table th:last-child,
.owner-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: #fff;
  box-shadow: -8px 0 12px rgba(31, 42, 51, .06);
}

.owner-table th:last-child {
  background: #eef4f6;
}

.owner-table .table-actions {
  min-width: 190px;
}


.document-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 92px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef4f6;
  color: var(--blue-dark);
  text-decoration: none;
}

.document-preview img,
.document-preview object {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

.document-preview.is-file {
  gap: 2px;
}

.document-preview.is-file strong {
  font-size: 20px;
  line-height: 1;
}

.document-preview.is-file span,
.document-preview.is-pdf span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .document-preview {
    width: 100%;
    max-width: 160px;
  }
}


.admin-documents-layout {
  grid-template-columns: 1fr;
  gap: 14px;
}

.admin-documents-layout .upload-panel[hidden] {
  display: none;
}

.admin-documents-layout .upload-panel {
  width: min(760px, 100%);
  box-shadow: none;
}

.document-section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.document-browser-shell {
  display: grid;
  gap: 12px;
}

.document-browser {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
}

.document-searchbar {
  margin-bottom: 0;
}

.document-category-section {
  gap: 8px;
}

.document-category-heading {
  padding-bottom: 6px;
}

.document-category-heading h3 {
  font-size: 20px;
}

.document-category-list {
  gap: 8px;
}

.document-card {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
  align-items: start;
}

.document-title-row h3 {
  font-size: 18px;
}

.document-body p {
  margin: 4px 0 8px;
}

.document-card .damage-meta {
  margin-bottom: 6px;
}

.document-card .card-actions {
  gap: 6px;
}

.document-card .secondary-action,
.document-card .danger-action {
  min-height: 34px;
  padding: 0 10px;
}

@media (max-width: 980px) {
  .document-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .document-browser {
    grid-template-columns: 1fr;
  }
}


.admin-info-layout {
  grid-template-columns: 1fr;
  gap: 14px;
}

.admin-info-layout .info-form-panel[hidden] {
  display: none;
}

.admin-info-layout .info-form-panel {
  width: min(820px, 100%);
  box-shadow: none;
}

.info-section-heading {
  align-items: start;
  margin-bottom: 14px;
}

.admin-info-layout .info-list-panel {
  width: 100%;
}

.admin-info-layout .info-calendar {
  margin-bottom: 14px;
}

.admin-info-layout .info-card {
  padding: 14px 16px;
}

.admin-info-layout .info-photo-grid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 130px));
}

.admin-info-layout .info-photo-grid a {
  border-radius: 6px;
}

@media (max-width: 980px) {
  .info-section-heading {
    align-items: stretch;
    flex-direction: column;
  }
}


.module-settings {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.module-settings .primary-action {
  margin-top: 4px;
}


.info-calendar-day .calendar-birthday {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  padding: 4px 6px;
  background: #fff1d8;
  color: #72510d;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-calendar-day .calendar-birthday::before {
  content: 'Geb. ';
  font-weight: 700;
}


.report-searchbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.report-searchbar label {
  gap: 6px;
}

.report-searchbar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.report-searchbar input {
  min-height: 44px;
  background: #fff;
}

.report-search-count {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: #eef2f4;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.report-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.report-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  font-size: 14px;
}

.report-table th,
.report-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.report-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef4f6;
  color: var(--blue-dark);
  font-weight: 900;
}

.report-table tbody tr:hover {
  background: #f8fafb;
}

.report-table-row.is-highlighted {
  background: #edf7fa;
  box-shadow: inset 4px 0 0 var(--blue);
}

.report-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.report-description-cell {
  min-width: 260px;
  max-width: 520px;
  white-space: normal;
}

.report-description-cell small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-weight: 700;
}

.status-badge {
  white-space: nowrap;
}

.status-badge.urgent {
  background: rgba(196, 71, 52, .12);
  color: var(--urgent);
}

.status-badge.review {
  background: rgba(212, 154, 37, .14);
  color: #876018;
}

.status-badge.done {
  background: rgba(46, 122, 84, .12);
  color: var(--done);
}

.report-table .table-actions {
  min-width: 230px;
}

@media (max-width: 760px) {
  .report-searchbar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .report-search-count {
    min-height: 34px;
    justify-content: start;
    place-items: center start;
  }

  .report-table {
    min-width: 980px;
    font-size: 13px;
  }

  .report-table th,
  .report-table td {
    padding: 9px 10px;
  }
}


body.reports-page .damage-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body.reports-page .report-searchbar,
body.reports-page .report-table-wrap {
  grid-column: 1 / -1;
}


.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 18px;
  padding: 18px;
}

.profile-panel {
  padding: clamp(18px, 3vw, 28px);
}

.profile-panel:first-child {
  grid-row: span 2;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-item {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafb;
}

.profile-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-item strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.3;
}

@media (max-width: 980px) {
  .profile-layout,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-panel:first-child {
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  body.profile-page .top-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  body.profile-page .top-actions #current-user {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body.profile-page .top-actions .small-action,
  body.profile-page .top-actions button.small-action {
    width: 100%;
  }

  .profile-layout {
    gap: 10px;
    padding: 10px;
  }

  .profile-panel {
    padding: 16px;
    border-radius: 8px;
  }

  .profile-item {
    min-height: 0;
  }
}

.document-comments { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.document-comments-heading,.document-comment-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.document-comments-heading>span { padding:2px 7px; border-radius:999px; background:var(--soft); color:var(--muted); font-size:12px; font-weight:800; }
.document-comment-list { display:grid; gap:8px; margin:10px 0; }
.document-comment { padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:#f7fafb; }
.document-comment-head time { color:var(--muted); font-size:12px; }
.document-comment p,.document-comments-empty { margin:6px 0 0; line-height:1.45; }
.document-comments-empty { color:var(--muted); font-size:14px; }
.document-comment-actions { display:flex; gap:10px; margin-top:7px; }
.document-comment-actions button { padding:0; border:0; background:transparent; color:var(--accent); cursor:pointer; font:inherit; font-size:13px; font-weight:800; }
.document-comment-actions button.is-danger { color:var(--urgent); }
.document-comment-form label { display:block; margin-bottom:6px; color:var(--muted); font-size:13px; font-weight:800; }
.document-comment-form>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.document-comment-form textarea { min-height:48px; resize:vertical; }
@media(max-width:640px){.document-comment-form>div{grid-template-columns:1fr}.document-comment-head{align-items:flex-start;flex-direction:column;gap:2px}}

.document-scope-control { display:inline-flex; align-items:center; gap:6px; }
.document-scope-control select { width:auto; min-width:240px; min-height:38px; padding:7px 32px 7px 10px; }
.document-scope-badge { background:#e5f0f4; color:#17465c; }
@media(max-width:640px){.document-scope-control{display:grid;width:100%}.document-scope-control select{width:100%;min-width:0}}

.document-category-control { display:inline-flex; align-items:center; gap:6px; }
.document-category-control input { width:220px; min-height:38px; padding:7px 10px; }
@media(max-width:640px){.document-category-control{display:grid;width:100%}.document-category-control input{width:100%}}

.distributor-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px}.distribution-lists{display:grid;align-content:start;gap:6px}.distribution-lists button{display:flex;justify-content:space-between;gap:10px;padding:12px;border:1px solid var(--line);border-radius:6px;background:#fff;text-align:left}.distribution-lists button.is-active{border-color:var(--accent);background:#eef6f8}.distribution-lists span{color:var(--muted);font-size:12px}.distribution-form{display:grid;gap:12px}.distribution-tools{display:flex;flex-wrap:wrap;gap:8px}.distribution-tools input{flex:1;min-width:220px}.distribution-tools button{padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:#fff}.distribution-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:55vh;overflow:auto}.distribution-member{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid var(--line);border-radius:6px;background:#f8fafb}.distribution-member input{width:auto;margin-top:3px}.distribution-member span{display:grid}.distribution-member small{color:var(--muted)}@media(max-width:760px){.distributor-layout{grid-template-columns:1fr}.distribution-members{grid-template-columns:1fr}.distribution-lists{max-height:240px;overflow:auto}}

.document-notify-control{display:inline-flex;align-items:stretch;gap:6px}.document-notify-control select{min-width:230px;min-height:74px;padding:5px}.document-card.is-requested{outline:4px solid rgba(37,101,132,.28);border-color:var(--accent)}@media(max-width:640px){.document-notify-control{display:grid;width:100%}.document-notify-control select{width:100%}}

.auth-link{display:block;margin-top:12px;color:var(--accent);font-weight:800;text-align:center;text-decoration:none}.auth-link:hover{text-decoration:underline}

/* User help */
.help-layout{width:min(1080px,100%);margin:0 auto;padding:20px;display:grid;gap:16px}
.help-intro{padding:24px 28px;border-bottom:1px solid var(--line);background:#fff}
.help-intro h2{margin:4px 0 8px;font-size:clamp(25px,3vw,38px)}
.help-intro>p{max-width:760px;margin:0;color:var(--muted);line-height:1.55}
.help-index{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.help-index a{padding:8px 11px;border:1px solid var(--line);border-radius:6px;background:#f7fafb;color:var(--accent);font-weight:800;text-decoration:none}
.help-section{padding:26px 28px;border:1px solid var(--line);border-radius:8px;background:#fff}
.help-heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.help-heading>span{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:6px;background:var(--accent);color:#fff;font-weight:900}
.help-heading .eyebrow,.help-heading h2{margin:0}
.help-heading h2{font-size:clamp(22px,2.3vw,30px)}
.help-steps{counter-reset:help-step;display:grid;gap:0;margin:0 0 20px;padding:0;list-style:none}
.help-steps li{counter-increment:help-step;display:grid;grid-template-columns:minmax(180px,.45fr) minmax(0,1fr);gap:18px;padding:14px 0;border-top:1px solid var(--line);line-height:1.5}
.help-steps li:first-child{border-top:0}
.help-steps strong{display:flex;gap:9px;color:var(--ink)}
.help-steps strong:before{content:counter(help-step);display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:#e6f0f4;color:var(--accent);font-size:12px}
.help-steps span{color:var(--muted)}
.help-action{display:inline-flex;width:auto;min-height:42px;padding:10px 15px;text-decoration:none}
.help-contact{padding:18px 28px;border-left:4px solid var(--accent);background:#edf5f7}
.help-contact h2,.help-contact p{margin:0}.help-contact p{margin-top:5px;color:var(--muted)}
@media(max-width:640px){
 .help-layout{padding:10px;gap:10px}
 .help-intro,.help-section{padding:18px 16px}
 .help-index{display:grid;grid-template-columns:1fr}
 .help-index a{min-height:42px}
 .help-heading{gap:10px;margin-bottom:10px}
 .help-heading>span{flex-basis:36px;height:36px}
 .help-heading h2{font-size:21px}
 .help-steps li{grid-template-columns:1fr;gap:5px;padding:12px 0}
 .help-action{display:flex;width:100%;justify-content:center}
 .help-contact{padding:16px}
}
.activity-layout{padding:18px}.activity-panel{padding:24px}.activity-filters{display:grid;grid-template-columns:minmax(260px,1fr) 220px 160px;gap:12px;margin:18px 0}.activity-filters label{display:grid;gap:6px;color:var(--muted);font-size:13px;font-weight:800}.activity-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:7px}.activity-table{width:100%;border-collapse:collapse;background:#fff}.activity-table th,.activity-table td{padding:12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.activity-table th{position:sticky;top:0;background:#eaf2f5;color:var(--ink);font-size:13px}.activity-badge{display:inline-block;padding:4px 7px;border-radius:999px;background:#e7f0f3;color:var(--accent);font-size:12px;font-weight:800}@media(max-width:760px){.activity-layout{padding:10px}.activity-panel{padding:16px}.activity-filters{grid-template-columns:1fr}.activity-table thead{display:none}.activity-table,.activity-table tbody,.activity-table tr,.activity-table td{display:block}.activity-table tr{padding:10px;border-bottom:1px solid var(--line)}.activity-table td{display:grid;grid-template-columns:105px 1fr;gap:8px;padding:5px;border:0}.activity-table td:before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:800}}

.batch-upload-list{display:grid;gap:8px;margin:10px 0}.batch-upload-item{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(260px,1fr);align-items:end;gap:14px;padding:12px;border:1px solid var(--line);border-radius:7px;background:#f7fafb}.batch-upload-item>div{display:grid;gap:3px;min-width:0}.batch-upload-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.batch-upload-item span{color:var(--muted);font-size:12px}.batch-upload-item label{margin:0}.batch-upload-progress{display:grid;gap:8px;margin:12px 0;padding:12px;border-radius:7px;background:#eaf3f6}.batch-upload-progress>div{display:flex;justify-content:space-between;gap:12px}.batch-upload-progress progress{width:100%;height:12px}@media(max-width:640px){.batch-upload-item{grid-template-columns:1fr;gap:8px}.batch-upload-item strong{white-space:normal}}

.mail-log-layout{padding:18px}.mail-log-panel{padding:24px}.mail-setup{display:grid;grid-template-columns:minmax(280px,1fr) minmax(260px,.7fr);gap:18px;margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:7px;background:#f4f8f9}.mail-setup h3,.mail-setup p{margin-top:0}.token-result{grid-column:1/-1;display:grid;gap:7px;padding:12px;background:#e6f2ea;border-left:4px solid #2f8a62}.token-result code{padding:10px;background:#fff;overflow-wrap:anywhere}.mail-setup #token-list{grid-column:1/-1}.mail-token{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}.mail-token>div{display:grid}.mail-token span{color:var(--muted);font-size:12px}.mail-search{display:grid;grid-template-columns:minmax(280px,1fr) auto;align-items:end;gap:14px;margin:16px 0}.mail-search label{display:grid;gap:6px;color:var(--muted);font-size:13px;font-weight:800}.mail-search span{padding:12px;background:var(--soft);font-weight:800}.mail-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:7px}.mail-table{width:100%;border-collapse:collapse}.mail-table th,.mail-table td{padding:11px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.mail-table th{background:#eaf2f5;font-size:13px}.mail-subject{padding:0;border:0;background:transparent;color:var(--accent);font:inherit;font-weight:800;text-align:left;cursor:pointer}.mail-dialog{width:min(900px,calc(100% - 24px));max-height:90vh;padding:28px;border:0;border-radius:8px;box-shadow:0 20px 60px #0005}.mail-dialog::backdrop{background:#102e3cb8}.mail-dialog-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:28px;cursor:pointer}.mail-meta{display:grid;grid-template-columns:100px 1fr;gap:5px 12px;padding:14px;background:#f3f7f8}.mail-meta dt{font-weight:800}.mail-meta dd{margin:0;overflow-wrap:anywhere}.mail-body{margin:16px 0;padding:18px;border:1px solid var(--line);background:#fff;line-height:1.55;overflow-wrap:anywhere}@media(max-width:760px){.mail-log-layout{padding:10px}.mail-log-panel{padding:15px}.mail-setup,.mail-search{grid-template-columns:1fr}.mail-table thead{display:none}.mail-table,.mail-table tbody,.mail-table tr,.mail-table td{display:block}.mail-table tr{padding:10px;border-bottom:1px solid var(--line)}.mail-table td{display:grid;grid-template-columns:95px 1fr;gap:8px;padding:5px;border:0}.mail-table td:before{content:attr(data-label);font-size:12px;font-weight:800;color:var(--muted)}.mail-meta{grid-template-columns:70px 1fr}}

.document-distribution-actions{display:flex;flex-wrap:wrap;gap:6px}@media(max-width:640px){.document-distribution-actions{display:grid;grid-template-columns:1fr}.document-distribution-actions button{width:100%}}

.document-select{position:absolute;z-index:2;top:9px;left:9px;display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line);border-radius:5px;background:#fff;font-size:12px;font-weight:800}.document-select input{width:auto;margin:0}.document-card{position:relative}.document-bulk-toolbar{display:grid;gap:12px;margin:12px 0;padding:14px;border:1px solid #b9cdd5;border-radius:7px;background:#edf5f7}.document-bulk-heading,.document-bulk-select-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}.document-bulk-select-actions{justify-content:flex-start}.document-bulk-fields{display:grid;grid-template-columns:minmax(180px,1fr) 180px 180px auto;align-items:end;gap:10px}.document-bulk-fields label{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:800}@media(max-width:900px){.document-bulk-fields{grid-template-columns:1fr 1fr}}@media(max-width:600px){.document-bulk-fields{grid-template-columns:1fr}.document-bulk-select-actions{display:grid;grid-template-columns:1fr 1fr}.document-select{position:static;margin:8px;width:max-content}}

.auth-property-name{margin:-4px 0 20px;color:var(--muted);font-size:14px;font-weight:700;line-height:1.45}.auth-heading+.auth-property-name{padding-bottom:14px;border-bottom:1px solid var(--line)}@media(max-width:520px){.auth-property-name{font-size:13px;margin-bottom:16px}}

.mail-attachments{margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:7px;background:#f5f8f9}.mail-attachments-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.mail-attachments-heading h3{margin:0}.mail-attachments-heading span{padding:3px 8px;border-radius:999px;background:#dfecef;font-weight:800}.mail-attachment{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}.mail-attachment>div{display:grid;min-width:0}.mail-attachment strong{overflow-wrap:anywhere}.mail-attachment span{color:var(--muted);font-size:12px}.mail-attachment b{color:var(--accent);font-size:13px;white-space:nowrap}@media(max-width:600px){.mail-attachment{align-items:flex-start;flex-direction:column;gap:5px}.mail-attachment b{white-space:normal}}

.mail-attachment-info{display:grid;min-width:0}.mail-attachment-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.mail-attachment-actions .secondary-action{white-space:nowrap}@media(max-width:600px){.mail-attachment-actions{width:100%}.mail-attachment-actions .secondary-action{flex:1;text-align:center}}

.document-ocr-badge.is-done{background:#e1f2e9;color:#236345}.document-ocr-badge.is-partial{background:#fff0cd;color:#7a5700}.document-ocr-badge.is-failed{background:#f8dfdc;color:#8b3027}.document-ocr-badge.is-pending,.document-ocr-badge.is-unsupported{background:#edf1f2;color:#52666c}

.document-search-snippets{margin:10px 0;padding:10px 12px;border-left:3px solid #2b6885;background:#f1f7f9}.document-search-snippets>strong{display:block;margin-bottom:5px;font-size:12px;color:#365762}.document-search-snippets p{margin:5px 0;color:#263d47;line-height:1.45}.document-search-snippets mark{padding:1px 3px;background:#ffe37a;color:#162a33;font-weight:800;border-radius:2px}