:root{
  --bg:#f3f6f8;
  --surface:#ffffff;
  --surface-soft:#f8fafb;
  --line:#d7e0e6;
  --line-strong:#b7cbd8;
  --text:#173247;
  --muted:#647786;
  --accent:#356f98;
  --accent-soft:#eaf2f7;
  --danger:#a64e53;
  --shadow:0 10px 28px rgba(24,50,71,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-size:14px;
}
button,input,select,textarea{font:inherit}
button{
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--text);
  padding:7px 10px;
  cursor:pointer;
}
button:hover{border-color:var(--accent)}
button:disabled{
  opacity:.45;
  cursor:not-allowed;
  border-color:var(--line);
}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
button.danger{background:#fff5f5;border-color:#dfb9bc;color:var(--danger)}
button.compact{padding:5px 8px;font-size:12px}
input,select{
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--text);
  padding:7px 9px;
}
input[type="range"]{padding:0;border:0;accent-color:var(--accent)}
.hidden{display:none!important}

.app{
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:0;
}
.top-shell{
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.topbar{
  min-height:55px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px 7px;
}
.brand{
  font-size:21px;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 3px 0 0;
  white-space:nowrap;
}
.top-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.data-backup-row{
  margin:0 12px 8px;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.data-backup{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  overflow:hidden;
}
.data-backup summary{
  cursor:pointer;
  padding:8px 11px;
  background:var(--surface-soft);
  color:var(--accent);
  font-weight:800;
}
.data-backup-row > #contactBookBtn{
  flex:0 0 auto;
  min-height:36px;
}
.data-backup-content{
  padding:10px 12px 11px;
}
.data-backup-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.data-backup-content p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}
.data-delete{
  background:#b55258!important;
  border-color:#b55258!important;
  color:#fff!important;
}
.save-note{
  font-size:11px;
  color:var(--muted);
  min-width:0;
  white-space:nowrap;
}
.spacer{flex:1}
.planbar{
  min-height:45px;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:7px;
  padding:6px 12px;
  border-top:1px solid #e6edf5;
  background:var(--surface-soft);
  overflow-x:auto;
  scrollbar-width:thin;
}
.active-area-group{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:5px;
  margin-left:2px;
  padding-left:10px;
  border-left:1px solid var(--line-strong);
}
.planbar-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  margin-left:0;
}
.planbar-actions .copy-layout-btn{
  border-radius:999px;
  white-space:nowrap;
}
.tabs{
  flex:0 0 auto;
  width:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
}
.tab{
  white-space:nowrap;
  border-radius:999px;
  padding:7px 13px;
  font-weight:750;
  font-size:13px;
}
.tab.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 2px 7px rgba(42,82,124,.18);
}
.tab-new{border-style:dashed}
.tab-delete{
  white-space:nowrap;
  padding:6px 11px;
  font-size:12px;
  border-radius:999px;
}

