/* WINco SaaS Presentation Theme v1
   Final commercial skin derived from the presentation image pack. */

:root {
  --winco-saas-bg: #f5f7fb;
  --winco-saas-bg-soft: #eef3f8;
  --winco-saas-surface: #ffffff;
  --winco-saas-surface-2: #f8fafc;
  --winco-saas-border: #d8e1ec;
  --winco-saas-border-strong: #c7d3e0;
  --winco-saas-text: #243247;
  --winco-saas-heading: #07172f;
  --winco-saas-muted: #66758a;
  --winco-saas-muted-2: #8492a6;
  --winco-saas-blue: #2563eb;
  --winco-saas-blue-strong: #1d4ed8;
  --winco-saas-blue-soft: #eaf1ff;
  --winco-saas-emerald: #0f9f6e;
  --winco-saas-emerald-strong: #087653;
  --winco-saas-emerald-soft: #e7f6ee;
  --winco-saas-amber: #b7791f;
  --winco-saas-amber-soft: #fff5db;
  --winco-saas-danger: #b42318;
  --winco-saas-danger-soft: #fff1ee;
  --winco-saas-radius: 8px;
  --winco-saas-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --winco-saas-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
    0 18px 48px rgba(15, 23, 42, 0.08);
  --winco-saas-focus: 0 0 0 3px rgba(37, 99, 235, 0.14);

  --we-bg: var(--winco-saas-bg);
  --we-bg-2: var(--winco-saas-bg-soft);
  --we-surface: var(--winco-saas-surface);
  --we-surface-alt: var(--winco-saas-surface-2);
  --we-border: var(--winco-saas-border);
  --we-border-strong: var(--winco-saas-border-strong);
  --we-text: var(--winco-saas-text);
  --we-heading: var(--winco-saas-heading);
  --we-muted: var(--winco-saas-muted);
  --we-muted-2: var(--winco-saas-muted-2);
  --we-accent: var(--winco-saas-blue);
  --we-accent-strong: var(--winco-saas-blue-strong);
  --we-accent-soft: var(--winco-saas-blue-soft);
  --we-success: var(--winco-saas-emerald);
  --we-success-strong: var(--winco-saas-emerald-strong);
  --we-success-soft: var(--winco-saas-emerald-soft);
  --we-warning: var(--winco-saas-amber);
  --we-warning-soft: var(--winco-saas-amber-soft);
  --we-danger: var(--winco-saas-danger);
  --we-danger-soft: var(--winco-saas-danger-soft);
  --we-radius: var(--winco-saas-radius);
  --we-shadow: var(--winco-saas-shadow);
}

html {
  color-scheme: light !important;
  background: var(--winco-saas-bg) !important;
}

body {
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body * {
  letter-spacing: 0 !important;
}

::selection {
  background: rgba(37, 99, 235, 0.18);
  color: var(--winco-saas-heading);
}

/* Public landing ---------------------------------------------------------- */

body.winco-public-landing {
  color: var(--winco-saas-text) !important;
  background: var(--winco-saas-bg) !important;
  overflow-x: hidden !important;
}

body.winco-public-landing .hero {
  min-height: min(860px, 88vh) !important;
  color: var(--winco-saas-heading) !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(248, 250, 252, 0.99) 0%,
      rgba(248, 250, 252, 0.94) 36%,
      rgba(248, 250, 252, 0.68) 54%,
      rgba(248, 250, 252, 0.24) 74%,
      rgba(248, 250, 252, 0.04) 100%
    ),
    url("../img/winco_saas_cover.png") !important;
  background-color: var(--winco-saas-bg) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body.winco-public-landing .hero::before,
body.winco-public-landing .hero::after {
  display: none !important;
}

body.winco-public-landing .nav {
  min-height: 82px !important;
  color: var(--winco-saas-heading) !important;
}

body.winco-public-landing .brand {
  color: var(--winco-saas-heading) !important;
}

body.winco-public-landing .brand-mark {
  background: var(--winco-saas-heading) !important;
  color: #ffffff !important;
  border: 1px solid rgba(7, 23, 47, 0.12) !important;
  box-shadow: var(--winco-saas-shadow-sm) !important;
}

body.winco-public-landing .nav-links {
  color: var(--winco-saas-muted) !important;
}

body.winco-public-landing .nav-links a {
  color: var(--winco-saas-muted) !important;
  background: transparent !important;
}

body.winco-public-landing .nav-links a:hover {
  color: var(--winco-saas-blue-strong) !important;
  background: var(--winco-saas-blue-soft) !important;
}

body.winco-public-landing .hero-inner {
  padding: 64px 0 72px !important;
}

body.winco-public-landing .hero-copy {
  max-width: 650px !important;
  min-width: 0 !important;
}

body.winco-public-landing .eyebrow {
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--winco-saas-blue-strong) !important;
  box-shadow: var(--winco-saas-shadow-sm) !important;
}

