/* ---- fremdriftsplan (Arcems planlegger, Bonums farger) ----
   Strukturen, målene og oppførselen er Arcem-dashbordets. Fargene og fontene
   er Bonums, koblet inn gjennom aliasene under, slik at planen ser ut som resten
   av portalen. */
.fp,.fp-dialog{
  --surface-2:var(--sunk);
  --muted:var(--slate); --faint:var(--muted-num);
  --line:var(--line-soft); --line-strong:#E3E2DF;
  --spruce:var(--petrol); --teal:var(--slate);
  --red:#A3302A; --green:#3F7D5C; --amber:#B07F3A;
  --data:var(--mono); --body:var(--ui);
  --info-w:320px; --month-w:34px; --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 20px 44px -20px rgba(35,31,32,.5);
}
.fp{display:flex;flex-direction:column;min-height:calc(100vh - 42px - 96px);background:var(--paper)}
.fp .btn{border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);padding:7px 13px;font:600 12.5px var(--body);color:var(--ink);cursor:pointer;margin-left:0}
.fp .btn:hover{border-color:var(--teal)}
.fp .btn.subtle{border-color:transparent;background:transparent;color:var(--muted)}
.fp .btn.small{padding:6px 9px;font-size:12px}
.fp .btn.toggle-on{border-color:color-mix(in srgb,var(--red) 48%,var(--line));color:var(--red);background:color-mix(in srgb,var(--red) 6%,var(--surface))}
.fp .btn:disabled{opacity:.45;cursor:default}
.fp .toolbar{min-height:60px;padding:6px 26px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:transparent}
.fp .toolbar .grow{flex:1}
.fp .status-legend{display:flex;align-items:center;gap:13px;color:var(--faint);font:500 9px var(--data)}
.fp .status-legend span{display:inline-flex;align-items:center;gap:5px}
.fp .status-legend i{position:relative;width:16px;height:9px;border-radius:3px;background:var(--spruce);border:1px solid var(--spruce)}
.fp .status-legend span:nth-child(2) i{background:color-mix(in srgb,var(--slate) 45%,var(--surface));border-color:color-mix(in srgb,var(--slate) 45%,var(--surface))}
.fp .status-legend .active::after{content:"";position:absolute;right:3px;top:2px;width:3px;height:3px;border-radius:50%;background:var(--paper);opacity:.78}
.fp .status-legend .done::after{content:"✓";position:absolute;right:2px;top:-3px;color:var(--paper);font:700 8px/12px var(--data);opacity:.82}
.fp .fit-quiet{border:0;border-radius:6px;padding:6px 8px;background:transparent;color:var(--muted);font:inherit;font-size:11px;cursor:pointer}
.fp .fit-quiet:hover{color:var(--ink);background:var(--surface-2)}
.fp .critical-mark{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:3px;border-radius:4px;color:var(--faint);font-size:14px;line-height:1}
.fp .btn:hover .critical-mark{color:var(--ink);background:var(--surface-2)}