.workspace{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 304px;
  gap:10px;
  padding:10px;
}
.board-panel,.side-panel{
  min-height:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
}
.board-panel{
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
}
.area-tab{
  flex:0 0 auto;
  min-height:30px;
  padding:5px 7px 3px;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  background:transparent;
  color:#61768d;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.area-tab:hover{
  border-bottom-color:#b8c9db;
  background:transparent;
  color:#355b84;
}
.area-tab.active{
  border-bottom-color:var(--accent);
  background:transparent;
  color:var(--accent);
  box-shadow:none;
}
.area-tab-new{
  color:#657b91;
  font-weight:650;
}
.area-delete-action{
  white-space:nowrap;
  padding:5px 9px;
  font-size:11px;
  border-radius:999px;
}
.area-overview{
  display:grid;
  gap:12px;
}
.area-overview-group{
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface-soft);
  overflow:hidden;
}
.area-overview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.area-overview-title{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.area-overview-title strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}
.area-overview-title span{
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
}
.area-overview-head button{
  flex:0 0 auto;
  padding:5px 9px;
  font-size:11px;
  font-weight:750;
}
.area-overview-board{
  padding:8px;
}
.area-overview-empty{
  padding:18px;
  border:1px dashed var(--line-strong);
  border-radius:8px;
  background:#fff;
  color:var(--muted);
  text-align:center;
  font-size:11px;
}
.area-dialog{
  width:min(430px,calc(100vw - 28px));
}
.area-dialog-help{
  margin:-4px 0 12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.area-dialog input{
  width:100%;
}

.board-toolbar{
  padding:9px 11px 8px;
  border-bottom:1px solid var(--line);
  background:var(--surface-soft);
}
.toolbar-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
}
.toolbar-actions{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
}
.undo-work-btn{
  padding:6px 11px;
  font-size:12px;
  font-weight:750;
  background:#fff;
}
.toolbar-title strong{
  font-size:13px;
}
.toolbar-title span{
  color:var(--muted);
  font-size:11px;
}
.copy-layout-btn{
  padding:6px 10px;
  border-color:var(--line-strong);
  background:#fff;
  color:var(--accent);
  font-size:12px;
  font-weight:750;
}
.copy-layout-btn:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
}
.section-builder{
  display:grid;
  grid-template-columns:105px 105px minmax(240px,1fr) auto;
  gap:9px;
  align-items:end;
  min-width:0;
}
.field label{
  display:block;
  margin:0 0 3px;
  font-size:11px;
  font-weight:750;
  color:var(--muted);
}
.range-wrap{
  display:grid;
  grid-template-columns:minmax(145px,1fr) 50px;
  gap:7px;
  align-items:center;
}
.range-value{
  text-align:center;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  padding:6px 4px;
  font-weight:750;
  color:var(--accent);
}
.section-builder.editing{
  grid-template-columns:minmax(300px,1fr) auto;
  align-items:end;
}
.section-builder.editing #sectionLengthField{
  grid-column:1;
}
.selection-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  grid-column:2;
}
.action-context{
  margin-right:2px;
  color:var(--muted);
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
}
.selection-actions button{
  min-height:34px;
  padding:7px 10px;
  font-size:12px;
  font-weight:750;
}
.selection-actions .split-action{
  border-color:var(--line-strong);
  background:#fff;
  color:var(--accent);
}
.selection-actions .split-action:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.board{
  min-height:0;
  overflow:auto;
  padding:10px;
}
.board-empty{
  min-height:100%;
  border:1px dashed var(--line-strong);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  text-align:center;
  padding:24px;
  background:var(--surface-soft);
}
.plan-line{
  display:grid;
  gap:6px;
  align-items:end;
  margin-bottom:7px;
}
.section{
  min-width:0;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fbfdfc;
  padding:4px;
}
.section.selected{outline:2px solid rgba(63,111,159,.22);border-color:var(--accent)}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  min-height:24px;
  padding:2px 4px 4px;
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
}
.section-head strong{color:var(--text);font-size:12px}
.section-grid{
  display:grid;
  gap:4px;
}
.section-row{
  display:grid;
  gap:4px;
  min-width:0;
}
.cage-hole{min-width:0;min-height:66px}
.section.height-1 .cage,
.section.height-1 .cage-hole{
  min-height:102px;
}
.section.height-1 .cage-drop{
  min-height:78px;
}

.section.height-2 .cage,
.section.height-2 .cage-hole{
  min-height:84px;
}
.section.height-2 .cage-drop{
  min-height:60px;
}

.section.height-3 .cage,
.section.height-3 .cage-hole{
  min-height:76px;
}
.section.height-3 .cage-drop{
  min-height:52px;
}

.section.height-4 .cage,
.section.height-4 .cage-hole{
  min-height:70px;
}
.section.height-4 .cage-drop{
  min-height:46px;
}

