/* =========================================================
   LEADRADAR
   UI v5
========================================================= */

:root {

  --wine: #94163a;
  --wine-dark: #74102d;
  --wine-darker: #5f0b25;

  --wine-soft: #f8edf1;
  --wine-softer: #fcf6f8;

  --gold: #a86e08;
  --gold-bg: #fff6de;
  --gold-border: #efd28c;

  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #fafafa;

  --text: #15171d;
  --text-soft: #4f5867;
  --muted: #77808e;

  --border: #e2e5e9;
  --border-strong: #d7dbe1;

  --shadow:
    0 6px 22px rgba(20, 26, 38, 0.055);

  --shadow-hover:
    0 10px 30px rgba(20, 26, 38, 0.09);

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;

  --sidebar-width: 230px;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;

  min-height: 100vh;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    var(--bg);

  color:
    var(--text);

  -webkit-font-smoothing:
    antialiased;
}

button,
input,
select,
textarea {

  font:
    inherit;

}

button,
select {

  cursor:
    pointer;

}

a {

  color:
    inherit;

}


/* =========================================================
   APP SHELL
========================================================= */

.app-shell {

  min-height:
    100vh;

  display:
    grid;

  grid-template-columns:
    var(--sidebar-width) minmax(0, 1fr);

}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {

  position:
    fixed;

  left:
    0;

  top:
    0;

  bottom:
    0;

  width:
    var(--sidebar-width);

  z-index:
    30;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    25px 14px 18px;

  background:
    rgba(255, 255, 255, 0.97);

  border-right:
    1px solid var(--border);

}


.brand {

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    0 12px 27px;

  text-decoration:
    none;

  font-size:
    21px;

  font-weight:
    800;

  letter-spacing:
    -0.03em;

}


.brand-icon {

  width:
    34px;

  height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--wine);

}


.brand-icon svg {

  width:
    32px;

  height:
    32px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

}


.sidebar-nav {

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

}


.nav-item {

  height:
    48px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    0 13px;

  border-radius:
    10px;

  text-decoration:
    none;

  color:
    #505762;

  font-size:
    14px;

  font-weight:
    550;

  transition:
    background .18s ease,
    color .18s ease;

}


.nav-item svg {

  width:
    20px;

  height:
    20px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


.nav-item:hover {

  background:
    #f7f7f8;

  color:
    var(--text);

}


.nav-item.active {

  background:
    var(--wine-soft);

  color:
    var(--wine);

  font-weight:
    700;

}


.profile-card {

  min-height:
    66px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    10px;

  border:
    1px solid var(--border);

  border-radius:
    12px;

  background:
    white;

}


.profile-avatar {

  width:
    36px;

  height:
    36px;

  flex:
    0 0 36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--wine);

  color:
    white;

  border-radius:
    50%;

  font-size:
    11px;

  font-weight:
    800;

}


.profile-copy {

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

}


.profile-copy strong {

  font-size:
    13px;

}


.profile-copy span {

  color:
    var(--muted);

  font-size:
    11px;

  margin-top:
    2px;

}


.profile-chevron {

  color:
    var(--muted);

  transform:
    rotate(90deg);

}


/* =========================================================
   MAIN
========================================================= */

.main-content {

  grid-column:
    2;

  min-width:
    0;

}


.topbar {

  height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 34px;

}


.topbar-actions {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

}


.icon-button {

  position:
    relative;

  width:
    32px;

  height:
    32px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #59606a;

  font-size:
    14px;

  border-radius:
    50%;

}


.icon-button:hover {

  background:
    white;

}


.icon-button svg {

  width:
    19px;

  height:
    19px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

}


.notification-dot {

  position:
    absolute;

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--wine);

  border:
    1px solid white;

  right:
    5px;

  top:
    4px;

}


.content-container {

  width:
    min(1280px, calc(100% - 52px));

  margin:
    0 auto;

  padding-bottom:
    60px;

}


/* =========================================================
   PANELS
========================================================= */

.panel {

  background:
    rgba(255, 255, 255, 0.98);

  border:
    1px solid rgba(221, 224, 230, 0.94);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow);

}


