/* ============================================================================

   Gallery OS ? Dashboard UX (role layout, shortcuts, mobile filters, polish)

   ============================================================================ */



/* Role-aware visibility (never use order:-1 ? it fights named grid areas) */

#view-dashboard[data-dashboard-persona="viewer"] .dashboard-bento__action-row,

#view-dashboard[data-dashboard-persona="viewer"] .dashboard-bento__leads {

  display: none !important;

}



#view-dashboard[data-dashboard-persona="editor"] .dashboard-bento__leads {

  opacity: 0.85;

}



/*

  Bento layout ? every persona MUST define grid-template-areas when children

  use grid-area names. Admin previously had named areas with no template,

  which stacked Today + Week into the same cell (catastrophic overlap).

*/

#view-dashboard .dashboard-bento {

  display: flex;

  flex-direction: column;

  gap: 1.15rem;

  width: 100%;

  max-width: 100%;

  min-width: 0;

}



#view-dashboard .dashboard-bento > * {

  min-width: 0;

  width: 100%;

}



#view-dashboard .dashboard-bento__inbox { order: 1; }

#view-dashboard .dashboard-bento__shortcuts-mobile { order: 2; }

#view-dashboard .dashboard-bento__upcoming { order: 3; }

#view-dashboard .dashboard-bento__action-row { order: 4; }

#view-dashboard .dashboard-bento__activity { order: 5; }

#view-dashboard .dashboard-bento__leads { order: 6; }



@media (min-width: 1024px) {

  #view-dashboard .dashboard-bento {

    display: grid;

    grid-template-columns: repeat(12, minmax(0, 1fr));

    gap: 1.4rem;

    align-items: start;

    /* Always stack major sections: Today, Week, money/site, activity */

    grid-template-areas:

      "inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox"

      "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming"

      "action action action action action action action action action action action action"

      "activity activity activity activity activity activity activity activity activity activity activity activity";

  }



  #view-dashboard[data-dashboard-persona="viewer"] .dashboard-bento {

    grid-template-areas:

      "inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox"

      "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming"

      "activity activity activity activity activity activity activity activity activity activity activity activity";

  }



  #view-dashboard[data-dashboard-persona="editor"] .dashboard-bento,

  #view-dashboard[data-dashboard-persona="admin"] .dashboard-bento,

  #view-dashboard:not([data-dashboard-persona]) .dashboard-bento {

    grid-template-areas:

      "inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox"

      "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming"

      "action action action action action action action action action action action action"

      "activity activity activity activity activity activity activity activity activity activity activity activity";

  }



  #view-dashboard .dashboard-bento__inbox,

  #view-dashboard .dashboard-bento__upcoming,

  #view-dashboard .dashboard-bento__action-row,

  #view-dashboard .dashboard-bento__activity,

  #view-dashboard .dashboard-bento__leads,

  #view-dashboard .dashboard-bento__shortcuts-mobile {

    order: 0;

    width: auto;

  }



  #view-dashboard .dashboard-bento__inbox { grid-area: inbox; }

  #view-dashboard .dashboard-bento__upcoming { grid-area: upcoming; }

  #view-dashboard .dashboard-bento__action-row { grid-area: action; }

  #view-dashboard .dashboard-bento__activity { grid-area: activity; }



  /* Focus: Today + Week only, stacked */

  #view-dashboard[data-focus-mode="on"] .dashboard-bento {

    grid-template-areas:

      "inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox"

      "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming";

  }

}



/* Narrow laptop: stack Today / Week so cards stay readable */

@media (min-width: 1024px) and (max-width: 1180px) {

  #view-dashboard .dashboard-bento,

  #view-dashboard[data-dashboard-persona="editor"] .dashboard-bento,

  #view-dashboard[data-dashboard-persona="admin"] .dashboard-bento,

  #view-dashboard[data-dashboard-persona="viewer"] .dashboard-bento,

  #view-dashboard:not([data-dashboard-persona]) .dashboard-bento {

    grid-template-areas:

      "inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox"

      "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming"

      "action action action action action action action action action action action action"

      "activity activity activity activity activity activity activity activity activity activity activity activity";

  }



  #view-dashboard[data-dashboard-persona="viewer"] .dashboard-bento {

    grid-template-areas:

      "inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox"

      "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming"

      "activity activity activity activity activity activity activity activity activity activity activity activity";

  }



  #view-dashboard[data-focus-mode="on"] .dashboard-bento {

    grid-template-areas:

      "inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox inbox"

      "upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming upcoming";

  }

}



/* Focus / hide extras ? Today + Week only (must match focus grid-template-areas) */

#view-dashboard[data-focus-mode="on"] .dashboard-secondary-block,

#view-dashboard[data-focus-mode="on"] .dashboard-bento__shortcuts-hero,

#view-dashboard[data-focus-mode="on"] .dashboard-bento__shortcuts-desk,

#view-dashboard[data-focus-mode="on"] .dashboard-bento__shortcuts-mobile,

#view-dashboard[data-focus-mode="on"] .dashboard-bento__action-row,

#view-dashboard[data-focus-mode="on"] .dashboard-bento__activity,

#view-dashboard[data-focus-mode="on"] .dashboard-bento__leads {

  display: none !important;

}



/* When focus hides pins and setup is dismissed, collapse empty band */

#view-dashboard[data-focus-mode="on"] .dashboard-startup-band:not(:has(.dashboard-setup-slot:not(.hidden))) {

  display: none;

}



/* Pinned shortcuts bar (desktop, under hero) */

.dashboard-pinned-shortcuts-bar {

  padding: 0.85rem 1rem 1rem;

  border-radius: var(--gos-radius-lg, 16px);

  border: 1px solid var(--gos-dashboard-border, rgba(0, 0, 0, 0.08));

  background: var(--gos-dashboard-surface, #fff);

}



.dashboard-pinned-shortcuts-bar__head {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  margin-bottom: 0.65rem;

  flex-wrap: wrap;

}



.dashboard-pinned-shortcuts-bar__icon {

  color: var(--gos-accent, #1B4DFF);

  flex-shrink: 0;

}



.dashboard-pinned-shortcuts-bar__hint {

  margin-left: auto;

  font-size: 10px;

  color: var(--gos-text-secondary, rgba(0, 0, 0, 0.45));

}



.dashboard-pinned-shortcuts-bar__body {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  min-height: 2.25rem;

  align-items: center;

}



.dashboard-pinned-chip {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  padding: 0.4rem 0.75rem;

  border-radius: 999px;

  border: 1px solid var(--gos-dashboard-border, rgba(0, 0, 0, 0.1));

  background: var(--gos-bg, #efeee8);

  font-size: 11px;

  font-weight: 600;

  color: var(--gos-text-primary);

  transition: border-color 0.15s ease, transform 0.15s ease;

}



.dashboard-pinned-chip:hover {

  border-color: var(--gos-accent, #1B4DFF);

  transform: translateY(-1px);

}



.dashboard-pinned-empty {

  font-size: 11px;

  color: var(--gos-text-secondary);

}



/* Unified surface cards */

#view-dashboard .dashboard-surface-card,

#view-dashboard .dashboard-inbox-hub,

#view-dashboard .dashboard-week-glance,

#view-dashboard .dashboard-pinned-shortcuts-bar {

  border-radius: var(--gos-radius-lg, 16px);

  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px -16px rgba(15, 23, 42, 0.12);

}



.dark #view-dashboard .dashboard-surface-card,

.dark #view-dashboard .dashboard-inbox-hub,

.dark #view-dashboard .dashboard-week-glance,

.dark #view-dashboard .dashboard-pinned-shortcuts-bar {

  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 40px -28px rgba(0, 0, 0, 0.35);

}



/* Hero shell must span the full dashboard column (not shrink-to-fit flex child) */

#view-dashboard .dashboard-roster-hero {

  display: block;

  width: 100%;

  max-width: 100%;

  grid-column: 1 / -1;

}



#view-dashboard .dashboard-roster-hero__layout {

  width: 100%;

  max-width: 100%;

  min-width: 0;

  box-sizing: border-box;

  overflow: visible;

}



#view-dashboard .dashboard-roster-hero__layout.is-menu-open {

  z-index: 40;

}



#view-dashboard .dashboard-hero-quick-create .gos-quick-create__menu.is-fixed {

  z-index: 10040;

}



#view-dashboard .dashboard-roster-hero__actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.55rem 0.7rem;

  margin-top: 0.15rem;

  padding-top: 0;

  border-top: none;

}



#view-dashboard .dashboard-deck-focus__label {

  font-size: 11px;

  font-weight: 600;

}



@media (prefers-reduced-motion: reduce) {

  #view-dashboard .dashboard-hero-priority__btn,

  #view-dashboard .dashboard-roster-hero__layout,

  #view-dashboard .dashboard-roster-hero__orb--a,

  #view-dashboard .dashboard-roster-hero__orb--b {

    transition: none;

    animation: none;

  }

}



/* Typography hierarchy — refined further in gos-dashboard-hero.css */

#view-dashboard .dashboard-roster-hero__title,

#view-dashboard #dashboard-greeting.dashboard-roster-hero__title {

  max-width: 100%;

}



#view-dashboard .dashboard-section-head__title {

  font-size: 0.8125rem;

  font-weight: 650;

  letter-spacing: -0.01em;

}



/* Activity mobile filter */

.dashboard-activity-filter-select {

  width: 100%;

  max-width: 100%;

  padding: 0.45rem 0.65rem;

  font-size: 12px;

  border-radius: 10px;

  border: 1px solid var(--gos-dashboard-border, rgba(0, 0, 0, 0.12));

  background: var(--gos-dashboard-surface, #fff);

  color: var(--gos-text-primary);

  margin-bottom: 0.35rem;

}



.dashboard-activity-since-hint {

  margin: 0 0 0.5rem;

}



/* Inbox queue footer */

.dashboard-inbox-queue-footer {

  margin-top: 0.65rem;

  padding-top: 0.5rem;

  border-top: 1px solid var(--gos-dashboard-border, rgba(0, 0, 0, 0.06));

  text-align: center;

}



/* Zero state actions */

.dashboard-inbox-zero__actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin-top: 0.85rem;

  justify-content: center;

}



.dashboard-inbox-zero__action {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  padding: 0.45rem 0.85rem;

  border-radius: 10px;

  border: 1px solid var(--gos-dashboard-border);

  font-size: 11px;

  font-weight: 600;

  background: var(--gos-dashboard-surface);

  transition: border-color 0.15s ease;

}



.dashboard-inbox-zero__action:hover {

  border-color: var(--gos-accent);

}



/* Shared empty / error state */

.dashboard-empty-state {

  text-align: center;

  padding: 1.25rem 1rem;

}



.dashboard-empty-state__icon {

  display: inline-flex;

  margin-bottom: 0.5rem;

  color: var(--gos-text-secondary);

}



.dashboard-empty-state__title {

  font-size: 12px;

  font-weight: 600;

  margin-bottom: 0.25rem;

}



.dashboard-empty-state__desc {

  font-size: 11px;

  color: var(--gos-text-secondary);

  margin-bottom: 0.65rem;

}



/* Stagger on first load only */

#view-dashboard:not(.is-data-loading):not(.gos-page-load-lite) .dashboard-bento > * {

  animation: dashboard-bento-in 0.45s var(--gos-ease-out, ease) both;

  animation-delay: calc(var(--stagger-index, 0) * 40ms);

}



#view-dashboard.is-data-loading .dashboard-bento > *,

#view-dashboard.gos-page-load-lite .dashboard-bento > * {

  animation: none !important;

}



@keyframes dashboard-bento-in {

  from { opacity: 0; transform: translateY(6px); }

  to { opacity: 1; transform: translateY(0); }

}



/* Spacing tokens */

#view-dashboard .dashboard-grid {

  gap: var(--gos-space-6, 1.25rem);

}



@media (min-width: 1024px) {

  #view-dashboard .dashboard-grid {

    gap: var(--gos-space-7, 1.5rem);

  }

}



/* Nav group aggregate badge */

