/* =====================================================
   admin.css — Brand theme for the Decap CMS dashboard
   Decap styles its UI with emotion, so these rules target
   the component labels emotion appends to each class name
   (for example "css-1abc23-AppHeader").
   ===================================================== */

:root {
  --navy:       #1a2744;
  --navy-dark:  #111b30;
  --navy-mid:   #243358;
  --gold:       #c09a50;
  --gold-light: #d4b56a;
  --off-white:  #f8f7f4;
  --light-gray: #edecea;
  --text:       #2c2c2c;
  --text-light: #5a5a5a;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;
  --radius:     6px;
}

body,
#nc-root,
#nc-root button,
#nc-root input,
#nc-root textarea,
#nc-root select {
  font-family: var(--font-sans) !important;
}

body {
  background: var(--off-white) !important;
  color: var(--text);
}

/* ---- Login screen ---- */
[class*="StyledAuthenticationPage"] {
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-mid) 100%) !important;
}

[class*="StyledAuthenticationPage"] img {
  max-height: 180px;
  width: auto;
}

[class*="StyledAuthenticationPage"] button[class*="LoginButton"] {
  background: var(--gold) !important;
  color: var(--navy-dark) !important;
  font-weight: 600;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}

[class*="StyledAuthenticationPage"] button[class*="LoginButton"]:hover {
  background: var(--gold-light) !important;
}

[class*="PageLogoIcon"],
[class*="StyledAuthenticationPage"] [class*="NetlifyCreditIcon"] {
  color: var(--gold) !important;
}

/* ---- Top bar ---- */
[class*="-AppHeader-css"],
[class*="-AppHeader "],
[class$="-AppHeader"] {
  background: var(--navy) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25) !important;
  border-bottom: 3px solid var(--gold);
}

[class*="AppHeaderNavLink"],
[class*="AppHeaderSiteLink"],
[class*="AppHeaderTestRepoIndicator"] {
  color: rgba(255, 255, 255, .78) !important;
}

[class*="AppHeaderNavLink"] [class*="IconWrapper"],
[class*="AppHeaderNavLink"] svg {
  color: inherit !important;
}

[class*="AppHeaderNavLink"]:hover,
[class*="AppHeaderNavLink"].header-link-active,
[class*="AppHeaderSiteLink"]:hover {
  color: var(--gold-light) !important;
}

[class*="AppHeaderLogo"] {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}

[class*="AppHeaderLogo"] img {
  height: 84px !important;
  max-height: none !important;
  width: auto !important;
  margin: -18px -22px -18px -26px;
}

[class*="AppHeaderLogo"]::after {
  content: "Haddonfield Bible Church";
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

[class*="AppHeaderQuickNewButton"] {
  background: var(--gold) !important;
  color: var(--navy-dark) !important;
  font-weight: 600 !important;
}

[class*="AppHeaderQuickNewButton"]:hover {
  background: var(--gold-light) !important;
}

[class*="AvatarPlaceholderIcon"] {
  color: var(--navy) !important;
  background: var(--gold-light) !important;
}

/* ---- Collections sidebar ---- */
[class*="SidebarContainer"] {
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08) !important;
  overflow: hidden;
}

[class*="SidebarHeading"] {
  font-family: var(--font-serif) !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
}

[class*="SidebarHeading"]::before {
  content: "HBC";
  display: block;
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: .2rem;
}

[class*="SidebarNavLink"] {
  color: var(--text-light) !important;
  border-left-width: 3px !important;
}

[class*="SidebarNavLink"]:hover,
[class*="sidebarNavLinkActive"] {
  color: var(--navy) !important;
  background: var(--off-white) !important;
  border-left-color: var(--gold) !important;
  font-weight: 600;
}

[class*="SidebarNavLink"] svg {
  color: var(--gold) !important;
}

/* ---- Collection header ---- */
[class*="CollectionTopContainer"] {
  background: var(--navy) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12) !important;
}

