:root {
  --bg: #f6f8fb;
  --panel: #ffffff;
  --line: #d9e0ea;
  --text: #152033;
  --muted: #64748b;
  --blue: #1769e0;
  --green: #0f9f6e;
  --yellow: #b7791f;
  --red: #c24141;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 Arial, Helvetica, sans-serif;
}

.hidden {
  display: none !important;
}

.loginView {
  align-items: center;
  background:
    radial-gradient(circle at 35% 28%, rgba(23, 105, 224, .08), transparent 34%),
    linear-gradient(180deg, #e8f3ff 0%, #f7fbff 100%);
  display: flex;
  min-height: 100vh;
  justify-content: center;
  padding: 32px 18px;
}

.loginCard {
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(217, 224, 234, .9);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(22, 42, 72, .16);
  max-width: 360px;
  padding: 30px;
  text-align: center;
  width: 100%;
}

.loginLogo {
  height: 76px;
  object-fit: contain;
  width: 76px;
}

.loginCard h1 {
  color: #08345f;
  font-size: 25px;
  line-height: 1.25;
  margin: 14px 0 10px;
}

.loginCard p {
  color: #4b617c;
  font-size: 14px;
  margin: 0 0 26px;
}

.loginCard label {
  display: block;
  margin-bottom: 14px;
  text-align: left;
}

.loginCard span {
  color: #0f1f35;
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 7px;
}

.loginCard input {
  background: #eef5ff;
  border-color: #bdd2ef;
  font-size: 14px;
  width: 100%;
}

.loginCard input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(23, 105, 224, .14);
  outline: 0;
}

.loginCard button {
  margin-top: 2px;
  min-height: 42px;
  width: 100%;
}

.loginError {
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  min-height: 20px;
  padding-top: 12px;
}

.loginCard small {
  color: #8a9bb2;
  display: block;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 8px;
}

