/*
 * Play'N Operations visual system
 *
 * This final PWA-only layer aligns Operations with the Inventory product.
 * It intentionally changes presentation only: IDs, form structure, event
 * handlers, permissions, calculations, and backend behavior remain untouched.
 */

:root {
  --playn-yellow: #ffd400;
  --playn-blue: #0099d6;
  --playn-green: #74c064;
  --playn-orange: #f05e3d;
  --playn-pink: #ed7fae;
  --playn-ink: #111827;
  --playn-text: #273449;
  --playn-muted: #6b7280;
  --playn-line: #e7ecf2;
  --playn-surface: #ffffff;
  --playn-soft: #f8fafc;
  --playn-cream: #fff9e6;
  --playn-shadow: 0 16px 38px rgba(17, 24, 39, 0.08);
  --playn-shadow-soft: 0 8px 22px rgba(17, 24, 39, 0.06);

  --yellow: var(--playn-yellow);
  --blue: var(--playn-blue);
  --green: var(--playn-green);
  --orange: var(--playn-orange);
  --pink: var(--playn-pink);
  --ink: var(--playn-ink);
  --text: var(--playn-text);
  --muted: var(--playn-muted);
  --line: var(--playn-line);
  --surface: var(--playn-surface);
  --surface-soft: var(--playn-soft);
  --shadow-lg: 0 28px 70px rgba(17, 24, 39, 0.12);
  --shadow-md: var(--playn-shadow);
  --shadow-sm: var(--playn-shadow-soft);
  --radius-lg: 24px;
}