body.winco-public-landing h1,
body.winco-public-landing h2 {
  color: var(--winco-saas-heading) !important;
  -webkit-text-fill-color: var(--winco-saas-heading) !important;
}

body.winco-public-landing .hero-copy p,
body.winco-public-landing .section-head p,
body.winco-public-landing .card p,
body.winco-public-landing .metric span {
  color: var(--winco-saas-muted) !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

body.winco-public-landing .btn {
  min-height: 46px !important;
  border-radius: var(--winco-saas-radius) !important;
  border: 1px solid var(--winco-saas-border-strong) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--winco-saas-heading) !important;
  box-shadow: var(--winco-saas-shadow-sm) !important;
}

body.winco-public-landing .btn.primary {
  background: var(--winco-saas-blue) !important;
  border-color: var(--winco-saas-blue) !important;
  color: #ffffff !important;
}

body.winco-public-landing .hero-metrics .metric,
body.winco-public-landing .card,
body.winco-public-landing .panel {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--winco-saas-border) !important;
  border-radius: var(--winco-saas-radius) !important;
  box-shadow: var(--winco-saas-shadow) !important;
}

body.winco-public-landing .metric strong,
body.winco-public-landing .card strong {
  color: var(--winco-saas-heading) !important;
}

body.winco-public-landing .section {
  padding: 60px 0 !important;
}

body.winco-public-landing .section-head span {
  color: var(--winco-saas-blue-strong) !important;
}

body.winco-public-landing .cta {
  background: var(--winco-saas-heading) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--winco-saas-radius) !important;
  box-shadow: var(--winco-saas-shadow) !important;
}

body.winco-public-landing .cta h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.winco-public-landing .cta p {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* App and admin surfaces -------------------------------------------------- */

body:not(.winco-public-landing) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0)),
    var(--winco-saas-bg) !important;
  color: var(--winco-saas-text) !important;
}

body:not(.winco-public-landing)::before,
body:not(.winco-public-landing)::after {
  opacity: 0.02 !important;
  filter: none !important;
}

body:not(.winco-public-landing) h1,
body:not(.winco-public-landing) h2,
body:not(.winco-public-landing) h3,
body:not(.winco-public-landing) h4,
body:not(.winco-public-landing) h5,
body:not(.winco-public-landing) h6,
body:not(.winco-public-landing) strong,
body:not(.winco-public-landing) .brand,
body:not(.winco-public-landing) .brand-title,
body:not(.winco-public-landing) .section-title,
body:not(.winco-public-landing) .card-title,
body:not(.winco-public-landing) .panel-title {
  color: var(--winco-saas-heading) !important;
  -webkit-text-fill-color: var(--winco-saas-heading) !important;
}

body:not(.winco-public-landing) p,
body:not(.winco-public-landing) small,
body:not(.winco-public-landing) label,
body:not(.winco-public-landing) .muted,
body:not(.winco-public-landing) .subtitle,
body:not(.winco-public-landing) .hint,
body:not(.winco-public-landing) .lead,
body:not(.winco-public-landing) .description,
body:not(.winco-public-landing) .meta,
body:not(.winco-public-landing) .help,
body:not(.winco-public-landing) .empty {
  color: var(--winco-saas-muted) !important;
  -webkit-text-fill-color: var(--winco-saas-muted) !important;
  line-height: 1.5 !important;
}