.topbar {
  align-items: center;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 18px 24px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.brand {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.brandLogo {
  height: 48px;
  object-fit: contain;
  width: 48px;
}

.eyebrow {
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 4px;
  text-transform: uppercase;
}

h1 {
  font-size: 22px;
  margin: 0;
}

h2 {
  font-size: 15px;
  margin: 0 0 12px;
}

button,
.fileButton {
  background: var(--blue);
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  padding: 10px 14px;
}

.ghostButton {
  background: #eef3f9;
  color: #27415f;
}

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

main {
  padding: 20px 24px 28px;
}

.metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.metrics article,
.manual,
.toolbar,
.sheet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.metrics article {
  padding: 14px;
}

.metrics span {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.metrics strong {
  display: block;
  font-size: 26px;
  margin-top: 4px;
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
}

.filtersPanel {
  margin-bottom: 14px;
}

.filterToggle {
  display: none;
}

input,
select,
textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  min-height: 38px;
  padding: 8px 10px;
}

.toolbar input {
  flex: 1;
}

.fileButton input {
  display: none;
}

.manual {
  margin-bottom: 14px;
  padding: 14px;
}

.sectionTitle {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sectionTitle h2 {
  margin: 0;
}

.iconTextButton,
.mobilePrimaryAction,
.mobileBottomBar,
.leadCards {
  display: none;
}

.iconTextButton {
  background: #eef3f9;
  color: #27415f;
  padding: 8px 10px;
}

.manual form {
  display: grid;
  gap: 8px;
  grid-template-columns: 1.2fr 1fr 1.2fr .9fr .9fr .9fr 1.1fr auto;
}

.sheet {
  overflow: auto;
}

table {
  border-collapse: collapse;
  min-width: 1280px;
  width: 100%;
}

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

th {
  background: #eef3f9;
  font-size: 12px;
  position: sticky;
  top: 73px;
  z-index: 1;
}

td[contenteditable="true"] {
  background: #fffdf4;
}

.status {
  font-weight: 700;
  min-width: 150px;
}

.status[data-status="Novo"] {
  color: var(--blue);
}

.status[data-status="Fechado"] {
  color: var(--green);
}

.status[data-status="Perdido"] {
  color: var(--red);
}

.status[data-status="Sem resposta"] {
  color: var(--yellow);
}

.status[data-status="Contato feito"],
.status[data-status="Cotacao enviada"] {
  color: #6d4cc2;
}

.empty {
  color: var(--muted);
  padding: 26px;
  text-align: center;
}

@media (max-width: 900px) {
  body {
    padding-bottom: 82px;
  }

  .topbar,
  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar {
    padding: 14px 24px 16px;
  }

  .brand {
    align-items: center;
    gap: 10px;
  }

  .brandLogo {
    height: 44px;
    width: 44px;
  }

  h1 {
    font-size: 21px;
    line-height: 1.15;
  }

  .actions {
    display: none;
  }

  main {
    padding: 14px 24px 10px;
  }

  .metrics {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px;
  }

  .metrics article {
    padding: 10px 12px;
  }

  .metrics span {
    font-size: 11px;
  }

  .metrics strong {
    font-size: 21px;
    margin-top: 2px;
  }

  .filtersPanel {
    margin-bottom: 14px;
  }

  .filterToggle {
    background: #eef3f9;
    color: #27415f;
    display: block;
    margin-bottom: 8px;
    width: 100%;
  }

  .toolbar.mobileCollapsed {
    display: none;
  }

  .toolbar {
    gap: 8px;
    margin-bottom: 0;
    padding: 12px;
  }

  .toolbar input,
  .toolbar select,
  .toolbar .fileButton {
    width: 100%;
  }

  .mobilePrimaryAction {
    display: block;
    margin-bottom: 14px;
    width: 100%;
  }

  .manual.mobileCollapsed {
    display: none;
  }

  .iconTextButton {
    display: inline-block;
  }

  .manual form {
    grid-template-columns: 1fr;
  }

  .leadCards {
    display: grid;
    gap: 12px;
  }

  .leadCard {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
  }

  .leadCardHeader {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .leadName {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
  }

  .leadDate {
    color: var(--muted);
    display: block;
    font-size: 12px;
    margin-top: 3px;
  }

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

  .leadField {
    background: #f8fbff;
    border: 1px solid #e3eaf4;
    border-radius: 6px;
    padding: 8px;
    min-width: 0;
  }

  .leadField span {
    color: var(--muted);
    display: block;
    font-size: 11px;
    margin-bottom: 3px;
  }

  .leadField strong {
    display: block;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .leadStatus {
    border-radius: 999px;
    font-size: 12px;
    min-width: 132px;
    padding: 7px 8px;
  }

  .leadStatus[data-status="Novo"] {
    background: #e9f1ff;
    border-color: #bdd2ef;
    color: var(--blue);
  }

  .leadStatus[data-status="Contato feito"],
  .leadStatus[data-status="Cotacao enviada"] {
    background: #f0ebff;
    border-color: #d7caff;
    color: #6d4cc2;
  }

  .leadStatus[data-status="Sem resposta"] {
    background: #fff8e5;
    border-color: #f2d387;
    color: var(--yellow);
  }

  .leadStatus[data-status="Fechado"] {
    background: #e8f8f1;
    border-color: #b9ebd4;
    color: var(--green);
  }

  .leadStatus[data-status="Perdido"] {
    background: #fff0f0;
    border-color: #f0b7b7;
    color: var(--red);
  }

  .leadNotes {
    margin-top: 10px;
  }

  .leadNotes textarea {
    min-height: 72px;
    resize: vertical;
    width: 100%;
  }

  .leadActions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
  }

  .leadActions a,
  .leadActions button {
    align-items: center;
    background: var(--blue);
    border: 0;
    border-radius: 6px;
    color: #fff;
    display: flex;
    font-weight: 800;
    justify-content: center;
    min-height: 40px;
    padding: 9px 10px;
    text-decoration: none;
    text-align: center;
  }

  .leadActions .secondaryAction {
    background: #eef3f9;
    color: #27415f;
  }

  .sheet {
    display: none;
  }

  .mobileBottomBar {
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--line);
    bottom: 0;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    left: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 5;
  }

  .mobileBottomBar button {
    font-size: 12px;
    min-height: 42px;
    padding: 8px 6px;
  }

  .mobileBottomBar button:last-child {
    background: #eef3f9;
    color: #27415f;
  }

  .empty {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 22px;
  }
}