/* admin/custom.css — devmohan.in brand overrides for Decap CMS.
   Grounded in the actual rendered class names on the login screen and
   Decap's own Header.js source for the post-login top bar. The top-bar
   rules are best-effort (no live GitHub OAuth session to verify against
   during development) — see docs/superpowers/plans/2026-07-06-admin-cms-branding.md
   Task 4 for the live-verification follow-up. */

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

body,
button,
input,
textarea,
select {
  font-family: 'Sora', sans-serif !important;
}

/* --- Login screen --- */

/* Scoped to the login page only: this selector stops matching once the
   auth section unmounts after a successful login, so it never affects
   the post-login editor's own background. */
body:has([class*="StyledAuthenticationPage"]) {
  background-color: #140c1c !important;
}

/* color forced explicitly (not just background) so the "Logging in..."
   loading-state variant of this button — a different internal color/theme
   prop from the default state — can't fall back to Decap's own blue. */
[class*="LoginButton"] {
  background-color: #8750f7 !important;
  color: #ffffff !important;
}
[class*="LoginButton"]:hover {
  background-color: #6b3dd6 !important;
}

[class*="GoBackButtonStyle"] svg path {
  fill: #b8a9d6 !important;
}
[class*="ButtonText"] {
  color: #b8a9d6 !important;
}

/* Decap renders a "powered by Decap" credit badge unconditionally at the
   bottom of the login screen — this is separate from the logo.src config
   (which only replaces the top logo) and has no config option to disable,
   so it's hidden here instead. */
[class*="NetlifyCreditIcon"] {
  display: none !important;
}

/* --- Post-login editor top bar (best-effort, see note above) --- */

[class*="AppHeader"] {
  background-color: #140c1c !important;
}
/* Catch-all: anything inside the header defaults to off-white text, so no
   element we haven't specifically targeted can keep Decap's stock blue/gray.
   The active-nav and hover rules below are more specific (two attribute
   selectors vs. one) and win over this on the elements they target. */
[class*="AppHeader"] * {
  color: #f6f3fc !important;
}
/* Active nav shown as a purple pill (background) with white text, same
   pattern as the hover rule below — text stays white everywhere in the
   header, color comes from the background instead. */
[class*="AppHeaderNavLink"][class*="active"] {
  background-color: #8750f7 !important;
  color: #ffffff !important;
}
/* Background + text both set explicitly here (rather than just a text-color
   change) so the accent never lands as colored text on an unverified,
   possibly-colored hover background — always white-on-purple, guaranteed. */
[class*="AppHeaderButton"]:hover {
  background-color: #8750f7 !important;
  color: #ffffff !important;
}

/* The account/logout dropdown (Decap's SettingsDropdown -> DropdownList ->
   StyledMenuItem, per decap-cms-ui-default's source) renders on its own
   light background, unrelated to the dark header — the header catch-all
   above turned its default dark text (#313d3e) white, making "Log out"
   invisible against its still-light dropdown panel. Reset explicitly,
   independent of whether this dropdown is a DOM descendant of the header
   or portaled elsewhere. */
[class*="DropdownList"] {
  color: #313d3e !important;
}
[class*="DropdownList"] * {
  color: #313d3e !important;
}
[class*="MenuItem"]:hover {
  color: #8750f7 !important;
}

/* --- Section icons on the Portfolio Content grid (tile) view only,
   best-effort, position-based — see caveat below --- */

/* Decap CMS has no config option for a per-file icon/thumbnail in a
   "files" collection (confirmed against its own configSchema.js — no
   "icon"/"thumbnail" property at collection or file level, and EntryCard's
   only image support, StyledImage, needs a real image field on the entry,
   which these metadata files don't have). The only way to show an icon per
   tile is by DOM position, matching admin/config.yml's `files:` order for
   the "content" collection:
     1 profile  2 experience  3 education  4 achievements  5 skills
     6 projects  7 services  8 testimonials  9 socials
   Grid view only (GridCard, per decap-cms-core's EntryCard.js) — list view
   (ListCard) is left untouched, per Mohan's preference.
   CAVEAT: if that files: order in config.yml ever changes, these nth-of-type
   icons will land on the wrong tiles until updated to match. */
[class*="GridCard"]:nth-of-type(1)::before { content: "🧑‍💼"; }
[class*="GridCard"]:nth-of-type(2)::before { content: "💼"; }
[class*="GridCard"]:nth-of-type(3)::before { content: "🎓"; }
[class*="GridCard"]:nth-of-type(4)::before { content: "🏆"; }
[class*="GridCard"]:nth-of-type(5)::before { content: "🛠️"; }
[class*="GridCard"]:nth-of-type(6)::before { content: "📁"; }
[class*="GridCard"]:nth-of-type(7)::before { content: "🧰"; }
[class*="GridCard"]:nth-of-type(8)::before { content: "💬"; }
[class*="GridCard"]:nth-of-type(9)::before { content: "🔗"; }

/* position: relative anchors the icon's absolute positioning to each card
   itself — without it, the icon positions relative to the nearest
   positioned ancestor instead, landing all 9 icons stacked in one spot
   far from any individual tile rather than one icon per card. */
[class*="GridCard"] {
  position: relative !important;
}
/* Positioned below the ~90px title strip (CardBody, per EntryCard.js) so
   it never overlaps the tile's title text, filling the empty space below
   (normally reserved for StyledImage, which these entries don't have)
   large and centered instead of a small top-left corner badge.
   pointer-events: none so the icon never blocks clicking the card itself. */
[class*="GridCard"]::before {
  font-size: 64px;
  line-height: 1;
  position: absolute;
  top: 90px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}