body:not(.winco-public-landing) a {
  color: inherit;
}

body:not(.winco-public-landing) :is(
  .top,
  .topbar,
  .navbar,
  .nav,
  .app-topbar,
  header
) {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--winco-saas-border) !important;
  color: var(--winco-saas-text) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body:not(.winco-public-landing) :is(
  .sidebar,
  .side,
  .aside,
  .left-nav,
  .app-sidebar,
  aside
) {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--winco-saas-border) !important;
  color: var(--winco-saas-text) !important;
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.05) !important;
}

body:not(.winco-public-landing) :is(.sidebar, .side, aside) a,
body:not(.winco-public-landing) :is(.topbar, .navbar, header) a {
  color: var(--winco-saas-muted) !important;
  -webkit-text-fill-color: var(--winco-saas-muted) !important;
}

body:not(.winco-public-landing) :is(.sidebar, .side, aside) a:hover,
body:not(.winco-public-landing) :is(.sidebar, .side, aside) a.active,
body:not(.winco-public-landing) :is(.topbar, .navbar, header) a:hover,
body:not(.winco-public-landing) :is(.topbar, .navbar, header) a.active {
  background: var(--winco-saas-blue-soft) !important;
  color: var(--winco-saas-blue-strong) !important;
  -webkit-text-fill-color: var(--winco-saas-blue-strong) !important;
}

body:not(.winco-public-landing) :is(
  .hero,
  .card,
  .panel,
  .box,
  .item,
  .stat,
  .metric,
  .metric-card,
  .feature-card,
  .table-card,
  .client-card,
  .billing-card,
  .plan,
  .price-card,
  .pass,
  .channel,
  .preview,
  .signal-card,
  .status-card,
  .op-panel,
  .op-status-card,
  .op-action-card,
  .op-lead-card,
  .op-side-card,
  .studio-section,
  .studio-form,
  .quick-create,
  .quick-pass-card,
  .winco-dashboard-clean-v2,
  .clean-action-card,
  .clean-op-card,
  .winco-operation-modules-card
) {
  background: var(--winco-saas-surface) !important;
  background-image: none !important;
  border: 1px solid var(--winco-saas-border) !important;
  border-radius: var(--winco-saas-radius) !important;
  box-shadow: var(--winco-saas-shadow) !important;
  color: var(--winco-saas-text) !important;
  filter: none !important;
}

body:not(.winco-public-landing) :is(
  .card,
  .panel,
  .metric,
  .metric-card,
  .table-card,
  .billing-card,
  .client-card,
  .op-panel,
  .winco-operation-modules-card
)::before,
body:not(.winco-public-landing) :is(
  .card,
  .panel,
  .metric,
  .metric-card,
  .table-card,
  .billing-card,
  .client-card,
  .op-panel,
  .winco-operation-modules-card
)::after {
  opacity: 0 !important;
  pointer-events: none !important;
}

body:not(.winco-public-landing) :is(
  .metric,
  .metric-card,
  .stat,
  .op-status-card,
  .signal-card
) strong,
body:not(.winco-public-landing) :is(.metric, .metric-card, .stat) .value,
body:not(.winco-public-landing) :is(.metric, .metric-card, .stat) .num {
  color: var(--winco-saas-heading) !important;
  -webkit-text-fill-color: var(--winco-saas-heading) !important;
}

body:not(.winco-public-landing) :is(table, .table) {
  background: var(--winco-saas-surface) !important;
  color: var(--winco-saas-text) !important;
  border-color: var(--winco-saas-border) !important;
}

body:not(.winco-public-landing) :is(th, thead, .table-head) {
  background: var(--winco-saas-surface-2) !important;
  color: var(--winco-saas-muted) !important;
  border-color: var(--winco-saas-border) !important;
}

body:not(.winco-public-landing) :is(td, tr, .table-row) {
  border-color: var(--winco-saas-border) !important;
}

