/* =========================
   Auth Theme (Login + Register)
   Matches overview styling
   ========================= */

   @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600;700&family=Nunito:wght@400;600&display=swap");

   *{ box-sizing: border-box; }
   
   body{
     margin: 0;
     font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     background: #f7f7f8;
     color: #111827;
     overflow-x: hidden;
     overflow-y: auto;
   }
   
   /* Centered page like overview */
   .page{
     min-height: calc(100dvh - 64px);
     padding: 28px 18px;
     display: grid;
     place-items: center;
   }
   
   /* Card container */
   .auth-card{
     width: min(720px, 92vw);
     background: #fff;
     border-radius: 20px;
     padding: 28px 22px;
     text-align: center;
   
     border: 1px solid rgba(0,0,0,0.06);
     box-shadow:
       0 12px 28px rgba(0,0,0,0.08),
       0 4px 0 rgba(0,0,0,0.05);
   }
   
   /* Title + subtitle */
   .page-title{
     font-family: "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     font-size: clamp(26px, 5.5vw, 40px);
     font-weight: 700;
     letter-spacing: -0.6px;
     margin: 0 0 10px;
   }
   
   .page-subtitle{
     margin: 0 0 22px;
     font-size: 16px;
     line-height: 1.5;
     color: #4b5563;
   }
   
   /* Form */
   .auth-form{
     display: grid;
     gap: 12px;
     margin-top: 10px;
   }
   
   .field{
     display: grid;
     gap: 6px;
     text-align: left;
   }
   
   .field-label{
     font-size: 12px;
     font-weight: 700;
     color: #6b7280;
     letter-spacing: 0.1px;
   }
   
   /* Inputs */
   input{
     width: 100%;
     padding: 12px 14px;
     border-radius: 14px;
     border: 1px solid rgba(17, 24, 39, 0.12);
     background: #fff;
     font-size: 16px;
     outline: none;
   }
   
   input::placeholder{ color: #9ca3af; }
   
   input:focus{
     border-color: rgba(17, 24, 39, 0.28);
     box-shadow: 0 0 0 4px rgba(226, 188, 255, 0.25);
   }
   
   /* Buttons (same style language) */
   .cta-button-primary,
   .cta-button-secondary{
     font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   
     width: 100%;
     padding: 14px 18px;
     gap: 8px;
   
     border-radius: 1000px;
     border: none;
     cursor: pointer;
   
     font-size: 18px;
     font-weight: 600;
     color: #000;
   
     text-decoration: none;
     transition: transform .12s ease, opacity .12s ease;
   }
   
   .cta-button-primary{
     background: #E2BCFF;
     box-shadow: 0 6px 0 0 #B796D0;
   }
   
   .cta-button-secondary{
     background: #D1EEC7;
     box-shadow: 0 6px 0 0 #B2CAAA;
     opacity: 0.95;
   }
   
   .cta-button-primary:hover,
   .cta-button-secondary:hover{ opacity: 0.95; }
   
   .cta-button-primary:active,
   .cta-button-secondary:active{ transform: translateY(1px); }
   
   /* Divider */
   .divider{
     margin: 18px 0;
     border: none;
     height: 1px;
     background: rgba(0,0,0,0.08);
   }
   
   /* Link row */
   .link-row{
     margin-top: 14px;
     font-size: 14px;
     color: #4b5563;
   }
   
   .link-row a{
     color: #111827;
     font-weight: 700;
     text-decoration: none;
   }
   
   .link-row a:hover{
     text-decoration: underline;
   }
   
   /* Small helper text */
   .helper{
     margin-top: 8px;
     font-size: 12px;
     color: #6b7280;
   }
   
   /* Mobile tweaks (match your overview stacking) */
   @media (max-width: 640px){
     .auth-card{
       padding: 22px 16px;
     }
   
     .cta-button-primary,
     .cta-button-secondary{
       font-size: 17px;
     }
   }
   

/* =========================
   Google login button
   ========================= */

   .google-button{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  
    padding: 14px 18px;
    border-radius: 1000px;
    cursor: pointer;
  
    background: #ffffff;
    color: #111827;
  
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow:
      0 6px 0 rgba(0,0,0,0.05),
      0 12px 28px rgba(0,0,0,0.08);
  
    font-family: "Nunito", system-ui;
    font-size: 18px;
    font-weight: 600;
  
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  }
  
  .google-button:hover{
    opacity: 0.96;
  }
  
  .google-button:active{
    transform: translateY(1px);
    box-shadow:
      0 4px 0 rgba(0,0,0,0.05),
      0 8px 20px rgba(0,0,0,0.1);
  }
  
  .google-icon{
    display: grid;
    place-items: center;
  }
  
  .google-text{
    white-space: nowrap;
  }
  
  /* Make Google login feel "primary" on mobile */
  @media (max-width: 640px){
    .google-button{
      font-size: 17px;
    }
  }
  /* =========================
   Auth messages (errors / info)
   ========================= */

.auth-message{
    margin: 14px 0 18px;
    padding: 14px 16px;
    border-radius: 14px;
  
    font-size: 14px;
    line-height: 1.4;
  
    display: flex;
    gap: 10px;
    align-items: flex-start;
  
    border: 1px solid;
  }
  
  /* Error */
  .auth-message.error{
    background: #FFECEC;
    border-color: #E3B4B4;
    color: #7A1E1E;
  }
  
  /* Success (optional) */
  .auth-message.success{
    background: #EAF7E6;
    border-color: #B2CAAA;
    color: #1F5F2A;
  }
  
  /* Icon */
  .auth-message::before{
    content: "⚠️";
    font-size: 18px;
    line-height: 1;
  }
  
  .auth-message.success::before{
    content: "✅";
  }
  /* Forceer dat hidden écht verdwijnt (soms handig bij CSS conflicts) */
.auth-message[hidden]{
    display: none !important;
  }