/*
  Bel Ami visual theme layer.
  Keep this file visual-only: no layout data, no business logic, no print content rules.
*/

:root {
  --ba-green: #245735;
  --ba-green-deep: #173523;
  --ba-wood: #4a2b1b;
  --ba-bronze: #9a6a35;
  --ba-cream: #f7f5f1;
  --ba-paper: #fffdf7;
  --ba-porcelain: #fffcf4;
  --ba-ink-soft: #2d2118;
  --ba-muted: #81786a;
  --ba-line: rgba(74, 43, 27, 0.16);
  --ba-green-line: rgba(36, 87, 53, 0.22);
  --ba-glass: rgba(255, 253, 247, 0.78);
  --ba-glass-strong: rgba(255, 253, 247, 0.92);
  --ba-shadow-soft: 0 18px 44px rgba(45, 34, 22, 0.12);
  --ba-shadow-lift: 0 28px 70px rgba(23, 53, 35, 0.18);
  --ba-inset: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

html {
  background: #efe9dc;
}

body {
  color: var(--ba-wood);
  background:
    linear-gradient(135deg, rgba(36, 87, 53, 0.09) 0%, rgba(36, 87, 53, 0.025) 28%, transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(231, 224, 210, 0.74)),
    repeating-linear-gradient(90deg, rgba(74, 43, 27, 0.026) 0 1px, transparent 1px 22px),
    #f3eee4 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent 22%, transparent 78%, rgba(23, 53, 35, 0.045)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 30px);
}

button,
.link-button,
.tab-link {
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

button:not(:disabled):hover,
.link-button:hover,
.tab-link:hover {
  transform: translateY(-1px);
}

button:not(:disabled):active,
.link-button:active,
.tab-link:active {
  transform: translateY(0);
}

button,
.link-button {
  border-color: rgba(36, 87, 53, 0.9) !important;
  background: linear-gradient(180deg, #2e6741, var(--ba-green)) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(36, 87, 53, 0.16), var(--ba-inset) !important;
}

button.secondary,
.link-button.secondary,
.actions a,
.tab-link:not(.primary) {
  border-color: var(--ba-line) !important;
  background: rgba(255, 248, 233, 0.88) !important;
  color: var(--ba-wood) !important;
  box-shadow: 0 4px 12px rgba(74, 43, 27, 0.07), var(--ba-inset) !important;
}

button.danger {
  background: rgba(255, 253, 248, 0.92) !important;
  border-color: rgba(180, 35, 24, 0.34) !important;
  color: #a12a22 !important;
  box-shadow: 0 4px 12px rgba(180, 35, 24, 0.08), var(--ba-inset) !important;
}

input,
textarea,
select {
  border-color: rgba(74, 43, 27, 0.18) !important;
  background: rgba(255, 254, 249, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

input:focus,
textarea:focus,
select:focus,
button:focus,
.link-button:focus,
.tab-link:focus {
  outline: 2px solid rgba(154, 106, 53, 0.9) !important;
  outline-offset: 2px !important;
}

.auth-card,
.entry,
.topbar,
.panel,
.bank-modal-card,
.mobile-dish-card,
.mobile-bank-fullscreen-header,
.mobile-bank-group {
  border-color: var(--ba-green-line) !important;
  background: var(--ba-glass) !important;
  box-shadow: var(--ba-shadow-soft), var(--ba-inset) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.auth-card,
.entry,
.bank-modal-card,
.mobile-dish-card {
  background: var(--ba-glass-strong) !important;
  box-shadow: var(--ba-shadow-lift), var(--ba-inset) !important;
}

.topbar {
  overflow: hidden;
}

.topbar::after,
.entry::after,
.auth-card::after {
  content: "";
  position: absolute;
  inset-inline: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(154, 106, 53, 0.52), transparent);
  pointer-events: none;
}

.topbar,
.entry,
.auth-card {
  position: relative;
}

.brand-logo-image,
.brand img,
.topbar img,
.logo,
.auth-card img {
  filter: drop-shadow(0 8px 16px rgba(23, 53, 35, 0.12));
}

.brand-tool-title h1,
.brand-title,
.specials {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42),
    1px 1px 0 var(--ba-green),
    2px 2px 0 rgba(23, 53, 35, 0.55) !important;
}

.grid,
.workspace {
  isolation: isolate;
}

.work-note,
.page-status,
.spacing-controls,
.slot-strip,
.bank-list,
.modal-edit-form,
.dish-field-card,
.count-card,
.form-row,
.fixed-field,
.yesterday-preview {
  border-color: var(--ba-line) !important;
  background: rgba(255, 250, 240, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.count-value,
.active-date-label,
.mobile-bank-group-count {
  border-color: rgba(154, 106, 53, 0.24) !important;
  background: rgba(255, 248, 233, 0.78) !important;
}

.preview-frame,
.preview-shell,
.sheet-wrap {
  border-color: rgba(74, 43, 27, 0.14) !important;
  background:
    linear-gradient(135deg, rgba(36, 87, 53, 0.1), transparent 38%),
    repeating-linear-gradient(90deg, rgba(74, 43, 27, 0.045) 0 1px, transparent 1px 18px),
    #ded6c7 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 0 0 1px rgba(255, 255, 255, 0.26),
    0 18px 42px rgba(45, 34, 22, 0.12);
}

.preview-sheet,
.print-page,
.sheet {
  background: #fff !important;
}

@media screen {
  .preview-sheet,
  .print-page {
    box-shadow:
      0 2px 0 rgba(74, 43, 27, 0.08),
      0 26px 58px rgba(23, 53, 35, 0.18) !important;
  }
}

.preview-sheet .print-dish:hover,
.preview-sheet .print-dish.selected {
  background: rgba(36, 87, 53, 0.075) !important;
  box-shadow: inset 0 0 0 1px rgba(36, 87, 53, 0.16);
}

.preview-sheet .print-dish.selected {
  box-shadow:
    inset 0 0 0 2px rgba(154, 106, 53, 0.42),
    0 8px 18px rgba(154, 106, 53, 0.12);
}

.preview-sheet .print-dish.empty-slot {
  border-color: rgba(154, 106, 53, 0.38) !important;
  background: rgba(251, 248, 240, 0.88) !important;
}

.inline-bank-picker,
.bank-item,
.inline-bank-option,
.mobile-bank-variant,
.mobile-bank-empty-results {
  border-color: var(--ba-line) !important;
  background: rgba(255, 253, 247, 0.94) !important;
  color: var(--ba-wood) !important;
}

.count-chip:not(.active),
.slot-button:not(.selected),
.inline-bank-option,
.mobile-bank-variant,
.mobile-bank-open-button.secondary,
.spacing-controls button:not(.active),
.date-shortcuts button:not(.active) {
  border-color: var(--ba-line) !important;
  background: rgba(255, 248, 233, 0.88) !important;
  color: var(--ba-wood) !important;
  box-shadow: 0 4px 12px rgba(74, 43, 27, 0.06), var(--ba-inset) !important;
}

.count-chip.active,
.slot-button.selected,
button.toggle-button.active,
.spacing-controls button.active {
  border-color: rgba(36, 87, 53, 0.9) !important;
  background: linear-gradient(180deg, #2e6741, var(--ba-green)) !important;
  color: #fff !important;
}

.bank-name,
.mobile-bank-group-name,
.mobile-bank-variant-main,
.panel-title h2,
.setup-intro h2,
h1,
h2,
h3 {
  color: var(--ba-green) !important;
}

.selected-label,
.small-note,
.hint,
.status,
label,
.bank-meta,
.mobile-bank-variant-meta,
.subtitle,
.tab-note {
  color: var(--ba-muted) !important;
}

.tab-link {
  border-radius: 14px !important;
}

.tab-link.primary {
  border-color: rgba(36, 87, 53, 0.58) !important;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #2d6641, var(--ba-green-deep)) !important;
  color: #fff !important;
  box-shadow: 0 18px 36px rgba(23, 53, 35, 0.2), var(--ba-inset) !important;
}

.tab-link.primary .tab-note {
  color: rgba(255, 255, 255, 0.78) !important;
}

.mobile-dish-sheet,
.bank-modal,
.mobile-bank-fullscreen {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobile-dish-card,
.bank-modal-card {
  border-radius: 16px !important;
}

.mobile-bank-fullscreen {
  background:
    linear-gradient(135deg, rgba(36, 87, 53, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(231, 224, 210, 0.86)),
    #f3eee4 !important;
}

.mobile-bank-fullscreen-search,
.mobile-bank-search,
.bank-modal-search {
  border-color: rgba(36, 87, 53, 0.2) !important;
  background: rgba(255, 253, 247, 0.96) !important;
}

.mobile-editor-toast {
  border-color: rgba(255, 255, 255, 0.32) !important;
  background: linear-gradient(180deg, #2d6741, var(--ba-green)) !important;
}

@media (max-width: 760px) {
  body {
    background:
      linear-gradient(135deg, rgba(36, 87, 53, 0.08), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(231, 224, 210, 0.84)),
      #f3eee4 !important;
  }

  .topbar,
  .panel,
  .entry,
  .auth-card {
    border-radius: 14px !important;
  }

  .mobile-dish-card {
    border-radius: 22px 22px 0 0 !important;
  }

  .preview-frame,
  .preview-shell {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }

  button:not(:disabled):hover,
  .link-button:hover,
  .tab-link:hover {
    transform: none;
  }
}

@media print {
  html,
  body {
    background: #fff !important;
  }

  body::before {
    display: none !important;
  }

  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
  }

  .print-sheet,
  .print-page,
  .sheet {
    background: #fff !important;
  }
}