/*
 * Mericad admin door — work order simple-cabinet, S3(c), 2026-09-13.
 * Served as public/mericad-admin.css, linked from resources/views/react/index.blade.php.
 * UPGRADE-FRAGILE: re-link after every Invoice Ninja upgrade (DEBRAND-APPLIED §7).
 * Structural selectors only (element + stable utility names); the login screen is recognised by
 * its username field, so nothing here touches the signed-in admin pages except the upsell button.
 */

:root {
  --mer-navy: #0f1e2e;
  --mer-gold: #9c7a4f;
  --mer-lime: #f8f5f0;
  --mer-line: #e7e0d4;
}

/* Ground: limestone behind the login screen, also when the OS asks for dark mode. */
html:has(#root input[autocomplete="username"]),
html:has(#root input[autocomplete="username"]) body,
#root div.min-h-screen:has(input[autocomplete="username"]) {
  background-color: var(--mer-lime) !important;
}

/* The card: white, hairline border, gold top rule. */
#root div.min-h-screen:has(input[autocomplete="username"]) div.max-w-md:has(> form) {
  background-color: #ffffff !important;
  border: 1px solid var(--mer-line) !important;
  border-top: 4px solid var(--mer-gold) !important;
  border-radius: 2px !important;
  box-shadow: 0 12px 32px rgba(15, 30, 46, 0.08) !important;
}

#root div.min-h-screen:has(input[autocomplete="username"]) div.max-w-md:has(> form) > h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  color: var(--mer-navy) !important;
}

#root div.min-h-screen:has(input[autocomplete="username"]) div.max-w-md form label,
#root div.min-h-screen:has(input[autocomplete="username"]) div.max-w-md form span {
  color: var(--mer-navy) !important;
}

#root div.min-h-screen:has(input[autocomplete="username"]) div.max-w-md form input {
  background-color: #ffffff !important;
  border-color: var(--mer-line) !important;
  color: var(--mer-navy) !important;
}

#root div.min-h-screen:has(input[autocomplete="username"]) div.max-w-md form input:focus {
  border-color: var(--mer-gold) !important;
  box-shadow: 0 0 0 2px rgba(156, 122, 79, 0.25) !important;
  outline: none !important;
}

/* Primary action: navy. */
#root div.min-h-screen:has(input[autocomplete="username"]) div.max-w-md form button[type="submit"] {
  background: var(--mer-navy) !important;
  border-color: var(--mer-navy) !important;
  color: #ffffff !important;
  border-radius: 2px !important;
}

#root div.min-h-screen:has(input[autocomplete="username"]) div.max-w-md form a {
  color: var(--mer-gold) !important;
}

/* The build string under the card ("v Latest Build - …") says nothing to a visitor. */
#root div.min-h-screen:has(input[autocomplete="username"]) > div > p.text-xs {
  visibility: hidden;
}

/* Signed-in admin: the vendor upsell button in the top bar ("Unlock Pro" / "White label" /
   "Upgrade"). It is the only button carrying the glossy gradient overlay. */
button:has(> div.bg-gradient-to-b.pointer-events-none) {
  display: none !important;
}

/*
 * Mobile fit for the signed-in admin, 2026-09-18 (chat Mericad.com, mobile audit). Phones only (< 768 px).
 * Cause measured on 61 of 111 admin screens at 390 px: the sticky top bar's title (h2.whitespace-nowrap) and the
 * Cancel/Save (or Export/Actions) buttons do not shrink, so the whole page becomes 423–517 px wide and slides
 * sideways, with Save pushed off-screen. Fix: let the title truncate, tighten the bar's paddings, keep the buttons.
 */
@media (max-width: 767.98px) {
  #root div.sticky.top-0.h-16 > button.px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  #root div.sticky.top-0.h-16 > div.flex-1.px-4 { min-width: 0 !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  #root div.sticky.top-0.h-16 > div.flex-1.px-4 > div.flex.flex-1 { min-width: 0 !important; }
  #root div.sticky.top-0.h-16 > div.flex-1.px-4 > div.flex.flex-1 > * + * { margin-left: 0.5rem !important; }
  #root div.sticky.top-0.h-16 h2.whitespace-nowrap { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
  #root div.sticky.top-0.h-16 > div.flex-1.px-4 > div.ml-4 { margin-left: 0.5rem !important; flex-shrink: 0; }
  #root div.sticky.top-0.h-16 > div.flex-1.px-4 > div.ml-4 > * + * { margin-left: 0.375rem !important; }
  #root div.sticky.top-0.h-16 > div.flex-1.px-4 > div.ml-4 button.px-4 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
  /* Long breadcrumbs (e.g. Settings / Payment Settings / Payment Terms / Create) wrap instead of widening the page. */
  #root main nav.flex > ol.flex.items-center { flex-wrap: wrap; row-gap: 0.25rem; min-width: 0; }
  /* Dashboard 12-column grid: 11 gaps of 2rem = 352 px on their own, wider than a 360 px phone. */
  #root main div.grid.grid-cols-12.gap-8 { column-gap: 0.5rem; }
  /* Dashboard: the currency / date-range control row overflows to the LEFT (unreachable). Let it wrap. */
  #root main div.flex.space-x-2:has(> div.space-y-2 .css-b62m3t-container) { flex-wrap: wrap; justify-content: flex-start; row-gap: 0.5rem; }
}