/* =========================================================================
   PCE — Laravel integration layer.

   Everything in this file is NET-NEW. It covers states the approved static
   package never had: server-side validation output, flash messages, loader
   contrast on the navy backdrop, and focus visibility.

   The approved package is vendored alongside this file and must stay
   byte-identical to the signed-off source — bin/pce-gates.sh enforces that
   on every commit. New rules go HERE, never into portal.css.

   Every value below is derived from an approved one:
     input fill        rgba(255,255,255,.045)      portal.css:117
     focus ring shape  0 0 0 3px rgba(255,227,79,.08)  portal.css:125
     border            var(--pce-border)           portal.css:15
     radius            0                           portal.css, throughout
   Additions are annotated and listed in docs/10-rebrand-change-log.md.
   ========================================================================= */

:root{
  /* [NET-NEW] The approved package defines no semantic colours. Two hues only,
     both desaturated to sit on #08091c without shouting. The brand yellow
     (--pce-accent) stays reserved for neutral/info: using it for "success"
     and "warning" alike would read as muddy. */
  --pce-danger:#ff7a7a;
  --pce-danger-soft:rgba(255,122,122,.10);
  --pce-success:#5fd6a6;
  --pce-success-soft:rgba(95,214,166,.10);
  --pce-accent-soft:rgba(255,227,79,.08);   /* the approved focus-ring alpha */
}

/* -------------------------------------------------------------------------
   (a) Page-level flash banner

   Inline, not a SweetAlert2 modal, though Swal is loaded on every page. A
   login failure is a correction, not an interruption — it belongs above the
   form the user is about to retype, not behind an OK button. It also matches
   the 15 views that already render an inline @include('flash-message'),
   survives a back-navigation with role="alert", and works with JS disabled.
   ------------------------------------------------------------------------- */
.pce-alert{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 24px;
  padding:14px 16px;
  border:1px solid var(--pce-border);
  border-left:3px solid var(--pce-accent);
  border-radius:0;
  background:rgba(255,255,255,.045);
  box-shadow:0 0 0 3px var(--pce-accent-soft);
  color:#e8e9ef;
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  line-height:1.6;
}
.pce-alert p{margin:0;color:inherit;font-weight:500}
.pce-alert ul{margin:0;padding-left:18px}
.pce-alert li{margin:0 0 4px}
.pce-alert li:last-child{margin-bottom:0}

.pce-alert--danger { border-left-color:var(--pce-danger);  box-shadow:0 0 0 3px var(--pce-danger-soft) }
.pce-alert--success{ border-left-color:var(--pce-success); box-shadow:0 0 0 3px var(--pce-success-soft) }
.pce-alert--warning,
.pce-alert--info,
.pce-alert--primary,
.pce-alert--secondary,
.pce-alert--dark{ border-left-color:var(--pce-accent); box-shadow:0 0 0 3px var(--pce-accent-soft) }

.pce-alert-close{
  margin-left:auto;
  flex:0 0 auto;
  padding:0;
  border:0;
  background:none;
  color:var(--pce-muted);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:.2s ease;
}
.pce-alert-close:hover{color:var(--pce-accent)}

/* -------------------------------------------------------------------------
   (b) Inline field errors

   label.error is what jQuery Validation emits (public/js/front/*.js);
   .pce-field-error is ours, from the server. One rule covers both so client
   and server validation are visually identical.

   public/css/custom.css already declares .error{color:#F00} — pure red, harsh
   on navy. These selectors beat it on specificity AND load after it.
   ------------------------------------------------------------------------- */
.pce-login-card label.error,
.pce-login-card .pce-field-error{
  display:block;
  margin-top:8px;
  color:var(--pce-danger);
  font-family:'Montserrat',sans-serif;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:none;          /* .form-label is uppercase; errors are not */
}

