.login-page input:not([type="checkbox"]),
.login-page select,
.login-page textarea{
  background:#fff !important;
  color:#111827 !important;
  border:1px solid var(--border) !important;
}
/* Override modal inputs on login page (login.css defines dark ones) */
.login-page #authModal input[type="text"],
.login-page #authModal input[type="email"],
.login-page #authModal input[type="password"],
.login-page #authModal input[type="number"]{
  background:#fff !important;
  color:#111827 !important;
  border:1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
/* iOS Safari autofill fix */
.login-page input:-webkit-autofill,
.login-page input:-webkit-autofill:hover,
.login-page input:-webkit-autofill:focus{
  -webkit-text-fill-color:#111827;
  transition: background-color 600000s 0s, color 600000s 0s;
  box-shadow: 0 0 0px 1000px #fff inset;
}
/* Light theme for familieflyt (applies subtle, bright UI) */
:root{
  --bg: #f3f4f6; /* a touch darker than pure white */
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2563eb;
}

html{ background: var(--bg) !important; background-image: none !important; }
body{ background:var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-weight: 400; }

/* Global text color fix: ensure typical containers render dark text */
body, .card, .sheet, .item, .table, .table th, .table td, h1, h2, h3, h4, h5, h6, p, label, span, div{
  color: var(--text);
}
a{ color: #1f3a8a; }
.muted{ color: var(--muted) !important; }

/* Navbar (light) */
.nav{ background: transparent; border-bottom: 0; }
.nav .container{ padding-top: 14px; padding-bottom: 14px; }
.nav .brand{ font-weight: 300; letter-spacing: 0.4px; font-size: clamp(28px, 6vw, 44px); line-height: 1.1; color: #111827; }
.logo{ font-weight: 300; letter-spacing: 0.4px; font-size: clamp(28px, 6vw, 44px); line-height: 1.1; color: #111827; text-align:center; margin: 8px 0 12px; }
.nav a{ color:#374151; border-radius:10px; background:#edeff2; border:1px solid #e5e7eb; }
.nav a:hover{ background:#e5e7eb; border-color:#d1d5db; }
/* Strong contrast for selected/current page in navbar */
.nav a.primary{
  color:#ffffff !important;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  border:1px solid #1d4ed8 !important;
  box-shadow: 0 6px 18px rgba(37,99,235,0.20) !important;
  font-weight: 600 !important;
}
.nav a.primary:hover{
  filter: brightness(1.03);
  box-shadow: 0 8px 22px rgba(37,99,235,0.28) !important;
  border-color:#1d4ed8 !important;
}
/* Light navbar globally in light theme (apply even if page didn't add nav-light) */
.nav .container,
.nav.nav-light .container{
  position: relative;
  z-index: 10;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid #e5e7eb !important;
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  box-shadow: 0 14px 38px rgba(17,24,39,.14), 0 3px 10px rgba(17,24,39,.08) !important;
}
.nav.nav-light .brand{ display:block !important; position:absolute; left:50%; transform:translateX(-50%); margin:0; }
.nav.nav-light a{ color:#374151 !important; font-weight:400; letter-spacing: 0.2px; }
.nav.nav-light a:hover{ background: rgba(243,244,246,.85) !important; border-color:#e5e7eb !important; transform:none !important; }
.nav.nav-light .primary{
  color:#ffffff !important;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  border:1px solid #1d4ed8 !important;
  box-shadow: 0 6px 18px rgba(37,99,235,0.20) !important;
  font-weight: 600 !important;
}

/* Generic UI */
.grid{display:grid;gap:16px}
@media(min-width:860px){.grid{grid-template-columns:1fr}}
label{display:block;font-size:13px;margin:10px 0 6px;color:var(--muted)}
input, select, textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.03)}
input:focus, select:focus, textarea:focus{border-color:#cbd5e1; outline: none}
/* Override dark admin.css field selectors */
.field input, .field select, .field textarea{ background:#fff !important; color:var(--text) !important; border:1px solid var(--border) !important; }
.field label{ color: var(--muted) !important; }
.row{display:flex;gap:10px}
.result{margin-top:10px;font-size:14px;min-height:22px}
.wrap{ padding-top: 0 }
.card{ background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow: 0 18px 46px rgba(17,24,39,.14), 0 6px 14px rgba(17,24,39,.08); color: var(--text); }
/* Card titles typography: match button font and weight in Light theme */
.card .card-title, .card-title{ font-family: inherit !important; font-weight: 400 !important; }

/* Settings page main title 'Innstillinger' (h1.m-0) – match buttons/card-title */
.wrap h1.m-0{ font-family: inherit !important; font-weight: 400 !important; }

/* Admin page titles: make all section titles identical to greeting (h1#hhTitle) */
.wrap #hhTitle,
.wrap .section-title,
.wrap .card-link-title.section-title{
  font-family: inherit !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  font-size: clamp(28px, 4vw, 36px) !important;
}

/* Buttons (override dark admin defaults) */
.btn{ font-weight: 400; font-size: inherit; font-family: inherit; border:1px solid #e5e7eb !important; background:#edeff2 !important; color:#374151 !important; box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: box-shadow .15s ease, transform .12s ease; }
.btn:hover{ background: rgba(243,244,246,.85) !important; border-color:#e5e7eb !important; box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.btn:active{ box-shadow: 0 3px 10px rgba(0,0,0,.10) !important; transform: translateY(1px); }
/* Anchor buttons should not be underlined */
a.btn{ text-decoration: none !important; }
a.btn:hover, a.btn:focus{ text-decoration: none !important; }
.btn-outline{ background:#edeff2 !important; border:1px solid #e5e7eb !important; color:#374151 !important; font-weight: 400; font-size: inherit; font-family: inherit; box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: box-shadow .15s ease, transform .12s ease; }
.btn-outline:hover{ background: rgba(243,244,246,.85) !important; border-color:#e5e7eb !important; box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.btn-outline:active{ box-shadow: 0 3px 10px rgba(0,0,0,.10) !important; transform: translateY(1px); }
.btnPrimary, .btn-primary{ background:#edeff2 !important; color:#374151 !important; border-color:#e5e7eb !important; box-shadow: 0 2px 6px rgba(0,0,0,.12) !important; font-weight: 400; transition: box-shadow .15s ease, transform .12s ease; }
.btnPrimary:hover, .btn-primary:hover{ background: rgba(243,244,246,.85) !important; border-color:#e5e7eb !important; box-shadow: 0 8px 22px rgba(0,0,0,.12) !important; }
.btnPrimary:active, .btn-primary:active{ box-shadow: 0 3px 10px rgba(0,0,0,.10) !important; transform: translateY(1px); }
.btnSecondary, .btn-secondary{ background:#edeff2 !important; color:#374151 !important; border-color:#e5e7eb !important; font-weight: 400; box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: box-shadow .15s ease, transform .12s ease; }
.btnSecondary:hover, .btn-secondary:hover{ background: rgba(243,244,246,.85) !important; border-color:#e5e7eb !important; box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.btnSecondary:active, .btn-secondary:active{ box-shadow: 0 3px 10px rgba(0,0,0,.10) !important; transform: translateY(1px); }

/* Save/Delete keep muted palettes but share shadow behavior */
.btn-green{ background:#7ee9b2 !important; color:#065f46 !important; border-color:#a7f3d0 !important; box-shadow: 0 2px 6px rgba(0,0,0,.12) !important; font-weight: 400 !important; transition: box-shadow .15s ease, transform .12s ease; }
.btn-green:hover{ background:#a7f3d0 !important; border-color:#86efac !important; box-shadow: 0 8px 22px rgba(0,0,0,.12) !important; }
.btn-green:active{ box-shadow: 0 3px 10px rgba(0,0,0,.10) !important; transform: translateY(1px); }

/* Muted red for Delete in light theme */
.btn-red{ background:#fee2e2 !important; color:#991b1b !important; border-color:#fecaca !important; box-shadow: 0 2px 6px rgba(0,0,0,.12) !important; font-weight: 400 !important; transition: box-shadow .15s ease, transform .12s ease; }
.btn-red:hover{ background:#fecaca !important; border-color:#fca5a5 !important; box-shadow: 0 8px 22px rgba(0,0,0,.12) !important; }
.btn-red:active{ box-shadow: 0 3px 10px rgba(0,0,0,.10) !important; transform: translateY(1px); }
.btn:active,
.btn-outline:active,
.btnPrimary:active, .btn-primary:active,
.btnSecondary:active, .btn-secondary:active,
.btn-green:active,
.btn-red:active{
  box-shadow: 0 3px 10px rgba(0,0,0,.10) !important;
  transform: translateY(1px);
}

/* Modal sheet and list items in light */
.sheet{ background:#ffffff; border:1px solid var(--border); color:var(--text); border-radius:14px; }
.item{ background:#f3f4f6; border:1px solid var(--border); color:var(--text); border-radius:10px; }
.item .swipe-content{ background:#ffffff; }
.item .swipe-actions{ background: transparent; }
.chip{ border-color: var(--border); color: var(--muted); }

/* Kid page components (override dark kid.css) */
.task{ background:#ffffff !important; border:1px solid var(--border) !important; color: var(--text) !important; }
.reward-item{ background:#ffffff !important; border:1px solid var(--border) !important; color: var(--text) !important; }
.level-badge{ border-color: var(--border) !important; color: #2563eb !important; }
.card.header-card{ background:#ffffff !important; border:1px solid var(--border) !important; }

/* Quick link cards in admin should be light */
.card-link{ background:#ffffff !important; border:1px solid var(--border) !important; color: var(--text) !important; }
.card-link:hover{ border-color:#d1d5db !important; box-shadow: 0 8px 24px rgba(0,0,0,.08) !important; }

/* Homepage layout */
.home .hero{ padding: 8px 20px 6px; text-align:center; }
.home .home-title{ margin:0 0 8px 0; font-weight:400; }
.home .hero p{ color:var(--muted); margin:10px 0 0; font-size:16px }
.home .cta-row{ display:flex; justify-content:center; margin: 6px 0 4px }
.home .btn-hero{ font-size:18px; padding:14px 22px; border-radius:14px }
.home .btn-blue{
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color:#fff;
  border-color:#1d4ed8;
  box-shadow: 0 10px 22px rgba(37,99,235,.25), inset 0 -2px 0 rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .15s ease, filter .2s ease;
}
.home .btn-blue:hover{ box-shadow: 0 14px 30px rgba(37,99,235,.32), inset 0 -2px 0 rgba(0,0,0,.06); filter: brightness(1.03) }
.home .btn-blue:active{ transform: translateY(1px); box-shadow: 0 8px 18px rgba(37,99,235,.22) }

.home .marketing-card{ max-width:980px; margin:0 auto 0; line-height:1.6; padding: 16px 16px; }
.home .marketing-img{ display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--border); box-shadow:0 6px 20px rgba(0,0,0,.06); margin:12px 0; }
.home .home-grid{ max-width:980px; margin:12px auto 0; }

/* Home page form controls (override dark login.css) */
.home input:not([type="checkbox"]),
.home select,
.home textarea{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid var(--border) !important;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.home input:focus,
.home select:focus,
.home textarea:focus{
  border-color:#cbd5e1 !important;
  outline:none;
}
.home label{ color: var(--muted) !important; }

/* Stronger specificity: Create-household form on home */
.home #formCreateHousehold input,
.home #formCreateHousehold select,
.home #formCreateHousehold textarea{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid var(--border) !important;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.home #formCreateHousehold input:focus,
.home #formCreateHousehold select:focus,
.home #formCreateHousehold textarea:focus{
  border-color:#cbd5e1 !important; outline:none;
}

/* Also target the container section by id to win any remaining specificity wars */
.home #createBlock input:not([type="checkbox"]),
.home #createBlock select,
.home #createBlock textarea{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid var(--border) !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{
  border-color:#cbd5e1 !important; outline:none;
}