.panel + .panel {

  margin-top:
    16px;

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.section-kicker {

  margin-bottom:
    8px;

  color:
    var(--wine);

  text-transform:
    uppercase;

  font-size:
    10px;

  line-height:
    1;

  letter-spacing:
    .075em;

  font-weight:
    850;

}


h1,
h2,
h3,
p {

  margin-top:
    0;

}


h1 {

  margin-bottom:
    8px;

  font-size:
    clamp(25px, 3vw, 31px);

  line-height:
    1.15;

  letter-spacing:
    -0.04em;

}


h2 {

  margin-bottom:
    5px;

  font-size:
    21px;

  line-height:
    1.2;

  letter-spacing:
    -0.025em;

}


.section-description {

  margin-bottom:
    0;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.55;

}


/* =========================================================
   SEARCH
========================================================= */

.search-panel {

  padding:
    26px 30px 21px;

}


.search-grid {

  display:
    grid;

  grid-template-columns:
    minmax(180px, 1fr)
    minmax(220px, 1.1fr)
    210px;

  gap:
    12px;

  align-items:
    end;

  margin-top:
    18px;

}


.field-group {

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

}


.field-group label,
.mini-field label {

  color:
    #323842;

  font-size:
    11px;

  font-weight:
    700;

}


input,
select,
textarea {

  outline:
    none;

  border:
    1px solid var(--border-strong);

  background:
    white;

  color:
    var(--text);

  transition:
    border-color .18s ease,
    box-shadow .18s ease;

}


input:focus,
select:focus,
textarea:focus {

  border-color:
    rgba(148, 22, 58, .55);

  box-shadow:
    0 0 0 3px rgba(148, 22, 58, .09);

}


.field-group input,
.field-group select {

  width:
    100%;

  height:
    44px;

  padding:
    0 13px;

  border-radius:
    9px;

  font-size:
    13px;

}


.primary-btn {

  min-height:
    44px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    0 19px;

  border:
    0;

  border-radius:
    9px;

  background:
    linear-gradient(
      135deg,
      var(--wine),
      var(--wine-dark)
    );

  color:
    white;

  text-decoration:
    none;

  font-size:
    12px;

  font-weight:
    750;

  transition:
    transform .15s ease,
    box-shadow .15s ease;

}


.primary-btn:hover {

  transform:
    translateY(-1px);

  box-shadow:
    0 7px 18px rgba(148, 22, 58, .18);

}


.primary-btn svg {

  width:
    20px;

  height:
    20px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

}


.analyze-button {

  height:
    44px;

}


.analyze-button:disabled {

  opacity:
    .65;

  cursor:
    wait;

  transform:
    none;

}


.search-status {

  min-height:
    18px;

  margin-top:
    10px;

  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.45;

}


.search-status.error {

  color:
    #b42318;

}


/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-panel {

  padding:
    22px 30px 17px;

}


.dashboard-heading {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    16px;

}


.dashboard-description {

  margin-top:
    1px;

}


.coverage-badge {

  flex:
    0 0 auto;

  padding:
    8px 14px;

  border-radius:
    999px;

  font-size:
    10px;

  font-weight:
    750;

  white-space:
    nowrap;

}


.coverage-badge.good {

  background:
    #eef8f3;

  border:
    1px solid #cde9dc;

  color:
    #267556;

}


.coverage-badge.partial {

  background:
    var(--gold-bg);

  border:
    1px solid var(--gold-border);

  color:
    #8d5d07;

}


/* =========================================================
   KPIS
========================================================= */

.kpi-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    10px;

}


.kpi-card {

  min-height:
    94px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    13px;

  text-align:
    left;

  border:
    1px solid var(--border);

  border-radius:
    12px;

  background:
    white;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;

}


.kpi-card:hover {

  transform:
    translateY(-1px);

  box-shadow:
    var(--shadow-hover);

  border-color:
    #d5d8de;

}


.kpi-icon {

  width:
    46px;

  height:
    46px;

  flex:
    0 0 46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    10px;

}


.kpi-icon svg {

  width:
    25px;

  height:
    25px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


.kpi-icon.burgundy {

  background:
    var(--wine-soft);

  color:
    var(--wine);

}


.kpi-icon.burgundy-soft {

  background:
    #faedf2;

  color:
    var(--wine);

}


.kpi-icon.neutral {

  background:
    #f1f2f4;

  color:
    #31363e;

}


.kpi-copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

}


