/*
 * 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;
}

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

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