.cage{
  min-width:0;
  min-height:66px;
  border:1.5px solid var(--line-strong);
  border-radius:7px;
  background:#fff;
  display:grid;
  grid-template-rows:20px 1fr;
  overflow:hidden;
  cursor:pointer;
}
.cage.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cage-head{
  display:flex;
  justify-content:space-between;
  gap:6px;
  align-items:center;
  padding:2px 6px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:10px;
  font-weight:750;
  user-select:none;
}
.cage-drop{
  min-height:42px;
  padding:6px 7px 5px;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-end;
  align-items:flex-end;
  justify-content:center;
  column-gap:4px;
  row-gap:2px;
  text-align:center;
}
.dropzone.over{background:#edf3f9}
.empty-hint{
  width:100%;
  color:#9aaba8;
  font-size:11px;
  align-self:center;
}
.animal{
  display:inline;
  position:relative;
  border:0;
  background:transparent;
  color:var(--animal-color,var(--text));
  padding:1px 2px;
  border-radius:4px;
  cursor:grab;
  font-weight:750;
  line-height:1.35;
  white-space:nowrap;
}
.animal:hover{background:var(--accent-soft)}
.animal:active{cursor:grabbing}
.cage-drop .animal:not(:last-of-type)::after{content:" –";font-weight:400;color:var(--muted)}
.side-panel{
  display:grid;
  grid-template-rows:auto auto 1fr;
  overflow:hidden;
}
.side-head{
  padding:9px 10px 7px;
  border-bottom:1px solid var(--line);
}
.side-head h2{margin:0 0 2px;font-size:16px}
.side-head p{margin:0;color:var(--muted);font-size:11px}
.animal-summary{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:4px 10px;
  max-width:650px;
  color:var(--muted);
  font-size:12px;
  line-height:1.3;
}
.summary-total{
  color:var(--text);
  font-weight:800;
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
  padding-right:3px;
}
.summary-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.summary-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
}
.summary-scope{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  margin-right:2px;
}
.summary-scope button{
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  background:#fff;
  color:var(--muted);
}
.summary-scope button.active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
  font-weight:800;
}
.category-name-wrap{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
  min-width:0;
}
.category-count{
  color:var(--muted);
  font-size:12px;
  font-weight:750;
}
.side-scroll{
  min-height:0;
  overflow:auto;
  padding:8px;
}
.zone-block{
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  overflow:hidden;
  margin-bottom:7px;
}
.zone-title{
  min-height:31px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:4px 8px;
  padding:6px 8px;
  background:var(--accent-soft);
  font-weight:750;
}
.zone-title small{color:var(--muted);font-weight:650}
.zone-title button{padding:2px 6px;font-size:11px}
.zone-actions{
  grid-column:2;
  grid-row:1;
  display:flex;
  align-items:center;
  gap:3px;
}
.zone-move{min-width:24px}
.category-settings{
  margin:8px 0 7px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}