.kpi-label {

  margin-bottom:
    2px;

  color:
    var(--text-soft);

  font-size:
    10px;

}


.kpi-copy strong {

  font-size:
    22px;

  line-height:
    1.05;

}


.kpi-copy small {

  margin-top:
    4px;

  color:
    var(--muted);

  font-size:
    9px;

}


/* =========================================================
   CHANNEL CARDS
========================================================= */

.channel-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    10px;

  margin-top:
    9px;

}


.channel-card {

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 12px;

  border:
    1px solid var(--border);

  border-radius:
    9px;

  background:
    white;

  color:
    var(--text);

}


.channel-card:hover {

  border-color:
    #cfd2d7;

  background:
    #fcfcfd;

}


.channel-name {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--text-soft);

  font-size:
    10px;

}


.channel-name svg {

  width:
    15px;

  height:
    15px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

}


.channel-symbol {

  width:
    16px;

  height:
    16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid currentColor;

  border-radius:
    50%;

  font-size:
    8px;

  font-weight:
    800;

}


.channel-card strong {

  font-size:
    12px;

}


/* =========================================================
   OPPORTUNITY
========================================================= */

.opportunity-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    10px;

  margin-top:
    9px;

}


.opportunity-card {

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    0 12px;

  background:
    linear-gradient(
      90deg,
      #fbf1f4,
      #f8e9ef
    );

  border-radius:
    8px;

  color:
    var(--wine-dark);

  font-size:
    10px;

  font-weight:
    650;

}


.opportunity-card strong {

  color:
    var(--text);

}


/* =========================================================
   MARKET INSIGHT
========================================================= */

.market-insight {

  position:
    relative;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  margin-top:
    11px;

  padding:
    13px 16px 13px 18px;

  background:
    linear-gradient(
      90deg,
      #fbf2f5,
      #f8eaf0
    );

  border-radius:
    0 9px 9px 0;

}


.market-insight::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  bottom:
    0;

  width:
    4px;

  background:
    var(--wine);

}


.insight-icon {

  color:
    var(--wine);

  font-size:
    21px;

  line-height:
    1;

}


.insight-title {

  margin-bottom:
    4px;

  color:
    var(--wine-dark);

  text-transform:
    uppercase;

  font-size:
    9px;

  letter-spacing:
    .05em;

  font-weight:
    850;

}


.market-insight p {

  margin-bottom:
    0;

  color:
    #303640;

  font-size:
    10px;

  line-height:
    1.55;

}


/* =========================================================
   HISTORY
========================================================= */

.history {

  margin-top:
    10px;

  border-top:
    1px solid var(--border);

}


.history summary {

  padding:
    11px 0 2px;

  cursor:
    pointer;

  color:
    #343a43;

  font-size:
    10px;

  font-weight:
    650;

}


.history-table-wrapper {

  overflow-x:
    auto;

  margin-top:
    10px;

}


.history-table {

  width:
    100%;

  border-collapse:
    collapse;

  font-size:
    10px;

}


.history-table th,
.history-table td {

  padding:
    9px 10px;

  border-bottom:
    1px solid var(--border);

  text-align:
    left;

}


.history-table th {

  color:
    var(--muted);

  font-weight:
    700;

}


/* =========================================================
   LEADS
========================================================= */

.leads-panel {

  padding:
    22px 30px 28px;

}


.leads-heading {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    20px;

  margin-bottom:
    13px;

}


/* =========================================================
   ENRICHMENT BAR
   criado dinamicamente no app.js
========================================================= */

#enrichmentBar {

  min-height:
    55px;

  margin-bottom:
    9px;

  padding:
    11px 12px !important;

  background:
    #fbfbfc;

  border:
    1px solid var(--border);

  border-radius:
    10px;

}


#enrichmentBar strong {

  font-size:
    11px;

}


#enrichmentText {

  font-size:
    9px !important;

}


#enrichMoreBtn {

  white-space:
    nowrap;

}


/* =========================================================
   FILTERS
========================================================= */

