:root{
  --md-primary: #075953; /* dark teal to match site */
  --md-accent: #deb255; /* gold */
  --md-card-bg: #ffffff;
}

/* Import Roboto font for Material look */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Material-inspired login styles (scoped for login page) */
:root{
  --md-primary: #075953; /* dark teal to match site */
  --md-accent: #deb255; /* gold */
  --md-card-bg: #ffffff;
}

.md-login-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  padding: 40px 0;
}

/* Center the auth card vertically within the page when used inside main.auth-main */
.auth-main{ display:flex; align-items:center; justify-content:center; min-height: calc(100vh - 40px); background: linear-gradient(180deg, rgba(7,89,83,0.06) 0%, rgba(234,241,240,0.02) 100%); }

.md-card{
  width:100%;
  max-width:420px;
  background:var(--md-card-bg);
  border-radius:12px;
  box-shadow: 0 8px 30px rgba(9, 30, 60, 0.12);
  overflow:hidden;
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* Larger card variant for tables / lists */
.md-card.lg{ max-width: 1100px; margin: 0 auto; }

.md-card-header{
  padding: 28px 28px 18px 28px;
  background: linear-gradient(90deg, var(--md-primary), rgba(7,89,83,0.9));
  color: #fff;
}
.md-card-header h2{ margin:0; font-weight:700; font-size:1.6rem }
.md-card-header .subtitle{ margin:4px 0 0; opacity:0.92; font-size:0.95rem }

.md-card-body{ padding: 24px; }

.md-form .md-field{ position:relative; margin-bottom:18px }
.md-form input[type="text"],
.md-form input[type="password"]{
  width:100%;
  border: none;
  border-bottom: 2px solid rgba(0,0,0,0.12);
  padding: 12px 8px 8px 8px;
  font-size:1rem;
  outline:none;
  background:transparent;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.md-form input:focus{ border-bottom-color: var(--md-primary); box-shadow: 0 2px 0 rgba(222,178,85,0.06) }

.md-form label{
  position:absolute;
  left:8px;
  top:12px;
  font-size:0.95rem;
  color:rgba(0,0,0,0.5);
  pointer-events:none;
  transition: transform .18s ease, font-size .18s ease, top .18s ease, color .18s ease;
}
.md-field input:focus + label,
.md-field input:not(:placeholder-shown) + label{
  transform: translateY(-140%) scale(0.88);
  color: var(--md-primary);
}

.md-link{ color:var(--md-primary); text-decoration:none; font-size:0.94rem }
.md-link:hover{ text-decoration:underline }

.md-btn{ display:inline-block; position:relative; overflow:hidden; cursor:pointer; border-radius:8px; padding:10px 20px; font-weight:600; border: none }
.md-btn-primary{ background: linear-gradient(90deg, var(--md-primary), rgba(7,89,83,0.95)); color:#fff }
.md-btn:focus{ outline:none }

.ripple{ position:absolute; border-radius:50%; transform:scale(0); background: rgba(255,255,255,0.3); animation: ripple 0.6s linear; pointer-events:none }
@keyframes ripple { to { transform:scale(4); opacity:0 } }

/* Small responsive tweaks */
@media (max-width:480px){
  .md-card{ margin: 0 12px }
  .md-card-header h2{ font-size:1.3rem }
}