/* =========================================================
   NOC Custom Theme Overrides (Keycloak login)
   ========================================================= */

/* ---------- Base / background ---------- */
html, body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* html has class "login-pf" in KC; scope bg to this page only */
  html.login-pf body {
    background: url("../img/mine-background.jpg") no-repeat center center fixed !important;
    background-size: cover !important;
  }
  
  /* ---------- The ONE flex centering context ----------
     Keycloak (PatternFly) wrapper around the card is .login-pf-page.
     Make it fill the viewport and center its only child (.card-pf). */
  .login-pf-page {
    min-height: 100vh !important;
    height: 100vh !important;
    width: 100vw !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    inset: 0 !important; /* top/right/bottom/left = 0 */

    /* override PatternFly's default spacing that pins it to the top */
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Prevent any upstream wrappers from reintroducing spacing */
  #kc-container-wrapper,
  #kc-content-wrapper,
  #kc-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* ---------- Card sizing / centering ---------- */
  .card-pf {
    /* with the parent as flex, margin:auto handles both axes nicely */
    margin: auto !important;
    max-width: 560px !important;
    width: 100% !important;
  
    /* visual styles */
    background: rgba(45, 45, 45, 0.95) !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* ---------- Grid containers: let Bootstrap behave (no flex here) ---------- */
  .container,
  .container-fluid,
  .col-sm-8.col-sm-offset-2,
  .col-md-6.col-md-offset-3,
  .col-lg-6.col-lg-offset-3 {
    display: block !important;
    float: none !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* ---------- Hide default Keycloak logo ---------- */
  div.kc-logo-text { display: none !important; }
  
  /* ---------- Custom logo + title ---------- */
  .noc-logo { text-align: center; margin-bottom: 20px; }
  
  .nokia-logo {
    height: auto;
    width: 80%;
    max-width: 250px;
    margin: 0 auto;
    display: block;
  }
  
  .noc-title {
    color: #ffffff;
    font-size: 28px;
    font-weight: 300;
    margin: 0 0 20px 0;
    text-align: center;
  }
  
  /* ---------- Header ---------- */
  header.card-pf-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 40px 20px 30px 20px !important;
  }
  
  #kc-page-title {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 24px !important;
    font-weight: 400 !important;
  }
  
  /* ---------- Content padding ---------- */
  #kc-content { padding: 0 20px 30px 20px !important; }
  
  /* ---------- Inputs ---------- */
  .pf-c-form-control {
    border-radius: 8px !important;
    border: 2px solid #e0e0e0 !important;
    transition: all 0.3s ease !important;
  }
  
  .pf-c-form-control:focus {
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
  }
  
  /* ---------- Labels ---------- */
  .pf-c-form__label-text {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    font-weight: 500 !important;
  }
  
  /* ---------- Primary button ---------- */
  .pf-c-button.pf-m-primary {
    background: #0066cc !important;
    border-color: #0066cc !important;
    border-radius: 8px !important;
    padding: 15px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
  }
  
  .pf-c-button.pf-m-primary:hover {
    background: #0052a3 !important;
    border-color: #0052a3 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
  }
  
  .pf-c-button.pf-m-primary:active { transform: translateY(0); }
  
  /* ---------- Checkbox ---------- */
  .pf-c-check__label {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }
  
  /* ---------- Password visibility input group ---------- */
  .pf-c-input-group { border-radius: 8px !important; overflow: hidden; }
  
  .pf-c-input-group .pf-c-form-control {
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
  }
  
  .pf-c-input-group .pf-c-button {
    border-radius: 0 8px 8px 0 !important;
    border-left: none !important;
    border-color: #e0e0e0 !important;
    background: #f8f9fa !important;
    color: #6c757d !important;
  }
  
  .pf-c-input-group .pf-c-button:hover {
    background: #e9ecef !important;
    color: #495057 !important;
  }
  
  /* ---------- Alerts ---------- */
  .alert-error {
    background-color: rgba(220, 53, 69, 0.9) !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
  }
  
  .alert-success {
    background-color: rgba(40, 167, 69, 0.9) !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
  }
  
  .alert-info {
    background-color: rgba(23, 162, 184, 0.9) !important;
    border-color: #17a2b8 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
  }
  
  .alert-warning {
    background-color: rgba(255, 193, 7, 0.9) !important;
    border-color: #ffc107 !important;
    color: #333 !important;
    border-radius: 8px !important;
  }
  
  /* ---------- Footer / info ---------- */
  #kc-info {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  #kc-info a {
    color: #0066cc !important;
    text-decoration: none;
    font-weight: 500;
  }
  
  #kc-info a:hover { text-decoration: underline; }
  
  /* ---------- Ensure form area can grow properly ---------- */
  .kcFormAreaClass {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* ---------- Responsive tweaks ---------- */
  @media (max-width: 480px) {
    .card-pf { margin: 10px; }
    header.card-pf-header { padding: 20px 20px 15px 20px !important; }
    #kc-content { padding: 0 20px 20px 20px !important; }
    .noc-title { font-size: 24px; }
    .nokia-logo { width: 90%; max-width: 200px; }
  }

  /* ---------- Social providers ---------- */
  /* Match social button rounding/size to primary without changing color */
  #kc-social-providers .kc-social-links .pf-c-button.pf-m-control.kc-social-item {
    border-radius: 8px !important;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    min-height: 48px !important;
    border: 1px solid transparent !important; /* prevent default border without affecting layout */
    outline: none !important;           /* remove default outline */
    box-shadow: none !important;        /* remove PF default shadow */
    background-clip: padding-box !important;
  }

  /* Rounded, accessible focus ring for keyboard users */
  #kc-social-providers .kc-social-links .pf-c-button.pf-m-control.kc-social-item:focus,
  #kc-social-providers .kc-social-links .pf-c-button.pf-m-control.kc-social-item:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25) !important;
    border-radius: 8px !important;
  }

  /* Ensure no pseudo-element draws a square frame */
  #kc-social-providers .kc-social-links .pf-c-button.pf-m-control.kc-social-item::before,
  #kc-social-providers .kc-social-links .pf-c-button.pf-m-control.kc-social-item::after {
    content: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 8px !important;
  }

  /* Keep corners/frameless appearance across hover/active */
  #kc-social-providers .kc-social-links .pf-c-button.pf-m-control.kc-social-item:hover,
  #kc-social-providers .kc-social-links .pf-c-button.pf-m-control.kc-social-item:active {
    border: 1px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 8px !important;
  }

  /* Make "Or sign in with" heading use the standard label/text color */
  #kc-social-providers.kc-social-section h2 {
    color: #ffffff !important;
  }