:root{
  --btn-bg-top:#6a6c6e;
  --btn-bg-bot:#2a2c2d;
  --btn-border:#cfcfcf;
  --btn-inner:#1a1b1c;
  --dash:#5d5d5d;
  --panel:#111;
}
*{box-sizing:border-box}
body{margin:0;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:18px}

/* Topbar */
.topbar{
  display:flex;
  gap:10px;
  padding:10px;
  background:#0c0c0c;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:2px solid #3b3b3b;
}
.topbtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:86px;
  padding:12px 18px;
  text-align:center;
  cursor:pointer;
  border-radius:16px;
  background:linear-gradient(to bottom,var(--btn-bg-top),var(--btn-bg-bot));
  border:2px solid var(--btn-border);
  box-shadow:inset 0 2px 0 0 #e6e6e6,
             inset 0 -2px 0 0 var(--btn-inner),
             0 1px 0 0 #000;
}
.topbtn .title{font-weight:700;font-size:24px;letter-spacing:.2px}
.topbtn small{margin-top:6px;font-size:16px;color:#dcdcdc}
.topbtn:hover{filter:brightness(1.06)}

/* Breddekontroll */
.topbtn.wide { flex: 1.5; }       /* Mottatt */
.topbtn.wider { flex: 3; }        /* 1 oppdrag i listen */
.topbtn.small { flex: 0.8; }      /* Slett og Lukk */

/* Dialoger (reset/status) */
.dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:100}
.dialog{position:relative;background:var(--panel);border:3px solid #bfbfbf;border-radius:18px;padding:24px 22px;min-width:280px;text-align:center;box-shadow:0 0 0 3px #000 inset, 0 0 16px rgba(0,0,0,.6)}
.dialog h3{margin:0 0 18px 0;font-size:24px}
.dialog .divider{height:2px;border-top:2px dashed #bfbfbf;margin:10px 0 18px}
.dialog .bigbtn{display:block;margin:10px auto;padding:14px 22px;border-radius:12px;border:2px solid #bfbfbf;background:linear-gradient(to bottom,#6a6c6e,#2a2c2d);box-shadow:inset 0 2px 0 0 #e6e6e6,inset 0 -2px 0 0 #1a1b1c;color:#fff;font-size:22px;cursor:pointer;width:80%}
.dialog .close{position:absolute;top:-16px;right:-16px;width:42px;height:42px;border-radius:50%;background:#555;border:3px solid #dcdcdc;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;box-shadow:0 0 0 3px #000}

/* Container / kort */
.container{max-height:calc(100vh - 110px);overflow-y:auto}
.oppdrag{background:#000;border-top:1px solid #555;border-bottom:1px solid #555}
.opp-header{display:flex;border-bottom:1px dashed var(--dash)}
.opp-header-left,.opp-header-right,.opp-header-mid{padding:12px}
.opp-header-left,.opp-header-right{flex:1}
.opp-header-mid{flex:3;border-left:1px dashed var(--dash);border-right:1px dashed var(--dash)}

.status-line{display:flex;align-items:center;gap:12px}
.status-circle{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;user-select:none;font-size:20px}
.akutt{background:#c62828;color:#fff}
.haster{background:#fbc02d;color:#000}
.vanlig{background:#2e7d32;color:#fff}

.ambulansenr{font-size:22px;font-weight:700}
.unit-text{font-size:16px}
.opp-header-right{text-align:right}

/* Felter */
.oppfelt{display:flex;border-top:1px dashed var(--dash);padding:20px 12px;align-items:flex-start;font-size:18px;min-height:100px;cursor:pointer;position:relative}
.oppfelt-icon{width:40px;text-align:center;margin-right:12px;font-size:20px}
.oppfelt-text{flex:1;line-height:1.8em;word-wrap:break-word;white-space:pre-line}
.oppfelt-time{width:90px;font-size:15px;text-align:center;color:#ccc;margin-top:8px}

/* Delt adressefelt */
.oppfelt-split{display:grid;grid-template-columns:1fr 1fr;width:100%;border-top:1px dashed var(--dash);border-bottom:1px dashed var(--dash)}
.split-box{display:flex;align-items:flex-start;gap:8px;padding:40px 14px;word-wrap:break-word;overflow-wrap:anywhere;white-space:normal;cursor:pointer;position:relative}
.split-box:first-child{border-right:1px dashed var(--dash)}
.mini-icon{flex:0 0 auto;font-size:20px;line-height:1.4;margin-top:2px}
.split-text{flex:1;white-space:normal}

/* Leverings-dropdown */
.hidden-options{display:none;position:absolute;left:0;right:0;top:100%;background:#111;border:1px solid #555;z-index:10}
.hidden-options div{padding:8px;cursor:pointer;border-bottom:1px solid #333}
.hidden-options div:hover{background:#333}

/* Skjemaer */
.edit-form{display:none;flex-direction:column;background:#111;padding:10px;border:1px solid #555;margin:10px}
.edit-form input,.edit-form textarea{margin:4px 0;padding:6px;font-size:16px;width:100%;background:#000;color:#fff;border:1px solid #555}
.edit-form button{margin-top:6px;padding:8px;background:#333;color:#fff;border:none;cursor:pointer}
.edit-form button:hover{background:#555}

.white-text{color:#fff}
.yellow-text{color:#ffeb3b}