body:not(.winco-public-landing) :is(input, select, textarea) {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--winco-saas-border-strong) !important;
  border-radius: var(--winco-saas-radius) !important;
  color: var(--winco-saas-heading) !important;
  -webkit-text-fill-color: var(--winco-saas-heading) !important;
  box-shadow: none !important;
  outline: none !important;
}

body:not(.winco-public-landing) :is(input, select, textarea)::placeholder {
  color: var(--winco-saas-muted-2) !important;
  -webkit-text-fill-color: var(--winco-saas-muted-2) !important;
}

body:not(.winco-public-landing) :is(input, select, textarea):focus {
  border-color: var(--winco-saas-blue) !important;
  box-shadow: var(--winco-saas-focus) !important;
}

body:not(.winco-public-landing) :is(.btn, button, a.btn, .button) {
  min-height: 38px;
  border-radius: var(--winco-saas-radius) !important;
  border: 1px solid var(--winco-saas-border-strong) !important;
  background: #ffffff !important;
  background-image: none !important;
  color: var(--winco-saas-heading) !important;
  -webkit-text-fill-color: var(--winco-saas-heading) !important;
  box-shadow: var(--winco-saas-shadow-sm) !important;
}

body:not(.winco-public-landing) :is(.btn, button, a.btn, .button):hover {
  border-color: var(--winco-saas-blue) !important;
  color: var(--winco-saas-blue-strong) !important;
  -webkit-text-fill-color: var(--winco-saas-blue-strong) !important;
}