.filters {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    11px;

  border:
    1px solid var(--border);

  border-radius:
    10px;

  background:
    #fbfbfc;

}


.filter-checks {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

}


.filter-chip {

  min-height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    0 10px;

  border:
    1px solid var(--border-strong);

  border-radius:
    8px;

  background:
    white;

  color:
    #353b44;

  font-size:
    9px;

  font-weight:
    650;

  cursor:
    pointer;

}


.filter-chip input {

  width:
    13px;

  height:
    13px;

  accent-color:
    var(--wine);

}


.filter-chip:has(input:checked) {

  border-color:
    rgba(148, 22, 58, .25);

  background:
    var(--wine-softer);

  color:
    var(--wine-dark);

}


.filter-controls {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  gap:
    8px;

  flex: 1;

}


.mini-field {

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

}


.mini-field select,
.mini-field input {

  height:
    32px;

  border-radius:
    7px;

  padding:
    0 10px;

  font-size:
    9px;

}


.mini-field select {

  min-width:
    100px;

}


.search-filter {

  flex:
    1;

  max-width:
    250px;

}


.search-input-wrapper {

  position:
    relative;

}


.search-input-wrapper input {

  width:
    100%;

  padding-right:
    30px;

}


.search-input-wrapper svg {

  position:
    absolute;

  top:
    50%;

  right:
    9px;

  width:
    14px;

  height:
    14px;

  transform:
    translateY(-50%);

  fill:
    none;

  stroke:
    var(--muted);

  stroke-width:
    1.8;

}


.clear-btn,
.secondary-btn,
.secondary-link {

  min-height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 12px;

  border:
    1px solid var(--border-strong);

  border-radius:
    8px;

  background:
    white;

  color:
    #252a31;

  text-decoration:
    none;

  font-size:
    9px;

  font-weight:
    700;

}


.clear-btn:hover,
.secondary-btn:hover,
.secondary-link:hover {

  background:
    #f7f7f8;

}


/* =========================================================
   LEAD LIST
========================================================= */

.lead-list {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  margin-top:
    9px;

}


.lead-card {

  position:
    relative;

  min-height:
    102px;

  display:
    grid;

  grid-template-columns:
    44px minmax(0, 1fr) auto;

  gap:
    13px;

  align-items:
    center;

  padding:
    13px;

  background:
    white;

  border:
    1px solid var(--border);

  border-radius:
    11px;

  transition:
    box-shadow .17s ease,
    border-color .17s ease;

}


.lead-card:hover {

  border-color:
    #d3d6dc;

  box-shadow:
    var(--shadow-hover);

}


.score-pill {

  width:
    42px;

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    10px;

  background:
    #f4f4f5;

  color:
    #363b43;

  font-size:
    12px;

  font-weight:
    850;

}


.score-pill.high {

  background:
    #f7eaf0;

  color:
    var(--wine);

}


.score-pill.mid {

  background:
    var(--gold-bg);

  color:
    #986304;

}


.score-pill.low {

  background:
    #f1f2f4;

  color:
    #555d68;

}


.lead-main {

  min-width:
    0;

}


.lead-main h3 {

  margin-bottom:
    3px;

  font-size:
    13px;

  line-height:
    1.25;

}


.lead-sub {

  color:
    var(--muted);

  font-size:
    9px;

  line-height:
    1.45;

}


.tags {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    5px;

  margin-top:
    7px;

}


.tag {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    23px;

  padding:
    0 8px;

  border:
    1px solid var(--border);

  border-radius:
    6px;

  background:
    #fafafa;

  color:
    #555d67;

  font-size:
    8px;

  font-weight:
    650;

}


.tag.hot {

  border-color:
    #f0d8a7;

  background:
    var(--gold-bg);

  color:
    #966100;

}


.lead-meta {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px 12px;

  margin-top:
    7px;

  color:
    #4b535e;

  font-size:
    8px;

}


.lead-meta a {

  color:
    var(--wine);

  font-weight:
    700;

}


.lead-actions {

  min-width:
    145px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;

  gap:
    6px;

}


.lead-actions button,
.lead-actions a,
.lead-actions select {

  min-height:
    30px;

  font-size:
    8px;

}


.lead-status {

  border:
    1px solid var(--border);

  border-radius:
    7px;

  background:
    white;

  padding:
    0 8px;

}


