:root {
  /* HT Konsult palette — used sparingly:
     navy #1b2a4a (headings/hover), blue #3a5a9f (actions), gray #b0b5c0 (lines). */
  --bg:#f5f6f9; --card:#fff; --ink:#1f2733; --muted:#6f7480;
  --navy:#1b2a4a; --line:#d8dbe2; --gray:#b0b5c0;
  --brand:#3a5a9f; --brand-dark:#1b2a4a;
  --green:#137333; --green-bg:#e6f4ea;
  --amber:#8a5300; --amber-bg:#fdf0d5;
  --red:#b3261e; --red-bg:#fce8e6;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wrap { max-width:560px; margin:0 auto; padding:20px 16px 48px; }
.wrap.wide { max-width:900px; }
.center { display:flex; min-height:100vh; align-items:center; justify-content:center; }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  padding:20px; margin-bottom:16px;
}
h1 { font-size:22px; margin:0 0 4px; color:var(--navy); }
h2 { font-size:17px; margin:0 0 12px; color:var(--navy); }
.muted { color:var(--muted); }
.big { font-size:20px; font-weight:600; margin:4px 0; }
.error { color:var(--red); }
.footer { text-align:center; color:var(--muted); font-size:13px; margin-top:24px; }

.device-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }

label { display:block; margin:0 0 12px; font-size:14px; color:var(--muted); }
input[type=text], input[type=password], input[type=email], select {
  display:block; width:100%; margin-top:4px; padding:11px 12px;
  border:1px solid var(--line); border-radius:6px; font-size:16px; color:var(--ink);
  background:#fff; height:44px;
}
/* Nedtrekk må tvinges bort fra native høyde (Safari), ellers blir de
   lavere enn tekstfeltene. Egen pil legges til som bakgrunnsbilde. */
select {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, select:focus {
  outline:none; border-color:var(--brand);
}
button, .btn-link {
  display:inline-block; border:0; border-radius:6px; padding:10px 16px;
  background:var(--brand); color:#fff; font-size:15px; font-weight:600;
  cursor:pointer; text-decoration:none;
}
button:hover, .btn-link:hover { background:var(--brand-dark); }
.btn-link.muted { background:transparent; color:var(--muted); }
.btn-return { background:#2f6f4e; }
.btn-return:hover { background:#255b3f; }
.btn-danger { background:transparent; color:var(--muted); padding:6px 10px; font-size:13px; }
.btn-danger:hover { color:#8f3325; }

.badge {
  display:inline-flex; align-items:center; gap:7px;
  padding:0; background:none; border-radius:0;
  font-size:13px; font-weight:500; color:var(--ink); vertical-align:middle;
}
.badge::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--dot,#9aa0ac); flex:0 0 auto;
}
.badge-in { --dot:#3f7d5a; }
.badge-out { --dot:#b98327; }
.badge-overdue { --dot:var(--ink); color:var(--ink); font-weight:600; }

table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
tr:last-child td { border-bottom:0; }

.alert { border:1px solid var(--line); border-left:3px solid var(--ink); background:var(--card); }
.overdue-list { margin:0; padding-left:18px; }
.overdue-list li { margin-bottom:6px; }

.grid-form { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:end; }
.grid-form button { grid-column:1 / -1; justify-self:start; }

/* ---- Merkestripe: logo venstre, tittel midt, handling høyre ---- */
.brandbar {
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:12px; margin-bottom:20px;
}
.brandbar-left   { justify-self:start; display:flex; align-items:center; }
.brandbar-center { justify-self:center; }
.brandbar-right  { justify-self:end; display:flex; align-items:center; gap:8px; }
.brandbar-title  { font-size:20px; font-weight:600; color:var(--navy); }
.brand-logo { display:block; height:auto; }

/* ---- Kort-topp med tittel + handlingsknapp ---- */
.card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.card-head h2 { margin:0; }

/* ---- Ikonknapper (QR / rediger / slett / legg til) ---- */
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:6px; padding:6px;
  color:var(--muted); cursor:pointer; line-height:0; text-decoration:none;
}
.icon-btn:hover { background:var(--bg); color:var(--brand); }
.icon-danger:hover { color:var(--red); background:var(--red-bg); }
.add-btn { color:var(--brand); border:1px solid var(--line); }
.add-btn:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
.row-actions { display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.row-actions form { margin:0; display:inline-flex; }

/* ---- Popup / modal ---- */
.modal {
  display:none; position:fixed; inset:0; z-index:50;
  background:rgba(27,42,74,.45); padding:20px;
  align-items:flex-start; justify-content:center;
}
.modal.open { display:flex; }
.modal-box {
  background:var(--card); border-radius:10px; padding:22px;
  width:100%; max-width:460px; margin-top:8vh;
  box-shadow:0 12px 40px rgba(27,42,74,.25);
}
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-head h2 { margin:0; }
.modal-close {
  background:transparent; border:0; color:var(--muted);
  font-size:26px; line-height:1; padding:0 4px; cursor:pointer;
}
.modal-close:hover { background:transparent; color:var(--ink); }

/* ---- Sammenleggbare kort (Brukere / Lokasjoner) ---- */
.dropcard { padding:0; }
.dropcard > summary {
  list-style:none; cursor:pointer; padding:16px 20px;
  font-size:17px; font-weight:600; color:var(--navy);
  display:flex; align-items:center; gap:8px;
}
.dropcard > summary::-webkit-details-marker { display:none; }
.dropcard > summary::before {
  content:"›"; display:inline-block; font-size:20px; line-height:1;
  color:var(--gray); transition:transform .15s ease;
}
.dropcard[open] > summary::before { transform:rotate(90deg); }
.dropcard > summary:hover { color:var(--brand); }
.dropbody { padding:0 20px 20px; }

/* ---- Innlogging: større og luftigere ---- */
.login { max-width:400px; width:100%; padding:34px 30px; }
.login-brand { text-align:center; margin-bottom:6px; }
.login-brand .brand-logo { margin:0 auto 10px; }
.login-title { font-size:22px; font-weight:600; color:var(--navy); }
.login-sub { text-align:center; margin:0 0 18px; }
.login input[type=password] { margin-bottom:16px; }
.login button { width:100%; padding:12px; font-size:16px; }

/* ---- Lenke i bunntekst ---- */
.footer-link { color:var(--muted); text-decoration:none; }
.footer-link:hover { color:var(--brand); text-decoration:underline; }

@media (max-width:520px){
  .grid-form { grid-template-columns:1fr; }
  /* Skjul kategori og plass så «Status» og handlinger får plass */
  .col-cat, .col-loc { display:none; }
  .devices th, .devices td { padding:8px 6px; }
  .devices td { word-break:break-word; }
  .row-actions { gap:2px; }
  .brandbar-title { font-size:17px; }
  .modal-box { margin-top:4vh; padding:18px; }
}