/*
 * Lightweight dimensional UI layer shared by Gedo Store and Smart Ricoh.
 * CSS-only by design: no runtime JavaScript, images or looping effects.
 */
:root {
  --depth-accent: var(--gedo-blue, #2f6df6);
  --depth-navy: var(--gedo-navy, #13233b);
  --depth-navy-strong: var(--gedo-navy-strong, #0b1729);
  --depth-line: rgba(15, 35, 58, 0.1);
  --depth-shadow: rgba(10, 24, 42, 0.14);
  --depth-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  background: #eef3f8;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 92% 0%, rgba(47, 109, 246, 0.075), transparent 27rem),
    radial-gradient(circle at 4% 38%, rgba(19, 35, 59, 0.045), transparent 24rem),
    linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
}

.main-content,
.sahl-dashboard {
  perspective: 1400px;
  perspective-origin: 50% 6rem;
}

/* The shell reads like a raised control surface without a costly blur layer. */
.app-header {
  position: relative;
  isolation: isolate;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 1px 0 rgba(8, 20, 36, 0.72),
    0 12px 30px -20px rgba(4, 13, 26, 0.8);
}

.app-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: -1;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent 4%, var(--depth-accent) 48%, transparent 96%);
  opacity: 0.72;
}

/* Common ERP surfaces get one restrained, reusable depth treatment. */
.main-content :is(
  .bg-white.rounded-xl,
  .returns-toolbar,
  .return-modal-card,
  .acct-panel,
  .acct-stat,
  .ops-ledger-summary,
  .ops-ledger-panel,
  .sr-report-toolbar,
  .sr-report-chart,
  .sr-report-table,
  .sr-report-ranking,
  .sr-report-analysis
) {
  border-color: var(--depth-line);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.76),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(15, 35, 58, 0.035),
    0 8px 18px -16px var(--depth-shadow),
    0 24px 48px -38px rgba(10, 24, 42, 0.34);
  transform-style: preserve-3d;
  transition: transform 200ms var(--depth-ease), box-shadow 200ms var(--depth-ease), border-color 180ms ease;
}

.main-content :is(.returns-hero, .invoices-hero, .counter-workbench, .sr-reports-hero) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 2px 3px rgba(5, 17, 31, 0.15),
    0 24px 52px -30px rgba(5, 17, 31, 0.58);
  transform-style: preserve-3d;
}

/* Dashboard hierarchy: the hero sits deepest, actions and metrics rise above it. */
.sahl-dashboard-hero {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 0 rgba(0, 0, 0, 0.23),
    0 3px 5px rgba(6, 19, 34, 0.18),
    0 28px 58px -32px rgba(6, 19, 34, 0.68);
  transform-style: preserve-3d;
}

.sahl-dashboard :is(
  .sahl-quick-panel,
  .sahl-modules,
  .sahl-metric,
  .sahl-cash-card,
  .sahl-attention-card,
  .sahl-week-card,
  .sahl-top-products,
  .sahl-activity
) {
  border-color: var(--depth-line);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(15, 35, 58, 0.045),
    0 2px 4px rgba(10, 24, 42, 0.035),
    0 18px 38px -30px rgba(10, 24, 42, 0.38);
  transform-style: preserve-3d;
  transition: transform 200ms var(--depth-ease), box-shadow 200ms var(--depth-ease), border-color 180ms ease;
}

.sahl-dashboard :is(.sahl-quick-action, .sahl-modules > button) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(15, 35, 58, 0.08),
    0 8px 18px -15px rgba(10, 24, 42, 0.42);
  transform-style: preserve-3d;
  transition: transform 190ms var(--depth-ease), box-shadow 190ms var(--depth-ease), border-color 180ms ease;
}

.sahl-dashboard .sahl-quick-action b,
.sahl-dashboard .sahl-modules > button > b {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 7px 14px -9px rgba(7, 19, 34, 0.65);
  transform: translateZ(8px);
}

.sahl-period-switch,
.invoices-range,
.sr-report-nav,
.sr-report-presets {
  box-shadow:
    inset 0 2px 4px rgba(10, 24, 42, 0.075),
    0 1px 0 rgba(255, 255, 255, 0.92);
}

.sahl-dashboard :is(.sahl-status, .sahl-activity article, .sahl-top-products li) {
  transition: transform 180ms var(--depth-ease), background-color 180ms ease, border-color 180ms ease;
}

.bottom-nav,
.bottom-nav-more {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 -16px 36px -22px rgba(5, 17, 31, 0.68);
}

