/* Factory32 customer theme. Kept separate from the shared white-label UI. */
body.portal-dev-page {
  --portal-accent: #cf0008;
  --portal-accent-dark: #f02a31;
  --portal-accent-rgb: 207, 0, 8;
  --portal-accent-soft: rgba(207, 0, 8, 0.1);
  --accent: var(--portal-accent);
  --accent-dark: var(--portal-accent-dark);
  --accent-soft: rgba(207, 0, 8, 0.08);
  --line-strong: rgba(207, 0, 8, 0.34);
  --portal-surface: #090a0b;
  background:
    radial-gradient(circle at 6% 8%, rgba(255, 255, 255, 0.035), transparent 30rem),
    radial-gradient(circle at 96% 76%, rgba(207, 0, 8, 0.035), transparent 36rem),
    radial-gradient(circle at 92% 78%, rgba(255, 255, 255, 0.035), transparent 34rem),
    linear-gradient(145deg, #101113 0%, #17191c 52%, #202329 100%) !important;
}

.portal-app {
  background:
    radial-gradient(circle at 5% 8%, rgba(255, 255, 255, 0.04), transparent 30rem),
    radial-gradient(circle at 96% 72%, rgba(207, 0, 8, 0.035), transparent 36rem),
    radial-gradient(circle at 98% 72%, rgba(255, 255, 255, 0.045), transparent 36rem),
    linear-gradient(145deg, #141518 0%, #1b1d21 54%, #24272d 100%) !important;
}

.portal-sidebar {
  background:
    linear-gradient(180deg, rgba(12, 12, 13, 0.995), rgba(8, 8, 9, 0.99) 54%, rgba(4, 4, 5, 0.995)) !important;
  box-shadow: 18px 0 54px rgba(0, 0, 0, 0.42) !important;
}

.portal-section-head,
.portal-page-dashboard .portal-section-head,
.portal-shell:not(.portal-page-dashboard) .portal-section-head,
.portal-welcome-hero,
.portal-page-dashboard .portal-welcome-hero,
.portal-order-create-head,
.portal-detail-head,
.portal-price-admin-head,
.portal-credit-overview {
  background:
    radial-gradient(circle at 0% 0%, rgba(207, 0, 8, 0.055), transparent 24rem),
    linear-gradient(145deg, rgba(15, 15, 16, 0.99), rgba(6, 7, 8, 0.99)) !important;
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.3) !important;
}

.portal-stat-card,
.portal-page-dashboard .portal-stat-card,
.portal-page-dashboard .portal-customer-stats .portal-stat-card,
.portal-table-card,
.portal-card,
.portal-price-card,
.portal-price-summary,
.portal-price-admin-card,
.portal-order-form-card,
.portal-order-summary-card,
.portal-credit-package,
.portal-empty,
.portal-empty.finished,
.portal-empty.invoice,
.portal-message-preview,
.portal-message-card,
.portal-review-card,
.portal-shop-card,
.portal-user-card,
.portal-service-card,
.portal-auto-patch-card,
.portal-auto-patch-section,
.portal-performance-card,
.portal-stage-card,
.portal-dashboard-company-card,
.portal-dashboard-hours-card,
.portal-dashboard-panel,
.portal-page-dashboard .portal-message-preview > .portal-empty.finished,
.portal-page-dashboard .portal-company-panel,
.portal-page-dashboard .portal-company-contact {
  background:
    radial-gradient(circle at 0% 0%, rgba(207, 0, 8, 0.035), transparent 18rem),
    linear-gradient(145deg, rgba(18, 19, 20, 0.97), rgba(8, 9, 10, 0.99)) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.22) !important;
}

/* Factory32 dashboard labels use the brand red instead of the shared orange. */
.portal-stat-card .portal-stat-mark + p,
.portal-page-dashboard .portal-stat-card .portal-stat-mark + p {
  color: #ef4a4f !important;
}

.portal-side-nav a,
.portal-side-nav a:visited,
.portal-sidebar a,
.portal-sidebar a:visited {
  color: rgba(232, 232, 232, 0.68) !important;
}

.portal-side-nav a.active,
.portal-side-nav a:hover,
.portal-side-nav a:focus-visible,
.portal-sidebar a.active,
.portal-sidebar a:hover,
.portal-sidebar a:focus-visible {
  color: #fff !important;
  background:
    radial-gradient(circle at 10% 30%, rgba(207, 0, 8, 0.16), transparent 6rem),
    linear-gradient(145deg, rgba(24, 24, 25, 0.98), rgba(10, 10, 11, 0.99)) !important;
  box-shadow: inset 0 -2px 0 #cf0008, 0 14px 32px rgba(0, 0, 0, 0.26) !important;
}

.portal-nav-icon,
.portal-nav-icon-svg,
.portal-stat-mark,
.portal-section-icon,
.portal-pill-icon,
.portal-header-credit-icon,
.portal-header-notify-button,
.portal-header-menu-button,
.portal-logout-icon,
.portal-icon-btn {
  color: #e82a31 !important;
  background: rgba(207, 0, 8, 0.075) !important;
  border-color: rgba(207, 0, 8, 0.2) !important;
  box-shadow: none !important;
}

.portal-nav-icon svg,
.portal-nav-icon-svg svg,
.portal-stat-mark svg,
.portal-section-icon svg,
.portal-pill-icon svg,
.portal-header-credit-icon svg,
.portal-header-notify-button svg,
.portal-header-menu-button svg,
.portal-logout-icon svg,
.portal-icon-btn svg {
  color: #e82a31 !important;
  stroke: #e82a31 !important;
}

