/* Sketch wireframe vocabulary — low-fi but readable */

:root {
  --ink: #1a1a1a;
  --ink-2: #4a4a4a;
  --ink-3: #8a8a8a;
  --ink-4: #c4c4c4;
  --paper: #fbfaf6;
  --paper-2: #f3f1ea;
  --paper-3: #e8e5db;
  --teal: #0F766E;
  --ochre: #B8853A;
  --red: #b3402d;
  --dark-bg: #1f1c18;
  --dark-fg: #f0ede5;
  --dark-2: #2a2620;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive;
  color: var(--ink);
  background: #f0eee9;
}

/* The phone frame — used for every wireframe artboard */
.phone {
  width: 360px;
  height: 720px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.25;
  display: flex;
  flex-direction: column;
}

.phone.dark {
  background: var(--dark-bg);
  color: var(--dark-fg);
}

/* Status bar */
.statusbar {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 22px;
  font-family: 'Patrick Hand', cursive;
  font-size: 13px;
  color: var(--ink-2);
  flex-shrink: 0;
}
.phone.dark .statusbar { color: var(--dark-fg); opacity: 0.7; }

/* Top app bar */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 12px;
  border-bottom: 1.5px dashed var(--ink-4);
  flex-shrink: 0;
}
.appbar .title {
  font-family: 'Caveat', cursive;
  font-size: 26px;
  font-style: italic;
  color: var(--ink);
  line-height: 1;
}
.phone.dark .appbar { border-bottom-color: #3a352e; }
.phone.dark .appbar .title { color: var(--dark-fg); }

.icon-btn {
  width: 36px; height: 36px;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: transparent;
  position: relative;
  flex-shrink: 0;
}
.icon-btn.notif::after {
  content: ""; position: absolute;
  top: 4px; right: 5px;
  width: 8px; height: 8px;
  background: var(--red); border-radius: 50%;
  border: 1.5px solid var(--paper);
}
.phone.dark .icon-btn { border-color: #5a5249; color: var(--dark-fg); }

/* Search */
.search {
  margin: 12px 16px 8px;
  border: 1.5px solid var(--ink-3);
  border-radius: 24px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  color: var(--ink-3);
}

/* Chip row (filters) */
.chips {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  overflow-x: auto;
}
.chip {
  border: 1.5px solid var(--ink-3);
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  background: transparent;
  flex-shrink: 0;
}
.chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.chip.lm { background: var(--paper-2); }
.phone.dark .chip { color: var(--dark-fg); border-color: #5a5249; }
.phone.dark .chip.active { background: var(--dark-fg); color: var(--dark-bg); border-color: var(--dark-fg); }

/* Territory card */
.tcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px dashed var(--ink-4);
}
.tcard .tid {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.5px;
  min-width: 56px;
}
.tcard .body {
  flex: 1;
  min-width: 0;
}
.tcard .name {
  font-size: 15px;
  color: var(--ink);
}
.tcard .meta {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 1px;
}
.phone.dark .tcard { border-bottom-color: #2e2a23; }
.phone.dark .tcard .meta { color: #9a9286; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  border: 1.2px solid var(--ink-3);
  color: var(--ink-2);
}
.badge.libre { color: var(--teal); border-color: var(--teal); }
.badge.parcouru { color: var(--ink-3); }
.badge.orange { color: var(--ochre); border-color: var(--ochre); }
.badge.red { color: var(--red); border-color: var(--red); }
.badge.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.badge.solid.libre { background: var(--teal); color: white; border-color: var(--teal); }
.badge.solid.orange { background: var(--ochre); color: white; border-color: var(--ochre); }
.badge.solid.red { background: var(--red); color: white; border-color: var(--red); }

/* Bottom navigation */
.bottomnav {
  margin-top: auto;
  height: 64px;
  border-top: 1.5px dashed var(--ink-4);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 6px;
  flex-shrink: 0;
}
.bottomnav .nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--ink-3);
}
.bottomnav .nav.active { color: var(--ink); }
.bottomnav .nav .icon {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  border-radius: 8px;
}
.bottomnav .nav.active .icon {
  background: var(--ink);
  color: var(--paper);
}
.phone.dark .bottomnav { border-top-color: #3a352e; }
.phone.dark .bottomnav .nav { color: #7a7268; }
.phone.dark .bottomnav .nav.active { color: var(--dark-fg); }
.phone.dark .bottomnav .nav.active .icon { background: var(--dark-fg); color: var(--dark-bg); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  font-family: inherit;
  font-size: 15px;
  background: transparent;
  color: var(--ink);
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.teal { background: var(--teal); color: white; border-color: var(--teal); }
.btn.whatsapp { background: #1F8A5B; color: white; border-color: #1F8A5B; }
.btn.full { width: 100%; }
.btn.sm { height: 32px; font-size: 13px; padding: 0 10px; border-radius: 16px; }
.btn.ghost { border-color: var(--ink-3); color: var(--ink-2); }

/* FAB */
.fab {
  position: absolute;
  right: 16px;
  bottom: 84px;
  width: 56px; height: 56px;
  border-radius: 28px;
  background: var(--ink);
  color: var(--paper);
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.fab.teal { background: var(--teal); }

/* Sync indicator */
.sync {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sync .dot {
  width: 6px; height: 6px;
  background: var(--teal);
  border-radius: 50%;
  display: inline-block;
}

/* Section header inside a list */
.section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
  font-size: 13px;
  color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.phone.dark .section-hdr { color: #7a7268; }

/* Sketchy underline for handwritten emphasis */
.scribble {
  text-decoration: underline wavy var(--ochre);
  text-underline-offset: 3px;
}

/* Generic boxes / placeholders */
.box {
  border: 1.5px dashed var(--ink-4);
  border-radius: 6px;
  padding: 12px;
  color: var(--ink-3);
  font-size: 13px;
}
.placeholder {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 8px,
    rgba(0,0,0,0.04) 8px 16px
  );
  border: 1.5px dashed var(--ink-4);
}

/* Post-it / annotation */
.annot {
  font-family: 'Kalam', cursive;
  color: var(--ochre);
  font-size: 13px;
  line-height: 1.3;
}

/* Bottom sheet handle */
.handle {
  width: 36px; height: 4px;
  background: var(--ink-4);
  border-radius: 2px;
  margin: 8px auto 4px;
}

/* Scrollable list inside the phone */
.scroll { flex: 1; overflow: hidden; }

/* Drawn arrow helper */
.arrow {
  font-family: 'Kalam', cursive;
  color: var(--ochre);
  font-size: 14px;
}

/* A "drawn" rectangle outline using SVG-ish irregular border via box-shadow */
.sketch-border {
  border: 1.5px solid var(--ink);
  border-radius: 4px;
}

/* Tab bar in some screens */
.tabs {
  display: flex;
  border-bottom: 1.5px dashed var(--ink-4);
  padding: 0 16px;
  gap: 18px;
}
.tabs .tab {
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink-3);
  position: relative;
}
.tabs .tab.active {
  color: var(--ink);
}
.tabs .tab.active::after {
  content: "";
  position: absolute;
  bottom: -1.5px;
  left: 0; right: 0;
  height: 2px;
  background: var(--ink);
}

/* Avatar circle */
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-3);
  background: var(--paper-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ink-2);
  flex-shrink: 0;
}

/* Bar (stats) */
.bar {
  height: 8px;
  background: var(--paper-3);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  background: var(--ink);
}
.bar > span.teal { background: var(--teal); }
.bar > span.ochre { background: var(--ochre); }

/* List row */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px dashed var(--ink-4);
}
.row .left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.row .name { flex: 1; min-width: 0; }