:root {
  --navy: #0B2C4D;
  --djup: #082036;
  --blar: #1E6FB8;
  --ljos: #EEF4FA;
  --lina: #DCE6F0;
  --daufur: #7089A0;
  --graenn: #1E9E62;
  --raudur: #C03535;
  --texti: #1C2A38;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--ljos);
  color: var(--texti);
  font-size: 16px;
  line-height: 1.45;
}

/* Haus */
.app-haus {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--navy); color: #fff;
  padding: calc(env(safe-area-inset-top) + 12px) 18px 12px;
}
.app-titill { color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: .2px; }
.app-utskra { color: #A9C6E4; text-decoration: none; font-size: 14px; }
.app-innihald { padding: 16px 16px calc(env(safe-area-inset-bottom) + 32px); max-width: 640px; margin: 0 auto; }

/* Innskráning */
.innskra { max-width: 380px; margin: 6vh auto 0; }
.innskra h1 { margin: 0 0 2px; font-size: 26px; color: var(--navy); }
.undirtexti { margin: 0 0 22px; color: var(--daufur); }
.muna-mig { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; font-size: 15px; cursor: pointer; }
.muna-mig input { width: 20px; height: 20px; accent-color: var(--blar); }

/* Reitir */
.reitur { margin-bottom: 14px; }
.reitur label { display: block; font-size: 13px; font-weight: 600; color: var(--daufur); margin-bottom: 5px; }
.reitur input, .reitur select, .reitur textarea {
  width: 100%; padding: 13px 14px; font-size: 16px;
  border: 1.5px solid var(--lina); border-radius: 11px; background: #fff;
  font-family: inherit; color: var(--texti);
}
.reitur input:focus, .reitur select:focus, .reitur textarea:focus {
  outline: none; border-color: var(--blar);
}
.reitarod { display: flex; gap: 12px; }
.reitarod .reitur { flex: 1; }
.reitarod .reitur.dags { flex: 1.35; min-width: 0; }
.reitarod .reitur.timar { flex: 1; min-width: 0; }
.reitarod .reitur input { min-width: 0; }
.reitur input[type="date"] { -webkit-appearance: none; appearance: none; }

/* Hnappar */
.hnappur {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blar); color: #fff; border: 0; border-radius: 12px;
  padding: 14px 20px; font-size: 16px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none;
}
.hnappur:active { transform: translateY(1px); }
.hnappur.breidur { width: 100%; }
.x-hnappur {
  background: none; border: 0; color: var(--daufur); font-size: 24px;
  line-height: 1; padding: 4px 8px; cursor: pointer;
}

