:root {
  --saas-bg: #f7f9fc;
  --saas-bg-strong: #eef3f7;
  --saas-card: rgba(255, 255, 255, 0.92);
  --saas-card-solid: #ffffff;
  --saas-ink: #111827;
  --saas-muted: #64748b;
  --saas-line: rgba(148, 163, 184, 0.28);
  --saas-line-strong: rgba(51, 65, 85, 0.14);
  --saas-green: #16794b;
  --saas-blue: #2563eb;
  --saas-cyan: #0891b2;
  --saas-amber: #b7791f;
  --saas-red: #b42318;
  --saas-violet: #6d5d9c;
  --saas-radius: 16px;
  --saas-radius-sm: 11px;
  --saas-shadow: 0 22px 60px rgba(15, 23, 42, 0.10);
  --saas-shadow-soft: 0 12px 34px rgba(15, 23, 42, 0.08);
  --saas-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes saasPageIn {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: saturate(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: saturate(1);
  }
}

@keyframes saasPageOut {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes saasRiseIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes saasModalIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes saasShimmer {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}

@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;
  }
}

body.saas-ui-ready {
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(247, 249, 252, 0.78), rgba(238, 243, 247, 0.96)),
    var(--saas-bg);
  color: var(--saas-ink);
  animation: saasPageIn 420ms var(--saas-ease) both;
}

body.saas-ui-ready.saas-page-exit {
  animation: saasPageOut 140ms ease both;
}

body.saas-ui-ready::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: -1;
  height: 250px;
  background: linear-gradient(120deg, #111827 0%, #0f766e 54%, #2563eb 100%);
  opacity: 0.06;
  pointer-events: none;
}

body.saas-ui-ready :where(.topbar, .app-topbar, .finance-topbar) {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.96) 44%, rgba(15, 118, 110, 0.94) 100%);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
}

body.saas-ui-ready :where(.topbar, .app-topbar, .finance-topbar)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, 0.12) 42%, transparent 62%);
  transform: translateX(-120%);
  animation: saasShimmer 8s ease-in-out infinite;
  pointer-events: none;
}

body.saas-ui-ready :where(.topbar > *, .app-topbar > *, .finance-topbar > *) {
  position: relative;
  z-index: 1;
}

body.saas-ui-ready :where(.topbar h1, .topbar h2, .app-topbar h1, .app-topbar h2, .finance-topbar h1) {
  color: #ffffff;
  text-shadow: 0 1px 18px rgba(255, 255, 255, 0.12);
}

body.saas-ui-ready :where(.topbar .eyebrow, .app-topbar .eyebrow, .finance-topbar .eyebrow, .topbar-meta) {
  color: rgba(226, 232, 240, 0.82);
}

body.saas-ui-ready :where(.dashboard, main, .page-shell, .finance-shell) {
  animation: saasPageIn 480ms var(--saas-ease) both;
}

body.saas-ui-ready :where(.welcome h1, .welcome h2, .card-header h2, .section-heading h2, .view-toolbar h2) {
  background: linear-gradient(135deg, #111827, #0f766e 56%, #2563eb);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

body.saas-ui-ready :where(
  .welcome,
  .module-card,
  .status-dashboard-tile,
  .stat-card,
  .status-stat-button,
  .summary-item,
  .service-card,
  .calendar-service-card,
  .form-panel,
  .list-panel,
  .finance-panel,
  .map-panel,
  .feed-section,
  .project-detail,
  .day-detail,
  .quick-note-panel,
  .login-card,
  .shop-order,
  .missing-service-card,
  .note-card,
  .project-card,
  .report-card,
  .article-card,
  .confirmation-card,
  .summary-totals > div,
  .history-totals,
  .report-totals,
  .cart-panel,
  .orders-panel
) {
  border-color: var(--saas-line);
  border-radius: var(--saas-radius);
  background: var(--saas-card);
  box-shadow: var(--saas-shadow-soft);
  backdrop-filter: blur(18px);
}

body.saas-ui-ready :where(
  .module-card,
  .stat-card,
  .status-stat-button,
  .service-card,
  .calendar-service-card,
  .shop-order,
  .note-card,
  .project-card,
  .report-card,
  .missing-service-card
) {
  transition:
    transform 220ms var(--saas-ease),
    box-shadow 220ms var(--saas-ease),
    border-color 220ms var(--saas-ease),
    background 220ms var(--saas-ease);
}

body.saas-ui-ready :where(
  .module-card,
  .stat-card,
  .status-stat-button,
  .service-card,
  .calendar-service-card,
  .shop-order,
  .note-card,
  .project-card,
  .report-card,
  .missing-service-card
):hover {
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, 0.32);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--saas-shadow);
}

body.saas-ui-ready :where(.module-card, .status-dashboard-tile, .stat-card, .status-stat-button, .summary-item) {
  border-top-width: 1px;
}