.gos-nav-group__badge {

  margin-left: auto;

  margin-right: 0.35rem;

  min-width: 1.125rem;

  height: 1.125rem;

  padding: 0 0.3rem;

  border-radius: 999px;

  background: var(--gos-accent, #1B4DFF);

  color: #fff;

  font-size: 9px;

  font-weight: 700;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  line-height: 1;

}



.gos-nav-group__badge[hidden] {

  display: none !important;

}



/* Role pill in sidebar footer */

.gos-role-pill {

  display: inline-flex;

  align-items: center;

  gap: 0.25rem;

  padding: 0.2rem 0.5rem;

  border-radius: 999px;

  font-size: 9px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  border: 1px solid var(--gos-border, rgba(0, 0, 0, 0.12));

  color: var(--gos-text-secondary);

  background: var(--gos-bg);

  cursor: pointer;

}



.gos-role-pill:hover {

  border-color: var(--gos-accent);

  color: var(--gos-accent);

}



.gos-sidebar__role-wrap {

  padding: 0 0.75rem 0.5rem;

}



/* ?? Responsive polish ?? */



/* Ensure filter pill groups don't beat Tailwind lg/hidden (ID selector specificity) */

@media (max-width: 1023px) {

  #view-dashboard .dashboard-recent-filter.hidden,

  #view-dashboard .dashboard-recent-filter.lg\:flex:not(.flex) {

    display: none !important;

  }

  #view-dashboard .dashboard-bento__activity-feed .dashboard-recent-filter,

  #view-dashboard .dashboard-bento__recent .dashboard-recent-filter {

    display: none !important;

  }

}



@media (min-width: 1024px) {

  #view-dashboard .dashboard-bento__activity-feed .dashboard-recent-filter,

  #view-dashboard .dashboard-bento__recent .dashboard-recent-filter {

    display: inline-flex;

  }

}



/* Week strip scroll affordance (phone) */

@media (max-width: 520px) {

  #view-dashboard .dashboard-week-glance__strip-wrap {

    position: relative;

    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 1.5rem), transparent 100%);

    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 1.5rem), transparent 100%);

  }

  #view-dashboard .dashboard-week-glance__strip-wrap::after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0.15rem;

    width: 1.75rem;

    pointer-events: none;

    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--gos-dashboard-surface, #fff) 88%, transparent));

  }

  .dark #view-dashboard .dashboard-week-glance__strip-wrap::after {

    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--gos-dashboard-surface, #111) 88%, transparent));

  }

  #view-dashboard .dashboard-week-day {

    min-height: 44px;

  }

}



/* Shortcut pin always visible on touch / below desktop */

@media (max-width: 1023px) {

  #view-dashboard .dashboard-shortcut-pin {

    opacity: 1 !important;

    width: 28px;

    height: 28px;

  }

}



/* Tablet+: signal rail stacks below intro on narrow layouts */

@media (min-width: 768px) and (max-width: 1023px) {

  #view-dashboard .dashboard-roster-hero__rail {

    max-width: none;

  }

  #view-dashboard .dashboard-roster-hero__actions .dashboard-deck-cta {

    min-width: 10rem;

  }

}



@media (max-width: 639px) {

  #view-dashboard .dashboard-roster-hero__actions {

    flex-direction: column;

    align-items: stretch;

  }

  #view-dashboard .dashboard-roster-hero__actions .dashboard-deck-cta,

  #view-dashboard .dashboard-roster-hero__actions .dashboard-hero-quick-create {

    width: 100%;

    min-width: 0;

  }

  #view-dashboard .dashboard-hero-signals {

    flex-direction: row;

    overflow-x: auto;

    gap: 0.5rem;

    scroll-snap-type: x proximity;

  }

  #view-dashboard .dashboard-hero-signal--chip {

    min-width: 10.5rem;

    flex: 0 0 auto;

    scroll-snap-align: start;

  }

}



/* Phone densifying extras */

@media (max-width: 639px) {

  #view-dashboard .dashboard-surface-card,

  #view-dashboard .dashboard-inbox-hub,

  #view-dashboard .dashboard-week-glance,

  #view-dashboard .dashboard-quick-actions-mobile {

    border-radius: 14px;

  }

  #view-dashboard .dashboard-surface-card.p-5 {

    padding: 1rem !important;

  }

  #view-dashboard .dashboard-deck-cta,

  #view-dashboard .dashboard-inbox-hub__review {

    min-height: 44px;

  }

  #view-dashboard .dashboard-quick-actions-mobile__body {

    min-height: 48px;

  }

}



/* ?? Startup band: Getting started + Pinned shortcuts ?? */

#view-dashboard .dashboard-startup-band {

  display: grid;

  grid-column: 1 / -1;

  width: 100%;

  min-width: 0;

  gap: 1rem;

  align-items: stretch;

}



@media (min-width: 1024px) {

  #view-dashboard .dashboard-startup-band:has(.dashboard-setup-slot:not(.hidden)) {

    grid-template-columns: minmax(0, 1fr);

    gap: 1.25rem;

  }

  #view-dashboard[data-focus-mode="on"] .dashboard-startup-band:has(.dashboard-setup-slot:not(.hidden)) {

    grid-template-columns: minmax(0, 1fr);

  }

}



#view-dashboard .dashboard-setup-slot,

#view-dashboard .dashboard-bento__shortcuts-hero {

  min-width: 0;

  width: 100%;

}



#view-dashboard .dashboard-setup-slot.hidden {

  display: none !important;

}



#view-dashboard .dashboard-setup-card {

  --setup-accent: var(--gos-accent, #1B4DFF);

  --setup-done: #16a34a;

  --setup-ease: var(--gos-ease-out, cubic-bezier(0.22, 1, 0.36, 1));

  height: 100%;

  padding: 1.35rem 1.35rem 1.2rem;

  display: flex;

  flex-direction: column;

  gap: 1.1rem;

  position: relative;

  overflow: hidden;

  isolation: isolate;

  background:

    radial-gradient(

      120% 80% at 100% -10%,

      color-mix(in srgb, var(--setup-accent) 14%, transparent) 0%,

      transparent 55%

    ),

    linear-gradient(

      165deg,

      color-mix(in srgb, var(--setup-accent) 5%, var(--gos-dashboard-surface, #fff)) 0%,

      var(--gos-dashboard-surface, #fff) 38%,

      var(--gos-dashboard-surface, #fff) 100%

    );

  animation: dashboard-setup-in 0.55s var(--setup-ease) both;

}



.dark #view-dashboard .dashboard-setup-card {

  background:

    radial-gradient(

      120% 80% at 100% -10%,

      color-mix(in srgb, var(--setup-accent) 22%, transparent) 0%,

      transparent 55%

    ),

    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(0, 0, 0, 0.14) 100%);

}



#view-dashboard .dashboard-setup-card::before {

  content: "";

  position: absolute;

  inset: auto -18% -40% auto;

  width: 16rem;

  height: 16rem;

  border-radius: 50%;

  background: radial-gradient(circle, color-mix(in srgb, var(--setup-accent) 16%, transparent), transparent 70%);

  pointer-events: none;

  z-index: 0;

}



#view-dashboard .dashboard-setup-card > * {

  position: relative;

  z-index: 1;

}



@keyframes dashboard-setup-in {

  from {

    opacity: 0;

    transform: translateY(8px);

  }

  to {

    opacity: 1;

    transform: none;

  }

}



#view-dashboard .dashboard-setup-card__head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 1rem;

}



#view-dashboard .dashboard-setup-card__lead {

  min-width: 0;

}



#view-dashboard .dashboard-setup-card__eyebrow {

  margin: 0;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: color-mix(in srgb, var(--setup-accent) 70%, var(--gos-text-secondary));

}



#view-dashboard .dashboard-setup-card__title {

  margin: 0.35rem 0 0;

  font-size: 1.2rem;

  font-weight: 750;

  letter-spacing: -0.035em;

  line-height: 1.15;

  color: var(--gos-text-primary);

}



#view-dashboard .dashboard-setup-card__sub {

  margin: 0.4rem 0 0;

  font-size: 0.8125rem;

  line-height: 1.45;

  color: var(--gos-text-secondary);

  max-width: 34ch;

}



#view-dashboard .dashboard-setup-card__head-aside {

  display: flex;

  align-items: flex-start;

  gap: 0.4rem;

  flex-shrink: 0;

}



#view-dashboard .dashboard-setup-card__progress-pill {

  position: relative;

  width: 2.85rem;

  height: 2.85rem;

  display: grid;

  place-items: center;

  flex-shrink: 0;

}



#view-dashboard .dashboard-setup-card__progress-ring {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  background:

    conic-gradient(

      from -90deg,

      var(--setup-accent) calc(var(--ring, 0) * 1%),

      color-mix(in srgb, var(--gos-text-primary) 9%, transparent) 0

    );

  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));

  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));

  transition: background 0.5s var(--setup-ease);

}



#view-dashboard .dashboard-setup-card__progress-text {

  display: inline-flex;

  align-items: baseline;

  gap: 0.02rem;

  font-size: 0.65rem;

  font-weight: 650;

  letter-spacing: -0.02em;

  color: var(--gos-text-secondary);

  line-height: 1;

  z-index: 1;

}



#view-dashboard .dashboard-setup-card__progress-text strong {

  font-size: 0.875rem;

  font-weight: 750;

  color: var(--gos-text-primary);

}



#view-dashboard .dashboard-setup-card__dismiss {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 1.85rem;

  height: 1.85rem;

  margin-top: 0.15rem;

  border: 1px solid transparent;

  background: transparent;

  color: var(--gos-text-secondary);

  border-radius: 10px;

  cursor: pointer;

  flex-shrink: 0;

  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;

}



#view-dashboard .dashboard-setup-card__dismiss:hover {

  color: var(--gos-text-primary);

  background: color-mix(in srgb, var(--gos-text-primary) 6%, transparent);

  border-color: color-mix(in srgb, var(--gos-text-primary) 8%, transparent);

}



/* Journey rail */

#view-dashboard .dashboard-setup-card__rail {

  list-style: none;

  margin: 0;

  padding: 0.15rem 0.1rem 0;

  display: flex;

  align-items: center;

  gap: 0;

}



#view-dashboard .dashboard-setup-card__rail-step {

  display: flex;

  align-items: center;

  flex: 1;

  min-width: 0;

}



#view-dashboard .dashboard-setup-card__rail-step:last-child {

  flex: 0 0 auto;

}



#view-dashboard .dashboard-setup-card__rail-dot {

  width: 0.55rem;

  height: 0.55rem;

  border-radius: 50%;

  flex-shrink: 0;

  background: color-mix(in srgb, var(--gos-text-primary) 14%, transparent);

  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gos-text-primary) 4%, transparent);

  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--setup-ease);

}



#view-dashboard .dashboard-setup-card__rail-step.is-done .dashboard-setup-card__rail-dot {

  background: var(--setup-done);

  box-shadow: 0 0 0 3px color-mix(in srgb, var(--setup-done) 16%, transparent);

}



#view-dashboard .dashboard-setup-card__rail-step.is-current .dashboard-setup-card__rail-dot {

  background: var(--setup-accent);

  transform: scale(1.25);

  box-shadow:

    0 0 0 4px color-mix(in srgb, var(--setup-accent) 18%, transparent),

    0 0 12px color-mix(in srgb, var(--setup-accent) 35%, transparent);

}



#view-dashboard .dashboard-setup-card__rail-line {

  flex: 1;

  height: 2px;

  margin: 0 0.35rem;

  border-radius: 999px;

  background: color-mix(in srgb, var(--gos-text-primary) 10%, transparent);

  position: relative;

  overflow: hidden;

}



#view-dashboard .dashboard-setup-card__rail-step.is-done .dashboard-setup-card__rail-line {

  background: color-mix(in srgb, var(--setup-done) 70%, var(--setup-accent));

}



#view-dashboard .dashboard-setup-card__rail-step.is-current .dashboard-setup-card__rail-line {

  background: linear-gradient(

    90deg,

    var(--setup-accent) 0%,

    color-mix(in srgb, var(--gos-text-primary) 10%, transparent) 100%

  );

}



/* Focused next step */

#view-dashboard .dashboard-setup-card__focus {

  display: flex;

  flex-direction: column;

  gap: 0.55rem;

  padding: 1.1rem 1.15rem 1.15rem;

  border-radius: 16px;

  border: 1px solid color-mix(in srgb, var(--setup-accent) 26%, var(--gos-dashboard-border, rgba(0, 0, 0, 0.08)));

  background:

    linear-gradient(

      145deg,

      color-mix(in srgb, var(--setup-accent) 12%, var(--gos-dashboard-surface, #fff)) 0%,

      color-mix(in srgb, var(--setup-accent) 4%, var(--gos-dashboard-surface, #fff)) 100%

    );

  box-shadow:

    0 1px 0 rgba(255, 255, 255, 0.55) inset,

    0 14px 32px -20px color-mix(in srgb, var(--setup-accent) 55%, transparent);

  animation: dashboard-setup-focus-in 0.5s var(--setup-ease) 0.08s both;

}



.dark #view-dashboard .dashboard-setup-card__focus {

  background:

    linear-gradient(

      145deg,

      color-mix(in srgb, var(--setup-accent) 22%, transparent) 0%,

      color-mix(in srgb, var(--setup-accent) 8%, transparent) 100%

    );

  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;

}



@keyframes dashboard-setup-focus-in {

  from {

    opacity: 0;

    transform: translateY(6px) scale(0.985);

  }

  to {

    opacity: 1;

    transform: none;

  }

}



#view-dashboard .dashboard-setup-card__focus-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

}



#view-dashboard .dashboard-setup-card__focus-kicker {

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: color-mix(in srgb, var(--setup-accent) 80%, var(--gos-text-secondary));

}