/* Shared shell hardening: deterministic icons, groups, rhythm, and focus */
.dashboard-sidebar .blue-icon,
.operations-role-item .blue-icon{color:#fff!important;background:var(--playn-blue)!important}
.dashboard-sidebar .green-icon,
.operations-role-item .green-icon{color:#fff!important;background:var(--playn-green)!important}
.dashboard-sidebar .pink-icon,
.operations-role-item .pink-icon{color:#fff!important;background:var(--playn-pink)!important}
.dashboard-sidebar .orange-icon,
.operations-role-item .orange-icon{color:#fff!important;background:var(--playn-orange)!important}
.dashboard-sidebar .yellow-icon,
.operations-role-item .yellow-icon{color:#4e4200!important;background:var(--playn-yellow)!important}
.dashboard-sidebar .sidebar-icon,.operations-role-item .sidebar-icon{display:grid!important;place-items:center!important;flex:0 0 auto!important}
.dashboard-sidebar .sidebar-group{display:block;width:100%;min-width:0}
.dashboard-sidebar .sidebar-group{height:auto!important;max-height:none!important;overflow:visible!important}
#recordsGroup,#settingsGroup{height:48px!important;min-height:48px!important}
#recordsGroup.open{height:184px!important}
#settingsGroup.open{height:98px!important}
.dashboard-sidebar .sidebar-group.hidden{display:none!important}
.dashboard-sidebar .sidebar-group-label{min-width:0;display:grid!important;gap:2px;line-height:1.15}
.dashboard-sidebar .sidebar-group-label strong{display:block;color:inherit;font-size:11px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-sidebar .sidebar-group-label small{display:block;color:#7b8794;font-size:8px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-sidebar .sidebar-group-menu{display:none;padding:4px 0 4px 12px}
.dashboard-sidebar .sidebar-group.open>.sidebar-group-menu{display:grid;gap:4px}
.dashboard-sidebar .sidebar-subitem{min-height:42px}
.dashboard-sidebar .sidebar-group-chevron{display:grid;place-items:center;transition:transform .16s ease}
.dashboard-sidebar .sidebar-group.open .sidebar-group-chevron{transform:rotate(180deg)}
.dashboard-sidebar .sidebar-item:focus-visible,
.dashboard-sidebar .sidebar-group-toggle:focus-visible,
.operations-role-item:focus-visible{outline:3px solid rgba(0,153,214,.25);outline-offset:2px}
.dashboard-main-content{padding-left:32px!important;padding-right:32px!important}
@media(max-width:960px){.dashboard-main-content{padding-left:18px!important;padding-right:18px!important}.dashboard-sidebar .sidebar-group-menu{position:static}}

html {
  background: var(--playn-cream);
}

body {
  color: var(--playn-text);
  background:
    radial-gradient(circle at 5% 0%, rgba(116, 192, 100, 0.15), transparent 25%),
    radial-gradient(circle at 95% 8%, rgba(0, 153, 214, 0.12), transparent 28%),
    linear-gradient(180deg, #f8fbfa 0%, var(--playn-cream) 100%);
}

/* Shared controls */

.btn {
  min-height: 44px;
  padding-inline: 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: none;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.1);
}

.btn-primary {
  color: var(--playn-ink);
  border: 0;
  background: var(--playn-yellow);
  box-shadow: 0 10px 20px rgba(255, 212, 0, 0.2);
}

.btn-primary:hover:not(:disabled) {
  background: #f6ca00;
}

.btn-secondary,
.btn-success {
  color: #fff;
  border: 0;
  background: var(--playn-green);
}

.btn-soft {
  color: var(--playn-ink);
  border: 1px solid var(--playn-line);
  background: var(--playn-soft);
}

.btn-danger {
  color: #fff;
  background: #c62828;
}

input,
select,
textarea {
  min-height: 48px;
  border: 1px solid var(--playn-line);
  border-radius: 12px;
  padding-inline: 14px;
  color: var(--playn-ink);
  background: #fff;
  font-size: 14px;
  font-weight: 500;
}

textarea {
  padding-block: 12px;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #c7d0dc;
}

input:focus,
select:focus,
textarea:focus {
  border: 1px solid var(--playn-blue);
  box-shadow: 0 0 0 4px rgba(0, 153, 214, 0.12);
}

.field label {
  margin-bottom: 7px;
  color: var(--playn-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.field small {
  color: var(--playn-muted);
}

.section-kicker {
  color: var(--playn-orange);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

/* Login */

.login-page {
  width: min(1160px, calc(100% - 34px));
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  gap: 24px;
  padding-block: 28px;
  background: transparent;
}

.login-brand-card,
.login-form-card {
  border: 1px solid var(--playn-line);
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--playn-shadow);
}

.login-brand-card {
  min-height: 610px;
  padding: 44px;
  color: var(--playn-ink);
  background:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.9)),
    url("/brand/playn-geometric-pattern.png") center / cover;
}

.login-brand-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: 34px;
  bottom: 34px;
  width: 205px;
  height: 205px;
  border: 0;
  border-radius: 0;
  background: transparent
    url("/brand/playn-duck-mascot-transparent.png") center / contain no-repeat;
  filter: drop-shadow(0 16px 14px rgba(160, 95, 20, 0.22));
}

.login-brand-card::after,
.brand-pattern-layer,
.official-motto {
  display: none;
}

.official-logo {
  background-image: url("/brand/playn-wordmark-wide.png");
}

.official-logo-large {
  width: 250px;
  height: 82px;
}

.login-brand-content {
  min-height: 520px;
}

.brand-tags {
  margin-top: 22px;
}

.brand-tag {
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.login-copy {
  max-width: 570px;
  margin: auto 0 0;
  padding: 0 245px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.login-copy h1 {
  margin: 10px 0;
  color: var(--playn-ink);
  font-family: "Roboto Flex", "Roboto", Arial, sans-serif;
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.login-copy p {
  color: var(--playn-muted);
  line-height: 1.65;
}

.login-form-card {
  padding: 38px;
}

.official-logo-form {
  width: 170px;
  height: 64px;
  margin-bottom: 18px;
}

.login-heading h2 {
  margin-top: 6px;
  font-size: 28px;
}

#loginButton {
  color: var(--playn-ink);
  background: var(--playn-yellow);
}

#loginButton:hover:not(:disabled) {
  background: #f6ca00;
}

/* Top bar */

.app-header,
.app-view {
  width: min(1580px, calc(100% - 40px));
}

.app-header {
  position: sticky;
  top: 10px;
  min-height: 76px;
  margin-top: 10px;
  padding: 12px 14px 12px 18px;
  overflow: hidden;
  border: 1px solid var(--playn-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--playn-shadow-soft);
  backdrop-filter: blur(16px);
}

.app-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: url("/brand/playn-geometric-pattern.png") center 44% / 360px auto;
}

.official-logo-nav {
  width: 118px;
  height: 48px;
}

.header-brand h2 {
  color: var(--playn-ink);
  font-size: 17px;
  font-weight: 800;
}

.header-brand p,
.user-meta span {
  color: var(--playn-muted);
}

.notification-toggle {
  min-height: 42px;
  border: 1px solid var(--playn-line);
  border-radius: 12px;
  color: #425066;
  background: var(--playn-soft);
}

.notification-toggle.enabled {
  color: #166534;
  border-color: #b9dfb2;
  background: #effbec;
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #fff;
  background: var(--playn-orange);
}

.app-view {
  margin-top: 18px;
}

/* Inventory-style heroes */

.cashier-hero,
.dashboard-hero {
  min-height: 225px;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 22px;
  padding: 30px;
  color: var(--playn-ink);
  border: 0;
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.34)),
    url("/brand/playn-geometric-pattern.png") right center / 65% auto;
  box-shadow: var(--playn-shadow);
}

.cashier-hero-pattern,
.dashboard-hero-pattern,
.cashier-hero::after,
.dashboard-hero::after {
  display: none;
}

.cashier-hero .section-kicker.dark-chip,
.dashboard-hero .section-kicker.light {
  display: inline-flex;
  padding: 6px 9px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--playn-orange);
  font-size: 9px;
  font-weight: 900;
}

.cashier-hero h1,
.dashboard-hero h1 {
  max-width: 820px;
  margin: 12px 0 8px;
  color: var(--playn-ink);
  font-family: "Roboto Flex", "Roboto", Arial, sans-serif;
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.cashier-hero p,
.dashboard-hero p {
  max-width: 780px;
  color: var(--playn-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.responsible-chip {
  margin-top: 18px;
  border: 1px solid var(--playn-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

.cashier-hero-art,
.dashboard-hero-art {
  justify-content: center;
}

.official-logo-cashier,
.official-logo-dashboard {
  width: 180px;
  height: 180px;
  border: 0;
  border-radius: 0;
  background-image: url("/brand/playn-duck-mascot-transparent.png");
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 14px 14px rgba(160, 95, 20, 0.2));
  box-shadow: none;
}

/* Workspace controls and cards */

.dashboard-toolbar {
  gap: 12px;
}

.playroom-switcher,
.filter-panel,
.panel-card,
.dashboard-content-card,
.stat-card,
.quality-banner,
.table-wrap,
.modal-card {
  border: 1px solid var(--playn-line);
  background: #fff;
  box-shadow: var(--playn-shadow-soft);
}

.playroom-switcher,
.filter-panel {
  min-height: 76px;
  border-radius: 18px;
}

.playroom-option {
  min-height: 48px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
}

.playroom-option.active {
  color: var(--playn-ink);
  background: #fff8cf;
  box-shadow: inset 0 0 0 1px #f3d966;
}

.panel-card,
.dashboard-content-card {
  border-radius: 20px;
}

.panel-card {
  padding: 22px;
}

.panel-card:hover,
.stat-card:hover {
  border-color: #d8dee7;
  box-shadow: var(--playn-shadow-soft);
}

.panel-heading h3,
.content-heading h2 {
  color: var(--playn-ink);
  font-weight: 800;
}

.panel-index,
.stat-icon,
.sidebar-icon {
  border-radius: 11px;
}

.identity-summary,
.handover-item,
.expense-row,
.cash-count-row,
.review-metric,
.preview-card,
.expense-summary-bar {
  border-color: var(--playn-line);
  border-radius: 14px;
  background: var(--playn-soft);
}

.stats-grid {
  gap: 12px;
}

.stat-card {
  min-height: 118px;
  padding: 17px;
  border-top: 4px solid var(--playn-yellow);
  border-radius: 16px;
}

.stat-card.blue-stat {
  border-top-color: var(--playn-blue);
}

.stat-card.green-stat {
  border-top-color: var(--playn-green);
}

.stat-card.orange-stat,
.stat-card.withdrawal-stat {
  border-top-color: var(--playn-orange);
}

.stat-card.pink-stat,
.stat-card.counted-stat {
  border-top-color: var(--playn-pink);
}

.stat-card::after {
  display: none;
}

.stat-card > span,
.stat-card small {
  color: var(--playn-muted);
}

.stat-card strong {
  color: var(--playn-ink);
}

.quality-banner {
  border-radius: 16px;
  box-shadow: none;
}

.dashboard-shell {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 14px;
}

.dashboard-sidebar {
  top: 104px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid var(--playn-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--playn-shadow-soft);
}

.dashboard-sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: url("/brand/playn-geometric-pattern.png") center 43% / 280px auto;
}

.sidebar-heading {
  padding-top: 13px;
}

.sidebar-heading span {
  color: var(--playn-orange);
}

.sidebar-nav {
  gap: 6px;
}

.sidebar-item,
.sidebar-group-toggle {
  min-height: 50px;
  border-radius: 14px;
  color: #425066;
  font-size: 12px;
  font-weight: 800;
}

.sidebar-item:hover,
.sidebar-group-toggle:hover {
  background: var(--playn-soft);
}

.sidebar-item.active,
.sidebar-group.open > .sidebar-group-toggle {
  color: var(--playn-ink);
  background: #fff8cf;
  box-shadow: inset 0 0 0 1px #f3d966;
}

.dashboard-content-card {
  padding: 24px;
}

.content-meta span {
  border-radius: 999px;
}

.table-wrap {
  overflow: auto;
  border-radius: 16px;
  box-shadow: none;
}

table {
  border-collapse: collapse;
}

th {
  color: var(--playn-muted);
  background: #fafbfa;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

td {
  border-color: var(--playn-line);
}

tbody tr:hover {
  background: #fffdf3;
}

.status-badge,
.difference-badge {
  border-radius: 999px;
  font-weight: 800;
}

.modal {
  background: rgba(17, 24, 39, 0.58);
  backdrop-filter: blur(3px);
}

.modal-card {
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.25);
}

.toast {
  color: #fff;
  border: 0;
  border-radius: 12px;
  background: var(--playn-ink);
  box-shadow: var(--playn-shadow);
}

.form-actions {
  border-radius: 18px;
}

/* Unified Inventory-style application shell */

#mainScreen.active {
  min-height: 100dvh;
}

#mainScreen .app-header,
#mainScreen .app-view {
  width: calc(100% - 296px);
  max-width: none;
  margin-right: 18px;
  margin-left: 278px;
}

#mainScreen .app-header {
  min-height: 86px;
}

#mainScreen .app-view {
  margin-bottom: 48px;
}

#dashboardView {
  background: transparent;
}

.dashboard-shell {
  display: block;
}

.dashboard-sidebar,
.operations-role-sidebar {
  position: fixed;
  z-index: 110;
  top: 0;
  bottom: 0;
  left: 0;
  width: 260px;
  height: 100dvh;
  padding: 0 16px 18px;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 0;
  border-right: 1px solid var(--playn-line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 10px 0 30px rgba(17, 24, 39, 0.05);
  backdrop-filter: blur(16px);
}

.dashboard-sidebar::before,
.operations-role-sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: url("/brand/playn-geometric-pattern.png") center 43% / 300px auto;
}

.operations-sidebar-brand {
  position: relative;
  flex: 0 0 auto;
  padding: 26px 6px 18px;
  border-bottom: 1px solid var(--playn-line);
}

.operations-sidebar-logo {
  width: 146px;
  height: 52px;
  margin-bottom: 8px;
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
}

.operations-sidebar-brand strong,
.operations-sidebar-brand span {
  display: block;
}

.operations-sidebar-brand strong {
  color: var(--playn-ink);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.operations-sidebar-brand span {
  margin-top: 3px;
  color: var(--playn-muted);
  font-size: 10px;
  font-weight: 600;
}

.dashboard-sidebar .sidebar-heading {
  flex: 0 0 auto;
  margin: 0;
  padding: 17px 8px 8px;
  border: 0;
}

.dashboard-sidebar .sidebar-heading span {
  color: var(--playn-muted);
  font-size: 9px;
}

.dashboard-sidebar .sidebar-heading strong {
  margin-top: 3px;
  font-size: 14px;
}

.dashboard-sidebar .sidebar-nav,
.operations-role-nav {
  min-height: 0;
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 2px 14px;
  scrollbar-width: thin;
  scrollbar-color: #d7dde5 transparent;
}

.dashboard-sidebar .sidebar-nav::-webkit-scrollbar,
.operations-role-nav::-webkit-scrollbar {
  width: 5px;
}

.dashboard-sidebar .sidebar-nav::-webkit-scrollbar-thumb,
.operations-role-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d7dde5;
}

.dashboard-sidebar .sidebar-item,
.dashboard-sidebar .sidebar-group-toggle,
.operations-role-item {
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  color: #425066;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.dashboard-sidebar .sidebar-group-toggle {
  grid-template-columns: 34px minmax(0, 1fr) 18px;
}

.dashboard-sidebar .sidebar-item:hover,
.dashboard-sidebar .sidebar-group-toggle:hover,
.operations-role-item:hover {
  color: var(--playn-ink);
  background: var(--playn-soft);
  transform: translateX(2px);
}

.dashboard-sidebar .sidebar-item.active,
.dashboard-sidebar .sidebar-group.open > .sidebar-group-toggle,
.operations-role-item.active {
  color: var(--playn-ink);
  background: #fff8cf;
  box-shadow: inset 0 0 0 1px #f3d966;
}

.dashboard-sidebar .sidebar-item.active::before {
  display: none;
}

.dashboard-sidebar .sidebar-icon,
.operations-role-item .sidebar-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: #fff;
  font-size: 18px;
}