[class*="CollectionTopHeading"] {
  font-family: var(--font-serif) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

[class*="CollectionTopDescription"] {
  color: rgba(255, 255, 255, .72) !important;
}

[class*="CollectionTopNewButton"] {
  background: var(--gold) !important;
  color: var(--navy-dark) !important;
  font-weight: 600 !important;
}

[class*="CollectionTopNewButton"]:hover {
  background: var(--gold-light) !important;
}

[class*="ViewControlsButton"][class*="isActive"],
[class*="ViewControlsButton"]:hover {
  color: var(--gold) !important;
}

/* ---- Entry list and grid cards ---- */
[class*="ListCard"],
[class*="GridCard"] {
  border-radius: 8px !important;
  border-left: 3px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}

[class*="ListCard"]:hover,
[class*="GridCard"]:hover {
  border-left-color: var(--gold);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12) !important;
}

[class*="ListCardTitle"],
[class*="CardHeading"] {
  font-family: var(--font-serif) !important;
  color: var(--navy) !important;
}

/* ---- Workflow board ---- */
[class*="-WorkflowTop-"] {
  background: var(--navy) !important;
  border-radius: 10px !important;
}

[class*="WorkflowTopHeading"] {
  font-family: var(--font-serif) !important;
  color: #fff !important;
}

[class*="WorkflowTopDescription"] {
  color: rgba(255, 255, 255, .72) !important;
}

[class*="-WorkflowTop-"] [class*="StyledDropdownButton"] {
  background: var(--gold) !important;
  color: var(--navy-dark) !important;
  font-weight: 600 !important;
}

[class*="ColumnHeader"] {
  font-family: var(--font-serif) !important;
  color: var(--navy) !important;
  border-top-color: var(--gold) !important;
}

/* ---- Editor ---- */
[class*="ToolbarContainer"] {
  background: #fff !important;
  border-bottom: 3px solid var(--gold);
}

[class*="BackCollection"] {
  color: var(--navy) !important;
  font-weight: 600;
}

[class*="BackArrow"] {
  color: var(--gold) !important;
}

[class*="SaveButton"]:not([class*="disabled"]),
[class*="PublishButton"],
[class*="PublishedToolbarButton"],
[class*="StatusButton"] {
  background: var(--navy) !important;
  color: #fff !important;
}

[class*="SaveButton"]:not([class*="disabled"]):hover,
[class*="PublishButton"]:hover {
  background: var(--navy-mid) !important;
}

[class*="FieldLabel"] {
  background: var(--light-gray) !important;
  color: var(--navy) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  letter-spacing: .08em;
}

[class*="ControlContainer"]:focus-within [class*="FieldLabel"] {
  background: var(--navy) !important;
  color: #fff !important;
}

#nc-root input:focus,
#nc-root textarea:focus,
[class*="ControlContainer"]:focus-within input,
[class*="ControlContainer"]:focus-within textarea {
  border-color: var(--navy) !important;
}

[class*="ControlContainer"]:focus-within > [class*="TextControl"],
[class*="ControlContainer"]:focus-within > input,
[class*="ControlContainer"]:focus-within > textarea {
  border-color: var(--navy) !important;
}

[class*="ControlHint"] {
  color: var(--text-light) !important;
}

[class*="FileWidgetButton"] {
  background: var(--off-white) !important;
  color: var(--navy) !important;
  border: 1px solid var(--light-gray) !important;
}

[class*="FileWidgetButton"]:hover {
  border-color: var(--gold) !important;
}

[class*="EditorContainer"] {
  background: var(--off-white) !important;
}

.Resizer.vertical::before {
  background-color: var(--light-gray) !important;
}

.Resizer.vertical:hover::before,
.Resizer.vertical:active::before {
  background-color: var(--gold) !important;
}

[class*="EditorToggle"],
[class*="EditorToggle"] svg {
  color: var(--navy) !important;
}

/* ---- Media library ---- */
[class*="LibraryTitle"] {
  font-family: var(--font-serif) !important;
  color: var(--navy) !important;
}