/*
  ZapMan Pro UI
  Last-mile visual layer only. It intentionally avoids changing IDs,
  attributes, layout semantics or JavaScript hooks.
*/

:root {
  --pro-bg: #081114;
  --pro-bg-2: #0b1519;
  --pro-shell: #0d171b;
  --pro-surface: #101c21;
  --pro-surface-2: #14242a;
  --pro-surface-3: #182b31;
  --pro-line: rgba(157, 177, 169, 0.15);
  --pro-line-strong: rgba(157, 177, 169, 0.25);
  --pro-text: #edf5f1;
  --pro-text-2: #b7c6bf;
  --pro-muted: #7e9189;
  --pro-faint: #53665e;
  --pro-green: #20df78;
  --pro-green-2: #14b765;
  --pro-cyan: #4bbdde;
  --pro-amber: #e8b923;
  --pro-rose: #ff7373;
  --pro-violet: #a998ff;
  --pro-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --pro-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.24);
  --pro-shadow-lg: 0 22px 54px rgba(0, 0, 0, 0.34);
  --pro-focus: 0 0 0 3px rgba(32, 223, 120, 0.18);
  --pro-radius: 8px;
  --pro-radius-lg: 10px;
  --radius: var(--pro-radius);
  --radius-sm: var(--pro-radius);
  --radius-lg: var(--pro-radius-lg);
  --bg-deep: var(--pro-bg);
  --bg-mid: var(--pro-bg-2);
  --panel: rgba(16, 28, 33, 0.92);
  --border: var(--pro-line);
  --border-strong: var(--pro-line-strong);
  --text: var(--pro-text);
  --text-soft: var(--pro-text-2);
  --muted: var(--pro-muted);
  --blue: var(--pro-green);
  --blue-bright: var(--pro-green);
  --blue-glow: rgba(32, 223, 120, 0.22);
  --ok: var(--pro-green);
  --danger: var(--pro-rose);
  --warn: var(--pro-amber);
  --brand-bg-deep: var(--pro-bg);
  --brand-bg-mid: var(--pro-bg-2);
  --brand-panel: var(--pro-surface);
  --brand-green: var(--pro-green);
  --brand-green-dim: var(--pro-green-2);
  --brand-green-glow: rgba(32, 223, 120, 0.22);
  --brand-yellow: var(--pro-amber);
  --text-hi: var(--pro-text);
  --text-mid: var(--pro-text-2);
  --text-lo: var(--pro-muted);
  --brand-border: var(--pro-line);
}

html {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  color: var(--pro-text);
  background: linear-gradient(180deg, #091417 0%, #071013 52%, #0a1417 100%) !important;
  font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "kern", "liga", "tnum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
  display: none !important;
}

::selection {
  color: #04100a;
  background: rgba(32, 223, 120, 0.78);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #081114;
}

::-webkit-scrollbar-thumb {
  border: 2px solid #081114;
  border-radius: 999px;
  background: #40564d;
}

::-webkit-scrollbar-thumb:hover {
  background: #60766d;
}

.layout {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(32, 223, 120, 0.035), transparent 32%),
    linear-gradient(180deg, var(--pro-bg), var(--pro-bg-2));
}

.layout-main {
  background: transparent;
}

.content {
  padding: clamp(1rem, 1.6vw, 1.65rem) !important;
}

.topbar,
.subbar {
  display: none !important;
}

body[data-active-view="dashboard"] .content {
  padding-top: clamp(1.25rem, 1.7vw, 1.85rem) !important;
}

.view.is-active {
  width: 100%;
}

.layout-main,
.view-stack,
.view,
.ops-page,
.ops-two-col,
.ops-panel,
.ful-root,
.ful-layout,
.ful-table-shell,
.ful-detail,
.widget,
.fb-modern,
.fb-builder,
.fb-library {
  min-width: 0;
  max-width: 100%;
}

#view-dashboard.view.is-active,
#view-followup-labels.view.is-active,
#view-followup-session.view.is-active,
#view-followup-webhook.view.is-active,
#view-flow-builder.view.is-active,
#view-maturador.view.is-active,
#view-live.view.is-active,
#view-respostas-prontas.view.is-active {
  max-width: none !important;
}