body.saas-ui-ready :where(.module-card, .stat-card, .status-stat-button, .summary-item)::before {
  content: "";
  display: block;
  height: 3px;
  margin: -1px -1px 12px;
  border-radius: var(--saas-radius) var(--saas-radius) 0 0;
  background: linear-gradient(90deg, var(--saas-green), var(--saas-cyan), var(--saas-blue));
}

body.saas-ui-ready :where(.module-card) {
  min-height: 190px;
}

body.saas-ui-ready :where(.module-icon, .tile-icon, .side-tool-icon) {
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(22, 121, 75, 0.12), rgba(37, 99, 235, 0.10));
  color: var(--saas-green);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

body.saas-ui-ready :where(.module-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

body.saas-ui-ready :where(.status-dashboard-grid, .technician-dashboard, .summary-grid, .summary-strip) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
}

body.saas-ui-ready :where(.admin-dashboard) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}

body.saas-ui-ready :where(button, .button, .create-button, .primary-button, .primary-command, .secondary-button, .secondary-command, .danger-button, .danger-command, .text-button, .text-command, .protocol-button, .icon-command) {
  border-radius: 12px;
  transition:
    transform 180ms var(--saas-ease),
    box-shadow 180ms var(--saas-ease),
    border-color 180ms var(--saas-ease),
    background 180ms var(--saas-ease),
    color 180ms var(--saas-ease);
}

body.saas-ui-ready :where(.create-button, .primary-button, .primary-command) {
  border-color: transparent;
  background: linear-gradient(135deg, #168452, #0f766e 52%, #2563eb);
  box-shadow: 0 12px 26px rgba(15, 118, 110, 0.22);
}

body.saas-ui-ready :where(button, .button, .create-button, .primary-button, .primary-command, .secondary-button, .secondary-command, .danger-button, .danger-command, .text-button, .text-command, .protocol-button, .icon-command):hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

body.saas-ui-ready :where(button, .button, .create-button, .primary-button, .primary-command, .secondary-button, .secondary-command, .danger-button, .danger-command, .text-button, .text-command, .protocol-button, .icon-command):active {
  transform: translateY(0) scale(0.99);
}

body.saas-ui-ready :where(input, select, textarea) {
  border-color: var(--saas-line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  transition:
    border-color 180ms var(--saas-ease),
    box-shadow 180ms var(--saas-ease),
    background 180ms var(--saas-ease);
}

body.saas-ui-ready :where(input, select, textarea):focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.55);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

body.saas-ui-ready :where(dialog[open], .service-dialog[open], .summary-dialog[open], .journal-dialog[open]) {
  border-radius: 22px;
  animation: saasModalIn 260ms var(--saas-ease) both;
}

body.saas-ui-ready :where(dialog)::backdrop {
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(8px);
}

body.saas-ui-ready :where(form:not([hidden]), .dialog-form, .form-grid, .details-grid) {
  animation: saasRiseIn 360ms var(--saas-ease) both;
}

.saas-animate-in {
  opacity: 0;
  animation: saasRiseIn 520ms var(--saas-ease) forwards;
  animation-delay: var(--saas-delay, 0ms);
}

.saas-status-icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  display: inline-flex;
  margin-right: 0.38em;
  color: currentColor;
  vertical-align: -0.16em;
}

.saas-status-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

body.saas-ui-ready :where(.status-pill, .priority, .order-status, .report-status, .counter, .pill, .count-pill) {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

body.saas-ui-ready :where(.status-pill[data-status="signed"], .report-status.accepted, .status-accepted, .priority-niski) {
  background: rgba(22, 121, 75, 0.10);
  color: var(--saas-green);
}

body.saas-ui-ready :where(.report-status.pending, .status-pending, .priority-średni, .priority-sredni) {
  background: rgba(183, 121, 31, 0.12);
  color: var(--saas-amber);
}

body.saas-ui-ready :where(.report-status.rejected, .status-rejected, .priority-wysoki) {
  background: rgba(180, 35, 24, 0.10);
  color: var(--saas-red);
}

body.saas-ui-ready :where(.result-count, .counter, .count-pill) {
  min-width: 28px;
  justify-content: center;
  background: rgba(37, 99, 235, 0.10);
  color: var(--saas-blue);
}

body.saas-ui-ready :where(.tab-bar, .finance-tabs) {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 0 0 1px var(--saas-line);
}

body.saas-ui-ready :where(.tab-button.is-active) {
  border-radius: 11px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

@media (max-width: 820px) {
  body.saas-ui-ready :where(.topbar, .app-topbar, .finance-topbar) {
    border-radius: 0 0 24px 24px;
  }

  body.saas-ui-ready :where(.dashboard, main, .page-shell, .finance-shell) {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.saas-ui-ready :where(.module-card, .welcome, .status-dashboard-tile, .finance-panel, .form-panel, .list-panel) {
    border-radius: 18px;
  }
}