/*
 * HowToo admin retheme — layer 2 (custom CSS on top of the theme tokens
 * in src/admin/theme.ts). Values come from howtooproto/tailwind.config.js.
 *
 * !important is required where a rule fights a styled-components rule of
 * equal specificity: styled-components injects its styles at runtime, after
 * this stylesheet, so it wins ties.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---- Sidebar: navy ink chrome ---------------------------------------- */

[data-css='sidebar'] {
  border-right: none !important;
}

[data-css='sidebar-logo'] > img {
  /* branding.logo is the black wordmark (for the white login card);
     the navy sidebar shows the white variant instead */
  content: url('https://howtoo.com/assets/images/logo.png');
  max-height: 26px;
  align-self: center;
}

/* nav item styling lives in the SidebarResourceSection override
   (src/admin/components/SidebarNav.jsx) */

[data-css='sidebar-footer'],
[data-css='version'] {
  color: #7a88a8;
}

/* ---- Controls: 10px radius, brand focus ------------------------------- */

[data-css='app'] button,
[data-css='app'] a[role='button'] {
  border-radius: 10px !important;
}

[data-css='app'] input:not([type='checkbox']):not([type='radio']),
[data-css='app'] textarea {
  border-radius: 10px !important;
}

/* ---- New/Edit forms: compact two-column grid --------------------------- */
/* The default form stacks every field full-width with heavy spacing. Lay the
   field groups (FormGroup children of the form's DrawerContent) on a
   two-column grid, capped to a readable width; long-text fields span both
   columns. */

@media (min-width: 980px) {
  [data-css$='-new-form'],
  [data-css$='-edit-form'] {
    max-width: 1080px;
  }

  [data-css$='-new-drawer-content'],
  [data-css$='-edit-drawer-content'] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 18px;
    align-items: start;
  }

  [data-css$='-new-drawer-content'] > *,
  [data-css$='-edit-drawer-content'] > * {
    margin-bottom: 0 !important;
    min-width: 0;
  }

  [data-css$='-new-drawer-content'] > *:has(textarea),
  [data-css$='-edit-drawer-content'] > *:has(textarea),
  [data-css$='-new-drawer-content'] > *:has([contenteditable]),
  [data-css$='-edit-drawer-content'] > *:has([contenteditable]) {
    grid-column: 1 / -1;
  }

  /* actions rendered inside the slide-over drawer keep the stacked layout */
  [data-css='drawer'] [data-css$='-new-drawer-content'],
  [data-css='drawer'] [data-css$='-edit-drawer-content'] {
    display: block;
    max-width: none;
  }
}

/* ---- Record tables ----------------------------------------------------- */

[data-css='app'] table thead th {
  color: #737791;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}