/* OstoVirta Modern UI — turvallinen visuaalinen kerros nykyisen käyttöliittymän päälle. */
:root {
  --ov-modern-navy: #071a3d;
  --ov-modern-navy-2: #0b2e69;
  --ov-modern-blue: #1769e8;
  --ov-modern-cyan: #35c2e8;
  --ov-modern-ink: #10213f;
  --ov-modern-muted: #62718a;
  --ov-modern-line: #dce5f1;
  --ov-modern-soft: #f6f9fd;
  --ov-modern-surface: rgba(255, 255, 255, .96);
  --ov-modern-shadow: 0 1px 2px rgba(15, 35, 70, .04), 0 10px 30px rgba(15, 35, 70, .055);
  --ov-modern-shadow-hover: 0 3px 8px rgba(15, 35, 70, .07), 0 18px 42px rgba(15, 35, 70, .08);
}

.ov-classic-ui {
  color: var(--ov-modern-ink);
  background:
    radial-gradient(circle at 82% -12%, rgba(53, 194, 232, .12), transparent 30rem),
    linear-gradient(180deg, #f7faff 0, #f2f6fb 38rem, #eef3f9 100%);
}

.ov-classic-ui .app-view {
  min-height: 100vh;
  padding: 18px 26px 56px 258px;
}

.ov-sidebar {
  width: 232px;
  padding: 20px 12px 16px;
  background:
    radial-gradient(circle at 12% 4%, rgba(53, 194, 232, .22), transparent 13rem),
    linear-gradient(180deg, var(--ov-modern-navy), var(--ov-modern-navy-2));
  border-right: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 14px 0 45px rgba(7, 26, 61, .1);
}

.ov-company-themed .ov-sidebar {
  background:
    radial-gradient(circle at 12% 4%, rgba(255, 255, 255, .16), transparent 13rem),
    linear-gradient(180deg, color-mix(in srgb, var(--ov-company-accent) 30%, #061631), color-mix(in srgb, var(--ov-company-accent) 50%, #09204d));
}

.ov-sidebar-heading {
  padding: 0 5px 19px;
  border-bottom-color: rgba(255, 255, 255, .13);
}

.ov-sidebar #topbar-logo-fallback,
.ov-sidebar #topbar-company-logo {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

.ov-sidebar #company-name {
  font-size: 15px;
  letter-spacing: -.015em;
}

.ov-nav {
  gap: 5px;
  margin-top: 16px;
}

.ov-nav button {
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 11px;
  color: rgba(234, 242, 255, .82);
  font-size: 14px;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.ov-nav button:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  transform: translateX(2px);
}

.ov-nav button[aria-current="page"] {
  color: #fff;
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .15);
  box-shadow: inset 3px 0 0 var(--ov-modern-cyan), 0 8px 20px rgba(0, 0, 0, .08);
}

.ov-sidebar-foot {
  padding-top: 18px;
}

.ov-classic-ui .topbar {
  position: sticky;
  top: 12px;
  z-index: 20;
  width: min(1280px, 100%);
  min-height: 74px;
  margin: 0 auto 18px;
  padding: 14px 18px;
  border: 1px solid rgba(220, 229, 241, .88);
  border-radius: 17px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 30px rgba(15, 35, 70, .06);
  backdrop-filter: blur(16px) saturate(145%);
}

.ov-classic-ui #ov-page-title {
  margin-top: 4px;
  font-size: 25px;
  letter-spacing: -.04em;
}

.ov-classic-ui .user-data {
  padding: 7px 12px;
  border-color: #dfe8f5;
  background: #f5f8fc;
}

.ov-classic-ui :is(.dashboard, .archive-page, .reporting-page, .settings-page, .purchase-page) {
  width: min(1280px, 100%);
  max-width: 1280px;
}

.ov-classic-ui :is(.archive-page-heading, .reporting-heading, .settings-heading, .purchase-page-heading) {
  margin: 22px 0 19px;
}