body:not(.winco-public-landing) :is(
  .btn.primary,
  .primary,
  .btn-primary,
  .btn-main,
  button[type="submit"],
  a.btn.primary
) {
  background-color: var(--winco-saas-blue) !important;
  background: var(--winco-saas-blue) !important;
  border-color: var(--winco-saas-blue) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body:not(.winco-public-landing) :is(
  .btn.primary,
  .primary,
  .btn-primary,
  .btn-main,
  button[type="submit"],
  a.btn.primary
) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body:not(.winco-public-landing) :is(.danger, .btn.danger, button.danger) {
  background: var(--winco-saas-danger-soft) !important;
  border-color: rgba(180, 35, 24, 0.28) !important;
  color: var(--winco-saas-danger) !important;
  -webkit-text-fill-color: var(--winco-saas-danger) !important;
}

body:not(.winco-public-landing) :is(.badge, .pill, .status, .status-pill) {
  border-radius: 999px !important;
  border: 1px solid var(--winco-saas-border) !important;
  background: var(--winco-saas-surface-2) !important;
  color: var(--winco-saas-muted) !important;
  -webkit-text-fill-color: var(--winco-saas-muted) !important;
  box-shadow: none !important;
}

body:not(.winco-public-landing) :is(
  .badge.active,
  .badge.ok,
  .badge.online,
  .pill.active,
  .pill.ok,
  .pill.running,
  .pill.ready,
  .pill.connected,
  .status.active,
  .status.online,
  .status-pill.ok,
  .status-pill.online,
  .status-online
) {
  background: var(--winco-saas-emerald-soft) !important;
  border-color: rgba(15, 159, 110, 0.24) !important;
  color: var(--winco-saas-emerald-strong) !important;
  -webkit-text-fill-color: var(--winco-saas-emerald-strong) !important;
}

body:not(.winco-public-landing) :is(
  .badge.warn,
  .badge.pending,
  .pill.warn,
  .pill.created,
  .status.pending,
  .status.overdue,
  .status-warning,
  .status-pill.warn
) {
  background: var(--winco-saas-amber-soft) !important;
  border-color: rgba(183, 121, 31, 0.25) !important;
  color: var(--winco-saas-amber) !important;
  -webkit-text-fill-color: var(--winco-saas-amber) !important;
}

body:not(.winco-public-landing) :is(
  .badge.error,
  .badge.off,
  .pill.error,
  .pill.dead,
  .pill.exited,
  .pill.offline,
  .status.error,
  .status.cancelled,
  .status.blocked,
  .status.inactive,
  .status-offline,
  .status-pill.off
) {
  background: var(--winco-saas-danger-soft) !important;
  border-color: rgba(180, 35, 24, 0.25) !important;
  color: var(--winco-saas-danger) !important;
  -webkit-text-fill-color: var(--winco-saas-danger) !important;
}

body:not(.winco-public-landing) :is(svg, i[data-lucide]) {
  color: currentColor;
  stroke-width: 1.9;
}

body:not(.winco-public-landing) :is(.brand-mark, .logo-mark, .avatar, .icon-box) {
  border-radius: var(--winco-saas-radius) !important;
}

body:not(.winco-public-landing) :is(.progress, progress, .bar, .meter) {
  background: #e5edf5 !important;
  border-radius: 999px !important;
}

body:not(.winco-public-landing) :is(.progress-fill, .bar-fill, .meter-fill) {
  background: var(--winco-saas-blue) !important;
  border-radius: 999px !important;
}

body:not(.winco-public-landing) :is(
  .success,
  .alert.success,
  .notice.success,
  .toast.success
) {
  background: var(--winco-saas-emerald-soft) !important;
  border-color: rgba(15, 159, 110, 0.24) !important;
  color: var(--winco-saas-emerald-strong) !important;
  -webkit-text-fill-color: var(--winco-saas-emerald-strong) !important;
}

body:not(.winco-public-landing) :is(.alert, .notice, .toast) {
  border-radius: var(--winco-saas-radius) !important;
  box-shadow: var(--winco-saas-shadow-sm) !important;
}

/* Operation client app refinements --------------------------------------- */

html body.winco-os-root {
  background: var(--winco-saas-bg) !important;
}

html body.winco-os-root .shell,
html body.winco-os-root main.winco-page,
html body.winco-os-root .winco-page {
  color: var(--winco-saas-text) !important;
}

html body.winco-os-root .topbar {
  width: min(1880px, calc(100% - 16px)) !important;
  margin: 8px auto 0 !important;
  border-radius: var(--winco-saas-radius) !important;
}

html body[data-winco-page="settings"] .winco-operation-settings-page > .card.hero,
html body[data-winco-page="settings"] .winco-operation-settings-page .panel,
html body[data-winco-page="settings"] .winco-operation-settings-page .card,
html body[data-winco-page="billing"] .shell,
html body.winco-billing-root .shell {
  border-radius: var(--winco-saas-radius) !important;
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 860px) {
  body.winco-public-landing .nav,
  body.winco-public-landing .hero-inner,
  body.winco-public-landing .section,
  body.winco-public-landing .footer {
    width: min(100% - 40px, 1180px) !important;
    max-width: calc(100vw - 40px) !important;
  }

  body.winco-public-landing .hero {
    min-height: 760px !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(248, 250, 252, 0.98) 0%,
        rgba(248, 250, 252, 0.94) 48%,
        rgba(248, 250, 252, 0.22) 100%
      ),
      url("../img/winco_saas_cover.png") !important;
    background-position: 58% bottom !important;
  }

  body.winco-public-landing .hero-inner {
    padding: 34px 0 56px !important;
  }

  body.winco-public-landing .hero-copy,
  body.winco-public-landing .actions,
  body.winco-public-landing .hero-metrics {
    width: 100% !important;
    max-width: calc(100vw - 40px) !important;
    min-width: 0 !important;
  }

  body.winco-public-landing .hero-copy p {
    width: min(330px, 100%) !important;
    max-width: min(330px, 100%) !important;
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 15px !important;
  }

  body.winco-public-landing h1 {
    font-size: clamp(48px, 17vw, 74px) !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  body.winco-public-landing .btn {
    max-width: 100% !important;
    white-space: normal !important;
  }

  body:not(.winco-public-landing) :is(.topbar, .navbar, header) {
    border-radius: 0 !important;
  }

  body:not(.winco-public-landing) :is(
    .card,
    .panel,
    .metric,
    .metric-card,
    .table-card,
    .billing-card,
    .client-card
  ) {
    box-shadow: var(--winco-saas-shadow-sm) !important;
  }
}