/*
 * Nexus Dark Gray Mode
 * Screen-only theme layer. Print/PDF keeps the existing light document styling.
 */

@media screen {
  html.nexus-dark-gray {
    color-scheme: dark;

    --page-bg: #1d1d1d;
    --paper: #292929;
    --ink: #f3f1ef;
    --muted: #b6b1ad;
    --soft: #333333;
    --soft-2: #2b2b2b;
    --line: #5a5653;
    --shadow: 0 18px 55px rgba(0, 0, 0, .34);

    --famous-black: #f4f2f0;
    --famous-text: #f0eeec;
    --famous-muted: #b7b2ae;
    --famous-line: #4a4744;
    --famous-soft: #303030;
    --famous-soft-2: #292929;
    --famous-white: #272727;

    --tools-text: #f2f0ee;
    --tools-muted: #b7b2ae;
    --tools-line: #494643;
    --tools-card: #292929;
    --tools-soft: #323232;

    --mc-text: #f2f0ee;
    --mc-muted: #b7b2ae;
    --mc-line: #494643;
    --mc-line-strong: #5b5753;
    --mc-soft: #323232;
    --mc-panel: #292929;
  }

  html.nexus-dark-gray,
  html.nexus-dark-gray body,
  html.nexus-dark-gray body.tools-page,
  html.nexus-dark-gray body.money-count-page,
  html.nexus-dark-gray body.store-layout-page,
  html.nexus-dark-gray body.sales-report-page {
    background: #1d1d1d !important;
    color: #f2f0ee !important;
  }

  html.nexus-dark-gray:not(.nexus-styles-ready),
  html.nexus-dark-gray:not(.nexus-styles-ready)::before {
    background: #1d1d1d !important;
  }

  html.nexus-dark-gray:not(.nexus-styles-ready)::after {
    border-color: #4c4946 !important;
    border-top-color: #df0038 !important;
  }

  /* Shared Nexus chrome */
  html.nexus-dark-gray .app-header,
  html.nexus-dark-gray .notes-header,
  html.nexus-dark-gray .tools-header,
  html.nexus-dark-gray .money-count-header,
  html.nexus-dark-gray .sales-report-header,
  html.nexus-dark-gray .site-global-nav,
  html.nexus-dark-gray .site-global-nav.output-actions,
  html.nexus-dark-gray .site-shared-compact-bar,
  html.nexus-dark-gray .site-notes-compact-nav,
  html.nexus-dark-gray .compact-nav-menu,
  html.nexus-dark-gray .site-shared-compact-drawer,
  html.nexus-dark-gray .site-notes-nav-drawer {
    background: #252525 !important;
    color: #f5f3f1 !important;
    border-color: #44413f !important;
  }

  html.nexus-dark-gray .site-global-nav,
  html.nexus-dark-gray .site-global-nav.output-actions,
  html.nexus-dark-gray .site-notes-compact-nav {
    border-top-color: #111 !important;
  }

  html.nexus-dark-gray .site-global-nav .site-nav-item,
  html.nexus-dark-gray .site-global-nav .output-button,
  html.nexus-dark-gray .site-nav-account,
  html.nexus-dark-gray .site-shared-compact-title,
  html.nexus-dark-gray .site-shared-compact-search,
  html.nexus-dark-gray .compact-nav-toggle,
  html.nexus-dark-gray .compact-nav-close,
  html.nexus-dark-gray .site-notes-nav-toggle,
  html.nexus-dark-gray .site-notes-search-shortcut,
  html.nexus-dark-gray .site-notes-nav-close,
  html.nexus-dark-gray .compact-nav-menu-title,
  html.nexus-dark-gray .compact-nav-menu-title strong,
  html.nexus-dark-gray .compact-nav-store-account,
  html.nexus-dark-gray .compact-nav-store-account strong {
    color: #f5f3f1 !important;
  }

  html.nexus-dark-gray .site-global-nav .site-nav-item:hover,
  html.nexus-dark-gray .site-global-nav .site-nav-item:focus-visible,
  html.nexus-dark-gray .site-global-nav .output-button:hover,
  html.nexus-dark-gray .site-global-nav .output-button:focus-visible,
  html.nexus-dark-gray .site-global-nav .site-nav-item[aria-current="page"],
  html.nexus-dark-gray .compact-nav-item,
  html.nexus-dark-gray .site-notes-nav-section .site-nav-item {
    background: #303030 !important;
    color: #fff !important;
  }

  html.nexus-dark-gray .compact-nav-item:hover,
  html.nexus-dark-gray .compact-nav-item:focus-visible,
  html.nexus-dark-gray .compact-nav-item[aria-current="page"],
  html.nexus-dark-gray .site-notes-nav-section .site-nav-item:hover,
  html.nexus-dark-gray .site-notes-nav-section .site-nav-item[aria-current="page"] {
    background: #383838 !important;
  }

  html.nexus-dark-gray .compact-nav-menu-head,
  html.nexus-dark-gray .compact-nav-section-title,
  html.nexus-dark-gray .site-notes-nav-section > span,
  html.nexus-dark-gray .site-page-subtitle,
  html.nexus-dark-gray .site-page-store-name {
    color: #b8b3af !important;
  }

  /* The Nexus mark is black in the light theme, so make it white on dark gray. */
  html.nexus-dark-gray .site-shared-nav-brand-icon,
  html.nexus-dark-gray .site-shared-compact-title-icon,
  html.nexus-dark-gray .nexus-hamburger-svg {
    filter: brightness(0) invert(1) !important;
  }

  /* Common buttons, fields, tabs and dialogs */
  html.nexus-dark-gray :where(
    .secondary-button,
    .output-button,
    .calendar-step,
    .today-button,
    .dayforce-help-button,
    .store-selector-button,
    .cloud-secondary-button,
    .cloud-done-button,
    .zone-clear-button,
    .schedule-print-button,
    .promo-guide-view,
    .promo-pdf-download-button,
    .dayforce-clock-external,
    .notes-back,
    .notes-button:not(.notes-button-primary),
    .money-count-action-button,
    .money-count-clear-button,
    .store-layout-secondary-action,
    .store-layout-delete-action,
    .store-layout-add-wall,
    .store-layout-card-delete,
    .sales-button:not(.sales-primary)
  ) {
    background: #303030 !important;
    color: #f4f2f0 !important;
    border-color: #57534f !important;
  }

  html.nexus-dark-gray :where(
    .secondary-button,
    .output-button,
    .calendar-step,
    .today-button,
    .dayforce-help-button,
    .store-selector-button,
    .cloud-secondary-button,
    .cloud-done-button,
    .zone-clear-button,
    .schedule-print-button,
    .promo-guide-view,
    .promo-pdf-download-button,
    .dayforce-clock-external,
    .notes-back,
    .notes-button:not(.notes-button-primary),
    .money-count-action-button,
    .money-count-clear-button,
    .store-layout-secondary-action,
    .store-layout-delete-action,
    .store-layout-add-wall,
    .store-layout-card-delete,
    .sales-button:not(.sales-primary)
  ):hover {
    background: #3a3a3a !important;
    border-color: #74706c !important;
  }

  html.nexus-dark-gray :where(
    input,
    textarea,
    select,
    .store-search-control,
    .week-picker,
    .shift-time-control,
    .money-count-currency-input
  ) {
    background-color: #303030 !important;
    color: #f4f2f0 !important;
    border-color: #57534f !important;
  }

  html.nexus-dark-gray input::placeholder,
  html.nexus-dark-gray textarea::placeholder {
    color: #96918d !important;
    opacity: 1;
  }

  html.nexus-dark-gray option {
    background: #303030;
    color: #f4f2f0;
  }

  html.nexus-dark-gray .day-tabs {
    background: #242424 !important;
    border-bottom-color: #44413f !important;
  }

  html.nexus-dark-gray .day-tab {
    background: #303030 !important;
    color: #dedbd8 !important;
    border-color: #55514e !important;
  }

  html.nexus-dark-gray .day-tab:hover {
    background: #393939 !important;
    border-color: #74706c !important;
  }

  html.nexus-dark-gray .day-tab.active {
    background: #f0eeec !important;
    color: #1c1c1c !important;
    border-color: #f0eeec !important;
  }

  html.nexus-dark-gray :where(
    .cloud-dialog-card,
    .zone-dialog-card,
    .schedule-dialog-card,
    .promo-guide-card,
    .shoe-search-card,
    .roster-dialog-card,
    dialog > div
  ) {
    background: #292929 !important;
    color: #f2f0ee !important;
    border-color: #4d4946 !important;
  }

  html.nexus-dark-gray dialog::backdrop {
    background: rgba(0, 0, 0, .72) !important;
  }

  /* Worksheet */
  html.nexus-dark-gray .worksheet {
    background: #292929 !important;
    border-color: #484542 !important;
    color: #f2f0ee !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .28) !important;
  }

  html.nexus-dark-gray .section-rail {
    background: #242424 !important;
    color: #f4f2f0 !important;
    border-color: #5a5653 !important;
  }

  html.nexus-dark-gray :where(
    .section-content,
    .tasks-section,
    .customer-section,
    .financial-content,
    .promotions-box,
    .form-table td,
    .zone-cell,
    .zone-cell-button,
    .manager-notes,
    .quick-output-actions
  ) {
    background: #303030 !important;
    color: #f2f0ee !important;
  }

  html.nexus-dark-gray .form-table th,
  html.nexus-dark-gray .form-table td.row-label {
    background: #1c1c1c !important;
    color: #fff !important;
    border-color: #65615e !important;
  }

  html.nexus-dark-gray .form-table td,
  html.nexus-dark-gray .form-table td input,
  html.nexus-dark-gray .form-table td select,
  html.nexus-dark-gray .zone-cell-button {
    border-color: #5a5653 !important;
  }

  html.nexus-dark-gray :where(
    .section-help,
    .customer-copy p,
    .section-heading-inline p,
    .financial-content p,
    .cloud-dialog-copy,
    .zone-dialog-subtitle,
    .schedule-dialog-subtitle,
    .save-status
  ) {
    color: #b9b4b0 !important;
  }

  html.nexus-dark-gray .brand-logo {
    filter: grayscale(1) brightness(0) invert(1);
  }

  /* Tools */
  html.nexus-dark-gray .tools-page,
  html.nexus-dark-gray .tools-shell {
    color: var(--tools-text) !important;
  }

  html.nexus-dark-gray .tool-card {
    background: #292929 !important;
    color: #f2f0ee !important;
    border-color: #494643 !important;
  }

  html.nexus-dark-gray .tool-card:hover,
  html.nexus-dark-gray .tool-card:focus-visible {
    border-color: #6a6561 !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .22) !important;
  }

  html.nexus-dark-gray .tool-card-icon {
    background: #333 !important;
    border-color: #4d4946 !important;
  }

  html.nexus-dark-gray .tool-card-category,
  html.nexus-dark-gray .tool-card p {
    color: #b6b1ad !important;
  }

  html.nexus-dark-gray .tool-card h2,
  html.nexus-dark-gray .tool-card-open,
  html.nexus-dark-gray .tool-card-icon svg {
    color: #f2f0ee !important;
    stroke: currentColor !important;
  }

  /* Money Count */
  html.nexus-dark-gray .money-count-panel {
    background: #292929 !important;
    border-color: #494643 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2) !important;
  }

  html.nexus-dark-gray .money-count-panel-head,
  html.nexus-dark-gray .money-count-section,
  html.nexus-dark-gray .money-count-summary {
    border-color: #494643 !important;
  }

  html.nexus-dark-gray .money-count-total-hero,
  html.nexus-dark-gray .money-count-summary,
  html.nexus-dark-gray .money-count-row-total {
    background: #323232 !important;
  }

  html.nexus-dark-gray .money-count-qty {
    background: #303030 !important;
    color: #f2f0ee !important;
    border-color: #5b5753 !important;
  }

  /* Notes */
  html.nexus-dark-gray .notes-shell {
    color: #f2f0ee !important;
  }

  html.nexus-dark-gray :where(
    .notes-toolbar,
    .notes-search,
    .notes-filter,
    .note-card
  ) {
    background: #292929 !important;
    color: #f2f0ee !important;
    border-color: #4d4946 !important;
  }

  html.nexus-dark-gray .notes-filter.is-active {
    background: #f0eeec !important;
    color: #1b1b1b !important;
    border-color: #f0eeec !important;
  }

  html.nexus-dark-gray .note-category {
    background: #343434 !important;
    color: #c5c0bc !important;
    border-color: #504c49 !important;
  }

  html.nexus-dark-gray :where(
    .notes-heading > p:last-child,
    .notes-status-wrap,
    .note-card-content
  ) {
    color: #b6b1ad !important;
  }

  html.nexus-dark-gray .notes-status-wrap strong,
  html.nexus-dark-gray .notes-search input {
    color: #f2f0ee !important;
  }

  /* Store Layout controls. Keep the actual floor-plan canvas light so its
     fixture artwork and print/export representation remain unchanged. */
  html.nexus-dark-gray .store-layout-page {
    color: #f2f0ee !important;
  }

  html.nexus-dark-gray :where(
    .store-layout-preview-panel,
    .store-layout-controls,
    .store-layout-save-bar,
    .store-layout-card,
    .store-layout-side-card,
    .store-layout-wall-card,
    .store-layout-bin-card,
    .store-layout-edit-card
  ) {
    background: #292929 !important;
    color: #f2f0ee !important;
    border-color: #4d4946 !important;
  }

  html.nexus-dark-gray :where(
    .store-layout-preview-heading p,
    .store-layout-panel-heading p,
    .store-layout-kicker,
    .store-layout-save-status,
    .store-layout-autosave-note,
    .store-layout-save-field,
    .store-layout-field
  ) {
    color: #b7b2ae !important;
  }

  html.nexus-dark-gray .store-layout-canvas-wrap {
    background: #262626 !important;
    border-color: #4d4946 !important;
  }

  html.nexus-dark-gray :where(
    .store-layout-map,
    .store-layout-map *,
    .store-layout-front-banner,
    .store-layout-back-banner
  ) {
    color-scheme: light;
  }

  html.nexus-dark-gray .store-layout-map {
    background: #fff !important;
    color: #171717 !important;
  }

  /* Sales Report */
  html.nexus-dark-gray .sales-panel,
  html.nexus-dark-gray .sales-metric {
    background: #292929 !important;
    color: #f2f0ee !important;
    border-color: #4b4845 !important;
  }

  html.nexus-dark-gray .sales-shell th {
    background: #242424 !important;
    color: #c7c2be !important;
    border-bottom-color: #4b4845 !important;
  }

  html.nexus-dark-gray .sales-shell td {
    border-bottom-color: #44413f !important;
  }

  html.nexus-dark-gray :where(
    .sales-muted,
    .sales-import-actions span,
    .sales-scope-note,
    .sales-metric dt,
    .sales-metric .sales-source,
    .sales-kicker
  ) {
    color: #b7b2ae !important;
  }

  html.nexus-dark-gray .sales-warnings {
    background: #393328 !important;
    color: #ead7a8 !important;
  }

  /* Theme controls */
  .nexus-theme-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #171717;
    cursor: pointer;
  }

  .nexus-theme-toggle:hover,
  .nexus-theme-toggle:focus-visible {
    background: #f3f3f3;
  }

  .nexus-theme-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html.nexus-dark-gray .nexus-theme-toggle {
    color: #f5f3f1;
  }

  html.nexus-dark-gray .nexus-theme-toggle:hover,
  html.nexus-dark-gray .nexus-theme-toggle:focus-visible {
    background: #383838;
  }

  .nexus-theme-drawer-section {
    margin-top: 4px;
  }

  .nexus-theme-drawer-button {
    width: 100%;
    min-height: 58px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #dedbd8;
    background: #f6f5f4;
    color: #171717;
    font: 700 14px/1 Inter, Arial, sans-serif;
    text-align: left;
    cursor: pointer;
  }

  .nexus-theme-drawer-button svg {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .nexus-theme-drawer-label {
    flex: 1;
  }

  .nexus-theme-switch {
    width: 40px;
    height: 22px;
    padding: 2px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    background: #c7c3bf;
  }

  .nexus-theme-switch::after {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    transition: transform 160ms ease;
  }

  .nexus-theme-drawer-button[aria-pressed="true"] .nexus-theme-switch {
    background: #df0038;
  }

  .nexus-theme-drawer-button[aria-pressed="true"] .nexus-theme-switch::after {
    transform: translateX(18px);
  }

  html.nexus-dark-gray .nexus-theme-drawer-button {
    background: #303030;
    color: #f4f2f0;
    border-color: #4d4946;
  }

  html.nexus-dark-gray .nexus-theme-drawer-button:hover,
  html.nexus-dark-gray .nexus-theme-drawer-button:focus-visible {
    background: #383838;
  }
}