.ov-classic-ui :is(.archive-page-heading, .reporting-heading, .settings-heading, .purchase-page-heading) h1 {
  margin-top: 5px;
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.12;
}

.ov-classic-ui :is(.archive-page-heading, .reporting-heading, .settings-heading, .purchase-page-heading) p {
  max-width: 62ch;
  margin-top: 7px;
}

.ov-classic-ui .back-button {
  margin-bottom: 14px;
  font-weight: 750;
}

.ov-company-banner {
  padding: 20px;
  border-color: var(--ov-modern-line);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .98), rgba(235, 244, 255, .94));
  box-shadow: var(--ov-modern-shadow);
}

.ov-company-logo {
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  border-radius: 18px;
}

.ov-metrics {
  gap: 13px;
}

.ov-metric {
  min-height: 126px;
  padding: 19px;
  border-color: var(--ov-modern-line);
  border-radius: 17px;
  box-shadow: var(--ov-modern-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}

.ov-metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--ov-modern-shadow-hover);
}

.ov-metric strong {
  margin: 10px 0 4px;
  font-size: 34px;
}

.ov-recent {
  margin-top: 24px;
}

.ov-recent-table,
.ov-classic-ui :is(.archive-row, .report-row, .archive-detail, .report-summary, .archive-summary, .report-controls) {
  border-color: var(--ov-modern-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 35, 70, .025);
}

.ov-classic-ui :is(.form-card, .settings-card),
.ov-billing-card {
  border-color: var(--ov-modern-line);
  border-radius: 18px;
  background: var(--ov-modern-surface);
  box-shadow: var(--ov-modern-shadow);
}

.settings-page {
  padding-bottom: 64px;
}

.settings-heading {
  padding: 0 2px;
}

.settings-card {
  margin-bottom: 14px;
  padding: 22px;
}

.settings-card h2,
.settings-section-heading h2 {
  margin-bottom: 16px;
  font-size: 18px;
  letter-spacing: -.025em;
}

.settings-grid {
  gap: 16px 18px;
}

.ov-classic-ui label {
  margin-bottom: 6px;
  color: #253653;
  font-size: 13px;
  font-weight: 750;
}

.ov-classic-ui :is(input, select, textarea) {
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid #d5dfec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 35, 70, .025);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ov-classic-ui :is(input, select, textarea):hover:not(:disabled) {
  border-color: #b9c9dd;
}

.ov-classic-ui :is(input, select, textarea):focus {
  border-color: var(--ov-modern-blue);
  box-shadow: 0 0 0 4px rgba(23, 105, 232, .1);
}

.settings-readonly {
  min-height: 46px;
  padding: 0 13px;
  border-color: #e0e7f0;
  border-radius: 10px;
  background: #f3f6fa;
  color: #53627a;
}

#settings-brand-color {
  width: 112px;
  min-height: 46px;
  padding: 5px;
  border-radius: 11px;
}

.settings-grid small,
.settings-logo-controls small,
.settings-device-note {
  color: #718099;
  font-size: 12px;
  line-height: 1.45;
}

.settings-logo-area,
.settings-user-create,
.settings-archived-details {
  border-color: #e2e9f2;
  border-radius: 14px;
  background: var(--ov-modern-soft);
}

.settings-user-row,
.settings-device-row {
  border-color: #e7edf4;
}

.settings-actions {
  position: sticky;
  bottom: 12px;
  z-index: 15;
  margin: 18px -8px 0;
  padding: 12px 8px;
  border-radius: 15px;
  background: rgba(242, 246, 251, .88);
  backdrop-filter: blur(14px);
}