.category-settings summary{
  cursor:pointer;
  padding:7px 8px;
  font-weight:750;
  background:var(--surface-soft);
  border-radius:9px;
}
.category-list{padding:4px 8px 7px}
.category-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px 24px 24px auto auto;
  gap:6px;
  align-items:center;
  min-height:38px;
  padding:4px 0;
  border-bottom:1px solid #edf2f7;
}
.category-row:last-child{border-bottom:0}
.category-label{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.category-label strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.category-swatch{
  width:26px;
  height:26px;
  border:1px solid var(--line);
  border-radius:6px;
}
.category-move{
  min-width:24px;
  padding:3px 5px;
  font-size:11px;
}
.category-edit,.category-delete{
  padding:3px 7px;
  font-size:11px;
}
.category-add{
  display:grid;
  grid-template-columns:minmax(0,1fr) 36px auto;
  gap:6px;
  align-items:center;
  padding:7px 8px 8px;
  border-top:1px solid var(--line);
}
.category-add input[type="color"]{
  width:36px;
  height:30px;
  padding:2px;
}
.copy-dialog{
  width:min(480px,calc(100vw - 28px));
}
.copy-dialog .dialog-body{
  padding-bottom:14px;
}
.copy-dialog-intro{
  margin:-4px 0 13px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.new-plan-options{
  display:grid;
  gap:8px;
}
.new-plan-option{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}
.new-plan-option:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.new-plan-option:has(input:checked){
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(70,112,158,.13);
  background:var(--accent-soft);
}
.new-plan-option input{
  margin:3px 0 0;
}
.new-plan-option span{
  display:grid;
  gap:2px;
}
.new-plan-option strong{
  font-size:13px;
}
.new-plan-option small{
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}
.new-plan-option.is-disabled{
  opacity:.5;
  cursor:not-allowed;
  background:var(--surface-soft);
}
.copy-source-section{
  margin-top:10px;
}
.copy-source-list{
  display:grid;
  gap:8px;
}
.copy-source-option{
  position:relative;
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  min-height:52px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  transition:.15s ease;
}
.copy-source-option:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.copy-source-option:has(input:checked){
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(70,112,158,.13);
  background:var(--accent-soft);
}
.copy-source-option.is-disabled{
  opacity:.52;
  cursor:not-allowed;
  background:var(--surface-soft);
}
.copy-source-option.is-disabled:hover{
  border-color:var(--line);
}
.copy-source-option input{
  margin:0;
}
.copy-source-name{
  min-width:0;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.copy-source-meta{
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
}
.copy-source-empty{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.copy-dialog-note{
  margin-top:11px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-soft);
  color:var(--muted);
  font-size:11px;
}
.split-dialog{
  width:min(430px,calc(100vw - 28px));
}
.split-dialog .split-preview{
  margin-top:8px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-soft);
  color:var(--muted);
  font-size:12px;
}
.split-dialog .split-preview strong{
  color:var(--text);
}
dialog{
  width:min(390px,calc(100vw - 28px));
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0;
  color:var(--text);
  box-shadow:0 18px 55px rgba(27,57,54,.2);
}
dialog::backdrop{background:rgba(15,23,42,.38)}
.dialog-body{padding:16px}
.dialog-body h3{margin:0 0 13px;font-size:18px}
.dialog-fields{display:grid;gap:10px}
.dialog-fields label{display:grid;gap:4px;font-size:12px;font-weight:750;color:var(--muted)}
.dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  padding:10px 16px;
  border-top:1px solid var(--line);
  background:var(--surface-soft);
}
.dialog-actions .danger{margin-right:auto}
.zone-drop{
  min-height:48px;
  padding:6px 7px;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:4px;
}
.zone-drop .animal{
  border:1px solid var(--line);
  background:#fff;
  padding:3px 6px;
  border-radius:999px;
  font-size:12px;
}
.zone-drop .animal::after{content:""!important}
.status-animal{
  display:inline-flex!important;
  align-items:center;
  gap:3px;
}
.status-remove{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:0 1px;
  line-height:1;
  font-size:14px;
  border-radius:3px;
}
.status-remove:hover{
  color:var(--danger);
  background:#fff1f2;
}
.dialog-help{
  margin:-5px 0 13px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
#editCategoryColor{
  width:54px;
  height:36px;
  padding:2px;
}
.zone-label-wrap{
  min-width:0;
  display:grid;
  gap:1px;
}
.status-scope-note{
  color:var(--muted);
  font-size:9px;
  font-weight:650;
  white-space:nowrap;
}
.zone-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.file-input{display:none}



/* Kompakte handlinger over statusboksen i højre side */
.right-column{
  min-height:0;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:6px;
}
.side-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:5px;
  padding:0 2px;
}
.side-tools button{
  flex:0 0 auto;
  padding:4px 7px;
  font-size:10px;
  font-weight:750;
  line-height:1.25;
  white-space:nowrap;
}
.category-manager-dialog{
  width:min(520px,calc(100vw - 28px));
}
.category-manager-dialog .category-list{
  padding:0;
  margin-top:4px;
}
.category-manager-dialog .category-add{
  margin-top:8px;
  padding:10px 0 0;
  border-top:1px solid var(--line);
}

/* Ens, små krydser ved aktiv opsætning og aktiv væg */
.plan-delete-mini,.area-delete-mini{
  width:18px;
  min-width:18px;
  height:18px;
  margin-left:-7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#a9646a;
  font-size:14px;
  line-height:1;
}
.plan-delete-mini:hover,.area-delete-mini:hover{
  border:0;
  background:#fff0f1;
  color:var(--danger);
}
/* Kun statusfelter i højre kolonne */
.side-panel{
  grid-template-rows:auto 1fr;
}
.side-head{
  padding:8px 9px;
}
.side-head h2{
  margin:0;
  font-size:16px;
  line-height:1.2;
}