#view-dashboard .dashboard-setup-card__focus-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2.35rem;

  height: 2.35rem;

  border-radius: 12px;

  color: #fff;

  background: var(--setup-accent);

  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--setup-accent) 85%, transparent);

}



#view-dashboard .dashboard-setup-card__focus-title {

  margin: 0;

  font-size: 1.05rem;

  font-weight: 750;

  letter-spacing: -0.03em;

  line-height: 1.25;

  color: var(--gos-text-primary);

}



#view-dashboard .dashboard-setup-card__focus-hint {

  margin: 0;

  font-size: 0.8125rem;

  line-height: 1.45;

  color: var(--gos-text-secondary);

  max-width: 42ch;

}



#view-dashboard .dashboard-setup-card__focus-cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.45rem;

  align-self: flex-start;

  margin-top: 0.35rem;

  padding: 0.65rem 1.05rem;

  border: none;

  border-radius: 12px;

  font-size: 0.8125rem;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: #fff;

  background: var(--setup-accent);

  cursor: pointer;

  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--setup-accent) 90%, transparent);

  transition:

    transform 0.2s var(--setup-ease),

    box-shadow 0.2s var(--setup-ease),

    filter 0.2s ease;

}



#view-dashboard .dashboard-setup-card__focus-cta:hover {

  transform: translateY(-1px);

  filter: brightness(1.05);

  box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--setup-accent) 80%, transparent);

}



#view-dashboard .dashboard-setup-card__focus-cta:hover .iconify {

  transform: translateX(2px);

}



#view-dashboard .dashboard-setup-card__focus-cta .iconify {

  transition: transform 0.2s var(--setup-ease);

}



#view-dashboard .dashboard-setup-card__focus-cta:active {

  transform: translateY(0);

}



/* Quiet path list */

#view-dashboard .dashboard-setup-card__path {

  list-style: none;

  margin: 0;

  padding: 0.15rem 0 0;

  display: flex;

  flex-direction: column;

  gap: 0.15rem;

  border-top: 1px solid color-mix(in srgb, var(--gos-dashboard-border, rgba(0, 0, 0, 0.08)) 85%, transparent);

  padding-top: 0.85rem;

}



#view-dashboard .dashboard-setup-card__path-item {

  min-width: 0;

  display: grid;

  grid-template-columns: auto minmax(0, 1fr) auto;

  align-items: center;

  gap: 0.65rem;

  min-height: 2.35rem;

  padding: 0.35rem 0.4rem;

  border-radius: 10px;

}



#view-dashboard .dashboard-setup-card__path-item.is-done {

  opacity: 0.62;

}



#view-dashboard .dashboard-setup-card__path-item.is-current {

  background: color-mix(in srgb, var(--setup-accent) 7%, transparent);

}



#view-dashboard .dashboard-setup-card__path-action {

  display: grid;

  grid-template-columns: auto minmax(0, 1fr) auto;

  align-items: center;

  gap: 0.65rem;

  width: 100%;

  min-height: 2.35rem;

  margin: -0.35rem -0.4rem;

  padding: 0.35rem 0.4rem;

  border: none;

  border-radius: 10px;

  background: transparent;

  color: inherit;

  cursor: pointer;

  text-align: left;

  transition: background 0.15s ease;

}



#view-dashboard .dashboard-setup-card__path-action:hover {

  background: color-mix(in srgb, var(--gos-text-primary) 4%, transparent);

}



#view-dashboard .dashboard-setup-card__path-action:hover .dashboard-setup-card__path-chevron {

  color: var(--setup-accent);

  transform: translateX(2px);

}



#view-dashboard .dashboard-setup-card__marker {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 1.35rem;

  height: 1.35rem;

  border-radius: 999px;

  flex-shrink: 0;

  font-size: 0.65rem;

  font-weight: 750;

  letter-spacing: -0.02em;

  color: var(--gos-text-secondary);

  background: color-mix(in srgb, var(--gos-text-primary) 6%, transparent);

  border: 1px solid color-mix(in srgb, var(--gos-text-primary) 8%, transparent);

}



#view-dashboard .dashboard-setup-card__marker.is-check {

  color: #fff;

  background: var(--setup-done);

  border-color: transparent;

}



#view-dashboard .dashboard-setup-card__path-item.is-current .dashboard-setup-card__marker {

  color: #fff;

  background: var(--setup-accent);

  border-color: transparent;

}



#view-dashboard .dashboard-setup-card__path-copy {

  min-width: 0;

}



#view-dashboard .dashboard-setup-card__path-label {

  display: block;

  font-size: 0.8125rem;

  font-weight: 600;

  letter-spacing: -0.015em;

  line-height: 1.3;

  color: var(--gos-text-primary);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



#view-dashboard .dashboard-setup-card__path-item.is-done .dashboard-setup-card__path-label {

  color: var(--gos-text-secondary);

  text-decoration: line-through;

  text-decoration-thickness: 1px;

  text-decoration-color: color-mix(in srgb, var(--gos-text-secondary) 55%, transparent);

}



#view-dashboard .dashboard-setup-card__path-status {

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--setup-accent);

  flex-shrink: 0;

}



#view-dashboard .dashboard-setup-card__path-status.is-done {

  color: color-mix(in srgb, var(--setup-done) 80%, var(--gos-text-secondary));

}



#view-dashboard .dashboard-setup-card__path-chevron {

  color: color-mix(in srgb, var(--gos-text-primary) 30%, transparent);

  flex-shrink: 0;

  transition: color 0.15s ease, transform 0.2s var(--setup-ease);

}



@media (prefers-reduced-motion: reduce) {

  #view-dashboard .dashboard-setup-card,

  #view-dashboard .dashboard-setup-card__focus {

    animation: none;

  }



  #view-dashboard .dashboard-setup-card__focus-cta,

  #view-dashboard .dashboard-setup-card__focus-cta .iconify,

  #view-dashboard .dashboard-setup-card__path-chevron,

  #view-dashboard .dashboard-setup-card__rail-dot,

  #view-dashboard .dashboard-setup-card__progress-ring {

    transition: none;

  }



  #view-dashboard .dashboard-setup-card__focus-cta:hover,

  #view-dashboard .dashboard-setup-card__focus-cta:hover .iconify {

    transform: none;

  }

}



@media (max-width: 639px) {

  #view-dashboard .dashboard-setup-card {

    padding: 1.15rem 1.1rem 1.05rem;

    gap: 1rem;

  }



  #view-dashboard .dashboard-setup-card__title {

    font-size: 1.1rem;

  }



  #view-dashboard .dashboard-setup-card__focus {

    padding: 1rem;

  }



  #view-dashboard .dashboard-setup-card__focus-cta {

    width: 100%;

  }



  #view-dashboard .dashboard-setup-card__path-label {

    white-space: normal;

  }

}



/* Pinned shortcuts ? full-width empty state + denser chips */

#view-dashboard .dashboard-pinned-shortcuts-bar {

  height: 100%;

  min-height: 0;

  display: flex;

  flex-direction: column;

  padding: 1.05rem 1.15rem 1.15rem;

}



#view-dashboard .dashboard-pinned-shortcuts-bar__body {

  flex: 1;

  min-height: 4.5rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  align-items: center;

}



#view-dashboard .dashboard-pinned-empty {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0.2rem;

  padding: 0.55rem 0.15rem 0.2rem;

}



#view-dashboard .dashboard-pinned-empty__icon {

  color: var(--gos-accent, #1B4DFF);

  margin-bottom: 0.2rem;

  opacity: 0.9;

}



#view-dashboard .dashboard-pinned-empty__title {

  margin: 0;

  font-size: 0.8125rem;

  font-weight: 650;

  color: var(--gos-text-primary);

}



#view-dashboard .dashboard-pinned-empty__desc {

  margin: 0;

  font-size: 11px;

  line-height: 1.45;

  color: var(--gos-text-secondary);

  max-width: 34ch;

}



#view-dashboard .dashboard-pinned-chip {

  min-height: 2.25rem;

}



/* Outer dashboard grid: no orphan left-aligned cards */

#view-dashboard .dashboard-grid > * {

  min-width: 0;

}



#view-dashboard .dashboard-grid > .col-span-full,

#view-dashboard .dashboard-bento {

  width: 100%;

  max-width: 100%;

}



/* Inventory pulse */

.dashboard-inventory-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 0.5rem;

}



.dashboard-inventory-chip {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0.15rem;

  padding: 0.55rem 0.65rem;

  border-radius: 12px;

  border: 1px solid var(--gos-dashboard-border, rgba(0, 0, 0, 0.08));

  background: var(--gos-bg, #efeee8);

  text-align: left;

  transition: border-color 0.15s ease, transform 0.15s ease;

}



.dashboard-inventory-chip:hover {

  border-color: var(--gos-accent, #1B4DFF);

  transform: translateY(-1px);

}



.dashboard-inventory-chip__value {

  font-size: 1.1rem;

  font-weight: 700;

  letter-spacing: -0.03em;

  font-variant-numeric: tabular-nums;

  color: var(--gos-text-primary);

}



.dashboard-inventory-chip__label {

  font-size: 10px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  color: var(--gos-text-secondary);

}



.dashboard-sales-period {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}



/* ?? Commercial snapshot ?? */

#view-dashboard #dashboard-commercial-snapshot {

  position: relative;

  overflow: hidden;

  isolation: isolate;

  padding: 1.05rem 1.1rem 1.1rem;

}



#view-dashboard #dashboard-commercial-snapshot::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 3px;

  background: linear-gradient(

    90deg,

    color-mix(in srgb, var(--gos-accent, #1B4DFF) 65%, transparent),

    color-mix(in srgb, #059669 50%, transparent) 55%,

    color-mix(in srgb, #d97706 40%, transparent)

  );

  opacity: 0.85;

  pointer-events: none;

}



#view-dashboard #dashboard-commercial-snapshot[data-commercial-health="clear"]::before {

  background: linear-gradient(90deg, #6b9f7a, color-mix(in srgb, #059669 40%, var(--gos-accent, #1B4DFF)));

}



#view-dashboard #dashboard-commercial-snapshot[data-commercial-health="positive"]::before {

  background: linear-gradient(90deg, #059669, color-mix(in srgb, #059669 35%, var(--gos-accent, #1B4DFF)));

}



#view-dashboard #dashboard-commercial-snapshot[data-commercial-health="attention"]::before {

  background: linear-gradient(90deg, #d97706, color-mix(in srgb, #d97706 35%, var(--gos-accent, #1B4DFF)));

}



#view-dashboard #dashboard-commercial-snapshot[data-commercial-health="critical"]::before {

  background: linear-gradient(90deg, #dc2626, #d97706);

}



#view-dashboard .dashboard-commercial__head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 0.75rem 1rem;

  margin-bottom: 0.85rem;

  min-width: 0;

}



#view-dashboard .dashboard-commercial__lead {

  display: flex;

  align-items: flex-start;

  gap: 0.65rem;

  min-width: 0;

}



#view-dashboard .dashboard-commercial__icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2.15rem;

  height: 2.15rem;

  border-radius: 11px;

  flex-shrink: 0;

  background: color-mix(in srgb, var(--gos-accent, #1B4DFF) 12%, transparent);

  color: var(--gos-accent, #1B4DFF);

}



#view-dashboard #dashboard-commercial-snapshot[data-commercial-health="clear"] .dashboard-commercial__icon {

  background: color-mix(in srgb, #6b9f7a 14%, transparent);

  color: #4d7a5a;

}



#view-dashboard #dashboard-commercial-snapshot[data-commercial-health="positive"] .dashboard-commercial__icon {

  background: color-mix(in srgb, #059669 14%, transparent);

  color: #059669;

}



#view-dashboard #dashboard-commercial-snapshot[data-commercial-health="attention"] .dashboard-commercial__icon {

  background: color-mix(in srgb, #d97706 14%, transparent);

  color: #b45309;

}



#view-dashboard #dashboard-commercial-snapshot[data-commercial-health="critical"] .dashboard-commercial__icon {

  background: color-mix(in srgb, #dc2626 12%, transparent);

  color: #dc2626;

}



#view-dashboard .dashboard-commercial__heading {

  display: flex;

  flex-direction: column;

  gap: 0.15rem;

  min-width: 0;

}



#view-dashboard .dashboard-commercial__title {

  margin: 0;

  font-size: 0.8125rem;

  font-weight: 650;

  letter-spacing: -0.01em;

  color: var(--gos-text-primary);

}



#view-dashboard .dashboard-commercial__lede {

  margin: 0;

  font-size: 0.6875rem;

  line-height: 1.45;

  color: var(--gos-text-secondary, rgba(0, 0, 0, 0.5));

  max-width: 42ch;

}



#view-dashboard .dashboard-commercial__head-actions {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  flex-wrap: wrap;

}



