/* Modern login overrides for SiAmi (Universitas Ary Ginanjar) */
:root{
  --login-card-bg: rgba(255,255,255,0.92);
  --card-radius: 14px;
  --shadow: 0 10px 30px rgba(2,6,23,0.12);
}

/* Fullscreen centered layout */
.authincation{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
  background: linear-gradient(180deg, rgba(46,153,206,0.06), rgba(38,36,93,0.03)), url('../images/bg.jpg');
  background-size:cover;
}

.authincation-content{
  max-width:460px;
  width:100%;
  margin:auto;
  border-radius:var(--card-radius);
  background:var(--login-card-bg);
  box-shadow:var(--shadow);
  overflow:hidden;
  transform:translateY(0);
}

.auth-form{
  padding:34px 36px;
}

.auth-form .brand {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:18px;
}
.auth-form .brand img{ border-radius:8px; height:68px; width:auto; }
.auth-form h4{ font-weight:700; color:var(--dark); }
.auth-form h4.text-primary{ color:var(--primary); }

.form-control{
  border-radius:10px;
  border:1px solid #e6e9ef !important;
  padding:12px 14px;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.form-control:focus{
  outline:none;
  border-color:var(--secondary) !important;
  box-shadow:0 6px 18px rgba(46,153,206,.12);
}

.input-group .btn{
  border-radius:8px;
}

.btn-primary{
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border: none;
  padding:12px 18px;
  border-radius:10px;
  font-weight:600;
  box-shadow: 0 8px 20px rgba(38,36,93,0.12);
}
.btn-primary:hover{ background: linear-gradient(90deg, var(--secondary), var(--primary)); }

.alert{ border-radius:10px; }

.new-account{ padding: 16px; font-size:13px; color:#6b6b6b; }

/* small screens */
@media (max-width:480px){
  .authincation-content{ border-radius:12px; }
  .auth-form{ padding:20px; }
}

/* utility */
.text-muted{ color:#8b8b8b; }

/* accessible focus for links */
a:focus{ outline: 3px solid rgba(46,153,206,0.15); outline-offset:3px; }

/* subtle entrance animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.authincation-content{ animation: fadeInUp .42s cubic-bezier(.2,.9,.3,1) both; }

/* input icon styles */
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width:18px; height:18px; color: #98a0b3; }
.input-icon .form-control { padding-left:40px; }

/* small hover micro-interaction for buttons */
.btn-primary{ transition: transform .14s ease, box-shadow .14s ease; }
.btn-primary:active{ transform: translateY(1px) scale(.997); }

/* subtle focus ring for inputs */
.form-control:focus{ box-shadow: 0 8px 26px rgba(46,153,206,0.12); }

/* helper SVG button styles */
.input-group-append .btn{ border:1px solid #eef2f6; }

/* role selection grid (index landing) */
.role-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin-top:12px;
}
.role-card{
  --card-radius:12px;
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 12px;
  border-radius:var(--card-radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.32));
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.55);
  color:var(--primary);
  text-decoration:none;
  justify-content:center;
  flex-direction:column;
  min-height:98px;
  transition: transform .2s cubic-bezier(.2,.9,.3,1), box-shadow .2s ease;
  overflow:hidden;
}
.role-card::before{
  content:"";
  position:absolute;
  left:-30%;
  top:-6px;
  width:160%;
  height:6px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: translateY(-10px) scaleX(0.9);
  opacity:0.95;
  transition: transform .28s ease;
}
.role-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--card-radius);
  pointer-events:none;
}
.role-card .icon-wrap{
  width:56px;
  height:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  box-shadow: 0 8px 18px rgba(46,153,206,0.12);
  color: #fff;
}
.role-card svg{ width:20px; height:20px; }
.role-card .role-title{ display:block; font-weight:700; margin-top:10px; font-size:15px; }
.role-card .role-desc{ display:block; font-size:12px; color:#60708a; margin-top:6px; }
.role-card:hover{ transform: translateY(-8px); box-shadow:0 26px 60px rgba(38,36,93,0.12); }
.role-card:hover::before{ transform: translateY(0); }
.role-card:focus{ outline:3px solid rgba(46,153,206,0.12); outline-offset:6px; }

@media (max-width:480px){
  .role-grid{ grid-template-columns:1fr; }
}