:root {
  --slot-hojd: 24px;
  --kant: #d5dbe3;
  --bakgrund: #f4f6f9;
  --yta: #ffffff;
  --text: #1d2833;
  --primar: #2f6fb2;
  --dampa: #7a8694;
  --fara: #b23a3a;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, sans-serif;
  background: var(--bakgrund); color: var(--text);
}
.topprad {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .5rem 1rem; background: var(--yta); border-bottom: 1px solid var(--kant);
}
.topprad h1 { font-size: 1.15rem; margin: 0; }
.vecknav { display: flex; align-items: center; gap: .4rem; }
#vecka-rubrik { margin-left: .6rem; color: var(--dampa); }
.topprad-hoger { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.anv-namn { color: var(--dampa); }

.knapp {
  display: inline-block; padding: .35rem .8rem; border: 1px solid var(--kant);
  border-radius: 6px; background: var(--yta); color: var(--text);
  cursor: pointer; text-decoration: none; font-size: .9rem;
}
.knapp.primar { background: var(--primar); border-color: var(--primar); color: #fff; }
.knapp.fara { color: var(--fara); border-color: var(--fara); }

.layout { display: flex; height: calc(100vh - 49px); }
#sidopanel {
  width: 230px; flex: none; overflow-y: auto;
  background: var(--yta); border-right: 1px solid var(--kant); padding: .8rem;
}
#sidopanel h4 { margin: .8rem 0 .3rem; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--dampa); }
#sidopanel label { display: flex; align-items: center; gap: .4rem; padding: .15rem 0;
  font-size: .9rem; cursor: pointer; }
.farg-prick { width: 10px; height: 10px; border-radius: 50%; flex: none; }
input.farg-prick { width: 16px; height: 16px; padding: 0; border: none; background: none; cursor: pointer; }
input.farg-prick::-webkit-color-swatch-wrapper { padding: 0; }
input.farg-prick::-webkit-color-swatch { border: 1px solid var(--kant); border-radius: 50%; }
.sidorad { display: flex; align-items: center; gap: .3rem; }
.sidorad .ta-bort { margin-left: auto; border: 0; background: none;
  color: var(--dampa); cursor: pointer; }
.sidorad .ta-bort:hover { color: var(--fara); }
#sidopanel form { display: flex; gap: .3rem; margin-top: .3rem; }
#sidopanel input[type="text"], #sidopanel input[type="email"] {
  flex: 1; min-width: 0; padding: .25rem .4rem; border: 1px solid var(--kant);
  border-radius: 4px; }

.kalender-yta { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.dag-rubriker, .heldagsrad {
  display: grid; grid-template-columns: 52px repeat(7, 1fr); flex: none;
  background: var(--yta);
}
.dag-rubrik { padding: .4rem; text-align: center; font-weight: 600; font-size: .85rem;
  border-left: 1px solid var(--kant); }
.dag-rubrik.idag { color: var(--primar); }
.heldagsrad { border-top: 1px solid var(--kant); border-bottom: 2px solid var(--kant); }
.tidkol-topp { font-size: .7rem; color: var(--dampa); padding: .2rem; text-align: right; }
.heldag-cell { min-height: 26px; border-left: 1px solid var(--kant); padding: 1px 2px; }
.heldag-block {
  background: var(--primar); color: #fff; border-radius: 4px;
  font-size: .75rem; padding: 1px 6px; margin: 1px 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
}

.grid-rullyta { flex: 1; overflow-y: auto; }
.vecka-grid {
  display: grid; grid-template-columns: 52px repeat(7, 1fr);
  background: var(--yta);
}
.tid-kolumn { }
.tid-etikett {
  height: var(--slot-hojd); font-size: .7rem; color: var(--dampa);
  text-align: right; padding-right: 4px; transform: translateY(-7px);
}
.dag-kolumn { position: relative; border-left: 1px solid var(--kant); }
.slot-cell { height: var(--slot-hojd); border-bottom: 1px solid #eceff3; }
.slot-cell:nth-child(even) { border-bottom-color: var(--kant); }
.slot-cell.drag-over { background: #dcebfa; }

.handelse-block {
  position: absolute; background: var(--primar); color: #fff;
  border-radius: 4px; border: 1px solid rgba(0,0,0,.15);
  font-size: .72rem; padding: 1px 4px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; line-height: 1.25;
}
.handelse-block .block-tid { opacity: .85; }
.handelse-block .block-titel { font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.handelse-block.dras { opacity: .5; }
.handelse-block.overlay-block {
  opacity: .55; border-style: dashed; cursor: default;
}
.resize-handle {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize;
}
.nu-linje {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px solid #d63c3c; z-index: 30; pointer-events: none;
}

dialog {
  border: 1px solid var(--kant); border-radius: 8px; padding: 1rem 1.2rem;
  width: min(420px, 92vw);
}
dialog::backdrop { background: rgba(20, 30, 40, .35); }
dialog h3 { margin-top: 0; }
dialog label { display: block; margin: .5rem 0; font-size: .9rem; }
dialog label.rad { display: flex; align-items: center; gap: .4rem; }
dialog input, dialog select, dialog textarea {
  width: 100%; padding: .3rem .45rem; border: 1px solid var(--kant);
  border-radius: 4px; font: inherit;
}
dialog input[type="checkbox"] { width: auto; }
.falt-rad { display: flex; gap: .6rem; }
.falt-rad label { flex: 1; }
.knapp-rad { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.knapp-rad #m-tabort { margin-right: auto; }
.hjalptext { font-size: .8rem; color: var(--dampa); }
.fel { color: var(--fara); }

#toast {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  background: #2b3642; color: #fff; padding: .5rem 1rem; border-radius: 6px;
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 100;
}
#toast.visas { opacity: 1; }

.login-sida { display: grid; place-items: center; height: 100vh; }
.login-kort {
  background: var(--yta); border: 1px solid var(--kant); border-radius: 10px;
  padding: 2rem 2.5rem; display: flex; flex-direction: column; gap: .8rem;
  min-width: 280px; text-align: center;
}
.login-kort form { display: flex; flex-direction: column; gap: .5rem; }
.login-kort input { padding: .4rem .6rem; border: 1px solid var(--kant); border-radius: 6px; }