/* Shell */
.sidebar {
  width: var(--sidebar-w);
  padding: 1rem 0.8rem;
  background: linear-gradient(180deg, rgba(12, 22, 26, 0.98), rgba(7, 15, 18, 0.99)) !important;
  border-right: 1px solid rgba(157, 177, 169, 0.13) !important;
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.12);
}

.sidebar-top {
  min-height: 4.4rem;
  padding: 0.15rem 0.15rem 1rem !important;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid rgba(157, 177, 169, 0.13);
}

.sidebar-brand {
  min-width: 0;
  gap: 0.75rem;
}

.sidebar-brand .logo,
.logo {
  width: 44px;
  height: 44px;
  border-radius: 8px !important;
  border: 1px solid rgba(32, 223, 120, 0.24);
  background: #0a1417;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 8px 24px rgba(32, 223, 120, 0.08);
}

.sidebar-brand h1 {
  gap: 0.12rem;
  color: var(--pro-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  letter-spacing: 0 !important;
}

.sidebar-brand h1 span:last-child,
.sidebar-brand .sub {
  color: var(--pro-text-2) !important;
  font-weight: 500;
}

.btn-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px !important;
  color: var(--pro-text-2);
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--pro-line) !important;
}

.btn-icon:hover {
  color: var(--pro-text);
  border-color: rgba(32, 223, 120, 0.32) !important;
  background: rgba(32, 223, 120, 0.08) !important;
}

.sidebar-label {
  margin: 1.15rem 0 0.55rem !important;
  padding: 0 0.35rem;
  color: var(--pro-faint) !important;
  font-size: 0.64rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}

.sidebar-nav {
  gap: 0.32rem !important;
}

button.nav-side,
a.nav-side {
  min-height: 44px;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--pro-text-2) !important;
  font-weight: 650;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

button.nav-side:hover,
a.nav-side:hover {
  color: var(--pro-text) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(157, 177, 169, 0.12) !important;
}

button.nav-side.active,
a.nav-side.active,
button.nav-side[aria-current="page"],
a.nav-side[aria-current="page"] {
  color: var(--pro-text) !important;
  background: rgba(32, 223, 120, 0.105) !important;
  border-color: rgba(32, 223, 120, 0.27) !important;
  box-shadow: inset 3px 0 0 var(--pro-green), var(--pro-shadow-sm);
}

button.nav-side[data-nav="ptt"],
button.nav-side[data-nav="simulador"] {
  display: none !important;
}

.nav-ic {
  color: color-mix(in srgb, currentColor 82%, var(--pro-green) 18%);
  opacity: 0.96;
}

.sidebar--collapsed {
  width: 82px !important;
}

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

.sidebar-foot {
  border: 1px solid rgba(157, 177, 169, 0.1) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: var(--pro-muted) !important;
}

/* Top areas, preserved for non-dashboard views */
.topbar {
  height: 60px;
  background: rgba(8, 17, 20, 0.84) !important;
  border-bottom: 1px solid var(--pro-line) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
}

.topbar-title strong {
  color: var(--pro-text);
  font-size: 0.98rem;
}

.topbar-title span {
  color: var(--pro-muted);
}

.topbar-badge,
.pill,
.badge,
[class$="-badge"],
[class*="-badge "] {
  border-radius: 999px !important;
  border: 1px solid var(--pro-line) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--pro-text-2) !important;
}

.topbar-badge {
  color: #bdf8d3 !important;
  border-color: rgba(32, 223, 120, 0.27) !important;
  background: rgba(32, 223, 120, 0.08) !important;
}

.subbar {
  min-height: 62px;
  background: rgba(11, 21, 25, 0.82) !important;
  border-bottom: 1px solid var(--pro-line) !important;
}

.subbar label {
  color: var(--pro-muted) !important;
}

/* Inputs */
input,
textarea,
select,
.ops-input,
.ful-search,
.ful-input,
.ful-select,
.ful-textarea {
  border-radius: 8px !important;
  border: 1px solid var(--pro-line) !important;
  background: rgba(5, 12, 15, 0.72) !important;
  color: var(--pro-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--pro-muted) 78%, transparent) !important;
}