.dashboard-sidebar .yellow-icon,
.operations-role-item .yellow-icon {
  color: var(--playn-ink);
}

.operations-sidebar-status {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--playn-line);
  border-radius: 13px;
  color: #425066;
  background: var(--playn-soft);
  font-size: 9px;
  font-weight: 700;
}

.operations-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--playn-green);
  box-shadow: 0 0 0 4px rgba(116, 192, 100, 0.12);
}

.cashier-role-sidebar {
  display: flex;
}

.cashier-hero,
.dashboard-hero,
#shiftInformationCard,
#revenuePaymentsCard,
#expenseItemsCard,
#cashCountCard,
#closingReviewCard {
  scroll-margin-top: 112px;
}

.dashboard-toolbar {
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
}

.dashboard-toolbar > *,
.dashboard-toolbar .filter-panel,
.dashboard-toolbar .playroom-switcher {
  min-width: 0;
}

.dashboard-toolbar .filter-fields {
  grid-template-columns: repeat(3, minmax(105px, 1fr));
}

@media (max-width: 1180px) and (min-width: 981px) {
  .dashboard-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  #mainScreen .app-header,
  #mainScreen .app-view {
    width: min(100% - 24px, 1580px);
    margin-right: auto;
    margin-left: auto;
  }

  .login-page {
    grid-template-columns: 1fr;
  }

  .login-brand-card {
    display: none;
  }

  .dashboard-shell {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    position: static;
  }

  .operations-role-sidebar {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid var(--playn-line);
    border-radius: 20px;
    box-shadow: var(--playn-shadow-soft);
  }

  .operations-role-sidebar::before,
  .operations-role-sidebar .operations-sidebar-brand,
  .operations-role-sidebar .operations-sidebar-status {
    display: none;
  }

  .dashboard-sidebar {
    width: 100%;
    height: auto;
    padding: 14px;
    border: 1px solid var(--playn-line);
    border-radius: 20px;
  }

  .dashboard-sidebar .operations-sidebar-brand,
  .dashboard-sidebar .operations-sidebar-status {
    display: none;
  }

  .dashboard-sidebar .sidebar-nav,
  .sidebar-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .operations-role-nav {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 3px;
    scrollbar-width: none;
  }

  .operations-role-nav::-webkit-scrollbar {
    display: none;
  }

  .sidebar-nav::-webkit-scrollbar {
    display: none;
  }

  .dashboard-sidebar .sidebar-item,
  .sidebar-item,
  .sidebar-group,
  .operations-role-item {
    min-width: 168px;
    flex: 0 0 168px;
    align-self: flex-start;
  }

  .cashier-hero,
  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .cashier-hero-art,
  .dashboard-hero-art {
    display: none;
  }
}