/* Short, one-off page reveal; only compositor-friendly properties move. */
@keyframes depth-enter {
  from { opacity: 0; transform: translateY(8px) translateZ(-10px); }
  to { opacity: 1; transform: translateY(0) translateZ(0); }
}

.sahl-dashboard > section {
  animation: depth-enter 420ms var(--depth-ease) both;
}

.sahl-dashboard > section:nth-of-type(2) { animation-delay: 35ms; }
.sahl-dashboard > section:nth-of-type(3) { animation-delay: 70ms; }
.sahl-dashboard > section:nth-of-type(4) { animation-delay: 105ms; }
.sahl-dashboard > section:nth-of-type(5) { animation-delay: 140ms; }

@media (hover: hover) and (pointer: fine) {
  .main-content :is(
    .bg-white.rounded-xl,
    .returns-toolbar,
    .acct-panel,
    .acct-stat,
    .ops-ledger-summary,
    .ops-ledger-panel,
    .sr-report-chart,
    .sr-report-table,
    .sr-report-ranking,
    .sr-report-analysis
  ):hover {
    border-color: rgba(47, 109, 246, 0.2);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.84),
      inset 0 1px 0 #fff,
      inset 0 -1px 0 rgba(15, 35, 58, 0.045),
      0 12px 24px -18px rgba(10, 24, 42, 0.22),
      0 30px 54px -38px rgba(10, 24, 42, 0.46);
    transform: perspective(900px) translateY(-3px) rotateX(0.35deg);
  }

  .sahl-dashboard :is(
    .sahl-quick-panel,
    .sahl-modules,
    .sahl-metric,
    .sahl-cash-card,
    .sahl-attention-card,
    .sahl-week-card,
    .sahl-top-products,
    .sahl-activity
  ):hover {
    border-color: rgba(47, 109, 246, 0.2);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.82),
      inset 0 1px 0 #fff,
      inset 0 -1px 0 rgba(15, 35, 58, 0.05),
      0 12px 22px -18px rgba(10, 24, 42, 0.24),
      0 30px 54px -40px rgba(10, 24, 42, 0.48);
    transform: perspective(900px) translateY(-3px) rotateX(0.35deg);
  }

  .sahl-dashboard :is(.sahl-quick-action, .sahl-modules > button):hover,
  .main-content :is(.btn-accent, .btn-gold, .counter-task, .sr-report-action):hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 12px 22px -13px rgba(7, 19, 34, 0.55);
    transform: perspective(700px) translateY(-2px) translateZ(5px);
  }

  .sahl-dashboard :is(.sahl-status, .sahl-activity article, .sahl-top-products li):hover {
    transform: translateY(-1px) translateZ(3px);
  }
}

.sahl-dashboard :is(.sahl-quick-action, .sahl-modules > button, .sahl-status):active,
.main-content :is(.btn-accent, .btn-gold, .counter-task, .sr-report-action):active {
  transform: translateY(1px) scale(0.985);
  transition-duration: 90ms;
}

@media (max-width: 768px) {
  body {
    background:
      radial-gradient(circle at 100% 0%, rgba(47, 109, 246, 0.055), transparent 18rem),
      linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
  }

  .main-content,
  .sahl-dashboard {
    perspective: none;
  }

  .main-content :is(.bg-white.rounded-xl, .returns-toolbar, .acct-panel, .acct-stat),
  .sahl-dashboard :is(.sahl-quick-panel, .sahl-modules, .sahl-metric, .sahl-cash-card, .sahl-attention-card, .sahl-week-card, .sahl-top-products, .sahl-activity) {
    transform-style: flat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-content,
  .sahl-dashboard {
    perspective: none;
  }

  .sahl-dashboard > section,
  .main-content :is(.bg-white.rounded-xl, .returns-toolbar, .return-modal-card, .acct-panel, .acct-stat, .ops-ledger-summary, .ops-ledger-panel, .sr-report-chart, .sr-report-table, .sr-report-ranking, .sr-report-analysis),
  .sahl-dashboard :is(.sahl-quick-panel, .sahl-modules, .sahl-metric, .sahl-cash-card, .sahl-attention-card, .sahl-week-card, .sahl-top-products, .sahl-activity, .sahl-quick-action, .sahl-modules > button, .sahl-status, .sahl-activity article, .sahl-top-products li) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media print {
  body { background: #fff !important; }
  .main-content,
  .sahl-dashboard { perspective: none; }
  .main-content *,
  .sahl-dashboard * { animation: none !important; transform: none !important; box-shadow: none !important; }
}