/* Ny sektion skal være tydelig uden at dominere */
.board-toolbar{
  padding:7px 10px 7px;
}
.toolbar-title{
  margin-bottom:5px;
}
.toolbar-title strong{
  font-size:12px;
  font-weight:700;
}
.toolbar-title span{
  font-size:10px;
}
.section-builder{
  grid-template-columns:100px 100px minmax(220px,1fr) auto;
  gap:8px;
}
.section-builder > button{
  padding:6px 10px;
}
.range-value{
  padding:5px 4px;
}

@media(max-width:1350px){
  .animal-summary{max-width:430px}
  .section-builder{grid-template-columns:95px 95px minmax(190px,1fr) auto}
}
@media(max-width:1080px){
  .topbar{flex-wrap:wrap}
  .animal-summary{
    flex-basis:100%;
    justify-content:flex-start;
    max-width:none;
    padding-left:1px;
  }
  .workspace{grid-template-columns:minmax(0,1fr) 270px}
  .section-builder{grid-template-columns:1fr 1fr}
  .section-builder .field:nth-child(3){
    grid-column:span 2;
  }
  .section-builder button{grid-column:span 2}
  .section-builder.editing{
    grid-template-columns:1fr;
  }
  .section-builder.editing #sectionLengthField,
  .section-builder.editing .selection-actions{
    grid-column:1;
  }
  .section-builder.editing .selection-actions{
    justify-content:flex-start;
  }
  .section-builder.editing .selection-actions button{
    grid-column:auto;
  }
}

@media(max-width:1050px){
  .topbar{flex-wrap:wrap}
  .animal-summary{margin-left:auto}
}

@media(max-width:820px){
  .app{height:auto;min-height:100%}
  .planbar{align-items:center;flex-wrap:nowrap}
  .planbar-actions{margin-left:0}
  .workspace{grid-template-columns:1fr}
  .right-column{min-height:0}
  .board-panel{min-height:65vh}
  .side-panel{max-height:none}
  .top-actions{flex-wrap:wrap}
}