@media (max-width: 720px) {
  #mainScreen .app-header,
  #mainScreen .app-view,
  .app-header,
  .app-view {
    width: 100%;
  }

  #mainScreen .app-header,
  .app-header {
    top: var(--pwa-safe-top, 0);
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
    padding: 12px 14px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    border-width: 0 0 1px;
    border-radius: 0 0 20px 20px;
  }

  #mainScreen .app-header .header-brand {
    width: auto;
    min-width: 0;
  }

  #mainScreen .app-header .header-user {
    width: auto;
    min-width: 0;
    margin-left: auto;
  }

  #mainScreen .app-view,
  .app-view {
    margin-right: 0;
    margin-left: 0;
    margin-top: 10px;
  }

  .cashier-hero,
  .dashboard-hero {
    padding: 22px 20px;
    border-radius: 20px;
  }

  .cashier-hero h1,
  .dashboard-hero h1 {
    font-size: clamp(30px, 10vw, 42px);
  }

  .dashboard-toolbar,
  .content-grid {
    gap: 12px;
  }

  .panel-card,
  .dashboard-content-card {
    padding: 18px;
    border-radius: 18px;
  }

  .sidebar-nav {
    margin-inline: -4px;
  }

  .sidebar-item,
  .sidebar-group {
    min-width: 156px;
  }

  .header-user {
    gap: 7px;
  }

  .notification-toggle span:last-child,
  .header-user .user-meta {
    display: none;
  }

  .official-logo-nav {
    width: 96px;
  }
}