.fp .gantt-scroll{min-height:0;flex:1;overflow:auto;background:var(--paper);position:relative;overscroll-behavior:contain;border-top:1px solid var(--line-strong)}
.fp .gantt-grid{min-width:calc(var(--info-w) + 900px);width:max-content;position:relative}
.fp .gantt-head,.fp .gantt-row{display:grid;grid-template-columns:var(--info-w) auto}
.fp .gantt-head{position:sticky;top:0;z-index:20;height:40px;border-bottom:1px solid var(--line-strong)}
.fp .head-info{position:sticky;left:0;z-index:24;display:flex;align-items:end;padding:0 9px 7px 14px;box-shadow:1px 0 var(--line-strong);color:var(--faint);font:700 9px var(--data);text-transform:uppercase;letter-spacing:.06em}
.fp .months{display:flex;position:relative}
.fp .month{width:var(--month-w);flex:0 0 var(--month-w);border-right:1px solid var(--line);padding:5px 2px 0;text-align:center;color:var(--faint);font-size:9px}
.fp .month.year-start{border-left:1px solid var(--line-strong)}
.fp .month b{display:block;font:600 8.5px var(--data);letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.fp .month .year{display:block;font:700 8.5px var(--data);color:var(--muted)}
.fp .gantt-row{min-height:31px;border-bottom:1px solid var(--line)}
.fp .task-info{position:sticky;left:0;z-index:8;display:block;padding:2px 12px 2px 9px;background:var(--paper);box-shadow:1px 0 var(--line-strong);cursor:grab}
.fp .task-info:active{cursor:grabbing}
.fp .gantt-row:hover .task-info,.fp .gantt-row:focus-within .task-info{background:color-mix(in srgb,var(--surface-2) 54%,var(--surface))}
.fp .task-main{min-width:0;display:flex;align-items:center;gap:7px;height:27px}
.fp .row-drag{width:15px;height:23px;flex:0 0 15px;border:0;padding:0;background:transparent;color:var(--ink);font-size:14px;line-height:1;cursor:grab;opacity:.25;transition:opacity .12s var(--ease)}
.fp .gantt-row:hover .row-drag,.fp .gantt-row:focus-within .row-drag{opacity:.68}
.fp .row-drag:active{cursor:grabbing}
.fp .gantt-row.row-dragging{opacity:.36}
.fp .gantt-row.drop-before{box-shadow:inset 0 2px var(--teal)}
.fp .gantt-row.drop-after{box-shadow:inset 0 -2px var(--teal)}
.fp .task-name{min-width:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline;overflow:hidden}
.fp .task-name button{display:block;min-width:0;border:0;background:transparent;padding:0;font:600 12px var(--body);line-height:1.15;text-align:left;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.fp .activity-cost{color:var(--faint);font:500 8.8px var(--data);white-space:nowrap}
.fp .task-period{grid-column:1 / -1;display:block;height:11px;opacity:0;color:var(--faint);font:500 8.5px/11px var(--data);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .12s var(--ease)}
.fp .gantt-row:hover .task-period,.fp .gantt-row:focus-within .task-period{opacity:1}
.fp .timeline{position:relative;height:100%;min-height:31px;background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--month-w) - 1px),color-mix(in srgb,var(--line) 70%,transparent) calc(var(--month-w) - 1px),color-mix(in srgb,var(--line) 70%,transparent) var(--month-w))}
.fp .today-line{position:absolute;top:0;bottom:0;width:1.5px;background:#A3302A;z-index:3;pointer-events:none;opacity:.55}
.fp .bar{position:absolute;top:7px;height:17px;min-width:7px;border-radius:4px;background:color-mix(in srgb,var(--slate) 45%,var(--surface));border:1px solid color-mix(in srgb,var(--slate) 45%,var(--surface));color:var(--paper);z-index:4;cursor:grab;touch-action:none;overflow:visible;opacity:1;transform:none;filter:none}
.fp .bar:active{cursor:grabbing}
.fp .bar.status-active,.fp .bar.status-done,.fp .bar.status-risk{background:var(--spruce);border-color:var(--spruce);color:var(--paper)}
.fp .bar.status-risk{background:color-mix(in srgb,var(--red) 62%,var(--spruce));border-color:color-mix(in srgb,var(--red) 62%,var(--spruce))}
.fp .bar-label{display:block;padding:0 14px 0 5px;font:600 8.5px var(--body);line-height:15px;color:#F2F1EE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.fp .bar.status-active::after{content:"";position:absolute;right:5px;top:6px;width:4px;height:4px;border-radius:50%;background:var(--paper);opacity:.78;pointer-events:none}
.fp .bar.status-done::after{content:"✓";position:absolute;right:4px;top:0;color:var(--paper);font:700 9px/15px var(--data);opacity:.82;pointer-events:none}
.fp .bar-handle{position:absolute;top:0;bottom:0;width:7px;opacity:0;background:rgba(255,255,255,.5);cursor:ew-resize}
.fp .bar:hover .bar-handle,.fp .bar:focus .bar-handle{opacity:.45}
.fp .bar-handle.left{left:0;border-radius:5px 0 0 5px}
.fp .bar-handle.right{right:0;border-radius:0 5px 5px 0}
.fp .milestone{--milestone-color:var(--spruce);position:absolute;top:1px;width:25px;height:29px;z-index:4;cursor:ew-resize;touch-action:none}
.fp .milestone::before{content:"";position:absolute;left:7px;top:9px;width:11px;height:11px;transform:rotate(45deg);border-radius:2px;background:var(--milestone-color);box-shadow:0 0 0 2px var(--surface);opacity:.86}
.fp .milestone:hover::before,.fp .milestone:focus-visible::before{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,var(--surface))}
.fp .milestone:active{cursor:grabbing}
.fp .milestone.status-risk{--milestone-color:var(--red)}
.fp .milestone-label{position:absolute;z-index:4;top:8px;color:var(--muted);font-size:9px;font-weight:600;white-space:nowrap;pointer-events:none}
.fp .bar.critical{outline:1px dashed var(--red);outline-offset:2px}
.fp .milestone.critical::before{outline:1px dashed var(--red);outline-offset:3px}
.fp .critical-links,.fp .dependency-links{position:absolute;inset:0 auto auto 0;pointer-events:none;overflow:visible}
.fp .critical-links{z-index:6}
.fp .dependency-links{z-index:5}
.fp .critical-links path{fill:none;stroke:var(--red);stroke-width:1.6;stroke-dasharray:4 4;opacity:.95;vector-effect:non-scaling-stroke}
.fp .dependency-links path{fill:none;stroke:var(--red);stroke-width:1.2;stroke-dasharray:5 4;opacity:.55;vector-effect:non-scaling-stroke}
.fp .phase-row{min-height:34px;border-bottom-color:var(--line-strong)}
.fp .phase-info{position:sticky;left:0;z-index:9;padding:5px 9px;box-shadow:1px 0 var(--line-strong);display:grid;grid-template-columns:30px 20px minmax(0,1fr) 24px;align-items:center;gap:4px}
.fp .phase-info,.fp .phase-timeline,.fp .months,.fp .head-info{background-color:color-mix(in srgb,var(--surface-2) 66%,var(--surface))}
.fp .group-drag{width:30px;height:24px;border:0;border-radius:5px;padding:0;background:transparent;color:var(--faint);cursor:grab;touch-action:none;font-size:0;opacity:.25;white-space:nowrap}
.fp .group-drag::after{content:"⠿";font:500 13px var(--body)}
.fp .phase-row:hover .group-drag,.fp .phase-row:focus-within .group-drag{opacity:.68}
.fp .group-drag:hover,.fp .group-drag:focus-visible{opacity:1;color:var(--ink);background:color-mix(in srgb,var(--line) 72%,transparent)}
.fp .group-drag:active{cursor:grabbing}
.fp .phase-toggle{width:20px;height:24px;border:0;padding:0;background:transparent;color:var(--faint);font-size:12px;cursor:pointer}
.fp .phase-toggle:hover{color:var(--ink)}
.fp .phase-copy{min-width:0;display:flex;align-items:center}
.fp .group-name-button{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;padding:0;background:transparent;color:var(--muted);text-align:left;cursor:grab;touch-action:none;user-select:none;font:700 9.5px var(--data);letter-spacing:.09em;text-transform:uppercase}
.fp .group-name-button:active{cursor:grabbing}
.fp .group-name-button:hover{color:var(--ink)}
.fp .group-add{width:20px;height:20px;border:0;border-radius:5px;padding:0;background:transparent;color:var(--faint);font-size:15px;line-height:20px;cursor:pointer}
.fp .group-add:hover,.fp .group-add:focus-visible{color:var(--ink);background:var(--line)}
.fp .phase-timeline{min-height:34px;background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--month-w) - 1px),color-mix(in srgb,var(--line) 70%,transparent) calc(var(--month-w) - 1px),color-mix(in srgb,var(--line) 70%,transparent) var(--month-w))}
.fp .new-group-row{display:grid;grid-template-columns:var(--info-w) auto;min-height:38px}
.fp .new-group-pane{position:sticky;left:0;z-index:8;padding:6px 10px;background:var(--paper);box-shadow:1px 0 var(--line-strong)}
.fp .new-group-button{border:0;border-radius:6px;padding:5px 8px;background:transparent;color:var(--faint);font:inherit;font-size:11px;cursor:pointer}
.fp .new-group-button:hover,.fp .new-group-button:focus-visible{color:var(--ink);background:var(--surface-2)}