input:focus,
textarea:focus,
select:focus,
.ops-input:focus,
.ful-search:focus {
  outline: none !important;
  border-color: rgba(32, 223, 120, 0.54) !important;
  box-shadow: var(--pro-focus), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--pro-green);
}

/* Buttons */
button,
.btn,
.fb-btn,
.ful-btn {
  letter-spacing: 0 !important;
  font-family: inherit;
}

button.primary,
.btn-primary,
.btn.primary,
[data-primary],
.ful-btn-primary {
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--pro-green) 62%, black) !important;
  background: linear-gradient(180deg, var(--pro-green), var(--pro-green-2)) !important;
  color: #03120a !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.20) inset, 0 10px 22px rgba(20, 183, 101, 0.18) !important;
}

button.primary:hover,
.btn-primary:hover,
.btn.primary:hover,
[data-primary]:hover,
.ful-btn-primary:hover {
  filter: none !important;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 14px 28px rgba(20, 183, 101, 0.24) !important;
}

button.ghost,
.btn-secondary,
.ghost,
.ful-btn,
.fb-btn {
  border-radius: 8px !important;
  border: 1px solid var(--pro-line) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--pro-text-2) !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

button.ghost:hover,
.ghost:hover,
.ful-btn:hover,
.fb-btn:hover {
  color: var(--pro-text) !important;
  border-color: rgba(32, 223, 120, 0.30) !important;
  background: rgba(32, 223, 120, 0.08) !important;
  transform: translateY(-1px);
}

button.danger,
.btn-danger,
.btn.danger,
[data-danger],
.fb-btn.danger {
  border-radius: 8px !important;
  border-color: rgba(255, 115, 115, 0.36) !important;
  background: rgba(255, 115, 115, 0.09) !important;
  color: #ffb5b5 !important;
}

button:disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none !important;
}

button:focus-visible,
.btn:focus-visible,
.nav-side:focus-visible,
.fb-btn:focus-visible,
.ful-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--pro-focus) !important;
}

/* Common cards */
.widget,
.panel,
.card,
.setting-card,
.preview,
.feed,
.ops-panel,
.ful-table-shell,
.ful-detail,
.fu-card,
.wa-session-card,
.seq-row,
details.widget {
  border-radius: 8px !important;
  border: 1px solid var(--pro-line) !important;
  background: linear-gradient(180deg, rgba(18, 31, 36, 0.88), rgba(12, 22, 26, 0.90)) !important;
  box-shadow: var(--pro-shadow-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.widget {
  padding: clamp(1rem, 1.5vw, 1.35rem) !important;
}

.widget-head,
.ops-panel-head,
.ful-detail-head {
  border-bottom: 1px solid rgba(157, 177, 169, 0.10);
  padding-bottom: 0.75rem;
}

.widget h2,
.ops-panel-head h2,
.ful-title,
.fu-title {
  color: var(--pro-text) !important;
  letter-spacing: 0 !important;
}

.widget h2::before {
  background: var(--pro-green) !important;
}

.sub,
.hint,
.ops-footnote,
.ful-sub,
.ful-muted {
  color: var(--pro-muted) !important;
}

/* Operations dashboard */
.ops-page {
  max-width: 1500px !important;
  margin-inline: auto;
  gap: 1rem !important;
  container-type: inline-size;
}

.ops-hero {
  align-items: center !important;
  padding: 0.2rem 0 0.15rem !important;
}

.ops-hero-title {
  font-size: clamp(1.55rem, 2.4vw, 2.35rem) !important;
  line-height: 1.05;
  color: var(--pro-text) !important;
}

.ops-hero-sub {
  max-width: 56rem !important;
  color: var(--pro-muted) !important;
}

.ops-hero-actions {
  align-items: center;
}

.ops-live {
  border: 1px solid rgba(32, 223, 120, 0.25);
  border-radius: 999px;
  background: rgba(32, 223, 120, 0.09);
  color: #bdf8d3 !important;
  padding: 0.42rem 0.68rem;
}

.ops-live-dot,
.dot.on,
.status-dot.is-online,
.fuSessionDot.is-on {
  background: var(--pro-green) !important;
  box-shadow: 0 0 0 3px rgba(32, 223, 120, 0.12) !important;
}

.ops-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 0.75rem !important;
}

@media (min-width: 1180px) {
  .ops-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.ops-card {
  min-height: 112px !important;
  padding: 0.9rem !important;
  border-radius: 8px !important;
  border-color: var(--pro-line) !important;
  background: linear-gradient(180deg, rgba(20, 36, 42, 0.90), rgba(12, 22, 26, 0.94)) !important;
  box-shadow: var(--pro-shadow-sm) !important;
}

.ops-card::before {
  left: 0.7rem !important;
  right: 0.7rem !important;
  top: 0 !important;
  bottom: auto !important;
  width: auto !important;
  height: 2px !important;
  border-radius: 0 0 4px 4px !important;
  background: var(--ops-accent, var(--pro-green)) !important;
  opacity: 0.82 !important;
}

.ops-card-ic {
  position: static !important;
  display: inline-grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ops-accent, var(--pro-green)) 12%, transparent);
  color: var(--ops-accent, var(--pro-green));
  font-size: 0.85rem !important;
  opacity: 1 !important;
}

