/* Shared visual language for the working pages. Layout, data colors and interactions stay intact. */
:root {
  --work-neo-bg: #d9d9db;
  --work-neo-face: #dedee0;
  --work-neo-ink: #303234;
  --work-neo-muted: #747679;
  --work-neo-line: #c6c7ca;
  --work-neo-light: #fbfbfc;
  --work-neo-dark: #b8b9bc;
  --work-neo-raised: 7px 7px 16px var(--work-neo-dark), -7px -7px 16px var(--work-neo-light);
  --work-neo-raised-small: 4px 4px 9px #babbbd, -4px -4px 9px #f7f7f9;
  --work-neo-inset: inset 4px 4px 8px #bfc0c2, inset -4px -4px 8px #f7f7f9;
}

/* The Next.js client and manager workspaces. */
body.bg-app {
  background: var(--work-neo-bg) !important;
  color: var(--work-neo-ink);
}
:is(.manager-shell,.client-shell) { background-image: none !important; }
.neo-manager-header,
.neo-client-header {
  border: 1px solid #f5f5f6 !important;
  border-radius: 22px !important;
  background: var(--work-neo-face) !important;
  color: var(--work-neo-ink) !important;
  box-shadow: var(--work-neo-raised) !important;
}
.neo-manager-header :is(p,span),
.neo-client-header :is(p,span) { color: #65676a; }
.neo-manager-header .neo-header-caption,
.neo-client-header .neo-header-caption {
  color: #646669;
  font-weight: 700;
  letter-spacing: .09em;
}
.neo-manager-header .neo-header-title,
.neo-client-header .neo-header-title { color: var(--work-neo-ink); }
.neo-manager-header :is(a,button),
.neo-client-header :is(a,button) {
  border: 1px solid #eef0f0 !important;
  border-radius: 12px !important;
  background: var(--work-neo-face) !important;
  color: #343638 !important;
  box-shadow: var(--work-neo-raised-small) !important;
}
.neo-manager-header :is(a,button):hover,
.neo-client-header :is(a,button):hover {
  transform: translateY(-2px);
  box-shadow: 7px 7px 13px #b6b7b9, -6px -6px 13px #fafafb !important;
}
.neo-manager-header :is(a,button):active,
.neo-client-header :is(a,button):active {
  transform: translateY(1px);
  box-shadow: var(--work-neo-inset) !important;
}

/* Raised sections and inset fields, without changing their dimensions. */
:is(.manager-shell,.client-shell) :is(section,article,form).bg-white,
:is(.manager-shell,.client-shell) div.bg-white.rounded-2xl,
:is(.manager-shell,.client-shell) :is(section,article).bg-slate-50 {
  border-color: #f2f2f3 !important;
  border-radius: 20px;
  background: var(--work-neo-face) !important;
  box-shadow: var(--work-neo-raised) !important;
}
:is(.manager-shell,.client-shell) :is(button,a).bg-slate-900 {
  border-color: #323437 !important;
  background: #36383b !important;
  color: #fff !important;
  box-shadow: 4px 4px 9px #b4b5b7, -4px -4px 9px #f7f7f9 !important;
}
:is(.manager-shell,.client-shell) :is(input,select,textarea).bg-white,
:is(.manager-shell,.client-shell) :is(input,select,textarea).bg-slate-50 {
  border-color: var(--work-neo-line) !important;
  background: var(--work-neo-face) !important;
  color: var(--work-neo-ink) !important;
  box-shadow: var(--work-neo-inset) !important;
}
:is(.manager-shell,.client-shell) :is(button,a).bg-white:not(.neo-header-button) {
  border-color: #eef0f0 !important;
  background: var(--work-neo-face) !important;
  box-shadow: var(--work-neo-raised-small) !important;
}
:is(.manager-shell,.client-shell) :is(button,a).bg-white:not(.neo-header-button):active {
  box-shadow: var(--work-neo-inset) !important;
}
.manager-shell main nav a.bg-white {
  border-color: #f3f3f4 !important;
  border-radius: 20px;
  background: var(--work-neo-face) !important;
  box-shadow: var(--work-neo-raised) !important;
}

/* Attendance retains its color-coded shifts and totals. */
.attendance-hero,
.attendance-stats > :is(div,article),
.attendance-page-wide > section.bg-white {
  border-color: #f3f3f4 !important;
  background: var(--work-neo-face) !important;
  box-shadow: var(--work-neo-raised) !important;
}
.attendance-hero-main,
.attendance-controls {
  border-color: var(--work-neo-line) !important;
  background: var(--work-neo-face) !important;
  color: var(--work-neo-ink) !important;
}
.attendance-hero-main :is(h1,p) { color: var(--work-neo-ink) !important; }
.attendance-hero-main :is(a,button) {
  border: 1px solid #eff0f1 !important;
  background: var(--work-neo-face) !important;
  color: var(--work-neo-ink) !important;
  box-shadow: var(--work-neo-raised-small) !important;
}

/* Planogram chrome only: shelves, status colors, SKU cards and animation are untouched. */
.planogram-workspace .planogram-top-bar,
.planogram-workspace .planogram-mini-overview {
  border-color: #f1f2f3 !important;
  background: var(--work-neo-face) !important;
  box-shadow: var(--work-neo-raised) !important;
}
.planogram-workspace .planogram-top-bar :is(input,select) {
  border-color: var(--work-neo-line) !important;
  background: var(--work-neo-face) !important;
  box-shadow: var(--work-neo-inset) !important;
}

/* The static stock/brand workspace. */
body:has(.app-shell:not(.neo-home-shell)),
body:has(.sales-shell) { background: var(--work-neo-bg); }
.app-shell:not(.neo-home-shell) {
  --ink: var(--work-neo-ink);
  --muted: var(--work-neo-muted);
  --line: var(--work-neo-line);
  --panel: var(--work-neo-face);
  color: var(--work-neo-ink);
}
.app-shell:not(.neo-home-shell) > .topbar {
  border-color: #f5f5f6;
  border-radius: 0 0 20px 20px;
  background: var(--work-neo-face);
  box-shadow: var(--work-neo-raised);
}
.app-shell:not(.neo-home-shell) .main-site-logo-link { mix-blend-mode: multiply; }
.app-shell:not(.neo-home-shell) :is(.brand-section-tabs,.siberia-section-nav) {
  border: 1px solid #f1f1f2;
  border-radius: 15px;
  background: var(--work-neo-face);
  box-shadow: var(--work-neo-inset);
}
.app-shell:not(.neo-home-shell) :is(.brand-section-tabs,.siberia-section-nav) button.active {
  border-radius: 11px;
  background: var(--work-neo-face);
  box-shadow: var(--work-neo-raised-small);
}
.app-shell:not(.neo-home-shell) :is(
  .siberia-hub-heading,
  .siberia-hub-grid button,
  .metric-card,
  .table-shell,
  .store-traffic-card:not(.red):not(.yellow):not(.green),
  .store-seller-card:not(.red):not(.yellow):not(.green),
  .seller-card:not(.red):not(.yellow):not(.green),
  .sku-card:not(.red):not(.yellow):not(.green),
  .expiry-store-card,
  .action-card,
  .product-card:not(.actual-missing),
  .alphapet-product-card:not(.has-discrepancy),
  .baurenhof-product-card:not(.has-discrepancy)
) {
  border-color: #f3f3f4;
  border-radius: 20px;
  background: var(--work-neo-face);
  box-shadow: var(--work-neo-raised);
}
.app-shell:not(.neo-home-shell) .siberia-hub-icon {
  background: var(--work-neo-face);
  box-shadow: var(--work-neo-inset);
}
.app-shell:not(.neo-home-shell) :is(.admin-page,.store-page) :is(input,select,textarea):not([type=checkbox]):not([type=radio]) {
  border-color: var(--work-neo-line);
  border-radius: 10px;
  background: var(--work-neo-face);
  box-shadow: var(--work-neo-inset);
}
.app-shell:not(.neo-home-shell) :is(.portal-home-button,.app-user-menu,.back-button,.secondary-button) {
  border-color: #f2f2f3;
  background: var(--work-neo-face);
  box-shadow: var(--work-neo-raised-small);
}

/* KPI hierarchy keeps its cards and flip behaviour, with the same neutral material. */
.sales-shell:has(.seller-kpi-page) {
  background: var(--work-neo-bg) !important;
  background-image: none !important;
}
.seller-kpi-page { color: var(--work-neo-ink); }
.seller-kpi-header,
.seller-kpi-navigation-card,
.seller-kpi-face,
.seller-kpi-unassigned,
.seller-kpi-empty {
  border: 1px solid #f1f2f3;
  border-radius: 19px;
  background: var(--work-neo-face) !important;
  color: var(--work-neo-ink);
  box-shadow: var(--work-neo-raised) !important;
}
.seller-kpi-header { border-left-color: #f1f2f3; }
.seller-kpi-header p,
.seller-kpi-navigation-footer,
.seller-kpi-muted { color: var(--work-neo-muted); }
.seller-kpi-header::before,
.seller-kpi-navigation-card::before,
.seller-kpi-face::before {
  background: linear-gradient(#f7f7f8,#929497) !important;
  box-shadow: inset 0 2px 2px #fff, inset 0 -2px 3px #35353529, 0 3px 6px #45464936 !important;
}
.seller-kpi-navigation-card:hover {
  transform: translateY(-3px);
  border-color: #eff0f1;
  box-shadow: 10px 12px 19px #b2b3b6, -9px -9px 18px #fbfbfc !important;
}
.seller-kpi-toolbar input,
.seller-kpi-main-metric,
.seller-kpi-header-actions :is(button,a),
.seller-kpi-breadcrumbs button {
  border-color: var(--work-neo-line);
  background: var(--work-neo-face) !important;
  color: var(--work-neo-ink);
  box-shadow: var(--work-neo-inset) !important;
}
.seller-kpi-main-metric strong { color: var(--work-neo-ink); }
.seller-kpi-back { background: var(--work-neo-face) !important; }

:is(.manager-shell,.client-shell,.app-shell,.sales-shell) :focus-visible {
  outline: 2px solid #5a5c60 !important;
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .neo-manager-header,.neo-client-header { border-radius: 17px !important; }
  :is(.manager-shell,.client-shell) :is(section,article,form).bg-white { border-radius: 16px; }
  .app-shell:not(.neo-home-shell) :is(.siberia-hub-heading,.siberia-hub-grid button,.metric-card,.table-shell) { border-radius: 16px; }
  .seller-kpi-header,.seller-kpi-navigation-card,.seller-kpi-face { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .seller-kpi-navigation-card:hover,
  .neo-manager-header :is(a,button):hover,
  .neo-client-header :is(a,button):hover { transform: none; }
}
@media print {
  body.bg-app,
  body:has(.app-shell:not(.neo-home-shell)),
  body:has(.sales-shell) { background: #fff !important; }
  :is(.manager-shell,.client-shell,.app-shell,.sales-shell) :is(section,article,form,header,button,input,select,textarea,a) {
    box-shadow: none !important;
  }
}

/* Auth: the same material on sign-in, registration, recovery, reset and store selection. */
.app-auth-screen,
.orderapp-auth-page {
  min-height: 100svh;
  background: #d9d9db !important;
  color: #303234;
}
.app-auth-screen > .app-auth-card,
.orderapp-auth-card {
  border: 1px solid #f5f5f6 !important;
  border-radius: 26px !important;
  background: #dedee0 !important;
  box-shadow: 12px 12px 28px #b5b6b9, -12px -12px 28px #f9f9fb !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #303234;
}
.app-auth-screen > form.app-auth-card::before {
  left: 34px;
  right: 34px;
  height: 3px;
  background: linear-gradient(90deg, #b9babc, #f8f8f9 48%, #b9babc);
  box-shadow: 0 2px 4px #77787a33, 0 -1px 1px #fff;
}
.app-auth-screen > form.app-auth-card > img {
  width: min(250px, 78%);
  height: 70px;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.app-auth-screen > .app-auth-card h1,
.orderapp-auth-card h1 { color: #303234 !important; font-weight: 600; }
.orderapp-auth-card > p:first-child { color: #75777a !important; }
.app-auth-screen > .app-auth-card p,
.orderapp-auth-card p { color: #686a6d !important; }
.app-auth-screen > .app-auth-card label > span { color: #414346 !important; }
.app-auth-screen > form.app-auth-card input:not([type="checkbox"]):not([type="radio"]),
.app-auth-screen > form.app-auth-card select,
.orderapp-auth-card input {
  border: 1px solid #c1c2c5 !important;
  border-radius: 12px !important;
  background: #dedee0 !important;
  color: #303234 !important;
  box-shadow: inset 4px 4px 8px #bfc0c2, inset -4px -4px 8px #f7f7f9 !important;
}
.app-auth-screen > form.app-auth-card input::placeholder { color: #85878a; }
.app-auth-screen > form.app-auth-card input:focus-visible,
.app-auth-screen > form.app-auth-card select:focus-visible,
.orderapp-auth-card input:focus-visible {
  outline: 2px solid #646669 !important;
  outline-offset: 2px;
}
.app-auth-screen > form.app-auth-card > button[type="submit"],
.orderapp-auth-card button[type="submit"] {
  border: 1px solid #505257 !important;
  border-radius: 13px !important;
  background: linear-gradient(155deg, #55575b, #303235) !important;
  color: #fff !important;
  box-shadow: 5px 5px 11px #b3b4b7, -5px -5px 11px #fafafb, inset 0 1px 1px #ffffff55 !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.app-auth-screen > form.app-auth-card > button[type="submit"]:not(:disabled):hover,
.orderapp-auth-card button[type="submit"]:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 14px #adb0b2, -7px -7px 14px #fbfbfc !important;
}
.app-auth-screen > form.app-auth-card > button[type="submit"]:not(:disabled):active,
.orderapp-auth-card button[type="submit"]:not(:disabled):active {
  transform: translateY(1px);
  box-shadow: inset 3px 3px 6px #242629, inset -2px -2px 5px #737579 !important;
}
.app-auth-screen > form.app-auth-card .app-auth-password-control button {
  border: 0 !important;
  background: transparent !important;
  color: #55575a !important;
  box-shadow: none !important;
}
.app-auth-screen > form.app-auth-card .app-auth-password-control button:hover {
  background: #d1d2d4 !important;
}
.app-auth-screen > form.app-auth-card .app-auth-remember input { accent-color: #444649; }
.app-auth-screen > form.app-auth-card .app-auth-links {
  border-top: 1px solid #c5c6c8;
  padding-top: 15px;
}
.app-auth-screen > form.app-auth-card .app-auth-links button,
.orderapp-auth-card a {
  color: #414346 !important;
  text-decoration-color: #9a9c9e;
}
.app-auth-screen > form.app-auth-card .app-auth-links:has(button:nth-child(2)) button:first-child {
  border: 1px solid #eeeff0;
  background: #dedee0;
  box-shadow: var(--work-neo-raised-small);
}
.app-auth-screen > form.app-auth-card .app-auth-links button:hover,
.orderapp-auth-card a:hover { color: #111214 !important; text-decoration: underline; }
.app-auth-screen .app-auth-store-list {
  border-color: #c5c6c9;
  background: #d9d9db;
  box-shadow: var(--work-neo-inset);
}
.app-auth-screen .app-auth-store-list label:hover,
.app-auth-screen .app-auth-store-list label:has(input:checked) {
  background: #e8e8ea;
  box-shadow: var(--work-neo-raised-small);
}
.app-auth-screen .app-auth-store-list input { accent-color: #444649; }
.app-auth-screen .app-auth-status {
  padding: 18px 24px;
  border-radius: 16px;
  background: #dedee0;
  color: #414346;
  box-shadow: var(--work-neo-raised);
}

/* Attendance: raised frame and controls, inset calendar; shift colors remain meaningful. */
.attendance-page-wide { color: #303234; }
.attendance-page-wide .attendance-checkin,
.attendance-page-wide .attendance-table-shell,
.attendance-page-wide .attendance-mobile-person,
.attendance-dialog,
.attendance-picker {
  border-color: #f1f2f3 !important;
  background: #dedee0 !important;
  box-shadow: var(--work-neo-raised) !important;
}
.attendance-page-wide .attendance-hero-main {
  background: #dedee0 !important;
  border-bottom: 1px solid #c5c6c8 !important;
}
.attendance-page-wide .attendance-checkin { border-radius: 18px; }
.attendance-page-wide .attendance-checkin > div > div,
.attendance-page-wide .attendance-table-shell > div:first-child,
.attendance-page-wide .attendance-mobile-person > header {
  border-color: #c5c6c8 !important;
  background: #dedee0 !important;
}
.attendance-page-wide .attendance-stats > :is(div,article) { border-radius: 17px; }
.attendance-page-wide .attendance-stats > div a {
  background: #45474b !important;
  color: #fff !important;
  box-shadow: var(--work-neo-raised-small);
}
.attendance-page-wide .attendance-stats > div a[aria-disabled="true"] {
  background: #a8a9ab !important;
}
.attendance-page-wide .attendance-table-shell { overflow: hidden; }
.attendance-page-wide .attendance-table-shell > div:last-child {
  background: #d5d6d8;
  box-shadow: inset 3px 3px 7px #b9babc, inset -3px -3px 7px #f3f3f4;
}
.attendance-page-wide .attendance-grid thead th:not(.bg-amber-200) {
  background: #d2d3d5 !important;
  border-color: #bdbfc1 !important;
}
.attendance-page-wide .attendance-grid tbody tr:nth-child(odd) > th,
.attendance-page-wide .attendance-grid tbody tr:nth-child(odd) > td:not(.bg-amber-100\/80) {
  background: #e5e5e7 !important;
}
.attendance-page-wide .attendance-grid tbody tr:nth-child(even) > th,
.attendance-page-wide .attendance-grid tbody tr:nth-child(even) > td:not(.bg-amber-100\/80) {
  background: #dbdcde !important;
}
.attendance-page-wide .attendance-grid tbody select:not(.bg-indigo-600):not(.bg-slate-200) {
  border-color: #c3c4c6 !important;
  background: #e4e4e6 !important;
  box-shadow: inset 2px 2px 4px #c5c6c8, inset -2px -2px 4px #fff !important;
}
.attendance-page-wide .attendance-mobile-person > div { background: #dedee0; }
.attendance-page-wide .attendance-mobile-person button.bg-slate-100,
.attendance-page-wide .attendance-mobile-person button.bg-white {
  background: #d9d9db !important;
  box-shadow: var(--work-neo-raised-small) !important;
}
.attendance-dialog :is(input,select),
.attendance-picker :is(input,select) {
  background: #dedee0 !important;
  box-shadow: var(--work-neo-inset) !important;
}
.attendance-dialog :is(button.bg-slate-100,button.border-slate-300),
.attendance-picker :is(button.bg-slate-100,button.border-slate-200) {
  background: #dedee0 !important;
  box-shadow: var(--work-neo-raised-small) !important;
}
.attendance-picker button.bg-slate-700 { box-shadow: var(--work-neo-inset) !important; }

/* Neutral secondary screens in the static stock/order workspace. */
.app-shell:not(.neo-home-shell) :is(.sales-panel,.toolbar,.sticky-controls,.sales-login-card,.traffic-board,.recommendation-group-heading) {
  border-color: #f1f2f3;
  background: #dedee0;
  box-shadow: var(--work-neo-raised);
}
.app-shell:not(.neo-home-shell) :is(.secondary-button,.primary-button,.view-tabs button.active) {
  box-shadow: var(--work-neo-raised-small);
}
.app-shell:not(.neo-home-shell) .sales-login-card input {
  border-color: #c1c2c5;
  background: #dedee0;
  box-shadow: var(--work-neo-inset);
}

@media (max-width: 640px) {
  .app-auth-screen { padding: 16px; }
  .app-auth-screen > .app-auth-card { border-radius: 21px !important; padding: 27px 22px !important; }
  .app-auth-screen > form.app-auth-card > img { width: min(220px, 75%); height: 62px; }
  .attendance-page-wide .attendance-stats > :is(div,article) { border-radius: 14px; }
  .attendance-page-wide .attendance-mobile-person { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-auth-screen > form.app-auth-card > button[type="submit"],
  .orderapp-auth-card button[type="submit"] { transition: none; }
}
@media print {
  .attendance-page-wide .attendance-table-shell,
  .attendance-page-wide .attendance-grid tbody tr > :is(th,td) { box-shadow: none !important; }
}

.attendance-page-wide .attendance-grid thead th span.tabular-nums { font-family: 'Golos Text', Arial, sans-serif; font-size: 14px; font-weight: 500 !important; font-variant-numeric: tabular-nums; }
.attendance-page-wide .attendance-mobile-person button span.tabular-nums { font-family: 'Golos Text', Arial, sans-serif; font-size: 11px; font-weight: 500 !important; }