/* Dialogene: samme oppsett som Arcems, i Bonums farger */
dialog.fp-dialog{width:min(820px,calc(100vw - 28px));max-height:calc(100vh - 30px);padding:0;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-family:var(--body);font-size:13px}
dialog.fp-dialog::backdrop{background:rgba(35,31,32,.44);backdrop-filter:blur(3px)}
dialog.fp-dialog.group-dialog{width:min(480px,calc(100vw - 28px))}
dialog.fp-dialog.group-dialog .dialog-body{padding-bottom:26px}
dialog.fp-dialog.group-dialog .field{grid-column:1/-1}
.fp-dialog .eyebrow{font:700 10px/1.2 var(--data);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.fp-dialog .dialog-head{position:sticky;top:0;z-index:5;background:var(--surface);padding:20px 24px 15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:18px}
.fp-dialog .dialog-head h2{margin:3px 0 0;font:600 22px var(--display)}
.fp-dialog .dialog-close{border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.fp-dialog .dialog-body{padding:22px 24px;overflow:auto}
.fp-dialog .form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:13px}
.fp-dialog .field{grid-column:span 6;display:grid;gap:5px}
.fp-dialog .field.full{grid-column:1 / -1}
.fp-dialog .field.third{grid-column:span 4}
.fp-dialog .field label{color:var(--muted);font-size:11px;font-weight:650}
.fp-dialog .field input,.fp-dialog .field select,.fp-dialog .field textarea{width:100%;border:1px solid var(--line-strong);border-radius:7px;background:var(--paper);padding:8px 9px;font:inherit;color:var(--ink)}
.fp-dialog .field input:disabled{color:var(--muted);background:var(--surface-2)}
.fp-dialog .field textarea{min-height:64px;resize:vertical}
.fp-dialog .check{display:flex;align-items:center;gap:8px;min-height:36px;color:var(--muted);font-size:12px}
.fp-dialog .check input{width:auto;accent-color:var(--petrol)}
.fp-dialog .cost-hint{grid-column:1/-1;color:var(--muted);font-size:10px;margin-top:-3px}
.fp-dialog .dependency-hint{grid-column:1/-1;margin-top:-3px;padding:8px 10px;border-radius:7px;background:color-mix(in srgb,var(--surface-2) 65%,transparent);color:var(--muted);font-size:10.5px}
.fp-dialog .dialog-foot{position:sticky;bottom:0;z-index:5;background:var(--surface);padding:14px 24px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.fp-dialog .dialog-foot .push-left{margin-right:auto}
.fp-dialog .btn{border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);padding:7px 13px;font:600 12.5px var(--body);color:var(--ink);cursor:pointer;margin:0}
.fp-dialog .btn:hover{border-color:var(--teal)}
.fp-dialog .btn.primary{border-color:var(--spruce);background:var(--spruce);color:var(--on-petrol)}
.fp-dialog .btn.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--line));background:transparent}
@media (max-width:900px){.fp{--info-w:260px}}