/* The shared theme contains later orange icon rules; keep every sidebar glyph red. */
.portal-sidebar .portal-side-nav .portal-nav-icon,
.portal-sidebar .portal-side-nav .portal-nav-icon-svg,
.portal-sidebar .portal-side-nav a:hover .portal-nav-icon,
.portal-sidebar .portal-side-nav a:hover .portal-nav-icon-svg,
.portal-sidebar .portal-side-nav a:focus-visible .portal-nav-icon,
.portal-sidebar .portal-side-nav a:focus-visible .portal-nav-icon-svg,
.portal-sidebar .portal-side-nav a.active .portal-nav-icon,
.portal-sidebar .portal-side-nav a.active .portal-nav-icon-svg {
  color: #ef3036 !important;
}

.portal-sidebar .portal-side-nav .portal-nav-icon svg,
.portal-sidebar .portal-side-nav .portal-nav-icon-svg svg,
.portal-sidebar .portal-side-nav .portal-nav-icon svg *,
.portal-sidebar .portal-side-nav .portal-nav-icon-svg svg * {
  color: #ef3036 !important;
  stroke: #ef3036 !important;
}

.portal-sidebar .portal-side-nav .portal-nav-icon-svg.dashboard svg rect {
  fill: #ef3036 !important;
  stroke: none !important;
}

.portal-dashboard-pill,
.portal-header-credit-pill,
.portal-header-user-badge,
.portal-header-notify-button,
.portal-header-menu-button,
.portal-header-admin-menu summary,
.portal-language-switch,
.portal-logout-icon,
.portal-open-mini,
.portal-processing-mini {
  color: #fff !important;
  background: linear-gradient(145deg, rgba(20, 20, 21, 0.98), rgba(8, 8, 9, 0.99)) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.22) !important;
}

.portal-language-switch a.active,
.portal-header-credit-pill em,
.portal-create-btn,
.portal-credit-buy,
.portal-button-primary,
button[type="submit"].portal-create-btn {
  color: #fff !important;
  background: linear-gradient(135deg, #d20a12, #a90007) !important;
  box-shadow: 0 14px 34px rgba(207, 0, 8, 0.2) !important;
}

.portal-create-btn:hover,
.portal-credit-buy:hover,
.portal-button-primary:hover,
button[type="submit"].portal-create-btn:hover {
  background: linear-gradient(135deg, #ee252c, #bd0008) !important;
  box-shadow: 0 18px 42px rgba(207, 0, 8, 0.27) !important;
}

a.portal-stat-card:hover,
a.portal-stat-card:focus-visible {
  background:
    radial-gradient(circle at 0% 0%, rgba(207, 0, 8, 0.12), transparent 16rem),
    linear-gradient(145deg, rgba(25, 22, 23, 0.99), rgba(9, 10, 11, 0.99)) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(207, 0, 8, 0.14) !important;
}

.portal-shell input:focus,
.portal-shell textarea:focus,
.portal-shell select:focus,
.portal-login-card input:focus,
.portal-forgot-card input:focus,
.portal-lock-card input:focus {
  border-color: rgba(207, 0, 8, 0.8) !important;
  box-shadow: 0 0 0 3px rgba(207, 0, 8, 0.12) !important;
}

.portal-lock {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.045), transparent 34rem),
    radial-gradient(circle at 82% 86%, rgba(207, 0, 8, 0.055), transparent 38rem),
    linear-gradient(145deg, #17191d 0%, #111316 48%, #090a0c 100%) !important;
}

.portal-login-card,
.portal-register-card,
.portal-lock-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(207, 0, 8, 0.065), transparent 18rem),
    linear-gradient(145deg, rgba(18, 19, 20, 0.98), rgba(6, 7, 8, 0.99)) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48) !important;
}

@media (max-width: 760px) {
  body.portal-dev-page,
  .portal-app {
    background:
      radial-gradient(circle at 4% 4%, rgba(255, 255, 255, 0.035), transparent 20rem),
      radial-gradient(circle at 100% 72%, rgba(207, 0, 8, 0.03), transparent 24rem),
      linear-gradient(145deg, #141518 0%, #1b1d21 54%, #24272d 100%) !important;
  }

  .portal-mobile-bar {
    background: linear-gradient(145deg, rgba(20, 20, 21, 0.99), rgba(7, 8, 9, 0.99)) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
}

/* Branded auth banner above the compact login card. */
.portal-lock-grid-login-only {
  grid-template-columns: minmax(0, 820px) !important;
  width: min(820px, calc(100vw - 36px)) !important;
}

.factory32-login-banner {
  width: 100%;
  aspect-ratio: 1600 / 395;
  overflow: hidden;
  border-radius: 24px;
  background: #08090a;
  box-shadow: 0 28px 74px rgba(0, 0, 0, 0.4);
}

.factory32-login-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.factory32-login-banner + .portal-lock-brand-mark {
  margin-top: 2px !important;
  margin-bottom: -8px !important;
}

.portal-login-card,
.portal-register-shell,
.portal-imprint-button,
.portal-powered-by {
  width: min(388px, 100%);
  justify-self: center;
}

.portal-lock-grid-login-only.is-register-mode .factory32-login-banner,
.portal-lock-grid-login-only:has(.portal-register-shell[open]) .factory32-login-banner {
  display: none !important;
}

@media (max-width: 760px) {
  .portal-lock-grid-login-only {
    grid-template-columns: minmax(0, 100%) !important;
    width: min(100%, calc(100vw - 28px)) !important;
  }

  .factory32-login-banner {
    aspect-ratio: 16 / 5;
    border-radius: 18px;
  }

  .factory32-login-banner img {
    object-position: 54% center;
  }
}