/**
 * @file
 * Dashboard-only Gin backend extras.
 *
 * Moved out of the shared gin_customizations module so that module can sync to
 * waas-v2 without dashboard-specific styling. Depends on the --livalos-* tokens
 * defined in gin_customizations/css/brand.css (both modules load on Gin).
 *
 * NOTE: !important is required because Drupal loads module CSS before theme CSS
 * and Gin's accent.js injects inline <style> elements.
 */

/* ---------------------------------------------------------------------------
   SOCIAL AUTH BUTTONS (Login page)
   --------------------------------------------------------------------------- */

/* Hide "Or sign in with:" legend */
.social-auth-buttons > legend {
  display: none !important;
}

.social-auth-buttons {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
}

.social-auth-buttons .fieldset__wrapper {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: 0 !important;
}

.social-auth-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .625rem !important;
  padding: .7rem 1.25rem !important;
  border-radius: var(--livalos-radius-sm) !important;
  border: 1.5px solid var(--livalos-gray-300) !important;
  background: var(--livalos-white) !important;
  color: var(--livalos-gray-dark) !important;
  font-weight: 500 !important;
  font-size: .875rem !important;
  text-decoration: none !important;
  transition: all .2s cubic-bezier(.19, 1, .22, 1) !important;
  cursor: pointer;
}

.social-auth-button:hover {
  border-color: var(--livalos-gray) !important;
  box-shadow: var(--livalos-shadow-sm) !important;
  background: var(--livalos-gray-50) !important;
  color: var(--livalos-gray-900) !important;
  transform: translateY(-1px) !important;
}

.social-auth-button::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Google logo */
.social-auth-google::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%2334A853' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%23FBBC05' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");
}

/* Microsoft logo */
.social-auth-microsoft::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Crect fill='%23f35325' x='1' y='1' width='10' height='10'/%3E%3Crect fill='%2381bc06' x='12' y='1' width='10' height='10'/%3E%3Crect fill='%2305a6f0' x='1' y='12' width='10' height='10'/%3E%3Crect fill='%23ffba08' x='12' y='12' width='10' height='10'/%3E%3C/svg%3E");
}

/* LinkedIn logo */
.social-auth-linkedin::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230A66C2' d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

/* Dark mode social auth */
.gin--dark-mode .social-auth-button {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .15) !important;
  color: #e2e8f0 !important;
}

.gin--dark-mode .social-auth-button:hover {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .25) !important;
  color: white !important;
}

/* ---------------------------------------------------------------------------
   FOOTER MENU
   --------------------------------------------------------------------------- */

.menu--footer {
  position: fixed !important;
  bottom: 0 !important;
  left: var(--admin-toolbar-sidebar-width, 0px) !important;
  right: 0 !important;
  padding: var(--gin-spacing-s) var(--gin-spacing-l) !important;
  border-block-start: 1px solid var(--gin-border-color-secondary) !important;
  background: var(--gin-bg-layer) !important;
  z-index: 100 !important;
}

.menu--footer .menu,
.menu--footer ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--gin-spacing-s) var(--gin-spacing-l) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.menu--footer .menu-item {
  list-style: none !important;
}

.menu--footer .menu-item a {
  color: var(--gin-color-text-light) !important;
  font-size: var(--gin-font-size-xs) !important;
  text-decoration: none !important;
}

.menu--footer .menu-item a:hover {
  color: var(--livalos-primary, var(--gin-color-primary)) !important;
  text-decoration: underline !important;
}

/* Register: match the login page's social-button spacing (#128).
   The register form sits inside field_layout's .layout__region, which the login
   form does not, and that gives the buttons a bottom margin login never applies.
   Measured: 42px between buttons on registration against 26px on login. Drop the
   bottom margin so both pages leave the same 26px (10px flex gap + 16px top). */
.user-register-form .social-auth-button {
  margin-bottom: 0 !important;
}