.ops-card-label {
  color: var(--pro-muted) !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

.ops-card-value {
  margin-top: 0.28rem !important;
  color: var(--pro-text) !important;
  font-size: clamp(1.45rem, 2vw, 2rem) !important;
  font-weight: 800 !important;
}

.ops-card-hint {
  color: var(--pro-faint) !important;
  font-size: 0.72rem !important;
}

.ops-card--neutral { --ops-accent: #93a7a0; }
.ops-card--blue { --ops-accent: var(--pro-cyan); }
.ops-card--green { --ops-accent: var(--pro-green); }
.ops-card--red { --ops-accent: var(--pro-rose); }
.ops-card--amber { --ops-accent: var(--pro-amber); }
.ops-card--violet { --ops-accent: var(--pro-violet); }
.ops-card--teal { --ops-accent: #37d7bd; }

.ops-two-col {
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.75fr) !important;
  gap: 1rem !important;
}

.ops-panel {
  padding: 1rem !important;
}

.ops-panel-tools {
  gap: 0.5rem !important;
}

.ops-queue-stats {
  gap: 0.55rem !important;
}

.ops-queue-stats > div {
  border-radius: 8px;
  border: 1px solid rgba(157, 177, 169, 0.10);
  background: rgba(5, 12, 15, 0.42);
  padding: 0.72rem 0.75rem;
}

.ops-q-n {
  color: var(--pro-text) !important;
  font-size: 1.35rem !important;
}

.ops-q-l {
  color: var(--pro-muted) !important;
  font-weight: 750;
}

.ops-table-wrap,
.ful-table-scroll {
  border-radius: 8px !important;
  border: 1px solid rgba(157, 177, 169, 0.12) !important;
  background: rgba(5, 12, 15, 0.40) !important;
}

.ops-table,
.ful-table {
  font-size: 0.78rem;
}

.ops-table th,
.ful-table th {
  background: rgba(10, 19, 23, 0.96) !important;
  color: var(--pro-muted) !important;
  border-bottom-color: rgba(157, 177, 169, 0.16) !important;
}

.ops-table td,
.ful-table td {
  border-bottom-color: rgba(157, 177, 169, 0.10) !important;
}

.ops-table tr:hover td,
.ful-row:hover,
.ful-row.is-selected {
  background: rgba(32, 223, 120, 0.055) !important;
}

.ops-icon-btn {
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--pro-text-2) !important;
}

.ops-log {
  border-radius: 8px !important;
  border-color: rgba(157, 177, 169, 0.12) !important;
  background: #071013 !important;
  color: var(--pro-text-2);
}

.ops-log-group-title {
  color: var(--pro-muted) !important;
}

.ops-log-line--ok { color: #9bf4bd !important; }
.ops-log-line--info { color: #91d8ea !important; }
.ops-log-line--warn { color: #f3cf66 !important; }
.ops-log-line--err { color: #ffaaaa !important; }

.ops-sess-row {
  border-radius: 8px !important;
  border-color: rgba(157, 177, 169, 0.12) !important;
  background: rgba(5, 12, 15, 0.44) !important;
}

.ops-load-wrap {
  border-color: rgba(157, 177, 169, 0.12) !important;
  background: #071013 !important;
}

.ops-load-bar--ok {
  background: var(--pro-green) !important;
}

.ops-load-bar--mid {
  background: var(--pro-amber) !important;
}

.ops-load-bar--hot {
  background: var(--pro-rose) !important;
}

/* WhatsApp sessions and classic forms */
.wa-session-grid {
  gap: 0.75rem !important;
}

.wa-session-card {
  padding: 1rem !important;
}

.wa-session-card.is-active {
  border-color: rgba(32, 223, 120, 0.36) !important;
  box-shadow: inset 3px 0 0 var(--pro-green), var(--pro-shadow-sm) !important;
}

.wa-session-card .title,
.ful-name {
  color: var(--pro-text) !important;
}

.wa-session-card .idcode,
.wa-session-stats,
.ful-phone {
  color: var(--pro-muted) !important;
}

.preview {
  background: #071013 !important;
}

.typed {
  color: var(--pro-text) !important;
}

.toggle {
  color: var(--pro-text-2) !important;
}

/* Follow-up labels */
.ful-root {
  max-width: 1500px !important;
  margin-inline: auto;
}

.ful-kpis {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  gap: 0.75rem !important;
}

.ful-kpi {
  min-height: 104px !important;
  border-radius: 8px !important;
  border-color: var(--pro-line) !important;
  background: linear-gradient(180deg, rgba(20, 36, 42, 0.90), rgba(12, 22, 26, 0.94)) !important;
  box-shadow: var(--pro-shadow-sm) !important;
}

.ful-kpi-label,
.ful-section-title {
  color: var(--pro-muted) !important;
}

.ful-kpi-value {
  color: var(--pro-text) !important;
}

.ful-toolbar {
  border-radius: 8px !important;
  border-color: var(--pro-line) !important;
  background: rgba(16, 28, 33, 0.78) !important;
}

.ful-chip {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--pro-text-2) !important;
}

.ful-chip.is-active,
.ful-chip.is-on,
.ful-tag.is-on {
  color: #bdf8d3 !important;
  border-color: rgba(32, 223, 120, 0.36) !important;
  background: rgba(32, 223, 120, 0.10) !important;
}

.ful-layout {
  gap: 1rem !important;
}

.ful-detail {
  position: sticky;
  top: 1rem;
}

.ful-status {
  border-radius: 999px !important;
  font-weight: 800 !important;
}

.ful-status--completed,
.ful-status--tracking,
.ful-status--sent {
  color: #bdf8d3 !important;
  background: rgba(32, 223, 120, 0.09) !important;
  border-color: rgba(32, 223, 120, 0.30) !important;
}

.ful-status--running,
.ful-status--scheduled,
.ful-status--queued,
.ful-status--retry {
  color: #aee7f5 !important;
  background: rgba(75, 189, 222, 0.10) !important;
  border-color: rgba(75, 189, 222, 0.28) !important;
}

.ful-status--failed {
  color: #ffb5b5 !important;
  background: rgba(255, 115, 115, 0.09) !important;
  border-color: rgba(255, 115, 115, 0.32) !important;
}

.ful-status--registered,
.ful-status--none,
.ful-status--filtered,
.ful-status--ignored {
  color: var(--pro-text-2) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--pro-line) !important;
}

.ful-raw,
pre,
code {
  border-color: rgba(157, 177, 169, 0.12) !important;
  background: #071013 !important;
  color: #d7e4de !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Follow-up session/webhook */
.fu-root {
  max-width: 1500px !important;
  margin-inline: auto;
}

.fu-card,
.fu-map-card,
.fu-log-card,
.fu-status-card,
.fu-drawer,
.fu-modal {
  border-radius: 8px !important;
  border-color: var(--pro-line) !important;
  background: linear-gradient(180deg, rgba(18, 31, 36, 0.88), rgba(12, 22, 26, 0.92)) !important;
}

.fu-pill,
.fu-tag,
.fu-badge {
  border-radius: 999px !important;
}

/* Flow builder stays light, but cleaner and less generic. */
#view-flow-builder.fb-modern-ready,
.fb-modern,
.fb-builder {
  background: #f5f7f8 !important;
}

#view-flow-builder.fb-modern-ready {
  border-color: rgba(17, 24, 39, 0.10) !important;
  border-radius: 8px !important;
}

.fb-library {
  background: #f5f7f8 !important;
}

.fb-topbar,
#view-flow-builder.fb-modern-ready .fb-topbar {
  background: #ffffff !important;
  border-bottom-color: #dbe2e6 !important;
}

.fb-flow-title {
  color: #172126 !important;
}

.fb-flow-meta,
.fb-autosave {
  color: #6c7a81 !important;
}

.fb-flow-select,
.fb-trigger-row input,
.fb-trigger-row select,
.fb-search input {
  border-radius: 8px !important;
  border-color: #d8e0e5 !important;
  background: #ffffff !important;
  color: #172126 !important;
}

.fb-btn.primary {
  background: var(--pro-green) !important;
  border-color: var(--pro-green) !important;
  color: #03120a !important;
}

.fb-btn.outline-success {
  color: #0b7d49 !important;
  border-color: #9adfb9 !important;
  background: #ffffff !important;
}

.fb-menu > summary,
.fb-menu-panel,
.fb-flow-card,
.fb-folder-card,
.fb-node,
.drawflow .drawflow-node {
  border-radius: 8px !important;
}

.fb-menu > summary {
  border-color: #d8e0e5 !important;
  background: #ffffff !important;
  color: #172126 !important;
}

.fb-menu[open] > summary {
  border-color: var(--pro-green) !important;
  box-shadow: 0 0 0 3px rgba(32, 223, 120, 0.16) !important;
}

.fb-menu-panel {
  border-color: #d8e0e5 !important;
  box-shadow: 0 22px 46px rgba(17, 24, 39, 0.15) !important;
}

.fb-folder-card,
.fb-flow-card {
  background: #ffffff !important;
  color: #172126 !important;
  border-color: #d8e0e5 !important;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06) !important;
}

.fb-folder-card:hover,
.fb-flow-card:hover,
.fb-flow-card.is-current {
  border-color: rgba(32, 223, 120, 0.62) !important;
  box-shadow: 0 18px 38px rgba(17, 24, 39, 0.10) !important;
}

.fb-folder-name,
.fb-flow-card strong,
.fb-flow-browser-head,
.fb-library-head h1 {
  color: #172126 !important;
}

.fb-flow-card span,
.fb-flow-card small,
.fb-flow-browser-head span,
.fb-library-head p {
  color: #6c7a81 !important;
}

.fb-empty-flow button {
  color: #0b7d49 !important;
}

.fb-canvas-shell {
  background:
    radial-gradient(circle at 1px 1px, rgba(127, 143, 152, 0.24) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, #f7f9fb 0%, #f2f5f7 100%) !important;
}

.fb-zoom {
  border-radius: 8px !important;
  border: 1px solid #d8e0e5 !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.10) !important;
}

/* Dense operational tables and misc modules */
table {
  font-variant-numeric: tabular-nums;
}

th {
  color: var(--pro-muted) !important;
}

tbody tr {
  transition: background 0.14s ease;
}

tbody tr:hover {
  background: rgba(32, 223, 120, 0.045);
}

.feed-row,
.seq-row {
  border-color: rgba(157, 177, 169, 0.12) !important;
}

.feed-dot {
  background: var(--pro-green) !important;
}

.ptt-banner.is-on {
  border-color: rgba(255, 115, 115, 0.30) !important;
  background: rgba(255, 115, 115, 0.08) !important;
  color: #ffb5b5 !important;
}

/* Maturador embedded panel */
.maturador-panel {
  display: grid;
  grid-template-rows: auto minmax(680px, 1fr);
  gap: 0.9rem;
  width: 100%;
  min-height: calc(100vh - 2rem);
}

.maturador-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--pro-line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(18, 31, 36, 0.88), rgba(12, 22, 26, 0.90));
  padding: 1rem;
}

.maturador-panel-head h1 {
  margin: 0;
  color: var(--pro-text);
  font-size: clamp(1.45rem, 2.2vw, 2.1rem);
  letter-spacing: 0;
}

.maturador-panel-head p {
  margin: 0.35rem 0 0;
  color: var(--pro-muted);
}

.maturador-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  border: 1px solid rgba(32, 223, 120, 0.30);
  border-radius: 8px;
  background: rgba(32, 223, 120, 0.08);
  color: #bdf8d3;
  padding: 0 0.85rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.maturador-open:hover {
  color: var(--pro-text);
  background: rgba(32, 223, 120, 0.14);
}

.maturador-frame {
  width: 100%;
  min-height: 680px;
  height: calc(100vh - 8.5rem);
  border: 1px solid var(--pro-line);
  border-radius: 8px;
  background: #f7f8fb;
}

@container (max-width: 920px) {
  .ops-two-col {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1180px) {
  .ops-two-col,
  .ful-layout {
    grid-template-columns: 1fr !important;
  }

  .ful-detail {
    position: static;
  }
}

@media (max-width: 900px) {
  .sidebar {
    width: 100% !important;
    padding: 0.75rem !important;
  }

  .sidebar-top {
    margin-bottom: 0.4rem;
  }

  .content {
    padding: 0.85rem !important;
  }

  .ops-hero,
  .ful-hero,
  .widget-head,
  .ops-panel-head {
    align-items: flex-start !important;
  }

  .ops-kpi-grid,
  .ful-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .ops-kpi-grid,
  .ful-kpis {
    grid-template-columns: 1fr !important;
  }

  .ops-card,
  .ful-kpi {
    min-height: auto !important;
  }

  .ops-hero-actions,
  .ful-hero-actions,
  .widget-actions,
  .ops-panel-tools {
    width: 100%;
    justify-content: stretch !important;
  }

  .ops-hero-actions > *,
  .ful-hero-actions > *,
  .widget-actions > *,
  .ops-panel-tools > * {
    min-width: 0;
  }
}

/* Responsive hardening across the single-page app */
@media (max-width: 1120px) {
  .ops-two-col,
  .ful-layout,
  .live-body,
  .live-body.has-info-panel {
    grid-template-columns: 1fr !important;
  }

  .ops-two-col > *,
  .ful-layout > * {
    min-width: 0 !important;
  }

  .ops-table-wrap,
  .ful-table-scroll {
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .ops-table {
    min-width: 760px;
  }

  .ful-table {
    min-width: 860px;
  }

  .live-info-panel,
  .live-rspp-drawer {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
  }

  .rspp-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .layout {
    flex-direction: column !important;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100% !important;
    flex-direction: column !important;
    max-height: min(48vh, 390px);
    overflow: auto;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(157, 177, 169, 0.13) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20);
  }

  .sidebar-top {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 3.7rem;
    padding-bottom: 0.7rem !important;
    background: linear-gradient(180deg, rgba(12, 22, 26, 0.98), rgba(12, 22, 26, 0.94));
  }

  .sidebar-label {
    margin: 0.85rem 0 0.42rem !important;
  }

  .sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem !important;
  }

  button.nav-side,
  a.nav-side {
    width: 100% !important;
    min-height: 40px;
    padding: 0.5rem 0.65rem !important;
  }

  .nav-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .content {
    width: 100%;
    min-width: 0;
  }

  .ops-hero,
  .ful-hero,
  .fb-library-head,
  .widget-head,
  .ops-panel-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ops-hero-actions,
  .ful-hero-actions,
  .fb-library-actions,
  .widget-actions,
  .ops-panel-tools {
    justify-content: flex-start !important;
  }

  .wa-session-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  }

  .wa-session-actions,
  .ops-btn-row,
  .rspp-toolbar {
    align-items: stretch !important;
  }

  .wa-session-actions > button,
  .ops-btn-row > button,
  .rspp-toolbar > button,
  .rspp-toolbar > input,
  .rspp-toolbar > select {
    flex: 1 1 12rem;
  }

  #view-flow-builder.fb-modern-ready,
  .fb-modern,
  .fb-builder,
  .fb-library {
    min-height: 72vh !important;
  }

  .fb-library {
    padding: 1rem !important;
  }

  .fb-folder-row,
  .fb-flow-cards {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    max-width: none !important;
  }

  .fb-topbar {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    padding: 0.9rem !important;
  }

  .fb-title-stack {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "meta"
      "config" !important;
  }

  .fb-flow-meta {
    justify-content: flex-start !important;
  }

  .fb-trigger-row {
    grid-template-columns: 1fr !important;
  }

  .fb-top-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
  }

  .fb-autosave {
    justify-self: start !important;
    white-space: normal !important;
  }

  .fb-menu-panel {
    max-height: min(70vh, 520px);
    overflow: auto;
  }
}

