/* Business Partners Ltd — Brand Styles
 * Loaded last (after default.css, blazorblueprint.css, app.css) to enforce brand rules.
 * See src/Web/.docs/StyleGuide.md for the full specification.
 */

/* default.css's dark-mode --destructive (oklch(0.396 0.141 25.723)) is both darker and less
   saturated than the light-mode value, so error text/borders/backgrounds read dull against the
   navy background. Brighten it to a proven vivid dark-theme red — this affects every error
   message app-wide (border-destructive/50, bg-destructive/10, text-destructive) plus the
   Destructive button variant, not just this page. */
.dark {
  --destructive: oklch(0.637 0.237 25.331);
}

/* ── Brand tokens (for use in this file) ── */
:root {
  --bp-blue:    #1C355E;
  --bp-orange:  #FF9E18;
  --bp-grey:    #DCE3EB;
  --bp-dusty:   #33647E;
  --bp-navy:    #00263A;
  --bp-lblue:   #6191B4;
  --bp-lorange: #F1E4B2;
}

/* These two utility classes are used throughout the app's hand-rolled error boxes
   (e.g. "rounded-md border border-destructive/50 bg-destructive/10 p-4") but were never actually
   compiled into app.css or blazorblueprint.css — there is no Tailwind build step wired into this
   project, so anything not present the last time someone ran one silently does nothing. Every
   error box app-wide has therefore only ever shown red text with no border or background tint,
   in both themes. Defined directly here so they track --destructive (and its dark-mode override
   above) automatically. */
.border-destructive\/50 {
  border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
}

.bg-destructive\/10 {
  background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
}

/* ── Brand mandate: zero shadows, zero gradients ── */
.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl,
.shadow-inner {
  box-shadow: none;
}

/* ── Typography: display font for headings ── */
h1, h2 {
  font-family: 'Everett', 'Inter', 'DM Sans', sans-serif;
}

/* ── Main layout header ── */
.bp-header {
  background-color: var(--bp-blue);
  border-bottom: 1px solid var(--bp-navy);
  color: #FFFFFF;
}

.bp-header .bp-logo-link {
  color: #FFFFFF;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bp-nav-link {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.bp-nav-link:hover {
  color: #FFFFFF;
}

.bp-nav-link.active {
  color: #FFFFFF;
}

/* ── Header nav hover dropdown (Dashboard → sections the user can reach) ── */
.bp-nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.bp-nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

/* Reset button styles — this is a real <button>, not part of the Dashboard <a>, so touch users
   (no :hover) and screen readers get an explicit, focusable, ARIA-described toggle. */
.bp-nav-caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.25rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  border-radius: calc(var(--radius) - 0.125rem);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.bp-nav-caret-btn:hover,
.bp-nav-dropdown:hover .bp-nav-caret-btn {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.1);
}

.bp-nav-caret {
  transition: transform 0.15s ease;
}

.bp-nav-dropdown:hover .bp-nav-caret,
.bp-nav-caret-btn[aria-expanded="true"] .bp-nav-caret {
  transform: rotate(180deg);
}

.bp-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 13rem;
  padding: 0.375rem;
  background-color: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 60;
}

/* Invisible bridge so the menu doesn't close while the cursor crosses the gap */
.bp-nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0;
  right: 0;
  height: 0.5rem;
}

.bp-nav-dropdown:hover .bp-nav-dropdown-menu,
.bp-nav-dropdown:focus-within .bp-nav-dropdown-menu,
.bp-nav-dropdown-menu-open {
  display: block;
}

.bp-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--popover-foreground);
  text-decoration: none;
  border-radius: calc(var(--radius) - 0.125rem);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bp-nav-dropdown-item:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

/* Orange is the brand accent — used sparingly, only to mark the current section */
.bp-nav-dropdown-item.active {
  color: var(--primary);
}

/* Ghost button (dark mode toggle) on dark header */
.bp-header-action button {
  color: rgba(255, 255, 255, 0.75) !important;
}

.bp-header-action button:hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Main layout footer ── */
.bp-footer {
  background-color: var(--bp-navy);
  border-top: none;
}

.bp-footer p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