.ov-classic-ui .primary-button,
.ov-classic-ui .secondary-button,
.settings-user-save,
.settings-user-cancel {
  min-height: 43px;
  border-radius: 10px;
  font-size: 14px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ov-classic-ui .primary-button {
  box-shadow: 0 7px 18px rgba(20, 101, 217, .15);
}

.ov-classic-ui .primary-button:hover:not(:disabled),
.ov-classic-ui .secondary-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.ov-billing-card {
  margin-bottom: 16px;
  padding: 22px;
  background: linear-gradient(135deg, #fff 72%, #eef5ff);
}

.ov-billing-top h2 {
  font-size: 22px;
}

.ov-billing-plan {
  margin: 18px 0 12px;
  padding: 16px 0;
}

.ov-billing-plan p > strong {
  font-size: 29px;
}

.message {
  border-radius: 12px;
}

@media (max-width: 900px) {
  .ov-classic-ui .app-view {
    padding: 14px 16px 42px;
  }

  .ov-sidebar {
    width: 260px;
  }

  .ov-classic-ui .topbar {
    top: 8px;
    min-height: 70px;
    border-radius: 15px;
  }
}

@media (max-width: 650px) {
  .ov-classic-ui .app-view {
    padding: 10px 10px 34px;
    overflow-x: clip;
  }

  .ov-classic-ui .topbar {
    top: 6px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .ov-classic-ui #ov-page-title {
    font-size: 21px;
  }

  .ov-company-banner,
  .ov-classic-ui :is(.form-card, .settings-card),
  .ov-billing-card {
    padding: 18px 15px;
    border-radius: 16px;
  }

  .settings-grid {
    gap: 14px;
  }

  .settings-actions {
    bottom: 8px;
    margin-inline: -4px;
    padding-inline: 4px;
  }

  #settings-brand-color {
    width: 92px;
  }

  .ov-classic-ui :is(.dashboard, .ov-overview, .ov-recent) {
    min-width: 0;
    max-width: 100%;
  }

  .ov-recent .section-heading {
    width: 100%;
    gap: 12px;
  }

  .ov-recent-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  .ov-recent-actions button {
    width: 100%;
  }

  .ov-recent-table {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .ov-recent-table :is(table, tbody) {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .ov-recent-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ov-recent-table tbody {
    display: grid;
    gap: 10px;
  }

  .ov-recent-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    width: 100%;
    padding: 15px;
    border: 1px solid var(--ov-modern-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 35, 70, .025);
  }

  .ov-recent-table td {
    min-width: 0;
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .ov-recent-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .ov-recent-table td:nth-child(2),
  .ov-recent-table td:nth-child(3) {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
    grid-column: 1 / -1;
  }

  .ov-recent-table td:nth-child(2) {
    grid-row: 2;
  }

  .ov-recent-table td:nth-child(3) {
    grid-row: 3;
    max-width: none;
  }

  .ov-recent-table td:nth-child(4) {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
    grid-column: 1;
    grid-row: 4;
  }

  .ov-recent-table td:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .ov-recent-table td:nth-child(6) {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    justify-self: end;
  }

  .ov-recent-table td:nth-child(2)::before,
  .ov-recent-table td:nth-child(3)::before,
  .ov-recent-table td:nth-child(4)::before {
    color: var(--ov-modern-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
  }

  .ov-recent-table td:nth-child(2)::before {
    content: "Aika";
  }

  .ov-recent-table td:nth-child(3)::before {
    content: "Myyj\00e4";
  }

  .ov-recent-table td:nth-child(4)::before {
    content: "Summa";
  }

  .ov-recent-table td[colspan="6"] {
    display: block;
    grid-column: 1 / -1;
    grid-row: auto;
    padding: 4px;
    color: var(--ov-modern-muted);
    text-align: center;
  }

  .ov-recent-table td[colspan="6"]::before {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ov-nav button,
  .ov-metric,
  .ov-classic-ui .primary-button,
  .ov-classic-ui .secondary-button {
    transition: none;
  }
}

@media print {
  .settings-actions {
    position: static;
    background: transparent;
  }
}