#view-dashboard .dashboard-commercial__body {

  min-width: 0;

}



/* Money + site deck — always stack major section cards */

#view-dashboard .dashboard-money-site {

  display: grid;

  grid-template-columns: 1fr;

  gap: 0.85rem;

  margin-bottom: 0.85rem;

}



@media (min-width: 768px) {

  #view-dashboard .dashboard-money-site {

    grid-template-columns: 1fr;

    gap: 1rem;

    align-items: stretch;

  }

}



#view-dashboard .dashboard-ops-pulse {

  display: grid;

  grid-template-columns: 1fr;

  gap: 0.75rem;

}



@media (min-width: 768px) {

  #view-dashboard .dashboard-ops-pulse {

    grid-template-columns: 1fr;

  }

}



#view-dashboard .dashboard-ops-pulse__card {

  padding: 0.85rem 0.95rem;

}



#view-dashboard .dashboard-ops-pulse__head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.65rem;

  margin-bottom: 0.55rem;

}



#view-dashboard .dashboard-ops-pulse__lead {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  min-width: 0;

}



#view-dashboard .dashboard-ops-pulse__icon {

  display: inline-flex;

  color: var(--gos-text-secondary);

}



#view-dashboard .dashboard-ops-pulse__title {

  margin: 0;

  font-size: 0.75rem;

  font-weight: 650;

  letter-spacing: -0.01em;

}