.bp-footer a {
  color: var(--bp-orange);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Auth page layout wrapper ── */
.bp-auth-bg {
  min-height: 100vh;
  background-color: var(--bp-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  gap: 2rem;
}

/* Brand mark above auth card - reversed (white) BusinessPartners logo lockup,
   per Corporate Identity Manual (ADO 120236): dot-grid icon + "BusinessPartners"
   wordmark (one word, no "Ltd" - that suffix is body-copy only, never the logo). */
.bp-auth-brand {
  text-align: center;
}

.bp-auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 0.25rem;
}

.bp-auth-logo-icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.bp-auth-logo-icon circle {
  fill: #FFFFFF;
}

.bp-auth-logo-peg {
  fill: var(--bp-orange);
}

.bp-auth-logo-wordmark {
  color: #FFFFFF;
  font-family: 'Everett', 'Inter', 'DM Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.bp-auth-brand-tagline {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  display: block;
}

/* Fixed width so "Upload" and the longer "Re-upload" pill don't render at different sizes
   depending on document state (ApplicationDetails.razor's Documentation step). Left-aligned
   (overriding the element's own justify-center) so the icon sits at the same spot in every
   row instead of shifting with the fixed-width badge now centering shorter/longer text
   differently. */
.bp-upload-badge {
  min-width: 6.5rem;
  justify-content: flex-start;
}

/* Fixed width so a long document-type label (native <select> otherwise sizes to fit its longest
   option) doesn't balloon and squeeze the filename beside it down to a few characters
   (NewIntermediaryApplication.razor's Documents step, ADO 120295). Truncated with ellipsis for
   an option text longer than this. */
.bp-doctype-select {
  width: 13rem;
  flex-shrink: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* ── Orange square bullet points ── */
ul.bp-list {
  list-style: none;
  padding-left: 0;
}

ul.bp-list li {
  padding-left: 1.25rem;
  position: relative;
  margin-bottom: 0.5rem;
}

ul.bp-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.375rem;
  width: 7px;
  height: 7px;
  background-color: var(--bp-orange);
  transform: rotate(11deg);
}

/* ── Link button style (orange square + white arrow) ── */
.bp-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--bp-blue);
  text-decoration: none;
}

.bp-link-btn::after {
  content: '→';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--bp-orange);
  color: #FFFFFF;
  font-size: 0.75rem;
  border-radius: 2px;
}

/* ── Home hero band ── */
.bp-hero {
  background-color: var(--bp-navy);
  color: #FFFFFF;
}

.bp-hero-sub {
  color: rgba(255, 255, 255, 0.75);
}

/* The quick-link cards inside the hero are white surfaces — without this, their headings and
   Outline-variant button text inherit the hero's white and become invisible on the white card. */
.bp-hero .bg-card {
  color: var(--card-foreground);
}

/* Decorative dot-grid — the manual's "Additional Elements > Patterns" motif: a grid of dots with
   one orange rotated square standing in for a dot, scaled down as a hero accent. */
.bp-hero-motif {
  display: grid;
  grid-template-columns: repeat(3, 7px);
  grid-auto-rows: 7px;
  gap: 6px;
  justify-content: center;
}

.bp-hero-motif span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35);
}

.bp-hero-motif span.bp-motif-sq {
  border-radius: 1px;
  background-color: var(--bp-orange);
  transform: rotate(11deg);
}

/* ── Hero stat strip (public visitors only) ── */
.bp-hero-stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
}

.bp-hero-stat-value {
  font-family: 'Everett', 'Inter', 'DM Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
}

.bp-hero-stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ── "What we do" section — muted band so it reads as a distinct zone from the hero and page
   background in both themes (in dark mode the page background and hero navy are the same colour). */
.bp-section-alt {
  background-color: var(--muted);
}

/* In dark mode, --muted (Dark Dusty Blue) is too big a lightness jump from the navy hero/page
   background — step down to a subtler tone, roughly halfway between the navy and the card blue. */
.dark .bp-section-alt {
  background-color: #0E2D4C;
}

/* Halves the radius on the home page's big card blocks (rounded-xl resolves via the --radius-xl
   custom property, so redeclaring it on the same element scopes the change without touching the
   --radius-xl used by rounded-xl elsewhere in the app). */
.bp-block {
  --radius-xl: 0.375rem;
}

/* ── Service icon chip — one tint per service, matching the brand's per-service palette ── */
.bp-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(255, 158, 24, 0.12);
  color: var(--bp-orange);
  border-radius: var(--radius);
}

/* Solid fills (not tints) with a white icon — a dark icon on a light tint of the same colour
   would lose contrast in dark mode, where the card itself is already a dark brand blue. */
.bp-icon-chip.bp-icon-navy {
  background-color: var(--bp-navy);
  color: #FFFFFF;
}

.bp-icon-chip.bp-icon-dusty {
  background-color: var(--bp-dusty);
  color: #FFFFFF;
}

.bp-icon-chip.bp-icon-lblue {
  background-color: var(--bp-lblue);
  color: #FFFFFF;
}

/* ── Closing CTA strip ── */
.bp-cta-strip {
  background-color: var(--muted);
  border-top: 1px solid var(--border);
}

/* Same brightness problem as .bp-section-alt — --muted is too bright a jump in dark mode.
   Use the card blue instead, a step up from .bp-section-alt so the page still gets gradually
   lighter on the way down to the CTA, without the jarring jump back to a bright dusty-teal. */
.dark .bp-cta-strip {
  background-color: var(--card);
}