/* Meldingar */
.melding { padding: 12px 15px; border-radius: 11px; margin-bottom: 14px; font-size: 15px; }
.melding.ok { background: #E4F5EC; color: #14663F; }
.melding.villa { background: #FBE9E9; color: var(--raudur); }

/* Velkomin + flipar */
.app-velkomin { font-size: 20px; font-weight: 700; color: var(--navy); margin: 4px 0 10px; }
.manadartimar { background: var(--ljos, #f4f6f8); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; border-left: 4px solid var(--blar, #1E6FB8); }
.manadartimar .mt-adal { display: flex; align-items: baseline; gap: 8px; }
.manadartimar .mt-tala { font-size: 30px; font-weight: 800; color: var(--navy, #1E3A5F); font-variant-numeric: tabular-nums; }
.manadartimar .mt-eining { font-size: 15px; font-weight: 600; color: var(--daufur, #667); }
.manadartimar .mt-timabil { font-size: 12.5px; color: var(--daufur, #778); margin-top: 2px; }
.manadartimar .mt-sundur { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--daufur, #556); }
.manadartimar .mt-sundur strong { color: var(--navy, #1E3A5F); }
.flipar { display: flex; gap: 8px; margin-bottom: 18px; }
.flipi {
  flex: 1; background: #fff; border: 1.5px solid var(--lina); border-radius: 12px;
  padding: 11px 8px 9px; font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--daufur); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.flipi.virkur { background: var(--navy); border-color: var(--navy); color: #fff; }
.flipi-fjoldi {
  font-size: 12px; background: var(--ljos); color: var(--navy);
  min-width: 22px; padding: 1px 7px; border-radius: 20px;
}
.flipi.virkur .flipi-fjoldi { background: rgba(255,255,255,.22); color: #fff; }

/* Spjaldkort á borði */
.spjald-kort {
  display: block; background: #fff; border: 1px solid var(--lina); border-radius: 14px;
  padding: 15px 16px; margin-bottom: 11px; text-decoration: none; color: var(--texti);
}
.spjald-kort:active { background: var(--ljos); }
.spjald-titill { font-weight: 600; font-size: 16px; color: var(--navy); margin-bottom: 3px; }
.spjald-vidskiptavinur { font-size: 14px; color: var(--daufur); }
.spjald-nafn { font-size: 14px; font-weight: 600; color: var(--texti); margin-top: 2px; }
.spjald-lina { font-size: 13px; color: var(--daufur); margin-top: 2px; }
.spjald-lysing { font-size: 13px; color: var(--texti); margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--lina); line-height: 1.4; }
.spjald-kort.k-fallinn .spjald-nafn,
.spjald-kort.k-fallinn .spjald-lina,
.spjald-kort.k-fallinn .spjald-lysing { color: #fff; }
.spjald-kort.k-fallinn .spjald-lysing { border-top-color: rgba(255,255,255,.3); }
.spjald-nedst { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.spjald-timar { font-size: 13px; color: var(--blar); font-weight: 600; }
.spjald-timar.dauft { color: var(--daufur); font-weight: 400; }
.spjald-orv { color: var(--blar); font-size: 18px; font-weight: 700; }
.tomt { text-align: center; color: var(--daufur); padding: 40px 20px; }

/* Spjaldsýn */
.til-baka { display: inline-block; color: var(--blar); text-decoration: none; font-size: 15px; margin-bottom: 12px; font-weight: 500; }
.verk-haus { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.verk-haus h1 { margin: 0; font-size: 21px; color: var(--navy); }
.stada-merki { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 20px; white-space: nowrap; }
.stada-vinnsla { background: #E3EEF8; color: var(--blar); }
.stada-bid { background: var(--ljos); color: var(--daufur); }
.stada-lokid { background: #E4F5EC; color: var(--graenn); }
.faera-rod { display: flex; gap: 7px; margin-bottom: 20px; }
.faera-hnappur {
  flex: 1; padding: 10px 6px; font-size: 13px; font-weight: 600; font-family: inherit;
  border: 1.5px solid var(--lina); border-radius: 10px; background: #fff; color: var(--daufur); cursor: pointer;
}
.faera-hnappur.valinn { background: var(--navy); border-color: var(--navy); color: #fff; }
.faera-hnappur:not(.valinn):active { background: var(--ljos); }
.verk-uppl { background: #fff; border: 1px solid var(--lina); border-radius: 12px; padding: 13px 15px; margin-bottom: 20px; }
.verk-uppl a { color: var(--blar); }
.verk-lysing { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lina); font-size: 15px; }

/* Kaflar */
.kafli { background: #fff; border: 1px solid var(--lina); border-radius: 16px; padding: 16px; margin-bottom: 18px; }
.kafli h2 { margin: 0 0 14px; font-size: 17px; color: var(--navy); }
.innslattur { margin-bottom: 4px; }
.voru-uppl { background: var(--ljos); border-radius: 10px; padding: 10px 13px; margin-bottom: 14px; font-size: 14px; color: var(--navy); }
.voru-uppl .lagt { color: var(--raudur); }

/* Listar (tímar/vörur) */
.listi { margin-top: 16px; border-top: 1px solid var(--lina); }
.listi-lina { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--lina); }
.listi-adal { font-weight: 600; font-size: 15px; }
.listi-samtala { text-align: right; padding: 12px 0 2px; font-size: 15px; color: var(--navy); }
.smatt { font-size: 13px; color: var(--daufur); }

/* Reikningsstaða á spjöldum í appinu */
.spjald-kort.k-greitt { background: #E9F9EF; border-color: #7ED9A0; }
.spjald-kort.k-reikningur { background: #D6FF3D; border-color: #B4E01F; }
.spjald-kort.k-reikningur .spjald-vidskiptavinur { color: #4A5B00; }
.spjald-kort.k-fallinn { background: #FF4D4D; border-color: #E02B2B; }
.spjald-kort.k-fallinn .spjald-titill,
.spjald-kort.k-fallinn .spjald-vidskiptavinur,
.spjald-kort.k-fallinn .spjald-timar,
.spjald-kort.k-fallinn .spjald-orv { color: #fff; }

/* Lager-val með magni per lager */
.lager-lina { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; background:var(--ljos,#f4f6f8); border-radius:8px; margin-bottom:6px }
.lager-nafn { font-size:14px }
.lager-lina { padding:12px 14px }
.lager-magn { width:110px; text-align:right; padding:12px 14px; border:2px solid var(--rammi,#ccd); border-radius:8px; font-size:20px; font-weight:600 }
.lager-magn:focus { border-color:var(--adal,#1E6FB8); outline:none }
.voru-samtala { margin:10px 0; padding:10px 12px; background:var(--ljos,#f4f6f8); border-radius:8px }
.samtala-lina { display:flex; justify-content:space-between; align-items:baseline; padding:3px 0; font-size:14px }
.samtala-lina.stor { border-top:1px solid var(--rammi,#ccd); margin-top:4px; padding-top:7px; font-size:16px }
.samtala-lina.stor strong { color:var(--adal,#1E6FB8) }

/* Línutotala á vörulínum og heildarsamtala */
.lina-samtala { font-size:14px; margin-top:3px; color:var(--adal,#1E6FB8) }
.vorur-heild { margin:10px 0 4px; padding:10px 12px; background:var(--ljos,#f4f6f8); border-radius:8px; border-top:2px solid var(--rammi,#ccd) }

/* Stór fjöldareitur og vöntunarborði */
.stor-reitur { width:130px; padding:12px 14px; border:2px solid var(--rammi,#ccd); border-radius:8px; font-size:22px; font-weight:600; text-align:right }
.stor-reitur:focus { border-color:var(--adal,#1E6FB8); outline:none }
.vontun-bordi { background:#FFF4E5; border:1px solid #F0C070; border-radius:8px; padding:10px 12px; font-size:14px; color:#7A4E00 }
.vontun-bordi strong { color:#C07000 }

/* Athugasemdareitur */
.athugasemd-reitur { display:block; width:100%; min-height:120px; padding:14px; border:2px solid var(--rammi,#ccd); border-radius:8px; font-size:16px; line-height:1.4; font-family:inherit; resize:vertical; margin-bottom:8px; box-sizing:border-box }
.athugasemd-reitur:focus { border-color:var(--adal,#1E6FB8); outline:none }

/* Vörulýsing í appinu */
.voru-lysing-app { margin-top:8px; padding-top:8px; border-top:1px solid var(--rammi,#dde); font-size:14px; line-height:1.4; color:var(--texti,#333) }
/* Áberandi staða míns lagers */
.minn-lager-bordi { display:inline-block; background:#E7F6EC; color:#1A7A44; border:2px solid #7ED0A0; border-radius:8px; padding:8px 14px; font-size:16px; font-weight:600 }
.minn-lager-bordi strong { font-size:19px }
.minn-lager-bordi.tomur { background:#FCE9E9; color:#C03535; border-color:#E9A0A0 }

/* Stimpilklukka */
.stimpill { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--ljos,#f4f6f8); border:2px solid var(--rammi,#dde); border-radius:12px; padding:14px; margin-bottom:16px }
.stimpill.virkur { background:#E7F6EC; border-color:#7ED0A0 }
.stimpill-innri { flex:1; min-width:140px }
.stimpill-stada { font-size:14px; font-weight:600; color:var(--texti,#333) }
.stimpill-timi { font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; color:#1A7A44; letter-spacing:1px }
.stimpill.virkur .stimpill-stada { color:#1A7A44 }
.stimpill-hnappur { flex:0 0 auto; width:auto; min-width:150px }
.stimpill.virkur .stimpill-hnappur { background:#C03535 }
#timar-reitur.audkennt { border-color:#1A7A44; background:#E7F6EC; transition:background .3s }