#view-dashboard .dashboard-commercial-status {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem 1rem;

  flex-wrap: wrap;

  margin-bottom: 0.85rem;

  padding: 0.75rem 0.9rem;

  border-radius: 14px;

  border: 1px solid color-mix(in srgb, var(--gos-dashboard-border, rgba(0, 0, 0, 0.08)) 90%, transparent);

  background:

    linear-gradient(

      135deg,

      color-mix(in srgb, var(--gos-accent, #1B4DFF) 5%, transparent),

      transparent 42%

    ),

    color-mix(in srgb, var(--gos-bg, #efeee8) 55%, var(--gos-dashboard-surface, #fff));

}



#view-dashboard .dashboard-commercial-status--clear {

  background:

    linear-gradient(135deg, color-mix(in srgb, #6b9f7a 7%, transparent), transparent 48%),

    color-mix(in srgb, var(--gos-bg, #efeee8) 55%, var(--gos-dashboard-surface, #fff));

}



#view-dashboard .dashboard-commercial-status--positive {

  background:

    linear-gradient(135deg, color-mix(in srgb, #059669 8%, transparent), transparent 48%),

    color-mix(in srgb, var(--gos-bg, #efeee8) 55%, var(--gos-dashboard-surface, #fff));

}



#view-dashboard .dashboard-commercial-status--attention {

  background:

    linear-gradient(135deg, color-mix(in srgb, #d97706 8%, transparent), transparent 48%),

    color-mix(in srgb, var(--gos-bg, #efeee8) 55%, var(--gos-dashboard-surface, #fff));

}



#view-dashboard .dashboard-commercial-status--critical {

  background:

    linear-gradient(135deg, color-mix(in srgb, #dc2626 9%, transparent), transparent 48%),

    color-mix(in srgb, var(--gos-bg, #efeee8) 55%, var(--gos-dashboard-surface, #fff));

}



#view-dashboard .dashboard-commercial-status__main {

  display: flex;

  flex-direction: column;

  gap: 0.15rem;

  min-width: 0;

}



#view-dashboard .dashboard-commercial-status__label {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  margin: 0;

  font-size: 0.8125rem;

  font-weight: 650;

  letter-spacing: -0.01em;

  color: var(--gos-text-primary);

}



#view-dashboard .dashboard-commercial-status__dot {

  width: 0.45rem;

  height: 0.45rem;

  border-radius: 999px;

  background: var(--gos-accent, #1B4DFF);

  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gos-accent, #1B4DFF) 18%, transparent);

  flex-shrink: 0;

}



#view-dashboard .dashboard-commercial-status--clear .dashboard-commercial-status__dot {

  background: #6b9f7a;

  box-shadow: 0 0 0 3px color-mix(in srgb, #6b9f7a 18%, transparent);

}



#view-dashboard .dashboard-commercial-status--positive .dashboard-commercial-status__dot {

  background: #059669;

  box-shadow: 0 0 0 3px color-mix(in srgb, #059669 18%, transparent);

}



#view-dashboard .dashboard-commercial-status--attention .dashboard-commercial-status__dot {

  background: #d97706;

  box-shadow: 0 0 0 3px color-mix(in srgb, #d97706 18%, transparent);

}



#view-dashboard .dashboard-commercial-status--critical .dashboard-commercial-status__dot {

  background: #dc2626;

  box-shadow: 0 0 0 3px color-mix(in srgb, #dc2626 18%, transparent);

}



#view-dashboard .dashboard-commercial-status__copy {

  margin: 0;

  font-size: 0.75rem;

  line-height: 1.45;

  color: var(--gos-text-secondary, rgba(0, 0, 0, 0.55));

}



#view-dashboard .dashboard-commercial-status__cta {

  display: inline-flex;

  align-items: center;

  padding: 0.4rem 0.75rem;

  border-radius: 999px;

  font-size: 0.6875rem;

  font-weight: 650;

  border: 1px solid color-mix(in srgb, var(--gos-accent, #1B4DFF) 28%, var(--gos-dashboard-border));

  background: color-mix(in srgb, var(--gos-accent, #1B4DFF) 10%, var(--gos-dashboard-surface));

  color: var(--gos-accent, #1B4DFF);

  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;

}



#view-dashboard .dashboard-commercial-status__cta:hover {

  background: color-mix(in srgb, var(--gos-accent, #1B4DFF) 16%, var(--gos-dashboard-surface));

  border-color: var(--gos-accent, #1B4DFF);

  transform: translateY(-1px);

}



#view-dashboard .dashboard-commercial-status--critical .dashboard-commercial-status__cta {

  border-color: color-mix(in srgb, #dc2626 30%, var(--gos-dashboard-border));

  background: color-mix(in srgb, #dc2626 10%, var(--gos-dashboard-surface));

  color: #dc2626;

}



.dashboard-commercial-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.7rem;

}



@media (min-width: 1024px) {

  .dashboard-commercial-grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 0.75rem;

  }

}



.dashboard-commercial-tile {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0.45rem;

  min-height: 7.25rem;

  padding: 0.9rem 0.95rem 0.85rem;

  border-radius: 14px;

  border: 1px solid color-mix(in srgb, var(--gos-text-primary, #111) 8%, transparent);

  background:

    linear-gradient(

      160deg,

      color-mix(in srgb, var(--gos-bg, #efeee8) 40%, transparent),

      transparent 55%

    ),

    color-mix(in srgb, var(--gos-dashboard-surface, #fff) 96%, transparent);

  text-align: left;

  cursor: pointer;

  transition:

    border-color 0.18s var(--gos-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),

    transform 0.18s var(--gos-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),

    box-shadow 0.18s ease,

    background 0.18s ease;

  animation: dashboard-commercial-tile-in 0.42s var(--gos-ease-out, ease) both;

  animation-delay: calc(var(--tile-i, 0) * 45ms);

}



@keyframes dashboard-commercial-tile-in {

  from { opacity: 0; transform: translateY(8px); }

  to { opacity: 1; transform: translateY(0); }

}



@media (prefers-reduced-motion: reduce) {

  .dashboard-commercial-tile {

    animation: none;

  }

}



.dashboard-commercial-tile:hover {

  border-color: color-mix(in srgb, var(--gos-accent, #1B4DFF) 32%, transparent);

  transform: translateY(-2px);

  box-shadow: 0 14px 28px -22px color-mix(in srgb, var(--gos-accent, #1B4DFF) 55%, transparent);

}



.dashboard-commercial-tile:active {

  transform: translateY(0);

}



.dashboard-commercial-tile--pipeline {

  border-color: color-mix(in srgb, var(--gos-accent, #1B4DFF) 22%, var(--gos-dashboard-border));

  background:

    linear-gradient(160deg, color-mix(in srgb, var(--gos-accent, #1B4DFF) 7%, transparent), transparent 55%),

    color-mix(in srgb, var(--gos-dashboard-surface, #fff) 96%, transparent);

}



.dashboard-commercial-tile--attention {

  border-color: color-mix(in srgb, #d97706 24%, var(--gos-dashboard-border));

  background:

    linear-gradient(160deg, color-mix(in srgb, #d97706 7%, transparent), transparent 55%),

    color-mix(in srgb, var(--gos-dashboard-surface, #fff) 96%, transparent);

}



.dashboard-commercial-tile--alert {

  border-color: color-mix(in srgb, #dc2626 28%, var(--gos-dashboard-border));

  background:

    linear-gradient(160deg, color-mix(in srgb, #dc2626 8%, transparent), transparent 55%),

    color-mix(in srgb, var(--gos-dashboard-surface, #fff) 96%, transparent);

}



.dashboard-commercial-tile--positive {

  border-color: color-mix(in srgb, #059669 22%, var(--gos-dashboard-border));

  background:

    linear-gradient(160deg, color-mix(in srgb, #059669 7%, transparent), transparent 55%),

    color-mix(in srgb, var(--gos-dashboard-surface, #fff) 96%, transparent);

}



.dashboard-commercial-tile--inventory {

  border-color: color-mix(in srgb, var(--gos-text-primary, #111) 10%, transparent);

}



.dashboard-commercial-tile--hot:not(.dashboard-commercial-tile--alert) {

  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gos-accent, #1B4DFF) 12%, transparent);

}



.dashboard-commercial-tile--zero .dashboard-commercial-tile__value {

  opacity: 0.42;

}



.dashboard-commercial-tile__top {

  display: flex;

  align-items: center;

  gap: 0.4rem;

  width: 100%;

  min-width: 0;

}



.dashboard-commercial-tile__icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 1.55rem;

  height: 1.55rem;

  border-radius: 8px;

  flex-shrink: 0;

  background: color-mix(in srgb, var(--gos-text-primary, #111) 5%, transparent);

  color: var(--gos-text-secondary);

}



.dashboard-commercial-tile--pipeline .dashboard-commercial-tile__icon {

  background: color-mix(in srgb, var(--gos-accent, #1B4DFF) 12%, transparent);

  color: var(--gos-accent, #1B4DFF);

}



.dashboard-commercial-tile--attention .dashboard-commercial-tile__icon {

  background: color-mix(in srgb, #d97706 14%, transparent);

  color: #b45309;

}



.dashboard-commercial-tile--alert .dashboard-commercial-tile__icon {

  background: color-mix(in srgb, #dc2626 12%, transparent);

  color: #dc2626;

}



.dashboard-commercial-tile--positive .dashboard-commercial-tile__icon {

  background: color-mix(in srgb, #059669 12%, transparent);

  color: #059669;

}



.dashboard-commercial-tile__label {

  flex: 1;

  min-width: 0;

  font-size: 0.625rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--gos-text-secondary);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.dashboard-commercial-tile__chev {

  display: inline-flex;

  opacity: 0.35;

  color: var(--gos-text-secondary);

  transition: opacity 0.15s ease, transform 0.15s ease;

  flex-shrink: 0;

}



.dashboard-commercial-tile:hover .dashboard-commercial-tile__chev {

  opacity: 0.9;

  transform: translate(1px, -1px);

  color: var(--gos-accent, #1B4DFF);

}



.dashboard-commercial-tile__value {

  font-size: clamp(1.2rem, 1.5vw + 0.7rem, 1.45rem);

  font-weight: 700;

  font-variant-numeric: tabular-nums;

  letter-spacing: -0.03em;

  line-height: 1.1;

  color: var(--gos-text-primary);

}



.dashboard-commercial-tile__value--overdue {

  color: #dc2626;

}



.dashboard-commercial-tile__meta {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.35rem 0.45rem;

  margin-top: auto;

  width: 100%;

}



.dashboard-commercial-tile__badge {

  display: inline-flex;

  align-items: center;

  padding: 0.12rem 0.4rem;

  border-radius: 999px;

  font-size: 0.5625rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  background: color-mix(in srgb, var(--gos-accent, #1B4DFF) 12%, transparent);

  color: var(--gos-accent, #1B4DFF);

}



.dashboard-commercial-tile--alert .dashboard-commercial-tile__badge {

  background: color-mix(in srgb, #dc2626 12%, transparent);

  color: #dc2626;

}



.dashboard-commercial-tile--attention .dashboard-commercial-tile__badge {

  background: color-mix(in srgb, #d97706 14%, transparent);

  color: #b45309;

}



.dashboard-commercial-tile--positive .dashboard-commercial-tile__badge {

  background: color-mix(in srgb, #059669 12%, transparent);

  color: #059669;

}



.dashboard-commercial-tile--inventory .dashboard-commercial-tile__badge {

  background: color-mix(in srgb, var(--gos-text-primary, #111) 6%, transparent);

  color: var(--gos-text-secondary);

}



.dashboard-commercial-tile__sub {

  font-size: 0.6875rem;

  line-height: 1.3;

  color: var(--gos-text-secondary);

  opacity: 0.9;

}



.dashboard-commercial-error {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  flex-wrap: wrap;

  padding: 0.85rem 0.95rem;

  border-radius: 14px;

  border: 1px dashed color-mix(in srgb, #d97706 40%, transparent);

  background: color-mix(in srgb, #d97706 5%, var(--gos-dashboard-surface, #fff));

}



.dashboard-commercial-error__icon {

  display: inline-flex;

  color: #b45309;

  flex-shrink: 0;

}



.dashboard-commercial-error__copy {

  flex: 1;

  min-width: 10rem;

}



.dashboard-commercial-error__title {

  margin: 0 0 0.15rem;

  font-size: 0.8125rem;

  font-weight: 650;

}



.dashboard-commercial-error__desc {

  margin: 0;

  font-size: 0.75rem;

  color: var(--gos-text-secondary);

}



.dashboard-commercial-overdue {

  margin-top: 0.9rem;

  border-top: 1px solid color-mix(in srgb, var(--gos-text-primary, #111) 8%, transparent);

  padding-top: 0.7rem;

}



.dashboard-commercial-overdue__toggle {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  width: 100%;

  padding: 0.55rem 0.7rem;

  border-radius: 12px;

  border: 1px solid color-mix(in srgb, #dc2626 22%, transparent);

  background: color-mix(in srgb, #dc2626 6%, var(--gos-dashboard-surface, #fff));

  font-size: 0.75rem;

  font-weight: 650;

  color: #dc2626;

  transition: background 0.15s ease, border-color 0.15s ease;

}



.dashboard-commercial-overdue__toggle:hover {

  background: color-mix(in srgb, #dc2626 10%, var(--gos-dashboard-surface, #fff));

  border-color: color-mix(in srgb, #dc2626 35%, transparent);

}



.dashboard-commercial-overdue__toggle-main {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  min-width: 0;

}



.dashboard-commercial-overdue__toggle-icon {

  display: inline-flex;

  flex-shrink: 0;

}



.dashboard-commercial-overdue[data-open="true"] .dashboard-commercial-overdue__chev {

  transform: rotate(180deg);

}



.dashboard-commercial-overdue__chev {

  transition: transform 0.18s ease;

  flex-shrink: 0;

}



.dashboard-commercial-overdue__list {

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

  margin-top: 0.55rem;

}



.dashboard-commercial-overdue__row {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.dashboard-commercial-overdue__main {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.65rem;

  flex: 1;

  min-width: 0;

  font-size: 0.75rem;

  padding: 0.55rem 0.65rem;

  border-radius: 10px;

  border: 1px solid color-mix(in srgb, var(--gos-dashboard-border, rgba(0, 0, 0, 0.08)) 90%, transparent);

  background: color-mix(in srgb, var(--gos-bg, #efeee8) 35%, var(--gos-dashboard-surface, #fff));

  transition: border-color 0.15s ease, background 0.15s ease;

}



.dashboard-commercial-overdue__main:hover {

  border-color: color-mix(in srgb, var(--gos-accent, #1B4DFF) 28%, transparent);

  background: color-mix(in srgb, var(--gos-accent, #1B4DFF) 4%, var(--gos-dashboard-surface, #fff));

}



.dashboard-commercial-overdue__name {

  font-weight: 600;

  color: var(--gos-text-primary);

}



.dashboard-commercial-overdue__meta {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  flex-shrink: 0;

}



.dashboard-commercial-overdue__amt {

  font-weight: 650;

  font-variant-numeric: tabular-nums;

}



.dashboard-commercial-overdue__hint {

  font-size: 0.625rem;

  opacity: 0.6;

  white-space: nowrap;

}



.dashboard-commercial-overdue__remind {

  display: inline-flex;

  align-items: center;

  padding: 0.4rem 0.65rem;

  border-radius: 999px;

  font-size: 0.6875rem;

  font-weight: 650;

  border: 1px solid color-mix(in srgb, #dc2626 22%, var(--gos-dashboard-border));

  background: color-mix(in srgb, #dc2626 6%, var(--gos-dashboard-surface));

  color: #dc2626;

  flex-shrink: 0;

  transition: background 0.15s ease, border-color 0.15s ease;

}



.dashboard-commercial-overdue__remind:hover {

  background: color-mix(in srgb, #dc2626 12%, var(--gos-dashboard-surface));

  border-color: color-mix(in srgb, #dc2626 40%, transparent);

}



.dashboard-sales-period__chip {

  display: inline-flex;

  flex-direction: column;

  gap: 0.1rem;

  padding: 0.4rem 0.65rem;

  border-radius: 10px;

  border: 1px solid var(--gos-dashboard-border, rgba(0, 0, 0, 0.08));

  background: var(--gos-bg, #efeee8);

  font-size: 12px;

}



.dashboard-sales-period__label {

  font-size: 9px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  color: var(--gos-text-secondary);

}



.dashboard-inbox-queue-context {

  display: block;

  font-size: 10px;

  color: var(--gos-text-secondary, rgba(0, 0, 0, 0.5));

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 100%;

}



.dashboard-today-cta {

  font-size: 10px;

  font-weight: 700;

  color: var(--gos-accent, #1B4DFF);

  white-space: nowrap;

  flex-shrink: 0;

}



#view-dashboard .dashboard-attention-strip.hidden {

  display: none !important;

}



#view-dashboard[data-dashboard-persona="viewer"] .dashboard-bento__action-row,

#view-dashboard.dashboard-tier-viewer .dashboard-bento__action-row,

#view-dashboard[data-dashboard-persona="viewer"] .dashboard-bento__leads,

#view-dashboard.dashboard-tier-viewer .dashboard-bento__leads,

#view-dashboard[data-dashboard-persona="viewer"] #dashboard-inventory-pulse {

  display: none !important;

}



/* admin no longer reorders action-row ? named grid areas handle placement */



#view-dashboard .dashboard-bento__shortcuts-desk[hidden] {

  display: none !important;

}



#view-dashboard #dashboard-hero-updated[data-sync-state="updating"] {

  opacity: 0.72;

  font-style: italic;

}



#view-dashboard #dashboard-hero-updated[data-sync-state="error"] {

  color: #dc2626;

}



#view-dashboard .dashboard-kpi-new-badge {

  display: inline-flex;

  align-items: center;

  padding: 0.1rem 0.4rem;

  border-radius: 999px;

  font-size: 0.625rem;

  font-weight: 700;

  letter-spacing: 0.02em;

  color: #1B4DFF;

  background: color-mix(in srgb, #1B4DFF 12%, transparent);

  white-space: nowrap;

}



#view-dashboard .dashboard-roster-hero__signals--meta {

  display: flex;

  flex-wrap: wrap;

  align-items: stretch;

  gap: 0.5rem;

}



#view-dashboard #dashboard-generated[data-sync-state="updating"] .dashboard-hero-signal__value {

  opacity: 0.72;

  font-style: italic;

}



#view-dashboard #dashboard-generated[data-sync-state="error"] .dashboard-hero-signal__value {

  color: #dc2626;

}



@media (max-width: 640px) {

  .dashboard-inventory-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



/* Narrow desktop / laptop: stack hero until the pulse rail has room */

@media (min-width: 1024px) and (max-width: 1279px) {

  #view-dashboard .dashboard-roster-hero__body {

    grid-template-columns: 1fr;

    gap: 1.2rem;

  }

}



@media (max-width: 1023px) {

  #view-dashboard .dashboard-startup-band {

    gap: 0.85rem;

  }

  #view-dashboard .dashboard-setup-card,

  #view-dashboard .dashboard-pinned-shortcuts-bar {

    padding: 1rem;

  }

}



/* P1.2 ? Today queue spine */

#view-dashboard .dashboard-inbox-queue-wrap--spine .dashboard-inbox-queue {

  gap: 0.5rem;

}



#view-dashboard .dashboard-today-row {

  display: grid;

  grid-template-columns: auto minmax(0, 1fr) auto;

  align-items: center;

  gap: 0.55rem;

  padding: 0.6rem 0.65rem;

  border-radius: 12px;

  border: 1px solid var(--gos-dashboard-border, rgba(0, 0, 0, 0.1));

  background: var(--gos-dashboard-surface, #fff);

  transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



#view-dashboard .dashboard-today-row:hover {

  border-color: color-mix(in srgb, var(--gos-accent, #1B4DFF) 35%, var(--gos-dashboard-border));

  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);

}



#view-dashboard .dashboard-today-row--stale {

  border-color: color-mix(in srgb, #d97706 40%, var(--gos-dashboard-border));

  background: color-mix(in srgb, #d97706 6%, var(--gos-dashboard-surface));

}



#view-dashboard .dashboard-today-row__icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2rem;

  height: 2rem;

  border-radius: 10px;

  background: color-mix(in srgb, var(--gos-accent, #1B4DFF) 10%, transparent);

  color: var(--gos-accent, #1B4DFF);

  flex-shrink: 0;

}



#view-dashboard .dashboard-today-row__main {

  min-width: 0;

  text-align: left;

  background: transparent;

  border: none;

  padding: 0;

  cursor: pointer;

}



#view-dashboard .dashboard-today-row__channel {

  display: block;

  font-size: 9px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--gos-text-secondary);

  margin-bottom: 0.15rem;

}



#view-dashboard .dashboard-today-row__why {

  display: block;

  font-size: 12px;

  font-weight: 600;

  color: var(--gos-text-primary);

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

}



#view-dashboard .dashboard-today-row__verb {

  flex-shrink: 0;

  padding: 0.4rem 0.7rem;

  border-radius: 999px;

  border: 1px solid color-mix(in srgb, var(--gos-accent, #1B4DFF) 35%, var(--gos-dashboard-border));

  background: color-mix(in srgb, var(--gos-accent, #1B4DFF) 8%, var(--gos-dashboard-surface));

  font-size: 11px;

  font-weight: 650;

  color: var(--gos-accent, #1B4DFF);

  cursor: pointer;

  transition: background 0.15s ease, border-color 0.15s ease;

}



#view-dashboard .dashboard-today-row__verb:hover {

  background: color-mix(in srgb, var(--gos-accent, #1B4DFF) 14%, var(--gos-dashboard-surface));

  border-color: var(--gos-accent, #1B4DFF);

}



#view-dashboard .dashboard-inbox-queue-item[aria-selected="true"] .dashboard-today-row {

  outline: 2px solid color-mix(in srgb, var(--gos-accent, #1B4DFF) 45%, transparent);

  outline-offset: 1px;

}



#view-dashboard .dashboard-kpi-strip {

  scrollbar-width: thin;

}



#view-dashboard .dashboard-kpi-strip > .dashboard-kpi-strip-card {

  scroll-snap-align: start;

}



/* Today slideover */

.dashboard-today-slideover {

  position: fixed;

  inset: 0;

  z-index: 80;

  display: flex;

  justify-content: flex-end;

}

.dashboard-today-slideover__backdrop {

  position: absolute;

  inset: 0;

  background: rgba(15, 15, 15, 0.35);

}

.dashboard-today-slideover__panel {

  position: relative;

  width: min(420px, 100%);

  height: 100%;

  background: var(--gos-dashboard-surface, #fff);

  border-left: 1px solid color-mix(in srgb, var(--gos-border, #e5e5e5) 80%, transparent);

  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);

  display: flex;

  flex-direction: column;

  padding: 1rem 1.1rem;

}

.dashboard-today-slideover__head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  margin-bottom: 0.75rem;

}

.dashboard-today-slideover__title {

  font-size: 1rem;

  font-weight: 650;

  margin: 0;

}

.dashboard-today-slideover__list {

  list-style: none;

  margin: 0;

  padding: 0;

  overflow-y: auto;

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

}

.dashboard-today-slideover__row {

  width: 100%;

  text-align: left;

  display: grid;

  grid-template-columns: auto 1fr auto;

  gap: 0.5rem;

  align-items: center;

  padding: 0.65rem 0.75rem;

  border-radius: 0.75rem;

  border: 1px solid color-mix(in srgb, var(--gos-border, #e5e5e5) 70%, transparent);

  background: transparent;

  cursor: pointer;

}

.dashboard-today-slideover__why {

  font-size: 0.75rem;

  line-height: 1.35;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



/* Commercial insight + AR aging */

#view-dashboard .dashboard-commercial-insight {

  font-size: 0.75rem;

  font-weight: 550;

  margin: 0 0 0.75rem;

  color: color-mix(in srgb, var(--gos-fg, #111) 72%, transparent);

}

#view-dashboard .dashboard-ar-aging {

  margin-top: 0.95rem;

  padding: 0.8rem 0.85rem;

  border-radius: 14px;

  border: 1px solid color-mix(in srgb, var(--gos-border, #e5e5e5) 70%, transparent);

  background: color-mix(in srgb, var(--gos-bg, #efeee8) 40%, var(--gos-dashboard-surface, #fff));

}

#view-dashboard .dashboard-ar-aging__head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 0.7rem;

  font-weight: 650;

  margin-bottom: 0.5rem;

  color: var(--gos-text-secondary);

}

#view-dashboard .dashboard-ar-aging__title {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

}

#view-dashboard .dashboard-ar-aging__total {

  font-weight: 700;

  color: var(--gos-text-primary);

  font-variant-numeric: tabular-nums;

}

#view-dashboard .dashboard-ar-aging__bar {

  display: flex;

  height: 0.65rem;

  border-radius: 999px;

  overflow: hidden;

  gap: 2px;

  background: color-mix(in srgb, var(--gos-border, #e5e5e5) 40%, transparent);

}

#view-dashboard .dashboard-ar-aging__seg {

  border: 0;

  padding: 0;

  min-width: 4px;

  cursor: pointer;

  transition: filter 0.15s ease, opacity 0.15s ease;

}

#view-dashboard .dashboard-ar-aging__seg:hover {

  filter: brightness(1.08);

  opacity: 0.92;

}

#view-dashboard .dashboard-ar-aging__seg--current { background: #6b9f7a; }

#view-dashboard .dashboard-ar-aging__seg--1_30 { background: #c4a35a; }

#view-dashboard .dashboard-ar-aging__seg--31_60 { background: #d4894a; }

#view-dashboard .dashboard-ar-aging__seg--61_90 { background: #c45c4a; }

#view-dashboard .dashboard-ar-aging__seg--90_plus { background: #a33b3b; }

#view-dashboard .dashboard-ar-aging__legend {

  display: flex;

  flex-wrap: wrap;

  gap: 0.35rem;

  margin-top: 0.55rem;

}

#view-dashboard .dashboard-ar-aging__chip {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-size: 0.65rem;

  padding: 0.25rem 0.5rem;

  border-radius: 999px;

  border: 1px solid color-mix(in srgb, var(--gos-border, #e5e5e5) 80%, transparent);

  background: color-mix(in srgb, var(--gos-dashboard-surface, #fff) 90%, transparent);

  cursor: pointer;

  transition: border-color 0.15s ease, transform 0.15s ease;

}

#view-dashboard .dashboard-ar-aging__chip:hover {

  border-color: color-mix(in srgb, var(--gos-accent, #1B4DFF) 30%, transparent);

  transform: translateY(-1px);

}

#view-dashboard .dashboard-ar-aging__swatch {

  width: 0.45rem;

  height: 0.45rem;

  border-radius: 999px;

  flex-shrink: 0;

}

#view-dashboard .dashboard-ar-aging__swatch--current { background: #6b9f7a; }

#view-dashboard .dashboard-ar-aging__swatch--1_30 { background: #c4a35a; }

#view-dashboard .dashboard-ar-aging__swatch--31_60 { background: #d4894a; }

#view-dashboard .dashboard-ar-aging__swatch--61_90 { background: #c45c4a; }

#view-dashboard .dashboard-ar-aging__swatch--90_plus { background: #a33b3b; }



#view-dashboard .dashboard-roster-pulse,

#view-dashboard .dashboard-crm-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;

  margin-top: 0.65rem;

}

#view-dashboard .dashboard-roster-pulse__chip {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-size: 0.7rem;

  padding: 0.3rem 0.55rem;

  border-radius: 999px;

  border: 1px solid color-mix(in srgb, var(--gos-border, #e5e5e5) 80%, transparent);

  background: transparent;

  cursor: pointer;

}

#view-dashboard .dashboard-inventory-chip__sub {

  display: block;

  font-size: 0.6rem;

  opacity: 0.65;

  margin-top: 0.1rem;

}

#view-dashboard .dashboard-retry-all {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  padding: 0.55rem 0.75rem;

  border-radius: 0.65rem;

  border: 1px dashed color-mix(in srgb, #c45c4a 45%, transparent);

  font-size: 0.75rem;

}

#view-dashboard[data-focus-mode="on"] .dashboard-kpi-grid--clear,

#view-dashboard[data-focus-mode="on"] #dashboard-kpi-grid {

  display: none;

}

#view-dashboard.dashboard-tier-viewer .dashboard-viewer-priority {

  order: -1;

}

#view-dashboard .dashboard-commercial--editor .dashboard-commercial-grid {

  opacity: 0.94;

}

#view-dashboard .dashboard-commercial--editor .dashboard-ar-aging,

#view-dashboard .dashboard-commercial--editor .dashboard-commercial-overdue {

  opacity: 0.88;

}



/* ?? Website readiness scorecard ?? */

#view-dashboard #dashboard-publish-health {

  position: relative;

  overflow: hidden;

  isolation: isolate;

  padding: 1.05rem 1.1rem 1.1rem;

  height: 100%;

}



#view-dashboard #dashboard-publish-health::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 3px;

  background: linear-gradient(

    90deg,

    color-mix(in srgb, var(--gos-accent, #1B4DFF) 70%, transparent),

    color-mix(in srgb, #059669 55%, transparent) 55%,

    color-mix(in srgb, #d97706 45%, transparent)

  );

  opacity: 0.85;

  pointer-events: none;

}



#view-dashboard #dashboard-publish-health[data-readiness="ready"]::before {

  background: linear-gradient(90deg, #059669, color-mix(in srgb, #059669 40%, var(--gos-accent, #1B4DFF)));

}



#view-dashboard #dashboard-publish-health[data-readiness="attention"]::before {

  background: linear-gradient(90deg, #d97706, color-mix(in srgb, #d97706 35%, var(--gos-accent, #1B4DFF)));

}



#view-dashboard #dashboard-publish-health[data-readiness="critical"]::before {

  background: linear-gradient(90deg, #dc2626, #d97706);

}



#view-dashboard .dashboard-publish-health__head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 0.75rem 1rem;

  margin-bottom: 0.85rem;

  min-width: 0;

}



#view-dashboard .dashboard-publish-health__lead {

  display: flex;

  align-items: flex-start;

  gap: 0.65rem;

  min-width: 0;

}



#view-dashboard .dashboard-publish-health__icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2.15rem;

  height: 2.15rem;

  border-radius: 11px;

  flex-shrink: 0;

  background: color-mix(in srgb, var(--gos-accent, #1B4DFF) 12%, transparent);

  color: var(--gos-accent, #1B4DFF);

}



#view-dashboard #dashboard-publish-health[data-readiness="ready"] .dashboard-publish-health__icon {

  background: color-mix(in srgb, #059669 14%, transparent);

  color: #059669;

}



#view-dashboard #dashboard-publish-health[data-readiness="attention"] .dashboard-publish-health__icon {

  background: color-mix(in srgb, #d97706 14%, transparent);

  color: #b45309;

}



#view-dashboard #dashboard-publish-health[data-readiness="critical"] .dashboard-publish-health__icon {

  background: color-mix(in srgb, #dc2626 12%, transparent);

  color: #dc2626;

}



#view-dashboard .dashboard-publish-health__head-main {

  display: flex;

  flex-direction: column;

  gap: 0.15rem;

  min-width: 0;

}



#view-dashboard .dashboard-publish-health__title {

  margin: 0;

  font-size: 0.8125rem;

  font-weight: 650;

  letter-spacing: -0.01em;

  color: var(--gos-text-primary);

}



#view-dashboard .dashboard-publish-health__lede {

  margin: 0;

  font-size: 0.6875rem;

  line-height: 1.45;

  color: var(--gos-text-secondary, rgba(0, 0, 0, 0.5));

  max-width: 36ch;

}



#view-dashboard .dashboard-publish-health__score {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  margin-bottom: 1rem;

  padding: 0.85rem 0.95rem;

  border-radius: 14px;

  border: 1px solid color-mix(in srgb, var(--gos-dashboard-border, rgba(0, 0, 0, 0.08)) 90%, transparent);

  background:

    linear-gradient(

      135deg,

      color-mix(in srgb, var(--gos-accent, #1B4DFF) 5%, transparent),

      transparent 42%

    ),

    color-mix(in srgb, var(--gos-bg, #efeee8) 55%, var(--gos-dashboard-surface, #fff));

}



#view-dashboard #dashboard-publish-health[data-readiness="ready"] .dashboard-publish-health__score {

  background:

    linear-gradient(135deg, color-mix(in srgb, #059669 7%, transparent), transparent 48%),

    color-mix(in srgb, var(--gos-bg, #efeee8) 55%, var(--gos-dashboard-surface, #fff));

}



#view-dashboard #dashboard-publish-health[data-readiness="attention"] .dashboard-publish-health__score {

  background:

    linear-gradient(135deg, color-mix(in srgb, #d97706 8%, transparent), transparent 48%),

    color-mix(in srgb, var(--gos-bg, #efeee8) 55%, var(--gos-dashboard-surface, #fff));

}



#view-dashboard .dashboard-publish-health__score-main {

  display: flex;

  align-items: center;

  gap: 0.85rem;

  min-width: 0;

}



#view-dashboard .dashboard-publish-health__meter {

  position: relative;

  width: 3.35rem;

  height: 3.35rem;

  flex-shrink: 0;

}



#view-dashboard .dashboard-publish-health__ring {

  width: 100%;

  height: 100%;

  transform: rotate(-90deg);

}



#view-dashboard .dashboard-publish-health__ring-track,

#view-dashboard .dashboard-publish-health__ring-value {

  fill: none;

  stroke-width: 2.75;

}



#view-dashboard .dashboard-publish-health__ring-track {

  stroke: color-mix(in srgb, var(--gos-text-primary, #111) 10%, transparent);

}



#view-dashboard .dashboard-publish-health__ring-value {

  stroke: var(--gos-accent, #1B4DFF);

  stroke-linecap: round;

  stroke-dasharray: 97.4;

  stroke-dashoffset: calc(97.4 - (97.4 * var(--ph-pct, 0) / 100));

  transition: stroke-dashoffset 0.65s var(--gos-ease-out, cubic-bezier(0.22, 1, 0.36, 1));

}



#view-dashboard #dashboard-publish-health[data-readiness="ready"] .dashboard-publish-health__ring-value {

  stroke: #059669;

}



#view-dashboard #dashboard-publish-health[data-readiness="attention"] .dashboard-publish-health__ring-value {

  stroke: #d97706;

}



#view-dashboard #dashboard-publish-health[data-readiness="critical"] .dashboard-publish-health__ring-value {

  stroke: #dc2626;

}



#view-dashboard .dashboard-publish-health__meter-value {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.05rem;

  font-size: 0.7rem;

  font-variant-numeric: tabular-nums;

  color: var(--gos-text-secondary);

  letter-spacing: -0.02em;

}



#view-dashboard .dashboard-publish-health__meter-value strong {

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--gos-text-primary);

}



#view-dashboard .dashboard-publish-health__score-copy {

  display: flex;

  flex-direction: column;

  gap: 0.2rem;

}



#view-dashboard .dashboard-publish-health__status {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  margin: 0;

  font-size: 0.8125rem;

  font-weight: 650;

  letter-spacing: -0.01em;

  color: var(--gos-text-primary);

}



#view-dashboard .dashboard-publish-health__status-dot {

  width: 0.45rem;

  height: 0.45rem;

  border-radius: 999px;

  background: var(--gos-accent, #1B4DFF);

  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gos-accent, #1B4DFF) 18%, transparent);

  flex-shrink: 0;

}



#view-dashboard .dashboard-publish-health__status--ready .dashboard-publish-health__status-dot {

  background: #059669;

  box-shadow: 0 0 0 3px color-mix(in srgb, #059669 18%, transparent);

}



#view-dashboard .dashboard-publish-health__status--attention .dashboard-publish-health__status-dot {

  background: #d97706;

  box-shadow: 0 0 0 3px color-mix(in srgb, #d97706 18%, transparent);

}



#view-dashboard .dashboard-publish-health__status--critical .dashboard-publish-health__status-dot {

  background: #dc2626;

  box-shadow: 0 0 0 3px color-mix(in srgb, #dc2626 18%, transparent);

}



#view-dashboard .dashboard-publish-health__summary {

  margin: 0;

  font-size: 0.75rem;

  line-height: 1.45;

  color: var(--gos-text-secondary, rgba(0, 0, 0, 0.55));

}



#view-dashboard .dashboard-publish-health__bar {

  height: 0.28rem;

  border-radius: 999px;

  overflow: hidden;

  background: color-mix(in srgb, var(--gos-text-primary, #111) 8%, transparent);

}



#view-dashboard .dashboard-publish-health__bar > span {

  display: block;

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, var(--gos-accent, #1B4DFF), color-mix(in srgb, #059669 70%, var(--gos-accent, #1B4DFF)));

  transition: width 0.65s var(--gos-ease-out, cubic-bezier(0.22, 1, 0.36, 1));

}



#view-dashboard #dashboard-publish-health[data-readiness="ready"] .dashboard-publish-health__bar > span {

  background: linear-gradient(90deg, #059669, color-mix(in srgb, #059669 50%, #34d399));

}



#view-dashboard #dashboard-publish-health[data-readiness="attention"] .dashboard-publish-health__bar > span {

  background: linear-gradient(90deg, #d97706, color-mix(in srgb, #d97706 45%, var(--gos-accent, #1B4DFF)));

}



#view-dashboard #dashboard-publish-health[data-readiness="critical"] .dashboard-publish-health__bar > span {

  background: linear-gradient(90deg, #dc2626, #d97706);

}



#view-dashboard .dashboard-publish-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.55rem;

}



@media (min-width: 640px) {

  #view-dashboard .dashboard-publish-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}



@media (min-width: 1100px) {

  #view-dashboard .dashboard-publish-grid {

    grid-template-columns: repeat(5, minmax(0, 1fr));

  }

}



#view-dashboard .dashboard-publish-tile {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0.35rem;

  min-height: 5.5rem;

  padding: 0.7rem 0.75rem 0.75rem;

  border-radius: 12px;

  border: 1px solid color-mix(in srgb, var(--gos-text-primary, #111) 8%, transparent);

  background: color-mix(in srgb, var(--gos-dashboard-surface, #fff) 94%, transparent);

  text-align: left;

  transition:

    border-color 0.18s ease,

    transform 0.18s var(--gos-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),

    box-shadow 0.18s ease,

    background 0.18s ease;

  animation: dashboard-publish-tile-in 0.4s var(--gos-ease-out, ease) both;

  animation-delay: calc(var(--ph-i, 0) * 45ms);

}



#view-dashboard .dashboard-publish-tile:hover {

  transform: translateY(-2px);

  border-color: color-mix(in srgb, var(--gos-accent, #1B4DFF) 32%, transparent);

  box-shadow: 0 10px 22px -18px rgba(15, 23, 42, 0.35);

}



#view-dashboard .dashboard-publish-tile:active {

  transform: translateY(0);

}



#view-dashboard .dashboard-publish-tile--ok {

  border-color: color-mix(in srgb, #059669 18%, var(--gos-dashboard-border, rgba(0, 0, 0, 0.08)));

  background:

    linear-gradient(180deg, color-mix(in srgb, #059669 5%, transparent), transparent 55%),

    color-mix(in srgb, var(--gos-dashboard-surface, #fff) 94%, transparent);

}



#view-dashboard .dashboard-publish-tile--warn {

  border-color: color-mix(in srgb, #d97706 28%, var(--gos-dashboard-border, rgba(0, 0, 0, 0.08)));

  background:

    linear-gradient(180deg, color-mix(in srgb, #d97706 7%, transparent), transparent 55%),

    color-mix(in srgb, var(--gos-dashboard-surface, #fff) 94%, transparent);

}



#view-dashboard .dashboard-publish-tile--warn:hover {

  border-color: color-mix(in srgb, #d97706 45%, transparent);

}



#view-dashboard .dashboard-publish-tile__top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  gap: 0.35rem;

}



#view-dashboard .dashboard-publish-tile__icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 1.7rem;

  height: 1.7rem;

  border-radius: 9px;

  background: color-mix(in srgb, var(--gos-text-primary, #111) 5%, transparent);

  color: var(--gos-text-secondary);

}



#view-dashboard .dashboard-publish-tile--ok .dashboard-publish-tile__icon {

  background: color-mix(in srgb, #059669 12%, transparent);

  color: #059669;

}



#view-dashboard .dashboard-publish-tile--warn .dashboard-publish-tile__icon {

  background: color-mix(in srgb, #d97706 14%, transparent);

  color: #b45309;

}



#view-dashboard .dashboard-publish-tile__badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 1.15rem;

  height: 1.15rem;

  border-radius: 999px;

  background: color-mix(in srgb, var(--gos-text-primary, #111) 6%, transparent);

  color: var(--gos-text-secondary);

}



#view-dashboard .dashboard-publish-tile--ok .dashboard-publish-tile__badge {

  background: color-mix(in srgb, #059669 14%, transparent);

  color: #059669;

}



#view-dashboard .dashboard-publish-tile--warn .dashboard-publish-tile__badge {

  background: color-mix(in srgb, #d97706 16%, transparent);

  color: #b45309;

}



#view-dashboard .dashboard-publish-tile__label {

  font-size: 0.6875rem;

  font-weight: 650;

  letter-spacing: -0.01em;

  color: var(--gos-text-primary);

  line-height: 1.3;

}



#view-dashboard .dashboard-publish-tile__detail {

  margin-top: auto;

  font-size: 0.8125rem;

  font-weight: 650;

  font-variant-numeric: tabular-nums;

  letter-spacing: -0.02em;

  color: var(--gos-text-secondary);

  line-height: 1.2;

}



#view-dashboard .dashboard-publish-tile--ok .dashboard-publish-tile__detail {

  color: #047857;

}



#view-dashboard .dashboard-publish-tile--warn .dashboard-publish-tile__detail {

  color: #b45309;

}



#view-dashboard .dashboard-publish-health__cta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.85rem;

  width: 100%;

  margin-top: 0.85rem;

  padding: 0.8rem 0.9rem;

  border-radius: 12px;

  border: 1px solid color-mix(in srgb, var(--gos-accent, #1B4DFF) 22%, var(--gos-dashboard-border, rgba(0, 0, 0, 0.08)));

  background:

    linear-gradient(

      110deg,

      color-mix(in srgb, var(--gos-accent, #1B4DFF) 8%, transparent),

      transparent 55%

    ),

    color-mix(in srgb, var(--gos-dashboard-surface, #fff) 92%, transparent);

  text-align: left;

  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;

}



#view-dashboard button.dashboard-publish-health__cta:hover {

  transform: translateY(-1px);

  border-color: color-mix(in srgb, var(--gos-accent, #1B4DFF) 40%, transparent);

  box-shadow: 0 12px 24px -20px color-mix(in srgb, var(--gos-accent, #1B4DFF) 55%, transparent);

}



#view-dashboard .dashboard-publish-health__cta--clear {

  border-color: color-mix(in srgb, #059669 22%, var(--gos-dashboard-border, rgba(0, 0, 0, 0.08)));

  background:

    linear-gradient(110deg, color-mix(in srgb, #059669 8%, transparent), transparent 55%),

    color-mix(in srgb, var(--gos-dashboard-surface, #fff) 92%, transparent);

  cursor: default;

}



#view-dashboard .dashboard-publish-health__cta-copy {

  display: flex;

  flex-direction: column;

  gap: 0.12rem;

  min-width: 0;

}



#view-dashboard .dashboard-publish-health__cta-kicker {

  font-size: 0.625rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--gos-accent, #1B4DFF);

}



#view-dashboard .dashboard-publish-health__cta--clear .dashboard-publish-health__cta-kicker {

  color: #059669;

}



#view-dashboard .dashboard-publish-health__cta-title {

  font-size: 0.8125rem;

  font-weight: 650;

  letter-spacing: -0.015em;

  color: var(--gos-text-primary);

}



#view-dashboard .dashboard-publish-health__cta-hint {

  font-size: 0.6875rem;

  line-height: 1.4;

  color: var(--gos-text-secondary);

}



#view-dashboard .dashboard-publish-health__cta-go {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2rem;

  height: 2rem;

  border-radius: 999px;

  flex-shrink: 0;

  background: color-mix(in srgb, var(--gos-accent, #1B4DFF) 12%, transparent);

  color: var(--gos-accent, #1B4DFF);

}



#view-dashboard .dashboard-publish-health__cta--clear .dashboard-publish-health__cta-go {

  background: color-mix(in srgb, #059669 12%, transparent);

  color: #059669;

}



#view-dashboard .dashboard-publish-health__state {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.85rem 0.2rem;

}



#view-dashboard .dashboard-publish-health__state-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2.25rem;

  height: 2.25rem;

  border-radius: 11px;

  background: color-mix(in srgb, var(--gos-text-primary, #111) 5%, transparent);

  color: var(--gos-text-secondary);

  flex-shrink: 0;

}



#view-dashboard .dashboard-publish-health__state--error .dashboard-publish-health__state-icon {

  background: color-mix(in srgb, #dc2626 10%, transparent);

  color: #dc2626;

}



#view-dashboard .dashboard-publish-health__state-title {

  margin: 0;

  font-size: 0.8125rem;

  font-weight: 650;

}



#view-dashboard .dashboard-publish-health__state-desc {

  margin: 0.15rem 0 0;

  font-size: 0.6875rem;

  color: var(--gos-text-secondary);

}



@keyframes dashboard-publish-tile-in {

  from { opacity: 0; transform: translateY(6px); }

  to { opacity: 1; transform: translateY(0); }

}



@media (prefers-reduced-motion: reduce) {

  #view-dashboard .dashboard-publish-tile,

  #view-dashboard .dashboard-publish-health__ring-value,

  #view-dashboard .dashboard-publish-health__bar > span {

    animation: none !important;

    transition: none !important;

  }

}



.dark #view-dashboard .dashboard-publish-health__score,

.dark #view-dashboard .dashboard-publish-tile,

.dark #view-dashboard .dashboard-publish-health__cta {

  background-color: color-mix(in srgb, var(--gos-dashboard-surface, rgba(255, 255, 255, 0.03)) 92%, transparent);

}



.dark #view-dashboard .dashboard-publish-tile:hover {

  box-shadow: 0 12px 28px -22px rgba(0, 0, 0, 0.65);

}





/* ?? Action-row deck refinements (money + site + ops) ?? */

#view-dashboard #dashboard-publish-health {

  padding: 1.05rem 1.1rem 1.1rem;

}



#view-dashboard .dashboard-bento__action-row {

  display: flex;

  flex-direction: column;

  gap: 0;

}



#view-dashboard .dashboard-money-site {

  margin-bottom: 0.85rem;

}



#view-dashboard .dashboard-ops-pulse {

  display: grid;

  grid-template-columns: 1fr;

  gap: 0.75rem;

}



#view-dashboard .dashboard-ops-pulse__card {

  min-width: 0;

  width: 100%;

}



#view-dashboard .dashboard-ops-pulse__card.hidden {

  display: none !important;

}



#view-dashboard .dashboard-publish-gaps:not(.hidden),

#view-dashboard .dashboard-retry-all:not(.hidden) {

  margin-top: 0.85rem;

}



#view-dashboard .dashboard-ops-pulse .dashboard-inventory-grid,

#view-dashboard .dashboard-ops-pulse .dashboard-crm-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.4rem;

}



#view-dashboard .dashboard-ops-pulse .dashboard-inventory-chip {

  padding: 0.5rem 0.55rem;

  border-radius: 10px;

  background: color-mix(in srgb, var(--gos-bg, #efeee8) 70%, var(--gos-dashboard-surface, #fff));

}



#view-dashboard .dashboard-ops-pulse .dashboard-inventory-chip__value {

  font-size: 1rem;

}



@media (min-width: 768px) {

  #view-dashboard .dashboard-money-site {

    gap: 1rem;

    align-items: stretch;

  }



  #view-dashboard .dashboard-money-site > #dashboard-commercial-snapshot,

  #view-dashboard .dashboard-money-site > .dashboard-action-row {

    min-height: 0;

  }



  #view-dashboard .dashboard-money-site > .dashboard-action-row,

  #view-dashboard .dashboard-money-site #dashboard-publish-health,

  #view-dashboard .dashboard-money-site #dashboard-commercial-snapshot {

    height: auto;

    display: flex;

    flex-direction: column;

  }



  #view-dashboard .dashboard-money-site .dashboard-commercial__body,

  #view-dashboard .dashboard-money-site .dashboard-publish-health__body {

    flex: 1 1 auto;

    display: flex;

    flex-direction: column;

  }



  #view-dashboard .dashboard-money-site .dashboard-commercial-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  #view-dashboard .dashboard-money-site .dashboard-publish-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  #view-dashboard .dashboard-money-site .dashboard-publish-tile {

    min-height: 4.75rem;

  }



  #view-dashboard .dashboard-money-site .dashboard-publish-health__cta {

    margin-top: auto;

  }

}



@media (min-width: 1400px) {

  #view-dashboard .dashboard-money-site .dashboard-commercial-grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));

  }



  #view-dashboard .dashboard-money-site .dashboard-commercial-tile {

    min-height: 6.75rem;

  }

}



@media (max-width: 639px) {

  #view-dashboard .dashboard-commercial__head,

  #view-dashboard .dashboard-publish-health__head {

    flex-direction: column;

    align-items: stretch;

  }



  #view-dashboard .dashboard-commercial__head-actions {

    justify-content: flex-start;

  }



  #view-dashboard .dashboard-commercial-tile {

    min-height: 6.5rem;

    padding: 0.8rem 0.85rem;

  }



  #view-dashboard .dashboard-commercial-status {

    padding: 0.7rem 0.8rem;

  }

}



.dark #view-dashboard .dashboard-commercial-status,

.dark #view-dashboard .dashboard-commercial-tile,

.dark #view-dashboard .dashboard-ar-aging {

  background-color: color-mix(in srgb, var(--gos-dashboard-surface, rgba(255, 255, 255, 0.03)) 92%, transparent);

}



.dark #view-dashboard .dashboard-commercial-tile:hover {

  box-shadow: 0 14px 28px -22px rgba(0, 0, 0, 0.65);

}



.dark #view-dashboard .dashboard-ops-pulse .dashboard-inventory-chip {

  background: color-mix(in srgb, rgba(255, 255, 255, 0.04) 80%, transparent);

}



/* Ops pulse chip tones */

#view-dashboard .dashboard-ops-pulse__empty {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  flex-wrap: wrap;

  font-size: 0.75rem;

  color: var(--gos-text-secondary);

}



#view-dashboard .dashboard-inventory-chip--zero .dashboard-inventory-chip__value {

  opacity: 0.4;

}



#view-dashboard .dashboard-inventory-chip--pipeline {

  border-color: color-mix(in srgb, var(--gos-accent, #1B4DFF) 22%, var(--gos-dashboard-border));

}



#view-dashboard .dashboard-inventory-chip--positive {

  border-color: color-mix(in srgb, #059669 22%, var(--gos-dashboard-border));

}



#view-dashboard .dashboard-inventory-chip--attention {

  border-color: color-mix(in srgb, #d97706 28%, var(--gos-dashboard-border));

  background: color-mix(in srgb, #d97706 6%, var(--gos-dashboard-surface, #fff));

}



#view-dashboard .dashboard-inventory-chip--stock {

  border-color: color-mix(in srgb, var(--gos-text-primary, #111) 12%, transparent);

}



#view-dashboard .dashboard-inventory-chip--fair {

  border-color: color-mix(in srgb, #7c6a4a 28%, var(--gos-dashboard-border));

}



#view-dashboard .dashboard-roster-pulse__chip--warn {

  border-color: color-mix(in srgb, #d97706 30%, var(--gos-dashboard-border));

  color: #b45309;

}



/* ============================================================================

   Responsive polish � half-width Today|Week + phone densifying

   ============================================================================ */



/* Side-by-side Today | Week: stack week stats so they stay legible */

@media (min-width: 1181px) {

  #view-dashboard .dashboard-week-glance__stats {

    grid-template-columns: 1fr;

    gap: 0.45rem;

  }



  #view-dashboard .dashboard-inbox-hub,

  #view-dashboard .dashboard-week-glance {

    height: 100%;

  }



  #view-dashboard .dashboard-horizon {

    height: 100%;

  }

}



@media (max-width: 639px) {

  #view-dashboard .dashboard-week-glance__stats {

    grid-template-columns: 1fr;

  }



  #view-dashboard .dashboard-week-glance__head {

    flex-direction: column;

    align-items: stretch;

  }



  #view-dashboard .dashboard-week-glance__nav {

    align-self: stretch;

    justify-content: space-between;

  }



  #view-dashboard .dashboard-commercial-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  #view-dashboard .dashboard-publish-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  #view-dashboard .dashboard-activity-grid {

    grid-template-columns: 1fr;

  }

}



/* Prevent horizontal bleed from nested grids */

#view-dashboard .dashboard-bento,

#view-dashboard .dashboard-money-site,

#view-dashboard .dashboard-horizon,

#view-dashboard .dashboard-activity-grid {

  max-width: 100%;

  min-width: 0;

}



/* ============================================================================

   Layout breathing room - large screens + density polish (2026-07)

   ============================================================================ */



/* Canvas width: use the available workspace instead of a tight 1320px rail */

#view-dashboard .dashboard-inner {

  width: 100%;

  max-width: min(100%, 1680px);

  box-sizing: border-box;

  padding-left: 1rem;

  padding-right: 1rem;

  padding-top: 1.25rem;

  padding-bottom: 1.5rem;

}



@media (min-width: 640px) {

  #view-dashboard .dashboard-inner {

    padding-left: 1.25rem;

    padding-right: 1.25rem;

  }

}



@media (min-width: 768px) {

  #view-dashboard .dashboard-inner {

    padding-left: 1.75rem;

    padding-right: 1.75rem;

    padding-top: 1.75rem;

    padding-bottom: 2rem;

  }

}



@media (min-width: 1280px) {

  #view-dashboard .dashboard-inner {

    padding-left: 2.5rem;

    padding-right: 2.5rem;

    padding-top: 2rem;

    padding-bottom: 2.25rem;

  }

}



@media (min-width: 1536px) {

  #view-dashboard .dashboard-inner {

    max-width: min(100%, 1760px);

    padding-left: 3rem;

    padding-right: 3rem;

    padding-top: 2.25rem;

    padding-bottom: 2.5rem;

  }

}



/* Vertical rhythm between major bands */

#view-dashboard .dashboard-grid {

  gap: 1.35rem;

}



@media (min-width: 768px) {

  #view-dashboard .dashboard-grid {

    gap: 1.55rem;

  }

}



@media (min-width: 1280px) {

  #view-dashboard .dashboard-grid {

    gap: 1.85rem;

  }

}



@media (min-width: 1536px) {

  #view-dashboard .dashboard-grid {

    gap: 2.1rem;

  }

}



/* Bento: keep major sections stacked on roomy desktops */

@media (min-width: 1280px) {

  #view-dashboard .dashboard-bento {

    gap: 1.55rem;

  }

}



@media (min-width: 1536px) {

  #view-dashboard .dashboard-bento {

    gap: 1.75rem;

  }

}



/* Full-width week while stacked: keep 3-up stats */

@media (min-width: 1024px) {

  #view-dashboard .dashboard-week-glance__stats {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}



/* Card padding and surface density */

@media (min-width: 1024px) {

  #view-dashboard .dashboard-inbox-hub,

  #view-dashboard .dashboard-week-glance {

    padding: 1.25rem 1.35rem 1.35rem;

  }



  #view-dashboard #dashboard-commercial-snapshot,

  #view-dashboard #dashboard-publish-health {

    padding: 1.25rem 1.3rem 1.3rem;

  }



  #view-dashboard .dashboard-surface-card.p-5 {

    padding: 1.4rem !important;

  }



  #view-dashboard .dashboard-ops-pulse__card {

    padding: 1.05rem 1.15rem;

  }



  #view-dashboard .dashboard-today-row {

    padding: 0.75rem 0.85rem;

    gap: 0.7rem;

  }

}



@media (min-width: 1024px) and (max-width: 1279px) {

  #view-dashboard .dashboard-bento {

    gap: 1.45rem;

  }

}



@media (min-width: 1280px) {

  #view-dashboard .dashboard-inbox-hub,

  #view-dashboard .dashboard-week-glance {

    padding: 1.4rem 1.5rem 1.5rem;

  }



  #view-dashboard #dashboard-commercial-snapshot,

  #view-dashboard #dashboard-publish-health {

    padding: 1.35rem 1.45rem 1.45rem;

  }



  #view-dashboard .dashboard-surface-card.p-5 {

    padding: 1.55rem !important;

  }



  #view-dashboard .dashboard-money-site {

    gap: 1.25rem;

    margin-bottom: 1.15rem;

  }



  #view-dashboard .dashboard-ops-pulse {

    gap: 1rem;

  }



  #view-dashboard .dashboard-money-site .dashboard-commercial-grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 0.85rem;

  }



  #view-dashboard .dashboard-money-site .dashboard-publish-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0.7rem;

  }



  #view-dashboard .dashboard-commercial-tile {

    min-height: 7rem;

    padding: 1rem 1.05rem 0.95rem;

  }



  #view-dashboard .dashboard-startup-band {

    gap: 1.35rem;

  }

}



@media (min-width: 1536px) {

  #view-dashboard .dashboard-inbox-hub,

  #view-dashboard .dashboard-week-glance {

    padding: 1.55rem 1.65rem 1.65rem;

  }



  #view-dashboard .dashboard-money-site .dashboard-publish-grid {

    grid-template-columns: repeat(5, minmax(0, 1fr));

  }



  #view-dashboard .dashboard-commercial-tile__value {

    font-size: clamp(1.3rem, 1.1vw + 0.7rem, 1.55rem);

  }



  #view-dashboard .dashboard-activity-grid {

    gap: 1.85rem;

  }

}



/* Week glance: full-width stacked card keeps 3-up stats readable */

@media (min-width: 1280px) {

  #view-dashboard .dashboard-week-glance__stats {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0.65rem;

  }



  #view-dashboard .dashboard-week-glance__stat {

    padding: 0.65rem 0.75rem 0.7rem;

  }

}



@media (min-width: 1536px) {

  #view-dashboard .dashboard-week-glance__stats {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0.75rem;

  }

}



/* Activity pair: always stack major section cards */

@media (min-width: 1536px) {

  #view-dashboard .dashboard-activity-grid {

    grid-template-columns: 1fr;

    gap: 1.85rem;

    align-items: start;

  }

}



/* Tablet: less cramped stack, clearer section separation */

@media (min-width: 768px) and (max-width: 1023px) {

  #view-dashboard .dashboard-bento {

    gap: 1.25rem;

  }



  #view-dashboard .dashboard-inbox-hub,

  #view-dashboard .dashboard-week-glance {

    padding: 1.15rem 1.2rem 1.25rem;

  }



  #view-dashboard .dashboard-money-site {

    gap: 1.1rem;

  }



  #view-dashboard .dashboard-surface-card.p-5 {

    padding: 1.25rem !important;

  }

}



/* Phone: keep touch targets, avoid over-dense cards */

@media (max-width: 639px) {

  #view-dashboard .dashboard-inner {

    padding-bottom: 1.75rem;

  }



  #view-dashboard .dashboard-bento {

    gap: 1rem;

  }



  #view-dashboard .dashboard-inbox-hub,

  #view-dashboard .dashboard-week-glance {

    padding: 1rem 1rem 1.05rem;

  }



  #view-dashboard .dashboard-today-row {

    grid-template-columns: auto minmax(0, 1fr);

    grid-template-rows: auto auto;

    align-items: start;

  }



  #view-dashboard .dashboard-today-row__verb {

    grid-column: 2;

    justify-self: start;

    margin-top: 0.15rem;

  }



  #view-dashboard .dashboard-today-row__icon {

    grid-row: 1 / span 2;

    align-self: center;

  }

}



/* Empty / secondary panels breathe on large screens */

@media (min-width: 1280px) {

  #view-dashboard .dashboard-empty-state {

    padding: 1.75rem 1.25rem;

  }



  #view-dashboard .dashboard-pinned-shortcuts-bar {

    padding: 1.2rem 1.35rem 1.3rem;

  }



  #view-dashboard .dashboard-setup-card {

    padding: 1.5rem 1.5rem 1.35rem;

  }

}