/* ===========================
   Login page (M.Vincé styling)
   =========================== */

:root{
  /* Brand palette */
  --mv-gold: #d1b15d;
  --mv-gold-ink: #b49343;
  --mv-gray-900: #2f2f2f;   /* charcoal */
  --mv-gray-800: #3a3a3a;
  --mv-gray-100: #f4f4f4;   /* soft page bg */
  --mv-border:  #e5e5e5;

  /* Layout tokens */
  --card-w: 480px;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --footer-h: 64px;
  --header-h: 96px;
}

/* Page background + base text color */
.mv-body{
  background: var(--mv-gray-100);
  color: var(--mv-gray-900);
}

/* ===========================
   Header (full-width, white)
   =========================== */
.mv-header{
  background: #fff;
  border-bottom: 1px solid var(--mv-border);
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--header-h);
}

/* Real logo image (when you have it) */
.mv-logo{
  max-height: 60px;     /* comfortably fits in 96px header */
  height: auto;
  width: auto;
  display: block;
}

/* Placeholder (remove when you swap to <img class="mv-logo">) */
.mv-logo-ph{
  width: 260px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mv-gold-ink);
  background: #fff;
  border: 1px dashed var(--mv-border);
  border-radius: 6px;   /* rectangle, not oval */
  font-weight: 700;
  letter-spacing: .08em;
  user-select: none;
}

/* ===========================
   Login Card
   =========================== */
.login-card{
  max-width: var(--card-w);
  border: 1px solid var(--mv-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  background: #fff;
}

/* Gold accent bar at card top */
.login-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--mv-gold);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* Headings */
.brand{
  letter-spacing: .4px;
  color: var(--mv-gray-900);
}

/* ===========================
   Inputs & Controls
   =========================== */
.mv-input{
  border-color: var(--mv-border);
  border-radius: 10px;
}
.mv-input:focus{
  border-color: var(--mv-gold-ink);
  box-shadow: 0 0 0 .25rem rgba(209,177,93,.25);
}

/* Eye button snug with input */
.mv-eye{
  border-left: 0;
  border-color: var(--mv-border);
  border-radius: 0 10px 10px 0;
}
.input-group > .form-control.mv-input{
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Primary button (charcoal with subtle gold focus) */
.mv-btn-brand{
  letter-spacing: .03em;
  border-radius: 10px;
  background: var(--mv-gray-900);
  border-color: var(--mv-gray-900);
}
.mv-btn-brand:hover{
  background: var(--mv-gray-800);
  border-color: var(--mv-gray-800);
}
.mv-btn-brand:focus{
  box-shadow: 0 0 0 .25rem rgba(209,177,93,.35);
}

/* ===========================
   Footer (charcoal bar)
   =========================== */
.mv-footer{
  height: var(--footer-h);
  background: var(--mv-gray-900);
}

/* Subtle text tweak to match palette */
.text-muted{ color: #6b6b6b !important; }

/* ===========================
   Responsive tweaks
   =========================== */
@media (max-width: 420px){
  :root { --card-w: 100%; --header-h: 84px; }
  .mv-logo-ph{ width: 180px; height: 52px; }
}