@media (max-width: 720px) {
  .sidebar {
    max-height: min(52vh, 430px);
    padding: 0.7rem !important;
  }

  .sidebar-brand h1 span:last-child {
    display: none;
  }

  .sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content {
    padding: 0.75rem !important;
  }

  .ops-hero-title,
  .ful-title {
    font-size: clamp(1.35rem, 8vw, 1.85rem) !important;
  }

  .ops-card,
  .ful-kpi,
  .widget,
  .ops-panel,
  .ful-table-shell,
  .ful-detail {
    padding: 0.85rem !important;
  }

  .ops-queue-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ful-toolbar,
  .rspp-toolbar,
  .row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ful-search,
  .rspp-search,
  .rspp-cat-filter,
  .ops-input,
  .row input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .row textarea,
  .row select {
    width: 100% !important;
    max-width: none !important;
  }

  .ful-filter-row,
  .fb-library-actions,
  .fb-top-actions,
  .widget-actions {
    width: 100%;
  }

  .fb-top-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .fb-flow-title {
    font-size: 1rem !important;
  }

  .fb-flow-select,
  .fb-trigger-row input,
  .fb-trigger-row select,
  .fb-search input {
    width: 100% !important;
  }

  .fb-menu-panel,
  .fb-config-menu .fb-menu-panel,
  .fb-flow-picker .fb-menu-panel,
  .fb-more-actions .fb-menu-panel {
    left: 0 !important;
    right: auto !important;
    width: min(92vw, 360px) !important;
    min-width: 0 !important;
  }

  .rspp-form-row {
    grid-template-columns: 1fr !important;
  }

  .rspp-modal-card {
    width: min(96vw, 620px) !important;
    max-height: 92vh !important;
  }

  .maturador-panel {
    grid-template-rows: auto minmax(620px, 1fr);
  }

  .maturador-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .maturador-open {
    width: 100%;
  }

  .maturador-frame {
    min-height: 620px;
    height: calc(100vh - 9rem);
  }
}

