/* The second selector also covers the installed admin shell from before the data hook. */
:is([data-commerce-admin-shell], .min-h-screen.flex:has(> div > aside.bg-ui-text > div > a[href='/admin']):has(> div > main)) {
  --poolbros-admin-blue: #1b56a5;
  --poolbros-admin-blue-hover: #164581;
  --poolbros-admin-tint: #eaf3ff;
  --poolbros-admin-canvas: #f4f8fd;
  --poolbros-admin-border: #d6e2f0;
  --poolbros-admin-control-border: #7892ae;
  --poolbros-admin-orange: #ff9b45;
  --poolbros-admin-orange-hover: #ffb267;
  --poolbros-admin-ink: #172b4b;
  --poolbros-admin-label: #dcecff;
  --poolbros-admin-control-radius: 12px;
  --poolbros-admin-panel-radius: 16px;

  background-color: var(--poolbros-admin-canvas);
}

/* Preserve the existing desktop and mobile sidebar palette. */
aside.bg-ui-text:has(> div > a[href='/admin']):has(> div > nav) {
  background: linear-gradient(160deg, var(--poolbros-admin-blue) 0%, #1b4990 46%, #15366e 100%);
  & > div:is(:first-child, :last-child) {
    border-color: rgb(212 234 255 / 23%);
  }

  & > div:first-child > a > span:first-child {
    color: #ffbd80;
  }

  & > div:first-child > a > span:last-child,
  & nav > p {
    color: var(--poolbros-admin-label);
  }

  & nav > a,
  & > div:last-child > :is(a, button) {
    color: #f0f7ff;
    border-radius: var(--poolbros-admin-control-radius);
  }

  & :is(nav > a, div:last-child > a, div:last-child > button):hover {
    background-color: rgb(222 239 255 / 14%);
    color: #fff;
  }

  & :is(nav > a, div:last-child > a)[aria-current='page'] {
    background-color: var(--poolbros-admin-orange);
    color: var(--poolbros-admin-ink);
  }

  & :is(nav > a, div:last-child > a)[aria-current='page']:hover {
    background-color: var(--poolbros-admin-orange-hover);
  }

  & :is(a, button):focus-visible {
    outline: 2px solid #c0e6ff;
    outline-offset: 2px;
    box-shadow: none;
  }
}

:is([data-commerce-admin-shell], .min-h-screen.flex:has(> div > aside.bg-ui-text > div > a[href='/admin']):has(> div > main)) {
  & > div > header {
    border-color: var(--poolbros-admin-border);
    background: linear-gradient(105deg, #fff, #f5f9ff);

    & .bg-ui-text.rounded-full {
      background-color: var(--poolbros-admin-blue);
    }
  }

  & > div > main {
    & :is(h1, h2, h3).text-ui-text {
      color: var(--poolbros-admin-ink);
    }

    & :is(article, div, section).border.bg-white {
      border-color: var(--poolbros-admin-border);
      border-radius: var(--poolbros-admin-panel-radius);
    }

    & thead,
    & thead > tr {
      background-color: var(--poolbros-admin-tint);
      color: var(--poolbros-admin-ink);
    }

    & span.inline-flex[class~='py-1'][class~='px-2.5'] {
      border-radius: 999px;
    }
  }

  & :is(main, header, [role='presentation'] > [role='dialog']) {
    & :is(button, a:is(.inline-flex, .flex, .block).border, a.bg-ui-text, a.bg-brand-orange):not(.rounded-full) {
      border-radius: var(--poolbros-admin-control-radius);
    }

    & :is(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file']), select, textarea).border {
      border-color: var(--poolbros-admin-control-border);
      border-radius: var(--poolbros-admin-control-radius);
    }

    & :is(a, button, input, select, textarea):focus-visible {
      outline: 2px solid var(--poolbros-admin-blue);
      outline-offset: 2px;
    }

    & :is(a, button).bg-ui-text.text-white:not(:disabled, [aria-disabled='true']) {
      background-color: var(--poolbros-admin-blue);
      color: #fff;

      &:hover {
        background-color: var(--poolbros-admin-blue-hover);
      }
    }

    & :is(a, button).bg-brand-orange.text-white:not(:disabled, [aria-disabled='true']) {
      background-color: var(--poolbros-admin-orange);
      color: var(--poolbros-admin-ink);

      &:hover {
        background-color: var(--poolbros-admin-orange-hover);
      }
    }

    & :is(nav button, button[aria-pressed], [role='tab']).bg-ui-text.text-white:not(:disabled, [aria-disabled='true']) {
      background-color: var(--poolbros-admin-tint);
      color: var(--poolbros-admin-ink);
      border-color: var(--poolbros-admin-blue);
      box-shadow: inset 0 0 0 1px var(--poolbros-admin-blue);

      &:hover {
        background-color: #dcecff;
      }
    }
  }

  & :is(section, div)[role='dialog'][aria-modal='true'].bg-white {
    border-radius: var(--poolbros-admin-panel-radius);
  }
}