/*
 * Rivoli 2026 page layer
 *
 * A presentation layer for the existing, API-bound page contracts. It keeps
 * IDs and data hooks stable while giving every Core product a calm, coherent
 * light workspace surface.
 */
:root {
  --rv-fresh-canvas: #f6f8f4;
  --rv-fresh-ink: #16241c;
  --rv-fresh-muted: #66746b;
  --rv-fresh-line: #dfe7e0;
  --rv-fresh-panel: rgba(255, 255, 255, .92);
  --rv-fresh-mint: #eaf5e9;
  --rv-fresh-lime: #dff58f;
}

body.rv-fresh-page {
  background:
    radial-gradient(circle at 6% -12%, rgba(201, 240, 106, .35), transparent 23rem),
    radial-gradient(circle at 96% 9%, rgba(132, 190, 151, .15), transparent 28rem),
    var(--rv-fresh-canvas);
  color: var(--rv-fresh-ink);
}

/* Core page contract: each legacy product receives the same content frame. */
body.rv-fresh-page #app > main,
body.rv-fresh-page > main,
body.rv-fresh-page .workspace-page {
  width: min(calc(100% - 64px), 1240px);
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  padding: 38px 0 88px;
}

body.rv-fresh-page .workspace-page { padding-top: 38px; }

.rv-fresh-page :is(.view, .workspace-page, .contract-shell) > :first-child { margin-top: 0; }

.rv-fresh-page :is(.view, .workspace-page) > :not([hidden]) + :not([hidden]) { margin-top: 20px; }

.rv-fresh-page .topbar {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(20, 50, 34, .05);
}

.rv-fresh-page .topbar :is(.brand, .main-nav, nav, .shell-context, .header-actions) { min-height: var(--rivoli-header-height); }

.rv-fresh-page main,
.rv-fresh-page .contract-shell,
.rv-fresh-page .workspace-page {
  position: relative;
}

.rv-fresh-page :is(.hero, .welcome, .page-head, .contract-intro, .finance-hero, .finance-head) {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(22, 75, 50, .13);
  border-radius: 24px;
  background: linear-gradient(128deg, rgba(255,255,255,.96), rgba(234,245,233,.9));
  box-shadow: 0 16px 45px rgba(20, 50, 34, .06);
}

.rv-fresh-page :is(.hero, .welcome, .page-head, .contract-intro, .finance-hero, .finance-head)::after {
  position: absolute;
  right: -58px;
  bottom: -88px;
  width: 210px;
  height: 210px;
  border: 34px solid rgba(22, 75, 50, .055);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.rv-fresh-page :is(.hero h1, .welcome h1, .page-head h1, .contract-intro h1, .finance-hero h1, .finance-head h2) {
  max-width: 18ch;
  color: var(--rv-fresh-ink);
  font-weight: 780;
  letter-spacing: -0.055em;
}

.rv-fresh-page :is(.hero > div > p:last-child, .welcome > div > p:last-child, .page-head > div > p:last-child, .contract-intro p, .finance-hero > div > p:last-child, .finance-head p) {
  max-width: 62ch;
  color: var(--rv-fresh-muted);
  font-size: 15px;
}

.rv-fresh-page :is(.card, .detail-card, .section, .side-card, .organization-panel, .people-panel, .tasks-card, .today-card, .finance-card, .panel, .table-card) {
  border-color: var(--rv-fresh-line);
  border-radius: 18px;
  background: var(--rv-fresh-panel);
  box-shadow: 0 8px 28px rgba(20, 50, 34, .045);
}

.rv-fresh-page :is(.card, .detail-card, .section, .side-card, .organization-panel, .people-panel, .tasks-card, .today-card, .finance-card, .panel) > :is(.section-head, .panel-head, .detail-card-head):first-child {
  padding-bottom: 16px;
  border-bottom: 1px solid #edf1ed;
}

.rv-fresh-page :is(.metrics, .customer-metrics, .team-metrics, .kpis, .finance-kpis, .workspace-status) > :is(article, .status-tile) {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rv-fresh-line);
  border-radius: 18px;
  background: var(--rv-fresh-panel);
  box-shadow: 0 8px 28px rgba(20, 50, 34, .04);
}

.rv-fresh-page :is(.metrics, .customer-metrics, .team-metrics, .kpis, .finance-kpis, .workspace-status) > :is(article, .status-tile):first-child {
  border-color: #c5dfc7;
  background: linear-gradient(140deg, #fff, var(--rv-fresh-mint));
}

.rv-fresh-page :is(.metrics, .customer-metrics, .team-metrics, .kpis, .finance-kpis, .workspace-status) strong {
  color: var(--rv-fresh-ink);
  font-weight: 780;
  letter-spacing: -0.045em;
}

.rv-fresh-page :is(.primary, .rv-button--primary) {
  border-color: #164b32;
  border-radius: 11px;
  background: #164b32;
  box-shadow: 0 8px 18px rgba(22, 75, 50, .16);
  font-weight: 750;
}

.rv-fresh-page :is(.primary, .rv-button--primary):hover { background: #0f3c27; transform: translateY(-1px); }

.rv-fresh-page :is(.secondary, .text-button, .rv-button--secondary) {
  border-radius: 11px;
  font-weight: 720;
}

.rv-fresh-page :is(input, select, textarea) {
  border-color: #d6e0d7;
  border-radius: 10px;
  background: rgba(255,255,255,.94);
  box-shadow: inset 0 1px 0 rgba(22,75,50,.025);
}

.rv-fresh-page :is(input, select, textarea):focus {
  border-color: #568064;
  box-shadow: 0 0 0 4px rgba(86,128,100,.13);
}

.rv-fresh-page :is(.table-card, .people-panel) { overflow: hidden; }
.rv-fresh-page table thead { background: #f0f5f0; }
.rv-fresh-page table :is(th, td) { border-color: #e7ede8; }
.rv-fresh-page table tbody tr:hover { background: #f7fbf7; }

.rv-fresh-page :is(.empty, .rv-empty-state) {
  border: 1px dashed #bdd1bf;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #f2f8f2);
}

.rv-fresh-page dialog {
  border: 1px solid var(--rv-fresh-line);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(12, 39, 24, .23);
}

@media (max-width: 800px) {
  body.rv-fresh-page #app > main,
  body.rv-fresh-page > main,
  body.rv-fresh-page .workspace-page {
    width: 100%;
    padding: 26px 16px 68px;
  }

  .rv-fresh-page :is(.hero, .welcome, .page-head, .contract-intro, .finance-hero, .finance-head) { padding: 24px 20px; border-radius: 18px; }
  .rv-fresh-page :is(.hero h1, .welcome h1, .page-head h1, .contract-intro h1, .finance-hero h1, .finance-head h2) { font-size: clamp(30px, 9vw, 38px); }
}