@media (max-width: 560px) {
  .login-page {
    width: min(100% - 20px, 520px);
  }

  .login-form-card {
    padding: 24px 18px;
  }

  .header-brand > div:last-child {
    display: none;
  }

  #mainScreen .app-header {
    min-height: 76px;
    padding: 10px 12px;
  }

  #mainScreen .app-header .official-logo-nav {
    width: 112px;
    height: 42px;
  }

  #mainScreen .app-header .header-user {
    gap: 8px;
  }

  #mainScreen .app-header .user-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  #mainScreen .app-header .btn-compact {
    min-height: 42px;
    padding-inline: 13px;
  }

  .operations-role-sidebar {
    padding-inline: 10px !important;
  }

  .operations-role-nav .cashier-shift-group {
    width: 136px;
    min-width: 136px;
    flex: 0 0 136px;
  }

  .operations-role-nav .cashier-shift-toggle,
  .operations-role-nav > .operations-role-item {
    width: auto !important;
    min-width: 136px !important;
    flex: 0 0 136px !important;
    padding-inline: 9px !important;
    gap: 8px !important;
  }

  .operations-role-nav #cashierInventoryNav {
    min-width: 148px !important;
    flex-basis: 148px !important;
  }

  .operations-role-nav #cashierPlanningNav {
    min-width: 142px !important;
    flex-basis: 142px !important;
  }

  .cashier-shift-label small,
  .cashier-module-nav-label small {
    display: none;
  }

  .cashier-shift-label strong,
  .cashier-module-nav-label strong,
  #cashierPlanningNav > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-sidebar {
    padding: 14px;
  }
}

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

