:root {
  /* Identidade Prospecta Corban */
  --corban-bg: #050706;
  --corban-bg-2: #090c0a;
  --corban-panel: rgba(12, 16, 14, .78);
  --corban-panel-solid: #0e1310;
  --corban-border: rgba(190, 255, 103, .14);
  --corban-lime: #b8ff63;
  --corban-lime-soft: #86d43f;
  --corban-mint: #5df2c2;
  --corban-violet: #9b82ff;
  --corban-text: #f4f8f4;
  --corban-muted: #8e9c93;
  --corban-danger: #ff6b7d;

  /* Aplicação interna atual */
  --bg: #08101d;
  --panel: #101b2c;
  --panel2: #142238;
  --border: #23334d;
  --text: #f4f8fd;
  --muted: #8da0bb;
  --accent: #67a9ff;
  --success: #25c784;
  --danger: #ef6072;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted);
}

/* =========================================================
   LOGIN — IDENTIDADE PRÓPRIA PROSPECTA CORBAN
   ========================================================= */

.login-view {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 40%, rgba(28, 43, 32, .72) 0%, rgba(5, 7, 6, .25) 34%, transparent 58%),
    linear-gradient(135deg, #030504 0%, #080b09 44%, #050706 100%);
  color: var(--corban-text);
}

.login-view::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -8;
  opacity: .34;
  background-image:
    linear-gradient(rgba(124, 255, 107, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 255, 107, .025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center, black 0%, rgba(0,0,0,.85) 45%, transparent 88%);
}

.login-background {
  position: absolute;
  inset: 0;
  z-index: -4;
  overflow: hidden;
  pointer-events: none;
}

.aurora {
  position: absolute;
  border-radius: 999px;
  filter: blur(74px);
  opacity: .19;
  will-change: transform;
}

.aurora-one {
  width: 520px;
  height: 520px;
  left: -140px;
  top: -150px;
  background: var(--corban-lime);
  animation: aurora-one 15s ease-in-out infinite alternate;
}

.aurora-two {
  width: 620px;
  height: 620px;
  right: -210px;
  bottom: -260px;
  background: var(--corban-violet);
  opacity: .14;
  animation: aurora-two 19s ease-in-out infinite alternate;
}

.aurora-three {
  width: 360px;
  height: 360px;
  right: 20%;
  top: 10%;
  background: var(--corban-mint);
  opacity: .08;
  animation: aurora-three 12s ease-in-out infinite alternate;
}

.tech-grid {
  position: absolute;
  width: 180%;
  height: 150%;
  left: -40%;
  top: 47%;
  transform: perspective(680px) rotateX(68deg);
  transform-origin: center top;
  opacity: .26;
  background-image:
    linear-gradient(rgba(124, 255, 107, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 255, 107, .12) 1px, transparent 1px);
  background-size: 62px 62px;
  animation: grid-flow 9s linear infinite;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), transparent 72%);
}

.scan-line {
  position: absolute;
  inset: -20% 0 auto;
  height: 180px;
  opacity: .14;
  background: linear-gradient(to bottom, transparent, rgba(124, 255, 107, .2), transparent);
  animation: scan 8s linear infinite;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(124, 255, 107, .09);
  border-radius: 50%;
  animation: orbit-spin 25s linear infinite;
}

.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px dashed rgba(93, 242, 194, .08);
  border-radius: inherit;
}

.orbit::after {
  inset: 27%;
  border-style: solid;
  border-color: rgba(155, 130, 255, .08);
}

.orbit-one {
  width: 640px;
  height: 640px;
  left: -270px;
  top: 21%;
}

.orbit-two {
  width: 470px;
  height: 470px;
  right: -175px;
  top: -85px;
  animation-direction: reverse;
  animation-duration: 31s;
}

.orbit span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--corban-lime);
  box-shadow: 0 0 22px rgba(124, 255, 107, .8);
}

.orbit span:nth-child(1) { top: 12%; left: 28%; }
.orbit span:nth-child(2) { right: 7%; top: 48%; background: var(--corban-mint); }
.orbit span:nth-child(3) { left: 17%; bottom: 7%; background: var(--corban-violet); }

.data-stream {
  position: absolute;
  display: flex;
  gap: 36px;
  color: rgba(124, 255, 107, .18);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  white-space: nowrap;
}

.stream-one {
  top: 14%;
  left: -15%;
  animation: stream-right 22s linear infinite;
}

.stream-two {
  bottom: 17%;
  right: -15%;
  color: rgba(155, 130, 255, .18);
  animation: stream-left 26s linear infinite;
}

.floating-node {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--corban-lime);
  box-shadow:
    0 0 0 4px rgba(124, 255, 107, .04),
    0 0 22px rgba(124, 255, 107, .72);
  animation: node-float 7s ease-in-out infinite;
}

.node-a { left: 9%; top: 27%; animation-delay: -1s; }
.node-b { left: 20%; bottom: 19%; animation-delay: -4s; background: var(--corban-mint); }
.node-c { right: 11%; top: 31%; animation-delay: -2s; background: var(--corban-violet); }
.node-d { right: 21%; bottom: 13%; animation-delay: -5s; }
.node-e { left: 36%; top: 11%; animation-delay: -3s; background: var(--corban-mint); }
.node-f { right: 36%; bottom: 9%; animation-delay: -6s; background: var(--corban-violet); }

.tech-card {
  position: absolute;
  width: 150px;
  padding: 13px 15px;
  border: 1px solid rgba(124, 255, 107, .10);
  background: rgba(8, 12, 9, .38);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  color: rgba(236, 246, 237, .52);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
  animation: card-float 9s ease-in-out infinite;
}

.tech-card small,
.tech-card strong {
  display: block;
}

.tech-card small {
  color: rgba(124, 255, 107, .46);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
}

.tech-card strong {
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: .06em;
}

.tech-card i {
  display: block;
  width: 42px;
  height: 2px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--corban-lime), transparent);
  border-radius: 999px;
}

.tech-card-a {
  left: 7%;
  top: 14%;
  transform: rotate(-5deg);
}

.tech-card-b {
  right: 7%;
  bottom: 15%;
  animation-delay: -3s;
  transform: rotate(5deg);
}

.tech-card-c {
  right: 9%;
  top: 15%;
  animation-delay: -6s;
  transform: rotate(3deg);
}

.login-stage {
  position: relative;
  z-index: 3;
  width: min(100%, 1120px);
  min-height: 100vh;
  padding: 42px 24px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login-brandmark {
  position: absolute;
  top: 32px;
  left: 38px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(239, 247, 239, .67);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .22em;
}

.brand-signal {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--corban-lime);
  box-shadow: 0 0 18px rgba(124, 255, 107, .68);
  transform: rotate(45deg);
}

.futuristic-card {
  position: relative;
  width: min(410px, calc(100vw - 36px));
  padding: 36px 36px 28px;
  overflow: hidden;
  border: 1px solid rgba(200, 255, 139, .15);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(20, 26, 22, .86), rgba(9, 13, 10, .70)),
    rgba(7, 10, 8, .72);
  backdrop-filter: blur(22px) saturate(128%);
  box-shadow:
    0 36px 120px rgba(0, 0, 0, .48),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.futuristic-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(124, 255, 107, .48),
    transparent 22%,
    transparent 70%,
    rgba(155, 130, 255, .30)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.login-card-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  left: 50%;
  top: -190px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--corban-lime);
  filter: blur(86px);
  opacity: .12;
  pointer-events: none;
}

.corban-symbol {
  position: relative;
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
}

.symbol-core {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--corban-lime), var(--corban-mint));
  box-shadow: 0 0 30px rgba(124, 255, 107, .48);
  transform: rotate(45deg);
}

.symbol-ring {
  position: absolute;
  border: 1px solid rgba(124, 255, 107, .30);
  border-radius: 50%;
}

.ring-a {
  inset: 10px;
  border-style: dashed;
  animation: orbit-spin 9s linear infinite;
}

.ring-b {
  inset: 0;
  border-color: rgba(155, 130, 255, .18);
  animation: orbit-spin 13s linear infinite reverse;
}

.login-heading {
  text-align: center;
}

.login-product {
  color: rgba(236, 245, 236, .62);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .30em;
}

.login-heading h1 {
  margin: 4px 0 7px;
  color: var(--corban-text);
  font-size: 43px;
  line-height: 1;
  letter-spacing: .12em;
  font-weight: 800;
}

.login-heading h1::after {
  content: ".";
  color: var(--corban-lime);
}

.login-heading p {
  margin: 0 auto 23px;
  color: var(--corban-muted);
  font-size: 11px;
  line-height: 1.5;
}

.login-field {
  margin-top: 15px;
}

.login-field > span {
  color: rgba(225, 237, 227, .65);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
}

.input-shell {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  z-index: 2;
  width: 20px;
  color: rgba(124, 255, 107, .55);
  font-size: 11px;
  text-align: center;
  pointer-events: none;
}

.login-field input {
  height: 49px;
  padding: 0 15px 0 44px;
  color: var(--corban-text);
  background: rgba(3, 6, 4, .56);
  border: 1px solid rgba(183, 211, 185, .12);
  border-radius: 12px;
  outline: 0;
  caret-color: var(--corban-lime);
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.login-field input::placeholder {
  color: rgba(144, 158, 148, .48);
}

.login-field input:focus {
  border-color: rgba(124, 255, 107, .44);
  background: rgba(5, 9, 6, .80);
  box-shadow:
    0 0 0 3px rgba(124, 255, 107, .06),
    0 0 30px rgba(124, 255, 107, .04);
}

.login-submit {
  height: 50px;
  margin-top: 22px;
  padding: 0 17px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #0b100c;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(105deg, #a9f855 0%, #c8ff84 48%, #6ef1c9 100%);
  box-shadow:
    0 12px 34px rgba(124, 255, 107, .12),
    inset 0 1px 0 rgba(255, 255, 255, .45);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .13em;
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

.login-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 18px 42px rgba(124, 255, 107, .18),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}

.login-submit:disabled {
  opacity: .62;
  cursor: wait;
}

.login-submit b {
  font-size: 17px;
  line-height: 1;
}

.login-view .error {
  margin-top: 14px;
  padding: 11px 13px;
  color: #ffc1ca;
  background: rgba(255, 75, 100, .09);
  border: 1px solid rgba(255, 107, 125, .24);
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.45;
}

.login-meta {
  margin-top: 21px;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid rgba(194, 219, 197, .08);
  color: rgba(151, 168, 155, .52);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
}

.login-meta span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.status-dot {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: var(--corban-lime);
  box-shadow: 0 0 12px rgba(124, 255, 107, .8);
  animation: status-pulse 2s ease-in-out infinite;
}

.login-footnote {
  position: absolute;
  bottom: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(151, 164, 154, .32);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .15em;
}

.login-footnote i {
  width: 28px;
  height: 1px;
  background: rgba(124, 255, 107, .24);
}

/* Animações do login */
@keyframes grid-flow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 62px, 62px 0; }
}

@keyframes scan {
  0% { transform: translateY(-160px); }
  100% { transform: translateY(120vh); }
}

@keyframes aurora-one {
  from { transform: translate3d(-30px, -20px, 0) scale(.92); }
  to { transform: translate3d(120px, 90px, 0) scale(1.16); }
}

@keyframes aurora-two {
  from { transform: translate3d(20px, 30px, 0) scale(.95); }
  to { transform: translate3d(-150px, -70px, 0) scale(1.12); }
}

@keyframes aurora-three {
  from { transform: translate3d(0, 0, 0) scale(.8); }
  to { transform: translate3d(-120px, 110px, 0) scale(1.2); }
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes stream-right {
  from { transform: translateX(-8vw); }
  to { transform: translateX(115vw); }
}

@keyframes stream-left {
  from { transform: translateX(8vw); }
  to { transform: translateX(-115vw); }
}

@keyframes node-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: .55; }
  50% { transform: translateY(-28px) scale(1.35); opacity: 1; }
}

@keyframes card-float {
  0%, 100% { translate: 0 0; opacity: .48; }
  50% { translate: 0 -18px; opacity: .82; }
}

@keyframes status-pulse {
  0%, 100% { opacity: .55; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* Acessibilidade: se o sistema pedir menos movimento */
@media (prefers-reduced-motion: reduce) {
  .aurora,
  .tech-grid,
  .scan-line,
  .orbit,
  .data-stream,
  .floating-node,
  .tech-card,
  .symbol-ring,
  .status-dot {
    animation: none !important;
  }
}

/* =========================================================
   ÁREA INTERNA EXISTENTE — MANTIDA NESTA ETAPA
   ========================================================= */

.field {
  display: grid;
  gap: 7px;
  margin-top: 17px;
}

.field > span {
  font-size: 11px;
  font-weight: 800;
  color: #cbd7e6;
}

.field small {
  color: var(--muted);
  font-size: 10px;
}

input,
select {
  width: 100%;
  height: 45px;
  padding: 0 13px;
  color: var(--text);
  background: #0a1423;
  border: 1px solid #263851;
  border-radius: 11px;
  outline: 0;
}

input:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(103, 169, 255, .1);
}

.btn {
  min-height: 41px;
  padding: 0 15px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 800;
}

.btn.primary {
  background: linear-gradient(180deg, #6aadff, #397fd8);
  color: #06111f;
}

.btn.secondary {
  background: #132034;
  border-color: var(--border);
  color: #d7e4f3;
}

.btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: #bdcce0;
}

.btn.full {
  width: 100%;
}

.error {
  margin-top: 14px;
  padding: 11px 13px;
  color: #ffc3ca;
  background: rgba(239, 96, 114, .1);
  border: 1px solid rgba(239, 96, 114, .25);
  border-radius: 10px;
  font-size: 11px;
}

.app-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 265px 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 17px;
  display: flex;
  flex-direction: column;
  background: #091423;
  border-right: 1px solid var(--border);
}

.side-brand {
  padding: 4px 9px 26px;
}

.side-brand small {
  display: block;
  color: #7289a7;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

.side-brand strong {
  display: block;
  margin-top: 5px;
  font-size: 21px;
}

.side-brand span {
  color: var(--accent);
}

.sidebar nav {
  display: grid;
  gap: 6px;
}

.nav {
  width: 100%;
  min-height: 45px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  color: #98acc5;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 11px;
}

.nav.active,
.nav:hover:not(.disabled) {
  color: #f4f8fd;
  background: #142239;
  border-color: #203754;
}

.nav small {
  margin-left: auto;
  color: #5d718b;
  font-size: 9px;
}

.nav.disabled {
  opacity: .45;
  cursor: default;
}

.side-bottom {
  margin-top: auto;
}

.user-chip {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 11px;
  margin-bottom: 9px;
  background: #111e31;
  border: 1px solid #21344e;
  border-radius: 13px;
}

.avatar {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  flex: 0 0 35px;
  background: rgba(103, 169, 255, .12);
  border-radius: 10px;
  color: var(--accent);
  font-weight: 900;
  font-size: 11px;
}

.user-chip > div:last-child {
  min-width: 0;
}

.user-chip strong,
.user-chip small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chip strong {
  font-size: 11px;
}

.user-chip small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.main {
  min-width: 0;
  background:
    radial-gradient(circle at 70% -15%, rgba(70, 132, 213, .1), transparent 28%),
    var(--bg);
}

.topbar {
  min-height: 96px;
  padding: 22px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.topbar h2 {
  margin: 6px 0 0;
  font-size: 26px;
}

.kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--accent);
}

.actions {
  display: flex;
  gap: 9px;
  align-items: center;
}

.content {
  padding: 28px 32px 44px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.stats article {
  min-height: 142px;
  padding: 21px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, #111e31, #0e192a);
  border: 1px solid var(--border);
  border-radius: 17px;
}

.stats article.accent {
  border-color: rgba(103, 169, 255, .3);
  background: linear-gradient(145deg, rgba(68, 132, 216, .14), #101b2d);
}

.stats article small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.stats article strong {
  margin-top: 7px;
  font-size: 40px;
  letter-spacing: -.04em;
}

.stats article strong.word {
  font-size: 27px;
  color: var(--accent);
}

.stats article span {
  margin-top: 5px;
  color: #71849e;
  font-size: 10px;
}

.panel {
  margin-top: 19px;
  background: #0f1a2b;
  border: 1px solid var(--border);
  border-radius: 17px;
  overflow: hidden;
}

.panel-head {
  min-height: 80px;
  padding: 18px 21px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--border);
}

.panel-head h3 {
  margin: 0;
  font-size: 17px;
}

.panel-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.link-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 800;
  font-size: 11px;
}

.company-list {
  padding: 7px 20px 16px;
}

.company-row {
  min-height: 62px;
  padding: 11px 4px;
  display: grid;
  grid-template-columns: 1.4fr .7fr .8fr;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid rgba(37, 53, 78, .6);
}

.company-row:last-child {
  border-bottom: 0;
}

.company-row strong,
.company-row small {
  display: block;
}

.company-row strong {
  font-size: 12px;
}

.company-row small {
  margin-top: 3px;
  color: #6e839f;
  font-size: 9px;
}

.badge {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.badge.active {
  color: #62e7b0;
  background: rgba(37, 199, 132, .1);
  border: 1px solid rgba(37, 199, 132, .24);
}

.badge.inactive {
  color: #ff9eaa;
  background: rgba(239, 96, 114, .1);
  border: 1px solid rgba(239, 96, 114, .24);
}

.date {
  color: #7d91ad;
  font-size: 10px;
  text-align: right;
}

.empty {
  padding: 50px 22px;
  text-align: center;
}

.empty-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 13px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(103, 169, 255, .08);
  border: 1px solid rgba(103, 169, 255, .18);
  border-radius: 14px;
  font-size: 23px;
}

.empty h4 {
  margin: 0;
}

.empty p {
  margin: 6px 0 17px;
  color: var(--muted);
  font-size: 11px;
}

.search {
  width: 250px;
  height: 41px;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 14px 21px;
  text-align: left;
  border-bottom: 1px solid rgba(35, 51, 77, .72);
}

th {
  color: #7187a3;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

td {
  font-size: 11px;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.mono {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8398b3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
}

.warning {
  margin: 22px 32px 0;
  padding: 13px 15px;
  color: #ffd79e;
  background: rgba(241, 180, 76, .1);
  border: 1px solid rgba(241, 180, 76, .25);
  border-radius: 11px;
  font-size: 11px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 7, 14, .8);
  backdrop-filter: blur(8px);
}

.modal {
  width: min(700px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: #0f1a2b;
  border: 1px solid #2b3f5c;
  border-radius: 19px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .45);
}

.modal-head {
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.modal-head h3 {
  margin: 5px 0 0;
}

.icon-btn {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  color: #9fb1c8;
  background: #111e31;
  border: 1px solid #293b55;
  border-radius: 9px;
}

.form-section {
  padding: 20px 22px 2px;
}

.form-section + .form-section {
  margin-top: 14px;
  border-top: 1px solid rgba(38, 54, 79, .7);
}

.form-section h4 {
  margin: 0;
  font-size: 12px;
}

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

.full-col {
  grid-column: 1 / -1;
}

.modal .error {
  margin: 16px 22px 0;
}

.modal-actions {
  margin-top: 22px;
  padding: 17px 22px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid var(--border);
}

.toast-container {
  position: fixed;
  z-index: 100;
  right: 17px;
  top: 17px;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  width: min(340px, calc(100vw - 34px));
  padding: 12px 14px;
  background: #132137;
  border: 1px solid #29415f;
  border-radius: 11px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  font-size: 11px;
}

.toast.success {
  border-color: rgba(37, 199, 132, .35);
}

.toast.error {
  border-color: rgba(239, 96, 114, .35);
}

/* Responsivo */
@media (max-width: 950px) {
  .tech-card {
    display: none;
  }

  .orbit-one {
    left: -430px;
  }

  .orbit-two {
    right: -330px;
  }

  .login-brandmark {
    left: 24px;
    top: 24px;
  }

  .login-footnote {
    display: none;
  }

  .app-view {
    grid-template-columns: 82px 1fr;
  }

  .side-brand small,
  .side-brand strong span,
  .nav span,
  .nav small,
  .user-chip > div:last-child {
    display: none;
  }

  .side-brand strong {
    font-size: 0;
  }

  .side-brand strong::before {
    content: "PC";
    font-size: 20px;
    color: var(--accent);
  }

  .nav {
    justify-content: center;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .login-stage {
    padding: 76px 18px 34px;
  }

  .login-brandmark {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .futuristic-card {
    padding: 31px 25px 24px;
  }

  .login-heading h1 {
    font-size: 36px;
  }

  .data-stream {
    opacity: .45;
  }

  .app-view {
    display: block;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .sidebar nav {
    display: flex;
    margin-left: auto;
  }

  .side-bottom {
    display: none;
  }

  .topbar,
  .content {
    padding-left: 17px;
    padding-right: 17px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .panel-head,
  .companies-head,
  .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .search {
    width: 100%;
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .full-col {
    grid-column: auto;
  }

  .company-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .date {
    text-align: left;
  }
}

/* Ajuste solicitado — rodapé do modal de login */
.login-meta.login-meta-centered {
  justify-content: center;
  text-align: center;
}

.login-meta.login-meta-centered span {
  display: block;
  width: 100%;
  text-align: center;
}

/* Ajuste final — assinatura Prospecta Prime centralizada */
.futuristic-card .login-meta.login-meta-centered {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.futuristic-card .login-meta.login-meta-centered .prospecta-signature {
  width: auto !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: center !important;
  color: rgba(168, 181, 171, .62);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
}

.futuristic-card .login-meta.login-meta-centered .prospecta-signature sup {
  position: relative;
  top: -1px;
  color: rgba(124, 255, 107, .72);
  font-size: 6px;
  line-height: 1;
}

/* Ajuste solicitado — distância inferior de 0,3 cm */
.futuristic-card {
  padding-bottom: 0.3cm !important;
}

/* Ícone próprio de visualizar senha — Prospecta Corban */
.input-shell-password input {
  padding-right: 52px;
}

.password-vision-toggle {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.password-vision-toggle:hover {
  background: rgba(124, 255, 107, .08);
}

.password-vision-toggle:focus-visible {
  outline: none;
  background: rgba(124, 255, 107, .10);
  box-shadow: 0 0 0 2px rgba(124, 255, 107, .12);
}

.password-vision-toggle:active {
  transform: translateY(-50%) scale(.96);
}

.corban-eye {
  position: relative;
  width: 18px;
  height: 12px;
  display: block;
}

.eye-outline {
  position: absolute;
  inset: 0;
  border: 1.6px solid rgba(124, 255, 107, .74);
  border-radius: 100% / 88%;
  box-shadow: 0 0 12px rgba(124, 255, 107, .12);
}

.eye-pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(124, 255, 107, .86);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(124, 255, 107, .22);
  transition: opacity .18s ease, transform .18s ease;
}

.eye-slash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 1.8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(155, 130, 255, .95), rgba(124, 255, 107, .88));
  transform: translate(-50%, -50%) rotate(-38deg);
  box-shadow: 0 0 10px rgba(155, 130, 255, .22);
  transition: opacity .18s ease, transform .18s ease;
}

.password-vision-toggle.is-open .eye-slash {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-38deg) scale(.72);
}

.password-vision-toggle.is-open .eye-pupil {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

.password-vision-toggle:not(.is-open) .eye-pupil {
  opacity: .72;
}


/* =========================================================
   PAINEL CORBAN — IDENTIDADE VISUAL + CLARO/ESCURO
   ========================================================= */

html[data-app-theme="dark"] {
  --app-bg: #070a08;
  --app-bg-soft: #0a0e0b;
  --app-sidebar: #090d0a;
  --app-surface: #0e1310;
  --app-surface-2: #111813;
  --app-surface-3: #151d17;
  --app-border: rgba(124, 255, 107, .12);
  --app-border-strong: rgba(124, 255, 107, .24);
  --app-text: #eef5ef;
  --app-text-strong: #ffffff;
  --app-muted: #87958b;
  --app-muted-2: #637067;
  --app-accent: #b8ff63;
  --app-accent-soft: rgba(124, 255, 107, .10);
  --app-mint: #5df2c2;
  --app-violet: #9b82ff;
  --app-danger: #ff7383;
  --app-danger-soft: rgba(255, 115, 131, .10);
  --app-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --app-shadow-soft: 0 12px 36px rgba(0, 0, 0, .18);
  --app-primary-text: #0a100b;
  --app-control: #121914;
  --app-control-hover: #172019;
  --app-table-hover: rgba(124, 255, 107, .035);
}

html[data-app-theme="light"] {
  --app-bg: #f4f5f1;
  --app-bg-soft: #eef0eb;
  --app-sidebar: #fbfcfa;
  --app-surface: #ffffff;
  --app-surface-2: #f8f9f6;
  --app-surface-3: #f1f4ee;
  --app-border: #dfe4dc;
  --app-border-strong: #c9d2c5;
  --app-text: #1c211d;
  --app-text-strong: #0e120f;
  --app-muted: #6f7a71;
  --app-muted-2: #939c95;
  --app-accent: #5f8b3d;
  --app-accent-soft: #edf4e8;
  --app-mint: #2f9b7a;
  --app-violet: #7565b0;
  --app-danger: #bd4657;
  --app-danger-soft: #fff0f2;
  --app-shadow: 0 18px 45px rgba(48, 57, 49, .08);
  --app-shadow-soft: 0 8px 24px rgba(48, 57, 49, .06);
  --app-primary-text: #ffffff;
  --app-control: #ffffff;
  --app-control-hover: #f4f6f2;
  --app-table-hover: #f5f8f2;
}

.app-view {
  --sidebar-width: 278px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  background: var(--app-bg);
  color: var(--app-text);
  transition: grid-template-columns .26s cubic-bezier(.2,.8,.2,1), background .22s ease, color .22s ease;
}

.app-view.sidebar-collapsed {
  --sidebar-width: 86px;
}

.app-view .sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: var(--sidebar-width);
  height: 100vh;
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--app-text);
  background: var(--app-sidebar);
  border-right: 1px solid var(--app-border);
  transition: width .26s cubic-bezier(.2,.8,.2,1), background .22s ease, border-color .22s ease;
}

html[data-app-theme="dark"] .app-view .sidebar {
  background:
    radial-gradient(circle at 12% 8%, rgba(124,255,107,.055), transparent 23%),
    linear-gradient(180deg, #0a0e0b 0%, #080b09 100%);
}

.sidebar-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

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

.side-brand-symbol {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--app-border-strong);
  border-radius: 11px;
  background: var(--app-accent-soft);
}

.side-brand-symbol span {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--app-accent);
  transform: rotate(45deg);
  box-shadow: 0 0 18px color-mix(in srgb, var(--app-accent) 44%, transparent);
}

.side-brand-symbol i {
  position: absolute;
  inset: 5px;
  border: 1px dashed color-mix(in srgb, var(--app-accent) 30%, transparent);
  border-radius: 50%;
}

.side-brand-copy {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .16s ease, transform .22s ease, width .22s ease;
}

.side-brand-copy small {
  display: block;
  color: var(--app-muted);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .18em;
}

.side-brand-copy strong {
  display: block;
  margin-top: 3px;
  color: var(--app-text-strong);
  font-size: 20px;
  line-height: 1;
  letter-spacing: -.035em;
}

.side-brand-copy strong span {
  color: var(--app-accent);
}

.sidebar-toggle {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  color: var(--app-muted);
  background: var(--app-control);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .22s ease;
}

.sidebar-toggle:hover {
  color: var(--app-accent);
  border-color: var(--app-border-strong);
  background: var(--app-control-hover);
}

.sidebar-toggle-glyph {
  position: relative;
  width: 15px;
  height: 13px;
  display: block;
}

.sidebar-toggle-glyph::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.4px solid currentColor;
  border-radius: 4px;
}

.sidebar-toggle-glyph i:first-child {
  position: absolute;
  left: 4px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: currentColor;
  opacity: .6;
}

.sidebar-toggle-glyph i:last-child {
  position: absolute;
  right: 3px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-left: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .2s ease;
}

.sidebar-collapsed .sidebar-toggle-glyph i:last-child {
  transform: translateY(-50%) rotate(225deg);
}

.sidebar-section-label {
  margin: 19px 10px 10px;
  color: var(--app-muted-2);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .18em;
  white-space: nowrap;
  transition: opacity .14s ease;
}

.sidebar-nav {
  display: grid;
  gap: 6px;
}

.app-view .nav {
  position: relative;
  width: 100%;
  min-height: 46px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--app-muted);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.app-view .nav:hover:not(.disabled) {
  color: var(--app-text);
  background: var(--app-control-hover);
  border-color: var(--app-border);
}

.app-view .nav.active {
  color: var(--app-text-strong);
  background: var(--app-accent-soft);
  border-color: var(--app-border-strong);
}

.app-view .nav.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 0 999px 999px 0;
  background: var(--app-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--app-accent) 34%, transparent);
}

.nav-icon {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  color: currentColor;
}

.nav-icon svg,
.logout-icon svg,
.toolbar-icon svg,
.theme-icon svg,
.search-shell svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-view .nav.active .nav-icon {
  color: var(--app-accent);
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 720;
}

.nav-badge {
  margin-left: auto;
  padding: 3px 6px;
  color: var(--app-muted-2);
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  font-size: 7px;
  font-weight: 800;
  white-space: nowrap;
}

.app-view .nav.disabled {
  opacity: .44;
  cursor: default;
}

.sidebar-orbit {
  position: absolute;
  left: -125px;
  bottom: 132px;
  width: 270px;
  height: 270px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 8%, transparent);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

html[data-app-theme="dark"] .sidebar-orbit {
  opacity: 1;
}

.sidebar-orbit::before,
.sidebar-orbit::after {
  content: "";
  position: absolute;
  border: 1px dashed color-mix(in srgb, var(--app-mint) 10%, transparent);
  border-radius: 50%;
}

.sidebar-orbit::before { inset: 38px; }
.sidebar-orbit::after { inset: 82px; border-style: solid; border-color: color-mix(in srgb, var(--app-violet) 10%, transparent); }
.sidebar-orbit span { position:absolute; width:5px; height:5px; right:32px; top:76px; border-radius:50%; background:var(--app-accent); box-shadow:0 0 14px color-mix(in srgb, var(--app-accent) 45%, transparent); }
.sidebar-orbit i { position:absolute; width:4px; height:4px; right:79px; bottom:49px; border-radius:50%; background:var(--app-mint); }

.side-bottom {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: grid;
  gap: 8px;
}

.app-view .user-chip {
  min-height: 58px;
  margin: 0;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  overflow: hidden;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  box-shadow: var(--app-shadow-soft);
}

.app-view .avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--app-accent);
  background: var(--app-accent-soft);
  border: 1px solid var(--app-border-strong);
  font-size: 10px;
  font-weight: 900;
}

.user-details {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .14s ease;
}

.user-details strong,
.user-details small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-details strong {
  color: var(--app-text-strong);
  font-size: 11px;
}

.user-details small {
  margin-top: 3px;
  color: var(--app-muted);
  font-size: 8px;
}

.logout-button {
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--app-muted);
  background: transparent;
  border: 1px solid var(--app-border);
  border-radius: 11px;
  font-weight: 800;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.logout-button:hover {
  color: var(--app-danger);
  border-color: color-mix(in srgb, var(--app-danger) 26%, var(--app-border));
  background: var(--app-danger-soft);
}

.logout-icon {
  width: 18px;
  height: 18px;
}

.logout-label {
  font-size: 11px;
}

.sidebar-collapsed .side-brand-copy,
.sidebar-collapsed .sidebar-section-label,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-badge,
.sidebar-collapsed .user-details,
.sidebar-collapsed .logout-label {
  display: none;
}

.sidebar-collapsed .sidebar-header {
  flex-direction: column;
  justify-content: flex-start;
  min-height: 86px;
}

.sidebar-collapsed .side-brand {
  justify-content: center;
}

.sidebar-collapsed .sidebar-nav {
  margin-top: 8px;
}

.sidebar-collapsed .nav,
.sidebar-collapsed .logout-button {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-collapsed .nav::after,
.sidebar-collapsed .logout-button::after {
  content: attr(data-label);
  position: absolute;
  left: 65px;
  z-index: 50;
  padding: 7px 9px;
  opacity: 0;
  visibility: hidden;
  color: var(--app-text);
  background: var(--app-surface-3);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: var(--app-shadow-soft);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

.sidebar-collapsed .nav:hover::after,
.sidebar-collapsed .logout-button:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.sidebar-collapsed .logout-button { position: relative; }
.sidebar-collapsed .user-chip { justify-content: center; padding: 8px; }
.sidebar-collapsed .sidebar-orbit { display: none; }

.app-view .main {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--app-text);
  background: var(--app-bg);
  transition: background .22s ease, color .22s ease;
}

html[data-app-theme="dark"] .app-view .main::before {
  content: "";
  position: fixed;
  width: 480px;
  height: 480px;
  right: -180px;
  top: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155,130,255,.07), transparent 68%);
  pointer-events: none;
}

html[data-app-theme="dark"] .app-view .main::after {
  content: "";
  position: fixed;
  width: 380px;
  height: 380px;
  left: 36%;
  bottom: -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93,242,194,.045), transparent 70%);
  pointer-events: none;
}

.app-view .topbar {
  position: relative;
  z-index: 5;
  min-height: 94px;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-bg) 88%, transparent);
  border-bottom: 1px solid var(--app-border);
  backdrop-filter: blur(14px);
  transition: background .22s ease, border-color .22s ease;
}

.topbar-title .kicker,
.app-view .kicker {
  color: var(--app-accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .19em;
}

.topbar-title h2,
.app-view .topbar h2 {
  margin: 6px 0 0;
  color: var(--app-text-strong);
  font-size: 25px;
  letter-spacing: -.035em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.theme-toggle,
.app-view .toolbar-button {
  height: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 11px;
}

.theme-toggle {
  padding: 0 13px;
  color: var(--app-muted);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  font-weight: 800;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.theme-toggle:hover {
  color: var(--app-text);
  background: var(--app-control-hover);
  border-color: var(--app-border-strong);
}

.theme-icon {
  width: 17px;
  height: 17px;
  display: none;
  color: var(--app-accent);
}

.theme-toggle.is-dark .theme-sun { display: block; }
.theme-toggle:not(.is-dark) .theme-moon { display: block; }
.theme-toggle-label { font-size: 10px; white-space: nowrap; }

.app-view .btn {
  transition: transform .18s ease, filter .18s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.app-view .btn.primary {
  color: var(--app-primary-text);
  background: var(--app-accent);
  border: 1px solid color-mix(in srgb, var(--app-accent) 72%, var(--app-border));
  box-shadow: none;
}

html[data-app-theme="dark"] .app-view .btn.primary {
  background: linear-gradient(105deg, #a9f855 0%, #c8ff84 48%, #6ef1c9 100%);
  box-shadow: 0 10px 28px rgba(124,255,107,.10);
}

.app-view .btn.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.app-view .btn.secondary {
  color: var(--app-text);
  background: var(--app-control);
  border: 1px solid var(--app-border);
}

.app-view .btn.secondary:hover:not(:disabled) {
  background: var(--app-control-hover);
  border-color: var(--app-border-strong);
}

.toolbar-icon {
  width: 16px;
  height: 16px;
}

.toolbar-plus {
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
}

.app-view .content {
  position: relative;
  z-index: 2;
  padding: 28px 32px 44px;
}

.dashboard-intro {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.dashboard-eyebrow {
  color: var(--app-muted-2);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .18em;
}

.dashboard-intro h3 {
  margin: 5px 0 3px;
  color: var(--app-text-strong);
  font-size: 17px;
  letter-spacing: -.02em;
}

.dashboard-intro p {
  margin: 0;
  color: var(--app-muted);
  font-size: 10px;
}

.system-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--app-muted-2);
  font-size: 7px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .13em;
}

.system-pulse span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-accent);
}

html[data-app-theme="dark"] .system-pulse span {
  box-shadow: 0 0 12px rgba(124,255,107,.55);
  animation: app-status-pulse 2s ease-in-out infinite;
}

.system-pulse i { font-style: normal; }

@keyframes app-status-pulse {
  0%,100% { opacity:.45; transform:scale(.8); }
  50% { opacity:1; transform:scale(1.15); }
}

.app-view .stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.app-view .stats article {
  position: relative;
  min-height: 142px;
  padding: 19px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 17px;
  box-shadow: var(--app-shadow-soft);
  transition: transform .18s ease, border-color .18s ease, background .22s ease, box-shadow .22s ease;
}

.app-view .stats article:hover {
  transform: translateY(-2px);
  border-color: var(--app-border-strong);
}

html[data-app-theme="dark"] .app-view .stats article {
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--app-surface-2) 94%, var(--stat-accent, var(--app-accent)) 6%), var(--app-surface));
}

.app-view .stats article::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stat-accent, var(--app-accent)), transparent);
  opacity: .7;
}

html[data-app-theme="dark"] .app-view .stats article::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -55px;
  top: -55px;
  border-radius: 50%;
  background: var(--stat-accent, var(--app-accent));
  filter: blur(42px);
  opacity: .055;
}

.stat-company { --stat-accent: var(--app-accent); }
.stat-active { --stat-accent: var(--app-mint); }
.stat-license { --stat-accent: var(--app-violet); }
.stat-users { --stat-accent: color-mix(in srgb, var(--app-accent) 60%, var(--app-mint)); }

.stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-view .stats article small {
  color: var(--app-muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.stat-code {
  color: var(--stat-accent, var(--app-accent));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 8px;
  font-weight: 900;
  opacity: .58;
}

.app-view .stats article > strong {
  margin-top: 8px;
  color: var(--app-text-strong);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.045em;
}

.app-view .stats article > span:last-child {
  margin-top: 7px;
  color: var(--app-muted);
  font-size: 9px;
}

.app-view .panel {
  margin-top: 18px;
  overflow: hidden;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 17px;
  box-shadow: var(--app-shadow-soft);
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.app-view .panel-head {
  min-height: 80px;
  padding: 18px 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid var(--app-border);
}

.app-view .panel-head h3 {
  margin: 0;
  color: var(--app-text-strong);
  font-size: 15px;
}

.app-view .panel-head p {
  margin: 4px 0 0;
  color: var(--app-muted);
  font-size: 10px;
}

.app-view .link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: var(--app-accent);
  background: transparent;
  border: 0;
  font-size: 9px;
  font-weight: 900;
}

.app-view .link-btn span {
  transition: transform .15s ease;
}

.app-view .link-btn:hover span {
  transform: translateX(3px);
}

.app-view .company-list {
  padding: 7px 20px 16px;
}

.app-view .company-row {
  min-height: 64px;
  padding: 11px 4px;
  display: grid;
  grid-template-columns: 1.4fr .7fr .8fr;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--app-border);
}

.app-view .company-row:last-child { border-bottom: 0; }
.app-view .company-row strong { color: var(--app-text-strong); font-size: 11px; }
.app-view .company-row small { margin-top: 3px; color: var(--app-muted); font-size: 8px; }
.app-view .date { color: var(--app-muted); font-size: 9px; text-align: right; }

.app-view .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.app-view .badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.app-view .badge.active {
  color: var(--app-mint);
  background: color-mix(in srgb, var(--app-mint) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-mint) 24%, transparent);
}

.app-view .badge.inactive {
  color: var(--app-danger);
  background: var(--app-danger-soft);
  border: 1px solid color-mix(in srgb, var(--app-danger) 22%, transparent);
}

.app-view .empty {
  padding: 52px 22px;
  text-align: center;
}

.corban-empty-icon {
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  color: var(--app-accent);
  background: var(--app-accent-soft);
  border: 1px solid var(--app-border-strong);
  border-radius: 15px;
}

.corban-empty-icon span {
  width: 13px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  transform: rotate(45deg);
}

.corban-empty-icon i {
  position: absolute;
  inset: 8px;
  border: 1px dashed color-mix(in srgb, var(--app-accent) 34%, transparent);
  border-radius: 50%;
}

.app-view .empty h4 { margin: 0; color: var(--app-text-strong); }
.app-view .empty p { margin: 6px 0 17px; color: var(--app-muted); font-size: 10px; }

.search-shell {
  width: 260px;
  height: 41px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  color: var(--app-muted);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 11px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.search-shell:focus-within {
  border-color: var(--app-border-strong);
  box-shadow: 0 0 0 3px var(--app-accent-soft);
}

.search-shell > span {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--app-muted);
}

.app-view .search-shell .search {
  width: 100%;
  height: 37px;
  padding: 0;
  color: var(--app-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.app-view .search::placeholder { color: var(--app-muted-2); }

.app-view .table-wrap { overflow-x: auto; }
.app-view table { width: 100%; border-collapse: collapse; }
.app-view th,
.app-view td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--app-border); }
.app-view th { color: var(--app-muted-2); background: var(--app-surface-2); font-size: 7px; font-weight: 900; letter-spacing: .10em; text-transform: uppercase; }
.app-view td { color: var(--app-text); font-size: 10px; }
.app-view tbody tr { transition: background .14s ease; }
.app-view tbody tr:hover { background: var(--app-table-hover); }
.app-view tbody tr:last-child td { border-bottom: 0; }
.app-view .mono { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--app-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 8px; }

.app-view .warning {
  margin: 22px 32px 0;
  padding: 13px 15px;
  color: var(--app-danger);
  background: var(--app-danger-soft);
  border: 1px solid color-mix(in srgb, var(--app-danger) 22%, transparent);
  border-radius: 11px;
  font-size: 10px;
}

/* Modal acompanha o tema do painel, mas não interfere no login */
#company-modal.modal-backdrop {
  background: rgba(4, 7, 5, .66);
  backdrop-filter: blur(8px);
}

#company-modal .modal {
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  box-shadow: var(--app-shadow);
}

#company-modal .modal-head,
#company-modal .modal-actions,
#company-modal .form-section + .form-section {
  border-color: var(--app-border);
}

#company-modal .modal-head h3,
#company-modal .form-section h4 { color: var(--app-text-strong); }
#company-modal .kicker { color: var(--app-accent); }
#company-modal .field > span { color: var(--app-text); }
#company-modal .field small { color: var(--app-muted); }

#company-modal input,
#company-modal select {
  color: var(--app-text);
  background: var(--app-control);
  border-color: var(--app-border);
}

#company-modal input:focus,
#company-modal select:focus {
  border-color: var(--app-border-strong);
  box-shadow: 0 0 0 3px var(--app-accent-soft);
}

#company-modal .icon-btn {
  color: var(--app-muted);
  background: var(--app-control);
  border-color: var(--app-border);
}

#company-modal .btn.primary {
  color: var(--app-primary-text);
  background: var(--app-accent);
  border-color: var(--app-border-strong);
}

html[data-app-theme="dark"] #company-modal .btn.primary {
  background: linear-gradient(105deg, #a9f855, #6ef1c9);
}

#company-modal .btn.secondary {
  color: var(--app-text);
  background: var(--app-control);
  border-color: var(--app-border);
}

/* Toasts também entram na identidade Corban */
.toast {
  color: var(--app-text);
  background: var(--app-surface-3);
  border-color: var(--app-border-strong);
  box-shadow: var(--app-shadow);
}

.toast.success { border-color: color-mix(in srgb, var(--app-mint) 35%, var(--app-border)); }
.toast.error { border-color: color-mix(in srgb, var(--app-danger) 35%, var(--app-border)); }

@media (max-width: 1120px) {
  .app-view .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .theme-toggle-label { display: none; }
  .theme-toggle { width: 42px; padding: 0; }
}

@media (max-width: 820px) {
  .app-view,
  .app-view.sidebar-collapsed {
    --sidebar-width: 74px;
  }

  .app-view .sidebar {
    padding-left: 10px;
    padding-right: 10px;
  }

  .side-brand-copy,
  .sidebar-section-label,
  .nav-label,
  .nav-badge,
  .user-details,
  .logout-label {
    display: none;
  }

  .sidebar-header {
    flex-direction: column;
    min-height: 84px;
  }

  .nav,
  .logout-button,
  .user-chip {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .sidebar-toggle { display: none; }
  .app-view .topbar { padding-left: 20px; padding-right: 20px; }
  .app-view .content { padding-left: 20px; padding-right: 20px; }
  .app-view .warning { margin-left: 20px; margin-right: 20px; }
}

@media (max-width: 680px) {
  .app-view,
  .app-view.sidebar-collapsed {
    display: block;
  }

  .app-view .sidebar {
    position: static;
    width: 100%;
    height: auto;
    min-height: 64px;
    padding: 10px 14px;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--app-border);
  }

  .sidebar-header { min-height: 0; flex-direction: row; }
  .side-brand-symbol { width: 36px; height: 36px; }
  .sidebar-nav { margin-left: auto; display: flex; gap: 4px; }
  .sidebar-nav .nav { width: 42px; min-height: 42px; }
  .sidebar-orbit, .side-bottom { display: none; }
  .app-view .topbar { align-items: flex-start; flex-direction: column; }
  .topbar-actions { width: 100%; }
  .topbar-actions .toolbar-button { flex: 1; }
  .app-view .stats { grid-template-columns: 1fr; }
  .dashboard-intro { align-items: flex-start; flex-direction: column; }
  .panel-head, .companies-head, .company-actions { align-items: stretch; flex-direction: column; }
  .search-shell { width: 100%; }
  .app-view .company-row { grid-template-columns: 1fr; gap: 7px; }
  .app-view .date { text-align: left; }
}
/* =========================================================
   AJUSTES — AUTOFILL DO LOGIN + TEMA NA SIDEBAR
   ========================================================= */

/* O login do Corban é sempre escuro, inclusive no autofill do Chrome/Edge. */
.login-view,
.futuristic-card,
.login-field,
.login-field .input-shell {
  color-scheme: dark;
}

.login-view .login-field input:-webkit-autofill,
.login-view .login-field input:-webkit-autofill:hover,
.login-view .login-field input:-webkit-autofill:focus,
.login-view .login-field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--corban-text) !important;
  caret-color: var(--corban-lime) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(3, 6, 4, .98) inset !important;
  box-shadow: 0 0 0 1000px rgba(3, 6, 4, .98) inset !important;
  border-color: rgba(124, 255, 107, .28) !important;
  background-color: rgba(3, 6, 4, .98) !important;
  background-image: none !important;
  transition: background-color 999999s ease-out 0s !important;
}

.login-view .login-field input:autofill {
  color: var(--corban-text) !important;
  caret-color: var(--corban-lime) !important;
  background: rgba(3, 6, 4, .98) !important;
  border-color: rgba(124, 255, 107, .28) !important;
}

.login-view .login-field input:-webkit-autofill::first-line {
  color: var(--corban-text) !important;
  font: inherit !important;
}

/* Os dois controles superiores da sidebar ficam empilhados. */
.sidebar-header-controls {
  flex: 0 0 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* Sol/Lua pequeno, sem caixa, sem texto e sem fundo. */
.sidebar-theme-toggle.theme-toggle {
  width: 25px !important;
  min-width: 25px !important;
  height: 25px !important;
  min-height: 25px !important;
  padding: 0 !important;
  gap: 0 !important;
  color: var(--app-muted);
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  opacity: .78;
}

.sidebar-theme-toggle.theme-toggle:hover {
  color: var(--app-accent);
  background: transparent !important;
  border: 0 !important;
  opacity: 1;
  transform: scale(1.08);
}

.sidebar-theme-toggle.theme-toggle:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--app-accent) 45%, transparent);
  outline-offset: 2px;
}

.sidebar-theme-toggle .theme-icon {
  width: 15px;
  height: 15px;
}

.sidebar-theme-toggle .theme-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.55;
}

.sidebar-collapsed .sidebar-header-controls {
  margin-top: 2px;
}

.sidebar-collapsed .sidebar-header {
  min-height: 118px;
}

/* No mobile, onde o botão de retrair some, o seletor de tema também some. */
@media (max-width: 680px) {
  .sidebar-theme-toggle {
    display: none !important;
  }
}

/* =========================================================
   PROSPECTA CORBAN — REGRA DE ABAS SEM TÍTULO / SUBTÍTULO
   ========================================================= */

/*
  Regra permanente da interface interna:
  abas do Corban começam pelo conteúdo/ação e não por um bloco
  "título + subtítulo". As próximas telas devem seguir esta base.
*/
.app-view .page-title,
.app-view .page-subtitle,
.app-view .tab-title,
.app-view .tab-subtitle,
.app-view .topbar-title,
.app-view .dashboard-intro {
  display: none !important;
}

/* Barra superior deixa de ser cabeçalho de página e vira somente utilitária. */
.app-view .topbar.topbar-utility {
  position: relative;
  min-height: 74px;
  padding: 14px 32px;
  justify-content: flex-end;
  overflow: hidden;
}

.topbar-utility-line {
  position: absolute;
  left: 32px;
  right: 390px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translateY(-50%);
  opacity: .58;
}

.topbar-utility-line > span {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--app-accent);
}

.topbar-utility-line > i {
  width: min(210px, 28vw);
  height: 1px;
  background: linear-gradient(90deg, var(--app-accent), transparent);
  opacity: .45;
}

.topbar-utility-line > span:last-child {
  width: 2px;
  height: 2px;
  opacity: .35;
}

html[data-app-theme="light"] .topbar-utility-line {
  opacity: .32;
}

/* -------------------------
   VISÃO GERAL — CONTROL DECK
   ------------------------- */

.dashboard-workspace {
  padding-top: 22px !important;
}

.dashboard-status-row {
  min-height: 24px;
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-status-track {
  display: flex;
  align-items: center;
  gap: 7px;
  width: min(330px, 38vw);
}

.dashboard-status-track span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--app-violet);
  opacity: .55;
}

.dashboard-status-track span:first-child {
  background: var(--app-accent);
  opacity: .88;
}

.dashboard-status-track i {
  height: 1px;
  flex: 1;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--app-accent) 72%, transparent),
    color-mix(in srgb, var(--app-mint) 24%, transparent),
    transparent
  );
}

.dashboard-status-track b {
  width: 22px;
  height: 4px;
  border-top: 1px solid color-mix(in srgb, var(--app-violet) 56%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--app-violet) 22%, transparent);
  transform: skewX(-28deg);
}

.corban-metric-grid {
  margin: 0;
}

.recent-stream {
  position: relative;
  margin-top: 18px;
  min-height: 250px;
  overflow: hidden;
  color: var(--app-text);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--app-surface) 96%, var(--app-accent) 4%),
      var(--app-surface)
    );
  border: 1px solid var(--app-border);
  border-radius: 20px;
  box-shadow: var(--app-shadow-soft);
}

html[data-app-theme="dark"] .recent-stream {
  background:
    radial-gradient(circle at 15% 0%, rgba(124, 255, 107, .055), transparent 24%),
    radial-gradient(circle at 92% 100%, rgba(155, 130, 255, .04), transparent 24%),
    var(--app-surface);
}

.recent-stream::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background-image:
    linear-gradient(90deg, transparent 0 49.8%, color-mix(in srgb, var(--app-border) 35%, transparent) 50%, transparent 50.2%);
  background-size: 180px 100%;
}

html[data-app-theme="light"] .recent-stream::before {
  opacity: .08;
}

.recent-stream-bar {
  position: relative;
  z-index: 2;
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--app-border);
}

.recent-stream-signal {
  display: flex;
  align-items: center;
  gap: 6px;
}

.recent-stream-signal span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--app-accent);
}

.recent-stream-signal span:last-child {
  background: var(--app-violet);
  opacity: .55;
}

.recent-stream-signal i {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--app-accent), transparent);
}

.recent-company-list {
  position: relative;
  z-index: 2;
  padding: 10px 18px 18px !important;
}

.dashboard-empty {
  position: relative;
  z-index: 2;
}

/* -------------------------
   EMPRESAS — DATA WORKSPACE
   Layout deliberadamente diferente da Visão Geral.
   ------------------------- */

.companies-workspace {
  padding-top: 20px !important;
}

.company-commandbar {
  min-height: 62px;
  padding: 9px 10px 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  box-shadow: var(--app-shadow-soft);
}

html[data-app-theme="dark"] .company-commandbar {
  background:
    linear-gradient(110deg, rgba(124,255,107,.035), transparent 30%),
    var(--app-surface);
}

.company-search-shell {
  width: min(560px, 58vw);
  min-width: 280px;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.company-search-shell::after {
  content: "";
  position: absolute;
  left: 38px;
  right: 0;
  bottom: 1px;
  height: 1px;
  background: linear-gradient(90deg, var(--app-border-strong), transparent 88%);
}

.company-search-shell:focus-within::after {
  background: linear-gradient(90deg, var(--app-accent), var(--app-mint), transparent 88%);
}

.company-search-shell input {
  height: 40px !important;
  padding-left: 40px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.company-commandbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.company-live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--app-muted-2);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .15em;
}

.company-live-indicator span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--app-mint);
  box-shadow: 0 0 9px color-mix(in srgb, var(--app-mint) 70%, transparent);
}

.company-live-indicator i {
  font-style: normal;
}

.company-new-button {
  min-width: 132px;
}

.company-data-stage {
  position: relative;
  margin-top: 12px;
  min-height: 360px;
  overflow: hidden;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  box-shadow: var(--app-shadow-soft);
}

.company-data-rail {
  height: 25px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--app-border);
}

.company-data-rail span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--app-accent);
  opacity: .75;
}

.company-data-rail span:nth-child(2) {
  background: var(--app-mint);
  opacity: .48;
}

.company-data-rail span:nth-child(3) {
  background: var(--app-violet);
  opacity: .38;
}

.company-data-rail i {
  width: 64px;
  height: 1px;
  margin-left: 3px;
  background: linear-gradient(90deg, var(--app-border-strong), transparent);
}

.company-table-wrap {
  border: 0 !important;
  border-radius: 0 !important;
}

.company-table {
  position: relative;
  z-index: 1;
}

.company-table thead {
  background: color-mix(in srgb, var(--app-surface-2) 72%, transparent);
}

.company-table th {
  height: 44px;
  color: var(--app-muted-2) !important;
  font-size: 7px !important;
  letter-spacing: .13em !important;
  border-bottom-color: var(--app-border) !important;
}

.company-table td {
  min-height: 58px;
}

.company-table tbody tr {
  transition: background .15s ease, transform .15s ease;
}

.company-table tbody tr:hover {
  background: color-mix(in srgb, var(--app-accent) 4%, transparent);
}

.companies-empty {
  min-height: 315px;
  display: grid;
  place-content: center;
}

/* Não reutilizar o painel genérico do dashboard na aba Empresas. */
.companies-workspace > .panel,
.companies-workspace .panel-head,
.companies-workspace .companies-head {
  display: none !important;
}

/* Ações no topo são utilitárias, não títulos. */
.main[data-current-section="companies"] .topbar-utility-line {
  opacity: .32;
}

html[data-app-theme="light"] .recent-stream,
html[data-app-theme="light"] .company-commandbar,
html[data-app-theme="light"] .company-data-stage {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(26, 34, 29, .045);
}

/* Responsivo */
@media (max-width: 900px) {
  .topbar-utility-line {
    right: 330px;
  }

  .company-search-shell {
    width: 100%;
    min-width: 0;
  }

  .company-commandbar {
    align-items: stretch;
    flex-direction: column;
  }

  .company-commandbar-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 680px) {
  .app-view .topbar.topbar-utility {
    min-height: 66px;
    padding: 11px 17px;
  }

  .topbar-utility-line {
    display: none;
  }

  .dashboard-status-row {
    margin-bottom: 10px;
  }

  .dashboard-status-track {
    width: 42%;
  }

  .company-commandbar-actions {
    justify-content: space-between;
  }

  .company-live-indicator {
    display: none;
  }

  .company-new-button {
    width: 100%;
  }
}

/* =========================================================
   BOOT DE SESSÃO — EVITA FLASH DO LOGIN NO F5
   ========================================================= */

.boot-view {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 13px;
  background:
    radial-gradient(circle at 50% 44%, rgba(124, 255, 107, .055), transparent 23%),
    linear-gradient(135deg, #050706, #080b09 52%, #050706);
  color: #f4f8f4;
}

.boot-corban-mark {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
}

.boot-core {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #b8ff63, #5df2c2);
  box-shadow: 0 0 24px rgba(124, 255, 107, .42);
  transform: rotate(45deg);
  animation: boot-core-pulse 1.45s ease-in-out infinite;
}

.boot-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(124, 255, 107, .22);
}

.boot-ring-a {
  inset: 7px;
  border-style: dashed;
  animation: boot-ring-spin 4.2s linear infinite;
}

.boot-ring-b {
  inset: 0;
  border-color: rgba(93, 242, 194, .10);
  animation: boot-ring-spin 6.2s linear infinite reverse;
}

.boot-corban-name {
  margin-left: .14em;
  color: rgba(238, 246, 239, .58);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .28em;
}

.boot-corban-name span {
  color: #b8ff63;
}

@keyframes boot-core-pulse {
  0%, 100% {
    transform: rotate(45deg) scale(.88);
    opacity: .72;
  }
  50% {
    transform: rotate(45deg) scale(1.08);
    opacity: 1;
  }
}

@keyframes boot-ring-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .boot-core,
  .boot-ring {
    animation: none !important;
  }
}

/* =========================================================
   LOADER GLOBAL — RESPEITA O TEMA ATUAL DO CORBAN
   ========================================================= */

html[data-boot-theme="light"] .boot-view {
  color: #182019;
  background:
    radial-gradient(circle at 50% 44%, rgba(129, 192, 54, .10), transparent 24%),
    radial-gradient(circle at 70% 70%, rgba(93, 242, 194, .055), transparent 27%),
    linear-gradient(135deg, #f7f8f4 0%, #f1f3ee 52%, #f8f9f6 100%);
}

html[data-boot-theme="light"] .boot-core {
  background: linear-gradient(135deg, #86d43f, #46cfa5);
  box-shadow: 0 0 24px rgba(120, 190, 48, .22);
}

html[data-boot-theme="light"] .boot-ring {
  border-color: rgba(91, 139, 48, .24);
}

html[data-boot-theme="light"] .boot-ring-b {
  border-color: rgba(69, 178, 144, .15);
}

html[data-boot-theme="light"] .boot-corban-name {
  color: rgba(40, 52, 42, .58);
}

html[data-boot-theme="light"] .boot-corban-name span {
  color: #72ba2f;
}

/* =========================================================
   EMPRESAS — LISTA VERTICAL CORBAN
   ========================================================= */

.company-list-stage {
  min-height: 360px;
}

.company-list-stage-toolbar {
  min-height: 58px;
  padding: 0 14px 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--app-border);
}

.company-list-stage-toolbar .company-data-rail {
  height: auto;
  padding: 0;
  border: 0;
  flex: 1;
}

.company-register-button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--app-button-text);
  background: var(--app-button-bg);
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, transparent);
  border-radius: 9px;
  box-shadow: none;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .015em;
  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease;
}

.company-register-button span {
  position: relative;
  top: -1px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

.company-register-button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.025);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--app-accent) 10%, transparent);
}

.company-register-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.companies-list-wrap {
  padding: 10px 12px 14px;
}

.companies-list {
  display: grid;
  gap: 8px;
}

.company-list-item {
  position: relative;
  min-height: 78px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: minmax(210px, 1.15fr) minmax(520px, 2fr);
  align-items: center;
  gap: 20px;
  overflow: hidden;
  color: var(--app-text);
  background:
    linear-gradient(
      110deg,
      color-mix(in srgb, var(--app-surface-2) 88%, var(--app-accent) 3%),
      var(--app-surface-2)
    );
  border: 1px solid var(--app-border);
  border-radius: 13px;
  transition:
    border-color .16s ease,
    transform .16s ease,
    background .16s ease;
}

.company-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(var(--app-accent), var(--app-mint));
  opacity: .54;
}

.company-list-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--app-accent) 28%, var(--app-border));
}

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

.company-list-mark {
  position: relative;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--app-accent) 26%, var(--app-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--app-accent) 7%, transparent);
}

.company-list-mark span {
  width: 9px;
  height: 9px;
  border: 1px solid var(--app-accent);
  border-radius: 3px;
  transform: rotate(45deg);
}

.company-list-name {
  min-width: 0;
}

.company-list-name strong,
.company-list-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-list-name strong {
  color: var(--app-text);
  font-size: 13px;
  font-weight: 850;
}

.company-list-name small {
  margin-top: 4px;
  color: var(--app-muted-2);
  font-size: 8px;
}

.company-list-details {
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(70px, .65fr)
    minmax(160px, 1.45fr)
    minmax(90px, .8fr)
    minmax(100px, .9fr);
  align-items: center;
  gap: 12px;
}

.company-list-detail {
  min-width: 0;
}

.company-list-detail small,
.company-list-detail > strong {
  display: block;
}

.company-list-detail small {
  margin-bottom: 5px;
  color: var(--app-muted-2);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.company-list-detail > strong {
  overflow: hidden;
  color: var(--app-text);
  font-size: 9.5px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-list-master > strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 8.5px;
}

.company-list-status .badge {
  margin-top: 0;
}

/* A antiga tabela deixa de fazer parte da composição da aba Empresas. */
.company-table-wrap,
.company-table {
  display: none !important;
}

html[data-app-theme="dark"] .company-list-item {
  background:
    radial-gradient(circle at 0 50%, rgba(124, 255, 107, .035), transparent 22%),
    linear-gradient(110deg, rgba(16, 23, 18, .96), rgba(11, 16, 13, .96));
}

html[data-app-theme="light"] .company-list-item {
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(30, 41, 33, .025);
}

html[data-app-theme="light"] .company-register-button {
  color: #172016;
  box-shadow: 0 5px 14px rgba(95, 150, 42, .07);
}

@media (max-width: 1050px) {
  .company-list-item {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .company-list-details {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
  }
}

@media (max-width: 720px) {
  .company-list-stage-toolbar {
    min-height: auto;
    padding: 10px 11px;
  }

  .company-list-stage-toolbar .company-data-rail {
    display: none;
  }

  .company-register-button {
    margin-left: auto;
  }

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

  .company-list-detail:last-child {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   CADASTRO DE EMPRESA — DURAÇÃO + CREDENCIAIS
   ========================================================= */

.license-duration-field {
  position: relative;
}

.corban-duration-select {
  position: relative;
}

.corban-duration-trigger {
  width: 100%;
  height: 45px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--app-text);
  background: var(--app-input);
  border: 1px solid var(--app-border-strong);
  border-radius: 11px;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.corban-duration-select.is-open .corban-duration-trigger,
.corban-duration-trigger:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 8%, transparent);
}

.duration-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .56;
  transition: transform .16s ease;
}

.corban-duration-select.is-open .duration-chevron {
  transform: rotate(225deg) translate(-2px, -1px);
}

.corban-duration-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  padding: 6px;
  display: grid;
  gap: 3px;
  overflow: hidden;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: 12px;
  box-shadow: var(--app-shadow);
}

.corban-duration-menu button {
  min-height: 34px;
  padding: 0 10px;
  color: var(--app-text);
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
  font-size: 10px;
  font-weight: 760;
}

.corban-duration-menu button:hover {
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 8%, transparent);
}

.corban-duration-menu .duration-custom-option {
  margin-top: 3px;
  padding-top: 1px;
  border-top: 1px solid var(--app-border);
  border-radius: 0 0 8px 8px;
}

.custom-duration-wrap {
  margin-top: 7px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.custom-duration-wrap input {
  height: 39px;
}

.custom-duration-wrap > span {
  color: var(--app-muted);
  font-size: 9px;
  font-weight: 800;
}

.credential-popup,
.first-access-popup {
  width: min(440px, 100%);
  padding: 28px;
  color: var(--app-text);
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--app-accent) 9%, transparent), transparent 30%),
    var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: 20px;
  box-shadow: var(--app-shadow);
}

.credential-popup-symbol {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 auto 15px;
  display: grid;
  place-items: center;
}

.credential-popup-symbol span {
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--app-accent);
  border-radius: 4px;
  transform: rotate(45deg);
}

.credential-popup-symbol i {
  position: absolute;
  inset: 4px;
  border: 1px dashed color-mix(in srgb, var(--app-accent) 32%, transparent);
  border-radius: 50%;
  animation: orbit-spin 8s linear infinite;
}

.credential-popup-head {
  text-align: center;
}

.credential-popup-head small,
.first-access-kicker {
  color: var(--app-accent);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .18em;
}

.credential-popup-head h3,
.first-access-popup h3 {
  margin: 6px 0 5px;
  color: var(--app-text);
  font-size: 20px;
}

.credential-popup-head p,
.first-access-popup > p {
  margin: 0;
  color: var(--app-muted);
  font-size: 10px;
  line-height: 1.55;
}

.credential-copy-list {
  margin-top: 21px;
  display: grid;
  gap: 9px;
}

.credential-copy-row {
  min-height: 65px;
  padding: 11px 12px 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 12px;
}

.credential-copy-row > div {
  min-width: 0;
}

.credential-copy-row small,
.credential-copy-row strong {
  display: block;
}

.credential-copy-row small {
  margin-bottom: 5px;
  color: var(--app-muted-2);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .13em;
}

.credential-copy-row strong {
  overflow: hidden;
  color: var(--app-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credential-copy-button {
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent) 20%, var(--app-border));
  border-radius: 9px;
  font-size: 8px;
  font-weight: 900;
}

.copy-glyph {
  position: relative;
  width: 13px;
  height: 13px;
  display: inline-block;
}

.copy-glyph i,
.copy-glyph b {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.copy-glyph i { left: 1px; top: 4px; }
.copy-glyph b { left: 4px; top: 1px; background: var(--app-surface-2); }

.credential-finish-button {
  width: 100%;
  margin-top: 17px;
}

.first-access-popup {
  position: relative;
}

.first-access-signal {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.first-access-signal span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--app-accent) 55%, transparent);
}

.first-access-signal i {
  width: 55px;
  height: 1px;
  background: linear-gradient(90deg, var(--app-accent), transparent);
}

.first-access-popup form {
  margin-top: 17px;
}

.first-access-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

html[data-app-theme="light"] .credential-popup,
html[data-app-theme="light"] .first-access-popup,
html[data-app-theme="light"] .corban-duration-menu {
  box-shadow: 0 24px 70px rgba(31, 43, 34, .13);
}

@media (max-width: 600px) {
  .credential-popup,
  .first-access-popup {
    padding: 23px 19px;
  }

  .credential-copy-row {
    align-items: stretch;
    flex-direction: column;
  }

  .credential-copy-button {
    align-self: flex-end;
  }
}

/* =========================================================
   CORBAN — CONTROLE DE QUANTIDADE DE USUÁRIOS
   ========================================================= */

.company-user-limit-field {
  min-width: 0;
}

.corban-number-stepper {
  height: 45px;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) 43px;
  overflow: hidden;
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.corban-number-stepper:focus-within {
  border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 9%, transparent);
}

.corban-stepper-input {
  width: 100%;
  height: 43px !important;
  min-width: 0;
  padding: 0 8px !important;
  color: var(--app-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  text-align: center;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}

.corban-stepper-input::-webkit-inner-spin-button,
.corban-stepper-input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.corban-stepper-button {
  position: relative;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--app-accent);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--app-border);
  transition:
    color .16s ease,
    background .16s ease,
    transform .12s ease;
}

.corban-stepper-button.is-plus {
  border-right: 0;
  border-left: 1px solid var(--app-border);
}

.corban-stepper-button:hover:not(:disabled) {
  color: var(--app-text-strong);
  background: var(--app-accent-soft);
}

.corban-stepper-button:active:not(:disabled) {
  transform: scale(.93);
}

.corban-stepper-button:disabled {
  opacity: .28;
  cursor: not-allowed;
}

.corban-stepper-button span {
  position: relative;
  width: 13px;
  height: 13px;
  display: block;
}

.corban-stepper-button span::before,
.corban-stepper-button span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--app-accent) 24%, transparent);
}

.corban-stepper-button.is-plus span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

html[data-app-theme="dark"] .corban-number-stepper {
  background:
    linear-gradient(110deg, rgba(124,255,107,.025), transparent 45%),
    var(--app-control);
}

html[data-app-theme="light"] .corban-number-stepper {
  background: #ffffff;
}

/* =========================================================
   CORBAN — BOTÃO CONCLUIR DO POPUP DE CREDENCIAIS
   ========================================================= */

#credentials-modal .credential-finish-button {
  width: 100%;
  min-height: 43px;
  margin-top: 17px;
  color: #09100a !important;
  background: linear-gradient(
    105deg,
    #a9f855 0%,
    #c8ff84 48%,
    #6ef1c9 100%
  ) !important;
  border: 1px solid rgba(124, 255, 107, .42) !important;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(124, 255, 107, .10) !important;
  font-weight: 900;
  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease;
}

#credentials-modal .credential-finish-button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.025);
  box-shadow: 0 13px 32px rgba(124, 255, 107, .16) !important;
}

html[data-app-theme="light"] #credentials-modal .credential-finish-button {
  color: #ffffff !important;
  background: linear-gradient(
    105deg,
    #587f3b 0%,
    #699848 52%,
    #3e987c 100%
  ) !important;
  border-color: rgba(76, 126, 55, .28) !important;
  box-shadow: 0 8px 22px rgba(68, 112, 50, .11) !important;
}

html[data-app-theme="light"] #credentials-modal .credential-finish-button:hover:not(:disabled) {
  box-shadow: 0 11px 26px rgba(68, 112, 50, .16) !important;
}

/* =========================================================
   EMPRESAS — CARD CLICÁVEL PARA EDIÇÃO
   ========================================================= */

.company-list-item {
  cursor: pointer;
}

.company-list-item:hover {
  border-color: color-mix(in srgb, var(--app-accent) 48%, var(--app-border));
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--app-accent) 7%, transparent);
}

.company-list-item:focus-visible {
  outline: none;
  border-color: var(--app-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--app-accent) 10%, transparent),
    0 10px 28px color-mix(in srgb, var(--app-accent) 7%, transparent);
}

.company-list-item:active {
  transform: translateY(0) scale(.998);
}

html[data-app-theme="light"] .company-list-item:hover {
  box-shadow:
    0 8px 22px rgba(60, 92, 45, .065);
}

/* =========================================================
   EMPRESAS — CENTRAL DE ACESSO E LICENÇA
   ========================================================= */

.company-license-center {
  display: grid;
  gap: 15px;
}

.company-license-overview {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
}

.company-license-state-card,
.company-license-metric {
  min-height: 92px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: color-mix(in srgb, var(--app-surface-2) 90%, var(--app-accent) 2%);
  border: 1px solid var(--app-border);
  border-radius: 12px;
}

.company-license-state-card small,
.company-license-metric small {
  color: var(--app-muted-2);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .13em;
}

.company-license-state-card strong,
.company-license-metric strong {
  margin-top: 7px;
  color: var(--app-text);
  font-size: 15px;
  line-height: 1.05;
}

.company-license-state-card span,
.company-license-metric span {
  margin-top: 6px;
  color: var(--app-muted);
  font-size: 8px;
  line-height: 1.35;
}

.company-license-status.is-active {
  color: var(--app-mint) !important;
}

.company-license-status.is-warning {
  color: #e8c45d !important;
}

.company-license-status.is-expired,
.company-license-status.is-blocked {
  color: #ff7b88 !important;
}

.company-license-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.company-renew-box {
  min-height: 74px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: color-mix(in srgb, var(--app-surface-2) 94%, transparent);
  border: 1px solid var(--app-border);
  border-radius: 12px;
}

.company-renew-copy {
  min-width: 150px;
}

.company-renew-copy small,
.company-renew-copy span {
  display: block;
}

.company-renew-copy small {
  color: var(--app-accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
}

.company-renew-copy span {
  margin-top: 4px;
  color: var(--app-muted);
  font-size: 8px;
}

.company-renew-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.renewal-duration-select {
  width: 130px;
}

.renewal-custom-wrap {
  width: 128px;
  margin: 0 !important;
}

.renewal-custom-wrap input {
  min-width: 0;
}

.company-license-action {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 8.5px;
  font-weight: 900;
  white-space: nowrap;
}

.company-license-action.primary-action {
  color: #09100a;
  background: linear-gradient(105deg, #a9f855, #6ef1c9);
  border: 1px solid rgba(124,255,107,.34);
}

.company-license-action.danger-action {
  min-width: 126px;
  color: #ff9aa5;
  background: rgba(255, 83, 101, .055);
  border: 1px solid rgba(255, 98, 115, .22);
}

.company-license-action.danger-action.is-unblock {
  color: var(--app-mint);
  background: color-mix(in srgb, var(--app-mint) 6%, transparent);
  border-color: color-mix(in srgb, var(--app-mint) 24%, transparent);
}

.company-license-history {
  position: relative;
  min-height: 95px;
  padding: 9px 12px 11px;
  background: color-mix(in srgb, var(--app-surface-2) 92%, transparent);
  border: 1px solid var(--app-border);
  border-radius: 12px;
}

.company-license-history-rail {
  height: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.company-license-history-rail span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--app-accent);
}

.company-license-history-rail span:last-child {
  background: var(--app-violet);
  opacity: .5;
}

.company-license-history-rail i {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--app-accent), transparent);
}

.company-license-history-list {
  max-height: 168px;
  overflow: auto;
  display: grid;
}

.company-license-history-row {
  min-height: 44px;
  padding: 8px 3px;
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 9px;
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--app-border) 68%, transparent);
}

.company-license-history-row:first-child {
  border-top: 0;
}

.license-history-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--app-accent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--app-accent) 34%, transparent);
}

.company-license-history-row strong,
.company-license-history-row small {
  display: block;
}

.company-license-history-row strong {
  color: var(--app-text);
  font-size: 9px;
}

.company-license-history-row small {
  margin-top: 3px;
  color: var(--app-muted-2);
  font-size: 7px;
}

.company-license-history-empty {
  padding: 24px 8px;
  color: var(--app-muted);
  font-size: 8px;
  text-align: center;
}

/* O modal de edição pode crescer sem ultrapassar a tela. */
#company-modal .modal {
  width: min(760px, 100%);
}

html[data-app-theme="light"] .company-license-state-card,
html[data-app-theme="light"] .company-license-metric,
html[data-app-theme="light"] .company-renew-box,
html[data-app-theme="light"] .company-license-history {
  background: #ffffff;
}

html[data-app-theme="light"] .company-license-action.primary-action {
  color: #ffffff;
  background: linear-gradient(105deg, #587f3b, #3e987c);
}

@media (max-width: 760px) {
  .company-license-overview {
    grid-template-columns: 1fr;
  }

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

  .company-renew-box {
    align-items: stretch;
    flex-direction: column;
  }

  .company-renew-controls {
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .renewal-duration-select,
  .renewal-custom-wrap,
  .company-license-action {
    flex: 1 1 120px;
  }
}

/* =========================================================
   MEU PERFIL — IDENTIDADE PROSPECTA CORBAN
   ========================================================= */

.profile-chip {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-chip:hover {
  border-color: color-mix(in srgb, var(--app-accent) 34%, var(--app-border));
  background: color-mix(in srgb, var(--app-accent) 5%, var(--app-surface-2));
}

.profile-chip:focus-visible {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 9%, transparent);
}

.profile-sidebar-avatar {
  position: relative;
  overflow: hidden;
}

.avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.profile-modal-backdrop {
  z-index: 74;
}

.profile-modal-card {
  width: min(690px, calc(100vw - 34px));
  max-height: calc(100vh - 38px);
  overflow: auto;
  color: var(--app-text);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--app-accent) 6%, transparent), transparent 29%),
    var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 20px;
  box-shadow: 0 34px 110px rgba(0, 0, 0, .38);
}

.profile-modal-top {
  min-height: 54px;
  padding: 10px 13px 5px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-modal-signal {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-modal-signal span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--app-accent);
}

.profile-modal-signal span:last-child {
  background: var(--app-violet);
  opacity: .56;
}

.profile-modal-signal i {
  width: 55px;
  height: 1px;
  background: linear-gradient(90deg, var(--app-accent), transparent);
}

.profile-identity-card {
  margin: 0 18px;
  padding: 18px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 17px;
  align-items: center;
  background:
    linear-gradient(
      115deg,
      color-mix(in srgb, var(--app-surface-2) 94%, var(--app-accent) 3%),
      var(--app-surface-2)
    );
  border: 1px solid var(--app-border);
  border-radius: 16px;
}

.profile-avatar-preview {
  position: relative;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--app-accent);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--app-accent) 9%, transparent), transparent 70%),
    var(--app-control);
  border: 1px solid color-mix(in srgb, var(--app-accent) 28%, var(--app-border));
  border-radius: 28px;
  font-size: 30px;
  font-weight: 900;
}

.profile-avatar-preview::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--app-accent) 23%, transparent);
  border-radius: 22px;
}

.profile-avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.profile-identity-copy {
  min-width: 0;
}

.profile-identity-copy small {
  color: var(--app-accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .15em;
}

.profile-identity-copy h3 {
  margin: 4px 0 12px;
  color: var(--app-text);
  font-size: 21px;
}

.profile-identity-copy strong,
.profile-identity-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-identity-copy strong {
  color: var(--app-text);
  font-size: 12px;
}

.profile-identity-copy span {
  margin-top: 4px;
  color: var(--app-muted);
  font-size: 9px;
}

.profile-photo-actions {
  display: grid;
  gap: 7px;
}

.profile-photo-button {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.profile-photo-button.primary-photo {
  color: #081008;
  background: linear-gradient(105deg, #a9f855, #6ef1c9);
  border: 1px solid rgba(124, 255, 107, .32);
}

.profile-photo-button.remove-photo {
  color: var(--app-muted);
  background: transparent;
  border: 1px solid var(--app-border);
}

.profile-photo-button.remove-photo:hover {
  color: #ff8997;
  border-color: rgba(255, 103, 122, .24);
}

.profile-form {
  padding: 17px 18px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.profile-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.profile-field:first-child {
  grid-column: 1 / -1;
}

.profile-field label {
  color: var(--app-muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .05em;
}

.profile-field input,
.profile-readonly-value {
  min-height: 43px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  color: var(--app-text);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 11px;
  font-size: 10px;
}

.profile-readonly-value {
  color: var(--app-muted);
}

.profile-modal-actions {
  grid-column: 1 / -1;
  padding-top: 5px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.profile-save-button {
  min-height: 40px;
  padding: 0 16px;
  color: #081008;
  background: linear-gradient(105deg, #a9f855 0%, #c8ff84 48%, #6ef1c9 100%);
  border: 1px solid rgba(124, 255, 107, .35);
  border-radius: 10px;
  font-size: 9px;
  font-weight: 900;
}

.profile-save-button:hover:not(:disabled) {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.profile-save-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

html[data-app-theme="light"] .profile-modal-card {
  background: #f7f8f4;
  box-shadow: 0 30px 90px rgba(31, 43, 34, .16);
}

html[data-app-theme="light"] .profile-identity-card,
html[data-app-theme="light"] .profile-field input,
html[data-app-theme="light"] .profile-readonly-value {
  background: #ffffff;
}

html[data-app-theme="light"] .profile-photo-button.primary-photo,
html[data-app-theme="light"] .profile-save-button {
  color: #ffffff;
  background: linear-gradient(105deg, #587f3b 0%, #699848 52%, #3e987c 100%);
}

/* =========================================================
   AJUSTE DA FOTO
   ========================================================= */

.profile-crop-backdrop {
  z-index: 88;
  background: rgba(2, 6, 4, .82);
  backdrop-filter: blur(12px);
}

.profile-crop-card {
  width: min(450px, calc(100vw - 30px));
  padding: 18px;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 20px;
  box-shadow: 0 34px 110px rgba(0, 0, 0, .44);
}

.profile-crop-head {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.profile-crop-head small {
  color: var(--app-accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
}

.profile-crop-head h3 {
  margin: 4px 0 0;
  font-size: 18px;
}

.profile-crop-stage {
  position: relative;
  width: min(300px, calc(100vw - 82px));
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  touch-action: none;
  background:
    linear-gradient(45deg, var(--app-control) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(45deg, transparent 75%, var(--app-control) 75%) 0 0 / 18px 18px,
    linear-gradient(45deg, transparent 75%, var(--app-control) 75%) 9px -9px / 18px 18px,
    linear-gradient(45deg, var(--app-control) 25%, var(--app-surface-2) 25%) 9px -9px / 18px 18px;
  border: 1px solid var(--app-border);
  border-radius: 22px;
  cursor: grab;
}

.profile-crop-stage:active {
  cursor: grabbing;
}

#profile-crop-canvas {
  width: 100%;
  height: 100%;
  display: block;
}



.profile-crop-hint {
  margin-top: 10px;
  color: var(--app-muted);
  font-size: 8px;
  line-height: 1.45;
  text-align: center;
}

.profile-crop-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

html[data-app-theme="light"] .profile-crop-card {
  background: #f7f8f4;
  box-shadow: 0 28px 90px rgba(32, 43, 34, .18);
}

@media (max-width: 650px) {
  .profile-identity-card {
    grid-template-columns: 86px 1fr;
  }

  .profile-avatar-preview {
    width: 86px;
    height: 86px;
  }

  .profile-photo-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .profile-field:first-child,
  .profile-modal-actions {
    grid-column: auto;
  }
}

/* =========================================================
   AJUSTE DA FOTO — ZOOM PELA RODA DO MOUSE
   ========================================================= */

.profile-crop-tools,
#profile-crop-zoom,
.crop-zoom-icon {
  display: none !important;
}

.profile-crop-stage {
  cursor: grab;
}

.profile-crop-stage:active {
  cursor: grabbing;
}

.profile-crop-hint {
  max-width: 320px;
  margin: 13px auto 0;
  color: var(--app-muted);
  font-size: 8px;
  line-height: 1.5;
  text-align: center;
}

/* =========================================================
   AJUSTE DA FOTO — VISUAL LIMPO
   ========================================================= */

.profile-crop-mask,
.profile-crop-guide {
  display: none !important;
}

.profile-crop-stage {
  background: var(--app-control);
  border-color: var(--app-border);
  box-shadow: none;
}

html[data-app-theme="light"] .profile-crop-stage {
  background: #eef1ec;
}

/* =========================================================
   PRIMEIRO ACESSO — IDENTIDADE VISUAL CORBAN
   Remove definitivamente a herança azul dos estilos antigos.
   ========================================================= */

#first-access-modal .first-access-popup {
  color: var(--app-text);
  background:
    radial-gradient(
      circle at 10% 0%,
      color-mix(in srgb, var(--app-accent) 7%, transparent),
      transparent 30%
    ),
    var(--app-surface);
  border-color: color-mix(
    in srgb,
    var(--app-accent) 23%,
    var(--app-border)
  );
}

#first-access-modal .first-access-kicker {
  color: var(--app-accent);
}

#first-access-modal .first-access-signal span {
  background: var(--app-accent);
  box-shadow:
    0 0 12px color-mix(
      in srgb,
      var(--app-accent) 52%,
      transparent
    );
}

#first-access-modal .first-access-signal i {
  background:
    linear-gradient(
      90deg,
      var(--app-accent),
      color-mix(in srgb, var(--app-mint) 48%, transparent),
      transparent
    );
}

#first-access-modal .field > span {
  color: var(--app-text);
}

#first-access-modal input {
  color: var(--app-text) !important;
  caret-color: var(--app-accent) !important;
  background: var(--app-control) !important;
  border: 1px solid var(--app-border) !important;
  box-shadow: none !important;
}

#first-access-modal input:hover {
  border-color:
    color-mix(
      in srgb,
      var(--app-accent) 28%,
      var(--app-border)
    ) !important;
}

#first-access-modal input:focus,
#first-access-modal input:focus-visible {
  outline: 0 !important;
  border-color:
    color-mix(
      in srgb,
      var(--app-accent) 65%,
      var(--app-border)
    ) !important;
  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(--app-accent) 10%,
        transparent
      ),
    0 0 18px
      color-mix(
        in srgb,
        var(--app-accent) 5%,
        transparent
      ) !important;
}

/* Chrome/Edge não podem devolver o azul no autofill. */
#first-access-modal input:-webkit-autofill,
#first-access-modal input:-webkit-autofill:hover,
#first-access-modal input:-webkit-autofill:focus,
#first-access-modal input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--app-text) !important;
  caret-color: var(--app-accent) !important;
  -webkit-box-shadow:
    0 0 0 1000px var(--app-control) inset !important;
  box-shadow:
    0 0 0 1000px var(--app-control) inset !important;
  border-color:
    color-mix(
      in srgb,
      var(--app-accent) 42%,
      var(--app-border)
    ) !important;
  transition: background-color 999999s ease-out 0s !important;
}

/* AGORA NÃO — neutro, sem azul. */
#first-access-modal #first-access-later.btn.secondary {
  color: var(--app-text) !important;
  background: var(--app-control) !important;
  border:
    1px solid var(--app-border-strong) !important;
  box-shadow: none !important;
}

#first-access-modal #first-access-later.btn.secondary:hover {
  color: var(--app-accent) !important;
  background: var(--app-control-hover) !important;
  border-color:
    color-mix(
      in srgb,
      var(--app-accent) 32%,
      var(--app-border)
    ) !important;
  transform: translateY(-1px);
}

/* ALTERAR SENHA — botão principal Corban. */
#first-access-modal .first-access-actions .btn.primary {
  color: #081008 !important;
  background:
    linear-gradient(
      105deg,
      #a9f855 0%,
      #c8ff84 48%,
      #6ef1c9 100%
    ) !important;
  border:
    1px solid rgba(124, 255, 107, .38) !important;
  box-shadow:
    0 10px 28px rgba(124, 255, 107, .10) !important;
}

#first-access-modal .first-access-actions .btn.primary:hover:not(:disabled) {
  filter: brightness(1.035);
  transform: translateY(-1px);
  box-shadow:
    0 13px 32px rgba(124, 255, 107, .15) !important;
}

/* Tema claro: mesma identidade, em tons corporativos do Corban. */
html[data-app-theme="light"] #first-access-modal .first-access-popup {
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(95, 139, 61, .07),
      transparent 30%
    ),
    #f7f8f4;
  border-color: rgba(95, 139, 61, .20);
}

html[data-app-theme="light"] #first-access-modal input {
  color: #1b241c !important;
  background: #ffffff !important;
  border-color: #d7ddd4 !important;
}

html[data-app-theme="light"] #first-access-modal input:focus,
html[data-app-theme="light"] #first-access-modal input:focus-visible {
  border-color: #6e9a4e !important;
  box-shadow:
    0 0 0 3px rgba(95, 139, 61, .10) !important;
}

html[data-app-theme="light"]
#first-access-modal
#first-access-later.btn.secondary {
  color: #273028 !important;
  background: #ffffff !important;
  border-color: #d7ddd4 !important;
}

html[data-app-theme="light"]
#first-access-modal
#first-access-later.btn.secondary:hover {
  color: #527a36 !important;
  background: #f1f5ed !important;
  border-color: rgba(95, 139, 61, .34) !important;
}

html[data-app-theme="light"]
#first-access-modal
.first-access-actions
.btn.primary {
  color: #ffffff !important;
  background:
    linear-gradient(
      105deg,
      #587f3b 0%,
      #699848 52%,
      #3e987c 100%
    ) !important;
  border-color: rgba(76, 126, 55, .28) !important;
  box-shadow:
    0 8px 22px rgba(68, 112, 50, .11) !important;
}

/* =========================================================
   PRIMEIRO ACESSO — OVERRIDE FINAL SEM HERANÇA AZUL
   ========================================================= */

#first-access-modal .first-access-input {
  color: var(--app-text) !important;
  caret-color: var(--app-accent) !important;
  background: var(--app-control) !important;
  border: 1px solid var(--app-border) !important;
  outline: none !important;
  box-shadow: none !important;
}

#first-access-modal .first-access-input:hover {
  border-color: color-mix(
    in srgb,
    var(--app-accent) 32%,
    var(--app-border)
  ) !important;
}

#first-access-modal .first-access-input:focus,
#first-access-modal .first-access-input:focus-visible {
  background: var(--app-control) !important;
  border-color: var(--app-accent) !important;
  outline: none !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--app-accent) 11%, transparent),
    0 0 18px color-mix(in srgb, var(--app-accent) 6%, transparent)
    !important;
}

#first-access-modal .first-access-later-button {
  color: var(--app-text) !important;
  background: var(--app-control) !important;
  border: 1px solid var(--app-border-strong) !important;
  box-shadow: none !important;
}

#first-access-modal .first-access-later-button:hover {
  color: var(--app-accent) !important;
  background: color-mix(
    in srgb,
    var(--app-accent) 5%,
    var(--app-control)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--app-accent) 34%,
    var(--app-border)
  ) !important;
}

#first-access-modal .first-access-submit-button {
  color: #081008 !important;
  background: linear-gradient(
    105deg,
    #a9f855 0%,
    #c8ff84 48%,
    #6ef1c9 100%
  ) !important;
  border: 1px solid rgba(124, 255, 107, .38) !important;
  box-shadow: 0 10px 28px rgba(124, 255, 107, .10) !important;
}

#first-access-modal .first-access-submit-button:hover:not(:disabled) {
  color: #081008 !important;
  background: linear-gradient(
    105deg,
    #b3ff60 0%,
    #d1ff91 48%,
    #77f7d0 100%
  ) !important;
  border-color: rgba(124, 255, 107, .52) !important;
  box-shadow: 0 13px 32px rgba(124, 255, 107, .16) !important;
  transform: translateY(-1px);
}

html[data-app-theme="light"] #first-access-modal .first-access-input {
  color: #1b241c !important;
  background: #ffffff !important;
  border-color: #d7ddd4 !important;
}

html[data-app-theme="light"] #first-access-modal .first-access-input:focus,
html[data-app-theme="light"] #first-access-modal .first-access-input:focus-visible {
  border-color: #699348 !important;
  box-shadow: 0 0 0 3px rgba(93, 139, 61, .11) !important;
}

html[data-app-theme="light"] #first-access-modal .first-access-later-button {
  color: #273028 !important;
  background: #ffffff !important;
  border-color: #d7ddd4 !important;
}

html[data-app-theme="light"] #first-access-modal .first-access-submit-button {
  color: #ffffff !important;
  background: linear-gradient(
    105deg,
    #587f3b 0%,
    #699848 52%,
    #3e987c 100%
  ) !important;
  border-color: rgba(76, 126, 55, .28) !important;
  box-shadow: 0 8px 22px rgba(68, 112, 50, .11) !important;
}

/* =========================================================
   PRIMEIRO ACESSO — OLHO DE SENHA CORBAN
   ========================================================= */

.first-access-password-shell {
  position: relative;
  width: 100%;
}

#first-access-modal .first-access-password-shell .first-access-input {
  width: 100%;
  padding-right: 52px !important;
}

#first-access-modal .first-access-eye-toggle {
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
}

#first-access-modal .first-access-eye-toggle:active {
  transform: translateY(-50%) scale(.96);
}

#first-access-modal .first-access-eye-toggle:hover {
  background: color-mix(
    in srgb,
    var(--app-accent) 8%,
    transparent
  );
}

#first-access-modal .first-access-eye-toggle:focus-visible {
  background: color-mix(
    in srgb,
    var(--app-accent) 10%,
    transparent
  );
  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(--app-accent) 12%,
      transparent
    );
}

/* =========================================================
   MASTER — NAVEGAÇÃO PRÓPRIA DA EMPRESA
   ========================================================= */

#master-sidebar-nav {
  min-height: 0;
}

#master-sidebar-nav .nav {
  min-height: 43px;
}

#master-sidebar-nav .nav-label {
  font-size: 11.5px;
}

.master-workspace {
  min-height: calc(100vh - 1px);
  padding: 0 !important;
  background: transparent;
}

/*
  As áreas do Master começam vazias de propósito.
  Cada uma ganhará composição própria e não repetirá o layout das outras.
*/
.master-workspace:empty {
  min-height: calc(100vh - 1px);
}

/* Com oito módulos, a navegação pode rolar sem deslocar perfil/sair. */
#master-sidebar-nav {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in srgb, var(--app-accent) 22%, transparent)
    transparent;
  padding-right: 2px;
}

#master-sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

#master-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

#master-sidebar-nav::-webkit-scrollbar-thumb {
  background:
    color-mix(in srgb, var(--app-accent) 20%, transparent);
  border-radius: 999px;
}

/* =========================================================
   ESTEIRA — CORAÇÃO OPERACIONAL DO CORBAN
   ========================================================= */

.pipeline-workspace {
  min-width: 0;
}

.pipeline-shell {
  min-width: 0;
  padding: 18px 22px 24px;
}

.pipeline-commandbar {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px 10px 15px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 15px;
}

.pipeline-search {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pipeline-search svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  stroke: var(--app-muted-2);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.pipeline-search input {
  width: 100%;
  height: 38px;
  padding: 0;
  color: var(--app-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.pipeline-search input::placeholder {
  color: var(--app-muted-2);
}

.pipeline-command-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pipeline-filter-wrap {
  position: relative;
}

.pipeline-filter-select {
  min-width: 154px;
  height: 38px;
  padding: 0 33px 0 12px;
  color: var(--app-text);
  background:
    linear-gradient(45deg, transparent 50%, var(--app-muted) 50%)
      calc(100% - 15px) 16px / 5px 5px no-repeat,
    linear-gradient(135deg, var(--app-muted) 50%, transparent 50%)
      calc(100% - 11px) 16px / 5px 5px no-repeat,
    var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  appearance: none;
  outline: 0;
  font-size: 9px;
  font-weight: 800;
}

.pipeline-filter-select:focus {
  border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 8%, transparent);
}

.pipeline-icon-action,
.pipeline-add-button {
  height: 38px;
  border-radius: 10px;
}

.pipeline-icon-action {
  width: 38px;
  display: grid;
  place-items: center;
  color: var(--app-muted);
  background: var(--app-control);
  border: 1px solid var(--app-border);
}

.pipeline-icon-action svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pipeline-icon-action:hover {
  color: var(--app-accent);
  border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-border));
}

.pipeline-add-button {
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #09100a;
  background: linear-gradient(105deg, #a9f855, #6ef1c9);
  border: 1px solid rgba(124, 255, 107, .35);
  font-size: 9px;
  font-weight: 900;
}

.pipeline-add-button span {
  font-size: 15px;
  line-height: 1;
}

.pipeline-stage {
  position: relative;
  min-width: 0;
  min-height: calc(100vh - 184px);
  margin-top: 12px;
  overflow: hidden;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 15px;
}

.pipeline-stage-rail {
  height: 29px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--app-border);
}

.pipeline-stage-rail span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--app-accent);
}

.pipeline-stage-rail span:nth-child(2) {
  background: var(--app-mint);
  opacity: .68;
}

.pipeline-stage-rail span:last-child {
  background: var(--app-violet);
  opacity: .56;
}

.pipeline-stage-rail i {
  width: 48px;
  height: 1px;
  margin-left: 3px;
  background: linear-gradient(90deg, var(--app-accent), transparent);
}

.pipeline-table-scroll {
  width: 100%;
  max-height: calc(100vh - 217px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in srgb, var(--app-accent) 30%, transparent)
    transparent;
}

.pipeline-table-scroll::-webkit-scrollbar {
  width: 8px;
  height: 9px;
}

.pipeline-table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.pipeline-table-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--app-accent) 23%, var(--app-border));
  border-radius: 999px;
}

.pipeline-table {
  width: 100%;
  min-width: 2480px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.pipeline-table th,
.pipeline-table td {
  height: 46px;
  padding: 0 11px;
  overflow: hidden;
  color: var(--app-text);
  border-bottom: 1px solid color-mix(in srgb, var(--app-border) 76%, transparent);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 8.5px;
}

.pipeline-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 36px;
  color: var(--app-muted);
  background: color-mix(in srgb, var(--app-surface) 96%, var(--app-accent) 1%);
  border-bottom-color: var(--app-border);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .065em;
}

.pipeline-table th:nth-child(1),
.pipeline-table td:nth-child(1) { width: 86px; }
.pipeline-table th:nth-child(2),
.pipeline-table td:nth-child(2) { width: 190px; }
.pipeline-table th:nth-child(3),
.pipeline-table td:nth-child(3) { width: 115px; }
.pipeline-table th:nth-child(4),
.pipeline-table td:nth-child(4) { width: 150px; }
.pipeline-table th:nth-child(5),
.pipeline-table td:nth-child(5) { width: 120px; }
.pipeline-table th:nth-child(6),
.pipeline-table td:nth-child(6) { width: 112px; text-align: center; }
.pipeline-table th:nth-child(7),
.pipeline-table td:nth-child(7) { width: 104px; }
.pipeline-table th:nth-child(8),
.pipeline-table td:nth-child(8) { width: 180px; }
.pipeline-table th:nth-child(9),
.pipeline-table td:nth-child(9) { width: 104px; }
.pipeline-table th:nth-child(10),
.pipeline-table td:nth-child(10) { width: 190px; }
.pipeline-table th:nth-child(11),
.pipeline-table td:nth-child(11) { width: 145px; }
.pipeline-table th:nth-child(12),
.pipeline-table td:nth-child(12) { width: 145px; }
.pipeline-table th:nth-child(13),
.pipeline-table td:nth-child(13) { width: 110px; }
.pipeline-table th:nth-child(14),
.pipeline-table td:nth-child(14) { width: 120px; text-align: right; }
.pipeline-table th:nth-child(15),
.pipeline-table td:nth-child(15) { width: 125px; text-align: right; }
.pipeline-table th:nth-child(16),
.pipeline-table td:nth-child(16) { width: 280px; }
.pipeline-table th:nth-child(17),
.pipeline-table td:nth-child(17) { width: 74px; text-align: right; }
.pipeline-table th:nth-child(18),
.pipeline-table td:nth-child(18) { width: 125px; text-align: right; }
.pipeline-table th:nth-child(19),
.pipeline-table td:nth-child(19) { width: 52px; text-align: center; }

.pipeline-row {
  cursor: pointer;
  transition: background .14s ease;
}

.pipeline-row:hover td {
  background: color-mix(in srgb, var(--app-accent) 3.4%, transparent);
}

.pipeline-lc {
  color: var(--app-muted) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 7.7px !important;
}

.pipeline-client {
  color: var(--app-text-strong) !important;
  font-weight: 850;
}

.pipeline-consultant {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 760;
}

.pipeline-consultant i {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent) 20%, transparent);
  border-radius: 50%;
  font-size: 6px;
  font-style: normal;
}

.pipeline-unlocked {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
}

.pipeline-unlocked.yes {
  color: var(--app-mint);
  background: color-mix(in srgb, var(--app-mint) 7%, transparent);
}

.pipeline-unlocked.no {
  color: #ff7687;
  background: rgba(255, 86, 108, .06);
}

.pipeline-unlocked.na {
  color: var(--app-muted-2);
  background: var(--app-control);
}

.pipeline-phase {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  color: color-mix(in srgb, var(--phase-color) 82%, var(--app-text));
  font-weight: 820;
}

.pipeline-phase i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--phase-color);
  box-shadow: 0 0 9px color-mix(in srgb, var(--phase-color) 24%, transparent);
}

.pipeline-followup,
.pipeline-table-name {
  color: var(--app-muted) !important;
}

.pipeline-promoter-cell {
  color: var(--app-accent) !important;
  font-weight: 850;
}

.pipeline-money {
  font-variant-numeric: tabular-nums;
}

.pipeline-commission {
  color: var(--app-mint) !important;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.pipeline-row-open {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: var(--app-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
}

.pipeline-row-open:hover {
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--app-accent) 18%, transparent);
}

.pipeline-row-open svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pipeline-empty {
  min-height: calc(100vh - 225px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.pipeline-empty-mark {
  position: relative;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 28%, var(--app-border));
  border-radius: 16px;
}

.pipeline-empty-mark span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 1px solid var(--app-accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

.pipeline-empty-mark i {
  position: absolute;
  inset: 8px;
  border: 1px dashed color-mix(in srgb, var(--app-accent) 25%, transparent);
  border-radius: 12px;
}

.pipeline-empty strong {
  color: var(--app-text);
  font-size: 13px;
}

.pipeline-empty small {
  color: var(--app-muted);
  font-size: 8px;
}

.pipeline-empty button {
  margin-top: 8px;
  min-height: 36px;
  padding: 0 14px;
  color: #09100a;
  background: linear-gradient(105deg, #a9f855, #6ef1c9);
  border: 0;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 900;
}

/* =========================================================
   ESTEIRA — DRAWER DA PROPOSTA
   ========================================================= */

body.proposal-drawer-open {
  overflow: hidden;
}

.proposal-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: flex;
  justify-content: flex-end;
  background: rgba(1, 5, 3, .54);
  backdrop-filter: blur(7px);
}

.proposal-drawer {
  width: min(780px, 96vw);
  height: 100vh;
  overflow-y: auto;
  color: var(--app-text);
  color-scheme: dark;
  background: #0a100c;
  border-left: 1px solid rgba(124, 255, 107, .10);
  box-shadow: -28px 0 80px rgba(0, 0, 0, .42);
  animation: proposal-drawer-in .20s ease-out both;
}

@keyframes proposal-drawer-in {
  from {
    opacity: .65;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Barra superior mínima: sem título e sem subtítulo. */
.proposal-drawer-head-minimal {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 54px;
  padding: 9px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 16, 12, .94);
  border-bottom: 1px solid rgba(124, 255, 107, .075);
  backdrop-filter: blur(16px);
}

.proposal-drawer-mini-signal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.proposal-drawer-mini-signal i {
  width: 4px;
  height: 4px;
  display: block;
  border-radius: 50%;
  background: var(--app-accent);
}

.proposal-drawer-mini-signal i:nth-child(2) {
  background: var(--app-mint);
  opacity: .72;
}

.proposal-drawer-mini-signal i:nth-child(3) {
  background: var(--app-violet);
  opacity: .55;
}

.proposal-drawer-mini-signal b {
  width: 54px;
  height: 1px;
  margin-left: 3px;
  background: linear-gradient(
    90deg,
    rgba(124, 255, 107, .58),
    transparent
  );
}

.proposal-close-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #7e8b82;
  background: transparent;
  border: 1px solid rgba(124, 255, 107, .10);
  border-radius: 10px;
  font-size: 16px;
}

.proposal-close-button:hover {
  color: #f5faf6;
  background: rgba(124, 255, 107, .045);
  border-color: rgba(124, 255, 107, .23);
}

/* =========================================================
   FORMULÁRIO — uma única superfície, simples e alinhada
   ========================================================= */

.proposal-form {
  width: calc(100% - 36px);
  margin: 14px 18px 22px;
  padding: 0 18px 18px;
  display: block;
  overflow: visible;
  background: #0e1510;
  border: 1px solid rgba(124, 255, 107, .095);
  border-radius: 16px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .12);
}

.proposal-form-section {
  padding: 20px 0 22px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(124, 255, 107, .07);
  border-radius: 0;
  box-shadow: none;
}

.proposal-form-section:last-of-type {
  border-bottom: 0;
}

.proposal-section-head {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.proposal-section-index {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--app-accent);
  background: rgba(124, 255, 107, .055);
  border: 1px solid rgba(124, 255, 107, .14);
  border-radius: 8px;
  font-size: 6px;
  font-weight: 950;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.proposal-section-head > div {
  display: grid;
  gap: 2px;
}

.proposal-section-head strong {
  color: #edf4ef;
  font-size: 10px;
}

.proposal-section-head small {
  color: #69766d;
  font-size: 6.5px;
}

/*
  Grade fixa:
  - todo campo comum ocupa metade
  - .proposal-field-full ocupa a linha toda
  Não existe campo "sobrando" ou desalinhado.
*/
.proposal-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 15px;
  align-items: start;
}

.proposal-field {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-rows: auto 46px;
  gap: 6px;
  align-content: start;
}

.proposal-field-full {
  grid-column: 1 / -1;
}

.proposal-field label {
  min-height: 12px;
  display: flex;
  align-items: center;
  color: #89968d;
  font-size: 7.2px;
  font-weight: 850;
}

.proposal-field input,
.proposal-field select {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 13px;
  color: #ecf3ee;
  background: #121a14;
  border: 1px solid rgba(124, 255, 107, .10);
  border-radius: 11px;
  outline: none;
  font-size: 9.3px;
  transition:
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}

.proposal-field input::placeholder {
  color: #536058;
}

.proposal-field input:hover {
  background: #141d16;
  border-color: rgba(124, 255, 107, .17);
}

.proposal-field input:focus {
  background: #151f18;
  border-color: rgba(124, 255, 107, .48);
  box-shadow: 0 0 0 3px rgba(124, 255, 107, .05);
}

/* Select próprio do Corban ocupa exatamente a mesma altura do input. */
.proposal-field .corban-employee-select {
  width: 100%;
  min-width: 0;
  height: 46px;
}

.proposal-field .corban-employee-select-trigger {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  color: #ecf3ee;
  background: #121a14;
  border: 1px solid rgba(124, 255, 107, .10);
  border-radius: 11px;
  font-size: 9.3px;
}

.proposal-field .corban-employee-select-trigger:hover {
  background: #141d16;
  border-color: rgba(124, 255, 107, .17);
}

.proposal-field .corban-employee-select.is-open
  .corban-employee-select-trigger {
  background: #151f18;
  border-color: rgba(124, 255, 107, .48);
  box-shadow: 0 0 0 3px rgba(124, 255, 107, .05);
}

.proposal-field .corban-employee-select-menu {
  z-index: 220;
  margin-top: 1px;
  padding: 5px;
  background: #111913;
  border: 1px solid rgba(124, 255, 107, .16);
  border-radius: 10px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .43);
}

.proposal-field .corban-employee-select-option {
  min-height: 37px;
  padding: 0 10px;
  color: #dce5de;
  border-radius: 7px;
  font-size: 8.4px;
}

.proposal-field .corban-employee-select-option:hover,
.proposal-field .corban-employee-select-option:focus-visible,
.proposal-field .corban-employee-select-option.is-selected {
  color: var(--app-accent);
  background: rgba(124, 255, 107, .065);
}

/* =========================================================
   DESBLOQUEADO — compacto e alinhado
   ========================================================= */

.proposal-segmented {
  height: 46px;
  padding: 3px;
  display: grid;
  overflow: hidden;
  background: #111914;
  border: 1px solid rgba(124, 255, 107, .09);
  border-radius: 11px;
}

.proposal-segmented.three {
  grid-template-columns: repeat(3, 1fr);
}

.proposal-segmented button {
  min-width: 0;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #748078;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
}

.proposal-segmented button small {
  font-size: 6.8px;
  font-weight: 850;
}

.proposal-segmented button.active {
  color: var(--app-accent);
  background: rgba(124, 255, 107, .075);
  box-shadow: inset 0 0 0 1px rgba(124, 255, 107, .13);
}

.proposal-segmented button[data-unlocked="YES"].active {
  color: var(--app-mint);
  background: rgba(93, 242, 194, .065);
}

.proposal-segmented button[data-unlocked="NO"].active {
  color: #ff7f8f;
  background: rgba(255, 115, 131, .06);
}

/* =========================================================
   CASCATA — integrada, sem parecer outro formulário
   ========================================================= */

.proposal-cascade-block {
  padding: 13px;
  display: grid;
  gap: 12px;
  background: #101812;
  border: 1px solid rgba(124, 255, 107, .085);
  border-radius: 12px;
}

.proposal-cascade-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.proposal-cascade-top > span {
  color: #68756c;
  font-size: 5.7px;
  font-weight: 950;
  letter-spacing: .15em;
}

.proposal-cascade-flow {
  display: flex;
  align-items: center;
  gap: 5px;
}

.proposal-cascade-flow span {
  width: 21px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #59665d;
  background: #0c120e;
  border: 1px solid rgba(124, 255, 107, .08);
  border-radius: 5px;
  font-size: 5.2px;
  font-weight: 950;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.proposal-cascade-flow span.active {
  color: var(--app-accent);
  border-color: rgba(124, 255, 107, .24);
}

.proposal-cascade-flow i {
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(124, 255, 107, .34), transparent);
}

.proposal-cascade-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 12px;
}

.proposal-cascade-hint {
  color: #617067;
  font-size: 6.2px;
  line-height: 1.4;
}

/* =========================================================
   VALORES — mesma régua de 46px
   ========================================================= */

.proposal-money-shell,
.proposal-percent-shell {
  width: 100%;
  height: 46px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #121a14;
  border: 1px solid rgba(124, 255, 107, .10);
  border-radius: 11px;
}

.proposal-money-shell {
  grid-template-columns: auto minmax(0, 1fr);
}

.proposal-percent-shell {
  grid-template-columns: minmax(0, 1fr) auto;
}

.proposal-money-shell > span,
.proposal-percent-shell > span {
  padding: 0 11px;
  color: #68756d;
  font-size: 8px;
  font-weight: 850;
}

.proposal-money-shell input,
.proposal-percent-shell input {
  width: 100%;
  height: 44px !important;
  min-width: 0;
  padding: 0 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.proposal-finance-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.proposal-finance-box {
  min-width: 0;
  padding: 11px;
  display: grid;
  gap: 7px;
  background: #101812;
  border: 1px solid rgba(255, 255, 255, .045);
  border-radius: 11px;
}

.proposal-finance-box > small {
  color: #748078;
  font-size: 5.8px;
  font-weight: 950;
  letter-spacing: .10em;
}

.proposal-finance-box > span,
.proposal-percent-snapshot-note {
  color: #617067;
  font-size: 6.1px;
  line-height: 1.4;
}

.proposal-readonly-percent input {
  color: var(--app-accent) !important;
  font-weight: 950;
}

.proposal-readonly-money input {
  color: var(--app-mint) !important;
  font-weight: 950;
}

/* =========================================================
   RODAPÉ — sem cobrir visualmente o formulário
   ========================================================= */

.proposal-form-error {
  margin-top: 14px;
}

.proposal-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 25;
  margin: 0 -18px -18px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(12, 19, 14, .96);
  border-top: 1px solid rgba(124, 255, 107, .075);
  border-radius: 0 0 15px 15px;
  backdrop-filter: blur(14px);
}

.proposal-form-actions > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.proposal-save-hint {
  max-width: 300px;
  color: #637067;
  font-size: 6.1px;
}

.proposal-cancel-button,
.proposal-save-button {
  min-height: 41px;
  padding: 0 15px;
  border-radius: 10px;
  font-size: 8.3px;
  font-weight: 900;
}

.proposal-cancel-button {
  color: #c5cec8;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .07);
}

.proposal-save-button {
  min-width: 145px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  color: #071008;
  background: linear-gradient(105deg, #aef85b, #69ebc3);
  border: 0;
}

.proposal-save-button i {
  font-style: normal;
  font-size: 12px;
}

/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-app-theme="light"] .proposal-drawer {
  color-scheme: light;
  background: #f4f5f1;
  border-left-color: #dce3d8;
  box-shadow: -26px 0 70px rgba(45, 55, 47, .12);
}

html[data-app-theme="light"] .proposal-drawer-backdrop {
  background: rgba(43, 49, 44, .25);
}

html[data-app-theme="light"] .proposal-drawer-head-minimal {
  background: rgba(247, 248, 244, .96);
  border-color: #dfe5dc;
}

html[data-app-theme="light"] .proposal-form {
  background: #ffffff;
  border-color: #dce3d8;
  box-shadow: 0 15px 40px rgba(46, 57, 48, .055);
}

html[data-app-theme="light"] .proposal-form-section {
  border-color: #e4e9e1;
}

html[data-app-theme="light"] .proposal-section-head strong {
  color: #1b231c;
}

html[data-app-theme="light"] .proposal-field label {
  color: #6f7a71;
}

html[data-app-theme="light"] .proposal-field input,
html[data-app-theme="light"] .proposal-field select,
html[data-app-theme="light"] .proposal-field .corban-employee-select-trigger,
html[data-app-theme="light"] .proposal-money-shell,
html[data-app-theme="light"] .proposal-percent-shell,
html[data-app-theme="light"] .proposal-segmented {
  color: #1f271f;
  background: #fafbf8;
  border-color: #dce3d9;
}

html[data-app-theme="light"] .proposal-field input:hover,
html[data-app-theme="light"] .proposal-field .corban-employee-select-trigger:hover {
  background: #ffffff;
  border-color: #cad6c5;
}

html[data-app-theme="light"] .proposal-field input:focus,
html[data-app-theme="light"] .proposal-field .corban-employee-select.is-open
  .corban-employee-select-trigger {
  background: #ffffff;
  border-color: #789e5d;
  box-shadow: 0 0 0 3px rgba(95, 139, 61, .075);
}

html[data-app-theme="light"] .proposal-field .corban-employee-select-menu {
  background: #ffffff;
  border-color: #d8dfd5;
  box-shadow: 0 18px 42px rgba(49, 58, 51, .13);
}

html[data-app-theme="light"] .proposal-field .corban-employee-select-option {
  color: #293129;
}

html[data-app-theme="light"] .proposal-field .corban-employee-select-option:hover,
html[data-app-theme="light"] .proposal-field .corban-employee-select-option.is-selected {
  color: #527b37;
  background: #f0f6ec;
}

html[data-app-theme="light"] .proposal-cascade-block,
html[data-app-theme="light"] .proposal-finance-box {
  background: #f8faf6;
  border-color: #dfe6db;
}

html[data-app-theme="light"] .proposal-cascade-flow span {
  background: #ffffff;
  border-color: #dfe5dc;
}

html[data-app-theme="light"] .proposal-form-actions {
  background: rgba(249, 250, 247, .97);
  border-color: #dfe5dc;
}

html[data-app-theme="light"] .proposal-cancel-button {
  color: #505a52;
  background: #ffffff;
  border-color: #d8dfd5;
}

html[data-app-theme="light"] .proposal-save-button {
  color: #ffffff;
  background: linear-gradient(105deg, #658f47, #3e987c);
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 660px) {
  .proposal-drawer {
    width: 100vw;
  }

  .proposal-form {
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .proposal-section-grid,
  .proposal-cascade-grid,
  .proposal-finance-summary {
    grid-template-columns: 1fr;
  }

  .proposal-field-full {
    grid-column: auto;
  }

  .proposal-form-actions {
    margin-left: -12px;
    margin-right: -12px;
  }

  .proposal-save-hint {
    display: none;
  }
}

/* =========================================================
   FUNCIONÁRIOS — LISTA E CADASTRO
   ========================================================= */

.employees-workspace {
  min-width: 0;
}

.employees-shell {
  min-width: 0;
  padding: 18px 22px 24px;
}

.employees-searchbar {
  min-height: 48px;
  padding: 6px 14px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: center;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 15px;
}

.employees-search {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.employees-search svg {
  width: 16px;
  height: 16px;
  stroke: var(--app-muted-2);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.employees-search input {
  width: 100%;
  height: 30px;
  padding: 0;
  color: var(--app-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.employees-search input::placeholder {
  color: var(--app-muted-2);
}

.employees-license-counter {
  padding: 0;
  color: var(--app-muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.employees-panel {
  min-height: calc(100vh - 184px);
  margin-top: 12px;
  overflow: hidden;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 15px;
}

.employees-panel-top {
  min-height: 58px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--app-border);
}

.employees-panel-signal {
  display: flex;
  align-items: center;
  gap: 5px;
}

.employees-panel-signal span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--app-accent);
}

.employees-panel-signal span:nth-child(2) {
  background: var(--app-mint);
  opacity: .7;
}

.employees-panel-signal i {
  width: 48px;
  height: 1px;
  margin-left: 3px;
  background: linear-gradient(90deg, var(--app-accent), transparent);
}

.employee-new-button,
.employees-empty button {
  min-height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--app-text);
  background: var(--app-control);
  border: 1px solid color-mix(in srgb, var(--app-accent) 33%, var(--app-border));
  border-radius: 9px;
  font-size: 8px;
  font-weight: 900;
}

.employee-new-button:hover,
.employees-empty button:hover {
  color: #09100a;
  background: linear-gradient(105deg, #a9f855, #6ef1c9);
  border-color: transparent;
}

.employee-new-button span {
  font-size: 14px;
}

.employees-list {
  padding: 8px 12px 14px;
  display: grid;
  gap: 7px;
}

.employee-row {
  width: 100%;
  min-height: 68px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns:
    38px
    minmax(165px, 1.7fr)
    minmax(92px, .8fr)
    minmax(120px, 1fr)
    minmax(120px, 1fr)
    minmax(115px, 1fr)
    minmax(95px, .8fr)
    82px
    20px;
  gap: 12px;
  align-items: center;
  color: var(--app-text);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--app-accent) 3%, transparent),
      transparent 22%
    ),
    var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  text-align: left;
  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease;
}

.employee-row:not(:disabled) {
  cursor: pointer;
}

.employee-row:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-border));
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--app-accent) 5%, transparent),
      transparent 28%
    ),
    var(--app-surface-2);
}

.employee-row.is-master {
  opacity: .82;
  cursor: default;
}

.employee-row-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 7%, var(--app-control));
  border: 1px solid color-mix(in srgb, var(--app-accent) 23%, var(--app-border));
  border-radius: 10px;
  font-size: 8px;
  font-weight: 900;
}

.employee-row-main,
.employee-row-cell {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.employee-row-main strong,
.employee-row-cell strong {
  overflow: hidden;
  color: var(--app-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.employee-row-main strong {
  font-size: 10px;
}

.employee-row-main small,
.employee-row-cell small {
  overflow: hidden;
  color: var(--app-muted-2);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 6.5px;
}

.employee-row-cell small {
  letter-spacing: .08em;
  font-weight: 900;
}

.employee-license-cell strong.consumes {
  color: var(--app-accent);
}

.employee-license-cell strong.free {
  color: var(--app-muted);
}

.employee-row-status {
  justify-self: start;
  padding: 5px 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  font-size: 6.5px;
  font-weight: 900;
}

.employee-row-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.employee-row-status.active {
  color: var(--app-mint);
  background: color-mix(in srgb, var(--app-mint) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-mint) 22%, transparent);
}

.employee-row-status.active i {
  background: var(--app-mint);
}

.employee-row-status.inactive {
  color: #ff8290;
  background: rgba(255, 83, 108, .06);
  border: 1px solid rgba(255, 83, 108, .18);
}

.employee-row-status.inactive i {
  background: #ff8290;
}

.employee-row-arrow {
  color: var(--app-muted-2);
  font-size: 19px;
}

.employees-empty {
  min-height: calc(100vh - 250px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.employees-empty-symbol {
  position: relative;
  width: 50px;
  height: 50px;
  margin-bottom: 4px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 24%, var(--app-border));
  border-radius: 15px;
}

.employees-empty-symbol span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 1px solid var(--app-accent);
  border-radius: 50%;
  transform: translate(-50%, -63%);
}

.employees-empty-symbol i {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 23px;
  height: 10px;
  border: 1px solid var(--app-accent);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  transform: translateX(-50%);
}

.employees-empty strong {
  color: var(--app-text);
  font-size: 13px;
}

.employees-empty small {
  color: var(--app-muted);
  font-size: 8px;
}

/* =========================================================
   FUNCIONÁRIOS — MODAL
   ========================================================= */

.employee-modal-backdrop {
  z-index: 76;
}

.employee-modal-card {
  width: min(750px, calc(100vw - 34px));
  max-height: calc(100vh - 34px);
  overflow-y: auto;
  color: var(--app-text);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--app-accent) 5%, transparent), transparent 30%),
    var(--app-surface);
  border: 1px solid color-mix(in srgb, var(--app-accent) 22%, var(--app-border));
  border-radius: 19px;
  box-shadow: 0 34px 110px rgba(0, 0, 0, .4);
}

.employee-modal-head {
  min-height: 82px;
  padding: 17px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--app-border);
}

.employee-modal-head small {
  color: var(--app-accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .15em;
}

.employee-modal-head h3 {
  margin: 5px 0 0;
  font-size: 19px;
}

.employee-form {
  padding: 18px 20px 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.employee-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.employee-field-full {
  grid-column: 1 / -1;
}

.employee-field label {
  color: var(--app-muted);
  font-size: 8px;
  font-weight: 900;
}

.employee-field input,
.employee-field select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  color: var(--app-text);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  outline: 0;
  font-size: 10px;
}

.employee-field select {
  padding-right: 34px;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--app-muted) 50%)
      calc(100% - 16px) 19px / 5px 5px no-repeat,
    linear-gradient(135deg, var(--app-muted) 50%, transparent 50%)
      calc(100% - 12px) 19px / 5px 5px no-repeat,
    var(--app-control);
}

.employee-field input:focus,
.employee-field select:focus {
  border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 8%, transparent);
}

.employee-field-hint {
  color: var(--app-muted-2);
  font-size: 7px;
  line-height: 1.4;
}

.employee-individual-commission {
  padding: 13px;
  background: color-mix(in srgb, var(--app-accent) 2.5%, var(--app-surface-2));
  border: 1px solid var(--app-border);
  border-radius: 12px;
}

.employee-commission-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.employee-commission-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.employee-commission-head strong {
  font-size: 9px;
}

.employee-commission-head small {
  color: var(--app-muted);
  font-size: 7px;
}

.employee-commission-head button {
  min-height: 32px;
  padding: 0 10px;
  color: var(--app-accent);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--app-accent) 26%, var(--app-border));
  border-radius: 8px;
  font-size: 7px;
  font-weight: 900;
  white-space: nowrap;
}

.employee-commission-columns,
.employee-commission-rule {
  display: grid;
  grid-template-columns: 1.35fr 1fr .75fr 34px;
  gap: 8px;
  align-items: center;
}

.employee-commission-columns {
  margin-top: 13px;
  padding: 0 3px;
  color: var(--app-muted-2);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .06em;
}

.employee-commission-rules {
  margin-top: 6px;
  display: grid;
  gap: 7px;
}

.employee-commission-rule > input,
.employee-rule-money,
.employee-rule-percent {
  height: 40px;
  min-width: 0;
  color: var(--app-text);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 9px;
}

.employee-commission-rule > input {
  width: 100%;
  padding: 0 10px;
  outline: 0;
  font-size: 9px;
}

.employee-rule-money,
.employee-rule-percent {
  display: grid;
  align-items: center;
  overflow: hidden;
}

.employee-rule-money {
  grid-template-columns: auto 1fr;
}

.employee-rule-percent {
  grid-template-columns: 1fr auto;
}

.employee-rule-money span,
.employee-rule-percent span {
  padding: 0 9px;
  color: var(--app-muted-2);
  font-size: 7px;
  font-weight: 800;
}

.employee-rule-money input,
.employee-rule-percent input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 2px;
  color: var(--app-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 9px;
}

.employee-rule-remove {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #ff8290;
  background: rgba(255, 83, 108, .04);
  border: 1px solid rgba(255, 83, 108, .16);
  border-radius: 8px;
  font-size: 15px;
}

.employee-form-error {
  grid-column: 1 / -1;
}

.employee-modal-actions {
  grid-column: 1 / -1;
  padding-top: 5px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.employee-save-button {
  min-height: 40px;
  padding: 0 15px;
  color: #09100a;
  background: linear-gradient(105deg, #a9f855, #6ef1c9);
  border: 1px solid rgba(124, 255, 107, .34);
  border-radius: 10px;
  font-size: 9px;
  font-weight: 900;
}

html[data-app-theme="light"] .employees-searchbar,
html[data-app-theme="light"] .employees-panel,
html[data-app-theme="light"] .employee-modal-card {
  background: #f8f9f6;
}

html[data-app-theme="light"] .employee-row,
html[data-app-theme="light"] .employee-individual-commission,
html[data-app-theme="light"] .employee-field input,
html[data-app-theme="light"] .employee-field select,
html[data-app-theme="light"] .employee-commission-rule > input,
html[data-app-theme="light"] .employee-rule-money,
html[data-app-theme="light"] .employee-rule-percent {
  background-color: #ffffff;
}

html[data-app-theme="light"] .employee-save-button,
html[data-app-theme="light"] .employee-new-button:hover,
html[data-app-theme="light"] .employees-empty button:hover {
  color: #ffffff;
  background: linear-gradient(105deg, #587f3b, #3e987c);
}

@media (max-width: 1040px) {
  .employee-row {
    grid-template-columns:
      38px
      minmax(150px, 1.4fr)
      minmax(90px, .8fr)
      minmax(110px, 1fr)
      80px
      20px;
  }

  .employee-row-cell:nth-of-type(4),
  .employee-license-cell {
    display: none;
  }
}

@media (max-width: 680px) {
  .employees-shell {
    padding: 10px;
  }

  .employees-searchbar {
    grid-template-columns: 1fr;
  }

  .employees-license-counter {
    justify-self: start;
  }

  .employee-row {
    grid-template-columns: 38px 1fr 78px 20px;
  }

  .employee-row-cell {
    display: none;
  }

  .employee-form {
    grid-template-columns: 1fr;
    padding-left: 14px;
    padding-right: 14px;
  }

  .employee-field-full,
  .employee-form-error,
  .employee-modal-actions {
    grid-column: auto;
  }

  .employee-commission-columns {
    display: none;
  }

  .employee-commission-rule {
    grid-template-columns: 1fr 1fr 34px;
  }

  .employee-commission-rule > input {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   FUNCIONÁRIOS — HIERARQUIA / ORGANOGRAMA
   Base operacional equivalente ao Prospecta Ponto.
   ========================================================= */

.employee-hierarchy-fields {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--app-accent) 3.5%, transparent),
      transparent 55%
    ),
    var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 12px;
}

.employee-hierarchy-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.employee-hierarchy-note > span {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--app-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px color-mix(in srgb, var(--app-accent) 35%, transparent);
}

.employee-hierarchy-note small {
  color: var(--app-muted);
  font-size: 7px;
}

.employees-panel-left,
.employees-panel-actions,
.employees-view-switch {
  display: flex;
  align-items: center;
}

.employees-panel-left {
  gap: 13px;
}

.employees-panel-actions {
  gap: 7px;
}

.employees-view-switch {
  padding: 3px;
  gap: 3px;
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 9px;
}

.employees-view-switch button {
  min-height: 29px;
  padding: 0 10px;
  color: var(--app-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 7px;
  font-weight: 900;
}

.employees-view-switch button.active {
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 7%, var(--app-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 18%, transparent);
}

.employees-organogram-action {
  min-height: 34px;
  padding: 0 10px;
  color: var(--app-text);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  font-size: 7px;
  font-weight: 900;
}

.employees-organogram-action:hover {
  color: var(--app-accent);
  border-color: color-mix(in srgb, var(--app-accent) 28%, var(--app-border));
}

.employees-organogram-action span {
  min-width: 17px;
  height: 17px;
  margin-left: 4px;
  display: inline-grid;
  place-items: center;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 7%, transparent);
  border-radius: 999px;
  font-size: 6px;
}

.employees-organogram-view {
  min-height: calc(100vh - 250px);
  padding: 14px;
}

.corban-org-legend {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}

.corban-org-legend span {
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--app-muted);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  font-size: 6.5px;
  font-weight: 900;
}

.corban-org-legend i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.corban-org-legend .gestor i { background: var(--app-accent); }
.corban-org-legend .supervisor i { background: var(--app-mint); }
.corban-org-legend .colaborador i { background: var(--app-violet); }

.corban-org-grid {
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 10px;
}

.corban-org-managers {
  min-width: max-content;
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.corban-org-manager-column {
  width: 320px;
  min-height: 250px;
  padding: 10px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-accent) 3.5%, transparent),
      transparent 35%
    ),
    var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 14px;
}

.corban-org-manager-top {
  margin-bottom: 10px;
}

.corban-org-team-label {
  margin: 2px 4px 7px;
  color: var(--app-muted-2);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .12em;
}

.corban-org-person {
  min-height: 54px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  user-select: none;
}

.corban-org-person[draggable="true"] {
  cursor: grab;
}

.corban-org-person[draggable="true"]:active {
  cursor: grabbing;
}

.corban-org-person.dragging {
  opacity: .36;
}

.corban-org-person.gestor {
  border-color: color-mix(in srgb, var(--app-accent) 34%, var(--app-border));
}

.corban-org-person.supervisor {
  border-color: color-mix(in srgb, var(--app-mint) 27%, var(--app-border));
}

.corban-org-person.colaborador {
  border-color: color-mix(in srgb, var(--app-violet) 23%, var(--app-border));
}

.corban-org-avatar {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 6%, var(--app-control));
  border: 1px solid color-mix(in srgb, var(--app-accent) 18%, var(--app-border));
  border-radius: 9px;
  font-size: 7px;
  font-weight: 900;
}

.corban-org-person > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.corban-org-person strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
}

.corban-org-person small {
  overflow: hidden;
  color: var(--app-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 6.5px;
}

.corban-org-grip {
  color: var(--app-muted-2);
  font-size: 11px;
  font-style: normal;
  letter-spacing: -3px;
}

.corban-org-supervisor-block {
  margin-bottom: 8px;
  padding: 7px;
  background: color-mix(in srgb, var(--app-mint) 2%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-mint) 12%, var(--app-border));
  border-radius: 11px;
}

.corban-org-drop {
  min-height: 45px;
  margin-top: 7px;
  padding: 6px;
  display: grid;
  gap: 6px;
  border: 1px dashed color-mix(in srgb, var(--app-accent) 15%, var(--app-border));
  border-radius: 9px;
  transition:
    border-color .12s ease,
    background .12s ease,
    box-shadow .12s ease;
}

.corban-org-drop.drag-over {
  background: color-mix(in srgb, var(--app-accent) 6%, transparent);
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 6%, transparent);
}

.corban-org-placeholder {
  min-height: 34px;
  display: grid;
  place-items: center;
  color: var(--app-muted-2);
  font-size: 6.5px;
  text-align: center;
}

.corban-org-status {
  margin-top: 10px;
  color: var(--app-muted);
  font-size: 7px;
}

/* Sem equipe */

.employees-unassigned-backdrop {
  z-index: 88;
}

.employees-unassigned-card {
  width: min(520px, calc(100vw - 30px));
  max-height: min(650px, calc(100vh - 30px));
  overflow: hidden;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid color-mix(in srgb, var(--app-accent) 22%, var(--app-border));
  border-radius: 17px;
  box-shadow: 0 30px 100px rgba(0,0,0,.4);
}

.employees-unassigned-head {
  min-height: 76px;
  padding: 15px 17px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--app-border);
}

.employees-unassigned-head small {
  color: var(--app-accent);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .14em;
}

.employees-unassigned-head h3 {
  margin: 4px 0 0;
  font-size: 17px;
}

.employees-unassigned-list {
  max-height: 540px;
  padding: 10px;
  overflow-y: auto;
  display: grid;
  gap: 7px;
}

/* Alvos rápidos + remover da equipe */

.employees-org-trash {
  position: fixed;
  left: 50%;
  bottom: 25px;
  z-index: 110;
  min-width: 250px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #ff8996;
  background: color-mix(in srgb, #ff5268 8%, var(--app-surface));
  border: 1px solid rgba(255, 82, 104, .24);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.34);
  transform: translate(-50%, 120px);
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
}

.employees-org-trash.active {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.employees-org-trash.drag-over {
  background: color-mix(in srgb, #ff5268 14%, var(--app-surface));
  border-color: #ff667b;
  transform: translate(-50%, -4px) scale(1.02);
}

.employees-org-trash strong {
  font-size: 16px;
}

.employees-org-trash span {
  font-size: 7px;
  font-weight: 850;
}

.employees-org-targets {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 109;
  width: min(310px, calc(100vw - 36px));
  max-height: 55vh;
  padding: 10px;
  overflow: hidden;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid color-mix(in srgb, var(--app-accent) 20%, var(--app-border));
  border-radius: 13px;
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
  transform: translateY(30px);
  opacity: 0;
  pointer-events: none;
  transition: .17s ease;
}

.employees-org-targets.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.employees-org-targets > div:first-child {
  padding: 3px 3px 9px;
  display: grid;
  gap: 2px;
}

.employees-org-targets > div:first-child strong {
  font-size: 8px;
}

.employees-org-targets > div:first-child span {
  color: var(--app-muted);
  font-size: 6.5px;
}

.employees-org-targets-list {
  max-height: 43vh;
  overflow-y: auto;
  display: grid;
  gap: 6px;
}

.corban-org-quick-target {
  margin-top: 0;
  min-height: 50px;
  padding: 8px 9px;
  cursor: default;
}

.corban-org-quick-target strong {
  font-size: 8px;
}

.corban-org-quick-target span {
  color: var(--app-muted);
  font-size: 6.5px;
}

/* Tema claro */

html[data-app-theme="light"] .employee-hierarchy-fields,
html[data-app-theme="light"] .corban-org-manager-column,
html[data-app-theme="light"] .corban-org-person,
html[data-app-theme="light"] .employees-unassigned-card,
html[data-app-theme="light"] .employees-org-targets {
  background-color: #ffffff;
}

@media (max-width: 760px) {
  .employee-hierarchy-fields {
    grid-template-columns: 1fr;
  }

  .employee-hierarchy-note {
    grid-column: auto;
  }

  .employees-panel-top {
    align-items: flex-start;
    gap: 10px;
  }

  .employees-panel-left,
  .employees-panel-actions {
    flex-wrap: wrap;
  }

  .corban-org-manager-column {
    width: 285px;
  }
}

/* =========================================================
   FUNCIONÁRIOS — DROPDOWNS PRÓPRIOS DO PROSPECTA CORBAN
   Não usa o menu visual nativo do Chrome/Windows.
   ========================================================= */

.employee-field .corban-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.corban-employee-select {
  position: relative;
  width: 100%;
}

.corban-employee-select-trigger {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--app-text);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  outline: 0;
  text-align: left;
  font-size: 10px;
  cursor: pointer;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.corban-employee-select-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.corban-employee-select-trigger:hover {
  border-color: color-mix(
    in srgb,
    var(--app-accent) 28%,
    var(--app-border)
  );
}

.corban-employee-select.is-open .corban-employee-select-trigger,
.corban-employee-select-trigger:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--app-accent) 58%,
    var(--app-border)
  );
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--app-accent) 8%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--app-accent) 2.5%, transparent);
}

.corban-employee-select-chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 1.5px solid var(--app-muted);
  border-bottom: 1.5px solid var(--app-muted);
  transform: rotate(45deg) translateY(-2px);
  transition:
    transform .16s ease,
    border-color .16s ease;
}

.corban-employee-select.is-open .corban-employee-select-chevron {
  border-color: var(--app-accent);
  transform: rotate(225deg) translate(-2px, -1px);
}

.corban-employee-select-menu {
  position: absolute;
  z-index: 160;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 235px;
  padding: 6px;
  overflow-y: auto;
  display: grid;
  gap: 3px;
  color: var(--app-text);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-accent) 2.5%, transparent),
      transparent 42%
    ),
    var(--app-surface);
  border: 1px solid color-mix(
    in srgb,
    var(--app-accent) 22%,
    var(--app-border)
  );
  border-radius: 11px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, .28),
    0 0 0 1px color-mix(in srgb, var(--app-accent) 3%, transparent);
}

.corban-employee-select-option {
  width: 100%;
  min-height: 35px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--app-text);
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
  font-size: 9px;
  font-weight: 760;
  cursor: pointer;
  transition:
    color .12s ease,
    background .12s ease,
    transform .12s ease;
}

.corban-employee-select-option:hover,
.corban-employee-select-option:focus-visible {
  outline: 0;
  color: var(--app-accent);
  background: color-mix(
    in srgb,
    var(--app-accent) 8%,
    transparent
  );
}

.corban-employee-select-option.is-selected {
  color: var(--app-accent);
  background: color-mix(
    in srgb,
    var(--app-accent) 6%,
    transparent
  );
}

.corban-employee-select-option.is-selected::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--app-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px color-mix(
    in srgb,
    var(--app-accent) 45%,
    transparent
  );
}

.corban-employee-select-option:disabled {
  opacity: .45;
  cursor: not-allowed;
}

html[data-app-theme="light"] .corban-employee-select-trigger,
html[data-app-theme="light"] .corban-employee-select-menu {
  background-color: #ffffff;
}

/* A barra superior da busca fica propositalmente mais compacta. */
.employees-panel {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .employees-searchbar {
    min-height: 46px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* =========================================================
   FUNCIONÁRIOS — FOTO DE PERFIL NOS AVATARES
   A foto ocupa exatamente o lugar das iniciais.
   Sem foto = iniciais continuam normalmente.
   ========================================================= */

.employee-photo-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 7%, var(--app-control));
  border: 1px solid color-mix(in srgb, var(--app-accent) 23%, var(--app-border));
}

.employee-avatar-list {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 8px;
  font-weight: 900;
}

.employee-avatar-organogram {
  width: 33px;
  height: 33px;
  border-radius: 9px;
  font-size: 7px;
  font-weight: 900;
}

.employee-photo-fallback {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.employee-photo-image {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .12s ease;
}

.employee-photo-avatar.has-photo .employee-photo-image {
  opacity: 1;
}

.employee-photo-avatar.has-photo .employee-photo-fallback {
  visibility: hidden;
}

/* O avatar antigo deixa de desenhar fundo/borda quando substituído pelo novo. */
.employee-row-avatar,
.corban-org-avatar {
  display: none !important;
}

html[data-app-theme="light"] .employee-photo-avatar {
  background: #f3f7ee;
}

/* =========================================================
   TABELAS — PROMOTORA > BANCO > TABELA > %
   ========================================================= */

.tables-workspace {
  min-width: 0;
}

.tables-shell {
  min-width: 0;
  padding: 18px 22px 24px;
}

.tables-searchbar {
  min-height: 48px;
  padding: 6px 14px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: center;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 15px;
}

.tables-search {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tables-search svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: var(--app-muted-2);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.tables-search input {
  width: 100%;
  height: 30px;
  padding: 0;
  color: var(--app-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 11px;
}

.tables-search input::placeholder {
  color: var(--app-muted-2);
}

.tables-catalog-counter {
  color: var(--app-muted);
  font-size: 7px;
  font-weight: 850;
  white-space: nowrap;
}

.tables-panel {
  min-height: calc(100vh - 170px);
  margin-top: 10px;
  overflow: hidden;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 15px;
}

.tables-panel-top {
  min-height: 56px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--app-border);
}

.tables-panel-signal {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tables-panel-signal span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--app-accent);
}

.tables-panel-signal span:nth-child(2) {
  background: var(--app-mint);
  opacity: .72;
}

.tables-panel-signal i {
  width: 48px;
  height: 1px;
  margin-left: 3px;
  background: linear-gradient(90deg, var(--app-accent), transparent);
}

.tables-primary-action,
.tables-catalog-empty button {
  min-height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--app-text);
  background: var(--app-control);
  border: 1px solid color-mix(in srgb, var(--app-accent) 32%, var(--app-border));
  border-radius: 9px;
  font-size: 8px;
  font-weight: 900;
}

.tables-primary-action:hover,
.tables-catalog-empty button:hover {
  color: #09100a;
  background: linear-gradient(105deg, #a9f855, #6ef1c9);
  border-color: transparent;
}

.tables-primary-action span {
  font-size: 14px;
}

.tables-catalog-list {
  padding: 11px 12px 16px;
  display: grid;
  gap: 10px;
}

.table-promoter-card {
  overflow: hidden;
  background:
    linear-gradient(
      115deg,
      color-mix(in srgb, var(--app-accent) 3.5%, transparent),
      transparent 28%
    ),
    var(--app-surface-2);
  border: 1px solid color-mix(in srgb, var(--app-accent) 20%, var(--app-border));
  border-radius: 13px;
}

.table-promoter-head {
  min-height: 61px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 28px 36px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.table-promoter-symbol {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 27%, var(--app-border));
  border-radius: 10px;
}

.table-promoter-symbol span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  background: color-mix(in srgb, var(--app-accent) 16%, transparent);
  border: 1px solid var(--app-accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

.table-promoter-symbol i {
  position: absolute;
  inset: 6px;
  border: 1px dashed color-mix(in srgb, var(--app-accent) 20%, transparent);
  border-radius: 7px;
}

.table-promoter-name,
.table-bank-name {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.table-promoter-name strong {
  overflow: hidden;
  color: var(--app-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.table-promoter-name small,
.table-bank-name small {
  color: var(--app-muted-2);
  font-size: 6.5px;
}

.table-promoter-actions,
.table-bank-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.table-catalog-collapse {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: var(--app-muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
}

.table-catalog-collapse:hover {
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 5%, transparent);
}

.table-catalog-collapse i {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .15s ease;
}

.table-promoter-card.is-collapsed
  > .table-promoter-head
  .table-catalog-collapse i,
.table-bank-card.is-collapsed
  > .table-bank-head
  .table-catalog-collapse i {
  transform: rotate(-45deg);
}

.table-promoter-card.is-collapsed > .table-promoter-body,
.table-bank-card.is-collapsed > .table-bank-body {
  display: none;
}

.table-catalog-add-inline {
  min-height: 31px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent) 20%, var(--app-border));
  border-radius: 8px;
  font-size: 7px;
  font-weight: 900;
}

.table-catalog-add-inline:hover {
  background: color-mix(in srgb, var(--app-accent) 7%, transparent);
  border-color: color-mix(in srgb, var(--app-accent) 36%, var(--app-border));
}

.table-catalog-add-inline span {
  font-size: 12px;
  line-height: 1;
}

.table-catalog-icon-button {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: var(--app-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
}

.table-catalog-icon-button:hover {
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 5%, transparent);
  border-color: color-mix(in srgb, var(--app-accent) 18%, transparent);
}

.table-catalog-icon-button svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.table-promoter-body {
  padding: 0 10px 10px 46px;
  display: grid;
  gap: 8px;
}

.table-bank-card {
  overflow: hidden;
  background: color-mix(in srgb, var(--app-surface) 90%, var(--app-mint) 1.5%);
  border: 1px solid var(--app-border);
  border-radius: 11px;
}

.table-bank-head {
  min-height: 53px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 26px 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.table-bank-symbol {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: var(--app-mint);
  background: color-mix(in srgb, var(--app-mint) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-mint) 18%, var(--app-border));
  border-radius: 8px;
}

.table-bank-symbol svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.table-bank-name strong {
  overflow: hidden;
  color: var(--app-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.table-bank-body {
  padding: 0 9px 9px 65px;
  display: grid;
  gap: 5px;
}

.table-catalog-item-row {
  min-height: 43px;
  padding: 6px 6px 6px 9px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 80px 31px;
  gap: 8px;
  align-items: center;
  background: var(--app-surface-2);
  border: 1px solid color-mix(in srgb, var(--app-border) 84%, transparent);
  border-radius: 9px;
}

.table-catalog-item-row:hover {
  border-color: color-mix(in srgb, var(--app-accent) 21%, var(--app-border));
}

.table-catalog-item-mark {
  width: 5px;
  height: 5px;
  background: var(--app-violet);
  border-radius: 50%;
  opacity: .72;
}

.table-catalog-item-name {
  overflow: hidden;
  color: var(--app-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 760;
}

.table-catalog-item-percent {
  justify-self: end;
  color: var(--app-accent);
  font-size: 9px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.table-promoter-empty,
.table-bank-empty {
  min-height: 39px;
  display: grid;
  place-items: center;
  color: var(--app-muted-2);
  border: 1px dashed var(--app-border);
  border-radius: 9px;
  font-size: 6.5px;
}

.tables-catalog-empty {
  min-height: calc(100vh - 238px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.tables-empty-mark {
  position: relative;
  width: 50px;
  height: 50px;
  margin-bottom: 4px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 25%, var(--app-border));
  border-radius: 15px;
}

.tables-empty-mark span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 11px;
  border: 1px solid var(--app-accent);
  transform: translate(-50%, -50%);
}

.tables-empty-mark i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 1px;
  background: color-mix(in srgb, var(--app-accent) 45%, transparent);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.tables-catalog-empty strong {
  color: var(--app-text);
  font-size: 13px;
}

.tables-catalog-empty small {
  color: var(--app-muted);
  font-size: 8px;
}

/* =========================================================
   TABELAS — MODAL
   ========================================================= */

.table-catalog-modal-backdrop {
  z-index: 84;
}

.table-catalog-modal-card {
  width: min(590px, calc(100vw - 34px));
  max-height: calc(100vh - 34px);
  overflow-y: auto;
  color: var(--app-text);
  background:
    radial-gradient(
      circle at 0% 0%,
      color-mix(in srgb, var(--app-accent) 5%, transparent),
      transparent 31%
    ),
    var(--app-surface);
  border: 1px solid color-mix(in srgb, var(--app-accent) 22%, var(--app-border));
  border-radius: 18px;
  box-shadow: 0 34px 110px rgba(0, 0, 0, .4);
}

.table-catalog-modal-head {
  min-height: 83px;
  padding: 17px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--app-border);
}

.table-catalog-modal-head > div {
  min-width: 0;
}

.table-catalog-modal-head small {
  color: var(--app-accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .15em;
}

.table-catalog-modal-head h3 {
  margin: 5px 0 3px;
  color: var(--app-text);
  font-size: 19px;
}

.table-catalog-modal-head > div > span {
  display: block;
  overflow: hidden;
  color: var(--app-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
}

.table-catalog-form {
  padding: 18px 20px 20px;
  display: grid;
  gap: 14px;
}

.table-catalog-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.table-catalog-field label {
  color: var(--app-muted);
  font-size: 8px;
  font-weight: 900;
}

.table-catalog-field > input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  color: var(--app-text);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  outline: 0;
  font-size: 10px;
}

.table-catalog-field > input:focus,
.table-catalog-percent-shell:focus-within {
  border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 8%, transparent);
}

.table-catalog-field small {
  color: var(--app-muted-2);
  font-size: 7px;
}

.table-catalog-percent-shell {
  height: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  overflow: hidden;
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 10px;
}

.table-catalog-percent-shell input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  color: var(--app-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 10px;
}

.table-catalog-percent-shell span {
  padding: 0 13px;
  color: var(--app-accent);
  font-size: 10px;
  font-weight: 900;
}

.table-catalog-form-error {
  width: 100%;
}

.table-catalog-modal-actions {
  padding-top: 4px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.table-catalog-save {
  min-height: 40px;
  padding: 0 15px;
  color: #09100a;
  background: linear-gradient(105deg, #a9f855, #6ef1c9);
  border: 1px solid rgba(124, 255, 107, .34);
  border-radius: 10px;
  font-size: 9px;
  font-weight: 900;
}

/* Tema claro */

html[data-app-theme="light"] .tables-searchbar,
html[data-app-theme="light"] .tables-panel,
html[data-app-theme="light"] .table-catalog-modal-card {
  background: #f8f9f6;
}

html[data-app-theme="light"] .table-promoter-card,
html[data-app-theme="light"] .table-bank-card,
html[data-app-theme="light"] .table-catalog-item-row,
html[data-app-theme="light"] .table-catalog-field > input,
html[data-app-theme="light"] .table-catalog-percent-shell {
  background-color: #ffffff;
}

html[data-app-theme="light"] .tables-primary-action:hover,
html[data-app-theme="light"] .tables-catalog-empty button:hover,
html[data-app-theme="light"] .table-catalog-save {
  color: #ffffff;
  background: linear-gradient(105deg, #587f3b, #3e987c);
}

@media (max-width: 820px) {
  .tables-searchbar {
    grid-template-columns: 1fr;
  }

  .tables-catalog-counter {
    justify-self: start;
  }

  .table-promoter-head {
    grid-template-columns: 25px 34px minmax(0, 1fr);
  }

  .table-promoter-actions {
    grid-column: 2 / -1;
    justify-content: flex-end;
  }

  .table-bank-head {
    grid-template-columns: 25px 29px minmax(0, 1fr);
  }

  .table-bank-actions {
    grid-column: 2 / -1;
    justify-content: flex-end;
  }

  .table-promoter-body {
    padding-left: 10px;
  }

  .table-bank-body {
    padding-left: 9px;
  }
}

@media (max-width: 560px) {
  .tables-shell {
    padding: 10px;
  }

  .table-catalog-item-row {
    grid-template-columns: 7px minmax(0, 1fr) 64px 29px;
  }

  .table-catalog-add-inline {
    min-height: 29px;
    font-size: 6.5px;
  }
}

/* =========================================================
   ESTEIRA — CASCATA PROMOTORA > BANCO > TABELA
   ========================================================= */

.proposal-cascade-block {
  padding: 12px;
  display: grid;
  gap: 10px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--app-accent) 3.5%, transparent),
      transparent 55%
    ),
    var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 13px;
}

.proposal-cascade-flow {
  height: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.proposal-cascade-flow span {
  width: 19px;
  height: 15px;
  display: grid;
  place-items: center;
  color: var(--app-muted-2);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 5px;
  font-size: 5.5px;
  font-weight: 950;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}

.proposal-cascade-flow span.active {
  color: var(--app-accent);
  border-color: color-mix(
    in srgb,
    var(--app-accent) 30%,
    var(--app-border)
  );
}

.proposal-cascade-flow i {
  width: 29px;
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(
      in srgb,
      var(--app-accent) 38%,
      transparent
    ),
    transparent
  );
}

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

.proposal-cascade-hint {
  color: var(--app-muted-2);
  font-size: 7px;
  line-height: 1.45;
}

.proposal-percent-snapshot-note {
  color: var(--app-muted-2);
  font-size: 7px;
  line-height: 1.4;
}

.proposal-percent-snapshot-note strong {
  color: var(--app-accent);
}

.proposal-percent-snapshot-note.is-historical {
  color: var(--app-muted);
}

.proposal-readonly-percent {
  background: color-mix(
    in srgb,
    var(--app-accent) 2.5%,
    var(--app-control)
  );
}

.proposal-readonly-percent input {
  color: var(--app-accent) !important;
  font-weight: 900;
  cursor: default;
}

/* Estado bloqueado do dropdown próprio do Corban. */
.corban-employee-select.is-disabled {
  opacity: .5;
}

.corban-employee-select.is-disabled
  .corban-employee-select-trigger {
  cursor: not-allowed;
  color: var(--app-muted-2);
  background: color-mix(
    in srgb,
    var(--app-control) 92%,
    transparent
  );
  border-color: var(--app-border);
  box-shadow: none;
}

.corban-employee-select.is-disabled
  .corban-employee-select-chevron {
  border-color: var(--app-muted-2);
}

html[data-app-theme="light"]
  .proposal-cascade-block {
  background-color: #ffffff;
}

@media (max-width: 620px) {
  .proposal-cascade-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   CORREÇÃO DEFINITIVA — SELECT NATIVO
   O select real continua no DOM para a lógica, mas nunca é desenhado.
   ========================================================= */
select.corban-native-select {
  display: none !important;
}

/* =========================================================
   CARD LATERAL DO PERFIL — perfil, cargo e empresa
   ========================================================= */

.app-view .profile-chip {
  min-height: 74px;
  padding: 10px;
  align-items: center;
}

.app-view .profile-sidebar-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.sidebar-user-identity {
  min-width: 0;
  display: grid;
  gap: 4px;
  white-space: normal;
}

.sidebar-user-identity > strong {
  line-height: 1.1;
  font-size: 10.5px;
}

.sidebar-user-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.sidebar-role-pill {
  flex: 0 0 auto;
  padding: 2px 5px;
  overflow: hidden;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent) 17%, transparent);
  border-radius: 999px;
  font-size: 5.8px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-job-title {
  min-width: 0;
  overflow: hidden;
  color: var(--app-muted);
  font-size: 6.2px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-company-name {
  max-width: 100%;
  width: fit-content;
  overflow: hidden;
  color: var(--app-mint);
  font-size: 6.1px;
  font-weight: 900;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .045em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

html[data-app-theme="light"] .sidebar-role-pill {
  color: #527a39;
  background: #edf4e8;
  border-color: #d5e1cd;
}

html[data-app-theme="light"] .sidebar-company-name {
  color: #36836b;
}

.sidebar-collapsed .sidebar-user-identity {
  display: none !important;
}

.sidebar-collapsed .app-view .profile-chip,
.sidebar-collapsed .profile-chip {
  min-height: 58px;
  justify-content: center;
  padding: 8px;
}

/* =========================================================
   ESTEIRA — DRAWER ABERTO / SEM "MODAL DENTRO DE MODAL"
   ========================================================= */

/* O próprio drawer agora é a superfície do cadastro. */
.proposal-drawer {
  width: min(960px, 98vw) !important;
  background:
    radial-gradient(
      circle at 88% 3%,
      rgba(93, 242, 194, .032),
      transparent 29%
    ),
    #0a100c !important;
}

/* A antiga barra superior deixa de ocupar qualquer espaço. */
.proposal-drawer-head-minimal {
  display: none !important;
}

/* O formulário não tem mais fundo, borda, sombra ou arredondamento próprios. */
.proposal-form {
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 30px 30px !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* As seções pertencem diretamente ao drawer. */
.proposal-form-section {
  padding: 24px 0 28px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(124, 255, 107, .065) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.proposal-form-section:first-child {
  padding-top: 4px !important;
}

.proposal-form-section:last-of-type {
  border-bottom: 0 !important;
  padding-bottom: 26px !important;
}

/* X exatamente na linha do título da primeira seção. */
.proposal-section-head-first {
  min-height: 44px;
}

.proposal-section-head-first .proposal-close-button {
  margin-left: auto;
  flex: 0 0 auto;
}

.proposal-close-button {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  color: #7f8d83 !important;
  background: rgba(255, 255, 255, .012) !important;
  border: 1px solid rgba(124, 255, 107, .11) !important;
  border-radius: 10px !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

.proposal-close-button:hover {
  color: #f5faf6 !important;
  background: rgba(124, 255, 107, .05) !important;
  border-color: rgba(124, 255, 107, .25) !important;
}

/* Mais aproveitamento horizontal e vertical. */
.proposal-section-grid {
  column-gap: 18px !important;
  row-gap: 17px !important;
}

.proposal-section-head {
  margin-bottom: 18px !important;
}

.proposal-section-head strong {
  font-size: 11px !important;
}

.proposal-section-head small {
  font-size: 6.8px !important;
}

/* Campos um pouco maiores e mais confortáveis. */
.proposal-field {
  grid-template-rows: auto 50px !important;
  gap: 7px !important;
}

.proposal-field label {
  min-height: 13px !important;
  font-size: 7.6px !important;
}

.proposal-field input,
.proposal-field select {
  height: 50px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  border-radius: 11px !important;
  font-size: 9.8px !important;
}

.proposal-field .corban-employee-select,
.proposal-field .corban-employee-select-trigger {
  height: 50px !important;
}

.proposal-field .corban-employee-select-trigger {
  padding-left: 14px !important;
  padding-right: 14px !important;
  font-size: 9.8px !important;
}

/* Desbloqueado segue a mesma régua dos demais campos. */
.proposal-segmented {
  height: 50px !important;
}

.proposal-segmented button {
  height: 42px !important;
}

/* Cascata ocupa bem a largura, sem aparência de outro modal. */
.proposal-cascade-block {
  padding: 14px 15px !important;
  border-radius: 11px !important;
  background:
    linear-gradient(
      90deg,
      rgba(124, 255, 107, .017),
      transparent 50%
    ),
    rgba(16, 24, 18, .72) !important;
  border-color: rgba(124, 255, 107, .075) !important;
}

.proposal-cascade-grid {
  column-gap: 18px !important;
  row-gap: 14px !important;
}

/* Valores seguem a nova altura. */
.proposal-money-shell,
.proposal-percent-shell {
  height: 50px !important;
}

.proposal-money-shell input,
.proposal-percent-shell input {
  height: 48px !important;
}

/* Rodapé usa toda a largura do drawer, não do "cartão". */
.proposal-form-actions {
  bottom: -30px !important;
  margin: 0 -30px -30px !important;
  padding: 14px 30px 17px !important;
  border-radius: 0 !important;
  background: rgba(9, 15, 11, .96) !important;
}

/* LIGHT */
html[data-app-theme="light"] .proposal-drawer {
  background:
    radial-gradient(
      circle at 88% 3%,
      rgba(62, 152, 124, .025),
      transparent 30%
    ),
    #f7f8f5 !important;
}

html[data-app-theme="light"] .proposal-form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-app-theme="light"] .proposal-form-section {
  border-bottom-color: #e2e7df !important;
}

html[data-app-theme="light"] .proposal-close-button {
  color: #6f796f !important;
  background: #ffffff !important;
  border-color: #dbe2d8 !important;
}

html[data-app-theme="light"] .proposal-cascade-block {
  background:
    linear-gradient(
      90deg,
      rgba(95, 139, 61, .02),
      transparent 50%
    ),
    #f8faf6 !important;
  border-color: #e0e6dc !important;
}

html[data-app-theme="light"] .proposal-form-actions {
  background: rgba(248, 249, 246, .97) !important;
}

/* RESPONSIVO */
@media (max-width: 700px) {
  .proposal-drawer {
    width: 100vw !important;
  }

  .proposal-form {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .proposal-form-actions {
    margin-left: -14px !important;
    margin-right: -14px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* =========================================================
   ESTEIRA — EXPERIÊNCIA DE PREENCHIMENTO BASEADA NO APPSHEET
   ========================================================= */

/*
  O AppSheet usa tipografia muito neutra e leitura direta.
  Dentro do cadastro da Esteira, usamos Arial/Helvetica para reproduzir
  essa sensação sem alterar a identidade tipográfica do restante do Corban.
*/
.proposal-drawer,
.proposal-drawer button,
.proposal-drawer input,
.proposal-drawer select,
.proposal-drawer label,
.proposal-drawer small,
.proposal-drawer strong {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Painel um pouco mais estreito, como o form lateral do AppSheet. */
.proposal-drawer {
  width: min(720px, 96vw) !important;
}

/* Margens internas semelhantes ao AppSheet. */
.proposal-form {
  padding: 14px 58px 34px !important;
}

/* Seções sem aparência de card; apenas grupos verticais. */
.proposal-form-section {
  padding: 18px 0 24px !important;
  border-bottom: 1px solid rgba(124, 255, 107, .055) !important;
}

.proposal-form-section:first-child {
  padding-top: 0 !important;
}

.proposal-section-head {
  min-height: 36px !important;
  margin-bottom: 19px !important;
}

.proposal-section-head strong {
  color: #e9efeb !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.proposal-section-index {
  display: none !important;
}

/* O "Dados da proposta" fica como barra superior do formulário. */
.proposal-section-head-first {
  margin: 0 -58px 24px !important;
  padding: 0 0 14px 58px !important;
  border-bottom: 1px solid rgba(124, 255, 107, .07);
}

.proposal-section-head-first .proposal-close-button {
  margin-left: auto !important;
  margin-right: 18px !important;
}

/* =========================================================
   UMA COLUNA — igual ao AppSheet
   ========================================================= */

.proposal-section-grid,
.proposal-cascade-grid,
.proposal-finance-summary {
  display: grid !important;
  grid-template-columns: 1fr !important;
  column-gap: 0 !important;
  row-gap: 20px !important;
}

.proposal-field,
.proposal-field-full {
  grid-column: 1 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 7px !important;
}

/* Labels do AppSheet: pequenas, neutras, em caixa alta. */
.proposal-field label {
  min-height: auto !important;
  display: block !important;
  color: #9aa39d !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: .015em !important;
  text-transform: uppercase !important;
}

/* Inputs com proporção do AppSheet. */
.proposal-field input,
.proposal-field select,
.proposal-field .corban-employee-select,
.proposal-field .corban-employee-select-trigger,
.proposal-money-shell,
.proposal-percent-shell {
  width: 100% !important;
  height: 45px !important;
  min-height: 45px !important;
}

.proposal-field input,
.proposal-field select,
.proposal-field .corban-employee-select-trigger {
  padding: 0 12px !important;
  color: #e7ece8 !important;
  background: #101712 !important;
  border: 1px solid #344039 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.proposal-field input::placeholder {
  color: #68736c !important;
  opacity: 1 !important;
}

.proposal-field input:hover,
.proposal-field .corban-employee-select-trigger:hover {
  background: #111913 !important;
  border-color: #455149 !important;
}

.proposal-field input:focus,
.proposal-field .corban-employee-select.is-open
  .corban-employee-select-trigger {
  background: #111913 !important;
  border-color: #7da660 !important;
  box-shadow: 0 0 0 1px rgba(125, 166, 96, .18) !important;
}

/* Dropdown no mesmo estilo sóbrio do AppSheet. */
.proposal-field .corban-employee-select-menu {
  padding: 0 !important;
  background: #111813 !important;
  border: 1px solid #3c483f !important;
  border-radius: 2px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .36) !important;
}

.proposal-field .corban-employee-select-option {
  min-height: 42px !important;
  padding: 0 12px !important;
  color: #e0e6e2 !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .035) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.proposal-field .corban-employee-select-option:hover,
.proposal-field .corban-employee-select-option:focus-visible,
.proposal-field .corban-employee-select-option.is-selected {
  color: #ffffff !important;
  background: rgba(124, 255, 107, .075) !important;
}

/* =========================================================
   DESBLOQUEADO — três blocos iguais ao AppSheet
   ========================================================= */

.proposal-segmented {
  width: 100% !important;
  height: 45px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  gap: 4px !important;
}

.proposal-segmented button {
  height: 45px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  color: #a1aaa4 !important;
  background: #101712 !important;
  border: 1px solid #344039 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.proposal-segmented button small {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

.proposal-segmented-icon {
  font-size: 16px !important;
  font-weight: 700 !important;
}

.proposal-segmented button.active {
  color: var(--app-accent) !important;
  background: #142018 !important;
  border-color: #6a8d50 !important;
}

/* =========================================================
   CASCATA — sem caixa extra; só os campos em sequência
   ========================================================= */

.proposal-cascade-block {
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.proposal-cascade-top,
.proposal-cascade-flow {
  display: none !important;
}

.proposal-cascade-grid {
  row-gap: 20px !important;
}

.proposal-cascade-hint {
  display: block !important;
  margin-top: 8px !important;
  color: #6f7972 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

/* =========================================================
   PARCELA / CONTRATO / % / COMISSÃO
   ========================================================= */

.proposal-money-shell,
.proposal-percent-shell {
  display: grid !important;
  align-items: center !important;
  background: #101712 !important;
  border: 1px solid #344039 !important;
  border-radius: 2px !important;
}

.proposal-money-shell {
  grid-template-columns: auto minmax(0, 1fr) !important;
}

.proposal-percent-shell {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.proposal-money-shell > span,
.proposal-percent-shell > span {
  padding: 0 11px !important;
  color: #a0aaa3 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.proposal-money-shell input,
.proposal-percent-shell input {
  height: 43px !important;
  color: #e7ece8 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.proposal-readonly-percent,
.proposal-readonly-money {
  background: #0f1511 !important;
}

.proposal-readonly-percent input,
.proposal-readonly-money input {
  color: #a9b4ad !important;
  font-weight: 400 !important;
}

.proposal-percent-snapshot-note {
  margin-top: 1px !important;
  color: #6f7972 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

/* =========================================================
   RODAPÉ — compacto, como barra de ações do AppSheet
   ========================================================= */

.proposal-form-actions {
  margin: 8px -58px -34px !important;
  padding: 12px 18px !important;
  justify-content: flex-end !important;
  background: rgba(10, 16, 12, .98) !important;
  border-top: 1px solid rgba(124, 255, 107, .07) !important;
}

.proposal-form-actions > span {
  display: none !important;
}

.proposal-form-actions > div {
  margin-left: auto !important;
}

.proposal-cancel-button,
.proposal-save-button {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 13px !important;
  border-radius: 2px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.proposal-cancel-button {
  color: #d5dcd7 !important;
  background: transparent !important;
  border: 1px solid #455149 !important;
}

.proposal-save-button {
  min-width: 118px !important;
  color: #071008 !important;
  background: var(--app-accent) !important;
  border: 1px solid var(--app-accent) !important;
  box-shadow: none !important;
}

.proposal-save-button i {
  display: none !important;
}

/* =========================================================
   LIGHT — o mais próximo do AppSheet original
   ========================================================= */

html[data-app-theme="light"] .proposal-drawer {
  background: #ffffff !important;
}

html[data-app-theme="light"] .proposal-form-section {
  border-bottom-color: #e4e7e5 !important;
}

html[data-app-theme="light"] .proposal-section-head-first {
  border-bottom-color: #e3e6e4 !important;
}

html[data-app-theme="light"] .proposal-section-head strong {
  color: #202420 !important;
}

html[data-app-theme="light"] .proposal-field label {
  color: #5e655f !important;
}

html[data-app-theme="light"] .proposal-field input,
html[data-app-theme="light"] .proposal-field select,
html[data-app-theme="light"] .proposal-field .corban-employee-select-trigger,
html[data-app-theme="light"] .proposal-money-shell,
html[data-app-theme="light"] .proposal-percent-shell,
html[data-app-theme="light"] .proposal-segmented button {
  color: #333833 !important;
  background: #ffffff !important;
  border-color: #bfc5c1 !important;
}

html[data-app-theme="light"] .proposal-field input::placeholder {
  color: #999f9a !important;
}

html[data-app-theme="light"] .proposal-field input:focus,
html[data-app-theme="light"] .proposal-field .corban-employee-select.is-open
  .corban-employee-select-trigger {
  background: #ffffff !important;
  border-color: #738b6a !important;
  box-shadow: 0 0 0 1px rgba(115, 139, 106, .16) !important;
}

html[data-app-theme="light"] .proposal-field .corban-employee-select-menu {
  background: #ffffff !important;
  border-color: #c7ccc8 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .13) !important;
}

html[data-app-theme="light"] .proposal-field .corban-employee-select-option {
  color: #303530 !important;
  border-bottom-color: #eef0ef !important;
}

html[data-app-theme="light"] .proposal-field .corban-employee-select-option:hover,
html[data-app-theme="light"] .proposal-field .corban-employee-select-option.is-selected {
  color: #243025 !important;
  background: #eef3ec !important;
}

html[data-app-theme="light"] .proposal-segmented button.active {
  color: #2f7c3d !important;
  background: #f3f7f2 !important;
  border-color: #a8b9a2 !important;
}

html[data-app-theme="light"] .proposal-readonly-percent,
html[data-app-theme="light"] .proposal-readonly-money {
  background: #f8f9f8 !important;
}

html[data-app-theme="light"] .proposal-form-actions {
  background: #ffffff !important;
  border-top-color: #e1e5e2 !important;
}

html[data-app-theme="light"] .proposal-cancel-button {
  color: #334033 !important;
  background: #ffffff !important;
  border-color: #aeb5b0 !important;
}

html[data-app-theme="light"] .proposal-save-button {
  color: #ffffff !important;
  background: #18365d !important;
  border-color: #18365d !important;
}

/* Em telas menores, preserva margens confortáveis. */
@media (max-width: 720px) {
  .proposal-form {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .proposal-section-head-first {
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
  }

  .proposal-form-actions {
    margin-left: -20px !important;
    margin-right: -20px !important;
  }
}

/* =========================================================
   ESTEIRA — DROPDOWNS CORBAN ABRINDO PARA CIMA
   Consultor / Produto / Fase / Banco origem /
   Promotora / Banco destino / Tabela
   ========================================================= */

/*
  O restante do formulário continua com as proporções inspiradas no AppSheet.
  Somente os selects retornam ao componente visual próprio do Corban.
*/
.proposal-form .corban-employee-select {
  position: relative !important;
  width: 100% !important;
  height: 45px !important;
  min-height: 45px !important;
  overflow: visible !important;
}

/* Campo fechado */
.proposal-form .corban-employee-select-trigger {
  width: 100% !important;
  height: 45px !important;
  min-height: 45px !important;
  padding: 0 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  color: var(--app-text) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-accent) 1.8%, transparent),
      transparent 62%
    ),
    var(--app-control) !important;

  border: 1px solid color-mix(
    in srgb,
    var(--app-accent) 17%,
    var(--app-border)
  ) !important;

  border-radius: 11px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .012) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: left !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease !important;
}

.proposal-form .corban-employee-select-trigger:hover {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-accent) 3%, transparent),
      transparent 65%
    ),
    var(--app-control) !important;

  border-color: color-mix(
    in srgb,
    var(--app-accent) 30%,
    var(--app-border)
  ) !important;
}

.proposal-form .corban-employee-select.is-open
  .corban-employee-select-trigger,
.proposal-form .corban-employee-select-trigger:focus-visible {
  outline: 0 !important;

  border-color: color-mix(
    in srgb,
    var(--app-accent) 58%,
    var(--app-border)
  ) !important;

  box-shadow:
    0 0 0 3px color-mix(
      in srgb,
      var(--app-accent) 7%,
      transparent
    ),
    inset 0 0 22px color-mix(
      in srgb,
      var(--app-accent) 2.5%,
      transparent
    ) !important;
}

/*
  COMPORTAMENTO PRINCIPAL:
  a lista fica ANCORADA ACIMA do campo.
*/
.proposal-form .corban-employee-select-menu {
  position: absolute !important;
  z-index: 500 !important;

  top: auto !important;
  bottom: calc(100% + 5px) !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  max-height: min(310px, 48vh) !important;
  margin: 0 !important;
  padding: 6px !important;

  display: grid !important;
  gap: 3px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;

  color: var(--app-text) !important;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-accent) 3%, transparent),
      transparent 42%
    ),
    var(--app-surface) !important;

  border: 1px solid color-mix(
    in srgb,
    var(--app-accent) 24%,
    var(--app-border)
  ) !important;

  border-radius: 11px !important;

  box-shadow:
    0 -20px 52px rgba(0, 0, 0, .30),
    0 0 0 1px color-mix(
      in srgb,
      var(--app-accent) 3%,
      transparent
    ) !important;

  transform-origin: center bottom !important;
  animation: proposal-dropdown-up .14s ease-out both !important;
}

@keyframes proposal-dropdown-up {
  from {
    opacity: 0;
    transform: translateY(5px) scale(.992);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Opções no padrão Corban */
.proposal-form .corban-employee-select-option {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  color: var(--app-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 8px !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.32 !important;

  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;

  cursor: pointer !important;

  transition:
    color .12s ease,
    background .12s ease,
    transform .12s ease !important;
}

.proposal-form .corban-employee-select-option:hover,
.proposal-form .corban-employee-select-option:focus-visible {
  outline: 0 !important;
  color: var(--app-accent) !important;

  background: color-mix(
    in srgb,
    var(--app-accent) 8%,
    transparent
  ) !important;
}

.proposal-form .corban-employee-select-option.is-selected {
  color: var(--app-accent) !important;

  background: color-mix(
    in srgb,
    var(--app-accent) 6%,
    transparent
  ) !important;
}

/* Marcador próprio do Corban na opção selecionada */
.proposal-form .corban-employee-select-option.is-selected::after {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 auto !important;

  background: var(--app-accent) !important;
  border-radius: 50% !important;

  box-shadow: 0 0 10px color-mix(
    in srgb,
    var(--app-accent) 45%,
    transparent
  ) !important;
}

/*
  A seta fechada continua discreta.
  Ao abrir, aponta PARA CIMA para combinar com a direção do menu.
*/
.proposal-form .corban-employee-select-chevron {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 auto !important;

  border-right: 1.5px solid var(--app-muted) !important;
  border-bottom: 1.5px solid var(--app-muted) !important;

  transform: rotate(45deg) translateY(-2px) !important;

  transition:
    transform .16s ease,
    border-color .16s ease !important;
}

.proposal-form .corban-employee-select.is-open
  .corban-employee-select-chevron {
  border-color: var(--app-accent) !important;
  transform: rotate(225deg) translate(-2px, -1px) !important;
}

/* Scroll interno também ganha acabamento do Corban */
.proposal-form .corban-employee-select-menu {
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in srgb, var(--app-accent) 34%, transparent)
    transparent;
}

.proposal-form .corban-employee-select-menu::-webkit-scrollbar {
  width: 7px;
}

.proposal-form .corban-employee-select-menu::-webkit-scrollbar-track {
  background: transparent;
}

.proposal-form .corban-employee-select-menu::-webkit-scrollbar-thumb {
  background: color-mix(
    in srgb,
    var(--app-accent) 30%,
    transparent
  );
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.proposal-form .corban-employee-select-menu::-webkit-scrollbar-thumb:hover {
  background: color-mix(
    in srgb,
    var(--app-accent) 48%,
    transparent
  );
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Campo bloqueado na cascata */
.proposal-form .corban-employee-select.is-disabled {
  opacity: .50 !important;
}

.proposal-form .corban-employee-select.is-disabled
  .corban-employee-select-trigger {
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* =========================================================
   TEMA CLARO
   ========================================================= */

html[data-app-theme="light"]
  .proposal-form .corban-employee-select-trigger {
  color: #293129 !important;

  background:
    linear-gradient(
      180deg,
      rgba(95, 139, 61, .018),
      transparent 62%
    ),
    #ffffff !important;

  border-color: #cfd8cb !important;
}

html[data-app-theme="light"]
  .proposal-form .corban-employee-select-trigger:hover {
  background: #ffffff !important;
  border-color: #b8c8b1 !important;
}

html[data-app-theme="light"]
  .proposal-form .corban-employee-select.is-open
  .corban-employee-select-trigger,
html[data-app-theme="light"]
  .proposal-form .corban-employee-select-trigger:focus-visible {
  border-color: #76995e !important;

  box-shadow:
    0 0 0 3px rgba(95, 139, 61, .07) !important;
}

html[data-app-theme="light"]
  .proposal-form .corban-employee-select-menu {
  color: #293129 !important;

  background:
    linear-gradient(
      180deg,
      rgba(95, 139, 61, .025),
      transparent 42%
    ),
    #ffffff !important;

  border-color: #cbd6c6 !important;

  box-shadow:
    0 -18px 42px rgba(45, 57, 47, .14),
    0 0 0 1px rgba(95, 139, 61, .025) !important;
}

html[data-app-theme="light"]
  .proposal-form .corban-employee-select-option {
  color: #303730 !important;
}

html[data-app-theme="light"]
  .proposal-form .corban-employee-select-option:hover,
html[data-app-theme="light"]
  .proposal-form .corban-employee-select-option:focus-visible,
html[data-app-theme="light"]
  .proposal-form .corban-employee-select-option.is-selected {
  color: #4e7835 !important;

  background: rgba(95, 139, 61, .075) !important;
}

/* Em telas pequenas a lista ainda abre para cima, porém mais compacta. */
@media (max-width: 720px) {
  .proposal-form .corban-employee-select-menu {
    max-height: min(250px, 42vh) !important;
  }
}

/* =========================================================
   ESTEIRA — DROPDOWN ABRE SOMENTE AO CLICAR + PESQUISA
   ========================================================= */

/*
  CORREÇÃO DO BUG:
  a regra anterior de display:grid!important estava sobrescrevendo .hidden.
  Fechado significa display:none de verdade.
*/
.proposal-form
  .corban-employee-select:not(.is-open)
  > .corban-employee-select-menu,
.proposal-form
  .corban-employee-select-menu.hidden {
  display: none !important;
}

.proposal-form
  .corban-employee-select.is-open
  > .corban-employee-select-menu:not(.hidden) {
  display: grid !important;
}

/* O campo de pesquisa ocupa EXATAMENTE o lugar em que a pessoa clicou. */
.proposal-form .corban-employee-select-search {
  width: 100% !important;
  height: 45px !important;
  min-height: 45px !important;
  padding: 0 40px 0 13px !important;

  color: var(--app-text) !important;

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--app-accent) 3%,
        transparent
      ),
      transparent 65%
    ),
    var(--app-control) !important;

  border: 1px solid color-mix(
    in srgb,
    var(--app-accent) 58%,
    var(--app-border)
  ) !important;

  border-radius: 11px !important;

  outline: 0 !important;

  box-shadow:
    0 0 0 3px color-mix(
      in srgb,
      var(--app-accent) 7%,
      transparent
    ),
    inset 0 0 22px color-mix(
      in srgb,
      var(--app-accent) 2.5%,
      transparent
    ) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.proposal-form
  .corban-employee-select-search::placeholder {
  color: var(--app-muted) !important;
  opacity: .82 !important;
}

/* Quando fechado, a busca nunca ocupa espaço. */
.proposal-form
  .corban-employee-select-search.hidden {
  display: none !important;
}

/* Quando está pesquisando, o trigger fica realmente escondido. */
.proposal-form
  .corban-employee-select.is-open
  > .corban-employee-select-trigger.hidden {
  display: none !important;
}

/* Pequeno indicador de busca no canto direito. */
.proposal-form
  .corban-employee-select.is-searchable.is-open::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: 14px;
  right: 15px;

  width: 9px;
  height: 9px;

  pointer-events: none;

  border: 1.5px solid var(--app-accent);
  border-radius: 50%;
  opacity: .72;
}

.proposal-form
  .corban-employee-select.is-searchable.is-open::before {
  content: "";
  position: absolute;
  z-index: 9;
  top: 23px;
  right: 12px;

  width: 6px;
  height: 1.5px;

  pointer-events: none;

  background: var(--app-accent);
  border-radius: 999px;
  opacity: .72;
  transform: rotate(45deg);
  transform-origin: center;
}

/* Resultado vazio da pesquisa. */
.proposal-form .corban-employee-select-empty {
  min-height: 52px;
  padding: 12px;

  display: grid;
  place-items: center;

  color: var(--app-muted);
  background: transparent;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
}

/*
  A lista continua ABRINDO PARA CIMA.
  O max-height garante rolagem interna em Tabela/Fase.
*/
.proposal-form
  .corban-employee-select.is-open
  > .corban-employee-select-menu {
  top: auto !important;
  bottom: calc(100% + 5px) !important;

  max-height: min(310px, 48vh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* LIGHT */
html[data-app-theme="light"]
  .proposal-form .corban-employee-select-search {
  color: #293129 !important;
  background: #ffffff !important;
  border-color: #76995e !important;
  box-shadow:
    0 0 0 3px rgba(95, 139, 61, .07) !important;
}

html[data-app-theme="light"]
  .proposal-form
  .corban-employee-select-search::placeholder {
  color: #8b938c !important;
}

/* =====================================================================
   CORBAN — NIGHT / ULTRA FUTURE
   O modo claro continua limpo.
   Esta camada existe SOMENTE no modo noturno.
   Identidade: lime ion + mint plasma + violeta orbital.
   ===================================================================== */

html[data-app-theme="dark"] {
  --night-void: #050806;
  --night-void-2: #070b08;
  --night-glass: rgba(13, 20, 15, .78);
  --night-glass-strong: rgba(16, 25, 18, .92);

  --night-ion: #b8ff63;
  --night-plasma: #5df2c2;
  --night-orbit: #9b82ff;

  --night-ion-faint: rgba(124, 255, 107, .055);
  --night-ion-soft: rgba(124, 255, 107, .10);
  --night-ion-medium: rgba(124, 255, 107, .20);
  --night-plasma-soft: rgba(93, 242, 194, .085);
  --night-orbit-soft: rgba(155, 130, 255, .07);

  --night-edge:
    color-mix(in srgb, var(--night-ion) 16%, transparent);

  --night-edge-strong:
    color-mix(in srgb, var(--night-ion) 34%, transparent);

  --night-neon-shadow:
    0 0 0 1px rgba(124, 255, 107, .025),
    0 0 24px rgba(124, 255, 107, .045),
    0 18px 50px rgba(0, 0, 0, .24);

  --night-neon-shadow-strong:
    0 0 0 1px rgba(124, 255, 107, .055),
    0 0 18px rgba(124, 255, 107, .11),
    0 12px 38px rgba(0, 0, 0, .26);

  --app-bg: var(--night-void);
  --app-bg-soft: #080d09;
  --app-sidebar: #070b08;
  --app-surface: #0c130e;
  --app-surface-2: #101912;
  --app-surface-3: #142017;
  --app-control: #0f1811;
  --app-control-hover: #142018;
}

/* ---------------------------------------------------------------------
   FUNDO — profundidade tecnológica sem copiar o Ponto
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] .app-view {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(124, 255, 107, .065),
      transparent 23%
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(155, 130, 255, .055),
      transparent 26%
    ),
    radial-gradient(
      circle at 63% 92%,
      rgba(93, 242, 194, .045),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #050806 0%,
      #070c08 48%,
      #060908 100%
    ) !important;
}

/* grade digital extremamente sutil */
html[data-app-theme="dark"] .app-view::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background-image:
    linear-gradient(
      rgba(124,255,107,.033) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(124,255,107,.028) 1px,
      transparent 1px
    );
  background-size: 54px 54px;
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 12%,
      #000 82%,
      transparent
    );
}

/* brilho orbital móvel muito lento */
html[data-app-theme="dark"] .app-view::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 620px;
  height: 620px;
  right: -310px;
  top: 22%;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(155,130,255,.055);
  box-shadow:
    0 0 0 72px rgba(155,130,255,.012),
    0 0 0 148px rgba(93,242,194,.009);
  animation: corban-night-orbit 24s linear infinite;
}

@keyframes corban-night-orbit {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] .app-view .sidebar {
  background:
    radial-gradient(
      circle at 22% 8%,
      rgba(124,255,107,.09),
      transparent 21%
    ),
    linear-gradient(
      180deg,
      rgba(10,16,11,.97),
      rgba(6,10,7,.985)
    ) !important;

  border-right:
    1px solid rgba(124,255,107,.105) !important;

  box-shadow:
    18px 0 55px rgba(0,0,0,.14),
    inset -1px 0 0 rgba(93,242,194,.018);
}

html[data-app-theme="dark"] .side-brand-mark,
html[data-app-theme="dark"] .sidebar-toggle,
html[data-app-theme="dark"] .theme-toggle {
  box-shadow:
    inset 0 0 18px rgba(124,255,107,.025),
    0 0 16px rgba(124,255,107,.035);
}

html[data-app-theme="dark"] .sidebar-nav .nav {
  position: relative;
  overflow: hidden;
}

html[data-app-theme="dark"] .sidebar-nav .nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      rgba(124,255,107,.075),
      transparent 58%
    );
  transition: opacity .18s ease;
}

html[data-app-theme="dark"] .sidebar-nav .nav:hover::before,
html[data-app-theme="dark"] .sidebar-nav .nav.active::before {
  opacity: 1;
}

html[data-app-theme="dark"] .sidebar-nav .nav.active {
  border-color:
    rgba(124,255,107,.34) !important;

  box-shadow:
    inset 0 0 24px rgba(124,255,107,.045),
    0 0 20px rgba(124,255,107,.055) !important;
}

html[data-app-theme="dark"] .sidebar-nav .nav.active .nav-icon,
html[data-app-theme="dark"] .sidebar-nav .nav:hover .nav-icon {
  color: var(--night-ion) !important;
  filter:
    drop-shadow(
      0 0 6px rgba(124,255,107,.28)
    );
}

/* card do usuário */
html[data-app-theme="dark"] :is(
  .user-chip,
  .profile-chip
) {
  background:
    linear-gradient(
      115deg,
      rgba(124,255,107,.045),
      rgba(93,242,194,.018) 46%,
      rgba(155,130,255,.018)
    ),
    rgba(13,20,15,.83) !important;

  border-color:
    rgba(124,255,107,.15) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015),
    0 0 20px rgba(124,255,107,.025) !important;
}

/* ---------------------------------------------------------------------
   TOPBAR E ÁREAS PRINCIPAIS
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] .app-view .topbar {
  background:
    linear-gradient(
      90deg,
      rgba(7,11,8,.91),
      rgba(11,17,12,.84),
      rgba(7,11,8,.91)
    ) !important;

  border-bottom-color:
    rgba(124,255,107,.09) !important;

  box-shadow:
    0 16px 38px rgba(0,0,0,.10);
}

/* Linha luminosa fina em barras importantes */
html[data-app-theme="dark"] :is(
  .app-view .topbar,
  .employees-panel-top,
  .tables-panel-top,
  .company-list-stage-toolbar
) {
  position: relative;
}

html[data-app-theme="dark"] :is(
  .app-view .topbar,
  .employees-panel-top,
  .tables-panel-top,
  .company-list-stage-toolbar
)::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 58%;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(124,255,107,.42),
      rgba(93,242,194,.21),
      transparent
    );
  filter:
    drop-shadow(
      0 0 5px rgba(124,255,107,.18)
    );
}

/* ---------------------------------------------------------------------
   SUPERFÍCIES / CARDS / PAINÉIS
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] :is(
  .panel,
  .app-view .stats article,
  .company-list-stage,
  .company-row,
  .company-license-state-card,
  .employees-panel,
  .employee-row,
  .employees-unassigned-card,
  .tables-panel,
  .table-promoter-card,
  .table-bank-card,
  .pipeline-shell,
  .pipeline-table-wrap,
  .profile-modal-card,
  .employee-modal-card,
  .table-catalog-modal-card,
  #company-modal .modal,
  .modal,
  .credential-card,
  .first-access-card
) {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(93,242,194,.025),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(18,28,20,.94),
      rgba(10,16,12,.96)
    ) !important;

  border-color:
    rgba(124,255,107,.11) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.014),
    0 0 0 1px rgba(124,255,107,.008),
    0 16px 44px rgba(0,0,0,.16) !important;
}

/* cards respondem à presença do mouse com luz */
html[data-app-theme="dark"] :is(
  .company-row,
  .employee-row,
  .table-promoter-card,
  .table-bank-card,
  .app-view .stats article
) {
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

html[data-app-theme="dark"] :is(
  .company-row,
  .employee-row,
  .table-promoter-card,
  .table-bank-card,
  .app-view .stats article
):hover {
  border-color:
    rgba(124,255,107,.26) !important;

  box-shadow:
    inset 0 0 26px rgba(124,255,107,.018),
    0 0 23px rgba(124,255,107,.045),
    0 16px 45px rgba(0,0,0,.19) !important;
}

/* ---------------------------------------------------------------------
   BOTÕES — neon/brilhantes
   --------------------------------------------------------------------- */

/* primários */
html[data-app-theme="dark"] :is(
  .app-view .btn.primary,
  .company-new-button,
  .company-register-button,
  .credential-finish-button,
  .profile-save-button,
  .employee-new-button,
  .employee-save-button,
  .pipeline-add-button,
  .proposal-save-button,
  .table-catalog-save-button
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  color: #071008 !important;

  background:
    linear-gradient(
      105deg,
      #9cf64f 0%,
      #c5ff78 42%,
      #67ecc2 100%
    ) !important;

  border:
    1px solid rgba(197,255,120,.58) !important;

  box-shadow:
    0 0 0 1px rgba(124,255,107,.055),
    0 0 13px rgba(124,255,107,.16),
    0 9px 28px rgba(93,242,194,.09) !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.16);

  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease !important;
}

/* reflexo luminoso */
html[data-app-theme="dark"] :is(
  .app-view .btn.primary,
  .company-new-button,
  .company-register-button,
  .credential-finish-button,
  .profile-save-button,
  .employee-new-button,
  .employee-save-button,
  .pipeline-add-button,
  .proposal-save-button,
  .table-catalog-save-button
)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70%;
  bottom: -70%;
  left: -28%;
  width: 18%;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.42),
      transparent
    );

  transform:
    skewX(-20deg);

  transition:
    left .42s ease;
}

html[data-app-theme="dark"] :is(
  .app-view .btn.primary,
  .company-new-button,
  .company-register-button,
  .credential-finish-button,
  .profile-save-button,
  .employee-new-button,
  .employee-save-button,
  .pipeline-add-button,
  .proposal-save-button,
  .table-catalog-save-button
):hover:not(:disabled) {
  transform:
    translateY(-1px);

  filter:
    brightness(1.055)
    saturate(1.04);

  box-shadow:
    0 0 0 1px rgba(124,255,107,.10),
    0 0 24px rgba(124,255,107,.25),
    0 11px 34px rgba(93,242,194,.14) !important;
}

html[data-app-theme="dark"] :is(
  .app-view .btn.primary,
  .company-new-button,
  .company-register-button,
  .credential-finish-button,
  .profile-save-button,
  .employee-new-button,
  .employee-save-button,
  .pipeline-add-button,
  .proposal-save-button,
  .table-catalog-save-button
):hover:not(:disabled)::before {
  left: 118%;
}

/* secundários / ferramentas */
html[data-app-theme="dark"] :is(
  .app-view .btn.secondary,
  .app-view .toolbar-button,
  .theme-toggle,
  .sidebar-toggle,
  .logout-button,
  .proposal-cancel-button,
  .profile-photo-button,
  .table-catalog-icon-button,
  .corban-stepper-button
) {
  color:
    #cbd7ce !important;

  background:
    linear-gradient(
      180deg,
      rgba(124,255,107,.026),
      rgba(255,255,255,.008)
    ),
    rgba(13,20,15,.82) !important;

  border-color:
    rgba(124,255,107,.12) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.014),
    0 0 12px rgba(124,255,107,.018) !important;
}

html[data-app-theme="dark"] :is(
  .app-view .btn.secondary,
  .app-view .toolbar-button,
  .theme-toggle,
  .sidebar-toggle,
  .logout-button,
  .proposal-cancel-button,
  .profile-photo-button,
  .table-catalog-icon-button,
  .corban-stepper-button
):hover:not(:disabled) {
  color:
    var(--night-ion) !important;

  border-color:
    rgba(124,255,107,.31) !important;

  background:
    linear-gradient(
      180deg,
      rgba(124,255,107,.07),
      rgba(93,242,194,.018)
    ),
    rgba(14,22,16,.94) !important;

  box-shadow:
    inset 0 0 18px rgba(124,255,107,.025),
    0 0 18px rgba(124,255,107,.07) !important;
}

/* ---------------------------------------------------------------------
   INPUTS / PESQUISA / SELECTS
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] :is(
  .app-view input:not([type="checkbox"]):not([type="radio"]),
  .app-view textarea,
  .app-view select,
  .company-search-shell,
  .search-shell,
  .proposal-money-shell,
  .proposal-percent-shell,
  .table-catalog-percent-shell,
  .corban-employee-select-trigger,
  .corban-employee-select-search
) {
  background:
    linear-gradient(
      180deg,
      rgba(124,255,107,.015),
      transparent 72%
    ),
    rgba(12,20,14,.88) !important;

  border-color:
    rgba(124,255,107,.105) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.012),
    inset 0 0 18px rgba(124,255,107,.008) !important;
}

html[data-app-theme="dark"] :is(
  .app-view input:not([type="checkbox"]):not([type="radio"]),
  .app-view textarea,
  .app-view select,
  .company-search-shell,
  .search-shell,
  .proposal-money-shell,
  .proposal-percent-shell,
  .table-catalog-percent-shell,
  .corban-employee-select-trigger,
  .corban-employee-select-search
):focus,
html[data-app-theme="dark"] :is(
  .company-search-shell,
  .search-shell,
  .proposal-money-shell,
  .proposal-percent-shell,
  .table-catalog-percent-shell
):focus-within,
html[data-app-theme="dark"]
  .corban-employee-select.is-open
  .corban-employee-select-trigger {
  border-color:
    rgba(124,255,107,.48) !important;

  box-shadow:
    0 0 0 3px rgba(124,255,107,.055),
    0 0 22px rgba(124,255,107,.07),
    inset 0 0 22px rgba(124,255,107,.018) !important;
}

/* dropdowns */
html[data-app-theme="dark"]
  .corban-employee-select-menu {
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(93,242,194,.04),
      transparent 30%
    ),
    rgba(9,16,11,.985) !important;

  border-color:
    rgba(124,255,107,.22) !important;

  box-shadow:
    0 0 0 1px rgba(124,255,107,.025),
    0 -18px 48px rgba(0,0,0,.42),
    0 0 28px rgba(124,255,107,.055) !important;
}

html[data-app-theme="dark"]
  .corban-employee-select-option:hover,
html[data-app-theme="dark"]
  .corban-employee-select-option.is-selected {
  color:
    var(--night-ion) !important;

  background:
    linear-gradient(
      90deg,
      rgba(124,255,107,.10),
      rgba(93,242,194,.025)
    ) !important;

  text-shadow:
    0 0 10px rgba(124,255,107,.13);
}

/* ---------------------------------------------------------------------
   TABELAS / LINHAS
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] .app-view th {
  background:
    rgba(15,24,17,.94) !important;

  border-color:
    rgba(124,255,107,.07) !important;
}

html[data-app-theme="dark"] .app-view tbody tr {
  transition:
    background .14s ease,
    box-shadow .14s ease !important;
}

html[data-app-theme="dark"] .app-view tbody tr:hover {
  background:
    linear-gradient(
      90deg,
      rgba(124,255,107,.045),
      rgba(93,242,194,.012),
      transparent 78%
    ) !important;

  box-shadow:
    inset 2px 0 0 rgba(124,255,107,.32);
}

/* ---------------------------------------------------------------------
   MODAIS / DRAWERS / OVERLAYS
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] :is(
  .modal-backdrop,
  .profile-modal-backdrop,
  .employee-modal-backdrop,
  .table-catalog-modal-backdrop,
  .proposal-drawer-backdrop
) {
  background:
    rgba(2,6,4,.68) !important;

  backdrop-filter:
    blur(12px)
    saturate(.92) !important;
}

html[data-app-theme="dark"] .proposal-drawer {
  background:
    radial-gradient(
      circle at 105% 8%,
      rgba(155,130,255,.055),
      transparent 27%
    ),
    radial-gradient(
      circle at 5% 45%,
      rgba(124,255,107,.045),
      transparent 31%
    ),
    linear-gradient(
      160deg,
      #071009,
      #08100b 52%,
      #070b09
    ) !important;

  border-left-color:
    rgba(124,255,107,.14) !important;

  box-shadow:
    -28px 0 80px rgba(0,0,0,.44),
    -2px 0 26px rgba(124,255,107,.025) !important;
}

/* proposta: seção sem virar "modal dentro de modal" */
html[data-app-theme="dark"]
  .proposal-form-section {
  border-bottom-color:
    rgba(124,255,107,.075) !important;
}

/* ---------------------------------------------------------------------
   TOASTS / STATUS
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] .toast {
  background:
    linear-gradient(
      120deg,
      rgba(124,255,107,.035),
      rgba(93,242,194,.018)
    ),
    rgba(11,18,13,.96) !important;

  border-color:
    rgba(124,255,107,.18) !important;

  box-shadow:
    0 0 20px rgba(124,255,107,.05),
    0 16px 42px rgba(0,0,0,.24) !important;
}

html[data-app-theme="dark"] .toast.success {
  box-shadow:
    0 0 20px rgba(93,242,194,.075),
    0 16px 42px rgba(0,0,0,.24) !important;
}

/* ---------------------------------------------------------------------
   DETALHES FUTURISTAS
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] :is(
  .employees-panel-signal,
  .tables-panel-signal,
  .system-pulse,
  .profile-modal-signal
) span {
  box-shadow:
    0 0 10px rgba(124,255,107,.38) !important;
}

/* links e pequenos destaques */
html[data-app-theme="dark"] :is(
  a,
  .company-list-view-all,
  .table-catalog-link
):hover {
  text-shadow:
    0 0 12px rgba(124,255,107,.17);
}

/* scrollbar do sistema */
html[data-app-theme="dark"] * {
  scrollbar-width: thin;
  scrollbar-color:
    rgba(124,255,107,.24)
    rgba(255,255,255,.015);
}

html[data-app-theme="dark"] *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-app-theme="dark"] *::-webkit-scrollbar-track {
  background:
    rgba(255,255,255,.012);
}

html[data-app-theme="dark"] *::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      rgba(124,255,107,.31),
      rgba(93,242,194,.18)
    );
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

/* ---------------------------------------------------------------------
   REDUÇÃO DE MOVIMENTO
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html[data-app-theme="dark"] .app-view::after {
    animation: none !important;
  }

  html[data-app-theme="dark"] :is(
    .app-view .btn.primary,
    .company-new-button,
    .company-register-button,
    .credential-finish-button,
    .profile-save-button,
    .employee-new-button,
    .employee-save-button,
    .pipeline-add-button,
    .proposal-save-button
  )::before {
    display: none !important;
  }
}

/* =====================================================================
   CONFIGURAÇÕES — CENTRAL DE PRÉ-CONFIGURAÇÕES
   ===================================================================== */

.settings-workspace {
  padding: 22px 28px 34px;
}

.settings-home,
.settings-module-view {
  width: 100%;
}

.settings-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settings-module-card {
  position: relative;
  min-height: 118px;
  padding: 18px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  column-gap: 14px;
  row-gap: 8px;
  align-items: center;
  overflow: hidden;
  text-align: left;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  cursor: pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.settings-module-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      110deg,
      color-mix(in srgb, var(--app-accent) 7%, transparent),
      transparent 48%,
      color-mix(in srgb, var(--app-mint) 2%, transparent)
    );
  transition: opacity .16s ease;
}

.settings-module-card:hover {
  transform: translateY(-2px);
  border-color:
    color-mix(in srgb, var(--app-accent) 35%, var(--app-border));
  box-shadow: 0 16px 38px rgba(0,0,0,.10);
}

.settings-module-card:hover::before {
  opacity: 1;
}

.settings-module-icon {
  grid-row: 1 / span 2;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: var(--app-muted);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 14px;
}

.settings-module-icon svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-module-card.is-ready .settings-module-icon {
  color: var(--app-accent);
  border-color:
    color-mix(in srgb, var(--app-accent) 25%, var(--app-border));
}

.settings-module-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
  align-self: end;
}

.settings-module-copy strong {
  font-size: 13px;
  line-height: 1.1;
}

.settings-module-copy small {
  max-width: 390px;
  color: var(--app-muted);
  font-size: 8px;
  line-height: 1.45;
}

.settings-module-status {
  align-self: start;
  justify-self: end;
  padding: 4px 7px;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent) 17%, transparent);
  border-radius: 999px;
  font-size: 5.5px;
  font-weight: 950;
  letter-spacing: .08em;
}

.settings-module-status.is-next {
  color: var(--app-muted-2);
  background: transparent;
  border-color: var(--app-border);
}

.settings-module-arrow {
  align-self: end;
  justify-self: end;
  color: var(--app-muted);
  font-style: normal;
  font-size: 15px;
  transition:
    color .16s ease,
    transform .16s ease;
}

.settings-module-card:hover .settings-module-arrow {
  color: var(--app-accent);
  transform: translateX(3px);
}

.settings-module-toolbar {
  min-height: 46px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--app-border);
}

.settings-back-button {
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--app-muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-size: 8px;
  font-weight: 850;
}

.settings-back-button:hover {
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 4%, transparent);
}

.settings-back-button span {
  font-size: 13px;
}

.settings-module-toolbar-name {
  color: var(--app-muted-2);
  font-size: 6px;
  font-weight: 950;
  letter-spacing: .14em;
}

.settings-embedded-module {
  width: 100%;
}

#settings-tables .tables-shell {
  padding: 0 !important;
}

.settings-coming-soon {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  color: var(--app-muted);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: var(--app-surface);
}

.settings-coming-soon strong {
  color: var(--app-text);
  font-size: 12px;
}

.settings-coming-soon small {
  max-width: 360px;
  font-size: 8px;
  line-height: 1.45;
}

.settings-coming-symbol {
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 22%, var(--app-border));
  border-radius: 13px;
  transform: rotate(45deg);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--app-accent) 4%, transparent);
}

html[data-app-theme="dark"] .settings-module-card {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(93,242,194,.026),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(16,25,18,.94),
      rgba(9,15,11,.97)
    );
  border-color: rgba(124,255,107,.105);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.012),
    0 16px 40px rgba(0,0,0,.12);
}

html[data-app-theme="dark"] .settings-module-card.is-ready {
  border-color: rgba(124,255,107,.18);
}

html[data-app-theme="dark"] .settings-module-card.is-ready:hover {
  border-color: rgba(124,255,107,.38);
  box-shadow:
    inset 0 0 28px rgba(124,255,107,.022),
    0 0 24px rgba(124,255,107,.055),
    0 18px 44px rgba(0,0,0,.17);
}

html[data-app-theme="dark"] .settings-module-card.is-ready .settings-module-icon {
  box-shadow:
    inset 0 0 18px rgba(124,255,107,.035),
    0 0 16px rgba(124,255,107,.04);
}

html[data-app-theme="light"] .settings-module-card {
  background: #ffffff;
  border-color: #dfe5dc;
  box-shadow: 0 12px 30px rgba(47,59,49,.035);
}

html[data-app-theme="light"] .settings-module-card:hover {
  border-color: #b8c9b1;
  box-shadow: 0 16px 34px rgba(47,59,49,.065);
}

html[data-app-theme="light"] .settings-module-icon {
  background: #f6f8f4;
  border-color: #dfe5dc;
}

html[data-app-theme="light"] .settings-coming-soon {
  background: #ffffff;
  border-color: #dfe5dc;
}

@media (max-width: 820px) {
  .settings-workspace {
    padding-left: 16px;
    padding-right: 16px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .settings-module-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .settings-module-icon {
    width: 44px;
    height: 44px;
  }

  .settings-module-status {
    display: none;
  }

  .settings-module-arrow {
    grid-column: 2;
  }
}

/* =====================================================================
   CONFIGURAÇÕES — CARDS MAIS SLIM
   ===================================================================== */

.settings-grid {
  gap: 12px !important;
}

.settings-module-card {
  min-height: 92px !important;
  padding: 13px 15px !important;

  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  column-gap: 12px !important;
  row-gap: 5px !important;

  border-radius: 14px !important;
}

.settings-module-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
}

.settings-module-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.settings-module-copy {
  gap: 3px !important;
}

.settings-module-copy strong {
  font-size: 11.5px !important;
}

.settings-module-copy small {
  font-size: 7.3px !important;
  line-height: 1.35 !important;
}

.settings-module-status {
  padding: 3px 6px !important;
  font-size: 5px !important;
}

.settings-module-arrow {
  font-size: 13px !important;
}

@media (max-width: 520px) {
  .settings-module-card {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    min-height: 84px !important;
    padding: 11px 12px !important;
  }

  .settings-module-icon {
    width: 40px !important;
    height: 40px !important;
  }
}

/* =====================================================================
   CONFIGURAÇÕES — MAIS RESPIRO NAS BORDAS
   ===================================================================== */

/*
  O objetivo aqui não é reduzir apenas os cards,
  mas deixar TODO o bloco de Configurações mais afastado
  das extremidades da área principal.
*/

.settings-workspace {
  padding:
    34px
    clamp(34px, 4.5vw, 72px)
    42px !important;
}

/* A grade deixa de ocupar 100% da largura disponível. */
.settings-home {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

.settings-grid {
  width: min(100%, 1040px) !important;
  margin: 0 auto !important;

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

  column-gap: 24px !important;
  row-gap: 18px !important;
}

/* Cards um pouco mais estreitos visualmente e com mais ar interno. */
.settings-module-card {
  min-height: 92px !important;
  padding:
    14px
    16px !important;

  border-radius: 14px !important;
}

/*
  Também evita que os elementos internos pareçam
  "grudados" nas extremidades do card.
*/
.settings-module-copy {
  max-width: 320px !important;
}

.settings-module-status {
  margin-right: 2px !important;
}

.settings-module-arrow {
  margin-right: 4px !important;
}

/* TELA GRANDE:
   aumenta ainda mais o afastamento lateral sem exagerar. */
@media (min-width: 1280px) {
  .settings-workspace {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }

  .settings-grid {
    width: min(100%, 1010px) !important;
  }
}

/* Tela intermediária */
@media (max-width: 980px) {
  .settings-workspace {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .settings-grid {
    width: 100% !important;
    column-gap: 16px !important;
  }
}

/* Mobile */
@media (max-width: 720px) {
  .settings-workspace {
    padding:
      22px
      14px
      28px !important;
  }

  .settings-grid {
    grid-template-columns: 1fr !important;
    row-gap: 12px !important;
  }
}

/* =====================================================================
   CARD LATERAL DO PERFIL — MAIS LEGÍVEL
   ===================================================================== */

.app-view .profile-chip {
  min-height: 82px !important;
  padding: 10px 11px !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Foto um pouco maior para equilibrar com o bloco de texto */
.app-view .profile-sidebar-avatar {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
}

/* Bloco textual ocupa melhor a largura disponível */
.sidebar-user-identity {
  min-width: 0 !important;
  flex: 1 1 auto !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;

  align-content: center !important;
}

/* Nome principal */
.sidebar-user-identity > strong {
  display: block !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  color: var(--app-text) !important;

  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
}

/* Perfil + cargo */
.sidebar-user-meta {
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
  gap: 7px !important;

  overflow: hidden !important;
}

.sidebar-role-pill {
  flex: 0 0 auto !important;

  padding: 3px 6px !important;

  color: var(--app-accent) !important;
  background:
    color-mix(
      in srgb,
      var(--app-accent) 7%,
      transparent
    ) !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-accent) 18%,
      transparent
    ) !important;

  border-radius: 999px !important;

  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .025em !important;
}

.sidebar-job-title {
  min-width: 0 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  color: var(--app-muted) !important;

  font-size: 7.2px !important;
  line-height: 1.2 !important;
}

/* Empresa vira uma linha realmente legível */
.sidebar-company-name {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  color: var(--app-mint) !important;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace !important;

  font-size: 7.4px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;

  text-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--app-mint) 12%,
      transparent
    ) !important;
}

/* Modo noturno: melhora contraste sem exagerar o glow */
html[data-app-theme="dark"] .app-view .profile-chip {
  background:
    linear-gradient(
      115deg,
      rgba(124,255,107,.055),
      rgba(93,242,194,.022) 48%,
      rgba(155,130,255,.016)
    ),
    rgba(13,20,15,.90) !important;

  border-color: rgba(124,255,107,.17) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.016),
    0 0 18px rgba(124,255,107,.028) !important;
}

html[data-app-theme="dark"] .sidebar-role-pill {
  box-shadow:
    0 0 10px rgba(124,255,107,.035) !important;
}

html[data-app-theme="dark"] .sidebar-company-name {
  color: #69eec4 !important;
}

/* Tema claro */
html[data-app-theme="light"] .sidebar-role-pill {
  color: #527a39 !important;
  background: #edf4e8 !important;
  border-color: #d5e1cd !important;
}

html[data-app-theme="light"] .sidebar-company-name {
  color: #2f8068 !important;
  text-shadow: none !important;
}

/* Menu retraído continua mostrando apenas a foto */
.sidebar-collapsed .app-view .profile-chip,
.sidebar-collapsed .profile-chip {
  min-height: 60px !important;
  padding: 7px !important;
  justify-content: center !important;
}

.sidebar-collapsed .app-view .profile-sidebar-avatar {
  width: 44px !important;
  height: 44px !important;
  flex-basis: 44px !important;
}

.sidebar-collapsed .sidebar-user-identity {
  display: none !important;
}

/* =====================================================================
   CARD LATERAL DO PERFIL — MELHOR APROVEITAMENTO HORIZONTAL
   ===================================================================== */

.app-view .profile-chip {
  min-height: 80px !important;
  padding: 10px 12px !important;
  gap: 11px !important;
}

.app-view .profile-sidebar-avatar {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
}

.sidebar-user-identity {
  min-width: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
}

.sidebar-user-identity > strong {
  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

.sidebar-user-meta {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  overflow: visible !important;
}

.sidebar-role-pill {
  flex: 0 0 auto !important;
  padding: 3px 7px !important;
  font-size: 7.7px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .025em !important;
}

.sidebar-job-title {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: right !important;
  font-size: 7.8px !important;
  line-height: 1.15 !important;
}

.sidebar-company-name {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 8.1px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .045em !important;
}

html[data-app-theme="dark"] .sidebar-user-identity > strong {
  color: #f4f8f5 !important;
}

html[data-app-theme="dark"] .sidebar-role-pill {
  color: #b8ff63 !important;
}

html[data-app-theme="dark"] .sidebar-job-title {
  color: #9ca8a0 !important;
}

html[data-app-theme="dark"] .sidebar-company-name {
  color: #68efc4 !important;
  text-shadow: 0 0 8px rgba(93,242,194,.08) !important;
}

html[data-app-theme="light"] .sidebar-job-title {
  color: #737d75 !important;
}

.sidebar-collapsed .sidebar-user-identity {
  display: none !important;
}

/* =====================================================================
   CARD LATERAL DO PERFIL — REPOSICIONAMENTO REAL
   Foto à esquerda | Nome/empresa à esquerda | Perfil/cargo à direita
   ===================================================================== */

.app-view .profile-chip {
  min-height: 82px !important;
  padding: 10px 12px !important;
  gap: 12px !important;
  align-items: center !important;
}

.app-view .profile-sidebar-avatar {
  flex: 0 0 50px !important;
  width: 50px !important;
  height: 50px !important;
}

/*
  O bloco de texto vira uma grade 2x2:
  [ NOME                ][ PERFIL ]
  [ EMPRESA             ][ CARGO  ]
*/
.sidebar-user-identity {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "name meta"
    "company meta" !important;

  column-gap: 14px !important;
  row-gap: 6px !important;

  align-items: center !important;
}

/* Nome: canto superior esquerdo */
.sidebar-user-identity > strong {
  grid-area: name !important;

  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  font-size: 12.7px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
}

/*
  Perfil + cargo: bloco da direita.
  O perfil realmente sai debaixo do nome e vai para o outro lado do card.
*/
.sidebar-user-meta {
  grid-area: meta !important;

  min-width: 66px !important;
  max-width: 96px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 5px !important;

  overflow: visible !important;
}

/* Perfil (Master, Gestor...) no canto direito */
.sidebar-role-pill {
  flex: 0 0 auto !important;

  padding: 4px 8px !important;

  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}

/* Cargo abaixo do perfil e também alinhado à direita */
.sidebar-job-title {
  width: 100% !important;
  max-width: 96px !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  text-align: right !important;

  font-size: 7.4px !important;
  line-height: 1.15 !important;
}

/* Empresa: canto inferior esquerdo, abaixo do nome */
.sidebar-company-name {
  grid-area: company !important;

  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  font-size: 8.2px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: .045em !important;
}

/* Um pouco mais de contraste no noturno */
html[data-app-theme="dark"] .sidebar-user-identity > strong {
  color: #f7faf8 !important;
}

html[data-app-theme="dark"] .sidebar-role-pill {
  color: #b8ff63 !important;
  background: rgba(124,255,107,.07) !important;
  border-color: rgba(124,255,107,.19) !important;
  box-shadow: 0 0 11px rgba(124,255,107,.04) !important;
}

html[data-app-theme="dark"] .sidebar-company-name {
  color: #67efc3 !important;
}

/* Retraído continua mostrando só a foto */
.sidebar-collapsed .sidebar-user-identity {
  display: none !important;
}

/* =====================================================================
   CARD LATERAL DO PERFIL — NOME COM LARGURA TOTAL
   Linha 1: NOME ocupando toda a largura
   Linha 2: EMPRESA à esquerda | PERFIL/CARGO à direita
   ===================================================================== */

.sidebar-user-identity {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "name name"
    "company meta" !important;

  column-gap: 12px !important;
  row-gap: 7px !important;
}

/* Nome agora ocupa as duas colunas inteiras */
.sidebar-user-identity > strong {
  grid-area: name !important;
  width: 100% !important;
  max-width: none !important;

  font-size: 12.7px !important;
  line-height: 1.12 !important;
}

/* Empresa fica embaixo do nome, à esquerda */
.sidebar-company-name {
  grid-area: company !important;
  align-self: center !important;
}

/*
  Perfil/cargo desce para a segunda linha.
  Isso libera completamente a primeira linha para o nome.
*/
.sidebar-user-meta {
  grid-area: meta !important;

  align-self: center !important;
  justify-self: end !important;

  min-width: 64px !important;
  max-width: 102px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;

  gap: 4px !important;
}

/* Perfil um pouco mais baixo visualmente */
.sidebar-role-pill {
  margin-top: 1px !important;
}

/* Se houver cargo, fica logo abaixo do perfil */
.sidebar-job-title {
  max-width: 102px !important;
  text-align: right !important;
}

/* Pequeno ajuste vertical do card para acomodar a nova distribuição */
.app-view .profile-chip {
  min-height: 84px !important;
}

/* =====================================================================
   CARD LATERAL DO PERFIL — NADA CORTADO
   Linha 1: Nome
   Linha 2: Empresa
   Linha 3: Perfil + cargo
   ===================================================================== */

.app-view .profile-chip {
  min-height: 94px !important;
  padding: 11px 12px !important;
  gap: 12px !important;
  align-items: center !important;
}

.app-view .profile-sidebar-avatar {
  flex: 0 0 50px !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 12px !important;
}

/* O bloco de texto usa 100% do restante do card */
.sidebar-user-identity {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas:
    "name"
    "company"
    "meta" !important;

  row-gap: 5px !important;
  align-content: center !important;
}

/* Nome nunca divide espaço com outro elemento */
.sidebar-user-identity > strong {
  grid-area: name !important;

  width: 100% !important;
  max-width: none !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;

  color: var(--app-text) !important;

  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

/* Empresa em linha própria e sem reticências */
.sidebar-company-name {
  grid-area: company !important;

  display: block !important;
  width: 100% !important;
  max-width: none !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;

  color: var(--app-mint) !important;

  font-size: 7.8px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .04em !important;
}

/* Perfil/cargo embaixo, usando toda a largura */
.sidebar-user-meta {
  grid-area: meta !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;

  overflow: visible !important;
}

/* Perfil não é cortado nem recebe largura máxima artificial */
.sidebar-role-pill {
  flex: 0 0 auto !important;
  max-width: 100% !important;

  padding: 3px 7px !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;

  font-size: 7.4px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

/* Cargo pode quebrar linha se necessário em vez de cortar */
.sidebar-job-title {
  min-width: 0 !important;
  max-width: none !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;

  text-align: right !important;

  color: var(--app-muted) !important;

  font-size: 7.3px !important;
  line-height: 1.15 !important;
}

/* Administrador global / nomes maiores continuam legíveis */
html[data-app-theme="dark"] .sidebar-user-identity > strong {
  color: #f7faf8 !important;
}

html[data-app-theme="dark"] .sidebar-company-name {
  color: #67efc3 !important;
}

html[data-app-theme="dark"] .sidebar-role-pill {
  color: #b8ff63 !important;
  background: rgba(124,255,107,.07) !important;
  border-color: rgba(124,255,107,.19) !important;
  box-shadow: 0 0 10px rgba(124,255,107,.035) !important;
}

/* Se a largura ficar muito pequena, perfil/cargo podem quebrar sem cortar */
@media (max-width: 1180px) {
  .sidebar-user-meta {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }
}

/* Menu retraído: apenas foto */
.sidebar-collapsed .sidebar-user-identity {
  display: none !important;
}

.sidebar-collapsed .app-view .profile-chip,
.sidebar-collapsed .profile-chip {
  min-height: 60px !important;
  padding: 7px !important;
  justify-content: center !important;
}

/* =====================================================================
   CARD LATERAL DO PERFIL — HARMONIA COM A FOTO
   Linha 1: Nome
   Linha 2: Perfil
   Linha 3: Empresa à direita
   Bloco textual ligeiramente mais baixo
   ===================================================================== */

.app-view .profile-chip {
  min-height: 96px !important;
  padding: 11px 12px !important;
  gap: 12px !important;
  align-items: center !important;
}

.app-view .profile-sidebar-avatar {
  flex: 0 0 50px !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 12px !important;
}

/*
  Novo desenho:
  [ NOME               ]
  [ PERFIL              ]
  [             EMPRESA ]
*/
.sidebar-user-identity {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas:
    "name name"
    "meta meta"
    "company company" !important;

  row-gap: 5px !important;

  align-content: center !important;

  /* desce o conjunto sem mexer na foto */
  transform: translateY(3px) !important;
}

/* Nome */
.sidebar-user-identity > strong {
  grid-area: name !important;

  width: 100% !important;
  max-width: none !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;

  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

/*
  Perfil passa para o lugar onde antes ficava a empresa:
  logo abaixo do nome, alinhado à esquerda.
*/
.sidebar-user-meta {
  grid-area: meta !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;

  overflow: visible !important;
}

.sidebar-role-pill {
  flex: 0 0 auto !important;
  max-width: 100% !important;

  padding: 3px 7px !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;

  font-size: 7.6px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

/* Cargo fica ao lado do perfil, quando existir */
.sidebar-job-title {
  min-width: 0 !important;
  max-width: none !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;

  text-align: left !important;

  font-size: 7.3px !important;
  line-height: 1.15 !important;
}

/*
  Empresa assume o lugar visual do antigo perfil:
  linha de baixo e alinhada à direita.
*/
.sidebar-company-name {
  grid-area: company !important;

  display: block !important;
  width: 100% !important;
  max-width: none !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;

  text-align: right !important;

  font-size: 7.8px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .04em !important;
}

/* Noturno */
html[data-app-theme="dark"] .sidebar-user-identity > strong {
  color: #f7faf8 !important;
}

html[data-app-theme="dark"] .sidebar-role-pill {
  color: #b8ff63 !important;
  background: rgba(124,255,107,.07) !important;
  border-color: rgba(124,255,107,.19) !important;
  box-shadow: 0 0 10px rgba(124,255,107,.035) !important;
}

html[data-app-theme="dark"] .sidebar-company-name {
  color: #67efc3 !important;
  text-shadow: 0 0 8px rgba(93,242,194,.08) !important;
}

/* Claro */
html[data-app-theme="light"] .sidebar-company-name {
  color: #2f8068 !important;
  text-shadow: none !important;
}

/* Menu retraído continua mostrando apenas a foto */
.sidebar-collapsed .sidebar-user-identity {
  display: none !important;
}

.sidebar-collapsed .app-view .profile-chip,
.sidebar-collapsed .profile-chip {
  min-height: 60px !important;
  padding: 7px !important;
  justify-content: center !important;
}

/* =====================================================================
   CARD DE PERFIL — COMPOSIÇÃO DO PROSPECTA PONTO / IDENTIDADE CORBAN
   FOTO QUADRADA | NOME | EMPRESA | PERFIL + CARGO | BOTÃO CIRCULAR
   ===================================================================== */

.app-view .profile-chip {
  position: relative !important;

  min-height: 76px !important;
  height: auto !important;

  padding:
    10px
    48px
    10px
    10px !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  overflow: visible !important;

  border-radius: 14px !important;
}

/* Foto: mantém o formato quadrado do Corban */
.app-view .profile-sidebar-avatar {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;

  border-radius: 11px !important;

  align-self: center !important;
}

/*
  Mesma lógica visual do Ponto:
  NOME
  EMPRESA
  PERFIL + CARGO
*/
.sidebar-user-identity {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas:
    "name"
    "company"
    "meta" !important;

  row-gap: 3px !important;

  align-content: center !important;

  /* remove deslocamentos das versões anteriores */
  transform: none !important;
}

/* Nome */
.sidebar-user-identity > strong {
  grid-area: name !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;

  color: var(--app-text) !important;

  font-size: 11.8px !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  letter-spacing: -.012em !important;
}

/* Empresa: imediatamente abaixo do nome, como no Ponto */
.sidebar-company-name {
  grid-area: company !important;

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;

  text-align: left !important;
  text-transform: none !important;

  color: var(--app-muted) !important;

  font-family: inherit !important;
  font-size: 8px !important;
  font-weight: 650 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;

  text-shadow: none !important;
}

/* Perfil e cargo ficam na última linha */
.sidebar-user-meta {
  grid-area: meta !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin-top: 1px !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;

  gap: 5px !important;

  overflow: visible !important;
}

/* Pill do perfil, igual à lógica do Ponto mas na identidade Corban */
.sidebar-role-pill {
  flex: 0 0 auto !important;

  max-width: 100% !important;

  margin: 0 !important;
  padding: 2px 6px !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;

  border-radius: 999px !important;

  font-size: 6.8px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase !important;
}

/* Cargo: discreto, ao lado do perfil */
.sidebar-job-title {
  flex: 1 1 auto !important;

  min-width: 0 !important;
  max-width: 100% !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;

  text-align: left !important;

  color: var(--app-muted) !important;

  font-size: 6.9px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
}

/* =========================================================
   BOTÃO CIRCULAR NO CANTO DIREITO
   O card inteiro continua clicável; isso é a assinatura visual.
   ========================================================= */

.app-view .profile-chip::after {
  content: "›" !important;

  position: absolute !important;
  top: 50% !important;
  right: 10px !important;

  width: 28px !important;
  height: 28px !important;

  display: grid !important;
  place-items: center !important;

  transform: translateY(-50%) !important;

  color: var(--app-accent) !important;

  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--app-accent) 8%, transparent),
      color-mix(in srgb, var(--app-mint) 3%, transparent)
    ),
    var(--app-control) !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-accent) 30%,
      var(--app-border)
    ) !important;

  border-radius: 50% !important;

  box-shadow:
    inset 0 0 12px
      color-mix(
        in srgb,
        var(--app-accent) 4%,
        transparent
      ),
    0 0 12px
      color-mix(
        in srgb,
        var(--app-accent) 6%,
        transparent
      ) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 21px !important;
  font-weight: 300 !important;
  line-height: 1 !important;

  pointer-events: none !important;

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

.app-view .profile-chip:hover::after {
  color: #071008 !important;

  background:
    linear-gradient(
      135deg,
      var(--app-accent),
      var(--app-mint)
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--app-accent) 62%,
      transparent
    ) !important;

  box-shadow:
    0 0 18px
      color-mix(
        in srgb,
        var(--app-accent) 22%,
        transparent
      ) !important;

  transform:
    translateY(-50%)
    translateX(2px) !important;
}

/* =========================================================
   DARK — identidade própria do Corban
   ========================================================= */

html[data-app-theme="dark"] .app-view .profile-chip {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(93,242,194,.055),
      transparent 34%
    ),
    linear-gradient(
      115deg,
      rgba(124,255,107,.045),
      rgba(10,17,12,.93) 45%,
      rgba(155,130,255,.018)
    ) !important;

  border-color: rgba(124,255,107,.17) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.014),
    inset 0 0 24px rgba(124,255,107,.012),
    0 0 18px rgba(124,255,107,.025) !important;
}

html[data-app-theme="dark"] .app-view .profile-chip:hover {
  border-color: rgba(124,255,107,.30) !important;

  box-shadow:
    inset 0 0 24px rgba(124,255,107,.022),
    0 0 20px rgba(124,255,107,.05) !important;
}

html[data-app-theme="dark"] .sidebar-user-identity > strong {
  color: #f5f9f6 !important;
}

html[data-app-theme="dark"] .sidebar-company-name {
  color: #89968e !important;
}

html[data-app-theme="dark"] .sidebar-role-pill {
  color: #b8ff63 !important;

  background: rgba(124,255,107,.065) !important;

  border-color: rgba(124,255,107,.18) !important;

  box-shadow:
    inset 0 0 8px rgba(124,255,107,.025),
    0 0 8px rgba(124,255,107,.025) !important;
}

/* A foto quadrada também recebe acabamento Corban */
html[data-app-theme="dark"] .profile-sidebar-avatar {
  border:
    1px solid rgba(124,255,107,.24) !important;

  box-shadow:
    0 0 0 2px rgba(124,255,107,.025),
    0 0 14px rgba(124,255,107,.055) !important;
}

/* =========================================================
   LIGHT
   ========================================================= */

html[data-app-theme="light"] .app-view .profile-chip {
  background:
    linear-gradient(
      115deg,
      #ffffff,
      #f7faf5
    ) !important;

  border-color: #d8e2d4 !important;

  box-shadow:
    0 8px 24px rgba(47,59,49,.045) !important;
}

html[data-app-theme="light"] .sidebar-company-name {
  color: #7a837c !important;
}

html[data-app-theme="light"] .sidebar-role-pill {
  color: #507739 !important;
  background: #edf4e8 !important;
  border-color: #d4e1cc !important;
}

/* =========================================================
   MENU RETRAÍDO
   ========================================================= */

.sidebar-collapsed .sidebar-user-identity {
  display: none !important;
}

.sidebar-collapsed .app-view .profile-chip,
.sidebar-collapsed .profile-chip {
  min-height: 60px !important;

  padding: 6px !important;

  justify-content: center !important;
}

.sidebar-collapsed .app-view .profile-chip::after {
  display: none !important;
}

.sidebar-collapsed .app-view .profile-sidebar-avatar {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
}

/* =====================================================================
   CARD DE PERFIL — SETA VETORIAL PERFEITAMENTE CENTRALIZADA
   ===================================================================== */

/*
  Remove o caractere tipográfico "›".
  A seta passa a ser um SVG de 12x12 centralizado pelo próprio background,
  evitando diferenças de alinhamento entre Chrome/Windows/fontes.
*/
.app-view .profile-chip::after {
  content: "" !important;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.25 2.5L7.75 6L4.25 9.5' stroke='%23B8FF63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center center / 12px 12px no-repeat,
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--app-accent) 8%, transparent),
      color-mix(in srgb, var(--app-mint) 3%, transparent)
    ),
    var(--app-control) !important;

  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  padding: 0 !important;
}

/* No hover a seta também permanece perfeitamente centralizada. */
.app-view .profile-chip:hover::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.25 2.5L7.75 6L4.25 9.5' stroke='%23071008' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center center / 12px 12px no-repeat,
    linear-gradient(
      135deg,
      var(--app-accent),
      var(--app-mint)
    ) !important;
}

/* =====================================================================
   CARD DE PERFIL — SETA SOMENTE COM MENU EXPANDIDO
   ===================================================================== */

/*
  Quando a sidebar está recolhida, a seta do card de perfil
  não pode aparecer sobre a foto.
*/
.sidebar-collapsed .app-view .profile-chip::after,
.sidebar-collapsed .profile-chip::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Com o menu recolhido, remove também o espaço reservado à direita. */
.sidebar-collapsed .app-view .profile-chip,
.sidebar-collapsed .profile-chip {
  padding: 6px !important;
  justify-content: center !important;
}

/* Garante que no estado expandido a seta volte normalmente. */
.app-view:not(.sidebar-collapsed) .profile-chip::after,
body:not(.sidebar-collapsed) .app-view .profile-chip::after {
  visibility: visible;
}

/* =====================================================================
   CONFIGURAÇÕES — MAIS CONTEÚDO, MENOS VAZIO
   ===================================================================== */

/*
  Mantém o respiro externo da página,
  mas deixa cada card mais proporcional ao conteúdo interno.
*/
.settings-grid {
  width: min(100%, 980px) !important;
  column-gap: 20px !important;
  row-gap: 16px !important;
}

/* Card ligeiramente mais compacto, porém com conteúdo maior */
.settings-module-card {
  min-height: 86px !important;
  padding: 13px 15px !important;

  grid-template-columns:
    46px
    minmax(0, 1fr)
    auto !important;

  grid-template-rows:
    auto
    auto !important;

  column-gap: 13px !important;
  row-gap: 5px !important;

  align-items: center !important;

  border-radius: 14px !important;
}

/* Ícone com presença maior */
.settings-module-icon {
  width: 46px !important;
  height: 46px !important;

  border-radius: 12px !important;
}

.settings-module-icon svg {
  width: 23px !important;
  height: 23px !important;

  stroke-width: 1.7 !important;
}

/* Bloco textual usa melhor a altura */
.settings-module-copy {
  align-self: center !important;
  gap: 5px !important;

  max-width: none !important;
}

/* Título realmente legível */
.settings-module-copy strong {
  color: var(--app-text) !important;

  font-size: 13.5px !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  letter-spacing: -.01em !important;
}

/* Subtítulo maior e com contraste melhor */
.settings-module-copy small {
  max-width: 430px !important;

  color:
    color-mix(
      in srgb,
      var(--app-text) 53%,
      var(--app-muted)
    ) !important;

  font-size: 8.8px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

/* Badge CONFIGURAR / PRÓXIMO mais fácil de ler */
.settings-module-status {
  align-self: start !important;
  justify-self: end !important;

  padding: 4px 7px !important;

  font-size: 6.2px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
}

/* Seta mais visível e mais próxima do conteúdo */
.settings-module-arrow {
  align-self: end !important;
  justify-self: end !important;

  margin-right: 2px !important;
  margin-bottom: 1px !important;

  font-size: 16px !important;
  line-height: 1 !important;
}

/* Dark: contraste melhor para subtítulos */
html[data-app-theme="dark"] .settings-module-copy small {
  color: #8e9a91 !important;
}

/* Light */
html[data-app-theme="light"] .settings-module-copy small {
  color: #687269 !important;
}

/*
  Em telas muito largas, evita aqueles cards enormes
  que ficam com uma quantidade excessiva de espaço morto.
*/
@media (min-width: 1280px) {
  .settings-grid {
    width: min(100%, 940px) !important;
  }
}

/* Intermediário */
@media (max-width: 980px) {
  .settings-grid {
    width: 100% !important;
  }

  .settings-module-copy strong {
    font-size: 13px !important;
  }

  .settings-module-copy small {
    font-size: 8.4px !important;
  }
}

/* Mobile */
@media (max-width: 720px) {
  .settings-module-card {
    min-height: 84px !important;
  }
}

/* =====================================================================
   CONFIGURAÇÕES — COMPOSIÇÃO HARMÔNICA
   ÍCONE | CONTEÚDO | STATUS
   ===================================================================== */

.settings-module-card {
  min-height: 84px !important;
  padding: 13px 15px !important;

  display: grid !important;
  grid-template-columns:
    46px
    minmax(0, 1fr)
    auto !important;

  grid-template-rows: 1fr !important;
  grid-template-areas:
    "icon copy status" !important;

  column-gap: 14px !important;
  row-gap: 0 !important;

  align-items: center !important;
}

/* Ícone perfeitamente centralizado na vertical */
.settings-module-icon {
  grid-area: icon !important;

  width: 46px !important;
  height: 46px !important;

  align-self: center !important;
  justify-self: start !important;
}

/* Bloco de texto centralizado verticalmente em relação ao ícone */
.settings-module-copy {
  grid-area: copy !important;

  min-width: 0 !important;
  max-width: none !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  gap: 5px !important;

  align-self: center !important;
}

.settings-module-copy strong {
  margin: 0 !important;

  font-size: 13.5px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
}

.settings-module-copy small {
  margin: 0 !important;

  max-width: 100% !important;

  font-size: 8.8px !important;
  line-height: 1.3 !important;
}

/*
  CONFIGURAR / PRÓXIMO ficam no MESMO eixo vertical,
  sem ficar presos no topo do retângulo.
*/
.settings-module-status {
  grid-area: status !important;

  align-self: center !important;
  justify-self: end !important;

  margin: 0 !important;
  padding: 4px 8px !important;

  font-size: 6.2px !important;
  line-height: 1 !important;
}

/* A seta deixa de existir também por CSS, caso haja cache/HTML antigo */
.settings-module-arrow {
  display: none !important;
}

/* Mantém espaço confortável entre texto e badge */
.settings-module-copy {
  padding-right: 12px !important;
}

/* Um pouco mais de equilíbrio horizontal */
.settings-grid {
  column-gap: 20px !important;
  row-gap: 16px !important;
}

/* Desktop amplo */
@media (min-width: 1280px) {
  .settings-module-card {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Telas menores */
@media (max-width: 720px) {
  .settings-module-card {
    grid-template-columns:
      44px
      minmax(0, 1fr) !important;

    grid-template-areas:
      "icon copy" !important;
  }

  .settings-module-status {
    display: none !important;
  }
}

/* =====================================================================
   CONFIGURAÇÕES — AO ABRIR UM MÓDULO, MOSTRAR SOMENTE O MÓDULO
   ===================================================================== */

/*
  Correção importante:
  regras anteriores deram display:flex à central de Configurações.
  Isso acabava vencendo a classe .hidden e mantinha os 4 cards visíveis.
*/
#settings-home.hidden,
.settings-home.hidden {
  display: none !important;
}

/* Submódulos realmente somem quando estiverem ocultos */
#section-settings .settings-module-view.hidden {
  display: none !important;
}

/* Quando um submódulo estiver ativo, ocupa sozinho toda a área */
#section-settings .settings-module-view:not(.hidden) {
  display: block !important;
  width: 100% !important;
}

/* A central só aparece quando nenhum módulo interno estiver aberto */
#settings-home:not(.hidden) {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
}

/*
  O conteúdo interno sobe para ocupar naturalmente o espaço
  que antes era usado pelos quatro cards.
*/
#section-settings .settings-module-view:not(.hidden) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Barra de voltar fica discreta e no topo real do módulo */
.settings-module-toolbar {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* Tabelas e futuros módulos passam a usar toda a largura disponível */
.settings-embedded-module,
#settings-tables .tables-workspace,
#settings-tables .tables-shell {
  width: 100% !important;
  max-width: none !important;
}

/* =====================================================================
   TABELAS — USAR TODA A ÁREA ÚTIL
   ===================================================================== */

/*
  Dentro de um módulo de Configurações não queremos mais faixa superior.
  A navegação de volta pode ser feita clicando em Configurações no menu.
*/
#settings-tables .settings-module-toolbar {
  display: none !important;
}

/*
  Quando um módulo interno está aberto, reduz drasticamente
  o padding externo que antes roubava largura e altura.
*/
#section-settings:has(.settings-module-view:not(.hidden)) {
  padding:
    10px
    12px
    18px !important;
}

/* O módulo ocupa toda a área disponível */
#settings-tables,
#settings-tables .settings-embedded-module,
#settings-tables .tables-workspace,
#settings-tables .tables-shell {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

#settings-tables .tables-shell {
  padding: 0 !important;
  margin: 0 !important;
}

/* Busca praticamente de borda a borda */
#settings-tables .tables-searchbar {
  width: 100% !important;

  min-height: 52px !important;
  padding: 7px 15px !important;

  border-radius: 13px !important;
}

#settings-tables .tables-search input {
  height: 34px !important;

  font-size: 12px !important;
}

#settings-tables .tables-catalog-counter {
  font-size: 7.8px !important;
}

/*
  Painel principal agora acompanha 100% da largura do módulo,
  ficando muito mais próximo das extremidades.
*/
#settings-tables .tables-panel {
  width: 100% !important;

  min-height: calc(100vh - 132px) !important;

  margin-top: 10px !important;

  border-radius: 13px !important;
}

/* Cabeçalho interno ganha um pouco mais de presença */
#settings-tables .tables-panel-top {
  min-height: 58px !important;
  padding: 0 15px !important;
}

#settings-tables .tables-primary-action,
#settings-tables .tables-catalog-empty button {
  min-height: 37px !important;

  padding: 0 14px !important;

  font-size: 8.5px !important;
}

/* Lista também usa melhor a largura interna */
#settings-tables .tables-catalog-list {
  padding:
    12px
    13px
    18px !important;

  gap: 11px !important;
}

/* =========================================================
   PROMOTORA
   ========================================================= */

#settings-tables .table-promoter-head {
  min-height: 64px !important;

  padding: 10px 12px !important;

  grid-template-columns:
    30px
    38px
    minmax(0, 1fr)
    auto !important;

  gap: 10px !important;
}

#settings-tables .table-promoter-symbol {
  width: 36px !important;
  height: 36px !important;
}

#settings-tables .table-promoter-name strong {
  font-size: 12px !important;
  line-height: 1.15 !important;
}

#settings-tables .table-promoter-name small {
  font-size: 7.3px !important;
  line-height: 1.2 !important;
}

#settings-tables .table-promoter-body {
  padding:
    0
    11px
    11px
    49px !important;

  gap: 9px !important;
}

/* =========================================================
   BANCO
   ========================================================= */

#settings-tables .table-bank-head {
  min-height: 56px !important;

  padding: 8px 10px !important;

  grid-template-columns:
    27px
    32px
    minmax(0, 1fr)
    auto !important;

  gap: 9px !important;
}

#settings-tables .table-bank-symbol {
  width: 31px !important;
  height: 31px !important;
}

#settings-tables .table-bank-name strong {
  font-size: 10px !important;
  line-height: 1.15 !important;
}

#settings-tables .table-bank-name small {
  font-size: 7px !important;
}

#settings-tables .table-bank-body {
  padding:
    0
    10px
    10px
    68px !important;

  gap: 6px !important;
}

/* =========================================================
   TABELAS / PERCENTUAIS
   ========================================================= */

#settings-tables .table-catalog-item-row {
  min-height: 46px !important;

  padding:
    7px
    8px
    7px
    10px !important;

  grid-template-columns:
    8px
    minmax(0, 1fr)
    88px
    33px !important;

  gap: 9px !important;
}

#settings-tables .table-catalog-item-name {
  font-size: 9px !important;
  line-height: 1.2 !important;
}

#settings-tables .table-catalog-item-percent {
  font-size: 10px !important;
}

/* Botões internos um pouco mais fáceis de ler */
#settings-tables .table-catalog-add-inline {
  min-height: 33px !important;

  padding: 0 10px !important;

  font-size: 7.8px !important;
}

#settings-tables .table-catalog-icon-button {
  width: 33px !important;
  height: 33px !important;
}

/* Tela muito larga: continua chegando perto das bordas */
@media (min-width: 1280px) {
  #section-settings:has(.settings-module-view:not(.hidden)) {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Mobile */
@media (max-width: 720px) {
  #section-settings:has(.settings-module-view:not(.hidden)) {
    padding:
      8px
      8px
      14px !important;
  }

  #settings-tables .table-promoter-body {
    padding-left: 12px !important;
  }

  #settings-tables .table-bank-body {
    padding-left: 12px !important;
  }
}

/* =====================================================================
   TABELAS — BUSCA COMPACTA + NOVA PROMOTORA NO TOPO
   ===================================================================== */

/*
  A faixa superior agora é uma única linha funcional:
  [ busca menor ]        [ contador ] [ + Nova promotora ]
*/
#settings-tables .tables-searchbar {
  width: 100% !important;
  min-height: 48px !important;

  padding: 6px 8px 6px 12px !important;

  display: grid !important;
  grid-template-columns:
    minmax(300px, 0.68fr)
    minmax(260px, 0.32fr) !important;

  align-items: center !important;
  gap: 14px !important;

  border-radius: 13px !important;
}

/* A busca deixa de esticar até quase a borda direita */
#settings-tables .tables-search {
  width: 100% !important;
  max-width: 760px !important;
  min-width: 0 !important;
}

#settings-tables .tables-search input {
  width: 100% !important;
  height: 32px !important;

  font-size: 11.5px !important;
}

/* Lado direito: contador + botão */
#settings-tables .tables-search-actions {
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  gap: 14px !important;
}

#settings-tables .tables-catalog-counter {
  flex: 0 1 auto !important;

  margin: 0 !important;

  white-space: nowrap !important;

  font-size: 7.6px !important;
}

/* Botão sobe para a mesma linha da busca */
#settings-tables .tables-searchbar .tables-primary-action {
  flex: 0 0 auto !important;

  min-height: 34px !important;
  height: 34px !important;

  margin: 0 !important;
  padding: 0 13px !important;

  font-size: 8.2px !important;
}

/*
  A antiga linha exclusiva do botão deixa de existir.
  Caso algum HTML antigo ainda esteja em cache, ela também some por CSS.
*/
#settings-tables .tables-panel-top {
  display: none !important;
}

/* O painel passa a começar diretamente na lista */
#settings-tables .tables-panel {
  margin-top: 8px !important;
  padding-top: 0 !important;
}

#settings-tables .tables-catalog-list {
  padding-top: 11px !important;
}

/* A primeira promotora sobe e aproveita o espaço recuperado */
#settings-tables .tables-catalog-list > :first-child {
  margin-top: 0 !important;
}

/* Desktop largo: busca continua controlada, sem voltar a ficar enorme */
@media (min-width: 1380px) {
  #settings-tables .tables-searchbar {
    grid-template-columns:
      minmax(360px, 0.72fr)
      minmax(300px, 0.28fr) !important;
  }

  #settings-tables .tables-search {
    max-width: 800px !important;
  }
}

/* Telas intermediárias */
@media (max-width: 960px) {
  #settings-tables .tables-searchbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  #settings-tables .tables-catalog-counter {
    display: none !important;
  }
}

/* Mobile */
@media (max-width: 650px) {
  #settings-tables .tables-searchbar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;

    padding: 8px !important;
  }

  #settings-tables .tables-search {
    max-width: none !important;
  }

  #settings-tables .tables-search-actions {
    justify-content: flex-end !important;
  }
}

/* =====================================================================
   CORBAN — NIGHT SPECTRUM
   Verde continua sendo a assinatura.
   Violeta + aqua entram como cores secundárias.
   Grafite assume as bordas estruturais.
   ===================================================================== */

html[data-app-theme="dark"] {
  --corban-lime: #b8ff63;
  --corban-aqua: #5de2c2;
  --corban-violet: #8f7cff;

  --corban-line: rgba(151, 164, 157, .13);
  --corban-line-strong: rgba(151, 164, 157, .21);

  --corban-aqua-soft: rgba(93, 226, 194, .09);
  --corban-violet-soft: rgba(143, 124, 255, .085);
  --corban-lime-soft: rgba(124, 255, 107, .075);
}

/* ---------------------------------------------------------------------
   FUNDO
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] .app-view {
  background:
    radial-gradient(
      circle at 9% 13%,
      rgba(124,255,107,.035),
      transparent 24%
    ),
    radial-gradient(
      circle at 86% 12%,
      rgba(143,124,255,.070),
      transparent 26%
    ),
    radial-gradient(
      circle at 72% 88%,
      rgba(93,226,194,.045),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      #050806 0%,
      #080b0b 48%,
      #08070c 100%
    ) !important;
}

/* ---------------------------------------------------------------------
   BORDAS E SUPERFÍCIES — menos verde estrutural
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] :is(
  .panel,
  .company-list-stage,
  .company-row,
  .employees-panel,
  .employee-row,
  .tables-panel,
  .table-promoter-card,
  .table-bank-card,
  .pipeline-shell,
  .pipeline-table-wrap,
  .profile-modal-card,
  .employee-modal-card,
  .table-catalog-modal-card,
  .modal,
  .credential-card,
  .first-access-card,
  .settings-module-card
) {
  border-color: var(--corban-line) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(143,124,255,.022),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      rgba(16,23,19,.96),
      rgba(10,14,13,.97)
    ) !important;
}

/* Cards ativos/hover usam espectro, não só verde */
html[data-app-theme="dark"] :is(
  .company-row,
  .employee-row,
  .table-promoter-card,
  .table-bank-card,
  .settings-module-card
):hover {
  border-color: rgba(93,226,194,.24) !important;

  box-shadow:
    inset 0 0 24px rgba(93,226,194,.018),
    0 0 22px rgba(143,124,255,.025),
    0 16px 42px rgba(0,0,0,.20) !important;
}

/* ---------------------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] .app-view .sidebar {
  border-right-color: rgba(93,226,194,.095) !important;

  background:
    radial-gradient(
      circle at 18% 8%,
      rgba(124,255,107,.045),
      transparent 22%
    ),
    radial-gradient(
      circle at 15% 72%,
      rgba(143,124,255,.035),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(8,13,10,.98),
      rgba(6,9,9,.99)
    ) !important;
}

/* item ativo = verde; hover secundário = aqua */
html[data-app-theme="dark"] .sidebar-nav .nav.active {
  border-color: rgba(124,255,107,.33) !important;
}

html[data-app-theme="dark"] .sidebar-nav .nav:not(.active):hover {
  border-color: rgba(93,226,194,.18) !important;
}

html[data-app-theme="dark"] .sidebar-nav .nav:not(.active):hover .nav-icon {
  color: var(--corban-aqua) !important;
  filter: drop-shadow(0 0 6px rgba(93,226,194,.18)) !important;
}

/* ---------------------------------------------------------------------
   CONFIGURAÇÕES — cada módulo ganha uma assinatura secundária
   --------------------------------------------------------------------- */

/* Tabelas permanece lime */
html[data-app-theme="dark"]
.settings-module-card:nth-child(1) .settings-module-icon {
  color: var(--corban-lime) !important;
  border-color: rgba(124,255,107,.25) !important;
}

/* Fases = violeta */
html[data-app-theme="dark"]
.settings-module-card:nth-child(2) .settings-module-icon {
  color: var(--corban-violet) !important;
  border-color: rgba(143,124,255,.24) !important;
}

/* Bancos = aqua */
html[data-app-theme="dark"]
.settings-module-card:nth-child(3) .settings-module-icon {
  color: var(--corban-aqua) !important;
  border-color: rgba(93,226,194,.24) !important;
}

/* Produtos = violeta suave */
html[data-app-theme="dark"]
.settings-module-card:nth-child(4) .settings-module-icon {
  color: #b19cff !important;
  border-color: rgba(177,156,255,.22) !important;
}

html[data-app-theme="dark"]
.settings-module-card:nth-child(2):hover {
  border-color: rgba(143,124,255,.28) !important;
  box-shadow:
    inset 0 0 24px rgba(143,124,255,.018),
    0 0 22px rgba(143,124,255,.045) !important;
}

html[data-app-theme="dark"]
.settings-module-card:nth-child(3):hover {
  border-color: rgba(93,226,194,.28) !important;
  box-shadow:
    inset 0 0 24px rgba(93,226,194,.018),
    0 0 22px rgba(93,226,194,.045) !important;
}

/* ---------------------------------------------------------------------
   TABELAS — remover excesso de verde
   --------------------------------------------------------------------- */

/* barra de busca mais neutra */
html[data-app-theme="dark"]
#settings-tables .tables-searchbar {
  border-color: rgba(93,226,194,.12) !important;

  background:
    linear-gradient(
      90deg,
      rgba(93,226,194,.018),
      rgba(143,124,255,.012)
    ),
    rgba(11,17,14,.92) !important;
}

/* painel externo grafite com leve violeta */
html[data-app-theme="dark"]
#settings-tables .tables-panel {
  border-color: rgba(143,124,255,.10) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(143,124,255,.028),
      transparent 30%
    ),
    rgba(11,17,14,.94) !important;
}

/* Promotora: borda estrutural neutra */
html[data-app-theme="dark"]
#settings-tables .table-promoter-card {
  border-color: rgba(150,164,156,.13) !important;
}

/* Banco recebe aqua */
html[data-app-theme="dark"]
#settings-tables .table-bank-card {
  border-color: rgba(93,226,194,.16) !important;
}

/* símbolo de promotora continua verde */
html[data-app-theme="dark"]
#settings-tables .table-promoter-symbol {
  color: var(--corban-lime) !important;
}

/* símbolo de banco vira aqua */
html[data-app-theme="dark"]
#settings-tables .table-bank-symbol {
  color: var(--corban-aqua) !important;
  border-color: rgba(93,226,194,.24) !important;

  background: rgba(93,226,194,.055) !important;
}

/* bolinha da tabela = violeta */
html[data-app-theme="dark"]
#settings-tables .table-catalog-item-row::before {
  background: var(--corban-violet) !important;
  box-shadow: 0 0 8px rgba(143,124,255,.24) !important;
}

/* percentual positivo continua verde */
html[data-app-theme="dark"]
#settings-tables .table-catalog-item-percent {
  color: var(--corban-lime) !important;
}

/* botões de editar saem do verde e vão para aqua/violeta */
html[data-app-theme="dark"]
#settings-tables .table-catalog-icon-button {
  color: var(--corban-aqua) !important;

  border-color: rgba(93,226,194,.18) !important;

  background: rgba(93,226,194,.035) !important;
}

html[data-app-theme="dark"]
#settings-tables .table-catalog-icon-button:hover {
  color: #d9fff4 !important;

  border-color: rgba(93,226,194,.38) !important;

  background: rgba(93,226,194,.09) !important;

  box-shadow: 0 0 16px rgba(93,226,194,.08) !important;
}

/* botões "Adicionar banco/tabela" ficam aqua */
html[data-app-theme="dark"]
#settings-tables .table-catalog-add-inline {
  color: var(--corban-aqua) !important;

  border-color: rgba(93,226,194,.25) !important;

  background:
    linear-gradient(
      135deg,
      rgba(93,226,194,.07),
      rgba(143,124,255,.025)
    ) !important;
}

html[data-app-theme="dark"]
#settings-tables .table-catalog-add-inline:hover {
  border-color: rgba(93,226,194,.42) !important;

  box-shadow:
    0 0 17px rgba(93,226,194,.09) !important;
}

/* + Nova promotora continua como CTA verde */
html[data-app-theme="dark"]
#settings-tables .tables-primary-action {
  color: #071008 !important;

  background:
    linear-gradient(
      105deg,
      #7CFF6B,
      #c6ff79 48%,
      #67e5c4
    ) !important;

  border-color: rgba(124,255,107,.50) !important;
}

/* ---------------------------------------------------------------------
   INPUTS / SELECTS — foco alterna aqua-violeta
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] :is(
  .app-view input:not([type="checkbox"]):not([type="radio"]),
  .app-view textarea,
  .corban-employee-select-trigger,
  .corban-employee-select-search
) {
  border-color: rgba(150,164,156,.15) !important;
}

html[data-app-theme="dark"] :is(
  .app-view input:not([type="checkbox"]):not([type="radio"]),
  .app-view textarea,
  .corban-employee-select-search
):focus {
  border-color: rgba(93,226,194,.44) !important;

  box-shadow:
    0 0 0 3px rgba(93,226,194,.045),
    0 0 20px rgba(143,124,255,.035) !important;
}

/* dropdown: selecionado continua verde; hover usa aqua */
html[data-app-theme="dark"]
.corban-employee-select-option:hover {
  color: var(--corban-aqua) !important;

  background:
    linear-gradient(
      90deg,
      rgba(93,226,194,.08),
      rgba(143,124,255,.025)
    ) !important;
}

html[data-app-theme="dark"]
.corban-employee-select-option.is-selected {
  color: var(--corban-lime) !important;

  background:
    linear-gradient(
      90deg,
      rgba(124,255,107,.08),
      rgba(93,226,194,.02)
    ) !important;
}

/* ---------------------------------------------------------------------
   PERFIL LATERAL
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] .app-view .profile-chip {
  border-color: rgba(93,226,194,.15) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(143,124,255,.055),
      transparent 34%
    ),
    linear-gradient(
      115deg,
      rgba(124,255,107,.035),
      rgba(11,17,14,.95) 46%,
      rgba(93,226,194,.02)
    ) !important;
}

html[data-app-theme="dark"] .profile-sidebar-avatar {
  border-color: rgba(93,226,194,.25) !important;

  box-shadow:
    0 0 0 2px rgba(93,226,194,.018),
    0 0 13px rgba(143,124,255,.045) !important;
}

/* botão circular do perfil = aqua/violeta */
html[data-app-theme="dark"] .app-view .profile-chip::after {
  border-color: rgba(93,226,194,.28) !important;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.25 2.5L7.75 6L4.25 9.5' stroke='%235DE2C2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center center / 12px 12px no-repeat,
    linear-gradient(
      145deg,
      rgba(93,226,194,.065),
      rgba(143,124,255,.045)
    ),
    var(--app-control) !important;

  box-shadow:
    inset 0 0 12px rgba(93,226,194,.025),
    0 0 12px rgba(143,124,255,.035) !important;
}

/* ---------------------------------------------------------------------
   STATUS / BADGES
   --------------------------------------------------------------------- */

/* sucesso/ativo continua verde */
html[data-app-theme="dark"] :is(
  .status-active,
  .active-badge,
  .sidebar-role-pill
) {
  color: var(--corban-lime) !important;
}

/* informações secundárias podem usar aqua */
html[data-app-theme="dark"] :is(
  .sidebar-company-name,
  .live-indicator,
  .tables-catalog-counter
) {
  color: var(--corban-aqua) !important;
}

/* ---------------------------------------------------------------------
   SCROLLBAR — sai do verde puro
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] * {
  scrollbar-color:
    rgba(93,226,194,.28)
    rgba(255,255,255,.012) !important;
}

html[data-app-theme="dark"] *::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      rgba(93,226,194,.34),
      rgba(143,124,255,.22)
    ) !important;

  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background-clip: padding-box !important;
}

/* =====================================================================
   CONFIGURAÇÕES > FASES
   ===================================================================== */

#settings-phases,
#settings-phases .phases-shell {
  width: 100%;
  max-width: none;
}

#section-settings:has(#settings-phases:not(.hidden)) {
  padding: 10px 12px 18px !important;
}

.phases-shell {
  display: grid;
  gap: 8px;
}

.phases-toolbar {
  min-height: 48px;
  padding: 6px 8px 6px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  border: 1px solid var(--app-border);
  border-radius: 13px;

  background: var(--app-surface);
}

.phases-counter {
  color: var(--app-muted);
  font-size: 8px;
  font-weight: 700;
}

.phases-primary-action {
  min-height: 34px;
  padding: 0 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  color: #071008;
  background:
    linear-gradient(
      105deg,
      var(--app-accent),
      color-mix(in srgb, var(--app-accent) 76%, white),
      var(--app-mint)
    );

  border: 1px solid color-mix(in srgb, var(--app-accent) 50%, transparent);
  border-radius: 10px;

  font-size: 8.3px;
  font-weight: 900;
}

.phases-panel {
  width: 100%;
  min-height: calc(100vh - 145px);

  padding: 11px 12px;

  border: 1px solid var(--app-border);
  border-radius: 13px;

  background: var(--app-surface);
}

.phases-list {
  display: grid;
  gap: 9px;
}

.phase-row {
  min-height: 64px;
  padding: 9px 10px;

  display: grid;
  grid-template-columns:
    34px
    22px
    minmax(0, 1fr)
    auto
    66px
    34px;

  align-items: center;
  gap: 10px;

  border: 1px solid var(--app-border);
  border-radius: 12px;

  background: var(--app-surface-2);

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

.phase-row:hover {
  border-color:
    color-mix(in srgb, var(--app-mint) 25%, var(--app-border));

  box-shadow:
    inset 0 0 22px color-mix(in srgb, var(--app-mint) 2%, transparent);
}

.phase-order {
  color: var(--app-muted-2);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
}

.phase-color {
  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: var(--phase-color);

  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--phase-color) 8%, transparent),
    0 0 12px color-mix(in srgb, var(--phase-color) 28%, transparent);
}

.phase-copy {
  min-width: 0;

  display: grid;
  gap: 4px;
}

.phase-copy strong {
  color: var(--app-text);

  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
}

.phase-copy small {
  color: var(--app-muted);

  font-size: 7.4px;
  line-height: 1.2;
}

.phase-final-badge,
.phase-flow-badge {
  padding: 4px 7px;

  border-radius: 999px;

  font-size: 5.8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .07em;
}

.phase-final-badge {
  color: #b9aaff;
  background: rgba(143,124,255,.07);
  border: 1px solid rgba(143,124,255,.20);
}

.phase-flow-badge {
  color: var(--app-mint);
  background: color-mix(in srgb, var(--app-mint) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-mint) 16%, transparent);
}

.phase-order-actions {
  display: grid;
  grid-template-columns: 30px 30px;
  gap: 4px;
}

.phase-order-actions button,
.phase-edit-button {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  color: var(--app-muted);
  background: var(--app-control);

  border: 1px solid var(--app-border);
  border-radius: 9px;
}

.phase-order-actions button svg,
.phase-edit-button svg {
  width: 14px;
  height: 14px;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phase-order-actions button:not(:disabled):hover,
.phase-edit-button:hover {
  color: var(--app-mint);

  border-color:
    color-mix(in srgb, var(--app-mint) 28%, var(--app-border));

  background:
    color-mix(in srgb, var(--app-mint) 5%, var(--app-control));
}

.phase-order-actions button:disabled {
  opacity: .25;
  cursor: default;
}

.phases-empty {
  min-height: 340px;

  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;

  text-align: center;
}

.phases-empty-mark {
  position: relative;

  width: 44px;
  height: 44px;
  margin-bottom: 5px;

  border: 1px solid color-mix(in srgb, var(--app-mint) 20%, var(--app-border));
  border-radius: 13px;
}

.phases-empty-mark span {
  position: absolute;
  inset: 13px;

  border: 1px solid var(--app-mint);
  transform: rotate(45deg);
}

.phases-empty strong {
  color: var(--app-text);
  font-size: 11px;
}

.phases-empty small {
  color: var(--app-muted);
  font-size: 8px;
}

.phases-empty button {
  min-height: 34px;
  margin-top: 5px;
  padding: 0 12px;

  color: #071008;
  background: linear-gradient(105deg, var(--app-accent), var(--app-mint));

  border: 0;
  border-radius: 9px;

  font-size: 8px;
  font-weight: 900;
}

/* =========================================================
   MODAL
   ========================================================= */

.phase-modal-backdrop {
  z-index: 1600;
}

.phase-modal-card {
  width: min(560px, calc(100vw - 32px));

  overflow: hidden;

  border: 1px solid var(--app-border);
  border-radius: 18px;

  background: var(--app-surface);

  box-shadow: 0 26px 90px rgba(0,0,0,.38);
}

.phase-modal-head {
  min-height: 84px;
  padding: 18px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

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

.phase-modal-head > div {
  display: grid;
  gap: 5px;
}

.phase-modal-head small {
  color: var(--app-accent);

  font-size: 7px;
  font-weight: 950;
  letter-spacing: .13em;
}

.phase-modal-head h3 {
  margin: 0;

  color: var(--app-text);

  font-size: 18px;
  line-height: 1.1;
}

.phase-form {
  padding: 18px 20px 20px;

  display: grid;
  gap: 17px;
}

.phase-field {
  display: grid;
  gap: 8px;
}

.phase-field > span {
  color: var(--app-muted);

  font-size: 8px;
  font-weight: 800;
}

.phase-field input {
  width: 100%;
  height: 44px;
  padding: 0 12px;

  color: var(--app-text);
  background: var(--app-control);

  border: 1px solid var(--app-border);
  border-radius: 10px;

  outline: none;

  font-size: 12px;
}

.phase-field input:focus {
  border-color:
    color-mix(in srgb, var(--app-mint) 42%, var(--app-border));

  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--app-mint) 5%, transparent);
}

.phase-color-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.phase-color-options button {
  position: relative;

  width: 34px;
  height: 34px;

  background: var(--app-control);

  border: 1px solid var(--app-border);
  border-radius: 10px;
}

.phase-color-options button::before {
  content: "";

  position: absolute;
  inset: 9px;

  background: var(--phase-swatch);
  border-radius: 50%;

  box-shadow:
    0 0 10px color-mix(in srgb, var(--phase-swatch) 24%, transparent);
}

.phase-color-options button.is-selected {
  border-color: var(--phase-swatch);

  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--phase-swatch) 8%, transparent),
    0 0 15px color-mix(in srgb, var(--phase-swatch) 10%, transparent);
}

.phase-final-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;

  border: 1px solid var(--app-border);
  border-radius: 10px;

  overflow: hidden;
}

.phase-final-choice button {
  min-height: 40px;

  color: var(--app-muted);
  background: var(--app-control);

  border: 0;
}

.phase-final-choice button + button {
  border-left: 1px solid var(--app-border);
}

.phase-final-choice button.is-active {
  color: var(--app-mint);

  background:
    color-mix(in srgb, var(--app-mint) 6%, var(--app-control));
}

.phase-modal-actions {
  padding-top: 4px;

  display: flex;
  align-items: center;
  gap: 9px;
}

.phase-modal-actions-spacer {
  flex: 1;
}

.phase-remove-button {
  min-height: 38px;
  padding: 0 11px;

  color: #fb7185;
  background: rgba(251,113,133,.035);

  border: 1px solid rgba(251,113,133,.20);
  border-radius: 9px;

  font-size: 8px;
  font-weight: 850;
}

.phase-remove-button.is-armed {
  color: #fff;
  background: rgba(220,38,38,.70);
  border-color: rgba(248,113,113,.70);
}

/* =========================================================
   DARK SPECTRUM
   ========================================================= */

html[data-app-theme="dark"] .phases-toolbar {
  border-color: rgba(93,226,194,.11);

  background:
    linear-gradient(
      90deg,
      rgba(93,226,194,.018),
      rgba(143,124,255,.018)
    ),
    rgba(11,17,14,.93);
}

html[data-app-theme="dark"] .phases-panel {
  border-color: rgba(143,124,255,.10);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(143,124,255,.026),
      transparent 30%
    ),
    rgba(11,17,14,.94);
}

html[data-app-theme="dark"] .phase-row {
  border-color: rgba(150,164,156,.13);

  background:
    linear-gradient(
      110deg,
      rgba(93,226,194,.016),
      rgba(143,124,255,.012)
    ),
    rgba(13,20,16,.90);
}

html[data-app-theme="dark"] .phase-modal-card {
  border-color: rgba(93,226,194,.16);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(143,124,255,.055),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(14,22,17,.98),
      rgba(8,13,11,.99)
    );
}

/* LIGHT */
html[data-app-theme="light"] .phases-toolbar,
html[data-app-theme="light"] .phases-panel,
html[data-app-theme="light"] .phase-row,
html[data-app-theme="light"] .phase-modal-card {
  background: #fff;
  border-color: #dfe5dc;
}

@media (max-width: 760px) {
  #section-settings:has(#settings-phases:not(.hidden)) {
    padding: 8px !important;
  }

  .phase-row {
    grid-template-columns:
      26px
      18px
      minmax(0, 1fr)
      auto;

    gap: 8px;
  }

  .phase-order-actions {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
  }

  .phase-edit-button {
    grid-column: 4;
    grid-row: 2;
  }

  .phase-final-badge,
  .phase-flow-badge {
    grid-column: 4;
    grid-row: 1;
  }
}

/* =====================================================================
   FASES — SELETOR DE COR COMPLETO (PAINT / EXCEL)
   ===================================================================== */

.phase-color-options,
.phase-final-choice,
.phase-final-badge,
.phase-flow-badge {
  display: none !important;
}

/* Sem coluna de FINAL/FLUXO */
.phase-row {
  grid-template-columns:
    34px
    22px
    minmax(0, 1fr)
    66px
    34px !important;
}

.phase-color-picker {
  width: 100%;

  display: grid;
  grid-template-columns: minmax(250px, 1.35fr) minmax(190px, .65fr);
  gap: 15px;

  padding: 12px;

  border: 1px solid var(--app-border);
  border-radius: 13px;

  background: var(--app-control);
}

.phase-color-area {
  --phase-picker-hue: #8f7cff;

  position: relative;

  min-height: 210px;
  overflow: hidden;

  cursor: crosshair;
  touch-action: none;

  border: 1px solid var(--app-border);
  border-radius: 10px;

  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent),
    var(--phase-picker-hue);

  box-shadow:
    inset 0 0 18px rgba(0,0,0,.12);
}

.phase-color-area:focus-visible {
  outline: none;

  border-color:
    color-mix(in srgb, var(--app-mint) 45%, var(--app-border));

  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--app-mint) 6%, transparent);
}

.phase-color-cursor {
  --phase-selected-color: #8f7cff;

  position: absolute;

  width: 16px;
  height: 16px;

  transform: translate(-50%, -50%);

  pointer-events: none;

  border: 2px solid #fff;
  border-radius: 50%;

  background: var(--phase-selected-color);

  box-shadow:
    0 0 0 1px rgba(0,0,0,.80),
    0 2px 8px rgba(0,0,0,.40);
}

.phase-color-controls {
  min-width: 0;

  display: grid;
  align-content: start;
  gap: 13px;
}

.phase-color-preview-line {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.phase-color-preview-wrap {
  display: grid;
  gap: 6px;
}

.phase-color-preview-wrap small,
.phase-hex-field > span,
.phase-hue-field > span,
.phase-rgb-fields label > span {
  color: var(--app-muted);

  font-size: 7px;
  font-weight: 800;
}

.phase-color-preview {
  --phase-selected-color: #8f7cff;

  width: 70px;
  height: 48px;

  display: block;

  background: var(--phase-selected-color);

  border: 1px solid var(--app-border);
  border-radius: 9px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 8px 20px color-mix(in srgb, var(--phase-selected-color) 13%, transparent);
}

.phase-hex-field,
.phase-hue-field,
.phase-rgb-fields label {
  display: grid;
  gap: 6px;
}

.phase-hex-field input,
.phase-rgb-fields input {
  width: 100%;
  height: 35px;

  padding: 0 9px;

  color: var(--app-text);
  background: var(--app-surface);

  border: 1px solid var(--app-border);
  border-radius: 8px;

  outline: none;

  font-size: 10px;
  font-weight: 700;
}

.phase-hex-field input {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  text-transform: uppercase;
}

.phase-hex-field input:focus,
.phase-rgb-fields input:focus {
  border-color:
    color-mix(in srgb, var(--app-mint) 38%, var(--app-border));

  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--app-mint) 5%, transparent);
}

.phase-hue-field input[type="range"] {
  width: 100%;
  height: 14px;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  border: 1px solid var(--app-border);
  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #ff0000 0%,
      #ffff00 16.66%,
      #00ff00 33.33%,
      #00ffff 50%,
      #0000ff 66.66%,
      #ff00ff 83.33%,
      #ff0000 100%
    );
}

.phase-hue-field input[type="range"]::-webkit-slider-thumb {
  width: 15px;
  height: 20px;

  appearance: none;
  -webkit-appearance: none;

  background: var(--app-text);

  border: 2px solid var(--app-surface);
  border-radius: 5px;

  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    0 2px 5px rgba(0,0,0,.35);
}

.phase-hue-field input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 18px;

  background: var(--app-text);

  border: 2px solid var(--app-surface);
  border-radius: 5px;
}

.phase-rgb-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* tira spinners padrão dos números para manter identidade */
.phase-rgb-fields input[type="number"]::-webkit-inner-spin-button,
.phase-rgb-fields input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.phase-rgb-fields input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* dark */
html[data-app-theme="dark"] .phase-color-picker {
  border-color: rgba(93,226,194,.13);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(143,124,255,.045),
      transparent 34%
    ),
    rgba(11,17,14,.82);
}

html[data-app-theme="dark"] .phase-color-area {
  border-color: rgba(150,164,156,.22);
}

html[data-app-theme="dark"] .phase-hex-field input,
html[data-app-theme="dark"] .phase-rgb-fields input {
  border-color: rgba(150,164,156,.16);
  background: rgba(9,14,11,.88);
}

/* light */
html[data-app-theme="light"] .phase-color-picker {
  background: #f8faf7;
  border-color: #dfe5dc;
}

html[data-app-theme="light"] .phase-hex-field input,
html[data-app-theme="light"] .phase-rgb-fields input {
  background: #fff;
  border-color: #dfe5dc;
}

@media (max-width: 680px) {
  .phase-color-picker {
    grid-template-columns: 1fr;
  }

  .phase-color-area {
    min-height: 190px;
  }
}

/* =====================================================================
   FASES — CORREÇÃO DO PRIMEIRO CADASTRO / TROCA DE ESTADO
   ===================================================================== */

/* .hidden sempre vence os displays específicos deste módulo */
#settings-phases #phases-list.hidden,
#settings-phases #phases-empty.hidden {
  display: none !important;
}

/* Se há lista, ela precisa voltar explicitamente para grid */
#settings-phases #phases-list:not(.hidden) {
  display: grid !important;
}

/* Estado vazio só aparece quando não possui .hidden */
#settings-phases #phases-empty:not(.hidden) {
  display: grid !important;
}

/*
  Evita qualquer transição/estado antigo segurar os dois ao mesmo tempo.
*/
#settings-phases #phases-list[aria-hidden="true"],
#settings-phases #phases-empty[aria-hidden="true"] {
  display: none !important;
}

#settings-phases #phases-list[aria-hidden="false"] {
  display: grid !important;
}

#settings-phases #phases-empty[aria-hidden="false"] {
  display: grid !important;
}

/* =====================================================================
   FASES — ARRASTAR/REORDENAR + EXCLUSÃO DIRETA
   ===================================================================== */

/* Nova coluna para a lixeira */
.phase-row {
  grid-template-columns:
    34px
    22px
    minmax(0, 1fr)
    66px
    34px
    34px !important;

  cursor: grab;
  user-select: none;
}

.phase-row:active {
  cursor: grabbing;
}

.phase-row.is-dragging {
  opacity: .44;

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 42%,
      var(--app-border)
    ) !important;

  box-shadow:
    0 0 0 2px
      color-mix(
        in srgb,
        var(--app-mint) 6%,
        transparent
      ),
    0 12px 30px rgba(0,0,0,.20) !important;

  transform: scale(.995);
}

.phase-row.is-drag-over {
  border-color:
    color-mix(
      in srgb,
      var(--app-violet, #8f7cff) 36%,
      var(--app-border)
    ) !important;
}

/*
  Os botões continuam normais e não participam do arraste.
*/
.phase-row button {
  cursor: pointer;
  user-select: none;
}

.phase-edit-button,
.phase-delete-button {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  background: var(--app-control);

  border: 1px solid var(--app-border);
  border-radius: 9px;

  transition:
    color .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.phase-edit-button {
  color: var(--app-muted);
}

.phase-delete-button {
  color: #a5848a;
}

.phase-edit-button svg,
.phase-delete-button svg {
  width: 14px;
  height: 14px;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phase-edit-button:hover {
  color: var(--app-mint);

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 28%,
      var(--app-border)
    );

  background:
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      var(--app-control)
    );
}

.phase-delete-button:hover {
  color: #fb7185;

  border-color: rgba(251,113,133,.34);

  background: rgba(251,113,133,.055);

  box-shadow:
    0 0 14px rgba(251,113,133,.055);
}

/* =========================================================
   CONFIRMAÇÃO DE EXCLUSÃO
   ========================================================= */

.phase-delete-backdrop {
  z-index: 1700;
}

.phase-delete-card {
  width: min(410px, calc(100vw - 32px));

  padding: 24px;

  display: grid;
  justify-items: center;
  gap: 10px;

  text-align: center;

  border: 1px solid var(--app-border);
  border-radius: 18px;

  background: var(--app-surface);

  box-shadow:
    0 28px 90px rgba(0,0,0,.42);
}

.phase-delete-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  margin-bottom: 3px;

  color: #fb7185;
  background: rgba(251,113,133,.055);

  border: 1px solid rgba(251,113,133,.20);
  border-radius: 14px;
}

.phase-delete-icon svg {
  width: 21px;
  height: 21px;

  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phase-delete-card > small {
  color: #fb7185;

  font-size: 7px;
  font-weight: 950;
  letter-spacing: .12em;
}

.phase-delete-card h3 {
  margin: 0;

  color: var(--app-text);

  font-size: 18px;
  line-height: 1.12;
}

.phase-delete-card p {
  max-width: 330px;
  margin: 0;

  color: var(--app-muted);

  font-size: 9px;
  line-height: 1.45;
}

.phase-delete-card p strong {
  display: block;

  margin-bottom: 4px;

  color: var(--app-text);

  font-size: 10px;
}

.phase-delete-actions {
  width: 100%;

  margin-top: 10px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.phase-delete-confirm {
  min-height: 40px;

  color: #fff;
  background:
    linear-gradient(
      135deg,
      #c73549,
      #ee5a70
    );

  border: 1px solid rgba(251,113,133,.52);
  border-radius: 10px;

  font-size: 9px;
  font-weight: 900;
}

.phase-delete-confirm:hover {
  box-shadow:
    0 0 18px rgba(251,113,133,.14);
}

.phase-delete-confirm:disabled {
  opacity: .55;
  cursor: wait;
}

html[data-app-theme="dark"] .phase-delete-card {
  border-color: rgba(251,113,133,.16);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(143,124,255,.045),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(15,21,18,.98),
      rgba(8,12,11,.99)
    );
}

/* Mobile */
@media (max-width: 760px) {
  .phase-row {
    grid-template-columns:
      26px
      18px
      minmax(0, 1fr)
      34px
      34px !important;
  }

  .phase-order-actions {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
  }

  .phase-edit-button {
    grid-column: 4;
    grid-row: 1;
  }

  .phase-delete-button {
    grid-column: 5;
    grid-row: 1;
  }
}

/* =====================================================================
   FASES — DROP EXATO ENTRE LINHAS
   ===================================================================== */

/*
  Durante o arraste, o espaço visual passa a ser controlado
  pela LISTA inteira. Isso evita o drop ficar dependente do
  card que está exatamente embaixo do mouse.
*/
#phases-list.is-dragging-list {
  position: relative;
}

/* Linha que está sendo arrastada continua visível, mas leve */
#phases-list .phase-row.is-dragging {
  opacity: .34 !important;

  border-style: dashed !important;

  cursor: grabbing !important;
}

/*
  Marca visualmente o ponto onde a fase será inserida.
  O indicador fica NO TOPO da fase que será empurrada para baixo.
*/
#phases-list .phase-row.is-drag-before {
  position: relative;
}

#phases-list .phase-row.is-drag-before::before {
  content: "";

  position: absolute;

  left: 14px;
  right: 14px;
  top: -6px;

  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--app-mint) 10%,
      var(--app-violet, #8f7cff) 88%,
      transparent
    );

  box-shadow:
    0 0 12px
      color-mix(
        in srgb,
        var(--app-mint) 25%,
        transparent
      );

  pointer-events: none;
}

/* Pequeno marcador à esquerda da linha de inserção */
#phases-list .phase-row.is-drag-before::after {
  content: "";

  position: absolute;

  left: 11px;
  top: -9px;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--app-mint);

  box-shadow:
    0 0 10px
      color-mix(
        in srgb,
        var(--app-mint) 36%,
        transparent
      );

  pointer-events: none;
}

/*
  Ao soltar depois da última fase, mostra uma linha no fim da lista.
*/
#phases-list.is-drop-at-end::after {
  content: "";

  display: block;

  height: 2px;
  margin:
    4px
    14px
    0;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--app-mint) 10%,
      var(--app-violet, #8f7cff) 88%,
      transparent
    );

  box-shadow:
    0 0 12px
      color-mix(
        in srgb,
        var(--app-mint) 24%,
        transparent
      );
}

/*
  A antiga classe de hover do primeiro DnD deixa de ter função,
  evitando dois indicadores competindo visualmente.
*/
#phases-list .phase-row.is-drag-over {
  border-color: var(--app-border) !important;
}

/* =====================================================================
   FASES — MATIZ COM POSIÇÃO EXATA
   Substitui o range nativo do navegador.
   ===================================================================== */

.phase-hue-track {
  position: relative;

  width: 100%;
  height: 15px;

  overflow: visible;

  cursor: ew-resize;
  touch-action: none;

  border: 1px solid var(--app-border);
  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #ff0000 0%,
      #ffff00 16.6667%,
      #00ff00 33.3333%,
      #00ffff 50%,
      #0000ff 66.6667%,
      #ff00ff 83.3333%,
      #ff0000 100%
    );

  box-shadow:
    inset 0 0 5px rgba(0,0,0,.20);
}

.phase-hue-track:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(--app-mint) 7%,
        transparent
      ),
    inset 0 0 5px rgba(0,0,0,.20);
}

/*
  O cursor usa left: 0% até left: 100%.
  Diferente do <input type="range">, ele realmente alcança
  os dois extremos matemáticos da barra.
*/
.phase-hue-cursor {
  position: absolute;

  top: 50%;
  left: 0%;

  width: 13px;
  height: 21px;

  transform: translate(-50%, -50%);

  pointer-events: none;

  background: #f6faf7;

  border: 2px solid rgba(7,16,8,.88);
  border-radius: 5px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.65),
    0 2px 7px rgba(0,0,0,.38);
}

/*
  Regras antigas do input range não participam mais.
*/
.phase-hue-field input[type="range"] {
  display: none !important;
}

html[data-app-theme="dark"] .phase-hue-track {
  border-color: rgba(150,164,156,.22);
}

html[data-app-theme="light"] .phase-hue-track {
  border-color: #cdd6ca;
}

/* O marcador pode ultrapassar metade da largura para fora nos extremos,
   mostrando visualmente 0% e 100% reais. */
.phase-hue-field {
  overflow: visible;
}

/* =====================================================================
   ESTEIRA — FASES USAM A COR CONFIGURADA EM CONFIGURAÇÕES > FASES
   ===================================================================== */

/*
  Texto da fase já selecionada no campo.
*/
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-label.is-phase-colored {
  color: var(--selected-phase-color) !important;

  font-weight: 650 !important;

  text-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--selected-phase-color) 16%,
      transparent
    ) !important;
}

/*
  Cada opção da lista aberta recebe a SUA própria cor.
  Isso vence o verde/aqua global do dropdown.
*/
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option {
  color: var(--phase-option-color) !important;

  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: initial !important;
  column-gap: 9px !important;
}

/* ponto da cor configurada */
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-phase-option-dot {
  width: 6px !important;
  height: 6px !important;

  display: block !important;

  background: var(--phase-option-color) !important;
  border-radius: 50% !important;

  box-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--phase-option-color) 42%,
      transparent
    ) !important;
}

/* Hover continua com a MESMA cor da fase */
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option:hover,
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option:focus-visible {
  color: var(--phase-option-color) !important;

  background:
    color-mix(
      in srgb,
      var(--phase-option-color) 8%,
      transparent
    ) !important;
}

/* Selecionada também usa exatamente a cor configurada */
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option.is-selected {
  color: var(--phase-option-color) !important;

  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--phase-option-color) 11%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--phase-option-color) 3%,
        transparent
      )
    ) !important;
}

/*
  O marcador que já existia no lado direito também acompanha
  a cor daquela fase em vez do verde global.
*/
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option.is-selected::after {
  background: var(--phase-option-color) !important;

  box-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--phase-option-color) 45%,
      transparent
    ) !important;
}

/* subtle border/focus do campo usando a fase selecionada */
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-trigger:has(
  .corban-employee-select-label.is-phase-colored
) {
  border-color:
    color-mix(
      in srgb,
      var(--app-border) 78%,
      var(--app-mint) 22%
    ) !important;
}

/* no tema claro não adiciona glow exagerado */
html[data-app-theme="light"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-label.is-phase-colored {
  text-shadow: none !important;
}

/* =====================================================================
   ESTEIRA — CONTRASTE DAS CORES DE FASE NO MODO ESCURO
   Mantém o matiz configurado, mas aumenta a luminosidade visual do texto.
   ===================================================================== */

/*
  O campo selecionado usa uma versão mais luminosa da cor configurada.
  Ex.: roxo escuro continua roxo, mas não desaparece no fundo.
*/
html[data-app-theme="dark"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-label.is-phase-colored {
  color:
    color-mix(
      in srgb,
      var(--selected-phase-color) 72%,
      #ffffff 28%
    ) !important;

  font-weight: 700 !important;

  text-shadow:
    0 0 7px
      color-mix(
        in srgb,
        var(--selected-phase-color) 36%,
        transparent
      ),
    0 0 16px
      color-mix(
        in srgb,
        var(--selected-phase-color) 18%,
        transparent
      ) !important;
}

/* Opções abertas também ficam luminosas, sem perder o matiz original */
html[data-app-theme="dark"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option {
  color:
    color-mix(
      in srgb,
      var(--phase-option-color) 72%,
      #ffffff 28%
    ) !important;

  font-weight: 600 !important;
}

html[data-app-theme="dark"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option:hover,
html[data-app-theme="dark"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option:focus-visible,
html[data-app-theme="dark"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option.is-selected {
  color:
    color-mix(
      in srgb,
      var(--phase-option-color) 70%,
      #ffffff 30%
    ) !important;

  text-shadow:
    0 0 8px
      color-mix(
        in srgb,
        var(--phase-option-color) 26%,
        transparent
      ) !important;
}

/*
  O ponto continua usando a cor EXATA configurada.
  Assim a identidade da cor não é alterada.
*/
html[data-app-theme="dark"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-phase-option-dot {
  background: var(--phase-option-color) !important;

  box-shadow:
    0 0 6px var(--phase-option-color),
    0 0 14px
      color-mix(
        in srgb,
        var(--phase-option-color) 45%,
        transparent
      ) !important;
}

/* =========================================================
   CAMPOS DO FORMULÁRIO — FUNDO UM POUCO MAIS CLARO
   ========================================================= */

/*
  O formulário continua escuro, mas os locais de interação
  deixam de ficar quase pretos.
*/
html[data-app-theme="dark"]
.proposal-form .proposal-field input,
html[data-app-theme="dark"]
.proposal-form .proposal-field select,
html[data-app-theme="dark"]
.proposal-form .proposal-field textarea,
html[data-app-theme="dark"]
.proposal-form .corban-employee-select-trigger,
html[data-app-theme="dark"]
.proposal-form .proposal-money-shell,
html[data-app-theme="dark"]
.proposal-form .proposal-percent-shell {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.012),
      transparent
    ),
    #111914 !important;

  border-color: rgba(132,153,140,.24) !important;
}

/* Dropdown aberto ligeiramente destacado do restante do drawer */
html[data-app-theme="dark"]
.proposal-form .corban-employee-select-menu {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(143,124,255,.035),
      transparent 30%
    ),
    #0f1712 !important;

  border-color: rgba(93,226,194,.22) !important;

  box-shadow:
    0 -18px 44px rgba(0,0,0,.38),
    0 0 0 1px rgba(93,226,194,.025) !important;
}

/* Campo de pesquisa do dropdown acompanha o novo nível de contraste */
html[data-app-theme="dark"]
.proposal-form .corban-employee-select-search {
  background: #141e18 !important;

  border-color: rgba(93,226,194,.32) !important;
}

/* Hover dos campos: perceptível sem virar neon */
html[data-app-theme="dark"]
.proposal-form .proposal-field input:hover,
html[data-app-theme="dark"]
.proposal-form .proposal-field textarea:hover,
html[data-app-theme="dark"]
.proposal-form .corban-employee-select-trigger:hover {
  background: #141e18 !important;

  border-color: rgba(93,226,194,.30) !important;
}

/* Foco mantém o acabamento futurista */
html[data-app-theme="dark"]
.proposal-form .proposal-field input:focus,
html[data-app-theme="dark"]
.proposal-form .proposal-field textarea:focus,
html[data-app-theme="dark"]
.proposal-form .corban-employee-select.is-open
  .corban-employee-select-trigger {
  background: #152019 !important;

  border-color: rgba(93,226,194,.46) !important;

  box-shadow:
    0 0 0 2px rgba(93,226,194,.045),
    0 0 18px rgba(93,226,194,.035) !important;
}

/* =====================================================================
   ESTEIRA — CONTRASTE DAS CORES DE FASE NO MODO CLARO
   Mantém a identidade da cor, mas escurece o TEXTO quando necessário.
   ===================================================================== */

/*
  No tema claro, cores como amarelo, verde-limão e ciano muito claro
  ficam ilegíveis sobre branco. O texto usa uma versão mais escura
  da mesma cor, sem alterar a cor realmente cadastrada.
*/
html[data-app-theme="light"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-label.is-phase-colored {
  color:
    color-mix(
      in srgb,
      var(--selected-phase-color) 62%,
      #111a14 38%
    ) !important;

  font-weight: 700 !important;

  text-shadow: none !important;
}

/* Lista aberta */
html[data-app-theme="light"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option {
  color:
    color-mix(
      in srgb,
      var(--phase-option-color) 62%,
      #111a14 38%
    ) !important;

  font-weight: 650 !important;
}

/* Hover/foco */
html[data-app-theme="light"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option:hover,
html[data-app-theme="light"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option:focus-visible {
  color:
    color-mix(
      in srgb,
      var(--phase-option-color) 56%,
      #09110c 44%
    ) !important;

  background:
    color-mix(
      in srgb,
      var(--phase-option-color) 7%,
      #ffffff
    ) !important;
}

/* Selecionada */
html[data-app-theme="light"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option.is-selected {
  color:
    color-mix(
      in srgb,
      var(--phase-option-color) 54%,
      #09110c 46%
    ) !important;

  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--phase-option-color) 10%,
        #ffffff
      ),
      color-mix(
        in srgb,
        var(--phase-option-color) 3%,
        #ffffff
      )
    ) !important;
}

/*
  O ponto permanece com a cor EXATA cadastrada.
  Assim amarelo continua visualmente amarelo,
  roxo continua roxo etc.
*/
html[data-app-theme="light"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-phase-option-dot {
  background: var(--phase-option-color) !important;

  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--phase-option-color) 38%,
        transparent
      ),
    0 0 7px
      color-mix(
        in srgb,
        var(--phase-option-color) 22%,
        transparent
      ) !important;
}

/* Marcador da opção selecionada também mantém a cor real */
html[data-app-theme="light"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option.is-selected::after {
  background: var(--phase-option-color) !important;

  box-shadow:
    0 0 7px
      color-mix(
        in srgb,
        var(--phase-option-color) 28%,
        transparent
      ) !important;
}

/* =========================================================
   CAMPOS — LEVE SEPARAÇÃO DO BRANCO DA PÁGINA
   ========================================================= */

/*
  Deixa os campos quase brancos, mas não exatamente iguais ao fundo.
  Isso melhora a leitura sem transformar o tema claro em cinza.
*/
html[data-app-theme="light"]
.proposal-form .proposal-field input,
html[data-app-theme="light"]
.proposal-form .proposal-field textarea,
html[data-app-theme="light"]
.proposal-form .corban-employee-select-trigger,
html[data-app-theme="light"]
.proposal-form .proposal-money-shell,
html[data-app-theme="light"]
.proposal-form .proposal-percent-shell {
  background: #fbfcfa !important;

  border-color: #cbd5c9 !important;
}

html[data-app-theme="light"]
.proposal-form .corban-employee-select-menu {
  background: #ffffff !important;

  border-color: #c7d2c6 !important;

  box-shadow:
    0 -14px 36px rgba(32,48,38,.10),
    0 8px 28px rgba(32,48,38,.08) !important;
}

html[data-app-theme="light"]
.proposal-form .corban-employee-select-search {
  background: #f7faf6 !important;

  border-color: #b9c8b8 !important;
}

/* Foco continua dentro da identidade do Corban */
html[data-app-theme="light"]
.proposal-form .proposal-field input:focus,
html[data-app-theme="light"]
.proposal-form .proposal-field textarea:focus,
html[data-app-theme="light"]
.proposal-form .corban-employee-select.is-open
  .corban-employee-select-trigger {
  background: #ffffff !important;

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 42%,
      #a8b8a7
    ) !important;

  box-shadow:
    0 0 0 2px
      color-mix(
        in srgb,
        var(--app-mint) 7%,
        transparent
      ) !important;
}

/* =====================================================================
   ESTEIRA — TEXTO DA FASE MAIS LIMPO NO DARK
   Remove o efeito de "caixa" / halo retangular atrás do nome.
   ===================================================================== */

html[data-app-theme="dark"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-label.is-phase-colored {
  /*
    Garante que nenhuma regra genérica transforme o texto
    em badge/etiqueta visual.
  */
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /*
    Mantém a versão mais clara da cor configurada.
  */
  color:
    color-mix(
      in srgb,
      var(--selected-phase-color) 74%,
      #ffffff 26%
    ) !important;

  font-weight: 700 !important;

  /*
    Remove o blur largo que dava aparência quadrada.
  */
  text-shadow: none !important;

  /*
    Glow mínimo acompanhando SOMENTE o desenho das letras.
  */
  filter:
    drop-shadow(
      0 0 2px
      color-mix(
        in srgb,
        var(--selected-phase-color) 30%,
        transparent
      )
    ) !important;
}

/* Ao abrir o dropdown, opções também ficam mais limpas */
html[data-app-theme="dark"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option {
  text-shadow: none !important;
}

html[data-app-theme="dark"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option:hover,
html[data-app-theme="dark"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option:focus-visible,
html[data-app-theme="dark"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-option.is-phase-option.is-selected {
  text-shadow: none !important;
}

/*
  O campo continua com cantos suaves,
  mas sem brilho em volta do texto.
*/
html[data-app-theme="dark"]
.proposal-form
[data-corban-select-for="proposal-phase"]
.corban-employee-select-trigger {
  overflow: hidden !important;
}

/* =====================================================================
   FASES — BOTÕES NO PADRÃO VISUAL DO PROSPECTA CORBAN
   Remove o azul herdado de .btn.primary / .btn.secondary.
   ===================================================================== */

/* SALVAR FASE / SALVAR ALTERAÇÃO */
#phase-modal #phase-save,
#phase-modal .phase-modal-actions .btn.primary {
  color: #071008 !important;

  background:
    linear-gradient(
      105deg,
      #7CFF6B 0%,
      #8CFF78 44%,
      #68e6c5 100%
    ) !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-accent) 48%,
      transparent
    ) !important;

  border-radius: 10px !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, .12) !important;

  font-weight: 900 !important;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease !important;
}

#phase-modal #phase-save:hover,
#phase-modal .phase-modal-actions .btn.primary:hover {
  filter: brightness(1.045) !important;

  transform: translateY(-1px) !important;

  box-shadow:
    0 9px 24px rgba(0, 0, 0, .16),
    0 0 18px rgba(104, 230, 197, .08) !important;
}

#phase-modal #phase-save:active,
#phase-modal .phase-modal-actions .btn.primary:active {
  transform: translateY(0) !important;
}

#phase-modal #phase-save:disabled,
#phase-modal .phase-modal-actions .btn.primary:disabled {
  opacity: .58 !important;
  cursor: wait !important;
  transform: none !important;
}

/* CANCELAR — neutro, sem azul */
#phase-modal #phase-cancel,
#phase-modal .phase-modal-actions .btn.secondary {
  color: var(--app-text) !important;

  background:
    color-mix(
      in srgb,
      var(--app-control) 92%,
      transparent
    ) !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 92%,
      var(--app-mint) 8%
    ) !important;

  border-radius: 10px !important;

  box-shadow: none !important;
}

#phase-modal #phase-cancel:hover,
#phase-modal .phase-modal-actions .btn.secondary:hover {
  color: var(--app-mint) !important;

  background:
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      var(--app-control)
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 24%,
      var(--app-border)
    ) !important;
}

/* Dark: glow futurista discreto, próprio do Corban */
html[data-app-theme="dark"] #phase-modal #phase-save,
html[data-app-theme="dark"]
#phase-modal .phase-modal-actions .btn.primary {
  box-shadow:
    0 7px 20px rgba(0, 0, 0, .20),
    0 0 15px rgba(124, 255, 107, .055),
    0 0 22px rgba(93, 226, 194, .045) !important;
}

/* Light: limpo, sem glow exagerado */
html[data-app-theme="light"] #phase-modal #phase-save,
html[data-app-theme="light"]
#phase-modal .phase-modal-actions .btn.primary {
  box-shadow:
    0 5px 14px rgba(35, 60, 42, .13) !important;
}

html[data-app-theme="light"] #phase-modal #phase-cancel,
html[data-app-theme="light"]
#phase-modal .phase-modal-actions .btn.secondary {
  background: #f6f8f5 !important;
  border-color: #d5ddd3 !important;
}

/* =====================================================================
   CONFIGURAÇÕES > BANCOS
   Fonte do campo BANCO ORIGEM da Esteira.
   ===================================================================== */

#settings-banks,
#settings-banks .banks-settings-shell {
  width: 100% !important;
  max-width: none !important;
}

#section-settings:has(#settings-banks:not(.hidden)) {
  padding: 10px 12px 18px !important;
}

.banks-settings-shell {
  display: grid;
  gap: 8px;
}

.banks-settings-toolbar {
  min-height: 48px;
  padding: 6px 8px 6px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  border: 1px solid var(--app-border);
  border-radius: 13px;

  background: var(--app-surface);
}

.banks-settings-counter {
  color: var(--app-muted);

  font-size: 8px;
  font-weight: 750;
}

.banks-settings-primary-action {
  min-height: 34px;
  padding: 0 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  color: #071008;

  background:
    linear-gradient(
      105deg,
      #7CFF6B 0%,
      #8CFF78 44%,
      #68e6c5 100%
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-accent) 48%,
      transparent
    );

  border-radius: 10px;

  font-size: 8.3px;
  font-weight: 900;
}

.banks-settings-panel {
  width: 100%;
  min-height: calc(100vh - 145px);

  padding: 11px 12px;

  border: 1px solid var(--app-border);
  border-radius: 13px;

  background: var(--app-surface);
}

.banks-settings-list {
  display: grid;
  gap: 9px;
}

/* .hidden precisa sempre vencer */
#settings-banks #banks-settings-list.hidden,
#settings-banks #banks-settings-empty.hidden {
  display: none !important;
}

#settings-banks #banks-settings-list:not(.hidden),
#settings-banks #banks-settings-list[aria-hidden="false"] {
  display: grid !important;
}

#settings-banks #banks-settings-empty:not(.hidden),
#settings-banks #banks-settings-empty[aria-hidden="false"] {
  display: grid !important;
}

#settings-banks
:is(#banks-settings-list, #banks-settings-empty)[aria-hidden="true"] {
  display: none !important;
}

/* =========================================================
   LINHA DO BANCO
   ========================================================= */

.bank-settings-row {
  min-height: 64px;
  padding: 9px 10px;

  display: grid;
  grid-template-columns:
    34px
    38px
    minmax(0, 1fr)
    66px
    34px
    34px;

  align-items: center;
  gap: 10px;

  cursor: grab;
  user-select: none;

  border: 1px solid var(--app-border);
  border-radius: 12px;

  background: var(--app-surface-2);

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease,
    opacity .15s ease;
}

.bank-settings-row:active {
  cursor: grabbing;
}

.bank-settings-row:hover {
  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 25%,
      var(--app-border)
    );

  box-shadow:
    inset 0 0 22px
      color-mix(
        in srgb,
        var(--app-mint) 2%,
        transparent
      );
}

.bank-settings-order {
  color: var(--app-muted-2);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
}

.bank-settings-symbol {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  color: var(--app-mint);

  background:
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      var(--app-control)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-mint) 22%,
      var(--app-border)
    );

  border-radius: 10px;
}

.bank-settings-symbol svg {
  width: 17px;
  height: 17px;

  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bank-settings-copy {
  min-width: 0;

  display: grid;
  gap: 4px;
}

.bank-settings-copy strong {
  color: var(--app-text);

  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
}

.bank-settings-copy small {
  color: var(--app-muted);

  font-size: 7.4px;
  line-height: 1.2;
}

.bank-settings-code {
  color: var(--app-mint);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size: 7px;
  font-weight: 900;
  letter-spacing: .05em;
}

/* =========================================================
   SETAS / EDITAR / LIXEIRA
   ========================================================= */

.bank-settings-order-actions {
  display: grid;
  grid-template-columns: 30px 30px;
  gap: 4px;
}

.bank-settings-order-actions button,
.bank-settings-edit-button,
.bank-settings-delete-button {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  background: var(--app-control);

  border: 1px solid var(--app-border);
  border-radius: 9px;

  transition:
    color .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.bank-settings-order-actions button,
.bank-settings-edit-button {
  color: var(--app-muted);
}

.bank-settings-delete-button {
  color: #a5848a;
}

.bank-settings-order-actions button svg,
.bank-settings-edit-button svg,
.bank-settings-delete-button svg {
  width: 14px;
  height: 14px;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bank-settings-order-actions button:not(:disabled):hover,
.bank-settings-edit-button:hover {
  color: var(--app-mint);

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 28%,
      var(--app-border)
    );

  background:
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      var(--app-control)
    );
}

.bank-settings-delete-button:hover {
  color: #fb7185;

  border-color: rgba(251, 113, 133, .34);
  background: rgba(251, 113, 133, .055);

  box-shadow:
    0 0 14px rgba(251, 113, 133, .055);
}

.bank-settings-order-actions button:disabled {
  opacity: .24;
  cursor: default;
}

/* =========================================================
   DRAG & DROP EXATO
   ========================================================= */

#banks-settings-list.is-dragging-list {
  position: relative;
}

.bank-settings-row.is-dragging {
  opacity: .34 !important;
  border-style: dashed !important;
  cursor: grabbing !important;
}

.bank-settings-row.is-drag-before {
  position: relative;
}

.bank-settings-row.is-drag-before::before {
  content: "";

  position: absolute;

  left: 14px;
  right: 14px;
  top: -6px;

  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--app-mint) 10%,
      #8f7cff 88%,
      transparent
    );

  box-shadow:
    0 0 12px
      color-mix(
        in srgb,
        var(--app-mint) 25%,
        transparent
      );

  pointer-events: none;
}

.bank-settings-row.is-drag-before::after {
  content: "";

  position: absolute;

  left: 11px;
  top: -9px;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--app-mint);

  box-shadow:
    0 0 10px
      color-mix(
        in srgb,
        var(--app-mint) 36%,
        transparent
      );

  pointer-events: none;
}

#banks-settings-list.is-drop-at-end::after {
  content: "";

  display: block;

  height: 2px;
  margin: 4px 14px 0;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--app-mint) 10%,
      #8f7cff 88%,
      transparent
    );
}

/* =========================================================
   EMPTY
   ========================================================= */

.banks-settings-empty {
  min-height: 340px;

  place-items: center;
  align-content: center;
  gap: 8px;

  text-align: center;
}

.banks-settings-empty-mark {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  margin-bottom: 4px;

  color: var(--app-mint);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-mint) 22%,
      var(--app-border)
    );

  border-radius: 13px;
}

.banks-settings-empty-mark svg {
  width: 20px;
  height: 20px;

  stroke: currentColor;
  stroke-width: 1.5;
}

.banks-settings-empty strong {
  color: var(--app-text);
  font-size: 11px;
}

.banks-settings-empty small {
  color: var(--app-muted);
  font-size: 8px;
}

.banks-settings-empty button {
  min-height: 34px;
  margin-top: 5px;
  padding: 0 12px;

  color: #071008;

  background:
    linear-gradient(
      105deg,
      #7CFF6B,
      #68e6c5
    );

  border: 0;
  border-radius: 9px;

  font-size: 8px;
  font-weight: 900;
}

/* =========================================================
   MODAL CADASTRO / EDIÇÃO
   ========================================================= */

.bank-settings-modal-backdrop {
  z-index: 1660;
}

.bank-settings-modal-card {
  width: min(590px, calc(100vw - 32px));

  overflow: hidden;

  border: 1px solid var(--app-border);
  border-radius: 18px;

  background: var(--app-surface);

  box-shadow:
    0 26px 90px rgba(0, 0, 0, .38);
}

.bank-settings-modal-head {
  min-height: 84px;
  padding: 18px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

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

.bank-settings-modal-head > div {
  display: grid;
  gap: 5px;
}

.bank-settings-modal-head small {
  color: var(--app-accent);

  font-size: 7px;
  font-weight: 950;
  letter-spacing: .13em;
}

.bank-settings-modal-head h3 {
  margin: 0;

  color: var(--app-text);

  font-size: 18px;
  line-height: 1.1;
}

.bank-settings-form {
  padding: 18px 20px 20px;

  display: grid;
  gap: 17px;
}

.bank-settings-form-grid {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 11px;
}

.bank-settings-field {
  display: grid;
  gap: 8px;
}

.bank-settings-field > span {
  color: var(--app-muted);

  font-size: 8px;
  font-weight: 800;
}

.bank-settings-field input {
  width: 100%;
  height: 44px;
  padding: 0 12px;

  color: var(--app-text);
  background: var(--app-control);

  border: 1px solid var(--app-border);
  border-radius: 10px;

  outline: none;

  font-size: 12px;
}

.bank-settings-code-field input {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-weight: 850;
  letter-spacing: .06em;
}

.bank-settings-field input:focus {
  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 42%,
      var(--app-border)
    );

  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(--app-mint) 5%,
        transparent
      );
}

.bank-settings-preview {
  padding: 12px;

  display: grid;
  gap: 9px;

  border: 1px solid var(--app-border);
  border-radius: 11px;

  background: var(--app-control);
}

.bank-settings-preview > small {
  color: var(--app-muted);

  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .08em;
}

.bank-settings-preview-value {
  min-height: 42px;

  display: flex;
  align-items: center;
  gap: 10px;
}

.bank-settings-preview-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  color: var(--app-mint);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-mint) 22%,
      var(--app-border)
    );

  border-radius: 9px;
}

.bank-settings-preview-icon svg {
  width: 16px;
  height: 16px;

  stroke: currentColor;
  stroke-width: 1.5;
}

.bank-settings-preview-value strong {
  color: var(--app-text);

  font-size: 12px;
  font-weight: 800;
}

.bank-settings-modal-actions {
  padding-top: 4px;

  display: flex;
  align-items: center;
  gap: 9px;
}

.bank-settings-modal-spacer {
  flex: 1;
}

.bank-settings-remove-button {
  min-height: 38px;
  padding: 0 11px;

  color: #fb7185;
  background: rgba(251, 113, 133, .035);

  border: 1px solid rgba(251, 113, 133, .20);
  border-radius: 9px;

  font-size: 8px;
  font-weight: 850;
}

/* Botão principal no padrão CORBAN, nunca azul */
#bank-settings-modal #bank-settings-save {
  color: #071008 !important;

  background:
    linear-gradient(
      105deg,
      #7CFF6B 0%,
      #8CFF78 44%,
      #68e6c5 100%
    ) !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-accent) 48%,
      transparent
    ) !important;

  border-radius: 10px !important;

  box-shadow:
    0 7px 20px rgba(0, 0, 0, .16),
    0 0 16px rgba(93, 226, 194, .05) !important;

  font-weight: 900 !important;
}

#bank-settings-modal #bank-settings-cancel {
  color: var(--app-text) !important;
  background: var(--app-control) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* =========================================================
   MODAL EXCLUSÃO
   ========================================================= */

.bank-settings-delete-backdrop {
  z-index: 1700;
}

.bank-settings-delete-card {
  width: min(410px, calc(100vw - 32px));

  padding: 24px;

  display: grid;
  justify-items: center;
  gap: 10px;

  text-align: center;

  border: 1px solid var(--app-border);
  border-radius: 18px;

  background: var(--app-surface);

  box-shadow:
    0 28px 90px rgba(0, 0, 0, .42);
}

.bank-settings-delete-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  color: #fb7185;
  background: rgba(251, 113, 133, .055);

  border: 1px solid rgba(251, 113, 133, .20);
  border-radius: 14px;
}

.bank-settings-delete-icon svg {
  width: 21px;
  height: 21px;

  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bank-settings-delete-card > small {
  color: #fb7185;

  font-size: 7px;
  font-weight: 950;
  letter-spacing: .12em;
}

.bank-settings-delete-card h3 {
  margin: 0;

  color: var(--app-text);

  font-size: 18px;
}

.bank-settings-delete-card p {
  max-width: 330px;
  margin: 0;

  color: var(--app-muted);

  font-size: 9px;
  line-height: 1.45;
}

.bank-settings-delete-card p strong {
  display: block;

  margin-bottom: 4px;

  color: var(--app-text);

  font-size: 10px;
}

.bank-settings-delete-actions {
  width: 100%;

  margin-top: 10px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.bank-settings-delete-confirm {
  min-height: 40px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #c73549,
      #ee5a70
    );

  border: 1px solid rgba(251, 113, 133, .52);
  border-radius: 10px;

  font-size: 9px;
  font-weight: 900;
}

/* =========================================================
   DARK / LIGHT
   ========================================================= */

html[data-app-theme="dark"] .banks-settings-toolbar {
  border-color: rgba(93, 226, 194, .12);

  background:
    linear-gradient(
      90deg,
      rgba(93, 226, 194, .018),
      rgba(143, 124, 255, .018)
    ),
    rgba(11, 17, 14, .93);
}

html[data-app-theme="dark"] .banks-settings-panel {
  border-color: rgba(93, 226, 194, .11);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(93, 226, 194, .025),
      transparent 30%
    ),
    rgba(11, 17, 14, .94);
}

html[data-app-theme="dark"] .bank-settings-row {
  border-color: rgba(150, 164, 156, .13);

  background:
    linear-gradient(
      110deg,
      rgba(93, 226, 194, .018),
      rgba(143, 124, 255, .010)
    ),
    rgba(13, 20, 16, .90);
}

html[data-app-theme="dark"] .bank-settings-modal-card {
  border-color: rgba(93, 226, 194, .16);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(93, 226, 194, .045),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(14, 22, 17, .98),
      rgba(8, 13, 11, .99)
    );
}

html[data-app-theme="light"]
:is(
  .banks-settings-toolbar,
  .banks-settings-panel,
  .bank-settings-row,
  .bank-settings-modal-card,
  .bank-settings-delete-card
) {
  background: #fff;
  border-color: #dfe5dc;
}

@media (max-width: 760px) {
  #section-settings:has(#settings-banks:not(.hidden)) {
    padding: 8px !important;
  }

  .bank-settings-row {
    grid-template-columns:
      26px
      34px
      minmax(0, 1fr)
      34px
      34px !important;
  }

  .bank-settings-order-actions {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
  }

  .bank-settings-edit-button {
    grid-column: 4;
    grid-row: 1;
  }

  .bank-settings-delete-button {
    grid-column: 5;
    grid-row: 1;
  }

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

/* =====================================================================
   CONFIGURAÇÕES > PRODUTOS
   ===================================================================== */
#settings-products,#settings-products .products-settings-shell{width:100%!important;max-width:none!important}
#section-settings:has(#settings-products:not(.hidden)){padding:10px 12px 18px!important}
.products-settings-shell{display:grid;gap:8px}
.products-settings-toolbar{min-height:48px;padding:6px 8px 6px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--app-border);border-radius:13px;background:var(--app-surface)}
.products-settings-counter{color:var(--app-muted);font-size:8px;font-weight:750}
.products-settings-primary-action,.products-settings-empty button{min-height:34px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#071008;background:linear-gradient(105deg,#7CFF6B 0%,#8CFF78 44%,#68e6c5 100%);border:1px solid color-mix(in srgb,var(--app-accent) 48%,transparent);border-radius:10px;font-size:8.3px;font-weight:900}
.products-settings-panel{width:100%;min-height:calc(100vh - 145px);padding:11px 12px;border:1px solid var(--app-border);border-radius:13px;background:var(--app-surface)}
.products-settings-list{display:grid;gap:9px}
#settings-products #products-settings-list.hidden,#settings-products #products-settings-empty.hidden{display:none!important}
#settings-products #products-settings-list:not(.hidden),#settings-products #products-settings-list[aria-hidden="false"]{display:grid!important}
#settings-products #products-settings-empty:not(.hidden),#settings-products #products-settings-empty[aria-hidden="false"]{display:grid!important}
#settings-products :is(#products-settings-list,#products-settings-empty)[aria-hidden="true"]{display:none!important}
.product-settings-row{min-height:64px;padding:9px 10px;display:grid;grid-template-columns:34px 38px minmax(0,1fr) auto 66px 34px 34px;align-items:center;gap:10px;cursor:grab;user-select:none;border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface-2);transition:border-color .15s ease,opacity .15s ease}
.product-settings-row:active{cursor:grabbing}.product-settings-row:hover{border-color:color-mix(in srgb,#8f7cff 24%,var(--app-border))}
.product-settings-order{color:var(--app-muted-2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px;font-weight:800;letter-spacing:.05em}
.product-settings-symbol{width:36px;height:36px;display:grid;place-items:center;color:#9c8cff;background:color-mix(in srgb,#8f7cff 5%,var(--app-control));border:1px solid color-mix(in srgb,#8f7cff 22%,var(--app-border));border-radius:10px}
.product-settings-symbol svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.product-settings-copy{min-width:0;display:grid;gap:4px}.product-settings-copy strong{color:var(--app-text);font-size:11px;font-weight:850;line-height:1.1}.product-settings-copy small{color:var(--app-muted);font-size:7.4px;line-height:1.2}
.product-settings-rule-badge{min-height:23px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;color:#fb7185;background:rgba(251,113,133,.055);border:1px solid rgba(251,113,133,.30);border-radius:999px;white-space:nowrap;font-size:6.7px;font-weight:850}.product-settings-rule-badge.is-normal{color:var(--app-mint);background:color-mix(in srgb,var(--app-mint) 5%,transparent);border-color:color-mix(in srgb,var(--app-mint) 18%,var(--app-border))}
.product-settings-order-actions{display:grid;grid-template-columns:30px 30px;gap:4px}.product-settings-order-actions button,.product-settings-edit-button,.product-settings-delete-button{width:30px;height:30px;display:grid;place-items:center;background:var(--app-control);border:1px solid var(--app-border);border-radius:9px}.product-settings-order-actions button,.product-settings-edit-button{color:var(--app-muted)}.product-settings-delete-button{color:#a5848a}.product-settings-order-actions button svg,.product-settings-edit-button svg,.product-settings-delete-button svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.product-settings-order-actions button:not(:disabled):hover,.product-settings-edit-button:hover{color:var(--app-mint);border-color:color-mix(in srgb,var(--app-mint) 28%,var(--app-border))}.product-settings-delete-button:hover{color:#fb7185;border-color:rgba(251,113,133,.34);background:rgba(251,113,133,.055)}.product-settings-order-actions button:disabled{opacity:.24;cursor:default}
#products-settings-list.is-dragging-list{position:relative}.product-settings-row.is-dragging{opacity:.34!important;border-style:dashed!important;cursor:grabbing!important}.product-settings-row.is-drag-before{position:relative}.product-settings-row.is-drag-before:before{content:"";position:absolute;left:14px;right:14px;top:-6px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,#8f7cff 12%,var(--app-mint) 88%,transparent);pointer-events:none}.product-settings-row.is-drag-before:after{content:"";position:absolute;left:11px;top:-9px;width:8px;height:8px;border-radius:50%;background:#8f7cff;pointer-events:none}#products-settings-list.is-drop-at-end:after{content:"";display:block;height:2px;margin:4px 14px 0;border-radius:999px;background:linear-gradient(90deg,transparent,#8f7cff 12%,var(--app-mint) 88%,transparent)}
.products-settings-empty{min-height:340px;place-items:center;align-content:center;gap:8px;text-align:center}.products-settings-empty-mark{width:48px;height:48px;display:grid;place-items:center;margin-bottom:4px;color:#9c8cff;border:1px solid color-mix(in srgb,#8f7cff 22%,var(--app-border));border-radius:13px}.products-settings-empty-mark svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5}.products-settings-empty strong{color:var(--app-text);font-size:11px}.products-settings-empty small{color:var(--app-muted);font-size:8px}
.product-settings-modal-backdrop{z-index:1660}.product-settings-modal-card{width:min(590px,calc(100vw - 32px));overflow:hidden;border:1px solid var(--app-border);border-radius:18px;background:var(--app-surface);box-shadow:0 26px 90px rgba(0,0,0,.38)}.product-settings-modal-head{min-height:84px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--app-border)}.product-settings-modal-head>div{display:grid;gap:5px}.product-settings-modal-head small{color:#9c8cff;font-size:7px;font-weight:950;letter-spacing:.13em}.product-settings-modal-head h3{margin:0;color:var(--app-text);font-size:18px}.product-settings-form{padding:18px 20px 20px;display:grid;gap:17px}.product-settings-field{display:grid;gap:8px}.product-settings-field>span{color:var(--app-muted);font-size:8px;font-weight:800}.product-settings-field input{width:100%;height:44px;padding:0 12px;color:var(--app-text);background:var(--app-control);border:1px solid var(--app-border);border-radius:10px;outline:none;font-size:12px}.product-settings-field input:focus{border-color:color-mix(in srgb,#8f7cff 38%,var(--app-border));box-shadow:0 0 0 3px color-mix(in srgb,#8f7cff 5%,transparent)}
.product-settings-origin-rule{position:relative;min-height:70px;padding:12px;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:11px;cursor:pointer;border:1px solid var(--app-border);border-radius:11px;background:var(--app-control)}.product-settings-origin-rule>input{position:absolute;opacity:0;pointer-events:none}.product-settings-origin-checkbox{width:25px;height:25px;display:grid;place-items:center;color:#071008;background:transparent;border:1px solid var(--app-border);border-radius:7px}.product-settings-origin-checkbox svg{width:15px;height:15px;opacity:0;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.product-settings-origin-rule>input:checked+.product-settings-origin-checkbox{background:linear-gradient(135deg,#b8ff63,#62e6c7);border-color:rgba(124,255,107,.58);box-shadow:0 0 13px rgba(93,226,194,.08)}.product-settings-origin-rule>input:checked+.product-settings-origin-checkbox svg{opacity:1}.product-settings-origin-copy{min-width:0;display:grid;gap:4px}.product-settings-origin-copy strong{color:var(--app-text);font-size:10px;font-weight:850}.product-settings-origin-copy small{color:var(--app-muted);font-size:8.4px;line-height:1.4}
.product-settings-modal-actions{padding-top:4px;display:flex;align-items:center;gap:9px}.product-settings-modal-spacer{flex:1}.product-settings-remove-button{min-height:38px;padding:0 11px;color:#fb7185;background:rgba(251,113,133,.035);border:1px solid rgba(251,113,133,.20);border-radius:9px;font-size:8px;font-weight:850}#product-settings-modal #product-settings-save{color:#071008!important;background:linear-gradient(105deg,#7CFF6B 0%,#8CFF78 44%,#68e6c5 100%)!important;border:1px solid color-mix(in srgb,var(--app-accent) 48%,transparent)!important;border-radius:10px!important;box-shadow:0 7px 20px rgba(0,0,0,.16),0 0 16px rgba(93,226,194,.05)!important;font-weight:900!important}#product-settings-modal #product-settings-cancel{color:var(--app-text)!important;background:var(--app-control)!important;border:1px solid var(--app-border)!important;border-radius:10px!important;box-shadow:none!important}
.product-settings-delete-backdrop{z-index:1700}.product-settings-delete-card{width:min(410px,calc(100vw - 32px));padding:24px;display:grid;justify-items:center;gap:10px;text-align:center;border:1px solid var(--app-border);border-radius:18px;background:var(--app-surface);box-shadow:0 28px 90px rgba(0,0,0,.42)}.product-settings-delete-icon{width:48px;height:48px;display:grid;place-items:center;color:#fb7185;background:rgba(251,113,133,.055);border:1px solid rgba(251,113,133,.20);border-radius:14px}.product-settings-delete-icon svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.product-settings-delete-card>small{color:#fb7185;font-size:7px;font-weight:950;letter-spacing:.12em}.product-settings-delete-card h3{margin:0;color:var(--app-text);font-size:18px}.product-settings-delete-card p{max-width:330px;margin:0;color:var(--app-muted);font-size:9px;line-height:1.45}.product-settings-delete-card p strong{display:block;margin-bottom:4px;color:var(--app-text);font-size:10px}.product-settings-delete-actions{width:100%;margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.product-settings-delete-confirm{min-height:40px;color:#fff;background:linear-gradient(135deg,#c73549,#ee5a70);border:1px solid rgba(251,113,133,.52);border-radius:10px;font-size:9px;font-weight:900}
#proposal-origin-bank-field.product-disables-origin{display:none!important}
html[data-app-theme="dark"] .products-settings-toolbar{border-color:rgba(143,124,255,.12);background:linear-gradient(90deg,rgba(143,124,255,.020),rgba(93,226,194,.014)),rgba(11,17,14,.93)}html[data-app-theme="dark"] .products-settings-panel{border-color:rgba(143,124,255,.10);background:radial-gradient(circle at 100% 0%,rgba(143,124,255,.025),transparent 30%),rgba(11,17,14,.94)}html[data-app-theme="dark"] .product-settings-row{border-color:rgba(150,164,156,.13);background:linear-gradient(110deg,rgba(143,124,255,.016),rgba(93,226,194,.009)),rgba(13,20,16,.90)}html[data-app-theme="dark"] .product-settings-modal-card{border-color:rgba(143,124,255,.17);background:radial-gradient(circle at 100% 0%,rgba(143,124,255,.050),transparent 34%),linear-gradient(145deg,rgba(14,22,17,.98),rgba(8,13,11,.99))}html[data-app-theme="light"] :is(.products-settings-toolbar,.products-settings-panel,.product-settings-row,.product-settings-modal-card,.product-settings-delete-card){background:#fff;border-color:#dfe5dc}
@media(max-width:760px){#section-settings:has(#settings-products:not(.hidden)){padding:8px!important}.product-settings-row{grid-template-columns:26px 34px minmax(0,1fr) 34px 34px!important}.product-settings-rule-badge{grid-column:3;grid-row:2;justify-self:start}.product-settings-order-actions{grid-column:3;grid-row:3;justify-self:start}.product-settings-edit-button{grid-column:4;grid-row:1}.product-settings-delete-button{grid-column:5;grid-row:1}}

/* =====================================================================
   CONFIGURAÇÕES > PRODUTOS
   OVERRIDE FINAL DOS SELOS COM / SEM BANCO ORIGEM
   ===================================================================== */

/* SEM BANCO ORIGEM = vermelho */
#settings-products
.product-settings-row
.product-settings-rule-badge:not(.is-normal) {
  color: #ff6f7f !important;
  background: rgba(255, 76, 96, .075) !important;
  border-color: rgba(255, 92, 110, .42) !important;

  box-shadow:
    0 0 10px rgba(255, 76, 96, .045) !important;
}

/* COM BANCO ORIGEM = mint/turquesa */
#settings-products
.product-settings-row
.product-settings-rule-badge.is-normal {
  color: var(--app-mint) !important;

  background:
    color-mix(
      in srgb,
      var(--app-mint) 7%,
      transparent
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 30%,
      var(--app-border)
    ) !important;

  box-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      transparent
    ) !important;
}

/* =====================================================================
   ESTEIRA — GRADE COMPACTA, ORDENÁVEL E REDIMENSIONÁVEL
   ===================================================================== */

.pipeline-table {
  /*
    A largura real é calculada pela soma das colunas.
    Nunca fica menor que a área disponível.
  */
  width: max(
    100%,
    var(--pipeline-table-total, 2071px)
  ) !important;

  min-width: 100% !important;

  table-layout: fixed !important;
}

/*
  As larguras passam a ser controladas pelo <colgroup> criado pelo JS.
  Isso substitui as larguras fixas antigas por nth-child.
*/
.pipeline-table th,
.pipeline-table td {
  width: auto !important;

  height: 41px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;

  font-size: 8.2px !important;
}

.pipeline-table th {
  position: sticky;

  height: 34px !important;

  padding-left: 8px !important;
  padding-right: 15px !important;

  font-size: 6.8px !important;

  user-select: none;
}

/* Algumas colunas continuam com alinhamento sem desperdiçar espaço */
.pipeline-table th:nth-child(6),
.pipeline-table td:nth-child(6) {
  text-align: center;
}

.pipeline-table th:nth-child(14),
.pipeline-table td:nth-child(14),
.pipeline-table th:nth-child(15),
.pipeline-table td:nth-child(15),
.pipeline-table th:nth-child(17),
.pipeline-table td:nth-child(17),
.pipeline-table th:nth-child(18),
.pipeline-table td:nth-child(18) {
  text-align: right;
}

.pipeline-table th:nth-child(19),
.pipeline-table td:nth-child(19) {
  text-align: center;
}

/* ID visualmente mais compacto */
.pipeline-lc {
  font-size: 7.4px !important;
}

/* Consultor também perde um pouco do espaço interno antigo */
.pipeline-consultant {
  gap: 5px !important;
}

/* =========================================================
   CABEÇALHO CLICÁVEL / ORDENAÇÃO
   ========================================================= */

.pipeline-table th.is-sortable {
  cursor: pointer;

  transition:
    color .14s ease,
    background .14s ease;
}

.pipeline-table th.is-sortable:hover {
  color: var(--app-text-strong);

  background:
    color-mix(
      in srgb,
      var(--app-surface) 94%,
      var(--app-mint) 2%
    );
}

.pipeline-sort-indicator {
  display: inline-block;

  width: 9px;
  margin-left: 4px;

  color: var(--app-muted-2);

  font-size: 8px;
  line-height: 1;

  opacity: .54;

  vertical-align: -1px;
}

.pipeline-sort-indicator::before {
  content: "↕";
}

.pipeline-table th.is-sort-asc,
.pipeline-table th.is-sort-desc {
  color: var(--app-text-strong);
}

.pipeline-table th.is-sort-asc .pipeline-sort-indicator,
.pipeline-table th.is-sort-desc .pipeline-sort-indicator {
  color: var(--app-mint);
  opacity: 1;
}

.pipeline-table th.is-sort-asc .pipeline-sort-indicator::before {
  content: "↑";
}

.pipeline-table th.is-sort-desc .pipeline-sort-indicator::before {
  content: "↓";
}

html[data-app-theme="dark"]
.pipeline-table th.is-sort-asc .pipeline-sort-indicator,
html[data-app-theme="dark"]
.pipeline-table th.is-sort-desc .pipeline-sort-indicator {
  text-shadow:
    0 0 8px
    color-mix(
      in srgb,
      var(--app-mint) 28%,
      transparent
    );
}

/* =========================================================
   REDIMENSIONAMENTO DAS COLUNAS
   ========================================================= */

.pipeline-table th {
  position: sticky;
}

.pipeline-column-resizer {
  position: absolute;

  top: 5px;
  right: -4px;
  bottom: 5px;

  z-index: 8;

  width: 9px;

  cursor: col-resize;

  touch-action: none;
}

.pipeline-column-resizer::after {
  content: "";

  position: absolute;

  top: 4px;
  bottom: 4px;
  left: 4px;

  width: 1px;

  background:
    color-mix(
      in srgb,
      var(--app-border) 72%,
      transparent
    );

  opacity: 0;

  transition:
    opacity .12s ease,
    background .12s ease,
    box-shadow .12s ease;
}

.pipeline-table th:hover
.pipeline-column-resizer::after,
.pipeline-column-resizer:hover::after {
  opacity: .78;
}

.pipeline-column-resizer:hover::after {
  background: var(--app-mint);

  box-shadow:
    0 0 7px
    color-mix(
      in srgb,
      var(--app-mint) 22%,
      transparent
    );
}

body.is-resizing-pipeline-column,
body.is-resizing-pipeline-column * {
  cursor: col-resize !important;
  user-select: none !important;
}

/*
  O último cabeçalho também pode ser ajustado,
  mas continua estreito por padrão.
*/
.pipeline-table th:last-child {
  padding-right: 8px !important;
}

/* Barra horizontal mais discreta para a nova grade compacta */
.pipeline-table-scroll::-webkit-scrollbar {
  height: 7px;
}

.pipeline-table-scroll::-webkit-scrollbar-thumb {
  min-width: 45px;
}

/* =====================================================================
   ESTEIRA — ALINHAMENTO EXATO ENTRE CABEÇALHO E CONTEÚDO
   ===================================================================== */

/*
  Regra-base:
  título e conteúdo começam exatamente no mesmo eixo horizontal.
*/
.pipeline-table th,
.pipeline-table td {
  box-sizing: border-box !important;

  padding-left: 8px !important;
  padding-right: 8px !important;

  vertical-align: middle !important;
}

/*
  A seta de ordenação deixa de ocupar espaço ao lado do texto.
  Assim CPF fica exatamente em cima do número do CPF, CLIENTE em cima
  do cliente etc.
*/
.pipeline-table th.is-sortable {
  position: sticky !important;

  padding-left: 8px !important;
  padding-right: 20px !important;
}

.pipeline-table th .pipeline-sort-indicator {
  position: absolute !important;

  top: 50%;
  right: 9px;

  width: 8px !important;
  margin: 0 !important;

  transform: translateY(-50%);

  text-align: center;
}

/*
  Colunas normais: título e valor alinhados pela esquerda.
*/
.pipeline-table th:nth-child(1),
.pipeline-table td:nth-child(1),
.pipeline-table th:nth-child(2),
.pipeline-table td:nth-child(2),
.pipeline-table th:nth-child(3),
.pipeline-table td:nth-child(3),
.pipeline-table th:nth-child(4),
.pipeline-table td:nth-child(4),
.pipeline-table th:nth-child(5),
.pipeline-table td:nth-child(5),
.pipeline-table th:nth-child(7),
.pipeline-table td:nth-child(7),
.pipeline-table th:nth-child(8),
.pipeline-table td:nth-child(8),
.pipeline-table th:nth-child(9),
.pipeline-table td:nth-child(9),
.pipeline-table th:nth-child(10),
.pipeline-table td:nth-child(10),
.pipeline-table th:nth-child(11),
.pipeline-table td:nth-child(11),
.pipeline-table th:nth-child(12),
.pipeline-table td:nth-child(12),
.pipeline-table th:nth-child(13),
.pipeline-table td:nth-child(13),
.pipeline-table th:nth-child(16),
.pipeline-table td:nth-child(16) {
  text-align: left !important;
}

/*
  DESBLOQUEADO e AÇÕES:
  cabeçalho e conteúdo compartilham exatamente o mesmo centro.
*/
.pipeline-table th:nth-child(6),
.pipeline-table td:nth-child(6),
.pipeline-table th:nth-child(19),
.pipeline-table td:nth-child(19) {
  text-align: center !important;
}

.pipeline-table td:nth-child(6) .pipeline-unlocked,
.pipeline-table td:nth-child(19) .pipeline-row-open {
  margin-left: auto !important;
  margin-right: auto !important;
}

/*
  Valores numéricos:
  título e valor usam a mesma borda direita.
*/
.pipeline-table th:nth-child(14),
.pipeline-table td:nth-child(14),
.pipeline-table th:nth-child(15),
.pipeline-table td:nth-child(15),
.pipeline-table th:nth-child(17),
.pipeline-table td:nth-child(17),
.pipeline-table th:nth-child(18),
.pipeline-table td:nth-child(18) {
  text-align: right !important;
}

/*
  Nos títulos alinhados à direita, a seta fica à esquerda do título
  para não alterar o eixo direito.
*/
.pipeline-table th:nth-child(14).is-sortable,
.pipeline-table th:nth-child(15).is-sortable,
.pipeline-table th:nth-child(17).is-sortable,
.pipeline-table th:nth-child(18).is-sortable {
  padding-left: 20px !important;
  padding-right: 8px !important;
}

.pipeline-table th:nth-child(14) .pipeline-sort-indicator,
.pipeline-table th:nth-child(15) .pipeline-sort-indicator,
.pipeline-table th:nth-child(17) .pipeline-sort-indicator,
.pipeline-table th:nth-child(18) .pipeline-sort-indicator {
  left: 9px;
  right: auto;
}

/*
  Os componentes internos também respeitam o início da própria célula,
  sem margem invisível extra.
*/
.pipeline-consultant,
.pipeline-phase {
  max-width: 100% !important;
  margin: 0 !important;

  vertical-align: middle;
}

.pipeline-consultant {
  justify-content: flex-start !important;
}

.pipeline-phase {
  justify-content: flex-start !important;
}

/*
  Evita que elementos inline criem alguns pixels de diferença visual.
*/
.pipeline-client,
.pipeline-lc,
.pipeline-followup,
.pipeline-promoter-cell,
.pipeline-money,
.pipeline-table-name,
.pipeline-commission {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*
  A alça de redimensionamento continua na borda real da coluna e não
  interfere no alinhamento visual do título.
*/
.pipeline-column-resizer {
  right: -4px !important;
}

/* =====================================================================
   ESTEIRA — CENTRALIZAÇÃO REAL DE TODAS AS COLUNAS
   Cada título e cada valor ficam no centro da largura daquela coluna.
   ===================================================================== */

/* Cabeçalhos e células: centro matemático da coluna */
.pipeline-table th,
.pipeline-table td {
  box-sizing: border-box !important;

  padding-left: 8px !important;
  padding-right: 8px !important;

  text-align: center !important;
  vertical-align: middle !important;
}

/*
  O indicador de ordenação fica absoluto e não participa do cálculo
  do centro do texto do cabeçalho.
*/
.pipeline-table th.is-sortable {
  position: sticky !important;

  padding-left: 18px !important;
  padding-right: 18px !important;

  text-align: center !important;
}

.pipeline-table th .pipeline-sort-indicator {
  position: absolute !important;

  top: 50% !important;
  right: 5px !important;
  left: auto !important;

  width: 8px !important;
  margin: 0 !important;

  transform: translateY(-50%) !important;

  text-align: center !important;
}

/*
  Remove as exceções anteriores de alinhamento à esquerda/direita.
  Isso vale inclusive para Cliente, CPF, Consultor, datas, valores etc.
*/
.pipeline-table th:nth-child(n),
.pipeline-table td:nth-child(n) {
  text-align: center !important;
}

/*
  Elementos internos também precisam se comportar como conteúdo centrado.
*/
.pipeline-consultant,
.pipeline-phase {
  width: 100% !important;
  max-width: 100% !important;

  margin-left: auto !important;
  margin-right: auto !important;

  justify-content: center !important;
  text-align: center !important;
}

/* Consultor: avatar + nome ficam centralizados como conjunto */
.pipeline-consultant {
  display: inline-flex !important;
  width: auto !important;
}

/* Fase: bolinha + texto ficam centralizados como conjunto */
.pipeline-phase {
  display: inline-flex !important;
  width: auto !important;
}

/* Demais conteúdos inline centralizados */
.pipeline-client,
.pipeline-lc,
.pipeline-followup,
.pipeline-promoter-cell,
.pipeline-money,
.pipeline-table-name,
.pipeline-commission {
  display: inline-block !important;

  margin-left: auto !important;
  margin-right: auto !important;

  text-align: center !important;
}

/* DESBLOQUEADO / botão de ação */
.pipeline-table td:nth-child(6) .pipeline-unlocked,
.pipeline-table td:nth-child(19) .pipeline-row-open {
  margin-left: auto !important;
  margin-right: auto !important;
}

/*
  Valores numéricos deixam de ser alinhados à direita:
  ficam centralizados como todo o restante.
*/
.pipeline-table th:nth-child(14),
.pipeline-table td:nth-child(14),
.pipeline-table th:nth-child(15),
.pipeline-table td:nth-child(15),
.pipeline-table th:nth-child(17),
.pipeline-table td:nth-child(17),
.pipeline-table th:nth-child(18),
.pipeline-table td:nth-child(18) {
  text-align: center !important;
}

/*
  Sobrescreve o tratamento especial anterior das setas
  dessas colunas numéricas.
*/
.pipeline-table th:nth-child(14).is-sortable,
.pipeline-table th:nth-child(15).is-sortable,
.pipeline-table th:nth-child(17).is-sortable,
.pipeline-table th:nth-child(18).is-sortable {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.pipeline-table th:nth-child(14) .pipeline-sort-indicator,
.pipeline-table th:nth-child(15) .pipeline-sort-indicator,
.pipeline-table th:nth-child(17) .pipeline-sort-indicator,
.pipeline-table th:nth-child(18) .pipeline-sort-indicator {
  left: auto !important;
  right: 5px !important;
}

/* Alça de redimensionamento continua na borda da coluna */
.pipeline-column-resizer {
  right: -4px !important;
}

/* =====================================================================
   ESTEIRA — CORREÇÃO ESTRUTURAL DAS LINHAS
   Uma proposta = uma única linha compacta.
   ===================================================================== */

/*
  IMPORTANTE:
  algumas classes como pipeline-lc, pipeline-client, pipeline-money,
  pipeline-table-name etc. ficam no próprio <td>.
  Elas jamais podem virar inline-block, pois isso quebra a estrutura
  da tabela em duas alturas.
*/
.pipeline-table td,
.pipeline-table td.pipeline-lc,
.pipeline-table td.pipeline-client,
.pipeline-table td.pipeline-followup,
.pipeline-table td.pipeline-promoter-cell,
.pipeline-table td.pipeline-money,
.pipeline-table td.pipeline-table-name,
.pipeline-table td.pipeline-commission {
  display: table-cell !important;
}

/* Cada proposta ocupa somente a altura necessária. */
.pipeline-table tbody tr.pipeline-row {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}

.pipeline-table tbody td {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 7px !important;
  padding-right: 7px !important;

  line-height: 1.1 !important;

  vertical-align: middle !important;
  text-align: center !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Cabeçalho também compacto, mas separado visualmente das propostas. */
.pipeline-table thead th {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  vertical-align: middle !important;
  text-align: center !important;
}

/*
  Mantém os conteúdos compostos centralizados dentro da célula,
  sem transformar a própria célula em flex/inline-block.
*/
.pipeline-table td .pipeline-consultant,
.pipeline-table td .pipeline-phase {
  display: inline-flex !important;

  width: auto !important;
  max-width: 100% !important;

  align-items: center !important;
  justify-content: center !important;

  margin: 0 auto !important;

  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* Avatar do consultor não aumenta a altura da linha. */
.pipeline-table .pipeline-consultant i {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex: 0 0 18px !important;
}

/* Bolinha da fase permanece dentro da mesma linha. */
.pipeline-table .pipeline-phase i {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
}

/* Símbolo de desbloqueado cabe confortavelmente na linha de 36px. */
.pipeline-table .pipeline-unlocked {
  min-width: 22px !important;
  width: 22px !important;
  height: 22px !important;

  margin: 0 auto !important;
}

/* Botão da última coluna também não força aumento de altura. */
.pipeline-table .pipeline-row-open {
  width: 26px !important;
  height: 26px !important;

  margin: 0 auto !important;
}

/*
  Centralização REAL:
  o texto/campo fica no centro da largura que o usuário escolheu
  para aquela coluna.
*/
.pipeline-table th:nth-child(n),
.pipeline-table td:nth-child(n) {
  text-align: center !important;
}

/*
  Remove qualquer display herdado que possa quebrar novamente
  células que recebem classes de formatação.
*/
.pipeline-table td.pipeline-lc,
.pipeline-table td.pipeline-client,
.pipeline-table td.pipeline-followup,
.pipeline-table td.pipeline-promoter-cell,
.pipeline-table td.pipeline-money,
.pipeline-table td.pipeline-table-name,
.pipeline-table td.pipeline-commission {
  margin: 0 !important;
}

/* Duas propostas consecutivas ficam bem próximas, apenas com a divisória. */
.pipeline-table tbody td {
  border-bottom-width: 1px !important;
}

.pipeline-table tbody tr:last-child td {
  border-bottom-color:
    color-mix(
      in srgb,
      var(--app-border) 48%,
      transparent
    ) !important;
}

/* =====================================================================
   ESTEIRA — FOTO REAL DO CONSULTOR
   Foto cadastrada = foto.
   Sem foto = inicial.
   Não altera a altura compacta da linha.
   ===================================================================== */

.pipeline-table .pipeline-consultant {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;

  width: auto !important;
  max-width: 100% !important;

  margin: 0 auto !important;

  white-space: nowrap !important;
  vertical-align: middle !important;
}

/*
  Mesmo espaço que a bolinha de inicial utilizava antes.
  A foto não aumenta a linha da Esteira.
*/
.pipeline-table .pipeline-consultant-avatar {
  position: relative !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex: 0 0 18px !important;

  overflow: hidden !important;

  display: grid !important;
  place-items: center !important;

  color: var(--app-accent) !important;

  background:
    color-mix(
      in srgb,
      var(--app-accent) 8%,
      var(--app-control)
    ) !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-accent) 28%,
      var(--app-border)
    ) !important;

  /*
    Mantém aparência de avatar circular na tabela,
    como a bolinha que já existia.
  */
  border-radius: 50% !important;
}

.pipeline-table
.pipeline-consultant-avatar
.employee-photo-fallback {
  position: relative !important;
  z-index: 1 !important;

  width: 100% !important;
  height: 100% !important;

  display: grid !important;
  place-items: center !important;

  font-size: 6.2px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  text-transform: uppercase !important;
}

.pipeline-table
.pipeline-consultant-avatar
.employee-photo-image {
  position: absolute !important;
  z-index: 2 !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: inherit !important;
}

/*
  A lógica já existente adiciona .has-photo somente quando
  /api/employees/photo/{id} realmente devolve uma imagem.
*/
.pipeline-table
.pipeline-consultant-avatar.has-photo
.employee-photo-image {
  opacity: 1 !important;
}

.pipeline-table
.pipeline-consultant-avatar.has-photo
.employee-photo-fallback {
  visibility: hidden !important;
}

.pipeline-table .pipeline-consultant-name {
  min-width: 0 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  line-height: 1 !important;
}

/*
  Neutraliza a regra antiga do <i> da bolinha do consultor.
  O <i> continua reservado apenas para outros elementos,
  como a bolinha visual da fase.
*/
.pipeline-table
.pipeline-consultant
> .pipeline-consultant-avatar {
  margin: 0 !important;
}

/* =====================================================================
   ESTEIRA — BOTÃO DE FILTROS NA FAIXA SUPERIOR
   ===================================================================== */

.pipeline-stage-toolbar {
  min-height: 31px;

  display: flex;
  align-items: center;

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

.pipeline-stage-toolbar
.pipeline-stage-rail {
  flex: 1;

  height: 30px !important;

  border-bottom: 0 !important;
}

.pipeline-advanced-filter-button {
  min-width: 78px;
  height: 24px;

  margin-right: 8px;
  padding: 0 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  color: var(--app-muted);

  background:
    color-mix(
      in srgb,
      var(--app-control) 96%,
      transparent
    );

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

  border-radius: 8px;

  font-size: 7px;
  font-weight: 850;

  transition:
    color .14s ease,
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease;
}

.pipeline-advanced-filter-button svg {
  width: 12px;
  height: 12px;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.pipeline-advanced-filter-button b {
  min-width: 18px;
  height: 18px;

  padding: 0 5px;

  display: inline-grid;
  place-items: center;

  color: #020703;

  background: var(--app-mint);

  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 999px;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .16),
    0 0 9px color-mix(in srgb, var(--app-mint) 22%, transparent);

  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.pipeline-advanced-filter-button:hover,
.pipeline-advanced-filter-button.is-active {
  color: var(--app-mint);

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 34%,
      var(--app-border)
    );

  background:
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      var(--app-control)
    );
}

html[data-app-theme="dark"]
.pipeline-advanced-filter-button.is-active {
  box-shadow:
    0 0 13px
    color-mix(
      in srgb,
      var(--app-mint) 7%,
      transparent
    );
}

/* =====================================================================
   ESTEIRA — DRAWER DE FILTROS
   ===================================================================== */

.pipeline-filter-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 84;

  display: flex;
  justify-content: flex-end;

  background: rgba(1, 5, 3, .44);

  backdrop-filter: blur(5px);
}

.pipeline-filter-drawer-backdrop.hidden {
  display: none !important;
}

.pipeline-filter-drawer {
  width: min(410px, 94vw);
  height: 100vh;

  display: grid;
  grid-template-rows:
    auto
    auto
    minmax(0, 1fr)
    auto;

  overflow: hidden;

  color: var(--app-text);

  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--app-violet) 4%,
        transparent
      ),
      transparent 34%
    ),
    var(--app-surface);

  border-left:
    1px solid
    color-mix(
      in srgb,
      var(--app-mint) 13%,
      var(--app-border)
    );

  box-shadow:
    -26px 0 75px
    rgba(0, 0, 0, .34);

  animation:
    pipeline-filter-drawer-in
    .18s ease-out both;
}

@keyframes pipeline-filter-drawer-in {
  from {
    opacity: .7;
    transform: translateX(22px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.pipeline-filter-drawer-head {
  min-height: 88px;

  padding: 17px 18px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;

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

.pipeline-filter-drawer-head > div {
  min-width: 0;

  display: grid;
  gap: 3px;
}

.pipeline-filter-drawer-head small {
  color: var(--app-accent);

  font-size: 6.5px;
  font-weight: 950;
  letter-spacing: .12em;
}

.pipeline-filter-drawer-head h3 {
  margin: 0;

  color: var(--app-text-strong);

  font-size: 18px;
  line-height: 1.1;
}

.pipeline-filter-drawer-head p {
  margin: 2px 0 0;

  color: var(--app-muted);

  font-size: 8px;
}

.pipeline-filter-drawer-close {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  color: var(--app-muted);

  background: var(--app-control);

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

  border-radius: 9px;

  font-size: 16px;
  line-height: 1;
}

.pipeline-filter-active-strip {
  min-height: 39px;

  padding: 0 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

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

.pipeline-filter-active-strip span {
  color: var(--app-muted);

  font-size: 7.5px;
  font-weight: 750;
}

.pipeline-filter-active-strip button {
  padding: 4px 0;

  color: var(--app-mint);

  background: transparent;
  border: 0;

  font-size: 7.3px;
  font-weight: 850;
}

.pipeline-filter-fields {
  min-height: 0;

  padding: 8px 10px 18px;

  overflow-y: auto;

  scrollbar-width: thin;
  scrollbar-color:
    color-mix(
      in srgb,
      var(--app-mint) 22%,
      transparent
    )
    transparent;
}

.pipeline-filter-field {
  overflow: hidden;

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 74%,
      transparent
    );
}

.pipeline-filter-field-button {
  width: 100%;
  min-height: 48px;

  padding: 7px 7px 7px 9px;

  display: flex;
  align-items: center;
  gap: 9px;

  text-align: left;

  color: var(--app-text);

  background: transparent;
  border: 0;
}

.pipeline-filter-field-button:hover {
  background:
    color-mix(
      in srgb,
      var(--app-mint) 2.5%,
      transparent
    );
}

.pipeline-filter-field-copy {
  min-width: 0;
  flex: 1;

  display: grid;
  gap: 3px;
}

.pipeline-filter-field-copy strong {
  color: var(--app-text);

  font-size: 9.5px;
  font-weight: 780;
}

.pipeline-filter-field-copy small {
  overflow: hidden;

  color: var(--app-muted);

  font-size: 7.4px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-filter-field.is-active
.pipeline-filter-field-copy small {
  color: var(--app-mint);
}

.pipeline-filter-active-dot {
  width: 6px;
  height: 6px;

  flex: 0 0 6px;

  background: var(--app-mint);

  border-radius: 50%;

  box-shadow:
    0 0 9px
    color-mix(
      in srgb,
      var(--app-mint) 34%,
      transparent
    );
}

.pipeline-filter-field-button > svg {
  width: 14px;
  height: 14px;

  flex: 0 0 14px;

  stroke: var(--app-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform .14s ease;
}

.pipeline-filter-field.is-open
.pipeline-filter-field-button > svg {
  transform: rotate(90deg);
}

.pipeline-filter-field-editor {
  padding:
    2px
    8px
    13px
    9px;
}

.pipeline-filter-field-editor-head {
  min-height: 25px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  margin-bottom: 7px;
}

.pipeline-filter-field-editor-head span {
  color: var(--app-muted);

  font-size: 6.5px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pipeline-filter-field-editor-head button {
  color: #fb7185;

  background: transparent;
  border: 0;

  font-size: 7px;
  font-weight: 800;
}

.pipeline-filter-option-search {
  height: 36px;

  margin-bottom: 7px;
  padding: 0 10px;

  display: flex;
  align-items: center;
  gap: 7px;

  background: var(--app-control);

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

  border-radius: 9px;
}

.pipeline-filter-option-search svg {
  width: 13px;
  height: 13px;

  flex: 0 0 13px;

  stroke: var(--app-muted);
  stroke-width: 1.7;
}

.pipeline-filter-option-search input {
  width: 100%;
  min-width: 0;

  color: var(--app-text);

  background: transparent;
  border: 0;
  outline: 0;

  font-size: 9px;
}

.pipeline-filter-option-list {
  max-height: 220px;

  overflow-y: auto;

  display: grid;
  gap: 3px;
}

.pipeline-filter-option {
  min-height: 34px;

  padding: 5px 7px;

  display: flex;
  align-items: center;
  gap: 8px;

  cursor: pointer;

  border-radius: 8px;
}

.pipeline-filter-option:hover {
  background:
    color-mix(
      in srgb,
      var(--app-mint) 3%,
      transparent
    );
}

.pipeline-filter-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pipeline-filter-checkmark {
  width: 17px;
  height: 17px;

  flex: 0 0 17px;

  display: grid;
  place-items: center;

  background: var(--app-control);

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

  border-radius: 5px;
}

.pipeline-filter-option
input:checked
+ .pipeline-filter-checkmark {
  color: #071008;

  background:
    linear-gradient(
      135deg,
      #b8ff63,
      #68e6c5
    );

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 54%,
      transparent
    );
}

.pipeline-filter-option
input:checked
+ .pipeline-filter-checkmark::before {
  content: "✓";

  font-size: 10px;
  font-weight: 950;
}

.pipeline-filter-option strong {
  min-width: 0;

  overflow: hidden;

  color: var(--app-text);

  font-size: 8.5px;
  font-weight: 700;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-filter-phase-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  background:
    var(
      --filter-phase-color,
      #94a3b8
    );

  border-radius: 50%;

  box-shadow:
    0 0 8px
    color-mix(
      in srgb,
      var(
        --filter-phase-color,
        #94a3b8
      ) 24%,
      transparent
    );
}

.pipeline-filter-no-values {
  padding: 12px 7px;

  color: var(--app-muted);

  font-size: 8px;
}

.pipeline-filter-date-shortcuts {
  display: flex;
  justify-content: flex-end;

  margin-bottom: 6px;
}

.pipeline-filter-date-shortcuts button {
  min-height: 28px;
  padding: 0 10px;

  color: var(--app-mint);

  background:
    color-mix(
      in srgb,
      var(--app-mint) 4%,
      var(--app-control)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-mint) 20%,
      var(--app-border)
    );

  border-radius: 8px;

  font-size: 7.4px;
  font-weight: 850;
}

.pipeline-filter-range-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;
}

.pipeline-filter-range-grid label {
  min-width: 0;

  display: grid;
  gap: 5px;
}

.pipeline-filter-range-grid span {
  color: var(--app-muted);

  font-size: 6.7px;
  font-weight: 800;
}

.pipeline-filter-range-grid input {
  width: 100%;
  height: 37px;

  padding: 0 9px;

  color: var(--app-text);

  background: var(--app-control);

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

  border-radius: 9px;

  outline: 0;

  font-size: 9px;
}

.pipeline-filter-range-grid input:focus {
  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 35%,
      var(--app-border)
    );

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      transparent
    );
}

.pipeline-filter-drawer-actions {
  min-height: 64px;

  padding: 10px 13px;

  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 9px;

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

  background:
    color-mix(
      in srgb,
      var(--app-surface) 96%,
      transparent
    );
}

.pipeline-filter-clear-button,
.pipeline-filter-apply-button {
  min-height: 40px;

  border-radius: 10px;

  font-size: 8.5px;
  font-weight: 900;
}

.pipeline-filter-clear-button {
  color: var(--app-text);

  background: var(--app-control);

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

.pipeline-filter-apply-button {
  color: #071008;

  background:
    linear-gradient(
      105deg,
      #7CFF6B 0%,
      #8CFF78 44%,
      #68e6c5 100%
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-mint) 36%,
      transparent
    );
}

html[data-app-theme="light"]
.pipeline-filter-drawer {
  background: #ffffff;

  border-left-color: #dce5dd;
}

html[data-app-theme="light"]
.pipeline-filter-drawer-actions {
  background: rgba(255, 255, 255, .96);
}

@media (max-width: 640px) {
  .pipeline-filter-drawer {
    width: min(94vw, 410px);
  }

  .pipeline-filter-range-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   ESTEIRA — ABAS TIPO NAVEGADOR
   ===================================================================== */

.pipeline-stage-toolbar {
  min-height: 38px !important;

  padding: 5px 7px 0 !important;

  align-items: flex-end !important;

  gap: 8px;

  overflow: hidden;
}

.pipeline-tabs-area {
  min-width: 0;
  flex: 1;

  display: flex;
  align-items: flex-end;
  gap: 5px;

  overflow: hidden;
}

.pipeline-tabs {
  min-width: 0;
  flex: 0 1 auto;

  display: flex;
  align-items: flex-end;
  gap: 4px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  scroll-behavior: smooth;
}

.pipeline-tabs::-webkit-scrollbar {
  display: none;
}

.pipeline-tab {
  position: relative;

  height: 31px;

  flex: 0 0 auto;

  display: flex;
  align-items: center;

  color: var(--app-muted);

  background:
    color-mix(
      in srgb,
      var(--app-control) 83%,
      transparent
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 86%,
      transparent
    );

  border-bottom-color:
    color-mix(
      in srgb,
      var(--app-border) 58%,
      transparent
    );

  border-radius: 9px 9px 0 0;

  transition:
    color .14s ease,
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}

.pipeline-tab:hover {
  color: var(--app-text);

  background:
    color-mix(
      in srgb,
      var(--app-mint) 2.5%,
      var(--app-control)
    );
}

.pipeline-tab.is-active {
  color: var(--app-text-strong);

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--app-mint) 5%,
        var(--app-surface-2)
      ),
      var(--app-surface-2)
    );

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 27%,
      var(--app-border)
    );

  border-bottom-color:
    var(--app-surface-2);

  box-shadow:
    inset 0 2px 0
    color-mix(
      in srgb,
      var(--app-mint) 60%,
      transparent
    );
}

html[data-app-theme="dark"]
.pipeline-tab.is-active {
  box-shadow:
    inset 0 2px 0
    color-mix(
      in srgb,
      var(--app-mint) 72%,
      transparent
    ),
    0 -5px 18px
    color-mix(
      in srgb,
      var(--app-mint) 4%,
      transparent
    );
}

.pipeline-tab-main {
  min-width: 92px;
  max-width: 185px;
  height: 29px;

  padding: 0 7px 0 9px;

  display: flex;
  align-items: center;
  gap: 6px;

  color: inherit;

  background: transparent;
  border: 0;

  text-align: left;
}

.pipeline-tab-main strong {
  min-width: 0;
  flex: 1;

  overflow: hidden;

  font-size: 7.6px;
  font-weight: 820;
  line-height: 1;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-tab-main b {
  min-width: 15px;
  height: 15px;

  padding: 0 4px;

  display: inline-grid;
  place-items: center;

  color: #061008;

  background: var(--app-mint);

  border-radius: 999px;

  font-size: 6.5px;
  font-weight: 950;
  line-height: 1;
}

.pipeline-tab-status-dot {
  width: 5px;
  height: 5px;

  flex: 0 0 5px;

  background: var(--app-muted-2);

  border-radius: 50%;

  opacity: .48;
}

.pipeline-tab-status-dot.has-view {
  background: var(--app-violet);
  opacity: 1;

  box-shadow:
    0 0 7px
    color-mix(
      in srgb,
      var(--app-violet) 34%,
      transparent
    );
}

.pipeline-tab.is-active
.pipeline-tab-status-dot.has-view {
  background: var(--app-mint);

  box-shadow:
    0 0 8px
    color-mix(
      in srgb,
      var(--app-mint) 42%,
      transparent
    );
}

.pipeline-tab-rename,
.pipeline-tab-close {
  width: 22px;
  height: 24px;

  flex: 0 0 22px;

  display: grid;
  place-items: center;

  padding: 0;

  color: var(--app-muted-2);

  background: transparent;
  border: 0;

  opacity: .18;

  transition:
    opacity .12s ease,
    color .12s ease,
    background .12s ease;
}

.pipeline-tab:hover
:is(
  .pipeline-tab-rename,
  .pipeline-tab-close
),
.pipeline-tab.is-active
:is(
  .pipeline-tab-rename,
  .pipeline-tab-close
) {
  opacity: .72;
}

.pipeline-tab-rename:hover {
  color: var(--app-mint);

  background:
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      transparent
    );

  border-radius: 6px;
}

.pipeline-tab-rename svg {
  width: 11px;
  height: 11px;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pipeline-tab-close {
  margin-right: 3px;

  font-size: 13px;
  line-height: 1;
}

.pipeline-tab-close:hover:not(:disabled) {
  color: #fb7185;

  background: rgba(251, 113, 133, .07);

  border-radius: 6px;
}

.pipeline-tab-close:disabled {
  display: none;
}

.pipeline-tab.is-editing {
  min-width: 150px;

  padding: 0 5px;
}

.pipeline-tab-name-input {
  width: 140px;
  height: 23px;

  padding: 0 7px;

  color: var(--app-text);

  background: var(--app-control);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-mint) 38%,
      var(--app-border)
    );

  border-radius: 6px;

  outline: 0;

  font-size: 7.8px;
  font-weight: 800;
}

.pipeline-tab-name-input:focus {
  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(--app-mint) 7%,
      transparent
    );
}

.pipeline-tab-add {
  width: 28px;
  height: 27px;

  flex: 0 0 28px;

  margin-bottom: 1px;

  display: grid;
  place-items: center;

  color: var(--app-muted);

  background:
    color-mix(
      in srgb,
      var(--app-control) 85%,
      transparent
    );

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

  border-radius: 8px 8px 3px 3px;

  font-size: 15px;
  font-weight: 500;
  line-height: 1;

  transition:
    color .12s ease,
    border-color .12s ease,
    background .12s ease,
    box-shadow .12s ease;
}

.pipeline-tab-add:hover {
  color: var(--app-mint);

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 30%,
      var(--app-border)
    );

  background:
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      var(--app-control)
    );

  box-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      transparent
    );
}

/* Filtros continua fixo do lado direito da faixa */
.pipeline-stage-toolbar
.pipeline-advanced-filter-button {
  flex: 0 0 auto;

  margin: 0 0 3px 0 !important;
}

/*
  A borda inferior do toolbar vira a "linha" em que as abas encaixam,
  como navegador.
*/
.pipeline-stage-toolbar {
  border-bottom:
    1px solid
    var(--app-border) !important;
}

/* Remove qualquer influência visual da rail antiga, caso exista cache parcial. */
.pipeline-stage-toolbar
.pipeline-stage-rail {
  display: none !important;
}

@media (max-width: 760px) {
  .pipeline-tab-main {
    min-width: 80px;
    max-width: 130px;
  }

  .pipeline-tab-rename {
    display: none;
  }

  .pipeline-stage-toolbar
  .pipeline-advanced-filter-button
  > span {
    display: none;
  }

  .pipeline-stage-toolbar
  .pipeline-advanced-filter-button {
    min-width: 34px;
    width: 34px;
    padding: 0 5px;
  }
}

/* =====================================================================
   ESTEIRA — LEGIBILIDADE PENSADA PARA ZOOM 100%
   Aumenta levemente as informações sem perder a grade compacta.
   ===================================================================== */

/* Informações das propostas */
.pipeline-table tbody td {
  font-size: 9.5px !important;
  line-height: 1.15 !important;

  height: 39px !important;
  min-height: 39px !important;
  max-height: 39px !important;
}

.pipeline-table tbody tr.pipeline-row {
  height: 39px !important;
  min-height: 39px !important;
  max-height: 39px !important;
}

/* Cabeçalhos das colunas */
.pipeline-table thead th {
  font-size: 7.8px !important;

  height: 33px !important;
  min-height: 33px !important;
  max-height: 33px !important;

  font-weight: 800 !important;
  letter-spacing: .01em !important;
}

/* ID estava propositalmente menor; sobe junto para continuar legível */
.pipeline-table td.pipeline-lc {
  font-size: 8.6px !important;
}

/* Nome do cliente / consultor / fase ganham um pouco mais de presença */
.pipeline-table td.pipeline-client {
  font-size: 9.6px !important;
}

.pipeline-table .pipeline-consultant-name,
.pipeline-table .pipeline-phase {
  font-size: 9.5px !important;
}

/* Tabela, acompanhamento e demais textos secundários */
.pipeline-table td.pipeline-followup,
.pipeline-table td.pipeline-table-name {
  font-size: 9.2px !important;
}

/* Valores importantes ficam um pouco mais nítidos */
.pipeline-table td.pipeline-money,
.pipeline-table td.pipeline-commission,
.pipeline-table td.pipeline-promoter-cell {
  font-size: 9.5px !important;
}

/* Indicador da ordenação acompanha o novo tamanho do cabeçalho */
.pipeline-table .pipeline-sort-indicator {
  font-size: 8.5px !important;
}

/* =====================================================================
   ESTEIRA — COR PERSONALIZÁVEL DAS ABAS
   ===================================================================== */

/*
  A cor agora é sempre explícita e salva na própria aba.
  Não depende mais de aba ativa, filtros ou qualquer cor automática.
*/
.pipeline-tab-status-dot,
.pipeline-tab-status-dot.has-view,
.pipeline-tab.is-active .pipeline-tab-status-dot,
.pipeline-tab.is-active .pipeline-tab-status-dot.has-view,
.pipeline-tab-edit-dot {
  background:
    var(
      --pipeline-tab-color,
      #5DE2C2
    ) !important;

  opacity: 1 !important;

  box-shadow:
    0 0 8px
    color-mix(
      in srgb,
      var(
        --pipeline-tab-color,
        #5DE2C2
      ) 42%,
      transparent
    ) !important;
}

.pipeline-tab-edit-dot {
  width: 6px;
  height: 6px;

  flex: 0 0 6px;

  margin-left: 5px;

  border-radius: 50%;
}

/* Edição da aba ganha espaço para nome + seletor de cor */
.pipeline-tab.is-editing {
  min-width: 176px !important;

  padding:
    0
    4px
    0
    3px !important;

  gap: 4px;
}

.pipeline-tab.is-editing
.pipeline-tab-name-input {
  width: 125px !important;
  min-width: 78px;
  flex: 1;
}

.pipeline-tab-color-edit {
  width: 25px;
  height: 25px;

  flex: 0 0 25px;

  display: grid;
  place-items: center;

  padding: 0;

  color: var(--app-muted);

  background:
    color-mix(
      in srgb,
      var(--app-control) 92%,
      transparent
    );

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

  border-radius: 7px;
}

.pipeline-tab-color-edit:hover {
  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 31%,
      var(--app-border)
    );

  background:
    color-mix(
      in srgb,
      var(--app-mint) 4%,
      var(--app-control)
    );
}

.pipeline-tab-color-edit > span {
  width: 11px;
  height: 11px;

  display: block;

  background:
    var(
      --pipeline-tab-color,
      #5DE2C2
    );

  border:
    1px solid
    rgba(255, 255, 255, .40);

  border-radius: 50%;

  box-shadow:
    0 0 9px
    color-mix(
      in srgb,
      var(
        --pipeline-tab-color,
        #5DE2C2
      ) 40%,
      transparent
    );
}

/* =====================================================================
   MODAL DE COR DA ABA
   Usa o mesmo picker visual das Fases.
   ===================================================================== */

.pipeline-tab-color-modal-backdrop {
  z-index: 1760;
}

.pipeline-tab-color-modal-card {
  width:
    min(
      560px,
      calc(100vw - 32px)
    );
}

.pipeline-tab-color-form {
  padding:
    18px
    20px
    20px;
}

.pipeline-tab-color-sample {
  padding: 11px 12px;

  display: grid;
  gap: 8px;

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

  border-radius: 10px;

  background: var(--app-control);
}

.pipeline-tab-color-sample > small {
  color: var(--app-muted);

  font-size: 6.4px;
  font-weight: 900;
  letter-spacing: .08em;
}

.pipeline-tab-color-sample-tab {
  width: fit-content;
  min-width: 115px;
  height: 30px;

  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: var(--app-text);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 88%,
      transparent
    );

  border-radius: 8px 8px 2px 2px;

  background: var(--app-surface-2);
}

.pipeline-tab-color-sample-tab i {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  background:
    var(
      --pipeline-tab-color,
      #5DE2C2
    );

  border-radius: 50%;

  box-shadow:
    0 0 9px
    color-mix(
      in srgb,
      var(
        --pipeline-tab-color,
        #5DE2C2
      ) 42%,
      transparent
    );
}

.pipeline-tab-color-sample-tab strong {
  font-size: 8.5px;
  font-weight: 820;
}

#pipeline-tab-color-modal
.pipeline-tab-color-save {
  color: #071008 !important;

  background:
    linear-gradient(
      105deg,
      #7CFF6B 0%,
      #8CFF78 44%,
      #68e6c5 100%
    ) !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-accent) 48%,
      transparent
    ) !important;

  box-shadow:
    0 7px 20px rgba(0, 0, 0, .16),
    0 0 16px rgba(93, 226, 194, .05) !important;

  font-weight: 900 !important;
}

html[data-app-theme="dark"]
.pipeline-tab-color-modal-card {
  border-color:
    color-mix(
      in srgb,
      var(--app-violet) 17%,
      var(--app-border)
    );

  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--app-violet) 5%,
        transparent
      ),
      transparent 34%
    ),
    var(--app-surface);
}

/* =====================================================================
   FILTROS > DATA VENDA / DATA CIP — COMPACTO
   De | Até | Hoje | Limpar
   ===================================================================== */

.pipeline-filter-date-compact-row {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-top: 1px;
}

.pipeline-filter-date-compact-field {
  width: 126px;
  min-width: 0;
  flex: 0 0 126px;
  display: grid;
  gap: 5px;
}

.pipeline-filter-date-compact-field > span {
  color: var(--app-muted);
  font-size: 6.7px;
  font-weight: 800;
}

.pipeline-filter-date-compact-field input {
  width: 126px;
  height: 35px;
  padding: 0 8px;
  color: var(--app-text);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  outline: 0;
  font-size: 8.5px;
}

.pipeline-filter-date-compact-field input:focus {
  border-color:
    color-mix(in srgb, var(--app-mint) 36%, var(--app-border));
  box-shadow:
    0 0 0 3px
    color-mix(in srgb, var(--app-mint) 5%, transparent);
}

.pipeline-filter-date-compact-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pipeline-filter-date-today-button,
.pipeline-filter-date-clear-button {
  height: 35px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 7.2px;
  font-weight: 850;
  white-space: nowrap;
}

.pipeline-filter-date-today-button {
  color: var(--app-mint);
  background:
    color-mix(in srgb, var(--app-mint) 4%, var(--app-control));
  border:
    1px solid
    color-mix(in srgb, var(--app-mint) 23%, var(--app-border));
}

.pipeline-filter-date-today-button:hover {
  background:
    color-mix(in srgb, var(--app-mint) 8%, var(--app-control));
  border-color:
    color-mix(in srgb, var(--app-mint) 38%, var(--app-border));
}

.pipeline-filter-date-clear-button {
  color: #fb7185;
  background: rgba(251, 113, 133, .035);
  border: 1px solid rgba(251, 113, 133, .18);
}

.pipeline-filter-date-clear-button:hover {
  background: rgba(251, 113, 133, .075);
  border-color: rgba(251, 113, 133, .34);
}

.pipeline-filter-date-shortcuts {
  display: none !important;
}

@media (max-width: 430px) {
  .pipeline-filter-date-compact-row {
    flex-wrap: wrap;
  }

  .pipeline-filter-date-compact-field {
    width: calc(50% - 4px);
    flex-basis: calc(50% - 4px);
  }

  .pipeline-filter-date-compact-field input {
    width: 100%;
  }

  .pipeline-filter-date-compact-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* =====================================================================
   FILTROS — REMOVE TÍTULO REPETIDO DENTRO DO CAMPO
   O nome já aparece no cabeçalho do accordion.
   ===================================================================== */

.pipeline-filter-field-editor-actions {
  min-height: 18px;

  margin: 0 0 4px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pipeline-filter-field-editor-actions button {
  padding: 2px 0;

  color: #fb7185;

  background: transparent;
  border: 0;

  font-size: 7px;
  font-weight: 820;
  line-height: 1;
}

/*
  O cabeçalho antigo não deve ocupar espaço caso permaneça
  em algum trecho antigo carregado pelo navegador.
*/
.pipeline-filter-field-editor-head {
  display: none !important;
}

/* Datas já possuem Hoje + Limpar na própria linha. */
.pipeline-filter-date-compact-row {
  margin-top: 0 !important;
}

/* =====================================================================
   FILTROS — "LIMPAR" NA MESMA LINHA DA PRIMEIRA OPÇÃO
   Remove o buraco vertical criado pelo botão.
   ===================================================================== */

.pipeline-filter-field-editor.has-inline-clear {
  position: relative;
}

/*
  Não reserva mais uma linha exclusiva para o botão.
*/
.pipeline-filter-field-editor-actions {
  position: absolute !important;

  top: 7px;
  right: 9px;

  z-index: 5;

  min-height: 0 !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  pointer-events: none;
}

.pipeline-filter-field-editor-actions button {
  pointer-events: auto;

  min-height: 24px;

  padding: 0 2px !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fb7185;

  background:
    color-mix(
      in srgb,
      var(--app-surface) 88%,
      transparent
    );

  border: 0;

  font-size: 7px;
  font-weight: 820;
  line-height: 1;

  white-space: nowrap;
}

/*
  Deixa um pequeno respiro à direita da primeira opção para o texto
  não disputar espaço com "Limpar".
*/
.pipeline-filter-field-editor.has-inline-clear
.pipeline-filter-option-list
.pipeline-filter-option:first-child {
  padding-right: 48px;
}

/*
  Quando existir campo de busca interno, o botão não fica em cima dele:
  ele desce para a primeira opção real.
*/
.pipeline-filter-field-editor.has-inline-clear
.pipeline-filter-option-search
+ .pipeline-filter-option-list
~ * {
  position: relative;
}

.pipeline-filter-field-editor.has-inline-clear:has(.pipeline-filter-option-search)
.pipeline-filter-field-editor-actions {
  top: 50px;
}

/*
  Filtros numéricos não possuem lista de opções.
  O Limpar fica alinhado à primeira linha dos inputs sem criar faixa acima.
*/
.pipeline-filter-field-editor.has-inline-clear:has(.pipeline-filter-range-grid)
.pipeline-filter-field-editor-actions {
  top: 18px;
}

/*
  O conteúdo começa imediatamente após a abertura do filtro.
*/
.pipeline-filter-field-editor.has-inline-clear {
  padding-top: 2px !important;
}

/*
  Datas continuam usando o layout próprio:
  De | Até | Hoje | Limpar
*/
.pipeline-filter-field-editor:not(.has-inline-clear)
.pipeline-filter-date-compact-row {
  margin-top: 0 !important;
}

/* =====================================================================
   PROSPECTA CORBAN — QUALITY / READABILITY SYSTEM V1
   Referência: conforto de leitura do Prospecta Ponto em zoom 100%.
   Mantém a identidade própria do Corban.
   ===================================================================== */

/* ---------------------------------------------------------------------
   01. CONTRASTE GLOBAL
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] {
  --app-text: #f2f7f3 !important;
  --app-text-strong: #ffffff !important;

  /*
    Os antigos muted eram escuros demais no fundo preto.
    Continuam secundários, mas agora são realmente legíveis.
  */
  --app-muted: #a4b0a7 !important;
  --app-muted-2: #7f8d83 !important;

  --app-border: rgba(124, 255, 107, .145) !important;
  --app-border-strong: rgba(124, 255, 107, .275) !important;

  --app-control: #121a15 !important;
  --app-control-hover: #18221b !important;
}

html[data-app-theme="light"] {
  --app-text: #19201b !important;
  --app-text-strong: #090e0b !important;
  --app-muted: #59655d !important;
  --app-muted-2: #77827a !important;

  --app-border: #d9e0d7 !important;
  --app-border-strong: #c4cec1 !important;
}

/* ---------------------------------------------------------------------
   02. RENDERIZAÇÃO E TIPOGRAFIA BASE
   --------------------------------------------------------------------- */

.app-view {
  font-size: 13px !important;

  text-rendering: optimizeLegibility;

  font-kerning: normal;
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "calt" 1;

  -webkit-text-size-adjust: 100%;
}

.app-view :is(
  button,
  input,
  select,
  textarea
) {
  font-family:
    Inter,
    "Segoe UI Variable",
    "Segoe UI",
    ui-sans-serif,
    system-ui,
    sans-serif !important;
}

.app-view :is(
  button,
  label,
  strong,
  small,
  span,
  input,
  select,
  textarea,
  th,
  td
) {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* ---------------------------------------------------------------------
   03. SIDEBAR
   --------------------------------------------------------------------- */

.side-brand-copy small {
  font-size: 8.2px !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
}

.side-brand-copy strong {
  font-size: 21px !important;
  font-weight: 850 !important;
}

.app-view .nav {
  min-height: 47px !important;
}

.nav-label {
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1.1 !important;
}

.nav-badge {
  font-size: 8px !important;
  font-weight: 850 !important;
}

.logout-label {
  font-size: 12.5px !important;
  font-weight: 760 !important;
}

/* Card do usuário */
.sidebar-user-identity > strong {
  font-size: 12.8px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
}

.sidebar-company-name {
  font-size: 9.3px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}

.sidebar-role-pill {
  padding: 3px 7px !important;

  font-size: 7.8px !important;
  font-weight: 950 !important;
}

.sidebar-job-title {
  font-size: 8.6px !important;
  font-weight: 650 !important;
}

/* ---------------------------------------------------------------------
   04. TÍTULOS / TOPO / PAINÉIS
   --------------------------------------------------------------------- */

.app-view .topbar h2,
.app-view .page-title,
.app-view .topbar-title {
  font-size: 22px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
}

.app-view .panel-head h3 {
  font-size: 17px !important;
  font-weight: 830 !important;
  line-height: 1.15 !important;
}

.app-view .panel-head p {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}

/* ---------------------------------------------------------------------
   05. BUSCAS / INPUTS / SELECTS / TEXTAREAS
   --------------------------------------------------------------------- */

.app-view input:not([type="checkbox"]):not([type="radio"]),
.app-view select,
.app-view textarea {
  font-size: 12.5px !important;
  font-weight: 520 !important;
  line-height: 1.25 !important;
}

.app-view input::placeholder,
.app-view textarea::placeholder {
  color:
    color-mix(
      in srgb,
      var(--app-muted) 82%,
      transparent
    ) !important;

  opacity: 1 !important;
}

.search-shell,
.employees-searchbar {
  min-height: 43px !important;
}

.app-view .search-shell .search,
.employees-search input {
  font-size: 12px !important;
}

.app-view :is(
  .field,
  .phase-field,
  .bank-settings-field,
  .product-settings-field,
  .table-catalog-field
) > span,
.table-catalog-field label {
  font-size: 9.5px !important;
  font-weight: 780 !important;
  line-height: 1.2 !important;
}

.app-view :is(
  .field,
  .phase-field,
  .bank-settings-field,
  .product-settings-field,
  .table-catalog-field
) small {
  font-size: 9px !important;
  line-height: 1.4 !important;
}

/* ---------------------------------------------------------------------
   06. BOTÕES
   --------------------------------------------------------------------- */

.app-view :is(
  .toolbar-button,
  .pipeline-add-button,
  .employee-new-button,
  .table-catalog-add-inline,
  .bank-settings-add-button,
  .products-settings-add-button
) {
  font-size: 10px !important;
  font-weight: 850 !important;
}

.app-view .btn {
  font-size: 10.5px !important;
  font-weight: 820 !important;
}

/* ---------------------------------------------------------------------
   07. TABELAS GERAIS
   --------------------------------------------------------------------- */

.app-view table:not(.pipeline-table) th {
  font-size: 8.7px !important;
  font-weight: 880 !important;
  letter-spacing: .07em !important;
}

.app-view table:not(.pipeline-table) td {
  font-size: 11px !important;
  font-weight: 540 !important;
  line-height: 1.3 !important;
}

.app-view .mono {
  font-size: 9.3px !important;
}

/* ---------------------------------------------------------------------
   08. ESTEIRA — PRINCIPAL ÁREA DE TRABALHO
   --------------------------------------------------------------------- */

/*
  A tabela continua compacta, mas agora foi calibrada para ser lida
  confortavelmente em 100% de zoom.
*/
.pipeline-table tbody tr.pipeline-row {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
}

.pipeline-table tbody td {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  font-size: 10.8px !important;
  font-weight: 560 !important;
  line-height: 1.15 !important;
}

.pipeline-table thead th {
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;

  color:
    color-mix(
      in srgb,
      var(--app-text) 72%,
      var(--app-muted)
    ) !important;

  font-size: 8.7px !important;
  font-weight: 900 !important;
  letter-spacing: .045em !important;
}

.pipeline-table td.pipeline-lc {
  font-size: 9.3px !important;
  font-weight: 620 !important;
}

.pipeline-table td.pipeline-client,
.pipeline-table .pipeline-consultant-name {
  font-size: 11px !important;
  font-weight: 700 !important;
}

.pipeline-table .pipeline-phase {
  font-size: 10.5px !important;
  font-weight: 720 !important;
}

.pipeline-table td.pipeline-followup,
.pipeline-table td.pipeline-table-name {
  font-size: 10.2px !important;
  font-weight: 530 !important;
}

.pipeline-table td.pipeline-money,
.pipeline-table td.pipeline-commission,
.pipeline-table td.pipeline-promoter-cell {
  font-size: 10.7px !important;
  font-weight: 720 !important;
}

.pipeline-table .pipeline-consultant-avatar {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex-basis: 20px !important;
}

.pipeline-table
.pipeline-consultant-avatar
.employee-photo-fallback {
  font-size: 7px !important;
}

.pipeline-table .pipeline-sort-indicator {
  font-size: 9px !important;
}

/* Busca da Esteira */
.pipeline-search-input,
#pipeline-search-input {
  font-size: 12px !important;
}

/* ---------------------------------------------------------------------
   09. ABAS DA ESTEIRA
   --------------------------------------------------------------------- */

.pipeline-tab {
  height: 34px !important;
}

.pipeline-tab-main {
  height: 32px !important;
}

.pipeline-tab-main strong {
  font-size: 9px !important;
  font-weight: 800 !important;
}

.pipeline-tab-main b {
  min-width: 17px !important;
  height: 17px !important;

  font-size: 7.3px !important;
}

.pipeline-tab-name-input {
  font-size: 9.5px !important;
  font-weight: 760 !important;
}

/* ---------------------------------------------------------------------
   10. FILTROS DA ESTEIRA
   --------------------------------------------------------------------- */

.pipeline-advanced-filter-button {
  min-height: 27px !important;

  font-size: 8.5px !important;
  font-weight: 850 !important;
}

.pipeline-filter-drawer {
  color: var(--app-text) !important;
}

.pipeline-filter-drawer-head small {
  font-size: 7.5px !important;
}

.pipeline-filter-drawer-head h3 {
  font-size: 20px !important;
  font-weight: 850 !important;
}

.pipeline-filter-drawer-head p {
  font-size: 9.5px !important;
}

.pipeline-filter-active-strip span {
  font-size: 9px !important;
}

.pipeline-filter-active-strip button {
  font-size: 8.5px !important;
}

.pipeline-filter-field-copy strong {
  font-size: 11px !important;
  font-weight: 760 !important;
}

.pipeline-filter-field-copy small {
  font-size: 8.7px !important;
  font-weight: 520 !important;
}

.pipeline-filter-option {
  min-height: 37px !important;
}

.pipeline-filter-option strong {
  font-size: 9.8px !important;
  font-weight: 650 !important;
}

.pipeline-filter-checkmark {
  width: 18px !important;
  height: 18px !important;
  flex-basis: 18px !important;
}

.pipeline-filter-option-search input {
  font-size: 10.5px !important;
}

.pipeline-filter-no-values {
  font-size: 9.5px !important;
}

.pipeline-filter-field-editor-actions button,
.pipeline-filter-date-clear-button,
.pipeline-filter-date-today-button {
  font-size: 8.4px !important;
}

.pipeline-filter-date-compact-field > span,
.pipeline-filter-range-grid span {
  font-size: 8px !important;
  font-weight: 760 !important;
}

.pipeline-filter-date-compact-field input,
.pipeline-filter-range-grid input {
  font-size: 10px !important;
}

/* ---------------------------------------------------------------------
   11. CONFIGURAÇÕES — HUB
   --------------------------------------------------------------------- */

.settings-module-copy strong {
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
}

.settings-module-copy small {
  color: var(--app-muted) !important;

  font-size: 10px !important;
  font-weight: 520 !important;
  line-height: 1.35 !important;
}

.settings-module-status {
  font-size: 7.4px !important;
  font-weight: 950 !important;
}

/* ---------------------------------------------------------------------
   12. FUNCIONÁRIOS
   --------------------------------------------------------------------- */

.employees-license-counter {
  font-size: 9px !important;
  font-weight: 800 !important;
}

.employee-new-button,
.employees-empty button {
  font-size: 9.5px !important;
}

.employee-row-main strong {
  font-size: 11.5px !important;
  font-weight: 780 !important;
}

.employee-row-cell strong {
  font-size: 10.4px !important;
  font-weight: 680 !important;
}

.employee-row-main small,
.employee-row-cell small {
  font-size: 8.4px !important;
  line-height: 1.3 !important;
}

.employee-row-status {
  font-size: 7.8px !important;
}

.employees-empty strong {
  font-size: 13px !important;
}

.employees-empty small {
  font-size: 9.5px !important;
}

/* ---------------------------------------------------------------------
   13. TABELAS / PROMOTORAS / CATÁLOGO
   --------------------------------------------------------------------- */

#settings-tables .table-catalog-item-name,
.table-catalog-item-name {
  font-size: 10.8px !important;
  font-weight: 720 !important;
}

#settings-tables .table-catalog-item-percent,
.table-catalog-item-percent {
  font-size: 10px !important;
  font-weight: 820 !important;
}

.table-catalog-modal-head small {
  font-size: 8px !important;
}

.table-catalog-modal-head h3 {
  font-size: 20px !important;
}

.table-catalog-field label {
  font-size: 9.5px !important;
}

.table-catalog-field > input,
.table-catalog-percent-shell input {
  font-size: 12px !important;
}

.table-catalog-field small {
  font-size: 9px !important;
}

/* ---------------------------------------------------------------------
   14. FASES
   --------------------------------------------------------------------- */

.phase-modal-head small {
  font-size: 8px !important;
}

.phase-modal-head h3 {
  font-size: 20px !important;
  font-weight: 850 !important;
}

.phase-field > span {
  font-size: 9.5px !important;
  font-weight: 780 !important;
}

.phase-field input {
  font-size: 12.5px !important;
}

/* Títulos de linhas/listas de fases, independentemente da versão */
:is(
  .phase-settings-copy strong,
  .phase-row-copy strong,
  .phase-list-copy strong
) {
  font-size: 11.3px !important;
  font-weight: 760 !important;
}

:is(
  .phase-settings-copy small,
  .phase-row-copy small,
  .phase-list-copy small
) {
  font-size: 8.7px !important;
}

/* ---------------------------------------------------------------------
   15. BANCOS
   --------------------------------------------------------------------- */

.bank-settings-copy strong {
  font-size: 11.5px !important;
  font-weight: 780 !important;
}

.bank-settings-copy small {
  font-size: 8.8px !important;
}

.bank-settings-code,
.bank-settings-order {
  font-size: 9px !important;
}

.bank-settings-modal-head small {
  font-size: 8px !important;
}

.bank-settings-modal-head h3 {
  font-size: 20px !important;
  font-weight: 850 !important;
}

.bank-settings-field > span {
  font-size: 9.5px !important;
}

.bank-settings-field input {
  font-size: 12.5px !important;
}

.bank-settings-preview > small {
  font-size: 8px !important;
}

.bank-settings-preview-value strong {
  font-size: 12px !important;
}

/* ---------------------------------------------------------------------
   16. PRODUTOS
   --------------------------------------------------------------------- */

.product-settings-copy strong {
  font-size: 11.8px !important;
  font-weight: 800 !important;
}

.product-settings-copy small {
  font-size: 8.8px !important;
  line-height: 1.3 !important;
}

.product-settings-rule-badge {
  min-height: 25px !important;

  font-size: 7.8px !important;
  font-weight: 900 !important;
}

.product-settings-order {
  font-size: 9px !important;
}

.product-settings-modal-head small {
  font-size: 8px !important;
}

.product-settings-modal-head h3 {
  font-size: 20px !important;
  font-weight: 850 !important;
}

.product-settings-field > span {
  font-size: 9.5px !important;
}

.product-settings-field input {
  font-size: 12.5px !important;
}

.product-settings-origin-copy strong {
  font-size: 11px !important;
}

.product-settings-origin-copy small {
  font-size: 9.2px !important;
  line-height: 1.45 !important;
}

.product-settings-remove-button {
  font-size: 9px !important;
}

/* ---------------------------------------------------------------------
   17. MODAIS — PADRÃO GLOBAL
   --------------------------------------------------------------------- */

.app-view :is(
  .modal-head h3,
  .employee-modal-head h3
) {
  font-size: 20px !important;
  font-weight: 850 !important;
}

.app-view :is(
  .modal-head small,
  .employee-modal-head small,
  .kicker
) {
  font-size: 8px !important;
  font-weight: 900 !important;
}

.app-view .modal-actions :is(
  button,
  .btn
),
.phase-modal-actions :is(
  button,
  .btn
),
.bank-settings-modal-actions :is(
  button,
  .btn
),
.product-settings-modal-actions :is(
  button,
  .btn
),
.table-catalog-modal-actions :is(
  button,
  .btn
) {
  font-size: 10.5px !important;
  font-weight: 840 !important;
}

/* ---------------------------------------------------------------------
   18. EMPTY STATES / AVISOS / BADGES
   --------------------------------------------------------------------- */

.app-view .empty h4 {
  font-size: 14px !important;
  font-weight: 820 !important;
}

.app-view .empty p {
  font-size: 10.5px !important;
}

.app-view .badge {
  font-size: 8px !important;
}

.app-view .warning {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}

/* ---------------------------------------------------------------------
   19. DARK MODE — PRESERVA FUTURISMO, MAS SEM SACRIFICAR LEITURA
   --------------------------------------------------------------------- */

html[data-app-theme="dark"] .app-view :is(
  .nav-label,
  td,
  input,
  select,
  textarea,
  .pipeline-filter-option strong
) {
  text-shadow:
    0 0 .01px currentColor;
}

html[data-app-theme="dark"] .app-view :is(
  small,
  .muted,
  [class*="description"],
  [class*="subtitle"]
) {
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------
   20. LIGHT MODE — CONTRASTE LIMPO
   --------------------------------------------------------------------- */

html[data-app-theme="light"] .app-view {
  color: #19201b !important;
}

html[data-app-theme="light"] .app-view :is(
  small,
  .muted
) {
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------
   21. RESPONSIVO
   Em telas menores podemos reduzir um pouco; em desktop 100% não.
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
  .pipeline-table tbody td {
    font-size: 10px !important;
  }

  .pipeline-table thead th {
    font-size: 8.2px !important;
  }

  .nav-label {
    font-size: 12px !important;
  }
}
/* =====================================================================
   ESTEIRA — MODO EDIÇÃO EM LOTE / INLINE
   Clique e segure numa linha para editar várias propostas direto na grid.
   ===================================================================== */

.pipeline-inline-edit-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-right: 10px;
  border-radius: 18px;
  border: 1px solid var(--app-border-strong);
  background: color-mix(in srgb, var(--app-surface, #0d1511) 84%, transparent);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}

.pipeline-inline-edit-actions.hidden {
  display: none !important;
}

.pipeline-inline-edit-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pipeline-inline-edit-copy strong {
  color: var(--app-text-strong);
  font-size: 10.4px;
  font-weight: 850;
  line-height: 1.1;
}

.pipeline-inline-edit-copy small {
  color: var(--app-muted);
  font-size: 8.8px;
  font-weight: 560;
  line-height: 1.25;
  max-width: 250px;
}

body.pipeline-inline-edit-mode .pipeline-row {
  cursor: default;
}

body.pipeline-inline-edit-mode .pipeline-row:hover {
  background: color-mix(in srgb, var(--brand-primary, #8BE36B) 5%, transparent);
}

.pipeline-row.is-inline-editing {
  background: color-mix(in srgb, var(--brand-primary, #8BE36B) 3.5%, transparent);
}

.pipeline-row.is-inline-editing td {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  vertical-align: middle;
}

.pipeline-row.has-inline-changes {
  box-shadow:
    inset 2px 0 0 rgba(93, 226, 194, .88),
    inset 0 0 0 1px rgba(93, 226, 194, .07);
}

.pipeline-inline-field-shell {
  width: 100%;
}

.pipeline-inline-input,
.pipeline-inline-select,
.pipeline-inline-readonly {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-control, #121a15) 94%, transparent);
  color: var(--app-text-strong);
  padding: 0 10px;
  font-size: 10.2px;
  font-weight: 620;
  line-height: 1.2;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.pipeline-inline-input:hover,
.pipeline-inline-select:hover,
.pipeline-inline-readonly:hover {
  border-color: var(--app-border-strong);
}

.pipeline-inline-input:focus,
.pipeline-inline-select:focus {
  border-color: rgba(93, 226, 194, .7);
  box-shadow: 0 0 0 3px rgba(93, 226, 194, .12);
  background: color-mix(in srgb, var(--app-control, #121a15) 96%, white 4%);
}

.pipeline-inline-input::placeholder {
  color: color-mix(in srgb, var(--app-muted) 86%, transparent);
  opacity: 1;
}

.pipeline-inline-readonly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-control, #121a15) 84%, transparent);
}

.pipeline-inline-readonly.is-money,
.pipeline-inline-readonly.is-percent {
  font-weight: 760;
}

.pipeline-inline-readonly.is-money {
  color: #67f5cd;
}

.pipeline-inline-readonly.is-percent {
  color: #dff6eb;
}

.pipeline-inline-muted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30px;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--app-border-strong) 84%, transparent);
  color: var(--app-muted);
  font-size: 9.4px;
  font-weight: 640;
  padding: 0 8px;
}

.pipeline-inline-row-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pipeline-inline-row-help i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(93, 226, 194, .9);
  box-shadow: 0 0 0 4px rgba(93, 226, 194, .12);
}

.pipeline-inline-hint {
  color: var(--app-muted);
  font-size: 8.6px;
  font-weight: 600;
}

.pipeline-row-open[disabled] {
  opacity: .42;
  cursor: not-allowed;
}

html[data-app-theme="light"] .pipeline-inline-edit-actions {
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .09);
}

html[data-app-theme="light"] .pipeline-inline-input,
html[data-app-theme="light"] .pipeline-inline-select,
html[data-app-theme="light"] .pipeline-inline-readonly {
  background: rgba(255, 255, 255, .95);
}

@media (max-width: 1180px) {
  .pipeline-inline-edit-copy small {
    display: none;
  }
}

/* =====================================================================
   ESTEIRA / MODO EDIÇÃO — DROPDOWNS 100% NO PADRÃO CORBAN
   Nunca exibe o menu nativo azul/cinza do Windows/Chrome.
   ===================================================================== */

.pipeline-row
select.pipeline-inline-select.corban-native-select {
  display: none !important;
}

.pipeline-row
.pipeline-inline-corban-select {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;

  overflow: visible !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-trigger,
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-search {
  width: 100% !important;

  height: 32px !important;
  min-height: 32px !important;

  padding:
    0
    27px
    0
    10px !important;

  color:
    var(--app-text-strong) !important;

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--app-mint) 2.5%,
        transparent
      ),
      transparent 68%
    ),
    var(--app-control) !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-mint) 15%,
      var(--app-border)
    ) !important;

  border-radius: 10px !important;

  outline: 0 !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .018) !important;

  font-family:
    Inter,
    "Segoe UI Variable",
    "Segoe UI",
    ui-sans-serif,
    system-ui,
    sans-serif !important;

  font-size: 10.2px !important;
  font-weight: 650 !important;
  line-height: 1 !important;

  text-align: left !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-trigger:hover {
  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 34%,
      var(--app-border)
    ) !important;

  background:
    color-mix(
      in srgb,
      var(--app-mint) 4%,
      var(--app-control)
    ) !important;
}

.pipeline-row
.pipeline-inline-corban-select.is-open
.corban-employee-select-trigger,
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-search:focus {
  border-color:
    rgba(93, 226, 194, .72) !important;

  box-shadow:
    0 0 0 3px
      rgba(93, 226, 194, .075),
    0 0 18px
      rgba(93, 226, 194, .045),
    inset 0 0 18px
      rgba(93, 226, 194, .018) !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-label {
  min-width: 0 !important;

  overflow: hidden !important;

  color: inherit !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-label.is-phase-colored {
  color:
    color-mix(
      in srgb,
      var(--selected-phase-color) 80%,
      #ffffff 20%
    ) !important;

  font-weight: 760 !important;

  text-shadow: none !important;

  filter:
    drop-shadow(
      0 0 2px
      color-mix(
        in srgb,
        var(--selected-phase-color) 28%,
        transparent
      )
    ) !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-chevron {
  position: absolute !important;

  top: 50% !important;
  right: 11px !important;

  width: 7px !important;
  height: 7px !important;

  margin-top: -5px !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-search {
  display: block !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-search.hidden {
  display: none !important;
}

.pipeline-row
.pipeline-inline-corban-select.is-open
> .corban-employee-select-trigger.hidden {
  display: none !important;
}

/* Lupa no campo enquanto pesquisa */
.pipeline-row
.pipeline-inline-corban-select.is-searchable.is-open::after {
  content: "";

  position: absolute;
  z-index: 8;

  top: 10px;
  right: 11px;

  width: 8px;
  height: 8px;

  pointer-events: none;

  border:
    1.4px solid
    var(--app-mint);

  border-radius: 50%;

  opacity: .82;
}

.pipeline-row
.pipeline-inline-corban-select.is-searchable.is-open::before {
  content: "";

  position: absolute;
  z-index: 9;

  top: 18px;
  right: 8px;

  width: 5px;
  height: 1.4px;

  pointer-events: none;

  background:
    var(--app-mint);

  border-radius: 999px;

  opacity: .82;

  transform: rotate(45deg);
}

/*
  O menu usa position:fixed via JS.
  Isso impede que seja cortado pelo overflow horizontal da Esteira.
*/
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-menu {
  padding: 6px !important;

  display: grid !important;
  gap: 3px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  color:
    var(--app-text) !important;

  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(93, 226, 194, .055),
      transparent 31%
    ),
    #09110d !important;

  border:
    1px solid
    rgba(93, 226, 194, .27) !important;

  border-radius: 11px !important;

  box-shadow:
    0 18px 48px
      rgba(0, 0, 0, .48),
    0 0 0 1px
      rgba(124, 255, 107, .025),
    0 0 24px
      rgba(93, 226, 194, .035) !important;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(93, 226, 194, .28)
    transparent;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-menu.hidden {
  display: none !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-option {
  width: 100% !important;
  min-height: 35px !important;

  padding:
    7px
    10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  color:
    #eaf2ec !important;

  background:
    transparent !important;

  border: 0 !important;
  border-radius: 8px !important;

  outline: 0 !important;

  font-family:
    Inter,
    "Segoe UI Variable",
    "Segoe UI",
    ui-sans-serif,
    system-ui,
    sans-serif !important;

  font-size: 10.5px !important;
  font-weight: 620 !important;
  line-height: 1.25 !important;

  text-align: left !important;

  cursor: pointer !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-option:hover,
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-option:focus-visible {
  color:
    #79f2d1 !important;

  background:
    rgba(93, 226, 194, .075) !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-option.is-selected {
  color:
    #7CFF6B !important;

  background:
    linear-gradient(
      90deg,
      rgba(124, 255, 107, .085),
      rgba(93, 226, 194, .025)
    ) !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-option.is-selected::after {
  content: "";

  width: 6px !important;
  height: 6px !important;

  flex:
    0
    0
    6px !important;

  margin-left: auto !important;

  background:
    #7CFF6B !important;

  border-radius: 50% !important;

  box-shadow:
    0 0 10px
    rgba(124, 255, 107, .45) !important;
}

/* Fase: mantém a identidade visual cadastrada */
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-option.is-phase-option {
  color:
    color-mix(
      in srgb,
      var(--phase-option-color) 79%,
      #ffffff 21%
    ) !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-phase-option-dot {
  width: 7px !important;
  height: 7px !important;

  flex:
    0
    0
    7px !important;

  background:
    var(--phase-option-color) !important;

  border-radius: 50% !important;

  box-shadow:
    0 0 8px
    color-mix(
      in srgb,
      var(--phase-option-color) 40%,
      transparent
    ) !important;
}

.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-empty {
  min-height: 46px;

  display: grid;
  place-items: center;

  color:
    var(--app-muted);

  font-size: 9.5px;
  font-weight: 600;
}

/* Tema claro */
html[data-app-theme="light"]
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-trigger,
html[data-app-theme="light"]
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-search {
  color:
    #162018 !important;

  background:
    #fbfdfb !important;

  border-color:
    #cbd8ca !important;
}

html[data-app-theme="light"]
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-menu {
  background:
    #ffffff !important;

  border-color:
    #b8cdbb !important;

  box-shadow:
    0 16px 42px
      rgba(23, 44, 30, .15) !important;
}

html[data-app-theme="light"]
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-option {
  color:
    #1a251d !important;
}

html[data-app-theme="light"]
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-option:hover,
html[data-app-theme="light"]
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-option:focus-visible {
  color:
    #0d7258 !important;

  background:
    #eef9f4 !important;
}

html[data-app-theme="light"]
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-option.is-selected {
  color:
    #3b7205 !important;

  background:
    #f1f9e9 !important;
}

html[data-app-theme="light"]
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-label.is-phase-colored,
html[data-app-theme="light"]
.pipeline-row
.pipeline-inline-corban-select
.corban-employee-select-option.is-phase-option {
  color:
    color-mix(
      in srgb,
      var(--selected-phase-color, var(--phase-option-color)) 58%,
      #111a14 42%
    ) !important;
}

/* =====================================================================
   ESTEIRA / MODO EDIÇÃO — DROPDOWN V2 NATIVO DO PROSPECTA CORBAN
   O select do navegador é invisível; somente este componente aparece.
   ===================================================================== */

.pipeline-inline-native-value,
.pipeline-row select.pipeline-inline-native-value,
.pipeline-row select.pipeline-inline-select {
  display: none !important;
  visibility: hidden !important;

  position: absolute !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;

  pointer-events: none !important;
}

.pipeline-inline-dropdown-v2 {
  position: relative;

  width: 100%;
  min-width: 0;
  height: 34px;

  display: block;
}

.pipeline-inline-dropdown-trigger-v2,
.pipeline-inline-dropdown-search-shell-v2 {
  width: 100%;
  height: 34px;
  min-height: 34px;

  color:
    var(--app-text-strong);

  background:
    linear-gradient(
      180deg,
      rgba(93, 226, 194, .025),
      transparent 68%
    ),
    #101914;

  border:
    1px solid
    rgba(124, 255, 107, .15);

  border-radius: 11px;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.018);

  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    background .14s ease;
}

.pipeline-inline-dropdown-trigger-v2 {
  position: relative;

  padding:
    0
    30px
    0
    11px;

  display: flex;
  align-items: center;

  text-align: left;

  cursor: pointer;
}

.pipeline-inline-dropdown-trigger-v2:hover,
.pipeline-inline-dropdown-v2.is-open
.pipeline-inline-dropdown-search-shell-v2 {
  border-color:
    rgba(93, 226, 194, .58);

  box-shadow:
    0 0 0 3px
    rgba(93, 226, 194, .065),
    0 0 18px
    rgba(93, 226, 194, .035);
}

.pipeline-inline-dropdown-label-v2 {
  min-width: 0;

  overflow: hidden;

  color:
    #f4f9f5;

  font-size: 10.5px;
  font-weight: 670;
  line-height: 1;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-inline-dropdown-label-v2.is-phase {
  color:
    color-mix(
      in srgb,
      var(--inline-dd-phase-color) 78%,
      #ffffff 22%
    );

  font-weight: 780;
}

.pipeline-inline-dropdown-chevron-v2 {
  position: absolute;

  top: 50%;
  right: 12px;

  width: 7px;
  height: 7px;

  margin-top: -5px;

  border-right:
    1.5px solid
    #9aac9f;

  border-bottom:
    1.5px solid
    #9aac9f;

  transform:
    rotate(45deg);

  transition:
    transform .14s ease,
    margin .14s ease;
}

.pipeline-inline-dropdown-v2.is-open
.pipeline-inline-dropdown-chevron-v2 {
  margin-top: -2px;

  transform:
    rotate(225deg);
}

.pipeline-inline-dropdown-search-shell-v2 {
  position: relative;

  display: flex;
  align-items: center;
}

.pipeline-inline-dropdown-search-shell-v2.hidden {
  display: none !important;
}

.pipeline-inline-dropdown-trigger-v2.hidden {
  display: none !important;
}

.pipeline-inline-dropdown-search-v2 {
  width: 100% !important;
  height: 32px !important;

  padding:
    0
    31px
    0
    11px !important;

  color:
    #f4f9f5 !important;

  background:
    transparent !important;

  border:
    0 !important;

  border-radius:
    10px !important;

  outline:
    0 !important;

  box-shadow:
    none !important;

  font-size:
    10.5px !important;

  font-weight:
    620 !important;
}

.pipeline-inline-dropdown-search-v2::placeholder {
  color:
    #73847a !important;
}

.pipeline-inline-dropdown-search-shell-v2 > i {
  position: absolute;

  top: 10px;
  right: 12px;

  width: 9px;
  height: 9px;

  pointer-events: none;

  border:
    1.5px solid
    #5de2c2;

  border-radius: 50%;
}

.pipeline-inline-dropdown-search-shell-v2 > i::after {
  content: "";

  position: absolute;

  width: 5px;
  height: 1.5px;

  right: -4px;
  bottom: -2px;

  background:
    #5de2c2;

  border-radius:
    999px;

  transform:
    rotate(45deg);
}

/* Portal anexado diretamente ao body */
.pipeline-inline-dropdown-menu-v2 {
  position: fixed;
  z-index: 99999;

  padding: 6px;

  display: grid;
  gap: 3px;

  overflow-x: hidden;
  overflow-y: auto;

  background:
    radial-gradient(
      circle at 94% 0%,
      rgba(93, 226, 194, .065),
      transparent 32%
    ),
    #08110c;

  border:
    1px solid
    rgba(93, 226, 194, .32);

  border-radius:
    12px;

  box-shadow:
    0 24px 65px
    rgba(0,0,0,.58),
    0 0 0 1px
    rgba(124,255,107,.025),
    0 0 30px
    rgba(93,226,194,.045);

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(93,226,194,.32)
    transparent;
}

.pipeline-inline-dropdown-option-v2 {
  width: 100%;
  min-height: 38px;

  padding:
    8px
    10px;

  display: flex;
  align-items: center;
  gap: 8px;

  color:
    #eef5f0;

  background:
    transparent;

  border:
    0;

  border-radius:
    9px;

  outline:
    0;

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

  font-size:
    10.6px;

  font-weight:
    620;

  line-height:
    1.22;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    color .12s ease,
    background .12s ease,
    box-shadow .12s ease;
}

.pipeline-inline-dropdown-option-v2:hover,
.pipeline-inline-dropdown-option-v2:focus-visible {
  color:
    #75f0ce;

  background:
    rgba(93,226,194,.075);
}

.pipeline-inline-dropdown-option-v2.is-selected {
  color:
    #b7ff6c;

  background:
    linear-gradient(
      90deg,
      rgba(124,255,107,.09),
      rgba(93,226,194,.025)
    );
}

.pipeline-inline-dropdown-option-v2 > span {
  min-width: 0;
  flex: 1;

  overflow: hidden;

  text-overflow:
    ellipsis;

  white-space:
    normal;
}

.pipeline-inline-dropdown-option-v2 > b {
  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  display: grid;
  place-items: center;

  margin-left: auto;

  color:
    #071008;

  background:
    #7CFF6B;

  border-radius:
    50%;

  font-size:
    10px;

  font-weight:
    950;

  box-shadow:
    0 0 12px
    rgba(124,255,107,.28);
}

.pipeline-inline-dropdown-option-v2.is-phase {
  color:
    color-mix(
      in srgb,
      var(--inline-dd-phase-color) 78%,
      #ffffff 22%
    );
}

.pipeline-inline-dropdown-phase-dot-v2 {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  background:
    var(--inline-dd-phase-color);

  border-radius:
    50%;

  box-shadow:
    0 0 9px
    color-mix(
      in srgb,
      var(--inline-dd-phase-color) 45%,
      transparent
    );
}

.pipeline-inline-dropdown-empty-v2 {
  min-height: 50px;

  display: grid;
  place-items: center;

  color:
    #819087;

  font-size:
    9.6px;

  font-weight:
    620;
}

/* Light */
html[data-app-theme="light"]
.pipeline-inline-dropdown-trigger-v2,
html[data-app-theme="light"]
.pipeline-inline-dropdown-search-shell-v2 {
  color:
    #152019;

  background:
    #fbfdfb;

  border-color:
    #cbd8ca;
}

html[data-app-theme="light"]
.pipeline-inline-dropdown-label-v2,
html[data-app-theme="light"]
.pipeline-inline-dropdown-search-v2 {
  color:
    #17221a !important;
}

html[data-app-theme="light"]
.pipeline-inline-dropdown-menu-v2 {
  background:
    #ffffff;

  border-color:
    #b9cfbd;

  box-shadow:
    0 18px 50px
    rgba(20,45,29,.17);
}

html[data-app-theme="light"]
.pipeline-inline-dropdown-option-v2 {
  color:
    #17221a;
}

html[data-app-theme="light"]
.pipeline-inline-dropdown-option-v2:hover {
  color:
    #086d52;

  background:
    #edf9f4;
}

html[data-app-theme="light"]
.pipeline-inline-dropdown-option-v2.is-selected {
  color:
    #3f700c;

  background:
    #f1f9e9;
}

/* =====================================================================
   BUGFIX — DROPDOWN INLINE NÃO PODE DEIXAR "SEGUNDA CAIXA" NA LINHA
   ===================================================================== */

/*
  A caixa de busca só existe visualmente enquanto o dropdown está aberto.
  Esta regra é propositalmente redundante com o JS para impedir qualquer
  vazamento visual em rerender, scroll, clique externo ou fechamento.
*/
.pipeline-inline-dropdown-v2:not(.is-open)
> .pipeline-inline-dropdown-search-shell-v2 {
  display: none !important;
}

.pipeline-inline-dropdown-v2:not(.is-open)
> .pipeline-inline-dropdown-trigger-v2 {
  display: flex !important;
}

.pipeline-inline-dropdown-v2.is-open
> .pipeline-inline-dropdown-trigger-v2 {
  display: none !important;
}

.pipeline-inline-dropdown-v2.is-open
> .pipeline-inline-dropdown-search-shell-v2 {
  display: flex !important;
}

/*
  O wrapper mantém sempre exatamente a altura de um único campo,
  independentemente do estado aberto/fechado.
*/
.pipeline-inline-dropdown-v2 {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;

  overflow: visible !important;
}

.pipeline-row.is-inline-editing td {
  overflow: visible;
}

/* =====================================================================
   PROSPECTA CORBAN — PALETA PADRÃO V2
   DARK: grafite neutro/azulado, sem fundo puxado para verde.
   LIGHT: branco + cinza frio/neutro.
   Lime / Mint / Violet permanecem como IDENTIDADE e não como ambiente.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TOKENS — DARK
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] {
  color-scheme: dark;

  --app-bg: #0B0D12 !important;
  --app-bg-soft: #0E1117 !important;
  --app-sidebar: #0E1117 !important;

  --app-surface: #121620 !important;
  --app-surface-2: #151A24 !important;
  --app-surface-3: #1A202C !important;

  --app-border: #29313D !important;
  --app-border-strong: #3A4558 !important;

  --app-text: #F5F7FA !important;
  --app-text-strong: #FFFFFF !important;
  --app-muted: #A7B0BE !important;
  --app-muted-2: #737E8D !important;

  --app-accent: #7CFF6B !important;
  --app-accent-soft: rgba(124, 255, 107, .085) !important;
  --app-mint: #59E7C0 !important;
  --app-violet: #8B6CFF !important;

  --app-danger: #FF5B66 !important;
  --app-danger-soft: rgba(255, 91, 102, .10) !important;

  --app-primary-text: #08100B !important;

  --app-control: #171C27 !important;
  --app-control-hover: #1D2330 !important;
  --app-table-hover: rgba(89, 231, 192, .045) !important;

  --app-shadow: 0 28px 72px rgba(0, 0, 0, .34) !important;
  --app-shadow-soft: 0 12px 34px rgba(0, 0, 0, .22) !important;

  /* tokens auxiliares da paleta neutra */
  --corban-neutral-deep: #090B10;
  --corban-neutral-0: #0B0D12;
  --corban-neutral-1: #0E1117;
  --corban-neutral-2: #121620;
  --corban-neutral-3: #151A24;
  --corban-neutral-4: #171C27;
  --corban-neutral-5: #1D2330;
  --corban-neutral-border: #29313D;
  --corban-neutral-border-strong: #3A4558;
}

/* ---------------------------------------------------------------------
   TOKENS — LIGHT
   --------------------------------------------------------------------- */
html[data-app-theme="light"] {
  color-scheme: light;

  --app-bg: #F5F7FA !important;
  --app-bg-soft: #EEF1F4 !important;
  --app-sidebar: #FAFBFC !important;

  --app-surface: #FFFFFF !important;
  --app-surface-2: #F7F9FB !important;
  --app-surface-3: #F0F3F6 !important;

  --app-border: #D9E0E7 !important;
  --app-border-strong: #C4CDD8 !important;

  --app-text: #202630 !important;
  --app-text-strong: #0F141B !important;
  --app-muted: #66717F !important;
  --app-muted-2: #8893A1 !important;

  --app-accent: #3F8E4C !important;
  --app-accent-soft: #EDF8EF !important;
  --app-mint: #178A70 !important;
  --app-violet: #6657B8 !important;

  --app-danger: #C74450 !important;
  --app-danger-soft: #FFF0F2 !important;

  --app-primary-text: #FFFFFF !important;

  --app-control: #FFFFFF !important;
  --app-control-hover: #F2F5F8 !important;
  --app-table-hover: #F3F7F8 !important;

  --app-shadow: 0 20px 52px rgba(25, 35, 48, .09) !important;
  --app-shadow-soft: 0 8px 26px rgba(25, 35, 48, .065) !important;
}

/* ---------------------------------------------------------------------
   FUNDO GERAL / CONTENT
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] body,
html[data-app-theme="dark"] .app-view,
html[data-app-theme="dark"] .content {
  background: #0B0D12 !important;
}

html[data-app-theme="dark"] .content {
  background-image:
    radial-gradient(circle at 86% 2%, rgba(139, 108, 255, .035), transparent 31%),
    radial-gradient(circle at 14% 92%, rgba(89, 231, 192, .022), transparent 28%) !important;
}

html[data-app-theme="light"] body,
html[data-app-theme="light"] .app-view,
html[data-app-theme="light"] .content {
  background: #F5F7FA !important;
}

html[data-app-theme="light"] .content {
  background-image:
    radial-gradient(circle at 88% 0%, rgba(102, 87, 184, .025), transparent 29%),
    radial-gradient(circle at 10% 90%, rgba(23, 138, 112, .018), transparent 26%) !important;
}

/* ---------------------------------------------------------------------
   SIDEBAR — neutra. Neon só nos pontos de identidade/seleção.
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] .app-view .sidebar {
  background:
    radial-gradient(circle at 8% 8%, rgba(139, 108, 255, .045), transparent 23%),
    linear-gradient(180deg, #0E1117 0%, #0B0D12 100%) !important;

  border-right-color: #252D39 !important;
}

html[data-app-theme="light"] .app-view .sidebar {
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;

  border-right-color: #DDE3EA !important;
}

html[data-app-theme="dark"] .sidebar-orbit {
  border-color: rgba(139, 108, 255, .12) !important;
}

html[data-app-theme="dark"] .sidebar-orbit::before,
html[data-app-theme="dark"] .sidebar-orbit::after {
  border-color: rgba(89, 231, 192, .10) !important;
}

/* Nav comum neutra */
html[data-app-theme="dark"] .nav:not(.active) {
  color: #A7B0BE !important;
  background: transparent !important;
  border-color: transparent !important;
}

html[data-app-theme="dark"] .nav:not(.active):hover {
  color: #F5F7FA !important;
  background: #151A24 !important;
  border-color: #29313D !important;
}

/* Seleção mantém a identidade, mas não vira um bloco verde pesado */
html[data-app-theme="dark"] .nav.active {
  color: #FFFFFF !important;
  background:
    linear-gradient(90deg, rgba(124, 255, 107, .095), rgba(89, 231, 192, .025)) !important;
  border-color: rgba(124, 255, 107, .34) !important;
  box-shadow:
    inset 3px 0 0 #7CFF6B,
    0 0 20px rgba(124, 255, 107, .025) !important;
}

html[data-app-theme="light"] .nav:not(.active):hover {
  background: #F0F3F6 !important;
  border-color: #D9E0E7 !important;
}

html[data-app-theme="light"] .nav.active {
  color: #172011 !important;
  background: #EDF8EF !important;
  border-color: #B8D8BC !important;
}

/* ---------------------------------------------------------------------
   SUPERFÍCIES / PAINÉIS / CARDS
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] :is(
  .pipeline-commandbar,
  .pipeline-stage,
  .settings-module-card,
  .employees-panel,
  .tables-panel,
  .phases-panel,
  .banks-settings-panel,
  .products-settings-panel,
  .company-license-state-card,
  .futuristic-card,
  .tech-card,
  .pipeline-inline-edit-actions,
  .profile-identity-card
) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.008), transparent 42%),
    #121620 !important;
  border-color: #29313D !important;
  box-shadow: var(--app-shadow-soft) !important;
}

html[data-app-theme="dark"] :is(
  .pipeline-shell,
  .pipeline-workspace,
  .employees-shell,
  .employees-workspace,
  .tables-shell,
  .tables-workspace,
  .phases-shell,
  .banks-settings-shell,
  .products-settings-shell,
  .settings-workspace,
  .settings-home
) {
  background: transparent !important;
}

html[data-app-theme="light"] :is(
  .pipeline-commandbar,
  .pipeline-stage,
  .settings-module-card,
  .employees-panel,
  .tables-panel,
  .phases-panel,
  .banks-settings-panel,
  .products-settings-panel,
  .company-license-state-card,
  .futuristic-card,
  .tech-card,
  .pipeline-inline-edit-actions,
  .profile-identity-card
) {
  background: #FFFFFF !important;
  border-color: #D9E0E7 !important;
  box-shadow: var(--app-shadow-soft) !important;
}

/* Cards clicáveis do hub: cor vem só do ícone/status */
html[data-app-theme="dark"] .settings-module-card:hover {
  background: #151A24 !important;
  border-color: #3A4558 !important;
  box-shadow: 0 15px 38px rgba(0,0,0,.25) !important;
}

html[data-app-theme="light"] .settings-module-card:hover {
  background: #FAFBFD !important;
  border-color: #C4CDD8 !important;
}

/* ---------------------------------------------------------------------
   ESTEIRA / TABELA
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] .pipeline-stage {
  background: #0E1117 !important;
}

html[data-app-theme="dark"] .pipeline-stage-toolbar,
html[data-app-theme="dark"] .pipeline-table thead {
  background: #10141C !important;
  border-color: #29313D !important;
}

html[data-app-theme="dark"] .pipeline-table thead th {
  color: #AAB4C1 !important;
  background: #10141C !important;
  border-color: #252D39 !important;
}

html[data-app-theme="dark"] .pipeline-table tbody td {
  background: #0F131B !important;
  border-color: #202733 !important;
}

html[data-app-theme="dark"] .pipeline-table tbody tr:nth-child(even) td {
  background: #11151E !important;
}

html[data-app-theme="dark"] .pipeline-table tbody tr:hover td {
  background: #171C27 !important;
}

html[data-app-theme="light"] .pipeline-stage {
  background: #FFFFFF !important;
}

html[data-app-theme="light"] .pipeline-stage-toolbar,
html[data-app-theme="light"] .pipeline-table thead,
html[data-app-theme="light"] .pipeline-table thead th {
  background: #F7F9FB !important;
  border-color: #D9E0E7 !important;
}

html[data-app-theme="light"] .pipeline-table tbody td {
  background: #FFFFFF !important;
  border-color: #E6EBF0 !important;
}

html[data-app-theme="light"] .pipeline-table tbody tr:nth-child(even) td {
  background: #FBFCFD !important;
}

html[data-app-theme="light"] .pipeline-table tbody tr:hover td {
  background: #F2F6F8 !important;
}

/* ---------------------------------------------------------------------
   ABAS — neutras + cor escolhida pelo usuário
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] .pipeline-tab {
  background: #11151E !important;
  border-color: #29313D !important;
}

html[data-app-theme="dark"] .pipeline-tab:hover {
  background: #171C27 !important;
  border-color: #3A4558 !important;
}

html[data-app-theme="dark"] .pipeline-tab.is-active {
  background:
    linear-gradient(180deg, rgba(89, 231, 192, .035), transparent 75%),
    #171C27 !important;
  border-color: #3A4558 !important;
  border-bottom-color: #171C27 !important;
}

html[data-app-theme="dark"] .pipeline-tab-add {
  background: #151A24 !important;
  border-color: #29313D !important;
}

html[data-app-theme="light"] .pipeline-tab {
  background: #F3F6F8 !important;
  border-color: #D9E0E7 !important;
}

html[data-app-theme="light"] .pipeline-tab.is-active {
  background: #FFFFFF !important;
  border-color: #C4CDD8 !important;
  border-bottom-color: #FFFFFF !important;
}

/* ---------------------------------------------------------------------
   INPUTS / DROPDOWNS / TEXTAREAS
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .corban-employee-select-trigger,
  .corban-employee-select-search,
  .pipeline-inline-input,
  .pipeline-inline-select,
  .pipeline-inline-readonly,
  .pipeline-inline-dropdown-trigger-v2,
  .pipeline-inline-dropdown-search-shell-v2
) {
  color: #F5F7FA !important;
  background: #171C27 !important;
  border-color: #303948 !important;
}

html[data-app-theme="dark"] :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .corban-employee-select-trigger,
  .pipeline-inline-dropdown-trigger-v2
):hover {
  border-color: #455165 !important;
}

html[data-app-theme="dark"] :is(
  input:not([type="checkbox"]):not([type="radio"]):focus,
  select:focus,
  textarea:focus,
  .corban-employee-select-search:focus,
  .pipeline-inline-input:focus,
  .pipeline-inline-select:focus,
  .pipeline-inline-dropdown-v2.is-open .pipeline-inline-dropdown-search-shell-v2
) {
  border-color: rgba(89, 231, 192, .65) !important;
  box-shadow: 0 0 0 3px rgba(89, 231, 192, .075) !important;
}

html[data-app-theme="dark"] :is(input,textarea)::placeholder {
  color: #737E8D !important;
}

html[data-app-theme="light"] :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .corban-employee-select-trigger,
  .corban-employee-select-search,
  .pipeline-inline-input,
  .pipeline-inline-select,
  .pipeline-inline-readonly,
  .pipeline-inline-dropdown-trigger-v2,
  .pipeline-inline-dropdown-search-shell-v2
) {
  color: #202630 !important;
  background: #FFFFFF !important;
  border-color: #D4DCE5 !important;
}

html[data-app-theme="light"] :is(
  input:not([type="checkbox"]):not([type="radio"]):focus,
  select:focus,
  textarea:focus,
  .corban-employee-select-search:focus,
  .pipeline-inline-input:focus
) {
  border-color: rgba(23, 138, 112, .55) !important;
  box-shadow: 0 0 0 3px rgba(23, 138, 112, .075) !important;
}

/* ---------------------------------------------------------------------
   MENUS CUSTOM / FILTROS / DRAWERS
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] :is(
  .corban-employee-select-menu,
  .pipeline-inline-dropdown-menu-v2,
  .pipeline-filter-drawer,
  .proposal-drawer
) {
  color: #F5F7FA !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(139,108,255,.035), transparent 28%),
    #121620 !important;
  border-color: #354052 !important;
  box-shadow: 0 24px 68px rgba(0,0,0,.48) !important;
}

html[data-app-theme="dark"] :is(
  .corban-employee-select-option,
  .pipeline-inline-dropdown-option-v2,
  .pipeline-filter-option
) {
  color: #E9EDF2 !important;
  background: transparent !important;
}

html[data-app-theme="dark"] :is(
  .corban-employee-select-option:hover,
  .pipeline-inline-dropdown-option-v2:hover,
  .pipeline-filter-option:hover
) {
  color: #FFFFFF !important;
  background: #1D2330 !important;
}

/* seleção continua com identidade */
html[data-app-theme="dark"] .corban-employee-select-option.is-selected,
html[data-app-theme="dark"] .pipeline-inline-dropdown-option-v2.is-selected {
  color: #B9FF76 !important;
  background:
    linear-gradient(90deg, rgba(168,255,79,.085), rgba(89,231,192,.02)) !important;
}

html[data-app-theme="light"] :is(
  .corban-employee-select-menu,
  .pipeline-inline-dropdown-menu-v2,
  .pipeline-filter-drawer,
  .proposal-drawer
) {
  color: #202630 !important;
  background: #FFFFFF !important;
  border-color: #C4CDD8 !important;
  box-shadow: 0 22px 55px rgba(25,35,48,.14) !important;
}

/* ---------------------------------------------------------------------
   MODAIS
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] :is(
  .modal,
  .employee-modal-card,
  .table-catalog-modal-card,
  .phase-modal-card,
  .bank-settings-modal-card,
  .product-settings-modal-card,
  .profile-modal-card,
  .profile-crop-card,
  .employees-unassigned-card,
  .phase-delete-card,
  .bank-settings-delete-card,
  .product-settings-delete-card,
  .pipeline-tab-color-modal-card
) {
  color: #F5F7FA !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(139,108,255,.035), transparent 29%),
    #121620 !important;
  border-color: #354052 !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.48) !important;
}

html[data-app-theme="light"] :is(
  .modal,
  .employee-modal-card,
  .table-catalog-modal-card,
  .phase-modal-card,
  .bank-settings-modal-card,
  .product-settings-modal-card,
  .profile-modal-card,
  .profile-crop-card,
  .employees-unassigned-card,
  .phase-delete-card,
  .bank-settings-delete-card,
  .product-settings-delete-card,
  .pipeline-tab-color-modal-card
) {
  color: #202630 !important;
  background: #FFFFFF !important;
  border-color: #D4DCE5 !important;
  box-shadow: 0 28px 70px rgba(25,35,48,.15) !important;
}

html[data-app-theme="dark"] :is(
  .modal-backdrop,
  .employee-modal-backdrop,
  .table-catalog-modal-backdrop,
  .phase-modal-backdrop,
  .bank-settings-modal-backdrop,
  .product-settings-modal-backdrop,
  .profile-modal-backdrop,
  .profile-crop-backdrop,
  .employees-unassigned-backdrop,
  .phase-delete-backdrop,
  .bank-settings-delete-backdrop,
  .product-settings-delete-backdrop,
  .pipeline-filter-drawer-backdrop,
  .proposal-drawer-backdrop
) {
  background: rgba(4, 6, 10, .70) !important;
  backdrop-filter: blur(7px) saturate(.8) !important;
}

html[data-app-theme="light"] :is(
  .modal-backdrop,
  .employee-modal-backdrop,
  .table-catalog-modal-backdrop,
  .phase-modal-backdrop,
  .bank-settings-modal-backdrop,
  .product-settings-modal-backdrop,
  .profile-modal-backdrop,
  .profile-crop-backdrop,
  .employees-unassigned-backdrop,
  .phase-delete-backdrop,
  .bank-settings-delete-backdrop,
  .product-settings-delete-backdrop,
  .pipeline-filter-drawer-backdrop,
  .proposal-drawer-backdrop
) {
  background: rgba(28, 36, 48, .24) !important;
  backdrop-filter: blur(5px) !important;
}

/* ---------------------------------------------------------------------
   TOOLBARS / SEARCH / CABEÇALHOS INTERNOS
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] :is(
  .employees-panel-top,
  .tables-searchbar,
  .phases-toolbar,
  .banks-settings-toolbar,
  .products-settings-toolbar,
  .pipeline-filter-active-strip,
  .profile-modal-top
) {
  background: #151A24 !important;
  border-color: #29313D !important;
}

html[data-app-theme="light"] :is(
  .employees-panel-top,
  .tables-searchbar,
  .phases-toolbar,
  .banks-settings-toolbar,
  .products-settings-toolbar,
  .pipeline-filter-active-strip,
  .profile-modal-top
) {
  background: #F7F9FB !important;
  border-color: #D9E0E7 !important;
}

/* ---------------------------------------------------------------------
   CARD DO USUÁRIO / LOGOUT / BOTÕES SECUNDÁRIOS
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] :is(
  .profile-chip,
  .logout-button,
  .sidebar-theme-toggle,
  .sidebar-toggle
) {
  background: #121620 !important;
  border-color: #29313D !important;
}

html[data-app-theme="dark"] :is(
  .profile-chip:hover,
  .logout-button:hover,
  .sidebar-theme-toggle:hover,
  .sidebar-toggle:hover
) {
  background: #1A202C !important;
  border-color: #3A4558 !important;
}

html[data-app-theme="light"] :is(
  .profile-chip,
  .logout-button,
  .sidebar-theme-toggle,
  .sidebar-toggle
) {
  background: #FFFFFF !important;
  border-color: #D9E0E7 !important;
}

/* ---------------------------------------------------------------------
   SCROLLBARS — neutras com detalhe mint, sem trilho verde.
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] {
  scrollbar-color: #3A4558 #0E1117;
}

html[data-app-theme="dark"] *::-webkit-scrollbar-track {
  background: #0E1117 !important;
}

html[data-app-theme="dark"] *::-webkit-scrollbar-thumb {
  background: #3A4558 !important;
  border-color: #0E1117 !important;
}

html[data-app-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: #4A586D !important;
}

html[data-app-theme="light"] {
  scrollbar-color: #B9C3CE #EEF1F4;
}

html[data-app-theme="light"] *::-webkit-scrollbar-track {
  background: #EEF1F4 !important;
}

html[data-app-theme="light"] *::-webkit-scrollbar-thumb {
  background: #B9C3CE !important;
  border-color: #EEF1F4 !important;
}

/* ---------------------------------------------------------------------
   TOASTS / FEEDBACK — neutros, sem perder semântica
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] .toast {
  color: #F5F7FA !important;
  background: #171C27 !important;
  border-color: #3A4558 !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.38) !important;
}

html[data-app-theme="light"] .toast {
  color: #202630 !important;
  background: #FFFFFF !important;
  border-color: #D4DCE5 !important;
  box-shadow: 0 16px 38px rgba(25,35,48,.13) !important;
}

/* ---------------------------------------------------------------------
   INLINE EDIT — neutraliza verde estrutural; verde fica na ação/estado.
   --------------------------------------------------------------------- */
html[data-app-theme="dark"] .pipeline-row.is-inline-editing td {
  background: #121620 !important;
}

html[data-app-theme="dark"] .pipeline-row.has-inline-changes td {
  background:
    linear-gradient(90deg, rgba(89,231,192,.025), transparent 38%),
    #121620 !important;
}

html[data-app-theme="dark"] .pipeline-inline-dropdown-trigger-v2,
html[data-app-theme="dark"] .pipeline-inline-dropdown-search-shell-v2 {
  background: #171C27 !important;
  border-color: #354052 !important;
}

html[data-app-theme="dark"] .pipeline-inline-dropdown-menu-v2 {
  background:
    radial-gradient(circle at 95% 0%, rgba(139,108,255,.035), transparent 28%),
    #121620 !important;
  border-color: #3A4558 !important;
}

/* ---------------------------------------------------------------------
   IMPORTANTE: cores semânticas e identidade continuam intocadas:
   fase personalizada, erro/vermelho, lime, mint, violet, badges e CTA.
   --------------------------------------------------------------------- */


/* =====================================================================
   CORBAN — AJUSTE DE ACENTO V3
   Lime menos amarelo, mais verde-neon para harmonizar com grafite/azulado.
   ===================================================================== */

html[data-app-theme="dark"] {
  --app-accent: #7CFF6B !important;
  --app-accent-soft: rgba(124, 255, 107, .09) !important;
}

html[data-app-theme="light"] {
  --app-accent: #3F8E4C !important;
  --app-accent-soft: #EDF8EF !important;
}

/* Ações principais: novo verde neon + mint, sem amarelar. */
html[data-app-theme="dark"] :is(
  .pipeline-add-button,
  .employee-new-button,
  .products-settings-add-button,
  .bank-settings-add-button,
  .phases-toolbar .btn.primary,
  .phase-modal-actions .btn.primary,
  .product-settings-modal-actions .btn.primary,
  .bank-settings-modal-actions .btn.primary,
  .table-catalog-modal-actions .btn.primary,
  .pipeline-inline-edit-actions .btn.primary
) {
  background:
    linear-gradient(
      105deg,
      #7CFF6B 0%,
      #8CFF78 42%,
      #59E7C0 100%
    ) !important;

  color: #07100A !important;

  border-color: rgba(124, 255, 107, .34) !important;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, .22),
    0 0 18px rgba(124, 255, 107, .055) !important;
}

/* Seleção ativa da sidebar fica mais verde e menos amarela. */
html[data-app-theme="dark"] .nav.active {
  background:
    linear-gradient(
      90deg,
      rgba(124, 255, 107, .10),
      rgba(89, 231, 192, .025)
    ) !important;

  border-color: rgba(124, 255, 107, .34) !important;

  box-shadow:
    inset 3px 0 0 #7CFF6B,
    0 0 20px rgba(124, 255, 107, .03) !important;
}

/* =====================================================================
   CORBAN — LIGHT MODE OFF-WHITE / RENDA PREMIUM
   Fundo quente e neutro, sem branco puro dominante.
   O modo escuro NÃO é alterado por este bloco.
   ===================================================================== */

html[data-app-theme="light"] {
  --app-bg: #F4F2EC !important;
  --app-bg-soft: #EEECE5 !important;

  --app-sidebar: #F7F5EF !important;

  --app-surface: #FBFAF7 !important;
  --app-surface-2: #F7F5F0 !important;
  --app-surface-3: #EEECE5 !important;

  --app-border: #D8D5CC !important;
  --app-border-strong: #C4C1B8 !important;

  --app-text: #1B201C !important;
  --app-text-strong: #101410 !important;

  --app-muted: #5F6861 !important;
  --app-muted-2: #7A827B !important;

  --app-accent: #3F8E4C !important;
  --app-accent-soft: #EDF5EA !important;

  --app-mint: #178A70 !important;
  --app-violet: #6657B8 !important;

  --app-danger: #C74450 !important;
  --app-danger-soft: #FFF0F2 !important;

  --app-primary-text: #FFFFFF !important;

  --app-control: #FFFDF9 !important;
  --app-control-hover: #F1EEE7 !important;
  --app-table-hover: #F2EFE8 !important;

  --app-shadow:
    0 20px 50px
    rgba(76, 68, 56, .075) !important;

  --app-shadow-soft:
    0 8px 25px
    rgba(76, 68, 56, .055) !important;
}

/* ---------------------------------------------------------------------
   FUNDO GERAL
   --------------------------------------------------------------------- */

html[data-app-theme="light"] body,
html[data-app-theme="light"] .app-view,
html[data-app-theme="light"] .content {
  background:
    #F4F2EC !important;
}

html[data-app-theme="light"] .content {
  background-image:
    radial-gradient(
      circle at 88% 0%,
      rgba(102, 87, 184, .018),
      transparent 29%
    ),
    radial-gradient(
      circle at 10% 92%,
      rgba(166, 145, 113, .045),
      transparent 28%
    ) !important;
}

/* ---------------------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------------------- */

html[data-app-theme="light"]
.app-view .sidebar {
  background:
    linear-gradient(
      180deg,
      #F9F7F2 0%,
      #F4F2EC 100%
    ) !important;

  border-right-color:
    #D8D5CC !important;
}

html[data-app-theme="light"]
.nav:not(.active):hover {
  background:
    #EEECE5 !important;

  border-color:
    #D8D5CC !important;
}

html[data-app-theme="light"]
.nav.active {
  color:
    #172011 !important;

  background:
    #EDF5EA !important;

  border-color:
    #B8D8BC !important;

  box-shadow:
    inset 3px 0 0
    #3F8E4C !important;
}

/* ---------------------------------------------------------------------
   CARDS / PAINÉIS / SUPERFÍCIES
   --------------------------------------------------------------------- */

html[data-app-theme="light"] :is(
  .pipeline-commandbar,
  .pipeline-stage,
  .settings-module-card,
  .employees-panel,
  .tables-panel,
  .phases-panel,
  .banks-settings-panel,
  .products-settings-panel,
  .company-license-state-card,
  .futuristic-card,
  .tech-card,
  .pipeline-inline-edit-actions,
  .profile-identity-card
) {
  background:
    #FBFAF7 !important;

  border-color:
    #D8D5CC !important;

  box-shadow:
    var(--app-shadow-soft) !important;
}

html[data-app-theme="light"]
.settings-module-card:hover {
  background:
    #FFFDF9 !important;

  border-color:
    #C4C1B8 !important;
}

/* ---------------------------------------------------------------------
   ESTEIRA
   --------------------------------------------------------------------- */

html[data-app-theme="light"]
.pipeline-stage {
  background:
    #FBFAF7 !important;

  border-color:
    #D8D5CC !important;
}

html[data-app-theme="light"] :is(
  .pipeline-stage-toolbar,
  .pipeline-table thead
) {
  background:
    #F2EFE8 !important;

  border-color:
    #D8D5CC !important;
}

html[data-app-theme="light"]
.pipeline-table thead th {
  color:
    #555F57 !important;

  background:
    #F2EFE8 !important;

  border-color:
    #D8D5CC !important;
}

html[data-app-theme="light"]
.pipeline-table tbody td {
  color:
    #1B201C !important;

  background:
    #FBFAF7 !important;

  border-color:
    #E2DFD7 !important;
}

html[data-app-theme="light"]
.pipeline-table tbody tr:nth-child(even) td {
  background:
    #F8F6F1 !important;
}

html[data-app-theme="light"]
.pipeline-table tbody tr:hover td {
  background:
    #EEECE5 !important;
}

/* ---------------------------------------------------------------------
   ABAS
   --------------------------------------------------------------------- */

html[data-app-theme="light"]
.pipeline-tab {
  color:
    #626A63 !important;

  background:
    #F2EFE8 !important;

  border-color:
    #D8D5CC !important;
}

html[data-app-theme="light"]
.pipeline-tab:hover {
  color:
    #1B201C !important;

  background:
    #F8F6F1 !important;
}

html[data-app-theme="light"]
.pipeline-tab.is-active {
  color:
    #101410 !important;

  background:
    #FBFAF7 !important;

  border-color:
    #C4C1B8 !important;

  border-bottom-color:
    #FBFAF7 !important;
}

/* ---------------------------------------------------------------------
   CAMPOS / BUSCAS / DROPDOWNS
   --------------------------------------------------------------------- */

html[data-app-theme="light"] :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .pipeline-inline-input,
  .pipeline-inline-readonly,
  .pipeline-inline-dropdown-trigger-v2,
  .pipeline-inline-dropdown-search-shell-v2
) {
  color:
    #1B201C !important;

  background:
    #FFFDF9 !important;

  border-color:
    #D8D5CC !important;
}

html[data-app-theme="light"] :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .pipeline-inline-input,
  .pipeline-inline-dropdown-trigger-v2
):hover {
  border-color:
    #C4C1B8 !important;
}

html[data-app-theme="light"] :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .pipeline-inline-input
):focus {
  background:
    #FFFDF9 !important;

  border-color:
    rgba(23, 138, 112, .50) !important;

  box-shadow:
    0 0 0 3px
    rgba(23, 138, 112, .07) !important;
}

html[data-app-theme="light"]
.pipeline-search-input,
html[data-app-theme="light"]
#pipeline-search-input {
  background:
    #FFFDF9 !important;
}

/* ---------------------------------------------------------------------
   DROPDOWN PORTAL INLINE
   --------------------------------------------------------------------- */

html[data-app-theme="light"]
.pipeline-inline-dropdown-menu-v2 {
  background:
    #FFFDF9 !important;

  border-color:
    #CFCBC1 !important;

  box-shadow:
    0 18px 48px
    rgba(76, 68, 56, .16) !important;
}

html[data-app-theme="light"]
.pipeline-inline-dropdown-option-v2 {
  color:
    #1B201C !important;
}

html[data-app-theme="light"]
.pipeline-inline-dropdown-option-v2:hover {
  color:
    #176E58 !important;

  background:
    #EEF5EF !important;
}

html[data-app-theme="light"]
.pipeline-inline-dropdown-option-v2.is-selected {
  color:
    #326C3D !important;

  background:
    #EDF5EA !important;
}

/* ---------------------------------------------------------------------
   FILTROS / DRAWERS
   --------------------------------------------------------------------- */

html[data-app-theme="light"] :is(
  .pipeline-filter-drawer,
  .pipeline-filter-field,
  .pipeline-filter-field-editor
) {
  background:
    #FBFAF7 !important;

  border-color:
    #D8D5CC !important;
}

html[data-app-theme="light"]
.pipeline-filter-option:hover {
  background:
    #EEECE5 !important;
}

/* ---------------------------------------------------------------------
   MODAIS
   --------------------------------------------------------------------- */

html[data-app-theme="light"] :is(
  .modal-card,
  .phase-modal-card,
  .bank-settings-modal-card,
  .product-settings-modal-card,
  .table-catalog-modal-card,
  .employee-modal-card,
  .pipeline-tab-color-modal-card
) {
  background:
    #FBFAF7 !important;

  border-color:
    #D8D5CC !important;

  box-shadow:
    0 28px 70px
    rgba(76, 68, 56, .17) !important;
}

/* ---------------------------------------------------------------------
   BOTÕES SECUNDÁRIOS
   --------------------------------------------------------------------- */

html[data-app-theme="light"] :is(
  .btn.secondary,
  .toolbar-button,
  .pipeline-icon-action,
  .icon-btn
) {
  color:
    #384039 !important;

  background:
    #F7F5F0 !important;

  border-color:
    #D8D5CC !important;
}

html[data-app-theme="light"] :is(
  .btn.secondary,
  .toolbar-button,
  .pipeline-icon-action,
  .icon-btn
):hover {
  background:
    #EEECE5 !important;

  border-color:
    #C4C1B8 !important;
}

/* ---------------------------------------------------------------------
   SCROLLBARS — mais discretas e quentes
   --------------------------------------------------------------------- */

html[data-app-theme="light"] * {
  scrollbar-color:
    #C7C3B9
    transparent;
}

html[data-app-theme="light"]
*::-webkit-scrollbar-thumb {
  background:
    #C7C3B9 !important;

  border-radius:
    999px;
}

/* =====================================================================
   PROSPECTA CORBAN — SÍMBOLO OFICIAL / CORES FIXAS
   O símbolo é identidade do produto e NÃO acompanha a paleta do tema.
   Restaura exatamente a família de cores usada antes da troca global.
   ===================================================================== */

.side-brand-symbol {
  border-color:
    rgba(184, 255, 99, .275) !important;

  background:
    rgba(184, 255, 99, .10) !important;

  box-shadow:
    inset 0 0 14px
      rgba(184, 255, 99, .018),
    0 0 0 1px
      rgba(184, 255, 99, .012) !important;
}

.side-brand-symbol > span {
  background:
    #B8FF63 !important;

  box-shadow:
    0 0 18px
      rgba(184, 255, 99, .44) !important;
}

.side-brand-symbol > i {
  border-color:
    rgba(184, 255, 99, .30) !important;
}

/*
  Mesmas cores no modo claro e escuro.
  Não usar --app-accent / --app-border aqui.
*/
html[data-app-theme="dark"] .side-brand-symbol,
html[data-app-theme="light"] .side-brand-symbol {
  border-color:
    rgba(184, 255, 99, .275) !important;

  background:
    rgba(184, 255, 99, .10) !important;
}

html[data-app-theme="dark"] .side-brand-symbol > span,
html[data-app-theme="light"] .side-brand-symbol > span {
  background:
    #B8FF63 !important;

  box-shadow:
    0 0 18px
      rgba(184, 255, 99, .44) !important;
}

html[data-app-theme="dark"] .side-brand-symbol > i,
html[data-app-theme="light"] .side-brand-symbol > i {
  border-color:
    rgba(184, 255, 99, .30) !important;
}

/* =====================================================================
   PROSPECTA CORBAN — SÍMBOLO OFICIAL NO MODO CLARO
   Mantém a mesma presença visual do emblema do dark mode.
   ===================================================================== */

html[data-app-theme="light"] .side-brand-symbol {
  background:
    linear-gradient(
      180deg,
      #182019 0%,
      #111713 100%
    ) !important;

  border-color:
    rgba(184, 255, 99, .34) !important;

  box-shadow:
    inset 0 0 16px
      rgba(184, 255, 99, .035),
    0 4px 14px
      rgba(33, 45, 36, .12) !important;
}

html[data-app-theme="light"] .side-brand-symbol > span {
  background:
    #B8FF63 !important;

  box-shadow:
    0 0 16px
      rgba(184, 255, 99, .48) !important;
}

html[data-app-theme="light"] .side-brand-symbol > i {
  border-color:
    rgba(184, 255, 99, .32) !important;
}

/*
  Proteção adicional: o hover/estado da sidebar não deve clarear o emblema.
*/
html[data-app-theme="light"] .side-brand-symbol:hover {
  background:
    linear-gradient(
      180deg,
      #1A241C 0%,
      #121914 100%
    ) !important;

  border-color:
    rgba(184, 255, 99, .42) !important;
}

/* =====================================================================
   ESTEIRA — LINK DA PROPOSTA
   ===================================================================== */

.pipeline-table td.pipeline-link-cell {
  min-width: 0;
}

.pipeline-link-cell > span {
  display: block;

  max-width: 100%;

  overflow: hidden;

  color: var(--app-mint);

  font-size: 10.2px;
  font-weight: 680;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-row-link:not(:disabled) {
  color: var(--app-mint) !important;

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 24%,
      var(--app-border)
    ) !important;

  background:
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      transparent
    ) !important;
}

.pipeline-row-link:not(:disabled):hover {
  color: #8CFF78 !important;

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 48%,
      var(--app-border)
    ) !important;

  background:
    color-mix(
      in srgb,
      var(--app-mint) 10%,
      transparent
    ) !important;

  box-shadow:
    0 0 14px
    color-mix(
      in srgb,
      var(--app-mint) 10%,
      transparent
    ) !important;
}

.pipeline-row-link:disabled {
  opacity: .22 !important;

  cursor: default !important;

  color: var(--app-muted-2) !important;

  background: transparent !important;
  border-color: transparent !important;
}

html[data-app-theme="light"]
.pipeline-link-cell > span {
  color: #17755F !important;
}

html[data-app-theme="light"]
.pipeline-row-link:not(:disabled) {
  color: #17755F !important;

  background: #EEF5EF !important;

  border-color: #BFD6C7 !important;
}

/* =====================================================================
   ESTEIRA — MENU DO BOTÃO DE LINK
   ===================================================================== */

/* A coluna visual LINK foi removida; o link vive no botão de ações final. */
.pipeline-link-action-menu {
  position: fixed;
  z-index: 100000;

  width: 148px;

  padding: 5px;

  display: grid;
  gap: 3px;

  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(89, 231, 192, .055),
      transparent 36%
    ),
    #10151E;

  border:
    1px solid
    #344050;

  border-radius:
    11px;

  box-shadow:
    0 20px 50px
      rgba(0, 0, 0, .42),
    0 0 22px
      rgba(89, 231, 192, .025);
}

.pipeline-link-action-menu button {
  width: 100%;
  min-height: 34px;

  padding:
    0
    9px;

  display: flex;
  align-items: center;
  gap: 8px;

  color:
    #EDF2F7;

  background:
    transparent;

  border:
    0;

  border-radius:
    8px;

  outline:
    0;

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

  font-size:
    9.7px;

  font-weight:
    670;

  text-align:
    left;

  cursor:
    pointer;
}

.pipeline-link-action-menu button:hover,
.pipeline-link-action-menu button:focus-visible {
  color:
    #59E7C0;

  background:
    rgba(89, 231, 192, .075);
}

.pipeline-link-action-menu svg {
  width: 14px;
  height: 14px;

  flex: 0 0 14px;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.pipeline-row-link.is-menu-open {
  color:
    #7CFF6B !important;

  border-color:
    rgba(124, 255, 107, .42) !important;

  background:
    rgba(124, 255, 107, .075) !important;

  box-shadow:
    0 0 0 3px
      rgba(124, 255, 107, .045) !important;
}

/* Light mode */
html[data-app-theme="light"]
.pipeline-link-action-menu {
  background:
    #FFFDF9;

  border-color:
    #CFCBC1;

  box-shadow:
    0 18px 44px
      rgba(76, 68, 56, .16);
}

html[data-app-theme="light"]
.pipeline-link-action-menu button {
  color:
    #1B201C;
}

html[data-app-theme="light"]
.pipeline-link-action-menu button:hover,
html[data-app-theme="light"]
.pipeline-link-action-menu button:focus-visible {
  color:
    #17755F;

  background:
    #EEF5EF;
}

/* =====================================================================
   PROPOSTA — FORMULÁRIO MAIS MODERNO / HARMÔNICO
   Arredondamento consistente dos campos e ações.
   ===================================================================== */

/* Campos comuns: Cliente, CPF, datas, Link, Acompanhamento etc. */
.proposal-field input:not([type="hidden"]),
.proposal-field select,
.proposal-field .corban-employee-select-trigger {
  border-radius: 14px !important;
}

/* Wrapper dos dropdowns customizados mantém a mesma geometria. */
.proposal-field .corban-employee-select,
.proposal-field .corban-employee-select-trigger,
.proposal-field .corban-employee-select-search {
  border-radius: 14px !important;
}

/* Menu aberto também acompanha a nova linguagem. */
.proposal-field .corban-employee-select-menu {
  border-radius: 14px !important;
}

.proposal-field .corban-employee-select-option {
  border-radius: 10px !important;
}

/* Sim / Não / N/A */
.proposal-segmented {
  border-radius: 14px !important;
}

.proposal-segmented button {
  border-radius: 10px !important;
}

/* Promotora > Banco destino > Tabela */
.proposal-cascade-block {
  border-radius: 16px !important;
}

/* Parcela, Contrato, %, Comissão */
.proposal-money-shell,
.proposal-percent-shell {
  border-radius: 14px !important;
}

/*
  O input interno permanece sem borda própria porque o shell é quem
  desenha o campo. Evita cantos duplicados.
*/
.proposal-money-shell input,
.proposal-percent-shell input {
  border-radius: 0 !important;
}

/* Boxes auxiliares do cálculo */
.proposal-finance-box {
  border-radius: 14px !important;
}

/* Botões do rodapé */
.proposal-cancel-button,
.proposal-save-button {
  min-height: 43px !important;

  border-radius: 13px !important;

  padding-left: 17px !important;
  padding-right: 17px !important;

  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease !important;
}

.proposal-cancel-button {
  background:
    color-mix(
      in srgb,
      var(--app-control) 82%,
      transparent
    ) !important;

  border:
    1px solid
    var(--app-border) !important;
}

.proposal-cancel-button:hover {
  background:
    var(--app-control-hover) !important;

  border-color:
    var(--app-border-strong) !important;

  transform:
    translateY(-1px);
}

.proposal-save-button {
  border:
    1px solid
    rgba(124, 255, 107, .26) !important;

  box-shadow:
    0 8px 20px
      rgba(0, 0, 0, .16),
    0 0 16px
      rgba(124, 255, 107, .035) !important;
}

.proposal-save-button:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 10px 24px
      rgba(0, 0, 0, .20),
    0 0 20px
      rgba(124, 255, 107, .055) !important;
}

/* Rodapé acompanha a suavização sem ficar "quadrado". */
.proposal-form-actions {
  border-radius:
    0
    0
    18px
    18px !important;
}

/* Fecha o conjunto visual com o mesmo raio. */
.proposal-form {
  border-radius: 18px !important;
}

/* Foco dos campos: sutil, moderno e sem contorno duro. */
.proposal-field input:not([type="hidden"]):focus,
.proposal-field .corban-employee-select.is-open
.corban-employee-select-trigger,
.proposal-money-shell:focus-within,
.proposal-percent-shell:focus-within {
  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 48%,
      var(--app-border)
    ) !important;

  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(--app-mint) 7%,
        transparent
      ) !important;
}

/* Light mode: mantém a mesma geometria e um relevo bem leve. */
html[data-app-theme="light"]
:is(
  .proposal-field input:not([type="hidden"]),
  .proposal-field .corban-employee-select-trigger,
  .proposal-money-shell,
  .proposal-percent-shell,
  .proposal-segmented
) {
  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, .72) !important;
}

html[data-app-theme="light"]
.proposal-save-button {
  box-shadow:
    0 7px 18px
      rgba(63, 142, 76, .10) !important;
}


/* =====================================================================
   PERFIS / ESTEIRA — VISIBILIDADE E PERMISSÕES
   ===================================================================== */
.pipeline-role-hidden { display: none !important; }

.pipeline-company-cell {
  font-weight: 720;
  color: var(--app-mint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proposal-delete-button {
  min-height: 43px;
  padding: 0 15px;
  border-radius: 13px;
  border: 1px solid rgba(255, 91, 102, .28);
  color: #ff7b85;
  background: rgba(255, 91, 102, .055);
  font-size: 10px;
  font-weight: 820;
  cursor: pointer;
}
.proposal-delete-button:hover,
.proposal-delete-button.confirming {
  border-color: rgba(255, 91, 102, .52);
  background: rgba(255, 91, 102, .11);
  color: #ff98a0;
}
.proposal-delete-button.confirming { box-shadow: 0 0 0 3px rgba(255,91,102,.055); }

.proposal-field.is-permission-readonly,
.proposal-permission-readonly { opacity: .86; }

html[data-app-theme="light"] .proposal-delete-button {
  color: #b6313d;
  background: #fff1f2;
  border-color: #efc5c9;
}

/* =====================================================================
   ORGANOGRAMA — TODOS OS USUÁRIOS NASCEM EM "SEM EQUIPE"
   ===================================================================== */

.employees-unassigned-subtitle {
  margin: 4px 0 0;
  color: var(--app-muted);
  font-size: 9px;
  line-height: 1.35;
}

.corban-org-legend .backoffice i {
  background: #5DA9FF;
}

.corban-org-legend .financeiro i {
  background: #F3C969;
}

.corban-org-person.backoffice {
  border-color:
    color-mix(
      in srgb,
      #5DA9FF 28%,
      var(--app-border)
    );
}

.corban-org-person.financeiro {
  border-color:
    color-mix(
      in srgb,
      #F3C969 30%,
      var(--app-border)
    );
}

/* A raiz é uma área de drop funcional, mas visualmente continua limpa. */
.corban-org-root-drop {
  min-width: max-content;
  min-height: 250px;
  margin-top: 0;
  padding: 0;
  background: transparent;
  border-color: transparent;
}

.corban-org-root-drop.has-managers {
  border-style: solid;
  border-color: transparent;
}

.corban-org-root-drop.drag-over {
  padding: 6px;
  background:
    color-mix(
      in srgb,
      var(--app-accent) 4%,
      transparent
    );
  border: 1px dashed var(--app-accent);
}

.corban-org-root-drop.empty {
  min-width: 320px;
  padding: 14px;
  border:
    1px dashed
    color-mix(
      in srgb,
      var(--app-accent) 22%,
      var(--app-border)
    );
  border-radius: 14px;
}

.corban-org-root-drop > .corban-org-managers:empty {
  min-width: 280px;
}

/* =====================================================================
   ESTEIRA — COLABORADOR: SOMENTE "DESBLOQUEADO?" EDITÁVEL
   ===================================================================== */

.pipeline-row.is-inline-editing
.pipeline-inline-collaborator-readonly:disabled {
  opacity: .72 !important;

  color:
    var(--app-muted) !important;

  cursor:
    default !important;
}

.pipeline-inline-dropdown-v2.is-readonly
.pipeline-inline-dropdown-trigger-v2 {
  opacity: .72 !important;

  cursor:
    default !important;

  background:
    color-mix(
      in srgb,
      var(--app-control) 84%,
      transparent
    ) !important;

  border-color:
    var(--app-border) !important;

  box-shadow:
    none !important;
}

.pipeline-inline-dropdown-v2.is-readonly
.pipeline-inline-dropdown-chevron-v2 {
  opacity: .30 !important;
}

html[data-app-theme="light"]
.pipeline-inline-dropdown-v2.is-readonly
.pipeline-inline-dropdown-trigger-v2 {
  background:
    #F4F2EC !important;
}


/* =====================================================================
   ORGANOGRAMA — PERFIS COM CORES MAIS EVIDENTES
   Objetivo: diferenciar melhor cada perfil no modo escuro e no modo claro.
   ===================================================================== */

:root {
  --org-role-gestor: #79F06D;
  --org-role-supervisor: #52E8D2;
  --org-role-colaborador: #8E7CFF;
  --org-role-backoffice: #5DA9FF;
  --org-role-financeiro: #F3C969;
}

.corban-org-legend span.gestor,
.corban-org-legend span.supervisor,
.corban-org-legend span.colaborador,
.corban-org-legend span.backoffice,
.corban-org-legend span.financeiro {
  border-width: 1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

.corban-org-legend span.gestor {
  color: #D9FFD2;
  background: linear-gradient(180deg, rgba(121, 240, 109, .18), rgba(121, 240, 109, .08));
  border-color: rgba(121, 240, 109, .34);
}

.corban-org-legend span.supervisor {
  color: #D8FFFB;
  background: linear-gradient(180deg, rgba(82, 232, 210, .18), rgba(82, 232, 210, .08));
  border-color: rgba(82, 232, 210, .34);
}

.corban-org-legend span.colaborador {
  color: #E5DEFF;
  background: linear-gradient(180deg, rgba(142, 124, 255, .18), rgba(142, 124, 255, .08));
  border-color: rgba(142, 124, 255, .32);
}

.corban-org-legend span.backoffice {
  color: #D9ECFF;
  background: linear-gradient(180deg, rgba(93, 169, 255, .18), rgba(93, 169, 255, .08));
  border-color: rgba(93, 169, 255, .30);
}

.corban-org-legend span.financeiro {
  color: #FFF0C9;
  background: linear-gradient(180deg, rgba(243, 201, 105, .18), rgba(243, 201, 105, .08));
  border-color: rgba(243, 201, 105, .30);
}

.corban-org-person.gestor,
.corban-org-person.supervisor,
.corban-org-person.colaborador,
.corban-org-person.backoffice,
.corban-org-person.financeiro {
  position: relative;
  overflow: hidden;
}

.corban-org-person.gestor::before,
.corban-org-person.supervisor::before,
.corban-org-person.colaborador::before,
.corban-org-person.backoffice::before,
.corban-org-person.financeiro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .95;
}

.corban-org-person.gestor {
  background:
    linear-gradient(180deg, rgba(121, 240, 109, .095), rgba(121, 240, 109, .030) 58%),
    var(--app-surface);
  border-color: rgba(121, 240, 109, .38);
  box-shadow: 0 0 0 1px rgba(121, 240, 109, .08);
}

.corban-org-person.gestor::before {
  background: linear-gradient(90deg, rgba(121, 240, 109, .22), transparent 20%);
}

.corban-org-person.supervisor {
  background:
    linear-gradient(180deg, rgba(82, 232, 210, .10), rgba(82, 232, 210, .030) 58%),
    var(--app-surface);
  border-color: rgba(82, 232, 210, .40);
  box-shadow: 0 0 0 1px rgba(82, 232, 210, .08);
}

.corban-org-person.supervisor::before {
  background: linear-gradient(90deg, rgba(82, 232, 210, .24), transparent 20%);
}

.corban-org-person.colaborador {
  background:
    linear-gradient(180deg, rgba(142, 124, 255, .10), rgba(142, 124, 255, .028) 58%),
    var(--app-surface);
  border-color: rgba(142, 124, 255, .38);
  box-shadow: 0 0 0 1px rgba(142, 124, 255, .08);
}

.corban-org-person.colaborador::before {
  background: linear-gradient(90deg, rgba(142, 124, 255, .22), transparent 20%);
}

.corban-org-person.backoffice {
  background:
    linear-gradient(180deg, rgba(93, 169, 255, .10), rgba(93, 169, 255, .030) 58%),
    var(--app-surface);
  border-color: rgba(93, 169, 255, .38);
  box-shadow: 0 0 0 1px rgba(93, 169, 255, .08);
}

.corban-org-person.backoffice::before {
  background: linear-gradient(90deg, rgba(93, 169, 255, .22), transparent 20%);
}

.corban-org-person.financeiro {
  background:
    linear-gradient(180deg, rgba(243, 201, 105, .11), rgba(243, 201, 105, .03) 58%),
    var(--app-surface);
  border-color: rgba(243, 201, 105, .38);
  box-shadow: 0 0 0 1px rgba(243, 201, 105, .08);
}

.corban-org-person.financeiro::before {
  background: linear-gradient(90deg, rgba(243, 201, 105, .22), transparent 20%);
}

.corban-org-person.gestor .corban-org-avatar {
  color: #D9FFD2;
  background: rgba(121, 240, 109, .13);
  border-color: rgba(121, 240, 109, .34);
  box-shadow: 0 0 18px rgba(121, 240, 109, .10);
}

.corban-org-person.supervisor .corban-org-avatar {
  color: #D8FFFB;
  background: rgba(82, 232, 210, .13);
  border-color: rgba(82, 232, 210, .34);
  box-shadow: 0 0 18px rgba(82, 232, 210, .10);
}

.corban-org-person.colaborador .corban-org-avatar {
  color: #ECE6FF;
  background: rgba(142, 124, 255, .13);
  border-color: rgba(142, 124, 255, .34);
  box-shadow: 0 0 18px rgba(142, 124, 255, .10);
}

.corban-org-person.backoffice .corban-org-avatar {
  color: #E5F1FF;
  background: rgba(93, 169, 255, .13);
  border-color: rgba(93, 169, 255, .34);
  box-shadow: 0 0 18px rgba(93, 169, 255, .10);
}

.corban-org-person.financeiro .corban-org-avatar {
  color: #FFF2CF;
  background: rgba(243, 201, 105, .13);
  border-color: rgba(243, 201, 105, .34);
  box-shadow: 0 0 18px rgba(243, 201, 105, .10);
}

.corban-org-person.gestor .corban-org-grip { color: rgba(121, 240, 109, .76); }
.corban-org-person.supervisor .corban-org-grip { color: rgba(82, 232, 210, .76); }
.corban-org-person.colaborador .corban-org-grip { color: rgba(142, 124, 255, .76); }
.corban-org-person.backoffice .corban-org-grip { color: rgba(93, 169, 255, .76); }
.corban-org-person.financeiro .corban-org-grip { color: rgba(243, 201, 105, .76); }

.corban-org-drop.gestor {
  border-color: rgba(121, 240, 109, .26);
  background: rgba(121, 240, 109, .035);
}

.corban-org-drop.supervisor {
  border-color: rgba(82, 232, 210, .26);
  background: rgba(82, 232, 210, .035);
}

.corban-org-drop.colaborador {
  border-color: rgba(142, 124, 255, .24);
  background: rgba(142, 124, 255, .03);
}

.corban-org-quick-target.gestor {
  border-color: rgba(121, 240, 109, .30);
  background:
    linear-gradient(180deg, rgba(121, 240, 109, .08), rgba(121, 240, 109, .02)),
    var(--app-surface);
}

.corban-org-quick-target.supervisor {
  border-color: rgba(82, 232, 210, .30);
  background:
    linear-gradient(180deg, rgba(82, 232, 210, .08), rgba(82, 232, 210, .02)),
    var(--app-surface);
}

/* Modo claro */
html[data-app-theme="light"] .corban-org-legend span.gestor {
  color: #24642A;
  background: #ECF9EC;
  border-color: #B8E2B8;
}

html[data-app-theme="light"] .corban-org-legend span.supervisor {
  color: #0E6660;
  background: #E8FBF8;
  border-color: #AFE6DE;
}

html[data-app-theme="light"] .corban-org-legend span.colaborador {
  color: #4E46AE;
  background: #F0EDFF;
  border-color: #CEC7FA;
}

html[data-app-theme="light"] .corban-org-legend span.backoffice {
  color: #255B99;
  background: #EDF5FF;
  border-color: #C6DCF7;
}

html[data-app-theme="light"] .corban-org-legend span.financeiro {
  color: #8A6612;
  background: #FFF8E8;
  border-color: #F1DEAC;
}

html[data-app-theme="light"] .corban-org-person.gestor {
  background: linear-gradient(180deg, rgba(121, 240, 109, .085), rgba(121, 240, 109, .02) 58%), #FFFFFF;
  border-color: #A9DBA4;
  box-shadow: 0 2px 10px rgba(121, 240, 109, .06);
}

html[data-app-theme="light"] .corban-org-person.supervisor {
  background: linear-gradient(180deg, rgba(82, 232, 210, .09), rgba(82, 232, 210, .02) 58%), #FFFFFF;
  border-color: #9DDDD3;
  box-shadow: 0 2px 10px rgba(82, 232, 210, .06);
}

html[data-app-theme="light"] .corban-org-person.colaborador {
  background: linear-gradient(180deg, rgba(142, 124, 255, .085), rgba(142, 124, 255, .02) 58%), #FFFFFF;
  border-color: #C7BEFA;
  box-shadow: 0 2px 10px rgba(142, 124, 255, .06);
}

html[data-app-theme="light"] .corban-org-person.backoffice {
  background: linear-gradient(180deg, rgba(93, 169, 255, .09), rgba(93, 169, 255, .02) 58%), #FFFFFF;
  border-color: #BCD8F8;
  box-shadow: 0 2px 10px rgba(93, 169, 255, .06);
}

html[data-app-theme="light"] .corban-org-person.financeiro {
  background: linear-gradient(180deg, rgba(243, 201, 105, .11), rgba(243, 201, 105, .03) 58%), #FFFFFF;
  border-color: #E9D08C;
  box-shadow: 0 2px 10px rgba(243, 201, 105, .06);
}

html[data-app-theme="light"] .corban-org-person.gestor .corban-org-avatar {
  color: #24642A;
  background: #F0FBF0;
  border-color: #B8E2B8;
  box-shadow: none;
}

html[data-app-theme="light"] .corban-org-person.supervisor .corban-org-avatar {
  color: #0E6660;
  background: #ECFCF9;
  border-color: #AFE6DE;
  box-shadow: none;
}

html[data-app-theme="light"] .corban-org-person.colaborador .corban-org-avatar {
  color: #4E46AE;
  background: #F4F2FF;
  border-color: #CEC7FA;
  box-shadow: none;
}

html[data-app-theme="light"] .corban-org-person.backoffice .corban-org-avatar {
  color: #255B99;
  background: #F2F7FF;
  border-color: #C6DCF7;
  box-shadow: none;
}

html[data-app-theme="light"] .corban-org-person.financeiro .corban-org-avatar {
  color: #8A6612;
  background: #FFF9EA;
  border-color: #F1DEAC;
  box-shadow: none;
}

/* =====================================================================
   ORGANOGRAMA — CONTRASTE FORTE ENTRE PERFIS (V2)
   Gestor = verde | Supervisor = ciano | Colaborador = roxo
   ===================================================================== */

/* ---------- GESTOR ---------- */
.corban-org-person.gestor {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      90deg,
      rgba(124, 255, 107, .16) 0%,
      rgba(124, 255, 107, .065) 30%,
      rgba(124, 255, 107, .018) 70%
    ),
    var(--app-surface) !important;
  border: 1px solid rgba(124, 255, 107, .62) !important;
  box-shadow:
    0 0 0 1px rgba(124, 255, 107, .08),
    inset 0 0 22px rgba(124, 255, 107, .025) !important;
}

.corban-org-person.gestor::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 4px !important;
  border-radius: 0 999px 999px 0 !important;
  background: #7CFF6B !important;
  box-shadow: 0 0 14px rgba(124, 255, 107, .55) !important;
  pointer-events: none !important;
}

.corban-org-person.gestor strong {
  color: #B9FFA9 !important;
}

.corban-org-person.gestor .corban-org-avatar {
  color: #B9FFA9 !important;
  background: rgba(124, 255, 107, .16) !important;
  border-color: rgba(124, 255, 107, .58) !important;
  box-shadow:
    inset 0 0 14px rgba(124, 255, 107, .055),
    0 0 16px rgba(124, 255, 107, .10) !important;
}

/* ---------- SUPERVISOR ---------- */
.corban-org-person.supervisor {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      90deg,
      rgba(82, 232, 210, .17) 0%,
      rgba(82, 232, 210, .07) 30%,
      rgba(82, 232, 210, .018) 70%
    ),
    var(--app-surface) !important;
  border: 1px solid rgba(82, 232, 210, .66) !important;
  box-shadow:
    0 0 0 1px rgba(82, 232, 210, .08),
    inset 0 0 22px rgba(82, 232, 210, .026) !important;
}

.corban-org-person.supervisor::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 4px !important;
  border-radius: 0 999px 999px 0 !important;
  background: #52E8D2 !important;
  box-shadow: 0 0 14px rgba(82, 232, 210, .55) !important;
  pointer-events: none !important;
}

.corban-org-person.supervisor strong {
  color: #A5FFF1 !important;
}

.corban-org-person.supervisor .corban-org-avatar {
  color: #A5FFF1 !important;
  background: rgba(82, 232, 210, .16) !important;
  border-color: rgba(82, 232, 210, .58) !important;
  box-shadow:
    inset 0 0 14px rgba(82, 232, 210, .055),
    0 0 16px rgba(82, 232, 210, .10) !important;
}

/* ---------- COLABORADOR ---------- */
.corban-org-person.colaborador {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      90deg,
      rgba(142, 124, 255, .19) 0%,
      rgba(142, 124, 255, .075) 30%,
      rgba(142, 124, 255, .020) 70%
    ),
    var(--app-surface) !important;
  border: 1px solid rgba(142, 124, 255, .68) !important;
  box-shadow:
    0 0 0 1px rgba(142, 124, 255, .09),
    inset 0 0 22px rgba(142, 124, 255, .028) !important;
}

.corban-org-person.colaborador::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 4px !important;
  border-radius: 0 999px 999px 0 !important;
  background: #8E7CFF !important;
  box-shadow: 0 0 14px rgba(142, 124, 255, .56) !important;
  pointer-events: none !important;
}

.corban-org-person.colaborador strong {
  color: #CFC7FF !important;
}

.corban-org-person.colaborador .corban-org-avatar {
  color: #D8D1FF !important;
  background: rgba(142, 124, 255, .17) !important;
  border-color: rgba(142, 124, 255, .60) !important;
  box-shadow:
    inset 0 0 14px rgba(142, 124, 255, .06),
    0 0 16px rgba(142, 124, 255, .11) !important;
}

/* ---------- NÍVEIS ---------- */
.corban-org-manager-column {
  background:
    linear-gradient(180deg, rgba(124, 255, 107, .055), transparent 34%),
    var(--app-surface-2) !important;
  border-color:
    color-mix(in srgb, #7CFF6B 22%, var(--app-border)) !important;
}

.corban-org-supervisor-block {
  background:
    linear-gradient(
      180deg,
      rgba(82, 232, 210, .075),
      rgba(82, 232, 210, .018)
    ) !important;
  border: 1px solid rgba(82, 232, 210, .25) !important;
}

.corban-org-supervisor-block
.corban-org-drop[data-accepts*="COLABORADOR"] {
  background:
    linear-gradient(
      180deg,
      rgba(142, 124, 255, .050),
      rgba(142, 124, 255, .012)
    ) !important;
  border-color: rgba(142, 124, 255, .22) !important;
}

/* ---------- LEGENDA ---------- */
.corban-org-legend span {
  min-height: 25px !important;
  padding: 5px 10px !important;
  font-size: 7px !important;
  font-weight: 900 !important;
}

.corban-org-legend i {
  width: 7px !important;
  height: 7px !important;
}

.corban-org-legend .gestor {
  color: #B9FFA9 !important;
  background: rgba(124, 255, 107, .12) !important;
  border-color: rgba(124, 255, 107, .42) !important;
}

.corban-org-legend .supervisor {
  color: #A5FFF1 !important;
  background: rgba(82, 232, 210, .12) !important;
  border-color: rgba(82, 232, 210, .42) !important;
}

.corban-org-legend .colaborador {
  color: #CFC7FF !important;
  background: rgba(142, 124, 255, .13) !important;
  border-color: rgba(142, 124, 255, .43) !important;
}

.corban-org-legend .gestor i {
  background: #7CFF6B !important;
  box-shadow: 0 0 9px rgba(124, 255, 107, .60) !important;
}

.corban-org-legend .supervisor i {
  background: #52E8D2 !important;
  box-shadow: 0 0 9px rgba(82, 232, 210, .60) !important;
}

.corban-org-legend .colaborador i {
  background: #8E7CFF !important;
  box-shadow: 0 0 9px rgba(142, 124, 255, .60) !important;
}

/* =====================================================================
   LIGHT MODE — MESMA DIFERENCIAÇÃO, SEM FICAR LAVADO
   ===================================================================== */

html[data-app-theme="light"] .corban-org-person.gestor {
  background:
    linear-gradient(
      90deg,
      rgba(83, 181, 71, .16),
      rgba(83, 181, 71, .055) 45%,
      transparent 80%
    ),
    #FFFDF9 !important;
  border-color: #77B96E !important;
}

html[data-app-theme="light"] .corban-org-person.gestor::after {
  background: #4FA846 !important;
  box-shadow: none !important;
}

html[data-app-theme="light"] .corban-org-person.gestor strong {
  color: #276D2A !important;
}

html[data-app-theme="light"] .corban-org-person.supervisor {
  background:
    linear-gradient(
      90deg,
      rgba(30, 162, 148, .15),
      rgba(30, 162, 148, .05) 45%,
      transparent 80%
    ),
    #FFFDF9 !important;
  border-color: #6BC3B8 !important;
}

html[data-app-theme="light"] .corban-org-person.supervisor::after {
  background: #24998B !important;
  box-shadow: none !important;
}

html[data-app-theme="light"] .corban-org-person.supervisor strong {
  color: #116A61 !important;
}

html[data-app-theme="light"] .corban-org-person.colaborador {
  background:
    linear-gradient(
      90deg,
      rgba(105, 87, 210, .15),
      rgba(105, 87, 210, .055) 45%,
      transparent 80%
    ),
    #FFFDF9 !important;
  border-color: #9486D9 !important;
}

html[data-app-theme="light"] .corban-org-person.colaborador::after {
  background: #6A5BC8 !important;
  box-shadow: none !important;
}

html[data-app-theme="light"] .corban-org-person.colaborador strong {
  color: #5145A8 !important;
}

html[data-app-theme="light"] .corban-org-manager-column {
  background:
    linear-gradient(
      180deg,
      rgba(83, 181, 71, .075),
      transparent 36%
    ),
    #FBFAF7 !important;
  border-color: #C7D9C3 !important;
}

html[data-app-theme="light"] .corban-org-supervisor-block {
  background:
    linear-gradient(
      180deg,
      rgba(30, 162, 148, .075),
      rgba(30, 162, 148, .018)
    ) !important;
  border-color: #B8DCD7 !important;
}

html[data-app-theme="light"] .corban-org-legend .gestor {
  color: #276D2A !important;
  background: #EAF7E8 !important;
  border-color: #AED8AA !important;
}

html[data-app-theme="light"] .corban-org-legend .supervisor {
  color: #116A61 !important;
  background: #E8F8F5 !important;
  border-color: #AFE0D9 !important;
}

html[data-app-theme="light"] .corban-org-legend .colaborador {
  color: #5145A8 !important;
  background: #F0EDFF !important;
  border-color: #C8C0EF !important;
}

/* =====================================================================
   SIDEBAR V3 — RECOLHIDA PROPORCIONAL / PERFIL SEM INVADIR SCROLLBAR
   ===================================================================== */

/* Base geral um pouco mais refinada */
.app-view .sidebar {
  isolation: isolate !important;
}

.side-bottom {
  flex: 0 0 auto !important;
}

/* Navegação: cria um respiro real antes da área do perfil. */
#master-sidebar-nav {
  margin-bottom: 10px !important;
}

/* Scrollbar da navegação mais discreta. */
#master-sidebar-nav {
  scrollbar-width: thin !important;
  scrollbar-color:
    color-mix(in srgb, var(--app-mint) 24%, transparent)
    transparent !important;
}

#master-sidebar-nav::-webkit-scrollbar {
  width: 3px !important;
}

#master-sidebar-nav::-webkit-scrollbar-thumb {
  background:
    color-mix(
      in srgb,
      var(--app-mint) 28%,
      transparent
    ) !important;
  border-radius: 999px !important;
}


/* =====================================================================
   ESTADO RECOLHIDO
   ===================================================================== */

.app-view.sidebar-collapsed {
  --sidebar-width: 82px !important;
}

.sidebar-collapsed .sidebar {
  position: relative !important;

  width: 82px !important;

  padding:
    15px
    10px
    14px !important;

  overflow: hidden !important;
}

/*
  O cabeçalho recolhido deixa de empilhar "caixas".
  Símbolo, expandir e tema passam a ter posições próprias.
*/
.sidebar-collapsed .sidebar-header {
  position: relative !important;

  min-height: 104px !important;
  height: 104px !important;

  display: block !important;

  padding: 0 !important;
  margin: 0 !important;
}

.sidebar-collapsed .side-brand {
  position: absolute !important;

  top: 0 !important;
  left: 50% !important;

  width: 38px !important;

  justify-content: center !important;

  transform: translateX(-50%) !important;
}

.sidebar-collapsed .side-brand-symbol {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;

  border-radius: 12px !important;
}

/*
  CONTROLE DE EXPANDIR
  Pequeno, discreto e no topo direito, como indicado no print.
*/
.sidebar-collapsed .sidebar-header-controls {
  position: static !important;

  width: 100% !important;
  height: 100% !important;

  display: block !important;

  margin: 0 !important;
}

.sidebar-collapsed .sidebar-toggle {
  position: absolute !important;

  top: 7px !important;
  right: -1px !important;

  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
  min-height: 19px !important;

  padding: 0 !important;

  color:
    color-mix(
      in srgb,
      var(--app-muted) 76%,
      transparent
    ) !important;

  background:
    color-mix(
      in srgb,
      var(--app-control) 46%,
      transparent
    ) !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 72%,
      transparent
    ) !important;

  border-radius: 6px !important;

  box-shadow: none !important;

  opacity: .72 !important;

  z-index: 4 !important;
}

.sidebar-collapsed .sidebar-toggle:hover {
  opacity: 1 !important;

  color: var(--app-mint) !important;

  background:
    color-mix(
      in srgb,
      var(--app-mint) 6%,
      var(--app-control)
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 32%,
      var(--app-border)
    ) !important;

  transform: none !important;
}

/* Ícone do botão fica realmente pequeno. */
.sidebar-collapsed .sidebar-toggle-glyph {
  width: 9px !important;
  height: 8px !important;
}

.sidebar-collapsed .sidebar-toggle-glyph::before {
  border-width: 1px !important;
  border-radius: 2.5px !important;
}

.sidebar-collapsed .sidebar-toggle-glyph i:first-child {
  left: 3px !important;
  top: 1.5px !important;
  bottom: 1.5px !important;
}

.sidebar-collapsed .sidebar-toggle-glyph i:last-child {
  right: 1.5px !important;

  width: 3px !important;
  height: 3px !important;

  border-left-width: 1px !important;
  border-bottom-width: 1px !important;
}

/* Tema fica abaixo do símbolo, independente do botão expandir. */
.sidebar-collapsed .sidebar-theme-toggle.theme-toggle {
  position: absolute !important;

  top: 55px !important;
  left: 50% !important;

  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;

  margin: 0 !important;

  transform: translateX(-50%) !important;
}

.sidebar-collapsed .sidebar-theme-toggle.theme-toggle:hover {
  transform:
    translateX(-50%)
    scale(1.08) !important;
}


/* =====================================================================
   NAVEGAÇÃO RECOLHIDA
   ===================================================================== */

.sidebar-collapsed #master-sidebar-nav,
.sidebar-collapsed #platform-sidebar-nav {
  width: 100% !important;

  min-height: 0 !important;

  padding:
    0
    7px
    5px
    0 !important;

  margin:
    3px
    -3px
    9px
    0 !important;

  gap: 5px !important;
}

.sidebar-collapsed .app-view .nav,
.app-view.sidebar-collapsed .nav {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;

  height: 48px !important;
  min-height: 48px !important;

  margin:
    0
    auto !important;

  padding: 0 !important;

  justify-content: center !important;

  border-radius: 13px !important;
}

.sidebar-collapsed .nav-icon {
  width: 20px !important;
  height: 20px !important;
  flex-basis: 20px !important;
}

.sidebar-collapsed .app-view .nav.active,
.app-view.sidebar-collapsed .nav.active {
  box-shadow:
    inset 0 0 16px
      color-mix(
        in srgb,
        var(--app-accent) 4%,
        transparent
      ),
    0 0 14px
      color-mix(
        in srgb,
        var(--app-accent) 3%,
        transparent
      ) !important;
}

/* O marcador lateral não precisa competir com o ícone. */
.sidebar-collapsed .app-view .nav.active::before,
.app-view.sidebar-collapsed .nav.active::before {
  left: 3px !important;

  top: 14px !important;
  bottom: 14px !important;

  width: 2px !important;
}


/* =====================================================================
   PERFIL / RODAPÉ RECOLHIDO
   ===================================================================== */

/*
  Rodapé ganha largura própria menor que a sidebar.
  Assim a foto nunca encosta na faixa visual da scrollbar.
*/
.sidebar-collapsed .side-bottom {
  width: 56px !important;

  margin:
    auto
    auto
    0 !important;

  gap: 8px !important;
}

/* Card do perfil compacto. */
.sidebar-collapsed .app-view .profile-chip,
.sidebar-collapsed .profile-chip {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;

  min-height: 56px !important;
  height: 56px !important;

  padding: 6px !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  border-radius: 14px !important;

  box-sizing: border-box !important;
}

/* Foto reduzida e totalmente dentro do card. */
.sidebar-collapsed .app-view .profile-sidebar-avatar,
.sidebar-collapsed .profile-sidebar-avatar {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  flex:
    0
    0
    40px !important;

  margin: 0 !important;

  border-radius: 10px !important;

  overflow: hidden !important;
}

/* A imagem nunca pode extrapolar o avatar. */
.sidebar-collapsed .profile-sidebar-avatar .avatar-image,
.sidebar-collapsed .profile-sidebar-avatar img {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: cover !important;

  border-radius: inherit !important;
}

/* Nenhum resíduo do botão circular do perfil no modo recolhido. */
.sidebar-collapsed .app-view .profile-chip::after,
.sidebar-collapsed .profile-chip::after {
  content: none !important;
  display: none !important;
}

/* Sair acompanha a mesma largura do perfil. */
.sidebar-collapsed .logout-button {
  position: relative !important;

  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;

  min-height: 44px !important;
  height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-content: center !important;

  border-radius: 12px !important;
}

.sidebar-collapsed .logout-icon {
  width: 17px !important;
  height: 17px !important;
}


/* =====================================================================
   EXPANDIDA — PEQUENO REFINAMENTO PARA HARMONIZAR COM A NOVA RECOLHIDA
   ===================================================================== */

.app-view:not(.sidebar-collapsed) .sidebar-toggle {
  width: 29px !important;
  min-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;

  border-radius: 9px !important;
}

.app-view:not(.sidebar-collapsed) .sidebar-toggle-glyph {
  width: 13px !important;
  height: 11px !important;
}

.app-view:not(.sidebar-collapsed) .side-bottom {
  padding-top: 4px !important;
}

.app-view:not(.sidebar-collapsed) .profile-chip {
  overflow: hidden !important;
}


/* =====================================================================
   TEMAS
   ===================================================================== */

html[data-app-theme="dark"]
.sidebar-collapsed .sidebar-toggle {
  color: #819087 !important;

  background: rgba(23, 28, 37, .58) !important;

  border-color: rgba(111, 126, 145, .18) !important;
}

html[data-app-theme="dark"]
.sidebar-collapsed .sidebar-toggle:hover {
  color: #59E7C0 !important;

  background: rgba(89, 231, 192, .055) !important;

  border-color: rgba(89, 231, 192, .25) !important;
}

html[data-app-theme="light"]
.sidebar-collapsed .sidebar-toggle {
  color: #69716B !important;

  background: rgba(255, 253, 249, .76) !important;

  border-color: #D8D5CC !important;
}

html[data-app-theme="light"]
.sidebar-collapsed .sidebar-toggle:hover {
  color: #17755F !important;

  background: #FFFDF9 !important;

  border-color: #BFD6C7 !important;
}


/* =====================================================================
   TELAS MAIS BAIXAS
   Evita que perfil/sair sejam esmagados quando há pouco espaço vertical.
   ===================================================================== */

@media (max-height: 720px) and (min-width: 681px) {
  .sidebar-collapsed .sidebar-header {
    min-height: 94px !important;
    height: 94px !important;
  }

  .sidebar-collapsed .sidebar-theme-toggle.theme-toggle {
    top: 51px !important;
  }

  .sidebar-collapsed .app-view .nav,
  .app-view.sidebar-collapsed .nav {
    height: 45px !important;
    min-height: 45px !important;
  }

  .sidebar-collapsed .side-bottom {
    gap: 6px !important;
  }
}

/* =====================================================================
   SIDEBAR RECOLHIDA — CORREÇÃO DEFINITIVA V4
   Usa #app-view.sidebar-collapsed para vencer as regras antigas.
   ===================================================================== */

/* Barra realmente compacta. */
#app-view.sidebar-collapsed {
  --sidebar-width: 76px !important;
}

#app-view.sidebar-collapsed #app-sidebar {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;

  padding:
    13px
    8px
    12px !important;

  overflow: hidden !important;
}

/* ---------------------------------------------------------
   TOPO
   --------------------------------------------------------- */

#app-view.sidebar-collapsed .sidebar-header {
  position: relative !important;

  min-height: 90px !important;
  height: 90px !important;

  display: block !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* Símbolo centralizado e preservado. */
#app-view.sidebar-collapsed .side-brand {
  position: absolute !important;

  top: 0 !important;
  left: 50% !important;

  width: 36px !important;
  height: 36px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  transform: translateX(-50%) !important;
}

#app-view.sidebar-collapsed .side-brand-symbol {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;

  margin: 0 !important;

  border-radius: 12px !important;
}

/*
  BOTÃO DE EXPANDIR:
  não é mais um quadrado grande.
  Fica como um pequeno controle quase "flutuante" ao lado do símbolo.
*/
#app-view.sidebar-collapsed .sidebar-header-controls {
  position: static !important;

  width: auto !important;
  height: auto !important;

  display: contents !important;

  margin: 0 !important;
  padding: 0 !important;
}

#app-view.sidebar-collapsed #sidebar-toggle {
  position: absolute !important;

  top: 9px !important;
  right: 0 !important;

  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;

  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: grid !important;
  place-items: center !important;

  color: #829087 !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 5px !important;

  box-shadow: none !important;

  opacity: .58 !important;

  z-index: 10 !important;

  transform: none !important;
}

#app-view.sidebar-collapsed #sidebar-toggle:hover {
  color: #59E7C0 !important;

  background:
    rgba(89, 231, 192, .065) !important;

  opacity: 1 !important;

  transform: none !important;
}

#app-view.sidebar-collapsed #sidebar-toggle .sidebar-toggle-glyph {
  width: 10px !important;
  height: 9px !important;
}

#app-view.sidebar-collapsed #sidebar-toggle .sidebar-toggle-glyph::before {
  inset: 1px !important;

  border-width: 1px !important;
  border-radius: 2.5px !important;
}

#app-view.sidebar-collapsed #sidebar-toggle .sidebar-toggle-glyph i:first-child {
  left: 4px !important;
  top: 2px !important;
  bottom: 2px !important;

  width: 1px !important;
}

#app-view.sidebar-collapsed #sidebar-toggle .sidebar-toggle-glyph i:last-child {
  right: 2px !important;

  width: 3px !important;
  height: 3px !important;

  border-left-width: 1px !important;
  border-bottom-width: 1px !important;
}

/* Tema fica sozinho abaixo do símbolo. */
#app-view.sidebar-collapsed #theme-toggle {
  position: absolute !important;

  top: 51px !important;
  left: 50% !important;

  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;

  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translateX(-50%) !important;
}

#app-view.sidebar-collapsed #theme-toggle:hover {
  transform:
    translateX(-50%)
    scale(1.06) !important;
}


/* ---------------------------------------------------------
   NAVEGAÇÃO
   --------------------------------------------------------- */

/*
  Ao recolher, a navegação continua rolável pelo wheel/touch,
  mas a barra VISUAL some. Assim ela nunca passa sobre o perfil.
*/
#app-view.sidebar-collapsed #master-sidebar-nav,
#app-view.sidebar-collapsed #platform-sidebar-nav {
  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  scrollbar-width: none !important;

  padding:
    1px
    0
    6px !important;

  margin:
    2px
    0
    9px !important;

  gap: 5px !important;

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      #000 7px,
      #000 calc(100% - 7px),
      transparent 100%
    ) !important;
}

#app-view.sidebar-collapsed #master-sidebar-nav::-webkit-scrollbar,
#app-view.sidebar-collapsed #platform-sidebar-nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;

  display: none !important;
}

#app-view.sidebar-collapsed .nav {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;

  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;

  margin:
    0
    auto !important;

  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;
}

#app-view.sidebar-collapsed .nav-icon {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  flex-basis: 19px !important;
}

#app-view.sidebar-collapsed .nav.active {
  background:
    linear-gradient(
      145deg,
      rgba(124, 255, 107, .095),
      rgba(89, 231, 192, .028)
    ) !important;

  border-color:
    rgba(124, 255, 107, .31) !important;

  box-shadow:
    inset 0 0 14px rgba(124, 255, 107, .022),
    0 0 12px rgba(124, 255, 107, .025) !important;
}

#app-view.sidebar-collapsed .nav.active::before {
  left: 2px !important;

  top: 13px !important;
  bottom: 13px !important;

  width: 2px !important;
}


/* ---------------------------------------------------------
   PERFIL + SAIR
   --------------------------------------------------------- */

#app-view.sidebar-collapsed .side-bottom {
  position: relative !important;

  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;

  margin:
    auto
    auto
    0 !important;

  padding-top: 10px !important;

  display: grid !important;
  gap: 7px !important;
}

/* Pequena separação visual do rodapé. */
#app-view.sidebar-collapsed .side-bottom::before {
  content: "" !important;

  position: absolute !important;

  top: 0 !important;
  left: 8px !important;
  right: 8px !important;

  height: 1px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(124, 255, 107, .17),
      transparent
    ) !important;
}

/* Card do perfil definitivamente menor. */
#app-view.sidebar-collapsed #profile-button.profile-chip {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;

  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;

  padding: 6px !important;
  margin: 0 !important;

  display: grid !important;
  place-items: center !important;

  gap: 0 !important;

  overflow: hidden !important;

  border-radius: 13px !important;

  box-sizing: border-box !important;
}

/* Nenhuma seta dentro do perfil quando recolhido. */
#app-view.sidebar-collapsed #profile-button.profile-chip::after {
  content: none !important;

  display: none !important;
}

/* Foto 36px: não ocupa o card inteiro e nunca vaza. */
#app-view.sidebar-collapsed #admin-avatar.profile-sidebar-avatar {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;

  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;

  flex:
    0
    0
    36px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border-radius: 9px !important;

  align-self: center !important;
}

#app-view.sidebar-collapsed #admin-avatar-image {
  display: block;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: inherit !important;
}

/* Se a imagem estiver oculta, fallback também centralizado. */
#app-view.sidebar-collapsed #admin-avatar-fallback {
  display: grid;
  place-items: center;

  width: 100% !important;
  height: 100% !important;
}

/* Sair proporcional ao perfil. */
#app-view.sidebar-collapsed #logout-button {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-content: center !important;

  border-radius: 11px !important;
}

#app-view.sidebar-collapsed #logout-button .logout-icon {
  width: 16px !important;
  height: 16px !important;
}


/* ---------------------------------------------------------
   LIGHT
   --------------------------------------------------------- */

html[data-app-theme="light"]
#app-view.sidebar-collapsed .nav.active {
  background:
    linear-gradient(
      145deg,
      #EDF8EF,
      #F7F5EF
    ) !important;

  border-color:
    #B9DDBE !important;
}

html[data-app-theme="light"]
#app-view.sidebar-collapsed .side-bottom::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      #D8D5CC,
      transparent
    ) !important;
}

html[data-app-theme="light"]
#app-view.sidebar-collapsed #sidebar-toggle {
  color: #6C756E !important;
}

html[data-app-theme="light"]
#app-view.sidebar-collapsed #sidebar-toggle:hover {
  color: #17755F !important;

  background:
    rgba(23, 117, 95, .06) !important;
}


/* ---------------------------------------------------------
   BAIXA ALTURA
   --------------------------------------------------------- */

@media (max-height: 720px) and (min-width: 681px) {
  #app-view.sidebar-collapsed .sidebar-header {
    min-height: 82px !important;
    height: 82px !important;
  }

  #app-view.sidebar-collapsed #theme-toggle {
    top: 47px !important;
  }

  #app-view.sidebar-collapsed .nav {
    height: 41px !important;
    min-height: 41px !important;
    max-height: 41px !important;
  }

  #app-view.sidebar-collapsed .side-bottom {
    padding-top: 7px !important;
    gap: 5px !important;
  }
}

/* =====================================================================
   SIDEBAR — BOTÃO EXPANDIR MAIS JUNTO À BORDA
   ===================================================================== */

#app-view.sidebar-collapsed #sidebar-toggle {
  /*
    A sidebar tem 8px de padding lateral.
    right:-8px leva o controle até a borda real da sidebar.
  */
  right: -8px !important;
}

/* =====================================================================
   RELATÓRIOS — TELA INICIAL
   Apenas os quatro módulos. Conteúdo será criado individualmente depois.
   ===================================================================== */

.reports-launcher {
  padding: 38px 42px 40px !important;
}

.reports-launch-grid {
  width: min(100%, 1040px);

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;

  margin: 0 auto;
}

.reports-launch-card {
  --reports-card-accent: var(--app-accent);

  position: relative;

  min-height: 112px;

  padding: 18px 20px;

  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 16px;

  overflow: hidden;

  color: var(--app-text);
  text-align: left;

  background:
    var(--app-surface);

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

  border-radius: 17px;

  cursor: pointer;

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

.reports-launch-card::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0;

  background:
    linear-gradient(
      110deg,
      color-mix(
        in srgb,
        var(--reports-card-accent) 8%,
        transparent
      ),
      transparent 48%
    );

  transition: opacity .16s ease;
}

.reports-launch-card:hover {
  transform: translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--reports-card-accent) 42%,
      var(--app-border)
    );

  box-shadow:
    0 15px 36px
    rgba(0, 0, 0, .11);
}

.reports-launch-card:hover::before {
  opacity: 1;
}

.reports-launch-icon {
  position: relative;
  z-index: 1;

  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  color:
    var(--reports-card-accent);

  background:
    color-mix(
      in srgb,
      var(--reports-card-accent) 6%,
      var(--app-control)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--reports-card-accent) 30%,
      var(--app-border)
    );

  border-radius: 14px;

  box-shadow:
    inset 0 0 15px
    color-mix(
      in srgb,
      var(--reports-card-accent) 3%,
      transparent
    );
}

.reports-launch-icon svg {
  width: 24px;
  height: 24px;

  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reports-launch-copy {
  position: relative;
  z-index: 1;

  min-width: 0;
}

.reports-launch-copy strong {
  display: block;

  color: var(--app-text-strong);

  font-size: 14px;
  font-weight: 850;
  line-height: 1.15;

  letter-spacing: .005em;
}

/* Cada área tem uma identidade própria, sem exagerar nas cores. */
.reports-launch-card-sale {
  --reports-card-accent: #7CFF6B;
}

.reports-launch-card-cip {
  --reports-card-accent: #59E7C0;
}

.reports-launch-card-detail {
  --reports-card-accent: #8E7CFF;
}

.reports-launch-card-projection {
  --reports-card-accent: #F0BE5B;
}


/* Modo claro */
html[data-app-theme="light"]
.reports-launch-card {
  background:
    #FBFAF7;

  border-color:
    #D8D5CC;

  box-shadow:
    0 8px 24px
    rgba(76, 68, 56, .035);
}

html[data-app-theme="light"]
.reports-launch-card:hover {
  background:
    #FFFDF9;
}


/* Responsividade */
@media (max-width: 900px) {
  .reports-launcher {
    padding:
      24px
      22px
      34px !important;
  }

  .reports-launch-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   RELATÓRIOS — SUPERFÍCIE CONTÍNUA
   Remove o corte de dois tons e usa um degradê uniforme na tela inteira.
   ===================================================================== */

#section-reports.reports-launcher {
  min-height: 100vh !important;

  padding: 38px 42px 54px !important;

  background:
    radial-gradient(
      circle at 18% -8%,
      rgba(89, 231, 192, .035),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 8%,
      rgba(142, 124, 255, .035),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #11161F 0%,
      #0F141C 42%,
      #0D1219 100%
    ) !important;
}

html[data-app-theme="light"]
#section-reports.reports-launcher {
  background:
    radial-gradient(
      circle at 12% -5%,
      rgba(63, 142, 76, .045),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #F7F5EF 0%,
      #F4F2EC 46%,
      #F1EFE9 100%
    ) !important;
}

/* =====================================================================
   DATA VENDA — WORKSPACE
   ===================================================================== */

.data-sale-workspace {
  width: min(100%, 1210px);
  margin: 0 auto;
}

.data-sale-head {
  min-height: 78px;

  margin-bottom: 18px;
  padding: 10px 12px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 78%,
      transparent
    );
}

.data-sale-head-left {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 13px;
}

.data-sale-back {
  width: 38px;
  min-width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  color: var(--app-muted);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 11px;

  transition:
    color .15s ease,
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.data-sale-back:hover {
  color: var(--app-mint);
  background: var(--app-control-hover);
  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 34%,
      var(--app-border)
    );
  transform: translateX(-1px);
}

.data-sale-back svg,
.data-sale-date-step svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.data-sale-head-left small {
  display: block;
  margin-bottom: 4px;

  color: var(--app-mint);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .17em;
}

.data-sale-head-left h2 {
  margin: 0;

  color: var(--app-text-strong);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -.025em;
}

.data-sale-head-left p {
  margin: 4px 0 0;

  color: var(--app-muted);
  font-size: 9px;
}

.data-sale-date-tools {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.data-sale-date-field {
  width: 160px;

  display: grid;
  gap: 5px;
}

.data-sale-date-field span {
  padding-left: 2px;

  color: var(--app-muted-2);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .10em;
}

.data-sale-date-field input {
  width: 100%;
  height: 38px;

  padding: 0 11px;

  color: var(--app-text-strong);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 10px;

  outline: none;
}

.data-sale-date-field input:focus {
  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 48%,
      var(--app-border)
    );

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--app-mint) 7%,
      transparent
    );
}

.data-sale-date-step,
.data-sale-today {
  height: 38px;

  color: var(--app-muted);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 10px;
}

.data-sale-date-step {
  width: 38px;
  display: grid;
  place-items: center;
}

.data-sale-today {
  padding: 0 13px;

  color: var(--app-mint);
  font-size: 8px;
  font-weight: 850;
}

.data-sale-date-step:hover,
.data-sale-today:hover {
  color: var(--app-mint);
  background: var(--app-control-hover);
  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 32%,
      var(--app-border)
    );
}

/* Métricas */
.data-sale-metrics {
  margin-bottom: 15px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.data-sale-metric {
  --data-sale-metric-color: var(--app-mint);

  position: relative;

  min-height: 94px;
  padding: 15px 16px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--data-sale-metric-color) 5%,
        var(--app-surface)
      ),
      var(--app-surface)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--data-sale-metric-color) 19%,
      var(--app-border)
    );

  border-radius: 15px;
}

.data-sale-metric::before {
  content: "";

  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;

  width: 2px;

  background: var(--data-sale-metric-color);
  border-radius: 0 999px 999px 0;

  opacity: .88;
}

.data-sale-metric small {
  display: block;

  color: var(--app-muted-2);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.data-sale-metric strong {
  display: block;
  margin-top: 8px;

  color: var(--app-text-strong);
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -.025em;
}

.data-sale-metric span {
  display: block;
  margin-top: 4px;

  color: var(--app-muted);
  font-size: 8px;
}

/* Painéis */
.data-sale-panel {
  margin-top: 13px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--app-surface) 94%,
        transparent
      ),
      var(--app-surface)
    );

  border: 1px solid var(--app-border);
  border-radius: 17px;

  box-shadow:
    0 14px 34px
    rgba(0, 0, 0, .07);
}

.data-sale-panel-head {
  min-height: 72px;

  padding: 15px 17px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  background:
    linear-gradient(
      90deg,
      rgba(89, 231, 192, .035),
      transparent 34%
    );

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

.data-sale-panel-head small {
  display: block;
  margin-bottom: 4px;

  color: var(--app-mint);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .13em;
}

.data-sale-panel-head h3 {
  margin: 0;

  color: var(--app-text-strong);
  font-size: 15px;
  font-weight: 850;
}

.data-sale-panel-head p {
  margin: 4px 0 0;

  color: var(--app-muted);
  font-size: 8.5px;
}

.data-sale-panel-date,
.data-sale-detail-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 27px;
  padding: 0 9px;

  color: var(--app-text);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 8px;

  font-size: 7.5px;
  font-weight: 800;
}

.data-sale-panel-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.data-sale-detail-count {
  color: var(--app-mint);
}

/* Tabelas */
.data-sale-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.data-sale-table {
  width: 100%;
  min-width: 760px;

  border-collapse: separate;
  border-spacing: 0;
}

.data-sale-table th,
.data-sale-table td {
  padding: 11px 13px;

  vertical-align: middle;

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

.data-sale-table th {
  color: var(--app-muted-2);
  background:
    color-mix(
      in srgb,
      var(--app-surface-2) 88%,
      transparent
    );

  font-size: 6.6px;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-sale-table td {
  color: var(--app-text);
  font-size: 8.8px;
  font-weight: 620;
}

.data-sale-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-sale-table tbody tr {
  transition: background .12s ease;
}

.data-sale-detail-table tbody tr {
  cursor: pointer;
}

.data-sale-table tbody tr:hover td {
  background:
    color-mix(
      in srgb,
      var(--app-mint) 3.4%,
      var(--app-table-hover)
    );
}

.data-sale-consultants-table th:not(:first-child),
.data-sale-consultants-table td:not(:first-child) {
  text-align: right;
}

.data-sale-consultant-cell {
  min-width: 170px;
}

.data-sale-consultant-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-sale-consultant-initial {
  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  flex: 0 0 24px;

  color: var(--app-mint);
  background: rgba(89, 231, 192, .07);
  border: 1px solid rgba(89, 231, 192, .19);
  border-radius: 8px;

  font-size: 7px;
  font-weight: 900;
}

.data-sale-consultant-name strong {
  color: var(--app-text-strong);
  font-size: 9px;
}

.data-sale-money-positive {
  color: #74EEA9 !important;
  font-weight: 850 !important;
}

.data-sale-money-warning {
  color: #F3C969 !important;
  font-weight: 850 !important;
}

.data-sale-money-negative {
  color: #FF7B8D !important;
  font-weight: 850 !important;
}

.data-sale-money-muted {
  color: var(--app-muted) !important;
}

.data-sale-consultants-table tfoot td {
  padding: 12px 13px;

  color: var(--app-text-strong);
  background:
    color-mix(
      in srgb,
      var(--app-surface-3) 76%,
      transparent
    );

  border-top: 1px solid var(--app-border-strong);
  border-bottom: 0;

  font-size: 8.7px;
  font-weight: 900;
}

.data-sale-consultants-table tfoot td:not(:first-child) {
  text-align: right;
}

.data-sale-detail-table {
  min-width: 1080px;
}

.data-sale-client {
  max-width: 220px;
  color: var(--app-text-strong) !important;
  font-weight: 760 !important;
}

.data-sale-cpf {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.data-sale-bank {
  min-width: 116px;
  white-space: nowrap;
}

.data-sale-contract {
  min-width: 112px;
  white-space: nowrap;
  text-align: right;

  color: var(--app-text-strong) !important;
  font-weight: 780 !important;
  font-variant-numeric: tabular-nums;
}

.data-sale-unlocked {
  display: inline-grid;
  place-items: center;

  width: 23px;
  height: 23px;

  border-radius: 8px;

  font-size: 11px;
  font-weight: 900;
}

.data-sale-unlocked.is-yes {
  color: #69EFA4;
  background: rgba(105, 239, 164, .07);
  border: 1px solid rgba(105, 239, 164, .15);
}

.data-sale-unlocked.is-no {
  color: #FF7487;
  background: rgba(255, 116, 135, .07);
  border: 1px solid rgba(255, 116, 135, .14);
}

.data-sale-unlocked.is-na {
  color: var(--app-muted);
  background: var(--app-control);
  border: 1px solid var(--app-border);
}

.data-sale-phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  max-width: 210px;

  color: var(--phase-color);

  font-size: 8.2px;
  font-weight: 820;

  white-space: nowrap;
}

.data-sale-phase::before {
  content: "";

  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  background: var(--phase-color);
  border-radius: 50%;

  box-shadow:
    0 0 8px
    color-mix(
      in srgb,
      var(--phase-color) 36%,
      transparent
    );
}

.data-sale-phase > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-sale-loading {
  min-height: 300px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;

  color: var(--app-muted);
}

.data-sale-loading span {
  width: 28px;
  height: 28px;

  border: 2px solid var(--app-border);
  border-top-color: var(--app-mint);
  border-radius: 50%;

  animation: data-sale-spin .75s linear infinite;
}

.data-sale-loading strong {
  font-size: 9px;
}

@keyframes data-sale-spin {
  to { transform: rotate(360deg); }
}

.data-sale-empty {
  min-height: 225px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  color: var(--app-muted);
}

.data-sale-empty-icon {
  width: 38px;
  height: 38px;

  margin-bottom: 3px;

  display: grid;
  place-items: center;

  color: var(--app-muted-2);
  background: var(--app-control);
  border: 1px solid var(--app-border);
  border-radius: 12px;
}

.data-sale-empty-icon svg {
  width: 18px;
  height: 18px;

  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.data-sale-empty strong {
  color: var(--app-text-strong);
  font-size: 10px;
}

.data-sale-empty small {
  font-size: 8px;
}

/* Light mode */
html[data-app-theme="light"] .data-sale-panel,
html[data-app-theme="light"] .data-sale-metric {
  box-shadow:
    0 10px 28px
    rgba(76, 68, 56, .045);
}

html[data-app-theme="light"] .data-sale-table th {
  background: #F0EEE8;
}

html[data-app-theme="light"] .data-sale-table tbody tr:hover td {
  background: #F4F2EC;
}

/* Responsive */
@media (max-width: 1060px) {
  .data-sale-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .data-sale-date-tools {
    width: 100%;
  }

  .data-sale-date-field {
    flex: 1;
  }

  .data-sale-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  #section-reports.reports-launcher {
    padding: 22px 16px 40px !important;
  }

  .data-sale-metrics {
    grid-template-columns: 1fr;
  }

  .data-sale-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =====================================================================
   DATA VENDA — AVATARES REAIS DOS CONSULTORES
   ===================================================================== */

.data-sale-consultant-avatar {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px !important;

  border-radius: 9px !important;

  background:
    color-mix(
      in srgb,
      var(--app-mint) 7%,
      var(--app-control)
    ) !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-mint) 28%,
      var(--app-border)
    ) !important;

  overflow: hidden !important;
}

.data-sale-consultant-avatar .employee-photo-fallback {
  font-size: 7px !important;
  font-weight: 900 !important;
}

.data-sale-consultant-avatar .employee-photo-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.data-sale-detail-consultant-cell {
  min-width: 170px;
}

.data-sale-detail-consultant {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
}

.data-sale-detail-consultant > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sem os textos auxiliares, reduz o espaço vertical dos cabeçalhos. */
.data-sale-head-left > div,
.data-sale-panel-head > div:first-child {
  display: grid;
  align-content: center;
  gap: 3px;
}

/* =====================================================================
   DATA VENDA V3 — RELATÓRIO OPERACIONAL PARA PRINT
   Composição inspirada na planilha original, mas no padrão Corban.
   ===================================================================== */

#section-reports.reports-launcher.is-data-sale-open {
  padding:
    7px
    22px
    30px !important;
}

#section-reports.reports-launcher.is-data-sale-open {
  background:
    linear-gradient(
      180deg,
      #11161F 0%,
      #10151D 48%,
      #0F141C 100%
    ) !important;
}

html[data-app-theme="light"]
#section-reports.reports-launcher.is-data-sale-open {
  background:
    linear-gradient(
      180deg,
      #F7F5EF 0%,
      #F5F3ED 48%,
      #F3F1EB 100%
    ) !important;
}

.data-sale-workspace {
  width: min(100%, 1260px) !important;
}

.data-sale-head {
  min-height: 50px !important;

  margin-bottom: 7px !important;

  padding:
    4px
    2px
    7px !important;

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 62%,
      transparent
    ) !important;
}

.data-sale-head-left {
  gap: 9px !important;
}

.data-sale-back {
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;

  border-radius: 9px !important;
}

.data-sale-head-left h2 {
  font-size: 15px !important;
  font-weight: 840 !important;
}

.data-sale-date-tools {
  align-items: center !important;
}

.data-sale-date-field {
  width: 148px !important;
  gap: 2px !important;
}

.data-sale-date-field span {
  font-size: 5.8px !important;
}

.data-sale-date-field input,
.data-sale-date-step,
.data-sale-today {
  height: 32px !important;
}

.data-sale-date-step {
  width: 32px !important;
}

.data-sale-today {
  padding:
    0
    11px !important;
}

.data-sale-content {
  padding-top: 1px;
}

/*
  Os antigos cards de KPI não fazem parte do relatório de Data Venda.
*/
.data-sale-metrics {
  display: none !important;
}


/* ---------------------------------------------------------------------
   PARCIAL DAS VENDAS
   --------------------------------------------------------------------- */

.data-sale-sheet {
  overflow: hidden;

  background:
    color-mix(
      in srgb,
      var(--app-surface) 96%,
      transparent
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 88%,
      transparent
    );

  border-radius: 12px;

  box-shadow:
    0 10px 28px
    rgba(0, 0, 0, .055);
}

.data-sale-partial-sheet {
  width: min(100%, 690px);

  margin:
    4px
    auto
    15px;
}

.data-sale-partial-title {
  margin:
    0;

  padding:
    8px
    12px
    7px;

  color:
    var(--app-text-strong);

  text-align: center;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 20px;
  font-weight: 700;
  font-style: italic;

  letter-spacing:
    -.025em;

  background:
    color-mix(
      in srgb,
      var(--app-surface-2) 90%,
      transparent
    );

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

.data-sale-consultants-table {
  min-width: 660px !important;
}

.data-sale-consultants-table th,
.data-sale-consultants-table td {
  padding:
    6px
    8px !important;

  font-variant-numeric:
    tabular-nums;
}

.data-sale-consultants-table th {
  color:
    var(--app-text-strong) !important;

  background:
    color-mix(
      in srgb,
      var(--app-surface-3) 86%,
      transparent
    ) !important;

  font-size: 7.2px !important;
  font-weight: 900 !important;
  letter-spacing: .025em !important;

  border-bottom:
    1px solid
    var(--app-border-strong) !important;
}

.data-sale-consultants-table th:first-child,
.data-sale-consultants-table td:first-child {
  text-align: left !important;
}

.data-sale-consultants-table th:not(:first-child),
.data-sale-consultants-table td:not(:first-child) {
  text-align: center !important;
}

.data-sale-consultants-table td {
  font-size: 9px !important;
}

.data-sale-consultant-cell {
  min-width: 190px !important;
}

.data-sale-consultant-name {
  gap: 7px !important;
}

.data-sale-consultant-avatar {
  width: 25px !important;
  min-width: 25px !important;
  height: 25px !important;
  min-height: 25px !important;
  flex: 0 0 25px !important;

  border-radius: 7px !important;
}

.data-sale-consultant-name strong {
  font-size: 8.7px !important;
}

.data-sale-goal-cell {
  min-width: 135px;
}

.data-sale-goal-field {
  width: 118px;
  height: 29px;

  margin: 0 auto;

  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;

  overflow: hidden;

  color:
    var(--app-muted);

  background:
    color-mix(
      in srgb,
      var(--app-control) 92%,
      transparent
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 92%,
      transparent
    );

  border-radius: 7px;

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

.data-sale-goal-field:focus-within {
  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 43%,
      var(--app-border)
    );

  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(--app-mint) 6%,
      transparent
    );
}

.data-sale-goal-field > span {
  height: 100%;

  display: grid;
  place-items: center;

  color:
    var(--app-muted-2);

  background:
    color-mix(
      in srgb,
      var(--app-surface-3) 78%,
      transparent
    );

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

  font-size: 7px;
  font-weight: 800;
}

.data-sale-goal-input {
  width: 100%;
  min-width: 0;
  height: 100%;

  padding:
    0
    7px;

  color:
    var(--app-text-strong);

  background:
    transparent;

  border: 0;
  outline: 0;

  font: inherit;
  font-size: 8.5px;
  font-weight: 750;

  text-align: right;

  font-variant-numeric:
    tabular-nums;
}

.data-sale-money-progress {
  color: #75DCEC !important;
  font-weight: 850 !important;
}

.data-sale-consultants-table tfoot td {
  padding:
    7px
    8px !important;

  background:
    color-mix(
      in srgb,
      var(--app-surface-3) 92%,
      transparent
    ) !important;

  font-size: 9px !important;
}


/* ---------------------------------------------------------------------
   TABELA DETALHADA
   --------------------------------------------------------------------- */

.data-sale-details-sheet {
  width: 100%;

  margin-top: 0;
}

.data-sale-date-strip {
  min-height: 34px;

  display: grid;
  grid-template-columns:
    185px
    130px
    minmax(0, 1fr);
  align-items: stretch;

  border-bottom:
    1px solid
    var(--app-border-strong);
}

.data-sale-date-strip > span {
  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(--app-text-strong);

  background:
    color-mix(
      in srgb,
      var(--app-surface-3) 94%,
      transparent
    );

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

  font-size: 7.3px;
  font-weight: 900;
  letter-spacing: .025em;
}

.data-sale-date-strip > strong {
  display: flex;
  align-items: center;
  justify-content: center;

  color:
    #F3C969;

  background:
    color-mix(
      in srgb,
      var(--app-surface-2) 96%,
      transparent
    );

  font-size: 8px;
  font-weight: 900;

  font-variant-numeric:
    tabular-nums;
}

.data-sale-date-strip > small {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  padding-right: 12px;

  color:
    var(--app-muted);

  font-size: 7px;
  font-weight: 700;
}

.data-sale-detail-table th,
.data-sale-detail-table td {
  padding:
    6px
    9px !important;
}

.data-sale-detail-table th {
  color:
    var(--app-text-strong) !important;

  background:
    color-mix(
      in srgb,
      var(--app-surface-3) 88%,
      transparent
    ) !important;

  font-size: 6.9px !important;
  letter-spacing: .02em !important;

  text-align: center;
}

.data-sale-detail-table td {
  font-size: 8.5px !important;
}

.data-sale-detail-table tbody tr:nth-child(even) td {
  background:
    color-mix(
      in srgb,
      var(--app-surface-2) 34%,
      transparent
    );
}

.data-sale-detail-table tbody tr:hover td {
  background:
    color-mix(
      in srgb,
      var(--app-mint) 4.5%,
      var(--app-table-hover)
    ) !important;
}

.data-sale-client {
  min-width: 205px;
}

.data-sale-contract {
  text-align: center !important;
}

.data-sale-detail-consultant {
  gap: 6px !important;
}

.data-sale-details-sheet
.data-sale-consultant-avatar {
  width: 23px !important;
  min-width: 23px !important;
  height: 23px !important;
  min-height: 23px !important;
  flex: 0 0 23px !important;
}


/* ---------------------------------------------------------------------
   LIGHT
   --------------------------------------------------------------------- */

html[data-app-theme="light"]
.data-sale-sheet {
  background:
    rgba(255, 253, 249, .94);

  border-color:
    #D6D2C8;

  box-shadow:
    0 8px 24px
    rgba(76, 68, 56, .045);
}

html[data-app-theme="light"]
.data-sale-partial-title {
  background:
    #EFEEE8;

  border-color:
    #CFCBC1;
}

html[data-app-theme="light"]
.data-sale-consultants-table th,
html[data-app-theme="light"]
.data-sale-detail-table th,
html[data-app-theme="light"]
.data-sale-date-strip > span {
  background:
    #EAE8E1 !important;
}

html[data-app-theme="light"]
.data-sale-date-strip > strong {
  background:
    #F7F5EF;

  color:
    #9B7110;
}

html[data-app-theme="light"]
.data-sale-goal-field {
  background:
    #FFFDF9;

  border-color:
    #CDC9BF;
}

html[data-app-theme="light"]
.data-sale-goal-field > span {
  background:
    #EFEEE8;

  border-color:
    #D7D3C9;
}


/* ---------------------------------------------------------------------
   PRINT / SCREENSHOT FRIENDLY
   --------------------------------------------------------------------- */

@media print {
  .data-sale-head,
  #app-sidebar {
    display: none !important;
  }

  #section-reports.reports-launcher.is-data-sale-open {
    padding: 0 !important;

    background: #FFFFFF !important;
  }

  .data-sale-workspace {
    width: 100% !important;
    max-width: none !important;
  }

  .data-sale-sheet {
    box-shadow: none !important;
  }
}


/* ---------------------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------------------- */

@media (max-width: 860px) {
  #section-reports.reports-launcher.is-data-sale-open {
    padding:
      7px
      12px
      24px !important;
  }

  .data-sale-partial-sheet {
    width: 100%;
  }

  .data-sale-date-strip {
    grid-template-columns:
      150px
      115px
      minmax(0, 1fr);
  }
}

/* =====================================================================
   DATA VENDA — OBJETIVO SALVO COMO TEXTO NORMAL
   ===================================================================== */

.data-sale-goal-value {
  display: inline-block;

  min-width: 92px;

  color:
    var(--app-text-strong);

  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;

  text-align: center;

  font-variant-numeric:
    tabular-nums;

  cursor: default;
  user-select: text;
}

.data-sale-goal-value.is-editable {
  /*
    Continua propositalmente sem ícone, borda ou fundo.
    O duplo clique é a ação de edição, mas visualmente ele permanece
    como um valor normal do relatório.
  */
  cursor: default;
}

.data-sale-goal-value.is-editable:active {
  opacity: .92;
}

html[data-app-theme="light"]
.data-sale-goal-value {
  color: #202722;
}

/* =====================================================================
   DATA VENDA V5 — PARTICIPANTES DO RELATÓRIO
   ===================================================================== */

.data-sale-partial-layout {
  width: min(100%, 990px);

  margin:
    4px
    auto
    15px;

  display: grid;
  grid-template-columns:
    210px
    minmax(0, 690px);
  gap: 14px;
  align-items: start;
}

.data-sale-partial-layout
.data-sale-partial-sheet {
  width: 100% !important;
  margin: 0 !important;
}

.data-sale-hidden-panel {
  overflow: hidden;

  background:
    color-mix(
      in srgb,
      var(--app-surface) 92%,
      transparent
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 84%,
      transparent
    );

  border-radius: 11px;
}

.data-sale-hidden-head {
  min-height: 34px;

  padding:
    0
    9px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  color:
    var(--app-muted);

  background:
    color-mix(
      in srgb,
      var(--app-surface-3) 78%,
      transparent
    );

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

  font-size: 6.4px;
  font-weight: 900;
  letter-spacing: .035em;
}

.data-sale-hidden-head strong {
  min-width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  color:
    var(--app-text-strong);

  background:
    color-mix(
      in srgb,
      var(--app-control) 90%,
      transparent
    );

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

  border-radius: 999px;

  font-size: 7px;
}

.data-sale-hidden-list {
  min-height: 54px;

  padding: 6px;

  display: grid;
  gap: 5px;
}

.data-sale-hidden-empty {
  min-height: 42px;

  display: grid;
  place-items: center;

  color:
    var(--app-muted-2);

  font-size: 7px;
  font-weight: 650;
}

.data-sale-hidden-person {
  min-height: 36px;

  padding:
    4px
    5px
    4px
    6px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;

  background:
    color-mix(
      in srgb,
      var(--app-control) 72%,
      transparent
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 78%,
      transparent
    );

  border-radius: 8px;
}

.data-sale-hidden-person-main {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 6px;
}

.data-sale-hidden-person-main
.data-sale-consultant-avatar {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  flex: 0 0 24px !important;
}

.data-sale-hidden-person-main > span:last-child {
  min-width: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color:
    var(--app-text);

  font-size: 7.2px;
  font-weight: 750;
}

.data-sale-restore-consultant {
  width: 23px;
  min-width: 23px;
  height: 23px;

  display: grid;
  place-items: center;

  color:
    var(--app-mint);

  background:
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      var(--app-control)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-mint) 24%,
      var(--app-border)
    );

  border-radius: 7px;

  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;
}

.data-sale-restore-consultant:hover {
  background:
    color-mix(
      in srgb,
      var(--app-mint) 10%,
      var(--app-control)
    );

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 44%,
      var(--app-border)
    );
}


/* Retirar é propositalmente quase invisível até o hover. */
.data-sale-remove-consultant {
  width: 19px;
  min-width: 19px;
  height: 19px;

  margin-left: auto;

  display: grid;
  place-items: center;

  color:
    #FF7D8D;

  background:
    transparent;

  border: 0;
  border-radius: 6px;

  font-size: 12px;
  line-height: 1;

  opacity: 0;

  cursor: pointer;

  transition:
    opacity .12s ease,
    background .12s ease;
}

.data-sale-consultants-table
tbody tr:hover
.data-sale-remove-consultant,
.data-sale-remove-consultant:focus-visible {
  opacity: .72;
}

.data-sale-remove-consultant:hover {
  opacity: 1 !important;

  background:
    rgba(255, 102, 123, .08);
}


/* Objetivo que voltou ao modo visual nunca mantém aparência de input. */
.data-sale-goal-value {
  padding:
    3px
    2px;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* Light */
html[data-app-theme="light"]
.data-sale-hidden-panel {
  background:
    rgba(255, 253, 249, .90);

  border-color:
    #D6D2C8;
}

html[data-app-theme="light"]
.data-sale-hidden-head {
  background:
    #EFEEE8;

  border-color:
    #D2CEC4;
}

html[data-app-theme="light"]
.data-sale-hidden-person {
  background:
    #F8F6F0;

  border-color:
    #DDD9CF;
}


/*
  Para print/grupo, mostra somente o relatório principal.
  A lista "Fora do relatório" é uma ferramenta de configuração.
*/
@media print {
  .data-sale-hidden-panel,
  .data-sale-remove-consultant {
    display: none !important;
  }

  .data-sale-partial-layout {
    display: block !important;

    width: 690px !important;
    margin:
      0
      auto
      15px !important;
  }
}


@media (max-width: 980px) {
  .data-sale-partial-layout {
    grid-template-columns:
      180px
      minmax(0, 1fr);

    gap: 10px;
  }
}

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

  .data-sale-hidden-panel {
    order: 2;
  }
}

/* =====================================================================
   DATA VENDA V6 — FORA DO RELATÓRIO
   Mais à esquerda, busca e no máximo 3 pessoas visíveis.
   ===================================================================== */

/*
  Mantém o Parcial das vendas onde já estava e desloca apenas
  o quadro lateral para aproveitar melhor o espaço vazio à esquerda.
*/
.data-sale-hidden-panel {
  transform:
    translateX(-72px);
}


/* Cabeçalho vira título + busca. */
.data-sale-hidden-head {
  min-height: 0 !important;

  padding:
    7px
    7px
    8px !important;

  display: grid !important;
  gap: 7px !important;
}

.data-sale-hidden-head-row {
  min-height: 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.data-sale-hidden-head-row > span {
  color:
    var(--app-muted);

  font-size: 6.2px;
  font-weight: 900;
  letter-spacing: .035em;
}

.data-sale-hidden-head-row > strong {
  min-width: 19px;
  height: 19px;

  display: grid;
  place-items: center;

  color:
    var(--app-text-strong);

  background:
    color-mix(
      in srgb,
      var(--app-control) 90%,
      transparent
    );

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

  border-radius: 999px;

  font-size: 6.8px;
}


/* Pesquisa compacta. */
.data-sale-hidden-search {
  height: 30px;

  display: grid;
  grid-template-columns:
    27px
    minmax(0, 1fr);
  align-items: center;

  overflow: hidden;

  color:
    var(--app-muted-2);

  background:
    color-mix(
      in srgb,
      var(--app-control) 88%,
      transparent
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 90%,
      transparent
    );

  border-radius: 8px;

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

.data-sale-hidden-search:focus-within {
  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 38%,
      var(--app-border)
    );

  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      transparent
    );
}

.data-sale-hidden-search > span {
  width: 27px;
  height: 100%;

  display: grid;
  place-items: center;
}

.data-sale-hidden-search svg {
  width: 13px;
  height: 13px;

  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.data-sale-hidden-search input {
  width: 100%;
  min-width: 0;
  height: 100%;

  padding:
    0
    7px
    0
    0;

  color:
    var(--app-text);

  background:
    transparent;

  border: 0;
  outline: 0;

  font: inherit;
  font-size: 7.2px;
  font-weight: 650;
}

.data-sale-hidden-search input::placeholder {
  color:
    var(--app-muted-2);

  opacity: .82;
}


/*
  Altura de 3 pessoas.
  Cada card tem ~36px + gap de 5px.
*/
.data-sale-hidden-list {
  min-height: 0 !important;
  max-height: 121px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  align-content: start;

  scrollbar-width: thin;
  scrollbar-color:
    color-mix(
      in srgb,
      var(--app-mint) 28%,
      transparent
    )
    transparent;
}

.data-sale-hidden-list::-webkit-scrollbar {
  width: 4px;
}

.data-sale-hidden-list::-webkit-scrollbar-track {
  background: transparent;
}

.data-sale-hidden-list::-webkit-scrollbar-thumb {
  background:
    color-mix(
      in srgb,
      var(--app-mint) 30%,
      transparent
    );

  border-radius: 999px;
}

.data-sale-hidden-list::-webkit-scrollbar-thumb:hover {
  background:
    color-mix(
      in srgb,
      var(--app-mint) 46%,
      transparent
    );
}


/* A mensagem vazia não força altura maior. */
.data-sale-hidden-empty {
  min-height: 42px !important;
}


/* Light */
html[data-app-theme="light"]
.data-sale-hidden-search {
  color: #788078;

  background: #FFFDF9;

  border-color: #D8D4CA;
}

html[data-app-theme="light"]
.data-sale-hidden-head-row > strong {
  background: #F8F6F0;
  border-color: #D8D4CA;
}


/*
  Em telas menores não desloca o quadro para fora do espaço disponível.
*/
@media (max-width: 1050px) {
  .data-sale-hidden-panel {
    transform:
      translateX(-34px);
  }
}

@media (max-width: 820px) {
  .data-sale-hidden-panel {
    transform: none;
  }
}

/* =====================================================================
   PARCIAL DAS VENDAS V8 — CORES / LEGIBILIDADE REFINADAS
   ===================================================================== */

/*
  DARK
  Vermelho = sem venda
  Amarelo = vendeu, mas abaixo do objetivo
  Verde = bateu/passou o objetivo
*/
html[data-app-theme="dark"] .data-sale-money-negative {
  color: #FF667A !important;
  font-weight: 850 !important;
  text-shadow: 0 0 10px rgba(255, 102, 122, .055);
}

html[data-app-theme="dark"] .data-sale-money-warning,
html[data-app-theme="dark"] .data-sale-money-progress {
  color: #F2C45F !important;
  font-weight: 850 !important;
  text-shadow: 0 0 10px rgba(242, 196, 95, .045);
}

html[data-app-theme="dark"] .data-sale-money-positive {
  color: #62DFA1 !important;
  font-weight: 880 !important;
  text-shadow: 0 0 10px rgba(98, 223, 161, .05);
}

/* O "Falta vender" positivo continua amarelo; ultrapassou meta fica verde. */
html[data-app-theme="dark"]
.data-sale-consultants-table
.data-sale-money-warning {
  color: #F2C45F !important;
}


/*
  LIGHT
  Tons propositalmente mais escuros para não desaparecerem no off-white.
*/
html[data-app-theme="light"] .data-sale-money-negative {
  color: #C93649 !important;
  font-weight: 880 !important;
  text-shadow: none !important;
}

html[data-app-theme="light"] .data-sale-money-warning,
html[data-app-theme="light"] .data-sale-money-progress {
  color: #A96700 !important;
  font-weight: 880 !important;
  text-shadow: none !important;
}

html[data-app-theme="light"] .data-sale-money-positive {
  color: #087A45 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}


/* ---------------------------------------------------------------------
   DARK — acabamento da tabela
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.data-sale-partial-sheet {
  background:
    linear-gradient(
      180deg,
      rgba(22, 29, 40, .98),
      rgba(18, 24, 34, .98)
    ) !important;

  border-color:
    rgba(93, 110, 136, .31) !important;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .012) !important;
}

html[data-app-theme="dark"]
.data-sale-partial-title {
  /*
    Não altera fonte/tamanho/estilo do título.
    Apenas integra melhor a superfície ao restante da tabela.
  */
  background:
    linear-gradient(
      180deg,
      rgba(25, 32, 44, .98),
      rgba(21, 27, 38, .98)
    ) !important;

  border-bottom-color:
    rgba(96, 115, 143, .25) !important;
}

html[data-app-theme="dark"]
.data-sale-consultants-table th {
  color: #ECF2ED !important;

  background:
    linear-gradient(
      180deg,
      #0D1A12,
      #0C1710
    ) !important;

  border-bottom-color:
    rgba(102, 151, 114, .22) !important;
}

html[data-app-theme="dark"]
.data-sale-consultants-table tbody td {
  color: #E8ECEA;

  border-bottom-color:
    rgba(103, 119, 143, .21) !important;
}

html[data-app-theme="dark"]
.data-sale-consultants-table tbody tr:nth-child(even) td {
  background:
    rgba(255, 255, 255, .008);
}

html[data-app-theme="dark"]
.data-sale-consultants-table tbody tr:hover td {
  background:
    rgba(89, 231, 192, .025) !important;
}

html[data-app-theme="dark"]
.data-sale-consultants-table tfoot td {
  background:
    linear-gradient(
      180deg,
      rgba(29, 37, 50, .98),
      rgba(26, 34, 46, .98)
    ) !important;

  border-top-color:
    rgba(112, 129, 153, .34) !important;
}


/* ---------------------------------------------------------------------
   LIGHT — acabamento da tabela
   --------------------------------------------------------------------- */

html[data-app-theme="light"]
.data-sale-partial-sheet {
  background:
    #FFFDF9 !important;

  border-color:
    #CCC7BC !important;

  box-shadow:
    0 10px 30px rgba(63, 54, 42, .055) !important;
}

html[data-app-theme="light"]
.data-sale-partial-title {
  background:
    linear-gradient(
      180deg,
      #F3F1EB,
      #EEECE5
    ) !important;

  border-bottom-color:
    #CFCAC0 !important;
}

html[data-app-theme="light"]
.data-sale-consultants-table th {
  color: #202820 !important;

  background:
    #E9E7E0 !important;

  border-bottom-color:
    #C8C4B9 !important;
}

html[data-app-theme="light"]
.data-sale-consultants-table tbody td {
  color: #1C211E;

  border-bottom-color:
    #D9D4CA !important;
}

html[data-app-theme="light"]
.data-sale-consultants-table tbody tr:nth-child(even) td {
  background:
    #FCFAF5;
}

html[data-app-theme="light"]
.data-sale-consultants-table tbody tr:hover td {
  background:
    #F4F3EC !important;
}

html[data-app-theme="light"]
.data-sale-consultants-table tfoot td {
  background:
    #EFEEE8 !important;

  border-top-color:
    #C9C5BB !important;
}


/* ---------------------------------------------------------------------
   Tipografia dos dados — discreta, porém mais nítida.
   O título "Parcial das vendas" NÃO é alterado.
   --------------------------------------------------------------------- */

.data-sale-consultants-table tbody td,
.data-sale-consultants-table tfoot td {
  line-height: 1.22 !important;
}

.data-sale-consultants-table tbody td:not(:first-child),
.data-sale-consultants-table tfoot td:not(:first-child) {
  font-size: 9.25px !important;
  letter-spacing: -.006em;
}

.data-sale-consultant-name strong {
  font-size: 8.9px !important;
  font-weight: 800 !important;
  letter-spacing: -.006em;
}

.data-sale-consultants-table th {
  letter-spacing: .018em !important;
}


/*
  Objetivo salvo é um valor "normal" do relatório:
  forte e nítido, mas sem parecer botão/input.
*/
.data-sale-goal-value {
  color: var(--app-text-strong) !important;
  font-weight: 850 !important;
}

html[data-app-theme="light"]
.data-sale-goal-value {
  color: #20251F !important;
}

/* =====================================================================
   DATA VENDA V9 — TABELA DETALHADA ALINHADA COMO A ESTEIRA
   Cabeçalho e valor compartilham exatamente a mesma coluna.
   ===================================================================== */

.data-sale-detail-table {
  width: 100% !important;
  min-width: 1265px !important;

  table-layout: fixed !important;

  border-collapse: collapse !important;
}


/* Larguras estruturais das colunas. */
.data-sale-detail-col-company {
  width: 130px;
}

.data-sale-detail-col-client {
  width: 210px;
}

.data-sale-detail-col-cpf {
  width: 130px;
}

.data-sale-detail-col-bank-origin {
  width: 145px;
}

.data-sale-detail-col-bank-destination {
  width: 145px;
}

.data-sale-detail-col-unlocked {
  width: 115px;
}

.data-sale-detail-col-contract {
  width: 140px;
}

.data-sale-detail-col-phase {
  width: 190px;
}

.data-sale-detail-col-consultant {
  width: 190px;
}


/*
  Mesma regra usada na Esteira:
  o título fica no centro da largura reservada para aquela coluna,
  e o valor abaixo usa o mesmo centro.
*/
.data-sale-detail-table th,
.data-sale-detail-table td {
  box-sizing: border-box !important;

  padding:
    7px
    8px !important;

  vertical-align: middle !important;

  text-align: center !important;
}


/* Todos os conteúdos de uma célula ficam centralizados. */
.data-sale-detail-table td {
  overflow: hidden;
}

.data-sale-detail-cell-client,
.data-sale-detail-cell-cpf,
.data-sale-detail-cell-bank-origin,
.data-sale-detail-cell-bank-destination,
.data-sale-detail-cell-unlocked,
.data-sale-detail-cell-contract,
.data-sale-detail-cell-phase,
.data-sale-detail-cell-consultant,
.data-sale-detail-cell-company {
  text-align: center !important;
}


/* Cliente pode ser grande, mas permanece no centro da própria coluna. */
.data-sale-detail-cell-client {
  max-width: none !important;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* CPF e bancos não deslocam mais para um dos lados. */
.data-sale-detail-cell-cpf,
.data-sale-detail-cell-bank-origin,
.data-sale-detail-cell-bank-destination,
.data-sale-detail-cell-contract {
  min-width: 0 !important;

  white-space: nowrap;

  font-variant-numeric:
    tabular-nums;
}


/* Símbolo de desbloqueado no centro exato da coluna. */
.data-sale-detail-cell-unlocked {
  line-height: 1;
}

.data-sale-detail-cell-unlocked
.data-sale-unlocked {
  margin:
    0
    auto !important;
}


/* Fase centralizada, inclusive bolinha + texto. */
.data-sale-detail-cell-phase
.data-sale-phase {
  max-width: 100%;

  margin:
    0
    auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.data-sale-detail-cell-phase
.data-sale-phase > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Foto + nome do consultor formam um bloco centralizado. */
.data-sale-detail-cell-consultant
.data-sale-detail-consultant {
  width: 100%;

  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 7px !important;

  overflow: hidden;
}

.data-sale-detail-cell-consultant
.data-sale-detail-consultant > span:last-child {
  min-width: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* A célula de contrato deixa de herdar qualquer alinhamento antigo. */
.data-sale-detail-table
.data-sale-contract {
  text-align: center !important;
}


/*
  Altura uniforme das linhas ajuda visualmente a leitura horizontal,
  igual à Esteira.
*/
.data-sale-detail-table tbody tr {
  height: 38px;
}

.data-sale-detail-table thead tr {
  height: 31px;
}


/* Quando Global mostrar EMPRESA, a tabela ganha apenas essa largura extra. */
.data-sale-detail-table:has(
  .data-sale-company-col:not(.hidden)
) {
  min-width: 1395px !important;
}


/* Light: preserva exatamente o mesmo alinhamento. */
html[data-app-theme="light"]
.data-sale-detail-table th,
html[data-app-theme="light"]
.data-sale-detail-table td {
  text-align: center !important;
}

/* =====================================================================
   DATA VENDA V10 — TABELA SEM SCROLL HORIZONTAL + CPF FORMATADO
   ===================================================================== */

/*
  A tabela agora ocupa exatamente 100% da área disponível.
  As colunas abaixo usam proporções mais compactas em vez de uma
  largura mínima maior que o container.
*/
.data-sale-detail-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  table-layout: fixed !important;
}

.data-sale-detail-scroll {
  width: 100% !important;
  max-width: 100% !important;

  overflow-x: hidden !important;
}


/* Distribuição das colunas = 100% */
.data-sale-detail-col-client {
  width: 16% !important;
}

.data-sale-detail-col-cpf {
  width: 11% !important;
}

.data-sale-detail-col-bank-origin {
  width: 12% !important;
}

.data-sale-detail-col-bank-destination {
  width: 10% !important;
}

.data-sale-detail-col-unlocked {
  width: 9% !important;
}

.data-sale-detail-col-contract {
  width: 12% !important;
}

.data-sale-detail-col-phase {
  width: 15% !important;
}

.data-sale-detail-col-consultant {
  width: 15% !important;
}


/*
  CPF é curto e previsível depois da máscara, então não precisa
  reservar uma coluna larga.
*/
.data-sale-detail-cell-cpf {
  padding-left: 4px !important;
  padding-right: 4px !important;

  white-space: nowrap !important;
  letter-spacing: -.015em !important;
}


/* Desbloqueado também pode ser bem compacto. */
.data-sale-detail-cell-unlocked,
.data-sale-detail-head-unlocked {
  padding-left: 3px !important;
  padding-right: 3px !important;
}


/* Banco / Portador ganham ellipsis caso algum nome seja excepcionalmente grande. */
.data-sale-detail-cell-bank-origin,
.data-sale-detail-cell-bank-destination {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* Fase e consultor continuam legíveis sem forçar a largura da tabela. */
.data-sale-detail-cell-phase,
.data-sale-detail-cell-consultant {
  min-width: 0 !important;
}


/*
  Remove a regra antiga que aumentava novamente a tabela.
  No Global, a coluna Empresa entra na composição sem criar
  barra horizontal.
*/
.data-sale-detail-table:has(
  .data-sale-company-col:not(.hidden)
) {
  min-width: 0 !important;
}

.data-sale-detail-col-company:not(.hidden) {
  width: 10% !important;
}


/*
  Quando Empresa estiver visível, reduz levemente as demais
  para manter tudo dentro de 100%.
*/
.data-sale-detail-table:has(
  .data-sale-company-col:not(.hidden)
)
.data-sale-detail-col-client {
  width: 14% !important;
}

.data-sale-detail-table:has(
  .data-sale-company-col:not(.hidden)
)
.data-sale-detail-col-cpf {
  width: 10% !important;
}

.data-sale-detail-table:has(
  .data-sale-company-col:not(.hidden)
)
.data-sale-detail-col-bank-origin {
  width: 10% !important;
}

.data-sale-detail-table:has(
  .data-sale-company-col:not(.hidden)
)
.data-sale-detail-col-bank-destination {
  width: 9% !important;
}

.data-sale-detail-table:has(
  .data-sale-company-col:not(.hidden)
)
.data-sale-detail-col-unlocked {
  width: 8% !important;
}

.data-sale-detail-table:has(
  .data-sale-company-col:not(.hidden)
)
.data-sale-detail-col-contract {
  width: 10% !important;
}

.data-sale-detail-table:has(
  .data-sale-company-col:not(.hidden)
)
.data-sale-detail-col-phase {
  width: 14% !important;
}

.data-sale-detail-table:has(
  .data-sale-company-col:not(.hidden)
)
.data-sale-detail-col-consultant {
  width: 15% !important;
}

/* =====================================================================
   DATA VENDA V11 — RANKING / LÍDER / TOTAL / PAINEL RECOLHÍVEL
   ===================================================================== */

/* ---------------------------------------------------------------------
   Ranking visual
   --------------------------------------------------------------------- */

.data-sale-consultant-name {
  position: relative;
}

.data-sale-rank-badge {
  width: 27px;
  min-width: 27px;
  height: 22px;

  display: inline-grid;
  place-items: center;

  flex: 0 0 27px;

  color:
    var(--app-muted);

  background:
    color-mix(
      in srgb,
      var(--app-control) 88%,
      transparent
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 90%,
      transparent
    );

  border-radius: 7px;

  font-size: 7px;
  font-weight: 900;
  line-height: 1;

  font-variant-numeric:
    tabular-nums;
}

.data-sale-rank-badge-1 {
  color: #F3C969;

  background:
    rgba(243, 201, 105, .09);

  border-color:
    rgba(243, 201, 105, .34);

  box-shadow:
    inset 0 0 10px
    rgba(243, 201, 105, .025);
}

.data-sale-rank-badge-2 {
  color: #BBC5D2;

  background:
    rgba(187, 197, 210, .075);

  border-color:
    rgba(187, 197, 210, .28);
}

.data-sale-rank-badge-3 {
  color: #D49463;

  background:
    rgba(212, 148, 99, .08);

  border-color:
    rgba(212, 148, 99, .30);
}

.data-sale-rank-badge-other {
  color:
    var(--app-muted-2);
}


/*
  O líder ganha apenas uma assinatura visual discreta.
  Não pinta a linha inteira de dourado.
*/
.data-sale-consultants-table
tbody
tr.is-sales-leader
td:first-child {
  position: relative;
}

.data-sale-consultants-table
tbody
tr.is-sales-leader
td:first-child::before {
  content: "";

  position: absolute;

  left: 0;
  top: 7px;
  bottom: 7px;

  width: 3px;

  background:
    #F3C969;

  border-radius:
    0
    999px
    999px
    0;

  box-shadow:
    0 0 12px
    rgba(243, 201, 105, .20);
}

html[data-app-theme="dark"]
.data-sale-consultants-table
tbody
tr.is-sales-leader
td {
  background:
    linear-gradient(
      90deg,
      rgba(243, 201, 105, .028),
      rgba(243, 201, 105, .008) 42%,
      transparent 80%
    );
}

html[data-app-theme="light"]
.data-sale-consultants-table
tbody
tr.is-sales-leader
td {
  background:
    linear-gradient(
      90deg,
      rgba(174, 123, 25, .055),
      rgba(174, 123, 25, .015) 42%,
      transparent 80%
    );
}


/* ---------------------------------------------------------------------
   Linha TOTAL
   --------------------------------------------------------------------- */

.data-sale-consultants-table
tfoot
.data-sale-total-row
td {
  min-height: 35px;

  padding-top: 8px !important;
  padding-bottom: 8px !important;

  font-size: 9.6px !important;
  font-weight: 900 !important;

  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--app-text) 17%,
      var(--app-border)
    ) !important;
}

.data-sale-total-row
td:first-child {
  letter-spacing: .015em;
}

html[data-app-theme="dark"]
.data-sale-consultants-table
tfoot
.data-sale-total-row
td {
  background:
    linear-gradient(
      180deg,
      #202938,
      #1B2431
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .018);
}

html[data-app-theme="light"]
.data-sale-consultants-table
tfoot
.data-sale-total-row
td {
  background:
    linear-gradient(
      180deg,
      #ECEAE3,
      #E7E4DC
    ) !important;

  border-top-color:
    #C3BEB2 !important;
}


/* ---------------------------------------------------------------------
   Fora do relatório — recolhível
   --------------------------------------------------------------------- */

.data-sale-hidden-head-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.data-sale-hidden-toggle {
  width: 21px;
  min-width: 21px;
  height: 21px;

  display: grid;
  place-items: center;

  padding: 0;

  color:
    var(--app-muted);

  background:
    color-mix(
      in srgb,
      var(--app-control) 84%,
      transparent
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--app-border) 90%,
      transparent
    );

  border-radius: 6px;

  cursor: pointer;

  transition:
    color .14s ease,
    border-color .14s ease,
    background .14s ease,
    transform .16s ease;
}

.data-sale-hidden-toggle svg {
  width: 11px;
  height: 11px;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform .18s ease;
}

.data-sale-hidden-toggle:hover {
  color:
    var(--app-mint);

  border-color:
    color-mix(
      in srgb,
      var(--app-mint) 31%,
      var(--app-border)
    );

  background:
    color-mix(
      in srgb,
      var(--app-mint) 5%,
      var(--app-control)
    );
}


/*
  Fechado: mantém só o cabeçalho.
  O contador continua visível para saber quantas pessoas estão fora.
*/
.data-sale-hidden-panel.is-collapsed
.data-sale-hidden-search,
.data-sale-hidden-panel.is-collapsed
.data-sale-hidden-list {
  display: none !important;
}

.data-sale-hidden-panel.is-collapsed
.data-sale-hidden-head {
  padding:
    7px
    7px !important;

  gap: 0 !important;

  border-bottom: 0 !important;
}

.data-sale-hidden-panel.is-collapsed
.data-sale-hidden-toggle
svg {
  transform:
    rotate(-90deg);
}

.data-sale-hidden-panel.is-collapsed {
  min-height: 0 !important;
}


/* Light: ranking com contraste real */
html[data-app-theme="light"]
.data-sale-rank-badge-1 {
  color: #8D5E00;

  background: #FFF3D3;

  border-color: #D8B55E;
}

html[data-app-theme="light"]
.data-sale-rank-badge-2 {
  color: #596574;

  background: #EEF1F4;

  border-color: #B8C0C9;
}

html[data-app-theme="light"]
.data-sale-rank-badge-3 {
  color: #8A4C22;

  background: #F9E9DC;

  border-color: #D4A27C;
}

html[data-app-theme="light"]
.data-sale-hidden-toggle {
  color: #6D746F;

  background: #FBF9F4;

  border-color: #D8D3C9;
}

html[data-app-theme="light"]
.data-sale-hidden-toggle:hover {
  color: #17755F;

  background: #F2F7F2;

  border-color: #BBD2C1;
}


/*
  Ranking não entra no cálculo de largura da tabela:
  ocupa apenas o espaço já reservado ao consultor.
*/
.data-sale-consultant-cell {
  overflow: hidden;
}

.data-sale-consultant-name {
  width: 100%;

  min-width: 0;

  display: flex;
  align-items: center;
}

/* =====================================================================
   DATA VENDA V11.1 — SETA DO "FORA DO RELATÓRIO"
   Aberto = aponta para a esquerda (recolher)
   Fechado = aponta para a direita (expandir)
   ===================================================================== */

.data-sale-hidden-toggle svg {
  transform: rotate(90deg) !important;
}

.data-sale-hidden-panel.is-collapsed
.data-sale-hidden-toggle svg {
  transform: rotate(-90deg) !important;
}

/* =====================================================================
   DATA VENDA V12 — TEXTURA / PROFUNDIDADE / ILUMINAÇÃO
   - Remove fundo especial do líder
   - Mantém destaque apenas no ranking/badge
   - Refina Parcial, Fora do relatório e tabela detalhada
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) LÍDER — SEM COR DIFERENTE NA LINHA
   --------------------------------------------------------------------- */

/* Todas as linhas voltam a usar exatamente o mesmo fundo-base. */
html[data-app-theme="dark"]
.data-sale-consultants-table
tbody
tr.is-sales-leader
td,
html[data-app-theme="light"]
.data-sale-consultants-table
tbody
tr.is-sales-leader
td {
  background: inherit !important;
}

/* Remove a faixa lateral dourada do líder. */
.data-sale-consultants-table
tbody
tr.is-sales-leader
td:first-child::before {
  content: none !important;
  display: none !important;
}

/*
  O 1º lugar continua destacado somente pelo badge,
  agora com acabamento um pouco mais refinado.
*/
.data-sale-rank-badge-1 {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 12px rgba(243,201,105,.08) !important;
}


/* ---------------------------------------------------------------------
   2) SUPERFÍCIE GERAL — TEXTURA MUITO SUTIL
   --------------------------------------------------------------------- */

#section-reports.reports-launcher.is-data-sale-open {
  position: relative !important;
  isolation: isolate !important;
}

/*
  Textura criada apenas com gradientes CSS.
  É propositalmente quase imperceptível para não prejudicar leitura/print.
*/
html[data-app-theme="dark"]
#section-reports.reports-launcher.is-data-sale-open {
  background:
    radial-gradient(
      circle at 18% 4%,
      rgba(100, 118, 170, .055),
      transparent 27%
    ),
    radial-gradient(
      circle at 82% 16%,
      rgba(122, 96, 166, .035),
      transparent 30%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.006) 0,
      rgba(255,255,255,.006) 1px,
      transparent 1px,
      transparent 6px
    ),
    linear-gradient(
      180deg,
      #111720 0%,
      #10151E 48%,
      #0E141C 100%
    ) !important;
}

html[data-app-theme="light"]
#section-reports.reports-launcher.is-data-sale-open {
  background:
    radial-gradient(
      circle at 16% 5%,
      rgba(139, 119, 86, .035),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 12%,
      rgba(105, 116, 145, .025),
      transparent 32%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(55,45,30,.012) 0,
      rgba(55,45,30,.012) 1px,
      transparent 1px,
      transparent 7px
    ),
    linear-gradient(
      180deg,
      #F7F5EF 0%,
      #F4F2EC 52%,
      #F2F0EA 100%
    ) !important;
}


/* ---------------------------------------------------------------------
   3) PARCIAL DAS VENDAS — PROFUNDIDADE PREMIUM
   --------------------------------------------------------------------- */

.data-sale-partial-sheet {
  position: relative !important;
  isolation: isolate !important;
}

/*
  Iluminação interna suave no topo do card.
  Não muda o título, apenas a superfície ao redor dele.
*/
.data-sale-partial-sheet::before {
  content: "" !important;

  position: absolute !important;
  inset:
    0
    0
    auto
    0 !important;

  height: 54px !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.008) 44%,
      transparent 100%
    ) !important;

  opacity: .75 !important;

  z-index: 0 !important;
}

.data-sale-partial-sheet > * {
  position: relative !important;
  z-index: 1 !important;
}

html[data-app-theme="dark"]
.data-sale-partial-sheet {
  background:
    radial-gradient(
      circle at 50% -12%,
      rgba(122, 132, 177, .075),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(23, 30, 41, .985),
      rgba(18, 24, 34, .99)
    ) !important;

  border-color:
    rgba(94, 108, 132, .34) !important;

  box-shadow:
    0 18px 44px rgba(0,0,0,.19),
    0 4px 12px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.028),
    inset 0 -1px 0 rgba(0,0,0,.18) !important;
}

html[data-app-theme="light"]
.data-sale-partial-sheet {
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(255,255,255,.92),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      #FFFDF9,
      #FBF9F4
    ) !important;

  border-color:
    #CBC6BB !important;

  box-shadow:
    0 18px 38px rgba(74,64,48,.075),
    0 3px 9px rgba(74,64,48,.035),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(105,94,75,.05) !important;
}


/* ---------------------------------------------------------------------
   4) CABEÇALHO E LINHAS — MAIS CAMADAS, SEM POLUIR
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.data-sale-consultants-table th {
  background:
    linear-gradient(
      180deg,
      rgba(13, 26, 18, .98),
      rgba(10, 21, 14, .98)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    inset 0 -1px 0 rgba(72, 112, 82, .12) !important;
}

html[data-app-theme="light"]
.data-sale-consultants-table th {
  background:
    linear-gradient(
      180deg,
      #EDEBE5,
      #E6E3DC
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(91,80,61,.05) !important;
}

/* Remove qualquer diferença estrutural do 1º lugar. */
.data-sale-consultants-table tbody tr {
  background: transparent !important;
}

html[data-app-theme="dark"]
.data-sale-consultants-table tbody td {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.006),
      rgba(0,0,0,.010)
    ) !important;
}

html[data-app-theme="light"]
.data-sale-consultants-table tbody td {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.36),
      rgba(126,112,85,.015)
    ) !important;
}

/* Hover com sensação de iluminação, não "pintura". */
html[data-app-theme="dark"]
.data-sale-consultants-table tbody tr:hover td {
  background:
    linear-gradient(
      180deg,
      rgba(112, 128, 166, .048),
      rgba(82, 96, 124, .022)
    ) !important;
}

html[data-app-theme="light"]
.data-sale-consultants-table tbody tr:hover td {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.70),
      rgba(96, 108, 132, .035)
    ) !important;
}


/* ---------------------------------------------------------------------
   5) TOTAL — FECHAMENTO VISUAL MAIS FORTE
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.data-sale-consultants-table
tfoot
.data-sale-total-row
td {
  background:
    linear-gradient(
      180deg,
      #202938,
      #19222F
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 5px 14px rgba(110,126,158,.022) !important;
}

html[data-app-theme="light"]
.data-sale-consultants-table
tfoot
.data-sale-total-row
td {
  background:
    linear-gradient(
      180deg,
      #EFEEE8,
      #E7E4DC
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 5px 12px rgba(93,82,62,.025) !important;
}


/* ---------------------------------------------------------------------
   6) FORA DO RELATÓRIO — MESMA LINGUAGEM VISUAL
   --------------------------------------------------------------------- */

.data-sale-hidden-panel {
  position: relative !important;
  isolation: isolate !important;
}

.data-sale-hidden-panel::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  pointer-events: none !important;

  border-radius: inherit !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      transparent 34%,
      rgba(0,0,0,.018) 100%
    ) !important;

  z-index: 0 !important;
}

.data-sale-hidden-panel > * {
  position: relative !important;
  z-index: 1 !important;
}

html[data-app-theme="dark"]
.data-sale-hidden-panel {
  background:
    radial-gradient(
      circle at 30% -10%,
      rgba(104, 121, 164, .07),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(22,28,39,.97),
      rgba(17,23,32,.985)
    ) !important;

  border-color:
    rgba(94,108,132,.31) !important;

  box-shadow:
    0 15px 34px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html[data-app-theme="light"]
.data-sale-hidden-panel {
  background:
    linear-gradient(
      180deg,
      #FFFDF9,
      #F8F6F0
    ) !important;

  border-color:
    #D0CBC0 !important;

  box-shadow:
    0 12px 28px rgba(74,64,48,.06),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}


/* Busca com profundidade sem parecer input genérico. */
html[data-app-theme="dark"]
.data-sale-hidden-search {
  background:
    linear-gradient(
      180deg,
      rgba(12,18,25,.90),
      rgba(10,16,22,.94)
    ) !important;

  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.018) !important;
}

html[data-app-theme="light"]
.data-sale-hidden-search {
  background:
    linear-gradient(
      180deg,
      #FFFDF9,
      #F8F6F1
    ) !important;

  box-shadow:
    inset 0 1px 3px rgba(91,80,61,.06),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}


/* ---------------------------------------------------------------------
   7) TABELA DETALHADA — MESMA PROFUNDIDADE DO PARCIAL
   --------------------------------------------------------------------- */

.data-sale-details-sheet {
  position: relative !important;
  isolation: isolate !important;
}

html[data-app-theme="dark"]
.data-sale-details-sheet {
  background:
    linear-gradient(
      180deg,
      rgba(22,29,40,.97),
      rgba(17,23,32,.985)
    ) !important;

  border-color:
    rgba(94,108,132,.31) !important;

  box-shadow:
    0 16px 38px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.022) !important;
}

html[data-app-theme="light"]
.data-sale-details-sheet {
  background:
    linear-gradient(
      180deg,
      #FFFDF9,
      #FAF8F3
    ) !important;

  border-color:
    #D0CBC0 !important;

  box-shadow:
    0 14px 32px rgba(74,64,48,.065),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

html[data-app-theme="dark"]
.data-sale-detail-table th {
  background:
    linear-gradient(
      180deg,
      #0D1A12,
      #0A1510
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015),
    inset 0 -1px 0 rgba(82,122,91,.11) !important;
}

html[data-app-theme="light"]
.data-sale-detail-table th {
  background:
    linear-gradient(
      180deg,
      #ECEAE4,
      #E5E2DB
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(92,80,61,.045) !important;
}

html[data-app-theme="dark"]
.data-sale-detail-table tbody tr:hover td {
  background:
    linear-gradient(
      180deg,
      rgba(112,128,166,.045),
      rgba(82,96,124,.020)
    ) !important;
}

html[data-app-theme="light"]
.data-sale-detail-table tbody tr:hover td {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.72),
      rgba(96,108,132,.035)
    ) !important;
}


/* ---------------------------------------------------------------------
   8) PEQUENOS DETALHES DE ILUMINAÇÃO
   --------------------------------------------------------------------- */

.data-sale-consultant-avatar,
.data-sale-detail-consultant
.data-sale-consultant-avatar {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 2px 6px rgba(0,0,0,.12) !important;
}

.data-sale-rank-badge {
  backdrop-filter: blur(3px);
}

.data-sale-goal-value,
.data-sale-consultants-table tbody td:not(:first-child),
.data-sale-detail-table td {
  text-rendering: geometricPrecision;
}


/* ---------------------------------------------------------------------
   PRINT: remove textura/sombras pesadas, preserva o layout limpo
   --------------------------------------------------------------------- */

@media print {
  #section-reports.reports-launcher.is-data-sale-open,
  .data-sale-partial-sheet,
  .data-sale-details-sheet {
    background: #FFFFFF !important;
    box-shadow: none !important;
  }

  .data-sale-partial-sheet::before,
  .data-sale-hidden-panel::before {
    display: none !important;
  }
}

/* =====================================================================
   DATA VENDA V13 — LEGIBILIDADE + PROFUNDIDADE REAL
   Foco principal: modo escuro
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) TIPOGRAFIA — MAIS NÍTIDA NO WINDOWS/CHROME
   --------------------------------------------------------------------- */

/*
  As informações do relatório passam a usar uma fonte de interface
  mais limpa e com peso menos "estourado".
  O título "Parcial das vendas" não é afetado.
*/
.data-sale-consultants-table,
.data-sale-detail-table,
.data-sale-hidden-panel,
.data-sale-date-strip {
  font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif !important;

  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
  Remove o geometricPrecision aplicado anteriormente nos números.
  Em tamanhos pequenos ele pode deixar a renderização artificial.
*/
.data-sale-goal-value,
.data-sale-consultants-table tbody td:not(:first-child),
.data-sale-detail-table td {
  text-rendering: optimizeLegibility !important;
}


/* Cabeçalho */
.data-sale-consultants-table th {
  font-size: 8.1px !important;
  font-weight: 760 !important;
  letter-spacing: .025em !important;
}


/* Nome do colaborador */
.data-sale-consultant-name strong {
  color: #EEF3F7 !important;

  font-size: 10.1px !important;
  font-weight: 680 !important;
  line-height: 1.2 !important;
  letter-spacing: -.008em !important;

  text-shadow: none !important;
}


/* Números e dados do Parcial */
.data-sale-consultants-table tbody td:not(:first-child) {
  font-size: 10.6px !important;
  font-weight: 690 !important;
  line-height: 1.2 !important;
  letter-spacing: -.012em !important;
}


/* Objetivo salvo */
.data-sale-goal-value {
  min-width: 96px !important;

  font-size: 10.6px !important;
  font-weight: 690 !important;
  line-height: 1.2 !important;
}


/* TOTAL ganha leitura própria */
.data-sale-consultants-table
tfoot
.data-sale-total-row
td {
  font-size: 10.7px !important;
  font-weight: 760 !important;
  line-height: 1.22 !important;
}


/* Ranking não precisa competir com o nome */
.data-sale-rank-badge {
  font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 7.3px !important;
  font-weight: 760 !important;
}


/* Tabela detalhada de baixo */
.data-sale-detail-table th {
  font-size: 8px !important;
  font-weight: 760 !important;
  letter-spacing: .018em !important;
}

.data-sale-detail-table td {
  font-size: 10px !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
}

.data-sale-detail-cell-client,
.data-sale-detail-cell-consultant {
  font-weight: 680 !important;
}


/* ---------------------------------------------------------------------
   2) MODO ESCURO — TEXTO BRANCO COM CONTRASTE LIMPO
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.data-sale-consultants-table
tbody td,
html[data-app-theme="dark"]
.data-sale-detail-table
tbody td {
  color: #E8EEF3 !important;
}


/* Valores neutros */
html[data-app-theme="dark"]
.data-sale-goal-value {
  color: #F1F4F7 !important;
}


/*
  Cores de desempenho continuam com a mesma regra,
  mas agora têm contraste um pouco melhor sem neon excessivo.
*/
html[data-app-theme="dark"]
.data-sale-money-negative {
  color: #FF6578 !important;
  text-shadow: none !important;
}

html[data-app-theme="dark"]
.data-sale-money-warning,
html[data-app-theme="dark"]
.data-sale-money-progress {
  color: #F5C95F !important;
  text-shadow: none !important;
}

html[data-app-theme="dark"]
.data-sale-money-positive {
  color: #59DEA0 !important;
  text-shadow: none !important;
}


/* ---------------------------------------------------------------------
   3) PARCIAL — PROFUNDIDADE VISÍVEL DE VERDADE
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.data-sale-partial-sheet {
  overflow: hidden !important;

  background:
    radial-gradient(
      ellipse at 50% -18%,
      rgba(106, 124, 177, .17) 0%,
      rgba(82, 96, 139, .07) 30%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      #18202C 0%,
      #141B26 44%,
      #111823 100%
    ) !important;

  border:
    1px solid
    rgba(112, 130, 158, .43) !important;

  border-top-color:
    rgba(151, 169, 201, .48) !important;

  box-shadow:
    0 28px 65px rgba(0, 0, 0, .36),
    0 9px 22px rgba(0, 0, 0, .23),
    0 2px 5px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .065),
    inset 0 -1px 0 rgba(0, 0, 0, .36),
    inset 0 0 42px rgba(107, 124, 169, .035) !important;
}


/*
  Textura fina sobre o card.
  Agora é perceptível ao olhar, mas não interfere na leitura.
*/
html[data-app-theme="dark"]
.data-sale-partial-sheet::after {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  pointer-events: none !important;

  background:
    repeating-linear-gradient(
      118deg,
      rgba(255, 255, 255, .018) 0px,
      rgba(255, 255, 255, .018) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      28deg,
      rgba(0, 0, 0, .035) 0px,
      rgba(0, 0, 0, .035) 1px,
      transparent 1px,
      transparent 8px
    ) !important;

  opacity: .38 !important;

  mix-blend-mode: soft-light !important;

  z-index: 0 !important;
}

.data-sale-partial-sheet > * {
  position: relative !important;
  z-index: 2 !important;
}


/* Uma linha de luz no topo ajuda o card a "descolar" do fundo */
html[data-app-theme="dark"]
.data-sale-partial-sheet::before {
  content: "" !important;

  position: absolute !important;

  top: 0 !important;
  left: 5% !important;
  right: 5% !important;

  height: 1px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(205, 218, 246, .20) 20%,
      rgba(226, 235, 255, .34) 50%,
      rgba(205, 218, 246, .20) 80%,
      transparent
    ) !important;

  opacity: 1 !important;

  z-index: 3 !important;
}


/* ---------------------------------------------------------------------
   4) TÍTULO — MANTÉM ESTILO, GANHA APENAS CAMADA
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.data-sale-partial-title {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(119, 136, 188, .10),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #1A2230 0%,
      #171F2B 100%
    ) !important;

  border-bottom:
    1px solid
    rgba(113, 132, 160, .30) !important;

  box-shadow:
    inset 0 -8px 18px rgba(0, 0, 0, .05),
    inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}


/* ---------------------------------------------------------------------
   5) CABEÇALHO — CAMADA SEPARADA DO CORPO
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.data-sale-consultants-table th {
  color: #F0F4F2 !important;

  background:
    linear-gradient(
      180deg,
      #0F1D16 0%,
      #0A1610 100%
    ) !important;

  border-bottom:
    1px solid
    rgba(95, 142, 108, .28) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    inset 0 -4px 10px rgba(0, 0, 0, .12) !important;
}


/* ---------------------------------------------------------------------
   6) LINHAS — SENSAÇÃO DE CAMADAS
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.data-sale-consultants-table
tbody tr {
  background: transparent !important;
}

html[data-app-theme="dark"]
.data-sale-consultants-table
tbody tr td {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018) 0%,
      rgba(255,255,255,.004) 45%,
      rgba(0,0,0,.030) 100%
    ) !important;

  border-bottom-color:
    rgba(108, 124, 148, .27) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.008) !important;
}


/*
  Todas continuam com exatamente o mesmo fundo-base.
  O líder NÃO volta a ganhar coloração especial.
*/
html[data-app-theme="dark"]
.data-sale-consultants-table
tbody tr.is-sales-leader td {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018) 0%,
      rgba(255,255,255,.004) 45%,
      rgba(0,0,0,.030) 100%
    ) !important;
}


/* Hover = leve "acendimento" da superfície */
html[data-app-theme="dark"]
.data-sale-consultants-table
tbody tr:hover td {
  background:
    linear-gradient(
      180deg,
      rgba(128, 146, 190, .075) 0%,
      rgba(92, 108, 146, .035) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018) !important;
}


/* ---------------------------------------------------------------------
   7) TOTAL — MAIS ENCAIXADO E MAIS PROFUNDO
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.data-sale-consultants-table
tfoot
.data-sale-total-row
td {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(113, 132, 175, .075),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #222C3B 0%,
      #1A2431 100%
    ) !important;

  border-top:
    1px solid
    rgba(137, 154, 183, .43) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 8px 18px rgba(123,142,180,.025),
    0 -7px 18px rgba(0,0,0,.05) !important;
}


/* ---------------------------------------------------------------------
   8) BADGES / FOTO — ELEMENTOS MAIS "FÍSICOS"
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.data-sale-rank-badge {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 3px 8px rgba(0,0,0,.17) !important;
}

html[data-app-theme="dark"]
.data-sale-consultant-avatar {
  border-color:
    rgba(120, 142, 170, .48) !important;

  box-shadow:
    0 4px 10px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.09) !important;
}


/* ---------------------------------------------------------------------
   9) FORA DO RELATÓRIO — MESMA PROFUNDIDADE
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.data-sale-hidden-panel {
  background:
    radial-gradient(
      ellipse at 50% -12%,
      rgba(104, 123, 172, .14),
      transparent 52%
    ),
    linear-gradient(
      180deg,
      #171F2B,
      #111823
    ) !important;

  border:
    1px solid
    rgba(105, 122, 149, .39) !important;

  border-top-color:
    rgba(143, 160, 190, .42) !important;

  box-shadow:
    0 22px 48px rgba(0,0,0,.26),
    0 5px 14px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.28) !important;
}


/* ---------------------------------------------------------------------
   10) TABELA DE BAIXO — NÃO FICA ACHATADA
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.data-sale-details-sheet {
  background:
    radial-gradient(
      ellipse at 45% -18%,
      rgba(104, 122, 169, .09),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      #171F2B,
      #121923
    ) !important;

  border:
    1px solid
    rgba(102, 119, 146, .38) !important;

  border-top-color:
    rgba(143, 159, 187, .40) !important;

  box-shadow:
    0 24px 54px rgba(0,0,0,.25),
    0 6px 16px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.042),
    inset 0 -1px 0 rgba(0,0,0,.25) !important;
}

html[data-app-theme="dark"]
.data-sale-detail-table
tbody td {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.014),
      rgba(0,0,0,.024)
    ) !important;

  border-bottom-color:
    rgba(108,124,148,.23) !important;
}


/* ---------------------------------------------------------------------
   11) MODO CLARO — PRESERVA A BOA LEITURA ATUAL
   Apenas ganha profundidade coerente.
   --------------------------------------------------------------------- */

html[data-app-theme="light"]
.data-sale-consultant-name strong {
  color: #1E2521 !important;
}

html[data-app-theme="light"]
.data-sale-consultants-table
tbody td {
  color: #202722 !important;
}

html[data-app-theme="light"]
.data-sale-partial-sheet {
  border-top-color:
    #BDB7AA !important;

  box-shadow:
    0 22px 50px rgba(73,62,44,.10),
    0 6px 15px rgba(73,62,44,.05),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(93,80,60,.06) !important;
}

html[data-app-theme="light"]
.data-sale-details-sheet,
html[data-app-theme="light"]
.data-sale-hidden-panel {
  box-shadow:
    0 18px 40px rgba(73,62,44,.085),
    0 4px 12px rgba(73,62,44,.04),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}


/* ---------------------------------------------------------------------
   12) PRINT CONTINUA LIMPO
   --------------------------------------------------------------------- */

@media print {
  .data-sale-partial-sheet::after,
  .data-sale-partial-sheet::before {
    display: none !important;
  }

  .data-sale-partial-sheet,
  .data-sale-details-sheet {
    box-shadow: none !important;
  }
}

/* =====================================================================
   ESTEIRA V14 — TEXTURA / PROFUNDIDADE / ILUMINAÇÃO / LEGIBILIDADE
   Mesma linguagem visual do relatório DATA VENDA.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) TIPOGRAFIA MAIS NÍTIDA
   --------------------------------------------------------------------- */

.pipeline-shell,
.pipeline-commandbar,
.pipeline-stage,
.pipeline-table,
.pipeline-tab,
.pipeline-advanced-filter-button {
  font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif !important;

  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Cabeçalhos */
.pipeline-table th {
  font-size: 8.1px !important;
  font-weight: 730 !important;
  line-height: 1.15 !important;
  letter-spacing: .024em !important;
}


/* Conteúdo */
.pipeline-table td {
  font-size: 10.2px !important;
  font-weight: 590 !important;
  line-height: 1.2 !important;
  letter-spacing: -.008em !important;
}


/* Dados principais */
.pipeline-client {
  font-size: 10.3px !important;
  font-weight: 680 !important;
  letter-spacing: -.010em !important;
}

.pipeline-consultant {
  font-size: 10.1px !important;
  font-weight: 660 !important;
  letter-spacing: -.008em !important;
}

.pipeline-phase {
  font-size: 10px !important;
  font-weight: 690 !important;
  letter-spacing: -.006em !important;
}

.pipeline-money,
.pipeline-commission,
.pipeline-promoter-cell {
  font-size: 10.2px !important;
  font-weight: 680 !important;
  font-variant-numeric: tabular-nums;
}


/* ID continua secundário, mas mais limpo */
.pipeline-lc {
  font-size: 8px !important;
  font-weight: 560 !important;
  letter-spacing: -.015em !important;
}


/* ---------------------------------------------------------------------
   2) FUNDO DA ÁREA — TEXTURA SUTIL
   --------------------------------------------------------------------- */

#section-pipeline.pipeline-workspace {
  position: relative !important;
  isolation: isolate !important;
}

html[data-app-theme="dark"]
#section-pipeline.pipeline-workspace {
  background:
    radial-gradient(
      circle at 16% 3%,
      rgba(101, 118, 165, .052),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 13%,
      rgba(120, 95, 164, .032),
      transparent 31%
    ),
    repeating-linear-gradient(
      132deg,
      rgba(255,255,255,.005) 0,
      rgba(255,255,255,.005) 1px,
      transparent 1px,
      transparent 7px
    ),
    linear-gradient(
      180deg,
      #10161F 0%,
      #0F151D 52%,
      #0D131B 100%
    ) !important;
}

html[data-app-theme="light"]
#section-pipeline.pipeline-workspace {
  background:
    radial-gradient(
      circle at 16% 3%,
      rgba(135, 116, 83, .028),
      transparent 29%
    ),
    repeating-linear-gradient(
      132deg,
      rgba(70,58,40,.009) 0,
      rgba(70,58,40,.009) 1px,
      transparent 1px,
      transparent 8px
    ),
    linear-gradient(
      180deg,
      #F7F5EF 0%,
      #F4F2EC 54%,
      #F2F0EA 100%
    ) !important;
}


/* ---------------------------------------------------------------------
   3) BARRA SUPERIOR — PROFUNDIDADE
   --------------------------------------------------------------------- */

.pipeline-commandbar {
  position: relative !important;
  overflow: hidden !important;

  border-radius: 15px !important;
}

html[data-app-theme="dark"]
.pipeline-commandbar {
  background:
    radial-gradient(
      ellipse at 40% -35%,
      rgba(104, 123, 172, .105),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      #171F2A,
      #121923
    ) !important;

  border:
    1px solid
    rgba(102, 120, 147, .38) !important;

  border-top-color:
    rgba(146, 163, 192, .44) !important;

  box-shadow:
    0 16px 34px rgba(0,0,0,.20),
    0 4px 11px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.25) !important;
}

html[data-app-theme="light"]
.pipeline-commandbar {
  background:
    linear-gradient(
      180deg,
      #FFFDF9,
      #F9F7F2
    ) !important;

  border-color:
    #D0CBC0 !important;

  border-top-color:
    #BFB8AA !important;

  box-shadow:
    0 13px 30px rgba(73,62,44,.07),
    0 3px 9px rgba(73,62,44,.035),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}


/* Campo de busca fica "embutido" na barra */
html[data-app-theme="dark"]
.pipeline-search {
  min-height: 39px;

  padding:
    0
    12px;

  background:
    linear-gradient(
      180deg,
      rgba(9,14,20,.68),
      rgba(8,13,18,.76)
    );

  border:
    1px solid
    rgba(86,103,127,.22);

  border-radius: 11px;

  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.012);
}

html[data-app-theme="light"]
.pipeline-search {
  min-height: 39px;

  padding:
    0
    12px;

  background:
    linear-gradient(
      180deg,
      #FFFDF9,
      #F8F6F1
    );

  border:
    1px solid
    #DDD8CE;

  border-radius: 11px;

  box-shadow:
    inset 0 1px 3px rgba(91,80,61,.045),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.pipeline-search input {
  font-size: 11.3px !important;
  font-weight: 560 !important;
}


/* ---------------------------------------------------------------------
   4) CARD PRINCIPAL DA ESTEIRA — PROFUNDIDADE REAL
   --------------------------------------------------------------------- */

.pipeline-stage {
  position: relative !important;
  isolation: isolate !important;

  overflow: hidden !important;

  border-radius: 15px !important;
}

html[data-app-theme="dark"]
.pipeline-stage {
  background:
    radial-gradient(
      ellipse at 50% -15%,
      rgba(104, 122, 171, .12),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #161E29 0%,
      #111822 20%,
      #0E141C 100%
    ) !important;

  border:
    1px solid
    rgba(100, 118, 145, .42) !important;

  border-top-color:
    rgba(145, 163, 193, .48) !important;

  box-shadow:
    0 27px 60px rgba(0,0,0,.31),
    0 8px 20px rgba(0,0,0,.18),
    0 2px 5px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.054),
    inset 0 -1px 0 rgba(0,0,0,.32),
    inset 0 0 42px rgba(100,118,158,.024) !important;
}

html[data-app-theme="light"]
.pipeline-stage {
  background:
    radial-gradient(
      ellipse at 50% -12%,
      rgba(255,255,255,.92),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #FFFDF9,
      #FAF8F3
    ) !important;

  border:
    1px solid
    #CBC6BB !important;

  border-top-color:
    #BBB4A6 !important;

  box-shadow:
    0 22px 50px rgba(73,62,44,.09),
    0 6px 15px rgba(73,62,44,.045),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -1px 0 rgba(93,80,60,.05) !important;
}


/* Linha de luz superior */
.pipeline-stage::before {
  content: "";

  position: absolute;

  top: 0;
  left: 5%;
  right: 5%;

  height: 1px;

  z-index: 8;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(205,218,246,.16) 18%,
      rgba(226,235,255,.30) 50%,
      rgba(205,218,246,.16) 82%,
      transparent
    );
}


/* Textura fina interna */
.pipeline-stage::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      118deg,
      rgba(255,255,255,.012) 0,
      rgba(255,255,255,.012) 1px,
      transparent 1px,
      transparent 6px
    );

  opacity: .28;

  mix-blend-mode: soft-light;
}

.pipeline-stage > * {
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------------------
   5) TOOLBAR DAS ABAS — CAMADA PRÓPRIA
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.pipeline-stage-toolbar {
  background:
    radial-gradient(
      ellipse at 42% -40%,
      rgba(107,126,174,.09),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      #171F2B,
      #121923
    ) !important;

  border-bottom:
    1px solid
    rgba(99,117,143,.31) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -5px 14px rgba(0,0,0,.08) !important;
}

html[data-app-theme="light"]
.pipeline-stage-toolbar {
  background:
    linear-gradient(
      180deg,
      #F6F5F0,
      #EFEEE8
    ) !important;

  border-bottom:
    1px solid
    #D1CCC2 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -4px 12px rgba(91,80,61,.025) !important;
}


/* ---------------------------------------------------------------------
   6) ABAS — PROFUNDIDADE SEM MUDAR COR ESCOLHIDA
   --------------------------------------------------------------------- */

.pipeline-tab {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 3px 7px rgba(0,0,0,.07) !important;
}

html[data-app-theme="dark"]
.pipeline-tab {
  background:
    linear-gradient(
      180deg,
      #171E28,
      #111720
    ) !important;

  border-color:
    rgba(91,108,133,.32) !important;
}

html[data-app-theme="dark"]
.pipeline-tab:hover {
  background:
    linear-gradient(
      180deg,
      #1D2632,
      #161D28
    ) !important;

  border-color:
    rgba(116,134,164,.43) !important;
}

html[data-app-theme="dark"]
.pipeline-tab.is-active {
  background:
    radial-gradient(
      ellipse at 50% -30%,
      color-mix(
        in srgb,
        var(--pipeline-tab-color, var(--app-mint)) 10%,
        transparent
      ),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      #1C2531,
      #151D28
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--pipeline-tab-color, var(--app-mint)) 28%,
      rgba(102,119,145,.42)
    ) !important;

  box-shadow:
    inset 0 2px 0
    color-mix(
      in srgb,
      var(--pipeline-tab-color, var(--app-mint)) 60%,
      transparent
    ),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 -5px 16px
    color-mix(
      in srgb,
      var(--pipeline-tab-color, var(--app-mint)) 5%,
      transparent
    ) !important;
}

html[data-app-theme="light"]
.pipeline-tab {
  background:
    linear-gradient(
      180deg,
      #FAF9F5,
      #F0EEE8
    ) !important;

  border-color:
    #D2CDC3 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 2px 5px rgba(73,62,44,.035) !important;
}

html[data-app-theme="light"]
.pipeline-tab.is-active {
  background:
    linear-gradient(
      180deg,
      #FFFFFF,
      #F7F5EF
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--pipeline-tab-color, #5CC8A6) 30%,
      #C9C4B9
    ) !important;

  box-shadow:
    inset 0 2px 0
    color-mix(
      in srgb,
      var(--pipeline-tab-color, #5CC8A6) 62%,
      transparent
    ),
    0 -3px 10px rgba(73,62,44,.035) !important;
}

.pipeline-tab-main strong {
  font-size: 9.2px !important;
  font-weight: 680 !important;
  letter-spacing: -.006em !important;
}

/* Garantia visual extra: contador dentro de aba nunca aparece. */
.pipeline-tab-main > b {
  display: none !important;
}


/* ---------------------------------------------------------------------
   7) CABEÇALHO DA TABELA — CAMADA MAIS NÍTIDA
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.pipeline-table thead,
html[data-app-theme="dark"]
.pipeline-table thead th {
  background:
    linear-gradient(
      180deg,
      #121A24,
      #0D141D
    ) !important;

  border-color:
    rgba(88,105,130,.33) !important;
}

html[data-app-theme="dark"]
.pipeline-table thead th {
  color:
    #AEB9C6 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    inset 0 -4px 10px rgba(0,0,0,.10) !important;
}

html[data-app-theme="light"]
.pipeline-table thead,
html[data-app-theme="light"]
.pipeline-table thead th {
  background:
    linear-gradient(
      180deg,
      #F0EEE8,
      #E8E6DF
    ) !important;

  border-color:
    #D2CDC3 !important;
}

html[data-app-theme="light"]
.pipeline-table thead th {
  color:
    #56605C !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 -3px 9px rgba(91,80,61,.024) !important;
}


/* ---------------------------------------------------------------------
   8) CORPO — LINHAS COM PROFUNDIDADE SUTIL
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.pipeline-table tbody td {
  color:
    #E7EDF2 !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.014),
      rgba(0,0,0,.027)
    ) !important;

  border-color:
    rgba(102,119,143,.23) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.006) !important;
}

html[data-app-theme="dark"]
.pipeline-table tbody tr:nth-child(even) td {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.020),
      rgba(0,0,0,.021)
    ) !important;
}

html[data-app-theme="dark"]
.pipeline-table tbody tr:hover td {
  background:
    linear-gradient(
      180deg,
      rgba(116,136,180,.072),
      rgba(84,101,137,.032)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.014) !important;
}

html[data-app-theme="light"]
.pipeline-table tbody td {
  color:
    #242A27 !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.58),
      rgba(110,95,72,.012)
    ) !important;

  border-color:
    #DED9CF !important;
}

html[data-app-theme="light"]
.pipeline-table tbody tr:nth-child(even) td {
  background:
    linear-gradient(
      180deg,
      #FCFBF7,
      #F8F6F1
    ) !important;
}

html[data-app-theme="light"]
.pipeline-table tbody tr:hover td {
  background:
    linear-gradient(
      180deg,
      #FFFFFF,
      #F2F1EB
    ) !important;
}


/* ---------------------------------------------------------------------
   9) AVATARES / STATUS / FASE — MAIS "FÍSICOS"
   --------------------------------------------------------------------- */

.pipeline-table
.pipeline-consultant-avatar {
  border-color:
    color-mix(
      in srgb,
      var(--app-border) 72%,
      var(--app-mint) 12%
    ) !important;

  box-shadow:
    0 3px 8px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.pipeline-unlocked {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 2px 5px rgba(0,0,0,.08);
}

.pipeline-phase i {
  box-shadow:
    0 0 8px
    color-mix(
      in srgb,
      var(--phase-color) 22%,
      transparent
    ),
    0 2px 5px rgba(0,0,0,.12) !important;
}


/* ---------------------------------------------------------------------
   10) FILTRO GERAL — CONTADOR CONTINUA AQUI
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.pipeline-advanced-filter-button {
  background:
    linear-gradient(
      180deg,
      rgba(24,32,43,.94),
      rgba(17,24,33,.96)
    ) !important;

  border-color:
    rgba(94,111,136,.34) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 3px 8px rgba(0,0,0,.10) !important;
}

html[data-app-theme="light"]
.pipeline-advanced-filter-button {
  background:
    linear-gradient(
      180deg,
      #FFFDF9,
      #F4F2EC
    ) !important;

  border-color:
    #D2CDC3 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 2px 6px rgba(73,62,44,.035) !important;
}


/* ---------------------------------------------------------------------
   11) SCROLL HORIZONTAL — MAIS DISCRETO
   --------------------------------------------------------------------- */

.pipeline-table-scroll::-webkit-scrollbar {
  height: 6px !important;
  width: 7px !important;
}

.pipeline-table-scroll::-webkit-scrollbar-thumb {
  background:
    color-mix(
      in srgb,
      var(--app-mint) 22%,
      rgba(104,120,145,.32)
    ) !important;

  border-radius: 999px !important;
}

.pipeline-table-scroll::-webkit-scrollbar-thumb:hover {
  background:
    color-mix(
      in srgb,
      var(--app-mint) 34%,
      rgba(104,120,145,.38)
    ) !important;
}


/* ---------------------------------------------------------------------
   12) MODO EDIÇÃO — CONTINUA INTEGRADO AO NOVO VISUAL
   --------------------------------------------------------------------- */

html[data-app-theme="dark"]
.pipeline-row.is-inline-editing td,
html[data-app-theme="dark"]
.pipeline-table tbody tr:has(.pipeline-inline-input) td {
  background:
    linear-gradient(
      180deg,
      rgba(110,127,166,.052),
      rgba(74,91,124,.022)
    ) !important;
}


/* ---------------------------------------------------------------------
   13) PRINT
   --------------------------------------------------------------------- */

@media print {
  .pipeline-commandbar,
  .pipeline-stage {
    box-shadow: none !important;
  }

  .pipeline-stage::before,
  .pipeline-stage::after {
    display: none !important;
  }
}

/* =====================================================================
   ESTEIRA V14.1 — MAIS ALTURA ÚTIL
   Aproveita melhor o espaço inferior sem alterar largura/estrutura.
   ===================================================================== */

.pipeline-stage {
  /*
    Antes: calc(100vh - 184px)
    Agora ganhamos aproximadamente 44px de área vertical.
  */
  min-height: calc(100vh - 140px) !important;
}


/*
  Em notebooks/telas mais baixas, evita exagerar no crescimento
  e mantém a navegação confortável.
*/
@media (max-height: 700px) {
  .pipeline-stage {
    min-height: calc(100vh - 158px) !important;
  }
}

/* =====================================================================
   FASES PADRÃO DO SISTEMA V15
   ===================================================================== */

.phase-row.is-inactive {
  opacity: .68;
}

.phase-row.is-inactive .phase-copy strong,
.phase-row.is-inactive .phase-color {
  filter: saturate(.45);
}

.phase-name-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.phase-system-chip {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 6.4px;
  font-weight: 850;
  letter-spacing: .045em;
  white-space: nowrap;
  color: var(--app-muted);
  background: color-mix(in srgb, var(--app-control) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-border) 88%, transparent);
}

.phase-active-switch {
  position: relative;
  width: 36px;
  min-width: 36px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.phase-active-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.phase-active-switch > span {
  width: 36px;
  height: 20px;
  display: block;
  position: relative;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-muted) 18%, var(--app-control));
  border: 1px solid color-mix(in srgb, var(--app-border) 92%, transparent);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.13);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.phase-active-switch > span::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--app-muted);
  box-shadow: 0 2px 5px rgba(0,0,0,.22);
  transition: transform .17s ease, background .17s ease;
}

.phase-active-switch input:checked + span {
  background: color-mix(in srgb, var(--app-mint) 13%, var(--app-control));
  border-color: color-mix(in srgb, var(--app-mint) 38%, var(--app-border));
  box-shadow: inset 0 1px 3px rgba(0,0,0,.10), 0 0 0 2px color-mix(in srgb, var(--app-mint) 3%, transparent);
}

.phase-active-switch input:checked + span::after {
  transform: translateX(16px);
  background: var(--app-mint);
}

.phase-active-switch input:focus-visible + span {
  outline: 2px solid color-mix(in srgb, var(--app-mint) 45%, transparent);
  outline-offset: 2px;
}

.phase-active-switch input:disabled + span {
  opacity: .55;
  cursor: progress;
}

.phase-system-lock {
  width: 32px;
  min-width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--app-muted-2);
  border: 1px solid transparent;
  border-radius: 9px;
}

.phase-system-lock svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phase-row.is-system-phase {
  border-color: color-mix(in srgb, var(--app-border) 82%, var(--app-muted) 10%);
}

.phases-system-info {
  margin: 12px 14px 14px;
  min-height: 46px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--app-muted);
  background: color-mix(in srgb, var(--app-surface-2) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-border) 84%, transparent);
  border-radius: 11px;
}

.phases-system-info.hidden {
  display: none !important;
}

.phases-system-info-icon {
  width: 24px;
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--app-text-strong);
  background: color-mix(in srgb, var(--app-control) 88%, transparent);
  border: 1px solid var(--app-border);
  font-size: 10px;
  font-weight: 850;
  font-family: Georgia, serif;
  font-style: italic;
}

.phases-system-info p {
  margin: 0;
  font-size: 9px;
  line-height: 1.45;
  font-weight: 580;
}

html[data-app-theme="dark"] .phase-row.is-system-phase {
  background:
    radial-gradient(circle at 12% -20%, rgba(111,126,158,.055), transparent 33%),
    linear-gradient(180deg, rgba(255,255,255,.012), rgba(0,0,0,.018));
}

html[data-app-theme="dark"] .phase-system-chip {
  color: #AEB8C5;
  background: rgba(120,135,160,.07);
  border-color: rgba(123,139,166,.22);
}

html[data-app-theme="dark"] .phases-system-info {
  background:
    linear-gradient(180deg, rgba(24,31,42,.82), rgba(18,24,33,.86));
  border-color: rgba(104,121,147,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

html[data-app-theme="light"] .phase-system-chip {
  color: #5E665F;
  background: #F0EEE8;
  border-color: #D2CDC2;
}

html[data-app-theme="light"] .phases-system-info {
  color: #626A64;
  background: #F5F3ED;
  border-color: #D5D0C5;
}

/* O nome de fase padrão fica visualmente protegido no modal. */
#phase-name:disabled {
  cursor: not-allowed;
  opacity: .78;
}

/* =====================================================================
   PERMISSÕES / SESSÃO V16 — CORREÇÕES DE VISIBILIDADE
   ===================================================================== */

/*
  Algumas regras antigas da proposta usam display:grid!important.
  Estes seletores garantem que a permissão do perfil sempre vença.
*/
#proposal-drawer-backdrop .proposal-field.hidden,
#proposal-drawer-backdrop #proposal-table-field.hidden,
#proposal-drawer-backdrop #proposal-percent-field.hidden,
#proposal-drawer-backdrop #proposal-commission-field.hidden {
  display: none !important;
}


/*
  No menu recolhido existiam regras mais específicas com
  display:flex!important, que venciam .hidden.
  Resultado: perfis como COLABORADOR enxergavam ícones de menus que
  não possuíam até expandir a sidebar.
*/
#app-view.sidebar-collapsed
#master-sidebar-nav
.nav.hidden,
#app-view.sidebar-collapsed
#platform-sidebar-nav
.nav.hidden {
  display: none !important;
}


/* Cargo não pertence mais ao card lateral do usuário. */
#admin-job-title,
.sidebar-job-title {
  display: none !important;
}


/* =====================================================================
   PROPOSTA V18 — CAMPOS EDITÁVEIS x SOMENTE LEITURA
   No tema escuro, campos que o usuário pode preencher ficam mais claros.
   Campos bloqueados/readonly ficam cinza e visualmente secundários.
   ===================================================================== */

html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-field input:not([type="hidden"]):not(:disabled):not([readonly]),
html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-field .corban-employee-select:not(.is-disabled) .corban-employee-select-trigger,
html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-money-shell:has(input:not(:disabled):not([readonly])),
html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-percent-shell:has(input:not(:disabled):not([readonly])) {
  color: #F4F7FA !important;
  background: #202A35 !important;
  border-color: #566474 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-field input:not([type="hidden"]):not(:disabled):not([readonly]):hover,
html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-field .corban-employee-select:not(.is-disabled) .corban-employee-select-trigger:hover,
html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-money-shell:has(input:not(:disabled):not([readonly])):hover {
  background: #25313D !important;
  border-color: #657587 !important;
}

html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-field input:not([type="hidden"]):disabled,
html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-field input:not([type="hidden"])[readonly],
html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-field .corban-employee-select.is-disabled .corban-employee-select-trigger,
html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-money-shell:has(input:disabled),
html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-percent-shell:has(input:disabled),
html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-money-shell:has(input[readonly]),
html[data-app-theme="dark"] #proposal-drawer-backdrop
.proposal-percent-shell:has(input[readonly]) {
  color: #7F8996 !important;
  background: #151B23 !important;
  border-color: #303A46 !important;
  box-shadow: none !important;
}

#proposal-drawer-backdrop .proposal-form .corban-employee-select.is-disabled {
  opacity: 1 !important;
}

#proposal-drawer-backdrop .proposal-field input:disabled,
#proposal-drawer-backdrop .proposal-field input[readonly],
#proposal-drawer-backdrop .proposal-form .corban-employee-select.is-disabled
.corban-employee-select-trigger {
  cursor: default !important;
}

html[data-app-theme="light"] #proposal-drawer-backdrop
.proposal-field input:not([type="hidden"]):not(:disabled):not([readonly]),
html[data-app-theme="light"] #proposal-drawer-backdrop
.proposal-field .corban-employee-select:not(.is-disabled) .corban-employee-select-trigger,
html[data-app-theme="light"] #proposal-drawer-backdrop
.proposal-money-shell:has(input:not(:disabled):not([readonly])),
html[data-app-theme="light"] #proposal-drawer-backdrop
.proposal-percent-shell:has(input:not(:disabled):not([readonly])) {
  color: #20262D !important;
  background: #FFFFFF !important;
  border-color: #B9C4CF !important;
}

html[data-app-theme="light"] #proposal-drawer-backdrop
.proposal-field input:not([type="hidden"]):disabled,
html[data-app-theme="light"] #proposal-drawer-backdrop
.proposal-field input:not([type="hidden"])[readonly],
html[data-app-theme="light"] #proposal-drawer-backdrop
.proposal-field .corban-employee-select.is-disabled .corban-employee-select-trigger,
html[data-app-theme="light"] #proposal-drawer-backdrop
.proposal-money-shell:has(input:disabled),
html[data-app-theme="light"] #proposal-drawer-backdrop
.proposal-percent-shell:has(input:disabled),
html[data-app-theme="light"] #proposal-drawer-backdrop
.proposal-money-shell:has(input[readonly]),
html[data-app-theme="light"] #proposal-drawer-backdrop
.proposal-percent-shell:has(input[readonly]) {
  color: #858D97 !important;
  background: #ECEFF3 !important;
  border-color: #D5DAE0 !important;
  box-shadow: none !important;
}


/* =========================================================
   DESTAQUE DE VALOR POR PERMISSÃO — V22
   Quem pode ver comissão: comissão verde.
   Quem não pode: contrato verde.
   ========================================================= */

.pipeline-value-highlight {
  color: var(--app-mint) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums;
}

/* O editor inline usa inputs dentro da célula. */
.pipeline-value-highlight input,
.pipeline-value-highlight .pipeline-inline-readonly {
  color: var(--app-mint) !important;
  font-weight: 900 !important;
}

.proposal-value-highlight .proposal-money-shell,
.proposal-value-highlight .proposal-percent-shell {
  border-color: color-mix(in srgb, var(--app-mint) 42%, #344039) !important;
  background: color-mix(in srgb, var(--app-mint) 5%, #101712) !important;
}

.proposal-value-highlight .proposal-money-shell > span,
.proposal-value-highlight .proposal-percent-shell > span,
.proposal-value-highlight .proposal-money-shell input,
.proposal-value-highlight .proposal-percent-shell input {
  color: var(--app-mint) !important;
  font-weight: 800 !important;
}

html[data-app-theme="light"] .proposal-value-highlight .proposal-money-shell,
html[data-app-theme="light"] .proposal-value-highlight .proposal-percent-shell {
  border-color: color-mix(in srgb, var(--app-mint) 48%, #c8d2cc) !important;
  background: color-mix(in srgb, var(--app-mint) 7%, #ffffff) !important;
}


/* =========================================================
   DESTAQUE DE VALOR POR PERMISSÃO — V23
   O valor inteiro (prefixo + número) recebe o verde.
   Regras mais específicas para vencer os estilos de readonly.
   ========================================================= */

/* ESTEIRA: pinta a célula inteira e qualquer conteúdo interno. */
.pipeline-table td.pipeline-value-highlight,
.pipeline-table td.pipeline-value-highlight *,
.pipeline-table td.pipeline-value-highlight input,
.pipeline-table td.pipeline-value-highlight .pipeline-inline-readonly {
  color: var(--app-mint) !important;
  -webkit-text-fill-color: var(--app-mint) !important;
  font-weight: 900 !important;
}

/* DRAWER: pinta R$, número e eventuais conteúdos internos do campo destacado. */
#proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-money-shell,
#proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-percent-shell {
  border-color: color-mix(in srgb, var(--app-mint) 42%, #344039) !important;
  background: color-mix(in srgb, var(--app-mint) 5%, #101712) !important;
}

#proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-money-shell > span,
#proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-percent-shell > span,
#proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-money-shell input,
#proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-percent-shell input,
#proposal-drawer-backdrop .proposal-field.proposal-value-highlight input[readonly],
#proposal-drawer-backdrop .proposal-field.proposal-value-highlight input:disabled {
  color: var(--app-mint) !important;
  -webkit-text-fill-color: var(--app-mint) !important;
  opacity: 1 !important;
  font-weight: 900 !important;
}

html[data-app-theme="light"] #proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-money-shell,
html[data-app-theme="light"] #proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-percent-shell {
  border-color: color-mix(in srgb, var(--app-mint) 48%, #c8d2cc) !important;
  background: color-mix(in srgb, var(--app-mint) 7%, #ffffff) !important;
}


/* =====================================================================
   ESTEIRA / VALORES — CORREÇÃO DEFINITIVA V24
   - Nenhuma regra visual depende mais da posição nth-child.
   - A chave data-pipeline-column identifica cada coluna.
   - Comissão visível = comissão verde.
   - Comissão não visível = contrato verde via classe aplicada no JS.
   ===================================================================== */

/* O colgroup gerado pelo JS passa a ser a única fonte de largura. */
.pipeline-table th[data-pipeline-column],
.pipeline-table td[data-pipeline-column] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: table-cell !important;
  vertical-align: middle !important;
  text-align: center !important;
}

/* Colunas identificadas por chave, nunca por índice. */
.pipeline-table th[data-pipeline-column="unlocked"],
.pipeline-table td[data-pipeline-column="unlocked"],
.pipeline-table th[data-pipeline-column="actions"],
.pipeline-table td[data-pipeline-column="actions"] {
  text-align: center !important;
}

.pipeline-table td[data-pipeline-column="unlocked"] .pipeline-unlocked,
.pipeline-table td[data-pipeline-column="actions"] .pipeline-row-open {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Se a coluna COMISSÃO existe, o perfil tem permissão financeira.
   Portanto R$ + valor inteiro ficam verdes sem depender de outra classe. */
.pipeline-table td[data-pipeline-column="commission_value"],
.pipeline-table td[data-pipeline-column="commission_value"] *,
.pipeline-table td[data-pipeline-column="commission_value"] .pipeline-highlight-value,
.pipeline-table td[data-pipeline-column="commission_value"] input {
  color: var(--app-mint) !important;
  -webkit-text-fill-color: var(--app-mint) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

/* Contrato recebe verde somente nos perfis sem acesso à comissão. */
.pipeline-table td[data-pipeline-column="contract_value"].pipeline-value-highlight,
.pipeline-table td[data-pipeline-column="contract_value"].pipeline-value-highlight * {
  color: var(--app-mint) !important;
  -webkit-text-fill-color: var(--app-mint) !important;
  font-weight: 900 !important;
}

/* Drawer: classe colocada diretamente no shell/input para vencer readonly. */
#proposal-drawer-backdrop .proposal-money-shell.proposal-highlight-shell,
#proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-money-shell {
  border-color: color-mix(in srgb, var(--app-mint) 42%, #344039) !important;
  background: color-mix(in srgb, var(--app-mint) 5%, #101712) !important;
}

#proposal-drawer-backdrop .proposal-money-shell.proposal-highlight-shell > span,
#proposal-drawer-backdrop .proposal-money-shell.proposal-highlight-shell input,
#proposal-drawer-backdrop input.proposal-highlight-input,
#proposal-drawer-backdrop #proposal-commission-field:not(.hidden) .proposal-money-shell > span,
#proposal-drawer-backdrop #proposal-commission-field:not(.hidden) .proposal-money-shell input {
  color: var(--app-mint) !important;
  -webkit-text-fill-color: var(--app-mint) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

html[data-app-theme="light"] #proposal-drawer-backdrop .proposal-money-shell.proposal-highlight-shell,
html[data-app-theme="light"] #proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-money-shell {
  border-color: color-mix(in srgb, var(--app-mint) 48%, #c8d2cc) !important;
  background: color-mix(in srgb, var(--app-mint) 7%, #ffffff) !important;
}


/* =====================================================================
   CONDIÇÃO COMERCIAL + DESTAQUE DE VALORES — V26
   - Verde exato #00B050 no tema escuro.
   - Brilho orgânico: sem halo retangular/"caixa" visível ao redor do campo.
   ===================================================================== */

html[data-app-theme="dark"] .pipeline-table td[data-pipeline-column="commission_value"],
html[data-app-theme="dark"] .pipeline-table td[data-pipeline-column="commission_value"] *,
html[data-app-theme="dark"] .pipeline-table td[data-pipeline-column="contract_value"].pipeline-value-highlight,
html[data-app-theme="dark"] .pipeline-table td[data-pipeline-column="contract_value"].pipeline-value-highlight *,
html[data-app-theme="dark"] #proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-money-shell > span,
html[data-app-theme="dark"] #proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-money-shell input,
html[data-app-theme="dark"] #proposal-drawer-backdrop .proposal-money-shell.proposal-highlight-shell > span,
html[data-app-theme="dark"] #proposal-drawer-backdrop .proposal-money-shell.proposal-highlight-shell input,
html[data-app-theme="dark"] #proposal-drawer-backdrop input.proposal-highlight-input,
html[data-app-theme="dark"] #proposal-drawer-backdrop #proposal-commission-field:not(.hidden) .proposal-money-shell > span,
html[data-app-theme="dark"] #proposal-drawer-backdrop #proposal-commission-field:not(.hidden) .proposal-money-shell input {
  color: #00B050 !important;
  -webkit-text-fill-color: #00B050 !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  text-shadow:
    0 0 3px rgba(0, 176, 80, 0.58),
    0 0 9px rgba(0, 176, 80, 0.30),
    0 0 20px rgba(0, 176, 80, 0.10) !important;
}

html[data-app-theme="dark"] #proposal-drawer-backdrop .proposal-money-shell.proposal-highlight-shell,
html[data-app-theme="dark"] #proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-money-shell {
  border-color: rgba(0, 176, 80, 0.56) !important;
  background:
    radial-gradient(ellipse 58% 110% at 18% 50%, rgba(0, 176, 80, 0.105) 0%, rgba(0, 176, 80, 0.040) 46%, rgba(0, 176, 80, 0) 100%),
    rgba(255, 255, 255, 0.008) !important;
  box-shadow:
    inset 0 0 20px rgba(0, 176, 80, 0.040),
    inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
}

/* =====================================================================
   DESTAQUE VERDE — V27
   Brilho orgânico sem recorte retangular.
   O halo amplo do text-shadow anterior atingia os limites do input e
   ficava visualmente recortado pela caixa do elemento. Aqui o brilho é
   curto e difuso, concentrado nas próprias letras/números.
   ===================================================================== */

html[data-app-theme="dark"] .pipeline-table td[data-pipeline-column="commission_value"],
html[data-app-theme="dark"] .pipeline-table td[data-pipeline-column="commission_value"] *,
html[data-app-theme="dark"] .pipeline-table td[data-pipeline-column="contract_value"].pipeline-value-highlight,
html[data-app-theme="dark"] .pipeline-table td[data-pipeline-column="contract_value"].pipeline-value-highlight *,
html[data-app-theme="dark"] #proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-money-shell > span,
html[data-app-theme="dark"] #proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-money-shell input,
html[data-app-theme="dark"] #proposal-drawer-backdrop .proposal-money-shell.proposal-highlight-shell > span,
html[data-app-theme="dark"] #proposal-drawer-backdrop .proposal-money-shell.proposal-highlight-shell input,
html[data-app-theme="dark"] #proposal-drawer-backdrop input.proposal-highlight-input,
html[data-app-theme="dark"] #proposal-drawer-backdrop #proposal-commission-field:not(.hidden) .proposal-money-shell > span,
html[data-app-theme="dark"] #proposal-drawer-backdrop #proposal-commission-field:not(.hidden) .proposal-money-shell input {
  color: #00B050 !important;
  -webkit-text-fill-color: #00B050 !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  /* brilho curto: não alcança as bordas do input, portanto não recorta */
  text-shadow:
    0 0 2px rgba(0, 176, 80, 0.72),
    0 0 5px rgba(0, 176, 80, 0.28) !important;
}

html[data-app-theme="dark"] #proposal-drawer-backdrop .proposal-money-shell.proposal-highlight-shell,
html[data-app-theme="dark"] #proposal-drawer-backdrop .proposal-field.proposal-value-highlight .proposal-money-shell {
  border-color: rgba(0, 176, 80, 0.62) !important;
  /* sem radial-gradient/halo interno: ele evidenciava a caixa do campo */
  background: rgba(0, 176, 80, 0.018) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
}

/* =====================================================================
   ACOMPANHAMENTO DA PROPOSTA — V28
   Histórico técnico + interações em painel próprio.
   ===================================================================== */

body.proposal-followup-open {
  overflow: hidden;
}

.proposal-section-head-actions {
  margin-left: auto;
  margin-right: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.proposal-section-head-first .proposal-section-head-actions .proposal-close-button {
  margin: 0 !important;
}

.proposal-followup-button {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-accent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent) 20%, var(--app-border));
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.proposal-followup-button svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.proposal-followup-button:hover:not(:disabled) {
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--app-accent) 36%, var(--app-border));
  transform: translateY(-1px);
}

.proposal-followup-button:disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none;
}

.pipeline-row-actions {
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.pipeline-row-followup {
  color: color-mix(in srgb, var(--app-accent) 76%, var(--app-muted)) !important;
}

.pipeline-row-followup:hover {
  color: var(--app-accent) !important;
}

.proposal-followup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 108;
  padding: 28px;
  display: grid;
  place-items: center;
  background: rgba(2, 5, 4, .72);
  backdrop-filter: blur(10px);
}

.proposal-followup-panel {
  width: min(1120px, 96vw);
  height: min(760px, 92vh);
  min-height: 520px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-surface) 96%, #071009);
  border: 1px solid color-mix(in srgb, var(--app-accent) 20%, var(--app-border));
  border-radius: 20px;
  box-shadow: 0 32px 110px rgba(0, 0, 0, .50);
}

.proposal-followup-head {
  min-height: 82px;
  padding: 17px 20px 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-surface-2) 94%, transparent);
}

.proposal-followup-head > div {
  min-width: 0;
}

.proposal-followup-head small,
.proposal-followup-head h3,
.proposal-followup-head span {
  display: block;
}

.proposal-followup-head small {
  color: var(--app-accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
}

.proposal-followup-head h3 {
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--app-text);
  font-size: 17px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proposal-followup-head span {
  margin-top: 4px;
  color: var(--app-muted);
  font-size: 9px;
}

.proposal-followup-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--app-muted);
  background: transparent;
  border: 1px solid var(--app-border);
  border-radius: 11px;
  font-size: 19px;
  cursor: pointer;
}

.proposal-followup-close:hover {
  color: var(--app-text);
  border-color: color-mix(in srgb, var(--app-accent) 32%, var(--app-border));
  background: color-mix(in srgb, var(--app-accent) 5%, transparent);
}

.proposal-followup-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
}

.proposal-followup-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: transparent;
}

.proposal-followup-comments-pane {
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-surface-2) 32%, transparent);
}

.proposal-followup-pane-head {
  min-height: 68px;
  padding: 16px 18px 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--app-border);
}

.proposal-followup-pane-head strong,
.proposal-followup-pane-head small {
  display: block;
}

.proposal-followup-pane-head strong {
  color: var(--app-text);
  font-size: 12px;
}

.proposal-followup-pane-head small {
  margin-top: 4px;
  color: var(--app-muted);
  font-size: 8px;
  line-height: 1.4;
}

.proposal-followup-scroll,
.proposal-followup-comments-scroll {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--app-accent) 28%, transparent) transparent;
}

.proposal-followup-history-list,
.proposal-followup-comments-list {
  padding: 7px 18px 20px;
}

.proposal-followup-history-item {
  position: relative;
  padding: 15px 4px 15px 24px;
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid color-mix(in srgb, var(--app-border) 72%, transparent);
}

.proposal-followup-history-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--app-accent) 16%, var(--app-border));
}

.proposal-followup-history-item:first-child::before {
  top: 22px;
}

.proposal-followup-history-item:last-child::before {
  bottom: calc(100% - 23px);
}

.proposal-followup-history-dot {
  position: absolute;
  left: 4px;
  top: 20px;
  z-index: 1;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--app-accent);
  border: 2px solid var(--app-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 10%, transparent);
}

.proposal-followup-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.proposal-followup-item-meta strong {
  overflow: hidden;
  color: var(--app-text);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proposal-followup-item-meta time {
  flex: 0 0 auto;
  color: var(--app-muted-2);
  font-size: 7px;
}

.proposal-followup-history-item h4 {
  margin: 7px 0 0;
  color: color-mix(in srgb, var(--app-text) 92%, var(--app-accent));
  font-size: 10px;
  font-weight: 800;
}

.proposal-followup-history-item p {
  margin: 5px 0 0;
  color: var(--app-muted);
  font-size: 9px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.proposal-followup-comment-item {
  padding: 14px 2px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--app-border) 72%, transparent);
}

.proposal-followup-comment-avatar {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 7%, var(--app-surface));
  border: 1px solid color-mix(in srgb, var(--app-accent) 22%, var(--app-border));
  border-radius: 10px;
  font-size: 10px;
  font-weight: 900;
}

.proposal-followup-comment-body p {
  margin: 7px 0 0;
  color: var(--app-text);
  font-size: 9px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.proposal-followup-empty {
  padding: 34px 20px;
  color: var(--app-muted);
  font-size: 9px;
  text-align: center;
}

.proposal-comment-form {
  padding: 14px 16px 15px;
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-surface) 96%, transparent);
}

.proposal-comment-form textarea {
  width: 100%;
  min-height: 76px;
  max-height: 150px;
  resize: vertical;
  padding: 11px 12px;
  color: var(--app-text);
  background: var(--app-input);
  border: 1px solid var(--app-border-strong);
  border-radius: 12px;
  outline: none;
  font: inherit;
  font-size: 10px;
  line-height: 1.5;
}

.proposal-comment-form textarea:focus {
  border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 7%, transparent);
}

.proposal-comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.proposal-comment-actions small {
  color: var(--app-muted-2);
  font-size: 7px;
}

.proposal-comment-actions button {
  min-height: 36px;
  padding: 0 14px;
  color: #071009;
  background: linear-gradient(105deg, var(--app-accent), var(--app-mint));
  border: 0;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.proposal-comment-actions button:disabled {
  opacity: .55;
  cursor: wait;
}

html[data-app-theme="light"] .proposal-followup-panel {
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(34, 54, 45, .18);
}

html[data-app-theme="light"] .proposal-followup-comments-pane,
html[data-app-theme="light"] .proposal-followup-head,
html[data-app-theme="light"] .proposal-comment-form {
  background: #f8fbf9;
}

html[data-app-theme="light"] .proposal-followup-history-dot {
  border-color: #ffffff;
}

@media (max-width: 860px) {
  .proposal-followup-backdrop {
    padding: 10px;
  }

  .proposal-followup-panel {
    width: 100%;
    height: 96vh;
    min-height: 0;
    border-radius: 15px;
  }

  .proposal-followup-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }

  .proposal-followup-comments-pane {
    border-left: 0;
    border-top: 1px solid var(--app-border);
  }

  .proposal-section-head-actions {
    margin-right: 10px;
  }

  .proposal-followup-button span {
    display: none;
  }

  .proposal-followup-button {
    width: 36px;
    padding: 0;
  }
}

/* =====================================================================
   CABEÇALHO DA PROPOSTA / BOTÃO ACOMPANHAMENTO — V29
   Ajuste exclusivamente visual:
   - X no canto superior direito;
   - Acompanhamento deslocado para a esquerda;
   - menos espaço vazio antes dos campos;
   - tipografia mais legível nos temas claro e escuro.
   ===================================================================== */

.proposal-section-head-first {
  position: relative !important;
  min-height: 38px !important;
  margin: 0 -58px 12px !important;
  padding: 0 0 8px 58px !important;
}

.proposal-section-head-first .proposal-section-head-actions {
  margin-left: auto !important;
  margin-right: 58px !important;
  gap: 8px !important;
}

.proposal-section-head-first .proposal-close-button,
.proposal-section-head-first .proposal-section-head-actions .proposal-close-button {
  position: absolute !important;
  top: -4px !important;
  right: 12px !important;
  z-index: 3 !important;
  margin: 0 !important;
}

.proposal-followup-button {
  min-height: 34px !important;
  padding: 0 13px !important;
  gap: 7px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .005em !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.proposal-followup-button span {
  font: inherit !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.proposal-followup-button svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto;
  stroke-width: 1.9 !important;
}

html[data-app-theme="dark"] .proposal-followup-button {
  color: #e7eee9 !important;
  background: rgba(0, 176, 80, .055) !important;
  border-color: rgba(0, 176, 80, .24) !important;
}

html[data-app-theme="dark"] .proposal-followup-button:hover:not(:disabled) {
  color: #ffffff !important;
  background: rgba(0, 176, 80, .10) !important;
  border-color: rgba(0, 176, 80, .42) !important;
}

html[data-app-theme="light"] .proposal-followup-button {
  color: #253129 !important;
  background: #f8fbf9 !important;
  border-color: #bfd0c4 !important;
}

html[data-app-theme="light"] .proposal-followup-button:hover:not(:disabled) {
  color: #0b6b35 !important;
  background: #f1f8f3 !important;
  border-color: #8db49a !important;
}

.proposal-followup-button:disabled {
  opacity: .48 !important;
}

@media (max-width: 860px) {
  .proposal-section-head-first .proposal-section-head-actions {
    margin-right: 52px !important;
  }

  .proposal-section-head-first .proposal-close-button,
  .proposal-section-head-first .proposal-section-head-actions .proposal-close-button {
    right: 8px !important;
  }
}

/* =====================================================================
   ACOMPANHAMENTO DA PROPOSTA — V30 PREMIUM
   Painel redesenhado para uso intenso: mais legível, moderno e profundo.
   - textura criada apenas com CSS (sem imagens externas);
   - iluminação suave e orgânica;
   - histórico em cartões de timeline;
   - interações em cartões/balões;
   - composição adaptada aos temas claro e escuro.
   ===================================================================== */

.proposal-followup-backdrop {
  padding: 24px;
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 176, 80, .09), transparent 31%),
    radial-gradient(circle at 82% 88%, rgba(0, 176, 80, .055), transparent 30%),
    rgba(2, 5, 4, .80);
  backdrop-filter: blur(14px) saturate(115%);
}

.proposal-followup-panel {
  position: relative;
  isolation: isolate;
  width: min(1180px, 96vw);
  height: min(790px, 92vh);
  border: 1px solid rgba(84, 118, 101, .42);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 176, 80, .085), transparent 26%),
    radial-gradient(circle at 96% 16%, rgba(102, 255, 165, .04), transparent 25%),
    linear-gradient(145deg, rgba(18, 26, 23, .995), rgba(12, 18, 16, .995) 54%, rgba(9, 15, 13, .995));
  box-shadow:
    0 38px 110px rgba(0, 0, 0, .58),
    0 10px 32px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .045),
    inset 0 0 0 1px rgba(0, 176, 80, .025);
}

/* Textura quase imperceptível: cria materialidade sem "sujar" o painel. */
.proposal-followup-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  opacity: .42;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.010) 1px, transparent 1px),
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.020) 0 1px, transparent 1.5px);
  background-size: 34px 34px, 34px 34px, 17px 17px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.26) 58%, transparent 100%);
}

.proposal-followup-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 7%;
  right: 7%;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 176, 80, .60), rgba(108, 255, 174, .50), transparent);
  filter: drop-shadow(0 0 8px rgba(0, 176, 80, .36));
}

.proposal-followup-head {
  position: relative;
  min-height: 94px;
  padding: 20px 24px 18px 26px;
  border-bottom: 1px solid rgba(93, 124, 108, .24);
  background:
    linear-gradient(90deg, rgba(0, 176, 80, .055), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.006));
  backdrop-filter: blur(12px);
}

.proposal-followup-head::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -1px;
  width: 74px;
  height: 2px;
  border-radius: 999px;
  background: #00B050;
  box-shadow: 0 0 12px rgba(0, 176, 80, .48);
}

.proposal-followup-head small {
  color: #67e99d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
  text-shadow: 0 0 12px rgba(0, 176, 80, .18);
}

.proposal-followup-head h3 {
  margin-top: 5px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.proposal-followup-head span {
  margin-top: 5px;
  color: rgba(203, 219, 211, .64);
  font-size: 10px;
  letter-spacing: .01em;
}

.proposal-followup-close {
  width: 40px;
  height: 40px;
  border-color: rgba(111, 141, 126, .30);
  border-radius: 12px;
  background: rgba(255, 255, 255, .018);
  color: rgba(220, 232, 226, .66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.proposal-followup-close:hover {
  color: #f1fff7;
  border-color: rgba(0, 176, 80, .48);
  background: rgba(0, 176, 80, .075);
  box-shadow: 0 0 18px rgba(0, 176, 80, .10), inset 0 1px 0 rgba(255,255,255,.05);
  transform: translateY(-1px);
}

.proposal-followup-grid {
  position: relative;
  gap: 14px;
  padding: 14px;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  background: transparent;
}

.proposal-followup-pane {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(87, 115, 101, .22);
  border-radius: 18px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.022), rgba(255,255,255,.005)),
    rgba(12, 19, 16, .64);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.proposal-followup-history-pane {
  background:
    radial-gradient(circle at 12% 4%, rgba(0, 176, 80, .055), transparent 30%),
    linear-gradient(155deg, rgba(255,255,255,.020), rgba(255,255,255,.004)),
    rgba(12, 19, 16, .62);
}

.proposal-followup-comments-pane {
  border-left: 1px solid rgba(87, 115, 101, .22);
  background:
    radial-gradient(circle at 88% 0%, rgba(0, 176, 80, .045), transparent 32%),
    linear-gradient(155deg, rgba(255,255,255,.018), rgba(255,255,255,.003)),
    rgba(11, 18, 15, .72);
}

.proposal-followup-pane-head {
  min-height: 76px;
  padding: 17px 19px 15px;
  border-bottom: 1px solid rgba(90, 121, 105, .20);
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}

.proposal-followup-pane-head > div {
  position: relative;
  padding-left: 13px;
}

.proposal-followup-pane-head > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 3px;
  height: 28px;
  border-radius: 99px;
  background: #00B050;
  box-shadow: 0 0 10px rgba(0, 176, 80, .26);
}

.proposal-followup-pane-head strong {
  color: #eef8f2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.proposal-followup-pane-head small {
  margin-top: 5px;
  color: rgba(192, 208, 200, .56);
  font-size: 9px;
  line-height: 1.45;
}

.proposal-followup-scroll,
.proposal-followup-comments-scroll {
  padding: 4px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,176,80,.32) transparent;
}

.proposal-followup-history-list,
.proposal-followup-comments-list {
  padding: 12px 14px 20px;
}

/* Histórico: timeline com cartões, em vez de uma lista plana. */
.proposal-followup-history-item {
  position: relative;
  margin: 0 0 10px 14px;
  padding: 14px 15px 14px 19px;
  border: 1px solid rgba(93, 126, 108, .20);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.020), transparent 55%),
    rgba(19, 28, 24, .68);
  box-shadow: 0 8px 20px rgba(0,0,0,.11), inset 0 1px 0 rgba(255,255,255,.018);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.proposal-followup-history-item:hover {
  transform: translateX(2px);
  border-color: rgba(0, 176, 80, .30);
  background:
    linear-gradient(145deg, rgba(0,176,80,.035), transparent 60%),
    rgba(20, 30, 25, .76);
  box-shadow: 0 10px 24px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.025);
}

.proposal-followup-history-item::before {
  left: -13px;
  top: -11px;
  bottom: -11px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(0,176,80,.08), rgba(0,176,80,.30), rgba(0,176,80,.08));
}

.proposal-followup-history-item:first-child::before {
  top: 20px;
}

.proposal-followup-history-item:last-child::before {
  bottom: calc(100% - 23px);
}

.proposal-followup-history-dot {
  left: -17px;
  top: 19px;
  width: 9px;
  height: 9px;
  border: 2px solid #15221c;
  background: #38dd7f;
  box-shadow:
    0 0 0 4px rgba(0,176,80,.10),
    0 0 11px rgba(0,176,80,.26);
}

.proposal-followup-item-meta strong {
  color: #eaf6ef;
  font-size: 10px;
  font-weight: 700;
}

.proposal-followup-item-meta time {
  padding: 3px 7px;
  border: 1px solid rgba(103, 133, 117, .17);
  border-radius: 999px;
  color: rgba(188, 205, 196, .52);
  background: rgba(255,255,255,.012);
  font-size: 8px;
  white-space: nowrap;
}

.proposal-followup-history-item h4 {
  margin-top: 9px;
  color: #f2fbf6;
  font-size: 11px;
  font-weight: 700;
}

.proposal-followup-history-item p {
  margin-top: 6px;
  color: rgba(196, 213, 204, .66);
  font-size: 10px;
  line-height: 1.58;
}

/* Interações: aparência de conversa, com profundidade suficiente para uso diário. */
.proposal-followup-comment-item {
  margin-bottom: 10px;
  padding: 12px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  border: 1px solid rgba(92, 123, 106, .18);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.018), transparent 58%),
    rgba(18, 27, 23, .64);
  box-shadow: 0 7px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.016);
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.proposal-followup-comment-item:hover {
  transform: translateY(-1px);
  border-color: rgba(0,176,80,.25);
  background:
    linear-gradient(145deg, rgba(0,176,80,.028), transparent 62%),
    rgba(19, 29, 24, .72);
}

.proposal-followup-comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: #70f1a5;
  background:
    radial-gradient(circle at 35% 25%, rgba(106,255,166,.10), transparent 52%),
    rgba(0, 176, 80, .075);
  border: 1px solid rgba(0, 176, 80, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.12);
  font-size: 11px;
  font-weight: 800;
}

.proposal-followup-comment-body p {
  margin-top: 8px;
  padding: 10px 11px;
  color: rgba(236, 246, 241, .90);
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(107, 137, 121, .13);
  border-radius: 11px;
  font-size: 10px;
  line-height: 1.62;
}

.proposal-followup-empty {
  margin: 22px 18px;
  padding: 34px 20px;
  border: 1px dashed rgba(95, 126, 109, .20);
  border-radius: 14px;
  color: rgba(187, 203, 194, .52);
  background: rgba(255,255,255,.010);
  font-size: 10px;
}

.proposal-comment-form {
  position: relative;
  padding: 14px;
  gap: 10px;
  border-top: 1px solid rgba(92, 122, 106, .20);
  background:
    linear-gradient(180deg, rgba(8,14,12,.62), rgba(7,12,10,.90));
  box-shadow: 0 -12px 30px rgba(0,0,0,.11);
}

.proposal-comment-form textarea {
  min-height: 88px;
  padding: 13px 14px;
  color: #edf8f2;
  background:
    linear-gradient(145deg, rgba(255,255,255,.018), transparent 70%),
    rgba(20, 29, 25, .86);
  border: 1px solid rgba(97, 128, 111, .28);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), inset 0 0 0 1px rgba(0,0,0,.05);
  font-size: 10px;
  line-height: 1.55;
  transition: border-color .17s ease, box-shadow .17s ease, background .17s ease;
}

.proposal-comment-form textarea::placeholder {
  color: rgba(181, 199, 189, .43);
}

.proposal-comment-form textarea:focus {
  border-color: rgba(0, 176, 80, .62);
  background:
    linear-gradient(145deg, rgba(0,176,80,.025), transparent 70%),
    rgba(20, 30, 25, .93);
  box-shadow:
    0 0 0 3px rgba(0, 176, 80, .07),
    0 7px 24px rgba(0, 0, 0, .13),
    inset 0 1px 0 rgba(255,255,255,.028);
}

.proposal-comment-actions small {
  color: rgba(180, 198, 188, .44);
  font-size: 8px;
}

.proposal-comment-actions button {
  min-height: 38px;
  padding: 0 17px;
  border: 1px solid rgba(120, 255, 173, .22);
  border-radius: 11px;
  color: #06130b;
  background: linear-gradient(115deg, #53ee8c, #72f1c2);
  box-shadow:
    0 8px 20px rgba(0,176,80,.13),
    inset 0 1px 0 rgba(255,255,255,.44);
  font-size: 9px;
  font-weight: 800;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.proposal-comment-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.035);
  box-shadow:
    0 11px 26px rgba(0,176,80,.18),
    inset 0 1px 0 rgba(255,255,255,.50);
}

/* Tema claro: mantém profundidade sem parecer um painel escuro pintado de branco. */
html[data-app-theme="light"] .proposal-followup-backdrop {
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 176, 80, .055), transparent 33%),
    rgba(232, 239, 235, .76);
}

html[data-app-theme="light"] .proposal-followup-panel {
  border-color: rgba(49, 102, 75, .20);
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 176, 80, .055), transparent 27%),
    radial-gradient(circle at 96% 16%, rgba(44, 164, 98, .035), transparent 25%),
    linear-gradient(145deg, #ffffff, #f7fbf8 54%, #f3f8f5);
  box-shadow:
    0 34px 90px rgba(35, 70, 52, .18),
    0 10px 28px rgba(35, 70, 52, .08),
    inset 0 1px 0 rgba(255,255,255,.90);
}

html[data-app-theme="light"] .proposal-followup-panel::before {
  opacity: .34;
  background-image:
    linear-gradient(rgba(31,95,61,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,95,61,.020) 1px, transparent 1px),
    radial-gradient(circle at 20% 22%, rgba(31,95,61,.025) 0 1px, transparent 1.5px);
}

html[data-app-theme="light"] .proposal-followup-head {
  border-bottom-color: rgba(51, 99, 74, .14);
  background:
    linear-gradient(90deg, rgba(0,176,80,.050), transparent 38%),
    rgba(255,255,255,.54);
}

html[data-app-theme="light"] .proposal-followup-head small {
  color: #008d40;
  text-shadow: none;
}

html[data-app-theme="light"] .proposal-followup-head h3,
html[data-app-theme="light"] .proposal-followup-pane-head strong,
html[data-app-theme="light"] .proposal-followup-item-meta strong,
html[data-app-theme="light"] .proposal-followup-history-item h4 {
  color: #153225;
}

html[data-app-theme="light"] .proposal-followup-head span,
html[data-app-theme="light"] .proposal-followup-pane-head small,
html[data-app-theme="light"] .proposal-followup-history-item p {
  color: rgba(45, 75, 60, .62);
}

html[data-app-theme="light"] .proposal-followup-pane,
html[data-app-theme="light"] .proposal-followup-history-pane,
html[data-app-theme="light"] .proposal-followup-comments-pane {
  border-color: rgba(49, 94, 70, .15);
  background:
    linear-gradient(150deg, rgba(255,255,255,.95), rgba(246,251,248,.92));
  box-shadow: 0 13px 28px rgba(38, 78, 57, .07), inset 0 1px 0 rgba(255,255,255,.90);
}

html[data-app-theme="light"] .proposal-followup-pane-head {
  border-bottom-color: rgba(49, 94, 70, .12);
  background: linear-gradient(180deg, rgba(245,250,247,.92), rgba(255,255,255,.42));
}

html[data-app-theme="light"] .proposal-followup-history-item,
html[data-app-theme="light"] .proposal-followup-comment-item {
  border-color: rgba(52, 98, 73, .13);
  background: linear-gradient(145deg, #ffffff, #f8fbf9);
  box-shadow: 0 7px 18px rgba(38, 78, 57, .055), inset 0 1px 0 rgba(255,255,255,.95);
}

html[data-app-theme="light"] .proposal-followup-history-item:hover,
html[data-app-theme="light"] .proposal-followup-comment-item:hover {
  border-color: rgba(0, 142, 64, .24);
  background: linear-gradient(145deg, #ffffff, #f3faf6);
}

html[data-app-theme="light"] .proposal-followup-history-dot {
  border-color: #f6faf7;
}

html[data-app-theme="light"] .proposal-followup-item-meta time {
  color: rgba(49, 77, 62, .52);
  border-color: rgba(51, 94, 72, .12);
  background: rgba(36, 85, 58, .025);
}

html[data-app-theme="light"] .proposal-followup-comment-avatar {
  color: #007d38;
  background: rgba(0, 176, 80, .065);
  border-color: rgba(0, 141, 64, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 10px rgba(40,85,60,.05);
}

html[data-app-theme="light"] .proposal-followup-comment-body p {
  color: #294536;
  background: rgba(40, 91, 63, .026);
  border-color: rgba(50, 96, 71, .09);
}

html[data-app-theme="light"] .proposal-followup-empty {
  color: rgba(54, 82, 67, .54);
  background: rgba(37, 86, 60, .018);
  border-color: rgba(49, 96, 71, .15);
}

html[data-app-theme="light"] .proposal-comment-form {
  border-top-color: rgba(49, 94, 70, .12);
  background: linear-gradient(180deg, #f8fbf9, #f4f9f6);
  box-shadow: 0 -10px 24px rgba(37,75,55,.035);
}

html[data-app-theme="light"] .proposal-comment-form textarea {
  color: #173627;
  background: #ffffff;
  border-color: rgba(49, 96, 71, .19);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 12px rgba(38,78,57,.035);
}

html[data-app-theme="light"] .proposal-comment-form textarea::placeholder {
  color: rgba(55, 85, 69, .42);
}

html[data-app-theme="light"] .proposal-comment-form textarea:focus {
  background: #ffffff;
  border-color: rgba(0, 142, 64, .45);
  box-shadow: 0 0 0 3px rgba(0, 176, 80, .055), 0 7px 18px rgba(38,78,57,.05);
}

html[data-app-theme="light"] .proposal-followup-close {
  color: rgba(40, 67, 52, .58);
  border-color: rgba(52, 91, 70, .16);
  background: rgba(255,255,255,.72);
}

html[data-app-theme="light"] .proposal-followup-close:hover {
  color: #173627;
  border-color: rgba(0, 142, 64, .30);
  background: rgba(0,176,80,.045);
}

@media (max-width: 860px) {
  .proposal-followup-backdrop {
    padding: 8px;
  }

  .proposal-followup-panel {
    height: 97vh;
    border-radius: 18px;
  }

  .proposal-followup-head {
    min-height: 82px;
    padding: 16px 18px 14px;
  }

  .proposal-followup-head::after {
    left: 18px;
  }

  .proposal-followup-grid {
    gap: 9px;
    padding: 9px;
  }

  .proposal-followup-pane {
    border-radius: 14px;
  }
}


/* =========================================================
   CORBAN V31 — HISTÓRICO AGRUPADO POR AÇÃO DE SALVAMENTO
   Vários campos alterados no mesmo "Salvar alterações" ficam
   dentro de um único card/timeline.
   ========================================================= */
.proposal-followup-history-card-body {
  min-width: 0;
}

.proposal-followup-history-meta-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.proposal-followup-history-count {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  border: 1px solid rgba(0, 176, 80, .18);
  border-radius: 999px;
  color: rgba(101, 226, 157, .82);
  background: rgba(0, 176, 80, .055);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .025em;
  white-space: nowrap;
}

.proposal-followup-history-changes {
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid rgba(91, 126, 107, .13);
  border-radius: 11px;
  background: rgba(6, 15, 11, .18);
}

.proposal-followup-history-change {
  position: relative;
  padding: 10px 12px 11px;
}

.proposal-followup-history-change + .proposal-followup-history-change {
  border-top: 1px solid rgba(91, 126, 107, .12);
}

.proposal-followup-history-change::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 2px;
  border-radius: 99px;
  background: rgba(0, 176, 80, .45);
  opacity: .55;
}

.proposal-followup-history-item .proposal-followup-history-change h4 {
  margin: 0;
  color: #f2fbf6;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
}

.proposal-followup-history-item .proposal-followup-history-change p {
  margin: 4px 0 0;
  color: rgba(196, 213, 204, .66);
  font-size: 9.5px;
  line-height: 1.5;
}

html[data-app-theme="light"] .proposal-followup-history-count {
  color: #087c3a;
  border-color: rgba(0, 142, 64, .17);
  background: rgba(0, 176, 80, .055);
}

html[data-app-theme="light"] .proposal-followup-history-changes {
  border-color: rgba(52, 98, 73, .10);
  background: rgba(39, 91, 61, .025);
}

html[data-app-theme="light"] .proposal-followup-history-change + .proposal-followup-history-change {
  border-top-color: rgba(52, 98, 73, .10);
}

html[data-app-theme="light"] .proposal-followup-history-item .proposal-followup-history-change h4 {
  color: #153225;
}

html[data-app-theme="light"] .proposal-followup-history-item .proposal-followup-history-change p {
  color: rgba(45, 75, 60, .62);
}


/* =====================================================================
   CORBAN V32 — ACOMPANHAMENTO COM IDENTIDADE DINÂMICA DA FASE
   A HEX configurada na fase passa a ser a cor-mãe do painel inteiro.
   O fundo continua premium/escuro; a fase aparece como luz, profundidade,
   linha, foco e microdetalhes sem transformar o painel em uma cor sólida.
   ===================================================================== */

.proposal-followup-backdrop,
.proposal-followup-panel {
  --followup-phase-color: #00B050;
  --followup-phase-rgb: 0, 176, 80;
}

.proposal-followup-backdrop {
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--followup-phase-rgb), .105), transparent 31%),
    radial-gradient(circle at 82% 88%, rgba(var(--followup-phase-rgb), .060), transparent 30%),
    rgba(2, 5, 4, .80);
}

.proposal-followup-panel {
  border-color: rgba(var(--followup-phase-rgb), .26);
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--followup-phase-rgb), .105), transparent 27%),
    radial-gradient(circle at 96% 16%, rgba(var(--followup-phase-rgb), .045), transparent 25%),
    linear-gradient(145deg, rgba(18, 26, 23, .995), rgba(12, 18, 16, .995) 54%, rgba(9, 15, 13, .995));
  box-shadow:
    0 38px 110px rgba(0, 0, 0, .58),
    0 10px 32px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .045),
    inset 0 0 0 1px rgba(var(--followup-phase-rgb), .035),
    0 0 54px rgba(var(--followup-phase-rgb), .045);
}

.proposal-followup-panel::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--followup-phase-rgb), .60),
    color-mix(in srgb, var(--followup-phase-color) 64%, white 36%),
    transparent
  );
  filter: drop-shadow(0 0 8px rgba(var(--followup-phase-rgb), .38));
}

.proposal-followup-head {
  background:
    linear-gradient(90deg, rgba(var(--followup-phase-rgb), .070), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.006));
}

.proposal-followup-head::after {
  background: var(--followup-phase-color);
  box-shadow: 0 0 13px rgba(var(--followup-phase-rgb), .52);
}

.proposal-followup-head small {
  color: color-mix(in srgb, var(--followup-phase-color) 68%, white 32%);
  text-shadow: 0 0 13px rgba(var(--followup-phase-rgb), .23);
}

.proposal-followup-close:hover {
  border-color: rgba(var(--followup-phase-rgb), .50);
  background: rgba(var(--followup-phase-rgb), .080);
  box-shadow: 0 0 18px rgba(var(--followup-phase-rgb), .12), inset 0 1px 0 rgba(255,255,255,.05);
}

.proposal-followup-history-pane {
  background:
    radial-gradient(circle at 12% 4%, rgba(var(--followup-phase-rgb), .065), transparent 30%),
    linear-gradient(155deg, rgba(255,255,255,.020), rgba(255,255,255,.004)),
    rgba(12, 19, 16, .62);
}

.proposal-followup-comments-pane {
  background:
    radial-gradient(circle at 88% 0%, rgba(var(--followup-phase-rgb), .055), transparent 32%),
    linear-gradient(155deg, rgba(255,255,255,.018), rgba(255,255,255,.003)),
    rgba(11, 18, 15, .72);
}

.proposal-followup-pane-head > div::before {
  background: var(--followup-phase-color);
  box-shadow: 0 0 10px rgba(var(--followup-phase-rgb), .30);
}

.proposal-followup-scroll,
.proposal-followup-comments-scroll {
  scrollbar-color: rgba(var(--followup-phase-rgb), .36) transparent;
}

.proposal-followup-history-item:hover {
  border-color: rgba(var(--followup-phase-rgb), .31);
  background:
    linear-gradient(145deg, rgba(var(--followup-phase-rgb), .040), transparent 60%),
    rgba(20, 30, 25, .76);
}

.proposal-followup-history-item::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--followup-phase-rgb), .08),
    rgba(var(--followup-phase-rgb), .32),
    rgba(var(--followup-phase-rgb), .08)
  );
}

.proposal-followup-history-dot {
  background: color-mix(in srgb, var(--followup-phase-color) 76%, white 24%);
  box-shadow:
    0 0 0 4px rgba(var(--followup-phase-rgb), .11),
    0 0 12px rgba(var(--followup-phase-rgb), .30);
}

.proposal-followup-comment-item:hover {
  border-color: rgba(var(--followup-phase-rgb), .27);
  background:
    linear-gradient(145deg, rgba(var(--followup-phase-rgb), .033), transparent 62%),
    rgba(19, 29, 24, .72);
}

.proposal-followup-comment-avatar {
  color: color-mix(in srgb, var(--followup-phase-color) 63%, white 37%);
  background:
    radial-gradient(circle at 35% 25%, rgba(var(--followup-phase-rgb), .12), transparent 52%),
    rgba(var(--followup-phase-rgb), .085);
  border-color: rgba(var(--followup-phase-rgb), .31);
}

.proposal-comment-form textarea:focus {
  border-color: rgba(var(--followup-phase-rgb), .64);
  background:
    linear-gradient(145deg, rgba(var(--followup-phase-rgb), .030), transparent 70%),
    rgba(20, 30, 25, .93);
  box-shadow:
    0 0 0 3px rgba(var(--followup-phase-rgb), .075),
    0 7px 24px rgba(0, 0, 0, .13),
    inset 0 1px 0 rgba(255,255,255,.028);
}

.proposal-comment-actions button {
  border-color: rgba(var(--followup-phase-rgb), .30);
  background: linear-gradient(
    115deg,
    color-mix(in srgb, var(--followup-phase-color) 72%, white 28%),
    color-mix(in srgb, var(--followup-phase-color) 56%, white 44%)
  );
  box-shadow:
    0 8px 20px rgba(var(--followup-phase-rgb), .16),
    inset 0 1px 0 rgba(255,255,255,.44);
}

.proposal-comment-actions button:hover:not(:disabled) {
  box-shadow:
    0 11px 28px rgba(var(--followup-phase-rgb), .22),
    inset 0 1px 0 rgba(255,255,255,.50);
}

.proposal-followup-history-count {
  border-color: rgba(var(--followup-phase-rgb), .20);
  color: color-mix(in srgb, var(--followup-phase-color) 62%, white 38%);
  background: rgba(var(--followup-phase-rgb), .065);
}

.proposal-followup-history-change::before {
  background: var(--followup-phase-color);
  box-shadow: 0 0 8px rgba(var(--followup-phase-rgb), .18);
  opacity: .62;
}

/* Tema claro: a mesma HEX continua sendo a identidade, porém com aplicação
   mais limpa para preservar contraste e leitura. */
html[data-app-theme="light"] .proposal-followup-backdrop {
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--followup-phase-rgb), .065), transparent 33%),
    rgba(232, 239, 235, .76);
}

html[data-app-theme="light"] .proposal-followup-panel {
  border-color: rgba(var(--followup-phase-rgb), .22);
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--followup-phase-rgb), .070), transparent 27%),
    radial-gradient(circle at 96% 16%, rgba(var(--followup-phase-rgb), .035), transparent 25%),
    linear-gradient(145deg, #ffffff, #f7fbf8 54%, #f3f8f5);
  box-shadow:
    0 34px 90px rgba(35, 70, 52, .18),
    0 10px 28px rgba(35, 70, 52, .08),
    inset 0 1px 0 rgba(255,255,255,.90),
    0 0 42px rgba(var(--followup-phase-rgb), .035);
}

html[data-app-theme="light"] .proposal-followup-head {
  background:
    linear-gradient(90deg, rgba(var(--followup-phase-rgb), .060), transparent 38%),
    rgba(255,255,255,.54);
}

html[data-app-theme="light"] .proposal-followup-head small {
  color: color-mix(in srgb, var(--followup-phase-color) 76%, #111 24%);
}

html[data-app-theme="light"] .proposal-followup-history-item:hover,
html[data-app-theme="light"] .proposal-followup-comment-item:hover {
  border-color: rgba(var(--followup-phase-rgb), .26);
  background:
    linear-gradient(145deg, rgba(var(--followup-phase-rgb), .035), transparent 68%),
    #ffffff;
}

html[data-app-theme="light"] .proposal-followup-comment-avatar {
  color: color-mix(in srgb, var(--followup-phase-color) 78%, #111 22%);
  background: rgba(var(--followup-phase-rgb), .070);
  border-color: rgba(var(--followup-phase-rgb), .20);
}

html[data-app-theme="light"] .proposal-comment-form textarea:focus {
  background: #ffffff;
  border-color: rgba(var(--followup-phase-rgb), .48);
  box-shadow:
    0 0 0 3px rgba(var(--followup-phase-rgb), .060),
    0 7px 18px rgba(38,78,57,.05);
}

html[data-app-theme="light"] .proposal-followup-close:hover {
  border-color: rgba(var(--followup-phase-rgb), .32);
  background: rgba(var(--followup-phase-rgb), .050);
}

html[data-app-theme="light"] .proposal-followup-history-count {
  color: color-mix(in srgb, var(--followup-phase-color) 76%, #111 24%);
  border-color: rgba(var(--followup-phase-rgb), .20);
  background: rgba(var(--followup-phase-rgb), .060);
}


/* =========================================================
   V33 — AVATAR REAL NAS INTERAÇÕES DO ACOMPANHAMENTO
   ========================================================= */
.proposal-followup-comment-photo {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: color-mix(in srgb, var(--followup-phase-color) 63%, white 37%);
  background:
    radial-gradient(circle at 35% 25%, rgba(var(--followup-phase-rgb), .12), transparent 52%),
    rgba(var(--followup-phase-rgb), .085);
  border-color: rgba(var(--followup-phase-rgb), .31);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 12px rgba(0,0,0,.12);
}

.proposal-followup-comment-photo .employee-photo-fallback {
  font-size: 11px;
  font-weight: 800;
}

.proposal-followup-comment-photo .employee-photo-image {
  object-fit: cover;
  object-position: center;
}

html[data-app-theme="light"] .proposal-followup-comment-photo {
  background:
    radial-gradient(circle at 35% 25%, rgba(var(--followup-phase-rgb), .10), transparent 52%),
    rgba(var(--followup-phase-rgb), .06);
  border-color: rgba(var(--followup-phase-rgb), .24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px rgba(20, 36, 28, .06);
}


/* =========================================================
   V34 — DRAWER DA PROPOSTA COM IDENTIDADE DA FASE
   ========================================================= */
#proposal-drawer-backdrop,
#proposal-drawer {
  --proposal-phase-color: #00B050;
  --proposal-phase-rgb: 0, 176, 80;
}

#proposal-drawer-backdrop {
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--proposal-phase-rgb), .16), transparent 30%),
    radial-gradient(circle at 15% 82%, rgba(var(--proposal-phase-rgb), .08), transparent 28%),
    linear-gradient(180deg, rgba(5, 10, 15, .52), rgba(2, 6, 10, .82)) !important;
  backdrop-filter: blur(11px) saturate(115%);
}

#proposal-drawer {
  position: relative;
  overflow: hidden;
  width: min(760px, 96vw) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(var(--proposal-phase-rgb), .20) !important;
  background:
    linear-gradient(180deg, rgba(var(--proposal-phase-rgb), .11), transparent 22%),
    radial-gradient(circle at top right, rgba(var(--proposal-phase-rgb), .12), transparent 30%),
    radial-gradient(circle at bottom left, rgba(var(--proposal-phase-rgb), .05), transparent 28%),
    linear-gradient(180deg, rgba(12, 18, 28, .985), rgba(7, 13, 22, .985)) !important;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255,255,255,.018) inset,
    0 0 44px rgba(var(--proposal-phase-rgb), .08);
}

#proposal-drawer::before,
#proposal-drawer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

#proposal-drawer::before {
  inset: 0 0 auto 0;
  height: 172px;
  background:
    linear-gradient(180deg, rgba(var(--proposal-phase-rgb), .13), transparent 78%),
    radial-gradient(circle at 22% 0%, rgba(var(--proposal-phase-rgb), .14), transparent 36%);
  opacity: .9;
}

#proposal-drawer::after {
  inset: auto -16% -18% auto;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(var(--proposal-phase-rgb), .10), transparent 66%);
  filter: blur(12px);
  opacity: .72;
}

#proposal-drawer .proposal-form {
  position: relative;
  z-index: 1;
  padding: 18px 26px 30px !important;
  background: transparent !important;
}

#proposal-drawer .proposal-form-section {
  position: relative;
  margin-bottom: 16px;
  padding: 20px 20px 22px !important;
  border: 1px solid rgba(var(--proposal-phase-rgb), .14) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(var(--proposal-phase-rgb), .028), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.018), transparent 56%),
    rgba(11, 18, 28, .82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 12px 28px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.012);
}

#proposal-drawer .proposal-form-section:last-of-type {
  margin-bottom: 0;
}

#proposal-drawer .proposal-section-head {
  min-height: 42px !important;
  margin-bottom: 18px !important;
}

#proposal-drawer .proposal-section-head strong {
  color: #edf6f0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

#proposal-drawer .proposal-section-head-first {
  margin: -20px -20px 22px !important;
  padding: 16px 20px 15px !important;
  border-bottom: 1px solid rgba(var(--proposal-phase-rgb), .18) !important;
  border-radius: 22px 22px 0 0 !important;
  background:
    linear-gradient(90deg, rgba(var(--proposal-phase-rgb), .11), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent) !important;
}

#proposal-drawer .proposal-section-head-first strong {
  color: color-mix(in srgb, var(--proposal-phase-color) 18%, #ffffff 82%) !important;
}

#proposal-drawer .proposal-section-head-actions {
  gap: 10px !important;
}

#proposal-drawer .proposal-field,
#proposal-drawer .proposal-field-full {
  gap: 8px !important;
}

#proposal-drawer .proposal-field label {
  color: rgba(198, 210, 221, .76) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#proposal-drawer .proposal-field input,
#proposal-drawer .proposal-field select,
#proposal-drawer .proposal-field .corban-employee-select,
#proposal-drawer .proposal-field .corban-employee-select-trigger,
#proposal-drawer .proposal-money-shell,
#proposal-drawer .proposal-percent-shell {
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(113, 132, 148, .22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012)),
    rgba(15, 23, 36, .92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    0 10px 22px rgba(0,0,0,.14) !important;
}

#proposal-drawer .proposal-field input,
#proposal-drawer .proposal-field select,
#proposal-drawer .proposal-field .corban-employee-select-trigger {
  padding: 0 15px !important;
  color: #edf3f7 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#proposal-drawer .proposal-field input::placeholder {
  color: rgba(194, 204, 213, .40) !important;
}

#proposal-drawer .proposal-money-shell > span,
#proposal-drawer .proposal-percent-shell > span {
  color: rgba(204, 216, 226, .72) !important;
  font-weight: 700 !important;
}

#proposal-drawer .proposal-field input:hover,
#proposal-drawer .proposal-field .corban-employee-select-trigger:hover,
#proposal-drawer .proposal-money-shell:hover,
#proposal-drawer .proposal-percent-shell:hover {
  border-color: rgba(var(--proposal-phase-rgb), .28) !important;
  background:
    linear-gradient(180deg, rgba(var(--proposal-phase-rgb), .038), rgba(255,255,255,.014)),
    rgba(16, 25, 39, .96) !important;
}

#proposal-drawer .proposal-field input:focus,
#proposal-drawer .proposal-field .corban-employee-select.is-open .corban-employee-select-trigger,
#proposal-drawer .proposal-field select:focus,
#proposal-drawer .proposal-money-shell:focus-within,
#proposal-drawer .proposal-percent-shell:focus-within {
  border-color: rgba(var(--proposal-phase-rgb), .60) !important;
  background:
    linear-gradient(180deg, rgba(var(--proposal-phase-rgb), .040), rgba(255,255,255,.015)),
    rgba(18, 27, 42, .98) !important;
  box-shadow:
    0 0 0 4px rgba(var(--proposal-phase-rgb), .10),
    0 14px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#proposal-drawer .proposal-field .corban-employee-select-menu {
  padding: 6px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(var(--proposal-phase-rgb), .18) !important;
  background:
    linear-gradient(180deg, rgba(var(--proposal-phase-rgb), .055), transparent 30%),
    rgba(11, 18, 28, .985) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.36) !important;
}

#proposal-drawer .proposal-field .corban-employee-select-option {
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 0 !important;
  color: #e7edf2 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

#proposal-drawer .proposal-field .corban-employee-select-option:hover,
#proposal-drawer .proposal-field .corban-employee-select-option:focus-visible,
#proposal-drawer .proposal-field .corban-employee-select-option.is-selected {
  background: rgba(var(--proposal-phase-rgb), .13) !important;
  color: #ffffff !important;
}

#proposal-drawer .proposal-percent-snapshot-note {
  color: rgba(190, 203, 214, .56) !important;
  font-size: 10px !important;
}

#proposal-drawer .proposal-segmented {
  gap: 8px !important;
  height: auto !important;
}

#proposal-drawer .proposal-segmented button {
  height: 48px !important;
  border-radius: 15px !important;
  color: rgba(215, 227, 235, .72) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent),
    rgba(11, 18, 28, .92) !important;
  border: 1px solid rgba(var(--proposal-phase-rgb), .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}

#proposal-drawer .proposal-segmented button.active {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, rgba(var(--proposal-phase-rgb), .17), rgba(var(--proposal-phase-rgb), .06)),
    rgba(14, 22, 33, .98) !important;
  border-color: rgba(var(--proposal-phase-rgb), .50) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 22px rgba(var(--proposal-phase-rgb), .11) !important;
}

#proposal-drawer .proposal-followup-button {
  border-radius: 14px !important;
  border: 1px solid rgba(var(--proposal-phase-rgb), .28) !important;
  background:
    linear-gradient(135deg, rgba(var(--proposal-phase-rgb), .14), rgba(var(--proposal-phase-rgb), .04)),
    rgba(9, 16, 24, .92) !important;
  color: color-mix(in srgb, var(--proposal-phase-color) 26%, #ffffff 74%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 8px 18px rgba(0,0,0,.12) !important;
}

#proposal-drawer .proposal-followup-button:hover:not(:disabled) {
  border-color: rgba(var(--proposal-phase-rgb), .40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 22px rgba(var(--proposal-phase-rgb), .12) !important;
}

#proposal-drawer .proposal-followup-button svg {
  stroke: currentColor !important;
}

#proposal-drawer .proposal-close-button {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(var(--proposal-phase-rgb), .20) !important;
  background: rgba(15, 22, 32, .90) !important;
  color: rgba(228, 237, 243, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}

#proposal-drawer .proposal-close-button:hover {
  color: #ffffff !important;
  border-color: rgba(var(--proposal-phase-rgb), .32) !important;
  background: rgba(17, 26, 38, .96) !important;
}

#proposal-drawer .proposal-form-actions {
  margin-top: 4px !important;
  padding: 8px 2px 2px !important;
  background: transparent !important;
  border-top: 0 !important;
}

#proposal-drawer .proposal-cancel-button {
  border-radius: 16px !important;
  border: 1px solid rgba(var(--proposal-phase-rgb), .20) !important;
  background: rgba(10, 16, 24, .90) !important;
  color: rgba(232, 239, 244, .82) !important;
}

#proposal-drawer .proposal-save-button {
  border-radius: 16px !important;
  border: 1px solid rgba(var(--proposal-phase-rgb), .28) !important;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--proposal-phase-color) 72%, white 28%),
    color-mix(in srgb, var(--proposal-phase-color) 52%, white 48%)
  ) !important;
  color: #071108 !important;
  box-shadow:
    0 14px 28px rgba(var(--proposal-phase-rgb), .22),
    inset 0 1px 0 rgba(255,255,255,.40) !important;
}

#proposal-drawer .proposal-save-button:hover {
  box-shadow:
    0 16px 34px rgba(var(--proposal-phase-rgb), .28),
    inset 0 1px 0 rgba(255,255,255,.46) !important;
}

#proposal-drawer .proposal-form-error {
  border-radius: 16px !important;
  border-color: rgba(255, 82, 82, .24) !important;
  background: rgba(62, 17, 17, .50) !important;
}

/* Preserva o verde especial dos campos de destaque (Contrato/Comissão). */
#proposal-drawer .proposal-field.proposal-value-highlight .proposal-money-shell,
#proposal-drawer .proposal-money-shell.proposal-highlight-shell,
#proposal-drawer #proposal-commission-field:not(.hidden) .proposal-money-shell {
  border-color: rgba(0, 176, 80, .34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 0 1px rgba(0,176,80,.05),
    0 12px 28px rgba(0,0,0,.16) !important;
}

#proposal-drawer .proposal-field.proposal-value-highlight .proposal-money-shell > span,
#proposal-drawer .proposal-field.proposal-value-highlight .proposal-money-shell input,
#proposal-drawer .proposal-money-shell.proposal-highlight-shell > span,
#proposal-drawer .proposal-money-shell.proposal-highlight-shell input,
#proposal-drawer #proposal-commission-field:not(.hidden) .proposal-money-shell > span,
#proposal-drawer #proposal-commission-field:not(.hidden) .proposal-money-shell input {
  color: #00B050 !important;
  text-shadow: 0 0 10px rgba(0, 176, 80, .18);
}

html[data-app-theme="light"] #proposal-drawer-backdrop {
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--proposal-phase-rgb), .14), transparent 30%),
    radial-gradient(circle at 15% 82%, rgba(var(--proposal-phase-rgb), .07), transparent 28%),
    linear-gradient(180deg, rgba(248, 251, 254, .52), rgba(229, 238, 246, .78)) !important;
}

html[data-app-theme="light"] #proposal-drawer {
  background:
    linear-gradient(180deg, rgba(var(--proposal-phase-rgb), .08), transparent 20%),
    radial-gradient(circle at top right, rgba(var(--proposal-phase-rgb), .10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.985), rgba(244, 248, 252, .985)) !important;
  box-shadow:
    0 24px 48px rgba(18, 38, 56, .16),
    0 0 0 1px rgba(255,255,255,.55) inset,
    0 0 34px rgba(var(--proposal-phase-rgb), .07);
}

html[data-app-theme="light"] #proposal-drawer .proposal-form-section {
  background:
    linear-gradient(180deg, rgba(var(--proposal-phase-rgb), .018), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.80), transparent 56%),
    rgba(255, 255, 255, .86) !important;
  border-color: rgba(var(--proposal-phase-rgb), .12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 12px 28px rgba(24, 44, 65, .08),
    0 0 0 1px rgba(255,255,255,.40);
}

html[data-app-theme="light"] #proposal-drawer .proposal-section-head strong {
  color: #183245 !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-section-head-first strong {
  color: color-mix(in srgb, var(--proposal-phase-color) 58%, #12314a 42%) !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-field label {
  color: rgba(50, 73, 92, .72) !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-field input,
html[data-app-theme="light"] #proposal-drawer .proposal-field select,
html[data-app-theme="light"] #proposal-drawer .proposal-field .corban-employee-select-trigger,
html[data-app-theme="light"] #proposal-drawer .proposal-money-shell,
html[data-app-theme="light"] #proposal-drawer .proposal-percent-shell {
  color: #183245 !important;
  border-color: rgba(110, 131, 149, .22) !important;
  background:
    linear-gradient(180deg, rgba(var(--proposal-phase-rgb), .018), rgba(255,255,255,.72)),
    rgba(248, 251, 254, .96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 10px 22px rgba(24, 44, 65, .06) !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-field input::placeholder {
  color: rgba(91, 110, 126, .45) !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-money-shell > span,
html[data-app-theme="light"] #proposal-drawer .proposal-percent-shell > span {
  color: rgba(67, 88, 104, .72) !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-segmented button {
  color: rgba(31, 53, 69, .72) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(247,250,252,.96)),
    rgba(255,255,255,.92) !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-followup-button,
html[data-app-theme="light"] #proposal-drawer .proposal-cancel-button,
html[data-app-theme="light"] #proposal-drawer .proposal-close-button {
  background: rgba(255,255,255,.85) !important;
  color: #17344a !important;
}


/* =========================================================
   V35 — CORREÇÃO DE ROLAGEM / CAMADAS DO DRAWER PREMIUM
   ========================================================= */
/*
  O V34 usava overflow:hidden no próprio drawer para recortar as luzes.
  Isso também eliminava a rolagem vertical do formulário. O recorte fica
  apenas no eixo horizontal; verticalmente o drawer volta a ser o scroll
  container real do cadastro/edição.
*/
#proposal-drawer {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  isolation: isolate;
}

/* As luzes decorativas ficam atrás do conteúdo e nunca interceptam/encobrem
   campos durante a rolagem. */
#proposal-drawer::before,
#proposal-drawer::after {
  z-index: 0 !important;
}

#proposal-drawer .proposal-form {
  position: relative !important;
  z-index: 1 !important;
  min-height: 100%;
  overflow: visible !important;
  padding-bottom: 34px !important;
}

/* O rodapé deixa de flutuar sobre os campos. Agora ele aparece somente no fim
   natural do formulário, evitando a faixa escura sobrepondo o conteúdo. */
#proposal-drawer .proposal-form-actions {
  position: static !important;
  inset: auto !important;
  z-index: 1 !important;
  margin: 18px 0 0 !important;
  padding: 16px 0 4px !important;
  background: transparent !important;
  border-top: 1px solid rgba(var(--proposal-phase-rgb), .11) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

/* Um pouco mais de respiro no último card para que nada pareça preso ao
   rodapé quando o usuário chega ao fim da rolagem. */
#proposal-drawer .proposal-form-section:last-of-type {
  margin-bottom: 4px !important;
}

/* Scrollbar discreta, integrada à cor da fase. */
#proposal-drawer {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--proposal-phase-rgb), .48) rgba(255,255,255,.025);
}

#proposal-drawer::-webkit-scrollbar {
  width: 9px;
}

#proposal-drawer::-webkit-scrollbar-track {
  background: rgba(255,255,255,.018);
}

#proposal-drawer::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(var(--proposal-phase-rgb), .42);
  background-clip: padding-box;
}

#proposal-drawer::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--proposal-phase-rgb), .62);
  background-clip: padding-box;
}

/* Em telas mais baixas, reduz levemente as margens dos cards para preservar
   área útil sem sacrificar o visual premium. */
@media (max-height: 760px) {
  #proposal-drawer .proposal-form {
    padding-top: 12px !important;
  }

  #proposal-drawer .proposal-form-section {
    margin-bottom: 12px !important;
    padding-top: 17px !important;
    padding-bottom: 19px !important;
  }
}


/* =========================================================
   V36 — CORES FIXAS DO CAMPO DESBLOQUEADO?
   YES = verde, NO = vermelho, NA = neutro/cinza
   ========================================================= */
#proposal-drawer .proposal-segmented button[data-unlocked="YES"].active {
  color: #dcffe9 !important;
  background:
    linear-gradient(135deg, rgba(0, 176, 80, .22), rgba(0, 176, 80, .08)),
    rgba(11, 22, 16, .96) !important;
  border-color: rgba(0, 176, 80, .62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 22px rgba(0, 176, 80, .14) !important;
}

#proposal-drawer .proposal-segmented button[data-unlocked="YES"].active .proposal-segmented-icon,
#proposal-drawer .proposal-segmented button[data-unlocked="YES"].active small {
  color: #7dffb1 !important;
}

#proposal-drawer .proposal-segmented button[data-unlocked="NO"].active {
  color: #ffe3e3 !important;
  background:
    linear-gradient(135deg, rgba(255, 59, 59, .20), rgba(255, 59, 59, .07)),
    rgba(22, 12, 14, .96) !important;
  border-color: rgba(255, 59, 59, .58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 22px rgba(255, 59, 59, .13) !important;
}

#proposal-drawer .proposal-segmented button[data-unlocked="NO"].active .proposal-segmented-icon,
#proposal-drawer .proposal-segmented button[data-unlocked="NO"].active small {
  color: #ff7a7a !important;
}

#proposal-drawer .proposal-segmented button[data-unlocked="NA"].active {
  color: #edf2f6 !important;
  background:
    linear-gradient(135deg, rgba(148, 163, 184, .16), rgba(148, 163, 184, .05)),
    rgba(17, 23, 31, .96) !important;
  border-color: rgba(148, 163, 184, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 22px rgba(148, 163, 184, .09) !important;
}

#proposal-drawer .proposal-segmented button[data-unlocked="NA"].active .proposal-segmented-icon,
#proposal-drawer .proposal-segmented button[data-unlocked="NA"].active small {
  color: #d7e0e8 !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-segmented button[data-unlocked="YES"].active {
  color: #114029 !important;
  background:
    linear-gradient(135deg, rgba(0, 176, 80, .18), rgba(0, 176, 80, .06)),
    rgba(244, 252, 247, .98) !important;
  border-color: rgba(0, 176, 80, .48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 10px 22px rgba(0, 176, 80, .10) !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-segmented button[data-unlocked="YES"].active .proposal-segmented-icon,
html[data-app-theme="light"] #proposal-drawer .proposal-segmented button[data-unlocked="YES"].active small {
  color: #008746 !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-segmented button[data-unlocked="NO"].active {
  color: #4d1515 !important;
  background:
    linear-gradient(135deg, rgba(255, 59, 59, .15), rgba(255, 59, 59, .05)),
    rgba(255, 247, 247, .98) !important;
  border-color: rgba(255, 59, 59, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 22px rgba(255, 59, 59, .08) !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-segmented button[data-unlocked="NO"].active .proposal-segmented-icon,
html[data-app-theme="light"] #proposal-drawer .proposal-segmented button[data-unlocked="NO"].active small {
  color: #d92d2d !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-segmented button[data-unlocked="NA"].active {
  color: #334155 !important;
  background:
    linear-gradient(135deg, rgba(148, 163, 184, .12), rgba(148, 163, 184, .04)),
    rgba(249, 251, 253, .98) !important;
  border-color: rgba(148, 163, 184, .34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 22px rgba(148, 163, 184, .06) !important;
}

html[data-app-theme="light"] #proposal-drawer .proposal-segmented button[data-unlocked="NA"].active .proposal-segmented-icon,
html[data-app-theme="light"] #proposal-drawer .proposal-segmented button[data-unlocked="NA"].active small {
  color: #64748b !important;
}


/* =========================================================
   V37 — BOTÃO FECHAR SEMPRE VISÍVEL DURANTE A ROLAGEM
   ========================================================= */
/*
  O X fica ancorado ao canto superior direito da janela do drawer.
  Como usa position:fixed, a rolagem acontece por baixo dele e o botão
  nunca desaparece, mesmo quando o usuário chega às seções inferiores.
*/
#proposal-drawer #proposal-close-button {
  position: fixed !important;
  top: 14px !important;
  right: 18px !important;
  z-index: 2140 !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(var(--proposal-phase-rgb), .25) !important;
  color: rgba(237, 244, 248, .78) !important;
  background:
    linear-gradient(145deg, rgba(var(--proposal-phase-rgb), .08), transparent 64%),
    rgba(10, 17, 27, .88) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    0 0 18px rgba(var(--proposal-phase-rgb), .07),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

#proposal-drawer #proposal-close-button:hover {
  color: #ffffff !important;
  border-color: rgba(var(--proposal-phase-rgb), .42) !important;
  background:
    linear-gradient(145deg, rgba(var(--proposal-phase-rgb), .13), transparent 64%),
    rgba(13, 21, 33, .94) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.30),
    0 0 22px rgba(var(--proposal-phase-rgb), .11),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Reserva a área do X no cabeçalho para o botão Acompanhamento nunca ficar
   escondido por baixo do botão flutuante. */
#proposal-drawer .proposal-section-head-first .proposal-section-head-actions {
  padding-right: 54px !important;
}

html[data-app-theme="light"] #proposal-drawer #proposal-close-button {
  color: #425466 !important;
  border-color: rgba(var(--proposal-phase-rgb), .20) !important;
  background:
    linear-gradient(145deg, rgba(var(--proposal-phase-rgb), .07), transparent 64%),
    rgba(255,255,255,.86) !important;
  box-shadow:
    0 10px 26px rgba(35, 55, 72, .12),
    0 0 16px rgba(var(--proposal-phase-rgb), .05),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

html[data-app-theme="light"] #proposal-drawer #proposal-close-button:hover {
  color: #183245 !important;
  border-color: rgba(var(--proposal-phase-rgb), .34) !important;
  background:
    linear-gradient(145deg, rgba(var(--proposal-phase-rgb), .11), transparent 64%),
    rgba(255,255,255,.96) !important;
}

@media (max-width: 760px) {
  #proposal-drawer #proposal-close-button {
    top: 10px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
  }

  #proposal-drawer .proposal-section-head-first .proposal-section-head-actions {
    padding-right: 48px !important;
  }
}


/* =========================================================
   V38 — X REALMENTE FIXO + DUPLO CLIQUE FORA
   ========================================================= */
/*
  O botão foi retirado de dentro do #proposal-drawer (que é o elemento
  rolável) e agora é filho direto do backdrop fixo. Assim ele não participa
  da rolagem em nenhuma hipótese, inclusive em navegadores que tratam fixed
  dentro de elementos animados/transformados como containing block.
*/
#proposal-drawer-backdrop > #proposal-close-button.proposal-close-button-fixed {
  position: fixed !important;
  top: 14px !important;
  right: 18px !important;
  z-index: 5000 !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(var(--proposal-phase-rgb), .28) !important;
  color: rgba(237, 244, 248, .82) !important;
  background:
    linear-gradient(145deg, rgba(var(--proposal-phase-rgb), .10), transparent 64%),
    rgba(10, 17, 27, .92) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.34),
    0 0 20px rgba(var(--proposal-phase-rgb), .08),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  cursor: pointer;
}

#proposal-drawer-backdrop > #proposal-close-button.proposal-close-button-fixed:hover {
  color: #ffffff !important;
  border-color: rgba(var(--proposal-phase-rgb), .46) !important;
  background:
    linear-gradient(145deg, rgba(var(--proposal-phase-rgb), .16), transparent 64%),
    rgba(13, 21, 33, .97) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.36),
    0 0 24px rgba(var(--proposal-phase-rgb), .13),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}

/* Neutraliza o seletor legado V37, agora que o X não está mais dentro do drawer. */
#proposal-drawer #proposal-close-button {
  position: static !important;
}

/* Mantém uma zona livre no cabeçalho para Acompanhamento não avançar para
   debaixo do X fixo. */
#proposal-drawer .proposal-section-head-first .proposal-section-head-actions {
  padding-right: 58px !important;
}

html[data-app-theme="light"] #proposal-drawer-backdrop > #proposal-close-button.proposal-close-button-fixed {
  color: #425466 !important;
  border-color: rgba(var(--proposal-phase-rgb), .22) !important;
  background:
    linear-gradient(145deg, rgba(var(--proposal-phase-rgb), .08), transparent 64%),
    rgba(255,255,255,.92) !important;
  box-shadow:
    0 10px 28px rgba(35, 55, 72, .14),
    0 0 18px rgba(var(--proposal-phase-rgb), .06),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

html[data-app-theme="light"] #proposal-drawer-backdrop > #proposal-close-button.proposal-close-button-fixed:hover {
  color: #183245 !important;
  border-color: rgba(var(--proposal-phase-rgb), .38) !important;
  background:
    linear-gradient(145deg, rgba(var(--proposal-phase-rgb), .13), transparent 64%),
    rgba(255,255,255,.98) !important;
}

@media (max-width: 760px) {
  #proposal-drawer-backdrop > #proposal-close-button.proposal-close-button-fixed {
    top: 10px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
  }

  #proposal-drawer .proposal-section-head-first .proposal-section-head-actions {
    padding-right: 50px !important;
  }
}


/* =========================================================
   V39 — DESTAQUE FINANCEIRO PREMIUM
   Comissão/valor verde com aparência mais "dinheiro" e menos neon pesado.
   Mantém #00B050 como cor-base do sistema e usa um verde-mint apenas para
   dar leitura e sensação de valor, sem caixa luminosa artificial.
   ========================================================= */
html[data-app-theme="dark"] #proposal-drawer-backdrop
  #proposal-commission-field:not(.hidden) .proposal-money-shell,
html[data-app-theme="dark"] #proposal-drawer-backdrop
  .proposal-money-shell.proposal-highlight-shell,
html[data-app-theme="dark"] #proposal-drawer-backdrop
  .proposal-field.proposal-value-highlight .proposal-money-shell {
  position: relative;
  isolation: isolate;
  border-color: rgba(0, 176, 80, .50) !important;
  background:
    radial-gradient(ellipse 42% 95% at 18% 50%, rgba(0, 176, 80, .095) 0%, rgba(0, 176, 80, .028) 52%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent),
    rgba(10, 22, 18, .62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 0 1px rgba(0,176,80,.018) !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

html[data-app-theme="dark"] #proposal-drawer-backdrop
  #proposal-commission-field:not(.hidden) .proposal-money-shell:hover,
html[data-app-theme="dark"] #proposal-drawer-backdrop
  .proposal-money-shell.proposal-highlight-shell:hover,
html[data-app-theme="dark"] #proposal-drawer-backdrop
  .proposal-field.proposal-value-highlight .proposal-money-shell:hover {
  border-color: rgba(0, 176, 80, .66) !important;
  background:
    radial-gradient(ellipse 46% 105% at 18% 50%, rgba(0, 176, 80, .125) 0%, rgba(0, 176, 80, .038) 52%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.020), transparent),
    rgba(10, 24, 19, .70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 18px rgba(0,176,80,.055) !important;
}

/* "R$" funciona como um selo discreto, e não compete com o número. */
html[data-app-theme="dark"] #proposal-drawer-backdrop
  #proposal-commission-field:not(.hidden) .proposal-money-shell > span,
html[data-app-theme="dark"] #proposal-drawer-backdrop
  .proposal-money-shell.proposal-highlight-shell > span,
html[data-app-theme="dark"] #proposal-drawer-backdrop
  .proposal-field.proposal-value-highlight .proposal-money-shell > span {
  color: #72E8A3 !important;
  -webkit-text-fill-color: #72E8A3 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .025em !important;
  opacity: .96 !important;
  text-shadow: 0 0 7px rgba(0, 176, 80, .18) !important;
}

/* O número ganha presença: maior, menos "pesado" que o 900 antigo e mais elegante. */
html[data-app-theme="dark"] #proposal-drawer-backdrop
  #proposal-commission-field:not(.hidden) .proposal-money-shell input,
html[data-app-theme="dark"] #proposal-drawer-backdrop
  .proposal-money-shell.proposal-highlight-shell input,
html[data-app-theme="dark"] #proposal-drawer-backdrop
  .proposal-field.proposal-value-highlight .proposal-money-shell input,
html[data-app-theme="dark"] #proposal-drawer-backdrop
  input.proposal-highlight-input {
  color: #25D979 !important;
  -webkit-text-fill-color: #25D979 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 17px !important;
  font-weight: 750 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  letter-spacing: .012em !important;
  opacity: 1 !important;
  text-shadow:
    0 0 2px rgba(37, 217, 121, .38),
    0 0 8px rgba(0, 176, 80, .12) !important;
}

/* O campo Comissão recebe um pequeno detalhe de valor sem criar um quadrado de glow. */
html[data-app-theme="dark"] #proposal-drawer-backdrop
  #proposal-commission-field:not(.hidden) .proposal-money-shell::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 34px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,217,121,.105), transparent 70%);
  filter: blur(4px);
  pointer-events: none;
  z-index: -1;
}

/* Na Esteira, a Comissão usa a mesma linguagem visual. */
html[data-app-theme="dark"] .pipeline-table td[data-pipeline-column="commission_value"],
html[data-app-theme="dark"] .pipeline-table td[data-pipeline-column="commission_value"] * {
  color: #25D979 !important;
  -webkit-text-fill-color: #25D979 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 750 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  letter-spacing: .01em !important;
  text-shadow: 0 0 6px rgba(0, 176, 80, .12) !important;
}

/* Tema claro: verde mais profundo para manter contraste e sofisticação. */
html[data-app-theme="light"] #proposal-drawer-backdrop
  #proposal-commission-field:not(.hidden) .proposal-money-shell > span,
html[data-app-theme="light"] #proposal-drawer-backdrop
  .proposal-money-shell.proposal-highlight-shell > span,
html[data-app-theme="light"] #proposal-drawer-backdrop
  .proposal-field.proposal-value-highlight .proposal-money-shell > span {
  color: #078943 !important;
  -webkit-text-fill-color: #078943 !important;
  font-weight: 700 !important;
}

html[data-app-theme="light"] #proposal-drawer-backdrop
  #proposal-commission-field:not(.hidden) .proposal-money-shell input,
html[data-app-theme="light"] #proposal-drawer-backdrop
  .proposal-money-shell.proposal-highlight-shell input,
html[data-app-theme="light"] #proposal-drawer-backdrop
  .proposal-field.proposal-value-highlight .proposal-money-shell input,
html[data-app-theme="light"] #proposal-drawer-backdrop
  input.proposal-highlight-input {
  color: #007A3D !important;
  -webkit-text-fill-color: #007A3D !important;
  font-size: 17px !important;
  font-weight: 750 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  letter-spacing: .012em !important;
  text-shadow: none !important;
}


/* =========================================================
   V40 — ESTEIRA: DESBLOQUEADO SEM CAIXA / SEM BORDA
   SIM = check verde | NÃO = X vermelho | N/A = traço neutro
   ========================================================= */
.pipeline-table .pipeline-unlocked,
.pipeline-unlocked {
  min-width: 18px !important;
  width: 18px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.pipeline-table .pipeline-unlocked.yes,
.pipeline-unlocked.yes {
  color: #26e58a !important;
  background: transparent !important;
  text-shadow: 0 0 8px rgba(38, 229, 138, .20);
}

.pipeline-table .pipeline-unlocked.no,
.pipeline-unlocked.no {
  color: #ff5364 !important;
  background: transparent !important;
  text-shadow: 0 0 8px rgba(255, 83, 100, .18);
}

.pipeline-table .pipeline-unlocked.na,
.pipeline-unlocked.na {
  color: rgba(184, 197, 210, .58) !important;
  background: transparent !important;
  text-shadow: none !important;
  font-weight: 650 !important;
}

html[data-app-theme="light"] .pipeline-table .pipeline-unlocked.yes,
html[data-app-theme="light"] .pipeline-unlocked.yes {
  color: #009a52 !important;
  text-shadow: none !important;
}

html[data-app-theme="light"] .pipeline-table .pipeline-unlocked.no,
html[data-app-theme="light"] .pipeline-unlocked.no {
  color: #dc3346 !important;
  text-shadow: none !important;
}

html[data-app-theme="light"] .pipeline-table .pipeline-unlocked.na,
html[data-app-theme="light"] .pipeline-unlocked.na {
  color: rgba(82, 101, 119, .62) !important;
}


/* =====================================================================
   V41 — NOVA PROPOSTA / SELEÇÃO DE BANCO
   ===================================================================== */
body.new-proposal-bank-open { overflow: hidden; }

.new-proposal-bank-backdrop {
  position: fixed; inset: 0; z-index: 1590; display: grid; place-items: center;
  padding: clamp(18px, 4vw, 48px);
  background: radial-gradient(circle at 78% 12%, rgba(0,176,80,.10), transparent 28%),
              radial-gradient(circle at 18% 82%, rgba(38,125,255,.08), transparent 34%),
              rgba(1,7,12,.72);
  backdrop-filter: blur(14px) saturate(.92); -webkit-backdrop-filter: blur(14px) saturate(.92);
}
.new-proposal-bank-backdrop.hidden { display: none !important; }

.new-proposal-bank-modal {
  position: relative; width: min(1080px, 96vw); max-height: min(820px, 91vh);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(111,145,166,.18); border-radius: 26px; color: #edf5f8;
  background: linear-gradient(180deg, rgba(18,31,39,.99), rgba(7,15,23,.995) 24%, rgba(6,13,21,.995)), #07111a;
  box-shadow: 0 34px 100px rgba(0,0,0,.52), 0 4px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
  isolation: isolate; animation: new-proposal-bank-enter .22s ease-out both;
}
.new-proposal-bank-modal::before {
  content:""; position:absolute; inset:0 0 auto; height:170px; z-index:-1; pointer-events:none;
  background: radial-gradient(circle at 17% -18%, rgba(0,176,80,.22), transparent 50%), linear-gradient(90deg, rgba(0,176,80,.08), transparent 44%);
}
.new-proposal-bank-modal::after {
  content:""; position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(0,176,80,.72), rgba(103,232,249,.46), transparent); opacity:.75;
}
@keyframes new-proposal-bank-enter { from { opacity:0; transform:translateY(12px) scale(.986); } to { opacity:1; transform:none; } }

.new-proposal-bank-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:28px 30px 20px; border-bottom:1px solid rgba(148,163,184,.11); }
.new-proposal-bank-head-copy { min-width:0; }
.new-proposal-bank-kicker { display:inline-flex; align-items:center; gap:8px; margin-bottom:8px; color:#69e5a0; font-size:10px; font-weight:750; letter-spacing:.17em; }
.new-proposal-bank-kicker::before { content:""; width:7px; height:7px; border-radius:999px; background:#00b050; box-shadow:0 0 14px rgba(0,176,80,.52); }
.new-proposal-bank-head h2 { margin:0; color:#f7fbfd; font-size:clamp(25px,3vw,34px); font-weight:690; letter-spacing:-.035em; }
.new-proposal-bank-head p { margin:7px 0 0; color:rgba(196,211,220,.64); font-size:13px; }
.new-proposal-bank-close { flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(148,163,184,.14); border-radius:14px; background:rgba(10,19,27,.72); color:rgba(229,237,243,.72); font-size:25px; line-height:1; cursor:pointer; transition:.18s ease; }
.new-proposal-bank-close:hover { color:#fff; border-color:rgba(0,176,80,.38); background:rgba(0,176,80,.08); transform:translateY(-1px); }

.new-proposal-bank-toolbar { display:flex; align-items:center; gap:16px; padding:20px 30px 10px; }
.new-proposal-bank-search { flex:1 1 auto; min-width:0; height:48px; display:flex; align-items:center; gap:11px; padding:0 14px; border:1px solid rgba(125,150,168,.20); border-radius:15px; background:rgba(20,31,42,.78); transition:.18s ease; }
.new-proposal-bank-search:focus-within { border-color:rgba(0,176,80,.54); box-shadow:0 0 0 3px rgba(0,176,80,.07); background:rgba(22,35,46,.92); }
.new-proposal-bank-search svg { width:18px; height:18px; stroke:rgba(187,203,214,.58); stroke-width:1.8; }
.new-proposal-bank-search input { flex:1 1 auto; min-width:0; height:100%; border:0; outline:0; background:transparent; color:#f1f7fa; font:inherit; font-size:13px; }
.new-proposal-bank-search input::placeholder { color:rgba(169,185,197,.46); }
.new-proposal-bank-search kbd { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:24px; padding:0 7px; border:1px solid rgba(148,163,184,.15); border-radius:7px; background:rgba(255,255,255,.025); color:rgba(186,201,211,.52); font-family:inherit; font-size:9px; }
.new-proposal-bank-view-note { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 12px; border:1px solid rgba(0,176,80,.14); border-radius:12px; color:rgba(187,216,200,.68); background:rgba(0,176,80,.045); font-size:10px; font-weight:650; letter-spacing:.025em; }
.new-proposal-bank-view-note span { width:7px; height:7px; border-radius:50%; background:#00b050; box-shadow:0 0 10px rgba(0,176,80,.42); }

.new-proposal-bank-content { flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px 30px 28px; scrollbar-width:thin; scrollbar-color:rgba(0,176,80,.30) transparent; }
.new-proposal-bank-content::-webkit-scrollbar { width:8px; }
.new-proposal-bank-content::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background:rgba(0,176,80,.28); background-clip:padding-box; }
.new-proposal-bank-section + .new-proposal-bank-section { margin-top:26px; }
.new-proposal-bank-section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:12px; }
.new-proposal-bank-section-title > div { display:grid; gap:3px; }
.new-proposal-bank-section-title span { color:rgba(223,235,241,.82); font-size:10px; font-weight:760; letter-spacing:.11em; }
.new-proposal-bank-section-title small { color:rgba(157,177,191,.49); font-size:10px; }
.new-proposal-bank-section-title > strong { color:rgba(159,180,193,.52); font-size:10px; font-weight:620; }
.new-proposal-bank-featured, .new-proposal-bank-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }

.new-proposal-bank-card { position:relative; min-width:0; min-height:104px; display:grid; grid-template-columns:48px minmax(0,1fr) 28px; align-items:center; gap:13px; padding:17px; overflow:hidden; text-align:left; border:1px solid rgba(122,146,162,.15); border-radius:17px; color:inherit; background:linear-gradient(145deg,rgba(255,255,255,.018),transparent 58%),rgba(14,24,33,.78); box-shadow:inset 0 1px 0 rgba(255,255,255,.018); cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.new-proposal-bank-card::before { content:""; position:absolute; inset:auto -36px -54px auto; width:120px; height:120px; border-radius:50%; background:rgba(0,176,80,.10); filter:blur(34px); opacity:0; transition:opacity .18s ease; pointer-events:none; }
.new-proposal-bank-card:hover, .new-proposal-bank-card:focus-visible { outline:0; transform:translateY(-2px); border-color:rgba(0,176,80,.42); background:linear-gradient(145deg,rgba(0,176,80,.055),transparent 58%),rgba(17,29,38,.92); box-shadow:0 12px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025); }
.new-proposal-bank-card:hover::before, .new-proposal-bank-card:focus-visible::before { opacity:1; }
.new-proposal-bank-card.is-featured { min-height:116px; border-color:rgba(0,176,80,.20); background:linear-gradient(145deg,rgba(0,176,80,.075),transparent 62%),rgba(14,26,34,.88); }
.new-proposal-bank-logo { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(0,176,80,.28); border-radius:15px; background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.08),transparent 34%),rgba(0,176,80,.08); color:#71eaa7; font-size:13px; font-weight:760; letter-spacing:-.025em; box-shadow:inset 0 1px 0 rgba(255,255,255,.03); }
.new-proposal-bank-card-copy { min-width:0; display:grid; gap:5px; }
.new-proposal-bank-card-copy strong { overflow:hidden; color:#edf5f8; font-size:13px; font-weight:670; text-overflow:ellipsis; white-space:nowrap; }
.new-proposal-bank-card-copy small { overflow:hidden; color:rgba(165,184,196,.54); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.new-proposal-bank-card-action { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:rgba(172,193,205,.42); background:rgba(255,255,255,.018); transition:.16s ease; }
.new-proposal-bank-card-action svg { width:15px; height:15px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.new-proposal-bank-card:hover .new-proposal-bank-card-action, .new-proposal-bank-card:focus-visible .new-proposal-bank-card-action { color:#64e59d; background:rgba(0,176,80,.07); transform:translateX(2px); }

.new-proposal-bank-empty { min-height:190px; display:grid; place-items:center; align-content:center; gap:7px; border:1px dashed rgba(148,163,184,.14); border-radius:18px; color:rgba(181,198,208,.56); background:rgba(255,255,255,.012); text-align:center; }
.new-proposal-bank-empty > span { font-size:29px; opacity:.55; }
.new-proposal-bank-empty strong { color:rgba(223,233,239,.72); font-size:13px; }
.new-proposal-bank-empty small { font-size:10px; }

.new-proposal-bank-footer { flex:0 0 auto; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 30px; border-top:1px solid rgba(148,163,184,.09); background:rgba(5,12,18,.72); }
.new-proposal-bank-footer > span { display:inline-flex; align-items:center; gap:8px; color:rgba(153,174,187,.52); font-size:10px; }
.new-proposal-bank-footer > span i { width:6px; height:6px; border-radius:50%; background:#00b050; }
.new-proposal-bank-footer button { min-width:94px; height:38px; padding:0 16px; border:1px solid rgba(148,163,184,.14); border-radius:12px; color:rgba(218,228,234,.72); background:rgba(255,255,255,.025); cursor:pointer; transition:.16s ease; }
.new-proposal-bank-footer button:hover { color:#fff; border-color:rgba(148,163,184,.26); background:rgba(255,255,255,.045); }

#proposal-drawer .proposal-automation-bank-context { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; margin:-2px 0 16px; padding:11px 12px; border:1px solid rgba(0,176,80,.19); border-radius:15px; background:linear-gradient(90deg,rgba(0,176,80,.075),transparent 54%),rgba(6,18,19,.54); }
#proposal-drawer .proposal-automation-bank-context.hidden { display:none !important; }
#proposal-drawer .proposal-automation-bank-mark { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(0,176,80,.30); border-radius:13px; color:#73eba8; background:rgba(0,176,80,.08); font-size:11px; font-weight:760; }
#proposal-drawer .proposal-automation-bank-context > div { min-width:0; display:grid; gap:2px; }
#proposal-drawer .proposal-automation-bank-context small { color:rgba(163,190,176,.56); font-size:8px; font-weight:700; letter-spacing:.10em; }
#proposal-drawer .proposal-automation-bank-context strong { overflow:hidden; color:#eaf8ef; font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
#proposal-drawer .proposal-automation-bank-context button { height:34px; padding:0 11px; border:1px solid rgba(0,176,80,.20); border-radius:10px; color:rgba(169,225,190,.78); background:rgba(0,176,80,.045); font-size:9px; font-weight:650; cursor:pointer; transition:.16s ease; }
#proposal-drawer .proposal-automation-bank-context button:hover { color:#d9f9e5; border-color:rgba(0,176,80,.40); background:rgba(0,176,80,.09); }

html[data-app-theme="light"] .new-proposal-bank-backdrop { background:radial-gradient(circle at 78% 12%,rgba(0,176,80,.08),transparent 29%),rgba(226,233,238,.70); }
html[data-app-theme="light"] .new-proposal-bank-modal { color:#173047; border-color:rgba(59,83,101,.15); background:linear-gradient(180deg,rgba(249,253,251,.995),rgba(248,251,253,.995) 26%,#f5f8fa),#f7fafb; box-shadow:0 34px 95px rgba(32,52,66,.20),0 4px 18px rgba(32,52,66,.08),inset 0 1px 0 rgba(255,255,255,.90); }
html[data-app-theme="light"] .new-proposal-bank-head { border-bottom-color:rgba(50,76,94,.10); }
html[data-app-theme="light"] .new-proposal-bank-head h2, html[data-app-theme="light"] .new-proposal-bank-card-copy strong { color:#132b3e; }
html[data-app-theme="light"] .new-proposal-bank-head p, html[data-app-theme="light"] .new-proposal-bank-section-title small, html[data-app-theme="light"] .new-proposal-bank-card-copy small { color:rgba(52,78,96,.58); }
html[data-app-theme="light"] .new-proposal-bank-section-title span { color:rgba(26,54,72,.76); }
html[data-app-theme="light"] .new-proposal-bank-search { border-color:rgba(68,94,112,.17); background:rgba(255,255,255,.82); }
html[data-app-theme="light"] .new-proposal-bank-search input { color:#183348; }
html[data-app-theme="light"] .new-proposal-bank-card { border-color:rgba(66,91,109,.13); background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(244,248,250,.82)),#f7fafb; box-shadow:0 5px 16px rgba(43,67,83,.045),inset 0 1px 0 #fff; }
html[data-app-theme="light"] .new-proposal-bank-card:hover, html[data-app-theme="light"] .new-proposal-bank-card:focus-visible { border-color:rgba(0,176,80,.36); background:linear-gradient(145deg,rgba(0,176,80,.055),rgba(255,255,255,.92)),#fff; box-shadow:0 12px 26px rgba(43,67,83,.09),inset 0 1px 0 #fff; }
html[data-app-theme="light"] .new-proposal-bank-logo { border-color:rgba(0,176,80,.22); color:#068640; background:rgba(0,176,80,.065); }
html[data-app-theme="light"] .new-proposal-bank-footer { border-top-color:rgba(59,84,102,.09); background:rgba(245,248,250,.88); }
html[data-app-theme="light"] #proposal-drawer .proposal-automation-bank-context { border-color:rgba(0,176,80,.20); background:linear-gradient(90deg,rgba(0,176,80,.07),transparent 60%),rgba(250,253,251,.92); }
html[data-app-theme="light"] #proposal-drawer .proposal-automation-bank-context strong { color:#174029; }

@media (max-width:860px) {
  .new-proposal-bank-backdrop { padding:12px; }
  .new-proposal-bank-modal { width:100%; max-height:94vh; border-radius:20px; }
  .new-proposal-bank-head, .new-proposal-bank-toolbar, .new-proposal-bank-content, .new-proposal-bank-footer { padding-left:18px; padding-right:18px; }
  .new-proposal-bank-toolbar { align-items:stretch; flex-direction:column; }
  .new-proposal-bank-view-note { align-self:flex-start; }
  .new-proposal-bank-featured, .new-proposal-bank-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .new-proposal-bank-featured, .new-proposal-bank-grid { grid-template-columns:1fr; }
  .new-proposal-bank-footer > span, .new-proposal-bank-search kbd { display:none; }
  #proposal-drawer .proposal-automation-bank-context { grid-template-columns:42px minmax(0,1fr); }
  #proposal-drawer .proposal-automation-bank-context button { grid-column:1 / -1; }
}

/* =====================================================================
   V42 — CATÁLOGO GLOBAL DE BANCOS + FLUXO EXCLUSIVO POR BANCO
   ===================================================================== */

/* Logos reais do catálogo */
.automation-bank-logo-frame {
  overflow: hidden;
}

.automation-bank-logo-frame img,
.automation-bank-admin-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.new-proposal-bank-logo {
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.06), transparent 38%),
    rgba(0,176,80,.06);
}

.new-proposal-bank-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.new-proposal-bank-logo.automation-bank-logo-fallback {
  padding: 0;
}

/* ---------- Master Global / Bancos ---------- */
.automation-banks-admin-workspace {
  min-height: 100%;
  padding: 22px 26px 34px;
}

.automation-banks-admin-commandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.automation-banks-admin-heading {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.automation-banks-admin-kicker {
  color: #58d893;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .16em;
}

.automation-banks-admin-heading > strong {
  color: #eff7fa;
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -.025em;
}

.automation-banks-admin-heading > small {
  color: rgba(166,185,198,.56);
  font-size: 11px;
}

.automation-banks-admin-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.automation-banks-admin-refresh,
.automation-banks-admin-new {
  height: 42px;
  border-radius: 13px;
  cursor: pointer;
  transition: .17s ease;
}

.automation-banks-admin-refresh {
  width: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148,163,184,.14);
  color: rgba(211,224,232,.65);
  background: rgba(255,255,255,.025);
}

.automation-banks-admin-refresh svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.automation-banks-admin-refresh:hover {
  color: #fff;
  border-color: rgba(0,176,80,.32);
  background: rgba(0,176,80,.055);
}

.automation-banks-admin-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(0,176,80,.40);
  color: #eafff2;
  background: linear-gradient(135deg, rgba(0,176,80,.22), rgba(0,176,80,.11));
  box-shadow: 0 8px 24px rgba(0,176,80,.08);
  font-size: 11px;
  font-weight: 680;
}

.automation-banks-admin-new span {
  font-size: 17px;
  font-weight: 450;
}

.automation-banks-admin-new:hover {
  transform: translateY(-1px);
  border-color: rgba(0,176,80,.62);
  background: linear-gradient(135deg, rgba(0,176,80,.30), rgba(0,176,80,.14));
}

.automation-banks-admin-stage {
  min-height: 390px;
  padding: 18px;
  border: 1px solid rgba(126,149,164,.11);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% -10%, rgba(0,176,80,.055), transparent 28%),
    rgba(10,18,26,.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.017);
}

.automation-banks-admin-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.automation-banks-admin-stage-head span,
.automation-banks-admin-stage-head strong {
  font-size: 9px;
  letter-spacing: .10em;
}

.automation-banks-admin-stage-head span {
  color: rgba(204,220,229,.68);
  font-weight: 740;
}

.automation-banks-admin-stage-head strong {
  color: rgba(151,174,188,.48);
  font-weight: 620;
}

.automation-banks-admin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.automation-bank-admin-card {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 16px;
  text-align: left;
  border: 1px solid rgba(135,156,170,.13);
  border-radius: 17px;
  color: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.018), transparent 55%), rgba(14,24,33,.72);
  cursor: pointer;
  transition: .17s ease;
}

.automation-bank-admin-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,176,80,.34);
  background: linear-gradient(145deg, rgba(0,176,80,.055), transparent 58%), rgba(16,28,37,.88);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}

.automation-bank-admin-card.is-inactive {
  opacity: .56;
  filter: saturate(.65);
}

.automation-bank-admin-logo {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 6px;
  border: 1px solid rgba(126,150,166,.16);
  border-radius: 15px;
  color: #65e49d;
  background: rgba(255,255,255,.025);
  font-size: 12px;
  font-weight: 740;
}

.automation-bank-admin-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.automation-bank-admin-copy strong {
  overflow: hidden;
  color: #eaf3f7;
  font-size: 12px;
  font-weight: 670;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-bank-admin-copy small {
  overflow: hidden;
  color: rgba(157,178,191,.50);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-bank-admin-status {
  align-self: start;
  padding: 5px 7px;
  border: 1px solid rgba(0,176,80,.22);
  border-radius: 999px;
  color: #63dc98;
  background: rgba(0,176,80,.055);
  font-size: 8px;
  font-weight: 740;
  letter-spacing: .08em;
}

.automation-bank-admin-status.is-off {
  border-color: rgba(148,163,184,.16);
  color: rgba(176,191,201,.54);
  background: rgba(148,163,184,.035);
}

.automation-banks-admin-empty {
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px dashed rgba(148,163,184,.13);
  border-radius: 17px;
  text-align: center;
}

.automation-banks-admin-empty-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 3px;
  border: 1px solid rgba(0,176,80,.20);
  border-radius: 15px;
  color: #64dc99;
  background: rgba(0,176,80,.05);
  font-size: 25px;
  font-weight: 350;
}

.automation-banks-admin-empty strong {
  color: rgba(229,239,244,.82);
  font-size: 13px;
}

.automation-banks-admin-empty small {
  color: rgba(157,178,191,.48);
  font-size: 10px;
}

.automation-banks-admin-empty button {
  height: 36px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid rgba(0,176,80,.30);
  border-radius: 11px;
  color: #dffbed;
  background: rgba(0,176,80,.08);
  cursor: pointer;
}

/* ---------- Modal de cadastro/edição ---------- */
.automation-bank-admin-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1320;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2,8,12,.68);
  backdrop-filter: blur(12px);
}

.automation-bank-admin-backdrop.hidden { display: none !important; }

.automation-bank-admin-modal {
  width: min(720px, 96vw);
  overflow: hidden;
  border: 1px solid rgba(138,159,173,.16);
  border-radius: 22px;
  color: #edf5f8;
  background:
    radial-gradient(circle at 12% 0%, rgba(0,176,80,.07), transparent 28%),
    linear-gradient(180deg, #101b24, #0b141c);
  box-shadow: 0 34px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.025);
}

.automation-bank-admin-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(148,163,184,.10);
}

.automation-bank-admin-modal > header > div {
  display: grid;
  gap: 5px;
}

.automation-bank-admin-modal > header span {
  color: #59da94;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .14em;
}

.automation-bank-admin-modal > header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -.025em;
}

.automation-bank-admin-modal > header button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148,163,184,.13);
  border-radius: 12px;
  color: rgba(220,231,237,.68);
  background: rgba(255,255,255,.025);
  font-size: 22px;
  cursor: pointer;
}

.automation-bank-admin-modal form { padding: 22px 24px 20px; }

.automation-bank-admin-form-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 22px;
}

.automation-bank-admin-logo-column {
  display: grid;
  align-content: start;
  gap: 8px;
  text-align: center;
}

.automation-bank-admin-logo-column > small {
  color: rgba(158,179,192,.48);
  font-size: 9px;
}

.automation-bank-admin-preview {
  width: 180px;
  height: 140px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 14px;
  overflow: hidden;
  border: 1px dashed rgba(112,148,167,.26);
  border-radius: 17px;
  color: rgba(196,213,223,.62);
  background: rgba(255,255,255,.018);
  cursor: pointer;
}

.automation-bank-admin-preview:hover {
  border-color: rgba(0,176,80,.42);
  background: rgba(0,176,80,.035);
}

.automation-bank-admin-preview > span { font-size: 28px; font-weight: 330; }
.automation-bank-admin-preview > small { font-size: 9px; }
.automation-bank-admin-preview img {
  width: 100%;
  height: 92px;
  display: block;
  object-fit: contain;
}

.automation-bank-admin-image-button {
  height: 34px;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 10px;
  color: rgba(218,230,237,.72);
  background: rgba(255,255,255,.025);
  cursor: pointer;
}

.automation-bank-admin-fields {
  display: grid;
  align-content: start;
  gap: 18px;
}

.automation-bank-admin-fields > label:not(.automation-bank-admin-active-row) {
  display: grid;
  gap: 7px;
}

.automation-bank-admin-fields > label > span {
  color: rgba(197,213,223,.68);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.automation-bank-admin-fields input[type="text"] {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(117,145,162,.22);
  border-radius: 13px;
  outline: none;
  color: #edf5f8;
  background: rgba(20,31,42,.82);
}

.automation-bank-admin-fields input[type="text"]:focus {
  border-color: rgba(0,176,80,.52);
  box-shadow: 0 0 0 3px rgba(0,176,80,.065);
}

.automation-bank-admin-active-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 46px;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(128,151,166,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.016);
}

.automation-bank-admin-active-row > span {
  display: grid;
  gap: 4px;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.automation-bank-admin-active-row strong {
  color: rgba(230,239,244,.80);
  font-size: 11px;
  font-weight: 660;
}

.automation-bank-admin-active-row small {
  color: rgba(157,178,191,.48);
  font-size: 9px;
}

.automation-bank-admin-active-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.automation-bank-admin-active-row i {
  position: relative;
  width: 44px;
  height: 24px;
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 999px;
  background: rgba(148,163,184,.08);
  transition: .16s ease;
}

.automation-bank-admin-active-row i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(216,228,235,.72);
  transition: .16s ease;
}

.automation-bank-admin-active-row input:checked + i {
  border-color: rgba(0,176,80,.38);
  background: rgba(0,176,80,.16);
}

.automation-bank-admin-active-row input:checked + i::after {
  transform: translateX(20px);
  background: #43d787;
}

.automation-bank-admin-modal .form-error { margin-top: 16px; }

.automation-bank-admin-modal form > footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(148,163,184,.09);
}

/* ---------- Fluxo exclusivo do banco ---------- */
body.automation-bank-flow-open { overflow: hidden; }

.automation-bank-flow-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1275;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 78% 10%, rgba(0,176,80,.08), transparent 30%),
    rgba(1,7,11,.72);
  backdrop-filter: blur(15px);
}

.automation-bank-flow-backdrop.hidden { display: none !important; }

.automation-bank-flow-modal {
  width: min(960px, 96vw);
  height: min(760px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(130,154,169,.15);
  border-radius: 24px;
  color: #edf5f8;
  background:
    radial-gradient(circle at 88% -4%, rgba(0,176,80,.07), transparent 27%),
    linear-gradient(180deg, rgba(15,26,35,.995), rgba(7,15,22,.995));
  box-shadow: 0 38px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.025);
}

.automation-bank-flow-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(148,163,184,.10);
}

.automation-bank-flow-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.automation-bank-flow-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(0,176,80,.24);
  border-radius: 15px;
  color: #62df99;
  background: rgba(0,176,80,.055);
  font-size: 12px;
  font-weight: 750;
}

.automation-bank-flow-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.automation-bank-flow-identity > div:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.automation-bank-flow-identity span {
  color: #59d994;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: .15em;
}

.automation-bank-flow-identity h2 {
  margin: 0;
  overflow: hidden;
  color: #f3f8fa;
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-bank-flow-head > button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148,163,184,.13);
  border-radius: 13px;
  color: rgba(219,230,236,.65);
  background: rgba(255,255,255,.022);
  font-size: 23px;
  cursor: pointer;
}

.automation-bank-flow-head > button:hover {
  color: #fff;
  border-color: rgba(0,176,80,.34);
  background: rgba(0,176,80,.055);
}

.automation-bank-flow-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 26px;
}

.automation-bank-flow-ready {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 32px;
  border: 1px dashed rgba(132,155,170,.14);
  border-radius: 20px;
  text-align: center;
  background: rgba(255,255,255,.012);
}

.automation-bank-flow-ready-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(0,176,80,.22);
  border-radius: 21px;
  color: #60df98;
  background: rgba(0,176,80,.055);
  font-size: 17px;
  font-weight: 760;
}

.automation-bank-flow-ready-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.automation-bank-flow-ready > span {
  color: #58d994;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: .16em;
}

.automation-bank-flow-ready h3 {
  margin: 1px 0 0;
  color: #f0f7fa;
  font-size: 24px;
  font-weight: 680;
  letter-spacing: -.025em;
}

.automation-bank-flow-ready p {
  width: min(570px, 100%);
  margin: 4px auto 10px;
  color: rgba(167,187,199,.56);
  font-size: 11px;
  line-height: 1.6;
}

.automation-bank-flow-roadmap {
  width: min(580px, 100%);
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 7px 10px;
  margin-top: 5px;
  padding: 14px;
  border: 1px solid rgba(128,151,166,.11);
  border-radius: 15px;
  background: rgba(255,255,255,.015);
  text-align: left;
}

.automation-bank-flow-roadmap b {
  display: grid;
  place-items: center;
  height: 25px;
  border-radius: 8px;
  color: #59da94;
  background: rgba(0,176,80,.055);
  font-size: 8px;
  letter-spacing: .04em;
}

.automation-bank-flow-roadmap span {
  align-self: center;
  color: rgba(211,224,231,.68);
  font-size: 10px;
}

.automation-bank-flow-footer {
  flex: 0 0 auto;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  border-top: 1px solid rgba(148,163,184,.09);
  background: rgba(4,10,15,.52);
}

.automation-bank-flow-footer button {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid rgba(148,163,184,.13);
  border-radius: 11px;
  color: rgba(218,230,236,.70);
  background: rgba(255,255,255,.022);
  cursor: pointer;
}

.automation-bank-flow-footer button svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.automation-bank-flow-footer > span {
  color: rgba(153,174,187,.43);
  font-size: 9px;
}

/* ---------- Light mode ---------- */
html[data-app-theme="light"] .automation-banks-admin-heading > strong,
html[data-app-theme="light"] .automation-bank-admin-copy strong,
html[data-app-theme="light"] .automation-banks-admin-empty strong {
  color: #183247;
}

html[data-app-theme="light"] .automation-banks-admin-heading > small,
html[data-app-theme="light"] .automation-bank-admin-copy small,
html[data-app-theme="light"] .automation-banks-admin-empty small {
  color: rgba(48,75,94,.54);
}

html[data-app-theme="light"] .automation-banks-admin-stage {
  border-color: rgba(62,88,105,.12);
  background: radial-gradient(circle at 92% -10%, rgba(0,176,80,.06), transparent 28%), rgba(255,255,255,.64);
}

html[data-app-theme="light"] .automation-bank-admin-card {
  border-color: rgba(62,88,105,.12);
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(245,249,251,.86));
  box-shadow: 0 4px 15px rgba(39,62,77,.035);
}

html[data-app-theme="light"] .automation-bank-admin-card:hover {
  border-color: rgba(0,176,80,.30);
  background: linear-gradient(145deg, rgba(0,176,80,.045), rgba(255,255,255,.96));
  box-shadow: 0 10px 24px rgba(39,62,77,.07);
}

html[data-app-theme="light"] .automation-bank-admin-modal,
html[data-app-theme="light"] .automation-bank-flow-modal {
  color: #173047;
  border-color: rgba(54,80,97,.14);
  background: linear-gradient(180deg, #fbfdfd, #f4f8fa);
  box-shadow: 0 34px 90px rgba(31,53,68,.20), inset 0 1px 0 #fff;
}

html[data-app-theme="light"] .automation-bank-admin-fields input[type="text"] {
  color: #173047;
  border-color: rgba(59,87,104,.17);
  background: rgba(255,255,255,.90);
}

html[data-app-theme="light"] .automation-bank-admin-active-row strong,
html[data-app-theme="light"] .automation-bank-flow-identity h2,
html[data-app-theme="light"] .automation-bank-flow-ready h3 {
  color: #173047;
}

html[data-app-theme="light"] .automation-bank-admin-active-row small,
html[data-app-theme="light"] .automation-bank-flow-ready p,
html[data-app-theme="light"] .automation-bank-flow-roadmap span {
  color: rgba(49,76,94,.58);
}

html[data-app-theme="light"] .automation-bank-flow-backdrop,
html[data-app-theme="light"] .automation-bank-admin-backdrop {
  background: rgba(224,232,237,.70);
}

html[data-app-theme="light"] .automation-bank-flow-ready,
html[data-app-theme="light"] .automation-bank-flow-roadmap {
  border-color: rgba(59,86,103,.12);
  background: rgba(255,255,255,.58);
}

html[data-app-theme="light"] .automation-bank-flow-footer {
  border-top-color: rgba(59,84,102,.09);
  background: rgba(246,249,250,.86);
}

@media (max-width: 1180px) {
  .automation-banks-admin-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .automation-banks-admin-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .automation-bank-admin-form-grid { grid-template-columns: 1fr; }
  .automation-bank-admin-logo-column { justify-items: start; text-align: left; }
  .automation-banks-admin-commandbar { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .automation-banks-admin-workspace { padding: 16px; }
  .automation-banks-admin-grid { grid-template-columns: 1fr; }
  .automation-bank-flow-backdrop { padding: 8px; }
  .automation-bank-flow-modal { width: 100%; height: 96vh; border-radius: 18px; }
  .automation-bank-flow-content { padding: 16px; }
  .automation-bank-flow-ready { padding: 22px 14px; }
}

/* =====================================================================
   V42B — LOGO DO BANCO 100% DENTRO DO QUADRADO
   Força a remoção do padding antigo e faz a imagem ocupar toda a área útil.
   ===================================================================== */
.new-proposal-bank-logo {
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 15px !important;
}

.new-proposal-bank-logo > img,
.new-proposal-bank-logo img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 14px !important;
}


/* =====================================================================
   V44 — MASTER GLOBAL / SALVAR VERDE + LOGOS QUADRADAS CRM/BANCO
   ===================================================================== */

/* Ações principais do catálogo global seguem a identidade verde do Corban. */
#automation-bank-admin-form .btn.primary,
#automation-crm-admin-form .btn.primary {
  min-width: 108px;
  border: 1px solid rgba(0, 176, 80, .58) !important;
  color: #ecfff5 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 46%),
    linear-gradient(135deg, #00b050, #07924a) !important;
  box-shadow:
    0 10px 24px rgba(0,176,80,.18),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.16);
}

#automation-bank-admin-form .btn.primary:hover:not(:disabled),
#automation-crm-admin-form .btn.primary:hover:not(:disabled) {
  border-color: rgba(53, 222, 127, .78) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 46%),
    linear-gradient(135deg, #08bd5b, #07994e) !important;
  box-shadow:
    0 12px 28px rgba(0,176,80,.25),
    0 0 0 3px rgba(0,176,80,.07),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  transform: translateY(-1px);
}

#automation-bank-admin-form .btn.primary:active:not(:disabled),
#automation-crm-admin-form .btn.primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(0,176,80,.16),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Logo nos cards do próprio Master Global: ocupa 100% do quadrado arredondado. */
.automation-bank-admin-logo {
  padding: 0 !important;
  overflow: hidden !important;
  border-color: rgba(0,176,80,.28) !important;
  background: rgba(0,176,80,.055) !important;
}

.automation-bank-admin-logo img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
}

/* Preview no cadastro/edição de Banco e CRM: imagem realmente quadrada. */
.automation-bank-admin-preview {
  min-height: 140px;
}

.automation-bank-admin-preview:has(img) {
  padding: 14px !important;
}

.automation-bank-admin-preview img {
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  max-height: 96px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 1px solid rgba(0,176,80,.30);
  border-radius: 16px !important;
  background: rgba(0,176,80,.05);
  box-shadow:
    0 10px 24px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.04);
}

html[data-app-theme="light"] #automation-bank-admin-form .btn.primary,
html[data-app-theme="light"] #automation-crm-admin-form .btn.primary {
  color: #ffffff !important;
  border-color: rgba(0, 151, 68, .52) !important;
  background: linear-gradient(135deg, #00ad4f, #078b47) !important;
  box-shadow: 0 9px 20px rgba(0,145,64,.16), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

html[data-app-theme="light"] .automation-bank-admin-preview img,
html[data-app-theme="light"] .automation-bank-admin-logo img {
  box-shadow: 0 8px 20px rgba(37,67,52,.10);
}


/* =========================================================
   V45 — CRM POR FUNCIONÁRIO / CREDENCIAL PARA O ROBÔ
   ========================================================= */
.employee-crm-access-card {
  position: relative;
  overflow: visible;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 18%, var(--app-border));
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--app-accent) 7%, transparent), transparent 38%),
    color-mix(in srgb, var(--app-accent) 2.4%, var(--app-surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.employee-crm-access-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--app-border);
}

.employee-crm-access-head > div { min-width: 0; display: grid; gap: 3px; }
.employee-crm-access-head span { color: var(--app-accent); font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.employee-crm-access-head strong { color: var(--app-text); font-size: 10px; font-weight: 750; }
.employee-crm-access-head small { max-width: 570px; color: var(--app-muted-2); font-size: 7px; line-height: 1.5; }
.employee-crm-access-head > i {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%;
  background: var(--app-accent);
  box-shadow: 0 0 13px color-mix(in srgb, var(--app-accent) 45%, transparent);
}

.employee-crm-access-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.employee-crm-select-field { max-width: 100%; }
.employee-crm-credentials-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 2px;
}
.employee-crm-credentials-fields.hidden { display: none !important; }
.employee-crm-password-shell { position: relative; min-width: 0; }
.employee-crm-password-shell input { padding-right: 46px !important; }
.employee-crm-password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0;
  border-radius: 9px; color: var(--app-accent); background: transparent; cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.employee-crm-password-toggle:hover, .employee-crm-password-toggle:focus-visible {
  outline: 0; background: color-mix(in srgb, var(--app-accent) 8%, transparent);
}
.employee-crm-password-toggle:active { transform: translateY(-50%) scale(.96); }
.employee-crm-password-toggle .eye-outline { border-color: color-mix(in srgb, var(--app-accent) 80%, white 20%); }
.employee-crm-password-toggle .eye-pupil { background: color-mix(in srgb, var(--app-accent) 82%, white 18%); }
html[data-app-theme="light"] .employee-crm-access-card {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--app-accent) 6%, transparent), transparent 38%),
    #ffffff;
}
@media (max-width: 720px) {
  .employee-crm-credentials-fields { grid-template-columns: 1fr; }
}

/* =====================================================================
   V46 — FLUXO PADRÃO: CPF -> CRM -> BENEFÍCIO -> DADOS DO CLIENTE
   Primeiro conector real: Vanguard
   ===================================================================== */
.automation-bank-flow-loading-shell {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: rgba(205,220,229,.72);
}
.automation-bank-flow-loading-shell > span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(148,163,184,.15);
  border-top-color: #00b050;
  animation: corbanSpin .8s linear infinite;
}
.automation-bank-flow-loading-shell strong { font-size: 12px; font-weight: 650; }

.automation-bank-cpf-stage,
.automation-bank-benefits-stage,
.automation-bank-customer-stage {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 18px 0 28px;
}

.automation-bank-cpf-heading { display: grid; gap: 7px; margin-bottom: 18px; }
.automation-bank-cpf-heading > span {
  color: #63e49d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}
.automation-bank-cpf-heading h3 {
  margin: 0;
  color: #f3f8fb;
  font-size: 24px;
  font-weight: 720;
  letter-spacing: -.025em;
}
.automation-bank-cpf-heading p {
  margin: 0;
  max-width: 650px;
  color: rgba(171,190,202,.62);
  font-size: 11px;
  line-height: 1.65;
}

.automation-bank-flow-crm-status {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 10px;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(148,163,184,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.018);
}
.automation-bank-flow-crm-status.is-ready {
  border-color: rgba(0,176,80,.24);
  background: linear-gradient(90deg,rgba(0,176,80,.07),transparent 62%),rgba(255,255,255,.015);
}
.automation-bank-flow-crm-status.is-warning { border-color: rgba(245,158,11,.22); }
.automation-bank-flow-crm-logo {
  width: 46px;
  height: 46px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,176,80,.26);
  border-radius: 13px;
  background: rgba(0,176,80,.06);
  color: #6de9a4;
  font-size: 11px;
  font-weight: 800;
}
.automation-bank-flow-crm-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.automation-bank-flow-crm-status > div { min-width: 0; display: grid; gap: 2px; }
.automation-bank-flow-crm-status small { color: rgba(153,176,190,.52); font-size: 8px; font-weight: 750; letter-spacing: .1em; }
.automation-bank-flow-crm-status strong { color: #edf6f9; font-size: 12px; font-weight: 680; }
.automation-bank-flow-crm-status span { color: rgba(164,184,196,.56); font-size: 9px; }
.automation-bank-flow-crm-status > i { width: 8px; height: 8px; border-radius: 50%; background: #00b050; box-shadow: 0 0 12px rgba(0,176,80,.48); }
.automation-bank-flow-crm-status.is-warning > i { background: #f59e0b; box-shadow: 0 0 12px rgba(245,158,11,.38); }

.automation-bank-cpf-form {
  display: grid;
  gap: 9px;
  padding: 18px;
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(255,255,255,.018),transparent 70%),rgba(12,21,30,.78);
}
.automation-bank-cpf-form > label { color: rgba(184,201,211,.65); font-size: 9px; font-weight: 760; letter-spacing: .08em; }
.automation-bank-cpf-input-shell {
  min-height: 54px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(0,176,80,.30);
  border-radius: 15px;
  background: rgba(22,33,44,.90);
  box-shadow: 0 0 0 3px rgba(0,176,80,.035);
}
.automation-bank-cpf-input-shell > span { display: grid; place-items: center; border-right: 1px solid rgba(148,163,184,.10); }
.automation-bank-cpf-input-shell svg { width: 17px; height: 17px; stroke: rgba(151,188,169,.66); stroke-width: 1.8; }
.automation-bank-cpf-input-shell input {
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 14px;
  background: transparent;
  color: #f5fafc;
  font: inherit;
  font-size: 15px;
  font-weight: 620;
}
.automation-bank-cpf-input-shell input::placeholder { color: rgba(149,169,181,.35); font-weight: 520; }
.automation-bank-cpf-input-shell button {
  margin: 6px;
  min-width: 132px;
  border: 0;
  border-radius: 11px;
  color: #f4fff8;
  background: linear-gradient(135deg,#00b050,#078944);
  font: inherit;
  font-size: 10px;
  font-weight: 760;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,176,80,.16);
}
.automation-bank-cpf-input-shell button:disabled,
.automation-bank-cpf-input-shell input:disabled { opacity: .45; cursor: not-allowed; }
.automation-bank-cpf-form > small { color: rgba(153,174,187,.48); font-size: 9px; line-height: 1.5; }
.automation-bank-cpf-form > small.is-warning { color: rgba(245,189,94,.75); }

.automation-bank-inline-back {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(162,188,175,.70);
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
}
.automation-bank-inline-back:hover { color: #7aebb0; }

.automation-bank-benefits-grid { display: grid; gap: 10px; }
.automation-bank-benefit-card {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 36px;
  align-items: center;
  gap: 12px;
  min-height: 90px;
  padding: 14px 15px;
  border: 1px solid rgba(148,163,184,.13);
  border-radius: 16px;
  text-align: left;
  color: inherit;
  background: linear-gradient(145deg,rgba(255,255,255,.018),transparent 65%),rgba(13,23,32,.86);
  cursor: pointer;
  transition: .16s ease;
}
.automation-bank-benefit-card:hover {
  transform: translateY(-1px);
  border-color: rgba(0,176,80,.40);
  background: linear-gradient(145deg,rgba(0,176,80,.065),transparent 68%),rgba(15,27,35,.94);
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}
.automation-bank-benefit-index {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #69e5a1;
  background: rgba(0,176,80,.09);
  font-size: 9px;
  font-weight: 800;
}
.automation-bank-benefit-card > div { min-width: 0; display: grid; gap: 3px; }
.automation-bank-benefit-card small { color: rgba(150,173,187,.48); font-size: 8px; font-weight: 760; letter-spacing: .08em; }
.automation-bank-benefit-card strong { color: #f0f7fa; font-size: 15px; font-weight: 720; }
.automation-bank-benefit-card p { margin: 0; color: rgba(170,191,203,.61); font-size: 10px; }
.automation-bank-benefit-action { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #6fe6a5; background: rgba(0,176,80,.07); }

.automation-bank-customer-success {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(0,176,80,.24);
  border-radius: 16px;
  background: linear-gradient(90deg,rgba(0,176,80,.085),transparent 64%),rgba(255,255,255,.012);
}
.automation-bank-customer-success > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #7affb2; background: rgba(0,176,80,.12); font-size: 18px; }
.automation-bank-customer-success > div { display: grid; gap: 2px; }
.automation-bank-customer-success small { color: #62d995; font-size: 8px; font-weight: 800; letter-spacing: .10em; }
.automation-bank-customer-success strong { color: #f1f8fa; font-size: 14px; font-weight: 720; }
.automation-bank-customer-success p { margin: 0; color: rgba(162,184,197,.57); font-size: 9px; }

.automation-customer-section {
  margin-top: 12px;
  padding: 15px;
  border: 1px solid rgba(148,163,184,.11);
  border-radius: 17px;
  background: rgba(11,20,28,.72);
}
.automation-customer-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.automation-customer-section-head span { color: rgba(218,231,237,.78); font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.automation-customer-section-head small { color: rgba(143,166,180,.43); font-size: 8px; }
.automation-customer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.automation-customer-field { min-width: 0; display: grid; gap: 4px; padding: 10px 11px; border: 1px solid rgba(148,163,184,.08); border-radius: 11px; background: rgba(255,255,255,.015); }
.automation-customer-field.is-wide { grid-column: span 2; }
.automation-customer-field small { color: rgba(142,165,179,.48); font-size: 7px; font-weight: 740; letter-spacing: .06em; text-transform: uppercase; }
.automation-customer-field strong { overflow: hidden; color: rgba(229,239,244,.88); font-size: 10px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.automation-customer-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.automation-customer-metrics .automation-customer-field strong { color: #55dc91; font-size: 12px; }

.automation-customer-loans { display: grid; gap: 7px; }
.automation-customer-loan { display: grid; grid-template-columns: minmax(120px,1.5fr) repeat(5,minmax(80px,1fr)); gap: 8px; align-items: center; padding: 10px 11px; border: 1px solid rgba(148,163,184,.08); border-radius: 11px; background: rgba(255,255,255,.014); }
.automation-customer-loan > strong { color: #e9f2f6; font-size: 9px; font-weight: 680; }
.automation-customer-loan > span { color: rgba(147,169,183,.50); font-size: 7px; }
.automation-customer-loan b { display: block; margin-top: 2px; color: rgba(221,233,239,.78); font-size: 8px; font-weight: 620; }

.automation-bank-customer-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 15px;
  border: 1px solid rgba(0,176,80,.14);
  border-radius: 15px;
  background: rgba(0,176,80,.035);
}
.automation-bank-customer-next > div { display: grid; gap: 2px; }
.automation-bank-customer-next small { color: rgba(117,214,158,.60); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.automation-bank-customer-next strong { color: rgba(229,241,235,.84); font-size: 10px; }
.automation-bank-customer-next button { height: 36px; padding: 0 13px; border: 1px solid rgba(0,176,80,.15); border-radius: 10px; color: rgba(173,199,184,.45); background: rgba(0,176,80,.035); font: inherit; font-size: 9px; cursor: not-allowed; }

html[data-app-theme="light"] .automation-bank-cpf-heading h3,
html[data-app-theme="light"] .automation-bank-flow-crm-status strong,
html[data-app-theme="light"] .automation-bank-benefit-card strong,
html[data-app-theme="light"] .automation-bank-customer-success strong,
html[data-app-theme="light"] .automation-customer-field strong,
html[data-app-theme="light"] .automation-customer-loan > strong { color: #173247; }
html[data-app-theme="light"] .automation-bank-cpf-heading p,
html[data-app-theme="light"] .automation-bank-flow-crm-status span,
html[data-app-theme="light"] .automation-bank-benefit-card p { color: rgba(52,78,96,.60); }
html[data-app-theme="light"] .automation-bank-flow-crm-status,
html[data-app-theme="light"] .automation-bank-cpf-form,
html[data-app-theme="light"] .automation-bank-benefit-card,
html[data-app-theme="light"] .automation-customer-section { background: rgba(255,255,255,.82); border-color: rgba(56,82,100,.12); }
html[data-app-theme="light"] .automation-bank-cpf-input-shell { background: #fff; }
html[data-app-theme="light"] .automation-bank-cpf-input-shell input { color: #183348; }
html[data-app-theme="light"] .automation-customer-field,
html[data-app-theme="light"] .automation-customer-loan { background: rgba(245,249,251,.85); border-color: rgba(60,86,103,.09); }

@media (max-width: 820px) {
  .automation-customer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .automation-customer-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .automation-customer-loan { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .automation-bank-cpf-input-shell { grid-template-columns: 42px minmax(0,1fr); }
  .automation-bank-cpf-input-shell button { grid-column: 1 / -1; height: 42px; }
  .automation-customer-grid { grid-template-columns: 1fr; }
  .automation-customer-field.is-wide { grid-column: auto; }
  .automation-customer-metrics { grid-template-columns: 1fr; }
  .automation-customer-loan { grid-template-columns: 1fr; }
}


/* =========================================================
   V47 — Consulta Vanguard: feedback visível + logo cheia
   ========================================================= */
.automation-bank-flow-logo {
  padding: 0 !important;
  overflow: hidden !important;
}

.automation-bank-flow-logo img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
}

.automation-bank-crm-error {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(239,68,68,.28);
  border-radius: 12px;
  background: rgba(239,68,68,.065);
}

.automation-bank-crm-error strong {
  color: #ff9a9a;
  font-size: 10px;
  font-weight: 730;
}

.automation-bank-crm-error span {
  color: rgba(255,210,210,.78);
  font-size: 10px;
  line-height: 1.5;
}

html[data-app-theme="light"] .automation-bank-crm-error {
  border-color: rgba(220,38,38,.22);
  background: rgba(220,38,38,.055);
}

html[data-app-theme="light"] .automation-bank-crm-error strong { color: #b91c1c; }
html[data-app-theme="light"] .automation-bank-crm-error span { color: rgba(127,29,29,.78); }


/* =====================================================================
   V62 — RESULTADO CRM PREMIUM / VISUAL QUALIBANK
   Inspirado no novo conceito visual aprovado para a tela pós-consulta.
   ===================================================================== */

/* Modal mais amplo e com profundidade premium */
.automation-bank-flow-backdrop {
  background:
    radial-gradient(circle at 83% 12%, rgba(0, 229, 160, .12), transparent 29%),
    radial-gradient(circle at 11% 84%, rgba(0, 176, 128, .07), transparent 34%),
    rgba(1, 8, 12, .79) !important;
  backdrop-filter: blur(18px) saturate(118%) !important;
}

.automation-bank-flow-modal {
  width: min(1180px, 97vw) !important;
  height: min(900px, 94vh) !important;
  border: 1px solid rgba(57, 214, 170, .20) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 86% -8%, rgba(0, 224, 156, .13), transparent 28%),
    radial-gradient(circle at 5% 34%, rgba(0, 119, 104, .05), transparent 32%),
    linear-gradient(180deg, #0a1d25 0%, #07161e 42%, #051218 100%) !important;
  box-shadow:
    0 42px 110px rgba(0,0,0,.56),
    0 0 0 1px rgba(0, 227, 158, .025),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.automation-bank-flow-head {
  min-height: 78px;
  padding: 17px 20px !important;
  border-bottom-color: rgba(99, 216, 184, .12) !important;
  background:
    linear-gradient(90deg, rgba(4, 61, 59, .14), transparent 46%),
    rgba(3, 17, 23, .22);
}

.automation-bank-flow-logo {
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border-color: rgba(74, 238, 188, .38) !important;
  background: rgba(3, 92, 72, .12) !important;
  box-shadow: 0 0 24px rgba(0, 213, 148, .08), inset 0 1px 0 rgba(255,255,255,.04);
}

.automation-bank-flow-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

.automation-bank-flow-identity span {
  color: #52efb0 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .17em !important;
}

.automation-bank-flow-identity h2 {
  color: #f5fbfc !important;
  font-size: 22px !important;
  font-weight: 760 !important;
  letter-spacing: -.028em !important;
}

.automation-bank-flow-head > button {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border-color: rgba(130, 164, 177, .16) !important;
  background: rgba(255,255,255,.025) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.automation-bank-flow-head > button:hover {
  border-color: rgba(72, 235, 183, .44) !important;
  background: rgba(0, 211, 145, .08) !important;
  box-shadow: 0 0 18px rgba(0, 211, 145, .09);
}

.automation-bank-flow-content {
  padding: 20px 22px 28px !important;
  scrollbar-color: rgba(37, 190, 148, .54) rgba(255,255,255,.015);
}

.automation-bank-customer-stage,
.automation-bank-customer-stage-premium {
  width: min(1080px, 100%) !important;
  padding: 8px 0 30px !important;
}

/* Voltar benefício vira ação discreta */
.automation-bank-customer-stage .automation-bank-inline-back {
  margin: 0 0 10px !important;
  color: rgba(156, 190, 186, .58) !important;
  font-size: 10px !important;
  letter-spacing: .015em;
}
.automation-bank-customer-stage .automation-bank-inline-back:hover { color: #66e9b3 !important; }

/* Confirmação do CRM */
.automation-bank-customer-success {
  grid-template-columns: 42px minmax(0,1fr) auto !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(27, 217, 154, .22) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(90deg, rgba(0, 212, 145, .085), transparent 56%),
    rgba(8, 30, 34, .66) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.automation-bank-customer-success-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  color: #5ff2ad !important;
  background: rgba(0, 214, 145, .11) !important;
  border: 1px solid rgba(46, 235, 177, .16);
  font-size: 15px !important;
  box-shadow: 0 0 18px rgba(0, 211, 145, .06);
}

.automation-bank-customer-success-copy { min-width: 0; display: grid; gap: 1px; }
.automation-bank-customer-success-copy small {
  color: #50df9f !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
}
.automation-bank-customer-success-copy strong {
  color: #f2f8fa !important;
  font-size: 13px !important;
  font-weight: 690 !important;
}
.automation-bank-customer-success-copy p {
  color: rgba(166, 193, 200, .54) !important;
  font-size: 8.5px !important;
}

.automation-bank-customer-success-badge {
  display: inline-flex !important;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(35, 224, 158, .26);
  border-radius: 999px;
  color: #56e9a7 !important;
  background: rgba(0, 190, 126, .07) !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  white-space: nowrap;
}

/* Seções */
.automation-customer-section {
  position: relative;
  margin-top: 10px !important;
  padding: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(108, 162, 174, .13) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.017), transparent 62%),
    rgba(5, 21, 28, .76) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 8px 26px rgba(0,0,0,.08);
}

.automation-customer-section::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -76px;
  top: -86px;
  border-radius: 50%;
  background: rgba(0, 205, 145, .045);
  filter: blur(26px);
  pointer-events: none;
}

.automation-customer-section-head {
  position: relative;
  z-index: 1;
  margin-bottom: 10px !important;
}

.automation-customer-section-head > div {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.automation-customer-section-head > div > i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #20df9b;
  box-shadow: 0 0 12px rgba(32, 223, 155, .30);
}

.automation-customer-section-head span {
  color: rgba(231, 241, 244, .90) !important;
  font-size: 10px !important;
  font-weight: 790 !important;
  letter-spacing: .12em !important;
}

.automation-customer-section-head small {
  color: rgba(137, 174, 184, .48) !important;
  font-size: 8px !important;
  font-weight: 570;
}

/* Cards de informação */
.automation-customer-grid {
  position: relative;
  z-index: 1;
  gap: 7px !important;
}

.automation-customer-field {
  min-height: 48px;
  gap: 3px !important;
  padding: 9px 11px !important;
  border: 1px solid rgba(104, 158, 171, .12) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent),
    rgba(11, 30, 38, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.012);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.automation-customer-field:hover {
  border-color: rgba(50, 212, 167, .20) !important;
  background: rgba(12, 35, 42, .82) !important;
}

.automation-customer-field small {
  color: rgba(126, 165, 176, .56) !important;
  font-size: 7.5px !important;
  font-weight: 780 !important;
  letter-spacing: .075em !important;
  line-height: 1.2;
}

.automation-customer-field strong {
  color: rgba(237, 246, 248, .93) !important;
  font-size: 11.5px !important;
  font-weight: 640 !important;
  letter-spacing: -.006em;
  line-height: 1.28;
}

.automation-customer-field.is-primary strong {
  color: #f6fbfc !important;
  font-weight: 710 !important;
}

.automation-customer-field.is-status strong {
  color: #54e8a5 !important;
}

.automation-customer-field.is-phone strong {
  color: rgba(228, 240, 243, .88) !important;
}

/* Margens com sensação mais premium / valor */
.automation-customer-section-margins {
  border-color: rgba(36, 220, 160, .15) !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 218, 153, .06), transparent 26%),
    rgba(5, 22, 28, .78) !important;
}

.automation-customer-metrics {
  position: relative;
  z-index: 1;
  gap: 9px !important;
}

.automation-customer-metrics .automation-customer-field {
  min-height: 64px;
  justify-content: center;
  border-color: rgba(30, 220, 158, .24) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(41, 235, 176, .08), transparent 42%),
    linear-gradient(145deg, rgba(0, 178, 122, .075), transparent 72%),
    rgba(7, 31, 34, .88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 0 0 1px rgba(0,0,0,.08);
}

.automation-customer-metrics .automation-customer-field small {
  color: rgba(92, 216, 169, .68) !important;
  font-size: 7.5px !important;
}

.automation-customer-metrics .automation-customer-field strong {
  color: #49e8a3 !important;
  font-size: 17px !important;
  font-weight: 720 !important;
  letter-spacing: -.024em !important;
  text-shadow: 0 0 15px rgba(50, 230, 164, .09);
}

.automation-customer-metrics .automation-customer-field.is-highlight {
  border-color: rgba(65, 241, 181, .36) !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(68, 245, 187, .13), transparent 44%),
    linear-gradient(145deg, rgba(0, 206, 143, .11), transparent 70%),
    rgba(8, 37, 38, .94) !important;
  box-shadow: 0 8px 22px rgba(0, 197, 138, .05), inset 0 1px 0 rgba(255,255,255,.022);
}

/* Contratos em formato de tabela refinada */
.automation-customer-section-loans { padding-bottom: 10px !important; }

.automation-customer-loans {
  position: relative;
  z-index: 1;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(105, 158, 170, .09);
  border-radius: 12px;
  background: rgba(4, 17, 23, .48);
}

.automation-customer-loans-head,
.automation-customer-loan {
  display: grid;
  grid-template-columns: minmax(180px, 1.7fr) repeat(4, minmax(84px, .72fr)) minmax(150px, 1.15fr);
  gap: 10px;
  align-items: center;
}

.automation-customer-loans-head {
  min-height: 30px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(108, 161, 174, .09);
  background: linear-gradient(90deg, rgba(11, 53, 60, .78), rgba(8, 33, 40, .72));
}

.automation-customer-loans-head span {
  color: rgba(122, 171, 181, .67);
  font-size: 7px;
  font-weight: 790;
  letter-spacing: .09em;
}

.automation-customer-loan {
  min-height: 41px;
  padding: 7px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(105, 155, 167, .075) !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: background .15s ease;
}

.automation-customer-loan:last-child { border-bottom: 0 !important; }
.automation-customer-loan:hover { background: rgba(20, 87, 78, .075) !important; }

.automation-customer-loan > strong {
  color: #edf6f7 !important;
  font-size: 9.5px !important;
  font-weight: 690 !important;
}

.automation-customer-loan > span {
  min-width: 0;
  color: rgba(149, 180, 188, .50) !important;
  font-size: 7px !important;
}

.automation-customer-loan > span > small { display: none; }

.automation-customer-loan b {
  display: block !important;
  margin: 0 !important;
  overflow: hidden;
  color: rgba(222, 237, 240, .82) !important;
  font-size: 9px !important;
  font-weight: 590 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Próxima etapa mais forte */
.automation-bank-customer-next {
  display: grid !important;
  grid-template-columns: 40px minmax(0,1fr) auto !important;
  min-height: 68px;
  gap: 12px !important;
  margin-top: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(31, 222, 159, .23) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(90deg, rgba(0, 203, 140, .085), transparent 58%),
    rgba(7, 30, 31, .84) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.automation-bank-customer-next-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(56, 233, 177, .20);
  border-radius: 11px;
  color: #55e9a5;
  background: rgba(0, 193, 132, .08);
  font-size: 16px;
}

.automation-bank-customer-next > div:not(.automation-bank-customer-next-icon) { gap: 3px !important; }
.automation-bank-customer-next small {
  color: #4ed99b !important;
  font-size: 7.5px !important;
  letter-spacing: .12em !important;
}
.automation-bank-customer-next strong {
  color: #eff8f4 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.automation-bank-customer-next button {
  min-width: 176px;
  height: 42px !important;
  padding: 0 15px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(70, 238, 180, .23) !important;
  color: rgba(172, 209, 193, .55) !important;
  background: rgba(0, 176, 121, .055) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
}

.automation-bank-customer-next button span { margin-left: 6px; }

/* Light mode continua utilizável sem perder hierarquia */
html[data-app-theme="light"] .automation-bank-flow-modal {
  background: linear-gradient(180deg,#f7fbfa,#f2f7f8) !important;
  border-color: rgba(20, 143, 111, .18) !important;
}
html[data-app-theme="light"] .automation-bank-customer-success,
html[data-app-theme="light"] .automation-customer-section,
html[data-app-theme="light"] .automation-customer-section-margins,
html[data-app-theme="light"] .automation-bank-customer-next {
  background: rgba(255,255,255,.88) !important;
}
html[data-app-theme="light"] .automation-customer-field {
  background: rgba(246,250,250,.96) !important;
}
html[data-app-theme="light"] .automation-customer-field strong,
html[data-app-theme="light"] .automation-customer-loan > strong,
html[data-app-theme="light"] .automation-bank-customer-next strong {
  color: #15333a !important;
}
html[data-app-theme="light"] .automation-customer-loans { background: rgba(255,255,255,.84); }
html[data-app-theme="light"] .automation-customer-loans-head { background: rgba(225,241,238,.85); }
html[data-app-theme="light"] .automation-customer-loan b { color: #36555d !important; }

@media (max-width: 980px) {
  .automation-bank-flow-modal { width: min(940px, 97vw) !important; }
  .automation-bank-customer-success { grid-template-columns: 42px minmax(0,1fr) !important; }
  .automation-bank-customer-success-badge { grid-column: 1 / -1; justify-self: start; }
  .automation-customer-loans-head { display: none !important; }
  .automation-customer-loan { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; padding: 10px 12px !important; }
  .automation-customer-loan > strong { grid-column: 1 / -1; }
  .automation-customer-loan > span > small { display: block; margin-bottom: 2px; color: rgba(130,164,174,.48); font-size: 7px; }
}

@media (max-width: 650px) {
  .automation-bank-flow-content { padding: 14px !important; }
  .automation-customer-metrics { grid-template-columns: 1fr 1fr !important; }
  .automation-bank-customer-next { grid-template-columns: 38px minmax(0,1fr) !important; }
  .automation-bank-customer-next button { grid-column: 1 / -1; width: 100%; }
}


/* =====================================================================
   V63 — MAIS ÁREA ÚTIL NO RESULTADO
   Remove rodapé externo do fluxo e badge redundante de CRM.
   ===================================================================== */
.automation-bank-customer-success {
  grid-template-columns: 42px minmax(0,1fr) !important;
}

.automation-bank-flow-content {
  padding-bottom: 18px !important;
}

.automation-bank-flow-modal {
  padding-bottom: 0 !important;
}


/* =====================================================================
   V64 — CONFIGURAÇÕES > BANCOS: ACESSO CORPORATIVO POR EMPRESA
   ===================================================================== */
#settings-banks .banks-settings-shell.company-bank-access-shell {
  gap: 14px;
}

.company-bank-access-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 6px 4px;
}
.company-bank-access-heading > div { min-width: 0; display: grid; gap: 5px; }
.company-bank-access-heading > div > span {
  color: var(--app-accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}
.company-bank-access-heading h3 {
  margin: 0;
  color: var(--app-text);
  font-size: 20px;
  font-weight: 780;
  letter-spacing: -.025em;
}
.company-bank-access-heading p {
  max-width: 660px;
  margin: 0;
  color: var(--app-muted);
  font-size: 9px;
  line-height: 1.5;
}
.company-bank-access-counter {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--app-mint) 18%, var(--app-border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--app-mint) 72%, var(--app-text));
  background: color-mix(in srgb, var(--app-mint) 4%, var(--app-surface));
  font-size: 7.7px;
  font-weight: 800;
}
.company-bank-access-panel {
  min-height: calc(100vh - 190px) !important;
  padding: 16px !important;
  background:
    radial-gradient(circle at 8% 6%, rgba(0,176,80,.045), transparent 26%),
    var(--app-surface) !important;
}
.company-bank-access-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
#settings-banks #banks-settings-list.company-bank-access-grid:not(.hidden) { display:grid !important; }
.company-bank-access-card {
  position: relative;
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto 24px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
  text-align: left;
  color: inherit;
  border: 1px solid rgba(139,160,175,.15);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.018), transparent 62%), var(--app-surface-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  cursor: pointer;
  transition: .17s ease;
}
.company-bank-access-card::after {
  content:"";
  position:absolute;
  width:120px; height:120px;
  right:-48px; bottom:-60px;
  border-radius:50%;
  background:rgba(0,176,80,.10);
  filter:blur(34px);
  opacity:0;
  transition:.17s ease;
  pointer-events:none;
}
.company-bank-access-card:hover,
.company-bank-access-card:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(0,176,80,.36);
  box-shadow: 0 14px 30px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.025);
}
.company-bank-access-card:hover::after,
.company-bank-access-card:focus-visible::after { opacity:1; }
.company-bank-access-card.is-configured {
  border-color: rgba(0,176,80,.25);
  background: linear-gradient(145deg, rgba(0,176,80,.055), transparent 62%), var(--app-surface-2);
}
.company-bank-access-logo {
  width:52px; height:52px;
  display:grid; place-items:center;
  overflow:hidden;
  border:1px solid rgba(0,176,80,.27);
  border-radius:14px;
  background:rgba(0,176,80,.055);
  color:#65e79d;
  font-size:12px;
  font-weight:850;
}
.company-bank-access-logo img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; border-radius:inherit; }
.company-bank-access-copy { min-width:0; display:grid; gap:5px; }
.company-bank-access-copy strong { overflow:hidden; color:var(--app-text); font-size:11.5px; font-weight:780; text-overflow:ellipsis; white-space:nowrap; }
.company-bank-access-copy small { overflow:hidden; color:var(--app-muted); font-size:7.7px; text-overflow:ellipsis; white-space:nowrap; }
.company-bank-access-status {
  min-height:24px;
  display:inline-flex; align-items:center; gap:6px;
  padding:0 8px;
  border-radius:999px;
  font-size:6.8px;
  font-weight:900;
  letter-spacing:.06em;
  white-space:nowrap;
}
.company-bank-access-status i { width:5px; height:5px; border-radius:50%; }
.company-bank-access-status.is-on { color:#68eaa2; border:1px solid rgba(0,176,80,.24); background:rgba(0,176,80,.07); }
.company-bank-access-status.is-on i { background:#00d66b; box-shadow:0 0 9px rgba(0,214,107,.55); }
.company-bank-access-status.is-off { color:rgba(188,201,210,.58); border:1px solid rgba(148,163,184,.13); background:rgba(148,163,184,.035); }
.company-bank-access-status.is-off i { background:#82909b; }
.company-bank-access-chevron { display:grid; place-items:center; color:rgba(163,182,194,.42); }
.company-bank-access-chevron svg { width:15px; height:15px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.company-bank-access-empty { min-height:300px !important; }

.company-bank-access-modal-backdrop { z-index: 1680; }
.company-bank-access-modal-card {
  width:min(620px, calc(100vw - 32px));
  overflow:hidden;
  border:1px solid rgba(0,176,80,.20);
  border-radius:20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0,176,80,.08), transparent 27%),
    var(--app-surface);
  box-shadow:0 32px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.025);
}
.company-bank-access-modal-head {
  min-height:98px;
  padding:17px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid var(--app-border);
}
.company-bank-access-modal-identity { min-width:0; display:flex; align-items:center; gap:13px; }
.company-bank-access-modal-logo {
  flex:0 0 auto;
  width:58px; height:58px;
  display:grid; place-items:center;
  overflow:hidden;
  border:1px solid rgba(0,176,80,.28);
  border-radius:15px;
  color:#65e79d;
  background:rgba(0,176,80,.06);
  font-size:13px; font-weight:850;
}
.company-bank-access-modal-logo img { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; }
.company-bank-access-modal-identity > div { min-width:0; display:grid; gap:3px; }
.company-bank-access-modal-identity small { color:var(--app-accent); font-size:7px; font-weight:900; letter-spacing:.13em; }
.company-bank-access-modal-identity h3 { margin:0; color:var(--app-text); font-size:19px; font-weight:780; letter-spacing:-.02em; }
.company-bank-access-modal-identity p { margin:0; color:var(--app-muted); font-size:8px; }
.company-bank-access-form { padding:18px 20px 20px; display:grid; gap:15px; }
.company-bank-access-security-note {
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid rgba(0,176,80,.16);
  border-radius:12px;
  background:rgba(0,176,80,.035);
}
.company-bank-access-security-note > span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#66efa4; background:rgba(0,176,80,.09); font-weight:900; }
.company-bank-access-security-note > div { display:grid; gap:2px; }
.company-bank-access-security-note strong { color:var(--app-text); font-size:9px; }
.company-bank-access-security-note small { color:var(--app-muted); font-size:7.5px; line-height:1.4; }
.company-bank-access-field { display:grid; gap:7px; }
.company-bank-access-field > span { color:var(--app-muted); font-size:8px; font-weight:800; }
.company-bank-access-field > input,
.company-bank-access-password-wrap input {
  width:100%; height:46px;
  padding:0 13px;
  color:var(--app-text);
  background:var(--app-control);
  border:1px solid var(--app-border);
  border-radius:11px;
  outline:none;
  font-size:11px;
  transition:.16s ease;
}
.company-bank-access-field > input:focus,
.company-bank-access-password-wrap input:focus { border-color:rgba(0,176,80,.45); box-shadow:0 0 0 3px rgba(0,176,80,.055); }
.company-bank-access-password-wrap { position:relative; }
.company-bank-access-password-wrap input { padding-right:48px; }
.company-bank-access-password-wrap button {
  position:absolute; top:6px; right:6px;
  width:34px; height:34px;
  display:grid; place-items:center;
  color:var(--app-muted);
  border:0; border-radius:9px;
  background:transparent;
  cursor:pointer;
}
.company-bank-access-password-wrap button:hover { color:var(--app-mint); background:rgba(0,176,80,.06); }
.company-bank-access-password-wrap svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.7; }
.company-bank-access-field > small { color:var(--app-muted-2); font-size:7px; line-height:1.35; }
.company-bank-access-modal-actions {
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:9px;
  padding-top:3px;
}
.company-bank-access-remove {
  min-height:38px; padding:0 12px;
  color:#fb8b9b;
  border:1px solid rgba(251,113,133,.23);
  border-radius:10px;
  background:rgba(251,113,133,.045);
  font-size:8px; font-weight:800;
  cursor:pointer;
}
.company-bank-access-save {
  min-height:38px; padding:0 15px;
  color:#041009;
  border:1px solid rgba(83,255,151,.42);
  border-radius:10px;
  background:linear-gradient(110deg,#52ee91 0%,#68f5ad 55%,#64e6c9 100%);
  box-shadow:0 7px 20px rgba(0,176,80,.14), inset 0 1px 0 rgba(255,255,255,.28);
  font-size:8.5px; font-weight:900;
  cursor:pointer;
}
.company-bank-access-save:hover { transform:translateY(-1px); filter:brightness(1.04); }
.company-bank-access-save:disabled, .company-bank-access-remove:disabled { opacity:.5; cursor:wait; }

html[data-app-theme="light"] .company-bank-access-card { background:#fff; border-color:rgba(54,79,96,.13); box-shadow:0 5px 16px rgba(43,67,83,.045); }
html[data-app-theme="light"] .company-bank-access-card.is-configured { background:linear-gradient(145deg,rgba(0,176,80,.05),#fff 62%); }
html[data-app-theme="light"] .company-bank-access-modal-card { background:linear-gradient(180deg,#fbfefd,#f5f9f7); box-shadow:0 28px 70px rgba(34,56,70,.18); }

@media (max-width:1050px) { .company-bank-access-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) {
  .company-bank-access-heading { align-items:flex-start; flex-direction:column; }
  .company-bank-access-grid { grid-template-columns:1fr; }
  .company-bank-access-card { grid-template-columns:48px minmax(0,1fr) 24px; }
  .company-bank-access-status { grid-column:2; justify-self:start; }
  .company-bank-access-chevron { grid-column:3; grid-row:1 / span 2; }
  .company-bank-access-modal-actions { grid-template-columns:1fr 1fr; }
  .company-bank-access-modal-actions > span { display:none; }
  .company-bank-access-remove { grid-column:1 / -1; }
}

/* =====================================================================
   V65 — FLUXO PADRÃO PORT/REFIN + TABELAS GLOBAIS POR BANCO
   ===================================================================== */

/* ---------- Fluxo padrão de proposta ---------- */
.automation-bank-flow-modal {
  width: min(1220px, 95vw) !important;
  max-width: 1220px !important;
  height: min(900px, 92vh) !important;
  max-height: 92vh !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 9% -8%, rgba(0, 221, 152, .085), transparent 26%),
    radial-gradient(circle at 92% 4%, rgba(12, 123, 123, .075), transparent 24%),
    linear-gradient(180deg, #07191f 0%, #07161d 38%, #06131a 100%) !important;
}
.automation-bank-flow-content {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 20px 26px 28px !important;
}
.automation-standard-proposal-stage { display:grid; gap:14px; min-width:0; }
.automation-standard-proposal-stage .automation-bank-inline-back {
  justify-self:start;
  margin:0 0 1px;
  color:rgba(164,194,198,.65);
}
.automation-standard-section {
  position:relative;
  min-width:0;
  padding:16px;
  overflow:hidden;
  border:1px solid rgba(86,157,159,.13);
  border-radius:18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.016), transparent 50%),
    rgba(7,24,30,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.016), 0 10px 26px rgba(0,0,0,.05);
}
.automation-standard-section::before {
  content:"";
  position:absolute;
  width:180px; height:180px;
  right:-90px; top:-100px;
  border-radius:50%;
  background:rgba(0,206,143,.05);
  filter:blur(40px);
  pointer-events:none;
}
.automation-standard-section-head {
  position:relative; z-index:1;
  min-height:43px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-bottom:13px;
}
.automation-standard-section-head > div { display:flex; align-items:center; gap:10px; min-width:0; }
.automation-standard-section-head > div > span {
  width:29px; height:29px;
  display:grid; place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(53,231,174,.20);
  border-radius:9px;
  color:#4ee4a4;
  background:rgba(0,176,80,.065);
  font-size:7.5px; font-weight:900;
}
.automation-standard-section-head > div > div { min-width:0; display:grid; gap:1px; }
.automation-standard-section-head small {
  color:rgba(80,217,171,.72);
  font-size:7px; font-weight:900; letter-spacing:.12em;
}
.automation-standard-section-head strong {
  color:#edf7f8;
  font-size:13px; font-weight:740; letter-spacing:-.01em;
}
.automation-standard-section-head em {
  color:rgba(150,178,186,.50);
  font-size:7.5px; font-style:normal; font-weight:600;
  text-align:right;
}

.automation-proposal-simulation-grid,
.automation-proposal-client-grid,
.automation-proposal-bankdata-grid {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.automation-proposal-simulation-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.automation-proposal-edit-field { min-width:0; display:grid; gap:5px; }
.automation-proposal-edit-field.is-wide { grid-column:span 2; }
.automation-proposal-edit-field > span {
  color:rgba(116,151,162,.64);
  font-size:6.7px; font-weight:900; letter-spacing:.07em; text-transform:uppercase;
}
.automation-proposal-edit-field input,
.automation-proposal-edit-field select {
  width:100%; height:39px; min-width:0;
  padding:0 11px;
  outline:none;
  color:#eaf4f6;
  border:1px solid rgba(100,151,163,.16);
  border-radius:10px;
  background:rgba(10,31,39,.88);
  font-size:9.5px; font-weight:620;
  transition:.15s ease;
}
.automation-proposal-edit-field input:focus,
.automation-proposal-edit-field select:focus {
  border-color:rgba(45,226,163,.42);
  box-shadow:0 0 0 3px rgba(0,176,80,.045);
  background:rgba(11,36,42,.96);
}
.automation-proposal-edit-field input[readonly] {
  color:#7de5b0;
  border-color:rgba(0,176,80,.18);
  background:rgba(0,176,80,.035);
}
.automation-proposal-edit-field select { cursor:pointer; }

/* ---------- Contratos Port/Refin ---------- */
.automation-proposal-loans-list { position:relative; z-index:1; display:grid; gap:8px; }
.automation-proposal-loan {
  overflow:hidden;
  border:1px solid rgba(101,151,164,.12);
  border-radius:13px;
  background:rgba(6,20,27,.66);
  transition:.16s ease;
}
.automation-proposal-loan.is-selected {
  border-color:rgba(37,228,159,.30);
  background:linear-gradient(90deg,rgba(0,176,80,.055),transparent 45%),rgba(6,24,28,.76);
  box-shadow:0 8px 24px rgba(0,176,80,.035), inset 0 1px 0 rgba(255,255,255,.015);
}
.automation-proposal-loan-summary {
  width:100%; min-height:54px;
  display:grid;
  grid-template-columns:28px minmax(160px,1.45fr) repeat(4,minmax(78px,.65fr)) minmax(135px,1fr) 22px;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  color:inherit;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.automation-proposal-loan-summary:hover { background:rgba(0,176,80,.025); }
.automation-proposal-loan-check {
  width:23px; height:23px; display:grid; place-items:center;
  border:1px solid rgba(116,156,168,.24); border-radius:7px;
  color:#52e7a4; background:rgba(255,255,255,.018);
  font-size:11px; font-weight:900;
}
.automation-proposal-loan.is-selected .automation-proposal-loan-check {
  border-color:rgba(44,231,163,.34); background:rgba(0,176,80,.10); box-shadow:0 0 14px rgba(0,176,80,.06);
}
.automation-proposal-loan-summary > strong { overflow:hidden; color:#edf5f6; font-size:9.4px; font-weight:730; text-overflow:ellipsis; white-space:nowrap; }
.automation-proposal-loan-summary > span:not(.automation-proposal-loan-check) { min-width:0; display:grid; gap:2px; }
.automation-proposal-loan-summary small { color:rgba(119,151,162,.52); font-size:6.2px; font-weight:800; text-transform:uppercase; }
.automation-proposal-loan-summary b { overflow:hidden; color:rgba(221,235,239,.86); font-size:8.5px; font-weight:620; text-overflow:ellipsis; white-space:nowrap; }
.automation-proposal-loan-summary > i { color:rgba(121,177,161,.70); font-size:15px; font-style:normal; text-align:center; }
.automation-proposal-loan-editor {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  padding:13px;
  border-top:1px solid rgba(57,153,133,.12);
  background:rgba(1,14,19,.32);
}
.automation-proposal-table-field {
  padding:10px;
  border:1px solid rgba(47,225,161,.17);
  border-radius:11px;
  background:rgba(0,176,80,.025);
}
.automation-proposal-table-field > span { color:#57dda3; }
.automation-proposal-empty-loans { min-height:90px; display:grid; place-items:center; align-content:center; gap:4px; border:1px dashed rgba(120,158,169,.16); border-radius:12px; color:rgba(151,179,187,.55); text-align:center; }
.automation-proposal-empty-loans strong { color:rgba(225,237,240,.72); font-size:10px; }
.automation-proposal-empty-loans small { font-size:7.5px; }

/* ---------- Cliente / banco / documentos ---------- */
.automation-proposal-bankdata-block + .automation-proposal-bankdata-block { margin-top:14px; padding-top:14px; border-top:1px solid rgba(92,146,158,.10); }
.automation-proposal-bankdata-block h4 { position:relative; z-index:1; margin:0 0 10px; color:rgba(205,225,229,.78); font-size:9px; font-weight:730; }
.automation-proposal-documents-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.automation-proposal-document {
  min-height:150px;
  display:grid; place-items:center; align-content:center; gap:7px;
  border:1px dashed rgba(94,157,165,.24);
  border-radius:15px;
  color:rgba(178,202,207,.68);
  background:linear-gradient(145deg,rgba(255,255,255,.012),transparent),rgba(6,21,27,.56);
  cursor:pointer;
  transition:.16s ease;
}
.automation-proposal-document:hover { border-color:rgba(46,229,163,.40); background:rgba(0,176,80,.035); transform:translateY(-1px); }
.automation-proposal-document.has-file { border-style:solid; border-color:rgba(41,231,159,.34); background:rgba(0,176,80,.045); }
.automation-proposal-document input { display:none; }
.automation-proposal-document-icon { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(40,228,160,.18); border-radius:11px; color:#53e4a3; background:rgba(0,176,80,.065); font-size:17px; }
.automation-proposal-document strong { color:#edf6f7; font-size:10px; font-weight:730; }
.automation-proposal-document small { max-width:82%; overflow:hidden; color:rgba(140,173,182,.55); font-size:7.5px; text-overflow:ellipsis; white-space:nowrap; }

.automation-proposal-final-action {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:14px 15px;
  border:1px solid rgba(80,151,155,.14);
  border-radius:16px;
  background:rgba(7,24,29,.82);
}
.automation-proposal-final-action.is-ready { border-color:rgba(39,226,159,.28); background:linear-gradient(90deg,rgba(0,176,80,.07),transparent 58%),rgba(7,27,30,.86); }
.automation-proposal-final-action > div { display:grid; gap:2px; }
.automation-proposal-final-action small { color:#4ddc9e; font-size:6.8px; font-weight:900; letter-spacing:.12em; }
.automation-proposal-final-action strong { color:#eff8f7; font-size:11px; font-weight:720; }
.automation-proposal-final-action span { color:rgba(139,170,178,.56); font-size:7.5px; }
.automation-proposal-final-action button {
  min-width:184px; height:42px; padding:0 15px;
  border:1px solid rgba(65,238,174,.32); border-radius:11px;
  color:#03120b;
  background:linear-gradient(110deg,#4eec92,#69f2b7 62%,#59ded0);
  box-shadow:0 8px 22px rgba(0,176,80,.13), inset 0 1px 0 rgba(255,255,255,.25);
  font-size:8.8px; font-weight:900;
  cursor:pointer;
}
.automation-proposal-final-action button:disabled { color:rgba(172,203,191,.42); border-color:rgba(79,139,135,.14); background:rgba(0,176,80,.035); box-shadow:none; cursor:not-allowed; }

/* ---------- Master Global / tabelas dentro do banco ---------- */
.automation-bank-admin-modal { width:min(860px,calc(100vw - 34px)); }
.automation-bank-admin-tables-section,
.automation-bank-admin-tables-new-note {
  margin:0 20px 16px;
  padding:14px;
  border:1px solid rgba(0,176,80,.14);
  border-radius:14px;
  background:rgba(0,176,80,.022);
}
.automation-bank-admin-tables-new-note { color:rgba(154,180,189,.58); font-size:8px; text-align:center; }
.automation-bank-admin-tables-head > div { display:grid; gap:3px; }
.automation-bank-admin-tables-head span { color:#52dfa0; font-size:7px; font-weight:900; letter-spacing:.11em; }
.automation-bank-admin-tables-head strong { color:var(--app-text); font-size:11px; }
.automation-bank-admin-tables-head small { color:var(--app-muted); font-size:7.5px; }
.automation-bank-admin-tables-list { display:grid; gap:6px; margin:12px 0; max-height:210px; overflow:auto; }
.automation-bank-admin-table-row { min-height:43px; display:grid; grid-template-columns:8px minmax(0,1fr) auto auto; align-items:center; gap:9px; padding:7px 9px; border:1px solid rgba(115,151,162,.11); border-radius:10px; background:rgba(9,27,34,.72); }
.automation-bank-admin-table-row.is-inactive { opacity:.48; }
.automation-bank-admin-table-dot { width:5px; height:5px; border-radius:50%; background:#28de84; }
.automation-bank-admin-table-row strong { overflow:hidden; color:var(--app-text); font-size:8.8px; text-overflow:ellipsis; white-space:nowrap; }
.automation-bank-admin-table-status { color:#54dda0; font-size:6.5px; font-weight:900; }
.automation-bank-admin-table-row button { min-height:27px; padding:0 9px; border:1px solid rgba(0,176,80,.18); border-radius:8px; color:#75e4a9; background:rgba(0,176,80,.035); font-size:7px; font-weight:800; cursor:pointer; }
.automation-bank-admin-tables-empty { padding:14px; color:var(--app-muted); border:1px dashed var(--app-border); border-radius:10px; text-align:center; font-size:7.5px; }
.automation-bank-admin-table-editor { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:7px; align-items:center; }
.automation-bank-admin-table-editor > input { height:38px; min-width:0; padding:0 10px; color:var(--app-text); border:1px solid var(--app-border); border-radius:9px; background:var(--app-control); outline:none; font-size:8.5px; }
.automation-bank-admin-table-active { height:38px; display:flex; align-items:center; gap:6px; padding:0 9px; border:1px solid var(--app-border); border-radius:9px; color:var(--app-muted); font-size:7px; }
.automation-bank-admin-table-editor button { min-height:38px; padding:0 11px; border-radius:9px; font-size:7.5px; font-weight:850; cursor:pointer; }
#automation-bank-admin-table-save { color:#03120b; border:1px solid rgba(80,238,149,.35); background:linear-gradient(110deg,#55eb8f,#63edb0); }
#automation-bank-admin-table-cancel { color:var(--app-muted); border:1px solid var(--app-border); background:transparent; }

/* ---------- Master da empresa / percentuais por tabela ---------- */
.automation-table-settings-shell { display:grid; gap:14px; }
.automation-table-settings-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.automation-table-settings-head > div { display:grid; gap:4px; }
.automation-table-settings-head span { color:var(--app-accent); font-size:7px; font-weight:900; letter-spacing:.12em; }
.automation-table-settings-head h3 { margin:0; color:var(--app-text); font-size:19px; font-weight:780; letter-spacing:-.02em; }
.automation-table-settings-head p { max-width:720px; margin:0; color:var(--app-muted); font-size:8px; line-height:1.5; }
.automation-table-settings-save { min-height:38px; padding:0 14px; border:1px solid rgba(80,238,149,.35); border-radius:10px; color:#03120b; background:linear-gradient(110deg,#55eb8f,#63edb0); font-size:8px; font-weight:900; cursor:pointer; box-shadow:0 7px 20px rgba(0,176,80,.10); }
.automation-table-settings-search { height:44px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid var(--app-border); border-radius:11px; background:var(--app-surface); }
.automation-table-settings-search svg { width:15px; height:15px; stroke:var(--app-muted); stroke-width:1.7; }
.automation-table-settings-search input { flex:1; height:100%; border:0; outline:0; color:var(--app-text); background:transparent; font-size:9px; }
.automation-table-settings-list { display:grid; gap:11px; }
.automation-table-settings-bank { overflow:hidden; border:1px solid var(--app-border); border-radius:15px; background:var(--app-surface); }
.automation-table-settings-bank > header { min-height:68px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid var(--app-border); background:linear-gradient(90deg,rgba(0,176,80,.035),transparent 40%); }
.automation-table-settings-bank-logo { width:42px; height:42px; overflow:hidden; border:1px solid rgba(0,176,80,.22); border-radius:11px; }
.automation-table-settings-bank-logo img { width:100%; height:100%; object-fit:cover; }
.automation-table-settings-bank header > div { display:grid; gap:2px; }
.automation-table-settings-bank header strong { color:var(--app-text); font-size:10.5px; }
.automation-table-settings-bank header small { color:var(--app-muted); font-size:7px; }
.automation-table-settings-bank header > span { min-height:23px; display:inline-flex; align-items:center; padding:0 8px; border:1px solid var(--app-border); border-radius:999px; color:var(--app-muted); font-size:6.2px; font-weight:900; }
.automation-table-settings-bank header > span.is-ready { color:#62e99e; border-color:rgba(0,176,80,.22); background:rgba(0,176,80,.045); }
.automation-table-settings-rows { padding:8px 12px 12px; display:grid; gap:6px; }
.automation-table-settings-row { min-height:48px; display:grid; grid-template-columns:minmax(0,1fr) 126px; align-items:center; gap:14px; padding:7px 9px; border:1px solid rgba(122,157,167,.10); border-radius:10px; background:var(--app-surface-2); }
.automation-table-settings-row > div { min-width:0; display:grid; gap:2px; }
.automation-table-settings-row small { color:var(--app-muted-2); font-size:6px; font-weight:850; letter-spacing:.07em; }
.automation-table-settings-row strong { overflow:hidden; color:var(--app-text); font-size:8.8px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.automation-table-settings-percent-shell { height:34px; display:grid; grid-template-columns:1fr 26px; align-items:center; overflow:hidden; border:1px solid rgba(0,176,80,.20); border-radius:9px; background:rgba(0,176,80,.025); }
.automation-table-settings-percent-shell input { width:100%; height:100%; padding:0 9px; border:0; outline:0; color:#5ce49f; background:transparent; font-size:9px; font-weight:780; text-align:right; }
.automation-table-settings-percent-shell b { display:grid; place-items:center; height:100%; color:rgba(90,221,159,.72); border-left:1px solid rgba(0,176,80,.12); font-size:8px; }
.automation-table-settings-no-tables,.automation-table-settings-empty { min-height:84px; display:grid; place-items:center; align-content:center; gap:4px; color:var(--app-muted); border:1px dashed var(--app-border); border-radius:11px; text-align:center; font-size:8px; }
.automation-table-settings-empty strong { color:var(--app-text); }
.automation-table-settings-empty small { font-size:7px; }

html[data-app-theme="light"] .automation-standard-section,
html[data-app-theme="light"] .automation-proposal-loan,
html[data-app-theme="light"] .automation-proposal-final-action { background:rgba(255,255,255,.90); }
html[data-app-theme="light"] .automation-proposal-edit-field input,
html[data-app-theme="light"] .automation-proposal-edit-field select { color:#193843; background:#f7fbfb; border-color:rgba(57,93,103,.15); }
html[data-app-theme="light"] .automation-standard-section-head strong,
html[data-app-theme="light"] .automation-proposal-loan-summary > strong,
html[data-app-theme="light"] .automation-proposal-document strong { color:#16353d; }

@media (max-width:1000px) {
  .automation-proposal-simulation-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .automation-proposal-client-grid,.automation-proposal-bankdata-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .automation-proposal-loan-summary { grid-template-columns:28px minmax(145px,1.4fr) repeat(3,minmax(72px,.65fr)) minmax(120px,1fr) 22px; }
  .automation-proposal-loan-summary > span:nth-of-type(5) { display:none; }
}
@media (max-width:760px) {
  .automation-bank-flow-content { padding:14px !important; }
  .automation-standard-section { padding:12px; }
  .automation-standard-section-head { align-items:flex-start; flex-direction:column; gap:6px; }
  .automation-standard-section-head em { text-align:left; }
  .automation-proposal-simulation-grid,.automation-proposal-client-grid,.automation-proposal-bankdata-grid,.automation-proposal-loan-editor { grid-template-columns:1fr 1fr; }
  .automation-proposal-edit-field.is-wide { grid-column:span 2; }
  .automation-proposal-loan-summary { grid-template-columns:26px minmax(0,1fr) 22px; }
  .automation-proposal-loan-summary > span:not(.automation-proposal-loan-check) { display:none; }
  .automation-proposal-documents-grid { grid-template-columns:1fr; }
  .automation-proposal-final-action { grid-template-columns:1fr; }
  .automation-proposal-final-action button { width:100%; }
  .automation-bank-admin-table-editor { grid-template-columns:1fr 1fr; }
  .automation-bank-admin-table-editor > input { grid-column:1 / -1; }
  .automation-table-settings-head { align-items:flex-start; flex-direction:column; }
  .automation-table-settings-row { grid-template-columns:1fr; }
}

/* =====================================================================
   V66 — ARQUITETURA HÍBRIDA / PORT+REFIN COM CÁLCULO OFICIAL DO BANCO
   ===================================================================== */
.automation-proposal-calculation-wrap {
  grid-column:1 / -1;
  min-width:0;
}
.automation-proposal-calculation {
  position:relative;
  overflow:hidden;
  padding:14px;
  border:1px solid rgba(87,153,163,.14);
  border-radius:13px;
  background:
    radial-gradient(circle at 92% 0%, rgba(0,222,153,.06), transparent 28%),
    rgba(4,20,26,.70);
}
.automation-proposal-calculation > span,
.automation-proposal-calculation-head span {
  display:block;
  color:#52dfa0;
  font-size:6.7px;
  font-weight:900;
  letter-spacing:.12em;
}
.automation-proposal-calculation > strong {
  display:block;
  margin-top:4px;
  color:#edf7f8;
  font-size:10.5px;
  font-weight:760;
}
.automation-proposal-calculation > small {
  display:block;
  margin-top:4px;
  color:rgba(145,177,185,.58);
  font-size:7.4px;
  line-height:1.45;
}
.automation-proposal-calculation.is-loading::after {
  content:"";
  position:absolute;
  top:12px;
  right:14px;
  width:15px;
  height:15px;
  border:2px solid rgba(85,226,165,.18);
  border-top-color:#58e2a5;
  border-radius:50%;
  animation:automationCalculationSpin .72s linear infinite;
}
@keyframes automationCalculationSpin { to { transform:rotate(360deg); } }
.automation-proposal-calculation.is-error {
  border-color:rgba(235,86,96,.25);
  background:rgba(115,22,30,.08);
}
.automation-proposal-calculation.is-error > span { color:#ff8790; }
.automation-proposal-calculation.is-error button {
  margin-top:9px;
  min-height:31px;
  padding:0 11px;
  border:1px solid rgba(255,108,118,.24);
  border-radius:8px;
  color:#ffc1c5;
  background:rgba(255,87,98,.06);
  font-size:7.4px;
  font-weight:850;
  cursor:pointer;
}
.automation-proposal-calculation.is-success {
  border-color:rgba(42,227,160,.25);
  background:
    radial-gradient(circle at 8% -20%, rgba(0,220,150,.11), transparent 34%),
    linear-gradient(135deg,rgba(0,176,80,.045),transparent 50%),
    rgba(3,23,28,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 10px 28px rgba(0,176,80,.035);
}
.automation-proposal-calculation-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:11px;
}
.automation-proposal-calculation-head > div { display:grid; gap:2px; }
.automation-proposal-calculation-head strong { color:#edf8f7; font-size:10.5px; font-weight:760; }
.automation-proposal-calculation-head i {
  min-height:23px;
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  border:1px solid rgba(0,226,147,.20);
  border-radius:999px;
  color:#65eaa8;
  background:rgba(0,176,80,.045);
  font-size:6.4px;
  font-style:normal;
  font-weight:900;
}
.automation-proposal-calculation-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}
.automation-proposal-calculation-grid article {
  min-width:0;
  min-height:60px;
  display:grid;
  align-content:center;
  gap:4px;
  padding:9px 10px;
  border:1px solid rgba(97,153,164,.12);
  border-radius:10px;
  background:rgba(5,27,33,.70);
}
.automation-proposal-calculation-grid article small {
  color:rgba(126,158,168,.58);
  font-size:5.9px;
  font-weight:900;
  letter-spacing:.07em;
}
.automation-proposal-calculation-grid article strong {
  overflow:hidden;
  color:#eaf4f6;
  font-size:10px;
  font-weight:760;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.automation-proposal-calculation-grid article.is-highlight {
  border-color:rgba(44,234,162,.30);
  background:linear-gradient(135deg,rgba(0,176,80,.12),rgba(0,176,80,.025));
  box-shadow:0 0 22px rgba(0,176,80,.045),inset 0 1px 0 rgba(255,255,255,.02);
}
.automation-proposal-calculation-grid article.is-highlight small { color:rgba(86,229,164,.72); }
.automation-proposal-calculation-grid article.is-highlight strong {
  color:#55e79f;
  font-size:13px;
  letter-spacing:-.01em;
  text-shadow:0 0 14px rgba(0,176,80,.18);
}
.automation-proposal-calculation-dates {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid rgba(79,147,156,.10);
}
.automation-proposal-calculation-dates span { color:rgba(128,160,168,.58); font-size:6.2px; font-weight:850; text-transform:uppercase; }
.automation-proposal-calculation-dates strong { color:rgba(222,237,239,.82); font-size:8px; font-weight:680; }

.automation-in100-card {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  min-height:74px;
  padding:12px 14px;
  border:1px solid rgba(57,207,159,.14);
  border-radius:12px;
  background:linear-gradient(90deg,rgba(0,176,80,.055),transparent 68%),rgba(6,24,29,.58);
}
.automation-in100-card > div { display:grid; gap:3px; }
.automation-in100-card span { color:#55dfa3; font-size:6.4px; font-weight:900; letter-spacing:.12em; }
.automation-in100-card strong { color:#e9f5f4; font-size:9.7px; font-weight:730; }
.automation-in100-card small { max-width:780px; color:rgba(146,177,184,.58); font-size:7.3px; line-height:1.45; }
.automation-in100-card > i {
  min-height:26px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border:1px solid rgba(51,225,159,.20);
  border-radius:999px;
  color:#63e8a7;
  background:rgba(0,176,80,.045);
  font-size:6.2px;
  font-style:normal;
  font-weight:900;
}

.automation-bank-admin-integration-note {
  display:grid;
  gap:4px;
  margin-top:12px;
  padding:13px;
  border:1px solid rgba(51,224,159,.15);
  border-radius:11px;
  background:linear-gradient(110deg,rgba(0,176,80,.055),transparent),rgba(6,24,29,.48);
}
.automation-bank-admin-integration-note span { color:#56e0a2; font-size:6.3px; font-weight:900; letter-spacing:.12em; }
.automation-bank-admin-integration-note strong { color:var(--app-text); font-size:9.5px; }
.automation-bank-admin-integration-note small { color:var(--app-muted); font-size:7.3px; line-height:1.45; }

.automation-table-settings-bank-actions {
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}
.automation-table-settings-bank-actions > span {
  min-height:23px;
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  border:1px solid var(--app-border);
  border-radius:999px;
  color:var(--app-muted);
  font-size:6.2px;
  font-weight:900;
  white-space:nowrap;
}
.automation-table-settings-bank-actions > span.is-ready {
  color:#62e99e;
  border-color:rgba(0,176,80,.22);
  background:rgba(0,176,80,.045);
}
.automation-table-settings-bank-actions button {
  min-height:28px;
  padding:0 9px;
  border:1px solid rgba(0,176,80,.20);
  border-radius:8px;
  color:#68e6a6;
  background:rgba(0,176,80,.04);
  font-size:6.7px;
  font-weight:850;
  cursor:pointer;
}
.automation-table-settings-bank-actions button:hover:not(:disabled) { background:rgba(0,176,80,.08); border-color:rgba(0,176,80,.34); }
.automation-table-settings-bank-actions button:disabled { opacity:.35; cursor:not-allowed; }

html[data-app-theme="light"] .automation-proposal-calculation,
html[data-app-theme="light"] .automation-in100-card { background:#f8fbfb; }
html[data-app-theme="light"] .automation-proposal-calculation > strong,
html[data-app-theme="light"] .automation-proposal-calculation-head strong,
html[data-app-theme="light"] .automation-proposal-calculation-grid article strong,
html[data-app-theme="light"] .automation-in100-card strong { color:#16353d; }
html[data-app-theme="light"] .automation-proposal-calculation-grid article { background:#fff; }
html[data-app-theme="light"] .automation-proposal-calculation-grid article.is-highlight { background:#effcf5; }

@media (max-width:1000px) {
  .automation-proposal-calculation-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .automation-table-settings-bank-actions { align-items:flex-end; flex-direction:column; }
}
@media (max-width:760px) {
  .automation-proposal-calculation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .automation-in100-card { grid-template-columns:1fr; }
}


/* =====================================================================
   V67 — TABELAS HÍBRIDAS: LEGIBILIDADE + LOGO QUADRADA
   ===================================================================== */
.automation-table-settings-bank-logo.automation-bank-logo-frame {
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(84, 236, 158, .28) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.55) !important;
}
.automation-table-settings-bank-logo.automation-bank-logo-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 6px !important;
  background: #ffffff !important;
}
.automation-table-settings-bank > header {
  grid-template-columns: 46px minmax(0,1fr) auto !important;
  gap: 13px !important;
  padding: 13px 15px !important;
}
.automation-table-settings-bank header strong {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}
.automation-table-settings-bank header small {
  margin-top: 2px !important;
  font-size: 8px !important;
  line-height: 1.45 !important;
}
.automation-table-settings-bank-actions {
  gap: 9px !important;
}
.automation-table-settings-bank-actions > span {
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  font-size: 8.5px !important;
  font-weight: 850 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}
.automation-table-settings-bank-actions button {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 13px !important;
  border-color: rgba(72, 228, 147, .34) !important;
  border-radius: 9px !important;
  color: #75efad !important;
  background: linear-gradient(180deg, rgba(0,176,80,.095), rgba(0,176,80,.045)) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.automation-table-settings-bank-actions button b {
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}
.automation-table-settings-bank-actions button:hover:not(:disabled) {
  color: #9af7c4 !important;
  background: rgba(0,176,80,.12) !important;
  border-color: rgba(80,238,149,.52) !important;
}
html[data-app-theme="light"] .automation-table-settings-bank-logo.automation-bank-logo-frame {
  border-color: rgba(0,176,80,.22) !important;
  box-shadow: 0 5px 14px rgba(31,55,44,.10) !important;
}


/* =====================================================================
   V76 — TABELAS POR PRODUTO + LEGIBILIDADE PREMIUM
   ===================================================================== */
.automation-table-settings-head span { font-size: 10px !important; }
.automation-table-settings-head h3 { font-size: 24px !important; line-height: 1.15 !important; }
.automation-table-settings-head p { max-width: 820px !important; font-size: 12px !important; line-height: 1.55 !important; }
.automation-table-settings-save { min-height: 42px !important; padding: 0 17px !important; font-size: 11px !important; }
.automation-table-settings-search { height: 48px !important; padding: 0 15px !important; }
.automation-table-settings-search input { font-size: 12px !important; }
.automation-table-settings-list { gap: 16px !important; }
.automation-table-settings-bank { border-radius: 17px !important; box-shadow: 0 14px 34px rgba(0,0,0,.13) !important; }
.automation-table-settings-bank > header { min-height: 82px !important; padding: 15px 17px !important; }
.automation-table-settings-bank header strong { font-size: 14px !important; }
.automation-table-settings-bank header small { font-size: 10px !important; color: var(--app-muted-2) !important; }
.automation-table-settings-bank-actions > span { min-height: 34px !important; padding: 0 12px !important; font-size: 10px !important; }
.automation-table-settings-bank-actions button { min-height: 38px !important; padding: 0 15px !important; font-size: 11px !important; }
.automation-table-settings-rows { padding: 14px !important; gap: 14px !important; }
.automation-table-product-group { overflow: hidden; border: 1px solid rgba(94, 145, 160, .16); border-radius: 14px; background: rgba(8, 23, 30, .32); }
.automation-table-product-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid rgba(81, 224, 149, .13); background: linear-gradient(90deg, rgba(0,176,80,.09), rgba(0,176,80,.018) 58%, transparent); }
.automation-table-product-head > div { display: grid; gap: 2px; }
.automation-table-product-head span { color: #5de39d; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.automation-table-product-head strong { color: var(--app-text); font-size: 13px; font-weight: 820; }
.automation-table-product-head > b { min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid rgba(83, 225, 151, .22); border-radius: 999px; color: #71e8aa; background: rgba(0,176,80,.05); font-size: 9px; font-weight: 850; white-space: nowrap; }
.automation-table-product-list { display: grid; gap: 7px; padding: 9px; }
.automation-table-settings-row { min-height: 62px !important; grid-template-columns: minmax(0,1fr) 142px !important; gap: 18px !important; padding: 10px 12px !important; border-color: rgba(122,157,167,.14) !important; border-radius: 11px !important; background: rgba(9, 24, 31, .56) !important; }
.automation-table-settings-row:hover { border-color: rgba(76, 224, 145, .23) !important; background: rgba(10, 29, 34, .72) !important; }
.automation-table-settings-row > div { gap: 4px !important; }
.automation-table-settings-row small { color: #8ba4ac !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .055em !important; }
.automation-table-settings-row strong { color: #e9f4f1 !important; font-size: 12px !important; font-weight: 680 !important; line-height: 1.35 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.automation-table-settings-percent-shell { height: 40px !important; grid-template-columns: 1fr 30px !important; border-radius: 10px !important; }
.automation-table-settings-percent-shell input { padding: 0 11px !important; color: #70e7aa !important; font-size: 12px !important; font-weight: 800 !important; }
.automation-table-settings-percent-shell b { font-size: 10px !important; }
.automation-table-settings-no-tables,.automation-table-settings-empty { min-height: 100px !important; font-size: 11px !important; }
.automation-table-settings-empty small { font-size: 10px !important; }

html[data-app-theme="light"] .automation-table-product-group { background: #f8fbfa; border-color: rgba(20,81,60,.12); }
html[data-app-theme="light"] .automation-table-product-head { background: linear-gradient(90deg, rgba(0,176,80,.08), rgba(0,176,80,.015)); }
html[data-app-theme="light"] .automation-table-settings-row { background: #fff !important; border-color: rgba(20,81,60,.11) !important; }
html[data-app-theme="light"] .automation-table-settings-row strong { color: #173b34 !important; }
html[data-app-theme="light"] .automation-table-settings-row small { color: #637b75 !important; }

@media (max-width:760px) {
  .automation-table-settings-row { grid-template-columns: 1fr !important; }
  .automation-table-settings-percent-shell { width: 100%; }
  .automation-table-product-head { align-items: flex-start; flex-direction: column; }
}

/* =====================================================================
   V82 — GRUPOS DE PRODUTO RECOLHÍVEIS
   ===================================================================== */
.automation-table-product-head {
  width: 100%;
  min-height: 56px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border: 0;
  border-bottom: 1px solid rgba(81, 224, 149, .13);
  outline: 0;
  transition: background .16s ease, border-color .16s ease;
}
.automation-table-product-head:hover {
  background: linear-gradient(90deg, rgba(0,176,80,.13), rgba(0,176,80,.035) 62%, transparent);
}
.automation-table-product-head:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(93, 227, 157, .42);
}
.automation-table-product-head > b {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(83, 225, 151, .22);
  border-radius: 999px;
  color: #71e8aa;
  background: rgba(0,176,80,.05);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.automation-table-product-chevron {
  width: 8px;
  height: 8px;
  justify-self: center;
  border-right: 2px solid #71e8aa;
  border-bottom: 2px solid #71e8aa;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .16s ease;
}
.automation-table-product-group.is-collapsed .automation-table-product-head {
  border-bottom-color: transparent;
}
.automation-table-product-group.is-collapsed .automation-table-product-chevron {
  transform: rotate(-45deg);
}
.automation-table-product-group.is-collapsed .automation-table-product-list {
  display: none;
}
.automation-table-product-group.is-collapsed .automation-table-product-head strong::after {
  content: "  ·  clique para abrir";
  color: #708a82;
  font-size: 9px;
  font-weight: 650;
}
html[data-app-theme="light"] .automation-table-product-head:hover {
  background: linear-gradient(90deg, rgba(0,176,80,.11), rgba(0,176,80,.025));
}
html[data-app-theme="light"] .automation-table-product-group.is-collapsed .automation-table-product-head strong::after {
  color: #789189;
}
@media (max-width:760px) {
  .automation-table-product-head {
    grid-template-columns: minmax(0, 1fr) auto 18px !important;
    align-items: center !important;
  }
}



/* =====================================================================
   V84 — SIMULAÇÃO QUALI: ALERTA DE MÍNIMO + DROPDOWN CORBAN
   ===================================================================== */
.automation-proposal-loan.is-selected {
  overflow: visible;
}

.automation-proposal-table-field {
  position: relative;
  z-index: 24;
}

.automation-proposal-table-field .corban-employee-select {
  position: relative;
  z-index: 25;
}

.automation-proposal-table-field .corban-employee-select.is-open {
  z-index: 320;
}

.automation-proposal-table-field .corban-employee-select-trigger,
.automation-proposal-table-field .corban-employee-select-search {
  width: 100%;
  height: 39px;
  min-height: 39px;
  padding: 0 36px 0 11px;
  color: #eaf4f6;
  background:
    linear-gradient(180deg, rgba(45,226,163,.025), transparent 72%),
    rgba(10,31,39,.94);
  border: 1px solid rgba(47,225,161,.22);
  border-radius: 10px;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
  font-size: 9.5px;
  font-weight: 680;
}

.automation-proposal-table-field .corban-employee-select-trigger:hover {
  border-color: rgba(47,225,161,.38);
  background: rgba(11,37,42,.98);
}

.automation-proposal-table-field .corban-employee-select.is-open .corban-employee-select-trigger,
.automation-proposal-table-field .corban-employee-select-search:focus {
  border-color: rgba(45,226,163,.58);
  box-shadow: 0 0 0 3px rgba(0,176,80,.06), 0 0 20px rgba(0,176,80,.035);
}

.automation-proposal-table-field .corban-employee-select-search {
  display: block;
}

.automation-proposal-table-field .corban-employee-select-search.hidden,
.automation-proposal-table-field .corban-employee-select-trigger.hidden {
  display: none !important;
}

.automation-proposal-table-field .corban-employee-select-chevron {
  position: absolute;
  right: 13px;
  top: 50%;
  margin-top: -5px;
}

.automation-proposal-table-field .corban-employee-select-menu {
  top: calc(100% + 6px);
  bottom: auto;
  max-height: min(330px, 46vh);
  padding: 6px;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(45,226,163,.035), transparent 38%),
    #091b22;
  border-color: rgba(47,225,161,.25);
  box-shadow: 0 22px 52px rgba(0,0,0,.42), 0 0 0 1px rgba(0,176,80,.025);
}

.automation-proposal-table-field .corban-employee-select-option {
  min-height: 38px;
  padding: 7px 10px;
  align-items: flex-start;
  color: rgba(231,244,246,.88);
  font-size: 8.6px;
  font-weight: 680;
  line-height: 1.35;
}

.automation-proposal-table-field .corban-employee-select-option > span {
  white-space: normal;
}

.automation-proposal-table-field .corban-employee-select-option:hover,
.automation-proposal-table-field .corban-employee-select-option:focus-visible,
.automation-proposal-table-field .corban-employee-select-option.is-selected {
  color: #6ee8aa;
  background: rgba(0,176,80,.085);
}

.automation-proposal-calculation.has-minimum-warning {
  border-color: rgba(245,88,98,.24);
  background:
    radial-gradient(circle at 8% -20%, rgba(235,60,73,.07), transparent 34%),
    linear-gradient(135deg,rgba(120,22,31,.055),transparent 52%),
    rgba(3,23,28,.82);
}

.automation-proposal-calculation-head i.is-warning {
  color: #ff9098;
  border-color: rgba(245,88,98,.26);
  background: rgba(157,31,42,.11);
}

.automation-proposal-calculation-grid article.is-highlight.is-below-minimum {
  border-color: rgba(245,88,98,.38);
  background: linear-gradient(135deg,rgba(183,34,47,.16),rgba(115,20,31,.045));
  box-shadow: 0 0 22px rgba(228,52,66,.055), inset 0 1px 0 rgba(255,255,255,.018);
}

.automation-proposal-calculation-grid article.is-highlight.is-below-minimum small {
  color: rgba(255,146,154,.78);
}

.automation-proposal-calculation-grid article.is-highlight.is-below-minimum strong {
  color: #ff6f79;
  text-shadow: 0 0 14px rgba(228,52,66,.16);
}

.automation-proposal-minimum-warning {
  margin-top: 10px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: minmax(180px,.8fr) minmax(0,1.8fr);
  gap: 14px;
  border: 1px solid rgba(245,88,98,.26);
  border-radius: 11px;
  background: linear-gradient(110deg,rgba(137,25,35,.12),rgba(78,19,26,.055));
}

.automation-proposal-minimum-warning > div:first-child {
  display: grid;
  align-content: start;
  gap: 4px;
}

.automation-proposal-minimum-warning > div:first-child span {
  color: #ff7882;
  font-size: 6.4px;
  font-weight: 950;
  letter-spacing: .11em;
}

.automation-proposal-minimum-warning > div:first-child strong {
  color: #ffd2d5;
  font-size: 9px;
  line-height: 1.4;
}

.automation-proposal-minimum-warning-lines {
  display: grid;
  gap: 4px;
}

.automation-proposal-minimum-warning-lines p {
  margin: 0;
  color: rgba(255,176,182,.84);
  font-size: 7.5px;
  line-height: 1.48;
}

.automation-proposal-minimum-warning-lines .is-summary {
  margin-top: 3px;
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(245,88,98,.13);
}

.automation-proposal-minimum-warning-lines .is-summary b {
  color: rgba(255,183,188,.72);
  font-size: 6.8px;
  text-transform: uppercase;
}

.automation-proposal-minimum-warning-lines .is-summary strong {
  color: #ff727c;
  font-size: 10px;
}

html[data-app-theme="light"] .automation-proposal-table-field .corban-employee-select-trigger,
html[data-app-theme="light"] .automation-proposal-table-field .corban-employee-select-search,
html[data-app-theme="light"] .automation-proposal-table-field .corban-employee-select-menu {
  color: #193843;
  background-color: #ffffff;
  border-color: rgba(35,143,101,.28);
}

html[data-app-theme="light"] .automation-proposal-table-field .corban-employee-select-option {
  color: #29434a;
}

html[data-app-theme="light"] .automation-proposal-minimum-warning {
  background: #fff7f7;
  border-color: rgba(197,48,61,.22);
}

html[data-app-theme="light"] .automation-proposal-minimum-warning > div:first-child strong,
html[data-app-theme="light"] .automation-proposal-minimum-warning-lines p {
  color: #963741;
}

@media (max-width:760px) {
  .automation-proposal-minimum-warning { grid-template-columns:1fr; }
}


/* =====================================================================
   V85 — QUALI: REGRA ESPECÍFICA DO TROCO + LEGIBILIDADE DA SIMULAÇÃO
   ===================================================================== */
.automation-proposal-calculation {
  padding: 16px !important;
}
.automation-proposal-calculation > span,
.automation-proposal-calculation-head span {
  font-size: 8px !important;
  letter-spacing: .095em !important;
}
.automation-proposal-calculation > strong,
.automation-proposal-calculation-head strong {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}
.automation-proposal-calculation > small {
  font-size: 9.5px !important;
  line-height: 1.5 !important;
}
.automation-proposal-calculation-head i {
  min-height: 27px !important;
  padding: 0 10px !important;
  font-size: 8px !important;
}
.automation-proposal-calculation-grid article {
  min-height: 68px !important;
  padding: 10px 12px !important;
  gap: 5px !important;
}
.automation-proposal-calculation-grid article small {
  font-size: 7.6px !important;
  line-height: 1.25 !important;
  letter-spacing: .055em !important;
}
.automation-proposal-calculation-grid article strong {
  font-size: 11.5px !important;
}
.automation-proposal-calculation-grid article.is-highlight strong,
.automation-proposal-calculation-grid article.is-highlight.is-below-minimum strong {
  font-size: 15px !important;
}
.automation-proposal-calculation-dates span {
  font-size: 7.6px !important;
}
.automation-proposal-calculation-dates strong {
  font-size: 9.5px !important;
}

.automation-proposal-minimum-warning {
  margin-top: 12px !important;
  padding: 13px 14px !important;
  display: grid !important;
  grid-template-columns: minmax(210px,.72fr) minmax(0,2fr) !important;
  align-items: center !important;
  gap: 18px !important;
}
.automation-proposal-minimum-warning-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.automation-proposal-minimum-warning-head > span {
  color: #ff7e87;
  font-size: 8.5px;
  font-weight: 950;
  letter-spacing: .085em;
  white-space: nowrap;
}
.automation-proposal-minimum-warning-head > strong {
  min-width: max-content;
  display: grid;
  gap: 2px;
  justify-items: end;
  color: #ff737d;
  font-size: 13px;
  font-weight: 900;
}
.automation-proposal-minimum-warning-head > strong small {
  color: rgba(255,183,188,.72);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .06em;
}
.automation-proposal-minimum-warning-lines {
  gap: 6px !important;
}
.automation-proposal-minimum-warning-lines p {
  color: #ffc0c4 !important;
  font-size: 9.5px !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
}

.automation-proposal-table-field .corban-employee-select-trigger,
.automation-proposal-table-field .corban-employee-select-search {
  height: 42px !important;
  min-height: 42px !important;
  font-size: 10.5px !important;
}
.automation-proposal-table-field .corban-employee-select-option {
  min-height: 42px !important;
  padding: 9px 11px !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}

html[data-app-theme="light"] .automation-proposal-minimum-warning-head > span,
html[data-app-theme="light"] .automation-proposal-minimum-warning-head > strong {
  color: #b72e3a;
}
html[data-app-theme="light"] .automation-proposal-minimum-warning-head > strong small {
  color: #a45a61;
}
html[data-app-theme="light"] .automation-proposal-minimum-warning-lines p {
  color: #7f3038 !important;
}

@media (max-width:900px) {
  .automation-proposal-minimum-warning {
    grid-template-columns: 1fr !important;
  }
  .automation-proposal-minimum-warning-head {
    justify-content: flex-start;
  }
  .automation-proposal-minimum-warning-head > strong {
    margin-left: auto;
  }
}


/* =====================================================================
   V86 — QUALI: MÍNIMO ESPECÍFICO DO TROCO + MAIS LEGIBILIDADE
   ===================================================================== */
.automation-proposal-calculation {
  padding: 18px !important;
}
.automation-proposal-calculation-head span,
.automation-proposal-calculation > span {
  font-size: 9px !important;
  letter-spacing: .10em !important;
}
.automation-proposal-calculation-head strong,
.automation-proposal-calculation > strong {
  font-size: 15px !important;
  line-height: 1.35 !important;
}
.automation-proposal-calculation > small {
  font-size: 11px !important;
  line-height: 1.55 !important;
}
.automation-proposal-calculation-head i {
  min-height: 28px !important;
  padding: 0 11px !important;
  font-size: 10.5px !important;
}
.automation-proposal-calculation-grid {
  gap: 10px !important;
}
.automation-proposal-calculation-grid article {
  min-height: 72px !important;
  padding: 12px 13px !important;
}
.automation-proposal-calculation-grid article small {
  font-size: 8px !important;
  letter-spacing: .08em !important;
}
.automation-proposal-calculation-grid article strong {
  font-size: 13px !important;
}
.automation-proposal-calculation-grid article.is-highlight strong {
  font-size: 15px !important;
}
.automation-proposal-minimum-warning {
  margin-top: 12px !important;
  padding: 14px 15px !important;
  grid-template-columns: minmax(220px, .9fr) minmax(0, 2fr) !important;
  gap: 18px !important;
}
.automation-proposal-minimum-warning > div:first-child span {
  font-size: 8.5px !important;
}
.automation-proposal-minimum-warning > div:first-child strong {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.automation-proposal-minimum-warning-lines {
  gap: 8px !important;
}
.automation-proposal-minimum-warning-lines p {
  font-size: 11px !important;
  line-height: 1.6 !important;
}
.automation-proposal-calculation-dates {
  margin-top: 12px !important;
  padding-top: 12px !important;
  gap: 10px !important;
}
.automation-proposal-calculation-dates span {
  font-size: 8px !important;
}
.automation-proposal-calculation-dates strong {
  font-size: 10.5px !important;
}
.automation-proposal-table-field .corban-employee-select-trigger,
.automation-proposal-table-field .corban-employee-select-search,
.automation-proposal-table-field .corban-employee-select-option {
  font-size: 12px !important;
}
.automation-proposal-table-field .corban-employee-select-trigger {
  min-height: 40px !important;
}


/* =====================================================================
   V87 — QUALI: SEM PLACEHOLDER DE SIMULAÇÃO / DROPDOWN LIMPO
   ===================================================================== */
.automation-proposal-calculation-wrap:empty {
  display: none !important;
}


/* =====================================================================
   V88 — QUALI: PAINEL DOS CONTRATOS COM GLASS / MAIS LEGIBILIDADE
   ===================================================================== */
.automation-standard-section.automation-bank-loans-section,
.automation-standard-section:has(.automation-proposal-loans-list) {
  background:
    radial-gradient(1200px 220px at 15% -12%, rgba(100,255,216,.08), transparent 55%),
    radial-gradient(520px 180px at 100% 0%, rgba(75,160,255,.08), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 34%, rgba(255,255,255,.008) 60%),
    rgba(5, 21, 30, .66) !important;
  border: 1px solid rgba(116, 198, 207, .15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.015),
    0 18px 44px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.015) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.automation-proposal-loans-list {
  gap: 12px !important;
}
.automation-proposal-loan {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(122, 186, 193, .15) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 16%, rgba(255,255,255,.008) 100%),
    linear-gradient(135deg, rgba(9,31,42,.90), rgba(4,19,27,.74) 58%, rgba(6,25,34,.88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.02),
    0 10px 26px rgba(0,0,0,.16),
    0 0 0 1px rgba(255,255,255,.01) !important;
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
}
.automation-proposal-loan::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(480px 110px at -8% 0%, rgba(0, 234, 176, .08), transparent 60%),
    radial-gradient(380px 120px at 100% 0%, rgba(97, 175, 255, .06), transparent 60%);
  pointer-events: none;
}
.automation-proposal-loan.is-selected {
  border-color: rgba(61, 236, 180, .34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.014) 18%, rgba(255,255,255,.01) 100%),
    linear-gradient(135deg, rgba(8,36,40,.92), rgba(4,25,30,.84) 50%, rgba(5,33,36,.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.02),
    0 16px 34px rgba(0,176,80,.08),
    0 0 0 1px rgba(55, 233, 168, .08) !important;
}
.automation-proposal-loan-summary {
  min-height: 66px !important;
  grid-template-columns: 34px minmax(200px,1.55fr) repeat(4,minmax(92px,.78fr)) minmax(150px,1fr) 26px !important;
  gap: 14px !important;
  padding: 12px 15px !important;
}
.automation-proposal-loan-summary:hover {
  background: linear-gradient(90deg, rgba(255,255,255,.022), rgba(0,176,80,.04), rgba(255,255,255,.012)) !important;
}
.automation-proposal-loan-check {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(143, 201, 210, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.automation-proposal-loan.is-selected .automation-proposal-loan-check {
  background: linear-gradient(180deg, rgba(0,176,80,.22), rgba(0,176,80,.08)) !important;
  border-color: rgba(74,239,178,.42) !important;
  box-shadow: 0 0 18px rgba(0,176,80,.08), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.automation-proposal-loan-summary > strong {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}
.automation-proposal-loan-summary > span:not(.automation-proposal-loan-check) {
  gap: 4px !important;
}
.automation-proposal-loan-summary small {
  color: rgba(154, 196, 203, .62) !important;
  font-size: 8.2px !important;
  letter-spacing: .08em !important;
}
.automation-proposal-loan-summary b {
  font-size: 12.6px !important;
  font-weight: 760 !important;
  color: rgba(238,247,249,.94) !important;
}
.automation-proposal-loan-summary > i {
  font-size: 18px !important;
  color: rgba(147, 214, 193, .86) !important;
}
.automation-proposal-loan-editor {
  position: relative;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 14px !important;
  padding: 16px !important;
  border-top: 1px solid rgba(91, 175, 162, .16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(6, 21, 28, .32) !important;
}
.automation-proposal-loan-editor::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(440px 160px at 12% -10%, rgba(64, 214, 175, .05), transparent 55%),
    radial-gradient(320px 150px at 100% 0%, rgba(95, 158, 255, .04), transparent 60%);
  pointer-events: none;
}
.automation-proposal-edit-field {
  gap: 7px !important;
}
.automation-proposal-edit-field > span {
  font-size: 8px !important;
  letter-spacing: .10em !important;
  color: rgba(156, 199, 205, .74) !important;
}
.automation-proposal-edit-field input,
.automation-proposal-edit-field select {
  height: 46px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(130, 184, 195, .18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016)),
    rgba(11, 31, 40, .78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.08) !important;
  font-size: 13.5px !important;
  font-weight: 730 !important;
  color: #f1f8fa !important;
}
.automation-proposal-edit-field input::placeholder {
  color: rgba(173, 204, 209, .38) !important;
}
.automation-proposal-edit-field input:focus,
.automation-proposal-edit-field select:focus {
  border-color: rgba(73, 236, 173, .44) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(12, 36, 44, .90) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 4px rgba(0,176,80,.055),
    0 10px 20px rgba(0,0,0,.10) !important;
}
.automation-proposal-edit-field input[readonly] {
  color: #d8fff0 !important;
  border-color: rgba(66, 225, 165, .20) !important;
  background:
    linear-gradient(180deg, rgba(0,176,80,.065), rgba(255,255,255,.018)),
    rgba(10, 39, 40, .82) !important;
}
.automation-proposal-table-field {
  padding: 12px !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(0,176,80,.035) !important;
  border-color: rgba(71, 232, 173, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.automation-proposal-table-field > span {
  font-size: 8px !important;
  letter-spacing: .10em !important;
}
.automation-proposal-table-field .corban-employee-select-trigger {
  min-height: 46px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
  font-weight: 730 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016)),
    rgba(11,31,40,.80) !important;
  border-color: rgba(130,184,195,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.08) !important;
}
.automation-proposal-table-field .corban-employee-select-option,
.automation-proposal-table-field .corban-employee-select-search {
  font-size: 12.5px !important;
}
@media (max-width: 1360px) {
  .automation-proposal-loan-summary {
    grid-template-columns: 34px minmax(180px,1.4fr) repeat(4,minmax(84px,.72fr)) minmax(130px,.95fr) 24px !important;
    gap: 11px !important;
  }
  .automation-proposal-loan-summary > strong { font-size: 12px !important; }
  .automation-proposal-loan-summary b { font-size: 11.6px !important; }
}


/* =====================================================================
   V89 — QUALI: DROPDOWNS PADRÃO + CAMADAS + LIMPEZA DE CABEÇALHOS
   ===================================================================== */
/* O card selecionado sobe acima dos contratos seguintes, para o menu de
   Tabela nunca ficar escondido por outro card. */
.automation-proposal-loans-list {
  isolation: isolate !important;
  overflow: visible !important;
}
.automation-proposal-loan {
  position: relative !important;
  z-index: 1;
}
.automation-proposal-loan.is-selected {
  z-index: 60 !important;
  overflow: visible !important;
}
.automation-proposal-loan-editor {
  overflow: visible !important;
  z-index: 2;
}
.automation-proposal-table-field {
  position: relative !important;
  z-index: 80 !important;
  overflow: visible !important;
}
.automation-proposal-table-field .automation-proposal-table-select,
.automation-proposal-table-field .corban-employee-select {
  position: relative !important;
  z-index: 90 !important;
}
.automation-proposal-table-field .corban-employee-select.is-open {
  z-index: 5000 !important;
}
.automation-proposal-table-field .corban-employee-select-menu {
  z-index: 5100 !important;
}

/* Todos os selects desta tela passam a usar o componente visual Corban. */
.automation-proposal-edit-field > select[data-proposal-field] {
  /* o select nativo continua como fonte de dados, mas o visual é o custom */
}
.automation-proposal-edit-field .automation-proposal-custom-select,
.automation-proposal-edit-field .corban-employee-select {
  width: 100% !important;
  min-width: 0 !important;
}
.automation-proposal-edit-field .corban-employee-select-trigger,
.automation-proposal-edit-field .corban-employee-select-search {
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(130,184,195,.18) !important;
  border-radius: 13px !important;
  color: #f1f8fa !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016)),
    rgba(11,31,40,.80) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.08) !important;
  font-size: 13.5px !important;
  font-weight: 730 !important;
}
.automation-proposal-edit-field .corban-employee-select-trigger:hover {
  border-color: rgba(73,236,173,.30) !important;
}
.automation-proposal-edit-field .corban-employee-select.is-open > .corban-employee-select-trigger,
.automation-proposal-edit-field .corban-employee-select-search:focus {
  border-color: rgba(73,236,173,.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 4px rgba(0,176,80,.055),
    0 10px 20px rgba(0,0,0,.10) !important;
}
.automation-proposal-edit-field .corban-employee-select-menu {
  z-index: 4200 !important;
  overflow-y: auto !important;
  max-height: min(310px, 42vh) !important;
  border: 1px solid rgba(97,213,178,.20) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)),
    rgba(8,24,32,.97) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 22px 46px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}
.automation-proposal-edit-field .corban-employee-select-option {
  min-height: 38px !important;
  padding: 9px 12px !important;
  color: rgba(238,247,249,.92) !important;
  font-size: 12.5px !important;
  font-weight: 680 !important;
}
.automation-proposal-edit-field .corban-employee-select-option:hover,
.automation-proposal-edit-field .corban-employee-select-option.is-selected {
  color: #effff8 !important;
  background: linear-gradient(90deg, rgba(0,176,80,.14), rgba(74,222,183,.06)) !important;
}

/* O cabeçalho sem texto auxiliar mantém o alinhamento limpo. */
.automation-simulation-section .automation-standard-section-head,
.automation-portability-section .automation-standard-section-head {
  align-items: center !important;
}
\n\n/* =====================================================================\n   V90 — QUALI: DROPDOWNS ACIMA DAS SEÇÕES / SEM RECORTE PELO MODAL\n   ===================================================================== */\n/* As seções do fluxo usavam overflow:hidden para o efeito glass. Isso\n   recortava menus como Sexo/Produto na borda inferior do card. */\n.automation-standard-proposal-stage {\n  overflow: visible !important;\n}\n.automation-standard-section {\n  overflow: visible !important;\n}\n\n/* Quando qualquer dropdown Corban está aberto, a seção inteira sobe de\n   camada. Assim o menu pode atravessar a borda do card e ficar sobre a\n   próxima seção, sem perder o visual glass. */\n.automation-standard-section:has(.corban-employee-select.is-open) {\n  z-index: 9000 !important;\n  overflow: visible !important;\n}\n.automation-standard-section:has(.corban-employee-select.is-open)::before {\n  z-index: -1 !important;\n}\n\n.automation-proposal-edit-field {\n  position: relative !important;\n}\n.automation-proposal-edit-field:has(.corban-employee-select.is-open) {\n  z-index: 9100 !important;\n}\n.automation-proposal-edit-field .corban-employee-select {\n  position: relative !important;\n}\n.automation-proposal-edit-field .corban-employee-select.is-open {\n  z-index: 9200 !important;\n}\n.automation-proposal-edit-field .corban-employee-select-menu {\n  z-index: 9300 !important;\n}\n\n/* A seção seguinte não pode pintar por cima de um menu já aberto. */\n.automation-standard-section + .automation-standard-section {\n  position: relative;\n  z-index: 1;\n}\n.automation-standard-section:has(.corban-employee-select.is-open) + .automation-standard-section {\n  z-index: 0 !important;\n}\n

/* =====================================================================
   V91 — QUALI: DROPDOWNS FLUTUANTES FORA DO RECORTE DO MODAL
   ===================================================================== */
#automation-bank-flow-backdrop .automation-proposal-custom-select.pipeline-inline-corban-select.is-open {
  z-index: 20000 !important;
}
#automation-bank-flow-backdrop .automation-proposal-custom-select.pipeline-inline-corban-select .corban-employee-select-menu {
  z-index: 21000 !important;
}


/* =====================================================================
   V93 — QUALI: TABELA VOLTA A ABRIR LOGO ABAIXO DO PRÓPRIO CAMPO
   Produto/Sexo continuam flutuantes; Tabela fica ancorada no card.
   ===================================================================== */
#automation-bank-flow-backdrop .automation-proposal-table-field .automation-proposal-table-select {
  position: relative !important;
  z-index: 9500 !important;
  overflow: visible !important;
}
#automation-bank-flow-backdrop .automation-proposal-table-field .automation-proposal-table-select.is-open {
  z-index: 22000 !important;
}
#automation-bank-flow-backdrop .automation-proposal-table-field .automation-proposal-table-select .corban-employee-select-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  max-height: min(310px, 42vh) !important;
  z-index: 22100 !important;
}

/* =====================================================================
   V102 — LIGHT MODE: CONTRASTE GLOBAL + FLUXO NOVA PROPOSTA
   Os estilos V62–V93 foram refinados principalmente no modo escuro e
   alguns deles, por estarem no fim do arquivo com !important, venciam os
   estilos claros antigos. Este bloco fica por último de propósito.
   ===================================================================== */

/* ---------- Tokens globais: mais contraste sem deixar o tema pesado ---------- */
html[data-app-theme="light"] {
  --app-bg: #f2f5f4 !important;
  --app-bg-soft: #eaf0ed !important;
  --app-sidebar: #fbfdfc !important;
  --app-surface: #ffffff !important;
  --app-surface-2: #f6f9f8 !important;
  --app-surface-3: #edf3f0 !important;
  --app-border: #cfdad5 !important;
  --app-border-strong: #aebfb7 !important;
  --app-text: #21343d !important;
  --app-text-strong: #102832 !important;
  --app-muted: #526971 !important;
  --app-muted-2: #6f8288 !important;
  --app-accent: #0c865d !important;
  --app-mint: #087b62 !important;
  --app-danger: #b42336 !important;
  --app-control: #ffffff !important;
  --app-control-hover: #f2f7f5 !important;
  --app-table-hover: #edf7f2 !important;
}

html[data-app-theme="light"] .app-view {
  color: #21343d !important;
}

html[data-app-theme="light"] .app-view input::placeholder,
html[data-app-theme="light"] .app-view textarea::placeholder {
  color: #809097 !important;
  opacity: 1 !important;
}

html[data-app-theme="light"] .muted {
  color: #5b7077 !important;
}

/* ---------- Seletor inicial do banco ---------- */
html[data-app-theme="light"] .new-proposal-bank-backdrop {
  background:
    radial-gradient(circle at 78% 12%, rgba(0,176,80,.10), transparent 29%),
    rgba(224,232,235,.78) !important;
}

html[data-app-theme="light"] .new-proposal-bank-modal {
  color: #203944 !important;
  border-color: #cbd8d3 !important;
  background:
    linear-gradient(180deg,#fbfdfc 0%,#f5f9f7 34%,#f1f6f4 100%) !important;
}

html[data-app-theme="light"] .new-proposal-bank-head {
  border-bottom-color: #d8e2de !important;
}

html[data-app-theme="light"] .new-proposal-bank-head h2,
html[data-app-theme="light"] .new-proposal-bank-card-copy strong {
  color: #15313d !important;
}

html[data-app-theme="light"] .new-proposal-bank-head p {
  color: #5b727b !important;
}

html[data-app-theme="light"] .new-proposal-bank-section-title span {
  color: #36535e !important;
}

html[data-app-theme="light"] .new-proposal-bank-section-title small,
html[data-app-theme="light"] .new-proposal-bank-section-title > strong,
html[data-app-theme="light"] .new-proposal-bank-card-copy small,
html[data-app-theme="light"] .new-proposal-bank-footer > span {
  color: #687d85 !important;
}

html[data-app-theme="light"] .new-proposal-bank-search {
  border-color: #bfd0c9 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0,176,80,.045) !important;
}

html[data-app-theme="light"] .new-proposal-bank-search input {
  color: #173541 !important;
}

html[data-app-theme="light"] .new-proposal-bank-search input::placeholder {
  color: #84949a !important;
}

html[data-app-theme="light"] .new-proposal-bank-card {
  border-color: #d0ddd7 !important;
  background: #ffffff !important;
  box-shadow: 0 5px 16px rgba(35,62,73,.06) !important;
}

html[data-app-theme="light"] .new-proposal-bank-card:hover,
html[data-app-theme="light"] .new-proposal-bank-card:focus-visible {
  border-color: rgba(0,145,78,.42) !important;
  background: #f6fbf8 !important;
}

html[data-app-theme="light"] .new-proposal-bank-footer {
  border-top-color: #d9e3df !important;
  background: #f7faf8 !important;
}

/* ---------- Modal Quali / fluxo do banco ---------- */
html[data-app-theme="light"] .automation-bank-flow-backdrop {
  background:
    radial-gradient(circle at 83% 12%, rgba(0,176,80,.09), transparent 29%),
    rgba(211,222,220,.82) !important;
}

html[data-app-theme="light"] .automation-bank-flow-modal {
  color: #203841 !important;
  border-color: #b9cec5 !important;
  background:
    radial-gradient(circle at 86% -8%, rgba(0,176,80,.08), transparent 28%),
    linear-gradient(180deg,#f9fcfb 0%,#f3f8f6 42%,#eef5f2 100%) !important;
  box-shadow:
    0 34px 86px rgba(39,61,68,.21),
    inset 0 1px 0 #fff !important;
}

html[data-app-theme="light"] .automation-bank-flow-head {
  border-bottom-color: #cadbd4 !important;
  background:
    linear-gradient(90deg,rgba(0,176,80,.075),transparent 48%),
    #f4f9f7 !important;
}

html[data-app-theme="light"] .automation-bank-flow-identity span {
  color: #07865b !important;
}

html[data-app-theme="light"] .automation-bank-flow-identity h2 {
  color: #17323d !important;
}

html[data-app-theme="light"] .automation-bank-flow-head > button {
  color: #4c6068 !important;
  border-color: #c3d2cd !important;
  background: #edf3f1 !important;
}

html[data-app-theme="light"] .automation-bank-flow-head > button:hover {
  color: #0d6f50 !important;
  border-color: #78bba1 !important;
  background: #e7f5ee !important;
}

/* ---------- CPF + benefício ---------- */
html[data-app-theme="light"] .automation-bank-cpf-heading > span {
  color: #0b8b60 !important;
}

html[data-app-theme="light"] .automation-bank-cpf-heading h3 {
  color: #183542 !important;
}

html[data-app-theme="light"] .automation-bank-cpf-heading p {
  color: #5d747d !important;
}

html[data-app-theme="light"] .automation-bank-flow-crm-status,
html[data-app-theme="light"] .automation-bank-cpf-form,
html[data-app-theme="light"] .automation-bank-benefit-card {
  color: #213942 !important;
  border-color: #ccd9d5 !important;
  background: #ffffff !important;
}

html[data-app-theme="light"] .automation-bank-flow-crm-status strong,
html[data-app-theme="light"] .automation-bank-benefit-card strong {
  color: #183440 !important;
}

html[data-app-theme="light"] .automation-bank-flow-crm-status span,
html[data-app-theme="light"] .automation-bank-benefit-card p {
  color: #5f747c !important;
}

html[data-app-theme="light"] .automation-bank-benefit-card small,
html[data-app-theme="light"] .automation-bank-cpf-form > label,
html[data-app-theme="light"] .automation-bank-cpf-form > small {
  color: #687e86 !important;
}

html[data-app-theme="light"] .automation-bank-benefit-card:hover {
  border-color: rgba(0,145,78,.38) !important;
  background: #f6fbf8 !important;
  box-shadow: 0 10px 24px rgba(35,62,73,.08) !important;
}

html[data-app-theme="light"] .automation-bank-benefit-index,
html[data-app-theme="light"] .automation-bank-benefit-action {
  color: #087d58 !important;
  background: #e8f6ef !important;
}

html[data-app-theme="light"] .automation-bank-cpf-input-shell {
  border-color: #78bda1 !important;
  background: #ffffff !important;
}

html[data-app-theme="light"] .automation-bank-cpf-input-shell input {
  color: #173541 !important;
}

html[data-app-theme="light"] .automation-bank-cpf-input-shell input::placeholder {
  color: #89999f !important;
}

/* ---------- Seções da proposta ---------- */
html[data-app-theme="light"] .automation-standard-section {
  color: #203841 !important;
  border-color: #cbdad4 !important;
  background:
    radial-gradient(circle at 96% -12%,rgba(0,176,80,.045),transparent 30%),
    #ffffff !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 7px 20px rgba(35,62,73,.045) !important;
}

html[data-app-theme="light"] .automation-standard-section::before {
  opacity: .45 !important;
}

html[data-app-theme="light"] .automation-standard-section-head > div > span {
  color: #087e59 !important;
  border-color: #9bcdb9 !important;
  background: #eaf7f1 !important;
}

html[data-app-theme="light"] .automation-standard-section-head small {
  color: #0b8a61 !important;
}

html[data-app-theme="light"] .automation-standard-section-head strong {
  color: #17343f !important;
}

html[data-app-theme="light"] .automation-standard-section-head em {
  color: #637980 !important;
}

/* labels e controles */
html[data-app-theme="light"] .automation-proposal-edit-field > span {
  color: #55737b !important;
}

html[data-app-theme="light"] .automation-proposal-edit-field input,
html[data-app-theme="light"] .automation-proposal-edit-field select,
html[data-app-theme="light"] .automation-proposal-edit-field .corban-employee-select-trigger,
html[data-app-theme="light"] .automation-proposal-edit-field .corban-employee-select-search {
  color: #18343d !important;
  border-color: #c6d5d0 !important;
  background: #fbfdfc !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 13px rgba(35,62,73,.045) !important;
}

html[data-app-theme="light"] .automation-proposal-edit-field input[readonly] {
  color: #17383a !important;
  border-color: #b8d8ca !important;
  background: #f2faf6 !important;
}

html[data-app-theme="light"] .automation-proposal-edit-field input:focus,
html[data-app-theme="light"] .automation-proposal-edit-field select:focus,
html[data-app-theme="light"] .automation-proposal-edit-field .corban-employee-select.is-open > .corban-employee-select-trigger,
html[data-app-theme="light"] .automation-proposal-edit-field .corban-employee-select-search:focus {
  color: #132f39 !important;
  border-color: #59ad8b !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(0,145,78,.07) !important;
}

html[data-app-theme="light"] .automation-proposal-edit-field .corban-employee-select-menu,
html[data-app-theme="light"] .automation-proposal-table-field .corban-employee-select-menu {
  border-color: #b9cec5 !important;
  background: #ffffff !important;
  box-shadow: 0 20px 44px rgba(35,62,73,.16) !important;
}

html[data-app-theme="light"] .automation-proposal-edit-field .corban-employee-select-option,
html[data-app-theme="light"] .automation-proposal-table-field .corban-employee-select-option {
  color: #26434d !important;
}

html[data-app-theme="light"] .automation-proposal-edit-field .corban-employee-select-option:hover,
html[data-app-theme="light"] .automation-proposal-edit-field .corban-employee-select-option.is-selected,
html[data-app-theme="light"] .automation-proposal-table-field .corban-employee-select-option:hover,
html[data-app-theme="light"] .automation-proposal-table-field .corban-employee-select-option.is-selected {
  color: #0e5f46 !important;
  background: #eaf7f1 !important;
}

/* ---------- Bloco dos contratos: light de verdade ---------- */
html[data-app-theme="light"] .automation-standard-section.automation-bank-loans-section,
html[data-app-theme="light"] .automation-standard-section:has(.automation-proposal-loans-list) {
  border-color: #b9d0c7 !important;
  background:
    radial-gradient(900px 190px at 10% -10%,rgba(0,176,80,.07),transparent 58%),
    linear-gradient(145deg,#f6faf8,#eef5f2) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 12px 28px rgba(35,62,73,.07) !important;
}

html[data-app-theme="light"] .automation-proposal-loan {
  border-color: #c7d7d1 !important;
  background: #ffffff !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 16px rgba(35,62,73,.06) !important;
}

html[data-app-theme="light"] .automation-proposal-loan::before {
  background:
    radial-gradient(480px 110px at -8% 0%,rgba(0,176,80,.045),transparent 60%),
    radial-gradient(380px 120px at 100% 0%,rgba(54,138,170,.035),transparent 60%) !important;
}

html[data-app-theme="light"] .automation-proposal-loan.is-selected {
  border-color: #75b99f !important;
  background:
    linear-gradient(90deg,rgba(0,176,80,.055),transparent 56%),
    #fbfefc !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 24px rgba(0,120,75,.075) !important;
}

html[data-app-theme="light"] .automation-proposal-loan-summary:hover {
  background: #f0f8f4 !important;
}

html[data-app-theme="light"] .automation-proposal-loan-check {
  color: #087e59 !important;
  border-color: #aac9bd !important;
  background: #f1f7f4 !important;
}

html[data-app-theme="light"] .automation-proposal-loan.is-selected .automation-proposal-loan-check {
  color: #08764f !important;
  border-color: #71b497 !important;
  background: #def2e8 !important;
}

html[data-app-theme="light"] .automation-proposal-loan-summary > strong {
  color: #17343e !important;
}

html[data-app-theme="light"] .automation-proposal-loan-summary small {
  color: #5e7880 !important;
}

html[data-app-theme="light"] .automation-proposal-loan-summary b {
  color: #243f48 !important;
}

html[data-app-theme="light"] .automation-proposal-loan-summary > i {
  color: #147f5c !important;
}

html[data-app-theme="light"] .automation-proposal-loan-editor {
  border-top-color: #c5d8d0 !important;
  background: #f4f9f7 !important;
}

html[data-app-theme="light"] .automation-proposal-table-field {
  border-color: #a9d0bf !important;
  background: #edf8f3 !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

html[data-app-theme="light"] .automation-proposal-table-field > span {
  color: #24765d !important;
}

html[data-app-theme="light"] .automation-proposal-table-field .corban-employee-select-trigger,
html[data-app-theme="light"] .automation-proposal-table-field .corban-employee-select-search {
  color: #17343d !important;
  border-color: #b8cec5 !important;
  background: #ffffff !important;
}

/* ---------- Simulação / IN100 ---------- */
html[data-app-theme="light"] .automation-proposal-calculation,
html[data-app-theme="light"] .automation-in100-card {
  color: #203841 !important;
  border-color: #c6d8d1 !important;
  background: #f7fbf9 !important;
}

html[data-app-theme="light"] .automation-proposal-calculation > span,
html[data-app-theme="light"] .automation-proposal-calculation-head span,
html[data-app-theme="light"] .automation-in100-card span {
  color: #0b825b !important;
}

html[data-app-theme="light"] .automation-proposal-calculation > strong,
html[data-app-theme="light"] .automation-proposal-calculation-head strong,
html[data-app-theme="light"] .automation-in100-card strong {
  color: #17343f !important;
}

html[data-app-theme="light"] .automation-proposal-calculation > small,
html[data-app-theme="light"] .automation-in100-card small,
html[data-app-theme="light"] .automation-proposal-calculation-dates span {
  color: #5d747c !important;
}

html[data-app-theme="light"] .automation-proposal-calculation-dates strong {
  color: #2a454d !important;
}

html[data-app-theme="light"] .automation-proposal-calculation-grid article {
  border-color: #d3dfda !important;
  background: #ffffff !important;
}

html[data-app-theme="light"] .automation-proposal-calculation-grid article small {
  color: #60777f !important;
}

html[data-app-theme="light"] .automation-proposal-calculation-grid article strong {
  color: #18343d !important;
}

html[data-app-theme="light"] .automation-proposal-calculation-grid article.is-highlight {
  border-color: #8fc8ad !important;
  background: #eaf8f1 !important;
}

html[data-app-theme="light"] .automation-proposal-calculation-grid article.is-highlight small {
  color: #25755b !important;
}

html[data-app-theme="light"] .automation-proposal-calculation-grid article.is-highlight strong {
  color: #087b54 !important;
}

/* ---------- Cadastro, dados bancários e documentos ---------- */
html[data-app-theme="light"] .automation-proposal-bankdata-block h4 {
  color: #36545c !important;
}

html[data-app-theme="light"] .automation-proposal-bankdata-block + .automation-proposal-bankdata-block {
  border-top-color: #d5e1dc !important;
}

html[data-app-theme="light"] .automation-proposal-document {
  color: #536c74 !important;
  border-color: #b8cec5 !important;
  background: #f8fbfa !important;
}

html[data-app-theme="light"] .automation-proposal-document:hover,
html[data-app-theme="light"] .automation-proposal-document.has-file {
  border-color: #72b79a !important;
  background: #edf8f3 !important;
}

html[data-app-theme="light"] .automation-proposal-document strong {
  color: #18343d !important;
}

html[data-app-theme="light"] .automation-proposal-document small {
  color: #60777f !important;
}

/* ---------- Ação final ---------- */
html[data-app-theme="light"] .automation-proposal-final-action {
  color: #203841 !important;
  border-color: #c2d5cd !important;
  background: #f7fbf9 !important;
}

html[data-app-theme="light"] .automation-proposal-final-action.is-ready {
  border-color: #86c3a9 !important;
  background:
    linear-gradient(90deg,rgba(0,176,80,.065),transparent 58%),
    #f8fcfa !important;
}

html[data-app-theme="light"] .automation-proposal-final-action small {
  color: #0a825a !important;
}

html[data-app-theme="light"] .automation-proposal-final-action strong {
  color: #17343e !important;
}

html[data-app-theme="light"] .automation-proposal-final-action span {
  color: #5d747c !important;
}

html[data-app-theme="light"] .automation-proposal-final-action button:disabled {
  color: #71857c !important;
  border-color: #cedbd5 !important;
  background: #eaf0ed !important;
}

/* ---------- Resultado/cliente: reforço nos textos que ainda usavam rgba escuro ---------- */
html[data-app-theme="light"] .automation-bank-customer-success {
  border-color: #9bcbb8 !important;
  background: #f6fbf8 !important;
}

html[data-app-theme="light"] .automation-bank-customer-success small {
  color: #0b815b !important;
}

html[data-app-theme="light"] .automation-bank-customer-success strong,
html[data-app-theme="light"] .automation-customer-section-head span,
html[data-app-theme="light"] .automation-customer-field strong,
html[data-app-theme="light"] .automation-customer-loan > strong,
html[data-app-theme="light"] .automation-bank-customer-next strong {
  color: #18343d !important;
}

html[data-app-theme="light"] .automation-bank-customer-success p,
html[data-app-theme="light"] .automation-customer-section-head small,
html[data-app-theme="light"] .automation-customer-field small,
html[data-app-theme="light"] .automation-customer-loans-head span,
html[data-app-theme="light"] .automation-customer-loan > span {
  color: #60777f !important;
}

html[data-app-theme="light"] .automation-customer-section,
html[data-app-theme="light"] .automation-customer-section-margins,
html[data-app-theme="light"] .automation-bank-customer-next {
  border-color: #cad9d3 !important;
  background: #ffffff !important;
}

html[data-app-theme="light"] .automation-customer-field {
  border-color: #d0ddd8 !important;
  background: #f7faf9 !important;
}

html[data-app-theme="light"] .automation-customer-loans {
  border-color: #cbd9d4 !important;
  background: #ffffff !important;
}

html[data-app-theme="light"] .automation-customer-loans-head {
  border-bottom-color: #c8dad2 !important;
  background: #eaf5f0 !important;
}

html[data-app-theme="light"] .automation-customer-loan {
  border-bottom-color: #dce5e1 !important;
}

html[data-app-theme="light"] .automation-customer-loan:hover {
  background: #f1f8f5 !important;
}

html[data-app-theme="light"] .automation-customer-loan b {
  color: #28464f !important;
}

/* ---------- Avisos continuam fortes no claro ---------- */
html[data-app-theme="light"] .automation-proposal-minimum-warning {
  border-color: rgba(180,35,54,.30) !important;
  background: #fff4f5 !important;
}

html[data-app-theme="light"] .automation-proposal-minimum-warning-head > span,
html[data-app-theme="light"] .automation-proposal-minimum-warning-head > strong,
html[data-app-theme="light"] .automation-proposal-minimum-warning-lines p {
  color: #9f2435 !important;
}

html[data-app-theme="light"] .automation-proposal-minimum-warning-head > strong small {
  color: #7f4d54 !important;
}

/* =====================================================================
   V103 — RESTAURAÇÃO DO BOTÃO "LIBERAR TROCO MÍNIMO"
   A V102 partiu de um CSS anterior à V99 e, por isso, perdeu este bloco.
   ===================================================================== */
.automation-proposal-minimum-action {
  grid-column: span 2;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  padding: 12px 0;
  position: relative;
  z-index: 20;
}

.automation-proposal-minimum-action > button {
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(73,236,173,.30);
  border-radius: 13px;
  color: #dffff2;
  background:
    linear-gradient(180deg, rgba(0,176,80,.16), rgba(0,176,80,.075)),
    rgba(9,31,35,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 9px 20px rgba(0,0,0,.10),
    0 0 22px rgba(0,176,80,.045);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .015em;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.automation-proposal-minimum-action > button span {
  font-size: 17px;
  line-height: 1;
  color: #61efb9;
  transform: translateY(-1px);
}

.automation-proposal-minimum-action > button:hover {
  border-color: rgba(73,236,173,.52);
  background:
    linear-gradient(180deg, rgba(0,176,80,.23), rgba(0,176,80,.11)),
    rgba(10,38,40,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 22px rgba(0,0,0,.13),
    0 0 26px rgba(0,176,80,.08);
  transform: translateY(-1px);
}

.automation-proposal-minimum-action > button:active {
  transform: translateY(0);
}

.automation-proposal-minimum-action > button:focus-visible {
  outline: none;
  border-color: rgba(91,244,188,.68);
  box-shadow: 0 0 0 4px rgba(0,176,80,.09);
}

html[data-app-theme="light"] .automation-proposal-minimum-action > button {
  color: #12613f;
  border-color: rgba(25,150,91,.27);
  background: linear-gradient(180deg,#effbf5,#e4f7ee);
  box-shadow: 0 8px 18px rgba(34,105,76,.08);
}

html[data-app-theme="light"] .automation-proposal-minimum-action > button span {
  color: #168958;
}

html[data-app-theme="light"] .automation-proposal-minimum-action > button:hover {
  border-color: rgba(25,150,91,.42);
  background: linear-gradient(180deg,#e8f9f1,#daf3e7);
}

@media (max-width: 900px) {
  .automation-proposal-minimum-action {
    grid-column: span 2;
    padding-top: 0;
  }
}

/* =====================================================================
   V108 — TABELA + BOTÃO DE TROCO NA MESMA LINHA
   Com Banco de Origem unificado, sobra exatamente uma coluna após
   Saldo (1 col) + Tabela (2 col). O botão usa essa coluna.
   ===================================================================== */
@media (min-width: 901px) {
  .automation-proposal-minimum-action {
    grid-column: span 1 !important;
    min-width: 0 !important;
    padding: 12px 0 !important;
    align-self: stretch !important;
    align-items: flex-end !important;
  }

  .automation-proposal-minimum-action > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    gap: 7px !important;
    font-size: 10.8px !important;
    letter-spacing: .005em !important;
    white-space: nowrap !important;
  }

  .automation-proposal-minimum-action > button span {
    font-size: 14px !important;
  }
}

@media (max-width: 900px) {
  .automation-proposal-minimum-action {
    grid-column: span 2 !important;
  }
}

/* =====================================================================
   V115 — CADASTRO QUALI ENXUTO / DOCUMENTOS DO CLIENTE
   ===================================================================== */
.automation-registration-section .automation-proposal-bankdata-block + .automation-proposal-bankdata-block {
  margin-top: 18px;
  padding-top: 17px;
}

.automation-proposal-client-documents-choice {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 13px;
  padding: 12px 14px;
  border: 1px solid rgba(82, 222, 166, .15);
  border-radius: 13px;
  background: rgba(0, 176, 80, .035);
  cursor: pointer;
}

.automation-proposal-client-documents-choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #24c77f;
  flex: 0 0 auto;
}

.automation-proposal-client-documents-choice > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.automation-proposal-client-documents-choice strong {
  color: #eaf4f5;
  font-size: 9px;
  font-weight: 760;
}

.automation-proposal-client-documents-choice small {
  color: rgba(151, 181, 188, .61);
  font-size: 7.5px;
  line-height: 1.45;
}

html[data-app-theme="light"] .automation-proposal-client-documents-choice {
  border-color: #c4d9cf;
  background: #f5faf7;
}

html[data-app-theme="light"] .automation-proposal-client-documents-choice strong {
  color: #193941;
}

html[data-app-theme="light"] .automation-proposal-client-documents-choice small {
  color: #5f757d;
}

/* =====================================================================
   V117 — CAMPOS OBRIGATÓRIOS PENDENTES
   ===================================================================== */
.automation-proposal-edit-field.is-required-missing > span {
  color: #ff8d97 !important;
}

.automation-proposal-edit-field.is-required-missing input,
.automation-proposal-edit-field.is-required-missing select,
.automation-proposal-edit-field.is-required-missing .corban-employee-select-trigger {
  border-color: rgba(255, 83, 99, .58) !important;
  background:
    linear-gradient(180deg, rgba(255, 72, 90, .065), rgba(255, 72, 90, .025)),
    var(--app-control) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 0 0 1px rgba(255, 72, 90, .05) !important;
}

.automation-proposal-edit-field.is-required-missing input:focus,
.automation-proposal-edit-field.is-required-missing select:focus,
.automation-proposal-edit-field.is-required-missing .corban-employee-select.is-open > .corban-employee-select-trigger {
  border-color: rgba(255, 96, 110, .82) !important;
  box-shadow: 0 0 0 4px rgba(255, 72, 90, .08) !important;
}

.automation-proposal-document.is-required-missing {
  border-color: rgba(255, 83, 99, .48) !important;
  background:
    linear-gradient(180deg, rgba(255, 72, 90, .055), rgba(255, 72, 90, .018)),
    rgba(8, 27, 31, .62) !important;
}

.automation-proposal-document.is-required-missing strong {
  color: #ffadb4 !important;
}

html[data-app-theme="light"] .automation-proposal-edit-field.is-required-missing > span {
  color: #b42336 !important;
}

html[data-app-theme="light"] .automation-proposal-edit-field.is-required-missing input,
html[data-app-theme="light"] .automation-proposal-edit-field.is-required-missing select,
html[data-app-theme="light"] .automation-proposal-edit-field.is-required-missing .corban-employee-select-trigger {
  border-color: rgba(180, 35, 54, .44) !important;
  background: #fff6f7 !important;
}

html[data-app-theme="light"] .automation-proposal-document.is-required-missing {
  border-color: rgba(180, 35, 54, .38) !important;
  background: #fff7f8 !important;
}

html[data-app-theme="light"] .automation-proposal-document.is-required-missing strong {
  color: #a92336 !important;
}

/* =====================================================================
   V122 — DIGITAÇÃO REAL NO QUALIBANK
   ===================================================================== */
.automation-proposal-submit-success,
.automation-proposal-submit-error {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 15px;
  padding: 16px 18px;
  border-radius: 15px;
}

.automation-proposal-submit-success {
  border: 1px solid rgba(59, 231, 161, .33);
  background:
    radial-gradient(circle at 88% 0%, rgba(0, 176, 80, .13), transparent 35%),
    rgba(5, 34, 31, .80);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.automation-proposal-submit-success > div:first-child,
.automation-proposal-submit-error {
  min-width: 0;
}

.automation-proposal-submit-success small {
  display: block;
  margin-bottom: 4px;
  color: #59e7b0;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
}

.automation-proposal-submit-success strong {
  display: block;
  color: #f1fffa;
  font-size: 14px;
}

.automation-proposal-submit-success span {
  display: block;
  margin-top: 4px;
  color: rgba(190, 214, 214, .72);
  font-size: 9px;
}

.automation-proposal-submit-success-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.automation-proposal-submit-success-actions a,
.automation-proposal-submit-success-actions button {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(77, 232, 171, .32);
  border-radius: 11px;
  color: #eafff6;
  background: rgba(0, 176, 80, .12);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.automation-proposal-submit-error {
  border: 1px solid rgba(255, 83, 99, .34);
  background: rgba(255, 72, 90, .045);
}

.automation-proposal-submit-error strong {
  color: #ff9ca6;
  font-size: 10px;
}

.automation-proposal-submit-error span {
  color: rgba(255, 190, 196, .78);
  font-size: 9px;
  margin-left: 8px;
}

html[data-app-theme="light"] .automation-proposal-submit-success {
  border-color: #9bcdb9;
  background: #effaf4;
}

html[data-app-theme="light"] .automation-proposal-submit-success strong {
  color: #174334;
}

html[data-app-theme="light"] .automation-proposal-submit-success span {
  color: #587369;
}

html[data-app-theme="light"] .automation-proposal-submit-success-actions a,
html[data-app-theme="light"] .automation-proposal-submit-success-actions button {
  color: #12613f;
  border-color: #a7d6c1;
  background: #e7f7ef;
}

html[data-app-theme="light"] .automation-proposal-submit-error {
  border-color: rgba(180, 35, 54, .30);
  background: #fff5f6;
}

@media (max-width: 760px) {
  .automation-proposal-submit-success {
    align-items: stretch;
    flex-direction: column;
  }

  .automation-proposal-submit-success-actions {
    width: 100%;
  }

  .automation-proposal-submit-success-actions a,
  .automation-proposal-submit-success-actions button {
    flex: 1;
  }
}

/* =====================================================================
   V125 — POPUP CENTRAL DE ERRO/RECUSA DO BANCO NA DIGITAÇÃO
   ===================================================================== */
.automation-proposal-bank-error-popup {
  position: fixed;
  inset: 0;
  z-index: 40000 !important;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(1, 10, 13, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.automation-proposal-bank-error-popup.is-open {
  display: grid;
  animation: automationBankErrorBackdropIn .16s ease-out both;
}

.automation-proposal-bank-error-card {
  position: relative;
  width: min(520px, 94vw);
  overflow: hidden;
  padding: 27px 28px 23px;
  border: 1px solid rgba(255, 91, 105, .34);
  border-radius: 21px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 72, 90, .10), transparent 36%),
    linear-gradient(180deg, #102327, #0b1b1f);
  box-shadow:
    0 34px 95px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(255,255,255,.018) inset,
    inset 0 1px 0 rgba(255,255,255,.035);
  animation: automationBankErrorCardIn .20s cubic-bezier(.2,.8,.2,1) both;
}

.automation-proposal-bank-error-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #ff5264, #ff8995 48%, rgba(255,82,100,0));
}

.automation-proposal-bank-error-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  color: rgba(229, 241, 242, .72);
  background: rgba(255,255,255,.035);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.automation-proposal-bank-error-close:hover {
  color: #fff;
  border-color: rgba(255, 113, 126, .30);
  background: rgba(255, 82, 100, .08);
}

.automation-proposal-bank-error-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 91, 105, .36);
  border-radius: 14px;
  color: #ff8e99;
  background: rgba(255, 72, 90, .08);
  box-shadow: 0 0 28px rgba(255, 72, 90, .08);
  font-size: 22px;
  font-weight: 900;
}

.automation-proposal-bank-error-copy small {
  display: block;
  margin-bottom: 5px;
  color: #ff8793;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
}

.automation-proposal-bank-error-copy h3 {
  margin: 0;
  color: #f5fbfc;
  font-size: 20px;
  font-weight: 820;
  letter-spacing: -.02em;
}

.automation-proposal-bank-error-copy p {
  margin: 12px 0 0;
  color: rgba(225, 238, 240, .82);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.58;
  overflow-wrap: anywhere;
}

.automation-proposal-bank-error-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 18px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}

.automation-proposal-bank-error-source span {
  color: rgba(170, 195, 199, .60);
  font-size: 8px;
  font-weight: 700;
}

.automation-proposal-bank-error-source strong {
  color: #e7f4f5;
  font-size: 9px;
  font-weight: 850;
  text-align: right;
}

.automation-proposal-bank-error-confirm {
  width: 100%;
  min-height: 43px;
  margin-top: 19px;
  border: 1px solid rgba(255, 91, 105, .38);
  border-radius: 12px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(218, 57, 73, .94), rgba(173, 37, 51, .96));
  box-shadow:
    0 9px 24px rgba(148, 25, 38, .20),
    inset 0 1px 0 rgba(255,255,255,.10);
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.automation-proposal-bank-error-confirm:hover {
  filter: brightness(1.06);
}

.automation-proposal-bank-error-confirm:focus-visible,
.automation-proposal-bank-error-close:focus-visible {
  outline: 2px solid rgba(255, 128, 140, .82);
  outline-offset: 3px;
}

@keyframes automationBankErrorBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes automationBankErrorCardIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

html[data-app-theme="light"] .automation-proposal-bank-error-popup {
  background: rgba(28, 43, 51, .38);
}

html[data-app-theme="light"] .automation-proposal-bank-error-card {
  border-color: rgba(181, 52, 68, .25);
  background:
    radial-gradient(circle at 12% 0%, rgba(202, 51, 69, .07), transparent 36%),
    #ffffff;
  box-shadow:
    0 28px 80px rgba(31, 47, 57, .24),
    0 3px 14px rgba(31, 47, 57, .08);
}

html[data-app-theme="light"] .automation-proposal-bank-error-close {
  color: #60737a;
  border-color: #dce5e7;
  background: #f7fafb;
}

html[data-app-theme="light"] .automation-proposal-bank-error-icon {
  color: #b82d40;
  border-color: rgba(184, 45, 64, .25);
  background: #fff3f5;
}

html[data-app-theme="light"] .automation-proposal-bank-error-copy small {
  color: #b82d40;
}

html[data-app-theme="light"] .automation-proposal-bank-error-copy h3 {
  color: #17343c;
}

html[data-app-theme="light"] .automation-proposal-bank-error-copy p {
  color: #455f67;
}

html[data-app-theme="light"] .automation-proposal-bank-error-source {
  border-color: #e4eaec;
  background: #f7fafb;
}

html[data-app-theme="light"] .automation-proposal-bank-error-source span {
  color: #75888e;
}

html[data-app-theme="light"] .automation-proposal-bank-error-source strong {
  color: #263f46;
}

@media (max-width: 560px) {
  .automation-proposal-bank-error-popup {
    padding: 14px;
  }

  .automation-proposal-bank-error-card {
    padding: 24px 19px 19px;
    border-radius: 18px;
  }

  .automation-proposal-bank-error-source {
    align-items: flex-start;
    flex-direction: column;
  }

  .automation-proposal-bank-error-source strong {
    text-align: left;
  }
}

/* =====================================================================
   V126 — POPUP CENTRAL DE SUCESSO / FORMALIZAÇÃO
   ===================================================================== */
.automation-proposal-bank-success-popup {
  position: fixed;
  inset: 0;
  z-index: 40001 !important;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(1, 10, 13, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.automation-proposal-bank-success-popup.is-open {
  display: grid;
  animation: automationBankSuccessBackdropIn .16s ease-out both;
}

.automation-proposal-bank-success-card {
  position: relative;
  width: min(560px, 94vw);
  overflow: hidden;
  padding: 28px 28px 23px;
  border: 1px solid rgba(70, 229, 165, .34);
  border-radius: 21px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 176, 80, .14), transparent 38%),
    linear-gradient(180deg, #0d2725, #0a1d1d);
  box-shadow:
    0 34px 95px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(255,255,255,.018) inset,
    inset 0 1px 0 rgba(255,255,255,.035);
  animation: automationBankSuccessCardIn .20s cubic-bezier(.2,.8,.2,1) both;
}

.automation-proposal-bank-success-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #38e39b, #70f0ba 48%, rgba(56,227,155,0));
}

.automation-proposal-bank-success-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  color: rgba(229, 241, 242, .72);
  background: rgba(255,255,255,.035);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.automation-proposal-bank-success-close:hover {
  color: #fff;
  border-color: rgba(80, 229, 171, .30);
  background: rgba(56, 227, 155, .08);
}

.automation-proposal-bank-success-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border: 1px solid rgba(70, 229, 165, .38);
  border-radius: 15px;
  color: #5cedb3;
  background: rgba(0, 176, 80, .10);
  box-shadow: 0 0 32px rgba(0, 176, 80, .10);
  font-size: 23px;
  font-weight: 900;
}

.automation-proposal-bank-success-copy {
  text-align: center;
}

.automation-proposal-bank-success-copy small {
  display: block;
  margin-bottom: 5px;
  color: #54e7ad;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
}

.automation-proposal-bank-success-copy h3 {
  margin: 0;
  color: #f3fffa;
  font-size: 21px;
  font-weight: 830;
  letter-spacing: -.02em;
}

.automation-proposal-bank-success-copy > p {
  margin: 8px 0 0;
  color: rgba(200, 223, 218, .72);
  font-size: 10px;
  font-weight: 650;
}

.automation-proposal-bank-success-link-wrap {
  margin-top: 20px;
  padding: 14px 15px;
  border: 1px solid rgba(70, 229, 165, .20);
  border-radius: 14px;
  background: rgba(0, 176, 80, .055);
  text-align: left;
}

.automation-proposal-bank-success-link-wrap > span {
  display: block;
  margin-bottom: 7px;
  color: rgba(91, 225, 171, .76);
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .09em;
}

.automation-proposal-bank-success-link-wrap > a {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #d9fff0;
  font-size: 10px;
  font-weight: 720;
  line-height: 1.45;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-proposal-bank-success-link-wrap > a:hover {
  color: #66f0b8;
  text-decoration: underline;
}

.automation-proposal-bank-success-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 14px;
}

.automation-proposal-bank-success-open,
.automation-proposal-bank-success-copy-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(70, 229, 165, .30);
  border-radius: 12px;
  color: #eafff6;
  background: rgba(0, 176, 80, .10);
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.automation-proposal-bank-success-open:hover,
.automation-proposal-bank-success-copy-button:hover {
  background: rgba(0, 176, 80, .16);
  border-color: rgba(70, 229, 165, .46);
}

.automation-proposal-bank-success-confirm {
  width: 100%;
  min-height: 43px;
  margin-top: 9px;
  border: 1px solid rgba(70, 229, 165, .44);
  border-radius: 12px;
  color: #062119;
  background: linear-gradient(180deg, #63e7b0, #3bd393);
  box-shadow:
    0 9px 24px rgba(0, 151, 83, .20),
    inset 0 1px 0 rgba(255,255,255,.16);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.automation-proposal-bank-success-confirm:hover {
  filter: brightness(1.05);
}

.automation-proposal-bank-success-confirm:focus-visible,
.automation-proposal-bank-success-close:focus-visible,
.automation-proposal-bank-success-copy-button:focus-visible,
.automation-proposal-bank-success-open:focus-visible {
  outline: 2px solid rgba(92, 237, 179, .82);
  outline-offset: 3px;
}

@keyframes automationBankSuccessBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes automationBankSuccessCardIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

html[data-app-theme="light"] .automation-proposal-bank-success-popup {
  background: rgba(28, 43, 51, .38);
}

html[data-app-theme="light"] .automation-proposal-bank-success-card {
  border-color: rgba(31, 153, 102, .26);
  background:
    radial-gradient(circle at 12% 0%, rgba(49, 188, 127, .08), transparent 38%),
    #ffffff;
  box-shadow:
    0 28px 80px rgba(31, 47, 57, .24),
    0 3px 14px rgba(31, 47, 57, .08);
}

html[data-app-theme="light"] .automation-proposal-bank-success-close {
  color: #60737a;
  border-color: #dce5e7;
  background: #f7fafb;
}

html[data-app-theme="light"] .automation-proposal-bank-success-icon {
  color: #168355;
  border-color: rgba(22, 131, 85, .24);
  background: #effaf5;
}

html[data-app-theme="light"] .automation-proposal-bank-success-copy small {
  color: #168355;
}

html[data-app-theme="light"] .automation-proposal-bank-success-copy h3 {
  color: #173c32;
}

html[data-app-theme="light"] .automation-proposal-bank-success-copy > p {
  color: #60776f;
}

html[data-app-theme="light"] .automation-proposal-bank-success-link-wrap {
  border-color: #cae6d8;
  background: #f2faf6;
}

html[data-app-theme="light"] .automation-proposal-bank-success-link-wrap > span {
  color: #378d69;
}

html[data-app-theme="light"] .automation-proposal-bank-success-link-wrap > a {
  color: #1b674c;
}

html[data-app-theme="light"] .automation-proposal-bank-success-open,
html[data-app-theme="light"] .automation-proposal-bank-success-copy-button {
  color: #176347;
  border-color: #b9dccd;
  background: #eef8f3;
}

@media (max-width: 560px) {
  .automation-proposal-bank-success-popup {
    padding: 14px;
  }

  .automation-proposal-bank-success-card {
    padding: 24px 19px 19px;
    border-radius: 18px;
  }

  .automation-proposal-bank-success-actions {
    grid-template-columns: 1fr;
  }
}



/* V141 — IN100 continua internamente no fluxo, mas nunca é exibida ao usuário. */
.automation-in100-section,
.automation-in100-section[hidden],
.automation-in100-card {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}


/* =====================================================================
   V144 — QUALI NOVO: LAYOUT COMPACTO + DROPDOWN PADRÃO CORBAN
   ===================================================================== */

.automation-proposal-novo-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 13px;
  padding: 15px;
  overflow: visible;
  border: 1px solid rgba(57, 214, 166, .20);
  border-radius: 16px;
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(0,176,80,.055), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.008)),
    rgba(6,22,29,.56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 28px rgba(0,0,0,.08);
}

.automation-proposal-novo-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(300px, 2.2fr)
    minmax(105px, .68fr)
    minmax(105px, .68fr)
    minmax(165px, 1fr);
  gap: 12px;
  align-items: end;
}

.automation-proposal-novo-grid .automation-proposal-edit-field {
  min-width: 0;
}

.automation-proposal-novo-table {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 120 !important;
}

.automation-proposal-novo-table > span {
  color: rgba(124,224,182,.82) !important;
}

.automation-proposal-novo-table .automation-proposal-table-select,
.automation-proposal-novo-table .corban-employee-select {
  z-index: 130 !important;
}

.automation-proposal-novo-table .corban-employee-select.is-open {
  z-index: 6000 !important;
}

.automation-proposal-novo-table .corban-employee-select-menu {
  z-index: 6100 !important;
  max-height: min(330px, 44vh) !important;
}

.automation-proposal-novo-meta input[readonly] {
  text-align: center;
  color: #d9fff0 !important;
  font-weight: 820 !important;
}

.automation-proposal-novo-installment input {
  border-color: rgba(0,176,80,.32) !important;
  background:
    linear-gradient(180deg, rgba(0,176,80,.075), rgba(255,255,255,.018)),
    rgba(9,34,37,.90) !important;
  color: #f4fffa !important;
  font-weight: 820 !important;
}

.automation-proposal-novo-installment input:focus {
  border-color: rgba(67,238,171,.56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 4px rgba(0,176,80,.07),
    0 10px 20px rgba(0,0,0,.10) !important;
}

.automation-proposal-novo-hint {
  min-height: 25px;
  display: flex;
  align-items: center;
  padding: 0 2px;
  color: rgba(150,185,192,.54);
  font-size: 8px;
  font-weight: 620;
}

.automation-proposal-novo-hint span::before {
  content: "•";
  margin-right: 7px;
  color: rgba(66,231,168,.72);
}

.automation-proposal-novo-result:empty {
  display: none;
}

.automation-proposal-novo-result .automation-proposal-calculation {
  margin-top: 0 !important;
}

.automation-portability-section:has(.automation-proposal-novo-card) {
  overflow: visible !important;
}

.automation-portability-section:has(.automation-proposal-novo-table .corban-employee-select.is-open) {
  position: relative !important;
  z-index: 9500 !important;
  overflow: visible !important;
}

@media (max-width: 1120px) {
  .automation-proposal-novo-grid {
    grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(110px, 1fr));
  }
}

@media (max-width: 860px) {
  .automation-proposal-novo-grid {
    grid-template-columns: 1fr 1fr;
  }

  .automation-proposal-novo-table {
    grid-column: span 2;
  }
}

html[data-app-theme="light"] .automation-proposal-novo-card {
  border-color: rgba(34,154,101,.18);
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(0,176,80,.045), transparent 60%),
    #fff;
}

html[data-app-theme="light"] .automation-proposal-novo-hint {
  color: rgba(62,91,96,.62);
}

html[data-app-theme="light"] .automation-proposal-novo-meta input[readonly] {
  color: #17633f !important;
}

html[data-app-theme="light"] .automation-proposal-novo-installment input {
  color: #173d31 !important;
  border-color: rgba(0,176,80,.25) !important;
  background: rgba(0,176,80,.035) !important;
}


/* =====================================================================
   V153 — QUALIBANK / PORTABILIDADE PURA
   ===================================================================== */

.automation-proposal-port-shell {
  display:grid;
  gap:14px;
}

.automation-proposal-port-contracts {
  display:grid;
  gap:10px;
}

.automation-proposal-port-editor {
  position:relative;
  z-index:2;
  display:grid;
  gap:13px;
  padding:15px;
  border:1px solid rgba(57,214,166,.18);
  border-radius:16px;
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(0,176,80,.05), transparent 60%),
    rgba(6,22,29,.58);
  overflow:visible;
}

.automation-proposal-port-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:end;
}

.automation-proposal-port-grid .automation-proposal-origin-bank-field,
.automation-proposal-port-grid .automation-proposal-port-table-field {
  grid-column:span 2;
}

.automation-proposal-port-rate-field {
  z-index:120;
}

.automation-proposal-port-explainer {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:9px 11px;
  border:1px solid rgba(57,214,166,.12);
  border-radius:11px;
  background:rgba(0,176,80,.035);
}

.automation-proposal-port-explainer span {
  flex:0 0 auto;
  color:#55e2a8;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}

.automation-proposal-port-explainer strong {
  color:rgba(220,247,238,.80);
  font-size:8.5px;
  font-weight:650;
}

.automation-proposal-port-empty-selection {
  display:grid;
  place-items:center;
  gap:5px;
  min-height:110px;
  padding:18px;
  border:1px dashed rgba(70,152,159,.20);
  border-radius:14px;
  color:rgba(166,196,201,.58);
  text-align:center;
}

.automation-proposal-port-empty-selection strong {
  color:rgba(215,238,238,.78);
  font-size:11px;
}

.automation-proposal-port-empty-selection small {
  font-size:8px;
}

.automation-proposal-port-result .automation-proposal-calculation-grid article.is-highlight strong {
  color:#52e1a7 !important;
}

.automation-proposal-port-note {
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-top:1px solid rgba(75,147,154,.10);
}

.automation-proposal-port-note span {
  padding:4px 7px;
  border:1px solid rgba(82,225,167,.23);
  border-radius:999px;
  color:#55e2a8;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.automation-proposal-port-note strong {
  color:rgba(200,224,224,.72);
  font-size:8px;
  font-weight:600;
}

.automation-port-only-section,
.automation-port-only-section .automation-proposal-port-editor {
  overflow:visible !important;
}

.automation-port-only-section:has(.corban-employee-select.is-open) {
  position:relative !important;
  z-index:9500 !important;
}

@media (max-width:960px) {
  .automation-proposal-port-grid {
    grid-template-columns:1fr 1fr;
  }
  .automation-proposal-port-grid .automation-proposal-origin-bank-field,
  .automation-proposal-port-grid .automation-proposal-port-table-field {
    grid-column:span 2;
  }
}

html[data-app-theme="light"] .automation-proposal-port-editor {
  border-color:rgba(34,154,101,.16);
  background:#fff;
}

html[data-app-theme="light"] .automation-proposal-port-explainer {
  background:rgba(0,176,80,.035);
}

html[data-app-theme="light"] .automation-proposal-port-explainer strong,
html[data-app-theme="light"] .automation-proposal-port-note strong {
  color:#49676a;
}


/* =====================================================================
   WORKERS / ORQUESTRADOR
   ===================================================================== */

.workers-workspace {
  padding: 28px;
}

.workers-commandbar,
.workers-list-card,
.workers-create-panel,
.workers-pairing-result,
.workers-stats article {
  border: 1px solid var(--app-border);
  background: var(--app-panel);
  box-shadow: var(--app-shadow);
}

.workers-commandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-radius: 22px;
}

.workers-commandbar > div:first-child {
  display: grid;
  gap: 5px;
}

.workers-kicker,
.workers-create-head span,
.workers-list-head span,
.workers-pairing-result span,
.workers-stats article span,
.worker-card-metric span {
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--app-muted);
}

.workers-commandbar strong {
  font-size: 22px;
}

.workers-commandbar small,
.workers-list-head small,
.workers-pairing-result small,
.worker-card-identity small {
  color: var(--app-muted);
}

.workers-command-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.workers-refresh,
.workers-primary,
.workers-secondary,
.worker-card-actions button,
.workers-pairing-result button,
.workers-create-head button {
  border: 1px solid var(--app-border);
  border-radius: 12px;
  min-height: 40px;
  padding: 0 14px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  color: var(--app-text);
  background: var(--app-panel-soft);
}

.workers-refresh {
  width: 42px;
  padding: 0;
  display: grid;
  place-items: center;
}

.workers-refresh svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
}

.workers-primary {
  background: var(--app-accent);
  border-color: transparent;
  color: #04110d;
}

.workers-primary span {
  font-size: 18px;
  margin-right: 5px;
}

.workers-secondary {
  background: transparent;
}

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

.workers-stats article {
  border-radius: 18px;
  padding: 18px 20px;
  display: grid;
  gap: 5px;
  min-height: 108px;
  align-content: center;
}

.workers-stats article strong {
  font-size: 27px;
  line-height: 1;
}

.workers-stats article small {
  color: var(--app-muted);
  font-size: 12px;
}

.workers-create-panel {
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
}

.workers-create-head,
.workers-list-head,
.workers-pairing-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.workers-create-head > div,
.workers-list-head > div,
.workers-pairing-result > div {
  display: grid;
  gap: 4px;
}

.workers-create-head strong,
.workers-list-head strong {
  font-size: 16px;
}

.workers-create-head button {
  width: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 22px;
}

.workers-create-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1.2fr) minmax(150px, .6fr);
  gap: 12px;
  margin-top: 18px;
}

.workers-create-grid label {
  display: grid;
  gap: 7px;
}

.workers-create-grid label > span,
.workers-capabilities > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--app-muted);
}

.workers-create-grid input,
.workers-create-grid select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--app-border);
  background: var(--app-input);
  color: var(--app-text);
  border-radius: 12px;
  padding: 0 12px;
  font: inherit;
}

.workers-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}

.workers-capabilities label {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-panel-soft);
  font-size: 12px;
  cursor: pointer;
}

.workers-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.workers-pairing-result {
  margin-bottom: 16px;
  padding: 18px 20px;
  border-radius: 18px;
}

.workers-pairing-result strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  letter-spacing: .04em;
}

.workers-list-card {
  border-radius: 22px;
  padding: 20px;
}

.workers-list-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--app-border);
}

.workers-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.worker-card {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) 90px 100px minmax(180px, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--app-border);
  background: var(--app-panel-soft);
  border-radius: 16px;
  padding: 14px 16px;
}

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

.worker-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--app-muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-muted) 14%, transparent);
}

.worker-status-dot.is-online {
  background: var(--app-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 14%, transparent);
}

.worker-status-dot.is-pending {
  background: var(--app-violet);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-violet) 14%, transparent);
}

.worker-card-identity {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.worker-card-name {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.worker-card-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worker-status {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  color: var(--app-muted);
  white-space: nowrap;
}

.worker-status.is-online {
  color: var(--app-accent);
  border-color: color-mix(in srgb, var(--app-accent) 35%, var(--app-border));
}

.worker-card-metric {
  display: grid;
  gap: 4px;
}

.worker-card-metric strong {
  font-size: 14px;
}

.worker-capability-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.worker-capability-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  background: var(--app-panel);
  font-size: 10px;
  font-weight: 700;
}

.worker-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.worker-card-actions button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 11px;
}

.worker-card-actions .danger-soft {
  color: #ff9a9a;
}

.worker-card-actions .success-soft {
  color: var(--app-accent);
}

.workers-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  text-align: center;
  color: var(--app-muted);
}

.workers-empty strong {
  color: var(--app-text);
}

@media (max-width: 1180px) {
  .workers-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .worker-card {
    grid-template-columns: minmax(220px, 1fr) 80px 90px;
  }

  .worker-capability-chips,
  .worker-card-actions {
    grid-column: span 3;
  }

  .worker-card-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .workers-workspace {
    padding: 14px;
  }

  .workers-commandbar,
  .workers-create-head,
  .workers-list-head,
  .workers-pairing-result {
    align-items: flex-start;
    flex-direction: column;
  }

  .workers-command-actions {
    width: 100%;
  }

  .workers-primary {
    flex: 1;
  }

  .workers-stats {
    grid-template-columns: 1fr 1fr;
  }

  .workers-create-grid,
  .worker-card {
    grid-template-columns: 1fr;
  }

  .worker-capability-chips,
  .worker-card-actions {
    grid-column: 1;
  }
}