:root{
    --bg:#f7f7f9;
    --border:#e5e7eb;
    --muted:#6b7280;
    --text:#111827;
    --primary:#58799d;
    --primary-700:#4b6887;
    --accent:#007bff;
    --accent-700:#0056b3;
    --success:#17a34a;
    --danger:#dc2626;
    --card-bg:#fff;
  }

  .app{
    max-width: 1200px; margin:0 auto;
    display:grid; gap:2px;
    grid-template-columns: 1fr 1fr;
  }
  .card{
    background: #eaeaea; border:1px solid var(--border);
    border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.06);
    overflow:hidden; display:flex; flex-direction:column; min-height:0;
    transition: background .3s, border-color .3s;
    color: #5c5c5c;
  }
  .card header{
    padding:0px 12px; font-weight:700; color:#fff;
    background: linear-gradient(180deg, var(--primary), var(--primary-700));
  }
  .card .body{ padding:10px; display:flex; flex-direction:column; gap:8px; min-height:0; }

  .btn{
    display:inline-flex; align-items:center; gap:6px; cursor:pointer;
    padding:6px 10px; border-radius:8px; border:1px solid var(--border);
    background:var(--card-bg); font-size:14px;
    transition: background .15s, border-color .15s, transform .05s;
    color:var(--text);
  }
  .btn:hover{ background:rgba(0,0,0,.05) }
  .btn.primary{ background: var(--accent); border-color: var(--accent); color:#fff; }
  .btn.primary:hover{ background: var(--accent-700); border-color: var(--accent-700); }
  .btn.success{ background: var(--success); border-color: var(--success); color:#fff; }
  .btn.danger{ background: var(--danger); border-color: var(--danger); color:#fff; }

  .icon-btn{ background:none; border:none; padding:4px; cursor:pointer; opacity:.7; }
  .icon-btn:hover{ opacity:1 }
  .star{ font-size:18px }

  .searchbar{ display:flex; gap:8px; align-items:center; }
  .searchbar input{
    flex:1; padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-size:14px;
  }
  .archive{ display:flex; flex-direction:column; gap:6px; overflow:auto; }
  .row{
    display:flex; align-items:center; gap:8px; padding:8px 10px;
    border:1px solid var(--border); border-radius:8px;
  }
  .row .txt{ flex:1; min-width:0; }
  .row .add{ white-space:nowrap; }

  .fav-list{ display:flex; flex-direction:column; gap:6px; overflow:auto; }
  .fav-item{
    display:flex; align-items:center; gap:5px; padding:0px 4px;
    border:1px solid var(--border); border-radius:8px;
  }
  .tag{ font-size:12px; padding:2px 6px; border-radius:999px; background:#eef2ff; color:#3730a3; white-space:nowrap; }
  .text{ flex:1; min-width:0; }

  .work-area {
  display: flex;
  flex-direction: column;   /* stapla i en kolumn */
  gap: 15px;                /* avst책nd mellan rutorna */
}

  /* Gemensam grund för alla boxar */
.box {
  border-radius: 6px;
  padding: 10px;
  margin: 0px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Symtom */
.box[data-tag="Symtom"] {
  background: #FF6B6B15;         /* ljusröd bakgrund */
  border-left: 6px solid #FF6B6B;
}

/* Tidigare sjukdomar */
.box[data-tag="Tidigare"] {
  background: #4ECDC415;         /* ljusgrön bakgrund */
  border-left: 6px solid #4ECDC4;
}

/* Råd */
.box[data-tag="Råd"] {
  background: #4D96FF15;         /* ljusblå bakgrund */
  border-left: 6px solid #4D96FF;
}

/* Hänvisning (samma som Råd) */
.box[data-tag="Hänvisning"] {
  background: #4D96FF15;         
  border-left: 6px solid #4D96FF;
}

/* Gör rubrikerna lite tydligare */
.box header span:first-child {
  font-weight: bold;
  font-size: 1.05rem;
  color: #222;
}

  .box header{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:#fafafa; border-bottom:1px solid var(--border); color:var(--text); font-weight:700; }
  .box .content{ padding:4px; display:flex; flex-direction:column; gap:2px; overflow:auto; }
  .chip{ display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:9px; padding:6px 3px; background:#fff; }
  .chip .rm{ background:none; border:none; cursor:pointer; color:var(--muted); }
  .chip .rm:hover{ color:var(--text) }
  .box footer{ display:flex; gap:6px; padding:8px; border-top:1px solid var(--border); background:#fafafa; }

  market{ background: linear-gradient(to top, #fff3a3 0.55em, transparent 0); padding:0; border-radius:0; }
  .muted{ color: var(--muted); font-size:12px; }

  @media (max-width: 1100px){ .app{ grid-template-columns: 1fr 1fr; } .workspace{ grid-column: 1 / -1; } }
  @media (max-width: 720px){ .app{ grid-template-columns: 1fr; } }
  .icon-btn[disabled] { opacity: .4; cursor: not-allowed; }
.frassepage .main-container-inner {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.frassepage #sidebar-box-main {
  width: 100% !important;
}
.frassepage #toolbar-bar {display: none;}
#editorArea {
  overflow: hidden;      /* låt höjden växa i stället för scrollbar */
  resize: none;          /* använd vår autosize; vill du kunna dra, ta bort denna */
  min-height: 120px;     /* start-höjd */
  max-height: 60vh;      /* säkerhetstak så inte blir hur lång som helst */
}
.tagfilter{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  border:1px dashed var(--border); padding:8px; border-radius:8px;
}
.tagfilter legend{ font-size:12px; color:var(--muted); margin-right:4px; }
.tagfilter label{ display:inline-flex; align-items:center; gap:6px; font-size:14px; }
.tagfilter input[type="radio"]{ accent-color: var(--accent); }