.planbar{
  position:relative;
  z-index:30;
  flex-wrap:nowrap;
  overflow:visible;
}
.planbar-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.side-tools.planbar-side-tools{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.side-tools.planbar-side-tools button{
  flex:0 0 auto;
  padding:7px 11px;
  font-size:13px;
  font-weight:750;
  line-height:1.25;
  white-space:nowrap;
}
.right-column .side-tools{display:none}
.planbar-tool-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.ghost-popover{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  left:auto!important;
  z-index:1200;
  width:min(360px, calc(100vw - 24px));
  max-height:min(70vh, 560px);
  overflow:auto;
  display:none;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:#fff;
  box-shadow:0 16px 40px rgba(24,50,71,.22);
}
.ghost-popover.open{display:block}
.ghost-popover-body{padding:14px}
.ghost-popover h3{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.25;
}
.ghost-popover .dialog-help{
  margin:0 0 10px;
  font-size:12px;
  color:var(--muted);
}
.ghost-popover .dialog-fields{
  display:grid;
  gap:10px;
}
.ghost-popover .dialog-fields label{
  display:grid;
  gap:4px;
  font-size:12px;
  font-weight:750;
  color:var(--muted);
}
.ghost-popover .dialog-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background:var(--surface-soft);
}
.ghost-popover .dialog-actions .danger{margin-right:auto}
.ghost-popover .category-list{padding:0}
.ghost-popover .category-row{display:grid;grid-template-columns:minmax(0,1fr) 28px 24px 24px auto auto;gap:6px;align-items:center;min-height:38px;padding:4px 0;border-bottom:1px solid #edf2f7}
.ghost-popover .category-row:last-child{border-bottom:0}
.ghost-popover .category-add{display:grid;grid-template-columns:minmax(0,1fr) 36px auto;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.ghost-popover .empty-hint{padding:8px 0;color:var(--muted);font-size:12px}
@media(max-width:980px){
  .side-tools.planbar-side-tools button{font-size:12px;padding:6px 9px}
}


.delete-choice-text{
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}



/* Burplan layout refinement 2026-08-08
   - preserves the compact one-line command bar
   - makes Ny sektion / Valgt bur a manual fold-out matching Data og backup
   - keeps cage capacity/height unchanged
*/
.planbar{
  min-height:46px;
  padding:6px 12px;
  gap:7px;
  background:#f7fafc;
  border-top:1px solid #e2eaf0;
  border-bottom:1px solid #e2eaf0;
}
.tabs{gap:7px}
.active-area-group{gap:6px;padding-left:11px;border-left-color:#cbd9e3}
.tab{
  min-height:34px;
  padding:7px 12px;
  border-radius:8px;
  font-size:13px;
  font-weight:750;
  box-shadow:none;
}
.tab.active{box-shadow:none;font-weight:800}
.tab-new{border-style:dashed}
.area-tab{
  min-height:32px;
  padding:6px 8px 4px;
  font-size:12px;
  font-weight:750;
}
.area-tab.active{font-weight:800}
.side-tools.planbar-side-tools{gap:8px}
.side-tools.planbar-side-tools button{
  min-height:34px;
  padding:7px 12px;
  border-radius:8px;
  font-size:13px;
  font-weight:750;
  box-shadow:none;
}
.side-tools.planbar-side-tools button.primary{font-weight:800}
.plan-delete-mini,.area-delete-mini{margin-left:-6px}

/* Same fold-out language as Data og backup. */
.board-panel{grid-template-rows:auto 1fr}
.section-tools{
  margin:0 0 8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  overflow:hidden;
}
.section-tools summary{
  min-height:0;
  display:list-item;
  padding:8px 11px;
  cursor:pointer;
  background:var(--surface-soft);
  color:var(--accent);
  font-weight:800;
  user-select:none;
  list-style-position:inside;
}
.section-tools summary::marker{color:var(--accent)}
.section-tools summary::-webkit-details-marker{display:inline;color:var(--accent)}
.section-tools summary strong{font-size:inherit;font-weight:800;color:inherit}
.section-tools summary #toolbarHint{
  margin-left:6px;
  font-size:11px;
  font-weight:400;
  color:var(--muted);
}
.section-tools .board-toolbar{
  position:relative;
  padding:8px 10px 9px;
  border-top:1px solid var(--line);
  border-bottom:0;
  background:#fff;
}
.section-tools-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:0 0 8px;
}
.section-tools-row .section-tools{
  flex:1 1 auto;
  min-width:0;
  margin:0;
}
.section-tools-row > .undo-work-btn{
  flex:0 0 auto;
  min-height:34px;
  margin:0;
  align-self:flex-start;
}
.section-builder{padding-right:0}

/* Cleaner work area without reducing cage height or information density. */
.workspace{gap:10px;padding:10px}
.board-panel,.side-panel{
  border-color:#cfdde7;
  box-shadow:0 4px 14px rgba(24,50,71,.045);
}
.board{padding:9px;background:#f5f9fb}
.plan-line{gap:7px;margin-bottom:7px}
.section{
  border:1px solid #c8dae6;
  border-radius:10px;
  background:#fff;
  padding:5px;
  box-shadow:0 2px 7px rgba(24,50,71,.035);
}
.section-head{
  min-height:24px;
  padding:2px 4px 5px;
  border-bottom:1px solid #edf2f5;
  margin-bottom:4px;
}
.section-head strong{font-weight:800}
.section-grid,.section-row{gap:4px}
.cage{
  border:1px solid #c7dae6;
  border-radius:8px;
  background:#fff;
  box-shadow:0 1px 2px rgba(24,50,71,.025);
}
.cage.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(53,111,152,.13);
}
.cage-head{background:#eaf3f8;border-bottom:1px solid #dce9f0}
.zone-block{
  border-color:#cfdde7;
  border-radius:9px;
  box-shadow:0 1px 3px rgba(24,50,71,.025);
}
.zone-title{background:#eaf3f8}
.side-panel{background:#fff}

@media(max-width:980px){
  .side-tools.planbar-side-tools button{font-size:12px;padding:6px 9px;min-height:32px}
  .tab{min-height:32px;padding:6px 10px}
}
@media(max-width:800px){
  .section-tools-row{gap:6px}
}

.contact-book-dialog{width:min(880px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:hidden;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 55px rgba(27,57,54,.2)}
.contact-book-dialog[open]{display:flex;flex-direction:column}
.contact-book-dialog .dialog-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--surface-soft)}
.contact-book-dialog .dialog-head h2{margin:0;font-size:20px}
.contact-book-dialog .dialog-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);font-size:22px;line-height:1;font-weight:400}
.contact-book-dialog .dialog-close:hover{background:#f7fafc;border-color:var(--accent)}
.contact-book-dialog .dialog-body{flex:1 1 auto;min-height:0;overflow:auto;padding:15px}
.contact-purpose{display:grid;gap:8px;margin:0 0 15px;padding:12px 14px;border:1px solid #d5e2eb;border-radius:10px;background:#f5fafc;color:var(--text);font-size:14px;line-height:1.5}
.contact-purpose p{margin:0}
.contact-nav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.contact-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0}
.contact-tab.tab{min-height:32px;padding:6px 12px;font-size:13px}
.contact-tab.tab.active{font-weight:800}
.contact-tab-panel.hidden{display:none}
.contact-nav-action{flex:0 0 auto;white-space:nowrap}
.contact-privacy-note{margin:0 0 12px;padding:9px 11px;border:1px solid #d5e2eb;border-radius:9px;background:#f8fbfd;color:var(--muted);font-size:12px;line-height:1.45}
.contact-book-list{display:grid;gap:8px;margin:8px 0 18px}
.contact-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;display:grid;gap:7px}
.contact-card-head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.contact-card-title{display:grid;gap:2px}
.contact-card-title small,.contact-meta,.contact-animals{color:var(--muted);font-size:13px;line-height:1.4}
.contact-card-actions{display:flex;gap:6px;flex-wrap:wrap}
.contact-link-row{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13px;line-height:1.4}
.contact-link-row a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.contact-form{border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.contact-form.hidden{display:none}
.contact-form h4,.share-panel h4{margin:0 0 10px;font-size:17px}
.contact-form textarea,.share-panel textarea{width:100%;min-height:72px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:8px 9px;color:var(--text);background:#fff}
.contact-form-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.inline-save-status{font-size:13px;font-weight:700;color:#267344;min-height:1.2em}
.contact-animal-block{display:grid;gap:6px}
.contact-animal-label{font-size:12px;font-weight:750;color:var(--muted)}
.contact-animal-search{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 9px;color:var(--text);font:inherit}
.contact-animal-picker{border:1px solid var(--line);border-radius:9px;background:#fff;max-height:210px;overflow:auto;padding:5px 9px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.contact-animal-option{display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"check name" ". assignment";column-gap:8px;row-gap:2px;align-items:start;margin:0;padding:7px 2px;color:var(--text)!important;font-size:14px!important;font-weight:400!important;cursor:pointer;min-width:0}
.contact-animal-option input[type="checkbox"]{grid-area:check;width:auto!important;margin:2px 0 0!important;padding:0!important;accent-color:var(--accent);align-self:start}
.contact-animal-option span{grid-area:name;min-width:0;line-height:1.3;overflow-wrap:anywhere}
.contact-animal-option small{grid-area:assignment;color:var(--muted);font-size:11px;line-height:1.3;text-align:left;white-space:normal;overflow-wrap:anywhere}
.contact-animal-option.filtered-out{display:none!important}
.contact-animal-group{grid-column:1/-1;display:grid;gap:5px;padding:3px 0 8px}
.contact-animal-group + .contact-animal-group{border-top:1px solid var(--line);padding-top:10px}
.contact-animal-group.hidden{display:none}
.contact-animal-group-title{font-size:12px;font-weight:800;color:var(--muted);padding:2px 2px 4px}
.contact-animal-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.contact-empty{padding:12px;border:1px dashed var(--line);border-radius:9px;color:var(--muted);font-size:13px}

.own-breeding-dialog{width:min(880px,calc(100vw - 28px))}
.own-breeding-dialog .dialog-body{display:grid;gap:12px}
.own-breeding-intro{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.own-breeding-dialog .dialog-actions{flex:0 0 auto}

.animal-overview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.animal-overview-title{display:grid;gap:3px;min-width:0}
.animal-overview-title h4{margin:0;font-size:17px}
.animal-overview-title p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}
.animal-overview-head > button{flex:0 0 auto}
.animal-overview-controls{display:grid;gap:8px;margin-bottom:10px}
.animal-overview-search{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 9px;color:var(--text);font:inherit}
.animal-filter-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.animal-filter-row button{padding:6px 10px;font-size:12px}
.animal-filter-row button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:800}
.animal-overview-summary{margin:2px 0 8px;color:var(--muted);font-size:12px;line-height:1.4}
.animal-overview-list{display:grid;gap:10px;background:transparent}
.animal-overview-group{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.animal-overview-group.missing{border-color:#e2c4c6}
.animal-overview-group.own{border-color:#cfded6}
.animal-overview-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 11px;background:var(--surface-soft);border-bottom:1px solid #e5edf2}
.animal-overview-group.missing .animal-overview-group-head{background:#fff7f7}
.animal-overview-group.own .animal-overview-group-head{background:#f6faf7}
.animal-overview-group-title{font-weight:800;color:var(--text)}
.animal-overview-group.missing .animal-overview-group-title{color:var(--danger)}
.animal-overview-group.own .animal-overview-group-title{color:#486c5a}
.animal-overview-group-meta{color:var(--muted);font-size:11px;white-space:nowrap}
.animal-overview-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:40px;padding:8px 11px;border-bottom:1px solid #edf2f5}
.animal-overview-row:last-child{border-bottom:0}
.animal-overview-name{min-width:0;font-weight:750;overflow-wrap:anywhere}
.animal-overview-assignment{max-width:420px;text-align:right;font-size:12px;font-weight:750;line-height:1.35}
.animal-overview-assignment.contact{color:var(--accent)}
.animal-overview-assignment.own{color:#486c5a}
.animal-overview-assignment.missing{color:var(--danger)}
.animal-overview-empty{padding:14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);font-size:13px}
.animal-overview-footer{display:flex;align-items:center;gap:8px;margin-top:10px;min-height:22px}

.share-panel p{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.4}
.share-section{display:grid;gap:9px;padding:12px 14px;border:1px solid #d5e2eb;border-radius:10px;background:#f8fbfd;margin-top:10px}
.share-inline{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.share-link-box{margin-top:10px;padding:12px 14px;border:1px solid #bdd4e3;border-radius:10px;background:#f3f8fb;display:grid;gap:7px}
.share-link-label{display:grid;gap:5px;font-size:12px;font-weight:750;color:var(--muted)}
.share-link-label input{width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 9px;color:var(--text);font:inherit}
.share-link-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:nowrap}
.share-link-row .grow{flex:1 1 auto}
.share-link-row > button{flex:0 0 auto;white-space:nowrap}
.share-link-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:0}
.share-admin{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid #d7e5ee}
.share-admin h5{margin:0 4px 0 0;white-space:nowrap;font-size:13px}

@media(max-width:640px){
  .contact-card-head{display:grid}
  .contact-card-actions{justify-content:flex-start}
  .contact-animal-picker,.contact-animal-group-grid{grid-template-columns:1fr}
  .contact-nav-row{align-items:flex-start;flex-wrap:wrap}
  .contact-nav-action{margin-left:auto}
  .animal-overview-head{display:grid}
  .animal-overview-head > button{justify-self:start}
  .animal-overview-row{grid-template-columns:1fr;gap:3px}
  .animal-overview-assignment{text-align:left;max-width:none}
  .share-link-row{flex-wrap:wrap}
  .share-link-row .grow{flex-basis:100%}
  .share-admin{align-items:flex-start;flex-direction:column}
  .share-admin h5{margin-right:0}
}


/* Programkoden ligger server-side. */