/* .error is added to the control by jQuery Validation, .is-invalid by us. */
.pce-login-card .form-control.error,
.pce-login-card .form-select.error,
.pce-login-card .form-control.is-invalid,
.pce-login-card .form-select.is-invalid{
  border-color:var(--pce-danger);
  box-shadow:0 0 0 3px var(--pce-danger-soft);
}
.pce-login-card .form-control.error:focus,
.pce-login-card .form-select.error:focus,
.pce-login-card .form-control.is-invalid:focus,
.pce-login-card .form-select.is-invalid:focus{
  border-color:var(--pce-danger);
  background:rgba(255,255,255,.065);
  box-shadow:0 0 0 3px var(--pce-danger-soft);
}

/* -------------------------------------------------------------------------
   (c) Loader contrast

   public/images/avanisLoader.gif is a dark-grey ring on transparent — all but
   invisible on #08091c. The approved register/forgot pages both point at it.
   Inverting is a one-line fix; renaming the file touches four other views and
   is deferred.
   ------------------------------------------------------------------------- */
.registerLoader img,
.forgotLoader img{ filter:invert(1) brightness(1.6); }

/* -------------------------------------------------------------------------
   (d) Accessibility — [DEVIATION] three fixes, all needing sign-off

   Measured against the approved values (WCAG 2.x relative luminance, alphas
   composited against the stated backdrop):

     #ffe34f on #08091c ............... 15.34:1  PASS (AAA)
     #07091b on #ffe34f (button) ...... 15.37:1  PASS (AAA)
     #a8adbd on #08091c ...............  8.80:1  PASS (AAA)
     #777e91 placeholder on the fill ..  4.48:1  FAIL SC 1.4.3
     focus on .btn-primary ............ none     FAIL SC 2.4.7

   The brand colour is excellent. Both failures are in supporting values.
   Each fix below is isolated so it can be reverted in one block if the
   client prefers the approved values as-is. See docs/10, DEV-02..DEV-04.
   ------------------------------------------------------------------------- */

/* DEV-02 — placeholder contrast.
   #777e91 measures 4.48:1 on the shell and 4.11:1 on a panel. Placeholder
   text is text, so SC 1.4.3 applies. #818899 measures 5.11:1 / 4.69:1 —
   passes on both surfaces. Visually a 6-point lift, indistinguishable
   side by side. */
.pce-login-card .form-control::placeholder,
.pce-register-card .form-control::placeholder{ color:#818899; }

/* DEV-03 — input focus glow.
   The approved 8%-alpha halo composites to roughly 1.2:1 against the panel:
   decorative, not an indicator. The border change to --pce-accent is what
   actually carries the state (14.14:1), so this only makes the existing
   design legible. Same shape, same colour, same 3px offset. */
.pce-login-card .form-control:focus,
.pce-register-card .form-control:focus,
.pce-register-card .form-select:focus{
  box-shadow:0 0 0 3px rgba(255,227,79,.28);
}

/* DEV-04 — focus visibility.
   The approved package sets box-shadow:none on .btn-primary with no :focus
   rule at all, and defines no focus style for links. A keyboard user tabbing
   through the sign-in form watches both fields light up and then the "Log in"
   button show nothing. That is an SC 2.4.7 failure in the approved package.

   :focus-visible scoping means mouse users see no change whatsoever, so the
   visual design is untouched on the 95% path. */
.pce-auth a:focus-visible,
.pce-auth .btn:focus-visible,
.pce-auth button:focus-visible,
.pce-auth .pce-alert-close:focus-visible,
.pce-auth [tabindex]:focus-visible{
  outline:2px solid var(--pce-accent);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,227,79,.22);
}
.pce-auth *:focus:not(:focus-visible){ outline:none; }

/* Respect a reduced-motion preference for the button's hover lift
   (portal.css:143 transform:translateY(-1px)). */
@media (prefers-reduced-motion: reduce){
  .pce-login-card .btn-primary:hover{ transform:none; }
  .pce-login-card .btn-primary,
  .pce-login-card .form-control,
  .pce-register-card .form-control,
  .pce-register-card .form-select{ transition:none; }
}