.empty-state {

  padding:
    35px;

  text-align:
    center;

  border:
    1px dashed var(--border-strong);

  border-radius:
    10px;

  color:
    var(--muted);

  font-size:
    11px;

}


.load-more-area {

  display:
    flex;

  justify-content:
    center;

  margin-top:
    14px;

}


/* =========================================================
   DIALOG
========================================================= */

.contact-dialog {

  width:
    min(590px, calc(100% - 30px));

  padding:
    0;

  border:
    0;

  border-radius:
    16px;

  box-shadow:
    0 25px 70px rgba(17, 24, 39, .22);

}


.contact-dialog::backdrop {

  background:
    rgba(16, 20, 28, .45);

  backdrop-filter:
    blur(3px);

}


.contact-dialog {

  padding:
    24px;

}


.dialog-header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    15px;

}


.dialog-header h2 {

  margin:
    0;

}


.dialog-close {

  width:
    32px;

  height:
    32px;

  border:
    1px solid var(--border);

  border-radius:
    50%;

  background:
    white;

  font-size:
    20px;

  line-height:
    1;

}


.dialog-help {

  margin:
    12px 0;

  color:
    var(--muted);

  font-size:
    11px;

}


.contact-dialog textarea {

  width:
    100%;

  resize:
    vertical;

  min-height:
    170px;

  padding:
    12px;

  border-radius:
    10px;

  font-size:
    12px;

  line-height:
    1.55;

}


.dialog-status {

  min-height:
    24px;

  padding-top:
    5px;

  color:
    #267556;

  font-size:
    10px;

}


.dialog-actions {

  display:
    flex;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

}


/* =========================================================
   HIDDEN
========================================================= */

[hidden] {

  display:
    none !important;

}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1100px) {

  :root {
    --sidebar-width:
      190px;
  }


  .content-container {

    width:
      calc(100% - 30px);

  }


  .search-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .analyze-button {

    grid-column:
      span 2;

  }


  .kpi-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }


  .channel-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }


  .filters {

    align-items:
      stretch;

    flex-direction:
      column;

  }


  .filter-controls {

    justify-content:
      flex-start;

  }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 760px) {

  :root {
    --sidebar-width:
      0px;
  }


  .app-shell {

    display:
      block;

  }


  .sidebar {

    position:
      static;

    width:
      100%;

    height:
      auto;

    padding:
      13px 15px;

    border-right:
      0;

    border-bottom:
      1px solid var(--border);

  }


  .sidebar-footer {

    display:
      none;

  }


  .brand {

    padding:
      0 0 12px;

  }


  .sidebar-nav {

    flex-direction:
      row;

    overflow-x:
      auto;

  }


  .nav-item {

    flex:
      0 0 auto;

    height:
      38px;

    padding:
      0 10px;

    font-size:
      11px;

  }


  .main-content {

    grid-column:
      auto;

  }


  .topbar {

    display:
      none;

  }


  .content-container {

    width:
      calc(100% - 20px);

    padding-top:
      10px;

  }


  .search-panel,
  .dashboard-panel,
  .leads-panel {

    padding:
      20px 16px;

  }


  .search-grid {

    grid-template-columns:
      1fr;

  }


  .analyze-button {

    grid-column:
      auto;

  }


  .dashboard-heading {

    flex-direction:
      column;

  }


  .kpi-grid,
  .channel-grid,
  .opportunity-grid {

    grid-template-columns:
      1fr;

  }


  .filter-controls {

    flex-direction:
      column;

    align-items:
      stretch;

  }


  .mini-field,
  .search-filter {

    width:
      100%;

    max-width:
      none;

  }


  .mini-field select,
  .mini-field input {

    width:
      100%;

  }


  .lead-card {

    grid-template-columns:
      44px minmax(0, 1fr);

  }


  .lead-actions {

    grid-column:
      1 / -1;

    min-width:
      0;

    flex-direction:
      row;

    flex-wrap:
      wrap;

  }


  .lead-actions > * {

    flex:
      1;

  }


  .dialog-actions {

    flex-direction:
      column;

  }


  .dialog-actions > * {

    width:
      100%;

  }

}