/* Final navigation contract; kept last to defeat legacy cascade layers. */
.dashboard-sidebar .sidebar-group{height:auto!important;max-height:none!important;overflow:visible!important}
#recordsGroup,#settingsGroup{height:48px!important;min-height:48px!important}
#recordsGroup.open{height:210px!important}
#settingsGroup.open{height:102px!important}
.dashboard-sidebar .operations-sidebar-brand{padding-bottom:10px!important}
.dashboard-sidebar .sidebar-heading{display:none!important}
.dashboard-sidebar .sidebar-nav{gap:6px!important;padding-top:10px!important}
.dashboard-sidebar .sidebar-group-menu{margin:0 0 0 24px!important;padding:6px 0 0!important;gap:6px!important}
.dashboard-sidebar .sidebar-subitem{min-height:48px!important;padding:7px 10px!important}
.dashboard-sidebar .blue-icon,.operations-role-item .blue-icon{color:#fff!important;background:var(--playn-blue)!important}
.dashboard-sidebar .green-icon,.operations-role-item .green-icon{color:#fff!important;background:var(--playn-green)!important}
.dashboard-sidebar .pink-icon,.operations-role-item .pink-icon{color:#fff!important;background:var(--playn-pink)!important}
.dashboard-sidebar .orange-icon,.operations-role-item .orange-icon{color:#fff!important;background:var(--playn-orange)!important}
.dashboard-sidebar .yellow-icon,.operations-role-item .yellow-icon{color:#4e4200!important;background:var(--playn-yellow)!important}
.dashboard-sidebar .sidebar-icon,.operations-role-item .sidebar-icon{display:grid!important;place-items:center!important}
.dashboard-sidebar .sidebar-group-label{min-width:0;display:grid!important;gap:2px!important}
.dashboard-sidebar .sidebar-group-label strong,.dashboard-sidebar .sidebar-group-label small{display:block!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-sidebar .sidebar-group-label strong{font-size:11px}.dashboard-sidebar .sidebar-group-label small{color:#7b8794;font-size:8px}
.dashboard-sidebar .sidebar-group-menu{display:none!important}
.dashboard-sidebar .sidebar-group.open>.sidebar-group-menu{display:grid!important}
.dashboard-sidebar .sidebar-group.hidden{display:none!important}
.dashboard-sidebar .sidebar-group-chevron{transition:transform .16s ease}.dashboard-sidebar .sidebar-group.open .sidebar-group-chevron{transform:rotate(180deg)}
.dashboard-sidebar .sidebar-item:focus-visible,.dashboard-sidebar .sidebar-group-toggle:focus-visible,.operations-role-item:focus-visible{outline:3px solid rgba(0,153,214,.25);outline-offset:2px}
.cashier-shift-group{display:grid;gap:5px;min-width:0}
.cashier-shift-menu{display:none;margin:0 0 0 22px;padding:0 0 0 10px;border-left:2px solid var(--playn-line);min-width:0}
.cashier-shift-group.open .cashier-shift-menu{display:grid;gap:4px}
.cashier-shift-menu .operations-role-item{
  display:block!important;
  grid-template-columns:none!important;
  min-width:0!important;
  width:100%!important;
  min-height:40px;
  padding:8px 12px;
  font-size:11px;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
}
.cashier-shift-menu .operations-role-item span{
  display:block!important;
  min-width:0!important;
  width:100%!important;
  overflow:visible!important;
  text-align:left;
  text-overflow:clip!important;
  white-space:normal!important;
  line-height:1.25;
}
.cashier-shift-toggle{grid-template-columns:auto minmax(0,1fr) auto!important}
.cashier-shift-label{min-width:0;display:grid;gap:2px;text-align:left}
.cashier-shift-label strong{font-size:12px}
.cashier-shift-label small{color:#7b8794;font-size:9px}
.cashier-shift-chevron{transition:transform .16s ease}
.cashier-shift-group.open .cashier-shift-chevron{transform:rotate(180deg)}

@media(min-width:981px){
  #mainScreen .app-header,#mainScreen .app-view{
    width:calc(100% - 328px)!important;
    margin-right:34px!important;
    margin-left:294px!important
  }
}