* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: #f4f6f9; color: #1a2230;
}
.muted { color: #6b7785; font-size: 0.9rem; }
.error { background: #fde8e8; color: #9b1c1c; padding: .6rem .8rem; border-radius: 6px; margin: .5rem 0; }

/* ---------- Login ---------- */
.login-body {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(135deg,#5b3a8c 0%, #2c2150 100%);
}
.login-card {
  background: #fff; padding: 2rem 2.2rem; border-radius: 14px;
  width: min(420px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.login-card h1 { margin: 0 0 .2rem; font-size: 1.4rem; }
.login-card label { display: block; margin: 1rem 0 .25rem; font-size: .9rem; font-weight: 600; }
.login-card input {
  width: 100%; padding: .7rem .85rem; border: 1px solid #d3d8e0;
  border-radius: 8px; font-size: 1rem;
}
.login-card button {
  width: 100%; margin-top: 1.2rem; padding: .8rem; border: 0;
  background: #5b3a8c; color: #fff; font-size: 1rem; font-weight: 600;
  border-radius: 8px; cursor: pointer;
}
.login-card button:hover { background: #4a2f72; }
.login-card .hint { text-align: center; margin: 1rem 0 0; color: #8a93a3; font-size: .8rem; }

/* ---------- App ---------- */
.topbar {
  background: #5b3a8c; color: #fff; padding: .8rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar .brand { font-weight: 700; }
.topbar .actions { display: flex; gap: .6rem; align-items: center; }
.topbar .icon-btn {
  background: rgba(255,255,255,.15); color: #fff; border: 0;
  width: 36px; height: 36px; padding: 0;
  border-radius: 6px; cursor: pointer; text-decoration: none;
  font-size: 1rem; display: inline-flex; align-items: center; justify-content: center;
}
.topbar .icon-btn:hover { background: rgba(255,255,255,.28); }

.topbar button, .topbar .logout {
  background: rgba(255,255,255,.15); color: #fff; border: 0;
  padding: .5rem .9rem; border-radius: 6px; text-decoration: none;
  font-size: .9rem; cursor: pointer;
}
.topbar button:hover, .topbar .logout:hover { background: rgba(255,255,255,.28); }

.container { max-width: 1100px; margin: 1.2rem auto; padding: 0 1rem; }

.picker {
  background: #fff; padding: 1rem; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); margin-bottom: 1rem;
}
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .6rem; }
@media (max-width: 720px) { .picker-grid { grid-template-columns: 1fr; } }
.picker-actions { display: flex; justify-content: flex-end; margin: .2rem 0 .6rem; }
.picker-actions #resetBtn {
  padding: .5rem 1rem; border: 1px solid #5b3a8c; background: #fff; color: #5b3a8c;
  border-radius: 8px; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.picker-actions #resetBtn:hover { background: #5b3a8c; color: #fff; }
.picker label { display: block; font-weight: 600; margin-bottom: .5rem; }

.branch-panel {
  margin-top: .6rem; padding: .8rem; border: 1px solid #e5e8ee; border-radius: 8px;
  background: #faf7ff;
}
.branch-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.branch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .4rem; }
.branch-item {
  display: block; padding: .5rem .7rem; border: 1px solid #d3d8e0; border-radius: 6px;
  background: #fff; text-decoration: none; color: #1a2230; font-size: .9rem;
  transition: border-color .1s, transform .1s;
}
.branch-item:hover { border-color: #5b3a8c; transform: translateY(-1px); }
.picker input, .picker select {
  width: 100%; padding: .8rem; border: 1px solid #d3d8e0;
  border-radius: 8px; font-size: 1rem; margin-bottom: .6rem;
  background: #fff;
}

.detail {
  background: #fff; padding: 1.2rem; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.detail.empty { text-align: center; padding: 2rem; }
.detail h2 { margin: 0 0 1rem; }
.detail .ref { background: #ede4fa; color: #5b3a8c; padding: .15rem .5rem; border-radius: 4px; font-size: .9rem; margin-left: .4rem; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.card { border: 1px solid #e5e8ee; border-radius: 8px; padding: .9rem 1rem; }
.card.wide { grid-column: 1 / -1; }
.card h3 { margin: 0 0 .6rem; font-size: 1rem; color: #5b3a8c; }
.row { display: grid; grid-template-columns: 140px 1fr; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed #eef0f4; }
.row:last-child { border-bottom: 0; }
.lbl { color: #6b7785; font-size: .85rem; }
.val { font-size: .95rem; word-break: break-word; }

.child { padding: .55rem 0; border-bottom: 1px dashed #eef0f4; }
.child:last-child { border-bottom: 0; }

.notes { white-space: pre-wrap; font-size: .9rem; }

@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .lbl { font-weight: 600; color: #1a2230; }
}

/* ---------- Visits & photos ---------- */
button.primary {
  background: #5b3a8c; color: #fff; border: 0;
  padding: .55rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600;
}
button.primary:hover { background: #4a2f72; }
button.primary:disabled { opacity: .6; cursor: wait; }
button.primary.big {
  padding: .85rem 1.6rem; font-size: 1rem; border-radius: 8px;
  background: linear-gradient(135deg,#5b3a8c,#7c3aed);
  box-shadow: 0 2px 6px rgba(91,58,140,.25);
}
button.primary.big:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(91,58,140,.35); }
.submit-card { background: linear-gradient(135deg,#faf7ff,#f0eaff) !important; border: 1px solid #d4c5f0; }
button.link {
  background: transparent; border: 0; color: #c0392b; cursor: pointer; font-size: .85rem;
}
button.link:hover { text-decoration: underline; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-grid label { display: flex; flex-direction: column; font-size: .85rem; font-weight: 600; gap: .3rem; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea {
  padding: .55rem .7rem; border: 1px solid #d3d8e0; border-radius: 6px;
  font-family: inherit; font-size: .95rem; background: #fff;
}
.form-grid textarea { resize: vertical; }

.visit-block {
  border: 1px solid #e5e8ee; border-radius: 8px;
  padding: .8rem 1rem; margin-bottom: .8rem; background: #fcfcfd;
}
.visit-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.visit-notes { margin: .5rem 0; font-size: .92rem; white-space: pre-wrap; }

.thumbs { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .55rem; }
.thumb {
  display: block; position: relative;
  width: 110px; height: 110px; border-radius: 6px; overflow: hidden;
  border: 1px solid #d3d8e0; background: #f0f0f3;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.55); color: #fff; font-size: .7rem;
  padding: .15rem .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .thumb { width: 90px; height: 90px; }
}

/* ---------- Attachments table ---------- */
.docs-table { width: 100%; border-collapse: collapse; }
.docs-table th, .docs-table td {
  text-align: left; padding: .55rem .6rem; border-bottom: 1px solid #eef0f4;
  font-size: .9rem; vertical-align: top;
}
.docs-table th { font-size: .78rem; text-transform: uppercase; color: #6b7785; letter-spacing: .04em; }
.docs-table input[type="date"], .docs-table .doc-type-input {
  padding: .35rem .5rem; border: 1px solid #d3d8e0; border-radius: 5px; font-size: .9rem; width: 100%;
}
.doc-file { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: .25rem; }
.doc-file a { color: #5b3a8c; text-decoration: none; font-weight: 500; }
.doc-file a:hover { text-decoration: underline; }
.doc-upload { margin-top: .35rem; }
.doc-upload input[type="file"] { font-size: .82rem; }

.extract-box {
  margin-top: .5rem; padding: .7rem .9rem;
  background: linear-gradient(135deg,#faf7ff,#f0eaff);
  border: 1px solid #d4c5f0; border-radius: 6px; font-size: .85rem;
}
.extract-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.extract-tbl td { padding: .25rem .4rem; border-bottom: 1px dashed #e4d8f5; }
.extract-tbl td:first-child { color: #6b7785; width: 40%; text-transform: capitalize; }
.extract-raw { white-space: pre-wrap; font-size: .8rem; color: #1a2230; max-height: 240px; overflow: auto; }

/* Action / role / status pills */
.action-tag {
  display: inline-block; padding: .15rem .55rem; border-radius: 4px;
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  background: #ede4fa; color: #5b3a8c;
}
.action-tag.action-login, .action-tag.action-logout { background: #e6f4ea; color: #16a34a; }
.action-tag.action-edit_customer, .action-tag.action-save_notes { background: #fff4e6; color: #b15a00; }
.action-tag.action-upload_photo, .action-tag.action-upload_document { background: #e0f2fe; color: #0369a1; }
.action-tag.action-submit_for_approval { background: #fce7f3; color: #be185d; }
.action-tag.action-ocr_extract, .action-tag.action-ocr_failed { background: #f0eaff; color: #5b3a8c; }
.action-tag.action-create_user, .action-tag.action-update_user { background: #fde2e2; color: #b91c1c; }

.role-tag {
  display: inline-block; padding: .15rem .55rem; border-radius: 4px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: #ede4fa; color: #5b3a8c;
}
.role-tag.role-admin { background: #fde2e2; color: #b91c1c; }
.role-tag.role-view_only { background: #e0f2fe; color: #0369a1; }
.role-tag.role-data_entry { background: #fff4e6; color: #b15a00; }
.role-tag.role-sales { background: #ede4fa; color: #5b3a8c; }

/* ---------- Profile photo header ---------- */
.detail-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.detail-avatar {
  width: 84px; height: 84px; border-radius: 12px;
  background: linear-gradient(135deg,#ede4fa,#faf7ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #b4a7d4; flex-shrink: 0;
  border: 1px solid #d4c5f0; overflow: hidden;
}
.detail-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Photo thumbs with set-primary action ---------- */
.thumb-wrap { position: relative; }
.thumb-action {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #ffd700; font-size: 14px;
  cursor: pointer; opacity: 0; transition: opacity .15s;
}
.thumb-wrap:hover .thumb-action { opacity: 1; }
.thumb-action:hover { background: rgba(0,0,0,.8); }

/* ---------- Toast notifications ---------- */
#toast {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 9999;
  padding: .8rem 1.2rem; border-radius: 8px;
  background: #1a2230; color: #fff; font-size: .9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
  pointer-events: none; max-width: 360px;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.toast-ok { background: #16a34a; }
#toast.toast-err { background: #c0392b; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: .3rem; margin-bottom: .8rem; border-bottom: 2px solid #eef0f4; }
.tab {
  background: transparent; border: 0; padding: .55rem 1rem;
  font-weight: 600; color: #6b7785; cursor: pointer; font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tab:hover { color: #1a2230; }
.tab.active { color: #5b3a8c; border-bottom-color: #5b3a8c; }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; z-index: 9000;
  padding: 1rem;
}
.modal-card {
  background: #fff; padding: 1.5rem 1.8rem; border-radius: 12px;
  width: min(420px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.modal-card label {
  display: block; font-size: .85rem; font-weight: 600;
  margin-bottom: .25rem; color: #1a2230;
}
.modal-card label + label { margin-top: .8rem; }
.modal-card input {
  width: 100%; padding: .6rem .75rem; margin-top: .25rem;
  border: 1px solid #d3d8e0; border-radius: 6px; font-size: .95rem;
}

/* ---------- Top bar user badge ---------- */
.me-badge {
  background: rgba(255,255,255,.18); color: #fff;
  padding: .35rem .8rem; border-radius: 6px; font-size: .85rem;
  font-weight: 500;
}

/* ---------- Activity timeline ---------- */
.tl-list { list-style: none; padding: 0; margin: 0; }
.tl-list li {
  display: grid; grid-template-columns: 32px 1fr; gap: .6rem;
  padding: .55rem .25rem; border-left: 2px solid #eef0f4; padding-left: .8rem;
  margin-left: .5rem; position: relative;
}
.tl-list li.tl-visit { border-left-color: #5b3a8c; }
.tl-list li.tl-photo { border-left-color: #f59e0b; }
.tl-list li.tl-document { border-left-color: #06b6d4; }
.tl-list li.tl-edit { border-left-color: #16a34a; }
.tl-list li.tl-submission { border-left-color: #ec4899; }
.tl-list li.tl-geo { border-left-color: #3b82f6; }
.tl-icon { font-size: 1.1rem; line-height: 1.5; }
.tl-meta { display: flex; gap: .6rem; align-items: center; font-size: .78rem; }
.tl-kind { font-weight: 700; text-transform: uppercase; color: #5b3a8c; letter-spacing: .04em; }
.tl-by { color: #6b7785; }
.tl-ts { color: #94a3b8; margin-left: auto; font-family: monospace; }
.tl-detail { font-size: .9rem; color: #1a2230; margin-top: .15rem; word-break: break-word; }

/* ---------- Filter buttons (submissions page) ---------- */
.filter-btn {
  background: #fff; border: 1px solid #d3d8e0; padding: .45rem 1rem;
  border-radius: 6px; cursor: pointer; font-size: .85rem; font-weight: 500;
}
.filter-btn:hover { border-color: #5b3a8c; }
.filter-btn.active { background: #5b3a8c; color: #fff; border-color: #5b3a8c; }

/* ---------- Settings page ---------- */
.setting-row {
  display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem;
  padding: .9rem 0; border-bottom: 1px solid #eef0f4; align-items: center;
}
.setting-row:last-of-type { border-bottom: 0; }
.setting-meta label { font-size: .95rem; }
.setting-meta code {
  background: #f4f6f9; padding: .1rem .4rem; border-radius: 3px;
  font-size: .78rem; color: #5b3a8c;
}
.setting-input { display: flex; gap: .5rem; align-items: center; }
.setting-input input {
  flex: 1; padding: .55rem .75rem; border: 1px solid #d3d8e0;
  border-radius: 6px; font-size: .9rem; font-family: inherit;
}
.setting-input input:focus { outline: none; border-color: #5b3a8c; box-shadow: 0 0 0 2px rgba(91,58,140,.15); }
.setting-override {
  display: inline-block; background: #fff4e6; color: #b15a00;
  font-size: .65rem; font-weight: 700; padding: .1rem .45rem;
  border-radius: 3px; margin-left: .35rem; text-transform: uppercase; letter-spacing: .04em;
}
@media (max-width: 720px) {
  .setting-row { grid-template-columns: 1fr; }
}

/* ---------- Detail header actions + check-in ---------- */
.detail-actions { display: flex; gap: .5rem; align-items: center; }
.detail-actions .btn-secondary {
  background: #fff; color: #5b3a8c; border: 1px solid #d4c5f0;
  padding: .5rem .9rem; border-radius: 6px; text-decoration: none;
  font-size: .85rem; font-weight: 600;
}
.detail-actions .btn-secondary:hover { background: #faf7ff; }
.checkin-live {
  background: linear-gradient(135deg,#16a34a,#15803d) !important;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
  50% { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
}
body.view-only .detail-actions button,
body.view-only #checkinCard { display: none !important; }

/* ---------- Notification bell ---------- */
.bell-wrap { position: relative; }
.bell-count {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff; border-radius: 10px;
  font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px; pointer-events: none;
}
.bell-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  width: 340px; max-height: 480px; overflow-y: auto;
  border: 1px solid #e5e8ee;
}
.bell-head {
  padding: .8rem 1rem; font-weight: 700; color: #1a2230;
  border-bottom: 1px solid #eef0f4; background: #faf7ff;
}
.bell-empty { padding: 1.5rem; text-align: center; color: #6b7785; font-size: .85rem; }
.bell-section {
  padding: .55rem 1rem; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #6b7785;
  background: #f8f9fb; border-top: 1px solid #eef0f4;
}
.bell-row {
  display: block; padding: .6rem 1rem; text-decoration: none; color: #1a2230;
  font-size: .85rem; border-bottom: 1px solid #f4f6f9;
}
.bell-row:hover { background: #faf7ff; }
.bell-row.bell-sub { font-size: .8rem; padding-left: 1.4rem; }
.bell-row small { color: #6b7785; font-size: .75rem; margin-left: .4rem; }
.bell-pill {
  display: inline-block; min-width: 22px; padding: .12rem .45rem;
  border-radius: 10px; font-weight: 700; font-size: .72rem;
  text-align: center; margin-right: .4rem;
}
.bell-pill-warn { background: #fef3c7; color: #92400e; }
.bell-foot { padding: .55rem 1rem; border-top: 1px solid #eef0f4; text-align: right; }
.bell-foot button {
  background: transparent; border: 0; color: #5b3a8c;
  font-size: .8rem; font-weight: 600; cursor: pointer;
}

/* ---------- Customer health score ---------- */
.health-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: .45rem; padding: .25rem .55rem .25rem .25rem;
  border-radius: 999px; background: #f4f6f9; cursor: pointer;
  font-size: .82rem; font-weight: 600; color: #1a2230;
  border: 1px solid #e5e8ee; user-select: none;
}
.health-badge:hover { border-color: #5b3a8c; }
.health-circle {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: .82rem;
}
.health-circle.health-good { background: linear-gradient(135deg,#16a34a,#15803d); }
.health-circle.health-fair { background: linear-gradient(135deg,#f59e0b,#d97706); }
.health-circle.health-bad  { background: linear-gradient(135deg,#dc2626,#991b1b); }

.health-details {
  margin: .8rem 0; padding: .8rem 1rem; background: #faf7ff;
  border: 1px dashed #d4c5f0; border-radius: 8px;
}
.health-row {
  display: grid; grid-template-columns: 24px 1fr 60px 2fr; gap: .5rem;
  padding: .3rem 0; font-size: .85rem; align-items: center;
  border-bottom: 1px dashed #ede4fa;
}
.health-row:last-child { border-bottom: 0; }
.health-row.ok .health-tick { color: #16a34a; font-weight: 700; }
.health-row.fail .health-tick { color: #dc2626; font-weight: 700; }
.health-row.fail .health-label { color: #6b7785; }
.health-pts { font-family: monospace; color: #6b7785; font-size: .8rem; }
.health-fix { color: #b15a00; font-size: .78rem; font-style: italic; }

/* ---------- Voice notes ---------- */
.voice-row {
  display: flex; align-items: center; gap: .8rem; padding: .55rem 0;
  border-bottom: 1px solid #eef0f4;
}
.voice-row:last-child { border-bottom: 0; }
.voice-row audio { flex: 1; max-width: 480px; }
#voiceRecBtn.recording {
  background: linear-gradient(135deg,#dc2626,#991b1b) !important;
  animation: pulse 1.5s infinite;
}
body.view-only #voiceCard #voiceRecBtn { display: none !important; }

@media (max-width: 720px) {
  .health-row { grid-template-columns: 24px 1fr 60px; }
  .health-fix { grid-column: 2 / -1; padding-left: 28px; }
}

/* View-only users: hide all write controls */
body.view-only #editToggleBtn,
body.view-only #generalEdit,
body.view-only #notesSaveBtn,
body.view-only #notesField,
body.view-only #geoCard .actions,
body.view-only #geoCard button,
body.view-only #attachments button,
body.view-only #attachments input[type="file"],
body.view-only #visitLog button,
body.view-only #newVisitForm,
body.view-only .submit-card,
body.view-only #refreshBtn { display: none !important; }
body.view-only #notesField { display: block !important; pointer-events: none; background: #f6f7fa; color: #6b7785; }
body.view-only::before {
  content: "Read-only access — edits, uploads and submissions are disabled for your role.";
  display: block; background: #fff4e6; color: #b15a00; padding: .55rem 1rem;
  font-size: .85rem; font-weight: 600; text-align: center; border-bottom: 1px solid #fde2b2;
}

.pill {
  display: inline-block; padding: .12rem .55rem; border-radius: 10px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.pill-bad { background: #fde2e2; color: #b91c1c; }
.pill-warn { background: #fef3c7; color: #92400e; }
.pill-cool { background: #e0f2fe; color: #0369a1; }

#notesField {
  width: 100%; padding: .7rem .85rem; border: 1px solid #d3d8e0;
  border-radius: 6px; font-family: inherit; font-size: .95rem;
  background: #fff; resize: vertical; min-height: 90px;
}

.edit-badge {
  display: inline-block; background: #fff4e6; color: #b15a00;
  font-size: .65rem; font-weight: 600; padding: .05rem .35rem;
  border-radius: 3px; margin-left: .35rem; text-transform: uppercase;
  letter-spacing: .04em; vertical-align: middle;
}

/* ---------- Top navigation ---------- */
.topbar { gap: 1rem; }
.topnav { display: flex; gap: .3rem; flex: 1; margin-left: 1.2rem; }
.topnav a {
  color: rgba(255,255,255,.75); text-decoration: none; padding: .45rem .85rem;
  border-radius: 6px; font-size: .9rem; font-weight: 500;
}
.topnav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.topnav a.active { background: rgba(255,255,255,.18); color: #fff; }

/* ---------- Dashboard ---------- */
.dash-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem; margin-bottom: 1rem;
}
.kpi {
  background: #fff; padding: 1rem 1.1rem; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); border-left: 3px solid #5b3a8c;
}
.kpi-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6b7785; }
.kpi-num { font-size: 2rem; font-weight: 700; color: #1a2230; line-height: 1.1; margin: .25rem 0; }
.kpi-sub { font-size: .8rem; color: #6b7785; }

.dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.dash-grid .card { background: #fff; padding: 1rem 1.1rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.dash-grid .card.wide { grid-column: 1 / -1; }
.dash-grid .card h3 { margin: 0 0 .7rem; color: #5b3a8c; font-size: .98rem; }

.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table td { padding: .35rem .5rem; border-bottom: 1px solid #eef0f4; }
.data-table td.num { text-align: right; font-family: 'JetBrains Mono', 'Courier New', monospace; font-weight: 600; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table a { color: #5b3a8c; text-decoration: none; }
.data-table a:hover { text-decoration: underline; }

.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-list li {
  display: grid; grid-template-columns: 130px 24px 60px 100px 1fr 2fr;
  gap: .5rem; padding: .35rem .2rem; border-bottom: 1px solid #eef0f4; font-size: .85rem; align-items: center;
}
.activity-list li:last-child { border-bottom: 0; }
.act-time { color: #6b7785; font-size: .78rem; font-family: monospace; }
.act-icon { font-size: 1rem; text-align: center; }
.act-kind { font-weight: 600; text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; color: #6b7785; }
.act-by { color: #6b7785; font-size: .8rem; }
.act-target a { color: #5b3a8c; text-decoration: none; }
.act-target a:hover { text-decoration: underline; }
.act-detail { color: #1a2230; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-list li.act-visit { border-left: 2px solid #5b3a8c; padding-left: .5rem; }
.activity-list li.act-photo { border-left: 2px solid #f59e0b; padding-left: .5rem; }
.activity-list li.act-document { border-left: 2px solid #06b6d4; padding-left: .5rem; }
.activity-list li.act-edit { border-left: 2px solid #16a34a; padding-left: .5rem; }

@media (max-width: 720px) {
  .dash-grid { grid-template-columns: 1fr; }
  .activity-list li { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---------- Geolocation ---------- */
.geo-row { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
.geo-coords { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: .95rem; }
.geo-coords strong { color: #5b3a8c; }
.geo-meta { font-size: .82rem; }
.geo-actions { display: flex; gap: .6rem; align-items: center; }
.primary-link { color: #5b3a8c; font-weight: 600; text-decoration: none; }
.primary-link:hover { text-decoration: underline; }
.geo-map {
  width: 100%; height: 240px; border: 0; border-radius: 8px;
  margin-top: .7rem; background: #f0f0f3;
}
@media (max-width: 720px) {
  .geo-row { grid-template-columns: 1fr; gap: .4rem; }
  .geo-map { height: 180px; }
}

/* =============================================================
   MOBILE & TABLET RESPONSIVE PASS
   Breakpoints: ≤900px = tablet, ≤640px = phone
   ============================================================= */

/* ---- Top bar: wrap + scrollable nav, brand on top on mobile ---- */
.topbar {
  flex-wrap: wrap;
  gap: .5rem;
  padding: .6rem .8rem;
  position: sticky; top: 0; z-index: 50;
}
.topnav {
  flex: 1 1 100%;
  order: 3;
  margin-left: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .15rem;
  scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a { white-space: nowrap; flex-shrink: 0; }

@media (min-width: 901px) {
  .topnav { flex: 1; order: 0; overflow: visible; }
}

@media (max-width: 640px) {
  .topbar .brand { font-size: .92rem; }
  .topbar .actions { gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
  .topbar button, .topbar .logout { padding: .45rem .65rem; font-size: .82rem; }
  .topbar .icon-btn { width: 34px; height: 34px; }
  .me-badge { display: none; }   /* hide on phones to save space */
}

/* ---- Container ---- */
@media (max-width: 640px) {
  .container { padding: 0 .65rem; margin-top: .8rem; }
}

/* ---- Generic cards ---- */
@media (max-width: 640px) {
  .card { padding: .75rem .8rem; }
  .card h3 { font-size: .92rem; }
}

/* ---- Detail header: stack on small screens ---- */
@media (max-width: 720px) {
  .detail-head { flex-wrap: wrap; gap: .7rem; }
  .detail-avatar { width: 64px; height: 64px; font-size: 1.6rem; }
  .detail-actions { width: 100%; flex-wrap: wrap; }
  .detail-actions .btn-secondary,
  .detail-actions button {
    flex: 1 1 auto; text-align: center; min-height: 40px;
  }
}

/* ---- Buttons: bigger touch targets on phones ---- */
@media (max-width: 640px) {
  button, .btn-secondary, .primary-link, button.primary {
    min-height: 40px;
  }
  button.primary.big { padding: .9rem 1.2rem; font-size: 1rem; }
}

/* ---- Tables: horizontal scroll wrapper ---- */
.card .data-table,
.card table.docs-table {
  width: 100%;
}
@media (max-width: 720px) {
  .card { overflow-x: auto; }            /* card itself scrolls horizontally */
  .data-table, .docs-table {
    min-width: 520px;                    /* keep tables readable */
  }
  .data-table th, .data-table td,
  .docs-table th, .docs-table td {
    font-size: .82rem; padding: .35rem .45rem;
  }
}

/* ---- Settings page rows ---- */
@media (max-width: 720px) {
  .setting-row { padding: .8rem 0; }
  .setting-input input { padding: .65rem .7rem; font-size: 1rem; }
}

/* ---- Tabs (My Recent / All Customers) ---- */
@media (max-width: 640px) {
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: .5rem .7rem; font-size: .85rem; flex-shrink: 0; }
}

/* ---- Picker inputs / selects: bigger on touch ---- */
@media (max-width: 640px) {
  .picker input, .picker select { padding: .75rem .8rem; font-size: 1rem; }
}

/* ---- KPI grid ---- */
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
  .kpi { padding: .7rem .8rem; }
  .kpi-num { font-size: 1.45rem; }
  .kpi-label { font-size: .65rem; }
  .kpi-sub { font-size: .72rem; }
}

/* ---- Dashboard charts ---- */
@media (max-width: 720px) {
  .dash-grid { grid-template-columns: 1fr; gap: .65rem; }
  .dash-grid .card canvas { height: 200px !important; }
}

/* ---- Activity timeline rows: stack vertically ---- */
@media (max-width: 720px) {
  .activity-list li {
    grid-template-columns: 24px 1fr;
    grid-template-areas:
      "icon time"
      "icon kind"
      ". target"
      ". detail";
    gap: .15rem .5rem;
  }
  .activity-list li .act-icon { grid-area: icon; }
  .activity-list li .act-time { grid-area: time; }
  .activity-list li .act-kind { grid-area: kind; }
  .activity-list li .act-by  { display: none; }
  .activity-list li .act-target { grid-area: target; }
  .activity-list li .act-detail { grid-area: detail; white-space: normal; }
}

/* ---- Bell panel: fit viewport on phone ---- */
@media (max-width: 640px) {
  .bell-panel {
    position: fixed; top: auto; left: .5rem; right: .5rem;
    width: auto; max-width: none;
  }
}

/* ---- Modal: full-bleed on phone ---- */
@media (max-width: 640px) {
  .modal { padding: 0; align-items: flex-start; }
  .modal-card {
    width: 100%; max-width: none; border-radius: 0;
    min-height: 100vh; padding: 1.2rem 1rem;
  }
}

/* ---- Forms ---- */
@media (max-width: 640px) {
  .form-grid input, .form-grid textarea, .form-grid select {
    padding: .7rem; font-size: 1rem;
  }
}

/* ---- Detail card grid ---- */
@media (max-width: 720px) {
  .grid { gap: .65rem; }
}

/* ---- Photo thumbs / branch list ---- */
@media (max-width: 640px) {
  .thumbs { gap: .35rem; }
  .thumb, .thumb-wrap { width: 84px; height: 84px; }
  .thumb-action { opacity: 1; width: 22px; height: 22px; font-size: 12px; }
  .branch-list { grid-template-columns: 1fr; }
}

/* ---- Geo map ---- */
@media (max-width: 640px) {
  .geo-map { height: 200px; }
}

/* ---- Login card ---- */
@media (max-width: 640px) {
  .login-card { padding: 1.5rem 1.1rem; border-radius: 10px; }
  .login-card h1 { font-size: 1.2rem; }
}

/* ---- Submit-for-approval card ---- */
@media (max-width: 640px) {
  .submit-card > div:first-child { flex-direction: column; align-items: stretch !important; }
  .submit-card .primary.big { width: 100%; }
}

/* ---- Branch panel ---- */
@media (max-width: 640px) {
  .branch-panel { padding: .65rem; }
  .branch-head { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ---- View-only banner: stays visible ---- */
body.view-only::before { font-size: .78rem; padding: .45rem .75rem; }

/* ---- Health badge ---- */
@media (max-width: 640px) {
  .health-badge { width: 100%; justify-content: flex-start; }
}

/* ---- Reduce default body font on tiny screens ---- */
@media (max-width: 380px) {
  body { font-size: 14px; }
}

/* ---- Audit row (was 6 cols) ---- */
@media (max-width: 720px) {
  #auditTbl { min-width: 700px; }
}

/* ---- Settings card on phone: more padding-friendly ---- */
@media (max-width: 640px) {
  .modal-card label + label { margin-top: .6rem; }
}

/* ---- Voice notes: stack ---- */
@media (max-width: 640px) {
  .voice-row { flex-wrap: wrap; }
  .voice-row audio { width: 100%; }
}

/* ---- Make detail action buttons fit ---- */
.detail-actions .btn-secondary,
.detail-actions button {
  white-space: nowrap;
}

/* ---- Visit form grid ---- */
@media (max-width: 640px) {
  .form-grid { gap: .55rem; }
}

/* ---------- Export page ---------- */
.export-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.export-actions a, .export-actions button {
  flex: 1 1 240px; text-align: center; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 56px;
}
@media (max-width: 640px) {
  .export-actions a, .export-actions button { flex: 1 1 100%; }
}

/* ---------- Live-search suggestions ---------- */
.search-wrap { position: relative; }
.search-wrap input[type="search"] {
  width: 100%; padding: .8rem 1rem; border: 1px solid #d3d8e0;
  border-radius: 8px; font-size: 1rem; background: #fff;
}
.search-wrap input[type="search"]:focus {
  outline: none; border-color: #5b3a8c;
  box-shadow: 0 0 0 3px rgba(91,58,140,.12);
}
.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 100; background: #fff; border: 1px solid #d3d8e0;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 380px; overflow-y: auto;
}
.suggest-row {
  padding: .55rem .8rem; cursor: pointer; font-size: .9rem;
  border-bottom: 1px solid #f4f6f9; display: flex; gap: .5rem; flex-wrap: wrap;
  align-items: center;
}
.suggest-row:last-child { border-bottom: 0; }
.suggest-row:hover, .suggest-row.active { background: #faf7ff; }
.suggest-ref {
  background: #ede4fa; color: #5b3a8c; padding: .1rem .4rem;
  border-radius: 3px; font-size: .72rem; font-weight: 600; font-family: monospace;
}
.suggest-name { font-weight: 600; color: #1a2230; }
.suggest-name mark { background: #fff4a3; color: inherit; padding: 0; }
.suggest-city { color: #6b7785; font-size: .8rem; }
.suggest-city::before { content: '· '; }
.suggest-mp {
  margin-left: auto; color: #5b3a8c; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.suggest-empty {
  padding: 1rem; color: #6b7785; font-size: .9rem; text-align: center;
}
.suggest-more {
  padding: .55rem .8rem; color: #6b7785; font-size: .8rem;
  text-align: center; background: #faf7ff; border-top: 1px solid #f4f6f9;
}
@media (max-width: 640px) {
  .suggestions { max-height: 60vh; }
  .suggest-mp { margin-left: 0; flex-basis: 100%; }
}

/* ---------- Static Maps image (replaces iframe) ---------- */
.geo-map-static {
  display: block; width: 100%; max-width: 720px;
  border-radius: 8px; margin-top: .7rem; background: #f0f0f3;
  cursor: pointer;
}

.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-block { border: 1px solid #e5e8ee; border-radius: 8px; padding: .8rem; background: #faf7ff; }
.contact-title { font-weight: 600; color: #5b3a8c; margin-bottom: .5rem; }
.contact-block label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .5rem; }
.contact-block input { width: 100%; padding: .55rem .7rem; border: 1px solid #d3d8e0; border-radius: 6px; font-size: .95rem; margin-top: .2rem; background: #fff; }
@media (max-width: 720px) { .contacts-grid { grid-template-columns: 1fr; } }