/* Login page styles – modern look */

/* Layout */
.wrap-narrow { max-width: 480px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 24px; margin: 12px 0 16px; text-align: center; }
/* Larger, centered title only on login page */
.login-page .home-title{ font-size: clamp(32px, 6vw, 48px); font-weight: 400; text-align: center; margin: 8px 0 12px; }

/* Card */
.card { backdrop-filter: blur(6px); padding: 16px; border-radius: 12px; }

/* Tabs */
.tabs { display: flex; gap: 8px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.tab { flex: 1; padding: 14px 14px; text-align: center; cursor: pointer; background: #0b1020; color: var(--muted); font-weight: 600; border: none; font-size: 17px; min-height: 48px; }
.tab.active { background: var(--accent); color: #052e16; }

/* Labels - uniform size */
label { display: block; font-size: 18px; margin: 10px 0 8px; color: var(--muted); }
.toggle label { margin: 0; font-size: 18px; }

/* Inputs */
input:not([type="checkbox"]) { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #0b1020; color: var(--text); outline: none; font-size: 18px; min-height: 48px; }
input:focus { border-color: #334155; }

/* Checkbox - larger size and aligned */
input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.toggle { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* Buttons */
.btn { 
  padding: 12px 16px; font-size: 17px; border-radius: 12px; 
  cursor: pointer; border: 1px solid transparent; font-weight: 700;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  color: var(--text);
  transition: all .18s ease;
}
.btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn.cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #2563eb; /* blue-600 */
  color: #fff;
  border: 1px solid #1e40af; /* blue-800 */
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(37,99,235,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease;
}
.btn.cta:hover { background: #1d4ed8; box-shadow: 0 8px 18px rgba(37,99,235,.3); transform: translateY(-1px) }
.btn.cta:active { transform: translateY(0); filter: brightness(0.96) }
.btn.cta:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 6px 14px rgba(37,99,235,.25) }
.btn-primary { 
  min-height: 48px; 
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #052e16; border-color: #14532d;
  box-shadow: 0 6px 18px rgba(22, 163, 74, .25), inset 0 -2px 0 rgba(0,0,0,.15);
}
.btn-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.10);
}

/* Utilities */
.right { display: flex; justify-content: flex-end; }
.mt-12 { margin-top: 12px; }
.mt-8 { margin-top: 8px; }
.mt-6em { margin-top: 6em; }
.mt-8em { margin-top: 8em; }

.col { flex: 1; }

/* Result text */
.result { margin-top: 10px; font-size: 14px; min-height: 22px; }
.hidden { display: none; }

/* Initial state for kid pane (JS toggles later) */
#kidPane { display: none; }

/* --- Utilities for login buttons layout --- */
.row { display: flex; }
.row-right { justify-content: flex-end; margin-top: 1.25em; }
.row-center { justify-content: center; margin-top: 6em; }
.row-left { justify-content: flex-start; }
.btn-wide { min-width: 220px; }

/* --- Modal overrides & visual polish --- */
/* Base modal styles (centered) */
.modal{ position:fixed; inset:0; background:rgba(2,6,23,.65); display:none; align-items:center; justify-content:center; padding:16px; z-index:1000 }
.sheet{
  background: linear-gradient(180deg, rgba(17,24,39,.88), rgba(11,18,32,.88));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; width:100%; max-width:560px; padding:22px; color:#fff;
  max-height:calc(100vh - 64px); overflow:auto;
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

#authModal .sheet-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
#authModal .sheet-top h2{ margin:0; font-size:22px; letter-spacing:.2px; }

/* Inputs & labels inside auth modal */
#authModal label{ display:block; margin:12px 0 8px; color: var(--muted); font-size: 13px; }
#authModal input[type="text"],
#authModal input[type="email"],
#authModal input[type="password"],
#authModal input[type="number"]{
  width:100%; background:#0b1220; color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  outline: none; transition: border-color .18s ease, box-shadow .18s ease;
}
#authModal input:focus{
  border-color:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.20);
}

/* Toggle “Vis” row */
.toggle { display:flex; align-items:center; gap:8px; margin-top:6px; }
.toggle input{ width:18px; height:18px; }
.toggle label{ margin:0; }

/* Section separation for create household */
#paneCreate{ border-top:1px solid rgba(255,255,255,.08); padding-top: 28px; }

/* Compatibility for any legacy create-household modal (not used now) */
#modalCreateHousehold { display: none; }
#modalCreateHousehold .sheet { max-width: 520px; }
#modalCreateHousehold .sheet-top { display: flex; align-items: center; justify-content: space-between; }

/* Shared auth modal */
#authModal { display: none; }
#authModal .sheet { max-width: 520px; }

/* --- Overrides for homepage create-household (Kom i gang) --- */
/* These are placed at the end of login.css to ensure they win over the global
   input styling defined earlier in this file. They apply to the home page
   section with id #createBlock / #formCreateHousehold. */
.home #createBlock input,
.home #createBlock select,
.home #createBlock textarea,
.home #formCreateHousehold input,
.home #formCreateHousehold select,
.home #formCreateHousehold textarea{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #e5e7eb !important;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.home #createBlock input:focus,
.home #createBlock select:focus,
.home #createBlock textarea:focus,
.home #formCreateHousehold input:focus,
.home #formCreateHousehold select:focus,
.home #formCreateHousehold textarea:focus{
  border-color:#cbd5e1 !important; outline:none;
}