@media (max-width: 520px) {
  .sidebar-nav {
    grid-template-columns: 1fr;
  }

  button.nav-side,
  a.nav-side {
    min-height: 38px;
    font-size: 0.84rem !important;
  }

  .ops-kpi-grid,
  .ful-kpis,
  .wa-session-grid,
  .fb-folder-row,
  .fb-flow-cards,
  .rspp-grid {
    grid-template-columns: 1fr !important;
  }

  .ops-hero-actions > *,
  .ful-hero-actions > *,
  .fb-library-actions > *,
  .widget-actions > *,
  .ops-panel-tools > *,
  .ops-btn-row > *,
  .wa-session-actions > * {
    width: 100% !important;
  }

  .fb-top-actions {
    grid-template-columns: 1fr !important;
  }

  .fb-folder-card,
  .fb-flow-card {
    min-width: 0 !important;
  }

  .ful-detail {
    position: static !important;
  }
}

/* Follow-up labels: keep lead list full-width and open details only as an on-demand drawer. */
body > .ful-detail {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  bottom: 1rem !important;
  left: auto !important;
  z-index: 90 !important;
  width: min(480px, calc(100vw - 2rem)) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border: 1px solid var(--pro-line) !important;
  background: rgba(11, 20, 24, 0.98) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42) !important;
}

body > .ful-detail[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  body > .ful-detail {
    inset: 0.65rem !important;
    width: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}