body { font-family: Arial, sans-serif; background:#151819; color:#f3f4f6; margin:0; padding:20px; }
    .kort { background:#171a1b; max-width:980px; margin:0 auto 18px auto; padding:18px; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.22); border:1px solid #2b3135; }
    h1,h2,h3 { margin-top:0; color:#f8fafc; }
    label { display:block; margin-top:10px; font-weight:bold; color:#f3f4f6; }
    input,select,textarea { width:100%; box-sizing:border-box; padding:10px; margin-top:4px; border:1px solid #4b5563; border-radius:8px; background:#f8fafc; color:#111827; }
    textarea { min-height:90px; }
    button { padding:11px 14px; margin:6px 4px 6px 0; border:0; border-radius:8px; background:#1f6feb; color:white; cursor:pointer; font-size:15px; }
    button.secondary { background:#555; }
    button.danger { background:#b42318; }
    .rad { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
    .skjult { display:none; }
    .melding { margin-top:10px; color:#fca5a5; font-weight:bold; }
    .listekort { border:1px solid #374151; padding:10px; border-radius:8px; margin-top:8px; background:#22272a; color:#f3f4f6; }
    .lite { color:#cbd5e1; font-size:13px; }
    .vet-admin-nav, .vet-systemadmin-nav { display:none; }
    .vet-toppkort h1 { margin-bottom:4px; }
    .vet-rollelinje { margin-top:0; font-weight:bold; }
    .vet-meny { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; align-items:flex-start; }
    .vet-undermeny { width:100%; margin-top:4px; padding:10px; border:1px solid #374151; border-radius:10px; background:#22272a; }
    .vet-undermeny button { background:#555; }
    .vet-faktura-nav, .vet-oppsett-nav, .vet-admin-toggle { display:none; }
    .minbil-varelinje { display:grid; grid-template-columns:minmax(220px,1fr) 120px; gap:10px; align-items:end; padding:8px 0; border-bottom:1px solid #374151; }
    .minbil-varelinje input { margin-top:0; }
    .vare-regneark-wrap { overflow-x:auto; border:1px solid #374151; border-radius:10px; background:#171a1b; margin-top:8px; }
    .vare-regneark { width:100%; border-collapse:collapse; min-width:620px; font-size:14px; }
    .vare-regneark th, .vare-regneark td { border-bottom:1px solid #374151; padding:7px 8px; text-align:left; vertical-align:middle; }
    .vare-regneark th { background:#22272a; color:#f8fafc; position:sticky; top:0; z-index:1; }
    .vare-regneark tr:last-child td { border-bottom:0; }
    .vare-regneark input { margin:0; padding:6px 8px; border-radius:6px; max-width:95px; }
    .vare-regneark .tall { text-align:right; white-space:nowrap; }
    .lager-varsel { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:10px; padding:10px; margin:10px 0; font-weight:bold; }
    .lager-ok { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; border-radius:10px; padding:10px; margin:10px 0; font-weight:bold; }
    .lager-faner { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px 0; }
    .lager-faner button { margin:0; }

    /* Lager: bare én knapperekke inne i lagerkortet, ikke dobbelt sett med faner */
    #lagerSide > .lager-faner { display:none !important; }


    .okonomi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:12px; }
    .okonomi-boks { background:#22272a; border:1px solid #374151; color:#f3f4f6; border-radius:10px; padding:12px; }
    .okonomi-boks strong { display:block; font-size:18px; margin-top:4px; }
    .okonomi-tabell { width:100%; border-collapse:collapse; margin-top:12px; font-size:13px; }
    .okonomi-tabell th,.okonomi-tabell td { border-bottom:1px solid #374151; padding:6px; text-align:left; vertical-align:top; }
    .okonomi-tabell th { background:#22272a; color:#f8fafc; }

    .vet-faktura-handlinger { min-width:260px; white-space:normal; }
    .vet-faktura-handlinger button { display:inline-block; margin:2px 2px 2px 0; }
    @media (max-width: 700px) {
      .okonomi-tabell { font-size:12px; }
      .vet-faktura-handlinger { min-width:170px; }
      .vet-faktura-handlinger button { font-size:11px !important; padding:4px 6px !important; }
    }
    .okonomi-advarsel { color:#b42318; font-weight:bold; }

    .vare-regneark td, .okonomi-tabell td { color:#f3f4f6; }
    .vare-regneark th, .okonomi-tabell th { color:#f8fafc; }
    .listekort strong, .listekort span, .listekort p, .listekort div { color:#f3f4f6; }
    hr { border:0; border-top:1px solid #374151; margin:18px 0; }


    /* Kompakt lager-/billiste: ikke store hvite antallfelt under hver vare */
    #minBilFyllListe .vet-linje-liste,
    #fyllBilFlerListe .vet-linje-liste,
    #fyllBilFyllListe .vet-linje-liste {
      display:grid;
      gap:2px;
      margin-top:6px;
    }
    #minBilFyllListe .vet-linje-kort,
    #fyllBilFlerListe .vet-linje-kort,
    #fyllBilFyllListe .vet-linje-kort {
      display:grid !important;
      grid-template-columns:28px minmax(220px,1.7fr) minmax(130px,.8fr) 96px !important;
      gap:8px;
      align-items:center;
      border:1px solid #374151;
      border-radius:6px;
      background:#1f2427;
      padding:4px 8px !important;
      margin:0 !important;
      line-height:1.1;
      min-height:30px;
    }
    #minBilFyllListe input[type="checkbox"],
    #fyllBilFlerListe input[type="checkbox"],
    #fyllBilFyllListe input[type="checkbox"] {
      width:auto !important;
      margin:0 !important;
      padding:0 !important;
    }
    #minBilFyllListe input[type="number"],
    #fyllBilFlerListe input[type="number"],
    #fyllBilFyllListe input[type="number"] {
      width:86px !important;
      min-width:86px !important;
      padding:4px 6px !important;
      margin:0 !important;
      border-radius:5px !important;
      font-size:13px !important;
    }
    #minBilFyllListe .lite,
    #fyllBilFlerListe .lite,
    #fyllBilFyllListe .lite {
      font-size:13px !important;
      line-height:1.1 !important;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }


    /* Kompakt pasientliste */
    .pasientliste-tittel { margin-bottom:8px; white-space:nowrap; font-size:20px; }
    #eierSide { padding-top:12px; }
    #eierSide label[for="dyreeierVelgForDyr"],
    #dyreeierVelgForDyr,
    #eierSide .rad,
    #eierSide label[for="dyreeierEpost"],
    #dyreeierEpost,
    #eierSide label[for="dyreeierAdresse"],
    #dyreeierAdresse,
    #eierSide h3,
    #eierSide > p.lite,
    #dyreeierDyrValg,
    #dyreeierDyrInfo,
    #lagreDyreeierKnapp,
    #dyreeierMelding { display:none !important; }
    #dyreeierListe { margin-top:4px; }
    .vet-klikk-liste { display:grid !important; gap:1px !important; margin-top:4px !important; }
    #eierSide .vet-klikk-rad,
    #eierSide .vet-linje-kort,
    #dyreeierListe .listekort {
      width:100% !important;
      box-sizing:border-box !important;
      min-height:24px !important;
      padding:3px 8px !important;
      margin:0 !important;
      line-height:1.1 !important;
      font-size:14px !important;
      border:1px solid rgba(255,255,255,.08) !important;
      border-radius:0 !important;
      background:rgba(255,255,255,.025) !important;
      color:#f3f4f6 !important;
      align-items:center !important;
    }
    #eierSide .vet-klikk-rad span,
    #eierSide .vet-linje-kort span,
    #dyreeierListe .listekort span {
      font-size:14px !important;
      line-height:1.1 !important;
      font-weight:400 !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }
    #eierSide .vet-klikk-rad button, #eierSide .vet-klikk-rad a {
      padding:3px 8px !important;
      margin:0 !important;
      font-size:13px !important;
      line-height:1.1 !important;
      border-radius:4px !important;
    }
    .vet-dyr-mini-bilde { width:30px !important; height:24px !important; object-fit:cover !important; border-radius:4px !important; }
    .vet-meny button[onclick="visFyllBilSide()"] { display:none !important; }


    /* Hindrer blink av gamle/feil knapper før rolle er ferdig lastet */
    body.vet-loading #appSide { visibility:hidden !important; opacity:0 !important; pointer-events:none !important; }
    body.vet-loading * { transition:none !important; animation:none !important; }
    body:not(.vet-loading) #appSide { visibility:visible !important; opacity:1 !important; }
    .vet-bruker-nav, .vet-lagerlogg-nav, .vet-faktura-nav, .vet-admin-toggle, #vetSlettTestdataKnapp { display:none; }

    /* Vipps på faktura og purring */
    .vet-vipps-betaling { color:#d40000; font-weight:800; font-size:18px; margin-top:14px; }
    .vet-vipps-betaling .lite { color:#d40000; font-weight:700; font-size:14px; }


    /* Mobilrydding: færre knapper i toppen. Admin-valg ligger under én Admin-knapp. */
    .vet-mobil-meny { gap: 8px; align-items: center; }
    .vet-mobil-meny #vetOppsettMeny {
      position: static;
      width: 100%;
      margin-top: 8px;
      padding: 10px;
      border: 1px solid #2f3b46;
      border-radius: 10px;
      background: #20262a;
    }
    .vet-mobil-meny #vetOppsettMeny button {
      width: 100%;
      margin: 4px 0;
      text-align: left;
    }

    /* Mobiltilpassede journalbilder */
    .journal-bilde-preview-grid, .journal-bilde-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
      gap:8px;
      margin-top:8px;
    }
    .journal-bilde-preview, .journal-bilde-thumb {
      width:100%;
      max-width:220px;
      height:auto;
      aspect-ratio:4/3;
      object-fit:cover;
      border:1px solid #374151;
      border-radius:10px;
      background:#111827;
      display:block;
    }
    .journal-bilde-kort {
      display:block;
      max-width:220px;
      min-width:0;
    }
    @media (max-width:700px) {
      body { padding:10px; }
      .kort { padding:12px; }
      .journal-bilde-preview-grid, .journal-bilde-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .journal-bilde-preview, .journal-bilde-thumb, .journal-bilde-kort {
        max-width:none;
      }
      input[type="file"] {
        font-size:14px;
        padding:9px;
      }
    }

    @media (max-width: 700px) {
      .vet-mobil-meny > button { flex: 1 1 auto; }
      .vet-mobil-meny #vetVisSomVeterinaerKnapp { flex-basis: 100%; }
    }


    /* Fargefix: behold mørkt tema, men ikke sort/hvitt/monokromt */
    html, body, #appSide { filter:none !important; -webkit-filter:none !important; }
    body { background:#151819 !important; color:#f3f4f6 !important; }
    button:not(.secondary):not(.danger) { background:#1f6feb !important; color:#fff !important; }
    button.secondary { background:#555 !important; color:#fff !important; }
    button.danger { background:#b42318 !important; color:#fff !important; }
    #vetOppsettKnapp { background:#555 !important; color:#fff !important; }
    #vetOppsettMeny button { background:#555 !important; color:#fff !important; }
    #leggTilJournalBehandlingKnapp, #lagreJournalKnapp, #vetBackupKnapp { background:#1f6feb !important; color:#fff !important; }
    .vet-autolagrer-behandling { border-color:#60a5fa !important; background:#0f172a !important; color:#f8fafc !important; }
    .vet-behandling-lagret { border-color:#22c55e !important; background:#052e16 !important; color:#dcfce7 !important; }
    .journal-bilde-preview, .journal-bilde-thumb, img { filter:none !important; -webkit-filter:none !important; }

  
/* RIL UI POLISH 2026-07-09: penere knapper, lik font og mobiltilpasning */
:root {
  --ril-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ril-bg: #151819;
  --ril-card: #171a1b;
  --ril-card-2: #20262a;
  --ril-text: #f8fafc;
  --ril-muted: #cbd5e1;
  --ril-line: #334155;
  --ril-primary: #2563eb;
  --ril-primary-hover: #1d4ed8;
  --ril-secondary: #475569;
  --ril-secondary-hover: #334155;
  --ril-danger: #dc2626;
  --ril-danger-hover: #b91c1c;
  --ril-focus: #93c5fd;
}
html { -webkit-text-size-adjust: 100%; }
body, input, select, textarea, button, a { font-family: var(--ril-font) !important; }
button,
a.knapp,
.button,
input[type="button"],
input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  min-height: 42px;
  padding: 10px 14px !important;
  margin: 5px 4px 5px 0 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, var(--ril-primary), var(--ril-primary-hover)) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 6px 16px rgba(0,0,0,.18);
  touch-action: manipulation;
  vertical-align: middle;
  text-decoration: none;
}
button.secondary,
a.secondary,
button.vet-oppsett-nav,
#vetOppsettMeny button,
.lager-faner button,
.vet-undermeny button {
  background: linear-gradient(180deg, var(--ril-secondary), var(--ril-secondary-hover)) !important;
}
button.danger,
button[onclick*="slett" i],
button[id*="slett" i],
button[id*="kredit" i] {
  background: linear-gradient(180deg, var(--ril-danger), var(--ril-danger-hover)) !important;
}
button:hover,
a.knapp:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover { filter: brightness(1.06); transform: translateY(-1px); }
button:active,
a.knapp:active,
.button:active,
input[type="button"]:active,
input[type="submit"]:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,.20); }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ril-focus) !important;
  outline-offset: 2px;
}
button:disabled,
button[disabled],
input[type="button"]:disabled,
input[type="submit"]:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
}
.vet-meny,
.lager-faner,
.vet-faktura-handlinger,
.vet-undermeny,
#vetOppsettMeny {
  gap: 8px !important;
}
.vet-meny button,
.lager-faner button,
.vet-undermeny button,
#vetOppsettMeny button,
.vet-faktura-handlinger button {
  margin: 0 !important;
}
input, select, textarea {
  min-height: 42px;
  border-radius: 10px !important;
  font-size: 15px !important;
}
.kort, .listekort, .okonomi-boks {
  border-radius: 14px !important;
}
@media (max-width: 760px) {
  body { padding: 10px !important; }
  .kort { width: 100% !important; max-width: none !important; padding: 12px !important; margin: 0 0 12px 0 !important; box-sizing: border-box; }
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 17px !important; }
  .rad { grid-template-columns: 1fr !important; gap: 8px !important; }
  .vet-meny,
  .lager-faner,
  .vet-undermeny,
  #vetOppsettMeny,
  .vet-faktura-handlinger {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
  }
  .vet-undermeny,
  #vetOppsettMeny { grid-template-columns: 1fr !important; }
  button,
  a.knapp,
  .button,
  input[type="button"],
  input[type="submit"] {
    width: 100%;
    min-height: 46px;
    margin: 0 !important;
    padding: 11px 12px !important;
    font-size: 14px !important;
    white-space: normal;
  }
  .vet-meny > button,
  .lager-faner > button,
  .vet-faktura-handlinger > button { width: 100%; }
  #vetVisSomVeterinaerKnapp,
  #vetSlettTestdataKnapp,
  button.danger[onclick*="loggUt"],
  button[onclick*="loggUt"] { grid-column: 1 / -1; }
  input, select, textarea { font-size: 16px !important; width: 100% !important; }
  table, .okonomi-tabell, .vare-regneark { font-size: 13px !important; }
  .vare-regneark-wrap, .okonomi-tabell { overflow-x: auto; }
  .minbil-varelinje,
  #minBilFyllListe .vet-linje-kort,
  #fyllBilFlerListe .vet-linje-kort,
  #fyllBilFyllListe .vet-linje-kort {
    grid-template-columns: 28px 1fr !important;
    gap: 6px !important;
  }
  #minBilFyllListe input[type="number"],
  #fyllBilFlerListe input[type="number"],
  #fyllBilFyllListe input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 420px) {
  .vet-meny,
  .lager-faner,
  .vet-faktura-handlinger { grid-template-columns: 1fr !important; }
}